:root{color-scheme:dark;--page:#080f1c;--surface:#111c2d;--line:#29394f;--text:#f0f5fc;--muted:#b0bdd0;--green:#6de5ab;--gold:#f4cf70;font-family:Arial,system-ui,sans-serif;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);background-image:linear-gradient(30deg,#a5c1ea05 12%,transparent 12.5%,transparent 87%,#a5c1ea05 87.5%),linear-gradient(150deg,#a5c1ea05 12%,transparent 12.5%,transparent 87%,#a5c1ea05 87.5%);background-size:28px 48px}button,input,select{font:inherit}button,select,summary{cursor:pointer}button,input,select{-webkit-tap-highlight-color:transparent}button,a{color:inherit}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.sr-only,.copy-name>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:12px;z-index:30;background:var(--green);color:#071c14;padding:12px}.skip-link:focus{top:8px}.site-header{background:#0c1422;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}.header-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;background:#1b3e31;border:1px solid #68dca977;border-radius:8px;width:31px;height:31px;color:var(--green);font-size:25px}.brand-light{color:var(--gold);font-weight:600}.brand small{display:none}.connection{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.connection i{width:6px;height:6px;border-radius:50%;background:var(--muted)}.connection.online{color:var(--green)}.connection.online i{background:var(--green)}main{max-width:1200px;margin:auto;padding:8px 12px 0}.intro{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.intro h1{margin:0}.controls{padding:0}.provider-menu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding-bottom:7px}.provider-option{min-width:0;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 2px;background:transparent;border:1px solid transparent;border-radius:10px;color:#e3ebf7}.provider-option[aria-pressed=true]{background:#26354b;border-color:var(--gold);color:#ffe2a1}.provider-mark{display:grid;place-items:center;width:43px;height:29px;color:var(--green);font-size:25px}.provider-mark img{width:100%;height:100%;object-fit:contain;display:block}.provider-name{font-size:10px;font-weight:600;text-align:center}.provider-count{display:none}.search-field{display:flex;align-items:center;gap:6px;padding-left:9px;background:#1a2638;border:1px solid #394b63;border-radius:6px}.search-field:focus-within{border-color:var(--gold)}.search-field>span{font-size:22px;color:#aabbd1}.search-field input{width:100%;min-width:0;height:44px;background:transparent;color:#fff;border:0;outline:0;font-size:16px}.search-field input::placeholder{color:#afbdd1}.search-field input::-webkit-search-cancel-button{display:none}.clear-search{width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--muted);font-size:24px}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:5px}.quick-filters{display:flex;gap:3px}.quick-filters button{min-height:44px;padding:0 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#c2cee0;font-size:12px;white-space:nowrap}.quick-filters button[aria-pressed=true]{background:#25384d;border-color:#4a6380;color:#fff}.sort-control{flex:none}.sort-control select{width:120px;min-height:44px;padding:0 5px;background:#18263b;border:1px solid #3e536e;border-radius:6px;font-size:12px;color:#e4edf9}.results-header{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:30px;margin:2px 0 5px}.results-header>p{margin:0;font-size:10px;color:var(--muted)}.results-header strong{color:var(--text)}.reading-guide{position:relative;flex:none;font-size:10px;color:var(--muted)}.reading-guide summary{padding:9px 0 9px 7px;min-height:32px;cursor:pointer}.reading-guide>div{position:absolute;right:0;top:100%;z-index:15;width:min(320px,calc(100vw - 24px));padding:15px;border:1px solid #4c5f79;border-radius:10px;background:#18263b;box-shadow:0 12px 30px #0008;font-size:13px;line-height:1.5;color:#e0e8f5}.reading-guide p{margin:8px 0 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card{min-width:0;overflow:hidden;background:#0c1525a6;border:1px solid #33445c;border-radius:5px}.card.hot{border-color:#9f8956}.artwork{position:relative;aspect-ratio:3/2;background:#17263c;overflow:hidden}.artwork img{width:100%;height:100%;display:block;object-fit:cover}.provider{position:absolute;left:4px;bottom:4px;padding:2px 4px;background:#06101de0;color:#fff;border-radius:3px;font-size:8px;line-height:1}.hot-badge{position:absolute;top:4px;left:4px;background:#f5ce70;color:#251900;font-size:8px;padding:3px 5px;font-weight:700;border-radius:3px}.image-fallback{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:10px}.image-fallback>span:first-child{font-size:28px}.card-content{padding:6px}.metrics{display:grid;gap:4px}.meter{position:relative;isolation:isolate;min-width:0;min-height:19px;background:#e4eaf2;color:#061320;overflow:hidden;border-radius:2px;--fill:#68b4e2}.meter.high{--fill:#58d596}.meter.low{--fill:#99b5d0}.meter.unknown{--fill:#aebbc9}.meter-track{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}.meter-fill{display:block;height:100%;width:0;background:var(--fill);background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,#ffffff12 6px,#ffffff12 11px);transition:width .45s ease}.meter-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2px;min-height:19px;padding:2px 4px;line-height:1.15;font-size:11px;font-weight:600}.meter-label strong{font-size:11px;font-variant-numeric:tabular-nums;font-weight:750;white-space:nowrap}.meter-label small{font-size:inherit}.minimum .meter-label:before,.maximum .meter-label:before{content:"";width:2px;align-self:stretch;margin-left:-4px;margin-right:0;flex:none}.minimum .meter-label:before{background:#087184}.maximum .meter-label:before{background:#643da3}.minimum .meter-label>span,.maximum .meter-label>span{margin-right:auto}.rating{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:6px;font-size:20px;line-height:1;color:#4f627c}.rating .filled{color:#ffe533}.game-title{display:flex;align-items:center;gap:2px;min-height:44px}.game-title h3{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.2;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.copy-name{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;margin:0 -4px 0 0;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:#c5d6ed}.copy-name svg{width:17px;height:17px}.copy-name.copied{color:#87ffc0;background:#19432e;border-color:#64d49a}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:2px}.trend{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-size:9px;font-weight:650;color:#c1d0e6}.trend>span{font-size:16px;line-height:1}.trend.up{color:#7cf7ad}.trend.down{color:#ffabb2}.renewal{display:inline-flex;align-items:center;justify-content:center;min-width:35px;height:24px;padding:0 4px;border:1px solid #63825c;border-radius:12px;background:#111f27}.countdown{font-size:10px;font-weight:650;font-variant-numeric:tabular-nums;color:#d4f58a}.countdown.soon{color:#ffda81}.countdown.expired{font-size:8px;color:#c3cfe0}.error-notice{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;padding:10px;border:1px solid #806844;background:#352b1c;color:#ffdfa1;font-size:12px}.error-notice button,.empty-state button{min-height:44px;border:0;border-radius:6px;padding:0 10px;background:var(--green);color:#092b1d;font-weight:700}.empty-state{text-align:center;padding:30px 10px}.empty-state>span{font-size:35px}.empty-state h2{font-size:18px}.empty-state p{color:var(--muted);font-size:13px}.skeleton-card{min-height:300px;background:var(--surface);border:1px solid var(--line)}.skeleton-card>div{aspect-ratio:3/2;background:#253a55}.skeleton-card>span{display:block;height:15px;margin:8px;background:#253a55}footer{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;padding:18px 0 calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted)}footer p{font-size:10px;line-height:1.5;margin:0}.age-mark{display:grid;place-items:center;border:1px solid #73839b;border-radius:50%;width:28px;height:28px;font-size:10px;flex:none}@media (hover:hover){button:hover{background-color:#293b55}.copy-name:hover{color:#fff}.provider-option:hover{border-color:#af935b}}@media (max-width:1023px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:719px){main{padding:5px 8px 0}.header-inner{padding:8px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-content{padding:5px}.meter-label{font-size:10px;min-height:18px;padding:2px 3px}.meter-label strong{font-size:10px}.meter{min-height:18px}.metrics{gap:3px}.minimum .meter-label:before,.maximum .meter-label:before{margin-left:-3px}.provider-option{min-height:59px}.provider-mark{width:35px;height:25px}.provider-menu{padding-bottom:5px;gap:3px}.provider-name{font-size:9px}.brand{font-size:20px}.rating{font-size:18px;margin-top:5px}.sort-control select{width:110px}.quick-filters button{padding:0 7px;font-size:11px}.game-title h3{font-size:11px}}@media (max-width:359px){.filter-row{gap:3px}.quick-filters{gap:0}.quick-filters button{padding:0 6px;font-size:10px}.sort-control select{width:101px;font-size:11px}.meter-label,.meter-label strong{font-size:9px}.game-title h3{font-size:10px}.card-content{padding:4px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.copy-name.copied>span{clip-path:none;width:auto;height:auto;margin:0;padding:5px 7px;bottom:100%;right:0;background:#173c2a;border:1px solid #64d49a;border-radius:5px;color:#b6ffd5;font-size:10px;z-index:2}
