/**
 * reset.css
 * Base reset + global chrome shared by every scene: the top notice-board
 * rail, the cassette power button + track selector, the pixel tooltip,
 * and the toast notification. Loaded first, after design-system tokens.
 */
:root{
  --pin-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%236b5936'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23a68d5c'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%236b5936'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23d9c48a'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%23a68d5c'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%236b5936'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%238a3b2c'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%234f2117'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23120e0b'/%3E%3C/svg%3E");
  --bookmark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='6' height='11' fill='%238a3b2c'/%3E%3Crect x='0' y='11' width='6' height='1' fill='%234f2117'/%3E%3Crect x='1' y='12' width='4' height='1' fill='%234f2117'/%3E%3Crect x='2' y='13' width='2' height='1' fill='%234f2117'/%3E%3Crect x='0' y='0' width='6' height='2' fill='%23a8503c'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html,body{margin:0;background:var(--surface-bg);color:var(--text-primary);font-family:var(--font-serif);overflow-x:hidden}
button{font-family:inherit}
.hidden{display:none !important}
.scene{position:fixed;top:34px;left:0;right:0;bottom:0;overflow:auto}

/* -------- notice-board rail (global top bar) -------- */
.rail{position:fixed;top:0;left:0;right:0;height:34px;z-index:100;background:linear-gradient(180deg,#2E2118,#28211a);background-image:var(--texture-cork);background-size:400px 400px;border-bottom:4px solid #3a2617;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#e9dcbc;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* -------- pixel tooltip (used by rail + book turn-zones) -------- */
.pixel-tooltip{position:fixed;z-index:300;background:var(--surface-panel-raised);border:2px solid var(--border-strong);padding:6px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);box-shadow:var(--shadow-pixel-sm);pointer-events:none;opacity:0;transition:opacity 100ms}
.pixel-tooltip.show{opacity:1}
.pixel-tooltip::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--surface-panel-raised);border-right:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong)}

/* -------- toast (bottom-center confirmation, e.g. "bookmarked", censor notice) -------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(0);background:var(--surface-panel);border:1px solid var(--border-strong);box-shadow:var(--shadow-pixel-md);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;padding:12px 18px;z-index:200;opacity:0;transition:opacity 200ms,transform 200ms}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)}

/* -------- cassette power button (top-right) -------- */
.tape-btn{position:fixed;top:5px;right:16px;z-index:110;width:46px;height:24px;background:linear-gradient(180deg,var(--ink-600),var(--ink-850));border:2px solid var(--ink-950);box-shadow:var(--shadow-pixel-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;padding:0;overflow:hidden}
.tape-btn .tape-led{width:7px;height:7px;background:var(--rust-700);border:1px solid #000;box-shadow:inset 0 0 2px rgba(0,0,0,.7);position:relative}
.tape-btn.playing .tape-led{background:var(--brass-500);box-shadow:0 0 5px var(--brass-500);animation:tapeglow 2.4s ease-in-out infinite}
.tape-btn.playing .tape-led::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,rgba(217,196,138,.7),rgba(217,196,138,.25) 55%,transparent 75%);filter:blur(2px);z-index:-1}
.tape-btn:active{transform:translate(1px,1px);box-shadow:none}
@keyframes tapeglow{0%,100%{opacity:1}50%{opacity:.72}}

/* -------- track selector (top-left) -------- */
.track-btn{position:fixed;top:5px;left:16px;z-index:110;height:24px;background:linear-gradient(180deg,var(--ink-600),var(--ink-850));border:2px solid var(--ink-950);box-shadow:var(--shadow-pixel-sm);cursor:pointer;display:flex;align-items:center;gap:6px;padding:0 10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-200)}
.track-btn .reel{width:8px;height:8px;border:1px solid var(--brass-500);border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-850)}
.track-panel{position:fixed;top:34px;left:16px;z-index:110;width:230px;background:var(--surface-panel);border:2px solid var(--border-strong);box-shadow:var(--shadow-pixel-md);padding:6px;display:none}
.track-panel.show{display:block}
.track-item{padding:8px 10px;font-family:var(--font-mono);font-size:11px;color:var(--text-primary);cursor:pointer;border-bottom:1px solid var(--border-subtle)}
.track-item:last-child{border-bottom:none}
.track-item:hover{background:var(--surface-panel-raised)}
.track-item.active{color:var(--brass-500)}
.track-item .tc{display:block;font-size:9px;color:var(--text-secondary);margin-top:2px;text-transform:none;letter-spacing:0}