/* COIN SHOP: compact dark BALI overlay, independent of the fixed card viewport. */
#coinShopDialog{box-sizing:border-box;border:1px solid #45623c;color:#f3fbef;background:linear-gradient(160deg,#17221b,#0a120f 64%);border-radius:18px;width:min(96vw,700px);max-width:700px;max-height:min(91dvh,850px);padding:0;box-shadow:0 30px 100px #000b}
#coinShopDialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
.coin-shop-layout{padding:clamp(14px,3vw,23px);display:grid;gap:14px;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}
.coin-shop-head{display:flex;align-items:start;justify-content:space-between;gap:16px}
.coin-shop-eyebrow{font:750 10px/1.3 Inter,Manrope,sans-serif;letter-spacing:.15em;color:#a4ce96}
.coin-shop-head h2{font:900 clamp(23px,6vw,32px)/1.1 Inter,Manrope,sans-serif;margin:5px 0 0;letter-spacing:.05em;color:#c2f985}
.coin-shop-head p{font-size:12px;line-height:1.5;margin:6px 0 0;color:#c3d3bd}
.coin-shop-close{border:1px solid #587455;background:#203026;color:#fff;border-radius:10px;min-width:37px;min-height:37px;font-size:23px;cursor:pointer}
.coin-shop-balance{border:1px solid #3c5935;background:#1c2b1d;border-radius:12px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.coin-shop-balance strong{color:#c5f98b;font-size:17px}
.coin-shop-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.coin-shop-product{background:#19251c;border:1px solid #364c32;border-radius:13px;padding:10px;display:grid;gap:7px;min-width:0}
.coin-shop-product .coin-shop-image{height:126px;border-radius:9px;background:#142218;display:grid;place-items:center;overflow:hidden;min-width:0;min-height:0}
.coin-shop-product .coin-shop-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.coin-shop-product h3{font-size:14px;font-weight:850;line-height:1.25;margin:0}
.coin-shop-product p{font-size:11px;color:#becdb8;margin:0;line-height:1.4}
.coin-shop-product .coin-shop-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap}
.coin-shop-product .coin-shop-price{font-weight:850;color:#d0fa9a;font-size:13px}
.coin-shop-product .coin-shop-stock{font-size:10px;color:#b0c8ac}
.coin-shop-product .coin-shop-stock.is-out{color:#eda897}
.coin-shop-note{font-size:11px;color:#a6c69f;line-height:1.55;margin:0}
.coin-shop-history{border-top:1px solid #385137;padding-top:10px}
.coin-shop-history summary{cursor:pointer;font-size:13px;font-weight:800}
.coin-shop-history-list{display:grid;gap:5px;margin-top:10px}
.coin-shop-history-list a{color:#c6fa9e}
@media(max-width:520px){.coin-shop-products{grid-template-columns:1fr}.coin-shop-product{grid-template-columns:90px minmax(0,1fr);column-gap:10px}.coin-shop-product .coin-shop-image{grid-row:1/5;height:92px}.coin-shop-product .coin-shop-foot{align-items:start}}
@media(prefers-reduced-motion:reduce){#coinShopDialog::backdrop{backdrop-filter:none}}


/* BALI COIN: true two-sided CSS 3D cylinder, without WebGL or server polling. */
.coin-shop-head{display:grid;grid-template-columns:var(--coin-size) minmax(0,1fr) auto;align-items:center;gap:clamp(10px,2.5vw,17px);--coin-size:clamp(83px,20vw,124px)}
.coin-shop-heading{min-width:0}
.coin-shop-coin-stage{display:block;position:relative;box-sizing:border-box;width:var(--coin-size);height:var(--coin-size);perspective:540px;perspective-origin:50% 50%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:5px}
.coin-shop-coin-stage:active{cursor:grabbing}
.coin-shop-coin-stage:focus-visible{outline:2px solid #c2f985;border-radius:50%}
.coin-shop-coin-stage::before{content:"";position:absolute;inset:18%;border-radius:50%;background:#040903;filter:blur(13px);transform:translateY(12%)}
.coin-shop-coin-rotor{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;--coin-start:0deg;animation:bali-coin-rotate 13s linear infinite}
.coin-shop-coin-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-image:url('/assets/bali-coin-atlas-hd.webp');background-repeat:no-repeat;background-size:200% 100%;box-shadow:inset 0 0 1px #ffe19c30}
.coin-shop-coin-front{background-position:left center;transform:translateZ(calc(var(--coin-size)*.034))}
.coin-shop-coin-back{background-position:right center;transform:rotateY(180deg) translateZ(calc(var(--coin-size)*.034))}
/* Metallic reflection lives strictly inside the circular artwork. It sweeps
   across whichever side faces the visitor, synchronized with the 13s turn. */
.coin-shop-coin-face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(111deg,
    transparent 35%,
    rgba(254,176,49,.08) 41%,
    rgba(255,215,125,.3) 46%,
    rgba(255,247,200,.5) 49%,
    rgba(255,255,246,.58) 50%,
    rgba(255,235,160,.44) 52%,
    transparent 62%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:100% 50%;
  mix-blend-mode:screen;
  opacity:0;
  animation:bali-coin-metallic-shine 13s linear infinite;
  will-change:background-position,opacity;
}
.coin-shop-coin-back::after{animation-delay:-6.5s}
@keyframes bali-coin-metallic-shine{
  0%{background-position:100% 50%;opacity:0}
  4%{background-position:84% 50%;opacity:.5}
  11%{background-position:40% 50%;opacity:.96}
  19%{background-position:0% 50%;opacity:0}
  20%,100%{background-position:100% 50%;opacity:0}
}
#coinShopDialog:not([open]) .coin-shop-coin-face::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .coin-shop-coin-face::after{
    animation:none;
    will-change:auto;
    opacity:.13;
    background-position:47% 50%;
  }
}
.coin-shop-coin-edge{position:absolute;top:50%;left:50%;box-sizing:border-box;width:calc(var(--coin-size)*.065);height:calc(var(--coin-size)*.0695);backface-visibility:visible;transform:translate(-50%,-50%) rotateZ(var(--coin-sector)) translateY(calc(var(--coin-size)*-.486)) rotateX(90deg);background:repeating-linear-gradient(90deg,#5b270f 0 1px,#d48034 1px 2px,#f4ba68 2px 3px,#6d3418 3px 4px);filter:brightness(var(--edge-light,1));border-block:1px solid #a8642a}
@keyframes bali-coin-rotate{from{transform:rotateY(var(--coin-start)) rotateX(9deg)}to{transform:rotateY(calc(var(--coin-start) + 360deg)) rotateX(9deg)}}
#coinShopDialog:not([open]) .coin-shop-coin-rotor{animation-play-state:paused}
@media(max-width:420px){.coin-shop-head{--coin-size:clamp(76px,22vw,94px);gap:9px}.coin-shop-eyebrow{font-size:8px;letter-spacing:.11em}.coin-shop-head h2{font-size:clamp(20px,6.1vw,26px);letter-spacing:.025em}.coin-shop-head p{font-size:11px;line-height:1.4}.coin-shop-close{min-width:34px;min-height:34px}}
@media(prefers-reduced-motion:reduce){.coin-shop-coin-rotor{animation:none;transform:rotateY(-16deg) rotateX(9deg);will-change:auto}}


/* 27 Oct 2026: compact COIN SHOP layout and clean mobile coin artwork. */
#coinShopDialog{
  width:min(94vw,648px);
  max-width:648px;
  max-height:min(89dvh,780px);
  overflow:hidden;
}
#coinShopDialog .coin-shop-layout{
  box-sizing:border-box;
  min-width:0;
  max-height:min(88dvh,768px);
  padding:clamp(12px,2vw,18px);
  gap:clamp(9px,1.5dvh,13px);
}
#coinShopDialog .coin-shop-head{
  --coin-size:clamp(82px,14vw,104px);
  grid-template-columns:var(--coin-size) minmax(0,1fr) 36px;
  gap:clamp(8px,1.5vw,13px);
  align-items:center;
  min-width:0;
}
#coinShopDialog .coin-shop-heading{min-width:0}
#coinShopDialog .coin-shop-eyebrow{
  display:block;
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.11em;
}
#coinShopDialog .coin-shop-head h2{
  margin:3px 0 0;
  font-size:clamp(22px,3vw,29px);
  line-height:1.05;
  letter-spacing:.025em;
  overflow-wrap:anywhere;
}
#coinShopDialog .coin-shop-head p{
  margin:5px 0 0;
  font-size:clamp(11px,1.2vw,12px);
  line-height:1.38;
  overflow-wrap:anywhere;
}
#coinShopDialog #coinShopClose{
  width:36px;
  height:36px;
  min-width:0;
  min-height:0;
  padding:0;
  display:grid;
  place-items:center;
  font-size:25px;
  line-height:1;
  align-self:start;
}
#coinShopDialog .coin-shop-balance{
  min-width:0;
  padding:10px 12px;
  gap:5px 10px;
  flex-wrap:wrap;
  font-size:12px;
}
#coinShopDialog .coin-shop-balance strong{
  font-size:clamp(14px,2.2vw,17px);
  overflow-wrap:anywhere;
}
#coinShopDialog .coin-shop-products{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
#coinShopDialog .coin-shop-product{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  align-content:start;
  gap:5px 10px;
  padding:9px;
  min-width:0;
}
#coinShopDialog .coin-shop-product .coin-shop-image{
  grid-column:1;
  grid-row:1/4;
  width:100%;
  height:94px;
  align-self:start;
}
#coinShopDialog .coin-shop-product h3{
  grid-column:2;
  grid-row:1;
  font-size:13px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
#coinShopDialog .coin-shop-product p{
  grid-column:2;
  grid-row:2;
  font-size:11px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#coinShopDialog .coin-shop-foot{
  grid-column:2;
  grid-row:3;
  align-self:end;
  gap:3px 9px;
}
#coinShopDialog .coin-shop-price{font-size:12px;line-height:1.25}
#coinShopDialog .coin-shop-stock{font-size:10px;line-height:1.25}
#coinShopDialog .coin-shop-note{font-size:11px;line-height:1.45}
#coinShopDialog .coin-shop-history{padding-top:9px}
#coinShopDialog .coin-shop-history summary{font-size:12px}
#coinShopDialog #coinShopReload{
  box-sizing:border-box;
  width:100%;
  min-height:40px;
  padding:9px 12px;
  font:650 12px/1.3 Inter,Manrope,sans-serif;
}
@media(max-width:620px){
  #coinShopDialog{width:min(96vw,460px);max-height:90dvh}
  #coinShopDialog .coin-shop-layout{max-height:89dvh;padding:12px;gap:10px}
  #coinShopDialog .coin-shop-products{grid-template-columns:minmax(0,1fr)}
  #coinShopDialog .coin-shop-product{
    grid-template-columns:clamp(76px,22vw,94px) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    gap:5px 10px;
    padding:9px;
  }
  #coinShopDialog .coin-shop-product .coin-shop-image{height:clamp(76px,22vw,94px)}
}
@media(max-width:767px){
  /* Remove the unwanted green circular halo on touch devices.
     Coin faces, gold rim and automatic rotation remain untouched. */
  #coinShopDialog .coin-shop-coin-stage,
  #coinShopDialog .coin-shop-coin-stage:focus-visible{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  #coinShopDialog .coin-shop-coin-stage::before{display:none!important}
}
@media(max-width:420px){
  #coinShopDialog .coin-shop-head{
    --coin-size:clamp(64px,19vw,78px);
    grid-template-columns:var(--coin-size) minmax(0,1fr) 30px;
    gap:8px;
  }
  #coinShopDialog #coinShopClose{width:30px;height:32px;font-size:23px}
  #coinShopDialog .coin-shop-head h2{font-size:clamp(19px,6vw,24px);letter-spacing:0}
  #coinShopDialog .coin-shop-eyebrow{font-size:8px;letter-spacing:.075em}
  #coinShopDialog .coin-shop-head p{font-size:10.5px;line-height:1.35}
  #coinShopDialog .coin-shop-balance{padding:9px 10px}
  #coinShopDialog .coin-shop-note{font-size:10.5px}
}

/* Higher resolution source; preserve crisp detail without pixelated nearest-neighbour resampling. */
#coinShopDialog .coin-shop-coin-face{image-rendering:auto;-webkit-transform-style:preserve-3d;}


/* BALI COIN 2026-10-27 · museum-lit minted metal and natural mechanical movement.
   No external 3D library, camera, image polling or Firebase calls.
   Retains the approved diameter, thin profile, and original double-sided art. */
#coinShopDialog .coin-shop-coin-stage{
  perspective:680px;
  perspective-origin:50% 47%;
  isolation:isolate;
}
#coinShopDialog .coin-shop-coin-rotor{
  animation:bali-coin-natural-rotation 14s linear infinite;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  will-change:transform;
}
#coinShopDialog .coin-shop-coin-face{
  box-sizing:border-box;
  border:1px solid rgba(255,201,98,.26);
  filter:contrast(1.085) saturate(1.13);
  box-shadow:inset 0 0 1px rgba(255,237,169,.50),
    inset 0 0 3px rgba(80,32,4,.18);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#coinShopDialog .coin-shop-coin-face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 29% 19%,rgba(255,244,190,.27),transparent 51%),
    linear-gradient(116deg,rgba(25,9,0,.31),transparent 30%,rgba(255,211,118,.14) 51%,transparent 66%,rgba(30,10,1,.27));
  mix-blend-mode:soft-light;
  opacity:.78;
}
#coinShopDialog .coin-shop-coin-face::after{
  background:linear-gradient(108deg,
    transparent 35%,
    rgba(217,129,35,.025) 43%,
    rgba(255,220,154,.11) 47%,
    rgba(255,249,213,.38) 50%,
    rgba(255,220,141,.16) 53%,
    transparent 62%);
  background-size:270% 100%;
  mix-blend-mode:screen;
  animation:bali-coin-natural-glint 14s linear infinite;
}
#coinShopDialog .coin-shop-coin-back::after{animation-delay:-7s}
#coinShopDialog .coin-shop-coin-edge{
  width:calc(var(--coin-size)*.04362 + .3px);
  height:calc(var(--coin-size)*.0695);
  transform:translate(-50%,-50%) rotateZ(var(--coin-sector))
    translateY(calc(var(--coin-size)*-.489)) rotateX(90deg);
  border:0;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(52,26,6,.8) 0px,
      rgba(251,202,102,.75) .9px,
      rgba(127,61,16,.92) 2px,
      rgba(249,201,95,.69) 3px,
      rgba(83,37,7,.83) 4px),
    linear-gradient(180deg,#ffe0a0 0%,#c17a2a 15%,#64310d 44%,#d69338 65%,#e9b560 86%,#59320d 100%);
  background-blend-mode:multiply;
  box-shadow:inset 0 1px rgba(255,234,179,.52),
    inset 0 -1px rgba(53,21,2,.72);
  filter:brightness(var(--edge-light,1));
}
@keyframes bali-coin-natural-rotation{
  0%{transform:rotateY(var(--coin-start)) rotateX(-7deg) rotateZ(-1.8deg)}
  50%{transform:rotateY(calc(var(--coin-start) + 180deg)) rotateX(6deg) rotateZ(1.8deg)}
  100%{transform:rotateY(calc(var(--coin-start) + 360deg)) rotateX(-7deg) rotateZ(-1.8deg)}
}
@keyframes bali-coin-natural-glint{
  0%,4%{background-position:100% 50%;opacity:0}
  7%{background-position:85% 50%;opacity:.2}
  14%{background-position:47% 50%;opacity:.72}
  20%{background-position:5% 50%;opacity:.12}
  25%,100%{background-position:0% 50%;opacity:0}
}
#coinShopDialog:not([open]) .coin-shop-coin-rotor,
#coinShopDialog:not([open]) .coin-shop-coin-face::after{
  animation-play-state:paused;
}
#coinShopDialog .coin-shop-coin-stage.is-interacting .coin-shop-coin-face::after{
  animation-play-state:paused;
  opacity:.19;
}
@media(prefers-reduced-motion:reduce){
  /* The owner explicitly requests a constant-speed, continuous revolution.
     Keep the same 14-second pace even in reduced-motion environments. */
  #coinShopDialog .coin-shop-coin-rotor{
    animation:bali-coin-natural-rotation 14s linear infinite!important;
    transform:none;
    will-change:transform;
  }
  #coinShopDialog .coin-shop-coin-stage.is-interacting .coin-shop-coin-rotor{
    animation:none!important;
  }
  #coinShopDialog .coin-shop-coin-face::after{
    animation:none!important;
    opacity:.12!important;
    background-position:50% 50%;
  }
}

/* BALI COIN WebGL: physically-lit material with CSS fallback. */
#coinShopDialog .coin-shop-coin-stage .coin-shop-metal-canvas{
  box-sizing:border-box;
  display:block;
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
#coinShopDialog .coin-shop-coin-stage .coin-shop-metal-canvas:active{cursor:grabbing}
#coinShopDialog .coin-shop-coin-stage.coin-shop-webgl-ready .coin-shop-coin-rotor{
  visibility:hidden!important;
  animation-play-state:paused!important;
  pointer-events:none;
}


/* 28 Oct · Shared friction-based swipe motion controls the transform.
   Do not let the old CSS timeline fight the JS 3D gesture controller.
   The latter runs continuously and keeps the base angular speed nonzero. */
#coinShopDialog .coin-shop-coin-stage .coin-shop-coin-rotor{
  animation:none!important;
  will-change:transform;
}