:root {
  color-scheme: dark;
  --bg: #101216;
  --panel: #181a20;
  --line: rgba(236, 230, 220, .09);
  --text: #e8e2d9;
  --muted: #96969b;
  --accent: #b9a98e;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg) radial-gradient(ellipse at 50% -30%, #24232a 0, transparent 58%);
  font: 14px var(--sans);
}
button, input { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 1240px; margin: 0 auto; padding: 0 36px 30px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { color: #e9e1d6; text-decoration: none; font: italic 500 29px var(--serif); letter-spacing: -1.2px; }
.top-actions { display: flex; align-items: center; gap: 24px; }
.coin-count { display: flex; align-items: center; gap: 8px; color: #d3c5a8; font-size: 13px; font-variant-numeric: tabular-nums; }
.coin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c2a977; box-shadow: 0 0 8px #c2a97755; }
.icon-button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: #aaa9ab; cursor: pointer; font-size: 12px; transition: color .2s; }
.icon-button:hover, .text-button:hover { color: var(--text); }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.experience { position: relative; height: min(55vw, 525px); min-height: 320px; overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 5px; background: #111721; box-shadow: 0 22px 70px #0006; }
.experience:fullscreen { width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; max-height: none; border: 0; border-radius: 0; background: #050505; box-shadow: none; }
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#campfire-gif { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.experience.is-campfire #scene { display: none; }
.experience.is-campfire #campfire-gif { display: block; }
.experience.is-campfire.gif-unavailable #scene { display: block; }
.experience.is-campfire.gif-unavailable #campfire-gif { display: none; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,10,15,.45), transparent 38%), radial-gradient(ellipse at center, transparent 40%, rgba(6,7,11,.4) 100%); }
.scene-caption { position: absolute; top: 23px; left: 25px; display: flex; align-items: center; gap: 9px; color: #d9d7d3; font-size: 12px; letter-spacing: .04em; text-shadow: 0 1px 6px #000; }
.fullscreen-button { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(8,10,14,.42); color: #e5e1da; cursor: pointer; opacity: .78; transition: background .18s, opacity .18s, transform .18s; backdrop-filter: blur(7px); }
.fullscreen-button:hover:not(:disabled) { background: rgba(8,10,14,.72); opacity: 1; transform: scale(1.04); }
.fullscreen-button:focus-visible { outline: 2px solid #e5d2a9; outline-offset: 3px; opacity: 1; }
.fullscreen-button:disabled { cursor: not-allowed; opacity: .45; }
.fullscreen-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-button .exit-fullscreen-icon { display: none; }
.fullscreen-button[aria-pressed="true"] .enter-fullscreen-icon { display: none; }
.fullscreen-button[aria-pressed="true"] .exit-fullscreen-icon { display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #bba88d; box-shadow: 0 0 7px #c1a887; }
.scene-controls { position: absolute; bottom: 27px; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); }
.round-button { display: grid; width: 45px; height: 45px; place-items: center; border: 0; border-radius: 50%; background: #e5ded2; color: #252329; cursor: pointer; box-shadow: 0 4px 20px #0006; transition: transform .2s, background .2s; }
.round-button:hover { transform: scale(1.05); background: white; }
.round-button svg { width: 17px; height: 17px; fill: currentColor; }
.round-button .pause-icon, .round-button[aria-pressed=true] .play-icon { display: none; }
.round-button[aria-pressed=true] .pause-icon { display: block; }
.play-label { color: #eeebe6; font-size: 12px; text-shadow: 0 1px 7px #000; }
.sound-status { position: absolute; right: 22px; bottom: 28px; color: #aaa8a5; font-size: 11px; letter-spacing: .03em; }
.below-scene { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(245px, .8fr); align-items: start; gap: 16px; margin-top: 17px; }
.panel { border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(145deg, #1a1c22, #17191f); }
.mixer { padding: 21px 23px 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.eyebrow { margin: 0 0 7px; color: #8f8d8d; font-size: 9px; letter-spacing: .17em; }
.panel h1 { margin: 0; color: #e5ded4; font: italic 500 19px var(--serif); }
.text-button { padding: 2px 0; border: 0; background: none; color: #8d8d93; cursor: pointer; font-size: 11px; }
.mixer-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 21px; }
.channel { display: grid; min-width: 0; grid-template-columns: 19px auto auto; grid-template-rows: 18px 16px; align-items: center; column-gap: 6px; }
.channel-icon { grid-row: 1; color: #b5a58c; font-size: 20px; line-height: 15px; }
.thunder-icon { font-size: 17px; }
.wind-icon { font-size: 16px; }
.channel-name { grid-column: 2 / 4; color: #c3c0bc; font-size: 10px; white-space: nowrap; }
.channel input { width: 100%; height: 3px; grid-column: 1 / 3; margin: 0; appearance: none; border-radius: 9px; background: #47464a; accent-color: #b8a98f; cursor: pointer; }
.channel input::-webkit-slider-thumb { width: 9px; height: 9px; appearance: none; border-radius: 50%; background: #c8b79b; }
.channel input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #c8b79b; }
.channel-value { grid-column: 3; color: #85858a; font-size: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.right-column { display: grid; min-width: 0; grid-template-columns: 1fr 150px; align-items: start; gap: 12px; }
.timer { display: flex; min-height: 116px; align-items: center; justify-content: space-between; padding: 18px 17px; }
.timer-readout { position: relative; }
.timer-display { color: #e4ddd3; font-size: 24px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.timer-display span { padding: 0 1px; color: #918c84; }
.timer-edit { padding: 3px 0; border: 0; background: none; color: #817f80; cursor: pointer; font-size: 9px; text-align: left; }
.timer-edit:hover { color: #d1c4ad; }
.timer-editor { position: absolute; z-index: 2; top: calc(100% + 5px); left: 0; display: flex; align-items: center; gap: 7px; padding: 10px; border: 1px solid #44434a; background: #202127; box-shadow: 0 8px 24px #0007; }
.timer-editor[hidden], .timer-edit[hidden] { display: none; }
.timer-editor label { color: #aaa; font-size: 10px; }
.timer-editor input { width: 58px; padding: 6px; border: 1px solid #55515a; border-radius: 2px; background: #13151a; color: #eee; font-size: 12px; }
.timer-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.small-button { padding: 7px 9px; border: 1px solid #615c56; border-radius: 2px; background: transparent; color: #c8bca8; cursor: pointer; font-size: 10px; white-space: nowrap; }
.small-button:hover { background: #25252a; }
.timer-reset { padding: 6px; border: 0; background: none; color: #8b8989; cursor: pointer; font-size: 19px; }
.ad-placeholder { display: flex; height: 250px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; border: 1px dashed rgba(190,181,165,.14); background: #17191d; color: #5f6064; }
.ad-label { flex: none; color: #77767c; font-size: 8px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.ad-placeholder .adsbygoogle { display: block; width: 100%; height: 250px; }
.ad-wide .adsbygoogle { display: block; width: 100%; }
.ad-wide { display: flex; width: min(100%, 728px); min-height: 90px; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; margin: 15px auto 0; border: 1px dashed rgba(190,181,165,.12); padding: 5px 8px; color: #5e5e63; }
footer { display: flex; justify-content: space-between; gap: 12px; margin: 26px 2px 0; color: #77767c; font-size: 10px; }
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
footer nav a { color: #85838a; text-decoration: none; }
footer nav a:hover { color: #d5cabb; }
.shop-dialog { width: min(500px, calc(100% - 28px)); max-height: min(90vh, 740px); overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 1px solid #38383c; border-radius: 5px; background: #17191f; color: var(--text); box-shadow: 0 24px 90px #000b; }
.shop-dialog::backdrop { background: #07080bbf; backdrop-filter: blur(5px); }
.shop-head { display: flex; align-items: center; justify-content: space-between; padding: 25px 27px 0; }
.shop-head h2 { margin: 0; font: italic 500 26px var(--serif); }
.close-button { border: 0; background: none; color: #939096; cursor: pointer; font-size: 27px; line-height: 1; }
.shop-intro { max-width: 390px; margin: 13px 27px; color: #98979c; font-size: 12px; line-height: 1.6; }
.shop-balance { display: flex; align-items: center; gap: 8px; margin: 17px 27px 21px; color: #d4c6a8; font-size: 12px; }
.shop-balance strong { font-size: 14px; font-weight: 500; }
.shop-items { display: grid; gap: 9px; padding: 0 27px 12px; }
.shop-item { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #303137; border-radius: 3px; background: #1b1d23; }
.item-swatch { height: 37px; border-radius: 2px; background: linear-gradient(135deg, #1c222e, #797160); }
.item-swatch.amber { background: linear-gradient(135deg, #35231b, #bd8a56); }
.item-swatch.bluehour { background: linear-gradient(135deg, #1b2940, #7894b0); }
.item-swatch.moss { background: linear-gradient(135deg, #1b2a24, #78856d); }
.item-swatch.violet { background: linear-gradient(135deg, #292238, #8d7c9d); }
.item-swatch.mist { background: linear-gradient(135deg, #313b46, #8b9290); }
.item-swatch.storm { background: linear-gradient(135deg, #131922, #68738a); }
.item-swatch.campfire { background: linear-gradient(135deg, #211710, #d47a38); }
.item-info strong { font-size: 12px; font-weight: 500; }
.item-info p { margin: 4px 0 0; color: #88878d; font-size: 10px; }
.item-action { min-width: 76px; padding: 7px 8px; border: 1px solid #625c50; border-radius: 2px; background: transparent; color: #c9b99c; cursor: pointer; font-size: 10px; }
.item-action:hover:not(:disabled) { background: #28272a; }
.item-action:disabled { border-color: #39393d; color: #77767a; cursor: default; }
.item-action.equipped { border-color: transparent; color: #96928a; }
.shop-note { margin: 11px 27px 23px; color: #74747a; font-size: 10px; }

@media (max-width: 1040px) {
  .app-shell { padding: 0 22px 26px; }
  .experience { height: 55vw; min-height: 290px; }
  .below-scene { grid-template-columns: 1fr; }
  .right-column { grid-template-columns: 1fr 150px; }
  .ad-placeholder { height: 250px; }
  .timer { min-height: 90px; }
  .timer-actions { margin-top: 10px; }
}
@media (max-width: 560px) {
  .app-shell { padding: 0 14px 22px; }
  .topbar { height: 64px; }
  .top-actions { gap: 15px; }
  .icon-button span { display: none; }
  .experience { height: 66vh; max-height: 510px; min-height: 340px; }
  .mixer { padding: 18px 15px; }
  .mixer-channels { grid-template-columns: 1fr; gap: 15px; margin-top: 19px; }
  .channel { grid-template-columns: 22px 1fr 42px; grid-template-rows: 16px 13px; column-gap: 7px; }
  .channel-icon { grid-row: 1 / 3; }
  .channel-name { grid-column: 2; grid-row: 1; font-size: 11px; }
  .channel input { grid-column: 2; grid-row: 2; }
  .channel-value { grid-column: 3; grid-row: 2; font-size: 10px; }
  .right-column { grid-template-columns: 1fr; }
  .ad-placeholder { display: none; }
  .timer { padding: 15px 17px; }
  .ad-wide { height: 90px; }
  footer { align-items: flex-start; flex-direction: column; line-height: 1.5; }
  .sound-status { right: 14px; bottom: 23px; }
  .scene-caption { top: 18px; left: 17px; }
  .fullscreen-button { top: 10px; right: 10px; width: 34px; height: 34px; }
}