/* BAGGAGE — kraft, ink, alert red. Airline-modern, zero slop. */
:root{
  --kraft:#E9D4A0; --kraft-deep:#DfC68D; --paper:#F6ECD2;
  --ink:#181208; --muted:#6E5B33; --red:#D8341B; --red-deep:#B02712;
  --gold:#C99B2E; --white:#FFFFFF;
  --display:'Archivo Black', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--kraft); color:var(--ink);
  font-family:var(--mono); overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none;
}
.mono{ font-family:var(--mono); }
a{ color:var(--ink); }
button{ font-family:inherit; cursor:pointer; }
[hidden]{ display:none !important; }

.screen{ min-height:100svh; display:flex; flex-direction:column; align-items:center; }

/* ============ INTRO ============ */
.intro{ justify-content:center; text-align:center; padding:24px;
  background:
    radial-gradient(640px 340px at 50% 30%, rgba(216,52,27,.07), rgba(216,52,27,0) 70%),
    var(--kraft); }
.intro-inner{ display:flex; flex-direction:column; align-items:center; gap:0; }
.kicker{ font-weight:700; font-size:.95rem; letter-spacing:.28em; color:var(--muted); }
.wordmark{ font-family:var(--display); font-size:clamp(3.1rem,14vw,5.4rem); letter-spacing:-.02em;
  line-height:1.02; margin:6px 0 18px; }
.tag-line{ font-size:1.04rem; line-height:1.75; color:#3d3217; margin-bottom:30px; }
.tag-line b{ white-space:nowrap; }
.big-btn{ font-family:var(--display); font-size:1.1rem; letter-spacing:.04em; color:var(--kraft);
  background:var(--ink); border:none; border-radius:14px; padding:18px 34px;
  box-shadow:0 6px 0 rgba(24,18,8,.35); transition:transform .08s; }
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(24,18,8,.35); }
.fine{ font-size:.78rem; color:var(--muted); margin-top:18px; }
.fine a{ color:var(--muted); }
.foot{ position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-size:.74rem; color:var(--muted); }
.foot a{ color:var(--muted); }

/* ============ THE BELT ============ */
.game{ justify-content:flex-start; }
.bar{ width:100%; max-width:480px; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 4px; }
.home{ font-weight:700; font-size:.82rem; text-decoration:none; border:2.5px solid var(--ink);
  border-radius:9px; padding:5px 8px; }
.bar-title{ font-family:var(--display); font-size:1.05rem; letter-spacing:.02em; }
.counter{ font-weight:700; font-size:.85rem; color:var(--muted); min-width:64px; text-align:right; }

.shelf-zone{ width:100%; max-width:480px; padding:12px 14px 0; }
.shelf{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.chip{ position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:13px;
  padding:5px 5px 6px; display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 4px 0 rgba(24,18,8,.25); transition:transform .12s, box-shadow .12s, background .12s;
  -webkit-tap-highlight-color:transparent; }
.chip:active{ transform:scale(.94); }
.chip-img{ width:100%; aspect-ratio:1; border-radius:8px; display:block; image-rendering:auto; }
.chip-icon{ width:100%; aspect-ratio:1; padding:18%; stroke:var(--ink); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.chip-n{ font-family:var(--mono); font-weight:500; font-size:.6rem; line-height:1.25; color:var(--muted);
  text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:3.75em; }
.chip.in-bag{ border-color:var(--red); transform:translateY(3px); box-shadow:0 1px 0 rgba(24,18,8,.35);
  animation:chip-pop .22s cubic-bezier(.2,.9,.3,1.4); }
.chip.in-bag::after{ content:''; position:absolute; top:6px; right:6px; width:14px; height:14px;
  border-radius:50%; background:var(--red); border:2.5px solid var(--paper); }
.chip.in-bag .chip-img{ opacity:.55; }
@keyframes chip-pop{ 0%{ transform:translateY(3px) scale(.88);} 60%{ transform:translateY(3px) scale(1.06);} 100%{ transform:translateY(3px) scale(1);} }

/* ============ THE CASE ============ */
.case-zone{ width:100%; max-width:480px; padding:14px 18px 26px; display:flex;
  flex-direction:column; align-items:center; gap:10px; }
.case-label{ font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.08em; }
.case-label.over{ color:var(--red); animation:shake-label .3s; }
.case-row{ width:100%; display:grid; grid-template-columns:repeat(6,1fr); gap:7px;
  background:var(--kraft-deep); border:3px solid var(--ink); border-radius:16px; padding:9px;
  box-shadow:inset 0 3px 8px rgba(24,18,8,.18); }
.slot{ aspect-ratio:1; border:2.5px dashed rgba(24,18,8,.3); border-radius:10px; background:transparent;
  padding:0; overflow:hidden; }
.slot.filled{ border:2.5px solid var(--ink); background:var(--paper); cursor:pointer;
  animation:chip-pop .22s cubic-bezier(.2,.9,.3,1.4); }
.slot .chip-img,.slot .chip-icon{ width:100%; height:100%; border-radius:0; padding:0; }

/* ============ THE REVEAL ============ */
.reveal-row{ display:flex; align-items:center; gap:12px; min-height:74px; margin-bottom:6px;
  width:min(320px,82vw); }
.reveal-row .chip-img,.reveal-row .chip-icon{ width:64px; height:64px; border-radius:12px;
  border:3px solid var(--ink); flex:none; animation:chip-pop .25s cubic-bezier(.2,.9,.3,1.4); }
.reveal-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.reveal-name{ font-family:var(--mono); font-weight:700; font-size:.82rem; line-height:1.3; color:var(--ink); }
.reveal-w{ font-weight:700; font-size:1.05rem; color:var(--red); }

/* ============ SCALE ============ */
.scale-zone{ width:100%; max-width:480px; padding:8px 18px 26px; display:flex;
  flex-direction:column; align-items:center; margin-top:6px; }
#gauge{ width:min(320px,82vw); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.game.weighing #gauge{ transform:scale(1.22) translateY(-8px); }
#gaugeArc{ stroke:var(--ink); stroke-width:5; stroke-linecap:round; }
#gaugeRed{ stroke:var(--red); stroke-width:9; stroke-linecap:butt; opacity:.92; }
#gaugeBand{ stroke:rgba(24,18,8,.30); stroke-width:16; stroke-linecap:butt; }
#gaugeTicks line{ stroke:var(--ink); stroke-width:2.4; }
#gaugeTicks text{ font-family:var(--mono); font-weight:700; font-size:12.5px; fill:var(--muted); }
#needle{ stroke:var(--red-deep); stroke-width:4.5; stroke-linecap:round; }
.hub{ fill:var(--ink); }
.band-label{ font-weight:700; font-size:1rem; color:var(--ink); margin-top:4px;
  min-height:1.3em; text-align:center; }
@keyframes shake-label{ 25%{ transform:translateX(-4px);} 75%{ transform:translateX(4px);} }
.zip-btn{ margin-top:4px; }
.zip-btn:disabled{ opacity:.35; box-shadow:none; pointer-events:none; }

/* ============ THE DESK / RESULT ============ */
.result{ justify-content:center; padding:22px 18px 30px; }
.result-inner{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:480px; }
.stamp-wrap{ position:relative; width:min(420px,92vw); }
#card{ width:100%; height:auto; display:block; border-radius:18px;
  border:3px solid var(--ink); box-shadow:8px 8px 0 rgba(24,18,8,.25); background:var(--kraft); }
.stamp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }
.stamp span{ font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); color:var(--red);
  border:6px solid var(--red); border-radius:10px; padding:8px 22px; transform:rotate(-12deg);
  background:rgba(246,236,210,.85); animation:slam .38s cubic-bezier(.15,1.6,.4,1) both; }
.stamp.gold span{ color:var(--gold); border-color:var(--gold); }
@keyframes slam{ from{ transform:rotate(-12deg) scale(3.4); opacity:0; } to{ transform:rotate(-12deg) scale(1); opacity:1; } }
.verdict-sub{ font-weight:700; font-size:.92rem; color:var(--muted); text-align:center;
  margin:16px 0 4px; max-width:36ch; line-height:1.6; }
.result-actions{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:14px; }
.ghost-btn{ background:transparent; border:none; color:var(--muted); font-size:.8rem;
  font-weight:700; letter-spacing:.08em; text-decoration:underline; text-underline-offset:3px; }
#countdown{ margin-top:20px; letter-spacing:.06em; }

/* desktop: keep it phone-shaped and centered */
@media (min-width:700px){
  body{ background:
    radial-gradient(900px 500px at 50% 20%, rgba(216,52,27,.05), rgba(216,52,27,0) 70%),
    var(--kraft-deep); }
  .screen{ max-width:520px; margin:0 auto; background:var(--kraft);
    border-left:3px solid var(--ink); border-right:3px solid var(--ink); }
}

@media (prefers-reduced-motion: reduce){
  .item-card.in,.item-card.out-pack,.item-card.out-leave,.checkin-btn,.stamp span{ animation:none; }
}