/* Colour Clash. Theme tokens only (--lg-*); the four suit colours are derived from them, with explicit
   colour-blind-safe values, and every suit also has its own shape (▲ ● ■ ◆) so colour is never the only clue. */
:root{--lg-topbar:76px;--cc-red:var(--lg-bad);--cc-blue:var(--lg-p2);--cc-green:var(--lg-good);--cc-gold:var(--lg-warn);--cw:70px;--pw:84px}
:root[data-theme=light]{--cc-gold:#946a0c}
:root[data-cb=on]{--cc-red:#b04600;--cc-blue:#0072b2;--cc-green:#007a5e;--cc-gold:#8c6d00}
:root[data-cb=on][data-theme=dark],:root[data-cb=on][data-theme=midnight]{--cc-red:#f0a060;--cc-blue:#56b4e9;--cc-green:#3cc8a0;--cc-gold:#f0e442}
body{background:var(--lg-cream);color:var(--lg-ink)}
.cc-top{height:64px;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-top>a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
#tools{display:flex;gap:6px}
h1{font-size:2rem;margin:0;letter-spacing:-.01em}h2{font-size:1.1rem;margin:18px 0 8px}p{margin:5px 0}
.eyebrow{font-size:.62rem;color:var(--lg-muted);margin:0 0 6px;letter-spacing:0}
h2.eyebrow{font-family:var(--lg-font);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}
.small{font-size:.82rem;line-height:1.5;color:var(--lg-muted)}
.lead{font-size:1.02rem;line-height:1.5}
kbd{font:600 .75rem var(--lg-font);border:1px solid var(--lg-line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--lg-cream)}

/* ---------- setup ---------- */
#entry{padding:0 12px 24px}
#setup{max-width:560px;margin:12px auto}
#setup h1{font-size:2.2rem}
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.preset{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:84px;padding:12px;border:2px solid var(--lg-line);border-radius:10px;background:var(--lg-cream);color:var(--lg-ink);font-family:var(--lg-font)}
.preset b{font-size:1.05rem}.preset span{font-size:.78rem;line-height:1.35;color:var(--lg-muted)}
.preset:hover{border-color:var(--lg-muted)}
.preset[aria-pressed=true]{border-color:var(--lg-rose);background:var(--lg-pink);box-shadow:inset 0 0 0 1px var(--lg-rose)}
.preset[aria-pressed=true] b::after{content:' ✓';color:var(--lg-rose)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.chips .lg-chip{font-size:.72rem;padding:4px 8px;background:var(--lg-cream);color:var(--lg-ink);border:1px solid var(--lg-line)}
.chips .chip-lead{background:var(--lg-pink);color:var(--lg-rose);border-color:transparent;font-weight:800}
details{margin-top:12px;border:1px solid var(--lg-line);border-radius:10px;background:var(--lg-cream)}
summary{min-height:48px;display:flex;align-items:center;padding:0 14px;font-weight:800;cursor:pointer}
details[open] summary{border-bottom:1px solid var(--lg-line)}
.toggles{display:grid;gap:0;padding:4px 14px}
.toggle{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lg-line);min-height:48px;cursor:pointer}
.toggle:last-child{border-bottom:0}
.toggle input{width:24px;height:24px;flex:none;margin:2px 0 0;accent-color:var(--lg-rose)}
.toggle b{display:block;font-size:.92rem}.toggle small{display:block;font-size:.8rem;line-height:1.4;color:var(--lg-muted);margin-top:2px}
.seg{border:0;padding:0;margin:12px 0}
details .seg{padding:0 14px}details .seg:last-child{padding-bottom:14px}
.seg legend{font-weight:800;font-size:.85rem;margin-bottom:6px;padding:0}
.seg label{display:inline-flex;position:relative;margin:0 6px 6px 0}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:0 14px;border:1px solid var(--lg-line);border-radius:8px;background:var(--lg-white);font-weight:600;font-size:.9rem;cursor:pointer}
.seg input:checked+span{background:var(--lg-rose);border-color:var(--lg-rose);color:var(--lg-on-rose)}
.seg input:focus-visible+span{outline:3px solid var(--lg-rose);outline-offset:2px}
.note{padding:12px;border-radius:10px;background:var(--lg-pink);font-weight:600}
@media(min-width:1000px){
  #entry:not([hidden]){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start;max-width:1120px;margin:8px auto;padding:0 16px;max-height:calc(100dvh - 84px);overflow:auto}
  #setup{margin:0}#lobby .lg-lobby{margin:0}
  .lg-lobby:has(.lg-roster) .lg-roster ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-left:20px}
}

/* ---------- the cards ---------- */
.cc-card{--c:var(--lg-ink);position:relative;display:inline-block;flex:none;width:var(--cw);height:calc(var(--cw)*1.42);border-radius:calc(var(--cw)*.13);background:var(--lg-white);border:1px solid var(--lg-line);color:var(--c);box-shadow:0 1px 0 var(--lg-line),0 8px 16px -12px #0007;padding:0;margin:0;font-family:var(--lg-font);overflow:hidden;vertical-align:top}
.cc-card::before{content:'';position:absolute;inset:calc(var(--cw)*.07);border:calc(var(--cw)*.032) solid var(--c);border-radius:calc(var(--cw)*.08);pointer-events:none}
.cc-red{--c:var(--cc-red)}.cc-blue{--c:var(--cc-blue)}.cc-green{--c:var(--cc-green)}.cc-gold{--c:var(--cc-gold)}.cc-wild{--c:var(--lg-ink)}
.cc-wild::before{border-style:dashed}
.cc-mid{position:absolute;inset:0;display:grid;place-items:center}
.cc-mid>*{grid-area:1/1}
.cc-mark{width:64%;height:64%;opacity:.13}
.cc-big{font-size:calc(var(--cw)*.46);font-weight:800;line-height:1;letter-spacing:-.03em}
.cc-big.cc-icon,.cc-mid>svg.cc-icon{width:46%;height:46%}
.cc-big--wild{font-size:calc(var(--cw)*.3);background:var(--lg-white);border:1px solid var(--lg-line);border-radius:999px;padding:.12em .3em;color:var(--lg-ink)}
.cc-wildgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--cw)*.05);width:52%}
.cc-wildgrid svg{width:100%;height:auto}
.cc-pip{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:calc(var(--cw)*.19);font-weight:800;line-height:1;top:calc(var(--cw)*.13);left:calc(var(--cw)*.12)}
.cc-pip--br{top:auto;left:auto;bottom:calc(var(--cw)*.13);right:calc(var(--cw)*.12);transform:rotate(180deg)}
.cc-card[data-value="6"] .cc-pip>span,.cc-card[data-value="9"] .cc-pip>span,.cc-card[data-value="6"] .cc-big,.cc-card[data-value="9"] .cc-big{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.08em}
.cc-pip-shape{width:calc(var(--cw)*.12);height:calc(var(--cw)*.12)}
.cc-icon-s{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
.cc-shape{display:block;flex:none}
.cc-fill-red{fill:var(--cc-red)}.cc-fill-blue{fill:var(--cc-blue)}.cc-fill-green{fill:var(--cc-green)}.cc-fill-gold{fill:var(--cc-gold)}
.cc-chosen{box-shadow:0 0 0 4px var(--cc-chosen,var(--lg-ink)),0 8px 16px -12px #0007}
.cc-chosen-red{--cc-chosen:var(--cc-red)}.cc-chosen-blue{--cc-chosen:var(--cc-blue)}.cc-chosen-green{--cc-chosen:var(--cc-green)}.cc-chosen-gold{--cc-chosen:var(--cc-gold)}
.cc-back{background:var(--lg-rose);border-color:var(--lg-rose);color:var(--lg-on-rose);background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--lg-on-rose) 22%,transparent) 1px,transparent 1.6px);background-size:9px 9px}
.cc-back::before{border-color:color-mix(in srgb,var(--lg-on-rose) 55%,transparent)}
.cc-back-mark{position:absolute;inset:0;margin:auto;width:42%;height:42%;background:var(--lg-star) center/contain no-repeat;image-rendering:pixelated}
.cc-ink-red{color:var(--cc-red)}.cc-ink-blue{color:var(--cc-blue)}.cc-ink-green{color:var(--cc-green)}.cc-ink-gold{color:var(--cc-gold)}

/* ---------- table ---------- */
.cc-table{position:relative;border:1px solid var(--lg-line);border-radius:14px;background:radial-gradient(ellipse at 50% 30%,var(--lg-white),var(--lg-cream) 75%);padding:12px}
.opps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:6px;width:100%}
.opp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;align-items:center;padding:7px 9px;border:1px solid var(--lg-line);border-radius:10px;background:var(--lg-white);min-height:48px;transition:border-color .2s,background-color .2s}
.opp-name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-count{display:inline-flex;align-items:center;gap:4px;font-size:.9rem}
.mini-card{width:11px;height:15px;border-radius:2px;background:var(--lg-rose);display:inline-block}
.opp-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px;min-height:0}
.opp-tags:empty{display:none}
.tag{font-size:.66rem;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--lg-cream);color:var(--lg-muted);border:1px solid var(--lg-line)}
.tag-turn{background:var(--lg-rose);color:var(--lg-on-rose);border-color:var(--lg-rose)}
.tag-warn{background:var(--lg-bad);color:var(--lg-white);border-color:var(--lg-bad)}
.tag-call{background:var(--lg-pink);color:var(--lg-rose);border-color:transparent}
.opp.is-turn{border:2px solid var(--lg-rose);background:var(--lg-pink);padding:6px 8px}
.opp.is-me .opp-name::after{content:' ★';color:var(--lg-rose)}
#status{font-size:1.05rem;font-weight:700;text-align:center;min-height:2.6em;display:flex;align-items:center;justify-content:center;margin:4px 0;line-height:1.3}
.piles{display:flex;align-items:center;justify-content:center;gap:18px;--cw:var(--pw)}
.pile{display:flex;flex-direction:column;align-items:center;gap:4px}
.pile-label{font-size:.72rem;color:var(--lg-muted);font-weight:600}
#draw{cursor:pointer}#draw:disabled{cursor:default;opacity:.85}
#draw:not(:disabled):hover{transform:translateY(-2px)}
.discard{display:grid;place-items:center}
.now{display:flex;flex-direction:column;gap:8px;min-width:104px}
.colour-now{display:flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid currentColor;border-radius:10px;background:var(--lg-white)}
.colour-now svg{width:26px;height:26px;fill:currentColor}
.now-text{display:flex;flex-direction:column;line-height:1.1}.now-text small{font-size:.66rem;color:var(--lg-muted);font-weight:700}.now-text b{font-size:1rem}
.direction{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--lg-muted)}
.direction svg{width:24px;height:24px;transition:transform .35s ease;color:var(--lg-ink)}
.direction.is-ccw svg{transform:scaleX(-1)}
.penalty{margin:0;font-weight:800;color:var(--lg-bad);font-size:.9rem}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.cc-actions .lg-button{min-height:44px;padding:8px 14px}
.lg-button.is-urgent{border-color:var(--lg-bad);color:var(--lg-bad);font-weight:800;animation:cc-pulse 1s ease-in-out infinite}
.lg-button.is-urgent:disabled{animation:none}
#call[aria-pressed=true]{background:var(--lg-pink);border-color:var(--lg-rose);color:var(--lg-rose)}
@keyframes cc-pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--lg-bad) 25%,transparent)}}
.hand-box{width:100%;min-height:0;display:flex;flex-direction:column}
.hand-title{font-size:.8rem;font-weight:700;color:var(--lg-muted);margin:0 0 2px 4px}
.hand{display:flex;justify-content:center;align-items:flex-end;padding:22px 18px 12px;min-height:calc(var(--cw)*1.42 + 34px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin}
.hand.is-scroll{justify-content:flex-start}
.hand .cc-card{--rot:0deg;--dip:0px;transform:translateY(var(--dip)) rotate(var(--rot));transform-origin:50% 130%;transition:transform .16s ease,filter .16s;cursor:pointer;scroll-snap-align:start}
.hand .cc-card.is-playable{transform:translateY(calc(var(--dip) - 10px)) rotate(var(--rot))}
.hand .cc-card:hover,.hand .cc-card:focus-visible{transform:translateY(calc(var(--dip) - 18px)) rotate(var(--rot));z-index:50!important}
.hand .cc-card:focus-visible{outline:3px solid var(--lg-ink);outline-offset:2px}
.hand .cc-card.is-dim{filter:saturate(.75) brightness(.96)}
:root[data-theme=dark] .hand .cc-card.is-dim,:root[data-theme=midnight] .hand .cc-card.is-dim{filter:saturate(.75) brightness(.8)}
.hand .cc-card.is-drawn{box-shadow:0 0 0 3px var(--lg-rose),0 8px 16px -12px #0007}
.hand .cc-card.cc-new{animation:cc-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes cc-in{from{opacity:0;translate:0 -40px}}
.hand-hidden{margin:auto;color:var(--lg-muted);font-weight:600;text-align:center}
.log{margin:0;padding-left:18px;font-size:.82rem;line-height:1.55}.log li{margin-bottom:4px}
.rail-head{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#scores{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
#scores li{font-size:.86rem}#scores li.is-me b{color:var(--lg-rose)}
.score-row{display:flex;justify-content:space-between;gap:8px}
.bar{display:block;height:6px;border-radius:3px;background:var(--lg-cream);border:1px solid var(--lg-line);margin-top:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--lg-rose);transition:width .4s ease}

/* round / match over */
.cc-over{position:absolute;inset:12px;z-index:5;display:flex;flex-direction:column;gap:6px;overflow:auto;padding:22px;text-align:left}
.cc-over h2{font-size:1.5rem;margin:0}
#over-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
#over-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--lg-line);border-radius:10px;background:var(--lg-cream)}
#over-list li.is-winner{border-color:var(--lg-rose);background:var(--lg-pink)}
.over-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* dialogs */
.cc-dialog,.cc-cover{border:1px solid var(--lg-line);border-radius:16px;background:var(--lg-white);color:var(--lg-ink);padding:22px;width:min(92vw,420px)}
.cc-dialog::backdrop{background:var(--lg-backdrop)}
.cc-dialog h2{margin:0 0 12px}
.colour-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.colour-choice{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;min-height:96px;border:2px solid currentColor;border-radius:12px;background:var(--lg-cream);font-family:var(--lg-font)}
.colour-choice svg{width:30px;height:30px}
.colour-choice b{font-size:1rem}.colour-choice small{color:var(--lg-muted);font-size:.74rem}
.colour-choice:hover,.colour-choice:focus-visible{background:var(--lg-pink)}
.target-buttons{display:grid;gap:8px}
.target-choice{justify-content:space-between}
.cc-cancel{width:100%;margin-top:12px}
.cc-cover{text-align:center;width:min(94vw,460px);padding:34px 26px}
.cc-cover::backdrop{background:var(--lg-cream)}
.cc-cover .lg-star{width:34px;height:34px}
.cc-cover h2{font-size:1.5rem;margin:6px 0 10px}
.cc-cover button{width:100%;margin-top:18px}

/* ---------- PC stage ---------- */
@media(min-width:1000px){
  :root{--cw:clamp(76px,11vh,104px);--pw:clamp(84px,13vh,120px)}
  .lg-stage{grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(220px,270px);gap:16px}
  .cc-table{justify-content:flex-start;gap:8px}
  #status{margin-top:auto}.cc-actions{margin-bottom:auto}
  .opps{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
  .hand-box{flex:none}
  .lg-rail--right{gap:10px}
  .keys{margin-top:auto}
}
/* ---------- phones and tablets ---------- */
@media(max-width:999px){
  .cc-top{padding:8px 12px;height:auto;min-height:60px}
  .cc-top .lg-brand{display:none}
  #game{display:flex;flex-direction:column;gap:12px;padding:0 10px 16px}
  .cc-table{order:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px}
  .lg-rail{order:2;padding:16px;border:1px solid var(--lg-line);border-radius:14px;background:var(--lg-white);display:grid;gap:12px}
  .lg-rail--right{order:3}
  .rail-head{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .rail-head h1{font-size:1.4rem}
  .cc-over{position:static;width:100%;padding:18px;box-shadow:none}
  #game.is-over .piles,#game.is-over .cc-actions,#game.is-over .hand-box{display:none}
  #game.is-over{padding-bottom:220px}
  .keys{display:none}
}
@media(max-width:430px){
  :root{--cw:64px;--pw:74px}
  .presets{gap:6px}.preset{padding:10px 8px;min-height:92px}.preset b{font-size:.98rem}.preset span{font-size:.72rem}
  #setup{padding:18px}
  .opps{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .opp{padding:6px 7px;min-height:44px}.opp.is-turn{padding:5px 6px}
  .opp-name{font-size:.78rem}
  .piles{gap:12px}
  .now{min-width:92px}
  #status{font-size:.95rem}
  .cc-actions .lg-button{padding:8px 10px;font-size:.88rem}
}
/* reduced motion: no fan transitions, no flying cards, no pulsing */
@media(prefers-reduced-motion:reduce){.hand .cc-card,.direction svg,.bar i{transition:none}.hand .cc-card.cc-new,.lg-button.is-urgent{animation:none}}
:root[data-motion=reduce] .hand .cc-card,:root[data-motion=reduce] .direction svg{transition:none}
:root[data-motion=reduce] .hand .cc-card.cc-new,:root[data-motion=reduce] .lg-button.is-urgent{animation:none}