/* UI kit v1 — one visual language for every panel around the study room.
 * Two surfaces only: "paper" (cream, wine accent) for collections and settings,
 * "night" (dark wood, gold accent) for quick in-scene panels. Loaded last on both the
 * personal room and the hall; it restyles existing markup and changes no behaviour. */

/* ---------- 0. Tokens ---------- */
:root{
  --sa-paper:#f8f3ea;--sa-paper-2:#f1e9dc;--sa-card:#fffdf8;--sa-line:#e3d7c5;--sa-line-strong:#cdbda3;
  --sa-ink:#43352d;--sa-ink-soft:#8a7462;--sa-wine:#8a4a45;--sa-wine-deep:#6f3835;
  --sa-night:#201812;--sa-night-2:#2b2118;--sa-night-line:rgba(216,176,120,.26);--sa-cream:#f3e6cf;--sa-cream-soft:#c9b391;
  --sa-gold:#e6b468;--sa-gold-deep:#c98533;--sa-gold-ink:#2b1c08;
  --sa-r3:#4f9fce;--sa-r4:#9a7bd2;--sa-r5:#d09a34;--sa-r6:#b684d6;
  --sa-ease:cubic-bezier(.2,.7,.2,1);
  accent-color:#c98533;
}
/* "Songti SC" only exists on Apple systems. Give the same family name a serif CJK face
 * elsewhere, so headings do not silently become the sans fallback on Windows/Android. */
@font-face{font-family:"Songti SC";font-weight:400;src:local("Songti SC Regular"),local("STSongti-SC-Regular"),local("Songti SC"),local("Noto Serif CJK SC"),local("Noto Serif SC"),local("Source Han Serif SC"),local("Source Han Serif CN"),local("SimSun"),local("NSimSun")}
@font-face{font-family:"Songti SC";font-weight:700;src:local("Songti SC Bold"),local("STSongti-SC-Bold"),local("Noto Serif CJK SC Bold"),local("Noto Serif SC Bold"),local("Source Han Serif SC Bold"),local("SimSun"),local("NSimSun")}

/* ---------- 1. Shared behaviour ---------- */
dialog:not(.sw5):not(.sa-room-overlay){animation:sa-dialog-in .3s var(--sa-ease)}
dialog:not(.sw5):not(.sa-room-overlay)::backdrop{animation:sa-fade-in .3s ease}
dialog.sa-room-overlay,dialog.sw5{animation:sa-fade-in .35s ease}
@keyframes sa-dialog-in{from{opacity:0;translate:0 16px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes sa-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sa-sheet-in{from{translate:0 100%}to{translate:0 0}}
@keyframes sa-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes sa-pop{0%{scale:.6;opacity:0}60%{scale:1.12;opacity:1}100%{scale:1}}
@keyframes sa-sheen{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}

dialog button:not(.saw-ticket){transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,scale .12s,filter .18s}
dialog:not(.sw5) button:not(:disabled):active{scale:.97}
dialog *{scrollbar-width:thin;scrollbar-color:rgba(160,128,96,.5) transparent}
dialog :focus-visible{outline-color:var(--sa-focus,#e2ad62)!important}
dialog select,.controls select{-webkit-appearance:none;appearance:none;padding-right:30px!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:11px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a48a6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.sa-surface-paper,#saShop,#saCompanion,.sa-nav-menu,.sa-tools-dialog:not(#audioMixer),#saAccountPanel,.sao-detail,#saGacha,.sa-welcome{--sa-focus:#8a4a45}

/* ---------- 2. Menu ---------- */
.sa-nav-menu{background:var(--sa-paper);color:var(--sa-ink);border:1px solid var(--sa-line-strong);border-radius:22px;padding:22px 22px 24px;box-shadow:0 30px 110px rgba(0,0,0,.45)}
.sa-nav-menu::backdrop{background:rgba(16,12,9,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sa-nav-menu{--pad-t:22px;--pad-x:22px}
/* A sticky header sticks at the content edge, i.e. below the dialog padding, and scrolled rows used to
 * show through that gap. The header now owns the top padding and spans the full width. */
.sa-nav-menu header{background:var(--sa-paper);margin:calc(-1*var(--pad-t)) calc(-1*var(--pad-x)) 12px;padding:var(--pad-t) var(--pad-x) 12px;top:calc(-1*var(--pad-t));box-shadow:0 1px 0 var(--sa-line)}
.sa-nav-menu h2{font:600 22px/1.3 "Songti SC",serif;letter-spacing:.08em}
.sa-nav-menu h3{color:var(--sa-ink-soft);letter-spacing:.2em}
.sa-menu-groups section{border-top-color:var(--sa-line)}
.sa-nav-menu button,.sa-nav-menu select{background:var(--sa-card)!important;color:var(--sa-ink)!important;border:1px solid var(--sa-line)!important;border-radius:12px!important}
.sa-nav-menu .sa-menu-items button{display:flex;align-items:center;gap:11px;min-height:46px!important;font-size:14px}
.sa-nav-menu button:hover{background:#f6eede!important;border-color:var(--sa-line-strong)!important}
.sa-nav-menu button[aria-pressed=true]{background:var(--sa-card)!important;border-color:var(--sa-line)!important}
.sa-nav-menu header button{border-radius:999px!important;padding:7px 16px!important}
.sa-nav-menu [data-icon]::before{content:"";flex:none;width:19px;height:19px;background:var(--sa-wine);opacity:.85;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.sa-nav-menu [data-toggle]::after{content:"";flex:none;margin-left:auto;width:36px;height:20px;border-radius:99px;transition:background-color .2s,background-position .2s var(--sa-ease);
  background:radial-gradient(circle,#fff 60%,rgba(255,255,255,0) 64%) 2px 50%/16px 16px no-repeat,#d8ccb9}
.sa-nav-menu [data-toggle][aria-pressed=true]:not([data-toggle=inverse])::after,.sa-nav-menu [data-toggle=inverse]:not([aria-pressed=true])::after{background-color:var(--sa-gold-deep);background-position:calc(100% - 2px) 50%}
.sa-nav-menu .sa-menu-exit button{color:#a04a3c!important}
.sa-nav-menu .sa-menu-exit [data-icon]::before{background:#a04a3c}
.sa-nav-menu .sa-daylight-control{background:var(--sa-card);border:1px solid var(--sa-line);border-radius:12px;padding:8px 12px;color:var(--sa-ink)}
.sa-nav-menu .sa-daylight-control small{color:var(--sa-ink-soft)}
.sa-nav-menu .hall-weather-control{border-color:var(--sa-line);border-radius:12px;background:var(--sa-card)}
.sa-nav-menu label{color:var(--sa-ink-soft)}
[data-icon=book]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3zM5 17a3 3 0 0 1 3-3h11'/%3E%3C/svg%3E")}
[data-icon=timer]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6'/%3E%3C/svg%3E")}
[data-icon=heart]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.6 4.3 4.3 0 0 1 19.5 10C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E")}
[data-icon=lamp]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3h7l3.5 8.5h-14zM12 11.5V19M8 21h8'/%3E%3C/svg%3E")}
[data-icon=bag]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5H6zM9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E")}
[data-icon=shirt]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5L3 7.5l2.5 3.8L7 10.2V20.5h10V10.2l1.5 1.1L21 7.5l-5.5-4a3.6 3.6 0 0 1-7 0z'/%3E%3C/svg%3E")}
[data-icon=sliders]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v6M5 14v6M12 4v2M12 10v10M19 4v9M19 17v3M3 12h4M10 8h4M17 15h4'/%3E%3C/svg%3E")}
[data-icon=mute]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12.5 5v14l-5-4.5H4zM16.5 9.5l4.5 5M21 9.5l-4.5 5'/%3E%3C/svg%3E")}
[data-icon=bulb]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.4 1.1 2.2h5c0-.8.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
[data-icon=rain]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15a4 4 0 0 1 .6-8 5.5 5.5 0 0 1 10.5 1.6A3.3 3.3 0 0 1 17.5 15zM8.5 18l-1 3M12.5 18l-1 3M16.5 18l-1 3'/%3E%3C/svg%3E")}
[data-icon=snow]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9M10 4.5l2 2 2-2M10 19.5l2-2 2 2'/%3E%3C/svg%3E")}
[data-icon=eye]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
[data-icon=fullscreen]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E")}
[data-icon=user]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
[data-icon=users]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.8a3.5 3.5 0 0 1 0 6.4M17.5 14.2a6.5 6.5 0 0 1 4 5.8'/%3E%3C/svg%3E")}
[data-icon=image]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='15.5' cy='9' r='1.4'/%3E%3C/svg%3E")}
[data-icon=clock]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
[data-icon=sparkle]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5.2L18 10l-5.2 1.8L11 17l-1.8-5.2L4 10l5.2-1.8zM18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E")}
[data-icon=edit]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4'/%3E%3C/svg%3E")}
[data-icon=exit]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E")}
@media(max-width:720px){
  .sa-nav-menu{--pad-t:26px;--pad-x:16px;margin:auto 0 0;width:100vw;max-width:100vw;max-height:88dvh;border-radius:24px 24px 0 0;border-bottom:0;padding:26px 16px calc(18px + env(safe-area-inset-bottom));animation:sa-sheet-in .34s var(--sa-ease)!important}
  .sa-nav-menu header{border-radius:24px 24px 0 0}
  .sa-nav-menu header::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:4px;border-radius:99px;translate:-50% 0;background:#cdbda3}
  .sa-nav-menu .sa-menu-items button{min-height:44px!important;font-size:13px!important}
}

/* ---------- 3. Wardrobe ---------- */
#saShop{background:var(--sa-paper);color:var(--sa-ink);border-color:var(--sa-line-strong)}
#saShop .sa-shop-header{background:linear-gradient(180deg,#fffaf1,var(--sa-paper));border-bottom-color:var(--sa-line)}
#saShop .sa-shop-header h2{font:600 26px/1.3 "Songti SC",serif;letter-spacing:.08em}
#saShop .sa-wallet b{color:var(--sa-wine);font-variant-numeric:tabular-nums}
#saShop button{border-color:var(--sa-line-strong);color:var(--sa-wine-deep);border-radius:11px}
#saShop button:not(:disabled):hover{background:#f6ecdc;border-color:#bca788}
#saShop [aria-pressed=true],#saShop .sa-primary{background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep);color:#fff6e8}
#saShop [aria-pressed=true]:hover,#saShop .sa-primary:not(:disabled):hover{background:linear-gradient(180deg,#a5605a,#7a3f3b);border-color:#7a3f3b}
#saShop #saClose{border-radius:999px}
#saShop .sa-shop-layout{grid-template-columns:clamp(250px,27%,320px) minmax(0,1fr);gap:24px}
/* Fitting stage: a lit alcove instead of a flat pill. */
#saShop .sa-look{position:relative;border:1px solid var(--sa-line);border-radius:140px 140px 18px 18px;
  background:radial-gradient(ellipse 78% 50% at 50% 26%,#fffdf6,rgba(255,253,246,0) 70%),radial-gradient(ellipse 60% 12% at 50% 88%,rgba(120,84,54,.22),rgba(120,84,54,0) 70%),linear-gradient(180deg,#f6eddd,#e9dcc8);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.45),0 14px 34px rgba(90,60,36,.14)}
#saShop .sa-look iframe{max-height:min(46dvh,400px)}
#saShop .sa-look.is-swapping iframe{animation:sa-look-swap .55s var(--sa-ease)}
#saShop .sa-look.is-swapping::after{content:"";position:absolute;inset:8% 12% 14%;border-radius:50%;pointer-events:none;border:2px solid rgba(214,160,84,.7);animation:sa-look-ring .6s ease-out both}
@keyframes sa-look-swap{from{opacity:.25;scale:.96;filter:brightness(1.5)}to{opacity:1;scale:1;filter:none}}
@keyframes sa-look-ring{from{opacity:.9;scale:.7}to{opacity:0;scale:1.15}}
#saShop .sa-shop-tabs{padding:4px;border-radius:14px;background:var(--sa-paper-2);border:0;gap:4px}
#saShop .sa-shop-tabs button{border:0;border-radius:10px;background:transparent}
#saShop .sa-shop-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));box-shadow:0 4px 12px rgba(111,56,53,.3)}
#saShop .sa-search input,#saShop .sa-filters select{border-color:var(--sa-line-strong);border-radius:10px;background-color:var(--sa-card)}
/* Cards: denser grid, rarity frame, status chips on the art. */
#saShop .sa-product-grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px;padding:6px 6px 18px 4px}
#saShop .sa-product{position:relative;padding:0 12px 12px;border:1.5px solid var(--sa-line);border-radius:16px;background:var(--sa-card);box-shadow:0 2px 8px rgba(90,60,36,.06);transition:translate .22s var(--sa-ease),box-shadow .22s,border-color .22s;animation:sa-rise .4s var(--sa-ease) backwards}
#saShop .sa-product:nth-child(2){animation-delay:.03s}#saShop .sa-product:nth-child(3){animation-delay:.06s}#saShop .sa-product:nth-child(4){animation-delay:.09s}
#saShop .sa-product:nth-child(5){animation-delay:.12s}#saShop .sa-product:nth-child(6){animation-delay:.15s}#saShop .sa-product:nth-child(7){animation-delay:.18s}#saShop .sa-product:nth-child(n+8){animation-delay:.21s}
#saShop .sa-product img,#saShop .sa-no-accessory{width:calc(100% + 24px);margin:0 -12px 10px;transition:scale .5s var(--sa-ease)}
#saShop .sa-product{overflow:hidden;display:flex;flex-direction:column}
#saShop .sa-product .sa-card-actions{margin-top:auto;padding-top:10px}
#saShop .sa-product h3{font-size:14px;line-height:1.45;margin:0 0 4px}
#saShop .sa-rarity{position:absolute;left:8px;top:8px;margin:0;padding:3px 9px;border-radius:99px;font-size:10.5px;letter-spacing:.5px;color:#fff3d6;background:rgba(38,27,20,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#saShop .sa-product[data-rarity="3"] .sa-rarity{color:#bfe4fb}
#saShop .sa-product[data-rarity="4"] .sa-rarity{color:#dccbfb}
#saShop .sa-product[data-rarity="5"] .sa-rarity{color:#ffdc93}
#saShop .sa-product[data-rarity="6"] .sa-rarity{color:#fff;background:linear-gradient(110deg,rgba(60,140,156,.86),rgba(126,90,176,.86),rgba(184,96,134,.86))}
#saShop .sa-ownership{position:absolute;left:8px;top:34px;padding:3px 9px;border-radius:99px;font-size:10.5px;color:#f1e6d6;background:rgba(38,27,20,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#saShop .sa-product[data-owned=true] .sa-ownership{color:#2b1c08;background:linear-gradient(180deg,#f3d08d,#dba54b)}
#saShop .sa-product[data-rarity="5"]{border-color:#dcbd7d;box-shadow:0 2px 10px rgba(208,154,52,.16)}
#saShop .sa-product[data-rarity="6"]{border-color:transparent;box-shadow:0 3px 14px rgba(150,110,190,.2);
  background:linear-gradient(var(--sa-card),var(--sa-card)) padding-box,linear-gradient(135deg,#86cfd9,#c3a3e6,#efb3cd,#e9d58d) border-box}
/* The sheen is a band moving inside a box that is exactly the artwork: the image always spans the
 * card's width and its height follows the card kind, so the box needs no measuring. */
#saShop .sa-product:is([data-rarity="5"],[data-rarity="6"])::after{content:"";position:absolute;top:0;left:0;right:0;height:170px;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 58%) no-repeat;background-size:300% 100%;background-position:120% 0}
#saShop .sa-product[data-kind="outfit"]:is([data-rarity="5"],[data-rarity="6"])::after{height:auto;aspect-ratio:4/5}
#saShop .sa-product[data-kind="accessory"]:is([data-rarity="5"],[data-rarity="6"])::after{height:auto;aspect-ratio:1}
#saShop .sa-series{border-color:var(--sa-line-strong);border-radius:99px;background:var(--sa-paper-2)}
#saShop .sa-card-actions{flex-wrap:wrap;gap:6px}
#saShop .sa-card-actions button{border-radius:10px;flex:1 1 auto;white-space:nowrap}
@media(hover:hover){
  #saShop .sa-product:hover{translate:0 -4px;box-shadow:0 14px 30px rgba(90,60,36,.18);border-color:#c9b08a}
  #saShop .sa-product[data-rarity="6"]:hover{border-color:transparent}
  #saShop .sa-product:hover img{scale:1.04}
  #saShop .sa-product:is([data-rarity="5"],[data-rarity="6"]):hover::after{animation:sa-sheen 1s ease-out}
}
@media(max-width:720px){
  #saShop .sa-shop-layout{display:flex;gap:8px}
  #saShop .sa-look{width:132px;border-radius:66px 66px 14px 14px}
  #saShop .sa-look iframe{width:132px;height:148px;max-height:none}
  #saShop .sa-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:4px 2px 14px}
  #saShop .sa-product{padding:0 9px 10px;border-radius:14px}
  #saShop .sa-product img,#saShop .sa-no-accessory{width:calc(100% + 18px);margin:0 -9px 8px}
  #saShop .sa-product:is([data-rarity="5"],[data-rarity="6"])::after{height:150px}
  #saShop .sa-shop-header h2{font-size:20px!important}
}

/* ---------- 4. Outfit detail ---------- */
.sao-detail{background:var(--sa-paper);color:var(--sa-ink);border:1px solid var(--sa-line-strong);border-radius:22px;box-shadow:0 30px 120px rgba(0,0,0,.5)}
.sao-detail::backdrop{background:rgba(16,12,9,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sao-detail button{color:var(--sa-wine-deep);background:var(--sa-card);border:1px solid var(--sa-line-strong);border-radius:999px}
.sao-detail button:hover{background:#f6ecdc}
.sao-detail .sao-action button{color:#fff6e8;background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep);padding:11px 28px}
.sao-detail .sao-figure img{border-radius:16px;box-shadow:0 18px 44px rgba(70,44,26,.26);animation:sa-rise .6s var(--sa-ease) backwards}
.sao-detail .sao-dossier{color:var(--sa-ink);background:var(--sa-card);border:1px solid var(--sa-line);border-top:4px solid var(--reveal-color,#b99a6a);border-radius:14px;animation:sa-rise .6s var(--sa-ease) .08s backwards}
.sao-detail .sao-dossier h2{font:600 30px/1.4 "Songti SC",serif;color:var(--sa-ink)}
.sao-detail .sao-dossier blockquote{border-color:var(--sa-line);color:var(--sa-ink-soft);font:15px/1.8 "Songti SC",serif}
.sao-detail .sao-dossier dt,.sao-detail .sao-eyebrow,.sao-detail .sao-figure figcaption{color:var(--sa-ink-soft)}
.sao-detail .sao-stars{color:var(--sa-r5);font-size:15px}
.sao-detail .sao-content h3{font:600 20px "Songti SC",serif;color:var(--sa-wine-deep)}
.sao-detail .sao-content>*{animation:sa-rise .6s var(--sa-ease) .14s backwards}

/* ---------- 5. Wish home and the exchange pages ---------- */
/* One header for every tab: the cream bar the wish page already has. */
#saGacha{background:var(--sa-paper);color:var(--sa-ink);border-color:var(--sa-line-strong)}



#saGacha:not([data-view=wish]) button{color:var(--sa-wine-deep);background:var(--sa-card);border:1px solid var(--sa-line-strong);border-radius:11px}
#saGacha:not([data-view=wish]) button:not(:disabled):hover{background:#f6ecdc;border-color:#bca788}
#saGacha:not([data-view=wish]) button[aria-pressed=true]{color:#fff6e8;background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep)}










#saGacha:not([data-view=wish]) .sag-status{color:var(--sa-wine);padding:6px 24px 0}
#saGacha:not([data-view=wish]) .sag-body{padding:14px 24px 24px;scrollbar-color:rgba(160,128,96,.5) transparent}
#saGacha:not([data-view=wish]) .sag-body h2{color:var(--sa-ink);font-weight:600}
#saGacha:not([data-view=wish]) :is(.sag-note,.sag-shop-hint,.sag-shop-heading small,.sag-empty,.sag-confirm p,.sag-result p,.sag-item-card p,.sag-item-card small){color:var(--sa-ink-soft)}
#saGacha:not([data-view=wish]) .sag-shop-controls :is(input,select){background-color:var(--sa-card);color:var(--sa-ink);border-color:var(--sa-line-strong);border-radius:11px}
#saGacha:not([data-view=wish]) .sag-item-card{border:1.5px solid var(--sa-line);background:var(--sa-card);border-radius:16px;box-shadow:0 2px 8px rgba(90,60,36,.06);transition:translate .22s var(--sa-ease),box-shadow .22s;animation:sa-rise .4s var(--sa-ease) backwards}
#saGacha:not([data-view=wish]) .sag-item-card:nth-child(2){animation-delay:.04s}#saGacha:not([data-view=wish]) .sag-item-card:nth-child(3){animation-delay:.08s}#saGacha:not([data-view=wish]) .sag-item-card:nth-child(n+4){animation-delay:.12s}
#saGacha:not([data-view=wish]) .sag-item-card h3{color:var(--sa-ink);font:600 17px/1.4 "Songti SC",serif}
#saGacha:not([data-view=wish]) .sag-item-art{border-radius:12px;background:radial-gradient(ellipse 60% 22% at 50% 88%,rgba(120,84,54,.22),rgba(120,84,54,0) 70%),linear-gradient(180deg,#f8f0e2,#efe4d2)}
#saGacha:not([data-view=wish]) .sag-item-art :is(img,canvas){filter:drop-shadow(2px 7px 5px rgba(70,44,26,.3));transition:scale .4s var(--sa-ease)}
#saGacha:not([data-view=wish]) .sag-item-art img{filter:none;border-radius:12px}
#saGacha:not([data-view=wish]) .sag-stars{color:var(--sa-r5)}
#saGacha:not([data-view=wish]) .sag-shop-buy:not(:disabled),#saGacha:not([data-view=wish]) .sag-primary{color:#fff6e8;background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep);box-shadow:none}
#saGacha:not([data-view=wish]) .sag-shop-buy:not(:disabled):hover,#saGacha:not([data-view=wish]) .sag-primary:not(:disabled):hover{background:linear-gradient(180deg,#a5605a,#7a3f3b);border-color:#7a3f3b}
#saGacha:not([data-view=wish]) :is(.sag-exchange-banner,.sag-confirm,.sag-result){border:1px solid var(--sa-line);border-radius:18px;background:var(--sa-card)}
#saGacha:not([data-view=wish]) .sag-exchange-banner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 30px;padding:30px;background:radial-gradient(ellipse 60% 120% at 0 0,#f7ead3,rgba(247,234,211,0) 70%),var(--sa-card)}
#saGacha:not([data-view=wish]) .sag-exchange-banner .sag-ticket-art{grid-row:1/5;margin:0 6px 0 0;width:210px;height:112px;border-radius:14px;border:0;color:#5b4366;font:600 26px "Songti SC",serif;letter-spacing:.2em;
  background:radial-gradient(circle 9px at 0 50%,var(--sa-card) 98%,transparent) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,var(--sa-card) 98%,transparent) right/51% 100% no-repeat,linear-gradient(120deg,#d9c1dd,#f3e3c1);
  box-shadow:0 14px 26px rgba(91,67,102,.22),inset 0 0 0 5px rgba(255,255,255,.45)}
#saGacha:not([data-view=wish]) .sag-exchange-banner p{margin:0;font-size:15px;color:var(--sa-ink)}
#saGacha:not([data-view=wish]) .sag-exchange-banner button{margin:0;justify-self:start;min-width:230px;text-align:left}
#saGacha:not([data-view=wish]) .sag-rewards article{background:var(--sa-paper);border-color:var(--sa-line);border-top-width:3px;color:var(--sa-ink)}
#saGacha:not([data-view=wish]) .sag-rewards [data-rarity='6']{background:linear-gradient(140deg,#f3e9f8,#fdf3e2)}
#saGacha:not([data-view=wish]) .sag-preview-grid article{border:1.5px solid color-mix(in srgb,var(--reveal-color) 70%,#fff);border-radius:16px;background:linear-gradient(170deg,color-mix(in srgb,var(--reveal-color) 16%,#fffdf8),var(--sa-card));transition:translate .22s var(--sa-ease),box-shadow .22s}
#saGacha:not([data-view=wish]) .sag-preview-grid h3{color:var(--sa-ink);font:600 19px "Songti SC",serif}
#saGacha:not([data-view=wish]) .sag-preview-grid .sag-stars{color:color-mix(in srgb,var(--reveal-color) 70%,#3a2d24)}
#saGacha:not([data-view=wish]) :is(details,summary){color:var(--sa-ink);border-color:var(--sa-line)}
#saGacha:not([data-view=wish]) details p{color:var(--sa-ink-soft)}
#saGacha:not([data-view=wish]) .sag-body>label{display:inline-flex;align-items:center;gap:8px;margin-left:14px;color:var(--sa-ink-soft);font-size:13px}
#saGacha .sag-empty-state{display:grid;justify-items:center;gap:6px;padding:54px 16px;color:var(--sa-ink-soft);text-align:center}
#saGacha .sag-empty-state::before{content:"✦";font:44px Georgia,serif;color:#d9c7a8}
#saGacha .sag-empty-state b{font:600 18px "Songti SC",serif;color:var(--sa-ink)}
@media(hover:hover){
  #saGacha:not([data-view=wish]) :is(.sag-item-card,.sag-preview-grid article):hover{translate:0 -4px;box-shadow:0 14px 30px rgba(90,60,36,.16)}
  #saGacha:not([data-view=wish]) .sag-item-card:hover .sag-item-art :is(img,canvas){scale:1.05}
}
@media(max-width:720px){





  #saGacha:not([data-view=wish]) .sag-body{padding:12px 12px 18px}
  #saGacha:not([data-view=wish]) .sag-exchange-banner{grid-template-columns:1fr;padding:20px 16px;justify-items:center;text-align:center}
  #saGacha:not([data-view=wish]) .sag-exchange-banner .sag-ticket-art{grid-row:auto;margin:0 0 8px;width:190px;height:100px}
  #saGacha:not([data-view=wish]) .sag-exchange-banner button{justify-self:stretch;text-align:center;min-width:0}
}
/* Wish page: readable calls to action. */
#saGacha .sg9-draw{border:1px solid #c9b48a!important;background:linear-gradient(180deg,#fffdf6,#f1e7d3)!important;box-shadow:0 6px 18px rgba(114,86,44,.18)}
#saGacha .sg9-draw:last-child{border:0!important;color:#2b1c08!important;background:linear-gradient(180deg,#f4cd88,#d0953f)!important;box-shadow:0 10px 26px rgba(208,149,63,.4),inset 0 1px 0 rgba(255,255,255,.5)}
#saGacha .sg9-draw:last-child small{color:#5c421a}
#saGacha .sg9-draw:last-child .sg9-ticket{color:#fff6dc}
#saGacha .sg9-draw:disabled{opacity:.62;filter:saturate(.55)}
#saGacha .sg9-signature{padding:10px 16px;border-radius:14px 0 14px 0;background:linear-gradient(110deg,rgba(40,26,20,.5),rgba(40,26,20,.22));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 6px rgba(40,22,18,.7)}
#saGacha .sg9-pool{transition:translate .22s var(--sa-ease),box-shadow .22s}
#saGacha .sg9-details{border-radius:18px;border-color:var(--sa-line-strong);animation:sa-dialog-in .3s var(--sa-ease)}
@media(hover:hover){#saGacha .sg9-pool:hover{translate:4px 0;box-shadow:0 10px 22px rgba(68,42,21,.24)}}
@media(max-width:1000px){
  /* Draw buttons stay reachable without scrolling past the whole card. */
  #saGacha .sg9-stage{padding-bottom:128px}
  #saGacha .sg9-footer{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;padding:22px 14px calc(12px + env(safe-area-inset-bottom));gap:6px;background:linear-gradient(180deg,rgba(246,239,227,0),#f6efe3 34%)}
  #saGacha .sg9-exchange{align-self:center}
}

/* ---------- 6. Companion ---------- */
#saCompanion{background:var(--sa-paper);color:var(--sa-ink);border-color:var(--sa-line-strong)}
#saCompanion header{background:linear-gradient(180deg,#fffaf1,var(--sa-paper));border-bottom-color:var(--sa-line)}
#saCompanion h2{font:600 26px/1.3 "Songti SC",serif;letter-spacing:.06em}
#saCompanion button,#saCompanion select{border-color:var(--sa-line-strong);color:var(--sa-wine-deep);border-radius:11px}
#saCompanion button:not(:disabled):hover{background:#f6ecdc;border-color:#bca788}
#saCompanion #sacClose{border-radius:999px}
#saCompanion .sac-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep))!important;border-color:var(--sa-wine-deep)!important;box-shadow:0 4px 12px rgba(111,56,53,.28)}
#saCompanion .sac-aside{position:relative;background:linear-gradient(180deg,#f3ebde,var(--sa-paper));border-right-color:var(--sa-line)}
#saCompanion .sac-stage{border-color:var(--sa-line);background:radial-gradient(ellipse 78% 50% at 50% 26%,#fffdf6,rgba(255,253,246,0) 70%),radial-gradient(ellipse 56% 9% at 50% 91%,rgba(120,84,54,.24),rgba(120,84,54,0) 70%),linear-gradient(180deg,#f6eddd,#e9dcc8);box-shadow:inset 0 0 0 5px rgba(255,255,255,.45),0 14px 34px rgba(90,60,36,.14)}
#saCompanion .sac-aside progress{-webkit-appearance:none;appearance:none;height:10px;border:0;border-radius:99px;overflow:hidden;background:#e6dac8}
#saCompanion .sac-aside progress::-webkit-progress-bar{background:#e6dac8}
#saCompanion .sac-aside progress::-webkit-progress-value{border-radius:99px;background:linear-gradient(90deg,#c9837a,var(--sa-wine));transition:width .8s var(--sa-ease)}
#saCompanion .sac-aside progress::-moz-progress-bar{border-radius:99px;background:linear-gradient(90deg,#c9837a,var(--sa-wine))}
#saCompanion .sac-subtitle{color:var(--sa-wine);font-family:"Songti SC",serif}
#saCompanion .sac-card{border:1.5px solid var(--sa-line);border-radius:16px;background:var(--sa-card);box-shadow:0 2px 8px rgba(90,60,36,.06);transition:translate .22s var(--sa-ease),box-shadow .22s;animation:sa-rise .4s var(--sa-ease) backwards}
#saCompanion .sac-card:nth-child(2){animation-delay:.04s}#saCompanion .sac-card:nth-child(3){animation-delay:.08s}#saCompanion .sac-card:nth-child(n+4){animation-delay:.12s}
#saCompanion .sac-card h3{font:600 18px/1.4 "Songti SC",serif;color:var(--sa-ink)}
#saCompanion .sac-stars{color:var(--sa-r5)}
#saCompanion .sac-status{background:var(--sa-paper-2);color:var(--sa-wine)}
#saCompanion .sac-stage-list li{border-left-color:var(--sa-line-strong);position:relative}
#saCompanion .sac-stage-list li::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--sa-paper);border:2px solid var(--sa-line-strong)}
#saCompanion .sac-stage-list li.unlocked{border-left-color:var(--sa-wine)}
#saCompanion .sac-stage-list li.unlocked::before{background:var(--sa-wine);border-color:var(--sa-wine)}
.sa-affinity-float{position:absolute;z-index:5;left:50%;top:36%;pointer-events:none;translate:-50% 0;padding:4px 12px;border-radius:99px;color:#fff6e8;background:linear-gradient(180deg,#b9685f,var(--sa-wine));font:600 15px/1.4 system-ui;box-shadow:0 8px 22px rgba(111,56,53,.35);animation:sa-affinity 1.7s var(--sa-ease) both}
@keyframes sa-affinity{0%{opacity:0;translate:-50% 14px;scale:.7}18%{opacity:1;translate:-50% 0;scale:1.08}30%{scale:1}100%{opacity:0;translate:-50% -64px}}
@media(hover:hover){#saCompanion .sac-card:hover{translate:0 -3px;box-shadow:0 12px 26px rgba(90,60,36,.15)}}

/* ---------- 7. Study notebook, account, mixer ---------- */
.sa-tools-dialog{background:var(--sa-paper);color:var(--sa-ink);border:1px solid var(--sa-line-strong);border-radius:22px;box-shadow:0 30px 110px rgba(0,0,0,.45)}
.sa-tools-dialog::backdrop{background:rgba(16,12,9,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sa-tools-dialog{--pad:24px}
.sa-tools-dialog header{background:var(--sa-paper);margin:calc(-1*var(--pad)) calc(-1*var(--pad)) 6px;padding:var(--pad) var(--pad) 10px;top:calc(-1*var(--pad))}
@media(max-width:600px){.sa-tools-dialog{--pad:16px}}
.sa-tools-dialog h2{font:600 23px/1.3 "Songti SC",serif;letter-spacing:.08em}
.sa-tools-dialog h3{font:600 19px/1.4 "Songti SC",serif;margin:14px 0 4px}
.sa-tools-dialog button{background:var(--sa-card);color:var(--sa-wine-deep);border-color:var(--sa-line-strong);border-radius:11px}
.sa-tools-dialog button:not(:disabled):hover{background:#f6ecdc;border-color:#bca788}
.sa-tools-dialog header button{border-radius:999px}
.sa-tools-dialog button[aria-pressed=true]{color:#fff6e8;background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep)}
.sa-tools-dialog nav{padding:4px;border-radius:14px;background:var(--sa-paper-2);gap:4px}
.sa-tools-dialog nav button{flex:1;border:0;background:transparent;border-radius:10px}
.sa-tools-dialog input:not([type=checkbox]):not([type=range]){border-color:var(--sa-line-strong);background:var(--sa-card);color:var(--sa-ink);border-radius:11px}
.sa-tools-dialog small{color:var(--sa-ink-soft)}
.sa-tools-dialog [role=status]{color:var(--sa-wine)}
.sa-tools-dialog .sa-tool-actions button:nth-child(2){color:#fff6e8;background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep)}
.sa-calendar{gap:5px}
.sa-calendar button{position:relative;border:0!important;border-radius:8px!important;min-height:34px;font-variant-numeric:tabular-nums;color:var(--sa-ink-soft)!important;transition:scale .15s,box-shadow .15s}
.sa-calendar [data-level="0"]{background:#efe6d8!important}
.sa-calendar [data-level="1"]{background:#f0d9ad!important;color:#6d5330!important}
.sa-calendar [data-level="2"]{background:#e6b76c!important;color:#4d3513!important}
.sa-calendar [data-level="3"]{background:#cc8a3a!important;color:#fff8ea!important}
.sa-calendar [data-level="4"]{background:var(--sa-wine)!important;color:#fff6e8!important}
.sa-calendar [data-month]::before{content:attr(data-month);position:absolute;left:4px;top:2px;font:700 8px/1.2 system-ui;opacity:.75;white-space:nowrap}
.sa-calendar-legend [data-level="0"]{background:#efe6d8}.sa-calendar-legend [data-level="1"]{background:#f0d9ad}.sa-calendar-legend [data-level="2"]{background:#e6b76c}.sa-calendar-legend [data-level="3"]{background:#cc8a3a}.sa-calendar-legend [data-level="4"]{background:var(--sa-wine)}
.sa-calendar button:hover{scale:1.12;box-shadow:0 4px 12px rgba(90,60,36,.25);z-index:1}
.sa-calendar-legend{display:flex;align-items:center;gap:5px;margin:12px 0 4px;font-size:11px;color:var(--sa-ink-soft)}
.sa-calendar-legend i{width:16px;height:16px;border-radius:5px}
.sa-preset-row{border-bottom-color:var(--sa-line)}
.sa-preset-row b{font:600 16px "Songti SC",serif}
.sa-goal-done{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;color:#fff;background:#5d8f63;font-size:13px;animation:sa-pop .45s var(--sa-ease)}
/* Sound belongs with the room: the mixer uses the night surface. */
#audioMixer{background:var(--sa-night);color:var(--sa-cream);border-color:rgba(216,176,120,.4)}
#audioMixer header{background:var(--sa-night)}
#audioMixer button{background:rgba(255,255,255,.07);color:var(--sa-cream);border-color:var(--sa-night-line)}
#audioMixer button:hover{background:rgba(255,255,255,.14)}
#audioMixer small{color:var(--sa-cream-soft)}
#audioMixer .sa-mixer-line{grid-template-columns:96px 1fr 40px;padding:6px 0;color:var(--sa-cream)}
#audioMixer input[type=range]{accent-color:var(--sa-gold)}
#saAccountPanel{background:var(--sa-paper);color:var(--sa-ink);border-color:var(--sa-line-strong);border-radius:22px;padding:24px}
#saAccountPanel h2{font:600 23px/1.3 "Songti SC",serif;letter-spacing:.08em;margin:0 0 12px}
#saAccountPanel #saAccountClose{float:right;border-radius:999px;margin:-4px 0 0 12px}
#saAccountPanel button{border-color:var(--sa-line-strong);color:var(--sa-wine-deep);border-radius:11px}
#saAccountPanel .sa-primary{background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep);color:#fff6e8}
#saAccountPanel details{border-top:1px solid var(--sa-line);padding-top:12px}
#saAccountPanel summary{cursor:pointer;font-weight:600}
.sa-welcome{border-color:var(--sa-line-strong)}
.sa-welcome h2{font-family:"Songti SC",serif}
.sa-welcome-points strong{animation:sa-pop .7s var(--sa-ease) .15s backwards;color:var(--sa-wine)}
#saWelcomeClaim{background:linear-gradient(180deg,#9a5650,var(--sa-wine-deep));border-color:var(--sa-wine-deep)}

/* ---------- 8. Night panels: customise, timer/music sheets, playlist ---------- */
#customizeDialog,.sa-controls-dialog,.music-dialog{background:linear-gradient(170deg,var(--sa-night-2),var(--sa-night));color:var(--sa-cream);border:1px solid rgba(216,176,120,.4);border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.6)}
#customizeDialog h2,.sa-controls-dialog h2,.music-dialog h2{font:600 21px/1.3 "Songti SC",serif;letter-spacing:.08em}
#customizeDialog label:not([for=outfitSelect]){display:block;margin-top:12px;color:var(--sa-cream-soft);font-size:13px}
#customizeDialog label.atmo-setting{display:flex;color:var(--sa-cream)}
#customizeDialog select{margin:6px 0 4px;border-radius:11px;border-color:var(--sa-night-line);background-color:rgba(0,0,0,.28)}
#customizeDialog #closeCustomize,.sa-controls-dialog>.quiet-button{border-radius:999px;padding:7px 16px}
#customizeDialog #resetPanels{margin-top:14px}
.quiet-button{transition:background-color .18s,border-color .18s}
.quiet-button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}

/* ---------- 9. Room chrome fixes ---------- */
/* The timer used to open over the character's face; it now starts under the toolbar.
 * A position the visitor dragged it to is stored as an inline style and still wins. */
body:not(.sa-compact) #pomo{left:auto;right:16px;top:78px;transform:none}
/* Phone landscape: the toolbar column is 180px wide, so its buttons wrap instead of clipping. */
@media (orientation:landscape) and (max-height:550px){
  .sa-compact .ctrl{flex-wrap:wrap!important;justify-content:flex-start;gap:4px;padding:6px}
  .sa-compact .ctrl>button{flex:1 1 calc(33.3% - 4px)!important;min-width:0;height:32px;line-height:32px;font-size:10.5px;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sa-compact #saStudyStatus{display:none}
}

@media(prefers-reduced-motion:reduce){
  dialog,dialog::backdrop,dialog *,.sa-affinity-float{animation:none!important;transition:none!important}
}