@import url('./style-button.css');
@import url('./streak-journey.css');
@import url('./native-ui-frames.css');
/* Daily celebration: native pixel art over the real, dimmed home screen. */
@font-face{font-family:StreakDigits;src:url('/fonts/streak/Tiny5Duo.ttf') format('truetype');font-style:normal;font-weight:100 700;font-display:swap}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak){position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);border:0;border-image:none;border-radius:0;box-shadow:none;background:transparent;color:#fff6df;font-family:PixelUI,sans-serif;overflow:hidden;outline:0;touch-action:manipulation;isolation:isolate}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak):not([open]){display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak)[open]{display:grid;place-items:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak)::backdrop{background:url('/assets/daily-streak/veil.png') repeat;animation:streak-veil-in 500ms ease-out both}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak)::before,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak)::after{display:none;content:none}
html[data-streak-celebrating] :is(.room-speech-layer,.home-pixelpote-bubble,.speech-bubble){visibility:hidden!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) *{box-sizing:border-box}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(.streak-prompt,.streak-composition)[hidden]{display:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-prompt{display:grid;place-items:center;width:100%;padding:24px;animation:streak-panel-pop 320ms ease-out both}
/* Start layout; shared orange Pop styling is applied with Continue below. */
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-start{appearance:none;display:block;position:relative;width:min(100%,240px);height:64px;min-height:0;margin:0;padding:12px 24px;color:#50367c;font:700 32px/1 PixelUI,sans-serif;cursor:pointer;opacity:1;filter:none;transform:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-start:active{transform:translateY(1px)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-start:focus-visible{outline:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-start:disabled{cursor:wait;opacity:1;filter:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:24px;width:min(100%,560px);max-height:100%;padding:16px 18px 24px;animation:streak-arrive 550ms ease-out both}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-hero{width:100%;text-align:center;position:relative}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-fire{height:calc(var(--flame-scale)*54px);position:relative;pointer-events:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-fire canvas{position:absolute;left:50%;bottom:calc(-1*var(--flame-drop));transform:translateX(-50%);width:var(--flame-width);height:var(--flame-width);max-width:none;image-rendering:pixelated;z-index:1}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-glow{position:absolute;width:75%;max-width:300px;height:150%;bottom:-15%;left:50%;transform:translateX(-50%);background:url('/assets/daily-streak/glow.png') center/100% 100% no-repeat;opacity:0;transition:opacity 450ms ease-out;pointer-events:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-impact .streak-glow{opacity:1;animation:streak-glow-peak 850ms ease-out}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-count{position:relative;display:grid;place-items:center;height:100px;margin:10px 0 0;font:500 104px/1 StreakDigits,PixelUI,sans-serif;letter-spacing:2px;color:#fff;-webkit-text-stroke:12px #241c35;paint-order:stroke fill;text-shadow:none;font-variant-numeric:tabular-nums}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-impact .streak-count{color:#ffd982}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-pop{position:relative;display:flex;justify-content:center;transform-origin:center;will-change:transform}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-number{display:inline-block}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-sparks{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:64px;max-width:none;image-rendering:pixelated;pointer-events:none;opacity:1}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-sparks-left{right:calc(100% + 2px)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-sparks-right{left:calc(100% + 2px)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-sparks[hidden]{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(#streak-label,#activity-streak-label){font:800 30px/1.1 PixelUI,sans-serif;color:#fff8e5;-webkit-text-stroke:5px #241c35;paint-order:stroke fill;margin:3px 0 0;text-align:center;text-transform:none;letter-spacing:0}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-details{display:grid;justify-items:center;width:100%;min-width:0;gap:20px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-milestone{width:100%;min-width:0;padding:18px 12px;background:none;border:0;border-image:url('/assets/interface-v2/pastel-ui/lavender-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);opacity:0;transform-origin:center;image-rendering:pixelated;image-rendering:crisp-edges;}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-meter .streak-milestone{opacity:1;animation:streak-panel-pop 320ms ease-out both}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{display:grid;grid-template-columns:max-content 4.75em;justify-content:center;align-items:center;gap:.35em;margin:0 0 12px;text-align:left;white-space:nowrap;font:700 22px/1.25 PixelUI,sans-serif;color:#644480}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next strong{color:#95562e;white-space:nowrap;font-weight:700}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-week{display:grid;grid-template-columns:max-content 64px;align-items:center;justify-content:center;gap:12px;height:72px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots{display:flex;align-items:center;gap:4px;flex-shrink:0}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots img{display:block;flex-shrink:0;width:48px;height:48px;image-rendering:pixelated}
/* Slot transforms are driven by the same clock as the weekly green impact. */
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots .is-new{transform-origin:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button{font-family:PixelUI,sans-serif;outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift{display:block;position:relative;width:64px;height:72px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-image:none;background:none;border-radius:0;opacity:1;filter:none;transform:none;scale:1;translate:none;rotate:none;transition:transform 80ms ease-out}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift img{display:block;width:64px;height:72px;max-width:none;image-rendering:pixelated;transform-origin:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift::before,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift::after{content:none;display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift.is-available{cursor:pointer}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift.is-available img{scale:1.15;animation:streak-gift-bump 300ms ease-out both,streak-gift-nudge 2.6s 0s infinite}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift.is-available:active{transform:scale(.94)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift.is-available:active img{animation-play-state:paused}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-actions{height:58px;width:min(100%,340px)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-continue{display:block;position:relative;width:100%;height:58px;min-height:0;margin:0;padding:10px 16px;border:0;border-image:url('/assets/interface-v2/pastel-ui/lavender-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);background:none;border-radius:0;color:#50367c;font:700 28px/1 PixelUI,sans-serif;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 220ms,transform 220ms;image-rendering:pixelated;image-rendering:crisp-edges;}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-continue::before,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-continue::after{content:none;display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-ready[data-gift=false] .streak-continue,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-reward .streak-continue{opacity:1;visibility:visible;transform:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-continue:active{transform:translateY(2px);border-image-source:url('/assets/interface-v2/pastel-ui/lavender-pressed.png')}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward{width:100%;padding:20px 16px;display:grid;justify-items:center;gap:8px;border:0;border-image:url('/assets/interface-v2/pastel-ui/lavender-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);color:#50367c;transform-origin:center;animation:streak-panel-pop 320ms ease-out both;image-rendering:pixelated;image-rendering:crisp-edges;}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward[hidden]{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward h2{margin:0;font:700 26px/1.1 PixelUI,sans-serif;color:#50367c;-webkit-text-stroke:0;text-shadow:none;text-align:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward>img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward-value{margin:0;font:700 28px/1.1 PixelUI,sans-serif}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward small{font:18px/1.1 PixelUI,sans-serif;text-align:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-reward .streak-milestone{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting .streak-details,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting .streak-count,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting :is(#streak-label,#activity-streak-label){opacity:0;transition:opacity 350ms}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting .streak-glow{opacity:0;transition:opacity 850ms}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting::backdrop{opacity:var(--streak-veil-opacity,1);animation:none}
html body[data-home=true] #account-link{display:none!important}
html body .home-counters{position:absolute;z-index:12;top:calc(env(safe-area-inset-top,0px) + 26px);left:84px;right:24px;display:flex;align-items:center;justify-content:space-evenly;gap:12px;max-width:420px;margin:0 auto;pointer-events:none;white-space:nowrap}
html body .home-counter{display:flex;align-items:center;gap:6px;font:800 20px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:white;-webkit-text-stroke:0;text-shadow:none;font-variant-numeric:tabular-nums}
html body .home-counter.streak-mini{color:#ff7d11}
html body .home-counter.translation-mini{color:#aefff2}
html body .home-counter b{font-weight:800;-webkit-text-stroke:0;text-shadow:none}
html body .home-counter img{display:block;flex-shrink:0;width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
html body .home-counter.is-updated{animation:streak-slot-bump 450ms}
@media(max-width:599px){
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{width:100%;max-width:420px;gap:22px;padding:12px 16px 20px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots img{width:32px;height:32px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-count{font-size:88px;height:86px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{font-size:22px}
 html body .home-counters{gap:10px;left:72px;right:16px;top:calc(env(safe-area-inset-top,0px) + 26px)}
 html body .home-counter{font-size:18px;gap:5px}
}
@media(orientation:landscape) and (max-height:650px){
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{grid-template-columns:minmax(180px,1fr) minmax(290px,1fr);gap:20px;width:min(94%,880px);padding:10px 16px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-fire{height:calc(var(--flame-scale)*44px)}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-count{font-size:80px;height:76px;margin-top:0}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(#streak-label,#activity-streak-label){font-size:24px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots img{width:16px;height:16px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-details{gap:16px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward{padding:14px 12px;gap:6px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward>img{width:48px;height:48px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{font-size:22px}
 html body .home-counters{top:calc(env(safe-area-inset-top,0px) + 10px)}
}
@media(max-height:650px) and (orientation:portrait){
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{gap:10px;padding-top:4px;padding-bottom:12px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-fire{height:150px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-count{height:72px;font-size:80px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(#streak-label,#activity-streak-label){font-size:26px}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-details{gap:12px}
}
@media(orientation:landscape) and (max-height:650px) and (min-width:800px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots img{width:32px;height:32px}}
@media(orientation:landscape) and (max-height:650px) and (max-width:799px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{font-size:20px}}
@media(max-width:359px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{font-size:18px}}
@media(max-width:359px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots img{width:16px;height:16px}html body .home-counters{gap:6px;left:64px;right:12px}html body .home-counter{font-size:16px;gap:3px}}
@keyframes streak-veil-in{from{opacity:0}to{opacity:1}}
/* Switch to green on the exact painted summit of the seventh slot. */
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(.streak-milestone,.streak-reward,.streak-continue){position:relative;isolation:isolate}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(.streak-milestone,.streak-reward,.streak-continue)::after{content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border:0;border-image:url('/assets/interface-v2/pastel-ui/mint-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);opacity:0;image-rendering:pixelated;image-rendering:crisp-edges;}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-week-complete :is(.streak-milestone,.streak-reward,.streak-continue)::after{opacity:1}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-week-complete :is(.streak-next,.streak-next strong,.streak-reward,.streak-reward h2,.streak-continue){color:#295747}
@media(orientation:landscape) and (max-height:650px){
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{grid-template-columns:1fr 1fr;animation:none}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-hero{transform:translate(calc(50% + 10px),8px);transition:transform 380ms cubic-bezier(.2,.85,.25,1.06)}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-meter .streak-hero{transform:none}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-details{opacity:0;transform:translateX(100vw)}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-meter .streak-details{opacity:1;transform:none;animation:streak-slide-details 380ms ease-out both}
 html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-meter .streak-milestone,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-reward{animation:none}
}
@keyframes streak-slide-details{0%{opacity:0;transform:translateX(100vw)}70%{opacity:1;transform:translateX(-8px)}100%{opacity:1;transform:none}}
/* One responsive row: flag, streak, translations, coins. */
html body #home-screen .home-counters{top:calc(env(safe-area-inset-top,0px) + 8px);left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));max-width:none;gap:8px;justify-content:space-around}
html body .home-counter{font-size:clamp(20px,2.5vw,36px)}
html body .home-counter img{width:clamp(32px,3vw,48px);height:clamp(32px,3vw,48px)}
html body #home-language{all:unset;position:relative;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;pointer-events:auto;touch-action:manipulation}
html body #home-language img{display:block;width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px);object-fit:contain;image-rendering:pixelated;pointer-events:none}
html body #home-screen>#language-options{inset:calc(env(safe-area-inset-top,0px) + 60px) auto auto max(8px,env(safe-area-inset-left))!important;display:flex;flex-direction:column;gap:6px;z-index:35;translate:none!important;max-height:calc(100dvh - 160px);overflow-y:auto}
html body #home-screen>#language-options[hidden]{display:none!important}
@keyframes streak-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes streak-slot-bump{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(.96)}}
@keyframes streak-gift-bump{0%{scale:1}40%{scale:1.26}70%{scale:1.10}100%{scale:1.15}}
@keyframes streak-gift-nudge{0%,16%,100%{rotate:0deg}3%,9%{rotate:-7deg}6%,12%{rotate:7deg}}
/* Move the panel without rescaling its native corner pixels. Timing is unchanged. */
@keyframes streak-panel-pop{0%{opacity:0;transform:translateY(12px)}40%{opacity:1;transform:translateY(-2px)}72%{opacity:1;transform:translateY(1px)}100%{opacity:1;transform:translateY(0)}}
@keyframes streak-glow-peak{0%{opacity:1;scale:1.4}100%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) *,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak)::backdrop{animation:none!important;transition:none!important}}

/* Current game charter, with the original flame/count/slot clock preserved. */
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak){--streak-bg:#f0e7fb;--streak-panel:#fffaf1;--streak-orange:#ff9600;--streak-orange-edge:#b86c00}
html[data-ui-theme=dark] body :is(#daily-streak,#haptic-streak-preview,#activity-streak){--streak-bg:#292c30;--streak-panel:#1b1d1f}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-count{color:#fff!important;-webkit-text-stroke:0!important;text-shadow:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).has-impact .streak-count{color:var(--streak-orange)!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{padding-bottom:88px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-details{align-self:center;align-content:center}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-milestone{padding:12px;border:0;border-image:none;border-radius:12px;background:var(--streak-panel)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-milestone::after{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-next{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-week{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:12px;height:64px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots{display:flex;justify-content:space-around;gap:8px;width:100%;min-width:0}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot{--slot-base:0px;--slot-press:0px;--slot-scale:1;--slot-light:1;--slot-face:var(--streak-bg);--slot-bed:color-mix(in srgb,var(--streak-bg) 48%,#000);--slot-edge:color-mix(in srgb,var(--slot-face) 70%,#000);display:block;position:relative;flex:0 1 28px;width:28px;aspect-ratio:1;background:var(--streak-bg);border-radius:25%;box-shadow:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--slot-bed);opacity:calc((1 - var(--slot-light)) / .14);pointer-events:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot[data-filled=true]{--slot-face:var(--streak-orange);--slot-base:0px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot[data-filled=true][data-oxygen=true]{--slot-face:#01cd9c}
/* The socket stays flat and still. Only the coloured face/V has a Pop edge.
   Its bottom edge stays on the socket baseline; pressing reveals the socket
   above it, then the face returns flush without a remaining edge or hollow. */
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot-face{display:block;visibility:hidden;position:absolute;inset:var(--slot-press) 0 0;border-radius:inherit;background:var(--slot-face);translate:0 calc(-1 * var(--slot-base));transform:scale(var(--slot-scale));transform-origin:center;filter:brightness(var(--slot-light));box-shadow:0 var(--slot-base) 0 var(--slot-edge);pointer-events:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot[data-filled=true]>.streak-slot-face{visibility:visible}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot[data-filled=true]>.streak-slot-face::after{content:'';position:absolute;width:64.285714%;height:calc(50% + var(--slot-press) / 2);left:50%;top:calc(50% + var(--slot-press) / 2);transform:translate(-50%,-50%);background:#fff;mask:url('/assets/pass-nuit-2026-10-17/validation-verte.png') center/contain no-repeat;image-rendering:pixelated}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift img{width:58px;height:64px;object-fit:contain}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-actions{position:fixed;bottom:max(16px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),340px);height:52px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button:is(.streak-start,.streak-continue){--action-face:var(--streak-orange);--action-edge:var(--streak-orange-edge);--action-ink:#fff;border:3px solid transparent;border-image:none;border-radius:14px;background:var(--action-face);color:var(--action-ink)!important;font:400 26px/1 UniversityActions,PixelUI,sans-serif;text-transform:uppercase;box-shadow:0 5px 0 var(--action-edge)!important;translate:0 0;transition:opacity 220ms,transform 220ms,translate 90ms,box-shadow 90ms;text-shadow:none!important;-webkit-text-stroke:0}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-continue{height:48px;min-height:48px;padding:8px 16px}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button:is(.streak-start,.streak-continue)::after{display:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button:is(.streak-start,.streak-continue):is(:active,[data-pressed=true],.is-action-key-pressed):not(:disabled){transform:none;translate:0 4px;box-shadow:0 1px 0 var(--action-edge)!important;filter:none}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-milestone{border-radius:12px!important;background:var(--streak-panel)!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak):not(#streak-frame-a#streak-frame-b#streak-frame-c#streak-frame-d) .streak-milestone{background:var(--streak-panel)!important;outline:0!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) :is(.streak-milestone,button:is(.streak-start,.streak-continue))::before{content:none!important;display:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button:is(.streak-start,.streak-continue){border:3px solid transparent!important;border-radius:14px!important;background:var(--action-face)!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-exiting>.streak-actions{opacity:0;pointer-events:none;transition:opacity 350ms}
@media(max-width:359px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slots{gap:5px}html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-slot{flex-basis:22px}}
@media(orientation:landscape) and (max-height:650px){html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-composition{padding-bottom:76px}html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-week{height:52px}html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-gift img{width:46px;height:52px}}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-oxygen-waiting :is(.streak-count,.streak-details,.streak-actions,.streak-hero>h1){visibility:hidden}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak).is-oxygen-waiting .streak-fire>canvas{visibility:hidden}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger{all:unset!important;position:absolute!important;display:block!important;left:50%!important;bottom:calc(-28px * var(--flame-scale))!important;translate:-50% 0!important;width:var(--flame-width)!important;height:var(--flame-width)!important;pointer-events:auto!important;cursor:pointer!important;outline:0!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger[hidden]{display:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger::before,html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger::after{content:none!important;display:none!important}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger canvas{position:static;width:100%;height:100%;transform:none;max-width:none;image-rendering:pixelated;pointer-events:none;transition:transform 80ms ease-out,filter 80ms ease-out}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) button.streak-oxygen-trigger[data-pressed=true] canvas{transform:translateY(4px) scale(.90);filter:brightness(.92)}
html body :is(#daily-streak,#haptic-streak-preview,#activity-streak) .streak-oxygen-particles{position:fixed;inset:0;display:block;width:100%;height:100%;z-index:100;pointer-events:none;image-rendering:pixelated}