/* DEBUNK — shared base styles: fonts, palette variables, controls used by every minigame.
   Shell-specific styling lives in css/style.css. Do not rename these classes. */
@font-face { font-family: 'Pixelify'; src: url('../fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('../fonts/pixelify-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('../fonts/pixelify-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pixelify'; src: url('../fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Press2P'; src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink:#181425; --night:#262b44; --slate:#3a4466; --steel:#5a6988; --fog:#8b9bb4; --mist:#c0cbdc; --white:#ffffff;
  --deepsea:#124e89; --sea:#0099db; --sky:#2ce8f5; --pine:#193c3e; --forest:#265c42; --leaf:#3e8948; --grass:#63c74d;
  --lemon:#fee761; --gold:#feae34; --orange:#f77622; --red:#e43b44; --crimson:#a22633; --plum:#3e2731; --brown:#733e39;
  --clay:#b86f50; --tan:#e4a672; --sand:#ead4aa; --rust:#be4a2f; --copper:#d77643; --magenta:#ff0044; --purple:#68386c;
  --pink:#b55088; --rose:#f6757a; --skin:#e8b796; --skin2:#c28569;
  --font: 'Pixelify', 'Trebuchet MS', system-ui, sans-serif;
  --font-title: 'Press2P', 'Pixelify', monospace;
  --u: clamp(13px, 1.15vw + 0.55vh, 22px);   /* base UI unit; text sizes derive from it */
}

.db-game, .db-game * { box-sizing: border-box; }
.db-game { position: absolute; inset: 0; overflow: hidden; font-family: var(--font); color: var(--white);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }

/* Pixel button: chunky, stepped border, press-down feel */
.db-btn { font-family: var(--font); font-weight: 700; font-size: calc(var(--u) * 1.0); line-height: 1; color: var(--ink);
  background: var(--sand); border: 0; padding: .7em 1.1em .8em; margin: .2em; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; gap: .45em; letter-spacing: .02em;
  box-shadow: 0 -.18em 0 0 var(--ink) inset, 0 0 0 .16em var(--ink), .16em .26em 0 .16em rgba(24,20,37,.55);
  transition: transform .06s, filter .1s; touch-action: manipulation; min-height: 2.6em; text-decoration: none; }
.db-btn:hover { filter: brightness(1.08); }
.db-btn:active, .db-btn.held { transform: translateY(.14em); box-shadow: 0 -.06em 0 0 var(--ink) inset, 0 0 0 .16em var(--ink), .1em .12em 0 .16em rgba(24,20,37,.55); }
.db-btn:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .3em; }
.db-btn.big { font-size: calc(var(--u) * 1.25); padding: .8em 1.4em .9em; }
.db-btn.go { background: var(--grass); }
.db-btn.warn { background: var(--gold); }
.db-btn.danger { background: var(--rose); }
.db-btn.blue { background: var(--sky); }
.db-btn.on { background: var(--lemon); }
.db-btn[disabled] { opacity: .45; pointer-events: none; }
.db-btn .ico { font-size: 1.1em; }

/* Bottom control bar for games */
.db-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .3em; justify-content: center;
  align-items: center; padding: .6em .8em calc(.7em + env(safe-area-inset-bottom)); z-index: 5; pointer-events: none; }
.db-bar > * { pointer-events: auto; }

/* Range slider, chunky pixel style */
.db-slider { display: inline-flex; align-items: center; gap: .6em; background: rgba(24,20,37,.78); padding: .5em .8em;
  box-shadow: 0 0 0 .16em var(--ink); color: var(--white); font-weight: 700; font-size: calc(var(--u) * .95); margin: .2em; }
.db-slider .val { min-width: 4.5em; color: var(--lemon); }
.db-slider input[type=range] { -webkit-appearance: none; appearance: none; width: clamp(140px, 22vw, 320px); height: 1.6em; background: transparent; cursor: pointer; touch-action: none; }
.db-slider input[type=range]::-webkit-slider-runnable-track { height: .5em; background: var(--steel); box-shadow: 0 0 0 .12em var(--ink); }
.db-slider input[type=range]::-moz-range-track { height: .5em; background: var(--steel); box-shadow: 0 0 0 .12em var(--ink); }
.db-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3em; height: 1.6em; margin-top: -.55em; background: var(--lemon); box-shadow: 0 0 0 .14em var(--ink), 0 .2em 0 .14em var(--ink); border: 0; }
.db-slider input[type=range]::-moz-range-thumb { width: 1.3em; height: 1.6em; background: var(--lemon); box-shadow: 0 0 0 .14em var(--ink); border: 0; border-radius: 0; }

/* Floating in-game label / readout */
.db-label { position: absolute; z-index: 4; font-weight: 700; font-size: calc(var(--u) * .95); color: var(--white);
  background: rgba(24,20,37,.8); padding: .35em .6em; box-shadow: 0 0 0 .14em var(--ink); pointer-events: none; white-space: nowrap; }
.db-label.big { font-size: calc(var(--u) * 1.4); color: var(--lemon); }
.db-label.center { left: 50%; transform: translateX(-50%); }

/* Generic panel */
.db-panel { background: var(--sand); color: var(--ink); box-shadow: 0 0 0 .18em var(--ink), .3em .4em 0 .18em rgba(24,20,37,.5); padding: 1em 1.2em; }

/* Visually hidden (screen-reader text) */
.db-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .db-btn { transition: none; } }