/* ============================================================
   BLOG ERA BOYZ skin — rebuilt v119 to match the real
   blogeraboyz.com: ice-blue page, royal-blue window chrome,
   chrome 3D wordmark, pixel-font marquee, MySpace-era cards.
   Loaded after styles.css; everything is scoped under body.blogera,
   so the skin only applies when the theme toggle adds that class.
   ============================================================ */

/* ---- base: flat ice-blue, Tahoma-era system sans ---- */
body.blogera {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  background: #d6e8f8;
  background-image: none;
  --accent: #1d4fe0;        /* royal blue — the site's primary */
  --accent-deep: #0f36a8;   /* darker royal */
  --accent2: #5b8def;       /* light royal (gradients) */
  --gold: #ffd800;
}
body.blogera input, body.blogera select, body.blogera textarea, body.blogera button {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
}
.blogera .muted { color: #4a5a70; }

/* ---- classic gray scrollbars ---- */
body.blogera::-webkit-scrollbar { width: 16px; height: 16px; }
body.blogera::-webkit-scrollbar-track { background: #e8eef5; }
body.blogera::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px outset #ffffff; border-radius: 0; }
body.blogera::-webkit-scrollbar-button { background: #c0c0c0; border: 2px outset #ffffff; }

/* ============================================================
   BUTTONS — flat solid royal-blue rectangles, white text
   ============================================================ */
.blogera .btn {
  background: #1d4fe0;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(15, 54, 168, .35);
  text-shadow: none;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 18px; /* 44px+ touch targets even in the retro skin */
  min-height: 44px;
  letter-spacing: .2px;
}
.blogera .btn:hover { background: #0f36a8; }
.blogera .btn:active { background: #0c2c8c; transform: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.blogera .btn.primary { background: #1d4fe0; color: #ffffff; box-shadow: 0 2px 5px rgba(15, 54, 168, .35); outline: none; }
.blogera .btn.ghost { background: #ffffff; color: #1d4fe0; border: 1px solid #1d4fe0; box-shadow: none; }
.blogera .btn.ghost:hover { background: #e8effe; }
.blogera .btn.danger { background: #d92b1f; color: #ffffff; }
.blogera .btn:disabled { background: #a9b6c9; color: #ffffff; box-shadow: none; opacity: 1; }
.blogera .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* icon-ish buttons */
.blogera .icon-btn, .blogera .sheet-x, .blogera .wl-popup-x, .blogera .modal-x {
  background: #ffffff;
  color: #1d4fe0;
  border: 1px solid #b9c4d4;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  min-width: 30px;
  min-height: 28px;
}
.blogera .icon-btn:hover, .blogera .sheet-x:hover { border-color: #1d4fe0; }

/* ============================================================
   POPUPS — white cards, royal-blue title bar, thin gray border
   ============================================================ */
.blogera .modal { backdrop-filter: none; background: rgba(20, 40, 90, .55); }
.blogera .modal-card,
.blogera .wl-popup-card {
  position: relative;
  background: #ffffff;
  color: #16233a;
  border: 1px solid #9fb0c8;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 8px 28px rgba(15, 54, 168, .28);
  text-align: left;
  animation: none;
  overflow: hidden;
}
/* royal-blue title bar, full-bleed, lowercase white title */
.blogera .modal-card::before,
.blogera .wl-popup-card::before {
  content: "\1F4BF  mgk show tracker";
  display: block;
  background: #1d4fe0;
  color: #ffffff;
  font-family: Tahoma, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 7px 10px;
  margin: -28px -24px 16px;
  cursor: default;
  user-select: none;
  border-radius: 5px 5px 0 0;
}
.blogera .wl-popup-card::before { margin: -26px -20px 14px; }
.blogera .modal.sheet .modal-card::before { margin: -10px -18px 12px; }
/* close box on the title bar (real close buttons still work) */
.blogera .modal-card::after,
.blogera .wl-popup-card::after {
  content: "\2715";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 22px;
  line-height: 19px;
  text-align: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 3px;
  font-family: Tahoma, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #ffffff;
  pointer-events: none;
}
.blogera .modal-card h2, .blogera .wl-popup-card h2 {
  color: #1d4fe0;
  font-family: Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.blogera .modal-card a, .blogera .wl-popup-card a { color: #1d4fe0; text-decoration: underline; }

/* bottom-sheet grabber looks wrong on a window — hide it */
.blogera .sheet-grab { display: none; }

/* ============================================================
   FORM FIELDS — clean white inset
   ============================================================ */
.blogera input:not([type="checkbox"]):not([type="radio"]),
.blogera select,
.blogera textarea {
  border: 1px solid #9fb0c8;
  border-radius: 3px;
  background: #ffffff;
  color: #16233a;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.blogera input:focus, .blogera select:focus, .blogera textarea:focus {
  outline: none;
  border-color: #1d4fe0;
  box-shadow: 0 0 0 2px rgba(29, 79, 224, .25);
}

/* ============================================================
   NAV TABS — blue text, active tab is a royal pill
   ============================================================ */
.blogera .tab {
  font-family: Tahoma, sans-serif;
  background: transparent;
  color: #1d4fe0;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: none;
}
.blogera .tab.active {
  background: #1d4fe0;
  color: #ffffff;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(15, 54, 168, .35);
}

/* ============================================================
   CARDS & PANELS — white, thin gray border, soft shadow
   ============================================================ */
.blogera .card, .blogera .empty-card, .blogera .stat-card,
.blogera .show-row, .blogera .thread-row, .blogera .chat-list,
.blogera .board-row, .blogera .guide-card {
  background: #ffffff;
  border: 1px solid #c3cede;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29, 79, 224, .10);
  color: #16233a;
}
.blogera .section-title {
  font-family: Tahoma, sans-serif;
  font-weight: 800;
  color: #1d4fe0;
  font-style: normal;
  letter-spacing: 0;
}
.blogera a { color: #1d4fe0; }
.blogera .toprated-badge { color: #1d4fe0; border-color: #1d4fe0; background: #ffffff; }

/* ---- topbar + tab bar: light Mac platinum so the header reads as one piece ---- */
/* v127: slightly toned down — less glare, and the chip name is explicitly blue
   (the base `.user-chip span` rule paints it var(--text), which is near-white). */
.blogera header.topbar {
  background: linear-gradient(#f2f5fa, #d2dcea);
  border-bottom: 1px solid #9fb0c8;
}
.blogera nav.tabs {
  background: #e8eef8;
  border-bottom: 1px solid #9fb0c8;
}
.blogera .user-chip span { color: #1d4fe0; }

/* ============================================================
   HEADER — chrome 3D wordmark, blue shadow
   ============================================================ */
.blogera .brand-name {
  font-family: "Arial Black", Arial, sans-serif;
  font-style: italic;
  letter-spacing: 1px;
  background: linear-gradient(#ffffff 0%, #c9d6e8 38%, #f4f8fd 50%, #8fa3bd 62%, #e6edf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 #1d4fe0);
  transform: skewX(-6deg);
}
.blogera-stamp {
  display: inline-block;
  background: #1d4fe0;
  color: #ffffff;
  font-family: Tahoma, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 3px;
  transform: rotate(-3deg);
  vertical-align: middle;
  white-space: nowrap;
}
.blogera .user-chip {
  background: #ffffff;
  color: #1d4fe0;
  border: 1px solid #9fb0c8;
  border-radius: 3px;
  font-weight: 700;
}
.blogera .notif-bell {
  background: #ffffff;
  border: 1px solid #9fb0c8;
  border-radius: 3px;
  color: #1d4fe0;
}

/* v127: uniform header control boxes — bell, search, guide, theme all the same
   40px white box as the chip row: even size, even spacing, no overflow. */
.blogera .topbar-actions { gap: 8px; }
.blogera .topbar-actions .icon-btn,
.blogera .topbar-actions .notif-bell {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 18px; line-height: 1;
  background: #ffffff; border: 1px solid #9fb0c8; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(20, 40, 90, .18);
  color: #1d4fe0;
}
.blogera .topbar-actions .icon-btn:hover,
.blogera .topbar-actions .notif-bell:hover { border-color: #1d4fe0; }
.blogera .user-chip {
  height: 40px; padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(20, 40, 90, .18);
}
@media (max-width: 560px) {
  /* slim the brand mark on phones so chip + all four boxes fit one row */
  .blogera .brand-mark { padding: 4px 8px; }
  .blogera .brand-mark svg { height: 16px; }
}

/* ---- ticker: cream marquee band, pixel font, red/blue text ---- */
.blogera-ticker {
  background: #fff6c9;
  border-top: 1px solid #d8c98a;
  border-bottom: 1px solid #d8c98a;
  color: #1d4fe0;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}
.blogera-ticker marquee { display: block; }
.blogera-stars { text-align: center; color: #1d4fe0; font-size: 13px; letter-spacing: 6px; margin: 10px 0; }
.blogera-stars::before { content: "\2605 \2605 \2605"; }

/* ============ BLOG ERA HOMEPAGE ============ */
.blogera .home-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; }

/* Mac-style window chrome (v123: the newer Mac look moved here from Classic) —
   platinum gradient titlebar with traffic lights. */
.blogera .mac-window {
  background: #ffffff;
  border: 1px solid #9fb0c8;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(29, 79, 224, .14);
  overflow: hidden;
}
.blogera .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#ffffff, #e9e9e9 48%, #d1d1d1 52%, #dfdfdf);
  border-bottom: 1px solid #8a8a8a;
  padding: 6px 10px;
  font: 12px/1.2 Tahoma, Verdana, Geneva, sans-serif;
  color: #333;
}
.blogera .mac-lights { display: inline-flex; gap: 6px; }
.blogera .mac-lights i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
.blogera .mac-lights .mac-r { background: #ff5f57; }
.blogera .mac-lights .mac-y { background: #febc2e; }
.blogera .mac-lights .mac-g { background: #28c840; }
.blogera .mac-filename { flex: 1; text-align: center; color: #444; letter-spacing: .02em; }

/* Masthead */
.blogera .home-masthead-body { padding: 30px 18px 34px; text-align: center; background: #d6e8f8; }
.blogera .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 14px;
  background: #1d4fe0; color: #ffffff; font-weight: 700; letter-spacing: .18em; font-size: 12px;
  transform: rotate(-2deg); border-radius: 3px;
}
.blogera .home-logo {
  margin: 0; font-size: clamp(38px, 9vw, 76px); font-weight: 900; font-style: italic;
  letter-spacing: -.02em; transform: skewX(-6deg);
  background: linear-gradient(#ffffff 0%, #c9d6e8 38%, #f4f8fd 50%, #8fa3bd 62%, #e6edf6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #1d4fe0);
  line-height: .95;
}
.blogera .home-logo span { display: block; font-size: .52em; letter-spacing: .08em; }
.blogera .home-tagline { margin: 16px 0 0; font-weight: 700; color: #1d4fe0; font-size: 15px; }

/* Ticker — cream pixel marquee */
.blogera .home-ticker {
  background: #fff6c9; color: #1d4fe0;
  border-top: 1px solid #d8c98a; border-bottom: 1px solid #d8c98a;
  overflow: hidden; white-space: nowrap; padding: 9px 0;
  font-family: "Press Start 2P", monospace; font-size: 10px;
}
.blogera .home-ticker-inner { display: inline-block; padding-left: 100%; animation: blogera-tick 28s linear infinite; }
@keyframes blogera-tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .blogera .home-ticker-inner { animation: none; padding-left: 0; } }

.blogera .home-section-title {
  margin: 6px 0 0; text-align: center; font-size: 16px; font-weight: 800;
  letter-spacing: .02em; color: #1d4fe0;
}

/* Square tiles — white cards, thin gray border */
.blogera .tile-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.blogera .tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 104px; padding: 14px 6px 12px; cursor: pointer;
  background: #ffffff;
  border: 1px solid #c3cede;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29, 79, 224, .10);
  font: inherit; color: #16233a;
}
.blogera .tile:hover { border-color: #1d4fe0; box-shadow: 0 4px 12px rgba(29, 79, 224, .20); }
.blogera .tile:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
.blogera .tile:focus-visible { outline: 3px solid #1d4fe0; outline-offset: 2px; }
.blogera .tile-icon { font-size: 34px; line-height: 1; }
.blogera .tile-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; color: #1d4fe0; }

/* README window */
.blogera .home-readme-body { padding: 16px 18px 18px; font-size: 14px; color: #16233a; }
.blogera .home-readme-body p { margin: 0 0 10px; }
.blogera .home-readme-body p:last-child { margin-bottom: 0; }
.blogera .home-stats { font-size: 16px; }
.blogera .home-stats b { background: #1d4fe0; color: #ffffff; padding: 1px 8px; border-radius: 3px; }
.blogera .home-hint { color: #4a5a70; font-style: italic; font-size: 13px; }

@media (max-width: 480px) {
  .blogera .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .blogera .tile { min-height: 96px; }
}

/* ============================================================
   CHAT — royal-blue bubble (round shape kept), denim-deep active
   ============================================================ */
.blogera .chat-head {
  background: #1d4fe0;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(15, 54, 168, .5);
}
.blogera .chat-head.active { background: #0f36a8; }
/* own-message bubbles + unread badges ride var(--accent) -> royal automatically */
.blogera #player-progress-fill::after { box-shadow: 0 1px 8px rgba(0,0,0,.55), 0 0 0 3px rgba(29,79,224,.4); }
.blogera .tab.active { text-shadow: none; }

/* ============================================================
   NOTIFICATIONS — old-school computer list, royal selection
   ============================================================ */
.blogera .notif-row {
  background: #ffffff; color: #16233a;
  border: 1px solid #c3cede; border-radius: 3px;
  margin-bottom: 6px; padding: 8px 10px;
}
.blogera .notif-row:hover { background: #eef3fb; }
.blogera .notif-row.unread { background: #1d4fe0; border-color: #0f36a8; }
.blogera .notif-row.unread .notif-text { color: #ffffff; }
.blogera .notif-row.unread .notif-time { color: #d6e2f8; }
.blogera .notif-row .notif-time { color: #5a6b85; }
.blogera .notif-row .notif-text a { color: inherit; }
.blogera .notif-badge { background: #d92b1f; border-radius: 3px; }
.blogera .unread-badge { background: #1d4fe0; border-radius: 3px; }

/* ============================================================
   FOOTER — EST 19XX as a royal stamp, zero pink
   ============================================================ */
.blogera .foot { color: #4a5a70; }
.blogera .foot a { color: #1d4fe0; text-decoration: underline; }
.blogera .foot-est {
  font-family: "Arial Black", Arial, sans-serif;
  font-style: italic; font-size: 16px;
  color: #ffffff; background: #1d4fe0;
  display: inline-block; padding: 4px 14px;
  border-radius: 3px; transform: rotate(-2deg);
  text-shadow: none; margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(15, 54, 168, .4);
}
.blogera .hero-eyebrow {
  font-family: Tahoma, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .18em; color: #ffffff; background: #1d4fe0;
  padding: 4px 14px; border-radius: 3px;
  text-shadow: none; transform: rotate(-2deg);
}

/* ============================================================
   DE-PINK v122 — hard-coded pink glows in the base stylesheet
   become royal. (var(--accent) already flips; these are the
   literal pink values the variable swap can't reach.)
   ============================================================ */
.blogera .attend-btn.on { box-shadow: 0 4px 14px rgba(29,79,224,.35); }
.blogera .alert-btn.on { background: rgba(29,79,224,.1); }
.blogera .chip.active { box-shadow: 0 4px 16px rgba(29,79,224,.4); }
.blogera .stat-card.hero { background: linear-gradient(135deg, rgba(29,79,224,.16), #ffffff 60%); }
.blogera .badge-pick.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(29,79,224,.25); }
.blogera .dm-row.unread { box-shadow: 0 0 12px rgba(29,79,224,.18); }
.blogera .filters input[type="search"]:focus,
.blogera .search-wrap input:focus,
.blogera .auth-card input:focus,
.blogera .form-grid input:focus,
.blogera .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(29,79,224,.18); }

/* ============================================================
   My Shows tiles + hero + install banner — v124: these kept the
   Original dark/pink styling because the skin never overrode
   them. Mac-style white cards, ice-blue icon chips, no pink.
   ============================================================ */
.blogera .my-subnav-card {
  background: #ffffff;
  border: 1px solid #c3cede;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(29, 79, 224, .10);
  color: #16233a;
}
.blogera .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(29, 79, 224, .10), transparent 70%);
}
.blogera .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(29, 79, 224, .14); }
.blogera .my-subnav-card[data-goto="states"] { --tile-glow: rgba(29, 79, 224, .14); }
.blogera .my-subnav-card:hover { border-color: #1d4fe0; box-shadow: 0 4px 12px rgba(29, 79, 224, .20); }
.blogera .my-subnav-card:active { transform: scale(.97); }
.blogera .my-subnav-emoji {
  background: linear-gradient(140deg, #7cc7ff, #1d4fe0);
  box-shadow: 0 4px 10px rgba(29, 79, 224, .30), inset 0 1px 0 rgba(255, 255, 255, .35);
  border-radius: 14px;
}
.blogera .my-subnav-txt b { color: #16233a; }
.blogera .my-subnav-txt small { color: #4a5a70; }

/* Songs-heard-live hero card — light Mac card, blue progress */
.blogera .songpct {
  background: linear-gradient(160deg, rgba(29, 79, 224, .10), rgba(255, 255, 255, .02)), #ffffff;
  border: 1px solid #c3cede;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(29, 79, 224, .10);
  color: #16233a;
}
.blogera .songpct:hover { border-color: #1d4fe0; }
.blogera .songpct-bar { background: rgba(29, 79, 224, .12); }
.blogera .songpct-txt .muted { color: #4a5a70; }

/* Add-to-home-screen banner — ice blue, not pink */
.blogera .install-banner {
  background: linear-gradient(135deg, rgba(29, 79, 224, .10), rgba(124, 199, 255, .16));
  border: 1px solid #1d4fe0;
  border-radius: 8px;
  color: #16233a;
}