/* Hungry Wars Cashier v106 — premium illustrated shop */
#modal[data-view="cashier"]{
  --hw106-gold:#f0b73b;
  --hw106-gold-2:#ffd56e;
  --hw106-brown:#5a220a;
  --hw106-brown-2:#2c1006;
  --hw106-paper:#fff3cf;
  --hw106-paper-2:#f3d892;
  --hw106-cream:#fff8e7;
  --hw106-green:#22bb2a;
  --hw106-green-2:#118d18;
}
#modal[data-view="cashier"] > .modal-window{
  width:min(1160px, calc(100vw - 42px)) !important;
  max-width:1160px !important;
  max-height:calc(100vh - 28px) !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:26px !important;
  border:3px solid #dc9220 !important;
  background:linear-gradient(180deg, #5b220a 0%, #2f1207 100%) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,211,101,.55) !important;
}
#modal[data-view="cashier"] .modal-close{
  top:12px !important; right:12px !important;
  width:52px !important; height:52px !important;
  border-radius:50% !important;
  border:3px solid #ffd772 !important;
  background:linear-gradient(180deg, #ff5d4f 0%, #ca2016 72%, #8f160f 100%) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.45) !important;
  color:#fff !important;
}
#modal[data-view="cashier"] .modal-close::before{font-size:20px !important; font-weight:1000 !important;}
#modal[data-view="cashier"] .hw-cashier-v106{display:flex; flex-direction:column; min-height:640px; background:transparent;}
#modal[data-view="cashier"] .hwc106-top{
  position:relative;
  min-height:154px;
  padding:20px 220px 18px 270px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,222,123,.22), transparent 34%),
    linear-gradient(180deg, #632608 0%, #441706 52%, #2d0f05 100%);
  border-bottom:2px solid #d88518;
  overflow:hidden;
}
#modal[data-view="cashier"] .hwc106-top::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,202,98,.0) 0%, rgba(255,202,98,.07) 35%, rgba(255,248,220,.09) 50%, rgba(255,202,98,.05) 65%, rgba(255,202,98,.0) 100%);
  pointer-events:none;
}
#modal[data-view="cashier"] .hwc106-brand{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  padding:4px 16px; border-radius:999px;
  border:1px solid rgba(255,214,112,.55);
  background:linear-gradient(180deg, #8c4a13, #5d2409);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  color:#ffe8aa; font-size:12px; font-weight:1000; letter-spacing:.8px; z-index:2;
}
#modal[data-view="cashier"] .hwc106-heading{position:relative; z-index:2; text-align:center;}
#modal[data-view="cashier"] .hwc106-heading h2{margin:20px 0 6px; color:#ffefb7; font-size:34px; font-weight:1000; letter-spacing:.4px;}
#modal[data-view="cashier"] .hwc106-heading p{margin:0; color:#f5d48a; font-size:13px; font-weight:800;}
#modal[data-view="cashier"] .hwc106-hero-art{
  position:absolute; left:18px; bottom:0; width:220px; height:146px;
  display:flex; align-items:flex-end; justify-content:center; z-index:2;
}
#modal[data-view="cashier"] .hwc106-hero-art img{
  max-width:100%; max-height:150px; object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.36));
}
#modal[data-view="cashier"] .hwc106-balance{
  position:absolute; right:24px; top:44px; width:200px; min-height:88px;
  display:flex; align-items:center; gap:12px; padding:14px 16px; box-sizing:border-box;
  border-radius:18px; border:2px solid #d69425;
  background:linear-gradient(180deg, rgba(255,214,119,.15), rgba(94,37,10,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px rgba(0,0,0,.18);
  z-index:2;
}
#modal[data-view="cashier"] .hwc106-balance-icon{width:52px; height:52px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
#modal[data-view="cashier"] .hwc106-balance-icon img,
#modal[data-view="cashier"] .hwc106-balance-icon span{max-width:52px; max-height:52px; object-fit:contain; font-size:42px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));}
#modal[data-view="cashier"] .hwc106-balance small{display:block; color:#f7d892; font-size:10px; font-weight:1000; letter-spacing:1px;}
#modal[data-view="cashier"] .hwc106-balance b{display:block; color:#fff2c3; font-size:18px; line-height:1.15; font-weight:1000;}
#modal[data-view="cashier"] .hwc106-tabs{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;
  padding:10px 16px 12px; background:linear-gradient(180deg, #4b1b08 0%, #3a1407 100%);
  border-bottom:2px solid #c97d15;
}
#modal[data-view="cashier"] .hwc106-tabs button{
  position:relative; height:66px; border-radius:18px; border:2px solid #b76412;
  background:linear-gradient(180deg, #66280a 0%, #371206 100%);
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#fff1ca; font-size:15px; font-weight:1000; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #180803;
  transition:transform .15s ease, filter .15s ease;
}
#modal[data-view="cashier"] .hwc106-tabs button:hover{transform:translateY(-1px); filter:brightness(1.07);}
#modal[data-view="cashier"] .hwc106-tabs button.active{
  color:#612c0a; border-color:#f5c557;
  background:linear-gradient(180deg, #fff8d3 0%, #ffd866 55%, #f0b339 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65), 0 3px 0 #91510d, 0 0 16px rgba(255,196,58,.22);
}
#modal[data-view="cashier"] .hwc106-tabs button.active::after{
  content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:#f3b638; border-right:2px solid #b46811; border-bottom:2px solid #b46811;
}
#modal[data-view="cashier"] .hwc106-tabs .tabico{width:30px; height:30px; object-fit:contain; font-size:24px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));}
#modal[data-view="cashier"] .hwc106-catalog{
  flex:1;
  background:linear-gradient(180deg, #fff3cf 0%, #f3da97 100%);
  padding:18px 22px 12px;
}
#modal[data-view="cashier"] .hwc106-catalog-head{
  display:flex; align-items:end; justify-content:space-between; gap:20px;
  padding:0 6px 14px; border-bottom:1px solid rgba(133,71,15,.18);
}
#modal[data-view="cashier"] .hwc106-catalog-head small{display:block; color:#ab620f; font-size:10px; font-weight:1000; letter-spacing:1.4px;}
#modal[data-view="cashier"] .hwc106-catalog-head h3{margin:4px 0 0; color:#612d0a; font-size:30px; line-height:1;}
#modal[data-view="cashier"] .hwc106-catalog-head p{margin:0; max-width:620px; text-align:right; color:#7a4b22; font-size:12px; font-weight:800; line-height:1.4;}
#modal[data-view="cashier"] .hwc106-scroll{max-height:430px; overflow:auto; padding:14px 4px 6px;}
#modal[data-view="cashier"] .hwc106-scroll::-webkit-scrollbar{width:10px; height:10px;}
#modal[data-view="cashier"] .hwc106-scroll::-webkit-scrollbar-thumb{background:#b77822; border-radius:10px; border:2px solid #f4dd9a;}
#modal[data-view="cashier"] .hwc106-grid{display:grid; gap:14px;}
#modal[data-view="cashier"] .four-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
#modal[data-view="cashier"] .coins-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
#modal[data-view="cashier"] .chests-grid{grid-template-columns:repeat(5, minmax(0, 1fr));}
#modal[data-view="cashier"] .hwc106-card{
  position:relative; min-width:0; min-height:238px; box-sizing:border-box;
  padding:14px 12px 14px; text-align:center; overflow:hidden;
  border:2px solid #e0a243; border-radius:20px;
  background:linear-gradient(180deg, #fffaf0 0%, #fff3d4 72%, #f5d99a 100%);
  box-shadow:0 4px 0 #c27d1c, 0 12px 22px rgba(92,51,12,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .15s ease, box-shadow .15s ease;
}
#modal[data-view="cashier"] .hwc106-card::before{
  content:""; position:absolute; left:-28%; top:-22%; width:150%; height:55%;
  background:linear-gradient(110deg, transparent 36%, rgba(255,255,255,.5) 50%, transparent 63%);
  transform:rotate(-8deg); pointer-events:none;
}
#modal[data-view="cashier"] .hwc106-card:hover{transform:translateY(-3px); box-shadow:0 5px 0 #c27d1c, 0 15px 26px rgba(92,51,12,.19), inset 0 1px 0 rgba(255,255,255,.95);}
#modal[data-view="cashier"] .hwc106-ribbon{
  position:absolute; right:-31px; top:16px; z-index:4; width:116px; padding:5px 0;
  transform:rotate(42deg); background:linear-gradient(180deg, #f75334, #bb1d14);
  color:#fff7cf; font-size:9px; font-weight:1000; box-shadow:0 2px 5px rgba(0,0,0,.28);
}
#modal[data-view="cashier"] .hwc106-pack-art{height:104px; margin:0 auto 2px; display:flex; align-items:center; justify-content:center;}
#modal[data-view="cashier"] .hwc106-pack-art img{max-width:132px; max-height:100px; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(109,58,13,.22));}
#modal[data-view="cashier"] .hwc106-card.medium .hwc106-pack-art img{max-width:152px; max-height:104px;}
#modal[data-view="cashier"] .hwc106-card.large .hwc106-pack-art img{max-width:148px; max-height:108px;}
#modal[data-view="cashier"] .hwc106-value{color:#612d0a; font-size:27px; font-weight:1000; line-height:1;}
#modal[data-view="cashier"] .hwc106-unit{margin-top:3px; color:#7f4c22; font-size:11px; font-weight:900;}
#modal[data-view="cashier"] .hwc106-offer-info{min-height:42px; margin-top:8px; display:flex; flex-direction:column; justify-content:center; gap:2px; font-size:11px;}
#modal[data-view="cashier"] .hwc106-offer-info b{color:#d53320; font-size:13px;}
#modal[data-view="cashier"] .hwc106-offer-info span{color:#825329; font-weight:800;}
#modal[data-view="cashier"] .hwc106-card button{
  height:44px; min-width:145px; max-width:92%; padding:0 18px;
  border:2px solid #128c1d; border-radius:13px;
  background:linear-gradient(180deg, #57e147 0%, #20b92e 60%, #149220 100%);
  color:#fff; font-size:14px; font-weight:1000; cursor:pointer;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #0d6d15, 0 7px 12px rgba(16,108,25,.18);
  text-shadow:0 1px #0d6c16;
}
#modal[data-view="cashier"] .hwc106-card button:hover{filter:brightness(1.06); transform:translateY(-1px);}
#modal[data-view="cashier"] .hwc106-card button:active{transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 1px 0 #0d6d15;}
#modal[data-view="cashier"] .coins-grid .hwc106-card{min-height:226px;}
#modal[data-view="cashier"] .coins-grid .hwc106-pack-art{height:86px; margin-bottom:0;}
#modal[data-view="cashier"] .coins-grid .hwc106-pack-art img{max-width:132px; max-height:82px;}
#modal[data-view="cashier"] .coins-grid .hwc106-card.large .hwc106-pack-art img{max-width:148px; max-height:86px;}
#modal[data-view="cashier"] .coins-grid .hwc106-value{font-size:24px;}
#modal[data-view="cashier"] .hwc106-chest-art{height:110px; display:flex; align-items:center; justify-content:center;}
#modal[data-view="cashier"] .hwc106-chest-art img{max-width:132px; max-height:104px; object-fit:contain; filter:drop-shadow(0 10px 8px rgba(98,45,5,.25));}
#modal[data-view="cashier"] .chest-name{font-size:17px; white-space:nowrap;}
#modal[data-view="cashier"] .chest-card{min-height:248px; padding-left:8px; padding-right:8px;}
#modal[data-view="cashier"] .chest-card.wood{background:linear-gradient(180deg, #fff9e7, #f8e4bd);}
#modal[data-view="cashier"] .chest-card.silver{box-shadow:0 4px 0 #9d7d4c, 0 10px 18px rgba(64,94,145,.12), inset 0 1px 0 #fff;}
#modal[data-view="cashier"] .chest-card.gold{box-shadow:0 4px 0 #bf7616, 0 0 18px rgba(244,177,37,.22), 0 10px 18px rgba(106,57,12,.15);}
#modal[data-view="cashier"] .chest-card.diamond{box-shadow:0 4px 0 #4a7fb3, 0 0 20px rgba(49,183,255,.28), 0 10px 18px rgba(51,76,112,.18);}
#modal[data-view="cashier"] .chest-card.clan{box-shadow:0 4px 0 #985e19, 0 0 20px rgba(175,77,255,.23), 0 10px 18px rgba(81,40,109,.18);}
#modal[data-view="cashier"] .chest-card button{min-width:130px;}
#modal[data-view="cashier"] .chest-card button:disabled{
  cursor:default; background:linear-gradient(180deg, #d7b36b, #ae8242); border-color:#98703b;
  box-shadow:0 4px 0 #80592e; color:#fff1ce; text-shadow:none;
}
#modal[data-view="cashier"] .roulette-card{background:linear-gradient(180deg, #fff5d7, #ffe7a9);}
#modal[data-view="cashier"] .hwc106-roulette-art{height:86px; display:flex; align-items:center; justify-content:center;}
#modal[data-view="cashier"] .wheel-ring{
  width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:7px dashed #edb132;
  background:radial-gradient(circle, #ffea76 0 19%, #d83b32 20% 38%, #ffc54a 39% 56%, #7f2b72 57% 73%, #f4a82f 74%);
  color:#6e2b0a; font-size:22px; box-shadow:0 6px 10px rgba(87,43,8,.25), inset 0 0 0 3px #fff2ae;
}
#modal[data-view="cashier"] .hwc106-footer{
  min-height:40px; padding:8px 24px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg, #4b1c08, #301005); border-top:2px solid #c97815; color:#e7bd72; font-size:9px; font-weight:800;
}
#modal[data-view="cashier"] .hwc106-footer span:first-child{flex:1;}
#modal[data-view="cashier"] .hwc106-footer span:not(:first-child){white-space:nowrap; color:#f5d190;}
@media (max-width: 1120px){
  #modal[data-view="cashier"] > .modal-window{width:calc(100vw - 22px) !important;}
  #modal[data-view="cashier"] .hwc106-top{padding-left:220px; padding-right:198px;}
  #modal[data-view="cashier"] .chests-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width: 860px){
  #modal[data-view="cashier"] > .modal-window{max-height:calc(100vh - 12px) !important;}
  #modal[data-view="cashier"] .hwc106-top{min-height:136px; padding:22px 12px 12px 12px;}
  #modal[data-view="cashier"] .hwc106-hero-art{display:none;}
  #modal[data-view="cashier"] .hwc106-heading{padding-right:160px; text-align:left;}
  #modal[data-view="cashier"] .hwc106-heading h2{font-size:26px; margin-top:16px;}
  #modal[data-view="cashier"] .hwc106-heading p{font-size:11px;}
  #modal[data-view="cashier"] .hwc106-balance{width:156px; right:12px; top:44px; min-height:66px; padding:10px 12px;}
  #modal[data-view="cashier"] .hwc106-balance-icon{display:none;}
  #modal[data-view="cashier"] .hwc106-tabs{grid-template-columns:repeat(2, 1fr);}
  #modal[data-view="cashier"] .hwc106-catalog-head{display:block;}
  #modal[data-view="cashier"] .hwc106-catalog-head p{text-align:left; margin-top:6px;}
  #modal[data-view="cashier"] .four-grid,
  #modal[data-view="cashier"] .coins-grid,
  #modal[data-view="cashier"] .chests-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  #modal[data-view="cashier"] .hwc106-scroll{max-height:50vh;}
  #modal[data-view="cashier"] .hwc106-footer span:not(:first-child){display:none;}
}

#modal[data-view="cashier"] .hwc106-tabs .tabico{width:42px!important;height:42px!important;object-fit:contain!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35))!important;}
#modal[data-view="cashier"] .hwc106-balance-icon img{width:50px!important;height:50px!important;object-fit:contain!important;}
#modal[data-view="cashier"] .hwc106-card.jackpot{background:linear-gradient(180deg,#fff9e5 0%,#ffedb2 67%,#f2ce70 100%);box-shadow:0 4px 0 #b86d12,0 0 20px rgba(255,181,37,.28),0 12px 22px rgba(92,51,12,.17),inset 0 1px 0 #fff;}
#modal[data-view="cashier"] .hwc106-card.jackpot .hwc106-pack-art img{max-width:158px;max-height:112px;}