:root{--navy:#214d72;--navy2:#123452;--blue:#81a9ca;--paper:#f8f1df;--yellow:#ffe27a;--ink:#252f3a;--muted:#637486;--outline:#d8e1e7;--red:#b72127;--green:#287949;--shadow:0 12px 28px rgba(22,42,61,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:linear-gradient(180deg,#d7e4ee 0,#f4f7fa 290px,#eff3f6 100%)}button{font:inherit}button:focus-visible{outline:3px solid #e1a600;outline-offset:3px}
header.site{padding:18px max(16px,calc((100% - 1480px)/2));background:linear-gradient(115deg,var(--navy2),var(--navy));color:white;border-bottom:5px solid #d7b76a}
.brand{display:flex;gap:14px;align-items:center}.brand-icon{width:48px;height:48px;border:2px solid #f3d781;border-radius:13px;display:grid;place-items:center;font-size:28px;background:#ffffff0e}.brand h1{font-family:Georgia,serif;font-size:clamp(24px,3.2vw,39px);margin:0;line-height:1.03}.brand p{margin:5px 0 0;color:#d9e7f3;font-size:14px}
.container{max-width:1480px;margin:auto;padding:20px 18px 55px}
.stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:20px;align-items:stretch}
.panel{border:1px solid #e1e8ec;background:white;box-shadow:var(--shadow);border-radius:18px;overflow:hidden}.game-info{padding:28px;display:flex;flex-direction:column;gap:18px;justify-content:center}.eyebrow{font-size:12px;color:var(--navy);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.game-info h2{font-family:Georgia,serif;color:var(--navy2);font-size:clamp(26px,3vw,42px);line-height:1.13;margin:0}.intro{line-height:1.55;font-size:17px;margin:0;max-width:650px}.message{background:#edf5fc;border-left:5px solid #5a9acc;padding:15px 17px;border-radius:10px;line-height:1.5;font-weight:650;min-height:70px}.message.warn{background:#fff4df;border-left-color:#ce922b}.message.good{background:#e9f7ee;border-left-color:var(--green)}
.how-to{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 12px;background:#edf3f7;color:#405a6e;border:1px solid #d7e3eb;border-radius:999px;font-size:13px;font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:9px}.action{border:0;border-radius:11px;padding:12px 18px;font-weight:800;cursor:pointer;line-height:1.25;box-shadow:0 3px 0 #00000017;transition:transform .12s}.action:hover:not(:disabled){transform:translateY(-1px)}.action:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.primary{background:var(--navy);color:white}.secondary{background:#e5edf3;color:var(--navy2)}.warm{background:#f9d464;color:#553f18}
.draw-panel{padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(140deg,#d8e7f2,#f8fbff)}.draw-label{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;font-weight:900;color:var(--navy2);font-size:14px}.counter{font-size:13px;background:white;border-radius:999px;padding:7px 11px;color:#566d80}.draw-frame{position:relative;width:min(100%,305px);aspect-ratio:396.85 / 572.6;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#739ac0;box-shadow:0 9px 23px #2b4b6680}.draw-frame img{display:block;width:100%;height:100%;object-fit:contain}.draw-frame img[hidden],.draw-frame .card-placeholder[hidden]{display:none!important}.card-placeholder{color:#fff9df;text-align:center;border:2px dashed #d5e4f0;border-radius:12px;margin:25px;padding:30px 12px;font-family:Georgia,serif;font-size:31px;font-weight:bold;line-height:1.2}.card-placeholder small{display:block;font:normal 14px system-ui;margin-top:15px}.draw-panel #btnNext{width:min(100%,310px)}
.section-bar{display:flex;justify-content:space-between;align-items:end;gap:15px;flex-wrap:wrap;margin:28px 2px 15px}.section-bar h2{font-family:Georgia,serif;font-size:clamp(24px,2.4vw,32px);color:var(--navy2);margin:0}.section-bar p{margin:7px 0 0;color:var(--muted);font-size:14px}.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:#5c6b76;align-items:center}.legend-x{color:var(--red);font-size:29px;font-weight:900;line-height:.7;transform:rotate(-8deg)}
.turn-strip{position:sticky;top:0;z-index:15;background:var(--navy2);color:white;padding:10px 15px;border-radius:11px;box-shadow:0 5px 13px #102e4880;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px}.turn-strip strong{font-size:14px}.turn-strip span{color:#fff1ba}.turn-strip button{border:1px solid #aecbd8;color:white;padding:7px 11px;border-radius:8px;background:#ffffff20;font-weight:800;cursor:pointer;white-space:nowrap}.turn-strip button:disabled{opacity:.4;cursor:not-allowed}
.boards{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr);align-items:start;gap:18px}.board-card{background:white;border-radius:17px;border:1px solid #dae4eb;overflow:hidden;box-shadow:var(--shadow);min-width:0}.board-card.main-player{border:3px solid #467ba9}.board-card.winner{box-shadow:0 0 0 4px #5fa77877,var(--shadow);border-color:var(--green)}.board-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:#739abc;color:white}.main-player .board-head{background:var(--navy)}.board-head strong{font-size:19px}.board-head small{display:block;color:#e9f1f8;margin-top:3px}.score{padding:6px 12px;border-radius:999px;background:#ffffff28;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}.board-content{padding:12px;background:#faf9f4}.board-viewport{width:100%;overflow:auto;overscroll-behavior:contain;border-radius:9px;scrollbar-color:#7ca2bf #e8edf1}.map{position:relative;width:100%;aspect-ratio:708.6614 / 496.063;user-select:none;isolation:isolate}.map img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.map .hit{position:absolute;display:block;border:1px solid transparent;background:transparent;border-radius:999px;padding:0;margin:0;cursor:pointer;z-index:2;touch-action:manipulation}.map .hit:hover:not(:disabled){background:#ffe27a36;border-color:#ffd75a}.map .hit:disabled{cursor:default}.map .hit.active{border:2px solid #ffde4d;background:#ffe05957;box-shadow:0 0 0 3px #fff4b290;animation:pulse 1.65s infinite}.map .hit.active:focus-visible{outline:3px solid #1870bc;outline-offset:2px}@keyframes pulse{50%{box-shadow:0 0 0 7px #fff4b23c}}.map .hand-x{position:absolute;width:2.5%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-5deg);z-index:3;pointer-events:none;filter:drop-shadow(0 1px 1px #32050ab7)}.hand-x svg{width:100%;height:100%;overflow:visible}.map .hand-x path{stroke:#b61b27;fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.map .hand-x path:last-child{stroke-width:9}.map .hit.missed{border:1px dashed #c45b5c90}
.help{padding:10px 14px 13px;color:#5b7082;font-size:13px;background:white;line-height:1.4}.help strong{color:var(--navy2)}.help span{display:inline-block}.bots{display:grid;gap:15px}.bot .board-head{padding:10px 13px}.bot .board-head strong{font-size:16px}.bot .board-content{padding:9px}.bot .map .hand-x{width:2.9%}.bot .help{padding:8px 12px;font-size:12px}.empty-state{color:#7a8791;text-align:center;padding:28px}
#btnZoom{margin-left:auto}.overlay{position:fixed;inset:0;background:#10202be8;z-index:80;display:none;align-items:center;justify-content:center;padding:15px}.overlay.show{display:flex}.dialog{background:white;border-radius:18px;padding:23px;box-shadow:0 25px 80px #0008;width:min(96vw,525px);text-align:center}.dialog h2{font-family:Georgia,serif;font-size:35px;color:var(--navy);margin:4px 0 10px}.dialog p{line-height:1.5;color:#526574;font-size:17px}.dialog .action{margin-top:9px}.victory-icon{font-size:45px}
.zoom-dialog{background:#f5f6f5;border-radius:15px;width:min(98vw,1270px);height:min(96vh,1100px);display:flex;flex-direction:column;overflow:hidden}.zoom-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy2);color:white;padding:10px 14px}.zoom-top h2{font-size:17px;margin:0}.zoom-top button{color:white;background:#ffffff26;border:1px solid #ffffff66;padding:7px 11px;border-radius:8px;font-weight:900;cursor:pointer}.zoom-scroll{overflow:auto;flex:1;padding:10px;min-height:0}.zoom-scroll .map{width:1100px;max-width:none;box-shadow:0 4px 18px #0002}.zoom-caption{padding:9px 14px;font-size:13px;color:#36556e;background:#dbe9f4}
footer{text-align:center;color:#667b89;font-size:12px;padding:20px}
@media(max-width:1050px){.boards{grid-template-columns:1fr}.bots{grid-template-columns:repeat(3,minmax(0,1fr))}.stage{grid-template-columns:1fr 350px}.bot .help{min-height:48px}}
@media(max-width:780px){.stage{grid-template-columns:1fr}.game-info{padding:20px}.draw-panel{padding:15px}.draw-frame{width:min(100%,250px)}.bots{grid-template-columns:1fr}.container{padding:12px 10px 32px}.section-bar{margin:22px 4px 10px}.board-content{padding:7px}.main-player .map{width:800px;max-width:none}.board-viewport{position:relative}.main-player .board-viewport::after{content:'';pointer-events:none}.turn-strip{border-radius:8px}.turn-strip strong{font-size:13px}.turn-strip button{font-size:12px}#btnZoom{margin-left:0}.zoom-scroll .map{width:1100px}.brand-icon{display:none}}
@media(min-width:781px) and (max-width:1100px){.main-player .map{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.map .hit.active{animation:none}.action{transition:none}}