/* Claw-only layout. The shared learning shell and all other machines are unchanged. */
#app .playmain>.canvas{height:560px;background:#f5f0e7}
#app .playmain>.canvas>svg{height:100%;width:100%;min-height:0}
#app .claw-results{padding:14px 16px;background:#f6f3fa;border:1px solid #e5dfec;border-radius:14px}
#claw-outcome{font-size:15px;font-weight:600;color:#262e5c;margin:0 0 10px}
#claw-tape{display:flex;gap:3px;align-items:end;min-height:28px;flex-wrap:nowrap}
#claw-tape i{display:block;flex:1;max-width:16px;min-width:0;height:10px;border-radius:3px;background:#b5a3d7}
#claw-tape i.win{height:26px;background:#6aab91}
.claw-key{font-size:11px;color:#646278;margin:8px 0 0}.claw-key span{color:#376d57}
.claw-view-note{display:flex;flex-wrap:wrap;gap:5px 14px;justify-content:space-between;margin:0;font:500 11px/1.5 var(--as-font);color:#686477}
.claw-view-note a{color:#554476;text-underline-offset:3px}
.claw-views{position:absolute;z-index:3;left:10px;top:10px;display:flex;gap:5px}
.claw-views button{border:1px solid #ddd5e8;border-radius:8px;min-height:36px;padding:7px 10px;background:rgba(255,255,255,.94);color:#262e5c;font:600 11px var(--as-font);cursor:pointer}
.claw-views button[aria-pressed=true]{background:#ded3ef;border-color:#ab99c6}
.claw-views button:focus-visible{outline:3px solid var(--as-focus);outline-offset:2px}
#app .s3-hint{text-transform:none;letter-spacing:0;font-size:11px;max-width:calc(100% - 24px);line-height:1.4}
#app .s3-host canvas{touch-action:pan-y}
#app .s3-host:has(canvas:focus-visible) .s3-hint{opacity:1}
@media(max-width:600px){#app .playmain>.canvas{height:440px}#app .claw-results{padding:12px}#claw-tape{gap:2px}.claw-views{left:8px;top:8px}.claw-views button{min-height:40px;font-size:10px;padding:6px 8px}#app .s3-hint{left:8px;bottom:8px;margin:0}}
@media(prefers-reduced-motion:reduce){#app .s3-hint{transition:none}}

@media(min-width:1001px){#app .play{grid-template-columns:minmax(0,1fr) 320px}}
#app .rail .claw-graph{margin-top:4px;background:#faf8fc;box-shadow:none}
#app .rail .claw-graph svg{width:100%;height:auto}
#app .rail .al-slot{margin-top:auto;align-self:end}
#app .rail .al-dog{width:100px}
@media(max-width:1000px){#app .rail{display:grid;grid-template-columns:1fr;gap:12px}#app .rail .claw-graph{width:100%;max-width:520px}#app .rail .al-slot{display:none}}

.claw-run{position:absolute;right:12px;bottom:40px;z-index:3;min-height:44px;border:1px solid #292e55;border-radius:12px;background:#292e55;color:white;padding:10px 16px;font:600 13px var(--as-font);cursor:pointer;box-shadow:0 3px 12px #292e5526}
.claw-run:disabled{background:#77738b;border-color:#77738b;cursor:wait}.claw-run:focus-visible{outline:3px solid var(--as-focus);outline-offset:3px}