/* ===========================================================
   game.css — the "game layer" for NB Institute (pairs with game.js)
   Four things live here:
     1. Quest wizard  (.qw-*)  — every form becomes a level-by-level quest
     2. Gift box      (.gb-*)  — a different opening + surprise every time
     3. Gift unwrap   (.gu-*)  — panels/dialogs open like a wrapped present
     4. Game dialogs  (.nbd-*) + portal wipe (.pw-*) — replace alert/confirm/prompt
   Everything is plain CSS (no libraries, no images, no fonts to fetch).
   prefers-reduced-motion is respected at the bottom of this file.
   =========================================================== */

:root{
  --qw-gold: #E4C452;
  --qw-gold-deep: #C9A227;
  --qw-ink: #17140F;
  --qw-ok: #3ddc97;
  --qw-bad: #ff7a70;
  --qw-blue: #5da8f5;
}

/* ---------------------------------------------------------- */
/* 1. QUEST WIZARD                                            */
/* ---------------------------------------------------------- */
.qw-root{
  --qw-fg: var(--chalk, #F5F3E7);
  --qw-dim: var(--chalk-dim, #D9D6C6);
  --qw-panel: rgba(245,243,231,0.06);
  --qw-line: rgba(245,243,231,0.18);
  position: relative;
  margin-bottom: 6px;
}
.qw-root[data-theme="light"]{
  --qw-fg: #17140F;
  --qw-dim: rgba(32,41,31,0.62);
  --qw-panel: rgba(32,41,31,0.05);
  --qw-line: rgba(32,41,31,0.18);
  --qw-gold: #B98A3A;
  --qw-gold-deep: #9a7230;
}

.qw-hud{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--qw-panel); border: 1px solid var(--qw-line); border-radius: 12px;
  color: var(--qw-fg);
}
.qw-avatar{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:1.55rem; line-height:1;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), rgba(228,196,82,0.25) 55%, rgba(201,162,39,0.35));
  border: 2px solid var(--qw-gold-deep);
  box-shadow: 0 0 0 0 rgba(228,196,82,0.5);
}
.qw-avatar.qw-avatar-hop{ animation: qw-avatar-hop .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes qw-avatar-hop{
  0%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-14px) scale(1.2) rotate(-8deg); box-shadow: 0 0 0 10px rgba(228,196,82,0); }
  70%{ transform: translateY(0) scale(.92) rotate(4deg); }
  100%{ transform: translateY(0) scale(1); }
}
.qw-mid{ min-width:0; }
.qw-level{
  font-family: 'Fraunces', serif; font-weight:700; font-size:0.95rem; line-height:1.15;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.qw-level small{ font-family:'Work Sans',sans-serif; font-weight:500; color: var(--qw-dim); font-size:0.72rem; margin-left:6px; }
.qw-track{
  display:flex; gap:4px; margin-top:8px;
}
.qw-seg{
  flex:1; height:8px; border-radius:6px; background: var(--qw-line); position:relative; overflow:hidden;
  transition: background .3s; cursor: default; border:0; padding:0;
}
.qw-seg::after{
  content:''; position:absolute; inset:0; transform: translateX(-101%);
  background: linear-gradient(90deg, var(--qw-gold-deep), var(--qw-gold), #fff3b0);
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
}
.qw-seg.qw-done::after{ transform: translateX(0); }
.qw-seg.qw-now{ background: rgba(228,196,82,0.35); box-shadow: 0 0 0 1px var(--qw-gold-deep) inset; }
.qw-seg.qw-done{ cursor:pointer; }
.qw-seg.qw-done:focus-visible{ outline:2px solid var(--qw-gold); outline-offset:2px; }
.qw-xp{
  text-align:right; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.85rem; color: var(--qw-gold);
  white-space:nowrap;
}
.qw-xp small{ display:block; font-family:'Work Sans',sans-serif; font-weight:500; color: var(--qw-dim); font-size:0.68rem; }
.qw-combo{ color: var(--qw-ok); font-weight:700; }

.qw-stage{ position:relative; }
.qw-off{ display:none !important; }
.qw-step-head{ margin: 2px 0 16px; color: var(--qw-fg); }
.qw-step-title{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.25rem; line-height:1.2; margin:0;
  display:flex; align-items:center; gap:10px;
}
.qw-step-icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:1.2rem;
  background: var(--qw-panel); border:1px solid var(--qw-line);
}
.qw-step-tip{ margin:6px 0 0; font-size:0.83rem; color: var(--qw-dim); line-height:1.45; }

/* step entrances — one is picked at random each time so no two steps feel alike */
.qw-in-slideR{ animation: qw-slideR .48s cubic-bezier(.2,.9,.3,1) both; }
.qw-in-slideL{ animation: qw-slideL .48s cubic-bezier(.2,.9,.3,1) both; }
.qw-in-drop{ animation: qw-drop .6s cubic-bezier(.3,1.5,.5,1) both; }
.qw-in-flip{ animation: qw-flip .6s cubic-bezier(.2,.9,.3,1) both; transform-origin: 50% 0; }
.qw-in-zoom{ animation: qw-zoom .5s cubic-bezier(.3,1.4,.5,1) both; }
.qw-in-swing{ animation: qw-swing .7s cubic-bezier(.3,1.3,.5,1) both; transform-origin: 0 0; }
@keyframes qw-slideR{ from{ opacity:0; transform: translateX(46px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes qw-slideL{ from{ opacity:0; transform: translateX(-46px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes qw-drop{ 0%{ opacity:0; transform: translateY(-60px); } 60%{ opacity:1; transform: translateY(8px); } 100%{ transform:none; } }
@keyframes qw-flip{ from{ opacity:0; transform: perspective(700px) rotateX(-70deg); } to{ opacity:1; transform:none; } }
@keyframes qw-zoom{ from{ opacity:0; transform: scale(.82); } to{ opacity:1; transform:none; } }
@keyframes qw-swing{ from{ opacity:0; transform: rotate(-6deg) translateY(-14px); } to{ opacity:1; transform:none; } }

/* validation feedback */
.qw-shake{ animation: qw-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes qw-shake{
  10%,90%{ transform: translateX(-2px); } 20%,80%{ transform: translateX(4px); }
  30%,50%,70%{ transform: translateX(-7px); } 40%,60%{ transform: translateX(7px); }
}
.qw-bad input, .qw-bad select, .qw-bad .radio-grid, .qw-bad .check-grid{
  border-color: var(--qw-bad) !important; box-shadow: 0 0 0 3px rgba(255,122,112,0.18);
}
.qw-alert{
  display:none; margin: 4px 0 14px; padding: 11px 14px; border-radius: 10px;
  background: rgba(255,122,112,0.13); border:1px solid var(--qw-bad); color: var(--qw-bad);
  font-size:0.86rem; font-weight:600; line-height:1.4;
}
.qw-root[data-theme="light"] .qw-alert{ color:#a3271d; background: rgba(184,67,58,0.1); border-color:#b8433a; }
.qw-alert.qw-show{ display:block; animation: qw-zoom .35s cubic-bezier(.3,1.4,.5,1) both; }

/* per-field tick + nice focus glow */
.qw-fieldwrap{ position:relative; }
.qw-tick{
  position:absolute; right:12px; bottom:11px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:0.8rem; font-weight:800;
  background: var(--qw-ok); color:#06281a; transform: scale(0); pointer-events:none;
  transition: transform .35s cubic-bezier(.3,1.8,.5,1);
}
.qw-fieldwrap.qw-ok .qw-tick{ transform: scale(1); }
.qw-fieldwrap.qw-ok input:not([type="checkbox"]):not([type="radio"]){ padding-right:40px; }

/* password power meter */
.qw-meter{ margin-top:8px; }
.qw-meter-bars{ display:flex; gap:4px; }
.qw-meter-bars i{ flex:1; height:6px; border-radius:4px; background: var(--qw-line); transition: background .25s, transform .25s; }
.qw-meter-bars i.on{ transform: scaleY(1.35); }
.qw-meter-txt{ margin-top:5px; font-size:0.74rem; color: var(--qw-dim); }
.qw-meter-txt b{ color: var(--qw-fg); }
.qw-match{ margin-top:6px; font-size:0.78rem; font-weight:600; }
.qw-match.ok{ color: var(--qw-ok); } .qw-match.no{ color: var(--qw-bad); }

/* nav */
.qw-nav{ display:flex; gap:10px; margin-top: 18px; align-items:stretch; }
.qw-btn{
  font-family:'Work Sans', sans-serif; font-weight:700; font-size:0.95rem; cursor:pointer;
  border-radius: 10px; padding: 13px 18px; border:1px solid transparent; position:relative; overflow:hidden;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.qw-btn:active{ transform: translateY(2px) scale(.98); }
.qw-back{ background: transparent; color: var(--qw-fg); border-color: var(--qw-line); flex: 0 0 auto; }
.qw-back:hover{ border-color: var(--qw-gold); }
.qw-next{
  flex:1; color:#17140F; border:0;
  background: linear-gradient(180deg, #F3D76A, #C9A227);
  box-shadow: 0 5px 0 #8f7218, 0 10px 22px rgba(201,162,39,0.28);
}
.qw-next:hover{ filter: brightness(1.06); }
.qw-next:active{ box-shadow: 0 1px 0 #8f7218; transform: translateY(4px); }
.qw-next:focus-visible, .qw-back:focus-visible{ outline:3px solid var(--qw-blue); outline-offset:2px; }
.qw-next.qw-busy{ pointer-events:none; filter: saturate(.6); }
.qw-btn[hidden]{ display:none; }

/* the original submit button sits inside the last step */
.qw-final{ margin-top: 6px; }
.qw-hint-key{ margin-top:8px; text-align:center; font-size:0.7rem; color: var(--qw-dim); }

/* floating +XP / cheer toast */
.qw-float{
  position:fixed; z-index: 9600; pointer-events:none; font-family:'Fraunces',serif; font-weight:800;
  font-size:1.05rem; color:#17140F; padding:6px 12px; border-radius: 999px;
  background: linear-gradient(180deg,#F8E27F,#E4C452); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transform: translate(-50%,-50%); white-space:nowrap;
}
.qw-levelup{
  position:fixed; left:50%; top:22%; z-index: 9700; transform: translate(-50%,-50%); pointer-events:none;
  text-align:center; font-family:'Fraunces',serif; font-weight:800; color:#fff;
  text-shadow: 0 3px 0 #7a5d10, 0 10px 30px rgba(0,0,0,.5);
}
.qw-levelup b{ display:block; font-size: clamp(1.9rem, 8vw, 3.2rem); color:#F8E27F; letter-spacing:.02em; }
.qw-levelup span{ display:block; font-size:1rem; margin-top:4px; }

/* particles layer (emoji bursts) */
.fxp-layer{ position:fixed; inset:0; z-index: 9550; pointer-events:none; overflow:hidden; }
.fxp{ position:absolute; left:0; top:0; will-change: transform, opacity; user-select:none; line-height:1; }

/* ---------------------------------------------------------- */
/* 2. GIFT BOX                                                */
/* ---------------------------------------------------------- */
.gb-overlay{
  position:fixed; inset:0; z-index: 9500; display:flex; align-items:center; justify-content:center;
  padding: 20px; overflow:hidden;
  background: radial-gradient(ellipse at 50% 55%, rgba(30,24,70,.78), rgba(6,10,24,.94) 70%);
  animation: gb-fade .35s ease both;
}
.gb-overlay.gb-out{ animation: gb-fade-out .35s ease both; }
@keyframes gb-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gb-fade-out{ to{ opacity:0; } }
.gb-rays{
  position:absolute; left:50%; top:52%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity:0; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, rgba(255,231,140,.22) 0 8deg, rgba(255,231,140,0) 8deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%); mask-image: radial-gradient(circle, #000 0, transparent 45%);
}
.gb-overlay.gb-opened .gb-rays{ opacity:1; animation: gb-spin 14s linear infinite, gb-rays-in 1s ease both; }
@keyframes gb-spin{ to{ transform: rotate(360deg); } }
@keyframes gb-rays-in{ from{ opacity:0; } to{ opacity:1; } }
.gb-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.gb-flash.gb-go{ animation: gb-flash .5s ease-out; }
@keyframes gb-flash{ 0%{ opacity:.9; } 100%{ opacity:0; } }

.gb-stage{
  position:relative; width: min(420px, 100%); display:flex; flex-direction:column; align-items:center; gap: 18px;
  color:#fff; text-align:center;
}
.gb-hint{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; color:#F8E27F; min-height:1.6em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  animation: gb-hint-bob 1.4s ease-in-out infinite;
}
@keyframes gb-hint-bob{ 50%{ transform: translateY(-5px); } }
.gb-sub{ font-size:0.85rem; color: rgba(255,255,255,.75); margin-top:-10px; max-width: 320px; }

/* the box (pure CSS, 3-D-ish) */
.gb-boxwrap{ display:flex; justify-content:center; }
.gb-box{
  --gb-a:#e2455d; --gb-b:#a82a43; --gb-rib:#ffd76a; --gb-rib2:#e0ac2b;
  position:relative; width:150px; height:150px; padding:0; border:0; background:none; cursor:pointer;
  transform-origin: 50% 100%; animation: gb-drop .9s cubic-bezier(.3,1.6,.5,1) both;
  -webkit-tap-highlight-color: transparent;
}
.gb-box:focus-visible{ outline:3px solid #5da8f5; outline-offset:8px; border-radius:14px; }
.gb-box.gb-wiggle{ animation: gb-wiggle 1.5s ease-in-out infinite .2s; }
@keyframes gb-drop{ 0%{ transform: translateY(-70vh) rotate(-14deg) scale(.7); opacity:0; } 60%{ opacity:1; transform: translateY(14px) rotate(3deg) scale(1.03); } 80%{ transform: translateY(-8px) rotate(-1deg); } 100%{ transform:none; } }
@keyframes gb-wiggle{
  0%,60%,100%{ transform: rotate(0) scale(1); }
  66%{ transform: rotate(-7deg) scale(1.05); } 72%{ transform: rotate(7deg) scale(1.05); }
  78%{ transform: rotate(-5deg); } 84%{ transform: rotate(5deg); } 90%{ transform: rotate(-2deg); }
}
.gb-box.gb-shake{ animation: gb-shake .55s linear both; }
@keyframes gb-shake{
  0%{ transform: translate(0,0) rotate(0); } 10%{ transform: translate(-6px,2px) rotate(-6deg); } 20%{ transform: translate(7px,-2px) rotate(6deg); }
  30%{ transform: translate(-8px,3px) rotate(-8deg); } 40%{ transform: translate(8px,-3px) rotate(8deg); } 50%{ transform: translate(-9px,2px) rotate(-9deg) scale(1.04); }
  60%{ transform: translate(9px,-2px) rotate(9deg) scale(1.06); } 80%{ transform: translate(-6px,1px) rotate(-5deg) scale(1.08); } 100%{ transform: translate(0,0) rotate(0) scale(1.1); }
}
.gb-body, .gb-lid{ position:absolute; left:0; right:0; }
.gb-body{
  bottom:0; height:96px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(90deg, var(--gb-b), var(--gb-a) 35%, var(--gb-a) 65%, var(--gb-b));
  box-shadow: 0 16px 24px rgba(0,0,0,.45), inset 0 -10px 18px rgba(0,0,0,.25);
}
.gb-body::before{ /* vertical ribbon */
  content:''; position:absolute; left:50%; top:0; bottom:0; width:26px; margin-left:-13px;
  background: linear-gradient(90deg, var(--gb-rib2), var(--gb-rib) 50%, var(--gb-rib2));
}
.gb-lid{
  top:20px; height:44px; border-radius: 8px;
  background: linear-gradient(90deg, var(--gb-b), var(--gb-a) 35%, var(--gb-a) 65%, var(--gb-b));
  box-shadow: 0 8px 14px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.2);
  left:-8px; right:-8px; transform-origin: 0 100%; z-index:2;
}
.gb-lid::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:26px; margin-left:-13px;
  background: linear-gradient(90deg, var(--gb-rib2), var(--gb-rib) 50%, var(--gb-rib2)); }
.gb-bow{ position:absolute; left:50%; top:-26px; width:70px; height:34px; margin-left:-35px; z-index:3; }
.gb-bow::before, .gb-bow::after{
  content:''; position:absolute; top:0; width:32px; height:28px; border:8px solid var(--gb-rib); border-radius: 60% 40% 60% 40%;
  background: transparent; box-shadow: inset 0 0 0 2px var(--gb-rib2);
}
.gb-bow::before{ left:0; transform: rotate(-24deg); }
.gb-bow::after{ right:0; transform: scaleX(-1) rotate(-24deg); }
.gb-bow i{ position:absolute; left:50%; top:14px; width:20px; height:20px; margin-left:-10px; border-radius:50%; background: var(--gb-rib); box-shadow: inset 0 0 0 3px var(--gb-rib2); z-index:2; }
.gb-glow{ position:absolute; left:8%; right:8%; top:24px; height:40px; border-radius:50%; background: radial-gradient(ellipse, #fff8c8, rgba(255,240,150,0) 70%); opacity:0; }

/* five different ways to open — chosen at random, never the same twice in a row */
.gb-box.gb-open-pop .gb-lid{ animation: gb-lid-pop .9s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gb-lid-pop{ 0%{ transform:none; } 25%{ transform: translateY(-20px) rotate(-4deg); } 100%{ transform: translate(60px,-220px) rotate(38deg); opacity:0; } }
.gb-box.gb-open-slide .gb-lid{ animation: gb-lid-slide .8s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes gb-lid-slide{ 0%{ transform:none; } 30%{ transform: translateY(-26px); } 100%{ transform: translate(-190px,-30px) rotate(-14deg); opacity:0; } }
.gb-box.gb-open-flap .gb-lid{ animation: gb-lid-flap .8s cubic-bezier(.3,1.3,.5,1) forwards; transform-origin: 50% 0; }
@keyframes gb-lid-flap{ 0%{ transform:none; } 100%{ transform: translateY(-40px) perspective(500px) rotateX(-115deg); } }
.gb-box.gb-open-spin .gb-lid{ animation: gb-lid-spin 1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gb-lid-spin{ 0%{ transform:none; } 100%{ transform: translateY(-260px) rotate(720deg) scale(.5); opacity:0; } }
.gb-box.gb-open-burst .gb-lid{ animation: gb-lid-burst .7s cubic-bezier(.1,.9,.2,1) forwards; }
@keyframes gb-lid-burst{ 0%{ transform:none; } 100%{ transform: translate(-30px,-330px) rotate(-90deg) scale(.6); opacity:0; } }
.gb-box.gb-opened .gb-glow{ animation: gb-glow .9s ease-out forwards; }
@keyframes gb-glow{ 0%{ opacity:0; transform: scaleY(.3); } 40%{ opacity:1; } 100%{ opacity:.85; transform: scale(1.5,3) translateY(-20px); } }
.gb-box.gb-opened{ animation: gb-settle .6s ease-out forwards; pointer-events:none; }
@keyframes gb-settle{ 0%{ transform: scale(1.1); } 100%{ transform: scale(.82) translateY(38px); opacity:.0; } }

/* the reveal card */
.gb-reveal{ display:none; width:100%; }
.gb-reveal.gb-show{ display:block; }
.gb-card{
  position:relative; padding: 26px 22px 22px; border-radius: 22px; color:#fff;
  background: linear-gradient(160deg, var(--gb-card-a, #3c2f8f), var(--gb-card-b, #1d1650));
  border: 2px solid rgba(255,231,140,.8);
  box-shadow: 0 0 0 6px rgba(255,231,140,.12), 0 30px 70px rgba(0,0,0,.55), 0 0 60px var(--gb-glow, rgba(255,215,106,.35));
}
.gb-card.gb-in-rise{ animation: gb-card-rise .8s cubic-bezier(.2,1.2,.4,1) both; }
.gb-card.gb-in-flip{ animation: gb-card-flip .9s cubic-bezier(.2,1,.4,1) both; }
.gb-card.gb-in-zoom{ animation: gb-card-zoom .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes gb-card-rise{ from{ opacity:0; transform: translateY(120px) scale(.6); } to{ opacity:1; transform:none; } }
@keyframes gb-card-flip{ from{ opacity:0; transform: perspective(900px) rotateY(-100deg) scale(.8); } to{ opacity:1; transform:none; } }
@keyframes gb-card-zoom{ from{ opacity:0; transform: scale(.2) rotate(-12deg); } to{ opacity:1; transform:none; } }
.gb-emoji{ font-size: 4.4rem; line-height:1; display:block; margin-bottom:6px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); animation: gb-emoji-bounce 1.6s ease-in-out infinite; }
@keyframes gb-emoji-bounce{ 0%,100%{ transform: translateY(0) rotate(-4deg); } 50%{ transform: translateY(-10px) rotate(5deg) scale(1.06); } }
.gb-title{ font-family:'Fraunces',serif; font-weight:800; font-size:1.55rem; line-height:1.15; margin:0; color:#fff; }
.gb-msg{ margin:8px 0 0; font-size:0.92rem; line-height:1.5; color: rgba(255,255,255,.86); }
.gb-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding: 7px 14px; border-radius:999px;
  background: rgba(255,231,140,.18); border:1px dashed rgba(255,231,140,.85); color:#F8E27F; font-weight:700; font-size:0.85rem;
}
.gb-quote{ margin: 14px 0 0; font-size:0.82rem; font-style: italic; color: rgba(255,255,255,.72); line-height:1.5; }
.gb-count{ margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color: rgba(255,255,255,.55); }
.gb-actions{ display:flex; gap:10px; margin-top: 18px; }
.gb-actions .qw-btn{ flex:1; }
.gb-close{ /* uses .qw-btn .qw-next look */ width:100%; }
.gb-skip{
  position:absolute; top:14px; right:14px; z-index:5; background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:999px; padding:6px 12px; font-size:0.78rem; cursor:pointer; font-family:'Work Sans',sans-serif;
}
.gb-skip:hover{ background: rgba(255,255,255,.22); }

/* compact mode: a small self-opening present for quick admin actions */
.gb-overlay.gb-compact{
  background: transparent; align-items:flex-end; justify-content:center; pointer-events:none; padding-bottom: 26px;
}
.gb-overlay.gb-compact .gb-rays, .gb-overlay.gb-compact .gb-hint, .gb-overlay.gb-compact .gb-sub{ display:none; }
.gb-overlay.gb-compact .gb-stage{ width: min(340px, 100%); pointer-events:auto; }
.gb-overlay.gb-compact .gb-boxwrap{ transform: scale(.6); margin: -26px 0; }
.gb-overlay.gb-compact .gb-card{ padding: 16px 16px 14px; border-radius:18px; text-align:left; display:grid; grid-template-columns:auto 1fr; gap: 0 14px; align-items:center; }
.gb-overlay.gb-compact .gb-emoji{ font-size:2.6rem; margin:0; grid-row: span 3; }
.gb-overlay.gb-compact .gb-title{ font-size:1.05rem; }
.gb-overlay.gb-compact .gb-msg{ font-size:0.8rem; margin-top:3px; }
.gb-overlay.gb-compact .gb-badge{ margin-top:6px; padding:3px 10px; font-size:0.72rem; justify-self:start; }
.gb-overlay.gb-compact .gb-quote, .gb-overlay.gb-compact .gb-count, .gb-overlay.gb-compact .gb-actions{ display:none; }
.gb-overlay.gb-compact .gb-skip{ display:none; }
.gb-overlay.gb-compact .gb-stage.gb-hasbtn .gb-actions{ display:none; }

/* lightning special + flash color */
.gb-lightning{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 50% 40%, #d8ecff, rgba(93,168,245,0) 60%); opacity:0; }
.gb-lightning.gb-go{ animation: gb-bolt .9s ease-out; }
@keyframes gb-bolt{ 0%{ opacity:0; } 8%{ opacity:1; } 14%{ opacity:.1; } 22%{ opacity:.95; } 100%{ opacity:0; } }

/* ---------------------------------------------------------- */
/* 3. GIFT UNWRAP (panels / dialogs open like a present)      */
/* ---------------------------------------------------------- */
.gu-host{ position:relative; }
.gu-wrap{
  position:absolute; inset:0; z-index: 30; pointer-events:none; overflow:hidden; border-radius: inherit;
  --gu-a:#e2455d; --gu-b:#b02f47; --gu-rib:#ffd76a;
}
.gu-half{
  position:absolute; background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 3px, transparent 4px) 0 0/26px 26px,
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.16) 0 2px, transparent 3px) 0 0/22px 22px,
    linear-gradient(135deg, var(--gu-a), var(--gu-b));
}
.gu-h1{ left:0; top:0; width:50%; height:100%; }
.gu-h2{ left:50%; top:0; width:50%; height:100%; }
.gu-v1{ left:0; top:0; width:100%; height:50%; }
.gu-v2{ left:0; top:50%; width:100%; height:50%; }
.gu-rib-v, .gu-rib-h{ position:absolute; background: linear-gradient(90deg, #e0ac2b, var(--gu-rib) 50%, #e0ac2b); }
.gu-rib-v{ left:50%; top:0; bottom:0; width:22px; margin-left:-11px; }
.gu-rib-h{ top:50%; left:0; right:0; height:22px; margin-top:-11px; background: linear-gradient(180deg, #e0ac2b, var(--gu-rib) 50%, #e0ac2b); }
.gu-bow{ position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; font-size:2.6rem; line-height:56px; text-align:center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
/* variant: two halves slide apart left/right */
.gu-wrap.gu-split-h .gu-h1{ animation: gu-left .85s cubic-bezier(.6,0,.3,1) .28s forwards; }
.gu-wrap.gu-split-h .gu-h2{ animation: gu-right .85s cubic-bezier(.6,0,.3,1) .28s forwards; }
.gu-wrap.gu-split-h .gu-rib-v{ display:none; }
@keyframes gu-left{ to{ transform: translateX(-102%); } } @keyframes gu-right{ to{ transform: translateX(102%); } }
/* variant: two halves slide apart up/down (like curtains) */
.gu-wrap.gu-split-v .gu-v1{ animation: gu-up .85s cubic-bezier(.6,0,.3,1) .28s forwards; }
.gu-wrap.gu-split-v .gu-v2{ animation: gu-down .85s cubic-bezier(.6,0,.3,1) .28s forwards; }
.gu-wrap.gu-split-v .gu-rib-h{ display:none; }
@keyframes gu-up{ to{ transform: translateY(-102%); } } @keyframes gu-down{ to{ transform: translateY(102%); } }
/* variant: the lid hinges open (top half flips up, bottom drops) */
.gu-wrap.gu-lid{ perspective: 900px; }
.gu-wrap.gu-lid .gu-v1{ transform-origin: 50% 0; animation: gu-lid-up .9s cubic-bezier(.3,1.3,.5,1) .3s forwards; }
.gu-wrap.gu-lid .gu-v2{ animation: gu-fade .5s ease .55s forwards; }
@keyframes gu-lid-up{ to{ transform: rotateX(-125deg); opacity:0; } }
@keyframes gu-fade{ to{ opacity:0; } }
/* variant: ribbons whip away, then the paper pops off */
.gu-wrap.gu-untie .gu-half{ animation: gu-pop-off .5s cubic-bezier(.4,0,.2,1) .7s forwards; }
.gu-wrap.gu-untie .gu-rib-v{ animation: gu-rib-up .55s ease-in .15s forwards; }
.gu-wrap.gu-untie .gu-rib-h{ animation: gu-rib-side .55s ease-in .3s forwards; }
.gu-wrap.gu-untie .gu-bow{ animation: gu-bow-fly .6s cubic-bezier(.3,0,.7,1) .1s forwards; }
@keyframes gu-rib-up{ to{ transform: translateY(-120%); } } @keyframes gu-rib-side{ to{ transform: translateX(120%); } }
@keyframes gu-bow-fly{ to{ transform: translateY(-200px) rotate(360deg) scale(.4); opacity:0; } }
@keyframes gu-pop-off{ to{ transform: scale(1.25); opacity:0; } }
/* variant: springs open from the middle */
.gu-wrap.gu-pop .gu-half{ animation: gu-spring .7s cubic-bezier(.3,1.7,.5,1) .3s forwards; }
.gu-wrap.gu-pop .gu-rib-v, .gu-wrap.gu-pop .gu-rib-h{ animation: gu-fade .3s ease .28s forwards; }
.gu-wrap.gu-pop .gu-bow{ animation: gu-bow-fly .5s ease .25s forwards; }
@keyframes gu-spring{ 0%{ transform:none; opacity:1; } 45%{ transform: scale(.94); } 100%{ transform: scale(1.4); opacity:0; } }
.gu-wrap.gu-done{ display:none; }
/* the content also gets a gentle reveal */
.gu-content-in{ animation: gu-content .9s ease both; }
@keyframes gu-content{ 0%{ opacity:0; transform: scale(.94); } 45%{ opacity:0; } 100%{ opacity:1; transform:none; } }

/* ---------------------------------------------------------- */
/* 4. GAME DIALOGS  +  PORTAL WIPE                            */
/* ---------------------------------------------------------- */
.nbd-overlay{
  position:fixed; inset:0; z-index: 9400; display:flex; align-items:center; justify-content:center; padding:20px;
  background: rgba(8,12,24,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: gb-fade .25s ease both;
}
.nbd-card{
  position:relative; width:min(430px,100%); max-height: 88vh; overflow:auto; border-radius: 18px; padding: 26px 22px 20px;
  background: linear-gradient(170deg, #1d2b4a, #111a2f); color: #F5F3E7; font-family:'Work Sans',sans-serif;
  border: 1.5px solid #C9A227; box-shadow: 0 0 0 6px rgba(201,162,39,.12), 0 30px 70px rgba(0,0,0,.6);
}
.nbd-icon{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; margin-bottom:12px;
  background: rgba(228,196,82,.14); border:1px solid rgba(228,196,82,.5); }
.nbd-card.nbd-warn .nbd-icon{ background: rgba(255,122,112,.14); border-color: rgba(255,122,112,.6); }
.nbd-title{ font-family:'Fraunces',serif; font-weight:800; font-size:1.25rem; margin:0 0 8px; color:#F8E27F; }
.nbd-msg{ white-space: pre-wrap; word-break: break-word; font-size:0.93rem; line-height:1.55; color:#EDE6D3; }
.nbd-input{
  width:100%; margin-top:14px; padding: 12px 14px; border-radius: 10px; font-size:0.95rem; font-family:'Work Sans',sans-serif;
  background: rgba(245,243,231,.08); color:#F5F3E7; border:1.5px solid rgba(245,243,231,.28);
}
.nbd-input:focus{ outline:none; border-color:#E4C452; box-shadow: 0 0 0 3px rgba(228,196,82,.2); }
.nbd-err{ min-height: 1.2em; margin-top:8px; font-size:0.8rem; color:#ff9d95; font-weight:600; }
.nbd-actions{ display:flex; gap:10px; margin-top: 16px; }
.nbd-actions .qw-btn{ flex:1; }
.nbd-actions .qw-back{ color:#F5F3E7; }
.nbd-danger{ background: linear-gradient(180deg,#ff8c82,#d9463a) !important; box-shadow: 0 5px 0 #8f2b23, 0 10px 22px rgba(217,70,58,.28) !important; color:#fff !important; }

.pw-overlay{
  position:fixed; inset:0; z-index: 9800; display:grid; place-items:center; pointer-events:all;
  background: radial-gradient(circle at 50% 50%, #1c3a64, #0A1628 75%); color:#F8E27F;
  font-family:'Fraunces',serif; text-align:center;
}
.pw-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.pw-seal{
  width:84px; height:84px; border-radius:50%; border:3px solid #C9A227; display:grid; place-items:center; font-weight:800; font-size:1.7rem; color:#E4C452;
  position:relative; animation: pw-pulse 1s ease-in-out infinite;
}
.pw-seal::before{ content:''; position:absolute; inset:7px; border:1.5px dashed rgba(201,162,39,.6); border-radius:50%; animation: fx-ring-spin 3s linear infinite; }
@keyframes pw-pulse{ 50%{ transform: scale(1.08); box-shadow: 0 0 30px rgba(228,196,82,.5); } }
.pw-text{ font-size:1.05rem; color:#EDE6D3; letter-spacing:.02em; }
.pw-dots::after{ content:''; animation: pw-dots 1s steps(4) infinite; }
@keyframes pw-dots{ 0%{ content:''; } 25%{ content:'.'; } 50%{ content:'..'; } 75%{ content:'...'; } }

/* ---------------------------------------------------------- */
/* small-screen + accessibility                               */
/* ---------------------------------------------------------- */
@media (max-width: 520px){
  .qw-hud{ grid-template-columns: auto 1fr; }
  .qw-xp{ grid-column: 1 / -1; text-align:left; display:flex; gap:10px; align-items:baseline; }
  .qw-xp small{ display:inline; }
  .qw-step-title{ font-size:1.12rem; }
  .gb-box{ width:130px; height:130px; }
  .gb-card{ padding: 22px 16px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .qw-in-slideR,.qw-in-slideL,.qw-in-drop,.qw-in-flip,.qw-in-zoom,.qw-in-swing,
  .qw-shake,.qw-avatar-hop,.gb-box,.gb-hint,.gb-emoji,.gb-card,.gb-rays,.gu-content-in,.qw-alert.qw-show{ animation: none !important; }
  .gu-wrap{ display:none !important; }
  .qw-seg::after, .qw-tick, .qw-meter-bars i{ transition: none !important; }
  .pw-seal, .pw-seal::before{ animation: none !important; }
}