@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* PlayZone Teens — a Light Bearer / Ambassadors experience layered over the kid app.
   Everything is scoped under #teenzone so the children's app styles are untouched. */

#teenzone{position:fixed;inset:0;z-index:1200;overflow:auto;display:none;
  --navy:#0A3A6B;--teal:#2FB8A0;--gold:#F2C230;--coral:#F0556B;
  --body:'Inter',system-ui,Arial,sans-serif;--maxw:1080px;
  font-family:var(--body);background:var(--tz-bg);color:var(--tz-ink)}
#teenzone.show{display:block}
body.tz-on{overflow:hidden}

#teenzone.tz-lb{
  --tz-bg:#eaf4fb;--tz-surface:#ffffff;--tz-ink:#0A3A6B;--tz-muted:#5c7591;--tz-line:#e2ecf5;
  --tz-primary:var(--teal);--tz-primary-ink:#08463c;--tz-chip:#effaf7;--tz-chip-ink:#137a68;--tz-hero-ink:#08324f;--tz-rad:20px;
  --tz-display:'Fredoka','Inter',sans-serif;
  --tz-hero:radial-gradient(120% 140% at 8% 0%,#bff0e6 0%,#8fd9ec 34%,#f6e2a8 78%,#ffd98a 100%);}
#teenzone.tz-amb{
  --tz-bg:#071630;--tz-surface:#0f2647;--tz-ink:#EAF1F8;--tz-muted:#9db3cd;--tz-line:rgba(242,194,48,.18);
  --tz-primary:var(--gold);--tz-primary-ink:#2a2200;--tz-chip:rgba(242,194,48,.10);--tz-chip-ink:#f0cf6b;--tz-hero-ink:#EAF1F8;--tz-rad:13px;
  --tz-display:'Space Grotesk','Inter',sans-serif;
  --tz-hero:linear-gradient(150deg,#0a1f3d 0%,#0b264c 46%,#0a3358 100%);}
/* Kingdom Influencers — Ambassador-style richness, a distinct royal-violet palette */
#teenzone.tz-ki{
  --tz-bg:#170a2f;--tz-surface:#241247;--tz-ink:#F3EEFB;--tz-muted:#b8a8d6;--tz-line:rgba(240,168,107,.18);
  --tz-primary:#F0A86B;--tz-primary-ink:#2a1400;--tz-chip:rgba(240,168,107,.12);--tz-chip-ink:#f3ba8b;--tz-hero-ink:#F3EEFB;--tz-rad:14px;
  --tz-display:'Space Grotesk','Inter',sans-serif;
  --tz-hero:linear-gradient(150deg,#1e0f40 0%,#3a1a68 46%,#5f2c8c 100%);}
#teenzone.tz-ki .amb-only{display:none} #teenzone.tz-ki .lb-only{display:none}
#teenzone.tz-ki .avatar{background:linear-gradient(135deg,#b45ce0,#5f2c8c);color:#fff}
#teenzone.tz-ki .hero .tag{color:#e4d6f6}
#teenzone.tz-ki .hero::before{content:"";position:absolute;inset:12px;border:1px solid rgba(240,168,107,.22);border-radius:16px;z-index:1;pointer-events:none}

#teenzone *{box-sizing:border-box}
#teenzone h1,#teenzone h2,#teenzone h3,#teenzone h4{font-family:var(--tz-display);margin:0;line-height:1.08;color:var(--tz-ink)}
#teenzone .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
#teenzone .eyebrow{font-family:var(--tz-display);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--tz-primary)}
#teenzone .amb-only{display:none}
#teenzone.tz-amb .amb-only{display:inline}
#teenzone.tz-amb .lb-only{display:none}

/* top bar */
#teenzone .topbar{position:sticky;top:0;z-index:5;backdrop-filter:blur(8px);background:color-mix(in srgb,var(--tz-surface) 85%,transparent);border-bottom:1px solid var(--tz-line)}
#teenzone .topbar .row{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;flex-wrap:nowrap;overflow-x:hidden}
#teenzone .brand{display:flex;align-items:center;gap:10px;font-family:var(--tz-display);font-weight:700;font-size:18px;flex:0 1 auto}
#teenzone .brand img{height:34px;width:auto;display:block;flex:none}
#teenzone .brand .tt{color:var(--tz-ink);white-space:nowrap} #teenzone .brand .tt b{color:var(--tz-primary)}
#teenzone .brand .for{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tz-muted);padding-left:10px;margin-left:2px;border-left:1px solid var(--tz-line);white-space:nowrap}
#teenzone nav.tnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;justify-content:center}
#teenzone nav.tnav button{font-family:var(--body);font-weight:600;font-size:14px;color:var(--tz-muted);background:transparent;border:0;cursor:pointer;padding:8px 11px;border-radius:9px}
#teenzone nav.tnav button.on{color:var(--tz-ink)}
#teenzone nav.tnav button:hover{color:var(--tz-ink)}
#teenzone .tactions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
#teenzone .tzso{padding:8px 13px;font-size:13px}
#teenzone .starpill{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;background:var(--tz-chip);color:var(--tz-chip-ink);padding:7px 13px;border-radius:999px;border:1px solid var(--tz-line);white-space:nowrap}
#teenzone .avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--tz-display);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--teal),var(--navy))}
#teenzone.tz-amb .avatar{background:linear-gradient(135deg,#c99b1e,#7a5b00);color:#1a1400}
@media(max-width:1024px){#teenzone nav.tnav{display:none}}
@media(max-width:1400px){#teenzone .brand .for{display:none}}

/* hero */
#teenzone .hero{background:var(--tz-hero);color:var(--tz-hero-ink);position:relative;overflow:hidden;border-bottom:1px solid var(--tz-line)}
#teenzone .hero .wrap{padding:34px 20px 30px;position:relative;z-index:2}
#teenzone .hero h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.01em;margin:8px 0 6px;color:var(--tz-hero-ink)}
#teenzone .hero .tag{font-size:clamp(15px,2.2vw,18px);font-weight:600;max-width:42ch;opacity:.94}
#teenzone.tz-amb .hero .tag{color:#dbe7f5}
#teenzone.tz-lb .hero::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#fff7de 0%,rgba(255,247,222,0) 70%);opacity:.85}
#teenzone .crest{position:absolute;right:24px;top:22px;z-index:3;display:none}
#teenzone.tz-amb .crest{display:block}
#teenzone.tz-amb .hero::before{content:"";position:absolute;inset:12px;border:1px solid rgba(242,194,48,.22);border-radius:16px;z-index:1;pointer-events:none}
#teenzone.tz-amb .hero .eyebrow,#teenzone.tz-amb .hero h1,#teenzone.tz-amb .hero .tag{padding-right:84px}
@media(max-width:640px){#teenzone .crest{display:none!important}#teenzone.tz-amb .hero .eyebrow,#teenzone.tz-amb .hero h1,#teenzone.tz-amb .hero .tag{padding-right:0}}
@media(max-width:520px){#teenzone .continue{flex-wrap:wrap}#teenzone .continue .btn{width:100%;justify-content:center}}

#teenzone .continue{margin-top:22px;background:var(--tz-surface);color:var(--tz-ink);border-radius:var(--tz-rad);border:1px solid var(--tz-line);padding:16px;display:flex;gap:15px;align-items:center;box-shadow:0 14px 34px rgba(6,28,54,.14);max-width:640px}
#teenzone .continue .thumb{width:60px;height:60px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:28px;background:var(--tz-chip)}
#teenzone .continue .meta{flex:1;min-width:0}
#teenzone .continue .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--tz-primary)}
#teenzone .continue .t{font-family:var(--tz-display);font-weight:600;font-size:17px;margin:2px 0 3px}
#teenzone .continue .s{font-size:12.5px;color:var(--tz-muted)}

#teenzone .btn{font-family:var(--body);font-weight:700;font-size:14px;border:0;cursor:pointer;border-radius:11px;padding:11px 17px;background:var(--tz-primary);color:var(--tz-primary-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s}
#teenzone .btn:hover{transform:translateY(-1px)}
#teenzone .btn.ghost{background:transparent;border:1px solid var(--tz-line);color:var(--tz-ink)}
/* Light Bearer solid buttons: white on a deeper teal (dark-on-teal read as muddy black-on-green) */
#teenzone.tz-lb .btn:not(.ghost){background:#0b7d6a;color:#ffffff}
#teenzone.tz-lb .btn:not(.ghost):hover{background:#0a6d5c}

#teenzone section.band{padding:30px 0}
#teenzone .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:15px}
#teenzone .head h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.01em}
#teenzone .head .sub{color:var(--tz-muted);font-size:13px;font-weight:500}
#teenzone .head .more{font-weight:700;font-size:13px;color:var(--tz-primary);background:transparent;border:0;cursor:pointer}

#teenzone .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
@media(max-width:900px){#teenzone .rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){#teenzone .rail{grid-template-columns:1fr}}
#teenzone .rail::-webkit-scrollbar{height:8px}#teenzone .rail::-webkit-scrollbar-thumb{background:var(--tz-line);border-radius:8px}
#teenzone .card{background:var(--tz-surface);border:1px solid var(--tz-line);border-radius:var(--tz-rad);overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;transition:transform .14s,box-shadow .2s,border-color .2s;cursor:pointer}
#teenzone .card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(6,28,54,.14);border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .card .top{height:58px;display:grid;place-items:center;font-size:26px}
#teenzone .card .body{padding:10px 12px 12px}
#teenzone .card .kind{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tz-primary)}
#teenzone .card h3{font-family:var(--tz-display);font-size:14.5px;font-weight:600;margin:2px 0 4px;line-height:1.15}
#teenzone .card p{margin:0;font-size:12px;color:var(--tz-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#teenzone .c1{background:linear-gradient(135deg,#d3f3ea,#a9e6d7)}
#teenzone .c2{background:linear-gradient(135deg,#dfe9ff,#c2d3ff)}
#teenzone .c3{background:linear-gradient(135deg,#ffe6cf,#ffd0a6)}
#teenzone .c4{background:linear-gradient(135deg,#f4e2ff,#e3c2ff)}
#teenzone .c5{background:linear-gradient(135deg,#ffe0e6,#ffc2cf)}
#teenzone.tz-amb .card .top{background:linear-gradient(150deg,#0b2547,#123159)!important}

#teenzone .scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
#teenzone .scenc{background:var(--tz-surface);border:1px solid var(--tz-line);border-radius:var(--tz-rad);padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:transform .14s,box-shadow .2s,border-color .2s}
#teenzone .scenc:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(6,28,54,.16);border-color:color-mix(in srgb,var(--coral) 50%,var(--tz-line))}
#teenzone .scenc .tagx{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#c0392b;background:#fdecec;padding:4px 9px;border-radius:999px}
#teenzone.tz-amb .scenc .tagx{color:#ffb3a1;background:rgba(240,85,107,.14)}
#teenzone .scenc h3{font-family:var(--tz-display);font-size:17px;font-weight:600;line-height:1.2}
#teenzone .scenc p{margin:0;font-size:13px;color:var(--tz-muted);line-height:1.5}
#teenzone .scenc .go{margin-top:auto;font-weight:700;font-size:13px;color:var(--tz-primary)}

#teenzone .explore{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#teenzone .tile{background:var(--tz-surface);border:1px solid var(--tz-line);border-radius:14px;padding:16px 14px;text-align:center;cursor:pointer;transition:transform .14s,border-color .2s}
#teenzone .tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .tile .ic{font-size:29px}
#teenzone .tile .nm{font-family:var(--tz-display);font-weight:600;font-size:14px;margin-top:6px}

#teenzone .journey{display:grid;grid-template-columns:1.1fr 1.5fr;gap:16px}
@media(max-width:760px){#teenzone .journey{grid-template-columns:1fr}}
#teenzone .panel{background:var(--tz-surface);border:1px solid var(--tz-line);border-radius:var(--tz-rad);padding:20px}
#teenzone .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#teenzone .stat{background:var(--tz-chip);border-radius:13px;padding:14px}
#teenzone .stat b{font-family:var(--tz-display);font-size:25px;display:block;line-height:1}
#teenzone .stat span{font-size:11px;color:var(--tz-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
#teenzone .badges{display:flex;flex-wrap:wrap;gap:10px}
#teenzone .badge{display:flex;align-items:center;gap:9px;border:1px solid var(--tz-line);border-radius:12px;padding:9px 12px;font-weight:600;font-size:13px}
#teenzone .badge .b{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--tz-chip)}
#teenzone .badge.locked{opacity:.45}

#teenzone .weekly{border-radius:var(--tz-rad);padding:24px;border:1px solid var(--tz-line);overflow:hidden}
#teenzone.tz-lb .weekly{background:linear-gradient(120deg,#e7f8f3,#fff5db)}
#teenzone.tz-amb .weekly{background:linear-gradient(120deg,#0c2447,#0f2c54)}
#teenzone .weekly .k{font-family:var(--tz-display);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--tz-primary)}
#teenzone .weekly h3{font-size:22px;margin:6px 0 8px}
#teenzone .weekly p{margin:0 0 16px;font-size:14px;color:var(--tz-muted);max-width:62ch;line-height:1.55}

#teenzone .scripture{border-radius:var(--tz-rad);border:1px solid var(--tz-line);overflow:hidden;background:var(--tz-surface)}
#teenzone .scripture .verse{padding:24px;font-family:var(--tz-display);font-weight:500;font-size:clamp(18px,3vw,25px);line-height:1.35;border-bottom:1px solid var(--tz-line)}
#teenzone .scripture .ref{display:block;font-family:var(--body);font-weight:700;font-size:13px;color:var(--tz-primary);margin-top:12px}
#teenzone .rtsl .tabh{display:flex;border-bottom:1px solid var(--tz-line)}
#teenzone .rtsl .tabh button{flex:1;background:transparent;border:0;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13px;color:var(--tz-muted);padding:13px 8px;border-bottom:2px solid transparent}
#teenzone .rtsl .tabh button.on{color:var(--tz-ink);border-bottom-color:var(--tz-primary)}
#teenzone .rtsl .pane{padding:18px 22px;font-size:14px;color:var(--tz-muted);line-height:1.6}

#teenzone .escape{border:1px dashed var(--tz-line);border-radius:var(--tz-rad);padding:18px 20px;display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
#teenzone .escape .txt{font-size:14px;color:var(--tz-muted)}
#teenzone .escape b{color:var(--tz-ink)}
#teenzone footer.tf{padding:24px 0 56px;color:var(--tz-muted);font-size:12.5px;text-align:center}

/* scenario modal */
#teenzone .tmodal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(6,18,38,.62)}
#teenzone .tmodal.open{display:flex}
#teenzone .sheet{background:var(--tz-surface);color:var(--tz-ink);border:1px solid var(--tz-line);border-radius:18px;max-width:520px;width:100%;padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.4);max-height:90vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
/* While a game-card modal is open, hide the floating docks (escape bar + help button)
   so they can never cover the Claim / Next buttons, and the sheet scrolls clear. */
body.tz-modal #tzEscape{display:none!important}
body.tz-modal #kidHelpBtn{display:none!important}
/* Never let the fixed docks sit on top of the last buttons of any teen screen. */
@media(max-width:1024px){ body.tz-on #teenzone{padding-bottom:96px} }
@media(max-width:640px){ #teenzone .tmodal{align-items:flex-start;padding:12px 12px 84px} }
#teenzone .sheet h3{font-family:var(--tz-display);font-size:22px;margin-bottom:6px}
#teenzone .sheet .sit{font-size:15px;line-height:1.55;margin:10px 0 16px}
#teenzone .opt{display:block;width:100%;text-align:left;border:1px solid var(--tz-line);background:transparent;color:var(--tz-ink);border-radius:12px;padding:13px 15px;font:inherit;font-size:14px;cursor:pointer;margin-bottom:10px;transition:.15s}
#teenzone .opt:hover{border-color:var(--tz-primary)}
#teenzone .opt.right{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 15%,transparent)}
#teenzone .opt.wrong{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
#teenzone .reveal{display:none;margin-top:6px;border-top:1px solid var(--tz-line);padding-top:14px}
#teenzone .reveal.show{display:block}
#teenzone .reveal .lab{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tz-primary)}
#teenzone .reveal p{font-size:14px;line-height:1.55;margin:6px 0 10px}
#teenzone .reveal .v{font-style:italic;color:var(--tz-muted);font-size:13.5px}
#teenzone .x{float:right;border:0;background:var(--tz-chip);color:var(--tz-ink);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:16px}

/* re-open pill (shown after escaping to the full app) */
#tzReopen{position:fixed;left:16px;bottom:16px;z-index:1100;display:none;align-items:center;gap:8px;border:0;cursor:pointer;
  font-family:'Fredoka','Inter',sans-serif;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,#2FB8A0,#0A3A6B);
  padding:11px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(10,58,107,.35)}
#tzReopen.show{display:inline-flex}

/* ---- "Where I stand" standing panel (child-safe teen board) ---- */
#teenzone .seg{display:inline-flex;background:var(--tz-chip);border:1px solid var(--tz-line);border-radius:999px;padding:3px}
#teenzone .segb{font-family:var(--body);font-weight:700;font-size:12.5px;color:var(--tz-muted);background:transparent;border:0;cursor:pointer;padding:6px 13px;border-radius:999px}
#teenzone .segb.on{background:var(--tz-surface);color:var(--tz-ink);box-shadow:0 1px 3px rgba(6,28,54,.12)}
#teenzone .standing{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch}
@media(max-width:560px){#teenzone .standing{grid-template-columns:1fr}}
#teenzone .rankwrap{background:var(--tz-chip);border:1px solid var(--tz-line);border-radius:var(--tz-rad);padding:18px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:132px}
#teenzone .rankbig{font-family:var(--tz-display);font-weight:700;font-size:clamp(38px,7vw,52px);line-height:1;color:var(--tz-primary)}
#teenzone .ranksub{margin-top:6px;text-align:center;display:flex;flex-direction:column;gap:2px}
#teenzone .ranksub #tzRankOf{font-weight:700;font-size:14px;color:var(--tz-ink)}
#teenzone .rankgrp{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--tz-muted)}
#teenzone .ladder{display:flex;flex-direction:column;gap:8px;justify-content:center;background:var(--tz-surface);border:1px solid var(--tz-line);border-radius:var(--tz-rad);padding:12px 14px;color:var(--tz-ink)}
#teenzone .lrow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;border:1px solid transparent}
#teenzone .lrow .lpos{font-family:var(--tz-display);font-weight:700;font-size:14px;color:var(--tz-muted);min-width:34px}
#teenzone .lrow .lwho{flex:1;font-weight:600;font-size:13.5px;color:var(--tz-muted)}
#teenzone .lrow .lstars{font-weight:700;font-size:14px;color:var(--tz-ink)}
#teenzone .lrow.you{background:var(--tz-chip);border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .lrow.you .lpos,#teenzone .lrow.you .lwho{color:var(--tz-primary)}
#teenzone .standfoot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;margin-top:14px;font-size:13.5px}
#teenzone .standfoot #tzToNext{font-weight:700;color:var(--tz-ink)}
#teenzone .standfoot #tzGroupTop{color:var(--tz-muted);font-weight:600}

/* ---- Weekly challenge CTA ---- */
#teenzone .wkcta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
#teenzone .wkcta .btn:disabled{cursor:default;opacity:.9}
#teenzone .wkstate{font-weight:700;font-size:13px;color:var(--tz-primary)}
#teenzone.tz-amb .wkstate{color:var(--tz-chip-ink)}

/* ---- Decision Lab ---- */
#teenzone .scenc.dlc{position:relative}
#teenzone .scenc.dlc .dldone{display:none;position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tz-primary-ink);background:var(--tz-primary);padding:3px 8px;border-radius:999px}
#teenzone .scenc.dlc.done .dldone{display:inline-block}
#teenzone .scenc.dlc.done{border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .scenc.dlc.done .go{color:var(--tz-muted)}
#teenzone .dlfb{font-size:14px;line-height:1.5;border-radius:12px;padding:11px 13px;margin-bottom:14px;border:1px solid var(--tz-line)}
#teenzone .dlfb.ok{color:#0f7a63;background:color-mix(in srgb,var(--teal) 12%,transparent);border-color:color-mix(in srgb,var(--teal) 40%,var(--tz-line))}
#teenzone .dlfb.no{color:#b23b4e;background:color-mix(in srgb,var(--coral) 10%,transparent);border-color:color-mix(in srgb,var(--coral) 35%,var(--tz-line))}
#teenzone.tz-amb .dlfb.ok{color:#7fe0cd} #teenzone.tz-amb .dlfb.no{color:#ffb3a1}
#teenzone .dlconf{margin-top:12px;font-family:var(--tz-display);font-weight:600;font-size:15px;line-height:1.4;color:var(--tz-ink);background:var(--tz-chip);border-left:3px solid var(--tz-primary);border-radius:10px;padding:12px 14px}
#teenzone .dlaward{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- Find a card (search) ---- */
#teenzone .tzfind-input{width:100%;font:inherit;font-size:15px;color:var(--tz-ink);background:var(--tz-surface,#fff);border:1px solid var(--tz-line);border-radius:12px;padding:12px 14px;margin:10px 0 8px;outline:none}
#teenzone .tzfind-input:focus{border-color:var(--tz-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--tz-primary) 18%,transparent)}
#teenzone .tzfind-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tz-muted);margin-bottom:10px}
#teenzone .tzfind-toggle input{width:auto}
#teenzone .tzfind-results{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
#teenzone .tzfind-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--tz-chip);border:1px solid var(--tz-line);border-radius:12px;padding:11px 13px;color:var(--tz-ink)}
#teenzone .tzfind-row:hover{border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .tzfind-row .fr-ic{font-size:20px;flex:none;width:24px;text-align:center}
#teenzone .tzfind-row .fr-main{flex:1;min-width:0;display:flex;flex-direction:column}
#teenzone .tzfind-row .fr-title{font-family:var(--tz-display);font-weight:600;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#teenzone .tzfind-row .fr-meta{font-size:12px;color:var(--tz-muted);margin-top:2px}
#teenzone .tzfind-row .fr-played{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tz-primary-ink);background:var(--tz-primary);border-radius:999px;padding:3px 8px}
#teenzone.tz-lb .tzfind-row .fr-played{background:#0b7d6a;color:#fff}
#teenzone .tzfind-empty{color:var(--tz-muted);font-size:13.5px;padding:18px 4px;text-align:center}

/* ---- Lobby (game tiles) ---- */
#teenzone .games2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
#teenzone .gtile{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;cursor:pointer;width:100%;background:var(--tz-surface,#fff);border:1px solid var(--tz-line);border-radius:16px;padding:16px;color:var(--tz-ink);transition:transform .12s,border-color .12s}
#teenzone .gtile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tz-primary) 45%,var(--tz-line))}
#teenzone .gtile .gt-ic{font-size:28px;flex:none;width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--tz-chip)}
#teenzone .gtile .gt-body{flex:1;min-width:0}
#teenzone .gtile .gt-name{font-family:var(--tz-display);font-weight:600;font-size:17px;line-height:1.15}
#teenzone .gtile .gt-sub{font-size:12.5px;color:var(--tz-muted);margin:2px 0 8px}
#teenzone .gtile .gt-prog{display:flex;align-items:center;gap:8px}
#teenzone .gtile .gt-bar{flex:1;height:7px;border-radius:999px;background:var(--tz-chip);overflow:hidden}
#teenzone .gtile .gt-bar i{display:block;height:100%;background:var(--tz-primary);border-radius:999px}
#teenzone.tz-lb .gtile .gt-bar i{background:#0b7d6a}
#teenzone .gtile .gt-prog span{flex:none;font-size:11.5px;color:var(--tz-muted);font-variant-numeric:tabular-nums}
#teenzone .gtile .gt-cta{flex:none;font-family:var(--tz-display);font-weight:600;font-size:14px;color:var(--tz-primary)}
#teenzone.tz-lb .gtile .gt-cta{color:#0b7d6a}

/* ---- Deck player ---- */
#teenzone .dlhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 30px 12px 0}
#teenzone .dlprog{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tz-muted)}
#teenzone .dlstreak{flex:none;font-size:12px;font-weight:800;color:#8a3b00;background:linear-gradient(0deg,#ffe8b0,#ffd67a);border:1px solid #f2c230;border-radius:999px;padding:3px 10px;white-space:nowrap}
#teenzone.tz-amb .dlstreak{color:#2a2200}
#teenzone .dlstreak.pop{animation:tzpop .32s ease}
@keyframes tzpop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
#teenzone .dld-panel{text-align:center;padding:20px 6px 8px}
#teenzone .dld-panel .dld-emoji{font-size:42px;line-height:1;margin-bottom:8px}
#teenzone .dld-panel h3{font-family:var(--tz-display);font-size:20px;margin:0 0 6px}
#teenzone .dld-panel p{color:var(--tz-muted);font-size:14px;line-height:1.5;margin:0 auto 16px;max-width:42ch}
#teenzone .dld-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===================== Responsive app bar (WCAG-friendly) ===================== */
#teenzone .tzbrand{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;flex:0 0 auto}
#teenzone .tzbrand:focus-visible{outline:3px solid var(--tz-primary);outline-offset:3px;border-radius:10px}

#teenzone .tznav{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-start}
#teenzone .tzmenu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
#teenzone .tzmenu>li{position:relative;flex:none}
#teenzone .tzlink{font:inherit;font-weight:600;font-size:15px;color:var(--tz-ink);background:transparent;border:0;border-radius:10px;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;gap:6px;line-height:1;cursor:pointer;white-space:nowrap}
#teenzone .tzlink .tzbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#F0556B;color:#fff;font-size:11px;font-weight:800;line-height:1}
#teenzone .tzlink .tzbadge[hidden]{display:none}
#teenzone .tzlink:hover{background:color-mix(in srgb, var(--tz-primary) 14%, transparent)}
#teenzone .tzlink[aria-current="page"]{color:var(--tz-primary);font-weight:800}
#teenzone .tzlink:focus-visible,#teenzone .tzsublink:focus-visible,#teenzone .tzburger:focus-visible,#teenzone .tzso:focus-visible{outline:3px solid var(--tz-primary);outline-offset:2px}
#teenzone .tzchev{width:14px;height:14px;flex:none;transition:transform .18s ease}
#teenzone .tztrig[aria-expanded="true"] .tzchev{transform:rotate(180deg)}

/* dropdown (desktop) — fixed light surface so text stays readable on both themes */
#teenzone .tzsub{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#ffffff;border:1px solid #e2ecf5;border-radius:14px;box-shadow:0 20px 44px rgba(10,42,78,.18);padding:8px;margin:0;list-style:none;display:none;z-index:60}
#teenzone .tztrig[aria-expanded="true"] + .tzsub{display:block}
#teenzone .tzsub li{list-style:none}
#teenzone .tzsublink{width:100%;text-align:left;font:inherit;font-weight:600;font-size:14.5px;color:#0A3A6B;background:transparent;border:0;border-radius:10px;padding:11px 12px;min-height:44px;display:flex;align-items:center;gap:10px;cursor:pointer}
#teenzone .tzsublink:hover{background:#eef5fb}
#teenzone .tznav-foot{display:none}

/* actions + burger */
#teenzone .tactions{flex:0 0 auto}
#teenzone .tzburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:#fff;border:1px solid #dbe6f2;border-radius:12px;cursor:pointer}
#teenzone .tzburger-box{position:relative;display:block;width:20px;height:14px}
#teenzone .tzburger-box span{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:#0A3A6B;transition:transform .2s ease,opacity .2s ease}
#teenzone .tzburger-box span:nth-child(1){top:0}
#teenzone .tzburger-box span:nth-child(2){top:6px}
#teenzone .tzburger-box span:nth-child(3){top:12px}
#teenzone .tzburger[aria-expanded="true"] .tzburger-box span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#teenzone .tzburger[aria-expanded="true"] .tzburger-box span:nth-child(2){opacity:0}
#teenzone .tzburger[aria-expanded="true"] .tzburger-box span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#teenzone .tzsr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#teenzone .tzscrim{display:none}

/* -------- Mobile / tablet (drawer) -------- */
@media (max-width: 1400px){
  #teenzone .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--tz-surface);z-index:130}  /* let the fixed drawer escape to the viewport + stack above the scrim */
  #teenzone .tzburger{display:inline-flex;position:relative;z-index:140}
  #teenzone .tzso-desktop,#teenzone .tactions .avatar{display:none}
  #teenzone .brand .for{display:none}                 /* keep the bar compact */
  #teenzone .tznav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;color:#0A3A6B;
    transform:translateX(102%);transition:transform .24s ease;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
    padding:74px 16px 24px;box-shadow:-24px 0 60px rgba(10,42,78,.24);overflow-y:auto;z-index:120}
  #teenzone.tz-menu-open .tznav{transform:translateX(0)}
  #teenzone .tzmenu{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  #teenzone .tzmenu>li{position:static}
  #teenzone .tznav .tzlink{color:#0A3A6B;width:100%;justify-content:space-between;font-size:16px;min-height:50px;padding:12px 14px;border-radius:12px}
  #teenzone .tznav .tzlink:hover{background:#eef5fb}
  #teenzone .tzsub{position:static;display:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:2px 0 8px 14px;background:transparent}
  #teenzone .tztrig[aria-expanded="true"] + .tzsub{display:block}
  #teenzone .tzsublink{min-height:48px;font-size:15.5px}
  #teenzone .tznav-foot{display:block;margin-top:14px;padding-top:14px;border-top:1px solid #e2ecf5}
  #teenzone .tznav-foot .btn{width:100%}
  /* The mobile drawer is always white, so the Sign out button must use dark ink regardless
     of theme — otherwise the Ambassador theme's light --tz-ink renders it white-on-white. */
  #teenzone .tznav-foot .btn.ghost{color:#0A3A6B;background:#fff;border:1.5px solid #cdd9e6;font-weight:700}
  #teenzone .tznav-foot .btn.ghost:hover{background:#eef5fb;border-color:#b7c6d8}
  #teenzone .tzscrim{display:block;position:fixed;inset:0;background:rgba(10,42,78,.45);z-index:110}
  #teenzone .tzscrim[hidden]{display:none}
}
@media (max-width: 380px){
  #teenzone .brand .tt{display:none}                  /* tiny screens: logo only */
}

@media (prefers-reduced-motion: reduce){#teenzone *{transition:none!important}}

/* hero action row + unified streak card */
#teenzone .tzhero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
#teenzone .tzcta{background:#1f9e88;color:#fff;border:none;border-radius:999px;padding:11px 20px;font-weight:800;font-size:14px;cursor:pointer}
#teenzone .tzcta:hover{background:#188272}
#teenzone #thubPill{background:#2FB8A0}#teenzone #thubPill:hover{background:#1E9C86}
#teenzone .obcs-card{align-self:stretch;min-height:0;max-height:none;padding:12px 14px;border-radius:var(--tz-rad);justify-content:flex-start}
#teenzone .obcs-card .fl{font-size:22px}#teenzone .obcs-card .n{font-size:26px}#teenzone .obcs-card .l{font-size:12px}#teenzone .obcs-card .d{font-size:10.5px}