/* ============================================================
   LEVEL DEVIL — Platform-puzzle game module styles
   Self-contained, no external assets except fonts already loaded.
   Uses a light cream palette distinct from the rest of the toolbox
   (intentional — entering a self-contained "game world").
   ============================================================ */

:root {
  /* Warm dusty platformer palette — two-tone browns, one accent red. */
  --ld-bg:        #9A7536;
  --ld-bg-grid:   #84622B;
  --ld-platform:  #D9A45E;        /* foreground "lit" surface */
  --ld-platform-shadow: #B3813D;
  --ld-hazard:    #6A3A18;        /* spike / dark pit (same tone family) */
  --ld-hazard-bright: #A23528;    /* pop red for bullets / danger UI flashes */
  --ld-player:    #1a1208;        /* near-black stick figure */
  --ld-goal:      #C6C0B2;        /* pale gray door */
  --ld-accent:    #F3C066;        /* warm yellow — button / cursor highlights */
  --ld-text:      #2A1e0e;
  --ld-text-soft: #6b5534;
  --ld-shadow:    rgba(0,0,0,0.22);
}

/* ============ Game-card preview (tile on the games hub) ============ */
.game-card-thumb--leveldevil {
  background: var(--ld-bg);
  position: relative;
}
.ld-thumb-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34px; background: var(--ld-platform);
  box-shadow: inset 0 2px 0 var(--ld-platform-shadow);
}
.ld-thumb-spike {
  position: absolute; bottom: 34px;
  width: 14px; height: 14px;
  background: var(--ld-hazard);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* nth-child indices: ground=1, spikes are 2/3/4 */
.ld-thumb-spike:nth-child(2) { left: 34%; }
.ld-thumb-spike:nth-child(3) { left: 48%; }
.ld-thumb-spike:nth-child(4) { left: 62%; }
.ld-thumb-player {
  position: absolute; bottom: 38px; left: 12%;
  width: 10px; height: 22px;
  background: var(--ld-player);
  clip-path: polygon(
    30% 0%, 70% 0%, 70% 30%,
    40% 30%, 40% 60%,
    60% 60%, 60% 70%,
    100% 70%, 100% 100%,
    0% 100%, 0% 70%, 40% 70%,
    40% 60%
  );
}
.ld-thumb-door {
  position: absolute; bottom: 34px; right: 14%;
  width: 18px; height: 28px;
  background: var(--ld-goal);
  border-radius: 4px 4px 0 0;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.18);
}
.ld-thumb-door::after {
  content: ''; position: absolute;
  right: 4px; top: 14px;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--ld-text);
}

/* ============ Page frame ============ */
#leveldevil {
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  color: var(--ld-text);
  font-family: 'Chakra Petch', sans-serif;
}
/* Subtle paper-fiber texture via radial gradients */
#leveldevil::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,0.4), transparent 70%),
    radial-gradient(ellipse 80% 40% at 20% 100%, rgba(0,0,0,0.04), transparent 70%);
  pointer-events: none;
}
.ld-back-btn {
  /* Override default glow (cyan) with warmer tint that fits cream bg */
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(42,42,46,0.2) !important;
}
.ld-back-btn:hover {
  box-shadow: 0 4px 20px rgba(232,69,69,0.25) !important;
}
.ld-back-btn::before {
  background: conic-gradient(from 0deg, var(--ld-hazard), var(--ld-accent), var(--ld-goal), var(--ld-player), var(--ld-hazard)) !important;
}
.ld-back-btn::after {
  background: var(--ld-bg) !important;
}
.ld-back-btn .back-icon {
  color: var(--ld-text);
}

.ld-root {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ============ Title screen ============ */
.ld-title {
  width: 100%; max-width: 720px;
  padding: 60px 30px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  animation: ldFadeIn 0.5s ease;
}
.ld-title-eyebrow {
  font-size: 11px;
  letter-spacing: 8px;
  color: var(--ld-text-soft);
  font-weight: 500;
  text-transform: uppercase;
}
.ld-title-main {
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 0.95;
  color: var(--ld-text);
  margin: 0;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--ld-hazard), 6px 6px 0 rgba(42,42,46,0.08);
}
.ld-title-cn {
  font-size: 15px;
  letter-spacing: 10px;
  color: var(--ld-text-soft);
  margin-top: -6px;
}
.ld-title-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ld-text-soft);
  max-width: 440px;
  line-height: 1.5;
  margin: 14px 0 20px;
}
.ld-title-buttons {
  display: flex; flex-direction: column;
  gap: 10px;
  width: 100%; max-width: 280px;
}
.ld-btn {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1.5px solid var(--ld-platform);
  background: transparent;
  color: var(--ld-text);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
}
.ld-btn:hover {
  background: var(--ld-platform);
  color: var(--ld-bg);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(42,42,46,0.35);
}
.ld-btn:active { transform: translate(0,0); box-shadow: 0 0 0 rgba(0,0,0,0); }
.ld-btn--primary {
  background: var(--ld-platform);
  color: var(--ld-bg);
}
.ld-btn--primary:hover {
  background: var(--ld-hazard);
  border-color: var(--ld-hazard);
}
.ld-btn--ghost {
  border-color: rgba(42,42,46,0.25);
  color: var(--ld-text-soft);
  font-size: 12px;
  letter-spacing: 2px;
  padding: 10px 16px;
}
.ld-title-foot {
  margin-top: 30px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--ld-text-soft);
  opacity: 0.7;
}
.ld-title-foot span { margin: 0 10px; }
.ld-title-stats {
  display: flex; gap: 18px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ld-text-soft);
  margin-bottom: 6px;
}
.ld-title-stats b { color: var(--ld-text); font-weight: 600; }

/* ============ Level select ============ */
.ld-select {
  width: 100%; max-width: 780px;
  padding: 70px 28px 40px;
  animation: ldFadeIn 0.4s ease;
  overflow-y: auto;
  max-height: 100%;
}
.ld-select-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.ld-select-title {
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ld-text);
}
.ld-select-stats {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ld-text-soft);
}
.ld-select-stats b { color: var(--ld-text); }
.ld-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.ld-cell {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ld-platform);
  background: rgba(255,255,255,0.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  font-family: 'Chakra Petch', sans-serif;
  color: var(--ld-text);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  user-select: none;
}
.ld-cell:hover:not(.is-locked) {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ld-platform);
  background: var(--ld-accent);
}
.ld-cell.is-locked {
  cursor: not-allowed;
  background: rgba(42,42,46,0.06);
  color: var(--ld-text-soft);
  border-color: rgba(42,42,46,0.3);
}
.ld-cell.is-cleared {
  background: var(--ld-goal);
  color: #fff;
}
.ld-cell.is-cleared:hover { background: #58b374; }
.ld-cell-num {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
}
.ld-cell-sub {
  font-size: 10px;
  letter-spacing: 1px;
  margin-top: 2px;
  opacity: 0.85;
}
.ld-cell-lock {
  font-size: 16px;
  opacity: 0.6;
}
.ld-cell-boss { /* final level styling */
  background: var(--ld-platform);
  color: var(--ld-accent);
  border-color: var(--ld-hazard);
}
.ld-cell-boss.is-cleared { background: var(--ld-hazard); color: #fff; border-color: var(--ld-platform); }

.ld-select-foot {
  margin-top: 24px;
  display: flex; justify-content: center;
  gap: 12px;
}

/* ============ Play screen ============ */
.ld-play {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 16px 16px 20px;
  gap: 12px;
}
.ld-hud {
  width: min(960px, 96vw);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--ld-text);
  padding: 0 4px;
  min-height: 24px;
}
.ld-hud-left {
  display: flex; align-items: center; gap: 14px;
}
.ld-hud-lv {
  font-size: 16px; font-weight: 600; letter-spacing: 3px;
  color: var(--ld-text);
}
.ld-hud-progress {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ld-text-soft);
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
  border-left: 1px solid rgba(42,30,14,0.22);
}
.ld-hud-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ld-text-soft);
  letter-spacing: 1px;
}
.ld-hud-right {
  display: flex; align-items: center; gap: 14px;
}
.ld-hud-deaths {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ld-hazard);
}
.ld-hud-time {
  color: var(--ld-text-soft);
  font-variant-numeric: tabular-nums;
}

.ld-canvas-frame {
  position: relative;
  width: min(960px, 96vw, 168vh);
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ld-hazard);
  background: var(--ld-bg);
  box-shadow: 6px 6px 0 var(--ld-shadow);
  overflow: hidden;
}
.ld-canvas {
  display: block;
  width: 100%; height: 100%;
  image-rendering: crisp-edges;
}
.ld-banner {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ld-banner.is-visible { opacity: 1; }
.ld-banner--win { background: rgba(107,199,133,0.88); }
.ld-banner--die { background: rgba(232,69,69,0.8); }
.ld-banner-big {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 42px;
  letter-spacing: 8px;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}
.ld-banner-sub {
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

/* Flash overlays on top of canvas */
.ld-flash {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
}
.ld-flash--red {
  background: var(--ld-hazardBright, var(--ld-hazard));
  animation: ldFlashRed 0.45s ease-out;
}

@keyframes ldFlashRed {
  0%   { opacity: 0.55; }
  60%  { opacity: 0.2; }
  100% { opacity: 0; }
}

.ld-play-foot {
  display: flex; gap: 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ld-text-soft);
}
.ld-mini-btn {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border: 1px solid rgba(42,42,46,0.3);
  background: rgba(255,255,255,0.6);
  color: var(--ld-text);
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
}
.ld-mini-btn:hover {
  background: var(--ld-platform);
  color: var(--ld-bg);
  transform: translateY(-1px);
}

/* ============ Mobile / no-keyboard warning ============ */
.ld-mobile-warn {
  position: absolute; inset: 0;
  z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(232,223,207,0.96);
  backdrop-filter: blur(4px);
  padding: 30px;
  text-align: center;
  gap: 14px;
  font-family: 'Chakra Petch', sans-serif;
  animation: ldFadeIn 0.3s ease;
}
.ld-mobile-icon {
  font-size: 56px;
  margin-bottom: 8px;
}
.ld-mobile-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--ld-text);
}
.ld-mobile-body {
  font-size: 14px;
  color: var(--ld-text-soft);
  line-height: 1.8;
  letter-spacing: 1px;
  max-width: 340px;
}
.ld-mobile-btns {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  width: 100%; max-width: 280px;
}

/* ============ Win-screen (all 30 levels cleared) ============ */
.ld-winscreen {
  width: 100%; max-width: 680px;
  padding: 48px 28px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: ldFadeIn 0.8s ease;
}
.ld-winscreen-title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 600;
  letter-spacing: 8px;
  color: var(--ld-hazard);
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--ld-platform);
  margin: 0 0 6px;
  line-height: 1;
}
.ld-winscreen-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ld-text-soft);
  margin-bottom: 20px;
}
.ld-winscreen-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px 30px;
  margin: 10px 0 30px;
}
.ld-winscreen-grid-k {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ld-text-soft);
  text-align: right;
}
.ld-winscreen-grid-v {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--ld-text);
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* ============ Animations ============ */
@keyframes ldFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .ld-title { padding: 80px 24px 40px; }
  .ld-select { padding: 80px 16px 24px; }
  .ld-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .ld-hud { font-size: 12px; }
  .ld-hud-lv { font-size: 14px; letter-spacing: 2px; }
  .ld-hud-name { font-size: 13px; }
  .ld-banner-big { font-size: 30px; letter-spacing: 5px; }
}
@media (max-width: 520px) {
  .ld-grid { grid-template-columns: repeat(4, 1fr); }
  .ld-title-main { letter-spacing: 4px; }
  .ld-title-cn { letter-spacing: 6px; }
}