/*
Theme Name: Hidden Sector
Theme URI: https://github.com/DigiFalk/HiddenSectorOnline
Author: DigiFalk
Author URI: https://digifalk.com
Description: The official companion theme for the Hidden Sector Online space-strategy game. A responsive, hyper-futuristic dark theme that matches the game and works with your blog, bbPress forums and WooCommerce shop.
Version: 1.26.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hidden-sector
Tags: two-columns, right-sidebar, custom-menu, featured-images, blog, e-commerce, translation-ready

Copyright (c) 2026 DigiFalk. All rights reserved.
*/

:root {
    --hs-bg: #05070f;
    --hs-bg2: #080b16;
    --hs-panel: #0d1326;
    --hs-panel2: #111a30;
    --hs-line: #1e2a44;
    --hs-text: #dce6ff;
    --hs-dim: #8492b6;
    --hs-cyan: #35e0ff;
    /* How tall a provider mark, or any other icon standing beside a word,
       is allowed to be. Named because two stylesheets need the same answer
       and a number written twice is a number that will disagree with itself:
       the first draft said 20px here and 28px in the forum's own sheet, and
       the forum's won without anybody seeing it. */
    --hs-icon: 22px;
    --hs-cyan-dim: #1aa9c4;
    --hs-red: #ff5a6e;
    --hs-radius: 12px;
    --hs-wrap: 1180px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(53, 224, 255, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(120, 90, 255, 0.08), transparent 55%),
        var(--hs-bg);
    color: var(--hs-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--hs-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/*
 * A picture inside a sign-in form is an icon.
 *
 * Social sign-in plugins draw their buttons wherever a login form appears,
 * and they bring a stylesheet that sizes the provider mark to about the
 * height of a line of text. That stylesheet does not always arrive - a
 * plugin enqueues it for the pages it knows about, and a login form printed
 * by some other plugin is not one of them. All that is left then is the rule
 * above, and `height: auto` on a 500px Google mark renders a 500px Google
 * mark: what should be an icon beside a word fills the screen instead.
 *
 * Stated by where the picture is rather than by which plugin drew it,
 * because the plugin's name is the part that changes.
 */
.bbp-login-form img,
.bbp-login-form svg,
#loginform img,
#loginform svg,
#registerform img,
#registerform svg,
.woocommerce-form-login img,
.woocommerce-form-login svg,
.woocommerce-form-register img,
.woocommerce-form-register svg {
    max-height: var(--hs-icon);
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/*
 * ...and the link around it is a button.
 *
 * Sizing the mark down was only half the job: what was left was two links
 * running into each other in the middle of a sentence -
 * "GContinue with GoogleDContinue with Discord" - because without the
 * plugin's stylesheet they are just anchors in a paragraph. A way to sign in
 * is a control, and it has to look like one and be big enough to hit.
 *
 * Matched on shape rather than on a class name: inside a sign-in form, a link
 * with a picture in it is a provider button. The plugin's class names are the
 * part that changes; this does not. Where :has() is missing the marks are
 * still the right size and the links still work - they simply stay links.
 */
:is(#bbpress-forums, body) .bbp-login-form a:has(img),
:is(#bbpress-forums, body) .bbp-login-form a:has(svg),
:is(#bbpress-forums, body) #loginform a:has(img),
:is(#bbpress-forums, body) #loginform a:has(svg),
:is(#bbpress-forums, body) #registerform a:has(img),
:is(#bbpress-forums, body) #registerform a:has(svg),
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img),
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg),
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img),
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    /* Wide enough to read, no wider. Full width put a pair of banners above a
       small Log In button, which is the wrong proportion and reads as the
       page being broken - but auto width alone would let the two sit side by
       side again, which is what they were doing before. A block box that
       hugs its content does both: one per line, and only as wide as it needs.
       Safari wants its own spelling, and the unprefixed one has to come
       second so it wins where both are understood. */
    width: -webkit-fit-content;
    width: fit-content;
    /* A shared floor rather than a fixed width: it is what makes the two
       line up - hugging content alone gave 246 and 251, close enough to look
       like a mistake rather than a choice - while a provider with a longer
       name still grows past it instead of wrapping. */
    min-width: 260px;
    max-width: 100%;
    min-height: 46px;
    /* Centred, now that the button is narrower than the form it sits in: auto
       margins put the box in the middle, and centring the contents as well
       keeps the mark from hugging one edge with the words trailing off it. */
    margin: 10px auto 0;
    padding: 10px 14px;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    background: var(--hs-panel2);
    /* The label is a label, not a link in a sentence. This could not be said
       before: written in classes alone it lost to the forum's own cyan, so
       it was taken out rather than left there pretending. The prefix above
       is what lets it be said again. */
    color: var(--hs-text);
    font-weight: 600;
    text-decoration: none;
}

:is(#bbpress-forums, body) .bbp-login-form a:has(img):hover,
:is(#bbpress-forums, body) .bbp-login-form a:has(svg):hover,
:is(#bbpress-forums, body) #loginform a:has(img):hover,
:is(#bbpress-forums, body) #loginform a:has(svg):hover,
:is(#bbpress-forums, body) #registerform a:has(img):hover,
:is(#bbpress-forums, body) #registerform a:has(svg):hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img):hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg):hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img):hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg):hover {
    border-color: var(--hs-cyan);
}

/*
 * ...and each provider's button is that provider's button.
 *
 * A generic panel with the site's link colour on it reads as a bordered
 * link, not as "sign in with Google" - and these are the two buttons on the
 * web that people recognise without reading them. Google publishes a light
 * ground with dark text and its own mark; Discord's is blurple with white.
 * Wearing the right clothes is most of what makes them work.
 *
 * Which provider it is comes off the link's own address or the file name of
 * its mark, because that is what a sign-in link always carries and a class
 * name is what changes between plugins. A provider neither test recognises
 * still gets the button above, so the fallback is a button and not a
 * regression.
 *
 * The :is(#bbpress-forums, body) in front is what lets one rule win in two
 * places: inside the forum bbPress's own sheet paints every link cyan from
 * an id, and a rule written only in classes loses to it. Stating the id as
 * one alternative borrows its weight without copying the whole block into
 * the forum's stylesheet, where the two would drift apart.
 */
:is(#bbpress-forums, body) .bbp-login-form a:has(img)[href*="google" i],
:is(#bbpress-forums, body) .bbp-login-form a:has(svg)[href*="google" i],
:is(#bbpress-forums, body) .bbp-login-form a:has(img[src*="google" i]),
:is(#bbpress-forums, body) #loginform a:has(img)[href*="google" i],
:is(#bbpress-forums, body) #loginform a:has(svg)[href*="google" i],
:is(#bbpress-forums, body) #loginform a:has(img[src*="google" i]),
:is(#bbpress-forums, body) #registerform a:has(img)[href*="google" i],
:is(#bbpress-forums, body) #registerform a:has(svg)[href*="google" i],
:is(#bbpress-forums, body) #registerform a:has(img[src*="google" i]),
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img)[href*="google" i],
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg)[href*="google" i],
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img[src*="google" i]),
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img)[href*="google" i],
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg)[href*="google" i],
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img[src*="google" i]) {
    background: #ffffff;
    border-color: #dadce0;
    color: #3c4043;
}

:is(#bbpress-forums, body) .bbp-login-form a:has(img)[href*="google" i]:hover,
:is(#bbpress-forums, body) .bbp-login-form a:has(svg)[href*="google" i]:hover,
:is(#bbpress-forums, body) .bbp-login-form a:has(img[src*="google" i]):hover,
:is(#bbpress-forums, body) #loginform a:has(img)[href*="google" i]:hover,
:is(#bbpress-forums, body) #loginform a:has(svg)[href*="google" i]:hover,
:is(#bbpress-forums, body) #loginform a:has(img[src*="google" i]):hover,
:is(#bbpress-forums, body) #registerform a:has(img)[href*="google" i]:hover,
:is(#bbpress-forums, body) #registerform a:has(svg)[href*="google" i]:hover,
:is(#bbpress-forums, body) #registerform a:has(img[src*="google" i]):hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img)[href*="google" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg)[href*="google" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img[src*="google" i]):hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img)[href*="google" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg)[href*="google" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img[src*="google" i]):hover {
    background: #f7f8f8;
    border-color: #c9ced3;
    color: #3c4043;
}

:is(#bbpress-forums, body) .bbp-login-form a:has(img)[href*="discord" i],
:is(#bbpress-forums, body) .bbp-login-form a:has(svg)[href*="discord" i],
:is(#bbpress-forums, body) .bbp-login-form a:has(img[src*="discord" i]),
:is(#bbpress-forums, body) #loginform a:has(img)[href*="discord" i],
:is(#bbpress-forums, body) #loginform a:has(svg)[href*="discord" i],
:is(#bbpress-forums, body) #loginform a:has(img[src*="discord" i]),
:is(#bbpress-forums, body) #registerform a:has(img)[href*="discord" i],
:is(#bbpress-forums, body) #registerform a:has(svg)[href*="discord" i],
:is(#bbpress-forums, body) #registerform a:has(img[src*="discord" i]),
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img)[href*="discord" i],
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg)[href*="discord" i],
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img[src*="discord" i]),
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img)[href*="discord" i],
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg)[href*="discord" i],
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img[src*="discord" i]) {
    background: #5865f2;
    border-color: #5865f2;
    color: #ffffff;
}

:is(#bbpress-forums, body) .bbp-login-form a:has(img)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .bbp-login-form a:has(svg)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .bbp-login-form a:has(img[src*="discord" i]):hover,
:is(#bbpress-forums, body) #loginform a:has(img)[href*="discord" i]:hover,
:is(#bbpress-forums, body) #loginform a:has(svg)[href*="discord" i]:hover,
:is(#bbpress-forums, body) #loginform a:has(img[src*="discord" i]):hover,
:is(#bbpress-forums, body) #registerform a:has(img)[href*="discord" i]:hover,
:is(#bbpress-forums, body) #registerform a:has(svg)[href*="discord" i]:hover,
:is(#bbpress-forums, body) #registerform a:has(img[src*="discord" i]):hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(svg)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img[src*="discord" i]):hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(svg)[href*="discord" i]:hover,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img[src*="discord" i]):hover {
    background: #4752c4;
    border-color: #4752c4;
    color: #ffffff;
}

/* The mark sits in the button rather than in the line of text. Its height is
   the one above; only the way it is laid out changes here. */
:is(#bbpress-forums, body) .bbp-login-form a:has(img) img,
:is(#bbpress-forums, body) #loginform a:has(img) img,
:is(#bbpress-forums, body) #registerform a:has(img) img,
:is(#bbpress-forums, body) .woocommerce-form-login a:has(img) img,
:is(#bbpress-forums, body) .woocommerce-form-register a:has(img) img {
    flex: 0 0 auto;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: #eef4ff; margin: 1.6em 0 0.6em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.25rem; }
p, ul, ol, blockquote, table, pre { margin: 0 0 1.1em; }

blockquote {
    margin-inline: 0;
    padding: 4px 18px;
    border-left: 3px solid var(--hs-cyan);
    color: var(--hs-dim);
    background: rgba(53, 224, 255, 0.05);
    border-radius: 0 8px 8px 0;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background: var(--hs-bg2); border: 1px solid var(--hs-line); border-radius: 10px; padding: 14px; overflow-x: auto; }
code { background: rgba(53, 224, 255, 0.08); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; }

.hs-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--hs-cyan); color: #04121a; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.hs-skip-link:focus { left: 0; }

.hs-wrap { width: 100%; max-width: var(--hs-wrap); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- header */
/*
 * Inside the Android app, the site's own furniture is not shown.
 *
 * Somebody who installed the app came for the game, not for a website with
 * a Menu button on it - and the whole point of a Trusted Web Activity is
 * that they never have to think about which of the two they are looking at.
 * The plugin marks the page (see HSO_Render::in_app_flag) and this is one of
 * the three things that read the mark.
 *
 * The footer stays. It carries the legal pages, and those are the one part
 * of a website a player may genuinely need to reach.
 */
.hso-in-app .hs-site-header { display: none; }

.hs-site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(8, 11, 22, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hs-line);
}
.hs-header-inner {
    display: flex; align-items: center; gap: 18px;
    min-height: 66px; padding-top: 8px; padding-bottom: 8px;
}
.hs-branding { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.hs-branding img { display: block; max-height: 44px; width: auto; }
.hs-site-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.3px; color: #eef4ff; margin: 0; }
.hs-site-title a { color: inherit; }
.hs-site-title a:hover { color: var(--hs-cyan); text-decoration: none; }
.hs-site-desc { margin: 0; font-size: 0.78rem; color: var(--hs-dim); }

.hs-nav-toggle {
    display: none; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--hs-line); color: var(--hs-text);
    border-radius: 8px; padding: 8px 12px; cursor: pointer; font: inherit;
}
.hs-nav-toggle .hs-bars { width: 18px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.hs-nav-toggle .hs-bars::before,
.hs-nav-toggle .hs-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.hs-nav-toggle .hs-bars::before { top: -6px; }
.hs-nav-toggle .hs-bars::after { top: 6px; }
/* The toggle states its own hover, focus and open colours, because the
   blanket `button:hover` below is more specific than `.hs-nav-toggle` and was
   painting the background solid cyan while the text stayed the near-white
   this rule sets - white on pale cyan, about 1.05:1, so the word "Menu"
   vanished. It changes both halves or neither. */
.hs-nav-toggle:hover,
.hs-nav-toggle:focus-visible,
.hs-nav-toggle[aria-expanded="true"] {
    background: rgba(53, 224, 255, 0.14);
    border-color: var(--hs-cyan);
    color: var(--hs-cyan);
}

.hs-primary-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.hs-primary-nav li { position: relative; }
.hs-primary-nav a {
    display: block; padding: 8px 14px; border-radius: 8px; color: var(--hs-text); font-weight: 500;
}
.hs-primary-nav a:hover,
.hs-primary-nav .current-menu-item > a { background: rgba(53, 224, 255, 0.12); color: var(--hs-cyan); text-decoration: none; }
.hs-primary-nav ul ul {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
    flex-direction: column; gap: 0; padding: 6px;
    background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: 10px; z-index: 20;
}
.hs-primary-nav li:hover > ul,
.hs-primary-nav li:focus-within > ul { display: flex; }

.hs-play-btn {
    background: var(--hs-cyan); color: #04121a !important; font-weight: 700;
    padding: 8px 16px; border-radius: 8px; white-space: nowrap;
}
.hs-play-btn:hover { background: #6ceaff; text-decoration: none; }

/* ------------------------------------------------------------ layout */
.hs-site-main { padding: 34px 0 60px; }
.hs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.hs-layout.hs-no-sidebar { grid-template-columns: minmax(0, 1fr); }
.hs-content { min-width: 0; }

.hs-card {
    background: var(--hs-panel);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    padding: 26px 28px;
    margin-bottom: 28px;
}
.hs-page-title { margin-top: 0; }
.hs-entry-title { margin-top: 0; }
.hs-entry-title a { color: #eef4ff; }
.hs-entry-title a:hover { color: var(--hs-cyan); text-decoration: none; }
.hs-entry-meta { font-size: 0.82rem; color: var(--hs-dim); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hs-entry-meta a { color: var(--hs-dim); }
.hs-entry-meta a:hover { color: var(--hs-cyan); }
.hs-thumb { display: block; margin: -26px -28px 20px; }
.hs-thumb img { width: 100%; object-fit: cover; border-radius: var(--hs-radius) var(--hs-radius) 0 0; }
.hs-entry-content > *:first-child { margin-top: 0; }
.hs-read-more { display: inline-block; margin-top: 6px; font-weight: 600; }

.hs-tags { margin-top: 16px; font-size: 0.85rem; color: var(--hs-dim); }
.hs-tags a {
    display: inline-block; margin: 3px 4px 0; padding: 2px 10px;
    background: rgba(53, 224, 255, 0.08); border: 1px solid var(--hs-line); border-radius: 20px; color: var(--hs-text);
}

/* pagination */
.hs-pagination { margin: 8px 0 0; }
.hs-pagination .page-numbers {
    display: inline-block; min-width: 40px; text-align: center; padding: 8px 12px; margin: 0 3px 6px;
    border: 1px solid var(--hs-line); border-radius: 8px; color: var(--hs-text);
}
.hs-pagination .page-numbers.current { background: var(--hs-cyan); color: #04121a; border-color: var(--hs-cyan); }
.hs-pagination a.page-numbers:hover { border-color: var(--hs-cyan); text-decoration: none; }

/* buttons + forms */
button, input, select, textarea { font: inherit; color: var(--hs-text); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], textarea, select {
    width: 100%; max-width: 100%;
    background: var(--hs-bg2); border: 1px solid var(--hs-line); color: var(--hs-text);
    border-radius: 8px; padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--hs-cyan); }
.hs-btn, button, input[type="submit"], .button, .wp-block-button__link {
    display: inline-block; background: var(--hs-cyan); color: #04121a; border: none;
    border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer;
}
/* The underline suppression is unconditional: `a:hover` underlines, and a
   link dressed as a button must not sprout one under a finger either. */
.hs-btn:hover, button:hover, input[type="submit"]:hover, .button:hover { text-decoration: none; }
/* The brightening is not. A touch screen has no pointer to move away, so a
   tapped control keeps :hover until something else is tapped - which is how
   the menu button sat lit up long after the menu had opened. */
@media (hover: hover) {
    .hs-btn:hover, button:hover, input[type="submit"]:hover, .button:hover { background: #6ceaff; }
}

/* ------------------------------------------------------------ sidebar */
.hs-sidebar .widget {
    background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
    padding: 20px 22px; margin-bottom: 24px;
}
.hs-sidebar .widget-title { margin: 0 0 14px; font-size: 1.05rem; color: var(--hs-cyan); }
.hs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.hs-sidebar li { padding: 6px 0; border-bottom: 1px solid var(--hs-line); }
.hs-sidebar li:last-child { border-bottom: 0; }
.hs-search { display: flex; gap: 8px; }
.hs-search input[type="search"] { flex: 1; }

/* ------------------------------------------------------------ comments */
.hs-comments { margin-top: 30px; }
.hs-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.hs-comments .comment-list ul.children { list-style: none; margin: 0 0 0 24px; padding: 0; }
.hs-comments article.comment-body {
    background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: 10px;
    padding: 16px 18px; margin: 0 0 18px;
}
.hs-comments .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.hs-comments .comment-author img { border-radius: 50%; }
.hs-comments .comment-metadata { font-size: 0.78rem; color: var(--hs-dim); }
.hs-comments .comment-respond { margin-top: 20px; }

/* ------------------------------------------------------------ footer */
.hs-site-footer {
    border-top: 1px solid var(--hs-line);
    background: var(--hs-bg2);
    padding: 40px 0 24px;
    color: var(--hs-dim);
    font-size: 0.9rem;
}
.hs-footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-bottom: 26px; }
.hs-footer-widgets .widget-title { color: var(--hs-cyan); font-size: 1rem; margin: 0 0 12px; }
.hs-footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.hs-footer-widgets li { padding: 4px 0; }
.hs-colophon { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; border-top: 1px solid var(--hs-line); padding-top: 18px; }
.hs-footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; }
.hs-footer-nav a { color: var(--hs-dim); }
.hs-footer-nav a:hover { color: var(--hs-cyan); }
/* The privacy policy and the terms, on every page. They sit beside whatever
   footer menu the site has, and stand on their own when it has none. */
.hs-footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; }
.hs-footer-legal a { color: var(--hs-dim); font-size: 0.85rem; }
.hs-footer-legal a:hover { color: var(--hs-cyan); }
/* A legal text read as a page rather than in the game's popup: long-form
   prose, so it gets a readable measure and real spacing. */
/* A rendered shot of the game inside an article: full-bleed within the
   column, with the caption reading as a caption rather than as body text. */
.hso-shot { margin: 24px 0; }
.hso-shot img {
    display: block; width: 100%; height: auto; border-radius: 10px;
    border: 1px solid var(--hs-line); background: var(--hs-bg2);
}
.hso-shot figcaption {
    margin-top: 8px; font-size: 0.85rem; color: var(--hs-dim); line-height: 1.5;
}
.hso-legal-page { max-width: 70ch; line-height: 1.7; }
.hso-legal-page h2 { margin: 1.6em 0 0.4em; font-size: 1.15rem; }
.hso-legal-page h3 { margin: 1.3em 0 0.3em; font-size: 1rem; }
.hso-legal-page h4 { margin: 1.6em 0 0.5em; font-size: 1.02rem; }
.hso-legal-page p, .hso-legal-page ul, .hso-legal-page ol { margin: 0 0 1em; }
.hso-legal-page ul, .hso-legal-page ol { padding-left: 1.4em; }
.hso-legal-page li { margin-bottom: 0.5em; }
/* The terms run to twenty-five articles, so they open with their own contents
   list. It is a list of links, not a list of instructions - hence no bullets
   and no numbers of its own, which would fight the article numbers in it. */
.hso-terms-toc { margin: 0 0 1.6em; padding: 14px 18px; background: var(--hs-panel);
    border: 1px solid var(--hs-line); border-radius: var(--hs-radius); }
.hso-terms-toc ol { list-style: none; margin: 0; padding: 0;
    display: grid; gap: 2px 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.hso-terms-toc li { margin: 0; }
.hso-terms-toc a { font-size: 0.92rem; }
/* Which text has legal effect, said before the first article rather than
   buried at the bottom where a reader finds it after relying on the rest. */
.hso-terms-note { border-left: 3px solid var(--hs-line); padding-left: 12px; color: var(--hs-dim); }


/* ------------------------------------------------------- WooCommerce */
.woocommerce .hs-content, .woocommerce-page .hs-content { min-width: 0; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products li.product {
    background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
    padding: 16px; text-align: center; margin: 0 !important; width: auto !important; float: none !important;
}
.woocommerce ul.products li.product a img { border-radius: 8px; margin-bottom: 10px; }
.woocommerce ul.products li.product .price { color: var(--hs-cyan); font-weight: 700; display: block; margin: 6px 0 12px; }
.woocommerce ul.products li.product .price del { color: var(--hs-dim); font-weight: 400; }
.woocommerce span.onsale {
    background: var(--hs-red); color: #fff; border-radius: 20px; padding: 4px 10px; min-height: 0; min-width: 0; line-height: 1.4;
}
.woocommerce div.product .product_title { margin-top: 0; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--hs-cyan); font-weight: 700; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background: var(--hs-cyan); color: #04121a; border-radius: 8px; font-weight: 600;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #6ceaff; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
    background: var(--hs-panel); border-top: 3px solid var(--hs-cyan); color: var(--hs-text);
}
.woocommerce .woocommerce-error { border-top-color: var(--hs-red); }
.woocommerce table.shop_table { border-color: var(--hs-line); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--hs-line); }
.woocommerce-store-notice, p.demo_store { background: var(--hs-cyan); color: #04121a; }
.woocommerce nav.woocommerce-pagination ul { border-color: var(--hs-line); }
.woocommerce .star-rating span { color: var(--hs-cyan); }

/* ------------------------------------------------------------ bbPress */
.bbp-forum-title, .bbp-topic-permalink, .bbp-topic-title a { color: var(--hs-text); }
#bbpress-forums {
    background: var(--hs-panel); border: 1px solid var(--hs-line); border-radius: var(--hs-radius); padding: 18px 20px;
}
#bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-topic-header, #bbpress-forums div.bbp-reply-header,
#bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-lead-topic {
    background: var(--hs-bg2); border-color: var(--hs-line);
}
#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--hs-panel2); color: var(--hs-text); border-color: var(--hs-line); }
#bbpress-forums .bbp-forum-info a, #bbpress-forums .bbp-topic-permalink { color: var(--hs-cyan); }
#bbpress-forums div.bbp-the-content-wrapper textarea, #bbpress-forums input, #bbpress-forums select {
    background: var(--hs-bg2); border-color: var(--hs-line); color: var(--hs-text);
}
.bbp-submit-wrapper button, #bbpress-forums button { background: var(--hs-cyan); color: #04121a; border: none; border-radius: 8px; }
.bbp-pagination .page-numbers { border-color: var(--hs-line); }

/* ------------------------------------------------------------ misc WP */
.sticky, .hentry { }
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: 0.82rem; color: var(--hs-dim); text-align: center; }
.wp-block-button__link { text-decoration: none; }

/* ------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .hs-layout { grid-template-columns: minmax(0, 1fr); }
    .hs-footer-widgets { grid-template-columns: repeat(2, 1fr); }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .hs-nav-toggle { display: inline-flex; }
    .hs-primary-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--hs-panel); border-bottom: 1px solid var(--hs-line); padding: 10px 16px;
    }
    .hs-primary-nav.hs-open { display: block; }
    .hs-primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .hs-primary-nav ul ul { position: static; display: block; border: 0; padding: 0 0 0 14px; background: transparent; }
    .hs-header-inner { position: relative; flex-wrap: wrap; }
}
@media (max-width: 560px) {
    h1 { font-size: 1.6rem; }
    .hs-card { padding: 20px; }
    .hs-thumb { margin: -20px -20px 16px; }
    .hs-footer-widgets { grid-template-columns: 1fr; }
    .woocommerce ul.products { grid-template-columns: 1fr; }
}