:root{
  --bg:#0B0B10;
  --panel:#15151C;
  --panel-2:#1C1C26;
  --panel-3:#22222E;
  --border:#2B2B38;
  --text:#C9C9D6;
  --text-dim:#83839A;
  --text-bright:#F1F1F8;
  --accent:#9B7BF0;
  --accent-2:#7C5CE0;
  --accent-soft:#241C3B;
  --gold:#D8B36C;
  --gold-soft:#332A19;
  --life:#4CAF7D;
  --warn:#E0B84C;
  --danger:#E1584F;
  --danger-soft:#331817;
  --conf:#5EC8D8;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.5;
  margin:0;
}
a{ color:var(--accent); cursor:pointer; text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; }
.mono{ font-family:'IBM Plex Mono','Consolas',monospace; }
[hidden]{ display:none !important; }

/* ---------- top bar ---------- */
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.topbar-left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; min-width:0; }
.brand{
  font-family:'Cinzel',Georgia,serif;
  font-weight:700;
  font-size:16px;
  color:var(--gold);
  letter-spacing:.02em;
  white-space:nowrap;
}
.topnav{ display:flex; gap:16px; flex-wrap:wrap; }
.topnav button{
  background:none; border:none; color:var(--text-dim);
  font-size:12.5px; letter-spacing:.02em; padding:6px 2px;
  border-bottom:2px solid transparent; cursor:pointer;
}
.topnav button:hover{ color:var(--text-bright); }
.topnav button[data-active="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.logout-btn{ background:none; border:1px solid var(--border); color:var(--text-dim); padding:8px 12px; border-radius:3px; cursor:pointer; font-size:12px; flex:none; }
.logout-btn:hover{ color:var(--text-bright); border-color:var(--text-dim); }

/* Burger + drawer exist on every screen size but only show on phones. */
.burger-btn, .topbar-page{ display:none; }
.drawer{ display:none; }

@media (max-width:640px){
  /* Pinned title bar: burger, game name, current page. The tab strip and
     Log Out move into the slide-in drawer. */
  .topbar{
    position:sticky; top:0; z-index:30;
    flex-wrap:nowrap; gap:10px; padding:8px 12px;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .topbar-left{ gap:10px; flex-wrap:nowrap; min-width:0; flex:1; }
  .topnav, .topbar > .logout-btn{ display:none; }
  .brand{ font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-page{ display:inline; font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:12.5px; color:var(--text-dim); margin-left:8px; }
  .topbar-page:not(:empty)::before{ content:"\00B7"; margin-right:8px; }

  .burger-btn{
    display:flex; flex-direction:column; justify-content:center; gap:4px; flex:none;
    width:38px; height:38px; padding:0 9px; box-sizing:border-box;
    background:var(--panel-2); border:1px solid var(--border); border-radius:3px; cursor:pointer;
  }
  .burger-btn span{ display:block; height:2px; background:var(--text-bright); border-radius:1px; transition:transform .2s, opacity .2s; }
  .burger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .burger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .burger-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .drawer{ display:block; position:fixed; inset:0; z-index:60; pointer-events:none; }
  .drawer-backdrop{ position:absolute; inset:0; background:rgba(5,5,10,.6); opacity:0; transition:opacity .2s; }
  .drawer-panel{
    position:absolute; top:0; bottom:0; left:0; width:min(82vw, 300px);
    background:var(--panel); border-right:1px solid var(--border); box-shadow:4px 0 24px rgba(0,0,0,.5);
    display:flex; flex-direction:column; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease-out;
  }
  .drawer.open{ pointer-events:auto; }
  .drawer.open .drawer-backdrop{ opacity:1; }
  .drawer.open .drawer-panel{ transform:none; }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
  .drawer-close{ background:none; border:none; color:var(--text-dim); font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; }
  .drawer-close:hover{ color:var(--text-bright); }
  .drawer .sidenav button{ padding:12px 16px; font-size:14px; }
  .drawer-foot{ margin-top:auto; padding:14px; border-top:1px solid var(--border); }
  .drawer-foot .logout-btn{ width:100%; }
  body.drawer-open{ overflow:hidden; }
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  .drawer-panel, .drawer-backdrop, .burger-btn span{ transition:none; }
}

/* ---------- layout ---------- */
.layout{
  max-width:1180px;
  margin:0 auto;
  padding:20px 16px 48px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 220px;
  gap:18px;
  align-items:start;
}
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; padding-left:14px; padding-right:14px; }
  .side-left{ order:1; }
  .main-col{ order:2; }
  .side-right{ order:3; }
}
@media (max-width:640px){
  /* On phones the menu lives in the burger drawer; this copy under the
     portrait would just repeat it. */
  .side-left .nav-panel{ display:none; }
  .portrait-wrap{ padding:12px 12px 8px; }
  .portrait-wrap svg:not(.wc-icon){ width:80px; height:100px; }
}
.stack{ display:flex; flex-direction:column; gap:12px; }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:3px; }
.panel-title{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim);
  padding:9px 12px; border-bottom:1px solid var(--border); background:var(--panel-2);
}
.panel-body{ padding:12px; }

.portrait-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 12px 6px; }
/* the avatar only — not the coin icons in the text below it */
.portrait-wrap svg:not(.wc-icon){ width:120px; height:150px; }
.wname{ font-family:'Cinzel',serif; font-weight:700; font-size:14px; color:var(--text-bright); text-align:center; }
.wmeta{ font-size:11.5px; color:var(--text-dim); text-align:center; }
.wmeta b{ color:var(--gold); font-weight:600; }

.bars{ padding:0 12px 12px; display:flex; flex-direction:column; gap:8px; }
.bar-row .bar-label{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-dim); margin-bottom:2px; }
.bar-track{ height:8px; background:var(--panel-3); border-radius:2px; overflow:hidden; border:1px solid var(--border); }
.bar-fill{ height:100%; border-radius:2px; }
.bar-fill.life{ background:var(--life); }
.bar-fill.exp{ background:var(--accent); }
.bar-fill.conf{ background:var(--conf); }
.bar-fill.motiv{ background:var(--warn); }

.sidenav{ display:flex; flex-direction:column; }
.sidenav button{ all:unset; cursor:pointer; padding:8px 12px; font-size:12.5px; color:var(--text); border-left:2px solid transparent; }
.sidenav button:hover{ background:var(--panel-2); color:var(--text-bright); }
.sidenav button[data-active="true"]{ background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); }

.gametime{ padding:12px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-bright); }
.roster-row{ display:flex; justify-content:space-between; padding:6px 12px; font-size:12px; border-top:1px solid var(--border); }
.roster-row:first-child{ border-top:none; }
button.roster-row{ all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; padding:6px 12px; font-size:12px; border-top:1px solid var(--border); cursor:pointer; color:var(--text); }
button.roster-row:first-child{ border-top:none; }
button.roster-row:hover{ background:var(--panel-2); color:var(--text-bright); }
button.roster-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(5,5,10,.72); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.modal-card{ position:relative; width:100%; max-width:300px; padding-bottom:4px; max-height:calc(100vh - 32px); overflow-y:auto; }
.modal-close{ position:absolute; top:6px; right:8px; background:none; border:none; color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; }
.modal-close:hover{ color:var(--text-bright); }
.modal-history{ padding:10px 12px 2px; }
.modal-history .empty-note{ padding:2px 0 8px; }
.modal-actions{ padding:12px; border-top:1px solid var(--border); }
.modal-note{ margin-top:8px; font-size:11.5px; color:var(--text-dim); text-align:center; }
.roster-row .lvl{ color:var(--gold); font-family:'IBM Plex Mono',monospace; }
.empty-note{ padding:12px; font-size:12px; color:var(--text-dim); font-style:italic; }

.main-col{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.page-head{ background:var(--panel-2); border:1px solid var(--border); border-radius:3px; padding:10px 14px; font-family:'Cinzel',serif; font-weight:700; font-size:14px; color:var(--text-bright); text-align:center; }
.content-panel{ background:var(--panel); border:1px solid var(--border); border-radius:3px; padding:18px; }
.content-panel h3{ font-family:'Cinzel',serif; font-size:14px; color:var(--gold); margin:0 0 10px; border-bottom:1px solid var(--border); padding-bottom:6px; }
.content-panel p{ color:var(--text); margin:0 0 10px; }
.flavor{ color:var(--text-dim); font-style:italic; }
.notice{ background:var(--accent-soft); border:1px solid var(--accent-2); border-radius:3px; padding:10px 12px; font-size:12.5px; color:var(--text-bright); margin-bottom:14px; }
.notice.warn{ background:#332B14; border-color:var(--warn); }
.notice.danger{ background:var(--danger-soft); border-color:var(--danger); color:#FFD9D6; }

table.stat-table{ width:100%; border-collapse:collapse; }
table.stat-table td{ padding:5px 8px; font-size:12.5px; border-bottom:1px solid var(--border); }
table.stat-table td.k{ color:var(--text-dim); width:42%; }
table.stat-table td.v{ color:var(--text-bright); font-family:'IBM Plex Mono',monospace; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-2); color:#F5F2FF; border:1px solid var(--accent);
  padding:8px 14px; border-radius:3px; font-size:12.5px; font-weight:500; cursor:pointer;
}
.btn:hover{ background:var(--accent); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.gold{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
.btn.gold:hover{ background:var(--gold); color:#1B1608; }
.btn.danger{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.btn.small{ padding:5px 10px; font-size:11.5px; }
.btn.full{ width:100%; justify-content:center; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea{
  background:var(--panel-3); border:1px solid var(--border); color:var(--text-bright);
  padding:8px 10px; border-radius:3px; font-family:inherit; font-size:13px; width:100%;
}
input:focus-visible, textarea:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
textarea{ resize:vertical; min-height:64px; }
label{ font-size:11.5px; color:var(--text-dim); display:block; margin-bottom:4px; }

.item-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--border); border-radius:3px; margin-bottom:8px; background:var(--panel-2); }
.item-row .meta{ font-size:11.5px; color:var(--text-dim); }
.item-row .name{ color:var(--text-bright); font-weight:500; }
.item-actions{ display:flex; gap:6px; flex-shrink:0; }
.tag{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-left:6px; }

@media (max-width:480px){
  /* Bigger tap targets, and >=16px inputs so iOS Safari doesn't zoom on focus. */
  .btn{ padding:10px 14px; }
  .btn.small{ padding:9px 12px; font-size:12px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea{
    font-size:16px; padding:10px 11px;
  }
  .item-row{ flex-wrap:wrap; }
  .item-row > div:first-child{ min-width:0; flex:1 1 180px; }
}

.board-post{ border-bottom:1px solid var(--border); padding:10px 0; }
.board-post .who{ cursor:pointer; }
.board-post .who:hover{ text-decoration:underline; }
.post-actions{ display:flex; gap:6px; margin-top:6px; }
.link-btn{ all:unset; cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }
.link-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.stat-table .meta{ font-size:11px; color:var(--text-dim); }
.role-badge{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:999px; margin-left:6px; }
.role-badge.admin{ background:#332B14; color:var(--gold); }
.role-badge.moderator{ background:var(--accent-soft); color:var(--accent); }
.role-badge.bad{ background:var(--danger-soft); color:#FFD9D6; }
.admin-counts{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.admin-counts .count{ background:var(--panel-2); border:1px solid var(--border); border-radius:3px; padding:8px 12px; min-width:90px; }
.admin-counts .count b{ display:block; font-size:18px; color:var(--text-bright); font-family:'IBM Plex Mono',monospace; }
.admin-counts .count span{ font-size:11px; color:var(--text-dim); }
.admin-select{ background:var(--panel-3); color:var(--text-bright); border:1px solid var(--border); border-radius:3px; padding:7px 9px; }
.mod-log-row{ font-size:12px; padding:6px 0; border-top:1px solid var(--border); }
.mod-log-row:first-child{ border-top:none; }
.mod-log-row .when{ color:var(--text-dim); font-size:11px; margin-left:6px; }
.board-post:first-child{ padding-top:0; }
.board-post .who{ color:var(--gold); font-weight:600; font-size:12.5px; }
.board-post .when{ color:var(--text-dim); font-size:10.5px; margin-left:6px; }
.board-post .txt{ margin-top:3px; color:var(--text); white-space:pre-wrap; word-break:break-word; }

.battle-log{ background:var(--panel-3); border:1px solid var(--border); border-radius:3px; padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:12px; max-height:220px; overflow-y:auto; }
.battle-log div{ padding:2px 0; color:var(--text-dim); }
.battle-log div.hit{ color:var(--text-bright); }
.battle-log div.result{ color:var(--gold); font-weight:600; margin-top:4px; }

footer.foot{ max-width:1180px; margin:0 auto; padding:0 16px 32px; color:var(--text-dim); font-size:10.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }

/* ---------- auth screens ---------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.auth-card{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:28px 26px; }
@media (max-width:400px){
  .auth-card{ padding:22px 18px; }
}
.auth-brand{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:19px; color:var(--gold); text-align:center; margin-bottom:4px; }
.auth-sub{ text-align:center; color:var(--text-dim); font-size:12px; margin-bottom:22px; }
.auth-tabs{ display:flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:20px; }
.auth-tabs button{ flex:1; background:var(--panel-2); border:none; color:var(--text-dim); padding:9px; font-size:12.5px; cursor:pointer; }
.auth-tabs button[data-active="true"]{ background:var(--accent-2); color:#fff; }
.auth-field{ margin-bottom:14px; }
.auth-error{ background:var(--danger-soft); border:1px solid var(--danger); color:#FFD9D6; border-radius:3px; padding:8px 10px; font-size:12px; margin-bottom:14px; }
.auth-note{ background:var(--accent-soft); border:1px solid var(--accent-2); color:var(--text-bright); border-radius:3px; padding:8px 10px; font-size:12px; margin-bottom:14px; }
.auth-links{ text-align:center; margin-top:16px; font-size:12px; color:var(--text-dim); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------- themed toasts & confirm dialogs (see showToast / confirmDialog in app.js) ---------- */
.toast-host{ position:fixed; top:16px; right:16px; z-index:80; display:flex; flex-direction:column; gap:8px; max-width:min(360px, calc(100vw - 32px)); pointer-events:none; }
.toast{
  pointer-events:auto; cursor:pointer;
  display:flex; gap:10px; align-items:flex-start;
  background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:3px; padding:10px 12px; color:var(--text-bright); font-size:12.5px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  animation:toast-in .2s ease-out;
}
.toast.error{ border-left-color:var(--danger); background:linear-gradient(90deg, var(--danger-soft), var(--panel-2) 60%); }
.toast.success{ border-left-color:var(--life); }
.toast.info{ border-left-color:var(--gold); }
.toast-icon{ font-size:13px; line-height:1.4; }
.toast.error .toast-icon{ color:var(--danger); }
.toast.success .toast-icon{ color:var(--life); }
.toast.info .toast-icon{ color:var(--gold); }
.toast.leaving{ opacity:0; transform:translateX(12px); transition:opacity .22s, transform .22s; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:640px){ .toast-host{ top:auto; bottom:16px; left:16px; right:16px; max-width:none; } }

.dialog-backdrop{ z-index:70; animation:dlg-fade .15s ease-out; }
.dialog-card{ max-width:360px; border-color:var(--accent-2); box-shadow:0 10px 40px rgba(0,0,0,.6); animation:dlg-pop .18s ease-out; }
.dialog-body{ padding:12px 14px 4px; color:var(--text); font-size:13px; white-space:pre-wrap; word-break:break-word; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px 14px 12px; }
@keyframes dlg-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dlg-pop{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .toast, .dialog-backdrop, .dialog-card{ animation:none; } .toast.leaving{ transition:none; } }

/* ---------- avatars & item art (public/avatar.js) ---------- */
.portrait-btn{ all:unset; cursor:pointer; display:block; border-radius:4px; }
.portrait-btn:hover svg{ filter:brightness(1.08); }
.portrait-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.item-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.item-icon{ width:42px; height:42px; flex-shrink:0; background:var(--panel-3); border:1px solid var(--border); border-radius:3px; }
.account-portrait svg{ width:64px; height:80px; display:block; }

.appearance-layout{ display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:start; }
.appearance-side{ position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; }
.appearance-preview{ background:var(--panel-2); border:1px solid var(--border); border-radius:3px; }
.appearance-preview svg{ display:block; width:100%; height:auto; }
.appearance-check{ display:flex; align-items:center; gap:6px; font-size:12px; margin:0; }
.appearance-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
.appearance-buttons .btn.gold{ margin-left:auto; }
.appearance-options{ display:flex; flex-direction:column; gap:12px; }
.appearance-group{ background:var(--panel); border:1px solid var(--border); border-radius:3px; }
.appearance-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; padding:10px; }
.appearance-grid .opt{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 4px; border:1px solid var(--border); border-radius:3px; background:var(--panel-2); font-size:11px; color:var(--text);
}
.appearance-grid .opt svg{ width:60px; height:60px; background:var(--panel-3); border-radius:2px; }
.appearance-grid .opt:hover{ border-color:var(--accent-2); }
.appearance-grid .opt.selected{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold); }
.appearance-grid .opt:focus-visible, .appearance-swatches .swatch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.appearance-swatches{ display:flex; flex-wrap:wrap; gap:8px; padding:10px; }
.appearance-swatches .swatch{ all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%; border:2px solid var(--border); box-shadow:inset 0 0 0 2px rgba(0,0,0,.25); }
.appearance-swatches .swatch.selected{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), inset 0 0 0 2px rgba(0,0,0,.25); }
@media (max-width:640px){
  .appearance-layout{ grid-template-columns:1fr; }
  .appearance-side{ position:static; }
  .appearance-preview{ max-width:220px; margin:0 auto; }
  .appearance-grid{ grid-template-columns:repeat(auto-fill, minmax(68px, 1fr)); }
  .appearance-grid .opt svg{ width:52px; height:52px; }
}

/* ---------- server announcements (Tower + admin editor) ---------- */
.announcement{ background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:3px; margin-bottom:8px; }
.announcement.pinned{ border-left-color:var(--gold); }
.announcement > summary{ list-style:none; cursor:pointer; padding:10px 12px; }
.announcement > summary::-webkit-details-marker{ display:none; }
.announcement > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.ann-head{ display:flex; align-items:center; gap:4px; }
.ann-title{ font-family:'Cinzel',serif; font-weight:700; color:var(--text-bright); font-size:13.5px; }
.ann-chevron{ margin-left:auto; color:var(--text-dim); transition:transform .15s; }
.announcement[open] .ann-chevron{ transform:rotate(180deg); }
.ann-meta{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.ann-snippet{
  margin-top:5px; max-height:4.9em; overflow:hidden; pointer-events:none; /* clicks expand the card */
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent);
}
.ann-snippet.md{ font-size:12.5px; line-height:1.55; }
.ann-snippet.md > :first-child{ margin-top:0; }
.ann-snippet.md p, .ann-snippet.md ul, .ann-snippet.md ol, .ann-snippet.md blockquote, .ann-snippet.md pre{ margin:4px 0; }
.ann-snippet.md h4, .ann-snippet.md h5, .ann-snippet.md h6{ margin:4px 0 2px; }
.announcement[open] .ann-snippet{ display:none; }
.tag.new{ background:var(--gold-soft); color:var(--gold); }
.ann-body{ padding:2px 14px 12px; border-top:1px solid var(--border); }

/* Rendered Markdown (public/markup.js) */
.md{ font-size:13px; line-height:1.6; color:var(--text); word-break:break-word; }
.md p{ margin:10px 0; }
.md h4, .md h5, .md h6{ font-family:'Cinzel',serif; color:var(--text-bright); margin:14px 0 6px; }
.md h4{ font-size:15px; } .md h5{ font-size:13.5px; } .md h6{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); }
.md ul, .md ol{ margin:8px 0; padding-left:22px; }
.md li{ margin:3px 0; }
.md blockquote{ margin:10px 0; padding:4px 12px; border-left:3px solid var(--accent-2); background:var(--accent-soft); color:var(--text-bright); }
.md blockquote p{ margin:6px 0; }
.md code{ font-family:'IBM Plex Mono',monospace; font-size:12px; background:var(--panel-3); border:1px solid var(--border); border-radius:2px; padding:0 4px; }
.md pre{ background:var(--panel-3); border:1px solid var(--border); border-radius:3px; padding:10px; overflow-x:auto; }
.md pre code{ border:none; padding:0; background:none; }
.md hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }
.md strong{ color:var(--text-bright); }
.md del{ color:var(--text-dim); }

.ann-editor{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.ann-editor textarea{ width:100%; min-height:160px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; resize:vertical; }
.ann-editor-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ann-help summary{ cursor:pointer; font-size:12px; color:var(--text-dim); }
.ann-help .meta{ margin-top:6px; font-size:11.5px; line-height:1.9; }
#annPreview{ padding-top:8px; }
@media (max-width:640px){ .ann-editor{ grid-template-columns:1fr; } }

/* ---------- message board threads ---------- */
.boards-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.new-thread{ background:var(--panel-2); border:1px solid var(--border); border-radius:3px; padding:12px; margin-bottom:14px; max-width:640px; }
.new-thread input, .new-thread textarea, .reply-box textarea{ width:100%; }
button.thread-row{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:3px; margin-bottom:8px; background:var(--panel-2); }
button.thread-row:hover{ border-color:var(--accent-2); }
button.thread-row:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.thread-row .name{ font-family:'Cinzel',serif; font-weight:700; color:var(--text-bright); }
.thread-snippet{ font-size:12px; color:var(--text); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-status{ flex-shrink:0; font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; }
.thread-status.archived{ color:var(--warn); }
.boards-pager{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.thread-post{ padding:12px 0; }
.thread-post.opening{ background:var(--panel-2); border:1px solid var(--border); border-radius:3px; padding:12px; margin-bottom:6px; }
.post-head{ display:flex; align-items:center; gap:4px; }
.thread-post .txt.md p:first-child{ margin-top:4px; }
.reply-box{ margin-top:14px; max-width:720px; }

/* ---------- post actions column + reports ---------- */
.thread-post{ display:flex; gap:12px; align-items:flex-start; }
.thread-post .post-main{ flex:1; min-width:0; }
.thread-post .post-actions{ flex-shrink:0; margin-top:0; }
.report-btn{ all:unset; cursor:pointer; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:3px; color:var(--text-dim); font-size:14px; opacity:.55; }
.thread-post:hover .report-btn, .report-btn:focus-visible{ opacity:1; }
.report-btn:hover{ color:var(--danger); background:var(--danger-soft); }
.report-btn:focus-visible{ outline:2px solid var(--accent); }
.report-btn.reported{ color:var(--danger); opacity:1; cursor:default; }
@media (max-width:640px){
  .thread-post{ flex-wrap:wrap; }
  .thread-post .post-actions{ width:100%; justify-content:flex-end; }
  .report-btn{ opacity:1; }
}

.dialog-fields{ padding:4px 14px 0; display:flex; flex-direction:column; gap:8px; }
.dialog-fields textarea{ width:100%; font-size:12.5px; }
.report-reasons{ display:flex; flex-direction:column; gap:4px; }
.report-reasons label{ display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:var(--text); cursor:pointer; }
.dialog-error{ color:var(--danger); font-size:12px; }

.report-row{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:3px; padding:10px 12px; margin-bottom:8px; }
.report-row.closed{ border-left-color:var(--border); opacity:.8; }
.report-main{ flex:1; min-width:0; }
.report-head{ font-size:12.5px; margin-bottom:6px; }
.report-quote{ font-size:12.5px; color:var(--text-bright); background:var(--panel-3); border-left:2px solid var(--border); padding:6px 10px; margin-bottom:6px; white-space:pre-wrap; word-break:break-word; }
.report-details{ font-size:12px; color:var(--text); font-style:italic; margin-bottom:6px; }
.report-actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
@media (max-width:640px){ .report-row{ flex-wrap:wrap; } .report-actions{ flex-direction:row; flex-wrap:wrap; width:100%; } }

/* ---------- Wizard Coins (wc() in app.js, #wc-coin in index.html) ---------- */
.wc{ display:inline-flex; align-items:center; gap:.18em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wc-icon{ width:1.1em; height:1.1em; flex-shrink:0; vertical-align:-.18em; filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.daily-notice{ color:var(--gold); font-style:italic; }

/* Wizard names that open the preview window (wizardLink in app.js) */
.wizard-link{ color:var(--gold); cursor:pointer; text-decoration:none; border-bottom:1px dotted currentColor; }
.wizard-link:hover{ text-decoration:none; border-bottom-style:solid; }
.wizard-link:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* Result banner above a finished fight's log */
.fight-result{ font-family:'Cinzel',serif; font-weight:700; padding:8px 12px; border-radius:3px; margin-bottom:8px; border:1px solid var(--border); background:var(--panel-2); }
.fight-result.victory{ color:var(--life); border-color:var(--life); }
.fight-result.defeat{ color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }
.fight-result.fled{ color:var(--text-dim); }

/* Stat names with a description on hover / focus / tap (towerStats in app.js) */
.stat-tip{ position:relative; cursor:help; text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:var(--text-dim); outline:none; }
.stat-tip:hover, .stat-tip:focus{ color:var(--text-bright); text-decoration-color:var(--gold); }
.stat-tip::after{
  content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 8px); z-index:40;
  width:max-content; max-width:240px; white-space:normal; text-align:left;
  background:var(--panel-3); color:var(--text-bright); border:1px solid var(--accent-2); border-radius:3px;
  padding:7px 10px; font-size:12px; font-weight:400; line-height:1.45; letter-spacing:normal; text-transform:none;
  box-shadow:0 6px 20px rgba(0,0,0,.5); pointer-events:none;
  opacity:0; transform:translateY(3px); transition:opacity .12s, transform .12s; visibility:hidden;
}
.stat-tip:hover::after, .stat-tip:focus::after{ opacity:1; transform:none; visibility:visible; }
.stat-tip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .stat-tip::after{ transition:none; } }

/* Spend-points box on the Tower (renderStatAlloc in app.js) */
.alloc-box{ margin-top:12px; background:var(--panel-2); border:1px solid var(--gold); border-radius:3px; padding:10px 12px; max-width:560px; }
.alloc-head{ margin-bottom:8px; color:var(--text-bright); }
.alloc-head b{ color:var(--gold); font-size:15px; }
.alloc-row{ display:grid; grid-template-columns:100px 1fr auto 70px; align-items:center; gap:8px; padding:4px 0; border-top:1px solid var(--border); }
.alloc-row:first-of-type{ border-top:none; }
.alloc-ctrl{ display:flex; align-items:center; gap:8px; }
.alloc-ctrl b{ min-width:18px; text-align:center; color:var(--text-bright); }
.alloc-preview{ color:var(--life); font-size:12px; }
.alloc-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
@media (max-width:640px){ .alloc-row{ grid-template-columns:1fr auto; } .alloc-row .meta{ grid-column:1; } .alloc-preview{ grid-column:2; text-align:right; } }

/* Tome of the White Pages */
.tome-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:12px; background:var(--panel-2); border:1px solid var(--border); border-radius:3px; padding:10px 12px; }
.tome-controls label{ display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--text); }
.presence{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.presence.on{ background:var(--life); box-shadow:0 0 6px var(--life); }
.presence.off{ background:var(--border); }

/* Tower sub-tabs (Overview | Quests) and quest cards */
.tower-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.tower-tabs button{ all:unset; cursor:pointer; padding:8px 14px; font-size:13px; color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tower-tabs button:hover{ color:var(--text-bright); }
.tower-tabs button[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.tower-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.quest-card{ display:flex; gap:12px; align-items:center; justify-content:space-between; background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:3px; padding:10px 12px; margin-bottom:8px; }
.quest-card.completed{ border-left-color:var(--gold); background:linear-gradient(90deg, var(--gold-soft), var(--panel-2) 60%); }
.quest-card.claimed{ opacity:.6; border-left-color:var(--border); }
.quest-main{ flex:1; min-width:0; }
.quest-title{ font-family:'Cinzel',serif; font-weight:700; color:var(--text-bright); }
.quest-desc{ font-size:12.5px; }
.quest-desc p{ margin:4px 0; }
.quest-progress{ display:flex; align-items:center; gap:10px; margin:6px 0 4px; }
.quest-progress .bar-track{ flex:1; max-width:220px; }
a.game-link{ color:var(--gold); border-bottom:1px dotted currentColor; text-decoration:none; }
a.game-link:hover{ border-bottom-style:solid; }
@media (max-width:640px){ .quest-card{ flex-wrap:wrap; } .quest-card .btn{ width:100%; } }