/* Feslottet – full-screen shell screens: title, fairy select (cloud stage), bedtime (SHELL WP). Scales with --u. */
#screens { position: fixed; inset: 0; z-index: 100; pointer-events: none; font-family: var(--font); color: var(--ink); }
#screens > * { pointer-events: auto; }
#screens > .closing { pointer-events: none !important; }
#screens > .closing * { pointer-events: none !important; }
.scr { position: fixed; inset: 0; opacity: 0; transition: opacity .5s; }
.scr.on { opacity: 1; }

/* ------------------------------------------------------------ title */
.ts { background: radial-gradient(ellipse at 50% 120%, rgba(255, 220, 240, .55) 0%, rgba(255, 220, 240, 0) 55%), linear-gradient(180deg, rgba(150, 200, 255, .35) 0%, rgba(255, 255, 255, 0) 40%); }
.ts-logo { position: absolute; left: 50%; top: calc(34px * var(--u)); transform: translateX(-50%); text-align: center; pointer-events: none; animation: tsFloat 5s ease-in-out infinite; }
@keyframes tsFloat { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, calc(-8px * var(--u))); } }
.ts-crown { width: calc(150px * var(--u)); height: calc(70px * var(--u)); display: block; margin: 0 auto calc(-14px * var(--u)); filter: drop-shadow(0 4px 6px rgba(150, 90, 0, .3)); }
.ts-title { margin: 0; font-size: calc(118px * var(--u)); line-height: 1; font-weight: 700; letter-spacing: calc(1px * var(--u));
  background: linear-gradient(180deg, #fff6fb 0%, #ffd1e6 38%, #ff8dc0 62%, #c48cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: calc(4px * var(--u)) #fff; paint-order: stroke fill;
  filter: drop-shadow(0 calc(5px * var(--u)) 0 #b06aa8) drop-shadow(0 calc(10px * var(--u)) calc(18px * var(--u)) rgba(90, 40, 120, .35)); }
.ts-tag { display: inline-block; margin-top: calc(8px * var(--u)); padding: calc(4px * var(--u)) calc(22px * var(--u)); font-size: calc(26px * var(--u)); font-weight: 700; color: #6a4aa8;
  background: rgba(255, 255, 255, .85); border-radius: 999px; box-shadow: 0 calc(4px * var(--u)) calc(12px * var(--u)) rgba(90, 50, 150, .2); }
.ts-bottom { position: absolute; left: 50%; bottom: calc(70px * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(26px * var(--u)); }
.ts-play { position: relative; display: flex; align-items: center; gap: calc(18px * var(--u)); height: calc(128px * var(--u)); padding: 0 calc(46px * var(--u)) 0 calc(30px * var(--u));
  border-radius: 999px; border: calc(6px * var(--u)) solid #fff; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: calc(64px * var(--u)); color: #fff; letter-spacing: calc(3px * var(--u));
  background: linear-gradient(180deg, #ffb3d6 0%, #ff7fb0 55%, #f06aa4 100%); text-shadow: 0 calc(3px * var(--u)) 0 #c84d86;
  box-shadow: 0 calc(9px * var(--u)) 0 #c84d86, 0 calc(18px * var(--u)) calc(40px * var(--u)) rgba(150, 40, 100, .4); animation: tsPulse 1.6s ease-in-out infinite; transition: transform .1s; }
.ts-play:active { transform: translateY(calc(5px * var(--u))) scale(.98); box-shadow: 0 calc(3px * var(--u)) 0 #c84d86; }
@keyframes tsPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08) drop-shadow(0 0 calc(14px * var(--u)) rgba(255, 240, 160, .9)); } }
.ts-play .tri { width: calc(64px * var(--u)); height: calc(64px * var(--u)); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 -4px 0 rgba(200, 80, 140, .25); }
.ts-play .tri::after { content: ''; margin-left: calc(7px * var(--u)); border-left: calc(26px * var(--u)) solid #ff7fb0; border-top: calc(17px * var(--u)) solid transparent; border-bottom: calc(17px * var(--u)) solid transparent; }
.ts-play .me { width: calc(96px * var(--u)); height: calc(96px * var(--u)); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #ffe3f1); border: calc(4px * var(--u)) solid #fff; overflow: hidden; flex: none; margin-left: calc(-14px * var(--u)); }
.ts-play .me img { width: 100%; height: 100%; object-fit: contain; }
.ts-sound { width: calc(86px * var(--u)); height: calc(86px * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 calc(6px * var(--u)) calc(16px * var(--u)) rgba(80, 60, 140, .25); padding: calc(14px * var(--u)); pointer-events: none; }
.ts-sound .w { animation: tsWave 1.4s ease-in-out infinite; } .ts-sound .w2 { animation-delay: .25s; }
@keyframes tsWave { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
.ts-new { position: absolute; left: calc(18px * var(--u)); bottom: calc(16px * var(--u)); width: calc(60px * var(--u)); height: calc(60px * var(--u)); border-radius: 50%; opacity: .45; cursor: pointer;
  background: rgba(255, 255, 255, .8); border: 0; padding: calc(10px * var(--u)); transition: opacity .2s; }
.ts-new:hover { opacity: .9; }
.ts-spark { position: absolute; width: calc(22px * var(--u)); height: calc(22px * var(--u)); pointer-events: none; animation: sparkle 2.2s ease-in-out infinite; }

/* ------------------------------------------------------------ fairy select: cloud stage */
.fsel { background: transparent; }
.fs-hit { position: absolute; border-radius: calc(40px * var(--u)); cursor: pointer; background: transparent; border: 0; padding: 0; outline: none; transform: translate(-50%, 0); }
.fs-hit:hover { background: rgba(255, 255, 255, .12); }
.fs-name { position: absolute; transform: translate(-50%, 0); padding: calc(6px * var(--u)) calc(20px * var(--u)); border-radius: calc(16px * var(--u)); font-size: calc(30px * var(--u)); font-weight: 700;
  background: rgba(255, 255, 255, .95); color: var(--ink); white-space: nowrap; box-shadow: 0 calc(4px * var(--u)) 0 rgba(120, 90, 180, .25), 0 calc(8px * var(--u)) calc(18px * var(--u)) rgba(90, 60, 150, .2); cursor: pointer;
  border: calc(3px * var(--u)) solid #fff; transition: transform .25s, background .25s; }
.fs-name.sel { background: linear-gradient(#fff7d0, #ffe27a); transform: translate(-50%, 0) scale(1.08); border-color: #ffd84a; }
.fs-ok { position: absolute; width: calc(132px * var(--u)); height: calc(132px * var(--u)); transform: translate(-50%, 0) scale(0); border-radius: 50%; border: calc(6px * var(--u)) solid #fff; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #c8ffe2, #6fd6a8 55%, #3fb986); box-shadow: 0 calc(8px * var(--u)) 0 #2e9a6c, 0 0 0 calc(10px * var(--u)) rgba(255, 240, 150, .5); padding: calc(22px * var(--u));
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); animation: okGlow 1.1s ease-in-out infinite alternate; }
.fs-ok.on { transform: translate(-50%, 0) scale(1); }
.fs-ok:active { transform: translate(-50%, calc(4px * var(--u))) scale(.96); }
@keyframes okGlow { from { box-shadow: 0 calc(8px * var(--u)) 0 #2e9a6c, 0 0 0 calc(6px * var(--u)) rgba(255, 240, 150, .6); } to { box-shadow: 0 calc(8px * var(--u)) 0 #2e9a6c, 0 0 0 calc(22px * var(--u)) rgba(255, 240, 150, .1); } }
.fs-ok svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ bedtime */
.bs { background: radial-gradient(ellipse at 50% 110%, #ffd9a8 0%, #ffc3c9 35%, #d9b8f2 70%, #b9a5f0 100%); display: flex; align-items: center; justify-content: center; }
.bs-moon { position: absolute; right: 2%; top: calc(16px * var(--u)); width: calc(150px * var(--u)); height: calc(150px * var(--u)); filter: drop-shadow(0 0 calc(30px * var(--u)) rgba(255, 240, 170, .9)); animation: tsFloat2 6s ease-in-out infinite; }
@keyframes tsFloat2 { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(calc(-10px * var(--u))) rotate(3deg); } }
.bs-star { position: absolute; width: calc(26px * var(--u)); height: calc(26px * var(--u)); animation: sparkle 3s ease-in-out infinite; pointer-events: none; }
.bs-card { position: relative; width: min(calc(980px * var(--u)), 92vw); max-height: 94vh; overflow: auto; padding: calc(18px * var(--u)) calc(36px * var(--u)) calc(24px * var(--u)); background: rgba(255, 252, 246, .94);
  border: calc(5px * var(--u)) solid #fff; border-radius: calc(40px * var(--u)); box-shadow: 0 calc(20px * var(--u)) calc(60px * var(--u)) rgba(90, 50, 140, .35); text-align: center; transition: opacity .6s, transform .6s; }
.bs-card.out { opacity: 0; transform: translateY(calc(40px * var(--u))) scale(.94); pointer-events: none; }
.bs-card h1 { margin: 0 0 calc(4px * var(--u)); font-size: calc(62px * var(--u)); color: #8a5ad6; text-shadow: 0 calc(3px * var(--u)) 0 #fff; }
.bs-row { display: flex; align-items: center; justify-content: center; gap: calc(18px * var(--u)); margin: calc(9px * var(--u)) 0; padding: calc(10px * var(--u)) calc(16px * var(--u)); border-radius: calc(24px * var(--u));
  background: #fff; border: calc(3px * var(--u)) solid #f1e6ff; transition: box-shadow .3s, transform .3s; flex-wrap: wrap; }
.bs-row.lit { box-shadow: 0 0 0 calc(6px * var(--u)) rgba(255, 216, 74, .55); transform: scale(1.02); }
.bs-row .ico { width: calc(64px * var(--u)); height: calc(64px * var(--u)); flex: none; }
.bs-coins { display: flex; align-items: center; gap: calc(14px * var(--u)); }
.bs-coins .grp { display: flex; gap: calc(6px * var(--u)); flex-wrap: wrap; max-width: calc(420px * var(--u)); justify-content: center; }
.bs-coins .coin10 { position: relative; top: auto; width: calc(46px * var(--u)); height: calc(46px * var(--u)); font-size: calc(17px * var(--u)); }
.bs-coins .coin1 { width: calc(26px * var(--u)); height: calc(26px * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd84a 45%, var(--hud-gold2)); box-shadow: 0 2px 0 var(--hud-gold3); }
.bs-coins .plus { font-size: calc(40px * var(--u)); font-weight: 700; color: #b9a5f0; }
.bs-coins .hud-chip { height: calc(64px * var(--u)); font-size: calc(44px * var(--u)); min-width: calc(80px * var(--u)); }
.bs-words { display: flex; gap: calc(10px * var(--u)); flex-wrap: wrap; justify-content: center; max-height: calc(220px * var(--u)); overflow: hidden; }
.bs-word { width: calc(96px * var(--u)); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.bs-word .im { width: calc(82px * var(--u)); height: calc(82px * var(--u)); border-radius: calc(20px * var(--u)); background: radial-gradient(circle at 50% 40%, #fff, #f3ecff); display: flex; align-items: center; justify-content: center; }
.bs-word .im img { width: 92%; height: 92%; object-fit: contain; }
.bs-word .w { font-size: calc(26px * var(--u)); font-weight: 700; margin-top: calc(2px * var(--u)); }
.bs-towers { display: flex; gap: calc(30px * var(--u)); align-items: flex-end; }
.bs-tower { display: flex; flex-direction: column; align-items: center; }
.bs-tower svg { width: calc(58px * var(--u)); height: calc(92px * var(--u)); }
.bs-tower .n { font-size: calc(30px * var(--u)); font-weight: 700; color: #3fb986; }
.bs-next { margin-top: calc(8px * var(--u)); display: inline-flex; align-items: center; gap: calc(16px * var(--u)); padding: calc(10px * var(--u)) calc(34px * var(--u)) calc(10px * var(--u)) calc(14px * var(--u));
  font-family: var(--font); font-size: calc(40px * var(--u)); font-weight: 700; color: #6a4aa8; border-radius: 999px; border: calc(5px * var(--u)) solid #fff; cursor: pointer;
  background: linear-gradient(#fff7d0, #ffe27a); box-shadow: 0 calc(7px * var(--u)) 0 #e0a91e, 0 calc(14px * var(--u)) calc(30px * var(--u)) rgba(150, 100, 20, .3); }
.bs-next svg { width: calc(62px * var(--u)); height: calc(62px * var(--u)); }
.bs-next:active { transform: translateY(calc(4px * var(--u))); box-shadow: 0 calc(3px * var(--u)) 0 #e0a91e; }
.bs-sleep { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: all .8s cubic-bezier(.3, 1.4, .5, 1); text-align: center; pointer-events: none; }
.bs-sleep.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bs-sleep svg { width: calc(300px * var(--u)); height: calc(270px * var(--u)); filter: drop-shadow(0 12px 18px rgba(90, 50, 140, .3)); }
.bs-z { position: absolute; font-size: calc(46px * var(--u)); font-weight: 700; color: #fff; text-shadow: 0 2px 0 #b9a5f0; animation: zz 3s ease-in infinite; opacity: 0; }
.bs-z.b { animation-delay: 1s; font-size: calc(36px * var(--u)); } .bs-z.c { animation-delay: 2s; font-size: calc(28px * var(--u)); }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(60px * var(--u)), calc(-120px * var(--u))) scale(1.2); } }
.bs .hud-gear { position: absolute; z-index: 3; }

/* ------------------------------------------------------------ golden bedtime light (both scenes) */
.golden-veil { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 6s ease;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 180, 100, 0) 55%, rgba(255, 175, 95, .05) 78%, rgba(255, 160, 100, .08) 100%); mix-blend-mode: multiply; }   /* edges only, ≤8 % (the light lerp in main.js is mild too) */
.golden-veil.on { opacity: 1; }
body.screen-on #labels, body.screen-on #bubbles, body.screen-on .hud-place, body.screen-on .hud-homearrow { visibility: hidden; }
body.screen-on #sub { bottom: calc(20px * var(--u)); }
.bs-head { display: flex; align-items: center; justify-content: center; gap: calc(14px * var(--u)); }
.bs-head img { width: calc(84px * var(--u)); height: calc(84px * var(--u)); object-fit: contain; filter: drop-shadow(0 4px 6px rgba(90, 50, 140, .25)); }

/* ------------------------------------------------------------ pause (Esc): big kid buttons over a soft veil */
.ps { background: rgba(80, 60, 140, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
body.screen-on.pause-on #panels { z-index: 20; }
.ps-card { display: flex; flex-direction: column; align-items: center; gap: calc(30px * var(--u)); padding: calc(34px * var(--u)) calc(50px * var(--u)) calc(30px * var(--u));
  background: rgba(255, 252, 246, .96); border: calc(5px * var(--u)) solid #fff; border-radius: calc(44px * var(--u)); box-shadow: 0 calc(20px * var(--u)) calc(60px * var(--u)) rgba(60, 30, 120, .35);
  transform: scale(.85); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ps.on .ps-card { transform: scale(1); }
.ps-go { width: calc(170px * var(--u)); height: calc(170px * var(--u)); border-radius: 50%; border: calc(7px * var(--u)) solid #fff; cursor: pointer; padding: calc(32px * var(--u));
  background: radial-gradient(circle at 40% 30%, #ffc2dc, #ff7fb0 55%, #f06aa4); box-shadow: 0 calc(9px * var(--u)) 0 #c84d86, 0 calc(18px * var(--u)) calc(36px * var(--u)) rgba(150, 40, 100, .35);
  animation: tsPulse 1.6s ease-in-out infinite; }
.ps-go:active { transform: translateY(calc(5px * var(--u))); box-shadow: 0 calc(3px * var(--u)) 0 #c84d86; }
.ps-go svg { width: 100%; height: 100%; display: block; margin-left: calc(6px * var(--u)); }
.ps-row { display: flex; gap: calc(26px * var(--u)); align-items: flex-start; }
.ps-t { width: calc(150px * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--u)); background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font); font-size: calc(22px * var(--u)); font-weight: 700; color: #6a4aa8; line-height: 1.1; }
.ps-t svg { width: calc(104px * var(--u)); height: calc(104px * var(--u)); padding: calc(18px * var(--u)); border-radius: 50%; background: #fff; border: calc(5px * var(--u)) solid #efe6ff;
  box-shadow: 0 calc(6px * var(--u)) 0 #d9c8f7, 0 calc(10px * var(--u)) calc(20px * var(--u)) rgba(90, 60, 150, .2); box-sizing: border-box; transition: transform .12s; }
.ps-t:active svg { transform: translateY(calc(4px * var(--u))); }
.ps-t .off-only { display: none; }
.ps-t.off svg { background: #f4f0f6; border-color: #e8dff0; }
.ps-t.off .off-only { display: inline; }
.ps-t.off .on-only { display: none; }
.ps-t.off span { color: #a497bf; }