:root { color-scheme: dark; --paper: #efe3cc; --ink: #2b1d15; --ember: #e2a35a; --wood: #5a3a24; --sp-menu-w: 0px; --sp-menu-h: 0px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b1d15; overflow: hidden; overscroll-behavior: none; }
body { font: 16px/1.4 Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; color: var(--paper); -webkit-tap-highlight-color: transparent; }
#room { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity 900ms ease; }
#room.on { opacity: 1; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 999px; }

/* title: the room is the title; only a wordmark and a way in */
#title { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: max(10vh, env(safe-area-inset-bottom) + 40px); background: radial-gradient(ellipse at 50% 60%, rgba(10,6,4,0.1), rgba(10,6,4,0.72)); transition: opacity 700ms ease; }
#title.away { opacity: 0; pointer-events: none; }
#title h1 { margin: 0 0 22px; font-weight: 300; font-size: clamp(40px, 9vw, 72px); letter-spacing: 0.22em; text-indent: 0.22em; color: var(--paper); text-shadow: 0 2px 24px rgba(255,170,80,0.25); }
.primary { padding: 12px 30px; border-radius: 999px; background: rgba(226,163,90,0.14); border: 1px solid rgba(226,163,90,0.55); color: var(--paper); letter-spacing: 0.12em; font-size: 17px; min-height: 48px; transition: background 200ms, transform 200ms; }
.primary:hover, .primary:active { background: rgba(226,163,90,0.28); transform: translateY(-1px); }
#title .sp-manual-button { margin-top: 22px; }

/* pause: a quiet mark top-left, away from the platform's corner top-right */
#pauseButton { position: fixed; left: calc(10px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; color: rgba(239,227,204,0.55); background: rgba(20,12,8,0.35); display: grid; place-items: center; }
#pauseButton:hover { color: var(--paper); }

/* break card, bottom centre, never over the lower-right 80 px */
#break { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 0); max-width: min(92vw, 420px); padding: 14px 18px 12px; border-radius: 16px; background: rgba(24,14,9,0.92); border: 1px solid rgba(226,163,90,0.3); text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.45); animation: rise 600ms ease; }
#break[hidden] { display: none; }
#break p { margin: 0 0 10px; letter-spacing: 0.04em; color: var(--paper); }
#break .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#break button { min-height: 44px; padding: 8px 18px; border-radius: 999px; }
#takeBreak { color: rgba(239,227,204,0.75); border: 1px solid rgba(239,227,204,0.22); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* pause sheet */
dialog { border: 0; padding: 0; background: transparent; color: var(--paper); max-width: min(92vw, 360px); width: 100%; }
dialog::backdrop { background: rgba(8,4,2,0.6); backdrop-filter: blur(2px); }
#pause { display: none; flex-direction: column; gap: 10px; padding: 26px 24px 22px; border-radius: 20px; background: rgba(32,20,13,0.96); border: 1px solid rgba(226,163,90,0.25); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
#pause[open] { display: flex; }
#pause h2 { margin: 0; font-weight: 300; letter-spacing: 0.2em; text-indent: 0.2em; text-align: center; font-size: 26px; }
#pause p { margin: 0 0 6px; text-align: center; color: rgba(239,227,204,0.6); font-size: 14px; letter-spacing: 0.06em; }
#pause button { min-height: 46px; border-radius: 999px; border: 1px solid rgba(239,227,204,0.18); letter-spacing: 0.08em; }
#pause button.primary { border-color: rgba(226,163,90,0.55); }
#pause button.warn { color: #e8a090; border-color: rgba(232,160,144,0.4); }

#turnHint { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); color: rgba(239,227,204,0.75); pointer-events: none; animation: sway 2.4s ease-in-out infinite; }
#turnHint[hidden] { display: none; }
@keyframes sway { 0%,100% { transform: translateX(-62%); } 50% { transform: translateX(-38%); } }
.nogl { max-width: 80vw; text-align: center; color: rgba(239,227,204,0.8); }
@media (prefers-reduced-motion: reduce) { #room, #title { transition: none; } #break { animation: none; } #turnHint { animation: none; } }
html[data-sleepy="1"] #title h1, html[data-sleepy="1"] #break p { color: #e6d2b2; }