/* Start-screen decoration; the panel masks the lower/inner half of each mascot. */
#startScreen { gap: 16px; overflow-x: hidden; }
#startScreen .title-logo { margin-bottom: 8px !important; }
#startScreen .setup-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: min(560px, calc(100vw - 96px)) !important;
  background: transparent !important;
}
#startScreen .setup-panel::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; background: var(--ivory, #fffaf3);
  z-index: 1; pointer-events: none;
}
#startScreen .setup-panel > :not(.nb-mascot) { position: relative; z-index: 2; }
.nb-mascot {
  position: absolute; width: 112px; height: 112px;
  pointer-events: none; user-select: none; z-index: 0;
}
.nb-mascot img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 50% 80%; animation: nb-poyo 5.2s infinite;
}
.nb-mascot-left { left: -67px; top: 44%; transform: rotate(-18deg); }
.nb-mascot-left img { animation-delay: -2s; }
.nb-mascot-right { right: -67px; top: 32%; transform: rotate(18deg); }
.nb-mascot-right img { animation-duration: 5.9s; animation-delay: -.6s; }
@keyframes nb-poyo {
  0%, 34%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(6px) scale(1.06,.93); }
  53% { transform: translateY(-10px) scale(.96,1.05); }
  66% { transform: translateY(2px) scale(1.04,.96); }
  78% { transform: translateY(-2px) scale(.99,1.01); }
}
@media(max-width:600px) {
  #startScreen .setup-panel { width: calc(100vw - 68px) !important; }
  .nb-mascot { width: 82px; height: 82px; }
  .nb-mascot-left { left: -46px; }
  .nb-mascot-right { right: -46px; }
}
/* Wrappers survive the account form's innerHTML replacement and leave tables scrollable. */
.nb-gate-stage, .nb-board-stage { position: relative; isolation: isolate; }
.nb-gate-stage { width: min(440px, calc(100vw - 100px)); }
.nb-gate-stage .gate-card { position: relative; width: 100%; z-index: 1; }
.nb-gate-guest { left: -62px; top: 30%; transform: rotate(-16deg); }
.nb-gate-guest img { animation: nb-double-hop 6.4s infinite; animation-delay: -1s; }
.nb-board-stage { margin-top: 42px; }
.nb-board-stage .board { position: relative; z-index: 1; }
.nb-board-blue { left: 12%; top: -63px; transform: rotate(-12deg); }
.nb-board-blue img { animation: nb-curious-peek 8.3s infinite; animation-delay: -2.4s; }
.nb-board-five { right: 8%; top: -64px; }
.nb-board-five img { animation: nb-head-tilt 7.1s infinite; animation-delay: -4s; }
@keyframes nb-double-hop {
  0%, 28%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(5px) scale(1.08,.92); }
  42% { transform: translateY(-14px) scale(.96,1.05); }
  50% { transform: translateY(3px) scale(1.06,.94); }
  59% { transform: translateY(-7px) scale(.98,1.03); }
  68%, 80% { transform: translateY(0) scale(1); }
}
@keyframes nb-curious-peek {
  0%, 22%, 100% { transform: translate(0,16px) rotate(0); }
  38%, 55% { transform: translate(-8px,-3px) rotate(-7deg); }
  67% { transform: translate(2px,0) rotate(5deg); }
  80% { transform: translate(0,16px) rotate(0); }
}
@keyframes nb-head-tilt {
  0%, 24%, 100% { transform: rotate(0) translateY(4px); }
  38%, 46% { transform: rotate(9deg) translateY(-3px); }
  60%, 68% { transform: rotate(-8deg) translateY(-3px); }
  82% { transform: rotate(0) translateY(4px); }
}
@media(max-width:600px) {
  .nb-gate-stage { width: min(440px, calc(100vw - 80px)); }
  .nb-gate-guest { left: -44px; }
  .nb-board-stage { margin-top: 32px; }
  .nb-board-blue, .nb-board-five { top: -48px; }
  .nb-board-blue { left: 10%; }
  .nb-board-five { right: 6%; }
}
#clearScreen { overflow-x: hidden; }
.nb-result-ranking { position: relative; isolation: isolate; width: min(860px, calc(100vw - 120px)); }
.overlay-screen .nb-result-ranking .ranking-box { position: relative; z-index: 1; width: 100% !important; max-width: none; overflow-x: auto; }
.nb-result-left { left: -65px; top: 24%; transform: rotate(-18deg); }
.nb-result-left img { animation: nb-curious-peek 8.3s infinite; }
.nb-result-right { right: -65px; top: 46%; transform: rotate(18deg); }
.nb-result-right img { animation: nb-head-tilt 7.1s infinite; animation-delay: -3s; }
#clearScreen[data-view="ranking"] > div:not(.clear-banner-title):not(.nb-result-ranking):not(.start-actions) { display: none !important; }
#clearScreen[data-view="ranking"] #clearRetryBtn { display: none; }
@media(max-width:600px) {
  .nb-result-ranking { width: calc(100vw - 84px); }
  .nb-result-left { left: -44px; }
  .nb-result-right { right: -44px; }
}
@media(prefers-reduced-motion:reduce) { .nb-mascot img { animation: none; } }