/* ============================================================================
   QQiROSE overrides on top of the Draconis skin.

   Loaded AFTER draconis.css. Nothing in draconis.css is edited, so the original
   template stays intact and diffable -- everything QQiROSE-specific lives here.

   The main job is typography. Draconis pulls Oswald (a tall condensed face) and
   Roboto from Google Fonts and uses Oswald for every heading, nav item and
   button, which is what reads badly at these sizes. This file drops both
   webfonts and uses the same stack as the main qqirose.com page:

       "Segoe UI", Roboto, Helvetica, Arial, sans-serif

   Dropping the webfonts also removes the only two external requests the site
   made, so every asset now comes from our own host.
   ========================================================================== */

/* ---- typography ---------------------------------------------------------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, span, div, b, strong, em, small,
input, select, textarea, button, label, blockquote {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Oswald is condensed, so the template leans on wide letter-spacing to fill the
   line. With a normal-width face that same spacing looks stretched. */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
    font-weight: 700;
}

/* Section headers in the sidebar/footer: small, wide caps, like the main site. */
.side-section h2,
#footer-section h2 {
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}

#main-navigation ul li a {
    letter-spacing: .02em;
    font-weight: 700;
    text-transform: none;
}

#top-bar,
#top-bar p,
#copyright {
    letter-spacing: 0;
    font-size: 13px;
}

/* ---- logo ---------------------------------------------------------------- */
/* The QQiROSE mark is wider and shorter than the Draconis one, and its white
   backdrop has been keyed out, so it needs its own box rather than the
   template's fixed height. */
#logo-wrapper img {
    max-width: 430px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* The header art is light, and the logo's gold letters (the QQ, and the
       R-O-S-E capitals in the tagline) wash out against it once the white
       backdrop is keyed away. A soft dark drop shadow puts them back. */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

/* ---- cosmetic-only site -------------------------------------------------- */
/* Registration, login, rankings, server status and the web shop are all handled
   in-game, so the elements that would have carried them are not rendered at all
   rather than being hidden here. These rules only cover leftovers in the
   template's own CSS that would otherwise reserve space. */
#login-form,
#control-panel,
#player-rankings,
#ranking-option {
    display: none !important;
}

/* ---- small readability fixes -------------------------------------------- */
#main-body-section p,
.side-section p {
    line-height: 1.65;
}

/* NOTE ON COLOUR: the Draconis skin is dark CHROME around a LIGHT content area
   -- #main-body-section is white with #333 text. Everything below is styled for
   that light panel, not for the dark header/footer. */
.qq-note {
    color: #6f6f6f;
    font-size: 14.5px;
}

/* A plain content card, used for the pages that have no template equivalent
   (downloads, guides, info) so they match the sidebar panels. */
.qq-card {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-left: 3px solid #dd1b19;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 0 0 16px;
}

.qq-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: #2a2a2a;
}

.qq-card p {
    color: #444;
}

.qq-card p:last-child {
    margin-bottom: 0;
}

/* Rate tiles, mirroring the cards on the main qqirose.com page. */
.qq-rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.qq-rates li {
    background: #2b2b2b;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    padding: 18px 10px;
    text-align: center;
}

.qq-rates .k {
    display: block;
    color: #a9a9a9;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Gold on the dark tile, the same accent pairing the main site uses. */
.qq-rates .v {
    display: block;
    color: #ffd626;
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
}

/* Download buttons */
.qq-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.qq-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .08s ease, filter .15s ease;
}

.qq-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    text-decoration: none;
}

.qq-btn-main { background: #ffd626; color: #241c00; }
.qq-btn-alt  { background: #2b2b2b; color: #ededed; border-color: #1e1e1e; }

.qq-steps { margin: 0; padding-left: 22px; color: #444; }
.qq-steps li { margin: 10px 0; }
.qq-steps b { color: #2a2a2a; }

/* ---- how-to-register screenshots ---------------------------------------- */
/* Each step can carry a picture. The frame is styled here so a screenshot can
   be dropped in later without touching the page. */
.qq-shot {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0 4px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
}

.qq-shot-cap {
    display: block;
    color: #6f6f6f;
    font-size: 13px;
    margin-bottom: 6px;
}

/* Placeholder shown where a screenshot has not been added yet. */
.qq-shot-todo {
    display: block;
    border: 1px dashed #c9c9c9;
    border-radius: 4px;
    background: #f4f4f4;
    color: #8a8a8a;
    font-size: 13.5px;
    text-align: center;
    padding: 26px 14px;
    margin: 10px 0 4px;
}

@media (max-width: 600px) {
    .qq-btn { width: 100%; text-align: center; }
}