/* ═══ 19o-zanko.css ═══ 残光（放置型 RPG）。2026-10-18 に作り直し：青・黄・緑のサイバーパンク調
   画面は「古い端末」。サイトが明るい配色でも、この箱の中は暗い（夜の中で光る、が題の意味なので）。
   青＝操作と味方、黄＝注意と敵・主、緑＝増えているもの・達成。赤みは「危険」だけにごく少なく。
   第1段は文字とボタンだけ。段が進むと、欄と札が少しずつ現れる（A Dark Room の見せ方）。 */
#zkbox{--zkbg:#030811;--zkbg2:#07121f;--zkbg3:#0b1c2e;--zkln:#10304a;--zkln2:#1b5782;--zktx:#d9efff;--zkdim:#86abc9;--zkfaint:#4f7594;
 --zkacc:#39d0ff;--zkacc2:#1f8fd6;--zkamb:#ffe14d;--zkbad:#ff7a5c;--zkok:#5dffa0;
 --zkglow:0 0 14px rgba(57,208,255,.32)}
.zkt{position:relative;background:var(--zkbg);color:var(--zktx);border:1px solid var(--zkln2);border-radius:4px;overflow:hidden;
 box-shadow:0 0 0 1px rgba(57,208,255,.08),0 0 28px rgba(57,208,255,.1),0 18px 40px rgba(0,0,0,.3);font-size:14px;line-height:1.65;
 background-image:linear-gradient(rgba(57,208,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,208,255,.035) 1px,transparent 1px);background-size:28px 28px}
/* 走査線（動かさない薄い横線。クリックは通す） */
.zkt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
 background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,12,24,.16) 3px);mix-blend-mode:multiply}
.zkt .n{font-family:var(--num);font-variant-numeric:tabular-nums}
.zkhd{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--zkln2);background:linear-gradient(180deg,#0a1b2f,#05101c);flex-wrap:wrap}
.zkhd b{font-family:var(--disp);font-size:17px;letter-spacing:.22em;color:var(--zkacc);text-shadow:0 0 14px rgba(57,208,255,.6)}
.zkhd span{color:var(--zkdim);font-size:12px}
.zkchip{border:1px solid var(--zkamb);color:var(--zkamb) !important;padding:0 8px;font-size:11px !important;letter-spacing:.08em;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:rgba(255,225,77,.07)}
.zkid{font-family:var(--num);letter-spacing:.14em;font-size:10.5px !important;color:var(--zkfaint) !important}
.zkhd #zkclk{margin-left:auto}
.zkbody{display:grid;grid-template-columns:236px 1fr;min-height:320px}
.ph1 .zkbody{grid-template-columns:200px 1fr}

/* 資源 */
.zkres{border-right:1px solid var(--zkln2);padding:10px 12px;background:linear-gradient(180deg,var(--zkbg2),var(--zkbg))}
.zkrh{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.2em;color:var(--zkfaint);margin-bottom:6px;border-bottom:1px solid var(--zkln);padding-bottom:4px}
.zkr{display:grid;grid-template-columns:18px 1fr auto;column-gap:6px;align-items:baseline;padding:4px 0 5px;border-bottom:1px dashed rgba(27,87,130,.5)}
.zkr:last-child{border-bottom:0}
.zkri{color:var(--zkacc);text-align:center;text-shadow:0 0 8px rgba(57,208,255,.6)}
.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)}
.zkrbar{grid-column:1/4;height:3px;background:#0a2034;margin-top:3px;overflow:hidden}
.zkrbar u{display:block;height:100%;background:linear-gradient(90deg,var(--zkacc2),var(--zkacc));transition:width .4s;box-shadow:0 0 8px rgba(57,208,255,.6)}
.r-mt .zkri,.r-al .zkri{color:var(--zkamb);text-shadow:0 0 8px rgba(255,225,77,.5)}.r-mt .zkrbar u,.r-al .zkrbar u{background:linear-gradient(90deg,#b99b12,var(--zkamb));box-shadow:0 0 8px rgba(255,225,77,.5)}
.r-nn .zkri,.r-ci .zkri,.r-dt .zkri{color:var(--zkok);text-shadow:0 0 8px rgba(93,255,160,.5)}.r-nn .zkrbar u,.r-ci .zkrbar u{background:linear-gradient(90deg,#1ea866,var(--zkok));box-shadow:0 0 8px rgba(93,255,160,.5)}
.zkr.full b{color:var(--zkamb)}
.zkr.full .zkrbar u{background:var(--zkamb)}
.zkr.mem{margin-top:6px;border-top:1px solid var(--zkln2);padding-top:7px}
.zkr.cores b{color:var(--zkok)}
.zkr.raid b{color:var(--zkamb)}
.zkr.raid .zkri{color:var(--zkamb)}

/* 右側 */
.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(--zkln2);padding-bottom:8px}
.zktabs button{position:relative;background:transparent;border:1px solid transparent;color:var(--zkdim);border-radius:2px;padding:5px 12px;
 font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:32px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.zktabs button:hover{color:var(--zktx);border-color:var(--zkln2);background:rgba(57,208,255,.06)}
.zktabs button.on{color:#021019;background:var(--zkacc);border-color:var(--zkacc);box-shadow:var(--zkglow)}
.zkbadge{font-style:normal;margin-left:6px;background:var(--zkamb);color:#1b1500;border-radius:9px;padding:0 6px;font-size:10.5px;font-weight:800}
.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:linear-gradient(180deg,#0a1d31,#07121f);color:var(--zktx);border:1px solid var(--zkln2);border-radius:2px;padding:9px 14px;min-height:40px;
 font-family:inherit;font-size:14px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.zkbtn b .zkgl{font-style:normal;color:var(--zkacc);margin-right:8px;display:inline-block;width:1.1em;text-align:center}
.zkbtn:hover:not([disabled]):not([aria-disabled="true"]){border-color:var(--zkacc);background:linear-gradient(180deg,#0e2a47,#08182a);box-shadow:var(--zkglow)}
.zkbtn:focus-visible,.zktabs button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--zkamb)}  /* clip-path が外側の輪郭を切るので、内側に描く */
.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:250px}
.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-left:3px solid var(--zkacc2);padding:8px 11px}
.zkjob.warn{border-left-color:var(--zkamb);border-color:rgba(255,225,77,.4)}
.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-left:3px solid var(--zkacc2);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.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:2px;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:12px;color:var(--zkacc);letter-spacing:.14em;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--zkln);padding-bottom:3px}
.zkh4 small{color:var(--zkfaint);font-weight:400;font-size:11.5px;letter-spacing:0}

/* 機体 */
.zkunits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.zkunit{background:var(--zkbg2);border:1px solid var(--zkln);border-left:3px solid var(--zkln2);padding:9px 11px;display:flex;flex-direction:column;gap:4px}
.zkunit.inp{border-left-color:var(--zkacc);box-shadow:inset 0 0 22px rgba(57,208,255,.06)}
.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:#06121f;border:1px solid var(--zkln);overflow:hidden}
.zkbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#1ea866,var(--zkok));transition:width .4s}
.zkbar span{position:relative;display:block;text-align:center;font-size:10.5px;line-height:13px;color:#eaffff;text-shadow:0 0 3px #000}
.zkbar.xp{height:4px;border:0}
.zkbar.xp i{background:var(--zkamb)}
.zkbar.lore{width:160px;height:8px}.zkbar.lore i{background:linear-gradient(90deg,var(--zkacc2),var(--zkacc))}
.zkslots{display:flex;flex-direction:column;gap:3px}
.zkslot{font-size:11.5px;border:1px dashed var(--zkln2);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);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:#7dffb4 !important;border-color:rgba(93,255,160,.4) !important}
#zkbox .r2{color:#7fd8ff !important;border-color:rgba(57,208,255,.5) !important}
#zkbox .r3{color:#ffe14d !important;border-color:rgba(255,225,77,.6) !important;text-shadow:0 0 8px rgba(255,225,77,.4)}

/* 遠征 */
.zkzones{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.zkzone{background:var(--zkbg2);border:1px solid var(--zkln);border-top:2px solid var(--zkln2);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(57,208,255,.16)}
.zkzone.clear .zkct span{color:var(--zkok)}
.zkzone.lock{opacity:.5;border-style:dashed}
.zkzone.deep{border-top-color:var(--zkamb);background:linear-gradient(180deg,rgba(255,225,77,.06),var(--zkbg2))}
.zkzone.deep .zkct b{color:var(--zkamb)}
.zkexst{background:#06131f;border:1px solid var(--zkln2);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:var(--zkok)}
.zkblog details.lose{border-left-color:var(--zkbad)}
.zkblog details.boss{border-left-color:var(--zkamb)}
.zkblog details.boss summary{color:var(--zkamb)}
.zkblog details.sight{border-left-color:var(--zkfaint)}
.zkblog details.sight summary{color:var(--zkdim);font-style:italic}
.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-bottom:2px solid var(--zkln2);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,225,77,.4);background:rgba(255,225,77,.04);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}
.zkrest{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.zkrest div{border:1px dashed var(--zkln2);padding:6px 10px;display:flex;flex-direction:column;opacity:.55}
.zkrest div.on{opacity:1;border:1px solid var(--zkok);background:rgba(93,255,160,.05)}
.zkrest div.on b{color:var(--zkok)}
.zkrest span{font-size:12px;color:var(--zkdim)}
.zkfoot{margin-top:18px}

/* 記録庫 */
.zklore{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.zkl{border:1px solid var(--zkln);border-left:3px solid var(--zkacc2);background:var(--zkbg2);padding:6px 11px}
.zkl summary{cursor:pointer;color:var(--zktx);font-size:13.5px;list-style:none}
.zkl summary::-webkit-details-marker{display:none}
.zkl summary::before{content:"▸ ";color:var(--zkacc)}
.zkl[open] summary::before{content:"▾ "}
.zkl[open]{border-left-color:var(--zkamb)}
.zkl p{margin:6px 0 3px;color:#bfe0f5;font-size:13.5px;line-height:1.9;border-top:1px dashed var(--zkln2);padding-top:6px}
.zkl.lock{display:flex;justify-content:space-between;gap:10px;opacity:.55;border-left-color:var(--zkln2);border-style:dashed}
.zkl.lock small{color:var(--zkfaint);font-size:11.5px}

/* ログ（物語）。新しい行は上に、ふっと現れる */
.zklog{border-top:1px solid var(--zkln2);padding:10px 16px 12px;max-height:190px;overflow:auto;background:#020610;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:#8fd8ff}
.zklog p.ph{color:var(--zkacc)}
.zklog p.boss{color:var(--zkamb)}
.zklog p.raid{color:var(--zkamb);border-left:2px solid var(--zkamb);padding-left:8px}
.zklog p.back{color:var(--zkok)}
@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(--zkln2);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{row-gap:0}
 .zkid{display:none}
 .zkcards,.zkunits,.zkzones{grid-template-columns:1fr}
}

/* ── 視界（19zh-zkvis.js）── 端末の頭の下に横長の絵。背の低い画面では低く */
.zkview{position:relative;border-bottom:1px solid var(--zkln2);background:#01040a}
#zkcv{display:block;width:100%;height:clamp(96px,calc(var(--fitH) * .24),170px)}
.zkvt{position:absolute;right:8px;top:6px;background:rgba(3,8,17,.75);color:var(--zktx);border:1px solid var(--zkln2);border-radius:2px;font:inherit;font-size:11.5px;font-weight:700;padding:3px 9px;cursor:pointer;z-index:6}
.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)}
}