@font-face {
font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/rye-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/silkscreen-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/nunito-700.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap;
src: url("fonts/nunito-900.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/jetbrainsmono-700.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Dela Gothic One"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/delagothicone-400.woff2") format("woff2");
}
@font-face {
font-family: "DotGothic16"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/dotgothic16-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A9, U+00B7, U+00D7, U+00F7, U+2014, U+2019, U+2025-2026, U+203B, U+3000-30FF, U+4E00-9FFF, U+FF01-FF5E, U+FFE5;
}
@font-face {
font-family: "DotGothic16"; 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;
}
@font-face {
font-family: "DotGothic16 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;
}
@font-face {
font-family: "DotGothic16 Hub"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/dotgothic16-hub.woff2") format("woff2");
unicode-range: U+0027, U+0036, U+0038, U+30AA, U+30CD, U+30F3, U+65E5, U+672C, U+6CC9, U+6E29, U+8A9E;
}
@font-face {
font-family: "Yuji Syuku"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("fonts/yujisyuku-400.woff2") format("woff2");
}
@font-face {
font-family: "Italiana"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/italiana-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
src: url("fonts/playfair-italic-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fonts/manrope-500.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/manrope-700.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/spacemono-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Overpass"; font-style: normal; font-weight: 900; font-display: swap;
src: url("fonts/overpass-900.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/barlow-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
src: url("fonts/barlow-600.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/vt323-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/jost-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap;
src: url("fonts/jost-700.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
src: url("fonts/ibmplexmono-600.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
src: url("fonts/anton-400.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
src: url("fonts/rubik-500.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
@font-face {
font-family: "Rubik"; font-style: normal; font-weight: 800; font-display: swap;
src: url("fonts/rubik-800.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-017F, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+21BB, U+2212, U+25B2-25C0, U+25C6, U+25CF, U+2605, U+2661, U+2665, U+2713;
}
:root,
:root[data-theme="circus"] {
color-scheme: dark;
--bg-top: #2A0B3D;
--bg-bottom: #07030D;
--stripe-a: #B0102E;
--stripe-b: #3B0E5C;
--stripe-opacity: 0.55;
--stripe-swirl: 0.35;
--ink: #12061C;
--night: #1E0A2E;
--cabinet: #E0123F;
--cabinet-dark: #7A0724;
--mustard: #FFC400;
--mustard-dark: #B36B00;
--cream: #FFF1D6;
--paper: #FFEBC2;
--teal: #8A2BE2;
--teal-dark: #4B1487;
--led: #00F0FF;
--led-red: #FF2E88;
--lamp-0: #FFD23F;
--lamp-1: #FF2E88;
--lamp-2: #00F0FF;
--lamp-3: #FF5E1F;
--lamp-off: #3A1F4A;
--wheel-0: #E0123F; --wheel-0-text: var(--cream);
--wheel-1: #FFF1D6; --wheel-1-text: var(--ink);
--wheel-2: #6A1FB5; --wheel-2-text: var(--cream);
--wheel-3: #FFC400; --wheel-3-text: var(--ink);
--wheel-4: #FF2E88; --wheel-4-text: var(--ink);
--wheel-5: #00C2D1; --wheel-5-text: var(--ink);
--wheel-6: #12061C; --wheel-6-text: var(--cream);
--tile-base: #FFF1D6;
--tile-stripe: #E0123F;
--tile-text: var(--ink);
--amida-lamp: #FFD23F;
--dark-face: #292929;
--dark-edge: #0D0D0D;
--font-title: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-led: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[lang|="ja"] {
--font-title: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Noto Sans JP", "Meiryo", sans-serif;
--font-rounded: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Meiryo", sans-serif;
--font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Meiryo", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-bottom); }
body {
margin: 0; min-height: 100vh; min-height: 100dvh;
background: var(--bg-bottom); color: var(--cream);
font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--mustard); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--led); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
canvas.bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.stage {
position: relative; z-index: 1;
width: 100%; max-width: 560px; margin: 0 auto;
min-height: 100vh; min-height: 100dvh;
display: flex; flex-direction: column;
}
@media (min-width: 640px) {
.stage { margin: 24px auto; min-height: calc(100dvh - 48px); border-radius: 28px;
background: rgba(7, 3, 13, 0.35);
box-shadow: 0 0 0 3px var(--mustard-dark), 0 0 0 9px var(--cabinet-dark), 0 0 0 12px var(--mustard), 0 0 60px 12px rgba(224, 18, 63, 0.35); }
.stage::before, .stage::after {
content: ""; position: absolute; top: 40px; bottom: 40px; width: 10px; pointer-events: none;
background: radial-gradient(circle, var(--lamp-0) 0 3.5px, transparent 4.5px) center top / 10px 34px repeat-y;
filter: drop-shadow(0 0 4px var(--lamp-0));
}
.stage::before { left: -30px; }
.stage::after { right: -30px; }
}
.topbar {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; gap: 8px;
padding: max(8px, env(safe-area-inset-top)) 12px 8px;
background: linear-gradient(to bottom, rgba(18, 6, 28, 0.92), rgba(18, 6, 28, 0.72));
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255, 196, 0, 0.25);
}
@media (min-width: 640px) { .topbar { border-radius: 28px 28px 0 0; } }
.topbar-title { flex: 1; min-width: 0; text-align: center; margin: 0; font: 900 1.05rem/1.2 var(--font-title); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title small { display: block; font: 600 0.72rem/1.2 var(--font-body); color: rgba(255, 241, 214, 0.75); }
.pill {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-height: 44px; min-width: 44px; padding: 6px 12px;
border-radius: 999px; border: 1.5px solid rgba(255, 196, 0, 0.55);
background: rgba(18, 6, 28, 0.8); color: var(--cream);
font: 700 0.9rem/1.1 var(--font-rounded); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pill[aria-pressed="true"] { background: var(--mustard); color: var(--ink); border-color: var(--mustard-dark); }
.pill:active { transform: translateY(1px); }
.pill .pill-long { display: none; }
@media (min-width: 420px) { .pill .pill-long { display: inline; } .pill .pill-short { display: none; } }
main.app { flex: 1; padding: 16px 18px 24px; outline: none; }
.screen { display: flex; flex-direction: column; gap: 18px; }
.screen > h1:focus, .screen > h2:focus, .screen [tabindex="-1"]:focus { outline: none; }
.foot { padding: 16px 18px max(20px, env(safe-area-inset-bottom)); text-align: center; font-size: 0.85rem; color: rgba(255, 241, 214, 0.85); display: grid; gap: 8px; }
.foot p { margin: 0; }
.foot .nomoney { font: 700 0.9rem/1.3 var(--font-led); color: var(--led); letter-spacing: 0.02em; }
[data-view="home"] .foot .nomoney, [data-theme="hub"] .foot .nomoney { display: none; }
.foot details { text-align: left; background: rgba(18, 6, 28, 0.78); border: 1px solid rgba(255, 196, 0, 0.35); border-radius: 12px; padding: 4px 12px; }
.foot summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--mustard); }
.notice-list { margin: 8px 0 12px; padding-left: 1.4em; display: grid; gap: 6px; }
.notice-list li { line-height: 1.55; }
.store-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 12px; background: #000; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.6); text-decoration: none; font: 700 0.95rem/1.2 var(--font-body); }
.store-link:hover { border-color: #fff; }
.store-link .apple { font-size: 1.2em; line-height: 1; }
.copyright { font-size: 0.8rem; color: rgba(255, 241, 214, 0.7); }
.led {
margin: 0; padding: 10px 16px; border-radius: 10px;
background-color: #000;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0.7px, transparent 0.8px);
background-size: 4px 4px; background-position: 1px 1px;
border: 2px solid rgba(255, 255, 255, 0.18);
font: 700 var(--led-size, 18px)/1.3 var(--font-led); text-align: center;
color: var(--led); text-shadow: 0 0 6px color-mix(in srgb, currentColor 90%, transparent);
overflow-wrap: anywhere;
}
.led-red { color: var(--led-red); }
.led-blink { animation: led-blink 0.45s ease-in-out infinite alternate; }
@keyframes led-blink { from { opacity: 1; } to { opacity: 0.25; } }
.marquee {
position: relative; height: 40px; overflow: hidden; border-radius: 10px;
background-color: #000;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0.7px, transparent 0.8px);
background-size: 4px 4px;
border: 2px solid rgba(255, 255, 255, 0.18);
white-space: nowrap;
}
.marquee-text {
display: inline-block; padding-left: 100%; line-height: 36px;
font: 700 18px/36px var(--font-led); color: var(--led);
text-shadow: 0 0 5px color-mix(in srgb, var(--led) 90%, transparent);
animation: marquee 20s linear -5s infinite; will-change: transform;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.lamps { display: flex; justify-content: center; gap: calc(var(--lamp-size, 9px) * 0.9); }
.lamp {
width: var(--lamp-size, 9px); height: var(--lamp-size, 9px); border-radius: 50%;
background: var(--lamp-off);
animation: lamp-chase 0.48s steps(1, end) infinite;
animation-delay: calc(var(--k) * 0.16s - 0.48s);
}
@keyframes lamp-chase {
0% { background: var(--c); box-shadow: 0 0 6px var(--c); }
33.333% { background: var(--lamp-off); box-shadow: none; }
100% { background: var(--lamp-off); box-shadow: none; }
}
.btn {
--face: var(--mustard); --edge: var(--mustard-dark); --fg: var(--ink);
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 100%; min-height: 56px; margin-bottom: 5px; padding: 6px 10px;
border: 0; border-radius: 16px; cursor: pointer;
background: var(--face); color: var(--fg);
box-shadow: 0 5px 0 var(--edge), inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
font: 900 19px/1.15 var(--font-title); text-align: center;
hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word;
transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge), inset 0 0 0 1.5px rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-red { --face: var(--cabinet); --edge: var(--cabinet-dark); --fg: var(--cream); }
.btn-teal { --face: var(--teal); --edge: var(--teal-dark); --fg: var(--cream); }
.btn-dark { --face: var(--dark-face); --edge: var(--dark-edge); --fg: var(--cream); }
.btn-sub { display: block; margin-top: 2px; font: 800 0.72rem/1.2 var(--font-rounded); opacity: 0.9; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; min-width: 0; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-grid .btn { font-size: clamp(15px, 4.8vw, 19px); padding: 6px 8px; }
.panel { padding: 16px; border-radius: 18px; background: rgba(18, 6, 28, 0.78); border: 2px solid rgba(255, 196, 0, 0.55); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.chips-scroll > * { flex: 0 0 auto; }
.chip {
display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1); color: var(--cream);
font: 700 15px/1.25 var(--font-rounded); text-align: left; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--mustard); color: var(--ink); border-color: var(--mustard-dark); }
.chip.chip-cand[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--cream); border-color: rgba(255, 255, 255, 0.2); }
.chip.is-struck { text-decoration: line-through; text-decoration-color: rgba(255, 241, 214, 0.6); color: rgba(255, 241, 214, 0.6); background: rgba(255, 255, 255, 0.04); }
.topic-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topic-item { display: block; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; background: none; text-align: left; font-size: 0.97rem; color: rgba(255, 241, 214, 0.92); cursor: pointer; border-radius: 8px; }
.topic-item.is-struck { text-decoration: line-through; color: rgba(255, 241, 214, 0.55); }
.section-title { margin: 0; font: 900 17px/1.3 var(--font-title); color: rgba(255, 241, 214, 0.92); }
.muted { color: rgba(255, 241, 214, 0.78); }
.small { font-size: 0.85rem; }
.linkish { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--mustard); font: 800 0.9rem/1.2 var(--font-rounded); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.warn { color: var(--led-red); font-weight: 700; margin: 0; }
.home-head { display: grid; gap: 10px; text-align: center; }
.home-title {
margin: 0; font: 900 clamp(34px, 11vw, 48px)/1.05 var(--font-title); color: var(--mustard);
text-shadow: 3px 3px 0 var(--cabinet), -2px -1px 0 color-mix(in srgb, var(--led-red) 80%, transparent), 0 0 16px rgba(0, 0, 0, 0.6);
letter-spacing: 0.01em;
}
.home-sub { margin: 0; font: 700 15px/1.2 var(--font-led); letter-spacing: 4px; color: rgba(255, 241, 214, 0.85); }
.home-question { margin: 0; font: 900 26px/1.2 var(--font-title); color: var(--cream); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
position: relative; min-height: 130px; margin-bottom: 6px; padding: 18px 8px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
border: 0; border-radius: 20px; cursor: pointer;
background:
radial-gradient(circle at 21px 21px, var(--lamp-0) 0 4px, transparent 4.6px),
radial-gradient(circle at calc(100% - 21px) 21px, var(--lamp-1) 0 4px, transparent 4.6px),
radial-gradient(circle at 21px calc(100% - 21px), var(--lamp-2) 0 4px, transparent 4.6px),
radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), var(--lamp-3) 0 4px, transparent 4.6px),
var(--tile-base);
box-shadow: 0 6px 0 var(--cabinet-dark);
color: var(--tile-text);
transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
-webkit-tap-highlight-color: transparent;
}
.tile::after { content: ""; position: absolute; inset: 5px; border-radius: 16px; border: 7px solid var(--cream); pointer-events: none; z-index: 0; }
.tile::before { content: ""; position: absolute; inset: 5px; border-radius: 16px; border: 7px dashed var(--tile-stripe); pointer-events: none; z-index: 1; }
.tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cabinet-dark); }
.tile-emoji { position: relative; z-index: 2; font-size: 50px; line-height: 1; }
.tile-title { position: relative; z-index: 2; font: 900 clamp(18px, 5.6vw, 24px)/1.1 var(--font-title); overflow-wrap: anywhere; hyphens: auto; }
.home-foot { text-align: center; font: 700 14px/1.6 var(--font-rounded); color: rgba(255, 241, 214, 0.8); margin: 8px 0 0; }
.draw { gap: 14px; align-items: stretch; }
.draw-host { width: 100%; min-width: 0; }
.draw-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.draw-stage > * { max-width: 100%; }
.note { margin: 0; text-align: center; font-size: 0.85rem; color: rgba(255, 241, 214, 0.78); }
.wheel-wrap { position: relative; width: min(100%, 440px, 62vh); aspect-ratio: 1; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.wheel-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-wrap canvas.wheel { cursor: grab; }
.wheel-wrap canvas.wheel:active { cursor: grabbing; }
.dice-table { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.dice-table li { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 3px 6px; border-radius: 8px; font: 600 16px/1.3 var(--font-rounded); color: rgba(255, 241, 214, 0.95); }
.dice-table li.is-reroll { color: rgba(255, 241, 214, 0.62); }
.dice-table li.is-landed { background: var(--mustard); color: var(--ink); font-weight: 900; }
.dice-table .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.die {
--s: 168px; position: relative; width: var(--s); height: var(--s); flex: none;
border-radius: calc(var(--s) * 0.2); background: var(--cream);
box-shadow: 0 calc(var(--s) * 0.03) calc(var(--s) * 0.04) rgba(0, 0, 0, 0.4), inset 0 0 0 max(1px, calc(var(--s) * 0.02)) rgba(0, 0, 0, 0.25);
transition: transform 0.12s ease-out;
}
.die-mini { --s: 24px; }
.pip { position: absolute; width: calc(var(--s) * 0.17); height: calc(var(--s) * 0.17); border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.pip.one { width: calc(var(--s) * 0.323); height: calc(var(--s) * 0.323); background: var(--cabinet); }
button.die { border: 0; padding: 0; cursor: pointer; }
.card-area { position: relative; width: min(280px, 78vw); aspect-ratio: 280 / 380; margin: 0 auto; perspective: 1000px; }
.card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.45s ease-in-out; border: 0; padding: 0; background: none; cursor: pointer; }
.card.is-front { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); overflow: hidden; }
.card-back { background: var(--cabinet); display: grid; place-items: center; }
.card-back::before { content: ""; position: absolute; inset: 20px; border-radius: 12px; background: repeating-linear-gradient(45deg, var(--cabinet-dark) 0 6px, transparent 6px 22px); }
.card-back::after { content: ""; position: absolute; inset: 12px; border-radius: 16px; border: 3px solid var(--mustard); }
.card-emblem { position: relative; z-index: 1; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--cabinet); }
.card-emblem b { font: 900 64px/1 var(--font-title); color: var(--cream); }
.card-emblem i { font: 700 16px/1 var(--font-led); font-style: normal; letter-spacing: 6px; color: var(--mustard); margin-top: 4px; }
.card-front { transform: rotateY(180deg); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px; text-align: center; }
.card-front::after { content: ""; position: absolute; inset: 10px; border-radius: 16px; border: 3px solid var(--cabinet); pointer-events: none; }
.card-kicker { font: 700 16px/1 var(--font-led); letter-spacing: 5px; color: var(--cabinet-dark); }
.card-emoji { font-size: 64px; line-height: 1; }
.card-text { margin: auto 0; font: 900 clamp(20px, 7vw, 30px)/1.2 var(--font-title); overflow-wrap: anywhere; hyphens: auto; }
.card-text.topic { font-size: clamp(18px, 6.2vw, 27px); }
.card-more-btn { position: relative; z-index: 2; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--cabinet); background: none; color: var(--cabinet-dark); font: 700 17px/1 var(--font-led); cursor: pointer; }
.card-more { position: relative; z-index: 2; width: 100%; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--mustard) 35%, transparent); font: 700 17px/1.35 var(--font-rounded); }
.card-more small { display: block; font: 700 12px/1 var(--font-led); color: var(--cabinet-dark); margin-bottom: 4px; }
.deck { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.deck .card-face { transform: none; }
.deck .card-face:nth-child(1) { transform: translate(8px, -10px) rotate(-2deg); }
.deck .card-face:nth-child(2) { transform: translate(4px, -5px); }
.deck .card-face:nth-child(3) { transform: rotate(2deg); }
.deck-hint { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; font: 700 0.85rem/1.2 var(--font-body); color: var(--cream); text-align: center; }
.card-in { animation: card-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes card-in { from { transform: translateY(260px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.card-out { animation: card-out 0.25s ease-in forwards; }
@keyframes card-out { to { transform: translateX(-420px); opacity: 0; } }
.deck-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 15px/1.2 var(--font-led); color: var(--led); }
.amida { position: relative; width: 100%; }
.amida svg { display: block; width: 100%; height: auto; overflow: visible; }
.amida-rail { stroke: color-mix(in srgb, var(--cream) 85%, transparent); stroke-width: 3; stroke-linecap: round; }
.amida-path { fill: none; stroke: var(--amida-lamp); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--amida-lamp)); }
.amida-starts, .amida-goals { display: grid; gap: 0; }
.amida-start { justify-self: center; width: min(44px, calc(100% - 2px)); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid var(--mustard); background: var(--cabinet); color: var(--cream); font: 900 20px/1 var(--font-title); cursor: pointer; }
.amida-start[aria-pressed="true"] { background: var(--mustard); color: var(--ink); }
.amida-start:disabled:not([aria-pressed="true"]) { opacity: 0.7; cursor: default; }
.amida-goal { justify-self: stretch; display: grid; place-items: center; min-height: 50px; margin: 0 1px; padding: 4px 2px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--mustard) 70%, transparent); background: var(--cabinet-dark); color: var(--cream); font: 900 20px/1.1 var(--font-rounded); text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.amida-goal.is-open { background: var(--mustard); color: var(--ink); font-size: 12px; }
.amida-remake.is-hidden { visibility: hidden; }
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.72); overflow-y: auto; }
.overlay-inner { width: 100%; max-width: 480px; margin: auto; display: grid; gap: 10px; }
.result-card {
display: grid; gap: 12px; justify-items: center; text-align: center;
padding: 20px 20px 18px; border-radius: 26px; background: var(--night);
border: 3px solid var(--mustard); box-shadow: 0 0 30px color-mix(in srgb, var(--cabinet) 80%, transparent);
animation: pop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.result-card .led { width: 100%; }
.result-emoji { font-size: 76px; line-height: 1; }
.result-text { margin: 0; font: 900 clamp(24px, 8vw, 32px)/1.2 var(--font-title); color: var(--cream); overflow-wrap: anywhere; hyphens: auto; }
.result-text.topic { font-size: clamp(20px, 6.5vw, 26px); }
.result-sub { margin: 0; font-weight: 700; color: rgba(255, 241, 214, 0.78); }
.result-more { margin: 0; font: 700 1.15rem/1.35 var(--font-rounded); color: var(--mustard); }
.result-more-btn { min-height: 44px; padding: 6px 12px; border: 0; background: none; color: var(--mustard); font: 700 17px/1 var(--font-led); cursor: pointer; }
.result-actions { display: grid; gap: 8px; width: 100%; }
.result-below { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 12px; border-radius: 16px; background: rgba(7, 3, 13, 0.92); }
.result-below .nomoney { margin: 0; font: 700 0.85rem/1.3 var(--font-led); color: var(--led); }
.defied { margin: 0; font-size: 0.85rem; color: rgba(255, 241, 214, 0.78); font-style: italic; }
.promo-line { margin: 0; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%);
width: min(92vw, 480px); padding: 10px 14px; border-radius: 12px;
background: rgba(18, 6, 28, 0.94); border: 1px solid rgba(0, 240, 255, 0.45); color: var(--cream);
font: 600 0.88rem/1.45 var(--font-body); text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
animation: toast-in 0.3s ease-out; }
.toast.is-leaving { animation: toast-out 0.35s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 12px); } }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 196, 0, 0.35); }
.seg button { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--cream); font: 800 0.95rem/1.2 var(--font-rounded); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--mustard); color: var(--ink); }
.rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(18, 6, 28, 0.78); border: 1px solid rgba(255, 196, 0, 0.3); }
.row-emoji { font-size: 28px; line-height: 1.1; }
.row-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-text { font-weight: 800; overflow-wrap: anywhere; }
.row-meta { font-size: 0.8rem; color: rgba(255, 241, 214, 0.72); }
.icon-btn { flex: none; min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--cream); cursor: pointer; font: 700 0.85rem/1 var(--font-rounded); }
.settings { display: grid; gap: 16px; }
.settings h2 { margin: 0 0 6px; font: 900 1.05rem/1.3 var(--font-title); color: var(--mustard); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); transition: transform 0.15s; }
.toggle input:checked + .switch { background: var(--mustard); }
.toggle input:checked + .switch::after { transform: translateX(20px); background: var(--ink); }
.toggle input:focus-visible + .switch { outline: 3px solid var(--led); outline-offset: 2px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; font-size: 0.9rem; }
.input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(255, 196, 0, 0.45); background: rgba(0, 0, 0, 0.45); color: var(--cream); }
.input::placeholder { color: rgba(255, 241, 214, 0.55); }
.edit-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: start; }
.edit-item .stack { display: grid; gap: 4px; }
.edit-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.confirm { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(122, 7, 36, 0.55); border: 1px solid var(--cabinet); }
.promo-box { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, 0.6); border: 2px solid rgba(255, 196, 0, 0.7); text-align: left; }
.promo-box .app-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.promo-box p { margin: 0 0 8px; font: 900 1.02rem/1.3 var(--font-title); color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
:root:not([data-motion="full"]) .marquee-text,
:root:not([data-motion="full"]) .lamp,
:root:not([data-motion="full"]) .led-blink { animation: none; }
:root:not([data-motion="full"]) .lamp { background: var(--c); box-shadow: 0 0 6px var(--c); }
:root:not([data-motion="full"]) .marquee-text { padding-left: 0; white-space: normal; line-height: 1.3; }
:root:not([data-motion="full"]) .marquee { height: auto; padding: 8px 12px; white-space: normal; }
:root:not([data-motion="full"]) .card, :root:not([data-motion="full"]) .btn, :root:not([data-motion="full"]) .tile { transition: none; }
:root:not([data-motion="full"]) .result-card, :root:not([data-motion="full"]) .card-in, :root:not([data-motion="full"]) .card-out { animation-duration: 0.01s; }
}
:root[data-motion="reduce"] .marquee-text, :root[data-motion="reduce"] .lamp, :root[data-motion="reduce"] .led-blink { animation: none; }
:root[data-motion="reduce"] .lamp { background: var(--c); box-shadow: 0 0 6px var(--c); }
:root[data-motion="reduce"] .marquee-text { padding-left: 0; white-space: normal; line-height: 1.3; }
:root[data-motion="reduce"] .marquee { height: auto; padding: 8px 12px; white-space: normal; }
:root[data-motion="reduce"] .card, :root[data-motion="reduce"] .btn, :root[data-motion="reduce"] .tile { transition: none; }
:root[data-motion="reduce"] .result-card, :root[data-motion="reduce"] .card-in, :root[data-motion="reduce"] .card-out { animation-duration: 0.01s; }
.marquee.is-rotating { height: auto; min-height: 40px; display: grid; place-items: center; padding: 6px 12px; white-space: normal; text-align: center; }
.marquee.is-rotating .marquee-text { padding-left: 0; animation: none; line-height: 1.3; }
.noscript { margin: 16px 18px; padding: 14px 16px; border-radius: 14px; background: rgba(122, 7, 36, 0.7); border: 1px solid var(--cabinet); color: var(--cream); text-align: center; }
.entry { display: grid; gap: 16px; text-align: center; }
.entry h1 { margin: 0; }
.entry-heading { margin: 0; font: 900 clamp(20px, 5.8vw, 26px)/1.25 var(--font-title); color: var(--cream); }
.entry-line { margin: 0; }
.country-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.country-tile {
position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 84px; padding: 12px 10px;
border-radius: 18px; text-decoration: none; text-align: center;
background: var(--tile-base); color: var(--ink); box-shadow: 0 5px 0 var(--cabinet-dark), inset 0 0 0 4px var(--cream), inset 0 0 0 7px var(--tile-stripe);
}
.country-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cabinet-dark), inset 0 0 0 4px var(--cream), inset 0 0 0 7px var(--tile-stripe); }
.country-tile .cname { font: 900 clamp(16px, 4.6vw, 20px)/1.15 var(--font-title); }
.country-tile .clang { font: 700 0.85rem/1.2 var(--font-rounded); color: #4a2a3a; }
.country-tile .tag { display: inline-block; margin: 4px auto 0; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--mustard); font: 700 0.7rem/1.3 var(--font-body); }
.country-tile.is-suggested { box-shadow: 0 5px 0 var(--cabinet-dark), inset 0 0 0 4px var(--cream), inset 0 0 0 7px var(--mustard), 0 0 0 3px var(--led), 0 0 22px 4px color-mix(in srgb, var(--led) 60%, transparent); }
.fate-tile { grid-column: 1 / -1; }
.fate-pick { display: grid; gap: 8px; justify-items: center; padding: 14px; border-radius: 16px; background: rgba(18, 6, 28, 0.85); border: 2px solid var(--led); }
.fate-pick .big { font: 900 clamp(24px, 7vw, 34px)/1.15 var(--font-title); color: var(--mustard); }
.welcome { margin: 0; font: 700 1rem/1.3 var(--font-led); color: var(--led); }
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene > * { position: absolute; pointer-events: none; }
.scene img { user-select: none; }
.btn-tag { display: block; margin-bottom: 2px; font: 700 0.68rem/1.1 var(--font-led); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.btn-flavor { display: block; margin-top: 3px; font: 600 0.72rem/1.25 var(--font-body); opacity: 0.85; }
.btn-method { min-height: 72px; }
.tile-tag { position: absolute; z-index: 3; top: 12px; right: 16px; font: 700 0.75rem/1 var(--font-led); letter-spacing: 0.08em; opacity: 0.85; }
.home-line { margin: 0; font: 600 1rem/1.5 var(--font-body); color: var(--ink-dim, rgba(255, 241, 214, 0.85)); }
.home-sub-line { margin: 0; font: 500 0.95rem/1.4 var(--font-body); color: var(--ink-dim, rgba(255, 241, 214, 0.85)); }
.cat-line { margin: 0; font: 500 0.95rem/1.45 var(--font-body); color: var(--ink-dim, rgba(255, 241, 214, 0.85)); }
.plaque { display: grid; gap: 2px; justify-items: center; margin: 0 auto; max-width: 440px; padding: 8px 14px; border-radius: 8px; text-align: center;
background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.25); font: 600 0.9rem/1.4 var(--font-body); }
.plaque strong { font: 700 0.85rem/1.3 var(--font-led); letter-spacing: 0.08em; }
.result-foot { margin: 0; font: 700 0.95rem/1.35 var(--font-body); color: var(--ink-dim, rgba(255, 241, 214, 0.78)); font-style: italic; }
.bf {
--paper: #FFF9F0; --ink: #1C1026; --stamp-ink: #4B3028;
--card-paper: #f1e6d0; --card-line: #4b3028; --card-ink: #3A2418;
--t-ink: #62432F; --t-cream: #F3E4C6; --t-gold: #8E6A3E; --t-dark: #38291F;
--k: 1;
--bf-size: clamp(84px, 27vmin, 260px);
--rt-w: 400px;
--serif-ja: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
--pf: "Playfair Display", Georgia, serif;
position: fixed; inset: 0; z-index: 60; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
background: var(--paper); color: var(--ink); opacity: 0; outline: none; cursor: default; -webkit-tap-highlight-color: transparent;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bf.is-on { opacity: 1; }
.bf.is-leaving { opacity: 0; transition-duration: 0.42s; pointer-events: none; }
.bf ~ .toast { z-index: 70; }
.bf.is-opaque-frame { background: var(--card-paper); }
.bf-comp { position: relative; box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: clamp(8px, 1.8vh, 18px);
padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.bf-sent { flex: none; margin: 0; max-width: min(100%, 26em); text-align: center; color: var(--ink);
font: italic 400 var(--sent, 48px)/1.12 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; text-wrap: balance;
animation: bf-fade calc(var(--k) * 0.5s) ease-out calc(var(--k) * 0.2s) both, bf-retreat calc(var(--k) * 0.6s) cubic-bezier(0.3, 0.1, 0.2, 1) calc(var(--k) * 1.1s) both; }
.bf-sent[data-size="xl"] { --sent: clamp(32px, 4.6vw, 62px); }
.bf-sent[data-size="l"] { --sent: clamp(26px, 3.4vw, 46px); }
.bf-sent[data-size="m"] { --sent: clamp(21px, 2.4vw, 32px); line-height: 1.2; }
.bf.is-ja .bf-sent { font-family: var(--serif-ja); font-style: normal; font-weight: 600; letter-spacing: 0.03em; line-height: 1.34; word-break: keep-all; line-break: strict; }
.bf.is-ja .bf-sent[data-size="xl"] { --sent: clamp(28px, 3.8vw, 52px); }
.bf.is-ja .bf-sent[data-size="l"] { --sent: clamp(23px, 2.9vw, 40px); }
.bf.is-ja .bf-sent[data-size="m"] { --sent: clamp(19px, 2.1vw, 28px); }
@keyframes bf-retreat { from { transform: translateY(var(--dy, 0px)) scale(1.1); } to { transform: none; } }
.bf-card { flex: 1 1 0; width: 100%; min-height: 330px; max-height: 700px; container-type: size; display: grid; place-items: center; }
.bf-in { position: relative; container-type: inline-size; animation: bf-fade calc(var(--k) * 0.5s) linear calc(var(--k) * 1.25s) both; }
.bf[data-kind="land"] .bf-in { width: min(100cqw, 177.778cqh, 1100px); aspect-ratio: 16 / 9; }
.bf[data-kind="port"] .bf-in { width: min(100cqw, 56.25cqh); aspect-ratio: 9 / 16; }
.bf-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none;
animation: bf-develop calc(var(--k) * 0.9s) ease-out calc(var(--k) * 1.25s) both; }
.bf-frame:not([src]) { visibility: hidden; }
.bf[data-kind="land"] .bf-frame.is-port, .bf[data-kind="port"] .bf-frame.is-land { display: none; }
@keyframes bf-develop { from { filter: brightness(1.7) contrast(0.3); } to { filter: none; } }
.bf-content { position: absolute; display: flex; flex-direction: column; }
.bf[data-kind="land"] .bf-content { left: 15%; top: 25%; width: 70%; height: 49%; }
.bf[data-kind="port"] .bf-content { left: 16%; top: 20%; width: 68%; height: 63%; }
.bf-town-wrap { position: relative; flex: 1 1 0; min-height: 0; container-type: size; }
.bf-town-wrap::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--card-line) 16%, var(--card-line) 84%, transparent);
animation: bf-fade calc(var(--k) * 0.6s) linear calc(var(--k) * 1.45s) both; }
.bf-town { position: absolute; left: 50%; bottom: 0; display: none; transform: translateX(-50%); }
.bf[data-kind="land"] .bf-town.is-land { display: block; width: min(100cqw, 260cqh); aspect-ratio: 2.6; }
.bf[data-kind="port"] .bf-town.is-port { display: block; width: min(100cqw, 150cqh); aspect-ratio: 1.5; }
.bf-town-l { position: absolute; inset: 0; }
.bf-town-l img { position: absolute; display: block; user-select: none; }
.bf-town-l.is-sepia { animation: bf-develop-town calc(var(--k) * 0.9s) ease-out calc(var(--k) * 1.35s) both; }
.bf-town-l.is-sepia img { filter: grayscale(1) sepia(0.85) brightness(0.82) contrast(1.15); }
.bf-town-l.is-sepia img.is-ink { filter: brightness(0.4) contrast(1.25) grayscale(1) sepia(0.85) brightness(0.82) contrast(1.15) drop-shadow(0 0 0.6px #3B2A1A) drop-shadow(0 0 0.4px #3B2A1A); }
@keyframes bf-develop-town { from { filter: brightness(1.9) contrast(0.25); opacity: 0.1; } to { filter: none; opacity: 1; } }
.bf-town-perch { position: absolute; width: 0; height: 0; }
.bf-poem { flex: none; display: grid; gap: 0.14em; margin: 0; padding-top: clamp(8px, 1.6cqw, 16px); text-align: center; }
.bf-line { margin: 0; color: var(--card-ink); font: italic 400 clamp(22px, 2.5cqw, 26px)/1.36 "Playfair Display", Georgia, serif; text-wrap: balance; overflow-wrap: break-word;
animation: bf-rise calc(var(--k) * 0.7s) ease-out both; animation-delay: calc(var(--k) * (2.5s + var(--i) * 0.3s)); }
.bf-line.is-luck { color: var(--ink); -webkit-text-stroke: 0.022em currentColor; }
.bf[data-fit="1"] .bf-line { font-size: clamp(20px, 2.1cqw, 23px); }
.bf[data-fit="2"] .bf-line { font-size: clamp(18px, 1.9cqw, 21px); line-height: 1.3; }
.bf[data-kind="port"] .bf-line { font-size: clamp(19px, 7cqw, 21px); line-height: 1.3; }
.bf[data-kind="port"][data-fit="1"] .bf-line { font-size: 17px; }
.bf[data-kind="port"][data-fit="2"] .bf-line { font-size: 16px; line-height: 1.26; }
.bf.is-ja .bf-line { font: 400 clamp(22px, 2.2cqw, 25px)/1.66 var(--serif-ja); letter-spacing: 0.04em; word-break: normal; word-break: auto-phrase; overflow-wrap: anywhere; line-break: strict; }
.bf.is-ja .bf-line.is-luck { font-weight: 600; -webkit-text-stroke: 0; }
.bf.is-ja[data-fit="1"] .bf-line { font-size: clamp(20px, 2cqw, 22px); }
.bf.is-ja[data-fit="2"] .bf-line { font-size: clamp(18px, 1.8cqw, 20px); line-height: 1.6; }
.bf.is-ja[data-kind="port"] .bf-line { font-size: clamp(19px, 7cqw, 20px); line-height: 1.6; letter-spacing: 0.02em; }
.bf.is-ja[data-kind="port"][data-fit="1"] .bf-line { font-size: 17px; }
.bf.is-ja[data-kind="port"][data-fit="2"] .bf-line { font-size: 16px; line-height: 1.55; }
.bf.is-narrow .bf-card { flex: none; min-height: 0; max-height: none; container-type: inline-size; }
.bf.is-narrow .bf-in { width: 100%; }
.bf.is-narrow .bf-comp > .bf-poem { width: 100%; max-width: 30em; padding: 0 2px; margin-top: -4px; }
.bf.is-narrow .bf-line { font-size: clamp(19px, 5.3vw, 22px); line-height: 1.34; }
.bf.is-narrow.is-ja .bf-line { font-size: clamp(19px, 5vw, 21px); line-height: 1.62; letter-spacing: 0.02em; }
.bf-mark { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, auto) calc(var(--bf-size) * 0.92); justify-content: center; align-items: center;
box-sizing: border-box; width: 100%; margin: 0 0 10px; }
.bf-mark-t { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.bf-mark-slot { position: relative; height: var(--bf-size); }
.bf-mark-perch { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.bf-stamp { position: relative; margin: 0; display: block; max-width: 100%; box-sizing: border-box;
padding: 0.42em 0.75em 0.38em; border: 5px double var(--stamp-ink); background: var(--card-paper); color: var(--stamp-ink);
font: italic 400 clamp(17px, 1.5vw, 23px)/1.22 "Playfair Display", Georgia, serif; letter-spacing: 0.05em; text-align: center; text-wrap: balance;
transform: rotate(-4deg); opacity: 0; }
.bf-stamp[data-long] { font-size: clamp(16px, 1.35vw, 21px); letter-spacing: 0.03em; }
.bf-arr { display: inline-block; position: relative; width: 0.95em; height: 0; margin: 0 0.12em 0 0.06em; border-top: max(1.5px, 0.075em) solid currentColor; vertical-align: 0.3em; font-style: normal; }
.bf-arr::after { content: ""; position: absolute; right: -0.06em; top: calc(-0.22em - max(1.5px, 0.075em) / 2); border-left: 0.34em solid currentColor; border-top: 0.22em solid transparent; border-bottom: 0.22em solid transparent; }
.bf-arr.is-ne { width: 0.7em; transform: rotate(-45deg); margin: 0 0.18em 0 0; }
.bf-nw { white-space: nowrap; }
.bf.is-ja .bf-stamp { font-family: var(--serif-ja); font-style: normal; font-weight: 600; letter-spacing: 0.06em; word-break: keep-all; }
.bf-from { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.45em; max-width: 100%; text-align: center;
color: var(--card-ink); font: italic 400 16px/1.35 "Playfair Display", Georgia, serif; opacity: 0; }
.bf-from-g { font: 400 16px/1.25 var(--rg-font-title, "Playfair Display"), "Playfair Display", Georgia, serif; letter-spacing: 0; color: var(--ink); font-style: normal; }
.bf.is-ja .bf-from-w { font: 400 16px/1.35 var(--serif-ja); }
.bf.is-stamped .bf-stamp { animation: bf-stamp 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.bf.is-stamped .bf-from { animation: bf-show 0.3s linear 0.3s both; opacity: 1; }
@keyframes bf-stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.45); } to { opacity: 0.96; transform: rotate(-4deg) scale(1); } }
.bf-fly { position: absolute; left: 0; top: 0; z-index: 3; width: var(--bf-size); height: var(--bf-size);
margin: calc(var(--bf-size) / -2) 0 0 calc(var(--bf-size) / -2); pointer-events: none; transform: rotate(-8deg); will-change: transform; }
.bf-f { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; }
.bf-f.bf-open { opacity: 1; }
.bf-fly:not(.is-landed) .bf-open { animation: bf-k-open 0.44s steps(1) infinite; }
.bf-fly:not(.is-landed) .bf-f1 { animation: bf-k-f1 0.44s steps(1) infinite; }
.bf-fly:not(.is-landed) .bf-f2 { animation: bf-k-f2 0.44s steps(1) infinite; }
@keyframes bf-k-open { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes bf-k-f1 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bf-k-f2 { 0%, 25% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
.bf-fly.is-landed .bf-open { animation: bf-rest-open 4s steps(1) infinite; }
.bf-fly.is-landed .bf-f1 { animation: bf-rest-f1 4s steps(1) infinite; }
.bf-fly.is-landed .bf-f2 { animation: bf-rest-f2 4s steps(1) infinite; }
@keyframes bf-rest-open { 0% { opacity: 1; } 84% { opacity: 0; } 96% { opacity: 1; } }
@keyframes bf-rest-f1 { 0% { opacity: 0; } 84% { opacity: 1; } 88% { opacity: 0; } 92% { opacity: 1; } 96% { opacity: 0; } }
@keyframes bf-rest-f2 { 0% { opacity: 0; } 88% { opacity: 1; } 92% { opacity: 0; } }
.bf-fly.is-still .bf-open { opacity: 1; animation: none; }
@keyframes bf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bf-show { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.bf-skip { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 4; min-width: 44px; min-height: 44px; padding: 8px 12px;
border: 0; background: none; color: var(--ink); cursor: pointer; font: italic 400 18px/1.2 "Playfair Display", Georgia, serif;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; animation: bf-fade 0.3s linear 0.3s both; }
.bf.is-ja .bf-skip { font: 400 16px/1.2 var(--serif-ja); }
.bf-skip[hidden] { display: none; }
#main[style*="visibility: hidden"] *, #main[style*="visibility: hidden"] *::before, #main[style*="visibility: hidden"] *::after { visibility: hidden !important; }
.bf-exit { flex: none; display: grid; justify-items: center; gap: 0; width: 100%; }
.rt-wrap { width: min(var(--rt-w), 100%); display: grid; gap: 4px; justify-items: center; opacity: 0; visibility: hidden; }
.bf.is-exit .rt-wrap { opacity: 1; visibility: visible; animation: bf-rt-in 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes bf-rt-in { from { opacity: 0; visibility: hidden; transform: translateY(40%); } 1% { visibility: visible; } to { opacity: 1; visibility: visible; transform: none; } }
.rt-line { margin: 0; padding: 0 8px; text-align: center; font: italic 400 17px/1.35 "Playfair Display", Georgia, serif; color: var(--ink); text-wrap: balance; }
.bf.is-ja .rt-line { font: 400 16px/1.6 var(--serif-ja); letter-spacing: 0.06em; word-break: keep-all; line-break: strict; }
.rt { position: relative; width: 100%; aspect-ratio: 2; container-type: inline-size; color: var(--t-ink); }
.rt-body, .rt-stub { position: absolute; inset: 0; pointer-events: none; }
.rt-body { transform-origin: 37% 50%; }
.rt-stub { transform-origin: 72.6667% 50%; transition: transform 0.18s ease-out; }
.rt img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; }
.rt-fibers { opacity: 0; }
.rt button { position: absolute; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.rt-go { left: 8.3%; top: 21%; width: 60.2%; height: 58%; }
.rt-title, .rt-no { position: absolute; text-align: center; white-space: nowrap; pointer-events: none; }
.rt-title { left: 12.7%; top: 33%; width: 51.6%; font: 400 5.4cqw/1.2 "Rye", Georgia, serif; letter-spacing: -0.015em; text-transform: uppercase; }
.rt-no { top: 70%; left: 12.7%; width: 51.6%; font: italic 400 clamp(14px, 3.9cqw, 16px)/1 "Playfair Display", Georgia, serif; letter-spacing: 0.04em; }
.rt-plate { position: absolute; left: 50%; top: 47.5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.38em; max-width: 94%; box-sizing: border-box;
padding: 0.42em 0.72em 0.44em; border: 1px solid var(--t-gold); border-radius: 2px; background: var(--t-ink); color: var(--t-cream); box-shadow: 0 2px 0 var(--t-dark);
font: italic 400 clamp(16px, 4.6cqw, 19px)/1 "Playfair Display", Georgia, serif; white-space: nowrap; }
.rt-tri { flex: none; width: 0; height: 0; border-left: 0.46em solid currentColor; border-top: 0.28em solid transparent; border-bottom: 0.28em solid transparent; }
.bf.is-ja .rt-plate { font: 600 clamp(16px, 4.4cqw, 18px)/1 var(--serif-ja); letter-spacing: 0.1em; }
.rt-go:hover .rt-plate { background: var(--t-dark); }
.rt .rt-again { left: 74.6%; top: 17%; width: 20.8%; height: 66%; display: grid; place-items: center; padding: 0 1px; }
.rt-stub-copy { display: block; max-width: 100%; box-sizing: border-box; padding: 2px 2px 3px; background: var(--t-cream); text-align: center; white-space: pre-line; color: var(--t-dark);
font: italic 400 clamp(16px, 4.3cqw, 18px)/1.18 "Playfair Display", Georgia, serif; letter-spacing: -0.02em;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bf.is-ja .rt-stub-copy { font: 600 16px/1.45 var(--serif-ja); letter-spacing: -0.04em; font-feature-settings: "palt"; word-break: keep-all; }
.rt .rt-again:hover .rt-stub-copy { text-decoration-thickness: 2px; }
.rt-perf { position: absolute; left: 72.6667%; top: 9%; height: 82%; border-left: 3px dotted var(--t-dark); transform: translateX(-1.5px); }
.rt-arrow { position: absolute; left: 72.6667%; top: 1.5%; width: 0; height: 0; transform: translateX(-50%);
border-left: 1.7cqw solid transparent; border-right: 1.7cqw solid transparent; border-top: 2.3cqw solid var(--t-dark); }
.rt-arrow.is-low { top: auto; bottom: 1.5%; }
.bf.is-exit .rt[data-state="ready"] .rt-stub { animation: rt-hint 0.9s ease-in-out 0.9s backwards; }
@keyframes rt-hint { 0%, 100% { transform: none; } 25% { transform: translate(0.8%, -0.6%) rotate(-2.6deg); } 55% { transform: translate(0.3%, 0) rotate(1.4deg); } 80% { transform: rotate(-0.4deg); } }
.rt[data-tug] .rt-stub { transform: translate(0.6%, -0.4%) rotate(-1.6deg); }
.rt[data-state="torn"] .rt-fibers { opacity: 1; }
.rt[data-state="torn"] .rt-stub { animation: rt-tear 0.86s cubic-bezier(0.25, 0.6, 0.45, 1) forwards; }
.rt[data-state="torn"] .rt-body { animation: rt-tug 0.86s ease-out forwards; }
@keyframes rt-tear { 0% { transform: none; opacity: 1; } 18% { transform: translate(1%, -1%) rotate(-3deg); opacity: 1; } 34% { transform: translate(3%, 4%) rotate(4deg); opacity: 1; } 100% { transform: translate(17%, 96%) rotate(29deg); opacity: 0; } }
@keyframes rt-tug { 0%, 100% { transform: none; } 18% { transform: rotate(-1.4deg); } 34% { transform: rotate(0.8deg); } }
.rt-bye { position: absolute; left: 38%; top: 50%; z-index: 2; display: none; pointer-events: none; transform: translate(-50%, -50%) rotate(-7deg); }
.rt-bye-t { display: block; padding: 0.32em 0.7em 0.3em; border: 5px double var(--stamp-ink); background: var(--card-paper); color: var(--stamp-ink); white-space: nowrap;
font: italic 400 clamp(20px, 6.6cqw, 28px)/1.1 "Playfair Display", Georgia, serif; letter-spacing: 0.02em; }
.bf.is-ja .rt-bye-t { font: 600 clamp(20px, 6.2cqw, 26px)/1.2 var(--serif-ja); letter-spacing: 0.08em; }
.rt[data-state="kept"] .rt-bye { display: block; animation: rt-bye 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes rt-bye { from { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1.5); } to { opacity: 0.97; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
.bf.is-closing .rt-stub { opacity: 0.55; transition: opacity 0.3s linear; }
.bf.is-closing .bf-fly .bf-open { animation: bf-close-open 0.36s steps(1) 0.16s both; }
.bf.is-closing .bf-fly .bf-f1 { animation: bf-close-f1 0.36s steps(1) 0.16s both; }
.bf.is-closing .bf-fly .bf-f2 { animation: bf-close-f2 0.36s steps(1) 0.16s both; }
@keyframes bf-close-open { 0% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bf-close-f1 { 0% { opacity: 0; } 45% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes bf-close-f2 { 0%, 98% { opacity: 0; } 99%, 100% { opacity: 1; } }
.bf-after { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 28px; margin-top: 6px; }
html .bf a.bf-next { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 6px 12px; box-sizing: border-box; text-align: center; color: var(--ink); text-decoration: none;
opacity: 0; visibility: hidden; }
html .bf.is-exit .bf-next { animation: bf-show 0.4s linear 0.3s both; }
.bf-next-t { font: italic 400 17px/1.3 "Playfair Display", Georgia, serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bf.is-ja .bf-next-t { font: 400 16px/1.5 var(--serif-ja); letter-spacing: 0.04em; }
.bf-next-g { font: italic 400 16px/1.25 "Playfair Display", Georgia, serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--card-ink); }
.bf-next.is-ja-g .bf-next-g { font-family: var(--serif-ja); font-style: normal; }
html .bf a.bf-next:hover .bf-next-t { text-decoration-thickness: 2px; }
.bf-share { min-height: 44px; margin: 0; padding: 6px 10px; border: 0; background: none; color: var(--ink); cursor: pointer; opacity: 0; visibility: hidden;
font: italic 400 17px/1.2 "Playfair Display", Georgia, serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bf.is-exit .bf-share { animation: bf-show 0.4s linear 0.45s both; }
.bf.is-ja .bf-share { font: 400 16px/1.2 var(--serif-ja); }
.bf-share:hover { text-decoration-thickness: 2px; }
html .bf :is(.bf-share, .bf-next, .bf-skip, .rt-go, .rt-again):focus-visible { outline: 3px solid var(--stamp-ink); outline-offset: 3px; box-shadow: none; }
.bf.is-skip :is(.bf-sent, .bf-in, .bf-frame, .bf-town-l, .bf-line) { animation-delay: 0s !important; animation-duration: 0.25s !important; }
.bf.is-skip .bf-town-wrap::after { animation-delay: 0s !important; animation-duration: 0.25s !important; }
html .bf.is-skip.is-exit :is(.rt-wrap, .bf-share, .bf-next) { animation-duration: 0.35s; animation-delay: 0s; }
.bf.is-reduced { transition-duration: 0.2s; }
.bf.is-reduced :is(.bf-sent, .bf-in, .bf-line) { animation: bf-show 0.2s linear both; }
.bf.is-reduced :is(.bf-frame, .bf-town-l) { animation: none; }
.bf.is-reduced .bf-town-wrap::after { animation: none; }
.bf.is-reduced.is-stamped .bf-stamp { animation: none; opacity: 0.96; }
.bf.is-reduced.is-stamped .bf-from { animation: none; opacity: 1; }
html .bf.is-reduced.is-exit :is(.rt-wrap, .bf-share, .bf-next) { animation: bf-show 0.2s linear both; }
.bf.is-reduced .rt-stub { animation: none !important; transition: none; }
.bf.is-reduced .rt[data-state="torn"] :is(.rt-stub, .rt-body) { animation: none; }
.bf.is-reduced .rt[data-state="torn"] .rt-stub { opacity: 0; }
.bf.is-reduced .rt[data-state="kept"] .rt-bye { animation: none; opacity: 0.97; }
.bf.is-reduced.is-closing .bf-fly .bf-open { animation: none; opacity: 0; }
.bf.is-reduced.is-closing .bf-fly .bf-f2 { animation: none; opacity: 1; }
@media (max-width: 599px) {
.bf { --rt-w: 360px; }
.bf-comp { gap: 10px; }
.bf-mark { margin-bottom: 6px; }
.bf-mark-t { gap: 10px; }
.bf-card { min-height: 360px; }
.bf-after { gap: 0 10px; margin-top: 2px; }
html .bf a.bf-next { padding: 4px 6px; }
.bf-next-t { font-size: 16px; }
.bf.is-ja .bf-next-t { letter-spacing: 0.01em; }
.bf-next-g { letter-spacing: 0.02em; }
.bf-next-y { display: none; }
.bf-share { padding: 6px 4px; }
.bf-stamp { font-size: 17px; letter-spacing: 0.03em; padding: 0.34em 0.6em 0.3em; }
.bf-stamp[data-long] { font-size: 16px; letter-spacing: 0.02em; }
}
@media (max-height: 780px) and (min-width: 600px) {
.bf { --rt-w: 340px; }
}
.bf.is-row .bf-exit { grid-template-columns: 1fr auto 1fr; grid-template-areas: "after ticket mark"; align-items: center; column-gap: 28px; }
.bf.is-row .rt-wrap { grid-area: ticket; width: var(--rt-w); }
.bf.is-row .bf-after { grid-area: after; display: grid; justify-items: end; justify-self: end; gap: 4px; margin: 26px 0 0; }
.bf.is-row .bf-after .bf-share { justify-self: end; }
.bf.is-row .bf-mark { grid-area: mark; align-self: center; justify-self: start; justify-content: start; width: 100%; margin: 26px 0 0; }
.bf.is-row .bf-mark-t { justify-items: start; }
.bf.is-row .bf-mark-slot { height: 0; align-self: start; }
.bf.is-row .bf-mark-perch { left: 52%; top: calc(var(--bf-size) * 0.06); }
.bf.is-row .bf-from { justify-content: flex-start; text-align: left; }
.today-card { display: grid; gap: 2px; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; text-align: left; cursor: pointer;
border: 2px dashed var(--mustard, #FFC400); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: var(--cream, #FFF1D6); }
.today-card:focus-visible { outline: 3px solid var(--mustard, #FFC400); outline-offset: 3px; }
.today-label { font: 700 11px/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.today-text { font: 800 17px/1.3 var(--font-title); overflow-wrap: anywhere; }
[data-theme="us"] .today-card { border: 0; border-top: 4px solid #FFB000; border-radius: 2px; background: #F2F0E6; color: #070B12; }
[data-theme="us"] .today-label { font-family: "VT323", ui-monospace, monospace; font-size: 15px; letter-spacing: 0.08em; }
[data-theme="us"] .today-text { font-family: "Overpass", Arial, sans-serif; }
[data-theme="de"] .today-card { border: 1px solid #6B7785; border-radius: 2px; background: #1E252E; color: #E8EDF2; box-shadow: inset 0 0 0 3px #2B3440; }
[data-theme="de"] .today-label { font-family: "IBM Plex Mono", ui-monospace, monospace; color: #FFC61A; }
[data-theme="jp"] .today-card { border: 2px solid #FF7A3D; border-radius: 4px; background: #2A1B12; color: #FFF1D6; }
[data-theme="jp"] .today-label { font-family: "DotGothic16", system-ui, sans-serif; letter-spacing: 0.2em; color: #FF7A3D; }
[data-theme="fr"] .today-card { border: 1px solid #F2C94C; border-radius: 22px; background: rgba(11, 19, 34, 0.72); color: #FFF4E3; }
[data-theme="fr"] .today-text { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; }
[data-theme="es"] .today-card { border: 3px solid #1B1230; border-radius: 6px; background: #FFFFFF; color: #1B1230; box-shadow: 4px 4px 0 #FF3EA5; }
.quickspin { display: grid; }
:root[data-machine] {
--rg-font: "VT323", "DotGothic16 Sym", ui-monospace, monospace;
--rg-font-title: "Silkscreen", "DotGothic16 Sym", ui-monospace, monospace;
--rg-fs: 16px;
--rg-fs-m: 24px;
--rg-fs-l: 32px;
--rg-lh: 1.5;
--rg-track: 0;
--rg-dot: 4px;
--rg-screen: #000000;
--rg-win: #000000;
--rg-ink: #FFFFFF;
--rg-dim: #B0B0B0;
--rg-line: #FFFFFF;
--rg-line2: var(--rg-line);
--rg-hi: #FFE14A;
--rg-cur: var(--rg-hi);
--rg-btn: var(--rg-hi);
--rg-btn-ink: #000000;
--rg-shade: #000000;
--rg-cursor: "▼";
--rg-cursor-rot: -90deg;
--rg-pad: 12px 16px;
--rg-win-border: var(--rg-dot) solid var(--rg-line);
--rg-win-shadow: inset 0 0 0 var(--rg-dot) var(--rg-win), inset 0 0 0 calc(var(--rg-dot) * 2) var(--rg-line2);
--rg-win-pad: calc(var(--rg-dot) * 2 + 10px) calc(var(--rg-dot) * 2 + 14px);
}
:root[data-machine] main.app { font-family: var(--rg-font); font-size: var(--rg-fs); line-height: var(--rg-lh); letter-spacing: var(--rg-track); }
:root[data-machine] main.app :is(h1, h2, h3, p, li, button, span, label, input, textarea) { font-synthesis: none; }
@media (min-width: 640px) {
:root[data-machine] .stage { border-radius: 0; background: var(--rg-screen); }
:root[data-machine] .stage::before, :root[data-machine] .stage::after { display: none; }
}
:root[data-machine] .rg-px, :root[data-machine] img.rg-px { image-rendering: crisp-edges; image-rendering: pixelated; }
:root[data-machine] :is(.rg-win, .panel, .tiles, .home-line, .today-card, .result-card, .result-actions, .toast, .row, .confirm, .seg) {
border: var(--rg-win-border); border-radius: 0; box-shadow: var(--rg-win-shadow);
background: var(--rg-win); color: var(--rg-ink);
}
:root[data-machine] :is(.rg-win, .panel, .home-line, .today-card, .result-card, .toast, .confirm) { padding: var(--rg-win-pad); }
:root[data-machine] .rg-cap, :root[data-machine] :is(.home-question, .section-title) {
margin: 0; font: 400 var(--rg-fs-m)/1.25 var(--rg-font-title); letter-spacing: var(--rg-track); color: var(--rg-ink); text-shadow: none;
}
:root[data-machine] .led {
border: var(--rg-win-border); border-radius: 0; box-shadow: var(--rg-win-shadow);
background: var(--rg-win); background-image: none; color: var(--rg-ink); text-shadow: none;
font: 400 var(--rg-fs-m)/1.3 var(--rg-font-title); letter-spacing: var(--rg-track); padding: var(--rg-win-pad);
}
:root[data-machine] .led-red { color: var(--rg-hi); }
:root[data-machine] .led-blink { animation: none; }
:root[data-machine] .btn {
--face: var(--rg-win); --edge: var(--rg-line); --fg: var(--rg-ink);
min-height: 52px; margin: 0; padding: 8px 14px 8px 40px; align-items: flex-start; text-align: left;
border: var(--rg-dot) solid var(--edge); border-radius: 0; box-shadow: none; background: var(--face); color: var(--fg);
font: 400 var(--rg-fs-m)/1.25 var(--rg-font); letter-spacing: var(--rg-track); text-shadow: none; transition: none;
}
:root[data-machine] .btn:active:not(:disabled) { transform: none; box-shadow: none; }
:root[data-machine] :is(.btn-red, .btn-teal, .btn-dark) { --face: var(--rg-win); --edge: var(--rg-line); --fg: var(--rg-ink); }
:root[data-machine] .btn-arcade { --face: var(--rg-btn); --edge: var(--rg-btn); --fg: var(--rg-btn-ink); }
:root[data-machine] :is(.btn-tag, .btn-sub, .btn-flavor) { font-family: var(--rg-font); font-weight: 400; font-size: var(--rg-fs); letter-spacing: var(--rg-track); opacity: 1; text-transform: none; }
:root[data-machine] .btn-grid { gap: 10px; }
:root[data-machine] .btn-grid .btn { font-size: var(--rg-fs-m); }
:root[data-machine] .tiles { gap: 4px 8px; padding: calc(var(--rg-dot) * 2 + 8px); }
:root[data-machine] .tile {
min-height: 112px; margin: 0; padding: 12px 8px 10px 36px; gap: 6px;
border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--rg-ink); transition: none;
}
:root[data-machine] .tile::after { content: none; }
:root[data-machine] .tile:active { transform: none; box-shadow: none; }
:root[data-machine] .tile-title { font: 400 var(--rg-fs-m)/1.2 var(--rg-font); letter-spacing: var(--rg-track); }
:root[data-machine] .tile-emoji { font-size: 48px; }
:root[data-machine] .tile-emoji img, :root[data-machine] .cat-ico.rg-px { width: 48px; height: 48px; }
:root[data-machine] .tile-tag { top: 12px; left: 12px; right: auto; font: 400 var(--rg-fs)/1 var(--rg-font); opacity: 1; color: var(--rg-dim); }
:root[data-machine] .chip {
min-height: 44px; padding: 6px 12px; border-radius: 0; border: calc(var(--rg-dot) / 2) solid var(--rg-line); background: var(--rg-win); color: var(--rg-ink);
font: 400 var(--rg-fs)/1.3 var(--rg-font); letter-spacing: var(--rg-track); box-shadow: none;
}
:root[data-machine] .chip[aria-pressed="true"]:not(.chip-cand) { background: var(--rg-ink); color: var(--rg-win); border-color: var(--rg-ink); box-shadow: none; }
:root[data-machine] .chip[aria-pressed="true"]:not(.chip-cand)::after { content: none; }
:root[data-machine] .chip.is-struck { background: transparent; color: var(--rg-dim); text-decoration: line-through; }
:root[data-machine] .linkish { color: var(--rg-hi); font: 400 var(--rg-fs)/1.2 var(--rg-font); }
:root[data-machine] .topic-item { font: 400 var(--rg-fs)/1.5 var(--rg-font); border-radius: 0; color: var(--rg-ink); }
:root[data-machine] :is(.btn, .tile, .chip, .topic-item, .today-card) { position: relative; }
:root[data-machine] :is(.btn, .tile)::before {
content: var(--rg-cursor); position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(var(--rg-cursor-rot)); z-index: 3;
font: 400 var(--rg-fs)/1 "DotGothic16 Sym", var(--rg-font); color: var(--rg-cur); visibility: hidden;
right: auto; bottom: auto; width: auto; height: auto; border: 0; background: none; border-radius: 0; margin: 0;
}
:root[data-machine] .btn-arcade::before { color: var(--rg-btn-ink); }
:root[data-machine] .tile::before { top: 50%; }
:root[data-machine] :is(.btn, .tile):is(:hover, :focus-visible, .is-cur)::before { visibility: visible; }
:root[data-machine] :is(.btn, .tile, .chip, .topic-item, .today-card):focus-visible { outline: 2px solid var(--rg-cur); outline-offset: -6px; box-shadow: none; }
:root[data-machine] .tile:is(:hover, :focus-visible, .is-cur) .tile-title { color: var(--rg-hi); }
:root[data-machine] .btn:disabled::before { content: none; }
:root[data-machine] .tiles:has(.tile:hover) .tile.is-cur:not(:hover)::before,
:root[data-machine] :is(.result-actions, .btn-grid, .btn-row, .rg-menu):has(.btn:hover) .btn.is-cur:not(:hover)::before { visibility: hidden; }
:root[data-machine] .btn:disabled { opacity: 1; --face: var(--rg-win); --edge: var(--rg-dim); --fg: var(--rg-dim); cursor: default; }
@media (hover: hover) { :root[data-machine] .tile:hover { transform: none; box-shadow: none; } }
:root[data-machine] .overlay { background: color-mix(in srgb, var(--rg-screen) 86%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-machine] .result-card { justify-items: stretch; text-align: left; gap: 10px; animation: none; }
:root[data-machine] .result-text { font: 400 var(--rg-fs-m)/1.5 var(--rg-font); letter-spacing: var(--rg-track); color: var(--rg-ink); text-shadow: none; }
:root[data-machine] .result-text.topic { font-size: var(--rg-fs-m); }
:root[data-machine] .result-emoji { font-size: 48px; justify-self: start; }
:root[data-machine] .result-actions { gap: 0; padding: calc(var(--rg-dot) * 2 + 6px) calc(var(--rg-dot) * 2 + 6px); }
:root[data-machine] .result-actions .btn { border: 0; background: transparent; color: var(--rg-ink); min-height: 48px; }
:root[data-machine] .result-actions > .btn-arcade { color: var(--rg-hi); }
:root[data-machine] .result-actions > .btn-arcade::before { color: var(--rg-cur); }
:root[data-machine] .result-actions .btn-row { gap: 0; }
:root[data-machine] .result-sub, :root[data-machine] .defied { color: var(--rg-dim); font: 400 var(--rg-fs)/1.5 var(--rg-font); }
:root[data-machine] .rg-type { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
:root[data-machine] .rg-next { display: inline-block; margin-left: 0.3em; font-family: "DotGothic16 Sym", var(--rg-font); color: var(--rg-cur); visibility: hidden; }
:root[data-machine] .rg-type.is-done + .rg-next { visibility: visible; animation: rg-blink 1s steps(1, end) infinite; }
@keyframes rg-blink { 0%, 70% { opacity: 1; } 70.01%, 100% { opacity: 0; } }
:root[data-machine] .rg-title { display: grid; gap: 6px; justify-items: center; text-align: center; }
:root[data-machine] .rg-game { margin: 0; font: 400 var(--rg-fs-l)/1.15 var(--rg-font-title); color: var(--rg-hi); text-shadow: var(--rg-dot) var(--rg-dot) 0 var(--rg-shade); }
:root[data-machine] .rg-hud { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; width: 100%; font: 400 var(--rg-fs)/1.2 var(--rg-font-title); color: var(--rg-ink); }
:root[data-machine] .rg-proto { margin: 0; font: 400 var(--rg-fs)/1.2 var(--rg-font); color: var(--rg-dim); letter-spacing: 0.04em; }
:root[data-machine] .rg-press { margin: 0; font: 400 var(--rg-fs)/1.2 var(--rg-font); color: var(--rg-ink); }
:root[data-machine] .rg-press.is-wait { animation: rg-blink 1s steps(1, end) infinite; }
:root[data-machine] .rg-cont { margin: 0; font: 400 var(--rg-fs)/1.2 var(--rg-font); color: var(--rg-dim); }
:root[data-machine] .rg-log { margin: 0; justify-self: end; font: 400 var(--rg-fs)/1.2 var(--rg-font); color: var(--rg-dim); }
:root[data-machine] .small { font-size: max(16px, var(--rg-fs)); line-height: 1.5; }
:root[data-machine] .picked-note { font-family: var(--rg-font); font-size: max(16px, var(--rg-fs)); line-height: 1.4; letter-spacing: 0; }
:root[data-machine] { --wheel-lamp-blur: 0; --wheel-pointer-blur: 0; }
:root[data-machine] .toast { font: 400 var(--rg-fs)/1.5 var(--rg-font); animation: none; }
:root[data-machine] .toast.is-leaving { animation: none; opacity: 0; }
:root[data-machine] .row { padding: 10px 12px; }
:root[data-machine] :is(.input, .icon-btn) { border-radius: 0; border: calc(var(--rg-dot) / 2) solid var(--rg-line); background: var(--rg-win); color: var(--rg-ink); font-family: var(--rg-font); }
:root[data-machine] .seg { padding: 6px; }
:root[data-machine] .seg button { border-radius: 0; font: 400 var(--rg-fs)/1.2 var(--rg-font); }
:root[data-machine] .seg button[aria-selected="true"] { background: var(--rg-ink); color: var(--rg-win); }
:root[data-machine] .switch, :root[data-machine] .switch::after { border-radius: 0; transition: none; }
:root[data-machine] .settings h2 { font: 400 var(--rg-fs-m)/1.3 var(--rg-font-title); color: var(--rg-hi); }
:where(.rg-goable) { position: relative; }
:where(button.rg-press) { appearance: none; -webkit-appearance: none; margin: 0; padding: 8px 12px; min-height: 44px; border: 0; border-radius: 0; background: transparent; cursor: pointer; text-transform: inherit; -webkit-tap-highlight-color: transparent; }
:root[data-machine] .rg-go {
position: absolute; inset: 0; z-index: 4; display: block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0;
border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:root[data-machine] .rg-go::before, :root[data-machine] .rg-go::after { content: none; }
:root[data-machine] .rg-goable:has(> .rg-go:active) { translate: 2px 2px; }
@media (hover: hover) { :root[data-machine] .rg-goable:has(> .rg-go:hover) { outline: 2px dashed var(--rg-cur); outline-offset: 4px; } }
:root[data-machine] .rg-press:focus-visible { outline: 2px solid var(--rg-cur); outline-offset: 2px; }
:root[data-machine].rg-hold main.app { pointer-events: none; }
:root[data-machine] .rg-press::before {
content: var(--rg-cursor); display: inline-block; margin-right: 0.5em; transform: rotate(var(--rg-cursor-rot));
font: 400 var(--rg-fs)/1 "DotGothic16 Sym", var(--rg-font); color: var(--rg-cur); visibility: hidden;
}
:root[data-machine] .rg-press:is(:hover, :focus-visible)::before { visibility: visible; }
:root[data-machine] .rg-count { margin: 0; padding-inline: 40px; font: 400 var(--rg-fs)/1.2 var(--rg-font-title); letter-spacing: 0.06em; color: var(--rg-ink); }
:root[data-machine] .rg-say.rg-split { hyphens: manual; -webkit-hyphens: manual; }
:root[data-machine] :is(.rg-say-pre, .rg-say-post) { display: block; font-size: max(16px, 0.5em); line-height: 1.4; letter-spacing: 0; }
:root[data-machine]:not(:lang(ja)) :is(.rg-say-pre, .rg-say-post) { font-size: max(24px, 0.5em); line-height: 1.25; }
:root[data-machine] .rg-ans {
display: block; margin: 2px 0 4px; font-size: 1.5em; font-size: round(nearest, 1.5em, 8px); line-height: 1.12;
overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance;
}
:root[data-machine] :is(.rg-ans.is-long, .topic .rg-ans) { font-size: 1.125em; font-size: round(nearest, 1.125em, 8px); overflow-wrap: break-word; }
:root[data-machine]:lang(ja) .rg-ans { font-size: round(nearest, 2em, 16px); }
:root[data-machine]:lang(ja) :is(.rg-ans.is-long, .topic .rg-ans) { font-size: round(nearest, 1.34em, 16px); }
:root[data-machine] .rg-ans .rg-type { overflow-wrap: inherit; word-break: inherit; }
:root[data-machine] .rg-ans.is-xlong { font-size: max(16px, 1em); font-size: max(16px, round(down, 1em, 8px)); overflow-wrap: break-word; }
:root[data-machine] .rg-ans.is-xxlong { font-size: max(16px, 0.75em); font-size: max(16px, round(down, 0.75em, 8px)); overflow-wrap: break-word; }
:root[data-machine]:lang(ja) .rg-ans.is-xlong { font-size: max(16px, round(down, 1em, 16px)); }
:root[data-machine]:lang(ja) .rg-ans.is-xxlong { font-size: 16px; }
:root[data-machine] .rg-ans .rg-next { font-size: max(16px, 0.5em); vertical-align: middle; }
:root[data-machine] .rg-split .rg-next { display: inline; }
:root[data-machine] .rg-say.is-done .rg-next { visibility: visible; animation: rg-blink 1s steps(1, end) infinite; }
html:root[data-machine] .result-actions > .btn.rg-decide { min-height: 64px; font-size: var(--rg-decide-fs, var(--rg-fs-l)); line-height: 1.15; text-wrap: balance; }
html:root[data-machine] .result-actions > .btn.rg-decide .btn-label { font-size: inherit; line-height: inherit; }
:root[data-machine="es"] { --rg-decide-fs: 48px; }
html:root[data-machine] .result-actions > .btn.rg-decide.has-bf {
display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bf label" "bf sub";
column-gap: 12px; row-gap: 2px; align-items: center; justify-items: start; align-content: center;
}
html:root[data-machine] .rg-decide > .rg-decide-bf {
grid-area: bf; display: block; box-sizing: border-box; width: 48px; height: 48px; image-rendering: auto; pointer-events: none;
padding: var(--rg-decide-bf-pad, 0); background: var(--rg-decide-bf-bg, transparent);
}
:root[data-machine="de"] { --rg-decide-bf-bg: #15171A; --rg-decide-bf-pad: 4px; }
html:root[data-machine] .rg-decide > .btn-label { grid-area: label; }
html:root[data-machine] .rg-decide > .rg-decide-sub {
grid-area: sub; display: block; margin: 0; color: inherit; letter-spacing: 0; line-height: 1.25; text-wrap: balance;
font-size: max(16px, 0.5em); font-size: max(16px, round(down, 0.5em, 8px));
}
@media (max-width: 479px) {
html:root[data-machine] .result-actions > .btn.rg-decide.has-bf { grid-template-areas: "label label" "bf sub"; column-gap: 8px; }
html:root[data-machine] .rg-decide > .rg-decide-bf { width: 32px; height: 32px; }
:root[data-machine="de"] { --rg-decide-bf-pad: 3px; }
}
:root[data-machine] .result-also { margin: 2px 0 0; text-align: center; }
:root[data-machine] .result-also a {
display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; background: var(--rg-win);
font: 400 var(--rg-fs)/1.3 var(--rg-font); color: var(--rg-ink); text-decoration: underline; text-underline-offset: 3px;
}
:root[data-machine] .result-also a:focus-visible { outline: 2px solid var(--rg-cur); outline-offset: 0; }
html:root[data-machine="us"] main.app::before { content: "1UP " var(--rg-score, "000000"); content: "1UP " var(--rg-score, "000000") / ""; }
html:root[data-machine="us"] main.app::after { content: "HI " var(--rg-hi, "000000"); content: "HI " var(--rg-hi, "000000") / ""; }
html:root[data-machine="es"] .draw-stage::before { content: "ROUND " var(--rg-round, "1"); content: "ROUND " var(--rg-round, "1") / ""; }
:root[data-machine] .deck-hint { left: 14px; right: 14px; white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
:root[data-machine] .amida-goal { hyphens: manual; -webkit-hyphens: manual; word-break: normal; overflow-wrap: normal; }
:root[data-machine] .amida-goals.is-tall .amida-goal.is-open {
writing-mode: vertical-rl; text-orientation: mixed; place-items: center; align-content: center;
padding: 8px 0; line-height: 1.05; white-space: normal;
}
:root[data-machine]:lang(ja) .amida-goals.is-tall .amida-goal.is-open { text-orientation: upright; }
:root[data-machine][data-motion="reduce"] :is(.rg-press, .rg-next, .rg-type.is-done + .rg-next, .rg-say.is-done .rg-next) { animation: none; }
@media (prefers-reduced-motion: reduce) {
:root[data-machine]:not([data-motion="full"]) :is(.rg-press, .rg-next, .rg-type.is-done + .rg-next, .rg-say.is-done .rg-next) { animation: none; }
}