:root{--ui-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--title-font: Georgia, "Palatino Linotype", "Book Antiqua", serif;--wood: #7a4a22;--wood-dark: #4a2a10}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b3a52;font-family:var(--ui-font);-webkit-tap-highlight-color:transparent}.team-0{--team: #d8433b;--team-dark: #8f201a;--team-light: #ffb3ab}.team-1{--team: #2f6fd6;--team-dark: #173d82;--team-light: #b3cdff}.viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#145574,#082c40)}.frame{position:relative;overflow:hidden;box-shadow:0 0 60px #00000080}.stage{position:absolute;left:0;top:0;width:1100px;height:760px;transform-origin:0 0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.stage.can-grab{cursor:grab}.stage.my-turn:active{cursor:grabbing}canvas.board{position:absolute;left:0;top:0;width:1100px;height:760px}.crew{position:absolute;top:12px;z-index:7;width:300px;padding:8px 14px 9px;border-radius:16px;background:linear-gradient(var(--team),var(--team-dark));border:4px solid rgba(255,255,255,.8);color:#fff;box-shadow:0 8px 18px #0000004d;transition:transform .2s,box-shadow .2s}.crew.team-0{left:14px;transform-origin:0 0}.crew.team-1{right:14px;text-align:right;transform-origin:100% 0}.crew.active{transform:scale(1.04);box-shadow:0 0 0 4px #fff6c8,0 0 26px 6px var(--team-light)}.crew-name{font:800 17px var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crew-score{display:flex;align-items:baseline;gap:8px}.crew.team-1 .crew-score{flex-direction:row-reverse}.crew-score b{font:900 34px/1.05 var(--title-font);text-shadow:0 3px 0 rgba(0,0,0,.25)}.crew-score span{font-size:13px;opacity:.9}.crew-heads{display:flex;gap:4px;margin-top:3px}.crew.team-1 .crew-heads{justify-content:flex-end}.head{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 62%,#f1c27d 0 42%,transparent 43%),radial-gradient(circle at 50% 30%,var(--team-light) 0 48%,transparent 49%),#fff;border:2px solid rgba(0,0,0,.35);transition:opacity .3s,transform .3s}.head.lost{opacity:.25;transform:scale(.8);filter:grayscale(1)}.plaque{position:absolute;left:50%;top:14px;z-index:7;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:14px;background:linear-gradient(#f5e2b6,#e2c48b);border:4px solid var(--wood);box-shadow:0 6px 14px #0000004d;color:var(--wood-dark);font:800 18px var(--ui-font);white-space:nowrap}.plaque:empty{display:none}.plaque.moving{opacity:.6}.plaque-arrow{color:var(--team);font-size:20px}.plaque-timer{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:var(--team);color:#fff;font:900 18px var(--title-font)}.plaque-timer:empty{display:none}.plaque.urgent .plaque-timer{background:#d1170f;animation:pulse .45s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.18)}}.hud{position:absolute;top:74px;left:50%;z-index:9;transform:translate(-50%);display:flex;gap:8px}.hud-button{font:700 14px var(--ui-font);padding:6px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.85);background:#10304699;color:#fff;cursor:pointer}.hud-button:hover{background:#103046cc}.stage.in-menu .crew,.stage.in-menu .plaque,.stage.in-menu .hud-button:not(.sound){display:none}.fx{position:absolute;inset:0;z-index:8;pointer-events:none}.intro{position:absolute;left:50%;top:420px;transform:translate(-50%,-50%);padding:18px 40px 20px;border-radius:24px;background:#281406b8;text-align:center;animation:intro 1.6s ease-out forwards}.intro-title{font:900 56px var(--title-font);color:#ffd34d;-webkit-text-stroke:2px #6b3a12;text-shadow:0 5px 0 #6b3a12;white-space:nowrap}.intro-sub{margin-top:6px;font:700 22px var(--ui-font);color:#fff}@keyframes intro{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}15%{transform:translate(-50%,-50%) scale(1.05);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}to{opacity:0}}.toast{position:absolute;left:50%;top:128px;transform:translate(-50%);padding:9px 20px;border-radius:999px;background:#281406d9;color:#fff;font:700 18px var(--ui-font);white-space:nowrap;animation:toast 1.8s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}.overlay{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:radial-gradient(#05192826,#0519288c)}.overlay.open{display:flex}.panel{width:470px;max-height:700px;overflow-x:hidden;overflow-y:auto;padding:20px 28px 24px;border-radius:22px;background:linear-gradient(#fcefcf,#ecd29a);border:6px solid var(--wood);box-shadow:0 20px 50px #00000073,inset 0 0 0 3px #fff6;color:var(--wood-dark);text-align:center;animation:panel-in .22s ease-out}.panel.rules-panel{width:600px}.panel.wide{width:700px}.pick-title{margin-top:12px!important;font-weight:700}.formations{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:6px 0 2px;padding:4px}.formation{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 7px;border-radius:12px;border:3px solid rgba(122,74,34,.35);background:#ffffff73;color:inherit;font:inherit;cursor:pointer;transition:opacity .2s,box-shadow .2s}.formation canvas{display:block;width:100%;height:auto;aspect-ratio:112 / 68;border-radius:6px}.formation b{font:800 14px var(--title-font)}.formation.selected{border-color:var(--wood);background:#fff6dc;box-shadow:0 0 0 3px #ffd34d}.formation:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}.formations.readonly .formation{cursor:default}.formations.readonly .formation:not(.selected){opacity:.45}.pick-hint{min-height:1.3em;margin:4px 0!important}@keyframes panel-in{0%{transform:scale(.92);opacity:0}}.panel h1.title{margin:6px 0 2px;font:900 56px/1.05 var(--title-font);white-space:nowrap;color:#ffd34d;-webkit-text-stroke:2.5px #6b3a12;text-shadow:0 5px 0 #6b3a12,0 10px 24px rgba(0,0,0,.3)}.subtitle{margin:4px 0 16px;font:italic 600 18px var(--title-font);color:var(--wood)}.panel h2{margin:4px 0 10px;font:900 32px var(--title-font);color:#7a3d10}.panel h2.win{color:#2b8a3e}.panel h2.lose{color:#b23a2e}.panel p{margin:8px 0;font-size:16px}.menu{display:grid;gap:10px;margin:12px 0 4px}.btn{font:800 18px var(--ui-font);padding:11px 18px;border-radius:14px;border:3px solid var(--wood);background:linear-gradient(#fff8e6,#f0d9a8);color:#5a3214;cursor:pointer;box-shadow:0 4px 0 var(--wood);transition:transform .08s}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood)}.btn:focus-visible,.card:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}.btn.primary{background:linear-gradient(#ffdb70,#f2a92a);color:#4a2410}.btn[disabled]{opacity:.5;cursor:default}.row{display:flex;gap:10px;justify-content:center;margin-top:14px}.row .btn{flex:1}.cards{display:grid;gap:8px}.card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px;border:3px solid rgba(122,74,34,.35);background:#ffffff73;color:inherit;font:inherit;text-align:left;cursor:pointer}.card b{font:800 19px var(--title-font)}.card span{font-size:14px;opacity:.85}.card.selected{border-color:var(--wood);background:#fff6dc;box-shadow:0 0 0 3px #ffd34d}.field{display:grid;gap:6px;margin:8px 0 12px;text-align:left;font-weight:700}input,select{font:700 18px var(--ui-font);padding:9px 12px;border-radius:12px;border:3px solid var(--wood);background:#fffdf6;color:var(--wood-dark);outline:none}select{font-size:16px;font-weight:600}input:focus,select:focus{box-shadow:0 0 0 3px #ffd34d}.join{display:flex;gap:10px;margin-top:12px}.join input{width:130px;text-align:center;letter-spacing:.3em;text-transform:uppercase}.join .btn{flex:1}.code{width:260px;margin:8px auto;padding:6px 0;border:3px dashed var(--wood);border-radius:16px;background:#fffdf6;font:900 54px var(--title-font);letter-spacing:.2em;color:#7a3d10;-webkit-user-select:all;user-select:all}.spinner{width:40px;height:40px;margin:14px auto;border-radius:50%;border:5px solid rgba(122,74,34,.25);border-top-color:var(--wood);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.rules{margin:6px 0;padding-left:22px;text-align:left;font-size:15.5px;line-height:1.45}.rules li{margin:6px 0}.hint{font-size:13.5px!important;color:#6b4a2a}.error{color:#b23a2e;font-weight:700}.final{font:900 42px var(--title-font)!important;margin:4px 0!important}.note{min-height:1.3em;font-weight:700;color:#7a3d10}.form{display:grid;gap:10px;text-align:left}.form label{display:grid;gap:4px;font-weight:700}.shake{animation:shake .4s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}