@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:wght@500;700;800&family=Onest:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

/* =====================================================================
   PRIME — the inner-page bridge.               (pilot: tappedin.gg)

   Three palettes, chosen on the landing, carried here by the tapin_pal
   cookie (header-full stamps data-pal before paint):

     VOLTAGE (default)  act #8a2bff / live #00f0ff
     SOLAR              act #ff5400 / live #ffc400
     ACID               act #23f26b / live #c8ff2e

   --ion is the token every inner component references: it maps to the
   palette's ACT colour; --ember maps to LIVE. The extra --act-ink token
   keeps button text readable per palette (white on violet, near-black
   on orange and green).

   THE AMBIENT v4: gated to real game-content pages only — a page that
   declares $axiomNoGameContext (register, the hub) or is not a content
   page never shows it, so neutral ground stays neutral. Its crop now
   comes from the game's own focal sidecar, emitted inline server-side,
   so no half-cropped logo lettering.
   ===================================================================== */

:root:root{
  --void:#0a0a10;
  --panel:#12121b;
  --panel-2:#191926;
  --line:#262638;
  --line-soft:#191926;

  --ion:#8a2bff;
  --ion-rgb:138,43,255;
  --ion-dim:#6c1fd6;
  --star:#a866ff;
  --ember:#00f0ff;
  --act-ink:#ffffff;

  --text:#f4f3fb;
  --text-dim:#a09db4;
  --text-dimmer:#62607c;

  --display:'Big Shoulders',sans-serif;
  --body:'Onest',sans-serif;
  --mono:'Spline Sans Mono',monospace;
}
:root:root[data-pal="solar"]{
  --ion:#ff5400;--ion-rgb:255,84,0;--ion-dim:#d64500;--star:#ff7a33;--ember:#ffc400;--act-ink:#180700;
}
:root:root[data-pal="acid"]{
  --ion:#23f26b;--ion-rgb:35,242,107;--ion-dim:#12c452;--star:#5cff93;--ember:#c8ff2e;--act-ink:#001408;
}

#stars{display:none!important;}
body::before{opacity:.04!important;}
html,body{overflow-x:clip;}

/* --- THE AMBIENT v4 -------------------------------------------------- */
/* Position arrives inline from the game's own focal sidecar. */
.game-ambient{position:fixed;top:0;left:0;right:0;height:60vh;z-index:0;pointer-events:none;
  background-size:cover;
  /* opacity now arrives inline, per world, from that game's own row --
     see axiom_game_ambient_opacity(). A value here would be a second
     definition of the same thing and would win or lose by accident. */
  filter:saturate(1.12);
  -webkit-mask-image:radial-gradient(ellipse 135% 120% at 60% -10%,black 16%,rgba(0,0,0,.5) 54%,transparent 82%);
  mask-image:radial-gradient(ellipse 135% 120% at 60% -10%,black 16%,rgba(0,0,0,.5) 54%,transparent 82%);}

/* The rule that stood here hid JOIN GAME outright, saying the switcher
   carried the function. It did not: the switcher moves you between worlds
   and has never been able to follow one, and account.php can only manage
   games you already follow. So from 2026-07-31 to 2026-08-08 there was no
   way for a member to join a world, and nothing failed or logged.
   Removed with the markup it hid, so the trap cannot re-arm on a future
   element that happens to carry .jg-btn. The way in is now
   includes/game-follow.php, on the world's own name line.
   Nothing hides to make a layout fit. */

/* --- header ---------------------------------------------------------- */
header{background:rgba(10,10,16,.84)!important;border-bottom:1px solid var(--line-soft);}
.brand{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.07em;text-transform:uppercase;text-shadow:none;color:var(--text);gap:9px;align-items:center;}
.tapin-mark{display:inline-block;width:11px;height:11px;border-radius:3px;background:linear-gradient(135deg,var(--ember) 0%,var(--ion) 52%,var(--ion-dim) 100%);box-shadow:0 0 12px rgba(var(--ion-rgb),.7);flex-shrink:0;}

.nav-links{gap:24px;font-size:14px;font-weight:500;}
.nav-links a{position:relative;padding:5px 0;color:var(--text-dim);transition:color .16s ease;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active-link{color:var(--text);}
.nav-links a.active-link::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ion),var(--ember));}

.btn-join{border-radius:11px!important;font-family:var(--body);font-weight:700;background:var(--ion);color:var(--act-ink);letter-spacing:.06em;text-transform:uppercase;transition:background .16s ease,transform .1s ease;}
.btn-join:hover{background:var(--star);}
.btn-join:active{transform:translateY(1px);}
.btn,button.btn,a.btn{border-radius:11px!important;font-family:var(--body);font-weight:600;letter-spacing:0;}
.btn-primary{background:var(--ion);color:var(--act-ink);border:1px solid var(--ion);}
.btn-primary:hover{background:var(--star);border-color:var(--star);}

/* --- surfaces --------------------------------------------------------- */
.game-card,.hub-card,.world-card{border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:transform .18s ease,border-color .18s ease;}
.game-card:hover,.hub-card:hover,.world-card:hover{transform:translateY(-3px);border-color:var(--ion);}

/* selection/scrollbar/focus rules REMOVED 2026-08-01 — an older
   duplicate of the app-feel cluster. THE UNIFORMITY LAW: that lives in
   site.css only. A theme file recolors; it never carries base
   experience. */
.accent{color:var(--ember);}

.section-eyebrow,.eyebrow,.crumbs,.breadcrumbs{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;}

.page-head,.catalogue-head,.section-head{padding-top:18px!important;}
.page-head h1,.catalogue-head h1{font-size:clamp(28px,3.6vw,44px)!important;margin-bottom:8px!important;letter-spacing:.03em;text-transform:uppercase;}
h1,h2,h3,h4,.section-head h2{letter-spacing:.02em;}

/* --- the hamburger is a signpost, not furniture --------------------
   It takes the palette's action colour so a first-time visitor on
   mobile knows exactly where navigation lives, and it re-tints the
   moment the palette switches. */
.menu-toggle{color:var(--ion)!important;border:2px solid var(--ion)!important;border-radius:10px!important;box-shadow:0 0 16px rgba(var(--ion-rgb),.35);transition:background .16s ease,color .16s ease,box-shadow .2s ease;}
.menu-toggle:hover,.menu-toggle:focus-visible{background:var(--ion);color:var(--act-ink)!important;box-shadow:0 0 22px rgba(var(--ion-rgb),.55);}

/* --- the palette switcher, now sitewide ---------------------------- */
.pal{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line);border-radius:11px;}
.pal button{display:block;width:14px;height:14px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;transition:transform .12s ease,border-color .15s ease;}
.pal button:hover{transform:scale(1.18);}
.pal .pal-voltage{background:linear-gradient(135deg,#8a2bff,#6c1fd6);}
.pal .pal-solar{background:linear-gradient(135deg,#ffc400,#ff5400);}
.pal .pal-acid{background:linear-gradient(135deg,#c8ff2e,#23f26b);}
html:not([data-pal]) .pal .pal-voltage,
html[data-pal="solar"] .pal .pal-solar,
html[data-pal="acid"] .pal .pal-acid{border-color:var(--text);}
@media (max-width:520px){.pal{padding:5px 7px;gap:7px;}.pal button{width:12px;height:12px;}}

/* --- chat pops in the palette --------------------------------------
   The widget is token-driven already (66 var(--ion) references), so
   it follows the palette by construction; these lines make the
   launcher legible per palette and give it the brand glow. */
.ax-chat-launcher{color:var(--act-ink)!important;}
.ax-chat{box-shadow:0 8px 34px -12px rgba(var(--ion-rgb),.55);}
.ax-chat-badge{background:var(--ember)!important;color:#0a0a10!important;}

/* The Signal broadcast mark (footer) - palette-reactive */
.sig-link svg{width:15px;height:15px;color:var(--ion);flex:0 0 auto;transition:color .2s ease;}
.sig-link:hover svg{color:var(--star);}

/* --- guest chat bubble: styles moved INTO includes/chat-widget.php
   (2026-07-31). It must render on pages that load no site chrome at
   all (the guest landing loads only proto-p9.css), so its styles now
   travel with its markup, scoped under #axChatGuestRoot. One source. */
/* launcher follows the palette wherever the old css hardcoded */
.ax-chat-launcher{background:var(--ion)!important;color:var(--act-ink)!important;}

/* --- header truly centered (2026-07-31) ---------------------------- */
/* The wrap was flex space-between: the middle links centered in the
   LEFTOVER space, and the right cluster (~292px) far outweighs the
   brand (~65px), so the nav sat a measured ~115px left of the page's
   true centerline. A 3-column grid centers the middle column on the
   wrap itself, which is centered on the viewport. */
header nav.wrap{display:grid;grid-template-columns:1fr max-content 1fr;align-items:center;column-gap:18px;max-width:1072px;padding-left:20px!important;padding-right:20px!important;}
/* Children PINNED to their columns: .nav-links is display:none on
   mobile, and a hidden grid child generates no box — without explicit
   placement the right cluster auto-flowed into the middle column and
   the whole bar read pushed-left (measured live on a 386px viewport,
   2026-07-31). */
header nav.wrap .brand{grid-column:1;justify-self:start;}
header nav.wrap .nav-links{grid-column:2;justify-self:center;margin-left:0;}
header nav.wrap .nav-cta{grid-column:3;justify-self:end;margin-left:0;}

/* --- the Signal beacon follows the palette, not production's gold -- */
/* Remapping the three vars (not the rules) means the pulse animation's
   drop-shadows follow the palette too, for free. */
:root:root{--sig-gold:var(--ion);--sig-gold-bright:var(--star);--sig-gold-rgb:var(--ion-rgb);}

/* app-feel block MOVED to site.css 2026-08-01 — THE UNIFORMITY LAW:
   base-experience rules live in the base stylesheet every page loads,
   never in a theme layer. */

/* --- boards, room to breathe (2026-07-31) -------------------------- */
.cat-row{padding:18px 20px!important;gap:16px!important;margin-bottom:12px!important;}
.cat-name{font-size:1.04rem!important;}
.cat-desc{font-size:.86rem!important;line-height:1.55!important;margin-top:3px!important;}
.cat-stats{font-size:.78rem!important;white-space:nowrap!important;}

/* --- switcher: favorites starred, All Games pinned (2026-07-31) ---- */
.gs-fav{color:var(--ember);font-size:.72em;vertical-align:1px;margin-left:3px;}
.game-switcher-list .game-switcher-all{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:4px;}
.game-switcher-list .game-switcher-all a{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--star);}

/* --- the invitation rule (2026-07-31): every submit surface asks --- */
.submit-invite{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--text-dim);}

/* --- beacon unread badge (2026-07-31): the pulse carries a number -- */
.sig-count{position:absolute;top:0;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ember);color:#0a0a10;font-family:var(--mono);font-size:.6rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 8px rgba(var(--ion-rgb),.45);z-index:2;}

/* --- member chat, PRIME energy (2026-07-31) ------------------------ */
.ax-chat.open{border-color:var(--ion);box-shadow:0 20px 56px rgba(0,0,0,.6),0 0 34px rgba(var(--ion-rgb),.16);}
.ax-chat-head{background:rgba(var(--ion-rgb),.07);}
.ax-chat-title{font-family:var(--display);font-size:.92rem;letter-spacing:.06em;color:var(--text);}
.ax-chat-row{border:1px solid transparent;transition:background .14s ease,border-color .14s ease;}
.ax-chat-row:hover{background:rgba(var(--ion-rgb),.12);border-color:rgba(var(--ion-rgb),.35);}
.ax-chat-row-unread{background:var(--ember);color:#0a0a10;box-shadow:0 0 8px rgba(var(--ion-rgb),.4);}
.ax-chat-msg.mine{background:rgba(var(--ion-rgb),.16);border-color:var(--ion-dim);}
.ax-chat-empty{font-family:var(--mono);letter-spacing:.04em;}
.ax-chat-more{color:var(--star);}
.ax-chat-more:hover{color:var(--ion);}
.ax-chat-newgroup:hover{border-color:var(--ion);color:var(--text);}

/* --- resources: the whole card is the door (2026-07-31) ------------ */
a.resource-block{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
a.resource-block:hover{border-color:var(--ion)!important;transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(var(--ion-rgb),.6);}