:root {
  color-scheme: dark;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --bg: #080b0d;
  --panel: rgba(9, 16, 19, 0.93);
  --line: rgba(134, 174, 177, 0.24);
  --text: #d8e0dd;
  --muted: #7f908e;
  --green: #91e6c2;
  --red: #e7827a;
  --amber: #dcb76f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .3; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.game {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 72% 22%, #17262a 0, #080b0d 44%, #050708 100%);
}

.office { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: .9; }
.office::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,8,.15), rgba(5,7,8,.75) 58%, rgba(5,7,8,.2)); }
.ceiling-lights { position: absolute; inset: 0 0 auto; height: 19%; background: linear-gradient(#11191c, rgba(9,13,15,.2)); border-bottom: 1px solid rgba(202,228,226,.06); }
.ceiling-lights i { position: absolute; top: 38%; width: 22%; height: 3px; background: #d7e3df; box-shadow: 0 0 18px rgba(195,226,220,.4); opacity: .55; transform: skewX(-25deg); }
.ceiling-lights i:nth-child(1) { left: 4%; }.ceiling-lights i:nth-child(2) { left: 39%; }.ceiling-lights i:nth-child(3) { right: 4%; }

.window { position: absolute; top: 16%; right: 4%; width: 45%; height: 55%; border: 1px solid rgba(126,167,170,.15); background: linear-gradient(rgba(6,13,18,.2), #0b171b); box-shadow: inset 0 0 90px #020405; }
.window::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 24.6%, rgba(143,178,181,.12) 24.8% 25%), repeating-linear-gradient(0deg, transparent 0 49.6%, rgba(143,178,181,.1) 49.8% 50%); }
.city { position: absolute; inset: 34% 5% 0; background: repeating-linear-gradient(90deg, #101e24 0 7%, transparent 7% 11%), repeating-linear-gradient(0deg, rgba(130,197,192,.14) 0 2px, transparent 2px 17px); clip-path: polygon(0 20%, 8% 4%, 18% 25%, 31% 0, 42% 18%, 57% 5%, 71% 25%, 84% 9%, 100% 22%, 100% 100%, 0 100%); opacity: .65; }

.desks { position: absolute; inset: 50% 0 0 38%; transition: opacity 1s ease; }
.desk { position: absolute; width: 28%; height: 18%; border: 1px solid rgba(135,164,164,.16); background: linear-gradient(150deg, #182023, #0b0f11); transform: skewY(-8deg); box-shadow: 0 15px 30px rgba(0,0,0,.6); }
.desk-1 { left: 2%; top: 5%; }.desk-2 { left: 34%; top: 17%; }.desk-3 { left: 65%; top: 29%; }
.chair { position: absolute; width: 8%; height: 24%; border: 1px solid rgba(142,170,169,.13); border-radius: 45% 45% 10% 10%; background: #0d1214; transition: opacity 1.2s ease, transform 1.2s ease; }
.chair-1 { left: 13%; top: 26%; }.chair-2 { left: 46%; top: 39%; }.chair-3 { left: 77%; top: 50%; }
.game[data-day="2"] .chair-1, .game[data-day="3"] .chair-1, .game[data-day="3"] .chair-2 { opacity: 0; transform: translateY(30px); }

.dust { position: absolute; inset: 0; }
.dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #b9d1ca; opacity: 0; animation: dustFloat 12s linear infinite; }
@keyframes dustFloat { 0% { transform: translateY(30px); opacity: 0; } 30%,70% { opacity: .35; } 100% { transform: translate(20px,-90px); opacity: 0; } }

.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 28px clamp(22px, 5vw, 70px); }
.system-label { margin: 0 0 7px; color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .19em; }
h1 { margin: 0; font-size: clamp(20px, 2vw, 29px); font-weight: 500; letter-spacing: .27em; }
.sound-button { padding: 8px 11px; border: 1px solid var(--line); background: rgba(6,10,12,.45); color: var(--muted); font: 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.sound-button.active { color: var(--green); border-color: rgba(145,230,194,.45); }

.screen { position: absolute; inset: 0; transition: opacity .55s ease, visibility .55s ease; }
.hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.start-screen, .day-end-screen, .decision-screen, .ending-screen { display: grid; place-items: center; padding: 100px 24px 40px; background: rgba(4,6,7,.48); backdrop-filter: blur(4px); }

.intro-panel, .summary-panel, .decision-panel, .ending-card { width: min(720px, 92vw); padding: clamp(28px, 5vw, 62px); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(17,27,30,.95), rgba(6,10,12,.96)); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.status-line { margin: 0 0 28px; color: var(--green); font: 11px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.status-line span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.status-line.danger { color: var(--red); }.status-line.danger span { background: var(--red); box-shadow: 0 0 10px var(--red); }
.intro-panel h2, .summary-panel h2, .decision-panel h2, .ending-card h2 { margin: 0 0 24px; font-size: clamp(27px, 4vw, 46px); font-weight: 400; line-height: 1.45; letter-spacing: .04em; }
.intro-copy, .summary-panel > p, .decision-panel > p, .ending-card > p { color: #aebbb8; line-height: 2; }
.play-meta { display: flex; gap: 9px 18px; flex-wrap: wrap; margin: 22px 0 0; color: var(--muted); font: 10px/1.4 ui-monospace, monospace; letter-spacing: .08em; }
.play-meta span::before { content: "— "; color: var(--green); }
.play-meta span + span::before { content: "・ "; }

.value-field { display: block; margin-top: 34px; }
.value-field span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.value-field input { width: 100%; padding: 15px 2px; border: 0; border-bottom: 1px solid rgba(145,230,194,.4); outline: 0; background: transparent; color: #eef5f2; font-size: clamp(17px, 2vw, 22px); }
.value-field input:focus { border-color: var(--green); box-shadow: 0 8px 12px -12px var(--green); }
.primary-button { margin-top: 34px; padding: 13px 19px; border: 1px solid rgba(145,230,194,.45); background: rgba(145,230,194,.08); color: #dff8ed; letter-spacing: .1em; }
.primary-button:hover { background: rgba(145,230,194,.16); }
.privacy-note { margin: 12px 0 0; color: #657370; font-size: 10px; }
.resume-panel { display: inline-flex; align-items: center; gap: 14px; margin: 24px 0 0 20px; }
.resume-panel p { margin: 0; color: var(--muted); font: 10px/1.4 ui-monospace, monospace; }

.assessment-screen { padding: 110px clamp(22px, 5vw, 70px) 36px; }
.day-heading { width: min(52vw, 720px); }
.day-heading p { margin: 0 0 13px; color: var(--amber); font: 11px/1.4 ui-monospace, monospace; letter-spacing: .18em; }
.day-heading h2 { margin: 0; font-size: clamp(21px, 3vw, 38px); font-weight: 400; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }

.terminal { position: absolute; top: 104px; right: clamp(22px, 5vw, 70px); width: min(430px, 42vw); padding: 24px; border: 1px solid rgba(133,176,177,.31); background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.56), inset 0 0 40px rgba(62,115,113,.05); }
.terminal-top { display: flex; align-items: flex-start; justify-content: space-between; }
.terminal-top span { color: var(--muted); font: 9px/1.4 ui-monospace, monospace; letter-spacing: .14em; }
.terminal-top strong { display: block; margin-top: 3px; color: var(--green); font: 26px/1.2 ui-monospace, monospace; font-weight: 400; }
.token-counter { display: flex; gap: 7px; padding-top: 5px; }
.token-counter i { width: 18px; height: 8px; border: 1px solid var(--green); background: rgba(145,230,194,.25); box-shadow: 0 0 8px rgba(145,230,194,.2); transition: opacity .3s; }
.token-counter i.used { opacity: .13; box-shadow: none; }
.code-display { margin: 24px 0 17px; padding: 16px 10px; border: 1px solid rgba(142,178,177,.19); background: #030607; color: #d5ebe4; font: clamp(22px, 3vw, 32px)/1 ui-monospace, monospace; letter-spacing: .12em; text-align: center; text-shadow: 0 0 12px rgba(145,230,194,.25); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button { min-height: 43px; border: 1px solid rgba(128,160,160,.2); background: rgba(45,65,66,.14); font: 14px/1 ui-monospace, monospace; }
.keypad button:hover:not(:disabled) { border-color: rgba(145,230,194,.48); background: rgba(145,230,194,.09); }
.keypad .submit-key { color: var(--green); }
.terminal-hint { margin: 15px 0 0; color: var(--muted); font-size: 11px; }
.terminal-hint.empty { visibility: hidden; }
.terminal-hint button { padding: 0; border: 0; border-bottom: 1px dotted var(--amber); background: transparent; color: var(--amber); font-family: ui-monospace, monospace; }

.memo-panel { position: absolute; left: clamp(22px, 5vw, 70px); bottom: 38px; width: min(400px, 38vw); padding: 18px 20px; border-top: 1px solid var(--line); background: rgba(4,8,9,.56); }
.memo-panel > p { margin: 0 0 10px; color: var(--muted); font: 9px/1.4 ui-monospace, monospace; letter-spacing: .16em; }
.memo-panel ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 15px; max-height: 150px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.memo-panel li { color: #687674; font-size: 11px; }
.memo-panel button { display: flex; gap: 9px; width: 100%; padding: 5px 0; border: 0; background: transparent; text-align: left; }
.memo-panel strong { color: var(--amber); font: 11px/1.4 ui-monospace, monospace; }.memo-panel span { overflow: hidden; color: #879692; text-overflow: ellipsis; white-space: nowrap; }

.archive-panel { position: absolute; z-index: 8; left: clamp(22px, 7vw, 105px); right: clamp(22px, 7vw, 105px); bottom: 35px; min-height: 250px; padding: clamp(23px, 4vw, 42px); border: 1px solid rgba(153,184,183,.32); background: rgba(5,10,12,.97); box-shadow: 0 20px 90px rgba(0,0,0,.72); }
.archive-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 10px/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.archive-meta p { margin: 0; }.archive-speaker { margin: 25px 0 8px; color: var(--amber); font-size: 12px; letter-spacing: .14em; }
.archive-text { max-width: 900px; min-height: 65px; margin: 0; font-size: clamp(15px, 1.8vw, 21px); line-height: 2; }
.text-button { padding: 0 0 5px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--green); }
.archive-panel .text-button { display: block; margin: 24px 0 0 auto; }

.summary-rate { margin: 0 0 15px !important; color: var(--green) !important; font: clamp(45px, 9vw, 95px)/1 ui-monospace, monospace !important; letter-spacing: -.05em; }
.decision-buttons { display: grid; gap: 9px; margin-top: 30px; }
.decision-buttons button { padding: 14px 17px; border: 1px solid rgba(141,174,173,.25); background: rgba(90,112,112,.08); text-align: left; }
.decision-buttons button:hover { color: #fff; border-color: var(--red); background: rgba(231,130,122,.09); }
.ending-card { border-color: rgba(220,183,111,.3); }
.ending-card h2 { color: #f0e7d4; }
.ending-actions { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.muted { margin-bottom: 7px; color: #6f7c79; font-size: 11px; }

@media (max-width: 780px) {
  body { overflow: auto; }
  .game { min-height: 820px; }
  .topbar { padding: 20px; }
  .assessment-screen { padding: 90px 18px 20px; }
  .day-heading { width: 100%; }
  .day-heading h2 { font-size: 21px; }
  .terminal { top: 190px; right: 18px; left: 18px; width: auto; }
  .memo-panel { left: 18px; right: 18px; bottom: 22px; width: auto; }
  .memo-panel ol { grid-template-columns: repeat(2, 1fr); max-height: 105px; }
  .archive-panel { left: 12px; right: 12px; bottom: 16px; min-height: 310px; }
  .resume-panel { display: flex; align-items: flex-start; margin-left: 0; }
  .window { right: 0; width: 100%; opacity: .5; }
}

@media (max-height: 680px) and (min-width: 781px) {
  body { overflow: auto; }
  .game { min-height: 680px; }
  .start-screen, .day-end-screen, .decision-screen, .ending-screen { position: relative; min-height: 680px; padding-top: 88px; }
  .intro-panel, .summary-panel, .decision-panel, .ending-card { padding-top: 34px; padding-bottom: 34px; }
  .intro-panel h2, .summary-panel h2, .decision-panel h2, .ending-card h2 { margin-bottom: 17px; font-size: clamp(26px, 3.5vw, 38px); }
  .value-field { margin-top: 22px; }
  .primary-button { margin-top: 24px; }
  .assessment-screen { padding-top: 88px; }
  .terminal { top: 82px; transform: scale(.88); transform-origin: top right; }
  .memo-panel { bottom: 16px; }
  .archive-panel { min-height: 220px; bottom: 16px; }
}

@media (max-height: 760px) and (min-width: 781px) {
  .start-screen { align-items: start; overflow-y: auto; }
  .intro-panel { padding-top: 28px; padding-bottom: 28px; }
  .status-line { margin-bottom: 16px; }
  .intro-panel h2 { margin-bottom: 14px; font-size: clamp(26px, 3.1vw, 36px); line-height: 1.32; }
  .intro-copy { margin: 0; line-height: 1.7; }
  .play-meta { margin-top: 13px; }
  .value-field { margin-top: 16px; }
  .value-field input { padding-top: 10px; padding-bottom: 10px; }
  .primary-button { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}