:root {
  --bg: #1e293b;
  /* Lighter navy */
  --panel: #334155;
  /* Slate */
  --panel2: #1e293b;
  --text: #f1f5f9;
  --muted: #cbd5e1;
  --line: rgba(255, 255, 255, .15);
  --good: #3ddc97;
  --bad: #ff5c5c;
  --warn: #ffcc66;
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 900px at 50% 0%, #1a2639 0%, var(--bg) 80%),
    radial-gradient(900px 700px at 90% 20%, #2a1650 0%, rgba(0, 0, 0, 0) 55%);
  color: var(--text);
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
  /* Stretches sidebar to match board height */
}

/* ... existing media query ... */

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
  height: 100%;
  /* Take full height provided by grid stretch */
  display: flex;
  flex-direction: column;
}

/* ... existing styles ... */

.side {
  padding: 14px 14px 10px 14px;
  flex: 1;
  /* Fill the card vertical space */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Important for nested flex scroll */
}

.helpContent {
  margin-top: 15px;
  animation: slideDown 0.3s ease-out;
  /* max-height removed to allow filling space */
  flex: 1;
  /* Fill remaining space in .side */
  overflow-y: auto;
  /* Scroll internally */
  min-height: 0;
  /* Crucial for scrolling inside flex */
  padding-right: 5px;
}

@media (max-width: 980px) {
  .wrap {
    grid-template-columns: 1fr;
  }
}


.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ... */

.side {
  padding: 14px 14px 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ... */

.helpContent {
  margin-top: 15px;
  animation: slideDown 0.3s ease-out;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 5px;
}

.header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border-bottom: 1px solid var(--line);
}

.title {
  font-weight: 800;
  letter-spacing: -.2px;
}

.titleLine {
  display: flex;
  align-items: center;
  gap: 10px;
}

.turnTimer {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  font-weight: 900;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.turnTimer .timerIcon {
  opacity: .9;
  font-size: 14px;
  line-height: 1;
}

.turnTimer .timerNum {
  font-size: 14px;
  line-height: 1;
}

.turnTimer .timerNum.danger {
  color: var(--bad) !important;
}

.turnTimer.danger {
  border-color: rgba(255, 92, 92, .45);
  box-shadow: 0 0 0 1px rgba(255, 92, 92, .12) inset;
}

body.turn-cpu .turnTimer {
  opacity: .35;
}

.sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.btnbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
}

button:hover {
  background: rgba(255, 255, 255, .10)
}

button:disabled {
  opacity: .5;
  cursor: not-allowed
}

.ghost {
  background: transparent
}

/* board */
.boardWrap {
  padding: 16px;
}

.board {
  width: min(92vw, 80vmin, 680px);
  aspect-ratio: 1/1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  margin: 0 auto;
  user-select: none;
}

.sq {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .04);
  font-weight: 800;
  font-size: clamp(10px, 1.8vmin, 14px);
  transition: background .15s ease;
}

.sq:hover {
  background: rgba(255, 255, 255, .08);
}

.light {
  background: rgba(255, 255, 255, .07)
}

.dark {
  background: rgba(0, 0, 0, .2)
}

.piece {
  width: 78%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  height: 78%;
  min-height: 0;
  flex: 0 0 auto;
  border-radius: clamp(10px, 2.2vmin, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  gap: clamp(1px, 0.4vmin, 4px);
  flex-direction: column;
  padding: clamp(2px, 0.6vmin, 4px);
  text-align: center;
  backdrop-filter: blur(4px);
}

/* Human: Green/Teal Sci-fi */
/* Human: Vibrant Teal/Green */
.p-h {
  background: linear-gradient(135deg, rgba(50, 240, 180, .4), rgba(20, 120, 90, .8));
  border-color: rgba(100, 255, 200, 0.6);
  box-shadow: 0 4px 15px rgba(40, 200, 150, 0.3);
}

/* CPU: Red/Crimson Sci-fi */
/* CPU: Vibrant Neon Red */
.p-c {
  background: linear-gradient(135deg, rgba(255, 100, 100, .4), rgba(180, 40, 40, .8));
  border-color: rgba(255, 120, 120, 0.6);
  box-shadow: 0 4px 15px rgba(255, 80, 80, 0.3);
}

.badge {
  font-size: clamp(10px, 1.6vmin, 12px);
  opacity: .9;
  letter-spacing: -.2px;
  line-height: 1.1;
}

.small {
  margin-top: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(8px, 1.4vmin, 10px);
  color: var(--muted);
  font-weight: 650;
}

.selectRing::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, .65);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
  pointer-events: none;
}

.hintMove::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 2px dashed rgba(255, 255, 255, .45);
  pointer-events: none;
}

.hintCapture::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 2px solid rgba(255, 204, 102, .75);
  pointer-events: none;
}

/* side */
.side {
  padding: 14px 14px 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ... */

.helpContent {
  margin-top: 15px;
  animation: slideDown 0.3s ease-out;
  /* max-height: 340px; REMOVED */
  /* Reduced to align with board bottom REMOVED */
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 5px;
}

.status {
  padding: 12px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  font-weight: 750;
  font-size: 12px;
}

.pill.good {
  border-color: rgba(61, 220, 151, .45)
}

.pill.bad {
  border-color: rgba(255, 92, 92, .45)
}

.log {
  margin-top: 12px;
  height: 320px;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-line;
}

.help {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .18);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  background: rgba(255, 255, 255, .03);
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--text)
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.toast.show {
  opacity: 1
}

.insignia {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.badge {
  font-size: clamp(10px, 1.6vmin, 12px);
  opacity: .9;
  letter-spacing: -.2px;
  line-height: 1.1;
}




/* --- Insignia width normalization (prevent rank inference on small screens) --- */
.insStripes,
.insChevrons,
.insStars,
.insFlowers,
.insDiamonds {
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.insText {
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Insignia (compact) --- */
.piece {
  padding: clamp(2px, 0.8vmin, 6px);
  position: relative;
  /* Ensure badge positioning relative to piece */
}

.flag-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  line-height: 1;
  z-index: 5;
}

/* Specific colors for Human vs CPU badges */
.p-h .flag-badge {
  background: rgba(20, 120, 90, 0.85);
  border-color: rgba(100, 255, 200, 0.5);
  color: #e0fcf5;
}

.p-c .flag-badge {
  background: rgba(180, 40, 40, 0.85);
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffe0e0;
}

.insigniaWrap {
  width: 100%;
  height: clamp(14px, 2.6vmin, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.insText {
  font-size: clamp(9px, 1.6vmin, 12px);
  font-weight: 900;
  letter-spacing: -.3px;
  white-space: nowrap;
}

/* 상대 말(비공개) 표시: 악마/적군 느낌 */
.insEnemy {
  font-size: clamp(14px, 2.6vmin, 20px);
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 80, 80, .55));
}

.insStars {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
}

.insStripes {
  width: 44px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 5px;
  gap: 2px;
}

.insStripes .hbar,
.insStripes .bar {
  width: 100%;
  height: 2px;
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.insChevrons {
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.insChevrons .chev {
  width: 26px;
  height: 10px;
  position: relative;
}

.insChevrons .chev::before,
.insChevrons .chev::after {
  content: "";
  position: absolute;
  top: clamp(2px, 0.6vmin, 3px);
  width: clamp(10px, 2.4vmin, 16px);
  height: clamp(2px, 0.6vmin, 3px);
  border-radius: 2px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.insChevrons .chev::before {
  left: 0;
  transform: rotate(35deg);
  transform-origin: left center;
}

.insChevrons .chev::after {
  right: 0;
  transform: rotate(-35deg);
  transform-origin: right center;
}

.insDiamonds {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  height: clamp(12px, 2.2vmin, 16px);
}

.dia {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.dia.gold {
  background: rgba(255, 210, 110, .95);
  border-color: rgba(255, 210, 110, .55);
}

.insDiamondBar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.insDiamondBar .barline {
  width: clamp(12px, 2.6vmin, 18px);
  height: clamp(2px, 0.6vmin, 3px);
  border-radius: 2px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

/* --- Win/Lose Overlay --- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 999;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlayCard {
  width: min(560px, 92vw);
  padding: 22px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .10));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  text-align: center;
  transform: translateY(10px) scale(.98);
  transition: transform .22s ease;
}

.overlay.show .overlayCard {
  transform: translateY(0) scale(1);
}

.overlayTitle {
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -1px;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(61, 220, 151, 1), rgba(255, 204, 102, 1), rgba(120, 170, 255, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 40px rgba(0, 0, 0, .40);
}

.overlayTitle.lose {
  background: linear-gradient(90deg, rgba(255, 92, 92, 1), rgba(255, 204, 102, 1), rgba(255, 255, 255, .9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.overlaySub {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
}

.overlayBtns {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.insFlowers {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.flower {
  width: 16px;
  height: clamp(12px, 2.2vmin, 16px);
  border-radius: 50%;
  /* petal-like look via conic gradient */
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .95) 0 22%, rgba(255, 255, 255, 0) 23% 100%),
    conic-gradient(from 0deg,
      rgba(255, 255, 255, .95) 0 18deg,
      rgba(200, 215, 235, .65) 18deg 45deg,
      rgba(255, 255, 255, .95) 45deg 63deg,
      rgba(200, 215, 235, .65) 63deg 90deg,
      rgba(255, 255, 255, .95) 90deg 108deg,
      rgba(200, 215, 235, .65) 108deg 135deg,
      rgba(255, 255, 255, .95) 135deg 153deg,
      rgba(200, 215, 235, .65) 153deg 180deg,
      rgba(255, 255, 255, .95) 180deg 198deg,
      rgba(200, 215, 235, .65) 198deg 225deg,
      rgba(255, 255, 255, .95) 225deg 243deg,
      rgba(200, 215, 235, .65) 243deg 270deg,
      rgba(255, 255, 255, .95) 270deg 288deg,
      rgba(200, 215, 235, .65) 288deg 315deg,
      rgba(255, 255, 255, .95) 315deg 333deg,
      rgba(200, 215, 235, .65) 333deg 360deg);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.overlayTitle.draw {
  background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(160, 200, 255, 1), rgba(255, 204, 102, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* === Turn indicators & last-move highlight === */
/* Result overlay: reduce left/right empty space */
.overlayCard {
  width: fit-content;
  max-width: min(82vw, 420px);
  padding: 16px 18px;
}

.overlayTitle {
  letter-spacing: 0.5px;
}

.overlaySub {
  max-width: 44ch;
}

/* Turn clarity: dim the side that is NOT acting */
body.turn-human .piece.p-c {
  opacity: 0.42;
  filter: saturate(0.65) contrast(0.95);
}

body.turn-human .piece.p-h {
  opacity: 1;
}

body.turn-cpu .piece.p-h {
  opacity: 0.42;
  filter: saturate(0.65) contrast(0.95);
}

body.turn-cpu .piece.p-c {
  opacity: 1;
}

/* Last moved piece highlight */
.sq.last-move {
  position: relative;
}

.sq.last-move::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  animation: pulseRing 1.1s ease-in-out infinite;
}

@keyframes pulseRing {

  0%,
  100% {
    transform: scale(1);
    opacity: .85;
  }

  50% {
    transform: scale(1.02);
    opacity: .55;
  }
}

/* Pills */
#lastActorPill,
#lastMovePill {
  font-variant-numeric: tabular-nums;
}

body.turn-human #turnPill {
  box-shadow: 0 0 0 1px rgba(60, 200, 120, .35) inset;
}

body.turn-cpu #turnPill {
  box-shadow: 0 0 0 1px rgba(120, 160, 255, .35) inset;
}



/* === Collision banner (Boom! 쾅!) === */
.battleBanner {
  position: fixed;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%) translateY(6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 55;
}

.battleBanner.show {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

/* When we have a clash location, anchor near it */
.battleBanner.pos {
  transform: translate(-50%, -120%) translateY(6px);
}

.battleBanner.pos.show {
  transform: translate(-50%, -120%) translateY(0);
}

.battleBannerInner {
  background: rgba(18, 10, 12, 0.78);
  border: 1px solid rgba(255, 90, 120, 0.18);
  border-radius: 18px;
  padding: 20px 16px 13px;
  min-width: 0;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 100, 140, .06) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.battleBannerTitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}

.boomIcon {
  width: 64px;
  height: 64px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
  animation: boomPop .22s ease-out;
  /* inline SVG explosion (no extra asset file) */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2250%%22%20cy%3D%2245%%22%20r%3D%2260%%22%3E%0A%3Cstop%20offset%3D%220%%22%20stop-color%3D%22%23fff6a6%22%2F%3E%3Cstop%20offset%3D%2245%%22%20stop-color%3D%22%23ff9a3a%22%2F%3E%0A%3Cstop%20offset%3D%2280%%22%20stop-color%3D%22%23ff3d5a%22%2F%3E%3Cstop%20offset%3D%22100%%22%20stop-color%3D%22%23210a12%22%2F%3E%0A%3C%2FradialGradient%3E%3C%2Fdefs%3E%0A%3Cpolygon%20fill%3D%22url(%23g)%22%20points%3D%2264,6%2078,36%20110,22%2096,52%20122,64%2096,76%20110,106%2078,92%2064,122%2050,92%2018,106%2032,76%206,64%2032,52%2018,22%2050,36%22%2F%3E%0A%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2222%22%20fill%3D%22%23fff6a6%22%20opacity%3D%22.25%22%2F%3E%0A%3C%2Fsvg%3E");
}

@keyframes boomPop {
  from {
    transform: scale(.85);
    opacity: .0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.battleBannerSub {
  margin-top: 8px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

.battleBannerSub.aiWin {
  color: var(--bad);
}

.battleSide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

.battleSide .insStripes,
.battleSide .insChevrons,
.battleSide .insStars,
.battleSide .insFlowers,
.battleSide .insDiamonds,
.battleSide .insText {
  width: 44px;
}

.battleSide.human {
  border-color: rgba(80, 170, 255, .45);
  background: rgba(80, 170, 255, .12);
  box-shadow: 0 0 0 1px rgba(80, 170, 255, .10) inset, 0 12px 24px rgba(0, 0, 0, .25);
}

.battleSide.cpu {
  border-color: rgba(255, 80, 110, .45);
  background: rgba(255, 80, 110, .12);
  box-shadow: 0 0 0 1px rgba(255, 80, 110, .10) inset, 0 12px 24px rgba(0, 0, 0, .25);
}

.battleVs {
  display: inline-block;
  margin: 0 10px;
  opacity: .85;
  transform: translateY(-1px);
}

/* Clash highlight (while banner is shown) */
.sq.clash {
  position: relative;
}

.sq.clash::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 2px solid rgba(255, 90, 120, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 70, 110, 0.22);
  pointer-events: none;
  animation: clashPulse .7s ease-in-out infinite;
}

@keyframes clashPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .78;
  }

  50% {
    transform: scale(1.02);
    opacity: .46;
  }
}


/* === Important ranks: 대통령 / 대법원 / 헌병 (no size change) === */
.piece.rank-pres,
.piece.rank-sc,
.piece.rank-mp {
  position: relative;
}

.piece.rank-pres {
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(255, 200, 80, .20);
}

.piece.rank-sc {
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(120, 220, 255, .18);
}

.piece.rank-mp {
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(180, 255, 160, .16);
}

.piece.rank-pres::before,
.piece.rank-sc::before,
.piece.rank-mp::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  pointer-events: none;
  opacity: .75;
}

.piece.rank-pres::before {
  border: 2px solid rgba(255, 190, 90, .55);
}

.piece.rank-sc::before {
  border: 2px solid rgba(140, 220, 255, .50);
}

.piece.rank-mp::before {
  border: 2px solid rgba(180, 255, 160, .45);
}



/* --- Battle banner: boom text + side labels + win emphasis --- */
.battleBannerTitle {
  min-height: 58px;
}

.boomWrap {
  position: absolute;
  left: 50%;
  top: -22px;
  /* lift icon above the banner */
  transform: translateX(-50%);
  width: 86px;
  height: 86px;
}

.boomWrap .boomIcon {
  width: 86px;
  height: 86px;
  margin: 0 auto;
}

.boomText {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 16px;
  color: rgba(255, 255, 255, .95);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .35),
    0 10px 20px rgba(0, 0, 0, .45);
  pointer-events: none;
  white-space: nowrap;
}

.battleCols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.battleCol {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  min-width: 72px;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.battleCol.human {
  border: 1px solid rgba(60, 160, 255, .28);
  box-shadow: 0 0 0 1px rgba(60, 160, 255, .10) inset;
}

.battleCol.cpu {
  border: 1px solid rgba(255, 70, 90, .28);
  box-shadow: 0 0 0 1px rgba(255, 70, 90, .10) inset;
}

.battleLabel {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  opacity: .95;
}

.battleCol.human .battleLabel {
  color: rgba(150, 210, 255, .95);
}

.battleCol.cpu .battleLabel {
  color: rgba(255, 130, 150, .95);
}

.devilIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}

.devilIcon::before {
  content: "😈";
}

.turnDevil {
  margin-right: 6px;
  transform: translateY(1px);
}

.turnAttacking {
  font-weight: 800;
  letter-spacing: .2px;
}

.battleCol.win {
  transform: scale(1.08);
  filter: brightness(1.25) saturate(1.2);
}

.battleCol.win.human {
  box-shadow:
    0 18px 48px rgba(60, 160, 255, .22),
    0 0 0 1px rgba(60, 160, 255, .16) inset,
    0 0 28px rgba(60, 160, 255, .18);
}

.battleCol.win.cpu {
  box-shadow:
    0 18px 48px rgba(255, 70, 90, .22),
    0 0 0 1px rgba(255, 70, 90, .16) inset,
    0 0 28px rgba(255, 70, 90, .18);
}

.battleCol.lose {
  opacity: .55;
  filter: brightness(.85) saturate(.85);
  transform: scale(.98);
}

.battleCol.draw {
  opacity: .9;
}


/* 컴퓨터(상대) 차례 중앙 안내 */
.cpuAttackOverlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(10, 12, 18, .40);
  opacity: .78;
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  font-weight: 900;
  letter-spacing: .2px;
}

.cpuAttackOverlay.hidden {
  display: none;
}

.cpuAttackOverlay .devilIcon {
  width: 26px;
  height: 26px;
  font-size: 26px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

.cpuAttackOverlay .cpuAttackText {
  font-size: 18px;
}

/* ---- CPU move readability: blink + travel clone ---- */
.sq.cpu-blink {
  position: relative;
}

.sq.cpu-blink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 60, 60, 0.4);
  animation: cpuBlinkAnim 0.3s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 10;
}

@keyframes cpuBlinkAnim {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 0.1;
  }
}

.piece.move-clone {
  will-change: transform;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
}


/* ---- Battle readability: slow fade + sparkle ---- */
.piece.piece-die {
  animation: pieceDie 650ms ease forwards;
  will-change: opacity, transform, filter;
}

@keyframes pieceDie {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }

  60% {
    opacity: 0.45;
    transform: scale(0.97);
    filter: blur(0.6px);
  }

  100% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(1.1px);
  }
}

.piece.piece-win {
  animation: pieceWin 650ms ease;
}

@keyframes pieceWin {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* White sparkle around the clash squares (helps you see where pieces disappeared) */
.sq.sparkle {
  animation: sqSparkle 900ms ease-out forwards;
}

@keyframes sqSparkle {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }

  30% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 16px rgba(255, 255, 255, 0.55),
      0 0 32px rgba(255, 255, 255, 0.25);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }
}


/* Flag piece */
.piece.rank-flag .insText {
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.piece.rank-flag.flag-human .insText {
  color: #3da0ff;
}

.piece.rank-flag.flag-cpu .insText {
  color: #ff4d4d;
}


/* --- Flags: big, bright, trendy (no text) --- */
.flag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: scale(1.15);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
  animation: flagPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

.flag-svg {
  width: 80%;
  height: 80%;
}

.flag-pole {
  fill: rgba(255, 255, 255, 0.85);
}

.flag-cloth {
  fill: currentColor;
}

.flag-shine {
  fill: rgba(255, 255, 255, 0.25);
  mix-blend-mode: screen;
}

.flag-human {
  color: rgba(70, 160, 255, 1);
  /* bright blue */
  filter: drop-shadow(0 0 14px rgba(70, 160, 255, 0.75)) drop-shadow(0 0 28px rgba(70, 160, 255, 0.35));
}

.flag-ai {
  color: rgba(255, 80, 95, 1);
  /* bright red */
  filter: drop-shadow(0 0 14px rgba(255, 80, 95, 0.75)) drop-shadow(0 0 28px rgba(255, 80, 95, 0.35));
}

@keyframes flagPulse {

  0%,
  100% {
    transform: scale(1.12);
    opacity: 1;
  }

  50% {
    transform: scale(1.20);
    opacity: 0.92;
  }
}

/* --- Flag overrides v9: larger and not boxed --- */
.sq {
  overflow: visible;
}

/* allow big flag glow to spill out */
.piece.rank-flag {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.piece.rank-flag .insigniaWrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece.rank-flag .small {
  display: none;
}

.piece.rank-flag .flag-wrap {
  position: relative;
  transform: scale(1.65);
  animation: flagPulse 1.5s ease-in-out infinite;
}

.piece.rank-flag .flag-svg {
  width: 92%;
  height: 92%;
}

/* --- Special piece styles (rank-pres/rank-sc/rank-mp/rank-acc): trendy & noticeable --- */
.piece.rank-pres,
.piece.rank-sc,
.piece.rank-mp,
.piece.rank-acc {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  animation: specialBreathe 1.8s ease-in-out infinite;
}

.piece.rank-pres {
  border-color: rgba(255, 210, 95, 0.55) !important;
  box-shadow:
    0 0 18px rgba(255, 210, 95, 0.35),
    0 0 36px rgba(255, 210, 95, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.piece.rank-sc {
  border-color: rgba(150, 120, 255, 0.60) !important;
  box-shadow:
    0 0 18px rgba(150, 120, 255, 0.32),
    0 0 36px rgba(150, 120, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.piece.rank-mp {
  border-color: rgba(90, 220, 180, 0.60) !important;
  box-shadow:
    0 0 18px rgba(90, 220, 180, 0.28),
    0 0 36px rgba(90, 220, 180, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.piece.rank-acc {
  border-color: rgba(255, 120, 170, 0.60) !important;
  box-shadow:
    0 0 18px rgba(255, 120, 170, 0.28),
    0 0 36px rgba(255, 120, 170, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

/* Corner badge (no text) */
.piece.rank-pres::after,
.piece.rank-sc::after,
.piece.rank-mp::after,
.piece.rank-acc::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.22);
  opacity: 0.95;
}

.piece.rank-pres::after {
  background: rgba(255, 210, 95, 0.95);
}

.piece.rank-sc::after {
  background: rgba(150, 120, 255, 0.95);
}

.piece.rank-mp::after {
  background: rgba(90, 220, 180, 0.95);
}

.piece.rank-acc::after {
  background: rgba(255, 120, 170, 0.95);
}

@keyframes specialBreathe {

  0%,
  100% {
    transform: scale(1.00);
    filter: saturate(1.05);
  }

  50% {
    transform: scale(1.03);
    filter: saturate(1.18);
  }
}

/* --- Special text color: bright yellow for key special pieces --- */
.piece.rank-pres .small,
.piece.rank-mp .small,
.piece.rank-acc .small,
.piece.rank-sc .small {
  color: rgba(255, 235, 120, 0.98) !important;
  text-shadow:
    0 0 10px rgba(255, 235, 120, 0.35),
    0 0 18px rgba(255, 235, 120, 0.18);
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* --- Special label layout: single bright yellow centered text for PRES/SC/MP/ACC --- */
.piece.rank-pres .insigniaWrap,
.piece.rank-sc .insigniaWrap,
.piece.rank-mp .insigniaWrap,
.piece.rank-acc .insigniaWrap {
  display: none !important;
}

.piece.rank-pres,
.piece.rank-sc,
.piece.rank-mp,
.piece.rank-acc {
  position: relative;
}

.piece.rank-pres .small,
.piece.rank-sc .small,
.piece.rank-mp .small,
.piece.rank-acc .small {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  text-align: center;
  color: rgba(255, 235, 120, 0.98) !important;
  text-shadow:
    0 0 10px rgba(255, 235, 120, 0.35),
    0 0 18px rgba(255, 235, 120, 0.18);
  font-weight: 900;
  letter-spacing: 0.4px;
  font-size: 13px;
}

/* === Important event bar (placed next to the turn timer) === */
.eventBar {
  /* keep header height stable */
  height: 34px;
  min-width: 0;

  flex: 1 1 auto;

  display: flex;
  flex-direction: column-reverse;
  /* newest on top */
  justify-content: center;
  align-items: flex-start;
  gap: 2px;

  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--warn);
  text-shadow: 0 10px 24px rgba(0, 0, 0, .45);

  /* 2-line view without layout jump */
  overflow: hidden;
  white-space: normal;

  opacity: 0.0;
  transition: opacity .18s ease;
}

.eventBar.show {
  opacity: 0.98;
}

.eventLogEntry {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.winRate {
  height: 34px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  min-width: 120px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;

  color: var(--warn);
  text-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  user-select: none;
}

.winRate .wrLabel {
  font-size: 11px;
  font-weight: 900;
  opacity: .95;
  line-height: 1.05;
  white-space: nowrap;
}

.winRate .wrScore {
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}

/* === Rank Guide (Right panel) === */
.help.helpRanks {
  padding: 12px;
}

.rankHint {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .22);
}

.rankHintRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.rankHintPill {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  font-weight: 900;
  font-size: 11px;
  color: rgba(255, 255, 255, .90);
  white-space: nowrap;
}

.rankHintPill.warn {
  border-color: rgba(255, 204, 102, .28);
  color: rgba(255, 204, 102, .95);
}

.rankHintText {
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.2;
}

.rankGrid {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rankRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
}

.rankIcon {
  width: 54px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: .95;
}

.rankText {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  font-weight: 750;
}

.specialRules {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .03);
}

.specialTitle {
  font-weight: 950;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 6px;
  font-size: 12px;
}

.specialRules ul {
  margin: 0;
  padding-left: 16px;
  color: rgba(255, 255, 255, .75);
}

.specialRules li {
  margin: 6px 0;
}

/* === Make checked parts bold & more vivid === */

/* Special Strategy title */
.specialTitle {
  font-weight: 1000;
  color: rgba(255, 255, 255, .98);
  text-shadow: 0 0 12px rgba(255, 255, 255, .18);
}

/* VIP Weak / Sniper Counter / MP Scout / Flag Goal line (the "header" of each card) */
.spHead .spName {
  font-weight: 1000;
  color: rgba(255, 255, 255, .98);
  text-shadow: 0 0 12px rgba(255, 255, 255, .18);
}

/* Badge (Weak/Counter/Scout/Goal) stronger + bolder */
.spBadge {
  font-weight: 1000;
  color: rgba(255, 255, 255, .98);
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 14px rgba(255, 255, 255, .06);
}

/* Give each badge a slightly more intense glow (still classy) */
.spBadge.danger {
  color: rgba(255, 150, 150, 1);
  border-color: rgba(255, 90, 90, .42);
  box-shadow: 0 0 18px rgba(255, 90, 90, .12);
}

.spBadge.info {
  color: rgba(195, 225, 255, 1);
  border-color: rgba(120, 180, 255, .42);
  box-shadow: 0 0 18px rgba(120, 180, 255, .12);
}

.spBadge.warn {
  color: rgba(255, 230, 185, 1);
  border-color: rgba(255, 205, 120, .40);
  box-shadow: 0 0 18px rgba(255, 205, 120, .12);
}

.spBadge.neutral {
  color: rgba(255, 255, 255, .98);
  border-color: rgba(220, 220, 220, .30);
  box-shadow: 0 0 16px rgba(255, 255, 255, .06);
}

/* 아이콘도 조금 더 또렷하게 */
.spIcon {
  color: rgba(255, 255, 255, .98);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .12));
}

/* --- New Rank Guide Diagram --- */
.hidden {
  display: none !important;
}

.helpContent {
  margin-top: 15px;
  animation: slideDown 0.3s ease-out;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 5px;
}

/* Scrollbar styling */
.helpContent::-webkit-scrollbar {
  width: 6px;
}

.helpContent::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

.helpContent::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smBtn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8em;
  cursor: pointer;
}

.smBtn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.helperSection {
  margin-bottom: 20px;
}

.secTitle {
  font-size: 0.9em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.rankFlow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rfBlock {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rfBlock.stars {
  border-color: #f6e05e;
  background: rgba(246, 224, 94, 0.1);
}

.rfBlock.flowers {
  border-color: #f687b3;
  background: rgba(246, 135, 179, 0.1);
}

.rfBlock.diamonds {
  border-color: #63b3ed;
}

.rfBlock.chevrons {
  border-color: #9f7aea;
}

.rfBlock.lines {
  border-color: #a0aec0;
}

.rfIcon {
  font-size: 1.2em;
  min-width: 50px;
  text-align: center;
}

.rfLabel {
  font-weight: 700;
  font-size: 0.95em;
  flex: 1;
  margin-left: 10px;
}

.rfDesc {
  font-size: 0.75em;
  opacity: 0.7;
}

.rfArrow {
  font-size: 0.8em;
  color: #666;
}

/* Compact Special Cards */
.specialCards.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.specialCards.compact .spCard {
  padding: 10px;
  font-size: 0.9em;
}

.spRule {
  font-size: 0.85em;
  margin-top: 4px;
  line-height: 1.3;
}

.spRule.win {
  color: #68d391;
}

.spRule.lose {
  color: #fc8181;
}

.spRule.goal {
  color: #f6e05e;
  font-weight: bold;
}

.spRule.effect {
  color: #63b3ed;
}

/* --- Landing Screen --- */
#landingScreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0f172a url('crazygameuploadData/landing_bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}

#landingScreen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.landingContent {
  background: rgba(0, 0, 0, 0.6);
  padding: 40px 60px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.05);
  animation: fadeIn 0.8s ease-out;
}

.landingTitle {
  font-size: 3.5rem;
  margin: 0 0 10px 0;
  font-weight: 800;
  letter-spacing: -1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.landingTagline {
  font-size: 1.5rem;
  color: #3ddc97;
  font-weight: 600;
  margin: 0 0 30px 0;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.landingLoader {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: pulse 1.5s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .landingTitle {
    font-size: 2.2rem;
  }

  .landingTagline {
    font-size: 1.1rem;
  }

  .landingContent {
    padding: 30px 20px;
    width: 90%;
  }
}