:root{
  --bg:        #FAF9F5;
  --paper:     #FFFFFF;
  --warm:      #F4EFE2;
  --ink:       #1F1E1B;
  --ink-2:     #3D3B36;
  --muted:     #6F6A5E;
  --dim:       #A39E91;
  --line:      #E5DFD0;
  --line-2:    #EFE9DA;
  --accent:    #C96442;
  --accent-2:  #A84E30;
  --shadow:    0 1px 2px rgba(31,30,27,.04);
  --serif:     'Source Serif 4', 'Charter', 'Iowan Old Style', Georgia, serif;
  --sans:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"]{
  --bg:        #262624;
  --paper:     #2F2E2C;
  --warm:      #36352F;
  --ink:       #FAF9F5;
  --ink-2:     #E5DFD0;
  --muted:     #A39E91;
  --dim:       #6F6A5E;
  --line:      #3D3B36;
  --line-2:    #45433D;
  --accent:    #D97757;
  --accent-2:  #E8896B;
  --shadow:    0 1px 2px rgba(0,0,0,.3);
}

[data-theme="dark"] meta[name="theme-color"]{ }

*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-feature-settings:"ss01","cv11";
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .2s, color .2s;
}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{color:var(--accent-2);}
button,input{font-family:inherit;color:inherit;}
button{border:none;background:none;cursor:pointer;}
input{outline:none;}

kbd{
  display:inline-block;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;
  padding:1px 6px;border-radius:4px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink-2);
}

::selection{background:rgba(217,119,87,.22);color:var(--ink);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(127,127,127,.22);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(127,127,127,.4);}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:18px 32px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.brand-mark{display:block;border-radius:7px;flex-shrink:0;}
.brand-name{
  font-family:var(--serif);
  font-weight:600;font-size:18px;letter-spacing:-.005em;
  color:var(--ink);
}
.brand-dot{color:var(--dim);}
.brand-sub{font-size:13px;color:var(--muted);}
.brand-sub #onlineCount{color:var(--ink-2);font-weight:600;}
.topbar-spacer{flex:1;}
.iconBtn{
  width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid transparent;transition:all .12s;
}
.iconBtn:hover{background:var(--warm);color:var(--ink);}
.textBtn{
  font-size:13px;color:var(--ink-2);
  padding:6px 12px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);
  transition:all .12s;
}
.textBtn:hover{color:var(--ink);border-color:var(--ink-2);}

.main{max-width:1080px;margin:0 auto;padding:48px 32px 96px;}

.hero{margin:30px 0 56px;}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(36px, 5.6vw, 64px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
}
.hero h1 em{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
}
.heroSub{
  margin-top:18px;
  color:var(--muted);
  font-size:16px;line-height:1.55;
  max-width:560px;
}
.heroSub kbd{margin:0 2px;}

.heroTip{
  margin-top:18px;
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px 8px 12px;
  background:var(--paper, #fff);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;color:var(--ink-2, #3D3B36);
  cursor:pointer;
  transition:border-color .15s, transform .15s;
  max-width:100%;
}
.heroTip:hover{border-color:var(--accent);transform:translateY(-1px);}
.heroTipDot{
  width:7px;height:7px;border-radius:999px;
  background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(201,100,66,.12);
}
.heroTipX{
  background:transparent;border:0;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;padding:0 4px;margin-left:2px;
}
.heroTipX:hover{color:var(--ink);}
@media (max-width:520px){
  .heroTip{font-size:12px;}
}

.sectionTitle{
  font-family:var(--serif);
  font-size:18px;font-weight:500;
  margin-bottom:14px;color:var(--ink);
  letter-spacing:-.005em;
}

.featuredRow{margin-bottom:40px;}
.featuredList{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:160px;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.featuredItem{
  scroll-snap-align:start;cursor:pointer;
}
.featuredItem .fThumb{
  width:160px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--warm);border:1px solid var(--line);
  transition:transform .15s, border-color .15s;
}
.featuredItem .fThumb img{width:100%;height:100%;object-fit:cover;display:block;}
.featuredItem:hover .fThumb{transform:translateY(-3px);border-color:var(--ink-2);}
.featuredItem .fName{
  font-size:13px;color:var(--ink-2);margin-top:8px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.recentRow{margin-bottom:40px;}
.recentList{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.recentItem{flex:0 0 86px;scroll-snap-align:start;cursor:pointer;}
.recentItem .rThumb{
  width:86px;height:86px;border-radius:8px;overflow:hidden;
  background:var(--warm);border:1px solid var(--line);
  transition:transform .15s, border-color .15s;
}
.recentItem .rThumb img{width:100%;height:100%;object-fit:cover;}
.recentItem:hover .rThumb{transform:translateY(-2px);border-color:var(--ink-2);}
.recentItem .rName{
  font-size:12px;color:var(--ink-2);margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.searchWrap{position:relative;margin:0 0 14px;}
#searchInput{
  width:100%;padding:12px 40px 12px 14px;border-radius:8px;font-size:14px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
#searchInput::placeholder{color:var(--dim);}
#searchInput:focus{
  border-color:var(--ink-2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
.searchClear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:6px;font-size:18px;color:var(--muted);
}
.searchClear:hover{background:var(--warm);color:var(--ink);}

.filterBar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;}
.filterBtn{
  padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;
  background:transparent;border:1px solid transparent;color:var(--muted);
  transition:all .12s;
}
.filterBtn:hover{color:var(--ink);background:var(--warm);}
.filterBtn.active{
  background:var(--ink);color:var(--bg);
  border-color:var(--ink);
}

.gamesGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:14px;
}
.gameCard{
  position:relative;cursor:pointer;border-radius:8px;overflow:hidden;
  background:var(--warm);
  transition:transform .18s;
  aspect-ratio:1/1;
}
.gameCard:hover{transform:translateY(-3px);}
.gameCard img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s;
}
.gameCard:hover img{transform:scale(1.04);}
.gameCard .gcOverlay{
  position:absolute;inset:auto 0 0 0;
  padding:18px 8px 8px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}
.gameCard:hover .gcOverlay{opacity:1;}
.gameCard .gcName{
  font-size:12px;font-weight:500;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gameCard .gcPlay{display:none;}
.gameCard .gcFav{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:12px;
  opacity:0;transition:all .15s;pointer-events:auto;z-index:2;
  color:var(--muted);
}
[data-theme="dark"] .gameCard .gcFav{background:rgba(38,38,36,.92);color:var(--ink-2);}
.gameCard:hover .gcFav,.gameCard .gcFav.on{opacity:1;}
.gameCard .gcFav.on{color:var(--accent);}
.gameCard .gcFav:hover{transform:scale(1.1);}
.gameCard .gcSkel{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--warm) 0%,var(--line-2) 50%,var(--warm) 100%);
  background-size:200% 100%;
  animation:skel 1.4s infinite;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.loadMoreWrap{display:flex;justify-content:center;margin:36px 0 0;}
.loadMoreBtn{
  padding:9px 22px;border-radius:6px;font-weight:500;font-size:13px;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  transition:all .12s;
}
.loadMoreBtn:hover{border-color:var(--ink-2);color:var(--ink);}

.emptyState{text-align:center;padding:60px 20px;color:var(--muted);}
.emptyText{font-size:14px;font-style:italic;font-family:var(--serif);}

.foot{
  margin-top:80px;padding-top:24px;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);
  text-align:center;
}

.igp{
  position:fixed;inset:0;z-index:80;background:#0F0E0D;
  display:none;flex-direction:column;
}
.igp.active{display:flex;}
.igp-bar{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.igp-title{
  flex:1;font-family:var(--serif);font-weight:500;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);
}
.igp-actions{display:flex;gap:6px;}
.igp-btn{
  width:40px;height:40px;border-radius:8px;color:var(--ink-2);
  background:transparent;border:1px solid transparent;transition:all .12s;
  display:grid;place-items:center;
}
.igp-btn svg{display:block;}
.igp-btn:hover{background:var(--warm);color:var(--ink);}
.igp-btn.on{color:var(--accent);}
.igp-close{color:var(--muted);}
.igp-close:hover{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);}
#gameFrame{flex:1;width:100%;border:0;background:#fff;}

.browserOverlay{
  position:fixed;inset:0;z-index:90;background:#fff;
  display:none;flex-direction:column;
}
.browserOverlay.active{display:flex;}
.bo-bar{
  display:flex;align-items:center;padding:12px 18px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.bo-title{
  flex:1;font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ink);
}
.bo-close{
  width:40px;height:40px;border-radius:8px;color:var(--muted);
  display:grid;place-items:center;
}
.bo-close:hover{background:var(--warm);color:var(--ink);}
#browserFrame{flex:1;width:100%;border:0;background:#fff;}

.fab{
  position:fixed;font-size:13px;font-weight:500;
  display:grid;place-items:center;z-index:60;
  transition:all .15s;
}
.fab-rand{
  right:24px;bottom:24px;
  padding:11px 20px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-family:var(--sans);
}
.fab-rand:hover{background:var(--ink-2);transform:translateY(-1px);}
.fab-top{
  right:24px;bottom:78px;
  width:40px;height:40px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);
  font-size:16px;
  opacity:0;pointer-events:none;
}
.fab-top.show{opacity:1;pointer-events:auto;}
.fab-top:hover{border-color:var(--ink-2);color:var(--ink);}

.kbdOverlay,.settingsOverlay{
  position:fixed;inset:0;z-index:95;background:rgba(15,14,13,.42);
  backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;
}
.kbdOverlay.active,.settingsOverlay.active{display:flex;}
.kbdBox,.settingsBox{
  width:100%;max-width:420px;background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;padding:24px;
}
.kbdBox h3,.settingsBox h3{
  font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:18px;color:var(--ink);
}
.kbdRow{
  display:flex;align-items:center;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:13px;
}
.kbdRow:last-of-type{border-bottom:0;}
.kbdRow kbd{min-width:34px;text-align:center;}
.kbdRow span{color:var(--ink-2);}
.kbdClose,.setClose{
  width:100%;margin-top:16px;padding:10px;border-radius:8px;font-weight:500;font-size:13px;
  background:var(--ink);color:var(--bg);
  transition:background .12s;
}
.kbdClose:hover,.setClose:hover{background:var(--ink-2);}

.setRow{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line-2);
}
.setRow:last-of-type{border-bottom:0;}
.setLabel{flex:1;min-width:0;}
.setName{font-size:14px;font-weight:500;color:var(--ink);}
.setHint{font-size:12px;color:var(--muted);margin-top:2px;}
.setBtn{
  padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  transition:all .12s;
}
.setBtn:hover{border-color:var(--ink-2);color:var(--ink);background:var(--warm);}
.segmented{
  display:inline-flex;background:var(--warm);border-radius:8px;padding:3px;gap:2px;
}
.segmented button{
  padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);
  transition:all .12s;
}
.segmented button.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow);}
.segmented button:hover:not(.active){color:var(--ink);}

.messageBanner{
  position:sticky;top:0;z-index:55;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:500;
  border-bottom:1px solid var(--accent-2);
}
.mb-inner{
  max-width:1080px;margin:0 auto;padding:10px 32px;
  display:flex;align-items:center;gap:12px;
}
.mb-dot{
  width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
.mb-text{flex:1;line-height:1.4;}
.mb-x{
  width:24px;height:24px;border-radius:6px;color:#fff;font-size:18px;
  background:transparent;flex-shrink:0;opacity:.8;
}
.mb-x:hover{background:rgba(255,255,255,.15);opacity:1;}

.suggestRow{
  margin-top:64px;padding:28px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:14px;
}
.suggestHint{
  font-size:13px;color:var(--muted);margin:-6px 0 16px;
}
.suggestForm{display:flex;flex-direction:column;gap:10px;}
.suggestForm input,.suggestForm textarea{
  width:100%;padding:11px 14px;border-radius:8px;font-size:14px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;resize:vertical;
  transition:border-color .12s, box-shadow .12s;
}
.suggestForm input::placeholder,.suggestForm textarea::placeholder{color:var(--dim);}
.suggestForm input:focus,.suggestForm textarea:focus{
  border-color:var(--ink-2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
.suggestActions{display:flex;align-items:center;gap:14px;margin-top:4px;}
.suggestBtn{
  padding:10px 20px;border-radius:8px;font-weight:500;font-size:13px;
  background:var(--ink);color:var(--bg);
  transition:background .12s;
}
.suggestBtn:hover{background:var(--ink-2);}
.suggestBtn:disabled{opacity:.55;cursor:not-allowed;}
.suggestStatus{font-size:13px;color:var(--muted);}
.suggestStatus.ok{color:var(--accent);}
.suggestStatus.err{color:#B33B1A;}

@media (max-width:600px){
  .mb-inner{padding:9px 18px;}
  .topbar{padding:14px 18px;gap:8px;}
  .main{padding:32px 18px 90px;}
  .gamesGrid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;}
  .hero{margin:18px 0 40px;}
  .hero h1{font-size:34px;}
  .heroSub{font-size:14px;}
  .featuredList{grid-auto-columns:140px;}
  .featuredItem .fThumb{width:140px;}
  .fab-rand{padding:10px 16px;font-size:12px;}
  .brand-dot,.brand-sub{display:none;}
  .igp-bar{padding:10px 14px;}
  .igp-btn{width:42px;height:42px;}
}