.amulet-play-board.amulet-puzzle,.amulet-puzzle {
  position:relative; display:flex; flex-direction:column; width:min(100%,640px);
  max-width:100%; min-width:0; margin-inline:auto; box-sizing:border-box;
  overflow:hidden; isolation:isolate; container-type:inline-size; border-radius:24px;
  background:radial-gradient(ellipse at 48% 36%,#244354 0%,#152f45 48%,#0b2038 100%);
  color:#e5e0ce; aspect-ratio:auto;
}
.amulet-puzzle-viewport { position:relative; width:100%; aspect-ratio:4/5; min-width:0; touch-action:none; }
/* The square lagoon tray wastes a tall portrait frame; later wide-layout rules still win. */
.amulet-puzzle-viewport:where([data-mode="logjam"],[data-mode="wave"]) { aspect-ratio:1; }
.amulet-puzzle-canvas,.amulet-puzzle-controls { position:absolute; inset:0; width:100%; height:100%; display:block; }
.amulet-puzzle-controls { pointer-events:none; }
.amulet-puzzle-viewport::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:24px; box-shadow:inset 0 0 42px 12px #071a3438; }
.amulet-puzzle-hit {
  position:absolute; width:44px; height:44px; min-width:44px; min-height:44px;
  transform:translate(-50%,-50%); padding:0; border:0; border-radius:12px;
  background:transparent; color:transparent; pointer-events:auto; touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.amulet-piece-hit { z-index:2; cursor:grab; }
.amulet-piece-hit[aria-pressed="true"] { cursor:grabbing; }
.amulet-puzzle-hit:focus-visible { outline:2px solid #dfc497; outline-offset:1px; background:#e5dfca18; }
.amulet-puzzle-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:4px 10px; }
.amulet-puzzle-tool {
  min-width:44px; min-height:44px; padding:8px 13px; border:1px solid #bfa18188;
  border-radius:18px; background:#102c43; color:#e5e0ce; font:inherit;
  box-shadow:inset 0 1px #e5dfca12,0 3px 9px #08162540; cursor:pointer; touch-action:manipulation;
}
.amulet-puzzle-tool:focus-visible { outline:2px solid #dfc497; outline-offset:2px; }
.amulet-puzzle-tool:disabled { opacity:.42; cursor:default; }
.amulet-puzzle-status { min-height:2.8em; margin:4px 12px 12px; text-align:center; font-size:.85rem; line-height:1.4; color:#c8d0cb; }
.amulet-puzzle[data-puzzle-state="unavailable"] .amulet-puzzle-viewport { opacity:.35; }
@media (max-height:590px) and (orientation:landscape) {
  .amulet-puzzle { width:min(100%,560px); }
  .amulet-puzzle-viewport { aspect-ratio:1.55; }
}

@container (min-width:560px) { .amulet-puzzle-viewport { aspect-ratio:1.4; } }

.amulet-puzzle-outcome { position:absolute; inset:0; z-index:3; pointer-events:none; background:#0b2038 center/contain no-repeat; }
.amulet-puzzle-outcome[hidden] { display:none; }

.amulet-shell-hit { cursor:pointer; }
.amulet-wave-hand,.amulet-puzzle-hand { position:absolute; width:54px; height:auto; z-index:4; pointer-events:none; opacity:.75; filter:brightness(0) invert(1); }
.amulet-wave-hand[hidden],.amulet-puzzle-hand[hidden],.amulet-hint-direction[hidden] { display:none; }
.amulet-puzzle-toolbar:empty { display:none; }

.amulet-hint-direction { position:absolute; transform:translate(-50%,-50%); z-index:4; pointer-events:none; color:#eee6ce; opacity:.65; font-size:28px; }
@media(prefers-reduced-motion:reduce) { .amulet-wave-hand,.amulet-puzzle-hand,.amulet-hint-direction { animation:none; transition:none; } }