/* ============================================================
   EnforcinGame — Corporate Legal Risk Game
   Design system: dark purple workspace + bright legal paper
   Accents: cyan (תכלת) · blue · purple
   ============================================================ */

:root{
  /* Surfaces */
  --bg-main:#241C48;
  --bg-deep:#1A1436;
  --bg-soft:#332A5F;
  --surface:#2B2252;
  --surface-alt:#392F66;

  /* Paper */
  --paper:#F7F6F2;
  --paper-2:#ECEBE5;
  --paper-border:#D9D6CC;

  /* Text */
  --text-main:#F3F1FB;
  --text-muted:#B6AEDA;
  --text-dark:#1C1830;
  --text-dark-muted:#6B6480;

  /* Accents */
  --teal:#4FD1E8;
  --blue:#5B8DF5;
  --gold:#A17BF5;
  --red:#FF6B84;
  --purple:#C77BF0;
  --green:#3FD69A;

  --correct:#3FD69A;
  --incorrect:#FF6B84;
  --warning:#FFB25C;
  --boss:#FF6B84;

  /* Radii */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* Shadows */
  --shadow-soft:0 8px 24px rgba(12,8,30,.35);
  --shadow-card:0 18px 45px rgba(0,0,0,.25);
  --shadow-paper:0 8px 24px rgba(24,16,48,.10);
  --shadow-lift:0 16px 38px rgba(24,16,48,.20);

  --line:1px solid rgba(255,255,255,.08);
  --line-strong:1px solid rgba(255,255,255,.14);

  --nav-h:68px;

  font-family:"Heebo","Assistant","Rubik",-apple-system,"Segoe UI","Arial Hebrew",Arial,sans-serif;
}

*{box-sizing:border-box;}

html,body{
  font-size:var(--font-base,16px);
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg-deep);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
}

body{
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(91,141,245,.13), transparent 62%),
    radial-gradient(900px 560px at 8% 4%, rgba(79,209,232,.10), transparent 60%),
    linear-gradient(178deg, var(--bg-main) 0%, var(--bg-deep) 68%);
  background-attachment:fixed;
}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.2px;}

/* Keeps Latin/numeric tokens (case numbers, x/y fractions, page ranges)
   from being reordered by the bidi algorithm inside RTL text. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;}

.icon{width:18px;height:18px;flex:0 0 auto;display:block;}
.icon-lg{width:22px;height:22px;}
.icon-sm{width:15px;height:15px;}

/* ============================================================
   GLOBAL APP SHELL — top navigation
   ============================================================ */
.app-nav{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 clamp(16px,3vw,32px);
  background:rgba(26,20,54,.86);
  backdrop-filter:blur(14px);
  border-bottom:var(--line);
}

.nav-group{display:flex;align-items:center;gap:6px;}

.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-end:20px;
  font-weight:800;
  font-size:17px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.nav-brand .brand-mark{
  width:34px;height:34px;
  border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),#2E8FB5);
  color:#08202E;
  box-shadow:0 4px 14px rgba(79,209,232,.32);
}

.nav-link{
  padding:9px 15px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  color:var(--text-muted);
  transition:background 160ms ease,color 160ms ease;
  white-space:nowrap;
}
.nav-link:hover{background:rgba(255,255,255,.06);color:var(--text-main);}
.nav-link.is-active{background:rgba(91,141,245,.16);color:#A9C6FF;}

.nav-icon-btn{
  width:38px;height:38px;
  border-radius:10px;
  display:grid;place-items:center;
  color:var(--text-muted);
  transition:background 160ms ease,color 160ms ease;
}
.nav-icon-btn:hover{background:rgba(255,255,255,.07);color:var(--text-main);}
.nav-icon-btn.is-off{color:#6E6694;}

.nav-auth{display:flex;align-items:center;gap:8px;margin-inline-start:6px;}

.nav-profile{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:5px 12px 5px 6px;
  border-radius:12px;
  border:var(--line);
  background:rgba(255,255,255,.04);
  transition:border-color 160ms ease,background 160ms ease;
}
.nav-profile:hover{border-color:rgba(79,209,232,.45);background:rgba(255,255,255,.07);}
.avatar{
  width:32px;height:32px;
  border-radius:9px;
  display:grid;place-items:center;
  font-weight:800;font-size:14px;
  background:linear-gradient(140deg,var(--gold),#7B54D6);
  color:#1A0A38;
}
.nav-profile .who{font-size:14px;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-start:0;
  min-width:190px;
  padding:6px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:var(--line-strong);
  box-shadow:var(--shadow-soft);
  display:none;
  flex-direction:column;
  z-index:70;
}
.dropdown.open{display:flex;}
.dropdown button{
  text-align:start;
  padding:10px 12px;
  border-radius:9px;
  font-size:14px;
  color:var(--text-muted);
  transition:background 140ms ease,color 140ms ease;
}
.dropdown button:hover{background:rgba(255,255,255,.07);color:var(--text-main);}
.dropdown .sep{height:1px;background:rgba(255,255,255,.09);margin:5px 4px;}

.nav-burger{display:none;}

/* Mobile drawer */
.drawer-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(14,9,32,.6);
  backdrop-filter:blur(3px);
  display:none;
}
.drawer-backdrop.open{display:block;}
.drawer{
  position:fixed;top:0;bottom:0;inset-inline-end:0;
  width:min(300px,84vw);
  z-index:90;
  background:var(--surface);
  border-inline-start:var(--line-strong);
  padding:20px 16px;
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(.22,.9,.3,1);
  display:flex;flex-direction:column;gap:6px;
}
html[dir="rtl"] .drawer{transform:translateX(-100%);}
.drawer.open{transform:translateX(0);}
.drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.drawer .nav-link{font-size:16px;padding:12px 14px;}

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.app-main{
  max-width:var(--max-content-width,1400px);
  margin:0 auto;
  padding:clamp(20px,3vw,40px) clamp(16px,3vw,32px) 56px;
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
}

.view-head{margin-bottom:26px;}
.view-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px;
}
.view-head h1{font-size:clamp(24px,3vw,32px);}
.view-head p{margin:8px 0 0;color:var(--text-muted);font-size:15px;max-width:70ch;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;
  border-radius:var(--radius-md);
  background:var(--surface-alt);
  border:var(--line-strong);
  color:var(--text-main);
  font-size:15px;font-weight:700;
  transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}
.btn:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(79,209,232,.5);box-shadow:var(--shadow-soft);}
.btn:active:not(:disabled){transform:translateY(0);}
.btn:disabled{opacity:.42;cursor:not-allowed;}

.btn-primary{
  background:linear-gradient(140deg,var(--teal),#2C9DBA);
  color:#06222E;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(79,209,232,.26);
}
.btn-primary:hover:not(:disabled){box-shadow:0 12px 28px rgba(79,209,232,.36);border-color:transparent;}

.btn-gold{
  background:linear-gradient(140deg,var(--gold),#7B54D6);
  color:#1A0A38;border-color:transparent;
  box-shadow:0 8px 22px rgba(161,123,245,.24);
}
.btn-ghost{background:rgba(255,255,255,.05);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:11px;}

/* ============================================================
   GAME HUD
   ============================================================ */
.game-shell{display:flex;flex-direction:column;gap:20px;flex:1;}

.hud{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  min-height:96px;
  padding:14px clamp(14px,2vw,22px);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(57,47,102,.95),rgba(36,28,72,.95));
  border:var(--line-strong);
  box-shadow:var(--shadow-soft);
}

.hud-stat{display:flex;align-items:center;gap:11px;min-width:0;}
.hud-label{
  font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:3px;white-space:nowrap;
}
.hud-value{font-size:clamp(20px,2vw,27px);font-weight:800;line-height:1;letter-spacing:-.5px;}
.hud-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.09);margin:6px 0;}

/* Score chip */
.score-chip{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--gold);
  background:radial-gradient(circle at 50% 42%, #3E3470 0 42%, #241C48 43% 100%);
  border:3px dashed rgba(161,123,245,.65);
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 12px rgba(161,123,245,.14);
}
.score-chip.pulse{animation:chipPulse 620ms ease;}
@keyframes chipPulse{
  0%{transform:scale(1);}
  35%{transform:scale(1.14);box-shadow:0 0 0 8px rgba(161,123,245,.18);}
  100%{transform:scale(1);}
}
.score-value{color:var(--gold);}
.score-delta{
  display:inline-block;margin-top:4px;
  padding:2px 9px;border-radius:20px;
  font-size:12px;font-weight:800;
  background:rgba(161,123,245,.18);
  color:var(--gold);
  border:1px solid rgba(161,123,245,.36);
  animation:deltaIn 420ms cubic-bezier(.2,.9,.3,1);
}
@keyframes deltaIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}

/* Risk gauge */
.risk-gauge{position:relative;width:62px;height:36px;flex:0 0 auto;}
.risk-gauge svg{display:block;overflow:visible;}
.risk-gauge .gauge-track{stroke:rgba(255,255,255,.13);}
.risk-gauge .gauge-fill{
  stroke:var(--red);
  stroke-linecap:round;
  transition:stroke-dashoffset 520ms cubic-bezier(.3,.9,.35,1), stroke 320ms ease;
}
.risk-gauge .gauge-needle{
  transition:transform 520ms cubic-bezier(.3,.9,.35,1);
  transform-origin:31px 31px;
}
.risk-badge{
  display:inline-block;margin-top:4px;
  padding:2px 8px;border-radius:6px;
  font-size:10px;font-weight:800;letter-spacing:1px;
}
.risk-badge.low{background:rgba(63,214,154,.16);color:#6FE0B4;}
.risk-badge.medium{background:rgba(255,178,92,.18);color:#FFC07A;}
.risk-badge.high{background:rgba(255,107,132,.18);color:#FF95A6;}
.risk-value.low{color:#6FE0B4;}
.risk-value.medium{color:#FFC07A;}
.risk-value.high{color:#FF95A6;}

/* Legal strength */
.ls-shield{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:11px;display:grid;place-items:center;
  color:var(--teal);
  background:rgba(79,209,232,.12);
  border:1px solid rgba(79,209,232,.32);
}
.ls-row{display:flex;align-items:center;gap:10px;}
.ls-meter{display:flex;gap:4px;}
.ls-seg{
  width:17px;height:13px;border-radius:3px;
  background:rgba(255,255,255,.11);
  transition:background 320ms ease,box-shadow 320ms ease;
}
.ls-seg.on{background:var(--teal);box-shadow:0 0 10px rgba(79,209,232,.45);}
.ls-value{font-size:19px;font-weight:800;color:var(--teal);}

/* Progress dots */
.progress-track{display:flex;align-items:center;gap:0;}
.progress-dot{
  width:22px;height:22px;flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  background:rgba(255,255,255,.09);
  color:var(--text-muted);
  border:1px solid rgba(255,255,255,.14);
  transition:all 260ms ease;
}
.progress-dot.done{background:var(--teal);color:#06222E;border-color:transparent;}
.progress-dot.current{
  background:var(--paper);color:var(--text-dark);border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(161,123,245,.22);
}
.progress-link{width:14px;height:2px;background:rgba(255,255,255,.13);}
.progress-link.done{background:var(--teal);}

/* Category badge */
.hud-category{
  margin-inline-start:auto;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
  border:var(--line-strong);
  color:var(--text-muted);
  max-width:230px;
}
.hud-category .cat-name{
  font-size:12px;font-weight:800;letter-spacing:.6px;
  color:var(--text-main);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================================
   GAME WORKSPACE
   ============================================================ */
.game-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 232px;
  gap:24px;
  align-items:start;
  flex:1;
}

/* Sidebar */
.case-sidebar{
  display:flex;flex-direction:column;gap:18px;
  padding:20px 18px;
  border-radius:var(--radius-lg);
  background:rgba(43,34,82,.72);
  border:var(--line);
  backdrop-filter:blur(6px);
}
.sidebar-title{
  font-size:11px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-muted);
  padding-bottom:9px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.info-row{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
.info-row:last-child{margin-bottom:0;}
.info-icon{
  width:30px;height:30px;flex:0 0 auto;
  border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  color:var(--teal);
}
.info-label{font-size:11px;color:var(--text-muted);margin-bottom:2px;}
.info-value{font-size:14px;font-weight:700;line-height:1.35;}

.difficulty-dots{display:flex;gap:4px;margin-top:5px;}
.difficulty-dots i{width:15px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);}
.difficulty-dots i.on{background:var(--red);}

.objective{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:13px;line-height:1.4;color:var(--text-muted);}
.objective:last-child{margin-bottom:0;}
.obj-check{
  width:20px;height:20px;flex:0 0 auto;margin-top:1px;
  border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.2);
  color:transparent;
  transition:all 240ms ease;
}
.objective.done .obj-check{background:var(--teal);border-color:var(--teal);color:#06222E;}
.objective.done{color:var(--text-main);}

/* ============================================================
   CASE FILE (paper)
   ============================================================ */
/* Decorative layer budget: 4 elements — folder tab, paperclip,
   evidence tab, confidential stamp. The first three live on the stage
   (not inside .case-file) so the paper's overflow:hidden can't clip them. */
.case-stage{position:relative;padding-top:34px;}

/* folder tab — sits above the paper's top edge, tucked behind it */
.case-tab{
  position:absolute;top:0;inset-inline-start:28px;
  display:flex;align-items:center;gap:8px;
  padding:8px 20px 14px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(160deg,#2F5A8E,#26497A);
  color:#D3F2FA;
  font-size:11px;font-weight:800;letter-spacing:1.4px;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:none;
  z-index:1;
}

/* paperclip — clipped over the top edge, opposite side from the tab */
.case-clip{
  position:absolute;top:22px;inset-inline-end:26px;
  z-index:3;
  color:#9AA6B4;
  transform:rotate(9deg);
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.22));
}

/* evidence tab — protrudes from the paper's start edge */
.case-evidence{
  position:absolute;top:128px;inset-inline-start:-58px;
  z-index:1;
  padding:9px 12px;
  border-radius:0 9px 9px 0;
  background:linear-gradient(150deg,#6FDCEF,#3FBEDB);
  color:#063240;
  font-size:10px;font-weight:800;letter-spacing:1px;
  text-align:center;line-height:1.5;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  pointer-events:none;
}
html[dir="rtl"] .case-evidence{border-radius:9px 0 0 9px;}
.case-evidence b{display:block;font-size:15px;}

.case-file{
  position:relative;z-index:2;
  background:var(--paper);
  color:var(--text-dark);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(26px,3.4vw,44px);
  overflow:hidden;
  animation:fileIn 380ms cubic-bezier(.2,.9,.3,1);
}
@keyframes fileIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* confidential stamp — inset from the clip so the two never overlap */
.case-stamp{
  position:absolute;top:18px;inset-inline-end:74px;
  padding:7px 14px;
  border:2px solid rgba(255,107,132,.18);
  border-radius:5px;
  color:rgba(255,107,132,.20);
  font-size:10px;font-weight:800;letter-spacing:1.4px;
  transform:rotate(-8deg);
  pointer-events:none;
  text-align:center;line-height:1.35;
}

.case-header{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;
}
.case-header .case-no{color:var(--text-dark);}
.case-header .case-cat{color:var(--gold);}

.boss-label{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 auto 18px;
  width:fit-content;
  padding:7px 18px;
  border-radius:20px;
  background:rgba(255,107,132,.10);
  border:1px solid rgba(255,107,132,.32);
  color:var(--boss);
  font-size:12px;font-weight:800;letter-spacing:2px;
  animation:bossGlow 2.4s ease-in-out infinite;
}
@keyframes bossGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,132,0);}
  50%{box-shadow:0 0 18px 2px rgba(255,107,132,.22);}
}

.question{
  font-size:clamp(20px,2.6vw,var(--question-size,34px));
  font-weight:var(--question-weight,700);
  line-height:1.35;
  text-align:center;
  color:var(--text-dark);
  max-width:850px;
  margin:0 auto;
}
.question-support{
  text-align:center;
  color:var(--text-dark-muted);
  font-size:16px;
  margin:12px auto 0;
}
.case-rule{
  height:1px;max-width:520px;margin:24px auto 0;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.14),transparent);
  position:relative;
}
.case-rule span{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--paper);padding:0 12px;color:rgba(0,0,0,.22);
}

/* Scenario brief inside paper */
.case-brief{
  max-width:760px;margin:0 auto;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.75;
  color:#322C44;
  text-align:center;
}

/* ============================================================
   ANSWER CARDS
   ============================================================ */
.answers-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--card-spacing,18px);
  margin-top:28px;
}

.answer-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:132px;
  padding:24px 22px 22px;
  border-radius:var(--radius-md);
  background:#FFFFFF;
  border:1px solid #D8DDE3;
  box-shadow:var(--shadow-paper);
  text-align:center;
  overflow:hidden;
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;
  animation:dealIn 380ms cubic-bezier(.2,.9,.3,1) backwards;
}
.answer-card:nth-child(1){animation-delay:40ms;}
.answer-card:nth-child(2){animation-delay:100ms;}
.answer-card:nth-child(3){animation-delay:160ms;}
.answer-card:nth-child(4){animation-delay:220ms;}
@keyframes dealIn{
  from{opacity:0;transform:translateY(22px) rotate(-1.4deg);}
  to{opacity:1;transform:translateY(0) rotate(0);}
}

/* diagonal accent corner */
.answer-card::before{
  content:"";
  position:absolute;top:0;inset-inline-start:0;
  width:74px;height:74px;
  background:linear-gradient(135deg,var(--card-accent) 0%,var(--card-accent) 48%,transparent 48.5%);
  opacity:.92;
  pointer-events:none;
}
html[dir="rtl"] .answer-card::before{
  background:linear-gradient(225deg,var(--card-accent) 0%,var(--card-accent) 48%,transparent 48.5%);
}
.answer-card[data-accent="cyan"]{--card-accent:var(--answer-1);}
.answer-card[data-accent="blue"]{--card-accent:var(--answer-2);}
.answer-card[data-accent="purple"]{--card-accent:var(--answer-3);}
.answer-card[data-accent="violet"]{--card-accent:var(--answer-4);}

.answer-badge{
  position:absolute;top:12px;inset-inline-start:12px;
  width:30px;height:30px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#FFFFFF;
  border:1.6px solid var(--card-accent);
  color:var(--card-accent);
  font-size:14px;font-weight:800;
  z-index:1;
}

.answer-text{
  font-size:clamp(15px,1.5vw,var(--answer-size,21px));
  font-weight:var(--answer-weight,600);
  line-height:1.5;
  color:var(--text-dark);
  padding-inline-start:22px;
}

.answer-card:not(:disabled):hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--card-accent);
}
.answer-card.is-selected{
  transform:translateY(-2px) scale(1.01);
  outline:2px solid var(--card-accent);
  outline-offset:-1px;
}
.answer-card:disabled{cursor:default;}

.answer-card.is-correct{
  border:2px solid var(--correct);
  background:#F2FCF8;
}
.answer-card.is-wrong{
  border:2px solid var(--incorrect);
  background:#FFF4F6;
  animation:cardShake 380ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes cardShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.answer-card.is-dim{opacity:.5;}
.answer-card.is-eliminated{opacity:.32;filter:grayscale(.7);}

/* result stamps */
.answer-stamp{
  position:absolute;bottom:10px;inset-inline-end:12px;
  padding:3px 10px;
  border:2px solid currentColor;
  border-radius:4px;
  font-size:10px;font-weight:800;letter-spacing:1.4px;
  transform:rotate(-7deg);
  animation:stampIn 340ms cubic-bezier(.2,1.5,.4,1);
  pointer-events:none;
}
.answer-stamp.ok{color:var(--correct);}
.answer-stamp.bad{color:var(--incorrect);}
@keyframes stampIn{
  from{opacity:0;transform:rotate(-7deg) scale(2.1);}
  to{opacity:1;transform:rotate(-7deg) scale(1);}
}

/* ============================================================
   FEEDBACK PANEL
   ============================================================ */
.feedback-panel{
  margin-top:24px;
  border-radius:var(--radius-md);
  background:var(--paper-2);
  border:1px solid var(--paper-border);
  padding:20px 22px;
  animation:slideDown 340ms cubic-bezier(.2,.9,.3,1);
  overflow:hidden;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px);max-height:0;}
  to{opacity:1;transform:translateY(0);max-height:420px;}
}
.feedback-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.result-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:20px;
  font-size:13px;font-weight:800;
}
.result-tag.ok{background:rgba(63,214,154,.14);color:#1F9A72;}
.result-tag.bad{background:rgba(255,107,132,.13);color:#D14A63;}

.fb-block{margin-bottom:14px;}
.fb-block:last-child{margin-bottom:0;}
.fb-title{
  font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-dark-muted);margin-bottom:5px;
}
.fb-text{font-size:16px;line-height:1.65;color:#322C44;}

/* "מה חורי חושב" — the compass line the bank stores at the end of every
   explanation. Set apart so it reads as the lecturer's angle, not as one
   more sentence of the explanation. Its text is never rewritten. */
.fb-khoury{
  margin-top:12px;padding:11px 14px;
  border-inline-start:3px solid rgba(161,123,245,.55);
  border-radius:8px;
  background:rgba(161,123,245,.09);
  font-size:15px;line-height:1.6;color:#3B2F5C;font-weight:600;
}
.fb-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.meta-pill{
  padding:5px 12px;border-radius:20px;
  font-size:12.5px;font-weight:600;
  background:rgba(91,141,245,.10);
  border:1px solid rgba(91,141,245,.26);
  color:#3E6BC4;
}
.meta-pill.skill{
  background:rgba(199,123,240,.09);
  border-color:rgba(199,123,240,.24);
  color:#7A4FB8;
}
.feedback-actions{display:flex;justify-content:flex-end;margin-top:18px;}

.btn-next{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius-md);
  background:linear-gradient(140deg,#3A2F6B,#221A44);
  color:#F3F1FB;
  font-size:15px;font-weight:700;
  box-shadow:0 8px 20px rgba(24,16,48,.22);
  transition:transform 160ms ease,box-shadow 160ms ease;
}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(24,16,48,.3);}

/* ============================================================
   BOTTOM ACTION BAR
   ============================================================ */
.game-actions{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,24px);
  flex-wrap:wrap;
}
.action-btn{
  display:flex;align-items:center;justify-content:center;gap:11px;
  min-width:200px;height:64px;
  padding:0 24px;
  border-radius:var(--radius-md);
  background:rgba(43,34,82,.9);
  border:var(--line-strong);
  color:var(--text-main);
  font-size:16px;font-weight:700;
  transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease;
}
.action-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow-soft);}
.action-btn:disabled{opacity:.4;cursor:not-allowed;}
.action-btn[data-accent="red"]:hover:not(:disabled){border-color:rgba(255,107,132,.55);color:#FFA8B6;}
.action-btn[data-accent="gold"]{background:linear-gradient(150deg,rgba(60,45,100,.92),rgba(45,37,80,.92));}
.action-btn[data-accent="gold"]:hover:not(:disabled){border-color:rgba(161,123,245,.6);color:#C4A6FA;}
.action-btn[data-accent="blue"]:hover:not(:disabled){border-color:rgba(91,141,245,.55);color:#A0C4FF;}
.action-badge{
  min-width:26px;height:26px;padding:0 7px;
  border-radius:8px;display:grid;place-items:center;
  background:rgba(161,123,245,.2);
  border:1px solid rgba(161,123,245,.4);
  color:var(--gold);
  font-size:13px;font-weight:800;
}

/* ============================================================
   CARD GRIDS (home / cases / progress / profile)
   ============================================================ */
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.grid-cases{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

.panel{
  background:rgba(43,34,82,.72);
  border:var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  backdrop-filter:blur(6px);
}
.panel h3{font-size:17px;margin-bottom:14px;}
.panel-title{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-muted);
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

/* Hero continue card */
.hero-card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  padding:clamp(26px,3.4vw,40px);
  background:linear-gradient(140deg,rgba(59,90,160,.9),rgba(43,34,82,.95) 62%);
  border:var(--line-strong);
  box-shadow:var(--shadow-soft);
  margin-bottom:24px;
}
.hero-card::after{
  content:"";position:absolute;inset-inline-end:-60px;top:-60px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,209,232,.22),transparent 68%);
  pointer-events:none;
}
.hero-card .eyebrow{
  font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal);margin-bottom:10px;
}
.hero-card h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px;}
.hero-card p{color:var(--text-muted);font-size:15px;margin:0 0 22px;max-width:60ch;line-height:1.6;}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:24px;}
.hero-meta .m-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.hero-meta .m-value{font-size:20px;font-weight:800;}

/* Stat tiles */
.stat-tile{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  border-radius:var(--radius-md);
  background:rgba(43,34,82,.72);
  border:var(--line);
}
.stat-tile .t-icon{
  width:42px;height:42px;flex:0 0 auto;
  border-radius:11px;display:grid;place-items:center;
}
.t-icon.teal{background:rgba(79,209,232,.13);color:var(--teal);}
.t-icon.gold{background:rgba(161,123,245,.13);color:var(--gold);}
.t-icon.blue{background:rgba(91,141,245,.13);color:var(--blue);}
.t-icon.red{background:rgba(255,107,132,.13);color:var(--red);}
.t-icon.purple{background:rgba(199,123,240,.13);color:var(--purple);}
.stat-tile .t-value{font-size:24px;font-weight:800;line-height:1.1;}
.stat-tile .t-label{font-size:12px;color:var(--text-muted);margin-top:3px;}

/* Case cards */
.case-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:22px;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg,rgba(57,47,102,.82),rgba(43,34,82,.88));
  border:var(--line-strong);
  cursor:pointer;
  text-align:start;
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
  overflow:hidden;
}
.case-card::before{
  content:"";position:absolute;top:0;inset-inline-start:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--blue));
  opacity:.75;
}
.case-card:hover{transform:translateY(-4px);border-color:rgba(79,209,232,.45);box-shadow:var(--shadow-soft);}
.case-card .c-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.case-card .c-no{
  font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-muted);
}
.case-card h3{font-size:19px;margin-bottom:8px;line-height:1.3;}
.case-card .c-clusters{font-size:13px;color:var(--text-muted);line-height:1.55;flex:1;margin-bottom:16px;}
.case-card .c-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:700;
  background:rgba(255,255,255,.06);
  border:var(--line);
  color:var(--text-muted);
}
.chip.done{background:rgba(63,214,154,.14);border-color:rgba(63,214,154,.3);color:#6FE0B4;}
.chip.score{background:rgba(161,123,245,.13);border-color:rgba(161,123,245,.3);color:var(--gold);}
.chip.boss{background:rgba(255,107,132,.13);border-color:rgba(255,107,132,.32);color:#FF95A6;}

/* Study-area filter above the case map (gameplay.recommended_modes.by_cluster) */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-bottom:var(--card-spacing);
}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:20px;
  font-family:inherit;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.05);
  border:var(--line);
  color:var(--text-muted);
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.filter-chip:hover{background:rgba(255,255,255,.09);color:var(--text-main);}
.filter-chip .ltr{opacity:.6;font-weight:600;}
.filter-chip.on{
  background:rgba(79,209,232,.14);
  border-color:rgba(79,209,232,.45);
  color:var(--teal);
}

/* Meter rows (progress breakdowns) */
.meter-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px 54px;
  align-items:center;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.meter-row:last-child{border-bottom:none;}
.meter-row .m-name{font-size:14px;line-height:1.4;}
.meter-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;}
.meter-bar i{display:block;height:100%;border-radius:5px;transition:width 620ms cubic-bezier(.3,.9,.35,1);}
.meter-bar i.good{background:linear-gradient(90deg,var(--progress-from),var(--progress-to));}
.meter-bar i.mid{background:linear-gradient(90deg,var(--gold),var(--warning));}
.meter-bar i.bad{background:linear-gradient(90deg,var(--red),#D14A63);}
.meter-row .m-pct{font-size:13px;font-weight:800;text-align:end;}
.m-pct.good{color:var(--green);}
.m-pct.mid{color:var(--gold);}
.m-pct.bad{color:var(--red);}

.weakness-row{
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:var(--radius-md);
  background:rgba(255,107,132,.07);
  border:1px solid rgba(255,107,132,.2);
  margin-bottom:10px;
}
.weakness-row:last-child{margin-bottom:0;}
.weakness-rank{
  width:28px;height:28px;flex:0 0 auto;
  border-radius:8px;display:grid;place-items:center;
  background:rgba(255,107,132,.18);color:#FF95A6;
  font-weight:800;font-size:13px;
}
.weakness-row .w-name{flex:1;font-size:14px;line-height:1.4;}
.weakness-row .w-pct{font-weight:800;color:#FF95A6;}

.empty-note{
  text-align:center;color:var(--text-muted);
  padding:34px 20px;font-size:14px;
}

/* ============================================================
   RESULT SCREEN
   ============================================================ */
.result-hero{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(28px,4vw,46px);
  border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(57,47,102,.9),rgba(36,28,72,.95));
  border:var(--line-strong);
  box-shadow:var(--shadow-soft);
  margin-bottom:24px;
  text-align:center;
}
.result-ring{
  position:relative;width:150px;height:150px;margin-bottom:20px;
}
.result-ring svg{transform:rotate(-90deg);}
.result-ring .ring-bg{stroke:rgba(255,255,255,.09);}
.result-ring .ring-fill{
  stroke-linecap:round;
  transition:stroke-dashoffset 900ms cubic-bezier(.3,.9,.35,1);
}
.result-ring .ring-label{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.result-ring .ring-value{font-size:38px;font-weight:800;line-height:1;}
.result-ring .ring-cap{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}

/* ============================================================
   AUTH SCREENS
   ============================================================ */
.auth-wrap{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,60px) 0;
}
.auth-card{
  position:relative;
  width:min(440px,100%);
  padding:clamp(28px,4vw,40px);
  border-radius:var(--radius-xl);
  background:linear-gradient(155deg,rgba(57,47,102,.94),rgba(36,28,72,.97));
  border:var(--line-strong);
  box-shadow:0 26px 60px rgba(0,0,0,.4);
}
.auth-tab{
  position:absolute;top:-1px;inset-inline-start:30px;
  transform:translateY(-100%);
  padding:8px 18px 10px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(160deg,#2F5A8E,#26497A);
  color:#D3F2FA;
  font-size:11px;font-weight:800;letter-spacing:1.4px;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:none;
}
.auth-head{text-align:center;margin-bottom:26px;}
.auth-mark{
  width:56px;height:56px;margin:0 auto 16px;
  border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),#2E8FB5);
  color:#06222E;
  box-shadow:0 8px 22px rgba(79,209,232,.3);
}
.auth-head h1{font-size:24px;margin-bottom:6px;}
.auth-head p{margin:0;color:var(--text-muted);font-size:14px;}

.field{margin-bottom:16px;}
.field label{
  display:block;font-size:13px;font-weight:700;
  color:var(--text-muted);margin-bottom:7px;
}
.field input,
.field textarea{
  width:100%;
  padding:13px 15px;
  border-radius:var(--radius-sm);
  background:rgba(26,20,54,.7);
  border:1px solid rgba(255,255,255,.13);
  color:var(--text-main);
  font-size:15px;
  font-family:inherit;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.6;}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(79,209,232,.16);
}
.field input::placeholder,
.field textarea::placeholder{color:#6A6288;}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:20px;
  border-radius:var(--radius-lg);
  background:rgba(43,34,82,.72);
  border:var(--line);
}
.admin-bar .spacer{margin-inline-start:auto;}

.admin-grid{
  display:grid;
  grid-template-columns:266px minmax(0,1fr);
  gap:20px;align-items:start;
}
.admin-list{max-height:74vh;overflow-y:auto;padding:12px;}
.admin-list button{
  display:block;width:100%;text-align:start;
  padding:11px 13px;margin-bottom:6px;
  border-radius:var(--radius-sm);
  font-size:13.5px;line-height:1.4;font-weight:600;
  color:var(--text-muted);
  border:1px solid transparent;
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease;
}
.admin-list button:hover{background:rgba(255,255,255,.05);color:var(--text-main);}
.admin-list button.is-active{
  background:rgba(79,209,232,.13);
  border-color:rgba(79,209,232,.4);
  color:#86E2F2;
}
.admin-list .sc-id{font-size:11px;letter-spacing:.8px;opacity:.7;display:block;margin-bottom:2px;}

.q-editor{margin-bottom:16px;}
.q-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.q-id{
  font-size:12px;font-weight:800;letter-spacing:1px;
  color:var(--gold);
}
.badge-mod{
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:800;
  background:rgba(161,123,245,.16);
  border:1px solid rgba(161,123,245,.38);
  color:var(--gold);
}
.opt-row{
  display:flex;align-items:center;gap:11px;margin-bottom:10px;
}
.opt-row input[type="radio"]{
  width:19px;height:19px;flex:0 0 auto;accent-color:var(--teal);cursor:pointer;
}
.opt-row .opt-letter{
  width:27px;height:27px;flex:0 0 auto;
  border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;
  border:1.5px solid rgba(255,255,255,.2);color:var(--text-muted);
}
.opt-row.is-correct .opt-letter{border-color:var(--correct);color:var(--correct);}
.opt-row input[type="text"]{flex:1;padding:10px 13px;font-size:14px;}
.editor-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap;}
.save-note{
  padding:10px 14px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;margin-top:12px;
}
.save-note.ok{background:rgba(63,214,154,.13);border:1px solid rgba(63,214,154,.32);color:#6FE0B4;}
.save-note.err{background:rgba(255,107,132,.12);border:1px solid rgba(255,107,132,.32);color:#FF95A6;}

@media (max-width:900px){
  .admin-grid{grid-template-columns:minmax(0,1fr);}
  .admin-list{max-height:none;}
}

.auth-error{
  padding:11px 14px;border-radius:var(--radius-sm);
  background:rgba(255,107,132,.12);
  border:1px solid rgba(255,107,132,.3);
  color:#FF95A6;font-size:13.5px;font-weight:600;
  margin-bottom:16px;
}
.auth-note{
  margin-top:18px;padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(91,141,245,.08);
  border:1px solid rgba(91,141,245,.2);
  color:var(--text-muted);
  font-size:12.5px;line-height:1.6;
}
.auth-alt{text-align:center;margin-top:18px;font-size:14px;color:var(--text-muted);}
.link-btn{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.link-btn:hover{color:#6FE0F2;}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(14,9,32,.7);
  backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:fadeIn 200ms ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  width:min(560px,100%);
  max-height:82vh;overflow-y:auto;
  padding:28px;
  border-radius:var(--radius-xl);
  background:linear-gradient(155deg,rgba(57,47,102,.97),rgba(36,28,72,.99));
  border:var(--line-strong);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  animation:modalIn 280ms cubic-bezier(.2,.9,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
.modal-head h2{font-size:20px;}
.modal-body{font-size:14.5px;line-height:1.75;color:var(--text-muted);}
.modal-body ul{margin:0;padding-inline-start:20px;}
.modal-body li{margin-bottom:9px;}
.modal-body strong{color:var(--text-main);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .game-workspace{grid-template-columns:minmax(0,1fr);}
  .case-sidebar{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
  }
  /* stage is full-bleed here, so a protruding tab would be clipped by the viewport */
  .case-evidence{display:none;}
}

@media (max-width:900px){
  .nav-links,.nav-auth .btn{display:none;}
  .nav-burger{display:grid;}
  .hud{flex-wrap:wrap;min-height:0;gap:16px 20px;}
  .hud-divider{display:none;}
  .hud-category{margin-inline-start:0;}
}

@media (max-width:600px){
  /* keep the nav bar inside the viewport — it must never force a horizontal scroll */
  .nav-brand{margin-inline-end:0;font-size:15px;gap:8px;}
  .nav-brand .brand-mark{width:30px;height:30px;}
  .nav-profile .who{display:none;}
  .nav-profile{padding:5px 6px;}
  #btn-settings{display:none;}
  .app-nav{padding:0 12px;gap:8px;}
}

@media (max-width:720px){
  .answers-grid{grid-template-columns:minmax(0,1fr);}
  .case-evidence,.case-clip,.case-stamp{display:none;}
  .case-tab{inset-inline-start:14px;}
  .case-stage{padding-top:32px;}
  .game-actions{
    position:sticky;bottom:0;
    padding:12px 0 4px;
    background:linear-gradient(to top,var(--bg-deep) 65%,transparent);
    z-index:20;
  }
  .action-btn{min-width:0;flex:1;height:56px;padding:0 14px;font-size:14px;}
  .action-btn span.label{display:none;}
  .meter-row{grid-template-columns:minmax(0,1fr) 46px;}
  .meter-row .meter-bar{display:none;}
  .result-ring{width:124px;height:124px;}
}

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

/* ============================================================
   SERVER-ERA ADDITIONS
   (loading, toasts, admin tables, design panel, theme effects)
   ============================================================ */

/* ---- animation intensity, driven by the theme ---- */
html[data-animation="none"] *{animation:none !important;transition:none !important;}
html[data-animation="subtle"] *{animation-duration:.14s !important;transition-duration:.12s !important;}

/* ---- background gradient toggle ---- */
html[data-bg-gradient="off"] body{background:var(--bg-deep);}
html[data-topbar="solid"] .app-nav{backdrop-filter:none;background:var(--bg-deep);}

/* ---- loading ---- */
.loading-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:80px 20px;text-align:center;color:var(--text-muted);
}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.14);
  border-top-color:var(--teal);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- toast ---- */
.toast{
  position:fixed;bottom:24px;inset-inline-start:50%;
  transform:translateX(50%);
  z-index:200;
  padding:12px 20px;border-radius:var(--radius-md);
  background:var(--surface-alt);
  border:1px solid rgba(63,214,154,.4);
  color:var(--text-main);font-size:14px;font-weight:600;
  box-shadow:var(--shadow-soft);
  animation:toastIn .26s cubic-bezier(.2,.9,.3,1);
}
.toast.err{border-color:rgba(255,107,132,.45);}
.toast.out{opacity:0;transition:opacity .3s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(50%) translateY(12px);}to{opacity:1;transform:translateX(50%) translateY(0);}}

/* ---- form extras ---- */
.field-help{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5;}
.field select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(26,20,54,.7);border:1px solid rgba(255,255,255,.13);
  color:var(--text-main);font-size:14px;font-family:inherit;
}
.field select:focus{outline:none;border-color:var(--teal);}
.switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);margin:10px 0;cursor:pointer;}
.switch input{width:18px;height:18px;accent-color:var(--teal);cursor:pointer;}
.icon-btn{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--text-muted);border:1px solid rgba(255,255,255,.12);
  transition:all .14s ease;
}
.icon-btn:hover:not(:disabled){color:var(--teal);border-color:var(--teal);}
.icon-btn:disabled{opacity:.3;cursor:not-allowed;}

/* ---- recovery code ---- */
.recovery-code{
  direction:ltr;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(15px,2.4vw,20px);font-weight:700;letter-spacing:1.5px;
  padding:18px 14px;margin-bottom:12px;
  border-radius:var(--radius-md);
  background:rgba(79,209,232,.10);
  border:1px dashed rgba(79,209,232,.45);
  color:var(--teal);
  word-break:break-all;
}

/* ---- skill picker ---- */
.skill-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:190px;overflow-y:auto;padding:4px;}
.skill-chip{
  display:flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:20px;cursor:pointer;
  font-size:12px;line-height:1.3;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-muted);
  transition:all .14s ease;
}
.skill-chip input{width:14px;height:14px;accent-color:var(--teal);}
.skill-chip.on{background:rgba(79,209,232,.13);border-color:rgba(79,209,232,.42);color:var(--teal);}

/* ---- admin table ---- */
.table-scroll{overflow-x:auto;}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1040px;table-layout:auto;}
.admin-table td:not(:first-child):not(:nth-last-child(2)){white-space:nowrap;}
.admin-table td:nth-last-child(2){min-width:220px;max-width:340px;}
.admin-table td:nth-last-child(2) .chip{margin:2px 0;font-size:11px;}
.admin-table th{
  text-align:start;padding:10px 12px;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.admin-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table td.good{color:var(--correct);}
.admin-table td.mid{color:var(--warning);}
.admin-table td.bad{color:var(--incorrect);}

/* ---- design panel ---- */
.sticky-bar{position:sticky;top:calc(var(--nav-h) + 8px);z-index:30;}
.color-row{
  display:grid;grid-template-columns:1fr 44px 110px;
  align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.color-row:last-child{border-bottom:none;}
.color-label{font-size:13.5px;color:var(--text-muted);}
.color-row input[type="color"]{
  width:44px;height:32px;padding:0;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:none;cursor:pointer;
}
.hex-input{
  padding:7px 9px !important;font-size:12px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:left;
}
.range-row{display:flex;align-items:center;gap:12px;}
.range-row input[type="range"]{flex:1;accent-color:var(--teal);cursor:pointer;}
.range-val{
  min-width:52px;text-align:center;font-size:12.5px;font-weight:700;
  padding:4px 8px;border-radius:7px;
  background:rgba(255,255,255,.06);color:var(--teal);
}

/* ---- theme live preview ---- */
.theme-preview{
  padding:26px;border-radius:var(--radius-lg);
  background:var(--paper);
}
.tp-question{
  text-align:center;color:var(--text-dark);
  font-size:var(--question-size,32px);font-weight:var(--question-weight,700);
  line-height:1.35;margin-bottom:22px;
}
.tp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--card-spacing,16px);}
.tp-card{
  position:relative;overflow:hidden;
  min-height:88px;padding:20px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #D8DDE3;
  border-radius:var(--radius-md);box-shadow:var(--shadow-paper);
}
.tp-card::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:56px;height:56px;
  background:linear-gradient(225deg,var(--tp) 0%,var(--tp) 48%,transparent 48.5%);
}
.tp-badge{
  position:absolute;top:9px;inset-inline-start:9px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:#fff;
  border:1.5px solid var(--tp);color:var(--tp);
  font-size:12px;font-weight:800;
}
.tp-text{color:var(--text-dark);font-size:var(--answer-size,20px);font-weight:var(--answer-weight,600);}
.tp-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px;}

@media (max-width:900px){
  .color-row{grid-template-columns:1fr 40px 92px;}
  .sticky-bar{position:static;}
}
@media (max-width:600px){
  .toast{inset-inline-start:12px;inset-inline-end:12px;transform:none;text-align:center;}
  @keyframes toastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
}

/* ============================================================
   BRAND
   ============================================================ */
.brand-mark-img{
  width:38px;height:38px;flex:0 0 auto;
  object-fit:contain;
  user-select:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.brand-wordmark{
  height:26px;width:auto;display:block;
  object-fit:contain;
  user-select:none;
  /* the artwork is already light; this only lifts it off the dark bar */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@media (max-width:600px){
  .brand-mark-img{width:32px;height:32px;}
  .brand-wordmark{height:21px;}
}