/* =========================================================
   GachaGo pixel theme layer
   Rollback: remove the pixel-theme.css link from templates/base.html.
   ========================================================= */

:root{
  --pixel-bg:#060018;
  --pixel-bg-2:#11072c;
  --pixel-ink:#fff8ff;
  --pixel-muted:#b9a8d8;
  --pixel-pink:#ff5aa8;
  --pixel-hot:#ff2f91;
  --pixel-lilac:#a98bff;
  --pixel-cyan:#61f0ff;
  --pixel-gold:#ffd45a;
  --pixel-line:#5c4a86;
  --pixel-panel:#15102a;
}

html{
  background: var(--pixel-bg);
  overflow-x:hidden;
}

body{
  position: relative;
  overflow-x:hidden;
  color: var(--pixel-ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,90,168,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 8%, rgba(97,240,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 30%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    linear-gradient(180deg, #08001e 0%, #0a0221 42%, #050015 100%) !important;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0;
}

.nav-blue,
.page,
.footer,
.support-fab{
  position: relative;
  z-index: 1;
}

.japan-bg-layer{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:100%;
  min-height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.jp-deco{
  position:absolute;
  display:block;
  image-rendering:pixelated;
  opacity:.32;
  filter: drop-shadow(7px 8px 0 rgba(0,0,0,.35));
  animation: jpDecoIdle 5.6s steps(5, end) infinite;
}

.jp-deco--torii{
  left:24px;
  top:150px;
  width:150px;
  height:116px;
  background:
    linear-gradient(#ff5aa8 0 0) 0 0 / 150px 16px no-repeat,
    linear-gradient(#08031a 0 0) 0 16px / 150px 8px no-repeat,
    linear-gradient(#ff5aa8 0 0) 18px 38px / 114px 14px no-repeat,
    linear-gradient(#08031a 0 0) 18px 52px / 114px 7px no-repeat,
    linear-gradient(#ff5aa8 0 0) 34px 56px / 18px 60px no-repeat,
    linear-gradient(#ff5aa8 0 0) 98px 56px / 18px 60px no-repeat,
    linear-gradient(#08031a 0 0) 28px 56px / 6px 60px no-repeat,
    linear-gradient(#08031a 0 0) 52px 56px / 6px 60px no-repeat,
    linear-gradient(#08031a 0 0) 92px 56px / 6px 60px no-repeat,
    linear-gradient(#08031a 0 0) 116px 56px / 6px 60px no-repeat;
}

.jp-deco--lantern{
  right:42px;
  top:185px;
  width:82px;
  height:126px;
  background:
    linear-gradient(#ffd45a 0 0) 30px 0 / 22px 12px no-repeat,
    linear-gradient(#08031a 0 0) 22px 12px / 38px 7px no-repeat,
    linear-gradient(#ff5aa8 0 0) 12px 20px / 58px 78px no-repeat,
    linear-gradient(#ff8eca 0 0) 24px 20px / 12px 78px no-repeat,
    linear-gradient(#c91d75 0 0) 48px 20px / 12px 78px no-repeat,
    linear-gradient(#08031a 0 0) 6px 20px / 6px 78px no-repeat,
    linear-gradient(#08031a 0 0) 70px 20px / 6px 78px no-repeat,
    linear-gradient(#08031a 0 0) 16px 98px / 50px 8px no-repeat,
    linear-gradient(#ffd45a 0 0) 32px 106px / 18px 20px no-repeat;
  animation-delay:-1s;
}

.jp-deco--capsule-a,
.jp-deco--capsule-b{
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--pixel-pink) 0 46%, #fff 46% 56%, var(--pixel-lilac) 56%);
  border:5px solid #08031a;
  box-shadow:0 0 20px rgba(255,90,168,.55);
}

.jp-deco--capsule-a{ left:13vw; top:520px; }
.jp-deco--capsule-b{ right:14vw; top:760px; animation-delay:-2s; }

.jp-deco--coin-a,
.jp-deco--coin-b{
  width:42px;
  height:42px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #fff2a0 0 7px, transparent 8px),
    linear-gradient(180deg, #ffd45a, #d99b2f);
  border:5px solid #08031a;
}

.jp-deco--coin-a{ right:9vw; top:1180px; }
.jp-deco--coin-b{ left:8vw; top:1480px; animation-delay:-3s; }

.jp-deco--spark-a,
.jp-deco--spark-b{
  width:86px;
  height:86px;
  background:
    linear-gradient(#61f0ff 0 0) 38px 0 / 10px 86px no-repeat,
    linear-gradient(#61f0ff 0 0) 0 38px / 86px 10px no-repeat,
    linear-gradient(#ff5aa8 0 0) 16px 16px / 12px 12px no-repeat,
    linear-gradient(#ffd45a 0 0) 58px 58px / 12px 12px no-repeat;
  opacity:.22;
}

.jp-deco--spark-a{ left:32px; top:1040px; }
.jp-deco--spark-b{ right:42px; top:1560px; animation-delay:-2.6s; }

@keyframes jpDecoIdle{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 -10px; }
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .16;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5000;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .18;
}

.page{
  background:
    radial-gradient(600px 260px at 50% 2%, rgba(169,139,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(6,0,24,0), rgba(6,0,24,.88));
}

.nav-blue{
  background: rgba(7, 1, 29, .84) !important;
  border-bottom: 4px solid #2b2250;
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
  backdrop-filter: none;
}

.navbar .navbar-brand,
.navbar .text-dark,
.navbar .small,
.footer .text-muted,
.footer a{
  color: var(--pixel-ink) !important;
}

.brand{
  color: var(--pixel-ink) !important;
  text-transform: uppercase;
  text-shadow: 3px 0 #28124c, -3px 0 #28124c, 0 3px #28124c, 0 -3px #28124c;
}

.brand-dot{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, var(--pixel-pink) 0 46%, #fff 47% 55%, var(--pixel-cyan) 56%);
  box-shadow:
    0 0 0 3px #0b0b24,
    4px 4px 0 var(--pixel-lilac),
    0 0 18px rgba(97,240,255,.75);
  position: relative;
}

.brand-dot::after{
  content:"";
  position:absolute;
  left: 7px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:#fff;
  box-shadow: inset 0 0 0 2px #110824;
}

.navbar-toggler{
  border-radius: 0 !important;
  background: var(--pixel-lilac) !important;
  box-shadow: 4px 4px 0 #28124c;
}

.hero{
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: grid;
  align-items: center;
  border-bottom: 5px solid #2b2250;
  background:
    linear-gradient(180deg, rgba(10,2,36,.45), rgba(10,2,36,.98)),
    radial-gradient(circle at 50% 44%, rgba(255,90,168,.20), transparent 28%),
    linear-gradient(180deg, #140935, #07001b) !important;
}

.hero::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: 76px;
  width: min(420px, 72vw);
  height: min(420px, 72vw);
  transform: translateX(-50%);
  background:
    linear-gradient(#3a2b61 0 0) 48% 12% / 24% 16% no-repeat,
    linear-gradient(#504176 0 0) 29% 30% / 20% 18% no-repeat,
    linear-gradient(#504176 0 0) 71% 30% / 20% 18% no-repeat,
    linear-gradient(#1c1636 0 0) 50% 42% / 44% 42% no-repeat,
    radial-gradient(circle at 50% 52%, #ffed82 0 9%, #ff7d2f 10% 15%, transparent 16%),
    linear-gradient(#0d0920, #0d0920);
  border: 6px solid #5d4a86;
  box-shadow:
    0 0 0 8px rgba(0,0,0,.36),
    0 30px 80px rgba(0,0,0,.5),
    inset 0 -22px 0 rgba(0,0,0,.25);
  clip-path: polygon(18% 12%, 82% 12%, 92% 38%, 80% 88%, 20% 88%, 8% 38%);
  opacity: .82;
  image-rendering: pixelated;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:76px;
  background:
    linear-gradient(90deg, #1f1a35 0 48px, #302759 48px 80px, #15112b 80px 128px) 0 0 / 128px 32px repeat-x,
    linear-gradient(90deg, #33406a 0 38px, #4d5f8e 38px 52px, #19243e 52px 96px) 0 32px / 96px 44px repeat-x;
  border-top: 5px solid #7181b8;
}

.pixel-stars{
  position:absolute;
  inset:0;
  opacity:.78;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 2px) 10% 18% / 120px 110px,
    radial-gradient(circle, #ffb8df 0 1px, transparent 2px) 70% 26% / 180px 130px,
    radial-gradient(circle, #86f8ff 0 1px, transparent 2px) 34% 10% / 150px 120px;
}

.pixel-cloud{
  position:absolute;
  width: 118px;
  height: 38px;
  background: #ff74b7;
  box-shadow:
    12px -12px 0 #bd5bb2,
    38px -22px 0 #ff8eca,
    72px -10px 0 #9c4a99,
    0 12px 0 #57285f;
  opacity:.75;
  animation: pixelCloudDrift linear both;
  animation-timeline: scroll(root);
  animation-range: 0 820px;
}

.pixel-cloud--left{ left: 7%; top: 22%; --cloud-x: -150px; }
.pixel-cloud--right{ right: 8%; top: 27%; transform: scaleX(-1); --cloud-x: 160px; }

@keyframes pixelCloudDrift{
  from{ translate:0 0; }
  to{ translate:var(--cloud-x) 0; }
}

.pixel-gacha-orb{
  position:absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pixel-pink) 0 48%, #fff 49% 55%, var(--pixel-lilac) 56%);
  box-shadow: 0 0 0 4px #09051b, 0 0 24px rgba(255,90,168,.8);
}

.pixel-gacha-orb--one{ left: 18%; top: 62%; }
.pixel-gacha-orb--two{ right: 18%; top: 18%; transform: scale(.72); }

.pixel-gacha-orb{
  animation: pixelCapsuleFloat linear both;
  animation-timeline: scroll(root);
  animation-range: 0 900px;
}

.pixel-gacha-orb--one{ --float-x: 90px; --float-y: 180px; }
.pixel-gacha-orb--two{ --float-x: -120px; --float-y: 240px; }

@keyframes pixelCapsuleFloat{
  from{ translate: 0 0; rotate: 0deg; }
  to{ translate: var(--float-x) var(--float-y); rotate: 220deg; }
}

.pixel-side-girl{
  position:absolute;
  display:none !important;
  z-index:1;
  bottom: 54px;
  width: 188px;
  height: 270px;
  image-rendering: pixelated;
  opacity:.96;
  animation: pixelGirlIdle 3.2s steps(4, end) infinite;
  filter: drop-shadow(10px 12px 0 rgba(0,0,0,.4));
}

.pixel-side-girl span{
  position:absolute;
  display:block;
  image-rendering: pixelated;
}

.girl-hair-back{
  left:42px;
  top:12px;
  width:106px;
  height:156px;
  background:
    linear-gradient(90deg, transparent 0 10px, #07030f 10px 20px, var(--girl-hair-dark) 20px 88px, #07030f 88px 98px, transparent 98px),
    linear-gradient(var(--girl-hair), var(--girl-hair-dark));
  box-shadow:
    -18px 24px 0 #07030f,
    18px 24px 0 #07030f,
    -26px 54px 0 var(--girl-hair-dark),
    26px 54px 0 var(--girl-hair-dark),
    -18px 116px 0 var(--girl-hair),
    18px 116px 0 var(--girl-hair-dark);
}

.girl-ear{
  top:0;
  width:24px;
  height:78px;
  background:var(--girl-ear);
  border:8px solid #07030f;
  box-shadow: inset 0 18px 0 rgba(255,255,255,.42);
  transform-origin: bottom center;
  animation: pixelEarWiggle 2.2s steps(3, end) infinite;
}

.girl-ear-left{
  left:44px;
  transform: rotate(-18deg);
}

.girl-ear-right{
  right:44px;
  transform: rotate(18deg);
  animation-delay:-.45s;
}

.girl-head{
  left:47px;
  top:70px;
  width:94px;
  height:92px;
  background:var(--girl-skin);
  border:8px solid #07030f;
  box-shadow:
    inset 0 -12px 0 rgba(255,132,146,.28),
    -16px 18px 0 var(--girl-hair),
    16px 18px 0 var(--girl-hair-dark);
}

.girl-bangs{
  left:50px;
  top:56px;
  width:88px;
  height:42px;
  background:
    linear-gradient(90deg, var(--girl-hair) 0 18px, #07030f 18px 26px, var(--girl-hair-light) 26px 54px, #07030f 54px 62px, var(--girl-hair-dark) 62px);
  box-shadow:
    -10px 18px 0 #07030f,
    10px 18px 0 #07030f,
    0 28px 0 var(--girl-hair);
}

.girl-eye{
  top:112px;
  width:24px;
  height:24px;
  background:
    linear-gradient(#fff 0 7px, var(--girl-eye) 7px 18px, #07030f 18px);
  border:5px solid #07030f;
  animation: pixelBlink 4.6s steps(1, end) infinite;
}

.girl-eye-left{ left:64px; }
.girl-eye-right{ right:64px; }

.girl-mouth{
  left:88px;
  top:146px;
  width:18px;
  height:10px;
  background:#ef6f86;
  box-shadow: 0 6px 0 #d84f75;
}

.girl-body{
  left:58px;
  top:168px;
  width:74px;
  height:74px;
  background:
    linear-gradient(90deg, #07030f 0 12px, var(--girl-outfit-dark) 12px 24px, var(--girl-outfit) 24px 52px, var(--girl-outfit-dark) 52px 62px, #07030f 62px),
    linear-gradient(var(--girl-outfit), var(--girl-outfit-dark));
  border:8px solid #07030f;
  box-shadow:
    0 -20px 0 var(--girl-skin),
    -22px 58px 0 #07030f,
    22px 58px 0 #07030f,
    -12px 68px 0 var(--girl-outfit),
    12px 68px 0 var(--girl-outfit-dark);
}

.girl-arm{
  top:182px;
  width:22px;
  height:76px;
  background:var(--girl-skin);
  border:7px solid #07030f;
  animation: pixelArmSwing 3s steps(3, end) infinite;
}

.girl-arm-left{ left:30px; }
.girl-arm-right{ right:30px; animation-delay:-.7s; }

.pixel-side-girl::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  bottom:0;
  height:12px;
  background:rgba(6,0,18,.55);
}

.pixel-side-girl--left{
  left: 18px;
  --girl-hair:#d8bfd1;
  --girl-hair-light:#f1dce7;
  --girl-hair-dark:#a88699;
  --girl-ear:#f0d7e3;
  --girl-skin:#ffd8cb;
  --girl-eye:#2d68c8;
  --girl-outfit:#49a9cf;
  --girl-outfit-dark:#2d7299;
}

.pixel-side-girl--right{
  right: 18px;
  transform: scaleX(-1);
  --girl-hair:#b6c8ff;
  --girl-hair-light:#dce5ff;
  --girl-hair-dark:#778ad8;
  --girl-ear:#b5a7ef;
  --girl-skin:#f0b88f;
  --girl-eye:#c83945;
  --girl-outfit:#756bd5;
  --girl-outfit-dark:#3e367e;
  animation-name: pixelGirlIdleRight;
}

@keyframes pixelGirlIdle{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 -12px; }
}

@keyframes pixelGirlIdleRight{
  0%,100%{ translate: 0 0; transform: scaleX(-1); }
  50%{ translate: 0 -12px; transform: scaleX(-1); }
}

@keyframes pixelEarWiggle{
  0%,100%{ rotate: 0deg; }
  50%{ rotate: 8deg; }
}

@keyframes pixelBlink{
  0%,88%,100%{ scale: 1 1; }
  90%,93%{ scale: 1 .18; }
}

@keyframes pixelArmSwing{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 7px; }
}

.pixel-logo-mark{
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
  color: var(--pixel-pink);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 3px 0 #1c1238, -3px 0 #1c1238, 0 3px #1c1238, 0 -3px #1c1238;
}

.hero .container{
  position:relative;
  z-index:1;
  padding-top: 34px;
  padding-bottom: 110px;
}

.hero h1{
  display:inline;
  color:#121022;
  background: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 4px 14px 8px;
  line-height: 1.42;
  font-weight: 900;
  text-transform: none;
  text-shadow: none;
  box-shadow: 8px 8px 0 #120824, -8px -8px 0 #120824;
}

.hero .lead{
  max-width: 620px;
  margin: 30px auto 0;
  color: var(--pixel-muted);
  font-weight: 700;
  text-shadow: 2px 2px 0 #070019;
}

.pixel-hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn,
.form-control,
.form-select,
.alert,
.card,
.soft-card,
.cookie-inner,
.banner-modal-dialog{
  border-radius: 0 !important;
}

.btn{
  border: 3px solid #0a061e !important;
  box-shadow: 5px 5px 0 #0a061e !important;
  text-transform: uppercase;
  font-size: 13px;
}

.btn:hover{
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #0a061e !important;
}

.btn-light-blue,
.btn-primary{
  background: var(--pixel-pink) !important;
  color:#fff !important;
  border-color:#0a061e !important;
}

.btn-ghost,
.btn-white,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-white{
  background: var(--pixel-lilac) !important;
  color:#120824 !important;
  border-color:#0a061e !important;
}

.btn-warn{
  background: var(--pixel-gold) !important;
  color:#120824 !important;
}

.alert{
  background: #22153d !important;
  color: var(--pixel-ink) !important;
  border: 3px solid var(--pixel-gold) !important;
  box-shadow: 6px 6px 0 #0a061e;
}

section.container,
.container.my-5,
.container.py-5{
  position: relative;
}

h1, h2, h3, h4, h5,
.card-title{
  color: var(--pixel-ink);
  font-weight: 900;
  text-shadow: 3px 3px 0 #28124c;
}

section h2{
  text-transform: uppercase;
}

section h2::first-letter{
  color: var(--pixel-pink);
}

.card,
.soft-card{
  color: var(--pixel-ink);
  background: rgba(17, 11, 42, .94) !important;
  border: 4px solid var(--pixel-line) !important;
  box-shadow:
    8px 8px 0 #050014,
    inset 0 0 0 2px rgba(255,255,255,.06) !important;
}

.gashapon-card{
  transform: rotate(-1deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.gashapon-card:nth-child(even){
  transform: rotate(1deg);
}

.gashapon-card:hover{
  transform: translateY(-6px) rotate(0);
}

.card-text,
.text-muted,
.form-text,
p,
li{
  color: var(--pixel-muted) !important;
}

.home-collection-banner,
.collection-banner-img,
.ticker-item img{
  image-rendering: pixelated;
}

.home-collection-banner{
  background-color: #070019;
  border-bottom: 4px solid var(--pixel-line);
}

.old-price{
  color:#8878a9 !important;
}

.new-price,
.fw-bold,
b{
  color: var(--pixel-gold);
}

.spin-ticker{
  border: 4px solid var(--pixel-line);
  background: rgba(8, 3, 28, .88);
  box-shadow: 8px 8px 0 #050014;
}

.ticker-item{
  background:#14102c;
  border:3px solid #5d4a86;
  border-radius:0;
  box-shadow: 5px 5px 0 #050014;
}

.ticker-item .t1{ color: var(--pixel-muted); }
.ticker-item .t2{ color: var(--pixel-ink); }
.ticker-item .badge-r{
  color:#120824;
  background:var(--pixel-gold);
  border:2px solid #0a061e;
}

.footer{
  background:#050014;
  border-top: 5px solid #2b2250;
}

.support-fab{
  position: fixed !important;
  right: -8px !important;
  bottom: 118px !important;
  z-index: 6000 !important;
  background: var(--pixel-panel) !important;
  color: var(--pixel-ink) !important;
  border: 4px solid var(--pixel-line);
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #050014;
  transform: none;
}

.support-fab:hover{
  transform: translateX(-8px) translateY(-2px) !important;
}

.support-fab__icon{
  color: var(--pixel-cyan);
}

.support-fab__text{
  color: var(--pixel-ink) !important;
  text-shadow: 2px 2px 0 #050014;
}

.form-control,
.form-select{
  background:#0d0824 !important;
  color:var(--pixel-ink) !important;
  border:3px solid var(--pixel-line) !important;
  box-shadow: 4px 4px 0 #050014;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--pixel-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,90,168,.25), 4px 4px 0 #050014 !important;
}

.table{
  color: var(--pixel-ink);
}

.table-light,
.table > :not(caption) > * > *{
  color: var(--pixel-ink);
  background: rgba(17, 11, 42, .92) !important;
  border-color: var(--pixel-line);
}

.gashapon-screen{
  background:
    radial-gradient(circle at 50% 16%, rgba(255,90,168,.14), transparent 36%),
    linear-gradient(180deg, #07001b, #050014) !important;
  height:auto !important;
  min-height: calc(100vh - 78px) !important;
  align-items:flex-start !important;
  padding: 46px 0 84px !important;
  overflow: visible !important;
}

#gashapon-container{
  position: relative;
}

#gashapon-container::before,
#gashapon-container::after{
  display:none !important;
}

@keyframes machineCapsuleDrift{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-24px) rotate(18deg); }
}

#gashapon-machine.machine{
  width: min(460px, calc(100vw - 32px));
  height: 830px;
  filter: drop-shadow(14px 14px 0 rgba(0,0,0,.42));
  image-rendering: pixelated;
  overflow:hidden;
}

.machine{
  border-radius: 0 !important;
  border: 5px solid var(--pixel-line) !important;
  background:
    linear-gradient(180deg, #22183d, #0f0a24) !important;
  box-shadow:
    inset 0 0 0 5px #08031a,
    inset 0 0 0 10px #3b2d63;
}

#gashapon-machine.machine::before{
  content:"GACHAGO";
  position:absolute;
  left:50%;
  top:22px;
  transform: translateX(-50%);
  width:auto !important;
  height:auto !important;
  opacity:1 !important;
  min-width: 132px;
  padding: 6px 12px;
  color:var(--pixel-pink);
  background:#17102e;
  border:4px solid #08031a;
  font-weight:900;
  text-align:center;
  text-shadow: 3px 3px 0 #050014;
  letter-spacing:0;
  z-index:4;
  line-height:1;
  box-shadow:5px 5px 0 #050014;
}

#gashapon-machine.machine::after{
  display:none !important;
}

.machine-price,
.machine-glass,
.machine-drop{
  border-radius: 0 !important;
}

#gashapon-machine .machine-frame{
  inset: 12px !important;
  border: 4px solid #6f62a3 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 4px #050014 !important;
}

#gashapon-machine .machine-top-bar{
  position:absolute;
  left:28px;
  right:28px;
  top:70px;
  height:18px;
  border:4px solid #08031a;
  background:linear-gradient(90deg, #ff5aa8 0 24%, transparent 24% 34%, #a98bff 34% 62%, transparent 62% 72%, #61f0ff 72%);
  box-shadow: 0 5px 0 rgba(0,0,0,.32);
}

#gashapon-machine .machine-brand,
#gashapon-machine .machine-top-lines{
  display:none;
}

#gashapon-glass.machine-glass{
  top: 108px !important;
  width: 300px !important;
  height: 300px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background:#070019 !important;
  border: 5px solid #66558f !important;
  box-shadow: inset 0 0 0 4px #08031a !important;
  padding:12px;
  overflow:hidden;
}

#gashapon-glass::before{
  opacity:.2 !important;
}

#banner{
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
  border:4px solid #0a061e !important;
  box-shadow:none !important;
}

.collection-banner-img{
  background:#fff;
}

#price-container.machine-price{
  top: 438px !important;
  left: 28px !important;
  right:auto !important;
  min-width: 142px;
  max-width: 178px;
  padding: 11px 14px !important;
  border:4px solid #08031a !important;
  background:#f8f7ff !important;
  box-shadow: 6px 6px 0 #050014 !important;
  z-index:2;
}

#price-container .price-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

.machine-price,
.machine-price .price-label,
.machine-price .price-value{
  color: #101024 !important;
  text-shadow: none !important;
  font-size:18px;
  line-height:1.1;
}

.machine-price .new-price{
  color: #ff2f91 !important;
  text-shadow: none !important;
}

#gashapon-machine .old-price{
  color:#6f668f !important;
  text-decoration:line-through;
  font-size:14px;
}

#gashapon-machine .machine-arrow{
  display:none !important;
}

#gashapon-machine .machine-coin-panel{
  position:absolute;
  top:438px;
  right:28px;
  width:104px;
  height:96px;
  border:4px solid #08031a;
  background:#17102e;
  box-shadow:6px 6px 0 #050014;
  z-index:2;
}

#gashapon-machine .coin-slot{
  position:absolute;
  left:16px;
  top:18px;
  width:64px;
  height:18px;
  background:#050014;
  border:4px solid #66558f;
}

#gashapon-machine .coin-lines{
  position:absolute;
  left:16px;
  top:54px;
  width:42px;
  height:30px;
  background:
    linear-gradient(#61f0ff 0 0) 0 0 / 42px 5px no-repeat,
    linear-gradient(#a98bff 0 0) 0 12px / 34px 5px no-repeat,
    linear-gradient(#ff5aa8 0 0) 0 24px / 28px 5px no-repeat;
}

#gashapon-machine .coin-knob{
  position:absolute;
  right:14px;
  bottom:16px;
  width:22px;
  height:22px;
  background:#ff5aa8;
  border:4px solid #08031a;
}

#gashapon-handle.machine-handle{
  top: 548px !important;
  left: 50% !important;
  right: auto !important;
  width: 144px !important;
  height: 144px !important;
  transform: translateX(-50%) !important;
  z-index:3;
}

#gashapon-handle::before{
  inset:-12px !important;
  border-radius:50% !important;
  background:#14102d !important;
  border:5px solid #08031a !important;
  box-shadow: 8px 8px 0 #050014 !important;
}

.handle,
.handle-core{
  border-radius: 0 !important;
}

.handle{
  inset:10px !important;
  width:auto !important;
  height:auto !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, #fff 0 14%, var(--pixel-pink) 14% 28%, var(--pixel-lilac) 28% 42%, #fff 42% 56%, var(--pixel-pink) 56% 70%, var(--pixel-lilac) 70% 84%, #fff 84% 100%) !important;
  border: 7px solid #08031a !important;
  box-shadow: 8px 8px 0 #050014, inset 0 0 0 10px rgba(255,255,255,.22) !important;
  display:grid !important;
  place-items:center !important;
}

.handle-core{
  inset:50%;
  transform:translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display:grid;
  place-items:center;
  border-radius: 50% !important;
  color:#120824 !important;
  background:#fff !important;
  border: 3px solid #08031a;
  text-shadow:none !important;
  letter-spacing:0 !important;
  padding:0 !important;
  font-size:13px;
}

.handle.is-spinning{
  animation: pixelHandleSpin .9s steps(12, end) infinite;
}

@keyframes pixelHandleSpin{
  to{ transform: rotate(360deg); }
}

#capsule-drop-zone.machine-drop{
  top: 724px !important;
  bottom:auto !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:260px !important;
  height:72px !important;
  border:4px solid #08031a !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg, #2b2250 0 18px, #08031a 18px 44px, #17102e 44px) !important;
  box-shadow: inset 0 0 0 8px #1d1438, 7px 7px 0 #050014 !important;
  z-index:2;
}

#capsule-drop-zone::before{
  left:30px !important;
  right:30px !important;
  top:18px !important;
  height:24px !important;
  border-radius:0 !important;
  background:
    linear-gradient(90deg, transparent 0 18px, #ff5aa8 18px calc(100% - 18px), transparent calc(100% - 18px)),
    #050014 !important;
  border:4px solid #08031a;
}

#capsule-drop-zone::after{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  bottom:10px;
  height:18px;
  background:linear-gradient(90deg, #61f0ff 0 28%, #fff 28% 38%, #ff5aa8 38% 70%, #a98bff 70%);
  border:4px solid #08031a;
}

#gashapon-machine .machine-bottom-label{
  position:absolute;
  left:24px;
  right:24px;
  bottom:14px;
  height:18px;
  background:
    linear-gradient(90deg, #61f0ff 0 18%, transparent 18% 24%, #ff5aa8 24% 44%, transparent 44% 54%, #a98bff 54% 78%, transparent 78%);
  opacity:.72;
}

#overlay{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,90,168,.42), transparent 28%),
    rgba(5,0,20,.86) !important;
}

.capsule{
  image-rendering: pixelated;
  filter: drop-shadow(10px 10px 0 rgba(0,0,0,.45)) !important;
}

.capsule-half{
  border-radius: 0 !important;
  border: 4px solid #08031a !important;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18) !important;
}

.capsule-half::before,
.capsule-half::after{
  display:none !important;
}

.capsule-half--top{
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 0 16px, transparent 16px),
    linear-gradient(180deg, var(--pixel-pink), #c91d75) !important;
}

.capsule-half--bot{
  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 0 16px, transparent 16px),
    linear-gradient(180deg, #fff, #d9d0ff) !important;
}

.capsule.is-drop{
  animation: pixelCapsuleDrop .9s steps(8, end) forwards !important;
}

@keyframes pixelCapsuleDrop{
  0%{ transform: translateY(-420px) scale(.7) rotate(-16deg); opacity:0; }
  55%{ transform: translateY(16px) scale(1) rotate(12deg); opacity:1; }
  72%{ transform: translateY(-18px) scale(1) rotate(-8deg); }
  100%{ transform: translateY(0) scale(1) rotate(0); }
}

.capsule.is-zoom{
  animation: pixelCapsuleZoom .3s steps(3, end) forwards !important;
}

@keyframes pixelCapsuleZoom{
  to{ transform: translateY(0) scale(1.18); }
}

.figure-frame{
  border-radius:0 !important;
  background:#fff !important;
  border:5px solid var(--pixel-line) !important;
  box-shadow: 10px 10px 0 #050014 !important;
  backdrop-filter:none !important;
}

.figure-frame.is-on{
  animation: pixelPrizePop .42s steps(4, end) both;
}

@keyframes pixelPrizePop{
  from{ transform: translateY(24px) scale(.76); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.figure-frame img{
  background:#fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
  image-rendering:auto;
}

.inventory-thumb,
.card .inventory-thumb,
.inventory-thumb.position-relative{
  background:#fff !important;
  border-bottom:4px solid #0a061e;
}

.card:has(.inventory-thumb){
  background:#fff !important;
  color:#110824 !important;
}

.card:has(.inventory-thumb) .card-body,
.card:has(.inventory-thumb) .text-muted,
.card:has(.inventory-thumb) h6{
  color:#110824 !important;
  text-shadow:none !important;
}

.list-group-item{
  background:#15102a !important;
  color:var(--pixel-ink) !important;
  border:3px solid var(--pixel-line) !important;
}

.list-group-item b,
.list-group-item .text-muted,
.history-scroll td,
.history-scroll th{
  color:var(--pixel-ink) !important;
}

.history-scroll img{
  background:#fff !important;
  border-radius:0 !important;
  border:3px solid var(--pixel-line);
}

.notification{
  border-radius: 0;
  border: 4px solid var(--pixel-pink);
  background: #fff;
  color:#110824;
  box-shadow: 6px 6px 0 #050014;
}

.cookie-inner{
  color: var(--pixel-ink);
  background: rgba(17, 11, 42, .96);
  border: 4px solid var(--pixel-line);
  box-shadow: 8px 8px 0 #050014;
}

.cookie-text,
.cookie-text a{
  color: var(--pixel-ink);
}

@media (max-width: 768px){
  .jp-deco{
    opacity:.2;
    scale:.72;
  }

  .jp-deco--torii{ left:-34px; top:140px; }
  .jp-deco--lantern{ right:-16px; top:190px; }
  .jp-deco--spark-a,
  .jp-deco--spark-b{
    opacity:.12;
  }

  .hero{
    min-height: 560px;
  }

  .hero::before{
    bottom: 92px;
    opacity: .58;
  }

  .hero h1{
    font-size: 34px;
    line-height: 1.55;
  }

  .pixel-cloud{
    transform: scale(.62);
  }

  .pixel-cloud--right{
    transform: scale(.62) scaleX(-1);
  }

  .pixel-side-girl{
    width: 188px;
    height: 270px;
    bottom: 70px;
    opacity:.72;
    scale:.58;
    transform-origin: bottom left;
  }

  .pixel-side-girl--left{ left:-48px; }
  .pixel-side-girl--right{ right:-48px; transform: scaleX(-1); transform-origin: bottom right; }

  .gashapon-screen{
    min-height: auto !important;
    padding: 24px 0 52px !important;
  }

  #gashapon-container{
    width: 100%;
    min-height: 830px;
    display:flex;
    align-items:center;
    overflow:visible;
  }

  #gashapon-machine.machine{
    width: 460px !important;
    height: 830px !important;
    transform: none;
    transform-origin: top center;
  }

  .pixel-hero-actions .btn{
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 520px){
  #gashapon-container{
    min-height: 690px;
  }

  #gashapon-machine.machine{
    transform: scale(.82);
  }
}

@media (max-width: 430px){
  #gashapon-container{
    min-height: 642px;
  }

  #gashapon-machine.machine{
    transform: scale(.76);
  }
}

@media (max-width: 390px){
  #gashapon-container{
    min-height: 612px;
  }

  #gashapon-machine.machine{
    transform: scale(.72);
  }
}

@media (max-width: 360px){
  #gashapon-container{
    min-height: 570px;
  }

  #gashapon-machine.machine{
    transform: scale(.67);
  }
}

@media (min-width: 769px){
  #gashapon-container{
    min-height: 830px;
  }
}