/* ============================================================================ Home shelf (the owner's pick "C", 2026-10-08): the home page and the two group menus (bara-salfa-menu, pogo-bash-menu). Home: a greeting, a swipeable featured row, the player filter stuck under the header, then a shelf of game tiles, 2 columns on a phone. Dark page, like the Flutter app's bottom bar (#111) under it. Every tile wears its game's lobby palette (lobby-theme.css tokens), so a tap lands in a lobby that already looks like the tile. The .gt- blocks at the end are GENERATED from each game's --lt-* tokens: node tests/home-tiles-check.js --write The check (no flag) fails when a lobby palette changed and this file was not regenerated, or a game has no tile block. Load with ?v=N, bumped on every change (the service worker serves cached CSS first). ========================================================================== */ @font-face { font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/shared/fonts/baloo-bhaijaan-2-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Baloo Bhaijaan 2'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/shared/fonts/baloo-bhaijaan-2-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --gt-font: 'Baloo Bhaijaan 2', 'Tajawal', system-ui, sans-serif; --gt-hdr-h: 55px; } @media (max-width: 600px) { :root { --gt-hdr-h: 60px; } } /* styles.css makes the header 60px there */ /* styles.css sets overflow-x: hidden on html AND body (!important on phones); on body that makes it a scroll container and the sticky filter never sticks. clip hides the overflow the same way without that. A browser without clip drops this line and keeps hidden: the filter then simply scrolls away. */ body.gt-page { overflow-x: clip !important; } .gt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .gt-main { padding-top: calc(var(--gt-hdr-h) + 6px); } /* ── Greeting ─────────────────────────────────────────────────────────── */ .gt-hello { margin: 0; padding: 14px 0 10px; font: 800 1.6rem/1.25 var(--gt-font); color: #fff; } .gt-hello b { color: var(--accent-gold); } /* ── Tokens: defaults for a game with no generated block ──────────────── */ .gt, .gt-fs { --gt-top: #3A3F4B; --gt-bg: #2A2E37; --gt-deep: #1C1F26; --gt-out: #0E1015; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #2A1F00; --gt-pri-lip: #E09400; --gt-shade: 0, 0, 0; --gt-pat: none; } /* Outlined text, as the lobby titles. */ .gt-title, .gt-fs-title { color: #fff; text-shadow: 0 2px 0 var(--gt-out), 0 -2px 0 var(--gt-out), 2px 0 0 var(--gt-out), -2px 0 0 var(--gt-out), 1.5px 1.5px 0 var(--gt-out), -1.5px 1.5px 0 var(--gt-out), 1.5px -1.5px 0 var(--gt-out), -1.5px -1.5px 0 var(--gt-out), 0 4px 0 rgba(var(--gt-shade), 0.35); } /* ── Featured row (home): swipe sideways on a phone, three across wider ── */ .gt-feat { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 14px; } .gt-feat::-webkit-scrollbar { display: none; } .gt-fs { position: relative; flex: 0 0 88%; scroll-snap-align: center; aspect-ratio: 16 / 11; border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none; font-family: var(--gt-font); background: var(--gt-deep); box-shadow: 0 6px 0 var(--gt-out), 0 16px 28px rgba(0, 0, 0, 0.5); } .gt-fs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gt-fs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--gt-deep) 92%); } .gt-fs-tag { position: absolute; z-index: 1; top: 14px; inset-inline-start: 14px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; box-shadow: 0 3px 0 #B38600; } .gt-fs-foot { position: absolute; z-index: 1; inset: auto 14px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .gt-fs-title { display: block; margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1.15; } .gt-fs-meta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-weight: 700; font-size: 0.85rem; } .gt-fs .gt-play { flex: none; height: 48px; padding: 0 20px; } .gt-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 4px; } .gt-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); } .gt-dots i.on { width: 20px; border-radius: 99px; background: var(--accent-gold); } @media (min-width: 720px) { .gt-feat { overflow: visible; margin: 0; padding: 4px 0 18px; } .gt-fs { flex: 1 1 0; } .gt-dots { display: none; } } /* ── Player filter (home): one row under the header, sideways if it overflows ── */ .games-filter { position: sticky; top: var(--gt-hdr-h); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 12px 16px; background: rgba(10, 10, 15, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .games-filter::-webkit-scrollbar { display: none; } /* The Resume banner (main.js) is fixed under the header with a height that wraps; stuck there, the row would hide behind it. */ body.has-active-room-banner .games-filter { position: static; } .games-filter > :first-child { margin-inline-start: auto; } /* centred when it fits, scrollable when not */ .games-filter > :last-child { margin-inline-end: auto; } .filter-pill { flex: none; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; background: #1C1D23; color: #D5D7DE; font: 800 0.98rem/1 var(--gt-font); box-shadow: 0 3px 0 #000; transition: transform 0.08s, box-shadow 0.08s; } .filter-pill.active { background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; border-color: transparent; box-shadow: 0 3px 0 #B38600; } .filter-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; } .filter-pill:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; } .gt-sec { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; } .gt-sec h2 { margin: 0; font: 800 1.25rem/1.2 var(--gt-font); color: #fff; } .gt-count { padding: 2px 10px; border-radius: 99px; background: #1C1D23; color: rgba(255, 255, 255, 0.75); font: 700 0.85rem/1.4 var(--gt-font); } /* ── The shelf. Flex, not grid, so a lone tile on the last row is centred. ── */ .gt-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; max-width: 1200px; margin: 0 auto; padding-bottom: 30px; } .gt-shelf > .gt { flex: 0 0 calc((100% - 12px) / 2); min-width: 0; } .gt-shelf > .games-empty { flex: 0 0 100%; text-align: center; color: var(--text-muted); padding: 40px 20px; } @media (min-width: 720px) { .gt-shelf { gap: 20px 16px; } .gt-shelf > .gt { flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 1040px) { .gt-shelf > .gt { flex-basis: calc((100% - 48px) / 4); } } @media (min-width: 1240px) { .gt-shelf > .gt { flex-basis: calc((100% - 64px) / 5); } } .gt { position: relative; display: flex; flex-direction: column; border-radius: 22px; padding: 7px; text-align: center; font-family: var(--gt-font); background: var(--gt-pat) 0 0 / 140px 140px repeat, linear-gradient(180deg, var(--gt-top), var(--gt-bg) 55%, var(--gt-deep)); box-shadow: 0 5px 0 var(--gt-out), 0 12px 22px rgba(0, 0, 0, 0.45); } .gt-art { position: relative; display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.18); } .gt-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .gt-art-emoji { display: grid; place-items: center; height: 100%; font-size: 3rem; } .gt-players { position: absolute; bottom: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(10, 10, 14, 0.78); color: #fff; font-weight: 800; font-size: 0.75rem; line-height: 1.3; } /* Leaderboard: a 32 px badge inside a 44 px tap area. */ .gt-lb { position: absolute; z-index: 2; top: 2px; inset-inline-end: 2px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .gt-lb span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--gt-out); box-shadow: 0 3px 0 rgba(var(--gt-shade), 0.5); } .gt-title { flex: 1; display: grid; place-items: center; min-height: 2.6em; margin: 8px 2px; font-size: 1.12rem; font-weight: 800; line-height: 1.15; } .gt-actions { display: grid; grid-template-columns: 1fr 44px; gap: 6px; } .gt-btn { height: 44px; border-radius: 14px; border: 0; padding: 0 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 1.05rem/1 var(--gt-font); text-decoration: none; transition: transform 0.08s, box-shadow 0.08s, filter 0.15s; } .gt-play { background: linear-gradient(180deg, var(--gt-pri), var(--gt-pri2)); color: var(--gt-pri-ink); box-shadow: 0 4px 0 var(--gt-pri-lip); } .gt-info { padding: 0; background: #fff; color: var(--gt-out); box-shadow: 0 4px 0 rgba(var(--gt-shade), 0.5); } .gt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } @media (hover: hover) { .gt-btn:hover, .gt-fs:hover .gt-play { filter: brightness(1.06); } } .gt :is(a, button):focus-visible, .gt-fs:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gt-btn, .filter-pill { transition: none; } .gt-feat { scroll-behavior: auto; } } /* ── Generated: each game's lobby palette (node tests/home-tiles-check.js --write) ── */ /* tiles:start */ .gt-bara-salfa-players { --gt-top: #FF7EB8; --gt-bg: #F2509B; --gt-deep: #CC2C7A; --gt-out: #8A0F4C; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #4A0B2C; --gt-pri-lip: #E09400; --gt-shade: 90, 10, 50; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 76h84M32 76c0-26 8-38 28-38s28 12 28 38M34 62h52'/%3E%3Crect x='124' y='40' width='32' height='22' rx='10'/%3E%3Crect x='166' y='40' width='32' height='22' rx='10'/%3E%3Cpath d='M156 50h10'/%3E%3Ccircle cx='58' cy='158' r='22'/%3E%3Cpath d='M74 174l20 20'/%3E%3Cpath d='M150 140a14 14 0 1 1 21 12c-4 3-7 6-7 11v3'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.12'%3E%3Ccircle cx='164' cy='184' r='4.5'/%3E%3C/g%3E%3C/svg%3E"); } .gt-bara-salfa-questions { --gt-top: #3CD9C5; --gt-bg: #17BBA8; --gt-deep: #0B958A; --gt-out: #05524A; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #073D38; --gt-pri-lip: #E09400; --gt-shade: 4, 60, 55; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 46a20 20 0 1 1 30 17c-6 4-10 8-10 15v4' transform='rotate(-12 55 62)'/%3E%3Cpath d='M128 130h60a14 14 0 0 1 14 14v22a14 14 0 0 1-14 14h-30l-16 14v-14h-14a14 14 0 0 1-14-14v-22a14 14 0 0 1 14-14z'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.12'%3E%3Ccircle cx='63' cy='96' r='5' transform='rotate(-12 55 62)'/%3E%3Ctext x='165' y='86' font-size='64' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(10 165 86)'%3E%D8%9F%3C/text%3E%3Ctext x='158' y='170' font-size='30' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(0 158 170)'%3E%D8%9F%3C/text%3E%3Ctext x='50' y='186' font-size='46' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(14 50 186)'%3E?%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-bara-salfa-words { --gt-top: #A47BFF; --gt-bg: #8048F5; --gt-deep: #5F27D6; --gt-out: #3E1499; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #2A0E5C; --gt-pri-lip: #E09400; --gt-shade: 40, 10, 100; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 30h60a14 14 0 0 1 14 14v26a14 14 0 0 1-14 14H54l-16 14V84H28a14 14 0 0 1-14-14V44a14 14 0 0 1 14-14z'/%3E%3Cpath d='M134 128c16-6 40-6 56 0v26c0 20-12 34-28 34s-28-14-28-34z' transform='rotate(10 162 158)'/%3E%3Cpath d='M150 182q12 9 24 0' transform='rotate(10 162 158)'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.12'%3E%3Ccircle cx='42' cy='57' r='5'/%3E%3Ccircle cx='58' cy='57' r='5'/%3E%3Ccircle cx='74' cy='57' r='5'/%3E%3Cellipse cx='151' cy='148' rx='7' ry='5' transform='rotate(10 162 158)'/%3E%3Cellipse cx='173' cy='148' rx='7' ry='5' transform='rotate(10 162 158)'/%3E%3Ctext x='165' y='74' font-size='58' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-12 165 74)'%3E%D8%A8%3C/text%3E%3Ctext x='52' y='190' font-size='54' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(10 52 190)'%3EA%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-bounce-royale { --gt-top: #FFB547; --gt-bg: #FF8F1F; --gt-deep: #F26A0F; --gt-out: #A33A00; --gt-pri: #A6F04D; --gt-pri2: #72D12A; --gt-pri-ink: #1E3D05; --gt-pri-lip: #3F9418; --gt-shade: 110, 45, 0; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.13' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='54' cy='52' r='28'/%3E%3Cpath d='M30 40q24 18 48 0M34 70q20-12 40 0'/%3E%3Cpath d='M118 34h32M126 50h22M134 66h12'/%3E%3Ccircle cx='160' cy='158' r='24'/%3E%3Cpath d='M140 146q20 14 40 0'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.13'%3E%3Cpath d='M56.0 150.0L61.3 162.7L75.0 163.8L64.6 172.8L67.8 186.2L56.0 179.0L44.2 186.2L47.4 172.8L37.0 163.8L50.7 162.7Z'/%3E%3Ccircle cx='184' cy='60' r='9'/%3E%3Ccircle cx='100' cy='120' r='6'/%3E%3C/g%3E%3C/svg%3E"); } .gt-guess-challenge { --gt-top: #FF7A7A; --gt-bg: #F24E55; --gt-deep: #CF2A39; --gt-out: #8E0F1E; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #4A0C12; --gt-pri-lip: #E09400; --gt-shade: 100, 10, 20; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.13' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='58' cy='58' r='32'/%3E%3Ccircle cx='58' cy='58' r='18'/%3E%3Cpath d='M128 186l46-46M174 140l-14 2M174 140l-2 14M128 186l-12-2M128 186l2-12'/%3E%3Cpath d='M150 34a16 16 0 1 1 24 14c-5 3-8 6-8 12v3'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.13'%3E%3Ccircle cx='58' cy='58' r='6'/%3E%3Ccircle cx='166' cy='78' r='4.5'/%3E%3Cpath d='M60.0 152.0L64.2 162.2L75.2 163.1L66.8 170.2L69.4 180.9L60.0 175.2L50.6 180.9L53.2 170.2L44.8 163.1L55.8 162.2Z'/%3E%3C/g%3E%3C/svg%3E"); } .gt-guess-number { --gt-top: #FFE066; --gt-bg: #FFC928; --gt-deep: #F5A800; --gt-out: #8A4B00; --gt-pri: #FF9A4D; --gt-pri2: #FF7A1F; --gt-pri-ink: #3D1A00; --gt-pri-lip: #C2500A; --gt-shade: 110, 70, 0; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 52l14-16 14 16M164 36v34'/%3E%3Cpath d='M44 150l14 16 14-16M58 166v-34'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.14'%3E%3Ctext x='54' y='82' font-size='70' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-10 54 82)'%3E7%3C/text%3E%3Ctext x='160' y='182' font-size='70' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(10 160 182)'%3E3%3C/text%3E%3Ctext x='112' y='132' font-size='34' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(0 112 132)'%3E%23%3C/text%3E%3Ctext x='186' y='112' font-size='30' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-8 186 112)'%3E9%3C/text%3E%3Ctext x='24' y='196' font-size='30' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(8 24 196)'%3E1%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-gwent { --gt-top: #5A3420; --gt-bg: #3A2113; --gt-deep: #1E1009; --gt-out: #2A1406; --gt-pri: #FFDB7A; --gt-pri2: #E6A93A; --gt-pri-ink: #3B2412; --gt-pri-lip: #8F6118; --gt-shade: 20, 8, 2; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23F0D186' stroke-opacity='0.14' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='22' width='46' height='64' rx='7' transform='rotate(-12 49 54)'/%3E%3Cpath d='M49 40l10 14-10 14-10-14z' transform='rotate(-12 49 54)'/%3E%3Cpath d='M128 82l-6-34 20 16 18-26 18 26 20-16-6 34z'/%3E%3Cpath d='M34 198l58-58M80 132l18 18M28 204l8-8'/%3E%3Cpath d='M142 136h40v22c0 18-10 28-20 32-10-4-20-14-20-32z'/%3E%3C/g%3E%3Cg fill='%23F0D186' fill-opacity='0.14'%3E%3Ccircle cx='160' cy='158' r='5'/%3E%3C/g%3E%3C/svg%3E"); } .gt-hawitha { --gt-top: #3A9BFF; --gt-bg: #1E7BFF; --gt-deep: #1560E8; --gt-out: #0B3FA8; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #0F2C6E; --gt-pri-lip: #E09400; --gt-shade: 6, 30, 90; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.1' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='22' y='24' width='52' height='50' rx='15' transform='rotate(-10 48 49)'/%3E%3Cpath d='M160 40L165.3 52.7L179 53.8L168.6 62.8L171.8 76.2L160 69L148.2 76.2L151.4 62.8L141 53.8L154.7 52.7Z'/%3E%3Cpath d='M128 168c14-30 52-32 60-8s-24 40-46 26'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.1'%3E%3Ccircle cx='38' cy='46' r='6.5'/%3E%3Ccircle cx='57' cy='43' r='6.5'/%3E%3Crect x='30' y='140' width='44' height='40' rx='13' transform='rotate(12 52 160)'/%3E%3C/g%3E%3C/svg%3E"); } .gt-minesweeper { --gt-top: #DCE3EB; --gt-bg: #BAC6D3; --gt-deep: #93A2B3; --gt-out: #2B3A4C; --gt-pri: #DA2D34; --gt-pri2: #B81C24; --gt-pri-ink: #FFFFFF; --gt-pri-lip: #7A0F14; --gt-shade: 25, 35, 50; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2322303F' stroke-opacity='0.09' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 28v56M26 86h28'/%3E%3Ccircle cx='164' cy='58' r='17'/%3E%3Cpath d='M164 30v-6M164 92v-6M136 58h-6M198 58h-6M144 38l-4-4M188 82l-4-4M184 38l4-4M144 78l-4 4'/%3E%3Crect x='126' y='136' width='54' height='54' rx='10'/%3E%3Crect x='22' y='136' width='54' height='54' rx='10'/%3E%3C/g%3E%3Cg fill='%2322303F' fill-opacity='0.09'%3E%3Cpath d='M42 30l32 13-32 13z'/%3E%3Ccircle cx='158' cy='52' r='4' fill-opacity='0.5'/%3E%3Ctext x='153' y='177' font-size='34' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(0 153 177)'%3E1%3C/text%3E%3Ctext x='49' y='177' font-size='34' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(0 49 177)'%3E3%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-pacman { --gt-top: #2E2BB0; --gt-bg: #1F1C80; --gt-deep: #121052; --gt-out: #0A0830; --gt-pri: #FFF35C; --gt-pri2: #FFD60A; --gt-pri-ink: #15124A; --gt-pri-lip: #B89400; --gt-shade: 5, 4, 40; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%235B6CFF' stroke-opacity='0.55' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M132 18h66v48M146 32h38v34'/%3E%3Cpath d='M18 150v52h52'/%3E%3C/g%3E%3Cg fill='%23FFE14D' fill-opacity='0.4'%3E%3Ccircle cx='24' cy='112' r='5'/%3E%3Ccircle cx='52' cy='112' r='5'/%3E%3Ccircle cx='80' cy='112' r='5'/%3E%3Ccircle cx='108' cy='112' r='5'/%3E%3Ccircle cx='142' cy='112' r='11'/%3E%3Ccircle cx='196' cy='112' r='5'/%3E%3C/g%3E%3Cpath d='M24 74V48a22 22 0 0 1 44 0v26l-7-7-7 7-8-7-7 7-8-7z' fill='%23FF7AC8' fill-opacity='0.32'/%3E%3Cpath d='M132 196v-26a22 22 0 0 1 44 0v26l-7-7-7 7-8-7-7 7-8-7z' fill='%234DEBFF' fill-opacity='0.3'/%3E%3Cg fill='%23fff' fill-opacity='0.4'%3E%3Ccircle cx='38' cy='50' r='5'/%3E%3Ccircle cx='54' cy='50' r='5'/%3E%3Ccircle cx='146' cy='172' r='5'/%3E%3Ccircle cx='162' cy='172' r='5'/%3E%3C/g%3E%3C/svg%3E"); } .gt-pogo-painter { --gt-top: #FFFDF7; --gt-bg: #FFF3DC; --gt-deep: #FFE2B8; --gt-out: #3A1250; --gt-pri: #5CE1FF; --gt-pri2: #22C3EE; --gt-pri-ink: #08263A; --gt-pri-lip: #0A86B0; --gt-shade: 90, 50, 10; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cpath d='M52 22c10-6 20 4 28 0s16 6 12 16 8 18-2 24-6 18-16 14-18 8-26 0-18-6-14-16-6-20 4-26 10-10 18-12z' fill='%23FF4FA3' fill-opacity='0.3'/%3E%3Ccircle cx='104' cy='30' r='6' fill='%23FF4FA3' fill-opacity='0.3'/%3E%3Cpath d='M150 128c10-6 20 4 28 0s16 6 12 16 8 18-2 24-6 18-16 14-18 8-26 0-18-6-14-16-6-20 4-26 10-10 18-12z' fill='%2322C3EE' fill-opacity='0.3'/%3E%3Ccircle cx='132' cy='196' r='7' fill='%2322C3EE' fill-opacity='0.3'/%3E%3Cpath d='M40 150c8-5 15 3 22 0s12 5 9 12 6 14-2 19-5 14-12 11-14 6-20 0-14-5-11-12-5-16 3-20 8-8 14-10z' fill='%23FFC21A' fill-opacity='0.34'/%3E%3Cpath d='M162 34c7-4 13 3 19 0s10 4 8 10 5 12-1 16-4 12-11 10-12 5-17 0-12-4-9-10-4-13 3-17 7-7 11-9z' fill='%2334C759' fill-opacity='0.3'/%3E%3Ccircle cx='100' cy='108' r='5' fill='%23FF8A3D' fill-opacity='0.35'/%3E%3C/svg%3E"); } .gt-snake-ladder { --gt-top: #7FD86F; --gt-bg: #4CBA52; --gt-deep: #2F9440; --gt-out: #1D5A25; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #2E2410; --gt-pri-lip: #D18E00; --gt-shade: 20, 60, 20; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 18v74M66 18v74M34 34h32M34 54h32M34 74h32'/%3E%3Crect x='134' y='26' width='52' height='52' rx='13' transform='rotate(10 160 52)'/%3E%3Cpath d='M24 196c22 0 22-34 44-34s22 34 44 34'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.14'%3E%3Ccircle cx='146' cy='40' r='5'/%3E%3Ccircle cx='160' cy='52' r='5'/%3E%3Ccircle cx='174' cy='64' r='5'/%3E%3Ccircle cx='116' cy='192' r='8'/%3E%3Crect x='146' y='140' width='24' height='24' rx='4'/%3E%3Crect x='170' y='164' width='24' height='24' rx='4'/%3E%3C/g%3E%3C/svg%3E"); } .gt-stop-game { --gt-top: #3F6E5F; --gt-bg: #2F5A4D; --gt-deep: #1F4036; --gt-out: #10261F; --gt-pri: #FFE873; --gt-pri2: #FFD23F; --gt-pri-ink: #2A2200; --gt-pri-lip: #C79A00; --gt-shade: 5, 25, 20; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.13' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M128 196l52-52 12 12-52 52h-12zM170 154l12 12'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.13'%3E%3Ctext x='52' y='84' font-size='64' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-10 52 84)'%3E%D8%A3%3C/text%3E%3Ctext x='160' y='78' font-size='58' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(12 160 78)'%3EB%3C/text%3E%3Ctext x='56' y='196' font-size='58' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(8 56 196)'%3E%D8%AC%3C/text%3E%3Ctext x='110' y='132' font-size='28' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(0 110 132)'%3ES%3C/text%3E%3Ctext x='196' y='132' font-size='28' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-10 196 132)'%3E%D9%86%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-tank-battle { --gt-top: #8A9A4E; --gt-bg: #6B7B36; --gt-deep: #4C5A22; --gt-out: #263010; --gt-pri: #FFC24D; --gt-pri2: #F0A21C; --gt-pri-ink: #2B1F00; --gt-pri-lip: #A86A00; --gt-shade: 25, 30, 8; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='64' width='86' height='24' rx='12'/%3E%3Cpath d='M28 64l8-14h50l8 14'/%3E%3Crect x='44' y='34' width='32' height='16' rx='6'/%3E%3Cpath d='M76 42h30'/%3E%3Cpath d='M136 174l24-16 24 16M136 194l24-16 24 16'/%3E%3Cpath d='M24 186h34l10-9-10-9H24z'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.12'%3E%3Ccircle cx='32' cy='76' r='5'/%3E%3Ccircle cx='50' cy='76' r='5'/%3E%3Ccircle cx='68' cy='76' r='5'/%3E%3Ccircle cx='86' cy='76' r='5'/%3E%3Cpath d='M164.0 32.0L170.3 47.3L186.8 48.6L174.3 59.3L178.1 75.4L164.0 66.8L149.9 75.4L153.7 59.3L141.2 48.6L157.7 47.3Z'/%3E%3C/g%3E%3C/svg%3E"); } .gt-tank-wars { --gt-top: #F4DBA6; --gt-bg: #E8C27A; --gt-deep: #D29F4E; --gt-out: #5B3A12; --gt-pri: #567F28; --gt-pri2: #466A20; --gt-pri-ink: #FFFFFF; --gt-pri-lip: #2A4212; --gt-shade: 80, 50, 15; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%235B3A12' stroke-opacity='0.11' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 118q58-86 116 0' stroke-dasharray='2 14'/%3E%3Crect x='148' y='26' width='46' height='46' rx='6'/%3E%3Cpath d='M148 26l46 46M194 26l-46 46'/%3E%3Ccircle cx='164' cy='164' r='20'/%3E%3Cpath d='M164 134v14M164 180v14M134 164h14M180 164h14'/%3E%3Ccircle cx='52' cy='186' r='14'/%3E%3Cpath d='M52 186l38-26'/%3E%3C/g%3E%3Cg fill='%235B3A12' fill-opacity='0.11'%3E%3Ccircle cx='140' cy='118' r='7'/%3E%3C/g%3E%3C/svg%3E"); } .gt-bara-salfa-menu { --gt-top: #A47BFF; --gt-bg: #8048F5; --gt-deep: #5F27D6; --gt-out: #3E1499; --gt-pri: #FFE55C; --gt-pri2: #FFC61A; --gt-pri-ink: #2A0E5C; --gt-pri-lip: #E09400; --gt-shade: 40, 10, 100; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 30h60a14 14 0 0 1 14 14v26a14 14 0 0 1-14 14H54l-16 14V84H28a14 14 0 0 1-14-14V44a14 14 0 0 1 14-14z'/%3E%3Cpath d='M134 128c16-6 40-6 56 0v26c0 20-12 34-28 34s-28-14-28-34z' transform='rotate(10 162 158)'/%3E%3Cpath d='M150 182q12 9 24 0' transform='rotate(10 162 158)'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.12'%3E%3Ccircle cx='42' cy='57' r='5'/%3E%3Ccircle cx='58' cy='57' r='5'/%3E%3Ccircle cx='74' cy='57' r='5'/%3E%3Cellipse cx='151' cy='148' rx='7' ry='5' transform='rotate(10 162 158)'/%3E%3Cellipse cx='173' cy='148' rx='7' ry='5' transform='rotate(10 162 158)'/%3E%3Ctext x='165' y='74' font-size='58' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(-12 165 74)'%3E%D8%A8%3C/text%3E%3Ctext x='52' y='190' font-size='54' font-weight='900' font-family='Arial,sans-serif' text-anchor='middle' transform='rotate(10 52 190)'%3EA%3C/text%3E%3C/g%3E%3C/svg%3E"); } .gt-pogo-bash-menu { --gt-top: #FFB547; --gt-bg: #FF8F1F; --gt-deep: #F26A0F; --gt-out: #A33A00; --gt-pri: #A6F04D; --gt-pri2: #72D12A; --gt-pri-ink: #1E3D05; --gt-pri-lip: #3F9418; --gt-shade: 110, 45, 0; --gt-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.13' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='54' cy='52' r='28'/%3E%3Cpath d='M30 40q24 18 48 0M34 70q20-12 40 0'/%3E%3Cpath d='M118 34h32M126 50h22M134 66h12'/%3E%3Ccircle cx='160' cy='158' r='24'/%3E%3Cpath d='M140 146q20 14 40 0'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.13'%3E%3Cpath d='M56.0 150.0L61.3 162.7L75.0 163.8L64.6 172.8L67.8 186.2L56.0 179.0L44.2 186.2L47.4 172.8L37.0 163.8L50.7 162.7Z'/%3E%3Ccircle cx='184' cy='60' r='9'/%3E%3Ccircle cx='100' cy='120' r='6'/%3E%3C/g%3E%3C/svg%3E"); } /* tiles:end */ /* ── Login: the welcome screen (the owner's pick "C", 2026-10-09) ───────── #login-modal on index + the two group menus. Full screen on a phone (the games' art behind, a big welcome, three big buttons), a card from 720 px. The phone forms fold under "Sign in with phone" (main.js). The app's shell injects its black Apple button right above the Google link (Guideline 4.8) with inline styles; only its size and corners are matched here. Fields are 16 px (iOS zooms below that). The Forgot password modal wears the same shell; the reset page (#reset-view, profile.html?reset=, the email's link) the same title, panel and fields. Scoped by id: theme.css / styles.css .modal-* rules are reset where they would show, and theme.css forces its own input look with !important (beaten here the same way, one class stronger: the group menus load theme.css after this file). */ #login-modal.lg-welcome, #forgot-password-modal.lg-welcome { padding: 0; align-items: stretch; background: #0D0E12; -webkit-backdrop-filter: none; backdrop-filter: none; } #login-modal .modal-card, #forgot-password-modal .modal-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 560px; min-height: 100%; margin: 0 auto; transform: none; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; color: #fff; text-align: start; font-family: var(--gt-font); font-size: 16px; line-height: 1.4; background: linear-gradient(180deg, rgba(13, 14, 18, 0.15), rgba(13, 14, 18, 0.72) 36%, #0D0E12 64%), url('/assets/games/Snake-Ladder.webp') center top / cover no-repeat, #0D0E12; } @media (min-width: 720px) { #login-modal.lg-welcome, #forgot-password-modal.lg-welcome { padding: 24px; align-items: center; background: rgba(0, 0, 0, 0.72); } #login-modal .modal-card, #forgot-password-modal .modal-card { min-height: 0; max-height: 92vh; overflow-y: auto; border-radius: 28px; padding-top: 140px; box-shadow: 0 6px 0 #050506, 0 24px 60px rgba(0, 0, 0, 0.6); } } #login-modal .modal-close, #forgot-password-modal .modal-close { position: absolute; top: 14px; inset-inline-start: 14px; inset-inline-end: auto; right: auto; left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #fff; z-index: 3; } [dir="rtl"] #login-modal .modal-close, [dir="rtl"] #forgot-password-modal .modal-close { right: 14px; left: auto; } [dir="ltr"] #login-modal .modal-close, [dir="ltr"] #forgot-password-modal .modal-close { left: 14px; right: auto; } #login-modal .modal-header, #forgot-password-modal .modal-header { margin: 0 0 18px; padding: 0; border: 0; text-align: start; } .lg-logo { width: 84px; height: 84px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); } #login-modal .modal-header h2, #forgot-password-modal .modal-header h2, #reset-view h2 { margin: 6px 0 2px; font: 800 32px/1.15 var(--gt-font); color: #fff; } #login-modal .modal-header p, #forgot-password-modal .modal-header p, #reset-view .lg-sub { margin: 0; color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: 16px; } #login-modal .modal-body, #forgot-password-modal .modal-body { display: flex; flex-direction: column; gap: 12px; color: #fff; font-size: 16px; line-height: 1.4; text-align: start; } #login-modal :focus-visible, #forgot-password-modal :focus-visible, #reset-view :focus-visible { outline: 3px solid #F5C518; outline-offset: 2px; } .lg-sso { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 16px/1.2 var(--gt-font); text-decoration: none; cursor: pointer; transition: transform 0.08s ease; } .lg-sso:active { transform: translateY(3px); } .lg-google { background: #fff; color: #222; box-shadow: 0 4px 0 #BFC3CC; } .lg-phone { background: #26272E; color: #fff; box-shadow: 0 4px 0 #000; } .lg-phone[aria-expanded="true"] .lg-chev { transform: rotate(180deg); } #login-modal [data-native-apple-btn] { min-height: 52px !important; border-radius: 15px !important; box-shadow: 0 4px 0 #333 !important; } #local-auth-forms, #forgot-password-form, #reset-form { padding: 14px; border-radius: 20px; background: #17181D; border: 1px solid rgba(255, 255, 255, 0.08); } #local-auth-forms[hidden] { display: none; } #local-login-form, #local-register-form, #forgot-password-form, #reset-form { flex-direction: column; gap: 10px; } #local-login-form, #forgot-password-form, #reset-form { display: flex; } #login-modal .field-row, #forgot-password-modal .field-row, #reset-view .field-row { display: block; margin: 0; } #login-modal .field-label, #forgot-password-modal .field-label, #reset-view .field-label { display: block; margin: 0 4px 6px; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.72); } #login-modal .field-hint, #forgot-password-modal .field-hint, #reset-view .field-hint { display: block; margin: 4px 4px 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); } #login-modal.lg-welcome input, #forgot-password-modal.lg-welcome input, #reset-view input { width: 100%; height: 52px; margin: 0; padding: 0 14px; border-radius: 15px !important; border: 2px solid #2A2B33 !important; background: #0F1014 !important; color: #fff !important; font: 700 16px var(--gt-font); box-shadow: none; box-sizing: border-box; } #login-modal input::placeholder, #forgot-password-modal input::placeholder, #reset-view input::placeholder { color: rgba(255, 255, 255, 0.42); } #login-modal input:focus, #forgot-password-modal input:focus, #reset-view input:focus { outline: none; border-color: #F5C518 !important; box-shadow: none; } #login-modal .lg-error, #forgot-password-modal .lg-error, #reset-view .lg-error { margin: 0; text-align: center; color: #FF7A85; font-weight: 700; font-size: 14px; } #forgot-password-modal .lg-ok, #reset-view .lg-ok { margin: 0; text-align: center; color: #5BE38A; font-weight: 700; font-size: 14px; } .lg-submit { width: 100%; min-height: 52px; border: 0; border-radius: 15px; cursor: pointer; font: 800 17px var(--gt-font); background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; box-shadow: 0 4px 0 #B38600; transition: transform 0.08s ease; } .lg-submit:active { transform: translateY(3px); } #login-modal .lg-links { margin: 4px 0 0; text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 15px; } #login-modal .lg-links a { color: rgba(255, 255, 255, 0.75); font-weight: 700; text-decoration: none; display: inline-block; padding: 10px 4px; } #login-modal .lg-gold, #forgot-password-modal .lg-gold, #reset-view .lg-gold { color: #FFE066 !important; font-weight: 800; text-decoration: none; } #login-modal .lg-foot, #forgot-password-modal .lg-foot, #reset-view .lg-foot { margin: 6px 0 0; text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 15px; } #login-modal .lg-foot a, #forgot-password-modal .lg-foot a, #reset-view .lg-foot a { display: inline-block; padding: 10px 4px; } #login-modal .lg-foot[hidden] { display: none; } /* The reset page: one column under the profile page's Home link. */ #reset-view { max-width: 480px; margin: 0 auto; padding: 0 16px 32px; color: #fff; font-family: var(--gt-font); font-size: 16px; line-height: 1.4; text-align: start; } #reset-view .lg-sub { margin-bottom: 18px; } @media (prefers-reduced-motion: reduce) { .lg-sso, .lg-submit { transition: none; } } /* ── Rules: the "How to play" sheet (the owner's pick "C", 2026-10-09) ────── #rules-modal on index + the two group menus, the Friends / Leaderboard sheet's look: a dark sheet from the bottom on a phone (a centred panel from 720 px), the game's picture, players, the rules as numbered steps, Play and Leaderboard at the bottom. main.js openRules / initRules. Own rs-* classes (not theme.css .modal-*); every rule starts with the id so page CSS on bare h2, p, button and a cannot reach in. */ html.rs-lock { overflow: hidden; } #rules-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.62); } #rules-modal[hidden] { display: none; } #rules-modal .rs-sheet { width: 100%; max-width: 560px; height: 90vh; max-height: calc(100% - 24px); box-sizing: border-box; display: flex; flex-direction: column; background: #121317; color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6); padding-bottom: env(safe-area-inset-bottom); font-family: var(--gt-font); font-size: 16px; line-height: 1.4; text-align: start; animation: rs-rise 0.26s cubic-bezier(.22, 1, .36, 1); } @keyframes rs-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } @media (min-width: 720px) { #rules-modal { align-items: center; padding: 24px; } #rules-modal .rs-sheet { height: auto; max-height: 84vh; min-height: 380px; border-radius: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #rules-modal .rs-grab { display: none; } } #rules-modal :focus-visible { outline: 3px solid #F5C518; outline-offset: 2px; } #rules-modal .rs-grab { width: 44px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); margin: 8px auto 0; flex: none; } #rules-modal .rs-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; flex: none; } #rules-modal .rs-thumb { width: 46px; height: 46px; flex: none; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.12); } #rules-modal .rs-thumb[hidden] { display: none; } #rules-modal .rs-head-t { flex: 1; min-width: 0; } #rules-modal .rs-title { margin: 0; padding: 0; font: 800 22px/1.2 var(--gt-font); color: #fff; text-align: start; text-shadow: none; letter-spacing: normal; } #rules-modal .rs-sub { display: block; color: rgba(255, 255, 255, 0.6); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rules-modal .rs-close { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center; background: #23242B; color: #fff; cursor: pointer; } #rules-modal .rs-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 6px; flex: none; } #rules-modal .rs-chips:empty { display: none; } #rules-modal .rs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px; background: #23242B; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.85); } #rules-modal .rs-chip-gold { background: rgba(245, 197, 24, 0.14); color: #FFE066; } #rules-modal .rs-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 18px; } #rules-modal .rs-desc { margin: 10px 0 0; font-weight: 800; font-size: 16px; color: #FFE066; } #rules-modal .rs-desc[hidden] { display: none; } #rules-modal .rs-label { margin: 16px 0 8px; font-weight: 800; color: rgba(255, 255, 255, 0.78); } #rules-modal .rs-steps { margin: 0; padding: 4px 14px; list-style: none; counter-reset: rs; border-radius: 22px; background: #1A1B21; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 5px 0 #050506; } #rules-modal .rs-steps li { counter-increment: rs; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 16.5px; line-height: 1.75; font-weight: 600; color: rgba(255, 255, 255, 0.88); } #rules-modal .rs-steps li:first-child { border-top: 0; } #rules-modal .rs-steps li::before { content: counter(rs); flex: none; width: 30px; height: 30px; margin-top: 2px; display: grid; place-items: center; border-radius: 10px; background: #23242B; color: #FFE066; font-weight: 800; font-size: 14px; line-height: 1; } #rules-modal .rs-foot { flex: none; display: flex; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); } #rules-modal .rs-btn { min-height: 52px; padding: 0 18px; border-radius: 16px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 17px/1 var(--gt-font); text-decoration: none; white-space: nowrap; transition: transform 0.08s ease; } #rules-modal .rs-btn:active { transform: translateY(3px); } #rules-modal .rs-btn[hidden] { display: none; } #rules-modal .rs-btn-gold { flex: 1; background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; box-shadow: 0 4px 0 #B38600; } #rules-modal .rs-btn-dark { background: #26272E; color: #E6E7EC; box-shadow: 0 4px 0 #000; } #rules-modal .rs-btn-gold[hidden] + .rs-btn-dark { flex: 1; } @media (prefers-reduced-motion: reduce) { #rules-modal .rs-sheet { animation: none; } #rules-modal .rs-btn { transition: none; } }