@import url('/pixel-star-button.css');
@font-face{font-family:PixelUI;src:url('/fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.otf.woff2');font-display:swap}
@font-face{font-family:PassTiny;src:url('/assets/city-home-v03/Tiny5-Regular.ttf');font-display:swap}
.pixel-star-pass,.pass-detail,.pass-subscriptions{--pass-night:#0b203e;--pass-paper:#252934;--pass-ink:#f7eddb;--pass-muted:#b3bfd2;--pass-edge:#58647a;--pass-number:#9aa7bd;--pass-lit:#ffe199;--pass-gold:#e5b859;box-sizing:border-box;font:16px/1.3 PixelUI,monospace;color:var(--pass-ink)}
.pixel-star-pass *,.pass-detail *{box-sizing:border-box}
.pixel-star-pass,.pass-detail,.pass-subscriptions,.pass-active>.main-navigation{-webkit-user-select:none;user-select:none}
.pass-preview-active,.pixel-star-pass,.pass-detail{text-transform:uppercase}
.pass-preview-active :is(button,select,option,input){text-transform:uppercase}
.pass-detail .sr-only,.pass-subscriptions .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pass-pages[hidden],.pass-subscriptions[hidden],.pixel-star-pass[hidden],.pass-actions[hidden],.pass-detail:not([open]),.pass-scrim[hidden]{display:none!important}
.pass-pages{position:absolute;inset:0 0 var(--pass-dock-height,82px);z-index:25;overflow:hidden;touch-action:pan-y}
.pixel-star-pass,.pass-subscriptions{position:absolute;inset:0;background:var(--pass-night);display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y}
.pass-pages>.pixel-star-pass,.pass-pages>.pass-subscriptions{contain:layout paint;backface-visibility:hidden;will-change:transform}
.pass-subscriptions *{box-sizing:border-box}
.pixel-star-pass button{font:inherit;color:inherit;padding:0;border:0;box-shadow:none;background:none;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pass-header{flex:none;padding:14px 16px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
/* Match the shared home-page banner typography without adding its solid bar. */
.pass-header h2{grid-column:1/-1;grid-row:1;margin:0;text-align:center;font:500 24px/1.2 PixelUI,sans-serif;text-transform:uppercase;white-space:nowrap;color:#e8e9e7;letter-spacing:.5px;outline:none}
.pixel-star-pass>.pass-header{position:absolute;inset:0 0 auto;z-index:3;background:none;pointer-events:none}
.pixel-star-pass>.pass-header h2{position:relative}
.pixel-star-pass>.pass-header h2::before{content:'';position:absolute;inset:-16px -16px -8px;z-index:-1;background:var(--pass-night)}
html body .pass-header button.style-button{grid-row:2;justify-self:end;width:auto;min-width:0;min-height:40px;height:40px;margin:0;padding:6px 12px;font:19px/1 PassTiny,sans-serif;white-space:nowrap;--action-face:#b88af0;--action-edge:#5e407d;--action-ink:#261b35}
html body :is(.pass-header,.pass-actions) button.style-button:disabled{opacity:.45;cursor:default}
.pass-offers-header{grid-template-columns:1fr}
.pass-offers-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;padding:12px 20px max(24px,calc(var(--pass-action-bottom) + var(--pass-action-height) + 32px - var(--pass-dock-height)))}
.pass-offers-scroll::-webkit-scrollbar{display:none}
.pass-pages .pass-amount{bottom:3px}
.pass-node[data-kind=translations] .pass-amount{left:auto;right:10px;bottom:10px;transform:none}
.pass-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline-offset:-3px}
.pass-scroll::-webkit-scrollbar,.pass-detail-body::-webkit-scrollbar{display:none;width:0;height:0}
.pass-scene{position:relative;min-height:100%;isolation:isolate;padding:calc(var(--pass-header-height,55px) + 8px) 0 80px;background:url('/assets/pass-nuit-2026-10-17/nuit-etoilee.png') center top / 384px 768px repeat;image-rendering:pixelated}
.pass-trail{position:absolute;top:0;left:0;z-index:-1;pointer-events:none;image-rendering:pixelated}
.pass-nodes{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.pass-node{height:146px;flex:none;position:relative;display:flex;align-items:center;justify-content:center}
.pass-node.pass-finale{height:402px;--wander:0px!important;align-items:flex-start;padding-top:48px}
.pixel-star-pass .pass-reward{position:relative;width:112px;height:112px;display:grid;place-items:center;transform:translateX(var(--wander))}
/* Override input-comfort's global focus ring even when that stylesheet loads later.
   Restoring focus after a sheet must never draw a box around a reward. */
html body .pixel-star-pass button.pass-reward{outline:none!important;outline-offset:0!important;box-shadow:none!important}
html body .pixel-star-pass button.pass-reward:focus-visible{filter:none}
.pass-art-slot{position:relative;width:112px;height:112px;display:block}
.pass-clothing-frame{border:0;isolation:isolate}
.pass-frame-pixels{position:absolute;z-index:-1;pointer-events:none;image-rendering:pixelated}
.pass-sprite{position:absolute;display:block;width:96px;height:96px;left:50%;top:50%;margin:-48px 0 0 -48px;pointer-events:none}
.pass-clothing-frame>.pass-sprite{width:94px;height:94px;margin:-47px 0 0 -47px}
.pass-node[data-kind=kanji]{height:146px}
.pass-node[data-kind=kanji] :is(.pass-reward,.pass-art-slot){width:112px;height:112px}
.pass-node:is([data-kind=kanji],[data-kind=mystery]) .pass-sprite{width:112px;height:112px;margin:-56px 0 0 -56px}
.pass-node[data-kind=kanji] .pass-tier-number{top:36px}
canvas.pass-pixels{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.pass-amount{position:absolute;left:calc(50% + 36px);transform:translateX(-50%);bottom:3px;color:#fff;font:800 23px/1 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:2px 0 #172337,-2px 0 #172337,0 2px #172337,0 -2px #172337,2px 2px #172337,-2px -2px #172337}
.pass-tier-number{position:absolute;right:calc(100% + 16px);top:36px;min-width:34px;height:32px;text-align:center;color:var(--pass-number);font:26px/32px PassTiny,sans-serif!important;font-variant-numeric:tabular-nums;pointer-events:none}
.pass-node[data-reached=true] .pass-tier-number{color:var(--pass-lit)}
.pass-node[data-claimed=true] .pass-tier-number{color:#73747b}
.pass-lock{position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:40px;height:48px;pointer-events:none}
.pass-node[data-locked=false] .pass-lock{visibility:hidden}
.pass-check{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:50px;display:none;overflow:visible;pointer-events:none}

.pass-node[data-claimed=true] .pass-check{display:block}
.pass-node[data-dimmed=true] .pass-art-slot{filter:brightness(.48) saturate(.6)}
.pass-node[data-dimmed=true] .pass-amount{color:#b6bdc8}
.pass-finale .pass-reward,.pass-finale .pass-art-slot{width:288px;height:288px}
.pass-finale .pass-sprite{inset:0;margin:0;width:288px;height:288px}
.pass-star-layer{position:absolute;inset:0;width:288px;height:288px}
.pass-pet-layer{position:absolute;left:72px;top:84px;width:144px;height:146px}
.pass-finale .pass-tier-number{left:6px;right:auto;top:0}
.pass-finale .pass-lock{left:50%;bottom:56px}
.pass-finale .pass-check{top:54%}
.pass-pet-name{position:absolute;top:68px;left:0;width:100%;text-align:center;font:28px/1 PassTiny,sans-serif!important;color:var(--pass-ink);pointer-events:none}
.pass-node[data-claimed=true] .pass-pet-name{opacity:.65}
.pixel-star-pass button:not(.pass-reward):focus-visible,.pass-detail button:focus-visible{outline:3px solid #bf9fe8;outline-offset:3px}
.pass-load{min-height:200px;display:grid;align-content:center;justify-items:center;gap:20px;padding:24px;text-align:center}
.pass-active{--pass-dock-height:82px;--pass-toolbar-cover:82px;--pass-action-inset:16px;--pass-action-gap:12px;--pass-action-height:var(--reward-action-height,40px);--pass-action-bottom:calc(var(--pass-toolbar-cover) + var(--reward-action-gap,12px));background:#0b203e}
html body[data-home-navigation=v02] .pass-active>.main-navigation{height:var(--pass-dock-height)!important;z-index:30!important;background:transparent!important}
html body[data-home-navigation=v02] .pass-active .main-navigation .home-nav-dock{inset:auto 0 8px!important;max-width:390px!important;width:calc(100% - 24px)!important}
/* The starry scene owns its night palette. Shared navigation follows the
   selected game theme and keeps the same glass surface on every page. */
/* The local arena collection drawer: nonmodal, round top, same spring drag,
   and a clipped viewport behind the fixed navigation. */
.pass-sheet-viewport{position:absolute;inset:0;z-index:29;overflow:clip;pointer-events:none}
.pass-page-footer{position:absolute;inset:auto 0 0;height:calc(var(--pass-action-bottom) + var(--pass-action-height) + var(--reward-area-top,16px));background:#0b203e;pointer-events:none}
.pass-page-footer[hidden]{display:none!important}
/* Each background travels with its page, including under the fixed dock. */
.pass-offers-footer{background:var(--bg)}
#mockup.pass-active:has(.pass-pages[data-page=offers]){background:var(--bg)}
/* No stacking context on this row: the drawer covers the left button, while
   the single persistent Star button can remain above a locked reward. */
.pass-actions{position:absolute;left:var(--pass-action-inset);right:var(--pass-action-inset);bottom:var(--pass-action-bottom);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pass-action-gap);pointer-events:none}
html body .pass-actions button.style-button{position:relative;z-index:0;width:100%;min-width:0;min-height:var(--pass-action-height);height:var(--pass-action-height);margin:0;padding:6px 8px;font:19px/1 PassTiny,sans-serif;white-space:nowrap;pointer-events:auto;--action-face:#b88af0;--action-edge:#5e407d;--action-ink:#261b35}
.pass-sheet-viewport:has(.pass-detail[open][data-locked=true]) .pass-star-button{z-index:2!important}
.pass-detail{position:absolute;inset:auto 0 0;margin:0 auto;width:100%;max-width:760px;height:auto;max-height:calc(72% + var(--pass-toolbar-cover,82px)*.28);z-index:1;padding:0;border:1px solid #495057;border-bottom:0;border-radius:22px 22px 0 0;background:var(--pass-night);color:#e8e9e7;box-shadow:0 -10px 40px #13111a20;overflow:hidden;touch-action:none;pointer-events:auto;will-change:transform}
.pass-detail[open]{display:flex;flex-direction:column}
.pass-detail [hidden]{display:none!important}
.pass-detail-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:8px 20px 12px;cursor:grab}
/* The visual can extend beside the right-hand action; only its text column
   reserves that action's height. Keep the common navigation unobstructed. */
.pass-detail:not([data-kind=offers]) .pass-detail-body{padding-bottom:var(--pass-action-bottom)}
.pass-detail[data-creature-drag] .pass-detail-body{cursor:grabbing}
.pass-detail-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.pass-detail-art{position:relative;width:100%;height:146px}
/* A shared left-hand stage runs from the sheet edge to the text column.
   Its centre and the icon-height reference stay identical across rewards. */
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]){--pass-detail-icon-height:120px}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-body{padding:4px 0 calc(var(--pass-toolbar-cover,82px) + 4px)}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-summary{grid-template-columns:calc(50% + var(--pass-action-gap)/2) minmax(0,1fr);gap:0;align-items:end}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-art{width:100%;height:140px}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-copy{padding-right:var(--pass-action-inset)}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-copy h2{margin-bottom:8px}
.pass-detail:is([data-kind=coins],[data-kind=mystery],[data-kind=kanji],[data-kind=translations],[data-kind=companion]) .pass-detail-state{margin-bottom:10px}
.pass-mannequin-slot{--pass-mannequin-limit:300px;position:relative;min-width:0;width:100%;height:var(--pass-mannequin-height,var(--pass-mannequin-limit));align-self:end}
.pass-detail[data-kind=clothing] .pass-detail-summary{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:14px}
.pass-detail[data-kind=clothing] .pass-detail-body{padding-top:4px;padding-bottom:calc(var(--pass-toolbar-cover,82px) + 4px)}
.pass-detail[data-kind=clothing] .pass-detail-copy{align-self:end;padding-top:76px;padding-bottom:calc(var(--pass-action-height) + 36px)}
.pass-detail-copy{min-width:0;text-align:left;container-type:inline-size;padding-bottom:calc(var(--pass-action-height) + 12px)}
.pass-detail-copy h2,.pass-detail-body>h2{margin:0 0 10px;font:400 23px/1.16 PixelUI,monospace;overflow-wrap:anywhere}
.pass-detail-description{margin:0;color:#c5c4cf;font:17px/1.3 PixelUI,monospace}
.pass-detail-state{display:flex;align-items:center;gap:5px;margin:0 0 12px;color:#ffd36c;font:12px/1.3 PixelUI,monospace;white-space:nowrap}
.pass-requirement-lock{position:relative;display:block;flex:none;width:16px;height:19px}
.pass-detail-footer{flex:none;padding:0 20px calc(var(--pass-toolbar-cover,82px) + 14px);display:flex;flex-direction:column;gap:12px}
.pass-claim-slot{position:absolute;right:calc(var(--pass-action-inset) - 1px);bottom:var(--pass-action-bottom);width:calc((100% + 2px - var(--pass-action-inset)*2 - var(--pass-action-gap))/2);height:var(--pass-action-height);margin:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;container-type:inline-size}
html body .pass-detail .style-button{width:100%;height:50px;min-height:50px;padding:6px 12px;font:24px/1 PassTiny,sans-serif}
html body .pass-detail .pass-claim-slot .style-button{min-width:0;min-height:var(--pass-action-height);height:var(--pass-action-height);padding:6px 8px;font-size:19px;white-space:nowrap}
html body .pass-detail button.style-button{--action-face:#59de98;--action-edge:#42474d;--action-ink:#1b1d1f}
html body .pass-actions button.style-button.pass-star-button{--action-face:var(--pixel-star-face);--action-edge:var(--pixel-star-edge);--action-ink:var(--pixel-star-ink)}
html body .pass-actions button.style-button:disabled{--action-face:#555b67;--action-edge:#363b45;--action-ink:#bbc0ca;opacity:1;cursor:default}
/* Same palette, stops and stepped motion as the university S hologram.
   The centre is masked out so only the button's border shimmers. */
/* Album and Pass share the painted rim, including its disabled state.
   The mint/lilac tint changes, not the thickness, radius or physical relief. */
html body #album-rewards button.style-button::after,
html body .pass-actions button.style-button::after{content:'';position:absolute;inset:-3px;padding:3px;border-radius:inherit;pointer-events:none;background:var(--reward-action-outline,#d4b5f5);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html body #album-rewards button.style-button:disabled::after,
html body .pass-actions button.style-button:disabled::after{background:var(--reward-action-disabled-outline,#51565b)}
html body .pass-detail button.pass-outfit-toggle{--action-face:#b88af0;--action-edge:#5e407d;--action-ink:#261b35;position:absolute!important;top:16px;right:16px;z-index:1;display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;border-radius:10px}
.pass-outfit-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pass-outfit-toggle[aria-pressed=false] .pass-eye-closed,.pass-outfit-toggle[aria-pressed=true] .pass-eye-open{display:none}
.pass-claimed-message{margin:0;padding:4px 0;color:#83e6bd;text-align:center;font:clamp(10px,8.3cqi,13px)/1.2 PixelUI,monospace;white-space:nowrap;outline:none}
.pass-detail[data-kind=offers]{height:72%}
.pass-detail[data-kind=offers] .pass-detail-body{flex:1}
.pass-toast{position:absolute;z-index:150;bottom:calc(var(--pass-action-bottom) + var(--pass-action-height) + 12px);left:14px;right:14px;pointer-events:none;background:#253c34;color:#d5ffe6;border:1px solid #5c9377;padding:8px;text-align:center;font:14px/1.3 PixelUI,monospace}
.pass-toast:empty{display:none}
.pass-offer-intro{font:15px/1.45 PixelUI,monospace;margin:0 0 14px;text-align:left}
.pass-offer-periods{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.pass-offer-periods button{border:1px solid var(--pass-edge);border-radius:5px;background:var(--pass-paper);color:var(--pass-ink);padding:6px 18px;font:22px/1.2 PassTiny,sans-serif;cursor:pointer}
.pass-offer-periods button[aria-pressed=true]{border-color:var(--pass-gold);color:var(--pass-lit)}
.pass-native-offers .subscription-tier{border:1px solid var(--pass-edge);border-radius:8px;padding:16px;margin-bottom:14px;text-align:left;background:var(--pass-paper)}
.pass-native-offers .subscription-tier[role=radio]{cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.pass-native-offers .subscription-tier[aria-checked=true]{border-color:var(--pass-gold);box-shadow:inset 0 0 0 2px var(--pass-gold);background:#322d43}
.pass-native-offers .subscription-tier:focus-visible{outline:2px solid #bf9fe8;outline-offset:3px}
.pass-native-offers .subscription-tier h3{text-align:center;margin:2px 0 16px}
.pass-native-offers .subscription-wordmark{width:auto;height:26px;max-width:100%;image-rendering:pixelated}
.pass-native-offers .subscription-benefits{list-style:none;padding:0;margin:0}
.pass-native-offers .subscription-benefits li{display:flex;gap:12px;align-items:center;margin-bottom:10px;font:14px/1.35 PixelUI,monospace}
.pass-native-offers .subscription-benefit-icon{width:24px;flex:none;text-align:center}
.pass-native-offers .icon{width:22px;height:22px;fill:currentColor;vertical-align:middle}
.pass-native-offers .subscription-benefit-detail{display:block;color:var(--pass-muted);font-size:12px;margin-top:2px}
.pass-native-offers .subscription-price{margin:16px 0 4px;text-align:center;font:24px/1.3 PassTiny,sans-serif}
.pass-native-offers .subscription-price strong{font-weight:400;color:var(--pass-lit)}
.pass-native-offers .pixel-euro .icon{width:12px;height:17px;margin-right:4px}
.pass-native-offers .subscription-terms{text-align:center;color:var(--pass-muted);font-size:12px;margin:0}
.pass-offer-note{font:12px/1.4 PixelUI,monospace;color:var(--pass-muted);margin:16px 0 4px}
@media(max-width:360px){.pass-header{padding:16px 12px 12px}.pass-header h2{font-size:22px}.pass-node{height:138px}.pass-node.pass-finale{height:394px}.pass-detail-body{padding:8px 14px 10px}.pass-detail-footer{padding:0 14px calc(var(--pass-toolbar-cover,82px) + 12px);gap:10px}.pass-detail-summary{gap:12px}.pass-mannequin-slot{--pass-mannequin-limit:202px}.pass-detail-art{height:116px}.pass-detail-copy h2{font-size:21px}.pass-detail-description{font-size:15px}.pass-detail-state{font-size:13px}.pass-node:not(.pass-finale) .pass-tier-number{right:calc(100% + 12px)}}
@media(max-height:700px){.pass-mannequin-slot{--pass-mannequin-limit:202px}.pass-detail-art{height:112px}}
@media(max-width:360px){html body .pass-detail .pass-claim-slot .style-button,html body .pass-actions button.style-button{font-size:15px}.pass-detail-state{font-size:11px;gap:2px}}
@media(max-width:360px){html body .pass-header button.style-button{font-size:17px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.pixel-star-pass *,.pass-detail *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){html body .pass-actions button.pass-star-button::after{animation:none;background-position:50% 50%}}
.pass-preview-active .proposal-tabs,.pass-preview-active .gift-demo-note{display:none}
#pass-tools{font:13px/1.5 system-ui,sans-serif;margin:8px 0;color:inherit}
#pass-tools summary{cursor:pointer;text-align:center}
.pass-test-controls{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px}
.pass-test-controls label{display:flex;align-items:center;gap:5px}.pass-test-controls input[type=number]{width:52px}.pass-test-controls select,.pass-test-controls input{font:inherit}
.pass-test-controls>span{display:block;width:100%;text-align:center;opacity:.65}
@media(max-width:760px){.pass-preview-active .comparison{margin-top:4px}.pass-preview-active .mock-surface{height:calc(100dvh - 88px);min-height:420px}.pass-preview-active .workbench{padding-top:4px}.pass-preview-active #pass-tools[open]{max-height:160px;overflow:auto}.pass-preview-active:has(#pass-tools[open]) .mock-surface{height:calc(100dvh - 198px);min-height:370px}}

/* Never expose the Album while dragging either bounded page. */
.pass-pages{background:var(--pass-night,#0b203e)}

/* Translation currency shares its native logo colour everywhere. */
.pass-node[data-kind=translations] .pass-amount,.pass-detail[data-kind=translations] .pass-detail-description{--rm-ink:var(--translation-ink,#aefff2)!important;color:var(--translation-ink,#aefff2)!important}