:root { --bg: #f5f5f7; --text: #111111; --sub: #6e6e73; --primary: #6c5ce7; --shadow: 0 4px 18px rgba(0,0,0,.06); --game-viewport-width: 100vw; --game-viewport-height: 100vh; --game-viewport-left: 0px; --game-viewport-top: 0px; }
        * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
        body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; background: var(--bg); margin: 0; color: var(--text); }
        .nav { position: sticky; top: 0; z-index: 999; padding-top: env(safe-area-inset-top, 0px); background: rgba(245,245,247,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.04); width: 100%; }
        .nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 5%; display: flex; align-items: center; }
        .logo { font-weight: 900; color: #000; text-decoration: none; font-size: 28px; letter-spacing: -2px; }
        .main-container { max-width: 1200px; margin: 20px auto; padding: 0 5%; }
        #game-area { position: relative; width: 100%; background: #000; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; transition: aspect-ratio 0.3s ease, max-width 0.3s ease; }
        #game-area.is-resetting { transition: none !important; }
        #game-area.playing-portrait { aspect-ratio: 9 / 16; max-width: 500px; margin: 0 auto; }
        #game-area:fullscreen, #game-area:-webkit-full-screen { position: fixed; inset: -1px 0 0; width: 100vw; height: calc(100vh + 1px); height: calc(100dvh + 1px); max-width: none; margin: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; background: #000; }
        #game-area::backdrop { background: #000; }
        html.game-overlay-active { overflow: hidden; background: #000; }
        body.game-overlay-active { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; background: #000; }
        body.game-overlay-active #game-area { position: fixed; top: var(--game-viewport-top); left: var(--game-viewport-left); z-index: 99998; width: var(--game-viewport-width); height: var(--game-viewport-height); max-width: none; margin: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; background: #000; }
        body.game-overlay-active #game-area.forced-landscape { width: var(--game-viewport-height); height: var(--game-viewport-width); transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); transform-origin: top left; -webkit-transform-origin: top left; }
        body.game-overlay-active #game-area.forced-portrait { width: var(--game-viewport-height); height: var(--game-viewport-width); transform: rotate(-90deg) translateX(-100%); -webkit-transform: rotate(-90deg) translateX(-100%); transform-origin: top left; -webkit-transform-origin: top left; }
        #splash-layer { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
        #splash-layer::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(25px) saturate(180%); }
        #splash-content { position: relative; z-index: 6; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 25px; }
        #game-icon { width: 110px; height: 110px; border-radius: 24px; border: 4px solid #fff; object-fit: cover; box-shadow: var(--shadow); }
        .play-btn { background: var(--primary); color: #fff; border: none; padding: 14px 50px; font-size: 18px; font-weight: 800; border-radius: 50px; cursor: pointer; transition: 0.3s; }
        #game-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: none; background: #000; }
        #btn-exit { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: calc(env(safe-area-inset-left, 0px) + 14px); z-index: 99999; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(20, 20, 24, 0.64); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: rgba(255,255,255,0.94); display: none; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 5px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1); cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
        #btn-exit svg { width: 19px; height: 19px; pointer-events: none; }
        #btn-exit:hover { background: rgba(30, 30, 34, 0.88); border-color: rgba(255,255,255,0.32); box-shadow: 0 7px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14); transform: translateY(-1px); }
        #btn-exit:active { transform: scale(0.94); }
        #btn-exit:focus-visible { outline: 3px solid rgba(255,255,255,0.9); outline-offset: 3px; }
        .info-card { margin-top: 32px; }
        .title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 16px; }
        .title-row h1 { font-size: 32px; font-weight: 900; margin: 0; line-height: 1.1; letter-spacing: -1.5px; }
        .title-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .fav-heart-btn, .share-btn { width: 44px; height: 44px; background: #e9e9ed; border: none; border-radius: 14px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none; color: #73737a; -webkit-tap-highlight-color: transparent; transition: transform .2s ease, background .2s ease, color .2s ease; }
        .fav-heart-btn:active, .share-btn:active { transform: scale(.92); }
        .fav-heart-btn svg { width: 32px; height: 32px; fill: #b5b5bb; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .fav-heart-btn.active svg { fill: #ff375f; transform: scale(1.15); filter: drop-shadow(0 4px 8px rgba(255, 55, 95, 0.2)); }
        .share-btn svg { width: 21px; height: 21px; }
        .share-btn:hover { background: #dedee4; color: #111; }
        .share-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 100000; padding: 11px 16px; border-radius: 999px; background: rgba(20,20,24,.88); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: .25s ease; pointer-events: none; }
        .share-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
        .info-card .tags { margin-bottom: 15px; }
        .info-card .tag { display: inline-block; padding: 5px 12px; background: #e9e9ed; border-radius: 8px; font-size: 12px; color: #4a34b2; font-weight: 600; margin-right: 8px; text-decoration: none; }
        .info-card p { color: var(--sub); line-height: 1.6; margin-top: 10px; font-size: 15px; }
        .section-title { font-size: 28px; font-weight: 900; letter-spacing: -2px; margin: 50px 0 20px 0; }
        .more-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-bottom: 80px; }
        .mini-card { text-decoration: none; color: #000; cursor: pointer; }
        .mini-thumb-wrapper { position: relative; aspect-ratio: 1/1; border-radius: 28px; overflow: hidden; background: #e5e5e5; }
        .mini-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
        .mini-info { padding: 10px 4px 0; }
        .mini-name { font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .mini-meta { margin-top: 4px; color: var(--sub); font-size: 12px; }
        @media (max-width: 1024px) {
          .more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
          .mini-card:nth-child(n+9) { display: none; }
        }
        @media (max-width: 768px) {
          .nav-inner { padding: 14px 5%; }
          #game-area { aspect-ratio: 4 / 3; }
          #game-area.playing-portrait { aspect-ratio: 9 / 16; }
          .logo { font-size: 24px; }
          .section-title { font-size: 24px; }
          .more-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
          .mini-card:nth-child(n+7) { display: none; }
          .title-row h1 { font-size: 24px; }
          .mini-thumb-wrapper { border-radius: 22px; }
          .mini-name { font-size: 12px; }
          .mini-meta { font-size: 11px; }
        }