@charset "UTF-8";
:root { --bg:#101821; --panel:#192532; --card:#22313f; --ink:#edf2f5; --muted:#a6b3bf; --line:#354757; --accent:#85bea9; --gold:#edc771; --red:#e49791; }
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit} button{cursor:pointer;touch-action:manipulation;color:inherit;border:0;-webkit-tap-highlight-color:transparent} button:disabled{opacity:.45;cursor:not-allowed} button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} h1,h2,h3,p{margin:0} h1{font-size:26px;line-height:1.2;letter-spacing:-.7px} h2{font-size:17px;line-height:1.4;letter-spacing:-.4px} h3{font-size:13px;line-height:1.4} small{font-size:11px} button,input{border-radius:5px} a{color:var(--accent)}
.game-shell{max-width:480px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--panel);overflow:hidden;border-left:1px solid #293846;border-right:1px solid #293846}
.header{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line);background:#14202b}
.brand{display:flex;align-items:center;gap:10px;background:none;padding:0;text-align:left}.brand-mark{font:800 26px/1 sans-serif;color:var(--accent)}.brand b{display:block;font-size:15px;line-height:1.2}.brand small{font:8px/1.5 monospace;letter-spacing:1px;color:var(--muted)}.icon-button{background:transparent;border:1px solid var(--line);width:34px;height:34px;font-size:18px}
#main-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.decision-screen{padding:12px;min-height:100%;display:flex;flex-direction:column;gap:10px}.decision-screen> *{flex-shrink:0}.decision-footer{margin-top:auto;display:flex;flex-direction:column;gap:6px}.page-content{padding:16px;display:flex;flex-direction:column;gap:15px}
.screen-heading{display:flex;flex-direction:column;gap:5px}.screen-heading>small{color:var(--accent);font:10px monospace;letter-spacing:1px}.screen-heading p,.subtext{font-size:12px;color:var(--muted)}.section-caption,.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-caption>span{color:var(--muted);font-size:10px;white-space:nowrap}
.player-strip{padding:9px 10px;background:#12202c;border:1px solid #304454;border-radius:5px}.player-line{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;margin-bottom:6px}.player-line strong>span{font-weight:400;color:var(--muted)}.condition{color:var(--accent);font-size:10px;white-space:nowrap}.condition.low{color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.stat{padding:4px 0 3px;border:1px solid transparent;background:#20313f;text-align:center}.stat small{display:block;font-size:10px;color:#d0dbe2;white-space:nowrap}.stat b{display:block;font-size:17px;font-variant-numeric:tabular-nums;line-height:1.25}.stat span{display:block;color:#a3b7c0;font-size:9px;white-space:nowrap}.stat:hover{border-color:var(--accent)}.stat em{font-size:10px;font-style:normal;color:var(--accent);margin-left:2px}.target-row{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;margin-top:5px}.target-row b{color:var(--gold);font-weight:500}.target-row button{margin-left:auto;padding:0;background:none;color:#bdced8;font-size:10px}
canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges}.hero-art,.scene-art{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:#899ba5}.hero-art{height:clamp(115px,21dvh,180px)}.scene-art{height:clamp(84px,16dvh,135px)}.hero-art canvas,.scene-art canvas{height:100%;object-fit:contain}.scene-location{position:absolute;top:6px;left:7px;background:#152330dd;color:#eef3f3;padding:2px 6px;font-size:10px;border-radius:3px}.reroll{position:absolute;right:8px;bottom:8px;padding:7px 10px;background:#152330e8;border:1px solid #6f8495;font-size:11px}
.story-card{padding:10px;background:var(--card);border:1px solid var(--line);border-radius:5px}.event-context{color:#a4c7b8;border-left:2px solid #679986;padding-left:6px;font-size:10px;line-height:1.4;margin:5px 0 7px}.speaker{font-size:10px;color:var(--gold);font-weight:700;margin:7px 0 3px}.dialogue{font-size:13px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.choices{display:grid;gap:7px;margin-top:auto}.choice{display:flex;flex-direction:column;gap:5px;width:100%;padding:9px 10px;background:#273e4c;border:1px solid #597282;text-align:left}.choice:hover{background:#304b5c;border-color:#9ac5b3}.choice-label{display:flex;gap:8px;align-items:baseline;font-size:13px;font-weight:600}.choice-label>b{font:11px monospace;color:var(--accent)}.choice-effects{display:flex;gap:4px;flex-wrap:wrap;padding-left:15px}.choice-effects:empty{display:none}.gain{display:inline-block;font-size:10px;line-height:1.5;padding:1px 4px;background:#263e43;color:#b5dec8;border-radius:3px;white-space:nowrap}.gain.cost{background:#4d343b;color:#f0c2b9}.gains{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.experience{font-size:9px;line-height:1.7;color:#c5b684;margin-left:auto}.cost{font-size:10px;color:#e4b0a8;white-space:nowrap}
.primary{min-height:41px;width:100%;display:flex;align-items:center;justify-content:center;padding:9px 12px;background:#82b69e;color:#102b25;font-weight:750;font-size:13px;border:1px solid #b0d6c5}.primary:hover{background:#9ccdb6}.secondary{width:100%;padding:10px;background:#2a3d4c;border:1px solid var(--line)}.text-button{background:transparent;color:#b8cbd3;font-size:11px;padding:5px}.small-button{background:#344e60;border:1px solid #7895a7;padding:7px 13px;white-space:nowrap}.save-hint,.fine-print{font-size:10px;color:#9dacb9;line-height:1.45;text-align:center}.fine-print{margin-top:auto}
.create-form{display:flex;flex-direction:column;gap:8px}.field-label{display:flex;justify-content:space-between;font-size:12px;font-weight:600}.field-label>span{font-size:10px;font-weight:400;color:var(--muted)}input[type=text]{width:100%;padding:10px 12px;font-size:16px;color:var(--ink);background:#121f2a;border:1px solid #627584}.error-text{font-size:11px;color:var(--red)}.error-text:empty{display:none}.tactics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.tactic{padding:8px 3px;background:#223746;border:1px solid #405c6c;font-size:12px;min-height:35px}.tactic.selected{color:#112c27;background:#91beaa;border-color:#b6ddcd}.tactic-note{font-size:10px;color:var(--muted);margin-top:4px}.continue-save{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;background:#284339;border-radius:5px;font-size:11px}.continue-save .primary{width:auto;padding:7px 10px;min-height:34px;white-space:nowrap}
.training-list{display:grid;gap:7px}.training-card{padding:9px 10px;width:100%;text-align:left;background:var(--card);border:1px solid #405668}.training-card:hover{border-color:var(--accent)}.training-card p{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}.rest{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:11px 10px;background:#263f3a;border:1px solid #526f63;text-align:left}.rest>b{font-size:12px;white-space:nowrap}.rest>span{font-size:10px;color:#b8d1c4}.race-invite{display:flex;align-items:center;justify-content:space-between;gap:5px;background:#2b3342;border:1px solid #645a43;border-radius:4px;padding:7px 9px}.race-invite b{font-size:12px}.race-invite small{display:block;font-size:10px;color:var(--muted)}.tag{color:var(--gold);font-size:10px}.warning{background:#453439;border:1px solid #754e4e;padding:6px 8px;color:#f0c2b7;border-radius:4px;font-size:11px}
.skill-list{display:grid;gap:9px}.skill-card{padding:10px;text-align:left;background:var(--card);border:1px solid #455968;width:100%}.skill-card.selected{border-color:var(--accent);background:#29463e}.skill-card p{font-size:11px;line-height:1.4;color:#bbcad4;margin-top:4px}.phase-tag{font-size:10px;color:#e7c986;white-space:nowrap}.equip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:6px}.equip-grid .skill-card{padding:7px}.equip-grid .skill-card h3{font-size:11px}.equip-grid .skill-card p{font-size:10px;line-height:1.3}.unique-note{display:flex;justify-content:space-between;gap:5px;padding:6px 0;color:var(--gold);font-size:10px}.unique-note span{font-size:9px}.prep-note{font-size:11px;color:#bac9d3}
.race-heading{padding:9px 11px;border-left:3px solid var(--accent);background:#203442}.race-heading small{color:var(--accent);font-size:10px}.race-heading h2{font-size:18px;margin:3px 0}.race-heading p{font-size:10px;color:var(--muted)}.race-heading p button{float:right;background:none;color:var(--accent);font-size:10px;padding:0}.race-heading.compact{padding:6px 9px}.race-stage{height:clamp(135px,25dvh,214px);background:#638b62;border:1px solid #4d6b64;overflow:hidden}.race-stage canvas{height:100%;object-fit:contain}.skill-banner{display:flex;flex-direction:column;gap:2px;min-height:38px;padding:6px 9px;border:1px solid #455665;background:#202f3b;color:#a8bac8;border-radius:4px}.skill-banner b{font-size:12px}.skill-banner span{font-size:10px;line-height:1.3}.skill-banner.fired{border-color:#a89052;background:#3e3b2e;color:#f3d990}.race-panel{padding:6px 8px;background:#13222d;border:1px solid var(--line);border-radius:4px}.race-data{display:flex;align-items:center;gap:14px}.position b{font-size:25px;line-height:1.1;font-variant-numeric:tabular-nums}.position>span{font-size:10px;color:var(--muted);margin-left:3px}.race-progress{flex:1}.race-progress small{display:block;font-size:10px;color:#c4d3da;margin-bottom:4px}.bar{height:4px;background:#364856;overflow:hidden;border-radius:2px}.bar i{display:block;height:100%;background:var(--gold);width:0}.bar.energy{flex:1}.bar.energy i{background:var(--accent)}.telemetry{display:flex;gap:7px;align-items:center;margin-top:5px;font-size:10px;color:var(--muted)}.telemetry b{color:#d8e7e6;font-weight:600}.race-situation{font-size:10px;color:#a6bfcb;margin-top:4px;line-height:1.4}
.skill-status-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.skill-state{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;padding:5px 6px;background:#213240;border:1px solid #3c505f;border-radius:3px}.skill-state b{font-size:10px;font-weight:500}.skill-state span{font-size:9px;color:#a9b8c0}.skill-state.active{border-color:var(--gold);background:#3e3c2c}.skill-state.active span{color:#f8d990}.skill-state.used span{color:var(--accent)}.race-controls{display:flex;gap:6px}.race-controls button{padding:8px 10px;background:#293e4e;border:1px solid #587080;font-size:11px;min-height:35px}.race-controls button:last-child{margin-left:auto}.live-chat{padding-top:3px}.live-chat h3{font-size:10px}.chat-row{font-size:11px;line-height:1.5;padding-top:3px;color:#cad7dd}.chat-row b{color:#8bbca8;margin-right:6px;font-size:10px}.chat-row.skill{color:#e3c37d}
.result-heading{display:flex;align-items:center;gap:15px}.result-heading p{color:var(--muted);font-size:11px}.result-heading small{font-size:10px;color:var(--muted)}.result-number{font-size:46px;font-weight:750;line-height:1.2;color:var(--gold)}.result-number small{font-size:16px;margin-left:3px}.standings{width:100%;border-collapse:collapse;font-size:11px}.standings td{padding:6px 8px;border-bottom:1px solid #354656}.standings td:first-child{width:25px}.standings td:last-child{text-align:right;color:#b2c2ce;font-variant-numeric:tabular-nums}.standings .you{background:#305043;color:#cce9da}.feedback-box{padding:10px;background:#213240;border:1px solid var(--line);border-radius:4px}.feedback-box p{font-size:12px;line-height:1.55;color:#c2cfd6;margin-top:5px}.journal-row{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}.journal-row small{font-size:10px;color:var(--muted);min-width:48px;max-width:64px}.journal-row b{font-size:12px;font-weight:600}.journal-row p{font-size:11px;color:var(--muted);margin-top:2px}.monthly-log .journal-row{padding:7px 0}
.bottom-nav{display:flex;flex:0 0 auto;height:calc(48px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:#13212c}.bottom-nav button{flex:1;border-radius:0;background:none;color:#aebfcb;font-size:12px;position:relative}.bottom-nav button.active{color:#c3e5d4;background:#233c37;border-top:2px solid var(--accent)}.notification{display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;vertical-align:top}
.board-tabs{display:flex;gap:5px}.board-tabs button{flex:1;padding:10px;background:#263c4b;border:1px solid #476071;font-size:12px}.board-tabs .active{border-color:var(--accent);color:#bde4d1;background:#29463e}.post{padding:13px;background:var(--card);border:1px solid var(--line);border-radius:5px;margin-bottom:10px}.post-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:7px}.post h3{font-size:14px;margin-bottom:8px}.post>p{font-size:12px;line-height:1.8;color:#c6d3dc;overflow-wrap:anywhere}.post>small{display:block;margin-top:10px;color:var(--muted);font-size:10px}.comments{border-top:1px solid var(--line);margin-top:9px;padding-top:6px}.comments p{font-size:11px;color:#b0c2ca;padding:3px 0}.empty{padding:25px 10px;color:var(--muted);font-size:12px}
.modal-backdrop{position:fixed;inset:0;background:#060e18cb;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.modal{max-width:425px;width:100%;max-height:90dvh;overflow:auto;padding:17px;background:#1b2a37;border:1px solid #566f80;border-radius:8px;display:flex;flex-direction:column;gap:12px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.modal p{font-size:12px;color:#c0ced7;line-height:1.6}.modal>small{font-size:10px;color:var(--muted)}.stat-guide article{border-bottom:1px solid var(--line);padding:9px 0}.stat-guide h3{font-size:13px;color:#a7d6c2}.stat-guide h3 span{color:#bdccd5;font-size:11px;margin-left:5px}.stat-guide p{margin-top:4px;font-size:12px}.notice{font-size:11px;color:#f5dfaa;background:#4b3c27;padding:6px 12px}.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);z-index:150;padding:10px 15px;background:#d2e5dc;color:#142d25;border-radius:5px;font-size:12px;width:max-content;max-width:90vw}
.desktop-note{position:fixed;right:calc(50% + 280px);top:28%;color:#6b8192}.desktop-note .track-mark{font:800 50px sans-serif;letter-spacing:-6px;color:#75a38e}.desktop-note p{font:700 23px/1.5 sans-serif;letter-spacing:1px;margin:22px 0}.desktop-note>span:last-child{font:10px/1.9 monospace;letter-spacing:1px}
@media(max-width:1000px){.desktop-note{display:none}}
@media(max-height:740px){.header{height:44px;flex-basis:44px}.decision-screen{padding:9px;gap:7px}.player-strip{padding:6px 8px}.stat{padding:2px 0}.stat b{font-size:16px}.player-line{margin-bottom:4px}.scene-art{height:85px}.hero-art{height:112px}.story-card{padding:8px}.speaker{margin-top:5px}.dialogue{font-size:12px;line-height:1.55}.choice{padding:7px 8px;gap:3px}.choice-label{font-size:12px}.training-card{padding:7px 8px}.training-card p{font-size:10px}.rest{padding:9px 8px}.primary{min-height:36px;padding:7px 10px}.screen-heading{gap:3px}.screen-heading h1{font-size:23px}.skill-card{padding:8px}.race-stage{height:145px}.race-heading{padding:5px 8px}.race-heading h2{font-size:16px}.standings td{padding:4px 7px}.feedback-box{padding:8px}.feedback-box p{font-size:11px}.live-chat .section-caption{display:none}.chat-row{font-size:10px}.race-panel{padding:5px 7px}.skill-banner{padding:4px 7px;min-height:34px}.skill-state{padding:4px}.race-controls button{min-height:32px;padding:6px 8px}.tactic{min-height:31px;padding:6px 3px}.create-form{gap:6px}}
@media(max-width:359px){.decision-screen{padding:8px;gap:7px}.stat small{font-size:9px}.stat span{font-size:8px}.stat b{font-size:15px}.player-line{font-size:10px}.dialogue{font-size:12px}.choice-label{font-size:12px}.choice-effects{padding-left:0}.gain{font-size:9px;padding:1px 3px}.experience{font-size:8px}.training-card h3{font-size:12px}.target-row{font-size:9px}.target-row button{font-size:9px}.unique-note{flex-direction:column;gap:1px}.race-heading h2{font-size:15px}.skill-state{flex-direction:column;align-items:flex-start;gap:1px}.skill-state b{font-size:9px}.skill-state span{font-size:9px}.header{padding:0 11px}.rest>span{font-size:9px}.event-context{font-size:9px}.race-situation{font-size:9px}.race-controls button{font-size:10px}.race-stage{height:135px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.inline-help{padding:0;background:none;color:var(--accent);font-size:10px}.section-caption h3>span{font-size:10px;color:var(--muted);margin-left:5px}
@media(max-height:740px){[data-phase="raceprep"] .decision-footer .save-hint{display:none}}