/*
 * GENERATED by app/scripts/build-site-game-ui.mjs from app/src/features/front-door/front-door.css.
 * Do not edit: change the app and run `npm run site:game-ui` in app/.
 * The game UI on playbluestories.com (Friends lane, docs/LANES.md).
 */
/*
 * The agreed front door (docs/design/front-door/). Every class is prefixed `fd-` and
 * scoped under `.fd-root`, because the same stylesheet is meant for the WordPress home
 * page too, where theme styles would otherwise leak in.
 *
 * Sizes come from custom properties set by mount.ts from geometry.ts, in design pixels;
 * `--spd` is the agreed pace (1.3) that every duration is multiplied by.
 * Fonts: public/fonts/ui-fonts.css (self-hosted). Each stack names a Greek and Cyrillic
 * stand-in, because four of the display faces have no Greek.
 */

.fd-root { position: absolute; inset: 0; overflow: hidden; background: #05060A; font-family: 'Spline Sans', 'Manrope', 'Segoe UI', system-ui, sans-serif; color: #F2EFEA; -webkit-font-smoothing: antialiased; }
.fd-root *, .fd-root *::before, .fd-root *::after { box-sizing: border-box; }
.fd-root button { font: inherit; color: inherit; }
.fd-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #05060A; }

/* ---------- the two halves ---------- */
.fd-side { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: #05060A; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* The half is clipped to its zig-zag shape and its canvas paints over its own outline, so the
   visible ring is a layer on top, inset from the edges. The outline stays for tools that read it. */
.fd-side:focus-visible { outline: 4px solid #FFFFFF; outline-offset: -10px; }
.fd-focus-ring { position: absolute; inset: 10px; border: 4px solid #FFFFFF; border-radius: 6px; opacity: 0; pointer-events: none; }
.fd-side:focus-visible .fd-focus-ring { opacity: 1; }
.fd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fd-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.2) 2px 3px); pointer-events: none; }
.fd-dim { position: absolute; inset: 0; background: #030408; opacity: 0; transition: opacity .45s ease; pointer-events: none; will-change: opacity; }
.fd-root.fd-hover-solo .fd-friends .fd-dim, .fd-root.fd-hover-friends .fd-solo .fd-dim { opacity: .55; }

.fd-lift { position: absolute; transition: transform .5s cubic-bezier(.2,.9,.25,1.15); }
.fd-side:hover .fd-lift, .fd-side:focus-visible .fd-lift { transform: translateY(-10px) scale(1.025); }
.fd-side:active .fd-lift { transform: scale(.975); transition-duration: .12s; }
.fd-frame { position: absolute; inset: 0; transform: skewX(calc(-1 * var(--skew))); }
.fd-unskew { transform: skewX(var(--skew)); }

.fd-card-shadow { position: absolute; left: 5%; right: 5%; top: 18%; bottom: -22px; background: rgba(0,0,0,.8); filter: blur(24px); }
.fd-card-glow { position: absolute; inset: -4px; filter: blur(18px); will-change: opacity; }

/* Solo card: neon HUD panel */
.fd-solo-glow { background: #4F8BFF; opacity: .5; animation: fd-breath calc(3.2s * var(--spd)) ease-in-out infinite; }
@keyframes fd-breath { 50% { opacity: .95; } }
.fd-solo:hover .fd-solo-glow { opacity: 1; animation: none; }
.fd-solo-cut { clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.fd-solo-edge { --c: var(--ch); position: absolute; inset: 0; background: linear-gradient(135deg, #E4EEFF 0%, #6EA8FF 20%, #2F6BFF 45%, #9CC2FF 60%, #2F6BFF 80%, #E4EEFF 100%); background-size: 260% 260%; animation: fd-edge calc(4s * var(--spd)) linear infinite; }
@keyframes fd-edge { from { background-position: 0% 0%; } to { background-position: 260% 260%; } }
.fd-solo-face { --c: calc(var(--ch) - 1px); position: absolute; inset: 3px; background: #F3F6FF; }
.fd-solo-face::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(29,78,216,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,216,.06) 1px, transparent 1px); background-size: 18px 18px; }
.fd-brk { position: absolute; width: 24px; height: 24px; border: 0 solid #9CC2FF; transition: transform .45s cubic-bezier(.2,.9,.25,1.2); }
.fd-brk-tr { right: -13px; top: -13px; border-top-width: 3px; border-right-width: 3px; }
.fd-brk-bl { left: -13px; bottom: -13px; border-bottom-width: 3px; border-left-width: 3px; }
.fd-solo:hover .fd-brk-tr, .fd-solo:focus-visible .fd-brk-tr { transform: translate(7px, -7px); }
.fd-solo:hover .fd-brk-bl, .fd-solo:focus-visible .fd-brk-bl { transform: translate(-7px, 7px); }
.fd-solo:focus-visible .fd-brk { border-color: #FFFFFF; }
.fd-solo:focus-visible .fd-solo-edge { background: #FFFFFF; animation: none; }
.fd-hazard { flex: 0 0 auto; width: 64px; height: 8px; margin-left: auto; background: repeating-linear-gradient(-45deg, #0B1220 0 5px, #4F8BFF 5px 10px); }

/* Friends card: gilded tavern plate */
.fd-fr-glow { background: #F0A93C; opacity: .45; animation: fd-hearth calc(2.4s * var(--spd)) linear infinite; }
@keyframes fd-hearth { 0%, 100% { opacity: .42; } 14% { opacity: .66; } 29% { opacity: .36; } 47% { opacity: .74; } 63% { opacity: .5; } 81% { opacity: .63; } }
.fd-friends:hover .fd-fr-glow { opacity: 1; animation: none; }
.fd-fr-cut { clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.fd-fr-edge { --c: var(--ch); position: absolute; inset: 0; background: linear-gradient(160deg, #FFE9BF 0%, #F0A93C 22%, #9C5B0C 48%, #F0A93C 72%, #FFD28A 100%); }
.fd-fr-groove { --c: calc(var(--ch) - 2px); position: absolute; inset: 4px; background: #2A1A10; }
.fd-fr-face { --c: calc(var(--ch) - 3px); position: absolute; inset: 6px; background: #FAF7F2; }
.fd-gem { position: absolute; width: 14px; height: 14px; transform: rotate(45deg); background: radial-gradient(circle at 35% 35%, #FFF6DD 0%, #F0A93C 45%, #9C5B0C 100%); border: 2px solid #2A1A10; transition: transform .45s cubic-bezier(.2,.9,.25,1.2); }
.fd-gem-tl { left: calc(var(--ch) / 2 - 7px); top: calc(var(--ch) / 2 - 7px); }
.fd-gem-tr { right: calc(var(--ch) / 2 - 7px); top: calc(var(--ch) / 2 - 7px); }
.fd-gem-bl { left: calc(var(--ch) / 2 - 7px); bottom: calc(var(--ch) / 2 - 7px); }
.fd-gem-br { right: calc(var(--ch) / 2 - 7px); bottom: calc(var(--ch) / 2 - 7px); }
.fd-friends:hover .fd-gem, .fd-friends:focus-visible .fd-gem { transform: rotate(225deg) scale(1.25); }
.fd-friends:focus-visible .fd-fr-edge { background: #FFFFFF; }

/* card content */
.fd-content { position: absolute; left: 0; right: 0; top: 0; bottom: var(--cta); display: flex; flex-direction: column; justify-content: center; gap: var(--gap); padding: 0 var(--pad); text-align: left; }
.fd-row { display: flex; align-items: center; gap: 10px; }
.fd-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--badge-w); height: var(--badge-h); flex: 0 0 auto; }
.fd-badge-solo { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #1D4ED8; color: #FFFFFF; font: 700 var(--badge-font) 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .02em; }
.fd-badge-fr { border-radius: 999px; background: #9C5B0C; color: #FFFFFF; font: var(--badge-font) 'Lilita One', 'Commissioner', 'Trebuchet MS', sans-serif; box-shadow: inset 0 0 0 2px #F0A93C; width: auto; padding: 0 10px; }
.fd-label-solo { font: 700 var(--label) 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .28em; color: #1D4ED8; text-transform: uppercase; }
.fd-label-fr { font: 600 var(--label) 'Spline Sans', 'Manrope', sans-serif; letter-spacing: .24em; color: #9C5B0C; text-transform: uppercase; }
.fd-title-solo { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: var(--solo-title); line-height: .92; letter-spacing: .005em; color: #0B1220; text-transform: uppercase; text-wrap: balance; }
.fd-title-fr { font-family: 'Lilita One', 'Commissioner', 'Trebuchet MS', sans-serif; font-weight: 400; font-size: var(--fr-title); line-height: 1; color: #1C1826; text-wrap: balance; }
.fd-root:lang(el) .fd-title-fr, .fd-root:lang(ru) .fd-title-fr { font-weight: 800; }
.fd-body-solo, .fd-body-fr { font-size: var(--body); line-height: 1.42; text-wrap: pretty; }
.fd-body-solo { color: #33405A; }
.fd-body-fr { color: #5A5262; }

.fd-cta { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cta); overflow: hidden; }
.fd-cta-solo { background: #0B1220; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch) + 4px), calc(100% - var(--ch) + 4px) 100%, 0 100%); }
.fd-cta-fr { background: #F0A93C; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch) + 6px), calc(100% - var(--ch) + 6px) 100%, calc(var(--ch) - 6px) 100%, 0 calc(100% - var(--ch) + 6px)); }
.fd-cta-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; text-transform: uppercase; }
.fd-cta-solo .fd-cta-text { color: #E8EDF7; font: 700 var(--cta-font) 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .22em; }
.fd-cta-fr .fd-cta-text { color: #231506; font: calc(var(--cta-font) + 2px) 'Lilita One', 'Commissioner', 'Trebuchet MS', sans-serif; letter-spacing: .12em; }
.fd-chev { display: inline-flex; gap: 2px; }
.fd-chev b { font-weight: 700; animation: fd-chev calc(1.2s * var(--spd)) ease-in-out infinite; }
.fd-chev b:nth-child(2) { animation-delay: calc(.15s * var(--spd)); }
.fd-chev b:nth-child(3) { animation-delay: calc(.3s * var(--spd)); }
@keyframes fd-chev { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.fd-shine { position: absolute; top: 0; bottom: 0; width: 38%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: fd-shine calc(3.6s * var(--spd)) ease-in-out infinite; }
.fd-cta-fr .fd-shine { background: linear-gradient(90deg, transparent, rgba(255,250,235,.8), transparent); animation-delay: calc(1.6s * var(--spd)); }
@keyframes fd-shine { 0%, 62% { left: -40%; } 100% { left: 120%; } }
.fd-soon { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: #0B1220; color: #E8EDF7; font: 700 12px 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.fd-unavailable { cursor: default; }
.fd-unavailable .fd-lift { filter: saturate(.5); }
.fd-unavailable:hover .fd-lift { transform: none; }

/* ---------- seam, badge, logo, actions ---------- */
.fd-seam, .fd-seam-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fd-seam { filter: drop-shadow(0 0 5px rgba(79,139,255,.95)) drop-shadow(0 0 12px rgba(240,169,60,.55)); }
.fd-seam i, .fd-seam-fx i { position: absolute; inset: 0; display: block; }
.fd-s-blue { background: #4F8BFF; }
.fd-s-amber { background: #F0A93C; }
.fd-s-core { background: #FFFFFF; opacity: .75; }
.fd-s-spark { background: linear-gradient(var(--spark-angle), transparent 0%, transparent 44%, #FFFFFF 50%, transparent 56%, transparent 100%); background-size: var(--spark-size); animation: fd-spark calc(2.6s * var(--spd)) linear infinite; }
.fd-s-spark2 { animation-delay: calc(-1.3s * var(--spd)); }
@keyframes fd-spark { from { background-position: var(--spark-from); } to { background-position: 0 0; } }

.fd-or { position: absolute; z-index: 4; pointer-events: none; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(90deg, #4F8BFF, #F0A93C); }
.fd-or span { position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #0B0A10; color: #F2EFEA; font: var(--or-font) 'Russo One', 'Tektur', 'Arial Black', sans-serif; letter-spacing: .02em; }

.fd-plate { position: absolute; left: 50%; top: 0; z-index: 5; pointer-events: none; transform: translateX(-50%); }
.fd-plate-edge { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(90deg, #4F8BFF 0%, #9CC2FF 30%, #FFE9BF 50%, #F0A93C 70%, #C98326 100%); }
.fd-plate-face { position: absolute; left: 3px; right: 3px; top: 0; bottom: 3px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(180deg, #07080D 0%, #0F0D14 100%); }
.fd-plate-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.fd-logo { margin: 0; display: flex; font: var(--logo)/1 'Russo One', 'Tektur', 'Arial Black', sans-serif; font-weight: 400; letter-spacing: .01em; transform: skewX(-8deg); white-space: nowrap; }
.fd-logo-play { background: linear-gradient(180deg, #E4EEFF 0%, #6EA8FF 55%, #2F6BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(79,139,255,.6)); }
.fd-logo-why { background: linear-gradient(180deg, #FFF1D2 0%, #F0A93C 55%, #C9761A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(240,169,60,.5)); }
/* ⚠️ THE TAGLINE FITS ITS PLATE IN EVERY LANGUAGE (owner, 26/09/2026, Greek: «ΔΙΑΛΕΞΕ ΠΩΣ ΘΑ
 * ΠΑΙΞΕΙΣ» ran out past the plate's slanted edge). At .42em it is 252px in Greek, 287 in French and
 * 238 in German against ~230 inside a phone's plate. A tagline too wide gives up letter spacing,
 * never size, down to .2em (mount.ts fitPlateSubtitle sets --sub-ls); one that fits keeps .42em. */
.fd-logo-sub { font: 700 var(--logo-sub) 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: var(--sub-ls, .42em); padding-left: var(--sub-ls, .42em); white-space: nowrap; color: #A79FB3; text-transform: uppercase; }
.fd-hud-brk { position: absolute; z-index: 4; pointer-events: none; width: 34px; height: 34px; border: 0 solid rgba(156,194,255,.7); }

/* ⚠️ THE ROW IS AS WIDE AS ITS BUTTONS, NOT HALF THE BOARD (owner, 25/09/2026, iPhone:
 * "Sign in" broke onto two lines). On a phone mount.ts sets the row at `left: 50%` of the
 * 390px board and pulls it back with translateX(-50%), so the browser sized it to the 195px
 * right of that 50%, and signed out it needs 236-284px. The buttons shrank and a label broke
 * at its space ("Sign / in", "Iniciar / sesión", "Se / connecter"); the one-word labels have
 * no space to break at, which is why Greek never did. The board is scaled as a whole, so it
 * was every phone width. Landscape anchors the row to the right and never was short. */
.fd-actions { position: absolute; z-index: 6; display: flex; gap: 8px; width: max-content; }
.fd-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgba(242,239,234,.28); border-radius: 999px; background: rgba(5,6,10,.62); color: #F2EFEA; cursor: pointer; font: 700 12px 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .08em; }
.fd-icon-btn:hover { background: rgba(40,36,52,.85); }
.fd-icon-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.fd-icon-btn svg { display: block; }
/* The language button wears its flag where the globe used to be. A hairline
 * keeps the white halves of the Russian, French and English flags from
 * dissolving into the door's near-black; without it "RU" looks two-striped. */
.fd-icon-btn[data-action="language"] svg:not(.fd-caret) { box-shadow: 0 0 0 1px rgba(242, 239, 234, .32); }
/* A button that opens a list carries the bar's caret, turned over while it is open
 * (mount.ts § languageMenu). */
.fd-caret { flex: 0 0 auto; margin-left: -2px; opacity: .7; transition: transform .18s ease; }
.fd-icon-btn[aria-expanded="true"] .fd-caret { transform: rotate(180deg); }
/* The sign-in button says its word, as the bar's does: an unlabelled door is a guess. */
.fd-icon-btn--word { padding: 0 14px 0 12px; gap: 8px; letter-spacing: .06em; white-space: nowrap; }
.fd-sound-off .fd-wave { display: none; }
.fd-root:not(.fd-sound-off) .fd-mute-x { display: none; }

/* ---------- the entrances ---------- */
.fd-ov { position: absolute; inset: 0; z-index: 20; overflow: hidden; cursor: pointer; }
.fd-ov-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fd-ov-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; }
@keyframes fd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fd-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fd-leaving { animation: fd-out calc(.35s * var(--spd)) ease-in both; }
@keyframes fd-out { to { opacity: 0; } }

.fd-solo-ov { background: #03060E; }
.fd-flash { position: absolute; inset: 0; background: #6EA8FF; mix-blend-mode: screen; animation: fd-flash calc(.4s * var(--spd)) ease-out both; pointer-events: none; }
@keyframes fd-flash { from { opacity: .95; } to { opacity: 0; } }
.fd-ov-brk { position: absolute; width: 44px; height: 44px; border: 0 solid #6EA8FF; animation: fd-brk-in calc(.6s * var(--spd)) calc(.25s * var(--spd)) cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes fd-brk-in { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
.fd-sync { display: flex; align-items: center; gap: 14px; font: 700 var(--ov-kicker) 'Chakra Petch', 'Tektur', sans-serif; letter-spacing: .3em; color: #9CC2FF; text-transform: uppercase; animation: fd-rise calc(.45s * var(--spd)) calc(.3s * var(--spd)) both; }
.fd-sync-bar { position: relative; width: var(--ov-bar); height: 6px; background: rgba(110,168,255,.18); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.fd-sync-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #2F6BFF, #DDEBFF); transform-origin: left; animation: fd-fill calc(.95s * var(--spd)) calc(.35s * var(--spd)) cubic-bezier(.5,.1,.2,1) both; }
@keyframes fd-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@property --fd-pct { syntax: '<integer>'; inherits: false; initial-value: 0; }
.fd-sync-num { min-width: 4.2ch; text-align: left; font-variant-numeric: tabular-nums; counter-reset: fdpct var(--fd-pct); animation: fd-pct calc(.95s * var(--spd)) calc(.35s * var(--spd)) cubic-bezier(.5,.1,.2,1) both; }
.fd-sync-num::after { content: counter(fdpct) '%'; }
@keyframes fd-pct { from { --fd-pct: 0; } to { --fd-pct: 100; } }
/* ⚠️ THE SIZE IS CAPPED BY THE SCREEN, NOT ONLY BY THE GEOMETRY (18/09/2026).
 * `--ov-solo` is 132px on a phone, and `.fd-ov` is `overflow: hidden` around a single
 * unbreakable word, so a face even slightly wider than the one this was fitted to loses
 * the last letter rather than wrapping. Measured on live: "ΣΟΛΟ" in Noto Serif Display
 * at 62.5% ran 365px inside a 390px screen — thirteen pixels of air each side — and
 * Inter 900, which has now replaced it, measures 25% wider at the same size. `min()`
 * makes the headline fit whatever face it is given, in every language, not one face. */
.fd-solo-title { margin: 6px 0 2px; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: min(var(--ov-solo), 24vw); line-height: .9; letter-spacing: .04em; color: #F2F6FF; text-transform: uppercase; text-shadow: 0 0 40px rgba(79,139,255,.85), 0 0 110px rgba(29,78,216,.7); animation: fd-glitch calc(.9s * var(--spd)) calc(1s * var(--spd)) both; }
@keyframes fd-glitch {
  0% { opacity: 0; transform: scale(1.5, .02); }
  16% { opacity: 1; transform: scale(1, 1.08); text-shadow: -10px 0 #3BE8FF, 10px 0 #2F6BFF; }
  30% { transform: translateX(-8px) skewX(14deg); text-shadow: 8px 0 #3BE8FF, -8px 0 #2F6BFF; }
  44% { transform: translateX(6px) skewX(-8deg); text-shadow: -5px 0 #3BE8FF, 5px 0 #2F6BFF; }
  58% { transform: none; text-shadow: 2px 0 #3BE8FF, -2px 0 #2F6BFF; }
  100% { opacity: 1; transform: none; text-shadow: 0 0 40px rgba(79,139,255,.85), 0 0 110px rgba(29,78,216,.7); }
}
.fd-solo-sub { max-width: 34ch; font-size: var(--ov-solo-sub); line-height: 1.45; color: #C9D7F2; text-shadow: 0 2px 14px #03060E; animation: fd-rise calc(.6s * var(--spd)) calc(1.55s * var(--spd)) both; }

.fd-fr-ov { background: #1A1722; perspective: 1400px; }
.fd-door { position: absolute; top: 0; bottom: 0; width: 50%; backface-visibility: hidden; box-shadow: inset 0 0 90px rgba(0,0,0,.7); background:
  linear-gradient(180deg, transparent 16%, #2B2A2E 16%, #3A393F 17.5%, #2B2A2E 19%, transparent 19%, transparent 81%, #2B2A2E 81%, #3A393F 82.5%, #2B2A2E 84%, transparent 84%),
  repeating-linear-gradient(90deg, #5A3416 0 calc(var(--stage-w) / 14 - 3px), #3B210E calc(var(--stage-w) / 14 - 3px) calc(var(--stage-w) / 14)); }
.fd-door::after { content: ''; position: absolute; top: calc(50% - 16px); width: 26px; height: 26px; border-radius: 50%; border: 4px solid #C98326; box-shadow: 0 0 12px rgba(240,169,60,.6); }
.fd-door-l { left: 0; transform-origin: left center; animation: fd-door-l calc(1.15s * var(--spd)) calc(.3s * var(--spd)) cubic-bezier(.6,.05,.3,1) both; }
.fd-door-l::after { right: 18px; }
.fd-door-r { right: 0; transform-origin: right center; animation: fd-door-r calc(1.15s * var(--spd)) calc(.3s * var(--spd)) cubic-bezier(.6,.05,.3,1) both; }
.fd-door-r::after { left: 18px; }
@keyframes fd-door-l { from { transform: rotateY(0deg); } to { transform: rotateY(-110deg); } }
@keyframes fd-door-r { from { transform: rotateY(0deg); } to { transform: rotateY(110deg); } }
.fd-door-light { position: absolute; top: 0; bottom: 0; left: 50%; width: 240px; margin-left: -120px; background: linear-gradient(90deg, rgba(240,169,60,0) 0%, rgba(240,150,40,.55) 38%, #FFE2A8 50%, rgba(240,150,40,.55) 62%, rgba(240,169,60,0) 100%); mix-blend-mode: screen; pointer-events: none; animation: fd-door-light calc(1.2s * var(--spd)) both; }
@keyframes fd-door-light { 0% { opacity: 0; transform: scaleX(.04); } 22% { opacity: 1; transform: scaleX(.08); } 55% { opacity: .9; transform: scaleX(2.2); } 100% { opacity: 0; transform: scaleX(6); } }
.fd-fr-kicker { font: 600 var(--ov-kicker) 'Spline Sans', 'Manrope', sans-serif; letter-spacing: .3em; color: #FFD9A0; text-transform: uppercase; animation: fd-rise calc(.6s * var(--spd)) calc(.95s * var(--spd)) both; }
.fd-fr-title { margin: 10px 0 12px; font-family: 'Lilita One', 'Commissioner', 'Trebuchet MS', sans-serif; font-weight: 400; font-size: var(--ov-fr); line-height: 1; color: #FAF7F2; text-shadow: 0 4px 0 #6B3B12, 0 10px 40px rgba(0,0,0,.6); animation: fd-bounce calc(.8s * var(--spd)) calc(1.05s * var(--spd)) cubic-bezier(.2,.9,.25,1.35) both; }
.fd-root:lang(el) .fd-fr-title, .fd-root:lang(ru) .fd-fr-title { font-weight: 800; }
@keyframes fd-bounce { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
.fd-fr-sub { max-width: 32ch; font-size: var(--ov-fr-sub); line-height: 1.45; color: #F6E7CF; text-shadow: 0 2px 14px #1A1722; animation: fd-rise calc(.6s * var(--spd)) calc(1.45s * var(--spd)) both; }

/* ---------- still: reduced motion, or a device that cannot keep up ---------- */
.fd-still .fd-lift, .fd-still .fd-side, .fd-still .fd-brk, .fd-still .fd-gem { transition: none; }
.fd-still .fd-side:hover .fd-lift, .fd-still .fd-side:focus-visible .fd-lift, .fd-still .fd-side:active .fd-lift { transform: none; }
.fd-still .fd-solo-glow, .fd-still .fd-fr-glow, .fd-still .fd-solo-edge, .fd-still .fd-chev b, .fd-still .fd-shine, .fd-still .fd-s-spark { animation: none !important; }
.fd-still .fd-shine, .fd-still .fd-s-spark, .fd-still .fd-flash, .fd-still .fd-door, .fd-still .fd-door-light, .fd-still .fd-card-glow { display: none; }
.fd-still .fd-ov-brk, .fd-still .fd-sync, .fd-still .fd-sync-fill, .fd-still .fd-sync-num, .fd-still .fd-solo-title, .fd-still .fd-solo-sub, .fd-still .fd-fr-kicker, .fd-still .fd-fr-title, .fd-still .fd-fr-sub { animation: fd-fade .2s both !important; }
.fd-still .fd-sync-num { --fd-pct: 100; }
@media (prefers-reduced-motion: reduce) {
  .fd-root .fd-lift, .fd-root .fd-brk, .fd-root .fd-gem { transition: none; }
  .fd-root .fd-solo-glow, .fd-root .fd-fr-glow, .fd-root .fd-solo-edge, .fd-root .fd-chev b, .fd-root .fd-shine, .fd-root .fd-s-spark { animation: none !important; }
  .fd-root .fd-shine, .fd-root .fd-s-spark, .fd-root .fd-flash, .fd-root .fd-door, .fd-root .fd-door-light, .fd-root .fd-card-glow { display: none; }
  .fd-root .fd-ov-brk, .fd-root .fd-sync, .fd-root .fd-sync-fill, .fd-root .fd-sync-num, .fd-root .fd-solo-title, .fd-root .fd-solo-sub, .fd-root .fd-fr-kicker, .fd-root .fd-fr-title, .fd-root .fd-fr-sub { animation: fd-fade .2s both !important; }
  .fd-root .fd-sync-num { --fd-pct: 100; }
}