/* New Trainer Festival sheet (js/newbie.js): Lucky Gem Wheel + spending gifts. Wheel drawn with conic-gradient. */
.nb-head { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 4); color: #fff; background: linear-gradient(120deg, #ff7a2f, #ff3f6c 50%, #a04dff); box-shadow: 0 8px 22px rgba(255, 80, 90, 0.35); }
.nb-head img { width: calc(var(--u) * 11); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); animation: nb-wob 3s ease-in-out infinite; }
.nb-head > div { display: grid; }
.nb-head b { font-size: calc(var(--u) * 4.2); font-weight: 900; }
.nb-head small { font-weight: 800; opacity: 0.95; }
@keyframes nb-wob { 50% { transform: rotate(-14deg) scale(1.05); } }

.nb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(35, 49, 77, 0.07); margin-bottom: calc(var(--u) * 2); }
.nb-tabs button { position: relative; padding: calc(var(--u) * 1.5) 0; border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 2.7); color: var(--ink-2); }
.nb-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(35, 49, 77, 0.15); }
.nb-tabs .dot { position: absolute; top: 6px; right: 14%; width: 9px; height: 9px; border-radius: 50%; background: #ff3b52; }

/* tiers */
.nb-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.nb-tier { display: grid; justify-items: center; gap: 2px; padding: calc(var(--u) * 1.4) 4px; border-radius: calc(var(--u) * 2.4); background: rgba(90, 110, 180, 0.08);
  border: 2px solid transparent; color: var(--ink); transition: 0.15s; }
.nb-tier b { display: flex; align-items: center; gap: 3px; font-size: calc(var(--u) * 3); font-weight: 900; }
.nb-tier b img { width: 1.1em; }
.nb-tier small { font-size: calc(var(--u) * 2.1); font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2; }
.nb-tier.on { border-color: #ff8a2f; background: #fff7ee; }
.nb-tier.ready small { color: #e0560f; }
.nb-tier.ready:not(.on) { animation: nb-glow 1.6s ease-in-out infinite; }
.nb-tier.done small { color: #23a35a; }
@keyframes nb-glow { 50% { box-shadow: 0 0 0 3px rgba(255, 138, 47, 0.45); } }

/* wheel */
.nb-stage { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2.4); flex-wrap: wrap; }
.nb-wheel-wrap { --sz: clamp(230px, 44vmin, 340px); position: relative; width: var(--sz); height: var(--sz); flex: none; }
.nb-lights { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, #ffd84a 62%, #d9930d 63%, #b5730a 100%); box-shadow: 0 10px 28px rgba(180, 110, 0, 0.45); }
.nb-lights i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff6c4;
  transform: rotate(var(--a)) translateY(calc(var(--sz) / -2 - 6px)); box-shadow: 0 0 8px #fff3a0; animation: nb-blink 0.9s steps(1) infinite; }
.nb-lights i:nth-child(2n) { animation-delay: 0.45s; }
@keyframes nb-blink { 50% { background: #ff9b3a; box-shadow: none; } }
.nb-wheel { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.08), inset 0 0 30px rgba(0, 0, 0, 0.18); }
.nb-wheel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.35), transparent 55%); pointer-events: none; }
.nb-lab { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; width: 4.6em; margin-left: -2.3em; color: #fff;
  transform: rotate(var(--a)) translateY(calc(var(--sz) * -0.34)) translateY(-50%); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); line-height: 1.05; }
.nb-lab b { font-size: calc(var(--sz) * 0.075); font-weight: 900; }
.nb-lab small { font-size: calc(var(--sz) * 0.045); font-weight: 800; }
.nb-pointer { position: absolute; left: 50%; top: -20px; width: 34px; height: 42px; margin-left: -17px; z-index: 2;
  background: linear-gradient(#fff, #ffe3e3); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.nb-pointer::after { content: ''; position: absolute; inset: 5px 8px 12px; background: #ff3b52; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.nb-hub { position: absolute; left: 50%; top: 50%; width: 27%; height: 27%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2; display: grid; place-content: center;
  color: #6a4300; background: radial-gradient(circle at 40% 30%, #fff8cf, #ffd23a 60%, #e09a10); border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); line-height: 1; }
.nb-hub b { font-size: calc(var(--sz) * 0.07); font-weight: 900; letter-spacing: 0.04em; }
.nb-hub small { font-size: calc(var(--sz) * 0.045); font-weight: 800; }
.nb-hub small::after { content: ''; display: inline-block; width: 0.95em; height: 0.95em; margin-left: 2px; vertical-align: -0.1em; background: url(../assets/icons/gems.webp) center / contain no-repeat; }
.nb-hub.go { cursor: pointer; animation: nb-pulse 1.4s ease-in-out infinite; }
.nb-hub.go:active { transform: translate(-50%, -50%) scale(0.94); }
.nb-hub:disabled { filter: grayscale(0.7); opacity: 0.85; }
@keyframes nb-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 210, 58, 0.35), 0 6px 16px rgba(0, 0, 0, 0.3); } }
.nb-wheel-wrap.won .nb-lights i { animation-duration: 0.25s; }
.nb-wheel-wrap.won .nb-pointer { animation: nb-bounce 0.5s 2; }
@keyframes nb-bounce { 50% { transform: translateY(-6px); } }

.nb-side { flex: 1 1 220px; max-width: 340px; display: grid; gap: calc(var(--u) * 1.4); justify-items: center; text-align: center; }
.nb-paid { display: grid; padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 2.4); background: rgba(255, 138, 47, 0.12); }
.nb-paid small { font-weight: 800; color: var(--ink-2); }
.nb-paid b { font-size: calc(var(--u) * 4); font-weight: 900; color: #e0560f; }
.nb-note { margin: 0; font-size: calc(var(--u) * 2.7); line-height: 1.4; }
.nb-rule { margin: 0; font-size: calc(var(--u) * 2.2); color: var(--ink-2); line-height: 1.4; }

/* spending gifts */
.nb-spent { display: grid; justify-items: center; gap: 6px; padding: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); text-align: center;
  color: #fff; background: linear-gradient(130deg, #5b6cff, #9a5cff 60%, #ff6fb1); box-shadow: 0 8px 20px rgba(110, 90, 255, 0.3); }
.nb-spent > div { display: grid; }
.nb-spent small { font-weight: 800; opacity: 0.9; }
.nb-spent > div b { font-size: calc(var(--u) * 6); font-weight: 900; line-height: 1.1; }
.nb-spent p { margin: 0; font-weight: 700; }
.nb-mss { display: grid; gap: calc(var(--u) * 1.2); margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.6); }
.nb-ms { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.4); background: rgba(90, 110, 180, 0.07); }
.nb-ms .soc-chips { margin: 0; justify-content: flex-end; }
.nb-ms-l { display: grid; gap: 5px; }
.nb-ms-l b { display: flex; align-items: center; gap: 4px; font-weight: 900; }
.nb-ms-l b img { width: 1.1em; }
.nb-bar { height: 8px; border-radius: 99px; background: rgba(90, 110, 180, 0.18); overflow: hidden; }
.nb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb13a, #ff6a3a); }
.nb-ms em { font-style: normal; font-weight: 800; font-size: calc(var(--u) * 2.3); color: var(--ink-2); min-width: 5.5em; text-align: right; }
.nb-ms.ready { background: #fff4e6; box-shadow: 0 0 0 2px rgba(255, 138, 47, 0.5); }
.nb-ms.got { opacity: 0.7; }
.nb-ms em.nb-done { color: #23a35a; }

/* lobby rail button */
.rb.rb-newbie img { animation: nb-spin-ico 6s linear infinite; }
@keyframes nb-spin-ico { to { transform: rotate(360deg); } }

/* phones held sideways: everything above the fold */
@media (max-height: 500px) {
  .nb-head { padding: 6px 14px; margin: 2px 0 6px; }
  .nb-head img { width: calc(var(--u) * 7); }
  .nb-head b { font-size: calc(var(--u) * 3.4); }
  .nb-tabs { margin-bottom: 6px; padding: 3px; }
  .nb-tabs button { padding: 5px 0; }
  .nb-stage { margin-top: 18px; gap: 18px; flex-wrap: nowrap; }
  .nb-wheel-wrap { --sz: min(40vmin, 165px); }
  .nb-lights { inset: -8px; }
}
@media (max-width: 640px) {
  .nb-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-ms { grid-template-columns: minmax(0, 1fr) auto; }
  .nb-ms .soc-chips { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .nb-ms > :last-child { grid-column: 2; grid-row: 1; }
}