:root{
  --pad-size: 72px;
  --pad-gap: 12px;
  --board-max: 1500px;
  --label-h: 26px;
  --ink: #10131a;
  --ink-2: #3a4557;
  --strip-top: 46%;
  --strip-height: 32vh;
}
[hidden]{ display:none !important; }
html{ background:#0a0b0f; }
body{ margin:0; font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans; color:var(--ink); }

.bg-strip{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.strip-rot{ position:absolute; left:-25vw; top:var(--strip-top); transform: translateY(-50%) rotate(-4deg); }
.strip{ display:flex; gap:16px; align-items:center; animation: scroll 55s linear infinite; will-change: transform; filter: saturate(1.05) contrast(1.05) brightness(.95); }
.strip img{ height: var(--strip-height); width:auto; border-radius:14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); transform: perspective(800px) rotateY(2deg); }
@keyframes scroll { from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }

.toolbar{ position:sticky; top:0; z-index:2; display:flex; gap:14px; align-items:center; padding:12px 16px; backdrop-filter: blur(6px); }
.toolbar h1{ margin:0; font-size:clamp(18px,2.4vw,24px); color:#e7ebf5; }
.controls{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.ghost{ background:transparent; border:1px solid rgba(231,235,245,.35); padding:8px 12px; border-radius:10px; color:#e7ebf5; cursor:pointer; }
.size-control{ display:flex; align-items:center; gap:8px; color:#cbd3e3; font-weight:600; }
.size-control input{ width:160px; }
.lever-wrap{ display:flex; align-items:center; gap:8px; }
.lever-text{ font-weight:700; letter-spacing:.4px; color:#cbd3e3; }
.lever{ border:none; padding:0; background:transparent; cursor:pointer; width:72px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
.lever.locked img{ content: url('assets/lever_off.svg'); } .lever.unlocked img{ content: url('assets/lever_on.svg'); }

.board{
  position: relative; z-index:1;
  max-width: var(--board-max);
  width: calc(100% - 24px);
  margin: 20px auto;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 20px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #f7f9ff 0%, #eef3fb 55%, #e2e9f5 100%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 22px 44px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -12px 24px rgba(20,24,32,.08);
  max-height: 62vh; /* keep room for background photos */
  overflow: auto;   /* board will scroll if too tall */
}
.board::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.06)); }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(var(--pad-size), 1fr)); gap: var(--pad-gap); justify-items:center; }
.pad{ display:flex; flex-direction:column; align-items:center; gap:8px; width:var(--pad-size); }
.label{ width:100%; height:var(--label-h); background:url('assets/label.svg') center/contain no-repeat; display:flex; align-items:center; justify-content:center; color:#1a2230; font-weight:600; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.label.locked{ color:#7a1414; }
.btn{ width:var(--pad-size); height:var(--pad-size); border:none; border-radius:18px; background:url('assets/button_off.svg') center/contain no-repeat; box-shadow:0 14px 28px rgba(0,0,0,.22); cursor:pointer; }
.btn.on, .btn:active{ background-image:url('assets/button_on.svg'); }
.btn.locked{ filter:hue-rotate(-20deg) saturate(1.3) brightness(.9); box-shadow:0 0 0 2px rgba(255,92,92,.6), 0 14px 28px rgba(0,0,0,.22); cursor:not-allowed; }
.btn.unsupported{ filter: grayscale(1) brightness(.75); cursor:not-allowed; }
.tap-gate, .server-warning{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:inherit; }
.tap-gate{ background: rgba(0,0,0,.28); }
.card{ background: rgba(255,255,255,.94); color:#14161c; padding:18px 20px; border-radius:12px; max-width:380px; text-align:center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }