/* IT Quest 2027 の見た目。前半は v1 の <style> をそのまま移したもの。後半（v2 の印から下）が画面遷移と下部コマンドのための追加。 */
html{color-scheme:dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
:root{
  color-scheme: dark;
  --bg:#04041a;
  --window:#0a0d42;
  --window-2:#121752;
  --frame:#ffffff;
  --text:#f3f3f7;
  --muted:#aab0d8;
  --gold:#f5cf4f;
  --hp:#4fd36a;
  --mp:#4aa6ff;
  --danger:#ff6464;
  --line:rgba(255,255,255,.28);
  --pix:"DotGothic16","BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",monospace,sans-serif;
  --body:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%}
a{color:var(--gold)}
a:focus-visible,summary:focus-visible,.map-row:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-top:8px;padding-bottom:64px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3,.label,.tag,.chip,.wk,.lv,.cmd a,summary .s-name,.step,.mode-h,.nw-h,.pm-h,caption{font-family:var(--pix);font-weight:400;letter-spacing:.02em}
h3{font-size:1.05rem;margin:1.4em 0 .4em;color:var(--gold)}
p{margin:.5em 0}
.prose,.scene{max-width:65ch}
.muted{color:var(--muted)}
small{font-size:.82em}
.note{color:var(--muted);font-size:.88rem;max-width:65ch}
strong{color:var(--gold);font-weight:700}

/* ウィンドウ */
.win{position:relative;background:var(--window);border:5px double var(--frame);border-radius:7px;padding:26px 18px 18px;margin:34px 0 0}
.win > .label{position:absolute;top:-.95em;left:14px;margin:0;padding:0 8px;background:var(--window);font-size:1.1rem;line-height:1.6;color:var(--frame);max-width:calc(100% - 28px)}
h1.label{font-size:1.25rem}

/* 保存表示 */
.savebar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;padding:6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));background:var(--bg)}
#save-status{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 8px}
#save-status.db{color:var(--hp);border-color:var(--hp)}
#save-status.local{color:var(--gold);border-color:var(--gold)}

/* ヒーロー */
.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.hero .win{margin-top:30px}
.scene{font-size:1.06rem}
.boss-line{margin:14px 0 6px;padding:10px 12px;border:1px solid var(--danger);border-radius:4px;background:rgba(255,100,100,.08)}
.tag{display:inline-block;color:var(--danger);margin-right:.6em}
.done-list{margin:.4em 0 .8em;padding-left:1.3em}
.done-list li::marker{content:"■ ";color:var(--gold)}
.cmd{display:flex;flex-wrap:wrap;gap:4px 18px;border-top:1px solid var(--line);padding-top:10px}
.cmd a{color:var(--text);text-decoration:none;padding:2px 0 2px 1.2em;position:relative}
.cmd a .cursor{position:absolute;left:0;color:var(--gold)}
.cmd a:hover,.cmd a:focus-visible{color:var(--gold)}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stat{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0 0 10px}
.stat dt{color:var(--muted)}
.stat dd{margin:0}
.lv{color:var(--gold);font-size:1.5rem;line-height:1}
.gauges{display:grid;gap:8px}
.g{display:grid;grid-template-columns:2.6em 1fr 3em;align-items:center;gap:8px}
.gl{font-family:var(--pix)}
.gauge{height:12px;border:2px solid var(--frame);border-radius:3px;background:#000;overflow:hidden}
.gauge span{display:block;height:100%;width:0}
.gauge.st span{background:var(--gold)}
.gauge.it span{background:var(--hp)}
.gauge.en span{background:var(--mp)}
.gv{font-size:.85rem;text-align:right;color:var(--muted)}
.msg{margin-top:12px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#000;min-height:2.6em}

/* 表 */
.tbl{overflow-x:auto;margin:10px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem;line-height:1.6}
caption{text-align:left;color:var(--gold);padding:4px 0}
th,td{border:1px solid var(--line);padding:6px 8px;vertical-align:top;text-align:left}
thead th{background:var(--window-2);font-weight:700}
tbody th{font-weight:700;white-space:nowrap}
table.books{min-width:900px}
table.books tr.first td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
td.st{min-width:8.5em}
td.st .q{padding:0}

/* ワールドマップ */
.map{display:grid;gap:8px;margin-top:14px}
.map-row{display:grid;grid-template-columns:5.6em minmax(0,1fr) 4.6em minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:4px;color:var(--text);text-decoration:none;background:var(--window-2)}
.map-row:hover{border-color:var(--gold)}
.map-row .m{font-family:var(--pix);color:var(--muted)}
.lane b{display:block;font-weight:700}
.lane small{color:var(--muted)}
.lane.it b{color:var(--hp)}
.lane.en b{color:var(--mp)}
.arw{font-family:var(--pix);font-size:.8rem;color:var(--gold);text-align:center;white-space:nowrap}
.chips{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.map-exam{display:grid;grid-template-columns:5.6em 1fr;gap:10px;padding:8px 10px;border:1px dashed var(--gold);border-radius:4px;font-size:.92rem}
.map-exam .m{font-family:var(--pix);color:var(--gold)}
.chip{display:inline-block;font-size:.75rem;line-height:1.5;padding:0 7px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);white-space:nowrap;margin-left:.4em}
.chips .chip{margin-left:0}
.chip.now{color:var(--gold);border-color:var(--gold)}
.chip.win-c{color:#000;background:var(--hp);border-color:var(--hp)}
.chip.ext{color:var(--gold);border-color:var(--gold);border-style:dashed}
.chip.lost,.chip.warn{color:var(--danger);border-color:var(--danger)}
.chip.en-on{color:#000;background:var(--mp);border-color:var(--mp)}

/* なかま */
.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pm{border:1px solid var(--line);border-radius:4px;padding:10px;background:var(--window-2)}
.pm-h{color:var(--text)}
.pm-h .chip{margin-left:.5em}
.pm p{font-size:.92rem;margin:.3em 0}

/* 章 */
.trials{padding-left:1.2em;margin:.3em 0}
.trials li{list-style:none;margin-left:-1.2em}
details.ch{background:var(--window);border:5px double var(--frame);border-radius:7px;margin:14px 0 0}
details.ch > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 14px 12px 2.2em;position:relative}
details.ch > summary::-webkit-details-marker{display:none}
details.ch > summary::before{content:"▶";position:absolute;left:12px;top:12px;color:var(--gold);font-family:var(--pix)}
details.ch[open] > summary::before{content:"▼"}
.s-name{font-size:1.08rem}
.s-meta{color:var(--muted);font-size:.88rem}
details.ch > summary .chip{margin-left:auto}
.ch-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0}
.facts dt{color:var(--muted);white-space:nowrap}
.facts dd{margin:0;max-width:65ch}
.gear{padding-left:1.2em;margin:.3em 0}
.gear li{margin:.3em 0}
.exam{margin-top:14px;padding:10px 12px;border:1px dashed var(--danger);border-radius:4px}
.exam .chip{margin-left:0}
.exam p{max-width:65ch}

/* チェック */
.qs{display:grid;gap:2px}
.q{display:flex;gap:.55em;align-items:flex-start;padding:5px 6px 5px 1.4em;border-radius:3px;cursor:pointer;position:relative}
.q::before{content:"▶";position:absolute;left:.2em;top:5px;color:var(--gold);visibility:hidden;font-family:var(--pix)}
.q:hover::before,.q:focus-within::before{visibility:visible}
.q:focus-within::before{animation:blink 1s steps(1) infinite}
.q:hover{background:rgba(255,255,255,.05)}
.q input{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:1.4em;top:.6em}
.q .box{flex:none;width:1.05em;height:1.05em;margin-top:.38em;border:2px solid var(--frame);border-radius:2px;position:relative;background:#000}
.q input:checked + .box::after{content:"";position:absolute;inset:2px;background:var(--gold)}
.q input:focus-visible + .box{outline:3px solid var(--gold);outline-offset:2px}
.q input:checked ~ .t{color:var(--muted)}
.wk{display:inline-block;font-size:.8rem;color:var(--gold);border:1px solid var(--line);border-radius:3px;padding:0 6px;margin-right:.5em;line-height:1.6}
.boss .wk{color:var(--danger);border-color:var(--danger)}

/* 英語 */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 4px}
.flow > span:not(.fa){border:1px solid var(--mp);border-radius:4px;padding:3px 10px;font-size:.92rem}
.fa{color:var(--gold);font-family:var(--pix)}
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.stage{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--window-2)}
.stage h3{margin-top:0;color:var(--mp)}
.step{color:var(--gold);margin-right:.5em}
.stage p{font-size:.92rem;margin:.35em 0}
table.score td,table.score th{font-size:.88rem}
.final{margin-top:8px}

/* 1週間 */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.mode{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--window-2)}
.mode p{font-size:.92rem;margin:.3em 0}

/* そうび */
.cost,.pending{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font-size:.92rem;max-width:65ch}
.assume{color:var(--gold)}
.pending{border-style:dashed;color:var(--muted)}

/* 11月 */
.nov{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.nw{border:1px solid var(--line);border-radius:4px;padding:8px;background:var(--window-2)}
.nw-h{color:var(--gold);padding:0 6px 4px}
.nw .q{font-size:.92rem}

/* 再戦・隠し */
.rematch,.hd,.nots{padding-left:1.2em;margin:.4em 0}
.rematch li,.hd li,.nots li{margin:.35em 0;max-width:72ch}
.rematch li.lost{color:var(--danger)}
.src{font-size:.82rem;padding-left:1.6em;word-break:break-all}
.src li{margin:.2em 0}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:0}
  .map-row{grid-template-columns:1fr auto;grid-template-areas:"m chips" "it it" "arw arw" "en en";gap:4px 10px}
  .map-row .m{grid-area:m}
  .map-row .lane.it{grid-area:it}
  .map-row .arw{grid-area:arw;text-align:left}
  .map-row .lane.en{grid-area:en}
  .map-row .chips{grid-area:chips;flex-direction:row}
  .map-exam{grid-template-columns:1fr}
  .win{padding:24px 12px 14px}
  .ch-body{padding:0 10px 14px}
  details.ch > summary .chip{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
.budget th,.budget td:nth-child(-n+3){white-space:nowrap}
table.days td:first-child{white-space:nowrap}

/* PWA：今週・設定・更新の帯・スマホの操作性 */
.q{min-height:44px}
details.ch > summary{min-height:44px}
input,textarea,select,button{font-size:16px}
.tw-meta{margin:0 0 .4em}
.tw-h{margin-top:.8em}
.upd{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:6px 16px;background:var(--window);border-bottom:2px solid var(--gold);color:var(--text);font-family:var(--pix)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;background:var(--window-2);color:var(--text);border:2px solid var(--frame);border-radius:4px;font-family:var(--pix);font-size:16px;cursor:pointer}
.btn:hover,.btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ta{display:block;width:100%;max-width:65ch;margin:8px 0;padding:8px;background:#000;color:var(--text);border:1px solid var(--line);border-radius:4px;font-family:ui-monospace,monospace;font-size:16px;line-height:1.5}
.set-msg{min-height:1.5em;color:var(--gold);max-width:65ch}
.set-msg.err{color:var(--danger)}
table.imp{min-width:0;width:auto}

/* ===== v2：画面遷移・上部の帯・下部コマンド ===== */
html{scroll-behavior:auto}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));background:rgba(4,4,26,.94);border-bottom:1px solid var(--line);font-size:.9rem}
.topbar .scr{font-family:var(--pix);color:var(--frame);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tlv{font-family:var(--pix);color:var(--gold);white-space:nowrap}
.wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px))}
.screen:focus{outline:none}
.screen > .win:first-child{margin-top:28px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:7;background:var(--window);border-top:5px double var(--frame);padding:4px max(6px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px))}
.dock ul{display:flex;gap:2px;max-width:1040px;margin:0 auto;padding:0;list-style:none}
.dock li{flex:1 1 auto}
.dock a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:4px 2px;font-family:var(--pix);font-size:1rem;color:var(--text);text-decoration:none;white-space:nowrap;border-radius:3px}
.dock a[aria-current="page"]{color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.dock a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* メニュー（DQ のコマンド一覧） */
.cmdlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cmdlist a{display:flex;align-items:center;min-height:48px;padding:4px 8px 4px 1.6em;position:relative;color:var(--text);text-decoration:none;font-family:var(--pix);font-size:1.08rem}
.cmdlist a::before{content:"▶";position:absolute;left:.3em;color:var(--gold);visibility:hidden}
.cmdlist a:hover::before,.cmdlist a:focus-visible::before{visibility:visible;animation:blink 1s steps(1) infinite}
.cmdlist a:hover,.cmdlist a:focus-visible{color:var(--gold);outline:none}
.cmdlist small{font-family:var(--body);color:var(--muted);margin-left:.8em}

/* きょう */
.gap-band{margin:24px 0 0;padding:12px 14px;border:2px solid var(--gold);border-radius:6px;background:rgba(245,207,79,.1);max-width:65ch}
.first-q .q{font-size:1.08rem}
.streak{font-family:var(--pix);font-size:1.25rem;color:var(--gold);margin:.2em 0}
.degrade-pick{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}
.dmenu{border:1px solid var(--gold);border-radius:4px;padding:10px 12px;background:var(--window-2);margin:8px 0}
.dmenu .mode-h{color:var(--gold)}
details.fold{margin-top:10px;border:1px solid var(--line);border-radius:4px}
details.fold > summary{min-height:44px;display:flex;align-items:center;padding:4px 10px;cursor:pointer;font-family:var(--pix);color:var(--muted)}
details.fold > div{padding:0 10px 10px}
.next-boss a{font-family:var(--pix)}
.extra-q{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}
.judge-band{margin:6px 0 0;padding:8px 12px;border-left:3px solid var(--gold);background:rgba(245,207,79,.08);max-width:65ch}
.judge-rules,.versant{padding-left:1.2em;margin:.4em 0;max-width:65ch}
.judge-rules li,.versant li{margin:.2em 0}
.toggle{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.toggle input{width:22px;height:22px;accent-color:var(--gold)}

/* 章の画面 */
.ch-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.ch-head .s-meta{flex:1 1 auto}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:18px;flex-wrap:wrap}
.pager a{display:inline-flex;align-items:center;min-height:44px;padding:4px 10px;border:2px solid var(--frame);border-radius:4px;text-decoration:none;font-family:var(--pix);color:var(--text)}
.pager a:hover,.pager a:focus-visible{border-color:var(--gold);color:var(--gold)}
details.judge{margin-top:12px;border:1px dashed var(--line);border-radius:4px}
details.judge > summary{min-height:44px;display:flex;align-items:center;padding:4px 10px;cursor:pointer;font-family:var(--pix);color:var(--gold)}
details.judge > div{padding:0 12px 10px}

/* きまりごと・せってい */
.ifthen{list-style:none;padding:0;margin:.4em 0;display:grid;gap:6px}
.ifthen li{border:1px solid var(--line);border-radius:4px;padding:8px 12px;background:var(--window-2)}
.ifthen .when{color:var(--gold)}
.ifthen .meta{color:var(--muted);font-size:.94rem}
.why{padding-left:1.2em;margin:.4em 0}
.why li{margin:.35em 0;max-width:72ch}
.mk{font-size:.94rem;color:var(--muted)}
.rule-edit{display:grid;gap:4px;margin:10px 0;max-width:65ch}
.rule-edit input{min-height:44px;padding:6px 8px;background:#000;color:var(--text);border:1px solid var(--line);border-radius:4px;font-family:var(--body)}
.steps{padding-left:1.4em;max-width:65ch}

/* つくりかた（Markdown の描画） */
.notes-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.notes-list a{display:block;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--text);background:var(--window-2)}
.notes-list a:hover,.notes-list a:focus-visible{border-color:var(--gold)}
.notes-list .no{font-family:var(--pix);color:var(--gold);margin-right:.6em}
.notes-list .sum{display:block;color:var(--muted);font-size:.94rem}
.md{max-width:72ch}
.md h1{font-size:1.25rem;margin:.4em 0;color:var(--frame)}
.md h2{font-size:1.1rem;margin:1.4em 0 .4em;color:var(--gold)}
.md h3{font-size:1rem}
.md pre{overflow-x:auto;background:#000;border:1px solid var(--line);border-radius:4px;padding:10px;font-size:.9rem;line-height:1.55;-webkit-overflow-scrolling:touch}
.md code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.md :not(pre) > code{background:#000;border:1px solid var(--line);border-radius:3px;padding:0 4px;font-size:.92em;word-break:break-all}
.md ul,.md ol{padding-left:1.4em}

/* スマホでの読みやすさ：本文は 16px 以上にそろえる */
.note,.stage p,.mode p,.pm p,.cost,.pending,.nw .q,.src,table,.s-meta,.map-exam{font-size:1rem}
.flow > span:not(.fa),.topbar,#save-status,.chip,.wk,.gv,small,.arw,table.score td,table.score th,.md pre,.md code,.md :not(pre) > code,.ifthen .meta,.mk,.notes-list .sum{font-size:1rem}
/* 次のボス：章へのリンクを押しやすい大きさにする */
.next-boss a{display:flex;align-items:center;min-height:44px;margin:.4em 0;padding:4px 10px;border:2px solid var(--frame);border-radius:4px;text-decoration:none;color:var(--text)}
.next-boss a:hover,.next-boss a:focus-visible{border-color:var(--gold);color:var(--gold)}
/* 横に動かせる表：右端に影を出し、続きがあることを示す */
.tbl{background:linear-gradient(to left,var(--window),rgba(0,0,0,0)) right/24px 100% no-repeat local,linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,0)) right/16px 100% no-repeat scroll}
.dmenu .qs{margin-top:8px}