:root {
  color-scheme: light;
  --navy: #20283e;
  --blue: #369dbb;
  --yellow: #ffc20e;
  --white: #fff;
  --ink: #333;
  --muted: #78808d;
  --line: #e8ebef;
  --green: #28a65a;
  --red: #df5555;
  --surface: #f3f5f8;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--surface); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--surface); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-frame { min-height: 100vh; max-width: 1180px; margin: 0 auto; background: var(--surface); }
.topbar { position: sticky; z-index: 20; top: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: var(--white); background: var(--navy); box-shadow: 0 2px 12px #1720331a; }
.brand { display: inline-flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 34px; place-items: center; color: var(--navy); background: var(--yellow); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); font-size: 15px; font-weight: 1000; letter-spacing: -1px; }
.brand-logo { display: block; width: 42px; height: 38px; object-fit: contain; }
.brand-copy { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.wallet-chip { display: flex; min-height: 36px; align-items: center; gap: 6px; padding: 4px 7px 4px 11px; border: 1px solid #ffffff3d; border-radius: 22px; color: white; font-size: 13px; font-weight: 750; }
.wallet-symbol { color: var(--yellow); font-weight: 900; }
.wallet-add { display: grid; width: 24px; height: 24px; margin-left: 4px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow); font-size: 18px; line-height: 1; }
.login-link { color: var(--yellow); text-decoration: none; font-size: 11px; font-weight: 850; letter-spacing: .8px; }
.admin-entry { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #ffffff55; border-radius: 8px; color: white; text-decoration: none; font-size: 9px; font-weight: 850; letter-spacing: .5px; white-space: nowrap; }
.admin-entry:hover, .admin-entry:focus-visible { color: var(--navy); background: var(--yellow); }
.install-app { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--navy); background: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .35px; white-space: nowrap; }
.install-app span { font-size: 16px; line-height: 1; }
.install-app:disabled { opacity: .7; }

main { min-height: calc(100vh - 136px); padding: 18px 22px calc(96px + var(--safe-bottom)); }
.view { display: none; animation: appear .18s ease-out; }
.view.active { display: block; }
@keyframes appear { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.app-frame.welcome-mode { min-height: 100vh; max-width: none; background: #10192c; }
.welcome-mode > .topbar, .welcome-mode > #bottom-nav { display: none; }
.welcome-mode > main { min-height: 100vh; padding: 0; }
.welcome-layout { position: relative; display: grid; width: min(1180px, 100%); min-height: 100vh; grid-template-columns: 1fr .85fr; grid-template-rows: auto 1fr auto; align-items: center; gap: 20px 30px; overflow: hidden; margin: 0 auto; padding: 28px clamp(24px, 6vw, 76px); color: white; background: radial-gradient(ellipse at 82% 48%, #244b63 0, #182840 34%, transparent 65%), #10192c; }
.welcome-brand { z-index: 1; display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; color: white; font-size: 13px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase; }
.welcome-mark { display: grid; width: 42px; height: 38px; place-items: center; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); color: var(--navy); background: var(--yellow); font-weight: 1000; }
.welcome-logo { width: 48px; height: 42px; object-fit: contain; }
.welcome-content { z-index: 1; max-width: 610px; padding: 35px 0 65px; }
.welcome-content .eyebrow { color: var(--yellow); }
.welcome-content h1 { margin: 0; font-size: clamp(38px, 6.4vw, 72px); line-height: 1.04; letter-spacing: -2.7px; }
.welcome-content h1 span { color: var(--yellow); }
.welcome-description { max-width: 490px; margin: 22px 0 0; color: #c4cfdd; font-size: 16px; line-height: 1.75; }
.welcome-cta { display: inline-flex; min-height: 52px; align-items: center; gap: 22px; margin-top: 28px; padding: 0 21px; border-radius: 9px; color: #172033; background: var(--yellow); box-shadow: 0 10px 24px #ffc20e24; text-decoration: none; font-size: 11px; font-weight: 950; letter-spacing: 1px; transition: transform .18s ease, box-shadow .18s ease; }
.welcome-cta:hover { box-shadow: 0 13px 30px #ffc20e3b; transform: translateY(-2px); }
.welcome-cta span { font-size: 20px; }
.welcome-scroll-link { display: inline-flex; align-items: center; gap: 7px; margin-left: 15px; color: #d3dae4; font-size: 11px; font-weight: 750; text-decoration: none; }
.welcome-scroll-link span { color: var(--yellow); font-size: 15px; }
.welcome-highlights { display: flex; flex-wrap: wrap; gap: 13px 20px; margin-top: 29px; color: #d3dae4; font-size: 11px; }
.welcome-highlights span { display: inline-flex; align-items: center; gap: 7px; }
.welcome-highlights i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #a4e7d0; background: #a4e7d01c; font-size: 10px; font-style: normal; font-weight: 900; }
.welcome-art { position: relative; display: grid; width: min(34vw, 390px); aspect-ratio: 1; justify-self: center; place-items: center; border: 1px solid #ffffff1a; border-radius: 50%; background: #ffffff06; box-shadow: 0 0 0 24px #ffffff04, 0 0 0 55px #ffffff03; transform: rotate(-10deg); }
.welcome-art::before, .welcome-art::after { position: absolute; inset: 9%; border: 1px solid #ffc20e70; border-radius: 50%; content: ""; }
.welcome-art::after { inset: 19%; border-color: #ffffff33; }
.welcome-art-ring { width: 48%; aspect-ratio: 1; border: 1px solid #369dbb; border-radius: 50%; box-shadow: 0 0 50px #369dbb44, inset 0 0 40px #369dbb20; }
.welcome-art-core { position: absolute; color: var(--yellow); font-size: clamp(45px, 8vw, 92px); font-weight: 1000; letter-spacing: -8px; }
.welcome-art-tag { position: absolute; right: 4%; bottom: 17%; padding: 8px 11px; border: 1px solid #ffffff38; border-radius: 20px; color: #d5deeb; background: #172033; font-size: 8px; font-weight: 850; letter-spacing: 1px; transform: rotate(10deg); }
.welcome-footer { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid #ffffff1b; color: #9aa8bb; font-size: 10px; letter-spacing: .3px; }
.welcome-section { padding: clamp(62px, 8vw, 104px) clamp(24px, 7vw, 92px); color: var(--navy); background: #f7f9fc; }
.welcome-section-heading { max-width: 700px; margin: 0 auto 38px; text-align: center; }
.welcome-section-heading .eyebrow, .welcome-feature-copy .eyebrow, .welcome-final-cta .eyebrow { color: #2287a5; }
.welcome-section-heading h2, .welcome-feature-copy h2, .welcome-final-cta h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.13; letter-spacing: -1.3px; }
.welcome-section-heading > p:last-child { margin: 13px 0 0; color: #758093; font-size: 14px; line-height: 1.7; }
.welcome-steps { display: grid; max-width: 1040px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 auto; }
.welcome-step { position: relative; min-height: 235px; padding: 25px 22px; border: 1px solid #e6ebf1; border-radius: 15px; background: white; box-shadow: 0 10px 28px #20283e08; }
.welcome-step-number { position: absolute; top: 22px; right: 22px; color: #a7b0be; font-size: 10px; font-weight: 850; letter-spacing: 1px; }
.welcome-step-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; color: #1d819d; background: #eaf6f8; font-size: 23px; font-weight: 750; }
.welcome-step h3, .welcome-feature-list h3 { margin: 23px 0 8px; color: var(--navy); font-size: 16px; }
.welcome-step p, .welcome-feature-list p { margin: 0; color: #748093; font-size: 12px; line-height: 1.7; }
.welcome-preview-section { display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: clamp(32px, 8vw, 100px); padding: clamp(66px, 9vw, 112px) clamp(24px, 9vw, 120px); overflow: hidden; color: white; background: radial-gradient(ellipse at 82% 55%, #21445d 0, transparent 48%), #1b2940; }
.welcome-preview-copy { max-width: 430px; }
.welcome-preview-copy .eyebrow { color: var(--yellow); }
.welcome-preview-copy h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -1.3px; }
.welcome-preview-copy > p:not(.eyebrow) { margin: 16px 0 0; color: #bac6d6; font-size: 13px; line-height: 1.8; }
.welcome-status-list { display: grid; gap: 18px; margin-top: 27px; }
.welcome-status-list > div { display: flex; align-items: center; gap: 12px; }
.welcome-status-list > div > span:last-child { display: grid; gap: 4px; }
.welcome-status-list strong { color: #fff; font-size: 10px; letter-spacing: .8px; }
.welcome-status-list small { color: #aebacc; font-size: 11px; }
.welcome-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 5px #ffffff0d; }
.welcome-status-dot.upcoming { background: var(--yellow); }
.welcome-status-dot.live { background: #e85c68; }
.welcome-status-dot.result { background: #43b2c5; }
.welcome-app-preview { width: min(100%, 440px); justify-self: center; padding: 20px; border: 1px solid #ffffff27; border-radius: 21px; color: var(--navy); background: #f7f9fc; box-shadow: 0 25px 65px #080f1d70; transform: rotate(1.5deg); }
.welcome-preview-top { display: flex; align-items: center; justify-content: space-between; }
.welcome-preview-brand { display: inline-flex; align-items: center; gap: 8px; color: #354158; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.welcome-preview-brand i { display: grid; width: 25px; height: 23px; place-items: center; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); color: var(--navy); background: var(--yellow); font-size: 8px; font-style: normal; }
.welcome-preview-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #1d819d; background: #dff0f4; font-size: 10px; font-weight: 900; }
.welcome-preview-greeting { display: grid; gap: 7px; margin: 24px 0 17px; }
.welcome-preview-greeting small { color: #2687a0; font-size: 8px; font-weight: 850; letter-spacing: 1.1px; }
.welcome-preview-greeting strong { color: var(--navy); font-size: 21px; letter-spacing: -.5px; }
.welcome-preview-game { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e6ebf0; border-radius: 12px; background: white; }
.welcome-game-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: white; background: linear-gradient(140deg, #369dbb, #20283e); font-weight: 900; }
.welcome-preview-game > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }
.welcome-preview-game strong { color: var(--navy); font-size: 11px; }
.welcome-preview-game small { color: #8791a0; font-size: 9px; }
.welcome-preview-game b { color: #2287a5; }
.welcome-preview-tabs { display: flex; gap: 16px; margin: 19px 2px 13px; border-bottom: 1px solid #e4e9ef; }
.welcome-preview-tabs span { position: relative; padding: 0 4px 10px; color: #8c96a4; font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.welcome-preview-tabs span.selected { color: var(--navy); }
.welcome-preview-tabs span.selected::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--yellow); content: ""; }
.welcome-preview-match { display: grid; gap: 9px; padding: 15px; border: 1px solid #e7ebf0; border-radius: 12px; background: white; }
.welcome-match-label { display: inline-flex; align-items: center; gap: 6px; color: #7e8998; font-size: 7px; font-weight: 900; letter-spacing: .6px; }
.welcome-match-label i { width: 6px; height: 6px; border-radius: 50%; background: #36aa72; }
.welcome-preview-match strong { color: var(--navy); font-size: 12px; }
.welcome-preview-match small { color: #818b9b; font-size: 9px; }
.welcome-feature-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 7vw, 88px); padding: clamp(64px, 8vw, 100px) clamp(24px, 9vw, 120px); color: white; background: #151f34; }
.welcome-feature-copy { max-width: 470px; }
.welcome-feature-copy .eyebrow { color: var(--yellow); }
.welcome-feature-copy h2 { font-size: clamp(32px, 4.5vw, 50px); }
.welcome-feature-copy h2 span { color: var(--yellow); }
.welcome-feature-copy > p:not(.eyebrow) { margin: 18px 0 0; color: #b7c2d2; font-size: 14px; line-height: 1.8; }
.welcome-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--yellow); font-size: 12px; font-weight: 850; text-decoration: none; }
.welcome-text-link span { font-size: 18px; }
.welcome-feature-list { display: grid; gap: 11px; }
.welcome-feature-list article { display: flex; gap: 17px; padding: 19px; border: 1px solid #ffffff19; border-radius: 13px; background: #ffffff08; }
.welcome-feature-list article > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--yellow); background: #ffc20e17; font-size: 10px; font-weight: 900; }
.welcome-feature-list h3 { margin: 0 0 6px; color: white; font-size: 14px; }
.welcome-feature-list p { color: #abb7c8; font-size: 11px; }
.welcome-faq-section { padding: clamp(62px, 8vw, 100px) 24px; color: var(--navy); background: #f7f9fc; }
.welcome-faq-section .welcome-section-heading { margin-bottom: 29px; }
.welcome-faq-list { display: grid; max-width: 790px; gap: 10px; margin: 0 auto; }
.welcome-faq-list details { overflow: hidden; border: 1px solid #e5eaf0; border-radius: 12px; background: white; box-shadow: 0 5px 16px #20283e06; }
.welcome-faq-list summary { display: flex; min-height: 59px; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 19px; color: var(--navy); cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }
.welcome-faq-list summary::-webkit-details-marker { display: none; }
.welcome-faq-list summary span { position: relative; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: #edf5f7; }
.welcome-faq-list summary span::before, .welcome-faq-list summary span::after { position: absolute; top: 9px; left: 6px; width: 8px; height: 2px; border-radius: 2px; background: #2585a0; content: ""; }
.welcome-faq-list summary span::after { transform: rotate(90deg); transition: transform .18s ease; }
.welcome-faq-list details[open] summary span::after { transform: rotate(0); }
.welcome-faq-list details > p { margin: -2px 19px 18px; color: #718094; font-size: 11px; line-height: 1.8; }
.welcome-final-cta { padding: clamp(62px, 8vw, 96px) 24px; color: white; background: radial-gradient(ellipse at 50% 125%, #286a8a 0, transparent 56%), #10192c; text-align: center; }
.welcome-final-cta .eyebrow { color: var(--yellow); }
.welcome-final-cta h2 { font-size: clamp(30px, 4vw, 46px); }
.welcome-final-cta > p:not(.eyebrow) { margin: 12px 0 0; color: #bbc6d5; font-size: 14px; }
.welcome-final-cta .welcome-cta { margin-top: 24px; }
.welcome-site-footer { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(24px, 7vw, 92px); color: #acb8c8; background: #0c1424; font-size: 10px; }
.welcome-site-footer a { display: inline-flex; align-items: center; gap: 9px; color: white; font-weight: 800; letter-spacing: .6px; text-decoration: none; }
.welcome-footer-mark { display: grid; width: 27px; height: 25px; place-items: center; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); color: var(--navy); background: var(--yellow); font-size: 9px; font-weight: 1000; }
.hero-banner { position: relative; display: flex; min-height: 196px; overflow: hidden; align-items: center; justify-content: space-between; padding: 25px 30px; border-radius: 12px; color: var(--white); background: radial-gradient(ellipse at 86% 34%, #369dbb 0, #286a8a 20%, transparent 42%), linear-gradient(118deg, #20283e 0%, #263753 58%, #1c3048 100%); isolation: isolate; }
.hero-banner::before, .hero-banner::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.hero-banner::before { inset: 0; opacity: .14; background-image: linear-gradient(135deg, transparent 48%, #fff 49%, transparent 50%); background-size: 31px 31px; }
.hero-banner::after { right: 12%; bottom: -96px; width: 270px; height: 170px; border: 1px solid #ffc20e7a; border-radius: 50%; box-shadow: 0 0 0 22px #ffc20e0c, 0 0 0 45px #ffc20e0c; transform: rotate(-24deg); }
.hero-copy { position: relative; z-index: 1; max-width: 70%; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: 1.4px; }
.hero-banner .eyebrow { color: var(--yellow); }
.hero-banner h1 { margin: 0; font-size: clamp(24px, 4vw, 35px); line-height: 1.08; letter-spacing: -.7px; }
.hero-banner h1 span { color: var(--yellow); }
.hero-note { margin: 10px 0 0; color: #d3dae4; font-size: 13px; }
.hero-cta { position: relative; z-index: 1; display: inline-flex; min-height: 38px; width: fit-content; align-items: center; gap: 12px; margin-top: 16px; padding: 0 14px; border: 1px solid #ffffff50; border-radius: 9px; color: white; background: #ffffff12; text-decoration: none; font-size: 9px; font-weight: 850; letter-spacing: .8px; }
.hero-cta span { color: var(--yellow); font-size: 15px; }
.hero-emblem { position: relative; display: grid; width: clamp(105px, 19vw, 174px); aspect-ratio: 1; flex: 0 0 auto; place-items: center; border: 1px solid #ffffff50; border-radius: 50%; background: #ffffff0b; transform: rotate(-12deg); }
.hero-emblem::before, .hero-emblem::after { position: absolute; inset: 9px; border: 1px solid #ffc20e9c; border-radius: 50%; content: ""; }
.hero-emblem::after { inset: 20px; border-color: #ffffff40; }
.hero-emblem span { color: var(--yellow); font-size: clamp(25px, 5vw, 42px); font-weight: 1000; letter-spacing: -3px; }
.hero-emblem i { position: absolute; right: 7%; bottom: 11%; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px #369dbb31; }
.hero-slider { position: relative; min-height: 220px; overflow: hidden; border: 1px solid #ffffff14; border-radius: 20px; background: var(--navy); box-shadow: 0 16px 34px #20283e1c; isolation: isolate; }
.hero-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.hero-slide.active { z-index: 1; opacity: 1; pointer-events: auto; }
.hero-slide:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.hero-slide img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.hero-slider-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0 0 3px; border: 1px solid #ffffff75; border-radius: 50%; color: white; background: #17203391; font-size: 26px; line-height: 1; transform: translateY(-50%); }
.hero-slider-arrow.previous { left: 12px; }
.hero-slider-arrow.next { right: 12px; }
.hero-slider-dots { position: absolute; z-index: 2; right: 0; bottom: 12px; left: 0; display: flex; justify-content: center; gap: 7px; }
.hero-slider-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid white; border-radius: 9px; background: #20283e80; transition: width .2s ease, background .2s ease; }
.hero-slider-dots button[aria-current="true"] { width: 23px; border-color: var(--yellow); background: var(--yellow); }

.match-tabs { display: flex; margin: 18px 0 24px; border-bottom: 1px solid #dfe3e9; gap: 7px; }
.match-tab { position: relative; min-width: 82px; min-height: 43px; padding: 0 15px; border: 0; color: #7d8490; background: transparent; font-size: 12px; font-weight: 850; letter-spacing: .7px; }
.match-tab.selected { color: var(--navy); }
.match-tab.selected::after { position: absolute; right: 11px; bottom: -1px; left: 11px; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow); content: ""; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 13px; }
.section-heading h2, .page-heading h1 { margin: 0; color: var(--navy); font-size: 20px; line-height: 1.2; }
.section-heading .eyebrow { margin-bottom: 5px; }
.match-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.game-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.game-category-card { position: relative; display: flex; min-width: 0; min-height: 128px; overflow: hidden; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px; border: 0; border-radius: 14px; color: white; text-align: left; box-shadow: 0 7px 20px #20283e19; isolation: isolate; }
.game-category-card::before { position: absolute; z-index: -1; top: -34px; right: -24px; width: 120px; height: 120px; border: 1px solid #ffffff44; border-radius: 50%; box-shadow: 0 0 0 14px #ffffff0d, 0 0 0 29px #ffffff08; content: ""; }
.game-category-banner-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-category-card.has-banner::before { z-index: 1; inset: 0; top: 0; right: 0; width: auto; height: auto; border: 0; border-radius: inherit; background: linear-gradient(90deg, #111827c9, #11182738 82%); box-shadow: none; }
.game-category-card.has-banner > :not(.game-category-banner-image) { z-index: 2; }
.game-category-card.game-art-battle { background: linear-gradient(130deg, #16243c, #24516b 62%, #b47846); }
.game-category-card.game-art-shooter { background: linear-gradient(130deg, #211d37, #4b3b64 62%, #bb604e); }
.game-category-card.game-art-sports { background: linear-gradient(130deg, #143346, #247d77 62%, #a8aa5d); }
.game-category-card.game-art-default { background: linear-gradient(130deg, #18233b, #315c78 62%, #369dbb); }
.game-category-mark { position: absolute; top: 12px; right: 15px; color: #ffffffbd; font-size: 35px; font-weight: 950; line-height: 1; text-shadow: 0 2px 8px #11182755; }
.game-category-copy { display: grid; min-width: 0; gap: 5px; }
.game-category-copy strong { overflow: hidden; font-size: 14px; line-height: 1.15; text-overflow: ellipsis; }
.game-category-copy small { color: #ffffffd6; font-size: 9px; font-weight: 650; }
.game-category-arrow { position: absolute; right: 11px; bottom: 10px; color: var(--yellow); font-size: 17px; font-weight: 850; }
.back-to-games { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; margin: 0 0 12px; padding: 0 12px; border: 1px solid #e3e8ee; border-radius: 9px; color: var(--navy); background: white; font-size: 10px; font-weight: 850; letter-spacing: .5px; }
.back-to-games span { color: var(--blue); font-size: 16px; }
.selected-game-heading { margin: 0 2px 8px; }
.selected-game-heading .eyebrow { margin-bottom: 4px; }
.selected-game-heading h2 { margin: 0; color: var(--navy); font-size: 22px; }
.match-list, .contest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.match-card, .contest-card { overflow: hidden; border: 1px solid #e8ebef; border-radius: 12px; background: var(--white); box-shadow: 0 3px 12px #20283e0a; }
.game-art { position: relative; display: flex; min-height: 114px; overflow: hidden; align-items: end; justify-content: space-between; padding: 15px 16px; color: white; background: linear-gradient(125deg, #172039, #315c78 58%, #369dbb); }
.game-art-banner-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-art.has-banner::before { z-index: 1; inset: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(90deg, #111827c9, #11182738 78%); box-shadow: none; transform: none; }
.game-art.has-banner::after { display: none; }
.game-art::before { position: absolute; top: -50%; right: 10%; width: 180px; height: 180px; border: 1px solid #ffffff30; border-radius: 48% 52% 54% 46%; box-shadow: 0 0 0 18px #ffffff0b, 0 0 0 37px #ffffff0a; content: ""; transform: rotate(30deg); }
.game-art::after { position: absolute; top: 19px; right: 24%; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 16px 21px 0 #ffffff8c, -20px 34px 0 #369dbb; content: ""; }
.game-title { position: relative; z-index: 1; max-width: 72%; font-size: 16px; font-weight: 850; letter-spacing: .2px; text-shadow: 0 1px 5px #0005; }
.game-kicker { display: block; margin-bottom: 5px; color: #d6e8f0; font-size: 9px; font-weight: 750; letter-spacing: 1.4px; }
.game-glyph { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #ffffff60; border-radius: 50%; color: var(--yellow); font-size: 21px; font-weight: 800; }
.game-art.live { background: linear-gradient(125deg, #20283e, #405282 62%, #b64054); }
.game-art.result { background: linear-gradient(125deg, #20283e, #465b7c 58%, #927141); }
.match-card-body { padding: 13px 15px 14px; }
.match-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.match-card h3 { margin: 0; color: #272e3d; font-size: 15px; line-height: 1.28; }
.status-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 20px; color: #168548; background: #e8f7ed; font-size: 9px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }
.status-badge.live { color: #c23647; background: #fff0f1; }
.status-badge.completed { color: #526179; background: #edf0f5; }
.match-date { display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; color: #6d7480; font-size: 11px; }
.match-date::before { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); content: ""; }
.prize-row { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prize-cell { min-width: 0; padding: 0 8px; border-right: 1px solid var(--line); }
.prize-cell:first-child { padding-left: 0; }
.prize-cell:last-child { padding-right: 0; border-right: 0; }
.prize-cell span, .meta-item span { display: block; margin-bottom: 4px; color: #8a909a; font-size: 9px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.prize-cell strong { display: block; overflow: hidden; color: var(--navy); font-size: 14px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.prize-cell:first-child strong { color: #239554; }
.match-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 11px; }
.meta-chip { min-width: 0; padding: 7px 8px; border: 1px solid #edf0f3; border-radius: 7px; background: #f7f8fa; }
.meta-chip b { display: block; margin-bottom: 4px; color: #858d99; font-size: 8px; font-weight: 800; letter-spacing: .45px; }
.meta-chip strong { display: block; overflow: hidden; color: #404958; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.slot-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 5px; color: #727a86; font-size: 10px; }
.slot-row strong { color: var(--navy); }
.progress-track { display: block; width: 100%; height: 5px; overflow: hidden; appearance: none; border: 0; border-radius: 4px; background: #edf0f3; }
.progress-track::-webkit-progress-bar { border-radius: 4px; background: #edf0f3; }
.progress-track::-webkit-progress-value { border-radius: 4px; background: var(--blue); }
.progress-track::-moz-progress-bar { border-radius: 4px; background: var(--blue); }
.card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.primary-button, .join-button, .secondary-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 15px; border: 0; border-radius: 8px; text-decoration: none; font-size: 11px; font-weight: 850; letter-spacing: .45px; transition: filter .15s, transform .15s; }
.primary-button, .join-button { color: white; background: var(--green); }
.primary-button:active, .join-button:active, .secondary-button:active { transform: scale(.98); }
.primary-button:hover, .join-button:hover { filter: brightness(.95); }
.secondary-button { border: 1px solid #dfe4ea; color: var(--navy); background: var(--white); }
.join-button { flex: 1; }
.join-button[disabled] { cursor: not-allowed; opacity: .6; }
.join-button.joined { color: #20864b; background: #e8f7ed; }
.text-button { padding: 8px 4px; border: 0; color: var(--blue); background: transparent; font-size: 10px; font-weight: 800; }

.page-heading { margin: 7px 2px 17px; }
.page-heading h1 { font-size: 25px; }
.filter-pills { display: flex; overflow-x: auto; gap: 7px; margin: 0 0 16px; padding-bottom: 2px; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill { min-height: 35px; flex: 0 0 auto; padding: 0 13px; border: 1px solid #e1e5eb; border-radius: 20px; color: #6e7784; background: white; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.filter-pill.selected { border-color: var(--navy); color: white; background: var(--navy); }
.contest-card { padding: 14px; }
.contest-card .game-art { min-height: 85px; margin: -14px -14px 12px; }
.empty-state, .loading-state, .error-state { display: grid; min-height: 146px; grid-column: 1 / -1; place-content: center; padding: 24px; border: 1px dashed #d7dce4; border-radius: 12px; color: #79818e; background: #fff; text-align: center; font-size: 13px; line-height: 1.6; }
.empty-state strong { margin-bottom: 5px; color: var(--navy); font-size: 15px; }
.error-state { border-color: #f2caca; color: #a63c3c; }
.back-button { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0 3px; border: 0; color: #5a6677; background: transparent; font-size: 12px; font-weight: 700; }
.back-button:first-letter { font-size: 22px; }
.detail-art { min-height: 150px; border-radius: 12px 12px 0 0; }
.detail-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.detail-card .match-card-body { padding: 18px; }
.detail-card h1 { margin: 0; color: var(--navy); font-size: 23px; }
.detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-summary .prize-cell { padding-left: 10px; }
.detail-summary .prize-cell:first-child { padding-left: 0; }
.detail-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.detail-section h2 { margin: 0 0 9px; color: var(--navy); font-size: 14px; }
.detail-section p, .detail-section li { color: #68717e; font-size: 12px; line-height: 1.65; }
.detail-section p { margin: 0; white-space: pre-line; }
.detail-section ul { margin: 0; padding-left: 19px; }
.detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.detail-fact { padding: 11px; border-radius: 8px; background: #f6f8fa; }
.detail-fact span { display: block; margin-bottom: 5px; color: #818a97; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.detail-fact strong { color: #394253; font-size: 12px; }
.detail-join { position: sticky; bottom: calc(78px + var(--safe-bottom)); margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #ffffffef; backdrop-filter: blur(10px); }
.detail-join .join-button { width: 100%; }
.result-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 18px; padding: 13px; border-radius: 10px; background: white; }
.result-table-wrap { overflow-x: auto; border-radius: 10px; background: white; }
.result-table { width: 100%; border-collapse: collapse; text-align: left; }
.result-table th, .result-table td { padding: 12px 11px; border-bottom: 1px solid var(--line); font-size: 11px; white-space: nowrap; }
.result-table th { color: #858c98; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.result-table td { color: #454d5a; }
.result-table tr:last-child td { border-bottom: 0; }
.result-table .winner-row { background: #fffaf0; }
.rank-medal { color: #bd8c14; font-weight: 900; }

.account-cover { position: relative; overflow: hidden; padding: 20px; border-radius: 12px; color: white; background: linear-gradient(125deg, var(--navy), #31536c); }
.account-cover::after { position: absolute; top: -45px; right: -25px; width: 170px; height: 170px; border: 1px solid #ffffff30; border-radius: 50%; box-shadow: 0 0 0 18px #ffffff0c, 0 0 0 38px #ffffff0a; content: ""; }
.player-summary { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.avatar { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; border: 2px solid #ffc20e; border-radius: 50%; color: var(--navy); background: #fff; font-size: 20px; font-weight: 900; }
.player-name { margin: 0 0 4px; font-size: 19px; font-weight: 850; }
.player-label { margin: 0; color: #cbd4df; font-size: 10px; letter-spacing: 1px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 19px; border-top: 1px solid #ffffff2b; }
.stat-item { padding: 13px 6px 0 0; }
.stat-item span { display: block; margin-bottom: 5px; color: #c1ccda; font-size: 9px; line-height: 1.25; }
.stat-item strong { color: var(--yellow); font-size: 18px; }
.account-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.balance-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.balance-card span { display: block; margin-bottom: 6px; color: #77808c; font-size: 9px; font-weight: 800; letter-spacing: .6px; }
.balance-card strong { color: var(--navy); font-size: 18px; }
.account-menu { display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.account-menu button { display: flex; min-height: 65px; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px; border: 0; color: #3b4350; background: white; text-align: left; font-size: 11px; font-weight: 750; }
.menu-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #267c97; background: #eaf5f8; font-size: 15px; font-weight: 850; }
.account-menu button::after { margin-left: auto; color: #a0a6b0; content: "›"; font-size: 20px; }
.account-subview { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.account-subview h2 { margin: 0 0 13px; color: var(--navy); font-size: 16px; }
.profile-line { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.profile-line:last-child { border-bottom: 0; }
.profile-line span { color: #848b96; }
.profile-line strong { overflow-wrap: anywhere; color: #394253; text-align: right; }
.support-chat { padding: 0; overflow: hidden; }
.support-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.support-heading .eyebrow { margin: 0 0 4px; }
.support-heading h2, .support-heading h3 { margin: 0; color: var(--navy); font-size: 16px; }
.support-heading h3 { font-size: 14px; }
.support-heading span { color: #778395; font-size: 10px; }
.support-online { flex: 0 0 auto; padding: 6px 9px; border-radius: 20px; color: #20734d !important; background: #e7f6ed; font-size: 8px !important; font-weight: 850; letter-spacing: .4px; }
.support-privacy { margin: 0; padding: 10px 16px; color: #59677a; background: #f2f7fa; font-size: 10px; line-height: 1.45; }
.support-message-list { display: flex; min-height: 220px; max-height: 430px; flex-direction: column; gap: 10px; overflow-y: auto; padding: 14px; background-color: #f4f7f8; background-image: radial-gradient(#d5dfe2 0.6px, transparent 0.6px); background-size: 12px 12px; overscroll-behavior: contain; }
.support-message { width: fit-content; max-width: min(82%, 520px); padding: 8px 10px 6px; border: 1px solid #e5e9ec; border-radius: 12px 12px 12px 3px; background: white; box-shadow: 0 2px 6px #14253a0a; }
.support-message.mine { align-self: flex-end; border-color: #d3ecdf; border-radius: 12px 12px 3px; background: #e7f7ee; }
.support-message > span { display: block; margin-bottom: 4px; color: #38745b; font-size: 9px; font-weight: 800; }
.support-message p { margin: 0; color: #263345; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.support-message time { display: block; margin-top: 5px; color: #85909b; font-size: 8px; text-align: right; }
.support-empty { display: grid; min-height: 180px; place-items: center; margin: 0; padding: 20px; color: #778395; font-size: 11px; line-height: 1.5; text-align: center; }
.support-compose { display: flex; align-items: flex-end; gap: 9px; padding: 12px; border-top: 1px solid var(--line); background: white; }
.support-compose textarea { min-width: 0; min-height: 42px; max-height: 120px; flex: 1; resize: vertical; padding: 11px 12px; border: 1px solid #dfe5e9; border-radius: 12px; color: var(--navy); font: inherit; font-size: 12px; }
.support-compose button { flex: 0 0 auto; min-height: 42px; padding: 0 15px; }
.support-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.support-file-button { display: grid; max-width: 150px; min-height: 42px; flex: 0 1 auto; place-items: center; overflow: hidden; padding: 0 10px; border: 1px solid #dfe5e9; border-radius: 10px; color: #536175; background: #f8fafc; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.support-file-input:focus + .support-file-button { outline: 2px solid var(--blue); outline-offset: 2px; }
.support-file-hint { margin: -5px 12px 10px; color: #778395; font-size: 9px; }
.support-attachment { display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid #d9e3eb; border-radius: 8px; color: #17637c; background: #f5fafc; font-size: 10px; font-weight: 750; overflow-wrap: anywhere; }
.support-solved-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 20px; color: #8a5412 !important; background: #fff3d8; font-size: 9px !important; font-weight: 850; letter-spacing: .3px; }
.support-solved-notice, .support-start-wrap { display: grid; gap: 8px; padding: 14px; border-top: 1px solid var(--line); background: #fffaf0; }
.support-solved-notice strong { color: #79500f; font-size: 12px; }
.support-solved-notice span { color: #6d675b; font-size: 10px; line-height: 1.5; }
.support-solved-notice button, .support-start-wrap button { justify-self: start; min-height: 38px; padding: 0 14px; }
.support-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-panel-heading h2 { margin: 0 0 13px; }
.support-refresh-controls { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.support-refresh-controls span { color: #778395; font-size: 9px; }
.support-refresh-controls .support-refresh-error { color: #a62f37; font-weight: 750; }
.support-refresh-controls button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.support-inbox { display: grid; min-height: 420px; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.5fr); overflow: hidden; border: 1px solid #e5e9ef; border-radius: 13px; background: white; }
.support-thread-list { max-height: 610px; overflow-y: auto; border-right: 1px solid #e5e9ef; background: #fbfcfd; }
.support-conversation { display: flex; width: 100%; min-width: 0; align-items: center; gap: 9px; padding: 11px; border: 0; border-bottom: 1px solid #edf0f3; background: transparent; text-align: left; cursor: pointer; }
.support-conversation.selected { background: #eaf5f8; }
.support-conversation-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #1b6175; background: #dceff3; font-size: 13px; font-weight: 850; }
.support-conversation-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.support-conversation-copy strong { color: var(--navy); font-size: 10px; }
.support-conversation-copy small { overflow: hidden; color: #75808e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation time { flex: 0 0 auto; color: #87919d; font-size: 8px; }
.support-agent-chat { display: flex; min-width: 0; min-height: 420px; flex-direction: column; }
.support-agent-chat .support-heading { justify-content: flex-start; }
.support-agent-chat .support-message-list { max-height: none; flex: 1; }
.support-agent-chat .support-compose { padding: 10px; }
.support-agent-chat .support-empty { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.referral-intro { margin: 0 0 14px; color: #687281; font-size: 12px; line-height: 1.55; }
.referral-code-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 14px; border: 1px dashed #b6dce7; border-radius: 10px; background: #f2fafc; }
.referral-code-box span, .referral-counts span { color: #77808c; font-size: 10px; font-weight: 750; }
.referral-code-box strong { color: var(--navy); font-size: 20px; letter-spacing: 1.5px; }
.referral-link { font-size: 11px !important; }
.referral-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.referral-counts div { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.referral-counts strong { color: var(--navy); font-size: 19px; }
.ledger-group { margin: 14px 0 4px; }
.ledger-group h3 { color: var(--navy); font-size: 13px; }
.ledger-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.ledger-row span { color: #727b88; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.wallet-actions button { min-height: 42px; }
.wallet-request-form { margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.wallet-request-form h3 { margin: 0 0 12px; color: var(--navy); font-size: 14px; }
.wallet-request-form .auth-hint { margin: 0 0 10px; }
.wallet-request-form input[type="file"] { padding: 8px; background: white; }
.wallet-request-form .form-field small { color: var(--muted); font-size: 10px; font-weight: 500; }
.request-status { flex: 0 0 auto; align-self: center; padding: 4px 7px; border-radius: 20px; background: #fff4d5; color: #8d6500 !important; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.request-status.approved { color: #168548 !important; background: #e8f7ed; }
.request-status.rejected { color: #a63c3c !important; background: #fff0f1; }
.wallet-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wallet-review > div:first-child { display: grid; gap: 4px; min-width: 0; }
.wallet-review > div:first-child span { overflow-wrap: anywhere; color: #727b88; font-size: 10px; }
.wallet-review > strong { color: var(--navy); font-size: 12px; }
.wallet-review-actions { display: flex; grid-column: 1 / -1; gap: 8px; }
.wallet-review-actions button { min-height: 36px; flex: 1; padding: 0 8px; font-size: 9px; }
.proof-link { width: fit-content; color: #168548; font-size: 10px; font-weight: 850; text-decoration: underline; }
.proof-missing { color: #a63c3c !important; font-size: 10px !important; font-weight: 750; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.auth-card { max-width: 460px; margin: 22px auto; padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 5px 22px #20283e0a; }
.auth-card h1 { margin: 0 0 7px; color: var(--navy); font-size: 23px; }
.auth-card > p { margin: 0 0 18px; color: #76808c; font-size: 12px; line-height: 1.5; }
.auth-tabs { display: flex; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tabs button { min-height: 40px; flex: 1; border: 0; border-bottom: 2px solid transparent; color: #78818d; background: white; font-size: 11px; font-weight: 800; }
.auth-tabs button.selected { border-color: var(--yellow); color: var(--navy); }
.form-field { display: block; margin-bottom: 13px; color: #69727f; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.form-field input { width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px; border: 1px solid #dfe4e9; border-radius: 8px; outline: 0; color: var(--ink); background: white; font-size: 13px; letter-spacing: normal; }
.form-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #369dbb20; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-hint { margin: 12px 0 0; color: #89919d; font-size: 10px; line-height: 1.5; }
.signout-button { margin-top: 15px; }

.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; height: calc(67px + var(--safe-bottom)); grid-template-columns: repeat(3, 1fr); padding: 6px max(16px, calc((100vw - 460px) / 2)) var(--safe-bottom); border-top: 1px solid #e6e9ee; background: #fff; box-shadow: 0 -3px 12px #1720330a; }
.nav-item { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #8a919c; text-decoration: none; font-size: 9px; font-weight: 700; }
.nav-item.active { color: var(--blue); }
.nav-icon { position: relative; width: 22px; height: 21px; }
.icon-home::before { position: absolute; top: 2px; left: 4px; width: 13px; height: 13px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; content: ""; transform: rotate(45deg); }
.icon-home::after { position: absolute; right: 3px; bottom: 1px; left: 3px; height: 12px; border: 2px solid currentColor; border-top: 0; border-radius: 1px; content: ""; }
.icon-trophy::before { position: absolute; top: 1px; left: 5px; width: 12px; height: 11px; border: 2px solid currentColor; border-radius: 0 0 6px 6px; content: ""; }
.icon-trophy::after { position: absolute; top: 3px; left: 1px; width: 5px; height: 7px; border: 2px solid currentColor; border-right: 0; border-radius: 5px 0 0 5px; box-shadow: 14px 0 0 -1px var(--white), 16px 0 0 -1px currentColor; content: ""; }
.icon-user::before { position: absolute; top: 1px; left: 7px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; content: ""; }
.icon-user::after { position: absolute; bottom: 1px; left: 3px; width: 16px; height: 8px; border: 2px solid currentColor; border-radius: 10px 10px 4px 4px; content: ""; }

.room-dialog { position: fixed; width: min(390px, calc(100% - 28px)); max-height: min(90vh, 700px); overflow: auto; padding: 24px; border: 0; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 18px 60px #10192d55; }
.room-dialog::backdrop { background: #121b2bc2; backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 13px; right: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #78818d; background: #f0f2f5; font-size: 23px; }
.dialog-icon { display: grid; width: 46px; height: 46px; margin-bottom: 15px; place-items: center; border-radius: 13px; color: var(--navy); background: #fff4cb; font-size: 24px; }
.room-dialog h2 { margin: 0; color: var(--navy); font-size: 22px; }
.room-warning { margin: 9px 0 16px; color: #727b87; font-size: 12px; line-height: 1.55; }
.room-credential { margin: 9px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f9fafb; }
.room-credential > span { display: block; margin-bottom: 7px; color: #828b97; font-size: 9px; font-weight: 850; letter-spacing: .8px; }
.room-credential > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.room-credential code { overflow: hidden; color: var(--navy); font-size: 14px; font-weight: 800; text-overflow: ellipsis; }
.room-credential button { padding: 6px; border: 0; color: var(--blue); background: transparent; font-size: 9px; font-weight: 850; }
.room-instructions { padding-left: 19px; color: #68717e; font-size: 11px; line-height: 1.7; }
.wide { width: 100%; margin-top: 5px; }
.toast-region { position: fixed; z-index: 50; right: 14px; bottom: calc(82px + var(--safe-bottom)); left: 14px; display: grid; justify-items: center; pointer-events: none; }
.toast { max-width: 440px; padding: 12px 16px; border-radius: 9px; color: white; background: #263248; box-shadow: 0 5px 20px #11182733; font-size: 12px; line-height: 1.4; animation: appear .16s ease-out; }
.toast.error { background: #a53d43; }

@media (max-width: 600px) {
  .topbar { height: 58px; padding: 0 12px; }
  .brand { gap: 6px; }
  .brand-mark { width: 36px; }
  .brand-copy { font-size: 9px; letter-spacing: .8px; }
  main { min-height: calc(100vh - 125px); padding: 12px 13px calc(86px + var(--safe-bottom)); }
  .hero-banner { min-height: 165px; padding: 20px 17px; border-radius: 10px; }
  .hero-copy { max-width: 73%; }
  .hero-banner h1 { font-size: clamp(22px, 6vw, 29px); }
  .hero-note { font-size: 11px; }
  .hero-emblem { width: 92px; }
  .match-tabs { margin: 13px 0 19px; }
  .match-tab { min-width: 75px; min-height: 40px; }
  .game-category-list { gap: 10px; }
  .game-category-card { min-height: 118px; padding: 11px; border-radius: 12px; }
  .game-category-copy strong { font-size: 13px; }
  .game-category-copy small { max-width: 120px; font-size: 8px; }
  .game-category-mark { top: 10px; right: 12px; font-size: 32px; }
  .selected-game-heading h2 { font-size: 20px; }
  .section-heading h2 { font-size: 18px; }
  .match-list, .contest-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .game-art { min-height: 105px; }
  .match-card-body { padding: 12px 13px 13px; }
  .bottom-nav { height: calc(65px + var(--safe-bottom)); }
  .detail-join { bottom: calc(74px + var(--safe-bottom)); }
}

@media (max-width: 380px) {
  .hero-banner { min-height: 151px; padding: 16px 13px; }
  .hero-slider, .hero-slide img { min-height: 151px; }
  .hero-emblem { width: 76px; }
  .hero-emblem span { font-size: 24px; }
  .hero-banner h1 { font-size: 22px; }
  .hero-cta { font-size: 8px; }
  .game-art { min-height: 96px; }
  .meta-chip { padding: 7px 6px; }
  .prize-cell strong { font-size: 13px; }
  .account-menu button { padding: 10px 8px; font-size: 10px; }
}

@media (min-width: 900px) {
  .topbar { margin: 0 -1px; padding: 0 28px; }
  main { padding: 24px 28px 48px; }
  .bottom-nav { position: sticky; top: 64px; z-index: 19; height: 52px; grid-template-columns: repeat(3, 1fr); padding: 0 30%; border-top: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .nav-item { flex-direction: row; font-size: 11px; }
  .nav-icon { transform: scale(.85); }
  .detail-join { bottom: 8px; }
  .toast-region { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.category-mode #hero-slider,
.category-mode #hero-fallback { display: none !important; }
.selected-game-heading { margin: 14px auto 10px; text-align: center; }
.selected-game-heading .eyebrow { margin-bottom: 5px; }
.selected-game-heading h2 { color: var(--navy); font-size: clamp(24px, 5vw, 32px); line-height: 1.15; }
.match-tabs { justify-content: center; }

.admin-shell { gap: 16px; }
.admin-sidebar { overflow: hidden; padding: 18px 12px; border-color: #20283e; background: linear-gradient(160deg, #20283e, #182137 76%, #254256); box-shadow: 0 14px 30px #17203324; }
.admin-brand-lockup { display: flex; align-items: center; gap: 10px; margin: 2px 7px 21px; }
.admin-brand-mark { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid #ffffff20; border-radius: 11px; color: var(--navy); background: var(--yellow); font-size: 16px; font-weight: 950; }
.admin-brand-lockup .eyebrow { margin: 0 0 4px; color: #62c2d8; font-size: 8px; }
.admin-brand-lockup h1 { margin: 0; color: white; font-size: 17px; letter-spacing: -.35px; }
.admin-sidebar nav { display: grid; gap: 4px; }
.admin-sidebar button { min-height: 45px; color: #c1cbd9; font-size: 12px; transition: background .16s ease, color .16s ease; }
.admin-sidebar button:hover { color: white; background: #ffffff10; }
.admin-sidebar button.selected { color: var(--navy); background: var(--yellow); box-shadow: 0 5px 13px #ffc20e26; }
.admin-nav-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #8ed3e0; background: #ffffff12; font-size: 14px; font-weight: 850; }
.admin-sidebar button.selected .admin-nav-icon { color: var(--navy); background: #ffffff88; }
.admin-nav-arrow { margin-left: auto; font-size: 20px; opacity: .68; }
.admin-sidebar button:focus-visible, .admin-quick-action:focus-visible { outline: 3px solid #62c2d8; outline-offset: 2px; }
.admin-identity { display: flex; align-items: center; gap: 10px; margin: 22px 4px 1px; padding: 13px 8px 0; border-top: 1px solid #ffffff1a; }
.admin-identity-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #d7eff4; background: #ffffff18; font-size: 12px; font-weight: 850; }
.admin-identity > span:last-child { display: grid; min-width: 0; gap: 3px; }
.admin-identity strong { overflow: hidden; color: white; font-size: 10px; text-overflow: ellipsis; }
.admin-identity small { color: #a9bacb; font-size: 9px; }
.admin-panel { padding: clamp(16px, 2.2vw, 25px); }
.admin-panel > h2, .admin-panel-heading h2 { margin: 0; font-size: clamp(20px, 2vw, 25px); letter-spacing: -.5px; }
.admin-panel-heading, .admin-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.admin-panel-heading .eyebrow { margin-bottom: 5px; }
.admin-live-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #d6efe2; border-radius: 20px; color: #278657; background: #effaf4; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.admin-live-indicator::before { width: 7px; height: 7px; border-radius: 50%; background: #2ead69; box-shadow: 0 0 0 4px #2ead691c; content: ""; }
.admin-list-heading { margin: 20px 0 12px; }
.admin-list-heading h3 { margin: 0; font-size: 15px; }
.admin-list-heading p { margin: 4px 0 0; color: #818b99; font-size: 11px; }
.admin-list-count { padding: 6px 9px; border: 1px solid #e8edf2; border-radius: 20px; color: #667487; background: #f8fafc; font-size: 10px; font-weight: 800; }
.admin-overview { gap: 12px; }
.admin-stat { position: relative; overflow: hidden; min-height: 102px; padding: 16px; border-color: #e6ebf1; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 0 5px 15px #20283e08; }
.admin-stat::after { position: absolute; right: -25px; bottom: -36px; width: 90px; height: 90px; border: 1px solid #369dbb20; border-radius: 50%; box-shadow: 0 0 0 12px #369dbb08, 0 0 0 25px #369dbb05; content: ""; }
.admin-stat span { font-size: 9px; letter-spacing: .7px; }
.admin-stat strong { position: relative; z-index: 1; font-size: 27px; }
.admin-quick-actions { margin-top: 25px; }
.admin-quick-actions .admin-list-heading { margin-top: 0; }
.admin-quick-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.admin-quick-action { display: flex; min-width: 0; min-height: 82px; align-items: center; gap: 11px; padding: 13px; border: 1px solid #e6ebf1; border-radius: 13px; color: inherit; background: linear-gradient(145deg, #fff, #f8fafc); text-align: left; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.admin-quick-action:hover { transform: translateY(-2px); border-color: #b7dce5; box-shadow: 0 8px 18px #20283e0d; }
.admin-quick-action-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #247e98; background: #e7f5f8; font-size: 16px; font-weight: 850; }
.admin-quick-action-copy { display: grid; min-width: 0; gap: 5px; }
.admin-quick-action-copy strong { color: var(--navy); font-size: 11px; }
.admin-quick-action-copy small { color: #778395; font-size: 9px; line-height: 1.4; }
.admin-quick-action-arrow { margin-left: auto; color: #778395; font-size: 20px; }
.admin-table-wrap { border-color: #e5eaf0; border-radius: 13px; box-shadow: 0 5px 16px #20283e07; }
.admin-table { border-spacing: 0; }
.admin-table th { padding: 12px 11px; color: #717e8e; background: #f5f8fb; font-size: 9px; }
.admin-table td { padding: 12px 11px; color: #4a5666; font-size: 11px; line-height: 1.45; }
.admin-list-table tbody tr { transition: background .15s ease; }
.admin-list-table tbody tr:not(:last-child) td { border-bottom-color: #edf1f5; }
.admin-list-table tbody tr:hover { background: #f8fbfd; }
.admin-list-table td strong { color: var(--navy); font-size: 12px; }
.admin-secondary-text { color: #788493; font-size: 10px; }
.admin-status-pill { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 9px; border-radius: 20px; color: #697587; background: #eef1f5; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.admin-status-pill.open, .admin-status-pill.active, .admin-status-pill.rewarded { color: #237b4d; background: #e9f8ef; }
.admin-status-pill.live, .admin-status-pill.qualified { color: #247a9a; background: #e8f6fb; }
.admin-status-pill.completed { color: #6653a3; background: #f0edfb; }
.admin-status-pill.cancelled, .admin-status-pill.suspended, .admin-status-pill.hidden-status { color: #a64b4b; background: #fff0ef; }
.admin-player-count { color: var(--navy); font-size: 12px; font-weight: 850; }
.admin-player-count small { color: #7b8694; font-size: 10px; font-weight: 650; }
.admin-table-actions { gap: 6px; }
.admin-table-actions button { min-height: 32px; border-color: #e2e8ef; background: #fff; transition: border-color .15s ease, background .15s ease; }
.admin-table-actions button:hover { border-color: #91c9d8; background: #f0fafc; }
.admin-table-actions .danger-action:hover { border-color: #edbcbc; background: #fff1f0; }
.admin-table-actions button:disabled { cursor: not-allowed; opacity: .48; }
.admin-table-actions button:disabled:hover { border-color: #e3e7ec; background: white; }
.admin-table-actions .danger-action:disabled:hover { border-color: #f1d6d6; background: #fff8f8; }
.admin-review-card { margin: 10px 0; padding: 15px; border: 1px solid #e8edf2; border-radius: 13px; background: linear-gradient(145deg, #fff, #fbfcfe); box-shadow: 0 5px 16px #20283e07; }
.admin-review-card > div:first-child > strong { color: var(--navy); font-size: 13px; }
.admin-create { margin: 12px 0 22px; padding: 13px; border: 1px solid #e6ebf1; border-radius: 13px; background: #fafbfd; }
.admin-create summary { width: fit-content; cursor: pointer; list-style: none; }
.admin-create summary::-webkit-details-marker { display: none; }
.admin-create[open] .admin-form { margin-top: 17px; }
.admin-notice { border: 1px solid #e2eef2; border-radius: 11px; background: linear-gradient(110deg, #eff7fa, #f8fafc); }

@media (max-width: 600px) {
  .selected-game-heading { margin: 12px auto 8px; }
  .selected-game-heading h2 { font-size: 24px; }
  .match-tabs { margin: 12px 0 18px; }
  .admin-sidebar { border-radius: 14px; }
  .admin-brand-lockup { margin: 2px 6px 12px; }
  .admin-brand-mark { width: 32px; height: 32px; }
  .admin-brand-lockup h1 { font-size: 15px; }
  .admin-identity { display: none; }
  .admin-sidebar nav { gap: 6px; }
  .admin-sidebar button { min-height: 40px; }
  .admin-nav-arrow { display: none; }
  .admin-panel { border-radius: 14px; }
  .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stat { min-height: 88px; }
  .admin-quick-action-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-list-table, .admin-list-table tbody { display: grid; width: 100%; gap: 10px; }
  .admin-list-table thead { display: none; }
  .admin-list-table tr { display: grid; gap: 0; padding: 5px 12px; border: 1px solid #e6ebf1; border-radius: 12px; background: white; box-shadow: 0 4px 13px #20283e08; }
  .admin-list-table td { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eff2f5; text-align: right; overflow-wrap: anywhere; }
  .admin-list-table td::before { flex: 0 0 auto; color: #8792a0; content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .4px; text-align: left; text-transform: uppercase; }
  .admin-list-table td:last-child { border-bottom: 0; }
  .admin-list-table td[colspan] { justify-content: center; border: 0; }
  .admin-list-table td[colspan]::before { content: none; }
  .admin-list-table td[data-label="Tournament"],
  .admin-list-table td[data-label="Player"],
  .admin-list-table td[data-label="Category"] { align-items: flex-start; }
  .admin-list-table td[data-label="Actions"] { align-items: flex-start; flex-direction: column; text-align: left; }
  .admin-list-table td[data-label="Actions"]::before { margin-bottom: 2px; }
  .admin-list-table .admin-table-actions { width: 100%; }
  .admin-list-table .admin-table-actions button { min-height: 35px; }
  .admin-list-table .admin-category-thumbnail { width: 110px; height: 58px; }
  .admin-list-table .hero-banner-url, .admin-list-table .admin-wrap-cell { max-width: 65%; }
  .admin-list-heading { margin-top: 17px; }
}

body { background: #edf1f6; }
.app-frame { background: #f5f7fa; box-shadow: 0 0 60px #1720330b; }
.topbar { background: linear-gradient(110deg, #182137, #253552 72%, #1c4358); }
.wallet-chip { border-color: #ffffff28; background: #ffffff0b; }
main { padding-top: 22px; }
.hero-banner { min-height: 220px; border: 1px solid #ffffff14; border-radius: 20px; box-shadow: 0 16px 34px #20283e1c; }
.hero-banner::after { right: 13%; bottom: -109px; width: 300px; height: 190px; }
.hero-emblem { border-color: #ffffff38; box-shadow: inset 0 0 25px #ffffff0b; }
.match-tabs { margin: 20px 0 25px; padding: 4px; border: 1px solid #e6eaf0; border-radius: 12px; background: white; box-shadow: 0 4px 14px #20283e08; }
.match-tab { min-height: 42px; border-radius: 9px; }
.match-tab.selected { color: white; background: var(--navy); }
.match-tab.selected::after { display: none; }
.section-heading { margin-bottom: 16px; }
.section-heading h2, .page-heading h1 { letter-spacing: -.4px; }
.game-category-list { gap: 18px; }
.game-category-card { min-height: 158px; border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.game-category-card:hover { transform: translateY(-2px); box-shadow: 0 13px 30px #20283e24; }
.game-category-copy strong { font-size: 17px; }
.game-category-copy small { font-size: 10px; }
.game-category-mark { top: 14px; right: 18px; font-size: 45px; }
.selected-game-heading h2 { font-size: 24px; }
.match-list, .contest-list { gap: 18px; }
.match-card, .contest-card { border-color: #e7ebf1; border-radius: 16px; box-shadow: 0 8px 24px #20283e0d; transition: transform .18s ease, box-shadow .18s ease; }
.match-card:hover, .contest-card:hover { transform: translateY(-2px); box-shadow: 0 13px 30px #20283e14; }
.game-art { min-height: 154px; padding: 18px 19px; isolation: isolate; background: linear-gradient(120deg, #18233b, #315c78 58%, #369dbb); }
.game-art::before { z-index: -1; top: auto; right: -20px; bottom: -76px; width: 260px; height: 155px; border: 1px solid #ffffff26; border-radius: 50% 50% 0 0; box-shadow: 0 -12px 0 2px #ffffff0a, 0 -25px 0 3px #ffffff08; transform: rotate(-8deg); }
.game-art::after { top: 26px; right: 46%; width: 4px; height: 4px; background: #fff; box-shadow: 20px 12px 0 1px #ffc20e, 46px -7px 0 1px #ffffffa6, 70px 23px 0 #ffffffaa, -15px 34px 0 1px #ffc20e; }
.game-art-battle { background: linear-gradient(120deg, #16243c 0%, #24516b 55%, #b47846 145%); }
.game-art-shooter { background: linear-gradient(120deg, #211d37 0%, #4b3b64 58%, #bb604e 145%); }
.game-art-sports { background: linear-gradient(120deg, #143346 0%, #247d77 58%, #a8aa5d 145%); }
.game-art-default { background: linear-gradient(120deg, #18233b 0%, #315c78 58%, #369dbb 145%); }
.game-art-content { position: relative; z-index: 1; display: grid; max-width: 70%; gap: 5px; text-shadow: 0 2px 9px #11182780; }
.game-kicker { margin: 0; color: #e3edf5; font-size: 9px; letter-spacing: 1.3px; }
.game-title { max-width: 100%; font-size: clamp(20px, 2.8vw, 29px); line-height: 1.05; letter-spacing: -.5px; }
.game-subtitle { color: #ffffffd9; font-size: 11px; font-weight: 650; letter-spacing: .3px; }
.game-art-crest { position: absolute; z-index: 1; right: 9%; bottom: -22px; width: 108px; height: 122px; color: #ffd05a; filter: drop-shadow(0 6px 12px #11182755); opacity: .9; transform: rotate(7deg); }
.game-art-glow { position: absolute; top: -70px; right: 16%; width: 180px; height: 180px; border-radius: 50%; background: #ffffff0c; filter: blur(1px); }
.match-card-body { padding: 16px 17px 17px; }
.match-card h3 { font-size: 16px; letter-spacing: -.15px; }
.status-badge { padding: 6px 9px; }
.prize-row { padding: 12px 0; }
.prize-cell span, .meta-item span { font-size: 9px; }
.prize-cell strong { font-size: 15px; }
.meta-chip { padding: 8px 9px; border-color: #e9edf2; border-radius: 9px; background: #f8fafc; }
.progress-track { height: 6px; }
.primary-button, .join-button, .secondary-button { min-height: 44px; border-radius: 10px; }
.join-button { box-shadow: 0 5px 12px #28a65a25; }
.filter-pill { border-radius: 11px; }
.contest-card { padding: 16px; }
.contest-card .game-art { min-height: 140px; margin: -16px -16px 14px; }
.detail-card, .account-subview, .auth-card { border-color: #e7ebf1; border-radius: 16px; box-shadow: 0 8px 24px #20283e0b; }
.detail-art { min-height: 190px; }
.detail-card .match-card-body { padding: 22px; }
.detail-fact { border: 1px solid #edf0f4; border-radius: 10px; background: #f8fafc; }
.result-summary { border: 1px solid #e9edf2; border-radius: 14px; box-shadow: 0 6px 20px #20283e08; }
.result-table-wrap { border: 1px solid #e9edf2; box-shadow: 0 6px 20px #20283e08; }
.account-cover { border: 1px solid #ffffff1a; border-radius: 18px; background: linear-gradient(125deg, #1a243a 0%, #284d66 67%, #267888 130%); box-shadow: 0 12px 28px #20283e1b; }
.balance-card, .account-menu { border-radius: 12px; }
.account-menu { box-shadow: 0 5px 18px #20283e08; }
.account-menu button { min-height: 70px; }
.account-subview { padding: 19px; }
.bottom-nav { border-top-color: #e6eaf0; box-shadow: 0 -5px 20px #1720330b; }
.nav-item.active { color: #2287a5; }
.bottom-nav.admin-mode { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-nav-item:not([hidden]) { position: static; width: auto; height: auto; border: 0; border-radius: 0; color: #8a919c; background: transparent; box-shadow: none; }
.admin-nav-item:not([hidden]).active { color: #2287a5; }
.admin-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-sidebar, .admin-panel { border: 1px solid #e7ebf1; border-radius: 16px; background: white; box-shadow: 0 8px 24px #20283e0b; }
.admin-sidebar { position: sticky; top: 84px; padding: 14px; }
.admin-sidebar h1 { margin: 4px 8px 14px; color: var(--navy); font-size: 19px; }
.admin-sidebar button { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; padding: 0 11px; border: 0; border-radius: 9px; color: #647082; background: transparent; text-align: left; font-size: 11px; font-weight: 750; }
.admin-sidebar button.selected { color: white; background: var(--navy); }
.admin-panel { min-width: 0; padding: 20px; }
.admin-panel h2 { margin: 0 0 15px; color: var(--navy); font-size: 19px; }
.admin-panel h3 { margin: 0 0 12px; color: var(--navy); font-size: 14px; }
.admin-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 20px; }
.admin-stat { padding: 14px; border: 1px solid #e9edf2; border-radius: 12px; background: #f9fafc; }
.admin-stat span { display: block; margin-bottom: 8px; color: #788392; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.admin-stat strong { color: var(--navy); font-size: 22px; }
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13px; margin-bottom: 18px; }
.admin-form h3, .admin-form .admin-form-wide { grid-column: 1 / -1; }
.admin-permission-fieldset { min-width: 0; margin: 0 0 13px; padding: 12px; border: 1px solid #e3e8ee; border-radius: 10px; }
.admin-permission-fieldset legend { padding: 0 5px; color: #647082; font-size: 9px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; }
.admin-permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.admin-permission-options label { display: flex; min-width: 0; align-items: center; gap: 8px; color: #475368; font-size: 11px; font-weight: 650; }
.admin-permission-options input { width: 16px !important; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--blue); }
.admin-managed-list { display: grid; gap: 12px; }
.admin-managed-card { display: grid; gap: 12px; margin: 0; padding: 15px; border: 1px solid #e6ebf0; border-radius: 12px; background: #fbfcfe; }
.admin-managed-card > div:first-child, .admin-managed-heading > div { display: grid; gap: 4px; }
.admin-managed-card strong { color: var(--navy); font-size: 12px; }
.admin-managed-card span { color: #778395; font-size: 10px; overflow-wrap: anywhere; }
.admin-managed-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-managed-heading button { flex: 0 0 auto; }
.banner-upload-field input { width: 100%; min-height: 42px; margin-top: 7px; padding: 8px; border: 1px solid #dfe4e9; border-radius: 8px; background: white; }
.banner-upload-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.admin-banner-preview { display: block; width: min(100%, 440px); max-height: 180px; margin: 8px 0; border-radius: 10px; object-fit: cover; }
.brand-preview { display: block; width: 132px; height: 72px; margin: 8px 0; padding: 8px; border: 1px solid #e8ebef; border-radius: 10px; background: #f8fafc; object-fit: contain; }
.favicon-preview { display: block; width: 52px; height: 52px; margin: 8px 0; padding: 6px; border: 1px solid #e8ebef; border-radius: 10px; background: #f8fafc; object-fit: contain; }
.admin-category-thumbnail { display: block; width: 100px; height: 52px; border-radius: 7px; object-fit: cover; }
.admin-checkbox-field { display: flex; min-height: 42px; align-items: center; gap: 8px; }
.admin-checkbox-field input { width: 18px; height: 18px; accent-color: var(--blue); }
.hero-banner-url { max-width: 260px; overflow-wrap: anywhere; }
.admin-form textarea, .admin-form select, .admin-form input { width: 100%; }
.admin-form .admin-checkbox-field input { width: 18px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid #e9edf2; border-radius: 12px; background: white; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th, .admin-table td { min-width: 82px; padding: 10px; border-bottom: 1px solid #edf0f3; font-size: 10px; vertical-align: middle; }
.admin-table th { color: #7a8491; background: #f8fafc; font-size: 9px; letter-spacing: .4px; text-transform: uppercase; }
.admin-table td strong { color: var(--navy); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-table-actions button { min-height: 30px; padding: 0 8px; border: 1px solid #e3e7ec; border-radius: 7px; color: var(--navy); background: white; font-size: 9px; font-weight: 800; }
.admin-table-actions .danger-action { color: #a63c3c; }
.admin-table td .danger-action { min-height: 30px; padding: 0 8px; border: 1px solid #f1d6d6; border-radius: 7px; color: #a63c3c; background: #fff8f8; font-size: 9px; font-weight: 800; }
.admin-notice { margin: 10px 0 16px; padding: 11px 13px; border-radius: 9px; color: #526179; background: #f0f5f8; font-size: 11px; line-height: 1.5; }
.admin-modal { position: fixed; z-index: 40; inset: 0; display: grid; overflow: auto; place-items: center; padding: 18px; background: #11182788; }
.admin-modal[hidden] { display: none; }
.admin-modal-card { width: min(660px, 100%); max-height: 90vh; overflow: auto; padding: 20px; border-radius: 16px; background: white; box-shadow: 0 18px 60px #10192d55; }
.admin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-modal-head button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #5b6573; background: #f0f2f5; font-size: 20px; }
.admin-review-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.admin-review-card p { margin: 3px 0; color: var(--muted); overflow-wrap: anywhere; }
.admin-review-card .wallet-review-actions { grid-column: 1 / -1; }
.admin-user-status { font-weight: 800; text-transform: uppercase; }
.admin-user-status.suspended { color: var(--red); }

@media (max-width: 600px) {
  main { padding-top: 14px; }
  .hero-banner { min-height: 174px; border-radius: 16px; }
  .welcome-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 8px; padding: 21px 24px; }
  .welcome-brand { grid-column: 1; }
  .welcome-content { padding: 34px 0 24px; }
  .welcome-content h1 { font-size: clamp(40px, 11vw, 60px); letter-spacing: -1.8px; }
  .welcome-description { margin-top: 17px; font-size: 14px; }
  .welcome-cta { min-height: 48px; margin-top: 22px; }
  .welcome-scroll-link { margin: 18px 0 0 2px; }
  .welcome-highlights { flex-direction: column; gap: 11px; margin-top: 23px; }
  .welcome-art { position: absolute; right: -100px; bottom: 95px; width: 230px; opacity: .25; }
  .welcome-art-tag { display: none; }
  .welcome-footer { grid-column: 1; flex-wrap: wrap; font-size: 9px; }
  .welcome-section { padding: 56px 20px; }
  .welcome-section-heading { margin-bottom: 25px; }
  .welcome-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .welcome-step { min-height: 0; padding: 19px; }
  .welcome-step h3 { margin-top: 15px; }
  .welcome-preview-section { grid-template-columns: minmax(0, 1fr); gap: 31px; padding: 57px 22px; }
  .welcome-app-preview { padding: 15px; transform: none; }
  .welcome-preview-greeting strong { font-size: 19px; }
  .welcome-feature-section { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 58px 22px; }
  .welcome-feature-list article { padding: 15px; }
  .welcome-faq-section { padding: 56px 19px; }
  .welcome-faq-list summary { min-height: 55px; padding: 14px; font-size: 11px; }
  .welcome-faq-list details > p { margin-right: 14px; margin-left: 14px; }
  .welcome-final-cta { padding: 59px 22px; }
  .welcome-site-footer { flex-wrap: wrap; padding: 15px 20px; }
  .hero-slider { min-height: 174px; border-radius: 16px; }
  .hero-slide img { min-height: 174px; }
  .hero-slider-arrow { width: 32px; height: 32px; }
  .hero-cta { min-height: 34px; margin-top: 12px; }
  .hero-emblem { width: 84px; }
  .match-tabs { margin: 15px 0 20px; }
  .match-list, .contest-list { gap: 14px; }
  .game-art { min-height: 138px; }
  .game-art-crest { right: 7%; width: 94px; height: 108px; }
  .game-art-content { max-width: 72%; }
  .game-title { font-size: 23px; }
  .match-card-body { padding: 14px; }
  .contest-card { padding: 14px; border-radius: 16px; }
  .contest-card .game-art { min-height: 130px; margin: -14px -14px 13px; }
  .detail-art { min-height: 164px; }
  .detail-card .match-card-body { padding: 17px; }
  .account-subview { padding: 16px; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-sidebar { position: static; overflow-x: auto; padding: 9px; }
  .admin-sidebar h1 { margin: 2px 6px 8px; font-size: 15px; }
  .admin-sidebar nav { display: flex; min-width: max-content; gap: 5px; }
  .admin-sidebar button { width: auto; min-height: 37px; padding: 0 10px; }
  .admin-panel { padding: 14px; }
  .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-stat { padding: 11px; }
  .admin-stat strong { font-size: 19px; }
  .admin-form { grid-template-columns: minmax(0, 1fr); }
  .support-inbox { grid-template-columns: minmax(0, 1fr); }
  .support-thread-list { max-height: 220px; border-right: 0; border-bottom: 1px solid #e5e9ef; }
  .support-agent-chat { min-height: 360px; }
  .support-agent-chat .support-message-list { min-height: 190px; max-height: 330px; }
  .admin-form h3, .admin-form .admin-form-wide { grid-column: auto; }
  .admin-table th, .admin-table td { padding: 8px; }
  .game-category-list { gap: 10px; }
  .game-category-card { min-height: 118px; padding: 11px; border-radius: 12px; }
  .game-category-copy strong { font-size: 13px; }
  .game-category-copy small { max-width: 120px; font-size: 8px; }
  .game-category-mark { top: 10px; right: 12px; font-size: 32px; }
  .selected-game-heading h2 { font-size: 20px; }
}

@media (min-width: 601px) and (max-width: 800px) {
  .welcome-layout { grid-template-columns: 1.1fr .7fr; gap: 18px; padding-right: 35px; padding-left: 35px; }
  .welcome-art { width: min(32vw, 270px); }
  .welcome-content h1 { font-size: clamp(40px, 6vw, 56px); }
}

@media (max-width: 380px) {
  .topbar { padding-right: 8px; padding-left: 8px; }
  .brand { gap: 4px; }
  .brand-logo { width: 34px; }
  .brand-mark { width: 35px; height: 30px; font-size: 13px; }
  .brand-copy { font-size: 8px; letter-spacing: .4px; }
  .topbar-actions { gap: 5px; }
  .wallet-chip { gap: 4px; padding: 4px 5px 4px 8px; font-size: 11px; }
  .wallet-add { width: 20px; height: 20px; margin-left: 2px; font-size: 16px; }
  .admin-entry { min-height: 32px; padding: 0 7px; font-size: 8px; }
  .install-app { min-height: 36px; gap: 3px; padding: 0 5px; font-size: 8px; }
  .install-app span { font-size: 14px; }
  .hero-emblem { width: 72px; }
  .hero-emblem span { font-size: 24px; }
  .game-art { min-height: 128px; }
  .game-art-content { max-width: 74%; }
  .game-title { font-size: 21px; }
  .game-art-crest { right: 5%; width: 82px; height: 94px; }
  .game-category-list { gap: 8px; }
  .game-category-card { min-height: 112px; padding: 9px; }
  .game-category-copy strong { font-size: 12px; }
  .game-category-copy small { font-size: 7px; }
}

.team-panel { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 8px 26px #1720330b; }
.team-panel h2, .team-panel h3 { margin: 0; color: var(--navy); }
.team-panel h2 { font-size: 20px; }
.team-panel h3 { font-size: 14px; }
.team-panel > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.team-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.team-status-pill { flex: 0 0 auto; padding: 6px 9px; border-radius: 20px; color: #745600; background: #fff3cc; font-size: 9px; font-weight: 900; letter-spacing: .6px; }
.team-status-pill.registered { color: #17653a; background: #dcf5e6; }
.team-member-progress { display: grid; gap: 9px; padding: 13px; border: 1px solid #e5ebf1; border-radius: 12px; background: linear-gradient(145deg, #f8fafc, #fff); }
.team-member-progress-heading, .team-member-progress-details { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-member-progress-heading span { color: #7d8998; font-size: 9px; font-weight: 850; letter-spacing: .55px; }
.team-member-progress-heading strong { color: var(--navy); font-size: 12px; }
.team-member-progress-bar { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 10px; appearance: none; background: #e7edf2; }
.team-member-progress-bar::-webkit-progress-bar { border-radius: 10px; background: #e7edf2; }
.team-member-progress-bar::-webkit-progress-value { border-radius: 10px; background: linear-gradient(90deg, #298ba6, #52b7c8); transition: width .25s ease; }
.team-member-progress-bar::-moz-progress-bar { border-radius: 10px; background: linear-gradient(90deg, #298ba6, #52b7c8); }
.team-member-progress-details { color: #697789; font-size: 9px; line-height: 1.4; }
.team-member-progress-details span:last-child { color: #278657; font-weight: 750; text-align: right; }
.team-member-pending { margin: 0; padding-top: 8px; border-top: 1px solid #e8edf2; color: #768292; font-size: 9px; }
.team-roster, .team-requests, .team-invitations, .open-team-list, .team-pending-list { display: grid; gap: 9px; }
.team-roster-row, .team-request-row, .open-team-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }
.team-roster-row { display: grid; grid-template-columns: 1fr auto; }
.team-roster-row strong, .team-request-row strong, .open-team-card strong { color: var(--navy); font-size: 12px; }
.team-roster-row span, .team-request-row span, .open-team-card span { color: var(--muted); font-size: 11px; }
.team-roster-row small { grid-column: 1 / -1; color: var(--muted); }
.team-request-row > div:first-child, .open-team-card > div:first-child { display: grid; gap: 4px; }
.team-request-row > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.team-request-row button, .team-panel .primary-button, .team-panel .secondary-button { min-height: 38px; padding: 0 12px; font-size: 9px; }
.team-panel .primary-button:disabled { cursor: not-allowed; opacity: .5; }
.team-create-form, .team-inline-form { display: grid; gap: 11px; }
.team-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; border-radius: 12px; background: #f5f7fa; }
.team-create-form label, .team-inline-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .5px; }
.team-create-form input:not([type="checkbox"]), .team-inline-form input:not([type="checkbox"]) { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #dfe4eb; border-radius: 8px; background: white; }
.team-consent { display: flex !important; grid-column: 1 / -1; grid-template-columns: auto 1fr !important; align-items: start; gap: 8px !important; color: var(--ink) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.5; }
.team-consent input { margin: 2px 0 0; accent-color: var(--blue); }
.team-create-form button { grid-column: 1 / -1; justify-self: start; }
.team-inline-form { min-width: min(320px, 100%); }
.team-add-member { display: grid; gap: 10px; }
.team-add-member-button { justify-self: start; gap: 7px; border-color: #dce5ed; color: #31536a; background: #f8fbfd; }
.team-add-member-button span { font-size: 15px; line-height: 1; }
.team-invite-form, .team-invitation-response { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #f7f9fc; }
.team-invite-form label, .team-invitation-response label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .5px; }
.team-invite-form input, .team-invitation-response input:not([type="checkbox"]) { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #dfe4eb; border-radius: 8px; background: white; }
.team-invite-form small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.team-invite-form button { justify-self: start; }
.team-invitation-card { display: grid; gap: 10px; padding: 13px; border: 1px solid #dce8f4; border-radius: 12px; background: #f8fbff; }
.team-invitation-card > div:first-child { display: grid; gap: 4px; }
.team-invitation-card > div:first-child strong { color: var(--navy); font-size: 13px; }
.team-invitation-card > div:first-child span { color: var(--muted); font-size: 11px; }
.team-invitation-response > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.open-team-card { align-items: flex-start; }
.team-fee-note { padding: 11px; border-left: 3px solid var(--yellow); border-radius: 6px; background: #fff9e6; }
.team-register-controls { display: grid; justify-items: start; gap: 10px; }
.team-register-controls .team-add-member { width: 100%; }
.team-register-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .5px; }
.team-register-controls select { width: min(100%, 340px); min-height: 42px; padding: 0 10px; border: 1px solid #dfe4eb; border-radius: 8px; background: white; color: var(--ink); font: inherit; font-size: 12px; }
.team-status { color: var(--muted); font-size: 12px; line-height: 1.5; }
.team-pending-list p { margin: 0; color: var(--muted); font-size: 12px; }
.team-config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.team-config-fields > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
.team-round-creation-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 13px; border: 1px solid #dceaf0; border-radius: 10px; background: #f6fafc; }
.team-round-creation-fields h4, .team-round-creation-fields > p { grid-column: 1 / -1; margin: 0; }
.team-round-creation-fields h4 { color: var(--navy); font-size: 13px; }
.team-round-creation-fields > p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.team-round-creation-fields > label { max-width: 320px; }
.team-round-config-counts .form-field > span { display: block; color: var(--navy); font-size: 10px; letter-spacing: .2px; }
.team-round-config-counts .form-field strong { color: #237b91; }
.team-round-config-item { display: grid; align-content: start; gap: 8px; padding: 11px; border: 1px solid #e1e8ed; border-radius: 9px; background: #fff; }
.team-round-config-item .form-field { max-width: none; margin: 0; }
.team-round-config-item .form-field input { min-width: 0; }
.team-round-public-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.team-round-public-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.team-round-public-list li strong { color: var(--navy); }
.team-round-public-list li span { color: var(--muted); font-size: 11px; }
.team-admin-list, .team-admin-members, .team-round-list { display: grid; gap: 10px; }
.team-admin-card, .team-round-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.team-admin-card-heading, .team-round-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.team-admin-card-heading strong, .team-round-heading h3 { color: var(--navy); font-size: 14px; }
.team-admin-card-heading span, .team-admin-members span, .team-admin-members small { color: var(--muted); font-size: 11px; }
.team-admin-members { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.team-admin-members > div { display: grid; gap: 4px; padding: 10px; border-radius: 9px; background: #f7f9fc; overflow-wrap: anywhere; }
.team-admin-members strong { color: var(--navy); font-size: 12px; }
.team-round-summary { padding: 12px; border-radius: 9px; color: var(--navy); background: #eaf3ff; font-size: 13px; }
.team-round-heading h3 { margin: 0; }
.team-round-card .admin-table { min-width: 360px; }
.team-round-card .admin-form { margin: 0; }
.team-round-score-form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.team-round-score-form h4, .team-round-score-form .admin-form-wide { grid-column: 1 / -1; }
.team-round-config-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.team-round-plan-summary { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.team-round-plan-summary h3, .team-round-plan-summary p { margin: 0; }
.team-round-plan-summary ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.team-round-plan-summary li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 9px; background: white; }
.team-round-plan-summary li strong { color: var(--navy); }
.team-round-plan-summary li span { color: var(--muted); font-size: 11px; }
.team-round-tie-form { display: grid; gap: 10px; }
.team-round-tie-form h4, .team-round-tie-form .admin-notice, .team-round-tie-form .admin-form-wide { grid-column: 1 / -1; }
.admin-status-pill.tie_break { color: #745600; background: #fff3cc; }
.detail-join .team-panel { width: 100%; }

#details-view { width: min(1120px, 100%); margin: 0 auto; }
#details-view > .back-button { min-height: 44px; margin-bottom: 16px; }
.details-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); align-items: start; gap: 20px; }
.detail-card { border-radius: 18px; box-shadow: 0 12px 34px #1720330b; }
.detail-art { min-height: 220px; border-radius: 17px 17px 0 0; }
.detail-card .match-card-body { padding: clamp(20px, 3vw, 30px); }
.detail-card h1 { font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -.6px; }
.detail-card .match-date { margin-top: 9px; color: #677386; font-size: 13px; }
.detail-summary { gap: 8px; margin: 22px 0; padding: 18px 0; }
.detail-summary .prize-cell { min-width: 0; padding: 0 10px; }
.detail-summary .prize-cell + .prize-cell { border-left: 1px solid var(--line); }
.detail-summary .prize-cell:first-child { padding-left: 0; }
.detail-summary .prize-cell span { font-size: 10px; }
.detail-summary .prize-cell strong { display: block; margin-top: 6px; color: var(--navy); font-size: clamp(15px, 2vw, 20px); overflow-wrap: anywhere; }
.detail-section { padding: 19px 0; }
.detail-section h2 { margin-bottom: 12px; font-size: 16px; }
.detail-section p, .detail-section li { color: #5f6b7b; font-size: 14px; line-height: 1.75; }
.detail-facts { gap: 10px; }
.detail-fact { min-height: 66px; padding: 13px; border: 1px solid #edf0f4; border-radius: 11px; background: #f8fafc; }
.detail-fact span { font-size: 10px; letter-spacing: .35px; }
.detail-fact strong { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-join { position: static; display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.detail-join .team-panel { padding: clamp(18px, 2.5vw, 24px); border-radius: 18px; box-shadow: 0 12px 34px #1720330b; }
.detail-join .card-actions { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 8px 24px #17203308; }
.detail-join .join-button, .detail-join > .card-actions > .secondary-button { min-height: 50px; border-radius: 11px; font-size: 11px; }
.detail-card .match-card-top .eyebrow { display: flex; align-items: center; gap: 8px; }
.detail-mode-tag { display: inline-flex; min-height: 20px; align-items: center; padding: 2px 7px; border: 1px solid #ffffff3d; border-radius: 20px; color: #fff; background: #ffffff19; font-size: 8px; font-weight: 850; letter-spacing: .55px; }
.detail-join { position: sticky; top: 82px; }
.detail-entry-card { display: grid; gap: 15px; padding: 20px; border: 1px solid #e5eaf0; border-radius: 18px; background: linear-gradient(155deg, #fff, #f8fafc); box-shadow: 0 12px 34px #1720330b; }
.detail-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-entry-heading .eyebrow { margin: 0 0 5px; color: #2183a0; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.detail-entry-heading h2 { margin: 0; color: var(--navy); font-size: 17px; letter-spacing: -.3px; }
.detail-entry-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #277e98; background: #e8f5f8; font-size: 17px; font-weight: 900; }
.detail-entry-hint { margin: 0; color: #687587; font-size: 11px; line-height: 1.55; }
.detail-entry-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.detail-entry-facts > div { display: grid; min-width: 0; gap: 6px; padding: 11px; border: 1px solid #e8edf2; border-radius: 11px; background: white; }
.detail-entry-facts span, .detail-capacity > div:first-child span { color: #84909e; font-size: 8px; font-weight: 850; letter-spacing: .45px; text-transform: uppercase; }
.detail-entry-facts strong { color: var(--navy); font-size: 13px; overflow-wrap: anywhere; }
.detail-entry-facts small { color: #7e8997; font-size: 9px; font-weight: 600; }
.detail-capacity { display: grid; gap: 8px; }
.detail-capacity > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.detail-capacity > div:first-child strong { color: #4a596c; font-size: 10px; }
.detail-capacity-track { display: block; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 10px; appearance: none; background: #e9edf2; }
.detail-capacity-track::-webkit-progress-bar { border-radius: 10px; background: #e9edf2; }
.detail-capacity-track::-webkit-progress-value { border-radius: 10px; background: linear-gradient(90deg, #278da9, #50b7c9); transition: width .25s ease; }
.detail-capacity-track::-moz-progress-bar { border-radius: 10px; background: linear-gradient(90deg, #278da9, #50b7c9); }
.detail-entry-card .card-actions { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.detail-entry-card .card-actions > button { width: 100%; }
.detail-entry-card .card-actions .join-button { box-shadow: 0 6px 14px #28a65a25; }
.detail-entry-footnote { margin: 0; padding-top: 12px; border-top: 1px solid #e8edf2; color: #7c8795; font-size: 9px; line-height: 1.5; }
.detail-entry-footnote strong { color: #4d5b6d; }

@media (max-width: 900px) {
  #details-view { max-width: 640px; }
  .details-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .detail-art { min-height: 175px; }
  .detail-card .match-card-body { padding: 19px; }
  .detail-join { gap: 12px; }
  .detail-join { position: static; }
  .detail-entry-card { padding: 17px; }
  .detail-join .team-panel { padding: 17px; }
}

@media (max-width: 420px) {
  .topbar { padding-right: 10px; padding-left: 10px; }
  .brand { gap: 5px; }
  .brand-logo { width: 36px; }
  .brand-copy { font-size: 8px; letter-spacing: .5px; }
  .topbar-actions { gap: 5px; }
  .wallet-chip { gap: 4px; padding: 4px 5px 4px 8px; font-size: 11px; }
  .wallet-add { width: 20px; height: 20px; margin-left: 2px; font-size: 16px; }
  .install-app { min-height: 36px; gap: 3px; padding: 0 6px; font-size: 8px; }
  .detail-summary { gap: 2px; }
  .detail-summary .prize-cell { padding: 0 7px; }
  .detail-summary .prize-cell span { font-size: 9px; }
  .detail-summary .prize-cell strong { font-size: 14px; }
  .detail-entry-facts { gap: 7px; }
  .detail-entry-facts > div { padding: 9px; }
  .detail-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .detail-fact { min-height: 58px; }
}

@media (max-width: 600px) {
  .team-panel { padding: 14px; }
  .team-create-form, .team-config-fields { grid-template-columns: minmax(0, 1fr); }
  .team-config-fields > p, .team-consent { grid-column: auto; }
  .open-team-card, .team-request-row { align-items: stretch; flex-direction: column; }
  .team-request-row > div:last-child { justify-content: flex-start; }
  .team-inline-form { min-width: 0; }
  .team-roster-row { grid-template-columns: minmax(0, 1fr); }
  .team-roster-row small { grid-column: auto; }
}

.tournament-panel-heading { margin-bottom: 18px; }
.tournament-panel-heading > div > p:last-child { margin: 6px 0 0; color: #788493; font-size: 11px; line-height: 1.5; }
.tournament-total-badge { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #e6ebf1; border-radius: 20px; color: #536174; background: white; font-size: 10px; font-weight: 850; }
.tournament-status-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.tournament-status-card { display: flex; min-width: 0; min-height: 76px; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid #e6ebf1; border-radius: 13px; background: white; box-shadow: 0 5px 15px #20283e08; }
.tournament-status-card span { color: #6f7b8b; font-size: 10px; font-weight: 750; line-height: 1.35; }
.tournament-status-card strong { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #237b4d; background: #e9f8ef; font-size: 14px; }
.tournament-status-card.status-live strong { color: #247a9a; background: #e8f6fb; }
.tournament-status-card.status-completed strong { color: #6653a3; background: #f0edfb; }
.tournament-status-card.status-cancelled strong { color: #a64b4b; background: #fff0ef; }
.tournament-create { margin: 17px 0 24px; padding: 14px; }
.tournament-create summary { display: inline-flex; min-height: 43px; align-items: center; gap: 7px; padding: 0 15px; border-radius: 10px; font-size: 10px; letter-spacing: .45px; }
.tournament-create summary span { font-size: 17px; line-height: 1; }
.tournament-create[open] summary { margin-bottom: 4px; }
.tournament-list-heading { margin-bottom: 13px; }
.tournament-list-heading h3 { font-size: 16px; }
.tournament-list-heading .admin-list-count { flex: 0 0 auto; }
.tournament-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(185px, .34fr); gap: 10px; margin: 0 0 12px; }
.tournament-search-field, .tournament-status-filter { display: flex; min-width: 0; min-height: 43px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #e1e7ee; border-radius: 10px; background: white; }
.tournament-search-field:focus-within, .tournament-status-filter:focus-within { border-color: #83c6d6; box-shadow: 0 0 0 3px #369dbb16; }
.tournament-search-field input, .tournament-status-filter select { width: 100%; min-width: 0; border: 0; outline: 0; color: #344154; background: transparent; font: inherit; font-size: 11px; }
.tournament-search-field input::placeholder { color: #97a1ae; }
.tournament-filter-icon { color: #7a8a9b; font-size: 22px; line-height: 1; }
.tournament-status-filter > span { flex: 0 0 auto; color: #8792a0; font-size: 8px; font-weight: 850; letter-spacing: .5px; }
.tournament-table-wrap { border-radius: 13px; }
.tournament-table { min-width: 670px; }
.tournament-table th:last-child { min-width: 210px; }
.tournament-table td[data-label="Tournament"] { min-width: 145px; }
.tournament-table td[data-label="Schedule"] { min-width: 140px; }
.tournament-table td[data-label="Actions"] { min-width: 210px; }
.tournament-table .admin-table-actions { gap: 5px; }
.tournament-table .admin-table-actions button { min-height: 31px; font-size: 8px; }
.admin-match-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.admin-match-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; padding: 2px 2px 15px; border-bottom: 1px solid #e8edf2; }
.admin-match-form-header .eyebrow { margin: 0 0 5px; color: #2785a0; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.admin-match-form-header h3 { margin: 0; color: var(--navy); font-size: 18px; letter-spacing: -.3px; }
.admin-match-form-header > div > p:last-child { margin: 6px 0 0; color: #788493; font-size: 10px; line-height: 1.5; }
.admin-match-required-note { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #e7ebf1; border-radius: 20px; color: #778395; background: white; font-size: 9px; }
.admin-match-required-note span { color: #c14949; font-weight: 900; }
.admin-match-section { min-width: 0; grid-column: 1 / -1; margin: 0 0 13px; padding: 16px; border: 1px solid #e8edf2; border-radius: 13px; background: white; }
.admin-match-section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.admin-match-section-heading > span { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #277f98; background: #e9f5f8; font-size: 9px; font-weight: 900; }
.admin-match-section-heading h4 { margin: 1px 0 4px; color: var(--navy); font-size: 12px; }
.admin-match-section-heading p { margin: 0; color: #7d8794; font-size: 9px; line-height: 1.45; }
.admin-match-section-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13px; }
.admin-match-section-fields .form-field { min-width: 0; }
.admin-match-section-fields .form-field input:not([type="file"]), .admin-match-section-fields .form-field select, .admin-match-section-fields .form-field textarea { min-height: 43px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe5ec; border-radius: 9px; outline: 0; color: #344154; background: #fff; font: inherit; font-size: 12px; letter-spacing: normal; transition: border-color .15s ease, box-shadow .15s ease; }
.admin-match-section-fields .form-field textarea { min-height: 96px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.admin-match-section-fields .form-field input:focus, .admin-match-section-fields .form-field select:focus, .admin-match-section-fields .form-field textarea:focus { border-color: #66b2c5; box-shadow: 0 0 0 3px #369dbb16; }
.admin-match-section-fields .banner-upload-field input[type="file"] { min-height: 42px; margin-top: 7px; padding: 7px; border: 1px dashed #cbd6e1; border-radius: 9px; background: #f9fbfd; font-size: 10px; }
.admin-match-section-fields .banner-upload-field small { line-height: 1.5; }
.admin-match-section .team-config-fields { margin: 0 0 13px; padding: 13px; border-color: #dceaf0; background: #f6fafc; }
.admin-match-form-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; padding: 14px 2px 1px; border-top: 1px solid #e8edf2; }
.admin-match-form-actions > p { margin: 0; color: #7b8694; font-size: 10px; line-height: 1.5; }
.admin-match-form-actions > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-match-form-actions button { min-width: 145px; }

@media (max-width: 600px) {
  .tournament-panel-heading { align-items: flex-start; }
  .tournament-total-badge { padding: 7px 8px; font-size: 9px; }
  .tournament-status-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
  .tournament-status-card { min-height: 66px; padding: 10px; }
  .tournament-status-card span { font-size: 9px; }
  .tournament-status-card strong { width: 30px; height: 30px; }
  .tournament-create { padding: 10px; }
  .tournament-create summary { width: 100%; justify-content: center; }
  .tournament-list-heading { align-items: flex-start; }
  .tournament-list-heading .admin-list-count { padding: 5px 7px; font-size: 9px; }
  .tournament-filters { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tournament-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .tournament-table { min-width: 0; }
  .tournament-table .admin-table-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-table .admin-table-actions button { min-height: 36px; }
  .tournament-table td[data-label="Actions"] { min-width: 0; }
  .admin-match-form-header { flex-direction: column; }
  .admin-match-required-note { align-self: flex-start; }
  .admin-match-section { padding: 13px; }
  .admin-match-section-fields { grid-template-columns: minmax(0, 1fr); }
  .admin-match-section-fields .admin-form-wide { grid-column: auto; }
  .admin-match-form-actions { align-items: stretch; flex-direction: column; }
  .admin-match-form-actions > div { display: grid; grid-template-columns: minmax(0, 1fr); }
  .admin-match-form-actions button { width: 100%; }
}