:root[data-theme="hub"] {
color-scheme: light;
--violet: #AD5CFF; --violet-ink: #6A1FD0; --paper: #FFF9F0; --ink: #1C1026; --lemon: #FFE14A;
--bg-mode: css; --bg-top: #AD5CFF; --bg-bottom: #AD5CFF; --stripe-opacity: 0;
--cream: #1C1026; --mustard: #6A1FD0; --mustard-dark: #1C1026; --led: #6A1FD0; --focus: #1C1026;
--f-mono: "Space Mono", ui-monospace, monospace;
--font-title: var(--px-label); --font-body: var(--f-mono); --font-rounded: var(--f-mono); --font-led: var(--f-mono);
--px-label: "Silkscreen", "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", monospace;
--px-body: "VT323", "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", monospace;
--px-ja: "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
--sys-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Meiryo", sans-serif;
--bh: 208px; --perch: 20px; --gap: 14px;
--glow: 8px -8px 0 8px rgba(255, 249, 240, .34), 0 0 0 4px rgba(255, 249, 240, .34), 8px -8px 0 12px rgba(255, 249, 240, .16), 0 0 0 8px rgba(255, 249, 240, .16);
}
:root[data-theme="hub"], [data-theme="hub"] body { background: var(--paper); color: var(--ink); }
[data-theme="hub"] body { position: relative; display: flow-root; font: 400 20px/1.3 var(--px-body); }
[data-theme="hub"] canvas.bg { display: none; }
[data-theme="hub"] a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 2px; }
[data-theme="hub"] :is(a, button, summary, input):focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--paper); }
[data-theme="hub"] .hub-title:focus { outline: none; }
[data-theme="hub"] .hub-title[data-kbd]:focus-visible { outline: 2px dotted var(--ink); outline-offset: 10px; box-shadow: none; }
:root.js[data-intro-lang]:not([data-intro-lang="en"]):not([data-hub-lang]) :is([data-i18n], .hub-footer #notice, #hub-notice-details) {
visibility: hidden; animation: hub-i18n-late 0s linear 1.5s forwards !important;
}
@keyframes hub-i18n-late { to { visibility: visible; } }
[data-theme="hub"] .stage { position: relative; max-width: none; width: 100%; margin: 0; min-height: 100vh; min-height: 100dvh; border-radius: 0; background: var(--violet); box-shadow: none; overflow: hidden; overflow: clip; }
[data-theme="hub"] .stage::before, [data-theme="hub"] .stage::after { content: ""; display: block; position: absolute; z-index: 0; top: 0; bottom: auto; left: 0; right: 0; width: auto; pointer-events: none; filter: none; }
[data-theme="hub"] .stage::before { height: 12px;
background: repeating-linear-gradient(90deg, var(--paper) 0 168px, var(--ink) 168px 184px) left 8px top 4px / 100% 4px no-repeat, var(--ink); }
[data-theme="hub"] .stage::after { top: 12px; height: 40px;
background: conic-gradient(from 90deg at 2px 2px, var(--paper) 25%, transparent 0) 0 0 / 4px 4px;
-webkit-mask-image: linear-gradient(#000 0 8px, rgba(0, 0, 0, .5) 8px 20px, rgba(0, 0, 0, .25) 20px 32px, rgba(0, 0, 0, .1) 32px);
mask-image: linear-gradient(#000 0 8px, rgba(0, 0, 0, .5) 8px 20px, rgba(0, 0, 0, .25) 20px 32px, rgba(0, 0, 0, .1) 32px); }
[data-theme="hub"] main.app { position: relative; z-index: 1; flex: none; width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px 16px 0; }
[data-theme="hub"] .entry { display: block; text-align: left; }
[data-theme="hub"] :lang(ja) { line-break: strict; }
[data-theme="hub"] .hub-top { display: flex; align-items: center; gap: 12px; }
[data-theme="hub"] .hub-maker { margin-right: auto; max-width: 11em; font: 400 16px/20px var(--px-label); letter-spacing: 0; text-transform: uppercase; }
[data-theme="hub"] .hub-bar { display: flex; gap: 12px; }
[data-theme="hub"] .hub-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 12px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 0 var(--ink); font: 400 16px/1 var(--px-label); cursor: pointer; }
[data-theme="hub"] .hub-switch:active { transform: translate(4px, 4px); box-shadow: none; }
[data-theme="hub"] .hub-switch-icon { font-family: "DotGothic16 Sym", var(--px-label); }
[data-theme="hub"] .hub-switch-label:lang(ja) { font-family: var(--px-ja); }
[data-theme="hub"] .hub-switch-state { min-width: 3.2em; padding: 3px 4px 2px; border: 2px solid var(--ink); font-size: 16px; text-align: center; }
[data-theme="hub"] .hub-switch[aria-pressed="true"] .hub-switch-state { background: var(--ink); color: var(--paper); }
[data-theme="hub"] .hub-head { margin-top: 16px; }
[data-theme="hub"] .hub-title { position: relative; display: inline-block; width: auto; max-width: 100%; margin: 0; padding: 12px 14px 10px; background: var(--ink); color: var(--paper); text-align: left; text-transform: uppercase;
box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--paper); font: 400 24px/24px var(--px-label); letter-spacing: 0; text-shadow: none; }
[data-theme="hub"] .hub-t2 { display: inline; }
[data-theme="hub"] .hub-pick { display: grid; gap: 16px; min-width: 0; margin-top: 16px; }
[data-theme="hub"] .hub-q { display: grid; justify-items: start; gap: 8px; }
[data-theme="hub"] .hub-six { margin: 0; color: var(--ink); text-wrap: balance; text-transform: uppercase; font: 400 24px/32px var(--px-label); letter-spacing: 0; }
[data-theme="hub"] .hub-six:lang(ja) { font: 400 24px/32px var(--px-ja); text-transform: none; }
[data-theme="hub"] .hub-hook { margin: 0; max-width: 32em; color: var(--ink); text-wrap: balance; font: 400 24px/1.05 var(--px-body); }
[data-theme="hub"] .hub-hook:lang(ja) { font: 400 16px/1.5 var(--px-ja); }
[data-theme="hub"] .hub-how { margin: 0; max-width: 48em; color: var(--ink); text-wrap: balance; font: 400 20px/1.15 var(--px-body); }
[data-theme="hub"] .hub-how:lang(ja) { font: 400 16px/1.6 var(--px-ja); word-break: keep-all; overflow-wrap: anywhere; }
[data-theme="hub"] .welcome, [data-theme="hub"] #last-line { flex-basis: 100%; margin: 0; font: 400 20px/1.2 var(--px-body); color: var(--ink); }
[data-theme="hub"] #last-line a { white-space: nowrap; }
[data-theme="hub"] :is(.welcome, #last-line):lang(ja) { font: 400 16px/1.5 var(--px-ja); }
[data-theme="hub"] .noscript { margin: 0; padding: 10px 12px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); text-align: left; }
[data-theme="hub"] .tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gap); margin: 0; padding: 0; list-style: none; }
[data-theme="hub"] .tickets > li { display: flex; min-width: 0; }
[data-theme="hub"] .country-tile.tk { position: relative; display: block; width: 100%; min-height: 0; padding: var(--perch) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none;
color: var(--ink); text-decoration: none; text-align: left; transform: none; transition: none; }
[data-theme="hub"] .country-tile.tk:active { transform: none; box-shadow: none; }
[data-theme="hub"] .country-tile.tk:focus-visible { outline-offset: 4px; }
[data-theme="hub"] .tk-win { position: absolute; top: calc(var(--perch) - 18px); right: 14%; width: 36px; height: 36px; pointer-events: none; }
[data-theme="hub"] .tk-main { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 0; padding: 0; }
[data-theme="hub"] .tk-no { order: 1; position: relative; display: block; height: var(--bh); margin: 0 8px 0 0; border: 4px solid var(--ink); background-color: var(--face, #000);
box-shadow: 8px -8px 0 0 var(--side, var(--ink)), 8px -8px 0 4px var(--ink), var(--glow); font-size: 0; color: transparent; letter-spacing: 0;
image-rendering: crisp-edges; image-rendering: pixelated; transition: transform .12s steps(2, end); }
[data-theme="hub"] .tk-no::before, [data-theme="hub"] .tk-no::after { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; white-space: pre; }
[data-theme="hub"] .tk-no::before { content: var(--game); top: var(--title-top, 50%); color: var(--title-ink, var(--paper)); font: 400 24px/32px var(--px-label); text-shadow: none; }
[data-theme="hub"] .tk-no::after { content: var(--meta); bottom: 0; height: 28px; padding-top: 4px; background: var(--meta-bg, var(--ink)); color: var(--meta-ink, var(--paper)); font: 400 20px/20px var(--px-body); letter-spacing: .04em; }
[data-theme="hub"] .tk-main::after { content: ""; order: 2; height: 20px; margin: 0 calc(var(--gap) / -2);
background:
repeating-linear-gradient(90deg, transparent 0 4px, var(--violet) 4px 8px, transparent 8px 12px) left 0 top 9px / 100% 4px no-repeat,
conic-gradient(from 90deg at 2px 2px, var(--violet-ink) 25%, var(--ink) 0 50%, var(--violet-ink) 0 75%, var(--ink) 0) left 0 bottom 0 / 4px 4px repeat-x,
linear-gradient(var(--violet-ink) 0 6px, var(--ink) 6px); }
[data-theme="hub"] .tk .cname { order: 3; display: block; margin: 0 8px 0 0; padding: 4px 8px 0; border: 4px solid var(--ink); border-bottom: 0; background: var(--paper); color: var(--ink);
font: 400 24px/24px var(--px-body); letter-spacing: 0; -webkit-text-stroke: 0; overflow-wrap: anywhere; }
[data-theme="hub"] .tk .clang { order: 4; display: block; margin: 0 8px 0 0; padding: 0 8px 4px; border: 4px solid var(--ink); border-top: 0; background: var(--paper); color: var(--ink); font: 400 20px/20px var(--px-body); }
[data-theme="hub"] .tk .cname:lang(ja) { font: 400 24px/24px var(--px-ja); }
[data-theme="hub"] .tk .clang:lang(ja) { padding-bottom: 6px; font: 400 16px/20px var(--px-ja); }
[data-theme="hub"] .tk .tag { order: 5; align-self: flex-start; margin: 4px 0 0; padding: 2px 6px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.2 var(--px-label); }
[data-theme="hub"] .tk .clang { position: relative; }
[data-theme="hub"] .country-tile.tk.is-suggested .clang::after { content: "★"; content: "★" / ""; position: absolute; right: 6px; bottom: 6px; font: 400 16px/16px "DotGothic16 Sym", var(--px-label); }
[data-theme="hub"] .country-tile.tk.is-saved::after { content: "PLAYED"; content: "PLAYED" / ""; position: absolute; z-index: 3; left: 10px; top: calc(var(--perch) + 10px); padding: 0 5px;
border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 20px/20px var(--px-body); letter-spacing: .04em; pointer-events: none; transition: transform .12s steps(2, end); }
[data-theme="hub"] .tk[data-cc="uk"].is-saved::after { left: 14px; top: calc(var(--perch) + 34px); }
[data-theme="hub"] .tk[data-cc="jp"].is-saved::after { top: calc(var(--perch) + 44px); }
[data-theme="hub"] .country-tile.tk.is-suggested :is(.cname, .clang) { background: var(--ink); color: var(--paper); }
:root[data-theme="hub"]:not(.hub-ptr-idle) .country-tile.tk:hover .tk-no,
[data-theme="hub"] .country-tile.tk:is(:focus-visible, .is-hop, .is-going) .tk-no,
:root[data-theme="hub"]:not(.hub-ptr-idle) .country-tile.tk.is-saved:hover::after,
[data-theme="hub"] .country-tile.tk.is-saved:is(:focus-visible, .is-hop, .is-going)::after { transform: translateY(-8px); }
:root[data-theme="hub"]:not(.hub-ptr-idle) .country-tile.tk:hover :is(.cname, .clang),
[data-theme="hub"] .country-tile.tk:is(:focus-visible, .is-hop, .is-going) :is(.cname, .clang) { background: var(--violet-ink); color: var(--paper); }
[data-theme="hub"] .tk[data-cc="us"] { --game: "RAIN\A CHECK"; --meta: "1983 · ARCADE"; --face: #070B12; --side: #3B4652;
--title-ink: #FFB000; --title-shade: 3px 3px 0 #FF3B30; --title-top: auto; --meta-bg: #0F6B3C; --meta-ink: #F2F0E6; }
[data-theme="hub"] .tk[data-cc="us"] .tk-no { background-image:
repeating-linear-gradient(90deg, #FFD866 0 12px, transparent 12px 24px),
linear-gradient(#3B4652, #3B4652),
url("pixel/us/rain-window.png"),
url("pixel/us/cab.png"),
url("pixel/us/skyline.png"),
url("pixel/us/code-rain.png");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat;
background-size: 100% 4px, 100% 28px, 160px 100px, 54px 24px, 320px 120px, 192px 384px;
background-position: center bottom 40px, center bottom 28px, center top 6px, left 16px bottom 44px, center bottom 56px, 0 0; }
[data-theme="hub"] .tk[data-cc="us"] .tk-no::before { top: 24px; bottom: auto; }
[data-theme="hub"] .tk[data-cc="uk"] { --game: "MIDNIGHT\A CIRCUS"; --meta: "1984 · CASSETTE"; --face: #07030D; --side: #7A0724;
--title-ink: #FFC400; --title-shade: 3px 3px 0 #B0102E; --title-top: 54px; --meta-bg: #B0102E; --meta-ink: #FFF1D6; }
[data-theme="hub"] .tk[data-cc="uk"] .tk-no { height: var(--bh); margin-top: 0;    margin-left: 4px; margin-right: 14px;
background-image: url("pixel/uk/wide-bulbs.png"), url("pixel/uk/wide-stands.png");
background-repeat: no-repeat; background-size: 200px 36px, 200px 160px; background-position: center top 8px, center bottom 28px;
box-shadow: inset 0 0 0 6px #B0102E, 8px -8px 0 0 var(--side), 8px -8px 0 4px var(--ink), var(--glow); }
[data-theme="hub"] .tk[data-cc="uk"] .tk-win { top: calc(var(--perch) + 6px); }
[data-theme="hub"] .tk[data-cc="fr"] { --game: "ROCAILLE\A NÉON"; --meta: "1985 · DISQUETTE"; --face: #1E2E52; --side: #142038;
--title-ink: #F2C94C; --title-shade: 4px 2px 0 #F7B3C8; --title-top: auto; --meta-bg: #F2C94C; --meta-ink: #0B1322; }
[data-theme="hub"] .tk[data-cc="fr"] .tk-no { background-image: url("pixel/fr/chandelier.png"), linear-gradient(#0B1322, #0B1322);
background-repeat: no-repeat; background-size: 200px 108px, 100% 68px; background-position: center top 6px, center bottom 28px; }
[data-theme="hub"] .tk[data-cc="fr"] .tk-no::before { bottom: 38px; }
[data-theme="hub"] .tk[data-cc="de"] { --game: "ZUFALLS\A WERK"; --game-name: "ZUFALLSWERK"; --meta: "1987 · DISKETTE"; --face: #15171A; --side: #2A2F36;
--title-ink: #FFC61A; --title-shade: 3px 3px 0 #0B0C0E; --title-top: auto; --meta-bg: #4F86FF; --meta-ink: #0B0C0E; }
[data-theme="hub"] .tk[data-cc="de"] .tk-no { background-image: url("pixel/de/ceiling-rail.png"), url("pixel/de/gear-12.png"), url("pixel/de/conveyor.png"),
linear-gradient(180deg, #2A2F36 0 4px, #4A5058 4px 8px, #8A919A 8px 12px, #4A5058 12px 16px, #2A2F36 16px 20px);
background-repeat: no-repeat; background-size: 160px 24px, 80px 80px, 160px 38px, 100% 20px;
background-position: center top 6px, center top 34px, center bottom 30px, center bottom 92px;
box-shadow: inset 0 0 0 4px #4F86FF, 8px -8px 0 0 var(--side), 8px -8px 0 4px var(--ink), var(--glow); }
[data-theme="hub"] .tk[data-cc="de"] .tk-no::before { bottom: 62px; left: 8px; right: 8px; line-height: 26px; padding: 4px 0 2px; background: #0B0C0E; }
[data-theme="hub"] .tk[data-cc="es"] { --game: "MÁSCARA\A DESTINO"; --game-name: "MÁSCARA VS. DESTINO"; --meta: "1993 · CARTUCHO"; --face: #1B1230; --side: #D81B7A;
--title-ink: #FFD400; --title-shade: 2px 2px 0 #FF3EA5; --title-top: auto; --meta-bg: #FFD400; --meta-ink: #1B1230; }
[data-theme="hub"] .tk[data-cc="es"] .tk-no { background-image: url("pixel/es/pennants.png"), url("pixel/es/mask-01-ol.png"), url("pixel/es/mask-02-ol.png"),
linear-gradient(90deg, #00C2A8 50%, #FF3EA5 50%);
background-repeat: no-repeat; background-size: 214px 26px, 90px 90px, 90px 90px, 100% calc(100% - 92px);
background-position: center top 2px, left -6px top 28px, right -6px top 28px, center top; }
[data-theme="hub"] .tk[data-cc="es"] .tk-no::before { bottom: 38px; line-height: 26px; }
[data-theme="hub"] .tk[data-cc="es"] .tk-main::before { content: "VS."; content: "VS." / ""; position: absolute; z-index: 3; left: 0; right: 8px; top: 60px; text-align: center; color: #FFD400; text-shadow: 3px 3px 0 #1B1230; font: 400 24px/24px var(--px-label); pointer-events: none; }
[data-theme="hub"] .tk[data-cc="jp"] { --game: "ネオン温泉'86"; --meta: "1986 · FLOPPY"; --face: #160E38; --side: #3B1A5E;
--title-ink: #FFC857; --title-shade: 3px 3px 0 #FF5A36; --title-top: auto; --meta-bg: #0C0620; --meta-ink: #FFF3E0; }
[data-theme="hub"] .tk[data-cc="jp"] .tk-no { --sun: linear-gradient(#FFC857, #FFC857);
background-image: url("pixel/jp/town.png"), url("pixel/jp/fireworks.png"),
var(--sun), var(--sun), var(--sun), var(--sun), var(--sun), var(--sun),
linear-gradient(180deg, #160E38 0 80px, #3B1A5E 80px 94px, #7A2AA6 94px 106px, #FF3D8E 106px 116px, #FF7A3D 116px 124px, #160E38 124px);
background-repeat: no-repeat;
background-size: 196px 110px, 90px 46px, 24px 8px, 40px 8px, 48px 8px, 48px 6px, 40px 5px, 24px 4px, 100% 100%;
background-position: center bottom 28px, left 6px top 38px,
right 36px top 76px, right 28px top 84px, right 24px top 92px, right 24px top 100px, right 28px top 108px, right 36px top 115px, center top; }
[data-theme="hub"] .tk[data-cc="jp"] .tk-no::before { top: 8px; font-family: "DotGothic16 Hub", "VT323", var(--sys-ja); letter-spacing: .02em; }
[data-theme="hub"] .tk[data-cc="jp"] :is(.cname, .clang):lang(ja) { font-family: "DotGothic16 Hub", "VT323", var(--sys-ja); }
[data-theme="hub"] .hub-under { display: grid; gap: 18px; margin-top: 20px; }
[data-theme="hub"] .hub-fatecol { display: grid; gap: 14px; align-content: start; }
[data-theme="hub"] .hub-fate { display: grid; justify-items: start; gap: 12px; }
[data-theme="hub"] .btn.hub-hat { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 12px; width: auto; max-width: 100%; min-height: 56px; margin: 0; padding: 8px 18px 8px 12px;
border: 4px solid var(--ink); border-radius: 0; background: var(--lemon); box-shadow: 4px 4px 0 0 var(--ink); color: var(--ink); text-align: left; transform: none; }
[data-theme="hub"] .btn.hub-hat::before { content: none; }
[data-theme="hub"] .btn.hub-hat::after { content: ""; order: -1; flex: none; width: 30px; height: 30px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' shape-rendering='crispEdges'%3E%3Crect x='3' y='3' width='24' height='24' fill='%23FFF9F0' stroke='%231C1026' stroke-width='3'/%3E%3Cg fill='%231C1026'%3E%3Crect x='7' y='7' width='4' height='4'/%3E%3Crect x='19' y='7' width='4' height='4'/%3E%3Crect x='13' y='13' width='4' height='4'/%3E%3Crect x='7' y='19' width='4' height='4'/%3E%3Crect x='19' y='19' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
[data-theme="hub"] .btn.hub-hat .btn-label { font: 400 16px/20px var(--px-label); letter-spacing: 0; text-transform: none; }
[data-theme="hub"] .btn.hub-hat .btn-label:lang(ja) { font: 400 16px/24px var(--px-ja); }
[data-theme="hub"] .btn.hub-hat:hover .btn-label { text-decoration: underline 2px; text-underline-offset: 4px; }
[data-theme="hub"] .btn.hub-hat:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: none; }
[data-theme="hub"] .btn.hub-hat:disabled { opacity: 1; cursor: progress; }
[data-theme="hub"] .fate-pick { display: grid; gap: 8px; justify-items: start; width: 100%; max-width: 30rem; padding: 12px 14px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 4px 4px 0 0 var(--ink); text-align: left; }
[data-theme="hub"] .fate-pick .small.muted { color: var(--ink); font: 400 20px/1.1 var(--px-body); }
[data-theme="hub"] .fate-pick :lang(ja).small { font: 400 16px/1.4 var(--px-ja); }
[data-theme="hub"] .fate-pick .big { font: 400 24px/1.1 var(--px-label); color: var(--ink); text-wrap: balance; }
[data-theme="hub"] .fate-pick .big:lang(ja) { font-family: var(--px-ja); }
[data-theme="hub"] .fate-pick .fate-country { font: 400 24px/1.1 var(--px-body); color: var(--ink); }
[data-theme="hub"] .fate-pick .fate-country:lang(ja) { font: 400 16px/1.5 var(--px-ja); }
[data-theme="hub"] .fate-pick .fate-native { font: 400 20px/1.1 var(--px-body); color: var(--ink); }
[data-theme="hub"] .fate-pick :is(.fate-game, .fate-native):lang(ja) { font-family: "DotGothic16 Hub", "VT323", var(--sys-ja); }
[data-theme="hub"] .fate-pick .fate-native:lang(ja) { font-size: 16px; line-height: 1.5; }
[data-theme="hub"] .fate-pick .btn-row { flex-wrap: wrap; gap: 10px; }
[data-theme="hub"] .fate-pick .btn-row > * { flex: 0 1 auto; }
[data-theme="hub"] .fate-pick .btn { min-height: 48px; margin: 0; padding: 8px 14px; border: 4px solid var(--ink); border-radius: 0; box-shadow: none; font: 400 16px/20px var(--px-label); text-transform: none; white-space: nowrap; }
[data-theme="hub"] .fate-pick .btn:lang(ja) { font-family: var(--px-ja); }
[data-theme="hub"] .fate-pick .btn-arcade { background: var(--violet-ink); color: var(--paper); }
[data-theme="hub"] .fate-pick .btn-red { background: var(--paper); color: var(--ink); }
[data-theme="hub"] .fate-pick .btn:hover { background: var(--ink); color: var(--paper); }
[data-theme="hub"] .fate-pick .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
[data-theme="hub"] .promo-box { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; align-self: start; max-width: 30rem; padding: 14px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 4px 4px 0 0 var(--ink); text-align: left; }
[data-theme="hub"] .promo-box .app-icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: none; }
[data-theme="hub"] .promo-box p { margin: 0 0 8px; font: 400 20px/1.1 var(--px-body); color: var(--ink); }
[data-theme="hub"] .hub-promo-caption { white-space: nowrap; }
[data-theme="hub"] .promo-box p:lang(ja) { font: 400 16px/1.5 var(--px-ja); word-break: keep-all; overflow-wrap: anywhere; }
[data-theme="hub"] .hub-promo-name { font-weight: 400; }
[data-theme="hub"] .promo-box .store-link { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper); font: 400 16px/20px var(--px-label); text-decoration: none; }
[data-theme="hub"] .promo-box .store-link:lang(ja) { font-family: var(--px-ja); word-break: keep-all; }
[data-theme="hub"] .promo-box .store-link::after { content: " →"; white-space: pre; font-family: "DotGothic16 Sym", var(--px-label); }
[data-theme="hub"] .promo-box .store-link > span { text-wrap: balance; }
[data-theme="hub"] .promo-box .store-link:hover { background: var(--violet-ink); }
[data-theme="hub"] .hub-notice { display: grid; gap: 2px; align-content: start; max-width: 30rem; font: 400 20px/1.15 var(--px-body); color: var(--ink); }
[data-theme="hub"] .hub-notice:lang(ja) { font: 400 16px/1.55 var(--px-ja); }
[data-theme="hub"] .hub-notice .entry-line { margin: 0; font-size: inherit; line-height: inherit; }
[data-theme="hub"] .hub-nomoney { font: 400 16px/20px var(--px-label); letter-spacing: 0; text-transform: uppercase; background: none; }
[data-theme="hub"] .hub-nomoney:lang(ja) { font-family: var(--px-ja); text-transform: none; }
[data-theme="hub"] .hub-notice details { padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
[data-theme="hub"] .hub-notice summary { display: list-item; width: fit-content; min-height: 44px; padding: 10px 2px 6px; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font: 400 16px/20px var(--px-label); }
[data-theme="hub"] .hub-notice summary:lang(ja) { font-family: var(--px-ja); }
[data-theme="hub"] .hub-notice details[open] { padding: 0 14px 12px; border: 4px solid var(--ink); background: var(--paper); }
[data-theme="hub"] .hub-notice .notice-list { margin: 4px 0 8px; padding-left: 1.4em; font-size: inherit; line-height: inherit; }
[data-theme="hub"] .hub-notice .notice-list li { margin: 0 0 6px; line-height: 1.15; }
[data-theme="hub"] .hub-notice:lang(ja) .notice-list li { line-height: 1.5; }
[data-theme="hub"] .hub-notice :is(button, .linkish) { font: 400 16px/20px var(--px-label); }
[data-theme="hub"] .hub-footer { position: relative; z-index: 1; margin-top: 44px; }
[data-theme="hub"] .hub-footer .foot { display: grid; gap: 14px; padding: 22px 16px 30px; border-top: 8px solid var(--violet-ink); background: var(--ink); color: var(--paper); text-align: left; font: 400 20px/1.2 var(--px-body); }
[data-theme="hub"] .hub-footer .foot > p:not(.copyright) { display: none; }
[data-theme="hub"] .copyright { margin: 0; padding: 0; border: 0; font: 400 20px/1.2 var(--px-body); color: var(--paper); }
[data-theme="hub"] .copyright a { color: var(--paper); white-space: nowrap; }
[data-theme="hub"] .hub-footer :is(a, button, summary, input):focus-visible { outline-color: var(--paper); box-shadow: 0 0 0 7px var(--violet-ink); }
[data-theme="hub"] .hub-footer .foot details.hub-settings { width: 100%; max-width: 44rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--paper); text-align: left; }
[data-theme="hub"] .hub-footer .foot .hub-settings-sum { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: fit-content; min-height: 44px; padding: 0 14px 0 12px;
border: 4px solid var(--paper); background: var(--ink); list-style: none; cursor: pointer; color: var(--paper); font: 400 16px/1 var(--px-label); letter-spacing: 0; }
[data-theme="hub"] .hub-footer .foot .hub-settings-sum::-webkit-details-marker { display: none; }
[data-theme="hub"] .hub-footer .foot .hub-settings-sum::after { content: "▼"; display: inline-block; transform: rotate(-90deg); font: 400 16px/1 "DotGothic16 Sym", var(--px-label); }
[data-theme="hub"] .hub-footer .foot details.hub-settings[open] > .hub-settings-sum::after { transform: none; }
[data-theme="hub"] .hub-footer .foot .hub-settings-sum:hover,
[data-theme="hub"] .hub-footer .foot details.hub-settings[open] > .hub-settings-sum { background: var(--violet-ink); }
[data-theme="hub"] .hub-gear { font-size: 16px; line-height: 1; }
[data-theme="hub"] .hub-settings-label:lang(ja) { font-family: var(--px-ja); }
[data-theme="hub"] .hub-settings-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 10px; padding: 10px 14px; border: 4px solid var(--paper); background: var(--paper); color: var(--ink); }
[data-theme="hub"] .hub-settings-body .hub-switch { box-shadow: none; }
[data-theme="hub"] .hub-settings :is(.hub-opening, .hub-opening-again) { font: 400 20px/1.2 var(--px-body); color: var(--ink); }
[data-theme="hub"] .hub-settings .hub-opening-again { border: 4px solid var(--ink); font: 400 16px/20px var(--px-label); }
[data-theme="hub"] .hub-settings:lang(ja) :is(.hub-opening, .hub-opening-again) { font: 400 16px/1.4 var(--px-ja); }
[data-theme="hub"] .hub-settings .hub-opening { margin: 0; }
[data-theme="hub"] .hub-settings .hub-opening-again:hover { background: var(--violet); }
@media (max-width: 359px) {
:root[data-theme="hub"] { --bh: 196px; --gap: 10px; }
[data-theme="hub"] .hub-switch-icon { display: none; }
}
@media (min-width: 600px) {
:root[data-theme="hub"] { --bh: 216px; --gap: 18px; }
[data-theme="hub"] main.app { padding: 28px 32px 0; }
[data-theme="hub"] .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
[data-theme="hub"] .hub-maker { max-width: none; }
[data-theme="hub"] .hub-title { padding: 14px 18px 12px; font-size: 32px; line-height: 32px; }
[data-theme="hub"] .hub-six { font-size: 32px; line-height: 40px; }
[data-theme="hub"] .hub-six:lang(ja) { font-size: 32px; line-height: 40px; }
[data-theme="hub"] .hub-hook { font-size: 32px; }
[data-theme="hub"] .hub-hook:lang(ja) { font-size: 24px; line-height: 1.4; }
[data-theme="hub"] .hub-how { font-size: 24px; }
[data-theme="hub"] .hub-under { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
[data-theme="hub"] .hub-footer .foot { padding: 24px 32px 32px; }
}
@media (min-width: 1200px) {
:root[data-theme="hub"] { --bh: 224px; --gap: 20px; }
[data-theme="hub"] main.app { padding: 28px 48px 0; }
[data-theme="hub"] .tickets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-theme="hub"] .hub-head { margin-top: 12px; }
[data-theme="hub"] .hub-pick { margin-top: 12px; }
[data-theme="hub"] .hub-under { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; margin-top: 22px; }
[data-theme="hub"] .promo-box { grid-template-columns: 80px minmax(0, 1fr); }
[data-theme="hub"] .promo-box .app-icon { width: 80px; height: 80px; border-radius: 18px; }
[data-theme="hub"] .hub-footer .foot { padding: 24px 48px 32px; }
}
@media (min-width: 1400px) {
:root[data-theme="hub"] { --bh: 240px; --gap: 24px; }
[data-theme="hub"] main.app { padding: 28px 56px 0; }
[data-theme="hub"] .hub-footer .foot { padding: 24px 56px 32px; }
}
:root[data-theme="hub"][data-hub-motion="reduce"] *, :root[data-theme="hub"][data-hub-motion="reduce"] *::before, :root[data-theme="hub"][data-hub-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
:root[data-theme="hub"]:not([data-motion="full"]) *, :root[data-theme="hub"]:not([data-motion="full"]) *::before, :root[data-theme="hub"]:not([data-motion="full"]) *::after { animation: none !important; transition: none !important; }
}
[data-theme="hub"] .hub-globe { position: relative; width: 144px; height: 144px; margin: 16px 0 8px 24px; }
[data-theme="hub"] .hub-globe[hidden] { display: none; }
[data-theme="hub"] .hub-globe-cv { display: block; width: 144px; height: 144px; image-rendering: crisp-edges; image-rendering: pixelated; }
[data-theme="hub"] .hub-globe::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -10px; height: 6px; background: rgba(28, 16, 38, .35); }
[data-theme="hub"] .hub-globe-dart { position: absolute; z-index: 2; left: 0; top: 0; width: 48px; height: 24px; image-rendering: crisp-edges; image-rendering: pixelated;
transform: translate(calc(var(--tx, 24) * 3px), calc(var(--ty, 24) * 3px - 24px)); opacity: 0; }
[data-theme="hub"] .hub-globe-dart.is-in { opacity: 1; }
[data-theme="hub"] .hub-globe-dart.is-flying { animation: hub-dart-in .32s steps(6, end) both; }
@keyframes hub-dart-in { from { transform: translate(calc(var(--tx, 24) * 3px + 180px), calc(var(--ty, 24) * 3px - 24px - 90px)); } }
[data-theme="hub"] .hub-globe.is-hit .hub-globe-cv { animation: hub-globe-hit .3s steps(3, end); }
@keyframes hub-globe-hit { 33% { transform: translate(3px, 0); } 66% { transform: translate(-3px, 0); } }
@media (prefers-reduced-motion: reduce) { [data-theme="hub"] .hub-globe-dart.is-flying, [data-theme="hub"] .hub-globe.is-hit .hub-globe-cv { 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; }
}