/* Original small-grid LUCKYBOX chest. State copy and button semantics belong to the parent view. */
.numberedChest {
  --chest-lid:#b98025;
  --chest-panel:#e4b857;
  --chest-front:#c99a3b;
  --chest-side:#826021;
  --chest-rim:#f4d078;
  --chest-band:#8d641f;
  --chest-ink:#2a1c06;
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  aspect-ratio:1;
  container-type:inline-size;
  isolation:isolate;
  line-height:1;
  border-radius:5px;
}
.numberedChestArt { display:block; width:100%; height:100%; overflow:visible; stroke-linejoin:round; }
.numberedChestShadow { fill:#0004; }
.numberedChestInterior { fill:#342b1c; }
.numberedChestLidRim { fill:var(--chest-lid); stroke:var(--chest-rim); stroke-width:1.5; }
.numberedChestLidPanel { fill:var(--chest-panel); }
.numberedChestBands { fill:var(--chest-band); }
.numberedChestFront { fill:var(--chest-front); }
.numberedChestSide { fill:var(--chest-side); }
.numberedChestRim { fill:var(--chest-rim); }
.numberedChestEdge { fill:none; stroke:var(--chest-rim); stroke-width:2; stroke-linecap:round; }
.numberedChestLock { fill:var(--chest-rim); stroke:var(--chest-side); stroke-width:1; }
.numberedChestKeyhole { fill:none; stroke:var(--chest-side); stroke-width:2; stroke-linecap:round; }
.numberedChestNumber { display:block; position:absolute; left:45%; top:71%; transform:translate(-50%,-50%); z-index:1; color:var(--chest-ink); font-family:var(--font,system-ui,sans-serif); font-weight:850; font-size:clamp(12px,26cqw,22px); font-variant-numeric:tabular-nums; letter-spacing:-.3px; line-height:1; white-space:nowrap; }
.numberedChestMark { display:flex; justify-content:center; align-items:center; position:absolute; right:0; top:13%; width:40%; aspect-ratio:1; z-index:2; font-family:Arial,system-ui,sans-serif; font-size:clamp(17px,40cqw,30px); font-weight:800; line-height:1; text-shadow:0 1px 1px #000b; pointer-events:none; }
.numberedChest--selected { --chest-lid:#d8a73a; --chest-panel:#ffe18a; --chest-front:#e7bb55; --chest-side:#a87920; --chest-rim:#fff0a8; --chest-band:#b27d22; outline:2px solid #efc85b; outline-offset:-2px; background:#efc85b0d; }
.numberedChest--drawn { --chest-lid:#635631; --chest-panel:#7f714d; --chest-front:#625431; --chest-side:#3e3725; --chest-rim:#95835a; --chest-band:#4b402a; --chest-ink:#eee4cd; }
.numberedChestMark--drawn { color:#fb6267; }
.numberedChest--unavailable { --chest-lid:#535b62; --chest-panel:#6f787f; --chest-front:#565f66; --chest-side:#363e45; --chest-rim:#919ba3; --chest-band:#434b52; --chest-ink:#d9dde1; }
.numberedChestMark--unavailable { color:#c6cdd4; font-size:clamp(15px,34cqw,27px); font-weight:600; }
@media (prefers-reduced-motion:reduce) {
  .numberedChest,.numberedChest * { animation:none !important; transition:none !important; }
}