/* 3D games: cube nets and block views. */
.cn-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"head view" "grid view" "act view" "msg view" "shelf shelf";gap:12px 18px;align-items:start}
.cn-head{display:grid;gap:8px}.cn-wrap>.cn-head{grid-area:head}.cn-wrap>.cn-view{grid-area:view}.cn-wrap>.cn-stage{grid-area:grid}.cn-wrap>.cn-actions{grid-area:act}.cn-wrap>.cn-msg{grid-area:msg}.cn-wrap>.cn-shelf{grid-area:shelf}
.cn-stage{perspective:800px;padding:14px 6px 22px;border-radius:22px;background:radial-gradient(120% 100% at 50% 0%,#232c6b,#0b1030 75%);display:grid;place-items:center;min-height:240px;overflow:hidden}
.cn-grid{--w:4;--h:3;display:grid;grid-template-columns:repeat(var(--w),minmax(0,54px));gap:5px;transform:rotateX(26deg);transform-style:preserve-3d;width:min(100%,calc(var(--w) * 59px))}
.cn-cell{aspect-ratio:1;border-radius:9px;border:1.5px dashed rgba(160,180,255,.18);background:rgba(255,255,255,.03);color:#fff;font:900 clamp(18px,4vw,26px) var(--sans);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s,background .15s}
.cn-cell:disabled{cursor:default;border-color:transparent;background:none}
.cn-cell.on{border:0;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 75%,#fff),var(--cc));box-shadow:0 7px 0 color-mix(in srgb,var(--cc) 55%,#000),0 14px 22px -10px rgba(0,0,0,.7);text-shadow:0 2px 3px rgba(0,0,0,.35)}
.cn-cell.on:hover{transform:translateY(-3px)}
.cn-cell.good{outline:3px solid #22c55e;outline-offset:2px}.cn-cell.bad{outline:3px solid #ef4444;outline-offset:2px}
.cn-cell:focus-visible{outline:3px solid #ffd43b;outline-offset:2px}
.cn-actions{display:flex;gap:8px;flex-wrap:wrap}
.cn-actions .btn[hidden]{display:none}
.cn-3d{height:380px;border-radius:22px;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#2a2470,#0b0a24 75%);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc,#06b6d4) 55%,transparent),0 30px 60px -36px var(--tc,#06b6d4)}
.cn-cap{margin:6px 0 0;font-size:12.5px;color:var(--mute);text-align:center}
.cn-shelf[hidden]{display:none}
.cn-shelf{padding:14px;border-radius:18px;background:var(--c-soft);border:1.5px solid var(--c)}
.cn-shelf-h{margin:0 0 8px;color:var(--c-ink)}
.cn-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.cn-mini{width:100%;aspect-ratio:1;border-radius:12px;background:#121947;padding:4px}
.cn-mini.got{background:#0e1440;box-shadow:0 0 0 2px #ffd43b inset}
.cn-mini.flash{animation:cn-flash 1s 2}
@keyframes cn-flash{50%{transform:scale(1.12);box-shadow:0 0 18px #ffd43b}}
@media(max-width:820px){.cn-wrap{grid-template-columns:1fr;grid-template-areas:"head" "view" "grid" "act" "msg" "shelf"}.cn-3d{height:280px}.cn-stage{min-height:200px}}

/* block views */
.bv-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.bv-view{position:relative}
.bv-3d{height:400px;border-radius:22px;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#2a2470,#0b0a24 75%);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc,#0ea5e9) 55%,transparent),0 30px 60px -36px var(--tc,#0ea5e9)}
.bv-hud{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.bv-rot{font-size:18px;padding:4px 12px}
.bv-side{display:grid;gap:10px;min-width:0}
.bv-panel{display:grid;gap:12px}
.bv-q{display:grid;gap:10px}
.bv-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bv-opt{position:relative;display:grid;place-items:center;padding:12px;border-radius:16px;border:2px solid var(--line-2);background:#0e1440;cursor:pointer;transition:transform .15s,border-color .15s}
.bv-opt:hover{transform:translateY(-2px);border-color:var(--c)}
.bv-opt small{position:absolute;left:8px;top:6px;font:800 12px var(--sans);color:#9fb0ff}
.bv-opt.good{border-color:#22c55e;box-shadow:0 0 0 3px #bbf7d0}.bv-opt.bad{border-color:#ef4444}.bv-opt.dim{opacity:.45}
.bv-draw{width:100%;max-width:150px;max-height:120px}
.bv-draw rect.on{fill:#38bdf8;stroke:#0b1030;stroke-width:.04}.bv-draw rect.off{fill:rgba(255,255,255,.04);stroke:rgba(160,180,255,.18);stroke-width:.03}
.bv-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bv-plan{position:relative;display:grid;gap:6px;justify-items:center;padding:10px 8px;border-radius:16px;background:#0e1440;color:#dfe6ff;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
.bv-plan b{font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bv-plan.ok{border-color:#22c55e;box-shadow:0 0 18px -4px #22c55e}
.bv-tick{position:absolute;right:8px;top:6px;font-weight:900;color:#22c55e}.bv-plan.ok .bv-tick::after{content:"✓"}
.bv-next{margin-top:4px}
@media(max-width:820px){.bv-wrap{grid-template-columns:1fr}.bv-3d{height:300px}}