/* $SEED — INSIDE THE JACKPOT (fx/pile.css)
   A glass-fronted safe: steel frame, hazard stripe along the top, riveted bezel, a fee slot at the top,
   a split floor plate at the bottom that slides open when the jackpot is cracked, and a glare across the glass.
   The coins themselves live on the canvas (fx/pile.js). Everything here is CSS; no images.
   State classes on .pl-safe: pl-feeding (coins dropping) · pl-hot (jackpot words are out, LED blinks) ·
   pl-shake (the crack hit) · pl-open (floor plates slid apart) · pl-empty (stamped EMPTY). */

.pl{margin:4px 0 34px;position:relative}

/* ---------- header strip ---------- */
.pl-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;line-height:1}
.pl-stamp{
  display:inline-block;background:var(--ink);color:var(--yellow);font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 10px;transform:rotate(-1.2deg); /* hammered on, not typeset */
}
.pl-dot{font-family:var(--stencil);font-size:28px;color:var(--orange-d);line-height:1}
.pl-sol{font-family:var(--stencil);font-weight:900;font-size:clamp(28px,3.6vw,42px);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pl-count{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pl-led{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pl-led i{
  width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);flex:none;
  background:radial-gradient(circle at 35% 32%,#ffd0c2 0,var(--orange) 45%,#8a1f06 100%);
}
.pl-hot .pl-led i{animation:pl-blink .5s steps(2) infinite}
.pl-empty .pl-led i{background:radial-gradient(circle at 35% 32%,#fff 0,#b8bcb8 45%,#5a5e5a 100%);animation:none}
@keyframes pl-blink{50%{opacity:.25}}

/* ---------- the safe ---------- */
.pl-safe{
  position:relative;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:30px 18px 16px;
  /* brushed steel: fine vertical grain over a top-lit plate */
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#eef0ec 0,var(--plate) 45%,#cfd3cf 100%);
}
.pl-safe.pl-shake{animation:pl-shake .5s cubic-bezier(.2,.8,.3,1)}
@keyframes pl-shake{
  12%{transform:translate(-7px,4px) rotate(-.4deg)}
  28%{transform:translate(8px,-4px) rotate(.4deg)}
  46%{transform:translate(-5px,3px)}
  64%{transform:translate(4px,-2px)}
  82%{transform:translate(-2px,1px)}
}
/* hazard stripe across the top of the frame */
.pl-safe::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;border-bottom:3px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px);
}
/* the riveted bezel: a row of rivets along every inner edge of the frame */
.pl-safe::after{
  content:"";position:absolute;left:4px;right:4px;top:20px;bottom:4px;pointer-events:none;
  --rv:radial-gradient(circle,#b6bab6 0 1.8px,var(--ink) 2.3px,transparent 3.2px);
  background:
    var(--rv) 0 0/24px 10px repeat-x,
    var(--rv) 0 100%/24px 10px repeat-x,
    var(--rv) 0 0/10px 24px repeat-y,
    var(--rv) 100% 0/10px 24px repeat-y;
}

/* the fee slot: a chute in the top of the frame that the coins fall out of */
.pl-slot{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;
  width:132px;height:22px;background:var(--ink);border:3px solid var(--ink);border-top:0;border-radius:0 0 7px 7px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.pl-slot::before{content:"";width:46px;height:4px;background:#2d2f2d;border-radius:2px;box-shadow:inset 0 1px 0 #000}
.pl-slot span{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--yellow)}
.pl-slot i{width:7px;height:7px;border-radius:50%;background:#4a1407;border:1px solid #000;flex:none;transition:background .15s}
.pl-feeding .pl-slot i{background:var(--orange);animation:pl-blink .18s steps(2) infinite;box-shadow:0 0 0 1px rgba(255,74,28,.35)}

/* ---------- the glass ---------- */
.pl-glass{
  position:relative;border:3px solid var(--ink);overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  /* light falls in from the top; the lower band is the void under the floor plates */
  background:linear-gradient(180deg,#f7f8f6 0,#e6e8e4 55%,#d7dad6 calc(100% - 12px),#0b0b0b calc(100% - 12px),#000 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 16px 28px -16px rgba(0,0,0,.4);
}
.pl-canvas{display:block;width:100%;height:420px;position:relative;z-index:1}
/* the glare: one wide sheet of light and a thin edge line, both above the coins and below the plates */
.pl-glare{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(112deg,rgba(255,255,255,.46) 0,rgba(255,255,255,.46) 17%,rgba(255,255,255,0) 31%,rgba(255,255,255,0) 70%,rgba(255,255,255,.17) 84%,rgba(255,255,255,0) 100%),
    linear-gradient(112deg,transparent 0,transparent 33%,rgba(255,255,255,.55) 33.4%,rgba(255,255,255,.55) 34.2%,transparent 34.6%);
}
/* the floor: two steel plates that slide apart over the void when the jackpot walks out */
.pl-floor{position:absolute;left:0;right:0;bottom:0;height:12px;z-index:2;overflow:hidden;background:#000}
.pl-floor i{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.14) 0 5px,transparent 5px 10px),
    linear-gradient(180deg,#d8dbd7,#a9aeaa);
  border-top:2px solid var(--ink);
  transition:transform .75s cubic-bezier(.6,0,.2,1);
}
.pl-door-l{left:0;border-right:2px solid var(--ink)}
.pl-door-r{right:0;border-left:2px solid var(--ink)}
.pl-open .pl-door-l{transform:translateX(-103%)}
.pl-open .pl-door-r{transform:translateX(103%)}

/* the overflow plate: shows when a coin is worth more than 0.1 SOL because the glass filled up */
.pl-plate{
  position:absolute;right:10px;top:10px;z-index:4;pointer-events:none;
  background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;padding:5px 8px;transform:rotate(2deg);
  max-width:calc(100% - 20px);overflow-wrap:anywhere;
}
/* tap-the-glass hint, shown once */
.pl-hint{
  position:absolute;left:10px;bottom:22px;z-index:4;pointer-events:none;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;
  animation:pl-hint 1.4s ease-in-out infinite;
}
.pl-hint::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:7px;vertical-align:1px}
@keyframes pl-hint{50%{transform:translateY(-3px)}}
/* the knock ring where a finger hit the glass */
.pl-knock{
  position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:4;pointer-events:none;
  border:3px solid var(--ink);border-radius:50%;opacity:0;
  animation:pl-knock .42s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes pl-knock{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* EMPTY: a rubber stamp slammed on the glass once the coins are gone */
.pl-empty-stamp{
  position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--stencil);font-weight:900;font-size:clamp(64px,15vw,150px);line-height:.9;letter-spacing:.04em;
  color:var(--orange);text-shadow:4px 4px 0 var(--ink);
  border:6px solid var(--orange);box-shadow:4px 4px 0 var(--ink),inset 4px 4px 0 var(--ink);padding:4px 20px 2px;
  white-space:nowrap;
}
.pl-empty-stamp.pl-slam{animation:pl-stampin .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pl-stampin{0%{transform:translate(-50%,-50%) rotate(-7deg) scale(2.2);opacity:0}60%{transform:translate(-50%,-50%) rotate(-7deg) scale(.94);opacity:1}100%{transform:translate(-50%,-50%) rotate(-7deg) scale(1)}}
.pl-empty .pl-glass{background:linear-gradient(180deg,#e9ebe7 0,#d2d5d1 55%,#c3c7c3 calc(100% - 12px),#0b0b0b calc(100% - 12px),#000 100%)}

/* ---------- foot line ---------- */
.pl-foot{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--ink-2);min-width:0}
.pl-haz{flex:none;width:34px;height:12px;border:2px solid var(--ink);background:repeating-linear-gradient(-45deg,var(--orange) 0 6px,var(--yellow) 6px 12px)}
.pl-empty .pl-haz{background:repeating-linear-gradient(-45deg,var(--won) 0 6px,#fff 6px 12px)}
.pl-winner{min-width:0;overflow-wrap:anywhere}
.pl-winner code{background:var(--won);color:#fff;padding:1px 6px;font-size:12px}
.pl-winner code.you{background:var(--orange)}
.pl-winner b{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .pl-safe{padding:28px 12px 12px;box-shadow:6px 6px 0 var(--ink)}
  .pl-safe::after{left:3px;right:3px;top:19px;bottom:3px;background-size:20px 8px,20px 8px,8px 20px,8px 20px}
  .pl-slot{width:104px;height:20px}
  .pl-slot::before{width:34px}
  .pl-led{margin-left:0;flex-basis:100%}
  .pl-canvas{height:300px}
  .pl-plate{font-size:11px;padding:4px 7px}
  .pl-empty-stamp{border-width:4px;text-shadow:3px 3px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  /* style.css already stops animation site-wide; the floor plates jump straight to their open position */
  .pl-floor i{transition:none}
  .pl-hint{animation:none}
}