:root{color-scheme:dark;--deep:#062c40;--navy:#082c40;--sea:#087c91;--foam:#9de6e9;--gold:#f9c96b;--parchment:#ffedc6;--ink:#15374a;--white:#f7f9f4;--tile:#0e86a5;--danger:#ff7566;--success:#8cdda2;--panel:rgba(5,43,63,.9)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:15px/1.35 'Trebuchet MS',Verdana,sans-serif;color:var(--white);background:radial-gradient(circle at 20% 15%,#0e758c 0%,#07526b 36%,#041f35 90%)}button,input,select{font:inherit}button{cursor:pointer;transition:transform .12s,filter .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.37;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f8d77d;outline-offset:2px}#app{height:100dvh;width:100%;position:relative;overflow:hidden}.app-scene{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 80% 10%,#209ba2aa,transparent 45%),linear-gradient(135deg,#095d75,#05364c)}.app-scene:before{content:"";position:absolute;inset:-40px;background:url('assets/ocean-texture.png') repeat;opacity:.42;animation:oceanDrift 25s linear infinite;mix-blend-mode:screen}.app-scene:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(175deg,transparent 0 45px,#a0e0e818 48px,transparent 52px 100px);opacity:.3;animation:oceanDrift 35s linear infinite reverse}@keyframes oceanDrift{to{transform:translate(125px,-46px)}}
.app-shell{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:clamp(8px,1.25vh,14px) clamp(8px,1.2vw,20px);gap:9px;max-width:1800px;margin:auto}.header{height:57px;flex:0 0 57px;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:51px;height:51px;border:2px solid #f5d388;border-radius:13px;background:#043248;display:grid;place-items:center;box-shadow:0 4px 0 #0c2339,0 0 20px #fff1a124}.brand-mark img{width:41px;height:41px}.brand h1{font:bold clamp(22px,2.3vw,32px)/1 Georgia,serif;color:#ffe6ad;text-shadow:0 3px 0 #2a3440,0 4px 10px #041e2f;margin:0;letter-spacing:.5px}.brand p{margin:3px 0 0;color:#abdae1;font-size:11px;letter-spacing:2.5px;text-transform:uppercase}.header-right{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;justify-content:flex-end}.round-btn{width:40px;height:40px;border-radius:12px;border:1px solid #b4d9d355;background:#0a445d;color:#ffe3a7;display:grid;place-items:center;font-size:21px}.pill{background:#0a4359;border:1px solid #589ca2a3;color:#dbf7f6;border-radius:99px;padding:8px 12px;white-space:nowrap;font-size:12px;font-weight:bold}.pill.accent{background:#6c3d28;border-color:#c9a466;color:#ffe4a0}.btn{border:2px solid #c38e44;color:#183643;background:linear-gradient(#ffe5a4,#efa945);font-weight:900;border-radius:12px;padding:10px 17px;box-shadow:inset 0 1px 0 #fff4ce,0 4px 0 #663e32,0 8px 15px #001d2d62;white-space:nowrap}.btn.secondary{background:#155d73;border-color:#5da9b4;color:#edfdfa;box-shadow:0 4px 0 #073348}.btn.ghost{background:#0d4055;border-color:#4b8797;color:#dff8f6;box-shadow:none}.btn.warn{background:#b44e45;border-color:#ffb59f;color:white;box-shadow:0 4px 0 #592a34}.btn.small{font-size:12px;padding:7px 12px;border-radius:9px}.btn.tiny{padding:5px 8px;font-size:11px;border-radius:7px;box-shadow:none}.btn.big{padding:13px 24px;font-size:17px}.btn .ico{font-size:1.16em;margin-right:4px}.btn:disabled{box-shadow:none}.panel{background:linear-gradient(155deg,rgba(7,58,75,.97),rgba(3,37,56,.96));border:2px solid #6bbfc2a1;box-shadow:0 7px 0 #042437,0 9px 25px #00162499,inset 0 2px 0 #8cdee328;border-radius:16px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:35px;padding:0 2px}.panel-title strong{font:700 clamp(15px,1.3vw,20px) Georgia,serif;color:#ffe1a6}.panel-title .subtitle{font-size:11px;color:#a2d6d9}.menu-wrap{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;padding-bottom:18px}.menu{width:min(980px,100%);display:grid;grid-template-columns:1.1fr 1fr;gap:16px;max-height:100%}.menu-left{padding:23px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:440px}.menu-left:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 53% 55%,#33bfbd29,transparent 60%);pointer-events:none}.menu-left h2{font:900 clamp(34px,4vw,59px)/1 Georgia,serif;letter-spacing:.5px;color:var(--gold);text-shadow:0 4px 0 #422e30;margin:0 0 12px}.menu-left p{font-size:16px;color:#d5eef0;line-height:1.5;max-width:400px}.menu-ship{width:98%;height:130px;object-fit:contain;filter:drop-shadow(0 10px 8px #001823b0);transform:rotate(-6deg)}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:#88dbe0;font-size:11px;font-weight:bold}.menu-right{padding:21px;display:flex;flex-direction:column;gap:11px;overflow-y:auto}.section-label{font:700 12px Georgia,serif;text-transform:uppercase;letter-spacing:1.8px;color:#a9e2e3}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-card{background:#0b4759;border:2px solid #387c8c;border-radius:13px;color:#d2eaf0;text-align:left;padding:10px 12px;min-height:77px}.mode-card.is-selected{border-color:#f7d07d;background:linear-gradient(135deg,#1c6572,#10485e);box-shadow:inset 0 0 0 1px #ffd97d55}.mode-card .mode-icon{font-size:20px;margin-right:5px}.mode-card strong{font-size:13px;color:white;display:block;margin-bottom:5px}.mode-card small{font-size:10px;color:#c2e7e9;line-height:1.25;display:block}.segmented{display:flex;gap:5px;flex-wrap:wrap}.segment{flex:1;border:1px solid #427a86;border-radius:8px;background:#0c4051;color:#c7e7e8;padding:8px 9px;white-space:nowrap;font-size:12px;font-weight:700}.segment.active{background:#edc574;color:#233c45;border-color:#ffe9aa}.menu-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.muted{color:#add0d8;font-size:12px}.app-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px}.statusline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 13px;min-height:47px}.status-main{display:flex;align-items:center;gap:9px;min-width:0}.status-main strong{font:700 16px Georgia,serif;color:#ffe0a2}.status-main span{font-size:12px;color:#c0e3e9}.boards{display:grid;grid-template-columns:1fr 1fr;gap:13px;flex:1;min-height:0;align-items:stretch}.board-card{padding:10px 11px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.board-card .panel-title{flex:0 0 30px}.board-card .chipline{display:flex;align-items:center;justify-content:flex-end;gap:5px}.board-card .ship-chip{font-size:10px;padding:3px 6px;border:1px solid #8fdfe24f;border-radius:30px;color:#dcf4f0}.board-card .ship-chip.sunk{text-decoration:line-through;opacity:.45}.ocean{min-height:0;flex:1;position:relative;display:flex;align-items:center;justify-content:center;border-radius:11px;overflow:hidden;background:radial-gradient(ellipse at 43% 20%,#28bdc477,transparent 65%),linear-gradient(160deg,#087c99,#075373);border:1px solid #72ccce76}.ocean:before{content:"";position:absolute;inset:-10%;opacity:.55;background:url('assets/ocean-texture.png') repeat;animation:oceanDrift 19s linear infinite;pointer-events:none}.ocean:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#d2ffff14 50%,transparent 65%);pointer-events:none}.table-frame{position:relative;width:min(100%,calc((100dvh - 260px)*18/8.1));max-height:100%;padding:18px 5px 4px 24px;filter:drop-shadow(0 3px 3px #00334766)}.group-numbers{position:absolute;top:1px;left:24px;right:5px;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));height:16px;align-items:center}.group-numbers span,.period-number{font-weight:900;color:#cbf4e4;text-align:center;font-size:clamp(9px,.82vw,12px);text-shadow:0 1px 3px #012c42}.period-numbers{position:absolute;top:18px;left:1px;width:21px;height:calc(100% - 22px);display:grid;grid-template-rows:repeat(7,minmax(0,1fr));align-items:center}.board-grid{position:relative;width:100%;aspect-ratio:18/7;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));border:1px solid #5dd2df40}.element{position:relative;z-index:1;border:1px solid #dbffeb6b;background:linear-gradient(140deg,#b9edeeb0,#7ac5c7af);color:#0e4550;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;cursor:crosshair;min-width:0;min-height:0;padding:0;overflow:hidden;border-radius:2px;transition:filter .12s,background .14s,box-shadow .14s}.element:hover:not(.inactive){filter:brightness(1.22);z-index:3;box-shadow:inset 0 0 0 2px #fff7d4}.element .symbol{font-size:clamp(10px,1.35vw,18px);font-weight:900;line-height:1;letter-spacing:-.4px}.element .number{font-size:clamp(6px,.65vw,9px);font-weight:900;opacity:.65;line-height:1.1}.element.metal{background:linear-gradient(150deg,#addadae0,#66b8bee2)}.element.nonmetal{background:linear-gradient(150deg,#c8e9c1d9,#90c8bbd9)}.element.noble{background:linear-gradient(150deg,#ffd8acdd,#e8bd88dc)}.element.inactive{background:#1f677789;border:1px solid #4ca7ac54;color:#afd0d282;cursor:not-allowed;opacity:.42}.element.water{background:transparent;border:1px dashed #98e7e023;pointer-events:none}.element.selected{z-index:4;border:2px solid #ffe3a3;background:#fff0ae!important;color:#443c33;box-shadow:0 0 0 2px #faad40,0 0 20px #ffe188}.element.hit{background:#c76254!important;color:#fff1d4;border-color:#ffd6a0;box-shadow:inset 0 0 0 1px #a8342e}.element.miss{background:#3f7d95!important;color:#cae9eb;border-color:#b4dae2}.element.sunk{background:#78383d!important;color:#ffe0ba;border-color:#f29a82}.element.has-ship{box-shadow:inset 0 0 0 2px #e8ca84a3}.element.ghost-good{background:#c7e7ae!important}.element.ghost-bad{background:#fa9e97!important}.element .marker{font-size:clamp(10px,1.3vw,18px);font-weight:900;line-height:1;position:absolute;right:1px;bottom:0;color:#fff1d1;text-shadow:0 1px 4px #48151c;pointer-events:none}.element.miss .marker{color:#daf7ff}.ship-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.board-caption{padding:7px 2px 2px;display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;color:#bce1e6;min-height:29px}.legend{display:flex;gap:9px;align-items:center}.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px}.legend .lh{background:#d47566}.legend .lm{background:#6b9baa}.console{padding:10px 12px;min-height:95px;display:flex;flex-direction:column;gap:9px;flex:0 0 auto}.console-main{display:flex;gap:12px;justify-content:space-between;align-items:center}.console-left{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}.console-right{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.console label,.small-label{font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:1.3px;color:#a9dce1}.coord-input{width:103px;min-width:85px;padding:9px 10px;background:#f8eed0;color:#173d4b;border:2px solid #b8a476;border-radius:9px;font-weight:900;text-align:center}.coord-input::placeholder{color:#788687}.coord-confirm{font:700 13px Georgia,serif;color:#ffe2a1;white-space:nowrap}.hint{font-size:11px;color:#b6dde1}.toastline{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #72aab83c;padding-top:7px;font-size:12px;color:#c8e5e8;min-height:25px}.toastline strong{color:#ffe5b0}.fleetbar{padding:7px 12px;display:flex;align-items:center;gap:9px;min-height:63px;flex-wrap:wrap}.fleetbar .fleet-select{display:flex;gap:7px;align-items:center;flex:1;min-width:0}.fleet-item{border:2px solid #47879a;border-radius:10px;background:#0a4b60;color:#f4efda;display:flex;align-items:center;gap:5px;padding:5px 8px;min-height:44px}.fleet-item.selected{background:#166b77;border-color:#ffdf99}.fleet-item.placed{background:#205c4c;border-color:#86c6a7}.fleet-item img{height:26px;width:clamp(30px,5vw,75px);object-fit:contain;filter:drop-shadow(0 2px 2px #041d22)}.fleet-item span{font-size:11px;font-weight:800;white-space:nowrap}.fleet-item small{display:block;font-size:9px;color:#d1e6d9}.center-card{max-width:620px;width:calc(100% - 24px);margin:auto;padding:26px;text-align:center}.curtain-wrap{display:flex;align-items:center;justify-content:center;flex:1}.curtain-icon{font-size:58px;filter:drop-shadow(0 4px 5px #031d30)}.center-card h2{font:900 clamp(24px,3.5vw,39px) Georgia,serif;color:#ffe1a0;margin:12px 0 8px}.center-card p{color:#d3e7e8;font-size:15px;line-height:1.6}.center-card .btn{margin:13px 5px 0}.results{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}.settings-shade{position:absolute;inset:0;background:#031b2add;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}.settings{width:min(540px,100%);padding:22px;max-height:95dvh;overflow-y:auto}.settings h2{font:900 27px Georgia,serif;color:#ffe3b4;margin:0 0 12px}.settings-row{padding:13px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #80b9bd36}.settings-row label{font-weight:700}.settings-row small{display:block;color:#b4d8dc;font-size:11px;margin-top:3px}.settings input[type=checkbox]{width:21px;height:21px;accent-color:#f0c06b}.settings select{background:#14495f;color:#fff;border:1px solid #77b9c8;border-radius:8px;padding:7px 9px}.settings-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.toast-popup{position:absolute;top:71px;left:50%;transform:translateX(-50%);z-index:15;background:#fff1c7;color:#193b40;border:2px solid #e6a955;border-radius:10px;padding:9px 18px;box-shadow:0 8px 23px #0019249e;font-weight:900;text-align:center;pointer-events:none;min-width:200px;max-width:80vw}.tracker-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tracker-panel .coord-input{width:85px}.mobile-tabs{display:none}.tooltip-help{cursor:help;text-decoration:underline dotted}.divider-v{width:1px;height:33px;background:#7bb5be5a;margin:0 3px}#effectsCanvas{position:fixed;inset:0;z-index:17;pointer-events:none;width:100vw;height:100dvh}.footer-legal{font-size:10px;color:#b0d0d3;text-align:center}
@media(min-width:1350px){.element .symbol{font-size:18px}.element .number{font-size:9px}.table-frame{width:min(100%,calc((100dvh - 252px)*18/8.1))}}@media(max-height:725px){.header{height:45px;flex-basis:45px}.brand-mark{width:40px;height:40px}.brand-mark img{width:33px;height:33px}.statusline{min-height:39px;padding-top:5px;padding-bottom:5px}.console{padding:7px 10px;min-height:74px;gap:4px}.board-card{padding:6px 8px}.board-caption{min-height:20px;padding:3px}.fleetbar{padding:5px 8px;min-height:51px}.fleet-item{min-height:37px}.fleet-item img{height:21px}}@media(max-width:930px){.boards{display:block}.board-card{height:100%}.board-card[data-board="own"]{display:none}.boards[data-mobile-view="own"] .board-card[data-board="own"]{display:flex}.boards[data-mobile-view="own"] .board-card[data-board="enemy"]{display:none}.mobile-tabs{display:flex;align-items:center;gap:5px}.menu{max-width:730px}.element .symbol{font-size:clamp(10px,2.6vw,18px)}.element .number{font-size:clamp(6px,1.1vw,10px)}.table-frame{width:min(100%,calc((100dvh - 280px)*18/8.1))}.group-numbers span,.period-number{font-size:11px}}@media(max-width:650px){.app-shell{padding:7px;gap:6px}.header{height:44px;flex:0 0 44px}.brand h1{font-size:20px}.brand p{font-size:8px;letter-spacing:1px}.brand-mark{width:39px;height:39px}.brand-mark img{width:30px;height:30px}.header-right .pill{display:none}.round-btn{width:35px;height:35px}.menu{display:flex;flex-direction:column;gap:8px;height:100%;max-width:490px}.menu-wrap{padding-bottom:0}.menu-left{min-height:0;flex:0 0 160px;padding:14px}.menu-left h2{font-size:29px;margin-bottom:4px}.menu-left p{font-size:12px;line-height:1.35;margin:5px 0}.menu-ship{position:absolute;right:8px;top:35px;width:38%;height:85px;opacity:.65}.menu-right{padding:12px;gap:8px;min-height:0}.mode-card{min-height:66px;padding:8px}.mode-card strong{font-size:12px}.mode-card small{font-size:9px}.statusline{gap:4px;min-height:42px;padding:5px 8px}.status-main{gap:5px}.status-main strong{font-size:12px}.status-main span{font-size:10px}.board-card .panel-title strong{font-size:15px}.board-card .panel-title .subtitle{font-size:10px}.board-card .ship-chip{font-size:9px}.ocean{min-height:0}.table-frame{padding:16px 2px 2px 21px;width:min(100%,calc((100dvh - 260px)*18/8.0))}.group-numbers{left:21px;right:2px}.period-numbers{top:16px;height:calc(100% - 18px)}.group-numbers span,.period-number{font-size:9px}.board-caption{font-size:9px}.console{padding:8px;gap:6px}.console-main{align-items:flex-start;gap:6px}.console-left{gap:5px}.console-right{gap:5px}.coord-input{width:82px;padding:7px 5px;font-size:12px}.coord-confirm{font-size:12px}.console .btn.small{padding:7px 9px}.statusline .pill{font-size:9px;padding:5px 8px}.fleetbar{max-height:125px;overflow-y:auto}.fleet-item span{font-size:9px}.fleet-item img{width:33px}.brand{gap:6px}}@media(max-height:550px){.brand p,.board-caption,.toastline .hint{display:none}.fleetbar{min-height:41px}.center-card{padding:13px}.center-card h2{margin:3px;font-size:23px}.center-card p{font-size:12px;margin:4px}.center-card .btn{margin-top:6px}.table-frame{width:min(100%,calc((100dvh - 190px)*18/7.5))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body.still-ocean .app-scene:before,body.still-ocean .app-scene:after,body.still-ocean .ocean:before{animation:none!important}

/* Keep element symbols and damage markers legible over the ship artwork. */
.element.has-ship{background:rgba(19,111,126,.16)!important;z-index:3;border-color:#f5d48aaa}
.element.has-ship .symbol{color:#fff6d9;text-shadow:0 1px 3px #132b39,0 0 4px #072b39;background:#102f3b96;border-radius:3px;padding:1px 2px}
.element.has-ship .number{color:#f8f6d8;text-shadow:0 1px 3px #19303b;opacity:.93}
.element.has-ship.hit{background:rgba(170,44,43,.4)!important}
.element.has-ship.sunk{background:rgba(96,26,31,.46)!important}
.element.has-ship .marker{background:#64272dbb;border-radius:3px;padding:0 2px}
@media(max-width:650px){
 .fleetbar{display:flex;flex-wrap:wrap;gap:5px;padding:6px 8px;max-height:none;overflow:visible;min-height:0}
 .fleetbar>.small-label{display:none}
 .fleetbar .fleet-select{order:0;flex:0 0 100%;min-width:0;overflow-x:auto;gap:5px;padding:2px 0 4px;scrollbar-width:thin}
 .fleetbar .fleet-item{flex:0 0 auto;min-width:100px;padding:4px 6px;min-height:37px}
 .fleetbar>[data-action="rotate"]{order:1}
 .fleetbar>[data-action="random"]{order:2}
 .fleetbar>[data-action="ready"]{order:3;margin-left:auto}
 .fleetbar .btn.small{padding:5px 8px;font-size:11px}
}

/* ---- v1.1: complete extended periodic table and IRL board-aligned controls ---- */
.table-frame.extended-table {width:min(100%,calc((100dvh - 300px)*18/10.65));}
.f-header {display:flex;align-items:center;justify-content:space-between;gap:4px;color:#ecf7d8;font-weight:900;font-size:9px;line-height:1.15;padding:5px 0 2px;text-shadow:0 1px 2px #072c43;}
.f-header span:last-child{font-weight:600;color:#bbe6e7;font-size:8px;}
.f-row-frame {position:relative;width:100%;}
.f-grid {width:100%;aspect-ratio:18/2;position:relative;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));border:1px solid #5dd2df40;}
.f-grid .element {min-width:0;min-height:0;}
.f-grid .element.fmetal {background:linear-gradient(150deg,#d8c4e5e0,#ac97c7e2);}
.f-labels {position:absolute;left:0;top:0;width:16.6666667%;height:100%;display:flex;flex-direction:column;z-index:3;pointer-events:none;}
.f-labels span {flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(7px,.65vw,10px);font-weight:900;color:#e6f6e4;text-shadow:0 1px 3px #002c40;}
.f-grid .element .symbol{font-size:clamp(9px,1.1vw,15px)}
.f-grid .element .number{font-size:clamp(6px,.58vw,8px)}
.board-controls {display:flex;align-items:center;justify-content:center;gap:6px;min-height:45px;padding:5px 0 1px;border-top:1px solid #6cb9c459;flex-wrap:wrap;}
.board-controls .small-label {white-space:nowrap;}
.board-controls .coord-input {width:82px;min-width:72px;padding:7px 6px;font-size:12px;}
.board-controls .coord-confirm {font-size:clamp(10px,.78vw,12px);min-width:0;max-width:155px;overflow:hidden;text-overflow:ellipsis;}
.board-controls .btn.small {padding:7px 9px;font-size:11px;}
.board-controls .btn{flex-shrink:0;}
.board-controls.enemy-controls {gap:5px;}
.irl-log {min-height:45px;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;padding:7px 13px;font-size:12px;}
.irl-log .hint {max-width:45%;text-align:right;}
.element.ghost-good{background:#f3df9aaf!important;border-color:#fff4ba!important;}
.element.ghost-bad{background:#fa7c76c2!important;border-color:#ffe1d3!important;}
.report-backdrop {position:fixed;inset:0;z-index:110;display:flex;justify-content:center;align-items:center;padding:15px;background:rgba(2,18,30,.80);backdrop-filter:blur(7px);}
.report-modal {max-width:505px;width:min(100%,505px);padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;background:linear-gradient(150deg,#155d73,#092c43);box-shadow:0 18px 55px #031a29a9;}
.report-modal h2 {font:900 clamp(22px,3vw,29px)/1.2 Georgia,serif;color:#ffe4ac;margin:0;}
.report-emblem {font-size:38px;}
.report-coordinate {font:900 clamp(16px,2.5vw,21px)/1.3 Georgia,serif;background:#083549;border:1px solid #8dc7c5;border-radius:12px;color:#fff4c7;padding:9px 16px;}
.report-modal p {font-size:13px;line-height:1.45;color:#cdeaf0;max-width:365px;margin:0 0 4px;}
.report-actions {display:flex;flex-wrap:wrap;gap:9px;justify-content:center;width:100%;margin:2px 0 5px;}
.report-actions .report-button {flex:1;min-width:94px;font-size:16px;padding:12px 10px;}
@media(max-width:1350px) and (min-width:931px){
 .board-controls {gap:4px;}
 .board-controls .small-label {font-size:9px;letter-spacing:.3px;}
 .board-controls .coord-input{width:74px;min-width:70px;}
 .board-controls .coord-confirm{max-width:106px;}
}
@media(max-width:930px){.f-grid .element .symbol{font-size:clamp(10px,2.35vw,16px)}.f-grid .element .number{font-size:clamp(6px,1.05vw,9px)}.table-frame.extended-table{width:min(100%,calc((100dvh - 310px)*18/10.4))}.board-controls{min-height:42px;}}
@media(max-width:650px){
 .table-frame.extended-table {width:min(100%,calc((100dvh - 295px)*18/10.4));}
 .f-header{font-size:8px;padding-top:2px;}.f-header span:last-child{font-size:7px;}
 .f-labels span{font-size:7px;}
 .board-controls {gap:4px;padding:4px 0;flex-wrap:wrap;}
 .board-controls .small-label{font-size:9px;letter-spacing:.2px;}
 .board-controls .coord-confirm{max-width:104px;font-size:10px;}
 .board-controls .coord-input {width:72px;min-width:70px;font-size:12px;}
 .board-controls .btn.small{padding:6px 7px;font-size:10px;}
 .irl-log {padding:6px 9px;gap:4px;min-height:42px;font-size:10px;}
 .irl-log .hint{display:none;}
 .report-modal{padding:18px 12px;}.report-actions .report-button{font-size:13px;min-width:85px;}
}
@media(max-height:660px){.table-frame.extended-table{width:min(100%,calc((100dvh - 220px)*18/10.4))}.f-header{padding-top:2px}.board-controls{min-height:36px;padding:3px 0}.irl-log{min-height:35px;padding-top:4px;padding-bottom:4px}.board-caption{min-height:17px}}

/* Correct period labels track the seven main rows, not the added F-block. */
.board-grid > .period-numbers {position:absolute;top:0;left:-24px;width:21px;height:100%;z-index:3;pointer-events:none;}
.f-coordinates {display:grid;grid-template-columns:repeat(18,minmax(0,1fr));height:14px;align-items:center;color:#d6f4ea;text-align:center;font-size:clamp(8px,.62vw,10px);font-weight:900;}
.f-coordinates span{min-width:0;white-space:nowrap;}
@media(max-width:650px){.board-grid > .period-numbers{left:-21px}.f-coordinates{height:12px;font-size:7px}.statusline .status-main span{display:none}.statusline .status-main strong{font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* v1.1.1: pixel-accurate fitting for the *measured* ocean. A ResizeObserver
   sets the biggest full-table width that fits each board independently. */
.table-frame,.table-frame.extended-table {max-height:none; flex:0 0 auto; min-width:0;}
/* Scale both the normal and f-block glyphs with the real element width.
   Viewport-relative fonts were too large when tables were height-constrained. */
.table-frame .element .symbol,
.table-frame .f-grid .element .symbol {font-size:clamp(6px,calc(var(--tile-px, 35px) * .43),18px);letter-spacing:-.03em;}
.table-frame .element .number,
.table-frame .f-grid .element .number {font-size:clamp(5px,calc(var(--tile-px, 35px) * .23),9px);}
.table-frame .group-numbers span,
.table-frame .period-number {font-size:clamp(7px,calc(var(--tile-px, 35px) * .28),12px);}
.table-frame .f-coordinates {font-size:clamp(6px,calc(var(--tile-px, 35px) * .23),10px);}
.table-frame .f-labels span {font-size:clamp(6px,calc(var(--tile-px, 35px) * .23),10px);}
.table-frame .marker {font-size:clamp(7px,calc(var(--tile-px, 35px) * .38),16px);}
@media(max-height:650px) {
 .f-header {padding-top:2px;padding-bottom:1px;}
 .app-shell {gap:6px;}
}
/* One focused table when two side-by-side boards would make element targets tiny.
   Both boards remain accessible with the Enemy Waters / My Fleet tabs. */
@media (min-width:931px) and (max-width:1100px) {
  .boards{display:block;}
  .board-card{height:100%;}
  .board-card[data-board="own"]{display:none;}
  .boards[data-mobile-view="own"] .board-card[data-board="own"]{display:flex;}
  .boards[data-mobile-view="own"] .board-card[data-board="enemy"]{display:none;}
  .mobile-tabs{display:flex;align-items:center;gap:5px;}
}
/* Short windows and mobile screens: free height for the chemistry grid by
   collapsing redundant captions, while keeping action controls accessible. */
@media (max-height:650px) {
  .app-shell{padding-top:4px;padding-bottom:4px;gap:4px;}
  .header{height:37px;flex-basis:37px;}
  .brand-mark{width:35px;height:35px;border-radius:9px;}
  .brand-mark img{width:29px;height:29px;}
  .brand h1{font-size:clamp(17px,1.8vw,24px);}
  .brand p{font-size:8px;letter-spacing:1px;}
  .round-btn{width:32px;height:32px;}
  .app-main{gap:4px;}
  .statusline{min-height:31px;padding:4px 9px;}
  .status-main strong{font-size:12px;}
  .status-main span{font-size:10px;}
  .statusline .pill{font-size:10px;padding:4px 8px;}
  .fleetbar{padding:3px 7px;gap:5px;min-height:40px;}
  .fleet-item{min-height:30px;padding:3px 5px;}
  .fleet-item img{height:22px;width:43px;}
  .fleetbar .btn.small{padding:4px 8px;font-size:10px;}
  .board-card{padding:4px 6px;}
  .board-card .panel-title{flex:0 0 24px;min-height:24px;}
  .board-caption{min-height:16px;padding:1px;}
  .console{min-height:0;padding:5px 8px;gap:3px;}
  .console-main{min-height:27px;}
  .console-left>.hint,.console .toastline{display:none;}
  .console .btn.small{padding:5px 8px;}
  .irl-log{min-height:27px;padding:4px 8px;}
}
@media (max-width:650px) and (max-height:700px) {
  .header{height:34px;flex-basis:34px;}
  .brand{gap:4px;}
  .brand h1{font-size:17px;}
  .brand p{display:none;}
  .brand-mark{width:30px;height:30px;}
  .brand-mark img{width:25px;height:25px;}
  .header-right{gap:4px;flex-wrap:nowrap;}
  .round-btn{width:29px;height:29px;font-size:16px;}
  .fleetbar .fleet-select{flex:0 0 100%;padding:0 0 2px;gap:4px;}
  .fleetbar .fleet-item{min-height:26px;min-width:81px;padding:2px 4px;}
  .fleetbar .fleet-item img{width:22px;height:18px;}
  .fleetbar .fleet-item span{font-size:8px;}
  .fleetbar .fleet-item small{font-size:7px;}
  .fleetbar .btn.small{padding:3px 5px;font-size:9px;}
  .fleetbar{padding:4px;gap:3px;}
  .statusline .status-main strong{font-size:10px;}
  .statusline .pill{padding:3px 5px;font-size:9px;}
  .board-card .panel-title .subtitle{display:none;}
  .console .console-main{align-items:center;gap:4px;}
  .console .console-left{flex-wrap:wrap;gap:4px;}
  .console .console-right{gap:4px;}
  .console .btn.small{font-size:9px;padding:4px 5px;}
  .console .small-label{font-size:9px;}
}

/* Chemisode Games integration, visible on small screens without blocking controls */
.portal-return{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border-radius:11px;border:1px solid #a7e0db66;background:#063849;color:#e6f8f2;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.portal-return:focus-visible{outline:3px solid #f8d77d;outline-offset:2px}
@media(max-width:650px){.portal-return{font-size:11px;padding:7px 9px;min-height:35px}}
@media(max-width:365px){.portal-return{padding:6px 7px;font-size:10px}.brand h1{font-size:18px}.brand p{font-size:7px}.header-right{gap:4px}}
/* Keep the three top-right controls on a single row on narrow game screens. */
@media(max-width:650px){.header{gap:6px}.header-right{flex-wrap:nowrap;gap:5px;flex-shrink:0}.brand{gap:5px}.brand h1{font-size:18px}.brand p{font-size:7px;letter-spacing:.5px}.brand-mark{width:35px;height:35px;flex:0 0 35px}.brand-mark img{width:28px;height:28px}}
@media(max-width:365px){.brand h1{font-size:16px}.brand p{display:none}.portal-return{padding:6px 7px}.round-btn{width:33px;height:33px}}

/* v1.2 Online: unobtrusive Host / Join inside Chemi-Ships. */
.online-shell{min-height:0;overflow:auto;align-items:center;justify-content:center;padding:8px}
.online-card{width:min(100%,540px);max-height:100%;overflow-y:auto;gap:8px;padding:clamp(13px,2.5vw,23px)}
.online-card h2{font-size:clamp(21px,3vw,29px);margin:2px 0 4px}
.online-card p{margin:3px 0;font-size:13px;line-height:1.35}
.online-choice,.online-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.online-choice .btn{flex:1;min-width:116px}.online-buttons .btn{min-width:104px}
.online-label,.online-card label{font-size:12px;font-weight:700;color:#f6e6bd;align-self:flex-start}
.online-input{font-size:clamp(21px,4vw,28px);font-weight:800;letter-spacing:.2em;text-align:center;color:#143449;background:#fff2d6;border:2px solid #d4c391;border-radius:10px;width:min(100%,300px);min-height:46px;padding:6px 9px}
.online-hint,.online-advanced small{color:#d4e9e6}
.online-advanced{border-top:1px solid #ffffff30;width:100%;padding-top:6px;text-align:left}
.online-advanced summary{cursor:pointer;font-weight:650;font-size:12px;color:#d3eae9}
.online-server{width:100%;padding:8px;margin:5px 0;background:#ecf7f5;border:1px solid #91c5cd;border-radius:7px;color:#123347;font-size:13px}
.online-advanced small{font-size:11px;display:block;line-height:1.3}
.online-error{color:#ffd5bb!important;font-weight:650;font-size:12px!important;overflow-wrap:anywhere}
.online-error:empty{display:none}
.online-pin{font-size:clamp(25px,5vw,40px);letter-spacing:.15em;font-weight:900;color:#ffe3a5;background:#082d42;border-radius:10px;padding:6px 18px}
.online-status{color:#c9eee9!important}
@media(max-height:650px){.online-shell{padding:2px}.online-card{padding:10px;gap:3px}.online-card p{font-size:11px;margin:0}.online-card h2{font-size:19px}.online-card .btn.big{padding:7px 12px}.online-pin{font-size:26px}}
@media(max-width:360px){.online-card{padding:10px}.online-choice .btn{min-width:105px;padding:8px}.online-buttons .btn{min-width:90px;padding:8px}}
.online-input::placeholder{letter-spacing:0;font-size:15px;font-weight:650}
@media(max-width:650px) and (max-height:650px){
 .menu-left{flex-basis:112px;padding:8px 11px}
 .menu-left h2{font-size:23px;margin:0;line-height:1}
 .menu-left p{font-size:10px;line-height:1.2;margin:3px 0;max-width:70%}
 .menu-left .muted{display:none}
 .menu-ship{height:66px;top:20px;width:30%}
 .menu-right{gap:5px;padding:9px 10px}
 .mode-grid{gap:5px}
 .mode-card{min-height:53px;padding:5px 6px;border-radius:9px}
 .mode-card strong{font-size:11px;margin-bottom:2px}
 .mode-card .mode-icon{font-size:14px;margin-right:3px}
 .mode-card small{font-size:8px}
 .section-label{font-size:10px}
 .segment{padding:5px 6px;font-size:11px}
 .menu-right .hint{font-size:9px;line-height:1.25}
 .menu-footer .btn.big{padding:8px 10px;font-size:13px}
 .menu-footer .muted{font-size:9px}
}