/* ОРИОН КАТАКОМБЫ · попап сундука карты (js/chest.js): небольшая карточка по центру поверх затемнённой карты.
   Сундук рисуется на холсте .ch-fx внутри карточки; барабаны всплывают поверх середины сундука. Адаптивно, safe-area. */
#chestview{position:fixed;inset:0;z-index:9700;display:none;align-items:center;justify-content:center;
  background:rgba(4,3,6,.66);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);user-select:none;-webkit-user-select:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#f3ead8;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));}
#chestview.show{display:flex;}
#chestview .ch-card{position:relative;width:min(460px,100%);height:min(540px,100%);overflow:hidden;border-radius:16px;
  background:radial-gradient(90% 70% at 50% 58%,#3a2612 0%,#1c120a 55%,#0e0906 100%);
  border:1px solid rgba(232,184,105,.45);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 70px rgba(0,0,0,.75),inset 0 0 40px rgba(0,0,0,.55);
  animation:chPop .32s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes chPop{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:none}}
#chestview.show{animation:chFade .25s ease both;}
#chestview.closing{animation:chFadeOut .3s ease both;pointer-events:none;}
#chestview.closing .ch-card{animation:chOut .28s cubic-bezier(.5,0,.8,.4) both;}
@keyframes chFade{from{opacity:0}to{opacity:1}}
@keyframes chFadeOut{from{opacity:1}to{opacity:0}}
@keyframes chOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.88) translateY(18px)}}
#chestview .ch-x{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(232,184,105,.35);background:rgba(14,10,7,.7);color:#e8d3a6;font:700 14px/1 inherit;}
#chestview .ch-x:hover{border-color:#e8b869;color:#fff;}
/* незабранный сундук: большая светящаяся иконка справа под панелью билетов (вращается наша модель, chest_spin.webp) */
.chest-pending{position:fixed;right:calc(18px + env(safe-area-inset-right));top:calc(var(--top,64px) + 10px + env(safe-area-inset-top));z-index:30;
  width:92px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  font:800 12px/1 -apple-system,"Segoe UI",sans-serif;letter-spacing:.8px;color:#ffe3a6;text-transform:uppercase;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.8);}
.chest-pending[hidden]{display:none;}
.chest-pending::before{content:'';position:absolute;left:50%;top:40px;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,120,.75) 0%,rgba(255,170,60,.35) 38%,rgba(255,150,40,0) 70%);animation:chGlow 1.6s ease-in-out infinite;}
.chest-pending i{position:relative;width:84px;height:84px;background:url(../assets/chest/chest_spin.webp) 0 0/2400% 100% no-repeat;   /* кадр 0 стрипа — статичный ракурс */
  transform-origin:50% 90%;animation:chHop 2.2s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));}
.chest-pending span{position:relative;padding:3px 9px;border-radius:10px;background:rgba(20,13,6,.85);border:1px solid rgba(232,184,105,.6);}
.chest-pending b{position:absolute;top:2px;right:4px;min-width:20px;padding:3px 6px;border-radius:10px;background:#c0392b;color:#fff;font-size:11px;text-align:center;box-shadow:0 0 0 2px #1a0e06;}
.chest-pending b:empty{display:none;}
.chest-pending:hover i{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) brightness(1.12);}
/* подпрыгивает раз в ~2 с: присел → прыжок → приземлился с пружинкой */
@keyframes chHop{0%,52%,100%{transform:none}58%{transform:scaleY(.86) scaleX(1.08)}70%{transform:translateY(-16px) scaleY(1.06) scaleX(.96)}82%{transform:scaleY(.9) scaleX(1.06)}90%{transform:scaleY(1.03)}}
@keyframes chGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@media (max-height:460px){ .chest-pending{width:72px;top:calc(var(--top,52px) + 4px)} .chest-pending i{width:62px;height:62px} .chest-pending::before{top:30px;width:92px;height:92px} }
#chestview .ch-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
#chestview .ch-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:14px 14px 14px;box-sizing:border-box;}
#chestview .ch-head{display:flex;align-items:center;gap:10px;min-height:26px;}
#chestview .ch-title{font:800 clamp(15px,2.4vw,19px)/1.1 inherit;letter-spacing:1.5px;text-transform:uppercase;
  background:linear-gradient(180deg,#fff2c8,#e8b869 55%,#a8742c);-webkit-background-clip:text;background-clip:text;color:transparent;}
#chestview .ch-srv{font:700 11px/1 inherit;letter-spacing:1px;color:#e8b869;border:1px solid rgba(232,184,105,.4);border-radius:6px;padding:4px 7px;
  background:rgba(20,14,8,.6);cursor:pointer;}
#chestview .ch-srv.lock{cursor:default;opacity:.7;}

/* сцена: сундук на холсте по центру; барабаны — поверх середины сундука, появляются при открытии */
#chestview .ch-stage{position:relative;flex:1;width:100%;min-height:150px;cursor:pointer;}
#chestview .ch-reels{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);display:flex;justify-content:center;gap:10px;
  width:calc(100% - 20px);max-width:420px;opacity:0;pointer-events:none;transition:opacity .2s ease;}
#chestview .ch-stage.rev .ch-reels{opacity:1;}
#chestview{--cw:clamp(58px,15vmin,76px);--ch:var(--cw);}
/* карточка предмета: окно барабана + название + редкость */
#chestview .ch-reel{flex:1 1 0;min-width:0;max-width:128px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
  padding:10px 8px 9px;border-radius:14px;border:1px solid rgba(232,184,105,.28);
  background:linear-gradient(180deg,rgba(36,25,15,.95),rgba(14,10,7,.95));box-shadow:0 10px 24px rgba(0,0,0,.55);
  opacity:0;transform:scale(.5) translateY(24px);transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.5,.4,1),border-color .3s,box-shadow .3s;}
#chestview .ch-reel.lit{opacity:1;transform:none;}
#chestview .ch-reel.stop{border-color:color-mix(in srgb,var(--r) 75%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--r) 35%,transparent),0 10px 24px rgba(0,0,0,.55);}
#chestview .ch-win{position:relative;width:var(--cw);height:var(--ch);overflow:hidden;border-radius:10px;flex:none;
  background:radial-gradient(75% 75% at 50% 42%,color-mix(in srgb,var(--r,#e8b869) 22%,#1a120b),#0c0806);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 6px 14px rgba(0,0,0,.6);}
#chestview .ch-win::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.85) 0%,transparent 24%,transparent 76%,rgba(8,6,4,.85) 100%);transition:opacity .25s;}
#chestview .ch-reel.stop .ch-win::after{opacity:0;}
#chestview .ch-strip{position:absolute;left:0;top:0;width:100%;will-change:transform;}
#chestview .ch-cell{position:relative;width:var(--cw);height:var(--ch);display:flex;align-items:center;justify-content:center;}
#chestview .ch-cell i{display:block;width:62%;height:62%;background:center/contain no-repeat;image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));}
#chestview .ch-cell b{position:absolute;right:6%;bottom:6%;font:800 12px/1 inherit;color:#fff;padding:2px 4px;border-radius:5px;
  background:rgba(0,0,0,.55);}
#chestview .ch-lbl{margin-top:8px;width:100%;min-height:2.6em;text-align:center;opacity:0;transition:opacity .3s ease;}
#chestview .ch-reel.stop .ch-lbl{opacity:1;}
#chestview .ch-lbl .n{font:600 11px/1.25 inherit;color:#f3ead8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;min-height:2.5em;}
#chestview .ch-lbl .t{margin-top:3px;font:800 9px/1.2 inherit;letter-spacing:.8px;text-transform:uppercase;color:var(--r);}

#chestview .ch-hint{font:600 13px/1.2 inherit;color:#e8d3a6;letter-spacing:.5px;min-height:1.2em;text-shadow:0 1px 3px #000;transition:opacity .3s;}
#chestview .ch-hint.off{opacity:0;}

/* бонусы: монетка Лавки + ивентовые */
#chestview .ch-bonus{position:absolute;left:8px;right:8px;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;pointer-events:none;}
#chestview .ch-chip{display:flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 4px;border-radius:16px;
  background:rgba(22,15,9,.94);border:1px solid rgba(232,184,105,.4);font:700 11px/1 inherit;color:#f6e3b8;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.5);animation:chChip .45s cubic-bezier(.2,1.6,.4,1) both;}
#chestview .ch-chip.ev{border-color:rgba(240,160,78,.55);}
#chestview .ch-chip i{width:22px;height:22px;background:center/contain no-repeat;image-rendering:pixelated;flex:none;}
#chestview .ch-chip span{overflow:hidden;text-overflow:ellipsis;}
#chestview .ch-chip b{color:#fff;}
@keyframes chChip{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:none}}

#chestview .ch-act{display:flex;gap:10px;margin-top:6px;min-height:46px;align-items:center;}
#chestview .ch-btn{cursor:pointer;color:#e8b869;font:800 15px/1 inherit;letter-spacing:1px;min-height:44px;
  border:7px solid transparent;border-image:url(../assets/ui/frame/btn.png?v2) 6 fill / 7px / 0 stretch;background:none;
  padding:12px 38px;text-shadow:0 1px 2px rgba(0,0,0,.7);filter:saturate(1.12) brightness(1.06);}
#chestview .ch-btn:hover{border-image-source:url(../assets/ui/frame/btn_over.png?v2);}
#chestview .ch-btn:active{border-image-source:url(../assets/ui/frame/btn_down.png?v2);transform:translateY(1px);}
#chestview .ch-btn[hidden]{display:none;}

/* низкий landscape-телефон: карточка во всю высоту, всё плотнее */
@media (max-height:460px){
  #chestview{--cw:clamp(46px,13vh,62px);}
  #chestview .ch-reel{padding:7px 6px 6px;} #chestview .ch-lbl{margin-top:5px;min-height:3.2em;}
  #chestview .ch-card{width:min(440px,100%);}
  #chestview .ch-ui{padding:8px 12px 8px;}
  #chestview .ch-act{min-height:42px;margin-top:2px;}
}