/* Gong! Boxing Life website
   Layout concept: a fight-night poster on a Bosphorus night. The game's own title screen opens the page,
   the reading pages sit on cream newsprint like the neighbourhood paper, the ring red and the gong gold
   are the only loud colours. One deliberate look (night), not a light/dark pair. */
:root{
  --night:#121833;      /* the sky over Karanfil */
  --night-2:#1a2246;    /* raised night panels */
  --night-3:#252f5c;    /* hover / borders on night */
  --ink:#0b0f22;        /* deepest ground, footer */
  --paper:#f4ecda;      /* newsprint, ferry cream */
  --paper-2:#e6d9bb;    /* paper rules and shading */
  --ring:#d8402f;       /* ring ropes, the red of the logo */
  --ring-dk:#a82d20;
  --gold:#f2c14a;       /* the gong */
  --sea:#6aa6d8;        /* the strait */
  --text:#ecebf5;       /* text on night */
  --muted:#a9aecb;      /* secondary text on night */
  --ink-text:#231d17;   /* text on paper */
  --ink-muted:#6b5e4c;  /* secondary text on paper */
  --f-pixel:'Pixelify Sans','Courier New',ui-monospace,monospace;   /* the GONG! wordmark only */
  --f-display:'Chakra Petch',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --top-h:62px;         /* header height (60 + 2px rule) */
  --f-body:'Chakra Petch',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --step--1:.875rem;--step-0:1.0625rem;--step-1:1.3rem;--step-2:1.7rem;--step-3:2.3rem;--step-4:3.2rem;--step-5:4.4rem;
  --gut:max(16px,env(safe-area-inset-left,0px));--gut-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:1180px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--night);color:var(--text);font:400 var(--step-0)/1.6 var(--f-body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:#ffd970}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}h3{font-size:var(--step-1)}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);color:var(--ink);padding:8px 12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,15,34,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--ring)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--text);margin-right:auto}
.brand b{font-family:var(--f-pixel);font-size:1.6rem;color:var(--ring);letter-spacing:.02em;text-shadow:2px 2px 0 #4a120c}
.brand span{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:4px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--night-3);color:var(--gold)}
.lang{display:flex;border:1px solid var(--night-3);border-radius:4px;overflow:hidden}
.lang a{padding:6px 9px;font-size:.85rem;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.06em}
.lang a[aria-current="true"]{background:var(--gold);color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--night-3);color:var(--text);font:600 .95rem var(--f-body);padding:8px 12px;border-radius:4px;cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--ink);padding:8px var(--gut-r) 14px var(--gut);border-bottom:2px solid var(--ring);display:none}
  .top.open .nav{display:flex}
  .nav a{padding:12px}
  .top .btn-play{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem var(--f-body);text-decoration:none;padding:12px 18px;border-radius:6px;border:2px solid transparent;cursor:pointer;line-height:1.2}
.btn-play{background:var(--ring);color:#fff;box-shadow:0 4px 0 var(--ring-dk)}
.btn-play:hover{background:#e65240;color:#fff;transform:translateY(1px);box-shadow:0 3px 0 var(--ring-dk)}
.btn-play svg{width:18px;height:18px;flex:none}
.btn-play small{display:block;font-weight:500;font-size:.75rem;opacity:.9}
.btn-soon{background:transparent;color:var(--muted);border-color:var(--night-3);cursor:default}
.btn-soon small{display:block;font-weight:500;font-size:.75rem}
.btn-ghost{color:var(--text);border-color:var(--night-3)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.top .btn-play{padding:8px 14px;font-size:.92rem;box-shadow:0 3px 0 var(--ring-dk)}

/* ---------- hero: the game's own title scene, live ----------
   The scene is a looping video captured from the game at 1920x1080 (a still poster sits under it), scaled
   with square pixels. On wide screens the copy sits in the night sky on the right, where the game puts its
   own logo; on narrow screens it moves below the scene. */
.hero{display:grid;background:var(--ink);position:relative}
.hero>*{grid-area:1/1}
.hero-stage{position:relative;width:100%;overflow:hidden;background:#070b1e;min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h))}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 85%;image-rendering:pixelated}
.hero-video{opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:1}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,11,30,0) 38%,rgba(7,11,30,.5) 70%,rgba(7,11,30,.62) 100%);pointer-events:none}
.hero-stage::after{content:"";position:absolute;inset:auto 0 0;height:18%;z-index:1;background:linear-gradient(rgba(11,15,34,0),var(--ink));pointer-events:none}
.hero-copy{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;padding-block:clamp(18px,4vw,80px);width:100%}
.hero-box{width:min(46%,660px);display:grid;gap:clamp(10px,1.1vw,18px);justify-items:start}
.game-logo{font-family:var(--f-pixel);font-weight:700;font-size:clamp(3rem,8.4vw,10rem);line-height:.8;color:var(--ring);letter-spacing:.02em;text-shadow:.035em .035em 0 var(--ink),.07em .07em 0 #8e2418;margin:0}
.game-logo span{display:block;font-family:var(--f-display);font-weight:700;font-size:.25em;line-height:1;color:var(--gold);letter-spacing:.16em;margin-top:.4em;text-shadow:.06em .06em 0 var(--ink)}
.hero-box h1{font-size:clamp(1.6rem,3vw,3.5rem);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.hero-box h1 em{font-style:normal;color:var(--gold)}
.hero-box .lede{font-size:clamp(1rem,1.25vw,1.35rem);line-height:1.5;color:#e3e6f6;max-width:42ch;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.hero-meta{color:#b9bedb;font-size:clamp(.82rem,.9vw,.98rem);font-weight:600;letter-spacing:.02em}
.hero .store-row{margin-top:4px}
/* narrow or portrait screens: the scene on top grows to fill what the copy leaves free, the copy sits below it */
@media (max-width:900px),(max-aspect-ratio:5/4){
  .hero{display:flex;flex-direction:column;min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h))}
  .hero-stage{flex:1000 0 auto;min-height:56.25vw;max-height:125vw}
  .hero-poster,.hero-video{object-position:3% 85%}
  .hero-copy{flex:1 0 auto;justify-content:flex-start;align-items:center;padding-block:6px 32px}
  .hero-box{width:100%}
  .hero-stage::before{display:none}
  .game-logo{font-size:clamp(3rem,15vw,5.2rem)}
  .hero-box h1{font-size:clamp(1.6rem,6.4vw,2.6rem)}
}
/* ---------- sections ---------- */
.sec{padding-block:72px}
.sec-head{display:grid;gap:10px;margin-bottom:34px;max-width:720px}
.kicker{font-family:var(--f-display);font-weight:700;color:var(--gold);font-size:1rem;letter-spacing:.04em}
.sec-head p{color:var(--muted);font-size:var(--step-1);line-height:1.45}
.paper{background:var(--paper);color:var(--ink-text)}
.paper .kicker{color:var(--ring)}
.paper .sec-head p{color:#4f4436}
.paper a{color:var(--ring-dk)}

/* the fight card: features billed like a poster, main event first */
.card-bill{display:grid;gap:0;border-top:3px solid var(--ink-text)}
.bill{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(160px,300px);gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--paper-2)}
.bill:first-child{padding:30px 0}
.bill-tag{font-family:var(--f-display);font-weight:700;font-size:.9rem;letter-spacing:.08em;color:var(--ring);text-transform:uppercase}
.bill h3{font-size:var(--step-2);color:var(--ink-text);margin-bottom:6px}
.bill:first-child h3{font-size:var(--step-3)}
.bill p{color:#4a3f33;max-width:58ch}
.bill img{border-radius:6px;border:3px solid var(--ink-text);width:100%}
@media (max-width:820px){.bill{grid-template-columns:1fr;gap:10px}.bill img{max-width:420px}}

/* screenshots strip */
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,520px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:var(--night-3) transparent}
.shots button{all:unset;cursor:zoom-in;scroll-snap-align:start;display:grid;gap:8px}
.shots img{border-radius:8px;border:2px solid var(--night-3);aspect-ratio:16/9;object-fit:cover;width:100%}
.shots button:hover img,.shots button:focus-visible img{border-color:var(--gold)}
.shots span{color:var(--muted);font-size:.92rem}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1280px)}
dialog.lb::backdrop{background:rgba(5,7,18,.88)}
dialog.lb img{border-radius:8px;width:100%}
dialog.lb p{color:var(--text);text-align:center;margin-top:10px}
dialog.lb .x{position:absolute;right:8px;top:8px;background:var(--ink);color:var(--text);border:1px solid var(--night-3);border-radius:4px;font:700 1rem var(--f-body);padding:6px 10px;cursor:pointer}

/* the neighbourhood: portraits */
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.face{display:grid;gap:6px;justify-items:center;text-align:center;text-decoration:none;color:var(--text)}
.face img{width:96px;height:96px;border-radius:8px;border:2px solid var(--night-3);background:var(--night-2)}
.face:hover img{border-color:var(--gold)}
.face b{font-size:.92rem;line-height:1.2}
.face small{color:var(--muted);font-size:.78rem;line-height:1.25}

/* two shores */
.shores{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.shore{background:var(--night-2);border-radius:10px;padding:22px;display:grid;gap:10px;align-content:start}
.shore h3{font-size:var(--step-2)}
.shore p{color:var(--muted)}
.shore ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.shore li{background:var(--night-3);border-radius:4px;padding:3px 9px;font-size:.88rem}
.strait{display:grid;place-items:center;color:var(--sea);font-family:var(--f-display);writing-mode:vertical-rl;letter-spacing:.2em;font-size:1rem}
@media (max-width:820px){.shores{grid-template-columns:1fr}.strait{writing-mode:horizontal-tb}}

/* FAQ */
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--night-2);border-radius:8px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--gold);font-family:var(--f-display);margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{padding:0 0 16px;color:var(--muted)}

/* closing CTA */
.final{background:linear-gradient(180deg,var(--night) 0%,var(--ink) 100%);text-align:left}
.final .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.final h2{font-size:var(--step-4);color:var(--ring);text-shadow:3px 3px 0 #4a120c}
.final p{color:var(--muted);font-size:var(--step-1);margin-top:8px}
.store-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:760px){.final .wrap{grid-template-columns:1fr}}

/* ---------- reading pages (guide, blog, wiki) ---------- */
.page-head{padding-block:56px 34px;border-bottom:2px solid var(--ring)}
.page-head .crumbs{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.page-head .crumbs a{color:var(--muted)}
.page-head p.lede{color:var(--muted);font-size:var(--step-1);max-width:60ch;margin-top:12px}
.read{background:var(--paper);color:var(--ink-text)}
.read .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-block:48px 72px}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);align-self:start;display:grid;gap:4px;font-size:.92rem}
.toc b{font-family:var(--f-display);font-weight:700;color:var(--ring);margin-bottom:6px}
.toc a{color:var(--ink-muted);text-decoration:none;padding:4px 0;border-left:3px solid transparent;padding-left:10px}
.toc a:hover,.toc a[aria-current="page"]{color:var(--ink-text);border-left-color:var(--ring)}
.prose{max-width:70ch;display:grid;gap:18px}
.prose h2{font-size:var(--step-2);color:var(--ink-text);margin-top:22px}
.prose h3{font-size:var(--step-1);color:var(--ink-text);margin-top:8px}
.prose p,.prose li{color:#33291f}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:6px}
.prose a{color:var(--ring-dk)}
.prose .note{background:#fff8e6;border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 6px 6px 0}
.prose figure{margin:6px 0}
.prose figure img{border-radius:6px;border:3px solid var(--ink-text)}
.prose figcaption{font-size:.88rem;color:var(--ink-muted);margin-top:6px}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--paper-2);vertical-align:top}
.tbl th{font-family:var(--f-display);font-weight:700;color:var(--ring-dk);border-bottom:2px solid var(--ink-text);white-space:nowrap}
.steps{counter-reset:r;list-style:none;padding:0!important}
.steps li{counter-increment:r;position:relative;padding-left:64px;min-height:44px}
.steps li::before{content:"R" counter(r);position:absolute;left:0;top:0;width:48px;height:36px;display:grid;place-items:center;background:var(--ink-text);color:var(--gold);font-family:var(--f-display);border-radius:4px}
@media (max-width:860px){.read .wrap{grid-template-columns:1fr;gap:24px}.toc{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:12px;padding-bottom:8px}.toc b{display:none}}

/* hubs: guide / wiki / blog index */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.hub a{display:grid;gap:8px;background:#fffaf0;border:2px solid var(--ink-text);border-radius:8px;padding:20px;text-decoration:none;color:var(--ink-text);box-shadow:4px 4px 0 var(--ink-text);transition:transform .15s,box-shadow .15s}
.hub a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ring)}
.hub a b{font-family:var(--f-display);font-weight:700;font-size:var(--step-1)}
.hub a span{color:var(--ink-muted);font-size:.95rem}
.hub a img{border-radius:4px;border:2px solid var(--ink-text);aspect-ratio:16/9;object-fit:cover}

/* blog: the neighbourhood paper */
.masthead{text-align:center;padding-block:34px 18px;border-bottom:4px double var(--ink-text);display:grid;gap:6px}
.masthead b{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,7vw,4.4rem);letter-spacing:.02em}
.masthead span{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.posts{display:grid;gap:0}
.post-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:28px 0;border-bottom:1px solid var(--paper-2);text-decoration:none;color:var(--ink-text)}
.post-row h2{font-size:var(--step-2);color:var(--ink-text)}
.post-row:hover h2{color:var(--ring-dk)}
.post-row p{color:#4a3f33;margin-top:8px}
.post-row time{font-size:.85rem;color:var(--ink-muted);font-weight:700;letter-spacing:.06em}
.post-row img{border-radius:6px;border:2px solid var(--ink-text);aspect-ratio:16/9;object-fit:cover}
@media (max-width:760px){.post-row{grid-template-columns:1fr}}
.byline{color:var(--ink-muted);font-size:.92rem;font-weight:600}

/* wiki */
.wiki-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.wiki-tools input{font:500 1rem var(--f-body);padding:10px 14px;border:2px solid var(--ink-text);border-radius:6px;background:#fffaf0;color:var(--ink-text);min-width:0;flex:1 1 240px;max-width:420px}
.wiki-tools small{color:var(--ink-muted)}
.wgroup{display:grid;gap:14px;margin-bottom:36px}
.wgroup>h2{font-size:var(--step-2);border-bottom:2px solid var(--ink-text);padding-bottom:6px}
.wcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;background:#fffaf0;border:1px solid var(--paper-2);border-radius:8px;padding:14px;scroll-margin-top:90px}
.wcard img{width:96px;height:96px;border-radius:6px;background:var(--night-2)}
.wcard.tall{grid-template-columns:72px minmax(0,1fr);align-items:center}
.wcard.tall img{width:auto;height:auto;max-width:none;justify-self:center;background:none;border-radius:0}
.wcard b{display:block;font-size:1.02rem;line-height:1.25}
.wcard .w-where{font-size:.82rem;color:var(--ring-dk);font-weight:700;margin-top:2px}
.wcard p{font-size:.92rem;color:#4a3f33;margin-top:6px;line-height:1.45}
.wcard .stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.wcard .stats span{font-size:.75rem;background:var(--paper);border:1px solid var(--paper-2);border-radius:3px;padding:1px 6px;font-variant-numeric:tabular-nums}
.spoiler{border:2px dashed var(--ink-muted);border-radius:8px;padding:0 16px;margin-bottom:36px}
.spoiler>summary{cursor:pointer;padding:14px 0;font-weight:700;color:var(--ink-muted)}
.spoiler[open]>summary{color:var(--ring-dk)}
.empty{display:none;color:var(--ink-muted);padding:20px 0}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--muted);padding-block:44px;font-size:.92rem}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.foot b{color:var(--text);font-family:var(--f-display);font-weight:700;font-size:1.1rem;display:block;margin-bottom:8px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--gold)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot .mail{user-select:all;color:var(--text)}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}

/* root language picker */
.pick{min-height:100vh;display:grid;align-content:center;gap:28px;background:var(--ink);padding-block:40px}
.pick .wrap{display:grid;gap:22px;justify-items:start}
.pick img{border-radius:10px;width:100%;max-width:960px}
.pick .store-row a{min-width:220px}