/* نسبة وتناسب — an original retro public-opinion bureau.
   The host uses illustrated environments with code-native paper, ink and dial UI;
   the phone deliberately stays calmer and easier to operate. */

:root {
  --ns-ink: #102f32;
  --ns-ink-deep: #082225;
  --ns-plum: #173f42;
  --ns-plum-soft: #2e696a;
  --ns-bone: #f4e6be;
  --ns-paper: #fff3ca;
  --ns-amber: #dcae3c;
  --ns-coral: #df6648;
  --ns-mint: #78c7bd;
  --ns-mint-deep: #2d8580;
  --ns-danger: #e95645;
  --ns-outline: #0b2729;
  --ns-print-shadow: #c94f3a;
}

body.nesba-stage-phase {
  padding: 0 !important;
  background: var(--ns-ink) !important;
}
body.nesba-stage-phase > .page-header { display: none !important; }
body.nesba-stage-phase #app {
  position: fixed;
  inset: 0;
  z-index: 39;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: none !important;
}
body.nesba-stage-phase #room-code-pill,
body.nesba-stage-phase #top-left-bar,
body.nesba-stage-phase #fullscreen-btn,
body.nesba-stage-phase #game-controls { z-index: 80; }

.ns-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--ns-bone);
  font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif;
  text-align: right;
  /* The slight art zoom keeps source-edge chrome outside every host crop. */
  background: var(--ns-ink) center / auto 112% no-repeat;
}
.ns-stage.ns-observatory { background-image: url("/assets/nesba/bureau.jpg"); }
.ns-stage.ns-finale { background-image: url("/assets/nesba/bureau-finale.jpg"); }
.ns-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,34,37,.9) 0, rgba(8,34,37,.5) 7%, transparent 16%),
    linear-gradient(90deg, rgba(8,34,37,.2), transparent 46%, rgba(8,34,37,.28)),
    linear-gradient(0deg, rgba(8,34,37,.48), transparent 38%);
}
.ns-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.ns-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 310px);
  gap: clamp(14px, 2vw, 30px);
  width: 100%;
  height: 100%;
  padding: clamp(72px, 8vh, 100px) clamp(18px, 2.6vw, 46px) clamp(26px, 4vh, 48px);
  direction: ltr;
}
.ns-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  direction: rtl;
}
.ns-hud {
  position: absolute;
  top: clamp(18px, 2.6vh, 30px);
  left: clamp(430px, 35vw, 520px);
  right: calc(clamp(220px, 20vw, 310px) + clamp(24px, 3vw, 44px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.ns-hud .ns-timer {
  min-width: 76px;
  min-height: 36px;
  margin: 0;
  padding: 6px 15px 8px;
  border: 3px solid var(--ns-outline);
  border-radius: 7px 14px 8px 12px;
  background: var(--ns-ink);
  box-shadow: 5px 5px 0 var(--ns-amber);
  color: var(--ns-paper);
  font-size: clamp(.9rem, 1.25vw, 1.08rem);
}
.ns-hud .ns-timer .at-fill { height: 4px; background: var(--ns-coral); }
.ns-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px 8px;
  border: 3px solid var(--ns-outline);
  border-radius: 7px 14px 8px 12px;
  background: var(--ns-paper);
  color: var(--ns-ink);
  box-shadow: 5px 5px 0 var(--ns-coral);
  transform: rotate(-.6deg);
  font-size: clamp(.74rem, 1vw, .92rem);
  font-weight: 800;
  letter-spacing: .01em;
}
.ns-pill:nth-child(2) { transform: rotate(.8deg); }
.ns-pill strong { color: var(--ns-coral); }
.ns-question {
  width: min(880px, 94%);
  margin: 0 auto clamp(12px, 2vh, 22px);
  padding: clamp(15px, 2vw, 23px) clamp(24px, 3vw, 46px);
  border: clamp(3px, .3vw, 5px) solid var(--ns-outline);
  border-radius: 11px 20px 13px 18px;
  background:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0)),
    var(--ns-paper);
  box-shadow: 9px 10px 0 var(--ns-coral), 0 25px 48px rgba(8,34,37,.25);
  color: var(--ns-ink);
  transform: rotate(-.35deg);
  text-align: center;
}
.ns-target .ns-question {
  animation: ns-question-settle 1050ms cubic-bezier(.15,.9,.18,1.08) 1250ms both;
}
.ns-kicker {
  margin-bottom: 7px;
  color: var(--ns-coral);
  font-size: clamp(.76rem, 1.1vw, .98rem);
  font-weight: 900;
  letter-spacing: .07em;
}
.ns-question h1 {
  max-width: 28ch;
  margin: 0 auto;
  color: var(--ns-ink);
  font-size: clamp(1.55rem, 3vw, 3.3rem);
  font-weight: 900;
  line-height: 1.34;
  text-wrap: balance;
  text-shadow: none;
}
.ns-question.is-compact h1 { font-size: clamp(1.35rem, 2.5vw, 2.7rem); }

.ns-search-beat {
  position: absolute;
  z-index: 6;
  inset: 50% auto auto 50%;
  width: min(560px, 70vw);
  padding: 20px 24px;
  border: 4px solid var(--ns-outline);
  border-radius: 9px 16px 10px 14px;
  background: var(--ns-amber);
  box-shadow: 8px 9px 0 var(--ns-coral), 0 26px 60px rgba(8,34,37,.35);
  color: var(--ns-ink);
  transform: translate(-50%, -50%) rotate(1deg);
  animation: ns-search-pass 2850ms ease both;
}
.ns-search-label { color: var(--ns-ink); font-size: clamp(1.1rem,2vw,1.8rem); font-weight: 900; text-align:center; }
.ns-search-line {
  position: relative;
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  border: 3px solid var(--ns-outline);
  border-radius: 4px;
  background: rgba(255,243,202,.5);
}
.ns-search-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: right;
  background: repeating-linear-gradient(90deg, var(--ns-coral) 0 18px, var(--ns-paper) 18px 24px, var(--ns-mint-deep) 24px 42px);
  animation: ns-search-fill 2100ms cubic-bezier(.2,.75,.2,1) both;
}

.ns-centerpiece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  width: 100%;
  min-height: 0;
}
.ns-person {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: clamp(110px, 13vw, 170px);
  padding: 14px 12px 12px;
  border: 4px solid var(--ns-outline);
  border-radius: 9px 16px 11px 15px;
  background: var(--ns-paper);
  box-shadow: 7px 8px 0 var(--ns-amber), 0 18px 38px rgba(8,34,37,.28);
  color: var(--ns-ink);
  transform: rotate(1.2deg);
}
.ns-person img { width: clamp(70px, 7vw, 104px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.ns-person strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--ns-ink); font-size: clamp(.95rem,1.4vw,1.2rem); white-space: nowrap; }
.ns-person span { color: var(--ns-coral); font-size: .78rem; font-weight: 900; }

.ns-dial {
  --value: 50;
  --truth: var(--value);
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(190px, 24vw, 330px);
  aspect-ratio: 1;
  border: clamp(6px, .65vw, 10px) solid var(--ns-outline);
  border-radius: 48% 52% 50% 47%;
  background:
    radial-gradient(circle at 42% 28%, rgba(255,255,255,.22), transparent 42%),
    conic-gradient(from -90deg, var(--ns-coral) 0 calc(var(--truth) * 1%), var(--ns-amber) calc(var(--truth) * 1%) 100%);
  box-shadow: 9px 11px 0 rgba(11,39,41,.55), 0 30px 65px rgba(8,34,37,.3);
  transform: rotate(-1deg);
}
.ns-dial::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 6px solid var(--ns-outline);
  border-radius: inherit;
  background:
    radial-gradient(circle at 35% 23%, rgba(255,255,255,.14), transparent 42%),
    var(--ns-ink);
  box-shadow: inset 0 0 0 7px var(--ns-paper);
}
.ns-dial::after {
  content: "";
  position: absolute;
  inset: -19px;
  border: 4px dashed var(--ns-paper);
  border-radius: inherit;
  animation: ns-orbit 18s linear infinite;
}
.ns-dial-value { position: relative; z-index: 2; color: var(--ns-paper); font-size: clamp(3rem,7vw,6.7rem); font-weight: 900; line-height: 1; direction: ltr; font-variant-numeric: tabular-nums; text-shadow:4px 4px 0 rgba(0,0,0,.25); }
.ns-dial-value small { margin-left: 2px; color: var(--ns-amber); font-size: .35em; }
.ns-dial-caption { position: absolute; z-index: 3; bottom: 18%; padding:2px 8px 4px; background:var(--ns-paper); color: var(--ns-ink); border:2px solid var(--ns-outline); border-radius:4px; font-size: clamp(.7rem,1vw,.9rem); font-weight: 900; transform:rotate(.7deg); }
.ns-guess-marker {
  position: absolute;
  z-index: 4;
  inset: -9px;
  transform: rotate(calc((var(--value) * 3.6deg) - 90deg));
  pointer-events: none;
}
.ns-guess-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 21px;
  height: 38px;
  border: 5px solid var(--ns-paper);
  border-radius: 4px 4px 10px 10px;
  background: var(--ns-ink);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--ns-outline), 4px 4px 0 var(--ns-coral);
}
.ns-voting .ns-dial { animation: ns-dial-pop 700ms cubic-bezier(.2,.9,.2,1) both; }
.ns-reveal .ns-dial { animation: ns-truth-spin 1700ms cubic-bezier(.18,.82,.18,1) both; }
.ns-direction {
  display: grid;
  gap: 10px;
  width: clamp(110px, 12vw, 160px);
}
.ns-direction span {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 10px;
  border: 4px solid var(--ns-outline);
  border-radius: 8px 14px 9px 13px;
  background: var(--ns-paper);
  color: var(--ns-ink);
  box-shadow: 6px 6px 0 var(--ns-coral);
  font-weight: 900;
  line-height: 1.25;
}
.ns-direction .is-high { color: var(--ns-mint-deep); transform:rotate(-1deg); }
.ns-direction .is-low { color: var(--ns-coral); transform:rotate(1deg); }
.ns-progress { margin-top: 14px; color: var(--ns-paper); font-size: clamp(1rem,1.6vw,1.35rem); font-weight: 900; }
.ns-progress strong { color: var(--ns-mint); font-size: 1.22em; }

.ns-reveal-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.ns-stat {
  min-width: 120px;
  padding: 10px 16px;
  border: 3px solid var(--ns-outline);
  border-radius: 7px 12px 8px 11px;
  background: var(--ns-paper);
  color: var(--ns-ink);
  text-align: center;
  box-shadow:5px 5px 0 var(--ns-coral);
  font-size: .84rem;
  font-weight: 800;
}
.ns-stat:nth-child(2) { transform:rotate(.8deg); }
.ns-stat b { display: block; margin-top: 2px; color: var(--ns-ink); font-size: clamp(1.05rem,1.7vw,1.45rem); }
.ns-stat.is-win b { color: var(--ns-mint-deep); }

.ns-score-rail {
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: clamp(4px,.4vw,6px) solid var(--ns-outline);
  border-radius: 10px 18px 12px 16px;
  background:
    repeating-linear-gradient(0deg, rgba(16,47,50,.035) 0 2px, transparent 2px 7px),
    var(--ns-paper);
  box-shadow: 9px 10px 0 var(--ns-coral), 0 28px 60px rgba(8,34,37,.3);
  transform:rotate(.35deg);
  direction: rtl;
}
.ns-rail-title { padding: 14px 17px 11px; border-bottom:3px solid var(--ns-outline); background:var(--ns-amber); color: var(--ns-ink); font-size: clamp(.85rem,1.1vw,1rem); font-weight: 900; text-align: center; }
.ns-score-list { display: grid; align-content: start; gap: 5px; min-height: 0; padding: 0 9px 10px; overflow: hidden auto; scrollbar-width: none; }
.ns-score-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px;
  border: 2px solid transparent;
  border-radius: 6px 10px 7px 9px;
  background: rgba(16,47,50,.055);
  transition: border-color .25s, background .25s, opacity .25s;
}
.ns-score-row.is-target { border-color: var(--ns-coral); background: rgba(220,174,60,.26); }
.ns-score-row.is-win { border-color: var(--ns-mint-deep); background: rgba(120,199,189,.22); }
.ns-score-row.is-lose { opacity: .58; }
.ns-score-row img { width: 34px; height: 34px; object-fit: contain; }
.ns-score-name { min-width: 0; overflow: hidden; color: var(--ns-ink); text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.76rem,1vw,.92rem); font-weight: 900; }
.ns-score-points { color: var(--ns-mint-deep); font-size: clamp(.7rem,.9vw,.84rem); font-weight: 900; direction: rtl; white-space: nowrap; }
.ns-score-points em { display: block; color: var(--ns-coral); font-size: .9em; font-style: normal; }
.ns-wager-mark { color: var(--ns-mint-deep); font-size: 1.25em; }
.ns-wager-mark.is-low { color: var(--ns-coral); }
.ns-score-rail.is-dense .ns-rail-title { padding-block: 10px 7px; }
.ns-score-rail.is-dense .ns-score-list { gap: 2px; padding-bottom: 6px; }
.ns-score-rail.is-dense .ns-score-row { min-height: 34px; padding-block: 2px; }
.ns-score-rail.is-dense .ns-score-row img { width: 26px; height: 26px; }
.ns-score-rail.is-dense .ns-score-points { font-size: .68rem; }

.ns-final-head { width: min(980px,96%); margin-bottom: 13px; text-align: center; }
.ns-final-head { padding:10px 24px 13px; border:4px solid var(--ns-outline); border-radius:9px 17px 10px 15px; background:var(--ns-paper); box-shadow:8px 8px 0 var(--ns-coral); transform:rotate(-.35deg); }
.ns-final-head .ns-kicker { color: var(--ns-coral); }
.ns-final-head h1 { margin: 0; color: var(--ns-ink); font-size: clamp(1.45rem,2.7vw,3rem); line-height: 1.3; text-wrap: balance; }
.ns-final-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(7px,1vw,13px);
  width: min(980px, 100%);
  min-height: 0;
}
.ns-final-card {
  --rank-color: rgba(245,237,222,.16);
  position: relative;
  min-height: clamp(76px, 11vh, 118px);
  padding: 12px 13px 10px;
  overflow: hidden;
  border: 3px solid var(--ns-outline);
  border-radius: 7px 13px 8px 12px;
  background: var(--ns-paper);
  box-shadow: 5px 6px 0 var(--ns-coral), 0 14px 30px rgba(8,34,37,.2);
  color: var(--ns-ink);
  transform: translateY(14px) scale(.96);
  opacity: 0;
  animation: ns-card-in 520ms cubic-bezier(.2,.86,.2,1) calc(var(--i) * 70ms + 220ms) forwards;
}
.ns-final-card:nth-child(3n+2) { transform:translateY(14px) scale(.96) rotate(.5deg); }
.ns-final-card.is-top { --rank-color: var(--ns-ink); border-color: var(--ns-outline); background: var(--ns-mint); box-shadow:6px 7px 0 var(--ns-amber); }
.ns-final-option { display: block; padding-inline-end: 42px; font-size: clamp(.76rem,1.05vw,1rem); font-weight: 900; line-height: 1.35; }
.ns-final-rank { position: absolute; top: 9px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rank-color); border-radius: 50%; color: var(--rank-color); font-size: .78rem; font-weight: 900; }
.ns-final-percent { position: absolute; left: 10px; bottom: 7px; color: var(--rank-color); font-size: clamp(1.1rem,2vw,1.8rem); font-weight: 900; direction: ltr; }
.ns-final-voters { position: absolute; right: 10px; bottom: 8px; display: flex; direction: ltr; }
.ns-final-voters img { width: 25px; height: 25px; margin-left: -7px; border: 2px solid var(--ns-outline); border-radius: 50%; background: var(--ns-bone); object-fit: contain; }
.ns-final-locked .ns-final-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 28%, rgba(223,102,72,.14) 45%, transparent 62%); transform: translateX(-120%); animation: ns-card-scan 2.8s ease-in-out calc(var(--i)*90ms) infinite; }
.ns-final-locked .ns-final-rank { color: rgba(245,237,222,.42); border-color: rgba(245,237,222,.2); }
.ns-final-locked .ns-final-percent { color: rgba(245,237,222,.28); }
.ns-final-submit-progress { margin-top: 12px; color: var(--ns-paper); font-weight: 900; }
.ns-final-submit-progress strong { color: var(--ns-mint); }

.ns-leaderboard-main { width: min(920px,94%); }
.ns-leader-title { margin-bottom: clamp(12px,2vh,22px); text-align: center; }
.ns-leader-title { width:min(720px,100%); margin-inline:auto; padding:12px 22px 16px; border:5px solid var(--ns-outline); border-radius:10px 18px 11px 16px; background:var(--ns-paper); box-shadow:9px 10px 0 var(--ns-coral); transform:rotate(-.5deg); }
.ns-leader-title span { color: var(--ns-coral); font-size: .9rem; font-weight: 900; }
.ns-leader-title h1 { margin: 3px 0 0; color: var(--ns-ink); font-size: clamp(2rem,4.2vw,4.7rem); line-height: 1.05; }
.ns-leader-cards { display: grid; gap: 8px; width: min(720px,100%); margin: 0 auto; }
.ns-leader-card { display: grid; grid-template-columns: 44px 52px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 60px; padding: 7px 15px; border: 3px solid var(--ns-outline); border-radius: 7px 13px 8px 12px; background: var(--ns-paper); box-shadow: 5px 6px 0 var(--ns-coral); animation: ns-leader-in 520ms cubic-bezier(.2,.9,.2,1) calc(var(--i)*80ms) both; }
.ns-leader-card:first-child { background: var(--ns-amber); box-shadow:7px 7px 0 var(--ns-coral); }
.ns-leader-rank { color: var(--ns-coral); font-size: 1.45rem; font-weight: 900; text-align: center; }
.ns-leader-card img { width: 48px; height: 48px; object-fit: contain; }
.ns-leader-name { min-width:0; overflow:hidden; color:var(--ns-ink); text-overflow:ellipsis; white-space:nowrap; font-weight:900; }
.ns-leader-score { color:var(--ns-mint-deep); font-size:clamp(.95rem,1.5vw,1.2rem); font-weight:900; white-space:nowrap; }
.ns-leader-score em { display:block; color:var(--ns-coral); font-size:.72em; font-style:normal; }

/* Phone surface — deliberately simpler than the TV. */
body[data-theme="percent"] {
  --color-primary: var(--ns-amber);
  --primary: var(--ns-amber);
  background-color: #eedda9 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(16,47,50,.025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #f8e9bd, #e7cf91) !important;
  color: var(--ns-ink);
}
body[data-theme="percent"] .player-header { border-bottom:3px solid var(--ns-outline) !important; background: var(--ns-ink); }
body[data-theme="percent"] .header-mode-mark { background: var(--ns-amber); color: var(--ns-ink); text-shadow: none; }
.ns-phone { width: 100%; max-width: 560px; margin: 0 auto; color: var(--ns-ink); text-align: right; }
.ns-phone-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; color:rgba(16,47,50,.62); font-size:.78rem; font-weight:900; }
.ns-phone-head strong { color:var(--ns-coral); }
.ns-phone-question { margin:0 0 12px; padding:15px 17px; border:3px solid var(--ns-outline); border-radius:8px 14px 9px 13px; background:var(--ns-paper); box-shadow:5px 6px 0 var(--ns-coral); color:var(--ns-ink); font-size:clamp(1.12rem,5.1vw,1.48rem); font-weight:900; line-height:1.48; text-align:center; text-wrap:balance; }
.ns-phone-dial { --value:50; position:relative; display:grid; place-items:center; width:min(48vw,190px); aspect-ratio:1; margin:16px auto 19px; border:5px solid var(--ns-outline); border-radius:48% 52% 50% 47%; background:conic-gradient(from -90deg,var(--ns-coral) 0 calc(var(--value)*1%),var(--ns-amber) calc(var(--value)*1%) 100%); box-shadow:6px 7px 0 rgba(16,47,50,.28); }
.ns-phone-dial::before { content:""; position:absolute; inset:12%; border:4px solid var(--ns-outline); border-radius:inherit; background:var(--ns-ink); box-shadow:inset 0 0 0 5px var(--ns-paper); }
.ns-phone-dial b { position:relative; z-index:2; color:var(--ns-paper); font-size:clamp(3rem,15vw,5.2rem); line-height:1; direction:ltr; font-variant-numeric:tabular-nums; }
.ns-phone-dial b small { color:var(--ns-amber); font-size:.34em; }
.ns-slider { width:100%; height:34px; margin:0; appearance:none; background:transparent; direction:ltr; }
.ns-slider::-webkit-slider-runnable-track { height:12px; border:3px solid var(--ns-outline); border-radius:5px; background:linear-gradient(90deg,var(--ns-coral),var(--ns-amber),var(--ns-mint)); }
.ns-slider::-webkit-slider-thumb { width:34px; height:34px; margin-top:-13px; appearance:none; border:5px solid var(--ns-paper); border-radius:50%; background:var(--ns-ink); box-shadow:0 0 0 3px var(--ns-outline),3px 4px 0 var(--ns-coral); }
.ns-slider-labels { display:flex; justify-content:space-between; direction:ltr; color:rgba(16,47,50,.58); font-size:.75rem; font-weight:800; }
.ns-phone-note { margin-top:10px; color:rgba(16,47,50,.64); font-size:.82rem; line-height:1.5; text-align:center; }
.ns-phone-action { width:100%; min-height:58px; border:3px solid var(--ns-outline); border-radius:8px 14px 9px 13px; background:var(--ns-coral); color:var(--ns-paper); box-shadow:5px 6px 0 var(--ns-outline); font:900 1.05rem "Cairo",sans-serif; }
.ns-phone-action:disabled { opacity:.4; box-shadow:none; }
.ns-phone-wagers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ns-wager-btn { min-height:102px; padding:13px 9px; border:3px solid var(--ns-outline); border-radius:8px 14px 9px 13px; background:var(--ns-paper); color:var(--ns-ink); box-shadow:4px 5px 0 var(--ns-outline); font-family:inherit; }
.ns-wager-btn b { display:block; color:var(--ns-mint-deep); font-size:1.35rem; }
.ns-wager-btn.is-low b { color:var(--ns-coral); }
.ns-wager-btn span { display:block; margin-top:4px; color:rgba(16,47,50,.58); font-size:.72rem; line-height:1.4; }
.ns-wager-btn.selected { border-color:var(--ns-outline); background:var(--ns-mint); box-shadow:5px 6px 0 var(--ns-coral); }
.ns-wager-btn.dimmed { opacity:.38; }
.ns-phone-wait { display:grid; justify-items:center; gap:12px; padding:28px 15px; text-align:center; }
.ns-phone-wait-orb { display:grid; place-items:center; width:96px; height:96px; border:5px solid var(--ns-outline); border-radius:48% 52% 50% 47%; background:var(--ns-coral); box-shadow:6px 7px 0 var(--ns-amber); color:var(--ns-paper); font-size:2.6rem; animation:ns-wait 1.8s ease-in-out infinite; }
.ns-phone-wait h1 { margin:0; color:var(--ns-ink); font-size:1.45rem; }
.ns-phone-wait p { margin:0; color:rgba(16,47,50,.64); line-height:1.55; }
.ns-phone-result { padding:18px; border:3px solid var(--ns-outline); border-radius:8px 14px 9px 13px; background:var(--ns-paper); box-shadow:5px 6px 0 var(--ns-coral); text-align:center; }
.ns-phone-result .truth { color:var(--ns-coral); font-size:clamp(3rem,16vw,5rem); font-weight:900; direction:ltr; }
.ns-phone-result h2 { margin:4px 0 0; color:var(--ns-ink); font-size:1.25rem; }
.ns-phone-result p { margin:6px 0 0; color:rgba(16,47,50,.62); }
.ns-final-phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ns-final-choice { position:relative; min-height:92px; padding:10px 7px 24px; border:3px solid var(--ns-outline); border-radius:7px 12px 8px 11px; background:var(--ns-paper); color:var(--ns-ink); box-shadow:3px 4px 0 var(--ns-outline); font:800 clamp(.72rem,3.2vw,.88rem)/1.35 "Cairo",sans-serif; }
.ns-final-choice::after { content:attr(data-order); position:absolute; right:7px; bottom:6px; display:none; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ns-mint); color:var(--ns-ink); font-size:.7rem; font-weight:900; }
.ns-final-choice.is-picked { border-color:var(--ns-outline); background:var(--ns-mint); transform:translateY(-2px) rotate(-.5deg); box-shadow:4px 5px 0 var(--ns-coral); }
.ns-final-choice.is-picked::after { display:grid; }
.ns-final-choice.is-blocked { opacity:.42; }
.ns-final-count { margin:10px 0 0; color:rgba(16,47,50,.62); font-size:.82rem; font-weight:800; text-align:center; }
.ns-final-count strong { color:var(--ns-coral); }
.ns-phone-top-three { display:grid; gap:7px; margin-top:12px; }
.ns-phone-top-answer { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 11px; border:3px solid var(--ns-outline); border-radius:6px 10px 7px 9px; background:var(--ns-paper); }
.ns-phone-top-answer b { color:var(--ns-coral); }
.ns-phone-top-answer span { color:var(--ns-ink); font-size:.83rem; font-weight:800; }
.ns-phone-top-answer em { color:var(--ns-mint-deep); font-style:normal; font-weight:900; direction:ltr; }

@keyframes ns-search-pass { 0%{opacity:0;transform:translate(-50%,-42%) rotate(-3deg) scale(.88)} 12%,72%{opacity:1;transform:translate(-50%,-50%) rotate(1deg) scale(1)} 100%{opacity:0;transform:translate(-50%,-58%) rotate(2deg) scale(1.03);visibility:hidden} }
@keyframes ns-search-fill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes ns-question-settle { 0%{opacity:0;transform:translateY(28vh) rotate(3deg) scale(1.12)} 70%{opacity:1;transform:translateY(-1.5vh) rotate(-1.1deg) scale(1.02)} 100%{opacity:1;transform:rotate(-.35deg)} }
@keyframes ns-orbit { to{transform:rotate(360deg)} }
@keyframes ns-dial-pop { from{opacity:0;transform:scale(.6) rotate(-22deg)} to{opacity:1;transform:none} }
@keyframes ns-truth-spin { 0%{opacity:.5;transform:rotate(-24deg) scale(.82)} 72%{transform:rotate(4deg) scale(1.035)} 100%{opacity:1;transform:none} }
@keyframes ns-card-in { to{opacity:1;transform:none} }
@keyframes ns-card-scan { 0%,25%{transform:translateX(-120%)} 72%,100%{transform:translateX(120%)} }
@keyframes ns-leader-in { from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:none} }
@keyframes ns-wait { 0%,100%{transform:scale(.94) rotate(-2deg);box-shadow:6px 7px 0 var(--ns-amber)} 50%{transform:scale(1) rotate(2deg);box-shadow:10px 11px 0 var(--ns-amber)} }

@media (max-width: 900px) {
  .ns-layout { grid-template-columns:minmax(0,1fr) 190px; gap:10px; padding-inline:12px; }
  .ns-score-row { grid-template-columns:28px minmax(0,1fr); }
  .ns-score-row img { width:28px;height:28px; }
  .ns-score-points { grid-column:2; margin-top:-7px; }
  .ns-question { width:96%; }
  .ns-direction { display:none; }
}

@media (max-height: 690px) and (min-width: 700px) {
  .ns-layout { padding-top:62px; padding-bottom:14px; }
  .ns-question { margin-bottom:8px; padding-block:12px; }
  .ns-question h1 { font-size:clamp(1.35rem,2.5vw,2.45rem); }
  .ns-dial { width:clamp(170px,21vw,260px); }
  .ns-score-row { min-height:40px;padding-block:3px; }
  .ns-final-card { min-height:70px; }
}

body.host-mobile-portrait.nesba-stage-phase .ns-layout {
  grid-template-columns: 1fr;
  padding: 70px 12px 16px;
}
body.host-mobile-portrait.nesba-stage-phase .ns-hud {
  top: 12px;
  left: 286px;
  right: 12px;
}
body.host-mobile-portrait.nesba-stage-phase .ns-hud .ns-pill { display:none; }
body.host-mobile-portrait.nesba-stage-phase .ns-score-rail { display:none; }
body.host-mobile-portrait.nesba-stage-phase .ns-question { width:100%; }
body.host-mobile-portrait.nesba-stage-phase .ns-centerpiece { flex-direction:column;gap:12px; }
body.host-mobile-portrait.nesba-stage-phase .ns-person { grid-template-columns:44px 1fr;width:auto; }
body.host-mobile-portrait.nesba-stage-phase .ns-person img { width:44px;grid-row:1/3; }
body.host-mobile-portrait.nesba-stage-phase .ns-dial { width:min(52vw,230px); }
body.host-mobile-portrait.nesba-stage-phase .ns-final-grid { gap:6px; }
body.host-mobile-portrait.nesba-stage-phase .ns-final-card { min-height:84px;padding:9px 8px; }

html[data-reduce-motion="true"] .ns-stage *,
html[data-reduce-motion="true"] .ns-phone * {
  animation-duration:1ms !important;
  animation-delay:0ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .ns-stage *, .ns-phone * { animation-duration:1ms !important; animation-delay:0ms !important; }
}