@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff2) format('woff2');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#120d0b;color:#f2e6cc;font:15px/1.35 Georgia,serif;-webkit-user-select:none;user-select:none}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block;outline:none;touch-action:none}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;background:#120d0b}
.t-art{position:absolute;inset:0;background:url(img/title.jpg) center/cover;filter:saturate(.9) brightness(.55)}
.t-in{position:relative;text-align:center;padding:24px;max-width:560px}
h1{font:700 64px/1 Cinzel,Georgia,serif;letter-spacing:.18em;margin:0;color:#f4dca4;text-shadow:0 3px 0 #5a1a10,0 0 30px rgba(0,0,0,.8)}
.sub{font:600 18px Cinzel,Georgia,serif;letter-spacing:.5em;margin:6px 0 14px;color:#d9a35a}
.lede{margin:0 0 18px;color:#eadcc0;text-shadow:0 1px 3px #000}
.t-card{background:linear-gradient(#3a1410,#22100c);border:2px solid #a8783a;border-radius:10px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.t-card label{display:block;font:600 13px Cinzel,Georgia,serif;letter-spacing:.12em;color:#d9a35a;margin-bottom:6px;text-transform:uppercase}
#name{width:100%;font:20px Georgia,serif;padding:10px 12px;border-radius:6px;border:1px solid #a8783a;background:#160b08;color:#f4e6c8;text-align:center;-webkit-user-select:text;user-select:text}
.cls{font-size:13px;color:#cdb48a;margin:10px 0 14px}
.btn{font:700 22px Cinzel,Georgia,serif;letter-spacing:.08em;padding:14px 26px;width:100%;border-radius:8px;border:2px solid #e2b462;background:linear-gradient(#b0281a,#6e130c);color:#fff3d8;cursor:pointer;text-shadow:0 2px 0 #3a0804}
.btn:hover{filter:brightness(1.12)}
.keys{font-size:12.5px;color:#cbb895;margin-top:14px;text-shadow:0 1px 2px #000}.keys b{color:#f2d79a;font-weight:600}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#me{position:absolute;left:16px;top:14px;width:300px}
#zone{font:700 18px Cinzel,Georgia,serif;color:#f4dca4;text-shadow:0 2px 3px #000;letter-spacing:.06em}
#hp{position:relative;height:22px;margin-top:6px;background:rgba(20,8,6,.8);border:2px solid #a8783a;border-radius:5px;overflow:hidden}
#hpfill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#d23a26,#7a140c);transition:width .15s}
#hptxt{position:absolute;inset:0;text-align:center;font:600 13px/18px Georgia,serif;text-shadow:0 1px 2px #000}
#board{position:absolute;right:14px;top:14px;min-width:280px;background:rgba(22,10,7,.78);border:1px solid #8a6230;border-radius:8px;padding:8px 12px;font-size:13px}
#board h4{margin:0 0 4px;font:600 12px Cinzel,Georgia,serif;letter-spacing:.14em;color:#d9a35a;text-transform:uppercase}
#board p{margin:3px 0;display:flex;gap:10px;align-items:baseline}#board p b{flex:1;color:#f4e2b8}#board em{font-size:11px;color:#b89a6a;font-style:normal}
#feed{position:absolute;left:16px;bottom:58px;width:420px;font-size:13.5px}
#feed p{margin:3px 0;padding:3px 8px;background:rgba(20,8,6,.6);border-left:3px solid #a8783a;border-radius:3px;transition:opacity 1s}#feed p.chat{border-color:#5a8ac0}#feed p.old{opacity:.35}
#chat-in{position:absolute;left:16px;bottom:16px;width:420px;pointer-events:auto;font:14px Georgia,serif;padding:7px 10px;border-radius:5px;border:1px solid #6a4a2a;background:rgba(18,8,6,.7);color:#f4e6c8;-webkit-user-select:text;user-select:text}
#banner{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;opacity:0}
#banner b{display:block;font:700 40px Cinzel,Georgia,serif;color:#f4dca4;text-shadow:0 3px 0 #5a1a10,0 0 20px #000;letter-spacing:.08em}#banner span{font-size:15px;color:#eadcc0;text-shadow:0 1px 3px #000}
#banner.pop{animation:ban 3.6s ease forwards}@keyframes ban{0%{opacity:0;transform:translate(-50%,10px)}12%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
#hint{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);font:600 15px Georgia,serif;color:#ffe2a0;text-shadow:0 1px 3px #000}
#net{position:absolute;right:14px;bottom:10px;font-size:11px;color:#a89070}#status{position:absolute;left:50%;top:45%;transform:translateX(-50%);font:600 20px Cinzel,Georgia,serif;text-shadow:0 2px 4px #000}
#dead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(rgba(60,0,0,.15),rgba(40,0,0,.65));gap:6px}
#dead b{font:700 46px Cinzel,Georgia,serif;color:#e8402a;text-shadow:0 3px 0 #300,0 0 30px #000}#dead span{font-size:17px;text-shadow:0 1px 3px #000}
#tags{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.tag{position:absolute;left:0;top:0;margin:-30px 0 0 -46px;width:92px;text-align:center;will-change:transform}
.tag b{display:block;font:600 12px Georgia,serif;color:#f4e2b8;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag i{display:block;height:5px;background:rgba(0,0,0,.65);border:1px solid rgba(0,0,0,.8);border-radius:2px;overflow:hidden;margin-top:2px}.tag s{display:block;height:100%;background:#d8402a;text-decoration:none}
.tag.player b{color:#ffd36a}.tag.me b{color:#9fe08a}.tag.me s{background:#5cc04a}.tag.lion b,.tag.bear b{color:#ffb070}.tag.npc b{color:#e6d6c0}.tag.dead{opacity:.35}
.dmg{position:absolute;font:700 18px Georgia,serif;color:#fff;text-shadow:0 2px 2px #000;transform:translate(-50%,-50%);animation:dm .9s ease-out forwards}.dmg.hurt{color:#ff5a40}.dmg.dealt{color:#ffe08a}.dmg.blk{color:#c8d4e0;font-size:14px}
@keyframes dm{to{transform:translate(-50%,-160%);opacity:0}}
#pad{display:none;position:absolute;right:16px;bottom:24px;gap:10px;pointer-events:auto}#pad button{width:70px;height:70px;border-radius:50%;border:2px solid #e2b462;background:rgba(110,19,12,.75);color:#fff;font:600 13px Georgia,serif}#pad .big{width:92px;height:92px}
#stick{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:2px solid rgba(255,220,160,.6);background:rgba(0,0,0,.2)}
body.mobile #pad{display:flex;align-items:flex-end}body.mobile #chat-in{display:none}body.mobile #feed{bottom:16px;width:60vw}
@media (max-width:700px){#board{min-width:0;font-size:11px}#me{width:200px}}

[hidden]{display:none!important}

/* phone portrait: nothing overlaps */
@media (max-width:700px){
 #me{left:10px;top:max(10px,env(safe-area-inset-top));width:46vw}#zone{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hp{height:16px}#hptxt{font-size:11px;line-height:12px}
 #board{right:8px;top:max(10px,env(safe-area-inset-top));width:44vw;min-width:0;max-height:34vh;overflow:hidden;padding:5px 7px;font-size:10.5px}#board h4{font-size:9.5px}#board p{gap:5px;flex-wrap:wrap}#board em{display:none}
 #feed{left:8px;right:8px;width:auto;top:calc(max(10px,env(safe-area-inset-top)) + 70px);bottom:auto;font-size:11px}#feed p{padding:2px 6px}#feed p:nth-last-child(n+4){display:none}
 #banner{top:24%;width:92vw}#banner b{font-size:26px}#banner span{font-size:12px}
 #hint{bottom:150px;font-size:12px;width:90vw;text-align:center}#net{bottom:4px;right:8px}
}
body.mobile #pad{right:10px;bottom:max(14px,env(safe-area-inset-bottom));gap:8px}}body.mobile #pad button{width:62px;height:62px}body.mobile #pad .big{width:80px;height:80px}

body.mobile #hud::after{content:'';position:absolute;left:24px;bottom:max(24px,env(safe-area-inset-bottom));width:110px;height:110px;border-radius:50%;border:2px dashed rgba(255,220,160,.35);pointer-events:none}

#binds{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;color:#d8c49a;background:rgba(18,8,6,.6);padding:4px 10px;border-radius:5px;white-space:nowrap}#binds b{color:#ffe0a0}
body.mobile #binds{display:none}

/* AoG-style title */
#title .t-art{filter:saturate(1.05) brightness(.62) contrast(1.1)}
#title::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 30%,rgba(10,2,0,.85) 100%),linear-gradient(90deg,#3a0806 0,rgba(58,8,6,0) 14%,rgba(58,8,6,0) 86%,#3a0806 100%);z-index:1;pointer-events:none}
#title::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(90,10,6,.55) 0 18px,rgba(40,4,2,.55) 18px 34px);-webkit-mask:linear-gradient(90deg,#000 0,transparent 9%,transparent 91%,#000 100%);mask:linear-gradient(90deg,#000 0,transparent 9%,transparent 91%,#000 100%);pointer-events:none;z-index:1}
.t-in{z-index:2}
.logo{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}
.logo .l1{font:700 92px/0.95 Cinzel,Georgia,serif;letter-spacing:.12em;background:linear-gradient(#ffe8a8,#e0a040 45%,#9a2a10 52%,#e05030 75%,#7a1008);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #2a0402) drop-shadow(0 0 22px rgba(255,120,40,.35))}
.logo .l2{font:700 22px Cinzel,Georgia,serif;letter-spacing:.55em;color:#e8c27a;text-shadow:0 2px 0 #3a0804;margin-top:4px;border-top:2px solid #a8783a;border-bottom:2px solid #a8783a;padding:4px 0 4px .55em}
.t-card{border:3px double #c8963c;background:linear-gradient(#4a1610,#1e0c08)}
.btn2{margin-top:10px;font-size:16px;padding:10px;background:linear-gradient(#5a3a1c,#2a180c);border-color:#a8783a}
#purse{margin-top:6px;font-size:14px;text-shadow:0 1px 2px #000;pointer-events:auto}#purse b{color:#ffd36a}#lu-btn{font:600 12px Georgia,serif;padding:3px 8px;border-radius:4px;border:1px solid #a8783a;background:rgba(60,20,10,.8);color:#f4dca4;cursor:pointer;margin-right:6px}#buffs{margin-left:8px;color:#a8e0ff}
#items{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}#items button{position:relative;width:52px;height:52px;border-radius:7px;border:2px solid #a8783a;background:rgba(30,12,8,.8);font-size:22px;cursor:pointer;color:#fff}#items em{position:absolute;left:3px;top:1px;font:600 10px Georgia;color:#d9a35a;font-style:normal}#items b{position:absolute;right:3px;bottom:1px;font:600 11px Georgia;color:#fff}
.dmg.coin{color:#ffd36a;font-size:16px}
@media (max-width:820px){.logo .l1{font-size:58px}.logo .l2{font-size:14px}}body.mobile #items{bottom:120px}body.mobile #items button{width:44px;height:44px;font-size:18px}

/* p57: the hub is safe by design; say so (Tyler hit a player in the Forecourt and saw no damage) */
#safeTag{display:none;font:700 11px Cinzel,Georgia,serif;letter-spacing:.08em;color:#9fe0a8;text-shadow:0 1px 2px #000;margin:1px 0 3px;white-space:nowrap}
body.safe #safeTag{display:block}
@media (max-width:700px){#safeTag{font-size:10px}#safeTag .long{display:none}}
#drinkBtn{pointer-events:auto;touch-action:manipulation;position:fixed;left:50%;bottom:205px;transform:translateX(-50%);z-index:30;font:700 16px Cinzel,Georgia,serif;color:#eaf6ff;background:linear-gradient(#2c6f99,#1c4766);border:2px solid #9fd2f0;border-radius:22px;padding:10px 22px;box-shadow:0 3px 10px #0008}
#drinkBtn[hidden]{display:none}

/* p58: buff chips */
#buffs .bf{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:2px 8px 2px 4px;border-radius:12px;background:rgba(10,20,30,.55);border:1px solid rgba(160,210,240,.35);font-size:14px;vertical-align:middle}
#buffs .bless i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#7fd0ff,#1f5f8a 70%);box-shadow:0 0 6px #6cc8ff;font-size:12px}
#buffs .bless{color:#cfeeff}#buffs .bless.on{border-color:#8fd6ff;box-shadow:0 0 8px rgba(110,200,255,.45);color:#fff}