/* The extra life in the room. Change these without touching the scene geometry. */
.room-object { padding: 0; cursor: pointer; transition: filter .18s; }
.room-object:hover, .room-object:focus-visible { filter: brightness(1.25); }
.room-object:focus-visible { outline: 2px dashed var(--accent); outline-offset: 7px; }
.plant .leaves { display: block; }
.plant.watered .leaves { animation: plant-thanks 1s ease-in-out 2; color: #8ea66c; }
.keyboard .key-rows { display: block; margin: 0; width: 100%; height: 17px; background: repeating-linear-gradient(90deg,transparent 0 12px,#8f987a 12px 15px),repeating-linear-gradient(0deg,#35482f 0 3px,#65775a 3px 6px,#919a7a 6px 8px); border: 0; }
.mug:before { content: '∿'; position: absolute; color: #adb79a; top: -32px; left: 11px; font-size: 23px; opacity: .45; animation: steam 4s ease-in-out infinite; pointer-events: none; }
.system-tools { display: flex; align-items: center; gap: 13px; }
.system-tools button { font-size: 10px; padding: 6px 2px; color: var(--accent); }
.discovery-link { padding: 8px 0 0; font-size: 9px; color: var(--accent); text-align: left; }
.room-complete .journal-counter { color: #e5c786; text-shadow: 0 0 8px #dbc079; }
.room-toast { position: fixed; z-index: 30; bottom: 30px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 30px); padding: 14px 20px; background: #1d2e20; color: #d6dfbb; border: 1px solid #7b9163; box-shadow: 5px 5px #060d08aa; font-size: 11px; line-height: 1.6; pointer-events: none; }
.intro .room-object { pointer-events: none; }

/* Native dialog supplies focus trapping, Escape handling and focus restoration. */
#room-dialog { width: 560px; max-width: calc(100vw - 30px); max-height: min(80svh, 700px); padding: 0; border: 2px solid #8fa277; color: var(--ink); background: var(--screen); box-shadow: 7px 7px #020a07b3; font: 12px/1.7 'Courier New', monospace; scrollbar-width: thin; scrollbar-color: var(--muted) var(--screen); }
#room-dialog::backdrop { background: #030a07b3; backdrop-filter: blur(2px); }
.dialog-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #354a2c; border-bottom: 1px solid #7d9163; color: #dce4c6; font-size: 10px; letter-spacing: 1px; }
#close-dialog { font-size: 22px; width: 30px; height: 30px; line-height: 1; }
#dialog-content { padding: 24px; }
.journal-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.journal-emblem { font-size: 40px; color: var(--accent); }
.journal-intro h2 { font-size: 19px; margin: 0; font-weight: normal; letter-spacing: -.6px; }
.journal-intro p { font-size: 10px; color: var(--muted); margin: 3px 0 0; }
.journal-intro>b { margin-left: auto; color: var(--accent); font-size: 20px; font-weight: normal; }
.find-row { display: flex; gap: 15px; padding: 12px 0; border-top: 1px dashed var(--line); }
.find-row>span { width: 24px; flex-shrink: 0; color: var(--muted); font-size: 12px; padding-top: 1px; }
.find-row.found>span { color: var(--accent); }
.find-row h3 { font-size: 12px; font-weight: normal; margin: 0 0 3px; color: var(--muted); }
.find-row.found h3 { color: var(--ink); }
.find-row p { font-size: 10px; color: var(--muted); margin: 0; }
.desk-inventory { padding: 18px 0 0; margin-top: 16px; border-top: 1px solid var(--line); }
.desk-inventory>div { display: flex; flex-wrap: wrap; gap: 8px; }
.desk-inventory button { border: 1px solid var(--line); padding: 8px 11px; font-size: 11px; }
.desk-inventory button:hover { background: #43563566; }
.save-note { font-size: 9px; color: var(--muted); line-height: 1.7; margin: 13px 0 0; }
.letter-button { width: 100%; margin: 16px 0; }
.recovered-letter { white-space: pre-wrap; line-height: 2; font-size: 13px; color: var(--accent); margin: 0; }
.fortune-art { white-space: pre; font-size: 23px; line-height: 1.15; text-align: center; color: var(--accent); margin: 10px auto 22px; }
.fortune-copy { font-size: 17px; line-height: 1.8; margin-bottom: 25px; }
.plant-art { font-size: 48px; line-height: 1; text-align: center; color: #a8c188; margin: 15px; }
.handwritten-note { color: var(--accent); font-size: 14px; line-height: 1.9; }
.terminal-log { height: 240px; overflow-y: auto; font-size: 12px; line-height: 1.7; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.terminal-log p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 15px; }
.terminal-command { color: var(--accent); }
#terminal-form { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 13px; margin-top: 10px; font-size: 11px; }
#terminal-form label { color: var(--accent); flex-shrink: 0; }
#terminal-input { background: transparent; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); width: 100%; min-width: 0; padding: 8px 3px; outline-offset: 2px; }
#terminal-form>button { font-size: 18px; padding: 5px; }
.terminal-shortcuts { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 17px; }
.terminal-shortcuts button { padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 10px; color: var(--muted); }

/* Toys use DOM buttons so mouse, touch and keyboard all work. */
.toy-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
#page[data-section=experiments] { padding-top: 12px; }
#page[data-section=experiments]>.eyebrow, #page[data-section=experiments]>.body-copy { display: none; }
#page[data-section=experiments]>.page-title { font-size: 21px; margin-bottom: 10px; }
#page[data-section=experiments] .toy-tabs { margin: 8px 0 12px; }
.toy-tabs button { text-align: left; font-size: 10px; padding: 9px; }
.toy-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; letter-spacing: 1px; color: var(--accent); padding-bottom: 10px; border-bottom: 1px dashed var(--line); text-align: left; }
.toy-heading span:last-child { color: var(--muted); font-size: 7px; }
.toy-instructions { display: block; font-size: 10px; line-height: 1.8; color: var(--ink); margin: 12px 0; }
.firefly-box { background: radial-gradient(ellipse at center,#33452866,transparent 75%),#101d13; }
.firefly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 222px; margin: 16px auto; }
.firefly-cell { height: 43px; padding: 0; background: #17261a; border: 1px solid #42553a; color: #68795d; font-size: 21px; position: relative; transition: background .16s; }
.firefly-cell[aria-pressed=true] { background: #55603a; border-color: #b7b878; color: #f0e5a3; box-shadow: inset 0 0 15px #c2c4781f,0 0 8px #c2c47818; }
.firefly-cell[aria-pressed=true] span { display: inline-block; animation: firefly-breathe 3s ease-in-out infinite; }
.firefly-cell:nth-child(3n) span { animation-delay: -1s; }
.firefly-cell:nth-child(2n) span { animation-delay: -2s; }
.firefly-cell.hinted { outline: 2px dashed var(--accent); outline-offset: 3px; }
.firefly-cell:disabled { cursor: default; }
.puzzle-status { font-size: 10px; line-height: 1.7; min-height: 17px; color: var(--accent); }
.toy-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.toy-actions .retro-button { font-size: 9px; padding: 8px 9px; }
.retro-button:disabled { opacity: .4; cursor: default; }
.paint-palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.swatch { width: 28px; height: 28px; padding: 0; border: 1px solid #8b9e77; }
.swatch[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 3px; }
.paint-grid { display: grid; grid-template-columns: repeat(12,1fr); max-width: 312px; margin: 16px auto; border: 3px solid #c3c6a2; background: #142119; }
.paint-cell { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid #9eac8922; user-select: none; }
.paint-cell:focus-visible { outline: 2px solid white; outline-offset: -2px; z-index: 1; }
.paint-cell:hover { box-shadow: inset 0 0 0 1px #e4e8c1; }
.ink-0 { background: #142119; }.ink-1 { background: #77945c; }.ink-2 { background: #dce0b1; }.ink-3 { background: #d6ad68; }.ink-4 { background: #b76d63; }.ink-5 { background: #71999c; }
.sky-box { background: radial-gradient(ellipse at bottom,#273830,transparent 80%),#0b1916; }
.sky-box .star-field { grid-template-columns: repeat(8,1fr); max-width: 320px; margin: 18px auto; }
.sky-box .star-cell { min-height: 27px; font-size: 18px; }
.radio-box { background: #17251b; }
.radio-box .radio-wave { margin: 20px 0; opacity: .4; }
.radio-box.has-signal .radio-wave { color: var(--accent); opacity: 1; }
.radio-scale { display: flex; justify-content: space-between; font-size: 8px; margin: -8px 0 16px; color: var(--muted); }
#radio-frequency { display: block; color: var(--accent); font-size: 25px; letter-spacing: 2px; }
.radio-message { white-space: pre-line; font-size: 11px; min-height: 55px; }
.radio-buttons { display: flex; justify-content: center; gap: 9px; }
[data-phosphor=amber] { --screen:#241e14;--ink:#e0c28a;--muted:#b6a179;--accent:#e6bc72;--line:#645036; }
[data-phosphor=ice] { --screen:#13222a;--ink:#b4d5d4;--muted:#8aafad;--accent:#bcd9e4;--line:#3b5961; }
[data-phosphor=amber] .operating-system { background:#241e14; }
[data-phosphor=ice] .operating-system { background:#13222a; }
[data-phosphor=amber] .page-title,[data-phosphor=amber] h1 { color:#e0c28a; }
[data-phosphor=ice] .page-title,[data-phosphor=ice] h1 { color:#b4d5d4; }
@keyframes steam { 0%,100% { opacity:0;transform:translateY(3px) } 45% { opacity:.45 } 80% { opacity:0;transform:translateY(-13px) } }
@keyframes plant-thanks { 25% { transform:rotate(-8deg) } 75% { transform:rotate(8deg) } }
@keyframes firefly-breathe { 50% { opacity:.6;transform:scale(.85) } }
@media(min-width:801px) {
  .toy-tabs{grid-template-columns:repeat(4,1fr)}
  .toy-tabs button{font-size:8px;padding:8px 6px}
  .firefly-box{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;text-align:left}
  .firefly-box .toy-heading{grid-column:1/-1}
  .firefly-box .toy-instructions{grid-column:1;grid-row:2;font-size:11px;margin-top:16px}
  .firefly-grid{grid-column:2;grid-row:2/5;width:100%;margin:16px 0 0;gap:6px}
  .firefly-cell{height:38px}
  .firefly-box .puzzle-status{grid-column:1;grid-row:3;margin:5px 0}
  .firefly-box .toy-actions{grid-column:1;grid-row:4;justify-content:flex-start;align-content:start;margin-top:8px}
  .firefly-box .save-note{grid-column:1/-1;margin-top:8px}
  .paint-box .toy-instructions{display:none}
  .paint-box{display:grid;grid-template-columns:1fr 190px;gap:8px 15px}
  .paint-box .toy-heading{grid-column:1/-1}
  .paint-palette{grid-column:1;grid-row:2;align-content:center;margin:15px 0}
  .paint-grid{grid-column:2;grid-row:2/4;width:100%;margin:10px 0}
  .paint-box .toy-actions{grid-column:1;grid-row:3;align-content:start;margin:0}
  .paint-box .save-note{grid-column:1/-1;margin-top:0}
}
@media(max-width:800px) { .system-tools{gap:8px}.system-tools button{font-size:9px}.toy-tabs button{font-size:9px}.toy-heading{letter-spacing:.5px}.toy-heading span:last-child{display:none} }
@media(max-width:800px) {
  .firefly-grid{max-width:180px;gap:5px;margin:10px auto}
  .firefly-cell{height:32px}
  .firefly-box .toy-instructions{margin:8px 0;font-size:9px;line-height:1.6}
  .firefly-box .puzzle-status{font-size:9px;margin:8px 0}
  .firefly-box .toy-actions{margin:8px 0}
  .firefly-box .save-note{margin-top:6px;font-size:8px}
  .firefly-box .toy-heading{padding-bottom:6px}
}
@media(max-width:480px) { .keyboard .key-rows{height:13px}.system-clock{display:none}.system-tools{gap:7px}.system-bar{padding:0 7px}.version{display:none}.toy-tabs button{font-size:8px;padding:8px 6px}.toy-actions{gap:5px}.toy-actions .retro-button{font-size:8px;padding:8px 6px}.toy-instructions{font-size:10px}.firefly-grid{gap:6px;margin:14px auto}.firefly-cell{height:37px}.sky-box .star-cell{min-height:25px}.swatch{width:23px;height:23px}.paint-palette{gap:7px}.journal-intro h2{font-size:15px}.journal-intro{gap:9px}.journal-emblem{font-size:30px}#dialog-content{padding:18px}.fortune-copy{font-size:15px}.terminal-log{font-size:11px}#terminal-form{font-size:10px;gap:5px}.dialog-bar{font-size:8px;padding:7px 10px}.room-toast{font-size:10px;bottom:15px}.outside-footer>div{gap:9px}.outside-footer button{font-size:9px} }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after{animation:none!important;transition:none!important} }
@media(max-width:480px) {
  #page[data-section=experiments]>.page-title{font-size:18px;letter-spacing:-.8px}
  .firefly-box .firefly-grid{gap:4px;margin:8px auto}
  .firefly-box .firefly-cell{height:30px}
  .firefly-box .toy-actions{gap:4px;margin:6px 0}
  .firefly-box .puzzle-status{margin:6px 0}
}