/* TypeTails theme F "Arcade Quest" (2026-10-12)
   Re-skins the existing Tailwind markup. Scope = html.ttf.
   Never styles inside the game screen (.ttf-screen) or the typing engine
   (#typing-interface, #results-dashboard): those keep their own look. */
:root{
  --f-bg:#100f2a;--f-bg2:#18173b;--f-panel:#201f4a;--f-panel2:#262560;--f-edge:#36357a;--f-ink:#07061a;
  --f-text:#f2efff;--f-soft:#d9d5ff;--f-muted:#aaa7d8;--f-dim:#8481b8;
  --f-lime:#c6ff3d;--f-lime-d:#5f8510;--f-pink:#ff5fa2;--f-pink-d:#a3245e;--f-cyan:#3de0ff;--f-cyan-d:#127a93;--f-amber:#ffb23d;--f-amber-d:#a8640c;
  --f-key:#2e2d63;--f-key-side:#0b0a22;
  --f-px:"Press Start 2P",ui-monospace,monospace;--f-sans:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;
}
html.ttf{background:var(--f-bg);overflow-x:clip;color-scheme:dark}
html.ttf body{background-color:var(--f-bg)!important;color:var(--f-text);font-family:var(--f-sans);overflow-x:clip;
  background-image:linear-gradient(rgba(61,224,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(61,224,255,.05) 1px,transparent 1px)!important;background-size:40px 40px!important}
html.ttf #root>div,html.ttf main>div.min-h-screen,html.ttf [data-tt-main]{background:transparent!important}
html.ttf ::selection{background:var(--f-pink);color:#fff}

/* ---------- header ---------- */
.ttf-head{position:sticky;top:0;z-index:120;background:rgba(16,15,42,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--f-edge);font-family:var(--f-sans)}
.ttf-head .ttf-bar{max-width:1240px;margin:0 auto;padding:0 16px;height:66px;display:flex;align-items:center;gap:14px}
.ttf-logo{display:flex;align-items:center;gap:10px;font:12px var(--f-px);color:var(--f-lime);text-decoration:none;white-space:nowrap}
.ttf-key{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:8px;background:var(--f-lime);color:#14200a;border:1px solid #a6dc1f;box-shadow:0 4px 0 var(--f-lime-d);font:9px var(--f-px)}
.ttf-nav{display:flex;gap:4px;margin-left:auto}
.ttf-nav a{font:9px/1.4 var(--f-px);padding:10px;color:var(--f-muted);border-radius:8px;text-decoration:none;white-space:nowrap}
.ttf-nav a:hover,.ttf-nav a.on{color:var(--f-lime);background:var(--f-panel)}
.ttf-lang{display:flex;gap:4px;margin-left:8px}
.ttf-lang a{font:600 12px var(--f-mono);color:var(--f-muted);border:1px solid var(--f-edge);padding:4px 7px;border-radius:6px;text-decoration:none}
.ttf-lang a.on{color:var(--f-cyan);border-color:var(--f-cyan)}
.ttf-sub{display:none}
@media (max-width:900px){
  .ttf-head .ttf-bar{height:56px}
  .ttf-bar .ttf-nav{display:none}
  .ttf-lang{margin-left:auto}
  .ttf-sub{display:flex;gap:2px;overflow-x:auto;padding:0 10px 8px;scrollbar-width:none;max-width:100vw}
  .ttf-sub::-webkit-scrollbar{display:none}
  .ttf-sub a{flex:none;font:8px/1.4 var(--f-px);padding:9px 9px;color:var(--f-muted);border-radius:7px;text-decoration:none;white-space:nowrap}
  .ttf-sub a.on{color:var(--f-lime);background:var(--f-panel)}
}
@media (max-width:380px){.ttf-logo{font-size:10px}.ttf-lang a{padding:3px 5px;font-size:11px}}
.ttf-bunw{display:inline-block;position:relative;width:26px;height:28px;flex:none;margin-left:2px}
.ttf-bun{position:absolute;left:0;top:0;width:4px;height:4px;transform:scale(.75);transform-origin:0 0;box-shadow:
 8px 0 0 #fff,24px 0 0 #fff,8px 4px 0 #fff,24px 4px 0 #fff,8px 8px 0 #ff9ccc,24px 8px 0 #ff9ccc,8px 12px 0 #fff,24px 12px 0 #fff,
 4px 16px 0 #fff,8px 16px 0 #fff,12px 16px 0 #fff,16px 16px 0 #fff,20px 16px 0 #fff,24px 16px 0 #fff,28px 16px 0 #fff,
 4px 20px 0 #fff,8px 20px 0 #100f2a,12px 20px 0 #fff,16px 20px 0 #fff,20px 20px 0 #fff,24px 20px 0 #100f2a,28px 20px 0 #fff,
 4px 24px 0 #ff9ccc,8px 24px 0 #fff,12px 24px 0 #fff,16px 24px 0 #ff5fa2,20px 24px 0 #fff,24px 24px 0 #fff,28px 24px 0 #ff9ccc,
 4px 28px 0 #fff,8px 28px 0 #fff,12px 28px 0 #fff,16px 28px 0 #fff,20px 28px 0 #fff,24px 28px 0 #fff,28px 28px 0 #fff,
 8px 32px 0 #d8d2ff,12px 32px 0 #fff,16px 32px 0 #fff,20px 32px 0 #fff,24px 32px 0 #d8d2ff;
 filter:drop-shadow(0 0 5px rgba(198,255,61,.5));animation:ttf-hop 1.2s steps(2) infinite}
@keyframes ttf-hop{50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.ttf-bun{animation:none}}

/* ---------- footer ---------- */
.ttf-foot{background:var(--f-ink);border-top:2px solid var(--f-edge);margin-top:40px;padding:40px 0 48px;font-family:var(--f-sans);position:relative;z-index:5}
.ttf-foot .ttf-fw{max-width:1240px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1.4fr 1fr;gap:28px}
.ttf-foot h2,.ttf-foot .ttf-fh{font:9px/1.6 var(--f-px)!important;color:var(--f-cyan)!important;margin:0 0 12px!important;text-shadow:none!important;letter-spacing:.02em}
.ttf-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ttf-foot a{color:var(--f-muted);text-decoration:none;font-size:14px;line-height:1.4}
.ttf-foot a:hover{color:var(--f-lime)}
.ttf-foot .ttf-brand p{color:var(--f-dim);font-size:13px;line-height:1.55;margin:12px 0 0;max-width:30ch}
.ttf-foot .ttf-copy{max-width:1240px;margin:28px auto 0;padding:16px 16px 0;border-top:1px dashed var(--f-edge);font:600 12px var(--f-mono);color:var(--f-dim)}
@media (max-width:980px){.ttf-foot .ttf-fw{grid-template-columns:1fr 1fr}.ttf-foot .ttf-brand{grid-column:1/-1}}
@media (max-width:420px){.ttf-foot .ttf-fw{grid-template-columns:1fr}}

/* ---------- typography ---------- */
html.ttf h1:not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){font-family:var(--f-px)!important;font-weight:400!important;letter-spacing:.01em!important;line-height:1.45!important;color:var(--f-text)!important;
  text-shadow:0 0 18px rgba(255,95,162,.45),3px 3px 0 var(--f-ink);font-size:clamp(18px,3.2vw,34px)!important;overflow-wrap:anywhere;-webkit-text-fill-color:currentColor;background:none}
html.ttf h1 *:not(svg):not(svg *){color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important}
html.ttf h1 svg{display:none}
html.ttf h1>span:has(>svg:only-child){display:none!important}
html.ttf main h2:not(:is(.ttf-screen,#typing-interface,#results-dashboard,.ttf-foot) *){font-family:var(--f-px)!important;font-weight:400!important;line-height:1.6!important;letter-spacing:.01em!important;
  color:var(--f-lime)!important;-webkit-text-fill-color:currentColor;background-image:none!important;text-shadow:0 0 12px rgba(198,255,61,.35);font-size:clamp(13px,1.9vw,19px)!important;overflow-wrap:anywhere}
html.ttf main h3:not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){font-family:var(--f-sans)!important;font-weight:800!important;color:var(--f-cyan)!important;-webkit-text-fill-color:currentColor;background-image:none!important;letter-spacing:0!important}
html.ttf main h4:not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){color:var(--f-amber)!important;font-family:var(--f-sans)!important}
html.ttf main p,html.ttf main li,html.ttf main td,html.ttf main th,html.ttf main summary,html.ttf main dd,html.ttf main dt{font-family:var(--f-sans)}

/* ---------- colour remap (outside game screen / typing engine) ---------- */
html.ttf :is(.bg-white,.bg-slate-50,.bg-sky-50,.bg-stone-50,.bg-emerald-50,.bg-slate-100,.bg-sky-100,.bg-green-100,.bg-blue-100,.bg-purple-100,.bg-amber-50,.bg-amber-100,.bg-indigo-50,.bg-indigo-100,.bg-orange-50,.bg-yellow-100,.bg-blue-50,.bg-emerald-100,.bg-fuchsia-100,.bg-slate-200,.bg-sky-200,
  .bg-white\/80,.bg-white\/95,.bg-white\/40,.bg-white\/25,.bg-white\/20,.bg-sky-50\/50,.bg-slate-50\/50,.bg-slate-50\/80,.bg-sky-100\/50,.bg-sky-100\/80,.bg-sky-200\/60,
  .bg-\[\#fff5ea\],.bg-\[\#e8e4fb\],.bg-\[\#ffe8d6\],.bg-\[\#e6ddd1\],.bg-\[\#dccabc\],.bg-\[\#cbb8a3\]):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){background-color:var(--f-panel)!important;background-image:none!important}
html.ttf :is(.bg-slate-50,.bg-sky-50,.bg-slate-100,.bg-stone-50,.bg-sky-50\/50,.bg-slate-50\/50):is(.shadow-inner,.p-6,.p-4,.p-5,.p-3,.rounded-xl,.rounded-lg):not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){background-color:var(--f-bg2)!important}
html.ttf section:is(.bg-white,.bg-slate-50,.bg-sky-50,.bg-stone-50):not(:is(.ttf-screen) *){background-color:transparent!important}
html.ttf :is(.from-sky-100,.from-sky-200,.from-sky-300\/30,.from-purple-500\/20):not(:is(.ttf-screen) *){--tw-gradient-from:var(--f-panel) var(--tw-gradient-from-position)!important;--tw-gradient-to:var(--f-bg2) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}

html.ttf :is(.text-slate-900,.text-slate-800,.text-stone-900,.text-stone-800,.text-gray-900):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-text)!important}
html.ttf :is(.text-slate-700,.text-slate-600,.text-stone-600,.text-stone-700):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-soft)!important}
html.ttf :is(.text-slate-500,.text-stone-500,.text-slate-400):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-muted)!important}
html.ttf :is(.text-sky-600,.text-sky-700,.text-sky-800,.text-sky-500,.text-indigo-600,.text-indigo-700,.text-indigo-500,.text-blue-700,.text-\[\#5a7cff\]):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-cyan)!important}
html.ttf :is(.text-emerald-500,.text-emerald-700,.text-green-700,.text-green-600,.text-green-500):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-lime)!important}
html.ttf :is(.text-purple-700,.text-purple-600,.text-purple-500,.text-fuchsia-600,.text-rose-500,.text-pink-500):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-pink)!important}
html.ttf :is(.text-amber-700,.text-amber-600,.text-amber-500,.text-orange-500):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-amber)!important}
html.ttf :is(.hover\:text-sky-600,.group:hover .group-hover\:text-sky-600,.hover\:text-sky-700,.group:hover .group-hover\:text-sky-700,.hover\:text-slate-800):hover:not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){color:var(--f-lime)!important}
html.ttf .group:hover :is(.group-hover\:text-sky-600,.group-hover\:text-sky-700):not(:is(.ttf-screen) *){color:var(--f-lime)!important}

html.ttf :is(.border-slate-200,.border-slate-100,.border-stone-200,.border-sky-100,.border-sky-200,.border-slate-200\/50,.border-indigo-100,.border-orange-100,.border-amber-200,.border-slate-300,.border-sky-50,.border-white\/40,.border-white\/60):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){border-color:var(--f-edge)!important}
html.ttf :is(.border):not([class*="border-"]):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){border-color:var(--f-edge)!important}
html.ttf :is(.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl,.shadow-inner,.hover\:shadow-2xl,.hover\:shadow-md,.hover\:shadow-xl):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){--tw-shadow-color:rgba(0,0,0,.45)!important}
html.ttf :is(.shadow-sky-200,.shadow-slate-200\/50,.shadow-sky-100\/50,.shadow-orange-100){--tw-shadow-color:rgba(61,224,255,.12)!important}

/* cards: pixel neon frame */
html.ttf main :is(.rounded-3xl,.rounded-\[2\.5rem\],.rounded-\[2rem\],.rounded-2xl):is(.bg-white,.bg-slate-50,.bg-sky-50,.bg-white\/80,.bg-white\/40,.bg-white\/25,.bg-stone-50,.border):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *):not(.ttf-screen){
  border-radius:6px!important;border:2px solid var(--f-edge)!important;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 26px -10px rgba(61,224,255,.35)!important}
html.ttf main a:is(.rounded-3xl,.rounded-2xl,.rounded-\[2rem\]):is(.bg-white,.border):hover:not(:is(.ttf-screen) *){border-color:var(--f-lime)!important;box-shadow:0 0 0 1px var(--f-lime),0 0 30px -8px rgba(198,255,61,.5)!important}

/* links in prose */
html.ttf main :is(p,li,td,dd,span.seo-injected) a:not(.ttf-kc):not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){color:var(--f-cyan)!important;text-decoration:underline;text-decoration-color:rgba(61,224,255,.45);text-underline-offset:3px}
html.ttf main :is(p,li,td,dd) a:not(.ttf-kc):hover:not(:is(.ttf-screen) *){color:var(--f-lime)!important;text-decoration-color:var(--f-lime)}

/* primary buttons -> 3D keycaps */
html.ttf main a:is(.rounded-full,.rounded-xl,.rounded-2xl):is(.bg-sky-500,.bg-sky-600,.bg-indigo-600,.bg-slate-900,.bg-emerald-400,.bg-\[\#6dbf85\],.bg-\[\#1e2337\],.bg-gradient-to-r):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *),
html.ttf main button:is(.rounded-full):is(.bg-sky-500,.bg-indigo-600,.bg-slate-900):not(:is(.ttf-screen,#typing-interface,#results-dashboard,#tt-gameover) *){
  background:var(--f-lime)!important;background-image:none!important;color:#14200a!important;border:1px solid #a6dc1f!important;border-radius:10px!important;
  box-shadow:0 5px 0 var(--f-lime-d)!important;font-family:var(--f-px)!important;font-weight:400!important;font-size:11px!important;line-height:1.5!important;letter-spacing:.02em!important;transform:none!important;transition:transform .08s,box-shadow .08s}
html.ttf main a:is(.rounded-full,.rounded-xl,.rounded-2xl):is(.bg-sky-500,.bg-sky-600,.bg-indigo-600,.bg-slate-900,.bg-emerald-400,.bg-\[\#6dbf85\],.bg-\[\#1e2337\],.bg-gradient-to-r):active:not(:is(.ttf-screen) *){transform:translateY(4px)!important;box-shadow:0 1px 0 var(--f-lime-d)!important}
html.ttf main a:is(.rounded-full,.rounded-xl,.rounded-2xl):is(.bg-sky-500,.bg-sky-600,.bg-indigo-600,.bg-slate-900,.bg-emerald-400,.bg-\[\#6dbf85\],.bg-\[\#1e2337\],.bg-gradient-to-r) *:not(:is(.ttf-screen) *){color:inherit!important}
html.ttf main a.rounded-full:is(.bg-white,.border-2):not(:is(.ttf-screen,#tt-gameover) *){background:var(--f-key)!important;color:var(--f-text)!important;border:1px solid var(--f-edge)!important;border-radius:10px!important;box-shadow:0 5px 0 var(--f-key-side)!important;font-family:var(--f-px)!important;font-size:10px!important;font-weight:400!important}

/* tables */
html.ttf main table:not(:is(.ttf-screen) *){border-color:var(--f-edge)!important;color:var(--f-soft)}
html.ttf main :is(thead,thead tr,th):not(:is(.ttf-screen) *){background:var(--f-ink)!important;color:var(--f-cyan)!important;border-color:var(--f-edge)!important}
html.ttf main :is(td,tr):not(:is(.ttf-screen) *){border-color:var(--f-edge)!important}
html.ttf main tbody tr:nth-child(even):not(:is(.ttf-screen) *){background:rgba(255,255,255,.025)!important}

/* details / FAQ */
html.ttf main details:not(:is(.ttf-screen) *){border-color:var(--f-edge)!important}
html.ttf main summary:not(:is(.ttf-screen) *){color:var(--f-text)!important;cursor:pointer}

/* game screen: neon frame only around it, nothing inside touched */
html.ttf .ttf-screen{border-color:var(--f-pink)!important;border-radius:8px!important;box-shadow:0 0 0 4px var(--f-ink),0 0 0 6px var(--f-pink),0 0 40px -6px rgba(255,95,162,.55)!important}

/* typing test / lessons: keep engine look, hide theme switch (site is always dark) */
html.ttf div:has(> #theme-toggle){visibility:hidden}

/* long-form reading: brighter panel, no glow, comfortable measure */
html.ttf.ttf-read main{font-size:17px}
html.ttf.ttf-read main :is(article,.prose,[data-tt-article]):not(:is(.ttf-screen) *){background:#24234f!important;border:2px solid var(--f-edge);border-radius:6px;padding:clamp(18px,4vw,40px)!important;color:#e9e6ff}
html.ttf.ttf-read main :is(p,li):not(:is(.ttf-screen) *){line-height:1.75}
html.ttf.ttf-read main :is(p,li,td){color:#e6e2ff}

/* misc */
html.ttf hr{border-color:var(--f-edge)}
html.ttf img{max-width:100%}
html.ttf main input:not(:is(#typing-interface) *),html.ttf main select{background:var(--f-ink);color:var(--f-text);border-color:var(--f-edge)}
html.ttf .ttf-hide{display:none!important}

/* gradient / dark cards keep white headings */
html.ttf main :is(.text-white,[class*="bg-gradient-to"],.bg-slate-900,.bg-indigo-600) :is(h2,h3):not(:is(.ttf-screen,#typing-interface,#results-dashboard) *){color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.25)}
/* decorative blobs must never widen the page */
html.ttf main section,html.ttf main>div,html.ttf main article{overflow-x:clip}
/* game hub / category: page-level Back + language select duplicate the header */
html.ttf main div:has(> a + div > select[aria-label="Select Language"]){display:none!important}
html.ttf main.pt-24{padding-top:1.5rem!important}
@media (max-width:640px){
  html.ttf main .mb-24{margin-bottom:3rem!important}
  html.ttf main .mb-20{margin-bottom:2.5rem!important}
  html.ttf main table:not(:is(.ttf-screen,#typing-interface) *){display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}

/* ---------- WORLD 1 quest map (home) ---------- */
html.ttf .ttf-map{padding:64px 0 40px;position:relative}
html.ttf .ttf-mapw{max-width:1180px;margin:0 auto;padding:0 16px}
html.ttf .ttf-map .ttf-kick{font:600 13px var(--f-mono)!important;letter-spacing:.14em;color:var(--f-cyan)!important;margin:0 0 10px}
html.ttf .ttf-map h2{margin:0 0 10px}
html.ttf .ttf-map .ttf-msub{color:var(--f-muted)!important;max-width:620px;margin:0 0 30px;font-size:16px}
html.ttf .ttf-isles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
html.ttf .ttf-isles:before{content:"";position:absolute;left:8%;right:8%;top:58px;border-top:3px dashed var(--f-edge);z-index:0}
html.ttf .ttf-isle{position:relative;z-index:1;background:var(--f-bg2);border:2px solid var(--c);border-radius:6px;padding:18px 16px 18px;
  box-shadow:0 0 0 4px var(--f-ink),0 0 28px -8px var(--c);display:flex;flex-direction:column;gap:8px}
html.ttf .ttf-isle-1{--c:var(--f-lime)}html.ttf .ttf-isle-2{--c:var(--f-cyan)}html.ttf .ttf-isle-3{--c:var(--f-pink)}html.ttf .ttf-isle-4{--c:var(--f-amber)}
html.ttf .ttf-stage{font:8px/1.5 var(--f-px);color:var(--c)}
html.ttf .ttf-ico{font-size:34px;line-height:1;width:64px;height:64px;display:grid;place-items:center;background:var(--f-ink);border:2px solid var(--c);border-radius:10px}
html.ttf .ttf-isle h3{font-size:17px!important;margin:4px 0 0;color:var(--f-text)!important}
html.ttf .ttf-isle p{color:var(--f-soft)!important;font-size:14px;line-height:1.5;margin:0;flex:1}
html.ttf .ttf-kc{align-self:flex-start;display:inline-flex;align-items:center;min-height:42px;padding:0 14px;margin-top:6px;border-radius:9px;
  background:var(--f-lime);color:#14200a!important;border:1px solid #a6dc1f;box-shadow:0 5px 0 var(--f-lime-d);font:9px/1.4 var(--f-px);text-decoration:none!important;transition:transform .08s,box-shadow .08s}
html.ttf .ttf-kc:hover{filter:brightness(1.08)}
html.ttf .ttf-kc:active{transform:translateY(4px);box-shadow:0 1px 0 var(--f-lime-d)}
html.ttf .ttf-isle-2 .ttf-kc{background:var(--f-cyan);border-color:#8eefff;box-shadow:0 5px 0 var(--f-cyan-d)}
html.ttf .ttf-isle-3 .ttf-kc,html.ttf .ttf-kc-pink{background:var(--f-pink);color:#2a0016!important;border-color:#ff8cbd;box-shadow:0 5px 0 var(--f-pink-d)}
html.ttf .ttf-isle-4 .ttf-kc{background:var(--f-amber);color:#2a1800!important;border-color:#ffd08a;box-shadow:0 5px 0 var(--f-amber-d)}
html.ttf .ttf-loop{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;border:2px dashed var(--f-pink);border-radius:6px;background:rgba(255,95,162,.06)}
html.ttf .ttf-loopk{font:10px/1.5 var(--f-px);color:var(--f-pink)}
html.ttf .ttf-loop p{flex:1;min-width:220px;margin:0;color:var(--f-soft)!important;font-size:15px}
html.ttf .ttf-loop .ttf-kc{margin-top:0}
@media (max-width:980px){html.ttf .ttf-isles{grid-template-columns:1fr 1fr}html.ttf .ttf-isles:before{display:none}}
@media (max-width:520px){html.ttf .ttf-isles{grid-template-columns:1fr;gap:20px}html.ttf .ttf-map{padding-top:40px}}

/* ---------- home "Typing Journey Hub" card: stack its floating cards on phones ---------- */
@media (max-width:540px){
  html.ttf main [class*="h-[360px]"]{height:auto!important;display:flex!important;flex-direction:column;gap:14px;padding:16px 14px 18px}
  html.ttf main [class*="h-[360px]"]>.absolute{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;min-width:0!important;margin:0!important}
  html.ttf main [class*="h-[360px]"]>.absolute:is(.pointer-events-none,.h-3,.h-4){display:none!important}
  html.ttf main [class*="h-[360px]"]>.absolute:has(> .absolute.-top-10){margin-top:34px!important}
}