/* WHAT: Platform shell and discovery pages. WHY: Rival Arcade should feel like one organized destination rather than unrelated demos. HOW: Uses a wide desktop layout, responsive cards and locally drawn game previews. */
.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 4vw; border-bottom: 1px solid #263539; background: #101719f2; }
.brand { display: flex; align-items: center; gap: 12px; letter-spacing: -.04em; font-size: 19px; font-weight: 850; white-space: nowrap; }.brand-light { font-weight: 350; margin-left: 4px; color: #bfccca; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--mint); color: #0b2a26; border-radius: 10px; font-size: 24px; font-style: italic; }
.site-header nav { display: flex; gap: 30px; height: 100%; align-items: center; }.site-header nav a { color: var(--muted); font-size: 13px; position: relative; height: 100%; display: flex; align-items: center; }
.site-header nav a.active { color: var(--ink); }.site-header nav a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--mint); }
.header-actions { display: flex; gap: 16px; align-items: center; }
/* WHAT: Administrator identity in navigation and the account profile. WHY: Only the owner displays a name/email, and long addresses must fit small screens. HOW: Uses a stacked header label, a decorative initials avatar and wrapping text without changing player labels. */
.admin-account-link { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.4; min-width: 0; }
.admin-account-email { color: var(--muted); font-size: 10px; font-weight: 400; overflow-wrap: anywhere; white-space: normal; }
.admin-profile { display: flex; align-items: center; gap: 20px; border-color: #416a60; background: linear-gradient(120deg, #203c35, var(--surface-soft)); }
.admin-avatar { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center; background: var(--mint); color: #0b2a26; font-size: 24px; font-weight: 800; }
.admin-profile-details { min-width: 0; }.admin-profile-details .eyebrow { margin: 0 0 5px; }.admin-profile-details h2 { margin: 0 0 5px; font-size: 25px; }.admin-profile-details p { margin: 0; }.admin-profile-email { color: var(--mint); overflow-wrap: anywhere; }
#main { min-height: calc(100dvh - 175px); max-width: 1536px; margin: auto; padding: 50px 4vw; outline: 0; }
.site-footer { padding: 28px 4vw; border-top: 1px solid #263539; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; letter-spacing: .03em; }.site-footer div { display: flex; gap: 22px; color: var(--muted); }.site-footer button { font-size: 11px; }
.hero { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; }.hero p { max-width: 540px; font-size: 16px; margin-bottom: 0; }.hero h1 em { font-style: normal; color: var(--mint); }
.hero-aside { text-align: right; padding-bottom: 7px; }.hero-aside .rival-pair { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-bottom: 14px; }.rival-pair span:not(.muted) { border: 1px solid #42615c; padding: 8px 15px; font: 11px var(--mono); border-radius: 6px; }.hero-aside p { font-size: 12px; }
/* WHAT: Two primary experience cards. WHY: Watching and playing have different account and authority requirements. HOW: Entire cards are real links with explanatory labels and decorative CSS-only court illustrations. */
.experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 45px; }
.experience-card { position: relative; min-height: 296px; overflow: hidden; background: linear-gradient(120deg,#1b3330,#162326 68%); border: 1px solid #38544f; border-radius: 20px; padding: 32px; display: block; transition: border-color .2s, transform .2s; }
.experience-card:hover { border-color: var(--mint); transform: translateY(-3px); }.experience-card.player-card { background: linear-gradient(120deg,#322927,#202324 70%); border-color: #56433f; }.experience-card.player-card:hover { border-color: var(--coral); }
.experience-card .content { position: relative; z-index: 1; width: 62%; }.experience-card h2 { font-size: 35px; margin: 12px 0; }.experience-card p { font-size: 13px; max-width: 300px; color: #b4c4c3; }.experience-card .cta { display: inline-flex; gap: 22px; font-size: 13px; font-weight: 700; padding-top: 10px; color: var(--mint); }.player-card .cta { color: var(--coral); }
.card-index { font: 10px var(--mono); color: #94b4ae; letter-spacing: .1em; }.player-card .card-index { color: #c2a49c; }
.court-art { position: absolute; right: -8%; top: 26px; width: 48%; height: 220px; border: 1px solid #43746a; border-radius: 24px; transform: rotate(-12deg); background: repeating-linear-gradient(90deg,transparent 0 32px,#63e4cc04 33px 34px),repeating-linear-gradient(0deg,transparent 0 32px,#63e4cc04 33px 34px),#152c2a; opacity: .85; }
.court-art::before, .court-art::after { content: ''; position: absolute; height: 7px; width: 72px; border-radius: 6px; box-shadow: 0 0 25px #65e5ce3d; background: var(--mint); top: 27px; left: 25%; }.court-art::after { top: auto; bottom: 26px; left: 45%; background: var(--coral); }.court-art .ball { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #eefff9; left: 52%; top: 42%; box-shadow: -12px 15px 0 #edfff42a,-24px 30px 0 #edfff40f; }.court-art .net { position: absolute; left: 0; top: 50%; width: 100%; border-top: 2px dashed #6c9b9145; }
.player-art { position: absolute; top: 75px; right: 3%; width: 36%; height: 150px; display: flex; gap: 13px; justify-content: center; align-items: center; transform: rotate(-9deg); }
.player-art .avatar { display: grid; place-items: center; height: 105px; width: 78px; background: #4c3a35; border: 1px solid #956c5a; border-radius: 22px; font-size: 32px; color: #ffc2ad; box-shadow: 8px 10px 0 #0002; }.player-art .avatar:last-child { transform: translateY(32px); background: #29403b; border-color: #5d9283; color: var(--mint); }
/* WHAT: Module library and reusable detail pages. WHY: Visitors must know what is playable now and what is planned. HOW: Clear state badges and disabled non-links prevent misleading navigation. */
.library-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.game-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); overflow: hidden; }.game-card .card-body { padding: 21px; }.game-card h3 { font-size: 20px; }.game-card p { font-size: 13px; min-height: 42px; }.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.game-art { height: 125px; position: relative; overflow: hidden; display: grid; place-items: center; background: #192b2a; border-bottom: 1px solid var(--line); }
.pong-art::before, .pong-art::after { position: absolute; content: ''; width: 75px; height: 6px; background: var(--mint); top: 22px; left: 32%; border-radius: 5px; }.pong-art::after { top: auto; bottom: 22px; left: 50%; background: var(--coral); }.pong-art i { width: 10px; height: 10px; border-radius: 50%; background: white; }
.snake-art { background: #202e23; }.snake-art span { width: 18px; height: 18px; border-radius: 4px; background: var(--mint); box-shadow: -22px 0 var(--mint),-44px 0 var(--mint),-44px 22px var(--mint),-44px 44px var(--mint),22px -22px var(--coral); }
.block-art { background: #292633; }.block-art span { width: 24px; height: 24px; border-radius: 3px; background: #9d91c5; box-shadow: -28px 0 #9d91c5,0 -28px #9d91c5,28px 0 #9d91c5,56px 0 #45525c,-56px 28px #45525c,-28px 28px #45525c,0 28px #45525c,28px 28px #45525c,56px 28px #45525c; opacity: .65; }
.platform-note { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 0; font-size: 12px; color: var(--muted); }.platform-note a { color: var(--mint); }
.page-title { margin-bottom: 28px; }.page-title h1 { font-size: 42px; }.page-title p { max-width: 750px; }
.narrow { max-width: 600px; margin: 10px auto; }.wide-prose { max-width: 850px; }.wide-prose h2 { margin-top: 32px; }.wide-prose ul { padding-left: 22px; color: var(--muted); }
.tab-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }.tab-buttons button[aria-pressed="true"] { background: var(--mint); color: #092d2a; }
.consent-panel { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(870px,calc(100vw - 30px)); background: #21322f; border: 1px solid #53796e; z-index: 40; padding: 22px; border-radius: 16px; box-shadow: var(--shadow); display: flex; gap: 24px; align-items: center; }.consent-panel p { font-size: 12px; margin: 6px 0 0; max-width: 500px; }.consent-panel .button-row { flex-shrink: 0; }
.recovery-code { display: block; padding: 15px; border: 1px dashed var(--mint); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
@media(max-width: 1100px) { .site-header { padding: 0 24px; gap: 18px; }.header-actions .status-tag { display: none; }.site-header nav { gap: 20px; }.experience-card { padding: 25px; }.hero-aside { display: none; } }
@media(max-width: 760px) { .site-header { height: auto; min-height: 80px; flex-wrap: wrap; padding: 15px 20px 0; gap: 14px; }.brand { font-size: 16px; }.brand-mark { width: 31px; height: 31px; }.site-header nav { order: 3; width: 100%; height: 42px; gap: 26px; }.header-actions { margin-left: auto; }.site-header nav a { font-size: 12px; }#main { padding: 30px 20px; }.hero { margin-bottom: 26px; }.hero p { font-size: 14px; }.experience-grid { grid-template-columns: 1fr; margin-bottom: 32px; }.experience-card { min-height: 265px; }.experience-card h2 { font-size: 31px; }.library-grid { grid-template-columns: 1fr; }.game-card { display: grid; grid-template-columns: 115px 1fr; }.game-art { height: 100%; border: 0; }.game-card p { min-height: 0; font-size: 12px; }.game-card .card-body { padding: 19px; }.game-card h3 { font-size: 18px; }.card-bottom { flex-wrap: wrap; }.site-footer { flex-direction: column; padding: 24px 20px; }.site-footer div { flex-wrap: wrap; gap: 18px; }.platform-note { flex-direction: column; gap: 8px; }.consent-panel { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }.consent-panel .button-row { justify-content: flex-end; }.page-title h1 { font-size: 34px; } }