/* Website-wide upgrades: loader, progress, back-to-top, music dock, ambient, mobile polish. */
/* ---- loader ---- */
.x-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 30% 20%,#fff4f6,transparent 50%),radial-gradient(circle at 80% 80%,#ece3fa,transparent 55%),linear-gradient(160deg,#fbe9ee,#f3ecfa 55%,#faf1dc);color:#5a4660;animation:xLoadSafe .6s 5s forwards}
.x-loader.hide{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
@keyframes xLoadSafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.x-loader-stars i{position:absolute;font-style:normal;color:#d9b15f;font-size:18px;animation:xTwinkle 2.6s ease-in-out infinite}
.x-loader-stars i:nth-child(1){left:14%;top:18%}.x-loader-stars i:nth-child(2){left:80%;top:14%;animation-delay:.5s;color:#c3a3ea}.x-loader-stars i:nth-child(3){left:22%;top:76%;animation-delay:1s;color:#ee9cb8}.x-loader-stars i:nth-child(4){left:84%;top:70%;animation-delay:1.4s}.x-loader-stars i:nth-child(5){left:50%;top:10%;animation-delay:.8s;font-size:13px}.x-loader-stars i:nth-child(6){left:60%;top:86%;animation-delay:1.8s;color:#c3a3ea;font-size:14px}
@keyframes xTwinkle{50%{opacity:.25;transform:scale(.65) rotate(25deg)}}
.x-loader-box{padding:0 24px}
.x-loader-cake{display:block;font-size:44px;animation:xBob 2.4s ease-in-out infinite}
@keyframes xBob{50%{transform:translateY(-8px)}}
.x-loader-t{margin:14px 0 4px;font:10px var(--mono);letter-spacing:.2em;color:#a07a92}
.x-loader h1{margin:0;font:600 clamp(30px,9vw,48px)/1.1 var(--serif);letter-spacing:-.02em}
.x-loader h1 em{font-weight:500;color:#b0607a}
.x-loader-bar{display:block;width:150px;height:3px;margin:22px auto 0;border-radius:3px;background:#e6d6e4;overflow:hidden}
.x-loader-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#e59ab5,#a98be0);animation:xFill 1.6s ease-out forwards}
@keyframes xFill{to{width:100%}}

/* ---- progress ---- */
.x-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1000;pointer-events:none;background:#ffffff22}
.x-progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,#e59ab5,#d6b45f,#a98be0);transition:width .5s ease;border-radius:0 3px 3px 0}
.x-progress-chip{position:fixed;top:8px;right:8px;z-index:1000;pointer-events:none;padding:3px 8px;border-radius:12px;background:#fffaf0dd;color:#7a5a6a;font:8.5px var(--mono);letter-spacing:.1em;box-shadow:0 2px 6px #0002;opacity:0;transition:opacity .4s}
.x-progress-chip.on{opacity:1}

/* ---- floating controls ---- */
.x-dock{position:fixed;left:10px;bottom:10px;z-index:150;display:flex;gap:6px;padding:5px;border-radius:30px;background:#fffaf0e6;box-shadow:0 4px 14px #3a2a4a33;backdrop-filter:blur(6px);opacity:0;pointer-events:none;transform:translateY(10px);transition:.4s}
.x-dock.on{opacity:1;pointer-events:auto;transform:none}
.x-dock button,.x-top{width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#6d4a7a;font:17px/1 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px #e6d3e3;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:.2s}
.x-dock button:active,.x-top:active{transform:scale(.92)}
.x-dock button.playing{background:linear-gradient(135deg,#e59ab5,#a98be0);color:#fff;box-shadow:0 0 12px #c58be099}
.x-top{position:fixed;right:12px;bottom:12px;z-index:150;opacity:0;pointer-events:none;transform:translateY(12px);background:#fffaf0f2;box-shadow:0 4px 14px #3a2a4a33,inset 0 0 0 1px #e6d3e3;font-size:18px}
.x-top.on{opacity:1;pointer-events:auto;transform:none}
.x-toast{position:fixed;left:50%;bottom:70px;z-index:160;max-width:86vw;transform:translate(-50%,10px);padding:10px 16px;border-radius:20px;background:#3d2e48ee;color:#fff;font:12px/1.4 var(--sans);text-align:center;opacity:0;pointer-events:none;transition:.35s}
.x-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- ambient + confetti canvases ---- */
.x-ambient,.x-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.x-ambient{z-index:15}
.x-confetti{z-index:180}

/* ---- mobile polish ---- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip}
button,[role=button],a,input[type=range],summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
.text-button,.button,.x-btn-warm,.y-btn,.y-btn-ghost,.c-btn,.g-btn,.u-btn,.x-btn,.u-replay,.x-replay,.g-close{min-height:44px}
.text-button{padding-left:14px;padding-right:14px}
@media(max-width:560px){
  body{font-size:15px}
  .x-dock{left:8px;bottom:8px}.x-top{right:8px;bottom:8px}
  .x-progress-chip{top:6px;right:6px}
  pre,table{max-width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){.x-loader-cake,.x-loader-stars i,.x-loader-bar b{animation:none!important}.x-loader-bar b{width:100%}}