:root{--ink:#fff8df;--muted:#c9cfb7;--gold:#f4c64e;--green:#0b2c22;--panel:#102f27;--line:#456246;--red:#d9322f;--yellow:#e4af21;--blue:#1665bd;--card-green:#19844e;box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:#061913}*{box-sizing:inherit}body{margin:0;background:radial-gradient(circle at 50% -15%,#21583d 0,#0b2c22 38%,#061913 100%);min-height:100vh}button,select,input{font:inherit}button,select,input,.quit{border:1px solid #718366;border-radius:.55rem;background:#1d3b31;color:var(--ink);min-height:2.7rem;padding:.6rem .85rem;font-weight:800}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:linear-gradient(#f6cf62,#d99d21);color:#241706;border-color:#ffdc74;box-shadow:0 .25rem 0 #825b12}.quit{display:inline-flex;align-items:center;text-decoration:none}.setup{width:min(1180px,100%);margin:auto;padding:1rem}.setup-head,.game-head{display:flex;align-items:center;justify-content:space-between}.crest{display:grid;place-items:center;width:3rem;height:3rem;border:2px solid var(--gold);border-radius:50%;background:#17467f;color:#ffe174;font-size:1.45rem}.connection,.panel-title span,.rules legend,.title>p,.game-head span,.status span,.hand-wrap header span,footer{font-size:.7rem;font-weight:900;letter-spacing:.12em;color:var(--gold)}.title{text-align:center;padding:.4rem 0 1rem}.title h1{margin:0;display:flex;justify-content:center;gap:.1em;font:900 clamp(3.2rem,8vw,6.5rem)/.85 Impact,sans-serif;transform:rotate(-3deg);filter:drop-shadow(0 .35rem 0 #050b09)}.title h1 i{font-style:normal;color:#fff;border:.08em solid #fff;border-radius:50%;width:1.05em;height:1.05em;display:grid;place-items:center}.title h1 i:nth-child(1){background:var(--red)}.title h1 i:nth-child(2){background:var(--yellow);color:#17120a}.title h1 i:nth-child(3){background:var(--blue)}.title>strong{display:block;margin-top:.8rem;font-family:Georgia,serif;color:#eadfbd}.setup-grid{display:grid;grid-template-columns:.7fr 1.5fr .8fr;gap:.8rem}.panel{background:linear-gradient(135deg,rgba(23,59,48,.95),rgba(8,35,28,.96));border:1px solid var(--line);border-radius:.75rem;padding:1rem}.panel-title{display:flex;justify-content:space-between}.panel p,.panel small{color:var(--muted)}.identity{display:flex;flex-direction:column;text-align:center;justify-content:center}.identity>strong{font:700 1.25rem Georgia,serif;margin:.3rem}.identity a{color:#ffd867}.online{grid-row:span 2}.online-controls{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.online-controls label,.local>label,.score{display:grid;gap:.25rem;font-size:.72rem;color:var(--gold);font-weight:800}.check{display:flex!important;align-items:center;gap:.55rem;color:var(--ink)!important}.check input{width:1.2rem;height:1.2rem;min-height:0;accent-color:var(--gold);flex:none}.check span{display:grid}.check small{font-weight:500}.lobby{margin-top:.7rem;border-top:1px solid var(--line);padding-top:.7rem}.lobby-code{display:flex;justify-content:space-between}.lobby-code strong{letter-spacing:.18em;color:var(--gold)}.lobby ul{list-style:none;padding:0;margin:.4rem 0}.lobby li{display:flex;justify-content:space-between;padding:.25rem}.lobby-actions{display:flex;gap:.4rem;flex-wrap:wrap}.error{color:#ff9891!important;font-weight:800;min-height:1em}.local{display:grid;gap:.75rem}.rules{grid-column:1/-1}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.score{margin-top:.7rem;max-width:16rem}
.game{height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(3.4rem,13vh) minmax(13rem,1fr) minmax(7.5rem,26vh) auto;padding:.45rem;gap:.35rem;background:radial-gradient(ellipse at center,#18583c,#08281f 67%,#041711)}.game-head{min-height:2.8rem;border-bottom:1px solid #526a3e}.game-head>div{text-align:center;display:grid}.game-head strong{font-family:Georgia,serif}.round{text-align:right!important}.opponents{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;align-items:stretch}.opponent{min-width:0;border:1px solid #496547;border-radius:.5rem;background:#0a251e;padding:.4rem;display:grid;align-content:center;text-align:center}.opponent.active{border-color:var(--gold);box-shadow:0 0 .8rem #eab73266}.opponent strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 clamp(.65rem,1.2vw,.95rem) Georgia,serif}.opponent span{font-size:.65rem;color:var(--muted)}.opponent .backs{height:1.5rem;margin:.2rem auto 0;display:flex;justify-content:center}.opponent .backs i{width:1rem;border-radius:.15rem;background:#192f81;border:1px solid #eee;margin-left:-.45rem}.table{border:1px solid #476941;border-radius:1rem;background:radial-gradient(ellipse,#256a49,#12412f 65%,#0a2c22);display:grid;grid-template-rows:auto 1fr auto;place-items:center;min-height:0}.status{text-align:center;display:grid;padding:.35rem}.piles{display:flex;gap:clamp(.8rem,4vw,3rem);align-items:center}.pile{width:clamp(4.5rem,10vh,7rem);aspect-ratio:2/3;border-radius:.65rem;position:relative;display:grid;place-items:center;padding:0;min-height:0}.draw{background:repeating-linear-gradient(45deg,#112e7a 0 7px,#173d96 7px 14px);border:.3rem solid #fff;box-shadow:0 .3rem .7rem #0008}.draw i{font-size:2rem;color:#ffe06a}.draw b{position:absolute;right:-.5rem;top:-.5rem;background:var(--gold);color:#1d1807;border-radius:2rem;padding:.2rem .45rem}.draw span{position:absolute;bottom:.25rem;font-size:.55rem}.discard{filter:drop-shadow(0 .3rem .4rem #0008)}.turn-actions{display:flex;gap:.35rem;min-height:3rem;align-items:start}.turn-actions button{min-height:2.3rem;padding:.4rem .7rem}.hand-wrap{border:1px solid #5b6e3e;border-radius:.75rem;background:#071f18;min-height:0;overflow:hidden}.hand-wrap header{height:2.3rem;display:flex;align-items:center;justify-content:space-between;padding:.25rem .6rem}.hand-wrap header>div{display:grid}.hand{height:calc(100% - 2.3rem);display:flex;justify-content:center;align-items:end;padding:0 min(4vw,2.5rem) .25rem}.card{--c:#222;position:relative;width:clamp(3.8rem,9vw,6.1rem);height:min(100%,9rem);aspect-ratio:2/3;border:.24rem solid #fff;border-radius:.6rem;background:var(--c);color:#fff;flex:0 1 auto;margin-left:clamp(-2.3rem,-3vw,-.7rem);box-shadow:0 .25rem .5rem #0009;transition:transform .15s;overflow:hidden}.card:first-child{margin-left:0}.card:hover,.card:focus-visible{transform:translateY(-.45rem);z-index:5}.card.red{--c:var(--red)}.card.yellow{--c:var(--yellow);color:#241900}.card.green{--c:var(--card-green)}.card.blue{--c:var(--blue)}.card.wild{--c:#171717;background:conic-gradient(from 45deg,var(--red) 0 25%,var(--yellow) 0 50%,var(--card-green) 0 75%,var(--blue) 0)}.card .corner{position:absolute;font-weight:1000;font-size:clamp(.65rem,1.4vw,1rem);line-height:.8}.card .tl{top:.32rem;left:.32rem}.card .br{bottom:.32rem;right:.32rem;transform:rotate(180deg)}.card .symbol{width:70%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;font:1000 clamp(1.4rem,4vw,3rem)/1 Impact,sans-serif;transform:rotate(-18deg);text-shadow:none}.card.wild .symbol{color:#111}.card.playable{box-shadow:0 0 0 .16rem var(--gold),0 0 1rem #f5ce4f88}.card:disabled{opacity:.68}.card-back{height:100%;width:70%;border:.18rem solid #fff;border-radius:.35rem;background:repeating-linear-gradient(45deg,#102c75 0 6px,#1c4aac 6px 12px)}footer{display:flex;justify-content:space-between;padding:.1rem .4rem}.modal{position:fixed;inset:0;background:#00100cc9;display:grid;place-items:center;z-index:20;padding:1rem}.modal>div{width:min(28rem,100%);padding:1.2rem;border:1px solid var(--gold);border-radius:1rem;background:#0b2b22;text-align:center;box-shadow:0 1rem 3rem #000}.color-choices{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.color-choices button[data-color=red]{background:var(--red)}.color-choices button[data-color=yellow]{background:var(--yellow);color:#171108}.color-choices button[data-color=green]{background:var(--card-green)}.color-choices button[data-color=blue]{background:var(--blue)}.target-choices{display:grid;gap:.4rem}.modal a{color:var(--gold);display:block;margin-top:.8rem}.modal[hidden],.game[hidden],.setup[hidden],[hidden]{display:none!important}
@media(max-width:780px){.setup-grid{grid-template-columns:1fr}.online{grid-row:auto}.rules{grid-column:auto}.rule-grid{grid-template-columns:1fr 1fr}.game{grid-template-rows:auto minmax(3rem,11vh) minmax(11rem,1fr) minmax(7rem,25vh) auto}.opponents{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}.opponent{padding:.15rem}.opponent .backs{display:none}.card{width:clamp(3.1rem,16vw,5.2rem);margin-left:clamp(-2.6rem,-7vw,-1.2rem)}.status strong{font-size:.75rem}.pile{width:clamp(4rem,10vh,5.5rem)}.turn-actions button{font-size:.72rem}.title h1{font-size:4rem}}
@media(max-width:480px){.setup{padding:.5rem}.online-controls{grid-template-columns:1fr}.rule-grid{grid-template-columns:1fr}.game{padding:.2rem;gap:.18rem}.game-head .quit{min-height:2rem;padding:.25rem}.opponents{gap:.15rem}.opponent span{font-size:.55rem}.hand{padding-left:1.6rem;padding-right:1.6rem}.card{border-width:.18rem;border-radius:.45rem}.card .symbol{font-size:1.45rem}.turn-actions{min-height:2.35rem}.turn-actions button{min-height:2rem;padding:.25rem .4rem}footer{font-size:.55rem}}
@media(max-height:650px){.game{grid-template-rows:2.4rem minmax(2.5rem,10vh) minmax(9rem,1fr) minmax(6rem,24vh) 1rem}.game-head{min-height:2.2rem}.pile{width:4rem}.hand-wrap header{height:1.7rem}.hand{height:calc(100% - 1.7rem)}.status{padding:.1rem}.turn-actions{min-height:2.2rem}.opponent .backs{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.admin-debug-button{position:fixed;right:.7rem;bottom:.7rem;z-index:90;background:#7b2626;color:#fff3c4;border:1px solid #e6ba58;border-radius:999px;padding:.55rem .8rem;font-weight:900}.admin-debug-panel{z-index:100;width:min(27rem,calc(100% - 1rem));color:#f7e8bd;background:#17241b;border:1px solid #e6ba58;border-radius:.7rem}.admin-debug-panel::backdrop{background:#000a}.admin-debug-panel form{display:grid;gap:.55rem}.admin-debug-panel header{display:flex;justify-content:space-between}.admin-debug-panel label{display:grid;gap:.15rem}.admin-debug-panel input,.admin-debug-panel select{padding:.5rem;background:#09130e;color:#fff;border:1px solid #71805e}.admin-debug-panel div{display:flex;gap:.4rem}.admin-debug-panel small{color:#f2c96b}.debug-hand{display:flex;width:100%;max-width:100%;gap:.05rem;overflow:hidden;padding:.15rem}.debug-hand .card{flex:1 1 0;width:min(2rem,100%);height:3rem;min-width:0;margin:0;padding:0}.debug-hand .card .corner{display:none}.debug-hand .card .symbol{font-size:clamp(.35rem,1vw,.8rem)}