:root {
  --bg: #f5f8ff;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --text: #13254a;
  --muted: #6f7d98;
  --line: #e3e9f5;
  --primary: #315bff;
  --primary-2: #7552f6;
  --cyan: #1bb7ed;
  --green: #31c48d;
  --pink: #f05ba8;
  --amber: #f3b51b;
  --navy: #0d1740;
  --navy-2: #151c55;
  --shadow: 0 12px 30px rgba(34,72,148,.09);
  --shadow-lg: 0 28px 70px rgba(27,45,104,.16);
  --radius: 18px;
  --sidebar: 228px;
  --content-max: 1320px;
  font-family: "Leelawadee UI", "Noto Sans Thai", "Sarabun", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-size: 15px; color: var(--text); background: var(--bg); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 10px; top: -60px; z-index: 9999; background: #111; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.skip-link:focus { top: 10px; }

/* Global ambient background */
.ambient-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(180deg,#f8fbff 0%,#f3f7ff 58%,#f8faff 100%); }
.ambient-bg::after { content:""; position:absolute; inset:0; opacity:.38; background-image: linear-gradient(rgba(83,109,201,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(83,109,201,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000 0,transparent 68%); }
.math-rain { position:absolute; inset:0; overflow:hidden; opacity:.76; }
.math-rain span { position:absolute; top:-12vh; left:var(--x); color:var(--color); font-size:var(--size); font-weight:850; letter-spacing:.02em; white-space:nowrap; text-shadow:0 0 14px color-mix(in srgb,var(--color) 42%,transparent); opacity:0; transform:rotate(var(--rotate)); animation:mathRain var(--duration) linear var(--delay) infinite; }
.math-rain span:nth-child(3n){--color:#6c81e8}.math-rain span:nth-child(3n+1){--color:#27b8df}.math-rain span:nth-child(3n+2){--color:#a16ce8}
.math-rain span:nth-child(1){--x:4%;--size:19px;--duration:18s;--delay:-13s;--rotate:-12deg}.math-rain span:nth-child(2){--x:12%;--size:13px;--duration:22s;--delay:-4s;--rotate:8deg}.math-rain span:nth-child(3){--x:21%;--size:16px;--duration:20s;--delay:-17s;--rotate:-5deg}.math-rain span:nth-child(4){--x:29%;--size:12px;--duration:25s;--delay:-8s;--rotate:11deg}.math-rain span:nth-child(5){--x:37%;--size:18px;--duration:19s;--delay:-2s;--rotate:-8deg}.math-rain span:nth-child(6){--x:46%;--size:14px;--duration:23s;--delay:-15s;--rotate:5deg}.math-rain span:nth-child(7){--x:54%;--size:12px;--duration:21s;--delay:-6s;--rotate:-14deg}.math-rain span:nth-child(8){--x:62%;--size:17px;--duration:24s;--delay:-19s;--rotate:7deg}.math-rain span:nth-child(9){--x:70%;--size:13px;--duration:18s;--delay:-10s;--rotate:-6deg}.math-rain span:nth-child(10){--x:78%;--size:22px;--duration:26s;--delay:-3s;--rotate:9deg}.math-rain span:nth-child(11){--x:85%;--size:14px;--duration:20s;--delay:-14s;--rotate:-10deg}.math-rain span:nth-child(12){--x:92%;--size:18px;--duration:22s;--delay:-7s;--rotate:4deg}.math-rain span:nth-child(13){--x:16%;--size:15px;--duration:27s;--delay:-22s;--rotate:6deg}.math-rain span:nth-child(14){--x:43%;--size:12px;--duration:19s;--delay:-11s;--rotate:-9deg}.math-rain span:nth-child(15){--x:67%;--size:15px;--duration:25s;--delay:-20s;--rotate:12deg}.math-rain span:nth-child(16){--x:81%;--size:13px;--duration:21s;--delay:-16s;--rotate:-4deg}.math-rain span:nth-child(17){--x:32%;--size:20px;--duration:23s;--delay:-9s;--rotate:10deg}.math-rain span:nth-child(18){--x:57%;--size:14px;--duration:26s;--delay:-5s;--rotate:-7deg}
@keyframes mathRain { 0% { opacity:0; transform:translate3d(0,0,0) rotate(var(--rotate)) scale(.86); } 12% { opacity:.5; } 48% { opacity:.2; } 88% { opacity:.42; } 100% { opacity:0; transform:translate3d(34px,122vh,0) rotate(calc(var(--rotate) + 18deg)) scale(1.08); } }
.credit-rain { position:absolute; inset:0; overflow:hidden; opacity:.42; }
.credit-rain span { position:absolute; top:-8vh; left:var(--credit-x); color:#315bba; font-size:var(--credit-size); font-weight:950; letter-spacing:.16em; white-space:nowrap; text-shadow:0 0 18px rgba(49,91,186,.3); opacity:0; animation:creditRain var(--credit-duration) linear var(--credit-delay) infinite; }
.credit-rain span:nth-child(1){--credit-x:18%;--credit-size:12px;--credit-duration:31s;--credit-delay:-17s}.credit-rain span:nth-child(2){--credit-x:43%;--credit-size:9px;--credit-duration:37s;--credit-delay:-8s}.credit-rain span:nth-child(3){--credit-x:66%;--credit-size:11px;--credit-duration:34s;--credit-delay:-25s}.credit-rain span:nth-child(4){--credit-x:84%;--credit-size:13px;--credit-duration:39s;--credit-delay:-31s}
@keyframes creditRain { 0% { opacity:0; transform:translate3d(0,0,0) rotate(-4deg); } 16% { opacity:.46; } 80% { opacity:.16; } 100% { opacity:0; transform:translate3d(-28px,124vh,0) rotate(4deg); } }
.page-shell { position:relative; z-index:1; }
.hero-math-rain { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; opacity:.72; }
.hero-math-rain span { position:absolute; top:-30px; left:var(--hero-x); color:var(--hero-color); font-size:var(--hero-size); font-weight:900; text-shadow:0 0 15px currentColor; opacity:0; animation:heroMathRain var(--hero-duration) linear var(--hero-delay) infinite; }
.hero-math-rain span:nth-child(3n){--hero-color:#55d9ff}.hero-math-rain span:nth-child(3n+1){--hero-color:#d28aff}.hero-math-rain span:nth-child(3n+2){--hero-color:#ffd35b}
.hero-math-rain span:nth-child(1){--hero-x:8%;--hero-size:25px;--hero-duration:12s;--hero-delay:-7s}.hero-math-rain span:nth-child(2){--hero-x:28%;--hero-size:18px;--hero-duration:15s;--hero-delay:-2s}.hero-math-rain span:nth-child(3){--hero-x:48%;--hero-size:23px;--hero-duration:13s;--hero-delay:-10s}.hero-math-rain span:nth-child(4){--hero-x:68%;--hero-size:21px;--hero-duration:16s;--hero-delay:-5s}.hero-math-rain span:nth-child(5){--hero-x:78%;--hero-size:16px;--hero-duration:14s;--hero-delay:-12s}.hero-math-rain span:nth-child(6){--hero-x:88%;--hero-size:19px;--hero-duration:17s;--hero-delay:-8s}
@keyframes heroMathRain { 0% { opacity:0; transform:translateY(0) rotate(-8deg); } 14% { opacity:.55; } 80% { opacity:.2; } 100% { opacity:0; transform:translate3d(22px,460px,0) rotate(10deg); } }

/* Branded loader */
.app-loader { position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; gap:14px; background:rgba(248,251,255,.92); backdrop-filter:blur(18px); transition:opacity .32s ease, visibility .32s ease; }
.app-loader.is-hidden { opacity:0; visibility:hidden; }
.loader-orbit { position:relative; width:58px; height:58px; display:grid; place-items:center; }
.loader-orbit img { width:38px; height:38px; object-fit:cover; border-radius:50%; box-shadow:0 8px 22px rgba(56,73,178,.17); }
.loader-orbit::before, .loader-orbit::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:#315bff; border-right-color:#7453f5; animation:loaderSpin 1.05s linear infinite; }
.loader-orbit::after { inset:7px; border-top-color:#21b9e9; border-right-color:transparent; animation-duration:.75s; animation-direction:reverse; }
.loader-copy { display:grid; gap:2px; }
.loader-copy strong { font-size:14px; color:#263f9f; letter-spacing:.04em; }
.loader-copy small { font-size:12px; color:#8b97ae; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }

.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:22px 18px 18px; background:rgba(255,255,255,.94); border-right:1px solid var(--line); z-index:30; display:flex; flex-direction:column; backdrop-filter:blur(18px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#c3cfe8 transparent; }
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:#c3cfe8; border-radius:99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:#a5b6d8; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand img { flex:none; border-radius:14px; box-shadow:0 7px 18px rgba(31,55,128,.15); object-fit:cover; }
.brand div { display:flex; flex-direction:column; line-height:1.15; font-size:15px; min-width:0; }
.brand strong { font-weight:900; font-size:16px; letter-spacing:-.02em; color:#2649d8; }
.brand span { margin-top:3px; font-size:13px; font-weight:780; color:#50638b; }
.side-nav { margin-top:24px; display:flex; flex-direction:column; gap:6px; }
.nav-item { width:100%; border:0; background:transparent; color:#536484; padding:12px 14px; border-radius:12px; text-align:left; font-size:14.5px; font-weight:750; display:flex; align-items:center; gap:11px; transition:.18s ease; }
.nav-item:hover { background:#f1f5ff; color:var(--primary); transform:translateX(2px); }
.nav-item.is-active { background:linear-gradient(135deg,#3a65ff,#6b54f5); color:white; box-shadow:0 7px 18px rgba(49,91,255,.23); }
.nav-item-special {
  position:relative;
  background:linear-gradient(135deg,rgba(110,60,245,.08),rgba(49,91,255,.1));
  color:#3149ba;
  border:1px solid rgba(80,95,245,.22);
}
.nav-item-special:hover {
  background:linear-gradient(135deg,rgba(110,60,245,.14),rgba(49,91,255,.18));
  color:#1b36b5;
  border-color:rgba(80,95,245,.38);
  transform:translateX(2px);
}
.nav-item-special.is-active {
  background:linear-gradient(135deg,#543cf7,#2763ff);
  color:white;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(67,72,245,.26);
}
.nav-title { flex:1; min-width:0; }
.nav-badge-glow {
  font-size:11px;
  font-weight:900;
  padding:3px 8px;
  border-radius:6px;
  background:linear-gradient(135deg,#ff3b68,#ff6a3d);
  color:white;
  letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(255,59,104,.35);
  animation:badgePulse 2.2s infinite alternate ease-in-out;
}
.nav-item-special.is-active .nav-badge-glow {
  background:rgba(255,255,255,.24);
  box-shadow:none;
}
.nav-item-games {
  background:linear-gradient(135deg,rgba(255,115,0,.11),rgba(255,46,99,.13));
  color:#c43a05;
  border:1px solid rgba(255,115,0,.35);
}
.nav-item-games:hover {
  background:linear-gradient(135deg,rgba(255,115,0,.18),rgba(255,46,99,.22));
  color:#a82e00;
  border-color:rgba(255,115,0,.58);
  box-shadow:0 4px 16px rgba(255,115,0,.2);
  transform:translateX(2px);
}
.nav-item-games .nav-icon {
  display:inline-block;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nav-item-games:hover .nav-icon {
  transform:scale(1.22) rotate(-8deg);
}
.nav-item-games.is-active {
  background:linear-gradient(135deg,#ff6a00,#ee0979);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 8px 24px rgba(255,106,0,.35);
}
.nav-item-games.is-active .badge-games {
  background:rgba(255,255,255,.25);
  box-shadow:none;
}
.badge-games {
  background:linear-gradient(135deg,#ff7a00,#ff2a5f);
  box-shadow:0 2px 9px rgba(255,60,75,.42);
}
.nav-item-classroom {
  background:linear-gradient(135deg,rgba(0,198,255,.12),rgba(0,114,255,.14));
  color:#026cd2;
  border:1px solid rgba(0,198,255,.3);
}
.nav-item-classroom:hover {
  background:linear-gradient(135deg,rgba(0,198,255,.18),rgba(0,114,255,.22));
  color:#0157a8;
  border-color:rgba(0,198,255,.5);
  box-shadow:0 4px 16px rgba(0,165,255,.18);
  transform:translateX(2px);
}
.badge-cyan {
  background:linear-gradient(135deg,#00c6ff,#0072ff);
  box-shadow:0 2px 8px rgba(0,150,255,.38);
}
@keyframes badgePulse {
  0% { transform:scale(.96); opacity:.92; }
  100% { transform:scale(1.04); opacity:1; }
}
.nav-icon { width:20px; text-align:center; font-size:19px; }
.nav-heading { margin:18px 12px 7px; color:#7e8ea8; font-size:12.5px; font-weight:850; letter-spacing:.02em; }
.grade-nav { display:grid; gap:3px; }
.grade-button { border:0; background:transparent; color:#60718e; text-align:left; padding:9px 14px; border-radius:10px; font-size:14px; font-weight:750; display:flex; align-items:center; gap:10px; }
.grade-button small { margin-left:auto; color:#95a2b8; font-size:11.5px; }
.grade-button::before { content:""; width:8px; height:8px; border-radius:99px; background:var(--grade-color,#7a61f5); box-shadow:0 0 0 3px color-mix(in srgb,var(--grade-color,#7a61f5) 16%,transparent); }
.grade-button:hover,.grade-button.is-active { color:#234fd7; background:#f1f5ff; }
.nav-separator { height:1px; background:var(--line); margin:13px 0 8px; }
.sidebar-spacer { flex:1; min-height:18px; }
.admin-entry { display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); background:#fbfcff; border-radius:14px; margin-bottom:12px; transition:.18s ease; }
.admin-entry:hover { border-color:#cbd8f3; transform:translateY(-1px); box-shadow:0 8px 20px rgba(41,67,129,.07); }
.admin-entry>span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#eef2ff; font-size:16px; }
.admin-entry div { display:flex; flex-direction:column; }
.admin-entry strong { font-size:13.5px; }
.admin-entry small { color:var(--muted); font-size:11.5px; margin-top:2px; }
.credit-link { color:inherit; text-decoration:none; border-radius:10px; }
.credit-link:hover strong,.credit-link:focus-visible strong { text-decoration:underline; }
.footer-credit { color:inherit; text-decoration:none; }
.footer-credit:hover,.footer-credit:focus-visible { text-decoration:underline; }
.creator-mini { display:flex; align-items:center; gap:9px; padding:9px 4px 1px; }
.credit-logo { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid #dce4f3; }
.creator-mini div { display:flex; flex-direction:column; }
.creator-mini small { color:#828fa6; font-size:11px; }
.creator-mini strong { color:#3153d4; font-size:12px; margin-top:1px; }
.mobile-header { display:none; }

.page-shell { margin-left:var(--sidebar); padding:28px 28px 70px; min-width:0; }
.section-pad { max-width:var(--content-max); margin-left:auto; margin-right:auto; }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity:1; transform:none; }

.hero { position:relative; min-height:390px; display:grid; grid-template-columns:.92fr 1.18fr; overflow:hidden; border:1px solid rgba(123,147,255,.26); border-radius:26px; background:radial-gradient(circle at 76% 46%,rgba(72,79,255,.38),transparent 28%), radial-gradient(circle at 94% 0,rgba(153,77,255,.28),transparent 33%), linear-gradient(128deg,#0d173f 0%,#11194b 54%,#171a59 100%); box-shadow:0 28px 70px rgba(31,46,105,.18); }
.hero-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(114,138,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(114,138,255,.22) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:110px; background:linear-gradient(to top,rgba(11,18,55,.52),transparent); pointer-events:none; }
.hero-copy { position:relative; z-index:3; padding:46px 24px 44px 42px; align-self:center; }
.hero-brandline { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; color:#b8c8ff; font-size:13px; font-weight:800; letter-spacing:.03em; }
.hero-brandline img { width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 5px rgba(87,110,255,.12); }
.hero h1 { margin:0; color:#fff; font-size:clamp(32px,3.4vw,50px); line-height:1.1; letter-spacing:-.03em; font-weight:950; text-shadow:0 7px 32px rgba(0,0,0,.18); }
.hero h2 { margin:11px 0 0; color:#83d9ff; font-size:clamp(22px,2.2vw,32px); line-height:1.3; letter-spacing:-.015em; }
.hero h2 span { background:linear-gradient(90deg,#6fe1ff,#bd78ff,#ff86b8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width:590px; margin:17px 0 23px; color:#cdd6f4; line-height:1.75; font-size:15px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.random-tools { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; padding:14px 16px; border:1px solid #dfe7f6; border-radius:14px; background:rgba(255,255,255,.78); }
.random-tools strong { color:#3d527b; font-size:14px; margin-right:auto; }
.random-tools select { height:40px; min-width:150px; border:1px solid #dfe6f3; border-radius:10px; color:#4a5c7c; background:white; padding:0 30px 0 12px; font-size:13.5px; }
.hero-benefits { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.hero-benefits span { border:1px solid rgba(154,176,255,.18); background:rgba(255,255,255,.06); color:#cbd7f8; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; backdrop-filter:blur(8px); }
.hero-secondary { color:#d4dcff!important; border-color:rgba(186,199,255,.25)!important; background:rgba(255,255,255,.07)!important; }
.hero-art { position:relative; z-index:2; min-width:0; padding:12px 12px 12px 0; display:flex; align-items:center; justify-content:center; }
.hero-art-glow { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(91,73,255,.48),transparent 67%); filter:blur(18px); animation:pulseGlow 4s ease-in-out infinite; }
.hero-art img { position:relative; z-index:2; width:100%; height:100%; max-height:360px; object-fit:cover; border-radius:20px; filter:saturate(1.08) contrast(1.03); box-shadow:0 20px 48px rgba(2,8,40,.28); animation:heroFloat 5.5s ease-in-out infinite; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:.45; animation:orbMove 8s ease-in-out infinite alternate; }
.orb-a { width:90px; height:90px; right:4%; top:8%; background:radial-gradient(circle at 30% 30%,#6edbff,#5269ff 55%,transparent 72%); }
.orb-b { width:54px; height:54px; right:37%; bottom:8%; background:radial-gradient(circle at 30% 30%,#ff8bd8,#8456ff 58%,transparent 73%); animation-delay:-3s; }
.math-float { position:absolute; z-index:1; color:#94b2ff; font-weight:900; text-shadow:0 0 24px rgba(101,130,255,.6); animation:mathFloat 5s ease-in-out infinite; }
.m1{right:45%;top:13%;font-size:31px}.m2{right:9%;top:22%;font-size:29px;color:#ffc443;animation-delay:-1s}.m3{right:37%;top:33%;font-size:34px;color:#2fd2ff;animation-delay:-2s}.m4{right:50%;bottom:18%;font-size:22px;color:#cd7cff;animation-delay:-3s}
@keyframes heroFloat { 50% { transform:translateY(-7px) scale(1.01); } }
@keyframes pulseGlow { 50% { transform:scale(1.09); opacity:.75; } }
@keyframes orbMove { to { transform:translate(28px,20px) scale(1.08); } }
@keyframes mathFloat { 50% { transform:translateY(-12px) rotate(3deg); opacity:.75; } }

.primary-btn,.secondary-btn,.ghost-btn { min-height:44px; border-radius:12px; padding:0 18px; font-size:14.5px; font-weight:820; border:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .17s ease,box-shadow .17s ease,background .17s ease,border-color .17s ease; }
.primary-btn { color:white; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 9px 22px rgba(69,77,239,.24); }
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 13px 29px rgba(69,77,239,.32); }
.hero-secondary:disabled { opacity:.65; cursor:wait; }
.secondary-btn { background:#eef3ff; color:#3156d9; border:1px solid #dbe4fb; }
.secondary-btn:hover { background:#e7eeff; transform:translateY(-1px); }
.ghost-btn { background:transparent; color:#5c6c8c; border:1px solid #dfe6f3; }
.ghost-btn:hover { color:#3156d9; background:#f4f7ff; }
.compact { min-height:38px; padding:0 14px; font-size:13.5px; }

.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.stat-card { min-width:0; min-height:88px; padding:16px; border:1px solid rgba(222,230,245,.9); border-radius:17px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); box-shadow:0 8px 24px rgba(42,66,126,.06); display:flex; align-items:center; gap:12px; position:relative; overflow:hidden; transition:.18s ease; }
.stat-card::after { content:""; position:absolute; inset:auto -15px -22px auto; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%); }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,62,124,.1); }
.stat-dot { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none; font-size:19px; }
.stat-violet{background:#f1eaff}.stat-blue{background:#e8f4ff}.stat-pink{background:#ffedf7}.stat-green{background:#e8fbf4}
.stat-card div { min-width:0; line-height:1.1; }
.stat-card small { display:block; color:#6b7c99; font-size:12px; font-weight:750; }
.stat-card strong { display:inline-block; margin-top:4px; font-size:28px; letter-spacing:-.03em; color:#173a8a; }
.stat-card em { font-style:normal; font-size:12px; margin-left:5px; color:#8896ac; }
.mini-bars { margin-left:auto; width:34px; height:25px; opacity:.88; background:linear-gradient(to top,var(--bar-color) 0 100%) left 0 bottom 0/5px 7px no-repeat,linear-gradient(to top,var(--bar-color) 0 100%) left 9px bottom 0/5px 12px no-repeat,linear-gradient(to top,var(--bar-color) 0 100%) left 18px bottom 0/5px 17px no-repeat,linear-gradient(to top,var(--bar-color) 0 100%) left 27px bottom 0/5px 23px no-repeat; }
.b1{--bar-color:#765bf3}.b2{--bar-color:#27aee8}.b3{--bar-color:#ef61a9}.b4{--bar-color:#31c48d}

.catalog-toolbar { margin-top:18px; min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:13px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.catalog-toolbar h3 { margin:0; font-size:16px; }
.catalog-toolbar p { margin:3px 0 0; font-size:12.5px; color:#7887a0; }
.search-box { width:min(540px,56%); height:46px; border:1px solid #dfe6f3; background:rgba(255,255,255,.92); border-radius:13px; display:flex; align-items:center; gap:9px; padding:0 14px; box-shadow:0 4px 14px rgba(28,55,117,.03); transition:.18s ease; }
.search-box:focus-within { border-color:#9fb3ff; box-shadow:0 0 0 4px rgba(49,91,255,.08),0 9px 22px rgba(40,65,132,.06); transform:translateY(-1px); }
.search-box span { color:#9aa7bd; font-size:20px; }.search-box input { width:100%; border:0; outline:0; color:var(--text); background:transparent; font-size:14.5px; }.search-box input::placeholder { color:#9eaabf; }
.category-rail { padding-top:12px; }
.category-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 6px; scrollbar-width:thin; }
.category-chip { flex:none; border:1px solid #dfe6f3; background:rgba(255,255,255,.82); color:#4f5f7d; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:760; transition:.18s ease; }
.category-chip:hover,.category-chip.is-active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#315bff,#7851f4); box-shadow:0 8px 18px rgba(61,79,225,.18); transform:translateY(-1px); }
.setup-notice { margin-top:16px; padding:14px 16px; border:1px solid #f0d899; background:#fff9e8; color:#785f1d; border-radius:13px; font-size:14px; line-height:1.6; }

.content-section { padding-top:21px; padding-bottom:7px; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.section-title { display:flex; align-items:center; gap:11px; }.title-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:900; font-size:18px; }
.title-icon.violet{background:#f0eaff;color:#694ef1}.title-icon.cyan{background:#e7f8ff;color:#15a8df}.title-icon.green{background:#e9fbf4;color:#2caf80}.title-icon.pink{background:#ffedf7;color:#ef5ca6}
.section-title h3 { margin:0; font-size:19px; letter-spacing:-.015em; }.section-title p { margin:3px 0 0; color:#7989a4; font-size:12.5px; }
.link-btn { border:0; background:transparent; color:#3760e5; font-weight:800; font-size:13.5px; padding:8px 0; }
.filter-actions { display:flex; align-items:center; gap:10px; }.filter-actions>span{color:#76859e;font-size:13px}.filter-actions select{height:40px;border:1px solid #dfe6f3;border-radius:10px;color:#495a79;background:white;padding:0 30px 0 12px;font-size:13.5px}.filter-actions .ghost-btn{min-height:40px;font-size:13px}.active-filter-bar{padding:10px 14px;margin-bottom:12px;border:1px solid #dce5fb;border-radius:12px;background:#f4f7ff;color:#3f5896;font-size:13.5px}

.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.game-card { min-width:0; background:rgba(255,255,255,.94); border:1px solid #e3e9f4; border-radius:18px; overflow:hidden; box-shadow:0 8px 20px rgba(35,62,126,.06); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; transform-style:preserve-3d; cursor:pointer; }
.game-card:hover { transform:translateY(-5px); box-shadow:0 18px 36px rgba(35,62,126,.13); border-color:#c9d6f1; }
.game-title-line { display:flex; align-items:flex-start; gap:8px; }
.game-title-line h4 { flex:1; min-width:0; }
.favorite-btn { flex:none; width:32px; height:32px; border:1px solid #e1e7f3; border-radius:10px; background:#fff; color:#9aa7bf; font-size:18px; line-height:1; padding:0; }
.favorite-btn:hover,.favorite-btn.is-active { color:#ef5ca6; border-color:#f3c3da; background:#fff3f8; }
.share-btn { font-size: 14px; }
.share-btn:hover { color:#315bff; border-color:#c9d6f1; background:#f0f4ff; }
.swipe-grid { min-width:0; }
.game-cover { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#0e214d,#142c67); overflow:hidden; }
.game-cover img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease,filter .35s ease; }.game-card:hover .game-cover img{transform:scale(1.035);filter:saturate(1.06)}
.game-cover-fallback { width:100%; height:100%; display:flex; align-items:flex-end; padding:17px; color:white; font-weight:900; font-size:22px; line-height:1.2; letter-spacing:-.02em; background:radial-gradient(circle at 80% 25%,rgba(255,255,255,.18),transparent 15%),linear-gradient(135deg,#172c70,#091537 62%,#147aa0); }
.game-cover::after { content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(to top,rgba(5,10,33,.2),transparent); pointer-events:none; }
.game-badge { position:absolute; z-index:2; top:9px; right:9px; border-radius:999px; padding:5px 11px; font-size:12px; line-height:1; font-weight:900; color:white; background:linear-gradient(135deg,#f4821c,#ff5722); box-shadow:0 4px 12px rgba(230,81,0,.25); }
.game-body { padding:15px 16px 17px; display:flex; flex-direction:column; }
.game-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.game-chip{border-radius:8px;background:#e8f0fe;color:#1742be;border:1px solid #cdddf8;padding:4px 10px;font-size:12.5px;font-weight:750;letter-spacing:.01em}
.game-chip.category{background:#f4ebff;color:#5d26aa;border-color:#e4d0fc}
.game-card h4{margin:0;font-size:17px;font-weight:850;color:#0e1c3e;letter-spacing:-.015em;line-height:1.35}
.game-card p{min-height:42px;height:auto;overflow:hidden;margin:7px 0 12px;color:#35476a;font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.game-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.tag-badge{background:#eef2f9;color:#2c4066;padding:4px 9px;border-radius:7px;font-size:12px;font-weight:650}
.game-card-foot{border-top:1px solid #e1e9f5;padding-top:12px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.game-card-foot small{color:#3d4e70;font-size:13px;font-weight:650;letter-spacing:.01em}
.play-btn{min-width:90px;height:38px;padding:0 15px;border-radius:10px;border:0;color:white;background:linear-gradient(135deg,#2f58ff,#6840f5);font-size:14px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 6px 16px rgba(47,88,255,.24);transition:.18s ease}
.play-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 20px rgba(47,88,255,.32)}
.skeleton{min-height:255px;border-radius:15px;background:linear-gradient(90deg,#edf2fa 25%,#f8faff 38%,#edf2fa 58%);background-size:300% 100%;animation:shimmer 1.3s infinite}@keyframes shimmer{to{background-position:-100% 0}}
.empty-state{grid-column:1/-1;min-height:190px;border:1px dashed #cfdaee;border-radius:16px;background:#fbfcff;display:grid;place-items:center;text-align:center;color:#7e8da6;padding:32px;font-size:14px}.empty-state strong{display:block;color:#455574;font-size:16px;margin-bottom:6px}.load-more-wrap{display:flex;justify-content:center;padding:20px 0 6px}

.about-card { margin-top:27px; padding:20px 24px; border:1px solid #dfe7f5; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:var(--shadow); }
.about-identity{display:flex;align-items:center;gap:14px;min-width:0}.credit-logo.large{width:56px;height:56px;flex:none}.about-identity small{color:#79879c;font-size:12px}.about-identity h3{margin:2px 0 4px;color:#3157da;font-size:17px}.about-identity p{margin:0;max-width:760px;color:#6d7b92;font-size:13.5px;line-height:1.6}.about-card .secondary-btn{flex:none;font-size:13.5px}.footer{padding-top:33px;padding-bottom:12px;text-align:center;color:#8593a8;font-size:13px;line-height:1.6}.footer strong{color:#3f5ebd}.mobile-bottom{display:none}.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,130%);opacity:0;pointer-events:none;background:#15254b;color:white;border-radius:12px;box-shadow:var(--shadow-lg);padding:12px 18px;max-width:min(88vw,560px);font-size:14px;transition:.22s ease}.toast.show{transform:translate(-50%,0);opacity:1}

@media (max-width:1180px){:root{--sidebar:192px}.page-shell{padding-left:20px;padding-right:20px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{grid-template-columns:.9fr 1.1fr}.hero-copy{padding-left:30px}}
@media (max-width:900px){:root{--sidebar:0px}body{padding-top:64px;padding-bottom:70px}.sidebar{transform:translateX(-105%);width:min(82vw,290px);transition:transform .22s ease;box-shadow:18px 0 50px rgba(18,40,90,.16)}.sidebar.is-open{transform:translateX(0)}.mobile-header{position:fixed;inset:0 0 auto 0;height:64px;padding:0 14px;z-index:28;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.brand-mobile{justify-self:center}.brand-mobile strong{font-size:12px;color:#2f55d6}.icon-btn{width:40px;height:40px;border:0;border-radius:11px;background:#f2f5ff;color:#3556bd;font-weight:900;font-size:18px}.page-shell{margin-left:0;padding:16px 14px 28px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:30px 24px 20px}.hero-art{padding:0 12px 12px}.hero-art img{min-height:0;max-height:330px}.math-float.m1,.math-float.m4{display:none}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-toolbar{align-items:flex-start;flex-direction:column}.search-box{width:100%}.all-head{align-items:flex-start;flex-direction:column}.filter-actions{width:100%;flex-wrap:wrap}.filter-actions>span{margin-right:auto}.random-tools{align-items:stretch}.random-tools strong{width:100%;margin:0}.random-tools select,.random-tools button{flex:1;min-width:0}.mobile-bottom{position:fixed;z-index:27;inset:auto 0 0;min-height:64px;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);backdrop-filter:blur(16px)}.mobile-bottom button{border:0;background:transparent;color:#687896;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:800}.mobile-bottom button span{font-size:18px;line-height:1;color:#3f5fd2}.swipe-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;overscroll-behavior-x:contain}.swipe-grid .game-card{flex:0 0 min(82vw,300px);scroll-snap-align:start}}
@media (max-width:900px){.hero-copy{padding:22px 20px 14px}.hero-art{padding:0 10px 10px}.hero-art img{max-height:min(30vh,230px);object-fit:contain}.hero p{margin:10px 0 15px}.hero-benefits{margin-top:12px}.hero-actions{gap:7px}.hero-actions .primary-btn,.hero-actions .secondary-btn{min-height:38px;padding-left:11px;padding-right:11px;font-size:11px}}
@media (max-width:560px){.page-shell{padding-left:11px;padding-right:11px}.hero{border-radius:19px}.hero-copy{padding:25px 18px 17px}.hero-brandline{margin-bottom:12px}.hero h1{font-size:29px}.hero h2{font-size:21px}.hero p{font-size:12px;margin-top:12px}.hero-benefits{margin-top:14px;gap:5px}.hero-benefits span{font-size:8px}.hero-art{padding:0 8px 8px}.stats-grid{gap:9px;margin-top:10px}.stat-card{min-height:72px;padding:12px 10px;gap:8px}.stat-dot{width:34px;height:34px;font-size:15px}.stat-card strong{font-size:21px}.mini-bars{display:none}.catalog-toolbar{margin-top:9px;padding-top:13px}.content-section{padding-top:17px}.section-title-row{margin-bottom:9px}.section-title h3{font-size:15px}.game-grid{gap:9px}.game-card{border-radius:15px}.game-body{padding:12px 12px 14px}.game-card h4{font-size:15px;font-weight:850}.game-card p{font-size:12px;line-height:1.5;margin-bottom:8px;height:auto;min-height:36px}.game-chip{font-size:11px;padding:3px 8px}.game-cover-fallback{padding:11px;font-size:16px}.play-btn{min-width:72px;padding:0 10px;font-size:11.5px;height:32px}.game-card-foot small{font-size:11px;max-width:none}.about-card{flex-direction:column;align-items:stretch;padding:15px}.about-card .secondary-btn{width:100%}.about-identity{align-items:flex-start}.credit-logo.large{width:46px;height:46px}.link-btn{font-size:10px}.filter-actions select,.filter-actions .ghost-btn{flex:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}


/* v1.6.0 lightweight content protection. CSS-only, no layout reflow. */
.content-watermark{position:fixed;z-index:24;left:calc(var(--sidebar) + 18px);bottom:16px;display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(62,89,170,.14);border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(32,57,120,.05);opacity:.34;pointer-events:none;user-select:none;transform:translate3d(0,0,0);animation:watermarkDrift 22s ease-in-out infinite alternate}
.content-watermark img{width:18px;height:18px;border-radius:50%;object-fit:contain}.content-watermark span{font-size:8px;font-weight:900;letter-spacing:.12em;color:#2e4fb0}
.game-card,.game-cover,.game-cover img,.hero-art img,.credit-logo{-webkit-user-drag:none}.game-card img,.hero-art img{user-select:none;-webkit-user-select:none}
@keyframes watermarkDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(54px,-10px,0)}}
@media(max-width:900px){.content-watermark{left:10px;bottom:78px;opacity:.28}.content-watermark span{display:none}}
@media(prefers-reduced-motion:reduce){.content-watermark{animation:none!important}}


/* Game Modal */
.game-modal { margin:auto; border:0; padding:0; background:transparent; max-width:min(92vw,860px); width:100%; border-radius:24px; outline:none; z-index:99999; }
.game-modal::backdrop { background:rgba(13,23,64,0.6); backdrop-filter:blur(8px); z-index:99998; }
.modal-content { background:#fff; border-radius:24px; overflow:hidden; position:relative; box-shadow:0 24px 60px rgba(11,21,58,0.25); display:flex; flex-direction:column; max-height:85vh; z-index:99999; }
.modal-close { position:absolute; top:12px; right:12px; z-index:10; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,0.9); color:#31426b; font-size:18px; line-height:1; cursor:pointer; backdrop-filter:blur(4px); box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:0.2s ease; display:grid; place-items:center; padding:0; }
.modal-close:hover { background:#fff; color:#e73a70; transform:scale(1.05); }
.modal-main { display:grid; grid-template-columns:1.3fr 1fr; overflow-y:auto; background:white; }
.modal-cover { background:#e1e7f3; aspect-ratio:4/3; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.modal-cover img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.modal-cover-fallback { position:absolute; inset:0; display:flex; align-items:flex-end; padding:24px; color:white; font-size:28px; font-weight:900; line-height:1.2; background:radial-gradient(circle at 80% 25%,rgba(255,255,255,.18),transparent 15%),linear-gradient(135deg,#172c70,#091537 62%,#147aa0); }
.modal-info { padding:32px 28px; display:flex; flex-direction:column; }
.modal-info h2 { margin:8px 0 4px; font-size:22px; letter-spacing:-0.02em; line-height:1.2; color:#1a2b56; }
.modal-info #modalSubject { margin:0 0 16px; font-size:12px; color:#71809c; }
.modal-desc { font-size:13px; color:#556685; line-height:1.7; flex:1; margin-bottom:16px; overflow-y:auto; padding-right:8px; scrollbar-width:thin; }
.modal-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.modal-play-btn { width:100%; height:48px; font-size:14px; border-radius:14px; text-decoration:none; flex:none; box-shadow:0 8px 24px rgba(69,77,239,.3); }
.modal-related { background:#f8faff; padding:24px 28px; border-top:1px solid #e8eef9; flex:none; }
.modal-related h3 { margin:0 0 14px; font-size:15px; color:#233a77; font-weight:800; }
.game-modal[open] { animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes modalFadeIn { from { opacity:0; transform:translateY(20px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:768px) {
  .modal-main { grid-template-columns:1fr; }
  .modal-cover { aspect-ratio:16/9; min-height:auto; }
  .modal-info { padding:24px 20px; }
  .modal-info h2 { font-size:20px; }
  .modal-desc { font-size:12px; margin-bottom:20px; }
  .modal-related { padding:20px; }
}

/* ===========================
   v1.7.0 readability + dynamic hero
   =========================== */
.hero-cover-layer{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;border-radius:inherit;pointer-events:none}
.hero-cover-layer img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.002)}
.hero-cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,43,.78) 0%,rgba(8,18,58,.64) 42%,rgba(8,16,53,.28) 72%,rgba(8,15,48,.18) 100%)}
.hero.is-custom-cover .hero-cover-layer{display:block}
.hero.is-custom-cover .hero-art{opacity:0;visibility:hidden}
.hero.is-custom-cover .hero-grid{opacity:.18}
.hero.is-custom-cover .hero-orb,.hero.is-custom-cover .math-float{opacity:.22}
.hero-copy,.hero-art{position:relative;z-index:3}
.hero-brandline{position:relative;z-index:3}

@media (min-width:901px){
  :root{--sidebar:258px}
  .sidebar{padding:28px 22px 22px}
  .brand{gap:13px;margin-bottom:24px}
  .brand img{width:54px;height:54px}
  .brand strong{font-size:16px}
  .brand span{font-size:12px}
  .nav-heading{font-size:11px;margin:20px 12px 7px}
  .nav-item{font-size:15px;padding:14px 15px;border-radius:13px;gap:12px}
  .nav-icon{font-size:17px}
  .grade-button{font-size:14px;padding:10px 14px}
  .grade-button small{font-size:11px}
  .admin-entry{padding:13px;border-radius:14px}
  .admin-entry strong{font-size:12px}
  .admin-entry small{font-size:10px}
  .creator-mini small{font-size:9px}.creator-mini strong{font-size:11px}

  .page-shell{padding:32px 34px 82px}
  .section-pad{max-width:1510px}
  .hero{min-height:450px;border-radius:25px;grid-template-columns:1.08fr .92fr}
  .hero-copy{padding:54px 42px}
  .hero-brandline{font-size:12px;letter-spacing:.01em;margin-bottom:22px}
  .hero h1{font-size:clamp(46px,3.7vw,58px);line-height:1.02;white-space:nowrap}
  .hero h2{font-size:clamp(28px,2.5vw,38px);margin-top:16px}
  .hero p{max-width:680px;font-size:16px;line-height:1.82;margin:22px 0 28px}
  .primary-btn,.secondary-btn,.ghost-btn{font-size:13px}
  .hero-cta,.hero-secondary{min-height:48px;padding:0 21px;font-size:14px}
  .hero-benefits span{font-size:11px;padding:8px 11px}

  .stats-grid{gap:16px;margin-top:18px}
  .stat-card{min-height:104px;padding:19px 18px;gap:14px}
  .stat-dot{width:46px;height:46px;font-size:20px}
  .stat-card small{font-size:12px}
  .stat-card strong{font-size:31px}
  .stat-card em{font-size:11px}

  .catalog-toolbar{min-height:88px;margin-top:25px}
  .catalog-toolbar h3{font-size:19px;letter-spacing:-.02em}
  .catalog-toolbar p{font-size:12px;margin-top:5px}
  .search-box{height:50px;border-radius:14px}
  .search-box input{font-size:14px}
  .category-chips{gap:10px;padding-bottom:9px}
  .category-chip{font-size:12px;padding:10px 14px}

  .content-section{padding-top:30px}
  .section-title-row{margin-bottom:17px}
  .section-title{gap:12px}
  .title-icon{width:39px;height:39px;border-radius:13px;font-size:17px}
  .section-title h3{font-size:22px;font-weight:900;color:#17345f}
  .section-title p{font-size:12px;margin-top:4px}
  .link-btn{font-size:13px}
  .filter-actions>span{font-size:12px}
  .filter-actions select,.filter-actions .ghost-btn{height:42px;font-size:12px}

  .game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .game-card{border-radius:19px}
  .game-body{padding:16px 17px 18px}
  .game-chip{font-size:12.5px;padding:5px 10px}
  .game-card h4{font-size:18px;line-height:1.35;font-weight:850}
  .game-card p{font-size:13.5px;line-height:1.65;min-height:42px;height:auto;margin:6px 0 12px}
  .game-card-foot{padding-top:12px}
  .game-card-foot small{font-size:12.5px}
  .play-btn{min-width:92px;height:38px;font-size:13px;border-radius:11px}
  .game-badge{font-size:11px;padding:6px 11px}
  .empty-state{font-size:14px;min-height:220px}

  .about-card{padding:24px 26px;margin-top:38px}
  .credit-logo.large{width:64px;height:64px}
  .about-identity small{font-size:11px}
  .about-identity h3{font-size:20px}
  .about-identity p{font-size:12px;line-height:1.75}
  .about-card .secondary-btn{font-size:12px}
  .footer{font-size:11px}
}
@media (min-width:901px) and (max-width:1240px){
  :root{--sidebar:230px}
  .page-shell{padding-left:24px;padding-right:24px}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-copy{padding:42px 30px}
  .hero h1{font-size:42px;white-space:normal}
}
@media (max-width:900px){
  .hero h1{font-size:clamp(32px,8vw,44px)}
  .hero h2{font-size:clamp(23px,5.5vw,31px)}
  .hero p{font-size:14px;line-height:1.7}
  .section-title h3{font-size:18px}
  .section-title p{font-size:11px}
  .game-card h4{font-size:16px;font-weight:850}
  .game-card p{font-size:12.5px;height:auto;min-height:36px}
  .game-chip{font-size:11.5px;padding:4px 8px}
  .play-btn{font-size:12px;height:34px;min-width:80px}
}
@media (max-width:560px){
  .hero h1{font-size:34px}
  .hero h2{font-size:24px}
  .hero p{font-size:13px}
  .hero-benefits span{font-size:9px}
  .stat-card small{font-size:11px}.stat-card strong{font-size:24px}
  .catalog-toolbar h3{font-size:17px}.catalog-toolbar p{font-size:11px}
  .category-chip{font-size:10px;padding:8px 11px}
  .section-title h3{font-size:17px}
  .game-card h4{font-size:15px;font-weight:850}
  .game-card p{font-size:12px}
  .game-card-foot small{font-size:11px}
}