*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background:
    linear-gradient(180deg, rgba(8, 10, 18, 0.52), rgba(12, 8, 8, 0.66)),
    url("../images/background.webp") center / cover no-repeat fixed,
    #151515;
  color: #f9fafb;
  font-family: "Barlow", Arial, sans-serif;
  user-select: none;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100%;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
}

.screen.open {
  display: flex;
}

body.needs-landscape .rotate-overlay {
  display: flex;
}

.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(4, 6, 18, 0.86), rgba(18, 8, 4, 0.94)),
    url("../images/background.webp") center / cover no-repeat;
}

.rotate-panel {
  width: min(360px, 88vw);
  padding: 26px 22px;
  border: 2px solid rgba(255, 215, 0, 0.48);
  border-radius: 14px;
  background: rgba(3, 9, 35, 0.9);
  text-align: center;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
}

.rotate-panel strong,
.rotate-panel span {
  display: block;
  font-family: "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.rotate-panel strong {
  color: #ffd700;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.rotate-panel span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.primary-btn,
.secondary-btn,
.hud-action,
.hud-icon {
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-btn {
  min-width: 180px;
  padding: 15px 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: 0 8px 0 #064e3b, 0 18px 36px rgba(0, 0, 0, 0.32);
}

.secondary-btn {
  min-width: 160px;
  padding: 13px 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #475569, #1f2937);
  box-shadow: 0 7px 0 #111827;
}

.secondary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.primary-btn:active,
.secondary-btn:active,
.hud-action:active,
.hud-icon:active {
  transform: translateY(3px);
}

.result-shell {
  width: min(720px, calc(100vw - 32px));
  margin: auto;
  padding: 42px 30px;
  border: 3px solid #d6b36a;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 22, 15, 0.96), rgba(18, 13, 11, 0.98));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.48);
  text-align: center;
}

.result-shell h2 {
  margin: 0;
  color: #f8d874;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(58px, 9vw, 118px);
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-shadow: 0 5px 0 #3b1b0f, 0 0 32px rgba(248, 216, 116, 0.28);
}

#menu-screen,
#hub-screen {
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 34px);
}

.main-menu-controls {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 6px;
}

.main-menu-controls #menu-lite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 36px;
  border: 1.5px solid rgba(124, 58, 237, 0.8);
  border-radius: 8px;
  background: rgba(5, 14, 44, 0.82);
  color: #c4b5fd;
  cursor: pointer;
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-menu-controls #menu-lite-btn.active {
  color: #f87171;
}

.main-menu-shell {
  width: min(760px, calc(100vw - 32px));
  margin: auto;
  padding: clamp(34px, 5vw, 58px) clamp(24px, 5vw, 54px);
  border: 3px solid #d6b36a;
  border-radius: 8px;
  background: rgba(140, 45, 0, 0.20);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.48);
  text-align: center;
}

#new-game-btn {
  background: linear-gradient(180deg, #f5d020, #d4900a);
  box-shadow: 0 8px 0 #7a5000, 0 18px 36px rgba(0, 0, 0, 0.32);
  color: #1a0e00;
}

#new-game-btn:active { box-shadow: 0 5px 0 #7a5000, 0 10px 18px rgba(0, 0, 0, 0.28); }

#settings-btn {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 7px 0 #1e3a8a;
}

#settings-btn:active { box-shadow: 0 4px 0 #1e3a8a; }

.menu-logo {
  max-height: clamp(80px, 14vw, 160px);
  width: auto;
  object-fit: contain;
  margin-bottom: 30px;
}

.main-menu-shell h1 {
  margin: 0 0 30px;
  color: #f8d874;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(64px, 10vw, 132px);
  letter-spacing: 0.08em;
  line-height: 0.9;
  text-shadow: 0 5px 0 #3b1b0f, 0 0 32px rgba(248, 216, 116, 0.28);
}

.main-menu-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
}

.menu-hub {
  position: relative;
  width: min(1380px, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 34px);
  padding-bottom: clamp(46px, 6vh, 72px);
}

.menu-hub-head {
  text-align: center;
}

.hub-logo {
  max-height: clamp(72px, 10vw, 140px);
  width: auto;
  object-fit: contain;
}

.menu-hub-head h1 {
  margin: 0;
  color: #f8d874;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(58px, 8.4vw, 128px);
  letter-spacing: 0.08em;
  line-height: 0.88;
  text-shadow: 0 5px 0 #3b1b0f, 0 0 32px rgba(248, 216, 116, 0.28);
}

.menu-hub-head p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mode-chart-row {
  --chart-gap: clamp(6px, 0.8vw, 12px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--chart-gap);
  align-items: stretch;
}

.mode-chart {
  position: relative;
  flex: 0 0 calc((100% - (3 * var(--chart-gap))) / 4);
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
  color: #f8d874;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.mode-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("../images/border.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.38));
}

.mode-chart:hover:not(.disabled) {
  filter: brightness(1.08);
  transform: translateY(-5px);
}

.mode-chart:active:not(.disabled) {
  transform: translateY(-2px);
}

.mode-chart img {
  position: absolute;
  top: 10%;
  right: 10.5%;
  bottom: 11.5%;
  left: 10.5%;
  z-index: 1;
  width: 79%;
  height: 78.5%;
  object-fit: cover;
  background: #050505;
}

.profile-chart-score {
  position: absolute;
  top: 42%;
  left: 37%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #1a0e00;
  font: 800 clamp(10px, 1.4vw, 18px) "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em;
  pointer-events: none;
  white-space: nowrap;
}

#profile-btn .profile-chart-avatar {
  position: absolute;
  top: 46%;
  left: 59.2%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}

.mode-chart span {
  position: absolute;
  top: 10%;
  right: 10.5%;
  bottom: 11.5%;
  left: 10.5%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(180deg, rgba(12, 7, 4, 0.9), rgba(2, 2, 2, 0.96));
  color: #f8d874;
  font: clamp(22px, 2.1vw, 36px) "Bebas Neue", Impact, sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 3px 0 #1f1009, 0 0 18px rgba(0, 0, 0, 0.75);
}

.mode-chart img + span {
  opacity: 0;
}

.mode-chart img:not([src]),
.mode-chart img[src=""] {
  display: none;
}

.mode-chart.disabled {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.62);
}

.mode-chart.disabled::after {
  content: "LOCKED";
  position: absolute;
  right: 11%;
  bottom: 13%;
  z-index: 3;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.hub-main-menu-btn {
  position: fixed;
  left: clamp(200px, 21vw, 340px);
  bottom: 24px;
  z-index: 4;
  width: clamp(280px, 24vw, 340px);
  aspect-ratio: 3.1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  background: url("../images/blankpapyrus.webp") center / 100% 100% no-repeat;
  color: #2b1405;
  cursor: pointer;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42));
  transition: transform 0.14s ease, filter 0.14s ease;
}

.hub-main-menu-btn:hover {
  transform: translateY(-3px) scale(1.025);
  filter: brightness(1.08) drop-shadow(0 13px 18px rgba(0, 0, 0, 0.5));
}

.hub-main-menu-btn:active {
  transform: translateY(-1px) scale(1.01);
}

.hub-main-menu-btn span {
  font: 34px/1 "Bebas Neue", Impact, sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255, 244, 190, 0.65);
  white-space: nowrap;
}

.mode-chart[data-daily-progress]::after {
  content: attr(data-daily-progress);
  position: absolute;
  left: 11%;
  bottom: 13%;
  z-index: 3;
  max-width: 56%;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.84);
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-align: left;
  white-space: normal;
}

.mode-chart.daily-claimed {
  filter: grayscale(0.45) brightness(0.74);
}

@media (max-width: 1080px) and (min-width: 721px) {
  .mode-chart {
    flex-basis: calc((100% - var(--chart-gap)) / 2);
  }
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 30, 0.82);
  backdrop-filter: blur(10px);
}

.confirm-overlay.open {
  display: flex;
}

.confirm-box {
  width: min(460px, 94vw);
  padding: 28px;
  border: 1.5px solid rgba(255, 215, 0, 0.38);
  border-radius: 14px;
  background: rgba(3, 9, 35, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.confirm-box h2 {
  margin: 0;
  color: #ffd700;
  font: 48px/1 "Bebas Neue", sans-serif;
  letter-spacing: 0.1em;
}

.confirm-box p {
  margin: 12px 0 22px;
  color: rgba(255, 255, 255, 0.72);
  font: 800 17px "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em;
}

.final-score {
  margin: 10px 0;
  color: #facc15;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(70px, 11vw, 140px);
  line-height: 1;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 26px;
}

.final-stats div {
  padding: 13px;
  border: 1px solid rgba(214, 179, 106, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.final-stats strong {
  display: block;
  color: #fff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 36px;
}

.final-stats span {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.wo-panel {
  width: min(900px, 94vw);
  margin: auto;
  padding: 22px 24px;
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: 18px;
  background: rgba(3, 9, 35, 0.94);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.quick-mode-panel {
  width: min(720px, 94vw);
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}

.quick-mode-title {
  margin-bottom: 10px;
  font-size: clamp(42px, 6vw, 60px);
}

.quick-mode-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-mode-card {
  min-height: 128px;
  border: 1px solid rgba(250, 204, 21, 0.58);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(30, 58, 138, 0.78), rgba(18, 16, 50, 0.96));
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.quick-mode-card:hover {
  border-color: #fde68a;
  filter: brightness(1.14);
  transform: translateY(-4px);
}

.quick-mode-card strong,
.quick-mode-card span {
  display: block;
}

.quick-mode-card strong {
  color: #fde68a;
  font: clamp(32px, 4vw, 48px)/1 "Bebas Neue", Impact, sans-serif;
  letter-spacing: 0.07em;
}

.quick-mode-card span,
.quick-mode-subtitle {
  margin-top: 8px;
  color: #bfdbfe;
  font: 800 14px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0.12em;
}

.quick-custom-choice {
  display: grid;
  gap: 9px;
}

.quick-custom-choice[hidden] {
  display: none;
}

.quick-word-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.quick-word-counts button {
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font: 800 clamp(20px, 3vw, 30px)/1 "Bebas Neue", Impact, sans-serif;
  white-space: nowrap;
}

.quick-word-counts button.active {
  border-color: #fde68a;
  background: linear-gradient(145deg, #ca8a04, #92400e);
}

.quick-star-preview {
  color: #fde68a;
  font: 800 17px/1.2 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
}

.quick-practice-note {
  color: #cbd5e1;
  font: 700 13px/1.25 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0.06em;
}

.quick-custom-choice .wo-btn {
  min-height: 42px;
  padding: 9px 14px;
}

.quick-custom-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-mode-choice-footer {
  min-height: 38px;
  margin-top: 10px;
}

.quick-mode-choice-footer[hidden] {
  display: none;
}

.quick-mode-hub {
  min-height: 38px;
  padding: 8px 14px;
}

.wo-title {
  color: #ffd700;
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.42);
}

.wo-new-title {
  margin-bottom: 12px;
  font-size: clamp(42px, 7vw, 64px);
  line-height: 1;
}

.wo-new-layout {
  display: grid;
  grid-template-columns: minmax(240px, 38%) 1fr;
  gap: 22px;
  align-items: center;
}

.wo-avatar-preview {
  height: min(46vh, 500px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, rgba(59, 130, 246, 0.22), rgba(2, 6, 24, 0.12) 65%);
}

.wo-avatar-preview img {
  height: calc(100% - 40px);
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
}

.wo-avatar-preview div {
  height: 40px;
  color: #ffd700;
  font: 26px "Bebas Neue", sans-serif;
  letter-spacing: 0.15em;
}

.wo-profile-panel {
  position: relative;
  width: min(980px, 96vw);
}

.wo-rank-display {
  position: absolute;
  top: 55px;
  right: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.wc-rank-img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.wo-rank-display span {
  max-width: 135px;
  color: #93c5fd;
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-align: center;
}

.wo-profile-hero {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  background: radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.35), rgba(2, 6, 24, 0.15) 55%);
}

.wo-profile-hero img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #ffd700;
  border-radius: 50%;
  background: #020617;
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.22);
}

.profile-title {
  font-size: 58px;
  text-align: left;
}

.wo-profile-grade {
  color: #93c5fd;
  font: 800 14px "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
}

.wo-profile-score-label {
  margin-top: 12px;
  color: #fde68a;
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.18em;
}

.wo-profile-score {
  color: #ffd700;
  font: 55px/1 "Bebas Neue", sans-serif;
}

.wo-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.wo-profile-stats div {
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.25);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.wo-profile-stats strong {
  display: block;
  color: #fff;
  font: 32px "Bebas Neue", sans-serif;
}

.wo-profile-stats span {
  color: #93c5fd;
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.wo-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.wo-profile-info {
  position: relative;
  padding: 14px 55px 14px 16px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 13px;
  background: rgba(161, 98, 7, 0.17);
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.wo-profile-info.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wo-profile-info span {
  display: block;
  color: #fde68a;
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.13em;
}

.wo-profile-info strong {
  color: #fff;
  font: 30px "Bebas Neue", sans-serif;
}

.wo-profile-info b {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #ffd700;
  border-radius: 50%;
  color: #ffd700;
  font: 22px "Bebas Neue", sans-serif;
}

.wo-level-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.wo-level-action {
  min-width: 160px;
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font: 800 15px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.campaign-panel {
  width: min(1180px, 96vw);
}

.campaign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.campaign-title {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.9;
  text-align: left;
}

.campaign-subtitle {
  color: #93c5fd;
  font: 800 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
}

.campaign-level-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.campaign-level-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 16px 14px;
  border: 1.5px solid rgba(255, 215, 0, 0.34);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 58, 138, 0.35), rgba(2, 6, 24, 0.86));
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.campaign-level-card:hover:not(.locked) {
  border-color: rgba(255, 215, 0, 0.82);
  filter: brightness(1.08);
  transform: translateY(-4px);
}

.campaign-level-card.completed {
  border-color: rgba(74, 222, 128, 0.72);
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.5), rgba(2, 44, 34, 0.9));
}

.campaign-level-card.perfect {
  border-color: rgba(255, 215, 0, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.28),
    0 0 28px rgba(255, 215, 0, 0.58),
    inset 0 0 20px rgba(255, 215, 0, 0.18);
}

.campaign-level-card.locked {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.55);
}

.campaign-level-card strong {
  color: #ffd700;
  font: 36px/1 "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
}

.campaign-level-card span,
.campaign-level-card small,
.campaign-level-card b {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.campaign-level-card span {
  color: #bfdbfe;
  font-size: 15px;
}

.campaign-level-card small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.campaign-level-card em {
  color: #ffd700;
  font-style: normal;
  font-size: 23px;
  letter-spacing: 0.04em;
}

.campaign-level-card b {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

.campaign-ready-panel {
  width: min(740px, 94vw);
  margin: auto;
}

.campaign-ready-title {
  font-size: clamp(42px, 6vw, 58px);
  line-height: 0.95;
}

.campaign-ready-subtitle {
  margin: 0 0 20px;
  text-align: center;
  color: #bfdbfe;
  font: 800 14px "Barlow Condensed", sans-serif;
  letter-spacing: 0.14em;
}

.campaign-ready-stars {
  display: grid;
  gap: 11px;
  margin-bottom: 16px;
}

.campaign-ready-star {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  min-height: 74px;
  padding: 13px 64px 13px 16px;
  border: 1.5px solid rgba(255, 215, 0, 0.32);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.38), rgba(0, 0, 0, 0.22));
}

.campaign-ready-star span {
  grid-row: span 2;
  color: #ffd700;
  font-size: 29px;
  letter-spacing: 0.08em;
}

.campaign-ready-star strong {
  color: #fff;
  font: 29px/1 "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
}

.campaign-ready-star small {
  color: #93c5fd;
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.campaign-ready-star.completed {
  border-color: rgba(74, 222, 128, 0.72);
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.74), rgba(3, 45, 35, 0.76));
}

.campaign-ready-star.completed span,
.campaign-ready-star.completed strong {
  color: #86efac;
}

.campaign-ready-check {
  position: absolute;
  right: 18px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 2px solid #86efac;
  border-radius: 50%;
  background: rgba(20, 83, 45, 0.84);
  color: #dcfce7;
  font: 24px/1 "Bebas Neue", sans-serif;
}

.campaign-ready-best {
  margin-bottom: 18px;
  text-align: center;
  color: #ffd700;
  font: 800 16px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.campaign-ready-actions {
  justify-content: center;
  margin-top: 4px;
}

.campaign-ready-actions .wo-level-action {
  min-width: 180px;
}

.daily-panel {
  width: min(760px, 95vw);
}

.daily-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.daily-title {
  font-size: clamp(42px, 6vw, 58px);
  line-height: 0.95;
  text-align: left;
}

.daily-subtitle {
  color: #93c5fd;
  font: 800 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
}

.daily-reward {
  min-width: 118px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 215, 0, 0.34);
  border-radius: 10px;
  background: rgba(2, 6, 24, 0.44);
  text-align: center;
}

.daily-reward span {
  display: block;
  color: #bfdbfe;
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.16em;
}

.daily-reward strong {
  color: #ffd700;
  font: 38px/1 "Bebas Neue", sans-serif;
}

.daily-board {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.daily-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(0, 0, 0, 0.22));
}

.daily-row.easy {
  border-color: rgba(74, 222, 128, 0.45);
}

.daily-row.medium {
  border-color: rgba(250, 204, 21, 0.45);
}

.daily-row.hard {
  border-color: rgba(248, 113, 113, 0.5);
}

.daily-row.done {
  border-color: rgba(74, 222, 128, 0.8);
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.45), rgba(0, 0, 0, 0.24));
}

.daily-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: auto;
  border: 2px solid rgba(147, 197, 253, 0.45);
  border-radius: 12px;
  background: rgba(2, 6, 24, 0.42);
  color: transparent;
  font: 34px/1 "Bebas Neue", sans-serif;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.22);
}

.daily-row.done .daily-check {
  border-color: #86efac;
  background: linear-gradient(135deg, #166534, #22c55e);
  color: #fff;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

.daily-main strong {
  color: #fff;
  font: 24px "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
}

.daily-main span {
  display: block;
  margin-top: 5px;
  color: #bfdbfe;
  font: 700 12px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.daily-progress {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.daily-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #ffd700);
}

.daily-row.done .daily-progress i {
  background: linear-gradient(90deg, #16a34a, #86efac);
}

.daily-countdown-line {
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 2px;
  color: #f8d874;
  font: 800 16px "Barlow Condensed", sans-serif;
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#daily-claim-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

#daily-claim-btn.countdown {
  border-color: rgba(147, 197, 253, 0.35);
  background: rgba(30, 58, 138, 0.25);
  color: #bfdbfe;
  filter: grayscale(0.25);
}

.wo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wo-label {
  display: block;
  margin-bottom: 5px;
  color: #93c5fd;
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wo-name-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 10px;
  outline: none;
  background: rgba(0, 0, 0, 0.26);
  color: #fff;
  font: 800 22px "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wo-avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(52px, 1fr));
  gap: 7px;
}

.wo-avatar {
  padding: 5px;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #dbeafe;
  cursor: pointer;
  font: 800 10px "Barlow Condensed", sans-serif;
  text-align: center;
}

.wo-avatar img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  margin-bottom: 4px;
  border-radius: 8px;
}

.wo-avatar.active {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.25);
}

.wo-grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wo-grade {
  padding: 11px 10px;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #dbeafe;
  cursor: pointer;
  font: 800 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
}

.wo-grade.active {
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.9), rgba(250, 204, 21, 0.32));
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.2);
}

.wo-head-flip {
  transform: scaleX(-1);
}

.wo-warning,
.sc-warn {
  min-height: 17px;
  color: #f87171;
  font: 800 12px "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
}

.wo-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wo-btn {
  flex: 1;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: 800 16px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wo-btn.gold {
  background: linear-gradient(180deg, #facc15, #b45309);
  box-shadow: 0 6px 0 #713f12;
}

.wo-btn.ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.sc-modal {
  width: min(96vw, 620px);
  max-height: 90vh;
  margin: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  border: 1.5px solid rgba(255, 140, 0, 0.25);
  border-radius: 18px;
  background: rgba(3, 9, 35, 0.95);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.sc-title {
  color: #ffd700;
  font: clamp(30px, 5vw, 44px) "Bebas Neue", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 0 24px rgba(255, 140, 0, 0.5);
}

.sc-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-section-head {
  display: flex;
  align-items: center;
}

.sc-section-label {
  color: rgba(255, 255, 255, 0.62);
  font: 800 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sc-section-label span {
  font-size: 0.75em;
  opacity: 0.65;
  letter-spacing: 0.05em;
}

.sc-class-grid,
.sc-unit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sc-class-btn,
.sc-unit-btn {
  padding: 7px 14px;
  border: 1.5px solid rgba(255, 140, 0, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  font: 800 15px "Barlow Condensed", sans-serif;
  white-space: nowrap;
}

.sc-class-btn.active,
.sc-unit-btn.active {
  border-color: #4ade80;
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #fff;
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.35);
}

.sc-unit-btn small {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.65;
}

.sc-clear-btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  background: transparent;
  color: rgba(248, 113, 113, 0.8);
  cursor: pointer;
  font: 800 10px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.sc-word-count {
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.62);
  font: 800 14px "Barlow Condensed", sans-serif;
  text-align: center;
}

.sc-word-count.sc-warn-low {
  color: #f87171;
}

.sc-save-btn {
  flex: 1;
  padding: 13px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #fff;
  cursor: pointer;
  font: 800 17px "Barlow Condensed", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#cat-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 8, 30, 0.96);
  backdrop-filter: blur(12px);
}

#cat-preview-overlay.open {
  display: flex;
}

.cp-modal {
  width: min(95vw, 640px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border: 1.5px solid rgba(255, 140, 0, 0.3);
  border-radius: 18px;
  background: rgba(3, 9, 35, 0.97);
}

.cp-title {
  color: #ffd700;
  font: clamp(20px, 3vw, 30px) "Bebas Neue", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
}

.cp-grid {
  max-height: 60vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  overflow-y: auto;
}

.cp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 140, 0, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.cp-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
}

.cp-card-word {
  color: #fff;
  font: 800 12px "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
}

.cp-card-grade {
  color: rgba(255, 255, 255, 0.55);
  font: 700 10px "Barlow Condensed", sans-serif;
  text-align: center;
}

.cp-close {
  align-self: center;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font: 800 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
}

@media (max-width: 720px) {
  .wo-new-layout {
    grid-template-columns: 1fr;
  }

  .wo-avatar-preview {
    min-height: 260px;
    height: 34vh;
  }

  .mode-chart-row {
    display: flex;
    overflow-y: auto;
    max-height: 70vh;
    padding-right: 4px;
  }

  .mode-chart {
    flex-basis: 100%;
    aspect-ratio: 16 / 9;
  }

  .hub-main-menu-btn {
    left: 50%;
    bottom: 12px;
    width: min(210px, 58vw);
    transform: translateX(-50%);
  }

  .hub-main-menu-btn:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.025);
  }

  .wo-rank-display {
    display: none;
  }

  .wo-profile-hero {
    grid-template-columns: 110px 1fr;
  }

  .wo-profile-hero img {
    width: 100px;
    height: 100px;
  }

  .profile-title {
    font-size: 42px;
  }

  .wo-profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .wo-profile-actions {
    grid-template-columns: 1fr;
  }

  .campaign-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-level-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    max-height: 66vh;
    overflow-y: auto;
  }
}

/* ── HUB CHART ATTENTION — unseen rank, daily, or achievement update ── */
.mode-chart.hub-chart-attention {
  animation: hub-chart-nudge 1.05s ease-in-out infinite;
  transform-origin: center;
}

@keyframes hub-chart-nudge {
  0%, 100% { transform: translateX(-2px) rotate(-0.22deg); }
  50% { transform: translateX(2px) rotate(0.22deg); }
}

/* ── ACHİEVEMENT SİSTEMİ (word_reveal sp.html'den birebir kopya) ── */

#wc-achievements,
#wc-badges {
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.wo-achievements-panel {
  width: min(1050px, 96vw);
  max-height: none;
}

.wo-achievements-score {
  min-width: 140px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 14px;
  background: rgba(161, 98, 7, 0.2);
  text-align: center;
}

.wo-achievements-score span {
  display: block;
  color: #fde68a;
  font: 700 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.18em;
}

.wo-achievements-score strong {
  color: #ffd700;
  font: 40px "Bebas Neue", sans-serif;
}

.wo-achievements-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.wo-achievements-sub {
  color: #93c5fd;
  font: 700 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.15em;
}

.wo-achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

.wo-achievement {
  display: grid;
  grid-template-columns: 62px 1fr 105px;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.25);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.28), rgba(0, 0, 0, 0.2));
}

.wo-achievement.in-progress { opacity: 0.82; }

.wo-achievement.prereq-locked {
  opacity: 0.38;
  filter: saturate(0.25);
}

.wo-achievement.prereq-locked .wo-achievement-copy h3::before {
  content: '🔒 ';
  font-size: 0.8em;
}

.wo-achievement.unlocked {
  border-color: #facc15;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.2);
}

.wo-achievement.claimed {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.42), rgba(2, 44, 34, 0.3));
}

.wo-achievement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 215, 0, 0.38);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  color: #ffd700;
  font-size: 30px;
}

.wo-achievement-copy h3 {
  margin: 0;
  color: #fff;
  font: 25px "Bebas Neue", sans-serif;
  letter-spacing: 0.09em;
}

.wo-achievement-copy p {
  margin: 2px 0 7px;
  color: #bfdbfe;
  font: 700 12px "Barlow Condensed", sans-serif;
  letter-spacing: 0.05em;
}

.wo-achievement-copy small {
  color: #93c5fd;
  font: 700 10px "Barlow Condensed", sans-serif;
}

.wo-achievement-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.wo-achievement-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #facc15);
}

.wo-achievement-reward { text-align: center; }

.wo-achievement-reward strong {
  display: block;
  color: #ffd700;
  font: 27px "Bebas Neue", sans-serif;
}

.wo-achievement-reward span {
  display: block;
  margin-top: -5px;
  color: #fde68a;
  font: 700 9px "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.wo-achievement-easter {
  display: block;
  margin-top: 8px;
  color: #f8d874;
  font: 700 10px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
}

.wo-achievement-reward button {
  width: 100%;
  margin-top: 7px;
  padding: 7px;
  border: 1px solid #facc15;
  border-radius: 8px;
  background: linear-gradient(135deg, #a16207, #eab308);
  color: #fff;
  cursor: pointer;
  font: 18px "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
}

.wo-achievement-reward button:disabled {
  border-color: rgba(147, 197, 253, 0.25);
  background: rgba(30, 58, 138, 0.25);
  color: #93c5fd;
  cursor: default;
}

.wo-achievement.claimed .wo-achievement-reward button:disabled {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(22, 101, 52, 0.35);
  color: #86efac;
}

/* tabs */
.wo-ach-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-top: 14px;
}

.wo-ach-tab {
  position: relative;
  padding: 8px 14px;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 9px;
  background: rgba(30, 58, 138, 0.22);
  color: #bfdbfe;
  cursor: pointer;
  font: 700 13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  transition: border-color 0.18s, color 0.18s;
  overflow: visible;
}

.wo-ach-tab.active {
  border-color: #ffd700;
  background: rgba(161, 98, 7, 0.3);
  color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.18);
}

.wo-ach-tab:hover:not(.active) {
  border-color: #93c5fd;
  color: #dbeafe;
}

.wo-ach-tab-new {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ef4444;
  color: #fff;
  font: 900 7.5px "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  clip-path: polygon(50% 0%,56% 26%,76% 5%,69% 32%,100% 40%,75% 52%,90% 78%,65% 67%,62% 100%,52% 76%,32% 96%,40% 67%,2% 60%,28% 52%,18% 10%,38% 30%);
  pointer-events: none;
  animation: wc-new-badge 1.5s ease-in-out infinite;
}

@keyframes wc-new-badge {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-4deg); }
  50%       { transform: translateX(-50%) scale(1.15) rotate(5deg); }
}

/* badge reveal overlay */
.wo-badge-reveal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.88), rgba(2, 6, 24, 0.97) 65%);
}

.wo-badge-reveal.open { display: flex; }

.wo-badge-reveal-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 56px;
  border: 1.5px solid rgba(255, 215, 0, 0.5);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(10, 24, 80, 0.98), rgba(3, 9, 35, 0.99));
  box-shadow: 0 0 80px rgba(255, 215, 0, 0.22), 0 24px 80px rgba(0, 0, 0, 0.7);
}

.wo-badge-reveal-label {
  color: #93c5fd;
  font: 700 12px "Barlow Condensed", sans-serif;
  letter-spacing: 0.28em;
}

.wo-badge-reveal-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  animation: woBadgePop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes woBadgePop {
  from { opacity: 0; transform: scale(0.35) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* badges screen */
.wo-badges-panel { max-width: 860px; }

.wo-badges-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.wo-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.wo-badge-item img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.wo-badge-item span {
  color: #fde68a;
  font: 700 11px "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
}

.wo-badges-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: #93c5fd;
  font: 30px "Bebas Neue", sans-serif;
  letter-spacing: 0.12em;
}

/* reveal animation for newly unlocked chain step */
.wo-achievement-new {
  animation: woAchReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes woAchReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 800px) {
  .wo-achievements-grid { grid-template-columns: 1fr; }
  .wo-achievement { grid-template-columns: 48px 1fr 88px; gap: 10px; }
  .wo-badges-grid { grid-template-columns: repeat(3, 1fr); }
}

/* settings screen */
.wc-settings-panel { max-width: 560px; }

.wc-settings-row {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wc-settings-label {
  font: 700 clamp(13px, 1.4vw, 17px) "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  color: #f0c040;
}

.wc-vol-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wc-vol-slider {
  flex: 1;
  accent-color: #f0c040;
  height: 6px;
  cursor: pointer;
}

.wc-vol-val {
  font: 800 20px "Barlow Condensed", sans-serif;
  min-width: 36px;
  text-align: right;
  color: #fff;
}

.wc-mute-badge {
  font: 700 13px "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  color: #ef4444;
}

.wc-toggle-wrap {
  display: flex;
  gap: 10px;
}

.wc-toggle-btn {
  padding: 10px 32px;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: transparent;
  color: #aaa;
  font: 700 15px "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
}

.wc-toggle-btn.active {
  border-color: #f0c040;
  background: rgba(240,192,64,.18);
  color: #f0c040;
}

/* leaderboard screen */
.wo-leaderboard-panel { max-width: 780px; }

.wo-lb-myrank {
  font: 700 clamp(13px, 1.4vw, 17px) "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  color: #f0c040;
  align-self: center;
  white-space: nowrap;
}

.wo-lb-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wo-lb-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  font: 600 clamp(13px, 1.3vw, 16px) "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
}

.wo-lb-row.wo-lb-me {
  background: rgba(240,192,64,.18);
  outline: 2px solid #f0c040;
  color: #f0c040;
}

.wo-lb-num  { color: #aaa; font-size: .9em; }
.wo-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-lb-score { font-weight: 800; color: #a8edca; white-space: nowrap; }

.wo-lb-loading, .wo-lb-empty, .wo-lb-error {
  text-align: center;
  padding: 40px;
  font: 600 16px "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  color: #aaa;
}

/* ═══════════ ADVENTURE RUN ═══════════ */
.adv-map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #0a0f0a;
}

/* HUD */
.adv-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(240,192,64,.3);
  flex-shrink: 0;
  gap: 16px;
}

.adv-hud-left  { display: flex; flex-direction: column; gap: 4px; }
.adv-hud-right { display: flex; align-items: center; gap: 18px; }

.adv-hud-title {
  font: 800 clamp(14px,1.6vw,20px) "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  color: #f0c040;
}

.adv-hud-lives { display: flex; gap: 4px; }

.adv-heart {
  font-size: clamp(16px, 2vw, 22px);
  color: #ef4444;
  line-height: 1;
}

.adv-heart.lost { color: rgba(255,255,255,.18); }


.adv-exit-btn {
  padding: 8px 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #aaa;
  font: 700 13px "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  cursor: pointer;
}

.adv-exit-btn:hover { border-color: #ef4444; color: #ef4444; }

/* Map container — 16:9 sabit oran, tam fit */
.adv-map-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0f0a;
}

.adv-map-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

.adv-map-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  pointer-events: none;
}

.adv-map-inner .adv-map-svg,
.adv-map-inner .adv-map-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.adv-map-svg {
  pointer-events: none;
}

.adv-line {
  stroke: rgba(255,255,255,.18);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.adv-line.done, .adv-line--done {
  stroke: #f0c040;
  stroke-width: 3.5;
  stroke-dasharray: none;
  opacity: .7;
}

.adv-line.live, .adv-line--live {
  stroke: #a8edca;
  stroke-width: 3.5;
  stroke-dasharray: none;
}

.adv-map-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Node buttons */
.adv-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,.6);
  border: 2px solid var(--nc, #fff);
  border-radius: 50%;
  width: clamp(44px, 5.5vw, 68px);
  height: clamp(44px, 5.5vw, 68px);
  cursor: default;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}

.adv-node-icon  { font-size: clamp(14px, 1.8vw, 22px); line-height: 1; }
.adv-node-label {
  font: 700 clamp(7px, .8vw, 10px) "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  color: var(--nc, #fff);
  white-space: nowrap;
  position: absolute;
  bottom: -16px;
}
.adv-node-cat-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: clamp(9px, 1vw, 13px);
  background: #fbbf24;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px #0006;
}

/* States */
.adv-node--avail {
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(168,237,202,.25), 0 0 18px var(--nc);
  animation: adv-pulse 1.4s ease-in-out infinite;
}

.adv-node--avail:hover {
  transform: translate(-50%,-50%) scale(1.15);
  box-shadow: 0 0 0 6px rgba(168,237,202,.4), 0 0 28px var(--nc);
}

.adv-node--cur {
  box-shadow: 0 0 0 5px rgba(240,192,64,.5), 0 0 24px #f0c040;
  border-color: #f0c040;
}

.adv-node--done {
  opacity: .5;
  filter: grayscale(.5);
}

.adv-node--locked {
  opacity: .25;
  filter: grayscale(.8);
  border-color: rgba(255,255,255,.2);
}

@keyframes adv-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(168,237,202,.2), 0 0 14px var(--nc); }
  50%      { box-shadow: 0 0 0 7px rgba(168,237,202,.4), 0 0 28px var(--nc); }
}

/* ── JOKER HUD BUTTON ── */
.adv-joker-btn-hud {
  padding: 5px 12px;
  background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
  border: 1px solid rgba(167,139,250,.5);
  border-radius: 8px;
  color: #e0d7ff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: filter .12s, transform .1s;
  white-space: nowrap;
}
.adv-joker-btn-hud:hover    { filter: brightness(1.3); }
.adv-joker-btn-hud:active   { transform: scale(.95); }
.adv-joker-btn-hud:disabled { opacity: .35; cursor: default; }

/* ── JOKER SELECT OVERLAY ── */
.adv-joker-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-joker-panel {
  background: linear-gradient(160deg, #1e1b4b 0%, #0f0e2a 100%);
  border: 1px solid rgba(167,139,250,.4);
  border-radius: 14px;
  padding: 20px 24px 16px;
  min-width: 280px;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.adv-joker-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: .1em;
  color: #a78bfa;
  text-align: center;
  margin-bottom: 4px;
}
.adv-joker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adv-joker-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 10px;
  color: #e0d7ff;
  cursor: pointer;
  text-align: left;
  transition: background .12s, transform .1s;
  width: 100%;
}
.adv-joker-choice:hover  { background: rgba(167,139,250,.2); }
.adv-joker-choice:active { transform: scale(.97); }
.ajc-icon  { font-size: 1.8em; flex-shrink: 0; }
.ajc-info  { display: flex; flex-direction: column; flex: 1; }
.ajc-name  { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(13px,1.4vw,17px); font-weight: 800; letter-spacing: .06em; }
.ajc-desc  { font-size: clamp(10px,1vw,12px); color: rgba(224,215,255,.55); margin-top: 1px; }
.ajc-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px,1.3vw,16px);
  font-weight: 700;
  color: #a78bfa;
  flex-shrink: 0;
}
.adv-joker-cancel {
  margin-top: 4px;
  padding: 7px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: rgba(255,255,255,.45);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(11px,1.1vw,14px);
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.adv-joker-cancel:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── ADVENTURE ENEMY HP BAR ── */
.wo-progress-fill.adv-hp-bar {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 0 8px rgba(239,68,68,.5);
  transition: width .3s ease;
}

/* ── GAME HUD ADV LIVES ── */
.adv-lives-val {
  color: #f87171;
  letter-spacing: .06em;
}

/* ── ADV HUD GOLD ── */
.adv-hud-gold {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* ── EXIT CONFIRM OVERLAY ── */
.adv-exit-confirm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.adv-exit-confirm-overlay.open { opacity: 1; pointer-events: auto; }

.adv-exit-confirm-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  background: linear-gradient(160deg, #1a1200 0%, #2a1f00 100%);
  border: 2px solid rgba(251,191,36,.3);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 44px) clamp(32px, 4.5vw, 64px);
  box-shadow: 0 0 50px rgba(251,191,36,.15);
  text-align: center;
}
.adv-exit-confirm-icon {
  font-size: clamp(28px, 3.5vw, 48px);
  filter: drop-shadow(0 0 8px #fbbf24);
}
.adv-exit-confirm-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .1em;
  color: #fbbf24;
}
.adv-exit-confirm-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px, 1.3vw, 17px);
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
.adv-exit-confirm-btns {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.adv-exit-confirm-btn {
  padding: clamp(9px, 1.1vw, 14px) clamp(20px, 2.5vw, 36px);
  border: none;
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  transition: filter .12s;
}
.adv-exit-confirm-btn:active { transform: scale(.97); }
.adv-exit-confirm-btn--cancel {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2);
}
.adv-exit-confirm-btn--cancel:hover { background: rgba(255,255,255,.18); color: #fff; }
.adv-exit-confirm-btn--exit {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 3px 12px rgba(239,68,68,.35);
}
.adv-exit-confirm-btn--exit:hover { filter: brightness(1.1); }

/* ── SHOP OVERLAY ── */
.adv-shop-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 70;
}
.adv-shop-overlay.open { display: flex; }
.adv-shop-panel {
  display: flex;
  flex-direction: row;
  background: linear-gradient(160deg, #1a1207 0%, #0d0a04 100%);
  border: 2px solid rgba(251,191,36,.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.75);
  max-width: 780px;
  width: 95%;
  max-height: 90vh;
}
.adv-shop-img {
  width: 260px;
  min-width: 180px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.adv-shop-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  gap: 12px;
  overflow-y: auto;
}
.adv-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adv-shop-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: .1em;
  color: #fbbf24;
}
.adv-shop-gold {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  color: #fde68a;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 8px;
  padding: 4px 12px;
}
.adv-shop-items { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.adv-shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px;
  color: #fde68a;
  cursor: pointer;
  text-align: left;
  transition: background .12s, transform .1s;
  width: 100%;
}
.adv-shop-item:hover:not(:disabled)  { background: rgba(251,191,36,.18); }
.adv-shop-item:active:not(:disabled) { transform: scale(.97); }
.adv-shop-item.disabled, .adv-shop-item:disabled { opacity: .35; cursor: default; }
.asi-icon  { font-size: 1.7em; flex-shrink: 0; }
.asi-info  { display: flex; flex-direction: column; flex: 1; }
.asi-name  { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(13px,1.4vw,17px); font-weight: 800; letter-spacing: .06em; }
.asi-desc  { font-size: clamp(10px,1vw,12px); color: rgba(253,230,138,.55); margin-top: 1px; }
.asi-price { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(13px,1.4vw,17px); font-weight: 700; color: #fbbf24; flex-shrink: 0; }
.adv-shop-leave {
  padding: 10px;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 10px;
  color: #fbbf24;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px,1.4vw,17px);
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .12s;
}
.adv-shop-leave:hover { background: rgba(251,191,36,.25); }

/* ── ADVENTURE COMPLETED OVERLAY ── */
.adv-completed-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 75;
}
.adv-completed-overlay.open { display: flex; }
.adv-completed-panel {
  background: linear-gradient(160deg, #1b2a1b 0%, #0a150a 100%);
  border: 2px solid rgba(74,222,128,.35);
  border-radius: 18px;
  padding: 30px 36px 24px;
  max-width: 420px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.75);
}
.adv-completed-icon { font-size: 3em; }
.adv-completed-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: .12em;
  color: #4ade80;
  text-align: center;
}
.adv-completed-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adv-cs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
}
.adv-cs-bonus { background: rgba(74,222,128,.08); }
.adv-cs-total {
  background: rgba(74,222,128,.15);
  border: 1px solid rgba(74,222,128,.3);
  margin-top: 4px;
}
.adv-cs-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px,1.3vw,15px);
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
}
.adv-cs-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px,1.5vw,18px);
  font-weight: 800;
  color: #e2e8f0;
}
.adv-cs-bonus .adv-cs-val  { color: #4ade80; }
.adv-cs-total .adv-cs-label,
.adv-cs-total .adv-cs-val  { color: #4ade80; font-size: clamp(15px,1.6vw,20px); }
.adv-completed-btn {
  padding: 11px 28px;
  background: rgba(74,222,128,.15);
  border: 1px solid rgba(74,222,128,.4);
  border-radius: 10px;
  color: #4ade80;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px,1.5vw,18px);
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .12s;
}
.adv-completed-btn:hover { background: rgba(74,222,128,.3); }

/* ── RUN FAILED OVERLAY ── */
.adv-run-failed-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.adv-run-failed-overlay.open { opacity: 1; pointer-events: auto; }

.adv-run-failed-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  background: linear-gradient(160deg, #1a0505 0%, #2d0a0a 100%);
  border: 2px solid rgba(239,68,68,.4);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 52px) clamp(36px, 5vw, 72px);
  box-shadow: 0 0 60px rgba(239,68,68,.2);
  text-align: center;
}
.adv-run-failed-icon {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  filter: drop-shadow(0 0 12px #ef4444);
}
.adv-run-failed-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 900;
  letter-spacing: .12em;
  color: #f87171;
  text-shadow: 0 0 20px rgba(239,68,68,.6);
}
.adv-run-failed-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px, 1.5vw, 19px);
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
.adv-run-failed-gold {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .04em;
}
.adv-run-failed-btn {
  margin-top: 8px;
  padding: clamp(10px, 1.2vw, 16px) clamp(24px, 3vw, 44px);
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.4);
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: .1em;
  color: #fca5a5;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.adv-run-failed-btn:hover { background: rgba(239,68,68,.28); color: #fff; }

/* ── ADV PREVIEW OVERLAY ── */
.adv-prev-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.adv-prev-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.adv-prev-panel {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 36px) clamp(22px, 3vw, 48px);
  width: min(520px, 90vw);
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 18px);
}

.adv-prev-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: clamp(8px, 1vw, 14px);
}

.adv-prev-type-icon {
  font-size: clamp(18px, 2.2vw, 28px);
  filter: drop-shadow(0 0 6px var(--nc, #60a5fa));
}
.adv-prev-type-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--nc, #60a5fa);
  text-shadow: 0 0 10px var(--nc, #60a5fa);
}

.adv-prev-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 900;
  letter-spacing: .08em;
  color: #f1f5f9;
  line-height: 1;
}
.adv-prev-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  margin-top: -4px;
}
.adv-prev-flavor {
  font-size: clamp(10px, 1.1vw, 14px);
  color: rgba(255,255,255,.38);
  font-style: italic;
  line-height: 1.4;
}

.adv-prev-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: clamp(8px, 1vw, 14px);
}

.adv-prev-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.adv-prev-stat-row--warn {
  background: rgba(239,68,68,.08);
}
.adv-prev-stat-icon {
  font-size: clamp(13px, 1.5vw, 18px);
  width: 22px;
  text-align: center;
}
.adv-prev-stat-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  flex: 1;
}
.adv-prev-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: .04em;
}
.adv-prev-stat-row--warn .adv-prev-stat-val { color: #f87171; }
.adv-prev-lives-val { color: #f87171; letter-spacing: .06em; }

.adv-prev-units-row { flex-wrap: wrap; }
.adv-prev-units-val {
  font-size: clamp(10px, 1.1vw, 14px);
  color: #a5b4fc;
  font-weight: 600;
}

.adv-prev-footer {
  display: flex;
  gap: 14px;
  padding-top: clamp(6px, .8vw, 12px);
}

.adv-prev-btn {
  flex: 1;
  padding: clamp(10px, 1.2vw, 16px) 0;
  border: none;
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  transition: filter .12s, transform .1s;
}
.adv-prev-btn:active { transform: scale(.97); }

.adv-prev-btn--cancel {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.15);
}
.adv-prev-btn--cancel:hover { background: rgba(255,255,255,.14); color: #fff; }

.adv-prev-btn--enter {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34,197,94,.35);
}
.adv-prev-btn--enter:hover { filter: brightness(1.1); }

@media (orientation: portrait) and (max-width: 820px) {
  .rotate-overlay {
    display: flex;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #menu-screen,
  #hub-screen {
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .main-menu-controls {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    transform: scale(0.88);
    transform-origin: top right;
  }

  .main-menu-shell {
    width: min(520px, 72vw);
    padding: 12px 18px;
  }

  .menu-logo {
    max-height: 96px;
    margin-bottom: 12px;
  }

  .main-menu-shell h1 {
    margin-bottom: 14px;
    font-size: 58px;
  }

  .main-menu-actions {
    gap: 8px;
  }

  .primary-btn,
  .secondary-btn {
    min-width: 150px;
    padding: 9px 22px;
  }

  .menu-hub {
    width: min(1120px, 100%);
    gap: 6px;
    padding: 0 40px 40px;
  }

  .hub-logo {
    max-height: clamp(54px, 16vh, 76px);
  }

  .menu-hub-head h1 {
    font-size: 52px;
  }

  .menu-hub-head p {
    display: none;
  }

  .mode-chart-row {
    --chart-gap: 4px;
    max-height: none;
    overflow: visible;
  }

  .mode-chart {
    flex-basis: calc((100% - (3 * var(--chart-gap))) / 4);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  }

  .mode-chart.disabled::after,
  .mode-chart[data-daily-progress]::after {
    padding: 2px 5px;
    font-size: 8px;
  }

  .profile-chart-score {
    font-size: clamp(8px, 1.15vw, 13px);
  }

  #profile-btn .profile-chart-avatar {
    width: 26px;
    height: 26px;
  }

  .hub-main-menu-btn {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(5px, env(safe-area-inset-bottom));
    width: 166px;
    transform: none;
  }

  .hub-main-menu-btn:hover {
    transform: translateY(-2px) scale(1.02);
  }

  .hub-main-menu-btn span {
    font-size: 20px;
  }

  .wo-panel,
  .campaign-panel,
  .campaign-ready-panel,
  .daily-panel,
  .wo-profile-panel,
  .wo-achievements-panel,
  .wo-badges-panel,
  .confirm-box,
  .result-shell {
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    overflow-y: auto;
  }

  .campaign-panel {
    width: min(980px, calc(100vw - 20px));
  }

  .campaign-head {
    margin-bottom: 8px;
  }

  .campaign-title {
    font-size: 42px;
  }

  .campaign-subtitle {
    font-size: 11px;
  }

  .campaign-level-grid {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
    gap: 8px;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    padding-right: 2px;
  }

  .campaign-level-card {
    min-height: 90px;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 9px;
  }

  .campaign-level-card strong {
    font-size: 24px;
  }

  .campaign-level-card span,
  .campaign-level-card b {
    font-size: 10px;
  }

  .campaign-level-card small {
    font-size: 9px;
  }

  .campaign-level-card em {
    font-size: 16px;
  }

  .campaign-ready-panel {
    width: min(640px, calc(100vw - 20px));
    padding: 16px;
  }

  .campaign-ready-title {
    font-size: 36px;
  }

  .campaign-ready-subtitle {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .campaign-ready-stars {
    gap: 7px;
    margin-bottom: 10px;
  }

  .campaign-ready-star {
    grid-template-columns: 96px 1fr;
    min-height: 50px;
    padding: 8px 46px 8px 12px;
  }

  .campaign-ready-star span,
  .campaign-ready-star strong {
    font-size: 21px;
  }

  .campaign-ready-star small {
    font-size: 9px;
  }

  .campaign-ready-check {
    right: 12px;
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .campaign-ready-actions {
    gap: 8px;
  }

  .daily-panel {
    width: min(700px, calc(100vw - 20px));
    padding: 16px;
  }

  .daily-head {
    margin-bottom: 10px;
  }

  .daily-title {
    font-size: 38px;
  }

  .daily-row {
    min-height: 58px;
    padding: 8px 10px;
  }

  .daily-main strong {
    font-size: 19px;
  }

  .adv-hud {
    padding:
      5px max(10px, env(safe-area-inset-right))
      5px max(10px, env(safe-area-inset-left));
    gap: 8px;
  }

  .adv-hud-title {
    font-size: 13px;
  }

  .adv-hud-right {
    gap: 8px;
  }

  .adv-heart,
  .adv-hud-gold {
    font-size: 14px;
  }

  .adv-exit-btn,
  .adv-joker-btn-hud {
    padding: 5px 9px;
    font-size: 11px;
  }

  .adv-node {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
  }

  .adv-node-icon {
    font-size: 14px;
  }

  .adv-node-label {
    display: none;
  }

  .adv-node-cat-badge {
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .adv-joker-panel,
  .adv-shop-panel,
  .adv-completed-panel,
  .adv-run-failed-panel,
  .adv-exit-confirm-panel,
  .adv-prev-panel {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }
}

@media (orientation: landscape) and (max-height: 380px) {
  .menu-logo,
  .hub-logo {
    max-height: 54px;
  }

  .menu-hub {
    gap: 4px;
    padding-bottom: 34px;
  }

  .hub-main-menu-btn {
    width: 142px;
  }

  .hub-main-menu-btn span {
    font-size: 17px;
  }

  .campaign-level-grid {
    grid-template-columns: repeat(5, minmax(76px, 1fr));
    gap: 6px;
  }

  .campaign-level-card {
    min-height: 74px;
    padding: 7px 8px;
  }
}

@media (max-width: 920px) {
  #profile-btn .profile-chart-avatar,
  #profile-btn .profile-chart-score {
    display: none;
  }
}