/* CIT Tools home page, "Game menu" design (5 October 2026). The groups are a big menu on the left, the tools of the
   chosen group are cards on the right, each with its description. Dark is the first look; the button in the header
   switches to light and the choice is kept on the device (cittools-theme). */
@font-face{font-family:Anton;src:url('anton.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HubBody;src:url('roboto-condensed.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HubBody;src:url('roboto-condensed-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#0b1118;--panel:#131e2b;--panel2:#18263a;--line:#243449;--line2:#34495f;--text:#eef3f8;--muted:#a9b8c8;--dim:#8494a7;--gold:#f2c14e;--gold2:#ffd97a;--navy:#152f4b;--focus:#93c5fd;
  --ids:#f2c14e;--play:#4fd1a1;--money:#6cb8ff;--design:#c79bff;--forum:#ff9f6e;--games:#ff7f96;--top:#0b1118eb;
  --body:HubBody,'Arial Narrow',Arial,sans-serif;--head:Anton,Impact,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#eef2f7;--panel:#ffffff;--panel2:#f3f6fa;--line:#d6dee8;--line2:#b7c3d1;--text:#13243a;--muted:#465a70;--dim:#5d6f84;--gold:#a87100;--gold2:#8a5c00;--focus:#2563eb;
  --ids:#a87100;--play:#0d8a61;--money:#1b6fc2;--design:#7a46c8;--forum:#c2561a;--games:#c9365a;--top:#152f4bf7}
[data-group=ids],[data-category=ids]{--c:var(--ids)}
[data-group=play],[data-category=play]{--c:var(--play)}
[data-group=money],[data-category=money]{--c:var(--money)}
[data-group=design],[data-category=design]{--c:var(--design)}
[data-group=forum],[data-category=forum]{--c:var(--forum)}
[data-group=games],[data-category=games]{--c:var(--games)}
[data-category=favorites]{--c:var(--gold)}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:10px;left:10px;z-index:60;background:#fff;color:#152f4b;padding:10px 16px;transform:translateY(-180%);border:2px solid var(--focus);border-radius:6px}
.skip-link:focus{transform:none}

/* the San Andreas map behind the page, blurred and dimmed */
.bgmap{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bgmap::before{content:"";position:absolute;inset:-30px;background:url('menu/sa-map-bg.webp') 60% 40%/cover no-repeat;filter:blur(5px) saturate(.85);opacity:.5}
.bgmap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,color-mix(in srgb,var(--bg) 62%,transparent) 45%,color-mix(in srgb,var(--bg) 78%,transparent) 100%)}
:root[data-theme=light] .bgmap::before{opacity:.38}

/* header: the same parts as before (logo, Wiki, Forum, Changelog, sign in, dark or light); the Play CIT bar adds its own */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;min-height:64px;padding:8px 22px;background:var(--top);backdrop-filter:blur(10px);border-bottom:1px solid #243449;color:#eef3f8}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;flex-shrink:0}
.brand-mark{width:44px;height:44px;display:block;border-radius:8px}
.brand-name{display:block;font:400 24px/1 var(--head);letter-spacing:.5px}
.brand-domain{display:block;margin-top:3px;font-size:12px;line-height:1;letter-spacing:2px;color:#9fb0c3}
.header-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.nav{display:flex;align-items:center;gap:20px;font-size:16.5px;color:#c5d2e0}
.nav a{padding-block:10px}
.nav a:hover{color:#fff}
.account-button{min-height:40px;padding:6px 13px;border-radius:9px;font-size:15.5px}
.theme-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid #73849a;border-radius:9px;background:#ffffff0a;color:#fff;font-size:15.5px;white-space:nowrap}
.theme-toggle:hover{background:#ffffff18;border-color:#c1cddd}
.theme-icon{width:16px;height:16px;filter:brightness(0) invert(1)}
.theme-moon{display:none}
:root[data-theme=light] .theme-moon{display:block}
:root[data-theme=light] .theme-sun{display:none}

/* the menu on the left */
.app{display:grid;grid-template-columns:330px minmax(0,1fr);align-items:start;max-width:1500px;margin:0 auto}
.menu{position:sticky;top:65px;max-height:calc(100vh - 65px);overflow:auto;padding:20px 16px 18px 0}
.search{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 0 14px 22px;padding:0 6px 0 14px;border-radius:12px;border:1px solid var(--line2);background:#0c151f}
:root[data-theme=light] .search{background:#fff}
.search:focus-within{border-color:var(--gold)}
.search-icon{width:20px;height:20px;flex:none;opacity:.7;filter:brightness(0) invert(1)}
:root[data-theme=light] .search-icon,:root[data-theme=light] .clear-icon{filter:none}
.search input{flex:1;min-width:0;min-height:44px;border:0;outline:0;background:transparent;font-size:17px}
.search input:focus-visible{outline:none}
.search input::placeholder{color:var(--dim);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{flex:none;margin-right:8px;padding:2px 7px;border:1px solid var(--line2);border-radius:6px;color:var(--dim);font:400 12px/1.4 var(--body)}
.clear-search{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:8px;background:transparent}
.clear-search:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.clear-icon{width:16px;height:16px;filter:brightness(0) invert(1)}
.mi{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;width:100%;min-height:58px;padding:7px 14px 7px 18px;border:0;border-left:4px solid transparent;border-radius:0 14px 14px 0;background:transparent;text-align:left;transition:background .14s}
.mi b{font:400 25px/1.08 var(--head);letter-spacing:.7px;text-transform:uppercase;color:var(--muted);transition:color .14s}
.mi i{grid-column:1;font-style:normal;font-size:14px;line-height:1.25;color:var(--dim)}
.mi .n{grid-column:2;grid-row:1/3;min-width:30px;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font-size:14px;text-align:center}
.mi:hover{background:color-mix(in srgb,var(--c,var(--text)) 9%,transparent)}
.mi:hover b{color:var(--text)}
.mi[aria-pressed=true]{border-left-color:var(--c,var(--text));background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--text)) 22%,transparent),transparent)}
.mi[aria-pressed=true] b{color:var(--c,var(--text))}
.mi[aria-pressed=true] .n{border-color:var(--c,var(--text));color:var(--text)}
.recent{margin:16px 0 0 22px;padding-top:14px;border-top:1px solid var(--line)}
.recent h2{margin:0 0 8px;font:400 17px/1 var(--head);letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 6px 6px 0;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2)}
.pill img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff}
.pill:hover{border-color:var(--gold)}

/* the tools on the right */
.pane{min-width:0;padding:24px 24px 0 18px;scroll-margin-top:70px;outline:none}
.phead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
h1{margin:0;font:400 46px/1 var(--head);letter-spacing:.6px;text-transform:uppercase;color:var(--c,var(--text))}
.phead p{margin:0;color:var(--muted);font-size:17px}
.sec{margin:0 0 20px}
.sec h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;font:400 21px/1.1 var(--head);letter-spacing:.6px;text-transform:uppercase;color:var(--c)}
.sec h2 small{font:400 15px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
.sec.one h2{display:none}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.it{position:relative;min-width:0}
.tool-card{display:flex;align-items:flex-start;gap:13px;height:100%;min-height:88px;padding:13px 14px;border-radius:16px;border:1px solid var(--line);border-left:3px solid var(--c);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.it:hover .tool-card{transform:translateY(-2px);border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--panel));box-shadow:0 12px 26px rgba(0,0,0,.26)}
.it.best .tool-card{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.tool-art{width:56px;height:56px;border-radius:14px;flex:none;object-fit:contain;background:#fff}
/* the eight ID lists: two rows of four posters (a 12-column grid); a big picture on top,
   the name and the description under it */
.posters{grid-template-columns:repeat(12,minmax(0,1fr))}.posters .it{grid-column:span 3}
.posters .tool-card{flex-direction:column;gap:0;padding:0;overflow:hidden;border-left-width:1px;border-top:3px solid var(--c)}
.poster{display:flex;align-items:flex-end;justify-content:center;flex:none;width:100%;height:150px;padding:14px 12px 0;background:radial-gradient(120% 110% at 50% 0,color-mix(in srgb,var(--c) 30%,transparent),transparent 74%)}
.poster img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))}
.posters .txt{padding:10px 14px 14px}
.posters .nm{padding-right:0}
/* an ID list outside its row (under Favorites): the normal card, with the picture as a small tile */
.cards:not(.posters) .poster{width:96px;height:76px;padding:6px 6px 0;border-radius:12px;border:1px solid var(--line);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 42%,var(--panel2)),var(--panel2) 80%)}
.txt{min-width:0}
.nm{padding-right:26px;line-height:1.2}
.tool-card h3{display:inline;margin:0;font-size:18.5px;font-weight:700;line-height:1.2}
.tool-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:rgba(242,193,78,.16);color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.tool-badge.test{background:color-mix(in srgb,var(--dim) 20%,transparent);color:var(--muted)}
:root[data-theme=light] .tool-badge:not(.test){background:rgba(168,113,0,.13)}
.d{margin:3px 0 0;color:var(--muted);font-size:15px;line-height:1.33}
.star{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--dim);font-size:16px;line-height:1;opacity:0}
.star:hover{color:var(--gold2);border-color:var(--line2)}
.star[aria-pressed=true]{color:var(--gold)}
.it:hover .star,.star:focus-visible,.star[aria-pressed=true]{opacity:1}
.empty{margin:6px 0 20px;padding:22px 20px;border:1px dashed var(--line2);border-radius:14px;color:var(--muted)}
.empty h2{margin:0 0 4px;font-size:20px;color:var(--text)}
.empty p{margin:0 0 12px}
.plain-button{min-height:40px;padding:8px 18px;border:0;border-radius:9px;background:var(--gold);color:#1a1405;font-weight:700}
:root[data-theme=light] .plain-button{background:var(--navy);color:#fff}
.no-script{margin:0 0 16px;color:var(--muted)}

.footer{position:relative;margin-top:40px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--dim);font-size:14.5px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;max-width:1500px;margin:0 auto;padding:18px 22px}
.footer-brand{letter-spacing:1px}
.footer-links{display:flex;gap:22px;color:var(--muted)}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.live-status{display:flex;gap:18px;flex-wrap:wrap}
.live-status b{font-weight:400;color:var(--text)}

@media (max-width:1180px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.app{grid-template-columns:290px minmax(0,1fr)}
  /* a narrower screen (where every other group has two cards a row): the same two rows of four posters */
  .posters{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media (max-width:900px){.nav{gap:14px;font-size:16px}.header-actions{gap:10px}}
@media (max-width:760px){
  /* phone: the header is two short lines and scrolls away; the menu is a block of buttons above the tools */
  .topbar{position:static;flex-wrap:wrap;gap:6px 8px;padding:8px 12px;backdrop-filter:none}
  .header-actions{display:contents}
  .brand{order:1;margin-right:auto}
  .brand-name{font-size:20px}.brand-mark{width:38px;height:38px}.brand-domain{display:none}
  .account-button{order:2;min-height:44px}
  .theme-toggle{order:3;min-height:44px;padding:6px 10px}
  .nav{order:4;flex:1 0 100%;flex-wrap:wrap;gap:0 16px;font-size:16px}
  .nav a{padding-block:12px}
  /* the Play CIT button of the shared bar is 30 px tall on phones; here it gets a taller area to tap (the line is 46 px) */
  .topbar a.citpb-hplay{height:40px!important}
  .app{display:block}
  .menu{position:static;max-height:none;overflow:visible;padding:12px 12px 0}
  .search{margin:0 0 10px}
  .search kbd{display:none}
  .search input{font-size:16px}
  #menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mi{min-height:46px;padding:4px 8px 4px 10px;border:1px solid var(--line2);border-left:4px solid var(--c,var(--line2));border-radius:10px;background:color-mix(in srgb,var(--panel) 88%,transparent)}
  .mi b{font:700 14.5px/1.15 var(--body);letter-spacing:.3px;color:var(--text)}
  .mi i{display:none}
  .mi .n{grid-row:1;min-width:26px;padding:1px 6px;font-size:13px}
  .mi[aria-pressed=true]{background:color-mix(in srgb,var(--c,var(--text)) 24%,var(--panel))}
  .recent{margin:12px 0 0;padding-top:10px}
  .pane{padding:16px 12px 0;scroll-margin-top:8px}
  h1{font-size:32px}.phead p{font-size:15.5px}
  .cards{grid-template-columns:1fr;gap:8px}
  .tool-card{min-height:80px;padding:11px 46px 11px 12px;backdrop-filter:none}
  .nm{padding-right:0}
  .star{opacity:1;width:44px;height:44px;font-size:18px;top:4px;right:2px}
  /* phone: each ID list is a row again, the picture on the left */
  .posters{grid-template-columns:1fr}
  .posters .it,.posters .it:nth-child(n+4){grid-column:auto}
  .posters .tool-card{flex-direction:row;align-items:stretch;padding:0 46px 0 0;border-top-width:1px;border-left:3px solid var(--c)}
  .posters .poster{width:118px;height:auto;min-height:88px;align-items:center;padding:8px}
  .posters .poster img{max-height:76px}
  .posters .txt{padding:10px 0 10px 12px}
  .cards:not(.posters) .poster{width:86px;height:68px}
  .footer-inner{flex-direction:column;align-items:flex-start;padding:16px 12px}
  .footer-links a{display:inline-block;padding:12px 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.it:hover .tool-card{transform:none}}