*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #F5F7FA; --surface: #FFFFFF; --surface2: #ECEEF2;
    --border: rgba(0,0,0,0.09); --border-med: rgba(0,0,0,0.15);
    --text: #17191F; --text-2: #60646E; --text-3: #9DA1AB;
    --indigo: #3D52C4; --indigo-light: #EEF1FC; --indigo-text: #2A3A9E;
    --red: #C94040; --red-light: #FDF0F0; --red-text: #9B2F2F;
    --amber: #B87020; --amber-light: #FDF5E8; --amber-text: #8A5218;
    --green: #1A9464; --green-light: #E8F6F1; --green-text: #0D6647;
    --radius: 10px;
  }
  body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; }
  .header-outer { background: var(--surface); border-bottom: 1px solid var(--border); }
  header { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.5rem 1.25rem; }
  .header-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); margin-bottom: 3px; }
  h1 { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.25; }
  .page { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }

  .hw-nav{display:inline-flex;gap:4px;background:var(--surface2);padding:4px;border-radius:10px;margin-bottom:14px;flex-wrap:wrap;}
  .hw-nav-btn{background:transparent;border:none;color:var(--text-2);padding:8px 15px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:7px;}
  .hw-nav-btn.active{background:var(--indigo);color:#fff;}
  .hw-pane{display:none;}
  .hw-pane.active{display:block;}
  .hw-intro{background:var(--indigo-light);border:1px solid rgba(61,82,196,0.18);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;}
  .hw-intro .label{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--indigo-text);margin-bottom:4px;}
  .hw-intro h2{font-family:inherit;font-size:22px;font-weight:600;color:var(--text);margin:2px 0 8px;line-height:1.25;}
  .hw-intro p{font-size:14px;line-height:1.7;color:var(--text);margin:0;}
  .pc-rule{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--indigo);border-radius:10px;padding:13px 16px;font-size:13.5px;line-height:1.75;color:var(--text);margin:0 0 14px;}
  .pc-form, .pf{display:inline-block;background:var(--amber-light);border:1px solid rgba(184,112,32,.25);color:var(--amber-text);border-radius:6px;padding:1px 8px;font-weight:700;}

  .pq{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:1.5rem;}
  .pq-stage{position:relative;border-radius:10px;overflow:hidden;border:3px solid #2b2140;background:#fff;aspect-ratio:16/9;}
  .pq-svg{display:block;width:100%;height:100%;}
  .pq-start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(43,33,64,.35);}
  .pq-start[hidden]{display:none;}
  .pq-go{font:inherit;font-size:22px;font-weight:800;letter-spacing:.02em;background:#ffd23f;color:#2b2140;border:4px solid #2b2140;border-radius:14px;padding:10px 30px;cursor:pointer;box-shadow:5px 5px 0 #2b2140;transform:rotate(-2deg);}
  .pq-num{position:absolute;right:8px;bottom:8px;background:#2b2140;color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:3px 10px;}
  .pq.pq-paused .pq-num:after{content:' \00b7  paused';}
  .pq-bar{position:relative;height:18px;background:var(--surface2);border-radius:99px;overflow:hidden;margin:10px 0 4px;}
  .pq-bar i{position:absolute;inset:0;background:var(--indigo);border-radius:99px;transform-origin:left;}
  .pq.pq-low .pq-bar i{background:var(--red);}
  .pq.pq-hold .pq-bar i{background:#cdd5f6;}
  .pq-bar-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-2);}
  .pq-q{padding:10px 4px 2px;}
  .pq-sent{font-size:19px;line-height:2.1;color:var(--text);}
  .pq-gap input{font:inherit;font-size:18px;font-weight:600;width:min(15em,72vw);border:none;border-bottom:3px solid var(--indigo);background:var(--indigo-light);border-radius:6px 6px 0 0;padding:2px 8px;color:var(--text);outline:none;}
  .pq-gap input:focus{background:#fff6dd;}
  .pq-gap input.right{border-bottom-color:var(--green);background:var(--green-light);color:var(--green-text);}
  .pq-hint{font-size:14px;color:var(--text-3);font-weight:600;}
  .pq-lead{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--indigo);color:#fff;font-size:13px;font-weight:700;vertical-align:2px;}
  .pq-arrow{color:var(--text-3);}
  .pq-slot{display:inline-block;min-width:3em;border-bottom:3px solid var(--indigo);background:var(--indigo-light);border-radius:6px 6px 0 0;padding:0 10px;font-weight:600;color:var(--text-3);text-align:center;line-height:1.6;}
  .pq-slot.on{border-bottom-color:var(--green);background:var(--green-light);color:var(--green-text);}
  .pq-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 4px;}
  .pq-opt{font:inherit;font-size:14.5px;text-align:left;border:1.5px solid var(--border-med);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer;transition:border-color .12s,transform .12s;}
  .pq-opt b{display:inline-block;width:1.3em;color:var(--indigo-text);}
  .pq-opt:hover:not(:disabled){border-color:var(--indigo);transform:translateY(-1px);}
  .pq-opt.used{opacity:.5;}
  .pq-opt.correct{border-color:var(--green);background:var(--green-light);color:var(--green-text);opacity:1;}
  .pq-opt.wrong{border-color:rgba(201,64,64,.5);background:var(--red-light);color:var(--red-text);cursor:default;animation:pqShake .35s;}
  @keyframes pqShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .pq-fb{min-height:24px;font-size:14px;margin-top:4px;color:var(--text-2);}
  .pq-fb.good{color:var(--green-text);}
  .pq-fb.try{color:var(--amber-text);}
  .pq-peek{font:inherit;font-size:12.5px;font-weight:600;margin-left:6px;border:1px solid rgba(184,112,32,.4);background:var(--amber-light);color:var(--amber-text);border-radius:7px;padding:2px 9px;cursor:pointer;}
  .pq-ctrl{display:flex;justify-content:center;gap:8px;margin:8px 0 6px;flex-wrap:wrap;}
  .pq-b{font:inherit;font-size:13.5px;font-weight:600;border-radius:9px;padding:8px 16px;cursor:pointer;border:1px solid var(--border-med);background:var(--surface);color:var(--text);}
  .pq-b.pq-pri{background:var(--indigo);border-color:var(--indigo);color:#fff;}
  .pq-dots{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:6px;}
  .pq-dot{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-med);background:var(--surface);font:inherit;font-size:12px;font-weight:700;color:var(--text-2);cursor:pointer;padding:0;}
  .pq-dot.ok{background:var(--green);border-color:var(--green);color:#fff;}
  .pq-dot.miss{background:var(--red-light);border-color:rgba(201,64,64,.4);color:var(--red-text);}
  .pq-dot.cur{outline:3px solid var(--indigo);outline-offset:1px;}
  .pq-end{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
  .pq-end h3{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text);}
  .pq-end p{font-size:13.5px;color:var(--text-2);margin:0 0 8px;}
  .pq-list{margin:0 0 10px;padding-left:0;list-style:none;}
  .pq-list li{display:flex;gap:10px;font-size:15px;line-height:1.6;padding:6px 2px;border-bottom:1px solid var(--border);}
  .pq-list li b{color:var(--indigo-text);}
  .pq-mk{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px;}
  .pq-list li.ok .pq-mk{background:var(--green-light);color:var(--green-text);}
  .pq-list li.no .pq-mk{background:var(--red-light);color:var(--red-text);}
.hw-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:2px 0 6px 2px;}
  .hw-nav.games .hw-nav-btn.active{background:#b8558a;}
  .pq-say{font-weight:600;}
  .pq-opts.pq-tf{grid-template-columns:1fr 1fr;}
  .pq-tfb{text-align:center;font-size:17px;font-weight:700;padding:12px;}
  .pq-opts.pq-sprint{grid-template-columns:repeat(3,1fr);}
  .pq-spr{text-align:center;font-size:18px;font-weight:600;padding:12px 6px;}
  .pq-streak{display:inline-block;font-size:13px;font-weight:700;color:var(--amber-text);background:var(--amber-light);border-radius:99px;padding:1px 10px;vertical-align:3px;}
  .pq-opts.pq-spot,.pq-opts.pq-tiles{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .pq-word{font:inherit;font-size:20px;font-weight:600;border:none;border-bottom:3px dashed var(--border-med);background:transparent;color:var(--text);padding:2px 6px;border-radius:6px 6px 0 0;cursor:pointer;}
  .pq-word:hover:not(:disabled){background:var(--indigo-light);border-bottom-color:var(--indigo);}
  .pq-word.wrong{background:var(--red-light);color:var(--red-text);border-bottom-color:transparent;text-decoration:line-through;cursor:default;}
  .pq-word.correct{background:var(--green-light);color:var(--green-text);border-bottom:3px solid var(--green);text-decoration:line-through;}
  .pq-word:disabled{cursor:default;}
  .pq-why{font-size:13px;color:var(--text-2);}
  .pq-line{min-height:52px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:2px dashed rgba(61,82,196,.35);border-radius:12px;background:var(--indigo-light);}
  .pq-line:empty:before{content:'Tap the words in the right order';font-size:14px;color:var(--text-3);}
  .pq-line.right{border:2px solid var(--green);background:var(--green-light);}
  .pq-line.shake{animation:pqShake .35s;}
  .pq-tile{font:inherit;font-size:17px;font-weight:600;border:1.5px solid var(--border-med);background:var(--surface);color:var(--text);border-radius:9px;padding:6px 13px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.08);}
  .pq-line .pq-tile{border-color:rgba(61,82,196,.4);}
  .pq-tile:hover{border-color:var(--indigo);}
  .pq-audio{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px;line-height:1.4;}
  .pq-gap.pq-wide input{width:100%;}
  .pq-got{color:var(--green-text);font-weight:600;}
  .pq-gapw{color:var(--text-3);letter-spacing:1px;}
  .pq-clear{margin-left:auto;padding:6px 12px;font-size:12.5px;}
  @media (max-width:560px){.pq-opts.pq-tf{grid-template-columns:1fr 1fr;}.pq-opts.pq-sprint{grid-template-columns:1fr;}.pq-word{font-size:18px;}.page{padding:1rem 1rem 2rem;}header{padding:1.25rem 1rem 1rem;}.pq{padding:8px;}.pq-sent{font-size:17px;}.pq-opts{grid-template-columns:1fr;}.hw-nav-btn{padding:7px 10px;font-size:12.5px;}}

  /* ---- site additions ---- */
  a{color:var(--indigo-text);}
  .crumb{display:inline-block;font-size:13px;font-weight:600;text-decoration:none;color:var(--text-2);margin-bottom:10px;}
  .crumb:hover{color:var(--indigo);}
  .h1-sub{font-weight:400;color:var(--text-2);font-size:.75em;white-space:nowrap;}
  .gg-notes{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:0 0 1rem;}
  .gg-notes summary{cursor:pointer;padding:.8rem 1.1rem;font-weight:600;font-size:14.5px;}
  .gg-notes-body{padding:0 1.1rem 1rem;font-size:14px;line-height:1.75;}
  .gg-notes-body h3{font-size:14.5px;margin:.8rem 0 .2rem;}
  .gg-notes-body ul{margin:.2rem 0 .4rem 1.2rem;}
  .gg-pager{display:flex;justify-content:space-between;gap:12px;margin:2rem 0 1rem;}
  .gg-pager a{flex:1;max-width:48%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;text-decoration:none;font-weight:700;font-size:14px;color:var(--indigo-text);}
  .gg-pager a.nx{text-align:right;}
  .gg-pager a span{display:block;font-weight:400;font-size:12.5px;color:var(--text-2);}
  .gg-foot{font-size:12px;color:var(--text-3);margin-top:1.5rem;line-height:1.6;}
  .pq-ch{text-align:center;font-weight:600;}
  .pq-opts.pq-choose{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
  /* home page */
  .home-intro{font-size:15px;line-height:1.75;margin-bottom:1.25rem;}
  .home-search{width:100%;font:inherit;font-size:15px;padding:10px 14px;border:1.5px solid var(--border-med);border-radius:10px;margin-bottom:1.25rem;background:var(--surface);}
  .home-sec{margin:0 0 1.5rem;}
  .home-sec h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin:0 0 .5rem;}
  .home-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;list-style:none;}
  .home-list a,.home-list .soon{display:flex;gap:10px;align-items:baseline;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--text);font-size:14px;line-height:1.4;height:100%;}
  .home-list a:hover{border-color:var(--indigo);}
  .home-list .soon{color:var(--text-3);background:transparent;border-style:dashed;}
  .home-list b{flex:none;min-width:2.1em;color:var(--indigo-text);}
  .home-list .soon b{color:var(--text-3);}
  .home-list .tick{margin-left:auto;color:var(--green);font-weight:700;}

/* ---- touch: no double-tap zoom delay, no grey flash ---- */
button, .pq-tile, .pq-word, .pq-opt, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---- unit tabs scroll sideways on phones instead of wrapping into a tall block ---- */
@media (max-width: 700px) {
  .hw-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hw-nav::-webkit-scrollbar { display: none; }
  .hw-nav-btn { white-space: nowrap; flex: none; }
}

/* ---- full-screen game player (phones and narrow windows; opened by Start) ---- */
.pq-top, .pq-abar { display: none; }
html.gg-lock, html.gg-lock body { overflow: hidden; overscroll-behavior: none; }
.pq.pq-full { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; height: 100vh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 0;
  display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.pq-full .pq-top { display: flex; align-items: center; gap: 6px; flex: none; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; border-bottom: 1px solid var(--border); }
.pq-tb { flex: none; width: 42px; height: 40px; font: inherit; font-size: 20px; line-height: 1; border: none; border-radius: 10px; background: var(--surface2); color: var(--text); cursor: pointer; }
.pq-ttl { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-count { min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); }
.pq-full .pq-bar { flex: none; height: 6px; margin: 0; border-radius: 0; }
.pq-full .pq-bar-t, .pq-full .pq-num, .pq-full .pq-start, .pq-full .pq-ctrl, .pq-full .pq-dots { display: none; }
.pq-full .pq-stage { flex: 0 1 auto; height: min(56.25vw, 42%); min-height: 90px; aspect-ratio: auto; border: 0; border-radius: 0; background: #fff; }
.pq-full.pq-kb .pq-stage { height: min(56.25vw, 38%); }            /* keyboard open: cartoon shrinks but stays in view */
.pq-full.pq-kb .pq-ttl { visibility: hidden; }
.pq-full .pq-q { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 10px; }
.pq-full .pq-sent { font-size: 18px; line-height: 1.95; }
.pq-full .pq-opt, .pq-full .pq-tile, .pq-full .pq-word { min-height: 44px; }
.pq-full.pq-has-abar .pq-abar { display: flex; gap: 8px; flex: none; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.pq-ain { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 11px 16px; border: 2px solid var(--indigo); border-radius: 24px; background: var(--indigo-light); color: var(--text); outline: none; }
.pq-ain.right { border-color: var(--green); background: var(--green-light); color: var(--green-text); }
.pq-ok { flex: none; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; }
.pq-mirror { display: inline-block; min-width: 5.5em; padding: 0 8px; line-height: 1.5; font-weight: 600; border-bottom: 3px solid var(--indigo); border-radius: 6px 6px 0 0; background: var(--indigo-light); }
.pq-mirror .pq-mt:empty:before { content: '\00a0'; }
.pq-mirror.right { border-bottom-color: var(--green); background: var(--green-light); color: var(--green-text); }
.pq-full.pq-done { overflow-y: auto; }
.pq-full.pq-done .pq-stage, .pq-full.pq-done .pq-q, .pq-full.pq-done .pq-abar, .pq-full.pq-done .pq-bar { display: none; }
.pq-full .pq-end { margin: 0; padding: 14px 16px 24px; border-top: 0; }
.pq-full .pq-end .pq-ctrl { display: flex; }
/* tap answers sit at the bottom, where thumbs are; the sentence stays under the cartoon */
.pq-full .pq-q { display: flex; flex-direction: column; }
.pq-full .pq-fb { order: 1; }
.pq-full .pq-opts { order: 2; margin-top: auto; padding-top: 10px; }

/* ---- embedded view (?embed=1): games only, inside a student's page ---- */
html.gg-embed body { background: transparent; min-height: 0; }
html.gg-embed .page { padding: 0 2px 8px; max-width: none; }
.gg-embed-how { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }

/* ================= branded home page (Grammar in Play!) ================= */
  .hm-hero{position:relative;background:linear-gradient(160deg,#3D52C4 0%,#2A3A9E 100%);color:#fff;overflow:hidden;padding:54px 0 34px;}
  .hm-hero:after{content:'';position:absolute;inset:auto 0 0 0;height:26px;background:var(--bg);clip-path:ellipse(60% 100% at 50% 100%);}
  .hm-bunt{position:absolute;left:0;top:0;width:100%;height:56px;}
  .hm-flag{animation:hm-sway 3.2s ease-in-out infinite alternate;}
  @keyframes hm-sway{from{transform:rotate(-3deg);}to{transform:rotate(3deg);}}
  @media (prefers-reduced-motion: reduce){.hm-flag{animation:none;}}
  .hm-hero-in{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;}
  .hm-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffd23f;margin-bottom:6px;}
  .hm-logo{font-family:'Baloo 2','Outfit',sans-serif;font-weight:800;font-size:clamp(40px,6vw,64px);line-height:.98;color:#fff;letter-spacing:-.01em;text-shadow:0 3px 0 #2b2140;margin:0 0 12px;}
  .hm-logo span{color:#ffd23f;display:block;}
  .hm-tag{font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);max-width:30em;margin-bottom:16px;}
  .hm-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .hm-stats span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;font-size:13px;}
  .hm-stats b{color:#ffd23f;font-weight:800;}
  .hm-cta{display:inline-block;background:#ffd23f;color:#2b2140;font-weight:800;text-decoration:none;padding:11px 20px;border-radius:999px;border:2.5px solid #2b2140;box-shadow:0 4px 0 #2b2140;margin:0 6px 8px 0;transition:transform .12s, box-shadow .12s;}
  .hm-cta:hover{transform:translateY(2px);box-shadow:0 2px 0 #2b2140;}
  .hm-cta2{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none;}
  .hm-cta2:hover{background:rgba(255,255,255,.1);transform:none;box-shadow:none;}
  .hm-hero-art svg{width:100%;height:auto;display:block;border-radius:18px;border:3px solid #2b2140;box-shadow:0 10px 0 rgba(0,0,0,.18);background:#fff;transform:rotate(1.2deg) translateZ(0);will-change:transform;}  /* own layer: Android drew a strip of it over the stats otherwise */
  .hm-page{max-width:1040px;padding-top:.5rem;}
  .hm-how{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px;}
  .hm-how div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 14px 12px;font-size:13.5px;line-height:1.5;color:var(--text-2);}
  .hm-how span{font-size:24px;display:block;margin-bottom:2px;}
  .hm-how b{display:block;color:var(--text);font-size:15px;margin-bottom:2px;}
  .hm-progress{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13.5px;color:var(--text-2);}
  .hm-pbar{flex:1;max-width:320px;height:10px;border-radius:99px;background:var(--surface2);overflow:hidden;}
  .hm-pbar i{display:block;height:100%;background:linear-gradient(90deg,#2E9D5B,#3D52C4);border-radius:99px;min-width:4px;}
  .hm-find{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0 4px;margin:0;scroll-margin-top:0;}
  .hm-find .home-search{margin:0;padding:12px 16px 12px 42px;border-radius:999px;border:2px solid var(--border-med);font-size:15.5px;
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239DA1AB' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center;}
  .hm-find .home-search:focus{outline:none;border-color:var(--indigo);}
  .hm-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 26px;}
  .hm-chips a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--c);border-radius:8px;padding:4px 10px;}
  .hm-chips a:hover{background:color-mix(in srgb,var(--c) 10%,#fff);}
  .hm-sec{margin:0 0 30px;scroll-margin-top:70px;}
  .hm-sec h2{display:flex;align-items:center;gap:10px;font-family:'Baloo 2','Outfit',sans-serif;font-size:22px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text);margin:0 0 10px;}
  .hm-sec h2 small{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--text-3);margin-left:auto;}
  .hm-ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;font-size:19px;background:color-mix(in srgb,var(--c) 16%,#fff);border:2px solid var(--c);}
  .hm-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
  .hm-list a,.hm-list .soon{align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--border);transition:transform .12s, box-shadow .12s, border-color .12s;}
  .hm-list a:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--c) 70%,transparent);}
  .hm-list b{display:grid;place-items:center;flex:none;min-width:0;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-size:13.5px;font-weight:800;}
  .hm-t{display:flex;flex-direction:column;line-height:1.35;font-weight:600;font-size:14px;}
  .hm-t em{font-weight:400;font-size:13px;color:var(--text-2);margin-top:1px;}
  .hm-list .tick{font-size:18px;}
  .hm-list a.hm-done{background:color-mix(in srgb,#2E9D5B 7%,#fff);}
  .hm-foot{position:relative;margin-top:30px;padding:60px 1.5rem 34px;background:#2A3A9E;color:rgba(255,255,255,.8);text-align:center;font-size:13px;}
  .hm-bunt-s{height:44px;}
  @media (max-width:820px){ .hm-hero-in{grid-template-columns:1fr;} .hm-hero-art{max-width:520px;} .hm-how{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:480px){ .hm-hero{padding-top:46px;} .hm-hero-in,.hm-page{padding-left:16px;padding-right:16px;} .hm-how{grid-template-columns:1fr 1fr;gap:8px;} .hm-how div{padding:10px;font-size:12.5px;}
    .hm-list{grid-template-columns:1fr;} .hm-sec h2{font-size:19px;} .hm-sec h2 small{display:none;} }
  .hm-progress[hidden]{display:none;}

/* iPhone app (Capacitor): keep content clear of the notch / status bar */
  .hm-hero{padding-top:calc(54px + env(safe-area-inset-top));}
  .hm-bunt{top:env(safe-area-inset-top);}
  .header-outer header{padding-top:calc(1.75rem + env(safe-area-inset-top));}
  .hm-find{top:env(safe-area-inset-top);}
  .hm-foot{padding-bottom:calc(34px + env(safe-area-inset-bottom));}
  .in-app body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
  .in-app input,.in-app .gg-notes-body,.in-app .pc-rule{-webkit-user-select:text;user-select:text;}
  /* app: solid teal bar behind the iPhone status bar so the clock stays readable and content doesn't show through */
  .in-app body:before{content:'';position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:#3D52C4;z-index:3000;pointer-events:none;}

/* top bar has 5 buttons since the read-aloud toggle: keep room for the game title on phones */
@media (max-width: 480px) { .pq-tb { width: 36px; font-size: 18px; } .pq-count { min-width: 38px; } .pq-snd { font-size: 17px; } }
  /* 🎙️ Say it! */
  .pq-say{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  .pq-mic{font-size:16px;padding:11px 22px;}
  .pq-mic.on{background:var(--green);border-color:var(--green);animation:pqMic 1.1s ease-in-out infinite;}
  @keyframes pqMic{50%{box-shadow:0 0 0 8px rgba(34,160,90,.18);}}
  .pq-heard{font-size:15px;color:var(--text-2);}
  .pq-sc{display:inline-flex;gap:8px;margin-left:6px;flex-wrap:wrap;}