:root[data-theme="fr"] {
--bg-mode: css;
--bg-top: #1E2E52; --bg-bottom: #1E2E52; --stripe-opacity: 0;
--ink: #0B1322; --night: #0B1322; --cream: #FFF4E3; --paper: #FFF4E3;
--cabinet: #F7B3C8; --cabinet-dark: #C69A3E; --mustard: #F2C94C; --mustard-dark: #C69A3E;
--teal: #0B1322; --teal-dark: #C69A3E; --led: #A8DCCB; --led-red: #F7B3C8;
--lamp-0: #F2C94C; --lamp-1: #F7B3C8; --lamp-2: #A8DCCB; --lamp-3: #F2C94C; --lamp-off: #1E2E52;
--dark-face: #0B1322; --dark-edge: #C69A3E; --tile-base: #0B1322; --tile-stripe: #C69A3E; --tile-text: #FFF4E3; --amida-lamp: #F2C94C;
--ink-dim: #C6CBD6; --line: #C69A3E; --focus: #A8DCCB;
--font-px: "Silkscreen", "DotGothic16 Sym", ui-monospace, monospace;
--font-vt: "VT323", "DotGothic16 Sym", ui-monospace, monospace;
--font-title: var(--font-px); --font-display: var(--font-px); --font-led: var(--font-px); --font-rounded: var(--font-vt); --font-body: var(--font-vt);
--wheel-count: 6; --wheel-font: "VT323", monospace; --wheel-weight: 400;
--wheel-0: #142038; --wheel-0-text: #FFF4E3;
--wheel-1: #F2C94C; --wheel-1-text: #0B1322;
--wheel-2: #1E2E52; --wheel-2-text: #FFF4E3;
--wheel-3: #F7B3C8; --wheel-3-text: #0B1322;
--wheel-4: #142038; --wheel-4-text: #FFF4E3;
--wheel-5: #A8DCCB; --wheel-5-text: #0B1322;
--wheel-line: #0B1322; --wheel-rim: #F2C94C; --wheel-rim-bg: #0B1322;
--wheel-win: #FFF4E3; --wheel-win-text: #0B1322; --wheel-win-edge: #F7B3C8; --wheel-win-mark: "» "; --wheel-dim: rgba(11, 19, 34, 0.6);
--wheel-hub-bg: #0B1322; --wheel-hub-ring: #F2C94C; --wheel-hub-ink: #F2C94C; --wheel-hub-font: "VT323", monospace;
--wheel-pointer: #F2C94C; --wheel-pointer-edge: #0B1322;
}
:root[data-machine="fr"] {
--rg-font: "VT323", "DotGothic16 Sym", ui-monospace, monospace;
--rg-font-title: "Silkscreen", "DotGothic16 Sym", ui-monospace, monospace;
--rg-fs: 20px; --rg-fs-m: 24px; --rg-fs-l: 32px; --rg-lh: 1.25; --rg-track: 0;
--rg-dot: 3px;
--rg-screen: #1E2E52; --rg-win: #0B1322; --rg-ink: #FFF4E3; --rg-dim: #C6CBD6;
--rg-line: #F2C94C; --rg-line2: #C69A3E;
--rg-hi: #F2C94C; --rg-cur: #F7B3C8; --rg-btn: #F2C94C; --rg-btn-ink: #0B1322; --rg-shade: #F7B3C8;
--rg-cursor: "»"; --rg-cursor-rot: 0deg;
--rg-win-border: 0 none; --rg-win-shadow: none; --rg-win-pad: 18px 28px;
--fr-frame:
linear-gradient(#F7B3C8 0 0) left 6px top 3px / 12px 6px no-repeat, linear-gradient(#F7B3C8 0 0) right 6px top 3px / 12px 6px no-repeat,
linear-gradient(#F7B3C8 0 0) left 6px bottom 3px / 12px 6px no-repeat, linear-gradient(#F7B3C8 0 0) right 6px bottom 3px / 12px 6px no-repeat,
linear-gradient(#F2C94C 0 0) left top / 24px 12px no-repeat, linear-gradient(#F2C94C 0 0) right top / 24px 12px no-repeat,
linear-gradient(#F2C94C 0 0) left bottom / 24px 12px no-repeat, linear-gradient(#F2C94C 0 0) right bottom / 24px 12px no-repeat,
linear-gradient(#C69A3E 0 0) left 12px top 6px / calc(100% - 24px) 3px no-repeat, linear-gradient(#C69A3E 0 0) left 12px bottom 6px / calc(100% - 24px) 3px no-repeat,
linear-gradient(#C69A3E 0 0) left 12px top 6px / 6px calc(100% - 12px) no-repeat, linear-gradient(#C69A3E 0 0) right 12px top 6px / 6px calc(100% - 12px) no-repeat,
linear-gradient(#F2C94C 0 0) left top / 100% 3px no-repeat, linear-gradient(#F2C94C 0 0) left bottom / 100% 3px no-repeat,
linear-gradient(#F2C94C 0 0) left top / 6px 100% no-repeat, linear-gradient(#F2C94C 0 0) right top / 6px 100% no-repeat;
}
:root[data-machine="fr"] body { background: #1E2E52 !important; }
:root[data-machine="fr"] :is(.fr-arcade, .fr-rim) { display: none; }
@media (min-width: 640px) {
:root[data-machine="fr"] body { background: #0B1322 !important; }
:root[data-machine="fr"] .stage { background: #1E2E52; border-radius: 0; box-shadow: 0 0 0 6px #0B1322, 0 0 0 9px #C69A3E, 0 0 0 15px #0B1322, 0 0 0 18px #F2C94C; }
:root[data-machine="fr"] .stage::before, :root[data-machine="fr"] .stage::after { display: none; }
}
:root[data-machine="fr"] :focus-visible { outline: 3px solid #A8DCCB; outline-offset: 3px; box-shadow: 0 0 0 3px #0B1322; }
:root[data-machine="fr"] a { color: #F2C94C; }
:root[data-machine="fr"] :is(.panel, .tiles, .home-line, .today-card, .result-card, .toast, .row, .confirm, .seg, .led) { background: var(--fr-frame), #0B1322; }
:root[data-machine="fr"] .result-actions { background: transparent; }
:root[data-machine="fr"] .btn { border-style: solid; border-width: 3px 6px; padding: 8px 14px 8px 40px; font-size: 24px; line-height: 1.2; }
:root[data-machine="fr"] .btn-arcade { box-shadow: 6px 3px 0 #0B1322; font: 400 24px/1.25 var(--rg-font-title); text-transform: uppercase; }
:root[data-machine="fr"] .btn-arcade:active:not(:disabled) { transform: translate(6px, 3px); box-shadow: none; }
:root[data-machine="fr"] :is(.btn-row, .settings) .btn { font-size: 24px; min-height: 56px; }
:root[data-machine="fr"] .home > .btn-row { flex-direction: column; gap: 8px; }
:root[data-machine="fr"] .btn-sub { font: 400 16px/1.25 var(--rg-font-title); color: #A8DCCB; text-transform: uppercase; }
:root[data-machine="fr"] .fr-head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "pic" "start" "line"; gap: 12px; justify-items: center; position: relative; isolation: isolate; }
:root[data-machine="fr"] .fr-head > .rg-title { grid-area: title; gap: 6px; }
:root[data-machine="fr"] .rg-proto { font-size: 20px; letter-spacing: 0.04em; }
:root[data-machine="fr"] .rg-game { width: min-content; margin: 2px 0 4px; font: 400 24px/1.125 var(--rg-font-title); text-transform: uppercase; color: #A8DCCB; letter-spacing: 0;
transform: scaleX(2); text-shadow: none; }
:root[data-machine="fr"] .rg-game::first-line { color: #F2C94C; }
:root[data-machine="fr"] .fr-head::before { content: ""; grid-area: pic; justify-self: stretch; height: 282px; z-index: -1;
image-rendering: crisp-edges; image-rendering: pixelated;
background:
var(--fr-frame),
url("pixel/fr/mirror-frame.png") left max(-72px, calc(50% - 216px)) bottom 45px / 120px 222px no-repeat,
url("pixel/fr/mirror-frame.png") right max(-72px, calc(50% - 216px)) bottom 45px / 120px 222px no-repeat,
url("pixel/fr/passage.png") left max(-72px, calc(50% - 216px)) bottom 45px / 120px 222px no-repeat,
url("pixel/fr/passage.png") right max(-72px, calc(50% - 216px)) bottom 45px / 120px 222px no-repeat,
linear-gradient(#C69A3E 0 0) left bottom 45px / 100% 3px no-repeat,
linear-gradient(180deg, #0B1322 0 36px, #101A2D 36px 72px, #142038 72px);
}
:root[data-machine="fr"] .fr-head::after { content: ""; grid-area: pic; align-self: end; justify-self: stretch; height: 36px; margin: 0 18px 9px; z-index: -1;
background: repeating-conic-gradient(#1E2E52 0 25%, #0B1322 0 50%) left top / 24px 12px; }
:root[data-machine="fr"] .fr-head > .fr-chandelier { grid-area: pic; align-self: start; margin-top: 12px; width: var(--rg-w, 300px); height: var(--rg-h, 162px); max-width: none; }
:root[data-machine="fr"] .fr-head > .fr-mirror { grid-area: pic; align-self: end; margin-bottom: 54px; position: relative; width: auto; height: auto; overflow: visible; display: block;
padding: 6px 18px; border-radius: 0; border-style: solid; border-width: 3px 6px; border-color: #F2C94C; background: #0B1322; box-shadow: 6px 3px 0 #F7B3C8; }
:root[data-machine="fr"] .fr-mirror::before, :root[data-machine="fr"] .fr-mirror::after { content: none; }
:root[data-machine="fr"] .fr-mirror .home-title { font: 400 24px/1.25 var(--rg-font-title); color: #FFF4E3; letter-spacing: 0; text-transform: uppercase; text-shadow: none; white-space: nowrap; }
:root[data-machine="fr"] .fr-head > .fr-hair { display: none; }
:root[data-machine="fr"] .fr-head > .rg-start { grid-area: start; display: grid; gap: 6px; justify-items: center; }
:root[data-machine="fr"] .rg-press { font: 400 16px/1.5 var(--rg-font-title); color: #FFF4E3; letter-spacing: 0.08em; cursor: pointer; }
:root[data-machine="fr"] .rg-cont { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 20px; color: #C6CBD6; }
:root[data-machine="fr"] .rg-cont-k::before { content: "◆\00A0"; font-family: "DotGothic16 Sym", var(--rg-font); color: #F7B3C8; }
:root[data-machine="fr"] .fr-head > .home-line { grid-area: line; justify-self: stretch; margin: 0; font: 400 24px/1.25 var(--rg-font); color: #FFF4E3; text-align: left; }
:root[data-machine="fr"] .plaque { display: none; }
:root[data-machine="fr"] .home-foot { font: 400 20px/1.3 var(--rg-font); color: #C6CBD6; }
:root[data-machine="fr"] .today-label { font: 400 16px/1.25 var(--rg-font-title); letter-spacing: 0.04em; color: #A8DCCB; opacity: 1; }
:root[data-machine="fr"] .today-text { font: 400 24px/1.25 var(--rg-font); }
:root[data-machine="fr"] .home-question { position: relative; z-index: 2; justify-self: start; align-self: flex-start; margin: 0 0 -36px 24px; padding: 3px 12px;
background: #F2C94C; color: #0B1322; font: 400 24px/1.25 var(--rg-font-title); text-transform: uppercase; box-shadow: 6px 3px 0 #0B1322; }
:root[data-machine="fr"] .tiles { padding: 36px 24px 18px; gap: 6px 12px; }
:root[data-machine="fr"] .tile { min-height: 132px; padding: 10px 4px 8px; gap: 6px; }
:root[data-machine="fr"] :is(.btn, .tile)::before { font-family: var(--rg-font); }
:root[data-machine="fr"] .tile::before { left: 4px; top: 38%; font-size: 24px; }
:root[data-machine="fr"] .tile-emoji { font-size: 72px; }
:root[data-machine="fr"] .tile-emoji .cat-ico.rg-px { width: 72px; height: 72px; }
:root[data-machine="fr"] .tile-title { font: 400 32px/1 var(--rg-font); }
:root[data-machine="fr"] .led { font: 400 24px/1.25 var(--rg-font-title); text-transform: uppercase; text-align: left; padding: 15px 28px; }
:root[data-machine="fr"] .led .led-ico { width: 48px; height: 48px; vertical-align: -15px; margin-right: 12px; }
:root[data-machine="fr"] :is(.draw, .draw-stage) .led { font: 400 24px/1.25 var(--rg-font); text-transform: none; text-align: center; padding: 15px 28px; }
html:root[data-machine="fr"] .tn-tag { background: #0B1322; border: solid #A8DCCB; border-width: 3px 6px; border-radius: 0; padding: 4px 16px 4px 8px; color: #FFF4E3; font: 400 20px/1.2 var(--rg-font); }
html:root[data-machine="fr"] .tn-arrow { color: #F2C94C; }
html:root[data-machine="fr"] .tn-place { color: #F7B3C8; font-weight: 400; }
:root[data-machine="fr"] .section-title { font: 400 24px/1.25 var(--rg-font-title); color: #F2C94C; text-transform: uppercase; }
:root[data-machine="fr"] .cat-line { font: 400 20px/1.3 var(--rg-font); color: #C6CBD6; margin: 0; }
:root[data-machine="fr"] .chip { border: solid #C69A3E; border-width: 3px 6px; font-size: 20px; padding: 4px 12px; }
:root[data-machine="fr"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #FFF4E3; color: #0B1322; border-color: #FFF4E3; }
:root[data-machine="fr"] .chip[aria-pressed="true"]:not(.chip-cand)::before { content: none; }
:root[data-machine="fr"] .chip.chip-cand { border-color: #C69A3E; }
:root[data-machine="fr"] .btn-grid { counter-reset: fr-m; gap: 12px; }
:root[data-machine="fr"] .btn-method { counter-increment: fr-m; display: grid; grid-template-columns: 1fr; align-content: start; justify-items: start; row-gap: 4px; text-align: left;
min-height: 120px; padding: 12px 8px 12px 26px; border-color: #C69A3E; box-shadow: none; }
:root[data-machine="fr"] .btn-method::before { left: 6px; top: 52px; }
:root[data-machine="fr"] .btn-method .btn-tag { order: 0; margin: 0; padding: 0 6px; background: #A8DCCB; color: #0B1322; font: 400 20px/1.2 var(--rg-font); text-transform: uppercase; }
:root[data-machine="fr"] .btn-method .btn-tag::before { content: counter(fr-m, upper-roman) " · "; }
:root[data-machine="fr"] .btn-method .btn-label { order: 1; font: 400 24px/1.2 var(--rg-font); color: #FFF4E3; }
:root[data-machine="fr"] .btn-method .btn-flavor { order: 2; margin: 0; font: 400 20px/1.15 var(--rg-font); color: #C6CBD6; }
:root[data-machine="fr"] .btn-method .btn-sub { order: 3; margin: 0; color: #A8DCCB; }
:root[data-machine="fr"] .btn-method.is-rec { border-color: #FFF4E3; box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 6px #FFF4E3; }
:root[data-machine="fr"] .btn-method:is(:hover, :focus-visible, .is-cur) .btn-label { color: #F2C94C; }
:root[data-machine="fr"] .panel h2 { font: 400 24px/1.25 var(--rg-font-title) !important; color: #F2C94C !important; text-transform: uppercase; }
:root[data-machine="fr"] .linkish { color: #F2C94C; font: 400 20px/1.2 "VT323", ui-monospace, monospace; }
:root[data-machine="fr"] :is(.note, .picked-note, .small, .muted) { font-family: var(--rg-font); color: #C6CBD6; }
:root[data-machine="fr"] :is(.note, .small, .muted) { font-size: 20px; line-height: 1.25; }
html:root[data-machine="fr"] .picked-note { font-size: 20px; letter-spacing: 0; }
:root[data-machine="fr"] .die { background: #FFF4E3; border-radius: 0; box-shadow: 6px 3px 0 #F7B3C8, 12px 6px 0 #0B1322; }
:root[data-machine="fr"] .pip, :root[data-machine="fr"] .pip.one { border-radius: 0; background: #0B1322; }
:root[data-machine="fr"] .pip.one { background: #F7B3C8; }
:root[data-machine="fr"] .dice-table li { border-radius: 0; font: 400 20px/1.25 var(--rg-font); }
:root[data-machine="fr"] .dice-table li.is-landed { background: #F7B3C8; color: #0B1322; }
:root[data-machine="fr"] .card-face { border-radius: 0; box-shadow: 6px 3px 0 #F7B3C8; }
:root[data-machine="fr"] .card-back { background: repeating-conic-gradient(#142038 0 25%, #0B1322 0 50%) 0 0 / 24px 12px; }
:root[data-machine="fr"] .card-back::before { inset: 15px; border-radius: 0; background: none; border: solid #C69A3E; border-width: 3px 6px; }
:root[data-machine="fr"] .card-back::after { inset: 6px; border-radius: 0; border: solid #F2C94C; border-width: 3px 6px; box-shadow: none; }
:root[data-machine="fr"] .card-emblem { background: #0B1322; border-radius: 0; border: solid #F2C94C; border-width: 3px 6px; }
:root[data-machine="fr"] .card-emblem b { font: 400 32px/1 var(--rg-font-title); color: #F2C94C; }
:root[data-machine="fr"] .card-emblem i { font: 400 20px/1 var(--rg-font); color: #A8DCCB; letter-spacing: 0.1em; font-style: normal; }
:root[data-machine="fr"] .card-front { background: #FFF4E3; color: #0B1322; }
:root[data-machine="fr"] .card-front::after { inset: 6px; border-radius: 0; border: solid #0B1322; border-width: 3px 6px; box-shadow: none; }
:root[data-machine="fr"] .card-text { font: 400 clamp(24px, 8vw, 32px)/1.2 var(--rg-font); color: #0B1322; }
:root[data-machine="fr"] :is(.card-kicker, .card-more-btn, .deck-count, .card-more small) { font-family: var(--rg-font-title); font-weight: 400; }
:root[data-machine="fr"] .card-kicker { color: #6f5418; font-size: 16px; letter-spacing: 0.06em; }
:root[data-machine="fr"] .card-more-btn { border-radius: 0; border-color: #0B1322; color: #0B1322; }
:root[data-machine="fr"] .card-more { border-radius: 0; font: 400 20px/1.25 var(--rg-font); }
:root[data-machine="fr"] .deck-hint { font: 400 20px/1.2 var(--rg-font); color: #FFF4E3; }
:root[data-machine="fr"] .deck-count { font: 400 16px/1.25 var(--rg-font-title); color: #A8DCCB; }
:root[data-machine="fr"] .amida-rail { stroke: #F2C94C; stroke-width: 3; stroke-linecap: square; }
:root[data-machine="fr"] .amida-path { stroke: #A8DCCB; stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="fr"] .amida-starts { counter-reset: fr-a; }
:root[data-machine="fr"] .amida-start { counter-increment: fr-a; font-size: 0 !important; }
:root[data-machine="fr"] .amida-start::before { content: counter(fr-a); font: 400 24px/1 var(--rg-font); }
:root[data-machine="fr"] .amida-start { border-radius: 0; background: #0B1322; color: #F2C94C; border: solid #F2C94C; border-width: 3px 6px; font: 400 20px/1 var(--rg-font); }
:root[data-machine="fr"] .amida-start[aria-pressed="true"] { background: #F2C94C; color: #0B1322; }
:root[data-machine="fr"] .amida-goal { background: #0B1322; border: solid #C69A3E; border-width: 3px 6px; border-radius: 0; color: #FFF4E3; font: 400 20px/1.2 var(--rg-font); }
:root[data-machine="fr"] .amida-goal.is-open { background: #F2C94C; color: #0B1322; }
:root[data-machine="fr"] .overlay { background: rgba(11, 19, 34, 0.9); }
:root[data-machine="fr"] .fr-result { position: relative; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; border: 0; border-radius: 0; box-shadow: 9px 6px 0 #142038;
padding: 18px 30px 24px; justify-items: stretch; text-align: left; overflow: visible; animation: none; }
:root[data-machine="fr"] .fr-result::before, :root[data-machine="fr"] .fr-result::after { content: none; }
:root[data-machine="fr"] .fr-result > * { grid-column: 1 / -1; }
:root[data-machine="fr"] .fr-result > .fr-shell { grid-row: 1; justify-self: center; width: var(--rg-w, 96px); height: var(--rg-h, 84px); margin: 0 0 -6px; }
:root[data-machine="fr"] .fr-result > .fr-kicker { grid-row: 2; }
:root[data-machine="fr"] .fr-result > .fr-hair { display: none; }
:root[data-machine="fr"] .fr-result > .rg-say-head { grid-row: 3; grid-column: 1; align-self: end; }
:root[data-machine="fr"] .fr-result > .fr-cartouche { grid-row: 3; grid-column: 2; }
:root[data-machine="fr"] .fr-result > .result-text { grid-row: 4; }
:root[data-machine="fr"] .fr-result > .rg-log { grid-row: 5; }
:root[data-machine="fr"] .fr-kicker { justify-self: center; margin: 0; font: 400 16px/1.5 var(--rg-font-title); letter-spacing: 0.12em; color: #F2C94C; text-align: center; }
:root[data-machine="fr"] .fr-cartouche { position: relative; width: 96px; height: 84px; border-radius: 0; display: grid; place-items: center; background: #142038;
border: solid #C69A3E; border-width: 3px 6px; box-shadow: inset 0 0 0 3px #0B1322; }
:root[data-machine="fr"] .fr-cartouche .cat-ico.rg-px { width: 72px; height: 72px; }
:root[data-machine="fr"] .fr-result .rg-say-head { margin: 0; font: 400 16px/1.5 var(--rg-font-title); color: #A8DCCB; letter-spacing: 0.06em; }
:root[data-machine="fr"] .fr-result .result-text { position: relative; min-height: 2.5em; font: 400 32px/1.25 var(--rg-font); color: #FFF4E3; text-shadow: none; hyphens: manual; -webkit-hyphens: manual; }
:root[data-machine="fr"] .fr-result .result-text.topic { font-size: 32px; }
:root[data-machine="fr"] .fr-result .rg-next { font-size: 20px; vertical-align: 2px; }
:root[data-machine="fr"] .fr-result .rg-log { justify-self: end; font-size: 20px; color: #C6CBD6; }
:root[data-machine="fr"] .fr-result .result-sub { color: #C6CBD6; }
:root[data-machine="fr"] .fr-result .result-actions { margin-top: 6px; padding: 12px 0 0; border: 0; box-shadow: none; background: linear-gradient(#C69A3E 0 0) left top / 100% 3px no-repeat; }
:root[data-machine="fr"] .result-actions .btn-row { flex-direction: column; }
:root[data-machine="fr"] .result-actions .btn { font-size: 24px; padding-left: 40px; box-shadow: none; text-transform: none; }
:root[data-machine="fr"] .result-actions > .btn-arcade { font: 400 24px/1.25 var(--rg-font-title); text-transform: uppercase; }
:root[data-machine="fr"] .result-more-btn, :root[data-machine="fr"] .result-more { font: 400 20px/1.25 var(--rg-font); color: #F2C94C; }
:root[data-machine="fr"] .fr-mist { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 0; background: #0B1322; -webkit-mask-image: none; mask-image: none;
animation: fr-dissolve 0.6s steps(1, end) 0.05s both; }
@keyframes fr-dissolve {
0% { background: #0B1322; }
33% { background: repeating-conic-gradient(#0B1322 0 25%, transparent 0 50%) 0 0 / 12px 6px; }
66% { background: repeating-conic-gradient(#0B1322 0 25%, transparent 0 100%) 0 0 / 12px 6px; }
100% { background: transparent; visibility: hidden; }
}
:root[data-machine="fr"] .result-below { background: #0B1322; }
html:root[data-machine="fr"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="fr"] :is(.result-below, .settings) .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="fr"] :is(.row-text, .row-meta, .settings, .field label, .toggle, .confirm, .edit-item) { font-family: var(--rg-font); font-weight: 400; }
:root[data-machine="fr"] :is(.row-text, .toggle, .settings p, .settings li) { font-size: 24px; line-height: 1.25; }
:root[data-machine="fr"] .settings :is(.small, .muted) { font-size: 20px; }
:root[data-machine="fr"] .settings h3 { font: 400 16px/1.5 var(--rg-font-title) !important; color: #A8DCCB; text-transform: uppercase; }
:root[data-machine="fr"] .toggle input:checked + .switch { background: #F2C94C; }
:root[data-machine="fr"] .seg button[aria-selected="true"] { background: #FFF4E3; color: #0B1322; }
:root[data-machine="fr"][data-motion="reduce"] .fr-mist { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="fr"]:not([data-motion="full"]) .fr-mist { animation: none; display: none; } }
:root[data-machine="fr"] .fr-head::before { height: 222px;
background:
var(--fr-frame),
url("pixel/fr/mirror-frame.png") left max(-40px, calc(50% - 190px)) bottom 45px / 80px 148px no-repeat,
url("pixel/fr/mirror-frame.png") right max(-40px, calc(50% - 190px)) bottom 45px / 80px 148px no-repeat,
url("pixel/fr/passage.png") left max(-40px, calc(50% - 190px)) bottom 45px / 80px 148px no-repeat,
url("pixel/fr/passage.png") right max(-40px, calc(50% - 190px)) bottom 45px / 80px 148px no-repeat,
linear-gradient(#C69A3E 0 0) left bottom 45px / 100% 3px no-repeat,
linear-gradient(180deg, #0B1322 0 30px, #101A2D 30px 60px, #142038 60px); }
:root[data-machine="fr"] .fr-head > .fr-chandelier { margin-top: 9px; width: 200px; height: 108px; }
:root[data-machine="fr"] .fr-head > .fr-mirror { margin-bottom: 51px; }
@media (min-width: 1100px) {
:root[data-machine="fr"] .fr-head { gap: 9px; }
:root[data-machine="fr"] .tiles { padding: 33px 24px 15px; }
:root[data-machine="fr"] .tile { min-height: 96px; padding: 6px 4px 6px; gap: 3px; }
:root[data-machine="fr"] .tile-emoji { font-size: 48px; }
:root[data-machine="fr"] .tile-emoji .cat-ico.rg-px { width: 48px; height: 48px; }
:root[data-machine="fr"] .tile-title { font-size: 24px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="fr"] .fr-head { gap: 6px; }
:root[data-machine="fr"] .fr-head > .home-line { display: none; }
:root[data-machine="fr"] .fr-head > .rg-start { gap: 0; }
:root[data-machine="fr"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-inline: 18px; }
:root[data-machine="fr"] .tile { min-height: 90px; padding-inline: 2px; }
:root[data-machine="fr"] .tile::before { left: 0; }
:root[data-machine="fr"] .tile-title { font-size: 20px; }
}
:root[data-machine="fr"] .card-area + div > .btn-row { flex-direction: column; gap: 10px; }
:root[data-machine="fr"] .card-area + div > .btn-row > .btn { flex: 0 0 auto; width: 100%; white-space: normal; }
:root[data-machine="fr"] .deck-hint { left: 22px; right: 22px; bottom: 22px; text-wrap: balance; }
@media (min-width: 1100px) and (pointer: fine) {
:root[data-machine="fr"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
@media (max-width: 639px) {
:root[data-machine="fr"] .fr-head { gap: 9px; }
:root[data-machine="fr"] .tiles { padding-top: 33px; }
:root[data-machine="fr"] .tile { min-height: 120px; padding-block: 8px 6px; }
}
@media (max-width: 479px) { :root[data-machine="fr"] { --rg-decide-fs: 24px; } }
:root[data-machine="fr"] .rg-press { padding: 6px 18px 6px 12px; background: #F7B3C8; color: #0B1322; box-shadow: 6px 3px 0 #0B1322; }
:root[data-machine="fr"] .rg-press.is-wait { animation: none; }
:root[data-machine="fr"] .rg-press::before { visibility: visible; color: #0B1322; }
:root[data-machine="fr"] .rg-press.is-wait::before { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="fr"][data-motion="reduce"] .rg-press.is-wait::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="fr"]:not([data-motion="full"]) .rg-press.is-wait::before { animation: none; } }
@media (max-width: 479px) {
:root[data-machine="fr"] .fr-head > .home-line { display: none; }
:root[data-machine="fr"] .tile { min-height: 96px; padding-block: 6px; gap: 3px; }
:root[data-machine="fr"] .tile-emoji { font-size: 48px; }
:root[data-machine="fr"] .tile-emoji .cat-ico.rg-px { width: 48px; height: 48px; }
:root[data-machine="fr"] .tile-title { font-size: 24px; }
}
@media (min-width: 1200px) {
:root {
--wide-edge: 280px;
--wide-half: 312px;
--wide-under: calc(50% - var(--wide-edge));
--wide-w: calc(50% - var(--wide-half));
}
html::before, html::after, body::before, body::after {
position: fixed; top: 0; bottom: 0; width: var(--wide-w); z-index: 1;
pointer-events: none; background-repeat: no-repeat;
}
html::before, body::before { width: var(--wide-under); }
body::before, body::after { left: 0; }
html::before, html::after { right: 0; }
}
@media (min-width: 1200px) {
:root[data-theme="fr"] { --fr-floor: 120px; }
:root[data-theme="fr"] body::before, :root[data-theme="fr"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
url("pixel/fr/chandelier.png"),
url("pixel/fr/shell-ornament.png"),
url("pixel/fr/mirror-frame.png"), url("pixel/fr/passage.png"),
url("pixel/fr/mirror-frame.png"), url("pixel/fr/passage.png"),
url("pixel/fr/mirror-frame.png"), url("pixel/fr/passage.png"),
linear-gradient(#F2C94C 0 0), linear-gradient(#C69A3E 0 0),
linear-gradient(180deg, #0B1322 0 22%, #101A2D 22% 44%, #142038 44% calc(100% - var(--fr-floor) - 90px), #1E2E52 calc(100% - var(--fr-floor) - 90px));
background-size: 300px 162px, 96px 84px, 240px 444px, 240px 444px, 120px 222px, 120px 222px, 120px 222px, 120px 222px, 100% 3px, 100% 3px, 100% 100%;
background-repeat: no-repeat;
background-position:
right 30px top 30px,
right 132px bottom calc(var(--fr-floor) + 432px),
right 60px bottom var(--fr-floor), right 60px bottom var(--fr-floor),
right 330px bottom var(--fr-floor), right 330px bottom var(--fr-floor),
right 480px bottom var(--fr-floor), right 480px bottom var(--fr-floor),
left bottom calc(var(--fr-floor) + 90px), left bottom var(--fr-floor),
left top;
}
:root[data-theme="fr"]::before {
background-position:
left 30px top 30px,
left 132px bottom calc(var(--fr-floor) + 432px),
left 60px bottom var(--fr-floor), left 60px bottom var(--fr-floor),
left 330px bottom var(--fr-floor), left 330px bottom var(--fr-floor),
left 480px bottom var(--fr-floor), left 480px bottom var(--fr-floor),
left bottom calc(var(--fr-floor) + 90px), left bottom var(--fr-floor),
left top;
}
:root[data-theme="fr"] body::after, :root[data-theme="fr"]::after {
content: ""; top: auto; height: var(--fr-floor);
background: repeating-conic-gradient(#1E2E52 0 25%, #0B1322 0 50%) left top / 48px 24px;
box-shadow: 0 -3px 0 #F2C94C;
}
html:root[data-theme="fr"] body::after, html:root[data-theme="fr"]::after { top: auto; }
}