/* Daily loot bin — HUD button + modal overlay. */

/* Design tokens. Scope to the component so they don't bleed into the rest
   of the app's :root. */
.play-hub-hud-bin,
#daily-bin-modal {
  --daily-bin-gold: #ffd840;
  --daily-bin-gold-rgb: 255, 216, 64;
  --daily-bin-gold-dim: #ffaa20;
  --daily-bin-gold-dim-rgb: 255, 170, 32;
  --daily-bin-panel-fg: #1a1f2a;
  --daily-bin-text: #e8edf5;
  --daily-bin-text-rgb: 232, 237, 245;
  --daily-bin-radius: 10px;
  --daily-bin-transition: 0.12s ease;
  --daily-bin-pulse-duration: 1.4s;
}

/* HUD bin button — sits between the relic pill and the settings cog. */
.play-hub-hud-bin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 4px;
  padding: 0;
  background: rgba(20, 26, 36, 0.65);
  border: 1px solid rgba(var(--daily-bin-gold-rgb), 0.4);
  border-radius: var(--daily-bin-radius);
  color: var(--daily-bin-gold);
  font-size: 20px;
  cursor: pointer;
  transition: transform var(--daily-bin-transition), box-shadow var(--daily-bin-transition), background var(--daily-bin-transition);
}
.play-hub-hud-bin:hover {
  background: rgba(40, 50, 70, 0.85);
  box-shadow: 0 0 10px rgba(var(--daily-bin-gold-rgb), 0.35);
  transform: translateY(-1px);
}
.play-hub-hud-bin:active { transform: translateY(0); }

.play-hub-hud-bin-icon {
  font-size: 18px;
  line-height: 1;
}

.play-hub-hud-bin-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ff4f4f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 0 6px rgba(255, 79, 79, 0.6);
  pointer-events: none;
}
.play-hub-hud-bin-badge.is-ready {
  background: var(--daily-bin-gold);
  color: var(--daily-bin-panel-fg);
  box-shadow: 0 0 8px rgba(var(--daily-bin-gold-rgb), 0.7);
  animation: daily-bin-pulse var(--daily-bin-pulse-duration) ease-in-out infinite;
}
.play-hub-hud-bin-badge.is-full {
  background: #ff7a3a;
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 122, 58, 0.7);
}

@keyframes daily-bin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ─── Modal overlay — the parchment SCROLL (Figma 3341:153, 2026-06-03) ──────
   The popup is a vertical parchment scroll with rolled top + bottom ends, on a
   dimmed backdrop (NO wood desk — "just the scroll", per owner decision; the
   mock's wooden plank background is intentionally dropped). Same storybook
   family as the GEAR / SHOP / INVENTORY tabs: EB Garamond serifs, parchment +
   gold + dark treasure-slot tiles. 3341:153 refinements over the 2026-06-02
   build: two-face "DAILY BIN" title (EB Garamond bold + Irish Grover), a dark
   gold-framed YIELD medallion, and engraved-plaque corner studs on the collect
   banner. */
#daily-bin-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 12, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Respect notch / dynamic-island insets (matches the other modals). */
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  /* warm-parchment palette + EB Garamond, local to the scroll */
  --db-ink: #3a2208;
  --db-ink-soft: #6a4f28;
  --db-gold: #b88a36;
  --db-gold-lt: #f4d98e;
  /* EB Garamond ships ONLY bold-700-upright + italic-400 (see style.css
     @font-face). So bold headings use EB Garamond; regular-weight text would
     fall through to the next family — which must NOT be Cinzel (an all-caps
     inscriptional face that renders lowercase as small-caps). Use Georgia so
     regular text stays mixed-case. The italic subtitle uses EB Garamond's
     real italic. */
  --db-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}
#daily-bin-modal.is-visible {
  display: flex;
  animation: daily-bin-fade-in 0.18s ease;
}
@keyframes daily-bin-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The scroll = top roll + parchment sheet + bottom roll, stacked. */
.daily-bin-panel {
  position: relative;
  width: min(540px, 95vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.6));
  animation: daily-bin-pop 0.22s cubic-bezier(0.2, 1, 0.36, 1) both;
}
@keyframes daily-bin-pop {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Rolled paper ends — parchment cylinder bars that overhang the sheet, each
   with two round end-curls (the <i>). */
.daily-bin-roll {
  position: relative;
  flex: none;
  height: 40px;
  margin: 0 -3px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f3e0b4 0%, #e6cd90 40%, #cdab6c 72%, #b08f54 100%);
  box-shadow:
    inset 0 3px 4px rgba(255, 248, 226, 0.6),
    inset 0 -7px 11px rgba(110, 75, 35, 0.5),
    0 4px 9px rgba(30, 16, 6, 0.4);
  z-index: 2;
}
.daily-bin-roll-top { margin-bottom: -12px; }
.daily-bin-roll-bottom { margin-top: -12px; }
.daily-bin-roll i {
  position: absolute; top: 50%;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ecd6a4 0%, #cba968 46%, #8a6a38 100%);
  box-shadow:
    inset 0 0 0 3px rgba(120, 85, 42, 0.55),
    inset 0 2px 3px rgba(255, 246, 222, 0.5),
    0 2px 5px rgba(30, 16, 6, 0.45);
}
.daily-bin-roll i:first-child { left: -7px; }
.daily-bin-roll i:last-child  { right: -7px; }

/* Parchment sheet — narrower than the rolls so they overhang; holds content.
   Flex column with the GRID as the only scrollable region: header, timer row,
   and the COLLECT footer stay pinned in view no matter how many loot tiles
   accumulate (only the grid gives way and scrolls). */
.daily-bin-sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 16px;
  padding: 26px 24px 22px;
  box-sizing: border-box;
  color: var(--db-ink);
  background:
    radial-gradient(125% 70% at 50% 0%, #f5e8c7 0%, #ecd9ad 50%, #e1cc9c 100%);
  border-left: 2px solid #cbb079;
  border-right: 2px solid #cbb079;
  box-shadow:
    inset 14px 0 22px -14px rgba(110, 78, 38, 0.45),
    inset -14px 0 22px -14px rgba(110, 78, 38, 0.45),
    inset 0 0 70px rgba(150, 110, 55, 0.14);
}
/* Fixed (non-scrolling) sections — only the grid may shrink. */
.daily-bin-head,
.daily-bin-timer-row,
.daily-bin-foot { flex: none; }

/* header — decorative title + subtitle (left) and the round YIELD medallion (right) */
.daily-bin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
/* "DAILY BIN" — a two-face title (Figma 3341:153): "DAILY" in the bundled
   EB Garamond bold (shared with the other storybook tabs) and "BIN" in the
   chunky hand-drawn Irish Grover display face. BIN is set larger because Irish
   Grover's caps sit small inside a tall em box — at ~1.2× it matches DAILY's
   cap height while keeping the playful weight. Both all-caps, warm dark-brown. */
.daily-bin-title {
  margin: 0 0 1px 0;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  line-height: 0.92;
}
.daily-bin-title-1 {
  font-family: var(--db-serif);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: 0.01em;
  color: #4d2516;
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.5);
}
.daily-bin-title-2 {
  font-family: 'Irish Grover', var(--db-serif);
  font-weight: 400;
  font-size: clamp(34px, 8.6vw, 47px);
  letter-spacing: 0.005em;
  color: #4f291b;
  text-shadow:
    0 1px 0 rgba(255, 248, 230, 0.45),
    0 2px 3px rgba(70, 40, 18, 0.25);
}
.daily-bin-sub {
  font-family: var(--db-serif);
  font-style: italic;       /* EB Garamond italic-400 exists — renders correctly */
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--db-ink-soft);
}

/* YIELD medallion (Figma 3341:153) — a dark, recessed disc inside an ornate
   bronze frame with gold text, NOT a flat gold coin. Rounded-square with a
   thick double-bevel bronze border, an inner gold hairline, and four small
   gold corner studs (::before) that read as filigree. */
.daily-bin-mul {
  position: relative;
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  margin-top: 2px;
  border-radius: 16px;
  text-align: center;
  /* dark recessed interior */
  background: radial-gradient(120% 120% at 50% 24%, #4a3417 0%, #2c1c0c 58%, #1a0f06 100%);
  /* beveled bronze frame — lighter top/left, darker bottom/right */
  border: 3px solid;
  border-color: #ead08a #9a6f2c #7f5520 #cda14e;
  box-shadow:
    inset 0 0 0 2px rgba(24, 14, 6, 0.92),
    inset 0 0 0 3.5px rgba(231, 196, 120, 0.55),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(40, 22, 8, 0.5);
}
/* four gold corner studs */
.daily-bin-mul::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, #f6dc92 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 6px) 6px, #f6dc92 0 2.4px, transparent 3px),
    radial-gradient(circle at 6px calc(100% - 6px), #f6dc92 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #f6dc92 0 2.4px, transparent 3px);
}
.daily-bin-mul-label {
  font-family: var(--db-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #c99f6b;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.daily-bin-mul-value {
  font-family: var(--db-serif);
  font-size: 22px;
  font-weight: 800;
  color: #e4b35e;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.daily-bin-mul-lv {
  font-family: var(--db-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;   /* "Lv 3" → "LV 3" to match the mock */
  color: #c19766;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* subtle close — the mock has none, so keep it small + out of the way. Anchored
   to the PANEL (not the scrolling sheet) so it never scrolls out of reach on
   short/landscape viewports where the sheet content overflows. */
.daily-bin-close {
  position: absolute;
  top: 34px; right: 24px;
  z-index: 4;
  width: 26px; height: 26px;
  background: linear-gradient(180deg, #ecdcb6, #d8c191);
  border: 1.5px solid #8a6a3a;
  border-radius: 50%;
  color: #5a4022;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--daily-bin-transition);
}
.daily-bin-close:hover { background: linear-gradient(180deg, #f3e6c5, #e0caa0); }

/* progress — ELAPSED time + fill bar, on a recessed parchment pill */
.daily-bin-timer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #efe0bb 0%, #e2cf9d 100%);
  border: 2px solid #b89a5e;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.6), inset 0 -2px 5px rgba(120, 90, 42, 0.2);
}
.daily-bin-timer-block { flex: 0 0 auto; text-align: left; }
.daily-bin-timer-label {
  font-family: var(--db-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--db-ink-soft);
}
.daily-bin-timer {
  font-family: var(--db-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--db-ink);
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.daily-bin-fill-block { flex: 1 1 auto; min-width: 0; }
.daily-bin-fill-track {
  width: 100%;
  height: 13px;
  background: linear-gradient(180deg, #cbb389 0%, #bda06f 100%);
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid #8a6a3a;
  box-shadow: inset 0 1px 3px rgba(80, 55, 20, 0.5);
}
.daily-bin-fill-bar {
  height: 100%;
  background: linear-gradient(180deg, #ffd773 0%, #e89a26 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.6);
  width: 0%;
  transition: width 0.4s linear;
}
.daily-bin-fill-cap {
  margin-top: 5px;
  font-family: var(--db-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--db-ink-soft);
  letter-spacing: 0.02em;
}

/* loot grid — fixed 6 columns of dark gold-bordered treasure slots. The one
   scrollable region of the sheet (see .daily-bin-sheet): when tiles exceed
   the space left by the pinned header/timer/footer, the grid scrolls. */
.daily-bin-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 110, 55, 0.5) transparent;
}
.daily-bin-grid::-webkit-scrollbar { width: 7px; }
.daily-bin-grid::-webkit-scrollbar-thumb { background: rgba(150, 110, 55, 0.5); border-radius: 4px; }
.daily-bin-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  /* Embossed gold frame — lighter top/left, darker bottom/right (beveled). */
  border: 3px solid;
  border-color: #d7ab57 #97702f #855f25 #b88c44;
  background: radial-gradient(125% 120% at 50% 14%, #3d2c19 0%, #271810 64%, #1c1108 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(42, 27, 10, 0.92),
    inset 0 0 0 2.5px rgba(255, 222, 150, 0.22),
    inset 0 4px 9px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(20, 10, 4, 0.5);
}
.daily-bin-tile-icon {
  width: 64%; height: 64%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.daily-bin-tile-icon svg { width: 100%; height: 100%; }
/* Equipment cells — one cell per dropped copy (no stacking, no count badge),
   showing the item's baked GLB thumbnail. Slightly larger than the glyph
   icons because the bake carries its own padding around the model. */
.daily-bin-tile-equip .daily-bin-tile-icon { width: 86%; height: 86%; }
.daily-bin-equip-thumb {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.daily-bin-tile-count {
  position: absolute;
  right: 5px; bottom: 3px;
  font-family: var(--db-serif);
  /* Inter-equivalent antique tan in the mock — muted, not bright cream. The
     strong shadow keeps it legible against the dark well at small sizes. */
  font-size: clamp(11px, 2.5vw, 14px);
  font-weight: 700;
  color: #cbb78f;
  text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
/* empty placeholder slot — same embossed gold frame, just an emptier (darker)
   well. The mock has more slots than the bin usually holds; the surplus stay
   present but blank, reading as a treasure case with open slots. */
.daily-bin-tile-empty {
  border-color: #b48f48 #836129 #735320 #9c7838;
  background: radial-gradient(125% 120% at 50% 14%, #2a1f13 0%, #170e06 78%);
  box-shadow:
    inset 0 0 0 1.5px rgba(38, 24, 9, 0.92),
    inset 0 0 0 2.5px rgba(255, 222, 150, 0.14),
    inset 0 4px 10px rgba(0, 0, 0, 0.62);
}

.daily-bin-loading {
  grid-column: 1 / -1;
  padding: 40px 24px;
  text-align: center;
  color: var(--db-ink-soft);
  font-family: var(--db-serif);
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* footer — parchment banner button + note */
.daily-bin-foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
}
.daily-bin-collect {
  position: relative;
  width: min(440px, 96%);
  padding: 14px 22px;
  font-family: var(--db-serif);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--db-ink);
  cursor: pointer;
  border: 2.5px solid #7a5526;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe6a6 0%, #f1c869 52%, #e3ad3e 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 214, 0.5),
    inset 0 0 0 3.5px rgba(122, 85, 38, 0.32),
    inset 0 1px 0 rgba(255, 250, 235, 0.6),
    0 3px 9px rgba(40, 22, 8, 0.42);
  transition: transform var(--daily-bin-transition), box-shadow var(--daily-bin-transition), filter var(--daily-bin-transition);
}
/* engraved-plaque corner studs (echo the YIELD medallion) — dark brown so they
   read on both the gold (ready) and parchment (cooldown) banner fills. */
.daily-bin-collect::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 7px 7px, rgba(110, 76, 34, 0.5) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(110, 76, 34, 0.5) 0 2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(110, 76, 34, 0.5) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(110, 76, 34, 0.5) 0 2px, transparent 2.6px);
}
.daily-bin-collect:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 214, 0.55), 0 5px 14px rgba(40, 22, 8, 0.45);
}
.daily-bin-collect:active:not(:disabled) { transform: translateY(0) scale(0.99); }
/* cooldown (READY IN …) — a flatter parchment plaque, dark-brown text */
.daily-bin-collect.is-cooldown,
.daily-bin-collect:disabled {
  cursor: default;
  color: #5d3f2f;
  background: linear-gradient(180deg, #efe0bb 0%, #e0cd9c 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 214, 0.45),
    inset 0 0 0 3.5px rgba(122, 85, 38, 0.28),
    inset 0 1px 0 rgba(255, 250, 235, 0.5);
  filter: none;
}
.daily-bin-note {
  text-align: center;
  font-family: var(--db-serif);
  font-size: 13px;
  color: var(--db-ink-soft);
  min-height: 16px;
}