/* MAXI FEUD — the one shell every page shares, on a phone browser, inside the app and on a desktop browser.

   The spec (every page follows it; nothing is laid out page by page):
   - One page is one screen. Nothing below the fold, no page scroll; what does not fit is left out.
   - Two layouts: phone (anything narrower than 900 px, or portrait) and desktop (900 px and wider, landscape).
     Tablets in portrait use the phone layout; the picture never grows past the screen height.
   - Navigation lives in one place: on a desktop the three page links in the middle of the header; on a phone, in the
     browser and in the app alike, the 62 px tab bar at the thumb (Home, Arena, Leaderboard, Profile).
   - Header: phone 56 px (wordmark, language), desktop 72 px (wordmark, page links, language, profile), over the page.
   - Footer bar: desktop only, 44 px, fixed at the bottom: the safety line, Terms, Privacy Policy, Official info. No page
     links in it. On a phone the safety line sits under the page's action; the legal links live in the profile drawer.
   - Grid: content width 1280 px at most, side margins 20 px on a phone, 32-64 px on a desktop, two-column pages split
     the width 7/5 or 6/6 with a 32 px gap, everything starts on the same left line.
   - Spacing steps 4, 8, 12, 16, 24, 32, 48. Three type sizes a screen: a display size (names, numbers, titles), a body
     size and a label size. Buttons: primary 52 px, corner buttons 72 px, secondary 44 px, nothing tappable under 44 px.
   - One arena-black ground, one ink, four camp colours, the action yellow for actions that belong to no camp.
   - Layers, bottom to top: header and footer bar 20, tab bar 25, scrim 30, confirm sheet and profile drawer 31,
     language list 33, offline notice 35, the extra edition 40, the share card 45 (it opens from the extra edition), toast 50.
   - A phone on its side (landscape, 500 px tall or less) takes the desktop arrangement with a slim 52 px header (page
     links in it), no tab bar and no footer bar (the legal links stay in the profile drawer); pages drop their extras
     to stay on one screen, and a document page that still runs long scrolls inside its main area.
   Type follows the production stacks per language (end of this file). */
:root{
  --arena:#090c14; --floor:#0c0e15; --panel:#10131c; --ink:#f3efe7; --mute:#9aa0b3; --faint:#6b7186; --line:rgba(243,239,231,.12);
  --btc:#f7a531; --eth:#41e2ff; --sol:#c99cff; --alt:#ff80b8; --act:#ffe13d;
  --px:max(20px, env(safe-area-inset-left, 0px)); --hd-h:56px; --ft-h:0px; --tab-h:0px; --gap:32px; --maxw:1280px;
  --scr:100svh;   /* one screen */
  --main-h:calc(var(--scr) - var(--hd-h) - var(--ft-h) - var(--tab-h));
  --spring:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root{--tab-h:calc(62px + env(safe-area-inset-bottom, 0px))}   /* phones: the tab bar, browser and app alike */
@media (min-width:900px) and (orientation:landscape), (orientation:landscape) and (max-height:500px){
  :root{--px:clamp(32px,4vw,64px);--hd-h:72px;--ft-h:44px;--tab-h:0px}
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--arena);-webkit-text-size-adjust:100%}
body{margin:0;min-height:var(--scr);background:var(--arena);color:var(--ink);font:500 15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
.t-btc{--c:var(--btc)} .t-eth{--c:var(--eth)} .t-sol{--c:var(--sol)} .t-alt{--c:var(--alt)}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.logo{display:block;width:auto;max-width:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.hd{position:fixed;z-index:20;top:0;left:0;right:0;height:calc(var(--hd-h) + env(safe-area-inset-top, 0px));display:flex;align-items:center;gap:24px;padding:env(safe-area-inset-top, 0px) var(--px) 0;background:linear-gradient(180deg,rgba(9,12,20,.86),rgba(9,12,20,0));pointer-events:none}
.hd :is(a,button){pointer-events:auto}
.hd .home{display:block;border-radius:8px}
.hd .logo{height:30px}
.hd .nav{display:none}
.hd .tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hd .desk-only{display:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:20px;border:1px solid var(--line);background:rgba(9,12,20,.62);cursor:pointer;padding:0}
.icon-btn svg{width:20px;height:20px}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 11px;border-radius:18px;border:1px solid var(--line);background:rgba(9,12,20,.62);font:700 13px/1 var(--f-ui);white-space:nowrap;cursor:pointer}
.chip svg{width:16px;height:16px;flex:none}
@media (min-width:900px) and (orientation:landscape), (orientation:landscape) and (max-height:500px){
  .hd .logo{height:38px}
  .hd .nav{display:flex;gap:28px;margin-inline:auto}
  .hd .nav a{position:relative;font:700 14px/1 var(--f-ui);color:var(--mute);text-decoration:none;padding:8px 0}
  .hd .nav a:hover{color:var(--ink)}
  .hd .nav a[aria-current="page"]{color:var(--ink)}
  .hd .nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:1px;background:var(--act)}
  .hd .tools{margin-inline-start:0}
  .hd .desk-only{display:inline-grid}
}

/* ---------- footer bar (desktop) ---------- */
.ft{display:none}
@media (min-width:900px) and (orientation:landscape), (orientation:landscape) and (max-height:500px){
  .ft{position:fixed;z-index:20;left:0;right:0;bottom:0;height:var(--ft-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--px);border-top:1px solid var(--line);background:rgba(9,12,20,.9);font:500 12px/1.3 var(--f-ui);color:var(--mute)}
  .ft p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ft nav{display:flex;align-items:center;gap:20px;flex:none}
  .ft a{color:var(--mute);text-decoration:none}
  .ft a:hover{color:var(--ink)}
  .ft .c{color:var(--faint)}
}

/* ---------- the screen: every page's main is exactly the room between header and footer/tab bar ---------- */
/* one screen at the normal text size; with larger text or zoom the main area scrolls instead of cutting anything off */
.mn{position:relative;height:var(--scr);padding:calc(var(--hd-h) + env(safe-area-inset-top, 0px)) 0 calc(var(--ft-h) + var(--tab-h));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.box{width:100%;max-width:var(--maxw);height:100%;margin-inline:auto;padding-inline:var(--px)}

/* ---------- type ---------- */
.eyebrow{margin:0;font:700 12px/1.4 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
h1,h2{margin:0;font:800 clamp(24px,6.4vw,30px)/1.12 var(--f-head);letter-spacing:-.01em;text-wrap:balance}
@media (min-width:900px) and (orientation:landscape), (orientation:landscape) and (max-height:500px){h1,h2{font-size:clamp(32px,3.2vw,48px)}}
.lede{margin:0;font:500 14px/1.5 var(--f-ui);color:var(--mute)}
.fine{margin:0;font:500 12px/1.45 var(--f-ui);color:var(--faint)}

/* ---------- buttons ---------- */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;container-type:inline-size}
.camp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 8px;border-radius:16px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 15%,rgba(9,12,20,.78));cursor:pointer;box-shadow:0 0 26px -8px var(--c);transition:transform .15s var(--spring),background .2s;text-decoration:none}
.camp:hover{background:color-mix(in srgb,var(--c) 26%,rgba(9,12,20,.78))}
.camp:active{transform:scale(.97)}
.camp img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--c)}
/* the longest full name (ULTRASOUND · ETH, about 10.4 em) always fits its button: sized by the button row itself */
.camp .nm{font-size:clamp(10px,calc((50cqw - 6px - 20px) / 10.4),16px);color:var(--c)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:440px;min-height:52px;padding:0 24px;border:0;border-radius:14px;background:var(--c,var(--act));color:#0b0c10;font:800 16px/1 var(--f-ui);cursor:pointer;text-decoration:none;box-shadow:0 10px 28px -12px var(--c,var(--act))}
.cta:active{transform:scale(.98)}
.ghost{width:100%;max-width:440px;min-height:44px;border:0;background:none;color:var(--mute);font:700 15px/1 var(--f-ui);cursor:pointer}
.go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:22px;border:1px solid var(--line);background:rgba(243,239,231,.06);color:var(--ink);font:700 14px/1 var(--f-ui);text-decoration:none;cursor:pointer}
.go:hover{background:rgba(243,239,231,.12)}

/* ---------- vote: confirm sheet, then this round's extra edition ---------- */
.scrim{position:fixed;inset:0;z-index:30;background:rgba(3,4,8,.62)}
.sheet{position:fixed;z-index:31;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:10px;width:min(100%,520px);margin-inline:auto;padding:28px var(--px) calc(22px + env(safe-area-inset-bottom, 0px));border-radius:22px 22px 0 0;background:var(--panel);border-top:1px solid var(--line);text-align:center;animation:rise .32s var(--spring)}
@keyframes rise{from{transform:translateY(100%)}}
.sheet>img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--c)}
.sheet h2{font-size:22px;margin-top:6px}
.sheet p{margin:0 0 8px;color:var(--mute);font-size:14px}
.enter{position:fixed;inset:0;z-index:40;overflow-y:auto;display:grid;align-content:center;justify-items:center;gap:14px;padding:calc(24px + env(safe-area-inset-top, 0px)) var(--px) calc(24px + env(safe-area-inset-bottom, 0px));background:radial-gradient(70% 46% at 50% 38%,color-mix(in srgb,var(--c) 42%,transparent),transparent 74%),var(--arena);text-align:center}
.enter .k{margin:0;font:700 12px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,#fff)}
.enter h2{font-size:clamp(30px,8vw,44px)}
.extra{width:min(100%,340px,calc(var(--scr) * .42));padding:13px 14px 11px;background:#f1ede4;color:#121318;transform:rotate(-2deg);box-shadow:0 22px 44px rgba(0,0,0,.55);text-align:left;animation:printin .75s var(--spring) both}
@keyframes printin{from{clip-path:inset(0 0 100% 0);transform:translateY(-32px) rotate(-2deg)}to{clip-path:inset(0 0 0 0);transform:rotate(-2deg)}}
.extra .mast{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-bottom:6px;border-bottom:3px solid #121318}
.extra .mast b{font:700 22px/1 var(--f-name);letter-spacing:.02em;white-space:nowrap}
.extra .mast b em{margin-left:6px;padding:2px 6px;font:700 15px/1 var(--f-name);letter-spacing:.08em;font-style:normal;background:#121318;color:#f1ede4}
.extra .mast span{font:700 10px/1.35 var(--f-label);color:#5b5850;text-align:end}
.extra .ph{margin-top:10px;aspect-ratio:1;overflow:hidden;border:2px solid #121318;background:#0d0e13}
.extra .ph img{width:100%;height:100%;object-fit:cover;display:block}
.extra .hl{margin:9px 0 0;font:800 23px/1.15 var(--f-head);animation:ink .4s ease-out .5s both}
@keyframes ink{from{opacity:0}}
.extra .dek{margin:4px 0 0;font:700 13px/1.4 var(--f-ui);color:#3a3832}
.extra .foot{margin:8px 0 0;padding-top:5px;border-top:1px solid #121318;font:700 9.5px/1.3 var(--f-ui);letter-spacing:.04em;color:#5b5850}
.enter .acts{display:grid;justify-items:center;gap:4px;width:100%;max-width:440px;margin-top:6px}
.toast{position:fixed;z-index:50;left:50%;bottom:calc(24px + var(--tab-h) + var(--ft-h) + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);max-width:calc(100% - 40px);padding:11px 16px;border-radius:12px;background:#1a1e2a;border:1px solid var(--line);font:700 14px/1.4 var(--f-ui);opacity:0;pointer-events:none;transition:opacity .25s}
.toast.on{opacity:1}

/* ---------- app: the same pages inside the app shell, with a tab bar at the thumb ---------- */
.tabbar{position:fixed;z-index:25;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--tab-h);padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom, 0px));background:rgba(10,12,18,.94);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tabbar a,.tabbar button{display:grid;justify-items:center;align-content:center;gap:3px;padding:4px 0;border:0;background:none;color:var(--faint);font:700 11px/1 var(--f-ui);text-decoration:none;cursor:pointer}
.tabbar svg{width:24px;height:24px}
.tabbar a,.tabbar button{min-width:0;overflow-wrap:anywhere}
@media(max-width:380px){.tabbar a,.tabbar button{font-size:10px}}
@media(orientation:landscape) and (max-height:500px) and (max-width:740px){.hd{gap:12px;padding-inline:16px}.hd .logo{height:27px;max-width:124px}.hd .nav{gap:12px}.hd .nav a{font-size:12px}.hd .tools{gap:6px}.hd .icon-btn{width:34px;height:34px}}
.tabbar [aria-current="page"]{color:var(--ink)}

@media (min-width:900px) and (orientation:landscape), (orientation:landscape) and (max-height:500px){.tabbar{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- type, per language (the production stacks): Clash Display for full names and Latin display, Inter for
   words, JetBrains Mono for status and clocks, a native Noto family for Chinese, Japanese, Korean and Arabic ---------- */
@font-face{font-family:"Clash Display";src:local("Clash Display Bold"),local("ClashDisplay-Bold");font-weight:700;font-style:normal;font-display:swap}
:root{--f-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--f-name:"Clash Display",Inter,system-ui,sans-serif;--f-head:var(--f-name);--f-label:"JetBrains Mono",ui-monospace,Menlo,monospace}
:lang(zh-Hans){--f-ui:"Noto Sans SC",Inter,system-ui,sans-serif;--f-head:"Noto Sans SC",Inter,sans-serif}
:lang(ja){--f-ui:"Noto Sans JP",Inter,system-ui,sans-serif;--f-head:"Noto Sans JP",Inter,sans-serif}
:lang(ko){--f-ui:"Noto Sans KR",Inter,system-ui,sans-serif;--f-head:"Noto Sans KR",Inter,sans-serif}
:lang(ar){--f-ui:"Noto Kufi Arabic",Inter,system-ui,sans-serif;--f-head:"Noto Kufi Arabic",Inter,sans-serif}
:lang(ru),:lang(vi),:lang(tr){--f-head:Inter,system-ui,sans-serif}
h1,h2{font-family:var(--f-head)}
.nm{font-family:var(--f-name);font-weight:700;letter-spacing:.02em;white-space:nowrap;unicode-bidi:isolate}
/* the stage keeps its physical sides in every language */
[dir=rtl] .ring,[dir=rtl] .slides,[dir=rtl] .seam,[dir=rtl] .pick{direction:ltr}
[dir=rtl] .tabbar{direction:rtl}

/* ---------- a phone on its side: the desktop arrangement, slimmer ---------- */
@media (orientation:landscape) and (max-height:500px){
  :root{--hd-h:52px;--ft-h:0px;--px:max(20px, env(safe-area-inset-left, 0px))}
  .hd{gap:16px}
  .hd .logo{height:28px}
  .hd .nav{gap:20px}
  .ft{display:none}
  .mn{overflow-y:auto}
  h1,h2{font-size:clamp(22px,3.6vw,30px)}
}