/* ============================================================
   it888.space — light/dark theme + toolbox + game styles
   Loaded after site.css. Dark is the original palette (default).
   ============================================================ */

:root { color-scheme: dark; }
html[data-theme="dark"] { color-scheme: dark; }

/* ---------------- light theme ---------------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg:#f4f6fa; --card:#ffffff; --panel:#ffffff; --border:#d9e0ea;
  --text:#111a2b; --muted:#5b6b82; --accent:#b45309;
}
html[data-theme="light"] body { background:var(--bg); color:var(--text); }
html[data-theme="light"] .nav { background:#ffffffF2; border-bottom:1px solid var(--border); }
html[data-theme="light"] .public .nav nav.open { background:#ffffff; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { background:#ffffff; color:var(--text); }
html[data-theme="light"] .spec-grid,
html[data-theme="light"] .catalog-tags span,
html[data-theme="light"] .editorial-placeholder,
html[data-theme="light"] .article-facts section,
html[data-theme="light"] .catalog-grid .spec-grid span { background:#f1f4f9; color:var(--text); }
html[data-theme="light"] .catalog-grid .spec-grid span { color:var(--muted); }
html[data-theme="light"] .post-card img,
html[data-theme="light"] .post-placeholder { background:#e7ecf4; color:var(--muted); }
html[data-theme="light"] th { background:#f1f4f9; color:var(--text); }
html[data-theme="light"] .notice { background:#fff7ea; border-color:#f3d9ad; color:#6b4a12; }
html[data-theme="light"] .public .neutral { color:var(--text); border-color:var(--border); background:#ffffff; }
html[data-theme="light"] .menu-toggle { border-color:var(--border); color:var(--text); background:#ffffff; }
html[data-theme="light"] .nav nav,
html[data-theme="light"] .terminal-bar,
html[data-theme="light"] .merchant-tabs a,
html[data-theme="light"] .catalog-grid .deal-card { background:#ffffff; }
html[data-theme="light"] .terminal-bar small { color:var(--muted); }
html[data-theme="light"] .catalog-filters summary { color:var(--muted); }
html[data-theme="light"] .offer-ended { background:#fff1f1; border-color:#f3c4c4; color:#8a2b2b; }
html[data-theme="light"] .panel,
html[data-theme="light"] .deal-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .tool-page,
html[data-theme="light"] .tool-box { background:var(--card); border-color:var(--border); }
html[data-theme="light"] a:hover { color:var(--accent); }
html[data-theme="light"] .terminal-body,
html[data-theme="light"] .catalog-terminal { background:#0f172a; color:#e5e9f0; }
html[data-theme="light"] .catalog-terminal a:hover { color:#f59e0b; }

/* ---------------- theme toggle ---------------- */
.theme-toggle {
  width:34px; height:34px; padding:0; border-radius:9px;
  background:transparent; border:1px solid var(--border); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); filter:none; }
.theme-toggle .theme-toggle-icon { font-size:16px; line-height:1; }
html[data-theme="light"] .theme-toggle .theme-toggle-icon { transform:rotate(180deg); }
.nav nav { align-items:center; }
.nav .theme-toggle { flex:0 0 auto; }

/* ---------------- toolbox ---------------- */
.tool-page h1 { font-size:29px; }
.tool-page .tool-box { margin:22px 0 8px; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.tool-field { margin-bottom:14px; }
.tool-field.cidr-wide { grid-column:span 2; }
.tool-field > span { display:block; margin-bottom:6px; font-size:13px; color:var(--muted); }
.tool-actions { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 18px; }
.tool-checks { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:14px; }
.tool-check { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.tool-check input { width:auto; }
.tool-result { margin-top:6px; }
.tool-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.tool-metric { padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.tool-metric span { display:block; font-size:12px; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; }
.tool-metric b { font-size:19px; color:var(--text); word-break:break-word; }
.tool-metric.cron-wide { grid-column:1/-1; }
.tool-bar { height:8px; border-radius:6px; background:var(--border); margin:14px 0 6px; overflow:hidden; }
.tool-bar i { display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .25s; }
.tool-list { margin:6px 0 0 18px; color:var(--muted); }
.tool-faq details { border-top:1px solid var(--border); padding:12px 0; }
.tool-faq summary { cursor:pointer; font-weight:600; }
.tool-faq p { color:var(--muted); margin:8px 0 0; }
.tool-index-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:14px; }
.tool-tile { display:block; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.tool-tile span { display:block; font-weight:700; margin-bottom:4px; }
.tool-tile small { display:block; color:var(--muted); font-size:13px; }
.tool-tile b { color:var(--accent); }
.tool-tile:hover { border-color:var(--accent); }
.inline-deal-link { color:var(--accent); text-decoration:underline dotted; }
.article-inline-related { padding:12px 14px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 8px 8px 0; }

/* ---------------- ad slots ---------------- */
.ad-slot { margin:18px 0; padding:10px; border:1px dashed var(--border); border-radius:10px; background:var(--panel); text-align:center; overflow:hidden; }
.ad-label { display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.ad-slot ins.adsbygoogle { min-height:90px; }

/* ---------------- game ---------------- */
.game-page .game-shell { margin:20px 0 10px; }
.game-top { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.game-scores { display:flex; gap:10px; }
.game-score-box { min-width:96px; padding:8px 14px; border-radius:10px; background:var(--panel); border:1px solid var(--border); text-align:center; }
.game-score-box span { display:block; font-size:11px; letter-spacing:1px; color:var(--muted); }
.game-score-box b { font-size:22px; }
.game-buttons { display:flex; gap:8px; }
.g-mute { width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:17px; line-height:1; cursor:pointer; transition:background .15s ease; }
.g-mute:hover { background:rgba(127,140,160,.18); }
.g-mute[data-on="0"] { opacity:.65; }
.game-board { position:relative; max-width:460px; margin:auto; }
.game-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:10px; border-radius:14px; background:var(--panel); border:1px solid var(--border); }
.game-cell { padding-bottom:100%; border-radius:10px; background:rgba(127,140,160,.14); }
.game-tile { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:10px; font-weight:800; color:#0b0f1a; transition:transform .12s ease; }
.game-tile span { font-size:clamp(18px,5.2vw,30px); }
.game-tile small { font-size:.5em; margin-left:2px; opacity:.7; }
.game-tile-2{background:#e7ecf4}.game-tile-4{background:#d7e3f2}.game-tile-8{background:#f7c66b}
.game-tile-16{background:#f5ad4b}.game-tile-32{background:#f59342}.game-tile-64{background:#ef7a35}
.game-tile-128{background:#e8602c;color:#fff}.game-tile-256{background:#dc4b2a;color:#fff}
.game-tile-512{background:#c93a24;color:#fff}.game-tile-1024{background:#b02d1f;color:#fff}
.game-tile-2048{background:#f59e0b;color:#111827}
.game-tile[class*="pos-"] { width:calc((100% - 50px)/4); height:calc((100% - 50px)/4); }
.game-tile.pos-0-0{top:10px;left:10px}.game-tile.pos-0-1{top:10px;left:calc(10px + (100% - 50px)/4 + 10px)}
.game-tile.pos-0-2{top:10px;left:calc(10px + 2*((100% - 50px)/4 + 10px))}.game-tile.pos-0-3{top:10px;left:calc(10px + 3*((100% - 50px)/4 + 10px))}
.game-tile.pos-1-0{top:calc(10px + (100% - 50px)/4 + 10px);left:10px}
.game-tile.pos-1-1{top:calc(10px + (100% - 50px)/4 + 10px);left:calc(10px + (100% - 50px)/4 + 10px)}
.game-tile.pos-1-2{top:calc(10px + (100% - 50px)/4 + 10px);left:calc(10px + 2*((100% - 50px)/4 + 10px))}
.game-tile.pos-1-3{top:calc(10px + (100% - 50px)/4 + 10px);left:calc(10px + 3*((100% - 50px)/4 + 10px))}
.game-tile.pos-2-0{top:calc(10px + 2*((100% - 50px)/4 + 10px));left:10px}
.game-tile.pos-2-1{top:calc(10px + 2*((100% - 50px)/4 + 10px));left:calc(10px + (100% - 50px)/4 + 10px)}
.game-tile.pos-2-2{top:calc(10px + 2*((100% - 50px)/4 + 10px));left:calc(10px + 2*((100% - 50px)/4 + 10px))}
.game-tile.pos-2-3{top:calc(10px + 2*((100% - 50px)/4 + 10px));left:calc(10px + 3*((100% - 50px)/4 + 10px))}
.game-tile.pos-3-0{top:calc(10px + 3*((100% - 50px)/4 + 10px));left:10px}
.game-tile.pos-3-1{top:calc(10px + 3*((100% - 50px)/4 + 10px));left:calc(10px + (100% - 50px)/4 + 10px)}
.game-tile.pos-3-2{top:calc(10px + 3*((100% - 50px)/4 + 10px));left:calc(10px + 2*((100% - 50px)/4 + 10px))}
.game-tile.pos-3-3{top:calc(10px + 3*((100% - 50px)/4 + 10px));left:calc(10px + 3*((100% - 50px)/4 + 10px))}
.game-over { position:absolute; left:0; right:0; top:0; display:flex; justify-content:center; padding:16px; z-index:6; pointer-events:none; }
.game-over > div { pointer-events:auto; background:rgba(18,24,38,.94); border:1px solid var(--border); border-radius:14px; padding:16px 22px; text-align:center; box-shadow:0 12px 36px rgba(0,0,0,.45); max-width:94%; animation:game-pop .18s ease-out; }
@keyframes game-pop { from{ transform:translateY(-8px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.game-over b { display:block; font-size:22px; color:#f59e0b; margin-bottom:4px; }
.game-over p { margin:2px 0 12px; color:var(--text); }
.game-over button { font:inherit; padding:8px 18px; border-radius:10px; border:0; background:var(--accent); color:#0b0f1a; font-weight:700; cursor:pointer; }
html[data-theme="light"] .game-over > div { background:rgba(255,255,255,.96); }
.game-over[hidden] { display:none!important; }
.game-start { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; z-index:7; background:rgba(8,12,20,.62); border-radius:14px; }
.game-start[hidden] { display:none!important; }
.game-start > div { background:rgba(18,24,38,.97); border:1px solid var(--border); border-radius:16px; padding:22px 24px; max-width:330px; text-align:center; box-shadow:0 16px 44px rgba(0,0,0,.5); animation:game-pop .18s ease-out; }
.game-start h3 { margin:0 0 10px; font-size:19px; color:var(--accent); letter-spacing:.5px; }
.game-start p { margin:0 0 16px; font-size:12.5px; line-height:1.8; color:var(--muted); }
.game-start button { font:inherit; padding:10px 26px; border-radius:10px; border:0; background:var(--accent); color:#0b0f1a; font-weight:700; cursor:pointer; }
html[data-theme="light"] .game-start { background:rgba(240,244,250,.7); }
html[data-theme="light"] .game-start > div { background:rgba(255,255,255,.98); }
.game-banner { position:absolute; left:0; right:0; top:70px; display:flex; justify-content:center; z-index:6; pointer-events:none; opacity:0; transition:opacity .25s ease; }
.game-banner.show { opacity:1; }
.game-banner span { background:rgba(18,24,38,.92); border:1px solid #f59e0b80; color:#fbbf24; font-weight:700; padding:8px 18px; border-radius:10px; font-size:13.5px; letter-spacing:.4px; }
html[data-theme="light"] .game-banner span { background:rgba(255,255,255,.96); color:#b45309; }
.game-submit { align-items:center; }
.game-submit .help { flex:1 1 100%; margin:0; font-size:11.5px; }
.game-board-side { margin-top:26px; }
.game-leaderboard { list-style:none; margin:0 0 16px; padding:0; }
.game-leaderboard li { display:flex; align-items:center; gap:12px; padding:8px 12px; border-bottom:1px solid var(--border); }
.game-leaderboard li b { width:22px; color:var(--accent); }
.game-leaderboard li span { flex:1; }
.game-leaderboard li em { font-style:normal; font-weight:700; }
.game-submit { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.game-submit .tool-field { flex:1 1 220px; margin-bottom:0; }
.game-canvas { display:block; width:100%; max-width:418px; height:auto; margin:0 auto; border-radius:14px; background:linear-gradient(180deg,#0d1322,#111a2b); border:1px solid var(--border); touch-action:none; cursor:crosshair; }
html[data-theme="light"] .game-canvas { background:linear-gradient(180deg,#eef2f8,#e3e9f2); }
.game-board { align-items:stretch; }
.game-hint { font-size:12px; color:var(--muted); text-align:center; margin-top:8px; }
@media (max-width:640px){ .game-tile span{font-size:20px;} }