@font-face{font-family:HubThai;src:url('/hub-thai.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font:16px/1.6 HubThai,Tahoma,system-ui,sans-serif;color:#201b32;background:#fff;--purple:#6d3deb;--purple-hover:#5828cf;--line:#e6dff7;--muted:#736d83;--soft:#f7f4ff}
*{box-sizing:border-box}body{margin:0}a{color:var(--purple)}button,input,.action{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a68bf4;outline-offset:4px}[hidden]{display:none!important}
.container{width:calc(100% - 64px);max-width:1280px;margin-inline:auto}.site-header{background:#fff;border-bottom:1px solid #f1edf8}nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:22px;font-weight:750;color:#201b32;text-decoration:none;white-space:nowrap}.nav-actions{display:flex;align-items:center;gap:24px;font-size:14px}.nav-actions>a{text-decoration:none}.nav-actions>a:hover{text-decoration:underline}button{background:var(--purple);color:#fff;border:1px solid transparent;border-radius:8px;min-height:46px;padding:10px 18px;font-size:15px;font-weight:600;cursor:pointer}button:hover{background:var(--purple-hover)}button:disabled{opacity:.55;cursor:wait}nav button{background:transparent;color:#595269;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 24px;min-height:24px;font-size:14px;font-weight:400}nav button:hover{background:none;color:var(--purple)}
.hero{background:var(--purple);color:#fff;padding:32px 0 34px}h1{font-size:clamp(36px,4.2vw,56px);line-height:1.3;letter-spacing:-1px;font-weight:750;margin:0 0 2px}.hero-lead{font-size:clamp(20px,2.2vw,28px);line-height:1.5;font-weight:600;margin:0 0 4px}.hero-note{font-size:17px;margin:0;color:#f1eaff}.content{padding-block:28px 42px;min-height:45vh}#message{margin:0 0 24px;padding:12px 16px;background:var(--soft);border-left:3px solid var(--purple);font-size:15px;overflow-wrap:anywhere}#message.quiet{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
h2{font-size:26px;line-height:1.4;font-weight:700;margin:0}p{margin:12px 0}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.library-heading p{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.game-card{min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}.game-card:hover{border-color:#bba6ef;transform:translateY(-3px)}.cover-frame{aspect-ratio:16/9;background:var(--soft);border-radius:8px;overflow:hidden;display:grid;place-items:center}.game-cover{width:100%;height:100%;object-fit:cover;display:block}.cover-placeholder{font-size:32px;font-weight:700;color:var(--purple);text-align:center;padding:20px}.card-body{display:flex;flex-direction:column;flex:1}.game-card h3{font-size:18px;line-height:1.5;font-weight:650;margin:12px 0 16px;overflow-wrap:anywhere}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}.action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--purple);border-radius:8px;padding:9px 8px;background:var(--purple);color:white;text-decoration:none;font-size:15px;font-weight:550;line-height:1.4;transition:background .15s ease}.action:hover{background:var(--purple-hover);border-color:var(--purple-hover)}.action svg{width:19px;height:19px;flex:none}.action.secondary{background:white;color:var(--purple)}.action.secondary:hover{background:var(--soft)}.selected-game{border-color:var(--purple);box-shadow:0 0 0 2px #e8defe}.offline-note{font-size:13px;color:var(--muted);margin:26px 0 0}
.auth-panel{max-width:540px;margin:12px auto 28px;border:1px solid var(--line);padding:32px;border-radius:12px}.auth-panel>p{color:var(--muted);font-size:15px;overflow-wrap:anywhere}form{display:grid;gap:10px;margin:24px 0 0}label{font-size:14px;font-weight:600}input{border:1px solid #cfc7df;border-radius:8px;min-height:48px;padding:11px 12px;min-width:0;width:100%;background:#fff;color:#201b32;font-size:16px}input:focus{border-color:var(--purple)}#otp{letter-spacing:4px}#code{font-size:14px}
footer{background:#f8f7fc;border-top:1px solid #f0edf6}.footer-inner{display:flex;align-items:flex-start;gap:24px;padding-block:24px}.footer-inner .brand{font-size:17px}.footer-inner p{color:var(--muted);font-size:12px;max-width:850px;margin:0}
@media(min-width:1500px){.container{max-width:1312px}}
@media(max-width:1000px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-heading{align-items:flex-start}.library-heading p{max-width:52%;text-align:right}.hero{padding-block:30px}}
@media(max-width:600px){.container{width:calc(100% - 36px)}nav{min-height:64px;gap:12px}.brand{font-size:20px}.nav-actions{gap:12px;font-size:12px}nav button{padding-left:12px;font-size:12px}.hero{padding-block:28px}h1{font-size:38px}.hero-lead{font-size:20px}.hero-note{font-size:14px;max-width:290px}.content{padding-top:24px}.library-heading{display:block;margin-bottom:18px}.library-heading h2{font-size:24px}.library-heading p{max-width:none;text-align:left;margin-top:6px;font-size:12px}.game-grid{grid-template-columns:minmax(0,1fr);gap:20px}.game-card h3{font-size:18px}.auth-panel{padding:22px;margin-top:0}.auth-panel h2{font-size:23px}.footer-inner{display:block}.footer-inner p{margin-top:10px}.action{min-height:46px}#message{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Existing white/purple system: supplied logo and two independent filter groups. */
.site-header nav{min-height:88px}.brand{display:inline-flex;align-items:center;flex:none;line-height:1}.brand img{display:block;width:72px;height:72px;object-fit:contain}.footer-inner .brand img{width:64px;height:64px}.footer-inner{align-items:center}
.filters{display:grid;gap:14px;border-block:1px solid var(--line);padding:18px 0;margin-bottom:12px}.filters fieldset{border:0;min-width:0;padding:0;margin:0;display:flex;align-items:flex-start;gap:18px}.filters legend{float:left;font-size:14px;font-weight:650;line-height:44px;min-width:72px;padding:0}.filter-options{display:flex;flex-wrap:wrap;gap:8px}.filter-tab{min-height:44px;background:#fff;border:1px solid var(--line);color:#665e77;font-size:14px;font-weight:500;padding:9px 16px;border-radius:8px}.filter-tab:hover{background:var(--soft);color:var(--purple);border-color:#c7b5ef}.filter-tab[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:white}.filter-result{font-size:13px;color:var(--muted);margin:12px 0 16px}.no-results{text-align:center;background:var(--soft);padding:36px 20px;border-radius:12px}.no-results p{margin:0 0 18px}
@media(max-width:600px){.site-header nav{min-height:76px}.brand img{width:60px;height:60px}.filters fieldset{display:block}.filters legend{float:none;line-height:1.6;margin-bottom:9px}.filter-options{gap:7px}.filter-tab{padding-inline:13px}.footer-inner{display:flex;align-items:flex-start;gap:16px}.footer-inner p{margin-top:0}.footer-inner .brand img{width:56px;height:56px}}
.vip-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 36px}.vip-shortcut{position:relative;display:flex;align-items:flex-start;gap:22px;padding:30px;border-radius:22px;text-decoration:none;overflow:hidden;border:1px solid #d7c6fb;transition:transform .2s,box-shadow .2s;min-width:0}.vip-shortcut:hover{transform:translateY(-4px);box-shadow:0 16px 32px #5928bf20}.vip-shortcut:focus-visible{outline:3px solid #ab83fa;outline-offset:5px}.report-shortcut{background:linear-gradient(120deg,#5423bd,#7b43ef);color:#fff;border-color:#6d3deb;box-shadow:0 8px 22px #6234c522}.skills-shortcut{background:linear-gradient(120deg,#fbf9ff,#eee5ff);color:#3e2472}.shortcut-icon{width:62px;height:62px;display:grid;place-items:center;flex:none;border-radius:18px;background:#ffffff24;border:1px solid #ffffff40}.skills-shortcut .shortcut-icon{background:white;color:#6d3deb;border-color:#e0d2fb}.shortcut-icon svg{width:32px;height:32px}.shortcut-copy{display:grid;gap:8px;min-width:0}.shortcut-copy strong{font-size:25px;line-height:1.45}.shortcut-copy>span{font-size:16px;line-height:1.6}.shortcut-copy .shortcut-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;width:fit-content;font-size:15px;font-weight:650;margin-top:8px;padding:8px 16px;border-radius:30px;background:white;color:#5928bf}.skills-shortcut .shortcut-cta{background:#6d3deb;color:white}.shortcut-cta span{font-size:22px;line-height:1}
@media(max-width:900px){.vip-shortcut{padding:24px;gap:16px}.shortcut-copy strong{font-size:22px}.shortcut-icon{width:50px;height:50px;border-radius:14px}.shortcut-icon svg{width:28px;height:28px}}
@media(max-width:700px){.vip-shortcuts{grid-template-columns:1fr;gap:16px;margin-bottom:28px}.vip-shortcut{padding:24px}.shortcut-copy strong{font-size:23px}.shortcut-copy>span{font-size:15px}}

#game-number-ranch .game-cover{object-fit:contain}

.save-migration{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;font-size:15px}.save-migration summary{cursor:pointer;color:var(--purple);font-weight:650}.save-migration label{display:block;margin-top:18px}.save-migration input{max-width:100%;font-size:14px}.save-migration p{max-width:850px}