/* Pace's intro and paragraph spacing, scoped to the Claw play page. */
.manual {--green:var(--success);--line:var(--border);--space-line-break:19px;--space-10:108px;--game-module-max-width:480px;--status-height:92px}
.manual-page main.manual {padding-top:var(--space-10)}
.wallet-panel {display:grid;grid-template-columns:minmax(0,1fr);align-items:center;row-gap:var(--space-1);text-align:left;font:var(--type-mono-default);min-width:0}
.wallet-actions {display:flex;justify-content:flex-start;gap:var(--btn-gap);flex-wrap:wrap;min-width:0}
#wallet-funds {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-3);align-items:center;min-width:0}
#wallet-funds>span {color:var(--muted)}
#wallet-balance {font:var(--type-mono-default);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.play-overview {display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--space-6)}
.play-overview > * {grid-column:1 / -1;min-width:0}
.play-copy {display:grid;grid-template-columns:subgrid;row-gap:var(--space-6);align-content:start}
.play-copy > * {grid-column:1 / -1;min-width:0}
.play-entry {display:grid;grid-template-columns:subgrid;row-gap:var(--space-4)}
.play-entry > * {grid-column:1 / -1;min-width:0}
.play-summary {display:grid;grid-template-columns:subgrid;align-items:start;align-content:start;row-gap:var(--space-6);margin-top:var(--space-8)}
.play-summary > * {grid-column:1 / -1;min-width:0}
.scoreboard {
  /* All game metrics share Paradigm's responsive Large serif style. */
  --color-text-muted:var(--muted);
  --stat-icon-size:var(--icon-size-default);
  --stat-number-size:var(--type-heading-size);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto minmax(calc(var(--stat-number-size) * var(--type-heading-line-height)),auto) auto;
  column-gap:var(--grid-gutter);row-gap:var(--space-1);
}
.scoreboard>div {grid-row:1 / span 3;display:grid;grid-template-rows:subgrid;row-gap:var(--space-1);min-width:0}
.scoreboard>div>span {display:flex;align-items:center;gap:var(--space-1);margin-bottom:calc(var(--space-3) - var(--space-1));color:var(--text)}
.scoreboard .type-serif-headline-large {align-self:center;font-size:var(--stat-number-size);white-space:nowrap}
.scoreboard small {color:var(--color-text-muted)}
.scoreboard .prize-stat>span,.scoreboard .prize-stat strong,.scoreboard .prize-stat small {color:var(--color-text-brand-green)}
/* Paradigm Design Library trophy (17361:2412), in its native 16px slot. */
.scoreboard .prize-icon {display:block;flex:none;width:var(--stat-icon-size);height:var(--stat-icon-size);background:var(--color-text-brand-green);mask:url('/puzzles/claw/icon-trophy.svg') center / contain no-repeat}
.manual-layout {
  /* Handheld geometry; colors, type and button states remain shared CTA tokens. */
  --game-shell-padding:24px;
  --game-shell-radius:var(--space-none);
  --game-screen-radius:var(--space-none);
  --game-direction-size:48px;
  --game-pad-size:calc(var(--game-direction-size) * 3);
  --game-action-size:64px;
  --game-action-radius:50%;
  --stroke-medium:1px;--stroke-color:var(--border);
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-4);align-items:start;
  width:100%;max-width:var(--game-module-max-width);justify-self:center;
  border:var(--stroke-medium) solid var(--stroke-color);border-radius:var(--game-shell-radius);background:var(--bg)
}
.camera-column {grid-column:1 / -1;display:grid;row-gap:var(--space-1);padding:var(--game-shell-padding) var(--game-shell-padding) var(--space-none);border-radius:var(--game-shell-radius) var(--game-shell-radius) var(--space-none) var(--space-none);min-width:0}
.live-camera {width:100%;aspect-ratio:8/5;background:#111;border-radius:var(--game-screen-radius);position:relative;overflow:hidden}
.live-camera iframe,.live-camera video {border:0;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.camera-caption {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--status-height);gap:var(--space-1);font:var(--type-mono-default);color:#666}
#camera-message {position:absolute;top:12px;left:12px;right:12px;z-index:1;padding:6px 8px;background:#111c;color:#fff;font:var(--type-mono-small);pointer-events:none}
.camera-live {
  /* Frontiers programming's recording light; keep its size and blink cadence. */
  --camera-live-dot-size:8px;
  --camera-live-dot-radius:50%;
  --camera-live-blink-duration:1.2s;
  position:absolute;bottom:12px;left:12px;z-index:1;padding:4px 7px;background:#111b;color:#fff;font:11px/1.2 var(--mono);pointer-events:none
}
.camera-live-dot {flex:none;width:var(--camera-live-dot-size);height:var(--camera-live-dot-size);border-radius:var(--camera-live-dot-radius);background:var(--color-primary-green-mobile);animation:camera-live-blink var(--camera-live-blink-duration) step-end infinite}
@keyframes camera-live-blink {50% {opacity:0}}
.manual-controls {grid-column:1 / -1;display:grid;gap:var(--space-3);padding:var(--space-none) var(--game-shell-padding) var(--game-shell-padding);font:var(--type-mono-default);min-width:0}
.control-console,.buy-controls {min-width:0}
.control-deck {display:grid;grid-template-columns:var(--game-pad-size) minmax(0,1fr);align-items:center;gap:var(--space-3)}
.primary-controls {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;gap:calc(var(--space-1) * 2);min-width:0}
.primary-controls .game-action:first-child {margin-top:var(--space-3)}
.primary-controls .game-action:last-child {margin-bottom:var(--space-3)}
.buy-controls {width:100%}
.game-status {position:absolute;right:12px;bottom:12px;z-index:1;padding:7px 9px;min-width:80px;background:#111b;color:#fff;pointer-events:none;visibility:hidden}
.is-steering .game-status {visibility:visible}
#status {display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--space-1);width:100%;height:var(--status-height);min-width:0;max-width:100%;align-items:center;color:inherit}
#status:not(:has([data-status-icon]:not([hidden]))) {grid-template-columns:minmax(0,1fr)}
#status:not(:has([data-status-icon]:not([hidden]))) .status-indicator {display:none}
.status-indicator {width:14px;height:18px;display:flex;align-items:center}
.status-indicator>span {display:block;width:14px;height:14px}
.status-indicator svg {display:block;width:14px;height:14px;stroke-width:1.75}
.status-copy {max-height:var(--status-height);min-width:0;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin}
#status-title {font:inherit;margin:var(--space-none)}
#status-detail {font:var(--type-mono-default);color:var(--muted);margin:var(--space-1) 0 0}
#status-detail:empty {margin:0}
#status:is([data-tone="success"],[data-tone="failure"]) {padding:8px 12px;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;border-radius:0;color:#fff}
#status[data-tone="success"] {background:#195b45}
#status[data-tone="failure"] {background:#843b3b}
#status:is([data-tone="success"],[data-tone="failure"]) .status-copy {height:auto;max-height:calc(var(--status-height) - 16px)}
#status:is([data-tone="success"],[data-tone="failure"]) #status-title {font:400 21px/1.1 var(--serif)}
#status:is([data-tone="success"],[data-tone="failure"]) #status-detail {color:inherit;margin-top:3px}
#status:is([data-tone="success"],[data-tone="failure"]) .status-indicator,
#status:is([data-tone="success"],[data-tone="failure"]) .status-indicator>span,
#status:is([data-tone="success"],[data-tone="failure"]) .status-indicator svg {width:22px;height:22px}
#status[data-tone="attention"] {color:var(--attention)}
.is-steering #status[data-tone="active"] {color:var(--green)}
[data-status-icon="busy"] {animation:status-spin 1.2s linear infinite;color:#777}
#status:is([data-tone="success"],[data-tone="failure"]) [data-status-icon="busy"] {color:inherit}
@keyframes status-spin {to {transform:rotate(360deg)}}
#status {position:relative}
.settlement-motion {position:absolute;left:10px;right:10px;bottom:5px;height:2px;background:#ffffff30;overflow:hidden;pointer-events:none}
.settlement-motion>span {display:block;width:30%;height:100%;background:currentColor;transform:translateX(115%)}
#status[data-result-state="pending"] .settlement-motion>span {animation:settlement-pending 1.6s cubic-bezier(.4,0,.2,1) infinite}
#status[data-result-state="pending"] .status-indicator {opacity:0}
#status[data-result-state="complete"] .settlement-motion {opacity:0;animation:settlement-resolved .6s ease-out both}
#status[data-result-state="complete"] .settlement-motion>span {width:100%;transform:none;transform-origin:left;animation:settlement-fill .3s ease-out both}
#status[data-result-state="complete"] .status-indicator svg>* {stroke-dasharray:40;stroke-dashoffset:0;animation:result-mark .4s ease-out both}
@keyframes settlement-pending {from {transform:translateX(-100%)} to {transform:translateX(334%)}}
@keyframes settlement-fill {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@keyframes settlement-resolved {0%,50% {opacity:1} 100% {opacity:0}}
@keyframes result-mark {from {stroke-dashoffset:40} to {stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.settlement-motion,.settlement-motion>span,#status .status-indicator svg>* {animation:none!important}}
.timer {text-align:right;display:flex;flex-direction:column;gap:3px}
#timer {font:var(--font-weight-regular) 24px/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.timer span {font:var(--type-mono-default);color:inherit}
#time-left {display:block;appearance:none;border:0;height:2px;width:100%;margin:6px 0 0;background:#ffffff40;color:#fff}
#time-left::-webkit-progress-bar {background:#ffffff40}
#time-left::-webkit-progress-value {background:currentColor;transition:width .1s linear}
#time-left::-moz-progress-bar {background:currentColor}
body.time-low .game-status {color:#ffd5d5}
.pad {display:grid;grid-template-columns:repeat(3,var(--game-direction-size));grid-template-rows:repeat(3,var(--game-direction-size));gap:var(--space-none);width:var(--game-pad-size)}
.pad::before {content:"";grid-area:2/2;background:var(--subtle);pointer-events:none}
.pad:has(button:not(:disabled))::before {background:var(--btn-surface-high)}
.control-deck [data-action] {touch-action:none;user-select:none;-webkit-user-select:none}
#up {grid-area:1/2;border-radius:var(--radius-small) var(--radius-small) var(--space-none) var(--space-none)}
#left {grid-area:2/1;border-radius:var(--radius-small) var(--space-none) var(--space-none) var(--radius-small)}
#right {grid-area:2/3;border-radius:var(--space-none) var(--radius-small) var(--radius-small) var(--space-none)}
#down {grid-area:3/2;border-radius:var(--space-none) var(--space-none) var(--radius-small) var(--radius-small)}
.game-action.btn--action {flex:none;width:var(--game-action-size);height:var(--game-action-size);border-radius:var(--game-action-radius)}
.play-about {display:grid;grid-template-columns:subgrid}
.play-about>* {grid-column:1 / -1;min-width:0}
.play-introduction {display:grid;grid-template-columns:subgrid;row-gap:var(--space-line-break)}
.play-introduction p {grid-column:1 / -1;font:17px/1.6 var(--serif);margin:var(--space-none)}
.play-introduction a {text-decoration:underline;text-underline-offset:3px}
.play-introduction a[aria-disabled="true"] {color:var(--muted);cursor:default}
.play-copy>.entry-actions {margin:var(--space-none)}
.manual button:focus-visible {outline:2px solid var(--success);outline-offset:4px}
.manual button:disabled {cursor:default}
@media(min-width:600px){
  .manual {--space-line-break:20px;--space-10:140px}
}
/* Keep the complete prize amount inside equal columns in compact layouts. */
@media(max-width:379px){
  .scoreboard {--stat-number-size:var(--font-size-body)}
}
@media(min-width:1024px) and (max-width:1359px){
  .scoreboard {--stat-number-size:var(--type-heading-size-small)}
}
@media(min-width:1024px){
  .manual {--space-10:216px}
  .manual-layout {--game-shell-padding:20px;--status-height:64px;--game-direction-size:44px;row-gap:12px}
  .manual-controls {gap:12px}
  .manual-page main.manual {padding-top:var(--grid-margin);grid-template-rows:min-content 1fr;row-gap:var(--space-8)}
  .play-overview {display:contents}
  .play-copy {grid-column:1 / span 5;grid-row:1;padding-top:calc(var(--space-10) - var(--grid-margin))}
  .play-overview > .manual-layout {grid-column:7 / span 6;grid-row:1 / span 2;align-self:start;justify-self:end}
  .manual > .play-summary {grid-column:1 / span 5;grid-row:2;margin-top:var(--space-none)}
  .play-summary > .model-leaderboard {--leaderboard-columns:5;--leaderboard-rank-column:1 / span 1;--leaderboard-player-column:2 / span 3;--leaderboard-wins-column:5 / span 1}
}
@media(min-width:1024px) and (max-height:800px){
  /* Keep the complete handheld visible in shorter desktop windows. */
  .manual {--game-module-max-width:380px}
  .manual-layout {--game-shell-padding:16px;--game-direction-size:40px;row-gap:8px}
  .manual-controls {gap:8px}
  .camera-column {row-gap:4px}
  .control-deck {gap:12px}
  .primary-controls {gap:8px}
  .primary-controls .game-action {margin:0}
  .wallet-panel {row-gap:4px}
}
@media(min-width:1024px) and (max-height:740px){
  .manual {--game-module-max-width:360px}
}
@media(max-width:1023px){
  .manual-page main.manual {padding-top:var(--grid-margin)}
  .play-overview > .play-copy {grid-row:2}
  .play-overview > .manual-layout {grid-row:1}
  .play-overview > .manual-layout {width:100%;max-width:none;justify-self:stretch}
  .play-summary > .scoreboard {grid-row:1}
}
@media(prefers-reduced-motion:reduce){.manual *,#time-left::-webkit-progress-value {transition:none!important}[data-status-icon="busy"],.camera-live-dot {animation:none}}
@media(max-width:1023px) and (max-height:700px){
  .manual-layout {row-gap:12px}
  .primary-controls .game-action {margin:0}
}
.timer,#time-left {visibility:hidden}
.is-steering .timer,.is-steering #time-left {visibility:visible}