/* CharacterBee games: the full-screen player, level map, result cards and the pieces games share.
   The game cards and age tabs on the pages are styled in style.css; each game adds its own small styles. */

html.gx-lock,html.gx-lock body{overflow:hidden}
.gx{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;color:var(--text);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23C8961E' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15z'/%3E%3Cpath d='M14 0v9.25M14 40v9'/%3E%3C/g%3E%3C/svg%3E") center/30px auto,linear-gradient(180deg,#FFFBF2,var(--cream))}
.gx *{-webkit-tap-highlight-color:transparent}

/* ---------- top bar ---------- */
.gx-top{position:relative;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.gx-ibtn{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(22,19,13,.12);background:#fff;color:var(--ink);transition:border-color .2s,background .2s,scale .3s var(--spring-ui)}
.gx-ibtn:hover{border-color:var(--ink)}
.gx-ibtn:active{scale:.92}
.gx-ibtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gx-ibtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gx-ibtn[hidden]{display:none}
.gx-ibtn .x{display:none}
.gx-muted .gx-ibtn .w{display:none}
.gx-muted .gx-ibtn .x{display:inline}
.gx-titles{min-width:0;flex:1 1 180px}
.gx-age{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-d)}
.gx-titles h2{font-family:var(--display);font-weight:600;font-stretch:92%;font-size:1.3rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-hud{display:flex;flex-wrap:wrap;gap:6px}
.gx-chip{display:grid;justify-items:center;min-width:58px;padding:4px 12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.gx-chip small{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gx-chip b{font-size:1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-tools{display:flex;gap:6px;margin-left:auto}
.gx-x{background:var(--ink);border-color:var(--ink);color:#fff}
.gx-x:hover{background:#000}

/* ---------- body, stage, toast ---------- */
.gx-body{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.gx-stage{position:relative;display:grid;place-items:center;min-height:100%;padding:18px max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left))}
.gx-wait{display:grid;place-items:center;min-height:60vh;color:var(--muted);font-weight:600}
.gx-toast{position:absolute;left:0;right:0;top:12px;z-index:8;display:flex;justify-content:center;pointer-events:none}
.gx-toast span{padding:7px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:.92rem;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);animation:gxPop .45s var(--spring) both}
.gx-toast span.good{background:#1E7F4F}
.gx-toast span.bad{background:#B3261E}
.gx-toast span.gold{background:var(--gold-2);color:var(--ink)}
@keyframes gxPop{from{opacity:0;transform:translateY(-8px) scale(.9)}}

/* ---------- level map ---------- */
.gx-map{width:100%;max-width:1040px;margin:0 auto;padding:26px 20px 48px}
.gx-map-head{display:flex;align-items:center;gap:24px;margin-bottom:28px}
.gx-art{display:grid;place-items:center;flex:none;width:104px;height:104px;border-radius:30px;background:var(--gc,#F6C343);font-size:3.4rem;line-height:1;font-family:var(--arabic),'Segoe UI Emoji','Apple Color Emoji',sans-serif;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 18px 36px -18px rgba(22,19,13,.45)}
.gx-art.sm{width:72px;height:72px;border-radius:22px;font-size:2.4rem;margin:0 auto 6px}
.gx-map-copy h3{font-family:var(--display);font-weight:600;font-stretch:90%;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.gx-map-copy p{margin-top:6px;color:var(--muted);line-height:1.55}
.gx-map-meter{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--gold-d)!important}
.gx-go{margin-top:16px}
.gx-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:14px 12px;padding:0;list-style:none}
.gx-lv{position:relative;display:grid;align-content:center;justify-items:center;gap:4px;width:100%;aspect-ratio:1/1.08;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#fff;color:var(--ink);transition:background .25s,scale .35s var(--spring-ui)}
.gx-lv b{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1}
.gx-lv:hover:not([disabled]){background:var(--gold-soft);scale:1.05}
.gx-lv:active:not([disabled]){scale:.96}
.gx-lv.next{background:var(--gold-2)}
.gx-lv.next:hover{background:#F2C455}
.gx-lv.locked{background:#ECE5D6;color:#9C927F;cursor:default}
.gx-lv:focus-visible{background:var(--gold-soft);outline:0}
.gx-lock-ico{font-size:.9rem;filter:grayscale(1);opacity:.7}
.gx-levels li{filter:drop-shadow(0 4px 6px rgba(22,19,13,.1))}
.gx-stars{display:inline-flex;gap:2px}
.gx-stars i{width:13px;height:13px;background:#E2D8C3;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gx-stars i.on{background:var(--gold)}
.gx-lv.next .gx-stars i:not(.on){background:rgba(255,255,255,.6)}

/* ---------- message cards (how to play, level won, try again) ---------- */
.gx-over{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(250,246,238,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:gxFade .25s ease both}
@keyframes gxFade{from{opacity:0}}
.gx-card{width:100%;max-width:430px;max-height:100%;overflow:auto;padding:28px 26px 24px;border-radius:26px;text-align:center;background:#fff;box-shadow:0 30px 70px -24px rgba(22,19,13,.45);animation:gxIn .6s var(--spring) both}
@keyframes gxIn{from{opacity:0;transform:translateY(20px) scale(.94)}}
.gx-card h3{margin-top:6px;font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.gx-kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d)}
.gx-card .gx-stars{gap:8px;margin:14px 0 4px}
.gx-card .gx-stars i{width:46px;height:46px;transition:background .2s}
.gx-card .gx-stars i.on{animation:gxStar .55s var(--spring) both}
@keyframes gxStar{0%{scale:.3;rotate:-40deg}60%{scale:1.25}100%{scale:1;rotate:0deg}}
.gx-note{margin-top:8px;color:var(--muted);line-height:1.55}
.gx-note.small{font-size:.88rem}
.gx-card-btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px}
.gx-card-btns .btn{height:48px}
.gx-link{font-weight:700;color:var(--gold-d);text-decoration:underline;text-underline-offset:3px;padding:8px}
.gx-how{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none;counter-reset:how;text-align:left}
.gx-how li{position:relative;padding-left:40px;color:var(--ink-2);line-height:1.5;counter-increment:how}
.gx-how li::before{content:counter(how);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold-2);color:var(--ink);font-weight:800;font-size:.9rem}

/* ---------- pieces games share ---------- */
.gx-drag{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.gx-dragging{position:relative;z-index:60;cursor:grabbing;filter:drop-shadow(0 14px 18px rgba(22,19,13,.3));transition:none!important}
.gx-q{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink);text-align:center}
.gx-sub{margin-top:6px;color:var(--muted);text-align:center}
.gx-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:24px}
.gx-opt{display:grid;place-items:center;min-width:92px;min-height:92px;padding:10px 18px;border-radius:24px;background:#fff;border:2px solid rgba(22,19,13,.1);box-shadow:0 6px 0 rgba(22,19,13,.08);font-family:var(--display);font-weight:700;font-size:2.2rem;color:var(--ink);transition:transform .15s,box-shadow .15s,background .2s,border-color .2s}
.gx-opt:hover{border-color:var(--gold)}
.gx-opt:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(22,19,13,.08)}
.gx-opt.right{background:#E6F4EC;border-color:#1E7F4F;animation:gxRight .5s var(--spring)}
.gx-opt.wrong{background:#FBE9E7;border-color:#B3261E;animation:gxWrong .45s ease}
.gx-opt[disabled]{cursor:default}
@keyframes gxRight{40%{scale:1.12}}
@keyframes gxWrong{20%,60%{translate:-7px 0}40%,80%{translate:7px 0}}
.gx-dots{display:flex;justify-content:center;gap:7px;margin-bottom:18px}
.gx-dots i{width:10px;height:10px;border-radius:50%;background:#E3D9C4}
.gx-dots i.now{background:var(--ink);scale:1.2}
.gx-dots i.ok{background:var(--gold)}
.gx-dots i.miss{background:#E7B3AE}
.gx-emoji{font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;line-height:1}
.gx-quiz{display:grid;justify-items:center;width:100%;max-width:860px}
.gx-quiz-box{display:grid;justify-items:center;gap:14px;width:100%}

/* ---------- confetti ---------- */
.gx-confetti{position:fixed;inset:0;z-index:600;overflow:hidden;pointer-events:none}
.gx-confetti i{position:absolute;top:0;left:0;width:9px;height:14px;border-radius:2px}

@media (max-width:700px){
  .gx-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back titles close" "hud hud tools";padding-top:8px;padding-bottom:8px;gap:8px}
  .gx-top>[data-back]{grid-area:back}
  .gx-titles{grid-area:titles}
  .gx-x{grid-area:close}
  .gx-hud{grid-area:hud;align-self:center}
  .gx-tools{grid-area:tools;gap:4px;margin:0}
  .gx-x{justify-self:end}
  .gx-chip{min-width:0;padding:3px 8px}
  .gx-chip small{font-size:.56rem}
  .gx-chip b{font-size:.9rem}
  .gx-hud{flex-wrap:nowrap;gap:5px}
  .gx-hud .gx-chip:first-child:nth-last-child(n+4){display:none}
  .gx-age{display:none}
  .gx-ibtn{width:38px;height:38px;border-radius:11px}
  .gx-titles h2{font-size:1.08rem}
  .gx-map{padding:20px 14px 40px}
  .gx-map-head{flex-direction:column;align-items:flex-start;gap:16px}
  .gx-art{width:80px;height:80px;border-radius:24px;font-size:2.6rem}
  .gx-levels{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px 8px}
  .gx-lv b{font-size:1.2rem}
  .gx-stars i{width:10px;height:10px}
  .gx-opt{min-width:76px;min-height:76px;font-size:1.8rem;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .gx-card,.gx-over,.gx-toast span,.gx-opt.right,.gx-opt.wrong,.gx-card .gx-stars i.on{animation:none}
}