@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;600&display=swap');

:root {
  --sky-top:        #5bb8f5;
  --sky-mid:        #87ceeb;
  --sky-low:        #b8e4f7;
  --sky-ground:     #e0f4fd;

  --surf:           #ffffff;
  --surf2:          #f0f8ff;
  --surf3:          #dbeeff;
  --surf4:          #c8e6fa;

  --border:         #b8d9f0;
  --border2:        #90c0e8;
  --border3:        #6aaad8;

  --p1:             #2ecc40;
  --p1-dark:        #1a8a28;
  --p1-dim:         #d4f5d8;
  --p1-glow:        rgba(46,204,64,0.35);
  --p1-faint:       rgba(46,204,64,0.08);

  --p2:             #2196f3;
  --p2-dark:        #1565c0;
  --p2-dim:         #d0e8ff;
  --p2-glow:        rgba(33,150,243,0.35);
  --p2-faint:       rgba(33,150,243,0.08);

  --blocked:        #d8c8b0;
  --blocked-b:      #b8a890;

  --hl:             rgba(255,215,0,0.22);
  --hl-border:      #f4c400;

  --heat-lo:        rgba(46,204,64,0.12);
  --heat-hi:        rgba(255,80,50,0.55);

  --text:           #1a2e45;
  --text-dim:       #4a6a8a;
  --text-muted:     #8ab0cc;
  --text-light:     #ffffff;

  --accent:         #f4c400;
  --accent-dark:    #d4a800;
  --danger:         #ff4444;
  --success:        #2ecc40;
  --purple:         #9b59b6;
  --cyan:           #00bcd4;
  --orange:         #ff7c2a;
  --pink:           #ff6b9d;

  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      22px;
  --radius-pill:    999px;

  --font-d:         'Fredoka', sans-serif;
  --font-m:         'JetBrains Mono', monospace;

  --panel-w:        268px;

  --shadow-card:    0 4px 0 #90c0e8, 0 8px 24px rgba(0,60,120,0.12);
  --shadow-board:   0 8px 0 #5a9fd4, 0 16px 48px rgba(0,60,120,0.18);
  --shadow-btn:     0 4px 0 var(--accent-dark);
  --shadow-popup:   0 24px 64px rgba(0,40,100,0.22);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-m);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

body {
  background:
    radial-gradient(ellipse 220px 80px  at 10% 18%, rgba(255,255,255,0.75) 0%, transparent 70%),
    radial-gradient(ellipse 160px 60px  at 30% 14%, rgba(255,255,255,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 280px 90px  at 70% 22%, rgba(255,255,255,0.70) 0%, transparent 70%),
    radial-gradient(ellipse 180px 65px  at 88% 10%, rgba(255,255,255,0.60) 0%, transparent 70%),
    radial-gradient(ellipse 200px 70px  at 50% 55%, rgba(255,255,255,0.25) 0%, transparent 70%),
    linear-gradient(180deg, #4fb3e8 0%, #72c6f0 25%, #a0d9f8 55%, #c8eeff 80%, #dff6ff 100%);
}

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

#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
}

#transition-overlay .curtain-left,
#transition-overlay .curtain-right {
  position: absolute;
  top: 0;
  width: 55%;
  height: 100%;
  background: #0a0a0a;
}
#transition-overlay .curtain-left  { left: 0;   transform: translateX(-101%); }
#transition-overlay .curtain-right { right: 0;  transform: translateX(101%);  }

#transition-overlay .world-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  z-index: 2;
}
#transition-overlay .world-badge .wb-icon {
  font-size: 72px;
  filter: drop-shadow(0 0 30px rgba(255,220,50,0.7));
}
#transition-overlay .world-badge .wb-label {
  font-family: var(--font-d);
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 3px 0 #a05000, 0 6px 20px rgba(0,0,0,0.5);
}
#transition-overlay .world-badge .wb-sub {
  font-family: var(--font-d);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
}

#transition-overlay .world-badge::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid rgba(255,220,50,0.4);
  box-shadow: 0 0 40px rgba(255,220,50,0.3), inset 0 0 40px rgba(255,220,50,0.1);
  animation: none;
}

#transition-overlay.playing { display: block; pointer-events: all; }

@keyframes curtainIn {
  from { transform: translateX(-101%); }
  to   { transform: translateX(0); }
}
@keyframes curtainInRight {
  from { transform: translateX(101%); }
  to   { transform: translateX(0); }
}
@keyframes curtainOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-101%); }
}
@keyframes curtainOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(101%); }
}
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-5deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes badgeFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes ringPulse {
  0%,100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.15); opacity: 0.9; }
}

#transition-overlay.playing .curtain-left {
  animation: curtainIn 0.38s cubic-bezier(.77,0,.18,1) forwards;
}
#transition-overlay.playing .curtain-right {
  animation: curtainInRight 0.38s cubic-bezier(.77,0,.18,1) forwards;
}
#transition-overlay.playing.show-badge .world-badge {
  animation: badgePop 0.45s cubic-bezier(.34,1.56,.64,1) 0.35s forwards;
}
#transition-overlay.playing.show-badge .world-badge::before {
  animation: ringPulse 1.1s ease-in-out 0.8s infinite;
}
#transition-overlay.playing.exit .curtain-left {
  animation: curtainOut 0.4s cubic-bezier(.77,0,.18,1) forwards;
}
#transition-overlay.playing.exit .curtain-right {
  animation: curtainOutRight 0.4s cubic-bezier(.77,0,.18,1) forwards;
}
#transition-overlay.playing.exit .world-badge {
  animation: badgeFade 0.2s ease forwards;
}

#screen-menu {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: 0;
}

.menu-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#screen-menu .cloud-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cloud-layer::before,
.cloud-layer::after {
  content: '';
  position: absolute;
  top: 12%;
  height: 60px;
  background:
    radial-gradient(ellipse 90px 38px at 50% 50%, rgba(255,255,255,0.88) 60%, transparent 100%),
    radial-gradient(ellipse 60px 30px at 30% 60%, rgba(255,255,255,0.7) 60%, transparent 100%),
    radial-gradient(ellipse 60px 30px at 70% 60%, rgba(255,255,255,0.7) 60%, transparent 100%);
  width: 200px;
  animation: cloudDrift 22s linear infinite;
}
.cloud-layer::before { left: 5%;  animation-duration: 28s; top: 8%; }
.cloud-layer::after  { left: 55%; animation-duration: 20s; top: 18%; animation-delay: -10s; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(120vw); }
}


#screen-menu::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  background: linear-gradient(180deg, #8B5E3C 0%, #6b3f1e 100%);
  box-shadow: inset 0 4px 0 #a06030, inset 0 8px 12px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 1;
}

#screen-menu::before {
  content: '';
  position: absolute;
  bottom: 52px; left: 0; right: 0;
  height: 52px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 35%),
    linear-gradient(180deg, #6ed94a 0%, #4cbb1f 55%, #3a9918 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='52' viewBox='0 0 112 52' preserveAspectRatio='none'%3E%3Cpolygon points='0,52 0,34 4,22 8,10 12,2 14,0 16,2 18,8 20,18 22,28 24,22 26,12 28,4 30,0 32,4 34,12 36,22 38,30 40,22 42,10 44,2 46,0 48,2 50,10 52,22 54,32 56,22 58,10 60,2 62,0 64,2 66,10 68,22 70,30 72,20 74,8 76,2 78,0 80,4 82,14 84,24 86,30 88,20 90,8 92,2 94,0 96,4 98,14 100,26 102,34 104,24 106,12 108,4 110,0 112,4 112,52' fill='white'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='52' viewBox='0 0 112 52' preserveAspectRatio='none'%3E%3Cpolygon points='0,52 0,34 4,22 8,10 12,2 14,0 16,2 18,8 20,18 22,28 24,22 26,12 28,4 30,0 32,4 34,12 36,22 38,30 40,22 42,10 44,2 46,0 48,2 50,10 52,22 54,32 56,22 58,10 60,2 62,0 64,2 66,10 68,22 70,30 72,20 74,8 76,2 78,0 80,4 82,14 84,24 86,30 88,20 90,8 92,2 94,0 96,4 98,14 100,26 102,34 104,24 106,12 108,4 110,0 112,4 112,52' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 112px 52px;
          mask-size: 112px 52px;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
          mask-position: bottom;
}

.soil-credit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.soil-credit span {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255, 220, 160, 0.65);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  user-select: none;
}


.menu-container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 860px;
  padding: 0 20px;
  margin-bottom: 110px;
  gap: 0;
}

.logo-wrap {
  text-align: center;
  margin-bottom: 10px;
  animation: logoFloat 3.5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.logo-badge {
  display: inline-block;
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-light);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.55);
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  text-shadow: 0 1px 3px rgba(0,60,120,0.3);
}

.logo-title {
  font-family: var(--font-d);
  font-size: clamp(62px, 11vw, 108px);
  font-weight: 700;
  line-height: 0.95;
  color: #fff;
  text-shadow:
    4px 4px 0px #e8a200,
    8px 8px 0px #c47c00,
    0 10px 40px rgba(0,60,120,0.3),
    0 2px 6px rgba(0,0,0,0.2);
  letter-spacing: 2px;
}

.logo-accent {
  color: #ffe033;
  text-shadow:
    4px 4px 0px #d47000,
    8px 8px 0px #a85000,
    0 10px 40px rgba(255,120,0,0.35);
}

.logo-sub {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.88);
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,60,120,0.3);
}

.logo-algo-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.atag {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.88);
  border: 2px solid rgba(255,255,255,0.5);
  color: #1565c0;
  box-shadow: 0 2px 0 rgba(0,60,120,0.18);
  transition: transform .15s, box-shadow .15s;
}
.atag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0,60,120,0.18);
}

.mode-cards {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  margin-bottom: 18px;
}

.mode-card {
  position: relative;
  width: 180px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border: none;
  background: transparent;
  padding: 0;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  text-align: center;
}

.mode-card::before,
.mode-card::after { display: none; }

.mode-card:hover  { transform: translateY(-10px) scale(1.04); }
.mode-card:active { transform: translateY(-3px) scale(0.98); }

.mode-card-tile {
  width: 130px;
  height: 130px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fde68a, #fbbf24);
  border: 4px solid #fff;
  box-shadow:
    0 8px 0 #d97706,
    0 12px 32px rgba(0,60,120,0.22),
    inset 0 2px 0 rgba(255,255,255,0.5);
  transition: box-shadow .18s, transform .1s;
}

.mode-card:hover  .mode-card-tile { box-shadow: 0 12px 0 #d97706, 0 18px 40px rgba(0,60,120,0.28), inset 0 2px 0 rgba(255,255,255,0.5); }
.mode-card:active .mode-card-tile { box-shadow: 0 4px 0  #d97706, 0 6px 16px  rgba(0,60,120,0.2),  inset 0 2px 0 rgba(255,255,255,0.5); transform: translateY(4px); }

#btn-pvp .mode-card-tile {
  background: linear-gradient(145deg, #86efac, #22c55e);
  box-shadow: 0 8px 0 #15803d, 0 12px 32px rgba(0,80,20,0.22), inset 0 2px 0 rgba(255,255,255,0.5);
}
#btn-pvp:hover  .mode-card-tile { box-shadow: 0 12px 0 #15803d, 0 18px 40px rgba(0,80,20,0.28), inset 0 2px 0 rgba(255,255,255,0.5); }
#btn-pvp:active .mode-card-tile { box-shadow: 0 4px 0  #15803d, 0 6px 16px  rgba(0,80,20,0.2),  inset 0 2px 0 rgba(255,255,255,0.5); transform: translateY(4px); }

#btn-pvai .mode-card-tile {
  background: linear-gradient(145deg, #93c5fd, #3b82f6);
  box-shadow: 0 8px 0 #1d4ed8, 0 12px 32px rgba(0,30,120,0.25), inset 0 2px 0 rgba(255,255,255,0.5);
}
#btn-pvai:hover  .mode-card-tile { box-shadow: 0 12px 0 #1d4ed8, 0 18px 40px rgba(0,30,120,0.3), inset 0 2px 0 rgba(255,255,255,0.5); }
#btn-pvai:active .mode-card-tile { box-shadow: 0 4px 0  #1d4ed8, 0 6px 16px rgba(0,30,120,0.2),  inset 0 2px 0 rgba(255,255,255,0.5); transform: translateY(4px); }

.mode-card-tile::after {
  content: '';
  position: absolute;
  top: 10px; left: 14px;
  width: 38px; height: 14px;
  background: rgba(255,255,255,0.38);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}

.mode-card-icon {
  font-size: 56px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
  position: relative;
  z-index: 1;
}

.mode-pill {
  position: absolute;
  top: -10px; left: -10px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 2.5px solid var(--border2);
  color: #1565c0;
  box-shadow: 0 3px 0 var(--border2);
  z-index: 2;
  font-size: 11px;
}

.mode-featured-tag {
  position: absolute;
  top: -12px; right: -12px;
  font-family: var(--font-d);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 9px;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #fff;
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 3px 0 #c2410c, 0 4px 12px rgba(249,115,22,0.4);
  border: 2.5px solid #fff;
  animation: starSpin 6s linear infinite;
  z-index: 2;
}
@keyframes starSpin {
  0%,100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg)  scale(1.08); }
}

.mode-label {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0,60,120,0.35), 0 1px 3px rgba(0,0,0,0.2);
  margin-top: 14px;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.mode-desc {
  font-family: var(--font-d);
  font-size: 11.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0,60,120,0.3);
  max-width: 160px;
}

.mode-card .press-prompt {
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 600;
  color: rgba(229, 2, 2, 0.911);
  letter-spacing: 1.5px;
  margin-top: 6px;
  animation: pressPrompt 1.4s ease-in-out infinite;
}
@keyframes pressPrompt {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.menu-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.feat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(17, 226, 9, 0.79);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.45);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,60,120,0.1);
  text-shadow: 0 1px 3px rgba(0,60,120,0.25);
  transition: transform .15s, background .15s;
}
.feat:hover {
  background: rgba(255,255,255,0.32);
  transform: translateY(-2px);
}
.feat-icon { font-size: 15px; }

#screen-game { flex-direction: column; }

.game-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 3px 16px rgba(0,60,120,0.1);
  z-index: 10;
}

.top-left,
.top-right { display: flex; gap: 7px; align-items: center; }

.tb-btn {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surf2);
  border: 2px solid var(--border2);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 3px 0 var(--border2);
}
.tb-btn:hover  { border-color: var(--border3); color: var(--text); transform: translateY(-1px); box-shadow: 0 4px 0 var(--border2); }
.tb-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--border2); }
.tb-btn.active { background: linear-gradient(135deg, #fff3cd, #fffde7); border-color: var(--accent); color: #a05000; box-shadow: 0 3px 0 var(--accent-dark); }

.top-title {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px rgba(0,60,120,0.1);
}
.top-title span { color: #1565c0; }
.top-title em {
  font-family: var(--font-m);
  font-weight: 300;
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-left: 6px;
}

.game-content { display: flex; flex: 1; overflow: hidden; }

.left-panel {
  width: var(--panel-w);
  flex-shrink: 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
  border-right: 3px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 3px 0 20px rgba(0,60,120,0.07);
}

.player-card {
  padding: 14px;
  border-bottom: 2px solid var(--border);
  transition: background .2s;
  background: transparent;
}
.player-card.active-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.9));
  box-shadow: inset 0 0 0 2px rgba(33,150,243,0.15);
}

.pc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.pc-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.p1-av { background: linear-gradient(135deg, #4ade80, #16a34a); color: #fff; border: 2.5px solid #fff; }
.p2-av { background: linear-gradient(135deg, #60a5fa, #1d4ed8); color: #fff; border: 2.5px solid #fff; }

.pc-info { flex: 1; }
.pc-name { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--text); }
.pc-sub  { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.pc-turn-badge {
  font-family: var(--font-d); font-size: 8px; font-weight: 600;
  letter-spacing: 1.5px; padding: 3px 9px; border-radius: var(--radius-pill);
  opacity: 0; transition: opacity .3s;
}
.p1-badge { background: #d4f5d8; color: #166534; border: 1.5px solid #86efac; }
.p2-badge { background: #d0e8ff; color: #1e40af; border: 1.5px solid #93c5fd; }
.pc-turn-badge.visible { opacity: 1; }

.pc-stats { display: flex; gap: 6px; margin-bottom: 9px; }
.stat-chip {
  flex: 1; background: var(--surf2); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 6px; text-align: center;
  box-shadow: 0 2px 0 var(--border);
}
.sc-label { display: block; font-size: 8px; color: var(--text-muted); font-family: var(--font-d); margin-bottom: 3px; letter-spacing: 0.5px; }
.sc-val   { font-family: var(--font-d); font-size: 15px; font-weight: 700; color: var(--text); }

.mob-row { display: flex; align-items: center; gap: 7px; }
.mob-label { font-size: 8.5px; color: var(--text-muted); white-space: nowrap; font-family: var(--font-d); }
.mob-track { flex: 1; height: 7px; background: var(--surf3); border-radius: var(--radius-pill); overflow: hidden; border: 1.5px solid var(--border); }
.mob-bar   { height: 100%; border-radius: var(--radius-pill); transition: width .55s cubic-bezier(.34,1.56,.64,1); width: 0%; }
.p1-bar { background: linear-gradient(90deg, #86efac, #22c55e); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.p2-bar { background: linear-gradient(90deg, #93c5fd, #3b82f6); box-shadow: 0 0 6px rgba(59,130,246,0.4); }
.mob-pct { font-size: 9px; color: var(--text-dim); min-width: 24px; text-align: right; font-family: var(--font-d); }

.score-breakdown { padding: 14px; border-bottom: 2px solid var(--border); background: rgba(255,255,255,0.5); }
.sb-title  { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text); margin-bottom: 6px; }
.sb-formula { font-size: 9px; color: #0e7490; background: #ecfeff; border: 1.5px solid #a5f3fc; border-radius: var(--radius); padding: 6px 9px; margin-bottom: 9px; line-height: 1.5; font-family: var(--font-m); }
.sb-rows { display: flex; flex-direction: column; gap: 4px; }
.sb-row {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-dim); padding: 4px 8px;
  background: var(--surf2); border-radius: var(--radius); border: 1.5px solid var(--border);
}
.sb-row.total { background: linear-gradient(135deg, #fffde7, #fff9c4); border: 2px solid var(--accent); box-shadow: 0 2px 0 var(--accent-dark); }
.sb-row.total span:first-child { color: var(--text); font-weight: 700; }
.sb-row span:last-child { font-weight: 700; color: var(--text); }
.p1-color { color: var(--p1-dark) !important; }
.p2-color { color: var(--p2-dark) !important; }

.move-history { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mh-title { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text); flex-shrink: 0; }
.mh-list  { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.mh-empty { font-size: 10px; color: var(--text-muted); text-align: center; padding: 16px 0; font-family: var(--font-d); }

.mh-item {
  display: flex; align-items: center; gap: 7px;
  background: var(--surf2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 5px 9px;
  animation: slideIn .22s ease; transition: transform .1s;
}
.mh-item:hover { transform: translateX(2px); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
.mh-num   { font-size: 8.5px; color: var(--text-muted); min-width: 18px; font-family: var(--font-m); }
.mh-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.mh-dot.p1 { background: var(--p1); }
.mh-dot.p2 { background: var(--p2); }
.mh-text  { font-size: 10px; color: var(--text-dim); flex: 1; }
.mh-score { font-size: 9px; color: var(--text-muted); }

.center-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-width: 0;
}

.board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}


.coord-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: min(54vmin, 448px);
  padding-left: 0;
}

.coord-row .coord-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.6vmin, 14px);
  height: 22px;
}


.board-with-rows {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.coord-col {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  height: min(54vmin, 448px);
  width: 22px;
}

.coord-col .coord-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.6vmin, 14px);
}


.board-wrap {
  position: relative;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;

  padding: 8px;
  width: min(54vmin, 448px);
  height: min(54vmin, 448px);

  background: rgba(255,255,255,0.88);
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-board);
  backdrop-filter: blur(8px);
}

.overlay-canvas {
  position: absolute;
  top: 8px;
  left: 8px;
  pointer-events: none;
  border-radius: var(--radius);
}
.cell {
  border-radius: var(--radius); position: relative;
  background: linear-gradient(135deg, #f0f8ff, #e0efff);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: default; overflow: hidden;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 2px 0 var(--border2);
}
.cell.empty { background: linear-gradient(135deg, #f4f8fc, #eaf4ff); }
.cell.highlight {
  background: linear-gradient(135deg, #fffde7, #fff9c4);
  border-color: var(--hl-border); border-width: 2.5px; cursor: pointer;
  animation: hlPulse 1.4s ease-in-out infinite;
  box-shadow: 0 3px 0 var(--accent-dark), 0 4px 12px rgba(244,196,0,0.25);
}
.cell.highlight:hover {
  background: linear-gradient(135deg, #fef08a, #fde047);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 5px 0 var(--accent-dark), 0 8px 20px rgba(244,196,0,0.4); z-index: 2;
}
@keyframes hlPulse {
  0%,100% { box-shadow: 0 3px 0 var(--accent-dark), 0 4px 12px rgba(244,196,0,0.2); }
  50%      { box-shadow: 0 3px 0 var(--accent-dark), 0 6px 20px rgba(244,196,0,0.5); }
}
.cell.blocked {
  background: linear-gradient(135deg, #c8bfae, #b8ae9a);
  border-color: var(--blocked-b); border-width: 2px; cursor: not-allowed;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}
.cell.blocked::after { content: '✕'; font-size: 10px; color: rgba(80,60,40,0.5); }
.cell.p1 { background: linear-gradient(135deg, #bbf7d0, #86efac); border-color: var(--p1); border-width: 2.5px; box-shadow: 0 3px 0 var(--p1-dark), 0 4px 14px var(--p1-glow); }
.cell.p2 { background: linear-gradient(135deg, #bfdbfe, #93c5fd); border-color: var(--p2); border-width: 2.5px; box-shadow: 0 3px 0 var(--p2-dark), 0 4px 14px var(--p2-glow); }

.token {
  width: 70%; height: 70%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 700; font-size: 11px;
  animation: tokenPop .25s cubic-bezier(.34,1.56,.64,1); position: relative;
}
@keyframes tokenPop {
  from { transform: scale(0) rotate(-10deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.cell.p1 .token { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.2), 0 0 0 2.5px rgba(255,255,255,0.6), 0 4px 10px rgba(34,197,94,0.4); }
.cell.p2 .token { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.2), 0 0 0 2.5px rgba(255,255,255,0.6), 0 4px 10px rgba(59,130,246,0.4); }

@keyframes blockFlash {
  0%   { background: rgba(239,68,68,0.45); border-color: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,0.5); }
  100% { background: linear-gradient(135deg, #c8bfae, #b8ae9a); border-color: var(--blocked-b); box-shadow: none; }
}
.cell.just-blocked { animation: blockFlash .5s ease-out forwards; }

.cell.bfs-p1  { background: rgba(34,197,94,0.14);  border-color: rgba(34,197,94,0.35); }
.cell.bfs-p2  { background: rgba(33,150,243,0.14); border-color: rgba(33,150,243,0.35); }
.cell.bfs-both{ background: rgba(147,51,234,0.13);  border-color: rgba(147,51,234,0.3); }

.move-score-badge {
  position: absolute; top: 2px; right: 2px; font-size: 7px; font-family: var(--font-m);
  background: rgba(255,255,255,0.85); color: #a05000; padding: 1px 4px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .2s; font-weight: 600;
}
.cell.highlight:hover .move-score-badge { opacity: 1; }

.ai-thinking-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,0.82);
  border-radius: var(--radius-xl); display: none;
  align-items: center; justify-content: center; backdrop-filter: blur(6px); z-index: 10;
}
.ai-thinking-overlay.visible { display: flex; }
.ai-think-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ai-spinner-ring { width: 48px; height: 48px; border: 4px solid var(--surf3); border-top-color: var(--p2); border-radius: 50%; animation: spin .7s linear infinite; box-shadow: 0 0 16px var(--p2-glow); }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-think-text { text-align: center; }
.ai-think-title { font-family: var(--font-d); font-size: 15px; font-weight: 700; color: #1565c0; letter-spacing: 1.5px; }
.ai-think-sub   { font-size: 10px; color: var(--text-dim); margin-top: 5px; font-family: var(--font-m); }

.status-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(8px);
  border: 2px solid var(--border); border-radius: var(--radius-pill); width: 100%;
  box-shadow: 0 3px 0 var(--border2), 0 4px 12px rgba(0,60,120,0.08);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--p1); animation: statusBlink 1.3s ease-in-out infinite; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
@keyframes statusBlink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(0.8); }
}
.status-msg { font-family: var(--font-d); font-size: 12px; font-weight: 500; color: var(--text-dim); }

.view-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.vl-item { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: rgba(255,255,255,0.88); font-family: var(--font-d); font-weight: 500; text-shadow: 0 1px 3px rgba(0,60,120,0.35); }
.vl-dot  { width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.highlight-dot { background: var(--hl-border); }
.p1-bfs-dot    { background: rgba(34,197,94,0.65); }
.p2-bfs-dot    { background: rgba(33,150,243,0.65); }
.heat-dot      { background: rgba(239,68,68,0.7); }

.right-panel {
  width: var(--panel-w); flex-shrink: 0;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(12px);
  border-left: 3px solid var(--border); display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: width .28s ease, opacity .28s ease;
  box-shadow: -3px 0 20px rgba(0,60,120,0.07);
}
.right-panel.hidden-panel { width: 0; opacity: 0; overflow: hidden; }

.algo-section { padding: 13px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.algo-section.flex-grow { flex: 1; min-height: 180px; }

.as-title { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.as-badge { font-family: var(--font-m); font-size: 8px; padding: 2px 7px; background: var(--p2-dim); color: var(--p2-dark); border-radius: var(--radius-pill); font-weight: 400; border: 1px solid var(--border2); }
.as-desc  { font-size: 9.5px; color: var(--text-dim); line-height: 1.55; }

.minimax-tree { background: var(--surf2); border: 2px solid var(--border); border-radius: var(--radius); padding: 8px; font-family: var(--font-m); font-size: 9px; max-height: 185px; overflow-y: auto; box-shadow: inset 0 2px 6px rgba(0,60,120,0.05); }
.tree-placeholder { color: var(--text-muted); text-align: center; padding: 10px 0; font-family: var(--font-d); font-size: 10px; }
.tree-node  { display: flex; align-items: center; gap: 4px; padding: 2px 0; cursor: default; }
.tree-indent { color: var(--text-muted); white-space: pre; }
.tree-type  { font-size: 8px; padding: 1px 6px; border-radius: var(--radius-pill); margin-right: 2px; font-family: var(--font-d); font-weight: 600; }
.tree-type.max { background: var(--p2-dim); color: var(--p2-dark); }
.tree-type.min { background: var(--p1-dim); color: var(--p1-dark); }
.tree-score       { color: #a05000; font-weight: 600; }
.tree-score.best  { color: var(--success); }
.tree-pruned      { color: var(--danger); font-style: italic; }
.tree-move        { color: var(--text-dim); font-size: 8px; }

.ab-stats { display: flex; gap: 5px; }
.ab-stat  { flex: 1; background: var(--surf2); border: 2px solid var(--border); border-radius: var(--radius); padding: 7px 5px; text-align: center; font-size: 8.5px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 0 var(--border); }
.ab-stat span:first-child { color: var(--text-muted); font-family: var(--font-d); }
.ab-val         { font-family: var(--font-d); font-size: 14px; font-weight: 700; color: var(--text); }
.pruned-color   { color: var(--danger)  !important; }
.good-color     { color: var(--success) !important; }

.ab-log { background: var(--surf2); border: 2px solid var(--border); border-radius: var(--radius); padding: 7px; max-height: 92px; overflow-y: auto; font-family: var(--font-m); font-size: 9px; box-shadow: inset 0 2px 6px rgba(0,60,120,0.04); }
.ab-entry { padding: 2px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.ab-entry:last-child { border-bottom: none; }
.ab-entry .cut  { color: var(--danger); }
.ab-entry .keep { color: var(--success); }
.log-empty { color: var(--text-muted); text-align: center; padding: 7px; font-family: var(--font-d); font-size: 10px; }

.bfs-visual      { display: flex; flex-direction: column; gap: 6px; }
.bfs-queue-label { font-size: 8.5px; color: var(--text-muted); font-family: var(--font-d); }
.bfs-queue       { display: flex; flex-wrap: wrap; gap: 3px; max-height: 52px; overflow: hidden; }
.bfs-q-cell      { font-size: 8px; padding: 2px 6px; border-radius: var(--radius-pill); border: 1.5px solid var(--border2); color: var(--text-dim); background: var(--surf2); font-family: var(--font-m); animation: queuePop .15s ease; }
@keyframes queuePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.bfs-steps    { font-size: 9px; color: var(--text-dim); line-height: 1.6; }
.bfs-step-row { display: flex; align-items: baseline; gap: 5px; padding: 2.5px 0; border-bottom: 1px solid var(--border); }
.bfs-step-row:last-child { border: none; }
.bfs-step-n { font-size: 8px; color: var(--text-muted); min-width: 52px; font-family: var(--font-d); }
.bfs-step-v { color: #0e7490; font-family: var(--font-m); }

.algo-log   { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.log-entry  { font-size: 9.5px; line-height: 1.5; padding: 5px 8px; border-radius: var(--radius); background: var(--surf2); border-left: 3px solid var(--border2); animation: logIn .22s ease; font-family: var(--font-m); }
@keyframes logIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.log-entry.intro { color: var(--text-dim);  border-color: var(--border2); }
.log-entry.bfs   { color: #0e7490;           border-color: var(--cyan);   background: rgba(0,188,212,0.05); }
.log-entry.mm    { color: var(--purple);     border-color: var(--purple); background: rgba(155,89,182,0.05); }
.log-entry.move  { color: var(--p1-dark);    border-color: var(--p1);     background: var(--p1-faint); }
.log-entry.ai    { color: var(--p2-dark);    border-color: var(--p2);     background: var(--p2-faint); }
.log-entry.heur  { color: #9a3412;           border-color: var(--orange); background: rgba(255,124,42,0.05); }
.log-entry.warn  { color: #a05000;           border-color: var(--accent); background: rgba(244,196,0,0.07); }
.log-entry.win   { color: var(--p1-dark);    border-color: var(--success);background: rgba(34,197,94,0.08); }
.log-ts { color: var(--text-muted); margin-right: 5px; font-size: 8px; }

.popup-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,30,80,0.55); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; }
.popup-overlay.hidden { display: none; }

.popup-box {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #f0f8ff 100%);
  border: 3px solid rgba(255,255,255,0.95);
  border-radius: var(--radius-xl); padding: 38px 46px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 360px;
  animation: popIn .42s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 0 #6aaad8, var(--shadow-popup);
}
.popup-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg, #22c55e, #60a5fa, #a78bfa, #f472b6);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@keyframes popIn {
  from { transform: scale(0.7) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.popup-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece { position: absolute; width: 9px; height: 9px; border-radius: 3px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}

.popup-trophy  { font-size: 56px; filter: drop-shadow(0 4px 8px rgba(0,60,120,0.2)); animation: trophyBounce 1s ease infinite alternate; }
@keyframes trophyBounce {
  from { transform: translateY(0)   rotate(-3deg); }
  to   { transform: translateY(-5px) rotate(3deg); }
}
.popup-winner { font-family: var(--font-d); font-size: 26px; font-weight: 700; color: var(--text); text-align: center; }
.popup-reason { font-family: var(--font-d); font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; }

.popup-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
.psg-item  { background: var(--surf2); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 12px; text-align: center; box-shadow: 0 3px 0 var(--border2); }
.psg-label { font-family: var(--font-d); font-size: 10px; color: var(--text-muted); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.3px; }
.psg-val   { font-family: var(--font-d); font-size: 22px; font-weight: 700; color: var(--text); }

.popup-actions { display: flex; gap: 11px; }
.pop-btn { font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; padding: 11px 24px; border-radius: var(--radius-pill); cursor: pointer; transition: all .2s; border: 2.5px solid transparent; }
.pop-btn.primary   { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: #16a34a; box-shadow: 0 5px 0 #166534, 0 6px 16px rgba(34,197,94,0.3); }
.pop-btn.primary:hover  { transform: translateY(-3px); box-shadow: 0 8px 0 #166534, 0 10px 24px rgba(34,197,94,0.35); }
.pop-btn.primary:active { transform: translateY(2px);  box-shadow: 0 2px 0 #166534; }
.pop-btn.secondary  { background: var(--surf2); color: var(--text-dim); border-color: var(--border2); box-shadow: 0 4px 0 var(--border2); }
.pop-btn.secondary:hover  { border-color: var(--border3); color: var(--text); transform: translateY(-2px); box-shadow: 0 6px 0 var(--border2); }
.pop-btn.secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border2); }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border3); }

@media (max-width: 1050px) {
  :root { --panel-w: 220px; }
}

@media (max-width: 900px) {
  :root { --panel-w: 190px; }
  .logo-algo-tags .atag:nth-child(n+3) { display: none; }
  .mode-card { width: 155px; }
  .mode-card-tile { width: 115px; height: 115px; }
  .mode-card-icon { font-size: 48px; }
  .mode-label { font-size: 18px; }
  .mode-desc  { font-size: 11px; }

  #screen-menu::before { height: 44px; bottom: 46px; }
  #screen-menu::after  { height: 46px; }
  .soil-credit         { height: 46px; }
  .menu-container      { margin-bottom: 100px; }
}

@media (max-width: 700px) {
  .left-panel, .right-panel { display: none; }
  .board { width: min(84vmin, 370px); height: min(84vmin, 370px); }
  .game-content { justify-content: center; }
  .top-title em { display: none; }
  .tb-btn { font-size: 11px; padding: 5px 11px; }

  .mode-cards { gap: 20px; }
  .mode-card  { width: 140px; }
  .mode-card-tile { width: 105px; height: 105px; }
  .mode-card-icon { font-size: 42px; }
  .logo-title { font-size: clamp(52px, 14vw, 80px); }
  .menu-container { margin-bottom: 92px; }

  #screen-menu::before {
    height: 38px; bottom: 40px;
    -webkit-mask-size: 84px 38px; mask-size: 84px 38px;
  }
  #screen-menu::after { height: 40px; }
  .soil-credit        { height: 40px; }
  .soil-credit span   { font-size: 10px; letter-spacing: 1.5px; }
}

@media (max-width: 480px) {
  .mode-cards { gap: 14px; }
  .mode-card  { width: 130px; }
  .mode-card-tile { width: 96px; height: 96px; }
  .mode-card-icon { font-size: 38px; }
  .menu-features .feat:nth-child(n+4) { display: none; }

  .popup-box    { min-width: 0; width: 90vw; padding: 28px 20px; }
  .popup-winner { font-size: 20px; }
  .psg-val      { font-size: 18px; }
  .board        { width: min(90vmin, 340px); height: min(90vmin, 340px); }
  .menu-container { margin-bottom: 80px; gap: 0; }

  #screen-menu::before {
    height: 32px; bottom: 34px;
    -webkit-mask-size: 70px 32px; mask-size: 70px 32px;
  }
  #screen-menu::after { height: 34px; }
  .soil-credit        { height: 34px; }
  .soil-credit span   { font-size: 9px; letter-spacing: 1.5px; }
}


@media (max-width: 900px) and (min-width: 701px) {
  .top-bar { padding: 6px 10px; }
  .top-left, .top-right { gap: 5px; }
  .top-title { font-size: 17px; letter-spacing: 1px; }
  .turn-counter { min-width: 60px; font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 700px) {


  #screen-menu {
    justify-content: center;
    align-items: center;
  }

  @keyframes logoFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }

  .menu-container {
    margin-bottom: 108px;
    padding: 0 16px;
    gap: 0;
    justify-content: center;
    align-items: center;
  }

  .logo-wrap { margin-bottom: 8px; }

  .logo-badge {
    font-size: 9px;
    letter-spacing: 2px;
    padding: 3px 12px;
    margin-bottom: 8px;
  }

  .logo-title {
    font-size: clamp(48px, 13vw, 72px);
    letter-spacing: 1px;
  }

  .logo-sub {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }

  .logo-algo-tags {
    gap: 5px;
    margin-top: 8px;
    justify-content: center;
  }
  .logo-algo-tags .atag:nth-child(n+3) { display: inline-flex; }
  .atag {
    font-size: 10px;
    padding: 2px 9px;
  }

  .mode-cards {
    gap: 16px;
    margin-top: 14px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .mode-card { width: 138px; }

  .mode-card-tile {
    width: 108px;
    height: 108px;
    border-radius: 18px;
  }

  .mode-card-icon { font-size: 44px; }

  .mode-label {
    font-size: 17px;
    margin-top: 10px;
  }

  .mode-desc {
    font-size: 10.5px;
    max-width: 130px;
    margin-top: 3px;
  }

  .press-prompt {
    font-size: 9px;
    margin-top: 4px;
  }

  .mode-pill {
    top: -8px; left: -8px;
    font-size: 10px;
    padding: 3px 8px;
  }

  .mode-featured-tag {
    width: 38px; height: 38px;
    font-size: 8px;
    top: -10px; right: -10px;
  }

  .menu-features {
    gap: 6px;
    justify-content: center;
  }
  .menu-features .feat:nth-child(n+5) { display: none; }
  .feat {
    font-size: 11px;
    padding: 5px 11px;
    gap: 5px;
  }
  .feat-icon { font-size: 14px; }


  .game-content { justify-content: center; align-items: stretch; }

  .center-area {
    padding: 10px 8px;
    align-items: center;
  }

  .board-container { gap: 6px; width: 100%; align-items: center; }

  .board {
    width: min(86vmin, 360px);
    height: min(86vmin, 360px);
    gap: 3px;
    padding: 8px;
  }

  .top-bar {
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
  }

  .top-left { gap: 5px; }
  .top-right { gap: 4px; }

  .top-title {
    font-size: 16px;
    letter-spacing: 1px;
    order: -1;
    flex-basis: 100%;
    text-align: center;
    display: none;
  }

  .tb-btn {
    font-size: 10px;
    padding: 5px 10px;
    box-shadow: 0 2px 0 var(--border2);
  }

  .turn-counter {
    font-size: 10px;
    padding: 4px 9px;
    min-width: 56px;
  }

  .debug-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }

  .tb-btn.debug-tool { display: none !important; }

  .status-bar {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
  }
  .status-msg { font-size: 11px; }

  .kb-hint { font-size: 10px; gap: 3px; }
  .kb-key  { font-size: 9px; padding: 1px 5px; }

  .coord-label { font-size: 11px; min-width: 16px; min-height: 16px; }
  .coord-row   { padding-left: 16px; }

  .popup-box    { min-width: 0; width: 92vw; padding: 24px 16px 20px; }
  .popup-winner { font-size: 22px; }
  .psg-val      { font-size: 20px; }
  .popup-trophy { font-size: 48px; }
  .popup-stats-grid { gap: 7px; }
  .psg-item { padding: 10px 8px; }
  .pop-btn  { font-size: 12px; padding: 9px 18px; }

  #screen-menu::before {
    height: 40px;
    bottom: 42px;
    -webkit-mask-size: 88px 40px;
    mask-size: 88px 40px;
  }
  #screen-menu::after { height: 42px; }
}

@media (max-width: 480px) {

  .menu-container {
    margin-bottom: 94px;
    padding: 0 12px;
  }

  .logo-badge {
    font-size: 8.5px;
    letter-spacing: 1.5px;
    padding: 2px 10px;
  }

  .logo-title {
    font-size: clamp(42px, 12vw, 62px);
  }

  .logo-sub { font-size: 11px; letter-spacing: 1px; }

  .logo-algo-tags { gap: 4px; margin-top: 7px; }
  .atag { font-size: 9.5px; padding: 2px 8px; }

  .mode-cards { gap: 12px; margin-top: 12px; margin-bottom: 10px; }
  .mode-card  { width: 124px; }
  .mode-card-tile { width: 96px; height: 96px; border-radius: 16px; }
  .mode-card-icon { font-size: 38px; }
  .mode-label { font-size: 15px; margin-top: 8px; }
  .mode-desc  { font-size: 10px; max-width: 115px; }
  .press-prompt { font-size: 8.5px; }

  .mode-pill {
    top: -7px; left: -7px;
    font-size: 9px; padding: 2px 7px;
  }

  .mode-featured-tag {
    width: 34px; height: 34px;
    font-size: 7.5px;
    top: -8px; right: -8px;
  }

  .menu-features .feat:nth-child(n+5) { display: none; }
  .feat { font-size: 10.5px; padding: 4px 10px; }

  .board {
    width: min(88vmin, 330px);
    height: min(88vmin, 330px);
    gap: 3px;
    padding: 7px;
  }

  .top-bar { padding: 5px 8px; }
  .tb-btn  { font-size: 9.5px; padding: 4px 9px; }

  .turn-counter {
    font-size: 9.5px;
    padding: 3px 8px;
    min-width: 50px;
  }

  .status-msg { font-size: 10.5px; }

  .popup-box    { width: 95vw; padding: 20px 14px 18px; gap: 12px; }
  .popup-winner { font-size: 20px; }
  .psg-val      { font-size: 18px; }
  .popup-trophy { font-size: 44px; }
  .popup-stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .psg-label { font-size: 9px; }
  .pop-btn   { font-size: 11px; padding: 8px 14px; }
  .popup-actions { gap: 8px; }

  #screen-menu::before {
    height: 34px;
    bottom: 36px;
    -webkit-mask-size: 72px 34px;
    mask-size: 72px 34px;
  }
  #screen-menu::after { height: 36px; }
}

@media (max-width: 360px) {

  .logo-title { font-size: 38px; }
  .logo-sub   { font-size: 10px; }
  .logo-badge { font-size: 8px; letter-spacing: 1px; }

  .mode-cards {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  .mode-card { width: 200px; flex-direction: row; gap: 12px; align-items: center; text-align: left; }

  .mode-card-tile { width: 72px; height: 72px; flex-shrink: 0; border-radius: 14px; }
  .mode-card-icon { font-size: 30px; }

  .mode-card > :not(.mode-card-tile):not(.mode-pill):not(.mode-featured-tag) {
    align-self: flex-start;
  }

  .mode-label { font-size: 16px; margin-top: 0; }
  .mode-desc  { font-size: 10px; max-width: none; }
  .press-prompt { margin-top: 3px; }

  .mode-pill { top: -8px; left: -8px; }

  .menu-features .feat:nth-child(n+4) { display: none; }
  .feat { font-size: 10px; padding: 4px 9px; }

  .menu-container { margin-bottom: 84px; }

  .board {
    width: min(90vmin, 300px);
    height: min(90vmin, 300px);
  }

  #screen-menu::before {
    height: 30px; bottom: 32px;
    -webkit-mask-size: 64px 30px; mask-size: 64px 30px;
  }
  #screen-menu::after { height: 32px; }
}

@media (max-width: 700px) {

  .mode-cards {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }

}

@media (max-width: 700px) {

  .mode-desc {
    display: none;
  }
  .press-prompt {
    display: none;
  }

}

@media (max-width: 700px) {

  .mode-cards {
    gap: 10px;
    padding: 0 10px;
  }

  .mode-card {
    width: 45vw;
    max-width: 160px;
  }

}

@media (max-width: 700px) {

  .mode-cards {
    margin-bottom: 28px;
  }

}

@media (max-width: 700px) {

  .mode-card {
    flex-direction: column;
    align-items: center;
  }

  .mode-card-tile {
    margin: 0 auto;
  }

  .mode-title,
  .mode-label {
    width: 100%;
    text-align: center;
  }

}

@media (max-width: 700px) {

  .coord-row,
  .coord-col {
    display: none !important;
  }

}





.help-btn {
  position: relative; /* Change from absolute to relative */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 18px;
  right: 18px;
  z-index: 10;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 700;
  color: #1565c0;
  line-height: 1;

  background: rgba(255,255,255,0.92);
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 0 rgba(0,60,120,0.22), 0 6px 18px rgba(0,60,120,0.15);

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}

.help-btn:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,60,120,0.22), 0 10px 24px rgba(0,60,120,0.2);
}

.help-btn:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: 0 2px 0 rgba(0,60,120,0.22);
}

.help-tb-btn {
  font-family: var(--font-d) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #1565c0 !important;
  background: var(--surf2) !important;
  border-color: var(--border2) !important;
  flex-shrink: 0;
}

.help-tb-btn:hover {
  background: var(--surf3) !important;
  border-color: var(--border3) !important;
  transform: scale(1.1) !important;
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,30,80,0.58);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: helpFadeIn .22s ease;
}

.help-overlay.hidden { display: none; }

@keyframes helpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.help-box {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #eef7ff 100%);
  border: 3px solid rgba(255,255,255,0.95);
  border-radius: var(--radius-xl);
  width: min(600px, 96vw);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 8px 0 #6aaad8,
    0 20px 60px rgba(0,40,100,0.28);
  animation: helpBoxPop .35s cubic-bezier(.34,1.56,.64,1);
}

.help-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: linear-gradient(90deg, #22c55e, #60a5fa, #a78bfa, #f472b6, #facc15);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}

@keyframes helpBoxPop {
  from { transform: scale(0.82) translateY(16px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.help-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--surf2);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all .15s;
  box-shadow: 0 2px 0 var(--border2);
  line-height: 1;
}
.help-close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.1);
}

.help-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 16px;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 7px;
}

.help-header-icon {
  font-size: 40px;
  filter: drop-shadow(0 3px 6px rgba(0,60,120,0.2));
  animation: helpIconBounce 2.5s ease-in-out infinite;
}

@keyframes helpIconBounce {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-5px) rotate(5deg); }
}

.help-title {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.help-subtitle {
  font-family: var(--font-d);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-top: 4px;
}

.help-body {
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--border);
}

.help-section-last {
  border-bottom: none;
  padding-bottom: 0;
}

.help-section-title {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}

.help-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  font-family: var(--font-d);
}

.help-text strong {
  color: var(--text);
  font-weight: 700;
}

.help-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surf2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
}

.help-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.35);
}

.help-step-text {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-top: 2px;
}

.help-step-text strong { color: var(--text); font-weight: 700; }

.help-keys {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.help-key-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-key {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  background: linear-gradient(135deg, #f8faff, #eef4ff);
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  color: #1565c0;
  box-shadow: 0 3px 0 var(--border2);
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
}

.help-key-desc {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
}

.help-modes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.help-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
}

.help-mode-p1p2 {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
}

.help-mode-ai {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #93c5fd;
}

.help-mode-icon {
  font-size: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.help-mode-name {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.help-mode-desc {
  font-family: var(--font-d);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.help-algos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-algo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.help-algo-tag {
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border: 1.5px solid #7dd3fc;
  color: #0369a1;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
  min-width: 82px;
  text-align: center;
}

.help-algo-desc {
  font-family: var(--font-d);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

.help-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
}

.help-tips li {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 8px 12px 8px 38px;
  background: linear-gradient(135deg, #fffde7, #fef9c3);
  border: 1.5px solid #fde68a;
  border-radius: var(--radius);
  position: relative;
}

.help-tips li::before {
  content: '★';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 13px;
}

.help-tips li strong { color: var(--text); font-weight: 700; }

@media (max-width: 700px) {
  .help-btn { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 18px; }

  .help-box  { max-height: 92vh; border-radius: var(--radius-lg); }
  .help-header { padding: 18px 16px 14px; gap: 10px; }
  .help-header-icon { font-size: 32px; }
  .help-title { font-size: 22px; }
  .help-subtitle { font-size: 10.5px; }
  .help-body { padding: 14px 16px 18px; gap: 16px; }
  .help-section-title { font-size: 13px; }
  .help-text, .help-step-text, .help-mode-desc,
  .help-algo-desc, .help-key-desc, .help-tips li { font-size: 12px; }

  .help-mode-card { padding: 9px 11px; gap: 10px; }
  .help-mode-icon { font-size: 24px; }
  .help-tb-btn { width: 28px; height: 28px; font-size: 13px !important; }
}

@media (max-width: 480px) {
  .help-btn  { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 16px; }
  .help-box  { width: 98vw; }
  .help-header { padding: 15px 13px 12px; }
  .help-title { font-size: 20px; }
  .help-body { padding: 12px 13px 16px; gap: 14px; }

  .help-keys { gap: 6px; }
  .help-key  { min-width: 60px; font-size: 10px; padding: 3px 8px; }

  .help-algo-item { flex-direction: column; gap: 4px; }
  .help-algo-tag  { min-width: 0; width: fit-content; }
}

.help-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 700;
  color: #1565c0;
  line-height: 1;
  background: rgba(255,255,255,0.92);
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 0 rgba(0,60,120,0.22), 0 6px 18px rgba(0,60,120,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.help-btn:hover {
  transform: scale(1.14) translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,60,120,0.22), 0 10px 24px rgba(0,60,120,0.2);
}
.help-btn:active {
  transform: scale(0.95) translateY(1px);
  box-shadow: 0 2px 0 rgba(0,60,120,0.22);
}

.help-tb-btn {
  font-family: var(--font-d) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #1565c0 !important;
  flex-shrink: 0;
}
.help-tb-btn:hover {
  background: var(--surf3) !important;
  transform: scale(1.1) !important;
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,30,80,0.58);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: helpFadeIn .22s ease;
}
.help-overlay.hidden { display: none; }

@keyframes helpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.help-box {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #eef7ff 100%);
  border: 3px solid rgba(255,255,255,0.95);
  border-radius: var(--radius-xl);
  width: min(600px, 96vw);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 0 #6aaad8, 0 20px 60px rgba(0,40,100,0.28);
  animation: helpBoxPop .35s cubic-bezier(.34,1.56,.64,1);
}
.help-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: linear-gradient(90deg, #22c55e, #60a5fa, #a78bfa, #f472b6, #facc15);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}
@keyframes helpBoxPop {
  from { transform: scale(0.82) translateY(16px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.help-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--surf2);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all .15s;
  box-shadow: 0 2px 0 var(--border2);
  line-height: 1;
}
.help-close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.1);
}

.help-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 16px;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 7px;
}
.help-header-icon {
  font-size: 42px;
  filter: drop-shadow(0 3px 6px rgba(0,60,120,0.2));
  animation: helpIconBounce 2.5s ease-in-out infinite;
}
@keyframes helpIconBounce {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-6px) rotate(5deg); }
}
.help-title {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.help-subtitle {
  font-family: var(--font-d);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-top: 4px;
}

.help-body {
  overflow-y: auto;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--border);
}
.help-section-last { border-bottom: none; padding-bottom: 0; }

.help-section-title {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.help-text {
  font-family: var(--font-d);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
}
.help-text strong { color: var(--text); font-weight: 700; }

.help-steps { display: flex; flex-direction: column; gap: 8px; }
.help-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surf2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
}
.help-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.35);
}
.help-step-text {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-top: 3px;
}
.help-step-text strong { color: var(--text); font-weight: 700; }

.help-keys { display: flex; flex-direction: column; gap: 8px; }
.help-key-row { display: flex; align-items: center; gap: 12px; }
.help-key {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  background: linear-gradient(135deg, #f8faff, #eef4ff);
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  color: #1565c0;
  box-shadow: 0 3px 0 var(--border2);
  white-space: nowrap;
  min-width: 72px;
  text-align: center;
  flex-shrink: 0;
}
.help-key-desc {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
}

.help-modes { display: flex; flex-direction: column; gap: 9px; }
.help-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
}
.help-mode-p1p2 { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #86efac; }
.help-mode-ai   { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: #93c5fd; }
.help-mode-icon { font-size: 28px; flex-shrink: 0; }
.help-mode-name { font-family: var(--font-d); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.help-mode-desc { font-family: var(--font-d); font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

.help-algos { display: flex; flex-direction: column; gap: 9px; }
.help-algo-item { display: flex; align-items: flex-start; gap: 10px; }
.help-algo-tag {
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border: 1.5px solid #7dd3fc;
  color: #0369a1;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 84px;
  text-align: center;
  margin-top: 1px;
}
.help-algo-desc { font-family: var(--font-d); font-size: 12px; color: var(--text-dim); line-height: 1.55; }

.help-tips { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.help-tips li {
  font-family: var(--font-d);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 8px 12px 8px 38px;
  background: linear-gradient(135deg, #fffde7, #fef9c3);
  border: 1.5px solid #fde68a;
  border-radius: var(--radius);
  position: relative;
}
.help-tips li::before {
  content: '★';
  position: absolute;
  left: 12px;
  top: 50%; transform: translateY(-50%);
  color: var(--accent);
  font-size: 13px;
}
.help-tips li strong { color: var(--text); font-weight: 700; }

@media (max-width: 700px) {
  .help-btn { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 19px; }
  .help-box { max-height: 92vh; border-radius: var(--radius-lg); }
  .help-header { padding: 18px 16px 14px; gap: 10px; }
  .help-header-icon { font-size: 34px; }
  .help-title { font-size: 22px; }
  .help-subtitle { font-size: 10.5px; }
  .help-body { padding: 14px 16px 18px; gap: 16px; }
  .help-section-title { font-size: 13px; }
  .help-text, .help-step-text, .help-mode-desc,
  .help-algo-desc, .help-key-desc, .help-tips li { font-size: 11.5px; }
  .help-mode-card { padding: 10px 12px; gap: 10px; }
  .help-mode-icon { font-size: 24px; }
  .help-tb-btn { width: 28px !important; height: 28px !important; font-size: 13px !important; }
}

@media (max-width: 480px) {
  .help-btn { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 17px; }
  .help-box { width: 98vw; }
  .help-header { padding: 15px 13px 12px; }
  .help-title { font-size: 20px; }
  .help-body { padding: 12px 13px 16px; gap: 14px; }
  .help-keys { gap: 6px; }
  .help-key  { min-width: 62px; font-size: 10px; padding: 3px 8px; }
  .help-algo-item { flex-direction: column; gap: 4px; }
  .help-algo-tag  { min-width: 0; width: fit-content; }
}

.theory-link {
  position: absolute;
  top: 18px;
  right: 70px; 
  text-decoration: none;
}
.button-container {
  display: flex;       /* Activates Flexbox */
  align-items: center; /* Vertically centers the buttons if they have different heights */
  gap: 10px;           /* Adds a nice 10px gap between them */
}