/* Galaxyboxx: the few global rules theme.json cannot express. Colours, type and spacing are in theme.json. */
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Header, page and footer sit flush; spacing inside the page comes from the blocks themselves.
   (WooCommerce wraps a product page's content in a box of its own, so "main" is matched at any depth.) */
.wp-site-blocks > *{margin-block-start:0}
.wp-site-blocks main{display:block;min-height:50vh;padding-block:var(--wp--preset--spacing--50) var(--wp--preset--spacing--60)}

img, video{max-width:100%;height:auto}

/* One visible focus style everywhere: keyboard users can always see where they are */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px;border-radius:2px}

/* Links inside running text are underlined, so they are not marked by colour alone */
:where(.wp-block-post-content, .entry-content) :where(p, li, td, dd) a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
:where(.wp-block-post-content, .entry-content) :where(p, li, td, dd) a:hover{text-decoration-thickness:2px}

::selection{background:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas)}

/* ---------- One measure for the whole shop ----------
   Wide sections (product rows and grids, banners' words) are 1280px at most. The page keeps a gutter of at least
   5% of the screen each side; WordPress's own "full width" alignment then runs to the edge of the screen. */
.wp-site-blocks{--gb-measure:1280px;--gb-gutter:max(var(--wp--style--root--padding-left,2rem), 5vw)}
.wp-site-blocks main{--wp--style--root--padding-left:var(--gb-gutter);--wp--style--root--padding-right:var(--gb-gutter)}

/* ---------- Page banner: the page title over a picture or the galaxy backdrop, edge to edge under the header
   (a cover block with class gb-page-hero) ---------- */
.wp-site-blocks main:has(.gb-page-hero){padding-top:0}
.gb-page-hero{
  min-height:clamp(240px,24vw,400px) !important;padding:0 !important;margin-block:0 var(--wp--preset--spacing--50) !important;
  border:0;border-bottom:1px solid var(--wp--custom--line);border-radius:0;overflow:hidden;
  /* the backdrop for a banner without a picture: drawn, so it is sharp on any screen */
  background:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 71%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 18%, rgba(94,235,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 62%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(178,102,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 77%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 12%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(60% 120% at 82% 10%, rgba(139,0,255,.30) 0%, transparent 62%),
    radial-gradient(50% 110% at 58% 105%, rgba(0,229,255,.16) 0%, transparent 60%),
    linear-gradient(120deg, #14151C 0%, #181922 55%, #1B1530 100%);
}
.gb-page-hero .wp-block-cover__image-background{object-position:center}
/* with a picture: dark on the side of the words, the picture showing through on the other */
.gb-page-hero .wp-block-cover__background{background:linear-gradient(90deg, rgba(15,16,21,.94) 0%, rgba(15,16,21,.78) 38%, rgba(15,16,21,.18) 100%) !important;opacity:1 !important}
.gb-page-hero .wp-block-cover__background.has-background-dim-100{background:none !important}
/* (WordPress places a cover's words with rules of its own; these must win, hence !important) */
.gb-page-hero .wp-block-cover__inner-container{
  box-sizing:border-box;width:100% !important;max-width:calc(var(--gb-measure) + 2 * var(--gb-gutter));margin-inline:auto !important;
  padding:var(--wp--preset--spacing--50) var(--gb-gutter);color:var(--wp--preset--color--text);
}
.gb-page-hero .wp-block-cover__inner-container > *{margin-inline:0 !important}
.gb-page-hero :where(h1){margin:0 0 .5rem;max-width:22ch;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.gb-page-hero :where(p){margin:0;max-width:72ch;color:#CBD5E1}
.gb-page-hero :where(p) + :where(p){margin-top:.75rem}
.gb-page-hero .wc-block-breadcrumbs, .gb-page-hero .woocommerce-breadcrumb{margin:0 0 .75rem;font-size:.8125rem;color:var(--wp--preset--color--muted)}

/* A reading column (legal pages, the contact form) starts on the left edge, under the banner's title */
.gb-prose > *{margin-inline:0 auto !important}

/* ---------- Accordion: a stack of details blocks inside a group with class gb-accordion ---------- */
.gb-accordion{display:flex;flex-direction:column;gap:.75rem;margin-block:var(--wp--preset--spacing--40)}
.gb-accordion > *{margin:0 !important;max-width:none !important;width:100%}
.wp-block-details{transition:border-color .2s var(--wp--custom--ease)}
.wp-block-details[open]{border-color:var(--wp--custom--line-control)}
.wp-block-details > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.0625rem;line-height:1.35;min-height:28px}
.wp-block-details > summary::-webkit-details-marker{display:none}
.wp-block-details > summary::after{content:'';flex:none;width:10px;height:10px;border-right:2px solid var(--wp--preset--color--cyan);border-bottom:2px solid var(--wp--preset--color--cyan);transform:rotate(45deg);transition:transform .2s var(--wp--custom--ease);margin-right:4px}
.wp-block-details[open] > summary::after{transform:rotate(-135deg)}
.wp-block-details[open] > summary{margin-bottom:.75rem;color:var(--wp--preset--color--cyan)}
.wp-block-details > :where(p, ul, ol){color:#CBD5E1}
.wp-block-details > :last-child{margin-bottom:0}

/* ---------- Forms ---------- */
.gb-form{display:grid;gap:1.125rem;margin-block:var(--wp--preset--spacing--40)}
.gb-form.gb-form{margin-inline:0}
.gb-form p{margin:0}
.gb-form label{display:block;margin-bottom:.375rem;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.875rem;letter-spacing:.04em;text-transform:uppercase}
.gb-form__optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--wp--preset--color--muted)}
.gb-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select){
  display:block;width:100%;padding:.75rem .875rem;
  background:var(--wp--preset--color--surface);color:var(--wp--preset--color--text);
  border:1px solid var(--wp--custom--line-control);border-radius:var(--wp--custom--radius--small);
  font:inherit;line-height:1.5;
}
.gb-form textarea{resize:vertical;min-height:9rem}
.gb-form :where(input, textarea, select):hover{border-color:rgba(255,255,255,.3)}
.gb-form :where(input, textarea, select):focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:1px;border-color:var(--wp--preset--color--cyan)}
.gb-form [aria-invalid="true"]{border-color:#FF8A66}
.gb-form__error{display:block;margin-top:.375rem;color:#FFB199;font-size:.875rem}
.gb-form__error[hidden]{display:none}
.gb-form button[type="submit"]{cursor:pointer;min-height:48px}
.gb-form button[disabled]{opacity:.6;cursor:progress}
.gb-form__status:empty{display:none}
.gb-form__status{padding:.75rem 1rem;border-radius:var(--wp--custom--radius--small);border:1px solid var(--wp--custom--line-control);background:var(--wp--preset--color--surface)}
.gb-form__status.is-success{border-color:#34D399;color:#A7F3D0}
.gb-form__status.is-error{border-color:#FF8A66;color:#FFB199}
/* The spam trap: present for bots, out of sight and out of reach for people */
.gb-form__trap{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Product filters: the form beside a grid of products ---------- */
.gb-filters{margin:0;padding:1.25rem;gap:1rem;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
.gb-filters fieldset{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:0;padding:0;border:0;min-width:0}
.gb-filters legend{padding:0;margin-bottom:.375rem;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.875rem;letter-spacing:.04em;text-transform:uppercase}
.gb-filters fieldset label{font-weight:400;text-transform:none;letter-spacing:0;color:var(--wp--preset--color--muted)}
.gb-filters .gb-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.gb-filters .gb-form__actions button{flex:1 1 auto}
.gb-filters__clear{font-size:.875rem}
.gb-filters select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2300E5FF' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.25rem}

/* ---------- Cookie banner (CookieYes loads its own styles late, hence the weight of these rules) ---------- */
html body .cky-consent-container .cky-btn.cky-btn-accept,
html body .cky-consent-container [data-cky-tag="accept-button"],
html body .cky-modal .cky-btn.cky-btn-accept{background:#00E5FF !important;border:1px solid #00E5FF !important;color:#0F1015 !important;border-radius:4px !important}
html body .cky-consent-container .cky-btn.cky-btn-reject,
html body .cky-consent-container .cky-btn.cky-btn-customize,
html body .cky-consent-container [data-cky-tag="reject-button"],
html body .cky-consent-container [data-cky-tag="settings-button"]{background:transparent !important;border:1px solid #00E5FF !important;color:#F1F5F9 !important;border-radius:4px !important}
html body .cky-btn-revisit-wrapper{background:#181922 !important;border:1px solid rgba(255,255,255,.15)}

/* A long web address written out in the text wraps instead of pushing the page wider than a phone screen */
.wp-block-post-content :where(p, li, td, dd){overflow-wrap:anywhere}

/* ---------- Rhythm: the same room between things on every page ----------
   Sections of a page sit one step apart (40px); the banner above and the footer below keep the same room on
   every page. Inside a section a heading sits close to the text it introduces and further from what came before. */
.wp-block-post-content > * + *{margin-block-start:var(--wp--preset--spacing--50)}
.wp-block-post-content > :last-child, .wp-block-post-content > :last-child > :last-child{margin-block-end:0}
.wp-block-post-content .wp-block-columns + .wp-block-columns{margin-block-start:var(--wp--preset--spacing--60)}
.wp-block-post-content :is(p, ul, ol, figure, .wp-block-columns, .wp-block-group, .wp-block-woocommerce-single-product) + :is(h2, h3){margin-block-start:2.25rem}
.wp-block-post-content :is(h2, h3, h4) + :is(p, ul, ol){margin-block-start:.75rem}
.wp-block-post-content :is(h2, h3, h4){margin-block-end:0}

/* Text reads from the left edge everywhere: headings and paragraphs the old shop centred line up with the rest */
.wp-block-post-content .has-text-align-center:is(h1, h2, h3, h4, p){text-align:left}

/* A picture standing on its own in the text never towers over the page */
.wp-block-post-content > .wp-block-group > .wp-block-image img{max-height:520px;width:auto}

/* The licensed banner photos (inc/banners.php) come as <picture>: the wrapper draws no box, so each space's rules
   for its <img> (absolute, cover, grid cell) apply as if the picture were a plain image. Its <source>s would
   otherwise become empty grid or flex items of the space around it. */
picture.gb-banner{display:contents}
picture.gb-banner > source{display:none}

/* ---------- Buttons: one height, words centred ---------- */
main :is(a.wp-block-button__link, a.wp-element-button, a.button){display:inline-flex;align-items:center;justify-content:center;text-align:center}
main :is(.wp-block-button__link, .wp-element-button, button[type="submit"], input[type="submit"], .button){min-height:48px;box-sizing:border-box}
main .wc-block-product :is(.wp-block-button__link, .wp-element-button, .button){min-height:44px}

/* ---------- Shared pieces of the drop-board pages (home and game hubs) ---------- */
/* Words for screen readers only */
.screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
/* Small orange label with a line in front of it */
.gb-kicker{display:flex;align-items:center;gap:12px;font-family:var(--wp--preset--font-family--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FF7A40}
.gb-kicker::before{content:'';flex:none;width:32px;height:2px;background:#FF4D00}
/* Buttons */
.gb-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--wp--custom--radius--small);background:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas);font-family:var(--wp--preset--font-family--body);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.gb-button:hover{background:var(--wp--preset--color--cyan-hi);color:var(--wp--preset--color--canvas)}
.gb-button--ghost{background:transparent;color:var(--wp--preset--color--text);border:1px solid rgba(255,255,255,.24);font-size:14px;padding:0 20px}
.gb-button--ghost:hover{background:rgba(255,255,255,.06);color:var(--wp--preset--color--text);border-color:var(--wp--preset--color--cyan)}