/* S4.1 — direction A · v3 (canvas 81be01d6 p.1, CG-D-024/026/027/028). Paint only: nothing here decides. */
:root { --felt:#1e5a3c; --ink:#e8efe9; --gold:#f2c14e; --card:#fbfaf5; --cardink:#1b1f1c; --red:#c0272d; --back:#24334a; --edge:#e8eef0; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--felt); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
/* phone-size render everywhere (CG-D-035): the table is a phone column, centred on anything wider */
.table { min-height: 100dvh; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background-image: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.07), rgba(0,0,0,.18) 80%); }
.name, .btn, .hint, .run { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.name { font-size: 17px; }
.name.turn { color: var(--gold); }
.count { font-size: 14px; font-weight: 600; opacity: .85; }
/* one row per seat: name column, then the five stacks (CG-D-024) — nothing right-justified (CG-D-028) */
.seat { display: flex; align-items: center; gap: 10px; }
.seat.last { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.18); }
.who { width: 78px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; gap: 5px; }
.card, .back, .slot { border-radius: 6px; flex: none; position: relative; }
.card { background: var(--card); color: var(--cardink); display: flex; flex-direction: column; justify-content: space-between; padding: 5px 6px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; line-height: 1; box-shadow: 0 2px 0 #b9b6aa, 0 6px 10px rgba(0,0,0,.4); transition: transform .18s ease, opacity .18s ease; }
.card.red { color: var(--red); }
.card .suit { align-self: flex-end; }
.card .dn { position: absolute; right: 5px; top: 4px; font-size: 10px; opacity: .55; font-weight: 600; }
.card.stacked { box-shadow: 0 3px 0 -1px var(--edge), 0 6px 0 -1px var(--back), 0 9px 12px rgba(0,0,0,.4); }
.back { background: var(--back); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 3px, transparent 3px 7px); border: 2px solid var(--edge); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.back.deck.empty { opacity: .25; box-shadow: none; }
.back.deck { box-shadow: 0 3px 0 #121a27, 0 6px 0 #0b111a, 0 10px 14px rgba(0,0,0,.4); }
.slot { border: 1.5px solid rgba(255,255,255,.55); }
.s52 { width: 52px; height: 72px; font-size: 18px; } .s52 .suit { font-size: 20px; }
.s68 { width: 68px; height: 96px; font-size: 24px; } .s68 .suit { font-size: 28px; }
.s36 { width: 36px; height: 50px; font-size: 13px; padding: 3px 4px; } .s36 .suit { font-size: 13px; } .s36 .dn { display: none; }
/* known cards: what everyone has seen go into a hand (pickups, blind flips) — small, after the stacks */
.known { display: flex; gap: 3px; flex-wrap: wrap; margin-left: 88px; margin-top: -8px; opacity: .9; }
/* a blind card flips where it lies */
.card.flip { animation: flip .5s cubic-bezier(.2,.8,.2,1); }
@keyframes flip { from { transform: rotateY(90deg) scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
.s96 { width: 96px; height: 134px; font-size: 36px; box-shadow: 0 2px 0 #b9b6aa, 0 4px 0 #a9a69a, 0 12px 22px rgba(0,0,0,.45); } .s96 .suit { font-size: 44px; } .s96 .dn { font-size: 12px; }
.card.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-6px); }
.card.dim { opacity: .55; }
/* the middle: deck · pile · actions beside it */
.mid { display: flex; align-items: center; gap: 14px; }
.deckwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.pilewrap { position: relative; width: 96px; height: 134px; flex: none; }
.pilewrap.empty { width: 56px; height: 78px; }
.pilewrap .card, .pilewrap .slot { position: absolute; left: 0; top: 0; }
.pilewrap .over { opacity: .45; transform: translate(6px, -6px) rotate(4deg); }
.run { position: absolute; right: -12px; top: -12px; background: var(--gold); color: var(--cardink); font-size: 15px; padding: 5px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.side { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.side .top { display: flex; gap: 12px; align-items: baseline; }
.side .setup { font-size: 15px; color: #d6e2d9; }
.hint { font-size: 17px; color: var(--gold); }
.btn { height: 56px; border-radius: 8px; border: 0; font-size: 22px; color: var(--ink); background: transparent; display: flex; align-items: center; justify-content: center; padding: 0 12px; width: 100%; }
.btn.primary { background: var(--gold); color: var(--cardink); }
.btn.ghost { border: 2px solid rgba(255,255,255,.7); font-size: 18px; height: 48px; }
.btn.on { background: var(--gold); color: var(--cardink); border-color: var(--gold); }
.btn:disabled { opacity: .35; }
.btn.small { height: 44px; width: auto; min-width: 48px; padding: 0 10px; font-size: 18px; }
/* me */
.me { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 0 -4px; border-radius: 12px; }
.me.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(242,193,78,.45); animation: glow 2.4s ease-in-out infinite; }
/* the hand: a held fist, straight (CG-D-031) — cards overlap, each shows its corner index; a tapped card pops up */
.hand { display: flex; align-items: flex-end; overflow-x: auto; padding: 14px 8px 4px 4px; scrollbar-width: none; }
.hand::-webkit-scrollbar { display: none; }
.group { display: flex; padding: 6px 0; flex: none; margin-left: -40px; }
.group:first-child { margin-left: 0; }
.group.sel .card { outline: 2px solid var(--gold); outline-offset: 1px; }
.hand .card { margin-left: -42px; justify-content: flex-start; }
.hand .group .card:first-child { margin-left: 0; }
.hand .card .idx { display: flex; flex-direction: column; align-items: center; width: 22px; gap: 2px; }
.hand .card .idx .suit { font-size: 22px; align-self: center; }
.hand .card .dn { right: auto; left: 26px; top: 6px; }
.hand .card.sel { transform: translateY(-14px); z-index: 2; }
.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.setup { font-size: 15px; color: #d6e2d9; }
.btns { display: flex; gap: 8px; }
.banner { background: rgba(0,0,0,.28); border-radius: 12px; padding: 16px; font-size: 18px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.banner b { color: var(--gold); }
.err { color: #ffb3b3; font-size: 14px; }
.spacer { flex: 1; }
/* the feed: five lines, newest last, older fading (CG-D-024) */
.feed { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; line-height: 1.35; color: #d6e2d9; }
.feed b { font-weight: 600; color: var(--ink); }
.feed div:nth-last-child(2) { opacity: .9; } .feed div:nth-last-child(3) { opacity: .75; } .feed div:nth-last-child(4) { opacity: .6; } .feed div:nth-last-child(5) { opacity: .45; }
/* motion (CG-D-028): a card lands on the pile, a drawn card arrives, a burn, a feed line */
@keyframes land { from { transform: translate(0, 120px) rotate(-6deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes landOther { from { transform: translate(0, -120px) rotate(6deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes arrive { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes burn { 0% { opacity: 1; } 100% { transform: translateY(-30px) scale(.6) rotate(12deg); opacity: 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(242,193,78,.35); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(242,193,78,.6); } }
@keyframes line { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.card.land { animation: land .32s cubic-bezier(.2,.8,.2,1); }
.card.land-other { animation: landOther .32s cubic-bezier(.2,.8,.2,1); }
.card.arrive { animation: arrive .3s ease-out; }
.pilewrap .burning { animation: burn .45s ease-in forwards; }
.feed .new { animation: line .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .card, .feed div, .me.turn { animation: none !important; transition: none; } }
/* S2 THE NAME: the register strip on a shared seat link */
.claim { display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,.22); border-radius: 10px; padding: 12px; }
.claim .fit { font-size: 14px; opacity: .85; }
.claim input { height: 44px; border-radius: 8px; border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.2); color: var(--ink); font: 600 17px system-ui, sans-serif; padding: 0 12px; width: 100%; }
.claim input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.claim .row { display: flex; gap: 8px; }
.claim .row .btn { flex: 1; height: 44px; }
.claim a { color: var(--gold); }