/* 潮止水門: night HUD over the 3D view; the windows are the inspector's field notebook (grey-green card, a clip,
   ruled paper) and the documents are the papers themselves. Works from 375 px phones to PC. */
:root {
  --ink: #1f2a26;
  --paper: #f3f0e4;
  --card: #e4e6dc;
  --line: #b9bfb0;
  --accent: #2f6a58;
  --accent2: #c8a22a;
  --warn: #b0402a;
  --dim: #66706a;
  --hud: rgba(8, 12, 14, 0.62);
  --hudline: rgba(220, 230, 220, 0.18);
  --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --hand: "Zen Kurenaido", "Zen Old Mincho", serif;
}
html, body { background: #05070a; color: #e8ece6; font-family: var(--font); }
body { -webkit-tap-highlight-color: transparent; user-select: none; }
#view { cursor: default; }
body.locked #view { cursor: none; }
.nopic { background: repeating-linear-gradient(135deg, #2a3330 0 8px, #222a28 8px 16px); }
button { font-family: var(--font); }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { position: absolute; }
#objective { pointer-events: auto; top: max(10px, env(safe-area-inset-top)); left: 12px; max-width: min(64vw, 620px); text-align: left; border: 1px solid var(--hudline); background: var(--hud); color: #eef2ea; border-radius: 8px; padding: 7px 12px 7px 8px; font-size: 15px; line-height: 1.45; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
#objective .lbl { flex: none; font-size: 11px; background: #c8a22a; color: #1a1a14; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.1em; }
#objective.new { animation: objnew 1.6s ease; }
@keyframes objnew { 0% { background: rgba(200, 162, 42, 0.55); } 100% { background: var(--hud); } }
#hud-buttons { pointer-events: auto; top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; align-items: center; }
#hud-buttons button { background: var(--hud); color: #dfe6dc; border: 1px solid var(--hudline); border-radius: 7px; padding: 5px 9px; font-size: 13px; cursor: pointer; }
#hud-buttons kbd { font-family: var(--font); font-size: 10px; margin-left: 5px; opacity: 0.65; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; padding: 0 3px; }
#radio-led { width: 9px; height: 9px; border-radius: 50%; background: #2a3a30; box-shadow: inset 0 0 2px #000; }
#radio-led.on { background: #6aff8a; box-shadow: 0 0 8px #4aff70; }
body.touch #hud-buttons kbd { display: none; }
body.touch #hud-buttons { display: none; }
#crosshair { left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(240, 240, 230, 0.55); box-shadow: 0 0 2px #000; transition: transform 0.12s; }
#crosshair.aim { transform: scale(1.9); background: rgba(250, 220, 120, 0.9); }
#prompt { left: 50%; top: calc(50% + 26px); transform: translateX(-50%); font-size: 15px; color: #f4f2e8; text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: nowrap; }
#prompt .key { display: inline-block; font-size: 12px; background: rgba(240, 236, 220, 0.9); color: #1a1a14; border-radius: 4px; padding: 0 5px; margin-right: 6px; }
#marker { left: 0; top: 0; color: #f0c840; text-shadow: 0 0 6px #000, 0 0 2px #000; font-size: 20px; text-align: center; margin: -14px 0 0 -10px; }
#marker i { font-style: normal; display: block; animation: mk 1.4s ease-in-out infinite; }
#marker .mk-label { font-size: 11px; display: block; color: #f4ecd0; }
#marker.edge i { animation: none; }
@keyframes mk { 50% { transform: translateY(-4px); } }
#hold { left: 50%; top: calc(50% + 56px); transform: translateX(-50%); width: min(70vw, 300px); text-align: center; }
#hold .hl { font-size: 13px; text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
#hold .hb { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; }
#hold-bar { height: 100%; width: 0; background: linear-gradient(90deg, #c8a22a, #f0d060); }
#toast { left: 50%; bottom: 136px; transform: translateX(-50%); width: min(92vw, 560px); display: flex; justify-content: center; }
.tcard { background: rgba(10, 14, 16, 0.84); border: 1px solid var(--hudline); border-radius: 10px; padding: 9px 13px; font-size: 15px; line-height: 1.6; display: flex; gap: 11px; align-items: center; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.tcard .tpic { width: 120px; height: 82px; object-fit: cover; border-radius: 5px; flex: none; border: 1px solid rgba(255, 255, 255, 0.15); }
#think { left: 50%; bottom: 92px; transform: translateX(-50%); width: min(92vw, 640px); text-align: center; font-family: var(--mincho); font-size: 17px; color: #e8e4d4; text-shadow: 0 1px 4px #000, 0 0 10px #000; opacity: 0; transition: opacity 0.4s; }
#think.on { opacity: 1; }
#think .who, #subs .who { font-family: var(--font); font-size: 11px; color: #a8b4a8; margin-right: 8px; border: 1px solid rgba(200, 210, 200, 0.4); border-radius: 3px; padding: 0 4px; vertical-align: 2px; }
#subs { left: 50%; bottom: 52px; transform: translateX(-50%); width: min(92vw, 680px); text-align: center; font-size: 16px; color: #f0f2ea; text-shadow: 0 1px 4px #000, 0 0 10px #000; opacity: 0; transition: opacity 0.3s; }
#subs.on { opacity: 1; }
#subs .who { color: #9ce0b0; border-color: rgba(120, 220, 150, 0.5); }
#subs .who.snd { color: #c8c8c8; border-color: rgba(200, 200, 200, 0.4); }
#subs i { font-style: normal; color: #d0d4cc; }
#subs .who.me { color: #e8d8a8; border-color: rgba(230, 210, 160, 0.5); }
body[data-subs="large"] #subs, body[data-subs="large"] #think { font-size: 21px; }
#questnote { left: 12px; top: 64px; font-size: 13px; background: rgba(200, 162, 42, 0.85); color: #1a1a14; border-radius: 6px; padding: 4px 10px; opacity: 0; transition: opacity 0.4s; }
#questnote.on { opacity: 1; }
#pickup { right: 12px; top: 60px; opacity: 0; transform: translateX(20px); transition: opacity 0.3s, transform 0.3s; }
#pickup.on { opacity: 1; transform: none; }
.pcard { display: flex; gap: 10px; align-items: center; background: rgba(10, 14, 16, 0.86); border: 1px solid rgba(200, 162, 42, 0.6); border-radius: 10px; padding: 8px 12px 8px 8px; max-width: 74vw; }
.pcard .ppic { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.pname { font-weight: 700; font-size: 15px; }
.psub { font-size: 12px; color: #b8c0b4; }
#roomname { left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); font-family: var(--mincho); font-size: 18px; letter-spacing: 0.25em; color: #e8ece2; text-shadow: 0 1px 6px #000; opacity: 0; transition: opacity 0.6s; white-space: nowrap; }
#roomname.on { opacity: 1; }
#roomname small { display: block; font-family: var(--font); font-size: 10px; letter-spacing: 0.3em; color: #a8b4ac; text-align: center; }
@media (max-width: 640px) { #roomname { top: 52px; font-size: 15px; } }
#card { left: 12px; top: 64px; opacity: 0; transition: opacity 0.5s, transform 0.5s; transform: translateY(-6px); }
#card.on { opacity: 1; transform: none; }
.rcard { display: flex; flex-direction: column; width: min(46vw, 260px); background: #ece8dc; color: var(--ink); padding: 7px 7px 6px; border-radius: 3px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6); transform: rotate(-1.2deg); }
.rcard .rpic { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.rcard .rtext { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; }
.rk { font-size: 10px; color: var(--dim); letter-spacing: 0.15em; }
.rn { font-family: var(--hand); font-size: 16px; }
#card.chapter { left: 50%; top: 18%; transform: translateX(-50%); }
.ccard { position: relative; width: min(86vw, 520px); border-radius: 6px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7); }
.ccard .cpic { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; filter: brightness(0.8); }
.ctext { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); }
.ck { font-size: 12px; color: #c8d0c4; letter-spacing: 0.3em; }
.cn { font-family: var(--mincho); font-size: 26px; }
#lockhint { left: 50%; top: 60%; transform: translateX(-50%); background: rgba(10, 14, 16, 0.8); border: 1px solid var(--hudline); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
#vents { inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0 22px, rgba(0, 0, 0, 0) 22px 34px); }
#blind { inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: auto; text-align: center; padding: 20px; }
#blind-text { font-family: var(--mincho); font-size: 20px; line-height: 1.8; color: #c8c4b8; }
#blind-keys { font-size: 13px; color: #8a8a80; }
#blind-off { background: #2a1a18; color: #e8c8c0; border: 1px solid #6a3a30; border-radius: 8px; padding: 9px 16px; font-size: 15px; }
body:not(.touch) #blind-off { display: none; }
#debug { left: 8px; bottom: 8px; font-size: 11px; color: #9f9; margin: 0; text-shadow: 0 0 2px #000; white-space: pre; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s; z-index: 30; }
#fade.on { opacity: 1; }

/* ---------------- touch ---------------- */
#touch { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#touch > * { pointer-events: auto; position: absolute; }
#t-look { right: 0; top: 0; width: 60%; height: 100%; }
#t-stick { left: 22px; bottom: 26px; width: 124px; height: 124px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); }
#t-knob { position: absolute; left: 38px; top: 38px; width: 48px; height: 48px; border-radius: 50%; background: rgba(240, 240, 230, 0.35); }
#t-buttons { right: 12px; bottom: 18px; display: grid; grid-template-columns: repeat(3, auto); gap: 7px; justify-items: end; }
#t-buttons button { min-width: 62px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(10, 14, 16, 0.6); color: #eef2ea; font-size: 13px; }
#t-buttons button.big { grid-column: 1 / span 3; min-width: 140px; min-height: 58px; font-size: 17px; background: rgba(200, 162, 42, 0.45); }
#t-buttons button.on { background: rgba(200, 162, 42, 0.7); }
#t-pause { right: 12px; top: 54px; width: 44px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(10, 14, 16, 0.6); color: #fff; }
body.touch #toast { bottom: 196px; }
body.touch #think { bottom: 166px; }
body.touch #subs { bottom: 136px; }

/* ---------------- screens ---------------- */
.screen { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #05070a; overflow: auto; }
#title-bg, #intro-img, #ending-img { position: absolute; inset: 0; }
#title-bg img, #intro-img img, #ending-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
#title-bg::after, #intro-img::after, #ending-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 10, 0.2), rgba(5, 7, 10, 0.92) 78%); }
.title-inner { position: relative; text-align: center; padding: 24px 16px; max-width: 640px; }
.series { font-size: 12px; letter-spacing: 0.3em; color: #a8b8ae; }
#title h1 { font-family: var(--mincho); font-size: clamp(44px, 12vw, 84px); margin: 8px 0 0; letter-spacing: 0.18em; font-weight: 700; color: #eef0e8; text-shadow: 0 2px 20px #000; }
#title .sub { font-size: 13px; letter-spacing: 0.5em; color: #8a9a92; margin-bottom: 14px; }
.lead { font-family: var(--mincho); line-height: 1.9; font-size: 15px; color: #d8dcd2; }
#title-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 10px; }
#title .btn, .screen .btn { background: rgba(20, 26, 28, 0.85); color: #e8ece4; border-color: rgba(220, 230, 220, 0.3); }
#title .btn.primary, .screen .btn.primary { background: #2f6a58; border-color: #4a8a74; }
#load-bar { height: 3px; background: rgba(255, 255, 255, 0.1); margin: 6px auto 10px; width: 60%; border-radius: 2px; overflow: hidden; }
#load-fill { height: 100%; width: 0; background: #c8a22a; transition: width 0.3s; }
#title-note { color: #c8c0a0; min-height: 1.2em; margin-bottom: 6px; }
.intro-inner { position: relative; max-width: 620px; padding: 20px 18px; width: 100%; }
.intro-head { display: flex; justify-content: space-between; font-size: 12px; color: #8a9a92; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 6px; margin-bottom: 14px; }
#intro-lines p { font-family: var(--mincho); font-size: 18px; line-height: 1.9; margin: 0 0 10px; animation: fadein 0.8s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.intro-buttons { margin-top: 16px; display: flex; gap: 8px; }
.ending-inner { position: relative; max-width: 640px; padding: 24px 18px; width: 100%; }
#ending-title { font-family: var(--mincho); font-size: 26px; margin-bottom: 14px; color: #e8e4d8; }
#ending-text p { font-family: var(--mincho); font-size: 17px; line-height: 1.95; margin: 0 0 10px; animation: fadein 0.9s ease; }
#ending-text p.speech { color: #f0e6c8; }
#ending-text p.after { font-size: 15px; color: #c8ccc0; }
#result .result-inner { max-width: 620px; padding: 22px 16px; width: 100%; text-align: center; }
#result-img .rimg { width: 100%; max-height: 32vh; object-fit: cover; border-radius: 8px; }
.result-code { font-size: 12px; letter-spacing: 0.3em; color: #8a9a92; margin-top: 10px; }
#result-title { font-family: var(--mincho); font-size: 28px; margin: 6px 0; }
.result-line { font-family: var(--mincho); color: #d8d4c4; margin-bottom: 12px; }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 12px; text-align: left; }
.result-stats div { background: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 7px 10px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.result-stats b { font-weight: 700; color: #f0e8c8; text-align: right; }
#result-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 12px; }
#result-list span { font-size: 12px; padding: 3px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); color: #8a948e; }
#result-list span.got { color: #e8e4d0; border-color: rgba(200, 162, 42, 0.6); }
#result-list span.now { background: rgba(200, 162, 42, 0.3); }
.result-buttons { margin-top: 10px; }

/* ---------------- the notebook window ---------------- */
#modal { position: fixed; inset: 0; z-index: 35; background: rgba(2, 4, 6, 0.55); display: flex; align-items: center; justify-content: center; padding: 10px; }
#modal.hidden { display: none; }
#modal-box { position: relative; background: var(--card); color: var(--ink); width: min(960px, 100%); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; border-radius: 6px 6px 10px 10px; box-shadow: 0 14px 50px rgba(0, 0, 0, 0.7); border-top: 10px solid #3a4a44; }
#modal-box::before { content: ""; position: absolute; top: -18px; left: 50%; width: 120px; margin-left: -60px; height: 22px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#b8bcbc, #7a8080); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
#modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; border-bottom: 1px solid var(--line); }
#modal-title { font-weight: 700; font-size: 17px; }
#modal-title .sub { font-weight: 400; font-size: 11px; color: var(--dim); margin-left: 6px; letter-spacing: 0.1em; }
#modal-close { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
#modal-body { overflow: auto; padding: 12px 14px; flex: 1; -webkit-overflow-scrolling: touch; }
#modal-foot { padding: 6px 14px 9px; color: var(--dim); border-top: 1px solid var(--line); }
#modal-foot:empty { display: none; }
.kind-doc #modal-box, .kind-term #modal-box { width: min(720px, 100%); }
.kind-pause #modal-box, .kind-settings #modal-box { width: min(460px, 100%); }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs .tab { border: 1px solid var(--line); background: #f2f2ea; border-radius: 6px 6px 0 0; padding: 6px 12px; font-size: 14px; cursor: pointer; color: var(--ink); }
.tabs .tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs .tab .n { font-size: 11px; margin-left: 5px; opacity: 0.7; }
.inv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; align-content: start; }
.cell { background: #fafaf4; border: 1px solid var(--line); border-radius: 7px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink); min-height: 92px; }
.cell .cpic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.cell span { line-height: 1.25; text-align: center; }
.cell.on { outline: 3px solid var(--accent2); }
.paper { background: var(--paper); }
.cpic.paper, .dpic.paper { background: repeating-linear-gradient(180deg, #f6f3e6 0 9px, #dcd6c4 9px 10px); }
.detail { background: #fafaf4; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 14px; line-height: 1.6; }
.detail .dpic { width: 100%; max-height: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.detail h3 { margin: 8px 0 4px; font-size: 17px; }
.detail .meta, .detail .where, .detail .use { font-size: 13px; color: var(--dim); }
.detail .use { color: var(--ink); margin-top: 4px; }
.detail .acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 10px; background: #dfe8e0; border-radius: 10px; padding: 1px 7px; vertical-align: 2px; font-weight: 400; }
.chip.side { background: #f2e2b0; }
.empty { color: var(--dim); padding: 30px 0; text-align: center; }
.btn.danger { border-color: #c08070; color: #8a2a1a; background: #fbefe8; }
.btn .why { display: block; font-size: 11px; color: var(--dim); }
/* documents */
.dphotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dphotos figure { margin: 0; flex: 1 1 220px; background: #fff; padding: 6px 6px 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transform: rotate(-0.6deg); }
.dphotos figure:nth-child(2) { transform: rotate(0.8deg); }
.dphotos .dph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.dphotos figcaption { font-size: 11px; color: var(--dim); padding-top: 3px; }
#modal-body .paper { padding: 16px 18px; border-radius: 3px; box-shadow: inset 0 0 30px rgba(140, 120, 80, 0.12), 0 2px 6px rgba(0, 0, 0, 0.15); font-size: 16px; line-height: 1.9; white-space: normal; }
.paper.typed { font-family: var(--mincho); }
.paper.handwritten, .paper.memo { font-family: var(--hand); font-size: 18px; background: repeating-linear-gradient(180deg, #f6f3e6 0 30px, #d8d2c0 30px 31px); }
.paper.label { font-family: var(--font); background: #f2ecd0; border-left: 6px solid #a8402a; }
.paper.photo { font-family: var(--font); background: #ebe7da; }
.tape { background: #20262a; color: #d8e0d8; font-family: var(--mincho); padding: 16px 18px; border-radius: 6px; line-height: 2; font-size: 16px; }
.src { font-size: 12px; color: var(--dim); margin: 8px 2px; }
.think-in { font-family: var(--mincho); font-size: 16px; border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 6px; color: #3a4840; }
.think-in .who { font-family: var(--font); font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-right: 6px; color: var(--dim); }
.bigphoto .bph { width: 100%; border-radius: 4px; display: block; }
/* panels */
.panelpic { width: 100%; max-height: 210px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; }
.plines p { margin: 3px 0; font-size: 15px; line-height: 1.6; }
.ptoast { background: #fff6d8; border-left: 4px solid var(--accent2); padding: 6px 10px; margin: 8px 0; font-size: 14px; }
.pbtns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pbtns .btn { flex: 1 1 200px; text-align: left; }
.pbtns .btn:focus-visible, .menu .btn:focus-visible, .cell:focus-visible { outline: 3px solid var(--accent2); }
/* journal */
.obj-now { background: #fafaf4; border: 1px solid var(--line); border-left: 6px solid var(--accent2); border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; }
.obj-now .lbl { font-size: 11px; color: var(--dim); letter-spacing: 0.15em; }
.chbar { display: flex; gap: 3px; margin-top: 6px; }
.chbar span { flex: 1; height: 5px; border-radius: 3px; background: #d8dad0; }
.chbar span.done { background: var(--accent); }
.chbar span.now { background: var(--accent2); }
.otext { font-size: 17px; font-weight: 700; margin: 2px 0 4px; }
.known { background: #2a3430; color: #e8ece2; border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; font-family: var(--mincho); line-height: 1.7; }
.known .kt { font-family: var(--font); font-size: 11px; color: #c8d0c4; letter-spacing: 0.15em; }
.jr-body h4 { margin: 12px 0 6px; font-size: 13px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.quest { background: #fafaf4; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; }
.quest .qt { font-weight: 700; font-size: 14px; }
.quest.done { opacity: 0.75; }
.quest ol { margin: 4px 0 0 18px; padding: 0; font-size: 13px; }
.quest li.ok { color: var(--dim); text-decoration: line-through; }
.quest .qr { font-size: 12px; color: var(--accent); margin-top: 3px; }
.log { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; }
.log li { padding: 3px 0 3px 10px; border-left: 3px solid var(--line); margin-bottom: 3px; }
.log li.voice { font-family: var(--mincho); border-color: #c8b890; }
.log li.radio { border-color: #6ab488; }
.log li.note { border-color: var(--accent2); background: #fbf5e2; }
.log li.doc { border-color: #8aa0b8; }
.linkbtn { background: none; border: none; padding: 0; text-align: left; color: var(--ink); font-size: 14px; cursor: pointer; text-decoration: underline dotted; font-family: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chipbtn { font-size: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafaf4; padding: 3px 9px; cursor: pointer; color: var(--ink); }
.map { background: #1c2422; border-radius: 8px; padding: 6px; }
.map svg { width: 100%; height: auto; max-height: 58vh; display: block; }
.mroom rect { fill: #33403c; stroke: #6a7a72; stroke-width: 1.5; }
.mroom.u rect { fill: none; stroke-dasharray: 5 4; stroke: #5a6a62; }
.mroom.here rect { fill: #4a6a5c; stroke: #e8d070; stroke-width: 2.5; }
.mroom text { fill: #e0e6dc; font-size: 13px; text-anchor: middle; font-family: var(--font); }
.mroom text.fl { font-size: 10px; fill: #a8b4ac; }
.mroom text.goal { fill: #f0c840; font-size: 15px; }
.mroom.u text { fill: #8a9a92; }
.mdoor.open { fill: #6ad08a; }
.mdoor.locked { fill: #d06a4a; }
.mdoor.sealed { fill: #6a6a6a; }
.mdoor.lift { fill: #c8a22a; }
.me path { fill: #f0f0e0; stroke: #000; stroke-width: 1; }
.legend { font-size: 12px; color: var(--dim); margin-top: 6px; line-height: 1.9; }
.lg { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; border-radius: 2px; background: #33403c; }
.lg.here { background: #4a6a5c; outline: 2px solid #e8d070; }
.lg.u { background: none; border: 1px dashed #5a6a62; }
.lg.d.open { background: #6ad08a; }
.lg.d.locked { background: #d06a4a; }
.lg.d.sealed { background: #6a6a6a; }
.goalk { color: #c8a22a; margin-right: 2px; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.album .ph { background: #fff; border: none; padding: 5px 5px 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 12px; color: var(--ink); }
.album .ph .aph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.album .ph.small { font-size: 11px; }
/* menus */
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu .btn { width: 100%; }
.keys { margin-top: 10px; line-height: 1.7; }
#settings-panel label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
#settings-panel select, #settings-panel input { max-width: 60%; }
.egal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.eg { background: #fafaf4; border-radius: 6px; padding: 5px; font-size: 12px; }
.eg .egpic { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 4px; }

/* ---------------- phones ---------------- */
@media (max-width: 640px) {
  #objective { font-size: 13px; max-width: calc(100vw - 80px); }
  .inv { grid-template-columns: 1fr; }
  .inv .grid { grid-template-columns: repeat(3, 1fr); }
  .detail .dpic { max-height: 170px; }
  .tcard .tpic { width: 84px; height: 60px; }
  .tcard { font-size: 14px; }
  #think { font-size: 15px; }
  #subs { font-size: 14px; }
  #modal { padding: 4px; }
  #modal-body { padding: 10px; }
  .tabs .tab { padding: 5px 8px; font-size: 13px; }
  #modal-body .paper { font-size: 15px; padding: 12px; }
  .rcard { width: 44vw; }
  #pickup { top: 104px; }
}
@media (max-height: 460px) {
  #toast { bottom: 96px; }
  #think { bottom: 66px; }
  #subs { bottom: 38px; }
  .panelpic { max-height: 120px; }
  body.touch #toast { bottom: 150px; }
  body.touch #think { bottom: 122px; }
  body.touch #subs { bottom: 96px; }
}