/* Drips: a Lemmings-style plumbing game by The Kitchen Sink. */
  :root{
    --bg:#071018; --panel:#0f1f2b; --panel2:#142a3a; --line:#22465e;
    --ink:#e3f4ff; --dim:#7fa3ba; --accent:#4aa8ff; --accent2:#9be7ff;
    --good:#5fe08a; --bad:#ff6b5a; --warn:#ffc04a;
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:radial-gradient(1200px 600px at 50% -10%, #12324a 0%, var(--bg) 60%);color:var(--ink);font-family:var(--mono);min-height:100%;}
  body{display:flex;justify-content:center;padding:14px 10px 24px;}
  #app{width:100%;max-width:1180px;}
  header{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.18em;font-size:20px;color:var(--accent2);text-shadow:0 2px 0 #0a2a44}
  .brand svg{width:22px;height:22px}
  #lvlName{color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  #stats{margin-left:auto;display:flex;gap:14px;font-size:13px;letter-spacing:.06em;flex-wrap:wrap}
  #stats b{color:var(--ink)}
  #stats span{color:var(--dim)}
  #stats .ok b{color:var(--good)} #stats .low b{color:var(--bad)}
  #stage{position:relative;width:100%;aspect-ratio:2/1;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#05090d;box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03)}
  canvas#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;touch-action:none}
  #hoverInfo{position:absolute;left:10px;top:8px;font-size:12px;letter-spacing:.1em;color:#fff;background:rgba(5,15,22,.7);border:1px solid rgba(155,231,255,.25);padding:3px 8px;border-radius:6px;pointer-events:none;display:none}
  #pauseBadge{position:absolute;right:10px;top:8px;font-size:12px;letter-spacing:.2em;color:var(--warn);background:rgba(5,15,22,.75);border:1px solid rgba(255,192,74,.4);padding:3px 8px;border-radius:6px;pointer-events:none;display:none}
  #toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:13px;color:#fff;background:rgba(10,30,45,.88);border:1px solid var(--line);padding:6px 12px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .3s;max-width:80%;text-align:center}
  #overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,10,16,.72);backdrop-filter:blur(2px);overflow:auto;padding:16px}
  #overlay.hidden{display:none}
  .card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line);border-radius:14px;padding:22px 26px;max-width:640px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
  .card h1{margin:0 0 4px;font-size:clamp(34px,7vw,64px);letter-spacing:.22em;color:var(--accent2);text-shadow:0 4px 0 #0a2a44, 0 0 30px rgba(74,168,255,.35)}
  .card h2{margin:0 0 6px;font-size:22px;letter-spacing:.1em;color:var(--accent2)}
  .card .sub{color:var(--dim);font-size:13px;letter-spacing:.06em;margin:0 0 14px}
  .card p{font-size:13.5px;line-height:1.55;color:#cfe6f5;margin:8px 0}
  .btn{font-family:var(--mono);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:#04121c;background:linear-gradient(180deg,#8fdcff,#3d9be8);border:0;border-radius:10px;padding:11px 22px;cursor:pointer;box-shadow:0 4px 0 #1b5d94, 0 8px 20px rgba(61,155,232,.25);margin:6px}
  .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1b5d94}
  .btn.ghost{background:transparent;color:var(--accent2);box-shadow:inset 0 0 0 2px var(--line)}
  .btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--accent)}
  .levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 6px}
  .lv{position:relative;background:#0b1822;border:2px solid var(--line);border-radius:10px;padding:10px 4px 8px;cursor:pointer;color:var(--ink);font-family:var(--mono);text-align:center;transition:border-color .15s, transform .1s}
  .lv:hover{border-color:var(--accent);transform:translateY(-1px)}
  .lv .n{font-size:20px;font-weight:900;color:var(--accent2)}
  .lv .t{font-size:10px;letter-spacing:.04em;color:var(--dim);margin-top:2px;min-height:24px;line-height:1.2}
  .lv .b{font-size:11px;margin-top:3px;color:var(--good)}
  .lv.locked{opacity:.38;cursor:not-allowed}
  .lv.locked:hover{transform:none;border-color:var(--line)}
  .facts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0}
  .fact{background:#0b1822;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--dim)}
  .fact b{color:var(--ink);font-size:14px;display:block}
  .skillrow{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:8px 0}
  .chip{display:flex;align-items:center;gap:5px;background:#0b1822;border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 4px;font-size:12px}
  .chip svg{width:20px;height:20px}
  .chip.zero{opacity:.3}
  .hint{background:rgba(255,192,74,.08);border:1px dashed rgba(255,192,74,.45);border-radius:10px;padding:9px 12px;color:#ffe2a8 !important;font-size:13px}
  .big{font-size:44px;font-weight:900;letter-spacing:.06em;margin:4px 0}
  .pass{color:var(--good)} .fail{color:var(--bad)}
  .small{font-size:11px;color:var(--dim);letter-spacing:.06em}
  .droprow{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin:6px auto 4px;max-width:470px}
  .droprow span{display:inline-block;animation:popin .35s cubic-bezier(.3,1.6,.5,1) both}
  .droprow span:nth-child(odd){transform-origin:bottom}
  @keyframes popin{from{transform:scale(0) translateY(6px);opacity:0}to{transform:none;opacity:1}}
  .card{animation:cardin .28s ease-out both}
  @keyframes cardin{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
  .linkish{background:none;border:0;color:var(--dim);font-family:var(--mono);font-size:11px;text-decoration:underline;cursor:pointer;margin-top:6px}
  .howto{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 4px;text-align:left}
  .howto div{background:#0b1822;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11.5px;color:#bcd8ea;line-height:1.4}
  .howto b{display:block;color:var(--accent2);font-size:12px;margin-bottom:2px;letter-spacing:.06em}

  #hud{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px;align-items:stretch}
  #skills{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .sk{position:relative;background:linear-gradient(180deg,#132a3a,#0d1d29);border:2px solid var(--line);border-radius:10px;padding:6px 2px 5px;cursor:pointer;color:var(--ink);font-family:var(--mono);display:flex;flex-direction:column;align-items:center;gap:2px;user-select:none;-webkit-user-select:none;transition:border-color .12s, transform .08s}
  .sk:hover{border-color:#3a6f92}
  .sk.sel{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(155,231,255,.25), 0 0 18px rgba(74,168,255,.35);background:linear-gradient(180deg,#1b3d55,#11283a)}
  .sk.empty{opacity:.35}
  .sk svg{width:30px;height:30px}
  .sk .nm{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
  .sk.sel .nm{color:var(--accent2)}
  .sk .ct{position:absolute;top:3px;right:6px;font-size:14px;font-weight:900;color:#fff}
  .sk .ky{position:absolute;top:3px;left:6px;font-size:9px;color:#5d849c}
  #controls{display:flex;gap:6px;align-items:stretch}
  .ctl{background:linear-gradient(180deg,#132a3a,#0d1d29);border:2px solid var(--line);border-radius:10px;color:var(--ink);font-family:var(--mono);cursor:pointer;min-width:46px;padding:4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;user-select:none;-webkit-user-select:none}
  .ctl:hover{border-color:#3a6f92}
  .ctl.on{border-color:var(--warn);color:var(--warn)}
  .ctl.danger.armed{border-color:var(--bad);color:var(--bad);animation:pulse .5s infinite alternate}
  @keyframes pulse{from{box-shadow:0 0 0 rgba(255,107,90,0)}to{box-shadow:0 0 16px rgba(255,107,90,.6)}}
  .ctl .ic{font-size:17px;line-height:1}
  .rate{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1822;border:2px solid var(--line);border-radius:10px;padding:2px 6px;min-width:84px}
  .rate .rv{font-size:18px;font-weight:900}
  .rate .rl{font-size:9px;color:var(--dim);letter-spacing:.1em}
  .rate .rb{display:flex;gap:4px;margin-top:2px}
  .rate button{width:28px;height:22px;border-radius:6px;border:1px solid var(--line);background:#132a3a;color:var(--ink);font-family:var(--mono);font-weight:900;cursor:pointer}
  #mini{display:block;border:2px solid var(--line);border-radius:8px;background:#05090d;cursor:pointer;width:192px;touch-action:none}
  .foot{margin-top:10px;font-size:11px;color:#55788f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  kbd{font-family:var(--mono);background:#0f2230;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:#9cc4dc;font-size:10px}
  @media (max-width:820px){
    #hud{grid-template-columns:1fr}
    #controls{flex-wrap:wrap;justify-content:center}
    #mini{width:150px}
    .howto{grid-template-columns:repeat(2,1fr)}
    .levels{grid-template-columns:repeat(5,1fr)}
    .sk svg{width:24px;height:24px}
    .sk .nm{font-size:8.5px}
    #stats{gap:10px;font-size:12px}
  }
  @media (max-width:520px){
    #skills{grid-template-columns:repeat(4,1fr)}
    .levels{grid-template-columns:repeat(3,1fr)}
    .card{padding:16px}
  }

  /* ---------- site shell ---------- */
  .topbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.06em;margin:0 0 8px}
  .topbar a{color:var(--dim);text-decoration:none}
  .topbar a:hover{color:var(--ink)}
  .foot a{color:#7fa3ba;text-decoration:none}
  .foot a:hover{color:var(--ink)}
  body.embedded{padding:10px 8px 6px;background:var(--bg)}
  body.embedded .topbar{display:none}
  html:has(body.embedded), body.embedded{min-height:0;height:auto}

  /* ---------- small screens ---------- */
  .rotate-tip{display:none}
  @media (max-width:640px){
    #overlay{position:fixed;inset:0;z-index:50;padding:10px;align-items:center}
    .card{padding:12px 14px;border-radius:10px}
    .card h1{font-size:30px;letter-spacing:.16em}
    .card h2{font-size:16px}
    .card p{font-size:12px;margin:5px 0;line-height:1.45}
    .card .sub{margin-bottom:6px;font-size:11px}
    .howto{display:none}
    .facts{margin:6px 0;gap:4px}.fact{padding:3px 7px;font-size:10px}.fact b{font-size:12px}
    .skillrow{gap:4px;margin:4px 0}.chip{font-size:10px;padding:2px 7px 2px 3px}.chip svg{width:15px;height:15px}
    .btn{padding:8px 14px;font-size:12px;margin:4px}
    .big{font-size:30px}
    .lv{padding:6px 2px 5px}.lv .n{font-size:16px}.lv .t{font-size:9px;min-height:20px}
    #preview{display:none !important}
    #parade{max-width:300px !important}
  }
  @media (max-width:640px) and (orientation:portrait){ .rotate-tip{display:block;font-size:11px;color:#ffe2a8;margin:6px 0 0} }

  /* ---------- studio profile strip ---------- */
  .acct{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 0 0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#0b1822;font-size:12px;color:var(--dim);text-align:left}
  .acct b{color:var(--ink)}
  .acct a{color:var(--accent2)}
  .acct .linkish{margin:0;font-size:12px;color:var(--accent2)}
  .acct-form{display:block}
  .acct-form label{display:block;margin-bottom:7px;line-height:1.4}
  .acct-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .acct-row input{flex:1;min-width:150px;font-family:var(--mono);font-size:14px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#06111a;color:var(--ink)}
  .acct-row input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .acct-row .btn{margin:0;padding:8px 14px;font-size:12px}
  .acct-err{color:var(--bad);margin-top:6px}
  .recovery{font-size:20px;font-weight:900;letter-spacing:.08em;color:var(--warn);background:#0b1822;border:1px dashed rgba(255,192,74,.5);border-radius:10px;padding:12px;margin:12px 0;user-select:all;-webkit-user-select:all;word-break:break-all}