/* 受発注デモ：ダンジョン版の見た目（html[data-mode="dungeon"] のときだけ効く）
   中身の処理は まじめ版と同じ。色の設定（トークン）を夜の迷宮の色に差し替え、窓を RPG 風にする */

html:root[data-mode="dungeon"]{
  color-scheme:dark;
  --paper:#0b0e19; --panel:#121729; --panel-2:#171d33; --sunk:#0e1222;
  --ink:#f4f1e8; --ink-2:#c9cde6; --ink-3:#9aa2c8;
  --line:#2c3354; --line-soft:#232a47; --line-strong:#5b628f;
  --green:#5ef2c2; --green-ink:#7ff5cf; --green-bg:rgba(94,242,194,.14); --green-line:#2f8f73; --on-green:#0c0f1a;
  --blue:#8fb4ff; --blue-ink:#b3cbff; --blue-bg:rgba(143,180,255,.14); --blue-line:#4a5f99; --on-blue:#0c0f1a;
  --amber:#ffd166; --amber-ink:#ffe08f; --amber-bg:rgba(255,209,102,.13); --amber-line:#9a7a33;
  --rose:#ff3d7f; --rose-ink:#ff8fb3; --rose-bg:rgba(255,61,127,.15); --rose-line:#9e2e57; --on-rose:#ffffff;
  --rail:#ffd166; --focus:#5ef2c2; --hatch:rgba(0,0,0,.35);
  --toast-bg:#0c0f1a; --toast-fg:#f4f1e8;
  --toast-wait:#8fb4ff; --toast-hold:#ffd166; --toast-back:#ff3d7f; --toast-done:#5ef2c2;
  --shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 36px -22px rgba(0,0,0,.9);
  --shadow-lift:0 0 0 1px rgba(0,0,0,.4),0 14px 28px -16px rgba(0,0,0,.9);
  --lat:"Dela Gothic One","DotGothic16",sans-serif;
  --r-s:4px; --r:6px; --r-l:12px;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23c9cde6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6 6.4 12l6.8-7.8' fill='none' stroke='%230c0f1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 背景：書類の迷宮（暗く落として、文字を読みやすく） */
html[data-mode="dungeon"] body{
  background:linear-gradient(rgba(11,14,25,.55),rgba(11,14,25,.86) 38%,rgba(11,14,25,.95)),url(/demo/juhatchu/img/bg_dungeon.webp) center top/cover no-repeat fixed,#0b0e19;
}
@media (max-width:760px){ html[data-mode="dungeon"] body{background-attachment:scroll,scroll,scroll} }

/* 見出し・ボタン・札はドット文字に（長い説明文と入力欄は読みやすさのため元の書体のまま） */
html[data-mode="dungeon"] :is(h1,h2,h3,.st-name,.scn-t,.scn-monname,.btn,.chip,.toast,.guide-t,.try-h h2,.pane-t,.side-h h2,.facts li,.legend,.co-txt b){font-family:"DotGothic16",var(--jp);font-weight:400}
html[data-mode="dungeon"] .hero-h{font-family:"Dela Gothic One",var(--jp);font-weight:400;letter-spacing:.02em;text-shadow:4px 0 var(--rose),-4px 0 var(--green)}
html[data-mode="dungeon"] .eyebrow{color:var(--green);letter-spacing:.3em}
html[data-mode="dungeon"] .hero-key{border-left-color:var(--rose)}

/* RPG の窓：クリーム色の太い枠＋外側に紺の縁 */
html[data-mode="dungeon"] :is(.pane,.side-card,.guide){background:rgba(12,15,26,.94);border:3px solid #f4f1e8;border-radius:12px;box-shadow:0 0 0 3px #0c0f1a,0 18px 40px -20px rgba(0,0,0,.9)}
html[data-mode="dungeon"] .pane{padding:22px}
html[data-mode="dungeon"] .side-card{padding:16px}
html[data-mode="dungeon"] .form{background:rgba(23,29,51,.9);border:2px solid var(--line-strong)}
html[data-mode="dungeon"] .btn.is-primary{box-shadow:0 0 18px rgba(94,242,194,.35)}
html[data-mode="dungeon"] .topbar{border-bottom-color:var(--line-strong)}
html[data-mode="dungeon"] .co-mark{background:var(--rose);color:#fff}

/* 魔物のカード */
html[data-mode="dungeon"] .scn{grid-template-areas:"no name" "no res" "no t" "no at";background:rgba(18,23,41,.92);border:2px solid var(--line-strong);border-radius:10px}
html[data-mode="dungeon"] .scn:hover{border-color:var(--rose);box-shadow:0 0 18px rgba(255,61,127,.3)}
html[data-mode="dungeon"] .scn.is-tried{border-color:var(--green-line)}
html[data-mode="dungeon"] .scn-no{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:none;border:0}
.scn-mon{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,61,127,.45))}
.scn.is-tried .scn-mon{filter:grayscale(.7) brightness(.85)}
.scn-monname{grid-area:name;font-size:12px;color:var(--rose-ink);letter-spacing:.06em}

/* ダンジョンの地図：6つの部屋の扉。いまいる部屋にはコニシの顔 */
html[data-mode="dungeon"] .rail{padding-top:34px}
html[data-mode="dungeon"] .station::before{top:34px;left:34px;height:0;border-top:4px dashed var(--amber);background:none;opacity:.7}
html[data-mode="dungeon"] .node{width:68px;height:68px;border:0;border-radius:12px;background:rgba(12,15,26,.7);box-shadow:0 0 0 2px var(--line-strong);overflow:visible}
html[data-mode="dungeon"] .station:hover .node{background:rgba(94,242,194,.12)}
html[data-mode="dungeon"] .station[aria-selected="true"] .node{background:rgba(94,242,194,.16);box-shadow:0 0 0 3px var(--green),0 0 22px rgba(94,242,194,.45)}
html[data-mode="dungeon"] .station[aria-selected="true"]::after{background:transparent}
.room-ico{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}
html[data-mode="dungeon"] .node b{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font:400 11px "Dela Gothic One",sans-serif;color:var(--ink);background:#0c0f1a;border:1.5px solid var(--line-strong);border-radius:4px;padding:0 5px;line-height:1.5}
html[data-mode="dungeon"] .station[aria-selected="true"] .node::after{content:"";position:absolute;right:-12px;top:-14px;width:30px;height:30px;border-radius:50%;background:#1b1f38 url(/quest/img/party_konishi.webp) center/cover;box-shadow:0 0 0 2px var(--green);animation:dg-bob 1.6s ease-in-out infinite}
html[data-mode="dungeon"] .st-name{margin-top:14px}
html[data-mode="dungeon"] .station[aria-selected="true"] .st-name{color:var(--green-ink)}
html[data-mode="dungeon"] .station-x{border-color:var(--amber-line);background:rgba(255,209,102,.06)}
html[data-mode="dungeon"] .station-x[aria-selected="true"]{border-color:var(--amber);background:rgba(255,209,102,.14)}
@keyframes dg-bob{50%{transform:translateY(-4px)}}

/* スマホ：地図が縦並びになるので、扉の列を広げ、つなぐ点線も縦に */
@media (max-width:719px){
  html[data-mode="dungeon"] .rail{padding-top:4px}
  html[data-mode="dungeon"] .station{grid-template-columns:58px minmax(0,1fr) auto;column-gap:14px;padding:12px 8px 14px 0}
  html[data-mode="dungeon"] .station::before{top:50%;left:27px;width:0;height:100%;border-top:0;border-left:4px dashed var(--amber)}
  html[data-mode="dungeon"] .node{width:54px;height:54px}
  html[data-mode="dungeon"] .st-name{margin-top:0}
  html[data-mode="dungeon"] .station[aria-selected="true"]{background:rgba(94,242,194,.1)}
  html[data-mode="dungeon"] .gate{left:62px;bottom:-4px}
}

/* 部屋を移ったとき、画面の窓がふわっと現れる */
html[data-mode="dungeon"] .pane{animation:dg-in .28s ease-out}
@keyframes dg-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 下のメッセージ：RPG のメッセージ窓 */
html[data-mode="dungeon"] .toast{border:3px solid #f4f1e8;border-radius:10px;box-shadow:0 0 0 3px #0c0f1a,0 12px 30px rgba(0,0,0,.6);font-size:15px}

/* 表示の切り替え（まじめ ／ ダンジョン）：どちらの見た目でも使う */
.mode-sw{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);margin-left:auto}
.mode-sw button{border:0;background:none;padding:4px 12px;border-radius:999px;font:700 12.5px var(--jp);color:var(--ink-2);cursor:pointer}
.mode-sw button[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.topbar .mode-sw + .btn{margin-left:0}
@media (max-width:560px){ .mode-sw{order:2} }

@media (prefers-reduced-motion:reduce){
  html[data-mode="dungeon"] .station[aria-selected="true"] .node::after,html[data-mode="dungeon"] .pane{animation:none}
}