/* Pirates Empire website (2026-10-08): the front page, the registration, the account. Dark wood, gold, the sea. */
:root {
  --gold: #f3cf7a;
  --gold-deep: #c99a3c;
  --gold-dark: #7a5a24;
  --ink: #f4ead2;
  --ink-soft: #cbbd9c;
  --wood: #2a1a0d;
  --wood-dark: #160d06;
  --panel: rgba(18, 11, 5, 0.86);
  --red: #ff8a7a;
  --green: #8fe08f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: #0a0704;
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, Arial, sans-serif;
}
a { color: var(--gold); }
a:hover { color: #fff1c4; }
h1, h2, h3, .title { font-family: "Cinzel", Georgia, "Times New Roman", serif; letter-spacing: .02em; }
.hidden { display: none !important; }

/* ---------- framed panels (the wooden boxes with a gold edge) ---------- */
.panel {
  background: linear-gradient(180deg, rgba(40, 26, 12, .92), rgba(16, 10, 4, .92));
  border: 1px solid var(--gold-dark);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 140, .12);
}
.panel-head {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(201, 154, 60, .35);
  font: 700 13px/1.2 "Cinzel", Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.panel-head a { font: 600 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.panel-body { padding: 12px 14px 14px; }

/* ---------- fields and buttons ---------- */
label.f { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], select {
  width: 100%; padding: 9px 11px; font: inherit; color: #1a1209;
  background: linear-gradient(180deg, #fbfbfb, #d9d9d9);
  border: 1px solid #8a8a8a; border-radius: 3px; outline: none;
}
select { color: #1a1209; }
input:focus, select:focus { box-shadow: 0 0 0 2px var(--gold-deep); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; min-height: 38px;
  font: 700 12px/1 "Cinzel", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--gold); cursor: pointer;
  background: linear-gradient(180deg, #3a2a18, #120b05);
  border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 140, .25), 0 0 0 1px rgba(201, 154, 60, .35);
}
.btn:hover { color: #fff1c4; background: linear-gradient(180deg, #4c3820, #1a1007); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary {
  color: #2a1606; background: linear-gradient(180deg, #ffe39a, #d39a33 55%, #a8721e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px #6b4512, 0 6px 18px rgba(0, 0, 0, .45);
}
.btn.primary:hover { color: #000; background: linear-gradient(180deg, #fff0bf, #e2ad48 55%, #b57d25); }
.btn.big { font-size: 15px; padding: 14px 28px; min-height: 52px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.msg { min-height: 18px; margin-top: 10px; font-size: 13px; }
.msg.ok { color: var(--green); }
.msg.bad { color: var(--red); }
.note { color: var(--ink-soft); font-size: 13px; }

/* ---------- the front page ---------- */
.hero {
  position: relative; min-height: min(100vh, 860px);
  background: #0a0704 url("img/hero.webp?v=_ybNFaeoLb") center top / cover no-repeat;
  display: grid; grid-template-columns: 300px 1fr 300px; gap: 20px; align-items: start;
  padding: 120px 28px 30px;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(180deg, transparent, #0a0704); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .login { grid-column: 1; }
.hero .stats { grid-column: 3; }
.stats .stat { display: flex; justify-content: space-between; padding: 6px 0; font: 700 13px/1.2 "Cinzel", Georgia, serif; letter-spacing: .05em; color: var(--gold); text-transform: uppercase; }
.stats .stat b { color: #fff; font-family: "Segoe UI", system-ui, sans-serif; font-size: 16px; letter-spacing: 0; }
.lang { position: relative; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border: 1px solid rgba(201, 154, 60, .4); border-radius: 3px; background: rgba(0, 0, 0, .35); font-size: 13px; }
/* the language: the chosen flag, a list of all of them (the game's 21) */
.lang-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: rgba(201, 154, 60, .5); background: rgba(255, 220, 140, .06); }
.lang-btn .caret { color: var(--gold); font-size: 11px; }
.flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); object-fit: cover; flex: 0 0 auto; }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; width: 230px; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: linear-gradient(180deg, #2b1c0e, #140c05); border: 1px solid var(--gold-dark); border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .65);
}
.lang-list li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 3px; cursor: pointer; color: var(--ink); outline: none; }
.lang-list li:hover, .lang-list li:focus { background: rgba(255, 220, 140, .1); }
.lang-list li[aria-selected="true"] { color: var(--gold); font-weight: 700; }
.board-top { overflow: visible; }
.board-lang { position: absolute; top: 12px; right: 12px; margin: 0; background: rgba(0, 0, 0, .55); z-index: 5; }
.cta { display: flex; justify-content: center; margin-top: -40px; position: relative; z-index: 2; }
.about { max-width: 1100px; margin: 34px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.about h2 { color: var(--gold); margin: 0 0 10px; font-size: 24px; }
.about ul { margin: 0; padding-left: 20px; color: var(--ink); }
.about li { margin: 5px 0; }
.about li::marker { color: var(--gold); }
.nav-bottom { max-width: 700px; margin: 34px auto 0; padding: 0 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nav-bottom .btn { min-height: 48px; font-size: 14px; }
/* the footer, as the launcher's: the legal lines and the P mark with PIRATESEMPIRE */
footer { margin-top: 40px; padding: 22px 16px 30px; text-align: center; color: #b9ab8a; font-size: 12.5px; border-top: 1px solid rgba(201, 154, 60, .18); }
.board-page footer { border-top: 0; margin-top: 24px; text-shadow: 0 1px 3px #000; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; line-height: 1.6; }
.foot-line i { font-style: normal; color: #8d7f62; margin: 0 7px; }
.foot-line a { color: #d8c9a4; text-decoration: none; }
.foot-line a:hover { color: var(--gold); text-decoration: underline; }
.foot-brand { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0; }
.foot-brand img { width: 30px; height: 30px; }
.foot-brand span { font: italic 700 20px/1 "Cinzel", Georgia, serif; letter-spacing: .08em; color: var(--gold); background: linear-gradient(180deg, #ffe7a6, #c99a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.legal-body .legal-sec { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(201, 154, 60, .2); scroll-margin-top: 20px; }
.legal-body h2 { font-size: 17px; color: var(--gold); margin: 0 0 6px; }
.legal-sec:target h2 { color: #fff1c4; }

/* ---------- the registration and the account (a framed wooden board) ---------- */
.board-page { background: #0a0704 url("img/hero.webp?v=_ybNFaeoLb") center / cover fixed no-repeat; min-height: 100vh; padding: 30px 16px; }
.board {
  max-width: 1040px; margin: 0 auto;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #3b2513, #24160b 40%, #1b1008);
  border: 3px solid #120a04; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--gold-dark), 0 24px 70px rgba(0, 0, 0, .7);
}
.board-top {
  height: 170px; position: relative; display: flex; justify-content: center; align-items: center;
  background: #0a0704 url("img/hero-960.webp?v=PQASLrTNd-") center 82% / cover no-repeat;
  border-bottom: 3px solid #120a04; box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .55);
}
.board-top > a img { height: 150px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }
.board-top a { display: block; }
.board-body { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 28px 34px 32px; }
.board-body h1 { font-size: 22px; color: var(--gold); margin: 0 0 12px; }
.board-body p { margin: 0 0 12px; color: var(--ink); }
.board-body ul { padding-left: 20px; margin: 0 0 14px; }
.board-body li { margin: 4px 0; }
.board-body li::marker { color: var(--gold); }
.form-grid { display: grid; grid-template-columns: 170px 1fr; gap: 12px 14px; align-items: center; }
.form-grid label { font-size: 13px; font-weight: 700; color: var(--gold); text-align: left; }
.form-grid .hint { grid-column: 2; margin-top: -8px; font-size: 12px; color: var(--ink-soft); }
.form-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 22px; }
.form-actions .btn { min-width: 150px; }
.done { text-align: center; padding: 10px 0; }
.done h1 { font-size: 26px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin-bottom: 18px; }
.kv span { color: var(--ink-soft); font-size: 13px; }
.kv b { color: #fff; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.badge.ok { background: rgba(143, 224, 143, .15); color: var(--green); border: 1px solid rgba(143, 224, 143, .4); }
.badge.no { background: rgba(255, 138, 122, .12); color: var(--red); border: 1px solid rgba(255, 138, 122, .4); }
.section-title { font: 700 15px/1.2 "Cinzel", Georgia, serif; color: var(--gold); margin: 22px 0 6px; letter-spacing: .05em; text-transform: uppercase; }

/* the registration's consent */
.accept { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; color: var(--ink); cursor: pointer; }
.accept input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gold-deep); }
.accept-links { margin: 4px 0 0 28px; font-size: 12px; }
.accept-links i { font-style: normal; color: #8d7f62; margin: 0 6px; }
/* the legal texts */
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px; font-size: 13px; }
.legal-body h3 { font: 700 14px/1.3 "Segoe UI", system-ui, sans-serif; color: #f1dfb2; margin: 16px 0 6px; }
.legal-body p, .legal-body li { font-size: 14px; line-height: 1.6; }
.legal-body h4 { font: 700 13px/1.3 "Segoe UI", system-ui, sans-serif; color: var(--gold); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.legal-form { padding: 10px 14px; border: 1px dashed rgba(201, 154, 60, .5); border-radius: 4px; background: rgba(0, 0, 0, .25); }
.legal-form p { margin: 4px 0; }

/* ---------- after the login (/main): a top bar, the welcome, the cards, Discord - over the launcher's picture ---------- */
.main-page {
  background:
    linear-gradient(180deg, rgba(6, 9, 14, .55) 0, rgba(6, 9, 14, .78) 420px, rgba(6, 9, 14, .96) 900px),
    #06090e url("img/hero.webp?v=_ybNFaeoLb") center top / cover fixed no-repeat;
}
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px max(16px, calc((100vw - 1240px) / 2));
  background: rgba(7, 10, 16, .82); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(243, 207, 122, .12);
}
.tb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.tb-brand img { width: 40px; height: 40px; }
.tb-brand span { display: flex; flex-direction: column; line-height: 1; font-family: "Cinzel", Georgia, serif; color: #fff; }
.tb-brand b { font-size: 17px; letter-spacing: .08em; }
.tb-brand small { font-size: 11px; letter-spacing: .32em; color: var(--gold); margin-top: 3px; }
.tb-nav { display: flex; gap: 6px; }
.tb-nav a { padding: 10px 18px; color: #dfe4ec; text-decoration: none; font: 700 13px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-radius: 6px; }
.tb-nav a:hover, .tb-nav a[aria-current="page"] { color: var(--gold); background: rgba(243, 207, 122, .07); }
.tb-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.tb-online { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #c9d1dc; white-space: nowrap; }
.tb-online b { color: #fff; font-size: 14px; letter-spacing: .04em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3ad46b; box-shadow: 0 0 0 3px rgba(58, 212, 107, .18); flex: 0 0 auto; }
.dot.grey { background: #8a93a0; box-shadow: 0 0 0 3px rgba(138, 147, 160, .18); }
.tb-lang { margin: 0; padding: 2px; border-radius: 999px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.tb-lang .lang-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user { position: relative; }
.tb-name {
  padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #2a1606;
  background: linear-gradient(180deg, #ffe39a, #e0aa45); box-shadow: 0 6px 22px rgba(224, 170, 69, .35);
}
.tb-name:hover { background: linear-gradient(180deg, #fff0bf, #ebb655); }
.tb-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; background: #0e131c; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.tb-menu a, .tb-menu button { display: block; width: 100%; padding: 10px 12px; text-align: left; font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; color: #dfe4ec; text-decoration: none; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.tb-menu a:hover, .tb-menu button:hover { background: rgba(243, 207, 122, .1); color: var(--gold); }

.mn { max-width: 1240px; margin: 0 auto; padding: 90px 20px 20px; }
.mn-hello { margin: 0 0 40px; font-size: clamp(40px, 7vw, 92px); line-height: 1.05; color: #f6efe0; letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.mn-notice { margin: -20px 0 30px; padding: 14px 18px; border-radius: 10px; background: rgba(58, 212, 107, .12); border: 1px solid rgba(58, 212, 107, .4); color: #d8f5e1; }
.mn-grid { display: grid; grid-template-columns: 1fr 290px; gap: 20px; }
.mn-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.mn-wood {
  padding: 34px 34px 30px; display: flex; flex-direction: column; text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #4a2c14, #2d1a0b 55%, #22130a);
}
.mn-wood h2 { margin: 6px 0 18px; font-size: 40px; line-height: 1.05; color: #f3cf7a; background: linear-gradient(180deg, #ffe7a6, #c99a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.mn-wood p { margin: 0; padding: 18px 0; border-top: 1px solid rgba(243, 207, 122, .25); border-bottom: 1px solid rgba(243, 207, 122, .25); font-weight: 600; color: #f1e6cc; line-height: 1.55; }
.mn-facts { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; margin: auto 0 0; padding-top: 20px; text-align: left; }
.mn-facts dt { color: #d9c8a2; font-size: 14px; }
.mn-facts dd { margin: 0; color: #fff; font-weight: 700; }
.mn-art { background: #0a0704 url("img/hero-960.webp?v=PQASLrTNd-") center / cover no-repeat; min-height: 260px; }
.mn-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.mn-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 26px;
  border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, rgba(20, 30, 46, .92), rgba(12, 18, 29, .95));
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .15s, border-color .15s;
}
.mn-card:hover { transform: translateY(-3px); border-color: rgba(243, 207, 122, .45); color: #fff; }
.mn-ico { position: absolute; top: 26px; left: 26px; width: 42px; height: 42px; color: #f3c24f; }
.mn-arrow { position: absolute; top: 22px; right: 24px; font-size: 20px; color: #f3c24f; }
.mn-card small { font: 800 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #aeb7c4; }
.mn-card strong { font: 700 24px/1.15 "Cinzel", Georgia, serif; }

.mn-discord {
  margin-top: 20px; display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center;
  padding: 50px 54px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 26, 42, .94), rgba(10, 17, 29, .96));
  border: 1px solid rgba(255, 255, 255, .1);
}
.mn-kicker { font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #f3c24f; }
.mn-discord h2 { margin: 14px 0 16px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; color: #f6efe0; }
.mn-discord p { margin: 0 0 26px; color: #b9c3d0; font-size: 16px; line-height: 1.6; max-width: 560px; }
.mn-ghost { display: inline-block; padding: 14px 22px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: #fff; text-decoration: none; font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.mn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.dc-box { border-radius: 10px; overflow: hidden; background: #2b2d31; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.dc-head { display: flex; align-items: center; gap: 10px; padding: 20px; background: #5865f2; color: #fff; }
.dc-head b { font: 800 20px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .02em; }
.dc-head span { margin-left: auto; font-size: 13px; }
.dc-body { padding: 18px 20px 8px; }
.dc-stat { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: #dbdee1; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dc-stat b { margin-left: auto; color: #fff; font-size: 18px; }
.dc-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 16px; color: #949ba4; font-size: 13px; }
.dc-foot a { padding: 9px 16px; background: #3a3c42; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; }
.dc-foot a:hover { background: #4a4d55; color: #fff; }
.main-page footer { border-top-color: rgba(255, 255, 255, .08); }

/* the download (/download) */
.dl { padding-top: 70px; }
.dl-head { text-align: center; margin-bottom: 44px; }
.dl-head h1 { margin: 16px 0 14px; font-size: clamp(38px, 6vw, 76px); line-height: 1.05; color: #f6efe0; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.dl-head p { margin: 0; color: #c9d1dc; font-size: 16px; }
.dl-card {
  max-width: 990px; margin: 0 auto; padding: 48px 40px 52px; text-align: center; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 32, 52, .95), rgba(10, 17, 29, .97));
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.dl-card h2 { margin: 0 0 22px; font-size: clamp(28px, 3.4vw, 40px); color: #f6efe0; }
.dl-card > p { margin: 0 0 30px; color: #b9c3d0; }
.dl-tabs { display: flex; justify-content: center; gap: 8px; padding: 6px; margin: 0 auto 30px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); }
.dl-tabs button { padding: 11px 18px; border: 0; border-radius: 999px; background: none; color: #dfe4ec; cursor: pointer; font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.dl-tabs button:hover { color: var(--gold); }
.dl-tabs button[aria-selected="true"] { color: #2a1606; background: linear-gradient(180deg, #ffe39a, #e0aa45); }
.dl-panel { max-width: 510px; margin: 0 auto; padding: 30px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); }
.dl-logo { width: 48px; height: 48px; margin-bottom: 6px; }
.dl-panel b { color: #fff; font-size: 17px; }
.dl-panel small { color: #9aa5b3; font-size: 13px; }
.dl-btn {
  margin-top: 12px; padding: 15px 24px; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #2a1606;
  background: linear-gradient(180deg, #ffe39a, #e0aa45); box-shadow: 0 6px 22px rgba(224, 170, 69, .35);
}
.dl-btn:hover { background: linear-gradient(180deg, #fff0bf, #ebb655); color: #000; }
.dl-btn:disabled { cursor: not-allowed; color: #8a93a0; background: #232a35; box-shadow: none; }
/* the direct zip under the installer button */
.dl-alt { display: block; margin-top: 12px; }
.dl-alt a { color: #9aa5b3; text-decoration: underline; }
.dl-alt a:hover { color: #e2b85c; }

/* the account (/account): a side list and the overview */
.acc { padding-top: 70px; }
.acc-head { margin-bottom: 40px; }
.acc-head h1 { margin: 14px 0 12px; font-size: clamp(38px, 6vw, 80px); line-height: 1.05; color: #f6efe0; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.acc-head p { margin: 0; color: #c9d1dc; font-size: 16px; }
.acc-card { display: grid; grid-template-columns: 250px 1fr; min-height: 460px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(20, 32, 52, .95), rgba(10, 17, 29, .97)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.acc-side { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px 14px; border-right: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .18); }
.acc-side hr { width: 100%; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 10px 0; }
.acc-item { display: block; width: 100%; padding: 14px 14px; text-align: left; border: 0; border-radius: 8px; background: none; color: #c9d1dc; text-decoration: none; cursor: pointer; font: 700 14px/1.2 "Segoe UI", system-ui, sans-serif; }
.acc-item:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.acc-item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
.acc-item.out { color: #ff9a8a; }
.acc-item.out:hover { color: #ffb8ad; }
.acc-main { padding: 46px 48px 50px; display: flex; flex-direction: column; justify-content: center; }
.acc-ahoy { margin: 0 0 22px; text-align: left !important; font-size: 26px; color: var(--gold); overflow-wrap: anywhere; }
.acc-kv { grid-template-columns: 170px 1fr; gap: 14px 18px; margin: 0; align-items: center; }
.acc-kv span { font-size: 14px; }
.acc-kv b { font-size: 16px; overflow-wrap: anywhere; }
.acc-pay { display: inline-flex; align-items: center; gap: 10px; }
.pay-flag { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); object-fit: cover; flex: 0 0 auto; }
.acc-main h2 { margin: 0 0 10px; text-align: center; font-size: 28px; color: var(--gold); }
.acc-lead { margin: 0 0 30px; text-align: center; color: #b9c3d0; }
.acc-fields { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; }
.acc-label { display: block; margin: 16px 0 8px; font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #dfe4ec; }
.acc-val { padding: 15px 18px; border-radius: 10px; background: rgba(4, 8, 15, .7); border: 1px solid rgba(255, 255, 255, .1); color: #fff; overflow-wrap: anywhere; }
.acc-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-split code { font: 14px/1.4 Consolas, "Segoe UI Mono", monospace; color: #e6e9ee; overflow-wrap: anywhere; min-width: 0; }
.acc-copy { flex: 0 0 auto; padding: 7px 12px; border: 1px solid rgba(243, 207, 122, .4); border-radius: 6px; background: none; color: var(--gold); cursor: pointer; font: 700 12px/1 "Segoe UI", system-ui, sans-serif; }
.acc-copy:hover { background: rgba(243, 207, 122, .1); }
.acc-resend { margin-top: 12px; }
.acc-resend .mn-ghost { cursor: pointer; background: none; }
.acc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* the account's store box, packs and purchases (2026-10-14) */
.acc-shop { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 18px 22px; border-radius: 12px; background: rgba(243, 207, 122, .06); border: 1px solid rgba(243, 207, 122, .28); }
.acc-shop-txt { min-width: 0; }
.acc-no { display: block; margin-top: 6px; font: 700 26px/1.1 "Cinzel", Georgia, serif; color: var(--gold); }
.acc-hint { margin: 6px 0 0; color: #b9c3d0; font-size: 13px; }
.acc-buy { flex: 0 0 auto; display: inline-block; padding: 14px 24px; border-radius: 999px; text-decoration: none; color: #1a1006; background: linear-gradient(180deg, #ffe7a6, #c99a3c); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); font: 800 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.acc-buy:hover { color: #1a1006; filter: brightness(1.08); }
.acc-buy:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.acc-main .section-title { margin-top: 30px; margin-bottom: 12px; }
/* (a tall card - the purchases: the side menu stays at the top, beside the greeting) */
.acc-side { justify-content: flex-start; padding-top: 46px; }
.acc-orders td.oid { line-height: 1.5; }
.acc-packs { display: flex; flex-wrap: wrap; gap: 12px; }
.acc-pack { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 14px 18px; border-radius: 10px; background: rgba(4, 8, 15, .7); border: 1px solid rgba(255, 255, 255, .1); border-left: 4px solid var(--gold-deep); }
.acc-pack b { color: #fff; font-size: 15px; }
.acc-pack span { color: #b9c3d0; font-size: 13px; }
.acc-pack.t1 { border-left-color: #c58a52; }
.acc-pack.t2 { border-left-color: #c9d1dc; }
.acc-pack.t3, .acc-pack.queen { border-left-color: var(--gold); }
.acc-empty { margin: 0; color: #9aa6b5; font-size: 14px; }
.acc-orders-wrap { overflow-x: auto; }
.acc-orders { width: 100%; border-collapse: collapse; font-size: 14px; }
.acc-orders th { padding: 10px 12px; text-align: left; font: 800 11px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #dfe4ec; border-bottom: 1px solid rgba(255, 255, 255, .15); white-space: nowrap; }
.acc-orders td { padding: 12px; color: #e6e9ee; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: top; }
.acc-orders td small { display: block; margin-top: 2px; color: #9aa6b5; font-size: 12px; }
.acc-orders td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-orders td.oid { font: 13px/1.4 Consolas, "Segoe UI Mono", monospace; color: #c9d1dc; overflow-wrap: anywhere; }
.acc-orders tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.badge.st-paid { background: rgba(143, 224, 143, .15); color: var(--green); border: 1px solid rgba(143, 224, 143, .4); }
.badge.st-refunded, .badge.st-canceled { background: rgba(255, 138, 122, .12); color: var(--red); border: 1px solid rgba(255, 138, 122, .4); }
.badge.st-pending { background: rgba(243, 207, 122, .12); color: var(--gold); border: 1px solid rgba(243, 207, 122, .4); }

/* ---------- helpers ---------- */
.mt0 { margin-top: 0 !important; }
.mt14 { margin-top: 14px; }
.span-all { grid-column: 1 / -1; }
.done-actions { max-width: 560px; margin: 18px auto 0; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 54vw 16px 24px; background-size: 100% auto; background-color: #0a0704; }
  .hero .login, .hero .stats { grid-column: 1; }
  .cta { margin-top: 18px; }
  .about { grid-template-columns: 1fr; }
  .nav-bottom { grid-template-columns: 1fr; }
  .board-body { grid-template-columns: 1fr; padding: 22px 18px 24px; gap: 22px; }
  .board-top { height: 130px; }
  .board-top > a img { height: 112px; }
  .form-grid { grid-template-columns: 1fr; gap: 6px; }
  .form-grid .hint { grid-column: 1; margin-top: 0; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv b { margin-bottom: 8px; }
  .topbar { grid-template-columns: 1fr auto; padding: 10px 16px; }
  .tb-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .tb-nav a { padding: 8px 10px; font-size: 12px; }
  .tb-online > span { display: none; }
  .tb-lang .lang-name { display: none; }
  .tb-name { padding: 10px 14px; max-width: 130px; }
  .mn { padding-top: 40px; }
  .mn-hello { margin-bottom: 24px; }
  .mn-grid, .mn-feature, .mn-discord { grid-template-columns: 1fr; }
  .mn-side { grid-template-rows: none; }
  .mn-card { min-height: 170px; }
  .mn-discord { padding: 30px 22px; gap: 26px; }
  .mn-wood { padding: 26px 22px; }
  .mn-wood h2 { font-size: 32px; }
  .dl { padding-top: 40px; }
  .dl-card { padding: 30px 16px 34px; }
  .acc { padding-top: 40px; }
  .acc-card { grid-template-columns: 1fr; }
  .acc-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 12px; }
  .acc-side hr { display: none; }
  .acc-item { width: auto; padding: 10px 12px; }
  .acc-main { padding: 28px 18px 32px; }
  .acc-pair { grid-template-columns: 1fr; }
  .acc-shop { flex-direction: column; align-items: stretch; padding: 16px; }
  .acc-buy { text-align: center; }
  .acc-pack { flex: 1 1 100%; min-width: 0; }
  /* the purchases as one card per order, each value with its column's name */
  .acc-orders thead { display: none; }
  .acc-orders, .acc-orders tbody, .acc-orders tr, .acc-orders td { display: block; width: 100%; }
  .acc-orders tr { margin-bottom: 12px; padding: 6px 14px; border-radius: 10px; background: rgba(4, 8, 15, .7); border: 1px solid rgba(255, 255, 255, .1); }
  .acc-orders td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; }
  .acc-orders tr td:last-child { border-bottom: 0; }
  .acc-orders td::before { content: attr(data-label); font: 800 10px/1.6 "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #9aa6b5; }
  .acc-orders td > .badge { justify-self: start; }
  .acc-orders td small { grid-column: 2; margin-top: -6px; }
}
/* phones (2026-10-08): no double logo in the board's header, the language as its flag only, the registration's
   form first, fields at 16px (iOS zooms into smaller ones), no fixed backgrounds (iOS draws them enlarged), the
   footer's links without the dots that wrapped to a line's start */
@media (max-width: 900px) {
  input[type=text], input[type=password], input[type=email], select { font-size: 16px; }
  .board-page, .main-page { background-attachment: scroll; }
  .board-top { background-position: center bottom; }
  .board-lang { top: 8px; right: 8px; padding: 0; }
  .board-lang .lang-name { display: none; }
  #regBody > section:last-child { order: -1; }
  .foot-line { gap: 2px 14px; }
  .foot-line i { display: none; }
  .acc-ahoy { font-size: 22px; }
  .mn-ghost { letter-spacing: .08em; line-height: 1.3; }
}
@media (max-width: 420px) {
  .tb-brand span { display: none; }
}

/* ---------- the payment page (/payment, 2026-10-18: Seafight's "Payment", Empire Coupons only) ---------- */
.pay-page { background: radial-gradient(ellipse at top, #2a1a0d 0%, #0a0704 70%); }
.pay-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid rgba(201, 154, 60, .3); background: rgba(10, 6, 3, .8); }
.pay-who { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-weight: 600; }
.pay-link { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.pay { max-width: 1120px; margin: 28px auto 40px; padding: 0 16px; }
.pay-win { background: linear-gradient(180deg, #24170b, #140c05); border: 2px solid var(--gold-dark); border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, .6); }
.pay-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; background: #0e0804; border-bottom: 1px solid var(--gold-dark); }
.pay-title h1 { margin: 0; font-size: 24px; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }
.pay-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.pay-bal { color: var(--ink-soft); font-size: 14px; }
/* the window's top right: Support (a small panel), the language's flag */
.pay-title { position: relative; }
.pay-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pay-tool { position: relative; }
.pay-tool-btn { padding: 6px 10px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--gold); font: 600 13px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.pay-tool-btn:hover, .pay-tool-btn[aria-expanded="true"] { border-color: rgba(201, 154, 60, .5); background: rgba(255, 220, 140, .06); text-decoration: underline; }
.pay-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; padding: 12px 14px; background: linear-gradient(180deg, #2b1c0e, #140c05); border: 1px solid var(--gold-dark); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, .65); color: var(--ink); font-size: 13px; line-height: 1.45; }
.pay-pop h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-dark); font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.pay-pop p { margin: 0 0 8px; color: var(--ink-soft); }
.pay-pop-links { list-style: none; margin: 0; padding: 0; }
.pay-pop-links li { padding: 4px 0; }
.pay-pop-links a { color: var(--gold); word-break: break-all; }
.pay-lang { margin: 0 0 0 6px; padding: 2px 4px; }
/* the account's payment country (2026-10-21): a fixed label, not a button */
.pay-country { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 6px; padding: 6px 10px; border: 1px solid rgba(201, 154, 60, .4); border-radius: 3px; background: rgba(0, 0, 0, .35); font-size: 13px; color: var(--ink); cursor: default; white-space: nowrap; }
.pay-cc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 16px; border-radius: 2px; font-size: 10px; letter-spacing: .5px; color: var(--gold); box-shadow: 0 0 0 1px rgba(201, 154, 60, .5); }
.pay-lang .lang-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-bal b { color: var(--gold); }
.pay-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0; padding: 14px 24px 0; }
.pay-steps li { padding: 8px 4px 10px; text-align: center; font: 700 13px/1.2 "Cinzel", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #7d705a; border-bottom: 3px solid transparent; }
.pay-steps li i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-size: 12px; }
.pay-steps li.on { color: var(--gold); border-bottom-color: var(--gold); }
.pay-steps li.done { color: var(--ink-soft); }
.pay-body { padding: 20px 24px 26px; }
.pay-body h2 { margin: 0 0 10px; font-size: 20px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.pay-muted { color: var(--ink-soft); }
.pay-muted.small { font-size: 13px; font-style: italic; }
.pay-shop { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.pay-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--gold-dark); margin-bottom: 14px; }
.pay-tab { padding: 9px 18px; background: #1b1108; border: 1px solid var(--gold-dark); border-bottom: 0; border-radius: 4px 4px 0 0; color: var(--ink-soft); font: 700 13px/1 "Cinzel", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pay-tab.on { background: #3a2612; color: var(--gold); box-shadow: inset 0 2px 0 var(--gold); }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.pay-tabs { flex-wrap: wrap; }
/* the Ship designs: 2 rows of 4 between the arrows, "1 / 6" under them; on a phone 2 a row, the arrows below */
.pay-pager { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "prev grid next" ". no ."; gap: 10px 8px; align-items: center; }
.pay-pager .pay-grid { grid-area: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pay-arrow { width: 40px; height: 64px; display: grid; place-items: center; padding: 0 0 4px; border-radius: 4px; border: 1px solid var(--gold-dark); background: linear-gradient(180deg, #3a2612, #22160a); color: var(--gold); font: 700 34px/1 Georgia, serif; cursor: pointer; }
.pay-arrow.prev { grid-area: prev; }
.pay-arrow.next { grid-area: next; }
.pay-arrow:hover:not(:disabled) { border-color: var(--gold); filter: brightness(1.18); }
.pay-arrow:disabled { opacity: .3; cursor: not-allowed; }
.pay-pageno { grid-area: no; text-align: center; color: var(--ink-soft); font: 700 14px/1 "Cinzel", Georgia, serif; letter-spacing: .1em; }
.pay-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; padding: 24px; border: 1px dashed var(--gold-dark); border-radius: 6px; background: rgba(27, 17, 8, .55); color: var(--ink-soft); text-align: center; }
.pay-soon b { color: var(--gold); font: 700 18px/1.2 "Cinzel", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.pay-art.ship { height: 124px; }
.pay-art.ship img { width: auto; height: auto; max-width: 100%; max-height: 124px; margin: 0; }
.pay-dn { font: 700 16px/1.2 "Cinzel", Georgia, serif; color: var(--gold); min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.pay-card.owned { border-style: dashed; }
.pay-card.owned .pay-art { opacity: .6; }
.pay-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 14px; background: linear-gradient(180deg, #3a2612, #22160a); border: 1px solid var(--gold-dark); border-radius: 5px; text-align: center; }
.pay-card:hover { border-color: var(--gold); }
.pay-art { height: 90px; display: flex; align-items: center; justify-content: center; }
.pay-art img { width: 58px; height: 58px; image-rendering: auto; margin: 0 -10px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.pay-n { font: 700 24px/1.1 "Cinzel", Georgia, serif; color: var(--gold); }
.pay-w { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pay-price { margin: 6px 0 10px; font-size: 19px; font-weight: 700; color: #fff; }
.pay-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 22px; border-radius: 4px; border: 1px solid var(--gold-dark); background: #2e1e0e; color: var(--gold); font: 700 13px/1 "Cinzel", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pay-btn:hover:not(:disabled) { filter: brightness(1.18); }
.pay-btn.primary { background: linear-gradient(180deg, #f0c560, #c9922e); color: #2a1606; border-color: #f3d488; }
.pay-btn.small { min-height: 34px; padding: 8px 14px; font-size: 11px; }
.pay-btn.wide { width: 100%; }
.pay-btn.big { min-width: 220px; min-height: 52px; font-size: 16px; }
.pay-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-cart { background: #0e0804; border: 1px solid var(--gold-dark); border-radius: 5px; padding: 14px 16px 16px; }
.pay-cart h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-dark); font-size: 15px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.pay-lines { list-style: none; margin: 0; padding: 0; min-height: 160px; }
.pay-lines li { display: grid; grid-template-columns: 1fr auto 26px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(201, 154, 60, .25); font-size: 14px; }
.pay-lines li.pay-empty { display: block; color: #8f826a; border: 0; }
.pay-rm { width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--gold-dark); background: #2e1e0e; color: var(--gold); cursor: pointer; line-height: 1; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; padding-top: 10px; border-top: 1px solid var(--gold-dark); }
.pay-total span { font: 700 15px/1 "Cinzel", Georgia, serif; color: var(--gold); text-transform: uppercase; }
.pay-total b { font-size: 22px; color: var(--gold); }
.pay-method { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 2px solid var(--gold); border-radius: 5px; background: #3a2612; cursor: pointer; }
.pay-method input { width: 20px; height: 20px; accent-color: var(--gold-deep); }
.pay-method b { display: block; font-size: 19px; color: var(--gold); }
.pay-method small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.pay-coupon-ico { flex: none; display: grid; place-items: center; width: 64px; height: 44px; border-radius: 4px; background: linear-gradient(135deg, #f0c560, #8d6220); color: #2a1606; font: 700 18px/1 "Cinzel", Georgia, serif; }
.pay-order { display: flex; justify-content: space-between; gap: 20px; margin: 18px 0; padding: 14px 18px; background: #0e0804; border: 1px solid var(--gold-dark); border-radius: 5px; }
.pay-order h3 { margin: 0 0 6px; font-size: 14px; color: var(--gold); text-transform: uppercase; }
.pay-order ul { margin: 0; padding-left: 18px; color: var(--ink); }
.pay-order-total { text-align: right; }
.pay-order-total span { display: block; color: var(--gold); font-weight: 700; text-transform: uppercase; font-size: 13px; }
.pay-order-total b { font-size: 26px; color: var(--gold); }
.pay-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.pay-nav.center { justify-content: center; }
.pay-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 6px; }
.pay-pin-row { display: flex; align-items: center; gap: 8px; }
.pay-pin-row span { color: var(--gold); font-size: 22px; font-weight: 700; }
.pay-pin-row input { width: 104px; padding: 12px 6px; text-align: center; font: 700 24px/1 Consolas, "Courier New", monospace; letter-spacing: .18em; color: #1a1209; background: #f6efdc; border: 2px solid var(--gold-deep); border-radius: 4px; outline: none; }
.pay-pin-row input:focus { box-shadow: 0 0 0 3px rgba(243, 207, 122, .5); }
.pay-sum { margin: 14px 0 6px; padding: 6px 18px; background: #0e0804; border: 1px solid var(--gold-dark); border-radius: 5px; }
.pay-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(201, 154, 60, .25); }
.pay-sum > div:last-child { border-bottom: 0; }
.pay-sum b { font-size: 21px; color: var(--gold); }
.pay-sum .ok, .pay-sum .ok b { color: var(--green); font-weight: 700; }
.pay-sum .bad, .pay-sum .bad b { color: var(--red); font-weight: 700; }
.pay-login { max-width: 420px; margin: 10px auto; }
.pay-login .pay-btn { margin-top: 16px; width: 100%; }
.pay-done { text-align: center; padding: 20px 0; }
.pay-done img { width: 96px; height: 96px; }
.pay-done h2 { font-size: 28px; }
@media (max-width: 860px) {
  .pay-shop { grid-template-columns: 1fr; }
  .pay-steps li { font-size: 11px; }
  .pay-steps li i { display: none; }
  .pay-pin-row input { width: 64px; font-size: 18px; letter-spacing: .08em; }
  .pay-order { flex-direction: column; }
  .pay-order-total { text-align: left; }
}
@media (max-width: 640px) {
  .pay-title { padding: 10px 16px; }
  .pay-tools { width: 100%; justify-content: flex-end; }
  .pay-tool { position: static; }
  .pay-pop { left: 12px; right: 12px; top: 100%; width: auto; }
  .pay-lang .lang-name { display: none; }
  .pay-country #pyCountryName { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .pay-pager { grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "grid grid grid" "prev no next"; }
  .pay-pager .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-arrow { width: 48px; height: 44px; }
}

/* the Open Beta closed (the owner, 2026-10-22): one notice on the home, download, registration and main pages */
.beta-closed { margin: 12px auto 14px; max-width: 980px; padding: 12px 18px; border: 1px solid var(--gold-deep); border-radius: 6px;
  background: linear-gradient(180deg, rgba(43, 28, 14, 0.94), rgba(20, 12, 5, 0.94)); color: var(--ink); text-align: center; }
.beta-closed strong { display: block; font: 700 18px/1.3 "Cinzel", Georgia, serif; letter-spacing: .04em; color: var(--gold); }
.beta-closed span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; }
.board > .beta-closed { margin: 10px 16px 0; }

/* GDPR (2026-10-22): the account page's "My data" - the copy of the data and the deletion request */
.acc-data { max-width: 460px; }
.acc-data-row { margin: 10px 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mn-ghost.danger { color: var(--red); border-color: var(--red); }

/* Hapi H: the server a download belongs to (and the other server's one) */
.dl-server { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.dl-server a { color: var(--gold); }