
.kg-shell { box-sizing:border-box; min-height:100dvh; padding:20px max(16px,calc((100vw - 1000px)/2)); color:#ecf4fa; background:radial-gradient(ellipse at 50% 0,#25455c,transparent 65%),#091927; font-family:Manrope,Arial,sans-serif; }
.kg-shell * { box-sizing:border-box; }
.kg-shell button { min-height:40px; padding:9px 12px; border:1px solid #88b0cd55; border-radius:8px; background:#173449; color:#edf5fa; cursor:pointer; font:600 13px/1.35 Manrope,Arial,sans-serif; touch-action:manipulation; }
.kg-shell button:hover:not(:disabled) { border-color:#f6c33b; background:#24475d; }
.kg-shell button:focus-visible { outline:2px solid #f6c33b; outline-offset:2px; }
.kg-shell button:disabled { opacity:.4; cursor:default; }
.kg-header { display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:1000px; margin:auto; }
.kg-header h1 { margin:4px 0; font-size:clamp(20px,4vw,32px); line-height:1.25; }
.kg-header small { color:#f6c33b; }
.kg-stats { font-size:12px; color:#bcd2e2; }
.kg-toolbar,.kg-actions,.kg-directions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px 0; }
.kg-instructions { max-width:800px; margin:18px auto 8px; font-size:13px; line-height:1.7; color:#c1d5e2; }
.kg-status { min-height:20px; margin:8px auto 14px; font-size:13px; line-height:1.5; color:#f6c33b; max-width:800px; }
.kg-board { width:min(100%,800px); margin:auto; text-align:center; }
.kg-board h3 { font-size:15px; margin:16px 0 8px; }
.kg-board p { font-size:13px; line-height:1.6; }
.kg-grid { display:grid; gap:4px; max-width:560px; margin:12px auto; }
.kg-grid .kg-cell { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; aspect-ratio:1; padding:4px; border:1px solid #95b6ca40; background:#18364c; color:#f4f8fb; font-size:clamp(14px,4vw,26px); border-radius:6px; }
.kg-grid .kg-small { font-size:clamp(10px,2.8vw,17px); border-radius:3px; }
.kg-grid .kg-empty { background:transparent; border-style:dashed; }
.kg-shell .selected { border-color:#f6c33b!important; outline:2px solid #f6c33b; outline-offset:-2px; background:#53674c; }
.kg-shell .filled { background:#d3a750!important; }
.kg-shell .is-done { background:#277c66!important; }
.kg-shell .is-open { background:#416075!important; }
.kg-shell .fixed { color:#a8bed0; background:#10283b; font-weight:800; }
.kg-shell .wrong { background:#984f60; }
.kg-result { max-width:700px; margin:24px auto; padding:24px; text-align:center; border:1px solid #f6c33b80; border-radius:14px; background:#17394c; }
.kg-result[hidden] { display:none; }
.kg-result h2 { margin:0 0 12px; font-size:24px; color:#f6c33b; }
.kg-result p { font-size:14px; line-height:1.7; }
.kg-directions button { min-width:56px; min-height:48px; font-size:22px; }
.kg-maze-cell { aspect-ratio:1; min-width:0; display:grid; place-items:center; font-size:15px; }
.kg-grid:has(.kg-maze-cell) { gap:0; }
.kg-nuts { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; padding:30px 8px; }
.kg-shell .kg-bolt { position:relative; isolation:isolate; width:48px; height:150px; display:flex; flex-direction:column-reverse; justify-content:flex-start; align-items:center; gap:4px; padding:7px 0; background:transparent; border:0; border-bottom:6px solid #93a8b5; border-radius:4px; }
.kg-bolt::before { content:''; position:absolute; z-index:-1; width:9px; background:repeating-linear-gradient(#93a8b5 0 3px,#506776 3px 6px); top:8px; bottom:0; left:calc(50% - 4px); }
.kg-nut { width:42px; height:25px; border-radius:8px; border:3px solid #ffffff38; box-shadow:inset 0 -5px #0003; }
.kg-pieces { display:flex; gap:16px; justify-content:center; }
.kg-pieces .kg-grid { margin:0; width:68px; gap:3px; }
.kg-piece-cell { display:block; aspect-ratio:1; background:#142d40; border-radius:2px; }
.kg-word { font-size:clamp(20px,6vw,38px); letter-spacing:4px; margin:30px 0; }
.kg-keyboard { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:560px; margin:auto; }
.kg-keyboard button { width:44px; }
.kg-shell input { width:min(220px,100%); min-height:42px; margin:0; border:1px solid #7799b0; border-radius:7px; background:#132e42; color:white; padding:8px 12px; font:600 17px Manrope,sans-serif; }
.kg-word-rows .kg-grid { max-width:330px; }
.kg-found { text-decoration:line-through; color:#62d1ad; }
.kg-person { white-space:pre-line; font-size:11px!important; min-height:95px!important; }
.kg-domino-chain,.kg-hand,.kg-table-cards { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:20px 0; }
.kg-domino-chain span { padding:12px; border-radius:5px; background:#dbe3dc; color:#1c2e3b; font-size:18px; }
.kg-playing-card { padding:14px 8px!important; min-width:45px; border:1px solid #adbdca; border-radius:6px; background:#234055; font-size:17px!important; }
.kg-table-cards { min-height:90px; align-items:center; }
.kg-solitaire { display:grid; gap:6px; align-items:start; padding:12px 0; }
.kg-card-column { min-height:100px; }
.kg-shell .kg-stack-card { width:100%; min-height:33px; padding:6px 1px; display:block; margin-top:-2px; font-size:12px; border-radius:3px; }
.kg-card-slot { font-size:9px!important; width:100%; min-height:65px!important; padding:2px!important; }
.kg-card-slot[hidden] { display:none; }
.kg-die { font-size:42px!important; padding:2px 8px!important; }
.kg-dot,.kg-box { display:grid; place-items:center; min-width:0; aspect-ratio:1; color:#f6c33b; }
.kg-edge { min-height:0!important; padding:0!important; aspect-ratio:1; }
.kg-point { white-space:pre-line; font-size:13px!important; }
.kg-canvas { width:100%; height:auto; max-width:600px; border:1px solid #46657b; border-radius:12px; touch-action:none; display:block; margin:auto; }
@media(max-width:600px) {
 .kg-shell { padding:12px 10px 28px; }
 .kg-header { gap:8px; flex-wrap:wrap; }
 .kg-header button { font-size:11px; padding:8px; }
 .kg-stats { flex-basis:100%; text-align:center; }
 .kg-instructions { font-size:12px; }
 .kg-grid { gap:3px; }
 .kg-shell .kg-playing-card { min-width:38px; font-size:14px!important; }
 .kg-solitaire { gap:3px; }
 .kg-shell .kg-stack-card { font-size:9px; min-height:30px; }
 .kg-shell .kg-bolt { width:42px; height:135px; }
 .kg-nuts { gap:12px; }
 .kg-nut { width:37px; height:22px; }
}
@media(prefers-reduced-motion:reduce) { .kg-shell * { scroll-behavior:auto!important; } }
