/* Kare Kapmaca (dots and boxes): styles shared by src/kare-kapmaca.html and its language pages */
:root{color-scheme:light;--paper:#F3EEFF;--dot:#DDD3FA;--card:#fff;--ink:#2A2150;--ink-soft:#655A8E;--line:#DCD2F7;--flame:#FF6A3D;--frost:#2E9BE6;--gold:#FFB627;--gold-soft:#FFF1CF;--good:#15A077;--bad:#DD3F57;
  --display:'Baloo 2','M PLUS Rounded 1c',system-ui,sans-serif;--body:'M PLUS Rounded 1c','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif}
html,body{background:var(--paper)}
body{color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:22px 22px}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible,.kk-gap:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#kk{max-width:760px;margin:0 auto;padding:18px 16px 56px}
.kk-hd h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,8vw,52px);line-height:1;margin:10px 0 6px}
.kk-hd p{margin:0 0 14px;max-width:36em}
.kk-back{font-family:var(--display);font-weight:800;color:var(--ink);text-decoration:none;font-size:15px}
.kk-card{background:var(--card);border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:16px 16px 20px}
.kk-card h2{font-family:var(--display);font-size:19px;margin:12px 0 6px}
.kk-card h2:first-child{margin-top:0}
.kk-chips{display:flex;flex-wrap:wrap;gap:8px}
.kk-chips button{font-family:var(--display);font-weight:800;font-size:16px;padding:8px 14px;border-radius:14px;border:2px solid var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink)}
.kk-chips button small{font-weight:700;color:var(--ink-soft)}
.kk-chips button[aria-checked="true"]{background:var(--ink);color:#fff}
.kk-chips button[aria-checked="true"] small{color:#DCD2F7}
.kk-lv{margin-top:8px}
.kk-start{display:block;margin:18px auto 0;font-family:var(--display);font-weight:800;font-size:22px;padding:10px 34px;border-radius:18px;border:2.5px solid var(--ink);background:var(--gold);box-shadow:0 4px 0 var(--ink)}
.kk-start:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.kk-how{margin-top:14px;background:#fff;border:2px dashed var(--line);border-radius:16px;padding:10px 14px}
.kk-how summary{font-family:var(--display);font-weight:800;cursor:pointer}
.kk-how ol{margin:8px 0 0;padding-left:22px}
.kk-score{display:flex;gap:10px}
.kk-pl{flex:1;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:16px;border:2.5px solid var(--line);background:#fff;min-width:0;transition:border-color .2s,background .2s}
.kk-pl.on{border-color:var(--pc);background:var(--ps);box-shadow:0 3px 0 var(--pc)}
.kk-pl img{width:38px;height:43px;flex:none}
.kk-pl b{font-family:var(--display);font-size:17px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kk-n{font-family:var(--display);font-weight:800;font-size:28px;color:var(--pc)}
#kk-status{font-family:var(--display);font-weight:800;text-align:center;min-height:1.5em;margin:10px 0 6px}
.kk-wrap{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:6px}
.kk-board{display:block;width:100%;height:auto;max-height:70vh;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kk-gap{cursor:pointer;outline:none}
.kk-gap:hover .kk-ghost,.kk-gap:focus-visible .kk-ghost{stroke:var(--gold);stroke-dasharray:none;stroke-width:9}
.kk-wait .kk-gap{pointer-events:none}
.kk-new{stroke-dasharray:110;stroke-dashoffset:110;animation:kk-draw .35s ease-out forwards}
@keyframes kk-draw{to{stroke-dashoffset:0}}
.kk-box{animation:kk-pop .35s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes kk-pop{from{transform:scale(.3);opacity:0}}
.kk-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.kk-act .kk-start{margin:0}
.kk-ghostbtn{font-family:var(--display);font-weight:800;font-size:16px;padding:8px 16px;border-radius:14px;border:2px solid var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink)}
.kk-endc{text-align:center}
.kk-endc img{width:120px;height:136px}
.kk-endc h2{font-size:28px;margin:4px 0}
.kk-q{position:fixed;inset:0;z-index:40;background:rgba(42,33,80,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.kk-qc{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);padding:16px;max-width:420px;width:100%;text-align:center}
.kk-qc img{width:64px;height:72px}
.kk-qc small{display:block;font-family:var(--display);font-weight:800;color:var(--ink-soft)}
.kk-qq{font-family:var(--display);font-weight:800;font-size:24px;margin:6px 0 12px}
.kk-ch{display:grid;gap:8px}
.kk-ch button{font-family:var(--display);font-weight:800;font-size:20px;padding:10px;border-radius:14px;border:2px solid var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink)}
.kk-ch button.ok{background:#D9F5EA;border-color:var(--good)}
.kk-ch button.no{background:#FDE2E7;opacity:.6}
.kk-qf{min-height:1.4em;margin:10px 0 0}
.kk-go{margin-left:6px;font-family:var(--display);font-weight:800;padding:4px 14px;border-radius:12px;border:2px solid var(--ink);background:var(--gold)}
@media (prefers-reduced-motion:reduce){.kk-new,.kk-box{animation:none;stroke-dashoffset:0}}
.made-by{text-align:center;margin:36px auto 8px;padding:0 16px;font-size:clamp(10.5px,3.3vw,14px);font-weight:700}
.made-by a{color:#6B6390;text-decoration:none}
.made-by span{display:inline-block;margin-top:4px;text-decoration:underline;text-underline-offset:3px}