.mpa-traditional-puzzle{
  --mpa-tp-ink:#1c2430;
  --mpa-tp-gold:#8f6a3a;
  --mpa-tp-paper:#fffdf8;
  --mpa-tp-veil:#f4efe4;
  --mpa-tp-line:#d9cdb8;
  --mpa-tp-aspect:1.3333;
  --mpa-tp-rows:3;
  --mpa-tp-cols:4;
  --mpa-tp-tray-ratio:1;
  background:var(--mpa-tp-paper);
  border:1px solid var(--mpa-tp-line);
  border-radius:24px;
  box-shadow:0 12px 30px #1c243014;
  color:var(--mpa-tp-ink);
  font:inherit;
  margin:24px auto;
  max-width:1120px;
  padding:clamp(16px,3vw,30px);
}
.mpa-traditional-puzzle *{box-sizing:border-box}
.mpa-tp-top{align-items:start;display:flex;gap:18px;justify-content:space-between}
.mpa-tp-eyebrow{color:var(--mpa-tp-gold);font-size:.75rem;font-weight:800;letter-spacing:.13em;margin:0 0 7px}
.mpa-tp-title{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.mpa-tp-status{line-height:1.45;margin:8px 0 0;min-height:3em;font-variant-numeric:tabular-nums}
.mpa-tp-buttons,.mpa-tp-options{display:flex;flex-wrap:wrap;gap:9px}
.mpa-tp-buttons{justify-content:end}
.mpa-tp-options{align-items:end;border-top:1px solid var(--mpa-tp-line);margin-top:18px;padding-top:16px}
.mpa-tp-options label{display:grid;font-size:.84rem;font-weight:700;gap:6px}
.mpa-tp-options input,.mpa-tp-options select,.mpa-traditional-puzzle button{
  border:1px solid #6f675c;border-radius:8px;color:var(--mpa-tp-ink);font:inherit;padding:9px;min-height:44px
}
.mpa-traditional-puzzle button{background:#fff;cursor:pointer;font-weight:700}
.mpa-tp-reset,.mpa-tp-restore{background:var(--mpa-tp-gold)!important;color:#fffdf8;border-color:#6e522c}
.mpa-tp-restore[hidden]{display:none}
.mpa-tp-slot:focus-visible,.mpa-tp-piece:focus-visible,.mpa-traditional-puzzle button:focus-visible,
.mpa-tp-options input:focus-visible,.mpa-tp-options select:focus-visible{
  outline:3px solid #1d6797;outline-offset:3px
}
.mpa-tp-instructions{line-height:1.5;margin:17px 0}
.mpa-tp-instructions kbd{background:#fff;border:1px solid #b5aa98;border-radius:3px;padding:1px 4px}
.mpa-tp-play{display:grid;gap:20px;grid-template-columns:minmax(0,1.35fr) minmax(230px,.8fr)}
.mpa-tp-panel{background:var(--mpa-tp-paper);border:1px solid var(--mpa-tp-line);border-radius:14px;padding:13px}
.mpa-tp-panel>strong{display:block;margin-bottom:11px}
.mpa-tp-board{
  aspect-ratio:var(--mpa-tp-aspect);
  background-color:#e6dece;
  border:2px solid var(--mpa-tp-ink);
  display:grid;
  grid-template-columns:repeat(var(--mpa-tp-cols),1fr);
  grid-template-rows:repeat(var(--mpa-tp-rows),1fr);
  isolation:isolate;
  overflow:hidden;
  position:relative
}
.mpa-tp-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  pointer-events:none;user-select:none;z-index:0
}
.mpa-tp-slot{min-height:0;min-width:0;position:relative;overflow:visible;z-index:1}
.mpa-tp-slot.mpa-tp-filled{z-index:3}
.mpa-tp-slot.mpa-tp-target,.mpa-tp-slot.mpa-tp-magnet{z-index:2}
.mpa-tp-veil{
  position:absolute;inset:0;background:var(--mpa-tp-veil);opacity:1;pointer-events:none;z-index:0
}
.mpa-tp-board:not(.mpa-tp-guide-off) .mpa-tp-veil{opacity:.78}
.mpa-tp-slot.mpa-tp-filled .mpa-tp-veil{display:none}
.mpa-tp-slot.mpa-tp-magnet .mpa-tp-veil{background:color-mix(in srgb, var(--mpa-tp-gold) 28%, var(--mpa-tp-veil));opacity:.7}
.mpa-tp-guide-svg,.mpa-tp-piece-svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block;pointer-events:none
}
.mpa-tp-guide-svg{color:#1c243066;z-index:1}
.mpa-tp-board.mpa-tp-guide-off .mpa-tp-guide-svg{color:#1c243022}
.mpa-tp-placed{position:absolute;inset:0;z-index:3;overflow:visible}
.mpa-tp-placed.mpa-tp-just{animation:mpa-tp-in .38s cubic-bezier(.22,1,.36,1)}
@keyframes mpa-tp-in{
  from{transform:scale(1.045);filter:drop-shadow(0 8px 10px #1c243033)}
  to{transform:scale(1);filter:none}
}
.mpa-tp-slot.mpa-tp-shake{animation:mpa-tp-shake .28s cubic-bezier(.22,1,.36,1)}
@keyframes mpa-tp-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.mpa-tp-tray{
  display:grid;gap:10px;
  grid-template-columns:repeat(var(--mpa-tp-cols),minmax(0,1fr))
}
.mpa-tp-piece{
  aspect-ratio:var(--mpa-tp-tray-ratio);
  background:transparent;border:0;padding:0;
  cursor:grab;position:relative;touch-action:none;user-select:none;
  filter:drop-shadow(0 2px 2px #1c24301f)
}
.mpa-tp-piece.mpa-tp-locked{cursor:default}
.mpa-tp-piece.mpa-tp-dragging{opacity:.28}
.mpa-tp-piece.mpa-tp-selected .mpa-tp-outline{stroke:#1d6797;stroke-width:3.2;filter:drop-shadow(0 0 3px #1d6797)}
.mpa-tp-tray-svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.mpa-tp-preview{
  cursor:grabbing!important;opacity:.96;pointer-events:none;position:fixed;z-index:999999;
  filter:drop-shadow(0 14px 18px #1c243040)
}
.mpa-tp-preview.mpa-tp-snapping{filter:drop-shadow(0 0 10px #8f6a3acc) drop-shadow(0 14px 18px #1c243040)}
.mpa-tp-success{
  background:#e7d7b5;border:1px solid var(--mpa-tp-gold);border-radius:10px;
  font-weight:800;margin-top:18px;padding:14px
}
@media(max-width:720px){
  .mpa-tp-top,.mpa-tp-play{display:grid;grid-template-columns:1fr}
  .mpa-tp-buttons{justify-content:start}
  .mpa-tp-tray{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .mpa-tp-placed.mpa-tp-just,.mpa-tp-slot.mpa-tp-shake{animation:none}
}