.secondary.compact { margin-top: 9px; padding: 11px 14px; }

.l2-brief {
  position: relative;
  height: calc(100% - 72px);
  background: #f1dfbd;
}

.l2-brief-scene {
  position: relative;
  height: 66%;
  overflow: hidden;
  background: url("assets/level02/counter-customer-scene-v2.png") center / cover no-repeat;
  image-rendering: pixelated;
  border-bottom: 5px solid #17383b;
}

.l2-dialogue { z-index: 5; }

.l2-game {
  height: calc(100% - 72px);
  display: flex;
  flex-direction: column;
  background: #fff7e8;
}

.l2-game .objective {
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 2px solid #17383b;
}

.l2-game .objective strong { color: #555653; font-size: 12px; letter-spacing: .08em; }

.l2-room-window {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  overflow: hidden;
  background: #17383b;
}

.l2-room-view {
  position: absolute;
  inset: 0;
  background-image: url("assets/level01-room-atlas-clean-v2.png");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: opacity .15s ease;
}

.l2-room-view.view-counter {
  background-image: url("assets/level02/counter-customer-scene-v2.png");
  background-size: cover;
  background-position: center;
}

.l2-room-view.view-counter.customer-gone {
  background-image: url("assets/level02/counter-empty-v4.png");
}

.l2-room-view.view-dining {
  background-image: url("assets/level02/dining-clean-v2.png");
  background-size: cover;
  background-position: center;
}

.l2-room-view.view-dining.customer-seated {
  background-image: url("assets/level02/dining-customer-seated-v4.png");
}

.l2-room-window .task-card { z-index: 10; bottom: 9px; pointer-events: none; }

.l2-hotspot {
  position: absolute;
  z-index: 6;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.l2-hotspot:hover { background: transparent; }
.l2-hotspot:focus-visible { outline: 3px solid #fff7e8; outline-offset: 2px; background: #2e666322; }
.l2-hotspot.solved { pointer-events: none; }

.hs-customer { right: 20%; top: 29%; width: 24%; height: 65%; }
.hs-register { left: 46%; top: 49%; width: 17%; height: 17%; }
.hs-pickup { left: 40%; top: 5%; width: 27%; height: 23%; }
.hs-notice { left: 22%; top: 8%; width: 24%; height: 24%; }
.hs-drawer { left: 52%; top: 51%; width: 28%; height: 22%; }
.hs-menu { left: 13%; top: 49%; width: 25%; height: 24%; }
.hs-waiting { right: 10%; top: 43%; width: 34%; height: 34%; }
.hs-chair { right: 7%; top: 39%; width: 32%; height: 42%; }

.l2-inventory { min-height: 124px; height: 124px; flex-basis: 124px; }
.l2-inventory button { height: 116px; }
.l2-inventory .item-icon { width: 92px; height: 92px; }

.l2-closeup {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #0d2527d9;
}

.l2-closeup-card {
  position: relative;
  width: min(100%, 410px);
  max-height: 88%;
  overflow-y: auto;
  padding: 22px 20px 19px;
  border: 4px solid #17383b;
  background: #fff7e8;
  box-shadow: 8px 8px 0 #d68576;
}

.l2-closeup-card > span { color: #555653; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.l2-closeup-card h3 { margin: 7px 34px 12px 0; font: 700 27px/1.1 Georgia,serif; color: #17383b; }
.l2-closeup-card p { margin: 13px 0; color: #333; font-size: 16px; line-height: 1.45; }
.closeup-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 2px solid #17383b; background: transparent; color: #17383b; font-size: 22px; cursor: pointer; }

.l2-clue-art {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 3px solid #17383b;
  background: #ead6ae;
}

.l2-clue-art::before { content: ""; position: absolute; inset: 0; background-image: url("assets/level01-room-atlas-clean-v2.png"); background-size: 200% 200%; image-rendering: pixelated; filter: brightness(.88); }
.l2-clue-art.register::before { background-position: 0 0; transform: scale(2.4); transform-origin: 53% 62%; }
.l2-clue-art.pickup::before { background-position: 0 0; transform: scale(2.2); transform-origin: 53% 18%; }
.l2-clue-art.notice::before,.l2-clue-art.drawer::before { background-position: 100% 0; transform: scale(2.1); transform-origin: 45% 46%; }
.l2-clue-art.menu::before,.l2-clue-art.waiting::before {
  background-image: url("assets/level02/dining-clean-v2.png");
  background-size: cover;
  background-position: center;
  transform: scale(2);
  transform-origin: 40% 56%;
}
.l2-clue-art.chair::before { background-position: 100% 100%; transform: scale(2); transform-origin: 75% 55%; }
.l2-clue-art.customer::before {
  background-image: url("assets/level02/counter-customer-scene-v2.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.85);
  transform-origin: 70% 55%;
}

.clue-prop { position: absolute; z-index: 2; left: 50%; top: 50%; max-width: 68%; max-height: 78%; transform: translate(-50%,-50%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 2px #17383b66); }
.clue-customer { max-height: 145%; top: 62%; }
.clue-code { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 13px 19px; border: 3px solid #17383b; background: #fff7e8ee; color: #17383b; font: 900 24px/1 "Trebuchet MS",sans-serif; letter-spacing: .25em; }
.clue-note { position: absolute; z-index: 3; left: 13%; right: 13%; top: 20%; padding: 16px; transform: rotate(-2deg); background: #fff7e8ee; color: #17383b; box-shadow: 4px 5px 0 #17383b55; font: 700 16px/1.5 Georgia,serif; }

#l2CloseupActions { display: grid; gap: 9px; }
#l2CloseupActions button { width: 100%; padding: 12px; border: 2px solid #17383b; background: #2e6663; color: #fff; font: 800 14px "Trebuchet MS",sans-serif; cursor: pointer; }
#l2CloseupActions button.secondary-action { background: transparent; color: #17383b; }
.code-entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-entry input { min-width: 0; padding: 11px; border: 3px solid #17383b; background: #fff; color: #17383b; font: 900 20px "Trebuchet MS",sans-serif; letter-spacing: .25em; text-align: center; }

.l2-drop-ready { box-shadow: inset 0 0 0 5px #f1dfbd; }
.l2-inventory button.dragging { opacity: .72; transform: translateY(-6px) scale(1.04); }
.l2-inventory button { touch-action: none; }
.l2-success-panel { overflow: hidden; }
.l2-success-animation {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 14px 0;
  border: 4px solid #17383b;
  background: url("assets/level02/success-note-board-nameless-v1.png") 0 0 / 200% 200% no-repeat;
  container-type: inline-size;
  image-rendering: pixelated;
  animation: l2-note-board 10.4s steps(1,end) 1 forwards;
}
.l2-note-name {
  display: none;
  position: absolute;
  z-index: 1;
  color: #45382e;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.l2-success-animation[data-frame="2"] .l2-note-name-large {
  display: block;
  left: 68%;
  top: 34%;
  width: 21%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-size: clamp(8px, min(4cqw, calc(38cqw / var(--name-chars))), 24px);
}
.l2-success-animation[data-frame="3"] .l2-note-name-small {
  display: block;
  left: 32%;
  top: 47%;
  width: 12%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-size: clamp(6px, min(2cqw, calc(22cqw / var(--name-chars))), 14px);
}

@keyframes l2-note-board {
  0%,23% { background-position: 0 0; }
  25%,48% { background-position: 100% 0; }
  50%,73% { background-position: 0 100%; }
  75%,100% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) { .l2-success-animation { animation: none; background-position: 100% 100%; } }

@media (max-height: 760px) {
  .l2-inventory { min-height: 104px; height: 104px; flex-basis: 104px; }
  .l2-inventory button { height: 98px; }
  .l2-inventory .item-icon { width: 78px; height: 78px; }
  .l2-closeup-card { max-height: 92%; }
  .l2-clue-art { min-height: 150px; }
}