*{box-sizing:border-box}
:root{
  --header:#c7dce9;
  --ink:#111;
  --accent:#000;
  --tile:#eef3f7;
}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;color:var(--ink);background:#fff}
.notice{
  font-family:Arial,sans-serif;
  background:#fff3cd;
  border-bottom:1px solid #eadba0;
  padding:8px 16px;
  text-align:center;
  font-size:13px;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:76px;
  padding:0 5.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--header);
}
.brand{
  display:flex;
  gap:16px;
  align-items:center;
  text-decoration:none;
  color:#111;
  font-size:28px;
  font-family:Arial,sans-serif;
  font-weight:400;
}
.tree{font-size:34px}
nav{display:flex;align-items:stretch;gap:10px;height:76px}
nav a, .search-button{
  border:0;
  background:transparent;
  color:#111;
  text-decoration:none;
  display:flex;
  align-items:center;
  padding:0 14px;
  font-size:23px;
  font-family:Georgia,"Times New Roman",serif;
  cursor:pointer;
  position:relative;
}
nav a.active::after{
  content:"";
  height:9px;
  background:#000;
  position:absolute;
  left:10px;right:10px;bottom:0;
}
.app-grid{
  width:min(1420px,92vw);
  margin:26px auto 60px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:52px 34px;
}
.app-card{
  text-decoration:none;
  color:inherit;
  display:block;
  min-width:0;
}
.app-icon{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.bookmark-wrap{
  width:min(1300px,90vw);
  margin:42px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
.bookmark-column h2{
  font-size:20px;
  font-weight:400;
  margin:0 8px 18px;
}
.bookmark{
  display:block;
  margin:0 0 26px;
  padding:10px 18px;
  border:1px solid #222;
  border-radius:4px;
  background:#c7dce9;
  color:#111;
  text-decoration:none;
  text-align:center;
  font-size:18px;
}
dialog{
  border:0;
  border-radius:16px;
  width:min(600px,90vw);
  padding:0;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
dialog::backdrop{background:rgba(0,0,0,.35)}
.search-box{padding:22px}
.search-head{display:flex;justify-content:space-between;align-items:center;font:20px Arial,sans-serif}
.close{border:0;background:transparent;font-size:28px;cursor:pointer}
#searchInput{width:100%;margin:16px 0;padding:12px 14px;font-size:18px;border:1px solid #aaa;border-radius:8px}
.search-results{display:grid;gap:8px}
.search-results a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:#111;background:#f3f4f6;font:16px Arial,sans-serif}
@media(max-width:820px){.app-grid{grid-template-columns:repeat(3,1fr);gap:28px 20px}}
@media(max-width:760px){
  .topbar{padding:0 16px}
  .brand{font-size:20px}
  nav a,.search-button{font-size:18px;padding:0 8px}
  .app-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  .bookmark-wrap{grid-template-columns:1fr}
}

.games-column{grid-column:1/-1}
.games-column{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.games-column h2{grid-column:1/-1}
@media(max-width:760px){.games-column{grid-template-columns:1fr}}