:root{--bg:#eaf0fa;--card:#fff;--ink:#0f1b33;--mute:#5d6b85;--line:#cfd9ea;--cell:#f5f2ee;--accent:#0a66c2;--g1:#00e639;--g2:#00bd8c;--tint:rgba(0,201,120,.17);--bad:#e11d48;--dot:#0b0f1a;--dotink:#fff;--wall:#0f1b33;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1120;--card:#121b30;--ink:#e9efff;--mute:#94a3c0;--line:#2a3856;--cell:#1b2742;--accent:#4c9bff;--dot:#f2f6ff;--dotink:#0a1120;--wall:#e9efff;--tint:rgba(0,230,120,.16)}}
:root[data-theme="dark"]{--bg:#0a1120;--card:#121b30;--ink:#e9efff;--mute:#94a3c0;--line:#2a3856;--cell:#1b2742;--accent:#4c9bff;--dot:#f2f6ff;--dotink:#0a1120;--wall:#e9efff;--tint:rgba(0,230,120,.16)}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100dvh;background:radial-gradient(900px 520px at 8% -8%,rgba(0,230,57,.2),transparent 60%),radial-gradient(800px 520px at 100% 0,rgba(10,102,194,.24),transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font:400 16px/1.45 Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;justify-content:center;padding:18px 14px 28px;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.app{width:100%;max-width:540px}
header{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:28px;letter-spacing:-.02em}
.logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--g1),var(--g2));position:relative}
.logo i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--dot)}
.sub{color:var(--mute);margin:4px 0 16px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.seg button{border:0;background:none;padding:9px 4px;border-radius:10px;font-weight:600;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg small{font-weight:400;opacity:.7;margin-left:4px}
.stats{display:flex;gap:10px;margin:14px 0}
.stats div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.stats b{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.stats span{font-size:13px;color:var(--mute)}
.board{border-radius:26px;padding:0;transition:box-shadow .4s}
.board.won{box-shadow:0 0 0 4px var(--g1),0 12px 40px rgba(0,230,57,.35)}
canvas{display:block;width:100%;aspect-ratio:1;touch-action:none;border-radius:26px;cursor:pointer;user-select:none;-webkit-user-select:none}
.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px}
.bar button{padding:10px 4px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:600}
.bar button:hover{border-color:var(--accent)}
.primary{width:100%;padding:14px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:17px;box-shadow:0 6px 18px rgba(10,102,194,.3)}
.primary:hover{filter:brightness(1.08)}
.rules{color:var(--mute);font-size:14px;padding-left:20px;margin:18px 0 0}
.rules li{margin:3px 0}
.modal{position:fixed;inset:0;background:rgba(8,14,28,.55);display:grid;place-items:center;padding:20px;z-index:5}
.modal[hidden]{display:none}
.card{background:var(--card);border-radius:24px;padding:28px 26px;width:100%;max-width:340px;text-align:center;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.card h2{margin:10px 0 2px;font-size:30px;font-weight:800}
.card p{margin:0 0 18px;color:var(--mute)}
.ck{width:64px;height:64px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-size:34px;line-height:64px;font-weight:800}
.ghost{margin-top:8px;background:none;border:0;color:var(--mute);padding:8px}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.stats div,.seg,.bar button,.icon{background:color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hb{display:flex;gap:8px}
.icon{width:44px;height:44px;font-size:18px}
.prog{height:8px;border-radius:9px;background:var(--line);margin:0 2px 12px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--g1),var(--g2));transition:width .15s}
.board{padding:5px;border-radius:32px;background:linear-gradient(145deg,var(--g1),var(--g2) 45%,var(--accent));box-shadow:0 24px 50px -22px rgba(10,60,140,.55);max-width:min(100%,max(280px,calc(100dvh - 360px)));margin:0 auto}
.bar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font-size:13px;border-radius:16px}
.bar b{font-size:20px;line-height:1;font-weight:600}
.seg button{min-height:44px}
.primary{min-height:52px}
.how{margin-top:14px;color:var(--mute)}.how summary{cursor:pointer;font-weight:600;padding:8px 0}
@media (max-width:480px){body{padding:10px 10px 18px}.logo{font-size:24px}.sub{margin:2px 0 10px;font-size:14px}.seg small{display:none}.stats{gap:8px;margin:10px 0}.stats b{font-size:20px}.stats div{padding:6px 10px}.bar{margin:12px 0 8px;gap:6px}}
@media (prefers-reduced-motion:reduce){.card{animation:none}.board{transition:none}}

/* ---- ZipLine v2 additions ---- */
.seg5{grid-template-columns:repeat(5,1fr)}
.seg5 button{padding:9px 2px;font-size:14px}
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 0}
.chips button{min-height:38px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);font-weight:700;color:var(--mute);position:relative}
.chips button[aria-pressed="true"]{background:linear-gradient(135deg,var(--g1),var(--g2));color:#06240f;border-color:transparent}
.chips button.lock{opacity:.55}.chips button .ck2{position:absolute;right:4px;top:1px;font-size:10px}
.hb .chip{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);font-weight:800;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stats.s4 b{font-size:20px}
.hud{display:none;margin:0 0 10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);font-size:14px}
.hud.on{display:block}.hud .row{display:flex;justify-content:space-between;gap:8px;font-weight:700;flex-wrap:wrap}
.hud .pl{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.hud .pl span{padding:3px 10px;border-radius:99px;background:var(--cell);font-size:13px;font-weight:600}
.hud .pl span.done{background:var(--tint);color:var(--ink)}
.hud .pl span.off{opacity:.45;text-decoration:line-through}
.link{background:none;border:0;color:var(--accent);font-weight:700;padding:6px}
.roomcode{font-size:38px;font-weight:800;letter-spacing:.22em;text-align:center;margin:4px 0;padding:10px;border-radius:18px;background:var(--cell);font-variant-numeric:tabular-nums}
.plist{display:grid;gap:6px;margin:8px 0}.plist div{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:14px;background:var(--cell);font-weight:600}
@media (max-width:480px){.hb .chip{height:40px;padding:0 9px;font-size:14px}.icon{width:40px;height:40px}.logo{font-size:21px}}

/* ---- icon tiles ---- */
.hb .icon{display:grid;place-items:center;font-size:0;color:var(--ic,var(--ink));border-color:color-mix(in srgb,var(--ic,var(--line)) 30%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--ic,#888) 18%,var(--card)),color-mix(in srgb,var(--card) 72%,transparent));transition:transform .15s,box-shadow .2s}
.hb .icon .zi{width:22px;height:22px}
.hb .icon:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px var(--ic,#000)}.hb .icon:active{transform:scale(.93)}
#lb{--ic:#f59e0b}#rm{--ic:#3b82f6}#sd{--ic:#10b981}#th{--ic:#8b5cf6}#usr{--ic:#ec4899}
.hb .chip .zi{width:20px;height:20px}
.bar b{display:grid;place-items:center;height:24px}.bar b .zi{width:22px;height:22px}
#undo b{color:#3b82f6}#rst b{color:#10b981}#hint b{color:#f59e0b}#solve b{color:#a855f7}
.bar button:hover b .zi{transform:scale(1.12) rotate(-4deg)}.bar b .zi{transition:transform .18s}
.chips button{display:grid;place-items:center}.chips button .zi{width:15px;height:15px}
.chips button .ck2{display:block}.chips button .ck2 .zi{width:11px;height:11px;color:#00a36a}
.ui-kpis .lbl{font-size:12px}

/* ---- mobile-first polish & installed-app (PWA) layout ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,.chips button,.seg button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));overscroll-behavior-y:contain}
header{flex-wrap:wrap;gap:10px}
.hb .icon[hidden]{display:none}
#inst{--ic:#00b84a;animation:instPulse 2.4s ease-in-out infinite}
@keyframes instPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,200,90,.45)}60%{box-shadow:0 0 0 10px rgba(0,200,90,0)}}
@media (max-width:540px){
  header{align-items:center}
  .hb{width:100%;gap:6px}
  .hb .icon{flex:1 1 0;min-width:0;width:auto;height:46px}
  .hb .chip{flex:1.5 1 0;min-width:0;height:46px;justify-content:center}
  .seg button{min-height:46px}
  .chips button{min-height:44px}
  .bar button{min-height:62px}
  .primary{min-height:54px}
}
@media (max-width:360px){.seg button{font-size:12.5px}.logo{font-size:20px}.stats b{font-size:18px}}
@media (orientation:landscape) and (max-height:520px){.board{max-width:min(100%,calc(100dvh - 120px))}.sub{display:none}}
@media (display-mode:standalone){.how{display:none}}
@media (prefers-reduced-motion:reduce){#inst{animation:none}}