:root{
  --paper:#FDFBF5;
  --grid:#E4ECF5;
  --ink:#27405A;
  --muted:#6B7F96;
  --p0:#3D8BFD;
  --p1:#FF7A2F;
  --gold:#F5B700;
  --danger:#E5484D;
  --green:#22C55E;
  --font:"Baloo 2", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--paper)}
body{margin:0;color:var(--ink);font:17px/1.3 var(--font);padding-inline:10px;padding-block:8px 10px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.app{max-width:640px;margin-inline:auto;width:100%;min-height:calc(100dvh - 18px);display:grid;grid-template-rows:auto auto auto 1fr;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}

.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.back{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap;opacity:.75}
.back:hover{opacity:1}
.title{margin:0;font-weight:800;font-size:clamp(1.3rem,4.4vw,2rem);white-space:nowrap;line-height:1}
.title span{color:var(--p1)}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:13px;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:22px;height:22px}
button{font:inherit;cursor:pointer}
.btn{border:0;border-radius:12px;background:#fff;color:var(--ink);font-weight:800;padding:9px 18px;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.btn:active{translate:0 3px;box-shadow:0 0 0 rgba(0,0,0,.14)}
.btn.small{padding:7px 14px;font-size:16px}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 4px 0 #15803D}
.btn.light{background:#E8EEF5;color:var(--ink);box-shadow:0 4px 0 #C3CFDC}
.btn.big{font-size:1.2rem;padding:11px 26px;width:100%}
:focus-visible{outline:3px solid var(--p0);outline-offset:3px}

/* skor */
.score{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:6px 12px 6px 6px;border:3px solid transparent;box-shadow:0 3px 0 rgba(0,0,0,.08);min-width:0;transition:border-color .2s,transform .2s}
.pl .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:21px;flex:none}
.pl .nm{font-weight:800;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pl b{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.pl.on{border-color:currentColor;transform:translateY(-2px)}
.pl.p0{color:var(--p0)} .pl.p1{color:var(--p1)}
.pl .nm{color:var(--ink)}
.pl.gain b{animation:gain .6s}
@keyframes gain{40%{scale:1.4}}

/* tahta */
.board-wrap{display:grid;place-items:center;min-height:0;padding-top:clamp(4px,3dvh,28px)}
.board{width:100%;max-width:560px;max-height:calc(100dvh - 210px);aspect-ratio:1;touch-action:manipulation;user-select:none;-webkit-user-select:none;overflow:visible}
.box{transition:fill .3s}
.box.new{animation:boxin .5s}
@keyframes boxin{0%{opacity:0}60%{opacity:1}}
.emo{font-size:46px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ln{pointer-events:none;stroke:#D6DEE8;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 12;transition:stroke .15s}
.ln.on{stroke-dasharray:none;stroke-width:10}
.ln.on.p0{stroke:var(--p0)} .ln.on.p1{stroke:var(--p1)}
.ln.last{animation:last 1s ease-in-out 2}
@keyframes last{50%{stroke-width:15}}
.ln.good{stroke:var(--gold);stroke-dasharray:none;stroke-width:9;animation:glow 1s ease-in-out infinite}
.ln.bad{stroke:var(--danger);stroke-opacity:.45;stroke-dasharray:8 8;stroke-width:6}
@keyframes glow{50%{stroke-opacity:.45}}
.hit{stroke:transparent;stroke-width:46;stroke-linecap:round;cursor:pointer}
.hit:hover + .ln:not(.on){stroke:#9FB0C4;stroke-dasharray:none}
.board.locked .hit{cursor:default}
.dot{fill:var(--ink)}
.hintline{align-self:start;margin:0;text-align:center;color:var(--muted);font-size:15px;font-weight:700;min-height:1.3em}

/* katmanlar */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(39,64,90,.55);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:480px;background:#fff;color:var(--ink);border-radius:22px;padding:20px 22px;display:grid;gap:13px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sheet.center{text-align:center;justify-items:center;max-width:380px}
h2{margin:0;text-align:center;font-weight:800;font-size:2rem;line-height:1.1}
.help{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.help b{color:var(--ink)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:7px;min-width:0}
legend{font-size:14px;font-weight:800;color:var(--muted);margin-bottom:4px;padding:0;display:flex;align-items:center;gap:6px}
legend .dot{width:14px;height:14px;border-radius:50%;display:inline-block}
input[type="text"]{min-width:0;font:700 1.05rem var(--font);color:var(--ink);padding:7px 12px;border-radius:11px;border:3px solid #E2E8F0;background:#F8FAFC}
input[type="text"]:focus{border-color:var(--p0);outline:none}
input[type="text"]:disabled{opacity:.6}
.toggle{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;font-size:15px}
.toggle input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.seg{display:flex;border:3px solid #E2E8F0;border-radius:12px;overflow:hidden}
.seg[hidden]{display:none}
.seg label{position:relative;cursor:pointer;flex:1;min-width:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 6px;font-size:15px;font-weight:700;color:var(--muted);text-align:center}
.seg label + label span{border-left:2px solid #E2E8F0}
.seg input:checked + span{background:var(--ink);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--p0);outline-offset:-3px}
.trophy{font-size:56px;line-height:1}
.end-title{margin:0;font-weight:800;font-size:1.8rem;text-wrap:balance}
.lead{margin:0;color:var(--muted);font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

@media (max-width:640px){
  .back-tx{display:none}
  .back{font-size:22px}
  .seg span{font-size:13.5px}
  .pl{gap:6px;padding-right:9px}
  .pl .av{width:32px;height:32px;font-size:18px}
  .pl .nm{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .ln.good,.ln.last,.box.new,.pl.gain b{animation:none}
}