/* Top navigation and page surfaces shared by the directory and game pages. */
html[data-portal-theme="light"] {
  color-scheme: light;
  --inner-bg:#f4f7f9; --inner-surface:#fff; --inner-raised:#edf3f5;
  --inner-text:#182337; --inner-muted:#607184; --inner-line:#dfe8ec;
  --inner-accent:#087f92; --inner-accent-soft:#e0f3f4;
  --inner-shadow:0 10px 28px rgba(29,50,70,.07);
}
html[data-portal-theme="dark"] {
  color-scheme: dark;
  --inner-bg:#101827; --inner-surface:#19263b; --inner-raised:#213149;
  --inner-text:#f4f7fc; --inner-muted:#a9b7ca; --inner-line:#2c3d55;
  --inner-accent:#6ecad5; --inner-accent-soft:#143e50;
  --inner-shadow:0 12px 30px rgba(0,0,0,.18);
}

.portal-header.portal-wrap { position:relative; z-index:30; width:100%; background:var(--inner-surface); border-color:var(--inner-line); color:var(--inner-text); }
.portal-header .portal-header-in { max-width:1500px; min-height:70px; padding:10px 24px; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(170px,220px) auto; gap:16px 25px; align-items:center; }
.portal-header .portal-logo { display:inline-flex; align-items:center; gap:9px; color:var(--inner-text) !important; font-size:1.03rem; line-height:1.05; letter-spacing:-.035em; white-space:nowrap; }
.portal-header .portal-logo .home-logo-mark { display:block; width:35px; height:35px; flex:none; }
.portal-header .portal-logo .home-logo-mark img { display:block; width:100%; height:100%; }
.portal-header .portal-logo .home-logo-accent { color:var(--inner-accent); }
.portal-header .portal-logo small { display:block; margin-top:4px; color:var(--inner-muted); font-size:.5rem; font-weight:800; letter-spacing:.16em; }
.portal-header .portal-header-in > nav { min-width:0; }
.portal-header .portal-nav { display:flex; flex-wrap:nowrap; gap:3px; width:max-content; max-width:100%; }
.portal-header .portal-nav a { display:block; padding:8px 10px; border:0; border-radius:9px; color:var(--inner-muted); font-size:.84rem; font-weight:700; white-space:nowrap; }
.portal-header .portal-nav a:hover { background:var(--inner-raised); color:var(--inner-text); }
.portal-header .portal-nav a[aria-current="page"] { background:var(--inner-accent-soft); color:var(--inner-accent); }
.portal-header .portal-search { min-width:0; flex:none; }
.portal-header .portal-search input { width:100%; padding:9px 12px 9px 36px; border:1px solid var(--inner-line); border-radius:10px; background:var(--inner-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b9aad' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center; color:var(--inner-text); }
.portal-header .portal-search input::placeholder { color:var(--inner-muted); }
.portal-header .portal-results { background:var(--inner-surface); border-color:var(--inner-line); box-shadow:var(--inner-shadow); }
.portal-header .portal-results a { color:var(--inner-text); }
.portal-header .portal-results a:hover,.portal-header .portal-results a:focus { background:var(--inner-raised); }
.portal-header .portal-results small,.portal-header .portal-results .none { color:var(--inner-muted); }
.portal-header .home-theme-toggle { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:6px 11px; border:1px solid var(--inner-line); border-radius:9px; background:var(--inner-surface); color:var(--inner-text); font:inherit; font-size:.8rem; font-weight:700; white-space:nowrap; }
.portal-header .home-theme-toggle:hover { background:var(--inner-raised); }
.portal-header .home-theme-icon { font-size:1.1rem; line-height:1; }

.site-subpage.portal-page { background:var(--inner-bg); color:var(--inner-text); min-height:100vh; }
.site-subpage.portal-wrap,.site-subpage .portal-wrap { color:var(--inner-text); }
.site-subpage a { color:var(--inner-accent); }
.site-subpage .portal-crumbs { max-width:1500px; padding:16px 24px 4px; color:var(--inner-muted); }
.site-subpage .portal-crumbs li + li::before { color:var(--inner-muted); }
.site-subpage .portal-main { max-width:1500px; padding:18px 24px 64px; }
.site-subpage .portal-main > h1 { margin:0 0 10px; color:var(--inner-text); font-size:clamp(1.8rem,3vw,2.65rem); letter-spacing:-.04em; line-height:1.13; }
.site-subpage .portal-main > h1 + p { max-width:850px; margin:0 0 25px; color:var(--inner-muted); font-size:1rem; line-height:1.65; }
.site-subpage .portal-main > h2 { margin:28px 0 9px; color:var(--inner-text); font-size:1.3rem; letter-spacing:-.02em; }
.site-subpage .portal-main > p,.site-subpage .portal-main > ul:not(.portal-grid) { max-width:860px; color:var(--inner-muted); line-height:1.7; }
.site-subpage .portal-main .portal-section { margin:27px 0; }
.site-subpage .portal-main .portal-section h2 { color:var(--inner-text); letter-spacing:-.025em; }
.site-subpage .portal-main .portal-section > p { max-width:900px; line-height:1.7; }
.site-subpage .portal-main .portal-section:not(:has(.portal-grid)):not(:has(.portal-cats)) { max-width:1000px; padding:20px 24px; border:1px solid var(--inner-line); border-radius:15px; background:var(--inner-surface); box-shadow:var(--inner-shadow); }
.site-subpage .portal-main .portal-section h3 { color:var(--inner-text); }
.site-subpage .portal-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.site-subpage .portal-card,.site-subpage .portal-cat { background:var(--inner-surface); border-color:var(--inner-line); box-shadow:var(--inner-shadow); }
.site-subpage .portal-card { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.site-subpage .portal-card:hover { transform:translateY(-3px); border-color:var(--inner-accent); box-shadow:0 16px 28px rgba(20,42,56,.13); }
.site-subpage .portal-card a.thumb { background:var(--inner-raised); }
.site-subpage .portal-card h3 a,.site-subpage .portal-cat h3 a { color:var(--inner-text); }
.site-subpage .portal-card p,.site-subpage .portal-cat p,.site-subpage .portal-section p,.site-subpage .portal-section li { color:var(--inner-muted); }
.site-subpage .portal-card .tagline,.site-subpage .portal-cat .count { color:var(--inner-accent); font-weight:750; }
.site-subpage .portal-filters { gap:9px; margin:14px 0; }
.site-subpage .portal-filters button,.site-subpage .portal-filters select,.site-subpage .portal-filters input { min-height:38px; border:1px solid var(--inner-line); border-radius:9px; background:var(--inner-surface); color:var(--inner-text); }
.site-subpage .portal-filters button { cursor:pointer; }
.site-subpage .portal-filters button:hover { border-color:var(--inner-accent); }
.site-subpage .portal-filters button[aria-pressed="true"] { background:var(--inner-accent-soft); border-color:var(--inner-accent); color:var(--inner-accent); }
.site-subpage .portal-filters label,.site-subpage #portal-count,.site-subpage #portal-none { color:var(--inner-muted); font-size:.87rem; font-weight:650; }
.site-subpage .portal-btn { border-radius:9px; background:var(--inner-accent); color:#fff !important; }
.site-subpage .portal-footer,.game-page .portal-footer { background:var(--inner-surface); border-color:var(--inner-line); color:var(--inner-muted); }
.site-subpage .portal-footer-in,.game-page .portal-footer-in { max-width:1500px; }
.site-subpage .portal-footer strong,.game-page .portal-footer strong { color:var(--inner-text); }
.site-subpage .portal-footer a,.game-page .portal-footer a { color:var(--inner-muted); }
.site-subpage .portal-footer a:hover,.game-page .portal-footer a:hover { color:var(--inner-accent); }
.site-subpage .portal-note { color:var(--inner-muted); }
.site-subpage.info-page { display:flex; flex-direction:column; }
.site-subpage.info-page .portal-crumbs { width:100%; max-width:1000px; }
.site-subpage.info-page .portal-main { width:min(100% - 48px,1000px); max-width:1000px; margin:16px auto 52px; padding:31px 40px 43px; border:1px solid var(--inner-line); border-radius:17px; background:var(--inner-surface); box-shadow:var(--inner-shadow); }
.site-subpage.info-page .portal-main > h2 { padding-top:23px; border-top:1px solid var(--inner-line); }
.site-subpage.info-page .portal-main > p { max-width:790px; }
.site-subpage.info-page .portal-footer { margin-top:auto; }

.game-page .portal-crumbs { width:100%; max-width:1500px; padding:11px 24px; color:var(--inner-muted); }
.game-page .portal-crumbs a { color:var(--inner-accent); }
.game-page .portal-crumbs li + li::before { color:var(--inner-muted); }
.game-page .portal-info { background:var(--inner-bg); color:var(--inner-text); border-top:1px solid var(--inner-line); }
.game-page .portal-info-in { max-width:1200px; }
.game-page .portal-info .portal-section { padding:20px 23px; border:1px solid var(--inner-line); border-radius:15px; background:var(--inner-surface); }
.game-page .portal-info h2,.game-page .portal-info h3 { color:var(--inner-text); }
.game-page .portal-info p,.game-page .portal-info li { color:var(--inner-muted); }
.game-page .portal-info a { color:var(--inner-accent); }
.game-page .portal-info .portal-card { background:var(--inner-surface); border-color:var(--inner-line); }
.game-page .portal-info .portal-card h3 a { color:var(--inner-text); }
.game-page .portal-info-grid div,.game-page .portal-faq details { background:var(--inner-raised); border-color:var(--inner-line); }
.game-page .portal-info-grid dt { color:var(--inner-muted); }
.game-page .portal-info-grid dd,.game-page .portal-faq summary { color:var(--inner-text); }

@media (max-width:1100px) {
  .portal-header .portal-header-in { grid-template-columns:auto minmax(160px,1fr) auto; gap:8px 16px; }
  .portal-header .portal-header-in > nav { grid-column:1/-1; grid-row:2; overflow-x:auto; scrollbar-width:none; }
  .portal-header .portal-header-in > nav::-webkit-scrollbar { display:none; }
  .portal-header .portal-search { grid-column:2; grid-row:1; }
  .portal-header .home-theme-toggle { grid-column:3; grid-row:1; }
}
@media (max-width:640px) {
  .portal-header .portal-header-in { grid-template-columns:minmax(0,1fr) auto; padding:10px 13px 7px; gap:8px; }
  .portal-header .portal-logo { grid-column:1; grid-row:1; font-size:.95rem; }
  .portal-header .portal-logo .home-logo-mark { width:32px; height:32px; }
  .portal-header .home-theme-toggle { grid-column:2; grid-row:1; min-height:34px; }
  .portal-header .portal-search { grid-column:1/-1; grid-row:2; }
  .portal-header .portal-search input { padding-top:8px; padding-bottom:8px; }
  .portal-header .portal-header-in > nav { grid-column:1/-1; grid-row:3; }
  .portal-header .portal-nav { gap:2px; }
  .portal-header .portal-nav a { font-size:.8rem; padding:7px 9px; }
  .portal-header .portal-results { right:auto; width:min(300px,calc(100vw - 26px)); }
  .site-subpage .portal-crumbs,.game-page .portal-crumbs { padding:10px 13px 3px; }
  .site-subpage .portal-main { padding:15px 13px 36px; }
  .site-subpage .portal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .site-subpage .portal-card .body { padding:9px; }
  .site-subpage .portal-card h3 { font-size:.87rem; }
  .site-subpage .portal-card p { font-size:.75rem; }
  .site-subpage .portal-main .portal-section:not(:has(.portal-grid)):not(:has(.portal-cats)) { padding:16px; }
  .game-page .portal-info .portal-section { padding:15px; }
  .site-subpage.info-page .portal-main { width:calc(100% - 26px); margin:12px auto 30px; padding:22px 20px 30px; }
}
@media (max-width:370px) { .portal-header .home-theme-label { display:none; } }
@media (prefers-reduced-motion:reduce) { .site-subpage .portal-card { transition:none; } .site-subpage .portal-card:hover { transform:none; } }

/* Game Information: a strip of short facts, then full-width rows whose list items read as chips. */
.game-page .portal-info-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; max-width:none; margin:4px 0 0; border:1px solid var(--inner-line); border-radius:13px; overflow:hidden; background:var(--inner-line); }
.game-page .portal-info-grid div { padding:14px 17px; border:0; border-radius:0; background:var(--inner-surface); }
.game-page .portal-info-grid dt { font-size:.69rem; font-weight:700; letter-spacing:.09em; }
.game-page .portal-info-grid dd { margin:5px 0 0; font-weight:650; line-height:1.4; }
.game-page .portal-info-grid div:has(ul) { grid-column:1/-1; display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; align-items:start; }
.game-page .portal-info-grid div:has(ul) dt { padding-top:7px; }
.game-page .portal-info-grid div:has(ul) dd { margin:0; }
.game-page .portal-info-grid ul { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.game-page .portal-info-grid li { padding:5px 12px; border:1px solid var(--inner-line); border-radius:999px; background:var(--inner-raised); color:var(--inner-text); font-size:.86rem; font-weight:550; line-height:1.35; }
@media(max-width:900px) {
  .game-page .portal-info-grid { grid-template-columns:1fr; }
  .game-page .portal-info-grid div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:baseline; padding:12px 14px; }
  .game-page .portal-info-grid div:not(:has(ul)) dd { margin:0; }
  .game-page .portal-info-grid div:has(ul) { grid-template-columns:110px minmax(0,1fr); }
}
@media(max-width:520px) {
  .game-page .portal-info-grid div:has(ul) { grid-template-columns:1fr; gap:8px; }
  .game-page .portal-info-grid div:has(ul) dt { padding-top:0; }
}