/* ═══ 19p-shop.css ═══ IRM の使いみち（店）と、店で買える見た目
   見た目はどれも「自分の画面の中だけ」。body や #zkbox に class を付けて、色の変数だけを差しかえる。 */

/* 頭の帯の IRM は押せる（店へ） */
.irmlink{cursor:pointer;border-radius:8px;padding:1px 4px;margin:-1px -4px;transition:background .15s}
.irmlink:hover{background:var(--sur2)}
.irmlink:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.shoplink{margin:-4px 0 12px}

/* ── 店 ── */
.shoptop{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.shoptop div{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:11px 15px;display:flex;flex-direction:column}
.shoptop span{font-size:12px;color:var(--dim)}
.shoptop b{font-size:24px;color:var(--irm);line-height:1.3}
.shoptop small{font-size:11.5px;color:var(--faint)}
.shopnote{font-size:12.5px;color:var(--dim);margin:0 0 12px}
.shopnote b{color:var(--tx)}
.shopcats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.shopchip{display:inline-flex;align-items:center;gap:6px;background:var(--sur);border:1px solid var(--line2);color:var(--tx);border-radius:999px;
 padding:6px 12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:34px}
.shopchip:hover{border-color:var(--irm)}
.shopchip.on{border-color:var(--irm);background:var(--sur2);box-shadow:0 0 0 1px var(--irm) inset}
.shopchip i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.shopchip em{font-style:normal;font-size:11px;color:var(--irm);font-weight:800}
.shoph{font-size:15px;margin:18px 0 8px;font-family:var(--disp)}
.shoplist{display:flex;flex-direction:column;gap:8px}
.shopc{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.shopc.off{opacity:.66}
.shopi{width:44px;height:44px;border-radius:12px;background:var(--sur2);display:grid;place-items:center;font-size:22px}
.shopw{min-width:0;display:flex;flex-direction:column;gap:2px}
.shopw b{font-size:14.5px}
.shopw small{font-size:12.5px;color:var(--dim)}
.shopst{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--faint)}
.shopst .on{color:var(--good);font-weight:800}
.shopb{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.shopb .btn{white-space:nowrap}
.shopwhy{font-size:11px;color:var(--faint);max-width:170px}
.shopdone{font-size:12px;font-weight:800;color:var(--good)}
.shopskin{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:8px}
.shopsh{display:flex;flex-direction:column;margin-bottom:8px}
.shopsh small{font-size:12px;color:var(--dim)}
.shopsw{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:560px){
 .shopc{grid-template-columns:38px 1fr;gap:10px}
 .shopi{width:38px;height:38px;font-size:19px}
 .shopb{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
 .shopwhy{max-width:none;text-align:left}
}

/* ── 差し色（ボタン・数字・見出しの色）。明るい配色と暗い配色で別の色 ── */
body.light.acc-sakura{--irm:#c2185b;--ok:#b83b73;--good:#b54a7a}
body:not(.light).acc-sakura{--irm:#ff8fb3;--ok:#ffadc8;--good:#ffb3cf}
body.light.acc-deep{--irm:#1565c0;--ok:#0b5aa8;--good:#127fa8}
body:not(.light).acc-deep{--irm:#5cb3ff;--ok:#7fc4ff;--good:#6fd6ff}
body.light.acc-forest{--irm:#2e7d32;--ok:#1f6f4a;--good:#2f8a3e}
body:not(.light).acc-forest{--irm:#7bdc8f;--ok:#8fe3b0;--good:#9cf0a8}
body.light.acc-dusk{--irm:#d2530f;--ok:#b8480f;--good:#c26a12}
body:not(.light).acc-dusk{--irm:#ffa15e;--ok:#ffb77f;--good:#ffc98f}
body.light.acc-shion{--irm:#6a3fbf;--ok:#5a3aa8;--good:#7b52c9}
body:not(.light).acc-shion{--irm:#b79bff;--ok:#c8b3ff;--good:#d3c2ff}

/* ── タイピングの道しるべ（次に打つキーの光）── */
body.tykb-sakura #tykb kbd.next{background:#e8779c;border-color:#e8779c;color:#fff;box-shadow:0 0 12px rgba(232,119,156,.6)}
body.tykb-gold #tykb kbd.next{background:#ffc247;border-color:#ffc247;color:#2a1c00;box-shadow:0 0 12px rgba(255,194,71,.6)}
body.tykb-jade #tykb kbd.next{background:#3fd6b0;border-color:#3fd6b0;color:#032a20;box-shadow:0 0 12px rgba(63,214,176,.6)}

/* ── 残光の端末の色（#zkbox の変数だけを差しかえる）── */
#zkbox.term-amber{--zkacc:#ffb347;--zktx:#f5e2c4;--zkdim:#b29a78;--zkfaint:#7d6a52;--zkln:#2e2415;--zkln2:#4a3a20;--zkbg:#0c0905;--zkbg2:#130e08;--zkok:#ffd18a}
#zkbox.term-blue{--zkacc:#7fb8ff;--zktx:#d6e6ff;--zkdim:#8ea3c2;--zkfaint:#5f7392;--zkln:#172336;--zkln2:#23385a;--zkbg:#05080e;--zkbg2:#0a1019;--zkok:#a8d1ff}
#zkbox.term-white{--zkacc:#e8eef5;--zktx:#f3f6fa;--zkdim:#a4adb9;--zkfaint:#737c88;--zkln:#262b31;--zkln2:#3a4048;--zkbg:#0a0b0d;--zkbg2:#111316;--zkok:#ffffff}
#zkbox.term-red{--zkacc:#ff6b6b;--zktx:#ffd9d9;--zkdim:#c29090;--zkfaint:#8a5f5f;--zkln:#2e1414;--zkln2:#4a2020;--zkbg:#0d0505;--zkbg2:#150909;--zkok:#ff9f9f}
#zkbox[class*="term-"] .zkhd b{text-shadow:0 0 12px var(--zkacc)}

/* 音を試しに聞く（▶） */
.shophear{background:none;border:1px solid var(--line2);color:var(--dim);border-radius:999px;width:30px;height:34px;margin-left:-3px;margin-right:4px;cursor:pointer;font-size:11px;font-family:inherit}
.shophear:hover{color:var(--irm);border-color:var(--irm)}

/* ── 背景の模様（自分の画面だけ。うすく敷く＝字の読みやすさは変えない。明るい配色では暗い点で） ── */
body.bg-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
body.light.bg-grid{background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px)}
body.bg-dots{background-image:radial-gradient(rgba(255,255,255,.08) 1.3px,transparent 1.8px);background-size:22px 22px;background-attachment:fixed}
body.light.bg-dots{background-image:radial-gradient(rgba(0,0,0,.09) 1.3px,transparent 1.8px)}
body.bg-stars{background-image:radial-gradient(1px 1px at 23px 31px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 131px 83px,rgba(255,255,255,.4),transparent),radial-gradient(1.6px 1.6px at 207px 161px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 61px 197px,rgba(255,255,255,.35),transparent),radial-gradient(1.2px 1.2px at 173px 19px,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 97px 137px,rgba(180,200,255,.5),transparent);background-size:240px 240px;background-attachment:fixed}
body.light.bg-stars{background-image:radial-gradient(1px 1px at 23px 31px,rgba(40,60,120,.35),transparent),radial-gradient(1px 1px at 131px 83px,rgba(40,60,120,.28),transparent),radial-gradient(1.6px 1.6px at 207px 161px,rgba(40,60,120,.4),transparent),radial-gradient(1px 1px at 61px 197px,rgba(40,60,120,.25),transparent),radial-gradient(1.2px 1.2px at 173px 19px,rgba(40,60,120,.3),transparent),radial-gradient(1px 1px at 97px 137px,rgba(40,60,120,.3),transparent)}
body.bg-dawn{background-image:linear-gradient(180deg,rgba(255,140,90,.11),rgba(130,140,255,.07) 45%,transparent 80%);background-attachment:fixed}
body.light.bg-dawn{background-image:linear-gradient(180deg,rgba(255,150,100,.16),rgba(130,150,255,.09) 45%,transparent 80%)}

/* ミッションの入れかえ（ホーム） */
.mrow .msswap{padding-left:8px;padding-right:8px}
.mspick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0 10px;border-top:1px dashed var(--line)}
.mspick span{font-size:11.5px;color:var(--dim);flex:1 0 100%}
.mspick small{color:var(--irm);font-weight:700}

/* 管理者の財布：動きの一覧 */
.admwlog{margin:6px 0 2px;max-height:220px;overflow:auto;background:var(--sur2);border-radius:9px;padding:6px 9px;font-size:12px}
.admwlog div{display:grid;grid-template-columns:78px 1fr auto;gap:8px;padding:2px 0;border-bottom:1px dashed var(--line)}
.admwlog div:last-child{border-bottom:0}
.admwlog span{color:var(--faint)}
.admwlog em{font-style:normal;text-align:right}