/* FlottenDuell – scoped UI, responsive from 320px, no dependency on theme CSS. */
.fd-body{margin:0;background:#071524;min-height:100vh}
.fd-root,.fd-root *{box-sizing:border-box}
.fd-root{--fd-ink:#f0f6ff;--fd-muted:#91a9c2;--fd-card:#112a3e;--fd-line:rgba(134,184,219,.18);--fd-cyan:#5de6e5;--fd-blue:#378be9;--fd-surface:#071525;--fd-good:#49dec0;--fd-red:#ff6d84;display:block;position:relative;width:100%;isolation:isolate;color:var(--fd-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
.fd-root button,.fd-root input,.fd-root select{font:inherit}
.fd-root button{cursor:pointer}
.fd-root button:disabled{cursor:not-allowed;opacity:.45}
.fd-root button:focus-visible,.fd-root input:focus-visible,.fd-root select:focus-visible{outline:2px solid #79f3ef;outline-offset:3px}
.fd-root .fd-shell{position:relative;overflow:hidden;min-height:780px;background:radial-gradient(ellipse 70% 30% at 84% 1%,rgba(29,108,154,.26),transparent 100%),radial-gradient(ellipse 60% 45% at -7% 42%,rgba(14,105,134,.18),transparent 100%),linear-gradient(145deg,#081a2e,#071321 74%);padding:0 clamp(16px,3vw,42px);}
.fd-root .fd-shell::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(103,189,223,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(103,189,223,.045) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.fd-root .fd-shell::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:640px;height:640px;right:-320px;top:240px;border-radius:50%;border:1px solid rgba(84,178,213,.07);box-shadow:0 0 0 96px rgba(84,178,213,.015),0 0 0 200px rgba(84,178,213,.008)}
.fd-root .fd-header,.fd-root .fd-main,.fd-root .fd-footer{width:min(100%,1260px);margin-left:auto;margin-right:auto}
.fd-root .fd-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:91px;border-bottom:1px solid var(--fd-line);}
.fd-root .fd-brand{display:flex;align-items:center;gap:12px;min-width:0}
.fd-root .fd-brand-icon{display:grid;place-items:center;border:1px solid rgba(99,229,230,.35);background:linear-gradient(135deg,rgba(82,211,212,.25),rgba(37,91,163,.18));color:#67e9df;border-radius:13px;width:49px;height:49px;box-shadow:inset 0 1px rgba(255,255,255,.1)}
.fd-root .fd-brand-icon svg{height:30px;width:30px}
.fd-root .fd-brand strong{display:block;font-size:19px;letter-spacing:.12em;font-weight:850;line-height:1.1}
.fd-root .fd-brand strong span{color:var(--fd-cyan)}
.fd-root .fd-brand small{display:block;margin-top:4px;color:#7197b5;font-size:9px;letter-spacing:.155em;font-weight:700}
.fd-root .fd-header-actions{display:flex;align-items:center;gap:11px}
.fd-root .fd-connected{white-space:nowrap;letter-spacing:.13em;color:#94b6cb;font-size:10px;font-weight:850;border:1px solid var(--fd-line);background:rgba(9,26,42,.58);padding:9px 12px;border-radius:50px}
.fd-root .fd-connected i{display:inline-block;width:7px;height:7px;background:var(--fd-good);border-radius:100%;margin-right:7px;box-shadow:0 0 13px var(--fd-good)}
.fd-root .fd-icon-btn,.fd-root .fd-header-back{color:#b9d0df;background:rgba(14,41,61,.65);border:1px solid var(--fd-line);border-radius:11px;height:38px;padding:0 12px}
.fd-root .fd-icon-btn{font-size:18px}
.fd-root .fd-header-back{font-size:12px;font-weight:700}
.fd-root .fd-icon-btn:hover,.fd-root .fd-header-back:hover{border-color:rgba(91,224,216,.6);color:white}
.fd-root .fd-main{padding:40px 0 48px;min-height:540px}
.fd-root .fd-hero{position:relative;max-width:880px;margin:4px auto 35px;text-align:center}
.fd-root .fd-eyebrow{font-size:11px;letter-spacing:.185em;color:var(--fd-cyan);font-weight:850;text-transform:uppercase}
.fd-root .fd-pulse{display:inline-block;width:8px;height:8px;background:var(--fd-cyan);box-shadow:0 0 0 5px rgba(93,230,229,.1);border-radius:50%;margin:0 10px 1px 0}
.fd-root h1,.fd-root h2,.fd-root p{margin-top:0}
.fd-root .fd-hero h1{font-weight:850;letter-spacing:-.052em;font-size:clamp(38px,5.3vw,74px);line-height:1.02;margin:19px 0 20px}
.fd-root .fd-hero h1 em{font-style:normal;color:var(--fd-cyan)}
.fd-root .fd-hero p{color:#a7bdd0;font-size:clamp(14px,1.5vw,17px);line-height:1.75;max-width:670px;margin:0 auto}
.fd-root .fd-hero-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:29px}
.fd-root .fd-hero-stats span{font-size:10px;font-weight:750;letter-spacing:.105em;color:#7899b7}
.fd-root .fd-hero-stats b{color:#e6faff;font-size:14px;letter-spacing:.025em;margin-right:6px}
.fd-root .fd-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.fd-root .fd-panel{border:1px solid rgba(112,168,200,.21);border-radius:18px;background:linear-gradient(156deg,rgba(26,56,78,.82),rgba(12,33,52,.9) 87%);box-shadow:0 14px 45px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.045)}
.fd-root .fd-mode-card{display:flex;flex-direction:column;gap:0;padding:24px 22px 23px;transition:border-color .18s,transform .18s;position:relative}
.fd-root .fd-mode-card:hover{border-color:rgba(84,218,221,.55);transform:translateY(-2px)}
.fd-root .fd-mode-card.fd-featured{border-color:rgba(86,221,215,.55);background:linear-gradient(157deg,rgba(26,77,98,.88),rgba(13,37,58,.96) 80%)}
.fd-root .fd-card-emblem{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;font-size:25px;color:#67e2e1;background:linear-gradient(135deg,rgba(73,209,209,.19),rgba(55,119,197,.16));border:1px solid rgba(88,224,217,.16);margin-bottom:17px}
.fd-root .fd-tag,.fd-root .fd-label{display:block;color:var(--fd-cyan);font-size:10px;font-weight:850;letter-spacing:.15em}
.fd-root .fd-mode-card h2{font-size:25px;line-height:1.15;letter-spacing:-.033em;margin:9px 0 9px;font-weight:800}
.fd-root .fd-mode-card>p{font-size:13px;line-height:1.7;color:#9cb6c9;min-height:69px;margin-bottom:17px}
.fd-root .fd-mode-card label{display:block;color:#b7ccdd;font-size:11px;font-weight:700;margin:0 0 12px}
.fd-root .fd-mode-card input,.fd-root .fd-mode-card select{display:block;width:100%;height:44px;border:1px solid rgba(130,184,210,.23);background:#091d31;color:#eefaff;border-radius:9px;margin-top:7px;padding:0 12px;min-width:0;appearance:auto}
.fd-root .fd-mode-card input:focus,.fd-root .fd-mode-card select:focus{border-color:#56e1d7;outline:none;box-shadow:0 0 0 2px rgba(89,224,215,.14)}
.fd-root .fd-form-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd-root .fd-code-input{letter-spacing:.22em;text-transform:uppercase;font-size:17px!important;font-weight:800!important}
.fd-root .fd-button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 16px;min-height:45px;border-radius:9px;font-size:11px;letter-spacing:.055em;font-weight:850;text-decoration:none;transition:filter .2s,transform .2s,border-color .2s;white-space:nowrap}
.fd-root .fd-button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.fd-root .fd-button-primary{background:linear-gradient(125deg,#69e8df,#48c4d9);color:#06313e;border:1px solid transparent;box-shadow:0 5px 18px rgba(38,177,184,.15)}
.fd-root .fd-mode-card>.fd-button{margin-top:auto;width:100%}
.fd-root .fd-button-secondary{color:#c4e1ec;background:rgba(9,28,45,.7);border:1px solid rgba(100,181,211,.3)}
.fd-root .fd-button-small{padding:8px 12px;min-height:34px;color:#8fe9e5;background:rgba(61,170,183,.12);border:1px solid rgba(88,225,215,.35);font-size:10px}
.fd-root .fd-app-line{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:27px 0;color:#8daec7;font-size:12px;text-align:center}
.fd-root .fd-rules{display:flex;gap:14px;max-width:880px;margin:25px auto 0;padding:18px 20px;color:#a8bfd1;background:rgba(7,26,42,.52);border:1px solid rgba(88,167,196,.15);border-radius:13px}
.fd-root .fd-rule-icon{flex:none;display:grid;place-items:center;border:1px solid #5684a0;color:#98d0df;border-radius:50%;height:23px;width:23px;font-weight:800;font-style:italic}
.fd-root .fd-rules strong{color:#e2f4fa;font-size:13px}
.fd-root .fd-rules p{font-size:12px;line-height:1.75;margin:4px 0 0}
.fd-root .fd-footer{border-top:1px solid var(--fd-line);min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#5e7c95;font-size:10px;letter-spacing:.05em}
.fd-root .fd-footer span:first-child{font-weight:850;letter-spacing:.18em;color:#7b9fb5}
.fd-root .fd-toast{position:fixed;left:50%;bottom:21px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:999999;max-width:min(90vw,560px);width:max-content;text-align:center;background:#e0fbff;color:#0b2a3c;border:1px solid #b5f8ff;box-shadow:0 10px 40px rgba(0,0,0,.5);border-radius:11px;padding:12px 19px;font-size:13px;font-weight:700;transition:opacity .2s,transform .2s}
.fd-root .fd-toast.fd-visible{opacity:1;transform:translate(-50%,0)}
.fd-root .fd-section-title{margin:0 0 26px;max-width:750px}
.fd-root .fd-section-title h1,.fd-root .fd-battle-heading h1{font-size:clamp(28px,3.4vw,44px);line-height:1.18;letter-spacing:-.036em;font-weight:850;margin:12px 0}
.fd-root .fd-section-title p,.fd-root .fd-battle-heading p{margin:0;color:#a1b7cb;font-size:14px;line-height:1.7}
.fd-root .fd-lobby-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}
.fd-root .fd-lobby-code,.fd-root .fd-lobby-crew{padding:28px}
.fd-root .fd-code{text-align:center;font-weight:850;letter-spacing:.25em;font-size:clamp(28px,5vw,51px);margin:18px 0 19px;padding:26px 5px;border:1px dashed rgba(99,229,218,.43);border-radius:13px;color:#7eefe6;background:rgba(20,82,105,.15)}
.fd-root .fd-alt{color:#8db1c5;margin:18px 0 9px}
.fd-root .fd-progress{height:6px;border-radius:12px;background:#0b253a;overflow:hidden}
.fd-root .fd-progress i{display:block;height:100%;background:linear-gradient(90deg,#47b6d7,#75f3d7);border-radius:inherit}
.fd-root .fd-button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.fd-root .fd-button-row .fd-button{flex:1;justify-content:center}
.fd-root .fd-small-note{font-size:11px;color:#779cb6;margin:14px 0 0;line-height:1.65}
.fd-root .fd-text-btn{background:none;border:0;padding:0;font-weight:750;color:#6de6e0;text-decoration:underline}
.fd-root .fd-players{display:grid;gap:12px;margin-top:22px}
.fd-root .fd-player{display:flex;align-items:center;gap:12px;border:1px solid rgba(113,173,203,.16);padding:13px;background:rgba(9,28,46,.6);border-radius:12px}
.fd-root .fd-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:11px;background:#23465b;color:#c5dfea;font-size:20px;font-weight:800}
.fd-root .fd-player strong{display:block;font-size:13px;color:#e5f6ff}
.fd-root .fd-player small{font-size:9px;color:#7f9cb1;letter-spacing:.1em;font-weight:750}
.fd-root .fd-player-dot{width:8px;height:8px;background:#617b91;border-radius:50%;margin-left:auto;flex:none}
.fd-root .fd-player.fd-ready .fd-player-dot,.fd-root .fd-player:has(.fd-avatar:not(:first-child)) .fd-player-dot{background:#5de7c3}
.fd-root .fd-setup-layout{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.95fr);gap:20px;align-items:start}
.fd-root .fd-board-card{padding:20px}
.fd-root .fd-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:19px;color:#cde7f6;font-size:11px;font-weight:850;letter-spacing:.14em}
.fd-root .fd-mini-badge{display:inline-block;padding:6px 9px;border-radius:5px;border:1px solid rgba(91,217,213,.25);background:rgba(62,154,169,.1);font-size:9px;color:#7ae4df;letter-spacing:.06em;white-space:nowrap}
.fd-root .fd-sea-grid{--fd-tile:clamp(21px,3.1vw,43px);display:grid;grid-template-columns:21px repeat(10,minmax(0,var(--fd-tile)));grid-auto-rows:var(--fd-tile);gap:3px;justify-content:center;touch-action:manipulation;max-width:100%;margin:auto;padding:0}
.fd-root .fd-axis{display:flex;align-items:center;justify-content:center;color:#88a8be;font-size:10px;font-weight:750;user-select:none}
.fd-root .fd-cell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;padding:0;border:1px solid rgba(84,150,188,.21);border-radius:5px;background:linear-gradient(145deg,#153b56,#0e2c48);color:#d5f9ff;font-size:clamp(11px,2.3vw,24px);font-weight:850;line-height:1;position:relative;transition:background .09s,border-color .09s,transform .09s;appearance:none}
.fd-root .fd-cell::before{content:"";position:absolute;inset:3px;border:1px solid rgba(115,210,227,.04);border-radius:2px;pointer-events:none}
.fd-root .fd-cell.fd-has-ship{border-color:#5bdcdd;background:linear-gradient(135deg,#227c8e,#205469);box-shadow:inset 0 0 12px rgba(77,225,222,.08)}
.fd-root .fd-ship-mark{height:28%;width:63%;border:1px solid rgba(211,251,243,.5);border-radius:5px;background:rgba(184,244,226,.25)}
.fd-root .fd-cell.fd-aim{cursor:crosshair}
.fd-root .fd-cell.fd-aim:hover,.fd-root .fd-cell.fd-aim:focus-visible{border-color:#abfff1;background:#176e80;transform:scale(1.06);z-index:2}
.fd-root .fd-cell.fd-hit{background:linear-gradient(145deg,#963d56,#58273d);border-color:#eb7292;color:#ffd5df;text-shadow:0 0 10px #ff9ea9}
.fd-root .fd-cell.fd-sunk{background:linear-gradient(145deg,#b84b62,#6b2841);border-color:#ff8d9e}
.fd-root .fd-cell.fd-miss{color:#86b0c7;background:#122c46;font-size:22px}
.fd-root .fd-cell.fd-ghost-good{background:#267e88!important;border-color:#b8fdf0!important}
.fd-root .fd-cell.fd-ghost-bad{background:#793a4a!important;border-color:#f7849c!important}
.fd-root .fd-placement-grid .fd-cell{cursor:pointer}
.fd-root .fd-board-help{color:#7f9bb3;font-size:11px;margin:17px 0 0;text-align:center;line-height:1.6}
.fd-root .fd-setup-right{display:grid;gap:17px}
.fd-root .fd-setup-controls,.fd-root .fd-setup-tip{padding:22px}
.fd-root .fd-count{font-size:11px;color:#72e6dc}
.fd-root .fd-ship-list{display:grid;gap:8px}
.fd-root .fd-ship{display:flex;align-items:center;gap:9px;text-align:left;min-height:52px;border:1px solid rgba(112,164,197,.24);border-radius:9px;background:rgba(9,27,45,.72);color:#c4d8e5;padding:7px 12px;width:100%}
.fd-root .fd-ship.fd-selected{border-color:#59dfd7;background:rgba(25,109,116,.25);color:#efffff}
.fd-root .fd-ship.fd-placed .fd-ship-state{color:#65e2c0}
.fd-root .fd-ship-icon{width:95px;color:#66d6d1;letter-spacing:.07em;font-size:19px;white-space:nowrap;flex:none}
.fd-root .fd-ship-title{flex:1;font-size:13px;font-weight:800;line-height:1.3}
.fd-root .fd-ship-title small{display:block;color:#85a3b8;font-size:9px;letter-spacing:.1em;font-weight:700;margin-top:3px}
.fd-root .fd-ship-state{font-size:19px}
.fd-root .fd-placement-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.fd-root .fd-placement-buttons .fd-button{flex:1;justify-content:center;font-size:10px;padding:8px 10px}
.fd-root .fd-full{width:100%;justify-content:center}
.fd-root .fd-setup-tip p{margin:13px 0 0;color:#a4bacd;font-size:12px;line-height:1.75}
.fd-root .fd-wait-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:30px}
.fd-root .fd-wait-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:rgba(78,223,174,.15);border:1px solid rgba(105,246,201,.5);color:#63f1c0;font-size:30px;margin-bottom:18px}
.fd-root .fd-wait-grid h2{font-size:25px;letter-spacing:-.04em;margin:0 0 10px}
.fd-root .fd-wait-grid p{color:#98b5c8;font-size:13px;line-height:1.7}
.fd-root .fd-battle-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:0 0 24px}
.fd-root .fd-battle-heading p{max-width:720px}
.fd-root .fd-turn-badge{border:1px solid rgba(111,172,199,.22);border-radius:13px;background:rgba(14,47,66,.68);padding:15px 20px;min-width:155px;text-align:center}
.fd-root .fd-turn-badge.fd-turn-active{border-color:#59dfd7;box-shadow:0 0 28px rgba(60,214,218,.08)}
.fd-root .fd-turn-badge span{display:block;color:#7fa1b9;font-size:10px;font-weight:800;letter-spacing:.13em;margin-bottom:4px}
.fd-root .fd-turn-badge strong{display:block;font-size:14px;color:#6de9e1}
.fd-root .fd-scorebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.fd-root .fd-score-item{border:1px solid rgba(125,172,200,.19);background:rgba(16,41,59,.65);border-radius:11px;padding:11px 14px}
.fd-root .fd-score-item.fd-score-turn{border-color:#50dacc;background:rgba(21,92,95,.22)}
.fd-root .fd-score-item.fd-score-out{opacity:.58}
.fd-root .fd-score-name{color:#9ec2d1;font-size:11px;display:block;font-weight:750;overflow-wrap:anywhere}
.fd-root .fd-score-item strong{display:block;font-size:25px;line-height:1.2;margin:6px 0 0}
.fd-root .fd-score-item strong small{font-size:9px;color:#89a7bc;letter-spacing:.08em}
.fd-root .fd-score-item>span:last-child{display:block;color:#7798ae;font-size:10px;margin-top:5px}
.fd-root .fd-battle-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:18px;align-items:start}
.fd-root .fd-battle-side{display:grid;gap:18px;min-width:0}
.fd-root .fd-target-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:17px}
.fd-root .fd-target-tab{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(99,167,201,.28);background:rgba(6,25,41,.7);color:#a0c6d6;border-radius:8px;padding:9px 12px;font-size:11px;font-weight:750}
.fd-root .fd-target-tab.fd-tab-active{background:linear-gradient(120deg,#22818b,#226e8f);color:#e9ffff;border-color:#60e9dc}
.fd-root .fd-board-legend{display:flex;justify-content:center;gap:17px;flex-wrap:wrap;margin-top:11px;color:#91adc2;font-size:10px}
.fd-root .fd-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;border:1px solid #58849b;background:#1a4b65}
.fd-root .fd-legend-hit{background:#b54d67;border-color:#ec869b}
.fd-root .fd-legend-miss{background:#30516c;border-color:#7dacc5}
.fd-root .fd-events{padding:20px}
.fd-root .fd-event-list{display:grid;gap:10px}
.fd-root .fd-event{display:flex;align-items:baseline;gap:11px;padding:0 0 10px;border-bottom:1px solid rgba(107,169,193,.12)}
.fd-root .fd-event:last-child{border:0;padding:0}
.fd-root .fd-event-pip{width:8px;height:8px;flex:none;border-radius:50%;background:#6c9ab5}
.fd-root .fd-event-pip.fd-event-hit{background:#fd738a;box-shadow:0 0 10px rgba(245,102,130,.4)}
.fd-root .fd-event p{color:#a4bdcf;margin:0;font-size:11px}
.fd-root .fd-event strong{color:#e0f1f7}
.fd-root .fd-event small{display:block;color:#7aa3b7;letter-spacing:.07em;font-size:9px;font-weight:800}
.fd-root .fd-after-battle{margin:22px 0 0;padding:20px;border:1px solid rgba(103,222,202,.35);border-radius:15px;background:rgba(20,85,95,.18);display:flex;justify-content:space-between;align-items:center;gap:20px}
.fd-root .fd-after-battle b{font-size:20px;letter-spacing:-.03em}
.fd-root .fd-after-battle p{font-size:12px;color:#9eb7c8;margin:7px 0 0}
.fd-root .fd-loading{text-align:center;max-width:480px;margin:60px auto;padding:40px}
.fd-root .fd-loading h2{font-size:22px;margin:20px 0 8px}
.fd-root .fd-loading p{color:#9bb8ca}
.fd-root .fd-spinner{display:inline-block;height:38px;width:38px;border-radius:50%;border:3px solid rgba(107,224,218,.2);border-top-color:#75ede3;animation:fd-spin 1s linear infinite}
@keyframes fd-spin{to{transform:rotate(360deg)}}
@media(min-width:1200px){.fd-root .fd-enemy-panel .fd-sea-grid{--fd-tile:44px}.fd-root .fd-own-panel .fd-sea-grid{--fd-tile:34px}}
@media(max-width:1000px){.fd-root .fd-home-grid{gap:12px}.fd-root .fd-mode-card{padding:20px 15px}.fd-root .fd-form-pair{grid-template-columns:1fr}.fd-root .fd-mode-card>p{min-height:92px}.fd-root .fd-setup-layout{grid-template-columns:minmax(0,1fr) minmax(270px,.85fr)}.fd-root .fd-sea-grid{--fd-tile:clamp(22px,3.8vw,36px)}.fd-root .fd-ship-icon{width:74px;font-size:15px}.fd-root .fd-battle-layout{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}.fd-root .fd-own-panel .fd-sea-grid{--fd-tile:clamp(22px,3.6vw,34px)}}
@media(max-width:730px){.fd-root .fd-shell{padding:0 13px}.fd-root .fd-header{min-height:75px}.fd-root .fd-brand strong{font-size:15px;letter-spacing:.08em}.fd-root .fd-brand small{font-size:7px}.fd-root .fd-brand-icon{height:39px;width:39px;border-radius:10px}.fd-root .fd-brand-icon svg{height:25px;width:25px}.fd-root .fd-connected{display:none}.fd-root .fd-main{padding-top:29px}.fd-root .fd-home-grid{grid-template-columns:1fr}.fd-root .fd-hero{margin-bottom:28px}.fd-root .fd-hero h1{font-size:47px}.fd-root .fd-mode-card{padding:22px}.fd-root .fd-mode-card>p{min-height:0}.fd-root .fd-form-pair{grid-template-columns:1fr 1fr}.fd-root .fd-lobby-grid,.fd-root .fd-setup-layout,.fd-root .fd-battle-layout,.fd-root .fd-wait-grid{grid-template-columns:1fr}.fd-root .fd-sea-grid{--fd-tile:min(8vw,43px);gap:2px}.fd-root .fd-lobby-code,.fd-root .fd-lobby-crew{padding:20px}.fd-root .fd-scorebar{grid-template-columns:repeat(2,minmax(0,1fr))}.fd-root .fd-battle-heading{align-items:flex-start}.fd-root .fd-turn-badge{min-width:115px;padding:13px 9px}.fd-root .fd-own-panel .fd-sea-grid{--fd-tile:min(7.7vw,42px)}.fd-root .fd-setup-controls,.fd-root .fd-setup-tip{padding:19px}.fd-root .fd-battle-side{display:flex;flex-direction:column}.fd-root .fd-battle-side>*{width:100%}}
@media(max-width:400px){.fd-root .fd-shell{padding:0 9px}.fd-root .fd-brand{gap:6px}.fd-root .fd-brand strong{font-size:13px}.fd-root .fd-brand small{font-size:6px;letter-spacing:.05em}.fd-root .fd-header-actions{gap:5px}.fd-root .fd-header-back span{display:none}.fd-root .fd-header-back{padding:0 10px}.fd-root .fd-hero h1{font-size:39px}.fd-root .fd-sea-grid{--fd-tile:7.45vw;gap:2px;grid-template-columns:17px repeat(10,minmax(0,var(--fd-tile)))}.fd-root .fd-own-panel .fd-sea-grid{--fd-tile:7.45vw}.fd-root .fd-board-card{padding:13px 9px}.fd-root .fd-axis{font-size:8px}.fd-root .fd-cell{border-radius:3px}.fd-root .fd-battle-heading{display:block}.fd-root .fd-turn-badge{text-align:left;margin-top:16px;max-width:250px}.fd-root .fd-footer{font-size:8px}.fd-root .fd-ship-icon{width:78px}.fd-root .fd-form-pair{gap:7px}.fd-root .fd-placement-buttons .fd-button{font-size:9px;padding:8px 7px}}
@media(prefers-reduced-motion:reduce){.fd-root *, .fd-root *::before,.fd-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}