/* OUT's own arcade cabinet: source photography and long reading copy stay clear. */
@font-face{font-family:'OUT Pixel';src:url('assets/fonts/arcade/pixelify-sans.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'OUT Dot';src:url('assets/fonts/arcade/dotgothic16.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--arcade-lime:#ceff24;--arcade-violet:#8b5cff;--arcade-cyan:#70fff1;--arcade-paper:#f4f6ed;--arcade-black:#090a10;--arcade-panel:#191b28;--arcade-display:'Barlow',Arial,'Hiragino Sans','Yu Gothic',sans-serif}
html[lang=ja]{--arcade-display:'Hiragino Sans','Yu Gothic',Arial,sans-serif}
::selection{background:var(--arcade-lime);color:var(--arcade-black)}
body{background:var(--arcade-black)}
/* These existing reading surfaces use dark type; keep their surface paired with it. */
#trailer,#story,#characters,#journey{background:#f7f8fd;color:#19172d}
:is(#trailer,#story,#characters,#journey,#filmmakers,#backers) .eyebrow{color:#45521a}
:is(#trailer,#story,#characters,#journey,#filmmakers,#backers) :is(a,button,summary,input,select):focus-visible,.modal-controls button:focus-visible{outline-color:#6840d7!important}
:where(a,button,summary,input,select):focus-visible{outline-color:var(--arcade-cyan)!important;outline-width:3px;outline-offset:5px}
.topbar{border-bottom:3px solid var(--arcade-lime);background:#090a10f5;box-shadow:0 4px 0 #4d386b}
.lang button.active{color:var(--arcade-lime);text-decoration-thickness:3px}.nav a:hover{color:var(--arcade-lime)}
.hero{background:var(--arcade-black)}
.hero .signal{font-family:var(--arcade-display);font-size:15px;letter-spacing:.03em}.hero .signal>span:first-child{color:var(--arcade-lime)}
html[lang=en] .hero h1{font-family:var(--arcade-display);font-weight:600;font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:0;text-shadow:none;max-width:32ch}
html[lang=ja] .hero h1{font-family:var(--arcade-display);font-weight:400;font-size:clamp(24px,2.7vw,36px);line-height:1.5;letter-spacing:0}
html[lang=en] main h2,html[lang=en] #why-out h2,html[lang=en] #out-world h2,html[lang=en] #trailer h2,html[lang=en] #filmmakers h2,html[lang=en] .story-copy h2,html[lang=en] .pamphlet-copy h2{font-family:var(--arcade-display)!important;font-weight:600!important;font-size:clamp(30px,3.4vw,46px)!important;line-height:1.22!important;letter-spacing:0!important;max-width:28ch}
html[lang=ja] main h2,html[lang=ja] #why-out h2,html[lang=ja] #out-world h2,html[lang=ja] #trailer h2,html[lang=ja] #filmmakers h2,html[lang=ja] .story-copy h2,html[lang=ja] .pamphlet-copy h2{font-family:var(--arcade-display)!important;font-weight:400!important;font-size:clamp(27px,3vw,38px)!important;line-height:1.4!important;letter-spacing:0!important}
.eyebrow,.status,.door-number,.big-date,.story-clock,.card-role,.open-icon{font-family:var(--arcade-display)!important;letter-spacing:.015em!important}.eyebrow{font-size:15px;color:var(--arcade-lime)}
.btn,.close,.menu-btn,.immersive-footer button,.archive-tabs button,.reader-jump button,.milestone-image-controls button{font-family:var(--arcade-display)!important;font-size:17px!important;border-radius:0;box-shadow:3px 3px 0 #5a4277;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.btn:not(.outline){background:var(--arcade-lime);color:var(--arcade-black);border-color:var(--arcade-lime)}
.btn:hover:not(.outline){background:#e1ff76}.btn:active,.close:active,.menu-btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.outline,.close{border-color:#8b7aa7;color:var(--arcade-paper);background:#191b28}
.play{border-radius:0;background:var(--arcade-lime);color:var(--arcade-black);border:4px solid var(--arcade-black);box-shadow:5px 5px 0 var(--arcade-violet);clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px),0 8px,8px 8px)}
.selection{border-color:#475127;background:#15191b;color:#f4f6ed!important}.selection span{color:inherit}.selection small{color:var(--arcade-lime)}
#why-out,#support,#recoupment,.pamphlet-showcase{background-color:#11151a;background-image:radial-gradient(#ceff2417 1px,transparent 1px);background-size:12px 12px}
#why-out .meaning-message,.meaning-features h3,#why-out .eyebrow,.pamphlet-open-label{color:var(--arcade-lime)}
.cast-card{border-bottom:3px solid #5c4c7b}.cast-card .card-role{font-size:24px;font-weight:600}.cast-card:hover .open-icon{background:var(--arcade-lime);color:var(--arcade-black)}
.cast-card:hover{outline:2px solid var(--arcade-lime);outline-offset:6px}.open-icon{width:32px;height:32px;background:#161925;color:var(--arcade-lime);border-color:#7a8b33}
.story-clock{color:var(--arcade-lime);border-color:#7a8b33!important;background:#11151a}.story-clock span{font-family:var(--arcade-display)}
#out-world{background:#101019;background-image:linear-gradient(#8b5cff0b 1px,transparent 1px),linear-gradient(90deg,#8b5cff0b 1px,transparent 1px);background-size:24px 24px}
.arcade-console{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;margin:30px 0 36px;align-items:stretch}
.arcade-console .universe-progress{display:flex;flex-direction:column;justify-content:center;margin:0;padding:28px;background:#191b28;border:2px solid #716088;box-shadow:5px 5px 0 #3e2559;min-width:0}
.arcade-console .universe-progress strong{font-family:var(--arcade-display);font-size:clamp(27px,2.6vw,36px);line-height:1.15;color:var(--arcade-paper);font-weight:600}
.arcade-console .universe-progress [data-exploration-count]{font:17px/1.5 var(--arcade-display);color:var(--arcade-lime)}
.arcade-console .universe-progress>div:first-child{align-items:start;gap:12px}.arcade-console .universe-progress p{font:15px/1.7 Arial,'Hiragino Sans',sans-serif;color:#d2d1df}
.room-meter{border:0;background:#090a10;padding:8px;gap:5px;margin:22px 0 16px}.room-segment{height:22px;background:#34333f;box-shadow:inset 0 -4px 0 #0003}.room-segment.visited{background:var(--arcade-lime);box-shadow:inset 0 -4px 0 #7f9824}
.arcade-quick-paths{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.arcade-quick-paths a{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:44px;border-bottom:2px solid #716088;font:17px/1.25 var(--arcade-display);color:var(--arcade-paper);padding:7px 0}.arcade-quick-paths a:hover{color:var(--arcade-lime);border-color:var(--arcade-lime)}
#out-signal-puzzle{display:grid;grid-template-columns:minmax(0,1fr) 166px;gap:16px 24px;padding:26px;background:#ceff24;color:var(--arcade-black);border:2px solid var(--arcade-lime);box-shadow:5px 5px 0 #6e488e;min-width:0;align-items:center}
.arcade-bonus{display:inline-block;background:#191b28;color:var(--arcade-paper);padding:3px 9px;font:14px/1.4 var(--arcade-display);box-shadow:3px 3px 0 #98b71e;margin-bottom:12px}
#out-signal-puzzle h3{font:600 clamp(26px,2.7vw,36px)/1 var(--arcade-display);letter-spacing:-.01em;margin:0 0 12px;color:#090a10}
#out-signal-puzzle .signal-puzzle-copy>p{font:14px/1.55 Arial,'Hiragino Sans',sans-serif;color:#202a0f;max-width:30ch;margin:0 0 9px}
#out-signal-puzzle .signal-key-help{font-size:11px;color:#3d4918}
.signal-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;background:#090a10;box-shadow:4px 4px 0 #8eab24}
.signal-board button{position:relative;width:100%;min-height:44px;aspect-ratio:1;border:1px solid #686675;background:#252332;color:#a7a1bd;display:grid;place-items:center;padding:0;box-shadow:inset 0 -3px 0 #090a10;border-radius:0}
.signal-board button[aria-pressed=true]{background:#ceff24;color:#16200a;border-color:#f4f6ed;box-shadow:inset 0 -3px 0 #8fae17}
.signal-board button:hover{border-color:#70fff1;outline:1px solid #70fff1}.signal-board button.is-hint{outline:3px solid #8b5cff;outline-offset:1px}.signal-node-state{font:24px/1 var(--arcade-display)}.signal-node-number{font:10px/1 var(--arcade-display);position:absolute;top:3px;left:4px}
.signal-puzzle-tools{display:flex;gap:9px;justify-content:space-between;margin-top:10px}.signal-puzzle-tools button{min-height:44px;padding:4px 8px;border:0;border-bottom:2px solid #637a0d;background:transparent;font:16px/1.1 var(--arcade-display);color:#090a10}.signal-puzzle-tools button:disabled{opacity:.5;cursor:default}
#out-signal-puzzle .signal-puzzle-status{grid-column:1/-1;font:15px/1.4 var(--arcade-display);color:#090a10;min-height:2.8em;padding-top:14px;margin:0;border-top:2px solid #a2c421;text-wrap:pretty}
#out-signal-puzzle.is-complete{background:#70fff1;border-color:#70fff1}.is-complete .signal-board{box-shadow:4px 4px 0 #348f89}
#out-world .world-doors{gap:24px}#out-world .world-door{background:#191b28!important;border:2px solid #4e445f!important;padding:0!important;box-shadow:5px 5px 0 #07070d;overflow:visible;transition:transform .15s steps(3),border-color .15s;position:relative}
#out-world .world-door>.out-scene-window{overflow:hidden}#out-world .world-door .door-number{font:15px/1.5 var(--arcade-display)!important;color:var(--arcade-lime);padding:20px 22px 9px;margin:0;display:block}
#out-world .world-door>strong{font:600 30px/1.22 var(--arcade-display)!important;padding:0 22px 12px;color:var(--arcade-paper)!important;max-width:none;display:block;text-wrap:balance}
#out-world .world-door>p{font:15px/1.65 Arial,'Hiragino Sans',sans-serif!important;color:#d5d2df!important;padding:0 22px 18px;margin:0}
#out-world .world-door>.door-state{font:13px/1.5 Arial,'Hiragino Sans',sans-serif;color:#e1eab7!important;border-top:1px solid #494052;padding:13px 22px 16px;margin-top:auto;display:block}
#out-world .world-door>.world-art-label{color:#b6accb;font-size:10px;margin:0;padding:0 22px 12px}
#out-world .world-door:hover,#out-world .world-door:focus-visible{border-color:var(--arcade-lime)!important;transform:translate(-3px,-3px);box-shadow:8px 8px 0 #462f66}
#out-world .world-door.is-explored{border-color:#93b728!important}#out-world .world-door.is-explored .door-number::after{content:' ✓';color:var(--arcade-lime)}
html[lang=ja] #out-world .world-door>strong{font-weight:400!important;font-size:25px!important;line-height:1.4!important}
.arcade-chosen{animation:out-cabinet-select .24s steps(3,end)}@keyframes out-cabinet-select{0%{box-shadow:7px 7px 0 #8b5cff}100%{box-shadow:5px 5px 0 #07070d}}
#news{background:#15131f;color:#f4f6ed}#news h2{color:#f4f6ed}#news .news-archive-note{color:#c8c3d4}#news .news-heading a{color:#c8bcff}
.news-row{border-color:#51445e}.immersive-news-trigger{font-family:var(--arcade-display);font-size:24px!important;color:var(--arcade-paper)!important}.news-tag{color:var(--arcade-lime)}
.news-row:hover{background:#1c1928}.news-row .immersive-news-trigger:hover{transform:none;color:var(--arcade-lime)!important}
.section-announcement{border-left-color:var(--arcade-lime);background:#191b28;box-shadow:4px 4px 0 #4a345e}.section-announcement strong{font:600 25px/1.2 var(--arcade-display)}.announcement-link{color:var(--arcade-lime)}
.screening{background:#191b28;border:1px solid #635071;padding:22px 24px}.screening .big-date{color:var(--arcade-lime);font-size:46px}.screening .event h3{font-family:var(--arcade-display);font-size:30px;line-height:1.2;color:var(--arcade-paper)}
.globe-stage,.globe-wrap{--pin-color:var(--arcade-lime)}.globe-city[aria-pressed=true],.journey-city[aria-pressed=true]{border-color:var(--arcade-lime)}
.support-reveals{background:#191b28;border-color:#716088;box-shadow:5px 5px 0 #3e2559}.support-reveals h3{font:600 32px/1.15 var(--arcade-display)}.support-paths summary{font:600 23px/1.3 var(--arcade-display)}.support-paths summary>span:first-child,.reveal-plus{color:var(--arcade-lime)}
dialog{border:2px solid #726085;box-shadow:6px 6px 0 #3e2559}dialog .modal-top,dialog .immersive-top,dialog .announcement-top{background:#191b28;border-bottom:2px solid #726085}
dialog .modal-body h2{font-family:var(--arcade-display);font-weight:600}dialog .immersive-top h2{font-family:var(--arcade-display)!important;font-size:28px!important;line-height:1.2!important}
.out-purple-opening .purple-opening-copy h1{font-family:var(--arcade-display)!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.12!important;font-size:clamp(44px,6.5vw,84px)!important}
.out-purple-opening .purple-opening-copy h1 em{font-family:var(--arcade-display)!important;font-weight:600!important;letter-spacing:inherit!important;font-style:normal;text-shadow:none}.out-purple-opening .purple-window-bar{font-family:var(--arcade-display);font-size:15px}.out-purple-opening .btn{background:var(--arcade-lime)!important;color:#090a10!important;border-color:var(--arcade-lime)!important;box-shadow:5px 5px 0 #4b236a}
.exp-controls{border-radius:0;border-color:#706080;box-shadow:3px 3px 0 #3e2559}.exp-controls button{font-family:var(--arcade-display);font-size:14px;min-height:44px;color:var(--arcade-paper)}
#experience-controls.exp-controls,#experience-controls.exp-controls button{background:#191b28!important;color:#f4f6ed!important;border-color:#706080!important}#experience-controls.exp-controls button[aria-pressed=true]{color:#ceff24!important}
@media(max-width:1000px){.arcade-console{grid-template-columns:1fr}.arcade-console .universe-progress{padding:24px}#out-signal-puzzle{grid-template-columns:minmax(0,1fr) 178px}.signal-puzzle-copy{max-width:380px}.hero .signal{font-size:13px}}
@media(max-width:700px){.eyebrow{font-size:13px}.hero .signal{font-size:12px}.hero h1{max-width:22ch!important}.hero-actions .btn{font-size:15px!important}.btn{font-size:16px!important;gap:16px}.arcade-console{gap:18px;margin:24px 0 30px}.arcade-console .universe-progress{padding:20px}.arcade-console .universe-progress strong{font-size:30px}.arcade-console .universe-progress [data-exploration-count]{font-size:16px}.room-segment{height:17px}.arcade-quick-paths{margin-top:18px;gap:7px 20px}.arcade-quick-paths a{font-size:16px}#out-signal-puzzle{grid-template-columns:minmax(0,1fr) 150px;padding:19px 15px;gap:12px}#out-signal-puzzle h3{font-size:26px}#out-signal-puzzle .signal-puzzle-copy>p{font-size:12px}.signal-board{padding:5px;gap:4px}.signal-board button{min-height:44px}.signal-puzzle-tools{gap:4px;margin-top:7px}.signal-puzzle-tools button{font-size:15px;padding:3px 4px}.signal-puzzle-status{font-size:14px!important}.signal-key-help{display:none}#out-world .world-door>strong{font-size:29px!important}#out-world .world-door .door-number{padding:18px 20px 8px}#out-world .world-door>strong,#out-world .world-door>p{padding-left:20px;padding-right:20px}#out-world .world-doors{gap:22px}.cast-card .card-role{font-size:20px}.screening{padding:18px}.screening .event h3{font-size:28px}.screening .big-date{font-size:40px}.section-announcement strong{font-size:22px}.out-purple-opening .purple-opening-copy h1{font-size:clamp(38px,10.5vw,56px)!important}.out-purple-opening .purple-window-bar{font-size:13px}.immersive-news-trigger{font-size:24px!important}html[lang=en] main h2{font-size:36px!important}html[lang=ja] main h2{font-size:28px!important}}
@media(max-width:365px){#out-signal-puzzle{grid-template-columns:1fr}.signal-puzzle-play{width:168px}.signal-puzzle-copy h3 br{display:none}}
html[data-motion=off] :is(.btn,.close,.menu-btn,.world-door,.arcade-chosen,.immersive-footer button,.archive-tabs button,.reader-jump button){animation:none!important;transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){:is(.btn,.close,.menu-btn,.world-door,.arcade-chosen,.immersive-footer button,.archive-tabs button,.reader-jump button){animation:none!important;transition:none!important;transform:none!important}}

/* Reading comes first; the lime cabinet, pixel edges and small game marks stay. */
h1,h2,h3,h4,.journey-origin h3{font-family:var(--arcade-display)!important}
.hero h1,.out-purple-opening #purple-opening-title{letter-spacing:0!important;text-shadow:none!important}
.nav,.menu-links,.byline,.actor,.card-role,.support-paths summary{font-family:var(--arcade-display)!important;letter-spacing:0!important}
.nav{font-size:13px}.hero .byline{font-size:12px;line-height:1.6}
#out-signal-puzzle h3{line-height:1.2;letter-spacing:0}
.arcade-console .universe-progress strong{line-height:1.25;letter-spacing:0}
.arcade-quick-paths a,.signal-puzzle-tools button{font-weight:600;line-height:1.4}
html[lang=ja] main h2,html[lang=ja] #out-world .world-door>strong{font-weight:600!important}
.arcade-bonus,.signal-node-number{font-family:'OUT Pixel','Courier New',monospace}
html[lang=ja] .arcade-bonus{font-family:var(--arcade-display)}
.arcade-hp .hp-heading>strong,.arcade-hp .hp-stats strong,.arcade-hp .hp-status-mark{font-family:var(--arcade-display)!important;line-height:1.4!important;letter-spacing:0!important}
/* Preserve the rolling reels while giving each currency digit a distinct shape. */
.arcade-hp .hp-counter-value,.arcade-hp .hp-currency{font-family:'Courier New',monospace!important;text-shadow:none!important;font-weight:700!important}
@media(max-width:700px){html[lang=en] main h2{font-size:34px!important}.cast-card .card-role{font-size:20px}.hero .byline{font-size:11px}.out-purple-opening #purple-opening-title{line-height:1.15!important}}

/* Keep the trailer caption with its video and give the announcement a full row. */
#trailer .caption{align-self:start}
#trailer .section-announcement{grid-column:1/-1;grid-row:4;grid-template-columns:72px minmax(0,1fr) 44px;gap:16px;align-items:center;min-width:0;margin:24px 0 0;padding:18px 20px}
#trailer .section-announcement>div{min-width:0}
#trailer .section-announcement strong{display:block;font-size:22px;line-height:1.3;letter-spacing:0;text-wrap:pretty}
#trailer .section-announcement p{max-width:none;margin:5px 0 3px}
#trailer .announcement-link{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;max-width:100%;line-height:1.5;text-align:left}
#trailer .announcement-link>span:last-child{flex:none;white-space:nowrap}
/* Restore card gutters over the older inline compact-screenings rules. */
#screenings .screening{padding:22px 24px!important;grid-template-columns:130px minmax(0,1fr) auto!important;gap:24px!important}
#screenings .event{min-width:0}
#screenings .event h3{font-family:var(--arcade-display)!important;letter-spacing:0!important;text-wrap:pretty}
#screenings .screening>a{justify-self:end;max-width:100%;margin:0}
@media(max-width:1000px){#screenings .screening{grid-template-columns:110px minmax(0,1fr)!important;gap:20px!important}#screenings .screening>a{grid-column:2!important;justify-self:start}}
@media(max-width:700px){#trailer .section-announcement{grid-template-columns:52px minmax(0,1fr) 44px;gap:12px;margin:20px 0 0;padding:16px 14px}#trailer .section-announcement strong{font-size:20px}}
@media(max-width:560px){#screenings .screening{grid-template-columns:minmax(0,1fr)!important;padding:20px!important;gap:18px!important}#screenings .screening>a{grid-column:1!important;justify-self:start}#screenings .big-date{font-size:38px;line-height:1.1}#screenings .big-date small{margin-top:8px}#screenings .event h3{font-size:25px;line-height:1.3!important}}

/* Keep currency and recovery labels balanced within the available panel. */
:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-counter-value{font-size:clamp(38px,4.5vw,64px);align-items:center;gap:10px}
:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-currency{align-self:center;line-height:1.2}
:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-stats strong{font-size:clamp(18px,1.65vw,22px);line-height:1.35!important;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
@media(max-width:600px){:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-counter-value{font-size:clamp(30px,8.5vw,48px);gap:7px}:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-stats{grid-template-columns:1fr;gap:14px}:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-stats strong{font-size:20px}}

/* A provisional margin credit is visibly distinct from confirmed recovery. */
:root :is(#recoupment,#store-recoupment) .arcade-hp[data-recovery-state=estimated] .hp-state{color:#f4f6ed;background:#30223c;border-color:#b59acc}

/* Decimal reels also fit the narrower tablet column. */
:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-counter{container-type:inline-size}
:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-counter-value{font-size:min(clamp(38px,4.5vw,64px),14cqw)}
@media(max-width:600px){:root :is(#recoupment,#store-recoupment) .arcade-hp .hp-counter-value{font-size:min(clamp(30px,8.5vw,48px),14cqw)}}