:root{
  --bg:#dcf7bd;
  --bg2:#b9ed7d;
  --panel:#fffdf3;
  --panel2:#eefad8;
  --ink:#173b2a;
  --muted:#5c715f;
  --accent:#ffd84d;
  --accent2:#ff9f43;
  --green:#58c94c;
  --green2:#1f9d55;
  --blue:#4aa3ff;
  --red:#f56b6b;
  --line:rgba(23,59,42,.16);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;color:var(--ink);background:linear-gradient(180deg,#f7ffe9 0,#dcf7bd 48%,#b9ed7d 100%);overflow-x:hidden}
a.button,button,select,input{font:inherit}
a.button,button{min-height:44px;padding:9px 13px;color:#14321f;background:var(--accent);border:0;border-bottom:4px solid #d6a927;border-radius:8px;font-weight:900;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 rgba(23,59,42,.12)}
a.button{display:inline-grid;place-items:center;text-decoration:none}
button:hover:not(:disabled){filter:brightness(1.03)}
button:active:not(:disabled){transform:translateY(1px);border-bottom-width:3px}
a.button.secondary,button.secondary{color:#fff;background:var(--green2);border-bottom-color:#137842}
button.secondary.active{color:#14321f;background:#8ee45f;border-bottom-color:#56b437}
button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
select,input{width:100%;margin-top:5px;padding:10px 11px;color:var(--ink);background:#fff;border:2px solid rgba(23,59,42,.22);border-radius:8px;min-height:42px}
input:focus,select:focus{outline:3px solid rgba(74,163,255,.28);border-color:var(--blue)}
input.field-error,select.field-error{border-color:#f56b6b;background:#fff1ef;box-shadow:0 0 0 4px rgba(245,107,107,.2)}
.form-feedback{min-height:22px;font-weight:900;color:#14321f}.form-feedback.warn{padding:8px;border-radius:8px;border:2px solid rgba(245,107,107,.4);background:#ffe8e8;color:#7a1f1f}
label{color:var(--muted);font-size:.84rem;font-weight:800}.hidden{display:none!important}.muted{color:var(--muted)}
.portal{min-height:100svh;width:min(1180px,calc(100vw - 24px));margin:0 auto;padding:clamp(14px,3vw,28px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:18px;align-items:start}
.welcome{padding:clamp(18px,4vw,34px) 0}.language-switcher{display:flex;justify-content:flex-end;margin-bottom:12px}.language-switcher label{width:min(190px,100%)}.eyebrow{color:#0d8c4a;font-weight:900;font-size:.82rem;text-transform:uppercase}.welcome h1{margin:10px 0 10px;font-size:clamp(2rem,6vw,4.2rem);line-height:.96;color:#173b2a}.welcome p{max-width:680px;color:#3e6048;font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.45;font-weight:650}.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:22px}
.game-card,.panel{background:var(--panel);border:2px solid rgba(23,59,42,.14);border-radius:8px;box-shadow:0 12px 0 rgba(31,157,85,.12),0 18px 34px rgba(23,59,42,.14)}
.game-card{padding:14px;min-height:160px;display:grid;align-content:space-between}.game-card strong{font-size:1.15rem;color:#14321f}.game-card span,.panel small{color:var(--muted);line-height:1.35}.tag{width:max-content;margin-top:12px;padding:5px 8px;border-radius:8px;background:#dff7c4;color:#126c3a;font-weight:900;font-size:.78rem}.panel{padding:14px}.panel.sticky{position:sticky;top:14px}.panel h2,.panel h3{margin:0 0 4px;color:#14321f}.grid{display:grid;gap:9px;margin-top:12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.portal-msg{min-height:42px;margin-top:10px;color:var(--ink);line-height:1.35;overflow-wrap:anywhere;font-weight:700}.recovery{margin-top:14px;padding-top:14px;border-top:2px dashed var(--line)}.recovery-code{display:none;margin-top:10px;padding:10px;border:2px solid rgba(255,159,67,.5);border-radius:8px;background:#fff4d0;overflow-wrap:anywhere}.recovery-code strong{color:#9a5c00}.identity{padding:10px;border-radius:8px;background:#eaf8d7;margin-top:10px;border:2px solid rgba(31,157,85,.18)}
.room-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto);gap:10px;margin-top:16px}.rooms{display:grid;gap:8px;margin-top:10px}.empty{padding:14px;border-radius:8px;background:#f4fbdf;border:2px dashed rgba(31,157,85,.22);color:#365944;font-weight:800;line-height:1.35}.room{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px;border-radius:8px;background:#fff;border:2px solid rgba(23,59,42,.12)}.room strong{display:block}.room span{font-size:.82rem;color:var(--muted)}.join-box{margin-top:10px;padding:10px;border:2px solid rgba(74,163,255,.25);border-radius:8px;background:#eef7ff}.password-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.room-modal{position:fixed;z-index:33;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 28px));max-height:min(86svh,760px);overflow:hidden;background:#fffef7!important;border:2px solid rgba(23,59,42,.16)!important;border-radius:8px!important;padding:18px!important;box-shadow:0 0 0 100vmax rgba(23,59,42,.42),0 24px 70px rgba(23,59,42,.32)!important}
.room-modal::before{display:none}
.room-modal>small{display:block;margin-top:4px;color:#496750;font-weight:750;line-height:1.35}.room-modal .rooms{max-height:min(45svh,360px);overflow:auto;padding:2px 2px 4px;margin-top:12px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.modal-head h2{margin:0;font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.1}.modal-head button{min-width:90px}
.app{width:min(1180px,calc(100vw - 24px));margin:0 auto;padding:clamp(10px,2vw,18px) 0 max(18px,env(safe-area-inset-bottom))}.app header{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:clamp(10px,2vw,16px)}.app h1{margin:0;font-size:clamp(1.45rem,4.5vw,2.4rem);line-height:1;color:#173b2a}.subtitle{margin-top:7px;color:#3e6048;font-size:clamp(.82rem,2.4vw,.95rem);font-weight:750}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,330px);gap:16px;align-items:start}
.game,.side{background:var(--panel);border:2px solid rgba(23,59,42,.14);border-radius:8px;box-shadow:0 12px 0 rgba(31,157,85,.12),0 18px 34px rgba(23,59,42,.14)}.game{padding:clamp(6px,1.8vw,14px);min-width:0}.wrap{width:min(100%,calc(100svh - 110px));aspect-ratio:1/1;margin:0 auto;border-radius:8px;overflow:hidden;background:#e8f7d4}canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}.side{padding:clamp(10px,2vw,14px)}
.turn{display:flex;align-items:center;gap:12px;min-height:70px;padding:12px;color:#14321f;background:linear-gradient(135deg,#fff8c8,#dbf7b7);border:3px solid #ffd84d;border-radius:8px;box-shadow:0 6px 0 rgba(214,169,39,.22)}.turn>div:last-child{min-width:0}.turn strong{display:block;font-size:clamp(1.1rem,3vw,1.45rem);line-height:1.05}.turn strong,.turn div:last-child div{overflow-wrap:anywhere}.turn div:last-child div{margin-top:4px;color:#2d5f3a;font-weight:850}.swatch{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:3px solid #fff;box-shadow:inset 0 0 0 4px rgba(0,0,0,.14),0 2px 0 rgba(23,59,42,.2)}
.msg{min-height:58px;margin:10px 0;padding:12px;color:var(--ink);line-height:1.35;overflow-wrap:anywhere;border-radius:8px;border:3px solid rgba(23,59,42,.12);background:#fff;font-weight:850}.msg.info{border-color:#4aa3ff;background:#eaf5ff}.msg.warn{border-color:#ffb84d;background:#fff2c4;color:#6b4200}.msg.win{border-color:#58c94c;background:#e6ffd7;color:#115d32}.last-move{margin:-2px 0 10px;padding:9px 11px;border-left:6px solid var(--accent2);border-radius:8px;background:#fff4d8;line-height:1.35;overflow-wrap:anywhere}.last-move strong{display:block;color:#965600;font-size:.78rem;text-transform:uppercase}.last-move span{display:block;margin-top:3px;color:var(--ink);font-weight:850}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.controls.full{grid-template-columns:1fr}.players{display:grid;gap:8px;margin-top:12px}.player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;background:#fff;border:2px solid rgba(23,59,42,.1);border-radius:8px}.player.out{opacity:.45}.player.mine{outline:3px solid rgba(255,216,77,.95)}.player strong{display:block;font-size:.94rem;overflow-wrap:anywhere}.player.bot strong::after{content:"BOT";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#dff4ff;color:#165577;font-size:.72rem;font-weight:900;letter-spacing:.03em}.player span{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}.badge{padding:4px 7px;color:#fff;background:var(--green2);border-radius:8px;font-size:.78rem;font-weight:900}.rules{margin-top:14px;padding-top:14px;border-top:2px dashed var(--line);color:var(--muted);font-size:.9rem;line-height:1.45}.rules p{margin:0 0 9px}.net{padding:9px;margin-bottom:10px;border-radius:8px;background:#eaf8d7;border:2px solid rgba(31,157,85,.16);color:#2d5f3a;font-size:.88rem;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
@media(max-width:980px){.portal{grid-template-columns:1fr}.panel.sticky{position:static}.app{width:min(760px,calc(100vw - 18px))}.layout{grid-template-columns:1fr;gap:10px}.side{order:-1}.wrap{width:100%}}
@media(max-width:640px){.portal{width:100%;padding:10px 8px}.welcome{padding:6px 0}.catalog{grid-template-columns:1fr}.split{grid-template-columns:1fr}.room{grid-template-columns:1fr}.app{width:100%;padding:8px 8px max(12px,env(safe-area-inset-bottom))}.app header{margin-bottom:8px}.subtitle{display:none}.game,.side{border-radius:0;box-shadow:none}.side{padding:9px}.net{font-size:.78rem;margin-bottom:8px}.turn{min-height:42px;padding:8px}.msg{min-height:0;margin:8px 0;font-size:.9rem}.controls{gap:6px;margin-bottom:8px}.controls.full{grid-template-columns:1fr 1fr}.players{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.player{grid-template-columns:auto minmax(0,1fr);padding:7px;gap:7px}.player .badge{grid-column:1/-1;text-align:center}.player span{font-size:.74rem}.rules{display:none}}
@media(max-width:420px){.controls,.controls.full,.players{grid-template-columns:1fr}.wrap{border-radius:0}.game{padding:4px}button,select,input{min-height:42px}}
@media(orientation:landscape) and (max-height:560px){.app{width:calc(100vw - 12px);padding:6px 0}.app header{display:none}.layout{grid-template-columns:minmax(0,calc(100svh - 12px)) minmax(280px,1fr);gap:8px}.side{order:0;max-height:calc(100svh - 12px);overflow:auto}.wrap{width:min(100%,calc(100svh - 24px))}.rules{display:none}}
.edu-card,.secret-help{display:grid;gap:5px;padding:10px;border:2px solid rgba(74,163,255,.25);border-radius:8px;background:#eef7ff;color:#27506f}.edu-card span,.secret-help span{color:#3e6048;line-height:1.35}
.secret-board{display:grid;gap:12px;min-height:520px;padding:clamp(10px,2vw,16px)}
.secret-board h3{margin:0;color:#14321f}.secret-play,.secret-results,.secret-board section:not(.secret-help){display:grid;gap:10px;padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff}
.secret-slots{display:grid;grid-template-columns:repeat(4,minmax(54px,1fr));gap:8px}.secret-slot{display:grid;place-items:center;min-height:72px;background:#fffdf3;border:3px dashed rgba(23,59,42,.25);border-radius:8px;color:#5c715f}.secret-slot.active{border-style:solid;border-color:#4aa3ff;background:#eaf5ff}
.secret-palette{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr));gap:8px}.secret-symbol{display:grid;gap:4px;place-items:center;min-height:70px;background:#fff;border:2px solid rgba(23,59,42,.14);border-bottom-width:4px}.secret-symbol span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--chip);border:2px solid rgba(23,59,42,.2);font-weight:900}.secret-symbol small{font-weight:800;color:#3e6048}
.secret-chip{display:inline-grid;place-items:center;width:38px;height:38px;margin:2px;border-radius:50%;background:var(--chip);border:2px solid rgba(23,59,42,.25);color:#14321f;font-size:.78rem;vertical-align:middle}.secret-chip.small{width:28px;height:28px;font-size:.68rem}
.secret-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secret-history{display:grid;gap:7px}.secret-row{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;gap:8px;align-items:center;padding:8px;border-radius:8px;background:#f7ffe9;border:2px solid rgba(23,59,42,.1)}.secret-row span{font-weight:850;color:#2d5f3a}
.secret-reveal{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px;border-radius:8px;background:#fff4d8}.secret-results{overflow:auto}.secret-results table{width:100%;border-collapse:collapse;min-width:520px}.secret-results th,.secret-results td{padding:8px;border-bottom:1px solid rgba(23,59,42,.13);text-align:left}.secret-results th{color:#2d5f3a}
@media(max-width:520px){.secret-palette{grid-template-columns:repeat(3,1fr)}.secret-row{grid-template-columns:auto 1fr}.secret-row span{grid-column:1/-1}.secret-actions{grid-template-columns:1fr}.secret-board{min-height:0;padding:8px}.secret-slots{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.fleet-boards{grid-template-columns:1fr}.fleet-grid{gap:3px;grid-template-columns:22px repeat(8,minmax(24px,1fr))}.fleet-grid>b{min-height:22px;font-size:.78rem}.fleet-cell{border-radius:6px}.fleet-ships{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Professional responsive polish */
:root{--surface:#fffef7;--surface-soft:#f4fbdf;--focus:#2f80ed;--shadow:0 10px 24px rgba(38,86,47,.12);--shadow-soft:0 5px 14px rgba(38,86,47,.1)}
body{background:linear-gradient(180deg,#f8ffe9 0,#e7f8c6 46%,#c8efa0 100%);font-size:16px}
button{letter-spacing:0;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;box-shadow:0 2px 0 rgba(23,59,42,.14),0 8px 18px rgba(31,157,85,.1)}
button.secondary{background:#20884d;border-bottom-color:#136b3b}
select,input{box-shadow:inset 0 1px 0 rgba(23,59,42,.04)}
.portal,.app{width:min(1200px,calc(100vw - 32px))}
.portal{gap:22px;padding-top:clamp(18px,3vw,32px)}
.welcome{padding-top:clamp(8px,2vw,18px)}
.eyebrow{width:max-content;max-width:100%;padding:5px 8px;border-radius:8px;background:#e6f8d8;color:#14733f;border:1px solid rgba(20,115,63,.14)}
.welcome h1{max-width:760px;font-size:clamp(2.15rem,5.2vw,4.4rem);line-height:1.02;margin-top:14px}
.welcome p{max-width:760px;color:#365944;font-weight:600}
.hero-illustration{position:relative;width:min(560px,100%);margin:18px 0 6px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);border:2px solid rgba(23,59,42,.12);background:#eaf8d7}
.hero-illustration img{display:block;width:100%;height:auto}
.catalog{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin-top:24px}
.game-card,.panel,.game,.side{background:var(--surface);border:1px solid rgba(23,59,42,.14);box-shadow:var(--shadow);border-radius:8px}
.game-card{min-height:174px;padding:16px;position:relative;overflow:hidden}
.game-card::after{content:"";position:absolute;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;background:rgba(255,216,77,.28)}
.game-card strong{display:block;margin-bottom:4px;font-size:1.22rem}.game-card span{display:block}.game-card small{display:block;margin-top:8px;color:#496750;font-weight:700;line-height:1.3}.tag{border-radius:8px;border:1px solid rgba(31,157,85,.18);background:#e7f9d3;color:#176d3c}
.game-visual{position:relative;width:100%;aspect-ratio:26/11;margin-bottom:12px;border-radius:8px;background:#eaf8d7;border:2px solid rgba(23,59,42,.11);overflow:hidden;box-shadow:var(--shadow-soft)}
.game-visual img{display:block;width:100%;height:100%;object-fit:cover}
.fleet-visual{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:18px;background:linear-gradient(135deg,#dff4ff,#fff8d5)}
.fleet-visual span{border-radius:8px;background:#9fd8ff;border:2px solid rgba(23,59,42,.12);box-shadow:inset 0 -8px 0 rgba(45,128,180,.12)}.fleet-visual span:nth-child(1),.fleet-visual span:nth-child(2),.fleet-visual span:nth-child(6){background:#5d7f94}.fleet-visual span:nth-child(3){background:#ffd84d}.fleet-visual span:nth-child(8){background:#f56b6b}
.card-actions{display:grid;gap:8px;margin-top:12px}.card-actions button{width:100%}
.panel{padding:16px}.panel h2{font-size:1.35rem}.panel h3{font-size:1rem;margin-top:3px}.identity{box-shadow:var(--shadow-soft)}
.identity{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.identity strong{color:#14321f}.identity button{min-height:38px;padding:7px 10px}
.room{box-shadow:var(--shadow-soft);grid-template-columns:minmax(0,1fr) auto}.room small{display:block;margin-top:4px;color:#54715d;font-weight:650}.room button{min-width:96px}
.join-box,.edu-card,.secret-help{box-shadow:var(--shadow-soft)}
.app{padding-top:clamp(10px,2vw,20px)}.app header{align-items:center;padding:0 2px}.app h1{font-size:clamp(1.55rem,3.8vw,2.35rem)}.subtitle{line-height:1.35}
.layout{grid-template-columns:minmax(0,1fr) minmax(318px,360px)}.game{align-self:start}.side{align-self:start}.wrap{background:#edf8d8}.turn{box-shadow:var(--shadow-soft);border-width:2px}.msg{border-width:2px;box-shadow:var(--shadow-soft)}.last-move{box-shadow:var(--shadow-soft)}
.controls.full{grid-template-columns:1fr 1fr}.players{gap:9px}.player{box-shadow:var(--shadow-soft)}.rules{font-weight:650}.rules strong{color:#234c30}
.secret-board{min-height:unset}.secret-play,.secret-results,.secret-board section:not(.secret-help){box-shadow:var(--shadow-soft)}.secret-slot{min-height:68px}.secret-symbol{box-shadow:var(--shadow-soft)}.secret-results table{font-size:.93rem}
@media(max-width:980px){.portal,.app{width:min(780px,calc(100vw - 24px))}.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.layout{grid-template-columns:1fr}.side{order:-1}.game{min-height:0}.wrap{width:min(100%,680px)}}
@media(max-width:720px){.portal,.app{width:100%;padding-left:12px;padding-right:12px}.portal{display:block}.welcome{padding-top:8px}.welcome h1{font-size:2.35rem}.welcome p{font-size:1rem}.hero-illustration{width:100%;margin-top:14px}.catalog{grid-template-columns:1fr;gap:10px}.game-card{min-height:auto;gap:14px}.panel.sticky{position:static;margin-top:12px}#roomPanel,.panel{scroll-margin-top:12px}.split{grid-template-columns:1fr}.password-row{grid-template-columns:1fr}.password-row button{width:100%}.room{grid-template-columns:1fr}.room button{width:100%}.app header{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:10px}.app header button{min-width:0}.subtitle{display:block;font-size:.82rem}.layout{gap:10px}.side{padding:10px;border-radius:8px}.game{border-radius:8px;padding:6px}.turn{min-height:0;padding:9px}.turn strong{font-size:1.1rem}.msg{font-size:.92rem;padding:10px}.controls.full{grid-template-columns:1fr 1fr}.players{grid-template-columns:1fr}.player span{font-size:.8rem}.rules{display:none}.wrap{border-radius:8px}}
@media(max-width:460px){body{font-size:15px}.portal,.app{padding-left:8px;padding-right:8px}.eyebrow{font-size:.74rem}.welcome h1{font-size:2rem}.welcome p{line-height:1.38}.hero-illustration{margin-top:12px}.panel,.game-card{padding:12px}.game-visual{aspect-ratio:26/10}.app header{grid-template-columns:1fr}.app header button{width:100%}.subtitle{font-size:.78rem}.controls.full,.controls{grid-template-columns:1fr}.turn{gap:9px}.swatch{width:26px;height:26px;flex-basis:26px}.net{font-size:.78rem}.secret-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.secret-symbol{min-height:62px}.secret-slots{gap:6px}.secret-slot{min-height:58px;padding:6px}.secret-chip{width:34px;height:34px}.secret-results table{min-width:440px;font-size:.84rem}.secret-results th,.secret-results td{padding:7px}.room small,.room span{font-size:.8rem}}
@media(orientation:landscape) and (max-height:560px){.portal{display:grid;grid-template-columns:1fr minmax(300px,360px);width:calc(100vw - 16px);padding:8px 0}.welcome h1{font-size:2.1rem}.welcome p{display:none}.catalog{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}.game-card{padding:10px}.app{width:calc(100vw - 12px);padding:6px 0}.layout{grid-template-columns:minmax(0,calc(100svh - 12px)) minmax(290px,1fr);gap:8px}.side{order:0;max-height:calc(100svh - 12px);overflow:auto}.wrap{width:min(100%,calc(100svh - 24px))}.rules{display:none}}

.notice-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(23,59,42,.42);backdrop-filter:blur(4px)}
.notice-card{width:min(420px,100%);display:grid;gap:10px;padding:18px;border-radius:8px;background:#fffef7;border:2px solid rgba(23,59,42,.18);box-shadow:0 22px 48px rgba(23,59,42,.24)}
.notice-card strong{font-size:1.35rem;color:#14321f;line-height:1.1}.notice-card p{margin:0;color:#365944;font-weight:750;line-height:1.42}.notice-card button{justify-self:end;min-width:126px}
@media(max-width:460px){.notice-modal{align-items:end;padding:10px}.notice-card{width:100%;padding:14px}.notice-card button{width:100%}}

.create-room-modal{position:fixed;inset:0;z-index:34;display:grid;place-items:center;padding:18px;background:rgba(23,59,42,.46);backdrop-filter:blur(4px)}
.create-room-card{width:min(560px,100%);max-height:min(86svh,780px);overflow:auto;display:grid;gap:12px;padding:16px;border-radius:8px;background:#fffef7;border:2px solid rgba(23,59,42,.18);box-shadow:0 22px 54px rgba(23,59,42,.26)}
.create-room-card .grid{margin-top:0}.create-room-card h3{margin:4px 0 0}.create-room-card button#createRoom{width:100%}
@media(max-width:520px){.room-actions{grid-template-columns:1fr}.create-room-modal{align-items:end;padding:10px}.create-room-card{width:100%;max-height:92svh;padding:12px}}
@media(max-width:520px){.room-modal{top:auto;bottom:10px;transform:translateX(-50%);width:calc(100vw - 16px);max-height:88svh;padding:12px}.modal-head{align-items:start}.modal-head button{min-width:74px}.rooms{max-height:42svh;overflow:auto;padding-right:2px}}

.tutorial-modal{position:fixed;inset:0;z-index:35;display:grid;place-items:center;padding:18px;background:rgba(23,59,42,.46);backdrop-filter:blur(4px)}
.tutorial-card{width:min(680px,100%);display:grid;gap:12px;padding:16px;border-radius:8px;background:#fffef7;border:2px solid rgba(23,59,42,.18);box-shadow:0 22px 54px rgba(23,59,42,.26)}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.tutorial-head strong{font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.1;color:#14321f}.tutorial-head button{min-width:92px}
.tutorial-card p{margin:0;color:#365944;font-weight:800;line-height:1.42}.tutorial-scene{min-height:260px;display:grid;place-items:center;padding:12px;border-radius:8px;background:linear-gradient(180deg,#eaf8d7,#fff9d8);border:2px solid rgba(23,59,42,.12);overflow:hidden}
.tutorial-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.tutorial-controls span{font-weight:900;color:#2d5f3a;text-align:center}.tutorial-controls button:last-child{justify-self:end}
.tutorial-stage{position:relative;width:min(420px,100%);min-height:232px;display:grid;place-items:center}.mini-board{display:grid;grid-template-columns:repeat(5,1fr);width:min(300px,80vw);aspect-ratio:1;border:8px solid #a67a36;border-radius:8px;background:#d7bb75;box-shadow:0 8px 0 rgba(85,61,25,.18)}
.mini-cell{position:relative;display:grid;place-items:center;border:1px solid rgba(92,66,29,.38);background:#ead28f}.mini-cell:nth-child(even){background:#cdb06a}.mini-cell::before{content:"";width:46%;aspect-ratio:1;border-radius:50%}
.mini-cell.hole::before{background:#08100e;box-shadow:inset 6px 6px 0 rgba(255,255,255,.08)}.mini-cell.hole.soft::before{background:rgba(8,16,14,.28);outline:3px dashed rgba(8,16,14,.18)}
.mini-cell.chip.red::before{background:radial-gradient(circle at 35% 30%,#fff8,#f56b6b 35%,#c93535 72%);border:2px solid rgba(93,32,32,.48)}
.mini-cell.chip.blue::before{background:radial-gradient(circle at 35% 30%,#fff8,#4aa3ff 35%,#176fcb 72%);border:2px solid rgba(24,74,120,.48)}
.mini-cell.demo-move::before{animation:demoSlide 1.8s ease-in-out infinite}.mini-cell.falling::before{animation:demoFall 1.7s ease-in-out infinite}
.mini-lever{position:absolute;display:grid;place-items:center;width:52px;height:40px;border-radius:8px;background:#60787d;color:#fff;border:2px solid rgba(255,255,255,.26);font-weight:900;box-shadow:0 0 0 6px rgba(255,216,77,.28)}
.mini-lever.top{top:0;left:50%;transform:translateX(-50%)}.mini-lever.left{left:4px;top:50%;transform:translateY(-50%)}.mini-lever.active{animation:demoPulse 1.35s ease-in-out infinite}
.code-stage{gap:14px}.code-slots,.code-palette{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.code-slots span,.code-palette span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--chip,#fff);border:3px solid rgba(23,59,42,.18);box-shadow:0 5px 0 rgba(23,59,42,.12);font-weight:900}.code-slots.empty span{background:#fff;border-style:dashed;color:#5c715f}
.code-palette span:nth-child(2){animation:demoPulse 1.5s ease-in-out infinite}.code-clue,.turn-demo{display:grid;gap:6px;min-width:220px;padding:12px;border-radius:8px;background:#fff;border:2px solid rgba(23,59,42,.12);box-shadow:var(--shadow-soft);text-align:center}.code-clue strong,.turn-demo strong{color:#14321f}.code-clue span,.turn-demo span{color:#2d5f3a;font-weight:900}
.code-progress{display:flex;gap:8px}.code-progress span{width:44px;height:12px;border-radius:8px;background:#d9e9c4}.code-progress span.done{background:#58c94c}.turn-demo span{font-size:1.7rem;color:#176fcb;animation:demoPulse 1.2s ease-in-out infinite}
.fleet-panel{display:grid;gap:10px;padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff;box-shadow:var(--shadow-soft)}
.fleet-panel h3{margin:0;color:#14321f}.fleet-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fleet-toolbar{display:grid;gap:8px}.fleet-ships{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}.fleet-ships button{min-height:38px;padding:7px 8px;font-size:.82rem}.fleet-ships button.placed{background:#58c94c;border-bottom-color:#2a913e;color:#14321f}.fleet-ships button.active{outline:3px solid rgba(74,163,255,.35)}
.fleet-grid{display:grid;grid-template-columns:28px repeat(var(--fleet-size,8),minmax(28px,1fr));gap:4px;align-items:stretch}.fleet-grid>b{display:grid;place-items:center;min-height:28px;color:#2d5f3a;font-weight:900}.fleet-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#dff4ff;color:#14321f;font-weight:900;min-width:0;box-shadow:inset 0 -5px 0 rgba(45,128,180,.1);white-space:normal}.fleet-cell:hover:not(:disabled){filter:brightness(1.04);outline:3px solid rgba(74,163,255,.28)}.fleet-cell.selected:not(:disabled){outline:4px solid rgba(255,216,77,.9)}.fleet-cell:disabled{cursor:not-allowed;opacity:.9}.fleet-cell.ship{background:#8da6aa;color:#fff}.fleet-cell.miss{background:#eef7ff;color:#176fcb}.fleet-cell.hit{background:#ffe2c4;color:#8a3f00}.fleet-cell.sunk{background:#f56b6b;color:#fff}.fleet-cell.multi-hit{background:#f8d8ff;color:#5f2474}.fleet-cell.elimination{background:#14321f;color:#fff}.fleet-cell span{font-size:clamp(.78rem,2vw,1rem)}.fleet-common-help{display:grid;gap:5px;margin-bottom:12px;padding:12px;border:2px solid rgba(74,163,255,.24);border-radius:8px;background:#eef7ff;color:#14321f}.fleet-common-help span{color:#496750;font-weight:750}
.ship-sprite{position:relative;display:block;width:78%;height:44%;filter:drop-shadow(0 4px 2px rgba(23,59,42,.2));z-index:2}.ship-body{position:absolute;inset:18% 7% 12%;border-radius:45% 22% 22% 45%/60% 45% 45% 60%;background:linear-gradient(180deg,#f6fbff 0,#8aa6ad 42%,#4f6970 100%);border:2px solid rgba(23,59,42,.25);box-shadow:inset 0 5px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.12)}.ship-bow{position:absolute;right:0;top:22%;width:24%;height:56%;clip-path:polygon(0 0,100% 50%,0 100%);background:#4f6970;border-radius:2px}.ship-bridge{position:absolute;left:43%;top:0;width:24%;height:45%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#ffffff,#8ba8ad);border:2px solid rgba(23,59,42,.2)}.ship-vertical .ship-sprite{transform:rotate(90deg)}.ship-size-1 .ship-sprite{width:58%;height:42%}.ship-size-2 .ship-sprite{width:68%}.ship-size-4 .ship-sprite{width:88%}.ship-sprite.damaged .ship-body{background:linear-gradient(180deg,#ffe6c4 0,#8aa6ad 45%,#3e535a 100%)}.ship-sprite.damaged::after{content:"";position:absolute;left:46%;top:-18%;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff2a8 0 18%,#ff9f43 19% 48%,#f56b6b 49% 70%,transparent 72%);animation:fleetHitPop .75s ease-out both}
.water-splash,.hit-burst,.sunk-burst{position:relative;display:block;width:58%;aspect-ratio:1;border-radius:50%;z-index:3}.water-splash{background:radial-gradient(circle,#fff 0 12%,#9fe4ff 13% 34%,transparent 35%);box-shadow:0 0 0 8px rgba(159,228,255,.35);animation:fleetSplash .75s ease-out both}.hit-burst{background:radial-gradient(circle,#fff9bd 0 12%,#ff9f43 13% 42%,#f56b6b 43% 62%,transparent 64%);box-shadow:0 0 0 8px rgba(245,107,107,.22);animation:fleetHitPop .78s ease-out both}.sunk-burst{background:radial-gradient(circle,#fff2a8 0 10%,#ff9f43 11% 35%,#f56b6b 36% 58%,#3c2d2d 59% 72%,transparent 74%);box-shadow:0 0 0 10px rgba(245,107,107,.28);animation:fleetSink 1s ease-out both}.blast-hit,.blast-sunk{animation:fleetCellShake .42s ease-out}.blast-miss{animation:fleetWaterGlow .65s ease-out}
.ship-choice{display:inline-grid;place-items:center;width:34px;height:16px;margin-right:6px;vertical-align:middle;border-radius:10px;background:linear-gradient(180deg,#f6fbff,#6f8b92);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 2px 0 rgba(23,59,42,.12)}.ship-choice span{display:block;width:28%;height:55%;border-radius:4px 4px 2px 2px;background:#fff;box-shadow:0 0 0 1px rgba(23,59,42,.16)}.ship-choice.ship-size-1{width:22px}.ship-choice.ship-size-2{width:28px}.ship-choice.ship-size-4{width:42px}
.fleet-results{overflow:auto;padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff;box-shadow:var(--shadow-soft)}.fleet-results h3{margin:0 0 8px}.fleet-results table{width:100%;border-collapse:collapse;min-width:720px}.fleet-results th,.fleet-results td{padding:8px;border-bottom:1px solid rgba(23,59,42,.13);text-align:left}.fleet-results th{color:#2d5f3a}
.fleet-demo .demo-board{display:grid;grid-template-columns:repeat(3,62px);gap:8px;padding:14px;border-radius:8px;background:#dff4ff;border:6px solid #7fb9d8;box-shadow:var(--shadow-soft)}.fleet-demo .demo-board span{height:62px;border-radius:8px;background:#aee0ff;border:2px solid rgba(23,59,42,.12)}.fleet-demo .demo-board .ship{background:#7e999d}.fleet-demo .demo-board .miss{background:#eef7ff}.fleet-demo .demo-board .hit{background:#ffe2c4}.fleet-demo .demo-board .sunk{background:#f56b6b}
@keyframes demoPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.12)}}@keyframes demoSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(34%)}}@keyframes demoFall{0%{transform:translateY(0);opacity:1}55%{transform:translateY(18px);opacity:.35}100%{transform:translateY(0);opacity:1}}@keyframes fleetSplash{0%{transform:scale(.35);opacity:.2}45%{transform:scale(1.2);opacity:1}100%{transform:scale(.92);opacity:.78}}@keyframes fleetHitPop{0%{transform:scale(.25);opacity:.3}38%{transform:scale(1.22);opacity:1}100%{transform:scale(.92);opacity:.9}}@keyframes fleetSink{0%{transform:scale(.35) rotate(0);opacity:.3}35%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:scale(.82) rotate(-8deg);opacity:.88}}@keyframes fleetCellShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}@keyframes fleetWaterGlow{0%{box-shadow:inset 0 -5px 0 rgba(45,128,180,.1),0 0 0 rgba(74,163,255,0)}55%{box-shadow:inset 0 -5px 0 rgba(45,128,180,.1),0 0 0 7px rgba(74,163,255,.2)}100%{box-shadow:inset 0 -5px 0 rgba(45,128,180,.1),0 0 0 rgba(74,163,255,0)}}
@media(max-width:520px){.tutorial-modal{align-items:end;padding:10px}.tutorial-card{padding:12px}.tutorial-scene{min-height:220px;padding:8px}.tutorial-controls{grid-template-columns:1fr 1fr}.tutorial-controls span{grid-column:1/-1;grid-row:1}.tutorial-controls button{width:100%}.mini-board{width:min(270px,84vw)}.mini-lever{width:44px;height:36px}.code-slots span,.code-palette span{width:46px;height:46px}}

.connect-visual{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr);gap:5px;padding:12px;background:linear-gradient(180deg,#dff4ff,#fff8d5)}
.connect-visual span{border-radius:50%;background:#fff;border:2px solid rgba(23,59,42,.14);box-shadow:inset 0 -4px 0 rgba(23,59,42,.08)}
.connect-visual span:nth-child(1),.connect-visual span:nth-child(8),.connect-visual span:nth-child(15),.connect-visual span:nth-child(22){background:#ef5f5f}.connect-visual span:nth-child(4),.connect-visual span:nth-child(10),.connect-visual span:nth-child(16){background:#ffd84d}.connect-visual span:nth-child(7),.connect-visual span:nth-child(13){background:#4aa3ff}
.path-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;background:linear-gradient(135deg,#e7f9d3,#dff4ff)}
.path-visual span{display:grid;place-items:center;min-height:32px;border-radius:8px;background:#fffef7;border:2px solid rgba(23,59,42,.14);font-weight:900;color:#14321f;box-shadow:inset 0 -4px 0 rgba(23,59,42,.08)}.path-visual span:nth-child(1){background:#58c94c}.path-visual span:nth-child(3){background:#f56b6b;color:#fff}.path-visual span:nth-child(7){background:#dff4ff}.path-visual span:nth-child(9){background:#ffd84d}
.connect-help,.connect-panel,.connect-results{padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff;box-shadow:var(--shadow-soft)}
.connect-help{display:grid;gap:5px;margin-bottom:12px}.connect-help strong{color:#14321f}.connect-help span{color:#365944;font-weight:750}
.connect-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(34px,1fr));grid-template-rows:42px repeat(var(--rows),minmax(34px,1fr));gap:6px;max-width:min(760px,100%);margin:auto;padding:12px;border-radius:8px;background:#2d80b8;border:4px solid rgba(23,59,42,.18);box-shadow:inset 0 -8px 0 rgba(23,59,42,.14)}
.connect-drop{min-height:38px;padding:5px;border-radius:8px;background:#ffd84d;color:#14321f;font-weight:900}.connect-drop.selected:not(:disabled),.connect-drop:hover:not(:disabled){outline:4px solid rgba(255,255,255,.55);filter:brightness(1.05)}
.connect-cell{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:#eaf8d7;border:3px solid rgba(23,59,42,.16);box-shadow:inset 0 6px 0 rgba(255,255,255,.45),inset 0 -6px 0 rgba(23,59,42,.12)}
.connect-cell.winner{outline:5px solid #ffd84d;box-shadow:0 0 0 4px rgba(255,216,77,.35),inset 0 6px 0 rgba(255,255,255,.45),inset 0 -6px 0 rgba(23,59,42,.12)}
.connect-token,.connect-token-mini{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 26%,#fff8 0 15%,var(--token) 28%,var(--token) 100%);border:3px solid rgba(23,59,42,.22);font-weight:950;color:#14321f;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.connect-token{width:82%;height:82%;font-size:clamp(.62rem,1.8vw,1rem)}.connect-token-mini{width:38px;height:38px;flex:0 0 38px}
.connect-results{margin-top:12px;overflow:auto}.connect-results table{width:100%;border-collapse:collapse;min-width:560px}.connect-results th,.connect-results td{padding:8px;border-bottom:1px solid rgba(23,59,42,.13);text-align:left}.connect-results th{color:#2d5f3a}
.connect-demo{display:flex;gap:8px;align-items:end;justify-content:center}.connect-demo span{width:56px;height:56px;border-radius:50%;background:#ef5f5f;border:4px solid rgba(23,59,42,.18);box-shadow:0 6px 0 rgba(23,59,42,.12)}.connect-demo span:nth-child(even){background:#ffd84d}.connect-demo.win span{outline:5px solid #ffd84d}.connect-demo.family span:nth-child(3){background:#4aa3ff}.connect-demo.family span:nth-child(4){background:#58c94c}
@media(max-width:620px){.connect-board{gap:4px;padding:8px;grid-template-rows:36px repeat(var(--rows),minmax(28px,1fr))}.connect-drop{min-height:32px;font-size:.85rem}.connect-cell{border-width:2px}.connect-token-mini{width:32px;height:32px;flex-basis:32px}.connect-results table{min-width:460px;font-size:.85rem}}
.path-help{display:grid;gap:5px;margin-bottom:12px;padding:12px;border:2px solid rgba(74,163,255,.24);border-radius:8px;background:#eef7ff;color:#14321f}.path-help span{color:#496750;font-weight:750}
.path-panel{display:grid;gap:12px;padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff;box-shadow:var(--shadow-soft)}
.path-controls{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:8px;max-width:520px;margin:auto;width:100%}.path-controls button{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-content:center;gap:7px;min-height:42px;font-size:1.15rem}.path-controls button span{font-size:1.45rem;line-height:1}.path-controls button small{font-size:.86rem;font-weight:900}
.path-grid{display:grid;grid-template-columns:repeat(var(--path-cols),minmax(38px,1fr));gap:6px;max-width:min(680px,100%);margin:auto;padding:12px;border-radius:8px;background:#c9a766;border:6px solid #8b6a35;box-shadow:inset 0 -8px 0 rgba(23,59,42,.14)}
.path-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;border:2px solid rgba(23,59,42,.18);border-radius:8px;background:#f7efc9;color:#14321f;font-weight:900;font-size:clamp(.95rem,2.2vw,1.35rem);box-shadow:inset 0 -5px 0 rgba(23,59,42,.1)}
.path-cell span{z-index:1}.path-cell.covered{background:#fffef7;color:#496750}.path-cell.safe{background:#dff4ff}.path-cell.start{background:#dff7c4}.path-cell.goal{background:#ffd84d;color:#14321f;border-color:#b88500;box-shadow:inset 0 -5px 0 rgba(23,59,42,.1),0 0 0 4px rgba(255,216,77,.38);font-size:clamp(.78rem,1.8vw,1.05rem)}.path-cell.goal::before{content:"";position:absolute;inset:7px;border:3px solid rgba(20,50,31,.35);border-radius:8px}.path-cell.trap{background:#f56b6b;color:#fff}.path-cell.visited::after{content:"";position:absolute;inset:24%;border-radius:999px;background:rgba(31,157,85,.18)}.path-cell.me{outline:4px solid rgba(74,163,255,.65)}.path-cell.can-move{cursor:pointer}.path-cell.can-move::before{content:"";position:absolute;inset:8px;border:3px dashed rgba(31,157,85,.72);border-radius:6px}.path-cell.selected{outline:4px solid rgba(255,216,77,.95)}.path-cell:disabled{cursor:not-allowed;opacity:.95}
.path-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:12px;border:2px solid rgba(23,59,42,.12);border-radius:8px;background:#fff;box-shadow:var(--shadow-soft)}.path-stats h3{grid-column:1/-1;margin:0}.path-stats div{padding:8px;border-radius:8px;background:#f4ffe8}.path-stats strong,.path-stats span{display:block}.path-stats span{font-size:1.1rem;font-weight:900;color:#14321f}
.path-demo .path-demo-board{display:grid;grid-template-columns:repeat(3,66px);gap:8px;padding:14px;border-radius:8px;background:#c9a766;border:6px solid #8b6a35;box-shadow:var(--shadow-soft)}.path-demo .path-demo-board span{display:grid;place-items:center;height:66px;border-radius:8px;background:#fffef7;border:2px solid rgba(23,59,42,.16);font-weight:900}.path-demo .path-demo-board .visited{background:#dff4ff}.path-demo .path-demo-board .trap{background:#f56b6b;color:#fff}.path-demo .path-demo-board .player{background:#4aa3ff;color:#fff}.path-demo .path-demo-board .goal{background:#ffd84d}
@media(max-width:620px){.path-panel{padding:8px}.path-grid{gap:4px;padding:8px;border-width:4px}.path-cell{border-radius:6px;font-size:.9rem}.path-controls{gap:6px}.path-stats{grid-template-columns:1fr 1fr}}

/* Rooms dialog refinement */
.room-modal{display:block;background:#fffef7!important;color:#173b2a}
.room-modal.hidden{display:none!important}
.room-modal .room-actions button{width:100%}
.room-modal .join-box{max-height:32svh;overflow:auto}
.auth-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;padding:4px;border-radius:8px;background:#eaf8d7;border:1px solid rgba(31,157,85,.16)}
.auth-tabs button{min-height:38px;padding:7px 6px;border-radius:8px;border-bottom-width:0;background:transparent;box-shadow:none;color:#2d5f3a;font-size:.82rem}
.auth-tabs button.active{background:#ffd84d;color:#14321f;box-shadow:0 2px 0 rgba(214,169,39,.5)}
.auth-panels{margin-top:12px}.auth-pane{display:grid;gap:10px;padding:12px;border-radius:8px;background:#fff;border:1px solid rgba(23,59,42,.12);box-shadow:var(--shadow-soft)}.auth-pane p{margin:0;color:#496750;font-weight:750;line-height:1.35}.auth-pane button{width:100%}.auth-pane label{display:block}.auth-pane small{font-weight:850;color:#365944}.recovery-code{margin-top:12px}.portal-msg{padding:10px;border-radius:8px;background:#f4fbdf;border:1px solid rgba(31,157,85,.14)}
.usage-box,.family-panel{display:grid;gap:9px;margin-top:12px;padding:12px;border-radius:8px;background:#fff;border:1px solid rgba(23,59,42,.12);box-shadow:var(--shadow-soft)}
.usage-box strong,.family-panel h3{color:#14321f}.usage-box span,.usage-box small,.family-panel p,.family-profile span,.family-profile small{color:#496750;font-weight:750;line-height:1.35}.family-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.family-head h3{margin:0}.family-head button{min-height:36px;padding:7px 10px}.family-list{display:grid;gap:8px;margin-top:8px}.family-profile{display:grid;gap:9px;padding:10px;border-radius:8px;background:#f8fff0;border:1px solid rgba(31,157,85,.18)}.family-profile strong{display:block}.family-profile small{display:block;margin-top:3px}.family-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.family-actions input{margin-top:0}.family-actions button{min-width:130px}.family-limit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.family-limit-grid button{grid-column:1/-1}.family-history{padding:8px;border-radius:8px;background:#fff;border:1px solid rgba(23,59,42,.1)}.family-history ul{margin:5px 0 0;padding-left:18px;color:#496750;font-weight:750}.family-history li{margin:3px 0}
@media(max-width:620px){
  .room-modal{top:auto!important;bottom:10px!important;left:8px!important;right:8px!important;transform:none!important;width:auto!important;max-height:88svh!important;padding:14px!important}
  .room-modal .modal-head{align-items:flex-start}
  .room-modal .modal-head button{min-width:76px;padding-left:10px;padding-right:10px}
  .room-modal .room-actions{grid-template-columns:1fr}
  .room-modal .rooms{max-height:42svh}
  .auth-tabs{grid-template-columns:repeat(2,1fr)}
  .family-actions,.family-limit-grid{grid-template-columns:1fr}.family-actions button{width:100%}
}

/* Mobile in-game ergonomics: keep turn/time visible and move secondary panels below the board. */
.turn-timer{display:grid;gap:4px;margin-left:auto;min-width:88px;text-align:right}
.turn-timer.hidden{display:none}
.turn-timer-text{font-size:clamp(1.25rem,4vw,1.75rem);font-weight:950;line-height:1;color:#14321f;font-variant-numeric:tabular-nums}
.turn-timer-track{display:block;width:100%;height:8px;overflow:hidden;border-radius:999px;background:rgba(20,50,31,.16)}
.turn-timer-bar{display:block;width:100%;height:100%;border-radius:inherit;background:#1f9d55;transition:width .24s linear,background-color .16s ease}
.turn.time-low .turn-timer-text{color:#9a6100}.turn.time-low .turn-timer-bar{background:#ffb84d}
.turn.time-critical .turn-timer-text{color:#b42318;animation:timerPulse .8s ease-in-out infinite}.turn.time-critical .turn-timer-bar{background:#ef4444}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.connect-drop:active:not(:disabled),.connect-drop.touch-active:not(:disabled),.fleet-cell:active:not(:disabled),.fleet-cell.touch-active:not(:disabled),.connect-cell.touch-active,.path-cell:active:not(:disabled),.path-cell.touch-active:not(:disabled){filter:brightness(1.08);outline:4px solid rgba(74,163,255,.34);transform:translateY(1px)}

@media(max-width:980px){
  .app{--sticky-h:118px}
  .layout{display:flex;flex-direction:column;gap:8px}
  .side{display:contents}
  .net{order:0;position:sticky;top:env(safe-area-inset-top);z-index:28;margin:0;padding:7px 10px;border-radius:8px;box-shadow:var(--shadow-soft)}
  .turn{order:1;position:sticky;top:calc(env(safe-area-inset-top) + 38px);z-index:29;min-height:0;padding:8px 10px;gap:9px;border-radius:8px;align-items:center}
  .turn strong{font-size:clamp(1rem,3vw,1.18rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #turnHint{font-size:.84rem;line-height:1.25}
  .turn-timer{min-width:78px}
  .turn-timer-text{font-size:clamp(1.2rem,5vw,1.6rem)}
  .game{order:2}
  .msg{order:3}
  .last-move{order:4}
  .controls{order:5}
  .players{order:6}
  .rules{order:7}
  .wrap{width:min(100%,calc(100svh - var(--sticky-h)))}
  .secret-board{padding-top:8px}
}

@media(max-width:760px){
  .fleet-grid{grid-template-columns:22px repeat(var(--fleet-size,8),minmax(30px,1fr))}
  .fleet-cell{min-height:44px}
  .fleet-cell::after{content:"";position:absolute;inset:-4px;border-radius:10px}
}

@media(max-width:620px){
  .app{--sticky-h:108px}
  .net{font-size:.74rem;padding:6px 8px}
  .turn{top:calc(env(safe-area-inset-top) + 34px);grid-template-columns:auto minmax(0,1fr) auto}
  .turn .swatch{width:24px;height:24px;flex-basis:24px}
  .turn-timer{min-width:68px}
  .turn-timer-track{height:7px}
  .connect-board{grid-template-rows:44px repeat(var(--rows),minmax(30px,1fr))}
  .connect-drop{min-height:44px;padding:4px}
  .path-cell{min-height:44px}
}

@media(max-width:420px){
  .app{--sticky-h:104px}
  .turn{top:calc(env(safe-area-inset-top) + 32px)}
  #turnHint{display:none}
  .turn-timer-text{font-size:1.24rem}
  .players{grid-template-columns:1fr}
}

@media(orientation:landscape) and (max-height:560px){
  .layout{display:grid;grid-template-columns:minmax(0,calc(100svh - 12px)) minmax(290px,1fr);gap:8px}
  .side{display:block;order:0}
  .net,.turn,.msg,.last-move,.controls,.players,.rules{position:static;order:initial}
  .turn{display:flex}
  .wrap{width:min(100%,calc(100svh - 24px))}
}