/* Klawbster: Always On. Skin tokens come from 07-agent-identity.md and are scoped to this play card. */
.kb {
  --kb-ink: #14130F; --kb-muted: #413D35; --kb-surface: #EEF6F5; --kb-stage: #DDEFEC; --kb-stage-line: #9CCAC4; --kb-well: #E6F3F1;
  --kb-teal: #2F7C76; --kb-red: #D8382A; --kb-red-deep: #A8261C; --kb-shell: #F7DCD3; --kb-stray: #F2C230; --kb-focus: #0B3FCF;
  --kb-mono: 'Array', ui-monospace, 'SF Mono', Menlo, monospace; --kb-sans: 'Sohne', 'Instrument Sans', system-ui, sans-serif;
  box-sizing: border-box; width: 100%; max-width: 960px; margin: 0 auto; padding: 16px; color: var(--kb-ink); font-family: var(--kb-sans);
  font-size: 16px; line-height: 1.45; background: var(--kb-surface); border: 2px solid var(--kb-ink);
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb [hidden] { display: none !important; }
.kb :focus-visible { outline: 3px solid var(--kb-focus); outline-offset: 2px; }
.kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kb-parody { margin: 0 0 12px; display: inline-block; padding: 3px 10px; border: 1px solid var(--kb-ink); background: #fff; font-family: var(--kb-mono); font-size: 13px; line-height: 1.4; }
.kb-title { margin: 0 0 8px; font-size: clamp(28px, 5vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.kb-lead { margin: 0 0 12px; font-size: 18px; max-width: 60ch; color: var(--kb-muted); }
.kb-how { margin: 0 0 16px; padding-left: 22px; max-width: 60ch; }
.kb-how li { margin: 4px 0; }
.kb-note { margin: 10px 0 0; font-size: 14px; color: var(--kb-muted); max-width: 70ch; }
.kb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.kb-btn { font: 500 16px/1.2 var(--kb-sans); color: var(--kb-ink); background: #fff; border: 2px solid var(--kb-ink); min-height: 48px; min-width: 48px; padding: 10px 18px; cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.kb-btn:hover { background: var(--kb-stage); }
.kb-btn--primary { background: var(--kb-red); color: #fff; }
.kb-btn--primary:hover { background: var(--kb-red-deep); }
.kb-btn[aria-pressed="true"] { background: var(--kb-ink); color: #fff; }
.kb-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.kb-btn:focus-visible { outline: 3px solid var(--kb-focus); outline-offset: 0; clip-path: none; }

.kb-play { display: grid; grid-template-columns: 220px minmax(0, 480px); gap: 16px; justify-content: center; align-items: start; }
.kb-side { background: var(--kb-stage); border: 2px solid var(--kb-stage-line); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kb-mascot { width: 150px; height: 150px; display: block; }
.kb-mascot.is-idle { animation: kb-bob 2.4s steps(2, end) infinite; }
.kb-mascot.is-happy { animation: kb-hop .5s steps(4, end) 2; }
.kb-mascot.is-hit { animation: kb-shake .3s steps(3, end) 2; }
.kb-bubble { position: relative; width: 100%; min-height: 56px; padding: 8px 10px; background: #fff; border: 2px solid var(--kb-red-deep); border-radius: 14px 14px 14px 4px; font-size: 14px; line-height: 1.3; }
.kb-bubble:empty::after { content: '\00a0'; }
.kb-main { min-width: 0; }
.kb-hud { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 8px; font-family: var(--kb-mono); font-size: 14px; }
.kb-hud b { font-weight: 700; }
.kb-shell { display: inline-flex; gap: 3px; vertical-align: middle; }
.kb-cell { width: 18px; height: 16px; background: var(--kb-red); border: 2px solid var(--kb-ink); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
.kb-cell.is-lost { background: transparent; border-style: dashed; border-color: var(--kb-red-deep); }
.kb-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.kb-pip { width: 10px; height: 10px; border: 2px solid var(--kb-ink); background: #fff; }
.kb-pip.is-on { background: var(--kb-ink); }
.kb-incoming { margin: 0 0 4px; font-family: var(--kb-mono); font-size: 12px; color: var(--kb-muted); }
.kb-stage { position: relative; border: 2px solid var(--kb-ink); background: var(--kb-well); touch-action: manipulation; }
.kb-stage:focus-visible { outline: 3px solid var(--kb-focus); outline-offset: 3px; }
.kb-canvas { display: block; width: 100%; height: auto; }
.kb-stage.is-shake { animation: kb-shake .3s steps(3, end) 1; }
.kb-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(238, 246, 245, .9); text-align: center; padding: 16px; }
.kb-overlay h3 { margin: 0; font-size: 24px; }
.kb-pad { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-top: 10px; }
.kb-pad .kb-btn { min-height: 56px; font-size: 18px; padding: 8px 6px; white-space: nowrap; }
.kb-gate { width: 100%; margin-top: 8px; min-height: 52px; }
.kb-gate.is-ready { background: var(--kb-red); color: #fff; }
.kb-keys { margin: 8px 0 0; font-size: 13px; color: var(--kb-muted); }
.kb-over { text-align: left; max-width: 62ch; }
.kb-share { display: block; width: 100%; max-width: 62ch; margin: 8px 0; padding: 8px; font: 14px/1.4 var(--kb-mono); border: 1px solid var(--kb-ink); background: #fff; resize: none; }
.kb-stats { margin: 0 0 8px; font-family: var(--kb-mono); font-size: 14px; }

@keyframes kb-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes kb-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kb-shake { 0% { transform: translateX(0); } 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }
.kb-reduced .kb-mascot, .kb-reduced .kb-stage { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .kb-mascot, .kb-stage { animation: none !important; } }

@media (max-width: 759px) {
  .kb { padding: 12px 16px; }
  .kb-play { grid-template-columns: minmax(0, 1fr); }
  .kb-side { flex-direction: row; padding: 8px; order: -1; }
  .kb-mascot { width: 56px; height: 56px; flex: none; }
  .kb-bubble { border-radius: 14px 14px 14px 4px; }
}
@media (forced-colors: active) { .kb-btn { clip-path: none; border: 2px solid ButtonText; } .kb-cell.is-lost { border-style: dashed; } }

.kb.is-done .kb-pad, .kb.is-done .kb-gate, .kb.is-done .kb-tools, .kb.is-done .kb-keys { display: none; }