:root {
  --fs: 1;
  --ink: #23302c;
  --paper: #fffdf6;
  --panel: rgba(252, 250, 244, 0.97);
  --line: #d8d2c2;
  --accent: #3a7a5a;
  --accent2: #e8a040;
  --warn: #c0502a;
  --ok: #2e7a4a;
  --dim: #6a7470;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #dfe8ea; color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif; font-size: calc(15px * var(--fs)); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 0.85em; }
button { font-family: inherit; }

/* ---- title ---- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at top, #fff6dc 0%, #f2ead6 45%, #dfe6dc 100%); overflow-y: auto; padding: 16px; }
.title-box { max-width: 720px; text-align: center; }
.logo { font-size: calc(46px * var(--fs)); font-weight: 700; color: #2f5e46; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 14px; }
.logo .sun { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffd27a, #e8a040); box-shadow: 0 0 24px #f4c870; }
.sub { margin: 4px 0 14px; color: #5a6a60; }
.lead { line-height: 1.9; margin: 0 0 18px; }
.hint { color: var(--dim); font-size: 0.85em; line-height: 1.8; }
.notice { font-size: 0.8em; color: #7a6a4a; background: #fff8e6; border: 1px solid #ecdcb4; padding: 6px 10px; border-radius: 8px; }

/* ---- buttons ---- */
.btn { font: inherit; font-size: 0.95em; padding: 8px 14px; margin: 3px; border-radius: 10px; border: 1px solid #b8b0a0; background: #fff; color: var(--ink); cursor: pointer; }
.btn:hover:not(:disabled) { background: #f4efe2; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #2f6a4c; }
.btn.big { font-size: 1.15em; padding: 11px 34px; margin: 6px; }
.btn.small { font-size: 0.82em; padding: 4px 9px; }
.btn.ghost { background: transparent; border-style: dashed; color: var(--dim); }
.btn.consult { background: #fff4dc; border-color: #e8c47a; }
.btn.choice { display: block; width: 100%; text-align: left; margin: 5px 0; }
.btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn .note { display: block; font-size: 0.8em; color: var(--dim); }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(40, 60, 50, 0.7); box-shadow: 0 0 0 1px #fff; }
#crosshair.on { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: transparent; border: 3px solid var(--accent2); }
#prompt { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); background: rgba(255, 253, 246, 0.94); padding: 4px 12px; border-radius: 8px; font-weight: 700; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#prompt:empty { display: none; }
#hud-left { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, 70vw); }
#objective { background: rgba(255, 253, 246, 0.9); border-radius: 12px; padding: 8px 12px; line-height: 1.6; border: 1px solid var(--line); }
#objective .day { font-weight: 700; color: #2f5e46; }
#objective .phase { background: #e8f2e8; padding: 0 8px; border-radius: 6px; margin-left: 4px; }
#objective .now { font-weight: 700; color: #a05a10; }
#objective .more { color: var(--dim); font-size: 0.9em; }
#objective .hold { color: #7a5a9a; font-size: 0.9em; }
#say { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); max-width: min(760px, 92vw); background: rgba(255, 253, 246, 0.96); padding: 10px 18px; border-radius: 12px; line-height: 1.8; opacity: 0; transition: opacity 0.3s; border: 1px solid var(--line); text-align: center; }
#say.on { opacity: 1; }
#toasts { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: min(420px, 60vw); }
.toast { background: rgba(255, 253, 246, 0.96); border-left: 4px solid var(--accent2); padding: 7px 12px; border-radius: 8px; transition: opacity 0.6s, transform 0.6s; line-height: 1.6; }
.toast.ok { border-left-color: var(--ok); }
.toast.out { opacity: 0; transform: translateX(20px); }
#keys { position: absolute; left: 12px; bottom: 10px; font-size: 0.8em; color: #334; background: rgba(255, 255, 255, 0.7); padding: 3px 8px; border-radius: 6px; }
#debug { position: absolute; right: 8px; bottom: 6px; font: 11px monospace; color: #333; white-space: pre; }
#fade { position: fixed; inset: 0; background: #fffaf0; opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 15; }
#fade.on { opacity: 1; }

/* ---- windows ---- */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.win-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40, 50, 45, 0.28); pointer-events: auto; padding: 10px; }
.win { background: var(--panel); border-radius: 16px; width: min(620px, 96vw); max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.win.wide { width: min(1080px, 97vw); }
.win-head { padding: 12px 16px 8px; border-bottom: 1px solid var(--line); position: relative; }
.win-title { font-weight: 700; font-size: 1.12em; color: #2f5e46; padding-right: 30px; }
.win-sub { color: var(--dim); font-size: 0.9em; }
.win-x { position: absolute; right: 10px; top: 8px; border: none; background: none; font-size: 22px; cursor: pointer; color: var(--dim); }
.win-body { padding: 12px 16px; overflow-y: auto; line-height: 1.7; }
.win-foot { padding: 8px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.caseid { font-size: 0.75em; color: var(--dim); font-weight: 400; }
.sec { font-weight: 700; color: #2f5e46; margin: 10px 0 4px; border-bottom: 2px solid #e8e0cc; }
.intro { color: #4a5a52; }
.bubble { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.q { font-weight: 700; margin: 10px 0 4px; }

/* the task window: paper on the left, the work on the right */
.task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; }
.task-goal { background: #eef6ee; border-radius: 8px; padding: 5px 10px; font-size: 0.9em; margin-bottom: 8px; }
.speech { background: #fffbe8; border: 1px solid #ecdcb4; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.fb { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #f2f2ee; }
.fb.bad { background: #fdebe4; border: 1px solid #f0b8a0; }
.fb.ok { background: #e6f4ea; border: 1px solid #a8d8b8; }
.fb.consult { background: #fff4dc; border: 1px solid #e8c47a; }
.decide { margin-top: 6px; }
table.check { width: 100%; border-collapse: collapse; font-size: 0.92em; margin: 4px 0 8px; }
table.check th, table.check td { border-bottom: 1px solid #e6e0d0; padding: 5px 6px; text-align: left; vertical-align: middle; }
table.check th { color: var(--dim); font-weight: 500; font-size: 0.85em; }
table.check tr.hl td { background: #fff1d6; }
.mark.ok { color: var(--ok); font-weight: 700; }
.mark.warn { color: var(--warn); font-weight: 700; }

/* prescription slip */
.rx { background: #fff; border: 2px solid #9ab8a8; border-radius: 6px; padding: 10px 12px; font-size: 0.92em; }
.rx-head { display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid #c8d8d0; padding-bottom: 4px; margin-bottom: 6px; }
.rx-head b { font-size: 1.15em; letter-spacing: 0.3em; color: #2a5a46; }
.rx-head span { color: var(--dim); font-size: 0.85em; }
.rx-no { margin-left: auto; color: #a05a10 !important; font-weight: 700; }
.rx-row { display: grid; grid-template-columns: 4.5em 1fr 4.5em 1fr; gap: 2px 8px; margin: 2px 0; }
.rx-row span { color: var(--dim); font-size: 0.85em; }
.rx-lines { width: 100%; border-collapse: collapse; margin-top: 6px; }
.rx-lines th, .rx-lines td { border: 1px solid #d8e2dc; padding: 3px 5px; font-size: 0.92em; }
.rx-lines th { background: #eef4f0; font-weight: 500; }
.smudge { color: #9a8a7a; font-style: italic; background: repeating-linear-gradient(45deg, #eee 0 3px, #ddd 3px 6px); }
.blank { display: inline-block; min-width: 2em; border-bottom: 1px dashed #aaa; }
.stamp { display: inline-block; margin-top: 6px; color: #c0502a; border: 2px solid #c0502a; padding: 2px 10px; border-radius: 6px; font-weight: 700; transform: rotate(-3deg); }

/* shelf picking */
.shelfui { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px; background: #eef0ec; border-radius: 8px; }
.box { position: relative; text-align: left; background: #fff; border: 1px solid #c8c4b8; border-radius: 6px; padding: 14px 6px 5px; cursor: pointer; font: inherit; font-size: 0.8em; line-height: 1.35; display: flex; flex-direction: column; }
.box .band { position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 6px 6px 0 0; }
.box .slot { color: var(--dim); font-size: 0.85em; }
.box .nm { font-size: 1.05em; }
.box .var { font-weight: 700; font-size: 1.05em; }
.box .var.S1 { color: #1e4a8a; }
.box .var.S2 { color: #a02020; }
.box .lot { color: var(--dim); font-size: 0.85em; }
.box.sel { outline: 3px solid var(--accent2); }
.pickpanel { margin: 6px 0; min-height: 1em; }
.pickpanel .count { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; }
.trayui { background: #e8f0f6; border: 2px solid #8ab4d8; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.trayhead { font-weight: 700; color: #2a5a7a; }
.trayitem { display: flex; justify-content: space-between; align-items: center; }

.convo { max-height: 160px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.convo:empty { display: none; }
.convo .me { color: #2a5a46; }
.convo .them { color: #5a4a3a; margin-bottom: 4px; }
.topics .btn.choice { margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { font: inherit; padding: 6px 12px; border-radius: 16px; border: 1px solid #b8b0a0; background: #fff; cursor: pointer; text-align: left; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chk { display: block; margin: 6px 0; }
.ehr { background: #fff; border: 1px solid #9ab0c8; border-radius: 6px; padding: 8px 10px; }
.ehr-head { font-weight: 700; color: #2a4a6a; }
.ehr .old { background: #fdf0e8; padding: 4px 8px; margin-top: 6px; border-radius: 6px; }
.slip { background: #fff; border: 1px solid #c8b890; border-radius: 6px; padding: 8px; }
.slip-head { font-weight: 700; margin-bottom: 4px; }
.slip table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.slip td, .slip th { border: 1px solid #e0d8c4; padding: 3px 4px; }
.slip .warn, b.warn { color: var(--warn); }
b.cold { color: #2a6a9a; }
.card-howto { background: #f4f8ff; border: 1px solid #b8c8e0; border-radius: 8px; padding: 8px 10px; }
.done-steps { margin: 4px 0 8px 1.2em; padding: 0; color: var(--ok); }
.walklist { line-height: 1.9; }
.row { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row select, td select { font: inherit; padding: 3px 6px; max-width: 100%; }
.traycol { font-weight: 700; }

/* schedule / handbook / report */
table.cases { width: 100%; border-collapse: collapse; font-size: 0.92em; }
table.cases td, table.cases th { border-bottom: 1px solid #e6e0d0; padding: 5px; text-align: left; vertical-align: top; }
table.cases tr.done td, table.cases tr.handover td { color: var(--dim); }
ul.flow { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
ul.flow li.done { color: var(--ok); }
dl.steps dt { font-weight: 700; margin-top: 6px; }
dl.steps dd { margin: 0 0 0 1em; }
table.shelf th { text-align: left; padding-right: 10px; vertical-align: top; }
.hintline { background: #fff4dc; padding: 6px 10px; border-radius: 8px; }
table.axes { border-collapse: collapse; margin: 6px 0; }
table.axes th { text-align: left; padding: 4px 14px 4px 0; font-weight: 500; }
table.axes td.stars { color: #e0a020; font-size: 1.25em; letter-spacing: 0.1em; padding-right: 12px; }
.caselist { line-height: 1.9; }
.settings label { display: block; margin: 8px 0; }
.settings input[type='range'] { width: 220px; vertical-align: middle; }

/* result (training complete) */
.win.result { width: min(560px, 96vw); }
.share-text { font-size: 0.85em; background: #fff; border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; text-align: left; }
.share-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 6px; }
.share-buttons button { font: inherit; padding: 9px 6px; border-radius: 10px; border: 1px solid #b8b0a0; background: #fff; cursor: pointer; }
.share-buttons .share-x { background: #000; color: #fff; border-color: #000; }
.share-buttons .share-fb { background: #1b4f9a; color: #fff; border-color: #1b4f9a; }
.share-buttons .share-line { background: #06a04a; color: #fff; border-color: #06a04a; }
.share-buttons .share-ig { background: linear-gradient(45deg, #f2a43a, #d9406a, #7a46c8); color: #fff; border: none; }
.share-note { min-height: 1.4em; color: #8a6a1a; font-size: 0.9em; }
.ask { font-weight: 700; color: #2f5e46; }

/* high contrast */
body.contrast { --panel: #ffffff; --line: #333; --dim: #333; }
body.contrast .btn { border-color: #222; }
body.contrast #objective, body.contrast #say, body.contrast #prompt { background: #fff; border: 2px solid #111; }

/* ---- touch ---- */
#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#t-look { position: absolute; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; }
#t-stick { position: absolute; left: 22px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(60, 80, 70, 0.4); pointer-events: auto; touch-action: none; }
#t-knob { position: absolute; left: 36px; top: 36px; width: 48px; height: 48px; border-radius: 50%; background: rgba(58, 122, 90, 0.6); }
#t-buttons { position: absolute; right: 14px; bottom: 22px; display: grid; grid-template-columns: repeat(3, auto); gap: 8px; pointer-events: auto; }
#t-buttons button, #t-menu { font: inherit; font-size: 13px; min-width: 58px; height: 46px; border-radius: 12px; border: 1px solid rgba(60, 80, 70, 0.5); background: rgba(255, 253, 246, 0.85); color: var(--ink); }
#t-buttons button.big { grid-row: span 2; height: 100px; font-size: 16px; background: rgba(232, 160, 64, 0.9); color: #fff; }
#t-buttons button.on { background: var(--accent); color: #fff; }
#t-menu { position: absolute; right: 12px; top: 12px; pointer-events: auto; min-width: 44px; }
body:has(#touch:not(.hidden)) #keys { display: none; }
body:has(#touch:not(.hidden)) #toasts { top: 64px; }

@media (max-width: 760px) {
  .task { grid-template-columns: 1fr; }
  .win { max-height: 96vh; }
  .win-body { padding: 10px 12px; }
  #objective { max-width: 62vw; font-size: 0.85em; padding: 6px 8px; }
  .rx-row { grid-template-columns: 4em 1fr; }
  .shelfui { max-height: 220px; }
}
@media (max-height: 520px) {
  .win { max-height: 98vh; }
  #objective { font-size: 0.8em; }
  #t-stick { width: 100px; height: 100px; bottom: 14px; }
  #t-knob { left: 26px; top: 26px; }
}

/* tutorial */
#guide { background: #fff4dc; border: 2px solid #e8c47a; border-radius: 12px; padding: 7px 12px; line-height: 1.6; }
#guide .guide-head { font-size: 0.8em; color: #8a6a1a; font-weight: 700; }
ul.rules li, ol.card-points li { margin: 6px 0; line-height: 1.7; }
ol.card-points { font-size: 1.05em; }
.speech .who { font-weight: 700; color: #6a5a2a; }
@media (max-width: 760px) { #guide { font-size: 0.85em; } #hud-left { max-width: 62vw; } }