/* Aldenmoor — fantasy MMO interface skin
   Serif display faces over parchment panels, gold leaf accents,
   dark leather action bar. No webfonts: portable system stacks only. */

:root{
  --ink:#2c2418;
  --parchA:#f3e6c8; --parchB:#e8d5ac; --parchC:#dcc79a;
  --gold:#c9a441; --goldBright:#ecc76b; --goldDark:#8a6d24;
  --leather:#221a12; --leatherHi:#3a2d1e;
  --blood:#9c2f2f; --hpA:#3fa06a; --hpB:#2c7a4f;
  --stam:#4d90c9; --xp:#c98a2e;
  --textOnDark:#efe4c8;
  --shadowDk: rgba(10,6,2,.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:#0d0b14;}
body{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
     color:var(--textOnDark); -webkit-font-smoothing:antialiased;}
canvas#scene{position:fixed; inset:0; width:100%; height:100%; display:block; cursor:crosshair;}
#ui{position:fixed; inset:0; pointer-events:none; z-index:5;}
#ui > *{pointer-events:none;}

.dim{opacity:.65;}
.serif-sc{font-variant-caps:small-caps; letter-spacing:.08em;}

.ico{width:15px;height:15px;vertical-align:-2px;}

/* ---------- generic window chrome ---------- */
.window{
  position:absolute; pointer-events:auto; min-width:330px; max-width:min(720px,92vw);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--parchB), var(--parchA) 55%, var(--parchC));
  color:var(--ink);
  border:1px solid #6d5a33;
  border-radius:8px;
  box-shadow:0 18px 50px var(--shadowDk), inset 0 0 0 2px rgba(201,164,65,.5), inset 0 0 60px rgba(120,90,40,.25);
}
.window::before{content:""; position:absolute; inset:5px; border:1px solid rgba(109,90,51,.45); border-radius:5px; pointer-events:none;}
.winHead{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:move; user-select:none;
  background:linear-gradient(#3b2f1c,#291f11);
  color:var(--goldBright); font-variant-caps:small-caps; letter-spacing:.12em; font-size:16px;
  border-radius:7px 7px 0 0;
  box-shadow:inset 0 -1px 0 rgba(236,199,107,.35);
}
.winHead .spacer{flex:1;}
.winClose{pointer-events:auto; cursor:pointer; border:none; background:transparent; color:var(--gold);
  font-size:20px; line-height:1; padding:2px 6px; border-radius:4px; font-family:inherit;}
.winClose:hover{background:rgba(201,164,65,.2); color:#fff;}
.winBody{padding:14px 16px 16px; max-height:min(70vh,560px); overflow:auto;}
.winBody h3{font-size:15px; margin:10px 0 6px; font-variant-caps:small-caps; letter-spacing:.06em;}
.winBody p{margin:6px 0; line-height:1.45;}
.hr{height:1px; background:linear-gradient(90deg,transparent,rgba(109,90,51,.55),transparent); margin:10px 0;}
.btn{
  pointer-events:auto; cursor:pointer; font-family:inherit; font-size:13.5px;
  padding:6px 14px; border-radius:6px; border:1px solid var(--goldDark);
  background:linear-gradient(#4a3a22,#332716); background-color:#3d3020; color:var(--goldBright);
  box-shadow:inset 0 1px 0 rgba(255,230,170,.25), 0 2px 4px rgba(0,0,0,.4);
  font-variant-caps:small-caps; letter-spacing:.06em;
}
.btn:hover{background:#57452a; color:#fff;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:linear-gradient(#7c5f23,#5c4619); border-color:#a8842f; color:#ffe9ad;}
.btn.danger{background:linear-gradient(#6d2626,#54201e); border-color:#8f3b34; color:#ffd9cf;}
.btn:disabled{opacity:.45; cursor:default;}
.btnRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}

/* ---------- top right ---------- */
#topRight{position:absolute; top:10px; right:12px; text-align:right;}
#clockReadout{font-size:14px; letter-spacing:.05em; text-shadow:0 1px 3px #000; opacity:.95;}
#goldReadout{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:15px;
  padding:3px 10px; background:rgba(15,10,5,.62); border:1px solid rgba(201,164,65,.5); border-radius:14px;}
#shardTag{margin-top:5px; font-size:10.5px; opacity:.75; letter-spacing:.04em;}
#shardTag em{font-style:normal; color:var(--gold);}

/* ---------- compass ---------- */
#compass{position:absolute; top:8px; left:50%; transform:translateX(-50%);}
#compassCanvas{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}

/* ---------- rail ---------- */
#rail{position:absolute; right:10px; top:96px; display:flex; flex-direction:column; gap:7px; pointer-events:auto;}
.railBtn{
  width:40px;height:40px; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(#39301f,#241c10); border:1px solid rgba(201,164,65,.55); border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,230,170,.2), 0 3px 8px rgba(0,0,0,.45);
}
.railBtn:hover{background:#4a3c25;}
.railBtn svg{width:22px;height:22px; fill:var(--goldBright);}
.railBtn .keycap{position:absolute; margin-left:30px; margin-top:28px;}
.keycap{font-size:10px; background:#14100a; border:1px solid #6d5a33; color:var(--goldBright);
  border-radius:3px; padding:0 3px; letter-spacing:.02em;}

/* ---------- tracker ---------- */
#tracker{position:absolute; right:64px; top:96px; width:250px; pointer-events:auto;
  background:rgba(14,10,6,.55); border:1px solid rgba(201,164,65,.35); border-radius:8px; padding:8px 10px;}
#tracker h4{font-size:12.5px; font-variant-caps:small-caps; letter-spacing:.14em; color:var(--goldBright);
  border-bottom:1px solid rgba(201,164,65,.3); padding-bottom:4px; margin-bottom:6px;}
.qEntry{margin-bottom:8px;}
.qTitle{font-size:13.5px; color:#ffe9ad;}
.qObj{font-size:12.5px; margin-left:10px; opacity:.85;}
.qObj.done{color:#8fd694; text-decoration:line-through; opacity:.9;}
.qMeta{font-size:11px; opacity:.6; margin-left:10px;}

/* ---------- chat ---------- */
#chatPanel{position:absolute; left:12px; bottom:118px; width:340px; pointer-events:auto;
  background:rgba(12,9,5,.58); border:1px solid rgba(201,164,65,.3); border-radius:8px; overflow:hidden;}
#chatPanel header{font-size:11px; padding:3px 10px; letter-spacing:.08em; font-variant-caps:small-caps;
  color:var(--goldBright); background:rgba(0,0,0,.35);}
#chatBody{height:108px; overflow-y:auto; padding:5px 10px; font-size:12.5px; line-height:1.5; scrollbar-width:thin;}
.chatLine b{color:#ffb1e0;} .chatLine.sys{color:#8fd6ff;} .chatLine.self{color:#ffe9ad;}
.chatLine .who{color:#e7c15c;} .chatLine .you{color:#93e08f;}
.chatLine.emoteLine i{color:#c9a0dc;}

/* ---------- bottom left unit frame ---------- */
#bottomLeft{position:absolute; left:12px; bottom:12px;}
#unitFrame{display:flex; gap:9px; align-items:flex-end;}
#portrait{position:relative; width:66px;height:66px; border-radius:9px; border:2px solid var(--goldDark);
  background:#171018; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.5);}
.lvlGem{position:absolute; right:-2px; bottom:-2px; min-width:19px; height:19px; text-align:center; line-height:19px;
  background:radial-gradient(circle at 30% 25%, #f4d77e, #a0761f); color:#2c2005; font-weight:bold; font-size:11.5px;
  border-radius:6px; border:1px solid #5e4413;}
.ufBars{width:212px;}
.bar{position:relative; height:15px; margin-top:4px; border-radius:8px; border:1px solid #00000088;
  background:rgba(10,8,4,.72); overflow:hidden; box-shadow:inset 0 1px 3px #000;}
.bar i{position:absolute; inset:0; width:100%; transform-origin:left; transition:transform .18s ease-out;}
.bar.hp i{background:linear-gradient(var(--hpA),var(--hpB));}
.bar.st{height:9px;} .bar.st i{background:linear-gradient(#66a4dd,#3b78ae);}
.bar.xp{height:9px;} .bar.xp i{background:linear-gradient(#dca146,#a76a1f);}
.bar b{position:absolute; inset:0; text-align:center; font-size:11px; line-height:15px; color:#fff;
  text-shadow:0 1px 2px #000; font-weight:normal;}
.bar.xp b{line-height:9px; font-size:9px;}
#ufName{font-size:12px; margin-top:4px; letter-spacing:.06em; font-variant-caps:small-caps; text-shadow:0 1px 2px #000;}
#ufName span{color:#93c4e8;}

/* ---------- ability bar ---------- */
#abilityBar{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:7px; padding:8px 10px; pointer-events:auto;
  background:linear-gradient(#2b211599,#150f09cc); border:1px solid rgba(201,164,65,.4);
  border-radius:12px; backdrop-filter:blur(2px);}
.slot{position:relative; width:52px;height:52px; border-radius:9px; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #4c3d26, #241a0e 80%);
  border:1px solid rgba(201,164,65,.55); box-shadow:inset 0 1px 0 rgba(255,230,170,.18), 0 3px 8px rgba(0,0,0,.4);}
.slot svg{position:absolute; inset:6px; width:auto; height:auto;}
.slot .cdSweep{position:absolute; inset:0; border-radius:9px; background:conic-gradient(rgba(0,0,0,.68) var(--cd,0deg), transparent 0deg); pointer-events:none;}
.slot .slotKey{position:absolute; top:1px; left:4px; z-index:2;}
.slot .stack{position:absolute; right:3px; bottom:1px; font-size:11px; color:#fff; text-shadow:0 1px 2px #000;}
.slot.flash{animation:slotFlash .45s ease-out;}
@keyframes slotFlash{0%{box-shadow:0 0 14px 4px rgba(255,220,130,.85);} 100%{box-shadow:0 3px 8px rgba(0,0,0,.4);}}
.slot.usableHint{outline:1px solid rgba(255,225,140,.55); outline-offset:1px;}
#mountBadge{position:absolute; left:calc(50% + 240px); bottom:22px; font-size:12px; color:#bcd7ea; opacity:.9; text-shadow:0 1px 3px #000;}

/* ---------- context prompt / zone banner ---------- */
#contextPrompt{position:absolute; left:50%; bottom:110px; transform:translateX(-50%);
  background:rgba(12,9,5,.78); border:1px solid rgba(201,164,65,.5); color:#ffe9ad;
  padding:5px 14px; border-radius:16px; font-size:13.5px; letter-spacing:.03em; pointer-events:auto; cursor:pointer;}
#zoneBanner{position:absolute; left:50%; top:16%; transform:translateX(-50%); text-align:center; pointer-events:none;}
#zoneBanner .zbBig{font-size:30px; letter-spacing:.22em; font-variant-caps:small-caps; color:#f6e3a8;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 26px rgba(231,193,92,.35);}
#zoneBanner .zbSub{font-size:12.5px; letter-spacing:.34em; opacity:.8; color:#cdb97e; margin-top:2px;}
#zoneBanner.show{animation:zoneIn 3.4s ease forwards;}
@keyframes zoneIn{0%{opacity:0; transform:translateX(-50%) scale(.94);} 12%{opacity:1; transform:translateX(-50%) scale(1);} 78%{opacity:1;} 100%{opacity:0;}}

/* ---------- toasts ---------- */
#lootStack{position:absolute; right:280px; top:38%; display:flex; flex-direction:column-reverse; gap:6px; pointer-events:none;}
.lootToast{
  display:flex; align-items:center; gap:9px; min-width:210px; padding:6px 12px;
  background:linear-gradient(rgba(43,32,17,.94),rgba(24,17,9,.94)); border:1px solid var(--gold);
  border-radius:8px; font-size:13px; animation:toastIn 5.2s ease forwards; box-shadow:0 6px 18px rgba(0,0,0,.5);}
.lootToast .qty{color:#fff;}
.lootToast.rare{border-color:#a46ce0; box-shadow:0 0 14px rgba(164,108,224,.4);}
.lootToast.gold{border-color:var(--gold);}
@keyframes toastIn{0%{opacity:0; transform:translateX(26px);} 7%{opacity:1; transform:none;} 84%{opacity:1;} 100%{opacity:0; transform:translateY(-8px);}}
.bannerMsg{
  position:absolute; left:50%; top:24%; transform:translateX(-50%); text-align:center; pointer-events:none;
  font-size:24px; font-variant-caps:small-caps; letter-spacing:.18em; color:#ffe9ad;
  text-shadow:0 2px 16px #000, 0 0 30px rgba(236,199,107,.45); animation:bannerPop 2.6s ease forwards; white-space:nowrap;}
.bannerMsg small{display:block; font-size:12.5px; letter-spacing:.3em; color:#cdb97e; margin-top:4px;}
@keyframes bannerPop{0%{opacity:0; transform:translateX(-50%) translateY(14px) scale(.92);} 14%{opacity:1; transform:translateX(-50%) none;} 82%{opacity:1;} 100%{opacity:0;}}

/* floating combat text */
.combatFloat{position:absolute; font-size:17px; font-weight:bold; pointer-events:none;
  text-shadow:0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); will-change:transform,opacity; white-space:nowrap;}
.combatFloat.crit{font-size:23px; color:#ffdf66 !important;}
.combatFloat.heal{color:#8fe89f;}
.combatFloat.xpGain{font-size:13px; color:#cfe3ff;}

/* ---------- character sheet etc ---------- */
.statGrid{display:grid; grid-template-columns:1fr auto; gap:4px 18px; font-size:13.5px;}
.statGrid dt{opacity:.75;} .statGrid dd{text-align:right; color:#4c3a12; font-weight:bold;}
.invGrid{display:grid; grid-template-columns:repeat(auto-fill,44px); gap:6px; margin-top:6px;}
.invCell{position:relative; width:44px;height:44px; border-radius:7px; cursor:pointer;
  background:radial-gradient(circle at 40% 30%, #56462c, #2a2013 85%);
  border:1px solid #6d5a33; display:grid; place-items:center;}
.invCell:hover{outline:1px solid var(--goldBright);}
.invCell svg{width:26px;height:26px;}
.invCell .cnt{position:absolute; right:3px; bottom:1px; font-size:11px; color:#fff; text-shadow:0 1px 2px #000;}
.invCell .qRing{position:absolute; inset:0; border-radius:7px; pointer-events:none;}
.itemTip{max-width:260px;}
.questCard{border:1px solid rgba(109,90,51,.5); border-radius:7px; padding:8px 10px; margin-bottom:8px; background:rgba(255,250,235,.4);}
.questCard h4{font-size:14.5px;}
.questCard .lvlTag{float:right; font-size:11px; color:#6b4f14;}
.objList{margin:5px 0 0 6px; font-size:12.5px;}
.objList li{margin:2px 0; list-style:none;}
.objList li.done{color:#3e6e37; text-decoration:line-through;}

/* vendor */
.shopWrap{display:flex; gap:14px; align-items:flex-start;}
.shopPane{flex:1; min-width:230px;}
.merchRow{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; font-size:13px;}
.merchRow:nth-child(even){background:rgba(109,90,51,.12);}
.merchRow .grow{flex:1;}
.merchRow .price{color:#6b4f14; font-weight:bold;}
.buyBtn{padding:2px 10px; font-size:12px;}

/* dialogue */
#dlgHost{position:absolute; left:50%; bottom:150px; transform:translateX(-50%); width:min(560px,92vw); pointer-events:auto;}
.dlgPortrait{float:left; width:74px; height:74px; margin:0 12px 8px 0; border:2px solid var(--goldDark); border-radius:9px; background:#181120;}
.dlgText{line-height:1.5; font-size:14.5px;}
.dlgOpts{clear:both; padding-top:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.dlgOpts .btn{text-align:left;}

/* map */
#mapWindow .winBody{padding:8px; width:min(760px,94vw);}
#mapCanvasWrap{position:relative;}
#mapCanvas{width:100%; height:auto; display:block; border-radius:6px; box-shadow:inset 0 0 40px rgba(80,60,20,.35); cursor:pointer;}
.mapLegend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; padding:6px 6px 2px; color:#4c3a12;}
.travelBar{display:flex; align-items:center; gap:10px; padding:6px; font-size:13px;}

/* modal + level up */
.modalVeil{position:absolute; inset:0; background:rgba(8,5,2,.45); display:grid; place-items:center; pointer-events:auto; z-index:40;}
.levelUpFx{position:absolute; inset:0; pointer-events:none; z-index:45;}
.levelUpFx .ring{position:absolute; left:50%; top:46%; width:140px; height:140px; margin:-70px; border-radius:50%;
  border:3px solid rgba(255,222,120,.85); box-shadow:0 0 60px 24px rgba(255,210,90,.5), inset 0 0 40px rgba(255,210,90,.4);
  animation:luRing 1.9s ease-out forwards;}
.levelUpFx .card{
  position:absolute; left:50%; top:40%; transform:translateX(-50%); text-align:center;
  font-size:34px; font-variant-caps:small-caps; letter-spacing:.2em; color:#ffedbd;
  text-shadow:0 2px 20px #000,0 0 40px rgba(255,214,105,.6); animation:luCard 2.8s ease forwards;}
.levelUpFx .card small{display:block; font-size:14px; letter-spacing:.3em; color:#ffd98e; margin-top:8px;}
@keyframes luRing{0%{transform:scale(.3); opacity:0;} 18%{opacity:1;} 100%{transform:scale(5.2); opacity:0;}}
@keyframes luCard{0%{opacity:0; transform:translateX(-50%) translateY(20px);} 16%{opacity:1; transform:translateX(-50%) none;} 78%{opacity:1;} 100%{opacity:0;}}
.fadeVeil{position:absolute; inset:0; background:#000; pointer-events:none; z-index:60; transition:opacity .9s ease;}

/* death */
#deathScreen{position:absolute; inset:0; background:radial-gradient(circle, rgba(60,4,4,.55), rgba(8,2,2,.86)); z-index:50;
  display:grid; place-items:center; pointer-events:auto;}
#deathScreen h2{font-size:34px; letter-spacing:.3em; color:#e8b9b9; font-variant-caps:small-caps;}
#deathScreen p{opacity:.85; margin:8px 0 16px; text-align:center;}

/* entry screen */
#entryScreen{position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 8%, #232038, #12101e 55%, #0b0a13);
  transition:opacity 1.1s ease;}
.titleCard{text-align:center; padding:20px; max-width:min(720px,94vw); overflow-wrap:break-word;}
.titleCard h1{font-size:clamp(30px,8.5vw,64px); letter-spacing:.34em; color:#ecd08a; margin-top:-46px; font-variant-caps:small-caps;
  text-shadow:0 3px 30px rgba(0,0,0,.8), 0 0 60px rgba(236,199,107,.25); position:relative;}
.titleCard .sub{margin-top:10px; font-size:16px; color:#cbb986; max-width:36em; margin-inline:auto;}
.titleCard .hint{margin-top:18px; font-size:13px; line-height:1.7; color:#a99c7c; max-width:36em; margin-inline:auto;}
.bigBtn{margin-top:22px; font-size:19px; letter-spacing:.14em; padding:13px 44px; cursor:pointer;
  font-family:inherit; font-variant-caps:small-caps; color:#2c2005; font-weight:bold;
  background:radial-gradient(circle at 35% 28%, #f7dd90, #caa03d 60%, #93701f);
  border:1px solid #5e4413; border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5);}
.bigBtn:hover{filter:brightness(1.08);}
#entryFoot{margin-top:16px; font-size:11px; color:#6f6650; letter-spacing:.06em;}
#entryArt{max-width:92vw; height:auto;}
@media (max-width:560px){
  .titleCard{padding:14px;}
}

/* loading bar on entry after click */
.loadBar{width:min(420px,80vw); height:8px; margin:18px auto 0; border-radius:6px; border:1px solid #5e4413; overflow:hidden; background:#191308;}
.loadBar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#caa03d,#f4d77e); transition:width .3s;}

/* diag readout */
#diagReadout{position:absolute; left:8px; top:8px; z-index:70; font:11px/1.45 Menlo,Consolas,monospace;
  color:#9fe8a2; background:rgba(5,10,6,.72); padding:6px 9px; border-radius:6px; pointer-events:none; white-space:pre;}

/* keyboard help table */
.keysTable{border-collapse:collapse; font-size:13px; width:100%;}
.keysTable td{padding:3px 8px 3px 0;} .keysTable td:first-child{white-space:nowrap;}
kbd{background:#241a0e; border:1px solid #6d5a33; border-bottom-width:2px; border-radius:4px; padding:1px 6px;
  font-family:Menlo,Consolas,monospace; font-size:11.5px; color:var(--goldBright);}

/* toast for save states etc — reuses lootToast */

/* ---------- narrow viewport : intentional desktop-first contract ----------
   The experience is mouse+keyboard by contract; below 700px we keep the world
   playable-feeling: HUD scales down, chat collapses to ticker, no horizontal scroll. */
@media (max-width: 700px){
  #chatPanel{width:56vw; height:64px; bottom:104px;}
  #chatBody{height:44px;}
  #tracker{right:52px; width:180px; top:84px;}
  .titleCard h1{font-size:clamp(20px,7vw,40px); letter-spacing:.28em; white-space:nowrap;}
  #compassCanvas{width:60vw !important; height:auto;}
  .slot{width:44px;height:44px;}
  #unitFrame{transform:scale(.9); transform-origin:left bottom;}
}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:#6d5a33aa; border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}