* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #151515;
  color: #f4efe7;
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 430px) 1fr;
  gap: 24px;
  padding: 24px;
}
.panel, .stage {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.panel { padding: 24px; overflow: auto; }
.headline h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: 1; }
.headline p { color: #d8cfc4; }
.eyebrow { margin: 0 0 8px; color: #ff6347 !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.controls { display: grid; gap: 14px; margin: 18px 0; }
label { display: grid; gap: 7px; font-weight: 700; }
input, select, button {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
}
input, select { background: #fff; color: #141414; }
small { color: #c3b8ad; font-weight: 500; }
button {
  cursor: pointer;
  background: #ff3d1f;
  color: white;
  font-weight: 800;
  transition: transform .15s ease, opacity .15s ease;
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.check input { width: auto; }
.quick-sizes, .action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.quick-sizes button, .ghost { width: auto; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.stats span { background: rgba(0,0,0,.24); padding: 12px; border-radius: 14px; text-align: center; }
.status { min-height: 24px; color: #ffdfd7; }
details { margin-top: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
summary { cursor: pointer; font-weight: 800; }
.upload-form { display: grid; gap: 10px; margin-top: 12px; }
.highscore, .admin-box { color: #efe7db; line-height: 1.5; }
.highscore ol { margin: 8px 0 0; padding-left: 24px; }
.admin-box ul { max-height: 160px; overflow: auto; padding-left: 20px; }
.stage {
  position: relative;
  min-height: calc(100vh - 48px);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}
.puzzle {
  width: min(78vmin, 760px);
  aspect-ratio: 1 / 1;
  display: grid;
  gap: clamp(2px, .5vmin, 6px);
  background: rgba(0,0,0,.5);
  padding: clamp(4px, .8vmin, 10px);
  border-radius: 22px;
  touch-action: manipulation;
}
.tile {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: clamp(6px, 1vmin, 14px);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 14px rgba(0,0,0,.28);
}
.tile.blank {
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.preview-wrap {
  position: absolute;
  inset: 24px;
  z-index: 3;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  border-radius: 22px;
}
.preview-wrap.show { display: grid; }
.preview-wrap img { max-width: min(86vmin, 780px); max-height: 86vmin; border-radius: 18px; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.score-dialog {
  border: 0;
  border-radius: 22px;
  padding: 0;
  max-width: 420px;
  color: #171717;
}
.score-dialog::backdrop { background: rgba(0,0,0,.65); }
.score-dialog form { padding: 24px; display: grid; gap: 14px; }
.score-dialog h2 { margin: 0; }
.score-dialog menu { display: flex; gap: 10px; padding: 0; margin: 0; }
.score-dialog menu button:first-child { background: #333; }
code { background: rgba(0,0,0,.28); padding: 2px 5px; border-radius: 6px; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 12px; }
  .stage { min-height: auto; }
  .puzzle { width: min(94vw, 680px); }
}