@font-face {
  font-family: "Noto Sans";
  src: url("./assets/NotoSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #202a49;
  --muted: #6d7692;
  --purple: #5b45e6;
  --purple-dark: #4834c9;
  --mint: #42cdb0;
  --mint-dark: #139a7f;
  --amber: #ffbf36;
  --cream: #fffaf0;
  --panel: #ffffff;
  --line: #e9e6f8;
  --danger: #ec6372;
  --success: #18ad87;
  --shadow: 0 12px 28px rgba(75, 57, 177, 0.12), 0 3px 0 rgba(75, 57, 177, 0.1);
  --radius-lg: 28px;
  --radius-md: 20px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #e9e6fb; }

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 15% 5%, #fff8e9 0, transparent 28%), linear-gradient(135deg, #eeeaff, #e5fbf5);
  font-family: "Noto Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid rgba(91, 69, 230, 0.35); outline-offset: 3px; }
button:disabled { cursor: default; }

.auth-check-screen{min-height:100dvh;display:grid;place-items:center;text-align:center}.auth-check-card{display:grid;justify-items:center;width:min(100%,360px);padding:32px 24px}.auth-check-logo{width:112px;height:112px;display:grid;place-items:center;margin-bottom:18px;border-radius:36px;background:linear-gradient(145deg,#fff5d8,#ece8ff);box-shadow:0 12px 30px rgba(72,55,173,.15)}
.auth-check-screen{min-height:100dvh;display:grid;place-items:center;text-align:center}.auth-check-card{display:grid;justify-items:center;width:min(100%,360px);padding:32px 24px}.auth-check-logo{width:112px;height:112px;display:grid;place-items:center;margin-bottom:18px;border-radius:36px;background:linear-gradient(145deg,#fff5d8,#ece8ff);box-shadow:0 12px 30px rgba(72,55,173,.15)}.auth-check-logo img{width:96px;height:96px;object-fit:contain}.auth-check-spinner{width:32px;height:32px;border:4px solid #e5e0f8;border-top-color:var(--mint);border-radius:50%;animation:auth-spin .8s linear infinite}.auth-check-card h1{margin:18px 0 5px;font-size:23px}.auth-check-card p{margin:0;color:var(--muted);font-size:13px}.session-notice{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border:2px solid #c8eee4;border-radius:16px;color:#146f5e;background:#edfbf7;font-size:12px;font-weight:800;line-height:1.35}.session-notice .ui-icon{flex:0 0 auto;width:20px;height:20px}
.parent-gate-screen{min-height:100dvh;padding-top:max(16px,env(safe-area-inset-top));background:radial-gradient(circle at 84% 18%,rgba(255,221,104,.2),transparent 28%),radial-gradient(circle at 10% 72%,rgba(68,207,170,.13),transparent 30%)}.parent-gate-card{display:grid;justify-items:center;margin:auto;padding:clamp(42px,9vh,76px) 12px 24px;text-align:center}.parent-gate-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:25px;color:#fff;background:linear-gradient(145deg,var(--mint),#1aa687);box-shadow:0 8px 0 #13826c,0 18px 34px rgba(27,166,135,.2)}.parent-gate-icon .ui-icon{width:38px;height:38px}.parent-gate-card .eyebrow{margin:28px 0 7px}.parent-gate-card h1{max-width:300px;margin:0;font-size:clamp(27px,8vw,34px);line-height:1.06}.parent-gate-card>p:last-of-type{max-width:320px;margin:12px 0 30px;color:var(--muted);font-size:14px;line-height:1.5}.parent-hold-button{position:relative;width:min(100%,330px);min-height:76px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;overflow:hidden;padding:0 18px;border:2px solid #dcd6f8;border-radius:24px;color:var(--purple);background:#fff;box-shadow:0 7px 0 #d5cef6,0 16px 32px rgba(58,43,150,.12);font:850 16px/1.2 inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.parent-hold-progress{position:absolute;inset:0;background:#dff8f1;transform:scaleX(0);transform-origin:left center}.parent-hold-symbol,.parent-hold-button strong{position:relative;z-index:1}.parent-hold-symbol{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;color:#fff;background:var(--purple)}.parent-hold-symbol .ui-icon{width:26px;height:26px}.hold-active{display:none}.parent-hold-button.is-holding{color:#116f5d;border-color:#8ddfc9}.parent-hold-button.is-holding .parent-hold-progress{animation:parent-hold-fill 2s linear forwards}.parent-hold-button.is-holding .parent-hold-symbol{background:var(--mint)}.parent-hold-button.is-holding .hold-ready{display:none}.parent-hold-button.is-holding .hold-active{display:inline}@keyframes parent-hold-fill{to{transform:scaleX(1)}}@keyframes auth-spin{to{transform:rotate(360deg)}}
.app-shell {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: clip;
  background: linear-gradient(180deg, #fbfaff 0%, #fffdf7 72%, #f4fffb 100%);
  box-shadow: 0 0 60px rgba(43, 37, 92, 0.16);
}

.screen { min-height: 100dvh; padding: 20px 18px max(24px, env(safe-area-inset-bottom)); }
.eyebrow { margin: 0 0 6px; color: var(--purple); font-size: 13px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; letter-spacing: -0.04em; }
h2 { margin-bottom: 8px; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
p { color: var(--muted); font-size: 15px; line-height: 1.45; }

.primary-button,
.secondary-button {
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, #725bff, var(--purple));
  box-shadow: 0 6px 0 #3f2cb6, 0 14px 28px rgba(91, 69, 230, 0.22), inset 0 1px rgba(255,255,255,.35);
}

.primary-button:active { transform: translateY(3px); box-shadow: 0 3px 0 #3f2cb6, 0 8px 18px rgba(91,69,230,.2); }
.secondary-button { color: var(--purple); background: #f0edff; border: 2px solid #e0dafd; }

.icon-button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.icon-button span { font-size: 26px; font-weight: 500; line-height: 1; }
.ui-icon { width: 1em; height: 1em; display: block; color: inherit; stroke: currentColor; }
.icon-button .ui-icon { width: 24px; height: 24px; }

.simple-header,
.game-header,
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.simple-header > span { font-size: 14px; font-weight: 900; letter-spacing: .08em; }

/* Onboarding */
.onboarding-screen { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.onboarding-art { position: relative; height: 210px; display: grid; place-items: center; }
.onboarding-art::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #e4fff7, #c3f3e6 65%, transparent 66%);
}
.onboarding-art img { position: relative; z-index: 2; width: 150px; height: 190px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(41,129,103,.18)); animation: welcome-bob 3s ease-in-out infinite; }
.brand-mark { position: absolute; z-index: 3; top: 4px; left: calc(50% - 102px); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--purple); font-weight: 900; box-shadow: 0 5px 0 #3f2cb6; }
.onboarding-copy { text-align: center; }
.onboarding-copy p:last-child { margin-bottom: 0; }
.language-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { min-height: 86px; padding: 16px; border: 2px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #e4e0f5; cursor: pointer; }
.choice-card strong, .choice-card span { display: block; }
.choice-card strong { margin-bottom: 4px; font-size: 17px; }
.choice-card span { color: var(--muted); font-size: 13px; font-weight: 800; }
.choice-card.selected { border-color: var(--purple); background: #f2efff; box-shadow: 0 4px 0 #cfc6ff; }

/* Profile */
.profile-screen { display: flex; flex-direction: column; gap: 20px; }
.profile-hero { text-align: center; }
.profile-hero p:last-child { max-width: 340px; margin: 0 auto; }
.profile-preview { position: relative; width: 128px; height: 128px; margin: 8px auto 14px; border-radius: 42px; background: linear-gradient(145deg, #e8fff8, #d9d2ff); box-shadow: var(--shadow); }
.profile-preview img { width: 100%; height: 100%; object-fit: contain; }
.profile-preview b { position: absolute; right: -6px; bottom: -6px; width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--purple); }
.profile-preview>span{position:absolute;left:50%;bottom:-14px;min-width:74px;padding:5px 9px;border:3px solid #fff;border-radius:10px;color:#5a4300;background:#ffdf73;font-size:9px;font-weight:900;white-space:nowrap;transform:translateX(-50%)}
.profile-preview.frame-violet{background:linear-gradient(145deg,#eee9ff,#d6ceff)}.profile-preview.frame-mint{background:linear-gradient(145deg,#e5fff7,#aeeedc)}.profile-preview.frame-sun{background:linear-gradient(145deg,#fff7d5,#ffd878)}.profile-preview.frame-sky{background:linear-gradient(145deg,#e8f8ff,#afe1fa)}.profile-spark{position:absolute;z-index:2;width:10px;height:10px;background:#fff9a7;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:challenge-twinkle 2.2s ease-in-out infinite}.profile-spark.one{left:15px;top:20px}.profile-spark.two{right:20px;top:42px;animation-delay:.8s}
.avatar-bolt b { background: #ffb421; }.avatar-rocket b { background: #2dbb9e; }.avatar-shield b { background: #ef6474; }
.profile-form { display: grid; gap: 18px; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 10px; font-size: 14px; font-weight: 850; }
.alias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alias-chip { min-height: 50px; border: 2px solid var(--line); border-radius: 16px; background: #fff; font-weight: 800; cursor: pointer; }
.alias-chip.selected { color: var(--purple); border-color: var(--purple); background: #f1eeff; }
.alias-chip{position:relative;overflow:hidden}.alias-chip.selected:after{content:"✓";position:absolute;right:7px;top:6px;width:17px;height:17px;display:grid;place-items:center;border-radius:6px;color:#fff;background:var(--purple);font-size:9px}
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-choice { min-height: 58px; border: 2px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; }
.avatar-choice span { font-size: 24px; }
.avatar-choice.selected { color: #fff; border-color: var(--purple); background: var(--purple); box-shadow: 0 4px 0 #3f2cb6; }
.frame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.frame-choice{min-width:0;min-height:70px;display:grid;place-items:center;align-content:center;gap:5px;padding:6px 3px;border:2px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}.frame-choice>i{width:34px;height:26px;border-radius:10px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 2px 0 rgba(49,37,112,.12)}.frame-choice.frame-violet>i{background:#8069ee}.frame-choice.frame-mint>i{background:#55ceb0}.frame-choice.frame-sun>i{background:#ffd45c}.frame-choice.frame-sky>i{background:#68c7f1}.frame-choice small{max-width:100%;overflow:hidden;color:var(--muted);font-size:8px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.frame-choice.selected{border-color:var(--purple);background:#f4f1ff;box-shadow:0 3px 0 #cfc7f8}.frame-choice.selected>i{transform:scale(1.08)}
.profile-screen > .primary-button { margin-top: auto; }

/* Home */
.home-screen,.library-screen { padding-top: max(14px, env(safe-area-inset-top)); }
.has-bottom-nav { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.home-header { margin-bottom: 14px; }
.player-pill { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); cursor: pointer; }
.mini-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--purple); font-weight: 900; }
.mini-avatar.large { width: 56px; height: 56px; border-radius: 18px; font-size: 23px; }
.player-pill strong { font-size: 14px; }
.player-identity{min-width:0;display:block;text-align:left}.player-identity strong,.player-identity small{display:block;max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-identity small{margin-top:1px;color:var(--muted);font-size:8px;font-weight:800}.player-pill>b{width:20px;height:20px;display:grid;place-items:center;margin-left:1px;border-radius:7px;color:var(--purple);background:#f0edff}.player-pill>b .ui-icon{width:11px;height:11px}
.player-pill.frame-violet .mini-avatar{background:#654de1}.player-pill.frame-mint .mini-avatar{background:#26aa8e}.player-pill.frame-sun .mini-avatar{color:#6b4d00;background:#ffd45c}.player-pill.frame-sky .mini-avatar{background:#45a8d4}
.header-actions { display: flex; align-items:center; gap: 6px; }
.text-button { min-width: 48px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 14px; color: var(--purple); background: #f0edff; font-size: 12px; font-weight: 850; cursor: pointer; }
.parent-button { width:44px; padding:0; }
.parent-button .ui-icon{width:19px;height:19px}
.streak-chip{height:36px;display:flex;align-items:center;gap:3px;padding:0 8px;border-radius:12px;color:#a05e00;background:#fff1c4;box-shadow:0 2px 0 #e4c667;font-size:11px}.streak-chip .ui-icon{width:15px;height:15px;fill:#ffbd32;stroke:#a05e00}.streak-chip b{font-variant-numeric:tabular-nums}
.home-greeting { margin: 2px 2px 12px; }
.home-greeting .eyebrow { margin-bottom: 1px; font-size: 10px; }
.home-greeting h1 { margin: 0; font-size: 23px; }
.player-progress{min-height:68px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:12px;padding:9px 12px;border:1px solid #e5dfff;border-radius:20px;background:#fff;box-shadow:0 3px 0 #e8e3f8}.level-orbit{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(145deg,#6a53ef,#4f38ca);box-shadow:0 3px 0 #3d2bae}.level-orbit>b{font-size:20px}.level-orbit .ui-icon{position:absolute;right:-4px;top:-4px;width:17px;height:17px;padding:3px;border-radius:7px;color:#765600;background:#ffdf73}.player-progress>span:nth-child(2){min-width:0}.player-progress>span:nth-child(2)>strong,.player-progress>span:nth-child(2)>small{display:block}.player-progress>span:nth-child(2)>strong{font-size:12px}.player-progress>span:nth-child(2)>small{margin-top:2px;color:var(--muted);font-size:9px}.player-progress>span:nth-child(2)>i{height:6px;display:block;margin-top:7px;overflow:hidden;border-radius:8px;background:#ebe8f6}.player-progress>span:nth-child(2)>i>em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#42ceb0,#74e7cf);animation:xp-fill .6s ease-out both}.player-progress>b{padding:6px 7px;border-radius:9px;color:#805d00;background:#fff0ba;font-size:9px;white-space:nowrap}
.daily-card { padding: 17px; border: 2px solid #dcd5ff; border-radius: 28px; background: linear-gradient(145deg, #f3f0ff, #fff 68%); box-shadow: var(--shadow); }
.daily-card.is-complete { border-color: #b9eedf; background: linear-gradient(145deg, #e7fbf5, #fff); }
.daily-hero { height: 86px; display: grid; grid-template-columns: 1fr 92px; align-items: center; overflow: hidden; }
.daily-hero .eyebrow { margin-bottom: 0; font-size: 10px; }
.daily-hero h1 { display: inline-block; margin: 0 8px 0 0; color: var(--purple); font-size: 46px; vertical-align: middle; }
.daily-hero strong { display: inline-block; padding: 6px 9px; border-radius: 11px; color: var(--purple); background: #e8e3ff; font-size: 11px; vertical-align: middle; }
.daily-hero img { width: 94px; height: 104px; align-self: end; object-fit: contain; animation: welcome-bob 3.4s ease-in-out infinite; }
.daily-focus { min-height: 20px; margin: 5px 0 12px; font-size: 12px; line-height: 1.35; }
.daily-stages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.daily-stages::before { content: ""; position: absolute; top: 15px; left: 16%; right: 16%; height: 3px; border-radius: 5px; background: #e5e1f5; }
.daily-stage { position: relative; z-index: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 0 2px; background: transparent; }
.daily-stage b { width: 32px; height: 32px; display: grid; place-items: center; border: 3px solid #f7f5ff; border-radius: 50%; color: var(--muted); background: #e8e5f2; font-size: 12px; }
.daily-stage small { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 9px; font-weight: 850; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.daily-stage.current small { color: var(--purple); }
.daily-stage.current b { color: #fff; background: var(--purple); box-shadow: 0 3px 0 #3d2aae; }
.daily-stage.done b { color: #fff; background: var(--mint-dark); }
.daily-button { width: 100%; min-height: 56px; margin-top: 13px; border: 0; border-radius: 17px; color: #fff; background: var(--purple); box-shadow: 0 5px 0 #3f2cb6; font-size: 17px; font-weight: 900; cursor: pointer; }
.daily-button:active { transform: translateY(2px); box-shadow: 0 3px 0 #3f2cb6; }
.daily-button:disabled { color: #087c64; background: #c9f4e8; box-shadow: 0 5px 0 #9bdecf; }
.weekly-trail { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.weekly-trail > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.weekly-trail > span strong { font-size: 10px; }
.weekly-trail > span small { color: var(--muted); font-size: 10px; font-weight: 800; }
.weekly-trail > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 7px; }
.trail-day { height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); background: #efedf7; font-size: 9px; font-weight: 850; }
.trail-day.current { outline: 2px solid var(--purple); outline-offset: 2px; }
.trail-day.done { color: #fff; background: var(--mint-dark); }
.world-card{padding:0 14px 14px;overflow:hidden;border-color:#d9d1ff;background:#fff}.daily-world{position:relative;height:220px;margin:0 -14px 10px;padding:16px 18px;overflow:hidden;background:linear-gradient(180deg,#e9e5ff 0%,#f4efff 48%,#c9f6e8 49%,#a8ead5 100%)}.daily-world:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-38px;height:78px;border-radius:50%;background:#74d3b5;opacity:.72}.world-cloud{position:absolute;width:58px;height:18px;border-radius:18px;background:rgba(255,255,255,.72);animation:cloud-drift 8s ease-in-out infinite}.world-cloud:before,.world-cloud:after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}.world-cloud:before{left:10px;width:26px;height:26px}.world-cloud:after{right:8px;width:20px;height:20px}.world-cloud.cloud-a{left:-12px;top:68px}.world-cloud.cloud-b{right:-18px;top:42px;transform:scale(.72);animation-delay:-3s}.world-star{position:absolute;width:8px;height:8px;background:#fff7ad;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:challenge-twinkle 2.5s ease-in-out infinite}.world-star.star-a{left:48%;top:56px}.world-star.star-b{right:23%;top:83px;animation-delay:.9s}.world-heading{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.world-heading .eyebrow{margin:0 0 1px;color:#5844cd;font-size:9px}.world-heading h1{margin:0;color:#4b35c3;font-size:36px;line-height:1}.world-heading>strong{padding:7px 9px;border:1px solid rgba(89,66,220,.12);border-radius:11px;color:#5844cd;background:rgba(255,255,255,.76);font-size:9px}.world-route{position:absolute;z-index:3;left:10px;right:10px;bottom:10px;height:135px}.world-route>svg{position:absolute;inset:3px 0 18px;width:100%;height:100%;overflow:visible}.world-route>svg path{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:8 9;filter:drop-shadow(0 3px 0 rgba(30,124,96,.14));animation:route-march 6s linear infinite}.world-card .daily-stages{position:absolute;z-index:5;left:2%;right:20%;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}.world-card .daily-stages:before{display:none}.world-card .daily-stage{gap:3px}.world-card .daily-stage b{width:36px;height:36px;border:4px solid rgba(255,255,255,.88);color:#665c84;background:#ece9f5;box-shadow:0 3px 0 rgba(53,41,124,.12)}.world-card .daily-stage small{max-width:76px;color:#425569;font-size:8px;text-shadow:0 1px 0 rgba(255,255,255,.75)}.world-card .daily-stage.current b{color:#fff;background:#5b43dc;box-shadow:0 4px 0 #3927a8,0 0 0 5px rgba(255,225,100,.4);animation:mission-pulse 1.7s ease-in-out infinite}.world-card .daily-stage.done b{color:#fff;background:#22a98c;box-shadow:0 3px 0 #117661}.daily-kobi{position:absolute;z-index:7;bottom:47px;width:66px;height:84px;display:block;transform:translateX(-50%);transition:left .55s cubic-bezier(.2,.8,.3,1)}.daily-kobi img{width:100%;height:100%;object-fit:contain;transform-origin:center bottom;animation:world-kobi 3s ease-in-out infinite}.daily-kobi.step-0{left:12%}.daily-kobi.step-1{left:39%}.daily-kobi.step-2{left:66%}.daily-kobi.step-3{left:82%}.daily-chest{position:absolute;z-index:6;right:1%;bottom:47px;width:44px;height:42px;display:grid;place-items:center;border:4px solid rgba(255,255,255,.88);border-radius:13px;color:#7b5900;background:#ffd85c;box-shadow:0 5px 0 #c9971e;animation:chest-wiggle 3.2s ease-in-out infinite}.daily-chest .ui-icon{width:23px;height:23px}.daily-chest.open{color:#087c64;background:#aef1df;box-shadow:0 5px 0 #65cdb3;animation:reward-pop .6s cubic-bezier(.2,.85,.3,1.2) both}.world-card>.daily-focus{min-height:34px;margin:6px 3px 10px;color:#5f6b87;font-size:10px}.world-card>.daily-button{margin-top:0;color:#3f2d8d;background:linear-gradient(180deg,#ffe988,#ffda60);box-shadow:0 5px 0 #c99f27}.world-card>.daily-button:active{box-shadow:0 2px 0 #c99f27}.world-card>.daily-button:disabled{color:#087c64;background:#c9f4e8;box-shadow:0 5px 0 #85d6c2}
.daily-kobi{bottom:44px;width:78px;height:98px}.daily-kobi.step-3{left:80%}
.daily-plan{padding:0 0 16px;overflow:hidden;border:1px solid #ded8fa;border-radius:28px;background:#fff;box-shadow:0 7px 0 #e8e3f8,0 18px 36px rgba(67,48,139,.1)}
.daily-plan-head{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 8px}
.daily-plan-head .eyebrow{margin:0;color:#5844cd;font-size:10px;letter-spacing:.06em}
.daily-plan-head>strong{display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:12px;color:#5844cd;background:#f0edff;font-size:10px;white-space:nowrap}
.daily-plan-head>strong .ui-icon{width:14px;height:14px}
.daily-next-step{position:relative;min-height:144px;display:grid;grid-template-columns:minmax(0,1fr) 106px;align-items:center;margin:0 12px;padding:0;overflow:hidden;border-radius:24px;background:linear-gradient(145deg,#5e47df,#4933c5);box-shadow:0 5px 0 #3826a6}
.daily-next-step:before{content:"";position:absolute;right:-38px;bottom:-62px;width:170px;height:170px;border-radius:50%;background:rgba(137,239,210,.18)}
.daily-next-copy{position:relative;z-index:2;min-width:0;padding:18px 0 18px 18px;color:#fff}
.daily-next-copy>span{display:block;color:#d9d3ff;font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.daily-next-copy h1{margin:4px 0 3px;color:#fff;font-size:28px;line-height:1.05}
.daily-next-copy>p{margin:0;color:#e9e5ff;font-size:11px;line-height:1.35}
.daily-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.daily-meta b{min-height:28px;display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fff;background:rgba(255,255,255,.12);font-size:9px}
.daily-meta .ui-icon{width:13px;height:13px}
.daily-plan-kobi{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;justify-content:center}
.daily-plan-kobi img{width:102px;height:132px;object-fit:contain;transform-origin:center bottom;animation:daily-kobi-wave 3.4s ease-in-out infinite}
.daily-stage-progress{padding:18px 18px 6px}
.daily-plan .daily-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.daily-plan .daily-stages:before{top:18px;left:16%;right:16%;height:4px;background:#ebe8f6}
.daily-plan .daily-stage{gap:6px}
.daily-plan .daily-stage b{width:40px;height:40px;border:4px solid #fff;color:#817a98;background:#eceaf3;font-size:13px;box-shadow:0 2px 0 #ddd8ed}
.daily-plan .daily-stage b .ui-icon{width:18px;height:18px}
.daily-plan .daily-stage small{color:#777089;font-size:9px}
.daily-plan .daily-stage.current b{color:#fff;background:#5b43dc;box-shadow:0 4px 0 #3927a8,0 0 0 4px #eeeaff;animation:mission-pulse 1.8s ease-in-out infinite}
.daily-plan .daily-stage.current small{color:#4e37ca}
.daily-plan .daily-stage.done b{color:#fff;background:#23ad8f;box-shadow:0 3px 0 #13806a}
.daily-facts{display:flex;justify-content:center;gap:6px;padding:8px 16px 2px}
.daily-facts span{padding:6px 9px;border:1px solid #e4dfff;border-radius:10px;color:#5540cc;background:#f5f3ff;font-size:10px;font-weight:850}
.daily-plan>.daily-button{width:calc(100% - 32px);min-height:60px;display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 16px 0;border-radius:18px;color:#fff;background:linear-gradient(180deg,#6852ef,#553dd6);box-shadow:0 5px 0 #3d2bae;font-size:17px}
.daily-plan>.daily-button .ui-icon{width:20px;height:20px;transition:transform .18s ease}
.daily-plan>.daily-button:hover .ui-icon{transform:translateX(3px)}
.daily-plan>.daily-button:active{transform:translateY(2px);box-shadow:0 3px 0 #3d2bae}
.daily-plan.is-complete>.daily-button{color:#5b3b00;background:linear-gradient(180deg,#ffe27b,#ffc940);box-shadow:0 5px 0 #d49d18}
.daily-plan.is-complete>.daily-button .ui-icon{color:#795500;animation:bonus-spark 1.6s ease-in-out infinite}
.daily-reward{min-height:52px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;margin:14px 16px 0;padding:8px 10px;border:1px solid #f3df94;border-radius:16px;background:#fff8dc}
.daily-reward>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#775700;background:#ffdf6b;box-shadow:0 3px 0 #ddb438}
.daily-reward>span .ui-icon{width:20px;height:20px}.daily-plan.is-complete .daily-reward>span{animation:reward-breathe 2s ease-in-out infinite}
.daily-reward p{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.daily-reward strong{color:#5c4711;font-size:10px;line-height:1.25}
.daily-reward small{padding:4px 6px;border-radius:8px;color:#70570e;background:rgba(255,255,255,.72);font-size:9px;font-weight:900;white-space:nowrap}
.daily-plan .weekly-trail{margin:14px 16px 0;padding-top:12px}
.daily-plan .weekly-trail>span strong{font-size:10px}
.daily-plan .weekly-trail>span small{font-size:9px}
.daily-plan .weekly-trail>div{gap:6px;margin-top:9px}
.daily-plan .trail-day{height:42px;display:grid;grid-template-rows:auto 14px;place-items:center;padding:5px 2px;border:1px solid #ece9f6;border-radius:12px;color:#7d7691;background:#f7f6fb}
.daily-plan .trail-day small{font-size:8px;font-weight:850}
.daily-plan .trail-day b{width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#ded9ed}
.daily-plan .trail-day b:empty:after{content:"";width:5px;height:5px;border-radius:50%;background:#aaa3bd}
.daily-plan .trail-day b .ui-icon{width:10px;height:10px}
.daily-plan .trail-day.current{outline:0;border-color:#6a52e8;color:#4e37ca;background:#f0edff;box-shadow:inset 0 0 0 1px #6a52e8}
.daily-plan .trail-day.current b{background:#6750e4}
.daily-plan .trail-day.current b:empty:after{background:#fff}
.daily-plan .trail-day.done{color:#0b755f;border-color:#b8eadf;background:#e7f9f4}
.daily-plan .trail-day.done b{color:#fff;background:#22a98c}
.daily-plan.is-complete .daily-next-step{background:linear-gradient(145deg,#1fa98c,#14806d);box-shadow:0 5px 0 #0e6758}
@keyframes daily-kobi-wave{0%,100%{transform:translateY(0) rotate(-1deg)}45%{transform:translateY(-4px) rotate(1deg)}55%{transform:translateY(-4px) rotate(1deg)}}
@keyframes reward-breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08) rotate(3deg);filter:brightness(1.08)}}
@keyframes bonus-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(12deg)}}
.home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.home-shortcuts > button { min-height: 82px; display: grid; grid-template-columns: 38px minmax(0,1fr) 10px; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 3px 0 #e5e1f6; text-align: left; cursor: pointer; }
.home-shortcuts strong,.home-shortcuts small { display: block; }
.home-shortcuts strong { font-size: 12px; line-height: 1.2; }
.home-shortcuts small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.home-shortcuts b { color: var(--purple); font-size: 22px; }
.achievement-shelf{margin-top:12px;padding:14px;border:1px solid #e7e1fb;border-radius:22px;background:linear-gradient(145deg,#fff,#fbf9ff);box-shadow:0 3px 0 #e9e4f8}.achievement-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.achievement-title strong,.achievement-title small{display:block}.achievement-title strong{font-size:13px}.achievement-title small{max-width:250px;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.25}.achievement-title>b{padding:5px 7px;border-radius:9px;color:var(--purple);background:#eeeaff;font-size:10px}.achievement-shelf>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.achievement{min-width:0;display:grid;justify-items:center;gap:5px;padding:8px 4px;border-radius:14px;background:#f0eef7;text-align:center}.achievement i{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:#8f8aa5;background:#e3e0ec}.achievement i .ui-icon{width:18px;height:18px}.achievement small{max-width:100%;overflow:hidden;color:#8f8aa5;font-size:8px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.achievement.unlocked{background:#fff6d9}.achievement.unlocked i{color:#795700;background:#ffdc62;box-shadow:0 3px 0 #e2b633;animation:badge-arrive .55s cubic-bezier(.2,.85,.3,1.2) both}.achievement.unlocked small{color:#604a11}
.shortcut-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--purple); font-size: 17px; font-weight: 900; }
.shortcut-icon.game-icon { color: #835d00; background: #ffe599; }
.league-teaser { width: 100%; min-height: 62px; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border: 1px solid #e3ddff; border-radius: 20px; background: #f5f2ff; text-align: left; cursor: pointer; }
.league-teaser .league-medal { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; }
.league-teaser .league-medal .ui-icon { width: 22px; height: 22px; color: #8b6400; }
.league-teaser > b .ui-icon { width: 20px; height: 20px; }
.league-teaser strong,.league-teaser small { display: block; }
.league-teaser strong { font-size: 13px; }.league-teaser small { margin-top: 2px; color: var(--muted); font-size: 10px; }.league-teaser b { color: var(--purple); font-size: 24px; }
.library-title { margin: 24px 2px 18px; }
.library-title .eyebrow { margin-bottom: 2px; font-size: 10px; }
.library-title h1 { margin-bottom: 5px; font-size: 29px; }
.library-title p { margin: 0; font-size: 13px; }
.table-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.table-choice { min-height: 102px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 8px; padding: 15px; border: 2px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 4px 0 #e5e1f6; text-align: left; cursor: pointer; }
.table-choice strong { font-size: 29px; }.table-choice b { align-self: center; color: var(--purple); font-size: 24px; grid-row: 1 / 4; grid-column: 2; }
.table-choice span { height: 6px; overflow: hidden; border-radius: 8px; background: #eeecf7; }.table-choice span i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
.table-choice small { color: var(--muted); font-size: 10px; font-weight: 800; }
.table-choice.selected { color: #fff; border-color: var(--purple); background: var(--purple); box-shadow: 0 4px 0 #3d2aae; }.table-choice.selected b,.table-choice.selected small { color: #fff; }.table-choice.selected span { background: rgba(255,255,255,.25); }.table-choice.selected span i { background: #85f1da; }
.selected-table-strip { width: 100%; min-height: 58px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; margin: -3px 0 14px; padding: 8px 12px; border: 1px solid #ded8ff; border-radius: 18px; background: #f3f0ff; text-align: left; cursor: pointer; }
.selected-table-strip > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--purple); font-weight: 900; }.selected-table-strip strong { font-size: 13px; }.selected-table-strip small { color: var(--purple); font-size: 10px; font-weight: 850; }
.surprise-card{position:relative;width:100%;min-height:168px;display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:8px;margin-bottom:18px;padding:16px;border:0;border-radius:26px;color:#fff;background:linear-gradient(145deg,#654eee,#4b34c7);box-shadow:0 6px 0 #cdc5fa,0 16px 30px rgba(65,45,170,.18);text-align:left;overflow:hidden;cursor:pointer}.surprise-card:before{content:"";position:absolute;inset:auto -46px -76px auto;width:170px;height:170px;border:25px solid rgba(255,255,255,.07);border-radius:50%}.surprise-copy{position:relative;z-index:2}.surprise-copy>small{display:flex;align-items:center;gap:5px;color:#ffe88d;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.surprise-copy>small .ui-icon{width:14px;height:14px}.surprise-copy>strong,.surprise-copy>span{display:block}.surprise-copy>strong{max-width:180px;margin-top:6px;font-size:21px;line-height:1.05}.surprise-copy>span{max-width:210px;margin-top:8px;color:#e8e3ff;font-size:10px;line-height:1.35}.surprise-copy>b{min-height:40px;display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:0 12px;border-radius:13px;color:#423093;background:#ffe178;box-shadow:0 3px 0 #c79d24;font-size:11px}.surprise-copy>b .ui-icon{width:16px;height:16px}.surprise-kobi{position:relative;height:136px;display:grid;place-items:end center}.surprise-kobi>i{position:absolute;left:0;right:0;bottom:5px;height:35px;border-radius:50%;background:#87e4ca}.surprise-kobi img{position:relative;z-index:1;width:105px;height:132px;object-fit:contain;transform-origin:center bottom;animation:surprise-kobi 3s ease-in-out infinite}.surprise-kobi em{position:absolute;z-index:3;right:0;top:5px;width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:#6e5100;background:#ffe178;box-shadow:0 3px 0 #c79d24}.surprise-kobi em .ui-icon{width:19px;height:19px}.games-section-title{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}.games-section-title strong{font-size:15px}.games-section-title small{padding:5px 8px;border-radius:9px;color:var(--purple);background:#ede9ff;font-size:10px;font-weight:900}
.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-bottom: 12px; }
.mode-card { position: relative; min-height: 180px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid rgba(70,58,145,.08); border-radius: 22px; text-align: left; box-shadow: 0 4px 0 rgba(71,55,165,.1); cursor: pointer; opacity: 0; overflow:hidden; animation: card-rise .42s cubic-bezier(.2,.78,.3,1) forwards; transition: transform .16s ease, box-shadow .16s ease; }
.mode-card:nth-child(2) { animation-delay: .05s; }.mode-card:nth-child(3) { animation-delay: .1s; }.mode-card:nth-child(4) { animation-delay: .15s; }.mode-card:nth-child(5) { animation-delay: .2s; }.mode-card:nth-child(6) { animation-delay: .25s; }.mode-card:nth-child(7) { animation-delay: .3s; }

@media (max-width:520px){
  .mode-grid{grid-template-columns:1fr;gap:12px}
  .mode-card{min-height:120px;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:1fr auto;gap:8px 12px;padding:12px 14px;border-radius:24px}
  .mode-preview{height:94px;grid-row:1/3;align-self:center}
  .mode-copy{align-self:end}
  .mode-copy strong{font-size:16px;line-height:1.1}
  .mode-copy small{margin-top:5px;font-size:11px;line-height:1.25}
  .mode-card-foot{align-self:start;padding-top:7px}
  .mode-card-foot small,.mode-card-foot b{font-size:10px}
}

/* KOBEITU art direction: an illustrated steppe adventure, not a generic app shell. */
:root{
  --ink:#18324a;
  --muted:#64778a;
  --purple:#087f78;
  --purple-dark:#075f5b;
  --mint:#35c6a0;
  --mint-dark:#087f69;
  --amber:#ffbd32;
  --cream:#fff8e7;
  --panel:#fffdf6;
  --line:#dce7df;
  --shadow:0 5px 0 rgba(20,65,71,.12),0 16px 30px rgba(34,99,96,.09);
}
html{background:#d9eee8}
body{background:#d9eee8}
.app-shell{position:relative;background:
  linear-gradient(135deg,rgba(8,127,120,.035) 25%,transparent 25%) 0 0/28px 28px,
  linear-gradient(315deg,rgba(255,189,50,.045) 25%,transparent 25%) 0 0/28px 28px,
  linear-gradient(180deg,#fff9e9 0,#fffdf7 48%,#effbf6 100%);box-shadow:0 0 0 1px rgba(24,50,74,.08),0 0 64px rgba(15,72,69,.16)}
.app-shell:before{content:"";position:absolute;z-index:0;left:18px;right:18px;top:0;height:7px;background:repeating-linear-gradient(90deg,#087f78 0 18px,#ffbd32 18px 26px,#f27059 26px 44px,#ffbd32 44px 52px);border-radius:0 0 10px 10px;opacity:.92}
.screen{position:relative;z-index:1}
.eyebrow{color:#087f78;letter-spacing:.12em}
button:focus-visible{outline-color:rgba(8,127,120,.38)}
.primary-button{background:#087f78;box-shadow:0 6px 0 #075955,0 14px 28px rgba(8,127,120,.2),inset 0 1px rgba(255,255,255,.32)}
.primary-button:active{box-shadow:0 3px 0 #075955,0 8px 18px rgba(8,127,120,.18)}
.secondary-button,.text-button{color:#075f5b;background:#e5f7f1;border-color:#c9ece1}
.player-pill{border:1px solid #d8e8df;box-shadow:0 4px 0 #c9ddd3,0 10px 22px rgba(24,76,74,.08)}
.player-pill.frame-violet .mini-avatar,.mini-avatar{background:#087f78}
.streak-chip{color:#704800;background:#ffe49a;box-shadow:0 3px 0 #d9aa2a}
.home-greeting .eyebrow{color:#d86b3f}
.player-progress{border-color:#cfe5dc;background:#fffdf6;box-shadow:0 4px 0 #cce0d7}
.level-orbit{background:#087f78;box-shadow:0 4px 0 #075955}
.player-progress>span:nth-child(2)>i>em{background:#ffbd32}
.daily-card{border:2px solid #9edbc9;background:#f5fffb;box-shadow:0 6px 0 #b9ded2,0 18px 34px rgba(21,105,94,.11)}
.daily-plan-head>strong{color:#075f5b;background:#dff6ef}
.daily-next-step{isolation:isolate;background:#0c7773;box-shadow:0 6px 0 #075955;overflow:hidden}
.daily-next-step:before{content:"";position:absolute;z-index:-1;width:210px;height:210px;right:-70px;bottom:-115px;border:24px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.035)}
.daily-next-copy>span{color:#ffe07c}
.daily-plan .daily-stage.current b{background:#ef704e;box-shadow:0 4px 0 #b8472c,0 0 0 4px #fff1dc}
.daily-plan .daily-stage.current small{color:#a43e28}
.daily-plan .daily-stage.done b{background:#087f78;box-shadow:0 3px 0 #075955}
.daily-facts span{color:#075f5b;border-color:#bfe9dc;background:#e9faf4}
.daily-plan>.daily-button{background:#f06f4f;box-shadow:0 6px 0 #b8452c,0 13px 24px rgba(180,69,44,.15)}
.daily-plan>.daily-button:active{box-shadow:0 3px 0 #b8452c}
.daily-plan.is-complete>.daily-button{background:#ffcb45;box-shadow:0 6px 0 #d39b17;color:#503800}
.daily-reward{border:2px solid #f1d27a;background:#fff4c9}
.daily-reward>span{background:#ffbd32;box-shadow:0 3px 0 #ca8d12}
.daily-plan .trail-day.current{border-color:#ef704e;color:#a43e28;background:#fff0e9;box-shadow:inset 0 0 0 1px #ef704e}
.daily-plan .trail-day.current b{background:#ef704e}
.home-shortcuts>button,.achievement-shelf{border-color:#d5e6de;background:#fffdf6;box-shadow:0 4px 0 #d3e2db}
.shortcut-icon{background:#087f78}.shortcut-icon.game-icon{color:#6d4700;background:#ffce55}
.league-teaser{border:2px solid #c9dfd6;background:#edf9f4;box-shadow:0 4px 0 #c7ded4}
.bottom-nav{border:2px solid #d6e4dd;background:rgba(255,253,246,.96);box-shadow:0 -8px 28px rgba(18,72,69,.12)}
.bottom-nav button.active{color:#075f5b;background:#dcf4ec}.bottom-nav button.active:before{background:#f06f4f}
.selected-table-strip{border:2px solid #bedfd4;background:#e9f8f3}.selected-table-strip>span{background:#087f78}
.table-choice{border-color:#d6e6de;background:#fffdf6;box-shadow:0 4px 0 #d0e0d8}.table-choice.selected{border-color:#075f5b;background:#087f78;box-shadow:0 5px 0 #075955}
.surprise-card{background:#087f78;box-shadow:0 7px 0 #075955,0 18px 30px rgba(8,95,91,.18)}
.surprise-copy>small{color:#ffdc67}.surprise-copy>b{color:#503800;background:#ffcb45;box-shadow:0 4px 0 #ca9010}.surprise-kobi>i{background:#63d6b8}.surprise-kobi em{color:#593b00;background:#ffcb45;box-shadow:0 3px 0 #ca9010}
.mode-card{border:2px solid rgba(24,50,74,.1);box-shadow:0 5px 0 rgba(24,68,70,.12)}
.mode-card.tone-violet,.mode-card.tone-indigo{background:#e9f7f2}.mode-card.tone-sky,.mode-card.tone-aqua{background:#e8f6fb}.mode-card.tone-mint{background:#eff9de}.mode-card.tone-amber{background:#fff0bf}.mode-card.tone-rose{background:#ffebe4}
.mode-icon{color:#fff;background:#087f78}.mode-card-foot>b{color:#075f5b;background:rgba(255,255,255,.8)}
.game-card,.answer-button,.result-card{border-color:#d5e5dd;background:#fffdf6;box-shadow:0 4px 0 #d0e0d8}

@media (prefers-reduced-motion:reduce){.daily-plan-kobi img,.surprise-kobi img,.daily-plan.is-complete .daily-reward>span,.daily-plan.is-complete>.daily-button .ui-icon{animation:none!important}}
.mode-card:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 rgba(71,55,165,.1); }
.mode-preview{position:relative;height:61px;flex:0 0 61px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);overflow:hidden}.preview-equation{font-size:17px;font-weight:950}.mode-preview>.preview-equation+ b{position:absolute;right:9px;width:25px;height:25px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--purple);font-size:15px}.preview-sequence{display:flex;align-items:center;gap:4px}.preview-sequence i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#4eaad7;font-size:9px;font-style:normal;font-weight:900}.preview-sequence i:last-child{background:var(--purple);animation:preview-pop 1.7s ease-in-out infinite}.preview-runner{position:relative;width:100%;height:100%}.preview-runner:before,.preview-runner:after{content:"";position:absolute;left:14%;right:14%;height:4px;border-radius:4px;background:#8adbc7;transform-origin:left}.preview-runner:before{top:24px;transform:rotate(-14deg)}.preview-runner:after{top:37px;transform:rotate(13deg)}.preview-runner i{position:absolute;z-index:2;left:15%;top:25px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#f6b931;animation:preview-run 2s ease-in-out infinite}.preview-runner b{position:absolute;right:10%;top:17px;color:#167c68}.preview-runner .ui-icon{width:25px;height:25px}.preview-versus{display:flex;align-items:center;gap:8px}.preview-versus i{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#805b00;background:#ffe38a}.preview-versus i:last-child{color:#fff;background:#ef7180}.preview-versus .ui-icon{width:19px;height:19px}.preview-versus b{color:#5942dc;font-size:9px}.preview-array{display:grid;grid-template-columns:repeat(3,12px);gap:6px}.preview-array i{width:12px;height:12px;border-radius:50%;background:#2fc7b0;box-shadow:0 2px 0 #15937f}.preview-feed{display:flex;align-items:center;gap:8px;color:#d1606d}.preview-feed>.ui-icon{width:25px;height:25px}.preview-feed i{width:28px;height:3px;border-radius:4px;background:#e7a2aa}.preview-feed b{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#ef7180;font-size:12px}.preview-puzzle{display:flex;align-items:center;gap:3px}.preview-puzzle i{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:#fff;background:#6879df;font-size:10px;font-style:normal;font-weight:900}.preview-puzzle i:nth-of-type(2){background:var(--purple)}.preview-puzzle b{color:#737b98;font-size:10px}
.mode-copy{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px}.mode-copy>.mode-icon{grid-row:1 / 3}.mode-copy>strong{font-size:12px;line-height:1.12}.mode-copy>small{color:rgba(32,42,73,.68);font-size:9px;line-height:1.2}.mode-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--purple); background: rgba(255,255,255,.84); box-shadow: 0 2px 0 rgba(54,43,130,.08); }.mode-icon .ui-icon { width: 16px; height: 16px; }
.mode-card-foot{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:auto}.mode-card-foot>small{color:rgba(32,42,73,.62);font-size:8px;font-weight:800}.mode-card-foot>b{display:flex;align-items:center;gap:3px;padding:6px 7px;border-radius:9px;color:var(--purple);background:rgba(255,255,255,.82);font-size:9px;white-space:nowrap}.mode-card-foot>b .ui-icon{width:12px;height:12px}
.tone-violet { background: #ece8ff; }.tone-sky { background: #e5f6ff; }.tone-mint { background: #e5faf3; }.tone-amber { background: #fff3d4; }.tone-aqua { background: #e3f9fb; }.tone-rose { background: #ffebed; }.tone-indigo { background: #e9edff; }
.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 406px); min-height: 72px; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 6px; border: 1px solid rgba(82,65,175,.12); border-radius: 23px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(50,39,115,.2); transform: translateX(-50%); backdrop-filter: blur(14px); }
.bottom-nav button { min-width: 0; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 2px; border: 0; border-radius: 17px; color: var(--muted); background: transparent; cursor: pointer; }
.bottom-nav button span { height: 24px; display: grid; place-items: center; font-size: 19px; font-weight: 900; line-height: 1; }.bottom-nav button span .ui-icon { width: 21px; height: 21px; }.bottom-nav button small { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav button.active { color: var(--purple); background: #eeeaff; }.bottom-nav button.active span { transform: translateY(-1px); }
.bottom-nav button.active .ui-icon { animation: nav-pop .34s cubic-bezier(.2,.85,.3,1.25) both; }

/* Class challenge */
.challenge-card { position: relative; margin-top: 18px; padding: 17px; border-radius: 28px; color: #fff; background: linear-gradient(145deg,#6650eb 0%,#5038ce 68%,#452eb9 100%); box-shadow: 0 7px 0 #cec6fa, 0 18px 34px rgba(67,48,174,.2); overflow: hidden; animation: card-rise .45s cubic-bezier(.2,.78,.3,1) both; }
.challenge-card::after { content:""; position:absolute; top:-80px; left:-90px; width:90px; height:260px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); transform:rotate(24deg); animation: card-shine .9s ease-out .35s both; pointer-events:none; }
.challenge-star { position:absolute; display:block; width:10px; height:10px; background:#ffdf73; clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%); opacity:.72; animation:challenge-twinkle 2.4s ease-in-out infinite; }.challenge-star.star-one{top:14px;right:82px}.challenge-star.star-two{top:116px;left:20px;width:7px;height:7px;animation-delay:.7s}
.challenge-card-top { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.challenge-card-top > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: #765600; background: #ffdf73; font-size: 23px; }
.challenge-card-top > span .ui-icon { animation: bolt-pop .62s cubic-bezier(.2,.85,.3,1.25) .08s both; }
.challenge-card-top .eyebrow { margin: 0; color: #dcd6ff; font-size: 9px; }.challenge-card-top h1 { margin: 2px 0 0; font-size: 22px; }.challenge-card-top > b { padding: 7px 10px; border-radius: 12px; color: #5942dc; background: #fff; font-size: 17px; }
.challenge-card > .challenge-lead { max-width:310px; margin: 12px 0 10px; color: #eeeaff; font-size: 11px; line-height: 1.4; }
.challenge-visual{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;min-height:112px;padding:9px;border:1px solid rgba(255,255,255,.14);border-radius:21px;background:rgba(255,255,255,.09)}
.challenge-kobi{position:relative;height:96px;display:grid;place-items:end center}.challenge-kobi span{position:absolute;left:7px;right:7px;bottom:1px;height:29px;border-radius:50%;background:#8ee7ce;box-shadow:0 8px 20px rgba(25,21,102,.2)}.challenge-kobi img{position:relative;z-index:1;width:82px;height:99px;object-fit:contain;transform-origin:center bottom;animation:challenge-kobi-bob 2.8s ease-in-out infinite}
.challenge-rules { display: grid; gap: 7px; }.challenge-rules span { min-height: 42px; display: grid; grid-template-columns:28px 36px minmax(0,1fr); align-items:center; gap:7px; padding:6px 9px; border-radius:14px; background: rgba(255,255,255,.14); }.challenge-rules i{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;color:#ffdf73;background:rgba(25,15,103,.2)}.challenge-rules i .ui-icon{width:16px;height:16px}.challenge-rules b { font-size: 20px; line-height: 1; }.challenge-rules small { color: #e9e5ff; font-size: 9px; font-weight: 800; }
.challenge-scoring { display: grid; gap: 5px; margin-top: 8px; padding: 11px 12px; border-radius: 16px; color: #382a91; background: #fff; }.challenge-scoring strong { margin-bottom: 2px; font-size: 11px; }.challenge-scoring span { font-size: 10px; font-weight: 800; line-height: 1.35; }
.challenge-fairness { min-height: 36px; display: flex; align-items: center; gap: 8px; margin: 8px 1px 0 !important; padding: 5px 2px; color: #fff !important; font-size: 9px !important; font-weight: 800; line-height: 1.3 !important; }
.challenge-fairness .ui-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #ffdf73; }
.challenge-start { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; border: 0; border-radius: 17px; color: #3b2a87; background: linear-gradient(180deg,#ffe788,#ffd557); box-shadow: 0 5px 0 #c69b22, 0 10px 20px rgba(29,19,101,.2); font-size: 15px; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.challenge-start .ui-icon { width: 21px; height: 21px; animation: arrow-invite 1.5s ease-in-out infinite; }
.challenge-start:active { transform: translateY(3px); box-shadow: 0 2px 0 #c69b22; }
.challenge-mini-board { margin-top: 16px; padding: 13px; border:2px solid #e9e4fb; border-radius: 22px; color: var(--ink); background: #fff; box-shadow:var(--shadow); }.challenge-mini-board > strong { font-size: 12px; }.challenge-mini-board ol,.challenge-result-board { margin: 7px 0 0; padding: 0; list-style: none; }
.challenge-row { min-height: 46px; display: grid; grid-template-columns: 24px 34px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px; border-top: 1px solid var(--line); font-size: 11px; }.challenge-row:first-child { border-top: 0; }.challenge-row.is-you { border-radius: 13px; background: #e3faf3; }.challenge-row > strong { color: var(--purple); text-align: center; }.challenge-row .mini-avatar { width: 32px; height: 32px; border-radius: 11px; }.challenge-row > span:nth-child(3) { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.challenge-row > b { color: var(--purple); text-align: right; }.challenge-row > b small { display: block; color: var(--muted); font-size: 8px; }
.league-hero.weekly { margin-top: 20px; animation: card-rise .45s cubic-bezier(.2,.78,.3,1) .08s both; }
.challenge-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.challenge-title .eyebrow { margin-bottom: 3px; font-size: 10px; }.challenge-title h1 { margin: 0; font-size: 21px; }
.challenge-clock { min-width: 68px; padding: 8px 10px; border-radius: 16px; color: #fff; background: var(--purple); text-align: center; }.challenge-clock small,.challenge-clock strong { display: block; }.challenge-clock small { color: #ddd8ff; font-size: 8px; }.challenge-clock strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.challenge-timer { height: 9px; margin: 12px 0 18px; overflow: hidden; border-radius: 10px; background: #e4e0f5; }.challenge-timer i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mint); transform-origin: left; }
.challenge-stage { position: relative; min-height: 210px; display: grid; place-items: center; padding: 68px 12px 30px; border-radius: 28px; background: linear-gradient(145deg,#f0edff,#fff8e6); box-shadow: var(--shadow); overflow: hidden; }.challenge-stage img { position: absolute; top: 8px; left: 14px; width: 72px; height: 86px; object-fit: contain; animation: mascot-breathe 2.8s ease-in-out infinite; }.challenge-stage .formula { width: 100%; }.challenge-live-score { position: absolute; top: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.challenge-live-score span { min-width: 55px; padding: 6px 8px; border-radius: 13px; background: #fff; box-shadow: 0 3px 0 rgba(80,61,175,.1); text-align: center; }.challenge-live-score small,.challenge-live-score b { display: block; }.challenge-live-score small { color: var(--muted); font-size: 8px; font-weight: 850; }.challenge-live-score b { margin-top: 1px; color: #087c64; font-size: 17px; }.challenge-live-score span:last-child b { color: #d14c65; }
.challenge-answers { margin-top: 14px; }.mode-challenge .feedback-bar { bottom: 8px; }
.challenge-result-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }.challenge-result-mascot { position: relative; width: 150px; height: 150px; margin: 4px auto 8px; border-radius: 50%; background: #fff1bd; }.challenge-result-mascot img { width: 140px; height: 156px; object-fit: contain; animation: result-hop .8s ease-out both; }.challenge-result-mascot span { position: absolute; z-index: 2; top: 4px; right: 5px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #765600; background: #ffdc62; font-size: 24px; transform: rotate(8deg); }.challenge-result-screen > .eyebrow { margin-bottom: 4px; }.challenge-result-screen > h1 { margin-bottom: 6px; }.challenge-result-screen > p { margin-bottom: 14px; }
.challenge-result-score { width: 100%; display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 12px; padding: 14px; border-radius: 24px; color: #fff; background: var(--purple); box-shadow: 0 6px 0 #cfc7fb; text-align: left; }.challenge-result-score > strong { font-size: 44px; text-align: center; }.challenge-result-score > strong small { font-size: 17px; }.challenge-result-score span b,.challenge-result-score span small { display: block; }.challenge-result-score span b { font-size: 14px; }.challenge-result-score span small { margin-top: 5px; color: #ddd8ff; font-size: 11px; }
.challenge-vote,.challenge-thanks { width: 100%; margin-top: 18px; padding: 14px; border: 2px solid #e4dfff; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }.challenge-vote > strong { display: block; margin-bottom: 11px; font-size: 13px; }.challenge-vote > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.challenge-vote button { min-height: 46px; padding: 5px; border: 0; border-radius: 14px; color: var(--purple); background: #eeeaff; font-size: 11px; font-weight: 850; cursor: pointer; }.challenge-thanks { color: #087c64; border-color: #b9eedf; background: #e7fbf5; font-size: 13px; font-weight: 900; }
.challenge-result-board { width: 100%; margin-top: 14px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); text-align: left; }.challenge-result-screen .result-actions { margin-top: 16px; }

/* Challenge onboarding: one safe practice action before the scored timer starts. */
.challenge-tutorial-screen { min-height: 100%; display: flex; flex-direction: column; gap: 16px; }
.tutorial-intro { display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 12px; padding: 18px 14px 18px 20px; border-radius: 28px; background: linear-gradient(135deg,#f0edff,#fff4cd); box-shadow: var(--shadow); overflow: hidden; }.tutorial-intro .eyebrow { margin: 0 0 5px; color: var(--purple); font-size: 10px; }.tutorial-intro h1 { margin: 0; font-size: 22px; line-height: 1.1; }.tutorial-intro p { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.tutorial-mascot { position: relative; width: 104px; height: 126px; display: grid; place-items: end center; }.tutorial-mascot::after { content:""; position: absolute; right: 8px; bottom: 3px; left: 8px; height: 14px; border-radius: 50%; background: rgba(59,199,165,.24); filter: blur(5px); }.tutorial-mascot img { position: relative; z-index: 2; width: 98px; height: 122px; object-fit: contain; transform-origin: 50% 88%; animation: mascot-breathe 2.8s ease-in-out infinite; }.tutorial-mascot.is-happy img { animation: kobi-cheer .75s cubic-bezier(.2,.85,.25,1.15) both; }.tutorial-mascot.is-oops img { animation: kobi-oops .5s ease-in-out both; }
.tutorial-demo { padding: 16px; border: 2px solid #ebe7fc; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }.tutorial-demo-label { display: flex; align-items: center; gap: 8px; color: var(--purple); }.tutorial-demo-label span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--purple); font-size: 12px; font-weight: 900; }.tutorial-demo-label strong { flex: 1; font-size: 12px; }.tutorial-demo-label b { color: #087c64; font-size: 20px; }
.tutorial-demo .formula { min-height: 104px; margin: 12px 0; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 22px; color: #fff; background: linear-gradient(145deg,#654de8,#4b35ca); box-shadow: 0 6px 0 #d8d1ff; }.tutorial-demo .formula strong,.tutorial-demo .formula b { color: #fff; font-size: 40px; }.tutorial-demo .formula span { color: #cec7ff; font-size: 30px; }
.tutorial-demo .answer-grid { gap: 8px; }.tutorial-demo .answer-card { min-height: 62px; border-radius: 18px; font-size: 24px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }.tutorial-demo .answer-card:active { transform: translateY(3px); }.tutorial-demo .answer-card.correct-answer { border-color: #3bc7a5; background: #e0faf3; }.tutorial-demo .answer-card.wrong-answer { border-color: #ef7585; background: #fff0f2; animation: answer-shake .34s ease both; }
.tutorial-feedback { min-height: 48px; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; font-size: 12px; text-align: left; }.tutorial-feedback span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; font-weight: 900; }.tutorial-feedback.success { color: #087c64; background: #e0faf3; }.tutorial-feedback.success span { background: #24ae8c; }.tutorial-feedback.retry { color: #9b394b; background: #fff0f2; }.tutorial-feedback.retry span { background: #e35f76; }
.tutorial-ready { margin-top: auto; padding-bottom: max(8px,env(safe-area-inset-bottom)); text-align: center; }.tutorial-ready small { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 800; }.tutorial-ready .primary-button { width: 100%; }
@keyframes answer-shake { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-5px)} 65%{transform:translateX(5px)} }

/* Shared game layout */
.game-screen { display: flex; flex-direction: column; padding: 14px 14px max(18px, env(safe-area-inset-bottom)); }
.game-header { min-height: 52px; }
.game-header > strong { flex: 0 0 52px; color: var(--muted); font-size: 13px; text-align: right; }
.game-progress { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.game-progress i { height: 8px; border-radius: 8px; background: #e7e4f2; }
.game-progress i.done { background: var(--mint); }.game-progress i.current { border: 2px solid var(--mint); background: #d7f7ef; }
.game-content { flex: 1; padding-top: 16px; }
.mission-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mission-title.compact { align-items: flex-start; }
.mission-title h1 { margin: 0 0 3px; font-size: 21px; }
.mission-title p { margin: 0; font-size: 12px; }
.mission-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 15px; background: #f0edff; font-size: 22px; }
.mission-icon .ui-icon { width: 24px; height: 24px; color: var(--purple); }
.formula { display: flex; align-items: center; justify-content: center; gap: 14px; font-variant-numeric: tabular-nums; }
.formula strong, .formula b { font-size: clamp(44px, 13vw, 62px); line-height: 1; }
.formula span { color: #d1caef; font-size: 34px; font-weight: 700; }
.formula b { color: var(--amber); }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.answer-card { min-height: 84px; border: 2px solid #e4e0f7; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #dad4f1, var(--shadow); cursor: pointer; transition: transform .16s ease, opacity .16s ease, background .16s ease; }
.answer-card:not(.correct-answer):not(.wrong-answer) { animation: answer-enter .26s ease-out both; }
.answer-card:nth-child(2) { animation-delay: .035s; }.answer-card:nth-child(3) { animation-delay: .07s; }.answer-card:nth-child(4) { animation-delay: .105s; }
.answer-card strong { font-size: 28px; }
.answer-card:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #dad4f1; }
.correct-answer { color: #087c64 !important; border-color: #55d7ba !important; background: #daf9f0 !important; animation: correct-pop .42s ease; }
.wrong-answer { color: #b03949 !important; border-color: #f0929e !important; background: #fff0f1 !important; animation: wrong-shake .35s ease; }
.dimmed { opacity: .45; }
.feedback-bar { position: sticky; bottom: 0; z-index: 8; min-height: 72px; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 20px; box-shadow: 0 -8px 24px rgba(52,43,120,.1); animation: feedback-up .3s cubic-bezier(.2,.78,.3,1) both; }
.feedback-bar > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; font-weight: 900; }
.feedback-bar > div { flex: 1; min-width: 0; }.feedback-bar strong, .feedback-bar small { display: block; }.feedback-bar strong { font-size: 16px; }.feedback-bar small { margin-top: 2px; font-size: 12px; }
.feedback-bar button { min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; color: #fff; background: var(--purple); font-weight: 850; cursor: pointer; }
.feedback-bar.success { background: #dcfaef; }.feedback-bar.success > span { color: #fff; background: var(--success); }.feedback-bar.success strong { color: #087c64; }
.feedback-bar.retry { background: #fff0e3; }.feedback-bar.retry > span { color: #fff; background: #f08c43; }.feedback-bar.retry strong { color: #9b501e; }
.feedback-kobi { position: relative; width: 56px !important; height: 56px !important; flex: 0 0 56px; overflow: visible; border: 0 !important; border-radius: 18px !important; background: rgba(255,255,255,.72) !important; }
.feedback-kobi img { position: relative; z-index: 2; width: 52px; height: 58px; object-fit: contain; transform-origin: 50% 100%; }
.feedback-kobi.success img { animation: kobi-cheer .78s cubic-bezier(.22,.8,.35,1) both; }
.feedback-kobi.retry img { animation: kobi-oops .58s ease-out both; }
.feedback-kobi i,.feed-kobi i { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 2px; background: var(--amber); opacity: 0; transform: rotate(45deg); }
.feedback-kobi.success i { animation: happy-spark .72s ease-out both; }
.feedback-kobi i:nth-of-type(1) { left: 2px; top: 8px; }
.feedback-kobi i:nth-of-type(2) { right: 1px; top: 2px; animation-delay: .06s; }
.feedback-kobi i:nth-of-type(3) { right: 5px; bottom: 8px; animation-delay: .12s; }

/* Classic */
.classic-stage { display: grid; place-items: center; min-height: 190px; border-radius: var(--radius-lg); background: linear-gradient(145deg, #6750e9, #4934c8); box-shadow: 0 8px 0 #d9d2ff, var(--shadow); }
.classic-stage .formula strong { color: #fff; }.classic-stage .formula span { color: #c8c0ff; }

/* Number sequence */
.sequence-stage { min-height: 360px; display: grid; align-content: center; gap: 28px; padding: 28px 18px; border-radius: var(--radius-lg); background: linear-gradient(150deg,#e6f8ff,#f0edff 58%,#fff8df); box-shadow: inset 0 0 0 2px rgba(91,69,230,.06); }
.sequence-label { width: max-content; margin: 0 auto; padding: 8px 15px; border-radius: 14px; color: #fff; background: var(--purple); font-size: 18px; font-weight: 900; box-shadow: 0 4px 0 #3f2cb6; }
.sequence-track { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sequence-track > span { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #ded8ff; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 5px 0 #d9d2f2; }
.sequence-track > span b { font-size: 21px; }
.sequence-track > span.is-missing { color: var(--purple); border: 3px dashed #8f80f3; background: #f4f1ff; }
.sequence-track > span.is-missing { animation: missing-pulse 1.65s ease-in-out infinite; }
.sequence-track > i { color: #8e87a8; }
.sequence-track > i .ui-icon { width: 16px; height: 16px; }
.sequence-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sequence-button { min-height: 72px; border: 2px solid #e3def7; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 5px 0 #d7d0ef; cursor: pointer; animation: answer-enter .26s ease-out both; transition: transform .16s ease, box-shadow .16s ease; }
.sequence-button:nth-child(2) { animation-delay:.035s; }.sequence-button:nth-child(3) { animation-delay:.07s; }.sequence-button:nth-child(4) { animation-delay:.105s; }
.sequence-button:not(:disabled):active { transform:translateY(3px); box-shadow:0 2px 0 #d7d0ef; }
.sequence-button strong { font-size: 24px; }

/* Legacy balloons */
.balloon-stage { position: relative; min-height: 430px; padding: 28px 12px 18px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(#dff6ff, #fbfdff 56%, #e7f8e8); }
.balloon-stage .formula { position: relative; z-index: 2; margin-bottom: 30px; }
.balloon-stage .formula strong { font-size: 43px; }.balloon-stage .formula span { font-size: 28px; }
.cloud { position: absolute; width: 90px; height: 26px; border-radius: 30px; background: rgba(255,255,255,.75); }.cloud::before,.cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.cloud::before { width:38px;height:38px;left:15px; }.cloud::after { width:30px;height:30px;right:12px; }
.cloud-one { top: 80px; left: -28px; }.cloud-two { top: 126px; right: -30px; transform: scale(.75); }
.balloon-field { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; padding: 0 10px; }
.balloon-button { position: relative; min-height: 108px; border: 0; border-radius: 52% 48% 48% 52%; color: var(--ink); background: #ffcf51; box-shadow: inset -9px -12px rgba(226,145,27,.13), 0 8px 16px rgba(69,112,155,.12); cursor: pointer; animation: balloon-float 2.6s ease-in-out infinite; }
.balloon-button::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:24px; background:#c9a4a4; transform:translateX(-50%); }
.balloon-button:nth-child(2) { background:#ff9daf; animation-delay:-.7s; }.balloon-button:nth-child(3) { background:#84e2ce; animation-delay:-1.3s; }.balloon-button:nth-child(4) { background:#b9a8ff; animation-delay:-1.9s; }
.balloon-button strong { font-size: 24px; }

/* Runner */
.runner-question { margin-bottom: 12px; padding: 18px 10px; border-radius: 22px; background: #5b45e6; }
.runner-question .formula strong { color:#fff;font-size:40px; }.runner-question .formula span { font-size:28px;color:#c9c1ff; }
.runner-stage { position:relative;min-height:372px;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(#bdefff 0 31%,#8ad69e 31% 39%,#9a8875 39%);box-shadow:inset 0 -10px 22px rgba(67,48,34,.12); }
.runner-sky { position:absolute;inset:0 0 auto;height:31%;background:radial-gradient(circle at 18% 28%,#fff 0 10px,transparent 11px),radial-gradient(circle at 78% 48%,#fff 0 14px,transparent 15px),linear-gradient(180deg,rgba(255,255,255,.18),transparent);opacity:.8; }
.runner-hills{position:absolute;left:-10%;right:-10%;top:24%;height:74px;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 25% 100%,#61be83 0 45%,transparent 46%),radial-gradient(ellipse at 72% 100%,#72ca8d 0 43%,transparent 44%)}
.runner-road-lines{position:absolute;z-index:1;inset:39% 0 0;background:linear-gradient(74deg,transparent 32.6%,rgba(255,255,255,.72) 33% 33.8%,transparent 34.2%),linear-gradient(106deg,transparent 65.8%,rgba(255,255,255,.72) 66.2% 67%,transparent 67.4%)}
.runner-road-lines::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0 20px,transparent 20px 40px);transform:translateX(-50%)}
.runner-kobi { position:absolute;z-index:4;left:50%;bottom:8px;width:92px;height:112px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 8px 5px rgba(28,38,42,.2));animation:runner-bob .55s ease-in-out infinite alternate;will-change:transform; }
.runner-kobi.lane-0{--run-x:-112px;--run-quarter:-28px;--run-half:-56px;--run-three:-84px}.runner-kobi.lane-1{--run-x:0px;--run-quarter:0px;--run-half:0px;--run-three:0px}.runner-kobi.lane-2{--run-x:112px;--run-quarter:28px;--run-half:56px;--run-three:84px}
.runner-kobi.is-running{animation:kobi-run-to-gate .62s cubic-bezier(.28,.72,.34,1) forwards}
.runner-kobi.arrived{width:64px;height:78px;bottom:144px}.runner-kobi.arrived.is-happy{animation:runner-celebrate .78s cubic-bezier(.22,.8,.35,1) both}.runner-kobi.arrived.is-oops{animation:runner-oops .58s ease-out both}.runner-kobi.arrived.lane-0{left:16.66%}.runner-kobi.arrived.lane-1{left:50%}.runner-kobi.arrived.lane-2{left:83.33%}
.runner-lanes { position:absolute;z-index:3;left:0;right:0;top:116px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 10px; }
.lane-button { position:relative;min-height:78px;padding-top:12px;border:4px solid rgba(255,255,255,.9);border-radius:28px 28px 16px 16px;color:#fff;background:linear-gradient(180deg,#6f5aee,#4d38c9);box-shadow:0 7px 0 rgba(48,34,135,.42),0 12px 20px rgba(41,30,102,.16);cursor:pointer;transition:transform .18s ease,filter .18s ease; }
.lane-button:not(.correct-answer):not(.wrong-answer) { animation: answer-enter .28s ease-out both; }.lane-button:nth-child(2){animation-delay:.045s}.lane-button:nth-child(3){animation-delay:.09s}
.lane-button::after{content:"";position:absolute;left:14px;right:14px;bottom:-16px;height:9px;border-radius:50%;background:rgba(56,37,24,.2);filter:blur(2px)}
.lane-button strong { font-size:25px; }.lane-button:not(:disabled):active{transform:translateY(4px)}.lane-button.lane-chosen{filter:brightness(1.18);transform:translateY(-4px) scale(1.03)}
.runner-dust{position:absolute;z-index:3;left:50%;bottom:20px;width:90px;height:35px;transform:translateX(-50%);opacity:0}.runner-in-motion .runner-dust{opacity:1}.runner-dust i{position:absolute;bottom:0;width:18px;height:18px;border-radius:50%;background:rgba(255,243,218,.72);animation:dust-puff .5s ease-out infinite}.runner-dust i:nth-child(1){left:18px}.runner-dust i:nth-child(2){left:39px;animation-delay:.1s}.runner-dust i:nth-child(3){right:18px;animation-delay:.2s}

/* Tower */
.timer-number { margin-left:auto;color:#e17f21;font-size:11px;white-space:nowrap; }.timer-number span { font-size:20px; }
.timer-track { height:10px;margin:-4px 0 12px;overflow:hidden;border-radius:10px;background:#ece8f5; }.timer-track i { display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f26b68,#ffbd35,#43cdb1);transform-origin:left; }
.tower-scene { position:relative;min-height:150px;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 18px 6px;border-radius:24px;background:linear-gradient(#eee9ff 0 66%,#a9e5c7 66%);overflow:hidden; }
.tower-scene img { position:relative;z-index:2;width:86px;height:116px;object-fit:contain;transform-origin:50% 100%; }
.scene-kobi.is-idle { animation: mascot-breathe 2.8s ease-in-out infinite; }
.scene-kobi.is-happy { animation: kobi-cheer .78s cubic-bezier(.22,.8,.35,1) both; }
.scene-kobi.is-oops { animation: kobi-oops .58s ease-out both; }
.castle-art { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px 22px 14px 14px; color: #8b5c16; background: #ffd56c; box-shadow: 0 7px 0 #d29b39; }
.castle-art .ui-icon { width: 43px; height: 43px; stroke-width: 2; }
.monster-art { position:relative;width:72px;height:66px;display:grid;place-items:center;border-radius:32px 32px 24px 24px;color:#fff;background:#6651dc;box-shadow:0 7px 0 #4532b4;transition:transform .08s linear; }
.monster-art::before,.monster-art::after{content:"";position:absolute;top:30px;width:18px;height:28px;border-radius:14px;background:#6651dc}.monster-art::before{left:-10px;transform:rotate(24deg)}.monster-art::after{right:-10px;transform:rotate(-24deg)}
.monster-face{display:grid;grid-template-columns:12px 12px;gap:10px;place-items:center;animation:monster-blink 3s ease-in-out infinite}.monster-face i{width:10px;height:13px;border:3px solid #fff;border-radius:50%;background:#25204f}.monster-face b{grid-column:1/-1;margin-top:-4px;color:#fff;font-size:20px;line-height:12px}
.tower-question { margin-top:12px;padding:16px;border-radius:22px;background:#5b45e6; }.tower-question .formula strong { color:#fff;font-size:38px; }.tower-question .formula span {color:#c9c1ff;font-size:27px;}
.mode-tower .answer-grid { margin-top:12px; }.mode-tower .answer-card { min-height:68px; }

/* Equal groups */
.array-stage { min-height: 330px; display: grid; align-content: center; gap: 22px; padding: 22px 16px; border-radius: var(--radius-lg); background: linear-gradient(145deg,#e4fbf6,#f0edff); box-shadow: inset 0 0 0 2px rgba(67,205,177,.14); }
.array-formula { padding: 13px 10px; border-radius: 20px; background: rgba(255,255,255,.88); }
.array-formula .formula strong { font-size: 36px; }
.array-formula .formula span { font-size: 25px; }
.array-groups { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.array-group { min-width: 46px; min-height: 46px; display: grid; grid-template-columns: repeat(3,7px); place-content: center; gap: 4px; padding: 8px; border: 2px solid #8fe0cd; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 4px 0 #bdeadd; animation: group-arrive .35s ease-out both; }
.array-group:nth-child(2n) { animation-delay: .04s; }
.array-group:nth-child(3n) { animation-delay: .08s; }
.array-group i { width: 7px; height: 7px; border-radius: 50%; background: #5b45e6; }
.array-answers { margin-top: 14px; }

/* Legacy fishing */
.fishing-stage { position:relative;min-height:430px;padding:28px 14px;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(#d6fbff 0 13%,#4dd0cf 13%,#1a8fb5 100%); }
.water-top { position:absolute;left:-10%;right:-10%;top:9%;height:42px;border-radius:50%;border-top:7px solid rgba(255,255,255,.7); }
.fishing-stage .formula { position:relative;z-index:2;padding:14px;border-radius:20px;background:rgba(255,255,255,.92); }.fishing-stage .formula strong { font-size:38px; }.fishing-stage .formula span { font-size:27px; }
.fish-field { position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:32px; }
.fish-button { min-height:86px;border:0;border-radius:50% 46% 48% 52%;color:#fff;background:#ff805e;box-shadow:inset -12px -8px rgba(137,53,35,.12),0 8px 14px rgba(21,90,111,.18);cursor:pointer;animation:fish-swim 3s ease-in-out infinite; }
.fish-button:nth-child(2){background:#7866e7;animation-delay:-.8s}.fish-button:nth-child(3){background:#f6bc38;animation-delay:-1.6s}.fish-button:nth-child(4){background:#35b985;animation-delay:-2.3s}
.fish-button strong { display:flex;align-items:center;justify-content:center;gap:7px;font-size:22px; }.fish-button strong span { font-size:20px; }.fish-button strong i { width:6px;height:6px;border-radius:50%;background:#fff; }
.bubbles { position:absolute;right:25px;bottom:16px;color:rgba(255,255,255,.65);font-size:32px; }

/* Feed */
.feed-stage { min-height: 286px; display: grid; grid-template-rows: 1fr 74px; gap: 8px; padding: 16px 16px 18px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(135deg, #ffe9df, #f0ebff); }
.feed-character { min-width: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; }
.feed-kobi { position: relative; width: 120px; height: 158px; display: block; }
.feed-kobi img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; }
.feed-stage.is-idle .feed-kobi img { animation: mascot-breathe 2.8s ease-in-out infinite; }
.feed-stage.is-happy .feed-kobi img { animation: kobi-cheer .78s cubic-bezier(.22,.8,.35,1) both; }
.feed-stage.is-oops .feed-kobi img { animation: kobi-oops .58s ease-out both; }
.feed-kobi i:nth-of-type(1) { left: 10px; top: 20px; }
.feed-kobi i:nth-of-type(2) { right: 8px; top: 12px; animation-delay: .06s; }
.feed-kobi i:nth-of-type(3) { right: 0; top: 66px; animation-delay: .12s; }
.feed-stage.is-happy .feed-kobi i { animation: happy-spark .72s ease-out both; }
.speech-bubble { position: relative; min-width: 0; padding: 14px 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.speech-bubble::before { content: ""; position: absolute; left: -10px; bottom: 24px; border-width: 9px 11px 9px 0; border-style: solid; border-color: transparent #fff transparent transparent; }
.speech-bubble strong { display: block; color: var(--purple); font-size: 13px; line-height: 1.35; }
.food-bowl { position: relative; width: 154px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 0 auto; padding-top: 8px; border-radius: 12px 12px 54px 54px; color: #fff; background: #ef6b63; box-shadow: 0 6px 0 #b84646; }
.food-bowl::before { content: ""; position: absolute; z-index: 0; left: -6px; right: -6px; top: -7px; height: 18px; border: 3px solid #fff0e8; border-radius: 50%; background: #ff948a; }
.food-bowl small,.food-bowl strong { position: relative; z-index: 1; display: block; }
.food-bowl small { font-size: 8px; font-weight: 800; line-height: 1; text-align: center; }
.food-bowl strong { color: #fff5a8; font-size: 30px; line-height: 1; }
.feed-stage.is-happy .food-bowl { animation: bowl-cheer .62s ease-out both; }
.feed-stage.is-oops .food-bowl { animation: bowl-oops .48s ease-out both; }
.expression-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px; }.expression-card {min-height:72px;border:2px solid #e4e0f7;border-radius:20px;background:#fff;box-shadow:0 5px 0 #dad4f1;cursor:pointer}.expression-card strong{font-size:21px}
.expression-card:not(.correct-answer):not(.wrong-answer) { animation: answer-enter .26s ease-out both; }.expression-card:nth-child(2){animation-delay:.035s}.expression-card:nth-child(3){animation-delay:.07s}.expression-card:nth-child(4){animation-delay:.105s}

/* Factors */
.factor-stage { min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 30%,#fff 0 15%,transparent 16%),linear-gradient(145deg,#e9e5ff,#e0fff6); }
.target-orb { width:100px;height:100px;display:grid;place-items:center;border:10px solid rgba(255,255,255,.68);border-radius:50%;color:#fff;background:var(--purple);box-shadow:0 8px 0 #cfc7fb,0 15px 30px rgba(73,53,195,.2);font-size:38px;font-weight:900; }
.factor-formula { display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:20px;background:#fff;box-shadow:var(--shadow);font-size:28px;font-weight:800; }.factor-formula span{color:#a19ab8}.factor-formula b{width:44px;height:44px;display:grid;place-items:center;border:3px dashed #9b8efa;border-radius:14px;color:var(--purple)}
.factor-options { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px; }.factor-button {min-height:68px;border:2px solid #e2ddfa;border-radius:19px;background:#fff;box-shadow:0 5px 0 #d9d2f2;cursor:pointer}.factor-button strong{font-size:25px}
.factor-button:not(.correct-answer):not(.wrong-answer) { animation: answer-enter .26s ease-out both; }.factor-button:nth-child(2){animation-delay:.035s}.factor-button:nth-child(3){animation-delay:.07s}.factor-button:nth-child(4){animation-delay:.105s}

/* Result */
.result-screen { position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden; }
.celebration { position:absolute;left:18px;right:18px;top:46px;display:flex;justify-content:space-between;color:var(--amber);font-size:28px;animation:celebrate 1.5s ease-in-out infinite; }
.result-mascot { position:relative;width:160px;height:176px;margin-top:18px; }.result-mascot img{width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;animation:result-hop .8s ease-out,mascot-breathe 2.8s ease-in-out .82s infinite}.result-mascot b{position:absolute;right:0;bottom:12px;width:48px;height:48px;display:grid;place-items:center;border:5px solid #fff;border-radius:50%;background:#fff1bd;font-size:23px;box-shadow:var(--shadow)}
.result-mascot b .ui-icon { width: 23px; height: 23px; color: var(--purple); }
.result-screen > p { margin-bottom:20px; }.result-screen h1 { margin-bottom:6px; }
.daily-result-badge { margin: -4px 0 8px; padding: 7px 11px; border-radius: 12px; color: #087c64; background: #dff8f0; font-size: 11px; font-weight: 900; }
.new-reward{width:100%;display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;margin:-6px 0 14px;padding:10px 12px;border:2px solid #ffe17b;border-radius:18px;background:#fff8dc;box-shadow:0 4px 0 #f0cf55;text-align:left;animation:reward-pop .6s cubic-bezier(.2,.85,.3,1.2) both}.new-reward>i{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#765600;background:#ffdc62}.new-reward>i .ui-icon{width:23px;height:23px}.new-reward small,.new-reward strong{display:block}.new-reward small{color:#8b6700;font-size:9px;font-weight:900;text-transform:uppercase}.new-reward strong{margin-top:2px;font-size:14px}
.result-score { width:100%;display:grid;grid-template-columns:105px 1fr;align-items:center;gap:18px;padding:16px;border-radius:24px;background:#fff;box-shadow:var(--shadow);text-align:left; }
.result-score > strong {font-size:46px;color:var(--purple);text-align:center}.result-score > strong small{font-size:21px;color:var(--muted)}.result-score span small,.result-score span b,.result-score span i{display:block}.result-score span small{color:var(--muted);font-size:11px}.result-score span b{margin:3px 0 7px;font-size:20px}.result-score span i{height:8px;overflow:hidden;border-radius:8px;background:#eeeaf8}.result-score span em{display:block;height:100%;border-radius:inherit;background:var(--mint)}
.mistakes-card { width:100%;margin-top:14px;padding:16px;border-radius:22px;background:#fff8e5;text-align:left; }.mistakes-card > strong{font-size:13px}.mistakes-card > div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.mistakes-card span{padding:7px 10px;border-radius:12px;background:#fff;font-size:12px;font-weight:800}.perfect-line{margin:0;color:#087c64!important;font-weight:800}
.result-actions { width:100%;display:grid;gap:12px;margin-top:auto;padding-top:20px; }.result-actions button{width:100%}

/* Parent */
.parent-screen { padding-top:max(16px,env(safe-area-inset-top)); }.parent-intro{display:flex;align-items:center;gap:14px;margin:28px 0 18px}.parent-intro h1{margin:0 0 4px;font-size:25px}.parent-intro p{margin:0;font-size:12px}
.parent-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.parent-metrics article{min-height:118px;padding:14px 10px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}.parent-metrics strong,.parent-metrics span{display:block}.parent-metrics strong{margin-bottom:8px;color:var(--purple);font-size:27px}.parent-metrics span{color:var(--muted);font-size:10.5px;line-height:1.3}
.hard-card{margin-top:20px;padding:18px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}.hard-card ul{margin:8px 0 0;padding:0;list-style:none}.hard-card li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}.hard-card li span strong,.hard-card li span small{display:block}.hard-card li span small{margin-top:2px;color:var(--muted);font-size:11px}.hard-card li b{color:var(--purple)}.empty-data{margin:14px 0 0;font-size:13px}.cloud-note{margin:18px 2px 0;padding:14px;border-radius:16px;color:#177963;background:#e5faf3;font-size:12px;font-weight:750}

.account-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;margin-top:20px;padding:16px;border:2px solid #e7e2f7;border-radius:24px;background:#fff;box-shadow:var(--shadow)}.account-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#157965;background:#dff8f1}.account-icon .ui-icon{width:26px;height:26px}.account-card>span:nth-child(2){min-width:0}.account-card strong,.account-card small,.account-card em{display:block}.account-card strong{font-size:16px}.account-card small{margin-top:3px;color:var(--ink);font-size:12px;font-weight:800}.account-card em{margin-top:5px;color:var(--muted);font-size:10.5px;font-style:normal;line-height:1.35}.account-card>button{grid-column:1/-1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;border:2px solid #f3d7dd;border-radius:16px;color:#a3354b;background:#fff4f6;font:850 13px/1.2 inherit;cursor:pointer}.account-card>button .ui-icon{width:19px;height:19px}.confirm-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:end center;padding:16px;background:rgba(30,27,48,.46);backdrop-filter:blur(5px);animation:confirm-fade .18s ease-out both}.confirm-dialog{width:min(100%,420px);padding:24px;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(30,27,48,.26);text-align:center;animation:confirm-rise .24s cubic-bezier(.2,.8,.3,1) both}.confirm-icon{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 14px;border-radius:18px;color:#a3354b;background:#fff0f3}.confirm-icon .ui-icon{width:27px;height:27px}.confirm-dialog h2{margin:0 0 8px;font-size:22px}.confirm-dialog>p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.confirm-dialog>.form-error{margin-top:12px;color:#9c2d45}.confirm-dialog>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.confirm-dialog button{min-height:52px;border-radius:17px;font:850 14px/1.2 inherit;cursor:pointer}.confirm-dialog button:disabled{opacity:.58;cursor:wait}.danger-button{border:0;color:#fff;background:#c64159;box-shadow:0 5px 0 #922b40}
.registration-screen{padding-bottom:max(24px,env(safe-area-inset-bottom))}.registration-screen .profile-preview{width:104px;height:104px;margin-top:0}.registration-screen .profile-hero h1{margin-bottom:6px}.registration-screen .profile-hero p:last-child{font-size:13px;line-height:1.45}
.auth-form{display:grid;gap:14px}.field-label>span{display:block;margin:0 0 7px 3px;color:var(--ink);font-size:13px;font-weight:850}.field-label input{width:100%;min-height:56px;padding:0 16px;border:2px solid var(--line);border-radius:17px;outline:none;color:var(--ink);background:#fff;font:750 16px/1.2 inherit;box-shadow:0 4px 0 #e8e4f6}.field-label input:focus{border-color:var(--purple);box-shadow:0 4px 0 #cfc7ff}.privacy-note,.verified-phone{margin:-4px 2px 0;color:#177963;font-size:11px;font-weight:750}.verified-phone{padding:12px 14px;border-radius:14px;background:#e5faf3}.consent-row{display:grid;grid-template-columns:24px 1fr;align-items:start;gap:10px;padding:13px;border-radius:16px;background:#f7f5ff;color:var(--muted);font-size:11px;line-height:1.45}.consent-row input{width:22px;height:22px;margin:0;accent-color:var(--purple)}.form-error{margin:0;padding:11px 13px;border-radius:14px;color:#9c2d45;background:#fff0f3;font-size:12px;font-weight:800}.auth-form .primary-button:disabled{opacity:.62;cursor:wait}
.otp-screen{display:flex;flex-direction:column;gap:24px}.otp-hero{text-align:center;margin-top:38px}.otp-icon{width:86px;height:86px;display:grid;place-items:center;margin:0 auto 18px;border-radius:28px;color:var(--purple);background:#ece8ff;box-shadow:var(--shadow);font-size:38px}.otp-hero h1{margin-bottom:8px}.otp-hero p{max-width:300px;margin:0 auto;color:var(--muted);font-size:14px}.demo-code{display:block;margin:16px auto 0;padding:10px 14px;width:max-content;border-radius:14px;color:#805d00;background:#fff1bd;font-size:12px}.otp-form{margin-top:6px}.otp-form input{text-align:center;letter-spacing:12px;font-size:26px}

/* Weekly league */
.league-card{margin-top:22px;padding:17px;border:2px solid #e3ddff;border-radius:26px;background:linear-gradient(145deg,#fff,#f5f2ff);box-shadow:var(--shadow)}.league-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.league-heading h2{margin:1px 0 4px;font-size:20px}.league-heading p:last-child{margin:0;color:var(--muted);font-size:11px}.league-medal{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#fff1bd;font-size:24px}.league-card ol,.league-list{margin:14px 0 0;padding:0;list-style:none}.league-row{min-height:52px;display:grid;grid-template-columns:28px 38px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 9px;border-top:1px solid var(--line);animation:row-enter .34s ease-out both}.league-row:nth-child(2){animation-delay:.04s}.league-row:nth-child(3){animation-delay:.08s}.league-row:nth-child(4){animation-delay:.12s}.league-row:nth-child(5){animation-delay:.16s}.league-row:first-child{border-top:0}.league-row.is-you{margin-top:4px;border:0;border-radius:16px;background:#e3faf3}.league-rank{color:var(--muted);text-align:center}.league-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:850}.league-name small{display:block;color:#16806a;font-size:9px}.league-row>b{color:var(--purple);font-size:13px}.league-button{width:100%;min-height:46px;margin-top:12px;border:0;border-radius:15px;color:#fff;background:var(--purple);font-weight:850;cursor:pointer}.league-own .league-row{margin-top:8px}.league-screen{padding-top:max(16px,env(safe-area-inset-top))}.league-hero{display:flex;align-items:center;gap:14px;margin:24px 0 16px;padding:16px;border:2px solid #eee7ff;border-radius:24px;color:var(--ink);background:linear-gradient(145deg,#fffdfa,#f6f3ff);box-shadow:var(--shadow)}.league-hero>span{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:18px;color:#916700;background:#fff0b7;box-shadow:0 4px 0 #f3d46d}.league-hero>span .ui-icon{width:30px;height:30px;animation:trophy-float 2.8s ease-in-out infinite}.league-hero h1{margin:2px 0 4px;font-size:23px}.league-hero p{margin:0;color:var(--muted);font-size:11px}.league-list{padding:8px 12px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}.league-list .league-row{min-height:62px}.league-list .league-row:nth-child(-n+3) .league-rank{color:#b17a00;font-size:18px}.league-demo-note{margin:16px 2px 0;padding:12px;border-radius:14px;color:var(--muted);background:#f5f2ff;font-size:11px}

@keyframes welcome-bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)} }
@keyframes balloon-float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes runner-bob { from{transform:translateX(-50%) translateY(0) rotate(-1deg)}to{transform:translateX(-50%) translateY(-5px) rotate(1deg)} }
@keyframes kobi-run-to-gate { 0%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(calc(-50% + var(--run-quarter))) translateY(-38px) rotate(-5deg) scale(.94)}50%{transform:translateX(calc(-50% + var(--run-half))) translateY(-78px) rotate(5deg) scale(.86)}75%{transform:translateX(calc(-50% + var(--run-three))) translateY(-116px) rotate(-4deg) scale(.78)}100%{transform:translateX(calc(-50% + var(--run-x))) translateY(-152px) scale(.7)} }
@keyframes dust-puff { 0%{transform:translate(0,0) scale(.5);opacity:0}35%{opacity:.8}100%{transform:translate(-8px,-24px) scale(1.35);opacity:0} }
@keyframes monster-blink { 0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.18)} }
@keyframes fish-swim { 0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px) translateY(-3px)} }
@keyframes mascot-breathe { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012,.992)} }
@keyframes kobi-cheer { 0%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-14px) rotate(-4deg) scale(1.04,.96)}58%{transform:translateY(0) rotate(3deg) scale(.97,1.03)}78%{transform:translateY(-5px) rotate(-1deg) scale(1.01,.99)}100%{transform:translateY(0) rotate(0) scale(1)} }
@keyframes kobi-oops { 0%,100%{transform:translateX(0) rotate(0)}28%{transform:translateX(-4px) rotate(-3deg)}55%{transform:translateX(4px) rotate(3deg)}78%{transform:translateX(-2px) rotate(-1deg)} }
@keyframes happy-spark { 0%{opacity:0;transform:translateY(8px) rotate(45deg) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translateY(-18px) rotate(135deg) scale(1.15)} }
@keyframes bowl-cheer { 0%,100%{transform:translateY(0) scale(1)}38%{transform:translateY(-8px) scale(1.06,.94)}68%{transform:translateY(2px) scale(.98,1.02)} }
@keyframes bowl-oops { 0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)} }
@keyframes runner-celebrate { 0%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}32%{transform:translateX(-50%) translateY(-10px) rotate(-5deg) scale(1.05,.95)}62%{transform:translateX(-50%) translateY(0) rotate(4deg) scale(.97,1.03)}100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)} }
@keyframes runner-oops { 0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(calc(-50% - 4px)) rotate(-3deg)}60%{transform:translateX(calc(-50% + 4px)) rotate(3deg)} }
@keyframes correct-pop { 0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)} }
@keyframes wrong-shake { 0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}70%{transform:translateX(6px)} }
@keyframes result-hop { 0%{transform:translateY(18px) scale(.9)}60%{transform:translateY(-8px) scale(1.04)}100%{transform:none} }
@keyframes group-arrive { from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none} }
@keyframes celebrate { 0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.08);opacity:1} }
@keyframes card-rise { from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none} }
@keyframes card-shine { from{transform:translateX(0) rotate(24deg)}to{transform:translateX(620px) rotate(24deg)} }
@keyframes bolt-pop { 0%{opacity:1;transform:scale(.55) rotate(-18deg)}65%{opacity:1;transform:scale(1.16) rotate(7deg)}100%{opacity:1;transform:none} }
@keyframes nav-pop { 0%{transform:scale(.72)}70%{transform:scale(1.16)}100%{transform:scale(1)} }
@keyframes arrow-invite { 0%,70%,100%{transform:translateX(0)}82%{transform:translateX(4px)}92%{transform:translateX(1px)} }
@keyframes answer-enter { from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none} }
@keyframes feedback-up { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }
@keyframes missing-pulse { 0%,100%{transform:scale(1);box-shadow:0 5px 0 #d9d2f2}50%{transform:scale(1.045);box-shadow:0 7px 18px rgba(91,69,230,.18)} }
@keyframes row-enter { from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none} }
@keyframes trophy-float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)} }
@keyframes challenge-kobi-bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)} }
@keyframes challenge-twinkle { 0%,100%{opacity:.35;transform:scale(.72) rotate(0)}50%{opacity:1;transform:scale(1.12) rotate(45deg)} }
@keyframes surprise-kobi { 0%,100%{transform:translateY(0) rotate(-1deg)}45%{transform:translateY(-5px) rotate(1deg)}55%{transform:translateY(-5px) rotate(1deg)} }
@keyframes preview-pop { 0%,100%{transform:scale(1)}50%{transform:scale(1.12)} }
@keyframes preview-run { 0%{transform:translateX(0)}50%{transform:translateX(55px) translateY(7px)}100%{transform:translateX(0)} }
@keyframes xp-fill { from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left} }
@keyframes badge-arrive { from{opacity:0;transform:scale(.65) rotate(-12deg)}to{opacity:1;transform:none} }
@keyframes reward-pop { from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none} }
@keyframes cloud-drift{0%,100%{translate:0 0}50%{translate:12px 2px}}
@keyframes route-march{to{stroke-dashoffset:-68}}
@keyframes world-kobi{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes mission-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes chest-wiggle{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-5deg)}92%{transform:rotate(5deg)}96%{transform:rotate(-3deg)}}
@keyframes surprise-kobi { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)} }
@keyframes preview-pop { 0%,100%{transform:scale(.9)}50%{transform:scale(1.08)} }
@keyframes preview-run { 0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-8px)} }

@keyframes confirm-fade { from{opacity:0}to{opacity:1} }
@keyframes confirm-rise { from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none} }
@media (max-height: 680px) {
  .screen { padding-top: 12px; }
  .home-header{margin-bottom:8px}.home-greeting{margin-bottom:8px}.home-greeting .eyebrow{display:none}.home-greeting h1{font-size:20px}.player-progress{min-height:58px;margin-bottom:8px;padding:6px 10px}.level-orbit{width:42px;height:42px}.daily-world{height:170px}.world-heading h1{font-size:31px}.world-route{height:100px;bottom:7px}.world-route>svg{inset:0 0 14px}.world-card .daily-stage b{width:32px;height:32px}.world-card .daily-stage small{font-size:7px}.daily-kobi{bottom:38px;width:62px;height:78px}.daily-chest{bottom:38px;width:40px;height:38px}.world-card>.daily-focus{display:none}.world-card>.daily-button{min-height:50px;margin-top:10px}.world-card .weekly-trail{margin-top:11px;padding-top:8px}
  .mission-title { margin-bottom: 10px; }
  .mission-title p { display: none; }
  .classic-stage { min-height: 150px; }
  .sequence-stage,.array-stage { min-height: 300px; }
  .runner-stage { min-height: 315px; }
  .tower-scene { min-height: 126px; }
  .tower-scene img { height: 96px; }
  .answer-card { min-height: 70px; }
}

@media (max-width: 360px) {
  .daily-card:not(.daily-plan) { padding: 16px; }
  .daily-plan-head{padding-inline:12px}.daily-next-step{grid-template-columns:minmax(0,1fr) 88px;margin-inline:8px}.daily-next-copy{padding-left:14px}.daily-next-copy h1{font-size:25px}.daily-plan-kobi img{width:88px;height:116px}.daily-meta{gap:4px}.daily-meta b{padding-inline:6px}.daily-plan>.daily-button{width:calc(100% - 24px);margin-inline:12px;font-size:15px}.daily-plan .weekly-trail,.daily-reward{margin-inline:12px}
  .daily-stage small { font-size: 9px; }
  .feed-character { grid-template-columns: 104px minmax(0, 1fr); }
  .feed-kobi { width: 104px; height: 146px; }
  .speech-bubble { padding: 12px 10px; }
  .speech-bubble strong { font-size: 11px; }
  .sequence-track { gap: 4px; }
  .sequence-track > span { width: 50px; height: 50px; border-radius: 16px; }
  .sequence-track > span b { font-size: 18px; }
  .array-group { min-width: 42px; min-height: 42px; padding: 6px 6px; }
  .challenge-card{padding:14px}.challenge-card-top{grid-template-columns:40px minmax(0,1fr) auto;gap:8px}.challenge-card-top>span{width:40px;height:40px}.challenge-card-top h1{font-size:19px}.challenge-card-top>b{padding:6px 8px;font-size:14px}.challenge-card>.challenge-lead{margin:9px 0 8px}.challenge-visual{grid-template-columns:86px minmax(0,1fr);min-height:96px;padding:7px}.challenge-kobi{height:84px}.challenge-kobi img{width:72px;height:88px}.challenge-rules span{min-height:36px;grid-template-columns:24px 30px minmax(0,1fr);padding:4px 7px}.challenge-rules i{width:24px;height:24px}.challenge-rules b{font-size:18px}.challenge-fairness{min-height:30px}.challenge-start{min-height:50px;margin-top:6px}.challenge-mini-board{margin-top:13px;padding:10px}.league-hero.weekly{margin-top:16px}
}

@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border: 10px solid #292d3b; border-radius: 48px; }
  .screen { min-height: calc(100dvh - 68px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}

/* Final brand lock: keep legacy component rules from reintroducing the old purple skin. */
.mode-card,.mode-card:nth-child(n){opacity:1;animation:none}
.bottom-nav button.active{color:#075f5b;background:#dcf4ec}
.bottom-nav button.active:before{background:#f06f4f}
.mode-card-foot>b{color:#075f5b;background:rgba(255,255,255,.82)}
.mode-card.tone-violet,.mode-card.tone-indigo{background:#e9f7f2}
.mode-card.tone-sky,.mode-card.tone-aqua{background:#e8f6fb}
.mode-card.tone-mint{background:#eff9de}
.mode-card.tone-amber{background:#fff0bf}
.mode-card.tone-rose{background:#ffebe4}

/* Playable worlds: the action is visible before the instruction is read. */
.mode-runner .mission-icon,.mode-feed .mission-icon{color:#087f70;background:#dff8ef}
.runner-question,.tower-question{background:linear-gradient(145deg,#087f70,#05665d);box-shadow:0 7px 0 #07574f,0 14px 24px rgba(6,91,81,.16)}
.runner-question .formula span,.tower-question .formula span{color:#bff7e9}
.runner-stage{min-height:334px;border:4px solid #fff;background:linear-gradient(#9de7f1 0 31%,#78d29b 31% 39%,#b8956d 39%);box-shadow:0 7px 0 #d9d1bd,0 16px 28px rgba(21,57,58,.14)}
.runner-sky i{position:absolute;right:24px;top:16px;width:42px;height:42px;border-radius:50%;background:#ffd65a;box-shadow:0 0 0 9px rgba(255,225,109,.28);animation:sun-pulse 2.4s ease-in-out infinite}
.runner-sky b,.runner-sky b:before,.runner-sky b:after{position:absolute;border-radius:24px;background:rgba(255,255,255,.86)}
.runner-sky b{left:18px;top:23px;width:60px;height:18px}.runner-sky b:before,.runner-sky b:after{content:"";bottom:0}.runner-sky b:before{left:9px;width:25px;height:27px}.runner-sky b:after{left:29px;width:22px;height:23px}
.runner-lanes{top:104px;gap:8px;padding:0 8px}.runner-kobi{bottom:5px;width:102px;height:120px}
.lane-button{min-height:84px;padding-top:20px;border:5px solid #fff;border-radius:30px 30px 12px 12px;color:#103d3a;background:linear-gradient(#fff7d7,#ffd95f);box-shadow:0 8px 0 #bd8625,0 13px 20px rgba(62,50,24,.2)}
.lane-button:before{content:"";position:absolute;left:50%;top:-20px;width:5px;height:24px;border-radius:4px;background:#87591e;transform:translateX(-50%)}
.lane-button:nth-child(2){background:linear-gradient(#e5fff8,#7de0c5);box-shadow:0 8px 0 #188f7b,0 13px 20px rgba(31,87,72,.2)}
.lane-button:nth-child(3){background:linear-gradient(#fff0e7,#ff9b78);box-shadow:0 8px 0 #c85842,0 13px 20px rgba(95,42,31,.2)}.lane-button strong{font-size:27px}
.timer-track{height:13px;padding:3px;background:#e7e1d3;box-shadow:inset 0 2px 4px rgba(35,51,62,.12)}
.tower-scene{min-height:180px;border:4px solid #fff;background:linear-gradient(#bcecf3 0 59%,#80d3a5 59%);box-shadow:0 7px 0 #d9d1bd,0 15px 26px rgba(21,57,58,.12)}
.tower-cloud{position:absolute;left:22%;top:20px;width:64px;height:18px;border-radius:22px;background:rgba(255,255,255,.75)}
.tower-cloud:before,.tower-cloud:after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}.tower-cloud:before{left:12px;width:28px;height:28px}.tower-cloud:after{right:8px;width:22px;height:22px}
.tower-path{position:absolute;left:54px;right:38px;bottom:-30px;height:82px;border-radius:50%;background:#d9bd8b;transform:perspective(120px) rotateX(44deg)}
.castle-art{z-index:2;width:78px;height:82px;color:#815513;background:linear-gradient(#ffe58b,#ffc847);box-shadow:0 8px 0 #bb7e20}
.monster-art{z-index:2;background:#ec7067;box-shadow:0 7px 0 #a94443;animation:monster-bounce 1.1s ease-in-out infinite}.monster-art:before,.monster-art:after{background:#ec7067}.tower-scene img{width:92px;height:124px}
.mode-tower .answer-card{min-height:74px;border-color:#c9e7df;box-shadow:0 6px 0 #c1dcd5}
.feed-stage{position:relative;min-height:310px;border:4px solid #fff;background:radial-gradient(circle at 82% 20%,rgba(255,218,91,.25) 0 35px,transparent 36px),linear-gradient(145deg,#fff0d5,#e0f8ef);box-shadow:0 7px 0 #d9d1bd,0 15px 26px rgba(21,57,58,.12)}
.speech-bubble{border:3px solid #fff4bd;box-shadow:0 6px 0 #d8c88c}.speech-bubble strong{color:#087f70;font-size:14px}
.food-bowl{background:linear-gradient(#ff8c76,#ec5f59);box-shadow:0 7px 0 #a94343}
.expression-card{position:relative;overflow:hidden;border:3px solid #f1ca6a;background:linear-gradient(145deg,#fffdf3,#fff1bd);box-shadow:0 6px 0 #d0a442}.expression-card:before{content:"";position:absolute;right:-9px;top:-10px;width:30px;height:30px;border-radius:50%;background:#e0ae41;box-shadow:-14px 18px 0 -9px #e0ae41}
.expression-card:nth-child(2n){border-color:#8bdac8;background:linear-gradient(145deg,#f3fffb,#cef6ea);box-shadow:0 6px 0 #51aa96}
.feed-confetti i{position:absolute;width:8px;height:8px;border-radius:2px;background:#f6bf32;opacity:0}.feed-confetti i:nth-child(1){left:13%;top:20%}.feed-confetti i:nth-child(2){right:14%;top:16%;background:#ef776c}.feed-confetti i:nth-child(3){left:24%;top:45%;background:#47cbb0}.feed-confetti i:nth-child(4){right:28%;top:42%;background:#fff}.feed-stage.is-happy .feed-confetti i{animation:confetti-pop .8s ease-out both}
@keyframes sun-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 14px rgba(255,225,109,.14)}}
@keyframes monster-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes confetti-pop{0%{opacity:0;transform:translateY(14px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(-42px) scale(1) rotate(160deg)}}
@media(max-width:390px){.runner-stage{min-height:310px}.runner-kobi{width:88px;height:104px}.tower-scene{min-height:160px}.feed-stage{min-height:286px}.feed-character{grid-template-columns:104px minmax(0,1fr)}.feed-kobi{width:104px;height:142px}}

/* A short run has a goal, escalating combo and one unpredictable bonus beat. */
.run-hud{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border:2px solid #cbe9df;border-radius:18px;background:rgba(247,255,251,.94);box-shadow:0 4px 0 #d7e7e1}
.run-hud>span{display:flex;align-items:center;gap:7px}.run-hud .ui-icon{width:20px;height:20px}.run-goal{color:#075f5b}.run-goal .ui-icon{fill:#ffd451;color:#c18a0b}.run-goal b{font-size:14px}.run-score{min-width:68px;justify-content:flex-end}.run-score small{color:#6c7584;font-size:10px;font-weight:800}.run-score strong{min-width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:#fff;background:#087f70;font-size:18px;box-shadow:0 4px 0 #07574f}
.run-combo,.run-bonus{grid-column:1/-1;justify-content:center;min-height:34px;margin:0 -4px -4px;border-radius:12px;font-size:12px;animation:hud-pop .38s cubic-bezier(.2,.8,.3,1.2) both}.run-combo{color:#a75020;background:#fff0d0}.run-combo .ui-icon{color:#ee743f;fill:#ffbc45}.run-bonus{color:#765000;background:linear-gradient(100deg,#fff1a3,#ffd85b,#fff1a3);background-size:200% 100%;box-shadow:inset 0 0 0 2px rgba(199,137,10,.18);animation:hud-pop .38s cubic-bezier(.2,.8,.3,1.2) both,bonus-shine 1.8s linear infinite}.run-bonus .ui-icon{color:#ad7400}
.is-bonus-question .runner-question,.is-bonus-question .tower-question,.is-bonus-question .classic-stage{box-shadow:0 0 0 4px #ffd85b,0 8px 0 #bd861c,0 16px 28px rgba(166,112,11,.18)}
.is-bonus-question .formula b{color:#ffd451;animation:bonus-mark .7s ease-in-out infinite alternate}
.feedback-bar.success:has(.feedback-kobi)+*{pointer-events:none}.feedback-bar.success>div:after{content:""}
.run-reward{display:grid;grid-template-columns:54px 1fr 1fr;align-items:center;gap:10px;width:100%;margin:12px 0;padding:12px 14px;border:2px solid #f2d16f;border-radius:20px;background:linear-gradient(135deg,#fff9db,#fff0a8);box-shadow:0 6px 0 #d4a83c}
.run-reward>span{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#9b6b00;background:#ffd451;box-shadow:inset 0 2px rgba(255,255,255,.7)}.run-reward>span .ui-icon{width:28px;height:28px;fill:#fff2a8}.run-reward>div{display:grid;gap:2px}.run-reward small{color:#775f2b;font-size:10px;font-weight:800}.run-reward strong{color:#163d3a;font-size:22px}
@keyframes hud-pop{from{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes bonus-shine{to{background-position:-200% 0}}
@keyframes bonus-mark{to{transform:scale(1.16) rotate(4deg)}}
@media(max-width:390px){.run-hud{margin-bottom:8px;padding:8px 10px}.run-goal b{font-size:12px}.run-score small{display:none}.run-reward{grid-template-columns:46px 1fr 1fr}.run-reward>span{width:42px;height:42px}}
.feed-character{position:relative;z-index:2;align-items:start}.speech-bubble{z-index:3;margin-top:24px}.food-bowl{z-index:1;margin-top:4px}

/* Collection */
.collection-screen{padding-top:max(16px,env(safe-area-inset-top))}
.collection-balance{display:flex;align-items:center;gap:8px;margin:14px 0;padding:12px 14px;border:2px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 4px 0 #ece7f9}
.collection-balance .ui-icon{width:22px;height:22px;color:#c18a0b;fill:#ffd451}
.collection-balance span:nth-child(2){color:var(--muted);font-size:13px;font-weight:800}
.collection-balance b{margin-left:auto;color:var(--ink);font-size:20px}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:12px}
.collection-card{display:grid;justify-items:center;gap:6px;padding:10px;border-radius:20px;background:var(--panel);box-shadow:var(--shadow);text-align:center}
.collection-card.is-equipped{box-shadow:0 0 0 3px var(--mint),var(--shadow)}
.collection-preview{width:64px;height:64px;display:grid;place-items:center}
.collection-preview svg{width:64px;height:64px}
.collection-name{min-height:28px;color:var(--ink);font-size:12px;font-weight:800;line-height:1.25}
.collection-price{display:flex;align-items:center;gap:4px;min-height:18px;color:var(--muted);font-size:11px;font-weight:800}
.collection-price .ui-icon{width:14px;height:14px;color:#c18a0b;fill:#ffd451}
.collection-card button{min-height:48px;width:100%;border:0;border-radius:14px;color:#fff;background:linear-gradient(135deg,#725bff,var(--purple));box-shadow:0 5px 0 #3f2cb6;font-size:13px;font-weight:850;cursor:pointer}
.collection-card button.is-secondary{color:var(--purple);background:#fff;box-shadow:0 5px 0 #d5cef6}
.collection-card button:disabled{color:#a9b0c4;background:#e7e9f2;box-shadow:0 5px 0 #d6d9e6;cursor:default}
.collection-error{margin:0;color:var(--danger);font-size:11px;font-weight:800;line-height:1.3}
.collection-home-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:48px;margin:12px 0;padding:8px 12px;border:2px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 4px 0 #ece7f9;text-align:left;cursor:pointer}
.collection-home-icon{width:36px;height:36px;display:grid;place-items:center}
.collection-home-icon .ui-icon{width:28px;height:28px;color:var(--purple)}
.collection-home-row strong{color:var(--ink);font-size:14px}
.collection-home-row small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;font-weight:800}
.collection-home-row small .ui-icon{width:14px;height:14px;color:#c18a0b;fill:#ffd451}
.collection-home-row>b{color:var(--muted)}
.collection-result-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;min-height:44px;margin:10px 0;padding:8px 12px;border:2px solid #c8eee4;border-radius:16px;background:#edfbf7}
.collection-result-row>span:first-child{width:36px;height:36px;display:grid;place-items:center}
.collection-result-row svg{width:36px;height:36px}
.collection-result-row small{display:block;color:#146f5e;font-size:11px;font-weight:800}
.collection-result-row strong{color:#146f5e;font-size:14px}
@media(max-width:360px){.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.collection-preview{width:52px;height:52px}.collection-preview svg{width:52px;height:52px}.collection-name{font-size:10px}}

/* Accessory worn by Kobi */
.kobi-accessory{position:absolute;z-index:3;pointer-events:none;animation:accessory-sway 3.4s ease-in-out infinite}
.kobi-accessory.wear-side{animation-name:accessory-sway-side}
.kobi-accessory svg{width:100%;height:auto;display:block}
.kobi-accessory.wear-head{top:-3%;left:50%;width:38%;transform:translateX(-50%)}
.kobi-accessory.wear-neck{top:41%;left:50%;width:58%;transform:translateX(-50%)}
.kobi-accessory.wear-chest{top:50%;left:50%;width:28%;transform:translateX(-50%)}
.kobi-accessory.wear-back{top:18%;left:50%;width:94%;transform:translateX(-50%)}
.kobi-accessory.wear-side{top:42%;left:70%;width:32%}
.collection-preview.is-new{animation:accessory-pop .5s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes accessory-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes accessory-sway{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2px)}}
@keyframes accessory-sway-side{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.collection-preview.is-new,.kobi-accessory{animation:none!important}}

/* Crowd runner (3D) */
.preview-crowd{display:flex;align-items:center;gap:3px;color:#167c68}
.preview-crowd .ui-icon{width:16px;height:16px}
.crowd-scene{position:relative;width:100%;height:min(44vh,300px);margin:0 0 12px;border-radius:24px;overflow:hidden;background:linear-gradient(#bfeefb,#7fd6b8);box-shadow:0 6px 0 #cfe3da,0 16px 28px rgba(21,57,58,.14)}
.crowd-scene canvas{display:block;width:100%!important;height:100%!important}
.crowd-scene.crowd-fallback{background:linear-gradient(#cfeefb,#8fdcc0)}
.crowd-count{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;color:#075f5b;background:#dff6ef;font-size:18px;font-weight:900}
.crowd-count .ui-icon{width:18px;height:18px}
.crowd-question{display:grid;place-items:center;margin:2px 0 10px}
.crowd-track{position:relative;margin:0 0 10px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.crowd-track .crowd-scene{height:min(50vh,340px);margin:0}
.crowd-track:active{cursor:grabbing}
.crowd-hint{margin:0;text-align:center;color:var(--muted);font-size:13px;font-weight:800}

/* Uniform press feedback for buttons missing :active */
.collection-card button:not(:disabled):active,
.bottom-nav button:active,
.table-choice:active,
.factor-button:not(:disabled):active,
.expression-card:not(:disabled):active,
.collection-home-row:active,
.icon-button:active,
.text-button:active,
.league-teaser:active,
.secondary-button:active,
.danger-button:active{transform:translateY(2px)}

::selection{background:#5b45e6;color:#fff}
input{caret-color:#5b45e6}

/* Future sections */
.future-home-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:48px;margin:12px 0;padding:8px 12px;border:2px dashed #cfd3e6;border-radius:16px;background:#f4f5fb;box-shadow:0 4px 0 #e6e8f4;text-align:left;cursor:pointer}
.future-home-icon{width:36px;height:36px;display:grid;place-items:center}
.future-home-icon .ui-icon{width:26px;height:26px;color:#8a90ab}
.future-home-row strong{color:var(--ink);font-size:14px}
.future-home-row small{display:block;color:var(--muted);font-size:12px;font-weight:800}
.future-home-row>b{color:var(--muted)}
.future-screen{padding-top:max(16px,env(safe-area-inset-top))}
.future-intro{margin:12px 0 4px}
.future-intro h1{margin:2px 0 6px;font-size:24px}
.future-intro p{margin:0;color:var(--muted);font-size:13px;font-weight:700;line-height:1.4}
.future-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0;padding-bottom:4px}
.future-card{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-height:112px;padding:12px 8px;border:2px solid #e2e4f0;border-radius:20px;background:#f1f2f9;box-shadow:0 4px 0 #e2e4f0;cursor:pointer}
.future-card-lock{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#e4e6f1;color:#9aa0b8}
.future-card-lock .ui-icon{width:20px;height:20px}
.future-card-title{color:#6d7390;font-size:12px;font-weight:850;line-height:1.25;text-align:center}
.future-card-badge{padding:3px 9px;border-radius:999px;background:#e4e6f1;color:#7c839f;font-size:10px;font-weight:850;letter-spacing:.02em}
.future-plans{margin:8px 0 18px;padding:14px;border:2px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 4px 0 #ece7f9}
.future-plans>strong{display:block;margin-bottom:8px;color:var(--ink);font-size:14px}
.future-plans ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.future-plans li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:800;line-height:1.35}
.future-plans li .ui-icon{width:16px;height:16px;color:#3fbfa0}
.future-dialog>div{grid-template-columns:1fr}
.future-dialog-icon{color:#6a7192;background:#eef0f8}
.future-card:active,.future-home-row:active{transform:translateY(2px)}
@media(max-width:360px){.future-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.future-card{padding:10px 6px;min-height:104px}.future-card-title{font-size:11px}}
@media(prefers-reduced-motion:reduce){.future-card,.future-home-row{transition:none}}

/* Parent / teacher feedback */
.feedback-card{margin-top:20px;padding:16px;border:2px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}
.feedback-card h2{margin:0 0 6px;font-size:18px}
.feedback-intro{margin:0 0 12px;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.4}
.feedback-card fieldset{margin:0 0 12px;padding:0;border:0}
.feedback-card legend{padding:0;margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:850}
.feedback-roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feedback-role{min-height:48px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);font:850 13px/1.2 inherit;cursor:pointer}
.feedback-role.selected{border-color:var(--purple);color:var(--purple);background:#efeafe}
.feedback-stars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.feedback-star{min-height:48px;display:grid;place-items:center;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}
.feedback-star .ui-icon{width:24px;height:24px;color:#c9cde0}
.feedback-star.selected{border-color:#f0b429;background:#fff7e6}
.feedback-star.selected .ui-icon{color:#c18a0b;fill:#ffd451}
.feedback-card textarea{width:100%;min-height:80px;padding:12px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:700 13px/1.4 inherit;resize:vertical}
.feedback-card .primary-button{width:100%;margin-top:12px}
.feedback-card.is-done{display:grid;justify-items:center;gap:8px;text-align:center}
.feedback-done-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#157965;background:#dff8f1}
.feedback-done-icon .ui-icon{width:26px;height:26px}
.feedback-card.is-done p{margin:0;color:var(--ink);font-size:14px;font-weight:850}
.feedback-role:active,.feedback-star:active{transform:translateY(2px)}

.challenge-dates{display:flex;align-items:center;gap:8px;margin:8px 1px 0;padding:5px 2px;color:#fff;font-size:9px;font-weight:800;line-height:1.3}
.challenge-dates .ui-icon{width:20px;height:20px;flex:0 0 20px;color:#ffdf73}
.challenge-bestof{display:flex;align-items:center;gap:8px;margin:6px 1px 0;padding:5px 2px;color:#fff;font-size:9px;font-weight:800;line-height:1.3}
.challenge-bestof .ui-icon{width:20px;height:20px;flex:0 0 20px;color:#9be6d2}

/* League: peek at another player's tiger */
.league-row.is-tappable{cursor:pointer}
.league-row.is-tappable:active{transform:translateY(2px)}
.league-accessory{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;display:grid;place-items:center;background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(30,27,48,.25)}
.league-accessory svg{width:16px;height:16px}
.league-row .mini-avatar{position:relative}
.peek-dialog{text-align:center}
.peek-avatar{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 10px;border-radius:20px;background:#efeafe;color:var(--purple)}
.peek-avatar .ui-icon{width:34px;height:34px}
.peek-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;padding:0;list-style:none}
.peek-stats li{display:grid;gap:3px;padding:10px;border:2px solid var(--line);border-radius:16px;background:#fff}
.peek-stats small{color:var(--muted);font-size:11px;font-weight:800}
.peek-stats b{color:var(--ink);font-size:20px}
.peek-accessory{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:var(--ink);font-size:13px;font-weight:800}
.peek-accessory svg{width:32px;height:32px}
.peek-dialog>div{grid-template-columns:1fr}