/* keyboard-race 페이지에서만 헤더를 처음부터 밝은 톤으로 고정 */
body.keyboard-race-route .header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
}

body.keyboard-race-route .header .cc-main-nav-links > a.cc-nav-primary {
  color: #444;
}

body.keyboard-race-route .header .cc-main-nav-links > a.cc-nav-primary.on {
  color: #2f67fb;
}

body.keyboard-race-route .header .cc-main-nav-links > a.cc-nav-primary ~ a.cc-nav-primary::before {
  background: rgba(68, 68, 68, 0.35);
}

body.keyboard-race-route .header .cc-header-auth > a.login-link,
body.keyboard-race-route .header .cc-header-auth > a.logout-link {
  border-color: #444;
  color: #444;
  display: inline-block;
}

body.keyboard-race-route .header .user-icon {
  background: rgba(47, 103, 251, 0.1);
  color: #2f67fb;
  box-shadow: 0 2px 8px rgba(47, 103, 251, 0.2);
}

body.keyboard-race-route .header .login-icon {
  background: #fff;
  border-color: rgba(68, 68, 68, 0.35);
  color: #444;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

body.keyboard-race-route #cc-site-header .cc-nav-toggle .cc-nav-toggle-bar,
body.keyboard-race-route #cc-site-header .cc-nav-toggle .cc-nav-toggle-bar::before,
body.keyboard-race-route #cc-site-header .cc-nav-toggle .cc-nav-toggle-bar::after {
  background: #2f67fb;
}

.keyboard-race-page {
  --kr-bg-1: #f0f7ff;
  --kr-bg-2: #e6fff3;
  --kr-card: #ffffff;
  --kr-line: #c7d2fe;
  --kr-primary: #2563eb;
  --kr-success: #16a34a;
  --kr-danger: #ef4444;
  --kr-text: #0f172a;
  --kr-muted: #475569;
  min-height: calc(100vh - 160px);
  padding: 110px 16px 56px;
  background: linear-gradient(140deg, var(--kr-bg-1), var(--kr-bg-2));
}

/* PLAY LAB: 페이지(body) 스크롤만 쓰고 빈 높이 강제 최소화 */
main.keyboard-race-page.play-lab-page {
  min-height: 0;
}

.keyboard-race-wrap {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--kr-card);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.1);
  padding: 24px;
}

.keyboard-race-header h1 {
  margin: 0;
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
  color: var(--kr-text);
}

.keyboard-race-header p {
  margin: 8px 0 0;
  color: var(--kr-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.kr-game-type-selector {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kr-game-type-btn {
  border: 1px solid rgba(37, 99, 235, 0.32);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.kr-game-type-btn.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.is-hidden {
  display: none !important;
}

.kr-intro-screen {
  margin-top: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #f8fbff;
  padding: 16px;
}

.kr-intro-screen h2 {
  margin: 0 0 12px;
  color: #1e293b;
  font-size: 1.08rem;
}

.kr-intro-hero {
  position: relative;
  height: clamp(120px, 22vw, 168px);
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.26);
  background: rgba(11, 17, 34, 0.72);
}

.kr-intro-hero-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.kr-intro-hero-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.kr-intro-hero-visual {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.kr-intro-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.kr-intro-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.24), rgba(2, 6, 23, 0.66)),
    radial-gradient(circle at 20% 18%, rgba(0, 229, 255, 0.22), transparent 40%);
  z-index: 1;
}

.kr-intro-hero-visual--race {
  background-image:
    linear-gradient(150deg, rgba(11, 17, 34, 0.9), rgba(15, 23, 42, 0.9)),
    radial-gradient(circle at 70% 30%, rgba(0, 229, 255, 0.2), transparent 40%),
    repeating-linear-gradient(
      90deg,
      rgba(226, 232, 240, 0.14) 0 18px,
      rgba(248, 250, 252, 0.03) 18px 36px
    ),
    url("/static/images/keyboard_race/player_car_red.webp");
  background-size: cover, cover, cover, clamp(190px, 34%, 320px);
  background-position: center, center, center, 78% 58%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.kr-intro-hero-img--race {
  object-fit: contain;
  object-position: 78% 58%;
  transform: scale(1.02);
}

.kr-intro-hero-visual--word {
  background-image:
    linear-gradient(140deg, rgba(11, 17, 34, 0.92), rgba(22, 30, 68, 0.9)),
    radial-gradient(circle at 16% 22%, rgba(255, 79, 216, 0.24), transparent 46%),
    radial-gradient(circle at 78% 64%, rgba(0, 229, 255, 0.22), transparent 48%),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 10px
    ),
    url("/static/images/keyboard_race/intro_word_drop.svg");
  background-size: cover, cover, cover, cover, contain;
  background-position: center, center, center, center, 52% 52%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.kr-intro-hero-img--word {
  object-fit: contain;
  object-position: center;
  opacity: 0.95;
}

.kr-intro-hero-badges {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  gap: 6px;
  z-index: 2;
}

.kr-intro-hero-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.95), rgba(0, 229, 255, 0.85));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.28);
}

.kr-intro-hero-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  margin: 0;
  color: #e6f3ff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.kr-intro-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kr-intro-card {
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.kr-intro-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.05rem;
}

.kr-intro-card p {
  margin: 8px 0 0;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.45;
}

.kr-intro-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 0.83rem;
  line-height: 1.35;
}

.kr-intro-card.is-active {
  border-color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.kr-intro-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kr-btn--howto {
  min-width: 132px;
}

.kr-guide-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(2px);
}

.kr-guide-backdrop.is-hidden {
  display: none;
}

.kr-guide-card {
  width: min(540px, 100%);
  border-radius: 16px;
  border: 2px solid rgba(0, 229, 255, 0.48);
  background: linear-gradient(180deg, #171b31, #101426);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.24) inset,
    0 24px 52px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 229, 255, 0.2);
  padding: 20px 18px 16px;
}

.kr-guide-card h3 {
  margin: 0;
  color: #ffe600;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.35);
  font-size: clamp(1rem, 3.3vw, 1.35rem);
}

.kr-guide-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #d8eaff;
  line-height: 1.55;
  font-size: 0.94rem;
}

.kr-guide-list li + li {
  margin-top: 6px;
}

.kr-guide-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.kr-game-screen {
  margin-top: 14px;
}

#playLabPanelKeyboardRace #krGameScreen:not(.is-hidden) {
  margin-top: 0;
}

#playLabPanelKeyboardRace #krRaceMode:not(.is-hidden) .keyboard-race-status.race-info-panel {
  margin-top: 0;
}

.kr-game-topbar {
  margin-bottom: 12px;
}

.kr-back-btn {
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.keyboard-race-controls {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kr-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.95rem;
}

.kr-btn--start { background: #2563eb; }
.kr-btn--restart { background: #0f766e; }
.kr-btn--primary { background: #2563eb; color: #fff; }
.kr-btn--secondary {
  background: #fff;
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.38);
}
.kr-btn--large {
  min-height: 48px;
  min-width: 150px;
  font-size: 1rem;
  padding: 12px 20px;
}
.kr-btn:hover { transform: translateY(-1px); }

.keyboard-race-status {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  padding: 14px;
  background: #f8fbff;
}

.kr-mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.kr-mode-btn {
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.kr-mode-btn.is-active {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, 0.55);
  color: #1d4ed8;
}
.keyboard-race-status.is-disabled {
  opacity: 0.55;
}

@keyframes krWrongNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-3px);
  }
}

.kr-next-key-box.is-kr-wrong-nudge {
  animation: krWrongNudge 0.2s ease;
}

.keyboard-race-keyboard.is-kr-wrong-nudge {
  animation: krWrongNudge 0.18s ease;
}

.kr-next-key-box,
.kr-target-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kr-next-key-label,
.kr-target-display__label {
  color: var(--kr-muted);
  font-size: 0.92rem;
}

.kr-next-key,
.kr-target-display__key {
  display: inline-flex;
  min-width: 62px;
  min-height: 62px;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  background: #1d4ed8;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px 12px;
  text-align: center;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* 인게임 목표 키 — 상태 표시(버튼 아님), 라벨+글자 한 덩어리 */
#krRaceMode .kr-target-display {
  flex-shrink: 0;
}

#krRaceMode .kr-target-display__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#krRaceMode .kr-target-display__key {
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  color: #fff;
  background: linear-gradient(180deg, #ff4fd8 0%, #c026d3 100%);
  border: 2px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 22px rgba(255, 79, 216, 0.42);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.kr-scoreboard {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kr-scoreboard p {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 8px;
  font-size: 0.9rem;
  color: var(--kr-muted);
}

.kr-scoreboard strong {
  color: var(--kr-text);
}

.kr-feedback {
  margin: 12px 0 0;
  font-weight: 700;
  color: #334155;
}

.kr-feedback.is-good { color: var(--kr-success); }
.kr-feedback.is-bad { color: var(--kr-danger); }

.keyboard-race-track {
  --kr-road-shift: 0px;
  --kr-dash-shift: 0px;
  --kr-near-shift: 0px;
  --kr-mid-shift: 0px;
  --kr-far-shift: 0px;
  margin-top: 18px;
  display: grid;
  gap: 14px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 12px;
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 229, 255, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(26, 30, 54, 0.98), rgba(10, 14, 30, 0.98));
  border: 1px solid rgba(0, 229, 255, 0.3);
}

.kr-stadium-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.kr-scenery {
  position: absolute;
  left: 0;
  right: 0;
}

.kr-layer {
  position: absolute;
  left: -8%;
  width: 116%;
  background-repeat: repeat-x;
}

.kr-scenery--far {
  top: 30px;
  height: 92px;
  z-index: 1;
}

.kr-scenery--mid {
  top: 62px;
  height: 78px;
  z-index: 2;
}

.kr-scenery--near {
  top: 92px;
  height: 50px;
  z-index: 3;
}

.kr-stadium-sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 20%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(52, 74, 150, 0.55), rgba(22, 30, 68, 0.05));
}

.kr-layer--skyline {
  top: 0;
  height: 48px;
  opacity: 0.58;
  background-image:
    linear-gradient(180deg, rgba(173, 216, 255, 0.2), rgba(16, 22, 42, 0.5)),
    repeating-linear-gradient(
      90deg,
      rgba(30, 41, 90, 0.78) 0 18px,
      rgba(59, 130, 246, 0.22) 18px 20px,
      rgba(40, 54, 110, 0.82) 20px 36px,
      rgba(14, 20, 44, 0.86) 36px 58px,
      rgba(59, 130, 246, 0.2) 58px 60px,
      rgba(23, 34, 73, 0.8) 60px 84px
    );
  background-size: 220px 100%, 260px 100%;
  background-position: calc(var(--kr-far-shift) * 0.95) 0, var(--kr-far-shift) 0;
}

.kr-layer--stands {
  bottom: 0;
  height: 34px;
  opacity: 0.7;
  background-image:
    linear-gradient(180deg, rgba(255, 79, 216, 0.14), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 230, 0, 0.45) 0 3px,
      transparent 3px 8px,
      rgba(124, 255, 0, 0.4) 8px 11px,
      transparent 11px 18px,
      rgba(0, 229, 255, 0.4) 18px 21px,
      transparent 21px 28px
    );
  background-size: 100% 100%, 160px 100%;
  background-position: 0 0, calc(var(--kr-far-shift) * 1.2) 0;
}

.kr-layer--trees {
  top: 2px;
  height: 44px;
  opacity: 0.76;
  background-image:
    radial-gradient(circle at 14px 30px, rgba(60, 179, 113, 0.8) 0 13px, transparent 14px),
    radial-gradient(circle at 36px 24px, rgba(34, 197, 94, 0.86) 0 14px, transparent 15px),
    radial-gradient(circle at 58px 30px, rgba(22, 163, 74, 0.76) 0 12px, transparent 13px),
    linear-gradient(180deg, transparent 0 68%, rgba(120, 53, 15, 0.6) 68% 100%);
  background-size: 120px 44px;
  background-position: var(--kr-mid-shift) 0;
}

.kr-layer--buildings {
  top: 0;
  height: 38px;
  opacity: 0.58;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(31, 41, 84, 0.8) 0 16px,
    rgba(148, 163, 184, 0.2) 16px 18px,
    rgba(30, 58, 138, 0.78) 18px 34px,
    rgba(15, 23, 42, 0.78) 34px 52px,
    rgba(0, 229, 255, 0.22) 52px 54px,
    rgba(49, 46, 129, 0.8) 54px 74px
  );
  background-size: 220px 100%;
  background-position: calc(var(--kr-mid-shift) * 0.82) 0;
}

.kr-layer--signs {
  bottom: 2px;
  height: 30px;
  opacity: 0.9;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      rgba(15, 23, 42, 0.6) 20px 24px,
      transparent 24px 30px,
      rgba(255, 79, 216, 0.9) 30px 58px,
      rgba(255, 255, 255, 0.5) 58px 60px,
      transparent 60px 104px
    );
  background-size: 100% 100%, 180px 100%;
  background-position: 0 0, calc(var(--kr-mid-shift) * 1.1) 0;
}

.kr-layer--banners {
  top: 0;
  height: 20px;
  opacity: 0.88;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 79, 216, 0.95) 0 38px,
    rgba(255, 255, 255, 0.45) 38px 40px,
    rgba(0, 229, 255, 0.9) 40px 74px,
    rgba(255, 255, 255, 0.45) 74px 76px,
    rgba(255, 230, 0, 0.9) 76px 110px,
    rgba(255, 255, 255, 0.45) 110px 112px
  );
  background-size: 220px 100%;
  background-position: var(--kr-near-shift) 0;
}

.kr-layer--guardrail {
  top: 18px;
  height: 16px;
  opacity: 0.84;
  background-image:
    linear-gradient(180deg, rgba(226, 232, 240, 0.82), rgba(148, 163, 184, 0.28)),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.95) 0 18px,
      rgba(71, 85, 105, 0.42) 18px 22px
    );
  background-size: 100% 100%, 64px 100%;
  background-position: 0 0, calc(var(--kr-near-shift) * 1.08) 0;
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.kr-layer--fence-rail {
  top: 33px;
  height: 14px;
  opacity: 0.82;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(148, 163, 184, 0.58) 0 2px,
      rgba(15, 23, 42, 0.06) 2px 6px
    ),
    linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(100, 116, 139, 0.16));
  background-size: 56px 100%, 100% 100%;
  background-position: calc(var(--kr-near-shift) * 1.16) 0, 0 0;
}

.kr-stadium-board {
  position: absolute;
  top: 8px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 230, 0, 0.6);
  background: rgba(13, 19, 40, 0.82);
  color: #ffe600;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.35);
  transform: translateX(calc(var(--kr-far-shift) * 0.25));
}

.kr-stadium-banners {
  position: absolute;
  top: 44px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  justify-content: space-around;
  transform: translateX(calc(var(--kr-mid-shift) * 0.65));
}

.kr-stadium-banners span {
  min-width: 66px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.95), rgba(0, 229, 255, 0.85));
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 0 10px rgba(255, 79, 216, 0.32);
}

.kr-stadium-crowd {
  position: absolute;
  left: 0;
  right: 0;
  top: 82px;
  height: 26px;
  background:
    radial-gradient(circle at 4px 20px, rgba(255, 230, 0, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 14px 16px, rgba(124, 255, 0, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 24px 20px, rgba(0, 229, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 34px 14px, rgba(255, 79, 216, 0.78) 0 1px, transparent 2px);
  background-size: 40px 24px;
  background-position: var(--kr-mid-shift) 0;
  opacity: 0.9;
  animation: krCrowdBlink 1.8s linear infinite;
}

.kr-stadium-fence {
  position: absolute;
  left: 0;
  right: 0;
  top: 108px;
  height: 20px;
  background:
    repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.5) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(100, 116, 139, 0.18));
  background-position: var(--kr-far-shift) 0, var(--kr-far-shift) 0;
  border-top: 1px solid rgba(148, 163, 184, 0.65);
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

@keyframes krCrowdBlink {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 0.62; }
}

.keyboard-race-track.course-basic .kr-lane__track-base {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, #4a5568 0%, #2d3748 42%, #1a202c 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 28px);
}

.keyboard-race-track.course-city .kr-lane__track-base {
  background-image:
    linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent 32%),
    linear-gradient(180deg, #3d4f63 0%, #2a3544 48%, #151b26 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 24px);
}

.keyboard-race-track.course-desert .kr-lane__track-base {
  background-image:
    linear-gradient(180deg, rgba(251, 191, 36, 0.12), transparent 30%),
    linear-gradient(180deg, #5c4f3a 0%, #3f3629 46%, #262018 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 26px);
}

.keyboard-race-track.course-night .kr-lane__road {
  border-color: rgba(96, 165, 250, 0.45);
}

.keyboard-race-track.course-night .kr-lane__track-base {
  background-image:
    linear-gradient(180deg, rgba(96, 165, 250, 0.1), transparent 28%),
    linear-gradient(180deg, #2c3448 0%, #1a2233 50%, #0c101a 100%),
    repeating-linear-gradient(90deg, rgba(30, 64, 175, 0.22) 0 1px, transparent 1px 22px);
}

.keyboard-race-track.course-night .kr-layer--skyline,
.keyboard-race-track.course-space .kr-layer--skyline {
  opacity: 0.72;
}

.keyboard-race-track.course-night .kr-layer--trees,
.keyboard-race-track.course-space .kr-layer--trees {
  opacity: 0.52;
}

.keyboard-race-track.course-city .kr-layer--buildings {
  opacity: 0.72;
}

.keyboard-race-track.course-city .kr-layer--trees {
  opacity: 0.52;
}

.keyboard-race-track.course-desert .kr-layer--trees {
  opacity: 0.34;
  filter: saturate(0.65) hue-rotate(-16deg);
}

/* ===== Shared Race Scene Layout ===== */
.keyboard-race-track {
  padding: 0;
  background: transparent;
  border: none;
}

.kr-race-scene {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 14px 14px 12px;
  min-height: 260px;
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 229, 255, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(26, 30, 54, 0.98), rgba(10, 14, 30, 0.98));
  border: 1px solid rgba(0, 229, 255, 0.3);
}

.kr-track-surface {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 126px;
  bottom: 10px;
  z-index: 4;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.45), rgba(2, 6, 23, 0.65)),
    linear-gradient(90deg, rgba(226, 232, 240, 0.06), rgba(248, 250, 252, 0.14));
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 79, 216, 0.14),
    inset 0 14px 20px rgba(255, 255, 255, 0.04);
}

.kr-track-markings {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12) 0 26px,
    rgba(255, 255, 255, 0.04) 26px 52px
  );
  background-position: var(--kr-road-shift) 0;
}

.kr-lanes {
  position: relative;
  z-index: 5;
  margin-top: 126px;
  display: grid;
  gap: 5px;
}

.kr-cpu-lanes {
  display: grid;
  gap: 5px;
}

.kr-lane {
  border: none;
  border-radius: 0;
  padding: 2px 6px;
  background: transparent;
  box-shadow: none;
}

.kr-lane + .kr-lane {
  border-top: 1px solid rgba(30, 41, 59, 0.75);
}

.kr-lane__head {
  margin-bottom: 2px;
  opacity: 0.92;
}

.kr-lane__head h2 {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: rgba(219, 234, 254, 0.84);
}

.kr-lane__road {
  height: 48px;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

.kr-race-scene .kr-lane__road::before,
.kr-race-scene .kr-lane__road::after {
  display: block;
}

.kr-finish {
  display: none;
}

.kr-car {
  z-index: 10;
}

.kr-finish-line-wrap {
  position: absolute;
  top: 124px;
  bottom: 10px;
  right: 22px;
  z-index: 4;
  width: 14px;
  pointer-events: none;
}

.kr-finish-line {
  display: none;
}

.kr-scene-finish-label {
  position: absolute;
  right: 0;
  bottom: 6px;
  top: auto;
  margin: 0;
  padding: 2px 4px;
  border-radius: 4px;
  color: rgba(255, 230, 100, 0.92);
  font-weight: 800;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1.1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: none;
  background: rgba(15, 23, 42, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  opacity: 0.88;
}

.kr-track-overlay {
  z-index: 24;
}

.kr-stadium-bg {
  z-index: 1;
}

.kr-scenery--far { z-index: 1; }
.kr-scenery--mid { z-index: 2; }
.kr-scenery--near { z-index: 3; }

.keyboard-race-track.course-space .kr-lane__road {
  border-color: rgba(125, 211, 252, 0.55);
}

.keyboard-race-track.course-space .kr-lane__track-base {
  background-image:
    linear-gradient(90deg, rgba(186, 230, 253, 0.45) 0, rgba(186, 230, 253, 0.45) 2px, transparent 2px),
    linear-gradient(90deg, transparent calc(100% - 15px), rgba(186, 230, 253, 0.38) calc(100% - 15px), rgba(186, 230, 253, 0.38) 100%, transparent 100%),
    linear-gradient(180deg, rgba(125, 211, 252, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, #2e3a52 0%, #1a2236 50%, #0a0e18 100%),
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.35) 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 24px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0;
}

.kr-track-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  z-index: 9;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.kr-track-overlay strong {
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.08em;
}

/* 레거시 트랙 오버레이 — 결과는 kr-result-landing 사용 */
.kr-track-overlay.is-show {
  display: none !important;
}

/* ===== Keyboard Race 결과 랜딩 ===== */
.kr-result-landing {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.kr-result-landing.is-hidden {
  display: none !important;
}

.kr-result-landing__bg {
  position: absolute;
  inset: 0;
  background-color: #060a1c;
  background-image: var(--kr-result-bg-pc);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.kr-result-landing__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.kr-result-landing__content {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  display: flex;
  justify-content: center;
}

.kr-result-landing__card {
  width: min(100%, 480px);
  box-sizing: border-box;
  text-align: center;
  padding: 24px 22px 20px;
  background: rgba(8, 16, 32, 0.9);
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.14),
    0 20px 52px rgba(0, 0, 0, 0.58),
    0 0 32px rgba(0, 229, 255, 0.1);
  color: #f8fafc;
}

.kr-result-landing__card.is-hidden {
  display: none !important;
}

.kr-result-landing__title {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 8vw, 2.75rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.kr-result-landing__message {
  margin: 0 0 16px;
  font-size: clamp(0.92rem, 3.6vw, 1.06rem);
  font-weight: 600;
  line-height: 1.5;
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.kr-result-landing__score {
  margin: 0 0 18px;
}

.kr-result-landing__score-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(148, 163, 184, 0.95);
}

.kr-result-landing__score-value {
  display: block;
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
}

.kr-result-landing__actions {
  display: flex;
  justify-content: center;
}

.kr-result-landing__btn {
  min-width: min(220px, 100%);
  max-width: 100%;
  padding: 13px 22px;
  font-size: clamp(0.95rem, 3.8vw, 1.06rem);
  font-weight: 800;
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.72);
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 52%, #1d4ed8 100%);
  box-shadow:
    0 6px 18px rgba(37, 99, 235, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 0 16px rgba(56, 189, 248, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}

.kr-result-landing__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.kr-result-landing__btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.kr-result-landing.is-win .kr-result-landing__btn--lose {
  display: none;
}

.kr-result-landing.is-lose .kr-result-landing__btn--win {
  display: none;
}

.kr-result-landing.is-win .kr-result-landing__card--outcome {
  border-color: rgba(255, 230, 100, 0.38);
  box-shadow:
    0 0 0 1px rgba(255, 230, 100, 0.14),
    0 20px 52px rgba(0, 0, 0, 0.58),
    0 0 32px rgba(255, 230, 100, 0.12);
}

.kr-result-landing.is-win .kr-result-landing__title {
  color: #ffe566;
  text-shadow:
    0 0 28px rgba(255, 230, 100, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.85);
}

.kr-result-landing.is-lose .kr-result-landing__card--outcome {
  border-color: rgba(251, 113, 133, 0.42);
  box-shadow:
    0 0 0 1px rgba(251, 113, 133, 0.16),
    0 20px 52px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(251, 113, 133, 0.14);
}

.kr-result-landing.is-lose .kr-result-landing__title {
  color: #ff8fab;
  text-shadow:
    0 0 24px rgba(251, 113, 133, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.85);
}

.kr-result-landing__ranking-title {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #e0f2fe;
}

.kr-result-landing__name-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  color: rgba(226, 232, 240, 0.92);
}

.kr-result-landing__name-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(2, 8, 24, 0.88);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.kr-result-landing__name-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}

.kr-result-landing__name-error {
  min-height: 1.2em;
  margin: 0 0 12px;
  font-size: 0.78rem;
  text-align: left;
  color: #fda4af;
}

.kr-result-landing__card--ranking .kr-result-landing__score {
  margin-bottom: 14px;
}

body.kr-result-landing-active {
  overflow: hidden;
}

@media (max-width: 768px) {
  .kr-result-landing__bg {
    background-image: var(--kr-result-bg-mobile);
  }

  .kr-result-landing__scrim {
    background: rgba(0, 0, 0, 0.62);
  }

  .kr-result-landing__content {
    width: min(100%, 100%);
  }

  .kr-result-landing__card {
    width: min(92vw, 360px);
    padding: 20px 16px 16px;
  }

  .kr-result-landing__title {
    font-size: clamp(1.6rem, 9vw, 2.1rem);
  }

  .kr-result-landing__message {
    font-size: 13px;
  }

  .kr-result-landing__btn {
    width: 100%;
    min-width: 0;
  }
}

.kr-track-overlay.is-show .kr-race-outcome__btn {
  touch-action: manipulation;
}

#krGameScreen.is-race-ended .keyboard-race-status,
#krGameScreen.is-race-ended .kr-course-hint,
#krGameScreen.is-race-ended .keyboard-race-keyboard {
  opacity: 0.38;
  filter: brightness(0.55) saturate(0.85);
  pointer-events: none;
  user-select: none;
}

#krGameScreen.is-race-ended .race-track-area {
  pointer-events: none;
}

.kr-race-outcome {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 22px 20px 18px;
  max-width: min(92vw, 400px);
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 16, 32, 0.9);
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.16),
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(0, 229, 255, 0.1);
}

.kr-race-outcome__title {
  margin: 0 0 10px;
  font-size: clamp(1.85rem, 8vw, 2.85rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.kr-race-outcome__message {
  margin: 0 0 18px;
  font-size: clamp(0.92rem, 3.5vw, 1.08rem);
  font-weight: 600;
  line-height: 1.5;
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.kr-race-outcome__actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.kr-race-outcome__btn {
  min-width: min(220px, 100%);
  max-width: 100%;
  padding: 13px 22px;
  font-size: clamp(0.95rem, 3.8vw, 1.06rem);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 52%, #1d4ed8 100%);
  border: 1px solid rgba(125, 211, 252, 0.72);
  border-radius: 12px;
  box-shadow:
    0 6px 18px rgba(37, 99, 235, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 0 16px rgba(56, 189, 248, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.kr-race-outcome__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.kr-race-outcome__btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.kr-track-overlay.is-win .kr-race-outcome__btn--lose {
  display: none;
}

.kr-track-overlay.is-lose .kr-race-outcome__btn--win {
  display: none;
}

.kr-track-overlay.is-win .kr-race-outcome {
  border-color: rgba(255, 230, 100, 0.38);
  box-shadow:
    0 0 0 1px rgba(255, 230, 100, 0.14),
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(255, 230, 100, 0.12);
}

.kr-track-overlay.is-win .kr-race-outcome__title {
  color: #ffe566;
  text-shadow:
    0 0 28px rgba(255, 230, 100, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.85);
}

.kr-track-overlay.is-lose .kr-race-outcome {
  border-color: rgba(251, 113, 133, 0.42);
  box-shadow:
    0 0 0 1px rgba(251, 113, 133, 0.16),
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(251, 113, 133, 0.14);
}

.kr-track-overlay.is-lose .kr-race-outcome__title {
  color: #ff8fab;
  text-shadow:
    0 0 24px rgba(251, 113, 133, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.85);
}

#krGameScreen.is-race-ended .kr-desktop-result-panel,
#krGameScreen.is-race-ended #krResultPanel {
  display: none !important;
}

/* 결과 카드 단계 미사용 — 랭킹 입력 다이얼로그만 */
#krResultModal #krModalStageResult {
  display: none !important;
}

#krResultModal.kr-result-modal--ranking-only.is-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(2, 6, 23, 0.72);
}

#krResultModal.kr-result-modal--ranking-only .kr-modal-card.kr-race-result-card {
  width: min(420px, calc(100vw - 24px));
  max-width: 420px;
  max-height: min(calc(100dvh - 24px), 420px);
  padding: 16px 14px 14px;
  overflow-y: auto;
}

#krResultModal.kr-result-modal--ranking-only .play-lab-score-save-title,
#krResultModal.kr-result-modal--ranking-only .kr-modal-ranking-table-wrap,
#krResultModal.kr-result-modal--ranking-only .kr-result-stats-grid--mirror,
#krResultModal.kr-result-modal--ranking-only .kr-result-layout .score-summary-grid {
  display: none !important;
}

#krResultModal.kr-result-modal--ranking-only .kr-modal-ranking {
  border: none;
  background: transparent;
  padding: 0;
}

#krResultModal.kr-result-modal--ranking-only .kr-inline-name {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 600px) {
  #krResultModal.kr-result-modal--ranking-only .kr-modal-card.kr-race-result-card {
    width: calc(100vw - 20px);
    max-width: 360px;
    max-height: min(calc(100dvh - 20px), 380px);
    padding: 14px 12px 12px;
  }

  .kr-race-outcome {
    max-width: min(92vw, 360px);
    padding: 18px 16px 16px;
  }

  .kr-race-outcome__title {
    font-size: clamp(1.55rem, 9vw, 2.1rem);
  }

  .kr-race-outcome__message {
    font-size: 13px;
    margin-bottom: 16px;
    color: #f8fafc;
  }

  .kr-race-outcome__btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

.kr-lane {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 0;
  padding: 4px 6px 6px;
  background: transparent;
  box-shadow: none;
}

.kr-race-scene .kr-lane {
  padding: 2px 4px 4px;
}

.kr-lane__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.kr-lane__head h2 {
  margin: 0;
  font-size: 0.82rem;
  color: #c8daf4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.kr-finish {
  color: #ffe600;
  font-weight: 800;
  font-size: 0.86rem;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.38);
}

/* 미니 레이싱 트랙 — 전체 폭 고정 도로 + 차만 overlay 이동 (--kr-road-shift 미사용) */
.kr-lane__road {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.28);
  background: transparent;
}

.kr-lane__track-base,
.kr-lane__track-lines {
  position: absolute;
  pointer-events: none;
}

.kr-lane__track-base {
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: #1e293b;
  background-image:
    linear-gradient(90deg, rgba(248, 250, 252, 0.5) 0, rgba(248, 250, 252, 0.5) 2px, transparent 2px),
    linear-gradient(90deg, transparent calc(100% - 15px), rgba(248, 250, 252, 0.42) calc(100% - 15px), rgba(248, 250, 252, 0.42) 100%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 24%),
    linear-gradient(180deg, #4a5568 0%, #334155 38%, #1e293b 72%, #111827 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.11) 0 1px, transparent 1px 26px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, auto;
  background-position: 0 0;
}

.kr-lane__track-lines {
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  z-index: 1;
  transform: translateY(-50%);
  opacity: 0.9;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 220, 80, 0.95) 0 12px,
    transparent 12px 26px
  );
  background-size: 26px 2px;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: none;
}

.kr-lane__road::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 6px 6px 0;
  background:
    repeating-conic-gradient(from 45deg, #f8fafc 0deg 90deg, #0f172a 90deg 180deg) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.22);
}

.kr-car {
  position: absolute;
  left: 8px;
  top: auto;
  bottom: 3px;
  z-index: 6;
  width: 80px;
  height: 38px;
  transition: none;
  transform-origin: left bottom;
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
  --car-body-main: #ff334e;
  --car-body-dark: #8f1328;
  --car-body-top: #ff6f86;
  --car-window: #c4f1ff;
  --car-wheel: #111827;
  --car-wheel-core: #94a3b8;
  --car-light-head: #fde68a;
  --car-light-tail: #f43f5e;
  --car-accent: #ffcc00;
}

.kr-car.is-boost {
  animation: krCarBoost 0.16s ease-out;
}

@keyframes krCarBoost {
  0% {
    filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.28));
  }
  45% {
    filter: drop-shadow(0 0 16px rgba(255, 230, 0, 0.6));
  }
  100% {
    filter: drop-shadow(0 4px 6px rgba(2, 6, 23, 0.45));
  }
}

.kr-car-image-layer,
.kr-car-fallback {
  position: absolute;
  inset: 0;
}

.kr-car-image-layer {
  display: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.kr-car.has-image .kr-car-image-layer {
  display: block;
}

.kr-car.has-image .kr-car-fallback {
  display: none;
}

.kr-car-inner {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: krCarIdle 0.66s ease-in-out infinite alternate;
}

.kr-car-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kr-car-shadow {
  fill: rgba(0, 0, 0, 0.48);
}

.kr-car::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 8px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
}

.kr-car-body {
  fill: var(--car-body-main);
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 1.4;
}

.kr-car-body-top {
  fill: var(--car-body-top);
  opacity: 0.92;
}

.kr-car-body-accent {
  fill: var(--car-accent);
}

.kr-car-window {
  fill: var(--car-window);
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 0.9;
}

.kr-car-light--head {
  fill: var(--car-light-head);
}

.kr-car-light--tail {
  fill: var(--car-light-tail);
}

.kr-car-wheel {
  fill: var(--car-wheel);
}

.kr-car-wheel-core {
  fill: var(--car-wheel-core);
}

@keyframes krCarIdle {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1px); }
}

.kr-car--player {
  width: 86px;
  height: 42px;
  --car-body-main: #ff334e;
  --car-body-dark: #8f1328;
  --car-body-top: #ff708c;
  --car-accent: #ffcc00;
  --car-window: #dcf7ff;
  --car-light-head: #fff3a3;
  --car-light-tail: #fb7185;
}

.kr-car.kr-car--player {
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.kr-car--cpu {
  width: 80px;
  height: 38px;
}

#krCpuLanes {
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.kr-car--cpu {
  width: 80px;
  height: 38px;
}

.kr-car--cpu-1 {
  --car-body-main: #3b82f6;
  --car-body-dark: #1e3a8a;
  --car-body-top: #7dd3fc;
  --car-accent: #00e5ff;
  --car-window: #dbeafe;
  --car-light-head: #fff6bf;
  --car-light-tail: #fda4af;
}

.kr-car--cpu-2 {
  --car-body-main: #facc15;
  --car-body-dark: #a16207;
  --car-body-top: #fde68a;
  --car-accent: #f97316;
  --car-window: #fff7cc;
  --car-light-head: #fffce1;
  --car-light-tail: #fb7185;
}

.kr-car--cpu-3 {
  --car-body-main: #22c55e;
  --car-body-dark: #166534;
  --car-body-top: #86efac;
  --car-accent: #fde047;
  --car-window: #dcfce7;
  --car-light-head: #fff6bf;
  --car-light-tail: #fb7185;
}

.kr-car--cpu-3.has-image .kr-car-image-layer {
  filter: hue-rotate(92deg) saturate(1.12) brightness(1.03);
}

/* Top-view: wider lanes + larger sprites (side-view unchanged) */
.keyboard-race-wrap.kr-car-view-top .kr-lane__road,
.race-track-area.kr-car-view-top .kr-lane__road,
.kr-car-view-top .kr-lane__road {
  height: 58px;
  min-height: 58px;
}

.keyboard-race-wrap.kr-car-view-top .kr-lanes,
.keyboard-race-wrap.kr-car-view-top .kr-cpu-lanes,
.kr-car-view-top .kr-lanes,
.kr-car-view-top .kr-cpu-lanes {
  gap: 3px;
}

/* Top-view race cars (PNG sprites) — side-view assets unchanged */
.kr-car--top-view {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 56px;
  max-width: 84px;
  height: 100%;
  bottom: 0;
  overflow: visible;
  filter: none;
}

.kr-car--top-view .kr-car-image-layer,
.kr-car--top-view .kr-car-fallback {
  display: none !important;
}

.kr-car--top-view::after {
  display: none;
}

.kr-car--top-view .kr-car-top-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.kr-top-car-sprite {
  display: block;
  width: auto;
  height: 34px;
  max-width: 64px;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* 진행 방향(→) — 원본 이미지는 위를 향하므로 시계 방향 90° */
.kr-car--top-view .kr-top-car-sprite {
  height: 62px;
  max-width: 48px;
  transform: rotate(90deg);
  transform-origin: center center;
}

.kr-car--top-view.is-boost .kr-top-car-sprite {
  animation: krCarTopBoost 0.16s ease-out;
}

@keyframes krCarTopBoost {
  0% {
    filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  }
  100% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  }
}

@media (max-width: 640px) {
  .kr-car-view-top .kr-lane__road {
    height: 46px;
    min-height: 46px;
  }

  .kr-car--top-view .kr-top-car-sprite {
    height: 44px;
    max-width: 36px;
  }
}

.kr-car-view-setting {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 229, 255, 0.22);
}

.kr-car-view-setting__label {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(186, 230, 253, 0.88);
}

.kr-car-view-setting__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kr-car-view-setting__option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(100, 116, 139, 0.55);
  background: rgba(15, 23, 42, 0.72);
  font-size: 0.72rem;
  color: #e2e8f0;
  cursor: pointer;
}

.kr-car-view-setting__option:has(input:checked) {
  border-color: rgba(0, 229, 255, 0.55);
  background: rgba(8, 47, 73, 0.85);
  color: #e0f2fe;
}

.kr-car-view-setting__option input {
  margin: 0;
}

.kr-car--cpu-4 {
  --car-body-main: #22c55e;
  --car-body-dark: #166534;
  --car-body-top: #86efac;
  --car-accent: #fde047;
  --car-window: #dcfce7;
  --car-light-head: #fff6bf;
  --car-light-tail: #fb7185;
}

.kr-course-hint {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kr-course-hint p {
  margin: 0;
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: 10px;
  background: rgba(8, 13, 27, 0.72);
  color: #dbeafe;
  padding: 7px 10px;
  font-size: 0.86rem;
}

.keyboard-race-keyboard {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  background: #f8fafc;
  padding: 14px;
}
.keyboard-race-keyboard.is-disabled {
  opacity: 0.45;
}

.keyboard-race-keyboard h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #1e293b;
}

.kr-key-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.kr-keyboard-rows {
  display: grid;
  gap: 8px;
}

.kr-key-row--compact {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.kr-key,
.race-key-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid #cbd5e1;
  background: #fff;
  border-radius: 10px;
  min-height: 46px;
  padding: 0;
  color: #1e293b;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard Race 키패드 — 알파벳 정중앙 (활성 키 포함) */
#playLabPanelKeyboardRace .keyboard-race-keyboard .kr-key,
#playLabPanelKeyboardRace .keyboard-race-keyboard .race-key-btn,
#keyboardRaceRoot .keyboard-race-keyboard .kr-key,
#keyboardRaceRoot .keyboard-race-keyboard .race-key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  line-height: 1;
}

.race-key-btn.is-pressed,
.kr-key.race-key-btn.is-pressed {
  transform: scale(0.96);
  filter: brightness(1.12);
}

.kr-key.is-target {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.kr-finger-guide {
  margin-top: 10px;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.5;
}

.kr-finger-guide p {
  margin: 4px 0;
}

.keyboard-race-result {
  margin-top: 18px;
  border: 2px solid #bfdbfe;
  border-radius: 16px;
  padding: 14px;
  background: #eff6ff;
}

.keyboard-race-result h3 {
  margin: 0;
  color: #1e3a8a;
  font-size: 1.05rem;
}

.keyboard-race-result p {
  margin: 8px 0 0;
  color: #334155;
}

.keyboard-race-result.is-win {
  border-color: #86efac;
  background: #f0fdf4;
}

.keyboard-race-result.is-lose {
  border-color: #fecaca;
  background: #fef2f2;
}

.kr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.55);
}

.kr-modal-backdrop.is-open {
  display: flex;
}

.kr-modal-card {
  width: min(460px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 2px solid #bfdbfe;
  padding: 22px 18px 18px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  text-align: center;
}

.kr-modal-backdrop.is-win .kr-modal-card {
  border-color: #86efac;
}

.kr-modal-backdrop.is-lose .kr-modal-card {
  border-color: #fecaca;
}

.kr-race-result-card {
  padding-top: 20px;
}

.kr-result-hero {
  text-align: center;
  margin: 0 0 18px;
  padding: 0 6px;
}

.kr-result-status {
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
}

.kr-modal-backdrop.is-win .kr-result-status {
  color: #15803d;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

.kr-modal-backdrop.is-lose .kr-result-status {
  color: #b91c1c;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25);
}

.kr-result-subtitle {
  margin: 12px 0 0;
  font-size: clamp(0.95rem, 2.8vw, 1.1rem);
  font-weight: 600;
  line-height: 1.45;
  color: #475569;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

.kr-result-stats-grid,
.result-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 4px;
}

.kr-stat-card,
.result-stat-card {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px 10px 12px;
  text-align: center;
  min-height: 64px;
  box-sizing: border-box;
}

.kr-stat-card--span,
.result-stat-card.wide,
.result-stat-card.course,
.result-stat-card--course {
  grid-column: 1 / -1;
}

.kr-stat-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #64748b;
  margin-bottom: 6px;
}

.kr-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.2;
  word-break: break-word;
}

.kr-stat-value--text {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.kr-result-actions {
  margin-top: 20px;
}

/* Keyboard Race 결과 모달: 게임형 간단 패널 */
#krResultModal .kr-result-game-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

#krResultModal .kr-result-score-block {
  text-align: center;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
}

#krResultModal .kr-result-score-value {
  margin: 4px 0 0;
  font-size: clamp(2.25rem, 12vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: #0f172a;
}

#krResultModal .kr-result-meta-pair {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

#krResultModal .kr-result-meta-item {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  text-align: center;
  min-width: 0;
}

#krResultModal .kr-result-meta-value {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

#krResultModal .kr-result-meta-value--text {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

#krResultModal .kr-result-stats-grid--detail,
#krResultModal .result-stats-grid--detail {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

#krResultModal .kr-result-stats-grid--detail[hidden] {
  display: none !important;
}

#krResultModal.is-result-details-expanded .kr-result-stats-grid--detail {
  display: grid;
}

#krResultModal .kr-result-stats-grid--detail .kr-stat-card {
  min-height: 52px;
  padding: 8px 6px;
  border-radius: 10px;
}

#krResultModal .kr-result-details-toggle {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 7px 10px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

#krResultModal .kr-result-details-toggle:hover {
  border-color: rgba(37, 99, 235, 0.45);
  color: #2563eb;
}

.keyboard-race-page #krResultModal .kr-result-score-block,
.keyboard-race-page #krResultModal .kr-result-meta-item {
  background: rgba(12, 18, 36, 0.92);
  border-color: rgba(0, 229, 255, 0.28);
}

.keyboard-race-page #krResultModal .kr-result-score-value,
.keyboard-race-page #krResultModal .kr-result-meta-value {
  color: #f1f5f9;
}

.keyboard-race-page #krResultModal .kr-result-details-toggle {
  border-color: rgba(0, 229, 255, 0.28);
  color: #9eb0cf;
}

.keyboard-race-page #krResultModal .kr-result-details-toggle:hover {
  border-color: rgba(0, 229, 255, 0.5);
  color: #e2e8f0;
}

#krResultModal .kr-modal-guest-rank-hint,
#krResultModal .kr-modal-guest-retry-hint {
  display: none !important;
}

#krResultModal .kr-modal-guest-result-actions,
#krResultModal .kr-modal-logged-result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}

#krResultModal .kr-modal-guest-result-actions .kr-btn,
#krResultModal .kr-modal-logged-result-actions .kr-btn {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#krResultModal .kr-modal-guest-result-actions .kr-btn--primary,
#krResultModal .kr-modal-logged-result-actions .kr-btn--primary {
  min-height: 46px;
  font-size: 15px;
}

#krResultModal .kr-modal-guest-result-actions .kr-btn--secondary,
#krResultModal .kr-modal-logged-result-actions .kr-btn--secondary {
  min-height: 42px;
  font-size: 14px;
}

#krResultModal .kr-modal-guest-result-actions .kr-btn--ghost,
#krResultModal .kr-modal-logged-result-actions .kr-btn--ghost {
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
}

#krResultModal .kr-btn--ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #64748b;
  box-shadow: none;
}

.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--ghost,
.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--ghost {
  border-color: rgba(148, 163, 184, 0.35);
  color: #94a3b8;
}

@media (max-width: 600px) {
  #krResultModal .kr-result-hero {
    margin-bottom: 6px;
  }

  #krResultModal .kr-result-status,
  #krResultModal .result-title {
    font-size: clamp(1.65rem, 8.5vw, 2.15rem);
    margin-bottom: 4px;
  }

  #krResultModal .kr-result-subtitle,
  #krResultModal .result-message {
    font-size: 13px;
    margin: 4px 0 8px;
    line-height: 1.4;
  }

  #krResultModal .kr-modal-card.kr-race-result-card.race-result-modal,
  #krResultModal .race-result-modal {
    width: calc(100vw - 20px);
    max-width: 400px;
    max-height: min(calc(100dvh - 16px), 520px);
    padding: 14px 12px 12px;
  }

  #krResultModal .kr-result-score-block {
    padding: 10px 8px;
  }

  #krResultModal .kr-result-score-value {
    font-size: clamp(2rem, 14vw, 2.75rem);
  }

  #krResultModal .kr-result-meta-value {
    font-size: 1.05rem;
  }

  #krResultModal .kr-result-meta-value--text {
    font-size: 0.85rem;
  }

  #krResultModal .kr-result-actions,
  #krResultModal .result-actions,
  #krResultModal .kr-modal-actions {
    margin-top: 10px;
    gap: 6px;
  }
}

@media (min-width: 601px) {
  #krResultModal .kr-result-stats-grid--detail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #krResultModal .kr-modal-card.kr-race-result-card {
    max-width: min(440px, calc(100vw - 32px));
  }
}


.kr-modal-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.25rem;
}

.kr-modal-message {
  margin: 10px 0 14px;
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 800;
}

.kr-modal-rank-notice {
  margin: -4px 0 10px;
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 700;
}

.kr-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kr-modal-stats p {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px;
  color: #475569;
  font-size: 0.92rem;
}

.kr-modal-stats strong {
  color: #0f172a;
}

.kr-modal-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.kr-modal-close {
  width: 100%;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.9rem;
  cursor: pointer;
}

.kr-ranking-board {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  background: #f8fafc;
  padding: 12px;
}

.kr-ranking-board h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 1rem;
}

.kr-ranking-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.kr-ranking-tab {
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.kr-ranking-tab.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.kr-ranking-table-wrap {
  overflow-x: auto;
}

.kr-ranking-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.kr-ranking-table th,
.kr-ranking-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  padding: 8px 6px;
  font-size: 0.84rem;
  text-align: center;
  color: #334155;
}

.kr-ranking-table th {
  color: #0f172a;
  font-weight: 800;
}

.kr-ranking-row--podium td:first-child {
  color: #b45309;
  font-weight: 800;
}

.kr-nickname-form {
  margin-top: 10px;
  text-align: left;
}

.kr-nickname-form label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.kr-nickname-form input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 0.96rem;
}

.kr-nickname-error {
  min-height: 18px;
  margin: 6px 0 0;
  color: #dc2626;
  font-size: 0.82rem;
}

#playLabPanelWordDrop:has(#wdGameScreen:not(.is-hidden)) .word-drop-wrap.wd-mode {
  margin-top: 14px;
}

.wd-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wd-status-bar {
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.wd-status-bar p {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 8px;
  color: #475569;
  font-size: 0.88rem;
}

.wd-status-bar strong {
  color: #0f172a;
}

.wd-lives-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wd-lives-hearts {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  min-height: 16px;
}

.wd-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 11px;
  line-height: 1;
  color: #ef4444;
}

.wd-heart::before {
  content: "♥";
}

.wd-heart.is-empty {
  color: #cbd5e1;
}

.wd-playfield-wrap {
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  background: #eef6ff;
  padding: 10px;
}

.wd-playfield {
  position: relative;
  height: clamp(280px, 42vh, 420px);
  border-radius: 10px;
  overflow: hidden;
  border: 2px dashed rgba(59, 130, 246, 0.28);
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

.wd-judge-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  height: 4px;
  z-index: 2;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 2%, #2563eb 20%, #7c3aed 50%, #ec4899 80%, transparent 98%);
  box-shadow:
    0 0 16px rgba(37, 99, 235, 0.55),
    0 0 4px rgba(255, 255, 255, 0.35) inset;
}

.wd-playfield.is-game-over::after {
  content: "GAME OVER";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.38);
  color: #fff;
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.wd-word {
  position: absolute;
  z-index: 3;
  transform: translate3d(0, 0, 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;
  color: #0f172a;
  background: #fff;
  border: 1px solid rgba(59, 130, 246, 0.32);
  box-shadow: 0 8px 14px rgba(37, 99, 235, 0.2);
  white-space: nowrap;
}

.wd-input-area {
  margin-top: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  background: #f8fafc;
  padding: 12px;
}

.wd-input-area label {
  display: block;
  margin: 0 0 8px;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.wd-input-area input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 1rem;
}

.wd-input-area input:disabled {
  background: #e2e8f0;
  color: #64748b;
}

.wd-input-area input.is-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.wd-result-panel {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wd-result-panel p {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  color: #334155;
  font-size: 0.9rem;
}

.wd-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.55);
}

.wd-modal-backdrop.is-open {
  display: flex;
}

.wd-modal-card {
  width: min(460px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 2px solid #fecaca;
  padding: 22px 18px 18px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  text-align: center;
}

.wd-modal-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.25rem;
}

.wd-modal-message {
  margin: 10px 0 14px;
  color: #1e293b;
  font-size: 1.02rem;
  font-weight: 800;
}

.wd-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wd-modal-stats p {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px;
  color: #475569;
  font-size: 0.92rem;
}

.wd-modal-stats strong {
  color: #0f172a;
}

.wd-modal-record {
  margin: 12px 0 0;
  color: #dc2626;
  font-size: 0.95rem;
  font-weight: 700;
}

.wd-modal-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

@media (max-width: 860px) {
  .kr-scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kr-intro-cards {
    grid-template-columns: 1fr;
  }

  .kr-intro-hero {
    height: 116px;
  }

  .wd-status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 640px) {
  .keyboard-race-page {
    padding-top: 92px;
  }

  .keyboard-race-page.play-lab-page:has(
      #playLabPanelKeyboardRace.is-active #krGameScreen.is-hidden
    ),
  .keyboard-race-page.play-lab-page:has(
      #playLabPanelWordDrop.is-active #wdGameScreen.is-hidden
    ),
  .keyboard-race-page.play-lab-page:has(
      #playLabPanelKeyboardBeat.is-active #kbGame.is-hidden
    ) {
    padding: 84px 0 0;
  }

  .keyboard-race-wrap {
    padding: 16px;
    border-radius: 16px;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap {
    padding: 0;
    border-radius: 12px;
  }

  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap {
    padding: 0;
    border-radius: 12px;
  }

  .kr-key-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kr-next-key {
    font-size: 1.7rem;
  }

  .kr-modal-stats {
    grid-template-columns: 1fr;
  }

  .wd-modal-stats {
    grid-template-columns: 1fr;
  }

  .wd-lives-hearts {
    gap: 1px;
  }

  .wd-heart {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  .kr-car {
    width: 62px;
    height: 30px;
  }

  .kr-car--player {
    width: 64px;
    height: 31px;
  }

  .kr-car--cpu {
    width: 60px;
    height: 29px;
  }

  .kr-modal-actions .kr-btn,
  .wd-modal-actions .kr-btn {
    width: 100%;
  }

  .kr-guide-actions .kr-btn {
    width: 100%;
  }
}

/* ===== Retro Arcade Redesign ===== */
.keyboard-race-page {
  --arc-bg-1: #0b0d18;
  --arc-bg-2: #14162b;
  --arc-bg-3: #1a0f2e;
  --arc-cyan: #00e5ff;
  --arc-pink: #ff4fd8;
  --arc-yellow: #ffe600;
  --arc-green: #7cff00;
  --arc-card: #171b31;
  --arc-card-2: #101426;
  --arc-text: #e8f4ff;
  --arc-muted: #a6b6d4;
  position: relative;
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 229, 255, 0.16), transparent 32%),
    radial-gradient(circle at 80% 15%, rgba(255, 79, 216, 0.14), transparent 34%),
    linear-gradient(145deg, var(--arc-bg-1), var(--arc-bg-2) 45%, var(--arc-bg-3));
}

.keyboard-race-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.26;
}

.keyboard-race-wrap {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 27, 49, 0.94), rgba(16, 20, 38, 0.95));
  border: 2px solid rgba(0, 229, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.24) inset,
    0 22px 56px rgba(2, 6, 23, 0.65),
    0 0 24px rgba(0, 229, 255, 0.18);
}

.keyboard-race-header h1 {
  color: var(--arc-cyan);
  letter-spacing: 0.08em;
  text-shadow:
    0 0 10px rgba(0, 229, 255, 0.72),
    0 0 20px rgba(0, 229, 255, 0.45);
}

.keyboard-race-header p {
  color: var(--arc-muted);
}

.keyboard-race-header--toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.keyboard-race-header__main {
  flex: 1 1 220px;
  min-width: 0;
}

.keyboard-race-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.kr-live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.kr-stats-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(10, 14, 32, 0.75);
  color: var(--arc-text);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.12);
}

.kr-ranking-open-btn {
  border: 1px solid rgba(255, 230, 0, 0.45);
  background: linear-gradient(180deg, rgba(40, 46, 78, 0.95), rgba(18, 22, 42, 0.98));
  color: var(--arc-yellow);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.15) inset, 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kr-ranking-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 230, 0, 0.75);
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.25), 0 0 0 1px rgba(255, 79, 216, 0.25) inset;
}

.kr-ranking-open-btn__short {
  display: none;
}

@media (max-width: 520px) {
  .kr-ranking-open-btn__full {
    display: none;
  }
  .kr-ranking-open-btn__short {
    display: inline;
  }
}

body.kr-global-ranking-open,
body.kb-beat-ranking-open,
body.kb-beat-settings-open {
  overflow: hidden;
}

/*
 * 전역 랭킹 다이얼로그: .play-lab-shell { z-index: 1 } 아래에 있으면 사이트 헤더(z-index:30)에 가려짐.
 * 다이얼로그가 열릴 때만 shell을 헤더보다 위로 올려 고정 오버레이가 보이게 한다.
 */
body.kr-global-ranking-open .play-lab-shell,
body.kb-beat-ranking-open .play-lab-shell,
body.kb-beat-settings-open .play-lab-shell {
  z-index: 10040;
}

.kr-global-ranking-layer,
.race-ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
}

.kr-global-ranking-layer:not(.is-hidden) {
  pointer-events: auto;
}

.kr-global-ranking-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.kr-global-ranking-dialog,
.race-ranking-modal {
  position: relative;
  z-index: 1;
  left: auto;
  top: auto;
  right: auto;
  transform: none;
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: linear-gradient(180deg, #12162c, #0b0f1f);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 79, 216, 0.2) inset;
  pointer-events: auto;
  box-sizing: border-box;
  align-self: center;
  flex-shrink: 1;
}

@media (max-width: 600px) {
  .kr-global-ranking-layer,
  .race-ranking-overlay {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .kr-global-ranking-dialog,
  .race-ranking-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0 auto;
  }
}

.kr-global-ranking-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.22);
}

.kr-global-ranking-dialog__head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--arc-yellow);
  letter-spacing: 0.05em;
}

.kr-global-ranking-dialog__close {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--arc-text);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.kr-global-ranking-dialog__close:hover {
  background: rgba(255, 79, 216, 0.25);
}

.kr-global-ranking-dialog__body {
  padding: 12px 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kr-global-ranking-loading,
.kr-global-ranking-empty {
  text-align: center;
  color: var(--arc-muted);
  padding: 24px 8px;
  font-size: 0.95rem;
}

.kr-global-ranking-table-wrap,
.race-ranking-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kr-global-ranking-table {
  width: 100%;
  min-width: 360px;
}

.kr-global-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--arc-text);
}

.kr-global-ranking-table th,
.kr-global-ranking-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  text-align: left;
}

.kr-global-ranking-table th {
  color: var(--arc-cyan);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.kr-intro-screen,
.keyboard-race-status,
.keyboard-race-keyboard,
.keyboard-race-result,
.wd-status-bar,
.wd-playfield-wrap,
.wd-input-area,
.wd-result-panel,
.kr-ranking-board {
  background: linear-gradient(180deg, rgba(23, 27, 49, 0.9), rgba(16, 20, 38, 0.88));
  border-color: rgba(0, 229, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.12) inset;
}

.kr-intro-screen h2,
.kr-ranking-board h3,
.keyboard-race-keyboard h3,
.wd-modal-card h3,
.kr-modal-card h3 {
  color: var(--arc-yellow);
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.4);
}

.kr-intro-card {
  background: linear-gradient(180deg, rgba(27, 35, 62, 0.95), rgba(13, 17, 34, 0.95));
  border-color: rgba(0, 229, 255, 0.3);
  color: var(--arc-text);
}

.kr-intro-card p,
.kr-intro-card small {
  color: var(--arc-muted);
}

.kr-intro-card.is-active {
  border-color: var(--arc-pink);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.4) inset,
    0 0 24px rgba(255, 79, 216, 0.32);
}

.kr-btn,
.kr-back-btn,
.kr-mode-btn,
.kr-ranking-tab {
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kr-btn {
  border: 2px solid transparent;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
}

.kr-btn--start,
.kr-btn--primary {
  background: linear-gradient(180deg, #00d6ff, #0ea5e9);
  border-color: rgba(0, 229, 255, 0.6);
  color: #001019;
  text-shadow: none;
}

.kr-btn--restart {
  background: linear-gradient(180deg, #7cff00, #4ade80);
  border-color: rgba(124, 255, 0, 0.65);
  color: #102100;
}

.kr-btn--secondary {
  background: linear-gradient(180deg, #302252, #23183e);
  border-color: rgba(255, 79, 216, 0.5);
  color: #ffd7f7;
}

.kr-btn:hover,
.kr-back-btn:hover,
.kr-mode-btn:hover,
.kr-ranking-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}

.kr-btn:active,
.kr-back-btn:active {
  transform: translateY(1px);
}

.kr-back-btn,
.kr-mode-btn,
.kr-ranking-tab {
  border: 1px solid rgba(0, 229, 255, 0.38);
  background: rgba(18, 25, 46, 0.96);
  color: #b4ecff;
}

.kr-mode-btn.is-active,
.kr-ranking-tab.is-active {
  background: linear-gradient(180deg, #ff4fd8, #d946ef);
  color: #fff;
  border-color: rgba(255, 79, 216, 0.66);
  box-shadow: 0 0 14px rgba(255, 79, 216, 0.35);
}

.kr-scoreboard p,
.wd-status-bar p,
.wd-result-panel p,
.kr-course-hint p {
  background: rgba(13, 18, 36, 0.9);
  border-color: rgba(0, 229, 255, 0.22);
  color: var(--arc-muted);
}

.kr-scoreboard strong,
.wd-status-bar strong,
.wd-result-panel strong {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.kr-next-key-label,
.kr-feedback,
.kr-finger-guide,
.wd-input-area label {
  color: var(--arc-muted);
}

.kr-next-key {
  background: linear-gradient(180deg, #ff4fd8, #d946ef);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 16px rgba(255, 79, 216, 0.4);
}

.kr-key {
  background: linear-gradient(180deg, #1a2241, #121830);
  border-color: rgba(0, 229, 255, 0.28);
  color: #d8f7ff;
}

.kr-key.is-target {
  border-color: var(--arc-yellow);
  background: linear-gradient(180deg, #ffe600, #facc15);
  color: #2b2300;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.25), 0 0 18px rgba(255, 230, 0, 0.35);
}

.kr-race-scene .kr-lane {
  border: none;
  background: transparent;
  box-shadow: none;
}

.kr-lane__head h2,
.kr-finish {
  color: #d9efff;
}

.kr-race-scene .kr-lane__road {
  border-color: rgba(51, 65, 85, 0.95);
}

.kr-race-scene .kr-car {
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.18));
}

.wd-playfield {
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 229, 255, 0.34) 1px, transparent 2px),
    radial-gradient(circle at 48% 62%, rgba(255, 79, 216, 0.32) 1px, transparent 2px),
    radial-gradient(circle at 79% 28%, rgba(255, 230, 0, 0.22) 1px, transparent 2px),
    linear-gradient(180deg, #0f1631 0%, #0a1024 100%);
  border-color: rgba(0, 229, 255, 0.45);
}

.wd-word {
  background: linear-gradient(180deg, #102246, #192c57);
  color: #dff9ff;
  border-color: rgba(0, 229, 255, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.22) inset, 0 10px 20px rgba(0, 0, 0, 0.28);
}

.wd-heart {
  color: #ff4f79;
  text-shadow: 0 0 8px rgba(255, 79, 121, 0.55);
}

.wd-heart.is-empty {
  color: #64748b;
  text-shadow: none;
}

.wd-input-area input,
.kr-nickname-form input {
  background: rgba(12, 18, 36, 0.95);
  color: #eaf5ff;
  border-color: rgba(0, 229, 255, 0.4);
}

.wd-input-area input::placeholder,
.kr-nickname-form input::placeholder {
  color: #7d8fb0;
}

.kr-modal-card,
.wd-modal-card {
  background: linear-gradient(180deg, #171b31, #101426);
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.25) inset,
    0 24px 52px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(0, 229, 255, 0.2);
  width: min(980px, calc(100vw - 24px));
  max-height: 86vh;
  overflow: auto;
}

/* Keyboard Race 결과 카드는 와이드 랭킹 카드 규칙(980px) 제외 */
.kr-modal-backdrop .kr-modal-card.kr-race-result-card,
.kr-modal-backdrop .kr-modal-card.race-result-modal {
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.kr-modal-message,
.wd-modal-message,
.kr-modal-rank-notice,
.wd-modal-record {
  color: #d8eaff;
}

.kr-modal-stats p,
.wd-modal-stats p {
  background: rgba(12, 18, 36, 0.9);
  border-color: rgba(0, 229, 255, 0.24);
  color: #9eb0cf;
}

.kr-modal-stats strong,
.wd-modal-stats strong {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.kr-modal-backdrop.is-win .kr-modal-card.kr-race-result-card {
  border-color: rgba(250, 204, 21, 0.65);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.35) inset,
    0 24px 52px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(250, 204, 21, 0.22),
    0 0 48px rgba(56, 189, 248, 0.15);
}

.kr-modal-backdrop.is-lose .kr-modal-card.kr-race-result-card {
  border-color: rgba(251, 113, 133, 0.55);
  box-shadow:
    0 0 0 1px rgba(251, 113, 133, 0.28) inset,
    0 24px 52px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(244, 63, 94, 0.2);
}

/* Keyboard Race 결과 모달: 랭킹용 와이드 카드(980px) 규칙과 분리 */
.kr-modal-backdrop .kr-modal-card.kr-race-result-card {
  width: min(460px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(86vh, calc(100dvh - 32px));
  margin: 0 auto;
  flex-shrink: 1;
  min-height: 0;
}

.kr-result-hero {
  margin-bottom: 20px;
}

.keyboard-race-page .kr-result-status {
  color: #e2e8f0;
}

.kr-modal-backdrop.is-win .kr-result-status {
  color: #ffe566;
  text-shadow:
    0 0 18px rgba(255, 230, 100, 0.55),
    0 0 42px rgba(56, 189, 248, 0.35),
    0 2px 0 rgba(15, 23, 42, 0.9);
}

.kr-modal-backdrop.is-lose .kr-result-status {
  color: #ff8fab;
  text-shadow:
    0 0 20px rgba(251, 113, 133, 0.55),
    0 0 36px rgba(244, 63, 94, 0.25),
    0 2px 0 rgba(15, 23, 42, 0.85);
}

.keyboard-race-page .kr-result-subtitle {
  color: #b8c9e8;
}

.kr-stat-card {
  background: rgba(12, 18, 36, 0.92);
  border-color: rgba(0, 229, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.kr-modal-backdrop.is-win .kr-stat-card {
  border-color: rgba(250, 204, 21, 0.28);
}

.kr-modal-backdrop.is-lose .kr-stat-card {
  border-color: rgba(251, 113, 133, 0.22);
}

.kr-stat-label {
  color: #8ba3cc;
}

.kr-stat-value {
  color: #f1f5f9;
}

.kr-ranking-table th,
.kr-ranking-table td {
  color: #bdd2f5;
  border-bottom-color: rgba(0, 229, 255, 0.16);
}

.kr-ranking-table th {
  color: #ffe600;
}

.kr-ranking-row--podium td:nth-child(1) {
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.35);
}

.kr-ranking-row--podium:nth-child(1) td:nth-child(1) { color: #fbbf24; }
.kr-ranking-row--podium:nth-child(2) td:nth-child(1) { color: #cbd5e1; }
.kr-ranking-row--podium:nth-child(3) td:nth-child(1) { color: #d97706; }

.kr-result-layout {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1fr);
  gap: 12px;
  align-items: start;
}

#krResultModal .kr-result-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.kr-modal-ranking {
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  background: rgba(8, 13, 27, 0.72);
  padding: 10px;
}

.kr-modal-ranking h4 {
  margin: 0 0 8px;
  color: #ffe600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.kr-modal-ranking-table-wrap {
  max-height: 220px;
  overflow: auto;
}

.kr-ranking-row--mine td {
  background: rgba(124, 255, 0, 0.15);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 0, 0.45);
  color: #eaffc7;
}

.kr-inline-name {
  margin-top: 8px;
  border-top: 1px dashed rgba(0, 229, 255, 0.25);
  padding-top: 8px;
}

.kr-inline-name__title {
  margin: 0 0 6px;
  color: #7cff00;
  font-weight: 800;
  font-size: 0.85rem;
}

.kr-hidden-name-input {
  position: absolute;
  opacity: 0.01;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.kr-inline-name__error {
  min-height: 16px;
  margin: 5px 0 8px;
  color: #ff6a8f;
  font-size: 0.78rem;
}

.kr-inline-name.is-hidden {
  display: none;
}

.kr-ranking-row--entry td {
  background: rgba(0, 229, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.48),
    0 0 18px rgba(0, 229, 255, 0.2);
  color: #ecfeff;
}

.kr-entry-name-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.1em;
  font-weight: 800;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep player + CPU1 visible without scroll on level 1 */
.keyboard-race-status {
  margin-top: 14px;
  padding: 11px 12px;
}

.kr-mode-selector {
  margin-bottom: 8px;
  gap: 6px;
}

.kr-next-key {
  min-width: 54px;
  font-size: 1.7rem;
  padding: 7px 10px;
}

.kr-scoreboard {
  margin-top: 8px;
  gap: 6px;
}

.kr-scoreboard p {
  padding: 6px;
  font-size: 0.84rem;
}

.keyboard-race-track {
  margin-top: 12px;
}

.kr-race-scene {
  min-height: 204px;
  padding: 8px 10px 8px;
}

.kr-scenery--far {
  top: 20px;
  height: 62px;
}

.kr-scenery--mid {
  top: 40px;
  height: 52px;
}

.kr-scenery--near {
  top: 60px;
  height: 36px;
}

.kr-stadium-board {
  top: 4px;
  right: 12px;
  padding: 4px 8px;
  font-size: 0.68rem;
}

.kr-stadium-banners {
  top: 26px;
  left: 10px;
  right: 10px;
  gap: 6px;
}

.kr-stadium-banners span {
  min-width: 52px;
  font-size: 0.54rem;
  padding: 2px 6px;
}

.kr-stadium-crowd {
  top: 72px;
  height: 16px;
}

.kr-stadium-fence {
  top: 88px;
  height: 12px;
}

.kr-track-surface {
  left: 6px;
  right: 6px;
  top: 96px;
  bottom: 6px;
}

.kr-lanes {
  margin-top: 98px;
  gap: 3px;
}

.kr-cpu-lanes {
  gap: 3px;
}

.kr-lane {
  padding: 1px 4px;
}

.kr-lane__head {
  margin-bottom: 1px;
}

.kr-lane__head h2 {
  font-size: 0.68rem;
}

.kr-lane__road {
  height: 40px;
}

.kr-car {
  width: 72px;
  height: 34px;
  bottom: 2px;
}

.kr-car--player {
  width: 74px;
  height: 35px;
}

.kr-car--cpu {
  width: 70px;
  height: 33px;
}

.kr-finish-line-wrap {
  top: 94px;
  bottom: 6px;
  right: 12px;
  width: 12px;
}

.kr-scene-finish-label {
  font-size: 0.54rem;
}

/* Extra compact tuning for race mode visibility */
#krRaceMode .keyboard-race-status {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
}

#krRaceMode .kr-mode-selector {
  margin-bottom: 6px;
}

#krRaceMode .kr-mode-btn {
  padding: 5px 10px;
  font-size: 0.78rem;
}

#krRaceMode .kr-next-key-box {
  gap: 8px;
}

#krRaceMode .kr-next-key {
  min-width: 48px;
  font-size: 1.45rem;
  padding: 6px 8px;
  border-radius: 10px;
}

#krRaceMode .kr-scoreboard {
  margin-top: 6px;
  gap: 5px;
}

#krRaceMode .kr-scoreboard p {
  padding: 5px 6px;
  font-size: 0.8rem;
  border-radius: 8px;
}

#krRaceMode .kr-feedback {
  margin-top: 8px;
  font-size: 0.86rem;
}

#krRaceMode .keyboard-race-track {
  margin-top: 8px;
}

#krRaceMode .kr-race-scene {
  min-height: 182px;
  padding: 6px 8px 6px;
}

#krRaceMode .kr-scenery--far {
  top: 14px;
  height: 52px;
}

#krRaceMode .kr-scenery--mid {
  top: 30px;
  height: 44px;
}

#krRaceMode .kr-scenery--near {
  top: 44px;
  height: 30px;
}

#krRaceMode .kr-stadium-board {
  top: 2px;
  right: 10px;
  padding: 3px 7px;
  font-size: 0.62rem;
}

#krRaceMode .kr-stadium-banners {
  top: 18px;
  left: 8px;
  right: 8px;
}

#krRaceMode .kr-stadium-banners span {
  min-width: 46px;
  font-size: 0.5rem;
  padding: 2px 5px;
}

#krRaceMode .kr-stadium-crowd {
  top: 58px;
  height: 12px;
}

#krRaceMode .kr-stadium-fence {
  top: 70px;
  height: 9px;
}

#krRaceMode .kr-track-surface {
  top: 78px;
  bottom: 5px;
}

#krRaceMode .kr-lanes {
  margin-top: 72px;
  gap: 2px;
}

#krRaceMode .kr-cpu-lanes {
  gap: 2px;
}

#krRaceMode .kr-lane {
  padding: 0 3px;
}

#krRaceMode .kr-lane__head h2 {
  font-size: 0.62rem;
}

#krRaceMode .kr-lane__road {
  height: 34px;
  border-radius: 5px;
}

.keyboard-race-wrap.kr-car-view-top #krRaceMode .kr-race-scene,
.kr-car-view-top #krRaceMode .kr-race-scene {
  min-height: 204px;
}

.keyboard-race-wrap.kr-car-view-top #krRaceMode .kr-lane__road,
.race-track-area.kr-car-view-top .kr-lane__road,
.kr-car-view-top #krRaceMode .kr-lane__road {
  height: 50px;
  min-height: 50px;
}

#krRaceMode .kr-lane__road::after {
  width: 12px;
}

#krRaceMode .kr-car {
  width: 58px;
  height: 27px;
  bottom: 2px;
}

#krRaceMode .kr-car--player {
  width: 60px;
  height: 28px;
}

#krRaceMode .kr-car--cpu {
  width: 56px;
  height: 26px;
}

#krRaceMode .kr-car--top-view {
  min-width: 54px;
  max-width: 80px;
  height: 100%;
}

.keyboard-race-wrap.kr-car-view-top #krRaceMode .kr-car--top-view .kr-top-car-sprite,
#krRaceMode .kr-car--top-view .kr-top-car-sprite {
  height: 56px;
  max-width: 40px;
}

#krRaceMode .kr-finish-line-wrap {
  top: 77px;
  bottom: 5px;
  right: 10px;
  width: 12px;
}

#krRaceMode .kr-scene-finish-label {
  font-size: 0.52rem;
}

@media (max-height: 920px) {
  .keyboard-race-page {
    padding-top: 96px;
  }

  #krRaceMode .keyboard-race-keyboard {
    margin-top: 12px;
    padding: 10px;
  }

  #krRaceMode .keyboard-race-result {
    margin-top: 12px;
    padding: 10px 12px;
  }
}

/* ===== Compact race HUD layout ===== */
#krRaceMode .keyboard-race-status {
  margin-top: 6px;
  padding: 8px 10px;
}

#krRaceMode .kr-mini-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
}

#krRaceMode .kr-next-key-box {
  gap: 6px;
}

#krRaceMode .kr-next-key-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

#krRaceMode .kr-next-key {
  min-width: 52px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 1.65rem;
}

#krRaceMode .kr-hud-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.79rem;
  color: #bfd2ef;
}

#krRaceMode .kr-hud-line strong {
  color: #fff;
  font-weight: 800;
}

#krRaceMode .kr-hud-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

#krRaceMode .kr-hud-stat--success strong {
  color: #4ade80;
}

#krRaceMode .kr-hud-stat--fail strong {
  color: #fb7185;
}

#krRaceMode .kr-hud-stat--acc strong {
  color: #38bdf8;
}

#krRaceMode .kr-mode-settings {
  justify-self: end;
  position: relative;
}

#krRaceMode .kr-mode-settings__toggle {
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(18, 25, 46, 0.95);
  color: #b4ecff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#krRaceMode .kr-mode-settings__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: 10px;
  background: rgba(10, 16, 32, 0.96);
  padding: 8px;
  z-index: 40;
}

#krRaceMode .kr-mode-settings__panel.is-hidden {
  display: none;
}

#krRaceMode .kr-mode-selector {
  margin: 0;
  gap: 6px;
}

#krRaceMode .kr-mode-btn {
  padding: 5px 8px;
  font-size: 0.73rem;
}

#krRaceMode .kr-feedback {
  margin: 6px 0 0;
  font-size: 0.8rem;
}

#krRaceMode .keyboard-race-track {
  margin-top: 6px;
}

#krRaceMode .keyboard-race-keyboard {
  margin-top: 10px;
  padding: 10px 12px;
}

#krRaceMode .keyboard-race-keyboard h3 {
  margin-bottom: 7px;
  font-size: 0.88rem;
}

#krRaceMode .kr-key-row {
  gap: 6px;
}

#krRaceMode .kr-key {
  min-height: 38px;
  font-size: 0.95rem;
}

#krRaceMode .kr-finger-guide {
  margin-top: 8px;
  font-size: 0.8rem;
}

@media (max-width: 980px) {
  #krRaceMode .kr-mini-hud {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #krRaceMode .kr-mode-settings {
    justify-self: start;
  }
}

/* ===== Intro/tutorial and settings UX refinement ===== */
.kr-intro-settings {
  position: relative;
}

.kr-intro-settings .kr-mode-settings__panel {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 236px;
}

.kr-intro-settings__mode {
  margin: 0 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: #bcd4f7;
}

.kr-intro-settings__mode strong {
  color: #fff;
}

.kr-guide-card {
  width: min(760px, 100%);
}

.kr-guide-summary {
  margin: 10px 0 0;
  color: #d8eaff;
  font-size: 0.92rem;
}

.kr-ready-card {
  width: min(620px, 100%);
}

.kr-ready-mode {
  margin: 8px 0 0;
  color: #bcd4f7;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

.kr-ready-mode strong {
  color: #fff;
}

.kr-ready-mode-selector {
  margin: 8px 0 0;
  gap: 6px;
}

.kr-guide-tabs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kr-guide-tab {
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(18, 25, 46, 0.95);
  color: #b4ecff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.kr-guide-tab.is-active {
  background: linear-gradient(180deg, #ff4fd8, #d946ef);
  color: #fff;
  border-color: rgba(255, 79, 216, 0.7);
}

.kr-guide-content {
  margin-top: 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 12px;
  background: rgba(7, 12, 27, 0.7);
  padding: 12px;
}

.kr-guide-content h4 {
  margin: 0;
  color: #ffe600;
  font-size: 1rem;
}

#krGuideModeDesc,
#krGuideModeKeys,
#krGuideModeFinger,
#krGuideModeTip {
  margin: 7px 0 0;
  color: #d8eaff;
  font-size: 0.88rem;
  line-height: 1.45;
}

#krGuideModeTip {
  color: #7cff00;
  font-weight: 700;
}

.kr-guide-keyboard {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.kr-guide-keyboard-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.kr-guide-key {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 6px;
  background: linear-gradient(180deg, #1a2241, #121830);
  color: #d8f7ff;
  font-size: 0.8rem;
  font-weight: 700;
}

.kr-guide-key.is-active {
  border-color: var(--arc-yellow);
  background: linear-gradient(180deg, #ffe600, #facc15);
  color: #2b2300;
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.24);
}

#krRaceMode .kr-mode-settings__toggle {
  min-width: 112px;
}

@media (max-width: 860px) {
  .kr-intro-actions {
    justify-content: flex-start;
  }

  .kr-intro-settings .kr-mode-settings__panel {
    left: 0;
    right: auto;
  }
}

.kr-arcade-caret {
  display: inline-block;
  margin-left: 2px;
  color: #7cff00;
  text-shadow: 0 0 8px rgba(124, 255, 0, 0.7);
  animation: krCaretBlink 0.9s steps(1, end) infinite;
}

@keyframes krCaretBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
  .kr-result-layout {
    grid-template-columns: 1fr;
  }

  .kr-stadium-banners {
    top: 46px;
    gap: 6px;
  }

  .kr-stadium-banners span {
    min-width: 54px;
    font-size: 0.58rem;
    padding: 3px 6px;
  }
}

/* -------------------------------------------------------------------------- */
/* Code Playground (PLAY LAB panel)                                           */
/* -------------------------------------------------------------------------- */

#playLabPanelCodePlayground .cp-shell {
  margin: 0;
  padding: 10px 12px 14px;
  display: block;
  min-height: 0;
  background: linear-gradient(180deg, rgba(23, 27, 49, 0.96), rgba(16, 20, 38, 0.98));
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.12) inset,
    0 16px 40px rgba(2, 6, 23, 0.55);
}

#playLabPanelCodePlayground .cp-header {
  margin-bottom: 6px;
}

#playLabPanelCodePlayground .cp-title {
  margin: 0 0 2px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.04em;
}

#playLabPanelCodePlayground .cp-desc {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(166, 182, 212, 0.95);
}

#playLabPanelCodePlayground .cp-lang-only {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(8, 12, 28, 0.45);
}

#playLabPanelCodePlayground .cp-lang-only .cp-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(166, 182, 212, 0.9);
}

#playLabPanelCodePlayground .cp-lang-only .cp-select {
  width: auto;
  min-width: 7.5rem;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 8px;
}

#playLabPanelCodePlayground .cp-autosave-row {
  margin: 0 0 8px;
}

#playLabPanelCodePlayground .cp-autosave-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

#playLabPanelCodePlayground .cp-autosave-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(166, 182, 212, 0.95);
}

#playLabPanelCodePlayground .cp-autosave-reset {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 8px;
}

#playLabPanelCodePlayground .cp-autosave-hint {
  margin: 5px 0 0;
  font-size: 0.64rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
}

#playLabPanelCodePlayground .cp-c-note {
  margin-bottom: 8px;
  padding: 6px 8px;
  font-size: 0.76rem;
  line-height: 1.4;
}

#playLabPanelCodePlayground .cp-workspace--c .cp-sample-row {
  margin-bottom: 6px;
  gap: 6px 8px;
}

.cp-title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--arc-cyan, #00e5ff);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

.cp-desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--arc-muted, #a6b6d4);
  line-height: 1.5;
}

/* 언어만 (상단) */
.cp-lang-only {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(8, 12, 28, 0.65);
  border: 1px solid rgba(0, 229, 255, 0.15);
}

.cp-workspace {
  margin-bottom: 8px;
}

/* Python: 내부 스크롤 없음 — body/페이지와 동일 스크롤 */
.cp-workspace--python {
  display: block;
  margin-bottom: 0;
}

.cp-cell-global-note,
.cp-c-note {
  margin: 0 0 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 200, 120, 0.92);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 200, 120, 0.3);
  background: rgba(40, 28, 10, 0.28);
}

.cp-python-notebook__scroll > .cp-cell-global-note {
  margin-bottom: 6px;
  padding: 6px 8px;
  font-size: 0.74rem;
  line-height: 1.4;
}

.cp-python-notebook__scroll > .cp-sample-row {
  margin-bottom: 6px;
  gap: 6px 8px;
}

.cp-python-notebook__scroll .cp-sample-row__label {
  font-size: 0.65rem;
}

.cp-python-notebook__scroll .cp-btn--sample {
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 999px;
}

.cp-sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
}

.cp-sample-row__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--arc-muted, #a6b6d4);
}

.cp-btn--sample {
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(12, 18, 40, 0.9);
  color: var(--arc-cyan, #7ee8ff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cp-btn--sample:hover {
  border-color: rgba(0, 229, 255, 0.65);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.cp-cells-root {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

/* Python 노트북: 문서 흐름만 (max-height / overflow 제거) */
.cp-python-notebook {
  display: block;
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.cp-python-notebook__scroll {
  display: block;
  overflow: visible;
  padding: 4px 0 8px;
}

.cp-python-notebook__scroll > .cp-cells-root {
  margin-bottom: 0;
}

/* 데스크톱: 셀 사이 인라인만 사용 — 하단 pill 숨김 */
#playLabPanelCodePlayground .cp-cell-sticky-add {
  display: none;
}

@media (max-width: 640px) {
  #playLabPanelCodePlayground .cp-cell-sticky-add {
    display: inline-flex !important;
    position: sticky;
    bottom: 8px;
    z-index: 4;
    align-self: center;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 8px auto 4px;
    padding: 4px 8px;
    width: fit-content;
    max-width: calc(100% - 12px);
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background: rgba(12, 16, 34, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.45);
  }

  #playLabPanelCodePlayground .cp-cell-sticky-add .cp-sticky-add__btn {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    min-height: 0;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(0, 30, 48, 0.55);
  }

  #playLabPanelCodePlayground .cp-cell-sticky-add .cp-add-text-btn.cp-sticky-add__btn {
    border-color: rgba(255, 79, 216, 0.35);
    background: rgba(40, 12, 48, 0.45);
  }
}

#playLabPanelCodePlayground .cp-colab-out__idle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  max-height: 2.85em;
}

.cp-sticky-add__btn {
  /* 폴백: 패널 밖에서도 작게 */
  width: auto;
  max-width: none;
  min-height: 30px;
  padding: 5px 12px;
  font-size: 0.72rem;
}

.cp-cell-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.cp-cell-block__inner {
  min-width: 0;
}

.cp-cell-insert {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  padding: 2px 4px 0;
  min-height: 20px;
  opacity: 0.52;
  transition: opacity 0.16s ease;
}

.cp-cell-block:hover .cp-cell-insert,
.cp-cell-block:focus-within .cp-cell-insert {
  opacity: 1;
}

@media (hover: none) {
  .cp-cell-insert {
    opacity: 0.72;
  }
}

.cp-cell-insert__btn {
  margin: 0;
  padding: 3px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  color: rgba(126, 232, 255, 0.82);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.cp-cell-insert__btn:hover {
  background: rgba(0, 229, 255, 0.18);
  color: #e8fbff;
}

.cp-cell-insert__btn--text {
  background: rgba(255, 79, 216, 0.1);
  color: rgba(255, 180, 220, 0.88);
}

.cp-cell-insert__btn--text:hover {
  background: rgba(255, 79, 216, 0.2);
  color: #fff0fa;
}

/* Colab-style 텍스트 셀 (설명) */
.cp-text-cell {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.92));
  box-shadow: 0 4px 18px rgba(2, 6, 23, 0.12);
  overflow: hidden;
}

.cp-text-cell__head {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.55);
}

.cp-text-cell__badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.cp-text-cell__body {
  padding: 12px 14px 14px;
}

.cp-text-cell__ta {
  display: block;
  width: 100%;
  min-height: 88px;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
}

.cp-text-cell__ta:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.cp-cell-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}

.cp-cell-add-row .cp-add-cell-btn {
  flex: 1 1 160px;
  max-width: none;
  margin: 0;
}

.cp-add-text-btn {
  border-color: rgba(255, 79, 216, 0.38);
  color: rgba(255, 180, 230, 0.98);
  background: rgba(32, 10, 40, 0.45);
}

.cp-add-text-btn:hover {
  border-color: rgba(255, 120, 220, 0.65);
  background: rgba(48, 16, 56, 0.5);
}

/* Python Colab-style 셀 */
.cp-colab-cell {
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(10, 14, 32, 0.55);
  box-shadow: 0 6px 22px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}

.cp-colab-cell--failed {
  border-color: rgba(239, 68, 68, 0.35);
}

.cp-colab-cell__main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
}

.cp-colab-cell__rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 50px;
  min-width: 50px;
}

.cp-colab-cell__index {
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(0, 229, 255, 0.55);
  letter-spacing: 0.04em;
  user-select: none;
}

.cp-colab-run-hint {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(166, 182, 212, 0.88);
  text-align: center;
  line-height: 1.25;
  max-width: 54px;
  user-select: none;
}

.cp-colab-run {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 40px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 180, 220, 0.35), rgba(0, 120, 180, 0.45));
  color: #e8fbff;
  cursor: pointer;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.cp-colab-run:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.3);
}

.cp-colab-run:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cp-colab-run .cp-run-glyph {
  margin-right: 0;
}

.cp-colab-cell__editor {
  flex: 1 1 0;
  min-width: 0;
}

#playLabPanelCodePlayground .cp-colab-cell__editor .CodeMirror {
  height: auto;
  min-height: 48px;
  max-height: 420px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}

#playLabPanelCodePlayground .cp-colab-cell__editor .CodeMirror-scroll {
  min-height: 48px;
  max-height: 420px;
  overflow: auto !important;
}

#playLabPanelCodePlayground .cp-c-editor-wrap .CodeMirror {
  height: auto;
  min-height: 260px;
  max-height: 520px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}

#playLabPanelCodePlayground .cp-c-editor-wrap .CodeMirror-scroll {
  min-height: 260px;
  max-height: 520px;
  overflow: auto !important;
}

#playLabPanelCodePlayground .CodeMirror-focused {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

#playLabPanelCodePlayground .cm-s-material-darker.CodeMirror,
#playLabPanelCodePlayground .cm-s-material-darker .CodeMirror-gutters {
  background: #0a0e1a;
}

.cp-colab-ta {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 420px;
  height: 48px;
  resize: none;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: #0a0e1a;
  color: #d8f7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: break-word;
  overflow-x: auto;
  overflow-y: hidden;
  tab-size: 4;
}

.cp-colab-ta:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

.cp-colab-out {
  padding: 6px 10px 8px;
  background: rgba(5, 8, 16, 0.45);
}

.cp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.cp-status-badge--idle {
  color: #bfd2ef;
  background: rgba(30, 41, 59, 0.35);
}

.cp-status-badge--running {
  color: #ffe8a3;
  background: rgba(120, 53, 15, 0.35);
  border-color: rgba(245, 158, 11, 0.45);
}

.cp-status-badge--success {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.35);
  border-color: rgba(34, 197, 94, 0.45);
}

.cp-status-badge--error {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.4);
  border-color: rgba(239, 68, 68, 0.5);
}

.cp-status-badge--info {
  color: #dbeafe;
  background: rgba(30, 58, 138, 0.35);
  border-color: rgba(96, 165, 250, 0.45);
}

.cp-c-result__status {
  margin: 0 0 10px;
}

.cp-colab-out__idle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(185, 247, 207, 0.5);
}

.cp-colab-out__stream {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #e8fff0;
  white-space: pre-wrap;
  word-break: break-word;
}

.cp-colab-cell--failed .cp-colab-out__stream {
  color: #ffd8d8;
}

.cp-colab-out__err {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(239, 68, 68, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  color: #ff9a9a;
  white-space: pre-wrap;
}

.cp-colab-out__cta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 229, 255, 0.12);
}

.cp-add-cell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px dashed rgba(0, 229, 255, 0.45);
  background: rgba(8, 14, 32, 0.5);
  color: var(--arc-cyan, #00e5ff);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cp-add-cell-btn:hover {
  border-color: rgba(0, 229, 255, 0.75);
  background: rgba(0, 40, 60, 0.35);
}

/* C 단일 블록 */
.cp-c-editor-wrap {
  padding: 0 12px 12px;
}

.cp-c-result {
  padding: 0 12px 12px;
}

.cp-c-result__title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--arc-yellow, #ffe600);
}

.cp-card--c-block .cp-console--terminal {
  margin: 0;
  min-height: 160px;
}

.cp-c-workspace--failed .cp-console-out {
  color: #ffd0d0;
}

.cp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--arc-muted, #a6b6d4);
}

.cp-select {
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(10, 14, 32, 0.9);
  color: var(--arc-text, #e8f4ff);
  font-size: 0.88rem;
  font-weight: 600;
}

.cp-select:focus {
  outline: none;
  border-color: rgba(255, 230, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
}

.cp-btn {
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cp-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.cp-btn--primary {
  border-color: rgba(0, 229, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 180, 220, 0.35), rgba(0, 120, 180, 0.45));
  color: #e8fbff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.2);
}

.cp-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
}

.cp-btn--secondary {
  border-color: rgba(255, 79, 216, 0.35);
  background: rgba(18, 22, 42, 0.95);
  color: var(--arc-pink, #ff4fd8);
}

.cp-btn--secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 216, 0.55);
}

.cp-run-glyph {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.72em;
  opacity: 0.95;
  vertical-align: 0.05em;
}

/* 코드 셀 카드 (Colab 코드 블록) */
.cp-card {
  border-radius: 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(10, 14, 32, 0.55);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}

.cp-card--code {
  border-color: rgba(0, 229, 255, 0.28);
}

.cp-card--result {
  border-color: rgba(0, 255, 140, 0.2);
  background: rgba(8, 14, 28, 0.6);
}

.cp-card-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(0, 40, 60, 0.35), rgba(20, 10, 40, 0.25));
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.cp-card-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-cyan, #00e5ff);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 20, 40, 0.5);
}

.cp-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.cp-card-actions .cp-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-textarea {
  display: block;
  width: 100%;
  min-height: 320px;
  resize: vertical;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: #0a0e1a;
  color: #d8f7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: break-word;
  overflow-x: auto;
  tab-size: 4;
}

.cp-textarea:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

.cp-result-heading {
  margin: 0 0 10px;
  padding: 14px 14px 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--arc-yellow, #ffe600);
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.2);
}

.cp-console {
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.84rem;
  line-height: 1.5;
}

.cp-console--terminal {
  margin: 0 12px 12px;
  min-height: 180px;
  max-height: min(50vh, 420px);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 140, 0.22);
  background: #050810;
  color: #b9f7cf;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.cp-console-idle {
  color: rgba(185, 247, 207, 0.55);
}

.cp-console-out {
  color: #e8fff0;
}

.cp-console-err {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(239, 68, 68, 0.35);
  color: #ff8a8a;
  white-space: pre-wrap;
}

.cp-console--failed .cp-console-out {
  color: #ffd0d0;
}

.cp-console-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 229, 255, 0.15);
}

.cp-btn--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 1px solid rgba(0, 229, 255, 0.5);
  background: linear-gradient(180deg, rgba(0, 200, 240, 0.4), rgba(0, 100, 160, 0.5));
  color: #f0ffff;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cp-btn--login:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.85);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.4);
}

.cp-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  max-width: min(80vw, 360px);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cp-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

.cp-toast--success {
  border-color: rgba(34, 197, 94, 0.55);
}

.cp-toast--error {
  border-color: rgba(239, 68, 68, 0.55);
}

.cp-toast--info {
  border-color: rgba(56, 189, 248, 0.55);
}

.cp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .cp-card-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-card-actions {
    justify-content: stretch;
  }

  .cp-card-actions .cp-btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .cp-colab-cell__main {
    flex-direction: column;
  }

  .cp-colab-cell__rail {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 12px;
  }

  .cp-colab-run-hint {
    max-width: none;
    flex: 1 1 140px;
    text-align: left;
  }

  .cp-colab-run {
    width: 40px;
    min-height: 40px;
  }

  .cp-textarea {
    min-height: 260px;
  }

  #playLabPanelCodePlayground .cp-c-editor-wrap .CodeMirror,
  #playLabPanelCodePlayground .cp-c-editor-wrap .CodeMirror-scroll {
    min-height: 220px;
  }

  .cp-console--terminal {
    max-height: 55vh;
    min-height: 160px;
  }
}

/* -------------------------------------------------------------------------- */
/* PLAY LAB shell: sidebar + panels                                           */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Coding Quest (PLAY LAB panel)                                              */
/* -------------------------------------------------------------------------- */

#playLabPanelCodingQuest .cq-panel {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 27, 49, 0.96), rgba(16, 20, 38, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.12) inset,
    0 16px 40px rgba(2, 6, 23, 0.55);
}

#playLabPanelCodingQuest .cq-title {
  margin: 0 0 4px;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  letter-spacing: 0.04em;
  color: var(--arc-cyan, #00e5ff);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.32);
}

#playLabPanelCodingQuest .cq-desc {
  margin: 0;
  color: rgba(166, 182, 212, 0.95);
  font-size: 0.86rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-lang-bar {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(8, 13, 27, 0.55);
}

#playLabPanelCodingQuest .cq-lang-bar__label {
  display: inline-block;
  margin-right: 8px;
  color: #9fb3d5;
  font-size: 0.76rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-lang-select {
  border: 1px solid rgba(0, 229, 255, 0.36);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.95);
  color: #eaf5ff;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 140px;
}

#playLabPanelCodingQuest .cq-lang-bar__intro {
  margin: 8px 0 0;
  color: #bdefff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-lang-bar__context {
  margin: 4px 0 0;
  color: #9fb3d5;
  font-size: 0.74rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-tabs {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#playLabPanelCodingQuest .cq-tab {
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  background: rgba(18, 25, 46, 0.96);
  color: #b4ecff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-tab.is-active {
  background: linear-gradient(180deg, #ff4fd8, #d946ef);
  border-color: rgba(255, 79, 216, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 79, 216, 0.25);
}

#playLabPanelCodingQuest .cq-tab-panel {
  margin-top: 14px;
}

#playLabPanelCodingQuest .cq-blank-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#playLabPanelCodingQuest .cq-blank-toolbar--top {
  margin-bottom: 12px;
}

#playLabPanelCodingQuest .cq-blank-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background: rgba(8, 13, 27, 0.55);
}

#playLabPanelCodingQuest .cq-blank-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

#playLabPanelCodingQuest .cq-blank-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

#playLabPanelCodingQuest .cq-blank-filter-field--grow {
  flex: 1 1 180px;
}

#playLabPanelCodingQuest .cq-blank-filter-field__label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #93a9cd;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest .cq-blank-filter-select,
#playLabPanelCodingQuest .cq-blank-filter-input {
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(6, 12, 28, 0.85);
  color: #e8f1ff;
  font-size: 0.82rem;
  padding: 8px 10px;
  min-height: 36px;
}

#playLabPanelCodingQuest .cq-blank-view-toggle {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

#playLabPanelCodingQuest .cq-blank-view-toggle__label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #93a9cd;
  margin-right: 4px;
  align-self: center;
}

#playLabPanelCodingQuest .cq-blank-view-btn {
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  background: rgba(12, 18, 36, 0.9);
  color: #c5d4ef;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-blank-view-btn.is-active {
  border-color: rgba(255, 79, 216, 0.55);
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 79, 216, 0.35), rgba(180, 60, 200, 0.35));
}

#playLabPanelCodingQuest .cq-stamp-progress--blank-summary {
  max-width: 520px;
}

#playLabPanelCodingQuest .cq-blank-problem-grid-wrap {
  margin-top: 4px;
}

#playLabPanelCodingQuest .cq-level-grid.cq-blank-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px) {
  #playLabPanelCodingQuest .cq-level-grid.cq-blank-problem-grid:not(.cq-blank-problem-grid--list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #playLabPanelCodingQuest .cq-level-grid.cq-blank-problem-grid:not(.cq-blank-problem-grid--list) {
    grid-template-columns: 1fr;
  }
}

#playLabPanelCodingQuest .cq-blank-problem-grid--list {
  grid-template-columns: 1fr;
  gap: 10px;
}

#playLabPanelCodingQuest .cq-blank-problem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(10, 16, 32, 0.82);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  text-align: left;
}

#playLabPanelCodingQuest .cq-blank-problem-card:hover:not(.is-locked):not([data-cq-stamp-state="locked"]) {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

#playLabPanelCodingQuest .cq-blank-problem-card.is-active {
  border-color: rgba(255, 79, 216, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.35) inset,
    0 0 22px rgba(255, 79, 216, 0.2);
}

#playLabPanelCodingQuest .cq-blank-problem-card.is-completed {
  border-color: rgba(120, 220, 160, 0.42);
}

#playLabPanelCodingQuest .cq-blank-problem-card[data-cq-stamp-state="locked"],
#playLabPanelCodingQuest .cq-blank-problem-card.is-locked {
  opacity: 0.52;
  cursor: not-allowed;
  filter: grayscale(0.15);
}

#playLabPanelCodingQuest .cq-blank-problem-card.is-hidden {
  display: none !important;
}

#playLabPanelCodingQuest .cq-blank-problem-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

#playLabPanelCodingQuest .cq-blank-problem-card__id {
  font-size: 0.74rem;
  font-weight: 800;
  color: #9fb3d5;
}

#playLabPanelCodingQuest .cq-blank-problem-card__lv {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #041018;
  background: linear-gradient(135deg, #7ee8ff, #00e5ff);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

#playLabPanelCodingQuest .cq-blank-problem-card__status {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #dbe8ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#playLabPanelCodingQuest .cq-blank-problem-card__status--done {
  color: #c8ffd8;
  border-color: rgba(120, 220, 160, 0.45);
  background: rgba(80, 200, 140, 0.15);
}

#playLabPanelCodingQuest .cq-blank-problem-card__status--progress {
  color: #ffe6a8;
  border-color: rgba(255, 200, 120, 0.45);
  background: rgba(255, 170, 60, 0.12);
}

#playLabPanelCodingQuest .cq-blank-problem-card__status--new {
  color: #bce8ff;
}

#playLabPanelCodingQuest .cq-blank-problem-card__status--locked {
  color: #a8b2c9;
}

#playLabPanelCodingQuest .cq-blank-problem-card__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.35;
  color: #f4f8ff;
}

#playLabPanelCodingQuest .cq-blank-problem-card__cat {
  margin: 0;
  font-size: 0.78rem;
  color: #93a9cd;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-blank-problem-card__lang {
  margin: 0;
  font-size: 0.76rem;
  color: #7ee8ff;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-blank-problem-card__lock-msg {
  margin: 0;
  font-size: 0.74rem;
  color: #b8c4df;
}

#playLabPanelCodingQuest .cq-blank-problem-grid--list .cq-blank-problem-card {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

#playLabPanelCodingQuest .cq-blank-problem-grid--list .cq-blank-problem-card__main {
  flex: 1 1 220px;
}

#playLabPanelCodingQuest .cq-blank-problem-grid--list .cq-blank-problem-card__head {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
}

#playLabPanelCodingQuest .cq-blank-problem-grid--list .cq-blank-problem-card__status {
  margin-left: 0;
}

#playLabPanelCodingQuest .cq-stamp-progress {
  width: 100%;
  margin-bottom: 12px;
}

#playLabPanelCodingQuest .cq-stamp-progress--algo {
  flex: 1 1 100%;
  min-width: 200px;
}

#playLabPanelCodingQuest .cq-stamp-progress__label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #c5d4ef;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-stamp-progress__track {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#playLabPanelCodingQuest .cq-stamp-progress__fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7ee8ff, #ff4fd8);
  transition: width 0.35s ease;
}

#playLabPanelCodingQuest .cq-stamp-badge {
  display: block;
  width: fit-content;
  margin: 0 0 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-stamp-badge--done {
  background: rgba(80, 200, 140, 0.22);
  border: 1px solid rgba(120, 220, 160, 0.45);
  color: #b8f5c8;
}

#playLabPanelCodingQuest .cq-stamp-badge--open {
  background: rgba(255, 140, 60, 0.18);
  border: 1px solid rgba(255, 180, 80, 0.45);
  color: #ffd8a8;
}

#playLabPanelCodingQuest .cq-level-card.is-stamp-locked,
#playLabPanelCodingQuest .cq-problem-card.is-stamp-locked {
  opacity: 0.48;
}

#playLabPanelCodingQuest .cq-level-card.is-stamp-unlocked,
#playLabPanelCodingQuest .cq-problem-card.is-stamp-unlocked {
  border-color: rgba(255, 170, 60, 0.78) !important;
  box-shadow:
    0 0 0 2px rgba(255, 170, 60, 0.28) inset,
    0 0 18px rgba(255, 170, 60, 0.2) !important;
}

#playLabPanelCodingQuest .cq-level-card[data-cq-stamp-state="locked"],
#playLabPanelCodingQuest .cq-problem-card[data-cq-stamp-state="locked"] {
  cursor: not-allowed;
}

#playLabPanelCodingQuest .cq-problem-card__lock-msg {
  margin: 8px 0 0;
  color: #8aa3c8;
  font-size: 0.74rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-catalog-loading {
  margin: 0 0 8px;
}

#playLabPanelCodingQuest .cq-level-card[data-cq-stamp-state="unlocked"],
#playLabPanelCodingQuest .cq-level-card[data-cq-stamp-state="completed"],
#playLabPanelCodingQuest .cq-problem-card[data-cq-stamp-state="unlocked"],
#playLabPanelCodingQuest .cq-problem-card[data-cq-stamp-state="completed"] {
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-btn--compact {
  padding: 6px 10px;
  font-size: 0.72rem;
}

#playLabPanelCodingQuest .cq-level-card__badge--done {
  display: block;
  margin: 0 0 6px;
  padding: 4px 8px;
  border-radius: 8px;
  width: fit-content;
  background: rgba(80, 200, 140, 0.2);
  border: 1px solid rgba(120, 220, 160, 0.45);
  color: #b8f5c8;
  font-size: 0.72rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-level-card__lock {
  display: block;
  margin: 0 0 6px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest .cq-level-card__lock-msg {
  margin: 0 0 10px;
  color: #8aa3c8;
  font-size: 0.74rem;
  line-height: 1.4;
}

#playLabPanelCodingQuest .cq-level-card.is-locked {
  opacity: 0.52;
}

#playLabPanelCodingQuest .cq-btn:disabled,
#playLabPanelCodingQuest .cq-btn[disabled]:not(.cq-btn--locked) {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

#playLabPanelCodingQuest .cq-btn--locked {
  opacity: 0.42;
  cursor: not-allowed;
}

#playLabPanelCodingQuest .cq-feedback-prompt--title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#playLabPanelCodingQuest .cq-level-card,
#playLabPanelCodingQuest .cq-problem-card,
#playLabPanelCodingQuest .cq-sample-question,
#playLabPanelCodingQuest .cq-judge-preview {
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 14px;
  background: rgba(8, 13, 27, 0.72);
  padding: 8px 10px;
}

#playLabPanelCodingQuest .cq-level-card {
  position: relative;
}

#playLabPanelCodingQuest .cq-level-card.is-completed:not(.is-locked) {
  border-color: rgba(120, 220, 160, 0.38);
  box-shadow: 0 0 12px rgba(80, 200, 140, 0.12);
}

#playLabPanelCodingQuest .cq-level-card.is-active {
  border-color: rgba(255, 79, 216, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.35) inset,
    0 0 18px rgba(255, 79, 216, 0.18);
  background: rgba(34, 14, 46, 0.55);
}

#playLabPanelCodingQuest .cq-level-card__level {
  margin: 0 0 4px;
  color: #7ee8ff;
  font-size: 0.74rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-level-card__title,
#playLabPanelCodingQuest .cq-problem-card h3,
#playLabPanelCodingQuest .cq-sample-question h3,
#playLabPanelCodingQuest .cq-judge-preview h3 {
  margin: 0 0 6px;
  color: #ffe600;
  font-size: 0.95rem;
}

#playLabPanelCodingQuest .cq-level-card__desc,
#playLabPanelCodingQuest .cq-problem-card__desc,
#playLabPanelCodingQuest .cq-judge-preview__notice {
  margin: 0 0 4px;
  color: #c5d4ef;
  font-size: 0.82rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-level-card__meta,
#playLabPanelCodingQuest .cq-problem-card__meta {
  margin: 0 0 6px;
  color: #93a9cd;
  font-size: 0.75rem;
}

#playLabPanelCodingQuest .cq-btn {
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 180, 220, 0.2);
  color: #e8fbff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-btn--primary {
  background: linear-gradient(180deg, rgba(0, 180, 220, 0.35), rgba(0, 120, 180, 0.45));
}

#playLabPanelCodingQuest .cq-btn--secondary {
  background: rgba(18, 22, 42, 0.95);
  color: #ffd9f8;
  border-color: rgba(255, 79, 216, 0.35);
}

#playLabPanelCodingQuest .cq-btn--start {
  background: rgba(255, 79, 216, 0.18);
  border-color: rgba(255, 79, 216, 0.4);
}

#playLabPanelCodingQuest .cq-sample-question {
  margin-top: 8px;
}

#playLabPanelCodingQuest .cq-sample-question.cq-blank-solve {
  padding: 8px 10px;
}

#playLabPanelCodingQuest .cq-blank-meta {
  margin: 0 0 4px;
  color: #93a9cd;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest .cq-blank-mission {
  margin: 0 0 4px;
  color: #e8f1ff;
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-blank-inline-hint {
  margin: 0 0 6px;
  color: #8aa3c8;
  font-size: 0.74rem;
  line-height: 1.4;
}

#playLabPanelCodingQuest .cq-blank-expected-inline {
  margin: 0 0 8px;
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(6, 20, 40, 0.55);
  color: #a8e6c5;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

#playLabPanelCodingQuest .cq-sample-question__prompt {
  margin: 0 0 8px;
  color: #d8eaff;
  font-size: 0.84rem;
}

#playLabPanelCodingQuest .cq-sample-question__guide {
  margin: 0 0 10px;
  color: #9fb3d5;
  font-size: 0.78rem;
}

#playLabPanelCodingQuest .cq-blank-solve__heading {
  margin: 2px 0 6px;
  color: #ffe600;
  font-size: 1rem;
}

#playLabPanelCodingQuest .cq-blank-block {
  margin: 0 0 14px;
}

#playLabPanelCodingQuest .cq-blank-block__label {
  margin: 0 0 6px;
  color: #7ee8ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#playLabPanelCodingQuest .cq-blank-instruction {
  margin: 0;
  color: #e8f1ff;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

#playLabPanelCodingQuest .cq-blank-expected-pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 40, 60, 0.45);
  border: 1px solid rgba(0, 229, 255, 0.28);
  color: #c5ffd0;
  font-size: 0.86rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

#playLabPanelCodingQuest .cq-blank-code-guide {
  margin: 0 0 10px;
  color: #ffd89a;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
}

#playLabPanelCodingQuest .cq-blank-lang-note {
  margin: 0 0 10px;
  color: #8aa3c8;
  font-size: 0.76rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-hint-panel--block {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(80, 60, 20, 0.25);
  border: 1px solid rgba(255, 200, 120, 0.28);
}

#playLabPanelCodingQuest .cq-hint-panel__title {
  margin: 0 0 6px;
  color: #ffd89a;
  font-size: 0.78rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-hint-panel__body {
  margin: 0;
  color: #e8f1ff;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

#playLabPanelCodingQuest .cq-quest-meta {
  margin: 0 0 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#playLabPanelCodingQuest .cq-progress-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(10, 18, 36, 0.7);
  color: #bdefff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest .cq-code-panel {
  margin: 0 0 8px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #0a0e1a;
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.1) inset,
    0 8px 22px rgba(2, 6, 23, 0.35);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#playLabPanelCodingQuest .cq-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

#playLabPanelCodingQuest .cq-code-line-number {
  width: 22px;
  flex: 0 0 22px;
  text-align: right;
  color: #6f86ae;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#playLabPanelCodingQuest .cq-code-content {
  color: #d8f7ff;
  font-size: 0.86rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
  white-space: pre;
}

#playLabPanelCodingQuest .cq-sample-question__form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

#playLabPanelCodingQuest .cq-sample-question__label {
  color: #9fb3d5;
  font-size: 0.74rem;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-search-wrap input {
  border: 1px solid rgba(0, 229, 255, 0.36);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.95);
  color: #eaf5ff;
  padding: 8px 10px;
  font-size: 0.82rem;
}

#playLabPanelCodingQuest .cq-inline-blank {
  display: inline-block;
  min-width: 120px;
  max-width: 180px;
  height: 34px;
  padding: 4px 10px;
  margin: 0 2px;
  border: 2px solid #38dfff;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  vertical-align: baseline;
}

#playLabPanelCodingQuest .cq-inline-blank:focus {
  outline: none;
  border-color: #12b7ff;
  box-shadow: 0 0 0 3px rgba(18, 183, 255, 0.22);
}

#playLabPanelCodingQuest .cq-inline-blank.is-correct {
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

#playLabPanelCodingQuest .cq-inline-blank.is-wrong {
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}

#playLabPanelCodingQuest .cq-feedback,
#playLabPanelCodingQuest .cq-inline-note {
  margin: 8px 0 0;
  min-height: 0;
  color: #d8eaff;
  font-size: 0.8rem;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-feedback.cq-feedback--blank-result[hidden] {
  display: none !important;
  margin: 0;
  padding: 0;
  border: none;
}

#playLabPanelCodingQuest .cq-feedback.cq-feedback--compact {
  padding: 6px 9px;
  font-size: 0.76rem;
  font-weight: 600;
}

#playLabPanelCodingQuest .cq-feedback-actions--main {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

#playLabPanelCodingQuest .cq-feedback-actions--sub {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#playLabPanelCodingQuest .cq-feedback-action--primary {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 180, 220, 0.4), rgba(0, 120, 180, 0.52));
  border-color: rgba(0, 229, 255, 0.55);
}

#playLabPanelCodingQuest .cq-feedback-action--sub {
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.88;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(12, 18, 36, 0.75);
  color: #b8cce8;
}

#playLabPanelCodingQuest .cq-blank-result-msg {
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
}

#playLabPanelCodingQuest .cq-blank-result-msg--ok {
  color: #86efac;
  font-size: 0.82rem;
}

#playLabPanelCodingQuest .cq-blank-result-msg--bad {
  color: #fecaca;
  font-size: 0.82rem;
}

#playLabPanelCodingQuest .cq-blank-result-msg--detail {
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 0.74rem;
  color: #fde68a;
}

body.modal-open {
  overflow: hidden;
}

#cqBlankResultModalRoot:not(.is-hidden) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  z-index: 9999;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(15, 23, 42, 0.55);
}

#cqBlankResultModalRoot.is-hidden {
  display: none !important;
}

/* Dimming is on the root; shade kept in DOM for compatibility */
#cqBlankResultModalRoot .cq-blank-result-modal__shade {
  display: none;
}

#cqBlankResultModalRoot .cq-blank-result-modal__dialog {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(380px, calc(100vw - 36px));
  padding: 28px 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(22, 30, 52, 0.98), rgba(12, 16, 32, 0.99));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.45);
  text-align: center;
  pointer-events: auto;
}

#cqBlankResultModalRoot .cq-blank-result-modal__dialog--ok {
  border-color: rgba(34, 197, 94, 0.28);
}

#cqBlankResultModalRoot .cq-blank-result-modal__dialog--bad {
  border-color: rgba(248, 113, 113, 0.28);
}

#cqBlankResultModalRoot .cq-blank-result-modal__reset {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(14, 20, 40, 0.85);
  color: #b8cce8;
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

#cqBlankResultModalRoot .cq-blank-result-modal__reset:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: #e8fbff;
  background: rgba(20, 32, 56, 0.95);
}

#cqBlankResultModalRoot .cq-blank-result-modal__badge-row {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

#cqBlankResultModalRoot .cq-blank-result-modal__badge[hidden] {
  display: none !important;
}

#cqBlankResultModalRoot .cq-blank-result-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 2rem;
  line-height: 1;
}

#cqBlankResultModalRoot .cq-blank-result-modal__badge--ok {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

#cqBlankResultModalRoot .cq-blank-result-modal__badge--bad {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.38);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.12);
}

#cqBlankResultModalRoot .cq-blank-result-modal__body {
  margin: 0 0 22px;
  min-height: 3.2em;
}

#cqBlankResultModalRoot .cq-blank-result-modal__line {
  margin: 0;
  line-height: 1.45;
}

#cqBlankResultModalRoot .cq-blank-result-modal__line--primary {
  font-size: 1.05rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.01em;
}

#cqBlankResultModalRoot .cq-blank-result-modal__line--secondary {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b8c5dc;
}

#cqBlankResultModalRoot .cq-blank-result-modal__line--secondary[hidden] {
  display: none !important;
}

#cqBlankResultModalRoot .cq-blank-result-modal__footer {
  margin: 0;
}

#cqBlankResultModalRoot .cq-blank-result-modal__cta {
  width: 100%;
  padding: 12px 18px;
  min-height: 48px;
  font-size: 0.92rem;
  font-weight: 900;
  border-radius: 12px;
  border-color: rgba(0, 229, 255, 0.5);
  background: linear-gradient(180deg, rgba(0, 200, 240, 0.42), rgba(0, 120, 190, 0.55));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 4px 14px rgba(0, 180, 220, 0.22);
}

#cqBlankResultModalRoot .cq-blank-result-modal__dialog--bad .cq-blank-result-modal__cta {
  border-color: rgba(251, 191, 36, 0.42);
  background: linear-gradient(180deg, rgba(200, 120, 50, 0.55), rgba(140, 70, 35, 0.68));
  color: #fffbeb;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 4px 14px rgba(200, 100, 40, 0.2);
}

#cqBlankResultModalRoot .cq-blank-result-modal__cta:hover {
  filter: brightness(1.05);
}

#playLabPanelCodingQuest .cq-btn--ghost {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.35);
  color: #9fb3d5;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-btn--ghost:hover {
  border-color: rgba(255, 79, 216, 0.45);
  color: #ffd9f8;
}

#playLabPanelCodingQuest .cq-feedback.is-correct {
  color: #86efac;
}

#playLabPanelCodingQuest .cq-feedback.is-wrong {
  color: #fca5a5;
}

#playLabPanelCodingQuest .cq-feedback {
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
}

#playLabPanelCodingQuest .cq-feedback--success {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(20, 83, 45, 0.25);
}

#playLabPanelCodingQuest .cq-feedback--error {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(127, 29, 29, 0.25);
}

#playLabPanelCodingQuest .cq-feedback__message {
  line-height: 1.5;
  color: #dbeafe;
}

#playLabPanelCodingQuest .cq-feedback-prompt {
  margin: 0.65em 0 0;
  font-weight: 800;
  color: #fde68a;
  font-size: 0.84rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-feedback-prompt--sub {
  margin: 0.35em 0 0;
  font-weight: 700;
  color: #9fb3d5;
  font-size: 0.76rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-feedback-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#playLabPanelCodingQuest .cq-feedback-action {
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
  background: rgba(18, 25, 46, 0.95);
  color: #b4ecff;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-feedback-action:hover {
  border-color: rgba(255, 79, 216, 0.55);
  color: #ffd9f8;
}

#playLabPanelCodingQuest .cq-hint-box {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(120, 53, 15, 0.24);
  color: #fde68a;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-quest-view[hidden] {
  display: none !important;
}

#playLabPanelCodingQuest .cq-solve-nav {
  margin: 0 0 12px;
}

#playLabPanelCodingQuest .cq-judge-pick-hint--list {
  margin: 10px 0 0;
  color: #8aa3c8;
  font-size: 0.74rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-problem-toolbar {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  justify-content: space-between;
}

#playLabPanelCodingQuest .cq-problem-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#playLabPanelCodingQuest .cq-filter-btn {
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  background: rgba(18, 25, 46, 0.96);
  color: #b4ecff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

#playLabPanelCodingQuest .cq-filter-btn.is-active {
  border-color: rgba(255, 79, 216, 0.58);
  background: rgba(255, 79, 216, 0.2);
  color: #ffd9f8;
}

#playLabPanelCodingQuest .cq-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #9fb3d5;
  font-size: 0.72rem;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-problem-card {
  position: relative;
}

#playLabPanelCodingQuest .cq-problem-card__selected {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 216, 0.55);
  background: rgba(255, 79, 216, 0.18);
  color: #ffd9f8;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#playLabPanelCodingQuest .cq-problem-card.is-active {
  border-color: rgba(94, 234, 212, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.35) inset,
    0 0 20px rgba(94, 234, 212, 0.12);
  background: rgba(12, 36, 42, 0.55);
}

#playLabPanelCodingQuest .cq-problem-card.is-active .cq-problem-card__selected {
  display: inline-flex;
  align-items: center;
}

#playLabPanelCodingQuest .cq-problem-card.is-hidden {
  display: none;
}

#playLabPanelCodingQuest .cq-judge-preview {
  margin-top: 12px;
}

#playLabPanelCodingQuest .cq-judge-screen-title {
  margin: 0 0 8px;
  color: #ffe600;
  font-size: 1rem;
}

#playLabPanelCodingQuest .cq-judge-pick-hint {
  margin: 0 0 12px;
  color: #9fb3d5;
  font-size: 0.8rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-judge-solve-body[hidden] {
  display: none !important;
}

#playLabPanelCodingQuest .cq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#playLabPanelCodingQuest .cq-judge-preview__notice {
  white-space: pre-line;
}

#playLabPanelCodingQuest .cq-judge-selected {
  margin: 0 0 10px;
}

#playLabPanelCodingQuest .cq-judge-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

#playLabPanelCodingQuest .cq-judge-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(10, 22, 40, 0.85);
  color: #b4ecff;
  font-size: 0.68rem;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-judge-badge--diff {
  border-color: rgba(255, 79, 216, 0.45);
  color: #ffd9f8;
}

#playLabPanelCodingQuest .cq-judge-problem-title {
  margin: 0;
  color: #ffe600;
  font-size: 0.95rem;
}

#playLabPanelCodingQuest .cq-judge-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
}

#playLabPanelCodingQuest .cq-judge-block__label {
  display: block;
  margin: 0 0 4px;
  color: #7ee8ff;
  font-size: 0.72rem;
}

#playLabPanelCodingQuest .cq-judge-block__body {
  margin: 0;
  color: #d8eaff;
  font-size: 0.8rem;
  line-height: 1.5;
}

#playLabPanelCodingQuest .cq-judge-sample {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: #0a0e1a;
  color: #d8f7ff;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

#playLabPanelCodingQuest .cq-judge-preview__grid--stub {
  margin-bottom: 10px;
  opacity: 0.65;
}

#playLabPanelCodingQuest .cq-judge-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#playLabPanelCodingQuest .cq-judge-actions--secondary {
  margin-top: 14px;
}

#playLabPanelCodingQuest .cq-algo-code {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 229, 255, 0.15);
}

#playLabPanelCodingQuest .cq-algo-code__title {
  margin: 0 0 8px;
  color: #7ee8ff;
  font-size: 0.85rem;
}

#playLabPanelCodingQuest .cq-algo-lang-sync-note {
  margin: 0 0 10px;
  color: #9fb3d5;
  font-size: 0.72rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-algo-skeleton-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: rgba(0, 40, 60, 0.25);
  color: #c5d8f0;
  font-size: 0.72rem;
  line-height: 1.5;
}

#playLabPanelCodingQuest .cq-algo-code__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 8px;
}

#playLabPanelCodingQuest .cq-algo-lang-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9fb3d5;
  font-size: 0.76rem;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-algo-lang-select {
  border: 1px solid rgba(0, 229, 255, 0.36);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.95);
  color: #eaf5ff;
  padding: 6px 10px;
  font-size: 0.8rem;
}

#playLabPanelCodingQuest .cq-algo-code__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#playLabPanelCodingQuest .cq-algo-editor-wrap {
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  overflow: hidden;
  background: #0a0e1a;
}

#playLabPanelCodingQuest .cq-algo-editor-wrap .CodeMirror {
  height: auto;
  min-height: 200px;
  font-size: 0.82rem;
}

#playLabPanelCodingQuest .cq-algo-result {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.42);
}

#playLabPanelCodingQuest .cq-algo-result__title {
  margin: 0 0 8px;
  color: #ffe600;
  font-size: 0.85rem;
}

#playLabPanelCodingQuest .cq-algo-result__idle {
  margin: 0;
  color: #9fb3d5;
  font-size: 0.78rem;
}

#playLabPanelCodingQuest .cq-algo-result__msg {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
  color: #dbeafe;
}

#playLabPanelCodingQuest .cq-algo-result__summary {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: #b8d4f5;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest .cq-algo-result__msg--ok {
  color: #86efac;
}

#playLabPanelCodingQuest .cq-algo-result__msg--err {
  color: #fca5a5;
}

#playLabPanelCodingQuest .cq-algo-result__msg--pending {
  color: #fde68a;
}

#playLabPanelCodingQuest .cq-algo-result__msg--warn {
  color: #fde68a;
}

#playLabPanelCodingQuest .cq-algo-result__sub {
  margin: 0 0 8px;
  color: #9fb3d5;
  font-size: 0.76rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-algo-result__note {
  margin: 0 0 8px;
  color: #7ee8ff;
  font-size: 0.74rem;
  font-weight: 700;
}

#playLabPanelCodingQuest .cq-algo-result__prompt {
  margin: 4px 0 0;
  font-weight: 800;
  color: #fde68a;
  font-size: 0.78rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-algo-result__prompt--sub {
  margin: 2px 0 8px;
  font-weight: 700;
  color: #9fb3d5;
  font-size: 0.72rem;
  line-height: 1.45;
}

#playLabPanelCodingQuest .cq-algo-result__completion {
  margin-top: 6px;
}

#playLabPanelCodingQuest .cq-algo-result-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#playLabPanelCodingQuest .cq-algo-result-actions .cq-algo-result-action {
  font-size: 0.74rem;
  padding: 7px 12px;
}

#playLabPanelCodingQuest .cq-algo-result__block {
  margin-top: 8px;
}

#playLabPanelCodingQuest .cq-algo-result__label {
  display: block;
  margin-bottom: 4px;
  color: #93a9cd;
  font-size: 0.7rem;
}

#playLabPanelCodingQuest .cq-algo-result__pre {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0a0e1a;
  border: 1px solid rgba(0, 229, 255, 0.15);
  color: #d8f7ff;
  font-size: 0.76rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

#playLabPanelCodingQuest .cq-algo-result__pre--err {
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

#playLabPanelCodingQuest .cq-algo-result__link {
  color: #7ee8ff;
  font-weight: 800;
}

#playLabPanelCodingQuest .cq-judge-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#playLabPanelCodingQuest .cq-judge-preview__item {
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.4);
  color: #9fb3d5;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  #playLabPanelCodingQuest .cq-level-grid,
  #playLabPanelCodingQuest .cq-problem-list,
  #playLabPanelCodingQuest .cq-judge-preview__grid {
    grid-template-columns: 1fr;
  }

  #playLabPanelCodingQuest .cq-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #playLabPanelCodingQuest .cq-tab {
    white-space: nowrap;
  }

  #playLabPanelCodingQuest .cq-sample-question__form {
    flex-direction: row;
    align-items: center;
  }

  #playLabPanelCodingQuest .cq-inline-blank {
    min-width: 108px;
    max-width: 140px;
  }

  #playLabPanelCodingQuest .cq-btn--primary,
  #playLabPanelCodingQuest .cq-btn--secondary,
  #playLabPanelCodingQuest .cq-btn--start {
    width: auto;
  }
}

/* 전체 폭: 좌우 패딩 제거(데스크톱). 모바일은 아래 900px 구간에서 복구 */
.play-lab-page.keyboard-race-page {
  padding-left: 0;
  padding-right: 0;
  --play-game-intro-height-desktop: clamp(560px, calc(100vh - 180px), 760px);
  --play-game-intro-height-desktop-compact: min(78vh, 760px);
  --play-game-intro-height-mobile: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 120px));
}

/* PLAY LAB 웹(/keyboard-race): 페이지 캔버스를 패널·사이드바와 동일 다크 톤으로 */
main.keyboard-race-page.play-lab-page:not(.app-play-lab-solo) {
  background: linear-gradient(165deg, #0a0e1c 0%, #050810 48%, #080c18 100%);
}

.play-lab-shell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* PLAY LAB shell — sidebar tokens (arcade panels와 동일 계열) */
.play-lab-page.keyboard-race-page .play-lab-shell {
  --pl-cyan: #00e5ff;
  --pl-sidebar-border: rgba(0, 229, 255, 0.28);
  --pl-sidebar-divider: rgba(0, 229, 255, 0.14);
  --pl-nav-muted: #94a3b8;
  --pl-nav-text: #cbd5e1;
  --pl-nav-hover-bg: rgba(15, 23, 42, 0.72);
  --pl-nav-hover-border: rgba(0, 229, 255, 0.22);
  --pl-nav-active-text: #a5f3fc;
  --pl-section-label: rgba(148, 163, 184, 0.88);
}

.play-lab-sidebar {
  --play-lab-sidebar-w: 240px;
  flex: 0 0 var(--play-lab-sidebar-w);
  width: var(--play-lab-sidebar-w);
  align-self: flex-start;
  position: sticky;
  top: 96px;
  border-radius: 20px;
  border: 1px solid var(--pl-sidebar-border, rgba(0, 229, 255, 0.28));
  background: linear-gradient(
    180deg,
    rgba(23, 27, 49, 0.98) 0%,
    rgba(14, 18, 36, 0.99) 55%,
    rgba(10, 14, 28, 1) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.08) inset,
    0 0 24px rgba(0, 229, 255, 0.08),
    0 12px 32px rgba(2, 6, 23, 0.55);
  padding: 14px 12px;
  overflow: visible;
  max-height: none;
  transition: flex-basis 0.28s ease, width 0.28s ease, padding 0.28s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.play-lab-sidebar.is-collapsed {
  --play-lab-sidebar-w: 72px;
  padding-left: 8px;
  padding-right: 8px;
}

.play-lab-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pl-sidebar-divider, rgba(0, 229, 255, 0.14));
  min-height: 40px;
}

.play-lab-sidebar__brand {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-cyan, #00e5ff);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.32);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.28s ease;
  max-width: 160px;
}

.play-lab-sidebar.is-collapsed .play-lab-sidebar__brand {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

.play-lab-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 229, 255, 0.32);
  background: rgba(8, 13, 27, 0.82);
  color: #7dd3fc;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.play-lab-collapse-btn:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.5);
  color: #a5f3fc;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.18);
}

.play-lab-collapse-btn__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.play-lab-collapse-btn__label {
  white-space: nowrap;
}

.play-lab-sidebar.is-collapsed .play-lab-collapse-btn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.play-lab-sidebar.is-collapsed .play-lab-sidebar__head {
  justify-content: center;
  flex-direction: column;
  border-bottom-color: var(--pl-sidebar-divider, rgba(0, 229, 255, 0.12));
}

.play-lab-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.play-lab-nav__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.play-lab-nav__section + .play-lab-nav__section {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--pl-sidebar-divider, rgba(0, 229, 255, 0.12));
}

.play-lab-nav__section-heading {
  margin: 0;
  padding: 4px 4px 0 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pl-section-label, rgba(148, 163, 184, 0.88));
  line-height: 1.3;
}

.play-lab-nav__section:first-child .play-lab-nav__section-heading {
  padding-top: 0;
}

.play-lab-nav__section-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.play-lab-sidebar.is-collapsed .play-lab-nav__section-heading {
  display: none;
}

.play-lab-sidebar.is-collapsed .play-lab-nav__section + .play-lab-nav__section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.play-lab-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid rgba(51, 65, 85, 0.55);
  border-radius: 12px;
  padding: 11px 12px;
  margin: 0;
  background: rgba(8, 13, 27, 0.5);
  color: var(--pl-nav-muted, #94a3b8);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.play-lab-nav__item:hover {
  background: var(--pl-nav-hover-bg, rgba(15, 23, 42, 0.72));
  border-color: var(--pl-nav-hover-border, rgba(0, 229, 255, 0.22));
  color: var(--pl-nav-text, #cbd5e1);
}

.play-lab-nav__item.is-active {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.14), rgba(99, 102, 241, 0.1));
  border-color: rgba(0, 229, 255, 0.48);
  color: var(--pl-nav-active-text, #a5f3fc);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.22) inset,
    0 0 18px rgba(0, 229, 255, 0.16);
  min-height: 52px;
  padding: 11px 12px;
  margin: 0;
}

.play-lab-nav__item.is-active .play-lab-nav__icon {
  color: #67e8f9;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
}

.play-lab-nav__icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
  color: #64748b;
  transition: color 0.15s ease, filter 0.15s ease;
}

.play-lab-nav__item:hover .play-lab-nav__icon {
  color: #94a3b8;
}

.play-lab-mobile-intro {
  display: none;
}

.play-lab-nav__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.play-lab-nav__desc {
  display: none;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.85);
}

.play-lab-nav__item.is-active .play-lab-nav__desc {
  color: rgba(165, 243, 252, 0.75);
}

.play-lab-nav__label--compact {
  display: none;
}

.play-lab-nav__tab-emoji {
  display: none;
}

.play-lab-nav__icon--desktop {
  display: inline-flex;
}

.play-lab-nav__label {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease, max-width 0.28s ease;
  max-width: 200px;
}

.play-lab-sidebar.is-collapsed .play-lab-nav__item {
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}

.play-lab-sidebar.is-collapsed .play-lab-nav__item.is-active {
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.28) inset,
    0 0 14px rgba(0, 229, 255, 0.22);
}

.play-lab-sidebar.is-collapsed .play-lab-nav__label {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

.play-lab-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  align-self: flex-start;
  width: 100%;
}

.play-lab-panel {
  display: none;
}

/* Bootstrap (and similar) use [hidden]{display:none!important}. Two-class rule must win
   so an active PLAY LAB panel stays visible even if the hidden attribute is out of sync. */
.play-lab-panel.is-active {
  display: block !important;
}

/* 비활성 패널: 다른 게임 intro/배경이 아래에 이어 보이지 않도록 완전 격리
   (게임별 #id 선택자 display 규칙이 .play-lab-panel 보다 specificity 높을 때 대비) */
.play-lab-main > .play-lab-panel:not(.is-active) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.play-lab-panel .keyboard-race-wrap,
.play-lab-panel .word-drop-wrap {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .play-lab-sidebar {
    border-radius: 0 20px 20px 0;
  }

  .play-lab-main {
    padding-right: clamp(12px, 2vw, 28px);
  }

  /* 사이드바: 메인 콘텐츠 높이와 분리 — 그리드로 열 위치 고정 */
  .play-lab-page.keyboard-race-page .play-lab-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .play-lab-page.keyboard-race-page .play-lab-sidebar {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    align-self: start;
    position: sticky;
    top: 96px;
    width: var(--play-lab-sidebar-w, 240px);
    max-height: calc(100vh - 108px);
    overflow: visible;
  }

  .play-lab-page.keyboard-race-page .play-lab-main {
    grid-column: 2;
    grid-row: 1;
    flex: none;
    align-self: start;
    min-width: 0;
    width: 100%;
  }

  .play-lab-page.keyboard-race-page .play-lab-nav__item,
  .play-lab-page.keyboard-race-page .play-lab-nav__item.is-active {
    min-height: 52px;
    margin: 0;
    padding: 11px 12px;
  }

  /* 게임 타이틀(인트로): 패널·래퍼 높이 통일 — Word Drop 랭킹 보드 등이 아래로 밀지 않게 */
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .kb-shell,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap {
    height: min(78vh, 760px);
    max-height: min(78vh, 760px);
    overflow: hidden;
  }
}

/* PC 넓은 화면 — 사이드바 제외 메인 영역·게임 보드 최대 활용 (모바일 미적용) */
@media (min-width: 1200px) {
  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo) {
    --play-lab-sidebar-w: 220px;
    --play-game-board-min-h: clamp(560px, calc(100vh - 128px), 820px);
    --play-game-stage-h: clamp(580px, calc(100vh - 108px), 860px);
  }

  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo) .play-lab-shell {
    align-items: stretch;
    gap: 14px;
    min-height: calc(100dvh - 88px);
  }

  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo) .play-lab-sidebar {
    width: 220px;
    flex: 0 0 220px;
  }

  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo) .play-lab-main {
    align-self: stretch;
    width: 100%;
    max-width: none;
    padding-right: 10px;
    min-width: 0;
  }

  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo) .play-lab-panel.is-active {
    width: 100%;
    max-width: none;
  }

  /* Keyboard Race — 플레이 중 */
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen:not(.is-hidden)) .keyboard-race-wrap {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    min-height: var(--play-game-stage-h);
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen:not(.is-hidden)) #krGameScreen,
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen:not(.is-hidden)) #krRaceMode {
    width: 100%;
    max-width: none;
    min-height: var(--play-game-board-min-h);
  }

  /* Word Drop — 플레이 중 */
  #playLabPanelWordDrop.is-active:has(#wdGameScreen:not(.is-hidden)) .word-drop-wrap {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    min-height: var(--play-game-stage-h);
  }

  #playLabPanelWordDrop.is-active:has(#wdGameScreen:not(.is-hidden)) #wdGameScreen {
    width: 100%;
    max-width: none;
    min-height: var(--play-game-board-min-h);
  }

  /* Keyboard Beat — 플레이 중 (패널·보드 높이는 keyboard_beat.css에서 세부 조정) */
  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo):has(
      #playLabPanelKeyboardBeat.is-active #kbGame:not(.is-hidden)
    )
    .play-lab-shell {
    align-items: stretch;
    min-height: calc(100dvh - 88px);
    max-height: calc(100dvh - 88px);
  }

  .play-lab-page.keyboard-race-page:not(.app-play-lab-solo):has(
      #playLabPanelKeyboardBeat.is-active #kbGame:not(.is-hidden)
    )
    .play-lab-main {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame:not(.is-hidden)) {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: var(--play-game-stage-h);
    height: var(--play-game-stage-h);
  }
}

.play-lab-placeholder {
  max-width: none;
  margin: 0;
  padding: clamp(36px, 6vw, 72px) 24px;
  text-align: center;
  background: var(--kr-card, #fff);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.1);
}

.play-lab-placeholder__icon {
  font-size: 3rem;
  color: var(--kr-primary, #2563eb);
  opacity: 0.85;
  display: block;
  margin: 0 auto 16px;
}

.play-lab-placeholder__title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--kr-text, #0f172a);
}

.play-lab-placeholder__msg {
  margin: 0;
  font-size: 1.05rem;
  color: var(--kr-muted, #475569);
}

@media (max-width: 900px) {
  .play-lab-page.keyboard-race-page {
    padding-left: 0;
    padding-right: 0;
  }

  .play-lab-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .play-lab-main {
    align-self: stretch;
    width: 100%;
  }

  /* 가로 칩 메뉴 비활성 — 드로어 전용 (파일 말미 블록에서 상세 정의) */
  .play-lab-shell > .play-lab-sidebar:not(.play-lab-drawer) .play-lab-submenu {
    display: none !important;
  }

  .play-lab-menu,
  .play-lab-nav.play-lab-nav--feature-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 48px;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .play-lab-menu::-webkit-scrollbar,
  .play-lab-nav.play-lab-nav--feature-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .play-lab-menu-group-title,
  .play-lab-nav__section-heading,
  .play-lab-intro,
  .play-lab-mobile-intro,
  .play-lab-sidebar__head,
  .play-lab-sidebar-title,
  .play-lab-sidebar-desc {
    display: none !important;
  }

  .play-lab-nav__section {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: none;
  }

  .play-lab-nav__section + .play-lab-nav__section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .play-lab-nav__section-items {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
  }

  .play-lab-menu-item,
  .play-lab-nav__item,
  .play-lab-menu-item.is-active,
  .play-lab-nav__item.is-active {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: auto;
    width: auto;
    min-width: 96px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 16px;
    margin: 0;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.55);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-align: center;
    overflow: visible;
    background: rgba(8, 13, 27, 0.62);
    color: #cbd5e1;
    box-shadow: none;
    box-sizing: border-box;
  }

  .play-lab-menu-item:hover,
  .play-lab-nav__item:hover {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(0, 229, 255, 0.28);
    color: #e2e8f0;
  }

  .play-lab-menu-item.is-active,
  .play-lab-nav__item.is-active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(99, 102, 241, 0.12));
    border-color: rgba(0, 229, 255, 0.52);
    color: #a5f3fc;
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.24) inset,
      0 0 14px rgba(0, 229, 255, 0.22);
  }

  .play-lab-sidebar .play-lab-nav__label {
    opacity: 1 !important;
    max-width: none !important;
    pointer-events: auto !important;
  }

  .play-lab-nav__icon--desktop {
    display: none !important;
  }

  .play-lab-nav__tab-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .play-lab-nav__tab-emoji--code {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  .play-lab-nav__card-body {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    min-width: 0;
  }

  .play-lab-nav__label {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    font-size: 0.8125rem;
    line-height: 1;
    font-weight: 700;
    color: inherit;
  }

  .play-lab-nav__label--desktop {
    display: none !important;
  }

  .play-lab-nav__label--compact {
    display: inline;
  }

  .play-lab-nav__desc {
    display: none !important;
  }

  .play-lab-nav__item.is-active .play-lab-nav__label--compact {
    color: #eaf2ff;
  }

  .play-lab-menu-item:focus-visible,
  .play-lab-nav__item:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.55);
    outline-offset: 2px;
  }

  .play-lab-sidebar.is-collapsed {
    --play-lab-sidebar-w: 100% !important;
  }

  .play-lab-sidebar.is-collapsed .play-lab-sidebar__brand,
  .play-lab-sidebar.is-collapsed .play-lab-nav__label {
    opacity: 1;
    max-width: none;
    pointer-events: auto;
  }

  .play-lab-sidebar.is-collapsed .play-lab-collapse-btn__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  .play-lab-sidebar.is-collapsed .play-lab-sidebar__head {
    flex-direction: row;
    justify-content: space-between;
  }

  .play-lab-collapse-btn {
    display: none;
  }

  /* PLAY LAB 모바일 — 상단 칩 메뉴 + 풀블리드 히어로 + 하단 액션(넷플릭스형) */
  .play-lab-page.keyboard-race-page .play-lab-shell {
    --pl-mobile-stack: 150px;
    --pl-mobile-hero-min: max(420px, calc(100dvh - var(--pl-mobile-stack)));
  }

  .play-lab-sidebar {
    padding-left: 0;
    padding-right: 0;
  }

  .play-lab-submenu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 20;
    width: 100%;
    flex-shrink: 0;
    height: 56px;
    margin: 0;
    padding: 10px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #070b16;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    box-sizing: border-box;
  }

  .play-lab-submenu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .play-lab-submenu .play-lab-menu,
  .play-lab-submenu .play-lab-nav.play-lab-nav--feature-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: nowrap;
  }

  .play-lab-main {
    overflow: visible;
    min-height: auto;
  }

  .play-lab-panel.is-active {
    display: block !important;
    overflow: visible;
    min-height: auto;
    height: auto;
    max-height: none;
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .word-drop-wrap,
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-shell {
    display: block;
    width: 100%;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap,
  #playLabPanelKeyboardRace .pl-game-menu-stage,
  #playLabPanelWordDrop .pl-game-menu-stage {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #playLabPanelKeyboardRace .kb-menu-screen.play-lab-hero,
  #playLabPanelWordDrop .kb-menu-screen.play-lab-hero {
    position: relative !important;
    inset: auto !important;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-shell {
    min-height: var(--pl-mobile-hero-min) !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 0;
    background: transparent;
  }

  #playLabPanelKeyboardBeat .kb-menu-screen.play-lab-hero {
    position: relative !important;
    inset: auto !important;
  }

  .play-lab-panel.is-active .pl-game-menu-stage,
  #playLabPanelKeyboardBeat.is-active .kb-setup--start {
    display: block;
    position: relative;
    width: calc(100% + 2 * clamp(10px, 3vw, 16px));
    min-height: var(--pl-mobile-hero-min);
    height: auto;
    max-height: none;
    margin: 0 calc(-1 * clamp(10px, 3vw, 16px));
    padding: 0;
    overflow: visible;
    background: transparent;
    box-sizing: border-box;
  }

  .play-lab-panel.is-active .kb-menu-screen.play-lab-hero {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    min-height: var(--pl-mobile-hero-min);
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    box-sizing: border-box;
    z-index: 1;
  }

  .play-lab-panel.is-active .play-lab-hero .kb-menu-screen__bg,
  .play-lab-panel.is-active .play-lab-hero .play-lab-hero-bg,
  .play-lab-panel.is-active .play-lab-hero .kb-menu-screen__shade {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .play-lab-panel.is-active .play-lab-hero .play-lab-hero-shade,
  .play-lab-panel.is-active .play-lab-hero .kb-menu-screen__shade {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }

  .play-lab-panel.is-active .play-lab-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.55) 42%,
      rgba(0, 0, 0, 0.88) 100%
    );
  }

  .play-lab-panel.is-active .play-lab-hero .kb-menu-screen__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .play-lab-panel.is-active .play-lab-title:not(.play-lab-mobile-title) {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: clamp(28px, 8vw, 44px) 20px 0;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-align: center;
    color: #f0f9ff;
    text-shadow:
      0 2px 24px rgba(0, 0, 0, 0.85),
      0 0 40px rgba(0, 229, 255, 0.25);
    pointer-events: none;
  }

  .play-lab-panel.is-active .play-lab-actions:not(.playlab-hero__actions) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--kr-intro-cta-inset, max(28px, calc(24px + env(safe-area-inset-bottom, 0px))));
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none;
  }

  .play-lab-panel.is-active .play-lab-actions:not(.playlab-hero__actions) > * {
    pointer-events: auto;
  }

  .play-lab-panel.is-active .play-lab-hero .kb-menu-screen__cta,
  .play-lab-panel.is-active .play-lab-hero .play-lab-start-cta {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  .play-lab-panel.is-active .play-lab-tool-actions:not(.playlab-hero-tools__cluster--right),
  .play-lab-panel.is-active .play-lab-tool-actions.play-lab-tools:not(.playlab-hero-tools__cluster--right) {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }

  .play-lab-panel.is-active .play-lab-tool-btn:not(.play-lab-hero-ranking),
  .play-lab-panel.is-active .play-lab-tool-actions .kb-game-hud-btn:not(.play-lab-hero-ranking) {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    width: auto;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(6, 10, 28, 0.78);
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: #e0f7ff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
  }

  .play-lab-panel.is-active .play-lab-tool-btn:not(.play-lab-hero-ranking) .kb-game-hud-btn__icon {
    font-size: 1rem;
    line-height: 1;
  }

  #playLabPanelKeyboardRace .kb-menu-screen__hud,
  #playLabPanelWordDrop .kb-menu-screen__hud,
  #playLabPanelKeyboardBeat .play-lab-hero .play-lab-tool-actions:not(.playlab-hero-tools__cluster--right) {
    position: static;
    top: auto;
    right: auto;
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0;
    background: transparent;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-shell,
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-layout,
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-main {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 타이틀 화면: 푸터가 첫 뷰포트에 끼어들지 않도록 메인·히어로 높이 확보 */
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) {
    min-height: var(--pl-mobile-hero-min);
  }

  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardRace.is-active #krGameScreen.is-hidden) .play-lab-main,
  .play-lab-page.keyboard-race-page:has(#playLabPanelWordDrop.is-active #wdGameScreen.is-hidden) .play-lab-main,
  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardBeat.is-active #kbGame.is-hidden) .play-lab-main {
    min-height: var(--pl-mobile-hero-min);
  }
}

@media (min-width: 901px) {
  .play-lab-panel .pl-game-menu-stage,
  #playLabPanelKeyboardBeat .kb-setup--start {
    position: relative;
  }

  .play-lab-panel .kb-menu-screen.play-lab-hero {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  .play-lab-panel .play-lab-hero::after {
    display: none;
  }

  .play-lab-panel .play-lab-hero .play-lab-hero-shade,
  .play-lab-panel .play-lab-hero .kb-menu-screen__shade {
    opacity: 1;
    pointer-events: none;
  }

  .play-lab-panel .play-lab-title {
    display: none;
  }

  .play-lab-panel .play-lab-actions:not(.playlab-hero__actions) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(clamp(18px, 4.5vh, 36px) + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    pointer-events: none;
  }

  .play-lab-panel .play-lab-actions:not(.playlab-hero__actions) > * {
    pointer-events: auto;
  }

  .play-lab-panel .play-lab-start-cta,
  .play-lab-panel .play-lab-hero .kb-menu-screen__cta {
    position: static;
    width: min(92%, 320px);
    transform: none;
  }

  .play-lab-panel .play-lab-tool-actions:not(.playlab-hero-tools__cluster--right),
  .play-lab-panel .play-lab-tool-actions.play-lab-tools:not(.playlab-hero-tools__cluster--right) {
    position: absolute;
    z-index: 5;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    width: auto;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    pointer-events: auto;
  }

  .play-lab-panel .play-lab-tool-actions .kb-game-hud-btn,
  .play-lab-panel .play-lab-tool-btn {
    flex-direction: column;
    min-width: 52px;
    width: auto;
    height: auto;
    min-height: 52px;
    padding: 6px 10px;
    border-radius: 12px;
  }
}

/* =============================================================================
   Coding Quest — PLAY LAB arcade theme (#codingQuestRoot.cq-theme-arcade)
   Code Playground와 동일 계열 다크/네온 셸; 빈칸 풀이의 문제 설명만 밝은 카드.
   ============================================================================= */

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade.cq-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 12px 14px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-header--compact {
  margin: 0 0 4px;
  padding: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-title {
  margin: 0 0 2px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--arc-cyan, #00e5ff);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-desc--short {
  margin: 0;
  color: rgba(166, 182, 212, 0.95);
  font-size: 0.82rem;
  line-height: 1.35;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-lang-bar--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(8, 12, 28, 0.45);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-lang-bar__label {
  color: rgba(166, 182, 212, 0.9);
  font-size: 0.68rem;
  font-weight: 800;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-lang-select {
  border: 1px solid rgba(0, 229, 255, 0.36);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.95);
  color: #eaf5ff;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-lang-bar__context {
  margin: 0;
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-tabs--compact {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-tabs--compact .cq-tab {
  padding: 8px 14px;
  font-size: 0.8rem;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-tab-panel {
  margin-top: 12px;
  padding-top: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade #cqBlankListWrap {
  background: rgba(8, 13, 27, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 16px;
  padding: 10px 12px 12px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.08) inset,
    0 10px 28px rgba(2, 6, 23, 0.35);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-stamp-progress--compact {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-stamp-progress--compact .cq-stamp-progress__label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #bdefff;
  line-height: 1.35;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-stamp-progress--compact .cq-stamp-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-list-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-view-toggle--minimal {
  display: inline-flex;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 10, 24, 0.85);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-view-toggle--minimal .cq-blank-view-btn {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: transparent;
  color: #93a9cd;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-view-toggle--minimal .cq-blank-view-btn.is-active {
  background: linear-gradient(180deg, rgba(255, 79, 216, 0.35), rgba(124, 58, 237, 0.25));
  color: #fff;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters-toggle {
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.9);
  color: #c5d4ef;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters-toggle:hover {
  border-color: rgba(255, 79, 216, 0.45);
  color: #fff;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters--collapsible.is-collapsed .cq-blank-filters__inner {
  display: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more--menu {
  position: relative;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.92);
  padding: 0 2px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more__summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: #93a9cd;
  padding: 6px 8px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more__summary::-webkit-details-marker {
  display: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more__body {
  padding: 4px 8px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more__btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #fca5a5;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  padding: 6px 4px;
  cursor: pointer;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-more__btn:hover {
  color: #fecaca;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade #cqBlankSolveWrap {
  display: flex;
  flex-direction: column;
  min-height: min(72dvh, 640px);
  max-height: calc(100dvh - 5.25rem);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: linear-gradient(180deg, rgba(10, 14, 30, 0.98), rgba(5, 8, 18, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.1) inset,
    0 18px 44px rgba(2, 6, 23, 0.55);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-root--algo-solve-active.cq-theme-arcade .cq-algo-lang-sync-note {
  display: none !important;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-root--blank-solve-active.cq-theme-arcade,
#playLabPanelCodingQuest #codingQuestRoot.cq-root--algo-solve-active.cq-theme-arcade {
  padding: 8px 10px 12px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 12px;
  background: rgba(6, 10, 22, 0.92);
  border-bottom: 1px solid rgba(0, 229, 255, 0.18);
  flex-shrink: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-back {
  flex-shrink: 0;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 10px;
  background: rgba(12, 18, 36, 0.95);
  color: #c5f3ff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-back:hover {
  border-color: rgba(255, 79, 216, 0.45);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-meta-strip {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(186, 210, 255, 0.92);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tab--subnav {
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(8, 12, 28, 0.75);
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #93a9cd;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tab--subnav:hover {
  color: #e0f2fe;
  border-color: rgba(0, 229, 255, 0.45);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tab--subnav.is-active {
  color: #fff;
  border-color: rgba(167, 139, 250, 0.65);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(56, 189, 248, 0.28));
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: transparent;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-layout-grid--split {
  display: grid;
  grid-template-columns: minmax(240px, 0.4fr) minmax(280px, 0.6fr);
  gap: 8px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

@media (max-width: 900px) {
  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade #cqBlankSolveWrap {
    min-height: 0;
    max-height: none;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-topbar {
    flex-wrap: wrap;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-meta-strip {
    white-space: normal;
    flex: 1 1 100%;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-subnav {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-layout-grid--split {
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-workbench__main {
    min-height: 0;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-board {
    min-height: 200px;
    max-height: none;
  }

  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-run-result {
    max-height: min(36dvh, 280px);
  }
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f4f6fa;
  border: 1px solid #dce3ef;
  border-radius: 12px;
  padding: 10px 12px 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

@media (min-width: 901px) {
  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem {
    height: 100%;
    align-self: stretch;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-main-title {
  flex-shrink: 0;
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.35;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tabpanels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tabpanel-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-block-title {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-problem-block {
  margin-bottom: 8px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-problem-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.48;
  color: #334155;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-expected {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  background: #eef1f7;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #dce3ef;
  color: #1e293b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-hint {
  color: #475569;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-tabpanel-empty {
  margin: 6px 0 8px;
  font-size: 0.82rem;
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log {
  max-height: 280px;
  overflow-y: auto;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log__item {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid #dce3ef;
  background: #f1f4f9;
  font-size: 0.8rem;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log__item.is-ok {
  border-color: #86efac;
  background: #ecfdf5;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log__item.is-bad {
  border-color: #fca5a5;
  background: #fef2f2;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log__time {
  font-size: 0.72rem;
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log__body {
  color: #1e293b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror {
  max-height: 320px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-run-result__empty--mirror {
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-right.cq-blank-solve-workbench {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: linear-gradient(180deg, rgba(12, 16, 34, 0.98), rgba(6, 8, 20, 0.99));
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.1) inset,
    0 10px 28px rgba(2, 6, 23, 0.42);
  overflow: hidden;
}

@media (min-width: 901px) {
  #playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-board {
    flex: 1 1 0;
    min-height: 140px;
    max-height: none;
  }
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-workbench__main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(90deg, #0f172a, #1e1b4b);
  color: #bae6fd;
  font-size: 0.76rem;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-head__label {
  font-weight: 800;
  letter-spacing: 0.04em;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-head__note {
  opacity: 0.88;
  font-size: 0.7rem;
  color: #c4b5fd;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-board {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(36dvh, 320px);
  overflow: auto;
  background: #070b14;
  padding: 10px 12px 12px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel.cq-code-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-code-line-number {
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-code-content {
  color: #e2e8f0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-inline-blank {
  background: #111c2e;
  border: 1px solid rgba(129, 140, 248, 0.42);
  color: #f1f5f9;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.1);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-inline-blank:focus {
  outline: 2px solid rgba(56, 189, 248, 0.5);
  outline-offset: 1px;
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.18);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-inline-blank.is-correct {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-code-panel .cq-inline-blank.is-wrong {
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(8, 11, 26, 0.95);
  border-top: 1px solid rgba(0, 229, 255, 0.15);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--primary {
  border-color: rgba(0, 229, 255, 0.55);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.65), rgba(14, 165, 233, 0.4));
  color: #f0f9ff;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.22);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--secondary {
  border-color: rgba(255, 79, 216, 0.4);
  background: rgba(15, 23, 42, 0.95);
  color: #fbcfe8;
  font-weight: 800;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--secondary:hover {
  border-color: rgba(255, 79, 216, 0.65);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.6);
  color: #c4b5fd;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-actions .cq-btn--ghost:hover {
  border-color: rgba(167, 139, 250, 0.55);
  color: #fff;
  background: rgba(76, 29, 149, 0.25);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-run-result {
  flex-shrink: 0;
  min-height: 72px;
  max-height: min(24dvh, 190px);
  overflow-y: auto;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #030712 0%, #0a0f1e 100%);
  border-top: 1px solid rgba(52, 211, 153, 0.12);
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.06);
  -webkit-overflow-scrolling: touch;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-run-result__head {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-run-result__empty {
  margin: 0 0 6px;
  font-size: 0.76rem;
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run {
  margin: 0;
  padding: 0;
  max-height: none;
  list-style: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  font-size: 0.78rem;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: rgba(15, 23, 42, 0.65);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__item.is-ok {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.35);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.12);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__item.is-ok .cq-blank-solve-log__body {
  color: #a7f3d0;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__item.is-bad {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.25);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.1);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__item.is-bad .cq-blank-solve-log__body {
  color: #fecaca;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-log--run .cq-blank-solve-log__time {
  font-size: 0.7rem;
  color: #94a3b8;
}

/* 테스트 결과 탭(왼쪽 밝은 카드) 안 미러 로그는 가독성용 라이트 스타일 */
#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__item {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__item.is-ok {
  border-color: #86efac;
  background: #ecfdf5;
  box-shadow: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__item.is-ok .cq-blank-solve-log__body {
  color: #14532d;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__item.is-bad {
  border-color: #fca5a5;
  background: #fef2f2;
  box-shadow: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__item.is-bad .cq-blank-solve-log__body {
  color: #991b1b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-left--problem .cq-blank-solve-log--mirror .cq-blank-solve-log__time {
  color: #64748b;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-solve-footnote--short {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 10px 8px;
  font-size: 0.7rem;
  color: #94a3b8;
  background: rgba(6, 8, 18, 0.9);
  border-top: 1px solid rgba(51, 65, 85, 0.5);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters {
  margin-bottom: 8px;
  padding: 0;
  border: none;
  background: transparent;
  gap: 8px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters:not(.is-collapsed) .cq-blank-filters__inner {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background: rgba(6, 10, 22, 0.75);
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filters__row {
  align-items: flex-end;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filter-field__label {
  color: #93a9cd;
  font-weight: 800;
  font-size: 0.7rem;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filter-select,
#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-filter-input {
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 10px;
  background: rgba(6, 12, 28, 0.85);
  color: #e8f1ff;
  box-shadow: none;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-catalog-loading {
  color: #93a9cd !important;
  margin: 4px 0 6px;
  font-size: 0.8rem;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-problem-grid--list .cq-blank-problem-card {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

#playLabPanelCodingQuest #codingQuestRoot.cq-theme-arcade .cq-blank-problem-grid--list .cq-blank-problem-card__title {
  flex: 1 1 100%;
}

/* Result modal — light dialog on dark route */
body.keyboard-race-route #cqBlankResultModalRoot:not(.is-hidden) {
  background: rgba(15, 23, 42, 0.45);
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__dialog {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__line--primary {
  color: #111827;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__line--secondary {
  color: #64748b;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__reset {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #64748b;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__cta {
  border: 1px solid #4f46e5;
  background: #4f46e5;
  color: #ffffff;
  box-shadow: none;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__dialog--bad .cq-blank-result-modal__cta {
  border-color: #6366f1;
  background: #4f46e5;
  color: #ffffff;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__badge--ok {
  color: #16a34a;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  box-shadow: none;
}

body.keyboard-race-route #cqBlankResultModalRoot .cq-blank-result-modal__badge--bad {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  box-shadow: none;
}

/* Coding Quest PLAY LAB panel: dark canvas behind arcade cq-panel */
#playLabPanelCodingQuest.play-lab-panel.is-active {
  background: linear-gradient(165deg, #0a0e1c 0%, #050810 55%, #080c18 100%);
  border-radius: 16px;
}

/* 패널별 활성 탭: 기본 .play-lab-nav__item.is-active 네온 스타일 공유 (밝은 카드 오버라이드 제거) */

/* -------------------------------------------------------------------------- */
/* Keyboard Beat (PLAY LAB)                                                   */
/* -------------------------------------------------------------------------- */

#playLabPanelKeyboardBeat.play-lab-panel.is-active {
  background: linear-gradient(165deg, #0a0e1c 0%, #050810 55%, #080c18 100%);
  border-radius: 16px;
}

#playLabPanelKeyboardBeat .kb-shell {
  margin: 0;
  padding: 10px 12px 14px;
  min-height: 0;
  background: linear-gradient(180deg, rgba(23, 27, 49, 0.96), rgba(16, 20, 38, 0.98));
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.12) inset,
    0 16px 40px rgba(2, 6, 23, 0.55);
}

#playLabPanelKeyboardBeat .kb-header {
  margin-bottom: 8px;
}

#playLabPanelKeyboardBeat .kb-title {
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--arc-cyan, #00e5ff);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

#playLabPanelKeyboardBeat .kb-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(166, 182, 212, 0.95);
}

#playLabPanelKeyboardBeat .kb-header.kb-header--with-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#playLabPanelKeyboardBeat .kb-header__text {
  flex: 1 1 200px;
  min-width: 0;
}

#playLabPanelKeyboardBeat .kb-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

#playLabPanelKeyboardBeat .kb-settings-open-btn {
  flex-shrink: 0;
  border: 1px solid rgba(0, 229, 255, 0.42);
  background: linear-gradient(180deg, rgba(30, 58, 138, 0.55), rgba(15, 23, 42, 0.95));
  color: #e0f7ff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.18) inset, 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#playLabPanelKeyboardBeat .kb-settings-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.22), 0 0 0 1px rgba(167, 139, 250, 0.28) inset;
}

#playLabPanelKeyboardBeat .kb-settings-open-btn__short {
  display: none;
}

@media (max-width: 520px) {
  #playLabPanelKeyboardBeat .kb-settings-open-btn__full {
    display: none;
  }

  #playLabPanelKeyboardBeat .kb-settings-open-btn__short {
    display: inline;
    font-size: 1.1rem;
    line-height: 1;
  }
}

.kb-ranking-open-btn {
  flex-shrink: 0;
  border: 1px solid rgba(255, 230, 0, 0.45);
  background: linear-gradient(180deg, rgba(40, 46, 78, 0.95), rgba(18, 22, 42, 0.98));
  color: var(--arc-yellow);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 79, 216, 0.15) inset, 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kb-ranking-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 230, 0, 0.75);
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.25), 0 0 0 1px rgba(255, 79, 216, 0.25) inset;
}

.kb-ranking-open-btn__short {
  display: none;
}

@media (max-width: 520px) {
  .kb-ranking-open-btn__full {
    display: none;
  }

  .kb-ranking-open-btn__short {
    display: inline;
  }
}

.kb-beat-ranking-layer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 16px 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.kb-beat-ranking-layer:not(.is-hidden) {
  pointer-events: auto;
}

.kb-beat-ranking-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.kb-beat-ranking-dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 900px);
  max-width: calc(100vw - 24px);
  max-height: min(calc(100vh - 120px), 680px);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: linear-gradient(180deg, #12162c, #0b0f1f);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 79, 216, 0.2) inset;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .kb-beat-ranking-layer {
    padding: 88px 12px 20px;
  }

  .kb-beat-ranking-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 108px);
  }
}

.kb-beat-ranking-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.22);
}

.kb-beat-ranking-dialog__head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--arc-yellow);
  letter-spacing: 0.05em;
}

.kb-beat-ranking-dialog__close {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--arc-text);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.kb-beat-ranking-dialog__close:hover {
  background: rgba(255, 79, 216, 0.25);
}

.kb-beat-ranking-dialog__body {
  padding: 12px 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.kb-beat-ranking-loading,
.kb-beat-ranking-empty {
  text-align: center;
  color: var(--arc-muted);
  padding: 24px 8px;
  font-size: 0.95rem;
}

.kb-beat-ranking-table-wrap {
  overflow-x: auto;
}

.kb-beat-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  color: var(--arc-text);
}

.kb-beat-ranking-table th,
.kb-beat-ranking-table td {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  text-align: left;
  white-space: nowrap;
}

.kb-beat-ranking-table th {
  color: var(--arc-cyan);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.kb-beat-ranking-table td:first-child,
.kb-beat-ranking-table th:first-child {
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-layout {
  display: block;
  width: 100%;
  max-width: 100%;
}

#playLabPanelKeyboardBeat .kb-main {
  min-width: 0;
  width: 100%;
}

#playLabPanelKeyboardBeat .kb-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

#playLabPanelKeyboardBeat .kb-shell:has(#kbGame.is-hidden) {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Keyboard Beat: 전용 라우트에서도 시작 화면 표시 (keyboard_beat.css · JS showSetup) */

/* 게임 전용 라우트 auto_start: /play-lab/keyboard-race · /app/play-lab/keyboard-race — 타이틀(소개) 화면 숨김 */
body.app-pl-auto-start #playLabPanelKeyboardRace #krIntroScreen,
.play-lab-shell[data-play-lab-auto-start="1"] #playLabPanelKeyboardRace #krIntroScreen {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 게임 전용 라우트 auto_start: /play-lab/word-drop · /app/play-lab/word-drop */
body.app-pl-auto-start #playLabPanelWordDrop #wdIntroScreen,
.play-lab-shell[data-play-lab-auto-start="1"] #playLabPanelWordDrop #wdIntroScreen {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* PLAY LAB — 공통 설정·도움말 (가벼운 패널, 전체 화면 가이드와 분리) */
.playlab-settings-popover,
.playlab-help-popover {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(4, 8, 20, 0.42);
}

.playlab-settings-popover.is-hidden,
.playlab-help-popover.is-hidden {
  display: none;
}

.playlab-settings-popover__panel,
.playlab-help-popover__panel {
  width: min(360px, 94vw);
  max-height: min(88vh, 520px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: linear-gradient(180deg, rgba(18, 24, 42, 0.97), rgba(10, 14, 28, 0.98));
  box-shadow:
    0 0 24px rgba(34, 211, 238, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.45);
  color: #e8f4ff;
}

.playlab-settings-popover__head,
.playlab-help-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.playlab-settings-popover__title,
.playlab-help-popover__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f0f9ff;
}

.playlab-settings-popover__close,
.playlab-help-popover__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: rgba(8, 13, 27, 0.7);
  color: #cbd5e1;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.playlab-settings-popover__body {
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playlab-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 13, 27, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  cursor: pointer;
}

.playlab-settings-row--select {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}

.playlab-settings-row__label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #dbeafe;
}

.playlab-settings-toggle {
  width: 44px;
  height: 24px;
  accent-color: #22d3ee;
  cursor: pointer;
}

.playlab-settings-select {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(6, 10, 24, 0.9);
  color: #f0f9ff;
  font-size: 0.9rem;
  font-weight: 600;
}

.playlab-settings-popover__note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
}

.playlab-settings-popover__foot,
.playlab-help-popover__foot {
  padding: 10px 16px 14px;
  display: flex;
  justify-content: flex-end;
}

.playlab-help-popover__body {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #d8eaff;
}

.playlab-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 12600;
  transform: translateX(-50%) translateY(12px);
  max-width: min(320px, 90vw);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: rgba(10, 16, 32, 0.94);
  color: #f0f9ff;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.playlab-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.playlab-toast.is-hidden:not(.is-visible) {
  display: none;
}

/* PLAY LAB hero — 소개 버튼 (라벨 여유·PC/모바일 공통) */
#playLabPanelKeyboardRace .play-lab-hero-help-btn,
#playLabPanelWordDrop .play-lab-hero-help-btn,
#playLabPanelKeyboardBeat .play-lab-hero-help-btn,
.play-lab-hero-help-btn {
  min-width: 68px;
  padding-left: 12px;
  padding-right: 12px;
}

#playLabPanelKeyboardRace .play-lab-hero-help-btn .kb-game-hud-btn__label,
#playLabPanelWordDrop .play-lab-hero-help-btn .kb-game-hud-btn__label,
#playLabPanelKeyboardBeat .play-lab-hero-help-btn .kb-game-hud-btn__label {
  min-width: 2.2em;
  letter-spacing: -0.02em;
}

/* PLAY LAB hero — 상단 도구: 소개(좌) · 설정·랭킹(우) — Race · Beat · Drop 공통
   (hero 레이아웃은 기존 .kb-menu-screen absolute / 모바일 relative 규칙 유지 — position:relative 덮어쓰지 않음) */
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .play-lab-mobile-hero-bg,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .kb-menu-screen__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-actions,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-tools {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-actions-left,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-tools__cluster--left {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  bottom: auto;
  right: auto;
  z-index: 6;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-actions-right,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-tools__cluster--right {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: auto;
  left: auto;
  z-index: 6;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  width: auto;
  min-height: 0;
  pointer-events: auto;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  min-width: 0;
  width: auto;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: rgba(8, 18, 40, 0.72);
  background-image: none;
  border: 1px solid rgba(55, 190, 255, 0.45);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transform: none;
  opacity: 1;
  overflow: visible;
  cursor: pointer;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn:hover {
  border-color: rgba(55, 190, 255, 0.62);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.28);
  background: rgba(8, 18, 40, 0.82);
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn:active {
  transform: scale(0.98);
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn__icon,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn .kb-game-hud-btn__icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn__label,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero-action-btn .kb-game-hud-btn__label {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (min-width: 901px) {
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero__actions {
    bottom: clamp(36px, 5vh, 52px);
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-action-btn {
    padding: 0 14px;
    font-size: 16px;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-action-btn__label,
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-action-btn .kb-game-hud-btn__label {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------- */
/* PLAY LAB — 공통 히어로 · 시작하기 CTA (Race · Beat · Drop)                */
/* -------------------------------------------------------------------------- */

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero.kb-menu-screen,
:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero.play-lab-hero {
  overflow: hidden;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero__actions {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(28px, 4.5vh, 36px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  background: none;
  border: none;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-hero__actions > .playlab-start-btn {
  pointer-events: auto;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-start-btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 5;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 30vw, 320px);
  min-width: 260px;
  max-width: 320px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 20px;
  margin: 0;
  border-radius: 20px;
  border: 1px solid rgba(34, 211, 238, 0.55);
  background: linear-gradient(
    180deg,
    rgba(94, 234, 212, 0.78) 0%,
    rgba(34, 211, 238, 0.72) 48%,
    rgba(8, 145, 178, 0.82) 100%
  );
  color: #041018;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-start-btn:hover {
  border-color: rgba(34, 211, 238, 0.75);
  box-shadow:
    0 0 24px rgba(34, 211, 238, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

:is(
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
) .playlab-start-btn:active {
  transform: translateX(-50%) scale(0.98);
}

/* Keyboard Race — 시작하기 CTA (레드/오렌지 레이싱 톤, KR 전용) */
#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn {
  border: 1px solid rgba(255, 120, 60, 0.9);
  background: linear-gradient(
    135deg,
    rgba(40, 12, 12, 0.92) 0%,
    rgba(120, 28, 18, 0.88) 100%
  );
  color: #fff4d6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 18px rgba(255, 80, 40, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 0 10px rgba(255, 180, 80, 0.12),
    inset 0 1px 0 rgba(255, 220, 160, 0.22);
}

#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn:hover {
  border-color: rgba(255, 140, 70, 0.95);
  background: linear-gradient(
    135deg,
    rgba(80, 18, 12, 0.95) 0%,
    rgba(180, 48, 24, 0.92) 100%
  );
  color: #fff8e8;
  box-shadow:
    0 0 24px rgba(255, 90, 40, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(255, 210, 120, 0.18),
    inset 0 1px 0 rgba(255, 230, 180, 0.28);
}

#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn:active {
  transform: translateX(-50%) translateY(1px) scale(0.99);
}

@media (max-width: 900px) {
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero__actions {
    bottom: calc(clamp(20px, 3vh, 24px) + env(safe-area-inset-bottom, 0px));
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-start-btn {
    width: min(78vw, 320px);
    min-width: 220px;
    max-width: 320px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    font-size: 18px;
    border-radius: 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* PLAY LAB — 공통 게임 메인 메뉴 (Keyboard Race · Word Drop · Keyboard Beat) */
/* -------------------------------------------------------------------------- */

#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-header--in-game,
#playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .keyboard-race-header--in-game {
  display: none !important;
}

#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .kr-ranking-board,
#playLabPanelWordDrop:has(#wdGameScreen.is-hidden) #wdRankingBoard,
#playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .wd-ranking-board,
#playLabPanelWordDrop.is-active:has(#wdIntroScreen) #wdRankingBoard,
#playLabPanelWordDrop.is-active:has(#wdIntroScreen) .wd-ranking-board {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 데스크톱 전용 — 타이틀 카드(고정 높이·absolute). 모바일은 파일 말미 오버라이드 */
@media (min-width: 901px) {
#playLabPanelKeyboardRace.play-lab-panel:has(#krGameScreen.is-hidden),
#playLabPanelWordDrop.play-lab-panel:has(#wdGameScreen.is-hidden) {
  position: relative;
  min-height: var(--play-game-intro-height-desktop-compact, min(78vh, 760px));
  margin: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #050810;
}

#playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
#playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: min(78vh, 760px);
  max-height: min(78vh, 760px);
  margin-top: 0;
  overflow: hidden;
}

#playLabPanelKeyboardRace .pl-game-menu-stage,
#playLabPanelWordDrop .pl-game-menu-stage {
  position: relative;
  width: 100%;
  min-height: min(78vh, 760px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

#playLabPanelKeyboardRace .kb-menu-screen,
#playLabPanelWordDrop .kb-menu-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#playLabPanelKeyboardRace .kb-menu-screen__bg,
#playLabPanelWordDrop .kb-menu-screen__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#playLabPanelKeyboardRace .kb-menu-screen__bg-image--keyboard-race {
  position: absolute;
  inset: 0;
  background-color: #08061a;
  background-image: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#playLabPanelWordDrop .kb-menu-screen__bg-image--word-drop {
  position: absolute;
  inset: 0;
  background-color: #0a0818;
  background-image: url("../images/word_drop/title_screen_pc.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#playLabPanelKeyboardRace .kb-menu-screen__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 4, 14, 0.12) 0%,
    rgba(2, 4, 14, 0.02) 45%,
    rgba(2, 4, 14, 0.28) 78%,
    rgba(2, 4, 14, 0.55) 100%
  );
}

#playLabPanelWordDrop .kb-menu-screen__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 4, 14, 0.12) 0%,
    rgba(2, 4, 14, 0.02) 45%,
    rgba(2, 4, 14, 0.28) 78%,
    rgba(2, 4, 14, 0.55) 100%
  );
}

#playLabPanelKeyboardRace .kb-menu-screen__hud,
#playLabPanelWordDrop .kb-menu-screen__hud {
  position: absolute;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#playLabPanelKeyboardRace .kb-game-hud-btn,
#playLabPanelWordDrop .kb-game-hud-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(6, 10, 28, 0.72);
  color: #e0f7ff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    0 0 16px rgba(0, 229, 255, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 79, 216, 0.12);
  backdrop-filter: blur(6px);
  transition:
    transform 0.12s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#playLabPanelKeyboardRace .kb-game-hud-btn__icon,
#playLabPanelWordDrop .kb-game-hud-btn__icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}

#playLabPanelKeyboardRace .kb-game-hud-btn:hover,
#playLabPanelWordDrop .kb-game-hud-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow:
    0 0 22px rgba(0, 229, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

#playLabPanelKeyboardRace .kb-menu-screen__cta,
#playLabPanelWordDrop .kb-menu-screen__cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(36px, 5vh, 52px);
  transform: translateX(-50%);
  width: min(92%, 320px);
  display: flex;
  justify-content: center;
}

}

/* Word Drop — PC 타이틀(가로형 배경 · 최소 HUD) */
@media (min-width: 901px) {
  /* Keyboard Race intro — PC: app-height/모바일 높이 규칙 무효, CTA 히어로 하단 중앙 */
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroScreen.pl-game-menu-stage,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroHero.play-lab-mobile-hero {
    min-height: min(78vh, 760px) !important;
    height: min(78vh, 760px) !important;
    max-height: min(78vh, 760px) !important;
    padding-bottom: 0 !important;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .playlab-hero__actions,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .playlab-hero__actions.play-lab-mobile-actions {
    bottom: clamp(36px, 5vh, 52px) !important;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-mobile-start-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #playLabPanelKeyboardRace .kb-menu-screen__bg-image--keyboard-race {
    background-image: url("../images/keyboard_race/title_screen.png");
    background-position: center center;
  }

  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .kb-menu-screen__bg-image--word-drop {
    background-image: url("../images/word_drop/title_screen_pc.png");
    background-position: center center;
  }

  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .kb-menu-screen__shade {
    background: linear-gradient(
      180deg,
      rgba(2, 4, 14, 0.18) 0%,
      rgba(2, 4, 14, 0) 38%,
      rgba(2, 4, 14, 0.22) 72%,
      rgba(2, 4, 14, 0.62) 100%
    );
  }

}

@media (max-width: 900px) {
  /* 타이틀 화면 — 모바일 배경·그라데이션만 (레이아웃은 상단 play-lab 모바일 스택 규칙) */
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .keyboard-race-header,
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .kr-live-stats,
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .kr-ranking-board {
    display: none !important;
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden)
    .play-lab-hero
    .kb-menu-screen__bg-image--keyboard-race {
    background-image: url("../images/keyboard_race/title_screen_mobile.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .play-lab-hero .kb-menu-screen__shade {
    opacity: 0;
  }

  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .keyboard-race-header,
  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .wd-ranking-board {
    display: none !important;
  }

  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden)
    .play-lab-hero
    .kb-menu-screen__bg-image--word-drop {
    background-image: url("../images/word_drop/title_screen_mobile.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .play-lab-hero .kb-menu-screen__shade {
    opacity: 0;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .play-lab-hero .kb-menu-screen__bg-image {
    background-image: url("../images/keyboard_beat/title_screen_mobile.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .play-lab-hero .kb-menu-screen__shade {
    opacity: 0;
  }

  #playLabPanelKeyboardRace.is-active .play-lab-tool-actions .kb-game-hud-btn,
  #playLabPanelWordDrop.is-active .play-lab-tool-actions .kb-game-hud-btn,
  #playLabPanelKeyboardBeat.is-active .play-lab-tool-actions .kb-game-hud-btn {
    min-width: 92px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .play-lab-page.keyboard-race-page .play-lab-shell {
    --pl-mobile-stack: 148px;
  }

}

@media (max-width: 900px) and (orientation: portrait) {
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .kb-menu-screen__bg-image--keyboard-race,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .kb-menu-screen__bg-image--word-drop,
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .kb-menu-screen__bg-image {
    background-position: center center;
  }
}

/* Keyboard Beat — 타이틀 화면 (배경 이미지 + HUD 버튼) — 데스크톱 */
@media (min-width: 901px) {
#playLabPanelKeyboardBeat.play-lab-panel.is-active:has(#kbGame.is-hidden) {
  position: relative;
  min-height: var(--play-game-intro-height-desktop-compact, min(78vh, 760px));
  margin: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #050810;
}

#playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-header {
  display: none;
}

#playLabPanelKeyboardBeat.is-active .kb-shell:has(#kbGame.is-hidden) {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: var(--play-game-intro-height-desktop-compact, min(78vh, 760px));
  max-height: var(--play-game-intro-height-desktop-compact, min(78vh, 760px));
  overflow: hidden;
}

#playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-layout,
#playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-main {
  min-height: inherit;
  height: 100%;
}

#playLabPanelKeyboardBeat.is-active .kb-setup--start {
  position: relative;
  width: 100%;
  min-height: var(--play-game-intro-height-desktop-compact, min(78vh, 760px));
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

#playLabPanelKeyboardBeat .kb-menu-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#playLabPanelKeyboardBeat .kb-menu-screen__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#playLabPanelKeyboardBeat .kb-menu-screen__bg-image {
  position: absolute;
  inset: 0;
  background-color: #08061a;
  background-image: url("../images/keyboard_beat/title_screen.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#playLabPanelKeyboardBeat .kb-menu-screen__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 4, 14, 0.15) 0%,
    rgba(2, 4, 14, 0.05) 45%,
    rgba(2, 4, 14, 0.35) 78%,
    rgba(2, 4, 14, 0.72) 100%
  );
}

#playLabPanelKeyboardBeat .kb-menu-screen__hud {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 2vh, 16px);
  right: clamp(10px, 2vw, 16px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#playLabPanelKeyboardBeat .kb-game-hud-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(6, 10, 28, 0.72);
  color: #e0f7ff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    0 0 16px rgba(0, 229, 255, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 79, 216, 0.12);
  backdrop-filter: blur(6px);
  transition:
    transform 0.12s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#playLabPanelKeyboardBeat .kb-game-hud-btn__icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}

#playLabPanelKeyboardBeat .kb-game-hud-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow:
    0 0 22px rgba(0, 229, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

#playLabPanelKeyboardBeat .kb-game-hud-btn:active {
  transform: scale(0.97);
}

#playLabPanelKeyboardBeat .kb-menu-screen__cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(18px, 4.5vh, 36px);
  transform: translateX(-50%);
  width: min(92%, 320px);
  display: flex;
  justify-content: center;
}

}

#playLabPanelKeyboardBeat .kb-menu-screen__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  #playLabPanelKeyboardBeat.play-lab-panel.is-active:has(#kbGame:not(.is-hidden)) {
    border-radius: 11px;
  }

  #playLabPanelKeyboardBeat .kb-shell:has(#kbGame:not(.is-hidden)) {
    padding: 7px 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    box-shadow: 0 4px 16px rgba(2, 6, 23, 0.26), 0 0 0 1px rgba(255, 79, 216, 0.05) inset;
    background: linear-gradient(180deg, rgba(23, 27, 49, 0.96), rgba(16, 20, 38, 0.98));
  }

  body:not(.kb-mobile-playing) #playLabPanelKeyboardBeat:has(#kbGame:not(.is-hidden)) .kb-shell {
    padding-bottom: 8px;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat:has(#kbGame:not(.is-hidden)) .kb-shell {
    padding-bottom: 0 !important;
  }
}

/* 세로 화면: Beat 타이틀 배경 위치만 조정 (높이는 공통 모바일 히어로 규칙) */
@media (max-width: 900px) and (orientation: portrait) {
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .play-lab-hero .kb-menu-screen__bg-image {
    background-position: center center;
  }
}


.kb-settings-layer {
  position: fixed;
  inset: 0;
  z-index: 10049;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 16px 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.kb-settings-layer:not(.is-hidden) {
  pointer-events: auto;
}

.kb-settings-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.kb-settings-dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 440px);
  max-width: calc(100vw - 24px);
  max-height: min(calc(100vh - 120px), 640px);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: linear-gradient(180deg, #12162c, #0b0f1f);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 79, 216, 0.2) inset;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .kb-settings-layer {
    padding: 88px 12px 20px;
    align-items: flex-start;
  }

  .kb-settings-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
  }
}

.kb-settings-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.22);
}

.kb-settings-dialog__head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--arc-cyan, #00e5ff);
  letter-spacing: 0.04em;
}

.kb-settings-dialog__close {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--arc-text, #e8edf7);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.kb-settings-dialog__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.kb-settings-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kb-settings-future {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.45);
}

.kb-settings-future__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #93a9cd;
  margin-bottom: 4px;
}

.kb-settings-future__msg {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(166, 182, 212, 0.88);
}

.kb-settings-dialog__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0, 229, 255, 0.15);
  background: rgba(6, 10, 24, 0.6);
}

#playLabPanelKeyboardBeat .kb-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #93a9cd;
}

#playLabPanelKeyboardBeat .kb-field--keys-info {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  background: rgba(8, 12, 28, 0.55);
}

#playLabPanelKeyboardBeat .kb-settings-keys-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(186, 210, 255, 0.88);
}

#playLabPanelKeyboardBeat .kb-settings-current-keys {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
  color: rgba(0, 229, 255, 0.96);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

#playLabPanelKeyboardBeat .kb-seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#playLabPanelKeyboardBeat .kb-seg__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(12, 18, 36, 0.75);
  color: #c5d4ef;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

#playLabPanelKeyboardBeat .kb-seg__item:has(input:checked) {
  border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(56, 189, 248, 0.12));
  color: #fff;
}

#playLabPanelKeyboardBeat .kb-select {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  background: rgba(6, 12, 28, 0.9);
  color: #eaf5ff;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

#playLabPanelKeyboardBeat .kb-btn {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
}

#playLabPanelKeyboardBeat .kb-btn--primary {
  border-color: rgba(0, 229, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 180, 220, 0.35), rgba(0, 120, 180, 0.45));
  color: #e8fbff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.2);
}

#playLabPanelKeyboardBeat .kb-btn--primary:hover {
  filter: brightness(1.06);
}

#playLabPanelKeyboardBeat .kb-btn--secondary {
  border: 1px solid rgba(120, 180, 255, 0.38);
  background: rgba(14, 24, 52, 0.92);
  color: #eaf4ff;
  box-shadow: none;
}

#playLabPanelKeyboardBeat .kb-btn--secondary:hover {
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(20, 32, 68, 0.98);
  color: #ffffff;
  filter: none;
}

#playLabPanelKeyboardBeat .kb-btn--ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
  color: #c4b5fd;
}

#playLabPanelKeyboardBeat .kb-btn--ghost:hover {
  border-color: rgba(167, 139, 250, 0.55);
  color: #fff;
  background: rgba(76, 29, 149, 0.22);
}

#playLabPanelKeyboardBeat .kb-game {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: linear-gradient(180deg, rgba(4, 8, 22, 0.92), rgba(6, 10, 24, 0.96));
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.08);
  min-height: min(62vh, 560px);
  overflow: hidden;
}

#playLabPanelKeyboardBeat .kb-game-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 6px 6px;
  gap: 0;
}

#playLabPanelKeyboardBeat .kb-game:not(.is-hidden) .kb-game-stack {
  padding: 4px 6px 4px;
}

#playLabPanelKeyboardBeat .kb-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(51, 65, 85, 0.55);
  background: rgba(2, 6, 16, 0.5);
  overflow: hidden;
}

/* 플레이 HUD — 레인 위 오버레이 (공간 최소) */
#playLabPanelKeyboardBeat .kb-play-hud--overlay {
  position: absolute;
  top: max(6px, env(safe-area-inset-top, 0px));
  left: 8px;
  right: 8px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 4px 8px;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(6, 10, 24, 0.78), rgba(10, 14, 32, 0.62));
  border: 1px solid rgba(0, 229, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  min-height: 0;
  max-height: none;
}

#playLabPanelKeyboardBeat .kb-play-hud__zone {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

#playLabPanelKeyboardBeat .kb-play-hud__zone--left {
  flex: 1 1 30%;
  justify-content: flex-start;
}

#playLabPanelKeyboardBeat .kb-play-hud__zone--center {
  flex: 0 1 auto;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#playLabPanelKeyboardBeat .kb-play-hud__zone--right {
  flex: 1 1 36%;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px 6px;
}

#playLabPanelKeyboardBeat .kb-play-hud__level {
  font-size: clamp(0.62rem, 2.2vw, 0.72rem);
  font-weight: 700;
  line-height: 1.25;
  color: rgba(186, 230, 253, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#playLabPanelKeyboardBeat .kb-play-hud__k {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(100, 116, 139, 0.95);
  text-transform: uppercase;
}

#playLabPanelKeyboardBeat .kb-play-hud__zone--center .kb-play-hud__k {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

#playLabPanelKeyboardBeat .kb-play-hud__combo-n {
  font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  font-weight: 900;
  color: #f0abfc;
  text-shadow: 0 0 10px rgba(217, 70, 239, 0.4);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#playLabPanelKeyboardBeat .kb-play-hud__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

#playLabPanelKeyboardBeat .kb-play-hud__sep {
  color: rgba(100, 116, 139, 0.7);
  font-weight: 700;
  font-size: 0.75rem;
}

#playLabPanelKeyboardBeat .kb-play-hud__v {
  font-size: clamp(0.82rem, 2.8vw, 1rem);
  font-weight: 900;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#playLabPanelKeyboardBeat .kb-play-hud__v--time {
  color: #7ee8ff;
}

#playLabPanelKeyboardBeat .kb-play-hud__v--goal {
  color: #fcd34d;
}

#playLabPanelKeyboardBeat .kb-level-transition {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  pointer-events: none;
  background: rgba(2, 6, 20, 0.72);
  backdrop-filter: blur(4px);
}

#playLabPanelKeyboardBeat .kb-level-transition__title {
  margin: 0;
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #a7f3d0;
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}

#playLabPanelKeyboardBeat .kb-level-transition__sub {
  margin: 0;
  font-size: clamp(0.78rem, 2.8vw, 0.92rem);
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  color: rgba(226, 232, 240, 0.95);
}

#playLabPanelKeyboardBeat .kb-board > .kb-play-hud__speed-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 8;
  pointer-events: none;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(6, 12, 28, 0.72);
}

#playLabPanelKeyboardBeat .kb-play-hud__speed-val {
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #7dd3fc;
  letter-spacing: 0.02em;
}

#playLabPanelKeyboardBeat .kb-play-hud--overlay ~ .kb-combo-dock {
  display: none !important;
}

/* 플레이 중: HUD는 오버레이만 — 레인 보드는 보드 전체 높이 사용 */
#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-game-stack {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: block;
  overflow: hidden;
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-lane-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-lane {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-lane__stage {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-lane__line {
  bottom: max(
    12%,
    calc(28px + (var(--kb-n-lanes, 4) - 1) * 4px)
  );
}

#playLabPanelKeyboardBeat #kbGame:not(.is-hidden) .kb-board > .kb-play-hud__speed-badge {
  bottom: calc(15% + 52px);
  z-index: 9;
}

@media (max-width: 520px) {
  #playLabPanelKeyboardBeat .kb-play-hud--overlay {
    flex-wrap: wrap;
    padding: 4px 6px;
  }

  #playLabPanelKeyboardBeat .kb-play-hud__zone--left {
    flex: 1 1 100%;
    order: 1;
  }

  #playLabPanelKeyboardBeat .kb-play-hud__zone--center {
    order: 2;
    flex: 1 1 auto;
  }

  #playLabPanelKeyboardBeat .kb-play-hud__zone--right {
    order: 3;
    flex: 1 1 auto;
  }
}

#playLabPanelKeyboardBeat .kb-board__fx {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

#playLabPanelKeyboardBeat .kb-board--miss-shake {
  animation: kb-board-miss-shake 0.45s ease-out both;
}

#playLabPanelKeyboardBeat .kb-board--shake-soft {
  animation: kb-board-shake-soft 0.2s ease-out both;
}

@keyframes kb-board-miss-shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-6px, 0);
  }
  40% {
    transform: translate(6px, 0);
  }
  60% {
    transform: translate(-4px, 0);
  }
  80% {
    transform: translate(3px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes kb-board-shake-soft {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-3px);
  }
}

#playLabPanelKeyboardBeat .kb-center-judge {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.65);
  z-index: 12;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.35));
}

#playLabPanelKeyboardBeat .kb-center-judge.is-on {
  animation: kb-center-judge-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#playLabPanelKeyboardBeat .kb-center-judge.is-out {
  animation: kb-center-judge-out 0.45s ease-out forwards;
}

@keyframes kb-center-judge-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.5);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1);
  }
}

@keyframes kb-center-judge-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.92);
  }
}

#playLabPanelKeyboardBeat .kb-center-judge--perfect {
  font-size: clamp(1.75rem, 7vw, 3.1rem);
  color: #6ee7b7;
  text-shadow: 0 0 28px rgba(52, 211, 153, 0.75), 0 0 60px rgba(0, 229, 255, 0.35);
}

#playLabPanelKeyboardBeat .kb-center-judge--good {
  font-size: clamp(1.35rem, 5.5vw, 2.35rem);
  color: #fde047;
  text-shadow: 0 0 22px rgba(250, 204, 21, 0.55);
}

#playLabPanelKeyboardBeat .kb-center-judge--miss {
  font-size: clamp(1.25rem, 5vw, 2rem);
  color: #fb7185;
  text-shadow: 0 0 24px rgba(248, 113, 113, 0.65);
}

#playLabPanelKeyboardBeat .kb-hit-burst {
  position: absolute;
  bottom: calc(11% - 6px);
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-bottom: -6px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2);
}

#playLabPanelKeyboardBeat .kb-hit-burst.is-on {
  animation: kb-hit-burst-pop 0.55s ease-out forwards;
}

#playLabPanelKeyboardBeat .kb-hit-burst--perfect.is-on {
  animation-duration: 0.62s;
}

@keyframes kb-hit-burst-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(4.2);
    box-shadow: 0 0 0 28px rgba(0, 229, 255, 0);
  }
}

#playLabPanelKeyboardBeat .kb-hit-burst--perfect {
  background: radial-gradient(circle, #fff 0%, #6ee7b7 35%, transparent 70%);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.85), 0 0 48px rgba(0, 229, 255, 0.45);
}

#playLabPanelKeyboardBeat .kb-hit-burst--good {
  background: radial-gradient(circle, #fef9c3 0%, #facc15 40%, transparent 72%);
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.55);
}

#playLabPanelKeyboardBeat .kb-hit-burst--miss {
  background: radial-gradient(circle, #fecdd3 0%, #f43f5e 45%, transparent 75%);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.55);
}

#playLabPanelKeyboardBeat .kb-combo-dock {
  position: absolute;
  right: 3%;
  top: 28%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 20, 55, 0.55));
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.2);
  pointer-events: none;
}

#playLabPanelKeyboardBeat .kb-combo-dock.is-pop {
  animation: kb-combo-pop 0.22s ease-out;
}

@keyframes kb-combo-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

#playLabPanelKeyboardBeat .kb-combo-dock__label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #a78bfa;
}

#playLabPanelKeyboardBeat .kb-combo-dock__n {
  font-size: clamp(1.6rem, 6vw, 2.75rem);
  font-weight: 900;
  color: #fdf4ff;
  text-shadow: 0 0 20px rgba(217, 70, 239, 0.55), 0 0 40px rgba(0, 229, 255, 0.2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#playLabPanelKeyboardBeat .kb-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(2, 4, 12, 0.72);
  backdrop-filter: blur(6px);
  border-radius: inherit;
}

#playLabPanelKeyboardBeat .kb-result-panel {
  width: min(520px, 100%);
  max-width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 14px 18px 12px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(165deg, rgba(18, 22, 44, 0.98), rgba(10, 12, 28, 0.99));
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12) inset, 0 20px 50px rgba(2, 6, 23, 0.65);
  text-align: center;
  max-height: min(92vh, 600px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#playLabPanelKeyboardBeat .kb-result-panel__head {
  margin: 0 0 10px;
}

#playLabPanelKeyboardBeat .kb-result__title {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fde68a;
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}

#playLabPanelKeyboardBeat .kb-result__end-reason {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: #94a3b8;
  white-space: pre-line;
}

#playLabPanelKeyboardBeat .kb-result-stats--grid {
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-result-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 480px) {
  #playLabPanelKeyboardBeat .kb-result-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#playLabPanelKeyboardBeat .kb-result-stats__cell {
  padding: 8px 8px 9px;
  border-radius: 10px;
  background: rgba(6, 10, 22, 0.78);
  border: 1px solid rgba(51, 65, 85, 0.5);
  box-sizing: border-box;
}

#playLabPanelKeyboardBeat .kb-result-stats__lbl {
  display: block;
  margin: 0 0 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #64748b;
  text-transform: uppercase;
}

#playLabPanelKeyboardBeat .kb-result-stats__val {
  display: block;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

#playLabPanelKeyboardBeat .kb-result-stats__pgm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

#playLabPanelKeyboardBeat .kb-result-pgm-details {
  margin-top: 6px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.45);
  background: rgba(6, 10, 22, 0.55);
  padding: 0 8px;
}

#playLabPanelKeyboardBeat .kb-result-pgm-details__summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 6px 0;
}

#playLabPanelKeyboardBeat .kb-result-pgm-details__summary::-webkit-details-marker {
  display: none;
}

#playLabPanelKeyboardBeat .kb-result-stats__pgm--in-details {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 2px;
}

#playLabPanelKeyboardBeat .kb-result-stats__pgm-item {
  padding: 6px 4px 7px;
  border-radius: 10px;
  background: rgba(6, 10, 22, 0.65);
  border: 1px solid rgba(51, 65, 85, 0.45);
}

#playLabPanelKeyboardBeat .kb-result-stats__pgm-item .kb-result-stats__tag {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
}

#playLabPanelKeyboardBeat .kb-result-stats__pgm-item strong {
  font-size: 0.95rem;
  font-weight: 900;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}

#playLabPanelKeyboardBeat .kb-result-ranking,
#playLabPanelKeyboardBeat .kb-result-ranking--compact {
  margin: 0 0 8px;
  padding: 8px 10px 10px;
  border-radius: 12px;
  text-align: left;
  background: rgba(6, 10, 22, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

/* 레벨 결과 아래 보조 랭킹 영역 */
#playLabPanelKeyboardBeat .kb-result-ranking--secondary {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(6, 10, 22, 0.55);
  border-color: rgba(99, 102, 241, 0.22);
}

#playLabPanelKeyboardBeat .kb-result-ranking--secondary .kb-result-ranking__title {
  font-size: 0.7rem;
  color: #a5b4fc;
}

#playLabPanelKeyboardBeat .kb-btn--result-hero {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45), 0 8px 20px rgba(99, 102, 241, 0.35);
  font-weight: 900;
}

#playLabPanelKeyboardBeat .kb-result--beat-level-clear .kb-result__title {
  color: #86efac;
}

#playLabPanelKeyboardBeat .kb-result__hints .kb-result__rank-hint {
  font-size: 0.68rem;
  color: #94a3b8;
}

#playLabPanelKeyboardBeat .kb-result-ranking__title {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #c4b5fd;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-result-ranking__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#playLabPanelKeyboardBeat .kb-result-ranking__form.is-hidden {
  display: none;
}

#playLabPanelKeyboardBeat .kb-result-ranking__prompt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  color: #a5f3fc;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-result-ranking__notice {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  color: #7cff00;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-result-ranking__notice.is-hidden {
  display: none;
}

#playLabPanelKeyboardBeat .kb-result-ranking__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: rgba(15, 23, 42, 0.92);
  color: #f1f5f9;
  font-size: 0.86rem;
  font-weight: 700;
}

#playLabPanelKeyboardBeat .kb-result-ranking__input::placeholder {
  color: #64748b;
  font-weight: 600;
}

#playLabPanelKeyboardBeat .kb-result-ranking__input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#playLabPanelKeyboardBeat .kb-result-ranking__error {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fca5a5;
  min-height: 1em;
}

#playLabPanelKeyboardBeat .kb-result-ranking__error.is-hidden {
  display: none;
}

#playLabPanelKeyboardBeat .kb-result-ranking__status {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #a5f3fc;
  line-height: 1.3;
}

#playLabPanelKeyboardBeat .kb-result-ranking__status--success {
  color: #86efac;
}

#playLabPanelKeyboardBeat .kb-result-ranking__status--fail {
  color: #fca5a5;
}

#playLabPanelKeyboardBeat .kb-result-ranking__form .kb-btn--primary {
  align-self: stretch;
  padding: 8px 14px;
  font-size: 0.86rem;
}

#playLabPanelKeyboardBeat .kb-result-ranking__status--saved {
  text-align: center;
  color: #86efac;
  font-weight: 800;
}

#playLabPanelKeyboardBeat .kb-result-ranking--saved .kb-result-ranking__title {
  color: #86efac;
}

#playLabPanelKeyboardBeat .kb-result-ranking__form.is-hidden + .kb-result-ranking__status--saved:not(.is-hidden) {
  margin-top: 4px;
}

#playLabPanelKeyboardBeat .kb-result__hints {
  margin: 0 0 8px;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-result__hints .kb-result__rank-hint,
#playLabPanelKeyboardBeat .kb-result__hints .kb-result__guest-nudge {
  margin: 4px 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #94a3b8;
}

#playLabPanelKeyboardBeat .kb-result__hints .kb-result__record-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

#playLabPanelKeyboardBeat .kb-result__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 2px;
}

#playLabPanelKeyboardBeat .kb-result__actions-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  margin-top: 2px;
}

#playLabPanelKeyboardBeat .kb-result__actions-sub .kb-result__text-link {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
}

#playLabPanelKeyboardBeat .kb-result__actions-row--primary {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}

/* 다음 레벨은 한 줄 전체 */
#playLabPanelKeyboardBeat .kb-result__actions-row--primary .js-kb-next-level:not(.is-hidden) {
  flex: 0 1 100%;
  width: 100%;
}

/* 다음 레벨 버튼이 아닌 주요 CTA만 너비 제한으로 나란히·단독 중앙 정렬 */
#playLabPanelKeyboardBeat .kb-result__actions-row--primary > .kb-btn--result-main:not(.js-kb-next-level) {
  flex: 0 1 clamp(156px, 42vw, 260px);
  min-width: 0;
  max-width: 260px;
  box-sizing: border-box;
}

/* 결과 모달 주요 CTA: 1개면 중앙, 2개 이상이면 균형 배치 (Keyboard Race 흐름과 동일) */
#playLabPanelKeyboardBeat .kb-result__actions-row--primary.kb-result__actions-row--count-1 {
  justify-content: center;
}

#playLabPanelKeyboardBeat .kb-result__actions-row--primary.kb-result__actions-row--count-2 > .kb-btn--result-main:not(.js-kb-next-level) {
  flex: 1 1 calc(50% - 6px);
  max-width: none;
}

#playLabPanelKeyboardBeat #kbResultOverlay.kb-result--beat-level-clear .kb-result__actions-sub {
  margin-top: 4px;
}

#playLabPanelKeyboardBeat .kb-result__text-link--skip {
  display: block;
  margin-top: 8px;
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-btn--result-main {
  min-width: 0;
  max-width: 100%;
  width: auto;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 800;
}

#playLabPanelKeyboardBeat .kb-result__actions-row--secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

#playLabPanelKeyboardBeat .kb-btn--result-sub {
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  min-width: 0;
}

#playLabPanelKeyboardBeat .kb-result__text-link {
  margin: 0 auto;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
}

#playLabPanelKeyboardBeat .kb-result__text-link:hover {
  color: #cbd5e1;
}

@media (max-width: 640px) {
  #playLabPanelKeyboardBeat .kb-result-overlay {
    justify-content: flex-start;
    align-items: stretch;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  #playLabPanelKeyboardBeat .kb-result-panel {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 14px 12px 12px;
    max-height: min(calc(100dvh - 24px), calc(100% - 6px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #playLabPanelKeyboardBeat .kb-result__title {
    font-size: clamp(1.05rem, 4.2vw, 1.22rem);
    margin-bottom: 4px;
  }

  #playLabPanelKeyboardBeat .kb-result-stats--grid {
    margin-bottom: 8px;
  }

  #playLabPanelKeyboardBeat .kb-result-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #playLabPanelKeyboardBeat .kb-result-ranking,
  #playLabPanelKeyboardBeat .kb-result-ranking--compact {
    margin-bottom: 8px;
    padding: 8px 10px 10px;
  }

  #playLabPanelKeyboardBeat .kb-result__actions-row--secondary {
    flex-direction: row;
    justify-content: center;
  }

  #playLabPanelKeyboardBeat .kb-btn--result-sub {
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  #playLabPanelKeyboardBeat .kb-result-overlay {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }

  #playLabPanelKeyboardBeat .kb-result-panel {
    padding: 12px 10px 10px;
    max-height: min(calc(100dvh - 20px), calc(100% - 4px));
  }

  #playLabPanelKeyboardBeat .kb-result-ranking,
  #playLabPanelKeyboardBeat .kb-result-ranking--compact {
    padding: 8px;
  }
}

#playLabPanelKeyboardBeat .kb-countdown {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.55);
  pointer-events: none;
  background: rgba(3, 6, 18, 0.55);
  border-radius: 12px;
}

#playLabPanelKeyboardBeat .kb-lane-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

#playLabPanelKeyboardBeat .kb-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #020617 0%, #0b1020 55%, #050a18 100%);
  border: 1px solid rgba(51, 65, 85, 0.65);
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
}

#playLabPanelKeyboardBeat .kb-lane--multi .kb-lane__stage,
#playLabPanelKeyboardBeat .kb-lane--multi .kb-lane__labels {
  min-width: max(100%, calc(var(--kb-n-lanes, 8) * 38px));
}

@media (min-width: 901px) {
  #playLabPanelKeyboardBeat .kb-lane--multi .kb-lane__stage,
  #playLabPanelKeyboardBeat .kb-lane--multi .kb-lane__labels {
    min-width: 100%;
  }
}

#playLabPanelKeyboardBeat .kb-lane__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  height: auto;
  max-height: none;
  overflow: hidden;
  perspective: 900px;
}

#playLabPanelKeyboardBeat .kb-lane__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: calc(100% / var(--kb-n-lanes, 8)) 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}

#playLabPanelKeyboardBeat .kb-lanes-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  pointer-events: none;
}

#playLabPanelKeyboardBeat .kb-lane-col-bg {
  position: relative;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.35) 0%,
    transparent 32%,
    transparent 68%,
    rgba(0, 229, 255, 0.04) 100%
  );
  transform: rotateX(2.5deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}

#playLabPanelKeyboardBeat .kb-lane-col-bg:last-child {
  border-right: none;
}

#playLabPanelKeyboardBeat .kb-lane-col-bg.is-pressed {
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.35), inset 0 -28px 36px rgba(0, 229, 255, 0.12);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), transparent 45%, transparent 72%, rgba(167, 139, 250, 0.06));
}

#playLabPanelKeyboardBeat .kb-lane-col-bg.is-warn {
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.45), inset 0 -20px 28px rgba(248, 113, 113, 0.1);
}

#playLabPanelKeyboardBeat .kb-notes-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#playLabPanelKeyboardBeat .kb-note {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 40px;
  max-width: min(92%, 72px);
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
  text-align: center;
}

#playLabPanelKeyboardBeat .kb-note__char {
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #e0f2fe;
}

#playLabPanelKeyboardBeat .kb-lane__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  height: 4px;
  z-index: 3;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 2%, #22d3ee 20%, #a78bfa 50%, #f472b6 80%, transparent 98%);
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.85),
    0 0 40px rgba(167, 139, 250, 0.45),
    0 0 4px #fff inset;
  pointer-events: none;
}

#playLabPanelKeyboardBeat .kb-lane__line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
  background: rgba(148, 163, 184, 0.22);
}

#playLabPanelKeyboardBeat .kb-lane__labels {
  flex-shrink: 0;
  display: grid;
  gap: 6px;
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(0, 229, 255, 0.2);
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.95), rgba(8, 12, 26, 0.98));
}

#playLabPanelKeyboardBeat .kb-lane__label-cell {
  text-align: center;
  margin: 0 auto;
  max-width: 92%;
  min-width: 0;
  padding: 6px 4px 7px;
  border-radius: 8px;
  font-size: clamp(0.62rem, 2vw, 0.76rem);
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #94a3b8;
  letter-spacing: 0.02em;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: linear-gradient(180deg, #1e293b, #0f172a);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.12) inset, 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
}

#playLabPanelKeyboardBeat .kb-lane__label-cell.is-pressed {
  color: #ecfeff;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.35) inset;
  border-color: rgba(0, 229, 255, 0.55);
}

#playLabPanelKeyboardBeat .kb-touch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
  align-items: stretch;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

#playLabPanelKeyboardBeat .kb-touch {
  min-width: 44px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.38);
  background: linear-gradient(180deg, rgba(24, 32, 56, 0.98), rgba(10, 16, 36, 0.98));
  color: #e0f2fe;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(2, 6, 18, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    filter 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#playLabPanelKeyboardBeat .kb-touch:hover {
  border-color: rgba(96, 165, 250, 0.55);
  filter: brightness(1.05);
}

#playLabPanelKeyboardBeat .kb-touch:active {
  transform: scale(0.94) translateY(1px);
  box-shadow: 0 1px 0 rgba(2, 6, 18, 0.5), 0 0 12px rgba(0, 229, 255, 0.25) inset;
  border-color: rgba(0, 229, 255, 0.65);
}

@media (max-width: 900px) {
  #playLabPanelKeyboardBeat .kb-game-stack {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #playLabPanelKeyboardBeat .kb-touch-row {
    gap: 10px;
    margin-top: 12px;
    padding-top: 8px;
    padding-bottom: max(14px, calc(12px + env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid rgba(0, 229, 255, 0.12);
  }

  #playLabPanelKeyboardBeat .kb-touch {
    flex: 1 1 auto;
    min-width: clamp(44px, 12vw, 56px);
    min-height: 50px;
    padding: 12px 10px;
    font-size: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 유저 대시보드 안 PLAY LAB: 전용 좌측 탭 숨김, 본문만 전체 폭 사용           */
/* -------------------------------------------------------------------------- */

.cc-dash-play-lab-wrap {
  padding-left: 0;
  padding-right: 0;
}

.play-lab-shell--dashboard-embed .play-lab-sidebar {
  display: none !important;
}

.play-lab-shell--dashboard-embed {
  display: block;
  width: 100%;
  max-width: 100%;
}

.play-lab-shell--dashboard-embed .play-lab-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.keyboard-race-page--dash-embed {
  margin: 0;
  padding: 0;
}

/* PLAY LAB — 비로그인 로그인 유도 모달 (Keyboard Race / Beat 공통) */
.pl-guest-login-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pl-guest-login-modal.is-hidden {
  display: none !important;
}

.pl-guest-login-modal__card {
  width: 100%;
  max-width: 22rem;
  border-radius: 1rem;
  padding: 1.35rem 1.4rem 1.25rem;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
}

.pl-guest-login-modal__lead {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
}

.pl-guest-login-modal__body {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.pl-guest-login-modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pl-guest-login-modal__buttons .kb-btn {
  width: 100%;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

/* Keyboard Race — 무료 체험 일일 제한 다이얼로그 버튼 (터치 영역·시각 균형) */
.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons {
  gap: 10px;
}

.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons
  .kb-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons
  .kb-btn--primary {
  border: 1px solid rgba(34, 211, 238, 0.55);
  background: linear-gradient(180deg, #38bdf8 0%, #0891b2 100%);
  color: #041018;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.28);
}

.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons
  .kb-btn--primary:hover {
  filter: brightness(1.05);
}

.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons
  .kb-btn--ghost {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.88);
  color: #e2e8f0;
}

.pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
  .pl-guest-login-modal__buttons
  .kb-btn--ghost:hover {
  border-color: rgba(203, 213, 225, 0.55);
  background: rgba(51, 65, 85, 0.95);
  color: #f8fafc;
}

@media (max-width: 900px) {
  .pl-guest-login-modal.pl-guest-login-modal--keyboard-race.pl-guest-login-modal--daily-limit
    .pl-guest-login-modal__buttons
    .kb-btn {
    min-height: 48px;
    font-size: 16px;
  }
}

body.pl-guest-login-open {
  overflow: hidden;
}


/* Keyboard Beat 플레이 중: 플로팅 UI 숨김·모바일 overscroll 완화 (JS: body.pl-game-focus-mode) */
body.pl-game-focus-mode .aside_wrap,
body.pl-game-focus-mode .btn-scroll-top,
body.pl-game-focus-mode .gototop-btn {
  display: none !important;
}

/* Keyboard Beat 모바일 fixed 전체화면 — JS: body.kb-mobile-playing (+ pl-game-focus-mode 보조).
 * Fullscreen API는 보조.Android만 시도; iPhone 등은 고정 레이아웃만 사용. */
@media (max-width: 900px) {
  body.kb-mobile-playing {
    overscroll-behavior: none !important;
  }

  body.kb-mobile-playing #cc-site-header,
  body.kb-mobile-playing footer {
    display: none !important;
  }

  body.kb-mobile-playing .play-lab-sidebar,
  body.kb-mobile-playing .play-lab-mobile-intro {
    display: none !important;
  }

  body.kb-mobile-playing .play-lab-shell {
    position: relative;
    z-index: 120000 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot.kb-shell {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot.kb-shell > .kb-header {
    display: none !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot.kb-shell > .kb-layout {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot.kb-shell .kb-main {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot .kb-settings-layer {
    z-index: 121000 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot .kb-beat-ranking-layer {
    z-index: 121001 !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot .kb-beat-preview-layer {
    z-index: 121002 !important;
  }

  body.kb-mobile-playing #kbGame.kb-game.kb-game-immersive {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: var(--app-height, 100dvh) !important;
    min-height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 120020;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.kb-mobile-playing #kbGame.kb-game:is(:fullscreen, :-webkit-full-screen) {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
  }

  body.kb-mobile-playing #keyboardBeatRoot {
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-countdown {
    border-radius: 0 !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-game-stack {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px 6px 0 !important;
    gap: 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud--overlay {
    top: max(2px, env(safe-area-inset-top, 0px));
    left: 5px;
    right: 5px;
    padding: 2px 5px !important;
    gap: 4px 6px !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud__k {
    font-size: 0.5rem !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud__level,
  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud__combo-n,
  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud__v {
    font-size: clamp(0.58rem, 2.4vw, 0.68rem) !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-play-hud__combo-n {
    font-size: clamp(0.72rem, 3.2vw, 0.88rem) !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-board > .kb-play-hud__speed-badge {
    bottom: calc(14% + 44px) !important;
    left: max(6px, env(safe-area-inset-left, 0px));
    font-size: 0.62rem;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-board {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-lane-wrap {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-lane {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-lane__stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-lane__line {
    bottom: max(
      14%,
      calc(36px + (var(--kb-n-lanes, 4) - 1) * 5px)
    ) !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-touch-row {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding-top: 6px !important;
    padding-bottom: max(8px, calc(6px + env(safe-area-inset-bottom, 0px))) !important;
    border-top: 1px solid rgba(0, 229, 255, 0.14);
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-touch {
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: 0.92rem !important;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-lane__stage,
  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-board {
    overscroll-behavior: none;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-result-overlay {
    border-radius: 0 !important;
    touch-action: pan-y;
  }

  body.kb-mobile-playing #playLabPanelKeyboardBeat .kb-result-panel {
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px
    );
  }

  body.pl-game-focus-mode #keyboardBeatRoot {
    overscroll-behavior: none;
    touch-action: manipulation;
  }
}

/* Keyboard Beat — 시작 전 레벨·키 프리뷰 모달 (Race 준비 모달과 동일 키보드 컴포넌트 재사용) */
#playLabPanelKeyboardBeat .kb-beat-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 10051;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vw, 20px);
  box-sizing: border-box;
  pointer-events: none;
}

#playLabPanelKeyboardBeat .kb-beat-preview-layer:not(.is-hidden) {
  pointer-events: auto;
}

#playLabPanelKeyboardBeat .kb-beat-preview-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(2, 6, 18, 0.74);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

#playLabPanelKeyboardBeat .kb-beat-preview-card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 20px));
  max-width: calc(100vw - 16px);
  max-height: min(640px, calc(100vh - 16px), calc(100dvh - 16px));
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: clamp(12px, 2.5vw, 18px) clamp(14px, 3vw, 20px) 14px;
  box-sizing: border-box;
  pointer-events: auto;
}

#playLabPanelKeyboardBeat .kb-beat-preview-card h3 {
  margin: 0 0 6px;
}

#playLabPanelKeyboardBeat .kb-beat-preview__level-line {
  margin: 0;
  font-size: clamp(0.86rem, 2.5vw, 0.98rem);
  font-weight: 800;
  color: rgba(232, 237, 247, 0.98);
  line-height: 1.35;
}

#playLabPanelKeyboardBeat .kb-beat-preview__keys-line {
  margin: 8px 0 0;
  font-size: clamp(0.74rem, 2.2vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(0, 229, 255, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#playLabPanelKeyboardBeat .kb-beat-preview__notice {
  margin: 8px 0 0;
  font-size: clamp(0.78rem, 2.2vw, 0.86rem);
  font-weight: 600;
  color: rgba(210, 226, 250, 0.92);
  line-height: 1.45;
}

#playLabPanelKeyboardBeat .kb-beat-preview__notice--sub {
  margin-top: 4px;
  color: rgba(186, 210, 255, 0.88);
}

#playLabPanelKeyboardBeat .kb-beat-preview__case-note {
  margin: 8px 0 0;
  font-size: clamp(0.74rem, 2vw, 0.82rem);
  font-weight: 600;
  color: rgba(125, 211, 252, 0.94);
  line-height: 1.5;
}

#playLabPanelKeyboardBeat .kb-beat-preview-kb-shell {
  margin-top: 8px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#playLabPanelKeyboardBeat .kb-beat-preview-kb-scale {
  width: 100%;
  transform-origin: top center;
  transform: scale(1);
}

#playLabPanelKeyboardBeat .kb-beat-preview-keyboard.kr-guide-keyboard {
  margin-top: 4px;
  gap: 5px;
}

#playLabPanelKeyboardBeat .kb-beat-preview-keyboard .kr-guide-keyboard-row {
  gap: 5px;
}

#playLabPanelKeyboardBeat .kb-beat-preview-keyboard .kr-guide-key {
  min-height: clamp(26px, 8vw, 30px);
  font-size: clamp(0.68rem, 2.8vw, 0.76rem);
  padding: 0 2px;
}

#playLabPanelKeyboardBeat .kb-beat-preview-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

#playLabPanelKeyboardBeat .kb-beat-preview-start {
  font-weight: 800;
}

@media (max-width: 520px) {
  #playLabPanelKeyboardBeat .kb-beat-preview-layer {
    padding: 8px;
  }

  #playLabPanelKeyboardBeat .kb-beat-preview-card {
    max-height: min(calc(100vh - 10px), calc(100dvh - 10px));
    padding: 10px 12px 10px;
  }

  #playLabPanelKeyboardBeat .kb-beat-preview-kb-scale {
    transform: scale(0.78);
    margin-bottom: -18px;
  }

  #playLabPanelKeyboardBeat .kb-beat-preview__notice {
    margin-top: 6px;
  }

  #playLabPanelKeyboardBeat .kb-beat-preview__notice--sub {
    margin-top: 2px;
  }
}

@media (max-width: 380px) {
  #playLabPanelKeyboardBeat .kb-beat-preview-kb-scale {
    transform: scale(0.7);
    margin-bottom: -26px;
  }
}

/* PLAY LAB 모바일 — 햄버거 드로어 + 풀블리드 히어로 + 하단 시작하기 */
@media (max-width: 900px) {
  /* Beat 타이틀: 패널 헤더(설정/랭킹) 숨김 — hero·햄버거만 사용 */
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .kb-header {
    display: none !important;
  }

  /* 모바일: Play Lab 전용 사이드 드로어 숨김 — 햄버거는 사이트 GNB 사용 */
  .play-lab-drawer-backdrop,
  .play-lab-sidebar.play-lab-drawer {
    display: none !important;
  }

  .play-lab-page.keyboard-race-page {
    padding: 84px 0 0;
    min-height: var(--app-height, 100svh);
    box-sizing: border-box;
  }

  /* 게임 타이틀: 헤더 오프셋만 유지, 추가 여백·타이틀 영역 제거 */
  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardRace.is-active #krGameScreen.is-hidden),
  .play-lab-page.keyboard-race-page:has(#playLabPanelWordDrop.is-active #wdGameScreen.is-hidden),
  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardBeat.is-active #kbGame.is-hidden) {
    padding: 84px 0 0 !important;
    margin: 0 !important;
    min-height: var(--app-height, 100svh) !important;
    overflow: hidden !important;
  }

  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardRace.is-active #krGameScreen.is-hidden) .play-lab-shell,
  .play-lab-page.keyboard-race-page:has(#playLabPanelWordDrop.is-active #wdGameScreen.is-hidden) .play-lab-shell,
  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardBeat.is-active #kbGame.is-hidden) .play-lab-shell {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardRace.is-active #krGameScreen.is-hidden) .play-lab-main,
  .play-lab-page.keyboard-race-page:has(#playLabPanelWordDrop.is-active #wdGameScreen.is-hidden) .play-lab-main,
  .play-lab-page.keyboard-race-page:has(#playLabPanelKeyboardBeat.is-active #kbGame.is-hidden) .play-lab-main {
    margin: 0 !important;
    padding: 0 !important;
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    max-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
  }

  .play-lab-shell {
    display: block;
    position: relative;
    gap: 0;
  }

  /* 메인 화면에서 가로 서브메뉴 완전 제거 */
  .play-lab-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(78vw, 320px) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 1100 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s ease !important;
    overflow: hidden !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
  }

  body.play-lab-drawer-open .play-lab-sidebar {
    transform: translateX(0) !important;
  }

  .play-lab-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(2, 6, 18, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
  }

  .play-lab-drawer-backdrop[hidden] {
    display: none !important;
  }

  .play-lab-drawer__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 14px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .play-lab-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pl-sidebar-divider, rgba(0, 229, 255, 0.14));
  }

  .play-lab-drawer__title {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }

  .play-lab-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 10px;
    background: rgba(8, 13, 27, 0.85);
    color: #e2e8f0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .play-lab-collapse-btn {
    display: none !important;
  }

  .play-lab-drawer__intro {
    margin: 0 0 12px;
  }

  .play-lab-drawer__intro .play-lab-sidebar-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--pl-nav-muted, #94a3b8);
  }

  .play-lab-submenu,
  .play-lab-mobile-submenu,
  .play-lab-drawer-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .play-lab-drawer-menu .play-lab-nav.play-lab-nav--feature-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .play-lab-drawer-menu .play-lab-nav__section-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .play-lab-drawer-menu .play-lab-nav__section-heading {
    display: block !important;
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pl-section-label, rgba(148, 163, 184, 0.88));
  }

  .play-lab-drawer-menu .play-lab-nav__item,
  .play-lab-drawer-menu .play-lab-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    text-align: left !important;
    white-space: normal !important;
    background: rgba(8, 13, 27, 0.72) !important;
    border: 1px solid rgba(51, 65, 85, 0.55) !important;
    box-sizing: border-box !important;
  }

  .play-lab-drawer-menu .play-lab-nav__item.is-active,
  .play-lab-drawer-menu .play-lab-menu-item.is-active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(99, 102, 241, 0.14)) !important;
    border-color: rgba(0, 229, 255, 0.55) !important;
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.28) inset,
      0 0 18px rgba(0, 229, 255, 0.18) !important;
  }

  .play-lab-drawer-menu .play-lab-nav__card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .play-lab-drawer-menu .play-lab-nav__label--desktop {
    display: inline !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
  }

  .play-lab-drawer-menu .play-lab-nav__label--compact {
    display: none !important;
  }

  .play-lab-drawer-menu .play-lab-nav__desc {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--pl-nav-muted, #94a3b8) !important;
    line-height: 1.35 !important;
  }

  .play-lab-drawer-menu .play-lab-nav__tab-emoji {
    font-size: 1.25rem !important;
    width: 28px;
    flex-shrink: 0;
  }

  .play-lab-drawer__extras {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pl-sidebar-divider, rgba(0, 229, 255, 0.14));
  }

  .play-lab-drawer__extras[hidden] {
    display: none !important;
  }

  .play-lab-drawer__tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 220, 255, 0.35);
    background: rgba(5, 10, 24, 0.72);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }

  .play-lab-main {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #playLabPanelKeyboardRace.play-lab-panel:has(#krGameScreen.is-hidden),
  #playLabPanelWordDrop.play-lab-panel:has(#wdGameScreen.is-hidden),
  #playLabPanelKeyboardBeat.play-lab-panel:has(#kbGame.is-hidden) {
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    max-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap,
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .kb-shell {
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    max-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .play-lab-mobile-stage,
  .pl-game-menu-stage,
  #playLabPanelKeyboardBeat .kb-setup--start {
    width: 100% !important;
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .play-lab-mobile-hero,
  .kb-menu-screen.play-lab-hero,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .kb-menu-screen,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .kb-menu-screen,
  #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .kb-menu-screen {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    max-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .play-lab-mobile-hero-bg,
  .play-lab-mobile-hero .kb-menu-screen__bg-image,
  .play-lab-hero .kb-menu-screen__bg-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .play-lab-mobile-hero::after,
  .play-lab-panel.is-active .play-lab-hero::after,
  .play-lab-panel.is-active .kb-menu-screen.play-lab-hero::after {
    display: none !important;
    content: none !important;
  }

  .play-lab-panel.is-active .pl-game-menu-stage,
  #playLabPanelKeyboardBeat.is-active .kb-setup--start.play-lab-mobile-stage {
    width: 100% !important;
    margin: 0 !important;
    min-height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
    height: calc(var(--app-height, 100svh) - var(--kr-intro-stack, 84px)) !important;
  }

  /* 배경 이미지에 타이틀 포함 — 오버레이 제목 전부 숨김 */
  .play-lab-title,
  .play-lab-mobile-title,
  .play-lab-mobile-hero .play-lab-title,
  .play-lab-panel.is-active .play-lab-title,
  .play-lab-panel.is-active .kb-menu-screen .play-lab-title,
  .kb-menu-screen h2.play-lab-title,
  .keyboard-race-title,
  .keyboard-race-heading,
  .hero-title,
  #krIntroHero .play-lab-title,
  #wdIntroHero .play-lab-title {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  /* 모바일 hero 상단 — 소개(좌) · 설정·랭킹(우) 공통 (playlab-hero-action-btn) */
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-actions {
    z-index: 20 !important;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-actions-left,
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-actions-right {
    z-index: 21 !important;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-action-btn,
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-action-btn.play-lab-tool-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    background: rgba(8, 18, 40, 0.72) !important;
    background-image: none !important;
    border: 1px solid rgba(55, 190, 255, 0.45) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.18) !important;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero-actions-right {
    gap: 8px !important;
    max-width: calc(100% - 96px) !important;
    flex-wrap: nowrap !important;
  }

  html.gnb_on #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .play-lab-hero-ranking,
  html.gnb_on #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .play-lab-hero-ranking,
  html.gnb_on #playLabPanelKeyboardBeat:has(#kbGame.is-hidden) .play-lab-hero-ranking {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 타이틀 CTA — 공통 playlab-* (말미 !important는 레거시 play-lab-actions 전체 너비 규칙 덮어씀) */
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-hero__actions {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--kr-intro-cta-inset, max(28px, calc(24px + env(safe-area-inset-bottom, 0px)))) !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    background: none !important;
    border: none !important;
    overflow: visible !important;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-mobile-start-btn,
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-start-btn {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    pointer-events: auto !important;
    width: min(78vw, 320px) !important;
    min-width: 220px !important;
    max-width: 320px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #041018 !important;
    border: 1px solid rgba(34, 211, 238, 0.55) !important;
    background: linear-gradient(
      180deg,
      rgba(94, 234, 212, 0.78) 0%,
      rgba(34, 211, 238, 0.72) 48%,
      rgba(8, 145, 178, 0.82) 100%
    ) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow:
      0 0 18px rgba(34, 211, 238, 0.45),
      0 8px 24px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-mobile-start-btn:active,
  :is(
    #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden),
    #playLabPanelWordDrop:has(#wdGameScreen.is-hidden),
    #playLabPanelKeyboardBeat:has(#kbGame.is-hidden)
  ) .playlab-start-btn:active {
    transform: translateX(-50%) scale(0.98) !important;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-mobile-start-btn {
    color: #fff4d6 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 120, 60, 0.9) !important;
    background: linear-gradient(
      135deg,
      rgba(40, 12, 12, 0.92) 0%,
      rgba(120, 28, 18, 0.88) 100%
    ) !important;
    box-shadow:
      0 0 18px rgba(255, 80, 40, 0.35),
      0 8px 24px rgba(0, 0, 0, 0.4),
      inset 0 0 10px rgba(255, 180, 80, 0.12),
      inset 0 1px 0 rgba(255, 220, 160, 0.22) !important;
  }

  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-start-btn:active,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) #krIntroStartBtn.playlab-mobile-start-btn:active {
    transform: translateX(-50%) translateY(1px) scale(0.99) !important;
  }

  #playLabPanelKeyboardRace .kb-menu-screen__cta,
  #playLabPanelWordDrop .kb-menu-screen__cta,
  #playLabPanelKeyboardBeat .kb-menu-screen__cta {
    position: static !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .play-lab-mobile-hero-bg.kb-menu-screen__bg-image--keyboard-race,
  #playLabPanelKeyboardRace.is-active:has(#krGameScreen.is-hidden) .kb-menu-screen__bg-image--keyboard-race {
    background-image: url("../images/keyboard_race/title_screen_mobile.png") !important;
  }

  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .play-lab-mobile-hero-bg.kb-menu-screen__bg-image--word-drop,
  #playLabPanelWordDrop.is-active:has(#wdGameScreen.is-hidden) .kb-menu-screen__bg-image--word-drop {
    background-image: url("../images/word_drop/title_screen_mobile.png") !important;
  }

  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .play-lab-mobile-hero-bg.kb-menu-screen__bg-image,
  #playLabPanelKeyboardBeat.is-active:has(#kbGame.is-hidden) .kb-menu-screen__bg-image {
    background-image: url("../images/keyboard_beat/title_screen_mobile.png") !important;
  }

  .keyboard-race-wrap,
  #playLabPanelKeyboardRace:has(#krGameScreen.is-hidden) .keyboard-race-wrap,
  #playLabPanelWordDrop:has(#wdGameScreen.is-hidden) .word-drop-wrap {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #playLabPanelCodePlayground.is-active .cp-shell,
  #playLabPanelCodingQuest.is-active .cq-panel {
    padding-left: clamp(12px, 3vw, 16px);
    padding-right: clamp(12px, 3vw, 16px);
    box-sizing: border-box;
  }
}

/* PLAY LAB 모바일 햄버거 — 사이트 GNB 완전 숨김 (rwd.css 최종 오버라이드) */
@media (max-width: 1024px) {
  html.gnb_on #cc-site-header[data-play-lab-mobile-nav] .cc-site-nav-drawer-links,
  html.gnb_on #cc-site-header[data-play-lab-mobile-nav] .cc-site-nav-drawer-auth,
  html.gnb_on #cc-site-header[data-play-lab-mobile-nav] .cc-site-nav-drawer-links > *,
  html.gnb_on #cc-site-header[data-play-lab-mobile-nav] .cc-site-nav-drawer-auth > *,
  html.gnb_on .header #cc-site-header[data-play-lab-mobile-nav] .gnb.cc-site-gnb .cc-site-nav-drawer-links > a.cc-nav-primary,
  html.gnb_on .header #cc-site-header[data-play-lab-mobile-nav] .gnb.cc-site-gnb .cc-site-nav-drawer-auth > a {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.gnb_on #cc-site-header[data-play-lab-mobile-nav] .cc-pl-mobile-menu {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Keyboard Race: 랭킹/점수 저장 단계 — 하단 액션 숨김, X·점수 저장만 */
#krModalStageRanking .kr-race-ranking-footer,
#krRaceRankingLegacyActions {
  display: none !important;
}

#krModalStageRanking .kr-modal-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  color: #334155;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

#krModalStageRanking.kr-race-ranking-stage {
  position: relative;
}

#krModalStageRanking .save-score-button {
  width: 100%;
  margin-top: 8px;
}

/* Play Lab: 점수 저장 화면 (Race / Word Drop / Beat 공통) */
.play-lab-score-save-stage .ranking-stats-grid,
.play-lab-score-save-stage .kr-result-stats-grid--mirror,
.play-lab-score-save-stage .wd-modal-stats,
.play-lab-score-save-footer,
#krRaceRankingLegacyActions,
#wdRaceRankingLegacyActions {
  display: none !important;
}

.play-lab-score-save-stage {
  position: relative;
  text-align: center;
}

.play-lab-score-save-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0f172a;
}

.play-lab-score-save-layout {
  margin: 0;
}

.play-lab-score-save-stage .kr-modal-ranking-table-wrap,
.play-lab-score-save-stage .kb-result-ranking__table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: min(42vh, 320px);
  margin: 0 auto 12px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.play-lab-score-save-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.88rem;
}

.play-lab-score-save-table th,
.play-lab-score-save-table td {
  padding: 6px 8px;
  word-break: break-word;
}

.play-lab-score-save-table th:nth-child(1),
.play-lab-score-save-table td:nth-child(1) {
  width: 22%;
}

.play-lab-score-save-table th:nth-child(2),
.play-lab-score-save-table td:nth-child(2) {
  width: 43%;
}

.play-lab-score-save-table th:nth-child(3),
.play-lab-score-save-table td:nth-child(3) {
  width: 35%;
}

.play-lab-score-save-stage .save-score-button {
  display: block;
  width: min(78vw, 320px);
  max-width: 100%;
  margin: 12px auto 0;
}

.kb-result-overlay.kb-result--score-save .kb-result-panel__head,
.kb-result-overlay.kb-result--score-save .kb-result-stats,
.kb-result-overlay.kb-result--score-save .kb-result-pgm-details,
.kb-result-overlay.kb-result--score-save .kb-result__hints,
.kb-result-overlay.kb-result--score-save .kb-result__actions {
  display: none !important;
}

.kb-result-overlay.kb-result--score-save .kb-result-panel {
  padding-top: 12px;
}

@media (max-width: 768px) {
  .play-lab-score-save-table {
    font-size: 0.8rem;
  }

  .play-lab-score-save-table th,
  .play-lab-score-save-table td {
    padding: 5px 6px;
  }
}

/* ===== Play Lab — 게임 결과 다이얼로그 버튼 (Race / Beat / Word Drop) ===== */
.play-lab-page.keyboard-race-page {
  --pl-result-btn-min-h: 48px;
  --pl-result-btn-radius: 14px;
  --pl-result-btn-primary-bg: linear-gradient(180deg, #1fa8ff 0%, #1667d9 100%);
  --pl-result-btn-primary-border: rgba(120, 220, 255, 0.85);
  --pl-result-btn-primary-color: #ffffff;
  --pl-result-btn-secondary-bg: rgba(14, 24, 52, 0.95);
  --pl-result-btn-secondary-border: rgba(120, 180, 255, 0.42);
  --pl-result-btn-secondary-color: #eaf4ff;
  --pl-result-btn-ghost-bg: rgba(18, 28, 52, 0.72);
  --pl-result-btn-ghost-border: rgba(148, 163, 184, 0.45);
  --pl-result-btn-ghost-color: #e2e8f0;
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pl-result-btn-min-h);
  padding: 0 20px;
  border-radius: var(--pl-result-btn-radius);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  -webkit-appearance: none;
  appearance: none;
  text-transform: none;
  box-shadow: 0 4px 14px rgba(2, 8, 24, 0.35);
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn span,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn *,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn *,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn *,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn * {
  color: inherit;
  -webkit-text-fill-color: inherit;
  opacity: 1;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

/* Primary — 다시 도전 / 다음 레벨 / 랭킹 등록 등 */
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--primary,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--primary,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--primary,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--primary,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button {
  border: 1px solid var(--pl-result-btn-primary-border);
  background: var(--pl-result-btn-primary-bg);
  color: var(--pl-result-btn-primary-color);
  -webkit-text-fill-color: var(--pl-result-btn-primary-color);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Secondary — 랭킹 보기 등 */
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--secondary,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--secondary,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--secondary,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--secondary {
  border: 1px solid var(--pl-result-btn-secondary-border);
  background: var(--pl-result-btn-secondary-bg);
  color: var(--pl-result-btn-secondary-color);
  -webkit-text-fill-color: var(--pl-result-btn-secondary-color);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px rgba(2, 8, 24, 0.28);
}

/* Ghost — 처음으로 등 */
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--ghost,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--ghost {
  border: 1px solid var(--pl-result-btn-ghost-border);
  background: var(--pl-result-btn-ghost-bg);
  color: var(--pl-result-btn-ghost-color);
  -webkit-text-fill-color: var(--pl-result-btn-ghost-color);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn:hover,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn:focus-visible,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn:active,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn:active,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn:active,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button:hover,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal #krModalStageRanking .save-score-button:active,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn:hover,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn:focus-visible,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn:active,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button:hover,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button:focus-visible,
.play-lab-page.keyboard-race-page #wdResultModal #wdModalStageRanking .save-score-button:active {
  opacity: 1;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--primary:hover,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--primary:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--primary:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--primary:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--primary:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--primary:focus-visible,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--primary:hover,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--primary:focus-visible {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-color: rgba(160, 230, 255, 0.95);
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--secondary:hover,
.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn--secondary:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--secondary:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn--secondary:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--secondary:hover,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn--secondary:focus-visible,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--secondary:hover,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn--secondary:focus-visible {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: rgba(22, 36, 72, 0.98);
  border-color: rgba(140, 200, 255, 0.58);
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn:disabled,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn:disabled,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn:disabled,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn:focus-visible,
.play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn:focus-visible,
.play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.85);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .play-lab-page.keyboard-race-page {
    --pl-result-btn-min-h: 48px;
  }

  .play-lab-page.keyboard-race-page #kbResultOverlay button.kb-btn,
  .play-lab-page.keyboard-race-page #krResultModal .kr-modal-guest-result-actions .kr-btn,
  .play-lab-page.keyboard-race-page #krResultModal .kr-modal-logged-result-actions .kr-btn,
  .play-lab-page.keyboard-race-page #wdResultModal .wd-modal-actions .kr-btn {
    font-size: 15px;
    padding: 0 16px;
  }
}