/* Base layout, the arcade panel language and the main menu. */
:root {
  --ink: #0d0a14;
  --panel: #262036;
  --panel-2: #1a1526;
  --panel-hi: #3d3452;
  --edge: #0a0710;
  --gold: #ffd24a;
  --gold-2: #ff9f1c;
  --green: #6ee36a;
  --green-2: #2f9e46;
  --violet: #a561ff;
  --violet-2: #6a2fd0;
  --cyan: #64d8ff;
  --red: #ff4a6a;
  --text: #f4efff;
  --dim: #b3a8cc;
  --font: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  --r: 12px;

  /* Safe-area insets, resolved once here so every HUD corner can add them to
     its own offset. Inside the CrazyGames app the game runs fullscreen, so on a
     notched phone the level crest and the wallet would otherwise sit under the
     notch or the home indicator. `env()` is 0 everywhere it does not apply, so
     these are inert on desktop. */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0810;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  /* Kills the browser's own pan and double-tap-zoom so the game owns every
     gesture. This is inherited in effect — a pan starting anywhere inside body
     is disallowed — so any element that genuinely needs to scroll has to opt
     back in with its own `touch-action` (see .modal-body in panels.css). */
  touch-action: none;
  /* Stops the grey flash Chrome and Safari paint over a tapped button. */
  -webkit-tap-highlight-color: transparent;
}

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#labels, #floaters {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5;
}

/* Soft vignette so the dungeon edges fall away into the dark. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.72) 100%);
}

.hidden { display: none !important; }

/* ---------------------------------------------------- shared panel look */
.panel {
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 22%, var(--panel-2) 100%);
  border: 3px solid var(--edge);
  border-radius: var(--r);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16),
              inset 0 -3px 0 rgba(0, 0, 0, 0.5),
              0 6px 0 rgba(0, 0, 0, 0.45),
              0 10px 24px rgba(0, 0, 0, 0.55);
}

.arcade {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000,
               2px 2px 0 #000, -2px 2px 0 #000, 0 4px 0 rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------ world-space text */
.floater {
  position: absolute; left: 0; top: 0;
  font-weight: 900; font-size: 17px;
  color: #fff;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 0 3px 6px rgba(0,0,0,.7);
  white-space: nowrap;
  will-change: transform, opacity;
}
.floater.dmg   { color: #ffe9a8; }
.floater.crit  { color: #ff8a4a; font-size: 22px; }
.floater.gold  { color: var(--gold); }
.floater.miss  { color: #9fb6d8; font-size: 14px; }
.floater.thud  { color: #ffd24a; font-size: 26px; letter-spacing: 0.08em; }
.floater.exec  { color: #ff5a7a; font-size: 20px; }
.floater.vortex{ color: var(--violet); font-size: 20px; }
.floater.barrier { color: #fff2a8; font-size: 16px; }

/* monster level tags floating over the board — sticker text, no chrome */
.mlabel {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%);
  font-size: 12px; font-weight: 900; letter-spacing: .01em; line-height: 1.15;
  color: #fff; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000,
               2px 2px 0 #000, -2px 2px 0 #000, 0 3px 5px rgba(0,0,0,.8);
}
.mlabel b { color: #fff; }
.mlabel.deployed b { color: var(--gold); }
.mlabel b.syn, .mlabel .syn { color: var(--cyan); }

/* ---------------------------------------------------------------- menu */
/* The bubbly menu itself lives in styles/menu.css; this is just the shell
   and the shared chunky button used by the modal panels. */
.screen {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, #2a1140 0%, #140a1e 45%, #08050c 100%);
}

.mbtn {
  width: 340px; padding: 15px 18px;
  font-family: var(--font); font-size: 18px; font-weight: 900; letter-spacing: .06em;
  color: #1c1226; cursor: pointer;
  background: linear-gradient(180deg, #ffe9a0, var(--gold) 40%, var(--gold-2));
  border: 3px solid var(--edge); border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 6px 0 #7a4a12, 0 12px 24px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
.mbtn:hover { filter: brightness(1.07); }
.mbtn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 2px 0 #7a4a12; }
.mbtn.primary { font-size: 21px; padding: 19px 18px; }
.mbtn.ghost {
  background: linear-gradient(180deg, #4a4062, #2a2338);
  color: var(--text); box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 5px 0 #14101e;
  font-size: 15px; padding: 12px 18px; width: 300px;
}
.mbtn.ghost.danger { color: #ff9db0; }
.mbtn:disabled { opacity: .38; filter: grayscale(.85); cursor: not-allowed; box-shadow: none; }

/* --------------------------------------------------------- wave banner
 * The bubbly kit frame (docs/BUBBLY-UI-PROMPTS.md, piece 12): a puffy violet
 * ribbon with a golden rim and an EMPTY recessed centre — the text is live
 * DOM, sized in vw to stay proportionate on a phone. The boss halo is not
 * baked in — it is a drop-shadow here so only boss waves light up.
 */
.banner {
  position: fixed; left: 50%; top: 32%; z-index: 25;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  /* Sized to clear the wave plaque above it rather than to fill the screen. */
  width: clamp(300px, 40vw, 560px); aspect-ratio: 1024 / 425;
  background: url('../assets/ui/bub-banner.webp') center/contain no-repeat;
  animation: bannerIn 2.1s ease-out forwards;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.7));
}
.banner span {
  display: block; padding-bottom: 1%;
  font-size: clamp(20px, 3.1vw, 34px); font-weight: 900; letter-spacing: .05em;
  color: var(--gold);
  text-shadow: 0 4px 0 #000, 0 -3px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 10px 30px rgba(0,0,0,.8);
}
.banner.boss { filter: drop-shadow(0 8px 18px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,45,63,.9)); }
.banner.boss span { color: #ff5a7a; }
/* Every frame that touches `transform` has to restate the centring translate.
   An animated `transform` REPLACES the one on the rule — it does not compose with
   it — so keyframes carrying only `scale()` dropped the `translate(-50%, -50%)`
   and left the banner sitting half its own width right and half its height low
   for the whole animation (and after it, because of `forwards`). It was off by
   exactly +256px on a 1280px screen and +150px on a 390px one.
   The 75% frame is deliberately transform-free: it interpolates between 28% and
   100%, so adding one there would flatten the drift-upward exit. */
@keyframes bannerIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5) translateY(20px); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  28%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) translateY(-20px); }
}

/* ---------------------------------------------------------- gain popup
 * The Warlord Gift's prize reveal: the kit's cream toy-plastic plate with the
 * prize icon (codex atlas portrait for a monster, kit icon for a timed
 * reward) and one line of text. Fades on its own like the wave banner. */
.gain-pop {
  position: fixed; left: 50%; top: 36%; z-index: 26;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #fff6e6, #ffe9c8);
  border: 3px solid #5a3216; border-radius: 16px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.5);
  animation: gainIn 2.6s ease-out forwards;
}
.gp-ico { width: 56px; height: 56px; flex: none; background-position: center; background-repeat: no-repeat; background-size: contain; }
/* A codex-atlas portrait cell: same 10x5 grid trick as the codex itself. */
.gp-ico.atlas { background-image: url('../assets/ui/monsters.webp'); background-size: 1000% 500%; }
.gp-text { font-size: 15px; font-weight: 900; color: #2b1a44; }
@keyframes gainIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}