@font-face { font-family: BebasNeue; src: url("assets/BebasNeue-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: KacstOne; src: url("assets/KacstOne.ttf") format("truetype"); font-display: swap; }
:root {
  color-scheme: dark;
  font-family: KacstOne, Tahoma, Arial, sans-serif;
  color: #f8e7b6;
  background: #15120d;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #fff1ac; outline-offset: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.store {
  container-type: inline-size;
  max-width: 750px;
  min-height: 100vh;
  margin-inline: auto;
  padding-block: 5.4667cqi 0;
  background: #20190f url("assets/background.png") center top / 100% 100% no-repeat;
}
.hero { width: 93.6%; margin-inline: 3.0667cqi auto; }
.hero img { display: block; width: 100%; height: auto; }
.buyer-panel {
  position: relative;
  width: 93.87%;
  margin: 5.6cqi auto 3.3333cqi;
  padding: 9.0667cqi 2.6667cqi 6.1333cqi 3.0667cqi;
  background: url("assets/form-frame.png") center / 100% 100% no-repeat;
}
.buyer-panel.verified { padding-bottom: 2.5333cqi; background-image: url("assets/form-frame-verified.png"); }
.buyer-panel h2 {
  position: absolute;
  inset-block-start: -0.5333cqi;
  inset-inline: 0;
  width: max-content;
  max-width: 65%;
  margin: 0 auto;
  padding-inline: 1.6cqi;
  background: #1c170f;
}
.buyer-panel h2 img { display: block; max-width: 100%; height: auto; }
#buyer-form { display: grid; gap: 2.2667cqi; }
.form-row { display: grid; grid-template-columns: 30.56% 69.44%; align-items: center; }
.form-row label { display: flex; align-items: center; gap: 1.0667cqi; font-size: clamp(13px, 3.2cqi, 24px); font-weight: 400; white-space: nowrap; justify-self: start; }
.form-row label img { display: block; max-width: 100%; height: auto; }
.uid-label { gap: 1.6cqi; padding-inline-start: 0.8cqi; }
.uid-label svg { flex: 0 0 3.6cqi; width: 3.6cqi; height: 4cqi; fill: currentColor; }
.uid-label span { font-size: clamp(16px, 4.1333cqi, 31px); font-weight: 700; }
.country-label, .email-label { position: relative; top: -0.4cqi; }
.country-label { width: 10.9333cqi; }
.email-label { width: 25.8667cqi; }
input, select {
  min-width: 0;
  width: 100%;
  height: 8cqi;
  padding: 1.0667cqi 1.8667cqi;
  color: #fff2d0;
  border: 1px solid #8b7544;
  border-radius: 0.9333cqi;
  background: #2c2118 url("assets/input-frame.png") center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 5px #0007;
  font-size: clamp(12px, 2.7cqi, 20px);
}
input::placeholder { color: #cec6b5; opacity: 1; text-align: right; }
input[aria-invalid="true"] { border-color: #f0a57d; box-shadow: 0 0 0 1px #f0a57d; }
#buyer-form input, #buyer-form select { border: 0; box-shadow: none; }
#buyer-form #email { direction: ltr; padding-left: 6.6667cqi; background-image: url("assets/email-field.png"); }
#uid {
  padding-right: 1.6cqi;
  color: #e6dfcf;
  font-family: BebasNeue, "Arial Narrow", sans-serif;
  font-size: clamp(18px, 3.4667cqi, 26px);
  letter-spacing: 0.5px;
}
#uid:placeholder-shown {
  background-image: url("assets/placeholder-uid.png"), url("assets/input-frame.png");
  background-position: right 1.3333cqi center, center;
  background-size: 29.6cqi 3.3333cqi, 100% 100%;
}
#email:placeholder-shown {
  background-image: url("assets/placeholder-email.png"), url("assets/email-field.png");
  background-position: right 1.3333cqi center, center;
  background-size: 52cqi 3.6cqi, 100% 100%;
}
.player-row { display: flex; align-items: center; justify-content: space-between; height: 8cqi; margin-inline: 30.56% 24.81%; }
.player-row[hidden] { display: none; }
#player-nick { font-size: clamp(14px, 3.4667cqi, 26px); color: #d9d3c3; position: relative; inset-inline-start: -1.4667cqi; overflow: hidden; max-width: 55%; white-space: nowrap; }
#player-vip { font-size: clamp(14px, 3.4667cqi, 26px); color: #f6c540; }
.uid-controls, .email-controls { display: flex; min-width: 0; }
.uid-controls { gap: 3.7333cqi; padding-inline-end: 2.4cqi; }
.uid-controls:has(img[src$="verified.png"]) { gap: 1.3333cqi; }
.uid-controls input, .email-controls input { flex: 1; }
.email-controls { position: relative; }
.email-controls .verify-button { position: absolute; left: 0.2667cqi; top: 50%; transform: translateY(-50%); width: 5.8667cqi; height: 5.8667cqi; min-width: 44px; }
.verify-button {
  flex: 0 0 15.7333cqi;
  min-width: 51px;
  padding: 0;
  border: 0;
  background: none;
}
.verify-button img { display: block; width: 100%; height: auto; }
.verify-button:has(img[src$="verified.png"]) { flex-basis: 18cqi; }
.country-control { position: relative; min-width: 0; }
#country { display: none; }
.country-button {
  position: relative;
  display: block;
  width: 100%;
  height: 8cqi;
  padding: 0;
  border: 0;
  background: url("assets/country-field.png") center / 100% 100% no-repeat;
  color: #e6dfcf;
  font-size: clamp(16px, 3.2cqi, 24px);
}
#country-flag { position: absolute; left: 42.7%; top: 50%; transform: translateY(-50%); width: 4.8cqi; height: 4.8cqi; object-fit: contain; pointer-events: none; }
#country-name { position: absolute; right: 1.3333cqi; top: 50%; transform: translateY(-50%); white-space: nowrap; }
#country-name img { display: block; height: auto; }
.country-button::after { content: ""; position: absolute; left: 2.5333cqi; top: 50%; width: 4.5333cqi; height: 3.2cqi; background: url("assets/country-arrow.png") center / contain no-repeat; transform: translateY(-50%); pointer-events: none; }
.country-menu {
  position: absolute;
  top: calc(100% - 1.2cqi);
  left: -1.4667cqi;
  z-index: 30;
  width: 64.2667cqi;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.7333cqi solid transparent;
  border-image: url("assets/dropdown-panel.png") 13 fill / 1.7333cqi stretch;
  color: #e6dfcf;
  font-size: clamp(16px, 3.2cqi, 24px);
}
.country-option { display: flex; align-items: center; justify-content: space-between; height: 10.6667cqi; padding: 0 2.6667cqi 0 3.8667cqi; cursor: pointer; }
.country-option > span:first-child { position: relative; top: 0.4cqi; }
.country-option + .country-option { background-image: url("assets/dropdown-divider.png"); background-position: top center; background-size: 100% 2px; background-repeat: no-repeat; }
.country-option.active, .country-option:hover { background-color: #ffffff12; }
.country-option > img { width: 4.8cqi; height: 4.8cqi; object-fit: contain; flex: none; position: relative; top: -0.2667cqi; }
.country-option > span:first-child img { display: block; }
.form-message { margin: 0; text-align: center; font-size: clamp(11px, 1.87cqi, 14px); line-height: 1.7; color: #ffd9a3; }
.form-message:not(:empty) { margin-top: 2cqi; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3333cqi 3.4667cqi; width: 89.3333%; margin-inline: auto; }
.product { position: relative; aspect-ratio: 322 / 313; min-width: 0; background: url("assets/card.png") center / 100% 100% no-repeat; }
.product:nth-child(5), .product:nth-child(6) { margin-top: 0.2667cqi; }
.product:nth-child(7), .product:nth-child(8) { margin-top: 3.4667cqi; }
.product:nth-child(1) { --art-left: 29.50%; --art-top: 24.28%; --art-width: 40.99%; }
.product:nth-child(2) { --art-left: 22.67%; --art-top: 23.96%; --art-width: 54.97%; }
.product:nth-child(3) { --art-left: 18.32%; --art-top: 21.09%; --art-width: 60.56%; }
.product:nth-child(4) { --art-left: 27.64%; --art-top: 14.06%; --art-width: 46.58%; }
.product:nth-child(5) { --art-left: 21.43%; --art-top: 15.02%; --art-width: 51.86%; }
.product:nth-child(6) { --art-left: 19.88%; --art-top: 7.99%; --art-width: 55.28%; }
.product:nth-child(7) { --art-left: 31.37%; --art-top: 20.13%; --art-width: 37.27%; }
.product:nth-child(8) { --art-left: 21.74%; --art-top: 18.85%; --art-width: 54.97%; }
.product:nth-child(9) { --art-left: 28.26%; --art-top: 12.14%; --art-width: 44.41%; }
.product:nth-child(10) { --art-left: 18.94%; --art-top: 14.38%; --art-width: 54.97%; }
.product-bonus {
  position: absolute; top: 7.67%; left: 0; width: 33.85%; aspect-ratio: 1; z-index: 1;
  display: grid; place-items: center;
  background: url("assets/bonus-blank.png") 50% 14.3% / 112.84% 106.36% no-repeat;
  color: #f4eed8;
  font-family: BebasNeue, Impact, "Arial Narrow", Tahoma, sans-serif;
  font-size: clamp(18px, 4.6667cqi, 35px); line-height: 1;
}
.bonus-value { transform: translate(0.171em, -0.057em) rotate(-12deg); letter-spacing: 0.114em; filter: drop-shadow(1px 2px 0 rgba(150, 60, 20, 0.85)); }
.bonus-200 { background-image: url("assets/bonus-200.png"); }
.bonus-220 { background-image: url("assets/bonus-220.png"); }
.bonus-250 { background-image: url("assets/bonus-250.png"); }
.bonus-300 { background-image: url("assets/bonus-300.png"); }
.bonus-400 { background-image: url("assets/bonus-400.png"); }
.bonus-200 .bonus-value, .bonus-220 .bonus-value, .bonus-250 .bonus-value, .bonus-300 .bonus-value, .bonus-400 .bonus-value { visibility: hidden; }
.product-art { position: absolute; left: var(--art-left); top: var(--art-top); width: var(--art-width); height: auto; object-fit: contain; }
.product-amount {
  position: absolute; top: 58.79%; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: max-content; max-width: 84%; height: 9.27%; direction: ltr; white-space: nowrap;
  font-family: Impact, "Arial Narrow", Tahoma, sans-serif; font-size: clamp(12px, 3.5cqi, 26px);
  line-height: 1; color: #a4822b; text-shadow: 0 1px 0 #f9e5a5, 1px 0 0 #71591c88;
}
.amount-icon { flex: none; width: 1.1em; height: 1.1em; background: left center / auto 100% no-repeat; }
.amount-diamond .amount-icon { background-image: url("assets/diamond-amount-20000.png"); }
.amount-gold .amount-icon { background-image: url("assets/gold-amount-10000000.png"); }
.buy-button {
  position: absolute;
  top: 69.33%;
  left: 16.77%;
  width: 65.2%;
  height: 22%;
  display: grid;
  place-items: center;
  padding: 2px 0 0 4px;
  border: 0;
  background: url("assets/buy-button.png") center / 100% 100% no-repeat;
  color: #305b23;
  font-family: BebasNeue, Impact, "Arial Narrow", sans-serif;
  font-size: clamp(19px, 4.68cqi, 35px);
  line-height: 1;
  text-shadow: 0 1px 0 #d6ffac66;
  transition: filter 120ms, transform 120ms;
}
.buy-button::after { content: ""; position: absolute; inset: -5px 0; }
.buy-button:hover, .verify-button:hover { filter: brightness(1.1); }
.buy-button:active { transform: translateY(2px); }
.store-footer { margin: 4.5333cqi 3.2cqi 0; color: #e6d3a3; font-size: clamp(12px, 1.87cqi, 14px); line-height: 1.9; text-align: center; }
#footer-links { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 1.3333cqi; }
#footer-links a { color: inherit; text-decoration-color: #b99b5e; text-underline-offset: 3px; }
#footer-links a:hover { color: #ffe9ad; }
.store > .store-footer {
  margin: 4.5333cqi 0 0;
  padding: 20px 16px 18px;
  border-top: 1px solid #c9a86a38;
  color: #e7dcc6;
  font-family: KacstOne, Tahoma, Arial, sans-serif;
}
.store > .store-footer #footer-links { flex-direction: row; justify-content: center; gap: 0; margin: 0; font-size: clamp(11px, 1.7333cqi, 13px); }
.store > .store-footer #footer-links a { padding: 4px 7px; white-space: nowrap; text-decoration: none; }
.store > .store-footer .footer-core { margin-top: 12px; padding-top: 10px; border-top: 1px solid #c9a86a25; color: #e7dcc6; }
.store > .store-footer .footer-core p { margin: 8px 0; }
.store > .store-footer .footer-support { font-size: 14px; }
.store > .store-footer .footer-support a { color: inherit; text-decoration: none; }
.store > .store-footer .footer-address { color: #bcb3a1; font-size: 9px; line-height: 1.65; }
.store > .store-footer .footer-address-label { display: block; margin-bottom: 4px; font-size: 8px; }
.store > .store-footer .footer-address bdi { display: block; font-family: Arial, sans-serif; }
.store > .store-footer .footer-copyright { color: #bcb3a1; font: 9px/1.7 Arial, sans-serif; overflow-wrap: anywhere; }
.legal-disclosure, .checkout-disclosure { overflow-wrap: anywhere; }
.legal-disclosure { margin-bottom: 14px; }
.legal-disclosure p, .checkout-disclosure p { margin: 8px 0; }
.legal-disclosure a, .checkout-disclosure a { color: inherit; text-underline-offset: 3px; }
.buy-button:disabled { filter: grayscale(.3); font-family: Tahoma, sans-serif; font-size: clamp(10px, 2.2cqi, 16px); }
.noscript { margin: 24px; text-align: center; }
dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  padding: 28px;
  border: 1px solid #d6ad54;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0, #49351b, #201910 55%);
  color: #f6e4b9;
  box-shadow: 0 20px 90px #000b, inset 0 0 0 4px #d6ad5410;
}
dialog::backdrop { background: #080603c9; backdrop-filter: blur(5px); }
.close-dialog { position: absolute; top: 7px; left: 7px; width: 44px; height: 44px; border: 0; background: none; color: #e8d5a8; font-size: 30px; border-radius: 50%; }
dialog h2 { margin: 9px 0 4px; font-size: 24px; text-align: center; }
.order-reward { display: flex; align-items: center; flex-direction: column; margin-block: 16px 24px; }
.order-reward img { width: 140px; height: 125px; object-fit: contain; }
.order-reward strong { font-size: 34px; font-family: BebasNeue, Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: 1px; direction: ltr; color: #f6e4b9; }
.order-reward span { margin-top: 4px; font-size: 14px; color: #c8b690; }
.order-details { margin: 0; }
.order-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; border-bottom: 1px solid #d5b87525; font-size: 14px; }
.order-details dt { flex: 0 0 auto; color: #c4b495; }
.order-details dd { margin: 0; text-align: left; overflow-wrap: anywhere; min-width: 0; }
#order-uid, #order-price { font-family: BebasNeue, "Arial Narrow", sans-serif; font-size: 19px; letter-spacing: 0.5px; color: #f6e4b9; }
.order-details .order-total { font-size: 20px; font-weight: 400; border-bottom: 0; }
.dialog-button { width: 100%; min-height: 46px; margin-top: 14px; border: 1px solid #acc766; border-radius: 9px; background: #628341; color: #fff5ce; font-size: 16px; }
.dialog-button:disabled { opacity: .55; }
#order-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#order-dialog > h2 { flex-shrink: 0; }
#order-dialog .order-dialog-body { min-height: 0; overflow-y: auto; }
#order-dialog .order-actions { flex-shrink: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5b87525; background: #201910; }
#order-dialog .order-actions .dialog-button { margin-top: 0; }
.checkout-disclosure { margin-top: 16px; padding: 12px 14px; border: 1px solid #d5b87525; border-radius: 12px; background: #1a140dcc; font-size: 13px; line-height: 1.8; }
.payment-brands { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-block: 12px; direction: ltr; }
.payment-brands img { display: block; width: 92px; height: 48px; border-radius: 8px; background: #fff; object-fit: contain; box-shadow: 0 1px 4px #00000040; }
.payment-preview-note { color: #c8b690; }
.checkout-policy-links { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.checkout-policy-links a { padding-block: 4px; color: #e8d5a8; text-decoration-color: #b99b5e; text-underline-offset: 3px; }
.checkout-policy-links a:hover { color: #ffe9ad; }
.verification-email { overflow-wrap: anywhere; text-align: center; color: #d2c3a4; }
#verification-code {
  margin-top: 8px; text-align: center; font-size: 24px; letter-spacing: 4px;
  color: #e6dfcf; border: 0; box-shadow: inset 0 1px 5px #0007;
  background: #2c2118 url("assets/input-frame.png") center / 100% 100% no-repeat;
}
.verification-actions { display: flex; gap: 12px; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  /* Readability floors and touch targets only; geometry scales with cqi. */
  input, select, .country-button { font-size: 16px; }
  #uid { font-size: 18px; }
  .country-option { height: 52px; }
  .country-option > img { width: 24px; height: 24px; }
  .country-option > span:first-child img { max-height: 22px; width: auto; }
  #country-name img { max-height: 22px; width: auto; }
  .email-controls .verify-button { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}