/*
 * Memory Quest – Dark/Neon UI (mobile-first)
 * حس: گیم واقعی، نئون، نرم و شیک.
 */

:root{
  --bg0:#060814;
  --bg1:#0b1024;
  --card:rgba(18,22,48,.62);
  --cardSolid:#121630;
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.18);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.52);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --shadowSoft:0 10px 30px rgba(0,0,0,.35);
  --pink:#ff2dac;
  --cyan:#00f5ff;
  --purple:#8b5cff;
  --green:#4dff9a;
  --yellow:#ffd85a;
  --danger:#ff3b5f;
  --radius:18px;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
  direction:rtl;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(139,92,255,.30) 0%, rgba(255,45,172,.18) 32%, rgba(0,245,255,.10) 62%, rgba(6,8,20,1) 100%),
              radial-gradient(900px 480px at 10% 10%, rgba(0,245,255,.12) 0%, rgba(6,8,20,0) 60%),
              radial-gradient(900px 480px at 90% 15%, rgba(255,45,172,.12) 0%, rgba(6,8,20,0) 60%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

/* Subtle animated aurora */
@keyframes auroraMove{
  0%{ transform: translate3d(-6%, -4%, 0) scale(1); opacity:.85; }
  50%{ transform: translate3d(6%, 4%, 0) scale(1.05); opacity:1; }
  100%{ transform: translate3d(-6%, -4%, 0) scale(1); opacity:.85; }
}

body.game-body::before,
body.landing-body::before{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  background:
    radial-gradient(480px 260px at 20% 20%, rgba(0,245,255,.20), rgba(0,245,255,0) 60%),
    radial-gradient(520px 300px at 80% 28%, rgba(255,45,172,.20), rgba(255,45,172,0) 62%),
    radial-gradient(620px 360px at 55% 90%, rgba(139,92,255,.20), rgba(139,92,255,0) 65%);
  filter: blur(18px);
  animation: auroraMove 10s ease-in-out infinite;
  opacity:.7;
}

/* Scanlines + noise for game vibe */
body.game-body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,.035) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  mix-blend-mode: overlay;
  opacity:.12;
}

.landing-body,.game-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Motion */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{ transform: translateY(14px); opacity:0 } to{ transform: translateY(0); opacity:1 } }
@keyframes pop{ 0%{transform:scale(.96); opacity:.2} 100%{transform:scale(1); opacity:1} }
@keyframes pulseGlow{ 0%,100%{ box-shadow: 0 0 0 rgba(255,45,172,0) } 50%{ box-shadow: 0 0 22px rgba(255,45,172,.35) } }
@keyframes shimmer{ 0%{ transform: translateX(-40%) } 100%{ transform: translateX(140%) } }
@keyframes spin{ to{ transform: rotate(360deg) } }

.fade-in{ animation: fadeIn .35s ease-out; }
.slide-up{ animation: slideUp .40s cubic-bezier(.2,.9,.2,1); }

/* Layout */
#app{ flex:1; }

.card{
  margin: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,22,48,.72), rgba(18,22,48,.52));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 280px at 50% -10%, rgba(255,45,172,.14), rgba(0,0,0,0) 60%);
  opacity:.9;
  pointer-events:none;
}

.card > *{ position:relative; }

.card h2,
.card h3{ margin: .15rem 0 .65rem; letter-spacing:.2px; }

.muted{ color: var(--muted); }

/* Topbar (HUD) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding: .75rem 1rem;
  background: rgba(8,10,20,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.topbar-left{ display:flex; align-items:center; gap:.15rem; min-width: 120px; }
.topbar-right{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }

.heart{ font-size: 1.05rem; filter: drop-shadow(0 0 10px rgba(255,45,172,.35)); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  font-size: .85rem;
  white-space: nowrap;
}

.badge-muted{ color: var(--muted); }

/* Stepper */
.stepper{
  display:flex;
  justify-content:space-between;
  gap:.35rem;
  margin: .9rem 1rem .25rem;
  position:relative;
}

.stepper::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.10);
}

.step{
  position:relative;
  flex:1;
  text-align:center;
}

.step-circle{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto .45rem;
  font-size: .88rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  box-shadow: var(--shadowSoft);
}

.step.active .step-circle{
  color: var(--text);
  border-color: rgba(0,245,255,.35);
  box-shadow: 0 0 0 2px rgba(0,245,255,.12), 0 0 24px rgba(0,245,255,.18);
}

.step-completed .step-circle{
  color: #07110a;
  background: rgba(77,255,154,.9);
  border-color: rgba(77,255,154,.65);
  box-shadow: 0 0 22px rgba(77,255,154,.30);
}

/* Inputs */
.input-group{ display:flex; flex-direction:column; gap:.5rem; margin: 1rem 0; }
label{ color: var(--muted); font-size: .95rem; }

input,textarea,select{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .65rem .8rem;
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

input:focus,textarea:focus,select:focus{
  border-color: rgba(0,245,255,.45);
  box-shadow: 0 0 0 3px rgba(0,245,255,.12);
}

textarea{ resize: vertical; min-height: 92px; }

textarea.masked{ color: transparent; text-shadow: 0 0 10px rgba(234,240,255,.35); }

/* Buttons */
.button-row{ display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin: 1.2rem 0 .2rem; }

button{
  -webkit-tap-highlight-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  padding: .78rem 1.15rem;
  border-radius: 999px;
  color: #070a12;
  background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(255,45,172,.95));
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px rgba(255,45,172,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  min-width: 120px;
  position:relative;
  overflow:hidden;
}

button::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,0) 70%);
  transform: translateX(-50%);
  opacity:.0;
}

button:hover{ transform: translateY(-1px); filter: saturate(1.05); }
button:active{ transform: translateY(0); filter: saturate(1.15); }
button:hover::after{ opacity:.65; animation: shimmer .9s ease-out; }

button:disabled{
  cursor:not-allowed;
  color: rgba(234,240,255,.45);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}

.secondary-btn{
  color: var(--text) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}

.tiny-btn{
  min-width: auto;
  padding: .4rem .65rem;
  font-size: .88rem;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* Options */
.options{ margin: .9rem 0; display:flex; flex-direction:column; gap:.55rem; }

.options label{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.options input[type="radio"]{ accent-color: var(--pink); }

.options.scale{ flex-direction:row; flex-wrap:wrap; }
.options.scale label{ width: calc(20% - .5rem); justify-content:center; }

/* Chips */
.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: .5rem .8rem;
  cursor:pointer;
  font-size: .92rem;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.chip:hover{ transform: translateY(-1px); box-shadow: 0 0 20px rgba(0,245,255,.12); }

.chip-select{ display:inline-flex; align-items:center; gap:.45rem; }
.chip-select input{ margin-left:.25rem; }

.level-row{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Question header */
.q-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; gap:.75rem; }
.q-who{ font-weight:700; }
.q-timer{ font-weight:700; color: var(--cyan); text-shadow: 0 0 18px rgba(0,245,255,.22); }

.q-tools{ display:flex; justify-content:flex-end; margin: .25rem 0 .5rem; }

/* Timer bar */
.timer-wrap{ width:100%; height: 10px; background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top: .9rem; }
.timer-bar{ height:100%; width:100%; background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(255,45,172,.95)); transition: width .18s linear; }

.danger .timer-bar{ background: linear-gradient(90deg, rgba(255,216,90,.95), rgba(255,59,95,.95)); }
.danger .q-timer{ color: var(--yellow); text-shadow: 0 0 18px rgba(255,216,90,.22); }

/* Reveal */
.reveal-tease{ text-align:center; }
.reveal-eyes{ font-size: 2.4rem; margin-bottom: .35rem; filter: drop-shadow(0 0 18px rgba(255,45,172,.22)); }

.reveal-table{ width:100%; border-collapse: collapse; margin-top: .95rem; }
.reveal-table th, .reveal-table td{ border: 1px solid rgba(255,255,255,.12); padding: .8rem; vertical-align: top; }
.reveal-table th{ background: rgba(255,45,172,.10); }

.reveal-meta{ display:flex; align-items:center; gap:.6rem; margin-top: .85rem; flex-wrap: wrap; }

.afterglow{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,45,172,.12), rgba(0,245,255,.10));
  box-shadow: 0 0 28px rgba(0,245,255,.10);
}

.afterglow-title{ font-weight: 900; margin-bottom: .4rem; }

.reactions{ display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin-top: 1rem; }

/* Boundary box */
.boundary-box{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: .8rem;
}

.boundary-row{ display:flex; align-items:center; gap:.6rem; padding: .35rem 0; }

/* Handoff / Waiting */
.handoff-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height: 62vh;
  margin: 1rem;
}

.waiting-card .waiting-top{
  display:flex;
  align-items:flex-start;
  gap: .85rem;
}

.waiting-card .spinner{ margin: .15rem 0 0; }

.waiting-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 1rem;
}

@media(max-width: 420px){
  .waiting-row{ grid-template-columns: 1fr; }
}

.waiting-col{
  padding: .85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: .85rem;
  color: var(--muted);
  margin-top: .45rem;
}

.pill-ok{ border-color: rgba(77,255,154,.35); box-shadow: 0 0 18px rgba(77,255,154,.12); }
.pill-off{ border-color: rgba(255,59,95,.35); box-shadow: 0 0 18px rgba(255,59,95,.10); }

.waiting-actions{
  display:flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.small{ font-size: .9rem; }

/* Share links (remote room) */
.share-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-top: 1rem;
}

@media(min-width: 720px){
  .share-grid{ grid-template-columns: 1fr 1fr; }
}

.share-item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: .85rem;
}

.share-title{
  font-weight: 900;
  margin-bottom: .45rem;
}

.share-link{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9rem;
  color: rgba(234,240,255,.85);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: .65rem;
  word-break: break-all;
}

.share-actions{
  display:flex;
  gap:.6rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: .65rem;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  padding: .65rem .95rem;
  border-radius: 999px;
  background: rgba(18,22,48,.85);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadowSoft);
  color: var(--text);
  backdrop-filter: blur(12px);
  animation: pop .18s ease-out;
  max-width: calc(100vw - 32px);
  text-align:center;
}

.handoff-bubble{
  font-size: 3rem;
  line-height:1;
  filter: drop-shadow(0 0 20px rgba(0,245,255,.20));
}

.spinner{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(0,245,255,.85);
  animation: spin .8s linear infinite;
  margin: .6rem auto 0;
}

.presence{
  display:flex;
  gap:.5rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: .8rem;
}

.presence .pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: .85rem;
  color: var(--muted);
}

.dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.dot.on{ background: rgba(77,255,154,.9); box-shadow: 0 0 16px rgba(77,255,154,.25); }

/* Paywall */
.paywall-preview{ position:relative; filter: blur(5px) saturate(.9); }
.paywall-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  padding: 1rem;
  background: rgba(8,10,20,.65);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}


.paywall-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:center}
.paywall-overlay a.secondary{opacity:.92}
.paywall-overlay a{
  text-decoration:none;
  padding:.6rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.paywall-overlay a.primary{
  border-color: rgba(255,45,172,.35);
  box-shadow: 0 0 22px rgba(255,45,172,.18);
}

/* Plan */
.plan-card{ overflow: visible; }
.plan-header{ display:flex; align-items:center; gap:.6rem; margin-bottom:.25rem; }
.plan-info{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.6rem; color: var(--muted); }

.plan-checklist{ margin-top: 1rem; display:flex; flex-direction:column; gap:.55rem; }

.plan-task{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding: .75rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.plan-task label.done{ text-decoration: line-through; color: var(--muted2); }

/* Landing */
.landing-header{
  padding: 2.2rem 1rem 1.4rem;
  text-align:center;
}

.landing-header h1{
  margin:0;
  font-size: 2.2rem;
  letter-spacing: .6px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(0,245,255,.12));
}

.landing-header p{ margin:.6rem auto 0; max-width: 720px; color: var(--muted); line-height:1.75; }

.landing-features,.landing-levels,.landing-faq{ padding: 1.2rem 1rem; }
.landing-features ul{ list-style:none; padding:0; margin:.6rem 0 0; }
.landing-features li{ margin:.55rem 0; color: var(--muted); }

.landing-levels .levels{ display:flex; flex-wrap:wrap; gap:1rem; }
.level-card{ width:100%; }
@media(min-width: 720px){ .level-card{ width: calc(33% - .7rem); } }

.primary-btn{
  display:inline-block;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  color: #070a12;
  text-decoration:none;
  background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(255,45,172,.95));
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.cta-section{ display:flex; justify-content:center; padding: 1rem; }

.landing-footer{ margin-top:auto; padding: 1rem; text-align:center; color: var(--muted2); border-top: 1px solid rgba(255,255,255,.08); }

/* Utility */
.paywall-overlay p{ margin:0 0 .2rem; }

/* ===== Ultra polish: settings, cinematic reveal, micro-interactions ===== */

.icon-btn{
  min-width:auto;
  padding:.48rem .65rem;
  border-radius:999px;
  font-size: .95rem;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.icon-btn:active{ transform: translateY(0); }

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index: 9997;
  background: rgba(6,8,20,.62);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 16px;
  opacity:0;
  transition: opacity .22s ease;
}
.modal-backdrop.show{ opacity:1; }

.modal{
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,22,48,.88), rgba(18,22,48,.72));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  overflow:hidden;
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
}
.modal-backdrop.show .modal{ transform: translateY(0); }
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-header h3{ margin:0; }
.modal-body{ padding: .9rem 1rem 1rem; }
.modal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding: .75rem .6rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  margin-bottom: .65rem;
}
.modal-row .muted{ margin:0; font-size: .9rem; }
.switch{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  user-select:none;
}
.switch input{ width: 18px; height: 18px; }

.fx-overlay{
  position:fixed;
  inset:0;
  z-index: 9998;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(900px 420px at 50% 40%, rgba(0,245,255,.14), rgba(6,8,20,.86));
  backdrop-filter: blur(14px);
  opacity:0;
  transition: opacity .22s ease;
}
.fx-overlay.show{ opacity:1; }
.fx-overlay .fx-core{
  text-align:center;
  padding: 1.05rem 1.15rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,22,48,.55);
  box-shadow: 0 30px 85px rgba(0,0,0,.70);
}
.fx-title{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .2px;
}
.fx-sub{ color: var(--muted); margin-top:.35rem; }

@keyframes warp{
  0%{ transform: scale(.98); filter: blur(0); }
  45%{ transform: scale(1.02); filter: blur(.2px); }
  100%{ transform: scale(1); filter: blur(0); }
}
.page-warp{ animation: warp .28s ease-out; }

.reveal-cinematic .reveal-table{
  transform: perspective(900px) rotateX(10deg) rotateY(-10deg) translateY(8px);
  opacity:.0;
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .45s ease;
}
.reveal-cinematic.reveal-show .reveal-table{
  transform: perspective(900px) rotateX(0) rotateY(0) translateY(0);
  opacity:1;
}

.match-meter{
  margin-top: .85rem;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.meter-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.7rem;
  margin-bottom:.6rem;
}
.meter-label{
  font-weight: 900;
  letter-spacing:.2px;
}
.meter-bar{
  width:100%;
  height: 12px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
}
.meter-fill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(255,45,172,.95));
  box-shadow: 0 0 24px rgba(255,45,172,.18);
  transition: width .55s cubic-bezier(.2,.9,.2,1);
}

.confetti-canvas{
  position:fixed;
  inset:0;
  z-index: 9996;
  pointer-events:none;
}

.plan-progress{
  margin-top: .8rem;
  padding: .7rem .85rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.plan-progress .meter-bar{ height: 10px; }
.plan-progress .muted{ margin-top:.45rem; }

/* Plan extras */
.plan-vibe{ display:flex; gap:.45rem; flex-wrap:wrap; margin: .5rem 0 .2rem; }

/* Mission Board */
.mission-board{
  margin: .85rem 0 .2rem;
  padding: .75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadowSoft);
}
.mission-board .board-title{ margin: .15rem 0 .65rem; }
.mission-seg{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  margin: .55rem 0;
  overflow: hidden;
}
.mission-seg summary{
  cursor: pointer;
  padding: .65rem .8rem;
  font-weight: 900;
  color: var(--text);
  list-style: none;
}
.mission-seg summary::-webkit-details-marker{ display:none; }
.seg-list{ margin: .35rem 0 .75rem; padding: 0 1.15rem 0 0; }
.seg-list li{ margin: .35rem 0; color: var(--muted); line-height: 1.55; }

/* Event card */
.event-card .event-top{ display:flex; gap:.8rem; align-items:flex-start; }
.event-card .event-icon{ font-size: 2rem; filter: drop-shadow(0 0 14px rgba(0,245,255,.25)); }
.event-card .event-text p{ margin: .35rem 0; line-height: 1.6; }
.event-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top: .85rem; }
.small{ font-size: .85rem; }

/* Secret Zone */
.secret-zone{
  margin-top: .95rem;
  padding: .85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,45,172,.20);
  background: linear-gradient(180deg, rgba(255,45,172,.10), rgba(0,245,255,.05));
}
.secret-grid{ display:grid; grid-template-columns: 1fr; gap: .75rem; }
.moves-grid{ display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 720px){
  .secret-grid{ grid-template-columns: 1fr 1fr; }
  .moves-grid{ grid-template-columns: 1fr 1fr; }
}
.secret-item,.move-item{
  padding: .75rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
.secret-head{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.secret-owner{ color: var(--muted); font-size: .95rem; }
.secret-title{ font-weight: 900; margin-top: .45rem; }
.secret-text{ margin-top: .45rem; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }
.masked-text{ filter: blur(7px); user-select: none; }
.secret-locked{
  margin-top: .55rem;
  padding: .55rem .7rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  color: var(--muted);
}
.secret-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: .65rem; }
.moves-zone{ margin-top: .85rem; }
.moves-status{ display:flex; gap:.45rem; flex-wrap:wrap; margin: .55rem 0 .25rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Print: make plan printable */
@media print{
  body{ background: #ffffff !important; color: #111 !important; }
  body::before, body::after{ display:none !important; }
  .topbar, .stepper{ display:none !important; }
  .card{ box-shadow:none !important; background:#fff !important; border:1px solid #ddd !important; }
  button{ display:none !important; }
}