@font-face {
font-family: "RYD DE Sym"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/dotgothic16-sym.woff2") format("woff2");
unicode-range: U+2190-21FF, U+2500-26FF;
}
:root[data-theme="de"] {
--bg-mode: css;
--bg-top: #15171A; --bg-bottom: #15171A; --stripe-opacity: 0;
--ink: #15171A; --night: #15171A; --cream: #F2F1EC; --paper: #2A2F36;
--cabinet: #2A2F36; --cabinet-dark: #0B0C0E; --mustard: #FFC61A; --mustard-dark: #7A5E00;
--teal: #15171A; --teal-dark: #0B0C0E; --led: #F2F1EC; --led-red: #FF7A1A;
--lamp-0: #FFC61A; --lamp-1: #FFC61A; --lamp-2: #FFC61A; --lamp-3: #FFC61A; --lamp-off: #3A3F46;
--dark-face: #15171A; --dark-edge: #8A919A; --tile-base: #15171A; --tile-stripe: #4A5058; --tile-text: #F2F1EC; --amida-lamp: #FFC61A;
--ink-dim: #B4B8BF; --line: #8A919A; --focus: #F2F1EC; --blue: #4F86FF; --blue-text: #7FA7FF; --orange: #FF7A1A;
--de-ss: "Silkscreen", "RYD DE Sym", ui-monospace, monospace;
--de-vt: "VT323", "RYD DE Sym", ui-monospace, monospace;
--font-title: var(--de-ss); --font-rounded: var(--de-vt); --font-body: var(--de-vt); --font-led: var(--de-ss);
--wheel-count: 2;
--wheel-0: #2A2F36; --wheel-0-text: #F2F1EC;
--wheel-1: #8A919A; --wheel-1-text: #15171A;
--wheel-2: #202429; --wheel-2-text: #F2F1EC;
--wheel-font: "VT323", monospace; --wheel-weight: 400;
--wheel-line: #15171A; --wheel-rim: #4F86FF; --wheel-rim-bg: #15171A; --wheel-lamps: 0;
--wheel-win: #FFC61A; --wheel-win-text: #15171A; --wheel-win-edge: #F2F1EC; --wheel-dim: rgba(21, 23, 26, 0.55);
--wheel-hub-bg: #15171A; --wheel-hub-ring: #8A919A; --wheel-hub-ink: #7FA7FF; --wheel-hub-font: "Silkscreen", monospace;
--wheel-pointer: #15171A; --wheel-pointer-edge: #FF7A1A; --wheel-pointer-blur: 0;
--bf-veil: rgba(21, 23, 26, 0.9); --bf-ink: #F2F1EC;
}
:root[data-machine="de"] {
--rg-font: var(--de-vt); --rg-font-title: var(--de-ss);
--rg-fs: 25px; --rg-fs-m: 24px; --rg-fs-l: 40px; --rg-lh: 1.25; --rg-track: 0;
--rg-dot: 4px;
--rg-screen: #15171A; --rg-win: #15171A; --rg-ink: #F2F1EC; --rg-dim: #B4B8BF;
--rg-line: #8A919A; --rg-line2: #15171A;
--rg-hi: #7FA7FF; --rg-cur: #7FA7FF; --rg-btn: #FFC61A; --rg-btn-ink: #15171A; --rg-shade: #0B0C0E;
--rg-win-border: 4px solid #8A919A; --rg-win-shadow: none; --rg-win-pad: 14px 16px;
--de-rev: #7FA7FF;
--de-tr: -0.125em;
}
:root[data-machine="de"] body { background: #15171A !important; }
:root[data-machine="de"] :is(.de-perf, .de-lamp, .de-rim) { display: none; }
:root[data-machine="de"] .de-hazard { top: 0; bottom: 0; width: 8px; height: auto; background: #4F86FF; box-shadow: none; }
:root[data-machine="de"] .de-hazard-l { left: 0; right: auto; }
:root[data-machine="de"] .de-hazard-r { right: 0; left: auto; display: block; }
@media (min-width: 640px) {
:root[data-machine="de"] .de-hazard { display: none; }
:root[data-machine="de"] .stage { background: #15171A; border-radius: 0; box-shadow: 0 0 0 20px #4F86FF, 0 0 0 24px #0B0C0E, 12px 12px 0 24px #0B0C0E; }
}
:root[data-machine="de"] :focus-visible { outline: 3px solid #F2F1EC; outline-offset: 2px; box-shadow: 0 0 0 5px #15171A; }
:root[data-machine="de"] a { color: #7FA7FF; }
:root[data-machine="de"] main.app { -webkit-font-smoothing: none; }
:root[data-machine="de"] .de-head { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; }
:root[data-machine="de"] :is(.de-titlerow, .de-titlecol) { display: contents; }
:root[data-machine="de"] .de-rail { order: 0; position: relative; height: 336px; margin: -16px -10px 0; image-rendering: crisp-edges; image-rendering: pixelated;
background:
url("pixel/de/conveyor.png") no-repeat center bottom 12px / 320px 76px,
linear-gradient(#4A5058, #4A5058) no-repeat left bottom 8px / 100% 4px,
url("pixel/de/ceiling-rail.png") repeat-x center top 124px / 320px 48px,
linear-gradient(180deg, #202429 0 4px, #2A2F36 4px 8px, #3A3F46 8px 12px, #4A5058 12px 16px, #3A3F46 16px 20px, #2A2F36 20px 24px, #202429 24px 28px) no-repeat left top 52px / 100% 28px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 34px / 100% 4px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 90px / 100% 4px,
#15171A; }
:root[data-machine="de"] .de-rail::before, :root[data-machine="de"] .de-rail::after { content: ""; position: absolute; bottom: 18px; width: 64px; height: 64px;
background: url("pixel/de/gear-8.png") no-repeat 0 0 / 64px 64px; image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine="de"] .de-rail::before { left: calc(50% - 220px); }
:root[data-machine="de"] .de-rail::after { right: calc(50% - 220px); }
@media (max-width: 519px) { :root[data-machine="de"] .de-rail::before, :root[data-machine="de"] .de-rail::after { content: none; } }
:root[data-machine="de"] .de-head > .rg-title { position: absolute; z-index: 2; left: 0; right: 0; top: -12px; gap: 0; pointer-events: none; }
:root[data-machine="de"] .de-head .rg-proto { font: 400 25px/25px var(--de-vt); color: #B4B8BF; letter-spacing: 0.02em; }
:root[data-machine="de"] .de-head .rg-game { margin-top: 14px; font: 400 40px/40px var(--de-ss); color: #FFC61A; letter-spacing: var(--de-tr); text-shadow: none; }
:root[data-machine="de"] .de-tag { position: absolute; z-index: 2; left: 0; right: 0; top: 84px; margin: 0; writing-mode: horizontal-tb; text-align: center;
font: 400 16px/16px var(--de-ss); letter-spacing: var(--de-tr); color: #7FA7FF; text-transform: uppercase; white-space: nowrap; }
:root[data-machine="de"] .de-head .home-title { position: absolute; z-index: 2; left: 50%; top: 174px; transform: translateX(-50%); margin: 0; padding: 10px 16px 8px;
background: #2A2F36; border: 4px solid #8A919A; border-radius: 0; box-shadow: 4px 4px 0 #0B0C0E;
font: 400 24px/24px var(--de-ss); color: #F2F1EC; letter-spacing: var(--de-tr); white-space: nowrap; text-shadow: none; text-transform: uppercase; }
:root[data-machine="de"] .de-head .home-title::before, :root[data-machine="de"] .de-head .home-title::after {
content: ""; position: absolute; top: -22px; width: 4px; height: 18px; margin: 0; background: #8A919A; }
:root[data-machine="de"] .de-head .home-title::before { left: 20px; }
:root[data-machine="de"] .de-head .home-title::after { right: 20px; }
@media (max-width: 359px) {
:root[data-machine="de"] .de-head .rg-proto { font-size: 20px; line-height: 25px; letter-spacing: 0; }
:root[data-machine="de"] .de-head .rg-game { font-size: 32px; line-height: 40px; }
}
:root[data-machine="de"] .de-flap { order: 1; display: flex; justify-content: center; gap: 0; height: 40px; margin: 0 -10px; padding: 0 8px; overflow: hidden; align-items: center;
background: linear-gradient(180deg, #4A5058 0 4px, #2A2F36 4px 36px, #4A5058 36px); border: 0; box-shadow: none; }
:root[data-machine="de"] .de-flap span { flex: 0 0 10px; min-width: 0; height: 32px; background: transparent; font: 400 16px/32px var(--de-ss); color: #F2F1EC; text-align: center; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .de-flap span::after { content: none; }
@keyframes de-flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
:root[data-machine="de"] .de-flap.is-flip span { animation: de-flip 0.18s steps(2) both; animation-delay: calc(var(--i) * 30ms); }
:root[data-machine="de"] .de-status { order: 2; display: block; margin: 4px 0 0; padding: 0; background: none; border: 0;
font: 400 25px/1.2 var(--de-vt); color: #7FA7FF; text-transform: uppercase; }
:root[data-machine="de"] .de-status i { display: none; }
:root[data-machine="de"] .de-head > .rg-start { order: 3; display: grid; gap: 2px; justify-items: start; }
:root[data-machine="de"] .rg-press { font: 400 25px/1.2 var(--de-vt); color: #7FA7FF; cursor: pointer; letter-spacing: 0; }
:root[data-machine="de"] .rg-press.is-wait { animation: none; }
:root[data-machine="de"] .rg-press::after { content: ""; display: block; width: 10px; height: 20px; margin-top: 4px; background: #7FA7FF; }
:root[data-machine="de"] .rg-press.is-wait::after { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="de"] .rg-cont { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; font: 400 25px/1.2 var(--de-vt); color: #B4B8BF; }
:root[data-machine="de"] .rg-cont-k { color: #F2F1EC; }
:root[data-machine="de"] .rg-cont-k::before { content: "◆"; margin-right: 8px; font: 400 16px/1 "RYD DE Sym", var(--de-vt); color: #FF7A1A; vertical-align: 2px; }
:root[data-machine="de"] .de-head .home-line { order: 4; margin: 4px 0 0; font: 400 25px/1.3 var(--de-vt); color: #F2F1EC; }
:root[data-machine="de"] .plaque { display: none; }
:root[data-machine="de"] .today-card { border-color: #8A919A; background: #15171A; color: #F2F1EC; box-shadow: none; }
:root[data-machine="de"] .today-label { font: 400 16px/1.2 var(--de-ss); letter-spacing: var(--de-tr); color: #FF7A1A; text-transform: uppercase; opacity: 1; }
:root[data-machine="de"] .today-text { font: 400 25px/1.25 var(--de-vt); }
:root[data-machine="de"] .home-question { position: relative; z-index: 2; align-self: flex-start; margin: 0 0 -18px; padding: 6px 12px 4px;
background: #8A919A; color: #15171A; font: 400 16px/24px var(--de-ss); letter-spacing: var(--de-tr); text-transform: uppercase; }
:root[data-machine="de"] .tiles { grid-template-columns: 1fr; gap: 0; padding: 8px 8px; }
:root[data-machine="de"] .tile { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ico tag" "ico title"; column-gap: 12px; row-gap: 2px;
align-items: center; justify-items: start; align-content: center; min-height: 76px; padding: 8px 8px 8px 34px; text-align: left; }
:root[data-machine="de"] :is(.btn, .tile)::before { font-size: 16px; }
:root[data-machine="de"] .tile::before { left: 10px; top: 50%; color: #7FA7FF; }
:root[data-machine="de"] .tile + .tile { box-shadow: inset 0 4px 0 #2A2F36; }
:root[data-machine="de"] .tile-emoji { grid-area: ico; display: block; width: 48px; height: 48px; font-size: 48px; line-height: 1; background: none; box-shadow: none; }
:root[data-machine="de"] .tile-emoji img { display: block; width: 48px; height: 48px; }
:root[data-machine="de"] .tile-tag { grid-area: tag; position: static; font: 400 16px/16px var(--de-ss); color: #FF7A1A; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .tile-title { grid-area: title; margin-left: -6px; padding: 2px 6px 0; font: 400 24px/28px var(--de-ss); letter-spacing: var(--de-tr); text-transform: uppercase; color: #F2F1EC; hyphens: manual; overflow-wrap: normal; }
:root[data-machine="de"] .tile:is(:hover, :focus-visible, .is-cur) .tile-title { background: var(--de-rev); color: #15171A; }
:root[data-machine="de"] .tile:is(:hover, :focus-visible, .is-cur) .tile-tag { color: #7FA7FF; }
:root[data-machine="de"] .btn { border-width: 4px; padding: 12px 10px 10px 34px; justify-content: center; font: 400 16px/24px var(--de-ss); text-transform: uppercase; letter-spacing: var(--de-tr); min-height: 56px; }
:root[data-machine="de"] .btn::before { left: 10px; }
:root[data-machine="de"] .btn .btn-label { display: inline-block; margin-left: -4px; padding: 0 4px; }
:root[data-machine="de"] .btn:not(.btn-arcade):is(:hover, :focus-visible, .is-cur) .btn-label { background: var(--de-rev); color: #15171A; }
:root[data-machine="de"] .btn-arcade { border-color: #FFC61A; }
:root[data-machine="de"] .btn-arcade .btn-label { font-size: 24px; line-height: 28px; }
:root[data-machine="de"] .btn-row { gap: 8px; }
@media (max-width: 479px) { :root[data-machine="de"] .home .btn-row { flex-direction: column; } }
:root[data-machine="de"] .home-foot { margin: 0; text-align: center; font: 400 25px/1.25 var(--de-vt); color: #B4B8BF; }
:root[data-machine="de"] .de-foot { display: grid; gap: 10px; justify-items: center; }
:root[data-machine="de"] .de-conveyor { display: block; width: var(--rg-w, 320px); height: var(--rg-h, 76px); max-width: none; margin: 0; }
:root[data-machine="de"] .de-count { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
:root[data-machine="de"] .de-count small { font: 400 16px/16px var(--de-ss); letter-spacing: var(--de-tr); color: #B4B8BF; }
:root[data-machine="de"] .de-count-digits { padding: 6px 8px 4px; background: #15171A; border: 4px solid #4A5058; font: 400 24px/24px var(--de-ss); color: #FF7A1A; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .led { padding: 12px 14px; text-align: left; font: 400 24px/32px var(--de-ss) !important; color: #F2F1EC; text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .led-red { color: #FF7A1A; }
html:root[data-machine="de"] .led .led-ico { width: 48px; height: 48px; margin-right: 12px; vertical-align: -12px; }
:root[data-machine="de"] :is(.draw, .draw-stage) .led { font: 400 25px/1.2 var(--de-vt) !important; letter-spacing: 0; color: #7FA7FF; }
:root[data-machine="de"] .tn-tag { background: #15171A; border: 4px solid #4A5058; border-radius: 0; box-shadow: none; color: #F2F1EC; font: 400 16px/24px var(--de-ss); letter-spacing: var(--de-tr); text-transform: uppercase; }
:root[data-machine="de"] .tn-place { color: #7FA7FF; font-weight: 400; }
:root[data-machine="de"] .tn-arrow { font-family: "RYD DE Sym", var(--de-ss); }
:root[data-machine="de"] .section-title { font: 400 16px/24px var(--de-ss); color: #15171A; background: #8A919A; padding: 4px 10px 2px; justify-self: start; width: fit-content; text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .cat-line { margin: 0; font: 400 25px/1.25 var(--de-vt); color: #B4B8BF; }
:root[data-machine="de"] .quickspin .btn { min-height: 64px; }
:root[data-machine="de"] .btn-method { display: grid; grid-template-columns: 1fr; align-content: start; justify-items: start; row-gap: 4px; min-height: 120px; padding: 12px 6px 12px 26px; text-align: left; }
:root[data-machine="de"] .btn-method::before { left: 6px; top: 52px; }
:root[data-machine="de"] .btn-method .btn-tag { padding: 2px 6px 0; background: #FF7A1A; color: #15171A; font: 400 16px/20px var(--de-ss); text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .btn-method .btn-label { font: 400 16px/24px var(--de-ss); white-space: nowrap; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .btn-method .btn-flavor { font: 400 25px/1.1 var(--de-vt); color: #B4B8BF; text-transform: none; }
:root[data-machine="de"] .btn-method .btn-sub { font: 400 16px/20px var(--de-ss); color: #7FA7FF; text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .btn-method.is-rec { border-color: #F2F1EC; box-shadow: inset 0 0 0 4px #15171A, inset 0 0 0 8px #F2F1EC; }
:root[data-machine="de"] .btn-grid .btn { font-size: 16px; }
@media (min-width: 640px) { :root[data-machine="de"] .btn-method .btn-label { font-size: 24px; line-height: 28px; } }
:root[data-machine="de"] .chip { border-width: 4px; border-color: #4A5058; font: 400 25px/1.1 var(--de-vt); padding: 6px 12px; }
:root[data-machine="de"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #F2F1EC; color: #15171A; border-color: #F2F1EC; }
:root[data-machine="de"] .chip.is-struck { color: #B4B8BF; border-color: #2A2F36; }
:root[data-machine="de"] .chip:is(:hover, :focus-visible) { border-color: #7FA7FF; }
:root[data-machine="de"] .panel h2 { font: 400 16px/24px var(--de-ss) !important; color: #15171A !important; background: #8A919A; padding: 4px 10px 2px; text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .linkish { color: #7FA7FF; font: 400 25px/1.2 var(--de-vt); }
:root[data-machine="de"] :is(.note, .small, .muted, .warn) { font-family: var(--de-vt); font-size: 25px; line-height: 1.25; color: #B4B8BF; }
html:root[data-machine="de"] .picked-note { font: 400 25px/1.25 var(--de-vt); color: #B4B8BF; letter-spacing: 0; }
:root[data-machine="de"] .die { background: #C5CBD2; border-radius: 0; box-shadow: 8px 8px 0 #0B0C0E, inset 0 0 0 4px #8A919A; }
:root[data-machine="de"] .pip { border-radius: 0; background: #15171A; }
:root[data-machine="de"] .pip.one { border-radius: 0; background: #FF7A1A; }
:root[data-machine="de"] .dice-table li { border-radius: 0; font: 400 25px/1.25 var(--de-vt); }
:root[data-machine="de"] .dice-table li.is-landed { background: #7FA7FF; color: #15171A; box-shadow: none; }
:root[data-machine="de"] .dice-table li.is-landed::after { content: "◀"; margin-left: auto; font-family: "RYD DE Sym", var(--de-vt); color: #15171A; }
:root[data-machine="de"] .card-face { border-radius: 0; box-shadow: 8px 8px 0 #0B0C0E; }
:root[data-machine="de"] .card-back { background: #2A2F36; }
:root[data-machine="de"] .card-back::before { inset: 16px; border-radius: 0; opacity: 1; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/de/perforated-steel-tile.png") repeat 0 0 / 32px 32px; }
:root[data-machine="de"] .card-back::after { inset: 8px; border: 4px solid #8A919A; border-radius: 0; }
:root[data-machine="de"] .card-emblem { background: #15171A; border-radius: 0; box-shadow: 0 0 0 4px #8A919A; }
:root[data-machine="de"] .card-emblem b { font: 400 48px/1 var(--de-ss); color: #F2F1EC; }
:root[data-machine="de"] .card-emblem i { font: 400 16px/1 var(--de-ss); color: #7FA7FF; font-style: normal; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .card-front { background: #15171A; color: #F2F1EC; align-items: flex-start; text-align: left; }
:root[data-machine="de"] .card-front::after { inset: 8px; border: 4px solid #8A919A; border-radius: 0; box-shadow: none; }
:root[data-machine="de"] .card-kicker { font: 400 16px/1 var(--de-ss); color: #B4B8BF; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .card-text { font: 400 37.5px/1.1 var(--de-vt); color: #F2F1EC; }
:root[data-machine="de"] :is(.card-more-btn, .deck-count, .card-more small) { font-family: var(--de-vt); font-weight: 400; }
:root[data-machine="de"] .deck-count { font: 400 25px/1.2 var(--de-vt); color: #B4B8BF; letter-spacing: 0; }
:root[data-machine="de"] .deck-hint { left: 16px; right: 16px; bottom: 24px; padding: 4px 6px; background: #15171A; font: 400 25px/1.1 var(--de-vt); color: #F2F1EC; letter-spacing: 0; }
:root[data-machine="de"] .card-more-btn { border: 4px solid #4A5058; border-radius: 0; color: #F2F1EC; font-size: 25px; }
:root[data-machine="de"] .card-more { border-radius: 0; background: #15171A; color: #F2F1EC; font: 400 25px/1.25 var(--de-vt); }
:root[data-machine="de"] .amida-rail { stroke: #4F86FF; stroke-width: 4; stroke-linecap: square; }
:root[data-machine="de"] .amida-path { stroke: #FFC61A; stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="de"] .amida-start { border-radius: 0; background: #15171A; color: #F2F1EC; border: 4px solid #8A919A; font: 400 16px/1 var(--de-ss); letter-spacing: var(--de-tr); }
:root[data-machine="de"] .amida-start[aria-pressed="true"] { background: #7FA7FF; color: #15171A; border-color: #7FA7FF; }
:root[data-machine="de"] .amida-goal { border-radius: 0; background: #15171A; border: 4px solid #8A919A; color: #F2F1EC; font: 400 25px/1.1 var(--de-vt); }
:root[data-machine="de"] .amida-goal.is-open { background: #FFC61A; color: #15171A; border-color: #FFC61A; }
:root[data-machine="de"] .overlay { background: rgba(21, 23, 26, 0.92); }
:root[data-machine="de"] .de-result { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k k" "w t" "s s" "m m" "p p" "l l" "a a" "d d";
row-gap: 0; column-gap: 14px; align-items: start; justify-items: stretch; margin-bottom: 0; padding: 0 16px 14px; border: 4px solid #8A919A; box-shadow: 8px 8px 0 #0B0C0E; }
:root[data-machine="de"] .de-result::before, :root[data-machine="de"] .de-result::after { content: none; }
:root[data-machine="de"] .de-dim { display: none; }
:root[data-machine="de"] .de-kicker { grid-area: k; display: block; margin: 0 -16px 14px; padding: 6px 16px 4px; background: #8A919A; color: #15171A; font: 400 16px/24px var(--de-ss); letter-spacing: var(--de-tr); text-transform: uppercase; }
:root[data-machine="de"] .de-kicker::before { content: none; }
:root[data-machine="de"] .de-window { grid-area: w; display: grid; place-items: center; width: 64px; height: 64px; background: #15171A; box-shadow: none; border: 4px solid #4A5058; font-size: 48px; }
:root[data-machine="de"] .de-window img { display: block; width: 48px; height: 48px; }
:root[data-machine="de"] .de-result .result-text { grid-area: t; align-self: center; min-height: 64px; margin: 0; font: 400 37.5px/1.1 var(--de-vt); color: #F2F1EC; text-align: left; animation: none; hyphens: manual; }
:root[data-machine="de"] .de-result .result-text.topic { font-size: 25px; line-height: 1.25; }
:root[data-machine="de"] .de-result .rg-next { font-size: 25px; vertical-align: 0.1em; }
:root[data-machine="de"] .de-result .result-sub { grid-area: s; margin-top: 10px; font: 400 25px/1.25 var(--de-vt); color: #B4B8BF; text-align: left; }
:root[data-machine="de"] .de-result > div:not([class]) { grid-area: m; justify-self: start; }
:root[data-machine="de"] .de-punched { grid-area: p; margin: 12px 0 0; font: 400 16px/16px var(--de-ss); letter-spacing: var(--de-tr); color: #8A919A; text-shadow: none; }
:root[data-machine="de"] .de-result .rg-log { grid-area: l; justify-self: end; margin: 8px 0 0; font: 400 25px/1.2 var(--de-vt); color: #B4B8BF; }
:root[data-machine="de"] .de-result .result-actions { grid-area: a; margin-top: 12px; padding: 10px 0 0; border: 0; border-top: 4px solid #4A5058; background: transparent; }
:root[data-machine="de"] .de-result .defied { grid-area: d; margin-top: 8px; }
:root[data-machine="de"] .result-actions .btn-row { flex-direction: column; gap: 0; }
:root[data-machine="de"] .result-actions .btn { min-height: 48px; padding: 12px 10px 8px 34px; font: 400 16px/24px var(--de-ss); }
:root[data-machine="de"] .result-actions > .btn-arcade { background: #FFC61A; color: #15171A; }
:root[data-machine="de"] .result-actions > .btn-arcade .btn-label { font-size: 16px; line-height: 24px; }
:root[data-machine="de"] .result-actions > .btn-arcade::before { color: #15171A; }
:root[data-machine="de"] .result-more-btn { font: 400 25px/1 var(--de-vt); color: #7FA7FF; }
:root[data-machine="de"] .result-more { font: 400 25px/1.25 var(--de-vt); color: #7FA7FF; }
:root[data-machine="de"] .defied { font: 400 25px/1.25 var(--de-vt); color: #B4B8BF; font-style: normal; }
:root[data-machine="de"] .de-stamp { position: fixed; left: 0; right: 0; top: 50%; height: 80px; margin-top: -40px; z-index: 25; display: grid; place-items: center; pointer-events: none;
background: linear-gradient(180deg, #4A5058 0 8px, #8A919A 8px 16px, #C5CBD2 16px 24px, #F2F1EC 24px 56px, #C5CBD2 56px 64px, #8A919A 64px 72px, #4A5058 72px);
box-shadow: none; transform: translateY(-120vh); animation: de-stamp 1.2s steps(6) both; }
:root[data-machine="de"] .de-stamp span { font: 400 32px/32px var(--de-ss); letter-spacing: 0.08em; color: #15171A; }
@keyframes de-stamp { 0% { transform: translateY(-120vh); } 12%, 70% { transform: translateY(0); } 100% { transform: translateY(-120vh); } }
:root[data-machine="de"] .result-below { background: #15171A; color: #F2F1EC; }
html:root[data-machine="de"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="de"] .result-below .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="de"] .settings h2 { color: #15171A; }
:root[data-machine="de"] .settings h3 { margin: 14px 0 6px !important; font: 400 16px/24px var(--de-ss) !important; color: #7FA7FF; text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .settings p { font: 400 25px/1.25 var(--de-vt); }
:root[data-machine="de"] main .notice-list { gap: 8px; padding-left: 1.6em; font: 400 25px/1.25 var(--de-vt); color: #F2F1EC; }
:root[data-machine="de"] main .notice-list li::marker { font-family: var(--de-ss); font-size: 16px; color: #FF7A1A; }
:root[data-machine="de"] :is(.row-text, .row-meta, .field label, .toggle, .confirm, .edit-item) { font-family: var(--de-vt); font-weight: 400; font-size: 25px; }
:root[data-machine="de"] .toggle input:checked + .switch { background: #7FA7FF; }
:root[data-machine="de"] .seg button { font: 400 16px/1.2 var(--de-ss); text-transform: uppercase; letter-spacing: var(--de-tr); }
:root[data-machine="de"] .seg button[aria-selected="true"] { background: #7FA7FF; color: #15171A; }
:root[data-machine="de"] .store-link { border-radius: 0; }
:root[data-machine="de"] .toast { font: 400 25px/1.25 var(--de-vt); border-color: #8A919A; }
:root[data-machine="de"] .icon-btn { font: 400 25px/1 var(--de-vt); border-color: #8A919A; }
:root[data-machine="de"] .icon-btn:disabled { color: #B4B8BF; border-color: #4A5058; }
:root[data-machine="de"] :is(.category > div:has(> .chips-scroll), .category > div:has(> .btn-grid), .home > div:has(> .chips-scroll)) {
position: relative; margin-top: 34px; padding: 12px; gap: 12px !important; border: 4px solid #8A919A; background: #15171A; }
:root[data-machine="de"] :is(.category, .home) > div > .section-title { position: absolute; z-index: 2; left: -4px; top: -34px; max-width: calc(100% + 8px); margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-machine="de"] :is(.category, .draw, .settings, .editor) .panel { position: relative; margin-top: 34px; }
:root[data-machine="de"] :is(.category, .draw, .settings, .editor) .panel h2 { position: absolute; z-index: 2; left: -4px; top: -34px; max-width: calc(100% + 8px); margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-machine="de"] .category > .quickspin { margin-top: 4px; }
:root[data-machine="de"] .home > .btn-row { gap: 0; padding: 6px; border: 4px solid #8A919A; background: #15171A; }
:root[data-machine="de"] .home > .btn-row > .btn { flex: 1 1 auto; min-height: 52px; border: 0; background: transparent; white-space: nowrap; }
:root[data-machine="de"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover)::before,
:root[data-machine="de"] .result-actions:has(.btn:hover) .btn.is-cur:not(:hover)::before { visibility: hidden; }
:root[data-machine="de"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover) .tile-title { background: transparent; color: #F2F1EC; }
:root[data-machine="de"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover) .tile-tag { color: #FF7A1A; }
:root[data-machine="de"] .result-actions:has(.btn:hover) .btn.is-cur:not(:hover):not(.btn-arcade) .btn-label { background: transparent; color: #F2F1EC; }
html:root[data-machine="de"] .tn-lead { white-space: nowrap; }
:root[data-theme="de"] { --wheel-rim-bg: transparent; }
:root[data-machine="de"] .wheel-wrap { isolation: isolate; width: min(calc(100% - 32px), 392px, 56vh); margin: 16px auto; }
:root[data-machine="de"] .wheel-wrap::before { content: ""; position: absolute; z-index: -1; inset: -16px; pointer-events: none; border: 4px solid #8A919A; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/de/perforated-steel-tile.png") repeat 0 0 / 32px 32px, #2A2F36; }
:root[data-machine="de"] .draw-stage { gap: 16px; }
:root[data-machine="de"] :is(.draw, .draw-stage) .led { align-self: stretch; width: 100%; max-width: none; text-align: left; padding: 12px 16px; }
:root[data-machine="de"] .btn:disabled { opacity: 1; --face: #15171A; --edge: #4A5058; --fg: #B4B8BF; cursor: default; }
:root[data-machine="de"] .btn:disabled::before { content: none; }
:root[data-machine="de"] .btn-arcade:disabled { border-color: #4A5058; }
:root[data-machine="de"] .draw-stage .btn-row { flex-wrap: wrap; }
:root[data-machine="de"] .draw-stage .btn-row > .btn { flex: 1 1 auto; }
:root[data-machine="de"] .deck .card-face { box-shadow: none; }
:root[data-machine="de"] .deck .card-face:nth-child(1) { transform: translate(8px, 8px); background: #0B0C0E; }
:root[data-machine="de"] .deck .card-face:nth-child(2) { transform: translate(4px, 4px); background: #4A5058; }
:root[data-machine="de"] .deck .card-face:nth-child(3) { transform: none; }
:root[data-machine="de"] .draw-stage div:has(> .amida-starts) { padding: 14px; gap: 8px !important; border: 4px solid #8A919A; background: #15171A; }
:root[data-machine="de"] .amida-starts { counter-reset: rg-am; }
:root[data-machine="de"] .amida-start { counter-increment: rg-am; font-size: 0 !important; }
:root[data-machine="de"] .amida-start::before { content: counter(rg-am); font: 400 24px/1 var(--de-ss); letter-spacing: 0; }
:root[data-machine="de"] .amida-start:disabled:not([aria-pressed="true"]) { opacity: 1; background: #15171A; border-color: #4A5058; color: #B4B8BF; }
:root[data-machine="de"] .amida-goal:not(.is-open) { font-size: 0 !important; }
:root[data-machine="de"] .amida-goal:not(.is-open)::before { content: "?"; font: 400 24px/1 var(--de-ss); color: #7FA7FF; }
:root[data-machine="de"] .toggle { min-height: 52px; }
:root[data-machine="de"] .toggle .switch { width: 72px; height: 36px; border: 4px solid #8A919A; border-radius: 0; background: #15171A; transition: none; }
:root[data-machine="de"] .toggle .switch::after { content: "OFF"; inset: 0; top: 0; left: 0; width: auto; height: auto; display: grid; place-items: center; border-radius: 0;
background: transparent; color: #B4B8BF; font: 400 16px/1 var(--de-ss); letter-spacing: var(--de-tr); transform: none; transition: none; }
:root[data-machine="de"] .toggle input:checked + .switch { background: #7FA7FF; border-color: #7FA7FF; }
:root[data-machine="de"] .toggle input:checked + .switch::after { content: "ON"; color: #15171A; background: transparent; transform: none; }
:root[data-machine="de"] .toggle input:focus-visible + .switch { outline: 3px solid #F2F1EC; outline-offset: 3px; }
html:root[data-machine="de"] .settings .pill.fx-switch.fx-switch-wide { height: 52px; min-height: 52px; padding: 0 12px 0 14px; gap: 10px; color: #F2F1EC; font: 400 16px/1 var(--de-ss); letter-spacing: var(--de-tr); text-transform: uppercase; }
html:root[data-machine="de"] .settings .pill.fx-switch.fx-switch-wide::before { background: #15171A; border: 4px solid #8A919A; -webkit-mask: none; mask: none; }
html:root[data-machine="de"] .settings .pill.fx-switch.fx-switch-wide:hover::before { background: #2A2F36; }
html:root[data-machine="de"] .settings .fx-switch-wide .fx-switch-state { min-width: 56px; padding: 6px; border: 4px solid #8A919A; background: #15171A; color: #B4B8BF; font: 400 16px/1 var(--de-ss); letter-spacing: var(--de-tr); }
html:root[data-machine="de"] .settings .fx-switch-wide[aria-pressed="true"] .fx-switch-state { background: #7FA7FF; border-color: #7FA7FF; color: #15171A; }
html:root[data-machine="de"] .settings .store-link { min-height: 48px; font-size: 16px; }
:root[data-machine="de"] .seg button { min-height: 48px; }
:root[data-machine="de"] .saved > p.muted { margin: 0; padding: 14px 16px; border: 4px solid #8A919A; background: #15171A; color: #F2F1EC; }
:root[data-machine="de"] .field label { font: 400 16px/24px var(--de-ss); letter-spacing: var(--de-tr); color: #7FA7FF; text-transform: uppercase; }
:root[data-machine="de"] .input { min-height: 48px; border: 4px solid #8A919A; border-radius: 0; background: #15171A; color: #F2F1EC; font: 400 25px/1.2 var(--de-vt); }
:root[data-machine="de"] .input::placeholder { color: #B4B8BF; opacity: 1; }
:root[data-machine="de"] .icon-btn { min-height: 48px; border-width: 4px; }
:root[data-machine="de"][data-motion="reduce"] .de-flap span, :root[data-machine="de"][data-motion="reduce"] .rg-press::after { animation: none; }
:root[data-machine="de"][data-motion="reduce"] .de-stamp { display: none; }
@media (prefers-reduced-motion: reduce) {
:root[data-machine="de"]:not([data-motion="full"]) .de-flap span, :root[data-machine="de"]:not([data-motion="full"]) .rg-press::after { animation: none; }
:root[data-machine="de"]:not([data-motion="full"]) .de-stamp { display: none; }
}
:root[data-machine="de"] .de-head > .rg-start { grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
:root[data-machine="de"] .de-head > .rg-start > .rg-press { display: flex; align-items: center; gap: 6px; }
:root[data-machine="de"] .rg-press::after { display: inline-block; margin-top: 0; }
:root[data-machine="de"] .de-head > .rg-start > .rg-cont { grid-column: 1 / -1; }
@media (max-width: 1099px) {
:root[data-machine="de"] .de-rail { height: 316px;
background:
url("pixel/de/conveyor.png") no-repeat center bottom 6px / 320px 76px,
linear-gradient(#4A5058, #4A5058) no-repeat left bottom 2px / 100% 4px,
url("pixel/de/ceiling-rail.png") repeat-x center top 118px / 320px 48px,
linear-gradient(180deg, #202429 0 4px, #2A2F36 4px 8px, #3A3F46 8px 12px, #4A5058 12px 16px, #3A3F46 16px 20px, #2A2F36 20px 24px, #202429 24px 28px) no-repeat left top 52px / 100% 28px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 34px / 100% 4px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 90px / 100% 4px,
#15171A; }
:root[data-machine="de"] .de-rail::before, :root[data-machine="de"] .de-rail::after { bottom: 12px; }
:root[data-machine="de"] .de-head .home-title { top: 168px; }
:root[data-machine="de"] .tile { min-height: 68px; padding-block: 6px; }
}
@media (min-width: 1100px) {
:root[data-machine="de"] .de-rail { height: 246px;
background:
linear-gradient(#4A5058, #4A5058) no-repeat left bottom 4px / 100% 4px,
url("pixel/de/ceiling-rail.png") repeat-x center top 118px / 320px 48px,
linear-gradient(180deg, #202429 0 4px, #2A2F36 4px 8px, #3A3F46 8px 12px, #4A5058 12px 16px, #3A3F46 16px 20px, #2A2F36 20px 24px, #202429 24px 28px) no-repeat left top 52px / 100% 28px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 34px / 100% 4px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 90px / 100% 4px,
#15171A; }
:root[data-machine="de"] .de-rail::before, :root[data-machine="de"] .de-rail::after { content: none; }
:root[data-machine="de"] .de-head .home-title { top: 168px; }
:root[data-machine="de"] .tile { min-height: 60px; padding-block: 4px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="de"] .de-head > :is(.de-flap, .de-status) { display: none; }
:root[data-machine="de"] .de-head .home-line { display: none; }
:root[data-machine="de"] .tile { min-height: 56px; padding-block: 2px; }
}
:root[data-machine="de"] .card-area + div > .btn-row { flex-direction: column; gap: 10px; }
:root[data-machine="de"] .card-area + div > .btn-row > .btn { flex: 0 0 auto; width: 100%; white-space: normal; }
@media (min-width: 1100px) and (pointer: fine) {
:root[data-machine="de"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
:root[data-machine="de"] .de-head .rg-count { position: absolute; z-index: 2; right: 14px; top: 96px; margin: 0; font: 400 16px/16px var(--de-ss); letter-spacing: var(--de-tr); color: #FFC61A; text-transform: uppercase; white-space: nowrap; }
:root[data-machine="de"] .de-head:has(.rg-count) .de-tag { left: 14px; right: auto; text-align: left; }
@media (max-width: 1099px) {
:root[data-machine="de"] .tile { min-height: 64px; padding-block: 4px; }
}
:root[data-machine="de"] .de-head .rg-press { position: relative; padding-inline: 0 12px; }
:root[data-machine="de"] .de-head .rg-press::before { position: absolute; right: 100%; top: 50%; margin: -0.5em 6px 0 0; }
:root[data-machine="de"] .de-head > .rg-start > .rg-press { padding-inline: 12px 16px; background: #4F86FF; color: #0B0C0E; box-shadow: 4px 4px 0 #0B0C0E; }
:root[data-machine="de"] .rg-press::after { background: #0B0C0E; }
@media (max-width: 479px) {
:root[data-machine="de"] .de-rail { height: 246px;
background:
linear-gradient(#4A5058, #4A5058) no-repeat left bottom 4px / 100% 4px,
url("pixel/de/ceiling-rail.png") repeat-x center top 118px / 320px 48px,
linear-gradient(180deg, #202429 0 4px, #2A2F36 4px 8px, #3A3F46 8px 12px, #4A5058 12px 16px, #3A3F46 16px 20px, #2A2F36 20px 24px, #202429 24px 28px) no-repeat left top 52px / 100% 28px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 34px / 100% 4px,
linear-gradient(#4F86FF, #4F86FF) no-repeat left top 90px / 100% 4px,
#15171A; }
:root[data-machine="de"] .de-head > .de-status { display: none; }
:root[data-machine="de"] .tile { min-height: 60px; padding-block: 4px; }
}
@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="de"] body::before, :root[data-theme="de"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
url("pixel/de/gear-8.png"),
url("pixel/de/conveyor.png"),
url("pixel/de/conveyor.png"),
url("pixel/de/conveyor.png"),
url("pixel/de/ceiling-rail.png"),
linear-gradient(180deg, #4A5058, #4A5058),
linear-gradient(180deg, #4A5058, #4A5058);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat;
background-size:
64px 64px,
320px 76px,
320px 76px,
320px 76px,
320px 48px,
4px 26vh,
4px 26vh;
background-position:
left 11% top calc(62vh - 32px),
center top 30vh,
right 6% top 58vh,
center bottom 5vh,
left top 4vh,
left 22% top calc(4vh + 48px),
right 22% top calc(4vh + 48px);
}
:root[data-theme="de"]::before {
background-position:
right 11% top calc(62vh - 32px),
center top 30vh,
left 6% top 58vh,
center bottom 5vh,
left top 4vh,
left 22% top calc(4vh + 48px),
right 22% top calc(4vh + 48px);
}
:root[data-theme="de"] body::after, :root[data-theme="de"]::after {
content: ""; bottom: auto; width: 160px; height: 160px; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/de/gear-12.png") no-repeat center / 160px 160px;
}
html:root[data-theme="de"] body::after, html:root[data-theme="de"]::after { top: 40vh; }
:root[data-theme="de"] body::after { left: calc(var(--wide-w) * 0.08); }
:root[data-theme="de"]::after { right: calc(var(--wide-w) * 0.08); background-image: url("pixel/de/gear-10.png"); }
}