/* DobbsCoin pool theme — SubGenius cream + Luna-blue, matching dobbscoin.info.
   v3 (2026-05-25): full reskin from neon-mono to dobbscoin.info aesthetic.
   Background = bg.png wallpaper from dobbscoin.info; cards = cream; nav = Luna-blue. */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  --bg:#fff;
  --panel:#fffce8;          /* cream card */
  --panel-2:#fff7cc;        /* alt cream */
  --ink:#000;
  --ink-mute:#555;
  --accent:#cc0000;         /* primary red */
  --accent-dark:#990000;    /* darker red — visited links, headings */
  --gold:#b8860b;           /* warm amber for highlights */
  --line:#000;
  --line-soft:rgba(0,0,0,.25);
  --danger:#cc0000;
  /* Legacy aliases so existing inline `var(--green)`/`var(--cyan)`/etc still resolve */
  --green:#cc0000;
  --cyan:#990000;
}

*{box-sizing:border-box;}
html{
  background-color:#fff;
  background-image:url('https://dobbscoin.info/images/bg.png');
  background-repeat:repeat;
  background-attachment:fixed;
  background-position:center top;
  min-height:100vh;
}
body{
  margin:0; padding:0;
  background:transparent;
  font-family:Georgia, "Times New Roman", Times, serif;
  color:#000;
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
}

a{color:#0000EE; text-decoration:none;}
a:visited{color:#551A8B;}
a:hover{text-decoration:underline;}
a:active{color:#EE0000;}

h1,h2,h3,.display{
  margin:0 0 8px 0;
  font-family:"Anton", "Trebuchet MS", sans-serif;
  font-weight:400;
  letter-spacing:1px;
  color:var(--accent-dark);
}
h1{font-size:28px;}
h2{font-size:20px;}
h3{font-size:16px;}

hr{border:0; border-top:1px solid var(--line-soft); margin:16px 0;}

code,pre{font-family:"Courier New", Courier, monospace; color:#000;}

/* Layout — fluid canvas wider than dobbscoin.info because pool tables need room */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px 20px;
}

/* Header */
.header{
  margin:0 0 18px 0;
  padding:18px 90px 14px;
  background:#fffce8;
  border:2px solid #000;
  border-radius:12px;
  box-shadow:0 3px 0 #000, 0 6px 12px rgba(0,0,0,.18);
  text-align:center;
  background-image:url('/header-bob.png');
  background-repeat:no-repeat;
  background-position:top 14px right 16px;
  background-size:64px auto;
}
.header .title{
  display:flex; align-items:baseline; justify-content:center;
  gap:10px; flex-wrap:wrap;
}
.header h1{
  margin:0;
  color:var(--accent);
  letter-spacing:1.5px;
  font-size:clamp(22px, 4vw, 32px);
  text-transform:uppercase;
}
.header h1 .accent{color:var(--accent-dark);}
.header .sub{
  color:var(--ink-mute);
  font-family:Georgia, serif;
  font-size:13px;
  margin-top:6px;
  flex-basis:100%;
  width:100%;
}

/* Nav — Windows XP Luna titlebar blue */
nav.nav, .nav{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:nowrap;
  margin-top:14px;
  margin-bottom:8px;
}
nav.nav a, .nav a{
  display:inline-block;
  padding:6px 12px;
  background:linear-gradient(to bottom,
    #3C7CDC 0%, #2A6CD0 45%, #1E5CC0 50%, #2871D8 88%, #5C9BE6 100%);
  color:#fff;
  font-family:"Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  border:1px solid #0A246A;
  border-top-color:#5A8BDA;
  border-radius:4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  text-decoration:none;
  transition:filter .1s ease, box-shadow .1s ease;
}
nav.nav a:visited, .nav a:visited{color:#fff;}
nav.nav a:hover, .nav a:hover{
  filter:brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.4);
  text-decoration:none;
  color:#fff;
}
nav.nav a:active, nav.nav a.active, .nav a.active{
  background:linear-gradient(to bottom, #1E5CC0 0%, #2A6CD0 50%, #3C7CDC 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.35);
  border-top-color:#0A246A;
  color:#FFE680;
}

/* Cards */
.card{
  background:#fffce8;
  border:2px solid #000;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:16px;
  box-shadow:0 3px 0 #000, 0 6px 12px rgba(0,0,0,.18);
}
.card h2{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 12px 0;
  padding-bottom:8px;
  border-bottom:1px solid var(--line-soft);
  color:var(--accent-dark);
}
.card h2 .meta{
  font-family:Georgia, serif;
  font-size:12px;
  font-weight:400;
  color:var(--ink-mute);
  letter-spacing:0;
  text-transform:none;
}

/* Stat tiles */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-top:14px;
}
.tile{
  background:#fff7cc;
  border:1.5px solid #000;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 2px 0 #000;
}
.tile .label{
  font-family:"Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:4px;
  font-weight:700;
}
.tile .value{
  font-family:"Anton", "Trebuchet MS", sans-serif;
  color:var(--accent);
  font-size:clamp(14px, 1.5vw, 17px);
  font-weight:400;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  word-break:break-word;
  line-height:1.15;
}
.tile.gold .value{color:#b8860b;}
.tile.cyan .value{color:var(--accent-dark);}

/* Tables — dense data, cream header, alternating tint */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px;}
table.tbl{
  width:100%;
  border-collapse:collapse;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  background:#fff;
  border:1.5px solid #000;
}
table.tbl th, table.tbl td{
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
table.tbl th{
  font-family:"Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent-dark);
  background:#fffce8;
  border-bottom:2px solid #000;
}
table.tbl tbody tr:nth-child(even){ background:rgba(255,247,200,.4); }
table.tbl tbody tr:hover{ background:#fff7cc; }
table.tbl td.num{ text-align:right; color:var(--accent); font-weight:600; }
table.tbl td.gold{ color:#b8860b; }
table.tbl td.muted{ color:var(--ink-mute); }
table.tbl td.mono{ font-family:"Courier New", Courier, monospace; }

/* Status pills */
.pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-family:"Trebuchet MS", sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1.5px solid currentColor;
  background:#fff;
}
.pill.ok{ color:#2a7a2a; }
.pill.warn{ color:#b8860b; }
.pill.bad{ color:var(--accent); }

/* Forms / inputs */
input, textarea, select{
  width:100%;
  padding:10px 12px;
  background:#fff;
  color:#000;
  border:1.5px solid #000;
  border-radius:6px;
  outline:none;
  font-family:Georgia, serif;
  font-size:14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(204,0,0,.18), inset 0 1px 2px rgba(0,0,0,.08);
}
label{
  display:block;
  margin-top:10px; margin-bottom:6px;
  font-family:"Trebuchet MS", sans-serif;
  color:#000;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Generic buttons — Luna-blue, same look as nav */
button, .btn{
  width:auto;
  padding:8px 16px;
  background:linear-gradient(to bottom,
    #3C7CDC 0%, #2A6CD0 45%, #1E5CC0 50%, #2871D8 88%, #5C9BE6 100%);
  color:#fff;
  font-family:"Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  border:1px solid #0A246A;
  border-top-color:#5A8BDA;
  border-radius:4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  cursor:pointer;
}
button:hover, .btn:hover{
  filter:brightness(1.08) saturate(1.05);
  text-decoration:none;
}
button:active, .btn:active{
  background:linear-gradient(to bottom, #1E5CC0 0%, #2A6CD0 50%, #3C7CDC 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.35);
  transform:translateY(1px);
}

/* Inline copyable */
.copy-block{
  display:flex; align-items:center; gap:8px;
  background:#fffbe0;
  border:1.5px solid #000;
  border-radius:6px;
  padding:10px 12px;
  font-family:"Courier New", Courier, monospace;
  font-size:13px;
}
.copy-block code{ color:#000; flex:1; word-break:break-all;}
.copy-block .copy-btn{
  flex:0 0 auto;
  padding:4px 10px; font-size:11px;
  border:1px solid #0A246A; background:linear-gradient(to bottom, #3C7CDC, #1E5CC0);
  color:#fff; border-radius:4px; cursor:pointer;
  font-family:"Trebuchet MS", sans-serif; font-weight:700;
}

/* Pre / code blocks (Connect page sample config) */
pre{
  background:#fffbe0 !important;
  border:1.5px solid #000 !important;
  color:#000 !important;
  border-radius:6px !important;
  padding:12px !important;
  font-family:"Courier New", Courier, monospace !important;
  font-size:12px;
  overflow-x:auto;
}
pre code{ color:#000 !important; }

/* Charts — palette-matched */
.ct-chart{ background:transparent; }
.ct-chart .ct-grid{ stroke:rgba(0,0,0,.15); stroke-dasharray:2px; }
.ct-chart .ct-label{ fill:#000; color:#000; font-family:"Trebuchet MS", sans-serif; font-size:11px;}
/* Series A = network hashrate — accent red */
.ct-chart .ct-line{ stroke:var(--accent); stroke-width:2px; }
.ct-chart .ct-area{ fill:rgba(204,0,0,.16); }
.ct-chart .ct-point{ stroke:var(--accent-dark); stroke-width:6px; }
/* Series B = pool hashrate — Luna blue */
.ct-chart .ct-series-b .ct-line{ stroke:#1E5CC0; stroke-width:2px; }
.ct-chart .ct-series-b .ct-area{ fill:rgba(30,92,192,.16); }
.ct-chart .ct-series-b .ct-point{ stroke:#1E5CC0; }
/* Series C = network difficulty — amber, dashed */
.ct-chart .ct-series-c .ct-line{ stroke:#b8860b; stroke-width:2px; stroke-dasharray:4 3; }
.ct-chart .ct-series-c .ct-area{ fill:rgba(184,134,11,.10); }
.ct-chart .ct-series-c .ct-point{ stroke:#b8860b; }

/* Chart legend */
.chart-legend{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:"Trebuchet MS", sans-serif;
  font-size:11px; color:var(--ink-mute);
  letter-spacing:.5px; text-transform:uppercase; font-weight:700;
  margin:-2px 0 10px 0;
}
.chart-legend .key{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend .dot{
  width:10px; height:10px; border-radius:999px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.4);
}
.chart-legend .dot.network{ background:var(--accent); }
.chart-legend .dot.pool{ background:#1E5CC0; }
.chart-legend .dot.difficulty{ background:#b8860b; }

/* Tile-bottom external link */
.tile .bridge-link{
  display:block;
  margin-top:4px;
  font-family:"Trebuchet MS", sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent-dark);
  text-decoration:none;
}
.tile .bridge-link:hover{ color:var(--accent); text-decoration:underline; }

/* Total supply call-out — sticky-note */
.supply-line{
  margin-top:14px;
  padding:10px 14px;
  text-align:center;
  background:#fffbe0;
  border:1.5px solid #000;
  border-radius:8px;
  box-shadow:0 2px 0 #000;
  font-family:"Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#000;
}
.supply-line #totalSupply{
  font-family:"Anton", "Trebuchet MS", sans-serif;
  color:var(--accent);
  font-weight:400;
  letter-spacing:.5px;
  font-size:15px;
}

/* Footer — matches dobbscoin.info `.dobbs-copyright` */
.footer{
  text-align:center;
  padding:18px 8px 24px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:13px;
  color:#333;
  line-height:1.5;
}
.footer a{ color:#990000; }
.footer a:visited{ color:#551A8B; }
.footer .tm-line{ font-size:12px; color:#555; }

/* Mobile */
@media (max-width:600px){
  .wrap{ padding:14px 10px; }
  .header{
    padding:14px 54px 12px 14px;
    background-size:42px auto;
    background-position:top 10px right 8px;
  }
  .header h1{ font-size:22px; }
  nav.nav, .nav{
    flex-wrap:wrap;
    gap:4px;
  }
  nav.nav a, .nav a{ padding:5px 9px; font-size:11px; }
  .card{ padding:12px 14px; }
  .tiles{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .tile .value{ font-size:15px; }
  table.tbl th, table.tbl td{ padding:6px 8px; font-size:12px; }
}

/* Cross-document view transitions (Chrome 126+) — pairs the header element
   between page navigations so it doesnt visually duplicate during paint. */
@view-transition { navigation: auto; }
.header{ view-transition-name: dobbs-header; }

/* "Stupider it looks…" quote — socials.js injects it cream-on-cream by default
   (invisible against our wallpaper). Same treatment as dao.subgenius.net: dark
   ink with a soft cream halo so it stays legible on any background. */
#bottomstack .dobbs-quote {
  color: var(--ink) !important;
  text-shadow:
    0 0 12px rgba(253, 253, 253, 0.95),
    0 0 4px  rgba(253, 253, 253, 0.95),
    0 1px 0  rgba(255, 255, 255, 0.6) !important;
}