:root[data-theme="us"] {
--bg-mode: css;
--bg-top: #070B12; --bg-bottom: #070B12; --stripe-opacity: 0;
--ink: #070B12; --night: #111A22; --cream: #F2F0E6; --paper: #F2F0E6;
--cabinet: #FF3B30; --cabinet-dark: #3B4652; --mustard: #FFB000; --mustard-dark: #5E6B78;
--teal: #0F6B3C; --teal-dark: #073A20; --led: #3DFF7A; --led-red: #FF3B30;
--lamp-0: #F2F0E6; --lamp-1: #F2F0E6; --lamp-2: #F2F0E6; --lamp-3: #F2F0E6; --lamp-off: #3B4652;
--dark-face: #070B12; --dark-edge: #CBDCE6; --tile-base: #0F6B3C; --tile-stripe: #F2F0E6; --tile-text: #F2F0E6; --amida-lamp: #FF3B30;
--ink-dim: #91A8BC; --line: #5E6B78; --focus: #FFD866; --sign: #0F6B3C;
--font-px: "Silkscreen", "RYD US Sym", ui-monospace, monospace;
--font-vt: "VT323", "RYD US Sym", ui-monospace, monospace;
--font-title: var(--font-px); --font-rounded: var(--font-vt); --font-body: var(--font-vt); --font-led: var(--font-vt);
--wheel-count: 2;
--wheel-0: #0F6B3C; --wheel-0-text: #F2F0E6;
--wheel-1: #111A22; --wheel-1-text: #F2F0E6;
--wheel-2: #073A20; --wheel-2-text: #F2F0E6;
--wheel-font: "VT323", monospace; --wheel-weight: 400;
--wheel-line: #FFB000; --wheel-rim: #CBDCE6; --wheel-rim-bg: #070B12;
--wheel-win: #FFB000; --wheel-win-text: #070B12; --wheel-win-edge: #F2F0E6; --wheel-dim: rgba(7, 11, 18, 0.6);
--wheel-hub-bg: #070B12; --wheel-hub-ring: #CBDCE6; --wheel-hub-ink: #FFB000; --wheel-hub-font: "Silkscreen", monospace;
--wheel-pointer: transparent; --wheel-pointer-edge: transparent; --wheel-pointer-blur: 0;
--bf-veil: rgba(7, 11, 18, 0.9); --bf-ink: #F2F0E6;
}
@font-face {
font-family: "RYD US 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-machine="us"] {
--rg-font: var(--font-vt);
--rg-font-title: var(--font-px);
--rg-fs: 24px; --rg-fs-m: 24px; --rg-fs-l: 40px; --rg-lh: 1.25; --rg-track: 0;
--rg-dot: 4px;
--rg-screen: #070B12; --rg-win: #070B12; --rg-ink: #F2F0E6; --rg-dim: #91A8BC;
--rg-line: #CBDCE6; --rg-line2: #CBDCE6;
--rg-hi: #FFD866; --rg-cur: #FFB000; --rg-btn: #FFB000; --rg-btn-ink: #070B12; --rg-shade: #FF3B30;
--rg-win-border: 0 solid transparent;
--rg-win-shadow: 0 -4px 0 0 #CBDCE6, 0 4px 0 0 #CBDCE6, -4px 0 0 0 #CBDCE6, 4px 0 0 0 #CBDCE6;
--rg-win-pad: 14px 16px;
--us-px-chrome: 0 -4px 0 0 #CBDCE6, 0 4px 0 0 #CBDCE6, -4px 0 0 0 #CBDCE6, 4px 0 0 0 #CBDCE6;
--us-px-dim: 0 -4px 0 0 #3B4652, 0 4px 0 0 #3B4652, -4px 0 0 0 #3B4652, 4px 0 0 0 #3B4652;
--us-px-green: 0 -4px 0 0 #0F6B3C, 0 4px 0 0 #0F6B3C, -4px 0 0 0 #0F6B3C, 4px 0 0 0 #0F6B3C;
--us-px-amber: 0 -4px 0 0 #FFB000, 0 4px 0 0 #FFB000, -4px 0 0 0 #FFB000, 4px 0 0 0 #FFB000;
--us-px-cream: 0 -4px 0 0 #F2F0E6, 0 4px 0 0 #F2F0E6, -4px 0 0 0 #F2F0E6, 4px 0 0 0 #F2F0E6;
--us-sign: inset 0 0 0 4px #F2F0E6, var(--us-px-green);
}
:root[data-machine="us"] body { background: #070B12 !important; }
:root[data-machine="us"] :is(.us-glow, .us-road, .us-dash, .us-rain) { display: none; }
@media (min-width: 640px) {
:root[data-machine="us"] .us-rain { display: block; inset: -768px 0 0 0; will-change: transform; image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/us/code-rain.png") 0 0 / 384px 768px repeat; }
:root[data-machine="us"] .us-rain-a { animation: us-code-fall 14s steps(96) infinite; opacity: .8; }
:root[data-machine="us"] .us-rain-b { animation: us-code-fall 21s steps(96) infinite; background-position: 190px 300px; opacity: .55; }
:root[data-machine="us"] .us-rain-c { display: none; }
}
@keyframes us-code-fall { from { transform: translateY(0); } to { transform: translateY(768px); } }
:root[data-machine="us"] main.app {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 14px 12px;
background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(17, 26, 34, 0.7) 3px 4px), #070B12;
}
:root[data-machine="us"] main.app > * { grid-column: 1 / -1; min-width: 0; }
:root[data-machine="us"] main.app::before, :root[data-machine="us"] main.app::after {
grid-row: 1; font: 400 16px/24px var(--font-px); white-space: pre; color: transparent;
-webkit-background-clip: text; background-clip: text; pointer-events: none;
}
:root[data-machine="us"] main.app::before { content: "1UP 000000"; content: "1UP 000000" / ""; grid-column: 1; justify-self: start;
background-image: linear-gradient(90deg, #FF3B30 0 2.4em, #F2F0E6 2.4em); }
:root[data-machine="us"] main.app::after { content: "HI 019830"; content: "HI 019830" / ""; grid-column: 2; justify-self: end;
background-image: linear-gradient(90deg, #FFB000 0 1.4em, #F2F0E6 1.4em); }
:root[data-machine="us"] .screen::after { content: "FREE PLAY"; content: "FREE PLAY" / ""; align-self: center; margin-top: 6px;
font: 400 16px/24px var(--font-px); color: #3DFF7A; text-align: center; justify-self: center; pointer-events: none; }
:root[data-machine="us"] :focus-visible { outline: 4px solid #FFD866; outline-offset: 4px; }
:root[data-machine="us"] a { color: #FFB000; }
@media (min-width: 640px) {
:root[data-machine="us"] .stage { padding: 84px 22px 26px; background: #111A22; border-radius: 0;
box-shadow: 0 0 0 4px #3B4652, 0 0 0 8px #070B12, 0 0 0 12px #91A8BC, 0 0 0 16px #070B12; }
:root[data-machine="us"] .stage::before { display: grid; place-items: center; content: "RAIN CHECK"; content: "RAIN CHECK" / "";
position: absolute; left: 22px; right: 22px; top: 16px; height: 56px; width: auto; bottom: auto; filter: none;
font: 400 32px/1 var(--font-px); color: #070B12; text-shadow: none; letter-spacing: 0.04em; padding-bottom: 4px;
image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/us/googie-starburst.png") no-repeat left 18px center / 44px 44px, url("pixel/us/googie-starburst.png") no-repeat right 18px center / 44px 44px, #F2F0E6;
box-shadow: inset 0 0 0 4px #5E6B78, inset 0 0 0 8px #F2F0E6, inset 0 0 0 12px #FFB000; }
:root[data-machine="us"] .stage::after { display: none; }
:root[data-machine="us"] main.app { box-shadow: 0 0 0 4px #070B12, 0 0 0 8px #3B4652; }
}
:root[data-machine="us"] .us-head { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
margin: 0 -18px; padding: 4px 18px 0; text-align: center; }
:root[data-machine="us"] .us-head > * { grid-column: 1; min-width: 0; }
:root[data-machine="us"] .us-head > .rg-title { grid-row: 1; z-index: 1; gap: 2px; }
:root[data-machine="us"] .us-head > .us-diner { grid-row: 2; }
:root[data-machine="us"] .us-head > .us-sign { grid-row: 3; }
:root[data-machine="us"] .us-head > .us-term { grid-row: 4; }
:root[data-machine="us"] .us-head > .us-crossing { grid-row: 5; }
:root[data-machine="us"] .us-head > .rg-start { grid-row: 6; }
:root[data-machine="us"] .us-head::before { content: ""; grid-row: 1 / 4; grid-column: 1; z-index: -2; margin: -4px -18px 0; pointer-events: none;
image-rendering: crisp-edges; image-rendering: pixelated;
background:
url("pixel/us/cab.png") left 14% bottom 6px / 81px 36px no-repeat,
url("pixel/us/skyline.png") center bottom 48px / 320px 120px repeat-x,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 2px / 8px 10px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 22px / 4px 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 36px / 4px 4px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 0 / 88% 8px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 8px / 72% 8px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 16px / 57% 8px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 24px / 44% 8px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 32px / 32% 8px no-repeat,
linear-gradient(#3B4652, #3B4652) center bottom 40px / 20% 4px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 0 / 94% 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 8px / 77% 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 16px / 61% 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 24px / 47% 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 32px / 35% 8px no-repeat,
linear-gradient(#F2F0E6, #F2F0E6) center bottom 40px / 22% 4px no-repeat,
linear-gradient(180deg, #070B12 0 calc(100% - 84px), #111A22 calc(100% - 84px) calc(100% - 64px), #3B4652 calc(100% - 64px) calc(100% - 52px),
#FFB000 calc(100% - 52px) calc(100% - 48px), #073A20 calc(100% - 48px)); }
:root[data-machine="us"] .us-head::after { content: ""; grid-row: 2 / 4; grid-column: 1; z-index: -1; margin: 0 -18px 48px; pointer-events: none;
image-rendering: crisp-edges; image-rendering: pixelated;
background: url("pixel/us/code-rain.png") 0 0 / 384px 768px repeat;
animation: us-head-rain 12s steps(96) infinite; }
@keyframes us-head-rain { to { background-position: 0 768px; } }
:root[data-machine="us"] .us-head .rg-proto { font: 400 20px/1.2 var(--font-vt); color: #91A8BC; letter-spacing: 0.04em; }
:root[data-machine="us"] .us-head .rg-game { font: 400 40px/1.1 var(--font-px); color: #FFB000; letter-spacing: 0.02em; white-space: nowrap; justify-self: center; padding: 2px 10px 4px; background: #070B12;
text-shadow: none; }
:root[data-machine="us"] .us-diner { aspect-ratio: 2 / 1; display: grid; place-items: center; position: relative; justify-self: end; width: 256px; height: 128px; max-width: none;
margin: 0 -6px -20px 0; padding: 0 0 14px; border: 0; border-image: none;
background: url("pixel/us/diner-neon-frame.png") no-repeat center / 256px 128px, linear-gradient(#070B12, #070B12) 12px 14px / 232px 88px no-repeat;
image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine="us"] .us-diner span { position: relative; font: 400 16px/1 var(--font-px); color: #FFB000; text-shadow: none; letter-spacing: 0; white-space: nowrap; }
:root[data-machine="us"] .us-diner span::after { content: ""; position: absolute; left: -26px; top: -22px; width: 33px; height: 33px; pointer-events: none;
background: url("pixel/us/googie-starburst.png") no-repeat center / 33px 33px; image-rendering: pixelated; }
:root[data-machine="us"] .us-diner span::before { content: none; }
:root[data-machine="us"] .us-diner::after { content: ""; position: absolute; right: 48px; bottom: 34px; width: 60px; height: 12px; pointer-events: none;
background: url("pixel/us/boomerang-arrow.png") no-repeat center / 60px 12px; image-rendering: pixelated; }
:root[data-machine="us"] .us-sign { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
margin: 0 4px 48px; padding: 14px 18px 14px; text-align: left; background: #0F6B3C; border: 0; border-radius: 0; box-shadow: var(--us-sign); animation: none; }
:root[data-machine="us"] .us-posts { position: absolute; z-index: -1; top: 100%; left: 16%; right: 16%; height: 44px; border-left: 8px solid #5E6B78; border-right: 8px solid #5E6B78; }
:root[data-machine="us"] .us-sign-kicker { grid-column: 1; font: 400 16px/1 var(--font-px); letter-spacing: 0.02em; color: #F2F0E6; opacity: 1; }
:root[data-machine="us"] .us-sign .home-title { grid-column: 1; min-width: 0; margin: 0; font: 400 24px/1.1 var(--font-px); color: #F2F0E6; text-shadow: none; letter-spacing: 0; white-space: nowrap; }
:root[data-machine="us"] .us-arrow { grid-column: 2; grid-row: 1 / 3; width: 36px; height: 36px; }
:root[data-machine="us"] .us-term { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left;
font: 400 24px/1.25 var(--font-vt); color: #3DFF7A; letter-spacing: 0; }
:root[data-machine="us"] .us-head > .us-term { margin-top: 12px; font-size: 24px; }
:root[data-machine="us"] .us-cursor { margin-left: 2px; animation: us-cursor 1s steps(1) infinite; }
@keyframes us-cursor { 50% { opacity: 0; } }
:root[data-machine="us"] .plaque.us-crossing { display: grid; grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; justify-self: center;
max-width: 100%; margin: 12px 0 0; padding: 6px 16px 6px 10px; background: #F2F0E6; color: #070B12; border: 0; border-radius: 0;
box-shadow: inset 0 0 0 4px #070B12, var(--us-px-cream); }
:root[data-machine="us"] .us-crossing-bf { display: block; width: 46px; height: 46px; }
:root[data-machine="us"] .us-crossing strong { font: 400 16px/1.2 var(--font-px); letter-spacing: 0.02em; color: #070B12; }
:root[data-machine="us"] .us-head > .rg-start { display: grid; gap: 4px; justify-items: center; margin-top: 12px; }
:root[data-machine="us"] .rg-press { font: 400 16px/1.5 var(--font-px); color: #F2F0E6; letter-spacing: 0.06em; cursor: pointer; }
:root[data-machine="us"] .rg-cont { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; font: 400 24px/1.2 var(--font-vt); color: #91A8BC; }
:root[data-machine="us"] .rg-cont-k { color: #FFB000; }
:root[data-machine="us"] .rg-cont-k::before { content: "★ "; color: #FF3B30; }
@media (min-width: 480px) {
:root[data-machine="us"] .us-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
:root[data-machine="us"] .us-head > * { grid-column: 1 / -1; }
:root[data-machine="us"] .us-head::before, :root[data-machine="us"] .us-head::after { grid-column: 1 / -1; }
:root[data-machine="us"] .us-head > .us-diner { grid-column: 2; }
:root[data-machine="us"] .us-head > .us-crossing { position: relative; grid-column: 1; grid-row: 2; align-self: start; justify-self: center; margin: 22px 0 0; }
:root[data-machine="us"] .us-head > .us-crossing::after { content: ""; position: absolute; z-index: -1; top: 100%; left: 50%; width: 8px; height: 64px; margin-left: -4px; background: #5E6B78; }
:root[data-machine="us"] .us-crossing strong { width: min-content; text-align: left; line-height: 1.4; }
:root[data-machine="us"] .us-head .rg-game { font-size: 48px; text-shadow: none; }
:root[data-machine="us"] .us-sign .home-title { font-size: 32px; }
:root[data-machine="us"] .us-arrow { width: 48px; height: 48px; }
}
:root[data-machine="us"] .home-question { position: relative; z-index: 2; justify-self: start; align-self: flex-start; margin: 4px 0 -18px 14px; padding: 8px 14px 10px;
background: #0F6B3C; color: #F2F0E6; font: 400 16px/1.25 var(--font-px); letter-spacing: 0.02em; text-transform: uppercase;
box-shadow: inset 4px 0 0 #F2F0E6, inset -4px 0 0 #F2F0E6, inset 0 4px 0 #F2F0E6, 0 -4px 0 0 #0F6B3C, -4px 0 0 0 #0F6B3C, 4px 0 0 0 #0F6B3C; }
:root[data-machine="us"] .tiles { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px 8px 10px; background: #0F6B3C; color: #F2F0E6; box-shadow: var(--us-sign); }
:root[data-machine="us"] .tile { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; min-height: 60px; margin: 0;
padding: 6px 52px 6px 40px; color: #F2F0E6; background: transparent; }
:root[data-machine="us"] .tile::before { left: 14px; color: #FFB000; }
:root[data-machine="us"] .tile::after { content: ""; position: absolute; inset: auto; top: 50%; right: 14px; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 0;
background: url("pixel/us/road-arrow.png") no-repeat center / 36px 36px; image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine="us"] .tile-emoji { display: block; line-height: 0; }
:root[data-machine="us"] .tile-emoji img { width: 48px; height: 48px; }
:root[data-machine="us"] .tile-title { font: 400 24px/1.1 var(--font-px); letter-spacing: 0; text-transform: uppercase; text-align: left; }
:root[data-machine="us"] .tile:is(:hover, :focus-visible, .is-cur) { background: #073A20; }
:root[data-machine="us"] .tile:is(:hover, :focus-visible, .is-cur) .tile-title { color: #FFD866; }
:root[data-machine="us"] .tile:focus-visible { outline: 2px solid #FFD866; outline-offset: -4px; }
:root[data-machine="us"] .btn { border: 0; box-shadow: var(--us-px-chrome); padding: 10px 14px 10px 40px; min-height: 52px; justify-content: center;
font: 400 16px/1.3 var(--font-px); letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-machine="us"] .btn::before { left: 14px; top: 50%; }
:root[data-machine="us"] .btn-arcade { box-shadow: var(--us-px-amber), 0 8px 0 0 #5E6B78; font-size: 24px; min-height: 60px; align-items: center; text-align: center; padding-right: 40px; }
:root[data-machine="us"] .btn:active:not(:disabled) { transform: translateY(2px); }
:root[data-machine="us"] .btn-row { gap: 16px; }
:root[data-machine="us"] .btn-row .btn { padding-left: 36px; }
:root[data-machine="us"] .home-foot { margin: 0; font: 400 24px/1.25 var(--font-vt); color: #91A8BC; text-align: center; }
:root[data-machine="us"] .today-card { box-shadow: var(--us-px-chrome); }
:root[data-machine="us"] .today-label { font: 400 16px/1.2 var(--font-px); letter-spacing: 0.04em; color: #3DFF7A; text-transform: uppercase; opacity: 1; }
:root[data-machine="us"] .today-text { font: 400 32px/1.15 var(--font-vt); color: #F2F0E6; }
:root[data-machine="us"] .today-text .today-ico { width: 36px; height: 36px; vertical-align: -6px; }
:root[data-machine="us"] .led { padding: 10px 16px; background: #070B12; box-shadow: var(--us-px-dim); border: 0; text-align: left;
font: 400 32px/1.15 var(--font-vt) !important; color: #3DFF7A; }
:root[data-machine="us"] .led::before { content: "> "; }
:root[data-machine="us"] .led .led-ico { width: 48px; height: 48px; margin: 0 10px 0 0; vertical-align: -12px; }
:root[data-machine="us"] .draw .led, :root[data-machine="us"] .draw-stage .led { font-size: 24px !important; text-align: center; padding: 8px 14px; }
:root[data-machine="us"] .draw-stage .led::before { content: none; }
:root[data-machine="us"] .tn-tag { margin-top: 0; padding: 8px 16px 8px 10px; gap: 10px; background: #0F6B3C; color: #F2F0E6; border: 0; border-radius: 0; box-shadow: var(--us-sign);
font: 400 22px/1.15 var(--font-vt); letter-spacing: 0; }
:root[data-machine="us"] .tn-place { font: 400 16px/1.2 var(--font-px); color: #FFD866; text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 479px) { :root[data-machine="us"] .tn-place { display: block; margin-top: 2px; } }
:root[data-machine="us"] .section-title { font: 400 16px/1.3 var(--font-px); color: #FFB000; letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-machine="us"] .screen > div:not(.us-head) > .us-term { font-size: 20px; }
:root[data-machine="us"] .btn-method { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; row-gap: 4px; text-align: left;
min-height: 112px; margin: 30px 4px 4px; padding: 14px 12px 14px 36px; background: #0F6B3C; color: #F2F0E6; box-shadow: var(--us-sign); text-transform: none; }
:root[data-machine="us"] .btn-method::before { left: 14px; top: 30px; color: #FFB000; }
:root[data-machine="us"] .btn-method .btn-tag { position: absolute; left: 10px; top: -30px; z-index: 1; padding: 8px 10px 10px; background: #0F6B3C; color: #F2F0E6;
font: 400 16px/1 var(--font-px); letter-spacing: 0.02em; text-transform: uppercase;
box-shadow: inset 4px 0 0 #F2F0E6, inset -4px 0 0 #F2F0E6, inset 0 4px 0 #F2F0E6, 0 -4px 0 0 #0F6B3C, -4px 0 0 0 #0F6B3C, 4px 0 0 0 #0F6B3C; }
:root[data-machine="us"] .btn-method .btn-label { font: 400 24px/1.1 var(--font-px); letter-spacing: 0; text-transform: uppercase; overflow-wrap: anywhere; }
:root[data-machine="us"] .btn-method .btn-flavor { font: 400 20px/1.15 var(--font-vt); color: #CBDCE6; }
:root[data-machine="us"] .btn-method .btn-sub { font: 400 20px/1.15 var(--font-vt); color: #FFD866; text-transform: uppercase; }
:root[data-machine="us"] .btn-method:is(:hover, :focus-visible, .is-cur) .btn-label { color: #FFD866; }
:root[data-machine="us"] .btn-method:focus-visible { outline: 2px solid #FFD866; outline-offset: -12px; }
:root[data-machine="us"] .btn-method.is-rec { box-shadow: inset 0 0 0 4px #F2F0E6, inset 0 0 0 8px #0F6B3C, inset 0 0 0 12px #F2F0E6, var(--us-px-green); padding-left: 46px; }
:root[data-machine="us"] .btn-method.is-rec::before { left: 20px; }
:root[data-machine="us"] .btn-grid { gap: 8px 16px; }
:root[data-machine="us"] .btn-grid .btn:not(.btn-method) { font-size: 16px; }
:root[data-machine="us"] .chip { min-height: 44px; padding: 4px 12px 6px; border: 2px solid #5E6B78; background: #070B12; color: #F2F0E6; font: 400 24px/1.2 var(--font-vt); }
:root[data-machine="us"] .chip.is-struck { color: #91A8BC; border-style: dashed; }
:root[data-machine="us"] .panel { box-shadow: var(--us-px-chrome); }
:root[data-machine="us"] .panel h2 { font: 400 24px/1.25 var(--font-px) !important; color: #FFB000 !important; text-transform: uppercase; }
:root[data-machine="us"] .linkish { color: #FFB000; font: 400 24px/1.2 var(--font-vt); text-decoration-thickness: 2px; }
:root[data-machine="us"] :is(.note, .picked-note, .small, .muted) { font-family: var(--font-vt); color: #91A8BC; }
html:root[data-machine="us"] :is(.note, .picked-note, .small) { font-size: 20px; line-height: 1.25; }
:root[data-machine="us"] .warn { font: 400 24px/1.25 var(--font-vt); color: #FF3B30; }
:root[data-machine="us"] .topic-item { font: 400 24px/1.3 var(--font-vt); }
:root[data-machine="us"] .wheel-wrap > canvas { width: 100%; height: 100%; }
:root[data-machine="us"] .wheel-wrap::after { content: ""; position: absolute; z-index: 3; left: 50%; top: -2px; width: 32px; height: 40px; margin-left: -16px; pointer-events: none;
background: url("pixel/us/wheel-pointer.png") no-repeat center / 32px 40px; image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine="us"] .die { background: #F2F0E6; border-radius: 0; box-shadow: 8px 8px 0 #3B4652; }
:root[data-machine="us"] .pip, :root[data-machine="us"] .pip.one { border-radius: 0; background: #070B12; }
:root[data-machine="us"] .pip.one { background: #FF3B30; }
:root[data-machine="us"] .dice-table li { border-radius: 0; font: 400 20px/1.3 var(--font-vt); }
:root[data-machine="us"] .dice-table li.is-landed { background: #FFB000; color: #070B12; }
:root[data-machine="us"] .card-face { border-radius: 0; box-shadow: 8px 8px 0 #3B4652; }
:root[data-machine="us"] .card-back { background: #0F6B3C; }
:root[data-machine="us"] .card-back::before { inset: 10px; border-radius: 0; background: none; border: 4px solid #F2F0E6; }
:root[data-machine="us"] .card-back::after { display: none; }
:root[data-machine="us"] .card-emblem { background: transparent; border-radius: 0; width: auto; height: auto; box-shadow: none; }
:root[data-machine="us"] .card-emblem b { font: 400 40px/1 var(--font-px); color: #F2F0E6; }
:root[data-machine="us"] .card-emblem i { font: 400 24px/1 var(--font-vt); color: #FFB000; letter-spacing: 2px; }
:root[data-machine="us"] .card-front { background: #F2F0E6; color: #070B12; }
:root[data-machine="us"] .card-front::after { inset: 8px; border: 4px solid #070B12; border-radius: 0; }
:root[data-machine="us"] .card-kicker { font: 400 16px/1 var(--font-px); color: #070B12; letter-spacing: 0.04em; }
:root[data-machine="us"] .card-text { font: 400 clamp(28px, 8vw, 36px)/1.15 var(--font-vt); color: #070B12; }
:root[data-machine="us"] :is(.card-more-btn, .deck-count, .card-more small) { font-family: var(--font-vt); font-weight: 400; }
:root[data-machine="us"] .card-more-btn { border-radius: 0; border-color: #070B12; color: #070B12; font-size: 20px; }
:root[data-machine="us"] .card-more { border-radius: 0; font: 400 20px/1.3 var(--font-vt); }
:root[data-machine="us"] .deck-count { font: 400 20px/1.2 var(--font-vt); color: #3DFF7A; }
:root[data-machine="us"] .deck .card-face:nth-child(1) { transform: translate(8px, -8px); }
:root[data-machine="us"] .deck .card-face:nth-child(2) { transform: translate(4px, -4px); }
:root[data-machine="us"] .deck .card-face:nth-child(3) { transform: none; }
:root[data-machine="us"] .deck-hint { font: 400 20px/1.2 var(--font-vt); color: #F2F0E6; }
:root[data-machine="us"] .amida-rail { stroke: #CBDCE6; stroke-width: 4; stroke-linecap: square; stroke-dasharray: none; }
:root[data-machine="us"] .amida-path { stroke: #FF3B30; stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="us"] .amida-start { border-radius: 0; background: #0F6B3C; color: #F2F0E6; border: 4px solid #F2F0E6; font: 400 16px/1 var(--font-px); }
:root[data-machine="us"] .amida-start[aria-pressed="true"] { background: #FFB000; color: #070B12; }
:root[data-machine="us"] .amida-goal { border-radius: 0; background: #0F6B3C; border: 4px solid #F2F0E6; color: #F2F0E6; font: 400 20px/1.15 var(--font-vt); }
:root[data-machine="us"] .amida-goal.is-open { background: #FFB000; color: #070B12; }
:root[data-machine="us"] .overlay { background: rgba(7, 11, 18, 0.92); }
:root[data-machine="us"] .us-result { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; justify-items: stretch;
padding: 16px 18px 12px; text-align: left; background: #070B12; border: 0; border-radius: 0; box-shadow: var(--us-px-chrome); animation: none; isolation: auto; overflow: visible; }
:root[data-machine="us"] .us-result > * { grid-column: 1; }
:root[data-machine="us"] .us-result > .rg-log { order: 1; }
:root[data-machine="us"] .us-result > .result-actions { order: 2; }
:root[data-machine="us"] .us-result > .defied { order: 3; }
:root[data-machine="us"] .us-result::before, :root[data-machine="us"] .us-result::after { content: none; }
:root[data-machine="us"] .us-locked { min-height: 48px; display: flex; align-items: center; margin: 0; padding: 0 60px 0 0; border: 0; background: none; box-shadow: none;
font: 400 16px/1.3 var(--font-px); color: #3DFF7A; letter-spacing: 0.02em; text-transform: uppercase; }
:root[data-machine="us"] .us-locked:focus { outline: none; }
:root[data-machine="us"] .us-result .result-emoji { position: absolute; top: 14px; right: 16px; font-size: 48px; line-height: 0; }
:root[data-machine="us"] .us-result .result-emoji img { width: 48px; height: 48px; }
:root[data-machine="us"] .us-result .result-text { min-height: 2.5em; margin: 0; font: 400 32px/1.25 var(--font-vt); color: #F2F0E6; text-shadow: none; animation: none; letter-spacing: 0; }
:root[data-machine="us"] .us-result .result-text.topic { font: 400 28px/1.25 var(--font-vt); }
:root[data-machine="us"] .us-result .rg-next { color: #FFB000; font-size: 24px; }
:root[data-machine="us"] .us-result .rg-log { justify-self: end; margin: -2px 0 0; font: 400 20px/1.2 var(--font-vt); color: #91A8BC; }
:root[data-machine="us"] .us-result .result-sub { margin: 0; font: 400 20px/1.25 var(--font-vt); color: #91A8BC; }
:root[data-machine="us"] .us-foot { display: none; }
:root[data-machine="us"] .us-result .result-actions { width: auto; margin: 6px -18px 0; padding: 10px 6px 4px; background: transparent; border: 0; border-top: 4px solid #3B4652; box-shadow: none; }
:root[data-machine="us"] .result-actions .btn { min-height: 48px; box-shadow: none; padding: 8px 10px 8px 46px; font: 400 16px/1.3 var(--font-px); text-transform: uppercase; }
:root[data-machine="us"] .result-actions > .btn-arcade { font-size: 24px; color: #FFD866; align-items: flex-start; text-align: left; padding-right: 10px; }
:root[data-machine="us"] .result-actions .btn-row { gap: 0; }
:root[data-machine="us"] .result-more-btn { font: 400 20px/1.2 var(--font-vt); color: #FFB000; }
:root[data-machine="us"] .us-fog { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #3B4652;
-webkit-mask-image: linear-gradient(90deg, transparent 0 var(--wipe, 0%), #000 var(--wipe, 0%)); mask-image: linear-gradient(90deg, transparent 0 var(--wipe, 0%), #000 var(--wipe, 0%));
animation: us-wipe 0.48s steps(6, end) 0.05s both; }
@property --wipe { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes us-wipe { from { --wipe: 0%; } to { --wipe: 100%; } }
:root[data-machine="us"] .us-wiper { display: none; }
:root[data-machine="us"] .result-below { background: #070B12; border: 0; border-radius: 0; }
html:root[data-machine="us"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="us"] .result-below .store-link { font-size: 16px; min-height: 48px; }
html:root[data-machine="us"] .panel .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="us"] .defied { color: #91A8BC; font: 400 20px/1.25 var(--font-vt); }
:root[data-machine="us"] :is(.row-text, .row-meta, .field label, .toggle, .confirm, .edit-item) { font-family: var(--font-vt); font-weight: 400; }
:root[data-machine="us"] :is(.row-text, .field label, .toggle, .edit-item) { font-size: 24px; }
:root[data-machine="us"] .row-meta { font-size: 20px; color: #91A8BC; }
:root[data-machine="us"] :is(.row, .seg, .confirm, .toast) { box-shadow: var(--us-px-chrome); }
:root[data-machine="us"] .settings h2 { font: 400 24px/1.3 var(--font-px); color: #FFB000; text-transform: uppercase; }
:root[data-machine="us"] .seg button { font: 400 16px/1.2 var(--font-px); text-transform: uppercase; }
:root[data-machine="us"] .seg button[aria-selected="true"] { background: #F2F0E6; color: #070B12; }
:root[data-machine="us"] .toggle input:checked + .switch { background: #FFB000; }
:root[data-machine="us"] .toast { border: 0; background: #070B12; font: 400 24px/1.25 var(--font-vt); }
:root[data-machine="us"] :is(.input, .icon-btn) { border: 2px solid #CBDCE6; font-size: 24px; }
:root[data-machine="us"] .btn-method.is-rec { margin: 30px 4px 4px; }
:root[data-machine="us"] .tn-tag { max-width: 100%; }
:root[data-machine="us"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #F2F0E6; color: #070B12; border-color: #F2F0E6; box-shadow: none; }
:root[data-machine="us"][data-motion="reduce"] :is(.us-rain, .us-cursor) { animation: none; }
:root[data-machine="us"][data-motion="reduce"] .us-head::after { animation: none; }
:root[data-machine="us"][data-motion="reduce"] .us-fog { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
:root[data-machine="us"]:not([data-motion="full"]) :is(.us-rain, .us-cursor) { animation: none; }
:root[data-machine="us"]:not([data-motion="full"]) .us-head::after { animation: none; }
:root[data-machine="us"]:not([data-motion="full"]) .us-fog { animation: none; display: none; }
}
@media (max-width: 479px) {
:root[data-machine="us"] .us-head > .us-term { margin-top: 4px; }
:root[data-machine="us"] .plaque.us-crossing { margin-top: 8px; }
:root[data-machine="us"] .us-head > .rg-start { margin-top: 8px; }
}
@media (min-width: 1100px) {
:root[data-machine="us"] .stage { padding-top: 76px; }
:root[data-machine="us"] .stage::before { top: 14px; height: 50px; font-size: 28px; }
:root[data-machine="us"] main.app { row-gap: 10px; }
:root[data-machine="us"] .us-head > .us-diner { display: none; }
:root[data-machine="us"] .us-head > .us-crossing { margin-top: 10px; }
:root[data-machine="us"] .us-head > .us-sign { margin: 10px 4px 40px; }
:root[data-machine="us"] .us-posts { height: 36px; }
:root[data-machine="us"] .us-head > .us-term { margin-top: 2px; }
:root[data-machine="us"] .us-head > .rg-start { margin-top: 2px; gap: 0; }
:root[data-machine="us"] .home-question { margin-top: 0; }
:root[data-machine="us"] .tile { min-height: 56px; padding-block: 4px; }
}
@media (min-width: 1200px) {
:root[data-machine="us"] .us-head > .us-crossing { display: none; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="us"] .stage { padding-top: 70px; }
:root[data-machine="us"] .stage::before { height: 44px; font-size: 24px; }
:root[data-machine="us"] .us-head .rg-game { display: none; }
:root[data-machine="us"] .us-head > .us-sign { margin-bottom: 32px; }
:root[data-machine="us"] .us-posts { height: 28px; }
:root[data-machine="us"] .us-head > .us-term { display: none; }
:root[data-machine="us"] .us-head > .us-sign { padding-block: 10px; }
:root[data-machine="us"] .us-sign .home-title { font-size: 28px; }
:root[data-machine="us"] .tile { min-height: 52px; padding-block: 2px; }
:root[data-machine="us"] .tiles { padding-block: 12px 8px; }
}
:root[data-machine="us"] .card-area + div > .btn-row { flex-direction: column; gap: 10px; }
:root[data-machine="us"] .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="us"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="us"] .tile { min-height: 48px; padding-block: 0; }
}
:root[data-machine="us"] .rg-press { padding: 6px 18px 6px 14px; background: #0F6B3C; color: #F2F0E6; box-shadow: inset 0 0 0 4px #F2F0E6, 4px 4px 0 0 #3B4652; }
:root[data-machine="us"] .rg-press.is-wait { animation: none; }
:root[data-machine="us"] .rg-press::before { visibility: visible; color: #FFB000; }
:root[data-machine="us"] .rg-press.is-wait::before { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="us"][data-motion="reduce"] .rg-press.is-wait::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="us"]:not([data-motion="full"]) .rg-press.is-wait::before { animation: none; } }
@media (max-width: 479px) {
:root[data-machine="us"] .us-head > :is(.us-diner, .us-term) { display: none; }
:root[data-machine="us"] .us-head > .us-sign { margin-top: 8px; }
:root[data-machine="us"] .plaque.us-crossing { margin-top: 0; }
:root[data-machine="us"] .us-head > .rg-start { gap: 6px; }
}
@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; }
}
:root[data-theme="us"] .us-wide { display: none; }
@media (min-width: 1200px) {
:root[data-theme="us"] body::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
linear-gradient(#FF3B30, #FF3B30), linear-gradient(#FF3B30, #FF3B30),
linear-gradient(#FFB000, #FFB000), linear-gradient(#FFB000, #FFB000),
repeating-linear-gradient(90deg, #F2F0E6 0 24px, transparent 24px 56px),
linear-gradient(#3B4652, #3B4652),
linear-gradient(#FFB000, #FFB000),
linear-gradient(#073A20, #073A20),
url("pixel/us/cab.png"),
url("pixel/us/skyline.png");
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 4px, 100% 40px, 100% 4px, 100% 28px, 81px 36px, 640px 240px;
background-position: left 18% bottom 28px, left calc(18% + 28px) bottom 28px, right 26% bottom 8px, right calc(26% - 28px) bottom 8px,
left 12px bottom 18px, left bottom, left bottom 40px, left bottom 44px, left 40% bottom 6px, left bottom 72px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
}
:root[data-theme="us"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
repeating-linear-gradient(90deg, #F2F0E6 0 24px, transparent 24px 56px),
linear-gradient(#3B4652, #3B4652),
linear-gradient(#FFB000, #FFB000),
linear-gradient(#073A20, #073A20),
url("pixel/us/skyline.png");
background-size: 100% 4px, 100% 40px, 100% 4px, 100% 28px, 640px 240px;
background-position: left 12px bottom 18px, left bottom, left bottom 40px, left bottom 44px, right -160px bottom 72px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
}
:root[data-theme="us"] .us-wide { display: block; position: fixed; top: var(--fx-top, 0px); bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; }
:root[data-theme="us"] .us-wide .wd-l { position: absolute; left: 0; top: 0; bottom: 0; width: var(--wide-under); }
:root[data-theme="us"] .us-wide .wd-r { position: absolute; right: 0; top: 0; bottom: 0; width: var(--wide-w); overflow: hidden; }
:root[data-theme="us"] .us-neon { position: absolute; left: 50%; top: max(10vh, 72px); width: 256px; height: 128px; translate: -50% 0;
display: grid; place-content: center; justify-items: center; gap: 8px; padding-bottom: 16px; box-sizing: border-box;
background: linear-gradient(#070B12, #070B12) 12px 14px / 232px 88px no-repeat; }
:root[data-theme="us"] .us-neon-frame { position: absolute; inset: 0; display: block; width: 256px; height: 128px; }
:root[data-theme="us"] .us-neon::before { content: "DINER"; content: "DINER" / ""; position: relative; font: 400 32px/1 "Silkscreen", monospace; color: #FFB000; letter-spacing: 0.06em;
text-shadow: 4px 4px 0 #FF3B30; }
:root[data-theme="us"] .us-neon::after { content: "OPEN 24 HRS"; content: "OPEN 24 HRS" / ""; position: relative; font: 400 16px/1 "Silkscreen", monospace; color: #F2F0E6; letter-spacing: 0.04em; }
:root[data-theme="us"] .us-neon-bf { position: absolute; z-index: 1; right: 14px; top: -46px; left: auto; width: 64px; height: auto; aspect-ratio: 1; translate: none; }
:root[data-theme="us"] .us-wide .wd-l::before { content: ""; position: absolute; left: 50%; top: calc(max(10vh, 72px) + 124px); bottom: 44px; width: 152px; translate: -50% 0;
border-left: 8px solid #5E6B78; border-right: 8px solid #5E6B78; }
:root[data-theme="us"] .us-wide .wd-l::after { content: "BUTTERFLY\A CROSSING"; content: "BUTTERFLY\A CROSSING" / ""; white-space: pre; position: absolute; left: 50%; top: max(calc(10vh + 290px), 46vh); translate: -50% 0;
padding: 10px 18px 10px 76px; background: url("themes/us/papilio-glaucus-open.svg") no-repeat 14px center / 52px 52px, #F2F0E6; color: #070B12;
font: 400 16px/1.5 "Silkscreen", monospace; letter-spacing: 0.02em; text-align: left;
box-shadow: inset 0 0 0 4px #070B12, 0 -4px 0 0 #F2F0E6, 0 4px 0 0 #F2F0E6, -4px 0 0 0 #F2F0E6, 4px 0 0 0 #F2F0E6, 8px 12px 0 4px #070B12; }
:root[data-theme="us"] .us-wsign { position: absolute; left: 50%; width: min(80%, 360px); translate: -50% 0; }
:root[data-theme="us"] .us-wsign-a { top: 9vh; }
:root[data-theme="us"] .us-wsign-b { top: max(calc(9vh + 250px), 50vh); width: min(72%, 320px); }
:root[data-theme="us"] .us-wsign-tab { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 -8px 18px; padding: 8px 12px 12px 14px;
background: #0F6B3C; color: #F2F0E6; border: 0; border-radius: 0;
box-shadow: inset 4px 0 0 #F2F0E6, inset -4px 0 0 #F2F0E6, inset 0 4px 0 #F2F0E6, 0 -4px 0 0 #0F6B3C, -4px 0 0 0 #0F6B3C, 4px 0 0 0 #0F6B3C;
font: 400 16px/1 "Silkscreen", "RYD US Sym", monospace; letter-spacing: 0.02em; }
:root[data-theme="us"] .us-wsign-arrow { display: block; width: 24px; height: 24px; transform: none; }
:root[data-theme="us"] .us-wsign-board { position: relative; z-index: 1; display: grid; gap: 2px; padding: 14px 18px 14px;
background: #0F6B3C; border: 0; border-radius: 0; box-shadow: inset 0 0 0 4px #F2F0E6, 0 -4px 0 0 #0F6B3C, 0 4px 0 0 #0F6B3C, -4px 0 0 0 #0F6B3C, 4px 0 0 0 #0F6B3C, 8px 12px 0 4px #070B12; }
:root[data-theme="us"] .us-x { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; margin: 0;
color: #F2F0E6; font: 400 24px/1.2 "VT323", "RYD US Sym", monospace; }
:root[data-theme="us"] .us-x-bf { display: block; width: 28px; height: 28px; visibility: hidden; }
:root[data-theme="us"] .us-x-town { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="us"] .us-x-mi { white-space: nowrap; text-align: right; }
:root[data-theme="us"] .us-x-mi small { font-size: 18px; opacity: 1; color: #CBDCE6; }
:root[data-theme="us"] .us-x.is-tonight { color: #FFD866; }
:root[data-theme="us"] .us-x.is-tonight .us-x-bf { visibility: visible; }
:root[data-theme="us"] .us-wsign-posts { height: 100vh; margin: 0 24% 0; border-left: 12px solid #5E6B78; border-right: 12px solid #5E6B78; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
:root[data-theme="us"] .us-wsign, :root[data-theme="us"] .us-wsign-b { width: min(90%, 340px); }
:root[data-theme="us"] .us-wsign-board { padding: 12px 14px; }
:root[data-theme="us"] .us-x { font-size: 20px; column-gap: 6px; grid-template-columns: 24px minmax(0, 1fr) auto; }
:root[data-theme="us"] .us-x-bf { width: 24px; height: 24px; }
:root[data-theme="us"] .us-x-mi small { font-size: 16px; }
}