/* ═══ 19o-zanko.css ═══ 残光（放置型 RPG）
   画面は「古い端末」。サイトが明るい配色でも、この箱の中は暗い（夜の中で光る、が題の意味なので）。
   第1段は文字とボタンだけ。段が進むと、欄と札が少しずつ現れる（A Dark Room の見せ方）。 */
#zkbox{--zkbg:#06090c;--zkbg2:#0b1116;--zkln:#1a2a2a;--zkln2:#26403d;--zktx:#cfe7d8;--zkdim:#7f9a92;--zkfaint:#56706a;
 --zkacc:#6ff0cf;--zkamb:#ffc247;--zkbad:#ff6b8f;--zkok:#8fe3a9}
.zkt{background:var(--zkbg);color:var(--zktx);border:1px solid var(--zkln);border-radius:16px;overflow:hidden;
 box-shadow:0 0 0 1px rgba(111,240,207,.05),0 18px 40px rgba(0,0,0,.25);font-size:14px;line-height:1.65}
.zkt .n{font-family:var(--num);font-variant-numeric:tabular-nums}
.zkhd{display:flex;align-items:baseline;gap:12px;padding:10px 16px;border-bottom:1px solid var(--zkln);background:linear-gradient(180deg,#0a1216,#06090c)}
.zkhd b{font-family:var(--disp);font-size:17px;letter-spacing:.18em;color:var(--zkacc);text-shadow:0 0 12px rgba(111,240,207,.45)}
.zkhd span{color:var(--zkdim);font-size:12px}
.zkhd #zkclk{margin-left:auto}
.zkbody{display:grid;grid-template-columns:230px 1fr;min-height:320px}
.ph1 .zkbody{grid-template-columns:200px 1fr}

/* 資源 */
.zkres{border-right:1px solid var(--zkln);padding:10px 12px;background:var(--zkbg2)}
.zkrh{font-size:11px;letter-spacing:.2em;color:var(--zkfaint);margin-bottom:6px}
.zkr{display:grid;grid-template-columns:18px 1fr auto;column-gap:6px;align-items:baseline;padding:3px 0;border-bottom:1px dashed rgba(38,64,61,.55)}
.zkr:last-child{border-bottom:0}
.zkri{color:var(--zkacc);text-align:center}
.zkrn{color:var(--zkdim);font-size:12.5px}
.zkr b{font-size:15px;text-align:right}
.zkr i{grid-column:3;font-style:normal;color:var(--zkfaint);font-size:11px;text-align:right;margin-top:-4px}
.zkr em{grid-column:2/4;font-style:normal;font-size:11px;color:var(--zkfaint);text-align:right}
.zkr em.pos{color:var(--zkok)}.zkr em.neg{color:var(--zkbad)}
.zkr.full b{color:var(--zkamb)}
.zkr.mem{margin-top:6px;border-top:1px solid var(--zkln);padding-top:7px}
.zkr.raid b{color:var(--zkbad)}

/* 右側 */
.zkmain{padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:10px}
.zktabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--zkln);padding-bottom:8px}
.zktabs button{background:transparent;border:1px solid transparent;color:var(--zkdim);border-radius:9px;padding:5px 11px;
 font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:32px}
.zktabs button:hover{color:var(--zktx);border-color:var(--zkln2)}
.zktabs button.on{color:var(--zkbg);background:var(--zkacc);border-color:var(--zkacc)}
.zkpane{min-width:0;animation:zkin .35s ease-out}
@keyframes zkin{from{opacity:.55}to{opacity:1}}

/* ボタン（待ちの間は下に細い帯が伸びる） */
.zkbtn{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
 background:#0c1519;color:var(--zktx);border:1px solid var(--zkln2);border-radius:10px;padding:9px 14px;min-height:40px;
 font-family:inherit;font-size:14px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.zkbtn:hover:not([disabled]):not([aria-disabled="true"]){border-color:var(--zkacc);background:#0f1d20}
.zkbtn:focus-visible{outline:2px solid var(--zkacc);outline-offset:2px}
.zkbtn[disabled],.zkbtn[aria-disabled="true"]{opacity:.42;cursor:default}
.zkbtn.cd[aria-disabled="true"]{opacity:.7}
.zkbtn small{font-size:11.5px;color:var(--zkdim)}
.zkbtn small .no,.zkt small.no,.zkt .no{color:var(--zkbad)}
.zkbtn.sm{padding:5px 10px;min-height:32px;font-size:13px;align-items:center;flex-direction:row}
.zkbtn.ghost{background:transparent}
.zkbtn.on{border-color:var(--zkacc);color:var(--zkacc)}
.zkbtn.cd{opacity:.75}
.zkbtn.cd::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--zkacc);transform-origin:left;
 animation:zkcd var(--d,1s) linear var(--o,0s) forwards}
@keyframes zkcd{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.zkbtn.cd::after{animation:none;transform:scaleX(1)}.zkpane{animation:none}}
.zkacts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.zkacts .zkbtn{min-width:230px}
.zkhint{color:var(--zkfaint);font-size:12.5px;margin:6px 0 0}
.zkhint b{color:var(--zkdim)}
.zkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;font-size:13px}
.zkrow em.pos,.zkt .pos{color:var(--zkok);font-style:normal}
.zkt .neg{color:var(--zkbad);font-style:normal}
.zkrow.opts{justify-content:flex-start;margin-top:4px}

/* 配分 */
.zkjobs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.zkjob{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:var(--zkbg2);border:1px solid var(--zkln);border-radius:11px;padding:8px 11px}
.zkjob.warn{border-color:rgba(255,194,71,.45)}
.zkjn{display:flex;flex-direction:column;min-width:0}
.zkjn small{color:var(--zkdim);font-size:11.5px}
.zkjc{display:flex;align-items:center;gap:8px}
.zkjc b{min-width:22px;text-align:center;font-size:16px}
.zkje{grid-column:1/3;font-size:11.5px;color:var(--zkamb)}

/* 施設・研究・機体のカード */
.zkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.zkcard{background:var(--zkbg2);border:1px solid var(--zkln);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.zkct{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.zkct b{font-size:14px}
.zkct span{color:var(--zkfaint);font-size:12px}
.zkcard small{color:var(--zkdim);font-size:12px}
.zkcb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.zkauto{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--zkdim);cursor:pointer}
.zkauto select{background:var(--zkbg2);color:var(--zktx);border:1px solid var(--zkln2);border-radius:8px;padding:3px 6px;font-family:inherit}
.zkauto input{accent-color:var(--zkacc)}
.zkdone{color:var(--zkfaint);font-size:12px;margin:10px 0 0}
.zkh4{margin:14px 0 6px;font-size:13px;color:var(--zkdim);letter-spacing:.06em;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.zkh4 small{color:var(--zkfaint);font-weight:400;font-size:11.5px}

/* 機体 */
.zkunits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.zkunit{background:var(--zkbg2);border:1px solid var(--zkln);border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:4px}
.zkunit.inp{border-color:rgba(111,240,207,.5)}
.zkunit.sel{box-shadow:0 0 0 2px var(--zkamb) inset}
.zkut{display:flex;justify-content:space-between;align-items:baseline}
.zkut span{color:var(--zkacc);font-size:12.5px}
.zkunit small{color:var(--zkdim);font-size:11.5px}
.zkbar{position:relative;height:14px;background:#0c1418;border:1px solid var(--zkln);border-radius:7px;overflow:hidden}
.zkbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#2d8f76,#6ff0cf);transition:width .4s}
.zkbar span{position:relative;display:block;text-align:center;font-size:10.5px;line-height:13px;color:#e8fff7;text-shadow:0 0 3px #000}
.zkbar.xp{height:4px;border:0}
.zkbar.xp i{background:var(--zkamb)}
.zkslots{display:flex;flex-direction:column;gap:3px}
.zkslot{font-size:11.5px;border:1px dashed var(--zkln2);border-radius:7px;padding:2px 7px;background:transparent;color:var(--zkdim);text-align:left;font-family:inherit}
button.zkslot{cursor:pointer;border-style:solid}
.zkmods{display:flex;flex-direction:column;gap:5px}
.zkmod{display:flex;align-items:center;gap:8px;background:var(--zkbg2);border:1px solid var(--zkln);border-radius:10px;padding:6px 10px;font-size:12.5px}
.zkmod span{flex:1;min-width:0}
.zkmod em{font-style:normal;color:var(--zkacc);font-size:11px;margin-left:6px}
/* 部品のめずらしさ（#zkbox の中だけ。.r1 などはタイピングのキーボードの行でも使っている） */
#zkbox .r1{color:#8fc7ff !important;border-color:rgba(143,199,255,.4) !important}
#zkbox .r2{color:#c8a6ff !important;border-color:rgba(200,166,255,.45) !important}
#zkbox .r3{color:#ffd479 !important;border-color:rgba(255,212,121,.55) !important;text-shadow:0 0 8px rgba(255,212,121,.35)}

/* 遠征 */
.zkzones{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.zkzone{background:var(--zkbg2);border:1px solid var(--zkln);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.zkzone small{color:var(--zkdim);font-size:12px}
.zkzone.on{border-color:var(--zkacc);box-shadow:0 0 18px rgba(111,240,207,.12)}
.zkzone.clear .zkct span{color:var(--zkok)}
.zkzone.lock{opacity:.5;border-style:dashed}
.zkexst{background:#0a1417;border:1px solid var(--zkln2);border-radius:12px;padding:10px 12px;margin-top:10px}
.zkparty{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:8px}
.zkpu b{display:block;font-size:12px;margin-bottom:2px}
.zkblog{display:flex;flex-direction:column;gap:3px;max-height:340px;overflow:auto;font-size:12.5px;padding-right:4px}
.zkblog details{border-left:2px solid var(--zkln2);padding:1px 0 1px 9px}
.zkblog details.win{border-left-color:#2d8f76}
.zkblog details.lose{border-left-color:var(--zkbad)}
.zkblog details.boss{border-left-color:var(--zkamb)}
.zkblog details.boss summary{color:var(--zkamb)}
.zkblog summary{cursor:pointer;color:var(--zktx);list-style:none}
.zkblog summary::-webkit-details-marker{display:none}
.zkblog ul{margin:4px 0 4px 2px;padding-left:14px;color:var(--zkdim);font-size:12px}

/* 記録 */
.zkstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.zkstats div{background:var(--zkbg2);border:1px solid var(--zkln);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column}
.zkstats span{color:var(--zkfaint);font-size:11.5px}
.zkrels{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.zkrels div{border:1px solid rgba(255,212,121,.35);border-radius:10px;padding:7px 10px;display:flex;flex-direction:column}
.zkrels b{color:var(--zkamb);font-size:13px}
.zkrels small{color:var(--zkdim);font-size:11.5px}
.zkfoot{margin-top:18px}

/* ログ（物語）。新しい行は上に、ふっと現れる */
.zklog{border-top:1px solid var(--zkln);padding:10px 16px 12px;max-height:190px;overflow:auto;background:#05080a;font-size:13px}
.zklog p{margin:0 0 3px;color:var(--zkdim)}
.zklog p:first-child{color:var(--zktx)}
.zklog p.new{animation:zklog 1.4s ease-out}
@keyframes zklog{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.zklog p.memo{color:#9ad0c2}
.zklog p.ph{color:var(--zkacc)}
.zklog p.boss{color:var(--zkamb)}
.zklog p.raid{color:var(--zkbad)}
.zklog p.back{color:#b7a6ff}
@media(prefers-reduced-motion:reduce){.zklog p.new{animation:none}}

/* スマホ：縦に積む。資源は横並びの帯に */
@media(max-width:640px){
 .zkbody,.ph1 .zkbody{grid-template-columns:1fr}
 .zkres{border-right:0;border-bottom:1px solid var(--zkln);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
 .zkrh{grid-column:1/-1}
 .zkr.mem{grid-column:1/-1}
 .zkacts .zkbtn{min-width:0;width:100%}
 .zkmain{padding:10px}
 .zkhd{flex-wrap:wrap;row-gap:0}
 .zkcards,.zkunits,.zkzones{grid-template-columns:1fr}
}

/* ── 視界（19zh-zkvis.js、2026-09-26）── 端末の頭の下に横長の絵。背の低い画面では低く */
.zkview{position:relative;border-bottom:1px solid var(--zkln);background:#020406}
#zkcv{display:block;width:100%;height:clamp(96px,calc(var(--fitH) * .24),170px)}
.zkvt{position:absolute;right:8px;top:6px;background:rgba(6,9,12,.7);color:var(--zktx);border:1px solid var(--zkln2);border-radius:8px;font:inherit;font-size:11.5px;font-weight:700;padding:3px 9px;cursor:pointer}
.zkvt:hover{border-color:var(--zkacc)}
/* 倍率 100% のノート PC（窓の高さ 600px 前後）でも、端末ぜんたいが画面に収まるように。中の欄は箱の中で送る */
@media (min-width:641px){
 .zkt{display:flex;flex-direction:column;max-height:max(420px,var(--fitH))}
 .zkbody{flex:1 1 auto;min-height:0}
 .zkres,.zkmain{overflow:auto;min-height:0}
 .zklog{flex:0 0 auto;max-height:clamp(64px,calc(var(--fitH) * .2),190px)}
}