@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

    :root {
      color-scheme: dark;
      --bg: #0c0b14;
      --panel: #151421;
      --panel-soft: #1b1a29;
      --text: #f6f3ff;
      --muted: #9693a9;
      --purple: #9c76ff;
      --pink: #ff70bb;
      --cyan: #71e5ed;
      --line: rgba(255, 255, 255, .09);
      font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--text); background: radial-gradient(ellipse at 50% -20%, #30234d 0, transparent 42%), var(--bg); }
    button, input { font: inherit; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    .shell { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }

    .topbar { position: sticky; z-index: 10; top: 0; height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; background: #0c0b14ef; backdrop-filter: blur(18px); }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: 1.2px; }
    .logo-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 0 25px #9c76ff4d; }
    .logo-mark svg { width: 18px; height: 18px; }
    .nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; color: var(--muted); font-size: 13px; }
    .nav-links a:hover, .nav-links a.active { color: var(--text); }
    .nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 25px; }
    .search { display: flex; align-items: center; gap: 9px; width: 225px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: #ffffff08; color: var(--muted); }
    .search svg { width: 17px; flex: none; }
    .search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
    .search input::placeholder { color: #777489; }
    .avatar { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; overflow: hidden; padding: 0; border: 1px solid #ffffff35; border-radius: 50%; background: linear-gradient(145deg, #464067, #251e37); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
    .avatar:hover, .avatar:focus-visible { border-color: #d2baff; box-shadow: 0 0 0 3px #a477ff35, 0 0 18px #a477ff66; transform: translateY(-1px); outline: none; }
    .avatar[data-color="violet"] { background: linear-gradient(145deg, #8d68e8, #49318a); }
    .avatar[data-color="cyan"] { background: linear-gradient(145deg, #44b9c7, #23647c); }
    .avatar[data-color="rose"] { background: linear-gradient(145deg, #ed6eaa, #873b76); }
    .avatar[data-color="amber"] { background: linear-gradient(145deg, #efb64e, #8f552a); }
    .avatar-initials { display: grid; width: 100%; height: 100%; place-items: center; }
    .avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; }
    .avatar:disabled { cursor: wait; opacity: .75; }
    .profile-control { position: relative; flex: 0 0 auto; }
    .profile-popover { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; display: grid; width: min(300px, calc(100vw - 30px)); gap: 13px; padding: 15px; border: 1px solid #ffffff25; border-radius: 14px; background: #191724; box-shadow: 0 16px 40px #000a; }
    .profile-popover[hidden] { display: none; }
    .profile-popover::before { position: absolute; top: -7px; right: 14px; width: 12px; height: 12px; border-top: 1px solid #ffffff25; border-left: 1px solid #ffffff25; background: #191724; content: ''; transform: rotate(45deg); }
    .profile-popover-identity { position: relative; display: flex; min-width: 0; align-items: center; gap: 11px; }
    .profile-popover-avatar { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 50%; background: linear-gradient(145deg, #464067, #251e37); color: white; font-size: 15px; font-weight: 700; }
    .profile-popover-avatar[data-color="cyan"] { background: linear-gradient(145deg, #44b9c7, #23647c); }
    .profile-popover-avatar[data-color="rose"] { background: linear-gradient(145deg, #ed6eaa, #873b76); }
    .profile-popover-avatar[data-color="amber"] { background: linear-gradient(145deg, #efb64e, #8f552a); }
    .profile-popover-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .profile-popover-identity > div { display: grid; min-width: 0; gap: 4px; }
    .profile-popover-identity strong, .profile-popover-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .profile-popover-identity strong { color: var(--text); font-size: 12px; }
    .profile-popover-identity span { color: var(--muted); font-size: 10px; }
    .profile-popover-action { display: flex; min-height: 34px; align-items: center; justify-content: center; border: 1px solid #a477ff50; border-radius: 8px; background: #a477ff18; color: #dfd2ff; font-size: 11px; font-weight: 700; }
    .profile-popover-action:hover { border-color: #c5aaff; background: #a477ff30; color: white; }

    .hero { position: relative; min-height: 430px; margin-top: 36px; overflow: hidden; display: flex; align-items: center; border: 1px solid #ffffff16; border-radius: 22px; background: radial-gradient(ellipse at 78% 48%, #8652d14a 0, transparent 35%), linear-gradient(115deg, #211c35 0%, #171522 62%, #211a30 100%); box-shadow: 0 24px 70px #0003; }
    .hero::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(#ffffff0c 1px, transparent 1px), linear-gradient(90deg, #ffffff0c 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, black); }
    .hero-copy { position: relative; z-index: 2; width: 57%; padding: 54px 0 54px 62px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #d9c6ff; font-size: 11px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
    h1 { margin: 17px 0 13px; font-family: 'Noto Sans KR', sans-serif; font-size: clamp(42px, 6vw, 65px); font-weight: 700; line-height: 1.2; letter-spacing: -.045em; }
    h1 span { color: #bd9cff; }
    .hero-title { max-width: 620px; font-family: 'Noto Sans KR', sans-serif; font-weight: 650; letter-spacing: -.055em; word-break: keep-all; }
    .hero-copy .hero-description { display: grid; max-width: 460px; gap: 3px; margin: 0; color: #d0ccda; font-size: 14px; font-weight: 400; line-height: 1.85; letter-spacing: -.015em; }
    .hero-description span { display: block; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 24px; }
    .button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(100deg, #a477ff, #e16dc6); color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s, filter .2s; }
    :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .button:hover { transform: translateY(-2px); filter: brightness(1.1); }
    .button.secondary { border-color: #ffffff24; background: #ffffff0a; color: #eee9fa; }
    .button svg { width: 16px; height: 16px; }
    .hero-art { position: absolute; z-index: 1; top: 0; right: 0; width: 53%; height: 100%; display: grid; place-items: center; }
    .hero-orb { position: relative; width: 267px; height: 267px; display: grid; place-items: center; border: 1px solid #e0b5ff5c; border-radius: 50%; background: radial-gradient(circle at 37% 29%, #ffc2e987, #b067d568 34%, #492e8c91 68%, #19142a 72%); box-shadow: 0 0 75px #a355e959, inset 0 0 40px #f9b7ff40; transform: rotate(-14deg); }
    .hero-orb::before, .hero-orb::after { content: ''; position: absolute; inset: -24px; border: 1px solid #d1a6fd48; border-radius: 50%; transform: rotate(38deg) scaleY(.38); }
    .hero-orb::after { inset: -48px -14px; transform: rotate(-30deg) scaleY(.43); border-color: #8f75ee52; }
    .orb-icon { position: relative; z-index: 2; font-size: 116px; filter: drop-shadow(0 10px 18px #231631); transform: rotate(14deg); }
    .spark { position: absolute; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
    .spark.one { top: 18%; left: 14%; font-size: 22px; }
    .spark.two { right: 9%; bottom: 23%; color: var(--pink); font-size: 29px; }

    .section { padding-top: 72px; scroll-margin-top: 88px; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
    .games-header { min-width: 0; margin-bottom: 15px; }
    .games-header-row { display: flex; min-width: 0; align-items: baseline; gap: 15px; }
    .games-header-row h2 { flex: 0 0 auto; font-size: 24px; }
    .games-header-note { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .games-header-sub { margin: 7px 0 0; color: #777386; font-size: 10px; line-height: 1.6; }
    .section-kicker { margin: 0 0 5px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
    h2 { margin: 0; font-size: 22px; letter-spacing: -.4px; }
    .section-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
    .text-link { display: inline-flex; align-items: center; gap: 6px; color: #c8b5ff; font-size: 12px; white-space: nowrap; }
    .text-link:hover { color: white; }
    .game-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
    .filters { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; }
    .filters::-webkit-scrollbar { display: none; }
    .filter { display: inline-flex; flex: none; align-items: center; min-height: 33px; padding: 0 13px; border: 1px solid #ffffff20; border-radius: 999px; background: #171522; color: #d8d3e2; font-size: 11px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
    .filter:hover:not(.active) { border-color: #c0a5ff; background: #353047; color: #fff; }
    .filter.active, .filter.active:hover { border-color: #e1d3ff; background: #e4d8ff; color: #211a30; box-shadow: 0 3px 14px #b99aff35; font-weight: 700; }
    .filter:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .steam-filter-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
    .game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .game-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(180deg, #1b1a29, #14131f); transition: transform .22s, border-color .22s, box-shadow .22s; }
    .game-card { position: relative; }
    .game-card:hover { transform: translateY(-5px); border-color: #c09aff; box-shadow: 0 0 0 1px #b892ff99, 0 0 25px #9c76ff85, 0 17px 38px #0007; }
    .game-cover { position: relative; height: 170px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background-image: linear-gradient(180deg, #08071122 0%, #08071100 42%, #080711a8 100%); background-position: center; }
    .game-cover::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .48; background-image: linear-gradient(135deg, #ffffff15 1px, transparent 1px), linear-gradient(45deg, #ffffff11 1px, transparent 1px); background-size: 17px 17px, 24px 24px; }
    .cover-emoji { font-size: 62px; filter: drop-shadow(0 9px 13px #0008); transition: transform .3s; }
    .game-card:hover .cover-emoji { transform: scale(1.12) rotate(-5deg); }
    .game-cover[style*="--game-image"] { background-color: #151421; background-image: linear-gradient(180deg, #08071122 0%, #08071100 42%, #080711a8 100%); }
    .game-cover[style*="--game-image"]::after { position: absolute; z-index: -1; inset: 0; background-image: var(--game-image); background-position: var(--game-image-position, center); background-size: var(--game-image-fit, cover); content: ""; transition: transform .32s ease, filter .32s ease; }
    .game-card:hover .game-cover[style*="--game-image"]::after { transform: scale(1.07); filter: brightness(1.14) saturate(1.08); }
    .game-cover[style*="--game-image"]::before { opacity: 0; }
    .game-cover[style*="--game-image"] .cover-label { z-index: 1; }
    .cover-valorant { background: radial-gradient(circle at 55% 35%, #ff9779, #bd433e 48%, #371e36); }
    .cover-hades { background: radial-gradient(circle at 50% 40%, #fbb16b, #c64b3d 45%, #33203b); }
    .cover-stardew { background: radial-gradient(circle at 50% 40%, #8bc96d, #4a997b 48%, #234354); }
    .cover-elden { background: radial-gradient(circle at 50% 38%, #f2ce83, #857246 45%, #292837); }
    .cover-zelda { background: radial-gradient(circle at 50% 38%, #a9dc81, #4b9c82 45%, #253858); }
    .cover-cyber { background: radial-gradient(circle at 50% 38%, #fbdf6b, #d08d31 45%, #382640); }
    .cover-persona { background: radial-gradient(circle at 50% 38%, #ff7baf, #ba3a75 45%, #282242); }
    .cover-ori { background: radial-gradient(circle at 50% 38%, #b7f4ef, #5c99c9 45%, #26335f); }
    .cover-label { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border: 1px solid #ffffff2b; border-radius: 6px; background: #11101cb8; color: #fff; font-size: 9px; font-weight: 700; backdrop-filter: blur(8px); }
    .favorite { position: absolute; z-index: 4; top: 9px; right: 9px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #ffffff55; border-radius: 50%; background: #11101cdb; color: #f5f1fa; cursor: pointer; font-size: 16px; box-shadow: 0 2px 9px #0007; transition: transform .18s, border-color .18s, background-color .18s, color .18s; }
    .favorite:hover { transform: scale(1.12); border-color: #ff4658; color: #ff4658; }
    .favorite.saved { border-color: #ff3b4f; background: #ff263b30; color: #ff4658; }
    .favorite.saved:hover { border-color: #ff172f; background: #ff263b48; color: #ff172f; }
    .game-info { padding: 14px 15px 16px; }
    .game-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .game-title { overflow: hidden; margin: 0; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .game-title a { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
    .game-title a:hover { color: #d6c3ff; }
    .official-link-icon { color: var(--muted); font-size: 12px; opacity: .7; transition: transform .2s, color .2s; }
    .game-title a:hover .official-link-icon { color: var(--cyan); transform: translate(2px, -2px); }
    .review-score { flex: none; color: #f5d27c; font-size: 10px; font-weight: 700; }
    .review-score[title*="자료 없음"] { color: var(--muted); font-weight: 500; }
    .detail-rating-source { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .game-meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; color: var(--muted); font-size: 10px; }
    .game-meta span:last-child { color: #a9a4b8; }
    .empty-state { grid-column: 1 / -1; padding: 35px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: 13px; }

    .lower-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; padding-top: 66px; padding-bottom: 76px; scroll-margin-top: 88px; }
    .panel { min-height: 190px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
    .community-panel { position: relative; padding: 22px 24px; background: radial-gradient(ellipse at 95% 0, #8848bb2b, transparent 42%), var(--panel); }
    .community-panel h3, .daily-panel h3 { margin: 0; font-size: 16px; }
    .community-panel p, .daily-panel p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .online-row { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #c8c3d5; font-size: 10px; }
    .online-dot { width: 7px; height: 7px; border-radius: 50%; background: #65e5a1; box-shadow: 0 0 10px #65e5a1; }
    .daily-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 28px; background: radial-gradient(ellipse at 100% 100%, #3979902b, transparent 55%), var(--panel); transition: background-color .22s, border-color .22s, box-shadow .22s; }
    .daily-panel:hover, .about-panel:hover { border-color: #b58cff; background-color: #28233a; box-shadow: 0 0 0 1px #a477ff38, 0 0 28px #9c76ff45; }
    .about-panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 26px 28px; background: radial-gradient(ellipse at 100% 0, #8848bb20, transparent 48%), var(--panel); }
    .about-panel h3 { margin: 0; font-size: 16px; }
    .about-panel p { max-width: 420px; margin: 9px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }
    .about-link { color: #d7c4ff; font-size: 11px; font-weight: 700; }
    .about-link span { margin-left: 3px; }
    .daily-icon { flex: none; font-size: 50px; filter: drop-shadow(0 7px 12px #0007); }
    .daily-panel .button { min-height: 52px; margin-top: 17px; padding: 0 24px; font-size: 14px; box-shadow: 0 7px 22px #a477ff40; }
    .daily-panel .button:hover { box-shadow: 0 9px 30px #a477ff80; transform: translateY(-2px); }
    .game-list-actions { display: flex; align-items: center; gap: 16px; }
    .game-list-actions { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: 8px; }
    .sort-control { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .sort-note { margin: 8px 0 0; color: #777386; font-size: 10px; line-height: 1.6; }
    .sort-control select { width: clamp(105px, 15vw, 180px); min-width: 80px; min-height: 36px; flex: 1 1 180px; padding: 0 21px 0 8px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
    .sort-control select:focus-visible { border-color: var(--purple); }
    .sort-direction { display: grid; width: 34px; height: 36px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #ded4f2; font-size: 16px; cursor: pointer; }
    .sort-direction:hover { border-color: #aa8aff; background: #a477ff20; color: #fff; }
    .sort-direction { display: grid; width: 34px; height: 36px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #ded4f2; font-size: 16px; cursor: pointer; }
    .sort-direction:hover { border-color: #aa8aff; background: #a477ff20; color: white; }
    .sort-direction:disabled { opacity: .4; cursor: not-allowed; }
    .toast { position: fixed; z-index: 5; right: 24px; bottom: 24px; max-width: calc(100% - 48px); padding: 12px 17px; border: 1px solid #ffffff1c; border-radius: 11px; background: #242033; box-shadow: 0 8px 35px #0007; color: #f6f3ff; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .25s; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .profile-dialog { width: min(440px, calc(100% - 32px)); padding: 25px; border: 1px solid #ffffff20; border-radius: 20px; background: #151421; color: var(--text); box-shadow: 0 24px 80px #000b; }
    .profile-dialog::backdrop { background: #07060dcc; backdrop-filter: blur(7px); }
    .profile-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
    .profile-dialog-header h2 { margin: 6px 0 0; font-size: 21px; }
    .profile-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #ffffff08; color: var(--muted); font-size: 23px; cursor: pointer; }
    .profile-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #ffffff05; }
    .profile-avatar { display: grid; width: 49px; height: 49px; flex: none; place-items: center; border: 1px solid #ffffff22; border-radius: 15px; background: linear-gradient(145deg, #464067, #251e37); font-size: 25px; }
    .profile-identity { display: grid; min-width: 0; gap: 5px; }
    .profile-identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .profile-identity span, .profile-hint { color: var(--muted); font-size: 11px; }
    .profile-edit { margin-left: auto; padding: 7px 10px; border: 1px solid #a77bff55; border-radius: 9px; background: #a77bff16; color: #dccbff; font-size: 10px; cursor: pointer; }
    .profile-level-row { display: flex; justify-content: space-between; margin: 22px 0 9px; color: #d8d1e8; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
    .profile-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #ffffff12; }
    .profile-progress span { display: block; width: 64%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink)); }
    .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
    .profile-stats div { display: grid; gap: 5px; padding: 13px 8px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff04; text-align: center; }
    .profile-stats strong { color: #e4d7ff; font-size: 19px; }
    .profile-stats span { color: var(--muted); font-size: 10px; }
    .profile-hint { margin: 17px 0 0; text-align: center; }
    .roulette-dialog { position: relative; width: min(460px, calc(100% - 32px)); overflow: visible; padding: 32px 30px 28px; border: 1px solid #ffffff20; border-radius: 22px; background: radial-gradient(ellipse at 50% 0, #38244d, #171521 62%); color: var(--text); text-align: center; box-shadow: 0 28px 100px #000b; }
    .roulette-dialog[open] { animation: machine-pop-in .28s ease-out both; }
    .roulette-dialog::backdrop { background: #07060de0; backdrop-filter: blur(8px); }
    @keyframes machine-pop-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .roulette-close { position: absolute; top: 13px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #ffffff09; color: #c7c1d3; font-size: 23px; line-height: 1; cursor: pointer; }
    .roulette-close:hover { background: #ffffff16; color: white; }
    .roulette-title { margin: 6px 0 0; font-size: 24px; }
    .roulette-subtitle { margin: 8px 0 23px; color: var(--muted); font-size: 12px; }
    .slot-machine { position: relative; width: min(300px, 100%); margin: 0 auto; padding: 14px 17px 12px; border: 1px solid #f0c97c88; border-radius: 20px; background: linear-gradient(145deg, #5b3472, #312044 55%, #21192e); box-shadow: inset 0 2px 0 #ffffff35, 0 13px 28px #0006, 0 0 24px #d58cff20; }
    .slot-machine-top, .slot-machine-bottom { display: flex; align-items: center; justify-content: space-between; color: #ffdf9c; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
    .slot-light { width: 7px; height: 7px; border-radius: 50%; background: #ffdc78; box-shadow: 0 0 10px #ffd76a; animation: slot-blink 1s infinite alternate; }
    .slot-light:last-child { animation-delay: .5s; }
    @keyframes slot-blink { to { opacity: .35; box-shadow: 0 0 3px #ffd76a; } }
    .slot-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0 11px; padding: 9px; border: 1px solid #0c0b14; border-radius: 13px; background: #0b0a11; box-shadow: inset 0 4px 12px #0009; }
    .slot-reel { display: grid; min-width: 0; height: 82px; place-items: center; overflow: hidden; border: 1px solid #ded0e877; border-radius: 9px; background: linear-gradient(180deg, #f4efff, #cfc2e8); color: #231a30; font-size: 34px; box-shadow: inset 0 2px 7px #fff9, 0 3px 6px #0005; }
    .slot-reel span { display: block; max-width: 100%; overflow: hidden; padding: 0 3px; text-overflow: ellipsis; white-space: nowrap; }
    .slot-machine-bottom { justify-content: center; gap: 10px; color: #efc86f; font-size: 8px; }
    .slot-lever-area { position: absolute; top: 135px; right: 13px; display: flex; width: 22px; height: 68px; flex-direction: column; align-items: center; pointer-events: none; }
    .slot-lever-ball { z-index: 1; color: #ff779f; font-size: 18px; text-shadow: 0 0 10px #ff5f94; }
    .slot-lever-stem { width: 5px; height: 42px; margin-top: -2px; border-radius: 5px; background: linear-gradient(90deg, #d1c4e2, #fff, #877998); transform-origin: top; }
    .slot-lever-base { width: 15px; height: 8px; margin-top: -1px; border-radius: 50%; background: #dfb95d; }
    .slot-machine.spinning .slot-lever-stem { animation: lever-pull .35s ease-in-out 2 alternate; }
    @keyframes lever-pull { to { transform: rotate(22deg); } }
    .slot-machine.spinning .slot-reel span { animation: reel-blur .12s linear infinite; filter: blur(1px); }
    @keyframes reel-blur { 50% { transform: translateY(7px); opacity: .55; } }
    .roulette-result { min-height: 25px; margin: 20px 0 13px; color: #d5cde3; font-size: 13px; font-weight: 700; }
    .roulette-result.winner { color: #ffe08b; font-size: 16px; text-shadow: 0 0 18px #ffd65e55; }
    .roulette-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
    .roulette-game-link[hidden] { display: none; }
    @media (max-width: 480px) {
      .roulette-dialog { padding: 28px 18px 22px; }
      .slot-machine { width: min(280px, calc(100% - 18px)); }
      .slot-lever-area { right: 7px; }
      .slot-reel { height: 72px; font-size: 29px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .roulette-dialog[open], .slot-light, .slot-machine.spinning .slot-lever-stem, .slot-machine.spinning .slot-reel span { animation: none !important; }
      .slot-machine.spinning .slot-reel span { filter: none; }
    }
    footer { border-top: 1px solid var(--line); background: #09081080; }
    footer .shell { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; color: #858196; font-size: 10px; }
    .footer-logo { color: #e6def5; font-size: 13px; font-weight: 800; letter-spacing: 1px; }

    @media (max-width: 850px) {
      .nav-links { gap: 18px; }
      .search { width: 165px; }
      .hero { min-height: 390px; }
      .hero-copy { width: 61%; padding-left: 35px; }
      .hero-art { width: 46%; }
      .hero-orb { width: 210px; height: 210px; }
      .orb-icon { font-size: 92px; }
      .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
      .game-toolbar { gap: 6px; }
      .game-list-actions { gap: 5px; }
      .sort-label { display: none; }
      .sort-control select { width: clamp(95px, 20vw, 150px); min-width: 76px; flex: 1 1 100px; font-size: 11px; }
      .games-header-row { gap: 10px; }
      .games-header-row h2 { font-size: 21px; }
      .games-header-note { font-size: 11px; }
      .game-toolbar { gap: 7px; }
      .game-list-actions { gap: 5px; }
      .sort-label { display: none; }
      .sort-control select { width: clamp(100px, 19vw, 145px); min-width: 78px; flex: 0 1 145px; font-size: 11px; }
    }
    @media (max-width: 580px) {
      .shell { width: min(100% - 32px, 440px); }
      .topbar { height: 64px; }
      .nav { gap: 8px; }
      .logo { gap: 7px; font-size: 17px; }
      .logo-mark { width: 30px; height: 30px; }
      .nav-links { display: none; }
      .nav-actions { gap: 7px; }
      .search { width: min(39vw, 150px); padding: 8px 9px; }
      .nav-actions { margin-left: auto; }
      .search { width: min(43vw, 180px); }
      .hero { min-height: 450px; align-items: flex-start; margin-top: 20px; border-radius: 18px; }
      .hero-copy { width: 100%; padding: 30px 24px; }
      .hero-copy .hero-description { max-width: 315px; font-size: 12px; line-height: 1.75; }
      h1 { max-width: 360px; margin-top: 14px; font-size: clamp(40px, 11vw, 54px); }
      .hero-art { top: auto; right: -12px; bottom: -28px; width: 100%; height: 215px; opacity: .8; }
      .hero-orb { width: 160px; height: 160px; margin-left: 100px; }
      .hero-orb::before { inset: -16px; }
      .hero-orb::after { inset: -31px -8px; }
      .orb-icon { font-size: 72px; }
      .spark.one { left: 23%; }
      .games-header-row { gap: 7px; }
      .games-header-row h2 { font-size: 19px; }
      .games-header-note { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
      .game-toolbar { width: 100%; gap: 7px; }
      .filters { flex: 1 1 0; gap: 5px; }
      .filter { padding: 0 9px; font-size: 9px; }
      .steam-filter-icon { width: 12px; height: 12px; margin-right: 3px; }
      .game-list-actions { min-width: 0; flex: 0 1 auto; gap: 4px; }
      .sort-control { gap: 3px; }
      .sort-control select { width: clamp(84px, 25vw, 120px); min-width: 72px; flex: 1 1 84px; padding: 0 15px 0 6px; font-size: 9px; }
      .sort-direction { width: 28px; height: 32px; flex-basis: 28px; }
      .game-list-actions .text-link { font-size: 9px; }
      .section { padding-top: 54px; }
      .section-heading { align-items: center; }
      .game-toolbar { width: 100%; align-items: center; gap: 5px; }
      .filters { min-width: 0; flex: 1 1 0; gap: 4px; }
      .filter { padding: 7px 8px; font-size: 9px; }
      .steam-filter-icon { width: 12px; height: 12px; margin-right: 2px; }
      .game-list-actions { min-width: 0; flex: 0 1 auto; align-items: center; gap: 4px; }
      .sort-control { gap: 3px; font-size: 9px; }
      .sort-control select { width: clamp(80px, 25vw, 115px); min-width: 68px; flex: 1 1 80px; padding: 0 15px 0 5px; font-size: 9px; }
      .sort-direction { width: 28px; height: 32px; flex-basis: 28px; }
      .game-list-actions .text-link { font-size: 8px; }
      h2 { font-size: 19px; }
      .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
      .game-card { border-radius: 9px; }
      .favorite { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 11px; }
      .game-cover { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
      .cover-label { top: 5px; left: 5px; max-width: calc(100% - 34px); overflow: hidden; padding: 3px 4px; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
      .cover-emoji { font-size: clamp(20px, 8vw, 42px); }
      .game-info { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 6px 5px 7px; }
      .game-title-row { align-items: flex-start; flex-direction: column; gap: 3px; }
      .game-title { max-width: 100%; font-size: clamp(9px, 2.5vw, 12px); }
      .review-score { font-size: clamp(7px, 1.8vw, 9px); }
      .game-meta { display: block; margin-top: 4px; font-size: clamp(7px, 1.8vw, 9px); line-height: 1.35; }
      .game-meta span:last-child { display: none; }
      .lower-grid { grid-template-columns: 1fr; gap: 13px; padding-top: 48px; padding-bottom: 50px; }
      .panel { min-height: 150px; }
      .daily-panel, .about-panel { padding: 21px; }
      footer .shell { min-height: 92px; flex-wrap: wrap; justify-content: center; padding: 18px 0; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }