:root{
  --ink:#190019; --vio:#2B124C; --plum:#522B5B; --mauve:#854F6C; --blush:#DFB6B2; --ivory:#FBE4D8;
  --bg-1: var(--ink); --bg-2: var(--vio); --text: var(--ivory); --muted:#d9cbd2;
  --card: rgba(251,228,216,0.08); --shadow: 0 10px 30px rgba(0,0,0,.35);
  --ts: 0 1px 2px rgba(0,0,0,.35);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 50% 15%, #FBE4D8 0%, rgba(251,228,216,0.2) 25%, transparent 50%),
              linear-gradient(180deg, var(--ivory) 0%, var(--mauve) 35%, var(--plum) 60%, var(--vio) 85%, var(--ink) 100%);
  background-attachment: fixed;
}
/* iOS Safari jank fix: disable fixed backgrounds on small/touch screens */
@media (max-width: 900px){
  body{ background-attachment: scroll; }
}

.wrap{max-width:1100px; margin:0 auto; padding:16px;}
.wrap *:not(canvas){ text-shadow: var(--ts); }

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:20px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.1));
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.topbar h1{margin:0; font-size: clamp(20px, 3.5vw, 28px); letter-spacing:.5px; text-shadow:0 2px 4px rgba(0,0,0,.5);}
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.topbar button,
#reset{
  appearance:none; border:0; border-radius:14px;
  padding:10px 16px; font-weight:700; color:var(--ink);
  background: var(--ivory); cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
#reset{ background: var(--blush); }
.topbar button:active, #reset:active{ transform: translateY(1px) scale(.99); }

/* Layout */
.layout{
  display:grid; grid-template-columns:1fr min(320px, 38%); gap:16px; margin-top:16px;
}
.stage{
  position:relative; padding:12px; border-radius:24px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
  min-height:60vh;
  display:flex; justify-content:center;
}
/* Make the main game canvas fluid without blurring */
#board{
  display:block;
  width: min(92vw, 620px);
  height: auto;
  aspect-ratio: 10 / 16; /* fallback visual box; real pixels set by JS */
  border-radius:16px;
  background: rgba(0,0,0,.25);
  margin:0 auto;
}

/* Right panel */
.panel{display:grid; gap:16px}
.card{
  background: var(--card); border-radius:20px; padding:16px 16px 12px;
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.06);
}
.card h2{margin:0 0 10px 0; font-size:18px; color:var(--muted)}
.stats{display:grid; gap:10px}
.stats div{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06);
}
.stats span{color:var(--muted)}
.stats strong{font-size:18px}
.about p{margin:0; color:var(--muted)}

/* Next piece canvas responsive */
#next{ width:100%; height:auto; aspect-ratio:1/1; display:block; }

/* Hints */
.hint{
  position:absolute; left:12px; right:12px; bottom:12px;
  text-align:center; font-size:12px; color:var(--muted); opacity:.85;
  user-select:none; pointer-events:none;
}
.hint.desktop{display:none}
@media (pointer:fine){ .hint.desktop{display:block} .hint.touch{display:none} }

/* Accessibility */
:focus-visible{ outline: 3px solid var(--blush); outline-offset: 3px; border-radius:10px }

/* Overlay */
.overlay{
  position:absolute; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.2);
  backdrop-filter: blur(4px); border-radius: inherit; z-index:4;
}
.overlay.hidden{ display:none; }
.overlay-card{
  background: rgba(251,228,216,.14); border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 40px rgba(0,0,0,.4); padding:18px 20px; border-radius:16px;
  text-align:center; max-width:260px;
}
.overlay-card h3{ margin: 0 0 10px 0; font-size: 20px; }
.overlay-card button{
  appearance:none; border:0; border-radius:12px; padding:12px 14px; font-weight:700;
  color:var(--ink); background: var(--ivory); cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.overlay-card button + button{ margin-top:10px; background: var(--blush); color: var(--ink); }

/* Responsive tweaks */
@media (max-width: 1024px){
  .layout{ grid-template-columns: 1fr 320px; }
  #board{ width: min(92vw, 560px); }
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stage{ min-height: 52vh; }
  .topbar h1{ font-size: clamp(18px, 5vw, 22px); }
}
@media (max-width: 560px){
  .panel{ grid-template-columns: 1fr; }
  .topbar h1{ font-size: 20px; }
  .actions button, #reset{ padding:12px 14px; }
  .wrap{ padding:12px; }
  #board{ width: 96vw; }
}
@media (max-width: 380px){
  .actions{ justify-content: flex-end; }
  .topbar{ padding:10px 12px; }
}

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}