:root {
  color-scheme: light;
  --ink: #1f2746;
  --muted: #697294;
  --surface: #ffffff;
  --background: #f8f5ff;
  --lavender: #eee7ff;
  --purple: #6b4ce6;
  --purple-dark: #4e35bd;
  --mint: #dff7e9;
  --green: #168653;
  --gold: #ffc94d;
  --coral: #ff8c76;
  --border: #e5def4;
  --shadow: 0 14px 30px rgba(65, 43, 120, .11);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: radial-gradient(circle at 7% 0%, #e3f8f0 0 9%, transparent 25%), var(--background);
  font-family: Inter, ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }

button:focus-visible, a:focus-visible { outline: 3px solid #ffb100; outline-offset: 3px; }

.app-shell { max-width: 1220px; margin: 0 auto; padding: 22px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}

.brand { display: flex; align-items: center; gap: 11px; font-size: 1.13rem; font-weight: 850; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--purple); color: white; font-size: 1.5rem; box-shadow: 0 7px 17px #6b4ce65c; }
.parent-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font-size: .86rem; }
.parent-space-button { cursor:pointer; font:inherit; }.parent-space-button:hover { color:var(--purple); box-shadow:0 5px 13px rgba(65,43,120,.08); }
.avatar { display:grid; place-items:center; width: 25px; height:25px; border-radius: 50%; background: var(--lavender); color: var(--purple); font-size: .8rem; }

.profile-switcher { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 24px; }
.profile-tab { display: flex; flex: 1 0 218px; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; text-align: left; border: 1px solid var(--border); border-radius: 18px; background: #fff; color: var(--ink); transition: .18s ease; }
.profile-tab:hover { transform: translateY(-1px); box-shadow: 0 7px 17px rgba(65, 43, 120, .09); }
.profile-tab.active { border-color: var(--purple); background: #f7f4ff; box-shadow: 0 5px 0 #d9cffd; }
.profile-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--mint); font-size: 1.25rem; }
.profile-tab:nth-child(2) .profile-icon { background: #fff2cf; }
.profile-tab strong, .profile-tab span { display:block; }
.profile-tab strong { font-size: .94rem; }
.profile-tab span { color: var(--muted); font-size: .77rem; margin-top: 2px; }

.dashboard-grid { display:grid; grid-template-columns: 1.58fr .9fr; gap: 22px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.welcome-card { position:relative; overflow:hidden; padding: clamp(24px, 5vw, 42px); min-height: 310px; background: linear-gradient(135deg, #fff 0%, #f2edff 100%); }
.welcome-card::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:#d8fbec; right:-85px; top:-75px; opacity:.82; }
.eyebrow { margin:0 0 11px; color: var(--purple); font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
h1 { position:relative; z-index:1; max-width:610px; margin:0; font-size:clamp(1.7rem, 4vw, 2.65rem); line-height:1.08; letter-spacing:-.055em; }
.intro { position:relative; z-index:1; max-width:550px; margin:16px 0 23px; color:var(--muted); font-size:1.02rem; line-height:1.6; }
.primary-action { position:relative; z-index:1; border:0; border-radius:14px; background:var(--purple); color:white; padding:13px 18px; cursor:pointer; font-weight:800; box-shadow:0 7px 0 var(--purple-dark); transition:transform .15s ease; }
.primary-action:hover { transform:translateY(-2px); }
.primary-action:active { transform:translateY(3px); box-shadow:0 3px 0 var(--purple-dark); }

.level-card { padding:25px; display:flex; flex-direction:column; }
.level-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.level-heading h2, .section-heading h2 { margin:0; letter-spacing:-.035em; font-size:1.14rem; }
.level-heading span { display:block; color:var(--muted); font-size:.82rem; margin-top:4px; }
.level-badge { flex:0 0 auto; padding:7px 9px; border-radius:10px; background:var(--lavender); color:var(--purple); font-weight:850; font-size:.78rem; }
.level-number { margin:23px 0 5px; font-size:3.5rem; font-weight:900; line-height:.9; letter-spacing:-.07em; color:var(--purple); }
.level-label { color:var(--muted); font-weight:700; }
.progress-track { height:11px; margin:19px 0 10px; border-radius:999px; overflow:hidden; background:#ebe7f4; }
.progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--purple), #9c84ff); transition:width .45s ease; }
.level-footnote { margin-top:auto; color:var(--green); font-size:.85rem; font-weight:750; }

.section-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:31px 0 14px; }
.section-heading p { margin:5px 0 0; color:var(--muted); font-size:.9rem; }
.text-link { padding:0; color:var(--purple); background:none; border:0; cursor:pointer; font-weight:800; }
.activity-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.activity { min-height:202px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--border); border-radius:20px; background:white; box-shadow:0 7px 18px rgba(65,43,120,.06); }
.activity-emoji { display:grid; place-items:center; height:48px; width:48px; margin-bottom:14px; border-radius:15px; background:#fff1c9; font-size:1.55rem; }
.activity:nth-child(2) .activity-emoji { background:#e2f8ed; }
.activity:nth-child(3) .activity-emoji { background:#eee7ff; }
.activity h3 { margin:0; font-size:1rem; letter-spacing:-.02em; }
.activity p { margin:7px 0 15px; color:var(--muted); font-size:.84rem; line-height:1.45; }
.activity button { margin-top:auto; padding:0; border:0; color:var(--purple); background:transparent; cursor:pointer; font-weight:850; }

.world-card { padding:24px; margin-top:22px; overflow:hidden; background:linear-gradient(135deg, #ffffff, #eefaf5); }
.world-map { position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:13px; padding:13px 0 2px; }
.world-map::before { content:""; position:absolute; top:50px; left:9%; right:9%; height:7px; border-radius:999px; background:repeating-linear-gradient(90deg, #d7c8ff 0 16px, transparent 16px 26px); }
.world-stop { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:123px; padding:11px 6px; border:0; border-radius:17px; background:transparent; color:var(--ink); cursor:pointer; }
.world-stop:hover { background:rgba(255,255,255,.78); transform:translateY(-3px); }.world-stop span { display:grid; place-items:center; width:55px; height:55px; border-radius:50%; background:#fff; box-shadow:0 6px 13px rgba(64,52,108,.14); font-size:1.65rem; }.world-stop.current span { outline:4px solid #bdaeff; animation:world-pulse 1.8s ease-in-out infinite; }.world-stop.complete span { background:#e2f8ed; }.world-stop strong { font-size:.82rem; }.world-stop small { color:var(--muted); font-size:.7rem; }
@keyframes world-pulse { 50% { transform:scale(1.08); box-shadow:0 0 0 8px rgba(156,132,255,.17); } }

.fun-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:22px; }
.fun-card { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:13px; min-height:166px; padding:18px; border-radius:20px; border:1px solid var(--border); background:white; box-shadow:0 7px 18px rgba(65,43,120,.06); }.fun-card.daily-card { background:#fff9e8; }.fun-card.collection-card { background:#f5efff; }.fun-card.family-card { background:#eafbF1; }.fun-icon { display:grid; place-items:center; height:42px; width:42px; border-radius:13px; background:#fff; font-size:1.35rem; }.fun-card .eyebrow { margin:1px 0 4px; font-size:.67rem; }.fun-card h3 { margin:0; font-size:.94rem; letter-spacing:-.02em; }.fun-card p:not(.eyebrow) { margin:6px 0 12px; color:var(--muted); font-size:.77rem; line-height:1.4; }.fun-card .secondary-action { grid-column:1 / -1; width:max-content; align-self:end; padding:8px 10px; font-size:.78rem; }

.path-card { padding:24px; margin-top:21px; }

.profiles-hero { margin:10px 0 22px; padding:28px clamp(22px, 5vw, 42px); border-radius:25px; background:linear-gradient(135deg, #f1ebff, #e5f9f0); }.profiles-hero h1 { max-width:none; font-size:clamp(1.7rem, 4vw, 2.35rem); }.profiles-hero p:last-child { max-width:600px; margin:12px 0 0; color:var(--muted); line-height:1.55; }
.profile-management-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.profile-settings-card { padding:23px; }.role-tag { padding:6px 9px; border-radius:9px; background:var(--lavender); color:var(--purple); font-size:.75rem; font-weight:850; }.parent-profile-form, .add-child-form { display:grid; gap:14px; }.parent-profile-form { grid-template-columns:1fr 1fr; }.profile-settings-card label, .profile-fields label { display:grid; gap:6px; color:var(--muted); font-size:.77rem; font-weight:750; }.profile-input { width:100%; min-height:40px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }.profile-input:focus { outline:3px solid #dfd6ff; border-color:var(--purple); }.add-child-form { grid-template-columns:minmax(0, 1fr) 102px; align-items:end; }.add-child-form .primary-action { grid-column:1 / -1; width:max-content; }.profile-privacy-note { margin:17px 0 0; padding:10px 11px; border-radius:11px; background:#f5f2fb; color:var(--muted); font-size:.78rem; line-height:1.45; }
.children-section { margin-top:24px; }.child-profile-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }.child-profile-card { padding:18px; border:1px solid var(--border); border-radius:19px; background:white; box-shadow:0 7px 18px rgba(65,43,120,.06); }.child-profile-card.selected-profile { border-color:var(--purple); box-shadow:0 0 0 3px #e6defe, 0 7px 18px rgba(65,43,120,.07); }.child-profile-heading { display:flex; align-items:center; gap:10px; }.child-profile-heading > div { flex:1; }.child-profile-heading strong, .child-profile-heading span { display:block; }.child-profile-heading strong { font-size:.98rem; }.child-profile-heading span { margin-top:2px; color:var(--muted); font-size:.77rem; }.profile-icon.large { width:44px; height:44px; font-size:1.4rem; }.profile-fields { display:grid; grid-template-columns:1fr 78px 74px; gap:10px; margin-top:16px; }.icon-select { font-size:1rem; }
.path-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; margin-top:21px; }
.path-step { position:relative; padding-top:32px; color:var(--muted); font-size:.76rem; font-weight:700; }
.path-step::before { content:""; position:absolute; left:0; top:0; width:100%; height:7px; border-radius:999px; background:#ebe7f4; }
.path-step::after { content:""; position:absolute; left:0; top:0; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#ebe7f4; color:#8a82a6; transform:translateY(-10px); }
.path-step.done::before, .path-step.done::after { background:var(--mint); color:var(--green); }
.path-step.done::after { content:"✓"; }
.path-step.current::before { background:linear-gradient(90deg, var(--purple) 58%, #ebe7f4 58%); }
.path-step.current::after { content:"•"; background:var(--purple); color:white; font-size:1.35rem; }

.session { max-width:820px; margin:0 auto; }
.session-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.back-button { border:0; background:transparent; color:var(--purple); padding:6px 0; cursor:pointer; font-weight:800; }
.session-card { padding:clamp(18px, 5vw, 36px); }
.session-card h1 { font-size:clamp(1.55rem, 3vw, 2.2rem); }
.session-layout { display:grid; grid-template-columns:minmax(260px, 1fr) minmax(190px, .65fr); gap:27px; align-items:center; margin-top:24px; }
.board { display:grid; grid-template-columns:repeat(8, 1fr); aspect-ratio:1; overflow:hidden; border:9px solid #513b91; border-radius:13px; box-shadow:0 11px 23px rgba(66,46,117,.25); }
.square { display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:0; border:0; font-family:Georgia, serif; font-size:clamp(1rem, 4.5vw, 2.35rem); cursor:pointer; }
.square.light { background:#f3e6ca; }.square.dark { background:#ac8a65; }
.piece.white { color:#fffdf8; text-shadow:0 1px 0 #766650, 1px 0 #766650, -1px 0 #766650; }.piece.black { color:#29223b; text-shadow:0 1px #725b5a; }
.square.selected { box-shadow:inset 0 0 0 4px #ffcf4c; }
.square.can-move::after { content:""; position:absolute; width:26%; aspect-ratio:1; border-radius:50%; background:rgba(46, 121, 83, .75); }
.square.can-capture { box-shadow:inset 0 0 0 4px #ef654d; }
.square { position:relative; }
.square .piece { position:relative; z-index:1; }
.moving-piece { position:fixed; z-index:20; display:grid; place-items:center; pointer-events:none; font-family:Georgia, serif; color:#fffdf8; text-shadow:0 1px 0 #766650, 1px 0 #766650, -1px 0 #766650; transition:transform .42s cubic-bezier(.2,.85,.25,1); will-change:transform; }
.moving-piece.black { color:#29223b; text-shadow:0 1px #725b5a; }
.moving-piece.capture { filter:drop-shadow(0 0 10px #ffca47); }
.capture-burst { position:fixed; z-index:21; display:grid; place-items:center; pointer-events:none; color:#7c3b1b; font-family:ui-rounded, "Nunito", system-ui, sans-serif; font-size:clamp(.64rem, 2vw, .9rem); font-weight:900; text-shadow:0 1px 0 white; animation:capture-burst .58s cubic-bezier(.18,.78,.26,1) forwards; }
.capture-burst::before, .capture-burst::after { position:absolute; color:#ffc94d; font-family:Georgia, serif; font-size:1.45rem; content:"✦"; }
.capture-burst::before { transform:translate(-21px, -16px) rotate(-18deg); }.capture-burst::after { transform:translate(23px, 16px) rotate(24deg); }
@keyframes capture-burst { 0% { opacity:0; transform:scale(.35) rotate(-7deg); } 25% { opacity:1; transform:scale(1.18) rotate(4deg); } 100% { opacity:0; transform:scale(1.75) translateY(-9px) rotate(-4deg); } }
.capture-burst.major-capture { color:#4e35bd; font-size:clamp(.78rem, 2.3vw, 1.05rem); animation:major-capture .72s cubic-bezier(.14,.72,.18,1) forwards; }
.capture-burst.major-capture::before, .capture-burst.major-capture::after { color:#9c84ff; content:"⚡"; font-family:inherit; font-size:1.2rem; }
@keyframes major-capture { 0% { opacity:0; transform:scale(.2) rotate(-13deg); } 30% { opacity:1; transform:scale(1.34) rotate(5deg); } 58% { opacity:1; transform:scale(1.04) rotate(-3deg); } 100% { opacity:0; transform:scale(1.85) translateY(-13px); } }
.capture-burst.royal-capture { color:#8a3e14; font-size:clamp(.84rem, 2.7vw, 1.15rem); animation:royal-capture .9s cubic-bezier(.12,.84,.24,1) forwards; }
.capture-burst.royal-capture::before, .capture-burst.royal-capture::after { color:#ffb100; content:"♛"; font-size:1.65rem; text-shadow:0 0 11px #ffe8a0; }
@keyframes royal-capture { 0% { opacity:0; transform:scale(.18) rotate(-18deg); } 28% { opacity:1; transform:scale(1.45) rotate(7deg); } 60% { opacity:1; transform:scale(1.08) rotate(-4deg); } 100% { opacity:0; transform:scale(2.2) translateY(-18px) rotate(10deg); } }
.board.is-thinking { filter:saturate(.88); }
.coach-panel { padding:20px; border-radius:19px; background:#f3efff; }
.coach-avatar { display:grid; place-items:center; height:46px; width:46px; border-radius:15px; background:var(--purple); color:white; font-size:1.45rem; }
.coach-avatar.mascot { background:linear-gradient(135deg, #7658ef, #9c84ff); animation:mascot-bob 2.4s ease-in-out infinite; box-shadow:0 8px 16px rgba(107,76,230,.25); }
@keyframes mascot-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(3deg); } }
.coach-panel h2 { margin:12px 0 6px; font-size:1.09rem; }.coach-panel p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.turn-label { display:inline-block; margin-top:12px; padding:6px 9px; border-radius:9px; background:#e2f8ed; color:#17663f; font-size:.78rem; font-weight:800; }
.turn-label.alert { background:#fff1c9; color:#875b00; }
.treasure { position:absolute; z-index:2; color:#ffd149; font-size:clamp(.65rem, 2.6vw, 1.4rem); text-shadow:0 1px 0 #825a17; animation:treasure-twinkle 1.15s ease-in-out infinite; }.treasure-square { box-shadow:inset 0 0 0 3px rgba(255,209,73,.75); } @keyframes treasure-twinkle { 50% { transform:scale(1.25) rotate(18deg); filter:brightness(1.22); } }
.game-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:19px; }
.secondary-action { border:1px solid var(--border); border-radius:12px; background:white; padding:10px 12px; color:var(--ink); cursor:pointer; font-weight:750; }
.secondary-action:disabled, .primary-action:disabled { cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; }
.outcome { margin-top:19px; padding:14px; border-radius:13px; background:var(--mint); color:#17663f; font-weight:760; line-height:1.45; }
.hidden { display:none; }

.replay-empty { max-width:660px; margin:54px auto; text-align:center; }.replay-empty p { max-width:500px; margin:16px auto 22px; color:var(--muted); line-height:1.55; }
.replay-board { margin-bottom:16px; }.replay-timeline { display:flex; flex-wrap:wrap; gap:7px; min-height:35px; padding:8px; border-radius:12px; background:#eee9f7; }.replay-dot { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#d4cde2; color:#766e89; font-size:.7rem; font-weight:800; }.replay-dot.seen { background:#bcecd3; color:#17663f; }.replay-dot.active { background:var(--purple); color:white; box-shadow:0 0 0 4px #ded5ff; }
.replay-panel { background:linear-gradient(160deg, #f2edff, #ecfaf4); }.replay-move-name { margin:0 0 14px !important; color:var(--purple) !important; font-weight:800; }.analysis-note { margin-top:13px; padding:13px; border-radius:14px; background:white; color:var(--ink); }.analysis-note strong { color:var(--purple); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }.analysis-note p { margin-top:6px !important; }.replay-count { margin:14px 0 0; color:var(--muted); font-size:.79rem; font-weight:700; }

@media (max-width: 770px) {
  .dashboard-grid, .session-layout { grid-template-columns:1fr; }
  .activity-grid { grid-template-columns:1fr; }
  .fun-grid { grid-template-columns:1fr; }
  .profile-management-grid, .child-profile-grid { grid-template-columns:1fr; }.parent-profile-form { grid-template-columns:1fr; }
  .world-map { grid-template-columns:repeat(2,1fr); }.world-map::before { display:none; }
  .activity { min-height:166px; }
  .path-steps { grid-template-columns:repeat(2, 1fr); row-gap:17px; }
}
@media (max-width: 450px) {
  .app-shell { padding:16px; }
  .parent-chip { font-size:0; padding:7px; }.parent-chip .avatar { width:27px; height:27px; }
  .welcome-card { min-height:290px; }
  .profile-tab { flex-basis:190px; }
  .profile-fields { grid-template-columns:1fr 76px 70px; }
}