@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------------ DANBLE play screen
 * Palette, type and metrics lifted from mockups/design/Main.dc.html, Shop.dc.html,
 * Attack.dc.html, Drift.dc.html and Penalty.dc.html (390 x 844 mockups).
 * Everything is namespaced under .danble-game so it cannot leak into the shell.
 * ------------------------------------------------------------------ */

.danble-game {
  --g-bg:        #04131c;
  --g-panel:     #081f2b;
  --g-line:      #16394b;

  --g-ink:       #dceef8;
  --g-lab:       #7aa6bd;
  --g-lab-2:     #5f93ad;
  --g-lab-3:     #4d7f99;
  --g-lab-4:     #33566b;

  --g-face:      #f2f6f9;
  --g-face-ring: #cbd9e3;

  --g-teal:      #2dd4bf;
  --g-red:       #ef4a51;
  --g-gold:      #f6c453;
  --g-gold-deep: #b8862a;

  --g-btn:       #133445;
  --g-btn-line:  #2b6a86;
  --g-btn-ico:   #7fd4ee;

  --g-node:      rgba(19,52,69,.97);
  --g-node-off:  rgba(12,34,46,.9);
  --g-node-off-line: #1a3d51;
  --g-node-off-ink:  #41647a;
  --g-price-off: #6b6247;

  --g-back:      #0b2b3a;
  --g-back-ring: #164e63;
  --g-back-hub:  #155e75;
  --g-back-line: #1c4a61;
  --g-numeral:   #e0f2fe;

  --g-rail-h: 148px;
  --g-tile-h: 54px;
  --g-tile-gap: 8px;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.danble-game .disp {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  letter-spacing: -.01em;
}
.danble-game .lab {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-lab);
  font-weight: 600;
}

/* ------------------------------------------------------------------ session score bar */

.g-top {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  padding: 10px 22px 9px;
  background: var(--g-panel);
  border-bottom: 1px solid var(--g-line);
}

.g-seat { min-width: 0; }
.g-seat--r { text-align: right; }

.g-seat__name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-lab);
  font-weight: 600;
}
.g-seat.is-you .g-seat__name { color: var(--g-teal); }

.g-seat__score {
  display: block;
  font-size: 26px;
  line-height: 1.05;
  margin-top: 2px;
  color: var(--g-ink);
}

/* opponent card count: a small number beneath their name (DESIGN > App flow knock-on) */
.g-seat__cards { display: none; align-items: baseline; gap: 6px; margin-top: 1px; }
.g-seat.is-them .g-seat__cards { display: flex; }
.g-seat--r .g-seat__cards { justify-content: flex-end; }
.g-seat__cards b {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--g-ink);
}
.g-seat__cards span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-lab-3);
  font-weight: 600;
  white-space: nowrap;
}

/* the drain bar spans between the two corners */
/* the opponent drain bar is gone - the number under their name says it */

/* ------------------------------------------------------------------ board */

.g-boardwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: start center;
  overflow: hidden;
}

.g-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--board-scale, 1));
  transform-origin: top center;
}

/* The "centre" label is gone: with the 172px rail there is no room for it, and
 * with two disks on screen - one of them the big one under your thumb - it was
 * labelling the obvious. Reclaims 29px, which is what lets the card stay 320. */

.g-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  margin: 6px 0 4px;
  padding: 0 12px;
  max-width: 390px;
}

.g-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c) 33%, transparent);
  animation: g-badge-in .18s ease-out;
}
.g-badge > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.g-badge > span {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
}
@keyframes g-badge-in { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }

/* ------------------------------------------------------------------ disks */

.g-disk {
  position: relative;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--g-face);
  box-shadow: 0 10px 30px rgba(0,0,0,.55),
              0 0 0 3px var(--g-face-ring) inset,
              0 0 0 6px rgba(255,255,255,.06);
  overflow: hidden;
  flex: 0 0 auto;
}

/* filters compose through independent custom properties: each effect owns its
   own slot, so GREYSCALE and MURK can never overwrite one another. */
.g-disk__face {
  position: absolute;
  inset: 0;
  filter: var(--fx-grey, ) var(--fx-murk, ) var(--fx-extra, );
}

.g-disk__fx {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.g-disk__fx > * { position: absolute; inset: 0; }

.dk-sprite {
  position: absolute;
  transform: translate(var(--sx, 0px), var(--sy, 0px));
  pointer-events: none;   /* resolution is by hit model, never by DOM geometry */
  will-change: transform;
}
.dk-sprite > svg { display: block; width: 100%; height: 100%; }

.g-disk--own { cursor: pointer; }
.g-disk.is-dead { pointer-events: none; }

/* face-down card back */
.dk-back { position: absolute; inset: 0; background: var(--g-back); z-index: 60;
           box-shadow: 0 0 0 3px var(--g-back-line) inset; }
.dk-back > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dk-back__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Archivo Black','Archivo',system-ui,sans-serif;
  color: var(--g-numeral);
}
.dk-back__mark .wordmark { font-size: calc(var(--d) * .105); letter-spacing: .22em; opacity: .82; }
.dk-back__mark .count    { font-size: calc(var(--d) * .425); line-height: 1; }

.dk-flip { animation: dk-flip .34s cubic-bezier(.4,0,.2,1); }
@keyframes dk-flip {
  0%   { transform: rotateX(0deg)   scale(1); }
  45%  { transform: rotateX(78deg)  scale(.94); }
  100% { transform: rotateX(0deg)   scale(1); }
}

.dk-tap {
  position: absolute; z-index: 55; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(45,212,191,.9);
  animation: dk-tap .34s ease-out forwards;
}
@keyframes dk-tap { from { opacity:.9; transform:scale(.4) } to { opacity:0; transform:scale(1.5) } }

/* ------------------------------------------------------------------ bottom dock */

/* ============================================================ the rail
 *
 * Variation A: all eight sabotages permanently on screen in a 4x2 grid, cheap
 * tier on the near row. No shop to open - the mode switch was the problem.
 * Geometry lifted from mockups/design-shop/Main.dc.html.
 */

.g-rail {
  flex: 0 0 auto;
  position: relative;
  min-height: var(--g-rail-h);
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  background: var(--g-panel);
  border-top: 1px solid var(--g-line);
  z-index: 3;
}

.g-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 15px 0;
  height: 20px;
}

.g-rail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g-tile-gap);
  padding: 6px 15px 0;
}

/* ------------------------------------------------------------ head */

/* Coins and cards-left are reference information, not the main event: no pill
 * around the coins, and everything a size down so the head costs 20px instead
 * of 32px. Every pixel saved here is budget for the disks. */

.g-cards { display: flex; align-items: baseline; gap: 5px; }
.g-cards__n { font-size: 14px; line-height: 1; }
/* `.danble-game .lab` is (0,2,0), so a bare `.g-cards__of` cannot resize it. */
.danble-game .g-cards__of { font-size: 9.5px; letter-spacing: .14em; color: var(--g-lab-3); }

.g-coins { display: flex; align-items: center; gap: 5px; }
.g-coins__n { font-size: 14px; color: var(--g-gold); line-height: 1; }
.g-coins svg { width: 14px; height: 14px; }
.g-coins.is-bump { animation: g-bump .34s ease-out; }
.g-coins.is-deny { animation: g-deny .34s ease-out; }
/* game.js toggles the two classes above to flash the purse; without these
 * keyframes the animations resolve to nothing and the flash never happens. */
@keyframes g-bump {
  0%   { transform: scale(1);    filter: none; }
  35%  { transform: scale(1.28); filter: brightness(1.5); }
  100% { transform: scale(1);    filter: none; }
}
@keyframes g-deny {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  55%      { transform: translateX(4px); }
  80%      { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .g-coins.is-bump, .g-coins.is-deny { animation: none; }
}

/* ------------------------------------------------------------ tiles */

.g-tile {
  position: relative;
  height: var(--g-tile-h);
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border-radius: 14px;
  background: var(--g-node);
  border: 2px solid var(--g-btn-line);
  color: var(--g-ink);
  font: inherit;
  cursor: pointer;
  touch-action: none;              /* the hold gesture owns the pointer */
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.g-tile__icon { display: block; }
/* GREYSCALE is the longest label and was painting outside the 84px tile.
 * The markup is `<span class="lab g-tile__name">`, and `.danble-game .lab` is
 * (0,2,0) - a bare `.g-tile__name` (0,1,0) loses to it however far down the
 * file it sits, so the size has to be set at matching weight or the label
 * silently falls back to 11px/.18em and overflows again. */
.danble-game .g-tile__name {
  font-size: 9px;
  letter-spacing: .02em;
  line-height: 1;
  color: currentColor;
  max-width: 100%;
  overflow: hidden;          /* belt and braces: never paint past the tile */
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.g-tile__price {
  position: absolute; right: -5px; top: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--g-bg);
  border: 1.5px solid var(--g-gold);
  display: grid; place-items: center;
  font-size: 11px; color: var(--g-gold); line-height: 1;
}

/* DREDGE is the anvil - it reads red the moment you can afford it */
.g-tile[data-sabotage="DREDGE"]:not(.is-off) {
  border-color: var(--g-red);
  background: rgba(72,20,26,.97);
}

.g-tile.is-off {
  background: var(--g-node-off);
  border-color: var(--g-node-off-line);
  color: var(--g-node-off-ink);
  box-shadow: none;
  cursor: default;
}
.g-tile.is-off .g-tile__price { border-color: var(--g-price-off); color: var(--g-price-off); }

/* ------------------------------------------------------------ tap feedback
 *
 * A tap buys immediately, so the only job here is to confirm the hit landed.
 */

.g-tile__ring {
  position: absolute; inset: -2px;
  border-radius: 14px;
  pointer-events: none;
  background: var(--g-teal);
  opacity: 0;
}
.g-tile.is-hit { animation: g-tilehit .22s ease-out; }
.g-tile.is-hit .g-tile__ring { animation: g-tileflash .22s ease-out; }
@keyframes g-tilehit   { 0% { transform: scale(.94) } 100% { transform: scale(1) } }
@keyframes g-tileflash { 0% { opacity: .28 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .g-tile.is-hit, .g-tile.is-hit .g-tile__ring { animation: none; }
}

.g-ready {
  position: absolute; left: 22px; right: 22px; bottom: 24px; height: 72px;
  z-index: 45; border: 0; border-radius: 999px;
  background: var(--g-teal); color: #04131c;
  font-family: 'Archivo Black','Archivo',system-ui,sans-serif;
  font-size: 22px; letter-spacing: .18em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  transition: transform .12s ease, opacity .18s ease;
}
.g-ready[hidden] { display: none; }
.g-ready:active { transform: scale(.98); }
.g-ready.is-waiting {
  background: transparent; color: var(--g-lab);
  border: 2px solid var(--g-line); box-shadow: none;
  font-size: 15px;
}

.g-banner {
  position: absolute; inset: 0; z-index: 55; pointer-events: none;
  animation: g-fade .2s ease-out;
}
@keyframes g-fade { from { opacity: 0 } to { opacity: 1 } }
.g-banner[hidden] { display: none; }
.g-banner__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,19,28,.50) 0%, rgba(52,9,15,.88) 100%);
}
.g-banner__body { position: absolute; left: 0; right: 0; top: 35%; text-align: center; }
.g-banner__title {
  font-family: 'Archivo Black','Archivo',system-ui,sans-serif;
  font-size: 50px; letter-spacing: .03em; color: var(--g-red); line-height: 1;
}
.g-banner__sub {
  margin-top: 14px; font-size: 11px; font-weight: 600;
  color: #f3b3b6; letter-spacing: .2em; text-transform: uppercase;
}
.g-banner__delta {
  margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: 'Archivo Black','Archivo',system-ui,sans-serif;
}
.g-banner__delta .from { font-size: 42px; color: #5f8ba3; }
.g-banner__delta .to   { font-size: 62px; color: var(--g-red); }

/* ------------------------------------------------------------------ short screens */

@media (max-height: 700px) {
  .g-badges { margin: 8px 0 6px; }
}


/* ============================================================ countdown
 *
 * These rules went missing when the dock was replaced by the rail, which left
 * `.g-veil` as an unstyled div in normal flow - it shunted the layout down and
 * rendered 3-2-1 as bare text in the corner instead of over the board.
 */

.g-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(4, 19, 28, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.g-veil[hidden] { display: none; }

.g-count {
  font-size: 132px;
  line-height: 1;
  color: var(--g-numeral);
  text-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.g-count.is-beat { animation: g-beat .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes g-beat {
  0%   { transform: scale(1.5); opacity: 0; }
  18%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.94); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .g-count.is-beat { animation: none; }
}