/* Ravora on the site frame (ADR-059). The layout's own sheets (styles/*.css) stay as they came; this file puts our
   things on top of them: the words that the layout draws as pictures become Portuguese text in the same places, the
   menu and buttons react to the mouse with CSS instead of the layout's inline handlers, the pages of the site sit in
   the box of the centre column, and our footer takes the frame's colours and fonts. Loaded last. */

@font-face {
  font-family: "Uncial Antiqua"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/uncial-antiqua-latin.woff2") format("woff2");  /* SIL Open Font License 1.1, assets/fonts/OFL.txt */
}
/* the face the classic portal draws its menu names and box titles with (Martel), with the Portuguese accents, period,
   comma, hyphen and colon added from its own strokes; digits and other signs come from the next face of the stack */
@font-face {
  font-family: "Martel Ravora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/martel-ravora.woff2") format("woff2");
}

/* the frame's colours and faces, shared with the pages' own sheets */
body.layout {
  --cl-page: #051122; --cl-box: #DEBB9D; --cl-box-side: #3A3738; --cl-frame: #793D03; --cl-parch: #FFF2DB;
  --cl-text: #5A2800; --cl-link: #004294; --cl-link-hover: #0063DC; --cl-row-odd: #D4C0A1; --cl-row-even: #F1E0C6;
  --cl-title: #EFD1A4; --cl-menu-label: #E2BEA3; --cl-drop: #5A0000; --cl-small: #BBA890; --cl-big-label: #FFDF5E;
  --cl-outline: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  --cl-verdana: Verdana, Arial, "Times New Roman", sans-serif;
  --cl-uncial: "Uncial Antiqua", "Palatino Linotype", Georgia, serif;
  --cl-martel: "Martel Ravora", "Uncial Antiqua", "Palatino Linotype", Georgia, serif;
  --cl-outline8: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

body.classic.layout {
  margin: 0; padding: 0; min-width: 0; color: #fff; line-height: normal;
  font-family: Verdana, Arial, "Times New Roman", sans-serif;
  background-color: #051122;
  background-image: url("images/ravora/background-artwork.webp");  /* the owner's artwork with the portal's fade (C:/Ravora/qa/fundo-2026-09-26) */
  background-repeat: no-repeat; background-position: center top; background-attachment: scroll;
}
@media (max-width: 1280px) { body.classic.layout { background-position: -170px top; } }
/* the layout's own phone rule puts its artwork with !important; ours wins by the same means and a stronger selector */
@media (max-width: 768.01px) { body.classic.layout { background-image: url("images/ravora/background-artwork.webp") !important; background-position: top center; } }
/* the old top bar of the pages and the page-wide animation are not part of this frame */
body.layout > header.top, body.layout .top .menu-toggle { display: none !important; }
body.layout main { animation: none; }
body.layout .skip-link:not(:focus) { position: absolute; left: -9999px; }

/* ---------- left column ---------- */
#LeftArtwork #TibiaLogoArtworkTop.RavoraLogo { top: -12px; left: 6px; width: 154px; height: 154px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .75)); }
.SmallMenuBox .PlayNowContainer { position: absolute; width: 150px; height: 37px; top: 1px; left: 5px; z-index: 99; }
.MediumButtonBackground:hover .MediumButtonOver, .MediumButtonBackground:focus-within .MediumButtonOver { visibility: visible; }
.RavoraMediumLabel, .RavoraMediumLabel:link, .RavoraMediumLabel:visited, .RavoraMediumLabel:hover {
  position: absolute; top: 0; left: 0; z-index: 20; width: 150px; height: 37px;
  font: bold 17px/36px Verdana, Arial, sans-serif; text-align: center; text-decoration: none; white-space: nowrap;
  color: #FFDF5E; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 1px #000; cursor: pointer;
}
#LoginBoxMember .RavoraMediumLabel { font-size: 15px; }
.RavoraMediumLabel:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.SmallMenuBox .RavoraStatusLabel { position: absolute; top: 1px; left: 18px; width: 124px; height: 11px; text-align: center; }
.SmallMenuBox .RavoraStatusLabel a, .SmallMenuBox .RavoraStatusLabel button {
  display: block; width: 100%; height: 11px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: normal 10px/11px Arial, Helvetica, sans-serif; white-space: nowrap; text-decoration: none;
  color: #BBA890; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.SmallMenuBox .RavoraStatusLabel a:hover, .SmallMenuBox .RavoraStatusLabel button:hover,
.SmallMenuBox .RavoraStatusLabel a:focus-visible, .SmallMenuBox .RavoraStatusLabel button:focus-visible { color: #fff; outline: none; }
.RavoraSignedOut { position: absolute; top: -18px; left: 5px; width: 170px; margin: 0; text-align: center; font: normal 10px Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
[data-account-box] { position: relative; }

/* the menu: a group is a button (keyboard and screen readers), the layout's pictures on it */
#Menu .menuitem { position: relative; }
#Menu .MenuButton {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background-color: transparent;
  background-repeat: no-repeat; font: inherit; color: inherit; text-align: left;
}
#Menu .MenuButton > span { display: block; }
#Menu a.MenuButton { text-decoration: none; }
#Menu .MenuButton .Button { position: absolute; top: 0; left: 0; width: 170px; height: 32px; visibility: hidden; background-repeat: no-repeat; }
#Menu .MenuButton:hover .Button, #Menu .MenuButton:focus-visible .Button { visibility: visible; }
#Menu .MenuButton:focus-visible { outline: 1px dotted #E2BEA3; outline-offset: -3px; }
#Menu .Extend, #Menu .Icon { background-repeat: no-repeat; }
/* fitted to the portal's label pictures (News, Community, Account): 20.8px, #D9B498, a one-pixel black outline,
   centred in 116 x 22 (C:/Ravora/qa/site-layout-2026-09-26/fonte_martel.py builds the face) */
#Menu .RavoraMenuLabel {
  font: normal 20.8px/22px var(--cl-martel); letter-spacing: 0; text-align: center; white-space: nowrap;
  color: #D9B498; text-shadow: var(--cl-outline8);
}
#Menu .Submenu { display: none; }
#Menu .menuitem[data-open] .Submenu { display: block; }  /* before frame.js runs */
#Menu .Submenu a { display: block; font: bold 10pt/12pt Arial, sans-serif; color: #d7d7d7; text-decoration: none; }
#Menu .Submenu a:hover, #Menu .Submenu a:focus-visible { color: #fff; outline: none; }
#Menu .Submenuitem, #Menu .SubmenuitemLabel, #Menu .LeftChain, #Menu .RightChain, #Menu .ActiveSubmenuItemIcon { display: block; }
#Menu .Submenuitem:hover, #Menu .Submenu a:focus-visible .Submenuitem { background-color: #14433F; }
#Menu .Submenuitem.Active { color: #fff; }
#Menu .Submenuitem.Active .ActiveSubmenuItemIcon { visibility: visible; }
#Menu .RightChain { position: absolute; top: 0; right: -5px; height: 40px; width: 7px; background-repeat: repeat-y; }
#Menu .Submenu { overflow: hidden; }

/* ---------- centre column ---------- */
.InfoBar .InfoBarOnline { float: right; }
.InfoBar #st-online { font-variant-numeric: tabular-nums; }
.Content .RavoraTitle {
  position: absolute; top: 7px; left: 8px; z-index: 1; margin: 0; white-space: nowrap;
  /* fitted to the portal's headline pictures (Characters, News, Create Account): 24.5px, #EFCFA4, black outline */
  font: normal 24.5px/26px var(--cl-martel); color: #EFCFA4; text-shadow: var(--cl-outline8);
}
#RightArtwork .daily-selection { display: block; }
#RightArtwork .sprite-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#RightArtwork .sprite-stage .sprite { margin: 0; }

/* the page inside the box: the site's components keep working on the parchment */
#RavoraPage .BoxContent {
  --ink: #5A2800; --ink-soft: #6b3a12; --ink-mute: #7d5a36; --cl-ink: #5A2800; --cl-ink-soft: #6b3a12; --cl-ink-mute: #7d5a36;
  --line: rgba(121, 61, 3, .3); --line-strong: rgba(121, 61, 3, .55); --line-gold: rgba(121, 61, 3, .45);
  --surface: #F1E0C6; --surface-2: rgba(212, 192, 161, .5); --ground: #FFF8EC; --ground-deep: #F1E0C6;
  --gold: #793D03; --gold-bright: #793D03; --gold-deep: #94722f; --green: #2f6e5c; --ember: #9a4a26;
  font-size: 9pt; color: #5A2800;
}
#RavoraPage .cl-main { display: block; min-width: 0; padding: 0; line-height: 1.45; }
.Content #RavoraPage .btn { font-family: inherit; }
.Content #RavoraPage .btn:hover { text-decoration: none; }
#RavoraPage .msg.err { color: #8a1c14; border-color: rgba(179, 38, 30, .4); border-left: 3px solid #b3261e; background: #fbe3df; }
#RavoraPage .msg.ok { color: #2f6e5c; border-color: rgba(47, 110, 92, .4); border-left: 3px solid #2f6e5c; background: #e3f1ea; }

/* ---------- right column ---------- */
/* the Webshop is the Ravora Coins store (owner, 26/09): a square frame (the layout's themebox.png without the corners
   that tapered into the button, images/ravora/webshop-themebox.png, C:/Ravora/qa/site-layout-2026-09-26/webshop_quadrado.py)
   and the button under it, clear of the frame */
.Themeboxes #PremiumBox.RavoraWebshopBox { height: 207px; background: url("images/ravora/webshop-themebox.png") no-repeat 0 0; }
/* the coins carry the R of the headline face instead of the t, same gold and shading (C:/Ravora/qa/site-layout-2026-09-26/moedas_r.py) */
.Themeboxes #PremiumBox.RavoraWebshopBox #PremiumBoxBg { background: url("images/ravora/coins_trade_r.png") no-repeat 0 0; }
/* the button as wide as the card's frame (its black outer line runs from x 5 to x 174): the layout's button picture
   with its 12 px ends kept and the middle widened (images/ravora/webshop-button-170.png and -hover-170.png) */
.Themeboxes #PremiumBox.RavoraWebshopBox #PremiumBoxButton { bottom: 0; left: 5px; width: 170px; height: 34px; }
.Themeboxes #PremiumBox.RavoraWebshopBox .WebshopButton { width: 170px; background: url("images/ravora/webshop-button-170.png") no-repeat 0 0; }
.Themeboxes #PremiumBox.RavoraWebshopBox .WebshopButtonOver { width: 170px; background: url("images/ravora/webshop-button-hover-170.png") no-repeat 0 0; }
.Themeboxes #PremiumBox.RavoraWebshopBox a.RavoraWebshopLabel { width: 170px; font-size: 11.5px; }
.WebshopButton:hover .WebshopButtonOver, .WebshopButton:focus-within .WebshopButtonOver { visibility: visible; }
#PremiumBoxOverlay p { margin: 3px 0 0; color: #fff; font: 11px Verdana, sans-serif; text-align: center; }
.Themeboxes a.RavoraWebshopLabel, .Themeboxes a.RavoraWebshopLabel:hover {
  position: absolute; top: 0; left: 0; z-index: 20; width: 142px; height: 34px;
  font: bold 10.5px/34px Verdana, Arial, sans-serif; text-align: center; text-decoration: none; color: #fff; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.RavoraNetworks { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 44px; }
.Themeboxes .RavoraNetworks a { display: inline-flex; align-items: center; gap: 6px; font: bold 12px Verdana, Arial, sans-serif; color: #fff; text-decoration: none;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.Themeboxes .RavoraNetworks a:hover { color: #fff; text-decoration: underline; }
.RavoraNetworks img { width: 24px; height: 24px; }

/* ---------- footer: ours, in the frame's colours and fonts ---------- */
#Footer.RavoraFooter { padding: 4px 10px 24px; color: #fff; font: 7pt Verdana, Arial, "Times New Roman", sans-serif; }
.RavoraSitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0 5px 14px; text-align: left; }
.RavoraSitemap h2 { margin: 0 0 4px; font: normal 18px/20px var(--cl-martel); color: #D9B498; text-shadow: var(--cl-outline8); }
.RavoraSitemap ul { margin: 0; padding: 0; list-style: none; }
.RavoraSitemap li { margin: 0 0 2px; }
#Footer .RavoraSitemap a { font: bold 7.5pt Verdana, Arial, sans-serif; color: #d7d7d7; }
#Footer .RavoraSitemap a:hover { color: #fff; }
.RavoraFootline { display: grid; gap: 3px; justify-items: center; padding-top: 10px; border-top: 1px solid rgba(226, 190, 163, .35); }
.RavoraFootline b { color: #E2BEA3; }
#Footer .RavoraFootline a { font-weight: bold; }

/* ---------- phone ---------- */
/* the phone header carries the name Ravora in the title face, in gold with a dark outline (owner, 26/09) */
.RavoraMobileLogo { background-image: none !important; display: flex; justify-content: center; width: auto !important; }
.RavoraMobileLogo a { display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 47px; text-decoration: none; }
.RavoraWordmark { font: normal 34px/47px "Uncial Antiqua", "Palatino Linotype", Georgia, serif; letter-spacing: 1px; white-space: nowrap;
  color: #f2c14e; background: linear-gradient(180deg, #fff4c2 0%, #f5c84a 45%, #c9861b 75%, #8a5510 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000) drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
/* a group of the phone menu is a button; it keeps the layout's frame, font and colour */
#MobileMenu .Level1Entry { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; margin: 0;
  padding: 0 0 0 10px; background: none; font: 700 14.6667px/14.6667px Helvetica, Arial, sans-serif; color: #610b0b; text-align: left; cursor: pointer; }
#MobileMenu .Level1Entry:focus-visible { outline: 2px solid #610b0b; outline-offset: -4px; }
#MobileMenu a.Level1Entry { text-decoration: none; }
#MobileMenu a.Level1Entry::after { display: none; }
#MobileMenu .Level1Block > ul { margin: 0; padding: 0; list-style: none; }
#MobileMenu .Level1Block.Open .Level2Block { display: block; }
#MobileMenu .Level1Block .Level2Block[hidden] { display: none !important; }
#MobileMenu .MobileMenuItems { margin-left: 0; padding-left: 0; list-style: none; }
#MobileMenu .MobileShortMenuItems .RavoraBigButton { display: block; box-sizing: border-box; padding: 0; border: 0; cursor: pointer; width: 135px; height: 25px; margin: 0 auto; background-repeat: no-repeat;
  font: 12px/25px Verdana, Arial, "Times New Roman", sans-serif; color: #FFD18C; text-align: center; text-decoration: none; background-color: transparent;
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; }
#MobileMenu .MobileShortMenuItems .RavoraBigButton:hover, #MobileMenu .MobileShortMenuItems .RavoraBigButton:focus-visible { color: #fff; background-color: transparent; }
/* the two menu buttons of the phone header are checkboxes: kept in the page (not display:none) so the keyboard reaches
   them and a screen reader hears "menu, checked/not checked"; the label is what the eye sees (review of 26/09) */
#MobileMenu input#MobileMenuIcon, #MobileMenu input#MobileShortMenuIcon { display: block !important; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#MobileMenu input#MobileMenuIcon:focus-visible + label, #MobileMenu input#MobileShortMenuIcon:focus-visible + label { outline: 2px solid #f3dc9a; outline-offset: 2px; }
/* the logo's link box has no size of its own (the picture is placed): the focus ring goes on the picture */
#LeftArtwork a:focus-visible { outline: none; }
#LeftArtwork a:focus-visible #TibiaLogoArtworkTop { outline: 2px solid #f3dc9a; outline-offset: 2px; border-radius: 50%; }
#MobileMenu .MobileShortMenuItems li[hidden] { display: none; }
@media (max-width: 768.01px) {
  .RavoraSitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- home: News Ticker and News ---------- */
.Content h2.RavoraHeadline { margin: 0; padding: 0; font-size: 0; line-height: 0; }
.Content #NewsTicker .Row > div { position: relative; }
.Content #NewsTicker .NewsTickerToggle { position: absolute; inset: 0; z-index: 5; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.Content #NewsTicker .NewsTickerToggle:focus-visible { outline: 1px dotted #5A2800; outline-offset: -1px; }
.Content #NewsTicker .NewsTickerFullText a { position: relative; z-index: 6; }
.Content #NewsTicker .Row.Open .NewsTickerShortText { display: none; }
.Content #NewsTicker .Row.Open .NewsTickerFullText { display: block; }
.Content .NewsHeadlineText h3 { margin: 0; font: inherit; color: #fff; }
.Content .NewsHeadlineText h3 a, .Content .NewsHeadlineText h3 a:hover { font: inherit; color: #fff; }
.Content .NewsHeadlineText h3 a:hover { text-decoration: underline; }
.Content .NewsTable .NewsTableContainer { font-size: 10pt; }
.Content .NewsTable .RavoraDropCap { vertical-align: baseline; border: 0; }
.Content .NewsTable .RavoraDropCapText { float: left; margin: 0 2px 0 0; font: normal 34px/26px var(--cl-martel); color: #5A0000; }
.Content .NewsTable .RavoraNewsMore { text-align: right; }

/* the site's older sheets make pictures blocks and take the margins off paragraphs; the frame's pieces keep the
   layout's own flow */
#MenuColumn img, .InfoBar img, #RightArtwork img, .Themeboxes img, .cl-home img { display: inline; max-width: none; }
#RightArtwork #Pedestal { display: block; }
.Content .NewsTable .NewsTableContainer p { margin: 13.3333px 0; }
.Content .NewsTable .NewsTableContainer p.RavoraNewsMore { margin-top: 13.3333px; }
/* the home's <main> is a plain block, so the boxes' margins meet as they do in the layout */
body.layout .cl-home { display: block; gap: 0; min-width: 0; }
/* text for screen readers only, on every page of the frame */
body.layout .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* buttons inside the pages: the frame's stretchable button (blue; red to delete or leave) */
.Content #RavoraPage .btn, .Content #RavoraPage a.btn, .Content #RavoraPage button.btn {
  display: inline-block; min-width: 110px; min-height: 0; height: 25px; margin: 0; padding: 0 16px; box-sizing: border-box; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  border-image-source: url("images/global/buttons/button_standard_9grid_idle.png"); border-image-slice: 12 12 fill; border-image-width: 12px; border-image-outset: 0; border-image-repeat: stretch;
  font: 400 12px/25px Verdana, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #ffd18c; text-decoration: none; white-space: nowrap;
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
  cursor: pointer; filter: none; transform: none;
}
.Content #RavoraPage .btn:hover:not([disabled]), .Content #RavoraPage .btn:focus-visible { border-image-source: url("images/global/buttons/button_standard_9grid_hover.png"); color: #ffd18c; text-decoration: none; }
.Content #RavoraPage .btn.danger { border-image-source: url("images/global/buttons/button_red.gif"); border-image-slice: 10 10 fill; border-image-width: 10px; color: #fff; }
.Content #RavoraPage .btn.danger:hover:not([disabled]) { border-image-source: url("images/global/buttons/button_red_over.gif"); }
.Content #RavoraPage .btn:disabled, .Content #RavoraPage .btn[aria-disabled="true"] { border-image-source: url("images/global/buttons/button_standard_9grid_disabled.png"); color: #ccc; cursor: not-allowed; }
.Content #RavoraPage .btn:focus-visible { outline: 1px dotted #5A2800; outline-offset: 2px; }

/* a news article's headline and text, as the home's */
#RavoraPage .cl-headline { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; min-height: 26px; margin: 0 0 5px; padding: 0 8px 0 40px;
  border: 1px solid #000; color: #fff; background: #5e0a0a url("images/global/content/newsheadline_background.gif") repeat 0 2px; }
#RavoraPage .cl-headline img { position: absolute; left: 5px; top: -1px; display: block; }
#RavoraPage .cl-headline time, #RavoraPage .cl-headline .dash { position: relative; top: -1px; font: 7pt Verdana, Arial, sans-serif; color: #fff; }
#RavoraPage .cl-headline .dash { margin: 0 4px 0 3px; }
#RavoraPage .cl-headline :is(h1, h2, h3) { min-width: 0; margin: 2px 0 2px 3px; font: 700 10pt/26px Verdana, Arial, sans-serif; color: #fff; letter-spacing: 0; text-shadow: none; }
#RavoraPage .cl-headline :is(h1, h2, h3) a { color: #fff; }
#RavoraPage .cl-newsbody { display: flow-root; padding: 0 10px; font: 10pt Verdana, Arial, "Times New Roman", sans-serif; color: #5A2800; }
#RavoraPage .cl-newsbody p { margin: 13.3333px 0; }
#RavoraPage .cl-newsbody > p:first-child::first-letter { float: left; margin: 0 2px 0 0; font: 400 34px/26px var(--cl-martel); color: #5A0000; }
/* the frame shows everything at once: no fade-in while scrolling */
body.layout .will-reveal, body.layout .will-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
#RavoraPage .cl-newsbody h2 { margin: 18px 0 -6px; font: 700 10pt/1.3 Verdana, Arial, sans-serif; color: #5A2800; letter-spacing: 0; text-transform: none; }
/* the box's title already names the page: the Comunidade pages keep their heading for screen readers only */
#RavoraPage .cl-main.pg-com > .page-head h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#RavoraPage .cl-main.pg-com > .page-head { padding-top: 0; }
#RavoraPage .pg-com .portal-table td:first-child a { white-space: nowrap; }
#RavoraPage .pg-com .portal-table td a { overflow-wrap: normal; word-break: normal; }

/* ---------- home: the Highscores box of the right column, drawn with the menu's pieces ---------- */
.Themeboxes .RavoraTop5 { position: relative; width: 180px; margin: 0 auto 10px; }  /* the same 10 px as between the other boxes (owner, 27/09) */
.Themeboxes .RavoraTop5Top, .Themeboxes .RavoraTop5Bottom { width: 180px; height: 12px; background-repeat: no-repeat; }
.Themeboxes .RavoraTop5Head { position: relative; width: 170px; height: 32px; margin: 0 5px; padding: 0 0 0 30px; box-sizing: border-box; background-repeat: no-repeat;
  font: normal 20.8px/32px var(--cl-martel); text-align: center; color: #D9B498; text-shadow: var(--cl-outline8); }
.Themeboxes .RavoraTop5Head .Icon { position: absolute; top: 0; left: 8px; width: 32px; height: 32px; background-repeat: no-repeat; }
.Themeboxes .RavoraTop5Body { position: relative; width: 160px; margin: 0 10px; padding: 1px 0 2px; background: #0D2E2B; }
.Themeboxes .RavoraTop5Body::before, .Themeboxes .RavoraTop5Body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; background: url("images/global/general/chain.gif") repeat-y; }
.Themeboxes .RavoraTop5Body::before { left: -5px; }
.Themeboxes .RavoraTop5Body::after { right: -5px; }
.Themeboxes .RavoraTop5Body p { margin: 0; padding: 3px 8px 3px 10px; font: normal 8pt Arial, sans-serif; color: #b9c9c6; }
.Themeboxes .RavoraTop5Body ol { margin: 0; padding: 0; list-style: none; }
.Themeboxes .RavoraTop5Body li { display: flex; gap: 6px; align-items: baseline; padding: 2px 6px 2px 10px; border-bottom: 1px solid #4b7874; font: bold 10pt/12pt Arial, sans-serif; color: #d7d7d7; }
.Themeboxes .RavoraTop5Body li .rank { flex: none; width: 12px; color: #E2BEA3; }
.Themeboxes .RavoraTop5Body li > div { min-width: 0; }
.Themeboxes .RavoraTop5Body li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 10pt/12pt Arial, sans-serif; color: #fff; }
.Themeboxes .RavoraTop5Body li a:hover { color: #fff; text-decoration: underline; }
.Themeboxes .RavoraTop5Body li small { display: block; font: normal 7.5pt/10pt Arial, sans-serif; color: #b9c9c6; }
.Themeboxes .RavoraTop5Body li small span + span::before { content: " · "; }
.Themeboxes .RavoraTop5Body .RavoraTop5More { text-align: right; }
.Themeboxes .RavoraTop5Body .RavoraTop5More a { font: bold 8pt Arial, sans-serif; color: #fff; }

/* Wiki shortcut: parchment, a blue title ribbon and an accessible text link. */
.Themeboxes .RavoraParchmentBox { position: relative; display: block; box-sizing: border-box; width: 180px; height: auto; margin: 0 auto 22px; border-style: solid; border-width: 42px 10px 8px; border-image: url("images/ravora/networksbox-moldura.png") 42 10 8 fill / 42px 10px 8px stretch; }
.Themeboxes .RavoraSideHead { position: absolute; top: -42px; left: -10px; box-sizing: border-box; width: 180px; height: 36px; margin: 0; padding: 0 5px 0 43px; background-repeat: no-repeat; font: normal 17px/36px var(--cl-martel); text-align: center; color: #f1d49c; text-shadow: var(--cl-outline8); }
.Themeboxes .RavoraParchmentBox .Bottom { bottom: -20px; left: -10px; }
.Themeboxes .RavoraSideContent { padding: 2px 5px 6px; text-align: center; }
.Themeboxes .RavoraSideContent p { margin: 0; padding: 8px 2px 10px; font: 11px/1.5 Verdana, Arial, sans-serif; color: #5a2800; }
.Themeboxes .RavoraSideEmblem { display: block; box-sizing: border-box; width: 44px; height: 44px; margin: 0 auto; padding: 7px; border: 1px solid #99815a; border-radius: 50%; color: #e9d3a1; background: #345066; box-shadow: 0 0 0 2px #c5b38d80, inset 0 0 0 1px #617087; }
.Themeboxes .RavoraSideEmblem svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.Themeboxes a.RavoraSideButton { display: block; margin: 0; padding: 7px 4px; border: 1px solid #263d50; border-radius: 2px; background: #345066; color: #fff4dc; font: bold 10px/1.5 Verdana, Arial, sans-serif; text-decoration: none; box-shadow: inset 0 0 0 1px #61798a; }
.Themeboxes a.RavoraSideButton:hover { background: #456780; color: #fff4dc; }
.Themeboxes a.RavoraSideButton:focus-visible { outline: 2px solid #345066; outline-offset: 2px; }

/* Discord in the Networks box (owner, 2026-09-26): the mark big on top, the invitation under it and the button at the
   bottom, as the site's earlier Discord box. The frame is the layout's networksbox.png cut at its last row
   (images/ravora/networksbox-moldura.png, 180 x 87): the header, the parchment's rough top and bottom and the bottom
   edge stay as drawn (slices 42 10 8) and only the smooth middle of the parchment grows, through border-image
   (repeating it shows seams); the box's bottom piece hangs under it as in the layout. */
.Themeboxes #NetworksBox.RavoraNetworksBox { display: block; box-sizing: border-box; width: 180px; height: auto; margin-bottom: 22px;
  border-style: solid; border-width: 42px 10px 8px; border-image: url("images/ravora/networksbox-moldura.png") 42 10 8 fill / 42px 10px 8px stretch; }
.Themeboxes #NetworksBox.RavoraNetworksBox .Bottom { bottom: -20px; left: -10px; }
.Themeboxes .RavoraNetworks { display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto; height: auto; margin: 0; padding: 1px 5px 5px; }
.Themeboxes .RavoraDiscordBadge { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; color: #fff; background: #5865F2;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, .25), 0 1px 3px rgba(0, 0, 0, .55); }
.Themeboxes .RavoraDiscordBadge svg { width: 26px; height: 26px; fill: currentColor; }
.Themeboxes .RavoraNetworksText { margin: 0; font: 11px/1.3 Verdana, Arial, sans-serif; color: #5A2800; text-align: center; }
.Themeboxes .RavoraNetworks a.RavoraDiscordButton { display: block; box-sizing: border-box; width: 100%; height: 24px; padding: 0 7px; border: 1px solid #5865F2; border-radius: 3px; background: #5865F2;
  font: 700 10px/22px Verdana, Arial, sans-serif; color: #fff; text-align: center; text-shadow: none; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.Themeboxes .RavoraNetworks a.RavoraDiscordButton:hover, .Themeboxes .RavoraNetworks a.RavoraDiscordButton:focus-visible { border-color: #7983f5; filter: brightness(1.08); color: #fff; text-decoration: none; }
/* the phone's back-to-top button (the layout shows it only on phones) */
#BackToTopButton #BackToTopArrowUp { width: 45px; height: 47px; }
#BackToTopButton #BackToTopArrowUp::after { content: ""; position: absolute; display: block; width: 20px; height: 18px; top: 14px; left: 12px; background-size: contain; }

/* phones: the layout lays the content out as a table, which grows with a wide table inside and pushes the whole page
   sideways; a block keeps the page at the screen's width and wide tables scroll inside their own box */
@media (max-width: 768.01px) {
  body.layout .main-content.Content { display: block; min-width: 0; max-width: 100vw; }
  body.layout #RavoraPage, body.layout #RavoraPage .BoxContent { min-width: 0; max-width: 100%; }
  body.layout #RavoraPage .BoxContent { overflow-x: auto; }
}
/* lists of the community: words in a table never break letter by letter; a table wider than the phone scrolls in
   its own frame */
#RavoraPage .pg-com .portal-table { overflow-wrap: normal; word-break: normal; }
#RavoraPage .pg-com .portal-table td:first-child, #RavoraPage .pg-com .portal-table th { white-space: nowrap; }

/* a page box is never shorter than the layout's (its parchment reaches the same height on every page) */
#RavoraPage > .Border_2 .BoxContent { min-height: 367px; }
/* catalogue tiles without a picture (Spells by vocation and by type) keep only the name, without an empty square */
#RavoraPage .shelf-picture:empty { display: none; }
#RavoraPage .shelf-tile:has(> .shelf-picture:empty) { min-height: 0; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: 8px; padding-bottom: 8px; }
#RavoraPage .shelf-tile > strong, #RavoraPage .shelf-tile > small { align-self: center; }

/* ---- the frame on its own (27/09): the pieces of the frame that used to come from the old sheets of the site
   (site.css, premium.css, motion.css), written here with the same measured values, so a page that no longer loads
   those sheets keeps the frame pixel for pixel as the home page shows it. */
body.layout [hidden] { display: none !important; }
/* the footer: measured on the home page with the old sheets (grid, 80 px above, the dark line on top, the site map in
   the system face at 14 px and the legal lines in it at 12 px, grey, left-aligned under their own line) */
body.layout #Footer.RavoraFooter { box-sizing: border-box; display: grid; gap: 28px; margin-top: 80px; border-top: 1px solid #2a3438; }
body.layout #Footer .RavoraSitemap { box-sizing: border-box; justify-content: start; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
body.layout #Footer .RavoraFootline { box-sizing: border-box; }
body.layout #Footer .RavoraFootline .legal { box-sizing: border-box; border-top: 1px solid #2a3438; padding-top: 24px; text-align: left;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: #a0aaa9; }
@media (max-width: 640px) { body.layout #Footer.RavoraFooter { margin-top: 56px; } }
/* Entrar, Download and "Obter Ravora Coins": a light that crosses them from left to right, cut to each button's picture */
#LoginBox .MediumButtonBackground::after, #DownloadBox .MediumButtonBackground::after {
  content: ""; position: absolute; inset: 0; z-index: 16; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%) no-repeat 100% 0 / 250% 100%;
  -webkit-mask: url("images/global/buttons/mediumbutton.gif") no-repeat 0 0 / 100% 100%;
  mask: url("images/global/buttons/mediumbutton.gif") no-repeat 0 0 / 100% 100%;
}
#PremiumBox .WebshopButton::after {
  content: ""; position: absolute; inset: 0; z-index: 16; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%) no-repeat 100% 0 / 250% 100%;
  -webkit-mask: url("images/ravora/webshop-button-170.png") no-repeat 0 0 / 100% 100%;
  mask: url("images/ravora/webshop-button-170.png") no-repeat 0 0 / 100% 100%;
}
/* the game's pictures (the pedestal, the catalogues): frames of a sheet shown one at a time, crisp pixels */
body.layout .sprite { display: inline-block; vertical-align: middle; overflow: hidden; image-rendering: pixelated; flex: none; }
body.layout .sprite > i { display: block; height: 100%; width: calc(var(--frames, 1) * 100%); background-repeat: no-repeat; background-size: 100% 100%; }
body.layout .sprite-item { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
body.layout .sprite-stage { display: grid; place-items: end center; width: 148px; height: 132px; margin: 4px auto 12px; }
body.layout .sprite-stage:empty { display: none; }
body.layout .daily-selection .sprite-stage { width: 72px; height: 72px; margin: 0; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ravora-shine { 0%, 72% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  @keyframes ravora-sprite-walk { to { transform: translateX(-100%); } }
  #LoginBox .MediumButtonBackground::after, #DownloadBox .MediumButtonBackground::after, #PremiumBox .WebshopButton::after { animation: ravora-shine 5.5s ease-in-out infinite; }
  #LoginBox .MediumButtonBackground:hover::after, #DownloadBox .MediumButtonBackground:hover::after, #PremiumBox .WebshopButton:hover::after { animation-duration: 1.4s; }
  body.layout .sprite > i { animation: ravora-sprite-walk calc(var(--frames, 1) * 105ms) steps(var(--frames, 1)) infinite; }
}