: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}#ss-defs{position:absolute;width:0;height:0;overflow:hidden}html,body{margin:0;height:100%;overflow:hidden;background:#0b3a52;font-family:var(--ui-font);-webkit-tap-highlight-color:transparent}.team-0,.owner-0{--team: #d8433b;--team-dark: #8f201a;--team-light: #ffb3ab}.team-1,.owner-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.my-turn{cursor:pointer}.stage .bg{position:absolute;inset:0;width:100%;height:100%}.ship{position:absolute;top:474px;width:250px;height:270px;z-index:1;animation:bob 4.2s ease-in-out infinite}.ship.team-0{left:-8px}.ship.team-1{right:-8px;animation-delay:-2.1s}.ship-svg{width:100%;height:100%}.ship.team-1 .ship-svg{transform:scaleX(-1)}.ship .sail,.ship .flag{fill:var(--team)}.stage.won-0 .ship.team-0 .flag,.stage.won-1 .ship.team-1 .flag{animation:wave-flag .4s ease-in-out infinite alternate;transform-origin:122px 22px}@keyframes bob{0%,to{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(5px) rotate(.6deg)}}@keyframes wave-flag{to{transform:skewY(8deg) scaleX(.9)}}.rack{position:absolute;z-index:3;border-radius:18px;background:linear-gradient(#4f3219,#2e1c0c);border:6px solid #8a5529;box-shadow:inset 0 0 28px #000000a6,0 14px 34px #00000059}.rack .cell{position:absolute;width:78px;height:78px;border-radius:12px;background:#00000038;box-shadow:inset 0 3px 8px #00000080,0 1px #ffffff12}.rack-leg{position:absolute;z-index:2;width:18px;background:linear-gradient(90deg,#5a3418,#8a5529,#5a3418);border:2px solid #3b2414;border-radius:4px}.slot-arrow{position:absolute;z-index:4;width:0;height:0;transform:translate(-50%,-50%);opacity:.32;transition:opacity .15s;--arrow: #fff3cf}.slot-arrow.side-top{border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid var(--arrow)}.slot-arrow.side-left{border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:11px solid var(--arrow)}.slot-arrow.side-right{border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:11px solid var(--arrow)}.slot-arrow.active{opacity:1;--arrow: var(--team)}.tiles{position:absolute;inset:0;z-index:5;pointer-events:none}.tile{position:absolute;left:0;top:0;width:78px;height:78px;will-change:transform}.tile-inner{width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}.tile-svg{display:block;width:100%;height:100%}.tile.floating{z-index:2}.tile.floating .tile-inner{border-radius:14px;box-shadow:0 0 0 4px var(--team),0 0 22px 4px var(--team);animation:float 1.6s ease-in-out infinite}.tile.matched .tile-inner{animation:glow .33s ease-in-out infinite alternate}.tile.popping .tile-inner{animation:pop .5s ease-in forwards}.tile.sinking .tile-inner{animation:sink .62s cubic-bezier(.45,0,1,.6) .3s forwards}@keyframes float{0%,to{transform:translateY(-3px)}50%{transform:translateY(3px)}}@keyframes glow{0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0 #fff)}to{transform:scale(1.1);filter:brightness(1.25) drop-shadow(0 0 12px #fff3a0)}}@keyframes pop{0%{transform:scale(1.14);opacity:1}to{transform:scale(.1) rotate(25deg);opacity:0}}@keyframes sink{to{transform:translateY(var(--fall, 200px)) rotate(var(--spin, 35deg));opacity:.2}}.sailors{position:absolute;inset:0;z-index:4;pointer-events:none}.sailor{position:absolute;left:0;top:0;width:34px;height:54px}.sailor-body{width:100%;height:100%}.sailor.facing-left .sailor-body{transform:scaleX(-1)}.sailor svg{display:block;width:100%;height:100%;animation:idle 2.4s ease-in-out infinite;animation-delay:var(--delay, 0s);transform-origin:50% 100%}.sailor .bandana{fill:var(--team);transition:fill .9s}.sailor.walking svg{animation:walk .3s ease-in-out infinite alternate}.stage.won-0 .sailor.team-0 svg,.stage.won-1 .sailor.team-1 svg{animation:cheer .42s ease-in-out infinite alternate;animation-delay:var(--delay, 0s)}@keyframes idle{0%,to{transform:translateY(0)}50%{transform:translateY(-1.5px)}}@keyframes walk{0%{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-5px) rotate(5deg)}}@keyframes cheer{0%{transform:translateY(0)}to{transform:translateY(-14px)}}.waves-wrap{position:absolute;left:-20px;right:-20px;bottom:0;height:56px;z-index:6;pointer-events:none;animation:swell 3.6s ease-in-out infinite}.waves{width:100%;height:100%}@keyframes swell{0%,to{transform:translate(0)}50%{transform:translate(14px,3px)}}.wood{position:absolute;z-index:7;background:linear-gradient(#f5e2b6,#e2c48b);border:4px solid var(--wood);border-radius:14px;box-shadow:0 8px 18px #00000047,inset 0 0 0 2px #ffffff59;color:var(--wood-dark);padding:10px 12px}.wood-title{font:800 14px var(--title-font);text-transform:uppercase;letter-spacing:.06em;color:var(--wood);margin-bottom:6px;text-align:center}.legend{left:16px;top:150px;width:200px}.legend-row{display:flex;align-items:center;gap:8px;height:36px;font-size:14px;font-weight:600}.legend-row b{margin-left:auto;font:900 18px var(--title-font);color:#7a3d10}.legend-foot{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(122,74,34,.45);font-size:11.5px;line-height:1.4;color:#6b4a2a}.mini{width:32px;height:32px;flex:none}.mini svg{display:block;width:100%;height:100%}.mini.big{width:64px;height:64px;margin:4px auto 3px}.queue{right:16px;top:150px;width:164px;text-align:center}.queue-item+.queue-item{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(122,74,34,.45)}.queue-owner{display:inline-block;max-width:140px;padding:2px 10px;border-radius:999px;background:var(--team);color:#fff;font:700 13px var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score{position:absolute;top:12px;z-index:7;width:250px;padding:8px 14px 7px;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}.score.team-0{left:16px;transform-origin:0 0}.score.team-1{right:16px;text-align:right;transform-origin:100% 0}.score.active{transform:scale(1.04);box-shadow:0 0 0 4px #fff6c8,0 0 26px 6px var(--team-light)}.score-name{font:800 17px var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-value{font:900 40px/1.05 var(--title-font);text-shadow:0 3px 0 rgba(0,0,0,.25)}.score-value.bump{animation:bump .45s ease}.score-sailors{font-size:13px;opacity:.92}@keyframes bump{40%{transform:scale(1.18)}}.plaque{position:absolute;left:50%;top:588px;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:12px;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 .score,.stage.in-menu .queue,.stage.in-menu .plaque,.stage.in-menu .slot-arrow,.stage.in-menu .hud-button:not(.sound){display:none}.fx{position:absolute;inset:0;z-index:8;pointer-events:none}.points{position:absolute;transform:translate(-50%,-50%);font:900 32px var(--title-font);color:#fff;-webkit-text-stroke:1.5px var(--team-dark);text-shadow:0 3px 0 var(--team-dark),0 0 14px rgba(0,0,0,.35);white-space:nowrap;animation:rise 1.4s ease-out forwards}.points small{margin-left:4px;font-size:20px;color:#ffe27a}@keyframes rise{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{opacity:1}to{transform:translate(-50%,-170%) scale(1);opacity:0}}.banner{position:absolute;left:50%;top:340px;transform:translate(-50%,-50%);font:900 66px var(--title-font);color:#ffe27a;-webkit-text-stroke:3px #6b3a12;text-shadow:0 6px 0 #6b3a12,0 12px 26px rgba(0,0,0,.45);white-space:nowrap;animation:banner-pop 1.15s ease-out forwards}.banner.combo{color:#ffa24a;font-size:58px}@keyframes banner-pop{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}to{transform:translate(-50%,-62%) scale(1);opacity:0}}.intro{position:absolute;left:50%;top:330px;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 60px var(--title-font);color:#ffd34d;-webkit-text-stroke:2px #6b3a12;text-shadow:0 5px 0 #6b3a12}.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:140px;transform:translate(-50%);padding:9px 20px;border-radius:999px;background:#281406d9;color:#fff;font:700 18px var(--ui-font);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}}.spark{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ffe27a 31% 60%,transparent 61%);animation:spark .65s ease-out forwards}@keyframes spark{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}.splash:before,.splash:after{content:"";position:absolute;left:0;top:0;border:3px solid #e6fbff;border-radius:50%;transform:translate(-50%,-50%);animation:ring .8s ease-out forwards}.splash:after{animation-delay:.15s}@keyframes ring{0%{width:10px;height:4px;opacity:.95}to{width:96px;height:24px;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}@keyframes panel-in{0%{transform:scale(.92);opacity:0}}.panel h1.title{margin:6px 0 2px;font:900 50px/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)}}@media(prefers-reduced-motion:reduce){.ship,.waves-wrap,.sailor svg,.tile.floating .tile-inner{animation:none!important}}