/* ==========================================================================
   THIRA Games
   Dark and gold, carried over from thira.uk. Cormorant Garamond for display,
   Outfit for reading, IBM Plex Mono for anything numeric or labelled.
   ========================================================================== */

:root{
  --dark:#0B0B0F;
  --dark-2:#101019;
  --panel:#14141E;
  --line:#232331;
  --gold:#B8952A;
  --gold-lit:#E3C778;
  --gold-dim:rgba(184,149,42,.28);
  --chalk:#EDEAE3;
  --muted:#807E77;
  --live:#7FB98A;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Outfit",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --gut:clamp(20px,5vw,64px);
  --stack:clamp(64px,10vw,132px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--dark);color:var(--chalk);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
/* a faint warm bloom, so the black is not flat */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 480px at 76% -8%,rgba(184,149,42,.10),transparent 62%),
    radial-gradient(760px 420px at 4% 12%,rgba(184,149,42,.045),transparent 60%);
}
body>*{position:relative;z-index:1;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.05em;}
h1,h2,h3,h4{margin:0;font-weight:400;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:1220px;margin:0 auto;padding:0 var(--gut);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;background:var(--gold);color:#0B0B0F;padding:10px 16px;z-index:99;}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;}

/* ---------------------------------------------------------- type helpers */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.30em;
  text-transform:uppercase;color:var(--gold);
}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.62;color:#C9C6BE;max-width:52ch;}
.muted{color:var(--muted);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ============================================================== masthead */
.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(11,11,15,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px;}
.mark{display:inline-flex;align-items:baseline;gap:.42em;letter-spacing:.02em;}
.mark-t{
  font-family:var(--body);font-weight:500;font-size:15px;
  letter-spacing:.34em;text-transform:uppercase;
}
.mark-g{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:22px;color:var(--gold-lit);line-height:1;
}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);}
.nav a{
  font-size:13.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover,.nav a[aria-current]{color:var(--chalk);border-bottom-color:var(--gold);}
.nav .out span{margin-left:5px;font-size:11px;color:var(--gold);}

/* Narrow phones: the wordmark and two sections earn their place, the
   outbound link does not — it is in the footer on every page. */
@media(max-width:560px){
  .masthead-in{height:62px;gap:12px;}
  .mark-t{font-size:13px;letter-spacing:.26em;}
  .mark-g{font-size:19px;}
  .nav{gap:16px;}
  .nav a{font-size:12px;letter-spacing:.08em;}
  .nav .out{display:none;}
}

/* ================================================================== hero */
.hero{padding:clamp(56px,10vw,116px) 0 0;}
.hero-tight{padding-top:clamp(44px,7vw,82px);}
.hero-tight h1{max-width:14ch;}
.sec-tight{padding-top:clamp(44px,6vw,74px);}
.hero-in{display:grid;gap:clamp(30px,5vw,66px);}
@media(min-width:960px){
  .hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;}
}
.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(46px,7.6vw,88px);line-height:1.02;letter-spacing:-.012em;
  margin:.30em 0 .34em;
}
.hero h1 em{font-style:italic;color:var(--gold-lit);}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}

.btn{
  display:inline-flex;align-items:center;gap:.62em;
  padding:14px 26px;border:1px solid var(--gold);
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lit);background:transparent;
  transition:background .22s,color .22s,transform .22s;
}
.btn:hover{background:var(--gold);color:#0B0B0F;transform:translateY(-1px);}
.btn-solid{background:var(--gold);color:#0B0B0F;border-color:var(--gold);}
.btn-solid:hover{background:var(--gold-lit);border-color:var(--gold-lit);}
.btn-ghost{border-color:var(--line);color:var(--chalk);}
.btn-ghost:hover{border-color:var(--gold);background:transparent;color:var(--gold-lit);}

/* -------------------------------------------------------- hero art panel */
.hero-art{
  position:relative;border:1px solid var(--line);background:var(--dark-2);
  padding:26px;overflow:hidden;
}
.hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(184,149,42,.07),transparent 46%);
}
.hero-art img,.hero-art svg{width:100%;height:auto;}

/* ============================================== signature: market ticker
   The RAGS board, moving. It is the one thing that makes these games what
   they are, so it gets to be the thing you notice first.                  */
.ticker{
  margin-top:clamp(48px,7vw,86px);
  border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);
  background:linear-gradient(90deg,rgba(184,149,42,.05),transparent 34%);
  display:flex;align-items:stretch;
}
/* The label sits beside the track rather than over it. Masking scrolling
   text with a gradient never quite works — something always shows through. */
.ticker-label{
  flex:none;display:flex;align-items:center;
  padding:15px var(--gut) 15px var(--gut);
  border-right:1px solid var(--gold-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
@media(max-width:640px){
  .ticker-label{padding-left:var(--gut);padding-right:16px;}
}
.ticker-view{flex:1;overflow:hidden;min-width:0;}
.ticker-track{
  display:flex;width:max-content;padding:15px 0;
  animation:slide 46s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tick{
  display:inline-flex;align-items:baseline;gap:11px;
  padding:0 26px;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;white-space:nowrap;
}
.tick b{font-weight:400;color:#B4B1A9;}
.tick span{color:var(--chalk);}
.tick i{font-style:normal;font-size:11px;}
.tick .up{color:var(--live);}
.tick .down{color:#C86A5E;}

/* ============================================================== sections */
.sec{padding:var(--stack) 0;}
.sec-head{
  display:grid;gap:16px;margin-bottom:clamp(34px,5vw,56px);
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
@media(min-width:800px){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:end;gap:44px;}
}
.sec-head h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(31px,4.4vw,50px);line-height:1.08;letter-spacing:-.008em;
}
.sec-head h2 em{font-style:italic;color:var(--gold-lit);}
.sec-head p{margin:0;color:var(--muted);font-size:15.5px;}

/* ------------------------------------------------------------- featured */
.feature{display:grid;gap:clamp(28px,4vw,56px);align-items:center;}
@media(min-width:900px){.feature{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);}}
.feature-art{border:1px solid var(--line);background:var(--dark-2);padding:20px;align-self:start;}
.feature h3{
  font-family:var(--display);font-weight:300;font-size:clamp(34px,4.6vw,52px);
  line-height:1.04;margin:.22em 0 .3em;
}
.feature-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px 26px;margin:28px 0 8px;
  padding-top:22px;border-top:1px solid var(--line);
}
.meta-cell{min-width:0;}
.meta-cell dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.meta-cell dd{margin:0;font-size:14.5px;color:#C9C6BE;}

/* ---------------------------------------------------------- games grid */
/* Column count follows the catalogue: one game should not sit in a
   three-column grid looking like something is missing. */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
@media(min-width:700px){
  .grid[data-cols="2"],.grid[data-cols="3"],.grid[data-cols="4"]{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1080px){
  .grid[data-cols="3"]{grid-template-columns:repeat(3,1fr);}
  .grid[data-cols="4"]{grid-template-columns:repeat(4,1fr);}
}

.card{
  display:flex;flex-direction:column;background:var(--dark-2);
  padding:32px 28px 28px;position:relative;min-height:280px;
  transition:background .28s;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.card:hover{background:var(--panel);}
.card-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
}
.pip{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none;}
.is-live .pip{background:var(--live);box-shadow:0 0 0 3px rgba(127,185,138,.16);}
.is-live .card-status{color:var(--live);}
.is-build .pip{background:var(--gold);}
.is-build .card-status{color:var(--gold);}
.card h3{
  font-family:var(--display);font-weight:300;font-size:34px;line-height:1.05;
  margin-bottom:.18em;
}
.card-tag{
  font-family:var(--display);font-style:italic;font-size:17px;
  color:var(--gold-lit);margin-bottom:16px;
}
.card p{font-size:14.8px;color:var(--muted);line-height:1.62;}
.card-acts{margin-top:auto;padding-top:24px;display:flex;gap:8px;}
.card-play,.card-about{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;border:1px solid;transition:background .2s,color .2s,border-color .2s;
}
.card-play{
  border-color:var(--game-accent,var(--gold));color:var(--game-accent,var(--gold));
}
.card-play:hover{background:var(--game-accent,var(--gold));color:#0B0B0F;}
.card-about{border-color:var(--line);color:var(--muted);}
.card-about:hover{border-color:var(--muted);color:var(--chalk);}
.card::before{background:var(--game-accent,var(--gold));}
.card:hover::before{transform:scaleX(1);}

.card-soon{justify-content:center;text-align:center;background:transparent;}
.card-soon h3{font-size:26px;color:var(--muted);}
.card-soon p{max-width:30ch;margin:0 auto;}

/* --------------------------------------------------------------- points */
.points{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);}
@media(min-width:820px){.points{grid-template-columns:repeat(3,1fr);}}
.point{background:var(--dark);padding:clamp(28px,3.6vw,42px) clamp(24px,3vw,36px);}
.point h3{
  font-family:var(--display);font-size:25px;font-weight:300;margin-bottom:.42em;
}
.point p{margin:0;font-size:15px;color:var(--muted);}
.point .eyebrow{display:block;margin-bottom:18px;}

/* ============================================================ game page */
.gamehero{padding:clamp(44px,7vw,84px) 0 0;}
.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:26px;
}
.crumb a{color:var(--gold);}
.gamehero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(52px,9vw,104px);line-height:.98;letter-spacing:-.015em;margin:.10em 0 .16em;
}
.gamehero .tag{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.8vw,30px);color:var(--gold-lit);margin-bottom:30px;
}
.prose{max-width:60ch;}
.prose p{color:#C4C1B9;}

.detail{display:grid;gap:clamp(30px,5vw,64px);}
@media(min-width:940px){.detail{grid-template-columns:minmax(0,1fr) 320px;align-items:start;}}
.side{border:1px solid var(--line);background:var(--dark-2);padding:26px;position:sticky;top:96px;}
.side h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.side dl{margin:0;}
.side dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:16px;
}
.side dd{margin:4px 0 0;font-size:14.5px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  border:1px solid var(--line);padding:4px 9px;color:#B4B1A9;
}

.featlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:8px 0 0;}
@media(min-width:640px){.featlist{grid-template-columns:repeat(2,1fr);}}
.featlist div{background:var(--dark-2);padding:24px 22px;}
.featlist h4{
  font-family:var(--display);font-size:22px;font-weight:300;margin-bottom:.34em;
}
.featlist p{margin:0;font-size:14.5px;color:var(--muted);}

table.controls{width:100%;border-collapse:collapse;margin-top:8px;}
table.controls th,table.controls td{
  text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
table.controls th{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
table.controls td:first-child{color:var(--chalk);}
table.controls td{color:var(--muted);font-family:var(--mono);font-size:13px;}

/* ================================================================ footer */
.foot{border-top:1px solid var(--line);padding:clamp(48px,7vw,80px) 0 34px;background:var(--dark-2);}
.foot-grid{display:grid;gap:clamp(30px,4vw,48px);}
@media(min-width:820px){.foot-grid{grid-template-columns:1.5fr repeat(3,1fr);}}
.foot-brand .mark{margin-bottom:16px;}
.foot-brand p{font-size:14.5px;color:var(--muted);max-width:38ch;}
.foot-col h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.foot-col li{margin-bottom:12px;font-size:14.5px;}
.foot-col a{color:#C4C1B9;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.foot-col a:hover{color:var(--chalk);border-bottom-color:var(--gold);}
.foot-col em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px;}
.foot-base{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:clamp(38px,5vw,58px);padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.10em;color:var(--muted);
}
.foot-rule{flex:1;height:1px;background:var(--line);min-width:20px;}

/* =============================================================== motion */
.rise{opacity:0;transform:translateY(18px);}
.rise.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .rise{opacity:1;transform:none;}
  .ticker-track{animation:none;}
}


/* ============================================================ leaderboards */
.boards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
@media(min-width:640px){.boards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.boards{grid-template-columns:repeat(3,1fr);}}
.board-card{background:var(--dark-2);padding:24px 22px 20px;border-top:2px solid transparent;}
.board-card:hover{border-top-color:var(--game-accent,var(--gold));background:var(--panel);}
.board-card .phead b{
  font-family:var(--display);font-size:26px;font-weight:300;text-transform:none;letter-spacing:0;
}
.board-card .code{
  color:var(--game-accent,var(--gold));border:1px solid var(--line);
  padding:5px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  align-self:center;
}
.board-card .code:hover{border-color:var(--game-accent,var(--gold));background:rgba(184,149,42,.08);}
.board-list{margin-top:16px;counter-reset:none;}
.board-list li{
  display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-top:1px solid var(--line);font-size:14px;color:var(--muted);
}
.board-list li b{font-family:var(--mono);font-weight:400;color:var(--chalk);}
.board-empty{color:var(--muted);font-size:13.5px;justify-content:flex-start!important;font-style:italic;}