:root {
  --navy: #0b1426;
  --navy-2: #12203d;
  --navy-3: #1b2d52;
  --gold: #e8c470;
  --gold-2: #b8913a;
  --text: #e9edf5;
  --muted: #9fb0cc;
  --ok: #4cd18a;
  --bad: #e2645b;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Cairo", Tahoma, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.7;
}
a { color: var(--gold); text-decoration: none; }
img { max-width: 100%; }

/* navigation */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 24px;
  background: rgba(11, 20, 38, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(232, 196, 112, 0.18);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 20px; color: var(--gold); }
.brand img { width: 34px; height: 34px; }
.nav nav { display: flex; gap: 18px; flex: 1; }
.nav nav a { color: var(--text); font-weight: 600; }
.nav nav a:hover { color: var(--gold); }
.pill { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 99px; background: var(--navy-2); font-size: 14px; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: var(--bad); }

/* hero */
.hero {
  min-height: 92vh;
  display: grid; place-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(11, 20, 38, 0.25) 0%, rgba(11, 20, 38, 0.55) 60%, var(--navy) 100%),
    var(--hero, url("/static/hero.jpg")) center / cover no-repeat;
  padding: 40px 16px;
}
.hero-inner { max-width: 760px; }
.preview-bar { position: sticky; top: 0; z-index: 50; background: var(--gold); color: #1a1205; text-align: center; font-weight: 700; padding: 8px 12px; }
.logo { width: min(320px, 70vw); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6)); }
.hero h1 { font-size: clamp(30px, 5vw, 52px); margin: 6px 0 0; font-weight: 900; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7); }
.hero p { font-size: 19px; margin: 6px 0 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.live { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.live div { background: rgba(18, 32, 61, 0.82); border: 1px solid rgba(232, 196, 112, 0.25); border-radius: var(--radius); padding: 10px 22px; min-width: 130px; }
.live b { display: block; font-size: 26px; color: var(--gold); }
.live span { color: var(--muted); font-size: 14px; }

/* buttons */
.btn { display: inline-block; padding: 10px 26px; border-radius: 10px; font-weight: 700; font-family: inherit; font-size: 16px; cursor: pointer; border: 2px solid var(--gold); transition: transform 0.15s, background 0.15s; }
.btn:hover { transform: translateY(-2px); }
.btn.gold { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #1a1205; }
.btn.ghost { background: rgba(11, 20, 38, 0.6); color: var(--gold); }

/* sections */
.wrap { max-width: 1100px; margin: 0 auto; padding: 64px 20px 10px; }
h2 { font-size: 30px; margin: 0 0 22px; color: var(--gold); font-weight: 900; }
h3 { margin: 0 0 6px; font-size: 19px; }
.card { background: linear-gradient(180deg, var(--navy-2), var(--navy-3)); border: 1px solid rgba(232, 196, 112, 0.16); border-radius: var(--radius); padding: 20px; }
.card p { margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rates div { display: flex; justify-content: space-between; align-items: center; background: var(--navy-2); border-radius: 12px; padding: 12px 16px; border-inline-start: 3px solid var(--gold); }
.rates span { color: var(--muted); direction: ltr; }
.rates b { color: var(--gold); font-size: 20px; direction: ltr; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-weight: 600; }
.form input { font: inherit; padding: 9px 12px; border-radius: 9px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.form input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.msg { min-height: 1.6em; margin: 0; font-weight: 700; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--bad); }
.msg.warn { color: var(--gold); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.steps b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #1a1205; margin-bottom: 8px; }
.steps .btn { margin-top: 12px; }

.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { font: inherit; font-weight: 700; padding: 6px 18px; border-radius: 9px; border: 1px solid rgba(232, 196, 112, 0.3); background: var(--navy-2); color: var(--text); cursor: pointer; }
.tab.active { background: var(--gold); color: #1a1205; }
.table-wrap { overflow-x: auto; padding: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: start; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
th { color: var(--gold); font-weight: 700; }
td.num { direction: ltr; text-align: end; }

.rules p { color: var(--text); }
footer { text-align: center; padding: 40px 16px; color: var(--muted); display: flex; gap: 8px; justify-content: center; align-items: center; }
footer img { width: 26px; }

@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .nav nav { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto; gap: 14px; scrollbar-width: none; padding-bottom: 2px; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { white-space: nowrap; }
  /* on a phone "حسابي" stays in the top row; the menu row fades at its end to show it scrolls */
  .nav a.nav-me { display: inline-flex; margin-inline-start: auto; }
  .nav nav a.me { display: none; }
  .nav nav { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px); padding-inline-end: 24px; }
  .two { grid-template-columns: 1fr; }
  .wrap { padding: 48px 16px 6px; }
}

/* shop */
.narrow { max-width: 420px; }
.shop-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.shop-head select { font: inherit; padding: 6px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; }
.small-btn { padding: 4px 16px; font-size: 14px; }
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pack { text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.pack:hover { transform: translateY(-3px); }
.pack.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.pack .pouches { font-size: 34px; font-weight: 900; color: var(--gold); }
.pack .price { font-size: 22px; font-weight: 700; direction: ltr; }
.pack { position: relative; }
.pack .badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #10182b;
  font-size: 13px; font-weight: 700; padding: 2px 12px; border-radius: 99px; white-space: nowrap; }
.pack-info { list-style: none; padding: 0; margin: 10px 0 12px; font-size: 14px; text-align: start; }
.pack-info li { padding: 4px 0; border-top: 1px solid #22314f; }
.pack-info li::before { content: "✦ "; color: var(--gold); }
.info-box ul { margin: 6px 0 0; padding-inline-start: 20px; }
.info-box li { margin: 4px 0; }
.info-box p { margin: 0; }
.info-box { margin-bottom: 24px; }
.vip-badge { display: inline-block; vertical-align: middle; margin-inline-start: 10px; padding: 3px 14px; border-radius: 99px;
  background: var(--gold); color: #10182b; font-size: 14px; font-weight: 700; }
[hidden] { display: none !important; } /* a display rule must never show a hidden element */
.pay { margin-top: 16px; max-width: 520px; }

/* news, rankings, player pages */
.news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.news-card { display: block; color: inherit; text-decoration: none; transition: transform 0.15s; }
.news-card:hover { transform: translateY(-3px); }
.news-card h3 { margin: 8px 0 6px; }
.news-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.news-excerpt { margin: 0; color: var(--muted, #9fb0d0); white-space: pre-line; }
.news-body { white-space: pre-line; line-height: 1.9; margin-top: 12px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 99px; background: #22314f; color: var(--text); }
.tag-event { background: var(--gold); color: #10182b; }
.tag-update { background: #2f6f5a; }
.tag-state { background: #3a2f6f; }
.player .stats { margin-top: 10px; }
.dot.on { display: inline-block; }

/* phase 4: achievements, invites, tickets */
.ach-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.ach h3 { margin: 0 0 4px; }
.ach p { margin: 4px 0; }
.ach.ready { border-color: var(--gold); }
.ach.claimed { opacity: 0.7; }
.bar-line { height: 8px; background: #22314f; border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.bar-line i { display: block; height: 100%; background: var(--gold); }
.copy-row { display: flex; gap: 8px; margin: 10px 0; }
.copy-row input { flex: 1; font: inherit; padding: 6px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; }
.msg-bubble { background: #13213f; border-radius: 12px; padding: 10px 14px; margin: 10px 0; border-inline-start: 3px solid #2f4370; }
.msg-bubble.staff { border-inline-start-color: var(--gold); background: #1a2a4d; }
.msg-bubble p { margin: 6px 0 0; white-space: pre-line; }
textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; box-sizing: border-box; }
.mt-s { margin-top: 8px; }
.market-bar { flex-wrap: wrap; }
.season-tier { font-size: 20px; margin: 6px 0; }
.big-bar { height: 14px; }
.ss-reward { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ss-reward:not(.reached) { opacity: 0.55; }
details summary { cursor: pointer; color: var(--gold); }
.st-table input { width: 100%; min-width: 70px; box-sizing: border-box; font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.st-table input.num { max-width: 110px; }
.form label span.small { font-weight: 400; }
.rw-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rw { display: inline-flex; align-items: center; gap: 6px; background: #0d1830; border: 1px solid #2f4370; border-radius: 10px; padding: 3px 9px 3px 4px; font-size: 13px; line-height: 1.25; }
.rw img { width: 32px; height: 32px; border-radius: 6px; flex: none; }
.rw > span { display: flex; flex-direction: column; }
.rw em { font-style: normal; color: var(--text); max-width: 150px; }
.rw b { color: var(--gold); font-size: 13px; }
.rw.vip i { font-style: normal; font-size: 20px; width: 32px; text-align: center; }
.rw-list.big .rw img { width: 40px; height: 40px; }
/* shop cards: same height, price at the bottom; items as inventory slots */
.packages { align-items: stretch; }
.pack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pack .price { margin-top: auto; padding-top: 8px; }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0; }
.slot { width: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slot-box { position: relative; width: 52px; height: 52px; border-radius: 10px; background: #0b1426; border: 1px solid #3a4f80;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); display: grid; place-items: center; }
.slot-box img { width: 40px; height: 40px; border-radius: 6px; }
.slot-box .cnt { position: absolute; bottom: -7px; left: -6px; background: var(--gold); color: #10182b; font-size: 11px; font-weight: 800;
  border-radius: 99px; padding: 0 6px; line-height: 16px; min-width: 18px; text-align: center; }
.slot-box.svc { width: 64px; height: 64px; font-size: 32px; }
.slot small { font-size: 12px; line-height: 1.35; text-align: center; color: var(--text); }
/* purchase window */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(4, 8, 18, 0.75); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.modal-box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; scrollbar-width: thin; scrollbar-color: #3a4f80 transparent; }
.modal-box::-webkit-scrollbar { width: 8px; }
.modal-box::-webkit-scrollbar-thumb { background: #3a4f80; border-radius: 8px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box h3 { margin: 0 0 12px; }
.modal-x { position: absolute; top: 10px; left: 12px; background: none; border: 0; color: var(--text); font-size: 26px; cursor: pointer; line-height: 1; }
.pay-item { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 10px; padding: 14px; border-radius: 12px; background: #0d1830; border: 1px solid #2f4370; margin-bottom: 12px; }
.pay-item .slots { margin: 0; justify-content: center; }
.pay-item b { font-size: 17px; }
.pay-item p { margin: 4px 0 0; }
.pay-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #22314f; }
.pay-rows select { font: inherit; padding: 5px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; }
.pay-rows .total { border-bottom: 0; font-size: 18px; }
.pay-rows .total b { color: var(--gold); font-size: 22px; }
#paypal-buttons { margin-top: 12px; }
.btn.wide { width: 100%; margin-top: 12px; }
.secure { text-align: center; margin: 10px 0 0; }
.big-ok { font-size: 16px; text-align: center; }
body.modal-open { overflow: hidden; }
.pack-icon { width: 48px; height: 48px; border-radius: 10px; display: block; margin: 4px auto 0; }
.inv-item { display: inline-flex; align-items: center; gap: 8px; }
.inv-item img { width: 28px; height: 28px; border-radius: 5px; }
.log-box { max-height: 420px; overflow: auto; font: 12px/1.5 Consolas, monospace; white-space: pre-wrap; word-break: break-all; text-align: left; margin: 0; }
.check, .form label.check { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.market-bar input { flex: 1; min-width: 200px; }
.market-bar select { font: inherit; padding: 6px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; }
.mt { margin-top: 28px; }

/* account pages */
.center { text-align: center; }
.narrow-page { max-width: 560px; }
.big { font-size: 19px; font-weight: 700; }
.okc { color: var(--ok); }
.errc { color: var(--bad); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.wrap > .panel-head { margin-bottom: 22px; }
.pane { margin-top: 10px; }
.charpick { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; margin-bottom: 8px; }
.charpick select, .pay input { font: inherit; padding: 6px 10px; border-radius: 9px; background: #0d1830; color: var(--text); border: 1px solid #2f4370; }
.pay label { display: grid; gap: 4px; margin-bottom: 10px; font-weight: 600; }
.nav nav a.me { color: var(--gold); }
.nav .nav-me { display: none; }

/* admin */
.qr { display: block; margin: 8px auto; background: #fff; padding: 8px; border-radius: 10px; width: 220px; }
code { background: #0d1830; padding: 2px 8px; border-radius: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat span { color: var(--muted); font-size: 14px; display: block; }
.stat b { color: var(--gold); font-size: 22px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar i { display: block; width: 70%; background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-radius: 6px 6px 0 0; min-height: 2px; }
.bar span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar input, .cmd input, .cmd select, .form select, .sw-row input { font: inherit; padding: 7px 11px; border-radius: 9px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.searchbar input { flex: 1; }
.list a { display: block; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--text); }
.list a:hover { color: var(--gold); }
.cmd { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }

/* one look for every dropdown and checkbox on the site (comes last so it wins over the older rules) */
select, .shop-head select, .pay-rows select, .market-bar select, .charpick select, .cmd select, .form select, .searchbar select {
  font: inherit; color: var(--text); cursor: pointer; min-height: 40px; padding: 7px 14px 7px 36px; border-radius: 10px;
  border: 1px solid #2f4370; background-color: #0d1830; transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8c470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 12px 8px;
}
select:hover { border-color: #4a6299; }
select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 112, 0.2); }
select option { background: #0d1830; color: var(--text); }
input[type="checkbox"] { accent-color: var(--gold); width: 18px; height: 18px; cursor: pointer; margin: 0; }
.searchbar { align-items: center; flex-wrap: wrap; }
.searchbar .check { white-space: nowrap; }
/* guide page */
.guide-steps { display: grid; gap: 12px; }
.guide-steps .card { display: flex; gap: 16px; align-items: flex-start; }
.guide-steps .card > b { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #10182b; font-size: 20px; }
.guide-steps h3 { margin: 2px 0 6px; }
.guide-steps p { margin: 0; }
.faq { display: grid; gap: 10px; }
.faq details summary { font-weight: 700; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; line-height: 1.9; }
/* admin charts: horizontal bars */
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; font-size: 14px; }
.hbar i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--gold), #b8913e); min-width: 4px; }
.hbar b { color: var(--gold); text-align: center; }
.bars { justify-content: center; }
.bar { max-width: 56px; }
/* event banner on the home page */
.event-banner { padding-top: 24px; padding-bottom: 0; }
.event-banner .card { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; text-align: center; }
.event-banner .card.live { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 0 24px rgba(232, 196, 112, 0.25); }
.event-banner .card > b { color: var(--gold); font-size: 18px; }
/* clan war tab */
.cw-head { margin-bottom: 12px; display: grid; gap: 8px; }
.cw-last { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }

/* admin: operations centre */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 12px; margin-inline-start: 4px; }
.badge.amber { background: var(--gold); color: #1a1205; }
.ops-list { display: grid; gap: 10px; }
.ops-item { display: flex; gap: 14px; align-items: center; justify-content: space-between; width: 100%; text-align: start; font: inherit; color: var(--text); cursor: pointer;
  background: var(--navy-2); border: 1px solid #2f4370; border-inline-start: 5px solid var(--gold); border-radius: 12px; padding: 12px 16px; }
.ops-item.red { border-inline-start-color: var(--bad); }
.ops-item:hover, .ops-item:focus-visible { border-color: var(--gold); outline: none; }
.ops-item b { font-size: 16px; }
.ops-item .n { font-size: 24px; font-weight: 900; color: var(--gold); min-width: 2ch; text-align: center; }
.ops-item.red .n { color: var(--bad); }
.ops-item .muted { display: block; margin-top: 2px; }
.ops-ok { text-align: center; padding: 26px; color: var(--ok); font-weight: 700; }
/* admin: applied state of settings */
.state { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--navy-2); white-space: nowrap; }
.state.applied { color: var(--ok); } .state.failed { color: var(--bad); } .state.restart, .state.waiting, .state.server_down { color: var(--gold); }
/* admin: site content */
.ct-hero { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ct-hero img { width: 160px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid #2f4370; background: var(--navy-2); }
.ct-sections { display: grid; gap: 6px; }
.ct-sections div { display: flex; align-items: center; gap: 8px; background: var(--navy-2); border-radius: 10px; padding: 6px 10px; }
.ct-sections label { flex: 1; margin: 0; flex-direction: row; align-items: center; gap: 8px; }
.ct-list { display: grid; gap: 10px; }
.ct-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 8px; align-items: start; background: var(--navy-2); border-radius: 12px; padding: 8px; }
.ct-row textarea { min-height: 42px; }
.ct-frames { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ct-frame { overflow: hidden; border: 1px solid #2f4370; border-radius: 12px; background: var(--navy); }
.ct-frame iframe { border: 0; transform-origin: top right; display: block; }
.ct-frame.phone { width: 300px; height: 560px; } .ct-frame.phone iframe { width: 375px; height: 700px; transform: scale(0.8); }
.ct-frame.desk { width: 640px; height: 400px; max-width: 100%; } .ct-frame.desk iframe { width: 1280px; height: 800px; transform: scale(0.5); }
.ct-frames > div { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct-row [data-del] { justify-self: start; }
  .ops-item { padding: 10px 12px; }
  .ct-frame.desk { width: 320px; height: 200px; } .ct-frame.desk iframe { transform: scale(0.25); }
}

/* admin: suspending parts of the site */
.sw-list { display: grid; gap: 10px; }
.sw-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--navy-2); border-radius: 12px; padding: 10px 14px; border-inline-start: 4px solid var(--ok); }
.sw-row.on { border-inline-start-color: var(--bad); }
.sw-row > div { flex: 1 1 200px; }
.sw-row input { flex: 2 1 220px; }
.sw-row input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.site-notice { background: #3a1d1d; color: #ffd9d4; border-bottom: 1px solid var(--bad); text-align: center; padding: 8px 14px; font-weight: 700; }
.site-notice p { margin: 2px 0; }
/* admin: shop and rewards editor */
.cg-row { background: var(--navy-2); border-radius: 12px; padding: 12px; margin-top: 10px; display: grid; gap: 8px; }
.cg-row h4 { margin: 0; color: var(--gold); }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.cg-sale { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.cg-sale label { flex: 1 1 140px; }
.cg-sale label.check { flex: 0 0 auto; }
.cg-tools { display: flex; gap: 6px; justify-content: flex-end; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ip-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); border: 1px solid #2f4370; border-radius: 10px; padding: 4px 6px; font-size: 14px; }
.ip-chip img { width: 28px; height: 28px; border-radius: 4px; }
.ip-chip input { width: 84px; padding: 4px 6px; }
.ip-chip button { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 15px; }
.ip-search { position: relative; }
.ip-res { position: absolute; z-index: 20; inset-inline: 0; top: 100%; max-height: 260px; overflow: auto; background: var(--navy); border: 1px solid var(--gold); border-radius: 10px; padding: 4px; }
.ip-res button { display: flex; width: 100%; gap: 8px; align-items: center; background: none; border: 0; color: var(--text); padding: 6px 8px; cursor: pointer; text-align: start; font: inherit; border-radius: 8px; }
.ip-res button:hover, .ip-res button:focus-visible { background: var(--navy-2); }
.ip-res img { width: 24px; height: 24px; }

/* admin: calendar, health centre, rights of one staff member */
.cal-day h3 { margin: 0 0 8px; }
.cal-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--navy-2); margin-top: 6px; border-inline-start: 4px solid #2f4370; }
.cal-item.maintenance { border-inline-start-color: var(--bad); }
.cal-item.event { border-inline-start-color: var(--gold); }
.cal-item.offer, .cal-item.season { border-inline-start-color: var(--ok); }
.cal-item > span:nth-child(2) { flex: 1; }
.cal-time { min-width: 7.5em; color: var(--gold); font-weight: 700; }
.ops-item.hl { cursor: default; }
.ops-item.hl.ok { border-inline-start-color: var(--ok); }
.ops-item.hl .muted { display: block; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin: 8px 0; }
.perm-grid label.check { margin: 0; }
.perm-grid label.changed { color: var(--gold); }
@media (max-width: 720px) {
  .cal-item { flex-wrap: wrap; }
}

/* admin: client updates */
#up-progress { width: 100%; height: 10px; accent-color: var(--gold); }
#up-files { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; font-size: 14px; }
#up-files::file-selector-button { font: inherit; border: 1px solid var(--gold); background: var(--navy-2); color: var(--gold); border-radius: 8px; padding: 4px 10px; margin-inline-end: 8px; cursor: pointer; }

/* admin: assistant */
.ai-chat { max-height: 460px; overflow-y: auto; display: grid; gap: 8px; padding: 4px; }
.ai-msg { border-radius: 12px; padding: 10px 14px; background: var(--navy-2); max-width: 92%; }
.ai-msg p { margin: 0; white-space: pre-line; line-height: 1.8; }
.ai-msg.user { justify-self: start; border-inline-start: 3px solid var(--gold); }
.ai-msg.assistant { justify-self: end; background: #13213f; }
.ai-msg.error { color: var(--bad); }
.ai-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-ask { display: flex; gap: 8px; margin-top: 10px; }
.ai-ask input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 9px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.ai-note { background: #13213f; border-inline-start: 3px solid var(--gold); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.ai-note p { margin: 6px 0; line-height: 1.8; }
.ai-note ol, .ai-note ul { margin: 6px 0; padding-inline-start: 22px; line-height: 1.8; }
.ai-strip { margin: 10px 0; }
.ai-log { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 220px; overflow: auto; background: #0d1830; padding: 8px; border-radius: 8px; }
.ai-changes { display: grid; gap: 6px; margin: 8px 0; }
.ai-change { align-items: flex-start; background: var(--navy-2); border-radius: 10px; padding: 8px 10px; }
.ai-change span { line-height: 1.8; }
.ai-change .nw { white-space: nowrap; display: inline-block; }
/* helper for players (guide page + support tab) */
.helper { margin-top: 14px; }
.helper-a { white-space: pre-line; line-height: 1.9; }
.helper-row { display: flex; gap: 8px; }
.helper-row input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 9px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.helper-top { margin: 0 0 14px; }
/* admin: sections above the tabs */
.a-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(232, 196, 112, 0.18); }
.a-group { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.a-group:hover, .a-group:focus-visible { color: var(--text); border-color: rgba(232, 196, 112, 0.3); outline: none; }
.a-group.active { color: var(--gold); border-color: var(--gold); background: var(--navy-2); }
#a-tabs .tab { font-size: 15px; }
@media (max-width: 720px) {
  .a-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .a-group { padding: 7px 4px; font-size: 13px; line-height: 1.4; }
  #a-tabs .tab { font-size: 14px; padding: 6px 12px; }
}
/* admin: approvals */
.ap-list { display: grid; gap: 10px; }
.ap-item { background: var(--navy-2); border-radius: 12px; padding: 10px 14px; border-inline-start: 4px solid var(--muted); min-width: 0; }
.ap-item.amber { border-inline-start-color: var(--gold); } .ap-item.ok { border-inline-start-color: var(--ok); } .ap-item.red { border-inline-start-color: var(--bad); }
.ap-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.ap-sum { margin: 6px 0; overflow-wrap: anywhere; line-height: 1.8; }
.ap-item p { margin: 4px 0; }
.ap-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ap-act input { flex: 1 1 200px; min-width: 0; font: inherit; padding: 7px 10px; border-radius: 9px; border: 1px solid #2f4370; background: #0d1830; color: var(--text); }
.state.amber { color: var(--gold); } .state.ok { color: var(--ok); } .state.red { color: var(--bad); }
.msg.pend { color: var(--gold); }
/* account: starter gifts */
.sg-kit { margin: 8px 0; }
.ach .charpick { display: grid; gap: 4px; margin: 6px 0; }
.ach .charpick select { width: 100%; }