.playground { display:grid; grid-template-columns:.85fr 1fr; align-items:center; gap:clamp(40px,8vw,115px); padding-block:80px 100px; border-top:1px solid var(--line); scroll-margin-top:95px; }
.playground-copy { max-width:400px; }
.playground-copy h2 { font-size:clamp(56px,5.5vw,76px); line-height:1.02; letter-spacing:-3.3px; margin:18px 0 25px; }
.playground-description { color:#62666b; font-size:14px; line-height:1.9; margin-bottom:0; }
.puzzle-sketch { width:240px; margin:20px 0 21px -3px; color:#0052ff; position:relative; }
.puzzle-sketch svg { width:220px; display:block; }
.puzzle-sketch span { position:absolute; bottom:-5px; left:71px; font:italic 14px Georgia,serif; transform:rotate(-5deg); }
.game-rules { list-style:none; padding:0; margin:28px 0 24px; display:grid; gap:17px; }
.game-rules li { display:flex; align-items:baseline; gap:15px; color:#565c65; font-size:12px; line-height:1.8; }
.game-rules b { color:#0052ff; font-size:10px; font-weight:500; }
.playground-note { font-size:10px; color:#72767e; line-height:1.9; margin-bottom:24px; }
kbd { font:inherit; font-size:10px; background:#f0f2f5; color:#535b67; border:1px solid #dfe2e7; border-radius:3px; padding:1px 4px; }
.block-game { min-width:0; width:100%; max-width:535px; justify-self:end; border:1px solid #d7dce5; border-radius:9px; background:#fff; padding:23px; box-shadow:8px 8px 0 #f1f3f7; }
.block-topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #e4e6eb; padding-bottom:16px; }
.block-game-name { display:flex; align-items:center; gap:9px; }
.block-game-name h3 { font-size:17px; font-weight:550; letter-spacing:-.55px; margin:0; }
.block-glyph { font-size:23px; color:#0052ff; line-height:1; }
.experiment-label { font-size:7px; letter-spacing:1.1px; color:#6b7482; }
.block-hud { display:grid; grid-template-columns:1fr 1fr 1fr; padding-block:18px 16px; }
.block-hud > div { display:flex; flex-direction:column; gap:4px; }
.block-hud > div:nth-child(2) { text-align:center; }
.block-hud > div:last-child { text-align:right; }
.block-hud span { color:#6b717a; font-size:10px; }
.block-hud b { color:#111; font-weight:500; font-size:29px; letter-spacing:-1px; line-height:1.1; font-variant-numeric:tabular-nums; }
.block-hud > div:first-child b { color:#0052ff; }
.block-board-wrap { position:relative; isolation:isolate; }
.block-board { width:100%; aspect-ratio:1; background:#e9edf5; padding:8px; border:1px solid #dde2ec; border-radius:5px; display:grid; grid-template-rows:repeat(8,1fr); gap:4px; }
.block-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; min-height:0; }
.block-cell { min-width:0; min-height:0; border:1px solid #e1e6ef; background:#f9faff; border-radius:3px; padding:0; position:relative; touch-action:manipulation; }
.block-cell:disabled { cursor:default; }
.block-cell.filled { border:1px solid #0052ff; background:#0052ff; box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #0000000c; }
.block-cell.filled.tone-2 { background:#3475ff; border-color:#3475ff; }
.block-cell.filled.tone-3 { background:#759fff; border-color:#759fff; }
.block-cell.preview { background:#a7c1ff; border:1px dashed #0052ff; box-shadow:inset 0 0 0 2px #ffffff50; }
.block-cell.invalid { background:repeating-linear-gradient(135deg,#c3c8d1,#c3c8d1 2px,#e5e7ec 2px,#e5e7ec 5px); border-color:#747b87; box-shadow:none; }
.block-cell:focus-visible { outline:2px solid #111; outline-offset:1px; z-index:1; }
.block-cover { position:absolute; inset:0; background:#ffffffed; backdrop-filter:blur(4px); border:1px solid #dce1eb; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; z-index:4; }
.block-cover[hidden] { display:none; }
.cover-shape { display:grid; grid-template-columns:repeat(3,16px); grid-template-rows:repeat(2,16px); gap:3px; margin-bottom:23px; transform:rotate(-8deg); }
.cover-shape i { background:#0052ff; border-radius:2px; }
.cover-shape i:first-child { grid-column:2; }
.cover-shape i:nth-child(2) { grid-column:1; grid-row:2; }
.cover-shape i:nth-child(3) { grid-column:2; grid-row:2; }
.cover-shape i:nth-child(4) { grid-column:3; grid-row:2; }
.game-kicker { color:#6b717a; font-size:8px; letter-spacing:1.5px; margin:0 0 10px; }
.block-cover h4 { font-size:36px; font-weight:500; line-height:1.08; letter-spacing:-1.5px; margin:0 0 16px; }
.block-cover > p:not(.game-kicker) { color:#626975; font-size:12px; line-height:1.75; margin:0 0 24px; max-width:285px; }
.block-cover .button { min-width:160px; }
.block-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0 8px; }
.piece-button { border:1px solid #e1e5ed; border-radius:5px; background:#fff; min-width:0; height:112px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:12px; position:relative; touch-action:none; user-select:none; -webkit-user-select:none; padding:8px 5px; }
.piece-button[aria-pressed=true] { background:#f0f4ff; border-color:#0052ff; }
.piece-button:not(:disabled):hover { background:#f0f4ff; }
.piece-button:disabled { cursor:default; border-color:#eef0f4; }
.mini-shape { --unit:17px; display:grid; grid-template-columns:repeat(var(--cols),var(--unit)); grid-template-rows:repeat(var(--rows),var(--unit)); gap:3px; flex-shrink:0; }
.mini-shape i { border-radius:2px; background:#0052ff; box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #00000010; }
.piece-label { color:#5e6776; font-size:9px; line-height:1.4; display:flex; gap:5px; align-items:center; }
.piece-label kbd { border:0; background:transparent; padding:0; color:#0052ff; font-size:8px; }
.piece-used { color:#a1a8b4; font-size:19px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.piece-used small { color:#7a8390; font-size:9px; }
.block-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.block-controls > p { color:#697281; font-size:9px; line-height:1.6; max-width:200px; margin:0; }
.block-controls > div { display:flex; gap:8px; flex-shrink:0; }
.text-button { color:#374050; border:0; background:transparent; min-height:44px; padding:5px 2px; font-size:10px; }
.text-button:hover { color:#0052ff; }
.text-button:disabled { color:#a1a7b2; cursor:default; }
.block-status { font-size:9px; color:#727b88; line-height:1.6; min-height:29px; margin:5px 0 0; padding-top:9px; border-top:1px solid #e5e8ed; }
.block-toast { position:absolute; bottom:12px; left:50%; transform:translate(-50%,5px); background:#111; color:#fff; border-radius:4px; padding:9px 14px; font-size:11px; line-height:1.5; white-space:nowrap; opacity:0; transition:transform .2s,opacity .2s; z-index:3; pointer-events:none; }
.block-toast.visible { opacity:1; transform:translate(-50%,0); }
.block-drag-ghost { position:fixed; z-index:100; pointer-events:none; transform:translate(17px,-100%); opacity:.85; filter:drop-shadow(0 3px 6px #0003); }
.block-drag-ghost .mini-shape { --unit:27px; }
.block-dragging,.block-dragging * { cursor:grabbing!important; }
.game-noscript { font-size:12px; line-height:1.8; color:#111; }
@media(prefers-reduced-motion:no-preference) {
  .just-placed { animation:block-place .22s ease-out; }
  .just-cleared { animation:block-clear .4s ease-out; }
  .nudge { animation:block-nudge .2s ease; }
  @keyframes block-place { 0% { transform:scale(.75); } 70% { transform:scale(1.05); } 100% { transform:scale(1); } }
  @keyframes block-clear { 0% { background:#0052ff; transform:scale(1); } 60% { background:#d6e2ff; transform:scale(.6); } 100% { transform:scale(1); } }
  @keyframes block-nudge { 25% { translate:-3px; } 75% { translate:3px; } }
}
@media(max-width:1100px) { .playground { gap:45px; grid-template-columns:.8fr 1fr; } .block-game { padding:18px; } .experiment-label { font-size:6px; letter-spacing:.7px; } .block-game-name h3 { font-size:15px; } .block-controls { align-items:flex-start; flex-direction:column; gap:2px; } .block-controls > p { max-width:none; margin-top:4px; } .block-controls > div { width:100%; justify-content:space-between; } .text-button { min-height:38px; } }
@media(max-width:800px) { .playground { grid-template-columns:1fr; padding-block:65px 75px; gap:35px; } .playground-copy { max-width:550px; } .playground-copy h2 { font-size:60px; } .playground-copy h2 br { display:none; } .puzzle-sketch { float:right; width:215px; margin-top:-10px; margin-left:20px; } .game-rules { margin-top:23px; } .playground-note { clear:both; } .block-game { max-width:510px; justify-self:center; padding:22px; } .block-controls { flex-direction:row; align-items:center; gap:12px; } .block-controls > p { max-width:200px; } .block-controls > div { width:auto; gap:12px; } .experiment-label { font-size:7px; } }
@media(max-width:520px) { .playground { padding-block:50px 58px; gap:30px; } .playground-copy h2 { font-size:52px; letter-spacing:-2.5px; margin:14px 0 20px; } .playground-description { font-size:13px; } .puzzle-sketch { float:none; width:215px; margin:13px 0 23px; } .game-rules { gap:13px; } .game-rules li { font-size:12px; } .playground-note { font-size:10px; } .block-game { padding:13px; border-radius:7px; box-shadow:5px 5px 0 #f1f3f7; } .block-topbar { padding-bottom:12px; gap:8px; } .block-game-name { gap:6px; } .block-game-name h3 { font-size:15px; } .experiment-label { font-size:6px; letter-spacing:.6px; } .block-hud { padding-block:15px 13px; } .block-hud b { font-size:27px; } .block-board { padding:6px; gap:3px; } .block-row { gap:3px; } .block-cell { border-radius:2px; } .block-cover { padding:19px; } .block-cover h4 { font-size:30px; } .block-cover > p:not(.game-kicker) { font-size:11px; margin-bottom:20px; } .cover-shape { margin-bottom:18px; } .block-tray { gap:7px; margin-top:12px; } .piece-button { height:100px; gap:9px; } .mini-shape { --unit:15px; gap:2px; } .piece-label { font-size:8px; gap:3px; } .block-controls { gap:5px; } .block-controls > p { max-width:155px; font-size:8px; } .block-controls > div { gap:10px; } .text-button { font-size:9px; min-height:44px; } .block-status { font-size:9px; } .block-toast { font-size:10px; padding:8px 10px; } }
@media(max-width:360px) { .experiment-label { display:none; } .block-controls { flex-wrap:wrap; } .block-controls > p { max-width:none; width:100%; } .block-controls > div { width:100%; justify-content:space-between; } .piece-label { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .block-toast { transition:none; } }