:root { --paper:#f8f7ff; --ink:#29253b; --muted:#9693a8; --line:#e7e2f4; --cream:#fffdf9; --lavender:#b8a8ff; --purple:#5a438d; --purple-dark:#493476; --tiffany:#84ded2; --yellow:#ffd066; --wood:#b98862; --shadow:0 18px 45px rgba(72,53,122,.10); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 80% 0%,rgba(184,168,255,.14),transparent 34%),var(--paper); font-family:Manrope,'Noto Sans SC',sans-serif; -webkit-font-smoothing:antialiased; }
button { border:0; font:inherit; cursor:pointer; color:inherit; }
.app-shell { width:min(100%, 980px); margin:0 auto; padding:28px 34px 34px; }
.topbar,.topbar-actions,.brand-mark,.sync-state,.hero-copy,.date-chip,.room-toolbar,.room-title,.live-pill,.room-footer,.focus-heading,.focus-mode,.timer-actions,.micro-copy,.section-heading,.streak-badge,.stat-cards,.stat-card,.progress-copy,.app-footer { display:flex; align-items:center; }
.topbar { justify-content:space-between; }
.brand-mark { gap:9px; font-size:19px; letter-spacing:-.06em; font-weight:800; }.brand-mark small { color:#9a92ba; font-size:12px; letter-spacing:.18em; font-weight:700; }
.topbar-actions { gap:14px; }.sync-state { gap:7px; color:#9693a8; font-size:11px; }.sync-state i,.live-pill i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--tiffany); box-shadow:0 0 0 4px rgba(132,222,210,.18); }.icon-button { width:32px; height:32px; border-radius:50%; background:transparent; font-size:20px; color:#6c6585; transform:rotate(-30deg); }.avatar-button { width:32px; height:32px; border-radius:50%; background:var(--purple-dark); color:var(--cream); font-weight:700; font-size:12px; }
.hero-copy { justify-content:space-between; padding:57px 4px 25px; align-items:flex-end; }.eyebrow { color:#9a93b8; letter-spacing:.19em; font-family:'DM Mono',monospace; font-size:10px; margin:0 0 12px; }.hero-copy h1 { margin:0; font-size:39px; line-height:1.17; letter-spacing:-.07em; font-weight:800; }.hero-copy h1 em { font-style:normal; color:var(--purple); }.date-chip { gap:10px; color:#9693a8; font-size:12px; border:1px solid var(--line); border-radius:20px; padding:9px 14px; margin-bottom:5px; background:rgba(255,255,255,.42); }.date-chip b { color:var(--ink); font-weight:700; }
.room-card,.focus-panel,.stats-grid { background:var(--cream); border:1px solid rgba(224,218,244,.85); border-radius:24px; box-shadow:var(--shadow); }.room-card { overflow:hidden; }.room-toolbar { height:62px; justify-content:space-between; padding:0 25px; border-bottom:1px solid #eeeaf8; }.room-title { gap:10px; font-size:13px; font-weight:700; }.window-icon { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; background:#e5faf5; color:#4aaea6; font-size:14px; }.live-pill { gap:7px; margin-left:7px; color:#5d4a8b; background:#eee9ff; padding:5px 9px; border-radius:12px; font-size:10px; font-weight:600; }.room-more { background:none; color:#a19bb7; letter-spacing:2px; padding:8px; }
.room-more { font-size:22px; line-height:1; letter-spacing:0; }
.room-scene { height:480px; overflow:hidden; position:relative; background:linear-gradient(180deg,#eeebff 0 72%,#caa47f 72%); }.room-scene:after { content:''; position:absolute; left:0; right:0; bottom:0; height:92px; background:repeating-linear-gradient(92deg,transparent 0 115px,rgba(101,67,145,.09) 116px 118px); pointer-events:none; }.sunlight { position:absolute; top:0; left:27%; width:350px; height:255px; background:linear-gradient(115deg,rgba(255,255,255,.25),rgba(206,198,255,.48),transparent 70%); transform:skew(-17deg); }.window { position:absolute; width:154px; height:125px; top:27px; left:20%; border:8px solid #dcd2ff; border-bottom-width:11px; background:linear-gradient(180deg,#91e0db,#e7f8f5 65%,#a7c99b 66%); box-shadow:0 5px 0 rgba(73,52,118,.10); }.window:before,.window:after { content:''; position:absolute; background:#e4dcff; }.window:before { left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%); }.window:after { top:56%; left:0; right:0; height:6px; transform:translateY(-50%); }.cloud { position:absolute; width:25px; height:9px; border-radius:10px; background:rgba(255,255,255,.72); }.cloud:before { content:''; position:absolute; width:14px; height:14px; left:6px; bottom:2px; border-radius:50%; background:inherit; }.cloud-a { top:26px; left:16px; }.cloud-b { top:71px; right:18px; transform:scale(.7); }.window-sun { position:absolute; width:20px; height:20px; background:var(--yellow); border-radius:50%; right:20px; top:19px; }.window-sill { position:absolute; bottom:-20px; left:-13px; width:165px; height:15px; background:#e9e3ff; box-shadow:0 3px 0 rgba(73,52,118,.11); }
.wall-shelf { position:absolute; top:58px; right:18%; width:119px; height:8px; border-radius:2px; background:#8566bd; box-shadow:0 5px 0 rgba(73,52,118,.13); }.shelf-book { position:absolute; bottom:8px; width:12px; height:31px; border-radius:2px 2px 0 0; }.book-one { left:11px; background:var(--tiffany); transform:rotate(-3deg); }.book-two { left:26px; height:26px; background:#a79af0; transform:rotate(5deg); }.plant { position:absolute; right:12px; bottom:8px; width:31px; height:36px; }.plant b { position:absolute; bottom:0; left:7px; width:18px; height:12px; border-radius:2px 2px 7px 7px; background:#e3b97b; }.plant i { position:absolute; bottom:10px; left:13px; width:8px; height:22px; border-radius:100% 0 100% 0; background:#83c9ab; transform:rotate(-22deg); }.plant i:nth-child(2) { left:18px; transform:rotate(35deg) scale(.8); }
.wall-poster { position:absolute; top:34px; right:6%; width:70px; height:84px; background:#dcd0ff; color:var(--purple-dark); text-align:center; padding-top:10px; transform:rotate(3deg); box-shadow:2px 4px 0 rgba(73,52,118,.08); }.wall-poster span { font-size:10px; font-family:'DM Mono',monospace; }.wall-poster b { display:block; font-size:18px; line-height:.9; margin-top:8px; letter-spacing:-.08em; }
.floor-lamp { position:absolute; left:8%; bottom:63px; width:43px; height:161px; }.floor-lamp:before { content:''; position:absolute; bottom:0; left:21px; height:131px; width:3px; background:#6e648b; }.floor-lamp:after { content:''; position:absolute; bottom:0; left:4px; width:38px; height:5px; border-radius:50%; background:#6e648b; }.floor-lamp span { position:absolute; top:0; left:2px; width:39px; height:29px; background:var(--yellow); border-radius:50% 50% 7px 7px; box-shadow:0 12px 25px rgba(255,208,102,.42); }.floor-lamp i { position:absolute; top:25px; left:19px; height:7px; width:6px; background:#6e648b; }
.desk { position:absolute; right:11%; bottom:54px; width:294px; height:86px; }.desk-top { position:absolute; top:0; left:0; right:0; height:16px; border-radius:3px; background:var(--wood); box-shadow:0 4px 0 rgba(73,52,118,.12); }.desk-leg { position:absolute; top:14px; width:8px; height:90px; background:#9c704f; }.desk-leg-a { left:27px; transform:rotate(3deg); }.desk-leg-b { right:27px; transform:rotate(-3deg); }.monitor { position:absolute; left:102px; bottom:10px; width:73px; height:47px; border-radius:4px; background:var(--purple-dark); border:4px solid #8c7bb8; box-shadow:0 0 0 3px rgba(255,255,255,.12); color:#d4fff7; text-align:center; padding-top:8px; font-family:'DM Mono',monospace; font-size:10px; }.monitor i { display:block; width:42px; height:2px; margin:0 auto 7px; background:var(--tiffany); }.monitor:after { content:''; position:absolute; bottom:-10px; left:50%; width:19px; height:8px; background:#746293; transform:translateX(-50%); }.mug,.pencil-cup { position:absolute; bottom:5px; color:#f0d39a; font-size:18px; }.mug { right:53px; }.pencil-cup { left:34px; color:var(--tiffany); }
.rug { position:absolute; bottom:7px; left:23%; width:380px; height:61px; background:#b8a8e9; border-radius:50%; opacity:.6; }.dog-bed { position:absolute; right:15%; bottom:45px; width:128px; height:38px; border-radius:50%; background:#7d6abd; box-shadow:0 10px 0 rgba(73,52,118,.17); }.bed-pillow { position:absolute; left:21px; top:4px; width:84px; height:22px; border-radius:50%; background:#b8f0e7; }.bed-star { position:absolute; right:11px; top:10px; color:var(--yellow); font-size:12px; }
.dog { position:absolute; z-index:3; right:30%; bottom:50px; width:125px; height:138px; transition:transform .5s ease; }.dog-body { position:absolute; left:32px; bottom:0; width:76px; height:88px; border-radius:48% 48% 35% 35%; background:linear-gradient(90deg,#2d2940 0 17%,#fffdf9 17% 83%,#2d2940 83%); }.dog-head { position:absolute; top:19px; left:19px; z-index:4; width:93px; height:78px; border-radius:49% 49% 45% 45%; background:linear-gradient(90deg,#2d2940 0 25%,#fffdf9 25% 75%,#2d2940 75%); box-shadow:inset 4px 8px rgba(184,168,255,.16); }.dog-head:after { content:''; position:absolute; left:35px; bottom:-6px; width:26px; height:22px; border-radius:50%; background:#f6e7d2; }.dog-ear { position:absolute; z-index:3; top:16px; width:37px; height:55px; background:#2d2940; border-radius:50% 48% 48% 20%; }.dog-ear-left { left:5px; transform:rotate(-27deg); }.dog-ear-right { right:4px; transform:scaleX(-1) rotate(-27deg); }.dog-eye { position:absolute; top:31px; width:7px; height:9px; border-radius:50%; background:#29253b; }.eye-left { left:26px; }.eye-right { right:26px; }.dog-muzzle { position:absolute; left:31px; bottom:8px; width:31px; height:21px; border-radius:50%; background:#f6e7d2; }.dog-nose { position:absolute; z-index:2; left:42px; bottom:19px; width:10px; height:7px; border-radius:50%; background:#29253b; }.dog-mouth { position:absolute; z-index:3; left:46px; bottom:12px; width:9px; height:6px; border-bottom:2px solid #29253b; border-radius:50%; }.dog-blush { position:absolute; top:51px; width:10px; height:5px; border-radius:50%; background:#f2a8b8; opacity:.7; }.blush-left { left:13px; }.blush-right { right:13px; }.dog-leg { position:absolute; z-index:3; bottom:-2px; width:23px; height:40px; border-radius:0 0 13px 13px; background:linear-gradient(#2d2940 0 72%,#fffdf9 72%); }.leg-left { left:39px; }.leg-right { right:20px; }.dog-tail { position:absolute; z-index:1; right:3px; bottom:35px; width:54px; height:24px; border:10px solid #2d2940; border-left:0; border-radius:0 50% 50% 0; transform:rotate(-22deg); }.dog-collar { position:absolute; z-index:5; top:82px; left:28px; width:75px; height:9px; border-radius:10px; background:var(--tiffany); }.dog-tag { position:absolute; z-index:6; top:86px; left:61px; color:var(--yellow); font-size:13px; }.dog-bounce { animation:bounce 1.9s ease-in-out infinite; }.dog-working { transform:translateY(4px) rotate(-2deg); }.dog-happy { animation:happy .65s ease-in-out infinite alternate; }.thought-bubble { position:absolute; z-index:8; right:24%; top:77px; background:#fffdf9; padding:10px 13px; border:1px solid #e5dcff; border-radius:13px 13px 13px 3px; font-size:11px; color:var(--purple-dark); box-shadow:0 5px 17px rgba(73,52,118,.12); animation:float 3s ease-in-out infinite; }.thought-bubble:after { content:''; position:absolute; bottom:-5px; left:13px; width:10px; height:10px; background:#fffdf9; transform:rotate(45deg); border-right:1px solid #e5dcff; border-bottom:1px solid #e5dcff; }.spark { position:absolute; z-index:2; color:var(--yellow); font-size:16px; animation:float 2.8s ease-in-out infinite; }.spark-a { top:77px; left:34%; }.spark-b { bottom:64px; right:36%; animation-delay:1s; }.spark-c { top:53px; right:32%; font-size:25px; animation-delay:.4s; }
.room-footer { display:none; justify-content:space-between; min-height:65px; padding:13px 25px; }.room-footer strong,.room-footer span { display:block; }.room-footer strong { font-size:12px; margin-bottom:5px; }.room-footer div span { color:#9a93b8; font-size:10px; }.heart { color:#ec9ab6; font-size:18px; }
.focus-panel { margin-top:18px; padding:18px 31px 20px; }.focus-heading { justify-content:space-between; align-items:flex-start; }.focus-heading h2,.section-heading h2 { margin:0; font-size:21px; letter-spacing:-.06em; }.focus-mode { gap:5px; padding:4px; border:1px solid var(--line); border-radius:13px; }.focus-mode-standalone { margin-left:auto; }.mode-button { color:#a29bb7; background:transparent; border-radius:9px; padding:8px 11px; font-size:10px; }.mode-button.active { color:var(--purple-dark); background:#eee9ff; font-weight:700; }.timer-wrap { padding:21px 0 16px; display:grid; place-items:center; }.timer-ring { --progress:0deg; width:177px; height:177px; padding:9px; border-radius:50%; background:conic-gradient(var(--purple) var(--progress),#ebe8f8 0); position:relative; }.timer-ring:before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(90,67,141,.1); }.timer-inner { height:100%; width:100%; background:#fffdf9; border-radius:50%; display:flex; align-items:center; flex-direction:column; justify-content:center; }.timer-label { font-size:10px; color:#a29bb7; margin-bottom:3px; }.timer-inner strong { font-size:39px; letter-spacing:-.1em; line-height:1.15; font-variant-numeric:tabular-nums; }.timer-hint { font-size:9px; color:#aaa5b9; margin-top:7px; }.timer-actions { justify-content:center; gap:10px; }.primary-button,.secondary-button { height:42px; border-radius:12px; padding:0 22px; font-size:12px; font-weight:700; }.primary-button { background:var(--purple-dark); color:#fffdf9; box-shadow:0 7px 15px rgba(73,52,118,.22); min-width:142px; }.primary-button:hover { background:#3d2a69; transform:translateY(-1px); }.secondary-button { background:#f2effc; color:#82769f; min-width:78px; }.play-icon { font-size:10px; margin-right:7px; }.focus-total { display:flex; justify-content:center; align-items:baseline; gap:7px; margin-top:16px; color:#9a93b8; font-size:10px; }.focus-total strong { color:var(--purple-dark); font-size:12px; }.micro-copy { justify-content:center; gap:7px; color:#aaa5b9; font-size:9px; margin-top:14px; }.micro-copy strong { color:#c98c3f; font-size:11px; }.micro-copy small { font-size:9px; font-weight:500; }.micro-separator { color:#d3cde6; }
.scene-selector { margin-top:18px; padding:16px 20px 17px; background:var(--cream); border:1px solid rgba(224,218,244,.85); border-radius:20px; box-shadow:var(--shadow); }.scene-selector-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; color:var(--purple-dark); font-size:12px; font-weight:700; }.scene-selector-head small { color:#a29bb7; font-size:10px; font-weight:500; }.scene-options { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.scene-option { min-width:0; padding:0 0 8px; overflow:hidden; border:1px solid #e9e4f5; border-radius:13px; background:#fffdf9; color:#82769f; font-size:10px; transition:.2s ease; }.scene-option:hover { transform:translateY(-1px); border-color:#b8a9dc; }.scene-option.active { color:var(--purple-dark); border-color:var(--purple); box-shadow:0 0 0 2px rgba(91,64,143,.1); font-weight:700; }.scene-thumb { display:block; height:54px; margin-bottom:7px; background-position:center; background-size:cover; }.scene-thumb-bedroom { background-image:url('./gogo-room-desktop-nose-free.png'); }.scene-thumb-study { background-image:url('./gogo-room-study.png'); }
.stats-grid { margin-top:18px; padding:27px 31px 26px; }.section-heading { justify-content:space-between; align-items:flex-end; }.section-heading h2 { font-size:18px; }.streak-badge { gap:5px; color:#b4772a; background:#fff4d8; border-radius:12px; padding:8px 10px; font-size:10px; }.streak-badge span { font-weight:800; }.stat-cards { gap:11px; margin-top:20px; align-items:stretch; }.stat-card { flex:1; min-height:145px; padding:16px 15px; border:1px solid #eeeaf8; border-radius:15px; align-items:flex-start; flex-direction:column; }.stat-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:10px; background:#fff0d2; color:#d9a349; font-size:16px; margin-bottom:11px; }.clock-icon { background:#e5faf5; color:#4aaea6; }.stat-card>span { color:#9993ac; font-size:10px; }.stat-card strong { font-size:27px; letter-spacing:-.08em; margin-top:4px; }.stat-card strong small { font-size:11px; letter-spacing:0; color:#77708e; font-weight:600; }.stat-card>small { color:#aaa5b9; font-size:9px; margin-top:auto; }.coins-card { background:#fffaf0; border-color:#f3e2bd; }.progress-card { margin-top:11px; padding:16px; background:#f4f1ff; border-radius:15px; }.progress-copy { justify-content:space-between; font-size:10px; color:#9690a8; }.progress-copy strong { color:var(--purple-dark); font-size:10px; }.progress-track { height:8px; background:#e4e0f4; border-radius:20px; margin-top:13px; overflow:hidden; }.progress-track span { display:block; width:0%; height:100%; border-radius:20px; background:var(--yellow); transition:width .5s ease; }.progress-card p { font-size:9px; color:#a7a1b6; margin:9px 0 0; }.app-footer { justify-content:space-between; color:#aaa5b9; font-size:9px; padding:23px 4px 0; }
.toast { position:fixed; z-index:30; bottom:24px; left:50%; padding:10px 15px; border-radius:11px; background:var(--purple-dark); color:#fff; font-size:11px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:.25s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }.celebration { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:25px; background:rgba(49,35,82,.38); opacity:0; pointer-events:none; transition:.25s ease; }.celebration.show { opacity:1; pointer-events:auto; }.celebration-card { width:min(100%,340px); background:#fffdf9; text-align:center; border-radius:24px; padding:30px 25px 25px; box-shadow:0 24px 70px rgba(73,52,118,.25); transform:translateY(15px) scale(.97); transition:.3s ease; }.celebration.show .celebration-card { transform:none; }.celebration-dog { display:block; color:var(--purple); font-size:38px; margin-bottom:15px; }.celebration-card h2 { margin:0 0 8px; font-size:25px; letter-spacing:-.08em; }.celebration-card>p:not(.eyebrow) { color:#9690a8; font-size:12px; line-height:1.8; margin:0 0 20px; }.celebration-card strong { color:#c98c3f; }
.pixel-room { background:#b7acd4; }
.pixel-room > *:not(.pixel-room-image):not(.pixel-z):not(.room-timer):not(.candle-flame):not(.dog-nose-overlay) { display:none; }
.pixel-room-image { position:absolute; inset:0; z-index:0; background:#b7acd4 url('./gogo-room-pixel-clean.png') center 50% / cover no-repeat; }
.pixel-z { position:absolute; z-index:2; color:#272136; font-family:monospace; font-size:27px; font-weight:900; line-height:1; letter-spacing:-.2em; text-shadow:2px 2px 0 rgba(255,255,255,.35); transform-origin:center bottom; pointer-events:none; animation:pixelZFloat 2.3s steps(5,end) infinite; }
.pixel-z-a { left:51%; top:48%; }.pixel-z-b { left:57%; top:51%; font-size:23px; animation-delay:-1.1s; }
.room-timer { position:absolute; z-index:6; top:20px; left:20px; display:grid; place-items:center; padding:8px; border-radius:50%; background:rgba(255,253,249,.78); box-shadow:0 10px 26px rgba(73,52,118,.18); backdrop-filter:blur(4px); }.room-timer .timer-ring { width:164px; height:164px; }.room-timer .timer-hint { max-width:122px; text-align:center; line-height:1.45; }
.immersive { overflow:hidden; }.immersive .room-card { position:fixed; inset:0; z-index:50; width:100vw; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; background:#2b2444; display:flex; flex-direction:column; }.immersive .room-toolbar { position:absolute; z-index:5; top:max(12px, env(safe-area-inset-top)); left:16px; right:16px; height:54px; padding:0 14px; border:1px solid rgba(255,255,255,.25); border-radius:18px; background:rgba(43,36,68,.44); color:#fff; backdrop-filter:blur(8px); }.immersive .room-title { color:#fff; }.immersive .window-icon { background:rgba(132,222,210,.2); color:#b8f0e7; }.immersive .live-pill { background:rgba(221,211,255,.2); color:#fff; }.immersive .room-more { color:#fff; }.immersive .room-scene { flex:1; height:auto; min-height:100svh; border-radius:0; }.immersive .pixel-room-image { background-position:center 50%; }.immersive .room-footer { display:none; }
.immersive .scene-selector { display:none; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes happy { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-6px) rotate(2deg)} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes pixelZFloat { 0%,100%{opacity:.42;transform:translate(0,0) scale(.92) rotate(-4deg)} 50%{opacity:1;transform:translate(5px,-10px) scale(1.06) rotate(4deg)} }
@media (max-width:700px) { .app-shell { padding:21px 16px 28px; }.sync-state span { display:none; }.hero-copy { padding-top:39px; }.hero-copy h1 { font-size:31px; }.room-toolbar { padding:0 16px; }.room-scene { height:430px; }.room-timer { top:14px; left:14px; }.room-timer .timer-ring { width:142px; height:142px; }.room-timer .timer-inner strong { font-size:31px; }.room-timer .timer-label { font-size:9px; }.room-timer .timer-hint { max-width:105px; font-size:8px; }.window { left:13%; transform:scale(.86); transform-origin:top left; }.desk { right:-1%; transform:scale(.78); transform-origin:bottom right; }.wall-shelf { right:13%; transform:scale(.8); transform-origin:top right; }.wall-poster { right:1%; transform:scale(.75) rotate(3deg); transform-origin:top right; }.floor-lamp { left:0; transform:scale(.8); transform-origin:bottom left; }.dog { right:27%; transform:scale(.82); transform-origin:bottom center; }.thought-bubble { right:17%; top:69px; }.focus-panel,.stats-grid { padding-left:18px; padding-right:18px; }.focus-heading { gap:10px; }.focus-mode { flex-direction:column; align-items:stretch; }.mode-button { padding:6px 8px; }.stat-cards { gap:7px; }.stat-card { min-height:132px; padding:12px 10px; }.stat-card strong { font-size:23px; }.stat-card>small { font-size:8px; }.micro-copy { flex-wrap:wrap; }.micro-copy span:last-child { width:100%; text-align:center; }.section-heading h2 { font-size:16px; } }
@media (max-width:380px) { .date-chip { display:none; }.hero-copy h1 { font-size:28px; }.room-scene { height:390px; }.room-timer .timer-ring { width:128px; height:128px; }.room-timer .timer-inner strong { font-size:28px; }.dog { right:22%; }.thought-bubble { right:8%; }.stats-grid { padding-left:13px; padding-right:13px; }.stat-card>span { font-size:9px; } }
.focus-mode-standalone { width:max-content; margin-left:auto; margin-right:auto; }
.timer-actions { margin-top:28px; }
.room-more { display:inline-flex; align-items:center; gap:4px; font-size:11px; letter-spacing:0; white-space:nowrap; }
.room-more-symbol { font-size:20px; line-height:1; }
.pixel-room-image { background-image:url('./gogo-room-desktop-nose-free.png'); }
.pixel-room-image[data-scene="study"] { background-image:url('./gogo-room-study.png'); }
.pixel-room-image[data-scene="study"] ~ .dog-nose-overlay { display:none; }
.pixel-room-image[data-scene="study"] ~ .candle-flame { display:block; left:calc(82.4% - 5px); top:75%; width:11px; height:22px; }
.candle-flame { position:absolute; z-index:7; left:calc(79.2% - 4px); top:69%; width:13px; height:25px; border-radius:50% 50% 48% 48% / 68% 68% 32% 32%; background:radial-gradient(ellipse at 50% 75%,#fffbe0 0 22%,#ffe16d 30%,#f39a2b 62%,rgba(243,154,43,0) 78%); filter:drop-shadow(0 0 7px rgba(255,194,65,.9)); transform-origin:50% 92%; animation:candleFlicker 1.15s steps(5,end) infinite; pointer-events:none; }
.candle-flame:before { content:''; position:absolute; z-index:-1; inset:-14px; border-radius:50%; background:radial-gradient(circle,rgba(255,196,68,.48),rgba(255,196,68,0) 70%); filter:blur(5px); animation:candleGlow 1.15s ease-in-out infinite; }
.dog-nose-overlay { position:absolute; z-index:8; left:calc(51% - 8px); top:calc(66% - 8px); width:16px; height:11px; border-radius:48% 52% 55% 45% / 52% 45% 55% 48%; background:#29253b; transform-origin:50% 50%; animation:noseBreath 2.4s ease-in-out infinite; pointer-events:none; }
.dog-nose-overlay::before { content:''; position:absolute; left:3px; top:2px; width:5px; height:2px; border-radius:50%; background:rgba(255,255,255,.72); transform:rotate(-18deg); }
@media (max-width:700px) { .pixel-room-image { background-image:url('./gogo-room-mobile-nose-free.png'); }.pixel-room-image[data-scene="study"] { background-image:url('./gogo-room-mobile-study.png'); }.candle-flame { left:calc(74% - 4px); top:69%; width:11px; height:22px; }.pixel-room-image[data-scene="study"] ~ .candle-flame { left:calc(82.4% - 4px); top:66%; width:10px; height:20px; }.dog-nose-overlay { left:calc(44% - 6px); top:calc(66% - 6px); width:12px; height:9px; }.dog-nose-overlay::before { left:2px; top:2px; width:4px; height:2px; }.scene-selector { padding:14px 14px 15px; }.scene-options { gap:7px; }.scene-option { font-size:9px; }.scene-thumb { height:48px; } }
@keyframes candleFlicker { 0%,100% { opacity:.86; transform:translateX(0) scale(.94,.98) rotate(-3deg); } 35% { opacity:1; transform:translateX(1px) scale(1.05,1.02) rotate(4deg); } 68% { opacity:.78; transform:translateX(-1px) scale(.9,1.08) rotate(-5deg); } }
@keyframes candleGlow { 0%,100% { opacity:.55; transform:scale(.9); } 50% { opacity:.9; transform:scale(1.15); } }
@keyframes noseBreath { 0%,100% { transform:translateY(0) scale(1,.96); opacity:.92; } 50% { transform:translateY(-1px) scale(1.1,1.04); opacity:1; } }