/* frontend/gulls.css — GULLS board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Caravan precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's CLASSIC scheme (docs/design/Batch6/GullsBoard.dc.html,
 * `[data-gulls="classic"]`). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits
 * outside `.gu-root`. Gulls are SHAPE first (● ▲ ■ ◆ ★ in `.gu-av`), never colour.
 *
 * ── 🎨 THE PIXEL / ARCADE SCHEMES COME LATER, AS A TOGGLE (mock 1m/1n/1o) ─────
 * Radii, borders and fonts are variables (`--gu-r*`, `--gu-bd`, `--gu-ui`): a scheme is a class that
 * redefines them and colours, and NOTHING ELSE. ⚖️ Row 18: pairing the hand-drawn prize art with the pixel
 * scheme is decided when that toggle is built.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements by CSS grid. Every row is a FIXED size except the PILE BAND. Every text box is
 * a fixed width or fills its slot; the PILE TOTAL pill is one fixed width (GU-M11). Feedback changes
 * colour, glow or a transform — never size or spacing.
 */

#gulls-game-screen, .gu-root {
  --gu-bg: radial-gradient(120% 95% at 50% -12%, #fbf3e2 0%, #efe0c2 52%, #dfcba4 100%);
  --gu-deck: repeating-linear-gradient(90deg, rgba(80, 58, 34, .07) 0 2px, transparent 2px 46px);
  --gu-panel: rgba(255, 255, 255, .66); --gu-panel2: rgba(255, 255, 255, .4); --gu-line: rgba(48, 36, 22, .22);
  --gu-txt: #2a2016; --gu-dim: rgba(42, 32, 22, .6); --gu-pill: rgba(48, 36, 22, .08);
  --gu-cardFace: #fffdf5; --gu-cardTxt: #2a2016; --gu-cardEdge: rgba(42, 32, 22, .3);
  --gu-backFace: repeating-linear-gradient(135deg, #6d97a3 0 6px, #5c8290 6px 12px); --gu-backTxt: #f4fbfc;
  --gu-used: rgba(42, 32, 22, .07); --gu-usedTxt: rgba(42, 32, 22, .34); --gu-usedLine: rgba(42, 32, 22, .16);
  --gu-lockTxt: rgba(42, 32, 22, .62); --gu-lockBg: #f6efdf;
  --gu-gone: repeating-linear-gradient(135deg, rgba(42, 32, 22, .14) 0 3px, rgba(42, 32, 22, .04) 3px 6px);
  --gu-sel: oklch(.5 .1 220); --gu-selInk: #ffffff;
  --gu-ok: oklch(.5 .11 152); --gu-okInk: #ffffff; --gu-okPress: oklch(.42 .11 152);
  --gu-snack: oklch(.52 .12 62); --gu-snackInk: #ffffff;
  --gu-crab: oklch(.5 .16 25); --gu-crabInk: #ffffff;
  --gu-crabHatch: repeating-linear-gradient(135deg, oklch(.5 .16 25) 0 7px, oklch(.42 .14 25) 7px 14px);
  --gu-win: oklch(.62 .13 95); --gu-winGlow: oklch(.62 .13 95 / .5);
  --gu-cancel: oklch(.45 .05 280); --gu-cancelInk: #ffffff;
  --gu-ui: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --gu-rS: 6px; --gu-rM: 10px; --gu-rL: 14px; --gu-bd: 1px;
  --gu-shadow: 0 2px 6px rgba(40, 28, 14, .14); --gu-cardShadow: 0 3px 0 rgba(42, 32, 22, .18);
}

@keyframes gu-pulse { 0%, 100% { opacity: .62 } 50% { opacity: 1 } }
@keyframes gu-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--gu-win), 0 0 12px 2px var(--gu-winGlow) } 50% { box-shadow: 0 0 0 4px var(--gu-win), 0 0 22px 7px var(--gu-winGlow) } }
@keyframes gu-squabble { 0%, 100% { transform: rotate(-7deg) } 30% { transform: rotate(4deg) translateY(-2px) } 65% { transform: rotate(-12deg) translateY(2px) } }
@keyframes gu-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes gu-feather { 0% { transform: translate(0, 0) rotate(0); opacity: 0 } 20% { opacity: .9 } 100% { transform: translate(var(--fx, 6px), var(--fy, 16px)) rotate(160deg); opacity: 0 } }
@keyframes gu-flipin { 0% { transform: perspective(900px) rotateY(-90deg) } 100% { transform: perspective(900px) rotateY(0) } }
@keyframes gu-reveal { 0% { transform: perspective(600px) rotateY(90deg) } 100% { transform: perspective(600px) rotateY(0) } }
@keyframes gu-popup { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes gu-rise { 0% { opacity: 0; transform: translateY(6px) } 100% { opacity: 1; transform: none } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.gu-setup-card { max-width: 540px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.gu-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.gu-setup-title { margin: 0; font-size: 28px; }
.gu-setup-blurb, .gu-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.gu-setup-hint { opacity: .75; font-size: 13px; }
.gu-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gu-setup-lab { font-weight: 700; font-size: 13px; min-width: 52px; }
.gu-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.gu-opt { width: 40px; height: 36px; border-radius: 10px; border: 1px solid rgba(128, 128, 128, .4); background: rgba(255, 255, 255, .06); color: inherit; font-weight: 800; cursor: pointer; }
.gu-opt[data-on="1"] { border-color: #d9a54a; color: #d9a54a; box-shadow: 0 0 12px -4px #d9a54a; }
.gu-start { height: 48px; border: 0; border-radius: 12px; background: var(--gu-ok); color: var(--gu-okInk); font-weight: 800; font-size: 16px; cursor: pointer; }
@media (hover: hover) { .gu-start:hover, .gu-opt:hover { filter: brightness(1.1); } }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.gu-root {
  --gu-pad: 10px; --gu-gap: 8px; --gu-hdrH: 34px; --gu-rivalH: 68px; --gu-slotW: 40px; --gu-slotH: 40px; --gu-slotFs: 17px; --gu-badgeH: 11px;
  --gu-stripW: 9px; --gu-stripH: 13px; --gu-stripFs: 0px; --gu-prizeW: 84px; --gu-prizeH: 104px; --gu-prizeFs: 20px;
  --gu-cardH: 48px; --gu-cardFs: 21px; --gu-fanStep: 28px; --gu-feedH: 30px; --gu-meH: 44px; --gu-nameFs: 12px; --gu-metaFs: 10px;
  --gu-totalW: 300px; --gu-totalH: 34px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--gu-phone-h, 740px); padding: var(--gu-pad);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--gu-hdrH) auto minmax(0, 1fr) var(--gu-feedH) auto;
  grid-template-areas: "head" "rivals" "pile" "feed" "you";
  gap: var(--gu-gap);
  background: var(--gu-deck), var(--gu-bg);
  color: var(--gu-txt); font-family: var(--gu-ui);
  border-radius: var(--gu-rL); box-shadow: inset 0 0 0 1px var(--gu-line);
  user-select: none; -webkit-user-select: none;
}
.gu-root *, .gu-root *::before, .gu-root *::after { box-sizing: border-box; }
.gu-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.gu-root i, .gu-root em { font-style: normal; }

/* header */
.gu-head { grid-area: head; display: flex; align-items: center; gap: var(--gu-gap); min-width: 0; white-space: nowrap; }
.gu-pill { flex: none; height: 100%; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--gu-rM); background: var(--gu-pill); border: var(--gu-bd) solid var(--gu-line); font: 700 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .08em; }
.gu-num { display: inline-block; font-variant-numeric: tabular-nums; }
.gu-roundp .gu-num { width: 5.4ch; text-align: left; }
@media (min-width: 1000px) { .gu-roundp .gu-num { width: 8.6ch; } }
.gu-leftn { width: 2ch; text-align: right; }
.gu-hsp { flex: 1 1 auto; }
.gu-mode { flex: none; height: 100%; display: flex; align-items: center; padding: 0 8px; border-radius: var(--gu-rM); border: var(--gu-bd) dashed var(--gu-line); color: var(--gu-dim); font: 700 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .08em; }
.gu-menu { flex: none; width: 34px; height: 28px; border: var(--gu-bd) solid var(--gu-line); border-radius: 999px; cursor: pointer; font-size: 14px; background: var(--gu-panel); color: var(--gu-txt); }
@media (hover: hover) { .gu-menu:hover { box-shadow: 0 0 0 2px var(--gu-sel); } }
.gu-menu:active { transform: translateY(1px); }

/* avatars: the SHAPE is the identity */
.gu-av { flex: none; width: calc(var(--gu-nameFs) + 8px); height: calc(var(--gu-nameFs) + 8px); border-radius: 50%; background: var(--gu-panel2); border: var(--gu-bd) solid var(--gu-line); display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--gu-nameFs) - 3px); line-height: 1; }

/* ── rivals ─────────────────────────────────────────────────────────────── */
.gu-rivals { grid-area: rivals; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gu-gap); min-width: 0; }
.gu-rivals[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.gu-rival { position: relative; height: var(--gu-rivalH); min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-radius: var(--gu-rM); background: var(--gu-panel); border: var(--gu-bd) solid var(--gu-line); box-shadow: var(--gu-shadow); cursor: pointer; transition: box-shadow .12s, border-color .12s; }
@media (hover: hover) { .gu-rival:hover { box-shadow: 0 0 0 2px var(--gu-sel), var(--gu-shadow); } }
.gu-rival:active { transform: translateY(1px); }
.gu-rival[data-open="1"] { box-shadow: 0 0 0 2px var(--gu-sel), var(--gu-shadow); }
.gu-rival[data-res="win"], .gu-rival[data-res="pinch"] { border-color: var(--gu-win); }
.gu-rtop { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.gu-rinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gu-rname { display: flex; align-items: center; gap: 5px; min-width: 0; height: calc(var(--gu-nameFs) + 8px); }
.gu-rname b { font: 700 var(--gu-nameFs)/1 var(--gu-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gu-rline { display: flex; align-items: center; gap: 6px; min-width: 0; height: calc(var(--gu-nameFs) + 4px); }
.gu-score { display: inline-block; width: 3.4ch; flex: none; font: 800 calc(var(--gu-nameFs) + 1px)/1 var(--gu-ui); font-variant-numeric: tabular-nums; }
.gu-score[data-pop="up"], .gu-score[data-pop="down"] { animation: gu-popup .5s ease-out; }
.gu-rleft { flex: 1 1 auto; min-width: 0; font: 700 var(--gu-metaFs)/1 var(--gu-ui); color: var(--gu-dim); white-space: nowrap; overflow: hidden; }
.gu-status { display: none; }
.gu-strip { margin-top: auto; display: flex; gap: 1px; }
.gu-tick { flex: none; width: var(--gu-stripW); height: var(--gu-stripH); border-radius: 2px; display: flex; align-items: center; justify-content: center; font: 700 var(--gu-stripFs)/1 var(--gu-ui); font-variant-numeric: tabular-nums; overflow: hidden; color: var(--gu-cardTxt); background: var(--gu-cardFace); border: 1px solid var(--gu-cardEdge); }
.gu-tick[data-st="spent"] { background: transparent; color: var(--gu-usedTxt); border: 1px dashed var(--gu-usedLine); }

/* ── the bid slot (every gull, you included) ─────────────────────────────── */
.gu-slot { position: relative; flex: none; width: var(--gu-slotW); height: var(--gu-slotH); border-radius: var(--gu-rS); display: flex; align-items: center; justify-content: center; padding-bottom: var(--gu-badgeH); font: 800 var(--gu-slotFs)/1 var(--gu-ui); font-variant-numeric: tabular-nums; overflow: visible; border: var(--gu-bd) dashed var(--gu-line); color: var(--gu-dim); background: transparent; }
.gu-slotn { position: relative; z-index: 1; line-height: 1; }
.gu-slot[data-kind="pick"] { color: var(--gu-sel); border-style: solid; border-color: var(--gu-sel); }
.gu-slot[data-kind="back"] { background: var(--gu-backFace); color: var(--gu-backTxt); border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: var(--gu-cardShadow); font-size: var(--gu-metaFs); }
.gu-slot[data-kind="face"] { background: var(--gu-cardFace); color: var(--gu-cardTxt); border: var(--gu-bd) solid var(--gu-cardEdge); }
.gu-root[data-phase="reveal"] .gu-slot[data-kind="face"] { animation: gu-reveal .38s ease-out both; }
.gu-slot[data-res="out"] { opacity: .6; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="win"] { animation: gu-reveal .38s ease-out both, gu-glow 1.4s ease-in-out .4s infinite; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] { box-shadow: 0 0 0 2px var(--gu-cancel); animation: gu-reveal .38s ease-out both, gu-squabble .7s ease-in-out .4s infinite; }
.gu-slot[data-res="pinch"] { box-shadow: 0 0 0 3px var(--gu-crab); }
.gu-sbadge { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gu-badgeH); display: flex; align-items: center; justify-content: center; font: 800 8px/1 var(--gu-ui); letter-spacing: .03em; white-space: nowrap; overflow: hidden; border-radius: 0 0 var(--gu-rS) var(--gu-rS); background: transparent; color: transparent; z-index: 2; }
.gu-sbadge[data-kind="win"] { background: var(--gu-win); color: var(--gu-cardTxt); }
.gu-sbadge[data-kind="cancel"] { background: var(--gu-cancel); color: var(--gu-cancelInk); }
.gu-sbadge[data-kind="pinch"] { background: var(--gu-crab); color: var(--gu-crabInk); }
.gu-sbadge[data-kind="set"] { background: var(--gu-sel); color: var(--gu-selInk); }
.gu-sbadge[data-kind="think"] { background: var(--gu-pill); color: var(--gu-dim); }
.gu-feathers { position: absolute; inset: -6px; pointer-events: none; display: none; z-index: 3; }
.gu-feathers i { position: absolute; width: 7px; height: 11px; border-radius: 60% 60% 60% 0; background: var(--gu-dim); opacity: 0; }
.gu-feathers i:nth-child(1) { left: -2px; top: 2px; --fx: -10px; --fy: 18px; }
.gu-feathers i:nth-child(2) { right: -3px; top: 10px; --fx: 12px; --fy: 20px; }
.gu-feathers i:nth-child(3) { left: 40%; top: -4px; --fx: -4px; --fy: -14px; }
.gu-feathers i:nth-child(4) { right: 20%; bottom: -2px; --fx: 8px; --fy: 16px; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] .gu-feathers { display: block; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] .gu-feathers i { animation: gu-feather 1.1s ease-out infinite; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] .gu-feathers i:nth-child(2) { animation-delay: .25s; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] .gu-feathers i:nth-child(3) { animation-delay: .5s; }
.gu-root[data-phase="reveal"] .gu-slot[data-res="cancel"] .gu-feathers i:nth-child(4) { animation-delay: .75s; }

/* ── the pile band (the ONE flexible row) ────────────────────────────────── */
.gu-pileband { grid-area: pile; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gu-snatchrow { flex: none; height: 20px; width: 100%; display: flex; align-items: center; justify-content: center; }
.gu-snatch { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 20px; padding: 0 10px; border-radius: 999px; font: 800 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .06em; white-space: nowrap; overflow: hidden; opacity: 0; background: var(--gu-panel); border: var(--gu-bd) solid var(--gu-win); color: var(--gu-txt); }
.gu-snatch i { flex: none; display: inline-block; width: 22px; border-top: var(--gu-bd) dashed var(--gu-win); }
.gu-snatch[data-on="1"] { opacity: 1; animation: gu-rise .25s ease-out both; }
.gu-snatch[data-kind="crab"] { border-color: var(--gu-crab); }
.gu-snatch[data-kind="crab"] i { border-top-color: var(--gu-crab); }
.gu-snatch[data-kind="cancel"] { border-color: var(--gu-cancel); }
.gu-snatch[data-kind="cancel"] i { border-top-color: var(--gu-cancel); }
.gu-pilezone { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.gu-fan { position: absolute; inset: 0; pointer-events: none; }
/* playtest 1 — a carried prize is a WHOLE card (it is public), stacked to the left of the prize with a slight tilt */
.gu-prize, .gu-fanc {
  position: absolute; left: 50%; top: 50%; width: var(--gu-prizeW); height: min(var(--gu-prizeH), 100%); margin-left: calc(var(--gu-prizeW) / -2);
  border-radius: var(--gu-rM); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; padding: 5px 4px;
  border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: var(--gu-cardShadow); background: var(--gu-snack); color: var(--gu-snackInk);
}
.gu-prize[data-kind="crab"], .gu-fanc[data-kind="crab"] { background: var(--gu-crabHatch); color: var(--gu-crabInk); }
.gu-prize > *, .gu-fanc > * { flex: none; }
.gu-fanc {
  transform: translate(var(--gu-fx, 0px), var(--gu-ty, -50%)); rotate: var(--gu-tilt, 0deg);
  transition: transform .3s cubic-bezier(.3, .1, .25, 1), rotate .3s, opacity .2s;
  pointer-events: auto; cursor: pointer;
}
.gu-fanc[data-on="0"] { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
/* LIFT — half the card rises out of the stack (a mouse hovers; a touch screen taps), its value in a badge above */
.gu-fanc[data-lift="1"] { --gu-ty: -100%; }
.gu-fanc::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0; }   /* keeps the hover while the card rises off the pointer */
.gu-fanc[data-lift="1"]::after { height: 55%; }
.gu-fbadge {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 1px 8px; border-radius: var(--gu-rS);
  font: 800 var(--gu-prizeFs)/1.15 var(--gu-ui); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
  background: var(--gu-snack); color: var(--gu-snackInk); border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: var(--gu-cardShadow);
  opacity: 0; transition: opacity .2s;
}
.gu-fanc[data-kind="crab"] .gu-fbadge { background: var(--gu-crab); color: var(--gu-crabInk); }
.gu-fanc[data-lift="1"] .gu-fbadge { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .gu-fanc[data-on="1"]:hover { --gu-ty: -100%; }
  .gu-fanc[data-on="1"]:hover::after { height: 55%; }
  .gu-fanc[data-on="1"]:hover .gu-fbadge { opacity: 1; }
}
/* the prize on the table bobs and sways, slowly and calmly (two periods so it never looks like a loop) */
@keyframes gu-bob { from { translate: 0 2px; } to { translate: 0 -3px; } }
@keyframes gu-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.gu-prize {
  z-index: 30; transform: translate(var(--gu-px, 0px), -50%); transition: transform .3s cubic-bezier(.3, .1, .25, 1);
  animation: gu-bob 2.6s ease-in-out infinite alternate, gu-sway 3.9s ease-in-out infinite alternate;
}
.gu-prize[data-hide="1"] { visibility: hidden; }
.gu-prize[data-flip="1"] .gu-plaque, .gu-prize[data-flip="1"] .gu-pkind, .gu-prize[data-flip="1"] .gu-pname { animation: gu-flipin .5s cubic-bezier(.2, .7, .3, 1) both; }
.gu-pkind { font: 800 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .1em; opacity: .92; }
.gu-plaque { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; padding: 3px; background: var(--gu-cardFace); border-radius: var(--gu-rS); border: var(--gu-bd) solid var(--gu-cardEdge); overflow: hidden; }
/* the art: CENTRED in a fixed box, never stretched (the five mock-extracted PNGs are trimmed 122–150 × 100–115) */
.gu-pimg { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; object-position: center; display: block; }
.gu-pval { flex: none; min-width: 3ch; text-align: center; padding: 0 6px; border-radius: var(--gu-rS); background: var(--gu-cardFace); color: var(--gu-cardTxt); border: var(--gu-bd) solid var(--gu-cardEdge); font: 800 var(--gu-prizeFs)/1.15 var(--gu-ui); font-variant-numeric: tabular-nums; }
.gu-pname { max-width: 100%; font: 700 var(--gu-metaFs)/1.1 var(--gu-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* GU-M11 — ONE fixed width and height for every label and "+55" */
.gu-total {
  flex: none; position: relative; z-index: 40; width: min(var(--gu-totalW), 100%); height: var(--gu-totalH); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0 10px; border-radius: var(--gu-rL); white-space: nowrap; overflow: hidden; text-align: center;
  font: 800 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .06em; border: var(--gu-bd) solid var(--gu-line); background: var(--gu-panel); color: var(--gu-txt);
}
.gu-total[data-kind="crab"] { background: var(--gu-crab); border-color: var(--gu-crab); color: var(--gu-crabInk); }
.gu-total[data-kind="carry"] { border-style: dashed; border-color: var(--gu-cancel); }
.gu-tl { display: flex; align-items: center; gap: 6px; line-height: 1; }
.gu-tglyph { width: 14px; font-size: 13px; text-align: center; }
.gu-tnum { display: inline-block; width: 3.2ch; text-align: left; font-size: calc(var(--gu-nameFs) + 2px); font-variant-numeric: tabular-nums; }
.gu-rule { font-size: 9px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── feed (fixed height, never shifts the board — GU-M13) ─────────────────── */
.gu-feed { grid-area: feed; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--gu-rM); background: var(--gu-panel2); border: var(--gu-bd) solid var(--gu-line); overflow: hidden; }
.gu-feedl { flex: none; font: 800 var(--gu-metaFs)/1 var(--gu-ui); letter-spacing: .1em; color: var(--gu-dim); }
.gu-feedt { flex: 1 1 auto; min-width: 0; max-height: 100%; font: 600 var(--gu-metaFs)/1.25 var(--gu-ui); overflow: hidden; }

/* ── you: seat, all 15 bid cards, CONFIRM ─────────────────────────────────── */
.gu-you { grid-area: you; min-width: 0; display: flex; flex-direction: column; gap: var(--gu-gap); }
.gu-me { flex: none; height: var(--gu-meH); display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--gu-rM); background: var(--gu-panel); border: var(--gu-bd) solid var(--gu-line); box-shadow: var(--gu-shadow); }
.gu-me .gu-slot { --gu-slotH: calc(var(--gu-meH) - 8px); --gu-slotW: calc(var(--gu-meH) - 8px); }
.gu-me[data-res="win"], .gu-me[data-res="pinch"] { border-color: var(--gu-win); }
.gu-meinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gu-merow { display: flex; align-items: center; gap: 6px; }
.gu-youl { font: 800 var(--gu-nameFs)/1 var(--gu-ui); letter-spacing: .04em; }
.gu-hand { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: var(--gu-cardH); gap: 6px; }
.gu-card {
  position: relative; min-width: 0; padding: 0; border-radius: var(--gu-rS); display: flex; align-items: center; justify-content: center;
  font: 800 var(--gu-cardFs)/1 var(--gu-ui); font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--gu-cardFace); color: var(--gu-cardTxt); border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: var(--gu-cardShadow);
  transition: background .12s, box-shadow .12s, color .12s, border-color .12s;
}
@media (hover: hover) { .gu-card[data-st="idle"]:hover { border-color: var(--gu-sel); box-shadow: 0 0 0 2px var(--gu-sel), var(--gu-cardShadow); } }
.gu-card[data-st="idle"]:active { background: var(--gu-sel); color: var(--gu-selInk); border-color: var(--gu-sel); box-shadow: inset 0 0 0 2px var(--gu-cardFace); }
.gu-card[data-st="sel"], .gu-card[data-st="played"] { background: var(--gu-sel); color: var(--gu-selInk); border-color: var(--gu-sel); box-shadow: 0 0 0 3px var(--gu-winGlow), var(--gu-cardShadow); }
.gu-card[data-st="played"] { cursor: default; }
.gu-card[data-st="used"] { background: var(--gu-used); color: var(--gu-usedTxt); border: var(--gu-bd) dashed var(--gu-usedLine); box-shadow: none; cursor: default; }
/* GU-M12 — a LOCKED unspent card stays solid and full-opacity (muted ink, no lift): never fainter than a spent one */
.gu-card[data-st="locked"] { background: var(--gu-lockBg); color: var(--gu-lockTxt); border: var(--gu-bd) solid var(--gu-usedLine); box-shadow: none; cursor: not-allowed; }
.gu-card[data-st="gone"] { background: var(--gu-gone); color: transparent; border: var(--gu-bd) dashed var(--gu-usedLine); box-shadow: none; cursor: default; }
.gu-okw { flex: none; display: flex; align-items: center; justify-content: center; }
.gu-confirm {
  width: 100%; height: 44px; border-radius: var(--gu-rM); display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 800 14px/1 var(--gu-ui); letter-spacing: .1em; cursor: pointer;
  background: var(--gu-ok); color: var(--gu-okInk); border: var(--gu-bd) solid var(--gu-ok); box-shadow: var(--gu-cardShadow);
  transition: background .12s, box-shadow .12s, color .12s;
}
@media (hover: hover) { .gu-confirm[data-st="on"]:hover { border-color: var(--gu-win); box-shadow: 0 0 0 3px var(--gu-winGlow), var(--gu-cardShadow); } }
.gu-confirm[data-st="on"]:active { background: var(--gu-okPress); border-color: var(--gu-okPress); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.gu-confirm[data-st="off"] { background: var(--gu-used); color: var(--gu-usedTxt); border: var(--gu-bd) dashed var(--gu-usedLine); box-shadow: none; cursor: not-allowed; }

/* ── layers INSIDE the root (never fixed) ─────────────────────────────────── */
.gu-panel { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(42, 32, 22, .34); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; }
.gu-panel[data-on="1"] { opacity: 1; visibility: visible; pointer-events: auto; }
.gu-pcard { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--gu-rL); background: #fffaf0; border: var(--gu-bd) solid var(--gu-line); box-shadow: 0 16px 40px rgba(40, 28, 14, .35); }
.gu-ptitle { font: 800 13px/1.2 var(--gu-ui); letter-spacing: .06em; }
.gu-pcells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gu-pcell { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--gu-rS); font: 800 18px/1 var(--gu-ui); font-variant-numeric: tabular-nums; background: var(--gu-cardFace); color: var(--gu-cardTxt); border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: var(--gu-cardShadow); }
.gu-pcell[data-st="spent"] { background: transparent; color: var(--gu-usedTxt); border: var(--gu-bd) dashed var(--gu-usedLine); box-shadow: none; text-decoration: line-through; }
.gu-pfoot { font: 700 11px/1.3 var(--gu-ui); color: var(--gu-dim); }
.gu-fx { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.gu-fly { position: absolute; display: flex; align-items: center; justify-content: center; will-change: transform; }
.gu-flycard { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: var(--gu-rM); background: var(--gu-snack); color: var(--gu-snackInk); border: var(--gu-bd) solid var(--gu-cardEdge); box-shadow: 0 10px 24px rgba(40, 28, 14, .35); font: 800 16px/1 var(--gu-ui); }
.gu-flycard[data-kind="crab"] { background: var(--gu-crabHatch); color: var(--gu-crabInk); }
.gu-flycard[data-kind="gone"] { background: var(--gu-cancel); color: var(--gu-cancelInk); font-size: 30px; }
.gu-flycard img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; background: var(--gu-cardFace); border-radius: var(--gu-rS); }

/* end screen rows (GameEndScreen html section) */
.gu-endrows { display: flex; flex-direction: column; gap: 5px; }
.gu-endrow { display: grid; grid-template-columns: 1fr auto 56px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.gu-endrow[data-win="1"] { background: rgba(111, 212, 154, .16); }
.gu-endrow[data-cancel="1"] .gu-endsc { text-decoration: line-through; opacity: .7; }
.gu-endrow[data-out="1"] { opacity: .6; }
.gu-endrow[data-out="1"] .gu-endsc { text-decoration: line-through; }
.gu-reveal { font-style: italic; }

/* ── 🌐 MP (2026-09-15): GM4's LEFT mark and GM1's shrinking clock line ─────────────────────────────────
   ⭐ LOCKED LAYOUT: both are ABSOLUTE layers — neither reserves nor moves a pixel of the board. */
.gu-out { display: none; }
.gu-rival[data-out="1"] .gu-out, .gu-me[data-out="1"] .gu-out {
  display: flex; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; gap: 6px;
  border-radius: inherit; background: rgba(0, 0, 0, .38); pointer-events: none;
}
.gu-me { position: relative; }
.gu-out b { color: var(--gu-crab); font: 900 34px/1 var(--gu-ui); text-shadow: 0 1px 0 #fff, 0 0 8px rgba(0, 0, 0, .5); }
.gu-out i { font: 800 11px/1 var(--gu-ui); font-style: normal; letter-spacing: .08em; color: #fff; background: var(--gu-crab); padding: 3px 6px; border-radius: 999px; }
.gu-rival[data-out="1"] .gu-rinfo, .gu-rival[data-out="1"] .gu-strip { opacity: .45; }
.gu-you { position: relative; }
.gu-clock { position: absolute; left: 0; right: 0; top: calc(var(--gu-gap) / -2 - 2px); height: 4px; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.gu-clock[data-on="1"] { opacity: 1; background: rgba(127, 127, 127, .18); }
.gu-clock i { display: block; height: 100%; border-radius: inherit; background: var(--gu-sel); transform-origin: left center; transform: scaleX(1); }
.gu-clock[data-hot="1"] i { background: var(--gu-crab); }
.gu-clock[data-set="1"] { opacity: .55; }
.gu-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.gu-endnm .gu-av { --gu-nameFs: 14px; color: inherit; }
.gu-endst { font-size: 12px; opacity: .75; }
.gu-endsc { text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.gu-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .gu-root *, .gu-root *::before, .gu-root *::after { animation: none !important; transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #gulls-game-screen.gu-playing .wrap { padding: 0 2px; max-width: none; }
  #gulls-game-screen.gu-playing .topbar { display: none; }
  #gulls-game-screen.gu-playing.gu-topbar-open .topbar { display: flex; }
}
/* the mock's tight variable set below 370px — same slots, same arrangement */
@media (max-width: 370px) {
  .gu-root { --gu-fanStep: 22px; --gu-totalH: 32px; --gu-hdrH: 32px; --gu-rivalH: 64px; --gu-prizeW: 66px; --gu-prizeH: 82px; --gu-prizeFs: 17px; --gu-cardH: 42px; --gu-pad: 8px; --gu-gap: 6px; --gu-feedH: 30px; --gu-slotH: 38px; --gu-slotW: 38px; --gu-meH: 40px; --gu-totalW: 280px; }
  .gu-pill, .gu-mode { padding: 0 6px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #gulls-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .gu-root {
    --gu-pad: 14px; --gu-gap: 8px; --gu-hdrH: 40px; --gu-rivalH: 112px; --gu-slotW: 54px; --gu-slotH: 74px; --gu-slotFs: 23px; --gu-badgeH: 14px;
    --gu-stripW: 17px; --gu-stripH: 20px; --gu-stripFs: 9px; --gu-prizeW: 124px; --gu-prizeH: 156px; --gu-prizeFs: 28px;
    --gu-cardH: 78px; --gu-cardFs: 24px; --gu-fanStep: 42px; --gu-feedH: 30px; --gu-meH: 92px; --gu-nameFs: 14px; --gu-metaFs: 11px;
    --gu-totalW: 440px; --gu-totalH: 26px;
    width: 1280px; height: 553px; padding: var(--gu-pad); border-radius: 16px;
    grid-template-rows: var(--gu-hdrH) var(--gu-rivalH) minmax(0, 1fr) var(--gu-feedH) var(--gu-meH);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .gu-pill, .gu-mode { padding: 0 12px; }
  .gu-menu { display: none; }
  .gu-rivals { grid-template-columns: repeat(var(--gu-rcols, 3), minmax(0, 1fr)); }
  .gu-rivals[data-cols="1"] { --gu-rcols: 1; }
  .gu-rivals[data-cols="2"] { --gu-rcols: 2; }
  .gu-rivals[data-cols="3"] { --gu-rcols: 3; }
  .gu-rivals[data-cols="4"] { --gu-rcols: 4; }
  .gu-rival { padding: 6px; cursor: default; }
  .gu-rival:hover, .gu-rival:active, .gu-rival[data-open="1"] { box-shadow: var(--gu-shadow); transform: none; }
  .gu-rinfo { gap: 3px; }
  .gu-status { display: flex; align-items: center; justify-content: center; height: 16px; width: 86px; border-radius: 999px; font: 800 9px/1 var(--gu-ui); letter-spacing: .08em; border: var(--gu-bd) solid var(--gu-line); background: var(--gu-panel2); color: var(--gu-txt); white-space: nowrap; }
  .gu-status[data-st="thinking"] { background: transparent; color: var(--gu-dim); animation: gu-pulse 1.3s ease-in-out infinite; }
  .gu-status[data-st="ready"] { background: var(--gu-sel); color: var(--gu-selInk); border-color: var(--gu-sel); }
  .gu-sbadge { font-size: 9px; }
  .gu-total { flex-direction: row; gap: 10px; }
  .gu-rule { font-size: 11px; }
  .gu-feed { padding: 0 10px; }
  .gu-feedt { white-space: nowrap; text-overflow: ellipsis; }
  .gu-you { flex-direction: row; align-items: stretch; }
  .gu-me { height: 100%; width: 182px; }
  .gu-me .gu-slot { --gu-slotH: 74px; --gu-slotW: 54px; }
  .gu-meinfo { gap: 6px; }
  .gu-hand { flex: 1 1 auto; grid-template-columns: repeat(15, minmax(0, 54px)); justify-content: center; align-content: center; }
  .gu-okw { width: 170px; }
  .gu-confirm { width: 170px; }
}