/* ==========================================================================
   The Guest Hub — design system
   One file, one set of tokens. Components below only use these tokens, so
   changing a colour or radius here changes it everywhere.
   ========================================================================== */

:root{
  /* --- surfaces & ink ------------------------------------------------- */
  --bg:            #08090d;
  --bg-elevated:   #0d0f15;
  --surface:       #12151d;
  --surface-2:     #191d27;
  --surface-3:     #212633;
  --border:        #232734;
  --border-strong: #333949;

  --text:          #f2f4f8;
  --text-muted:    #a8aebd;
  --text-dim:      #8b93a8;

  /* --- brand ---------------------------------------------------------- */
  --accent:        #6183ff;
  --accent-hover:  #7a96ff;
  --accent-press:  #4f70e6;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(97,131,255,.12);
  --accent-line:   rgba(97,131,255,.34);
  --accent-2:      #9a6bff;

  --success:       #46d6a0;
  --danger:        #ff6b6b;
  --warning:       #f5b544;

  /* --- radii ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* --- shadows -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 6px 20px rgba(0,0,0,.34);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.46);
  --shadow-accent: 0 10px 30px rgba(97,131,255,.28);

  /* --- spacing scale -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* --- type scale (fluid) --------------------------------------------- */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base:1.0625rem;
  --t-md:  1.1875rem;
  --t-lg:  clamp(1.25rem, 0.6vw + 1.1rem, 1.4rem);
  --t-xl:  clamp(1.5rem, 1.1vw + 1.25rem, 1.85rem);
  --t-2xl: clamp(1.9rem, 2vw + 1.4rem, 2.5rem);
  --t-3xl: clamp(2.4rem, 4.2vw + 1.2rem, 3.9rem);

  --leading-tight: 1.12;
  --leading-snug:  1.35;
  --leading:       1.65;

  /* --- layout --------------------------------------------------------- */
  --container: 1140px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;

  /* --- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 140ms var(--ease);
  --med:  220ms var(--ease);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Anchor links shouldn't land under the sticky header. */
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-base);
  line-height:var(--leading);
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Nothing should ever scroll sideways. */
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
/* Any component that sets its own display would otherwise beat the UA's
   [hidden] rule, so make hiding win outright. */
[hidden]{display:none !important}
img,svg,video,iframe{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.022em;line-height:var(--leading-tight)}
h1{font-size:var(--t-3xl);letter-spacing:-0.032em}
h2{font-size:var(--t-2xl);letter-spacing:-0.026em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg);line-height:var(--leading-snug)}
p{margin:0}

::selection{background:var(--accent-soft);color:var(--text)}

/* Visible only to keyboard users, and only when focused. */
.skip-link{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:200;
  transform:translateY(-160%);
  background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;border-radius:var(--r-sm);font-weight:600;
  transition:transform var(--fast);
}
.skip-link:focus{transform:translateY(0)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

/* ==========================================================================
   Layout
   ========================================================================== */

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:var(--container-narrow)}

.section{padding-block:clamp(56px,7vw,104px)}
.section + .section{border-top:1px solid var(--border)}
.section-head{max-width:56ch;margin-bottom:clamp(28px,3.5vw,44px)}
.section-head .lead{margin-top:var(--s-3)}

.eyebrow{
  display:inline-block;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-3);
}

.lead{color:var(--text-muted);font-size:var(--t-md);max-width:62ch}
.muted{color:var(--text-muted);font-size:var(--t-sm)}
.dim{color:var(--text-dim);font-size:var(--t-sm)}

.stack-sm > * + *{margin-top:var(--s-3)}
.stack    > * + *{margin-top:var(--s-5)}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;gap:var(--s-6);
  height:var(--header-h);
}

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:1.125rem;letter-spacing:-0.03em;
  flex:none;
}
.brand-mark{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px rgba(97,131,255,.4);
  display:grid;place-items:center;
}
.brand-mark span{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.92);
}

.nav-links{display:flex;align-items:center;gap:var(--s-2);margin-inline:auto}
.nav-links a{
  position:relative;
  padding:9px 14px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;color:var(--text-muted);
  transition:color var(--fast),background var(--fast);
}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  border-radius:2px;background:var(--accent);
}

.nav-actions{display:flex;align-items:center;gap:var(--s-3);flex:none;margin-left:auto}
.nav-links + .nav-actions{margin-left:0}

.nav-toggle{
  display:none;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;
  transition:border-color var(--fast),background var(--fast);
}
.nav-toggle:hover{border-color:var(--border-strong)}
.nav-toggle-bars{position:relative;width:18px;height:12px;display:block}
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--text);transition:transform var(--med),opacity var(--fast);
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars span{top:5px}
.nav-toggle-bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:var(--s-1);
    margin:0;padding:var(--s-4) var(--gutter) var(--s-6);
    background:var(--bg-elevated);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    /* Collapsed by default; opened by the toggle. */
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--med),transform var(--med),visibility var(--med);
  }
  .nav-links a{padding:14px 12px;font-size:var(--t-base)}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links a[aria-current="page"]{border-left:2px solid var(--accent)}
  .site-header.nav-open .nav-links{opacity:1;visibility:visible;transform:translateY(0)}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  --btn-bg:var(--surface-2);
  --btn-ink:var(--text);
  --btn-border:var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-border);border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-0.005em;
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:transform var(--fast),background var(--fast),
             border-color var(--fast),box-shadow var(--fast),color var(--fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  --btn-bg:linear-gradient(140deg,var(--accent),var(--accent-2));
  --btn-ink:var(--accent-ink);
  --btn-border:transparent;
  box-shadow:var(--shadow-accent);
}
.btn-primary:hover{box-shadow:0 14px 34px rgba(97,131,255,.36)}

.btn-secondary{--btn-bg:var(--surface-2);--btn-border:var(--border-strong)}
.btn-secondary:hover{--btn-bg:var(--surface-3)}

.btn-outline{--btn-bg:transparent;--btn-border:var(--border-strong)}
.btn-outline:hover{--btn-bg:var(--surface-2);--btn-border:var(--accent-line)}

.btn-quiet{--btn-bg:transparent;--btn-border:transparent;--btn-ink:var(--text-muted)}
.btn-quiet:hover{--btn-ink:var(--text);--btn-bg:var(--surface-2)}

.btn-sm{min-height:40px;padding:0 16px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn-lg{min-height:54px;padding:0 30px;font-size:var(--t-base)}

.btn[disabled],.btn.is-disabled{
  opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none;
}

.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,124px) clamp(48px,6vw,88px)}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-52%;translate:-50% 0;
  width:min(1100px,140%);aspect-ratio:1.6;
  background:radial-gradient(ellipse at center,rgba(97,131,255,.20),rgba(154,107,255,.08) 42%,transparent 70%);
}
.hero > *{position:relative;z-index:1}
.hero-center{text-align:center}
.hero-center .lead{margin-inline:auto}

.hero h1{margin-bottom:var(--s-5);text-wrap:balance}
.hero h1 br{display:none}
@media (min-width:640px){.hero h1 br{display:inline}}
.hero .lead{font-size:clamp(1.0625rem,1vw + .9rem,1.3rem);max-width:56ch}
.hero .btn-row{margin-top:clamp(28px,3vw,38px)}

.gradient-text{
  background:linear-gradient(120deg,var(--accent) 10%,var(--accent-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.pills{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3vw,40px)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:500;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-full);padding:7px 15px;
}
.pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
}

/* Compact hero for interior pages. */
.page-head{padding-block:clamp(44px,5.5vw,76px) clamp(20px,2.5vw,32px)}
.page-head h1{margin-bottom:var(--s-4)}

/* ==========================================================================
   Cards & tiles
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--shadow-sm);
}
.card-center{text-align:center;max-width:560px;margin-inline:auto}
.card h2,.card h3{margin-bottom:var(--s-2)}

.grid{display:grid;gap:clamp(16px,2vw,22px)}
/* Cards cap at a sensible width so a short catalogue doesn't stretch two
   cards across the whole page, and centre so the row never looks lopsided. */
.grid-games{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),400px));
  justify-content:center;
}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

.tile{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--med),border-color var(--med),box-shadow var(--med);
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-5px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-lg);
}
.tile-media{
  position:relative;aspect-ratio:16/10;
  background-size:cover;background-position:center;
  display:grid;place-items:center;padding:var(--s-5);
  font-weight:800;font-size:var(--t-lg);text-align:center;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
/* Keeps title text readable over any artwork. */
.tile-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,9,13,.72),rgba(8,9,13,.06) 55%);
}
.tile-media > *{position:relative;z-index:1}
.tile-body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.tile-body h3{font-size:var(--t-lg)}
.tile-body p{color:var(--text-muted);font-size:var(--t-sm);flex:1}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-2)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:600;
  border-radius:var(--r-full);padding:5px 12px;
  border:1px solid var(--accent-line);color:var(--accent);background:var(--accent-soft);
}
.badge-quiet{border-color:var(--border);color:var(--text-dim);background:var(--surface-2)}
.badge-arrow{color:var(--text-dim);font-size:var(--t-sm);transition:transform var(--fast),color var(--fast)}
.tile:hover .badge-arrow{transform:translateX(3px);color:var(--accent)}

/* Numbered steps */
.step{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px);
  transition:border-color var(--med),transform var(--med);
}
.step:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.step-n{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:grid;place-items:center;margin-bottom:var(--s-4);
  font-size:var(--t-sm);font-weight:700;color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
}
.step h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.step p{color:var(--text-muted);font-size:var(--t-sm)}

/* ==========================================================================
   Search
   ========================================================================== */

.search{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding-inline:var(--s-4);
  margin-bottom:var(--s-6);
  transition:border-color var(--fast),box-shadow var(--fast);
}
.search:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--text-dim);stroke-width:2;stroke-linecap:round}
.search input{
  flex:1;min-width:0;min-height:52px;
  background:none;border:0;outline:none;
  font-size:var(--t-base);
}
.search input::placeholder{color:var(--text-dim)}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  background:none;border:0;border-radius:var(--r-full);
  color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;
  transition:color var(--fast),background var(--fast);
}
.search-clear:hover{color:var(--text);background:var(--surface-2)}
.no-results{color:var(--text-muted);text-align:center;padding-top:var(--s-10)}

/* ==========================================================================
   Dropdown (Get Key menu)
   ========================================================================== */

.dropdown{position:relative;display:inline-block}
.dropdown > summary{list-style:none;cursor:pointer}
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown .caret{transition:transform var(--fast)}
.dropdown[open] .caret{transform:rotate(180deg)}

.menu{
  position:absolute;z-index:60;top:calc(100% + 10px);left:0;
  min-width:320px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:var(--s-2);
  box-shadow:var(--shadow-lg);
  animation:menu-in 160ms var(--ease);
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-head{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);padding:10px 12px;
}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:13px 12px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:600;
  transition:background var(--fast);
}
a.menu-item:hover{background:var(--surface-2)}
.menu-item.is-pending{opacity:.45;cursor:default}
.menu-time{
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  color:var(--accent);background:var(--accent-soft);
  border-radius:var(--r-full);padding:4px 11px;
}
.menu-time.is-soon{color:var(--text-dim);background:var(--surface-2)}

/* Very narrow phones: the brand plus a hamburger is enough in the bar. */
@media (max-width:420px){
  .nav-actions .nav-cta{display:none}
}

@media (max-width:560px){
  .dropdown{display:block;width:100%}
  .dropdown > summary{width:100%}
  .menu{position:static;min-width:0;width:100%;margin-top:var(--s-3);box-shadow:none;animation:none}
}

/* ==========================================================================
   Game page
   ========================================================================== */

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text-dim);font-size:var(--t-sm);font-weight:500;
  transition:color var(--fast),gap var(--fast);
}
.back-link:hover{color:var(--text);gap:11px}

.feature-list{display:flex;gap:var(--s-2);flex-wrap:wrap;list-style:none;margin:var(--s-5) 0 0;padding:0}
.feature-list li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-sm);color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 14px;
}
.feature-list li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
}

.code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:var(--t-xs);line-height:1.7;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px 18px;
  color:var(--text-muted);
  overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

.key-code{
  display:block;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:clamp(1.25rem,4vw,1.7rem);font-weight:600;letter-spacing:.14em;
  background:var(--bg);border:1px dashed var(--accent-line);
  border-radius:var(--r-md);padding:20px 16px;margin-block:var(--s-6);
  color:var(--text);word-break:break-all;
}

.media-frame{
  aspect-ratio:16/9;width:100%;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);background:#000;
  box-shadow:var(--shadow-md);
}
.media-frame iframe,.media-frame video{width:100%;height:100%;border:0}
.media-empty{
  aspect-ratio:16/9;width:100%;display:grid;place-items:center;text-align:center;
  border-radius:var(--r-lg);border:1px dashed var(--border-strong);
  background:var(--surface);color:var(--text-dim);padding:var(--s-6);
}
.media-empty svg{width:42px;height:42px;margin:0 auto var(--s-3);fill:none;stroke:var(--text-dim);stroke-width:1.5}
.media-empty strong{display:block;color:var(--text);font-size:var(--t-md);margin-bottom:var(--s-1)}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{display:grid;gap:var(--s-3);max-width:820px}
.faq details{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--fast);
}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:18px 22px;cursor:pointer;list-style:none;
  font-weight:600;font-size:var(--t-base);
  transition:background var(--fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--med);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq p{padding:0 22px 20px;color:var(--text-muted);font-size:var(--t-sm);max-width:70ch}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--med);
}
.contact-card:hover{border-color:var(--border-strong)}
.contact-card.is-feature{
  border-color:var(--accent-line);
  background:linear-gradient(180deg,var(--accent-soft),transparent 42%),var(--surface);
}
.contact-card h3{margin-bottom:var(--s-3)}
.contact-card p{color:var(--text-muted);font-size:var(--t-sm)}
.contact-card p + p{margin-top:var(--s-3)}
.contact-card .btn-row{margin-top:var(--s-5)}

.check-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3)}
.check-list li{
  position:relative;padding-left:30px;
  color:var(--text-muted);font-size:var(--t-sm);
}
.check-list li::before{
  content:"";position:absolute;left:4px;top:.55em;
  width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.check-list strong{color:var(--text);font-weight:600}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{border-top:1px solid var(--border);background:var(--bg-elevated);margin-top:clamp(48px,6vw,88px)}
.footer-top{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:minmax(240px,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  padding-block:clamp(40px,5vw,64px);
}
.footer-brand p{color:var(--text-dim);font-size:var(--t-sm);margin-top:var(--s-3);max-width:34ch}
.footer-col .footer-heading{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:var(--s-4)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.footer-col a{color:var(--text-muted);font-size:var(--t-sm);transition:color var(--fast)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  border-top:1px solid var(--border);padding-block:var(--s-5);
  color:var(--text-dim);font-size:var(--t-xs);
}

/* ==========================================================================
   Admin dashboard
   ========================================================================== */

.admin-bar{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-6)}
.field{
  flex:1;min-width:220px;min-height:48px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:0 16px;font-size:var(--t-sm);outline:none;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.field:focus{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft)}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:760px}
th{
  text-align:left;padding:14px 16px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-dim);background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:16px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--fast)}
tbody tr:hover{background:var(--surface-2)}
tr.is-shared{background:rgba(255,107,107,.06)}
tr.is-shared:hover{background:rgba(255,107,107,.1)}

.mono{font-family:ui-monospace,Consolas,monospace;font-size:var(--t-xs);letter-spacing:.02em}
.who{font-weight:600}
.sub{color:var(--text-dim);font-size:var(--t-xs);margin-top:3px}
.flag{color:var(--danger);font-weight:700;font-size:var(--t-xs);letter-spacing:.04em;margin-top:5px}
.chip{
  display:inline-block;font-size:var(--t-xs);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-full);padding:3px 10px;color:var(--text-muted);
  margin:0 4px 4px 0;
}
.act{display:flex;gap:var(--s-2);flex-wrap:wrap}
.act button{
  min-height:40px;padding:0 14px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--r-sm);font-size:var(--t-xs);font-weight:600;cursor:pointer;
  transition:border-color var(--fast),color var(--fast),background var(--fast);
}
.act button:hover{border-color:var(--accent-line);background:var(--surface-3)}
.act button.danger:hover{border-color:var(--danger);color:var(--danger)}
.empty{color:var(--text-muted);padding:var(--s-12) var(--s-4);text-align:center}

/* ==========================================================================
   Motion
   ========================================================================== */

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 520ms var(--ease),transform 520ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .btn:hover,.tile:hover,.step:hover{transform:none}
}

/* ==========================================================================
   Page-level helpers
   These exist so no page needs its own <style> block or inline styles.
   ========================================================================== */

/* A section that follows another without repeating the divider rule. */
.section-flush{border-top:0;padding-top:clamp(24px,3vw,36px)}

.container-wide{max-width:1280px}

.game-title{margin-top:var(--s-5)}
.card-actions{margin-top:var(--s-5)}
.key-note{margin-top:var(--s-6)}

.contact-grid{margin-top:clamp(16px,2vw,22px)}
.contact-last{margin-top:clamp(16px,2vw,22px)}

.discord-help{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  flex-wrap:wrap;
  margin-top:clamp(28px,3.5vw,40px);
  padding:clamp(20px,2.4vw,26px);
  background:linear-gradient(120deg,var(--accent-soft),transparent 60%),var(--surface);
  border:1px solid var(--accent-line);border-radius:var(--r-lg);
}
.discord-help p{color:var(--text-muted);font-size:var(--t-sm);max-width:52ch}
.discord-help strong{color:var(--text);display:block;font-size:var(--t-base);margin-bottom:var(--s-1)}
.admin-subhead{font-size:var(--t-xl);margin:clamp(32px,4vw,44px) 0 var(--s-4)}