/* A game Hearth plays itself, inside Hearth (renderer/game-stage.js). The room, the wall and the
   stone mantel are the docked stream's own (moonlight/hearthstream.css .hs-stage-*): one frame for
   everything that plays here. What is the game's: the picture inside the mantel is a live page,
   the column carries the game's controls, and full screen is the game alone, no frame.
   Rober, 2026-10-14: "why didnt it use our cool frame? frame games away if fullscreened". */

/* Below Hearth's dialogs (.modal is 200): Restart's confirm, the privacy menu and the toasts open
   OVER the game. The stream's room sits at the very top because the stream itself is a native
   window above the page; this one is part of the page. */
#gs-room { z-index: 150; }

/* The picture: the mantel's opening, filled by the game's page. The ember light off the stone
   (.hs-stage-mantel::after) is drawn over its edge. */
.gs-screen { position: absolute; inset: 0; overflow: hidden; background: #000; }
.gs-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000;
  opacity: 0; transition: opacity .45s var(--hs-ease); }
.gs-room.loaded .gs-frame { opacity: 1; }

/* While the page loads: the game's own cover, blurred and dimmed, its name over it, and the
   Hearth mark breathing. It lifts when the game's page has loaded. */
.gs-veil { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden;
  background: #0b0f20; transition: opacity .5s var(--hs-ease), visibility 0s linear .5s; }
.gs-room.loaded .gs-veil { opacity: 0; visibility: hidden; }
.gs-veil-art { position: absolute; inset: -30px; background: center / cover no-repeat;
  filter: blur(18px) saturate(1.1) brightness(.45); transform: scale(1.06); }
.gs-veil-words { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 24px; text-align: center; }
.gs-veil-mark { width: 44px; height: 44px; filter: drop-shadow(0 0 14px rgba(242, 165, 65, .55)); animation: gsBreathe 1.8s ease-in-out infinite; }
.gs-veil-k { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hs-ember-hi); white-space: nowrap; }
.gs-veil-name { max-width: 28ch; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 24px; font-weight: 700;
  line-height: 1.15; text-wrap: balance; color: var(--hs-ink); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
@keyframes gsBreathe { 50% { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(242, 165, 65, .8)); } }

/* Too small a window for a frame: the game takes the whole area, no stone. */
.gs-room.bare .hs-stage-mantel { border-image: none; filter: none; }
.gs-room.bare .hs-stage-mantel::after { display: none; }

/* ── Full screen: the game alone ───────────────────────────────────────────────────────────── */
.gs-screen:fullscreen { background: #000; }
.gs-screen:fullscreen .gs-frame { opacity: 1; }
.gs-room.full .gs-veil { display: none; }
/* "Esc leaves full screen", for a moment on the way in (Hearth's app shows no such notice). */
.gs-hint { position: absolute; z-index: 2; top: 18px; left: 50%; display: none; padding: 9px 16px; border-radius: 999px;
  background: rgba(14, 18, 38, .9); border: 1px solid rgba(156, 196, 255, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  color: #e9eefb; font: 600 13px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, -8px); opacity: 0; transition: opacity .3s var(--hs-ease), transform .4s var(--hs-ease); }
.gs-screen:fullscreen .gs-hint { display: block; }
.gs-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* ── The column beside the frame (the stream's .hs-stage-dock, for a game) ─────────────────── */
.gs-dock { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 20px; overflow: hidden auto; scrollbar-width: none;
  background: rgba(14, 18, 38, .86); border: 1px solid rgba(156, 196, 255, .26);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 36px rgba(156, 196, 255, .08); backdrop-filter: blur(12px);
  opacity: 0; transform: translateX(14px);
  transition: opacity .4s var(--hs-ease) .12s, transform .5s var(--hs-ease) .12s; }
.gs-dock::-webkit-scrollbar { display: none; }
.gs-room.in .gs-dock { opacity: 1; transform: none; }
.gs-dock[hidden] { display: none; }
.gs-dock .hs-sd-pic { min-height: 120px; }
/* A short window: the cover steps aside and the caption stands alone; shorter still, the
   caption goes too and only the controls stay. */
.gs-dock.short .hs-sd-pic { flex: none; min-height: 0; background: rgba(156, 196, 255, .05); }
.gs-dock.short .hs-sd-pic img { display: none; }
.gs-dock.short .hs-sd-cap { position: static; padding: 10px 12px; background: none; }
.gs-dock.tiny .hs-sd-pic { display: none; }
.gs-acts { display: grid; gap: 8px; }
.gs-dock .gs-btn { width: 100%; justify-content: flex-start; min-height: 44px; padding: 8px 14px; font-size: 14px; }
.gs-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The way back carries its key on its face: with the game holding the keyboard it is the one
   control that always works. */
.gs-dock .gs-btn.primary { flex-wrap: wrap; row-gap: 3px; padding-top: 9px; padding-bottom: 9px; }
.gs-dock .gs-priv { margin-top: auto; }
.gs-dock.short .gs-priv { margin-top: 0; }
.gs-dock .gs-btn.danger-soft .hs-btn-ico { filter: saturate(.8); }

/* ── Minimise, full screen and close on the mantel ──────────────────────────────────────────── */
.gs-wc { position: absolute; z-index: 1; display: flex; gap: 2px; padding: 2px; border-radius: 10px;
  background: rgba(14, 18, 38, .82); border: 1px solid rgba(156, 196, 255, .22); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .4s var(--hs-ease) .2s; }
.gs-room.in .gs-wc { opacity: 1; }
.gs-wc-btn { display: inline-grid; place-items: center; width: 44px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--hs-ink-dim); cursor: pointer; transition: background .15s, color .15s; }
.gs-wc-btn:hover { background: rgba(156, 196, 255, .14); color: var(--hs-ink); }
.gs-wc-btn.close:hover { background: #ef4444; color: #fff; }
.gs-wc-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }

/* ── The pill on every Hearth tab while the game waits in the background ────────────────────── */
.gs-live { gap: 12px; padding: 8px 8px 8px 8px; }
.gs-live-thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(156, 196, 255, .34); box-shadow: 0 0 14px rgba(242, 165, 65, .25); }
.gs-live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-live .gs-btn { min-height: 38px; }
/* A stream waiting in the background too: the two pills stack instead of overlapping. */
body.has-hs-live .gs-live { bottom: 92px; }
body.locked .gs-live, body.privacy-covered .gs-live {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
}

/* Cheats: the column turns into the shared panel, styled in renderer/cheats/cheats.css. */

@media (prefers-reduced-motion: reduce) {
  .gs-frame, .gs-veil, .gs-dock, .gs-wc, .gs-hint { transition: none; }
  .gs-dock { transform: none; }
  .gs-veil-mark { animation: none; }
}