@font-face {
font-family: "UK Dot 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="uk"] {
--bg-mode: css;
--uk-bd: 12px;
--bg-top: #07030D; --bg-bottom: #07030D; --stripe-opacity: 0;
--ink: #07030D; --night: #07030D; --cream: #FFF1D6; --paper: #FFF1D6;
--cabinet: #B0102E; --cabinet-dark: #7A0724; --mustard: #FFC400; --mustard-dark: #7A0724;
--teal: #07030D; --teal-dark: #07030D; --led: #00F0FF; --led-red: #FF2E88;
--lamp-0: #FFC400; --lamp-1: #FF2E88; --lamp-2: #00F0FF; --lamp-3: #FFF1D6; --lamp-off: #2B0B32;
--dark-face: #07030D; --dark-edge: #FFF1D6; --tile-base: #07030D; --tile-stripe: #B0102E; --tile-text: #FFF1D6; --amida-lamp: #FFC400;
--ink-dim: #FF2E88; --line: #FFF1D6; --focus: #00F0FF; --board: #07030D;
--font-uk: "Silkscreen", "UK Dot Sym", ui-monospace, monospace;
--font-uk-body: "VT323", "UK Dot Sym", ui-monospace, monospace;
--font-title: var(--font-uk); --font-rounded: var(--font-uk-body); --font-body: var(--font-uk-body); --font-led: var(--font-uk-body);
--wheel-count: 6; --wheel-font: "VT323", monospace; --wheel-weight: 400;
--wheel-0: #B0102E; --wheel-0-text: #FFF1D6;
--wheel-1: #FFF1D6; --wheel-1-text: #07030D;
--wheel-2: #2B0B32; --wheel-2-text: #FFF1D6;
--wheel-3: #FFC400; --wheel-3-text: #07030D;
--wheel-4: #00F0FF; --wheel-4-text: #07030D;
--wheel-5: #FF2E88; --wheel-5-text: #07030D;
--wheel-line: #07030D; --wheel-rim: #FFF1D6; --wheel-rim-bg: transparent; --wheel-lamps: 0; --wheel-pointer-blur: 0;
--wheel-win: #FFC400; --wheel-win-text: #07030D; --wheel-win-edge: #FFF1D6; --wheel-win-mark: "» "; --wheel-dim: rgba(7, 3, 13, 0.62);
--wheel-hub-bg: #07030D; --wheel-hub-ring: #FFF1D6; --wheel-hub-ink: #FFC400; --wheel-hub-font: "Silkscreen", monospace;
--wheel-pointer: #FFC400; --wheel-pointer-edge: #07030D;
}
@media (min-width: 640px) { :root[data-theme="uk"] { --uk-bd: 24px; } }
:root[data-machine="uk"] {
--rg-font: var(--font-uk-body);
--rg-font-title: var(--font-uk);
--rg-fs: 25px; --rg-fs-m: 25px; --rg-fs-l: 32px; --rg-lh: 1.2; --rg-track: 0;
--rg-dot: 4px;
--rg-screen: #07030D; --rg-win: #07030D; --rg-ink: #FFF1D6; --rg-dim: #FF2E88;
--rg-line: #FFF1D6; --rg-line2: #07030D;
--rg-hi: #FFC400; --rg-cur: #07030D; --rg-btn: #FFC400; --rg-btn-ink: #07030D; --rg-shade: #B0102E;
--rg-win-border: 4px solid var(--rg-line); --rg-win-shadow: none; --rg-win-pad: 14px 16px;
}
:root[data-machine="uk"] body { background: #07030D !important; }
:root[data-machine="uk"] .stage { background: #07030D; border-radius: 0; box-shadow: inset 0 0 0 var(--uk-bd) #B0102E; }
:root[data-machine="uk"] main.app { padding: 20px calc(var(--uk-bd) + 14px) calc(var(--uk-bd) + 24px); }
@media (min-width: 640px) {
:root[data-machine="uk"] body { background: repeating-linear-gradient(90deg, #2B0B32 0 32px, #07030D 32px 64px) #07030D !important; }
:root[data-machine="uk"] .stage { background: #07030D; border-radius: 0; box-shadow: inset 0 0 0 var(--uk-bd) #B0102E, 0 0 0 4px #07030D; }
:root[data-machine="uk"] main.app { padding: 28px calc(var(--uk-bd) + 18px) calc(var(--uk-bd) + 28px); }
}
:root[data-machine="uk"] .stage::after {
content: ""; display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; padding: var(--uk-bd);
width: auto; height: auto; filter: none; border-radius: 0;
background: repeating-linear-gradient(180deg, #B0102E 0 24px, #00F0FF 24px 48px);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0; animation: uk-load 1.5s steps(1, end) 0.15s 1 both;
}
:root[data-machine="uk"] .stage::before { content: none; display: none; }
@keyframes uk-load {
0% { opacity: 1; background: repeating-linear-gradient(180deg, #B0102E 0 24px, #00F0FF 24px 48px); }
45% { opacity: 1; background: repeating-linear-gradient(180deg, #FFC400 0 4px, #2B0B32 4px 12px, #FFC400 12px 14px, #2B0B32 14px 18px, #FFC400 18px 24px, #2B0B32 24px 34px, #FFC400 34px 36px, #2B0B32 36px 44px); }
100% { opacity: 0; }
}
:root[data-machine="uk"][data-motion="reduce"] .stage::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="uk"]:not([data-motion="full"]) .stage::after { animation: none; opacity: 0; } }
:root[data-machine="uk"] :focus-visible { outline: 3px solid #00F0FF; outline-offset: 3px; }
:root[data-machine="uk"] .rg-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
:root[data-machine="uk"] .rg-head > .rg-title { order: 0; }
:root[data-machine="uk"] .rg-head > .lamps { order: 1; }
:root[data-machine="uk"] .rg-head > .home-title { order: 2; }
:root[data-machine="uk"] .rg-head > .rg-start { order: 3; }
:root[data-machine="uk"] .rg-head > .marquee { order: 4; }
:root[data-machine="uk"] .rg-title { position: relative; gap: 8px; padding: 0 0 20px; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/uk/wide-bulbs.png") no-repeat center top 41px / 400px 72px, linear-gradient(#2B0B32, #2B0B32) no-repeat left 0 top 37px / 100% calc(100% - 37px); }
:root[data-machine="uk"] .rg-proto { order: -1; margin: 0 0 6px; font: 400 25px/1 var(--font-uk-body); color: #FF2E88; letter-spacing: 0; }
:root[data-machine="uk"] .rg-game { position: relative; z-index: 1; margin: 0; padding: 64px 8px 6px; font: 400 32px/1.25 var(--font-uk); color: #FFC400; text-shadow: none; letter-spacing: 0; }
:root[data-machine="uk"] .rg-sub { position: relative; z-index: 1; margin: 0; padding: 0 56px; font: 400 16px/1.5 var(--font-uk); color: #00F0FF; letter-spacing: 0; }
:root[data-machine="uk"] .rg-title::before, :root[data-machine="uk"] .rg-title::after { content: ""; position: absolute; bottom: 4px; width: 48px; height: 48px; pointer-events: none;
image-rendering: crisp-edges; image-rendering: pixelated; background: url("pixel/uk/fair-scroll-corner.png") no-repeat center / 48px 48px; }
:root[data-machine="uk"] .rg-title::before { left: 4px; transform: scaleY(-1); }
:root[data-machine="uk"] .rg-title::after { right: 4px; transform: scale(-1, -1); }
:root[data-machine="uk"] .lamps { --lamp-size: 8px; gap: 12px; justify-content: center; margin-top: -4px; }
:root[data-machine="uk"] .lamp { width: 8px; height: 8px; border-radius: 0; box-shadow: none; animation-name: uk-lamp; }
@keyframes uk-lamp { 0% { background: var(--c); } 33.333%, 100% { background: var(--lamp-off); } }
:root[data-machine="uk"][data-motion="reduce"] .lamp { animation: none; background: var(--c); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="uk"]:not([data-motion="full"]) .lamp { animation: none; background: var(--c); box-shadow: none; } }
:root[data-machine="uk"] .rg-head > .home-title { margin: 0; padding: 10px 8px; background: #B0102E; color: #FFF1D6; font: 400 24px/1.25 var(--font-uk); letter-spacing: 0; text-shadow: none; white-space: normal; box-shadow: 4px 4px 0 #7A0724; }
:root[data-machine="uk"] .rg-start { display: grid; gap: 6px; justify-items: center; }
:root[data-machine="uk"] .rg-press { font: 400 16px/1.5 var(--font-uk); color: #FFF1D6; cursor: pointer; }
:root[data-machine="uk"] .rg-cont { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font: 400 25px/1.2 var(--font-uk-body); color: #FF2E88; }
:root[data-machine="uk"] .rg-cont-k { color: #00F0FF; }
:root[data-machine="uk"] .rg-cont-k::before { content: "◆"; margin-right: 8px; font-family: "UK Dot Sym", var(--font-uk-body); font-size: 16px; vertical-align: 3px; }
:root[data-machine="uk"] .marquee { height: 48px; border: 0; border-radius: 0; border-block: 4px solid #FF2E88; background: #07030D; background-image: none; }
:root[data-machine="uk"] .marquee-text { font: 400 25px/40px var(--font-uk-body); color: #00F0FF; text-shadow: none; }
:root[data-machine="uk"][data-motion="reduce"] .marquee { height: auto; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="uk"]:not([data-motion="full"]) .marquee { height: auto; } }
:root[data-machine="uk"] .home-question { margin: 6px 0 -18px; padding: 8px 12px; background: #00F0FF; color: #07030D; font: 400 16px/1.5 var(--font-uk); text-align: left; letter-spacing: 0; }
:root[data-machine="uk"] .tiles { grid-template-columns: 1fr; gap: 0; padding: 8px; border-color: #00F0FF; counter-reset: uk-ring; }
:root[data-machine="uk"] .tile {
counter-increment: uk-ring;
display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px;
align-items: center; justify-items: start; text-align: left; min-height: 84px; margin: 0; padding: 8px 12px 8px 40px;
}
:root[data-machine="uk"] .tile::before { left: 14px; color: #07030D; }
:root[data-machine="uk"] .tile::after {
content: "RING " counter(uk-ring); content: "RING " counter(uk-ring) / "";
position: static; inset: auto; grid-column: 2; grid-row: 1; align-self: end; border: 0; border-radius: 0; background: none;
font: 400 16px/1 var(--font-uk); color: #FF2E88;
}
:root[data-machine="uk"] .tile-emoji { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 64px; height: 64px; background: #FFF1D6; font-size: 48px; }
:root[data-machine="uk"] .tile-emoji img { width: 48px; height: 48px; }
:root[data-machine="uk"] .tile-title { grid-column: 2; grid-row: 2; align-self: start; font: 400 24px/1.25 var(--font-uk); color: #FFF1D6; letter-spacing: 0; }
:root[data-machine="uk"] .tile-tag { display: none; }
:root[data-machine="uk"] .tile:is(:hover, :focus-visible, .is-cur) { background: #00F0FF; }
:root[data-machine="uk"] .tile:is(:hover, :focus-visible, .is-cur) .tile-title,
:root[data-machine="uk"] .tile:is(:hover, :focus-visible, .is-cur)::after { color: #07030D; }
:root[data-machine="uk"] :is(.btn, .tile, .chip, .topic-item, .today-card):focus-visible { outline: 3px dashed #07030D; outline-offset: -8px; }
:root[data-machine="uk"] .btn { min-height: 56px; padding: 10px 14px 10px 40px; justify-content: center; border-width: 4px; font: 400 16px/1.5 var(--font-uk); letter-spacing: 0; }
:root[data-machine="uk"] .btn::before { left: 14px; top: 50%; color: #07030D; }
:root[data-machine="uk"] .btn:is(:hover, :focus-visible, .is-cur) { --face: #00F0FF; --edge: #00F0FF; --fg: #07030D; }
:root[data-machine="uk"] .btn-arcade, :root[data-machine="uk"] .btn-arcade:is(:hover, :focus-visible, .is-cur) { --face: #FFC400; --edge: #FFC400; --fg: #07030D; font-size: 24px; line-height: 1.25; }
:root[data-machine="uk"] :is(.quickspin, .draw-stage) .btn-arcade { align-items: center; text-align: center; padding-inline: 40px; }
:root[data-machine="uk"] .btn:disabled { opacity: 1; --face: #07030D; --edge: #4A1C55; --fg: #FF2E88; }
:root[data-machine="uk"] .btn-row { gap: 12px; }
:root[data-machine="uk"] .btn-row .btn { padding: 10px 8px 10px 34px; }
:root[data-machine="uk"] .btn-row .btn::before { left: 10px; }
:root[data-machine="uk"] .home .btn-row .emo { display: none; }
:root[data-machine="uk"] .home-foot { margin: 0; font: 400 25px/1.2 var(--font-uk-body); color: #FF2E88; }
:root[data-machine="uk"] .today-card { border-color: #FFC400; }
:root[data-machine="uk"] .today-label { font: 400 16px/1.5 var(--font-uk); color: #FFC400; letter-spacing: 0; text-transform: none; opacity: 1; }
:root[data-machine="uk"] .today-text { font: 400 25px/1.2 var(--font-uk-body); color: #FFF1D6; }
:root[data-machine="uk"] .today-text img { width: 32px; height: 32px; vertical-align: -6px; margin-right: 8px; background: #FFF1D6; }
:root[data-machine="uk"] .led { padding: 10px 14px; border: 0; box-shadow: 4px 4px 0 #7A0724; background: #B0102E; color: #FFF1D6; font: 400 24px/1.25 var(--font-uk); text-align: left; letter-spacing: 0; }
:root[data-machine="uk"] .category > .led { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; }
html:root[data-machine="uk"] .led .led-ico { flex: none; width: 48px; height: 48px; margin: 0; padding: 4px; vertical-align: -14px; background: #FFF1D6; box-sizing: content-box; }
:root[data-machine="uk"] .draw-stage .led { padding: 8px 12px; border: 0; box-shadow: none; background: #07030D; color: #00F0FF; font: 400 25px/1.2 var(--font-uk-body); text-align: center; }
:root[data-machine="uk"] .tn-tag { background: #07030D; color: #FFF1D6; border: 4px solid #FF2E88; border-radius: 0; font: 400 25px/1.2 var(--font-uk-body); letter-spacing: 0; padding: 6px 14px 6px 10px; box-shadow: none; }
:root[data-machine="uk"] .tn-place { font: 400 25px/1.2 var(--font-uk-body); color: #FFC400; letter-spacing: 0; }
:root[data-machine="uk"] .tn-lead { display: block; color: #FF2E88; }
:root[data-machine="uk"] .section-title { font: 400 16px/1.5 var(--font-uk); color: #00F0FF; letter-spacing: 0; }
:root[data-machine="uk"] .cat-line { margin: 0; font: 400 25px/1.2 var(--font-uk-body); color: #FF2E88; }
:root[data-machine="uk"] .chip { min-height: 44px; padding: 4px 8px; border: 2px solid #FFF1D6; font: 400 25px/1.2 var(--font-uk-body); }
:root[data-machine="uk"] .chips { gap: 6px; }
:root[data-machine="uk"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #FFF1D6; color: #07030D; border-color: #FFF1D6; }
:root[data-machine="uk"] .chip:not(.chip-cand):is(:hover, :focus-visible) { background: #00F0FF; color: #07030D; border-color: #00F0FF; }
:root[data-machine="uk"] .chip.chip-cand { border-color: #4A1C55; }
:root[data-machine="uk"] .chip.chip-cand:is(:hover, :focus-visible) { border-color: #00F0FF; }
:root[data-machine="uk"] .chip.is-struck { color: #FF2E88; border-color: #4A1C55; border-style: dashed; text-decoration-color: #FF2E88; }
:root[data-machine="uk"] .btn-grid { grid-template-columns: 1fr; gap: 0; }
:root[data-machine="uk"] .btn-method { --edge: #07030D; display: grid; align-content: center; justify-content: start; justify-items: start; row-gap: 2px; min-height: 72px; padding: 8px 12px 8px 40px; text-align: left; box-shadow: none; }
:root[data-machine="uk"] .btn-method::before { left: 14px; }
:root[data-machine="uk"] .btn-method .btn-label { font: 400 16px/1.5 var(--font-uk); }
:root[data-machine="uk"] .btn-method .btn-flavor { margin: 0; font: 400 25px/1 var(--font-uk-body); color: #FF2E88; opacity: 1; }
:root[data-machine="uk"] .btn-method .btn-sub { margin: 0; font: 400 25px/1 var(--font-uk-body); color: #00F0FF; opacity: 1; }
:root[data-machine="uk"] .btn-method.is-rec { box-shadow: inset 0 0 0 4px #FFF1D6; }
:root[data-machine="uk"] .btn-method:is(:hover, :focus-visible, .is-cur) :is(.btn-flavor, .btn-sub) { color: #07030D; }
:root[data-machine="uk"] .btn-method.is-rec:is(:hover, :focus-visible, .is-cur) { box-shadow: inset 0 0 0 4px #07030D; }
:root[data-machine="uk"] .panel { border-color: #FFF1D6; padding: 12px 10px; }
:root[data-machine="uk"] .panel h2 { font: 400 16px/1.5 var(--font-uk) !important; color: #07030D !important; letter-spacing: 0; }
:root[data-machine="uk"] .panel > h2 { margin: -12px -10px 12px; padding: 6px 10px; background: #FFF1D6; }
:root[data-machine="uk"] .category .panel > div > div:first-child { margin: -12px -10px 0; padding: 0 2px 0 10px; background: #FFF1D6; }
:root[data-machine="uk"] .category .panel > div > div:first-child :is(.linkish, .small) { color: #07030D; }
:root[data-machine="uk"] .category > div:is(:has(> .chips-scroll), :has(> .btn-grid)) { padding: 0 8px 8px; gap: 8px !important; border: 4px solid #00F0FF; background: #07030D; }
:root[data-machine="uk"] .category > div:has(> .chips-scroll) { border-color: #FFF1D6; }
:root[data-machine="uk"] .category > div > .section-title { margin: 0 -8px; padding: 6px 10px; background: #00F0FF; color: #07030D; }
:root[data-machine="uk"] .category > div:has(> .chips-scroll) > .section-title { background: #FFF1D6; }
:root[data-machine="uk"] .category > div > .chips-scroll { padding: 4px 0 6px; }
:root[data-machine="uk"] .home > div:has(> .chips-scroll) { padding: 0 8px 8px; gap: 8px !important; border: 4px solid #FFF1D6; background: #07030D; }
:root[data-machine="uk"] .home > div > .section-title { margin: 0 -8px; padding: 6px 10px; background: #FFF1D6; color: #07030D; }
:root[data-machine="uk"] .linkish { font: 400 25px/1.2 var(--font-uk-body); color: #00F0FF; text-decoration-thickness: 2px; }
:root[data-machine="uk"] :is(.note, .picked-note, .small, .muted, .warn) { font-family: var(--font-uk-body); color: #FF2E88; }
html:root[data-machine="uk"] :is(.note, .picked-note) { font-size: 25px; line-height: 1.2; letter-spacing: 0; }
:root[data-machine="uk"] .small { font-size: 25px; line-height: 1.2; }
:root[data-machine="uk"] .topic-item { font-size: 25px; line-height: 1.2; }
:root[data-machine="uk"] .die { background: #FFF1D6; border-radius: 0; box-shadow: 8px 8px 0 #B0102E; }
:root[data-machine="uk"] .pip, :root[data-machine="uk"] .pip.one { border-radius: 0; background: #07030D; }
:root[data-machine="uk"] .pip.one { background: #B0102E; }
:root[data-machine="uk"] .dice-table li { border-radius: 0; font: 400 25px/1.2 var(--font-uk-body); }
:root[data-machine="uk"] .dice-table li.is-landed { background: #FFC400; color: #07030D; }
:root[data-machine="uk"] .card-face { border-radius: 0; box-shadow: 8px 8px 0 #2B0B32; }
:root[data-machine="uk"] .card-back { background: #B0102E; }
:root[data-machine="uk"] .card-back::before { inset: 20px; border-radius: 0; background: repeating-linear-gradient(0deg, #7A0724 0 4px, transparent 4px 16px), repeating-linear-gradient(90deg, #7A0724 0 4px, transparent 4px 16px); }
:root[data-machine="uk"] .card-back::after { inset: 8px; border-radius: 0; border: 4px solid #FFC400; }
:root[data-machine="uk"] .card-emblem { background: #07030D; border-radius: 0; box-shadow: 0 0 0 4px #FFC400; }
:root[data-machine="uk"] .card-emblem b { font: 400 64px/1 var(--font-uk); color: #FFC400; }
:root[data-machine="uk"] .card-emblem i { font: 400 16px/1 var(--font-uk); color: #00F0FF; letter-spacing: 0; }
:root[data-machine="uk"] .card-front { background: #FFF1D6; color: #07030D; }
:root[data-machine="uk"] .card-front::after { inset: 8px; border-radius: 0; border: 4px solid #B0102E; }
:root[data-machine="uk"] .card-kicker { font: 400 16px/1 var(--font-uk); letter-spacing: 0; color: #7A0724; }
:root[data-machine="uk"] .card-text { font: 400 32px/1.15 var(--font-uk-body); }
:root[data-machine="uk"] .card-more-btn { border-radius: 0; border-width: 4px; font: 400 16px/1 var(--font-uk); color: #7A0724; }
:root[data-machine="uk"] .card-more { border-radius: 0; background: #FFC400; font: 400 25px/1.2 var(--font-uk-body); }
:root[data-machine="uk"] .card-more small { font: 400 16px/1 var(--font-uk); color: #7A0724; }
:root[data-machine="uk"] :is(.deck-count, .card-kicker) { font-family: var(--font-uk); font-weight: 400; }
:root[data-machine="uk"] .deck-count { font-size: 16px; color: #00F0FF; }
:root[data-machine="uk"] .deck-hint { left: 24px; right: 24px; bottom: 24px; padding: 2px 4px; background: #07030D; font: 400 25px/1.2 var(--font-uk-body); color: #FFF1D6; }
:root[data-machine="uk"] .amida-rail { stroke: #FFF1D6; stroke-width: 4; stroke-linecap: square; }
:root[data-machine="uk"] .amida-path { stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="uk"] .amida-start { border-radius: 0; background: #FFC400; color: #07030D; border: 4px solid #FFF1D6; font: 400 16px/1 var(--font-uk); }
:root[data-machine="uk"] .amida-start[aria-pressed="true"] { background: #00F0FF; color: #07030D; }
:root[data-machine="uk"] .amida-goal { background: #07030D; border: 4px solid #FFF1D6; border-radius: 0; font: 400 25px/1.1 var(--font-uk-body); }
:root[data-machine="uk"] .amida-goal.is-open { background: #FFC400; color: #07030D; }
:root[data-machine="uk"] .overlay { background: rgba(7, 3, 13, 0.9); }
:root[data-machine="uk"] .result-card { position: relative; gap: 12px; padding: 16px; border-color: #FFC400; box-shadow: 8px 8px 0 #B0102E; }
.uk-corners { position: absolute; inset: 4px; pointer-events: none; }
.uk-corners i { position: absolute; width: 48px; height: 48px; background: url("pixel/uk/fair-scroll-corner.png") no-repeat center / 48px 48px; image-rendering: crisp-edges; image-rendering: pixelated; }
.uk-corners i:nth-child(1) { left: 0; top: 0; }
.uk-corners i:nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
.uk-corners i:nth-child(n+3) { display: none; }
:root[data-machine="uk"] .result-card .lamps { justify-self: center; margin: 4px 0 0; }
:root[data-machine="uk"] .result-card .led { justify-self: center; width: auto; margin: 0 40px; padding: 8px 12px; background: #B0102E; color: #FFF1D6; font: 400 16px/1.5 var(--font-uk); text-align: center; box-shadow: 4px 4px 0 #7A0724; }
:root[data-machine="uk"] .result-card .result-emoji { justify-self: center; display: grid; place-items: center; width: 64px; height: 64px; background: #FFF1D6; }
:root[data-machine="uk"] .result-card .result-emoji img { width: 48px; height: 48px; }
:root[data-machine="uk"] .rg-say-head { margin: 4px 0 0; font: 400 16px/1.5 var(--font-uk); color: #FF2E88; }
:root[data-machine="uk"] .result-text.rg-say { min-height: 2.4em; margin: 0; font: 400 32px/1.2 var(--font-uk-body); color: #FFF1D6; letter-spacing: 0; hyphens: manual; -webkit-hyphens: manual; }
:root[data-machine="uk"] .result-foot { margin: 0; font: 400 25px/1.2 var(--font-uk-body); font-style: normal; color: #00F0FF; }
:root[data-machine="uk"] .result-card .rg-log { margin: 0; font: 400 25px/1 var(--font-uk-body); color: #FF2E88; }
:root[data-machine="uk"] .result-actions { padding: 8px; border-color: #FFF1D6; }
:root[data-machine="uk"] .result-actions .btn { min-height: 52px; padding: 8px 6px 8px 36px; font: 400 16px/1.5 var(--font-uk); }
:root[data-machine="uk"] .result-actions .btn::before { left: 12px; }
:root[data-machine="uk"] .result-actions > .btn-arcade { padding-left: 46px; font-size: 24px; color: #FFC400; }
:root[data-machine="uk"] .result-actions > .btn-arcade::before { left: 14px; }
:root[data-machine="uk"] .result-actions .btn:is(:hover, :focus-visible, .is-cur) { background: #00F0FF; color: #07030D; }
:root[data-machine="uk"] .result-actions > .btn-arcade:is(:hover, :focus-visible, .is-cur) { background: #FFC400; color: #07030D; }
:root[data-machine="uk"] .result-actions > .btn-arcade::before { color: #07030D; }
:root[data-machine="uk"] .result-more-btn { font: 400 16px/1 var(--font-uk); color: #FFC400; }
:root[data-machine="uk"] .result-more { font: 400 25px/1.2 var(--font-uk-body); color: #FFC400; }
:root[data-machine="uk"] :is(.result-sub, .defied) { font: 400 25px/1.2 var(--font-uk-body); color: #FF2E88; }
:root[data-machine="uk"] .result-below { background: #07030D; color: #FFF1D6; }
html:root[data-machine="uk"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="uk"] .result-below .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="uk"] .settings h2 { font: 400 16px/1.5 var(--font-uk); color: #FFC400; }
:root[data-machine="uk"] :is(.row-text, .row-meta, .field label, .toggle, .confirm, .edit-item, .settings p) { font-family: var(--font-uk-body); font-weight: 400; }
:root[data-machine="uk"] :is(.row-text, .toggle, .field label, .settings p) { font-size: 25px; line-height: 1.2; }
:root[data-machine="uk"] .row-meta { font-size: 25px; color: #FF2E88; }
:root[data-machine="uk"] .seg { border-color: #FFF1D6; }
:root[data-machine="uk"] .seg button { font: 400 16px/1.5 var(--font-uk); }
:root[data-machine="uk"] .seg button[aria-selected="true"] { background: #00F0FF; color: #07030D; }
:root[data-machine="uk"] .input { border: 2px solid #FFF1D6; font-size: 25px; }
:root[data-machine="uk"] .input::placeholder { color: #FF2E88; opacity: 1; }
:root[data-machine="uk"] .icon-btn { border: 2px solid #FFF1D6; font: 400 25px/1 var(--font-uk-body); }
:root[data-machine="uk"] .icon-btn:disabled { border-color: #4A1C55; color: #FF2E88; opacity: 1; }
:root[data-machine="uk"] .category .panel > p:first-child { font: 400 16px/1.5 var(--font-uk) !important; color: #FFF1D6; }
:root[data-machine="uk"] .toggle input:checked + .switch { background: #FFC400; }
:root[data-machine="uk"] .toast { border-color: #FFC400; font: 400 25px/1.2 var(--font-uk-body); }
:root[data-machine="uk"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover),
:root[data-machine="uk"] :is(.btn-grid, .result-actions, .btn-row):has(.btn:hover) .btn.is-cur:not(:hover):not(.btn-arcade) { --face: #07030D; --edge: #07030D; --fg: #FFF1D6; background: #07030D; }
:root[data-machine="uk"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover)::before,
:root[data-machine="uk"] :is(.btn-grid, .result-actions, .btn-row):has(.btn:hover) .btn.is-cur:not(:hover)::before { visibility: hidden; }
:root[data-machine="uk"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover) .tile-title { color: #FFF1D6; }
:root[data-machine="uk"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover)::after { color: #FF2E88; }
:root[data-machine="uk"] .btn-grid:has(.btn:hover) .btn-method.is-cur:not(:hover) .btn-flavor { color: #FF2E88; }
:root[data-machine="uk"] .btn-grid:has(.btn:hover) .btn-method.is-cur:not(:hover) .btn-sub { color: #00F0FF; }
:root[data-machine="uk"] .btn-grid .btn-method.is-rec.is-cur:not(:hover) { box-shadow: inset 0 0 0 4px #FFF1D6; }
:root[data-machine="uk"] .result-actions:has(.btn:hover) .btn.is-cur:not(:hover):not(.btn-arcade) { background: transparent; color: #FFF1D6; }
:root[data-machine="uk"] .btn:disabled::before { content: none; }
:root[data-machine="uk"] .wheel-wrap { isolation: isolate; width: min(calc(100% - 32px), 392px, 56vh); margin: 16px auto; }
:root[data-machine="uk"] .wheel-wrap::before { content: ""; position: absolute; z-index: -1; inset: -16px; pointer-events: none; border: 4px solid #FFF1D6;
background: repeating-linear-gradient(90deg, #2B0B32 0 16px, #07030D 16px 32px); }
:root[data-machine="uk"] .draw-stage { gap: 16px; }
:root[data-machine="uk"] .draw-stage .led { align-self: stretch; width: 100%; max-width: none; padding: 10px 14px; border: 4px solid #FFF1D6; text-align: left; }
:root[data-machine="uk"] .draw-stage .btn-row > .btn { flex: 1 1 auto; padding: 10px 10px 10px 32px; white-space: nowrap; }
:root[data-machine="uk"] .draw-stage .btn-row > .btn::before { left: 10px; }
:root[data-machine="uk"] .deck .card-face { box-shadow: none; }
:root[data-machine="uk"] .deck .card-face:nth-child(1) { transform: translate(8px, 8px); background: #2B0B32; }
:root[data-machine="uk"] .deck .card-face:nth-child(2) { transform: translate(4px, 4px); background: #7A0724; }
:root[data-machine="uk"] .deck .card-face:nth-child(3) { transform: none; }
:root[data-machine="uk"] .amida-starts { counter-reset: uk-am; }
:root[data-machine="uk"] .amida-start { counter-increment: uk-am; font-size: 0 !important; min-height: 44px; }
:root[data-machine="uk"] .amida-start::before { content: counter(uk-am); font: 400 24px/1 var(--font-uk); }
:root[data-machine="uk"] .amida-start:disabled:not([aria-pressed="true"]) { opacity: 1; background: #07030D; border-color: #4A1C55; color: #FF2E88; }
:root[data-machine="uk"] .amida-goal:not(.is-open) { font-size: 0; }
:root[data-machine="uk"] .amida-goal:not(.is-open)::before { content: "?"; font: 400 25px/1 var(--font-uk-body); color: #FFF1D6; }
:root[data-machine="uk"] .draw-stage div:has(> .amida-starts) { padding: 12px 10px; gap: 8px !important; border: 4px solid #FFF1D6; background: #07030D; }
:root[data-machine="uk"] .saved > p.muted { margin: 0; padding: 14px 16px; border: 4px solid #FFF1D6; background: #07030D; color: #FFF1D6; font-size: 25px; line-height: 1.2; }
:root[data-machine="uk"] .seg button { min-height: 48px; }
:root[data-machine="uk"] .settings { gap: 20px; }
:root[data-machine="uk"] .settings h3 { margin: 14px 0 6px !important; font: 400 16px/1.5 var(--font-uk) !important; color: #FFC400; letter-spacing: 0; }
:root[data-machine="uk"] .settings .notice-list { gap: 8px; padding-left: 2em; }
:root[data-machine="uk"] .settings .notice-list li { font: 400 25px/1.2 var(--font-uk-body); }
:root[data-machine="uk"] .settings .notice-list li::marker { color: #FFC400; font-family: var(--font-uk-body); }
:root[data-machine="uk"] .toggle { min-height: 52px; }
:root[data-machine="uk"] .toggle .switch { width: 72px; height: 36px; border: 4px solid #FFF1D6; border-radius: 0; background: #07030D; transition: none; }
:root[data-machine="uk"] .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: #FF2E88; font: 400 16px/1 var(--font-uk); letter-spacing: 0; transform: none; transition: none; box-shadow: none; }
:root[data-machine="uk"] .toggle input:checked + .switch { background: #FFC400; border-color: #FFC400; }
:root[data-machine="uk"] .toggle input:checked + .switch::after { content: "ON"; color: #07030D; background: transparent; transform: none; }
:root[data-machine="uk"] .toggle input:focus-visible + .switch { outline: 3px solid #00F0FF; outline-offset: 3px; }
html:root[data-machine="uk"] .settings .pill.fx-switch.fx-switch-wide { height: 52px; min-height: 52px; padding: 0 12px 0 14px; gap: 10px; color: #FFF1D6; font: 400 16px/1 var(--font-uk); }
html:root[data-machine="uk"] .settings .pill.fx-switch.fx-switch-wide::before { background: #07030D; border: 4px solid #FFF1D6; -webkit-mask: none; mask: none; }
html:root[data-machine="uk"] .settings .pill.fx-switch.fx-switch-wide:hover::before { background: #2B0B32; }
html:root[data-machine="uk"] .settings .fx-switch-wide .fx-switch-state { min-width: 56px; padding: 6px; border: 4px solid #FFF1D6; background: #07030D; color: #FF2E88; font: 400 16px/1 var(--font-uk); }
html:root[data-machine="uk"] .settings .fx-switch-wide[aria-pressed="true"] .fx-switch-state { background: #FFC400; border-color: #FFC400; color: #07030D; }
html:root[data-machine="uk"] .settings .store-link { min-height: 48px; font-size: 16px; }
@media (min-width: 1100px) {
:root[data-machine="uk"] .rg-title { padding-bottom: 14px; background: linear-gradient(#2B0B32, #2B0B32) no-repeat left 0 top 37px / 100% calc(100% - 37px); }
:root[data-machine="uk"] .rg-game { padding-top: 16px; }
:root[data-machine="uk"] .tile { min-height: 64px; padding-block: 4px; column-gap: 14px; }
:root[data-machine="uk"] .tile-emoji { width: 56px; height: 56px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="uk"] main.app { padding-top: 16px; }
:root[data-machine="uk"] .rg-head { gap: 8px; }
:root[data-machine="uk"] .rg-head > .marquee { display: none; }
:root[data-machine="uk"] .rg-head > .home-title { padding-block: 6px; }
:root[data-machine="uk"] .rg-start { gap: 2px; }
:root[data-machine="uk"] .tile { min-height: 60px; padding-block: 2px; }
:root[data-machine="uk"] .tile-emoji { width: 52px; height: 52px; }
}
:root[data-machine="uk"] .card-area + div > .btn-row { flex-direction: column; gap: 10px; }
:root[data-machine="uk"] .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="uk"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="uk"] .rg-head .rg-sub { display: none; }
}
:root[data-machine="uk"] .rg-title .rg-count { position: relative; z-index: 1; margin: 0; padding: 0 56px; font: 400 25px/1.2 var(--font-uk-body); color: #FFF1D6; letter-spacing: 0.04em; }
:root[data-machine="uk"] .rg-press { padding: 6px 18px 6px 14px; background: #FFF1D6; color: #07030D; box-shadow: 4px 4px 0 #B0102E; }
:root[data-machine="uk"] .rg-press.is-wait { animation: none; }
:root[data-machine="uk"] .rg-press::before { visibility: visible; color: #B0102E; }
:root[data-machine="uk"] .rg-press.is-wait::before { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="uk"][data-motion="reduce"] .rg-press.is-wait::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="uk"]:not([data-motion="full"]) .rg-press.is-wait::before { animation: none; } }
@media (max-width: 479px) {
:root[data-machine="uk"] .rg-head { gap: 10px; }
:root[data-machine="uk"] .rg-title { padding-bottom: 14px; background: linear-gradient(#2B0B32, #2B0B32) no-repeat left 0 top 37px / 100% calc(100% - 37px); }
:root[data-machine="uk"] .rg-game { padding-top: 14px; }
:root[data-machine="uk"] .rg-head .rg-sub, :root[data-machine="uk"] .rg-head > .marquee { display: none; }
:root[data-machine="uk"] .rg-head > .home-title { padding-block: 6px; }
}
:root[data-machine="uk"] .rg-say .rg-next { color: var(--rg-hi); }
@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="uk"] body::before, :root[data-theme="uk"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
url("pixel/uk/wide-bulbs.png"),
url("pixel/uk/wide-bulbs.png"),
url("pixel/uk/wide-stands.png");
background-size: 400px 72px, 400px 72px, 400px 320px;
background-repeat: no-repeat;
background-position:
right 24px top 4vh,
right 64px top 22vh,
right 0 bottom 0;
}
:root[data-theme="uk"]::before { transform: scaleX(-1); }
}