/* The in-game graphics pack (static/js/artv1.js, static/art/v1). Everything is scoped to [data-clique-art="v1"], which the game page sets on its container (views/game.js).
   First the pack's own recipes (skin.css in the pack), then the rules for each game. */
[data-clique-art="v1"] {
  --cg-ink:#191814; --cg-cream:#EEE9D6; --cg-lime:#D4F65B;
  --cg-coral:#F45E43; --cg-forest:#25493D; --cg-muted:#5D594A;
  --cg-outline:3px; --cg-radius:12px;
}
[data-clique-art="v1"] .cg-asset {display:block;object-fit:contain;max-width:100%;user-select:none;pointer-events:none;}
[data-clique-art="v1"] .cg-opponent-gesture {transform:scaleX(-1);}
[data-clique-art="v1"] .cg-card {aspect-ratio:180/252;object-fit:contain;}
[data-clique-art="v1"] .cg-chip {aspect-ratio:1;object-fit:contain;}
[data-clique-art="v1"] .cg-state-outline {outline:3px solid var(--cg-cream);outline-offset:2px;}
[data-clique-art="v1"] .cg-state-outline[data-result="win"] {outline-color:var(--cg-lime);}
[data-clique-art="v1"] .cg-state-outline[data-result="loss"] {outline-color:var(--cg-coral);}
[data-clique-art="v1"] .cg-number {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;font-variant-numeric:tabular-nums;}
[data-clique-art="v1"] .cg-ticket {position:relative;background:var(--cg-cream);color:var(--cg-ink);border:4px solid var(--cg-ink);border-radius:10px;}
[data-clique-art="v1"] .cg-ticket[data-result="win"] {border-color:var(--cg-lime);}
[data-clique-art="v1"] .cg-ticket[data-result="loss"] {border-color:var(--cg-coral);}
[data-clique-art="v1"] .cg-number-tile {position:relative;background:#24231D;color:var(--cg-cream);border:2px solid #696351;border-radius:10px;font-variant-numeric:tabular-nums;font-weight:800;}
[data-clique-art="v1"] .cg-number-tile[data-selected="true"] {background:var(--cg-lime);border-color:var(--cg-ink);color:var(--cg-ink);}
[data-clique-art="v1"] .cg-number-tile[data-selected="false"][data-drawn="true"] {background:var(--cg-cream);border-color:var(--cg-ink);color:var(--cg-ink);}
[data-clique-art="v1"] .cg-number-tile[data-hit="true"] {background:var(--cg-lime);color:var(--cg-ink);outline:3px solid var(--cg-cream);outline-offset:-6px;}
[data-clique-art="v1"] .cg-number-tile[data-selected="true"][data-resolved="true"][data-drawn="false"] {background:var(--cg-coral);color:var(--cg-ink);}
[data-clique-art="v1"] .cg-focusable:focus-visible {outline:3px solid var(--cg-lime);outline-offset:4px;}
/* Only apply state attributes from the existing game state. Keep non-color status text. */
[data-clique-art="v1"] .cg-tier-zero {fill:#302E25;stroke:var(--cg-cream);}
[data-clique-art="v1"] .cg-tier-low {fill:var(--cg-cream);stroke:var(--cg-ink);}
[data-clique-art="v1"] .cg-tier-mid {fill:var(--cg-forest);stroke:var(--cg-cream);}
[data-clique-art="v1"] .cg-tier-high {fill:var(--cg-coral);stroke:var(--cg-ink);}
[data-clique-art="v1"] .cg-tier-top {fill:var(--cg-lime);stroke:var(--cg-ink);}
/* Optional cosmetic settle only. Never use animation timing to choose results. */
@keyframes cg-settle {from{transform:translateY(-4px)}to{transform:translateY(0)}}
[data-clique-art="v1"] .cg-settle {animation:cg-settle 160ms ease-out both;}
@media(prefers-reduced-motion:reduce){[data-clique-art="v1"] .cg-settle{animation:none;}}


/* ---------- Chicken ---------- */
[data-clique-art="v1"] .ck-start { background: #25493D url('/art/v1/vectors/chicken/grass-tile.svg') 0 0 / 64px 64px; }
[data-clique-art="v1"] .ck-start::before { display: none; }
[data-clique-art="v1"] img.ck-tree { left: 6px; bottom: 6px; width: auto; height: 128px; }
[data-clique-art="v1"] .ck-carpic { display: block; width: 51px; height: 84px; }
[data-clique-art="v1"] .ck-car.rev img { transform: rotate(180deg); }
[data-clique-art="v1"] .ck-sprite { display: block; width: 66px; height: 66px; margin-left: -4px; }
/* the lane's multiplier: the pack's pill frame (cream, ink outline), still lime for the next lane, green for a cleared one and coral for the one that crashed */
[data-clique-art="v1"] .ck-badge { width: 88px; height: 42px; border: 4px solid var(--cg-ink); border-radius: 14px; background: var(--cg-cream); box-shadow: none; font-size: 15px; }
[data-clique-art="v1"] .ck-lane.next .ck-badge { background: var(--cg-lime); transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 4px var(--cg-lime), 3px 3px 0 var(--cg-ink); }
[data-clique-art="v1"] .ck-lane.done .ck-badge { background: var(--cg-forest); color: var(--cg-cream); box-shadow: none; }
[data-clique-art="v1"] .ck-lane.crash .ck-badge { background: var(--cg-coral); color: var(--cg-ink); box-shadow: none; }

/* ---------- Rock Paper Scissors: the hands. The house's is the same picture turned round (.cg-opponent-gesture); an unrevealed move is the pack's "?" tile ---------- */
[data-clique-art="v1"] .rp-pick .rp-hand { width: auto; height: 104px; max-width: 120px; }
[data-clique-art="v1"] .rp-pick .rp-unknown { width: 96px; height: 96px; }
[data-clique-art="v1"] .rp-ico .rp-hand { width: auto; height: 56px; max-width: 64px; }
@media (max-width: 640px) {
  [data-clique-art="v1"] .rp-pick .rp-hand { height: 70px; max-width: 84px; }
  [data-clique-art="v1"] .rp-pick .rp-unknown { width: 64px; height: 64px; }
  [data-clique-art="v1"] .rp-ico .rp-hand { height: 44px; max-width: 50px; }
}

/* ---------- Limbo: the result ticket is the pack's frame (cream, notched at the sides, outline lime for a win and coral for a loss); the number is still real text ---------- */
[data-clique-art="v1"] .limbo-card { background: url('/art/v1/vectors/results/neutral.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; padding: 30px 44px 28px; color: var(--cg-ink); }
[data-clique-art="v1"] .limbo-card::before, [data-clique-art="v1"] .limbo-card::after { display: none; }
[data-clique-art="v1"] .limbo-card.win { background-image: url('/art/v1/vectors/results/win.svg'); }
[data-clique-art="v1"] .limbo-card.lose { background-image: url('/art/v1/vectors/results/loss.svg'); }

/* ---------- Mines: the pack's tile frames. Covered while no round is live, available (cream) while one is, safe frame + gem and loss frame + bomb once resolved ---------- */
[data-clique-art="v1"] .mn-tile { background: transparent url('/art/v1/vectors/tiles/covered.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; padding: 14%; }
[data-clique-art="v1"] .mn-grid.live .mn-tile:not(:disabled) { background: transparent url('/art/v1/vectors/tiles/available.svg') center / 100% 100% no-repeat; }
[data-clique-art="v1"] .mn-grid.live .mn-tile:not(:disabled):hover { background-color: transparent; box-shadow: none; }
[data-clique-art="v1"] .mn-tile.gem { background: transparent url('/art/v1/vectors/tiles/safe-frame.svg') center / 100% 100% no-repeat; box-shadow: none; }
[data-clique-art="v1"] .mn-tile.bomb { background: transparent url('/art/v1/vectors/tiles/loss-frame.svg') center / 100% 100% no-repeat; box-shadow: none; }
[data-clique-art="v1"] .mn-tile .mn-art { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }
[data-clique-art="v1"] .mn-ico .mn-mini { display: block; width: auto; height: 22px; }

/* ---------- Moles: the hole, the mole rising out of it, and the front half of the hole drawn over the mole's base ---------- */
[data-clique-art="v1"] .ml-art { position: relative; }
[data-clique-art="v1"] .ml-art img { position: absolute; display: block; height: auto; }
[data-clique-art="v1"] .ml-h-back, [data-clique-art="v1"] .ml-h-front { left: 1%; width: 98%; bottom: 8%; }
[data-clique-art="v1"] .ml-h-front { clip-path: inset(48% 0 0 0); }
[data-clique-art="v1"] .ml-mole { left: 19%; width: 62%; bottom: 25%; animation: cg-mole-rise .3s cubic-bezier(.2, .9, .3, 1.15) both; }
[data-clique-art="v1"] .ml-hole.up .ml-art { animation: none; }
@keyframes cg-mole-rise { from { transform: translateY(46%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { [data-clique-art="v1"] .ml-mole { animation: none; } }

/* ---------- Coinflip: the pack's two faces (a crown for heads, a star for tails); same centre and size, the flip itself is untouched ---------- */
[data-clique-art="v1"] .cf-face .cf-img { display: block; width: 100%; height: 100%; }

/* ---------- Dice: the result ticket is the pack's frame (outline lime for a win, coral for a loss); the slider's handle is the pack's threshold marker. The number, the line and the dice are untouched. ---------- */
[data-clique-art="v1"] .dc-ticket { background: url('/art/v1/vectors/results/neutral.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; padding: 26px 62px 22px; color: var(--cg-ink); }
[data-clique-art="v1"] .dc-ticket::before, [data-clique-art="v1"] .dc-ticket::after { display: none; }
[data-clique-art="v1"] .dc-ticket.w { background-image: url('/art/v1/vectors/results/win.svg'); }
[data-clique-art="v1"] .dc-ticket.l { background-image: url('/art/v1/vectors/results/loss.svg'); }
[data-clique-art="v1"] .dc-slider::-webkit-slider-thumb { width: 25px; height: 50px; background: url('/art/v1/vectors/dice/threshold-marker.svg') center / 100% 100% no-repeat; border: 0; box-shadow: none; }
[data-clique-art="v1"] .dc-slider::-moz-range-thumb { width: 25px; height: 50px; background: url('/art/v1/vectors/dice/threshold-marker.svg') center / 100% 100% no-repeat; border: 0; box-shadow: none; }

/* ---------- Tower: the pack's tile frames (covered, available on the row you may play, a check for a safe tile and an X for a trap), a marker on the current floor, brick texture ---------- */
[data-clique-art="v1"] .tw-tower { background: #141110 url('/art/v1/vectors/tower/brick-tile.svg') 0 0 / 128px 64px; }
[data-clique-art="v1"] .tw-tile { background: #302E25 url('/art/v1/vectors/tiles/covered.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; }
[data-clique-art="v1"] .tw-tower.live .tw-row.now .tw-tile:not(:disabled) { background: #EEE9D6 url('/art/v1/vectors/tiles/available.svg') center / 100% 100% no-repeat; border: 0; }
[data-clique-art="v1"] .tw-tower.live .tw-row.now .tw-tile:not(:disabled):hover { background-color: #EEE9D6; box-shadow: none; }
[data-clique-art="v1"] .tw-tile.safe { background: #D4F65B url('/art/v1/vectors/tiles/safe.svg') center / 100% 100% no-repeat; box-shadow: none; }
[data-clique-art="v1"] .tw-tile.trap { background: #F45E43 url('/art/v1/vectors/tiles/loss.svg') center / 100% 100% no-repeat; box-shadow: none; }
[data-clique-art="v1"] .tw-tile.safe svg, [data-clique-art="v1"] .tw-tile.trap svg { display: none; }              /* the frame already carries the check / the X */
[data-clique-art="v1"] .tw-tower.live .tw-row.now .tw-mult { padding-left: 20px; background: url('/art/v1/vectors/markers/current-floor.svg') left center / 16px 16px no-repeat; }

/* ---------- Plinko: the pocket the ball just landed in turns the pack's "landed" coral for a moment (its number stays dark on it) ---------- */
[data-clique-art="v1"] .pl-slot.hit rect { fill: #F45E43; }
[data-clique-art="v1"] .pl-slot.hit text { fill: #191814; }

/* ---------- Keno: the pack's number tiles (the number stays real text on top). Idle, picked, hit (picked and drawn), drawn but not picked, and picked but not drawn (shown once the draw is done) ---------- */
[data-clique-art="v1"] .kn-tile { background: #24231D url('/art/v1/vectors/keno/idle.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; color: var(--cg-cream); }
[data-clique-art="v1"] .kn-tile.on { background: #D4F65B url('/art/v1/vectors/keno/selected.svg') center / 100% 100% no-repeat; color: var(--cg-ink); }
[data-clique-art="v1"] .kn-tile.drawn.hit { background: #D4F65B url('/art/v1/vectors/keno/hit.svg') center / 100% 100% no-repeat; color: var(--cg-ink); box-shadow: none; }
[data-clique-art="v1"] .kn-tile.drawn.miss { background: #EEE9D6 url('/art/v1/vectors/keno/unselected-drawn.svg') center / 100% 100% no-repeat; color: var(--cg-ink); }
[data-clique-art="v1"] .kn-tile.missed { background: #F45E43 url('/art/v1/vectors/keno/drawn-miss.svg') center / 100% 100% no-repeat; color: var(--cg-ink); }

/* ---------- Tic-Tac-Toe: dark pack tiles under the pack's marks (the cell you may play lights up lime-outlined on hover, and so does each square of a winning line); the line itself is an overlay (.tt-strike, drawn by the game) ---------- */
[data-clique-art="v1"] .tt-board { position: relative; }
[data-clique-art="v1"] .tt-cell { background: #302E25 url('/art/v1/vectors/tiles/covered.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; }
[data-clique-art="v1"] .tt-cell:hover:not(:disabled), [data-clique-art="v1"] .tt-cell.line { background: #302E25 url('/art/v1/vectors/tiles/selected.svg') center / 100% 100% no-repeat; }
[data-clique-art="v1"] .tt-cell .tt-mark { display: block; width: 86%; height: 86%; }
[data-clique-art="v1"] .tt-cell.pop .tt-mark { animation: ttpop .25s ease-out; }

/* ---- Roulette: spindle, rim and ball are transparent layers over the real wheel (pocket order and landing angle untouched); chips are the pack's denomination chips.
   .noart (set by the game when a picture fails) brings the older centre, ball and chip look back. */
[data-clique-art="v1"] .wheel-wrap:not(.noart) .rl-old { display: none; }
[data-clique-art="v1"] .rchip.pic:not(.noart) { position: relative; width: 56px; height: 56px; padding: 0; background: none; border: 0; border-radius: 50%; box-shadow: none; }
[data-clique-art="v1"] .rchip.pic:not(.noart):hover { box-shadow: none; }
[data-clique-art="v1"] .rchip.pic:not(.noart).sel { box-shadow: 0 0 0 3px #D4F65B; }
[data-clique-art="v1"] .rchip.pic:not(.noart):active { box-shadow: none; }
[data-clique-art="v1"] .rchip.pic:not(.noart) .rchip-art { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-clique-art="v1"] .rchip.pic:not(.noart) > span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }   /* the value stays as real text (the picture's own number shows) */
[data-clique-art="v1"] .rchip.pic.custom:not(.noart) > svg { position: relative; width: 22px; height: 22px; color: #191814; }
[data-clique-art="v1"] .rl-chips.sm .rchip.pic:not(.noart) { width: 48px; height: 48px; }

/* ---- Cards (Blackjack, Hi-Lo, War, Baccarat all deal through games/common.js cardEl, Poker draws its own in views/pokertable.js): the deck's 52 faces (static/art/deck-v3) and its back sit over the same card, which keeps its size,
   flip and deal animation. The real rank and suit text stays in place (hidden by opacity, still there for readers) and comes back if a picture fails (.noart).
   Poker's table page carries the same attribute for its cards only (it has none of the other pictures). */
.pc-art { display: none; }
[data-clique-art="v1"] .pc:not(.noart) .pc-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
[data-clique-art="v1"] .pc:not(.noart) .pc-front,
[data-clique-art="v1"] .pc:not(.noart) .pc-back { background: none; border: 0; outline: 0; border-radius: 7.3% / 5.2%; }
[data-clique-art="v1"] .pc:not(.noart) .pc-front > :not(.pc-art),
[data-clique-art="v1"] .pc:not(.noart) .pc-back > span { opacity: 0; }

/* ---- Blackjack shoe (the stack of backs beside the table) and the felt: the pack's back and its subtle felt tile; the old colours stay under them as the fallback. */
[data-clique-art="v1"] .bj-shoe i { background: #25493D url(/art/deck-v3/cards/back.svg) center / 100% 100% no-repeat; border: 0; border-radius: 7.3% / 5.2%; }
[data-clique-art="v1"] .bj-oval { background: #25493D url(/art/v1/vectors/table/felt-tile.svg) 0 0 / 32px 32px repeat; }

/* ---- Hi-Lo direction arrows (markers/up.svg and down.svg replace the ▲ ▼ glyphs; the labels and numbers next to them are real text) */
[data-clique-art="v1"] .hl-arrow { display: grid; place-items: center; height: 26px; }
[data-clique-art="v1"] .hl-arrow .hl-mark { width: 26px; height: 26px; }

/* ---- War shares Blackjack's oval (.bj-oval, felted above); Baccarat's two hands sit on the same felt */
[data-clique-art="v1"] .bc-hand { background: #25493D url(/art/v1/vectors/table/felt-tile.svg) 0 0 / 32px 32px repeat; }