/* Aircraft Hunt / Rivellune soft moonlight visual system — original CSS */
:root{
 color-scheme:light;
 --bg:#faf7fb;--surface:#ffffffdd;--surface-solid:#fff;
 --ink:#564667;--soft:#8b7d98;--border:#e2d5e9;
 --lav:#bd9dd0;--mint:#80bfa8;--mint-ink:#366b58;
 --peach:#f0c6bd;--shadow:0 15px 40px rgba(90,67,111,.08);
 --cell:clamp(31px,7.9vw,39px);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{position:relative;min-height:100vh;overflow-x:hidden;margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 ui-sans-serif,system-ui,-apple-system,"Noto Sans SC","Microsoft YaHei",sans-serif}
button,select{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,select:focus-visible,summary:focus-visible,.grid-scroll:focus-visible{outline:3px solid #85cbae;outline-offset:3px}
button:disabled{cursor:not-allowed}
a{color:inherit;text-decoration:none}
h1,h2,p{margin-top:0}
h1{font-size:clamp(40px,6.5vw,66px);line-height:1.08;letter-spacing:-.055em}
h2{font-size:19px;line-height:1.36;letter-spacing:-.025em;margin-bottom:14px}
.decor{position:fixed;z-index:-1;filter:blur(5px);pointer-events:none}
.decor-one{width:600px;height:470px;border-radius:50%;background:radial-gradient(circle,#ead8f1 0%,transparent 71%);top:-180px;left:-120px}
.decor-two{width:600px;height:450px;border-radius:50%;background:radial-gradient(circle,#e0f4eb 0%,transparent 71%);right:-150px;top:130px}
.page{max-width:1240px;margin:auto;padding:22px clamp(12px,3vw,35px) 45px}
.topbar{height:60px;display:flex;gap:10px;justify-content:space-between;align-items:center;border:1px solid rgba(227,212,235,.8);background:rgba(255,255,255,.56);backdrop-filter:blur(13px);padding:0 19px;border-radius:18px}
.brand{font-weight:850;letter-spacing:.04em;font-size:17px;color:#86699a;white-space:nowrap}
.brand-mark{font-size:23px;color:#81bba6;margin-right:6px}
.brand-sub{font-size:10px;color:var(--soft);font-weight:850;margin-left:5px}
.theme-button{background:#fff9ff;border:1px solid #dfd0ea;border-radius:12px;color:#816994;padding:8px 13px;font-weight:800;font-size:12px}
.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);align-items:center;gap:18px;padding:32px 16px 23px}
.hero-copy{min-width:0}
.eyebrow,.card-kicker{font-weight:850;letter-spacing:.15em;font-size:10px;color:#8baf9e;display:block;margin-bottom:9px}
.hero h1{margin:0;color:#806593}
.hero h1 em{font-style:normal;color:#5f9e89}
.hero .han{display:block;font-size:.46em;letter-spacing:.12em;margin-top:10px;color:#866b98}
.hero p{font-size:15px;color:var(--soft);max-width:530px;margin:19px 0}
.subtle-label{display:inline-block;padding:6px 11px;border:1px solid #dcd1e5;border-radius:999px;background:#ffffffac;font-size:12px;color:#82728e}
.hero-art{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0}
.hero-art svg{width:min(100%,265px);height:auto;position:relative;z-index:1;filter:drop-shadow(0 10px 12px #8f76ad24)}
.art-halo{position:absolute;width:200px;height:160px;top:0;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#e6d7f4 25%,transparent 70%)}
.art-caption{font-size:10px;letter-spacing:.15em;color:#ae99ba;position:relative;z-index:2}
.layout{display:grid;grid-template-columns:minmax(250px,305px) minmax(0,1fr);align-items:start;gap:16px}
.sidebar,.game-section{min-width:0}
.card{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:21px;box-shadow:var(--shadow);margin:0 0 15px;backdrop-filter:blur(8px)}
.card h2{color:#735e84}
label{display:block;font-weight:800;font-size:13px;margin:17px 0 7px}
select{display:block;background:#faf6fd;color:var(--ink);border:1px solid #d9c9e5;border-radius:12px;width:100%;padding:11px 12px;min-height:49px;font-size:14px}
.field-help{font-size:12px;color:var(--soft);line-height:1.7;margin:10px 0}
.primary-btn{display:flex;justify-content:center;align-items:center;gap:9px;background:linear-gradient(115deg,#a8e1c3,#d7f2e3);color:#315d48;border:1.5px solid #8cc9aa;border-radius:13px;padding:13px 14px;min-height:51px;width:100%;font-weight:900;font-size:15px;box-shadow:0 5px 13px #70a78c20}
.primary-btn:hover{filter:brightness(1.03)}
.primary-btn:active{transform:translateY(1px)}
.stat-pair{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e9dfed;font-size:13px}
.stat-pair strong{font-size:18px;color:#746185;font-variant-numeric:tabular-nums}
.stat-pair .stat-strong{color:#47876c;font-size:23px}
.progress-track{height:11px;border:1px solid #c8dbce;background:#eff5ef;border-radius:50px;overflow:hidden;margin:20px 0 14px}
.progress-track span{display:block;width:0;height:100%;border-radius:50px;background:linear-gradient(90deg,#89d7b1,#b9dfce);transition:width .35s}
.legend-row{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap;font-size:11px;color:var(--soft)}
.legend-cell{display:inline-grid;place-items:center;height:24px;width:24px;border-radius:7px;font-weight:900;font-size:15px}
.legend-cell.miss{background:#f0edf3;color:#8f85a0}.legend-cell.hit{background:#f8e1db;color:#bd7d67}
.legend-cell.head{background:#d6f4e4;color:#387d60}.legend-cell.marked{background:#f6ebcd;color:#987d49}
.rules-card{padding:0}
.rules-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 21px;font-size:14px;font-weight:850;color:#745e84;cursor:pointer;list-style:none}
.rules-card summary::-webkit-details-marker{display:none}
.summary-symbol{font-size:22px;color:#91bcab}
.rules-card[open] .summary-symbol{transform:rotate(45deg)}
.rules-text{padding:0 22px 20px;font-size:13px;color:var(--soft)}
.rules-text p{margin:8px 0}
.board-card{padding:clamp(14px,2.4vw,24px)}
.board-intro{display:flex;align-items:center;justify-content:space-between;gap:12px}
.board-intro h2{font-size:clamp(18px,3vw,23px);margin:0}
.size-chip{white-space:nowrap;padding:7px 11px;border:1px solid #d9c7e7;border-radius:10px;background:#faf3ff;color:#806991;font-size:12px;font-weight:850}
.status{padding:12px 15px;border:1px solid #e5d9eb;background:linear-gradient(110deg,#fbf5fc,#f1faf5);border-radius:13px;margin:15px 0;color:#776787;font-size:13px;min-height:48px}
.status.win{color:#3e7960;background:#e5f8ee;border-color:#a2d4b8}
.toolbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tool{border:1px solid #d8cae2;background:#f7f1fa;color:#806b91;border-radius:11px;padding:9px 15px;font-weight:850;font-size:13px;min-height:41px}
.tool.active{background:#e0f5e9;border:1.5px solid #9cceb4;color:#3e795f}
.tool-help{font-size:11px;color:var(--soft);margin-left:auto}
.grid-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:0 3px 16px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#d2bedf #f3eaf6}
.air-grid{display:grid;grid-template-columns:repeat(var(--n-plus),var(--cell));grid-auto-rows:var(--cell);width:max-content;min-width:0;gap:2px}
.grid-axis{font-size:11px;color:#927d9c;display:grid;place-items:center;font-weight:850;user-select:none}
.grid-axis.corner{font-size:14px;color:#b8a2c7}
.grid-cell{min-height:0;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid #dad0e7;background:linear-gradient(145deg,#f6f0fa,#ecf5f2);color:#766887;font-size:clamp(13px,3.5vw,18px);font-weight:900;transition:background .15s,border .15s,transform .15s;position:relative}
.grid-cell:not(:disabled):hover{border-color:#85bfa7;background:#dff1e7;transform:translateY(-1px)}
.grid-cell.miss{background:#f0edf2;color:#8d8794;border-color:#e1dce7}
.grid-cell.hit{background:#fae6df;color:#bb7a69;border-color:#eac0b7}
.grid-cell.head{background:#d6f3e1;border-color:#79c3a1;color:#327758;animation:headPop .3s ease-out}
.grid-cell.marked{background:#fbefd4;border:1.5px dashed #d6ba76;color:#987a37}
.grid-cell.revealed{background:#f4e5f7;border-color:#caaed7;color:#8768a2}
.grid-cell.revealed-head{background:#ddf0e8;border-color:#91c9a5;color:#558773}
.grid-cell:disabled{opacity:1}
.grid-cell.miss:disabled,.grid-cell.hit:disabled,.grid-cell.head:disabled{cursor:default}
@keyframes headPop{0%{transform:scale(.78)}70%{transform:scale(1.13)}100%{transform:scale(1)}}
.win-panel{margin:18px 0 2px;text-align:center;background:linear-gradient(125deg,#e8f7ee,#f1e6fb);border:2px solid #9dd4b8;padding:25px 18px;border-radius:17px}
.win-panel[hidden]{display:none}
.win-panel h2{color:#457a65;font-size:22px;margin:8px 0}
.win-panel p{font-size:13px;color:#668474}
.win-panel .primary-btn{max-width:260px;margin:15px auto 0}
.celebrate{color:#b58bc7;font-size:20px;letter-spacing:.3em}
.log-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.log-title h2{margin:0}
.shot-log{padding:0;list-style:none;display:flex;gap:7px;flex-wrap:wrap;margin:15px 0 0}
.shot-log li{border:1px solid #e2d7e9;border-radius:10px;padding:7px 10px;background:#faf7fc;font-size:12px;color:#82748d}
.footer-note{text-align:center;color:#a696ae;font-size:12px;letter-spacing:.025em;margin:35px 0 0}
@media(max-width:920px){
 .layout{grid-template-columns:minmax(0,1fr)}
 .sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
 .sidebar .card{margin:0}
 .sidebar .rules-card{grid-column:1/-1}
 .hero{padding-left:7px;padding-right:7px}
}
@media(max-width:600px){
 :root{--cell:29px}
 .page{padding:10px 10px 32px}
 .topbar{padding:0 12px;height:54px}
 .hero{padding:19px 8px 16px;grid-template-columns:1fr auto;gap:6px}
 .hero .eyebrow{font-size:9px}
 .hero-art{width:112px;align-self:center}
 .hero-art .art-halo{width:110px;height:95px;max-width:100%}
 .art-caption{display:none}
 .hero h1{font-size:clamp(31px,8vw,42px)}
 .hero .han{margin-top:8px}
 .hero p{font-size:12px;line-height:1.6;margin:12px 0;max-width:260px}
 .subtle-label{font-size:10px}
 .sidebar{grid-template-columns:1fr;gap:11px}
 .sidebar .rules-card{grid-column:auto}
 .card{margin-bottom:11px}
 .board-card{padding:12px 10px}
 .board-intro{align-items:center}
 .board-intro h2{font-size:17px}
 .tool-help{width:100%;margin-left:0}
 .status{padding:10px 11px;font-size:12px}
 .grid-cell{border-radius:6px}
 .air-grid{gap:2px}
}
body[data-theme="dark"]{
 color-scheme:dark;--bg:#1d1c2e;--surface:#2a273bf0;--surface-solid:#302b41;
 --ink:#ede5f2;--soft:#beb0c9;--border:#5f526f;--mint:#97d8bd;
 background:radial-gradient(ellipse 800px 560px at 25% 0%,#352949,#1c1b2e 72%);
}
body[data-theme="dark"] .topbar,body[data-theme="dark"] .card{background:#29263de8;border-color:#574b68}
body[data-theme="dark"] h1,body[data-theme="dark"] h2,body[data-theme="dark"] .card h2,body[data-theme="dark"] .rules-card summary{color:#e5d6f0}
body[data-theme="dark"] .brand{color:#ddc7e8}
body[data-theme="dark"] .hero h1{color:#e1c3ec}
body[data-theme="dark"] .hero h1 em{color:#a3dfc7}
body[data-theme="dark"] .hero .han{color:#d5bae2}
body[data-theme="dark"] .subtle-label,body[data-theme="dark"] .theme-button,body[data-theme="dark"] select,body[data-theme="dark"] .tool,body[data-theme="dark"] .size-chip{background:#3a324b;border-color:#695977;color:#eedff7}
body[data-theme="dark"] .stat-pair{border-color:#51465f}
body[data-theme="dark"] .stat-pair strong{color:#dac9e4}
body[data-theme="dark"] .stat-pair .stat-strong{color:#a5e7c8}
body[data-theme="dark"] .status{background:linear-gradient(100deg,#363047,#2b403e);border-color:#62566d;color:#e0d7ec}
body[data-theme="dark"] .status.win{background:#285447;color:#bcf6dc}
body[data-theme="dark"] .grid-cell{background:#373044;border-color:#6b5c7b;color:#eee0fa}
body[data-theme="dark"] .grid-cell.hit{background:#60413f;border-color:#aa6c6f;color:#ffe1d1}
body[data-theme="dark"] .grid-cell.miss{background:#393744;border-color:#625b6c;color:#c3becf}
body[data-theme="dark"] .grid-cell.head{background:#356653;color:#d9ffe9;border-color:#86caaa}
body[data-theme="dark"] .grid-cell.marked{background:#614f37;border-color:#aa9361;color:#ffe9b4}
body[data-theme="dark"] .grid-cell.revealed{background:#51415d;border-color:#9874b0;color:#eee0fb}
body[data-theme="dark"] .grid-cell.revealed-head{background:#43664f;color:#ddf7e7}
body[data-theme="dark"] .grid-axis{color:#bfb0d0}
body[data-theme="dark"] .tool.active{background:#335c4c;border-color:#6dad8b;color:#c8f3df}
body[data-theme="dark"] .shot-log li{background:#393147;border-color:#61516e;color:#e0d1e6}
body[data-theme="dark"] .win-panel{background:linear-gradient(130deg,#2c5248,#423453);border-color:#6fbb91}
body[data-theme="dark"] .win-panel h2,body[data-theme="dark"] .win-panel p{color:#d1f3e0}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}