/* Timed placement: one image, a compact rack, and its full-size piece overlay. */
[data-skin] .game-screen{--hud-height:52px;--rack-height:clamp(220px,31dvh,310px);grid-template-columns:minmax(0,1fr);grid-template-rows:var(--hud-height) minmax(0,1fr) var(--rack-height);grid-template-areas:"hud" "board" "rack";gap:0;padding:0}
[data-skin] .piece-rack{display:block;width:100%;max-width:none;padding:0;border-radius:20px 20px 0 0;overflow:hidden}
.rack-contents{height:100%;max-width:720px;margin:auto;display:flex;flex-direction:column;gap:8px;padding:10px 16px max(8px,env(safe-area-inset-bottom));transition:opacity .18s,transform .18s}
.rack-contents[aria-hidden=true]{opacity:.2;transform:translateY(-6px) scale(.99)}
[data-skin] .piece-rack .holding-rack{display:flex;flex-direction:column;flex:none;align-items:center;gap:0}
[data-skin] .piece-rack .overflow-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(60%,390px);gap:12px;padding:0}
[data-skin] .piece-rack .overflow-slot{height:clamp(44px,6dvh,64px);min-height:44px;width:100%;border-radius:10px}
[data-skin] .piece-rack .dealt-rack{display:flex;flex:1;min-height:0}
[data-skin] .piece-rack .rack-heading{display:none}
[data-skin] .piece-rack .columns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:0;overflow:hidden}
[data-skin] .piece-rack .column{display:grid;grid-template-rows:minmax(44px,1.4fr) repeat(2,minmax(16px,1fr));justify-items:center;align-items:stretch;gap:4px}
[data-skin] .piece-rack .piece-tile.front{width:100%;height:auto;min-height:44px;flex:1.5}
[data-skin] .piece-rack .piece-tile.queued{height:auto;min-height:16px;flex:1;width:88%;border-style:solid;border-color:transparent;background:#23364c66;opacity:.65}
.selection-hint{order:2;font-size:10px;color:var(--muted);text-align:center;line-height:16px}
.piece-control-space{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;background:var(--panel)}
.piece-control-space[data-active=false]{pointer-events:none}
[data-skin] #piece-control{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;box-shadow:none;background:transparent;touch-action:manipulation}
[data-skin] #piece-control:active:not(:disabled){transform:none}
#selected-piece{display:block;width:100%;height:100%}
#game-reference{cursor:pointer;touch-action:manipulation}
.placement-caption{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;justify-content:center;align-items:center;gap:18px;pointer-events:none;color:var(--muted);font-size:12px}
.placement-caption strong{font-size:24px;font-variant-numeric:tabular-nums;color:var(--ink);min-width:3ch;text-align:right}
.piece-control-space[data-urgent=true] .placement-caption strong{color:var(--danger)}
[data-skin] .piece-rack>.result{z-index:3;inset:0;margin:0;border:0;border-radius:inherit;background:var(--panel);box-shadow:none;gap:8px}
[data-skin] .piece-rack>.result .start-button{width:min(260px,80%)}
[data-skin] .piece-rack>.result h2{font-size:26px}
[data-skin] .game-hud .round-readout{min-width:0}
[data-skin] .game-hud #progress{white-space:nowrap}
@media(max-width:650px){
  [data-skin] .game-screen{--hud-height:46px;--rack-height:230px}
  .rack-contents{gap:6px;padding:8px 12px max(6px,env(safe-area-inset-bottom))}
  [data-skin] .piece-rack .columns{gap:7px}
  .placement-caption{font-size:10px;gap:10px}
  [data-skin] .game-hud #progress{display:block;font-size:10px}
  [data-skin] .game-hud .round-readout{gap:8px}
  .selection-hint{font-size:9px}
}
@media(orientation:landscape) and (max-height:500px){
  [data-skin] .game-screen{--hud-height:42px;grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);grid-template-rows:42px minmax(0,1fr);grid-template-areas:"hud hud" "board rack"}
  [data-skin] .piece-rack{border-radius:18px 0 0 0}
  .rack-contents{padding:10px 8px max(6px,env(safe-area-inset-bottom));gap:10px}
  [data-skin] .piece-rack .columns{gap:5px}
  [data-skin] .piece-rack .overflow-slots{width:64%;gap:8px}
  .placement-caption{left:8px;right:8px;gap:8px;font-size:10px}
  .placement-caption span{max-width:190px;text-align:center}
}
@media(max-width:480px){
  [data-skin] .game-hud #progress{display:none}
  [data-skin] .game-hud #score{font-size:22px;min-width:50px}
  [data-skin] .game-hud .round-readout{gap:6px}
}
@media(prefers-reduced-motion:reduce){.rack-contents{transition:none}}

/* Quiet progress during play; a bright, image-first finish. */
.progress-group{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.progress-group #progress{font-size:10px;color:var(--muted)}
.clock-readout{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:42px;font-variant-numeric:tabular-nums}
#puzzle-clock{font-size:15px;font-weight:700;color:var(--ink)}
.clock-readout #score-rate{color:var(--accent);letter-spacing:0;font-size:9px}
.size-progress{display:flex;align-items:center;justify-content:center;gap:6px}
.size-progress i{display:block;width:11px;height:11px;border:1.5px solid var(--line);border-radius:50%;background:transparent;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.size-progress i[data-state=current]{border-color:var(--selection);box-shadow:0 0 0 2px color-mix(in srgb,var(--selection) 15%,transparent)}
.size-progress i[data-state=complete]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}
[data-skin] .piece-rack>.result[data-celebrating=true]{background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 72%),var(--panel);gap:7px}
#result-progress i{width:14px;height:14px}
#result-bonus{font-size:18px;color:var(--accent);font-variant-numeric:tabular-nums}
[data-skin] .piece-rack>.result[data-milestone=true] h2{color:var(--accent);font-size:32px}
#score[data-pulse=true]{color:var(--accent);transform:scale(1.12);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
#score{transition:transform .16s,color .16s,text-shadow .16s}
.round-transition{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--paper) 75%);color:var(--ink);pointer-events:auto}
.round-transition>span{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.round-transition>strong{font-size:clamp(52px,12vmin,110px);font-weight:800;letter-spacing:-.04em}
.round-transition[data-milestone=true]>strong{color:var(--accent)}
.transition-marks{display:flex;gap:10px}
.transition-marks i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
@media(max-width:900px){.progress-group #progress{display:none!important}[data-skin] .game-wordmark{display:none}}
@media(max-width:480px){.size-progress{gap:4px}.size-progress i{width:7px;height:7px}.round-readout>small{display:none}[data-skin] .game-hud .round-readout{gap:4px}[data-skin] .game-hud .quiet-button{padding:6px 4px;min-width:44px;font-size:10px}[data-skin] .game-hud #score{min-width:38px;font-size:20px}.playability{min-width:28px}.clock-readout{min-width:38px}.round-readout .playability small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.size-progress i,#score{transition:none}#score[data-pulse=true]{transform:none}}