.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 22px}
.hub-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--text);text-decoration:none;cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,background .15s}
.hub-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.hub-card.on{background:linear-gradient(180deg,rgba(245,197,66,.22),rgba(245,197,66,.06));border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,197,66,.25)}
.hub-card .ic{font-size:2rem;line-height:1.1}
.hub-card b{font-family:"Arial Black",sans-serif;font-size:.92rem;color:var(--gold)}
.hub-card span[lang]{font-size:.85rem}
.hub-card small{color:var(--muted);font-size:.75rem}
@media(max-width:620px){.hub{grid-template-columns:repeat(2,1fr);gap:10px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 14px 26px;margin-top:6px}
.panel h2{color:var(--text);font-size:clamp(1.4rem,5vw,2rem)}
.howto{color:var(--muted);font-size:.92rem;max-width:620px;margin:8px auto 12px}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:.9rem;margin-bottom:10px}
.stats b{color:var(--gold)}
.clue{min-height:2.6em;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-weight:800;font-size:1.02rem;margin:6px auto 10px;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.2);max-width:560px}
.clue.win{background:rgba(245,197,66,.2);color:var(--gold2)}
.clue.lose{background:rgba(214,47,58,.2);color:#ffb3b8}
.mt{margin-top:16px}
.grid{display:grid;gap:3px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.island{max-width:440px;margin:0 auto;padding:12px;border-radius:24px;background:radial-gradient(circle at 50% 50%,#e9c98a 0%,#d7ad63 55%,#b98a42 70%,#1e6fd9 72%,#12408a 100%);box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.4)}
.map-grid{grid-template-columns:repeat(8,1fr)}
.map-grid button{aspect-ratio:1;border:1px dashed rgba(90,55,20,.45);border-radius:8px;background:rgba(255,240,200,.35);font-size:clamp(.95rem,4.6vw,1.45rem);cursor:pointer;padding:0;line-height:1;transition:transform .1s;color:#3a2400}
.map-grid button:hover:not(:disabled){transform:scale(1.08);background:rgba(255,250,220,.6)}
.map-grid button:disabled{cursor:default}
.map-grid .d1{background:#ff4d3a}.map-grid .d2{background:#ff9a3a}.map-grid .d3{background:#ffd34d}.map-grid .d4{background:#8fd0ff}.map-grid .d5{background:#4c8dff}
.map-grid .gold{background:radial-gradient(circle,#fff6b0,#f5c542);box-shadow:0 0 18px #ffd34d;animation:pop .5s}
.map-grid .ghost{opacity:.85;background:rgba(245,197,66,.6)}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.legend2{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:12px;font-size:.8rem;color:var(--muted)}
.legend2 .c{padding:2px 8px;border-radius:8px;color:#1b1200}
.legend2 .c1{background:#ff4d3a}.legend2 .c2{background:#ff9a3a}.legend2 .c3{background:#ffd34d}.legend2 .c4{background:#8fd0ff}.legend2 .c5{background:#4c8dff}
.scroll{max-width:560px;margin:8px auto;padding:22px 20px;border-radius:14px;background:linear-gradient(180deg,#f8e7bf,#ecd29a);color:#3a2400;box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 0 26px rgba(120,70,10,.25);position:relative}
.scroll .rnum{font-size:.78rem;font-weight:800;letter-spacing:2px;color:#8a5a00;text-transform:uppercase}
.scroll .q-en{font-size:1.12rem;font-weight:700;margin:8px 0}

.ans{display:flex;gap:8px;max-width:480px;margin:12px auto 4px}
.ans input{flex:1;min-width:0;padding:12px 16px;border-radius:999px;border:2px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);font-size:1rem;outline:none}
.ans input:focus{border-color:var(--gold)}
.ans .btn{padding:12px 18px;white-space:nowrap}
.tries{font-size:1.3rem;letter-spacing:6px;min-height:1.6em}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.boards h3{font-size:.95rem;margin-bottom:6px}
.boards h3 small{color:var(--muted);font-family:inherit;font-weight:400}
@media(max-width:700px){.boards{grid-template-columns:1fr}.boards .mine{max-width:260px;margin:0 auto}}
.sea-grid{grid-template-columns:repeat(8,1fr);padding:6px;border-radius:14px;background:linear-gradient(180deg,#1e6fd9,#0b2e66);box-shadow:inset 0 0 20px rgba(0,0,0,.45);max-width:400px;margin:0 auto}
.sea-grid div{aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:clamp(.8rem,4vw,1.25rem);line-height:1}
.sea-grid.enemy div{cursor:crosshair}
.sea-grid.enemy div:not(.shot):hover{background:rgba(245,197,66,.35)}
.sea-grid .ship{background:#8a5a2b;box-shadow:inset 0 0 0 2px #5c3a17}
.sea-grid .shot{cursor:default}
.sea-grid .miss{background:rgba(255,255,255,.18)}
.sea-grid .hit{background:#d62f3a;animation:pop .35s}
.sea-grid .sunk{background:#5a0f16}
.sea-grid.locked{opacity:.75;pointer-events:none}