/* GameCabi 0.68 on gamecabi.com (owner rule 2026-10-14: the site matches Relay 0.68). Loaded after site.css on every
   page, with the shared token file gc-tokens-068.css (the same file Relay 0.68 reads) before it.
   Two layers:
   1. The 0.68 shape and type for EVERY palette: Segoe UI Variable, pill buttons / chips / menu, 18px cards, 14px tiles,
      10px fields, upper-case tracked menu labels, the four-diamond mark. A palette only chooses colours.
   2. The 0.68 picture for the two 0.68 palettes (gc068, gc068-light): the owner's group photo behind every page, out of
      focus as on Relay's deeper pages, glass cards, a dark bar with the pill menu, cover-style side tiles.
   core/test/theme-068.test.js checks that every page loads this file and that the 0.68 palettes match the tokens. */

/* The photo paths, written from this file's folder (a url() in a custom property resolves where it is USED: here). */
:root { --gc-photo: url("../img/068/backdrop.webp"); --gc-photo-soft: url("../img/068/backdrop-soft.webp"); }

/* ---------------------------------------------------------------- 1. shape and type, every palette */
:root { --font: var(--gc-font-ui); --radius: var(--gc-radius-card); --r-sm: var(--gc-radius-chip); --r-lg: var(--gc-radius-card); --r-xl: var(--gc-radius-pill); }
body { font-family: var(--gc-font-ui); line-height: var(--gc-line-height); }
h1, h2, h3, .pageTitle, .card h2, .hero h2, .meCard .who h2 { font-family: var(--gc-font-display); }

.btn, .btn.sm, .chip, .iconbtn, .search, .pager button, .pager a { border-radius: var(--gc-radius-pill); }
.btn { padding: 8px 18px; font-weight: var(--gc-weight-strong); letter-spacing: .2px; }
select.ctl, input.ctl, textarea.ctl { border-radius: var(--gc-radius-field); }
.card { border-radius: var(--gc-radius-card); }
.tile { border-radius: var(--gc-radius-tile); }
.modal { border-radius: var(--gc-radius-dialog); }
.toast { border-radius: var(--gc-radius-pill); }
.hero { border-radius: var(--gc-radius-card); }

/* the menu: a pill track; the lit pill is the page you are on. SPEED-069 (owner: "look off the font"): the labels are
   Relay 0.68's tab labels exactly (renderer/style.css .tabs button: weight 600, clamp(12.5px, 1.05vw, 15px), normal
   case, no extra tracking), not the tiny upper-case tracked text. */
.top .wrap { min-height: var(--gc-bar-h); }
.nav { gap: 2px; padding: 4px; border-radius: var(--gc-radius-pill); background: var(--gc-pill-track); border: 1px solid var(--gc-pill-track-line); }
.nav a { height: 34px; display: inline-flex; align-items: center; padding: 0 clamp(8px, .95vw, 14px); border-radius: var(--gc-radius-pill);
  font-size: clamp(12.5px, 1.05vw, 15px); font-weight: 600; letter-spacing: normal; text-transform: none; white-space: nowrap; color: var(--gc-night-ink-2); }
.nav a:hover { background: var(--gc-hover); color: #fff; }
.nav a.active { background: var(--gc-pill); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
/* A long menu (7 or more pages: FFXIV, or signed in with up to 14) never clips: above 900px it takes a centred second row of the bar,
   scrolling sideways as a last resort; short menus stay on the first row (the bar's content is 1180px at most, so this
   holds at every window width). Below 901px the burger menu, as before. */
@media (min-width: 901px) {
  .top .wrap:has(> .nav > a:nth-child(7)) { flex-wrap: wrap; row-gap: 0; padding-bottom: 8px; }
  .top .wrap:has(> .nav > a:nth-child(7))::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .top .wrap > .nav:has(> a:nth-child(7)) { order: 5; display: flex; position: static; flex-direction: row; flex: 0 1 auto; max-width: 100%; margin: 0 auto;
    overflow-x: auto; scrollbar-width: none; padding: 4px; border-top: 1px solid var(--gc-pill-track-line); background: var(--gc-pill-track); }
  .top .wrap > .nav:has(> a:nth-child(7))::-webkit-scrollbar { display: none; }
  .top .wrap:has(> .nav > a:nth-child(7)) > .burger { display: none; }
}
@media (min-width: 901px) and (max-width: 1100px) { .nav a { padding: 0 8px; } }
@media (max-width: 900px) {
  .nav { border-radius: 0 0 var(--gc-radius-tile) var(--gc-radius-tile); border: 0; background: var(--navy); }
  .nav a { height: 40px; }
}

/* the mark: four diamonds, three green and one amber, as on Relay's bar */
.logo .mark:not(:has(img)) { background: none; box-shadow: none; position: relative; font-size: 0; color: transparent; }
.logo .mark:not(:has(img))::before { content: ""; position: absolute; inset: 7px; transform: rotate(45deg);
  background:
    linear-gradient(var(--gc-accent-green-2), var(--gc-accent-green-2)) 0 0 / 7px 7px no-repeat,
    linear-gradient(rgba(91, 226, 155, .65), rgba(91, 226, 155, .65)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(rgba(91, 226, 155, .65), rgba(91, 226, 155, .65)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--gc-amber), var(--gc-amber)) 100% 100% / 7px 7px no-repeat; }
.logo .mark:not(:has(img)) .ico { display: none; }

/* the page title: display face, no rule beside it */
.pageTitle { font-weight: 700; letter-spacing: -.3px; color: var(--text); font-size: var(--gc-fs-title); }
.pageTitle::before, .pageTitle.center::after { width: 4px; height: .9em; border-radius: var(--gc-radius-pill); background: var(--brand); }

/* keyboard focus is always visible */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------------------------------------------------------- 2. the 0.68 picture (gc068 / gc068-light) */
html[data-palette^="gc068"] body { background: var(--gc-bg); color: var(--gc-ink); }
/* the photo, out of focus and dark (the pre-blurred copy costs nothing to draw), behind every page */
html[data-palette^="gc068"] body::before { content: ""; position: fixed; inset: -48px; z-index: -2; pointer-events: none;
  background: var(--gc-bg) var(--gc-photo-soft) var(--gc-photo-position) / cover no-repeat; filter: var(--gc-photo-filter-deep); }
/* SPEED-069: the deep filter is baked into the picture (img/068/backdrop-deep-{night,light}.webp: the same blur(10px),
   saturate and brightness, made once), so no live filter runs under the top bar's blur on every scroll frame */
html[data-palette^="gc068"] body::before { background-image: url("../img/068/backdrop-deep-night.webp"); filter: none; inset: 0; }
html[data-palette="gc068-light"] body::before { background-image: url("../img/068/backdrop-deep-light.webp"); }
html[data-palette^="gc068"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--gc-photo-shade-deep); }
@media (prefers-reduced-transparency: reduce) { html[data-palette^="gc068"] body::before { background-image: var(--gc-photo-plain); filter: none; } }

/* the bar: dark glass in both modes; the theme menu and the search sit on it as quiet pills */
html[data-palette^="gc068"] .top { background: linear-gradient(180deg, var(--gc-bar), var(--gc-bar-2)); border-bottom: 1px solid var(--gc-bar-line); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* the brand as on Relay's bar ("GameCabi Relay": weight 800, normal case, no extra tracking) */
html[data-palette^="gc068"] .logo { color: var(--gc-night-ink); letter-spacing: normal; text-transform: none; font-size: 17px; font-weight: 800; }
html[data-palette^="gc068"] .logo .game { color: var(--gc-accent-green-2); opacity: 1; letter-spacing: normal; font-weight: 600; }
html[data-palette^="gc068"] .search, html[data-palette^="gc068"] .iconbtn { background: var(--gc-night-glass-2); border-color: var(--gc-night-line); color: var(--gc-night-ink); }
html[data-palette^="gc068"] .iconbtn:hover { background: rgba(255, 255, 255, .12); }
html[data-palette^="gc068"] .search input::placeholder { color: var(--gc-night-muted); }
/* the theme menu folds to a swatch below 900px (site.css); on the 0.68 bar the swatch is the mark's green and amber */
@media (max-width: 900px) { html[data-palette^="gc068"] select.themeSel { color: transparent;
  background-image: linear-gradient(45deg, var(--gc-accent-green) 50%, var(--gc-amber) 50%); background-size: 14px 14px; background-repeat: no-repeat; background-position: center; } }

/* the banner under the bar is the photo itself now */
html[data-palette^="gc068"] .banner { background: none; }
html[data-palette^="gc068"] .subtitle { color: var(--gc-ink-2); }

/* glass: cards, tiles, chips, inputs.
   SPEED-069: no backdrop-filter on cards, tiles, the hero or the side buttons. The glass is 84 % opaque over a photo
   that is already blurred, so a live blur looked the same while it re-sampled the photo behind every card on every
   scroll frame (live home, 1920x1080, 4 s scroll: GPU 345 ms with it, 59 ms without). Only the top bar keeps one. */
html[data-palette^="gc068"] .card, html[data-palette^="gc068"] .tile, html[data-palette^="gc068"] .stat, html[data-palette^="gc068"] .meCard {
  background: var(--gc-surface); border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow-card); }
html[data-palette^="gc068"] .tile:hover { border-color: var(--gc-line-strong); box-shadow: var(--gc-shadow-card-hover); }
html[data-palette^="gc068"] .card h2 { border-bottom-color: var(--gc-line); }
html[data-palette^="gc068"] .chip { background: var(--gc-surface-2); border-color: var(--gc-line); color: var(--gc-ink-2); }
html[data-palette^="gc068"] .chip.on, html[data-palette^="gc068"] .chip:hover { background: var(--gc-accent-soft); border-color: var(--brand); color: var(--gc-ink); }
html[data-palette^="gc068"] select.ctl, html[data-palette^="gc068"] input.ctl, html[data-palette^="gc068"] textarea.ctl { background: var(--gc-field); border-color: var(--gc-line-2); color: var(--gc-ink); }
html[data-palette^="gc068"] .modal, html[data-palette^="gc068"] .toast { background: var(--gc-surface-solid); border: 1px solid var(--gc-line-2); box-shadow: var(--gc-shadow-dialog); color: var(--gc-ink); }
html[data-palette^="gc068"] .overlay { background: var(--gc-scrim); }
html[data-palette^="gc068"] table.tbl th { color: var(--gc-muted); }

/* the primary button is Relay's green Play pill */
html[data-palette^="gc068"] .btn:not(.ghost):not(.sec):not(.danger) { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: transparent; color: var(--on-brand); }
html[data-palette="gc068"] .btn:not(.ghost):not(.sec):not(.danger) { box-shadow: var(--gc-shadow-play); }
html[data-palette^="gc068"] .btn:hover { filter: brightness(1.06); }

/* the hero: a glass panel over the photo instead of the old gradient */
html[data-palette^="gc068"] .hero { background: var(--gc-surface); border: 1px solid var(--gc-line); color: var(--gc-ink); box-shadow: var(--gc-shadow-card); }
html[data-palette^="gc068"] .hero p, html[data-palette^="gc068"] .hero .muted { color: var(--gc-ink-2); }
/* the hero is glass now (white glass in Light): its secondary button takes the card's ink, not the old hero's white */
html[data-palette^="gc068"] .hero .btn.ghost { background: var(--gc-surface-2); border-color: var(--gc-line-2); color: var(--gc-ink); }
/* a wiki banner still fills the hero behind the text; there the dark shade stays and the button stays light */
html[data-palette^="gc068"] .hero.has-banner .btn.ghost { background: rgba(7, 10, 12, .4); border-color: rgba(255, 255, 255, .7); color: #fff; }

/* the side buttons: cover-style tiles (glass, a green label line, a lift on hover) instead of the colour gradients */
html[data-palette^="gc068"] .sidebtn { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: var(--gc-radius-tile); color: var(--gc-ink); text-shadow: none;
  box-shadow: var(--gc-shadow-card); font-weight: var(--gc-weight-strong); font-size: 16px; transition: transform .15s, border-color .15s; }
html[data-palette^="gc068"] .sidebtn small { color: var(--brand); font-size: 11px; letter-spacing: var(--gc-track-label); text-transform: uppercase; font-weight: var(--gc-weight-label); opacity: 1; }
html[data-palette^="gc068"] .sidebtn:hover { transform: translateY(-2px); border-color: var(--gc-line-strong); text-decoration: none; }

/* light: the cards turn white glass, the bar stays dark */
html[data-palette="gc068-light"] .card h2 { color: var(--gc-ink); }

footer { color: var(--muted); }
html[data-palette^="gc068"] footer { border-top-color: var(--gc-line); color: var(--gc-muted); }

/* FFXIV pages (ffxiv.css paints them gold with [data-game] rules that outrank the layer above): under the 0.68 palettes
   they wear the same 0.68 look; the gold stays only as the FFXIV mark. */
html[data-palette^="gc068"][data-game="ffxiv"] .top { background: linear-gradient(180deg, var(--gc-bar), var(--gc-bar-2)); }
html[data-palette^="gc068"][data-game="ffxiv"] .nav a.active { background: var(--gc-pill); color: #fff; }
html[data-palette^="gc068"][data-game="ffxiv"] .banner { background: none; }
html[data-palette^="gc068"][data-game="ffxiv"] .pageTitle { color: var(--text); }
html[data-palette^="gc068"][data-game="ffxiv"] .pageTitle::before { background: var(--brand); }
html[data-palette^="gc068"][data-game="ffxiv"] .hero { background: var(--gc-surface); }
html[data-palette^="gc068"][data-game="ffxiv"] .card h2 { border-bottom-color: var(--gc-line); }
html[data-palette^="gc068"][data-game="ffxiv"] .btn:not(.ghost), html[data-palette^="gc068"][data-game="ffxiv"] .chip.on { color: var(--on-brand); }

/* Page changes and dialogs move like Relay 0.68.0 (renderer/theme/relay-motion.css), with the SHARED motion tokens of
   gc-tokens-068.css (--gc-motion-*: page 220 ms, shift 8 px, ease-out cubic-bezier(.2,.8,.2,1); fade-only and off
   overrides; 0 ms under reduced motion). A page comes DOWN into place (from above, so no scroll bar flashes); the bar
   and the mark stay still; the old page only fades. games.js marks an ordinary navigation html.gc-page-nav (cross-
   document view transitions) or html.gc-page-in (by class, browsers without them), only under the 0.68 palettes and
   never with reduced motion or html[data-gc-motion="off"]. The game switch keeps its own motion (site.css). */
@keyframes gc068-page-in { from { opacity: 0; transform: translate3d(0, calc(var(--gc-motion-shift) * -1), 0); } }
@keyframes gc068-fade-in { from { opacity: 0; } }
@keyframes gc068-fade-out { to { opacity: 0; } }
@keyframes gc068-pop-in { from { opacity: 0; transform: scale(var(--gc-motion-scale)); } }
@media (prefers-reduced-motion: no-preference) {
  html.gc-page-nav:not([data-gc-motion="off"])::view-transition-old(gc-page) { animation: gc068-fade-out var(--gc-motion-dialog-out) var(--gc-motion-ease-in) both; }
  html.gc-page-nav:not([data-gc-motion="off"])::view-transition-new(gc-page) { animation: gc068-page-in var(--gc-motion-page) var(--gc-motion-ease-out) backwards; }
  html.gc-page-nav::view-transition-group(gc-top), html.gc-page-nav::view-transition-group(gc-mark) { animation: none; }
  html.gc-page-nav::view-transition-old(root), html.gc-page-nav::view-transition-new(root) { animation-duration: var(--gc-motion-page); }
  html.gc-page-in:not([data-gc-motion="off"]) main.layout, html.gc-page-in:not([data-gc-motion="off"]) .banner { animation: gc068-page-in var(--gc-motion-page) var(--gc-motion-ease-out) backwards; }
  /* dialogs (app.js modal(): .overlay > .modal, added when they open): the dim fades in, the box scales up a little */
  html[data-palette^="gc068"]:not([data-gc-motion="off"]) .overlay:not(.hidden) { animation: gc068-fade-in var(--gc-motion-dialog-in) var(--gc-motion-ease-out) backwards; }
  html[data-palette^="gc068"]:not([data-gc-motion="off"]) .overlay:not(.hidden) > .modal { animation: gc068-pop-in var(--gc-motion-dialog-in) var(--gc-motion-ease-out) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  html.gc-page-nav::view-transition-group(*), html.gc-page-nav::view-transition-old(*), html.gc-page-nav::view-transition-new(*) { animation: none !important; }
  html.gc-page-in main.layout, html.gc-page-in .banner { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) { html[data-palette^="gc068"] .sidebtn:hover { transform: none; } }

/* SPEED-069: the theme menu shows its whole name ("Site default (0.68 Light)"), sized to its text, never cut */
@media (min-width: 901px) {
  .top select.themeSel { field-sizing: content; width: auto; min-width: 0; max-width: 260px; text-overflow: clip; }
  @supports not (field-sizing: content) { .top select.themeSel { width: 200px; max-width: 200px; } }
}
/* SPEED-069: a signed-out phone header fitted 449px into 390px ("Create account" ran off the screen); below 480px the
   join button goes (Sign in stays, and the sign-in page links to it) */
@media (max-width: 480px) { .top .topJoin { display: none; } .top .wrap { gap: 10px; } }
/* SPEED-069 (owner 17:02): a hairstyle picture is a bust that stops in a hard cut (a flat band) above the caption, framed
   loose. In the showcase it is framed on the head and shoulders (1.3x, anchored at the top) and the cut edge fades into
   the blurred backdrop behind it. Other categories are unchanged (whole outfit, never cropped). */
.slideshow .slide img.ssHair { object-fit: cover; object-position: 50% 0; transform: scale(1.3); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(#000 0, #000 58%, transparent 82%); mask-image: linear-gradient(#000 0, #000 58%, transparent 82%); }