/* Playground categories stay readable and selectable at phone text sizes. */
#dlg-lab h2 {
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  font-size:min(2.2rem,44px);
  min-width:0;
}
#dlg-lab h2>span {min-width:0;overflow-wrap:anywhere}
#dlg-lab h2 .icon-btn {flex:none;width:44px;min-width:44px;height:44px;min-height:44px}
#dlg-lab .lab-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:20px 0 12px;
}
#dlg-lab .lab-tabs .btn {
  min-width:0;
  min-height:52px;
  height:auto;
  padding:10px 12px;
  font:600 1rem/1.3 var(--font-ui);
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--craft-border);
}
#dlg-lab .lab-tabs .btn[aria-pressed="true"] {
  color:var(--btn-text);
  background:var(--btn);
  border-color:var(--btn);
}
#dlg-lab .lab-tabs .btn:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:3px;
}
html.enlarged-text #dlg-lab .lab-tabs {grid-template-columns:minmax(0,1fr)}

/* A perfect shot keeps its identity; the crown sits above the card edge. */
:root {
  --perfect-metal:linear-gradient(125deg,#ad7926 0%,#eac771 17%,#fff1bd 32%,#d2a342 53%,#f5da90 72%,#b8862f 100%);
  --perfect-metal-edge:#9c742b;
}
.perfect-crown {
  position:absolute;top:-18px;right:8px;z-index:2;
  display:block;width:30px;height:28px;transform:rotate(13deg);
  color:#805a13;pointer-events:none;
  filter:drop-shadow(0 1px 0 #fff2c9) drop-shadow(0 2px 2px #37230444);
}
.perfect-crown svg {width:100%;height:100%;fill:#e4bd56;stroke:#765414;stroke-width:1.5}
.results>.tiles {padding-top:18px;row-gap:24px}
.results>.tiles .tile.is-perfect {
  position:relative;overflow:visible;
  background:var(--perfect-metal)!important;border:1px solid var(--perfect-metal-edge);
  box-shadow:inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531755,0 3px 9px #402d1722;
  color:#241a08;
}
.results>.tiles .tile.is-perfect .em {color:#3d2b0c}
html.enlarged-text .results>.tiles {row-gap:24px}
.score-chip.is-perfect,.perfect-score-panel {
  position:relative;border:1px solid var(--perfect-metal-edge);border-radius:10px;
  background:var(--perfect-metal);padding:12px;color:#241a08;
  box-shadow:inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531744;
}
.perfect-score-panel [data-testid=score],
.perfect-score-panel [data-testid=verdict] p {color:#241a08}
.score-chip.is-perfect .score-line {border:0;padding-left:0}
.score-chip.is-perfect .n,.score-chip.is-perfect .d,.score-chip.is-perfect .d>span {color:#241a08}
.score-chip.is-perfect .shot-legend {color:#241a08}
.score-chip.is-perfect .shot-legend>span::before {filter:drop-shadow(0 1px 0 #241a08) drop-shadow(0 -1px 0 #241a08)}
.perfect-confetti {position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;contain:strict}
.perfect-confetti i {
  position:absolute;left:var(--origin-x);top:var(--origin-y);width:5px;height:8px;
  background:var(--confetti-color);border-radius:1px;opacity:0;
  animation:perfect-confetti 900ms var(--delay) ease-out both;
}
@keyframes perfect-confetti {
  0% {opacity:0;transform:translate(0,0) rotate(0deg) scale(.6)}
  12% {opacity:1}
  58% {opacity:.95;transform:translate(calc(var(--dx)*.65),var(--lift)) rotate(calc(var(--turn)*.6))}
  100% {opacity:0;transform:translate(var(--dx),24px) rotate(var(--turn)) scale(.75)}
}
@media(prefers-reduced-motion:reduce) {.perfect-confetti {display:none}}

/* The field has one geometry for input and reveal. Leave room for the score
   before play starts, so committing a stroke never moves or resizes it. */
body:is([data-phase="play"],[data-phase="reveal"]) #app {
  --shot-width:min(100%,max(180px,calc(100svh - 370px - var(--safe-area-inset-top,env(safe-area-inset-top)) - var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))));
  height:auto;gap:12px;
  padding-bottom:max(14px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)));
}
body:is([data-phase="play"],[data-phase="reveal"]) #play {display:flex;flex-direction:column;gap:12px;flex:none}
body[data-phase="play"]:has(.estimate-field) #play {gap:12px}
body:is([data-phase="play"],[data-phase="reveal"]) .instr {
  display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:10px;flex:none;
}
body:is([data-phase="play"],[data-phase="reveal"]) .instr>span:not([class]) {display:block;font-size:.88rem;line-height:1.35}
body:is([data-phase="play"],[data-phase="reveal"]) .instr>.shot-help {flex:none;min-width:44px;min-height:44px;margin-left:0}
body:is([data-phase="play"],[data-phase="reveal"]) .instr>.shot-help::before,
body:is([data-phase="play"],[data-phase="reveal"]) .instr>.shot-help::after {display:none}
body[data-phase="reveal"] .instr .limit {display:block}
body:is([data-phase="play"],[data-phase="reveal"]) .stage {
  width:var(--shot-width);max-width:none;min-width:0;margin:0;flex:none;
  border:1.5px solid var(--line);border-radius:10px;
}
body:is([data-phase="play"],[data-phase="reveal"]) .dock {
  width:var(--shot-width);align-self:center;min-height:0;flex:none;margin:0;padding:0;
}
body[data-phase="play"] .dock:not(:has(#controls>*)):not(:has(#hint:not([hidden]))) {display:none}
body:is([data-phase="play"],[data-phase="reveal"]) #controls {gap:12px;min-height:0;flex:none;padding:0}
body[data-phase="play"] #controls:has(.estimate-field) {display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
body[data-phase="play"] #controls>.estimate-field {flex:none}
body:is([data-phase="play"],[data-phase="reveal"]) #controls>.btn.primary {
  position:static;margin:0;min-height:56px;width:100%;max-width:none;flex:none;
}
body[data-phase="reveal"] #controls>.score-chip {gap:8px;padding-block:0}
body[data-phase="reveal"] #controls>.score-chip.is-perfect {padding:10px}
body[data-phase="reveal"] .score-chip .n {font-size:4rem}
body[data-phase="reveal"] .score-chip .d b {font-size:1.05rem}
body[data-phase="reveal"] .score-chip .d span {font-size:.82rem}
body:is([data-phase="play"],[data-phase="reveal"]) .timebar {height:5px;background:var(--chip)}
body:is([data-phase="play"],[data-phase="reveal"]) .timebar i {background:var(--pencil)}
body[data-phase="play"] .stage-ui>:is(.btn,.tap-prompt) {border-radius:12px;min-height:56px;padding:14px 24px;font-weight:600;background:var(--btn);border-color:var(--btn);color:var(--btn-text);box-shadow:inset 0 1px 0 #ffffff20,0 3px 12px #00000014}
body.keyboard-open[data-phase="play"]:has(.estimate-field) .stage {
  max-width:min(100%,max(110px,calc(var(--keyboard-viewport-height,100svh) - 340px - var(--safe-area-inset-top,env(safe-area-inset-top)))));
}
body.keyboard-open[data-phase="play"]:has(.estimate-field) .dock {width:100%}
body[data-phase="play"] #controls>.btn:disabled {
  opacity:1;background:var(--chip);background:color-mix(in srgb,var(--ink-2) 18%,var(--paper) 82%);color:var(--ink-2);
  border:1px solid var(--craft-border);box-shadow:inset 0 1px 0 #ffffff20;
}
@media(max-width:350px) {
  body[data-phase="reveal"] .score-line {gap:10px}
  body[data-phase="reveal"] .score-chip .n {font-size:3rem}
  body[data-phase="reveal"] .score-chip .d b {font-size:.94rem}
  body[data-phase="reveal"] .score-chip .d span {font-size:.76rem}
}
.home-secondary .text-button {min-width:44px}
.home-promise {font-size:max(.66rem,11px)}
.group-score-key {font-size:.76rem;line-height:1.5;color:var(--ink-2);margin:0 0 12px}
.you-tools .personal-playground {width:100%;justify-content:flex-start;gap:12px}
.you-tools .personal-playground>span {text-align:left}
.you-tools .personal-playground small {display:block;font-size:.76rem;font-weight:400;color:var(--ink-2)}
.you-tools .personal-playground>.ui-icon:last-child {margin-left:auto}

/* During a shot, web uses the compact game header and keeps the field clear. */
body:not(.native-app):is([data-phase="play"],[data-phase="reveal"]) .web-header {display:none}
body:not(.native-app):is([data-phase="play"],[data-phase="reveal"]) .app-header {display:flex}
body:not(.native-app):is([data-phase="play"],[data-phase="reveal"]) #app {padding-top:16px;min-height:100svh}
.shot-feedback.sr-only {width:1px;height:1px;padding:0;border:0;clip-path:inset(50%)}