/* _emtac_arcade.css v1.1
 * Additive styles for EMTAC ARCADE (APP-08) + CONNECT (APP-07) slot.
 * v1.1 adds per-category colors to the arcade page so the eye can pick
 * out manufacturer/platform without scanning text.
 *
 * Loads AFTER _emtac_home.css so it overrides nothing it doesn't intend to.
 */

/* ---- TOC tile (APP-08) on the main page — unchanged from v1.0 ---- */
.tl-arcade{background-image:url(/assets/logo-arcade.png)}
html[data-theme="day"] .tl-arcade{background-image:url(/assets/logo-arcade-day.png)}

/* EmTac'Arcade signature color */
.card[href="/arcade/"]{--tile:#ff7a1f}
html[data-theme="day"] .card[href="/arcade/"]{--tile:#b85510}

.card[href="/arcade/"]:hover{
  box-shadow:0 0 0 1px #ff7a1f, 0 0 26px rgba(255,122,31,0.35);
  transform:translateY(-2px);
}
html[data-theme="day"] .card[href="/arcade/"]:hover{
  box-shadow:0 0 0 1px #b85510, 0 0 30px rgba(184,85,16,0.40);
  transform:translateY(-2px);
}

/* ---- CONNECT placeholder (APP-07) — unchanged ---- */
.card[data-pending="1"]{
  opacity:0.42;
  pointer-events:none;
  cursor:default;
  border-style:dashed !important;
}
.card[data-pending="1"] .stt{color:#b8a85f !important}
.card[data-pending="1"]:hover{box-shadow:none !important; transform:none !important}

/* =====================================================================
   ARCADE PAGE — category color palette (v1.1)
   Each retro tile gets a class matching its manufacturer/era so the
   eye can navigate. The left edge of the tile carries the accent.
   ===================================================================== */

/* Default arc-card (multiplayer servers) — keeps the ARCADE orange */
.arc-card{--tile:#ff8c42; --acc:#ffb070}
html[data-theme="day"] .arc-card{--tile:#b85510; --acc:#7a3a08}

/* Nintendo platforms — red */
.arc-nintendo{--tile:#e2e8f0; --acc:#94a3b8}
html[data-theme="day"] .arc-nintendo{--tile:#991b1b; --acc:#7f1d1d}

/* Sega platforms — blue */
.arc-sega{--tile:#38bdf8; --acc:#7dd3fc}
html[data-theme="day"] .arc-sega{--tile:#1d4ed8; --acc:#1e3a8a}

/* MAME / arcade cabinets — gold (marquee) */
.arc-mame{--tile:#fde047; --acc:#fef08a}
html[data-theme="day"] .arc-mame{--tile:#a16207; --acc:#713f12}

/* Atari — burnt amber */
.arc-atari{--tile:#f87171; --acc:#fca5a5}
html[data-theme="day"] .arc-atari{--tile:#b45309; --acc:#78350f}

/* Terminal games — phosphor green (matches base node palette) */
.arc-terminal{--tile:#86efac; --acc:#bbf7d0}
html[data-theme="day"] .arc-terminal{--tile:#15803d; --acc:#14532d}

/* Universal styling for category cards — left-edge accent strip + tinted name */
.arc-card{
  position:relative;
  border-color:var(--tile) !important;
}
.arc-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--tile);
}
.arc-card .titlebar span:first-child{color:var(--tile)}
.arc-card .cname{color:var(--tile)}
.arc-card:hover{
  box-shadow:0 0 0 1px var(--tile), 0 0 22px rgba(255,255,255,0.05), 0 0 26px var(--tile)33;
  transform:translateY(-2px);
}
/* Live multiplayer indicator stays orange when active (overrides category) */
.arc-card[data-arc-server] [data-arc-stt]{color:var(--tile)}

/* Connection info block uses the card's accent color */
.arc-conn{
  margin-top:6px;padding:6px 8px;
  background:color-mix(in srgb, var(--tile) 8%, transparent);
  border-left:2px solid var(--tile);
  font-family:ui-monospace,monospace;font-size:11px;
  color:var(--acc);
}

/* ROM-count chip uses the tile color */
.arc-count{color:var(--tile)}

/* Pending platform (N64 dashed) stays dim */
.arc-card[data-pending="1"]{opacity:0.55; border-style:dashed !important}
.arc-card[data-pending="1"]::before{opacity:0.5}

/* Live session badge */
.arc-live{display:inline-block;padding:1px 8px;margin-left:8px;font-size:10px;font-weight:700;
  border-radius:3px;background:#ff7a1f;color:#0a0d10;letter-spacing:0.08em}
html[data-theme="day"] .arc-live{background:#b85510;color:#fff}

/* Arcade page hero (EMTAC ARCADE wordmark) */
.arc-hero{display:flex;align-items:center;justify-content:center;margin:14px 0 6px 0}
.arc-hero img{max-width:520px;width:100%;height:auto;display:block}
html[data-theme="day"] .arc-hero img.nv{display:none}
html:not([data-theme="day"]) .arc-hero img.day{display:none}