:root[data-theme="jp"] {
--bg-mode: css;
--bg-top: #0C0620; --bg-bottom: #0C0620; --stripe-opacity: 0;
--ink: #2A1E4A; --night: #0C0620; --cream: #FFF3E0; --paper: #FFF3E0;
--cabinet: #FF5A36; --cabinet-dark: #8A2A18; --mustard: #FFC857; --mustard-dark: #8A6412;
--teal: #0C0620; --teal-dark: #0C0620; --led: #5FD9A8; --led-red: #FFC857;
--lamp-0: #FFC857; --lamp-1: #FFC857; --lamp-2: #FFC857; --lamp-3: #FFC857; --lamp-off: #6B4E93;
--dark-face: #0C0620; --dark-edge: #FFF3E0; --tile-base: #0C0620; --tile-stripe: #6B4E93; --tile-text: #FFF3E0; --amida-lamp: #FFC857;
--ink-dim: #CBB9DE; --line: #6B4E93; --focus: #FFC857; --board: #0C0620; --momo: #F2A8B2; --accent-3: #5FD9A8;
--font-dot: "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", monospace;
--font-title: var(--font-dot); --font-rounded: var(--font-dot); --font-body: var(--font-dot); --font-led: var(--font-dot); --font-brush: var(--font-dot);
--wheel-count: 4; --wheel-font: "DotGothic16", monospace; --wheel-weight: 400;
--wheel-0: #FFF3E0; --wheel-0-text: #2A1E4A;
--wheel-1: #221652; --wheel-1-text: #FFF3E0;
--wheel-2: #FFC857; --wheel-2-text: #2A1E4A;
--wheel-3: #5FD9A8; --wheel-3-text: #2A1E4A;
--wheel-line: #0C0620; --wheel-rim: #FFF3E0; --wheel-rim-bg: #0C0620;
--wheel-win: #F2A8B2; --wheel-win-text: #2A1E4A; --wheel-win-edge: #FF5A36; --wheel-win-mark: "★ "; --wheel-dim: rgba(12, 6, 32, 0.6);
--wheel-hub-bg: #0C0620; --wheel-hub-ring: #FFF3E0; --wheel-hub-ink: #FFC857; --wheel-hub-font: "DotGothic16", monospace;
--wheel-pointer: #FF5A36; --wheel-pointer-edge: #0C0620;
--wheel-lamps: 0; --wheel-pointer-blur: 0; --wheel-rim-bg: transparent;
--bf-veil: rgba(12, 6, 32, 0.9); --bf-ink: #FFF3E0;
}
:root[data-machine="jp"] {
--rg-font: "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;
--rg-font-title: var(--rg-font);
--rg-fs: 16px; --rg-fs-m: 24px; --rg-fs-l: 32px; --rg-lh: 1.5; --rg-track: 0.04em;
--rg-dot: 3px;
--rg-screen: #0C0620; --rg-win: #0C0620; --rg-ink: #FFF3E0; --rg-dim: #CBB9DE;
--rg-line: #FFF3E0; --rg-line2: #FFF3E0;
--rg-hi: #FFC857; --rg-cur: #FFC857; --rg-btn: #FFC857; --rg-btn-ink: #0C0620; --rg-shade: #FF5A36;
--rg-win-pad: 16px 18px;
}
:root[data-machine="jp"] body { background: #0C0620 !important; }
:root[data-machine="jp"] :is(.jp-shoji, .jp-rim) { display: none; }
:root[data-machine="jp"] .jp-scan { inset: 0; z-index: 30; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); }
@media (min-width: 640px) {
:root[data-machine="jp"] .stage { background: #0C0620; border-radius: 0; box-shadow: 0 0 0 4px #0C0620, 0 0 0 8px #6B4E93, 0 0 0 12px #0C0620, 0 0 0 14px #CBB9DE; }
:root[data-machine="jp"] .stage::before, :root[data-machine="jp"] .stage::after { display: none; }
}
:root[data-machine="jp"] :focus-visible { outline: 3px solid #FFC857; outline-offset: 3px; box-shadow: 0 0 0 3px #0C0620; }
:root[data-machine="jp"] .jp-head { position: relative; gap: 12px; }
:root[data-machine="jp"] .jp-scene { position: relative; height: 304px; margin: -16px -18px 0; overflow: hidden;
background: linear-gradient(180deg,
#0C0620 0 88px, #160E38 88px 128px, #221652 128px 160px, #3B1A5E 160px 184px, #7A2AA6 184px 208px,
#FF3D8E 208px 232px, #FF7A3D 232px 248px, #1B1048 248px); }
:root[data-machine="jp"] .jp-sun { position: absolute; left: 50%; top: 128px; width: 192px; height: 192px; margin-left: 4px; border-radius: 0;
background: linear-gradient(180deg, #FFC857 0 40px, #FF7A3D 40px 88px, #FF3D8E 88px);
clip-path: polygon(62.5% 0%, 62.5% 4.167%, 75% 4.167%, 75% 8.333%, 79.167% 8.333%, 79.167% 12.5%, 83.333% 12.5%, 83.333% 16.667%, 87.5% 16.667%, 87.5% 20.833%, 91.667% 20.833%, 91.667% 25%, 95.833% 25%, 95.833% 37.5%, 100% 37.5%, 100% 62.5%, 95.833% 62.5%, 95.833% 75%, 91.667% 75%, 91.667% 79.167%, 87.5% 79.167%, 87.5% 83.333%, 83.333% 83.333%, 83.333% 87.5%, 79.167% 87.5%, 79.167% 91.667%, 75% 91.667%, 75% 95.833%, 62.5% 95.833%, 62.5% 100%, 37.5% 100%, 37.5% 95.833%, 25% 95.833%, 25% 91.667%, 20.833% 91.667%, 20.833% 87.5%, 16.667% 87.5%, 16.667% 83.333%, 12.5% 83.333%, 12.5% 79.167%, 8.333% 79.167%, 8.333% 75%, 4.167% 75%, 4.167% 62.5%, 0% 62.5%, 0% 37.5%, 4.167% 37.5%, 4.167% 25%, 8.333% 25%, 8.333% 20.833%, 12.5% 20.833%, 12.5% 16.667%, 16.667% 16.667%, 16.667% 12.5%, 20.833% 12.5%, 20.833% 8.333%, 25% 8.333%, 25% 4.167%, 37.5% 4.167%, 37.5% 0%); }
:root[data-machine="jp"] .jp-sun::after { content: ""; position: absolute; inset: 0; border-radius: 0;
background: linear-gradient(180deg, transparent 96px, #3B1A5E 96px 100px, transparent 100px 112px, #3B1A5E 112px 120px, transparent 120px 128px, #3B1A5E 128px 140px, transparent 140px 152px, #3B1A5E 152px 168px, transparent 168px 176px, #3B1A5E 176px); }
:root[data-machine="jp"] .jp-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; image-rendering: pixelated;
background: url("pixel/jp/seigaiha-tile.png") repeat left bottom / 40px 20px, #1B1048; }
:root[data-machine="jp"] .jp-fireworks { position: absolute; right: 8px; top: 82px; width: calc(var(--rg-w, 180px) / 2); height: calc(var(--rg-h, 92px) / 2); opacity: 1; }
:root[data-machine="jp"] .jp-town { position: absolute; left: 50%; bottom: 8px; width: var(--rg-w, 392px); height: var(--rg-h, auto); max-width: none; transform: translateX(-50%); }
:root[data-machine="jp"] .jp-sign { position: absolute; left: max(10px, calc(50% - 190px)); top: 132px; margin: 0; padding: 6px 10px 6px; display: grid; justify-items: center; gap: 2px;
background: #0C0620; border: 3px solid #FF5A36; border-radius: 0; box-shadow: 3px 3px 0 #8A2A18; animation: none; }
:root[data-machine="jp"] .jp-sign b { font: 400 24px/1 var(--font-dot); color: #FF5A36; letter-spacing: 0.04em; white-space: nowrap; text-shadow: none; }
:root[data-machine="jp"] .jp-sign small { font: 400 16px/1 var(--font-dot); color: #5FD9A8; letter-spacing: 0.08em; text-shadow: none; }
:root[data-machine="jp"] .jp-yu { position: absolute; left: calc(50% + 16px); bottom: 50px; font: 400 32px/1 var(--font-dot); color: #5FD9A8; text-shadow: none; animation: none; }
:root[data-machine="jp"] .jp-onsen { position: absolute; left: calc(50% + 14px); bottom: 26px; font: 400 16px/1 var(--font-dot); color: #FF5A36; letter-spacing: 0.08em; text-shadow: none; }
:root[data-machine="jp"] .jp-head .rg-title { position: absolute; z-index: 2; left: 0; right: 0; top: -2px; gap: 6px; pointer-events: none; }
:root[data-machine="jp"] .jp-head .rg-proto { font-size: 16px; color: #CBB9DE; }
:root[data-machine="jp"] .jp-head .rg-game { font-size: 32px; color: #FFC857; text-shadow: none; letter-spacing: 0.06em; }
:root[data-machine="jp"] .jp-osd { display: none; }
:root[data-machine="jp"] .jp-head > .jp-scene { order: 0; }
:root[data-machine="jp"] .jp-head > .rg-start { order: 1; display: grid; gap: 6px; justify-items: center; margin-top: 2px; }
:root[data-machine="jp"] .jp-head > .home-line { order: 2; }
:root[data-machine="jp"] .rg-press { font-size: 16px; color: #FFF3E0; cursor: pointer; letter-spacing: 0.12em; }
:root[data-machine="jp"] .rg-cont { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: #CBB9DE; }
:root[data-machine="jp"] .rg-cont-k::before { content: "◆ "; color: #6B4E93; }
:root[data-machine="jp"] .home-line { margin: 0; font: 400 16px/1.75 var(--font-dot); color: #FFF3E0; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
:root[data-machine="jp"] .plaque { display: none; }
:root[data-machine="jp"] .jp-foot-note { display: none; }
:root[data-machine="jp"] .home-foot { font: 400 16px/1.75 var(--font-dot); color: #CBB9DE; }
:root[data-machine="jp"] .today-card { border-color: #FFF3E0; background: #0C0620; color: #FFF3E0; }
:root[data-machine="jp"] .today-label { font: 400 16px/1.2 var(--font-dot); letter-spacing: 0.08em; color: #5FD9A8; text-transform: none; opacity: 1; }
:root[data-machine="jp"] .today-text { font: 400 24px/1.3 var(--font-dot); }
:root[data-machine="jp"] .home-question { position: relative; z-index: 2; justify-self: start; align-self: flex-start; margin: 0 0 -38px 18px; padding: 0 10px;
background: #0C0620; font: 400 24px/1.25 var(--font-dot); color: #FFF3E0; letter-spacing: 0.04em; }
:root[data-machine="jp"] .tiles { padding: 24px 10px 10px; gap: 0 6px; }
:root[data-machine="jp"] .tile { min-height: 104px; padding: 10px 6px 8px 34px; }
:root[data-machine="jp"] .tile::before { left: 10px; }
:root[data-machine="jp"] .tile-emoji img { width: 48px; height: 48px; }
:root[data-machine="jp"] .tile-tag { top: 10px; left: 10px; color: #CBB9DE; font-size: 16px; }
:root[data-machine="jp"] .tile:is(:hover, :focus-visible, .is-cur) .tile-tag { color: #5FD9A8; }
:root[data-machine="jp"] .tile-title { font-size: 24px; letter-spacing: 0.08em; }
:root[data-machine="jp"] .btn { border-width: 3px; box-shadow: inset 0 0 0 3px var(--rg-win), inset 0 0 0 6px var(--edge); padding: 10px 14px 10px 40px; font-size: 24px; }
:root[data-machine="jp"] .btn-arcade { box-shadow: none; }
:root[data-machine="jp"] :is(.btn-row, .settings) .btn { font-size: 16px; min-height: 56px; }
:root[data-machine="jp"] .btn-sub { font-size: 16px; color: #5FD9A8; }
:root[data-machine="jp"] .home > .btn-row { gap: 0; padding: 6px; border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background: #0C0620; }
:root[data-machine="jp"] .home > .btn-row > .btn { flex: 1 1 auto; min-height: 52px; padding: 8px 8px 8px 34px; border: 0; box-shadow: none; background: transparent; white-space: nowrap; }
:root[data-machine="jp"] .home > .btn-row > .btn::before { left: 12px; }
:root[data-machine="jp"] .home > .btn-row > .btn:is(:hover, :focus-visible) .btn-label { color: #FFC857; }
:root[data-machine="jp"] .home > div:has(> .chips-scroll) { position: relative; margin-top: 14px; padding: 28px 14px 14px; gap: 12px !important;
border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background: #0C0620; }
:root[data-machine="jp"] .home > div > .section-title { position: absolute; top: -17px; left: 14px; max-width: calc(100% - 28px); margin: 0; padding: 0 10px;
background: #0C0620; font: 400 24px/1.25 var(--font-dot); color: #FFF3E0; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-machine="jp"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover)::before,
:root[data-machine="jp"] .result-actions:has(.btn:hover) .btn.is-cur:not(:hover)::before { visibility: hidden; }
:root[data-machine="jp"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover) .tile-title { color: #FFF3E0; }
:root[data-machine="jp"] .tiles:has(.tile:hover) .tile.is-cur:not(:hover) .tile-tag { color: #CBB9DE; }
:root[data-machine="jp"] .led { font-size: 24px; text-align: left; padding: 14px 18px; }
:root[data-machine="jp"] .draw .led, :root[data-machine="jp"] .draw-stage .led { align-self: stretch; width: 100%; max-width: none; font-size: 16px; line-height: 1.5; text-align: left; padding: 14px 18px; }
:root[data-machine="jp"] .led .led-ico { width: 48px; height: 48px; vertical-align: -14px; margin-right: 10px; }
:root[data-machine="jp"] .tn-tag { background: #0C0620; border: 3px solid #6B4E93; border-radius: 0; color: #FFF3E0; font: 400 16px/1.5 var(--font-dot); letter-spacing: 0.04em; }
:root[data-machine="jp"] .tn-place { color: #5FD9A8; font-weight: 400; }
html:root[data-machine="jp"] .tn-lead { white-space: nowrap; }
:root[data-machine="jp"] .section-title { font-size: 24px; color: #FFC857; }
:root[data-machine="jp"] .category > div:is(:has(> .chips-scroll), :has(> .btn-grid)) {
position: relative; margin-top: 16px; padding: 28px 14px 14px; gap: 12px !important;
border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background: #0C0620; }
:root[data-machine="jp"] .category > div > .section-title,
:root[data-machine="jp"] :is(.category, .draw, .settings, .editor) .panel h2 {
position: absolute; z-index: 2; top: -17px; left: 14px; max-width: calc(100% - 28px); margin: 0; padding: 0 10px;
background: #0C0620; font: 400 24px/1.25 var(--font-dot) !important; color: #FFF3E0 !important; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-machine="jp"] :is(.category, .draw, .settings, .editor) .panel { position: relative; margin-top: 16px; }
:root[data-machine="jp"] :is(.category, .draw, .settings, .editor) .panel:has(h2) { padding-top: 22px; }
:root[data-machine="jp"] .category > .quickspin { margin-top: 4px; }
:root[data-machine="jp"] .cat-line { font: 400 16px/1.6 var(--font-dot); color: #CBB9DE; margin: 0; }
:root[data-machine="jp"] .btn-method { display: grid; grid-template-columns: 1fr; align-content: start; justify-items: start; row-gap: 4px; text-align: left; padding: 12px 8px 12px 32px; min-height: 112px; }
:root[data-machine="jp"] .btn-method::before { left: 10px; top: 50px; }
:root[data-machine="jp"] .btn-method .btn-tag { padding: 0 4px; background: #5FD9A8; color: #0C0620; font: 400 16px/1.25 var(--font-dot); margin: 0; }
:root[data-machine="jp"] .btn-method .btn-label { font-size: 24px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
:root[data-machine="jp"] .btn-method .btn-flavor { font-size: 16px; line-height: 1.4; color: #CBB9DE; }
:root[data-machine="jp"] .btn-method { box-shadow: none; }
:root[data-machine="jp"] .btn-method.is-rec { box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; }
:root[data-machine="jp"] .btn-method:is(:hover, :focus-visible, .is-cur) .btn-label { color: #FFC857; }
:root[data-machine="jp"] .btn-grid .btn { font-size: 24px; }
:root[data-machine="jp"] .chip { border-width: 3px; font-size: 16px; padding: 6px 12px; }
:root[data-machine="jp"] .chip[aria-pressed="true"]:not(.chip-cand) { background: #FFF3E0; color: #0C0620; }
:root[data-machine="jp"] .panel h2 { font: 400 24px/1.25 var(--font-dot) !important; color: #FFC857 !important; }
:root[data-machine="jp"] .linkish { color: #FFC857; font-size: 16px; }
:root[data-machine="jp"] :is(.note, .picked-note, .small, .muted) { font-family: var(--font-dot); color: #CBB9DE; }
:root[data-machine="jp"] :is(.note, .picked-note) { font-size: 16px; }
:root[data-machine="jp"] .wheel-wrap { isolation: isolate; width: min(calc(100% - 32px), 392px, 56vh); margin: 16px auto; }
:root[data-machine="jp"] .wheel-wrap::before, :root[data-machine="jp"] .wheel-wrap::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
:root[data-machine="jp"] .wheel-wrap::before { inset: -16px; border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0;
background: linear-gradient(180deg, #0C0620 0 28%, #160E38 28% 38%, #221652 38% 48%, #3B1A5E 48% 56%, #7A2AA6 56% 64%, #FF3D8E 64% 72%, #FF7A3D 72% 78%, #1B1048 78%); }
:root[data-machine="jp"] .wheel-wrap::after { left: -7px; right: -7px; bottom: -7px; height: calc(22% + 9px); image-rendering: crisp-edges; image-rendering: pixelated;
background: linear-gradient(180deg, #FFC857 0 4px, transparent 4px), url("pixel/jp/seigaiha-tile.png") repeat left 4px / 40px 20px, #1B1048; }
:root[data-machine="jp"] .draw-stage { gap: 16px; }
html:root[data-machine="jp"] .picked-note { margin: 0; font-size: 16px; letter-spacing: 0.04em; color: #CBB9DE; }
:root[data-machine="jp"] .btn:disabled { opacity: 1; --face: #0C0620; --edge: #6B4E93; --fg: #CBB9DE; box-shadow: none; cursor: default; }
:root[data-machine="jp"] .btn:disabled::before { content: none; }
:root[data-machine="jp"] .draw-stage .btn-row > .btn { flex: 1 1 auto; padding: 10px 10px 10px 32px; white-space: nowrap; }
:root[data-machine="jp"] .draw-stage .btn-row > .btn::before { left: 10px; }
:root[data-machine="jp"] .deck .card-face:nth-child(1) { transform: translate(8px, 8px); }
:root[data-machine="jp"] .deck .card-face:nth-child(2) { transform: translate(4px, 4px); }
:root[data-machine="jp"] .deck .card-face:nth-child(3) { transform: none; }
:root[data-machine="jp"] .deck .card-face { box-shadow: none; }
:root[data-machine="jp"] .deck .card-face:nth-child(1) { background: #6B4E93; }
:root[data-machine="jp"] .deck .card-face:nth-child(2) { background: #CBB9DE; }
:root[data-machine="jp"] .deck-hint { font: 400 16px/1.25 var(--font-dot); color: #FFF3E0; }
:root[data-machine="jp"] .deck-count { font: 400 16px/1.25 var(--font-dot); color: #5FD9A8; }
:root[data-machine="jp"] .amida-starts { counter-reset: rg-am; }
:root[data-machine="jp"] .draw-stage div:has(> .amida-starts) { padding: 16px 14px; gap: 8px !important; border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background: #0C0620; }
:root[data-machine="jp"] .amida-start { counter-increment: rg-am; font-size: 0 !important; }
:root[data-machine="jp"] .amida-start::before { content: counter(rg-am); font: 400 24px/1 var(--font-dot); }
:root[data-machine="jp"] .die { background: #FFF3E0; border-radius: 0; box-shadow: 6px 6px 0 #6B4E93; }
:root[data-machine="jp"] .pip, :root[data-machine="jp"] .pip.one { border-radius: 0; background: #FF5A36; }
:root[data-machine="jp"] .dice-table li { border-radius: 0; font: 400 16px/1.5 var(--font-dot); }
:root[data-machine="jp"] .dice-table li.is-landed { background: #FFC857; color: #0C0620; }
:root[data-machine="jp"] .card-face { border-radius: 0; box-shadow: 6px 6px 0 #6B4E93; }
:root[data-machine="jp"] .card-back { background: #0C0620; }
:root[data-machine="jp"] .card-back::before { inset: 18px; border-radius: 0; background: repeating-linear-gradient(0deg, #3B1A5E 0 4px, transparent 4px 16px), repeating-linear-gradient(90deg, #3B1A5E 0 4px, transparent 4px 16px); }
:root[data-machine="jp"] .card-back::after { inset: 8px; border-radius: 0; border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; }
:root[data-machine="jp"] .card-emblem { background: #0C0620; border-radius: 0; box-shadow: 0 0 0 3px #FFC857; }
:root[data-machine="jp"] .card-emblem b { font: 400 64px/1 var(--font-dot); color: #FFC857; }
:root[data-machine="jp"] .card-emblem i { font: 400 16px/1 var(--font-dot); color: #5FD9A8; }
:root[data-machine="jp"] .card-front { background: #FFF3E0; color: #0C0620; }
:root[data-machine="jp"] .card-front::after { inset: 8px; border-radius: 0; border: 3px solid #0C0620; }
:root[data-machine="jp"] .card-text { font: 400 clamp(24px, 7vw, 32px)/1.3 var(--font-dot); }
:root[data-machine="jp"] :is(.card-kicker, .card-more-btn, .deck-count, .card-more small) { font-family: var(--font-dot); font-weight: 400; }
:root[data-machine="jp"] .card-more-btn { border-radius: 0; }
:root[data-machine="jp"] .card-more { border-radius: 0; font: 400 16px/1.5 var(--font-dot); }
:root[data-machine="jp"] .amida-rail { stroke: #FFF3E0; stroke-width: 3; stroke-linecap: square; }
:root[data-machine="jp"] .amida-path { stroke-linecap: square; stroke-linejoin: miter; filter: none; }
:root[data-machine="jp"] .amida-start { border-radius: 0; background: #FFC857; color: #0C0620; border: 3px solid #FFF3E0; font: 400 16px/1 var(--font-dot); }
:root[data-machine="jp"] .amida-start[aria-pressed="true"] { background: #FF5A36; color: #0C0620; }
:root[data-machine="jp"] .amida-start:disabled:not([aria-pressed="true"]) { opacity: 1; background: #0C0620; border-color: #6B4E93; color: #CBB9DE; }
:root[data-machine="jp"] .amida-goal { background: #0C0620; border: 3px solid #FFF3E0; border-radius: 0; font: 400 16px/1.25 var(--font-dot); }
:root[data-machine="jp"] .amida-goal.is-open { background: #FFC857; color: #0C0620; font-size: 16px; }
:root[data-machine="jp"] .overlay { background: rgba(12, 6, 32, 0.9); }
:root[data-machine="jp"] .jp-result { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 12px; }
:root[data-machine="jp"] .jp-pa { display: none; }
:root[data-machine="jp"] .jp-welcome { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px 12px; justify-items: start; text-align: left;
padding: 16px 18px 14px; background: #0C0620; border: 3px solid #FFF3E0; border-radius: 0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background-image: none; }
:root[data-machine="jp"] .jp-kan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-machine="jp"] .jp-welcome .rg-say-head { grid-column: 1; grid-row: 1; margin: 0; font: 400 16px/1.5 var(--font-dot); color: #5FD9A8; }
:root[data-machine="jp"] .jp-welcome .result-emoji { grid-column: 2; grid-row: 1 / span 2; font-size: 48px; }
:root[data-machine="jp"] .jp-welcome .result-emoji img { width: 48px; height: 48px; }
:root[data-machine="jp"] .jp-say { grid-column: 1 / -1; min-height: 3em; margin: 0; font: 400 24px/1.5 var(--font-dot); color: #FFF3E0; text-shadow: none; letter-spacing: 0.04em; }
:root[data-machine="jp"] .jp-say span { animation: none; }
:root[data-machine="jp"] :is(.jp-party, .jp-fate, .jp-seal, .jp-mgr) { display: none; }
:root[data-machine="jp"] .jp-welcome .rg-log { grid-column: 1 / -1; justify-self: end; font-size: 16px; color: #CBB9DE; }
:root[data-machine="jp"] .jp-result .result-sub { color: #CBB9DE; }
:root[data-machine="jp"] .result-actions { padding: 12px 10px; }
:root[data-machine="jp"] .result-actions .btn { font-size: 24px; padding-left: 40px; box-shadow: none; }
:root[data-machine="jp"] .result-actions .btn-row .btn { font-size: 24px; min-height: 52px; }
:root[data-machine="jp"] .result-more-btn { font: 400 16px/1 var(--font-dot); color: #FFC857; }
:root[data-machine="jp"] .result-below { background: #0C0620; }
html:root[data-machine="jp"] .result-below .promo-line { font-size: 16px; line-height: 1.5; }
html:root[data-machine="jp"] .result-below .store-link { font-size: 16px; min-height: 48px; }
:root[data-machine="jp"] .foot .nomoney, :root[data-machine="jp"] .result-below .nomoney { color: #5FD9A8; font-family: var(--font-dot); font-weight: 400; }
:root[data-machine="jp"] .foot details { background: #0C0620; border-color: #6B4E93; }
:root[data-machine="jp"] .foot summary { color: #FFC857; }
:root[data-machine="jp"] .toast { border-color: #FFF3E0; }
:root[data-machine="jp"] :is(.row-text, .row-meta, .settings, .field label, .toggle, .confirm, .edit-item) { font-family: var(--font-dot); font-weight: 400; }
:root[data-machine="jp"] .row-text { font-size: 16px; }
:root[data-machine="jp"] main.app .small { font-size: 16px; line-height: 1.6; }
:root[data-machine="jp"] main.app .muted { color: #CBB9DE; }
:root[data-machine="jp"] .settings { gap: 20px; }
:root[data-machine="jp"] .settings .panel { font-size: 16px; line-height: 1.6; }
:root[data-machine="jp"] .settings h3 { margin: 14px 0 6px !important; font: 400 16px/1.5 var(--font-dot) !important; color: #FFC857; letter-spacing: 0.08em; }
:root[data-machine="jp"] .settings h3::before { content: "◆ "; color: #6B4E93; }
:root[data-machine="jp"] .settings .notice-list { gap: 8px; padding-left: 2em; }
:root[data-machine="jp"] .settings .notice-list li { font-size: 16px; line-height: 1.6; }
:root[data-machine="jp"] .settings .notice-list li::marker { color: #FFC857; font-family: var(--font-dot); }
:root[data-machine="jp"] .toggle { min-height: 52px; font-size: 16px; }
:root[data-machine="jp"] .toggle .switch { width: 72px; height: 36px; border: 3px solid #FFF3E0; border-radius: 0; background: #0C0620; transition: none; }
:root[data-machine="jp"] .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: #CBB9DE; font: 400 16px/1 var(--font-dot); letter-spacing: 0.08em; transform: none; transition: none; }
:root[data-machine="jp"] .toggle input:checked + .switch { background: #FFC857; border-color: #FFC857; }
:root[data-machine="jp"] .toggle input:checked + .switch::after { content: "ON"; color: #0C0620; background: transparent; transform: none; }
:root[data-machine="jp"] .toggle input:focus-visible + .switch { outline: 3px solid #5FD9A8; outline-offset: 3px; }
html:root[data-machine="jp"] .settings .pill.fx-switch.fx-switch-wide { height: 52px; min-height: 52px; padding: 0 12px 0 14px; gap: 10px; color: #FFF3E0; font: 400 16px/1 var(--font-dot); }
html:root[data-machine="jp"] .settings .pill.fx-switch.fx-switch-wide::before { background: #0C0620; border: 3px solid #FFF3E0; -webkit-mask: none; mask: none; }
html:root[data-machine="jp"] .settings .pill.fx-switch.fx-switch-wide:hover::before { background: #221652; }
html:root[data-machine="jp"] .settings .fx-switch-wide .fx-switch-state { min-width: 56px; padding: 6px 6px; border: 3px solid #FFF3E0; background: #0C0620; color: #CBB9DE; font: 400 16px/1 var(--font-dot); }
html:root[data-machine="jp"] .settings .fx-switch-wide[aria-pressed="true"] .fx-switch-state { background: #FFC857; border-color: #FFC857; color: #0C0620; }
html:root[data-machine="jp"] .settings .store-link { min-height: 48px; font-size: 16px; }
:root[data-machine="jp"] .seg button { min-height: 48px; font-size: 16px; }
:root[data-machine="jp"] .saved > p.muted { margin: 0; padding: 16px 18px; border: 3px solid #FFF3E0; box-shadow: inset 0 0 0 3px #0C0620, inset 0 0 0 6px #FFF3E0; background: #0C0620; color: #FFF3E0; font-size: 16px; line-height: 1.75; }
:root[data-machine="jp"] .row-meta { font-size: 16px; color: #CBB9DE; }
:root[data-machine="jp"] .field label { font-size: 16px; color: #FFC857; }
:root[data-machine="jp"] .input { min-height: 48px; border: 3px solid #FFF3E0; font: 400 16px/1.5 var(--font-dot); }
:root[data-machine="jp"] .input::placeholder { color: #CBB9DE; opacity: 1; }
:root[data-machine="jp"] .icon-btn { min-height: 48px; border: 3px solid #FFF3E0; font: 400 16px/1 var(--font-dot); }
:root[data-machine="jp"] .icon-btn:disabled { border-color: #6B4E93; color: #CBB9DE; opacity: 1; }
:root[data-theme="jp"][data-motion="reduce"] .jp-scan { display: none; }
@media (prefers-reduced-motion: reduce) { :root[data-theme="jp"]:not([data-motion="full"]) .jp-scan { display: none; } }
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="jp"] .jp-head { gap: 8px; }
:root[data-machine="jp"] .jp-head > .home-line { display: none; }
:root[data-machine="jp"] .tile { min-height: 96px; padding-block: 8px 6px; }
}
@media (min-width: 1100px) and (pointer: fine) {
:root[data-machine="jp"] .rg-head .rg-press { min-height: 32px; padding-block: 2px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
:root[data-machine="jp"] .tile { min-height: 88px; padding-block: 6px 4px; }
:root[data-machine="jp"] .tiles { padding-top: 22px; }
:root[data-machine="jp"] .jp-head > .rg-start { margin-top: 0; gap: 2px; }
}
:root[data-machine="jp"] .rg-press { padding: 6px 18px 6px 12px; background: #FFF3E0; color: #2A1E4A; box-shadow: 4px 4px 0 #FF5A36; }
:root[data-machine="jp"] .rg-press.is-wait { animation: none; }
:root[data-machine="jp"] .rg-press::before { visibility: visible; color: #FF5A36; }
:root[data-machine="jp"] .rg-press.is-wait::before { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine="jp"][data-motion="reduce"] .rg-press.is-wait::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root[data-machine="jp"]:not([data-motion="full"]) .rg-press.is-wait::before { animation: none; } }
@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="jp"] { --wide-sea: 30vh; }
:root[data-theme="jp"] body::before, :root[data-theme="jp"]::before {
content: ""; image-rendering: crisp-edges; image-rendering: pixelated;
background-image:
url("pixel/jp/fireworks.png"),
url("pixel/jp/fireworks.png"),
url("pixel/jp/town.png"),
linear-gradient(180deg, #0C0620 0 20%, #160E38 20% 34%, #221652 34% 44%, #3B1A5E 44% 52%, #7A2AA6 52% 58%,
#FF3D8E 58% calc(100% - var(--wide-sea) - 32px), #FF7A3D calc(100% - var(--wide-sea) - 32px) calc(100% - var(--wide-sea)), #1B1048 calc(100% - var(--wide-sea)));
background-size: 360px 184px, 180px 92px, 392px 220px, 100% 100%;
background-position: right 8% top 12vh, left 10% top 34vh, center bottom calc(var(--wide-sea) - 4px), top left;
}
:root[data-theme="jp"]::before {
background-image:
url("pixel/jp/fireworks.png"),
url("pixel/jp/fireworks.png"),
url("pixel/jp/town.png"),
linear-gradient(180deg, #0C0620 0 20%, #160E38 20% 34%, #221652 34% 44%, #3B1A5E 44% 52%, #7A2AA6 52% 58%,
#FF3D8E 58% calc(100% - var(--wide-sea) - 32px), #FF7A3D calc(100% - var(--wide-sea) - 32px) calc(100% - var(--wide-sea)), #1B1048 calc(100% - var(--wide-sea)));
background-size: 360px 184px, 180px 92px, 196px 110px, 100% 100%;
background-position: left 10% top 10vh, right 12% top 36vh, right 6% bottom calc(var(--wide-sea) - 2px), top left;
}
:root[data-theme="jp"] body::after, :root[data-theme="jp"]::after {
content: ""; top: auto; height: var(--wide-sea); image-rendering: crisp-edges; image-rendering: pixelated;
background-color: #1B1048;
background-image:
linear-gradient(180deg, #FF7A3D 0 4px, transparent 4px 12px, #FF3D8E 12px 16px, transparent 16px),
url("pixel/jp/seigaiha-tile.png");
background-size: 100% 100%, 40px 20px;
background-repeat: no-repeat, repeat;
box-shadow: 0 -4px 0 #FFC857;
}
html:root[data-theme="jp"] body::after, html:root[data-theme="jp"]::after { top: auto; }
}