: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:manipulation}.stage .bg{position:absolute;inset:0;width:100%;height:100%}.board{position:absolute;z-index:3}.targets,.pieces{position:absolute;inset:0}.piece{position:absolute;left:0;top:0;width:82px;height:82px;will-change:transform}.piece .figure{position:absolute;left:7px;top:2px;width:68px;height:77px}.piece.object .figure{left:9px;top:9px;width:64px;height:64px}.piece svg{display:block;width:100%;height:100%}.pirate-svg .bandana,.pirate-svg .stripe{fill:var(--team)}.piece .badge{position:absolute;right:1px;bottom:3px;width:34px;height:34px;padding:3px;border-radius:50%;background:#fffaf0;border:3px solid var(--team);box-shadow:0 2px 4px #00000059}.piece.enemy.revealed .badge{box-shadow:0 0 0 2px #fff6c8,0 2px 6px #00000073}.piece .moved{position:absolute;left:2px;top:2px;width:22px;height:22px;padding:2px;border-radius:50%;background:#fff6dce6;border:2px solid rgba(74,42,16,.6)}.stage.my-turn .piece.movable{cursor:pointer}.stage.my-turn .piece.movable .figure{filter:drop-shadow(0 0 5px rgba(255,236,150,.95))}.piece.own.movable:hover .figure{transform:translateY(-3px);transition:transform .12s}.stage:not(.in-menu) .piece.own.movable{cursor:pointer}.piece.selected:before{content:"";position:absolute;inset:3px;border-radius:14px;border:4px solid #ffe27a;box-shadow:0 0 18px 4px #ffe27acc;animation:pulse-ring .8s ease-in-out infinite alternate}@keyframes pulse-ring{to{transform:scale(1.05)}}.piece.defeated{animation:defeated .38s ease-in forwards}@keyframes defeated{to{opacity:0;filter:grayscale(1);transform:var(--t, none) scale(.3) rotate(40deg)}}.piece.defeated .figure,.piece.defeated .badge{animation:fade-spin .38s ease-in forwards}@keyframes fade-spin{to{opacity:0;transform:scale(.2) rotate(60deg)}}.piece.falling .figure,.piece.falling .badge{animation:fall-in 1.2s cubic-bezier(.5,0,.9,.5) forwards}@keyframes fall-in{20%{transform:translateY(-8px) scale(1.05)}to{transform:translateY(10px) scale(.05) rotate(220deg);opacity:0}}.piece.looted .figure{animation:loot .9s ease-out forwards}@keyframes loot{40%{transform:scale(1.35) rotate(-6deg)}to{transform:scale(.2) translateY(-60px);opacity:0}}.target{position:absolute;left:0;top:0;width:82px;height:82px;pointer-events:none}.target.step:after{content:"";position:absolute;left:29px;top:29px;width:24px;height:24px;border-radius:50%;background:#fff6c8d9;border:3px solid #4a2a10;box-shadow:0 0 10px #ffec96e6}.target.attack:after{content:"⚔";position:absolute;inset:6px;display:grid;place-items:center;border-radius:50%;border:4px dashed #ffe27a;color:#fff;font-size:30px;text-shadow:0 2px 4px #000;z-index:5;animation:pulse-ring .6s ease-in-out infinite alternate}.wood{position:absolute;z-index:6;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 13px var(--title-font);text-transform:uppercase;letter-spacing:.06em;color:var(--wood);margin:4px 0 6px;text-align:center}.side{top:150px;width:178px;font-size:13px;line-height:1.35}.side.left{left:14px}.side.right{right:14px}.side p{margin:7px 0}.ic{display:inline-block;width:28px;height:28px;vertical-align:middle}.ic svg{display:block;width:100%;height:100%}.ic.inline{width:18px;height:18px}.rule{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:4px 0;font-weight:700;font-size:12.5px}.tip{color:#6b4a2a;font-style:italic}.setup-step{display:flex;align-items:center;gap:8px;margin:8px 0;padding:6px;border-radius:10px;border:2px solid transparent}.setup-step .ic{width:34px;height:34px;flex:none}.setup-step.now{border-color:var(--wood);background:#fff6dc;box-shadow:0 0 0 3px #ffd34d}.setup-step.done{opacity:.85}.setup-buttons{display:flex;gap:6px;margin:8px 0}.side .btn{width:100%}.btn.small{font-size:14px;padding:7px 6px}.fallen-row{margin:6px 0}.fallen-name{font-weight:800;color:var(--team-dark)}.fallen-icons{display:flex;justify-content:space-between;gap:4px}.fallen-icons.own{margin-bottom:4px}.fallen{display:flex;align-items:center;gap:2px;font:800 16px var(--title-font)}.fallen .ic{width:26px;height:26px}.fallen.none{opacity:.35}.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-name small{font-weight:600;opacity:.85}.crew-count{font-size:13px}.crew-count b{font:900 26px/1.1 var(--title-font);margin-right:4px}.crew-dots{display:flex;gap:3px;margin-top:3px}.crew.team-1 .crew-dots{justify-content:flex-end}.dot{width:15px;height:15px;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)}.dot.lost{opacity:.25;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:18px}.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 .side,.stage.in-menu .duel,.stage.in-menu .hud-button:not(.sound){display:none}.duel{position:absolute;left:50%;top:300px;z-index:9;width:440px;transform:translate(-50%,-50%);padding:14px 18px 16px;border-radius:20px;background:linear-gradient(#fcefcf,#ecd29a);border:5px solid var(--wood);box-shadow:0 18px 40px #00000073;color:var(--wood-dark);text-align:center;display:none}.duel.open{display:block;animation:panel-in .22s ease-out}.duel-title{font:900 30px var(--title-font);color:#7a3d10}.duel p{margin:6px 0}.duel-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0}.pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;border-radius:14px;border:3px solid var(--wood);background:linear-gradient(#fff8e6,#f0d9a8);box-shadow:0 4px 0 var(--wood);font:800 16px var(--ui-font);color:var(--wood-dark);cursor:pointer}.pick svg{width:70px;height:70px}.pick:hover:not([disabled]){filter:brightness(1.06);transform:translateY(-2px)}.pick[disabled]{cursor:default;opacity:.45}.pick.chosen{opacity:1;border-color:#2b8a3e;box-shadow:0 0 0 4px #ffd34d,0 4px 0 var(--wood)}.duel-status{font-weight:700;color:#7a3d10}.fx{position:absolute;inset:0;z-index:8;pointer-events:none}.clash{position:absolute;left:50%;top:405px;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:520px;padding:14px 18px;border-radius:22px;background:#281406db;box-shadow:0 16px 40px #00000080;color:#fff;text-align:center;animation:clash-in .3s ease-out}.clash.gone{animation:clash-out .3s ease-in forwards}@keyframes clash-in{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}}@keyframes clash-out{to{transform:translate(-50%,-50%) scale(.8);opacity:0}}.clash-side{display:flex;flex-direction:column;align-items:center;gap:6px}.clash-side b{font:800 18px var(--ui-font);color:var(--team-light)}.clash-icon{width:120px;height:120px;padding:10px;border-radius:50%;background:#fffaf0;border:6px solid var(--team)}.clash-side.team-0 .clash-icon{animation:lunge-r .5s ease-in-out .15s}.clash-side.team-1 .clash-icon{animation:lunge-l .5s ease-in-out .15s}@keyframes lunge-r{50%{transform:translate(28px) rotate(8deg)}}@keyframes lunge-l{50%{transform:translate(-28px) rotate(-8deg)}}.clash-side.loses .clash-icon{animation:lose .6s ease-in .7s forwards}@keyframes lose{30%{transform:rotate(-12deg)}to{transform:scale(.75) rotate(20deg);filter:grayscale(1);opacity:.45}}.clash-vs{font-size:42px;color:#ffe27a;text-shadow:0 3px 0 #6b3a12}.clash-text{grid-column:1 / -1;font:900 26px var(--title-font);color:#ffe27a;text-shadow:0 3px 0 #6b3a12;opacity:0;animation:text-in .3s ease-out .55s forwards}@keyframes text-in{to{opacity:1}}.banner{position:absolute;left:50%;top:380px;transform:translate(-50%,-50%);font:900 64px 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.9s ease-out forwards}@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)}85%{opacity:1}to{opacity:0}}.coin{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3a0,#f2c230 55%,#c8901a);border:2px solid #7a5208;animation:coin 1.1s ease-out forwards}@keyframes coin{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}.intro{position:absolute;left:50%;top:405px;transform:translate(-50%,-50%);padding:18px 40px 20px;border-radius:24px;background:#281406bf;text-align:center;animation:intro 1.5s ease-out forwards}.intro-title{font:900 58px 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:124px;transform:translate(-50%);padding:9px 20px;border-radius:999px;background:#281406e0;color:#fff;font:700 17px var(--ui-font);white-space:nowrap;animation:toast 2s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,82%{opacity:1;transform:translate(-50%)}to{opacity:0}}.stage.won-0 .piece.team-0 .figure,.stage.won-1 .piece.team-1 .figure{animation:cheer .45s ease-in-out infinite alternate}@keyframes cheer{to{transform:translateY(-8px)}}.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:640px}.panel.end-panel{width:540px}@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,.pick: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:15px;line-height:1.45}.rules li{margin:6px 0}.hint{font-size:13.5px!important;color:#6b4a2a}.error{color:#b23a2e;font-weight:700}.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)}}