/* Key Dash — page + HUD styles. The UI speaks the game's language: everything you can press is a keycap. */
:root { --bg:#070c22; --ink:#f3f5ff; --muted:#8e97c4; --line:rgba(255,255,255,.12); --glass:rgba(10,16,48,.86); --sky:#5c9cff; --cobalt:#1c54de; --gold:#ffc657; --coral:#ff5a4a;
  --cap:#e9dcc0; --cap2:#d6c8a8; --capEdge:#a8997a; --capInk:#4b4238; --fontHe:"Heebo","Segoe UI",Arial,sans-serif; --mono:"JetBrains Mono",Consolas,"Courier New",monospace; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--fontHe); overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
/* the stage is sized to the LARGE viewport, so the phone's address bar sliding away never resizes the canvas */
#stage { position:fixed; top:0; left:0; width:100%; height:100%; }
@media (pointer:coarse) { #stage { height:100lvh; } }
body { position:fixed; inset:0; }
.kd-hud { overflow:hidden; }
#stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3,5,18,.55) 100%); }
#grain { position:fixed; inset:0; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ── keycaps: the one UI element ── */
.kc { position:relative; display:inline-grid; place-items:center; padding:0 18px; min-width:54px; height:52px; border-radius:14px; border:0; cursor:pointer; user-select:none;
  font:800 18px/1 var(--fontHe); color:var(--capInk); background:linear-gradient(180deg,#f2e7cd,var(--cap) 40%,var(--cap2));
  box-shadow:0 7px 0 var(--capEdge), 0 12px 26px rgba(0,0,0,.45), inset 0 1px 0 #fff9, inset 0 -3px 0 rgba(0,0,0,.06); transition:transform .07s, box-shadow .07s; }
a.kc { text-decoration:none; }
.kc.pressed { animation:kd-press .32s cubic-bezier(.2,1.6,.4,1); }
@keyframes kd-press { 0% { transform:translateY(5px) scale(.96); } 60% { transform:translateY(-2px) scale(1.04); } 100% { transform:none; } }
.kc:active, .kc.down { transform:translateY(5px); box-shadow:0 2px 0 var(--capEdge), 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 #fff9; }
.kc.gold { background:linear-gradient(180deg,#ffe29a,#ffcb52 40%,#f3b22e); box-shadow:0 7px 0 #b07a12, 0 12px 26px rgba(255,182,58,.35), inset 0 1px 0 #fff9; color:#2b1d00; }
.kc.gold:active { box-shadow:0 2px 0 #b07a12, 0 4px 10px rgba(0,0,0,.4); }
.kc.wide { min-width:min(78vw, 360px); height:60px; font-size:21px; }
.kc.small { height:40px; min-width:40px; padding:0 12px; font-size:15px; border-radius:11px; box-shadow:0 5px 0 var(--capEdge), 0 8px 16px rgba(0,0,0,.4), inset 0 1px 0 #fff9; }
.kc.small:active { transform:translateY(4px); box-shadow:0 1px 0 var(--capEdge); }
.kc.on { background:linear-gradient(180deg,#8fb8ff,#5c9cff 40%,#3f7fe6); color:#071030; box-shadow:0 5px 0 #1c54de, 0 8px 16px rgba(28,84,222,.4), inset 0 1px 0 #fff9; }
.kc .sub { position:absolute; right:8px; bottom:6px; font:700 10px/1 var(--fontHe); color:var(--cobalt); opacity:.85; }
.kc .hint { position:absolute; left:8px; top:6px; font:600 10px/1 var(--fontHe); color:#8a7d66; }

/* ── HUD ── */
.kd-hud { position:fixed; inset:0; pointer-events:none; padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 14px); }
.kd-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:10px; }
/* the counters: a keyboard's little LED display */
.kd-led { display:inline-grid; justify-items:center; min-width:74px; padding:6px 10px 5px; border-radius:10px; background:#050816; border:1px solid #1d2a66; box-shadow:0 0 0 2px #0b1030, 0 6px 16px rgba(0,0,0,.5), inset 0 0 14px rgba(92,156,255,.12); }
.kd-led b { font:700 24px/1 var(--mono); color:#9ec1ff; text-shadow:0 0 10px rgba(92,156,255,.9); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.kd-led span { font:600 10px/1 var(--fontHe); color:#5468b0; margin-top:4px; letter-spacing:.06em; }
.kd-score { justify-self:start; } .kd-dist { justify-self:end; }
.kd-ledcol { display:grid; gap:6px; justify-items:start; }
.kd-coinled { font:800 15px var(--fontHe); color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.7); padding:2px 8px; } .kd-coinled b { font-family:var(--mono); }
/* the word bar: every typed letter is a mini keycap */
.kd-word { direction:ltr; display:flex; gap:5px; align-items:center; justify-content:center; min-width:120px; min-height:46px; padding:6px 10px; border-radius:14px; background:#141208; border:1px solid #3a3220; box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 2px 6px rgba(0,0,0,.6); }
.kd-word .k { display:grid; place-items:center; width:30px; height:32px; border-radius:7px; background:linear-gradient(180deg,#f2e7cd,#d9ccae); color:var(--capInk); font:800 17px/1 var(--mono); box-shadow:0 3px 0 var(--capEdge); animation:kd-press .16s ease-out; }
.kd-word .k.bad { background:linear-gradient(180deg,#ffb3a8,#ff7a6a); color:#5a140c; box-shadow:0 3px 0 #a83a2c; }
.kd-word .k.gold { background:linear-gradient(180deg,#ffe29a,#f3b22e); color:#2b1d00; box-shadow:0 3px 0 #b07a12; font-family:var(--fontHe); animation:kd-flip .28s ease-out; }
.kd-word .caret { width:2px; height:26px; background:var(--sky); animation:kd-blink 1s steps(2) infinite; }
@keyframes kd-press { from { transform:translateY(-6px) scale(1.15); } to { transform:none; } }
@keyframes kd-flip { from { transform:rotateX(90deg); } to { transform:none; } }
@keyframes kd-blink { 50% { opacity:0; } }
.kd-fly { position:absolute; font:800 34px var(--fontHe); color:#fff; text-shadow:0 0 18px var(--sky), 0 0 4px #fff; pointer-events:none; }
.kd-burst { position:absolute; left:50%; top:24%; transform:translate(-50%,-50%) scale(.6); opacity:0; font-weight:900; font-size:46px; letter-spacing:-.01em; text-shadow:0 4px 18px rgba(0,0,0,.5); transition:transform .18s cubic-bezier(.2,1.4,.4,1), opacity .18s; pointer-events:none; white-space:nowrap; }
.kd-burst.on { transform:translate(-50%,-50%) scale(1); opacity:1; }
.kd-burst.gold { color:var(--gold); } .kd-burst.coral { color:var(--coral); font-size:30px; } .kd-burst.sky { color:#bfd8ff; font-size:28px; }
.kd-chips { position:absolute; top:calc(env(safe-area-inset-top,0px) + 100px); left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.kd-chip { position:relative; display:grid; place-items:center; min-width:46px; height:36px; padding:0 10px; border-radius:10px; font:800 14px var(--fontHe); color:var(--capInk); background:linear-gradient(180deg,#f2e7cd,#d9ccae); box-shadow:0 4px 0 var(--capEdge), 0 6px 14px rgba(0,0,0,.4); overflow:hidden; }
.kd-chip.kavanati { background:linear-gradient(180deg,#ffe29a,#f3b22e); box-shadow:0 4px 0 #b07a12, 0 6px 14px rgba(0,0,0,.4); font-size:18px; }
.kd-chip.reveal { background:linear-gradient(180deg,#dfe9ff,#b9cdfa); box-shadow:0 4px 0 #3f62b8, 0 6px 14px rgba(0,0,0,.4); color:#1c54de; }
.kd-chip.pause { background:linear-gradient(180deg,#d4f6e6,#a9e3c9); box-shadow:0 4px 0 #5e9c80, 0 6px 14px rgba(0,0,0,.4); color:#124d3a; }
.kd-chip::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(0,0,0,.35); transform-origin:left; transform:scaleX(0); }
.kd-chip.run::after { animation:kd-drain var(--dur, 3s) linear forwards; }
@keyframes kd-drain { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.kd-threat { position:fixed; inset:0; pointer-events:none; --threat:0; box-shadow:inset 0 0 calc(var(--threat) * 160px) calc(var(--threat) * 30px) rgba(255,60,40,calc(var(--threat) * .75)); transition:box-shadow .3s; }
.kd-shout { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18%); transform:translate(-50%,20px) scale(.8); opacity:0; background:#fff; color:#b3271b; font-weight:900; font-size:26px; padding:10px 18px; border-radius:16px; border:3px solid #b3271b; box-shadow:0 10px 24px rgba(0,0,0,.5); transition:all .15s; pointer-events:none; white-space:nowrap; }
.kd-shout.on { transform:translate(-50%,0) scale(1); opacity:1; }
/* tutorial callouts: a note card pointing at something in the world */
.kd-callout { position:absolute; transform:translate(-50%,-100%); width:max-content; max-width:min(84vw, 320px); padding:12px 16px; border-radius:16px; background:#fff8e6; color:#2b2416; font:700 17px/1.35 var(--fontHe); text-align:center; box-shadow:0 14px 30px rgba(0,0,0,.5); pointer-events:none; opacity:0; transition:opacity .25s, transform .25s; }
.kd-callout.on { opacity:1; }
.kd-callout::after { content:""; position:absolute; left:50%; bottom:-10px; width:20px; height:20px; background:#fff8e6; transform:translateX(-50%) rotate(45deg); border-radius:3px; }
.kd-callout .ges { display:block; font-size:30px; line-height:1.1; margin-top:4px; animation:kd-nudge 1s ease-in-out infinite; }
.kd-callout .key { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:7px; background:linear-gradient(180deg,#f2e7cd,#d9ccae); box-shadow:0 3px 0 var(--capEdge); font:800 16px/1 var(--mono); color:var(--capInk); vertical-align:middle; margin:0 3px; }
.kd-callout .key.he { font-family:var(--fontHe); color:var(--cobalt); }
@keyframes kd-nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(10px); } }

/* ── overlays ── */
.kd-overlay { position:absolute; inset:0; pointer-events:auto; }
.kd-overlay:not([hidden]) > .kd-card, .kd-overlay:not([hidden]) > .kd-panel, .kd-overlay:not([hidden]) .kd-shop, .kd-mcard { animation:kd-in .42s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes kd-in { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
.kd-menu > .kd-card { animation:kd-in .5s cubic-bezier(.2,1.3,.4,1) both; } .kd-menu > .kd-bottom { animation:kd-in .5s .08s cubic-bezier(.2,1.3,.4,1) both; }
.kd-menu { background:linear-gradient(180deg, rgba(7,12,34,.72) 0%, rgba(7,12,34,.15) 42%, rgba(7,12,34,0) 60%, rgba(7,12,34,.6) 100%); }
.kd-menu .kd-card { position:absolute; left:0; right:0; margin:0 auto; width:min(92vw, 560px); top:calc(env(safe-area-inset-top,0px) + 4vh); display:grid; gap:10px; justify-items:center; text-align:center; padding:0 12px; box-sizing:border-box; }
.kd-menu .kd-bottom { position:absolute; left:0; right:0; margin:0 auto; width:min(92vw, 560px); bottom:calc(env(safe-area-inset-bottom,0px) + 18px); display:grid; gap:10px; justify-items:center; }
.kd-icons { gap:8px; } .kd-icons .kc.small { min-width:44px; height:38px; padding:0 10px; }
.kd-hud.in-menu .kd-top, .kd-hud.in-menu .kd-lives, .kd-hud.in-menu .kd-chips, .kd-hud.in-menu .kd-boss, .kd-hud.in-menu .kd-abilities { visibility:hidden; }
.kd-boss { position:absolute; top:calc(env(safe-area-inset-top,0px) + 100px); left:0; right:0; margin:0 auto; width:max-content; display:grid; grid-template-columns:auto 140px auto; align-items:center; gap:8px; padding:6px 12px; border-radius:12px; background:rgba(60,10,10,.75); border:1px solid rgba(255,90,74,.5); font:800 12px var(--fontHe); color:#ffd9d4; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.kd-boss .bar { height:10px; border-radius:5px; background:rgba(0,0,0,.5); overflow:hidden; } .kd-boss .bar i { display:block; height:100%; background:linear-gradient(90deg,#ff3b2f,#ff8a5a); transition:width .4s; } .kd-boss .hp { color:#ff5a4a; letter-spacing:2px; }
.kd-boss.low { animation:kd-pulse 0.6s ease-in-out infinite; }
.kd-lives { visibility:hidden; }
.kd-missions { display:grid; gap:6px; width:min(100%, 420px); justify-self:center; margin:0 auto; }
.kd-menu .kd-card > * { justify-self:center; }
.kd-mission { display:grid; grid-template-columns:1fr 90px auto; align-items:center; gap:10px; padding:7px 12px; border-radius:12px; background:var(--glass); border:1px solid var(--line); font:700 13px var(--fontHe); color:#dfe6ff; }
.kd-mission .bar { height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; } .kd-mission .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffd77a,#ffb63a); }
.kd-mission .rw { color:var(--gold); font-size:12px; } .kd-mission.done { opacity:.6; } .kd-mission.done .rw { color:#7fe3a8; }
.kd-modal { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:rgba(4,7,20,.72); backdrop-filter:blur(6px); pointer-events:auto; }
.kd-mcard { display:grid; gap:14px; justify-items:center; width:min(88vw, 360px); padding:22px 20px 20px; border-radius:24px; background:linear-gradient(180deg,#1b1711,#120f0b); border:1px solid #3a3220; box-shadow:0 30px 60px rgba(0,0,0,.6); text-align:center; }
.kd-mtitle { font:900 22px var(--fontHe); color:#fff; }
.kd-giftbox img { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); transition:transform .4s cubic-bezier(.2,1.5,.4,1); animation:kd-wiggle 2.4s ease-in-out infinite; }
.kd-giftbox.open img { transform:scale(1.15) rotate(-6deg); animation:none; }
.kd-mresult { min-height:28px; font:800 22px var(--fontHe); color:var(--gold); } .kd-mresult .rare { color:#ff7fa8; }
.kd-prof { gap:12px; } .kd-profhead { display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:center; }
.kd-profhead img { width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.kd-profname input { width:100%; font:800 20px var(--fontHe); color:#fff; background:transparent; border:0; border-bottom:2px dashed rgba(255,255,255,.25); padding:4px 2px; outline:none; } .kd-profname input:focus { border-bottom-color:var(--sky); }
.kd-profrank { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; margin-top:8px; font:800 13px var(--fontHe); color:var(--gold); }
.kd-profrank .bar { height:8px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; } .kd-profrank .bar i { display:block; height:100%; background:linear-gradient(90deg,#5c9cff,#8fb8ff); }
.kd-profsec { display:flex; justify-content:space-between; align-items:center; font:800 14px var(--fontHe); color:#dfe6ff; margin-top:4px; }
.kd-achrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .kd-achchip { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.06); font-size:15px; opacity:.45; } .kd-achchip.got { background:linear-gradient(180deg,#ffe29a,#f3b22e); opacity:1; } .kd-achcount { margin-inline-start:6px; font:800 13px var(--fontHe); color:var(--muted); }
.kd-gdesc { margin:0 0 8px; font:500 14px/1.4 var(--fontHe); color:#dfe6ff; } .kd-soon { opacity:.6; }
.kd-memhud { position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:auto; font:800 15px var(--fontHe); color:#dfe6ff; text-shadow:0 2px 6px rgba(0,0,0,.7); }
.kd-flash { position:fixed; inset:0; pointer-events:none; opacity:0; background:radial-gradient(60% 60% at 50% 40%, rgba(255,214,120,.55), rgba(255,214,120,0) 70%); }
.kd-flash.on { animation:kd-flash .7s ease-out; } @keyframes kd-flash { 0% { opacity:0; } 15% { opacity:1; } 100% { opacity:0; } }
.kd-spark { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); pointer-events:none; animation:kd-spark .7s ease-out forwards; }
@keyframes kd-spark { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--dx), var(--dy)) scale(.2); opacity:0; } }
.kd-confetti { position:absolute; width:9px; height:14px; border-radius:2px; pointer-events:none; animation:kd-confetti 1.6s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes kd-confetti { 0% { transform:translate(0,0) rotate(0); opacity:1; } 100% { transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; } }
.kd-gift { display:inline-flex; align-items:center; gap:8px; height:46px; animation:kd-wiggle 2.4s ease-in-out infinite; } .kd-gift .g { font-size:22px; }
@keyframes kd-wiggle { 0%,80%,100% { transform:rotate(0); } 85% { transform:rotate(-6deg) scale(1.05); } 90% { transform:rotate(6deg) scale(1.05); } 95% { transform:rotate(-3deg); } }
.kd-ach { position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); left:50%; transform:translate(-50%,-140%); display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:16px; background:linear-gradient(180deg,#ffe29a,#f3b22e); color:#2b1d00; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.2,1.3,.4,1); pointer-events:none; z-index:3; }
.kd-ach.on { transform:translate(-50%,0); } .kd-ach .ic { font-size:28px; } .kd-ach b { display:block; font:800 15px var(--fontHe); } .kd-ach small { font:600 12px var(--fontHe); opacity:.8; }
.kd-achlist { gap:10px; } .kd-grow.got .kd-gicon { background:linear-gradient(180deg,#ffe29a,#f3b22e); } .kd-grow:not(.got) { opacity:.55; }
.kd-gift { display:inline-flex; align-items:center; gap:8px; height:46px; animation:kd-wiggle 2.4s ease-in-out infinite; } .kd-gift .g { font-size:22px; }
@keyframes kd-wiggle { 0%,80%,100% { transform:rotate(0); } 85% { transform:rotate(-6deg) scale(1.05); } 90% { transform:rotate(6deg) scale(1.05); } 95% { transform:rotate(-3deg); } }
.kd-ach { position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); left:50%; transform:translate(-50%,-140%); display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:16px; background:linear-gradient(180deg,#ffe29a,#f3b22e); color:#2b1d00; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.2,1.3,.4,1); pointer-events:none; z-index:3; }
.kd-ach.on { transform:translate(-50%,0); } .kd-ach .ic { font-size:28px; } .kd-ach b { display:block; font:800 15px var(--fontHe); } .kd-ach small { font:600 12px var(--fontHe); opacity:.8; }
.kd-achlist { gap:10px; } .kd-grow.got .kd-gicon { background:linear-gradient(180deg,#ffe29a,#f3b22e); } .kd-grow:not(.got) { opacity:.55; }
.kd-menu .kd-wallet { padding:6px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--line); }
@media (min-width:900px) { .kd-menu .kd-card { top:calc(env(safe-area-inset-top,0px) + 4vh); } .kd-title .t { width:64px; height:70px; font-size:40px; } }
.kd-title { display:flex; gap:6px; direction:ltr; }
.kd-title .t { display:grid; place-items:center; width:clamp(40px, 10vw, 60px); height:clamp(44px, 11vw, 66px); border-radius:12px; background:linear-gradient(180deg,#f2e7cd,#d9ccae); color:#2d2d4e; font:900 clamp(24px, 6.4vw, 38px)/1 var(--fontHe);
  box-shadow:0 7px 0 var(--capEdge), 0 14px 28px rgba(0,0,0,.5), inset 0 1px 0 #fff9; transform:rotate(var(--r, 0deg)); }
.kd-title .t.gap { width:14px; background:none; box-shadow:none; }
.kd-title .t:nth-child(odd) { --r:-2deg; } .kd-title .t:nth-child(even) { --r:1.5deg; }
.kd-title .t { animation:kd-float 3.4s ease-in-out infinite; } .kd-title .t:nth-child(2) { animation-delay:-.4s } .kd-title .t:nth-child(3) { animation-delay:-.8s } .kd-title .t:nth-child(5) { animation-delay:-1.2s } .kd-title .t:nth-child(6) { animation-delay:-1.6s } .kd-title .t:nth-child(7) { animation-delay:-2s } .kd-title .t:nth-child(8) { animation-delay:-2.4s }
@keyframes kd-float { 0%,100% { transform:rotate(var(--r,0deg)) translateY(0); } 50% { transform:rotate(var(--r,0deg)) translateY(-5px); } }
.kd-sub { color:#dfe6ff; font-size:17px; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.kd-how { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#dfe6ff; text-shadow:0 2px 8px rgba(0,0,0,.7); flex-wrap:wrap; justify-content:center; }
.kd-how .key { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; background:linear-gradient(180deg,#f2e7cd,#d9ccae); box-shadow:0 3px 0 var(--capEdge); font:800 18px/1 var(--mono); color:var(--capInk); }
.kd-how .key.he { font-family:var(--fontHe); color:#fff; background:linear-gradient(180deg,#8fb8ff,#3f7fe6); box-shadow:0 3px 0 #1c54de, 0 0 16px rgba(92,156,255,.8); }
.kd-how .arr { font-size:22px; color:var(--gold); }
.kd-best { color:#dfe6ff; font-size:14px; font-weight:700; min-height:18px; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.kd-langs { display:flex; gap:10px; }
.kd-over { display:grid; place-items:center; background:radial-gradient(60% 50% at 50% 50%, rgba(7,12,34,.4), rgba(7,12,34,.78)); }
.kd-over .kd-card { display:grid; gap:12px; justify-items:center; text-align:center; width:min(92vw, 440px); padding:22px 18px 20px; border-radius:24px; background:linear-gradient(180deg,#1b1711,#120f0b); border:1px solid #3a3220; box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 #ffffff14; }
.kd-over-title { font-size:clamp(20px, 5vw, 26px); font-weight:900; color:#fff; letter-spacing:.02em; }
.kd-stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.kd-stats .kd-led { min-width:70px; }
.kd-newbest { color:var(--gold); font-weight:900; font-size:18px; }
.kd-learned { color:#dfe6ff; font-size:15px; font-weight:600; min-height:4px; }
.kd-keys { display:grid; gap:4px; direction:ltr; margin-top:2px; }
.kd-krow { display:flex; gap:4px; justify-content:center; }
.kd-krow:nth-child(2) { padding-left:10px; } .kd-krow:nth-child(3) { padding-left:28px; }
.kd-key { width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font:700 12px var(--fontHe); background:#2a3466; box-shadow:0 2px 0 rgba(0,0,0,.45); color:#9aa6d8; }
.kd-key.b1 { background:#3b57b8; color:#eef2ff; } .kd-key.b2 { background:#5c9cff; color:#071030; } .kd-key.b3 { background:#ffd77a; color:#2b1d00; } .kd-key.b4 { background:#ffc12e; color:#2b1d00; box-shadow:0 2px 0 #b07a12, 0 0 10px rgba(255,193,46,.6); }
.kd-quip { color:#dfe6ff; font-size:15px; margin-top:2px; }
.kd-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:6px; }
/* word bar: the target word (word / missing modes) */
.kd-mid { display:grid; justify-items:center; gap:4px; }
.kd-word .k.cur { background:linear-gradient(180deg,#8fb8ff,#3f7fe6); color:#fff; box-shadow:0 3px 0 #1c54de, 0 0 14px rgba(92,156,255,.8); animation:kd-pulse 1s ease-in-out infinite; }
.kd-word .k.dim { opacity:.45; } .kd-word .k.blank { font-family:var(--fontHe); }
@keyframes kd-pulse { 50% { transform:translateY(-2px) scale(1.06); } }
.kd-goal { font:700 12px var(--fontHe); color:#dfe6ff; text-shadow:0 2px 6px rgba(0,0,0,.7); min-height:14px; }
.kd-wallet { display:flex; gap:12px; justify-content:center; font:800 14px var(--fontHe); color:#dfe6ff; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.kd-coin { color:var(--gold); } .kd-star { color:#fff; } .kd-bestdash { color:var(--muted); }
.kc.locked { filter:saturate(.2) brightness(.6); cursor:default; }
/* level map */
.kd-levels { background:rgba(7,12,34,.86); display:grid; place-items:center; overflow:auto; }
.kd-panel { width:min(94vw, 560px); max-height:100%; overflow:auto; padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 14px); display:grid; gap:14px; align-content:start; }
.kd-panel-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.kd-panel-title { font:900 24px var(--fontHe); color:#fff; text-align:center; }
.kd-world { display:grid; gap:8px; padding:12px; border-radius:18px; background:linear-gradient(180deg,#1b1711,#120f0b); border:1px solid #3a3220; box-shadow:0 16px 40px rgba(0,0,0,.5); }
.kd-world-name { font:800 15px var(--fontHe); color:#dfe6ff; }
.kd-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; direction:ltr; }
.kc.lvl { height:60px; min-width:0; padding:0; display:grid; gap:2px; grid-template-rows:1fr auto; align-content:center; }
.kc.lvl .n { font-size:20px; } .kc.lvl .st { font-size:11px; color:#b07a12; letter-spacing:1px; } .kc.lvl .st i { font-style:normal; color:rgba(0,0,0,.18); }
.kc.lvl.bonus { background:linear-gradient(180deg,#ffe29a,#f3b22e); box-shadow:0 7px 0 #b07a12, 0 12px 26px rgba(0,0,0,.45); }
.kc.lvl.boss { background:linear-gradient(180deg,#ffb3a8,#e86a5a); box-shadow:0 7px 0 #8c2e22, 0 12px 26px rgba(0,0,0,.45); }
/* lives */
.kd-lives { position:absolute; top:calc(env(safe-area-inset-top,0px) + 74px); left:50%; transform:translateX(-50%); display:flex; gap:4px; align-items:center; }
.kd-heart { font-size:22px; color:#3a3f66; text-shadow:0 2px 4px rgba(0,0,0,.6); transition:color .3s, transform .3s; } .kd-heart.on { color:#ff5f7a; text-shadow:0 0 10px rgba(255,95,122,.7), 0 2px 4px rgba(0,0,0,.6); }
.kd-awake { margin-inline-start:8px; font:800 12px var(--fontHe); color:#ffb3a8; text-shadow:0 2px 6px rgba(0,0,0,.7); }
.kd-world.shut { opacity:.6; } .kd-world-name small { color:var(--muted); font-weight:600; }
.kd-set { gap:12px; } .kd-setrow { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; font:700 15px var(--fontHe); color:#dfe6ff; }
.kc.tog { min-width:64px; }
.kd-rankup { font:900 22px var(--fontHe); color:var(--gold); text-shadow:0 0 18px rgba(255,198,87,.6); }
.kd-abilities { position:absolute; right:calc(env(safe-area-inset-right,0px) + 14px); bottom:calc(env(safe-area-inset-bottom,0px) + 14px); display:flex; gap:8px; pointer-events:auto; }
.kc.ab { position:relative; font-size:13px; } .kc.ab .n { position:absolute; top:-8px; right:-6px; min-width:20px; height:20px; border-radius:10px; background:var(--cobalt); color:#fff; font:800 12px/20px var(--fontHe); text-align:center; }
.kd-chip.shield { background:linear-gradient(180deg,#dfe9ff,#b9cdfa); box-shadow:0 4px 0 #3f62b8, 0 6px 14px rgba(0,0,0,.4); color:#1c54de; }
.kd-pausebtn { position:absolute; left:calc(env(safe-area-inset-left,0px) + 14px); bottom:calc(env(safe-area-inset-bottom,0px) + 14px); pointer-events:auto; opacity:.85; }
/* toasts, guide, shop */
.kd-toast { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 12%); transform:translate(-50%,20px); width:max-content; max-width:min(86vw, 380px); padding:12px 16px; border-radius:16px; background:#fff8e6; color:#2b2416; font:700 15px/1.35 var(--fontHe); text-align:center; box-shadow:0 14px 30px rgba(0,0,0,.5); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.kd-toast.on { opacity:1; transform:translate(-50%,0); }
.kd-guide { gap:10px; } .kd-grow { display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:start; }
.kd-gicon { display:grid; place-items:center; width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--capInk); font:800 15px var(--fontHe); }
.kd-grow b { font:800 15px var(--fontHe); color:#fff; } .kd-grow p { margin:2px 0 0; font:500 13.5px/1.4 var(--fontHe); color:#dfe6ff; }
/* the shop: the panel on one side (wide) or the lower part (phone), the character lives in the clear part */
.kd-shoppanel { background:linear-gradient(180deg, rgba(7,12,34,.35), rgba(7,12,34,.15) 35%, rgba(7,12,34,.7) 62%, rgba(7,12,34,.88)); overflow:hidden; }
.kd-shop { position:absolute; left:0; right:0; bottom:0; max-height:44vh; width:auto; overflow:auto; border-radius:22px 22px 0 0; background:rgba(7,12,34,.6); backdrop-filter:blur(10px); padding-top:12px; }
@media (min-width:900px) { .kd-shoppanel { background:linear-gradient(90deg, rgba(7,12,34,.15), rgba(7,12,34,.35) 50%, rgba(7,12,34,.85) 56%); } .kd-shop { left:auto; top:0; bottom:0; right:0; width:min(48vw, 560px); max-height:none; border-radius:0; padding-top:calc(env(safe-area-inset-top,0px) + 16px); } }
.kd-detail { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; min-height:46px; padding:6px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.kd-detail-text b { font:800 15px var(--fontHe); color:#fff; } .kd-detail-text p { margin:2px 0 0; font:500 13px/1.35 var(--fontHe); color:var(--muted); }
.kc.tile.sel { outline:3px solid var(--gold); outline-offset:2px; }
.kd-shopgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
.kc.tile { height:auto; min-width:0; padding:8px 8px 8px; display:grid; gap:3px; justify-items:center; }
.kc.tile img { width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.kc.tile b { font-size:13px; } .kc.tile small { font-size:12px; color:#6a5a3a; text-align:center; } .kc.tile i { font-style:normal; font-size:10px; color:#8a7d66; text-align:center; line-height:1.25; }
.kd-gicon img { width:44px; height:44px; object-fit:contain; }
.kd-subtabs { margin:0; } .kd-shophint { font:600 12px var(--fontHe); color:var(--muted); text-align:center; min-height:14px; }
/* the shop keeps the characters in view: the panel takes the lower part of the screen */
.kc.tile.special { background:linear-gradient(180deg,#dfe9ff,#b9cdfa); } .kc.tile.special small, .kc.tile.special i { color:#1c54de; }
.kc.tile.rare { background:linear-gradient(180deg,#ffe29a,#f3b22e); box-shadow:0 7px 0 #b07a12, 0 12px 26px rgba(255,182,58,.35); }
.kc.tile.on { outline:3px solid var(--sky); outline-offset:2px; }
.kd-shopmsg { min-height:20px; text-align:center; color:var(--coral); font:800 14px var(--fontHe); }
.kd-tabs { margin:0; }
/* level complete */
.kd-stars { display:flex; gap:14px; justify-content:center; margin:4px 0 2px; }
.kd-bigstar { display:grid; justify-items:center; gap:2px; font:900 52px/1 var(--fontHe); color:#2a3466; transform:scale(.6); opacity:.5; }
.kd-bigstar small { font:700 11px var(--fontHe); color:var(--muted); }
.kd-bigstar.on { color:var(--gold); text-shadow:0 0 22px rgba(255,198,87,.8); animation:kd-starpop .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes kd-starpop { from { transform:scale(.3) rotate(-30deg); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CANDY LAYER — a game's UI, not a website's: glossy, chunky, saturated, outlined text,
   everything pressable looks like a sweet. Overrides the base rules above. ═══════════════════ */
:root { --c-blue:#2f6df6; --c-blue2:#1b45c9; --c-blue3:#0f2a86; --c-green:#5fd24a; --c-green2:#2fa52a; --c-green3:#1d6e1a;
  --c-gold:#ffd23f; --c-gold2:#ff9f1a; --c-gold3:#b35b00; --c-pink:#ff5fa2; --c-pink2:#d7246f; --c-cream:#fff6dc; --c-cream2:#ffe3a6;
  --c-purple:#5b3fd6; --c-purple2:#3a1f9e; --c-purple3:#24135f; --ink2:#1d1240; --outline:#1d1240; }
.kd-hud, .kd-hud button, .kd-hud input { font-family:var(--fontHe); }
/* outlined "sticker" text */
.kd-sub, .kd-how, .kd-best, .kd-over-title, .kd-panel-title, .kd-mtitle, .kd-rankup, .kd-newbest, .kd-world-name, .kd-burst, .kd-memhud, .kd-goal, .kd-coinled, .kd-learned, .kd-quip, .kd-wallet, .kd-mission, .kd-grow b, .kd-profsec, .kd-setrow, .kd-detail-text b, .kd-gdesc {
  color:#fff; text-shadow:-1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline), 0 3px 0 var(--outline), 0 6px 12px rgba(0,0,0,.45); }
.kd-sub { font-size:19px; font-weight:900; } .kd-how { font-size:16px; font-weight:800; } .kd-over-title { font-size:clamp(24px, 6vw, 32px); } .kd-panel-title { font-size:28px; }
.kd-panel-title, .kd-over-title, .kd-mtitle { background:none; }

/* buttons: candy keys — glossy, bevelled, white outlined label */
.kc { color:#fff; font-weight:900; letter-spacing:.01em; border-radius:18px; border:3px solid var(--c-blue3);
  background:linear-gradient(180deg, #7fa9ff 0%, var(--c-blue) 45%, var(--c-blue2) 100%);
  box-shadow:0 7px 0 var(--c-blue3), 0 12px 24px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.18);
  text-shadow:-1.2px -1.2px 0 var(--c-blue3), 1.2px -1.2px 0 var(--c-blue3), -1.2px 1.2px 0 var(--c-blue3), 1.2px 1.2px 0 var(--c-blue3), 0 2px 0 var(--c-blue3); }
.kc::before { content:""; position:absolute; left:8%; right:8%; top:4px; height:38%; border-radius:12px 12px 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none; }
.kc:active, .kc.down { transform:translateY(5px); box-shadow:0 2px 0 var(--c-blue3), 0 4px 10px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.4); }
.kc.gold { border-color:var(--c-gold3); background:linear-gradient(180deg, #fff1a8 0%, var(--c-gold) 45%, var(--c-gold2) 100%); box-shadow:0 7px 0 var(--c-gold3), 0 12px 24px rgba(255,160,30,.35), inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.14); color:#fff;
  text-shadow:-1.2px -1.2px 0 var(--c-gold3), 1.2px -1.2px 0 var(--c-gold3), -1.2px 1.2px 0 var(--c-gold3), 1.2px 1.2px 0 var(--c-gold3), 0 2px 0 var(--c-gold3); }
.kc.gold:active { box-shadow:0 2px 0 var(--c-gold3), 0 4px 10px rgba(0,0,0,.4); }
#kd-go, #kd-again, #kd-next, #kd-m-again, #kd-giftopen, #kd-resume { border-color:var(--c-green3); background:linear-gradient(180deg, #b4f59a 0%, var(--c-green) 45%, var(--c-green2) 100%); box-shadow:0 8px 0 var(--c-green3), 0 14px 26px rgba(47,165,42,.35), inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.14);
  text-shadow:-1.4px -1.4px 0 var(--c-green3), 1.4px -1.4px 0 var(--c-green3), -1.4px 1.4px 0 var(--c-green3), 1.4px 1.4px 0 var(--c-green3), 0 2px 0 var(--c-green3); }
#kd-go:active, #kd-again:active, #kd-next:active { box-shadow:0 2px 0 var(--c-green3), 0 4px 10px rgba(0,0,0,.4); }
.kc.wide { height:66px; font-size:26px; border-radius:22px; }
.kc.small { height:42px; border-radius:14px; font-size:15px; border-width:2.5px; box-shadow:0 5px 0 var(--c-blue3), 0 8px 16px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5); }
.kc.small:active { box-shadow:0 1px 0 var(--c-blue3); }
.kc.on { border-color:var(--c-pink2); background:linear-gradient(180deg, #ffb5d4, var(--c-pink) 45%, var(--c-pink2)); box-shadow:0 5px 0 #8e1247, 0 8px 16px rgba(215,36,111,.4), inset 0 2px 0 rgba(255,255,255,.5); text-shadow:-1.2px -1.2px 0 #8e1247, 1.2px -1.2px 0 #8e1247, -1.2px 1.2px 0 #8e1247, 1.2px 1.2px 0 #8e1247, 0 2px 0 #8e1247; }
.kc.locked { filter:saturate(.25) brightness(.75); }
.kc.lvl { border-color:var(--c-blue3); } .kc.lvl .st { color:#ffe08a; text-shadow:0 1px 0 var(--c-blue3); } .kc.lvl .st i { color:rgba(0,0,0,.3); }
.kc.lvl.gold { border-color:var(--c-gold3); background:linear-gradient(180deg,#fff1a8,var(--c-gold) 45%,var(--c-gold2)); box-shadow:0 7px 0 var(--c-gold3), 0 12px 24px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.6); }
.kc.lvl.bonus { border-color:var(--c-pink2); background:linear-gradient(180deg,#ffb5d4,var(--c-pink) 45%,var(--c-pink2)); box-shadow:0 7px 0 #8e1247, 0 12px 24px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); }
.kc.lvl.boss { border-color:#6b1010; background:linear-gradient(180deg,#ff9a8a,#ff4b3a 45%,#c21f10); box-shadow:0 7px 0 #6b1010, 0 12px 24px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); }
.kc.tile { border-color:var(--c-purple3); background:linear-gradient(180deg,#a991ff,var(--c-purple) 50%,var(--c-purple2)); box-shadow:0 6px 0 var(--c-purple3), 0 10px 20px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.45); }
.kc.tile b, .kc.tile small, .kc.tile i { color:#fff; text-shadow:-1px -1px 0 var(--c-purple3), 1px -1px 0 var(--c-purple3), -1px 1px 0 var(--c-purple3), 1px 1px 0 var(--c-purple3), 0 2px 0 var(--c-purple3); }
.kc.tile.special { border-color:#0e4d8a; background:linear-gradient(180deg,#9ed4ff,#3aa5ff 50%,#1b74d8); box-shadow:0 6px 0 #0e4d8a, 0 10px 20px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.5); }
.kc.tile.rare { border-color:var(--c-gold3); background:linear-gradient(180deg,#fff1a8,var(--c-gold) 50%,var(--c-gold2)); box-shadow:0 6px 0 var(--c-gold3), 0 10px 20px rgba(255,160,30,.35), inset 0 3px 0 rgba(255,255,255,.6); }
.kc.tile.rare b, .kc.tile.rare small, .kc.tile.rare i { text-shadow:-1px -1px 0 var(--c-gold3), 1px -1px 0 var(--c-gold3), -1px 1px 0 var(--c-gold3), 1px 1px 0 var(--c-gold3), 0 2px 0 var(--c-gold3); }
.kc.tile.on { outline:4px solid #fff; outline-offset:0; } .kc.tile.sel { outline:4px solid var(--c-gold); outline-offset:0; }

/* panels: a glossy blue-purple board with a cream frame */
.kd-over .kd-card, .kd-world, .kd-mcard, .kd-detail, .kd-shop, .kd-pausePanel .kd-card {
  background:linear-gradient(180deg, #4f3bd6 0%, #3b2aa8 55%, #2a1c80 100%); border:4px solid var(--c-cream); border-radius:28px;
  box-shadow:0 0 0 3px var(--c-purple3), 0 26px 50px rgba(0,0,0,.55), inset 0 4px 0 rgba(255,255,255,.35), inset 0 -8px 0 rgba(0,0,0,.2); }
.kd-shop { border-radius:28px 28px 0 0; border-bottom:0; backdrop-filter:none; background:linear-gradient(180deg, #4f3bd6 0%, #3b2aa8 55%, #2a1c80 100%); }
@media (min-width:900px) { .kd-shop { border-radius:28px 0 0 28px; border-right:0; } }
.kd-world { padding:14px; } .kd-detail { padding:8px 14px; border-width:3px; border-radius:20px; }
.kd-detail-text p { color:#e4dcff; text-shadow:0 1px 0 var(--c-purple3); }
.kd-levels, .kd-shoppanel { background:linear-gradient(180deg, rgba(10,8,40,.7), rgba(10,8,40,.88)); }
.kd-over { background:radial-gradient(60% 50% at 50% 50%, rgba(10,8,40,.45), rgba(10,8,40,.82)); }
.kd-modal { background:rgba(10,8,40,.78); }
/* counters: glossy pills */
.kd-led { border:3px solid var(--c-cream); border-radius:18px; background:linear-gradient(180deg,#5b47e0,#3a2aa8); box-shadow:0 0 0 2px var(--c-purple3), 0 6px 0 var(--c-purple3), 0 10px 20px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.4); padding:6px 12px 6px; min-width:80px; }
.kd-led b { font-family:var(--fontHe); font-weight:900; font-size:26px; color:#fff; text-shadow:-1.5px -1.5px 0 var(--c-purple3), 1.5px -1.5px 0 var(--c-purple3), -1.5px 1.5px 0 var(--c-purple3), 1.5px 1.5px 0 var(--c-purple3), 0 3px 0 var(--c-purple3); }
.kd-led span { color:var(--c-gold); font-weight:800; font-size:11px; letter-spacing:.02em; text-shadow:0 1px 0 var(--c-purple3); margin-top:3px; }
.kd-word { border:3px solid var(--c-cream); border-radius:18px; background:linear-gradient(180deg,#5b47e0,#3a2aa8); box-shadow:0 0 0 2px var(--c-purple3), 0 6px 0 var(--c-purple3), 0 10px 20px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35); }
.kd-word .k { border-radius:9px; font-family:var(--fontHe); font-weight:900; }
.kd-mission { border:3px solid var(--c-cream); border-radius:18px; background:linear-gradient(180deg,#5b47e0,#3a2aa8); box-shadow:0 0 0 2px var(--c-purple3), 0 5px 0 var(--c-purple3), 0 8px 16px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.35); font-size:14px; padding:9px 12px; }
.kd-mission .bar { height:12px; border-radius:7px; background:rgba(0,0,0,.45); border:2px solid var(--c-purple3); } .kd-mission .bar i { background:linear-gradient(180deg,#b4f59a,var(--c-green) 50%,var(--c-green2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.5); }
.kd-mission .rw { color:var(--c-gold); } .kd-mission.done .rw { color:#b4f59a; }
.kd-menu .kd-wallet { border:3px solid var(--c-cream); border-radius:999px; background:linear-gradient(180deg,#5b47e0,#3a2aa8); box-shadow:0 0 0 2px var(--c-purple3), 0 5px 0 var(--c-purple3), 0 8px 16px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.35); padding:7px 16px; font-size:16px; }
.kd-coin, .kd-star { color:#fff; } .kd-coin { color:var(--c-gold); }
.kd-stats .kd-led { min-width:84px; }
/* stars: big, gold, outlined */
.kd-bigstar { font-size:64px; color:#2a1c80; text-shadow:-2px -2px 0 var(--c-purple3), 2px -2px 0 var(--c-purple3), -2px 2px 0 var(--c-purple3), 2px 2px 0 var(--c-purple3); }
.kd-bigstar.on { color:var(--c-gold); text-shadow:-2px -2px 0 var(--c-gold3), 2px -2px 0 var(--c-gold3), -2px 2px 0 var(--c-gold3), 2px 2px 0 var(--c-gold3), 0 4px 0 var(--c-gold3), 0 0 26px rgba(255,210,63,.8); }
.kd-bigstar small { color:#fff; text-shadow:0 1px 0 var(--c-purple3); font-size:12px; }
/* hearts, chips, boss bar, callouts, toasts */
.kd-heart { font-size:26px; color:#2a1c80; text-shadow:-1.5px -1.5px 0 var(--c-purple3), 1.5px -1.5px 0 var(--c-purple3), -1.5px 1.5px 0 var(--c-purple3), 1.5px 1.5px 0 var(--c-purple3), 0 3px 0 var(--c-purple3); } .kd-heart.on { color:#ff4f7a; }
.kd-chip { border:2.5px solid var(--c-cream); border-radius:14px; color:#fff; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.4); box-shadow:0 4px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.45); }
.kd-boss { border:3px solid var(--c-cream); border-radius:18px; background:linear-gradient(180deg,#c22a1c,#7a1008); box-shadow:0 0 0 2px #3a0606, 0 5px 0 #3a0606, 0 10px 20px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.3); color:#fff; font-size:13px; }
.kd-boss .bar { border:2px solid #3a0606; height:12px; border-radius:7px; }
.kd-callout, .kd-toast { background:var(--c-cream); border:3px solid var(--c-cream2); border-radius:20px; color:var(--ink2); font-weight:900; box-shadow:0 0 0 3px var(--c-gold3), 0 14px 30px rgba(0,0,0,.5); }
.kd-callout::after { background:var(--c-cream); }
.kd-shout { border-radius:20px; border:4px solid #c21f10; }
.kd-burst.gold { color:var(--c-gold); } .kd-burst.coral { color:#ff6b6b; } .kd-burst.sky { color:#9ed4ff; }
/* title: glossy candy keycaps */
.kd-title .t { border:3px solid var(--c-gold3); background:linear-gradient(180deg,#fff1a8,var(--c-gold) 45%,var(--c-gold2)); color:#fff; box-shadow:0 7px 0 var(--c-gold3), 0 14px 28px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.6);
  text-shadow:-2px -2px 0 var(--c-gold3), 2px -2px 0 var(--c-gold3), -2px 2px 0 var(--c-gold3), 2px 2px 0 var(--c-gold3), 0 3px 0 var(--c-gold3); }
.kd-title .t.gap { border:0; background:none; box-shadow:none; }
.kd-how .key { border:2px solid var(--c-purple3); border-radius:10px; background:linear-gradient(180deg,#fff,#e4dcff); color:var(--ink2); box-shadow:0 3px 0 var(--c-purple3); font-family:var(--fontHe); font-weight:900; }
.kd-how .key.he { background:linear-gradient(180deg,#ffb5d4,var(--c-pink)); color:#fff; border-color:#8e1247; box-shadow:0 3px 0 #8e1247; text-shadow:0 1px 0 #8e1247; }
.kd-how .arr { color:var(--c-gold); }
.kd-gift { border-color:var(--c-pink2); background:linear-gradient(180deg,#ffb5d4,var(--c-pink) 45%,var(--c-pink2)); box-shadow:0 7px 0 #8e1247, 0 12px 24px rgba(215,36,111,.4), inset 0 3px 0 rgba(255,255,255,.5); text-shadow:-1.2px -1.2px 0 #8e1247, 1.2px -1.2px 0 #8e1247, -1.2px 1.2px 0 #8e1247, 1.2px 1.2px 0 #8e1247, 0 2px 0 #8e1247; }
/* keyboard heatmap, achievements, profile */
.kd-key { border-radius:7px; width:28px; height:28px; font-weight:900; border:2px solid var(--c-purple3); background:#3a2aa8; color:#c9bfff; box-shadow:0 3px 0 var(--c-purple3); }
.kd-key.b1 { background:#5b8dff; color:#fff; } .kd-key.b2 { background:#3fd0ff; color:#0b2a4a; } .kd-key.b3 { background:#ffe08a; color:#5a3a00; } .kd-key.b4 { background:var(--c-gold); color:#5a3a00; box-shadow:0 3px 0 var(--c-gold3), 0 0 12px rgba(255,210,63,.7); }
.kd-gicon { border-radius:14px; background:linear-gradient(180deg,#5b47e0,#3a2aa8); border:2px solid var(--c-cream); box-shadow:0 3px 0 var(--c-purple3); width:52px; height:52px; }
.kd-grow p, .kd-gdesc { color:#e4dcff; text-shadow:0 1px 0 var(--c-purple3); font-weight:600; }
.kd-achchip { border-radius:10px; border:2px solid var(--c-purple3); background:#3a2aa8; } .kd-achchip.got { background:linear-gradient(180deg,#fff1a8,var(--c-gold)); border-color:var(--c-gold3); }
.kd-ach { border:3px solid var(--c-cream); border-radius:20px; background:linear-gradient(180deg,#fff1a8,var(--c-gold) 50%,var(--c-gold2)); box-shadow:0 0 0 3px var(--c-gold3), 0 10px 30px rgba(0,0,0,.5); } .kd-ach b, .kd-ach small { color:#fff; text-shadow:-1px -1px 0 var(--c-gold3), 1px -1px 0 var(--c-gold3), -1px 1px 0 var(--c-gold3), 1px 1px 0 var(--c-gold3), 0 2px 0 var(--c-gold3); }
.kd-profname input { color:#fff; border-bottom:3px dashed rgba(255,255,255,.4); font-weight:900; text-shadow:0 2px 0 var(--c-purple3); }
.kd-profrank .bar { height:12px; border-radius:7px; border:2px solid var(--c-purple3); background:rgba(0,0,0,.45); } .kd-profrank .bar i { background:linear-gradient(180deg,#9ed4ff,#3aa5ff); box-shadow:inset 0 2px 0 rgba(255,255,255,.5); }
.kd-mresult { color:var(--c-gold); text-shadow:-1.5px -1.5px 0 var(--c-gold3), 1.5px -1.5px 0 var(--c-gold3), -1.5px 1.5px 0 var(--c-gold3), 1.5px 1.5px 0 var(--c-gold3), 0 3px 0 var(--c-gold3); font-size:26px; }
.kd-shopmsg { color:#ffb5b5; } .kd-shophint { color:#e4dcff; }
.kd-coinled { font-size:17px; }
/* the menu backdrop: a soft vignette, nothing boxy */
.kd-menu { background:linear-gradient(180deg, rgba(10,8,40,.55) 0%, rgba(10,8,40,.1) 40%, rgba(10,8,40,0) 60%, rgba(10,8,40,.55) 100%); }

/* === CANDY TUNE === quieter candy: the same shapes, less saturated, panels sit back */
:root { --c-blue:#3d6fd9; --c-blue2:#2a4fb3; --c-blue3:#17307a; --c-green:#64c75c; --c-green2:#3b9a3a; --c-green3:#236424;
  --c-gold:#f4c74f; --c-gold2:#e59a2e; --c-gold3:#9c5a10; --c-pink:#e86a9f; --c-pink2:#bf3a72; --c-cream:#f6eedb; --c-cream2:#f1dfae;
  --c-purple:#5748b8; --c-purple2:#3b2f8a; --c-purple3:#271d5c; }
.kd-over .kd-card, .kd-world, .kd-mcard, .kd-detail, .kd-shop, .kd-pausePanel .kd-card, .kd-shop { background:linear-gradient(180deg, #4a3eb4 0%, #392d8f 55%, #2b2170 100%); box-shadow:0 0 0 3px var(--c-purple3), 0 22px 44px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.22), inset 0 -6px 0 rgba(0,0,0,.18); }
.kd-mission, .kd-led { background:linear-gradient(180deg,#5346c2,#3a2e95); box-shadow:0 0 0 2px var(--c-purple3), 0 4px 0 var(--c-purple3), 0 8px 14px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); }
.kd-levels, .kd-shoppanel { background:linear-gradient(180deg, rgba(12,10,36,.62), rgba(12,10,36,.84)); }
.kd-row.tight { gap:6px; }
/* shop head: segmented tabs instead of a row of loose buttons; the detail strip reads icon · text · one action */
.kd-tabs, .kd-subtabs { display:flex; gap:0; padding:4px; border-radius:16px; background:rgba(0,0,0,.32); box-shadow:inset 0 2px 4px rgba(0,0,0,.4); width:100%; box-sizing:border-box; }
.kd-tabs .kc, .kd-subtabs .kc { flex:1; margin:0; border-radius:12px; min-width:0; padding-inline:8px; }
.kd-tabs .kc:not(.on), .kd-subtabs .kc:not(.on) { background:transparent; border-color:transparent; box-shadow:none; color:#d9d2ff; transform:none; }
.kd-tabs .kc.on, .kd-subtabs .kc.on { box-shadow:0 2px 0 var(--c-pink2), 0 4px 8px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.kd-detail { grid-template-columns:1fr auto; } #kd-d-actions .kc { min-width:118px; }
.kd-shopmsg { display:none; }
@keyframes kd-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-7px) rotate(-2deg); } 40% { transform:translateX(6px) rotate(2deg); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }
.kd-shake { animation:kd-shake .45s cubic-bezier(.3,.1,.3,1) both !important; }
/* the big centre letter on the first levels: what to find, where it sits — impossible to miss */
.kd-bigkey { position:absolute; left:50%; top:27%; transform:translate(-50%,-50%) scale(.6); display:grid; grid-auto-flow:column; align-items:center; gap:14px; padding:10px 22px; border-radius:26px; background:rgba(12,10,36,.55); border:3px solid var(--c-cream); box-shadow:0 0 0 3px var(--c-purple3), 0 14px 30px rgba(0,0,0,.45); pointer-events:none; opacity:0; transition:opacity .22s, transform .22s; direction:ltr; }
.kd-bigkey.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.kd-bigkey .h { font:900 56px/1 var(--fontHe); color:#fff; -webkit-text-stroke:2px var(--outline); text-shadow:0 4px 0 var(--outline), 0 8px 18px rgba(0,0,0,.5); }
.kd-bigkey .arrow { font:900 30px/1 var(--fontHe); color:var(--c-gold); text-shadow:0 2px 0 var(--outline); }
.kd-bigkey .k { display:grid; place-items:center; width:62px; height:62px; border-radius:14px; background:linear-gradient(180deg,#f7efdb,#dccfae); box-shadow:0 6px 0 #8f8066, 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 #fff; font:900 36px/1 var(--mono); color:#2b2416; }
.kd-bigkey.pop .k { animation:kd-press .4s cubic-bezier(.2,1.4,.4,1); }
@media (max-width:480px) { .kd-bigkey { top:24%; gap:10px; padding:8px 16px; } .kd-bigkey .h { font-size:44px; } .kd-bigkey .k { width:52px; height:52px; font-size:30px; } }
/* the memory game's peek: the real keyboard with its Hebrew letters, over everything for a moment */
.kd-peek { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); display:grid; gap:6px; padding:14px 16px; border-radius:22px; background:rgba(12,10,36,.9); border:3px solid var(--c-cream); box-shadow:0 0 0 3px var(--c-purple3), 0 20px 40px rgba(0,0,0,.6); pointer-events:none; direction:ltr; animation:kd-in .3s cubic-bezier(.2,1.3,.4,1) both; z-index:3; }
.kd-peek .row { display:flex; gap:5px; } .kd-peek .row.r1 { padding-left:14px; } .kd-peek .row.r2 { padding-left:28px; }
.kd-peek .key { display:grid; place-items:center; width:34px; height:36px; border-radius:8px; background:linear-gradient(180deg,#f7efdb,#dccfae); box-shadow:0 3px 0 #8f8066, inset 0 1px 0 #fff; line-height:1; }
.kd-peek .key b { font:800 14px/1 var(--mono); color:#4b4238; } .kd-peek .key i { font:800 14px/1 var(--fontHe); color:#1c54de; font-style:normal; }
@media (max-width:480px) { .kd-peek { padding:10px; gap:4px; } .kd-peek .row { gap:3px; } .kd-peek .key { width:28px; height:32px; } .kd-peek .key b { font-size:11px; } .kd-peek .key i { font-size:12px; } .kd-peek .row.r1 { padding-left:10px; } .kd-peek .row.r2 { padding-left:20px; } }
#kd-sound.off { opacity:.55; filter:grayscale(1); }
.kd-memhud .kd-row { margin:0; }

/* === FINDER === the letter to find, with its timer ring — HTML, over the 3D board */
.kd-fletter { position:absolute; left:0; right:0; top:16%; margin:0 auto; width:118px; height:118px; display:grid; place-items:center; pointer-events:none; --p:100%; }
.kd-fletter .ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--c-gold) var(--p), rgba(29,18,64,.35) 0); -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%); mask:radial-gradient(circle, transparent 60%, #000 62%); filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.kd-fletter.low .ring { background:conic-gradient(#ff5a48 var(--p), rgba(29,18,64,.35) 0); }
.kd-fletter .h { position:relative; width:84px; height:84px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg,#5748b8,#3b2f8a); border:3px solid var(--c-cream); box-shadow:0 0 0 3px var(--c-purple3), 0 10px 22px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.3); font:900 50px/1 var(--fontHe); color:#fff; -webkit-text-stroke:1.5px var(--outline); text-shadow:0 3px 0 var(--outline); }
.kd-fletter.pop .h { animation:kd-press .4s cubic-bezier(.2,1.4,.4,1); }
@media (max-width:480px) { .kd-fletter { top:12%; } }
/* the peek board: centred without a transform (the entrance animation owns transform) */
.kd-peek { left:0; right:0; top:auto; bottom:14%; transform:none; margin:0 auto; width:max-content; max-width:96vw; }
/* a toast that must sit above a bottom sheet (the shop) */
.kd-toast.hi { bottom:auto; top:calc(env(safe-area-inset-top,0px) + 16%); transform:translate(-50%,-10px); } .kd-toast.hi.on { transform:translate(-50%,0); }

.kd-appicon { width:96px; height:96px; border-radius:22px; box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 3px var(--c-cream); }
.kd-mbody { margin:0; font:600 15px/1.5 var(--fontHe); color:#e4dcff; text-align:center; }
.kd-mbody.kd-ios { padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.28); } .kd-mbody .ic { display:inline-block; font-size:18px; color:var(--c-gold); }

/* === PERF/LAYERS === */
.kd-lowq #grain { display:none; }
/* the shop keeps the fitting room in clear view: no dim layer over the character, only the sheet itself */
.kd-shoppanel { background:linear-gradient(180deg, rgba(12,10,36,0) 0%, rgba(12,10,36,0) 48%, rgba(12,10,36,.55) 60%, rgba(12,10,36,.85) 100%) !important; }
@media (min-width:900px) { .kd-shoppanel { background:linear-gradient(90deg, rgba(12,10,36,0) 0%, rgba(12,10,36,0) 50%, rgba(12,10,36,.75) 58%) !important; } }
/* messages always in front: toasts, bursts, callouts above sheets and modals */
.kd-toast { z-index:9; background:#fff8e6; color:#1d1240; border:3px solid var(--c-cream); box-shadow:0 0 0 3px var(--c-purple3), 0 14px 30px rgba(0,0,0,.55); font-weight:800; }
.kd-callout, .kd-burst, .kd-fletter, .kd-bigkey { z-index:8; }
.kd-achievement { z-index:9; }

/* === WORDBAR XL === the target word is read at a glance */
.kd-word { min-height:54px; gap:6px; padding:6px 12px; }
.kd-word .k { width:38px; height:40px; font-size:22px; border-radius:9px; }
.kd-word .caret { height:30px; }
@media (max-width:400px) { .kd-word .k { width:34px; height:36px; font-size:20px; } }

/* === SAFE TOP === the achievement toast must be fully hidden when off (its slid-up position peeked under the notch) */
.kd-ach { opacity:0; visibility:hidden; transition:transform .4s cubic-bezier(.2,1.3,.4,1), opacity .25s, visibility 0s .4s; }
.kd-ach.on { opacity:1; visibility:visible; transition:transform .4s cubic-bezier(.2,1.3,.4,1), opacity .2s, visibility 0s; }

/* === VIEWPORT FIT === nothing leaves the screen: phones, notches, short screens, landscape */
.kd-burst { max-width:92vw; white-space:normal; text-align:center; line-height:1.1; }
.kd-ach { max-width:92vw; box-sizing:border-box; }
.kd-callout { max-width:min(84vw, 320px); box-sizing:border-box; }
.kd-mcard { max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px); max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px); overflow:auto; box-sizing:border-box; }
.kd-over .kd-card { max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px); overflow:auto; box-sizing:border-box; }
.kd-panel { max-height:100dvh; }
/* short phones (SE, small Androids): the menu packs tighter so the card never meets the buttons */
@media (max-height:720px) {
  .kd-menu .kd-card { gap:6px; top:calc(env(safe-area-inset-top,0px) + 2vh); }
  .kd-title .t { width:clamp(34px, 8.5vw, 48px); height:clamp(38px, 9.5vw, 52px); font-size:clamp(20px, 5vw, 28px); }
  .kd-sub { font-size:15px; } .kd-how { font-size:13px; } .kd-how .key { width:28px; height:28px; font-size:14px; }
  .kd-missions { gap:4px; } .kd-mission { padding:4px 10px; font-size:12px; } .kd-mission .bar { height:8px; }
  .kd-menu .kd-bottom { gap:6px; bottom:calc(env(safe-area-inset-bottom,0px) + 8px); }
  #kd-go { padding:10px 28px; font-size:22px; }
}
@media (max-height:600px) { .kd-missions { display:none; } .kd-how { display:none; } }
/* landscape phones: the menu becomes two columns (card left, buttons right) instead of stacking off-screen */
@media (max-height:480px) and (orientation:landscape) {
  .kd-menu .kd-card { left:4vw; right:auto; margin:0; width:52vw; top:calc(env(safe-area-inset-top,0px) + 2vh); gap:4px; }
  .kd-menu .kd-bottom { left:auto; right:4vw; margin:0; width:36vw; bottom:auto; top:50%; transform:translateY(-50%); gap:6px; }
  .kd-missions { display:none; }
}