:root:not([data-theme="hub"]) {
--fx-paper: #FFF9F0; --fx-ink: #1C1026; --fx-lemon: #FFE14A;
--fx-hover: color-mix(in srgb, var(--fx-ink) 14%, var(--fx-paper));
--fx-title: "Rye", Georgia, serif;
--frame-mono: "Space Mono", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Meiryo", ui-monospace, monospace;
--fx-top-h: 60px;
--fx-top: calc(var(--fx-top-h) + env(safe-area-inset-top, 0px));
--fx-notch: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
@media (min-width: 600px) { :root:not([data-theme="hub"]) { --fx-top-h: 66px; } }
:root:not([data-theme="hub"]) #topbar {
position: sticky; top: 0; z-index: 6;
display: flex; align-items: center; gap: 6px;
height: var(--fx-top); margin: 0; padding: env(safe-area-inset-top, 0px) 10px 0;
background: var(--fx-paper); color: var(--fx-ink);
border: 0; border-bottom: 3px solid var(--fx-ink); border-image: none; border-radius: 0; box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
font: 400 14px/1 var(--frame-mono); text-transform: none; letter-spacing: 0;
}
:root:not([data-theme="hub"]) #topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5px; pointer-events: none;
background: repeating-linear-gradient(90deg, var(--fx-paper) 0 14px, transparent 14px 22px); }
:root:not([data-theme="hub"]) #topbar :focus-visible,
:root:not([data-theme="hub"]) body > .foot :focus-visible { outline: 3px solid var(--fx-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--fx-lemon); }
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch) {
position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
flex: none; min-width: 44px; min-height: 44px; height: 44px; margin: 0; padding: 0 9px;
border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fx-ink);
font: 400 14px/1 var(--frame-mono); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
}
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch)::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--fx-paper); border: 2.5px solid var(--fx-ink); -webkit-mask: var(--fx-notch); mask: var(--fx-notch); }
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch):hover::before { background: var(--fx-hover); }
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch):active { transform: translateY(1px); }
:root:not([data-theme="hub"]) #topbar .fx-country { color: var(--fx-paper); }
:root:not([data-theme="hub"]) #topbar .fx-country::before { background: var(--fx-ink); }
:root:not([data-theme="hub"]) #topbar .fx-country:hover { color: var(--fx-ink); }
:root:not([data-theme="hub"]) #topbar .fx-country:hover::before { background: var(--fx-hover); }
:root:not([data-theme="hub"]) #topbar .fx-ico { display: block; width: 26px; height: 18px; flex: none; }
:root:not([data-theme="hub"]) #topbar .fx-ico svg { display: block; }
:root:not([data-theme="hub"]) #topbar .fx-arrow { font-size: 18px; line-height: 1; }
:root:not([data-theme="hub"]) #topbar .fx-gear { font-size: 18px; }
:root:not([data-theme="hub"]) #topbar .fx-label { display: none; }
:root:not([data-theme="hub"]) .pill.fx-switch { gap: 6px; padding: 0 8px 0 12px; }
:root:not([data-theme="hub"]) .fx-switch-icon { display: none; }
:root:not([data-theme="hub"]) .fx-switch-state { min-width: 2.9em; padding: 4px 4px; border: 2px solid var(--fx-ink); background: var(--fx-paper); color: var(--fx-ink); font-size: 12px; line-height: 1; text-align: center; }
:root:not([data-theme="hub"]) .fx-switch[aria-pressed="true"] .fx-switch-state { background: var(--fx-ink); color: var(--fx-paper); }
:root:not([data-theme="hub"]) .pill.fx-switch.fx-switch-wide { height: 48px; min-height: 48px; padding: 0 12px 0 18px; font-size: 15px; }
:root:not([data-theme="hub"]) .fx-switch-wide .fx-switch-icon { display: inline; }
:root:not([data-theme="hub"]) #topbar .topbar-title {
flex: 1 1 0; min-width: 0; align-self: stretch; margin: 0; padding: 0 2px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
overflow: hidden; container-type: inline-size; text-align: left; white-space: nowrap; color: var(--fx-ink);
font: 400 12px/1.2 var(--frame-mono); text-transform: none; letter-spacing: 0;
}
:root:not([data-theme="hub"]) #topbar .fx-mark { display: block; padding: 3px 0 2px; color: var(--fx-ink);
font: 400 18px/1 var(--fx-title); font-size: min(18px, calc(100cqi / 7.4)); letter-spacing: 0; transform: rotate(-1.6deg); transform-origin: 0 60%; }
:root:not([data-theme="hub"]) #topbar .fx-view { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
font: 400 12px/1.2 var(--frame-mono); color: var(--fx-ink); }
:root:not([data-theme="hub"]) #topbar .fx-view:empty { display: none; }
:root:not([data-theme="hub"]) #topbar .fx-view small { display: inline; font: inherit; color: var(--fx-ink); letter-spacing: 0; text-transform: none; }
:root:not([data-theme="hub"]) #topbar .fx-view small::before { content: " · "; color: var(--fx-ink); }
:root:not([data-theme="hub"]) #topbar .fx-view.is-ticket { color: var(--fx-ink); }
:root:not([data-theme="hub"]) #topbar .fx-no { display: none; color: var(--fx-ink); letter-spacing: .06em; }
@media (min-width: 900px) {
@container (min-width: 430px) {
:root:not([data-theme="hub"]) #topbar .fx-no { display: inline; }
:root:not([data-theme="hub"]) #topbar .fx-no + .fx-place::before { content: " · "; color: var(--fx-ink); }
}
}
:root:not([data-theme="hub"]) #topbar .fx-place:lang(ja) { font-weight: 700; }
@media (max-width: 350px) {
:root:not([data-theme="hub"]) #topbar { gap: 6px; padding-inline: 8px; }
:root:not([data-theme="hub"]) #topbar .fx-switch-icon { display: inline; }
:root:not([data-theme="hub"]) #topbar .fx-switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root:not([data-theme="hub"]) #topbar .pill.fx-switch { padding: 0 8px 0 12px; gap: 6px; }
}
@media (min-width: 600px) {
:root:not([data-theme="hub"]) #topbar { gap: 12px; padding-inline: clamp(16px, 3vw, 40px); }
:root:not([data-theme="hub"]) #topbar .fx-back .fx-label { display: inline; }
:root:not([data-theme="hub"]) #topbar .fx-switch-icon { display: inline; }
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch) { height: 46px; min-height: 46px; padding: 0 14px; }
:root:not([data-theme="hub"]) .pill.fx-switch { gap: 8px; padding: 0 10px 0 14px; }
:root:not([data-theme="hub"]) .fx-switch-state { min-width: 3.2em; padding: 4px 5px; }
:root:not([data-theme="hub"]) #topbar .fx-gear { min-width: 50px; font-size: 20px; }
:root:not([data-theme="hub"]) #topbar .fx-mark { font-size: min(22px, calc(100cqi / 7.4)); }
:root:not([data-theme="hub"]) #topbar .fx-view { font-size: 13px; }
}
@media (min-width: 720px) {
:root:not([data-theme="hub"]) #topbar .fx-country .fx-label { display: inline; }
}
@media (min-width: 900px) {
:root:not([data-theme="hub"]) #topbar .topbar-title { flex-direction: row; align-items: center; gap: 14px; padding-left: 8px; }
:root:not([data-theme="hub"]) #topbar .fx-mark { flex: none; font-size: 25px; padding: 0; }
:root:not([data-theme="hub"]) #topbar .fx-view { flex: 0 1 auto; min-width: 0; }
:root:not([data-theme="hub"]) #topbar .fx-view { font-size: 14px; }
:root:not([data-theme="hub"]) #topbar .fx-view::before { content: "/"; margin-right: 12px; color: var(--fx-ink); }
}
@media (max-width: 599px) {
:root:not([data-theme="hub"]) #topbar .fx-view { font-size: 13px; }
}
@media (min-width: 1100px) {
:root:not([data-theme="hub"]) .pill:is(.fx-tk, .fx-switch) { font-size: 16px; }
:root:not([data-theme="hub"]) #topbar .fx-view { font-size: 16px; }
:root:not([data-theme="hub"]) .fx-switch-state { font-size: 14px; }
}
:root:not([data-theme="hub"]) .scene { top: var(--fx-top); }
:root:not([data-theme="hub"]) .stage { min-height: calc(100vh - var(--fx-top)); min-height: calc(100dvh - var(--fx-top)); }
@media (min-width: 640px) {
:root:not([data-theme="hub"]) .stage { min-height: calc(100dvh - 48px - var(--fx-top)); }
}
@media (min-width: 1200px) {
:root:not([data-theme="hub"])::before, :root:not([data-theme="hub"])::after,
:root:not([data-theme="hub"]) body::before, :root:not([data-theme="hub"]) body::after { top: var(--fx-top); }
}
:root:not([data-theme="hub"]) body > .foot {
position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; align-items: start;
margin: 0; padding: 30px clamp(16px, 4vw, 64px) max(34px, env(safe-area-inset-bottom));
background: var(--fx-paper); color: var(--fx-ink); border: 0; border-top: 3px solid var(--fx-ink); border-radius: 0; box-shadow: none;
text-align: left; font: 400 16px/1.6 var(--frame-mono); letter-spacing: 0; text-transform: none;
}
:root:not([data-theme="hub"]) body > .foot p { margin: 0; max-width: 44em; }
:root:not([data-theme="hub"]) body > .foot a { color: var(--fx-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root:not([data-theme="hub"]) body > .foot .nomoney { padding: 5px 10px; border: 2.5px solid var(--fx-ink); border-radius: 0; background: none; color: var(--fx-ink);
font: 400 16px/1.5 var(--frame-mono); letter-spacing: .04em; text-transform: uppercase; text-shadow: none; transform: rotate(-1.5deg); }
:root:not([data-theme="hub"]) body > .foot .store-link { position: relative; display: inline-flex; min-height: 46px; padding: 8px 16px; border: 0; border-radius: 0; box-shadow: none;
background: var(--fx-ink); color: var(--fx-paper); font: 400 16px/1.25 var(--frame-mono); text-decoration: none; }
:root:not([data-theme="hub"]) body > .foot .store-link:hover { background: color-mix(in srgb, var(--fx-ink) 80%, var(--fx-paper)); }
:root:not([data-theme="hub"]) body > .foot details { width: 100%; max-width: 40rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fx-ink); text-align: left; }
:root:not([data-theme="hub"]) body > .foot summary { display: list-item; width: fit-content; min-height: 44px; padding: 10px 2px; cursor: pointer; justify-content: start;
color: var(--fx-ink); font: 400 16px/1.5 var(--frame-mono); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root:not([data-theme="hub"]) body > .foot details[open] { padding: 0 14px 12px; border: 2.5px solid var(--fx-ink); background: var(--fx-paper); }
:root:not([data-theme="hub"]) body > .foot .notice-list { margin: 4px 0 8px; padding-left: 1.4em; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; color: var(--fx-ink); }
:root:not([data-theme="hub"]) body > .foot .linkish { color: var(--fx-ink); font: 400 16px/1.2 var(--frame-mono); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: currentColor; }
:root:not([data-theme="hub"]) body > .foot .copyright { padding-top: 14px; border-top: 2px dashed var(--fx-ink); width: 100%; max-width: none; color: var(--fx-ink); font: 400 14px/1.6 var(--frame-mono); }
:root:not([data-theme="hub"]) body > .foot .copyright a { font: 400 16px/1 var(--fx-title); white-space: nowrap; }
@media (min-width: 900px) {
:root:not([data-theme="hub"]) body > .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px;
grid-template-areas: "money notice" "official notice" "store notice" "copy copy"; grid-template-rows: auto auto 1fr auto; }
:root:not([data-theme="hub"]) body > .foot .nomoney { grid-area: money; }
:root:not([data-theme="hub"]) body > .foot .fx-official { grid-area: official; }
:root:not([data-theme="hub"]) body > .foot .fx-store { grid-area: store; }
:root:not([data-theme="hub"]) body > .foot details { grid-area: notice; }
:root:not([data-theme="hub"]) body > .foot .copyright { grid-area: copy; }
}
:root:not([data-theme="hub"]) .switch { border-radius: 0; border-width: 2px; }
:root:not([data-theme="hub"]) .switch::after { top: 2px; left: 2px; border-radius: 0; }
:root:not([data-theme="hub"]) .store-link { border-radius: 0; box-shadow: none; font-family: var(--frame-mono); font-weight: 400; font-size: 1rem; letter-spacing: .01em; }
:root:not([data-theme="hub"]) .store-link::after { content: " →"; white-space: pre; }
:root:not([data-theme="hub"]) .result-below,
:root:not([data-theme="hub"]) .panel:has(> .store-link) { border-radius: 0; box-shadow: none; outline: 2px dashed color-mix(in srgb, currentColor 55%, transparent); outline-offset: -7px; }
:root:not([data-theme="hub"]) .result-below { padding: 16px; }
:root:not([data-theme="hub"]) .result-below .promo-line { font-family: var(--frame-mono); font-weight: 400; font-size: 1rem; }
:root:not([data-theme="hub"]) :lang(ja) :is(p, li, figcaption) { text-wrap: pretty; }
:root:not([data-theme="hub"]) #topbar .fx-country { flex-direction: column; gap: 3px; padding: 0 8px; }
:root:not([data-theme="hub"]) #topbar .fx-short { display: block; font: 400 12px/1 var(--frame-mono); letter-spacing: 0; white-space: nowrap; }
:root:not([data-theme="hub"]) #topbar .fx-short:lang(ja) { font-weight: 700; }
@media (min-width: 720px) {
:root:not([data-theme="hub"]) #topbar .fx-country { flex-direction: row; gap: 8px; padding: 0 14px; }
:root:not([data-theme="hub"]) #topbar .fx-short { display: none; }
}
:root:not([data-theme="hub"]) .cat-ico { display: block; width: 1em; height: 1em; margin: 0 auto; object-fit: contain; }
:root:not([data-theme="hub"]) .led .led-ico { display: inline-block; width: 1.3em; height: 1.3em; margin: 0 0.4em 0 0; vertical-align: -0.3em; }
:root:not([data-theme="hub"]) .today-text .today-ico { display: inline-block; width: 1.25em; height: 1.25em; margin: 0 0.35em 0 0; vertical-align: -0.28em; }
:root:not([data-theme="hub"]) .tn-tag { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: -6px auto 0; padding: 5px 14px 5px 8px; text-align: left; }
:root:not([data-theme="hub"]) .tn-bf { flex: none; display: block; width: 34px; height: 34px; }
:root:not([data-theme="hub"]) .tn-text { min-width: 0; overflow-wrap: anywhere; }
:root:not([data-theme="hub"]) .tn-lead { white-space: nowrap; }
:root:not([data-theme="hub"]) .tn-arrow { white-space: pre; }
:root:not([data-theme="hub"]) .tn-place { white-space: nowrap; }
:root:not([data-theme="hub"]) .draw > .tn-tag { margin-top: 0; }
@media (max-width: 380px) {
:root:not([data-theme="hub"]) .tn-bf { width: 28px; height: 28px; }
}
:root:not([data-theme="hub"]):not([data-machine]) .picked-note { font-size: 0.8rem; letter-spacing: 0.02em; }
html.intro-open, html.intro-open body { overflow: hidden; }
html[data-intro] { background: #0B0805 !important; }
.hub-veil { position: fixed; left: 0; top: 0; z-index: 3; display: block; max-width: none; pointer-events: none; mix-blend-mode: color; image-rendering: crisp-edges; image-rendering: pixelated; }
.gate {
position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: clamp(12px, 2.4vh, 22px); padding: 16px; overflow-y: auto;
background: radial-gradient(70% 60% at 50% 45%, #2A1D12 0%, #0B0805 75%); color: #F0E3C6;
font-family: var(--font-body, system-ui, sans-serif);
--ticket-ink: #62432F; --ticket-button: #62432F; --ticket-cream: #F3E4C6; --ticket-gold: #8E6A3E; --ticket-dark: #38291F;
}
.gate[hidden] { display: none; }
html[data-intro="film"] .gate > * { visibility: hidden; }
.gate.is-circus { --ticket-ink: #7A0724; --ticket-button: #B0102E; --ticket-cream: #FFF1D6; --ticket-gold: #B36B00; --ticket-dark: #3B0E5C; }
.gate-reel { margin: 0; font: italic 400 16px/1.3 "Playfair Display", Georgia, serif; letter-spacing: .04em; color: #D9C39A; text-align: center; }
.gate-wrap { position: relative; width: min(680px, 94vw); }
.gate-ticket {
container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 2; border: 0; padding: 0; margin: 0;
background: none; color: var(--ticket-ink); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.gate-ticket:focus-visible { outline: 3px solid #FFF1D6; outline-offset: 5px; border-radius: 8px; }
.gate-ticket[aria-disabled="true"] { cursor: default; }
.gt-body, .gt-stub { position: absolute; inset: 0; display: block; pointer-events: none; }
.gt-body { transform-origin: 37% 50%; }
.gt-stub { transform-origin: 72.6667% 50%; }
.gate-ticket img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; }
.gt-title { position: absolute; left: 12.7%; top: 36.4%; width: 51.6%; font: 400 5.4cqw/1.2 "Rye", Georgia, serif; letter-spacing: -.015em; white-space: nowrap; text-align: center; text-transform: uppercase; }
.gt-enter {
position: absolute; left: 25.5%; top: 53.33%; width: 26%; height: 15%; display: flex; gap: .4em; justify-content: center; align-items: center;
background: var(--ticket-button); color: var(--ticket-cream); font: 800 3.6cqw/1 var(--font-body, system-ui, sans-serif);
border: 1px solid var(--ticket-gold); box-shadow: 0 2px 0 var(--ticket-dark); border-radius: 2px; white-space: nowrap;
}
.gt-enter > span[aria-hidden] { font-size: .7em; }
.gate-ticket:hover .gt-enter { filter: brightness(1.12); }
.gt-stub-copy { position: absolute; left: 76.5%; top: 28%; width: 17%; height: 44%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35em; writing-mode: vertical-rl; text-align: center; font: 400 2.6cqw/1 var(--f-mono, "Space Mono", ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.gt-stub-copy strong { font: 400 3.2cqw/1 var(--f-mono, "Space Mono", ui-monospace, monospace); letter-spacing: .1em; }
.gate[lang="ja"] .gt-stub-copy strong { font: 600 4cqw/1.2 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", sans-serif; letter-spacing: .1em; }
.gt-fibers { opacity: 0; }
.gate-ticket[data-state="torn"] .gt-fibers { opacity: 1; }
.gate-ticket[data-state="torn"] .gt-stub { animation: gate-tear 860ms cubic-bezier(.25,.6,.45,1) forwards; }
.gate-ticket[data-state="torn"] .gt-body { animation: gate-tug 860ms ease-out forwards; }
@keyframes gate-tear { 0% { transform: translate(0,0) rotate(0); 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 gate-tug { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-1.4deg); } 34% { transform: rotate(.8deg); } }
.gate.is-leaving .gate-wrap, .gate.is-leaving .gate-line, .gate.is-leaving .gate-reel, .gate.is-leaving .gate-quiet { transition: opacity .3s ease .25s; opacity: 0; }
.gate-bf { position: absolute; left: 0; top: -9%; width: clamp(52px, 13%, 92px); aspect-ratio: 1; transform: rotate(-14deg); pointer-events: none; z-index: 1; }
.gate-bf img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.gate-bf img.on { visibility: visible; }
html:not([data-intro-reduced]) .gate-bf img { animation: gate-bf-flap 2.4s steps(1) infinite; }
html:not([data-intro-reduced]) .gate-bf img:nth-child(1) { animation-name: gate-bf-f0; }
html:not([data-intro-reduced]) .gate-bf img:nth-child(2) { animation-name: gate-bf-f1; }
html:not([data-intro-reduced]) .gate-bf img:nth-child(3) { animation-name: gate-bf-f2; }
@keyframes gate-bf-f0 { 0%, 81.6% { visibility: visible; } 81.7%, 95.4% { visibility: hidden; } 95.5%, 100% { visibility: visible; } }
@keyframes gate-bf-f1 { 0%, 81.6% { visibility: hidden; } 81.7%, 86.2% { visibility: visible; } 86.3%, 90.8% { visibility: hidden; } 90.9%, 95.4% { visibility: visible; } 95.5%, 100% { visibility: hidden; } }
@keyframes gate-bf-f2 { 0%, 86.2% { visibility: hidden; } 86.3%, 90.8% { visibility: visible; } 90.9%, 100% { visibility: hidden; } }
.gate-line { margin: 0; max-width: 34em; text-align: center; font: italic 400 clamp(17px, 2.6vw, 22px)/1.4 "Playfair Display", Georgia, serif; color: #F0E3C6; text-wrap: balance; }
.gate[lang="ja"] .gate-line, .gate[lang="ja"] .gate-reel { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; font-style: normal; letter-spacing: .04em; }
.gate[lang="ja"] :is(.gate-line, .gate-reel, .gate-quiet), .film[lang="ja"] .film-card p { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.gate-card { display: contents; }
.gate-card-frame { display: none; }
.gate[data-still] .gate-card { display: block; position: relative; flex: none; width: min(560px, 94vw); aspect-ratio: 16 / 9; container-type: inline-size; background: #f1e6d0; }
.gate[data-still] .gate-card-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.gate[data-still] .gate-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(0,0,0,0) 60%, rgba(16,10,4,.28) 90%, rgba(10,6,2,.5) 100%); }
.gate[data-still] .gate-line { position: absolute; left: 17.5%; top: 26.66667%; width: 65%; height: 40.55556%; max-width: none; display: flex; align-items: center; justify-content: center; color: #3A2418; font-size: clamp(14px, 4.1cqw, 23px); line-height: 1.32; }
.gate[data-still][lang="ja"] .gate-line { font-size: clamp(13px, 3.7cqw, 20px); line-height: 1.5; }
.gate-quiet { min-height: 44px; padding: 8px 14px; border: 0; background: none; color: #F0E3C6; font: 700 16px/1.2 var(--font-body, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate-quiet:focus-visible { outline: 3px solid #FFF1D6; outline-offset: 3px; }
[data-theme="hub"] :is(.gt-enter, .gate-quiet, .film-btn) { font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
.gate-ticket[data-state="torn"] .gt-stub { animation: none; opacity: 0; }
.gate-ticket[data-state="torn"] .gt-body { animation: none; }
}
.film { position: fixed; inset: 0; z-index: 92; color: #F0E3C6; font-family: var(--font-body, system-ui, sans-serif); }
.film[hidden] { display: none; }
.film:focus, .film:focus-visible { outline: none; }
.film-curtain { position: absolute; inset: 0; background: #0B0805; overflow: hidden; }
.film-screen { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; height: 100dvh; transform: translate(-50%, -50%); container-type: size; }
@media (min-aspect-ratio: 1/1) { .film-screen { height: min(90vh, 67.5vw); width: calc(min(90vh, 67.5vw) * 4 / 3); } }
.film-weave { position: absolute; inset: 0; will-change: transform; }
.film-image { position: absolute; inset: 0; overflow: hidden; background: #1B130B; }
.film-light { position: absolute; inset: 0; background: radial-gradient(75% 70% at 50% 48%, #CDB386 0%, #A68A5C 45%, #5E4429 85%, #2A1C10 100%); }
.film-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.film-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(0,0,0,0) 55%, rgba(16,10,4,.55) 88%, rgba(10,6,2,.85) 100%); }
.film-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; opacity: .5; }
.film-iris { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.film-mirror { position: absolute; inset: 0; transform-origin: 50% 50%; }
.film-pano { position: absolute; left: 0; top: 0; will-change: transform; filter: grayscale(1) sepia(.85) brightness(.82) contrast(1.15); }
.film-world { position: absolute; left: 0; top: 0; }
.film-world img { position: absolute; display: block; height: auto; }
.film-world img.is-ink { filter: brightness(.4) contrast(1.25); }
.film-floor { position: absolute; display: block; height: 0; border-top: 2px solid rgba(34, 23, 12, .72); }
.film-place { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); font: italic 400 clamp(16px, 2.4cqw, 26px)/1 "Playfair Display", Georgia, serif; color: #22170C; letter-spacing: .06em; opacity: .9; white-space: nowrap; }
.film-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(rgba(60, 42, 26, .26), rgba(30, 20, 12, .42)); }
.film[data-vert="true"] .film-ground { display: none; }
@media (min-aspect-ratio: 1/1) { .film-place { bottom: 18%; } }
.film[data-vert="true"] .film-place { font-size: clamp(22px, 7.6cqw, 34px); letter-spacing: .05em; color: #22170C; opacity: .92; }
.film-card { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #f1e6d0; }
.film-card.is-on { display: flex; }
.film-card .in { position: relative; flex: none; container-type: inline-size; }
.film[data-card="land"] .film-card .in { width: min(100cqw, 177.778cqh); aspect-ratio: 16 / 9; }
.film[data-card="port"] .film-card { padding: 12px 0; }
.film[data-card="port"] .film-card .in { width: min(100cqw, calc((100cqh - 24px) * .5625)); aspect-ratio: 9 / 16; }
.film-card-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.film[data-card="land"] .film-card-frame.is-port, .film[data-card="port"] .film-card-frame.is-land { display: none; }
.film-card-safe { position: absolute; display: flex; align-items: center; justify-content: center; }
.film[data-card="land"] .film-card-safe { left: 17.5%; top: 26.66667%; width: 65%; height: 40.55556%; }
.film[data-card="port"] .film-card-safe { left: 16.11111%; top: 18.75%; width: 67.77778%; height: 58.125%; }
.film-card p { margin: 0; text-align: center; color: #3A2418; font: italic 400 clamp(19px, 3.9cqw, 46px)/1.35 "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", Georgia, serif; text-wrap: balance; }
.film[data-card="port"] .film-card p { font-size: clamp(19px, 7cqw, 40px); }
.film[lang="ja"] .film-card p { font-style: normal; letter-spacing: .04em; font-size: clamp(18px, 3.4cqw, 40px); font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; }
.film[lang="ja"][data-card="port"] .film-card p { font-size: clamp(16px, 5.2cqw, 34px); }
.film-deco { position: absolute; inset: 0; pointer-events: none; }
.film[data-scene^="c"] .film-deco { visibility: hidden; }
.film-corner { position: absolute; height: auto; }
.film-corner.tl, .film-corner.tr { width: clamp(56px, 13vmin, 120px); top: 0; }
.film-corner.bl, .film-corner.br { width: clamp(77px, 17.9vmin, 166px); bottom: 0; }
.film-corner.tl, .film-corner.bl { left: 0; }
.film-corner.tr, .film-corner.br { right: 0; transform: scaleX(-1); }
.film-bfs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.film-bf { position: absolute; left: 0; top: 0; width: 96px; height: 96px; will-change: transform; visibility: hidden; }
.film-bf img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.film-bf[style*="visible"] img.on { visibility: visible; }
.film-skips { position: absolute; z-index: 2; right: 16px; top: max(16px, env(safe-area-inset-top)); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.film-skips[hidden] { display: none; }
.film-btn { min-height: 44px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid #D9C39A; background: rgba(23,16,10,.84); color: #F0E3C6; font: 700 16px/1 var(--font-body, system-ui, sans-serif); cursor: pointer; }
.film-always { border-color: #8E7752; background: rgba(23,16,10,.66); font-weight: 400; }
.film-snd { position: absolute; z-index: 2; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); border-color: #8E7752; font-size: 16px; }
.film-btn:focus-visible { outline: 3px solid #FFF; outline-offset: 3px; }
.film[data-scene="wake"] :is(.film-skips, .film-snd) { opacity: 0; visibility: hidden; transition: opacity .25s linear, visibility 0s linear .25s; }
@media (max-aspect-ratio: 1/1) {
.film { --film-top: 0px; --film-bot: calc(max(16px, env(safe-area-inset-bottom)) + 56px); }
.film[data-skip="1"] { --film-top: calc(max(12px, env(safe-area-inset-top)) + 56px); }
.film-screen { top: var(--film-top); height: calc(100vh - var(--film-top) - var(--film-bot)); height: calc(100dvh - var(--film-top) - var(--film-bot)); transform: translateX(-50%); }
.film-skips { top: max(12px, env(safe-area-inset-top)); }
.film-snd { left: 50%; transform: translateX(-50%); }
.film[data-skip="1"] .film-snd { left: 16px; transform: none; }
.film[data-skip="1"] .film-skips:not(.is-late) > .film-always { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
.film-skips.is-late { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); animation: film-late-in .4s ease-out; }
.film-skips.is-late .film-skip { min-width: 44px; padding: 10px 16px; border-width: 1px; border-color: #8E7752; background: rgba(23,16,10,.8); font-size: 16px; font-weight: 400; }
@keyframes film-late-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-aspect-ratio: 1/1) {
.film[data-late-skip] .film-snd { left: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .film-skips.is-late { animation: none; } }
.hub-bfs { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
.hub-bfs[hidden] { display: none; }
.hub-bf { position: absolute; left: 0; top: 0; width: var(--bf, 40px); height: var(--bf, 40px); margin: calc(var(--bf, 40px) / -2) 0 0 calc(var(--bf, 40px) / -2); will-change: transform; }
.hub-bf img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.hub-bf img.on { visibility: visible; }
html.hub-leaving-quiet .stage, html.hub-leaving-quiet .hub-bf:not(.is-chosen) { opacity: 0; transition: opacity .2s ease; }
.hub-bfs.is-leaving { z-index: 97; }
.hub-bfs.is-leaving .hub-bf:not(.is-chosen) { opacity: 0; transition: opacity .25s ease-in 1.05s; }
.hub-opening { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; font: 400 16px/1.4 var(--f-mono, ui-monospace, monospace); color: var(--ink, #1C1026); }
.hub-opening-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.hub-opening-opt input { width: 18px; height: 18px; margin: 0; accent-color: #6A1FD0; }
.hub-opening-again { min-height: 44px; padding: 8px 14px; border: 2.5px solid var(--ink, #1C1026); border-radius: 0; background: var(--paper, #FFF9F0); color: var(--ink, #1C1026); font: 400 16px/1.2 var(--f-mono, ui-monospace, monospace); cursor: pointer; }
.hub-opening-again:hover { background: var(--violet, #AD5CFF); }
.fizz-melt { display: none; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; }
.fizz-box { position: fixed; inset: 0; z-index: 96; overflow: hidden; pointer-events: none; }
.fizz-px { position: absolute; left: 0; top: 0; max-width: none; image-rendering: crisp-edges; image-rendering: pixelated; }