/**
 * Тренажёр «Логика» — PCB-тема (как веб-версия Полякова / педобраз)
 */

html:has(.page--logic-game),
body:has(.page--logic-game) {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.page--logic-game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.page--logic-game .header {
  flex-shrink: 0;
}

.page--logic-game .canvas-bg,
.page--logic-game .blob {
  pointer-events: none;
}

body:has(.page--logic-game) > .canvas-bg,
html:has(.page--logic-game) .canvas-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

body:has(.page--logic-game) > .canvas-bg .blob,
html:has(.page--logic-game) .canvas-bg .blob {
  max-height: none;
  transform: translateZ(0);
}

@media (max-height: 720px) {
  .page--logic-game .trainer-back {
    display: none;
  }

  .lg-drop-panel {
    padding: 0.45rem 0.7rem;
  }

  .lg-drop-panel__hint {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lg-toolbar {
    min-height: 2.4rem;
    padding: 0.3rem 0.55rem;
  }
}

.page--logic-game .logic-game-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: min(74rem, 100%);
  margin: 0 auto;
  padding: 0 clamp(0.55rem, 1.2vw, 1rem) 0.35rem;
  overflow: hidden;
}

.page--logic-game .trainer-back {
  flex-shrink: 0;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

/* —— App shell —— */
.lg-app {
  --pcb-bg: #052e1f;
  --pcb-bg-dark: #03201a;
  --pcb-surface: #063d28;
  --pcb-surface-light: #085438;
  --copper: #c9a54c;
  --copper-bright: #ffc55c;
  --copper-dark: #8b6914;
  --copper-glow: rgba(201, 165, 76, 0.45);
  --signal-cyan: #00ffd0;
  --signal-cyan-glow: rgba(0, 255, 208, 0.45);
  --signal-green: #00ff88;
  --wire-off: #2a5a42;
  --crystal: #7dd3fc;
  --crystal-core: #e0f2fe;
  --crystal-deep: #1d4ed8;
  --crystal-glow: rgba(125, 211, 252, 0.65);

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--copper);
  background:
    radial-gradient(ellipse at top left, rgba(0, 255, 208, 0.06), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(201, 165, 76, 0.05), transparent 50%),
    linear-gradient(rgba(0, 255, 208, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 208, 0.025) 1px, transparent 1px),
    var(--pcb-bg);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100%;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.4),
    0 0 28px var(--copper-glow);
  color: rgba(255, 255, 255, 0.94);
}

.lg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-height: 3.15rem;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(90deg, var(--pcb-bg-dark), var(--pcb-surface), var(--pcb-bg-dark));
  border-bottom: 2px solid var(--copper);
  position: relative;
}

.lg-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--copper) 20%,
    var(--copper-bright) 50%,
    var(--copper) 80%,
    transparent
  );
  box-shadow: 0 0 10px var(--copper-glow);
}

.lg-topbar__left,
.lg-topbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.lg-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--copper-bright);
}

.lg-logo__icon {
  filter: drop-shadow(0 0 8px var(--copper-glow));
  animation: lg-logo-glow 2s ease-in-out infinite;
}

@keyframes lg-logo-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px var(--copper-glow));
  }
  50% {
    filter: drop-shadow(0 0 14px var(--copper-glow));
  }
}

.lg-level-info {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.lg-level-info__label {
  color: rgba(255, 255, 255, 0.65);
}

.lg-level-info__num {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--signal-cyan);
  text-shadow: 0 0 10px var(--signal-cyan-glow);
}

.lg-level-info__total {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
}

.lg-lives {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  border-radius: 8px;
  background: var(--pcb-surface);
  border: 2px solid var(--wire-off);
  position: relative;
  overflow: visible;
}

.lg-lives::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-cyan);
  box-shadow: 0 0 8px var(--signal-cyan);
  animation: lg-led-blink 1.5s ease-in-out infinite;
}

@keyframes lg-led-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.lg-lives__gem {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--crystal-glow));
}

.lg-lives__gem-core,
.lg-lives__gem-shine {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.lg-lives__gem-core {
  background: linear-gradient(145deg, #e0f2fe 0%, #38bdf8 45%, #1d4ed8 100%);
}

.lg-lives__gem-shine {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, transparent 45%);
}

.lg-lives__count {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--crystal);
}

.lg-score {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.lg-score__label {
  color: rgba(255, 255, 255, 0.65);
}

.lg-score__value {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--copper-bright);
  text-shadow: 0 0 8px var(--copper-glow);
}

.lg-score--best .lg-score__value {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: none;
}

/* —— Game stage —— */
.lg-game {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lg-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--pcb-bg);
}

.lg-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.75rem;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.lg-board__circuit {
  position: relative;
  padding: 0.55rem;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.lg-svg {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.lg-wire {
  stroke: var(--wire-off);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lg-wire--hot {
  stroke: #00b89c;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 6px var(--signal-cyan-glow));
}

.lg-wire--flow {
  stroke: var(--copper-bright);
  stroke-width: 2.4;
  stroke-dasharray: 6 16;
  animation: lg-current 0.9s linear infinite;
  filter: drop-shadow(0 0 8px var(--copper-glow));
  pointer-events: none;
}

@keyframes lg-current {
  to {
    stroke-dashoffset: -22;
  }
}

.lg-gate rect {
  fill: #03201a;
  stroke: var(--copper);
  stroke-width: 2;
}

.lg-gate--on rect {
  fill: #063d28;
  stroke: var(--signal-cyan);
  filter: drop-shadow(0 0 12px var(--signal-cyan-glow));
}

.lg-gate__label {
  fill: var(--copper-bright);
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  pointer-events: none;
}

.lg-gate--on .lg-gate__label {
  fill: var(--signal-cyan);
}

.lg-gate__port {
  fill: var(--copper);
}

.lg-gate--on .lg-gate__port--out,
.lg-gate__port--hot {
  fill: var(--signal-cyan);
}

.lg-switch__body {
  fill: var(--copper);
  stroke: none;
}

.lg-switch--on .lg-switch__body {
  fill: var(--signal-cyan);
  filter: drop-shadow(0 0 12px var(--signal-cyan-glow));
}

.lg-switch__core {
  fill: var(--pcb-surface);
  pointer-events: none;
}

.lg-switch--on .lg-switch__core {
  fill: #fff;
}

.lg-switch__ring {
  fill: none;
  stroke: var(--signal-cyan);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}

.lg-switch--on .lg-switch__ring {
  opacity: 0.55;
  animation: lg-pulse-ring 1.4s ease-in-out infinite;
}

@keyframes lg-pulse-ring {
  0%,
  100% {
    r: 12;
    opacity: 0.55;
  }
  50% {
    r: 15;
    opacity: 0.2;
  }
}

.lg-term__pad {
  fill: var(--copper);
}

.lg-term--on .lg-term__pad {
  fill: var(--signal-green);
  filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.55));
}

.lg-term__core {
  fill: var(--pcb-surface);
}

.lg-term--on .lg-term__core {
  fill: #fff;
}

.lg-term__label {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 600;
}

/* Shaft */
.lg-board__shaft {
  position: relative;
  border-left: 2px solid var(--copper-dark, #8b6914);
  background:
    linear-gradient(90deg, rgba(3, 32, 26, 0.5), transparent),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 18px,
      rgba(0, 255, 208, 0.04) 18px,
      rgba(0, 255, 208, 0.04) 19px
    );
  padding: 0.45rem 0.5rem;
  min-height: 0;
  overflow: hidden;
}

.lg-shaft__track {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lg-shaft__slot {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}

.lg-shaft__slot--shelf .lg-platform {
  background: linear-gradient(90deg, var(--copper), var(--copper-bright));
  box-shadow: 0 0 10px var(--copper-glow);
  opacity: 1;
  transform: none;
}

.lg-shaft__slot--finish {
  justify-content: center;
}

.lg-shaft__finish {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-bright);
  opacity: 0.7;
}

.lg-platform {
  width: 4.1rem;
  height: 0.62rem;
  border-radius: 4px;
  transition: transform 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}

.lg-platform--out {
  background: linear-gradient(90deg, #00b89c, var(--signal-cyan));
  box-shadow: 0 0 12px var(--signal-cyan-glow);
  transform: translateX(0);
  opacity: 1;
}

.lg-platform--in {
  background: rgba(42, 90, 66, 0.7);
  transform: translateX(1.2rem);
  opacity: 0.35;
}

.lg-crystal {
  position: absolute;
  left: 0.25rem;
  width: 3.6rem;
  height: 3.6rem;
  z-index: 3;
  transition: top 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
  filter:
    drop-shadow(0 0 14px var(--crystal-glow))
    drop-shadow(0 0 28px rgba(56, 189, 248, 0.35))
    drop-shadow(0 10px 18px rgba(15, 23, 42, 0.55));
  animation: lg-crystal-float 2.6s ease-in-out infinite;
}

.lg-crystal__rim,
.lg-crystal__core,
.lg-crystal__facet,
.lg-crystal__facet--b,
.lg-crystal__shine,
.lg-crystal__spark {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.lg-crystal__rim {
  inset: -2px;
  background: linear-gradient(145deg, #e0f2fe, #38bdf8 40%, #1e3a8a 85%, #93c5fd);
  opacity: 0.95;
  filter: blur(0.2px);
}

.lg-crystal__core {
  inset: 2px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98) 0%, transparent 26%),
    radial-gradient(circle at 68% 72%, rgba(14, 165, 233, 0.55) 0%, transparent 42%),
    linear-gradient(145deg, #f0f9ff 0%, #bae6fd 18%, #7dd3fc 38%, #38bdf8 58%, #2563eb 78%, #1e3a8a 100%);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.4),
    inset 0 -8px 16px rgba(30, 58, 138, 0.35);
}

.lg-crystal__facet {
  inset: 2px;
  background: linear-gradient(
    118deg,
    transparent 34%,
    rgba(255, 255, 255, 0.28) 44%,
    transparent 56%
  );
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

.lg-crystal__facet--b {
  inset: 2px;
  background: linear-gradient(
    210deg,
    transparent 40%,
    rgba(14, 165, 233, 0.35) 52%,
    transparent 64%
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.lg-crystal__shine {
  inset: 2px;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.28) 18%,
    transparent 40%
  );
  opacity: 0.9;
  animation: lg-crystal-shine 3.2s ease-in-out infinite;
}

.lg-crystal__spark {
  inset: 18% 22% 55% 48%;
  clip-path: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 70%);
  animation: lg-crystal-spark 2.8s ease-in-out infinite;
  pointer-events: none;
}

.lg-crystal--shelf {
  top: 0.2rem;
}

.lg-crystal--breaking {
  animation: lg-crystal-break 0.4s ease-out forwards;
}

@keyframes lg-crystal-float {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-2deg);
    filter:
      drop-shadow(0 0 12px var(--crystal-glow))
      drop-shadow(0 0 24px rgba(56, 189, 248, 0.3))
      drop-shadow(0 10px 16px rgba(15, 23, 42, 0.5));
  }
  50% {
    transform: translateY(-5px) scale(1.06) rotate(2deg);
    filter:
      drop-shadow(0 0 22px var(--crystal-glow))
      drop-shadow(0 0 36px rgba(125, 211, 252, 0.55))
      drop-shadow(0 14px 22px rgba(56, 189, 248, 0.35));
  }
}

@keyframes lg-crystal-shine {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-3%) translateY(2%);
  }
  50% {
    opacity: 1;
    transform: translateX(4%) translateY(-3%);
  }
}

@keyframes lg-crystal-spark {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.7);
  }
  45% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes lg-crystal-break {
  to {
    opacity: 0;
    transform: scale(1.7) rotate(32deg);
    filter: drop-shadow(0 0 28px rgba(248, 113, 113, 0.75));
  }
}

/* Overlays & coach */
.lg-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 0.65rem;
  overflow: hidden;
  background: rgba(3, 32, 26, 0.82);
  backdrop-filter: blur(6px);
}

.lg-overlay[hidden] {
  display: none;
}

.lg-overlay__card {
  width: min(26rem, 100%);
  max-height: 100%;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  border: 2px solid var(--copper);
  background: linear-gradient(165deg, rgba(6, 61, 40, 0.98), rgba(3, 32, 26, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--copper-glow);
}

.lg-overlay__card--start .lg-overlay__title {
  font-size: clamp(1.05rem, 2.4vh, 1.35rem);
  margin-bottom: 0.45rem;
}

.lg-overlay__card--start .lg-overlay__text {
  margin-bottom: 0.85rem;
  font-size: clamp(0.8rem, 1.9vh, 0.9rem);
}

.lg-overlay__card--wide {
  width: min(32rem, 100%);
}

.lg-overlay__card--wide .lg-rules {
  font-size: clamp(0.78rem, 1.8vh, 0.88rem);
  margin-bottom: 0.55rem;
}

.lg-overlay__card--wide .lg-rules li + li {
  margin-top: 0.25rem;
}

.lg-overlay__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper-bright);
}

.lg-overlay__title {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  color: #fff;
}

.lg-overlay__text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.lg-overlay__text--accent {
  color: var(--signal-cyan);
  border-left: 3px solid var(--signal-cyan);
  padding-left: 0.75rem;
}

.lg-overlay__hint {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: rgba(255, 197, 92, 0.85);
}

.lg-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.lg-rules {
  margin: 0 0 0.85rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.lg-rules li + li {
  margin-top: 0.4rem;
}

.lg-rules kbd,
.lg-overlay__text kbd,
.lg-btn kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--copper);
  background: var(--pcb-bg-dark);
  font-size: 0.75em;
  font-family: ui-monospace, monospace;
  color: var(--copper-bright);
}

.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  border: 2px solid var(--wire-off);
  background: var(--pcb-surface);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lg-btn:hover:not(:disabled) {
  border-color: var(--copper);
  color: var(--copper-bright);
}

.lg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lg-btn--primary {
  border-color: var(--signal-cyan);
  background: linear-gradient(145deg, rgba(0, 184, 156, 0.9), rgba(0, 120, 100, 0.95));
  color: #03201a;
  box-shadow: 0 0 16px var(--signal-cyan-glow);
}

.lg-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #03201a;
}

.lg-btn--drop {
  flex-shrink: 0;
  min-width: 15.5rem;
  min-height: 3.25rem;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 1.5rem;
  border-color: var(--crystal);
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.95), rgba(37, 99, 235, 0.95));
  color: #eff6ff;
  box-shadow: 0 0 18px var(--crystal-glow);
  font-size: 1rem;
}

.lg-btn--drop .lg-btn__main {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lg-btn--drop kbd {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 42, 0.35);
  color: #dbeafe;
}

.lg-btn--drop:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #fff;
  border-color: #93c5fd;
}

.lg-btn--drop:disabled {
  opacity: 1;
  border-color: var(--wire-off);
  background: var(--pcb-surface);
  color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  filter: none;
}

.lg-drop-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.35rem;
  flex-shrink: 0;
  min-height: 4.75rem;
  padding: 0.85rem clamp(1.1rem, 2.5vw, 1.75rem);
  border-top: 2px solid var(--copper-dark);
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(6, 61, 40, 0.95), rgba(3, 32, 26, 0.98));
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lg-drop-panel[data-state="ready"] {
  border-top-color: var(--crystal);
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.25), 0 0 24px rgba(96, 165, 250, 0.12);
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(8, 70, 48, 0.98), rgba(3, 32, 26, 0.98));
  animation: lg-drop-ready 1.8s ease-in-out infinite;
}

.lg-drop-panel[data-state="falling"],
.lg-drop-panel[data-state="riding"] {
  border-top-color: var(--signal-cyan);
}

.lg-drop-panel[data-state="idle"] {
  opacity: 0.78;
}

@keyframes lg-drop-ready {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.2), 0 0 18px rgba(96, 165, 250, 0.1);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.4), 0 0 28px rgba(96, 165, 250, 0.22);
  }
}

.lg-drop-panel__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 12px;
  border: 2px solid var(--wire-off);
  background:
    radial-gradient(circle at 40% 30%, rgba(125, 211, 252, 0.22), transparent 55%),
    var(--pcb-bg-dark);
}

.lg-drop-panel[data-state="ready"] .lg-drop-panel__visual {
  border-color: var(--crystal);
  box-shadow: 0 0 18px var(--crystal-glow);
}

.lg-drop-panel__gem {
  position: relative;
  width: 1.85rem;
  height: 1.85rem;
  filter:
    drop-shadow(0 0 10px var(--crystal-glow))
    drop-shadow(0 4px 10px rgba(29, 78, 216, 0.5));
}

.lg-drop-panel__gem-core,
.lg-drop-panel__gem-shine {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.lg-drop-panel__gem-core {
  background: linear-gradient(145deg, #f0f9ff 0%, #7dd3fc 40%, #2563eb 100%);
}

.lg-drop-panel__gem-shine {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, transparent 42%);
}

.lg-drop-panel__arrow {
  font-size: 0.8rem;
  line-height: 1;
  color: var(--crystal);
  opacity: 0.55;
}

.lg-drop-panel[data-state="ready"] .lg-drop-panel__arrow {
  opacity: 1;
  animation: lg-drop-bounce 1s ease-in-out infinite;
}

@keyframes lg-drop-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

.lg-drop-panel__copy {
  min-width: 0;
}

.lg-drop-panel__title {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}

.lg-drop-panel[data-state="ready"] .lg-drop-panel__title {
  color: #bfdbfe;
}

.lg-drop-panel__hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.lg-drop-panel[data-state="ready"] .lg-drop-panel__hint {
  color: rgba(219, 234, 254, 0.9);
}

@media (max-width: 720px) {
  .lg-drop-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lg-drop-panel .lg-btn--drop {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.lg-btn--demo {
  border-color: var(--copper);
  background: linear-gradient(145deg, rgba(201, 165, 76, 0.35), rgba(139, 105, 20, 0.55));
  color: var(--copper-bright);
}

.lg-btn--large {
  min-height: 2.7rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
}

.lg-btn--tiny {
  min-height: 1.85rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
}

.lg-demo-coach {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 7;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 2px solid var(--signal-cyan);
  background: rgba(3, 32, 26, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--signal-cyan-glow);
}

.lg-demo-coach[hidden] {
  display: none;
}

.lg-demo-coach__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.lg-demo-coach__kicker {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-cyan);
}

.lg-demo-coach__actions {
  display: flex;
  gap: 0.35rem;
}

.lg-demo-coach__step {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

.lg-demo-coach__text {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.lg-demo-coach__bar {
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(42, 90, 66, 0.8);
  overflow: hidden;
}

.lg-demo-coach__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--signal-cyan), var(--copper-bright));
  transition: width 0.35s ease;
}

.lg-switch--pulse .lg-switch__body,
.lg-gate--pulse rect,
.lg-term--pulse .lg-term__pad {
  animation: lg-pulse 1s ease-in-out infinite;
}

.lg-shaft--pulse .lg-platform--out,
.lg-shaft--pulse .lg-shaft__slot--shelf .lg-platform {
  animation: lg-pulse 1s ease-in-out infinite;
}

.lg-game.logic-game-stage--demo .lg-switch {
  pointer-events: none;
}

@keyframes lg-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.45);
  }
}

/* Toolbar */
.lg-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-shrink: 0;
  padding: 0.5rem 0.8rem;
  border-top: 2px solid var(--copper);
  background: linear-gradient(90deg, var(--pcb-bg-dark), var(--pcb-surface), var(--pcb-bg-dark));
  overflow: hidden;
}

.lg-status {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  min-height: 1.2rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(0, 255, 208, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-toolbar__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.lg-lives-dots {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--crystal);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .lg-board {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }

  .lg-toolbar {
    flex-wrap: nowrap;
  }

  .lg-toolbar__actions .lg-btn kbd {
    display: none;
  }

  .lg-status {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .lg-topbar {
    min-height: 2.75rem;
    padding: 0.35rem 0.6rem;
    gap: 0.45rem;
  }

  .lg-score--best {
    display: none;
  }

  .lg-board {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }

  .lg-crystal {
    width: 2.65rem;
    height: 2.65rem;
    left: 0.2rem;
  }

  .lg-platform {
    width: 3.5rem;
  }

  .lg-drop-panel {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.45rem 0.6rem;
    gap: 0.45rem 0.65rem;
  }

  .lg-drop-panel .lg-btn--drop {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2.45rem;
  }

  .lg-drop-panel__hint {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lg-toolbar__actions {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .lg-toolbar__actions .lg-btn {
    padding: 0.35rem 0.45rem;
    font-size: 0.75rem;
  }
}