.maze-workspace {
  min-height: 640px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(58, 92, 91, .18), transparent 48%);
}

.maze-workspace-heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.maze-workspace-heading h2,
.maze-control-panel h2 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 1.08rem;
  font-weight: 500;
}

.maze-status {
  border: 1px solid rgba(152, 183, 177, .25);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--muted);
  background: rgba(4, 14, 18, .55);
  font-size: .7rem;
}

.maze-status[data-kind="complete"] { color: #8fe6d3; border-color: rgba(99, 220, 196, .45); }
.maze-status[data-kind="error"] { color: #f5aaa0; border-color: rgba(245, 170, 160, .4); }

.maze-scene {
  display: grid;
  place-items: center;
  gap: 15px;
  padding: clamp(18px, 4vw, 34px) 18px 20px;
}

.maze-board {
  --maze-cell: clamp(28px, min(5.2vw, 5.2vh), 50px);
  display: grid;
  grid-template-columns: repeat(var(--maze-columns, 12), var(--maze-cell));
  grid-template-rows: repeat(var(--maze-rows, 11), var(--maze-cell));
  border: 1px solid rgba(132, 166, 159, .2);
  padding: 6px;
  outline: none;
  background: #000;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .44), 0 0 0 1px rgba(0, 0, 0, .7);
}

.maze-board:focus-visible { box-shadow: 0 20px 55px rgba(0, 0, 0, .44), 0 0 0 2px rgba(99, 220, 196, .65); }

.maze-cell {
  position: relative;
  width: var(--maze-cell);
  height: var(--maze-cell);
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(105, 134, 130, .08);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  background: #101d21;
  box-shadow: none;
  box-sizing: border-box;
}

.maze-cell.floor {
  background-color: #16272a;
  background-image: radial-gradient(circle at 28% 32%, rgba(201, 224, 205, .07) 0 1px, transparent 2px);
}

.maze-cell.wall {
  border-color: rgba(5, 11, 13, .65);
  background-color: #26393a;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .04) 25%, transparent 25%), linear-gradient(315deg, rgba(0, 0, 0, .14) 25%, transparent 25%);
  background-size: 13px 13px;
}

.maze-cell.unknown {
  border-color: #000 !important;
  background: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
}

.maze-cell.unknown::after {
  content: none;
}

.maze-cell.remembered {
  border-color: rgba(98, 130, 124, .2);
  filter: brightness(.7) saturate(.68);
  opacity: .94;
}

.maze-cell.remembered.goal::before {
  border-color: #55a694;
  box-shadow: 0 0 6px rgba(85, 166, 148, .3);
}

.maze-cell.remembered.box::after {
  border-color: #8e6e49;
  background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,.1) 46% 54%, transparent 55%), #59422f;
}
.maze-cell.goal::before {
  position: absolute;
  inset: 22%;
  border: 2px solid #65d7bd;
  box-shadow: 0 0 11px rgba(99, 220, 196, .65), inset 0 0 8px rgba(99, 220, 196, .35);
  content: "";
  transform: rotate(45deg);
}
.maze-cell.active-goal::before { border-color: #c7fff1; background: rgba(101, 215, 189, .22); box-shadow: 0 0 18px rgba(99, 220, 196, .95), inset 0 0 10px rgba(199, 255, 241, .7); }
.maze-cell.portal::before { position: absolute; inset: 13%; border: 2px solid #b995e8; border-radius: 50%; content: ""; box-shadow: 0 0 12px rgba(185, 149, 232, .55), inset 0 0 8px rgba(185, 149, 232, .25); }
.maze-cell.portal::after { position: absolute; inset: 27%; border: 1px dashed #d9c3f4; border-radius: 50%; content: ""; }
.maze-cell.remembered.portal::before { border-color: #806a9d; box-shadow: 0 0 6px rgba(128, 106, 157, .35); }
.maze-cell.box::after {
  position: absolute;
  inset: 13%;
  border: 2px solid #b68d5a;
  border-radius: 4px;
  background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,.15) 46% 54%, transparent 55%), #71533a;
  box-shadow: inset 0 0 0 3px rgba(24, 17, 13, .22), 0 4px 8px rgba(0, 0, 0, .35);
  content: "";
}
.maze-cell.npc::after { position: absolute; z-index: 4; top: 3px; right: 3px; width: 15px; height: 15px; border: 1px solid #e4ca83; border-radius: 50%; color: #f5e5b1; background: #67562e; content: "N"; font: 600 9px/14px sans-serif; text-align: center; box-shadow: 0 0 7px rgba(228, 202, 131, .5); }
.maze-cell.pickup::after { position: absolute; inset: 22%; color: #f3d17b; content: "◆"; font-size: calc(var(--maze-cell) * .48); line-height: 1; text-align: center; filter: drop-shadow(0 0 5px rgba(243, 209, 123, .65)); }
.maze-cell.door::after { position: absolute; inset: 8% 24%; border: 2px solid #76999a; border-bottom-width: 4px; border-radius: 5px 5px 1px 1px; background: repeating-linear-gradient(90deg, #293f42 0 4px, #3e5b5d 4px 7px); content: ""; box-shadow: 0 0 8px rgba(118, 153, 154, .35); }
.maze-cell.player { z-index: 2; overflow: visible; background: radial-gradient(circle, rgba(99, 220, 196, .23), #16272a 70%); }
.maze-cell.player img { position: absolute; z-index: 3; inset: -8%; width: 116%; height: 116%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.5)); }

.maze-controls { display: flex; align-items: end; justify-content: center; gap: 10px; width: 100%; }
.maze-context-action { width: min(112px, 24vw); min-width: 0; min-height: 38px; padding: 7px 8px; font-size: .72rem; }
.maze-context-action:disabled { opacity: .42; }
.maze-pad { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 38px); gap: 6px; }
.maze-pad button { min-width: 0; min-height: 0; padding: 0; font-size: 1rem; }
.maze-pad button:nth-child(1) { grid-column: 2; }
.maze-pad button:nth-child(2) { grid-row: 2; grid-column: 1; }
.maze-pad button:nth-child(3) { grid-row: 2; grid-column: 2; }
.maze-pad button:nth-child(4) { grid-row: 2; grid-column: 3; }

.maze-message-panel { margin: 0 18px 18px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: rgba(2, 10, 14, .6); }
.maze-message-title { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: #c7d9d5; font-size: .72rem; }
.maze-message-title small { color: var(--muted); font-size: .65rem; }
.maze-observations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 12px 12px; }
.maze-observation { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); gap: 7px; align-items: start; border: 1px solid rgba(128, 158, 152, .15); border-radius: 8px; padding: 7px 8px; background: rgba(16, 35, 37, .55); }
.maze-observation strong { color: #8fcabd; font-size: .67rem; }
.maze-observation span { color: #b8c9c5; font-size: .69rem; line-height: 1.45; }
.maze-observation[data-kind="wall"] { background: rgba(35, 49, 50, .62); }
.maze-observation[data-kind="box"], .maze-observation[data-kind="box-on-goal"] { border-color: rgba(182, 141, 90, .34); background: rgba(71, 52, 37, .46); }
.maze-observation[data-kind="box"] strong, .maze-observation[data-kind="box-on-goal"] strong { color: #d2aa75; }
.maze-observation[data-kind="goal"] { border-color: rgba(101, 215, 189, .28); }
.maze-observation[data-kind="portal"] { border-color: rgba(185, 149, 232, .3); background: rgba(50, 35, 67, .42); }
.maze-observation[data-kind="npc"] { border-color: rgba(228, 202, 131, .34); background: rgba(73, 61, 31, .35); }
.maze-observation[data-kind="pickup"] { border-color: rgba(243, 209, 123, .3); }
.maze-observation[data-kind="door"] { border-color: rgba(118, 153, 154, .36); background: rgba(31, 52, 55, .52); }
.maze-interaction { margin: 0 12px 12px; border: 1px solid rgba(99, 220, 196, .38); border-radius: 10px; padding: 12px; background: linear-gradient(135deg, rgba(27, 59, 56, .72), rgba(12, 27, 30, .86)); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.maze-interaction-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maze-interaction-heading strong { color: #8fe6d3; font-size: .76rem; }
.maze-interaction-heading span { color: #dac78d; font-size: .68rem; }
.maze-interaction > p { margin: 9px 0 11px; color: #d8e8e4; font-size: .75rem; line-height: 1.55; }
.maze-item-picker { display: grid; gap: 6px; margin: 0 0 11px; }
.maze-item-picker span { color: var(--muted); font-size: .67rem; }
.maze-item-picker select { width: 100%; min-height: 38px; border: 1px solid rgba(128, 158, 152, .3); border-radius: 7px; padding: 6px 8px; color: #d8e8e4; background: #0d1b1e; }
.maze-history-title { border-top: 1px solid var(--line); }
.maze-messages { min-height: 82px; max-height: 112px; overflow: auto; padding: 9px 12px; }
.maze-messages p { margin: 0; padding: 3px 0; color: #6e8582; font-size: .72rem; line-height: 1.45; }
.maze-messages p.latest { color: #d7e7e3; }
.maze-messages p[data-kind="blocked"] { color: #b9a496; }
.maze-messages p[data-kind="success"] { color: #8fe6d3; }
.maze-messages p[data-kind="error"] { color: #f5aaa0; }

.maze-control-panel .maze-hint { margin: 12px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.maze-wum-card { display: flex; align-items: center; gap: 11px; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: rgba(2, 10, 14, .35); }
.maze-wum-card img { width: 55px; height: 55px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,.035); }
.maze-wum-card div, .maze-wum-card span, .maze-wum-card strong, .maze-wum-card small { display: block; min-width: 0; }
.maze-wum-card span, .maze-wum-card small { color: var(--muted); font-size: .65rem; }
.maze-wum-card strong { margin: 3px 0; color: #dbeae6; font-size: .85rem; }
.maze-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.maze-stat-grid div { padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 10, 14, .3); }
.maze-stat-grid span, .maze-stat-grid strong { display: block; }
.maze-stat-grid span { margin-bottom: 4px; color: var(--muted); font-size: .64rem; }
.maze-stat-grid strong { color: #d8e8e4; font-size: .82rem; font-variant-numeric: tabular-nums; }
#mazeReset { width: 100%; }
.maze-stage-list { display: grid; gap: 7px; margin: 14px 0; }
.maze-stage-button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 1px solid rgba(128, 158, 152, .16); border-radius: 9px; padding: 7px 9px; text-align: left; background: rgba(2, 10, 14, .3); }
.maze-stage-button > span { color: #617975; font-size: .65rem; font-variant-numeric: tabular-nums; }
.maze-stage-button > strong { color: #b9ccc7; font-size: .76rem; font-weight: 500; }
.maze-stage-button > small { color: var(--muted); font-size: .61rem; }
.maze-stage-button.active { border-color: rgba(99, 220, 196, .42); background: rgba(42, 91, 82, .25); }
.maze-stage-button.active > strong { color: #8fe6d3; }
.maze-stage-button.locked { opacity: .52; }
.maze-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; color: var(--muted); font-size: .67rem; }
.maze-legend span { display: flex; align-items: center; gap: 6px; }
.maze-legend i { width: 15px; height: 15px; border: 1px solid rgba(150,180,174,.18); background: #16272a; }
.maze-legend i.wall { background: #324747; }
.maze-legend i.box { border: 3px solid #71533a; background: #b68d5a; }
.maze-legend i.goal { border: 2px solid #65d7bd; background: transparent; transform: rotate(45deg) scale(.72); }

@media (max-width: 720px) {
  .maze-workspace { min-height: 0; }
  .maze-workspace-heading { min-height: 60px; padding: 11px 13px; }
  .maze-scene { padding: 13px 6px; }
  .maze-board { --maze-cell: min(8vw, 42px); padding: 4px; }
  .maze-controls { gap: 6px; }
  .maze-context-action { width: min(78px, 21vw); padding-inline: 5px; font-size: .66rem; }
  .maze-message-panel { margin: 0 8px 12px; }
  .maze-message-title small { display: none; }
  .maze-observations { grid-template-columns: 1fr; }
}