:root {
  --ink: #2b2350;
  --cream: #fffaf0;
  --gold: #ffcf3f;
  --gold-deep: #f29d12;
  --gem: #47d7ff;
  --pill: rgba(36, 28, 84, 0.42);
  --font: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: var(--font); color: var(--cream); user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; }
#game.locked { cursor: none; }
.hidden { display: none !important; }

#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(30, 20, 70, 0.32) 100%); }
#fade { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity .35s ease; }
#fade.on { opacity: 1; }
#fade.dim { background: #0b1a33; opacity: .4; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-left, .hud-right { position: absolute; top: 18px; display: flex; gap: 10px; align-items: center; }
.hud-left { left: 18px; }
.hud-right { right: 18px; }
.pill { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 23px; background: var(--pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 14px rgba(30,20,80,.18);
  font-weight: 700; font-size: 26px; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(30,20,80,.35); }
.pill .dim { opacity: .6; font-size: 18px; font-weight: 600; }
.gem-icon { display: inline-block; width: 20px; height: 20px; transform: rotate(45deg); border-radius: 4px;
  background: linear-gradient(135deg, #e8fcff 0%, #6fe4ff 35%, #1fa6f0 70%, #2f6bdc 100%); box-shadow: 0 0 10px rgba(80, 220, 255, .8), inset 0 0 0 2px rgba(255,255,255,.5); margin-right: 4px; }
.pill.gems.bump { animation: bump .28s ease; }
@keyframes bump { 40% { transform: scale(1.14); } }
.pill.stars { gap: 4px; padding: 0 12px; }
.star { width: 30px; height: 30px; }
.star path { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.55); stroke-width: 1.6; stroke-linejoin: round; }
.star.on path { fill: url(#none); fill: var(--gold); stroke: #fff6c7; filter: drop-shadow(0 0 6px rgba(255, 200, 60, .9)); }
.star.pop { animation: starpop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes starpop { 0% { transform: scale(.3) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.pill.level { font-size: 18px; font-weight: 600; opacity: .95; }
.pill.time { min-width: 150px; justify-content: center; font-variant-numeric: tabular-nums; }
.clock { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }

.hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 12px 22px; border-radius: 16px; background: var(--pill);
  backdrop-filter: blur(6px); font-size: 20px; font-weight: 600; opacity: 0; transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.hint.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }
kbd { display: inline-block; min-width: 26px; padding: 1px 8px; margin: 0 2px; border-radius: 7px; background: rgba(255,255,255,.92); color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: .82em; box-shadow: 0 3px 0 rgba(40,30,90,.35); text-align: center; text-shadow: none; }

.toast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.6); font-size: 54px; font-weight: 700; letter-spacing: 1px; opacity: 0;
  color: #fff; -webkit-text-stroke: 2px rgba(60,40,120,.55); text-shadow: 0 5px 0 rgba(60, 40, 120, .45), 0 0 26px rgba(255,255,255,.5); white-space: nowrap; }
.toast.on { animation: toast 1.6s cubic-bezier(.2,1.4,.4,1) forwards; }
.toast.gold { color: var(--gold); -webkit-text-stroke: 2px #b8640a; text-shadow: 0 5px 0 #a24f00, 0 0 30px rgba(255, 210, 80, .8); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(.96); } }

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.screen.dim { background: radial-gradient(ellipse at center, rgba(40, 30, 100, .28), rgba(30, 20, 70, .55)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#title { justify-content: flex-start; padding-top: 9vh; background: linear-gradient(180deg, rgba(255,255,255,.0) 40%, rgba(40,30,110,.28)); }
.logo { position: relative; text-align: center; animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.logo h1 { margin: 0; font-size: clamp(64px, 11vw, 150px); font-weight: 700; line-height: .95; letter-spacing: 2px; position: relative; }
.logo h1 span { display: inline-block; color: #fff; -webkit-text-stroke: 4px #3d2f8f; paint-order: stroke fill;
  text-shadow: 0 8px 0 #3d2f8f, 0 14px 0 rgba(30,20,80,.25), 0 0 40px rgba(255,255,255,.35); animation: letter 2.4s ease-in-out infinite; }
.logo h1 span:nth-child(odd) { color: #ffe066; }
.logo h1 span:nth-child(3n) { color: #7ee8ff; }
.logo h1 span:nth-child(1) { animation-delay: 0s } .logo h1 span:nth-child(2) { animation-delay: .1s } .logo h1 span:nth-child(3) { animation-delay: .2s }
.logo h1 span:nth-child(4) { animation-delay: .35s } .logo h1 span:nth-child(5) { animation-delay: .45s } .logo h1 span:nth-child(6) { animation-delay: .55s }
.logo h1 span:nth-child(7) { animation-delay: .65s } .logo h1 span:nth-child(8) { animation-delay: .75s } .logo h1 span:nth-child(9) { animation-delay: .85s }
@keyframes letter { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-14px) rotate(-4deg); } 90% { transform: translateY(2px) rotate(2deg); } }
.logo-cloud { position: absolute; left: 50%; top: 50%; width: 120%; height: 150%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.75), rgba(255,255,255,0) 65%); filter: blur(10px); }
.tagline { margin-top: 18px; font-size: 22px; font-weight: 600; color: #fff; text-shadow: 0 2px 0 rgba(60,40,140,.5); letter-spacing: 1px; }
.btn { pointer-events: auto; font-family: var(--font); font-size: 28px; font-weight: 700; color: #5a3200; padding: 14px 54px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #fff3a6 0%, #ffd23f 45%, #f6a419 100%); box-shadow: 0 7px 0 #b8640a, 0 14px 24px rgba(60,30,0,.3), inset 0 2px 0 rgba(255,255,255,.8);
  transition: transform .12s ease, box-shadow .12s ease; letter-spacing: .5px; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #b8640a, 0 6px 12px rgba(60,30,0,.3), inset 0 2px 0 rgba(255,255,255,.8); }
.btn.big { font-size: 38px; padding: 16px 84px; margin-top: 3vh; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.btn.ghost { background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 6px 0 rgba(40,30,90,.4); font-size: 22px; padding: 10px 36px; }
.controls-card { position: absolute; left: 22px; bottom: 18px; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 20px; border-radius: 20px;
  background: var(--pill); backdrop-filter: blur(8px); font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.studio { position: absolute; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; opacity: .9; text-shadow: 0 1px 0 rgba(40,30,90,.4); }
.studio-mark { width: 28px; height: 18px; border-radius: 10px; background: #fff; position: relative; box-shadow: 0 2px 0 rgba(40,30,90,.3); }
.studio-mark::before { content: '9'; position: absolute; inset: 0; color: #4b3bbf; font-size: 14px; font-weight: 700; text-align: center; line-height: 18px; }
.studio-mark::after { content: ''; position: absolute; left: 6px; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: #fff; z-index: -1; }

.intro { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; }
.intro-num { font-size: 26px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; opacity: 0; animation: introIn 2.6s ease forwards; text-shadow: 0 3px 0 rgba(40,30,100,.45); }
.intro-name { font-size: 76px; font-weight: 700; color: #fff; -webkit-text-stroke: 3px #3d2f8f; paint-order: stroke fill; text-shadow: 0 7px 0 #3d2f8f; opacity: 0;
  animation: introIn 2.6s .12s ease forwards; }
@keyframes introIn { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); } }

.card { pointer-events: auto; min-width: 420px; padding: 34px 44px 26px; border-radius: 30px; text-align: center;
  background: linear-gradient(180deg, #6f5cf0 0%, #4b3bbf 100%); box-shadow: 0 10px 0 #2f2390, 0 30px 60px rgba(20, 10, 60, .45), inset 0 2px 0 rgba(255,255,255,.35);
  display: flex; flex-direction: column; align-items: center; gap: 14px; animation: cardIn .55s cubic-bezier(.2,1.5,.4,1); }
.card.small { min-width: 320px; }
@keyframes cardIn { from { transform: scale(.6) translateY(40px); opacity: 0; } }
.card-title { font-size: 52px; font-weight: 700; color: var(--gold); -webkit-text-stroke: 2px #a24f00; paint-order: stroke fill; text-shadow: 0 5px 0 #a24f00; }
.card-sub { font-size: 20px; font-weight: 600; opacity: .85; margin-top: -10px; }
.big-stars { display: flex; gap: 6px; align-items: flex-end; margin: 4px 0 6px; }
.big-stars .star { width: 74px; height: 74px; }
.big-stars .star.mid { width: 92px; height: 92px; margin-bottom: 10px; }
.big-stars .star path { fill: rgba(20,10,60,.35); stroke: rgba(255,255,255,.35); }
.big-stars .star.on path { fill: var(--gold); stroke: #fff6c7; }
.stats { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.stats .row { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-radius: 14px; background: rgba(20, 10, 70, .28); font-size: 22px; font-weight: 600; }
.stats .row b { font-size: 26px; font-variant-numeric: tabular-nums; }
.card-foot { font-size: 15px; opacity: .75; }

.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#7fc8ff, #d9f1ff); transition: opacity .5s; }
.loading.done { opacity: 0; pointer-events: none; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 6px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Held break + continue prompt */
.btn:disabled, .btn.held { filter: grayscale(.6) brightness(.9); opacity: .65; cursor: default; transform: none; animation: none; }
.wait-dots { display: inline-flex; gap: 6px; }
.wait-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .4; animation: dot 1s ease-in-out infinite; }
.wait-dots i:nth-child(2) { animation-delay: .15s; } .wait-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: 1; transform: translateY(-3px); } }
.offer { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; pointer-events: none; }
.offer-card { pointer-events: auto; padding: 18px 24px 14px; border-radius: 22px; text-align: center; min-width: 360px;
  background: linear-gradient(180deg, #6f5cf0, #4b3bbf); box-shadow: 0 7px 0 #2f2390, 0 20px 40px rgba(20,10,60,.4); animation: cardIn .4s cubic-bezier(.2,1.5,.4,1); }
.offer-label { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.offer-actions { display: flex; gap: 12px; justify-content: center; }
.btn.small { font-size: 20px; padding: 9px 26px; }
.btn.small kbd { font-size: 13px; }
.offer-timer { margin-top: 12px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.offer-timer div { height: 100%; background: var(--gold); transform-origin: left center; }
.offer.accepted .offer-timer, .offer.accepted .offer-actions { display: none; }
.offer.accepted .offer-label::after { content: ''; display: block; margin: 10px auto 0; width: 26px; height: 26px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .9s linear infinite; }

@media (max-width: 720px) {
  .pill { height: 38px; font-size: 20px; padding: 0 12px; }
  .star { width: 22px; height: 22px; }
  .pill.time { min-width: 110px; }
  .pill.level { display: none; }
  .controls-card { grid-template-columns: 1fr; font-size: 14px; }
  .card { min-width: 0; width: calc(100% - 32px); padding: 24px 20px; }
}