/* ===========================================================================
   iolinked — shared site theme  (the "GitHub-docs × Apple" re-skin)
   Link this AFTER each page's own inline <style>, just before </head>:
       <link rel="stylesheet" href="theme.css">
   Remove that one <link> line (or this file) to fully revert any page.
   The home page (index.html) carries the full treatment inline and does
   not need this file.
   =========================================================================== */

/* ---- palette: cool-neutral base, red softened to a brand accent ---- */
:root{
  --bg:#07080c; --surface:#10131a; --surface2:#0b0d12;
  --chrome:#ff4d57;                 /* brand red — now an accent, not wallpaper */
  --cb:rgba(255,255,255,.22);        /* white hairline border          */
  --cb-strong:rgba(255,255,255,.44); /* crisper white (top cards)      */
  --cb-top:rgba(255,255,255,.06);    /* subtle top sheen               */
  --cool:#7fc8ff;                    /* cool accent                    */
}

/* ---- logo: white drawing + red wordmark (no markup change needed:
        the <svg> mark uses currentColor; the adjacent text keeps the
        link's red) ---- */
.iol svg{ color:#fff !important; filter:drop-shadow(0 0 5px rgba(255,255,255,.22)); }

/* ---- modern touches: branded text selection + slim accent scrollbar ---- */
::selection{ background:rgba(255,138,61,.32); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,138,61,.5); }

/* tiny "Announcement" corner tab (strip bg behind it so scrolling text never overlaps) */
.ann-tag{ position:absolute; top:0; left:0; z-index:4; font-size:8px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--surface2); padding:3px 9px 3px 6px;
  border-bottom-right-radius:8px; border-right:1px solid rgba(255,138,61,.45);
  border-bottom:1px solid rgba(255,138,61,.45); line-height:1; pointer-events:none; }

/* ---- white hairline borders on containers/cards across every page
        (red is kept only on buttons + small accents) ---- */
.card, .hero, .buybox, .svc,
.intro, .gcard, .gcard.live,
.strip, .gauge .bar, .rail .card, .msg,
.tocnav, .artpick, .contentsbox,
.verdict, .ntip{
  border-color:var(--cb) !important;
  box-shadow:inset 0 1px 0 var(--cb-top);
}

/* search / announcement / mini-game frame: crisp white border;
   game screen plain black */
.search, .ann{ border-color:var(--cb-strong) !important; }
.banner{ background:#000 !important; border-color:var(--cb-strong) !important; }

/* hover lift + soft glow on the main card types (subtle, modern) */
.card, .gcard, .strip, .intro, .hero, .buybox{ transition:border-color .18s, box-shadow .18s, transform .18s; }
.card:hover, .gcard:hover{ border-color:var(--cb-strong) !important;
  box-shadow:inset 0 1px 0 var(--cb-top), 0 18px 44px -30px rgba(0,0,0,.9); transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){ .card,.gcard,.strip,.intro,.hero,.buybox{ transition:none; } }