/* ─────────────────────────────────────────────────────────────────
   SE Theme — GAME LAYER  (se-theme 1.1.0)
   Daily Cipher · Quest worlds · Mobile game nav · shared game chrome.
   Scoped under .se-game-* / #se-cipher so nothing here leaks into
   article content. Light/dark safe (site is dark-only, tokens from
   tokens.css). Honors prefers-reduced-motion at the bottom.
   ───────────────────────────────────────────────────────────────── */

/* ===== HERO (game edition) ======================================== */
.se-ghero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 28px) 0 40px;
  background:
    radial-gradient(ellipse 70% 55% at 18% 0%, rgba(0,255,231,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 10%, rgba(123,47,255,.12), transparent 55%);
}
.se-ghero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,255,231,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,231,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 35%, transparent 80%);
  animation: se-grid-pan 26s linear infinite;
}
@keyframes se-grid-pan { to { background-position: 46px 46px; } }

.se-ghero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 960px) {
  .se-ghero-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Copy (incl. the H1) comes first; the Daily Cipher sits below it on narrow screens. */
  .se-ghero-copy { order: 0; }
  .se-ghero-play { order: 1; }
}

.se-ghero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 .72rem/1 var(--font-mono);
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--clr-neon);
  padding: 7px 12px; border-radius: 999px;
  background: rgba(0,255,231,.07); border: 1px solid rgba(0,255,231,.25);
  margin-bottom: 18px;
}
.se-ghero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clr-green); box-shadow: 0 0 10px var(--clr-green); animation: se-blink 1.4s infinite; }
@keyframes se-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.se-ghero-title {
  font: 800 clamp(2.1rem, 5.2vw, 3.5rem)/1.04 var(--font-display);
  color: var(--text-bright);
  letter-spacing: -1px;
  margin: 0 0 16px;
}
.se-ghero-title .grad {
  background: linear-gradient(100deg, var(--clr-neon), var(--clr-neon4) 60%, var(--clr-neon2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.se-ghero-sub {
  font: 400 1.04rem/1.6 var(--font-body);
  color: var(--text-dim); max-width: 480px; margin: 0 0 24px;
}
.se-ghero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

/* stat chips */
.se-ghero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.se-ghero-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--border);
  min-width: 92px;
}
.se-ghero-chip b { font: 800 1.3rem/1 var(--font-display); color: var(--clr-neon); }
.se-ghero-chip span { font: 600 .66rem/1.2 var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }

/* ===== DAILY CIPHER ============================================== */
.se-ghero-play { position: relative; z-index: 1; display: flex; justify-content: center; }
#se-cipher {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border-hover);
  border-radius: 22px;
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(0,255,231,.05), 0 0 60px rgba(0,255,231,.06);
  position: relative; overflow: hidden;
}
#se-cipher::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-neon), var(--clr-neon4), transparent);
}
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sec-badge { font: 700 .82rem/1 var(--font-ui); letter-spacing: .5px; color: var(--text-bright); }
.sec-badge b { color: var(--clr-neon); font-family: var(--font-display); }
.sec-streak { font: 700 .95rem/1 var(--font-ui); color: var(--clr-orange); }
.sec-streak b { font-family: var(--font-display); }
.sec-hint { font: 500 .78rem/1.3 var(--font-ui); color: var(--text-dim); margin: 2px 0 14px; }

.sec-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.sec-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sec-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: 800 1.5rem/1 var(--font-display); text-transform: uppercase;
  color: var(--text-bright);
  background: var(--bg); border: 2px solid rgba(255,255,255,.08);
  border-radius: 8px; transition: transform .1s, border-color .15s, background .2s;
}
.sec-cell[data-state="filled"] { border-color: var(--border-strong); transform: scale(1.04); }
.sec-cell[data-state="correct"] { background: var(--clr-green); border-color: var(--clr-green); color: #04140b; }
.sec-cell[data-state="present"] { background: var(--clr-neon3); border-color: var(--clr-neon3); color: #1a1600; }
.sec-cell[data-state="absent"]  { background: #16222f; border-color: #16222f; color: var(--text-dim); }
.sec-cell.flip { animation: sec-flip .3s ease; }
@keyframes sec-flip { 0%{transform:rotateX(0)} 50%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
.sec-row.shake { animation: sec-shake .4s; }
@keyframes sec-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

.sec-msg { min-height: 18px; text-align: center; font: 700 .8rem/1.3 var(--font-ui); color: var(--text-dim); margin-bottom: 8px; }
.sec-msg.is-warn { color: var(--clr-neon3); }
.sec-msg.is-good { color: var(--clr-green); }

.sec-keys { display: flex; flex-direction: column; gap: 6px; }
.sec-krow { display: flex; gap: 5px; justify-content: center; }
.sec-key {
  flex: 1; min-width: 0; height: 46px;
  font: 700 .9rem/1 var(--font-ui); color: var(--text-bright);
  background: #1a2838; border: none; border-radius: 7px; cursor: pointer;
  transition: transform .08s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sec-key:active { transform: scale(.92); }
.sec-k-wide { flex: 1.5; font-size: 1.1rem; }
.sec-key[data-state="correct"] { background: var(--clr-green); color: #04140b; }
.sec-key[data-state="present"] { background: var(--clr-neon3); color: #1a1600; }
.sec-key[data-state="absent"]  { background: #0c1520; color: #51708f; }

/* finish panel */
.sec-finish { text-align: center; padding: 6px 2px 0; animation: se-fade-up .4s ease both; }
.sec-fin-emoji { font-size: 40px; line-height: 1; }
.sec-fin-title { font: 800 1.3rem/1.2 var(--font-display); color: var(--text-bright); margin: 6px 0 2px; }
.sec-fin-title b { color: var(--clr-neon); }
.sec-fin-mean { font: 500 .82rem/1.5 var(--font-body); color: var(--text-dim); margin: 8px auto 14px; max-width: 320px; }
.sec-fin-mean b { color: var(--clr-neon); font-family: var(--font-display); }
.sec-fin-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.sec-fin-stats div { flex: 1; max-width: 90px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px; }
.sec-fin-stats b { display: block; font: 800 1.4rem/1 var(--font-display); color: var(--clr-neon); }
.sec-fin-stats span { font: 600 .6rem/1.2 var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.sec-btn-share {
  width: 100%; height: 50px; border: none; border-radius: 12px; cursor: pointer;
  font: 800 .95rem/1 var(--font-display); letter-spacing: 1px; text-transform: uppercase;
  color: #04140b; background: linear-gradient(135deg, var(--clr-green), var(--clr-neon));
  box-shadow: 0 0 26px rgba(0,255,136,.25); transition: transform .12s;
}
.sec-btn-share:active { transform: scale(.98); }
.sec-next { font: 500 .78rem/1.4 var(--font-ui); color: var(--text-dim); margin-top: 12px; }
.sec-next b { color: var(--text-bright); font-family: var(--font-mono); }
.sec-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.sec-cta-link { font: 700 .85rem/1.3 var(--font-ui); color: var(--clr-neon3); text-decoration: none; }
.sec-cta-sub { font: 500 .8rem/1.3 var(--font-ui); color: var(--text-dim); text-decoration: none; }
.sec-cta-link:hover, .sec-cta-sub:hover { color: var(--clr-neon); }

.sec-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.sec-confetti i { position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 1px; animation: sec-fall 1.8s ease-in forwards; }
@keyframes sec-fall { to { transform: translate(var(--dx), 480px) rotate(540deg); opacity: 0; } }
@keyframes se-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== QUEST WORLDS ============================================== */
.se-quest { padding: 54px 0; }
.se-quest-head { text-align: center; margin-bottom: 34px; }
.se-quest-kicker { font: 700 .72rem/1 var(--font-mono); letter-spacing: 3px; text-transform: uppercase; color: var(--clr-neon4); }
.se-quest-title { font: 800 clamp(1.7rem,3.6vw,2.4rem)/1.1 var(--font-display); color: var(--text-bright); margin: 8px 0 6px; }
.se-quest-sub { font: 400 .98rem/1.6 var(--font-body); color: var(--text-dim); max-width: 560px; margin: 0 auto; }

.se-worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.se-world {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 18px;
  padding: 20px 18px 18px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.se-world::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wc, var(--clr-neon)); opacity: .55; }
.se-world:hover { transform: translateY(-5px); border-color: var(--wc, var(--clr-neon)); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.se-world-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.se-world-ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 12px var(--wc)); }
.se-world-lvl { font: 700 .62rem/1 var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wc, var(--clr-neon)); border: 1px solid var(--wc, var(--clr-neon)); border-radius: 999px; padding: 5px 9px; }
.se-world-name { font: 800 1.2rem/1.2 var(--font-display); color: var(--text-bright); margin-bottom: 6px; }
.se-world-desc { font: 400 .84rem/1.5 var(--font-body); color: var(--text-dim); margin-bottom: 14px; min-height: 2.5em; }
.se-world-foot { display: flex; align-items: center; justify-content: space-between; }
.se-world-meta { font: 700 .72rem/1 var(--font-ui); color: var(--text-dim); }
.se-world-meta b { color: var(--wc, var(--clr-neon)); font-family: var(--font-display); }
.se-world-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wc, var(--clr-neon)); color: #041018; font-size: 15px; transition: transform .2s; }
.se-world:hover .se-world-go { transform: translateX(3px); }
.se-world-dots { display: flex; gap: 4px; margin-top: 12px; }
.se-world-dots i { flex: 1; height: 4px; border-radius: 2px; background: #15263a; }
.se-world-dots i.on { background: var(--wc, var(--clr-neon)); box-shadow: 0 0 6px var(--wc, var(--clr-neon)); }
.se-quest-more { text-align: center; margin: 26px 0 0; font: 500 .86rem/1.9 var(--font-ui); color: var(--text-dim); }
.se-quest-more a { color: var(--clr-neon); text-decoration: none; }
.se-quest-more a:hover { color: var(--clr-neon2); text-decoration: underline; }
.se-world.boss { background: linear-gradient(135deg, rgba(255,230,0,.07), var(--bg2) 60%); }
.se-world.boss .se-world-name { color: var(--clr-neon3); }
.se-world-flag { position: absolute; top: 12px; right: 12px; font: 800 .58rem/1 var(--font-mono); letter-spacing: 1px; color: #1a1600; background: var(--clr-neon3); border-radius: 999px; padding: 5px 8px; }

/* ===== shared game buttons ====================================== */
.se-gbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 .88rem/1 var(--font-display); letter-spacing: .5px;
  padding: 14px 22px; border-radius: 12px; text-decoration: none; cursor: pointer; border: none;
  transition: transform .12s, box-shadow .2s;
}
.se-gbtn:active { transform: scale(.97); }
.se-gbtn-primary { color: #041018; background: linear-gradient(135deg, var(--clr-neon), var(--clr-neon4)); box-shadow: 0 0 26px rgba(0,255,231,.25); }
.se-gbtn-primary:hover { box-shadow: 0 0 36px rgba(0,255,231,.4); color: #041018; }
.se-gbtn-ghost { color: var(--text-bright); background: var(--bg3); border: 1px solid var(--border-hover); }
.se-gbtn-ghost:hover { border-color: var(--clr-neon); color: var(--clr-neon); }

/* ===== LIVE AI HACKING RANGE ==================================== */
.se-range{padding:54px 0}
.se-range-head{text-align:center;margin-bottom:28px}
.se-range-kicker{display:inline-flex;align-items:center;gap:8px;font:700 .72rem/1 var(--font-mono);letter-spacing:2.5px;text-transform:uppercase;color:var(--clr-neon2);padding:7px 12px;border-radius:999px;background:rgba(255,45,120,.08);border:1px solid rgba(255,45,120,.3)}
.se-range-kicker .live{width:7px;height:7px;border-radius:50%;background:var(--clr-neon2);box-shadow:0 0 10px var(--clr-neon2);animation:se-blink 1.3s infinite}
.se-range-title{font:800 clamp(1.7rem,3.6vw,2.4rem)/1.1 var(--font-display);color:var(--text-bright);margin:12px 0 6px;letter-spacing:-.5px}
.se-range-title .grad{background:linear-gradient(100deg,var(--clr-neon2),var(--clr-neon4));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.se-range-sub{font:400 .98rem/1.6 var(--font-body);color:var(--text-dim);max-width:600px;margin:0 auto}

#se-range{max-width:900px;margin:0 auto}
.se-range-wrap{display:grid;grid-template-columns:220px 1fr;gap:16px}
@media(max-width:720px){.se-range-wrap{grid-template-columns:1fr}}

.se-range-guards{display:flex;flex-direction:column;gap:8px}
@media(max-width:720px){.se-range-guards{flex-direction:row;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}}
.se-range-guard{display:flex;align-items:center;gap:8px;text-align:left;padding:11px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:border-color .2s,background .2s;white-space:nowrap;position:relative}
.se-range-guard:hover{border-color:var(--border-hover)}
.se-range-guard.is-active{border-color:var(--clr-neon);background:rgba(0,255,231,.06)}
.se-range-guard.is-solved{opacity:.85}
.se-range-guard-no{flex:none;width:22px;height:22px;border-radius:7px;background:#16273a;color:var(--text-dim);font:800 11px/22px var(--font-display);text-align:center}
.se-range-guard.is-active .se-range-guard-no{background:var(--clr-neon);color:#041018}
.se-range-guard.is-solved .se-range-guard-no{background:var(--clr-green);color:#04140b}
.se-range-guard-name{flex:1;font:700 .86rem/1.1 var(--font-ui);color:var(--text-bright)}
.se-range-guard-d{font:700 .55rem/1 var(--font-mono);letter-spacing:.5px;text-transform:uppercase;padding:3px 6px;border-radius:999px}
.se-range-guard-tick{color:var(--clr-green);font-weight:900}
.d-easy{color:#4ade80;background:rgba(74,222,128,.12)}
.d-medium{color:#ffe600;background:rgba(255,230,0,.12)}
.d-hard{color:#ff8c00;background:rgba(255,140,0,.12)}
.d-expert{color:#ff2d78;background:rgba(255,45,120,.12)}

.se-range-stage{background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--border-hover);border-radius:18px;padding:16px;position:relative;overflow:hidden}
.se-range-stage::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--clr-neon2),var(--clr-neon4),transparent)}
.se-range-guardhead{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.se-range-avatar{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:var(--bg);border:1px solid var(--border)}
.se-range-gmeta{flex:1;min-width:0}
.se-range-gtitle{font:800 1.02rem/1.2 var(--font-display);color:var(--text-bright)}
.se-range-gdiff{font:600 .76rem/1.3 var(--font-ui);color:var(--text-dim);margin-top:2px}
.se-range-gdiff b{color:var(--clr-neon)}
.se-range-done{color:var(--clr-green)}
.se-range-breaks{flex:none;font:600 .74rem/1 var(--font-ui);color:var(--text-dim)}
.se-range-breaks b{color:var(--clr-neon2);font-family:var(--font-display)}

.se-range-term{min-height:150px;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:4px 2px 2px;font-family:var(--font-mono)}
.se-range-msg{display:flex;flex-direction:column;gap:3px;animation:se-fade-up .25s ease both}
.se-range-who{font:700 .6rem/1 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}
.se-range-b{font:400 .86rem/1.5 var(--font-body);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:0 10px 10px 10px;padding:9px 12px}
.se-range-msg.user{align-items:flex-end}
.se-range-msg.user .se-range-who{color:var(--clr-neon)}
.se-range-msg.user .se-range-b{background:rgba(0,255,231,.08);border-color:rgba(0,255,231,.25);border-radius:10px 0 10px 10px;color:var(--text-bright)}
.se-range-msg.sys .se-range-b{background:rgba(255,45,120,.07);border-color:rgba(255,45,120,.25);color:#ffc4d8}
.se-range-msg.win .se-range-b{background:rgba(0,255,136,.08);border-color:rgba(0,255,136,.3);color:#b8ffd8}
.se-range-cursor{display:inline-block;width:7px;height:1em;background:var(--clr-neon2);vertical-align:text-bottom;animation:se-blink .8s step-start infinite}
.se-range-dots{display:inline-flex;gap:4px;padding:10px 12px}
.se-range-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:se-range-bounce 1.2s infinite}
.se-range-dots i:nth-child(2){animation-delay:.15s}.se-range-dots i:nth-child(3){animation-delay:.3s}
@keyframes se-range-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

.se-range-hint-toggle{align-self:flex-start;margin:8px 0 2px;background:none;border:none;color:var(--clr-neon3);font:700 .78rem/1 var(--font-ui);cursor:pointer;padding:4px 0}
.se-range-hint{font:400 .82rem/1.5 var(--font-body);color:#ffe9a8;background:rgba(255,230,0,.06);border:1px dashed rgba(255,230,0,.35);border-radius:10px;padding:9px 11px;margin:6px 0 2px}

.se-range-input{display:flex;gap:8px;margin-top:12px}
.se-range-input textarea{flex:1;min-width:0;resize:none;background:var(--bg);border:1px solid var(--border-hover);border-radius:12px;padding:10px 12px;color:var(--text-bright);font:400 .88rem/1.4 var(--font-body)}
.se-range-input textarea:focus{outline:none;border-color:var(--clr-neon)}
.se-range-send{flex:none;align-self:stretch;min-width:120px;padding:0 16px;border:none;border-radius:12px;cursor:pointer;font:800 .8rem/1 var(--font-display);letter-spacing:.5px;color:#041018;background:linear-gradient(135deg,var(--clr-neon2),var(--clr-neon4));transition:transform .12s,opacity .2s}
.se-range-send:disabled{opacity:.6;cursor:default}
.se-range-send:not(:disabled):active{transform:scale(.97)}
.se-range-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font:600 .74rem/1.3 var(--font-ui);color:var(--text-dim)}
.se-range-full{color:var(--clr-neon);text-decoration:none;white-space:nowrap}
.se-range-full:hover{color:var(--clr-neon2)}

.se-range-gate{text-align:center;padding:16px 12px;margin-top:6px;border:1px dashed rgba(0,255,231,.4);border-radius:14px;background:rgba(0,255,231,.04);animation:se-fade-up .3s ease both}
.se-range-gate-ic{font-size:30px}
.se-range-gate-t{font:800 1rem/1.3 var(--font-display);color:var(--text-bright);margin:6px 0 4px}
.se-range-gate-s{font:400 .82rem/1.5 var(--font-body);color:var(--text-dim);max-width:360px;margin:0 auto 12px}
.se-range-gate-btn{display:inline-block;padding:12px 20px;border-radius:12px;font:800 .82rem/1 var(--font-display);letter-spacing:.5px;color:#041018;background:linear-gradient(135deg,var(--clr-neon),var(--clr-neon4));text-decoration:none}

.se-range-cap{text-align:center;padding:18px 14px;margin-top:8px;border:1px solid var(--clr-green);border-radius:16px;background:linear-gradient(135deg,rgba(0,255,136,.08),var(--bg2));box-shadow:0 0 26px rgba(0,255,136,.12);animation:se-pop .4s cubic-bezier(.18,.89,.32,1.28) both}
.se-range-cap-ic{font-size:34px}
.se-range-cap-t{font:800 1rem/1.2 var(--font-display);color:var(--clr-green);margin:6px 0}
.se-range-cap-code{display:inline-block;font:700 .82rem/1 var(--font-mono);color:#b8ffd8;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);border-radius:8px;padding:7px 11px;margin-bottom:8px}
.se-range-cap-xp{font:700 .86rem/1 var(--font-ui);color:var(--clr-neon3);margin-bottom:12px}
.se-range-cap-share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.se-range-cap-share a{font:700 .76rem/1 var(--font-ui);color:var(--clr-neon);text-decoration:none;border:1px solid var(--border-hover);border-radius:999px;padding:7px 13px}
.se-range-cap-share a:hover{border-color:var(--clr-neon)}
.se-range-cap-next{display:inline-block;font:700 .82rem/1.3 var(--font-ui);color:var(--clr-neon2);text-decoration:none}
@keyframes se-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

.se-range-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.se-range-confetti i{position:absolute;top:-12px;width:8px;height:8px;border-radius:1px;animation:sec-fall 1.8s ease-in forwards}

/* ===== MOBILE GAME NAV (bottom tab bar) ========================= */
.se-gamenav { display: none; }
@media (max-width: 860px) {
  .se-gamenav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997;
    background: rgba(6,12,20,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .se-gnav {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; padding: 4px 2px; border-radius: 10px;
    color: var(--text-dim); position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .se-gnav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
  .se-gnav span { font: 700 .58rem/1 var(--font-ui); letter-spacing: .5px; text-transform: uppercase; }
  .se-gnav.is-active { color: var(--clr-neon); }
  .se-gnav.is-active::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 2px; background: var(--clr-neon); box-shadow: 0 0 8px var(--clr-neon); }
  .se-gnav-dot { position: absolute; top: 2px; right: 50%; margin-right: -16px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--clr-neon2); color: #fff; font: 800 8px/15px var(--font-display); text-align: center; padding: 0 3px; }
  /* make room so content & other fixed bars clear the nav */
  body.se-has-gamenav { padding-bottom: 64px; }
  body.se-has-gamenav .se-tutor-bubble { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  body.se-has-gamenav .se-tutor-panel  { bottom: calc(140px + env(safe-area-inset-bottom)) !important; }
  body.se-has-gamenav .se-sticky-cta   { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
}

/* ===== reduced motion =========================================== */
@media (prefers-reduced-motion: reduce) {
  .se-ghero::before, .se-ghero-eyebrow .dot,
  .sec-cell.flip, .sec-row.shake, .sec-confetti i { animation: none !important; }
  .se-world, .se-world-go, .sec-cell, .se-gbtn { transition: none !important; }
}