/* ══════════════════════════════════════════════════════════════════
   PUBLISH FIFTEEN — shared stylesheet
   An Ultima Online Renaissance-era shard site. Gumps, parchment,
   gold gauntlet cursors, stone scrollbars, torchlight.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --night:#0b0806;
  --stone:#191410;
  --stone-lite:#241d15;
  --parch:#e6d3a0;
  --parch-mid:#d8c087;
  --parch-dark:#c4a86b;
  --ink:#2b1c0d;
  --ink-soft:#4a3520;
  --gold:#d4af37;
  --gold-bright:#f2d873;
  --gold-dim:#8a6d24;
  --blood:#9c1f14;
  --blood-bright:#d24a34;
  --tram:#6f9fd8;
  --moon:#7fb2ff;
  --magic:#4d8fe0;
  --rare:#e0a93c;
  --frame:#5a4626;
  --frame-dark:#332512;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* ── Cursors ─────────────────────────────────────────────────────── */
html{
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cpath%20d='M3%201%20L3%2022%20L8.5%2016.5%20L12%2025%20L16.5%2023%20L13%2015%20L21%2015%20Z'%20fill='%23d9a930'%20stroke='%23271805'%20stroke-width='2'%20stroke-linejoin='miter'/%3E%3Cpath%20d='M6%206%20L9.5%209.5%20M6%2010.5%20L9.5%2014'%20stroke='%23271805'%20stroke-width='1.3'/%3E%3Cpath%20d='M4.3%203%20L4.3%2018'%20stroke='%23f6de8d'%20stroke-width='1.1'/%3E%3C/svg%3E") 3 1, auto;
}
a, button, .btn, summary, label, select,
.thread-row, .board-row, .listing-card .bid-btn{
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Ccircle%20cx='14'%20cy='14'%20r='9'%20fill='none'%20stroke='%23241503'%20stroke-width='6'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='9'%20fill='none'%20stroke='%23ffd75e'%20stroke-width='2.5'/%3E%3Cpath%20d='M14%201%20V7%20M14%2021%20V27%20M1%2014%20H7%20M21%2014%20H27'%20stroke='%23241503'%20stroke-width='4'/%3E%3Cpath%20d='M14%202%20V7%20M14%2021%20V26%20M2%2014%20H7%20M21%2014%20H26'%20stroke='%23ffd75e'%20stroke-width='1.6'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.7'%20fill='%23ffd75e'/%3E%3C/svg%3E") 14 14, pointer;
}
input[type=text], textarea{ cursor:text; }

/* ── Scrollbars (stone track, bronze gump thumb) ─────────────────── */
html{ scrollbar-color:#7c6231 #14100b; }
::-webkit-scrollbar{ width:15px; height:15px; }
::-webkit-scrollbar-track{
  background:linear-gradient(90deg,#0d0a07,#1b1510 30%,#1b1510 70%,#0d0a07);
  border-left:1px solid #000; box-shadow:inset 0 0 6px #000;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#5f4a22,#a3823f 45%,#c9a44e 50%,#a3823f 55%,#5f4a22);
  border:2px solid #241a0c; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,230,160,.55), inset 0 -2px 3px rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#6d5628,#bd984a 45%,#e6c163 50%,#bd984a 55%,#6d5628);
}
::-webkit-scrollbar-corner{ background:#14100b; }

::selection{ background:var(--gold); color:#1c1206; }

/* ── Body / backdrop ─────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(112,78,28,.28), transparent 70%),
    radial-gradient(900px 700px at 100% 100%, rgba(20,14,40,.35), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    var(--night);
  color:var(--parch);
  font-family:"Alegreya", Georgia, "Times New Roman", serif;
  font-size:17px; line-height:1.55;
  min-height:100vh;
}
body::after{ /* vignette */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:5;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.75);
}

h1,h2,h3,h4{ font-family:"Cinzel", Georgia, serif; color:var(--gold); font-weight:700; }
h2{ font-size:1.7rem; letter-spacing:.06em; margin-bottom:.6rem;
    text-shadow:0 2px 0 #000, 0 0 22px rgba(212,175,55,.25); }
h3{ font-size:1.15rem; letter-spacing:.05em; margin-bottom:.4rem; }
a{ color:var(--gold-bright); text-decoration:none; }
a:hover{ color:#fff2c4; text-shadow:0 0 10px rgba(242,216,115,.7); }
em.fell, .fell{ font-family:"IM Fell English", Georgia, serif; }

.wrap{ max-width:1160px; margin:0 auto; padding:0 26px; position:relative; z-index:6; }

/* ── Header ──────────────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:
    linear-gradient(180deg,#2a2013 0%, #1c150c 60%, #120d07 100%);
  border-bottom:3px solid var(--frame-dark);
  box-shadow:0 2px 0 rgba(212,175,55,.28), 0 10px 28px rgba(0,0,0,.85);
}
.head-inner{
  max-width:1160px; margin:0 auto; padding:10px 26px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .ankh{
  font-size:30px; color:var(--gold-bright); line-height:1;
  text-shadow:0 0 14px rgba(242,216,115,.8), 0 2px 0 #000;
  animation:ankhGlow 3.2s ease-in-out infinite;
}
@keyframes ankhGlow{ 0%,100%{ text-shadow:0 0 8px rgba(242,216,115,.5),0 2px 0 #000; }
  50%{ text-shadow:0 0 20px rgba(242,216,115,.95),0 2px 0 #000; } }
.brand-text b{
  display:block; font-family:"Cinzel",serif; font-weight:900; font-size:1.28rem;
  letter-spacing:.14em; color:var(--gold-bright);
  text-shadow:0 1px 0 #000, 0 0 16px rgba(212,175,55,.4);
}
.brand-text i{
  display:block; font-family:"IM Fell English",serif; font-size:.8rem;
  color:var(--parch-dark); letter-spacing:.06em;
}
.site-nav{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.site-nav a{
  font-family:"Cinzel",serif; font-size:.82rem; letter-spacing:.1em;
  padding:7px 14px 6px; color:var(--parch-mid);
  border:1px solid transparent; border-radius:2px;
}
.site-nav a:hover{ color:var(--gold-bright); border-color:var(--gold-dim);
  background:rgba(212,175,55,.07); text-shadow:none; }
.site-nav a.active{
  color:#1c1206; background:linear-gradient(180deg,#e8c766,#b98f2e);
  border:1px solid #f4e09a; box-shadow:0 0 12px rgba(212,175,55,.45), inset 0 -2px 4px rgba(0,0,0,.35);
  text-shadow:none;
}

/* ── Gump panels ─────────────────────────────────────────────────── */
.gump{
  position:relative;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,244,205,.55), transparent 60%),
    radial-gradient(90% 120% at 90% 100%, rgba(120,85,35,.35), transparent 55%),
    linear-gradient(160deg, var(--parch) 0%, var(--parch-mid) 55%, var(--parch-dark) 100%);
  color:var(--ink);
  border:3px solid var(--frame);
  outline:1px solid #1a1207;
  box-shadow:
    inset 0 0 0 1px rgba(255,240,190,.6),
    inset 0 0 46px rgba(101,72,32,.35),
    0 12px 30px rgba(0,0,0,.7);
  border-radius:3px;
  padding:26px 30px;
}
.gump h2,.gump h3{ color:var(--ink); text-shadow:0 1px 0 rgba(255,240,200,.7); }
.gump h2{ border-bottom:2px solid rgba(74,53,32,.4); padding-bottom:.35rem; }
.gump a{ color:#6e3f10; text-decoration:underline; text-decoration-color:rgba(110,63,16,.4); }
.gump a:hover{ color:#9c5a14; text-shadow:none; }
/* gold corner studs */
.gump::before,.gump::after{
  content:""; position:absolute; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #c69a33 55%, #6b4d16);
  box-shadow:0 1px 2px rgba(0,0,0,.7), inset 0 0 2px rgba(0,0,0,.4);
}
.gump::before{ top:6px; left:6px; box-shadow:0 1px 2px rgba(0,0,0,.7),
  calc(100% + 6px) 0 0 -0.5px transparent; }
.gump::after{ bottom:6px; right:6px; }
.gump .stud-tr,.gump .stud-bl{
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #c69a33 55%, #6b4d16);
  box-shadow:0 1px 2px rgba(0,0,0,.7), inset 0 0 2px rgba(0,0,0,.4);
}
.gump .stud-tr{ top:6px; right:6px; } .gump .stud-bl{ bottom:6px; left:6px; }

/* dark stone gump */
.gump-dark{
  position:relative; color:var(--parch);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,220,140,.06), transparent 55%),
    linear-gradient(165deg, #262019 0%, #17120c 70%, #100c07 100%);
  border:3px solid var(--frame-dark);
  outline:1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.22), inset 0 0 60px rgba(0,0,0,.55),
    0 12px 30px rgba(0,0,0,.75);
  border-radius:3px; padding:26px 30px;
}
.gump-dark h2,.gump-dark h3{ color:var(--gold); }

/* parchment scroll with torn edges */
.scroll-edge{
  --tear: polygon(0 8px, 3% 2px, 7% 9px, 12% 3px, 18% 8px, 24% 2px, 30% 7px, 37% 3px,
    44% 9px, 51% 2px, 58% 8px, 65% 3px, 72% 9px, 79% 2px, 86% 8px, 93% 3px, 100% 8px,
    100% calc(100% - 8px), 96% calc(100% - 2px), 90% calc(100% - 9px), 83% calc(100% - 3px),
    76% calc(100% - 8px), 68% calc(100% - 2px), 60% calc(100% - 8px), 52% calc(100% - 3px),
    44% calc(100% - 9px), 36% calc(100% - 2px), 28% calc(100% - 8px), 20% calc(100% - 3px),
    13% calc(100% - 9px), 6% calc(100% - 2px), 0 calc(100% - 8px));
  clip-path:var(--tear);
  border:none; outline:none; box-shadow:inset 0 0 60px rgba(101,72,32,.45);
}
.scroll-edge::before,.scroll-edge::after{ display:none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block; font-family:"Cinzel",serif; font-weight:700;
  font-size:.9rem; letter-spacing:.08em; color:#241703;
  padding:10px 22px 9px; border-radius:3px;
  background:linear-gradient(180deg,#f0d47a 0%, #cda644 45%, #a67f28 100%);
  border:2px solid #6b4d16; outline:1px solid #1c1206;
  box-shadow:inset 0 1px 0 rgba(255,244,200,.85), inset 0 -3px 5px rgba(80,50,10,.5),
    0 3px 8px rgba(0,0,0,.6);
  text-shadow:0 1px 0 rgba(255,240,190,.6);
  user-select:none;
}
.btn:hover{
  background:linear-gradient(180deg,#ffe694 0%, #ddb654 45%, #b58c2e 100%);
  color:#241703; box-shadow:inset 0 1px 0 rgba(255,244,200,.9), inset 0 -3px 5px rgba(80,50,10,.5),
    0 3px 14px rgba(212,175,55,.5); text-shadow:0 1px 0 rgba(255,240,190,.6);
}
.btn:active{ transform:translateY(2px);
  box-shadow:inset 0 2px 6px rgba(60,38,6,.6), 0 1px 3px rgba(0,0,0,.5); }
.btn-small{ font-size:.74rem; padding:6px 13px 5px; }
.btn-dark{
  background:linear-gradient(180deg,#4a3b22 0%, #33270f 55%, #211806 100%);
  color:var(--gold-bright); border-color:#191108;
  box-shadow:inset 0 1px 0 rgba(212,175,55,.35), inset 0 -3px 5px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.6);
  text-shadow:0 1px 2px #000;
}
.btn-dark:hover{ color:#ffedb0; background:linear-gradient(180deg,#59482a 0%, #3d2f14 55%, #291e08 100%); }
.btn-blood{
  background:linear-gradient(180deg,#c2503c 0%, #8e2417 50%, #64150c 100%);
  color:#ffe4d6; border-color:#3a0c05;
  box-shadow:inset 0 1px 0 rgba(255,200,180,.4), inset 0 -3px 5px rgba(40,5,0,.6), 0 3px 8px rgba(0,0,0,.6);
  text-shadow:0 1px 2px #300;
}

/* ── Forms ───────────────────────────────────────────────────────── */
input[type=text], input[type=number], textarea, select{
  font-family:"Alegreya",Georgia,serif; font-size:1rem; color:var(--ink);
  background:linear-gradient(180deg,#f0e2b6,#ddc890);
  border:2px solid var(--frame); border-radius:2px; padding:8px 10px;
  box-shadow:inset 0 2px 5px rgba(80,55,20,.4);
  width:100%;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--gold); outline-offset:0;
}
label{ font-family:"Cinzel",serif; font-size:.78rem; letter-spacing:.08em; }

/* ── Tables ──────────────────────────────────────────────────────── */
table.era{ width:100%; border-collapse:collapse; font-size:.95rem; }
table.era th{
  font-family:"Cinzel",serif; font-size:.75rem; letter-spacing:.1em; text-align:left;
  color:var(--gold); background:rgba(0,0,0,.45); padding:8px 12px;
  border:1px solid var(--frame-dark);
}
table.era td{ padding:7px 12px; border:1px solid rgba(90,70,38,.45);
  background:rgba(0,0,0,.18); color:var(--parch); }
table.era tr:hover td{ background:rgba(212,175,55,.07); }
.gump table.era th{ color:var(--parch); background:rgba(43,28,13,.85); border-color:var(--frame); }
.gump table.era td{ color:var(--ink); background:rgba(255,244,205,.25); border-color:rgba(90,70,38,.4); }

/* ── System messages (UO lower-left system text) ─────────────────── */
#sysmsgs{
  position:fixed; left:18px; bottom:16px; z-index:200;
  display:flex; flex-direction:column-reverse; gap:4px; pointer-events:none;
}
.sysmsg{
  font-family:"IM Fell English",Georgia,serif; font-size:1.02rem;
  color:#ffdf6b; text-shadow:1px 1px 0 #000, 0 0 8px rgba(0,0,0,.9);
  animation:sysfade 5s forwards;
}
.sysmsg.bad{ color:#ff6a52; }
.sysmsg.good{ color:#7de07d; }
@keyframes sysfade{ 0%{opacity:0; transform:translateY(6px);} 6%{opacity:1; transform:none;}
  80%{opacity:1;} 100%{opacity:0;} }

/* ── Modal gump ──────────────────────────────────────────────────── */
.modal-veil{
  position:fixed; inset:0; z-index:150; background:rgba(4,2,0,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(1.5px);
}
.modal-veil[hidden]{ display:none; }
.modal-gump{ max-width:520px; width:100%; animation:gumpin .18s ease-out; }
@keyframes gumpin{ from{ transform:scale(.92); opacity:0; } to{ transform:none; opacity:1; } }

/* ── Torches ─────────────────────────────────────────────────────── */
.torch{ position:relative; width:26px; height:130px; }
.torch .pole{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:10px; height:86px; border-radius:3px;
  background:linear-gradient(90deg,#241505,#5b3d17 45%,#7a5522 55%,#241505);
  box-shadow:0 0 6px #000;
}
.torch .flame{
  position:absolute; left:50%; bottom:76px; transform:translateX(-50%);
  width:30px; height:46px; border-radius:50% 50% 46% 46% / 68% 68% 34% 34%;
  background:radial-gradient(circle at 50% 78%, #fff6c0 0 18%, #ffce4d 34%, #f2871d 58%, #b23c08 78%, transparent 82%);
  filter:blur(.6px);
  animation:flick .32s infinite alternate ease-in-out;
  box-shadow:0 0 34px 10px rgba(255,150,40,.42), 0 0 80px 28px rgba(255,120,20,.16);
}
.torch .flame::after{
  content:""; position:absolute; inset:22% 30% 12%; border-radius:inherit;
  background:radial-gradient(circle at 50% 80%, #fffbe2 0 30%, rgba(255,220,120,.85) 60%, transparent 78%);
}
@keyframes flick{
  0%{ transform:translateX(-50%) scale(1) skewX(-2deg); }
  40%{ transform:translateX(-52%) scale(1.06,.95) skewX(3deg); }
  100%{ transform:translateX(-48%) scale(.94,1.08) skewX(-3deg); }
}

/* ── Moongate ────────────────────────────────────────────────────── */
.moongate{
  position:relative; width:150px; height:210px; margin:0 auto;
  border-radius:50% 50% 48% 48% / 55% 55% 45% 45%;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(220,240,255,.9) 0 8%, rgba(110,170,255,.85) 30%, rgba(40,80,200,.75) 60%, rgba(10,20,80,.9) 85%);
  box-shadow:0 0 40px 12px rgba(90,140,255,.45), 0 0 120px 30px rgba(60,100,255,.18),
    inset 0 0 40px rgba(255,255,255,.35);
  overflow:hidden;
  animation:gatepulse 4s ease-in-out infinite;
}
.moongate::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 20%, rgba(190,220,255,.5) 26%, transparent 34%,
    transparent 55%, rgba(140,190,255,.4) 62%, transparent 70%);
  animation:gatespin 5.5s linear infinite;
}
.moongate::after{
  content:""; position:absolute; inset:8% 14%;
  border-radius:inherit;
  background:radial-gradient(50% 60% at 50% 50%, rgba(255,255,255,.5), transparent 70%);
  mix-blend-mode:screen;
}
@keyframes gatespin{ to{ transform:rotate(1turn); } }
@keyframes gatepulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.22); } }

/* ── Vitals bars (UO status-bar homage) ──────────────────────────── */
.vitals{ display:flex; flex-direction:column; gap:8px; }
.vital{ display:grid; grid-template-columns:110px 1fr 70px; gap:10px; align-items:center; }
.vital .lbl{ font-family:"Cinzel",serif; font-size:.72rem; letter-spacing:.1em; color:var(--parch-mid); }
.vital .bar{
  height:14px; border:2px solid #120c05; border-radius:2px;
  background:#241b10; box-shadow:inset 0 2px 4px #000; overflow:hidden;
}
.vital .fill{ height:100%; box-shadow:inset 0 2px 0 rgba(255,255,255,.35); }
.vital .fill.hp{ background:linear-gradient(180deg,#4fd06a,#1d8a35); }
.vital .fill.mana{ background:linear-gradient(180deg,#5f8fe8,#2450b0); }
.vital .fill.stam{ background:linear-gradient(180deg,#e8b25f,#b07424); }
.vital .num{ font-size:.85rem; color:var(--parch-mid); text-align:right; font-variant-numeric:tabular-nums; }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-foot{
  margin-top:70px; padding:34px 0 46px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));
  border-top:2px solid var(--frame-dark);
  box-shadow:0 -1px 0 rgba(212,175,55,.2);
  text-align:center; font-size:.86rem; color:#8a7a58;
}
.site-foot .fell{ font-size:1.05rem; color:var(--parch-dark); }

/* ── Real UO art ─────────────────────────────────────────────────── */
.uoart{ image-rendering:pixelated; }
.spellicon{
  width:36px; height:36px; image-rendering:pixelated; vertical-align:middle;
  border:1px solid #120c05; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.6);
  margin-right:8px;
}
.uoframe{
  display:block; width:100%; height:auto; border:3px solid var(--frame-dark);
  outline:1px solid #000; border-radius:3px; box-shadow:0 8px 22px rgba(0,0,0,.7);
}

/* ── Utility ─────────────────────────────────────────────────────── */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.mt1{ margin-top:14px; } .mt2{ margin-top:28px; } .mt3{ margin-top:48px; }
.center{ text-align:center; }
.gold{ color:var(--gold); } .blood{ color:var(--blood-bright); }
.small{ font-size:.85rem; }
.divider{
  height:22px; margin:34px auto; max-width:520px;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent) 50% 50%/100% 1px no-repeat;
  opacity:.85;
}
.pill{
  display:inline-block; font-family:"Cinzel",serif; font-size:.68rem; letter-spacing:.1em;
  padding:3px 10px 2px; border:1px solid var(--gold-dim); border-radius:20px;
  color:var(--gold); background:rgba(212,175,55,.08); white-space:nowrap;
}
.pill.red{ color:var(--blood-bright); border-color:#6b2016; background:rgba(156,31,20,.12); }
.pill.blue{ color:var(--tram); border-color:#2c4a74; background:rgba(111,159,216,.1); }

@media (max-width:900px){
  .grid2,.grid3{ grid-template-columns:1fr; }
  .head-inner{ justify-content:center; }
  .site-nav{ margin-left:0; justify-content:center; }
}