:root{
  --bg:#8ee1ff; --cookie:#d9a667; --chip:#b67d3e; --text:#0b2a5a;
  --bubble:rgba(255,255,255,.7); --stroke:#cbd5e1;
  --barFill:#0ea5e9;
  --barWidth: 360px;
}

/* Page layout */
html,body{
  height:100%; margin:0; background:var(--bg);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  display:grid; place-items:center;
}
.wrap{display:grid;gap:18px;place-items:center;width:min(760px,96vw)}
.hud{display:flex;gap:12px;justify-content:center;align-items:center;color:var(--text)}
.badge{background:var(--bubble);padding:8px 12px;border-radius:999px;font-weight:800}

/* Cookie */
.cookie{width:340px;height:340px;cursor:pointer;user-select:none}
svg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.18))}

/* Controls */
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.controls input,.controls button{
  padding:8px 12px;border-radius:10px;border:1px solid var(--stroke);font-weight:700;background:#fff;cursor:pointer
}
.controls input{min-width:120px}

/* Bottom-left cluster */
.levelCorner{
  position:fixed; left:16px; bottom:16px; z-index:10;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}

/* Row: [bar + button] | [EXP bubble] */
.progressRow{
  display:grid;
  grid-template-columns: var(--barWidth) auto;
  align-items:center; gap:8px;
}

/* Bar + centered button (to bar only) */
.barWrap{ position: relative; width: var(--barWidth); }
.claimBtn{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  padding:8px 14px; border-radius:999px; background:var(--bubble);
  border:1px solid var(--stroke); font-weight:900; color:var(--text);
  text-transform:uppercase; letter-spacing:.25px; opacity:.5; filter:saturate(.6);
  cursor:not-allowed; user-select:none; transition:opacity .15s ease, filter .15s ease, transform .05s ease;
}
.claimBtn.enabled{ opacity:1; filter:none; cursor:pointer }
.claimBtn.enabled:active{ transform:translateX(-50%) translateY(1px) }

/* Bar */
.progressBox{
  box-sizing:border-box; width:var(--barWidth);
  background:var(--bubble); border:1px solid var(--stroke);
  border-radius:999px; padding:10px;
}
.pTrack{
  position:relative; width:100%; height:14px;
  background:var(--bubble); border-radius:999px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.pFill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--barFill); transition:width .2s ease; }

/* EXP bubble */
.pText{
  background:var(--bubble); border:1px solid var(--stroke);
  border-radius:999px; padding:6px 10px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center;
  min-width:110px;
}

/* --- Login panel (adds right-side sign-in box) --- */
.login-panel { position: sticky; top: 1rem; float: right; width: 320px; max-width: 100%; margin: 1rem 0 1rem 1rem; z-index: 10; }
.login-card  { background:#fff; border:1px solid #e5e5e1; border-radius:12px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); color:var(--text); }
.login-card h3{ margin:.2rem 0 1rem; font-size:1.1rem; }
.login-card form label{ display:block; margin:.5rem 0 .25rem; font-weight:600; }
.login-card input{ width:100%; padding:.55rem .7rem; border:1px solid #cbd5e1; border-radius:8px; }
.login-card button{ display:inline-block; margin-top:.6rem; padding:.55rem .9rem; border:0; border-radius:8px; background:#222; color:#fff; cursor:pointer; }
.login-card .hidden{ display:none; }
.login-status{ margin-top:.5rem; font-size:.9rem; color:#b1152d; min-height:1.25rem; }
@media (max-width: 900px){ .login-panel{ float:none; width:auto; } }

/* --- Move login panel to bottom-right (opposite Level Up) --- */
.login-panel {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom)); /* iOS safe area friendly */
  width: 320px;
  max-width: calc(100vw - 2rem);
  z-index: 50;
  float: none;       /* override earlier rule */
  top: auto;         /* override earlier rule */
  margin: 0;         /* override earlier rule */
}

/* On narrow screens, drop into normal flow so it doesn't cover the cookie */
@media (max-width: 900px) {
  .login-panel {
    position: static;
    width: auto;
    max-width: 100%;
    margin: 1rem;
  }
}

/* Slim the login panel so it doesn't overlap other UI */
.login-panel{
  width: clamp(220px, 24vw, 280px);   /* smaller, responsive */
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* Keep the card compact */
.login-card{ padding: 12px 14px; }

/* Make sure inputs never overflow the card */
.login-card input{
  width: 100%;
  box-sizing: border-box;
}