/* Jellyblock — bright rental-shop UI */

:root{
  --blue:#1d4e89;
  --blue-dark:#163c69;
  --yellow:#ffc83d;
  --grape:#6c4ea8;
  --paper:#f7f4ec;
  --paper-2:#ffffff;
  --ink:#21262e;
  --ink-soft:#5d6875;
  --line:#dcd6c8;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
}
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
code{ background:#eceadf; padding:1px 5px; border-radius:3px; font-size:0.9em; }

.logo{
  font-family:'Bungee','Space Grotesk',sans-serif;
  letter-spacing:0.5px;
}

#canvas-host{ position:fixed; inset:0; z-index:0; }
canvas{ display:block; }

/* ---------- overlays ---------- */
.overlay{
  position:fixed; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #ffffff, transparent 70%),
    linear-gradient(180deg, #eef2f7, #dfe6ee);
}
.overlay[hidden]{ display:none; }

.card{
  width:100%; max-width:430px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0 0 26px;
  box-shadow:0 24px 50px -22px rgba(29,78,137,0.45);
  max-height:92vh; overflow-y:auto;
}
.card-head{
  background:var(--blue);
  border-radius:13px 13px 0 0;
  padding:22px 26px 18px;
  border-bottom:5px solid var(--yellow);
}
.card-head h1{
  margin:0; font-size:1.85rem; color:var(--yellow);
  font-family:'Bungee','Space Grotesk',sans-serif; letter-spacing:1px;
}
.card-head p{ margin:6px 0 0; color:#cfe0f2; font-size:0.86rem; }
.card-body{ padding:22px 26px 0; }

.sub{ margin:0 0 20px; color:var(--ink-soft); font-size:0.92rem; line-height:1.55; }

.field{ margin-bottom:15px; }
.field label{
  display:block; font-size:0.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.09em;
  color:var(--blue); margin-bottom:6px;
}
.field input{
  width:100%; padding:11px 12px;
  background:#fbfaf6; border:1.5px solid var(--line); border-radius:7px;
  color:var(--ink); font-size:0.95rem; font-family:inherit;
}
.field input:focus{ border-color:var(--blue); background:#fff; }

.method-tabs{ display:flex; gap:6px; margin:16px 0 18px; border-bottom:2px solid var(--line); }
.method-tab{
  flex:1; padding:10px 6px; background:transparent; border:none;
  border-bottom:3px solid transparent; margin-bottom:-2px;
  color:var(--ink-soft); font-size:0.86rem; font-weight:500; cursor:pointer;
}
.method-tab.active{ color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
.method-panel[hidden]{ display:none; }

.qc-copy{ margin:0 0 16px; font-size:0.86rem; color:var(--ink-soft); line-height:1.55; }
.qc-code-wrap{
  margin-top:16px; text-align:center; padding:18px;
  background:#fbfaf6; border:2px dashed var(--line); border-radius:10px;
}
.qc-code{
  font-family:'Bungee',monospace; font-size:2.2rem; letter-spacing:0.18em; color:var(--blue);
}
.qc-status{ margin-top:8px; font-size:0.8rem; color:var(--ink-soft); }

.btn-primary{
  width:100%; padding:13px;
  background:var(--yellow); color:#3a2a06;
  border:none; border-radius:8px;
  font-weight:700; font-size:0.98rem; cursor:pointer;
  box-shadow:0 3px 0 #d9a626;
  transition:transform 0.08s ease, background 0.15s ease;
}
.btn-primary:hover{ background:#ffd464; }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 1px 0 #d9a626; }
.btn-primary:disabled{ opacity:0.5; cursor:default; box-shadow:none; }

.btn-ghost{
  margin-top:12px; width:100%; padding:10px;
  background:transparent; border:1.5px solid var(--line); border-radius:7px;
  color:var(--ink-soft); font-size:0.84rem; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }

.err{
  margin-top:14px; padding:11px 13px;
  background:#fdeceb; border:1.5px solid #f0b9b4; border-radius:7px;
  color:#a33028; font-size:0.85rem; line-height:1.45; display:none;
}
.note{ margin-top:18px; font-size:0.77rem; color:#8b94a0; line-height:1.55; }

/* ---------- entry card ---------- */
.entry-card .card-body{ text-align:center; }
.keys{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin:20px 0; }
.key{
  padding:6px 10px; background:#f1eee5; border:1px solid var(--line);
  border-radius:6px; font-size:0.75rem; color:var(--ink-soft);
}
.key b{ color:var(--ink); font-weight:700; }
.progress-track{ height:6px; background:#e7e3d8; border-radius:3px; overflow:hidden; margin-bottom:16px; }
.progress-fill{ height:100%; width:0%; background:var(--blue); transition:width 0.25s ease; }

/* ---------- aisle list ---------- */
.list-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:11px 13px; margin-bottom:7px;
  background:#fbfaf6; border:1.5px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:0.9rem; cursor:pointer; text-align:left;
}
.list-btn:hover{ border-color:var(--blue); background:#fff; }
.list-btn .count{
  background:var(--blue); color:#fff; font-size:0.72rem; font-weight:600;
  padding:2px 8px; border-radius:999px;
}

/* ---------- in-store HUD ---------- */
#hud{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#hud[hidden]{ display:none; }

#crosshair{ position:absolute; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%,-50%); }
#crosshair::before, #crosshair::after{
  content:""; position:absolute; background:rgba(33,38,46,0.5);
  box-shadow:0 0 0 1px rgba(255,255,255,0.6);
}
#crosshair::before{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
#crosshair::after{ top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }
#crosshair.hot::before, #crosshair.hot::after{ background:var(--blue); }

#hover-label{
  position:absolute; left:50%; top:calc(50% + 28px); transform:translateX(-50%);
  background:rgba(255,255,255,0.94); border:1.5px solid var(--line);
  border-left:4px solid var(--yellow);
  border-radius:6px; padding:6px 12px;
  font-size:0.84rem; font-weight:500; color:var(--ink); white-space:nowrap;
  max-width:70vw; overflow:hidden; text-overflow:ellipsis; display:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}

#section-banner{
  position:absolute; left:50%; top:60px; transform:translateX(-50%);
  font-family:'Bungee','Space Grotesk',sans-serif;
  font-size:1.05rem; color:#fff;
  background:var(--blue); padding:5px 16px; border-radius:999px;
  border:2px solid var(--yellow);
  opacity:0; transition:opacity 0.35s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
}

#hint-bar{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  background:rgba(255,255,255,0.9); border:1px solid var(--line);
  border-radius:999px; padding:7px 16px;
  font-size:0.76rem; color:var(--ink-soft); white-space:nowrap;
}

#topbar{
  position:fixed; top:0; left:0; right:0; z-index:7;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0));
  pointer-events:none;
}
#topbar .brand{
  font-family:'Bungee','Space Grotesk',sans-serif;
  font-size:1rem; color:var(--blue);
}
#topbar .brand span{ color:var(--yellow); -webkit-text-stroke:0.5px var(--blue); }
#topbar .right{ display:flex; gap:8px; pointer-events:auto; }
#topbar button{
  padding:7px 12px; background:#fff; border:1.5px solid var(--line);
  border-radius:6px; color:var(--ink-soft); font-size:0.76rem; cursor:pointer;
}
#topbar button:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- inspect ---------- */
#inspect-ui{
  position:fixed; z-index:8; left:50%; bottom:26px; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:9px;
  pointer-events:auto; width:min(540px, 92vw);
}
#inspect-title{
  font-weight:600; font-size:0.92rem; color:var(--ink);
  background:rgba(255,255,255,0.92); padding:5px 14px; border-radius:999px;
  border:1px solid var(--line);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#inspect-hint{
  font-size:0.75rem; color:var(--ink-soft);
  background:rgba(255,255,255,0.8); padding:3px 10px; border-radius:999px;
}
#inspect-ui .row{ display:flex; gap:9px; width:100%; }
#inspect-play{
  flex:1; padding:12px; background:var(--yellow); color:#3a2a06;
  border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:0.9rem;
  box-shadow:0 3px 0 #d9a626;
}
#inspect-back{
  padding:12px 18px; background:#fff; border:1.5px solid var(--line);
  border-radius:8px; color:var(--ink-soft); cursor:pointer; font-size:0.85rem;
}

/* ---------- touch ---------- */
#touch-ui{ position:fixed; inset:0; z-index:6; pointer-events:none; display:none; }
#touch-ui.on{ display:block; }
.tbtn{
  position:absolute; pointer-events:auto;
  width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,0.82); border:2px solid var(--line);
  color:var(--blue); font-size:1.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}
#t-fwd{ left:28px; bottom:116px; }
#t-back{ left:28px; bottom:38px; }
#t-left{ left:-6px; bottom:77px; }
#t-right{ left:98px; bottom:77px; }
#t-grab{
  right:26px; bottom:62px; width:78px; height:78px;
  background:var(--yellow); border-color:#d9a626; color:#3a2a06; font-size:0.9rem;
}

@media (prefers-reduced-motion: reduce){
  .progress-fill, #section-banner, .btn-primary{ transition:none; }
}

/* ---------- cursor modes ---------- */
/* Crosshair only exists in pointer-lock mode; in cursor mode you aim with the cursor. */
#crosshair{ display:none; }
body.locked #crosshair{ display:block; }
body.locked canvas{ cursor:none; }
body.over-tape canvas{ cursor:pointer; }
canvas{ cursor:grab; }
body.locked canvas, body.over-tape canvas{ cursor:inherit; }
canvas:active{ cursor:grabbing; }
body.over-tape canvas:active{ cursor:pointer; }

/* In cursor mode the label follows near the cursor; when locked it sits under the crosshair. */
#hover-label{ top:auto; bottom:84px; }
#hover-label.pinned{ top:calc(50% + 28px); bottom:auto; }