/* Coup · Byzantine court.
   Visual rules: dark walnut ground; gold is an accent (lines, icons, the art), never a text surface;
   the lapis table is the one bright field. Type: Cinzel only for large titles, EB Garamond for
   names and narration, Alegreya Sans for every control and label. Nothing smaller than 13px.
   During a match the whole game fits one viewport; only the side panel scrolls. */
:root{color-scheme:dark;
 --bg:#14100c;--surface:#1f1812;--surface-2:#2a2018;--surface-3:#33281d;--line:#4b3b27;--line-soft:#382b1e;
 --ivory:#f3ead6;--text-2:#cdbf9f;--text-3:#a8997b;
 --gold:#d9b45f;--gold-text:#ecd08c;--gold-deep:#8a6a2a;
 --leaf:linear-gradient(135deg,#9c742c 0,#e2c374 24%,#b08636 46%,#f0d995 66%,#a57c30 86%,#d9b862 100%);
 --cinnabar:#d24a34;--cinnabar-text:#f0907a;--cinnabar-deep:#9c2f20;
 --lapis:#22427a;--lapis-deep:#0f2040;
 --display:'Cinzel','EB Garamond',Georgia,serif;--serif:'EB Garamond',Garamond,Georgia,serif;--sans:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
 /* Painted art (assets/README.md); each slot keeps a gradient fallback underneath. */
 --table-art:url("assets/table-mosaic.webp");--entry-art:url("assets/palace-backdrop.webp");--coin-art:url("assets/solidus.webp")}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 75% -10%,#3a2715 0,transparent 55%),radial-gradient(ellipse at 0 110%,#1f1530 0,transparent 50%),var(--bg);color:var(--ivory);font:16px/1.45 var(--sans)}
button,input,select{font:inherit}
button{cursor:pointer;min-height:44px;padding:.55rem 1.05rem;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);border-radius:10px;box-shadow:none;background:var(--leaf);color:#1e1408;font:700 15px/1.2 var(--sans);letter-spacing:.01em}
button{transition:transform .09s ease,filter .15s ease,background-color .15s ease}
button:hover:not(:disabled){filter:brightness(1.08)}
button:active:not(:disabled){transform:translateY(1px) scale(.975)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold-text);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.42}
button.quiet{background:transparent;color:var(--ivory);border-color:var(--line)}
button.quiet:hover:not(:disabled){background:var(--surface-2);filter:none}
button.danger{background:linear-gradient(180deg,#d24a34,#a3321f);color:#fff6ee;border-color:#7a2416}
button.ghost{min-height:38px;padding:.35rem .75rem;background:transparent;color:var(--text-2);border-color:transparent;font-weight:700;font-size:14px}
button.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--ivory);filter:none}
input,select{width:100%;min-height:44px;margin-top:6px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:#110d09;color:var(--ivory);font:500 16px var(--sans)}
.check{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--sans);color:var(--text-2);cursor:pointer}
.check input{width:20px;height:20px;min-height:20px;margin:0;padding:0;accent-color:var(--gold)}
.check-hint{font-weight:500;color:var(--text-3)}
.entry-card .check{margin-top:12px}
.field{display:block;font:700 13px var(--sans);color:var(--text-2)}
.muted{color:var(--text-2)}.small{font-size:14px}
[hidden]{display:none!important}

/* Entry */
.coup-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px max(20px,calc((100vw - 1120px)/2));font:700 14px var(--sans);color:var(--text-2)}
.coup-top a{color:var(--ivory);text-decoration:none}.coup-top a span{color:var(--gold-text)}
.coup-top>span{font:500 15px var(--serif);letter-spacing:.18em;color:var(--text-3)}
#entry{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,440px);align-items:center;gap:56px;width:min(1120px,calc(100% - 40px));min-height:calc(100dvh - 60px);margin:auto;padding:12px 0 32px}
body:not(.in-match){background:var(--entry-art) right center/cover no-repeat,radial-gradient(ellipse at 75% -10%,#3a2715 0,transparent 55%),radial-gradient(ellipse at 0 110%,#1f1530 0,transparent 50%),var(--bg)}
.eyebrow{margin:0;color:var(--gold-text);font:800 13px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.coup-hero h1{margin:8px 0 16px;font:600 clamp(4rem,10vw,7.5rem)/.92 var(--display);background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000a)}
.coup-hero h1 span{color:var(--cinnabar);-webkit-text-fill-color:var(--cinnabar)}
.hero-copy{max-width:34ch;margin:0 0 22px;font:500 clamp(19px,2vw,23px)/1.45 var(--serif);color:var(--text-2)}
.coup-setup{display:grid;gap:14px}
.entry-card{padding:18px;background:linear-gradient(180deg,#241b13,#1b140e);border:1px solid var(--line);border-radius:14px}
.entry-bots{border-color:var(--gold-deep);box-shadow:0 0 0 1px #d9b45f22,0 14px 36px #0007}
.entry-card h2{margin:0 0 4px;font:600 22px var(--display);color:var(--gold-text)}
.entry-card>p{margin:0 0 12px;color:var(--text-2);font-size:15px}
.entry-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.entry-friends .entry-row{grid-template-columns:1fr 1fr;margin-bottom:10px}
.setup-buttons{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.coup-setup .player-name-entry{margin:0}
.coup-setup .player-name__label{color:var(--text-2);font:700 13px var(--sans)}
.coup-setup .player-name__input{background:#110d09;color:var(--ivory);border-color:var(--line);border-radius:8px;font:500 16px var(--sans)}
.coup-setup .player-name__hint{color:var(--text-3);font:500 13px var(--sans)}
.coup-error{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:50;max-width:min(560px,calc(100vw - 32px));margin:0;padding:12px 16px;border:1px solid var(--cinnabar);border-radius:10px;background:#3a1712;color:#ffe8e1;font:600 15px var(--sans);box-shadow:0 12px 30px #000a}
.coup-connection-status{position:fixed;left:50%;top:60px;z-index:40;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text-2);font:600 14px var(--sans);opacity:0;transform:translate(-50%,-8px);transition:opacity .25s,transform .25s;pointer-events:none}
.coup-connection-status.show{opacity:1;transform:translate(-50%,0)}

/* Match shell: exactly one viewport */
body.in-match{height:100vh;height:100dvh;overflow:hidden}
.match{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding:0 max(14px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px,env(safe-area-inset-left))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line-soft)}
.bar-title{display:flex;align-items:baseline;gap:14px;min-width:0}
.bar-home{font:700 20px var(--display);color:var(--gold-text);text-decoration:none}
.bar-room{font:600 14px var(--sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-room strong{color:var(--text-2)}
.bar-net{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:34ch;font:600 13px var(--sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-net::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#8fcf7a;box-shadow:0 0 8px #8fcf7a99}
.bar-net[data-state=warn]{color:var(--cinnabar-text)}.bar-net[data-state=warn]::before{background:var(--cinnabar);box-shadow:0 0 8px #d24a3499;animation:pulse 1.1s ease-in-out infinite}
.bar-actions{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.arena{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;min-height:0;padding:12px 0}
.arena-main{display:flex;min-height:0;min-width:0}
.arena-side{display:flex;flex-direction:column;gap:18px;min-height:0;overflow:auto;padding:2px 4px 8px 2px}
.arena-side>*{flex:none}
.side-toggle,.side-close{display:none}

/* The table */
.coup-table{--seat-card:clamp(28px,5.6dvh,46px);--stage-card:clamp(56px,14dvh,110px);--hand-card:clamp(64px,14dvh,116px);
 flex:1;display:grid;grid-template-rows:auto minmax(150px,1fr) auto;gap:12px;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain}

/* Opponents */
.opponents{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.seat{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:6px;min-width:140px;max-width:230px;flex:1 1 140px;min-height:0;padding:10px 10px 8px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-radius:14px;box-shadow:none;background:var(--surface);color:var(--ivory);font:inherit;text-align:center;transition:transform .18s,border-color .18s,box-shadow .18s}
.seat::before{content:'';position:absolute;left:14px;right:14px;top:-1px;height:2px;border-radius:2px;background:var(--line);transition:background .2s}
.seat-turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 26px #d9b45f33}.seat-turn::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold-text),var(--gold-deep));background-size:200% 100%;animation:shimmer 2.2s linear infinite}
.seat-marked{border-color:var(--cinnabar);box-shadow:0 0 0 1px var(--cinnabar)}
.seat-out{opacity:.5}
button.seat{cursor:pointer}
.seat-target{border-color:var(--gold-text);background:var(--surface-2);box-shadow:0 0 0 2px var(--gold-text),0 8px 20px #0008}
.seat-target:hover:not(:disabled){transform:translateY(-3px);filter:none}
.seat-cards{display:flex;gap:4px}
.seat-cards .cc{--w:var(--seat-card)}
.seat-info{display:grid;justify-items:center;gap:1px;min-width:0;max-width:100%}
.seat-top{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 8px;min-width:0;max-width:100%}
.seat-name{min-width:0;font:600 18px/1.15 var(--serif);overflow-wrap:anywhere}
.seat-bot{font:600 13px var(--sans);color:var(--text-3)}
.seat-lost{font:600 13px var(--sans);color:var(--cinnabar-text)}
.seat-status{font:700 13px var(--sans);color:var(--text-2)}
.seat-status.is-live{color:var(--gold-text)}.seat-status.is-live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--gold);vertical-align:1px;animation:pulse 1.2s ease-in-out infinite}
.seat-status.is-lost{color:var(--cinnabar-text)}.seat-status.is-claim{color:var(--gold-text)}.seat-status.is-out,.seat-status.is-warn{color:var(--cinnabar-text)}.seat-status.is-win{color:var(--gold-text)}

/* Coins */
.purse{position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.coin-icon{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--coin-art) center/cover,radial-gradient(circle at 38% 32%,#fff0b8,#d9b25a 58%,#8a6328);box-shadow:0 0 0 1px #5a3c10,0 1px 2px #000a}
.purse-count{font:800 17px var(--sans);color:var(--gold-text)}
.delta{position:absolute;right:-6px;top:-16px;font:800 15px var(--sans);animation:float 1.9s ease-out forwards;pointer-events:none;text-shadow:0 1px 3px #000}.delta.up{color:#f6dc92}.delta.down{color:var(--cinnabar-text)}

/* Stage: the lapis table, with the herald and whatever is being decided */
.stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"herald center" "actions actions";align-items:center;gap:14px 20px;min-height:0;padding:16px 20px;overflow:hidden;border:1px solid var(--gold-deep);border-radius:18px;
 background:var(--table-art) center/cover,repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,#00000022 0 1px,transparent 1px 12px),radial-gradient(ellipse at 40% 35%,#2d5596 0,var(--lapis) 50%,var(--lapis-deep) 100%);
 box-shadow:inset 0 0 0 4px #00000030,inset 0 0 0 5px #d9b45f40,inset 0 0 60px #0009}
.herald{grid-area:herald;position:relative;align-self:center;padding:14px 18px 14px;border:1px solid #d9b45f40;border-radius:14px;background:#0c0906d9;box-shadow:0 10px 30px #0008}
.herald-you{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 34px #d9b45f2e,0 10px 30px #0008}
.herald-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.herald-kicker{margin:0;font:800 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.timer-text{font:800 16px var(--sans);color:var(--ivory)}.timer-text.low{color:var(--cinnabar-text);animation:tick 1s ease-in-out infinite}
.herald-line{margin:4px 0 4px;font:600 clamp(22px,1.6vw + 1.4dvh,34px)/1.15 var(--serif);color:var(--ivory)}
.herald-sub{margin:0 0 10px;font:500 18px/1.35 var(--serif);color:var(--text-2)}
.timer{height:4px;border-radius:2px;background:#ffffff1a;overflow:hidden}.timer span{display:block;height:100%;background:var(--gold);transition:width .25s linear}.timer span.low{background:var(--cinnabar)}
.herald-waiting{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.herald-waiting li{padding:3px 10px;border-radius:999px;background:#ffffff0f;font:700 13px var(--sans);color:var(--text-3)}
.herald-waiting li.waiting{color:var(--ivory);background:#d9b45f24}.herald-waiting li.waiting::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--gold);vertical-align:1px;animation:pulse 1.2s ease-in-out infinite}
.herald-waiting li.passed::before{content:'✓ ';color:#9fcf8a}
.stamp{position:absolute;top:12px;right:16px;padding:4px 12px;border:2px solid currentColor;border-radius:8px;font:800 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-4deg);background:#0c0906e6;pointer-events:none}
.stamp-bluff{color:var(--cinnabar-text)}.stamp-true{color:var(--gold-text)}.stamp-in{animation:stamp .45s cubic-bezier(.2,1.6,.4,1)}
.stage-center{grid-area:center;display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.court-deck,.claim{display:grid;justify-items:center;gap:8px}
.deck-stack{position:relative;width:calc(var(--stage-card)*.62 + 6px);aspect-ratio:2/3.1}
.deck-stack .cc{--w:calc(var(--stage-card)*.62);position:absolute;left:0;top:6px}.deck-stack .cc:nth-child(2){left:3px;top:3px}.deck-stack .cc:nth-child(3){left:6px;top:0}
.deck-label,.claim-label{padding:3px 10px;border-radius:999px;background:#0c0906cc;font:700 13px var(--sans);color:var(--text-2);white-space:nowrap}
.claim-cards{display:flex}
.claim-pair .cc:first-child{rotate:-5deg}.claim-pair .cc+.cc{margin-left:calc(var(--stage-card)*-.42);rotate:6deg}
.claim .cc{--w:var(--stage-card);box-shadow:0 0 0 2px var(--gold-text),0 0 36px #ecd08c66}.claim-in{animation:claim .5s ease}
.claim .cc{animation:bob 3.2s ease-in-out infinite}
.exchange-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.exchange-row .cc{--w:var(--stage-card)}
.stage-actions{grid-area:actions;display:flex;justify-content:center}
.stage-actions:has(> [hidden]:only-child){display:none}
.lobby-controls{display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;background:#0c0906d9;border:1px solid #d9b45f40}
.lobby-bots{display:flex;align-items:center;gap:8px}.lobby-bots select{width:auto;margin:0}

/* You */
.you{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:12px 16px 14px;border:1px solid var(--line);border-top:2px solid var(--gold-deep);border-radius:16px;background:linear-gradient(180deg,#221a12,#18120d)}
.you-turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 30px #d9b45f22}
.you-watch{display:block}
.hand-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.hand-title{margin:0;font:800 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.you-hand .coin-icon{width:22px;height:22px}.you-hand .purse-count{font-size:21px}
.hand-cards{display:flex;gap:10px}
.hand-cards .cc{--w:var(--hand-card)}
.you-moves{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.you-moves p,.you-hand p{margin:0 0 8px}
.you-moves>button{align-self:flex-start;min-width:180px}
.moves-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.moves-head .moves-title{margin:0}
.pair-toggle{min-height:36px;padding:.25rem .75rem;font-size:14px;border-radius:999px}
.pair-toggle[aria-pressed=true]{background:var(--gold-text);color:#1e1408;border-color:var(--gold)}
.moves-title{margin:0 0 10px;font:600 22px/1.2 var(--serif);color:var(--ivory)}
.move-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.move{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;min-height:54px;padding:8px 10px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:4px solid var(--role,var(--gold));border-radius:10px;background:var(--surface-2);color:var(--ivory);font:inherit;text-align:left}
.move{transition:transform .12s cubic-bezier(.2,.8,.2,1),background-color .15s,border-color .15s}
.move:hover:not(:disabled){transform:translateY(-2px);filter:none;background:var(--surface-3);border-top-color:var(--gold);border-right-color:var(--gold);border-bottom-color:var(--gold)}
.move:active:not(:disabled){transform:translateY(1px) scale(.98)}
.move:disabled{opacity:.38}
.move-pairable{touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
.move-paired{background:linear-gradient(180deg,#3a2c16,#2a2018);border-top-color:var(--gold);border-right-color:var(--gold);border-bottom-color:var(--gold);box-shadow:inset 0 0 0 1px #d9b45f55}
.pair-hint{margin:8px 0 0!important}
.move-text{display:grid;gap:2px;min-width:0}
.move-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.move-label{font:800 16px/1.15 var(--sans);color:var(--ivory)}
.move-effect{font:500 13.5px/1.25 var(--sans);color:var(--text-2)}
.move-coin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff0b8,#d9b25a 60%,#8a6328);box-shadow:0 0 0 1px #5a3c10;color:#2a1a0c;font:800 14px var(--sans)}
.move-icon,.ledger-icon{flex:none;width:32px;height:32px}
.icon-vector{padding:5px;border-radius:50%;background:radial-gradient(circle,#f3dd98 0,#d4ac52 62%,#9c742c 100%);box-shadow:0 0 0 2px var(--role,var(--gold-deep));fill:none;stroke:#2a1a0c;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.icon-vector .fill{fill:#2a1a0c26}.icon-vector .jewel{fill:var(--cinnabar)}
.icon-seal{border-radius:50%;object-fit:cover}
.tag{flex:none;padding:0 7px;border-radius:999px;font:800 12px/1.5 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.tag-true{background:var(--gold-text);color:#1e1408}.tag-bluff{background:var(--cinnabar-deep);color:#fff2ea}.tag-off{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line)}
.response-row,.target-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.response-row button,.target-list button{min-height:50px;font-size:16px}
button.block{display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);color:var(--ivory);border-color:var(--line);border-left:4px solid var(--role)}
button.block .move-icon{width:28px;height:28px}button.block .tag{margin:0}
button.target{background:var(--surface-2);color:var(--ivory);border-color:var(--gold)}
.waiting-text{font:italic 500 18px var(--serif)}

/* Side: ledger and chronicle */
.arena-side h2,.ledger h2{margin:0 0 6px;font:600 18px var(--display);color:var(--gold-text)}
.ledger>p{margin:0 0 6px}
.ledger-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:0;padding:8px 6px;border-top:0;border-right:0;border-bottom:1px solid var(--line-soft);border-left:0;border-radius:0;background:transparent;color:var(--ivory);font:inherit;text-align:left}
.ledger-row:hover{background:var(--surface);filter:none}
.ledger-text{display:grid;min-width:0}.ledger-text strong{font:600 17px/1.2 var(--serif)}.ledger-rule{font:500 13.5px/1.3 var(--sans);color:var(--text-2)}
.pips{display:flex;gap:4px}
.pip{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}.pip-out{background:var(--cinnabar);box-shadow:none}.pip-mine{background:var(--gold);box-shadow:none}
.ledger-key{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin:8px 0 0;font:600 13px var(--sans);color:var(--text-2)}.ledger-key span:nth-child(even){margin-right:6px}
.house-rules{margin-top:12px;padding:10px 12px;border:1px solid var(--gold-deep);border-radius:10px;background:var(--surface)}
.house-rules h3{margin:0 0 4px;font:800 14px var(--sans);color:var(--gold-text)}.house-rules p{margin:0;color:var(--text-2);line-height:1.4}
.chronicle{display:flex;flex-direction:column}
.coup-log{margin:0;padding-left:22px;font:500 14.5px/1.4 var(--sans);color:var(--text-2)}.coup-log li{padding:4px 0;border-bottom:1px solid var(--line-soft)}.coup-log li::marker{color:var(--gold-deep)}
.observers p{margin:0;font-size:14px}
.coup-trust{margin:0;color:var(--text-3);font:500 13px/1.45 var(--sans)}

/* Cards */
.cc{--w:120px;position:relative;display:block;flex:none;width:var(--w);aspect-ratio:5/7;margin:0;padding:0;min-height:0;border-top:1px solid #6e5220;border-right:1px solid #6e5220;border-bottom:1px solid #6e5220;border-left:1px solid #6e5220;border-radius:calc(var(--w)*.05);background:var(--leaf);box-shadow:0 6px 16px #000a;color:#2a1a0c;font:400 1rem/1.2 var(--serif);text-align:center;overflow:hidden;transition:transform .18s}
.cc-painted{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:max(4px,calc(var(--w)*.04));background:#7a5a22}
.cc-picture{position:relative;display:block;width:100%;aspect-ratio:2/3;overflow:hidden;background:#3a2a12}
.cc-painted .cc-art{display:block;width:100%;height:100%;object-fit:cover}
.cc-plate{display:grid;justify-items:center;gap:1px;padding:4px 4px 5px;background:var(--leaf);border-top:1px solid #5a3c10}
.cc-name{font:700 max(13px,calc(var(--w)*.12))/1.1 var(--serif);color:#6e1a10;white-space:nowrap}
.cc-caption{font:800 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#3a2410}
.cc-back.cc-painted{background:#7a5a22;border-color:#5a3c10}
.cc-sm{--w:48px}.cc-md{--w:100px}.cc-lg{--w:128px}
.cc-dead .cc-picture{filter:grayscale(.75) brightness(.55)}.cc-dead::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,transparent 48.6%,#d24a34e6 49%,#d24a34e6 51%,transparent 51.4%);pointer-events:none}
button.cc{cursor:pointer;color:#2a1a0c}button.cc:hover:not(:disabled){filter:none;transform:translateY(-4px)}
.cc-choice{box-shadow:0 0 0 3px var(--cinnabar),0 8px 20px #000a;animation:beckon 1.6s ease-in-out infinite}
button.cc[aria-pressed=true]{transform:translateY(-8px);box-shadow:0 0 0 3px var(--gold-text),0 0 22px #ecd08c88}
.cc-flip{animation:flip .7s ease}
.slot{display:block;width:var(--seat-card,48px);aspect-ratio:2/3;border:1px dashed #d9b45f66;border-radius:6px}.slot-lg{width:var(--hand-card,128px)}
/* Vector fallback when a painting is missing */
.cc-frame{position:absolute;inset:calc(var(--w)*.045);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6%;border:1px solid #5a3c1080;border-radius:calc(var(--w)*.03)}
.cc-panel{display:grid;place-items:center;width:100%;flex:1;border-radius:50% 50% 3px 3px/30% 30% 3px 3px;background:radial-gradient(ellipse at 50% 35%,var(--role) 0,var(--role-deep) 100%)}
.cc-halo{display:grid;place-items:center;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f3dd98 0,#d4ac52 58%,#9c742c 100%)}
.cc-emblem{width:66%;fill:none;stroke:#2a1a0c;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.cc-emblem .fill{fill:#2a1a0c26}.cc-emblem .jewel{fill:var(--cinnabar)}
.cc-back-art{width:84%}.cc-back-art .ring{fill:#3a1230;stroke:#e2c374;stroke-width:1.2}.cc-back-art .pearl{fill:#efe3c6}.cc-back-art .petal{fill:#d8b660}.cc-back-art .boss{fill:var(--cinnabar)}

/* Tactility: cards lean toward the pointer with a moving glare */
.hand-cards{perspective:800px}
.hand-cards .cc{transform-style:preserve-3d;will-change:transform}
.hand-cards .cc::before{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),#fff6 0,#fff0 55%);opacity:0;transition:opacity .2s;pointer-events:none}
.hand-cards .cc.is-tilting{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-8px) scale(1.05);transition:transform .06s linear;box-shadow:0 18px 30px #000c;z-index:3}
.hand-cards .cc.is-tilting::before{opacity:1}
.hand-cards button.cc:active:not(:disabled){transform:translateY(0) scale(.97)}
.exchange-row button.cc:active:not(:disabled){transform:translateY(-2px) scale(.97)}
.ledger-row{transition:background-color .15s,transform .09s}.ledger-row:active{transform:scale(.985)}
.herald-new{animation:rise .34s cubic-bezier(.2,.8,.2,1)}
.you-enter::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,#ecd08c00 38%,#ecd08c3d 50%,#ecd08c00 62%) no-repeat;background-size:260% 100%;animation:sweep .9s ease-out both;pointer-events:none}
.moves-enter .move,.moves-enter .response-row>button{animation:step .36s cubic-bezier(.2,.8,.2,1) backwards}
.moves-enter .move:nth-child(2),.moves-enter .response-row>button:nth-child(2){animation-delay:45ms}
.moves-enter .move:nth-child(3),.moves-enter .response-row>button:nth-child(3){animation-delay:90ms}
.moves-enter .move:nth-child(4),.moves-enter .response-row>button:nth-child(4){animation-delay:135ms}
.moves-enter .move:nth-child(5){animation-delay:180ms}.moves-enter .move:nth-child(6){animation-delay:225ms}.moves-enter .move:nth-child(7){animation-delay:270ms}

/* Effect sprites (fx.js) */
.coup-fx{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.fx-coin{position:fixed;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--coin-art) center/cover,radial-gradient(circle at 38% 32%,#fff0b8,#d9b25a 58%,#8a6328);box-shadow:0 0 0 1px #5a3c10,0 3px 8px #000b}
.fx-ring{position:fixed;left:0;top:0;border-radius:50%;border:3px solid var(--gold-text);box-shadow:0 0 24px #ecd08c88}
.fx-ring-red{border-color:var(--cinnabar);box-shadow:0 0 24px #d24a3499}
.fx-tessera{position:fixed;left:-5px;top:-5px;width:10px;height:10px;border-radius:1.5px;background:linear-gradient(135deg,#f6e3a0,#b98a33)}
.fx-tessera-red{background:linear-gradient(135deg,#e2604a,#8f2a1c)}.fx-tessera-blue{background:linear-gradient(135deg,#4c79c4,#1c3463)}

/* Card inspector */
.inspector{width:min(720px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:22px;border:1px solid var(--gold-deep);border-radius:18px;background:var(--surface);color:var(--ivory);box-shadow:0 30px 80px #000c}
.inspector::backdrop{background:#000b}
.inspector-close{float:right;min-height:40px}
.detail{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;align-items:center;clear:both}
.detail-art img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px #6e5220,0 14px 34px #000a}
.detail-text{display:grid;gap:8px}
.detail-text h2{margin:0;font:700 34px var(--display);color:var(--gold-text)}
.detail-greek{font:500 18px var(--serif);letter-spacing:.2em;color:var(--cinnabar-text)}
.detail-act{font:600 23px/1.3 var(--serif)}.detail-block{font:italic 500 20px/1.3 var(--serif);color:var(--text-2)}
.detail-count{margin:16px 0 0;font:600 14px var(--sans);color:var(--text-3)}

/* Rules and results */
dialog#rules{width:min(680px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px 26px;border:1px solid var(--gold-deep);border-radius:18px;background:var(--surface);color:var(--ivory);font:500 17px/1.5 var(--serif)}
dialog#rules::backdrop{background:#000b}.rules-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
dialog#rules h2{margin:8px 0 12px;font:600 30px var(--display);color:var(--gold-text)}dialog#rules li{margin:8px 0}dialog#rules p,dialog#rules li{color:var(--text-2)}dialog#rules strong{color:var(--ivory)}
#results{position:fixed;right:16px;bottom:16px;z-index:45}
.results-dialog{background:var(--surface);border-color:var(--gold-deep);color:var(--ivory)}
.results-dialog h2{font-family:var(--display);color:var(--gold-text);letter-spacing:0}
.results-dialog .results-summary{font-family:var(--serif);font-size:18px;color:var(--text-2)}
.results-dialog table{font:500 15px var(--sans)}.results-dialog th{color:var(--text-3);font-size:13px}.results-dialog td:last-child{color:var(--gold-text)}
.results-reopen,.results-dialog button{font:700 15px var(--sans);border-radius:10px}
.results-reopen{background:var(--leaf);color:#1e1408}
.results-dialog button{background:var(--surface-2);color:var(--ivory);border-color:var(--line)}

@keyframes pulse{50%{opacity:.35}}
@keyframes tick{50%{transform:scale(1.18)}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes sweep{from{background-position:140% 0}to{background-position:-60% 0}}
@keyframes step{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes beckon{50%{transform:translateY(-4px)}}
@keyframes flip{0%{transform:rotateY(90deg) scale(1.1)}100%{transform:none}}
@keyframes float{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@keyframes stamp{0%{opacity:0;transform:rotate(-4deg) scale(1.8)}100%{opacity:1;transform:rotate(-4deg)}}
@keyframes claim{0%{opacity:0;transform:scale(.85) rotate(-3deg)}100%{opacity:1;transform:none}}

/* Below 1100px the ledger and chronicle move into a sheet. */
@media(max-width:1100px){
 .arena{grid-template-columns:minmax(0,1fr)}
 .side-toggle,.side-close{display:inline-flex}
 .arena-side{position:fixed;top:0;right:0;bottom:0;z-index:35;width:min(380px,92vw);padding:14px 16px 24px;background:var(--surface);border-left:1px solid var(--gold-deep);box-shadow:-20px 0 60px #000b;transform:translateX(105%);transition:transform .25s ease;visibility:hidden}
 body.side-open .arena-side{transform:none;visibility:visible}
 .side-close{align-self:flex-end}
}
@media(max-width:900px){
 .move-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .move{grid-template-columns:1fr;justify-items:start;gap:4px;min-height:0}
 .move-effect{display:none}
}
/* Phones: stack the stage and your hand; every region still shares one screen. */
@media(max-width:700px){
 #entry{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:4px}
 .coup-hero h1{font-size:4rem;margin:4px 0 8px}.hero-copy{font-size:18px;margin-bottom:12px}
 .setup-buttons{grid-template-columns:1fr 1fr 1fr}
 .match{padding:0 10px env(safe-area-inset-bottom)}
 .bar{min-height:46px}.bar-room{display:none}.bar-net{font-size:0;gap:0;max-width:none}
 .bar-actions button.ghost{padding:.3rem .5rem;font-size:13.5px}
 #copy-watch{display:none}
 .arena{padding:8px 0}
 .coup-table{--seat-card:clamp(22px,4.2dvh,32px);--stage-card:clamp(46px,9dvh,72px);--hand-card:clamp(56px,9.4dvh,76px);gap:8px;overflow:auto}
 .opponents{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .seat{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;text-align:left;gap:8px}
 .seat-info{justify-items:start;width:100%;min-width:0}.seat-top{justify-content:flex-start;flex-wrap:wrap;gap:0 8px;width:100%}
 .seat-cards .cc+.cc{margin-left:calc(var(--seat-card)*-.45)}
 .court-deck{display:none}
 .seat-name{max-width:100%;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
 .seat-lost{display:none}.seat-status{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .coup-table{grid-template-rows:auto auto auto}
 /* A clipped grid item may shrink to nothing; let the stage keep its content height and the table scroll if a phone is very short. */
 .stage{overflow:visible;min-height:auto}
 /* The announcement already names the claim; phones skip the duplicate card picture to keep one screen. */
 .claim{display:none}
 .herald-waiting{display:none}
 .opponents[data-count="1"]{grid-template-columns:1fr}
 .seat{min-width:0;max-width:none;padding:4px 8px;border-radius:12px}
 .hand-cards .cc-plate{padding:3px 2px 4px}.hand-cards .cc-name{font-size:12.5px}
 .seat-name{font-size:16px}.seat-bot{display:none}.purse-count{font-size:15px}.coin-icon{width:15px;height:15px}
 .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:'herald' 'center' 'actions';padding:8px;gap:8px;border-radius:14px}
 .stage-center{justify-content:center}
 .herald{padding:10px 12px}.herald-line{font-size:20px}.herald-sub{font-size:15.5px;margin-bottom:8px}
 .herald-waiting{margin-top:8px}
 .stamp{position:static;display:inline-block;margin:0 0 6px;transform:rotate(-3deg)}.stamp-in{animation:none}
 .stage-center{gap:10px}
 .exchange-row{justify-content:center}
 .you{grid-template-columns:1fr;gap:8px;padding:8px 10px 10px;border-radius:14px}
 .hand-head{margin-bottom:6px}.hand-cards{gap:8px}
 .you-hand{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
 .you-hand .hand-head{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;gap:4px}
 .you-hand .hand-cards{grid-column:1;grid-row:1}
 /* The announcement just above already says what to decide; phones drop the repeated heading. */
 .you-moves .moves-title{display:none}
 /* The pair switch tucks beside the hand, under the coin count, so it costs no height. */
 .pair-hint{display:none}
 .moves-head{position:absolute;top:66px;right:10px;margin:0}.pair-toggle{min-height:34px;font-size:13.5px}
 .move-grid{gap:6px}
 .move{gap:2px;padding:5px 6px;border-left-width:3px}
 .move-icon,.move-coin{width:22px;height:22px}.icon-vector{padding:3px}.move-coin{font-size:12px}
 .move-label{font-size:13.5px}
 .tag{font-size:12px;padding:0 6px}
 .response-row button{flex:1 1 140px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}