.knap-head{padding:48px 0 8px;max-width:720px}
.knap-head h1{font-size:clamp(40px,6vw,64px);margin:12px 0 12px}
.knap-head .lead{font-size:19px;color:var(--muted);margin:0;max-width:52ch}
.knap-layout{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:start;padding:32px 0 72px}
.knap-game{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px}
.knap-bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font:13px/1.4 var(--mono);color:var(--muted);margin-bottom:16px}
.knap-bar #kn-label{flex:1 1 100%;font:700 18px/1.3 var(--body);color:var(--text)}
.knap-bar b{color:var(--text);font-weight:700}
.knap-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;aspect-ratio:1;width:100%;padding:10px;border-radius:6px;background:#0d0f13 radial-gradient(circle at 50% 40%,#161a20,#0b0c0f 70%);touch-action:manipulation}
.kn-cell{all:unset;box-sizing:border-box;border-radius:3px;cursor:pointer;position:relative;transition:transform .35s cubic-bezier(.3,.6,.4,1),opacity .35s ease,background-color .2s ease}
.kn-cell.is-empty{background:radial-gradient(circle,#ffffff10 1.5px,transparent 2px);cursor:default}
.kn-cell.is-lost{background:radial-gradient(circle,#ff5a5a40 2px,transparent 2.5px);cursor:default}
.kn-cell.is-stone{background:linear-gradient(145deg,#8f9690,#6b716c);box-shadow:inset 0 2px 0 #ffffff30,inset 0 -3px 0 #00000055}
.kn-cell.is-stone:hover{background:linear-gradient(145deg,#a3aaa4,#7b827c)}
.kn-cell.is-tool{background:linear-gradient(145deg,#5b615d,#3f4441);box-shadow:inset 0 0 0 2px var(--accent),inset 0 2px 0 #ffffff22,inset 0 -3px 0 #00000066;cursor:pointer}
.kn-cell.is-armed{animation:kn-shake .3s ease;box-shadow:inset 0 0 0 2px #ff6b5a,0 0 0 2px #ff6b5a55}
.kn-cell:focus-visible{outline:3px solid #fff;outline-offset:1px;z-index:2}
.kn-cell.is-hit{transform:scale(.4);opacity:0}
.kn-cell.is-falling{transform:translateY(26px) rotate(18deg);opacity:0}
.kn-cell:disabled{cursor:default}
@keyframes kn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.knap-msg{min-height:1.6em;margin:14px 0 4px;color:var(--text);font-size:15px}
.knap-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.kn-btn{font:500 15px/1 var(--body);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer}
.kn-btn:hover,.kn-btn:focus-visible{border-color:var(--accent);color:var(--accent)}
.kn-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.kn-btn.primary:hover,.kn-btn.primary:focus-visible{background:#d4ff52;color:var(--accent-ink)}
.knap-result{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.knap-result h2{font-size:22px;margin:0 0 10px}
.knap-result pre{font:14px/1.5 var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;white-space:pre-wrap;margin:0 0 14px;color:var(--text)}
.knap-result .meta{display:block;margin-top:12px;color:var(--muted);font:13px var(--mono)}
.knap-side h2{font-size:26px;margin:0 0 12px}
.knap-side h2+p{margin-top:0}
.knap-side .legend{list-style:none;padding:0;margin:0 0 22px}
.knap-side .legend li{display:flex;gap:12px;align-items:center;margin-bottom:10px;color:#d6d9d3}
.knap-side .sw{width:22px;height:22px;border-radius:3px;flex:none}
.sw.stone{background:linear-gradient(145deg,#8f9690,#6b716c)}
.sw.tool{background:linear-gradient(145deg,#5b615d,#3f4441);box-shadow:inset 0 0 0 2px var(--accent)}
.knap-dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:24px;max-width:min(92vw,460px)}
.knap-dialog::backdrop{background:#000a}
.knap-dialog h2{font-size:24px;margin:0 0 12px}
.knap-dialog p,.knap-dialog li{color:#d6d9d3}
.knap-dialog ol{padding-left:20px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 18px}
.stat-grid div{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px;text-align:center}
.stat-grid b{display:block;font:800 28px/1.1 var(--display);color:var(--text)}
.stat-grid span{font:12px/1.3 var(--mono);color:var(--muted)}
.play-hub{padding:32px 0 72px}
.play-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit}
.play-card img{display:block;width:100%;height:auto}
.play-card div{padding:28px 28px 28px 0}
.play-card h2{font-size:clamp(28px,3vw,40px);margin:8px 0 12px}
.play-card p{color:var(--muted)}
.play-card:hover h2,.play-card:focus-visible h2{color:var(--accent)}
@media (max-width:900px){.knap-layout{grid-template-columns:minmax(0,1fr);gap:40px}.play-card{grid-template-columns:minmax(0,1fr)}.play-card div{padding:0 22px 24px}}
@media (max-width:480px){.knap-game{padding:12px}.knap-grid{gap:2px;padding:6px}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.kn-cell{transition:none}.kn-cell.is-armed{animation:none}}