/* app.css — supplements the ported style/main.css + style/menu.css.
   1) horizontal nav with hover dropdowns (replaces the old ddsmoothmenu JS)
   2) a handful of classes the views use that lived only in the legacy css/main.css
*/

/* ---- 1. Top navigation ------------------------------------------------
   #menubar is laid out as a CSS "table": the nav <ul> and the search box
   are its two cells (nav on the left, search on the right). main.css sets
   `#menubar > ul { display: table-cell }`, which — being more specific than
   a bare `#header_nav` — used to defeat our flex rule and leave the <li>
   items stacked VERTICALLY. So keep the <ul> as the left table-cell, but
   qualify the selector (`#menubar > ul#header_nav`) so it wins, and lay the
   <li> items out HORIZONTALLY with pure-CSS hover dropdowns (replacing the
   old ddsmoothmenu JS). */
#menubar > ul#header_nav {
  display: table-cell;
  position: static;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
#header_nav > li {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  list-style: none;
}
#header_nav > li > a {
  display: block;
  padding: 0 16px;
  line-height: 41px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
#header_nav > li:hover { background: #444; }
#header_nav > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  min-width: 190px;
  background: #000;
  list-style: none;
  z-index: 500;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  text-align: left;
  white-space: normal;
}
#header_nav > li:hover > ul { display: block; }
#header_nav > li > ul li { list-style: none; }
#header_nav > li > ul li a {
  display: block;
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
}
#header_nav > li > ul li a:hover { background: #444; }
#header_nav img { border: 0; vertical-align: middle; }

/* ---- 2. Ported legacy classes (from css/main.css) --------------------- */
div.streak,
div.streakleft,
div.streakright,
div.streaknews {
  background: #000;
  margin: 0;
  padding: 6px 0 8px 0;
  color: #fff;
  border: 1px solid #221a0f;
  margin-bottom: 8px;
}
div.streak h3,
div.streakleft h3,
div.streakright h3,
div.streaknews h1 { color: #fff; }

div.miniright { padding: 5px 5px 0 5px; }
div.miniright h4 { color: #fff; margin: 0 0 4px 0; font-style: italic; font-size: 12px; }
div.minileft { padding: 0 0 0 20px; }

div.dividermid,
div.dividerleft,
div.dividerright {
  background: #221a0f;
  margin: 8px auto;
  height: 1px;
  width: 100%;
}

div.newsitem2 {
  margin: 5px 0 12px 0;
  background: #000;
  padding: 6px 6px 8px 6px;
  border: 1px solid #221a0f;
  border-radius: 5px;
}

div.gamescol { display: inline-block; vertical-align: top; width: 250px; padding-left: 10px; }

.star { color: #ff4444; font-weight: bold; }
.bigger { padding: 4px 20px; }
.warning { color: #00ff00; }

.friend-infobox-avatar { width: 64px; float: left; margin-right: 8px; overflow: hidden; }
.friend-infobox-avatar img { width: 100%; }
.friend-infobox-awards { display: none; }
.friend-infobox-options { background: #888; border: 1px solid #000; padding: 5px; margin: 15px 0 4px 0; }

/* Compact "Current Friends" chips: just the name + Unfriend (no avatar/chat) */
.friend-mini-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.friend-mini {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--leather-2) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 6px !important;
  padding: 4px 6px 4px 11px;
}
.friend-mini b { white-space: nowrap; }
.friend-mini .storebox_button { padding: 2px 9px; }

/* Store directory grouped by state. Only states that actually have stores get
   a heading or a jump link — the route builds the list from the stores' zips,
   so new states appear on their own (see routes/stores.js). */
.statenav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 10px 0 4px;
}
.statenav-label {
  font-family: var(--font-display); color: var(--ink-soft);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.statenav a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--leather-2); border: 1px solid var(--edge);
  border-radius: 6px; padding: 3px 9px; font-size: 13px;
  color: var(--gold) !important; text-decoration: none !important;
}
/* #newsetcleft a:hover underlines every anchor in this column — keep the chips clean. */
.statenav a:hover {
  filter: brightness(1.18);
  color: var(--gold-bright) !important; text-decoration: none !important;
}
.statenav-count {
  font-size: 11px; color: var(--ink-soft);
  background: #241a10; border-radius: 999px; padding: 0 6px;
}
.statehead {
  font-family: var(--font-display); color: var(--gold-bright);
  font-size: 17px; letter-spacing: .03em;
  margin: 18px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--edge);
}
.statehead:first-of-type { margin-top: 12px; }

/* Threads (rail + forum) */
div.threaddate { color: #C8D7E3; font-size: 11px; margin: 2px 0; }
div.threadtitle a { color: #e0b24c !important; text-decoration: none; font-weight: bold; }
div.threadtitle a:hover { text-decoration: underline; }

/* Forms */
.fieldcontainer { max-width: 640px; }
.fieldlabel { display: inline-block; width: 220px; color: #C8D7E3; padding: 4px 6px 4px 0; }
.login div { margin: 6px 0; }
.login input[type=text], .login input, input[type=text], input[type=password], select {
  background: #555;
  color: #fff;
  border: 0;
  padding: 4px 6px;
}
input[type=submit] { cursor: pointer; padding: 4px 12px; }

/* News header buttons spacing */
#newsbuttons > div a { padding: 0 6px; }

/* Roles / admin mode (topbar) */
.rolebadge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.rolebadge-admin { background: #b5322b; color: #fff; }
.rolebadge-moderator { background: #2b6bb5; color: #fff; }
.powertoggle { text-decoration: none; }
.powertoggle-on { color: #7ac043; font-weight: bold; }
.powertoggle-off { color: #C8D7E3; }

/* Who's Online / Sponsored — styled to match the events & threads rail
   panels above them (leather panel, gold border, slight radius). */
#boxonline, #boxads {
  background: #24170e !important;
  border: 1px solid var(--edge) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,.3) !important;
  color: var(--ink);
  margin: 10px 0 0 10px;
  padding: 14px;
}
.onlinelist { line-height: 1.6; }
.onlineuser { text-decoration: none; }
.onlineuser:hover { text-decoration: underline; }

/* Sponsored ads rail box content (#27) */
.adgallery { display: flex; flex-direction: column; gap: 8px; }
.adgallery-item { display: block; }
.adgallery-item img { width: 100%; border-radius: 4px; display: block; }

/* /ads gallery page */
.adgrid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.adgrid-item { width: 220px; }
.adgrid-item img { width: 100%; display: block; border-radius: 4px; }

/* ---- Chat (short-polling site + friend chat) ------------------------- */
#chatbox { max-width: 640px; }
.chatmessages {
  height: 420px;
  overflow-y: auto;
  background: #000;
  border: 1px solid #221a0f;
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.chatmsg { margin: 2px 0; word-wrap: break-word; overflow-wrap: anywhere; }
.chatmsg-time { color: #888; font-size: 11px; }
.chatmsg-name { font-weight: bold; }
.chatmsg-text { color: #ddd; }
.chatform { display: flex; gap: 6px; }
.chatform input[type=text] { flex: 1; }
.chatnote { color: #cdb98e; font-size: 11px; margin: 6px 0 0 0; }
.chatempty { color: #cdb98e; font-style: italic; margin: 6px 0 8px 0; }

/* Friends sidebar in the "Chatting with" box: a scrolling list of names you
   click to swap the chat box to that friend. */
.chatfriends { max-height: 320px; overflow-y: auto; padding: 2px 4px; }
.chatfriend {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 5px;
  padding: 6px 8px; margin: 1px 0; cursor: pointer;
  font: inherit; color: var(--ink);
}
.chatfriend:hover { background: rgba(224,178,76,0.12); }
.chatfriend.active { background: rgba(224,178,76,0.20); }
.chatfriend-name { font-weight: bold; }
.chatfriend-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #555; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); /* offline */
}
.chatfriend.chat-online .chatfriend-dot {
  background: #7ac043; box-shadow: 0 0 5px rgba(122,192,67,.85); /* online */
}
/* Unread: pulse a glow on the name until you open the conversation. Groups use
   exactly the same treatment as friends so the rail reads as one system. */
.chatfriend.chat-unread .chatfriend-name,
.chatgroup.chat-unread .chatgroup-name {
  color: var(--gold-bright) !important;
  animation: bfChatGlow 1.15s ease-in-out infinite;
}
@keyframes bfChatGlow {
  0%, 100% { text-shadow: 0 0 2px rgba(246,216,136,.35); }
  50%      { text-shadow: 0 0 9px rgba(246,216,136,.95), 0 0 16px rgba(246,216,136,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .chatfriend.chat-unread .chatfriend-name,
  .chatgroup.chat-unread .chatgroup-name { animation: none; text-decoration: underline; }
}

/* News item images are thumbnails, not banners: they float beside the text and
   are capped small so a story stays readable at a glance. Was max-width:100%,
   which let a single image swallow the whole column. */
.news-img {
  float: left;
  width: 120px; max-width: 35%;
  height: auto;
  margin: 4px 12px 6px 0;
  border: 1px solid var(--edge);
  border-radius: 5px;
}

/* Missed-message ticker beside a name in the chat rail. Sits right of the name
   (before the group member count, which stays pinned right) and is filled from
   the server's per-conversation unread count. */
.chatunread, .pendcount {
  display: inline-block; flex: 0 0 auto;
  min-width: 16px; padding: 0 5px;
  border-radius: 999px;
  background: var(--wine-2); color: #fff;
  font-size: 10px; font-weight: bold; line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 6px rgba(143,52,70,.7);
}
.chatunread[hidden] { display: none; }
/* Pending friend requests, in the topbar beside "Logged in as". */
.pendcount { margin-left: 4px; vertical-align: middle; }
/* The name should still take the slack so the ticker sits next to it. */
.chatfriend-name, .chatgroup-name { flex: 1 1 auto; }

/* ---- Chat groups ---------------------------------------------------- */
/* Rail list of group conversations, between "Chatting with" and Events. */
.chatgroups { max-height: 220px; overflow-y: auto; padding: 2px 4px; }
.chatgroup {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 5px;
  padding: 6px 8px; margin: 1px 0; cursor: pointer;
  font: inherit; color: var(--ink);
}
.chatgroup:hover { background: rgba(224,178,76,0.12); }
.chatgroup.active { background: rgba(224,178,76,0.20); }
.chatgroup-name { font-weight: bold; }
.chatgroup-count {
  flex: 0 0 auto; font-size: 11px; color: var(--ink-soft);
  background: #241a10; border-radius: 999px; padding: 0 6px;
}
/* Drop target feedback while dragging a friend in. */
.chatgroup.dragover, #chatbox.dragover {
  outline: 2px dashed var(--gold); outline-offset: -3px;
  background: rgba(224,178,76,0.10);
}
.groupempty { padding: 0 8px; font-size: 12px; color: var(--ink-soft); }
.groupnewform { display: flex; gap: 6px; padding: 4px 6px 2px; }
.groupnewform input[type=text] { flex: 1 1 auto; min-width: 0; }

/* "Close Group" sits beside the group name in the heading. Deliberately unlike
   the gold .storebox_button used everywhere else — this one deletes the group
   and its messages for everyone, so it reads as destructive: wine fill, no
   gradient-to-gold, and small caps so it never competes with the heading. */
.groupclose {
  background: var(--wine-deep, #5e1a22);
  color: var(--ink, #f1e4c6);
  border: 1px solid var(--wine-2, #8f2730);
  border-radius: 5px;
  padding: 3px 11px;
  margin-left: 12px;
  font-family: var(--font-display); font-size: 11px; font-weight: normal;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; vertical-align: middle; white-space: nowrap;
}
.groupclose:hover, .groupclose:focus-visible {
  background: var(--wine-2, #8f2730);
  border-color: #c0444e;
  color: #fff;
}

/* Management strip above the message pane when a group is open. */
.groupbar {
  background: var(--leather-2); border: 1px solid var(--edge);
  border-radius: 8px; padding: 7px 10px; margin: 0 0 10px;
}
.groupbar-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 3px 0;
}
.groupbar-label, .groupbar-hint {
  font-size: 12px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
.groupbar-hint { text-transform: none; letter-spacing: 0; flex: 1 1 auto; }
.grouproster { font-size: 13px; }
/* Each member is name + an owner-only "x" that removes them. Kept on one line
   so the x never wraps away from the name it belongs to. */
.rostermember { white-space: nowrap; }
.rosterx {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: 14px; line-height: 1;
  padding: 0 1px; margin-left: 3px; vertical-align: baseline;
}
.rosterx:hover, .rosterx:focus-visible { color: #e0555f; }
.groupaddresults { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.groupadd-chip {
  background: linear-gradient(#3a2a1c, #2a1d12); color: var(--gold);
  border: 1px solid var(--edge); border-radius: 6px;
  padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.groupadd-chip:hover { filter: brightness(1.18); }
/* Same pulse on the main-nav "Chat" link when a new message is waiting. */
#header_nav a.chat-newmsg, #mobnav a.chat-newmsg {
  color: var(--gold-bright) !important;
  animation: bfChatGlow 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #header_nav a.chat-newmsg, #mobnav a.chat-newmsg { animation: none; text-decoration: underline; }
}

/* Ambient pixel campfire behind the friend list (partials/campfire_scene.ejs):
   sits at 50% opacity below the names, which are lifted above it. */
.chatwith { position: relative; overflow: hidden; }
.chatwith > *:not(.campfire-scene) { position: relative; z-index: 1; }
.campfire-scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: 0.5; pointer-events: none;
}
.cf-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.cf-flame-outer { animation: cfFlick 1.1s ease-in-out infinite; }
.cf-flame-inner { animation: cfFlick 0.8s ease-in-out infinite reverse; }
.cf-flame-core  { animation: cfFlick 0.6s ease-in-out infinite; }
.cf-glow  { transform-box: fill-box; transform-origin: 50% 60%; animation: cfGlow 2.4s ease-in-out infinite; }
.cf-spark { transform-box: fill-box; animation: cfSpark 2.6s linear infinite; }
.cf-star  { animation: cfTwinkle 2.8s ease-in-out infinite; }
@keyframes cfFlick {
  0%, 100% { transform: scaleY(1)    scaleX(1);   opacity: .92; }
  50%      { transform: scaleY(1.14) scaleX(.92); opacity: 1; }
}
@keyframes cfGlow {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .80; transform: scale(1.08); }
}
@keyframes cfSpark {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-3px, -30px); }
}
@keyframes cfTwinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-flame, .cf-glow, .cf-spark, .cf-star { animation: none !important; }
  .cf-spark { opacity: .6; }
}

/* ======================================================================
   COZY FANTASY THEME  —  Final Fantasy × Dungeons & Dragons
   A candle-lit tavern: aged leather & wood panels, parchment-cream text,
   brass-gold accents, burgundy highlights, engraved serif type. Appended
   last so it re-skins the ported main.css / menu.css surfaces in place.
   ====================================================================== */
:root {
  --ink:        #f1e4c6;   /* warm parchment text on dark */
  --ink-soft:   #cdb98e;   /* muted parchment (dates, subheads) */
  --gold:       #e0b24c;   /* primary accent / links */
  --gold-bright:#f6d888;
  --gold-deep:  #b6863a;
  --wine:       #732536;   /* burgundy */
  --wine-2:     #8f3446;
  --wine-deep:  #551c28;
  --moss:       #5d6a39;
  --leather:    #2b1d12;   /* main panel */
  --leather-2:  #33241a;   /* raised card */
  --leather-3:  #20130b;   /* inset / footer / streak */
  --edge:       #6f5027;   /* brass border */
  --edge-soft:  #3a2a17;
  --font-body:  "Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-display: Cinzel,"Trajan Pro","Palatino Linotype",Georgia,serif;
}

/* ---- Page: candle-lit vignette ------------------------------------- */
html {
  background:
    radial-gradient(1200px 360px at 50% -30px, rgba(240,196,104,0.12), rgba(240,196,104,0) 60%),
    radial-gradient(1100px 760px at 50% 0, #3a2418 0%, #271611 44%, #150c07 100%) !important;
  background-attachment: fixed !important;
}

/* ---- Display type -------------------------------------------------- */
h1 {
  font-family: var(--font-display) !important;
  color: var(--gold);
  letter-spacing: .02em;
  text-shadow: 0 1px 0 #170d07, 0 0 12px rgba(224,178,76,.16);
}
h1 b { color: var(--gold); }
h2 { color: var(--ink-soft); }
h3 { color: var(--gold); }
body p { color: var(--ink); }              /* soften default white body text to cream */
div.streak h3, div.streakleft h3, div.streakright h3, div.streaknews h1 { color: var(--gold); }
div.miniright h4 { color: var(--gold); }
.warning { color: var(--gold-bright); }

/* ---- Top login bar ------------------------------------------------- */
#topevents, #toplogin, #topnotes { background: #241610 !important; }
#topevents { border-right: 1px solid var(--edge) !important; }
#topnotes  { border-left:  1px solid var(--edge) !important; }
/* The legacy rule parked this notice OUTSIDE its own box: div#pendnotify is
   height:0 and its link is position:absolute; top:-45px, i.e. lifted a full
   topbar-height above itself. That worked in the old layout, but #topbar is
   position:fixed at the very top of the viewport here, so -45px put the link
   off-screen — rendered in the HTML, never visible. Pin it back into the
   #topnotes cell. !important is needed: the legacy selectors are div#id
   (0,1,0,1), which outranks a plain #id. */
#pendnotify {
  position: static !important;
  float: none !important;
  height: 45px !important;
  line-height: 45px !important;
}
#pendnotify a:link, #pendnotify a:visited, #pendnotify a:active {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: 45px !important;
  line-height: 45px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 8px;
  text-align: center;
  color: var(--gold) !important;
  white-space: nowrap;
}
#pendnotify a:hover { color: var(--gold-bright) !important; }
#pendnotify .plusicon { font-weight: bold; margin-right: 2px; }
#topevents:hover, #toplogin:hover, #topnotes:hover { background: #150c07 !important; }
#toplogin a { color: var(--gold) !important; }

/* ---- Banner -------------------------------------------------------- */
#topgraphic {
  background: url("../img/banner_fantasy.svg") center center no-repeat !important;
  background-size: 100% 100% !important;
  height: 132px !important;
  position: relative;       /* anchor the wizard/goblin overlays */
  overflow: visible;        /* let them bleed past the banner edges */
  margin-bottom: 30px;      /* gap the characters bleed into (above the nav) */
}
/* "Retail store?" moved into the nav bar, right-justified w/ 50px padding.
   width:1px + nowrap shrinks the cell to its content so the nav links keep
   the left-hand space; the button then sits 50px from the bar's right edge. */
#menubar > div#retailnav {
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
  width: 1px;
  padding-right: 50px;
}
#retailnav a {
  display: inline-block;
  color: var(--gold);
  background: linear-gradient(#3a2a1c, #2a1d12);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 5px 12px;
  text-decoration: none;
  font-family: var(--font-display);
  letter-spacing: .02em;
}
#retailnav a:hover { background: var(--wine); color: var(--gold-bright); }

/* ---- Main-page intro block (admin-editable) ------------------------ */
#homeintro { margin: 4px 0 12px; }
#homeintro h1 { margin-bottom: 2px; }
#homeintro h2 { margin: 0 0 8px; }
#homeintro .introbody { color: var(--ink); line-height: 1.6; }

/* ---- Menu bar & nav ------------------------------------------------ */
#menubar {
  background: #241610 !important;
  border-top: 2px solid var(--gold-deep) !important;
  border-bottom: 2px solid var(--gold-deep) !important;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.42);
}
#header_nav > li > a {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: .03em;
}
#header_nav > li:hover { background: var(--wine); }
#header_nav > li:hover > a { color: var(--gold-bright); }
#header_nav > li > ul {
  background: #1b110a;
  border: 1px solid var(--edge);
  box-shadow: 0 10px 20px rgba(0,0,0,.55);
}
#header_nav > li > ul li a { color: var(--ink); }
#header_nav > li > ul li a:hover { background: var(--wine); color: var(--gold-bright); }

/* Site search box */
#sitesearch input[type=text] {
  background: #3a2a1c !important; color: var(--ink) !important;
  border: 1px solid var(--edge) !important;
}
#sitesearchform input[type=submit] {
  background: linear-gradient(var(--wine-2), var(--wine-deep)) !important;
  color: var(--gold-bright) !important; border: 1px solid var(--gold-deep) !important;
}
#sitesearchform input[type=submit]:hover { background: var(--wine-2) !important; }

/* ---- Text-ad strip ------------------------------------------------- */
#textspace {
  background: #241610 !important; color: var(--ink) !important;
  border: 1px solid var(--edge) !important; border-radius: 8px !important;
}
#textspace a { color: var(--gold) !important; }

/* ---- Main content column & rail boxes ------------------------------ */
#newsetcleft {
  background:
    linear-gradient(180deg, rgba(246,216,136,0.04), rgba(0,0,0,0.16)),
    var(--leather) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,.36), 0 8px 22px rgba(0,0,0,.35) !important;
}
#newsetcleft a { color: var(--gold); }
#newsetcleft a:hover { color: var(--gold-bright); text-decoration: underline; }
#boxup, #boxdown, #boxgroups {
  background: #24170e !important;
  border: 1px solid var(--edge) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,.3) !important;
}
/* The legacy stylesheet lays the rail boxes out by ID (#boxup/#boxdown carry
   margin-left:10px + padding:14px), and an ID beats the .streak class this box
   would otherwise take its box model from — so Groups has to restate those
   values or it sits flush left and under-padded, out of line with the boxes
   above and below. margin-top matches #boxdown's so all three gaps are even. */
#boxgroups {
  margin-left: 10px;
  margin-top: 10px;
  padding: 14px;
  color: #C8D7E3;
}
#boxup a { color: var(--gold); }
#boxdown a:hover { border-left-color: var(--gold); }
#eventsearch { background: #1b110a !important; border-radius: 8px; }

/* ---- Footer -------------------------------------------------------- */
#footer {
  background: var(--leather-3) !important;
  border-top: 2px solid var(--gold-deep) !important;
  border-radius: 10px !important;
}
#footer a { color: var(--gold) !important; }

/* ---- Cards, boxes, streaks ----------------------------------------- */
.friend-infobox, .storebox, .myhome {
  background: var(--leather-2) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 8px !important;
}
.eventboxes, .newsitem2,
div.streak, div.streakleft, div.streakright, div.streaknews {
  background: var(--leather-3) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 8px !important;
}
div.dividermid, div.dividerleft, div.dividerright {
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent) !important;
  height: 2px !important;
  opacity: .7;
}

/* ---- Forms & buttons ----------------------------------------------- */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=datetime-local], input[type=search],
select, textarea {
  background: #3a2a1c !important; color: var(--ink) !important;
  border: 1px solid var(--edge) !important; border-radius: 5px !important;
}
input[type=text]::placeholder, textarea::placeholder { color: #a8946c; }
input[type=submit], button.btn, .bigger {
  background: linear-gradient(var(--wine-2), var(--wine-deep)) !important;
  color: var(--gold-bright) !important;
  border: 1px solid var(--gold-deep) !important;
  border-radius: 6px !important; padding: 5px 14px !important;
  cursor: pointer; font-family: var(--font-display) !important; letter-spacing: .03em;
}
input[type=submit]:hover, button.btn:hover { filter: brightness(1.12); color: #fff !important; }
.css-buttons-l, .css-buttons-r, .event-css-buttons, .storebox_button {
  background: linear-gradient(#3a2a1c, #2a1d12) !important;
  color: var(--gold) !important;
  border: 1px solid var(--edge) !important;
  border-radius: 6px !important;
}
.css-buttons-l:hover, .css-buttons-r:hover,
.event-css-buttons:hover, .storebox_button:hover {
  background: var(--wine) !important; color: var(--gold-bright) !important;
  text-decoration: none !important; /* never underline a button, even inside #newsetcleft */
}
/* Button shortcodes authored inside a news body ([[Label | url]]). Styled to
   match the preview's primary CTA (wine gradient, gold-bright text, gold
   border) rather than the leather Source/Share row, sit inline within the
   prose (drop the base .storebox_button float), and never underline. The
   #newsetcleft a:hover rule underlines plain links, so text-decoration:none is
   forced with !important here to win over it. */
.news-btn {
  float: none !important; display: inline-block !important;
  padding: 8px 16px !important; margin: 2px 8px 4px 0 !important;
  font-family: var(--font-display) !important; letter-spacing: .03em;
  vertical-align: middle;
  background: linear-gradient(var(--wine-2), var(--wine-deep)) !important;
  color: var(--gold-bright) !important;
  border: 1px solid var(--gold-deep) !important;
  border-radius: 5px !important;
  text-decoration: none !important;
}
.news-btn:hover {
  filter: brightness(1.12);
  color: #fff !important;
  background: linear-gradient(var(--wine-2), var(--wine-deep)) !important;
  text-decoration: none !important;
}
/* Pager under the front-page News feed (shown only when Forums are off). */
.newspager { text-align: center; margin: 14px 0 4px; }
.newspager-status {
  color: var(--ink); font-family: var(--font-display) !important;
  letter-spacing: .02em; padding: 0 10px; vertical-align: middle;
}

/* ---- Chat window --------------------------------------------------- */
.chatmessages { background: #1b110a !important; border: 1px solid var(--edge) !important; }
.chatmsg-text { color: var(--ink); }
.chatmessages::-webkit-scrollbar { width: 10px; }
.chatmessages::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 5px; }

/* ---- Mobile ------------------------------------------------------- */
#mobnav a {
  background: #241610 !important; color: var(--gold) !important;
  border: 1px solid var(--edge) !important;
}
.eventfixed > a {
  background: var(--wine) !important; color: var(--gold-bright) !important;
  border-color: var(--gold-deep) !important;
}
@media screen and (max-width: 1099px) {
  #topgraphic { height: 74px !important; margin-bottom: 0 !important; }
}

/* ---- Very slightly rounded corners --------------------------------- */
#menubar, #textspace, #newsetcleft, #boxup, #boxdown, #footer, #eventsearch,
.friend-infobox, .storebox, .myhome, .eventboxes, .newsitem2,
div.streak, div.streakleft, div.streakright, div.streaknews,
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=datetime-local], input[type=search], select, textarea,
input[type=submit], button.btn, .bigger, .css-buttons-l, .css-buttons-r,
.event-css-buttons, .storebox_button, .chatmessages, #retailquestion,
#mobnav a, .eventfixed > a,
#sitesearch input[type=text], #sitesearchform input[type=submit] {
  border-radius: 5px !important;
}
/* Main content panel + rail boxes: simple gold hairline border. */
#newsetcleft, #boxup, #boxdown, #boxgroups { border: 1px solid var(--edge) !important; }

/* ---- Banner characters (wizard & goblin) --------------------------
   Sized larger than the banner so they bleed out of its lower edge into
   the gap above the nav; pointer-events off so they never block the menu.
   The wizard's orb glows, and both characters idle-bob gently. */
@keyframes bfBob  { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-4px); } }
@keyframes bfBobG { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-3px); } }
@keyframes bfOrb  { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.2); } }
.bannerchar { position: absolute; pointer-events: none; z-index: 1; }
.bannerchar.wizard   { left: 34px; top: 2px;  height: 158px; animation: bfBob  3.4s ease-in-out infinite; }
/* Shared right-hand slot — goblin, dragon, and future characters rotate here. */
.bannerchar.rightchar { right: 30px; top: 16px; height: 140px; animation: bfBobG 3.9s ease-in-out infinite; }
.wizorb-glow    { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.2s ease-in-out infinite; }
.dragoneye-glow { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.4s ease-in-out infinite; }
.finglow        { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.3s ease-in-out infinite; }
.swordglow      { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.5s ease-in-out infinite; }
.krakentip      { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.1s ease-in-out infinite; }
.goblineye-glow { transform-box: fill-box; transform-origin: center; animation: bfOrb 2.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bannerchar, .wizorb-glow, .dragoneye-glow, .finglow, .swordglow, .krakentip, .goblineye-glow { animation: none !important; } }

/* ---- Account security (email confirmation + two-factor) --------------
   Shares the leather/brass palette above so these pages don't read as a
   bolted-on admin tool. */

/* Unconfirmed-email strip, directly under the text-ad bar. Amber rather
   than red: nothing is broken, an action is simply outstanding. */
#verifynotice {
  background: linear-gradient(180deg, #4a3312, #3a2710);
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--edge-soft);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
}
#verifynotice b { color: var(--gold-bright); }
#verifynotice a { color: var(--gold); text-decoration: underline; margin-left: 6px; }

/* Enrollment / status panels. */
.secbox {
  background: var(--leather-2);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 14px;
  margin: 12px 0;
}
.secbox h3 {
  font-family: var(--font-display);
  color: var(--gold);
  margin: 0 0 8px;
}
.secbox .muted { color: var(--ink-soft); font-size: 13px; }

/* State pill: on/off at a glance without reading the sentence. */
.secstate {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.secstate.on  { background: #2f4a24; color: #b8e59a; border: 1px solid #5d6a39; }
.secstate.off { background: #4a2420; color: #f0b0a4; border: 1px solid #8f3446; }

/* QR + manual key, side by side; stacks on narrow screens. */
.enroll { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.enroll-qr {
  background: #fff;          /* scanners want a light quiet zone */
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--edge);
  line-height: 0;
}
.enroll-qr img { display: block; width: 200px; height: 200px; }
.enroll-steps { flex: 1 1 260px; min-width: 260px; }
.enroll-steps ol { margin: 0 0 10px 18px; padding: 0; }
.enroll-steps li { margin-bottom: 6px; }

/* The typed-in-by-hand fallback when a camera won't cooperate. */
.setupkey {
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .12em;
  word-break: break-all;
  background: var(--leather-3);
  border: 1px dashed var(--edge);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--gold-bright);
}

/* Six-digit entry: wide, spaced, numeric — it gets typed under mild stress. */
input.otpinput {
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  letter-spacing: .40em;
  text-align: center;
  width: 190px;
  padding: 8px 6px 8px 12px;   /* extra left pad offsets the trailing letter-space */
}

/* Recovery codes: monospace grid, shown exactly once. */
.reccodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.reccodes li {
  list-style: none;
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .06em;
  background: var(--leather-3);
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  padding: 7px 9px;
  text-align: center;
  color: var(--ink);
}
.reccodes li.spent { opacity: .45; text-decoration: line-through; }

/* Warnings that must not be skimmed past. */
.secwarn {
  background: #4a2420;
  border: 1px solid #8f3446;
  border-left-width: 4px;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0;
  color: #f6d3cc;
}
.secwarn b { color: #ffd9d0; }

@media print {
  /* Printing the recovery codes is a supported way to keep them. */
  #topbarouter, #menubar, #submenubar, #textspace, #verifynotice,
  #newsetcright, .noprint { display: none !important; }
  .reccodes li { color: #000; border-color: #999; background: #fff; }
}