:root{color-scheme:dark;--bg:#080f20;--surface:#0e1a2c;--surface2:#14233a;--stroke:#283b56;--txt:#f4f5ff;--muted:#91a2ba;--gold:#e6bc65;--yellow:#ffe39d;--cyan:#60dce9;--red:#f15568;--blue:#55aaff;--size:600px}
*{box-sizing:border-box}body{margin:0;background:#080f20;color:var(--txt);font-family:'Noto Sans JP','Yu Gothic',Meiryo,system-ui,sans-serif;min-height:100vh}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}a{text-decoration:none;color:inherit}.hidden,[hidden]{display:none!important}.background-stars{position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 46% at 48% 0%,#1b3458 0%,transparent 77%),radial-gradient(circle at 15% 47%,#181b43 0%,transparent 45%),radial-gradient(circle at 90% 75%,#133249 0%,transparent 40%),#080f20}.background-stars:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffffaa 0.65px,transparent 1.1px);background-size:31px 37px;opacity:.23}
.app{max-width:1250px;margin:0 auto;padding:0 26px 45px}.global-header{height:75px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #ffffff14}.brand{display:flex;gap:10px;align-items:center}.brand-mark{font-size:36px;color:var(--gold);line-height:1;text-shadow:0 0 20px #e6bc6570}.brand strong{display:block;font-size:21px;letter-spacing:.15em;line-height:1.24}.brand small{display:block;font-size:9px;color:var(--muted);letter-spacing:.26em;margin-top:3px}.header-version{font-size:11px;border:1px solid #7d704c;padding:5px 9px;color:#dfcda1;letter-spacing:.1em;border-radius:5px;margin-left:auto}.icon-button{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#ffffff0b;border:1px solid #ffffff36;color:#dfefff;font-weight:800;font-size:17px}
.home-screen{max-width:820px;margin:23px auto 0}.hero-panel{border:1px solid #465576;min-height:360px;position:relative;overflow:hidden;text-align:center;padding:38px 18px 24px;background:radial-gradient(circle at 50% 65%,#274d6f66 0%,transparent 40%),linear-gradient(160deg,#142846,#0a1529 60%,#192445);border-radius:18px;box-shadow:0 24px 75px #0005}.hero-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(130deg,transparent 20%,#ffffff09 45%,transparent 53%);pointer-events:none}.eyebrow{color:#dbc58d;font-size:11px;letter-spacing:.19em;font-weight:800}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#eac477;box-shadow:0 0 12px #eac477;display:inline-block;margin-right:5px}.hero-symbol{width:138px;height:112px;position:relative;margin:11px auto 8px;display:grid;place-items:center}.hero-symbol .orbit{position:absolute;transform:rotate(-16deg);border:2px solid #a8c7eb78;border-radius:50%;box-shadow:0 0 18px #649dce30}.orbit-one{width:122px;height:76px}.orbit-two{width:99px;height:58px;transform:rotate(42deg)!important;border-color:#dbbd70a3!important}.orbit-three{width:73px;height:49px;transform:rotate(-54deg)!important;border-color:#51bcdfaa!important}.core-star{font-size:48px;color:#ffe9a4;text-shadow:0 0 25px #d7aa45}.hero-panel h1{font-weight:900;font-size:clamp(46px,8vw,70px);line-height:1.17;letter-spacing:.17em;margin:0;color:#f8f7f1;text-shadow:0 3px 15px #040915}.hero-panel h1 span{color:#eac67f}.hero-en{font-size:13px;letter-spacing:.5em;color:#edcf91;margin:8px 0}.hero-sub{font-size:13px;letter-spacing:.08em;color:#d3dbee;margin:16px 0}.hero-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.hero-chips span{font-size:10px;color:#c3d6e9;border:1px solid #7892b45f;border-radius:20px;padding:5px 11px;background:#15273d99}.mode-heading{display:flex;justify-content:space-between;align-items:center;margin-top:30px}.mode-heading h2{font-size:18px;letter-spacing:.04em;margin:0 0 14px}.mode-heading p{font-size:11px;color:var(--muted);margin:0 0 14px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{border:1px solid #39506f;border-radius:13px;min-height:116px;padding:22px 20px;text-align:left;background:linear-gradient(130deg,#162c46,#0f1b2f);color:var(--txt);display:flex;align-items:center;gap:15px;transition:transform .15s,border .15s}.mode-card:hover{transform:translateY(-2px);border-color:var(--gold)}.mode-icon{width:52px;height:52px;border-radius:13px;background:#ddba6440;color:#f6d48e;display:grid;place-items:center;font-size:30px;flex:none}.mode-icon.duo{color:#8fdafe;background:#488abe35}.mode-copy{min-width:0;flex:1}.mode-copy strong{font-size:19px;display:block}.mode-copy small{font-size:11px;color:#9eafc7;margin-top:6px;display:block}.mode-arr{font-size:25px;color:#a3b1c4}.resume-button{display:flex;align-items:center;gap:12px;color:#e8f3ff;background:#273d51;border:1px solid #526477;border-radius:12px;width:100%;padding:13px 22px;margin-top:12px;text-align:left}.resume-button>span:first-child{font-size:25px;color:#d7ba80}.resume-button>span:last-child{margin-left:auto;font-size:25px}.resume-button strong{font-size:14px;display:block}.resume-button small{font-size:10px;color:#a1bdcc;display:block}.home-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0;color:#718299;font-size:10px;letter-spacing:.14em}.ghost-button,.toolbar-button{border:1px solid #4c5d76;color:#d0ddec;background:#17263b;border-radius:9px;padding:9px 14px;font-size:12px}
.game-toolbar{display:flex;align-items:center;justify-content:space-between;margin:18px 0 15px;gap:6px}.game-mode-title{font-size:12px;letter-spacing:.13em;color:#b4cde0}.game-layout{display:grid;grid-template-columns:minmax(0,690px) minmax(280px,1fr);gap:24px;align-items:start}.game-left{max-width:690px;min-width:0}.player-banner{padding:13px 19px;display:flex;align-items:center;gap:11px;border:1px solid #5076a1;border-radius:10px;background:linear-gradient(110deg,#152c46,#102138);margin-bottom:10px}.player-banner.red{border-color:#985065;background:linear-gradient(110deg,#38202d,#1f1a2c);margin-top:10px;margin-bottom:0}.player-banner.active{outline:2px solid var(--gold);box-shadow:0 0 16px #dfbb6640}.player-logo{flex:none;font-size:24px;display:grid;place-items:center;width:40px;height:40px;border-radius:10px}.blue-logo{background:#326db87a;color:#a8d6ff}.red-logo{background:#b438527a;color:#ff9eac}.player-banner>div:nth-child(2){flex:1}.player-banner>div:nth-child(2)>span{display:block;font-size:10px;color:#9ab5cb}.player-banner strong{font-size:17px;display:block}.mini-english{font-size:10px;color:#aac3e4;font-weight:500;letter-spacing:.1em}.banner-stat{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.banner-stat span{font-size:11px;font-weight:600;color:#9eafc5}.board-holder{background:#0e1b2e;border:1px solid #a38655;border-radius:11px;padding:12px 6px 11px;box-shadow:inset 0 0 25px #000a,0 12px 35px #0008}.board-top-cols,.board-bottom-cols{display:grid;grid-template-columns:20px repeat(7,minmax(0,1fr)) 20px;padding:0 6px;max-width:calc(var(--size) + 64px);margin:auto;text-align:center;color:#ccbd96;font-weight:800;font-size:12px;line-height:22px}.board-bottom-cols{transform:rotate(0deg)}.board-middle{display:flex;align-items:stretch;justify-content:center}.board-row-nums{width:20px;flex:none;display:grid;grid-template-rows:repeat(7,1fr);text-align:center;place-items:center;color:#ccbd96;font-size:12px;font-weight:800}.board-shell{flex:1;max-width:var(--size);aspect-ratio:1/1;position:relative;box-shadow:0 0 0 2px #af925c}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr)}.cell{min-width:0;min-height:0;padding:0;border:1px solid #607e96a1;position:relative;display:grid;place-items:center;overflow:hidden;background:#193453;color:#ffe4a1;touch-action:manipulation}.cell:nth-child(odd){filter:brightness(1.05)}.cell.middle{background:#1e5669;border-color:#75a9afa1}.cell.inner{background:#34495b;border-color:#b2a974a1}.cell.sun{background:radial-gradient(circle,#a56526 0%,#562f2f 55%,#261c2e);border-color:#e5b064aa}.cell.sun:after{content:"☀";position:absolute;font-size:clamp(25px,4.3vw,57px);color:#ffd48c;text-shadow:0 0 20px #ffd37c90}.cell.selected{background:#346458;box-shadow:inset 0 0 0 4px #e9d186!important;z-index:1}.cell.target-move:before,.cell.target-jump:before,.cell.target-force:before{position:absolute;content:"";width:33%;height:33%;border-radius:50%;background:#8ff2a67e;box-shadow:0 0 14px #8ff2a6aa;z-index:3}.cell.target-jump:before{background:#78e7f7a8}.cell.target-force:before{background:transparent;width:76%;height:76%;border:4px solid #f8c070;box-shadow:0 0 15px #d5ac70}.cell.hint-square{outline:3px solid #fce27e;outline-offset:-3px;z-index:2}.core{font-size:clamp(19px,3.6vw,36px);position:absolute;z-index:1;line-height:1;filter:drop-shadow(0 0 5px currentColor);pointer-events:none}.core.one{color:#f4c46b}.core.two{color:#cfa2fa}.ship{width:66%;height:66%;position:absolute;z-index:5;display:grid;place-items:center;filter:drop-shadow(0 2px 3px #0008)}.ship>svg{width:100%;height:100%;overflow:visible}.ship.r{--ship:#fc6677;--trim:#ffd8cd}.ship.b{--ship:#6bb7ff;--trim:#e2f7ff}.ship svg .body{fill:var(--ship);stroke:var(--trim);stroke-width:2.5}.ship svg .detail{fill:#fff4bb;opacity:.86}.ship.r svg{transform:rotate(180deg)}.board-links{position:absolute;pointer-events:none;inset:0;width:100%;height:100%;z-index:2;opacity:.9}.board-legend{display:flex;justify-content:center;gap:17px;flex-wrap:wrap;margin:11px 0 0;color:#aabdd1;font-size:11px}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}.legend-dot.gold{background:#e5b96d}.legend-dot.violet{background:#cda5ff}.legend-dot.cyan{background:#80e7f6}
.game-right{min-width:0;display:flex;flex-direction:column;gap:12px}.panel{background:linear-gradient(135deg,#132338,#0c1729);border:1px solid #344c6a;border-radius:12px;padding:17px}.panel-label{font-size:10px;color:#cbbd97;letter-spacing:.18em}.turn-line{display:flex;align-items:center;gap:12px;margin:12px 0 17px}.turn-symbol{font-size:25px}.turn-line strong{display:block;font-size:19px}.turn-line span:not(.turn-symbol){display:block;font-size:11px;color:#9fb4c7;margin-top:2px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-block{background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;padding:10px}.stat-block>span{font-size:10px;color:#92aac2;display:block}.stat-block strong{display:block;margin-top:4px;font-weight:800;font-size:21px}.stat-block small{font-size:11px;color:#96a6bf}.win-progress{color:#d0dbea;background:#22385080;padding:9px 10px;margin-top:10px;font-size:11px;border-radius:7px}.section-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:800;margin-bottom:12px}.section-title small,.section-title>span:last-child{font-size:10px;font-weight:500;color:#96acc3}.action-help{font-size:12px;line-height:1.8;color:#b6c9da;min-height:42px}.action-button-row{display:flex;gap:9px}.major-button{background:#b89559;color:#1a2334;border:1px solid #f4d79c;border-radius:10px;display:flex;align-items:center;text-align:left;gap:10px;padding:11px 16px;flex:1}.action-glyph{font-size:29px;line-height:1}.major-button strong{display:block;font-size:15px}.major-button small{display:block;font-size:10px}.minor-button{border:1px solid #546e88;background:#21364e;border-radius:9px;color:#d6e8f1;min-width:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;font-size:12px}.minor-button span{font-size:20px;color:#d3ba75}.rotate-panel{margin-top:14px;padding:13px;border:1px solid #54769c;border-radius:10px;background:#1b3149}.close-inline{font-size:18px;color:white;background:none;border:0}.ring-select,.direction-select{display:flex;gap:7px}.ring-select button,.direction-select button{flex:1;min-width:0;background:#0e2238;color:#cfe6f1;border:1px solid #4b6580;border-radius:8px;font-size:12px;padding:10px 4px}.ring-select button.active{background:#b69a60;color:#121926;border-color:#f3d9a2;font-weight:900}.direction-select{margin-top:9px}.direction-select button{background:#1d4059}.direction-select button:disabled{opacity:.35}.move-list{max-height:190px;min-height:98px;overflow:auto;scrollbar-color:#4f6684 transparent;scrollbar-width:thin}.move-item{display:flex;width:100%;gap:8px;text-align:left;border:0;border-bottom:1px solid #ffffff12;background:transparent;color:#d0dae4;padding:9px 4px;font-size:11px}.move-item:hover,.move-item.active{background:#293e57}.move-item .num{color:#8b9eb6;min-width:23px}.move-item .side-red{color:#f29a9e}.move-item .side-blue{color:#92c8ff}.empty-record{display:block;color:#819ab2;text-align:center;font-size:11px;padding:27px}.replay-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.replay-controls button{border:1px solid #3e5a77;background:#182b42;border-radius:7px;color:#c6d8e9;padding:8px}.utility-row{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.utility-row button{background:#18263a;border:1px solid #3d5670;border-radius:8px;padding:10px 6px;font-size:12px;color:#d2ddeb}.utility-row button:hover{border-color:#aebfce}
.modal{position:fixed;border:none;border-radius:16px;padding:0;max-width:min(480px,calc(100vw - 26px));width:100%;background:#112139;color:#ecf5ff;box-shadow:0 15px 80px #000c,0 0 0 1px #536c89}.modal::backdrop{background:#020914cf;backdrop-filter:blur(5px)}.modal-inner{padding:26px}.modal h2{font-size:23px;letter-spacing:.07em;margin:9px 0}.modal p{font-size:12px;line-height:1.8;color:#b7c9dc}.field-label{font-weight:800;font-size:12px;margin:16px 0 10px}.choice-group{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.choice-group:has([data-side]){grid-template-columns:repeat(2,1fr)}.choice-group button{background:#18324e;color:#c5d8e7;border:1px solid #466583;padding:12px 5px;border-radius:8px;font-size:13px}.choice-group button.active{background:#bca067;border-color:#fbe0a1;color:#192130;font-weight:800}.setup-note{padding:11px;background:#1d3349;color:#aebfd4;font-size:11px;border-radius:8px;margin-top:18px;line-height:1.75}.modal-buttons{display:flex;gap:10px;margin-top:22px}.button-subtle,.button-primary{flex:1;padding:13px 10px;border-radius:9px;border:1px solid #506985;background:#20334a;color:#deebf4;font-weight:700;font-size:13px}.button-primary{background:linear-gradient(120deg,#e3c17c,#b9975b);color:#19212b;border:1px solid #e8d094}.full-button{width:100%;margin-top:15px}.swap-options{display:flex;flex-direction:column;gap:8px;margin:15px 0}.swap-options button{background:#213957;text-align:left;color:#e9f2fc;border:1px solid #5a7590;border-radius:9px;padding:13px 15px}.swap-options strong,.swap-options small{display:block}.swap-options small{margin-top:6px;color:#b9ccdd;font-size:11px}.modal-footnote{font-size:10px!important}.modal-heading{display:flex;justify-content:space-between;align-items:center}.rules-modal{max-width:min(650px,calc(100vw - 18px));max-height:90vh}.rules-content{max-height:60vh;overflow:auto;padding-right:5px}.rules-content h3{font-size:14px;color:#ebd39d;margin:17px 0 8px}.rules-content p,.rules-content li{font-size:12px;line-height:1.85;color:#c1d1e3}.rules-content ol{padding-left:19px}.footnote{font-size:11px!important;color:#91a5bd!important}.result-symbol{text-align:center;font-size:61px;color:#eaca81;text-shadow:0 0 30px #d5aa6490}.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:#e9d19e;color:#20232e;border-radius:9px;padding:11px 17px;box-shadow:0 6px 26px #0008;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:all .2s;z-index:20;width:max-content;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:930px){.app{padding:0 14px 30px}.game-layout{grid-template-columns:minmax(0,1fr);gap:14px}.game-left{width:100%;max-width:min(690px,100%);margin:0 auto}.game-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.utility-row{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}}
@media(max-width:580px){.app{padding:0 9px 25px}.global-header{height:60px;padding:0 5px}.brand strong{font-size:17px}.brand small{font-size:8px}.brand-mark{font-size:28px}.hero-panel{min-height:330px;padding-top:26px}.hero-panel h1{font-size:45px}.hero-en{font-size:10px;letter-spacing:.34em}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:90px;padding:17px}.mode-copy strong{font-size:16px}.home-bottom>span{font-size:8px}.game-toolbar{margin:9px 2px}.toolbar-button{font-size:11px;padding:8px}.game-mode-title{font-size:10px}.game-right{display:flex;gap:9px}.player-banner{padding:9px 11px;gap:7px}.player-logo{width:33px;height:33px;font-size:19px}.player-banner strong{font-size:13px}.mini-english{font-size:8px}.banner-stat{font-size:21px}.banner-stat span{font-size:9px}.board-holder{padding:7px 3px;border-radius:6px}.board-top-cols,.board-bottom-cols{font-size:10px;line-height:16px;padding:0}.board-row-nums{font-size:10px;width:16px}.board-top-cols,.board-bottom-cols{grid-template-columns:16px repeat(7,minmax(0,1fr)) 16px}.board-shell{min-width:0}.board{border-radius:0}.cell{border-width:.5px}.ship{width:74%;height:74%}.core{font-size:clamp(14px,6.1vw,28px)}.board-legend{font-size:10px;gap:10px}.now-panel{padding:12px}.turn-line{margin:8px 0}.panel{padding:13px}.mode-heading{margin-top:24px}.utility-row{grid-template-columns:repeat(4,1fr);gap:5px}.utility-row button{font-size:11px;padding:9px 1px}.modal-inner{padding:21px}.modal h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Ver.2.3 training and player-relative perspective */
.game-left{display:flex;flex-direction:column}
#blue-banner{order:1}#red-banner{order:3}.board-holder{order:2}.board-legend{order:4}
#game-screen[data-bottom="B"] #red-banner{order:1}
#game-screen[data-bottom="B"] #blue-banner{order:3}
#game-screen[data-bottom="R"] .ship.r svg{transform:none}
#game-screen[data-bottom="R"] .ship.b svg{transform:rotate(180deg)}
.orientation-label{font-size:11px;color:#d6e7f8;background:#203754;border:1px solid #3b5f85;padding:7px 9px;border-radius:8px;text-align:center;white-space:nowrap}
.practice-card{grid-column:1/-1;border-color:#8b764c;background:linear-gradient(112deg,#253752,#28344c,#423b30)}
.practice-card .mode-icon{color:#efd08a}
.training-option{display:flex;align-items:center;gap:8px;color:#dceaf6;background:#192c43;padding:12px;border-radius:9px;font-size:12px;margin-top:16px;cursor:pointer}
.training-option input{width:18px;height:18px;accent-color:#e9c67e}
.coach-panel{border-color:#687250;background:linear-gradient(130deg,#14283d,#1b2637)}
.coach-toggle{background:#24384d;border:1px solid #7c875a;border-radius:8px;color:#e9d498;font-size:11px;padding:6px 9px}
.coach-label{font-size:11px;font-weight:800;color:#f5d99b;letter-spacing:.08em}
.coach-lesson{font-size:12px;line-height:1.7;color:#d9e4f0;margin:5px 0 12px}
.coach-advice{padding:11px;border-radius:9px;background:#163e48;border:1px solid #3d7d85}
.coach-advice>span{font-size:10px;color:#a9f0eb;font-weight:800}
.coach-advice p{margin:5px 0 0;line-height:1.6;font-size:12px;color:#e0eff0}
.coach-feedback{font-size:11px;line-height:1.7;border-left:3px solid #dfbe75;padding:9px 10px;margin:10px 0;background:#ffffff08;color:#e4d8b9}
.lesson-progress{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.lesson-progress span{background:#1b2a42;color:#8397ae;border-radius:8px;border:1px solid #3c5674;padding:5px 8px;font-size:10px}
.lesson-progress span.learned{background:#274e43;color:#b9eac6;border-color:#658f6c}
.coach-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coach-actions button{background:#243b58;border:1px solid #52728e;color:#e3f1f9;border-radius:8px;padding:9px;font-size:11px}
.coach-analysis,.result-analysis{margin-top:12px;padding:12px;background:#172a3e;border:1px solid #43617c;border-radius:9px;font-size:12px;line-height:1.65}
.coach-analysis strong,.result-analysis strong{color:#f2d08e}
.coach-analysis p,.result-analysis p{font-size:11px;margin:5px 0;color:#d6e5f5}
.strategy-stats{font-size:11px;margin:5px 0;color:#b0d3e8}
.coach-analysis small,.result-analysis small{display:block;font-size:10px;color:#8ca6bf}
@media(max-width:580px){.orientation-label{font-size:9px;white-space:normal;padding:5px;max-width:110px}.game-toolbar{gap:4px}.game-mode-title{display:none}}

.coach-feedback{white-space:pre-line}