/* V6.5 — visual identity only. Existing layouts, content and behavior remain
   in their original modules; ornamentation never consumes banner space. */
:root {
  --portal-ivory: #fbf9f1;
  --portal-gold: #ae8646;
  --portal-line: #cdb67d;
  --portal-blue: #214f63;
  --portal-text: #294653;
  --portal-soft: #edf3f2;
  --portal-inset: #f4f4ed;
  --ink: var(--portal-text);
  --muted: #60747b;
  --blue: var(--portal-blue);
  --blue-dark: #153c50;
  --gold: #b68b43;
  --border: #cbd3cc;
  --paper: var(--portal-ivory);
  --background: #edf2ed;
  --soft: var(--portal-soft);
}

body {
  background-color: var(--background);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* A pale central veil keeps headings legible while the city remains visible
   along both sides. It has no effect on component sizes or banner geometry. */
main > .container { position: relative; isolation: isolate; }
main > .container::before {
  content: "";
  position: absolute;
  inset: -12px -16px;
  z-index: -1;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #fffdf500, #fffdf5d9 5%, #fffdf5e6 50%, #fffdf5d9 95%, #fffdf500);
}

/* The approved artwork is displayed intact. The SVG viewBox only removes
   its surrounding preview margin; all letters, wings and halo stay visible. */
.site-header {
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.header-inner {
  min-height: 91px;
  padding: 10px 23px;
  gap: 19px;
  border: 1px solid #a48148;
  border-radius: 5px 5px 11px 11px;
  background: linear-gradient(110deg, #fffdf6, #f8f6ed 58%, #fffcf4);
  box-shadow: inset 0 0 0 2px #fffdf7, inset 0 0 0 3px #d6c59b,
              0 3px 10px #273f5120;
}
.brand {
  flex: 0 1 360px;
  width: 360px;
  min-width: 240px;
  gap: 0;
  position: relative;
  mix-blend-mode: multiply;
  filter: brightness(1.045);
}
.brand .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2075 / 340;
  flex-shrink: 0;
  overflow: hidden;
}
.brand:has(.brand-logo) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.header-inner nav[aria-label="Menu principal"] { gap: 18px; }
.header-inner nav[aria-label="Menu principal"] > a { color: #294c5e; }
.header-inner nav[aria-label="Menu principal"] > a.active { color: #163d52; }
.header-inner nav[aria-label="Menu principal"] > a.active::after {
  height: 2px;
  bottom: -8px;
  background: linear-gradient(90deg, #d4b673, #a8752e, #d4b673);
}
.header-inner nav[aria-label="Menu principal"] > .btn-primary { color: #fffaf0; }

/* Carved, layered frames sit above the original surfaces without changing
   their dimensions or capturing clicks. */
.header-inner,
.panel,
.server-row,
.filters,
.empty,
.stat,
.plan-card,
.checkout-card,
.checkout-summary,
.ad-inventory-wrap,
.top-example,
.top-share-window,
.top-purchase,
.top-server-page,
dialog {
  position: relative;
  border-color: #a77b3c;
  background-color: var(--portal-ivory);
  box-shadow: inset 0 0 0 1px #fff9e4, inset 0 0 0 2px #c39955,
              inset 0 0 0 3px #fdf5dc, 0 2px 5px #1f3b4820;
}
.header-inner::before,
.panel::before,
.server-row::before,
.filters::before,
.empty::before,
.stat::before,
.plan-card::before,
.checkout-card::before,
.checkout-summary::before,
.ad-inventory-wrap::before,
.top-example::before,
.top-share-window::before,
.top-purchase::before,
.top-server-page::before,
dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--portal-corner-tl), var(--portal-corner-tr),
                    var(--portal-corner-bl), var(--portal-corner-br);
  background-position: left top, right top, left bottom, right bottom;
  background-size: 30px 30px;
  background-repeat: no-repeat;
}
.header-inner::before { background-size: 48px 48px; }
.header-inner { border-color: #a48148; }
.panel .panel::before,
.stat::before,
.top-example::before { background-size: 22px 22px; }
.empty { border-style: solid; }
.checkout-summary { position: sticky; }

/* Keep all descriptive copy on a nearly plain, high-contrast surface. */
.panel,
.filters,
.server-row,
.empty,
.checkout-card,
.checkout-summary,
.top-example,
.top-share-window,
.top-purchase {
  background-image: linear-gradient(110deg, #fffef9, #fbf9f2 65%, #fdfbf5);
}
.server-row.server-row-compact { border-radius: 5px; }
.server-row.highlighted,
.server-row.is-highlighted {
  border-color: #b58c43;
  background-image: linear-gradient(110deg, #fffdf4, #fff8e7);
}
.server-row-compact .server-heading { border-bottom: 0; }
.server-name { color: #204a60; }
.rank-number.top-three { color: #b08337; text-shadow: 0 1px #fff; }
.server-row-compact > .vote-box { border-left-color: #d2c8ad; }
.server-row-compact .server-footer .server-social-links { border-left-color: #d6d4c5; }
.vote-count,
.server-clicks > strong { color: #204a60; }
.tag {
  color: #46636c;
  border-color: #cbd3c7;
  background: linear-gradient(#fbfcf7, #edf1eb);
  box-shadow: inset 0 1px #fff;
}
.filter-tab,
.page-button {
  border-color: #bccac8;
  background: linear-gradient(#fffef8, #edf1ed);
  color: #3e5c67;
  box-shadow: inset 0 1px #fffdf7, 0 1px 2px #243a4310;
}
.filter-tab:hover,
.page-button:hover { background: #e9efea; }
.filter-tab.active,
.page-button.active {
  color: #fffdf3;
  border-color: #1d4b5f;
  background: linear-gradient(#32677a, #204d61);
  box-shadow: inset 0 0 0 1px #ffffff25, 0 1px 2px #1733451f;
}
.result-count,
.ranking-topline > .muted {
  color: #47616d;
  text-shadow: 0 1px 3px #fff, 0 0 7px #fff;
}
.ad-label { color: #496471; text-shadow: 0 1px 3px #fff, 0 0 7px #fff; }
/* Outline never alters the fixed 720x100 / 120x460 / 320x270 ad geometry. */
.ad-slot .ad-placement { outline: 1px solid #a78146; outline-offset: 2px; }

.btn {
  border-color: #b8c6c2;
  border-radius: 4px;
  background: linear-gradient(#fffef8, #f0f1e9);
  box-shadow: inset 0 1px #ffffffd9, 0 1px 2px #213b4810;
}
.btn-primary {
  color: #fffaf0;
  border-color: #204a5c;
  background: linear-gradient(#31677a, #1e4d62);
  box-shadow: inset 0 0 0 1px #e5d5a442, inset 0 1px 0 #ffffff45,
              0 2px 3px #1b3b4f19;
}
.btn-vote {
  color: #493510;
  border-color: #af7c30;
  background: linear-gradient(#ffe2a0, #edbf60 54%, #e8b355);
  box-shadow: inset 0 0 0 1px #fff0c1b0, 0 1px 3px #8c642322;
}
.btn-ghost { color: #315566; background: linear-gradient(#fbfcf8, #edf1eb); }
.btn:hover:not(:disabled) { filter: brightness(1.035); }
.btn:active:not(:disabled) { box-shadow: inset 0 1px 3px #17384925; }
.btn:disabled { filter: none; }
.icon-button {
  color: #345c6d;
  border: 1px solid #c3c9b8;
  background: linear-gradient(#fffdf2, #ecefe5);
  box-shadow: inset 0 1px #fff;
}
input:not([type=radio]):not([type=checkbox]),
select,
textarea {
  border-color: #b7c8c5;
  background-color: #fffefa;
  box-shadow: inset 0 1px 2px #2d4a5210, 0 1px #ffffffb3;
}
input::placeholder,
textarea::placeholder { color: #82969b; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #c39645;
  outline-offset: 3px;
}
.notice {
  border-color: #b8c9c8;
  background: #edf3ef;
  color: #45636c;
}
.back-link,
.checkout-back { color: #204e63; text-shadow: 0 1px 4px #fff; }
.page-title,
.checkout-heading,
.ads-intro,
.ad-account-note,
.ranking-intro {
  text-shadow: 0 1px 4px #fffdf5, 0 0 12px #fffdf5;
}
.page-title h1,
.checkout-heading h1,
.ads-intro h1,
.ranking-intro h1,
.modal-heading h2,
.footer-inner > div > strong { color: #214b60; }

.site-footer {
  position: relative;
  border-top: 1px solid #b9985b;
  background: linear-gradient(#fbf9f0f2, #eaf0e9f2);
  color: #61777b;
  box-shadow: inset 0 3px #fffdf7, inset 0 4px #d7c6a0, 0 -3px 13px #243b4a10;
}
.footer-inner strong { color: #244e60; letter-spacing: .35px; }
.footer-links button { color: #385d6c; }
.footer-note { border-top-color: #d4d5c5; color: #718382; }

/* The native dialog retains its original centering, size and scrolling. */
dialog {
  position: fixed;
  border-color: #b49660;
  background: #fbf9f2;
  box-shadow: inset 0 0 0 1px #fff9e4, inset 0 0 0 2px #c39955,
              inset 0 0 0 3px #fdf5dc,
              0 18px 70px #17344255;
}
dialog::before { inset: 0; }
dialog::backdrop { background: #19384c80; backdrop-filter: blur(3px); }
.modal-heading {
  border-bottom-color: #cebc91;
  background: linear-gradient(#fbfaf3, #edf1e9);
  box-shadow: inset 0 1px #fff;
}
.modal-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-heading .icon-button { flex: 0 0 30px; }
.modal-body { background: #fffdf7; }
.modal-footer { border-top: 1px solid #dbd4bf; background: #eef1e8; }
.toast {
  border: 1px solid #c5aa6f;
  color: #fff9e9;
  background: linear-gradient(#2e6071, #1b4357);
  box-shadow: inset 0 0 0 1px #ffffff20, 0 6px 25px #19384e33;
}
.skip-link { border: 1px solid var(--portal-gold); border-radius: 3px; }

@media (max-width: 1120px) {
  .header-inner { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .header-inner .brand { margin: 0 auto; flex-basis: 340px; }
  .header-inner nav[aria-label="Menu principal"] {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px 18px;
  }
  .header-inner nav[aria-label="Menu principal"] > a.active::after { bottom: -5px; }
}
@media (max-width: 700px) {
  .checkout-summary { position: relative; top: auto; }
  .server-row-compact > .vote-box { border-left: 0; border-top-color: #d2c8ad; }
  .server-row-compact .server-footer .server-social-links { border-left: 0; }
}
@media (max-width: 540px) {
  body { background-position: 48% top; }
  main > .container::before { inset-inline: -10px; }
  .site-header { padding-top: 6px; }
  .header-inner { padding: 12px 11px 15px; gap: 12px; }
  .header-inner .brand { width: min(340px, 100%); min-width: 0; flex-basis: 340px; }
  .header-inner nav[aria-label="Menu principal"] { gap: 10px 14px; }
  .header-inner::before { background-size: 34px 34px; }
  .panel::before,
  .server-row::before,
  .filters::before,
  .empty::before,
  .checkout-card::before,
  .checkout-summary::before { background-size: 24px 24px; }
  .page-title p,
  .checkout-heading p { color: #4d6873; }
}

/* Keep the complete rate labels readable on the narrowest phones. */
@media (max-width: 360px) {
  .filter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Decorative headings use the locally embedded display face only. */
.page-title h1,.checkout-heading h1,.ads-intro h1,.modal-heading h2,.footer-inner > div > strong {font-family:"PortalDisplay",Georgia,serif;font-weight:700;letter-spacing:0;}
.server-row::before {background-size:24px 24px;inset:0;}

/* Keep validation states visible over the shared field finish. */
.share-edit-field input[aria-invalid="true"] { border-color: #b54532; }

/* V6.6.1: keep the ranking filter controls aligned on the desktop row. */
@media (min-width: 1000px) {
  .filters .filter-tab, .filters .search-form input, .filters .search-form select,
  .filters .search-form .btn { height: 40px; }
}
.ranking-center > .ranking-topline { align-items: center; padding-bottom: 10px; }
.ranking-center > .ranking-topline > .result-count { margin-bottom: 0; }