/* Aces home — the Quest Map (index.html). Ported from the chosen prototype
   (concept A). Every rule is scoped under #home so nothing leaks into the
   skill player overlay or the lesson modules it mounts (they are appended to
   <body>, outside #home), and keyframes are q-prefixed for the same reason.
   Look: chunky sticker style — thick ink outlines, hard drop shadows, flat
   bright fills. Fonts: Grandstander (display) + Andika (body, single-storey a). */
:root{--bg:#fbf8f0;}
html,body{margin:0;height:100%;}
body{background:#fbf8f0;color:#243d38;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  overflow:hidden;-webkit-tap-highlight-color:transparent;}
#home{
  --ink:#1d2340; --ink-soft:#4b5376; --ink-faint:#8a91ad;
  --paper:#fffdf5; --white:#ffffff; --cloud:#f3f5fa; --line:#dfe3ee;
  --sun:#ffcb2f; --sun-deep:#f2a900; --coral:#ff6a4d; --coral-deep:#d9472b;
  --sea-hi:#9be8f5; --sea:#3fc3df; --sea-deep:#127fa6; --sea-dark:#0e6386; --foam:#e9fcff;
  --sand:#ffe6a6; --sand-deep:#f0c463; --palm:#3fb36b; --palm-deep:#1f7a46;
  --meadow-hi:#dcf7b4; --meadow:#a4dd78; --meadow-deep:#6fbf55; --forest:#2c7a4b; --forest-deep:#1b5434;
  --bark:#8a5a35; --bark-hi:#c98a4b; --trail:#f4ddaa; --trail-deep:#d9b46c;
  --berry:#ee4d7a; --plum:#7b55c7; --sky:#cdefff;
  --gold:#ffc21a; --gold-deep:#cf8500; --ok:#1fb26f; --ok-deep:#138552; --ok-soft:#dff8ea;
  --oops:#ff9a3c; --oops-soft:#fff0e0; --stone:#f4f6fb; --stone-edge:#b9c4d6;
  --shadow-ink: rgba(29,35,64,.9);
  
  --plank:#73441d; --plank-grain:rgba(255,255,255,.07); --plank-ink:#fff8e6;
  
  --pip-body:#23263a; --pip-beak:#ff6a4d; --pip-feet:#ff8a3d; --pip-cheek:#ffb3c1; --learn:#7b55c7;
  --fog:rgba(233,252,255,.94);
  --font-display:'Grandstander','Andika',ui-rounded,system-ui,sans-serif;
  --font-body:'Andika',ui-rounded,system-ui,sans-serif;
  --gl:max(16px, env(safe-area-inset-left,0px));
  --gr:max(16px, env(safe-area-inset-right,0px));
  --gb:env(safe-area-inset-bottom,0px);
  --gt:env(safe-area-inset-top,0px);
  
  --w-accent:var(--sea-deep); --w-accent-2:var(--sun); --w-soft:#e4f8fc;
  --w-bg-top:#a6ecf7; --w-bg-mid:#55cbe5; --w-bg-bot:#2aa8d0;}
#home[data-world="english"]{--w-accent:var(--forest); --w-accent-2:var(--berry); --w-soft:#eaf8dc;
  --w-bg-top:#e3f9c3; --w-bg-mid:#b2e386; --w-bg-bot:#8fd06a;
  --fog:rgba(240,251,226,.94);}
#home, #home *{box-sizing:border-box}
#home button:not(.topbar *){font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
#home :focus-visible{outline:4px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--white)}
#home .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#home{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
#home main{position:relative;flex:1 1 auto;min-height:0}
#home .screen{position:absolute;inset:0;display:none}
#home .screen.on{display:block}
#home.immersive .topbar{display:none}
#home .chunk{border:3px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:0 5px 0 var(--ink);min-height:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;transition:transform .12s, box-shadow .12s}
#home .chunk:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
#home .chunk svg{flex:0 0 auto}
#home .chunk.primary{background:var(--coral);color:var(--white)}
#home .chunk.go{background:var(--ok);color:var(--white)}
#home .chunk.sunny{background:var(--sun)}
#home .chunk.quiet{background:var(--cloud);box-shadow:0 4px 0 var(--ink-soft);border-color:var(--ink-soft);color:var(--ink)}
#home .lock{min-width:52px;min-height:52px;border-radius:16px;border:2px dashed var(--ink-faint);background:transparent;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--ink-soft);font-weight:700;font-size:14px}
#home .lock svg{width:22px;height:22px}
@media (max-width:700px){
#home .lock{flex-direction:column;gap:2px;padding:3px 4px;font-size:10.5px;line-height:1;min-width:56px}
#home .lock svg{width:20px;height:20px}
}
#home #map{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;
  background:linear-gradient(180deg,var(--w-bg-top) 0,var(--w-bg-mid) 900px,var(--w-bg-bot) 100%)}
#home #mapInner{position:relative;width:100%;overflow:hidden}
#home #mapSvg{position:absolute;left:0;top:0;display:block;pointer-events:none}
#home .world-head{position:absolute;left:0;right:0;top:22px;text-align:center;padding:0 var(--gr) 0 var(--gl);pointer-events:none}
#home .world-head h1{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(34px,7vw,56px);line-height:1;color:var(--white);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);letter-spacing:.5px}
#home .world-head p{margin:10px auto 0;display:inline-block;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;font-weight:700;font-size:15px;box-shadow:0 3px 0 var(--ink)}
#home .sign{position:absolute;transform:translate(-50%,-50%);width:min(360px, calc(100% - 48px));text-align:center;padding:10px 16px 11px;border:3px solid var(--ink);border-radius:14px;
  background:var(--plank);background-image:repeating-linear-gradient(180deg, transparent 0 14px, var(--plank-grain) 14px 16px);box-shadow:0 5px 0 var(--ink);color:var(--plank-ink);z-index:2}
#home .sign::before, #home .sign::after{content:"";position:absolute;bottom:-26px;width:10px;height:24px;background:var(--bark);border:3px solid var(--ink);border-top:0;z-index:-1}
#home .sign::before{left:22%}
#home .sign::after{right:22%}
#home .sign b{display:block;font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.05;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;letter-spacing:.3px}
#home .sign small{display:block;margin-top:4px;font-size:15.5px;font-weight:700;color:var(--plank-ink);line-height:1.2}
#home .stone{position:absolute;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;border:4px solid var(--ink);background:var(--stone);
  box-shadow:0 7px 0 var(--ink);display:flex;align-items:center;justify-content:center;padding:0;z-index:3;transition:transform .15s}
#home .stone:active{transform:translateY(4px)}
#home .stone .num{font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--stone-edge)}
#home .stone.s-none{background:radial-gradient(circle at 35% 30%, #fff 0 30%, var(--stone) 31%)}
#home .stone.s-practising{background:radial-gradient(circle, #fff 0 56%, transparent 57%), conic-gradient(var(--coral) 0 45%, #ffd9cf 45% 100%)}
#home .stone.s-practising .num{color:var(--coral-deep)}
#home .stone.s-done{background:radial-gradient(circle at 35% 30%, #6fe0a6 0 22%, var(--ok) 23%);box-shadow:0 7px 0 var(--ink),0 0 0 8px rgba(255,255,255,.55),0 0 34px 10px rgba(120,255,190,.75)}
#home .stone.s-mastered{background:radial-gradient(circle at 35% 30%, #fff1a8 0 22%, var(--gold) 23%);box-shadow:0 7px 0 var(--ink),0 0 0 8px rgba(255,255,255,.6),0 0 36px 12px rgba(255,214,70,.85)}
#home .stone svg.glyph{width:44px;height:44px}
#home .stone-label{position:absolute;transform:translate(-50%,0);margin-top:46px;white-space:nowrap;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:14px;font-weight:700;z-index:3;pointer-events:none;max-width:170px;overflow:hidden;text-overflow:ellipsis}
#home .due-tag{position:absolute;transform:translate(-50%,-100%);margin-top:-48px;white-space:nowrap;background:var(--plum);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:3px 10px;font-family:var(--font-display);font-weight:800;font-size:15px;z-index:4;pointer-events:none;box-shadow:0 3px 0 var(--ink)}
#home .due-tag::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:var(--plum);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
#home .sparkles{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;z-index:4}
#home .sparkles path{fill:#fff;stroke:var(--plum);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:qtwinkle 1.6s ease-in-out infinite}
#home .sparkles path:nth-child(2){animation-delay:.5s}
#home .sparkles path:nth-child(3){animation-delay:1s}
@keyframes qtwinkle{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.1);opacity:1}}
#home .stone.play{width:124px;height:124px;margin:-62px 0 0 -62px;background:none;border:0;box-shadow:none;z-index:6;color:#fff}
#home .stone.play .disc{position:absolute;inset:0;border-radius:50%;border:5px solid var(--ink);background:radial-gradient(circle at 35% 28%, #ff9b84 0 20%, var(--coral) 21%);box-shadow:0 9px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:qbounce 1.6s ease-in-out infinite}
#home .stone.play:hover .disc, #home .stone.play:focus-visible .disc{animation-play-state:paused}
#home .stone.play:active{transform:none}
#home .stone.play:active .disc{animation:none;transform:translateY(5px);box-shadow:0 4px 0 var(--ink)}
#home .stone.play svg{width:52px;height:52px;margin-left:8px}
#home .stone.play span{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:1px;margin-top:-2px;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
#home .play-ring{position:absolute;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:5px solid #fff;z-index:5;pointer-events:none;animation:qring 1.6s ease-out infinite}
@keyframes qring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes qbounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-10px) scale(1.04)}60%{transform:translateY(0) scale(.98,1.02)}}
#home .play-label{position:absolute;transform:translate(-50%,0);margin-top:72px;white-space:nowrap;background:var(--ink);color:#fff;border-radius:16px;padding:4px 14px 5px;font-family:var(--font-display);font-weight:800;font-size:18px;z-index:6;pointer-events:none;text-align:center;line-height:1.15}
#home .play-label small{display:block;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:#ffd9a0}
#home .signpost{position:absolute;width:80px;height:66px;margin:-44px 0 0 -40px;border:0;background:transparent;padding:0;z-index:4}
#home .signpost svg{width:80px;height:66px;display:block;filter:drop-shadow(0 3px 0 rgba(29,35,64,.35))}
#home .signpost:active{transform:translateY(3px)}
#home #pipWrap{position:absolute;width:104px;height:120px;margin:-60px 0 0 -52px;z-index:7;pointer-events:none;transition:left .7s cubic-bezier(.4,1.6,.5,1), top .7s cubic-bezier(.4,1.6,.5,1)}
#home #pipWrap svg{width:104px;height:120px;animation:qbob 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes qbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
#home .bubble{position:absolute;z-index:8;background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:8px 12px;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.15;box-shadow:0 4px 0 var(--ink);width:max-content;max-width:200px;pointer-events:none}
#home .bubble em{font-style:normal;color:var(--coral-deep)}
#home .bubble small{display:block;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
#home .finish{position:absolute;transform:translate(-50%,-50%);text-align:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);z-index:2;pointer-events:none}
#home .finish span{display:inline-block;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;margin-top:6px;box-shadow:0 3px 0 var(--ink)}
#home .door{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:999px;background:var(--white);box-shadow:0 4px 0 var(--ink);min-height:52px;padding:0 16px 0 6px;font-family:var(--font-display);font-weight:800;font-size:17px}
#home .door svg{width:40px;height:40px}
#home .enter .stone, #home .enter .sign, #home .enter .signpost, #home .enter .stone-label{animation:qpopIn .45s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:var(--d,0s)}
#home .enter .stone.play{animation:qpopIn .5s cubic-bezier(.3,1.6,.5,1) backwards .35s}
#home .enter #pipWrap{animation:qdrop .6s cubic-bezier(.3,1.5,.5,1) backwards .45s}
#home .enter .bubble{animation:qpopIn .4s cubic-bezier(.3,1.6,.5,1) backwards .75s}
#home .enter .world-head h1{animation:qpopIn .5s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes qpopIn{from{transform:translate(var(--tx,0),var(--ty,0)) scale(.3);opacity:0}}
#home .sign{--tx:-50%;--ty:-50%}
#home .stone-label{--tx:-50%}
@keyframes qdrop{from{transform:translateY(-120px);opacity:0}}
#home .dock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--gb));display:flex;gap:8px;z-index:20;width:max-content;max-width:calc(100% - 24px)}
#home .dock .chunk{padding:0 18px 0 10px;font-size:18px;min-height:58px}
#home .dock .chunk svg{width:36px;height:36px}
@media (max-width:440px){
#home .dock .chunk{padding:0 11px 0 5px;font-size:15px;gap:5px;min-height:54px}
#home .dock .chunk svg{width:30px;height:30px}
#home .dock{gap:6px}
}
#home .dock-fog{position:absolute;left:0;right:0;bottom:0;height:calc(104px + var(--gb));background:linear-gradient(180deg, transparent 0, var(--fog) 62%);pointer-events:none;z-index:19}
#home .find-pip{position:absolute;right:var(--gr);bottom:calc(92px + var(--gb));z-index:21;display:none;min-height:50px;padding:0 16px 0 6px;font-size:16px;box-shadow:0 4px 0 var(--ink)}
#home .find-pip svg{width:36px;height:36px}
#home .find-pip.show{display:inline-flex}
#home .pop{position:absolute;z-index:12;width:min(300px, calc(100vw - 32px));background:var(--white);border:4px solid var(--ink);border-radius:22px;box-shadow:0 7px 0 var(--ink);padding:14px 14px 16px;}
#home .pop h3{min-height:46px;display:flex;align-items:center;margin:0 50px 6px 0;font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.05}
#home .pop p{margin:4px 0 10px;font-size:14.5px;color:var(--ink-soft);line-height:1.3}
#home .pop .state{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;background:var(--cloud);border-radius:999px;padding:3px 10px 3px 4px;margin-bottom:10px}
#home .pop .state i{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
#home .pop .row{display:flex;gap:8px;flex-wrap:wrap}
#home .pop .row .chunk{flex:1 1 auto}
#home .x{position:absolute;top:8px;right:8px;width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--white);display:flex;align-items:center;justify-content:center;padding:0}
#home .x svg{width:20px;height:20px}
#home .scrim{position:fixed;inset:0;z-index:50;background:rgba(29,35,64,.45);display:none;align-items:flex-end;justify-content:center}
#home .scrim.on{display:flex}
#home .sheet{position:relative;width:100%;max-width:960px;max-height:calc(100% - 28px - var(--gt));background:var(--paper);border:4px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;display:flex;flex-direction:column;animation:qsheetUp .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes qsheetUp{from{transform:translateY(60px);opacity:0}}
@media (min-width:821px){
#home .scrim{align-items:center}
#home .sheet{border-bottom:4px solid var(--ink);border-radius:28px;max-height:calc(100% - 64px);box-shadow:0 10px 0 var(--ink)}
}
#home .sheet-head{display:flex;align-items:center;gap:12px;padding:16px 70px 10px var(--gl);position:relative}
#home .sheet-head h2{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(24px,5vw,32px);line-height:1}
#home .sheet-head svg.hicon{width:44px;height:44px;flex:0 0 auto}
#home .sheet-head .x{top:12px;right:var(--gr)}
#home .sheet-body{overflow-y:auto;overflow-x:hidden;padding:4px var(--gr) calc(24px + var(--gb)) var(--gl)}
#home .tabs{display:flex;gap:6px;padding:0 var(--gr) 10px var(--gl);flex-wrap:wrap;align-items:center}
#home .tabs button.tab{min-height:48px;padding:0 16px;border-radius:999px;border:3px solid var(--ink);background:var(--white);font-family:var(--font-display);font-weight:800;font-size:17px}
#home .tabs button.tab[aria-selected="true"]{background:var(--ink);color:#fff}
#home .yearpick{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-soft);font-weight:700}
#home .yearpick select{font:inherit;font-size:15px;min-height:44px;border:2px solid var(--ink-faint);border-radius:12px;padding:0 8px;background:var(--white);color:var(--ink)}
#home .strands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:4px 0 18px}
@media (max-width:560px){
#home .strands{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 10px;margin:0 0 10px}
#home .strand{flex:0 0 146px;scroll-snap-align:start;min-height:122px;padding:8px 10px 10px;border-radius:16px}
#home .strand svg{width:44px;height:44px}
#home .strand b{font-size:15px;overflow-wrap:anywhere}
#home .strand small{font-size:12px}
}
#home .strand{position:relative;text-align:left;border:3px solid var(--ink);border-radius:20px;background:var(--white);box-shadow:0 5px 0 var(--ink);padding:10px 12px 12px;min-height:128px;display:flex;flex-direction:column;gap:6px}
#home .strand svg{width:56px;height:56px}
#home .strand b{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.1}
#home .strand small{font-size:13px;color:var(--ink-soft);font-weight:700}
#home .strand[aria-pressed="true"]{background:var(--w-accent);color:#fff;box-shadow:0 5px 0 var(--ink), inset 0 0 0 3px #fff}
#home .strand[aria-pressed="true"] small{color:#eafaff}
#home .strand .meter{height:8px;border-radius:9px;background:rgba(29,35,64,.12);overflow:hidden;margin-top:auto}
#home .strand .meter i{display:block;height:100%;background:var(--ok)}
#home .strand[aria-pressed="true"] .meter{background:rgba(255,255,255,.35)}
#home .strand[aria-pressed="true"] .meter i{background:var(--sun)}
#home .strand-wrap{position:relative}
@media (max-width:560px){
#home .strand-wrap::after{content:"";position:absolute;right:-2px;top:0;bottom:10px;width:46px;background:linear-gradient(90deg, transparent, var(--paper) 85%);pointer-events:none}
}
#home .sec-label{margin:4px 0 8px;font-family:var(--font-display);font-weight:800;font-size:18px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#home .sec-label small{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink-soft)}
#home .topics{display:flex;flex-direction:column;gap:10px}
#home .tcard{border:3px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:0 4px 0 var(--ink);overflow:hidden}
#home .tcard.onmap{border-color:var(--ink)}
#home .thead{width:100%;display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 12px 8px 8px;border:0;background:transparent;text-align:left;border-radius:15px}
#home .thead .tmark{width:54px;height:54px;flex:0 0 auto;border-radius:14px;background:var(--w-soft);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--ink-soft)}
#home .thead .tmark svg{width:50px;height:50px}
#home .thead .tt{flex:1 1 auto;min-width:0}
#home .thead .tt b{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.1}
#home .thead .tt .place{display:inline-block;margin:0 0 3px;font-size:12.5px;font-weight:700;color:var(--white);background:var(--w-accent);border-radius:999px;padding:1px 9px}
#home .thead .tt .row2{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
#home .thead .dots{display:flex;gap:3px;flex-wrap:wrap}
#home .thead .dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}
#home .thead .tt .cnt{font-size:13px;color:var(--ink-soft);font-weight:700}
#home .thead .chev{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--cloud);display:flex;align-items:center;justify-content:center;transition:transform .2s}
#home .thead .chev svg{width:16px;height:16px}
#home .tcard.open .thead .chev{transform:rotate(180deg);background:var(--sun)}
#home .tcard .skills{display:none;padding:2px 10px 12px;border-top:2px dashed var(--line)}
#home .tcard.open .skills{display:grid}
#home .skills{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px;padding-top:10px}
#home .tcard.open .skills{padding-top:10px}
#home .sk{display:flex;align-items:center;gap:10px;text-align:left;min-height:60px;padding:6px 10px 6px 8px;border:2px solid var(--line);border-radius:14px;background:var(--white);line-height:1.2}
#home .sk:hover{border-color:var(--ink)}
#home .sk .dot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
#home .sk .dot svg{width:16px;height:16px}
#home .sk .nm{flex:1 1 auto;min-width:0;font-weight:700;font-size:15.5px}
#home .sk .nm b{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.1}
#home .sk .nm small{display:block;font-weight:400;font-size:13.5px;color:var(--ink-soft);margin-top:2px}
#home .sk .go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
#home .sk .go svg{width:18px;height:18px;margin-left:2px}
#home .sk .badge{flex:0 0 auto;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;background:#efe7ff;color:#4d2f97;border:2px solid #b9a3f0}
#home .sk .badge.due{background:#f3ebff;color:var(--plum);border-color:var(--plum)}
#home .d-none{background:var(--stone)}
#home .d-practising{background:conic-gradient(var(--coral) 0 45%, #ffe2d9 45%)}
#home .d-done{background:var(--ok)}
#home .d-mastered{background:var(--gold)}
#home .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-soft);font-weight:700;margin:0 0 14px}
@media (max-width:420px){
#home .legend{gap:4px 10px;font-size:12px}
#home .legend i{width:13px;height:13px}
}
#home .legend span{display:inline-flex;align-items:center;gap:6px}
#home .legend i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
#home .lesson-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
#home .lcard{border:3px solid var(--ink);border-radius:20px;background:var(--white);box-shadow:0 5px 0 var(--ink);overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column}
#home .lcard .thumb{background:var(--w-soft);border-bottom:3px solid var(--ink);height:120px;position:relative;display:flex;align-items:center;justify-content:center}
#home .lcard .thumb svg{height:100px;width:auto}
#home .lcard .thumb .pl{position:absolute;right:10px;bottom:10px;width:48px;height:48px;border-radius:50%;background:var(--coral);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
#home .lcard .thumb .pl svg{width:22px;height:22px;margin-left:3px}
#home .lcard .meta{padding:10px 12px 12px}
#home .lcard b{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.1}
#home .lcard small{display:block;margin-top:4px;color:var(--ink-soft);font-size:13.5px;font-weight:700}
#home .lcard .tag{position:absolute;left:10px;top:10px;font-size:12.5px;font-weight:700;border-radius:999px;padding:2px 10px;border:2px solid var(--ink);background:var(--white)}
#home .lcard .tag.ready{background:var(--ok);color:var(--white)}
#home .lesson-group{margin:0 0 20px}
#home .modal .lead2{margin:0 0 16px 4px;font-size:18px;font-weight:700;color:var(--ink-soft)}
#home .modal .row{display:flex;gap:12px;flex-wrap:wrap}
#home .modal .row .chunk{flex:1 1 160px;min-height:60px;font-size:20px}
#home .stopask{display:flex;gap:14px;align-items:center}
#home .stopask svg{width:96px;height:112px;flex:0 0 auto}
#home .bookcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
#home .bookcard{border:3px solid var(--ink);border-radius:20px;background:var(--white);box-shadow:0 5px 0 var(--ink);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-height:150px}
#home .bookcard svg{width:64px;height:64px}
#home .bookcard b{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.1}
#home .bookcard small{font-size:13.5px;color:var(--ink-soft);font-weight:700}
#home .gmsg{min-height:24px;text-align:center;margin:-6px 0 10px;font-weight:700;color:var(--coral-deep);font-size:16px}
#home .empty{display:flex;align-items:center;gap:16px;background:var(--white);border:3px dashed var(--ink-faint);border-radius:20px;padding:16px;font-size:16px;line-height:1.35}
#home .empty svg{width:84px;height:96px;flex:0 0 auto}
#home .modal{position:relative;width:min(640px, calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 10px 0 var(--ink);padding:22px 18px 22px;margin:auto;animation:qsheetUp .35s cubic-bezier(.2,1.2,.4,1)}
#home .scrim.center{align-items:center}
#home .modal h2{margin:0 56px 16px 4px;font-family:var(--font-display);font-weight:900;font-size:32px}
#home .kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
#home .kid{border:4px solid var(--ink);border-radius:24px;background:var(--white);box-shadow:0 6px 0 var(--ink);padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:180px}
#home .kid svg{width:104px;height:104px}
#home .kid b{font-family:var(--font-display);font-weight:900;font-size:26px}
#home .kid small{font-size:15px;font-weight:700;color:var(--ink-soft)}
#home .kid[aria-current="true"]{background:var(--sun)}
#home .kid.add{border-style:dashed;box-shadow:none;background:transparent;color:var(--ink-soft)}
#home .kid.add{grid-column:1/-1;min-height:84px;flex-direction:row;gap:12px}
#home .kid.add svg{width:48px;height:48px;margin:0}
#home .gate h2{margin-bottom:6px}
#home .gate p{margin:0 0 14px 4px;font-size:16px;color:var(--ink-soft)}
#home .gate .q{font-family:var(--font-display);font-weight:900;font-size:40px;text-align:center;margin:6px 0 10px}
#home .gate .ans{height:64px;border:3px solid var(--ink);border-radius:16px;background:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:36px;letter-spacing:4px;margin:0 auto 14px;max-width:220px}
#home .gate .ans.bad{animation:qshake .4s}
@keyframes qshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
#home .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:320px;margin:0 auto}
#home .keys button{min-height:58px;border:3px solid var(--ink);border-radius:16px;background:var(--white);box-shadow:0 4px 0 var(--ink);font-family:var(--font-display);font-weight:900;font-size:26px}
#home .keys button.ok{background:var(--ok);color:#fff}
#home .drawer{position:relative;width:min(560px,100%);height:100%;margin-left:auto;background:var(--white);border-left:3px solid var(--ink);overflow-y:auto;overflow-x:hidden;padding:calc(18px + var(--gt)) var(--gr) calc(28px + var(--gb)) var(--gl);animation:qslideIn .3s ease-out;font-size:16px;line-height:1.45}
@keyframes qslideIn{from{transform:translateX(40px);opacity:0}}
#home .scrim.right{align-items:stretch;justify-content:flex-end}
#home .drawer h2{margin:0 60px 4px 0;font-family:var(--font-display);font-weight:800;font-size:28px}
#home .drawer h3{font-family:var(--font-display);font-weight:800;font-size:19px;margin:22px 0 8px}
#home .drawer .lead{color:var(--ink-soft);margin:0 0 12px}
#home .drawer .x{top:calc(14px + var(--gt));right:var(--gr)}
#home .kidtabs{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
#home .kidtabs button{min-height:48px;border:2px solid var(--line);border-radius:999px;background:var(--white);display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;font-weight:700}
#home .kidtabs button svg{width:36px;height:36px}
#home .kidtabs button[aria-pressed="true"]{border-color:var(--ink);background:var(--cloud)}
#home .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#home .stat{border:2px solid var(--line);border-radius:14px;padding:8px 8px 10px;text-align:center}
#home .stat b{display:block;font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1.1}
#home .stat span{font-size:12.5px;color:var(--ink-soft);font-weight:700}
#home .stat.m b{color:var(--gold-deep)}
#home .stat.d b{color:var(--ok-deep)}
#home .stat.p b{color:var(--coral-deep)}
#home .stat.r b{color:var(--plum)}
#home .note{background:var(--cloud);border-radius:14px;padding:10px 14px;margin:10px 0 0;font-size:15px}
#home .note b{font-weight:700}
#home .how{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;margin-top:6px}
#home .how div{flex:1 1 100px;border:2px solid var(--line);border-radius:12px;padding:8px;font-size:13.5px;line-height:1.3}
#home .how div b{display:block;font-size:14.5px}
#home .setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
#home .setrow label, #home .setrow .lab{font-weight:700}
#home .setrow small{display:block;font-weight:400;color:var(--ink-soft);font-size:13.5px}
#home .setrow select{font:inherit;min-height:44px;border:2px solid var(--ink-faint);border-radius:12px;padding:0 10px;background:var(--white);color:var(--ink)}
#home .seg{display:flex;border:2px solid var(--ink-faint);border-radius:12px;overflow:hidden}
#home .seg button{min-height:44px;border:0;background:var(--white);padding:0 12px;font-weight:700;font-size:14px}
#home .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
#home .tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#home .tools button{min-height:56px;text-align:left;border:2px solid var(--line);border-radius:14px;background:var(--white);padding:8px 12px;font-weight:700;font-size:15px;line-height:1.2}
#home .tools button small{display:block;font-weight:400;color:var(--ink-soft);font-size:12.5px}
#home .tools button:hover{border-color:var(--ink)}
#home .tools button.danger{color:var(--coral-deep)}
@media (max-width:420px){
#home .tools{grid-template-columns:1fr}
#home .stats{grid-template-columns:repeat(2,1fr)}
}
#home .toast{position:fixed;left:50%;bottom:calc(92px + var(--gb));transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;border-radius:16px;padding:12px 18px;font-weight:700;font-size:15.5px;max-width:calc(100% - 32px);width:max-content;line-height:1.3;display:none}
#home .toast.on{display:block;animation:qsheetUp .3s}
@media (prefers-reduced-motion: reduce){
#home, #home *, #home *::before, #home *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   Real-home additions (beyond the prototype)
   ===================================================================== */
#home a:not(.topbar *){color:inherit}
#home a.chunk, #home a.door{text-decoration:none}
@media (max-width:370px){
  #home .lock{min-width:50px}
}
#home .child-chip .av, #home .kidrow .av{display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:900;font-size:21px;border:3px solid var(--ink);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}

/* map: sea / meadow texture lives on the scroller, zones draw the rest */
#home #map{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cpath d='M6 20q7-7 14 0t14 0' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' opacity='.35'/%3E%3Cpath d='M52 48q7-7 14 0t14 0' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg,var(--w-bg-top) 0,var(--w-bg-mid) 900px,var(--w-bg-bot) 100%);
  background-attachment:local,local}
#home[data-world="english"] #map{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M10 20q2-6 0-10M14 20q1-7 4-10M40 54q2-6 0-10M44 54q1-7 4-10' stroke='%235fae52' stroke-width='2.4' fill='none' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg,var(--w-bg-top) 0,var(--w-bg-mid) 900px,var(--w-bg-bot) 100%);
  background-attachment:local,local}
#home .zone{position:absolute;left:0;width:100%;pointer-events:none}
#home .zone > *{pointer-events:auto}
#home .zone > .zsvg, #home .zone > .stone-label, #home .zone > .due-tag, #home .zone > .sparkles,
#home .zone > .play-ring, #home .zone > .play-label, #home .zone > .bubble, #home .zone > .finish,
#home .zone > .world-head, #home .zone > .sign{pointer-events:none}
#home .zsvg{position:absolute;left:0;top:0;display:block}
/* labels: two short lines under a stone */
#home .stone-label{white-space:normal;text-align:center;width:max-content;max-width:150px;line-height:1.15;border-radius:12px;padding:2px 10px 3px;font-size:13.5px}
#home .stone-label.soft{color:var(--ink-soft);border-color:var(--ink-faint);background:rgba(255,255,255,.85)}
/* practising: the ring fills with practiceProgress */
#home .stone.s-practising{background:radial-gradient(circle, #fff 0 56%, transparent 57%), conic-gradient(var(--coral) 0 var(--p,45%), #ffd9cf var(--p,45%) 100%)}
/* coming soon: no lesson module yet — soft, dashed, still tappable for a card */
#home .stone.s-soon{background:radial-gradient(circle at 35% 30%, #fff 0 30%, #eef1f7 31%);border-style:dashed;border-color:var(--ink-faint);box-shadow:0 5px 0 rgba(29,35,64,.25)}
#home .stone.s-soon .num{color:var(--ink-faint)}
/* PLAY with nothing to play yet */
#home .stone.play.soon .disc{background:radial-gradient(circle at 35% 28%, #fff 0 20%, #e4e8f2 21%);animation:none;border-style:dashed;border-color:var(--ink-soft);box-shadow:0 6px 0 rgba(29,35,64,.35)}
#home .stone.play .soon-t{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--ink-soft);-webkit-text-stroke:0;letter-spacing:1px}
#home .play-ring.soon{display:none}
/* Pip is a button: tap him and he hops (and says a recorded line) */
#home #pipWrap{pointer-events:auto;border:0;background:transparent;padding:0;cursor:pointer;border-radius:24px}
#home #pipWrap.hop svg{animation:qhop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes qhop{0%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(-6deg)}100%{transform:translateY(0)}}
#home .pop .soon-note{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-weight:700;color:var(--ink);background:var(--cloud);border-radius:14px;padding:8px 10px}
#home .pop .soon-note svg{flex:0 0 auto}
#home .pop .row .chunk{font-size:17px;padding:0 14px}

/* Adventures sheet: strands → topics → a flat list of skills per topic */
#home .tabs .yearnote{margin-left:auto;font-size:14px;font-weight:700;color:var(--ink-soft)}
#home .tsec{border:3px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:0 4px 0 var(--ink);margin:0 0 14px;overflow:hidden}
#home .tsec .thead{border-bottom:2px dashed var(--line);border-radius:0}
#home .tsec .skills{display:grid;padding:10px 10px 12px}
#home .sk{width:100%;cursor:pointer}
#home .sk.soon{background:var(--cloud);border-style:dashed;cursor:default}
#home .sk.soon .nm b{color:var(--ink-soft)}
#home .sk .badge.soon{background:var(--white);color:var(--ink-soft);border-color:var(--ink-faint)}
#home .d-soon{background:#fff;border-style:dashed!important;border-color:var(--ink-faint)!important}
#home .le-lead{margin:0 0 14px;font-size:16px;color:var(--ink-soft);font-weight:700}
#home .lcard{cursor:pointer}
#home .lcard .thumb svg.pipthumb{height:84px}
#home .empty{margin-bottom:18px}

/* grown-ups drawer additions */
#home .kidrow{display:flex;align-items:center;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
#home .kidrow .av{width:44px;height:44px;border-radius:50%;flex:0 0 auto}
#home .kidrow b{font-family:var(--font-display);font-weight:800;font-size:20px}
#home .kidswitch{margin-left:auto;min-height:48px;display:inline-flex;align-items:center;padding:0 14px;border:2px solid var(--line);border-radius:999px;font-weight:700;text-decoration:none}
#home .kidswitch:hover{border-color:var(--ink)}
#home .drawer .h3s{font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--ink-soft)}
#home .tools a, #home .tools button{display:block;min-height:56px;text-align:left;border:2px solid var(--line);border-radius:14px;background:var(--white);padding:8px 12px;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;color:var(--ink)}
#home .tools a small, #home .tools button small{display:block;font-weight:400;color:var(--ink-soft);font-size:12.5px}
#home .tools a:hover, #home .tools button:hover{border-color:var(--ink)}
#home .tools .danger{color:var(--coral-deep)}

/* loader (while signing in / fetching the catalogue) */
#home #loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--paper);text-align:center;padding:24px}
#home #loader .spin{width:46px;height:46px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--ok);animation:qspin .9s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
#home #loader .lmsg{font-weight:bold;color:var(--ink-soft);font-size:16px}
#home #loader .lerr{display:none;max-width:340px}
#home #loader .lerr .ltitle{font-weight:bold;color:var(--coral-deep);font-size:16px;margin:0 0 6px}
#home #loader .lerr .ldetail{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px;word-break:break-word}
#home #retryBtn{background:var(--ok);color:#fff;font-weight:bold;font-size:15px;border:0;border-radius:999px;padding:12px 26px;min-height:48px}
#home .sk .nm .badge{display:inline-block;margin-top:5px}
@media (max-width:480px){ #home .how div{flex:1 1 calc(50% - 6px)} }
/* very narrow phones: dock buttons stack icon over label so three fit */
@media (max-width:380px){
  #home .dock{gap:6px}
  #home .dock .chunk{flex-direction:column;gap:0;min-height:58px;padding:3px 10px 4px;font-size:13.5px;line-height:1.05}
  #home .dock .chunk svg{width:26px;height:26px}
}
/* short screens: keep the whole gate keypad on screen */
@media (max-height:640px){
  #home .modal{padding:14px 14px 16px}
  #home .modal h2{font-size:26px;margin-bottom:6px}
  #home .gate p{margin-bottom:6px;font-size:14px}
  #home .gate .q{font-size:30px;margin:2px 0 6px}
  #home .gate .ans{height:48px;font-size:28px;margin-bottom:8px}
  #home .gate .gmsg{min-height:18px;margin:-4px 0 6px;font-size:14px}
  #home .keys{gap:7px}
  #home .keys button{min-height:48px;font-size:22px}
}
#home .stone-label{max-width:160px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* shared Aces header (site-header.css): only the notch padding here. The
   grown-ups lock sits at the end of the dock, a quiet dashed key. */
#home > .topbar{padding-top:calc(14px + var(--gt))}
#home .dock .lock{align-self:center;min-height:52px;background:rgba(255,255,255,.88)}
@media (max-width:560px){
  #home .dock .lock{min-width:48px;padding:0 10px}
  #home .dock .lock span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}