/* 秋日同行通行证 (autumn-pass.js): the chip floating at the top of the study room, the pass card on the code-drawn
   maple-and-lake backdrop (assets/autumn-pass-v1/scene.svg, scripts/make_autumn_pass_art.py), and the reward popup
   on the 新人弹窗's card. */

/* ── chip: top left of the room; inside the stage under the bars on phones and small windows ── */
.sapass-chip{position:fixed;left:14px;top:14px;z-index:19;display:flex;align-items:center;gap:9px;max-width:min(270px,calc(100vw - 28px));
 padding:5px 15px 5px 5px;border:1px solid #f2c27a5c;border-radius:999px;background:linear-gradient(100deg,rgba(70,28,18,.9),rgba(40,24,48,.86));
 color:#fbead0;font:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 transition:transform .15s,box-shadow .2s}
.sapass-chip:hover{transform:translateY(-1px)}
.sapass-chip:active{transform:scale(.97)}
.sapass-chip:focus-visible{outline:2px solid #f2b14f;outline-offset:2px}
.sapass-chip.in-stage{position:absolute;left:10px;top:10px;z-index:16}
/* the music desk is a full-screen scene of its own */
.sa-music-desk .sapass-chip{display:none}
.sapass-chip-text{display:grid;min-width:0}
.sapass-chip-text b{font:600 12.5px/1.3 'Songti SC','Noto Serif SC',serif;letter-spacing:.06em;white-space:nowrap}
.sapass-chip-text small{font-size:11px;line-height:1.35;color:#f3cf98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sapass-ring{--p:0;flex:none;position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
 background:conic-gradient(#f2b14f calc(var(--p)*360deg),rgba(255,255,255,.15) 0)}
.sapass-ring::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#3b1c16}
.sapass-ring>*{position:relative}
.sapass-ring svg{width:18px;height:18px;fill:#e5592f}
.sapass-chip[data-state=unclaimed] .sapass-ring{background:conic-gradient(from 0deg,#f2b14f,#d4492c,#f6d27e,#f2b14f);animation:sapass-turn 6s linear infinite}
.sapass-chip[data-state=unclaimed] .sapass-ring svg,.sapass-chip[data-state=unclaimed] .sapass-ring::before{animation:sapass-turn 6s linear infinite reverse}
.sapass-chip[data-state=ready]{animation:sapass-glow 2.2s ease-in-out infinite}
.sapass-chip[data-state=ready] small{color:#ffe08a}
.sapass-chip[data-state=done] small{color:#cdeaa9}
.sapass-chip[data-state=gap] small{color:#ffb39e}
.sapass-chip[data-state=broken]{filter:saturate(.35);opacity:.82}
@keyframes sapass-turn{to{transform:rotate(360deg)}}
@keyframes sapass-glow{0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.34),0 0 0 0 rgba(242,177,79,0)}50%{box-shadow:0 6px 22px rgba(0,0,0,.34),0 0 0 6px rgba(242,177,79,.32)}}
@media (max-width:400px){.sapass-chip{gap:7px;padding:4px 12px 4px 4px}.sapass-ring{width:30px;height:30px}.sapass-ring svg{width:15px;height:15px}
 .sapass-chip-text b{font-size:11.5px}.sapass-chip-text small{font-size:10.5px}}

/* ── card ── */
.sapass-card{box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #e6cba0;border-radius:20px;
 background:#fbf4e8;color:#3b2a1f;color-scheme:light;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 90px rgba(10,5,3,.55)}
.sapass-card::backdrop{background:rgba(22,12,8,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sapass-empty{padding:60px 24px;text-align:center;color:#7a5a3c}
.sapass-hero{position:relative;height:270px;overflow:hidden;border-radius:19px 19px 0 0;background:#3a2240 url(/tomato/assets/autumn-pass-v1/scene.svg) center 40%/cover no-repeat}
.sapass-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(26,14,30,.74),rgba(26,14,30,.4) 42%,rgba(26,14,30,0) 66%),linear-gradient(0deg,rgba(26,14,30,.35),rgba(26,14,30,0) 40%)}
.sapass-danji,.sapass-xiyao{position:absolute;bottom:-4px;z-index:1;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));pointer-events:none}
.sapass-danji{right:-6px;height:102%}
.sapass-xiyao{right:158px;height:90%}
.sapass-title{position:absolute;left:24px;bottom:22px;z-index:2;max-width:min(56%,380px);color:#fff4e0}
.sapass-title small{font-size:11px;letter-spacing:.3em;color:#f6c88a}
.sapass-title h2{margin:5px 0 7px;font:600 30px/1.15 'Songti SC','Noto Serif SC',serif;letter-spacing:.08em;text-shadow:0 2px 14px rgba(0,0,0,.55);text-wrap:balance}
.sapass-title p{margin:0;font-size:12.5px;line-height:1.55;color:#f7e3c4;text-shadow:0 1px 6px rgba(0,0,0,.5);text-wrap:pretty}
.sapass-close{position:absolute;right:12px;top:12px;z-index:3;padding:6px 14px;border:1px solid rgba(255,255,255,.4);border-radius:12px;
 background:rgba(30,16,12,.5);color:#fff3df;font:inherit;font-size:12.5px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sapass-body{display:grid;gap:14px;padding:18px 22px 22px}
.sapass-sum{display:grid;gap:10px}
.sapass-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sapass-stat{display:flex;align-items:baseline;gap:6px;min-width:0;padding:10px 14px;border:1px solid #ecd9b8;border-radius:14px;background:#fff}
.sapass-stat small{margin-right:auto;font-size:12px;color:#8a6a4a;white-space:nowrap}
.sapass-stat strong{font:600 24px/1 'Songti SC','Noto Serif SC',serif;color:#a33f24}
.sapass-stat span{font-size:12px;color:#9a8468;white-space:nowrap}
.sapass-line{margin:0;font-size:13px;line-height:1.65;color:#5a4330;text-wrap:pretty}
.sapass-flash{margin:0;padding:8px 12px;border-radius:10px;background:#fff0d2;color:#7a4a1c;font-size:12.5px}
.sapass-actions{display:flex;flex-wrap:wrap;gap:8px}
.sapass-primary{padding:10px 18px;border:0;border-radius:12px;background:linear-gradient(120deg,#c44a2a,#e08a3a);color:#fff8ec;font:inherit;font-size:13.5px;font-weight:600;
 cursor:pointer;box-shadow:0 6px 16px rgba(196,74,42,.28)}
.sapass-primary:disabled{opacity:.55;cursor:default;box-shadow:none}
.sapass-ghost{padding:10px 16px;border:1px solid #dcbb8c;border-radius:12px;background:#fff;color:#7a4a24;font:inherit;font-size:13px;cursor:pointer}
.sapass-gap{display:grid;gap:8px;padding:14px 16px;border:1px solid #f0b9a3;border-radius:14px;background:#fff0ea}
.sapass-gap b{font-size:14px;color:#a3361f}
.sapass-gap p{margin:0;font-size:12.5px;line-height:1.65;color:#6d4636;text-wrap:pretty}
.sapass-gap .sapass-primary{justify-self:start}
.sapass-today{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid #f0d3a6;border-radius:14px;background:linear-gradient(100deg,#fff7ea,#fdebd3)}
.sapass-ring-big{width:58px;height:58px;place-content:center;gap:1px}
.sapass-ring-big::before{inset:5px;background:#fff8ee}
.sapass-ring-big b{font:600 18px/1 'Songti SC','Noto Serif SC',serif;color:#a33f24;text-align:center}
.sapass-ring-big small{font-size:10px;color:#8a6a4a;text-align:center}
.sapass-today>div b{font-size:14px;color:#4a2f1e}
.sapass-today>div p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:#7a5a3c;text-wrap:pretty}
/* calendar, Monday to Sunday */
.sapass-cal{display:grid;gap:6px}
.sapass-week,.sapass-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sapass-week span{font-size:11px;text-align:center;color:#9a8468}
.sapass-day{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;min-width:0;min-height:74px;padding:8px 2px 6px;
 border:1px solid #eedcbf;border-radius:12px;background:#fff;color:#5a4330}
.sapass-day>b{font-size:11px;font-weight:600;color:#8a6a4a}
.sapass-reward{display:flex;align-items:center;gap:2px}
.sapass-mini{width:12px;height:12px;fill:#d4572e}
.sapass-reward em{font:600 17px/1.15 'Songti SC','Noto Serif SC',serif;font-style:normal;color:#a33f24}
.sapass-day>small{font-size:10.5px;color:#9a7a55}
.sapass-day[data-weekend]{border-color:#e7b067;background:linear-gradient(160deg,#fff3da,#ffdfb4)}
.sapass-day[data-weekend] .sapass-reward em{font-size:20px;color:#b2361c}
.sapass-day[data-weekend] .sapass-mini{width:14px;height:14px}
.sapass-day[data-today]{outline:2px solid #e08a3a;outline-offset:1px}
.sapass-day[data-status=before],.sapass-day[data-status=lost]{opacity:.45;filter:grayscale(.65)}
.sapass-day[data-status=missed]{border-style:dashed;border-color:#d9a99a;background:#f7ede7}
/* the day's mark sits under its numbers, clear of the date */
.sapass-mark{margin-top:2px;padding:2px 6px;border-radius:8px;background:#efe3cf;color:#7a5a3c;font-size:10px;font-style:normal;line-height:1.1;white-space:nowrap}
.sapass-day[data-status=done] .sapass-mark{background:#3f8a4f;color:#fff}
.sapass-day[data-status=done]:not([data-granted]) .sapass-mark{background:#e08a3a;color:#fff}
.sapass-day[data-status=missed] .sapass-mark{background:#c4553b;color:#fff}
.sapass-day[data-status=held] .sapass-mark{background:#e9b46a;color:#4a2f1e}
.sapass-day[data-status=today] .sapass-mark{background:#fff3df;color:#a33f24;border:1px solid #f0c48a}
.sapass-rules summary{font-size:13px;color:#7a5a3c;cursor:pointer}
.sapass-rules ul{display:grid;gap:5px;margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.65;color:#5a4330}
.sapass-rules li{text-wrap:pretty}
@media (max-width:600px){
 .sapass-hero{height:200px}
 .sapass-xiyao{display:none}
 .sapass-danji{right:-64px;height:96%}
 .sapass-title{left:16px;bottom:16px;max-width:60%}
 .sapass-title h2{font-size:23px}
 .sapass-title p{font-size:11.5px}
 .sapass-body{gap:12px;padding:14px 12px 16px}
 .sapass-stat{flex-wrap:wrap;padding:9px 11px}.sapass-stat small{flex-basis:100%}
 .sapass-week,.sapass-grid{gap:4px}
 .sapass-day{min-height:66px;padding:6px 1px 5px;border-radius:9px}
 .sapass-day>b{font-size:10px}
 .sapass-reward em{font-size:15px}.sapass-day[data-weekend] .sapass-reward em{font-size:17px}
 .sapass-mini{display:none}
 .sapass-day>small{font-size:9.5px}
 .sapass-mark{margin-top:1px;padding:1px 4px;font-size:9px}
}
@media (orientation:landscape) and (max-height:500px){.sapass-hero{height:150px}.sapass-title h2{font-size:22px}.sapass-title p{display:none}}

/* ── reward popup ── */
.sapass-popup{width:min(420px,calc(100vw - 32px));background:radial-gradient(ellipse at top,#ffe9c8,#fff8ee 62%)}
.sapass-popup .sa-welcome-note{margin:4px 0 0;line-height:1.6}
.sapass-popup-leaf{display:block;width:46px;height:46px;margin:0 auto 2px;fill:#d9542c;transform-origin:50% 90%;animation:sapass-sway 3.2s ease-in-out infinite}
.sapass-gifts{display:flex;justify-content:center;gap:28px}
.sapass-gifts .sa-welcome-points{margin:8px 0 16px}
.sapass-gifts .sa-welcome-points strong{font-size:64px;color:#b2361c;font-variant-numeric:lining-nums}
.sapass-popup .sa-primary{border:1px solid #9a3c22;background:linear-gradient(180deg,#d0592f,#a8401f);color:#fff9ed;font:inherit;cursor:pointer}
.sapass-popup button:not(.sa-primary){border:none;background:transparent;color:#756357;font:inherit;cursor:pointer}
.sapass-popup button:disabled{cursor:wait;opacity:.6}
@keyframes sapass-sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.sapass-chip,.sapass-chip *,.sapass-popup-leaf{animation:none!important}}
@media (max-width:400px){.sapass-gifts{gap:16px}.sapass-gifts .sa-welcome-points strong{font-size:52px}}

/* ── 祈愿 wallet: 秋通行券 beside the ordinary tickets ── */