:root {
  --bg: #120c1e;
  --bg-2: #1d1430;
  --card: rgba(34, 24, 54, .82);
  --line: rgba(255, 190, 140, .22);
  --text: #f6f0ff;
  --muted: #b8aacb;
  --accent: #ee4854;
  --accent-2: #ffb27a;
  --warm: #ffc36b;
  --ok: #50dc82;
  --bad: #f05a5a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 14.5px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent-2); }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(16px, calc((100% - 1080px) / 2));
  background: rgba(14, 9, 28, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .06em; }
.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.topbar nav a:hover { background: rgba(255, 190, 140, .12); }
.topbar nav a.btn { background: var(--accent); }

/* buttons */
.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 12px; font-weight: 700; border: 1px solid transparent;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.small { padding: 8px 16px; }
.btn.big { padding: 16px 34px; font-size: 1.1rem; border-radius: 14px; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }

/* hero */
.hero {
  background:
    linear-gradient(180deg, rgba(18, 12, 32, .35) 0%, rgba(18, 12, 32, .9) 100%),
    url("/assets/img/background.jpg") center bottom / cover no-repeat;
  padding: 72px 0 96px;
  text-align: center;
}
.hero-logo { width: min(420px, 82%); height: auto; filter: drop-shadow(0 8px 30px rgba(238, 72, 84, .45)); }
.hero h1 { margin: 12px 0 8px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; }
.lead { color: var(--muted); max-width: 640px; margin: 0 auto 28px; font-size: 1.1rem; }
.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-radius: 999px; font-weight: 600;
  background: rgba(14, 9, 28, .7); border: 1px solid var(--line);
}
.status .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); }
.status.on .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.status.off .dot { background: var(--bad); }

/* sections */
.section { padding: 56px 0 8px; }
.section h2 { font-size: 1.7rem; margin: 0 0 22px; }
.cards { display: grid; gap: 18px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
}
.card h3 { margin: 6px 0 6px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); }
.num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); font-weight: 800;
}
.news { display: grid; gap: 14px; }
.news-item time { color: var(--warm); font-size: .85rem; font-weight: 700; }

.footer { margin-top: 64px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

@media (max-width: 560px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .hero { padding: 48px 0 64px; }
}

/* forms and text pages */
.narrow { width: min(640px, 100% - 32px); margin-inline: auto; }
.lead.left { margin-left: 0; text-align: left; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input:not([type]) {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(14, 9, 28, .8); color: var(--text); font: inherit;
}
.field input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.field small { color: var(--muted); font-size: .85rem; min-height: 1.2em; }
.field.bad input { border-color: var(--bad); }
.field.bad small { color: #ff8f8f; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { display: flex; gap: 22px; }
.choice label, .check label { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.alert { background: rgba(240, 90, 90, .15); border: 1px solid var(--bad); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.steps { padding-left: 20px; color: var(--muted); }
.steps li { margin: 6px 0; }
.steps strong { color: var(--text); }
.prose li { margin: 10px 0; }
.muted { color: var(--muted); }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

/* account area */
.center { text-align: center; }
.alert.ok { background: rgba(80, 220, 130, .12); border-color: var(--ok); }
.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.account-head h2 { margin: 0; }
.account-head p { margin: 4px 0 0; }
.account-actions { display: flex; gap: 10px; align-items: center; }
.account-actions form { margin: 0; }
.account-actions button { cursor: pointer; font: inherit; }
.stats .stat { display: grid; gap: 4px; }
.stats .stat strong { font-size: 1.5rem; }
.stats .stat .small-text { font-size: 1rem; word-break: break-all; }
.block-title { margin: 34px 0 14px; font-size: 1.2rem; }
.chars { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.char { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: linear-gradient(135deg, var(--accent), #7a2a5a); }
.on-text { color: var(--ok); font-weight: 600; }
.footer { text-align: center; }
.footer-inner { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* landing page */
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: float 9s ease-in-out infinite; }
.o1 { width: 340px; height: 340px; background: #ee4854; top: -80px; left: -60px; }
.o2 { width: 300px; height: 300px; background: #ffb347; bottom: -120px; right: 8%; animation-delay: -3s; }
.o3 { width: 220px; height: 220px; background: #ff7a45; top: 30%; right: -60px; animation-delay: -6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } html { scroll-behavior: auto; } }

.numbers { list-style: none; padding: 0; margin: 38px auto 0; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.numbers li { background: rgba(14, 9, 28, .6); border: 1px solid var(--line); border-radius: 16px; padding: 14px 24px; min-width: 190px; backdrop-filter: blur(6px); }
.numbers strong { display: block; font-size: 1.5rem; color: var(--warm); }
.numbers span { color: var(--muted); font-size: .9rem; }

.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.section-head p { margin: 0; }

.cards.features { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feature { transition: transform .15s ease, border-color .15s ease; }
.feature:hover { transform: translateY(-4px); border-color: var(--accent); }
.ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.6rem; background: linear-gradient(135deg, rgba(238, 72, 84, .35), rgba(255, 140, 96, .2)); margin-bottom: 8px; }

.gallery-band { margin-top: 56px; background: linear-gradient(180deg, transparent, rgba(36, 22, 54, .7), transparent); }
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.shot { display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.shot:hover img { transform: scale(1.05); }
.shot.empty { display: grid; place-items: center; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem;
  background: radial-gradient(circle at 30% 20%, rgba(238, 72, 84, .25), transparent 55%), linear-gradient(135deg, #2a1a3e, #150e24); }

.faq { display: grid; gap: 12px; max-width: 760px; margin-inline: auto; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details[open] summary { margin-bottom: 8px; color: var(--accent-2); }
.faq p { margin: 0; color: var(--muted); }

.cta-band { margin-top: 64px; padding: 64px 0; text-align: center;
  background: radial-gradient(circle at 20% 0%, rgba(238, 72, 84, .35), transparent 50%), radial-gradient(circle at 90% 100%, rgba(255, 154, 98, .25), transparent 50%), #1d1230; border-block: 1px solid var(--line); }
.cta-band h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.cta-band .lead { margin-bottom: 22px; }

/* two columns, sidebar and data pages */
.section-head.left { text-align: left; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }
.news-item.featured { border-color: var(--accent); background: linear-gradient(135deg, rgba(238, 72, 84, .18), var(--card)); }
.news-item.featured h3 { font-size: 1.35rem; }
.sidebar { display: grid; gap: 16px; }
.widget h3 { margin: 0 0 10px; font-size: 1rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .06em; }
.widget p { margin: 8px 0; }
.btn.wide { display: block; text-align: center; margin-top: 8px; }
.status.inline { padding: 6px 14px; }
.toplist { list-style: none; margin: 0; padding: 0; counter-reset: pos; display: grid; gap: 6px; }
.toplist li { display: flex; justify-content: space-between; counter-increment: pos; }
.toplist li::before { content: counter(pos) "."; color: var(--warm); font-weight: 700; margin-right: 8px; }
.toplist li a { flex: 1; }
.toplist li span { color: var(--muted); font-size: .85rem; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(14, 9, 28, .8); color: var(--text); font: inherit; }
.table-card { padding: 0; overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255, 190, 140, .05); }
.pos { font-weight: 800; color: var(--muted); }
.pos.top1 { color: #ffd34d; } .pos.top2 { color: #d4d8e6; } .pos.top3 { color: #e0a070; }
.profile { display: flex; gap: 22px; align-items: center; margin-top: 22px; }
.avatar.big { width: 86px; height: 86px; font-size: 2.2rem; flex: none; }
.profile h3 { margin: 0 0 10px; font-size: 1.5rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 24px; margin: 0; }
.facts dt { color: var(--muted); font-size: .8rem; text-transform: uppercase; }
.facts dd { margin: 2px 0 0; font-weight: 700; }
.bazaar-soon { border-color: var(--accent); }
.bazaar-soon .tag { display: inline-block; background: var(--accent); border-radius: 999px; padding: 2px 12px; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.checks { padding-left: 20px; color: var(--muted); }
.checks li { margin: 6px 0; }
.bazaar-preview { margin-top: 24px; opacity: .55; }
.listing .thumb { aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(135deg, #2a1a3e, #150e24); margin-bottom: 12px; }
.listing .line { height: 10px; border-radius: 6px; background: rgba(255, 190, 140, .15); margin: 8px 0; }
.line.w60 { width: 60%; } .line.w40 { width: 40%; }
.listing .price { margin-top: 12px; color: var(--warm); font-weight: 800; }

/* ===== framed layout (three columns, game-site style) ===== */
:root { --gold: #c8923a; --gold-soft: #ffe2a8; }
body.framed { background: #0d0814 url("/assets/img/background.jpg") center top / cover fixed no-repeat; }
body.framed::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(13, 8, 20, .55), rgba(13, 8, 20, .86)); z-index: -1; }
.masthead { text-align: center; padding: 22px 12px 10px; }
.masthead img { max-width: min(360px, 80%); height: auto; filter: drop-shadow(0 6px 24px rgba(238, 72, 84, .45)); }
.shell { width: min(1240px, 100% - 24px); margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.left, .content, .right { min-width: 0; }

.panel { background: rgba(22, 14, 36, .93); border: 2px solid var(--gold); border-radius: 10px; margin-bottom: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px #3a2410, 0 10px 28px rgba(0, 0, 0, .5); }
.panel-head { font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: .09em; text-align: center; padding: 9px 12px;
  color: var(--gold-soft); background: linear-gradient(180deg, #6b2340, #3a1428); border-bottom: 2px solid var(--gold); text-shadow: 0 1px 0 #000; font-size: .95rem; font-weight: 700; }
.panel-head.gold { background: linear-gradient(180deg, #d98a2b, #8a4a12); color: #fff3d6; }
.panel-body { padding: 14px; }
.panel .small, .small { font-size: .9rem; margin: 0 0 8px; }
.panel form { margin: 0; }

.btn.wide { display: block; text-align: center; margin-top: 8px; width: 100%; }
.btn.download { background: linear-gradient(180deg, #46a552, #2a6b33); border: 1px solid #1d4d24; margin-bottom: 14px; padding: 12px; }
.btn.orange { background: linear-gradient(180deg, #ffa43a, #d9661a); color: #fff; }
.btn.disabled { opacity: .55; cursor: default; pointer-events: none; }

.menu { display: grid; gap: 8px; }
.menu-group, .menu-link { background: rgba(22, 14, 36, .93); border: 2px solid var(--gold); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #3a2410, 0 6px 18px rgba(0, 0, 0, .4); }
.menu-group summary, .menu-link { display: block; list-style: none; cursor: pointer; font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: .08em; text-align: center;
  padding: 10px 12px; color: var(--gold-soft); background: linear-gradient(180deg, #6b2340, #3a1428); font-weight: 700; font-size: .9rem; text-decoration: none; position: relative; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary::after { content: "▾"; position: absolute; right: 12px; transition: transform .15s ease; }
.menu-group[open] summary::after { transform: rotate(180deg); }
.menu-group a { display: block; padding: 9px 16px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); font-size: .92rem; }
.menu-group a:hover { background: rgba(255, 190, 140, .1); color: var(--gold-soft); }
.menu-link:hover { filter: brightness(1.15); }

.infobar { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; padding: 11px 14px; margin-bottom: 16px; border-radius: 10px;
  background: linear-gradient(180deg, #4a1a35, #2a1022); border: 2px solid var(--gold); box-shadow: 0 0 0 1px #3a2410; }
.infobar a { color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.infobar a:hover { text-decoration: underline; }
.infobar .sep { width: 1px; height: 18px; background: rgba(255, 226, 168, .35); }
.online-count { display: inline-flex; align-items: center; gap: 8px; }
.online-count .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.online-count.on .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.online-count.on { color: #8fffb0 !important; }

.updates { list-style: none; margin: 0; padding: 0; }
.updates li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.updates li:last-child { border-bottom: 0; }
.updates time { color: var(--warm); font-weight: 600; }
.updates strong { color: var(--gold-soft); }

.welcome h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.welcome p { color: var(--muted); }
.welcome .hero-actions { justify-content: flex-start; margin: 18px 0; }
.welcome .numbers { justify-content: flex-start; margin: 0; }
.welcome .numbers li { min-width: 0; padding: 10px 16px; }
.welcome .numbers strong { font-size: 1.15rem; }

.news-list { padding: 0; }
.news-post { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.news-post:last-child { border-bottom: 0; }
.news-post header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.news-post h3 { margin: 0; color: var(--gold-soft); font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.news-post time { color: var(--warm); font-size: .85rem; }
.news-post p { margin: 8px 0 0; color: var(--text); opacity: .9; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature { display: flex; gap: 12px; align-items: flex-start; }
.feature .ico { flex: none; margin: 0; }
.feature h3 { margin: 0 0 2px; font-size: 1rem; color: var(--gold-soft); }
.feature p { margin: 0; color: var(--muted); font-size: .9rem; }

.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps-row h3 { margin: 6px 0 4px; font-size: 1rem; color: var(--gold-soft); }
.steps-row p { margin: 0; color: var(--muted); font-size: .9rem; }

.panel .faq { max-width: none; display: block; padding: 0; }
.faq details { padding: 12px 18px; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
.faq details:last-child { border-bottom: 0; }

/* old standalone pages now live inside the center column */
.content .wrap { width: auto; margin: 0; }
.content .section { padding: 0 0 16px; }
.content .narrow { width: auto; max-width: 640px; margin: 0; }
.content .card { border-color: var(--gold); }
.content .section > h2, .center .section-head h2 { font-family: Georgia, "Times New Roman", serif; color: var(--gold-soft); }

@media (max-width: 1050px) {
  .shell { grid-template-columns: 1fr; }
  .feature-grid, .steps-row { grid-template-columns: 1fr; }
  .menu { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ===== lighter theme: parchment panels over a brighter background ===== */
body.framed::before { background: linear-gradient(180deg, rgba(70, 36, 80, .12), rgba(30, 16, 40, .5)); }
.panel, .menu-group, .content .card {
  --text: #3b2a1a; --muted: #7a6650; --line: rgba(122, 84, 30, .28); --card: #f1e4cc; --accent-2: #9a3b1c; --warm: #a85f10;
  color: var(--text);
}
.panel { background: linear-gradient(180deg, #f7ecd7, #eddcbf); }
.menu-group { background: linear-gradient(180deg, #f7ecd7, #eddcbf); }
.content .card { background: linear-gradient(180deg, #f7ecd7, #eddcbf); }
.menu-group a { color: var(--text); }
.menu-group a:hover { background: rgba(154, 59, 28, .1); color: #7a2a3a; }
.updates strong, .news-post h3, .feature h3, .steps-row h3, .widget h3, .content .section > h2, .content .section-head h2, .content .card h3 { color: #7a2a3a; }
.news-post p, .welcome p { color: #4a3826; opacity: 1; }
.updates time, .news-post time { color: #a85f10; }
.welcome h1 { color: #5a1f3a; }
.toplist li::before { color: #a85f10; }
.panel .btn.ghost, .content .card .btn.ghost { color: #5a1f3a; border-color: rgba(90, 31, 58, .45); }
.panel .btn.ghost:hover { background: rgba(90, 31, 58, .08); }
.numbers li { background: rgba(255, 255, 255, .55); border-color: rgba(122, 84, 30, .35); backdrop-filter: none; }
.numbers strong { color: #8a3a12; }
.numbers span { color: #6e5a44; }
.search input, .field input[type=text], .field input[type=email], .field input[type=password], .field input:not([type]) {
  background: #fffaf0; color: #3b2a1a; border-color: rgba(122, 84, 30, .45);
}
.field input:focus { outline: 2px solid #c8923a; }
.field small { color: #7a6650; }
.field.bad small { color: #b3261e; }
.table th { color: #7a6650; }
.table tbody tr:hover { background: rgba(154, 59, 28, .07); }
.pos { color: #7a6650; }
.shot.empty { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6), transparent 55%), linear-gradient(135deg, #e6d2ad, #d6bd90); color: #7a6650; }
.listing .thumb { background: linear-gradient(135deg, #e6d2ad, #d6bd90); }
.listing .line { background: rgba(122, 84, 30, .2); }
.alert { background: rgba(179, 38, 30, .1); border-color: #b3261e; color: #5a1410; }
.alert.ok { background: rgba(46, 140, 80, .12); border-color: #2e8c50; color: #14401f; }
.on-text { color: #1f8a46; }
.card .muted, .panel .muted { color: #7a6650; }
.content .narrow p.lead.left, .content .section > .lead { color: #f3e8d6; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.content .section > h2, .content .section-head h2 { text-shadow: none; }
.content > .section > h2, .content > .section > p, .content > .section > .section-head p { color: #fff3d6; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.content > .section > h2 { color: #ffe2a8; }
.content > .section > p a { color: #ffd18a; }
.content .section-head p.muted { color: #f1e2c6; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.content .section-head h2 { color: #ffe2a8; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

/* shop */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { position: relative; text-align: center; padding: 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .45); }
.plan h3 { margin: 0 0 6px; color: #7a2a3a; }
.plan .price { margin: 0; font-size: 1.2rem; font-weight: 800; color: #8a3a12; }
.plan.featured { border: 2px solid #d98a2b; background: rgba(255, 214, 140, .35); }
.plan .badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #d98a2b; color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pay-methods { display: grid; gap: 14px; }
.pay { display: flex; gap: 14px; align-items: flex-start; }
.pay-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 12px; background: rgba(154, 59, 28, .12); }
.pay h3 { margin: 0 0 2px; color: #7a2a3a; }
.pay p { margin: 0; color: #4a3826; }
.how { margin: 0 0 10px; padding-left: 20px; }
.how li { margin: 8px 0; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }

/* account page */
.kv th { width: 120px; text-transform: none; letter-spacing: 0; font-size: .85rem; }
.actions-row { display: flex; gap: 8px; margin: 12px 0 0; }
.add-row td { text-align: center; padding: 10px; }
.field small.error { color: #b3261e; }

/* shop / vip */
.perks { margin: 8px 0 0 18px; }
form.plan { display: flex; flex-direction: column; gap: 8px; }
form.plan select { padding: 6px; border-radius: 6px; border: 1px solid #c9b48f; background: #fffaf0; }
form.plan .btn[disabled] { opacity: .5; cursor: not-allowed; }
.raid-banner { width: 100%; height: auto; display: block; border-radius: 6px; }

/* shop tiles and purchase dialog */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; cursor: pointer; font: inherit; color: inherit;
  background: #fffaf0; border: 2px solid #d9c49a; border-radius: 10px; transition: transform .12s, border-color .12s, box-shadow .12s; }
.tile:hover, .tile:focus-visible { transform: translateY(-2px); border-color: #c58a1b; box-shadow: 0 4px 12px rgba(80, 40, 20, .2); outline: none; }
.tile-art { display: flex; justify-content: center; align-items: center; min-height: 64px; }
.tile-art svg { width: 64px; height: 64px; }
.tile-art svg.gem { width: 36px; height: 36px; margin: 0 -4px; }
.tile-price { color: #9a3b1c; font-weight: 700; margin: 0; }
.buy { border: 2px solid #8a5a2b; border-radius: 12px; padding: 0; max-width: 460px; width: calc(100% - 32px); background: #fbf3df; color: #3d2a1a; }
.buy::backdrop { background: rgba(20, 8, 24, .6); }
.buy form { padding: 20px; position: relative; }
.buy-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #7a6650; }
.buy-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.buy-head h3 { margin: 0; }
.buy h4 { margin: 14px 0 6px; }
.pay-choices { display: grid; gap: 8px; }
.pay-choice { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit;
  background: #fffaf0; border: 2px solid #d9c49a; border-radius: 8px; }
.pay-choice .pay-ico { grid-row: span 2; font-size: 1.4rem; text-align: center; }
.pay-choice small { color: #7a6650; }
.pay-choice:hover:not([disabled]) { border-color: #c58a1b; background: #fff3d6; }
.pay-choice[disabled] { opacity: .5; cursor: not-allowed; }

/* security key */
.keybox { font-family: Consolas, "Courier New", monospace; font-size: 1.7rem; letter-spacing: .12em; text-align: center; padding: 18px 12px; margin: 16px 0; border: 2px dashed var(--line); border-radius: 14px; background: rgba(255, 255, 255, .06); font-weight: 700; user-select: all; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form input { flex: 1 1 180px; }
@media print { .masthead, .left, .right, .footer, .actions-row, .btn { display: none !important; } }