/* The web shop's page (server/shop). Its two designs are art/orders/look-web-shop a (before logging in) and b (after it,
   in the shop's own room), both 1920 pixels wide: on a wide screen every size is one of their pixels times --u (the
   window's width / 1920, set by shop.js), so the page is the design at any width; under 900 pixels the page is laid out
   for a phone. The buttons, panels and fields are the game's own kit (ui/kit, its slices from kit.json).

   It is a page of Cloud Town's website in its look "Nachtblau und Gold" (art/orders/look-website-3 c): the navigation,
   the footer and the font are the website's frame (server/site/frame.css), its ground is the website's night blue,
   its banner the website's first screen - the calm sky, the game's airship, the band of the islands and the cloud sea
   - with the shop's name in the logo's gold, and its packs cream cards in a golden rim. Before logging in its sizes
   are --c, the same as --u up to a window of 1440 pixels and no larger, so the offer keeps to the website's column. */

:root {
  --u: 1px; --c: 1px;
  --navy: #182d43;
  --navy-deep: #12233a;
  --gold-line: #e6c177;
  --cream: #faf4e1;
  --paper: #fcf5d9;
  --ink: #3d2410;
  --ink-soft: #6b4a28;
  --gilt: #b9822a;
  --green-shade: #1f6e16;
  --night: rgba(10, 30, 44, 0.92);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0; min-width: 320px; container-type: inline-size; color: var(--ink);
  background: linear-gradient(180deg, #0c2247 0%, #0b2044 45%, #091b3a 100%) #091b3a;
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif; font-weight: 800; overflow-x: clip;   /* (clip, not hidden: a body that is a container keeps its overflow, and "hidden" would make it the scroller the sticky bar sticks to) */
}
body.starting #page { visibility: hidden; }
#page { flex: 1 0 auto; display: flex; flex-direction: column; }
#page > .shelf, #page > .room { flex: 1 0 auto; }
body.shut .login { visibility: hidden; }                       /* closed, the shop logs nobody in */
body.held { overflow: hidden; }
img { display: block; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, p { margin: 0; }
.unreached { padding: 40px; text-align: center; }

/* ---- the kit's parts (ui/kit: their size, pad and slices, three file pixels to one) ---- */

.price, .buy, .green {
  border: 0 solid transparent; background: none;
  border-image: url("/shop/pictures/kit/button-green.png") 87 fill / calc(var(--u) * 29) / calc(var(--u) * 8) stretch;
  color: #fff; font-weight: 900; text-shadow: 0 calc(var(--u) * 3) 0 var(--green-shade), 0 0 calc(var(--u) * 2) rgba(20, 70, 10, 0.6);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.price:hover:not(:disabled), .buy:hover:not(:disabled), .green:hover:not(:disabled) { filter: brightness(1.08); }
.price:active:not(:disabled), .buy:active:not(:disabled), .green:active:not(:disabled) { transform: translateY(calc(var(--u) * 2)) scale(0.98); }
.price:disabled, .buy:disabled, .green:disabled { filter: grayscale(0.75) brightness(0.92); }

/* ---- the golden lettering (shop.js: golden) ---- */

.golden { position: relative; display: inline-block; font-weight: 900; line-height: 1; white-space: nowrap; }
.golden-edge { position: absolute; left: 0; top: 0; color: rgb(255, 240, 186); }
.golden .ch { display: inline-block; transform-origin: 50% 70%; }
.golden-face .ch {
  background: linear-gradient(180deg, rgb(255, 252, 222) 12%, rgb(255, 214, 92) 55%, rgb(255, 168, 18) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ================================================================================================================
   Design a: before logging in
   ================================================================================================================ */

.login {
  --h: max(56px, calc(var(--c) * 76)); position: relative; display: flex; align-items: center; gap: 10px; height: var(--h); margin-top: calc(var(--c) * 30);
  width: max(320px, calc(var(--c) * 520)); padding: 0 24px 0 calc(var(--h) + 8px);
  border: 0 solid transparent; background: none; border-image: url("/site/pictures/kit/welcome-button.webp") 171 fill / calc(var(--h) / 2 + 5px) / 5px stretch;
  color: #fff; font-size: max(19px, calc(var(--c) * 30)); font-weight: 900; white-space: nowrap;
  text-shadow: 0 2px 0 #1f6e16, 1px 0 0 #22781a, -1px 0 0 #22781a, 0 -1px 0 #22781a;
  transition: transform 0.25s cubic-bezier(0.34, 1.6, 0.64, 1), filter 0.12s ease;
}
.login:hover { filter: brightness(1.07); }
.login:active { transform: translateY(2px) scale(0.97); transition-duration: 0.06s; }
.login-icon { position: absolute; left: 10px; top: 50%; width: calc(var(--h) * 0.86); height: auto; transform: translateY(-52%); filter: drop-shadow(0 2px 2px rgba(10, 60, 10, 0.4)); }
.login-label { flex: 1; text-align: center; }

/* the banner: the website's first screen (server/site/site.css: .hero) - the sky down to the cloud sea's edge, the night
   blue under it, the island band at its foot (its night share: pictures.py: ISLAND_NIGHT) */
.banner {
  --band-w: 100cqw; --band-h: calc(var(--band-w) / 3.8217); --band-night: calc(var(--band-h) * 0.1667);
  position: relative; display: flex; flex-direction: column; align-items: center; overflow-x: clip; text-align: center;
  background: linear-gradient(180deg, #2689e6 0%, #3e9aec 24%, #6fb3ee 50%, #b2d6f3 calc(100% - var(--band-h) * 0.4), #c6e0f5 calc(100% - var(--band-night)),
              #0c2247 calc(100% - var(--band-night)));
}
.banner-cloud { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.banner-cloud-1 { left: -8%; top: 22%; width: 26%; }
.banner-cloud-2 { right: -6%; top: 12%; width: 22%; }
.banner-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: calc(var(--c) * 40) 16px 0; }
.banner-airship { position: absolute; left: calc(var(--c) * -330); top: calc(var(--c) * 30); width: calc(var(--c) * 250); height: auto; animation: hover 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 8px rgba(20, 40, 80, 0.22)); }
@keyframes hover { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 calc(var(--c) * -10); rotate: 1.5deg; } }
.banner-band { position: relative; z-index: 1; width: var(--band-w); height: var(--band-h); margin-top: calc(var(--band-h) * -0.24); pointer-events: none; }

.title-words { position: relative; margin: 0; font-size: 0; line-height: 0; }
.title-main { font-size: max(58px, calc(var(--c) * 128)); margin-top: calc(var(--c) * 6); }
.tagline {
  margin-top: calc(var(--c) * 34); color: #fff; font-size: max(20px, calc(var(--c) * 40)); font-weight: 900; line-height: 1.2;
  text-shadow: 0 2px 2px rgba(10, 40, 80, 0.45), 0 0 12px rgba(10, 40, 80, 0.28);
}
.tagline-more { color: #ffe08a; }
.preview-note {
  max-width: max(320px, calc(var(--c) * 900)); margin-top: calc(var(--c) * 28); padding: 12px 26px; border-radius: 26px;
  background: #fbf6ea; box-shadow: 0 3px 10px rgba(15, 45, 85, 0.25), inset 0 -2px 0 rgba(200, 180, 140, 0.25);
  color: #10305a; font-size: max(17px, calc(var(--c) * 26)); font-weight: 900; line-height: 1.35;
}

.shelf { position: relative; z-index: 2; width: 100%; max-width: 1164px; margin: 0 auto; padding: 46px 32px 80px; }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--c) * 18); }

/* a pack: a cream card in the website's golden rim */
.pack, .featured {
  border: 5px solid transparent; border-radius: 20px;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, rgba(255, 255, 255, 0.7) 22%, rgba(255, 255, 255, 0) 48%) padding-box,
              linear-gradient(180deg, #fcf6e8 0%, #f8edd6 100%) padding-box, linear-gradient(180deg, #ffe08e 0%, #f2bf45 45%, #d6962a 100%) border-box;
  box-shadow: inset 0 0 0 2px rgba(255, 238, 190, 0.9), 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(247, 200, 90, 0.1);
}
.pack { position: relative; height: calc(var(--c) * 330); }
.pack-glow { display: none; }
.pack-picture { position: absolute; left: 50%; top: calc(var(--c) * 30); width: calc(var(--c) * 190); height: calc(var(--c) * 146); object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 calc(var(--c) * 6) calc(var(--c) * 5) rgba(90, 50, 0, 0.25)); }
.pack-amount { position: absolute; left: 0; right: 0; top: calc(var(--c) * 178); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 0.26em;
  text-align: center; font-size: calc(var(--c) * 35); font-weight: 900; line-height: 1.1; color: #10305a; }
.pack .price { position: absolute; left: calc(var(--c) * 30); right: calc(var(--c) * 30); bottom: calc(var(--c) * 20); height: calc(var(--c) * 64); font-size: calc(var(--c) * 35); }

.price-soon { display: flex; align-items: center; justify-content: center; gap: calc(var(--c) * 14); }
.pack .price-soon { position: absolute; left: calc(var(--c) * 20); right: calc(var(--c) * 20); bottom: calc(var(--c) * 22); height: calc(var(--c) * 60); }
.price-label { color: #10305a; font-size: calc(var(--c) * 36); font-weight: 900; white-space: nowrap; }
.soon-tag {
  display: inline-flex; align-items: center; height: calc(var(--c) * 42); padding: 0 calc(var(--c) * 18); border-radius: calc(var(--c) * 21);
  background: linear-gradient(180deg, #e9f2fb 0%, #cfe0f1 100%); box-shadow: inset 0 0 0 calc(var(--c) * 2) #9fbcd8;
  color: #2c4f75; font-size: calc(var(--c) * 24); font-weight: 900; white-space: nowrap;
}
.featured .price-soon { flex-direction: column; gap: calc(var(--c) * 8); }

.ribbon { position: absolute; display: flex; align-items: center; justify-content: center; background: url("/shop/pictures/ribbon.webp") center / 100% 100% no-repeat; }
.ribbon-text {
  color: #fff; font-weight: 900; white-space: nowrap;
  text-shadow: 0 calc(var(--c) * 2) 0 #7a0d0d, calc(var(--c) * 1.5) 0 0 #8c1212, calc(var(--c) * -1.5) 0 0 #8c1212, 0 calc(var(--c) * -1.5) 0 #8c1212;
}
/* a pack's web bonus: a small golden tag on its rim */
.ribbon-top { left: 50%; top: -18px; height: 32px; padding: 0 14px; border-radius: 999px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  background: linear-gradient(180deg, #ffe58a 0%, #f6be35 55%, #e39d1c 100%); box-shadow: 0 0 0 2px #fff4c8, 0 3px 6px rgba(0, 0, 0, 0.3); }
.ribbon-top .ribbon-text { color: #4a2306; font-size: max(14px, calc(var(--c) * 21)); text-shadow: 0 1px 0 rgba(255, 246, 200, 0.8); }

.featured {
  position: relative; display: grid; grid-template-columns: calc(var(--c) * 600) calc(var(--c) * 450) 1fr; align-items: center;
  height: calc(var(--c) * 238); margin-top: 26px; overflow: visible;
}
.featured-sky { display: none; }
.featured-far { display: none; }
.featured-far-1 { left: calc(var(--c) * 4); top: calc(var(--c) * 4); width: calc(var(--c) * 80); }
.featured-far-2 { right: calc(var(--c) * 10); top: calc(var(--c) * 0); width: calc(var(--c) * 86); }
.featured-art { position: relative; height: 100%; }
.featured-rays {
  position: absolute; left: calc(var(--c) * 180); top: calc(var(--c) * -40); width: calc(var(--c) * 280); height: calc(var(--c) * 270);
  background: radial-gradient(circle, rgba(255, 236, 160, 0.95) 0%, rgba(255, 226, 140, 0.6) 30%, rgba(255, 226, 140, 0) 66%),
              repeating-conic-gradient(from 0deg, rgba(255, 214, 110, 0.55) 0deg 7deg, rgba(255, 214, 110, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.featured-gems { position: absolute; left: calc(var(--c) * 40); top: calc(var(--c) * 34); width: calc(var(--c) * 196); height: auto; }
.featured-coins { position: absolute; left: calc(var(--c) * 430); top: calc(var(--c) * 46); width: calc(var(--c) * 176); height: auto; }
.featured-pack { position: absolute; left: calc(var(--c) * 196); top: calc(var(--c) * -40); width: calc(var(--c) * 256); height: auto; filter: drop-shadow(0 calc(var(--c) * 8) calc(var(--c) * 8) rgba(90, 50, 0, 0.3)); }
.featured-body { position: relative; text-align: center; }
.featured-name { font-size: calc(var(--c) * 62); font-weight: 900; color: #10305a; line-height: 1.05; }
.featured-rule { position: relative; height: calc(var(--c) * 16); margin: calc(var(--c) * 6) auto calc(var(--c) * 8); width: calc(var(--c) * 470);
  background: linear-gradient(90deg, rgba(212, 160, 60, 0) 0%, #d4a03c 22%, #d4a03c 78%, rgba(212, 160, 60, 0) 100%) center / 100% calc(var(--c) * 2) no-repeat; }
.featured-rule span { position: absolute; left: 50%; top: 50%; width: calc(var(--c) * 12); height: calc(var(--c) * 12); background: #d4a03c; transform: translate(-50%, -50%) rotate(45deg); border-radius: calc(var(--c) * 2); }
.holds { display: flex; align-items: center; justify-content: center; gap: calc(var(--c) * 22); }
.holds-one { position: relative; display: flex; flex-direction: column; align-items: center; }
.holds-picture { width: calc(var(--c) * 92); height: calc(var(--c) * 70); object-fit: contain; filter: drop-shadow(0 calc(var(--c) * 4) calc(var(--c) * 3) rgba(90, 50, 0, 0.25)); }
.holds-one span { margin-top: calc(var(--c) * -6); font-size: calc(var(--c) * 26); font-weight: 900; color: var(--ink); }
.holds-plus { font-size: calc(var(--c) * 42); font-weight: 900; color: #c9952e; margin-bottom: calc(var(--c) * 20); }
.featured-buy { position: relative; display: flex; flex-direction: column; align-items: center; padding-right: calc(var(--c) * 26); }
.once { margin-bottom: calc(var(--c) * 8); padding: calc(var(--c) * 3) calc(var(--c) * 16); border-radius: calc(var(--c) * 14); background: rgba(255, 233, 170, 0.9); color: #8a5a10; font-size: calc(var(--c) * 19); }
.featured .price { width: calc(var(--c) * 307); height: calc(var(--c) * 67); font-size: calc(var(--c) * 36); }

.closed { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 30px 24px 32px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #fbf3e3 0%, #f7ead1 100%); box-shadow: 0 0 0 1px rgba(255, 236, 190, 0.3), 0 14px 32px rgba(0, 0, 0, 0.35); }
.closed-bee { width: 150px; height: auto; }
.closed-title { font-size: max(24px, calc(var(--c) * 40)); font-weight: 900; color: #10305a; }
.closed-text { font-size: max(17px, calc(var(--c) * 24)); color: #4b5b75; }

/* ================================================================================================================
   Design b: after logging in, in the shop's own room
   ================================================================================================================ */

body.captain { background: #6b3510; }
.room { position: relative; }
.stage { position: relative; width: 100%; height: calc(var(--u) * 1088); background: url("/shop/pictures/room.jpg") 0 0 / 100% 100% no-repeat; overflow: hidden; }
.sign-logo { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 62); width: calc(var(--u) * 712); }
.sign-logo .logo { width: 100%; height: auto; filter: drop-shadow(0 calc(var(--u) * 5) calc(var(--u) * 4) rgba(40, 15, 0, 0.45)); }

.harbour {
  position: absolute; left: calc(var(--u) * 1225); top: calc(var(--u) * 52); width: calc(var(--u) * 630); height: calc(var(--u) * 153);
  display: flex; align-items: center; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 14);
  border: 0 solid transparent; border-image: url("/shop/pictures/kit/pill-gold.png") 99 fill / calc(var(--u) * 58) / calc(var(--u) * 12) stretch;
  filter: drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(30, 12, 0, 0.45));
}
.crest { position: relative; flex: none; width: calc(var(--u) * 150); height: calc(var(--u) * 138); margin: calc(var(--u) * -6) calc(var(--u) * -8) calc(var(--u) * -6) calc(var(--u) * -16); }   /* as in design b it reaches past the card's rim */
.crest-plate { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 92); height: auto; transform: translate(-50%, -50%); }
.crest-sign { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 60); height: auto; transform: translate(-50%, -54%); }
.crest-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.harbour-who { flex: 1; min-width: 0; }
.harbour-name { overflow: hidden; color: #fff; font-size: calc(var(--u) * 29); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, 0.5); }
.harbour-level {
  display: inline-flex; align-items: center; height: calc(var(--u) * 40); margin-top: calc(var(--u) * 8); padding: 0 calc(var(--u) * 34);
  border: 0 solid transparent; border-image: url("/shop/pictures/kit/tag-legendary.png") 60 fill / calc(var(--u) * 20) / calc(var(--u) * 6) stretch;
  color: #5a3307; font-size: calc(var(--u) * 21); font-weight: 900;
}
.logout {
  flex: none; width: calc(var(--u) * 150); height: calc(var(--u) * 64);
  /* design b's blue pill, its colours measured on the design: light at its top, deep at its foot, a dark edge and a gloss */
  border: calc(var(--u) * 2.5) solid #0d2a44; border-radius: calc(var(--u) * 32);
  background: linear-gradient(180deg, #3a6c9c 0%, #285886 38%, #1d4a73 70%, #173f61 100%);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(170, 210, 245, 0.45), inset 0 calc(var(--u) * -3) 0 rgba(5, 25, 45, 0.35), 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0, 10, 25, 0.45);
  color: #fff; font-size: calc(var(--u) * 22); font-weight: 800; text-shadow: 0 calc(var(--u) * 2) 0 rgba(0, 20, 40, 0.65);
}
.logout:hover { filter: brightness(1.15); }

.bee-sit { position: absolute; left: calc(var(--u) * 778); top: calc(var(--u) * 168); width: calc(var(--u) * 264); height: auto; filter: drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 6) rgba(60, 25, 0, 0.35)); }

.counter { position: absolute; left: calc(var(--u) * 100); top: calc(var(--u) * 430); width: calc(var(--u) * 1290); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 20); }
.pack-counter { height: calc(var(--u) * 436); background: radial-gradient(ellipse 62% 36% at 50% 40%, #fff6dc 0%, rgba(255, 246, 220, 0) 100%), linear-gradient(180deg, #fdf0cf 0%, #fbe5b4 100%); background-clip: padding-box; }
.pack-counter .pack-amount { top: calc(var(--u) * 10); flex-direction: column; align-items: center; line-height: 1; }
.pack-counter .amount-number { font-size: calc(var(--u) * 40); }
.pack-counter .amount-word { font-size: calc(var(--u) * 24); color: var(--ink-soft); }
.pack-counter .pack-picture { top: calc(var(--u) * 82); width: calc(var(--u) * 178); height: calc(var(--u) * 140); }
.pack-bonus { position: absolute; left: 0; right: 0; top: calc(var(--u) * 222); height: calc(var(--u) * 96); }
.ribbon-stars { left: 50%; top: 0; width: calc(var(--u) * 272); height: calc(var(--u) * 76); transform: translateX(-50%); }
.ribbon-stars .ribbon-text { font-size: calc(var(--u) * 27); margin-top: calc(var(--u) * -16); }
.ribbon-stars::before, .ribbon-stars::after { content: ""; position: absolute; top: calc(var(--u) * 14); width: calc(var(--u) * 22); height: calc(var(--u) * 22); background: radial-gradient(circle at 40% 35%, #fff6b0, #f5c518 55%, #c8860a); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ribbon-stars::before { left: calc(var(--u) * 26); }
.ribbon-stars::after { right: calc(var(--u) * 26); }
.pack-extra { position: absolute; left: 0; right: 0; top: calc(var(--u) * 62); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 22); font-weight: 900; color: #2a6fbf; }
.pack-extra-gem { width: calc(var(--u) * 30); height: auto; }
.pack-counter .price { left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 0); height: calc(var(--u) * 64); font-size: calc(var(--u) * 36); }
.pack-counter.chosen { filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 226, 110, 0.95)) drop-shadow(0 0 calc(var(--u) * 22) rgba(255, 200, 70, 0.7)); }
.price.chosen { filter: brightness(1.1) saturate(1.1); }

.basket {
  position: absolute; left: calc(var(--u) * 1418); top: calc(var(--u) * 396); width: calc(var(--u) * 456); height: calc(var(--u) * 512);
  display: flex; flex-direction: column; align-items: stretch; padding: calc(var(--u) * 26) calc(var(--u) * 22) calc(var(--u) * 20);
  border: calc(var(--u) * 24) solid transparent;
  border-image: url("/shop/pictures/frame.webp") 100 / calc(var(--u) * 48) / calc(var(--u) * 6) stretch;
  background: linear-gradient(180deg, #123048 0%, #0d2538 100%); background-clip: padding-box;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(30, 12, 0, 0.45);
  color: #fff;
}
.basket-title { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); color: #fff3d6; font-size: calc(var(--u) * 48); font-weight: 900; text-shadow: 0 calc(var(--u) * 3) 0 rgba(0, 0, 0, 0.45); }
.basket-icon { display: block; width: calc(var(--u) * 62); height: calc(var(--u) * 56); background: url("/shop/pictures/basket.png") center / contain no-repeat; }
.lines { flex: 1; min-height: 0; margin: calc(var(--u) * 22) 0 calc(var(--u) * 8); padding: 0; list-style: none; overflow-y: auto; }
.line {
  display: flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 92); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 12); margin-bottom: calc(var(--u) * 10);
  border: 0 solid transparent; border-image: url("/shop/pictures/kit/card-cream.png") 78 fill / calc(var(--u) * 26) / calc(var(--u) * 8) stretch;
  color: #4a2a0a; font-size: calc(var(--u) * 21);
}
.line-empty { justify-content: center; text-align: center; color: #6e5232; }
.line-picture { flex: none; width: calc(var(--u) * 70); height: calc(var(--u) * 58); object-fit: contain; }
.line-text { flex: 1; display: flex; flex-direction: column; }
.line-text small { color: #7a5a35; font-size: calc(var(--u) * 16); font-weight: 700; }
.line-remove { flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border: 0; border-radius: 50%; background: none; color: #a0815e; font-size: calc(var(--u) * 34); line-height: 1; font-weight: 900; }
.line-remove:hover { color: #c0392b; }
.buy { flex: none; height: calc(var(--u) * 104); margin: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 44); }
.basket-hint { flex: none; min-height: calc(var(--u) * 30); margin-top: calc(var(--u) * 6); color: #ffb9ad; font-size: calc(var(--u) * 18); text-align: center; }
.arrives { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 20); }
.arrives-anchor { width: calc(var(--u) * 28); height: auto; }

.below { padding: calc(var(--u) * 28) calc(var(--u) * 97) calc(var(--u) * 40); background: linear-gradient(180deg, #6a3410 0%, #58290b 100%); box-shadow: inset 0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(0, 0, 0, 0.25); }
.below .featured { margin-top: 0; }
.orders { margin: calc(var(--u) * 28) auto 0; max-width: calc(var(--u) * 900); color: #fff4dc; text-align: center; }
.orders-title { font-size: calc(var(--u) * 30); font-weight: 900; margin-bottom: calc(var(--u) * 10); }
.orders-list { margin: 0; padding: 0; list-style: none; font-size: calc(var(--u) * 21); font-weight: 700; }
.order { padding: calc(var(--u) * 4) 0; }
.order-delivered { color: #b8f59a; }

/* ---- the windows ---- */

.veil { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 18, 30, 0.55); backdrop-filter: blur(2px); }
.veil[hidden] { display: none; }
.window {
  position: relative; width: min(560px, 100%); padding: 22px 26px 26px;
  border: 0 solid transparent; border-image: url("/shop/pictures/kit/window.png") 228 192 192 fill / 76px 64px 64px / 22px stretch;
  color: #fff; animation: pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes pop { from { transform: scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }
.window-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.window-title { font-size: 30px; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.window-close { position: relative; flex: none; width: 44px; height: 44px; border: 0 solid transparent; background: none; border-image: url("/shop/pictures/kit/button-close.png") 114 fill / 38px / 9px stretch; }
.window-close::before, .window-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 5px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.window-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.window-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.window-close:hover { filter: brightness(1.2); }
.window-body { display: flex; flex-direction: column; gap: 14px; }
.window-text { color: #d9e6f2; font-size: 18px; font-weight: 700; line-height: 1.4; }
.window-form { display: flex; gap: 12px; }
.field {
  flex: 1; min-width: 0; height: 56px; padding: 0 18px;
  border: 0 solid transparent; border-image: url("/shop/pictures/kit/field.png") 57 fill / 19px / 2px stretch;
  background: none; color: #fff; font: inherit; font-size: 20px; font-weight: 800; outline: none;
}
.field::placeholder { color: rgb(112, 142, 172); }
.field:focus { filter: brightness(1.25); }
.window .green { flex: none; height: 56px; padding: 0 22px; font-size: 21px; --u: 1px; }
.window-hint { min-height: 24px; color: #ffb9ad; font-size: 16px; }
.window-link { align-self: flex-start; border: 0; background: none; color: #ffe08a; font-size: 17px; text-decoration: underline; }
.window-test { padding: 10px 14px; border-radius: 12px; background: rgba(255, 220, 120, 0.12); color: #ffe7a8; font-size: 15px; font-weight: 700; }
.window-ordered .ordered-bee { width: 120px; height: auto; margin: 0 auto; }
.ordered-number { color: #ffe08a; font-size: 22px; font-weight: 900; text-align: center; }
.window-ordered .window-text { text-align: center; }
.window-ordered .green { align-self: center; min-width: 200px; }
.shake { animation: shake 0.42s ease; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }

/* ================================================================================================================
   A phone, and every window under 900 pixels
   ================================================================================================================ */

@media (max-width: 899px) {
  :root { --u: 1px !important; --c: 1px !important; }
  .login { --h: 56px; width: calc(100% - 32px); max-width: 420px; margin-top: 18px; font-size: 19px; }

  .banner { --band-w: 143cqw; }
  .banner-body { width: 100%; padding: 22px 16px 0; }
  .banner-airship { position: relative; left: auto; top: auto; width: 96px; margin-bottom: 4px; }
  .banner-cloud-1 { left: -30%; top: 30%; width: 60%; } .banner-cloud-2 { right: -26%; top: 14%; width: 50%; }
  .title-main { font-size: 58px; margin-top: 0; }
  .tagline { max-width: 20em; margin-top: 14px; font-size: 19px; }
  .tagline-more { display: block; }
  .preview-note { width: 100%; max-width: 520px; margin-top: 16px; padding: 12px 18px; border-radius: 22px; font-size: 17px; }
  .banner-band { margin-top: calc(var(--band-h) * -0.1); }
  .pack .price-soon { left: 0; right: 0; bottom: 12px; height: 48px; gap: 8px; }
  .price-label { font-size: 19px; }
  .soon-tag { height: 30px; padding: 0 10px; border-radius: 15px; font-size: 15px; }

  .shelf { padding: 34px 14px 40px; }
  .packs { grid-template-columns: repeat(2, 1fr); gap: 28px 10px; }
  .pack { height: 240px; border-width: 4px; border-radius: 18px; }
  .pack-picture { top: 22px; width: 112px; height: 98px; }
  .pack-amount { top: 126px; font-size: 18px; }
  .pack .price { left: 10px; right: 10px; bottom: 12px; height: 48px; font-size: 20px; border-image-width: 22px; border-image-outset: 6px; }
  .ribbon-top { top: -16px; height: 28px; padding: 0 10px; }
  .ribbon-top .ribbon-text { font-size: 14px; }

  .featured { display: flex; flex-direction: column; height: auto; margin-top: 22px; padding: 14px 10px 18px; border-width: 4px; }
  .featured-art { width: 280px; height: 150px; margin-top: 4px; }
  .featured-rays { left: 60px; top: -30px; width: 170px; height: 170px; }
  .featured-gems { left: 0; top: 46px; width: 104px; }
  .featured-coins { left: 186px; top: 54px; width: 94px; }
  .featured-pack { left: 72px; top: -8px; width: 140px; }
  .featured-name { font-size: 32px; }
  .featured-rule { width: 220px; }
  .holds-picture { width: 64px; height: 50px; }
  .holds-one span { font-size: 18px; }
  .holds-plus { font-size: 28px; }
  .featured-buy { padding: 12px 0 0; }
  .once { font-size: 14px; }
  .featured .price { width: 220px; height: 52px; font-size: 22px; border-image-width: 22px; }

  .closed { padding: 26px 18px 28px; }
  .closed-bee { width: 120px; }
  .closed-title { font-size: 26px; }
  .closed-text { font-size: 17px; }


  body.captain { background: #6b3510 url("/shop/pictures/room.jpg") 28% 0 / auto 100vh fixed no-repeat; }
  .stage { height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 12px 24px; background: none; overflow: visible; }
  .sign-logo { position: relative; left: auto; top: auto; align-self: center; width: min(320px, 86%); padding: 26px 24px 30px;
    background: url("/shop/pictures/sign.webp") center / 100% 100% no-repeat; }
  .harbour { position: relative; left: auto; top: auto; width: 100%; height: 104px; padding: 0 14px 0 8px; gap: 10px; border-image-width: 26px; }
  .crest { width: 88px; height: 82px; margin: 0; }
  .crest-plate { width: 52px; }
  .crest-sign { width: 34px; }
  .harbour-name { font-size: 18px; line-height: 1.1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .harbour-level { height: 30px; margin-top: 4px; padding: 0 18px; font-size: 15px; border-image-width: 15px; }
  .logout { width: 104px; height: 46px; font-size: 16px; border-radius: 23px; }
  .bee-sit { display: none; }
  .counter { position: relative; left: auto; top: auto; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding: 16px 10px 14px; border-radius: 16px;
    background: linear-gradient(180deg, #d9963f 0%, #c07a2c 8%, #a8641e 9%, #b7702a 100%); box-shadow: inset 0 4px 0 rgba(255, 220, 160, 0.6), 0 8px 16px rgba(40, 15, 0, 0.45); }
  .pack-counter { height: 286px; }
  .pack-counter .pack-amount { top: 4px; }
  .pack-counter .amount-number { font-size: 22px; }
  .pack-counter .amount-word { font-size: 14px; }
  .pack-counter .pack-picture { top: 44px; width: 104px; height: 86px; }
  .pack-bonus { top: 132px; height: 64px; }
  .ribbon-stars { width: 150px; height: 44px; }
  .ribbon-stars .ribbon-text { font-size: 15px; margin-top: -9px; }
  .ribbon-stars::before, .ribbon-stars::after { top: 8px; width: 12px; height: 12px; }
  .ribbon-stars::before { left: 14px; }
  .ribbon-stars::after { right: 14px; }
  .pack-extra { top: 40px; font-size: 15px; }
  .pack-extra-gem { width: 20px; }
  .pack-counter .price { left: 2px; right: 2px; height: 46px; font-size: 19px; border-image-width: 22px; border-image-outset: 6px; }
  .basket { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 14px 10px 12px; border-width: 18px; border-image-width: 36px; }
  .basket-title { font-size: 28px; }
  .basket-icon { width: 40px; height: 36px; }
  .lines { margin: 12px 0 6px; max-height: none; }
  .line { min-height: 64px; font-size: 16px; border-image-width: 20px; }
  .line-picture { width: 48px; height: 40px; }
  .line-text small { font-size: 13px; }
  .buy { height: 64px; margin: 0 6px; font-size: 26px; border-image-width: 26px; }
  .basket-hint { min-height: 22px; font-size: 15px; }
  .arrives { font-size: 15px; }
  .arrives-anchor { width: 20px; }
  .below { padding: 18px 12px 28px; }
  .orders-title { font-size: 22px; }
  .orders-list { font-size: 16px; }
  .window { padding: 18px 18px 22px; }
  .window-title { font-size: 24px; }
  .window-form { flex-direction: column; }
  .window .green { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-airship { animation: none; }
  .window { animation: none; }
}