/* safe areas as the game sees them: when a portrait phone shows the game turned sideways (html.rot), the physical top — status bar and notch — is the game's left edge, and so on round the frame */ :root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)} html.rot{--sl:env(safe-area-inset-top,0px);--st:env(safe-area-inset-right,0px);--sr:env(safe-area-inset-bottom,0px);--sb:env(safe-area-inset-left,0px)} :root{ --ink:#0a0b0c; --soot:#151619; --iron:#202226; --bronze:#8a6a3a; --bronze-lo:#4a3a22; --bone:#d9cdb2; --bone-lo:#8c806a; --blood:#5a1410; --frost:#7fb3ad; --tex:none; --f-display:'Cinzel', 'Trajan Pro', Georgia, serif; --f-body:'Alegreya', Georgia, serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--bone);font-family:var(--f-body);user-select:none;-webkit-user-select:none} #game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none} #overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none} #labels{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:21} /* above the touch layer, so a loot label can be tapped anywhere */ .sc{font-family:'Alegreya SC', var(--f-body);letter-spacing:.06em} /* ---------- forged surfaces ---------- */ .forge{position:relative;background:linear-gradient(rgba(255,255,255,.035),rgba(0,0,0,.28)),var(--tex) 0 0/256px 256px,var(--iron);border:1px solid var(--ink);outline:1px solid var(--bronze-lo);outline-offset:-5px} .forge::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(0 11 11)' fill='none' stroke='%238a6a3a'%3E%3Cpath d='M1.5 20.5V1.5h19' stroke-width='2'/%3E%3Cpath d='M5.5 16V5.5H16' stroke-width='1' stroke='%234a3a22'/%3E%3C/g%3E%3Cg transform='rotate(0 11 11)'%3E%3Crect x='2.5' y='2.5' width='3' height='3' fill='%23d9cdb2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") left top no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(90 11 11)' fill='none' stroke='%238a6a3a'%3E%3Cpath d='M1.5 20.5V1.5h19' stroke-width='2'/%3E%3Cpath d='M5.5 16V5.5H16' stroke-width='1' stroke='%234a3a22'/%3E%3C/g%3E%3Cg transform='rotate(90 11 11)'%3E%3Crect x='2.5' y='2.5' width='3' height='3' fill='%23d9cdb2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") right top no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(180 11 11)' fill='none' stroke='%238a6a3a'%3E%3Cpath d='M1.5 20.5V1.5h19' stroke-width='2'/%3E%3Cpath d='M5.5 16V5.5H16' stroke-width='1' stroke='%234a3a22'/%3E%3C/g%3E%3Cg transform='rotate(180 11 11)'%3E%3Crect x='2.5' y='2.5' width='3' height='3' fill='%23d9cdb2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") right bottom no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg transform='rotate(270 11 11)' fill='none' stroke='%238a6a3a'%3E%3Cpath d='M1.5 20.5V1.5h19' stroke-width='2'/%3E%3Cpath d='M5.5 16V5.5H16' stroke-width='1' stroke='%234a3a22'/%3E%3C/g%3E%3Cg transform='rotate(270 11 11)'%3E%3Crect x='2.5' y='2.5' width='3' height='3' fill='%23d9cdb2' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") left bottom no-repeat} .plate-title{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0 12px;font:600 13px/1 var(--f-display);letter-spacing:.32em;text-transform:uppercase;color:var(--bone)} .plate-title::before,.plate-title::after{content:"";height:1px;width:72px;background:linear-gradient(90deg,transparent,var(--bronze))} .plate-title::after{background:linear-gradient(90deg,var(--bronze),transparent)} .rule{position:relative;height:1px;margin:10px 22px;background:linear-gradient(90deg,transparent,var(--bronze-lo) 20%,var(--bronze-lo) 80%,transparent)} .rule::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;background:var(--ink);border:1px solid var(--bronze);transform:rotate(45deg)} /* engraved text button */ .cmd{font:600 12px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bone-lo);background:none;border:0;border-top:1px solid var(--bronze-lo);border-bottom:1px solid var(--bronze-lo);padding:9px 18px 8px;cursor:pointer} .cmd:hover,.cmd:focus-visible{color:var(--bone);border-color:var(--bronze);outline:none} .cmd.on{color:var(--bone);border-color:var(--bronze)} /* ---------- globes ---------- */ .globe{position:fixed;bottom:12px;width:158px;height:158px;pointer-events:auto} .globe canvas{width:158px;height:158px;display:block} #lifeGlobe{left:18px}#manaGlobe{right:18px} .globe .gv{position:absolute;left:50%;bottom:162px;transform:translateX(-50%);white-space:nowrap;padding:4px 12px 5px;background:linear-gradient(rgba(8,9,10,.7),rgba(8,9,10,.7)),var(--tex) 0 0/256px 256px,var(--ink);border:1px solid var(--bronze-lo);font:15px/1 'Alegreya SC', var(--f-body);letter-spacing:.08em;color:var(--bone);display:none} .globe:hover .gv{display:block} .globe .fill,.globe .val{display:none} /* ---------- the belt: xp groove + skill sockets ---------- */ #belt{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);padding:12px 18px 7px;pointer-events:auto} #xpWrap{position:relative;height:5px;margin:0 2px 10px;background:#060708;border-top:1px solid #000;border-bottom:1px solid var(--bronze-lo)} #xpFill{height:100%;width:0;background:linear-gradient(90deg,#5a4524,var(--bronze))} #xpWrap::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(10,11,12,.95) calc(10% - 1px) 10%)} #xpText{display:none} #skillbar{display:flex;gap:8px} .slot{position:relative;width:54px} .slot .sock{position:relative;width:54px;height:54px;background:linear-gradient(rgba(6,7,8,.62),rgba(6,7,8,.62)),var(--tex) 0 0/256px 256px,var(--ink);border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000} .slot canvas{width:100%;height:100%;display:block} .slot .cd{position:absolute;inset:0;background:conic-gradient(rgba(10,11,12,.86) calc(var(--p,0)*1turn),transparent 0);pointer-events:none} .slot .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 17px var(--f-display);color:var(--bone);text-shadow:0 0 3px #000,0 0 3px #000} .slot .key{margin-top:4px;text-align:center;font:12px/1 'Alegreya SC', var(--f-body);letter-spacing:.1em;color:var(--bronze)} .slot .cost{display:none} .slot.oom canvas{filter:grayscale(1) brightness(.4) sepia(.6) hue-rotate(-30deg)} .slot.fire .sock{border-color:var(--bronze) var(--bone) var(--bone) var(--bronze)} #hint{position:fixed;left:50%;bottom:124px;transform:translateX(-50%);font:14px 'Alegreya SC', var(--f-body);letter-spacing:.12em;color:var(--bone-lo);text-shadow:0 1px 2px #000;pointer-events:none;transition:opacity 1.5s} /* ---------- minimap + zone plaque ---------- */ #minimapWrap{position:fixed;right:18px;top:14px;width:168px;height:168px} #minimap{width:168px;height:168px;display:block} #zone{position:fixed;right:18px;top:186px;width:168px;text-align:center;pointer-events:none;text-shadow:0 1px 2px #000,0 0 6px #000} #zone .z{font:600 12px/1.25 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--bone)} #zone .s{margin-top:3px;font:13px/1.2 'Alegreya SC', var(--f-body);letter-spacing:.08em;color:var(--bone-lo)} #fps{position:fixed;right:20px;top:232px;font:12px 'Alegreya SC', var(--f-body);letter-spacing:.08em;color:var(--bone-lo);display:none;pointer-events:none} #fps.on{display:block} /* ---------- target ---------- */ #target{position:fixed;left:50%;top:16px;transform:translateX(-50%);width:340px;text-align:center;display:none;pointer-events:none} #target .n{font:600 16px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 6px #000,0 1px 2px #000} #target .bar{position:relative;height:9px;margin:6px 14px 0;background:var(--ink);border:1px solid #000;outline:1px solid var(--bronze-lo);outline-offset:1px} #target .bar div{height:100%;background:linear-gradient(#7a1c14,var(--blood))} #target .bar::before,#target .bar::after{content:"";position:absolute;top:-1px;width:8px;height:8px;background:var(--ink);border:1px solid var(--bronze);transform:rotate(45deg)} #target .bar::before{left:-14px}#target .bar::after{right:-14px} /* ---------- messages ---------- */ #msgs{position:fixed;left:50%;top:22%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap} .msg{font:16px 'Alegreya SC', var(--f-body);letter-spacing:.1em;color:var(--bone-lo);text-shadow:0 1px 2px #000,0 0 10px #000;margin:4px 0;transition:opacity .8s} .msg.big{display:flex;align-items:center;justify-content:center;gap:18px;font:600 26px var(--f-display);letter-spacing:.34em;text-transform:uppercase;color:var(--bone)} .msg.big::before,.msg.big::after{content:"";width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--bronze))} .msg.big::after{background:linear-gradient(90deg,var(--bronze),transparent)} /* ---------- loot labels ---------- */ .loot-label{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;padding:2px 10px 3px;font:15px/1.2 'Alegreya SC', var(--f-body);letter-spacing:.04em;background:rgba(10,11,12,.9);border:1px solid;white-space:nowrap;will-change:transform} .loot-label:hover{background:var(--iron)} .loot-label.unique{outline:1px solid rgba(184,97,42,.45);outline-offset:2px} .item{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer} .item img{max-width:92%;max-height:92%;pointer-events:none} .item.r-normal{background:rgba(217,205,178,.04)}.item.r-magic{background:rgba(159,176,180,.09)}.item.r-rare{background:rgba(214,176,88,.09)}.item.r-unique{background:rgba(184,97,42,.13)} .item:hover{outline:1px solid var(--bronze);outline-offset:-1px} #held{position:fixed;left:0;top:0;pointer-events:none;display:none;z-index:40;opacity:.9} #held img{width:100%;height:100%} /* ---------- tooltip ---------- */ #tip{position:fixed;left:0;top:0;z-index:50;min-width:260px;max-width:360px;display:none;pointer-events:none;background:linear-gradient(rgba(8,9,10,.8),rgba(8,9,10,.8)),var(--tex) 0 0/256px 256px,var(--ink);border:1px solid;text-align:center} #tip .hd{padding:8px 16px 7px;border-bottom:1px solid;font:600 16px/1.3 var(--f-display);letter-spacing:.06em} #tip .bs{font:600 14px/1.3 var(--f-display);letter-spacing:.06em;opacity:.85} #tip .meta{font:13px 'Alegreya SC', var(--f-body);letter-spacing:.08em;color:var(--bone-lo);padding:8px 14px 0} #tip .sep{position:relative;height:1px;margin:8px 26px;background:linear-gradient(90deg,transparent,var(--bronze-lo) 25%,var(--bronze-lo) 75%,transparent)} #tip .sep::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;border:1px solid var(--bronze);background:var(--ink);transform:rotate(45deg)} #tip .ln{font:15px/1.4 var(--f-body);color:var(--bone);padding:0 14px} #tip .imp{color:#b09a72} #tip .fl{font:italic 14px/1.4 var(--f-body);color:#b8612a;padding:0 18px} #tip .body{padding:0 0 10px} /* ---------- overlays ---------- */ #death,#loading,#help{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:60} #death{background:radial-gradient(ellipse at center,rgba(58,8,6,.35),rgba(0,0,0,.88) 70%);pointer-events:auto} #death h1{font:700 44px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#8e1a14;text-shadow:0 0 18px #000} #death p{margin:12px 0 30px;font:italic 17px var(--f-body);color:var(--bone-lo)} #loading{display:flex;background:#000;z-index:80} #loading h1{font:600 28px var(--f-display);letter-spacing:.42em;text-transform:uppercase;color:var(--bone)} #loading p{margin-top:16px;font:15px 'Alegreya SC', var(--f-body);letter-spacing:.14em;color:var(--bone-lo);min-height:1.4em} #loading .err{max-width:560px;text-align:center;color:#b8612a;line-height:1.45;letter-spacing:.02em} /* menu: an iron-bound parchment leaf */ #help{background:rgba(4,5,6,.74);pointer-events:auto} #help .forge{width:600px;padding:12px;transform-origin:center center} #page{position:relative;padding:18px 34px 22px;color:#2a1d12;background: radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(60,36,16,.55) 100%), radial-gradient(circle at 18% 82%,rgba(90,56,24,.22),transparent 22%), radial-gradient(circle at 86% 14%,rgba(90,56,24,.18),transparent 18%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), #c9b68e} #page h1{text-align:center;font:700 22px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#2a1d12} #page h2{margin:18px 0 8px;font:600 12px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--blood);display:flex;align-items:center;gap:10px} #page h2::after{content:"";flex:1;height:1px;background:rgba(90,20,16,.45)} #page .row{display:flex;align-items:baseline;gap:14px;margin:6px 0} #page .row>span{width:92px;font:15px 'Alegreya SC', var(--f-body);letter-spacing:.06em;color:#5a4028} #page input{flex:1;min-width:0;font:17px var(--f-body);color:#2a1d12;background:transparent;border:0;border-bottom:1px solid #6a4a2a;padding:2px 2px 3px;outline:none;user-select:text} #page .opt{background:none;border:0;padding:2px 2px 3px;margin-right:12px;font:16px 'Alegreya SC', var(--f-body);letter-spacing:.06em;color:#6a5238;cursor:pointer;border-bottom:1px solid transparent} #page .opt:hover{color:#2a1d12} #page .opt.on{color:#2a1d12;border-bottom-color:var(--blood)} #page .opt.on::before{content:"";display:inline-block;width:5px;height:5px;margin:0 7px 2px 0;background:var(--blood);transform:rotate(45deg)} #page .act{background:none;border:0;border-bottom:1px solid #6a4a2a;padding:2px 4px 3px;font:600 12px var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#2a1d12;cursor:pointer} #page .act:hover{color:var(--blood);border-color:var(--blood)} #ledger{width:100%;border-collapse:collapse;font-size:15px} #ledger td{padding:3px 0;vertical-align:baseline} #ledger td:first-child{width:130px;font:600 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#3a2818;white-space:nowrap} #ledger td:last-child{font-style:italic;color:#3a2a1a} #help .foot{display:flex;justify-content:center;margin-top:14px} #help .cmd{color:var(--bone)} /* panels are scaled to the screen in UI.fitPanels() */ /* ---------- touch layer (Diablo Immortal style) ---------- */ html,body{touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} #touch{position:fixed;inset:0;pointer-events:none;display:none;z-index:20} body.touch #touch{display:block} body.touch #belt,body.touch .globe,body.touch #hint,body.touch #fps{display:none!important} #stickZone{position:absolute;left:0;bottom:0;width:46%;height:74%;pointer-events:auto;touch-action:none} #stick{position:fixed;width:124px;height:124px;margin:-62px 0 0 -62px;pointer-events:none;opacity:.4;transition:opacity .15s} #stick.on{opacity:1} #stick .base{position:absolute;inset:0;border-radius:50%;border:2px solid var(--bronze-lo);outline:1px solid rgba(0,0,0,.8);background:radial-gradient(circle,rgba(10,11,12,.15) 40%,rgba(10,11,12,.55) 100%)} #stick .base::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(138,106,58,.35)} #stick .knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:2px solid var(--bronze);outline:1px solid #000;background:linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.35)),var(--tex) 0 0/256px 256px,var(--iron)} #skillsT{position:absolute;right:var(--sr);bottom:var(--sb);width:300px;height:300px;pointer-events:none} .tbtn{position:absolute;border-radius:50%;overflow:hidden;pointer-events:auto;touch-action:none;border:2px solid var(--bronze-lo);outline:1px solid #000;background:var(--ink)} .tbtn canvas{width:100%;height:100%;display:block;border-radius:50%} .tbtn .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(10,11,12,.86) calc(var(--p,0)*1turn),transparent 0);pointer-events:none} .tbtn .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 18px var(--f-display);color:var(--bone);text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none} .tbtn.main{border-width:3px;border-color:var(--bronze)} .tbtn.press{border-color:var(--bone)} .tbtn.oom canvas{filter:grayscale(1) brightness(.4) sepia(.6) hue-rotate(-30deg)} #tBars{position:absolute;left:calc(14px + var(--sl));top:12px;width:210px;pointer-events:none} #tBars .row{display:flex;align-items:center;gap:8px} #tLvl{width:26px;font:600 13px var(--f-display);color:var(--bone);text-align:center;text-shadow:0 1px 2px #000} .tbar{flex:1;height:12px;background:#060708;border:1px solid #000;outline:1px solid var(--bronze-lo);outline-offset:1px} .tbar div{height:100%;width:100%} #tLife div{background:linear-gradient(#8e1c14,#4a0c08)} #tMana{height:8px;margin:7px 0 0 34px}#tMana div{background:linear-gradient(#5f918b,#1d3a38)} #tXp{height:3px;margin:8px 0 0 34px;outline:none;border:0}#tXp div{background:var(--bronze)} .tsq{position:absolute;top:62px;width:42px;height:42px;pointer-events:auto;display:flex;align-items:center;justify-content:center} .tsq svg{width:22px;height:22px;stroke:var(--bone);fill:none;stroke-width:1.6} #tBag{left:calc(14px + var(--sl))}#tMenu{left:calc(64px + var(--sl))} body.touch #minimapWrap{transform:scale(.7);transform-origin:right top} body.touch #zone{top:128px;transform:scale(.85);transform-origin:right top} body.touch #target{top:10px;width:250px} body.touch #msgs{top:16%} body.touch #ledger{display:none} #ledgerTouch{display:none;width:100%;border-collapse:collapse;font-size:15px} body.touch #ledgerTouch{display:table} #ledgerTouch td{padding:3px 0;vertical-align:baseline} #ledgerTouch td:first-child{width:130px;font:600 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#3a2818;white-space:nowrap} #ledgerTouch td:last-child{font-style:italic;color:#3a2a1a} #rotate{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#1c1e22,#050506 75%);text-align:center;padding:30px} #rotate h1{margin-top:34px;font:600 20px/1.3 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)} #rotate p{margin-top:12px;font:17px/1.4 var(--f-body);color:#c9bda2} #rotate p.sm{margin-top:26px;max-width:300px;font:italic 14px/1.4 var(--f-body);color:var(--bone-lo)} #rotate .phone{width:62px;height:104px;border:3px solid var(--bone);border-radius:12px;position:relative;animation:turnphone 2.4s ease-in-out infinite} #rotate .phone i{position:absolute;left:50%;bottom:6px;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:var(--bone)} @keyframes turnphone{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}} /* upright phone: the page itself is turned (js/core/view.js), so the rotate hint is no longer needed */ @media (max-height:500px){#page{padding:12px 24px 14px}} /* ---------- skill sockets: charges, locks, ultimate ---------- */ .slot .chg,.tbtn .chg{position:absolute;right:3px;bottom:1px;font:700 13px var(--f-display);color:var(--bone);text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none} .tbtn .chg{right:50%;transform:translateX(50%);bottom:4px;font-size:12px} .slot.locked .sock,.slot.empty .sock{opacity:.35} .slot.primary .sock{border-color:#000 var(--bronze) var(--bronze) #000} .slot.ult .sock,.tbtn.ult{box-shadow:0 0 14px 3px rgba(120,190,255,.55)} .tbtn.locked,.tbtn.empty{opacity:.25;pointer-events:none} @keyframes ultpulse{50%{box-shadow:0 0 18px 6px rgba(140,200,255,.8)}} #manaGlobe.ready{filter:drop-shadow(0 0 12px rgba(140,200,255,.7))} #tSkills{left:calc(114px + var(--sl))} /* ---------- quest tracker ---------- */ #quest{position:fixed;left:22px;top:18px;max-width:300px;pointer-events:auto;cursor:pointer;display:none;text-shadow:0 1px 2px #000,0 0 8px #000} #quest.on{display:block} #quest .qt{font:600 12px/1.2 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#eea24a;display:flex;align-items:center;gap:8px} #quest .qt::before{content:"";width:7px;height:7px;background:#eea24a;transform:rotate(45deg);flex:none} #quest .qo{margin:4px 0 0 15px;font:16px/1.3 var(--f-body);color:var(--bone)} #quest.pulse .qo{animation:qpulse 1.2s ease-out} @keyframes qpulse{0%{color:#ffdcb4;text-shadow:0 0 12px #eea24a}100%{}} body.touch #quest{left:calc(16px + var(--sl));top:114px;max-width:230px} body.touch #quest .qo{font-size:14px} /* ---------- NPC nameplates + speech ---------- */ .npc-label{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;white-space:nowrap;text-align:center;will-change:transform;padding:6px 10px} .npc-label span{font:14px 'Alegreya SC', var(--f-body);letter-spacing:.06em;color:#9fc97a;text-shadow:0 1px 2px #000,0 0 6px #000} .npc-label b{display:none;margin:0 auto 2px;width:14px;height:22px;font:700 22px/22px var(--f-display);color:#eea24a;text-shadow:0 0 8px #000,0 0 3px #000} .npc-label.quest b{display:block}.npc-label.quest b::before{content:"!"} .npc-label.dead{display:none!important} .bark{position:absolute;left:0;top:0;pointer-events:none;max-width:260px;padding:5px 12px 6px;font:italic 15px/1.3 var(--f-body);color:var(--bone);background:rgba(10,11,12,.82);border:1px solid var(--bronze-lo);white-space:nowrap;will-change:transform} /* ---------- dialogue ---------- */ #fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:55} #dialogue{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);width:min(760px,calc(92 * var(--vw)));z-index:56;display:none;pointer-events:auto;cursor:pointer;padding:14px 26px 16px; background:linear-gradient(rgba(8,9,10,.86),rgba(8,9,10,.92)),var(--tex) 0 0/256px 256px,var(--ink);border:1px solid #000;outline:1px solid var(--bronze-lo);outline-offset:-5px} #dialogue.on{display:block} #dialogue .who{font:600 13px var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:#eea24a;margin-bottom:6px} #dialogue .say{font:18px/1.45 var(--f-body);color:var(--bone);min-height:2.9em} #dialogue.thought .say{font-style:italic;color:#b8ad96} #dialogue .more{position:absolute;right:16px;bottom:10px;color:var(--bronze);font-size:14px;animation:ultpulse 1.2s infinite} body.touch #dialogue{bottom:12px;width:min(640px,calc(70 * var(--vw)))} body.touch #dialogue .say{font-size:16px;min-height:2.6em} body.touch.talking #touch{visibility:hidden} /* ---------- skill panel ---------- */ #skills{position:fixed;z-index:45;left:50%;top:50%;width:680px;transform:translate(-50%,-50%);display:none;pointer-events:auto;padding-bottom:10px} #skills.open{display:block} #skills .sbody{display:flex;gap:18px;padding:0 24px} #skills .slist{flex:1.25;min-width:0} #skills h3{font:600 11px var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);margin:4px 0 6px} #skills .row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px} #skills .sk{width:62px;cursor:pointer;text-align:center} #skills .sk canvas{width:52px;height:52px;display:block;margin:0 auto;border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000} #skills .sk span{display:block;margin-top:2px;font:11px/1.1 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #skills .sk.sel canvas{border-color:var(--bone);box-shadow:0 0 10px rgba(238,162,74,.5)} #skills .sk.sel span{color:var(--bone)} #skills .sk.used canvas{outline:1px solid var(--bronze);outline-offset:2px} #skills .sk.locked canvas{filter:grayscale(1) brightness(.35)} #skills .sinfo{flex:1;min-width:0;max-height:250px;overflow:hidden;text-align:center;border:1px solid var(--bronze-lo);background:rgba(6,7,8,.5)} #skills .sinfo .hd{padding:8px 12px 7px;border-bottom:1px solid;font:600 16px/1.3 var(--f-display);letter-spacing:.06em} #skills .sinfo .meta{font:13px 'Alegreya SC', var(--f-body);letter-spacing:.06em;color:var(--bone-lo);padding:6px 12px 0} #skills .sinfo .sep{height:1px;margin:8px 24px;background:linear-gradient(90deg,transparent,var(--bronze-lo) 25%,var(--bronze-lo) 75%,transparent)} #skills .sinfo .ln{font:14px/1.4 var(--f-body);color:var(--bone);padding:0 12px} #skills .sinfo .imp{color:#9fc9e8} #skills .sload{display:flex;justify-content:center;align-items:flex-end;gap:12px} #skills .sock{position:relative;width:56px;height:56px;cursor:pointer;border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:rgba(6,7,8,.6)} #skills .sock.primary{width:72px;height:72px;border-color:#000 var(--bronze) var(--bronze) #000} #skills .sock canvas{width:100%;height:100%;display:block} #skills .sock em{position:absolute;left:0;right:0;bottom:-17px;font:normal 11px 'Alegreya SC', var(--f-body);color:var(--bronze);text-align:center} #skills .sock.ok{border-color:#eea24a;box-shadow:0 0 12px rgba(238,162,74,.55);animation:ultpulse 1.2s infinite} #skills .sock.locked{opacity:.35} #skills .foot{display:flex;justify-content:center;margin-top:24px} #skills .cmd{color:var(--bone)} /* ---------- cutscenes: letterbox, HUD steps aside ---------- */ #cine i{position:fixed;left:0;right:0;height:0;background:#000;z-index:54;pointer-events:none;transition:height .9s cubic-bezier(.3,.7,.2,1)} #cine i:first-child{top:0}#cine i:last-child{bottom:0} body.cine #cine i{height:calc(12 * var(--vh))} #quest,#minimapWrap,#zone,#belt,.globe,#touch,#target,#labels .npc-label{transition:opacity .6s} body.cine #quest,body.cine #minimapWrap,body.cine #zone,body.cine #belt,body.cine .globe,body.cine #touch,body.cine #target,body.cine #hint{opacity:0;pointer-events:none!important} body.cine #touch *{pointer-events:none!important} body.cine #dialogue{bottom:calc(calc(12 * var(--vh)) - 30px);background:linear-gradient(rgba(8,9,10,.7),rgba(8,9,10,.85));outline-color:rgba(74,58,34,.6)} body.cine #msgs{top:calc(18 * var(--vh))} /* ---------- phone held upright: draw the whole game turned 90° ---------- */ html.rot,html.rot body{overflow:hidden} html.rot body{position:fixed;left:0;top:0;width:var(--lw)!important;height:var(--lh)!important;transform-origin:0 0;transform:rotate(90deg) translateY(-100%)} /* ---------- small square buttons: a plain bronze frame (the corner brackets meet and notch at 42px) ---------- */ .tsq.forge::before{display:none} .tsq.forge{border:2px solid var(--bronze);outline:1px solid #000;outline-offset:0} /* skill slots that are not open yet stay out of sight */ .tbtn.locked{display:none} /* ---------- close button on every panel ---------- */ .xclose{position:absolute;top:6px;right:8px;z-index:3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(10,11,12,.6);border:1px solid var(--bronze-lo);color:var(--bone);font:600 20px/1 var(--f-display);cursor:pointer;pointer-events:auto} .xclose:hover{border-color:var(--bronze)} #help .forge .xclose{top:18px;right:18px;background:rgba(201,182,142,.6);color:#2a1d12;border-color:#6a4a2a} /* ===================================================================== SOFTER PANELS — rounded corners everywhere; the square corner brackets go ===================================================================== */ :root{--r:12px;--r-sm:8px} .forge{border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)} .forge::before{display:none} #page{border-radius:var(--r-sm)} #tip,#dialogue,.bark,.loot-label,.msg.big{border-radius:var(--r-sm)} #tip .hd{border-radius:var(--r-sm) var(--r-sm) 0 0} .slot .sock,#skills .sock,#skills .sk canvas,#skills .sinfo{border-radius:var(--r-sm)} .slot canvas,#skills .sock canvas{border-radius:6px} .tsq.forge{border-radius:10px} .tbar{border-radius:6px}.tbar div{border-radius:5px} #target .bar{border-radius:5px}#target .bar div{border-radius:4px} #xpWrap{border-radius:3px} .xclose{border-radius:50%} #stick .knob{border-radius:50%} .npc-label{border-radius:var(--r-sm)} /* ===================================================================== PHONE READABILITY — larger type, and an inventory laid out for landscape ===================================================================== */ body.touch #quest .qt{font-size:14px} body.touch #quest .qo{font-size:17px} body.touch #zone .z{font-size:14px}body.touch #zone .s{font-size:15px} body.touch .npc-label span{font-size:17px} body.touch .bark{font-size:17px;padding:6px 14px 7px} body.touch .loot-label{font-size:17px;padding:4px 12px 5px} body.touch .msg{font-size:19px}body.touch .msg.big{font-size:28px} body.touch #target .n{font-size:17px} body.touch #tLvl{font-size:15px} body.touch #dialogue .who{font-size:15px} body.touch #dialogue .say{font-size:19px;line-height:1.4} body.touch #tip{min-width:300px;max-width:420px} body.touch #tip .hd{font-size:19px}body.touch #tip .bs{font-size:16px} body.touch #tip .meta{font-size:15px}body.touch #tip .ln{font-size:17px}body.touch #tip .fl{font-size:16px} /* skills screen */ body.touch #skills .sk{width:70px}body.touch #skills .sk span{font-size:13px} body.touch #skills h3{font-size:13px} body.touch #skills .sinfo .hd{font-size:19px}body.touch #skills .sinfo .meta{font-size:15px}body.touch #skills .sinfo .ln{font-size:16px} body.touch #skills .sock em{font-size:13px} /* menu: full size, the parchment scrolls instead of shrinking */ body.touch #help .forge{max-height:calc(var(--lh) - 16px);display:flex;flex-direction:column} body.touch #page{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;flex:1;min-height:0} body.touch #page .row>span,body.touch #page .opt,body.touch #ledgerTouch{font-size:17px} body.touch #ledgerTouch td:first-child{font-size:13px} /* ---------- ultimate: ring on the attack button + captioned button when ready ---------- */ .tbtn .ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none;transform:rotate(-90deg);overflow:visible} .tbtn .ring circle{fill:none;stroke:#7cc4ff;stroke-width:4;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;filter:drop-shadow(0 0 4px rgba(120,190,255,.8));transition:stroke-dashoffset .2s} .tbtn.main{overflow:visible} .tbtn.main canvas{border-radius:50%} .tbtn.main.ult{box-shadow:0 0 18px 4px rgba(120,190,255,.6)} .tult{position:absolute;display:none;width:84px;pointer-events:auto;touch-action:none;text-align:center} .tult.on{display:block;animation:ultin .35s ease-out} .tult .ic{width:62px;height:62px;margin:0 auto;border-radius:50%;overflow:hidden;border:2px solid #9fd4ff;box-shadow:0 0 16px 4px rgba(120,190,255,.7);animation:ultglow 1.1s ease-in-out infinite} .tult .ic canvas{width:100%;height:100%;display:block} .tult span{display:block;margin-top:4px;font:600 12px/1.1 var(--f-display);letter-spacing:.08em;color:#cfe9ff;text-shadow:0 1px 2px #000,0 0 6px #000} @keyframes ultglow{50%{box-shadow:0 0 26px 8px rgba(140,205,255,.9)}} @keyframes ultin{from{transform:scale(.4);opacity:0}} /* ---------- phones: the skills screen uses the whole screen at full size ---------- */ body.touch #skills.open{display:flex;flex-direction:column;left:8px;top:8px;right:8px;bottom:8px;width:auto;transform:none!important;padding-bottom:8px} body.touch #skills .plate-title{padding:12px 0 8px;font-size:15px} body.touch #skills .sbody{flex:1;min-height:0;padding:0 18px;gap:16px} body.touch #skills .slist,body.touch #skills .sinfo{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:none} body.touch #skills .sk{width:74px}body.touch #skills .sk canvas{width:60px;height:60px} body.touch #skills .sinfo{flex:1} body.touch #skills .rule{margin:6px 22px} body.touch #skills .sload{padding-bottom:20px} body.touch #skills .sock{width:60px;height:60px}body.touch #skills .sock.primary{width:74px;height:74px} body.touch #skills .foot{display:none} /* ---------- message feed: quiet lines under the quest tracker ---------- */ #feed{position:fixed;left:22px;top:92px;max-width:320px;pointer-events:none;display:flex;flex-direction:column;gap:3px} .feedline{font:15px/1.3 'Alegreya SC', var(--f-body);letter-spacing:.04em;color:var(--bone);text-shadow:0 1px 2px #000,0 0 6px #000;transition:opacity .8s} body.touch #feed{left:calc(16px + var(--sl));top:190px;max-width:260px} body.touch .feedline{font-size:16px} body.cine #feed{opacity:0} /* ===================================================================== INVENTORY — figure with gear | uniform bag | detail card ===================================================================== */ #inv{position:fixed;z-index:30;left:50%;top:50%;transform-origin:center center;display:none;pointer-events:auto;padding:0 20px 18px} #inv.open{display:block} #inv .ibody{display:flex;gap:22px;align-items:stretch} #inv .doll{display:flex;gap:10px;align-items:center;padding-right:22px;border-right:1px solid var(--bronze-lo)} #inv .doll .sec,#inv .doll .pri{display:flex;flex-direction:column;gap:10px} #inv .doll .fig{width:170px;height:260px;position:relative;border-radius:var(--r-sm);background:radial-gradient(ellipse at 50% 60%,rgba(138,106,58,.22),transparent 70%)} #inv .doll .fig canvas{position:absolute;inset:0;width:100%;height:100%} #inv .doll .figold{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120'%3E%3Cg fill='none' stroke='%238a6a3a' stroke-width='2'%3E%3Ccircle cx='20' cy='14' r='8'/%3E%3Cpath d='M20 22v34M8 32l12 6 12-6M20 56l-10 44M20 56l10 44M34 20v96'/%3E%3C/g%3E%3C/svg%3E")} #inv .eq,#inv .cell{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--r-sm);border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:center/56% no-repeat,linear-gradient(rgba(6,7,8,.62),rgba(6,7,8,.62)),var(--tex) 0 0/256px 256px,var(--ink)} #inv .eq{width:68px;height:68px} #inv .cell{width:58px;height:58px} #inv .eq img,#inv .cell img{max-width:82%;max-height:82%;pointer-events:none} #inv .r-magic{box-shadow:inset 0 0 0 1px rgba(159,176,180,.55)}#inv .r-rare{box-shadow:inset 0 0 0 1px rgba(214,176,88,.65)}#inv .r-unique{box-shadow:inset 0 0 0 1px rgba(184,97,42,.8),inset 0 0 14px rgba(184,97,42,.35)} #inv .sel{border-color:#eea24a!important;box-shadow:0 0 12px rgba(238,162,74,.55)!important} #inv .bagwrap{display:flex;flex-direction:column;gap:6px} #inv .bag{display:grid;grid-template-columns:repeat(6,58px);gap:6px} #inv .bagcount{text-align:right;font:13px 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #icard{position:fixed;z-index:32;width:300px;max-height:calc(var(--lh) - 16px);padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--bronze);background:linear-gradient(rgba(10,11,12,.96),rgba(10,11,12,.97)),var(--tex) 0 0/256px 256px;box-shadow:0 10px 30px rgba(0,0,0,.7);display:none;flex-direction:column;gap:3px;overflow-y:auto} #icard.on{display:flex} #icard .vs b{font-weight:600} #icard .nm,#icard .ch{font:600 18px/1.25 var(--f-display);letter-spacing:.04em;color:var(--bone)} #icard .bs{font:600 14px var(--f-display);color:var(--bone-lo)} #icard .sub{font:14px 'Alegreya SC', var(--f-body);color:var(--bone-lo);margin-bottom:6px} #icard .ln{font:16px/1.35 var(--f-body);color:var(--bone)} #icard .imp{color:#b09a72} #icard .fl{font:italic 14px/1.35 var(--f-body);color:#b8612a;margin-top:4px} #icard .vs{margin-top:10px;padding-top:8px;border-top:1px solid var(--bronze-lo);font:13px 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #icard .cmp{font:15px/1.35 var(--f-body);color:var(--bone-lo)} #icard .cmp.up{color:#7fcf6a}#icard .cmp.dn{color:#d0604a} #icard .st{display:flex;justify-content:space-between;gap:12px;font:16px/1.5 var(--f-body)} #icard .st span{font-family:'Alegreya SC', var(--f-body);color:var(--bone-lo)}#icard .st b{font-weight:500;color:var(--bone)} #icard .hint{margin-top:10px;font:italic 14px var(--f-body);color:var(--bone-lo)} #icard .btns{display:flex;gap:10px;margin-top:auto;padding-top:12px} #icard button{flex:1;padding:10px 8px;border-radius:var(--r-sm);border:1px solid var(--bronze-lo);background:rgba(20,22,26,.9);color:var(--bone);font:600 13px var(--f-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer} #icard button.pri{border-color:var(--bronze);background:linear-gradient(#4a3a22,#2a2014);color:#f0e2c0} body.touch #icard .ln,body.touch #icard .st{font-size:17px}body.touch #icard .cmp{font-size:16px} body.touch #icard button{padding:13px 8px;font-size:14px} /* ultimate locked (ULT_ENABLED = false): no ring round the attack button */ body.noult .tbtn .ring,body.noult .tult{display:none!important} /* ---------- a freshly learned skill waits to be equipped ---------- */ #skills .sk{position:relative} #skills .sk .new{position:absolute;top:-6px;right:0;padding:1px 6px;border-radius:8px;background:#c0392b;color:#fff;font:600 10px var(--f-display);letter-spacing:.08em;font-style:normal} #skills .howto{margin:10px 12px 4px;padding:8px;border-radius:var(--r-sm);background:rgba(238,162,74,.12);color:#eea24a;font:15px/1.3 var(--f-body)} /* inventory: fitting slots light up, the rest dim; stats open over the panel */ #inv .eq.fit{border-color:#eea24a;box-shadow:0 0 14px rgba(238,162,74,.6);animation:ultglow 1.4s ease-in-out infinite} #inv .eq.dim{opacity:.3;filter:grayscale(.7)} #icard .empty{margin:auto 0;text-align:center;font:italic 16px/1.4 var(--f-body);color:var(--bone-lo)} #inv .statsbtn{position:absolute;top:8px;left:14px;z-index:3;padding:9px 16px;border-radius:20px;border:1px solid var(--bronze);background:rgba(20,22,26,.85);color:var(--bone);font:600 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer} #inv .statspane{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;background:rgba(6,7,8,.72);border-radius:var(--r)} #inv .statspane.on{display:flex} #inv .statspane .sp{width:340px;padding:18px 22px;border-radius:var(--r-sm);border:1px solid var(--bronze);background:linear-gradient(rgba(12,13,15,.96),rgba(12,13,15,.96)),var(--tex) 0 0/256px 256px} #inv .statspane .ch{font:600 20px var(--f-display);color:var(--bone)}#inv .statspane .sub{font:15px 'Alegreya SC', var(--f-body);color:var(--bone-lo);margin:2px 0 10px} #inv .statspane .st{display:flex;justify-content:space-between;gap:12px;font:17px/1.6 var(--f-body)}#inv .statspane .st span{font-family:'Alegreya SC', var(--f-body);color:var(--bone-lo)}#inv .statspane .st b{font-weight:500;color:var(--bone)} #inv .statspane .hint{margin-top:10px;font:italic 14px var(--f-body);color:var(--bone-lo);text-align:center} /* ---------- quest log ---------- */ #qlog{position:fixed;z-index:46;left:50%;top:50%;width:620px;transform:translate(-50%,-50%);display:none;pointer-events:auto;padding:0 0 16px} #qlog.open{display:flex;flex-direction:column} #qlog .qbody{padding:0 26px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:calc(var(--lh) - 90px)} #qlog h3{margin:10px 0 8px;font:600 12px var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)} #qlog .q{padding:12px 16px;margin-bottom:10px;border-radius:var(--r-sm);border:1px solid var(--bronze-lo);background:rgba(6,7,8,.5)} #qlog .q.done{opacity:.6} #qlog .qh{font:600 19px var(--f-display);letter-spacing:.06em;color:#eea24a} #qlog .qg{font:14px 'Alegreya SC', var(--f-body);color:var(--bone-lo);margin-top:2px} #qlog p{font:16px/1.45 var(--f-body);color:var(--bone);margin:8px 0} #qlog ul{list-style:none} #qlog li{position:relative;padding-left:22px;font:16px/1.6 var(--f-body);color:var(--bone)} #qlog li.ok{color:var(--bone-lo);text-decoration:line-through} #qlog li.ok::before{content:"✓";position:absolute;left:2px;color:#7fcf6a;text-decoration:none} #qlog li.now::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;background:#eea24a;transform:rotate(45deg)} #qlog .none{color:var(--bone-lo);font-style:italic} body.touch #qlog{width:min(720px,calc(96 * var(--vw)))} body.touch #qlog p,body.touch #qlog li{font-size:18px} #tQuest{left:calc(114px + var(--sl))} #tSkills{left:calc(164px + var(--sl))!important} /* ---------- talking: the attack button turns into a talk button near someone ---------- */ .tbtn .talkic{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,#3a2e1a,#15110a);pointer-events:none} .tbtn .talkic svg{width:40px;height:40px;stroke:#f0e2c0;fill:none;stroke-width:1.6} .tbtn .talkic span{font:600 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#f0e2c0;margin-top:2px} .tbtn.main.talk .talkic{display:flex} .tbtn.main.talk{border-color:#eea24a;box-shadow:0 0 16px rgba(238,162,74,.6)} .npc-label.near::after{content:"Talk";display:block;margin:3px auto 0;width:max-content;padding:3px 12px;border-radius:12px;background:rgba(238,162,74,.9);color:#1a1208;font:600 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase} body:not(.touch) .npc-label.near::after{content:"E · Talk"} /* item card: compact, buttons always visible at its foot */ #icard{gap:1px;padding:12px 14px 0} #icard .vs{margin-top:8px;padding-top:6px} #icard .cmp{font-size:14px;line-height:1.3} #icard .btns{position:sticky;bottom:0;margin-top:10px;padding:10px 0 12px;background:linear-gradient(transparent,rgba(10,11,12,.98) 30%)} #icard button{padding:10px 6px;font-size:12px;letter-spacing:.1em} body.touch #icard .cmp{font-size:15px} /* inventory furniture in the same socket language as the slots: inset iron, bronze rim, soft light */ #inv{background:radial-gradient(ellipse at 30% 45%,rgba(138,106,58,.14),transparent 55%),radial-gradient(ellipse at 75% 60%,rgba(80,110,120,.08),transparent 60%),linear-gradient(rgba(255,255,255,.03),rgba(0,0,0,.35)),var(--tex) 0 0/256px 256px,var(--iron)} #inv .doll .fig{background:radial-gradient(ellipse at 50% 88%,rgba(0,0,0,.55),transparent 45%),radial-gradient(ellipse at 50% 55%,rgba(238,162,74,.16),transparent 65%)} #inv .statsbtn,#icard,#inv .statspane .sp{border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;border-radius:var(--r-sm); background:linear-gradient(rgba(6,7,8,.72),rgba(6,7,8,.86)),var(--tex) 0 0/256px 256px,var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.6)} #inv .statsbtn{padding:8px 16px;color:var(--bone)} #inv .statsbtn:hover,#inv .statsbtn:active{border-color:#000 var(--bronze) var(--bronze) #000} #icard{border-color:#000 var(--bronze) var(--bronze) #000} #icard .btns{background:linear-gradient(transparent,rgba(8,9,10,.96) 30%)} #icard button{border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:linear-gradient(rgba(20,22,26,.9),rgba(10,11,12,.95))} #icard button.pri{border-color:#000 var(--bronze) var(--bronze) #000;background:linear-gradient(#4a3a22,#241a0e)} #icard.preview{pointer-events:none} #icard .hint{margin-top:8px;font:italic 13px var(--f-body);color:var(--bone-lo)} /* ---------- item comparison (desktop card: worn left, new right · phone: full-screen dialog) ---------- */ #icard{width:auto;max-width:calc(var(--lw) - 16px)} #icard .row{display:flex;gap:12px;align-items:flex-start} #icard .col{display:flex;flex-direction:column;gap:10px} .ip{position:relative;width:280px;display:flex;flex-direction:column;gap:2px} #icard .row .col + .col .ip,#icard .row > .ip{} .ip .banner{align-self:flex-start;white-space:nowrap;margin:-2px 0 6px;padding:3px 12px 3px 10px;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#8a6a3a,#4a3a22);color:#f0e2c0;font:600 11px var(--f-display);letter-spacing:.2em;text-transform:uppercase} .ip .ln em{margin-left:8px;font-style:normal;font:600 13px var(--f-body)} .ip .ln.up{color:#9be07f}.ip .ln.dn{color:#e07a64} .ip em.up{color:#7fcf6a}.ip em.dn{color:#d0604a} .ip .ln.lost{color:#c0604c;text-decoration:line-through;text-decoration-color:rgba(192,96,76,.6)} .ip .ln.lost em{text-decoration:none;display:inline-block} #icard .row .col:first-child .ip{opacity:.92} .cmpbtn{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#241a0e;border:2px solid #eea24a;box-shadow:0 0 10px rgba(238,162,74,.6);pointer-events:auto;z-index:2} .cmpbtn svg{width:16px;height:16px;stroke:#f0e2c0;fill:none;stroke-width:2.2} #cmp{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,5,6,.86);padding:16px} #cmp.on{display:flex} #cmp .ctitle{font:600 14px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--bone);margin-bottom:12px} #cmp .cbody{display:flex;gap:14px;align-items:flex-start;max-width:100%} #cmp .col{padding:14px 16px;border-radius:var(--r-sm);border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:linear-gradient(rgba(6,7,8,.8),rgba(6,7,8,.9)),var(--tex) 0 0/256px 256px,var(--ink);display:flex;flex-direction:column;gap:12px;max-height:calc(var(--lh) - 70px);overflow-y:auto} #cmp .col:last-child{border-color:#000 var(--bronze) var(--bronze) #000} #cmp .arrow{align-self:center;color:#eea24a;font-size:22px} #cmp .ip{width:min(300px,calc(40 * var(--vw)))} #cmp .nm{font:600 18px/1.25 var(--f-display)}#cmp .sub{font:14px 'Alegreya SC', var(--f-body);color:var(--bone-lo);margin-bottom:6px}#cmp .ln{font:17px/1.4 var(--f-body)}#cmp .bs{font:600 14px var(--f-display);color:var(--bone-lo)}#cmp .fl{font:italic 14px/1.35 var(--f-body);color:#b8612a} #cmp .btns{display:flex;gap:10px} #cmp button{flex:1;padding:13px 10px;border-radius:var(--r-sm);border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:linear-gradient(rgba(20,22,26,.9),rgba(10,11,12,.95));color:var(--bone);font:600 14px var(--f-display);letter-spacing:.12em;text-transform:uppercase} #cmp button.pri{border-color:#000 var(--bronze) var(--bronze) #000;background:linear-gradient(#4a3a22,#241a0e);color:#f0e2c0} #icard .ip .ln.up,#cmp .ip .ln.up{color:#9be07f}#icard .ip .ln.dn,#cmp .ip .ln.dn,#icard .ip .ln.lost,#cmp .ip .ln.lost{color:#e07a64} #icard .ip .ln.imp:not(.up):not(.dn){color:#b09a72} .ip .ln em{white-space:nowrap} .ip .banner.new,.ip .banner:only-child{} #icard .col .btns{position:static;background:none;padding:8px 0 4px;margin-top:4px} /* ---------- desktop menu bar (phones have their own square buttons) ---------- */ body:not(.touch) #feed{top:140px} /* compare card: no outer box — each item is its own panel, worn left, new right */ #icard{background:none!important;border:none!important;box-shadow:none!important;padding:0!important;overflow:visible} #icard .row{gap:10px;align-items:stretch} #icard .col{padding:14px 16px 12px;border-radius:var(--r-sm);border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000; background:linear-gradient(rgba(8,9,10,.93),rgba(8,9,10,.97)),var(--tex) 0 0/256px 256px,var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.65);max-height:calc(var(--lh) - 16px);overflow-y:auto} #icard .col:last-child{border-color:#000 var(--bronze) var(--bronze) #000} #icard .arrow{align-self:center;color:#eea24a;font-size:18px;text-shadow:0 0 8px #000} #icard .hint{padding:0 2px} #icard > .btns{padding:8px 0 0} #icard .row{align-items:flex-start} /* desktop inventory hugs the left edge; the item cards open into the free space on its right */ /* a smaller figure keeps the panel narrow */ #inv .doll .fig{width:128px!important;height:210px!important} #inv .eq{width:60px;height:60px} #inv .doll{gap:8px;padding-right:18px} #inv .ibody{gap:18px} /* splash: the animated logo instead of the title text */ #loading #splash{display:block;width:min(88vw,calc(var(--lw,100vw)*.88),900px);max-height:62vh;height:auto;object-fit:contain} html.rot #loading #splash{width:min(88vh,900px);max-height:62vw} #loading p{margin-top:4px} /* ===================================================================== ONE LAYOUT FOR EVERY DEVICE (Diablo Immortal): menu + inventory beside the minimap · a game menu of tiles · inventory and skills full screen · the skill arc bottom-right, keys printed in it ===================================================================== */ /* the combat HUD is the touch HUD everywhere; the joystick only appears with touch */ #touch{display:block} body:not(.touch) #stickZone,body:not(.touch) #stick{display:none} #belt,.globe,#xpText{display:none!important} .tbtn kbd{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);padding:0 5px;border-radius:5px;background:#0a0b0c;border:1px solid var(--bronze-lo);font:600 10px/1.35 var(--f-display);color:var(--bone-lo);pointer-events:none;z-index:2} body.touch .tbtn kbd{display:none} body:not(.touch) #skillsT{right:14px;bottom:10px;transform:scale(1.12);transform-origin:right bottom} body:not(.touch) #skillsT .tbtn{cursor:pointer} /* quest tracker: small and tight, under the life bar */ #quest,body.touch #quest{left:calc(16px + var(--sl));top:56px;max-width:240px} #quest .qt,body.touch #quest .qt{font-size:11px;letter-spacing:.18em} #quest .qo,body.touch #quest .qo{margin-top:2px;font-size:14px;line-height:1.25} /* beside the minimap */ #side{position:fixed;z-index:22;top:14px;right:calc(12px + var(--sr));display:flex;flex-direction:column;gap:10px;pointer-events:auto} .sbtn{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;border:2px solid;border-color:#000 var(--bronze) var(--bronze) #000;background:linear-gradient(#4a1812,#2a0c09);box-shadow:0 2px 6px rgba(0,0,0,.6)} .sbtn:hover{border-color:#000 #eea24a #eea24a #000} .sbtn svg{width:24px;height:24px;stroke:var(--bone);fill:none;stroke-width:1.7} .sbtn kbd{position:absolute;left:-6px;bottom:-6px;padding:0 4px;border-radius:4px;background:#0a0b0c;border:1px solid var(--bronze-lo);font:600 9px/1.4 var(--f-display);color:var(--bone-lo)} body.touch .sbtn kbd{display:none} .sbtn .dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;background:#e0301e;border:1px solid #000;transform:rotate(45deg);display:none;box-shadow:0 0 8px rgba(224,48,30,.8)} #side.fresh .sbtn .dot{display:block} #minimapWrap{right:calc(70px + var(--sr))} #zone{right:calc(70px + var(--sr))} body.touch #minimapWrap{right:calc(66px + var(--sr))} body.touch #zone{right:calc(66px + var(--sr))} body.cine #side,body.cine #callout{opacity:0;pointer-events:none} /* "A new skill is available ➤" — points at the menu button */ #callout{position:fixed;z-index:23;top:16px;right:calc(70px + var(--sr));display:none;align-items:center;gap:10px;pointer-events:auto;cursor:pointer;padding:8px 14px 8px 18px;border-radius:8px;border:1px solid #eea24a;background:rgba(12,10,8,.92);box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.6);font:17px var(--f-body);color:var(--bone);animation:callin .35s ease-out} #callout b{width:0;height:0;border-left:13px solid #eea24a;border-top:9px solid transparent;border-bottom:9px solid transparent;animation:nudge 1s ease-in-out infinite} @keyframes nudge{50%{transform:translateX(4px)}} @keyframes callin{from{opacity:0;transform:translateX(12px)}} /* the game menu: tiles left and right, the world in between */ #gmenu{position:fixed;inset:0;z-index:50;display:none;justify-content:space-between;pointer-events:auto;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 34%,rgba(0,0,0,.08) 66%,rgba(0,0,0,.5))} #gmenu.open{display:flex} body.menu #touch,body.menu #quest,body.menu #side,body.menu #callout,body.menu #minimapWrap,body.menu #zone,body.menu #target{visibility:hidden} #gmenu .gside{width:clamp(230px,30%,400px);display:flex;flex-direction:column;gap:12px;padding:calc(14px + var(--st)) 16px 14px;background:linear-gradient(rgba(38,14,11,.94),rgba(24,9,7,.96)),var(--tex) 0 0/256px 256px;border:0 solid var(--bronze-lo);overflow-y:auto} #gmenu .gl{border-right-width:1px;padding-left:calc(16px + var(--sl))} #gmenu .gr{border-left-width:1px;padding-right:calc(16px + var(--sr))} #gmenu .gtop{display:flex;justify-content:flex-end;gap:10px} #gmenu .gbtn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;border:2px solid;border-color:#000 var(--bronze) var(--bronze) #000;background:linear-gradient(#7a2418,#4a130d);color:var(--bone);font:600 20px var(--f-display)} #gmenu .gbtn svg{width:24px;height:24px;stroke:var(--bone);fill:none;stroke-width:1.7} #gmenu .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} #gmenu .tile{position:relative;aspect-ratio:1.3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:10px;border:2px solid;border-color:#000 var(--bronze-lo) var(--bronze-lo) #000;background:radial-gradient(ellipse at 50% 40%,#6a2118,#3a0e0a 75%);color:var(--bone)} #gmenu .tile:hover{border-color:#000 #eea24a #eea24a #000} #gmenu .tile svg{width:34px;height:34px;stroke:#f0e2c0;fill:none;stroke-width:1.5} #gmenu .tile span{font:600 11px var(--f-display);letter-spacing:.16em;text-transform:uppercase} #gmenu .tile .new{position:absolute;top:6px;right:8px;display:none;font:600 10px var(--f-display);letter-spacing:.1em;font-style:normal;color:#eea24a} #gmenu.fresh .tile[data-go="skills"]{border-color:#000 #eea24a #eea24a #000;box-shadow:0 0 14px rgba(238,162,74,.45)} #gmenu.fresh .tile .new{display:block} #gmenu .gl .tile{aspect-ratio:auto;min-height:74px;flex-direction:row;gap:12px} #gmenu .gchar{padding:12px 14px;border-radius:10px;border:1px solid var(--bronze-lo);background:rgba(0,0,0,.3)} #gmenu .gname{font:600 16px var(--f-display);letter-spacing:.12em;color:var(--bone)} #gmenu .glvl{margin-top:2px;font:14px 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #gmenu .gxp{height:5px;margin:8px 0 10px;border-radius:3px;background:#060708;overflow:hidden}#gmenu .gxp div{height:100%;background:var(--bronze)} #gmenu .gquest{font:14px/1.35 var(--f-body);color:var(--bone)}#gmenu .gquest b{display:block;font:600 11px var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#eea24a;margin-bottom:3px} /* skills: full screen — list left, parchment right with the loadout arc in its corner */ #skills.open{display:flex!important;flex-direction:column;position:fixed;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;transform:none!important;border-radius:0!important;padding:0!important} #skills .plate-title{padding:calc(12px + var(--st)) 0 8px!important} #skills .rule,#skills .foot{display:none!important} #skills .sbody{flex:1;min-height:0;display:flex;gap:0!important;padding:0!important} #skills .slist{flex:none!important;width:clamp(250px,34%,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:4px 14px 14px calc(14px + var(--sl));background:rgba(40,14,10,.55);border-right:1px solid var(--bronze-lo)} #skills .slist h3{margin:10px 0 8px 6px;font-size:12px} #skills .slist .sk{position:relative;display:flex!important;align-items:center;gap:10px;width:auto!important;text-align:left;margin:0 0 7px;padding:5px 12px 5px 5px;border-radius:32px 10px 10px 32px;border:1px solid #000;outline:1px solid var(--bronze-lo);background:linear-gradient(90deg,rgba(74,28,20,.95),rgba(34,14,11,.95));cursor:pointer} #skills .slist .sk canvas{width:48px!important;height:48px!important;margin:0!important;flex:none;border-radius:50%!important;border:2px solid var(--bronze-lo);box-shadow:none;outline:none} #skills .slist .sk .tx{min-width:0} #skills .slist .sk .tx b{display:block;font:500 17px/1.15 var(--f-body);color:var(--bone)} #skills .slist .sk .tx small{display:block;font:13px 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #skills .slist .sk .ok{margin-left:auto;font:normal 22px/1 var(--f-body);color:var(--bone)} #skills .slist .sk .new{position:static!important;margin-left:auto;padding:2px 7px;border-radius:6px;background:none;color:#eea24a;font:600 12px var(--f-display);letter-spacing:.14em;text-transform:uppercase} #skills .slist .sk.sel{outline:2px solid #eea24a;box-shadow:0 0 12px rgba(238,162,74,.35)} #skills .slist .sk.fresh{background:linear-gradient(90deg,rgba(110,58,20,.95),rgba(40,18,10,.95))} #skills .slist .sk.locked canvas{filter:grayscale(1) brightness(.4)} #skills .slist .sk.locked .tx b{color:var(--bone-lo)} #skills .spage{flex:1;min-width:0;display:flex;gap:10px;padding:14px 16px 12px 22px;padding-right:calc(16px + var(--sr));color:#2a1d12;background:radial-gradient(ellipse at 70% 30%,rgba(255,255,255,.18),transparent 60%),linear-gradient(rgba(215,198,160,.96),rgba(190,170,128,.96)),var(--tex) 0 0/256px 256px} #skills .spage .sinfo{flex:1!important;min-width:0;max-height:none!important;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;text-align:left;border:none!important;background:none!important} #skills .spage .sinfo .hd{color:#2a1d12!important;border:none!important;padding:4px 0 6px!important;font:600 22px/1.2 var(--f-display)!important;letter-spacing:.08em} #skills .spage .sinfo .meta{padding:0!important;color:#6a5238!important;font-size:14px!important} #skills .spage .sinfo .sep{margin:10px 0!important;background:linear-gradient(90deg,rgba(90,20,16,.5),transparent)!important} #skills .spage .sinfo .ln{padding:0!important;color:#2a1d12!important;font-size:16px!important;line-height:1.45} #skills .spage .sinfo .imp{color:#1d4a6a!important} #skills .spage .howto{margin:14px 0 0;padding:0;background:none;color:var(--blood);font:600 15px var(--f-body)} #skills .spage .choose{margin-top:30%;text-align:center;font:600 15px var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#5a4028} #skills .spage .sload{position:relative;flex:none;width:200px;height:192px;align-self:flex-end;display:block!important;padding:0!important} #skills .spage .sock{position:absolute;border-radius:50%!important;border:2px solid var(--bronze)!important;background:#1a0f0a;box-shadow:0 2px 6px rgba(0,0,0,.45)} #skills .spage .sock canvas{border-radius:50%!important} #skills .spage .sock.primary{border-width:3px!important} #skills .spage .sock em{bottom:-15px;color:#5a4028;font-size:11px} #skills .spage .sock.ok{border-color:#eea24a!important;box-shadow:0 0 14px 2px rgba(238,162,74,.8)} /* inventory: full screen — figure and slots left, bag right */ #inv.open{display:flex!important;flex-direction:column;position:fixed;inset:0;left:0!important;top:0!important;right:0;bottom:0;transform:none!important;border-radius:0!important;padding:0 calc(16px + var(--sr)) 12px calc(16px + var(--sl));--cs:min(64px,calc((var(--lh) - 130px) / 5 - 6px))} #inv.open .plate-title{padding-top:calc(14px + var(--st))} #inv.open .ibody{flex:1;min-height:0;flex-direction:row;align-items:center;justify-content:center;gap:clamp(18px,5vw,90px)} #inv.open .doll{flex-direction:row;padding:0 clamp(18px,4vw,60px) 0 0;border-right:1px solid var(--bronze-lo);border-bottom:none;gap:clamp(8px,2vw,24px);align-self:auto} #inv.open .doll .sec,#inv.open .doll .pri{gap:8px} #inv.open .eq{width:calc(var(--cs) + 8px);height:calc(var(--cs) + 8px)} #inv.open .cell{width:var(--cs);height:var(--cs)} #inv.open .bag{grid-template-columns:repeat(6,var(--cs));gap:6px} #inv.open .doll .fig{height:min(440px,calc(var(--lh) - 120px))!important;width:calc(min(440px,calc(var(--lh) - 120px)) * .62)!important} #inv.open .xclose{top:calc(8px + var(--st));right:calc(12px + var(--sr))} #inv.open .statsbtn{top:calc(10px + var(--st));left:calc(16px + var(--sl))} #qlog .xclose,#skills .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st))} body.talking #touch{visibility:hidden} body:not(.touch) #skills .spage .sload{transform:scale(1.3);transform-origin:right bottom} /* ---------- anthracite, not rust: our own colours on the Diablo Immortal layout ---------- */ :root{--an-0:#101113;--an-1:#17181b;--an-2:#1f2124;--an-3:#2a2c30;--an-4:#383b40;--an-line:#34373c} .sbtn{background:linear-gradient(var(--an-4),var(--an-2))} #gmenu .gside{background:linear-gradient(rgba(31,33,36,.96),rgba(18,19,21,.97)),var(--tex) 0 0/256px 256px;border-color:var(--an-line)} #gmenu .gbtn{background:linear-gradient(var(--an-4),var(--an-2))} #gmenu .tile{background:radial-gradient(ellipse at 50% 35%,#3c3f45,#1c1d20 78%);border-color:#000 var(--an-4) var(--an-4) #000} #gmenu .gchar{background:rgba(0,0,0,.25);border-color:var(--an-line)} /* skills in anthracite: dark list, dark page, bone text */ #skills.open{background:var(--an-1)} #skills .slist{background:linear-gradient(rgba(23,24,27,.97),rgba(16,17,19,.98))!important;border-right-color:var(--an-line)!important} #skills .slist .sk{background:linear-gradient(90deg,#34363b,#202226)!important;outline-color:var(--an-4)!important} #skills .slist .sk.fresh{background:linear-gradient(90deg,#4a4434,#23221e)!important} #skills .slist .sk.sel{outline-color:#eea24a!important} #skills .spage{color:var(--bone);background:radial-gradient(ellipse at 72% 28%,rgba(255,255,255,.05),transparent 60%),linear-gradient(rgba(36,38,42,.97),rgba(22,23,26,.98)),var(--tex) 0 0/256px 256px!important} #skills .spage .sinfo .hd{color:var(--bone)!important} #skills .spage .sinfo .meta{color:var(--bone-lo)!important} #skills .spage .sinfo .sep{background:linear-gradient(90deg,var(--bronze-lo),transparent)!important} #skills .spage .sinfo .ln{color:var(--bone)!important} #skills .spage .sinfo .imp{color:#9fc9e8!important} #skills .spage .howto{color:#eea24a} #skills .spage .choose{color:var(--bone-lo)} #skills .spage .sock{background:var(--an-0)} #skills .spage .sock em{color:var(--bone-lo)} /* inventory, Diablo Immortal composition: header top-left, slots | figure on a plinth | slots, the bag in its own dark field */ #inv.open{background:radial-gradient(ellipse at 34% 58%,rgba(120,124,132,.16),transparent 42%),linear-gradient(var(--an-2),var(--an-0)),var(--tex) 0 0/256px 256px;padding:0!important;--cs:min(66px,calc((var(--lh) - 70px) / 5 - 2px))} #inv.open .plate-title{display:none} #inv .ihead{display:none} #inv.open .ihead{display:block;position:absolute;left:calc(22px + var(--sl));top:calc(12px + var(--st));z-index:2} #inv .ihead b{display:block;font:600 18px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)} #inv .ihead .ilvl{font:14px 'Alegreya SC', var(--f-body);color:var(--bone-lo)} #inv .ihead .ixp{width:130px;height:5px;margin-top:4px;border-radius:3px;background:#060708;overflow:hidden}#inv .ihead .ixp div{height:100%;background:#d08a2a} #inv.open .ibody{height:100%;gap:0;justify-content:space-between;align-items:stretch} #inv.open .doll{flex:1;border:none;padding:0 clamp(12px,3vw,40px) 0 calc(22px + var(--sl));justify-content:space-between;align-items:center} #inv.open .doll .sec{margin-top:40px} #inv.open .eq{width:calc(var(--cs) * 1.18);height:calc(var(--cs) * 1.18);border-radius:6px;border:1px solid var(--an-line)!important;background-color:rgba(10,11,12,.55);box-shadow:inset 0 0 18px rgba(0,0,0,.6)} #inv.open .doll .pri .eq{width:calc(var(--cs) * 1.3);height:calc(var(--cs) * 1.3)} #inv.open .doll .fig{position:relative;height:min(560px,calc(var(--lh) - 70px))!important;width:calc(min(560px,calc(var(--lh) - 70px)) * .6)!important;background:none!important} #inv.open .doll .fig::before{content:"";position:absolute;left:-8%;right:-8%;bottom:15%;height:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(160,165,175,.22),rgba(60,62,68,.25) 50%,transparent 72%);box-shadow:0 0 0 1px rgba(255,255,255,.04)} #inv.open .doll .fig canvas{z-index:1} #inv.open .statsbtn{position:absolute;left:50%!important;top:auto!important;bottom:0;transform:translateX(-50%);z-index:3;padding:7px 18px;border-radius:6px;border:1px solid var(--an-4)!important;background:linear-gradient(var(--an-3),var(--an-1));font:600 12px var(--f-display);letter-spacing:.2em} #inv.open .bagwrap{flex:none;justify-content:center;gap:8px;padding:calc(56px + var(--st)) calc(20px + var(--sr)) 14px 20px;background:linear-gradient(rgba(12,13,15,.94),rgba(8,9,10,.96));border-left:1px solid var(--an-line);box-shadow:-10px 0 30px rgba(0,0,0,.45)} #inv.open .bag{gap:0!important;border:1px solid var(--an-line);background:var(--an-0)} #inv.open .cell{border-radius:0!important;border:1px solid var(--an-line)!important;margin:-.5px;background-color:#131416;box-shadow:none} #inv.open .cell.sel{border-color:#eea24a!important;z-index:1} #inv.open .bagcount{text-align:right;color:var(--bone-lo)} #inv.open .xclose{z-index:4} /* game menu side panels: the forged texture shows through */ #gmenu .gside{background:linear-gradient(rgba(34,36,40,.62),rgba(14,15,17,.78)),var(--tex) 0 0/256px 256px!important;box-shadow:inset 0 0 60px rgba(0,0,0,.6)} /* inventory: figure a third, the bag page two thirds — grid on its left, a fixed column for the item card on its right */ #inv.open{--cw:590px;--cs:min(66px,calc((var(--lh) - 70px) / 5 - 2px),calc((var(--lw) * .6667 - 76px - var(--cw)) / 6))} body.touch #inv.open{--cw:250px} #icard .col{width:280px} body.touch #icard .col{width:250px} #inv.open .doll{flex:0 0 33.34%;min-width:0;box-sizing:border-box} #inv.open .doll .fig{height:auto!important;aspect-ratio:.6;width:min(calc(min(560px,calc(var(--lh) - 70px)) * .6),calc(var(--lw) / 3 - var(--cs) * 2.6 - 56px))!important} #inv.open .bagwrap{flex:1;align-items:flex-start;padding-right:calc(var(--cw) + 36px + var(--sr))!important} #inv.open .bagcount{align-self:stretch;width:calc(var(--cs) * 6)} /* ===================================================================== SIZES: the phone is the reference; the desktop multiplies by --k ===================================================================== */ :root{--k:1} body:not(.touch){--k:1.3} /* menu + bag sit in the minimap's top corners; the minimap is back at the edge */ #minimapWrap{right:18px!important} body.touch #minimapWrap{right:calc(12px + var(--sr))!important} #side{right:18px;top:14px;width:168px;height:0;display:block} body.touch #side{right:calc(12px + var(--sr));width:117.6px} .sbtn{position:absolute;top:-4px;width:calc(32px * var(--k));height:calc(32px * var(--k));border-radius:7px} .sbtn[data-open="menu"]{left:-6px}.sbtn[data-open="inv"]{right:-6px} .sbtn svg{width:calc(18px * var(--k));height:calc(18px * var(--k))} .sbtn .dot{width:9px;height:9px;top:-3px;right:-3px} #zone{right:18px!important;width:168px} body.touch #zone{right:calc(12px + var(--sr))!important;width:138.4px;top:134px} #callout{right:192px;top:10px;padding:5px 10px 5px 12px;gap:8px;font-size:calc(13px * var(--k))} body.touch #callout{right:calc(136px + var(--sr))} #callout b{border-left-width:10px;border-top-width:7px;border-bottom-width:7px} /* close buttons of the full-screen panels: small and square-ish */ #inv .xclose,#skills .xclose,#qlog .xclose{width:calc(28px * var(--k));height:calc(28px * var(--k));border-radius:6px;font-size:calc(15px * var(--k))} /* game menu */ #gmenu .gside{width:clamp(200px,28%,360px);gap:10px;padding-top:calc(10px + var(--st))} #gmenu .gbtn{width:calc(32px * var(--k));height:calc(32px * var(--k));border-radius:7px;font-size:calc(15px * var(--k))} #gmenu .gbtn svg{width:calc(17px * var(--k));height:calc(17px * var(--k))} #gmenu .tiles{gap:8px} #gmenu .tile{aspect-ratio:1.45;gap:5px;border-radius:8px} #gmenu .tile svg{width:calc(22px * var(--k));height:calc(22px * var(--k))} #gmenu .tile span{font-size:calc(9px * var(--k));letter-spacing:.14em} #gmenu .tile .new{font-size:calc(8px * var(--k));top:4px;right:6px} #gmenu .gl .tile{min-height:calc(46px * var(--k));gap:10px} #gmenu .gchar{padding:9px 11px;border-radius:8px} #gmenu .gname{font-size:calc(13px * var(--k))} #gmenu .glvl{font-size:calc(11px * var(--k))} #gmenu .gxp{height:4px;margin:6px 0 8px} #gmenu .gquest{font-size:calc(12px * var(--k))}#gmenu .gquest b{font-size:calc(9px * var(--k))} /* skills */ #skills .plate-title{font-size:calc(11px * var(--k))!important;padding:calc(8px + var(--st)) 0 6px!important} #skills .slist{width:clamp(210px,32%,380px);padding-top:0} #skills .slist h3{font-size:calc(9px * var(--k))!important;margin:8px 0 6px 4px} #skills .slist .sk{gap:8px;margin-bottom:5px;padding:3px 10px 3px 3px} #skills .slist .sk canvas{width:calc(34px * var(--k))!important;height:calc(34px * var(--k))!important} #skills .slist .sk .tx b{font-size:calc(13px * var(--k))} #skills .slist .sk .tx small{font-size:calc(10px * var(--k))} #skills .slist .sk .ok{font-size:calc(15px * var(--k))} #skills .slist .sk .new{font-size:calc(9px * var(--k))} #skills .spage{padding:10px 12px 8px 16px} #skills .spage .sinfo .hd{font-size:calc(15px * var(--k))!important;padding:2px 0 4px!important} #skills .spage .sinfo .meta{font-size:calc(10px * var(--k))!important} #skills .spage .sinfo .sep{margin:7px 0!important} #skills .spage .sinfo .ln{font-size:calc(12px * var(--k))!important;line-height:1.4} #skills .spage .howto{font-size:calc(12px * var(--k));margin-top:10px} #skills .spage .choose{font-size:calc(11px * var(--k))} #skills .spage .sload,body:not(.touch) #skills .spage .sload{transform:scale(calc(.78 * var(--k)));transform-origin:right bottom;margin-left:calc(-200px * (1 - .78 * var(--k)))} #skills .spage .sock em{font-size:10px} /* inventory: figure page 40 %, bag page 60 %; sizes come from InventoryPanel.layout() */ #inv.open .doll{flex:0 0 40%!important;justify-content:center!important;gap:0!important;padding:0 8px 0 calc(14px + var(--sl))!important} #inv.open .doll .sec,#inv.open .doll .pri{position:relative;z-index:2} #inv.open .doll .sec{margin-top:calc(34px * var(--k))} #inv.open .eq,#inv.open .doll .pri .eq{width:var(--eq)!important;height:var(--eq)!important;background-color:rgba(10,11,12,.72)} #inv.open .doll .fig{height:var(--fig-h)!important;width:calc(var(--fig-h) * .6)!important;aspect-ratio:auto;margin:0 -14px;z-index:1} #inv.open .bagwrap{flex:1;padding:calc(40px * var(--k)) calc(var(--card-area) + 38px + var(--sr)) 10px 20px!important} #inv.open .bag{grid-template-columns:repeat(var(--cols,6),var(--cs))!important} #inv.open .cell{width:var(--cs)!important;height:var(--cs)!important} #inv.open .bagcount{width:calc(var(--cs) * var(--cols,6));font-size:calc(11px * var(--k))} #inv .ihead b{font-size:calc(13px * var(--k))}#inv .ihead .ilvl{font-size:calc(11px * var(--k))}#inv .ihead .ixp{width:calc(100px * var(--k));height:4px} #inv.open .ihead{top:calc(9px + var(--st))} #inv.open .statsbtn{padding:5px 12px;font-size:calc(10px * var(--k))} #icard .col,body.touch #icard .col{width:var(--card-w,270px)} body.touch #icard .nm,body.touch #icard .ch{font-size:14px} body.touch #icard .sub,body.touch #icard .bs{font-size:11px} body.touch #icard .ln,body.touch #icard .st,body.touch #icard .cmp,body.touch #icard .ip .ln{font-size:12px} body.touch #icard .hint{font-size:11px} body.touch #icard button{padding:8px 4px;font-size:10px} body.touch #icard .col{padding:10px 11px 9px} body.touch #zone .z{font-size:11px;letter-spacing:.16em}body.touch #zone .s{font-size:12px} /* inventory: no card column any more — the grid fills the bag page; both slot columns on one line */ #inv.open .bagwrap{padding:calc(40px * var(--k)) calc(20px + var(--sr)) 10px 20px!important;align-items:center} #inv.open .doll .sec{margin-top:0!important} #inv.open .doll .fig{align-self:center} /* ===================================================================== ONE TYPE SCALE (taken from the skills panel on a phone; the desktop ×1.3): heading 15 · name 13 · text 12 · small 10–11 ===================================================================== */ .plate-title{font-size:calc(11px * var(--k))!important} #quest .qt,body.touch #quest .qt{font-size:calc(10px * var(--k))!important} #quest .qo,body.touch #quest .qo{font-size:calc(12px * var(--k))!important} #zone .z,body.touch #zone .z{font-size:calc(10px * var(--k))!important;letter-spacing:.16em} #zone .s,body.touch #zone .s{font-size:calc(11px * var(--k))!important} #target .n,body.touch #target .n{font-size:calc(12px * var(--k))!important} .msg,body.touch .msg{font-size:calc(13px * var(--k))!important} .msg.big,body.touch .msg.big{font-size:calc(18px * var(--k))!important;gap:12px} #tip .hd,body.touch #tip .hd{font-size:calc(14px * var(--k))!important;padding:6px 12px 5px} #tip .bs,body.touch #tip .bs{font-size:calc(12px * var(--k))!important} #tip .meta,body.touch #tip .meta{font-size:calc(10px * var(--k))!important;padding:6px 12px 0} #tip .ln,body.touch #tip .ln{font-size:calc(12px * var(--k))!important;padding:0 12px} #tip .fl,body.touch #tip .fl{font-size:calc(11px * var(--k))!important} #death h1{font-size:calc(30px * var(--k))}#death p{font-size:calc(13px * var(--k))} .npc-label span,body.touch .npc-label span{font-size:calc(11px * var(--k))!important} .npc-label.near::after{font-size:calc(10px * var(--k))!important;padding:2px 9px} .bark,body.touch .bark{font-size:calc(12px * var(--k))!important;padding:4px 10px 5px!important;max-width:calc(210px * var(--k))} #dialogue .who,body.touch #dialogue .who{font-size:calc(10px * var(--k))!important;margin-bottom:4px} #dialogue .say,body.touch #dialogue .say{font-size:calc(13px * var(--k))!important;line-height:1.4!important;min-height:2.8em} #dialogue .more{font-size:calc(11px * var(--k))} .loot-label,body.touch .loot-label{font-size:calc(11px * var(--k))!important;padding:1px 7px 2px!important;letter-spacing:.02em} #inv .statspane .ch{font-size:calc(15px * var(--k))}#inv .statspane .sub{font-size:calc(11px * var(--k))} #inv .statspane .st{font-size:calc(12px * var(--k))}#inv .statspane .hint{font-size:calc(11px * var(--k))} #inv .statspane .sp{width:calc(260px * var(--k));padding:14px 16px} #qlog h3{font-size:calc(10px * var(--k))}#qlog .qh{font-size:calc(14px * var(--k))}#qlog .qg{font-size:calc(11px * var(--k))} #qlog p,#qlog li,body.touch #qlog p,body.touch #qlog li{font-size:calc(12px * var(--k))!important} #cmp .ctitle{font-size:calc(11px * var(--k))}#cmp .nm{font-size:calc(14px * var(--k))}#cmp .sub,#cmp .bs{font-size:calc(11px * var(--k))}#cmp .ln{font-size:calc(12px * var(--k))} #cmp button{font-size:calc(10px * var(--k));padding:9px 6px} #icard .nm,#icard .ch,body.touch #icard .nm,body.touch #icard .ch{font-size:calc(14px * var(--k))!important} #icard .sub,#icard .bs,body.touch #icard .sub,body.touch #icard .bs{font-size:calc(11px * var(--k))!important} #icard .ln,#icard .st,#icard .cmp,#icard .ip .ln,body.touch #icard .ln,body.touch #icard .st,body.touch #icard .cmp,body.touch #icard .ip .ln{font-size:calc(12px * var(--k))!important} #icard .hint,#icard .vs,body.touch #icard .hint{font-size:calc(10px * var(--k))!important} #icard button,body.touch #icard button{font-size:calc(10px * var(--k))!important;padding:8px 4px!important} #icard .col,body.touch #icard .col{padding:10px 11px 9px} #page h1{font-size:calc(16px * var(--k))}#page h2{font-size:calc(10px * var(--k))} #page .row>span,#page .opt,body.touch #page .row>span,body.touch #page .opt{font-size:calc(12px * var(--k))!important} #page input{font-size:calc(13px * var(--k))}#page .act{font-size:calc(10px * var(--k))} #ledger td,#ledgerTouch td,body.touch #ledgerTouch{font-size:calc(12px * var(--k))!important} #help .cmd{font-size:calc(11px * var(--k))} #tLvl,body.touch #tLvl{font-size:calc(12px * var(--k))!important} /* phone held upright: an upright turn-your-phone card over the (turned, paused) game */ html.rot #rotate{display:flex;inset:auto;left:0;top:0;width:var(--lh);height:var(--lw);transform-origin:0 0;transform:rotate(-90deg) translateX(-100%);padding:calc(30px + env(safe-area-inset-top,0px)) 30px calc(30px + env(safe-area-inset-bottom,0px))} #rotate p{font-size:15px}#rotate h1{font-size:18px} /* safe areas: only a sliver of the notch margins, so the controls reach into the corners */ :root{--sl:calc(env(safe-area-inset-left,0px) * .3);--sr:calc(env(safe-area-inset-right,0px) * .3);--sb:calc(env(safe-area-inset-bottom,0px) * .4)} /* type scale: a touch larger on phones */ :root{--k:1.15} body:not(.touch){--k:1.3} /* context actions: outer ring beside the attack button — talk, and pick up (yellow, a hand) */ .tact{position:absolute;display:none;align-items:center;justify-content:center;border-radius:50%;pointer-events:auto;touch-action:none;cursor:pointer;border:2px solid var(--bronze);outline:1px solid #000;background:radial-gradient(circle at 50% 40%,#3a3c41,#16171a);box-shadow:0 0 12px rgba(0,0,0,.6);animation:callin .25s ease-out} .tact.on{display:flex} .tact svg{width:48%;height:48%;stroke:#f0e2c0;fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round} .tact.pick{border-color:#f2a040;background:radial-gradient(circle at 50% 40%,#f5ae5a,#b8860b);box-shadow:0 0 16px rgba(242,160,64,.55)} .tact.pick svg{stroke:#2a1d08;stroke-width:1.9} .tact kbd{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:0 5px;border-radius:5px;background:#0a0b0c;border:1px solid var(--bronze-lo);font:600 10px/1.35 var(--f-display);color:var(--bone-lo)} body.touch .tact kbd{display:none} .npc-label.near::after{display:none!important} /* the item the pick-up button means */ .loot-label.focus{outline:2px solid #f2a040!important;outline-offset:2px;box-shadow:0 0 12px rgba(242,160,64,.6)} /* the attack button right down in the corner */ body:not(.touch) #skillsT{right:4px;bottom:2px} #skillsT{right:calc(var(--sr) - 4px);bottom:calc(var(--sb) - 4px)} /* a story hint pointing up at the bag button */ #callout.bag{top:calc(14px + 32px * var(--k) + 14px);right:10px} body.touch #callout.bag{right:calc(6px + var(--sr))} #callout.bag b{position:absolute;top:-10px;right:14px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #eea24a;border-top:0;animation:nudgeup 1s ease-in-out infinite} @keyframes nudgeup{50%{transform:translateY(-3px)}} /* inventory: breathing room top and bottom (bag tabs will live down there) */ #inv.open .bagwrap{padding-top:calc(56px * var(--k))!important;padding-bottom:calc(84px * var(--k))!important} /* Skip: top right, in the letterbox */ #skipBtn{position:fixed;z-index:56;top:calc(6 * var(--vh) - 15px * var(--k));right:calc(16px + var(--sr));display:none;align-items:center;gap:6px;padding:calc(6px * var(--k)) calc(14px * var(--k));border-radius:16px;border:1px solid var(--bronze-lo);background:rgba(20,21,24,.85);color:var(--bone);font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .6s .4s} #skipBtn b{font-size:1.3em;line-height:1;color:#eea24a} #skipBtn:hover{border-color:#eea24a} body.cine #skipBtn{display:flex;opacity:1} /* context actions pulse slowly while there is something to do */ .tact.on{animation:callin .25s ease-out,actpulse 2.2s ease-in-out .25s infinite} @keyframes actpulse{0%,100%{box-shadow:0 0 6px rgba(242,160,64,.35),0 0 0 0 rgba(242,160,64,.0)}50%{box-shadow:0 0 22px rgba(242,160,64,.85),0 0 0 7px rgba(242,160,64,.18)}} .tact.talk.on{border-color:#f2a040} /* a hint anchored to something on screen (the inventory guide) */ #callout.anchor{z-index:60;pointer-events:none} #callout.up b{position:absolute;top:-10px;right:auto;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #eea24a;border-top:0;animation:nudgeup 1s ease-in-out infinite} /* Skip: an icon only, sitting half on the letterbox bar, half in the picture */ #skipBtn{top:calc(12 * var(--vh) - 19px * var(--k));width:calc(38px * var(--k));height:calc(38px * var(--k));padding:0!important;justify-content:center;border-radius:50%;border:1px solid var(--bronze);background:rgba(12,13,15,.9);box-shadow:0 2px 10px rgba(0,0,0,.6)} #skipBtn svg{width:52%;height:52%;fill:#eea24a;stroke:#eea24a;stroke-width:1.2;stroke-linejoin:round} /* one colour for "new": gold, on the menu button and in the menu */ .sbtn .dot{background:#eea24a!important;box-shadow:0 0 8px rgba(238,162,74,.8)!important} /* the loot the pick-up button means: rarity colour as background, dark text */ .loot-label.focus{outline:none!important;box-shadow:0 0 14px var(--rc,#eea24a)!important;background:var(--rc,#eea24a)!important;color:#141009!important;border-color:var(--rc,#eea24a)!important;animation:lootpulse 1.8s ease-in-out infinite} @keyframes lootpulse{50%{box-shadow:0 0 22px var(--rc,#eea24a),0 0 0 3px rgba(0,0,0,.4)}} /* rarity at a glance: border in the rarity colour, a hint of it behind the item — worn slots and bag alike */ #inv.open .r-normal{border-color:#d9cdb2!important;background-color:rgba(217,205,178,.08)!important;box-shadow:inset 0 0 14px rgba(217,205,178,.08)!important} #inv.open .r-magic{border-color:#9fb0b4!important;background-color:rgba(159,176,180,.12)!important;box-shadow:inset 0 0 14px rgba(159,176,180,.14)!important} #inv.open .r-rare{border-color:#d6b058!important;background-color:rgba(214,176,88,.13)!important;box-shadow:inset 0 0 14px rgba(214,176,88,.16)!important} #inv.open .r-unique{border-color:#b8612a!important;background-color:rgba(184,97,42,.16)!important;box-shadow:inset 0 0 16px rgba(184,97,42,.22)!important} #inv.open .eq.sel,#inv.open .cell.sel{border-color:#ffdcb4!important;box-shadow:0 0 12px rgba(238,162,74,.7),inset 0 0 12px rgba(238,162,74,.2)!important} #inv.open .eq.fit{border-color:#eea24a!important} /* splash: tap to play */ #loading p.tap{color:var(--bone);font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;animation:tapblink 1.8s ease-in-out infinite} #loading{cursor:pointer} @keyframes tapblink{50%{opacity:.35}} /* turn-your-phone card: the logo, and the call in red */ #rotate .logo{width:min(78%,420px);height:auto;margin-bottom:22px} #rotate h1{color:#d0382a!important;margin-top:26px} #rotate{background:#000!important} #loading #splash{aspect-ratio:2/1;background:#000} body.menu #callout.anchor{visibility:visible} /* rarity, loud and clear: Diablo colours, 2 px frame in the colour, a clear wash of it behind the item — bag and worn slots. Cells no longer overlap (that is what cut their bottom edges off): a small gap, each cell its own full frame */ #inv.open .bag{gap:4px!important;border:none!important;background:none!important} #inv.open .cell{margin:0!important;border:2px solid var(--an-line)!important;border-radius:4px!important;background-color:#121315!important;box-sizing:border-box} #inv.open .eq{border:2px solid var(--an-line)!important;box-sizing:border-box} #inv.open .r-normal{border-color:#e4e0d6!important;background-color:rgba(228,224,214,.10)!important;box-shadow:inset 0 0 14px rgba(228,224,214,.10)!important} #inv.open .r-magic{border-color:#5b8dff!important;background-color:rgba(91,141,255,.22)!important;box-shadow:inset 0 0 16px rgba(91,141,255,.30)!important} #inv.open .r-rare{border-color:#f5cf3d!important;background-color:rgba(245,207,61,.20)!important;box-shadow:inset 0 0 16px rgba(245,207,61,.28)!important} #inv.open .r-unique{border-color:#ff7d1f!important;background-color:rgba(255,125,31,.24)!important;box-shadow:inset 0 0 18px rgba(255,125,31,.34)!important} #inv.open .eq.sel,#inv.open .cell.sel{outline:2px solid #fff;outline-offset:2px} #inv.open .eq.fit{border-color:#ffdcb4!important;box-shadow:0 0 16px rgba(255,243,196,.55)!important} .loot-label.unique{outline:none} /* Skip: square-ish like every other button */ #skipBtn{border-radius:7px!important} #inv.open .bagcount{width:calc(var(--cs) * var(--cols,6) + 4px * (var(--cols,6) - 1))} /* ===================================================================== HINT CALLOUT — one shape: a dark anthracite plate with a gold rim, and the gold pointer grown out of that rim (flush, same colour), the whole thing nudging toward what it points at ===================================================================== */ #callout{gap:9px!important;padding:calc(7px * var(--k)) calc(13px * var(--k)) calc(7px * var(--k)) calc(11px * var(--k))!important;border-radius:7px!important;border:1.5px solid #eea24a!important; background:linear-gradient(180deg,#26282c,#17181b)!important;box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 16px rgba(238,162,74,.22),inset 0 1px 0 rgba(255,255,255,.06)!important; font:500 calc(13px * var(--k))/1.25 var(--f-body)!important;color:#f0e6cf!important;letter-spacing:.01em;animation:callin .3s ease-out,nudgeR 1.4s ease-in-out .3s infinite!important} #callout span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 0;background:#eea24a;transform:rotate(45deg);box-shadow:0 0 6px rgba(238,162,74,.8)} /* pointer to the right (default): flush against the right rim, centred */ #callout b{position:absolute!important;right:-11px!important;left:auto!important;top:50%!important;margin-top:-9px;width:0;height:0; border-left:11px solid #eea24a!important;border-top:9px solid transparent!important;border-bottom:9px solid transparent!important;border-right:0!important;animation:none!important;filter:drop-shadow(2px 0 4px rgba(238,162,74,.35))} #callout b::after{content:"";position:absolute;left:-13px;top:-6px;border-left:8px solid #1f2124;border-top:6px solid transparent;border-bottom:6px solid transparent} /* pointer up (hint below its target) */ #callout.up,#callout.bag{animation:callin .3s ease-out,nudgeU 1.4s ease-in-out .3s infinite!important} #callout.up b,#callout.bag b{top:-10px!important;margin-top:0;margin-left:0;right:auto!important;border-bottom:9px solid #eea24a!important;border-left:8px solid transparent!important;border-right:8px solid transparent!important;border-top:0!important;filter:drop-shadow(0 -2px 4px rgba(238,162,74,.35))} #callout.bag b{left:auto!important;right:14px!important} #callout.up b::after,#callout.bag b::after{left:-5px;top:3px;border-bottom:8px solid #25272b;border-left:5px solid transparent;border-right:5px solid transparent;border-top:0} @keyframes nudgeR{50%{transform:translateX(-4px)}} @keyframes nudgeU{50%{transform:translateY(4px)}} /* splash: the logo fades in; a quiet progress line; the Play button only once everything is loaded */ #loading #splash{animation:logoin 1.8s ease-out both} @keyframes logoin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} #loading p{opacity:.55;font-size:calc(10px * var(--k))!important;letter-spacing:.2em} #playBtn{margin-top:calc(14px * var(--k));padding:calc(9px * var(--k)) calc(34px * var(--k));border-radius:7px;border:1.5px solid #eea24a;background:linear-gradient(180deg,#2a2c30,#17181b);color:#f0e6cf; font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.34em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 18px rgba(238,162,74,.25);animation:playin .8s ease-out both,playpulse 2.4s ease-in-out .8s infinite} #playBtn:hover{background:linear-gradient(180deg,#34363b,#1e1f23)} @keyframes playin{from{opacity:0;transform:translateY(6px)}} @keyframes playpulse{50%{box-shadow:0 0 28px rgba(238,162,74,.5)}} /* iOS draws its own big ▶ over a video it may not autoplay (low-power mode): never on the logo */ #splash::-webkit-media-controls,#splash::-webkit-media-controls-start-playback-button,#splash::-webkit-media-controls-overlay-play-button,#splash::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0!important} #splash{pointer-events:none} /* HINT CALLOUT, take three — plain and confident: a flat dark plate with a thin gold rim, no glow, no bullet; the pointer is a big solid gold wedge fused to the rim, so the eye goes straight to it */ #callout{border:1px solid #eea24a!important;border-radius:4px!important;background:#141518!important;box-shadow:0 4px 12px rgba(0,0,0,.5)!important; padding:calc(6px * var(--k)) calc(12px * var(--k))!important;font:500 calc(13px * var(--k))/1.25 var(--f-body)!important;color:#f2ead6!important} #callout span::before{display:none!important} #callout b{right:-15px!important;margin-top:-11px!important;border-left:15px solid #eea24a!important;border-top:11px solid transparent!important;border-bottom:11px solid transparent!important;filter:none!important} #callout b::after{display:none!important} #callout.up b,#callout.bag b{top:-14px!important;margin-top:0!important;border-bottom:14px solid #eea24a!important;border-left:11px solid transparent!important;border-right:11px solid transparent!important;border-top:0!important} @keyframes nudgeR{50%{transform:translateX(-5px)}} @keyframes nudgeU{50%{transform:translateY(5px)}} /* Skip: small and quiet until touched */ #skipBtn{width:calc(28px * var(--k))!important;height:calc(28px * var(--k))!important;top:calc(12 * var(--vh) - 14px * var(--k))!important;border:1px solid rgba(138,106,58,.5)!important;background:rgba(10,11,12,.55)!important;box-shadow:none!important;opacity:.55!important} #skipBtn:hover,#skipBtn:active{opacity:1!important} #skipBtn svg{fill:var(--bone)!important;stroke:var(--bone)!important;width:46%!important;height:46%!important} /* HINT = A STICKER: a square post-it, slightly askew, dark ink on pale paper, the arrow cut from the same paper */ #callout{border:none!important;border-radius:0!important;background:#f0d983!important;color:#2b2112!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),1px 2px 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.4)!important; font:600 calc(13px * var(--k))/1.25 var(--f-body)!important;padding:calc(7px * var(--k)) calc(13px * var(--k))!important; animation:callin .3s ease-out,stickR 1.4s ease-in-out .3s infinite!important} #callout b{right:-14px!important;margin-top:-11px!important;border-left:14px solid #f0d983!important;border-top:11px solid transparent!important;border-bottom:11px solid transparent!important;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.15))!important} #callout.up,#callout.bag{animation:callin .3s ease-out,stickU 1.4s ease-in-out .3s infinite!important} #callout.up b,#callout.bag b{top:-13px!important;border-bottom:13px solid #f0d983!important;border-left:11px solid transparent!important;border-right:11px solid transparent!important;border-top:0!important;filter:none!important} @keyframes stickR{0%,100%{transform:rotate(-1.2deg)}50%{transform:translateX(-5px) rotate(-1.2deg)}} @keyframes stickU{0%,100%{transform:rotate(1deg)}50%{transform:translateY(5px) rotate(1deg)}} /* the sticker's paper: a fine fibrous grain over the yellow, a touch darker at the edges; smaller type */ #callout{background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.12),transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E"), linear-gradient(180deg,#f3de8c,#ead07a)!important; font-size:calc(11px * var(--k))!important;padding:calc(6px * var(--k)) calc(11px * var(--k))!important} #callout b{border-left-color:#eed37f!important} #callout.up b,#callout.bag b{border-bottom-color:#f3de8c!important} /* dialogue: advance = a square gold button with a drawn chevron (never a text ▶ — iOS turns those into blue emoji) */ #dialogue .more{right:12px!important;bottom:10px!important;width:calc(24px * var(--k));height:calc(24px * var(--k));display:flex;align-items:center;justify-content:center;background:#eea24a;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:morepulse 1.4s ease-in-out infinite!important;font-size:0!important} #dialogue .more svg{width:70%;height:70%;fill:none;stroke:#1a1409;stroke-width:3;stroke-linecap:square} @keyframes morepulse{50%{transform:translateX(3px)}} /* compare arrow: a drawn gold chevron too */ #icard .arrow i,#cmp .arrow i{display:block;width:0;height:0;border-left:9px solid #eea24a;border-top:7px solid transparent;border-bottom:7px solid transparent} /* LEVEL UP banner: big, gold, over the world for two seconds */ #lvlup{position:fixed;left:0;right:0;top:22%;z-index:40;display:none;flex-direction:column;align-items:center;pointer-events:none;text-shadow:0 2px 12px #000,0 0 30px rgba(238,162,74,.5)} #lvlup.on{display:flex;animation:lvlin 2.4s ease-out forwards} #lvlup span{font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.6em;text-transform:uppercase;color:#f6cf9c} #lvlup b{margin-top:2px;font:700 calc(46px * var(--k))/1 var(--f-display);letter-spacing:.08em;color:#eea24a} @keyframes lvlin{0%{opacity:0;transform:scale(1.35)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}} /* frozen world (equipping the first skill): a still, dimmed veil under the UI */ #freezeVeil{position:fixed;inset:0;z-index:19;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(ellipse at center,rgba(0,0,0,.05) 30%,rgba(0,0,0,.5));backdrop-filter:saturate(.45)} body.frozen #freezeVeil{opacity:1} /* skills page: the sorceress as a pencil sketch on the right, as in Diablo Immortal — screened onto the dark page, fading out toward the text */ #skills .spage{position:relative;overflow:hidden} #skills .spage::before{content:"";position:absolute;right:0;top:0;bottom:0;width:min(62%,calc((var(--lh) - 40px) * .667));background:url(../assets/ui/sorceress-sketch.webp) right center/cover no-repeat; opacity:.42;mix-blend-mode:screen;pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent,#000 22%);mask-composite:intersect} #skills .spage .sinfo,#skills .spage .sload{position:relative;z-index:1} /* skills radial: room to breathe (sockets 98 px from the primary, labels clear of each other) */ #skills .spage .sload,body:not(.touch) #skills .spage .sload{width:236px!important;height:214px!important;margin-left:calc(-236px * (1 - .78 * var(--k)))!important} #skills .spage .sock em{bottom:-16px;white-space:nowrap} #skills .spage .sock.locked{opacity:.8!important;background:rgba(10,11,12,.85)!important;border-color:rgba(138,106,58,.55)!important}#skills .spage .sock.locked em{color:var(--bone-lo)!important;font-size:calc(10px * var(--k))} /* item panels take the card's width (a fixed 280 px overflowed the 250 px phone card and showed a scrollbar) */ #icard .col .ip{width:auto} /* the attack button (and its arc with it) a little clear of the bottom edge; the right edge stays */ #skillsT{bottom:calc(var(--sb) + 10px)} body:not(.touch) #skillsT{bottom:14px} /* ===================================================================== DESKTOP SCALE: --k grows with the window (--kd from view.js, 1.3 … 2.1); the fixed-size HUD pieces follow through --hs = --k / 1.3 (1 on phones) ===================================================================== */ :root{--hs:1} body:not(.touch){--k:var(--kd,1.3);--hs:calc(var(--kd,1.3) / 1.3)} /* life bar + quest + feed, top left */ body:not(.touch) #tBars{width:calc(210px * var(--hs))} body:not(.touch) #tLife{height:calc(12px * var(--hs))} body:not(.touch) #tLvl{width:calc(26px * var(--hs))} body:not(.touch) #tXp{margin-left:calc(34px * var(--hs));margin-top:calc(8px * var(--hs))} body:not(.touch) #quest{top:calc(56px * var(--hs))} body:not(.touch) #feed{top:calc(140px * var(--hs))} body:not(.touch) .feedline{font-size:calc(11.5px * var(--k))} /* minimap cluster, top right: the map scales (JS draws it at that size), menu/bag buttons already follow --k */ body:not(.touch) #minimapWrap{transform:scale(var(--hs));transform-origin:right top} body:not(.touch) #side{width:calc(168px * var(--hs))} body:not(.touch) #zone{top:calc(14px + 172px * var(--hs));width:calc(168px * var(--hs))} body:not(.touch) #callout:not(.anchor):not(.bag){right:calc(24px + 168px * var(--hs))} /* target plate and the skill arc */ body:not(.touch) #target{width:calc(340px * var(--hs))} body:not(.touch) #skillsT{transform:scale(calc(1.12 * var(--hs)))} body:not(.touch) #skillsT{bottom:calc(14px * var(--hs))} /* ===================================================================== START SCREEN (Kharos Unbound): the key art fills the screen, slowly drifting closer; the logo (transparent) floats in the dark sky above the heroes, loading line and Play at the foot ===================================================================== */ #loading{background:#000!important;justify-content:flex-start!important;overflow:hidden} #loading::before{content:"";position:absolute;inset:-3%;background:url(../assets/ui/keyart.webp) center 38%/cover no-repeat;animation:keyart 30s ease-in-out infinite alternate,keyin 2.2s ease-out both;z-index:0} #loading::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 75% 70% at 50% 40%,transparent 40%,rgba(0,0,0,.75)),linear-gradient(rgba(0,0,0,.55),transparent 38%,transparent 62%,rgba(0,0,0,.85))} @keyframes keyart{from{transform:scale(1)}to{transform:scale(1.08) translateY(-1%)}} @keyframes keyin{from{opacity:0}} #loading>*{position:relative;z-index:1} #loading{justify-content:flex-end!important} #loading::before{background-position:center 18%!important} #loading::after{background:radial-gradient(ellipse 80% 75% at 50% 35%,transparent 45%,rgba(0,0,0,.7)),linear-gradient(rgba(0,0,0,.35),transparent 25%,transparent 45%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.92))!important} /* the logo sits low, over the dark rock pile: the heroes' faces stay free */ #loading #splash{width:min(52vw,calc(var(--lw,100vw) * .52),760px)!important;max-height:38vh!important;aspect-ratio:2/1;background:none!important;margin:0!important;filter:drop-shadow(0 6px 18px rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(0,0,0,.7))} html.rot #loading #splash{width:min(52vh,760px)!important;max-height:38vw!important} #loading #loadText,#loading #playBtn{text-shadow:0 1px 3px #000} #loading #loadText{margin:calc(4px * var(--k)) 0 calc(17vh + 12px + var(--sb))!important} #loading #playBtn{margin:calc(6px * var(--k)) 0 calc(17vh + var(--sb))!important} /* turn-your-phone card: the logo has no background of its own now */ #rotate .logo{filter:drop-shadow(0 4px 14px rgba(0,0,0,.9))} /* ===================================================================== PANEL ENTRANCES: nothing just appears. Side panels slide in, rows and tiles follow one after another, title flourishes draw outward, sockets pop. The staggered parts run only under .opening (UI.animIn), so a re-render of an open panel never replays them. ===================================================================== */ :root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-back:cubic-bezier(.3,1.45,.5,1)} @keyframes pFade{from{opacity:0}} @keyframes pRise{from{opacity:0;transform:translateY(14px)}} @keyframes pFromL{from{opacity:0;transform:translateX(-46px)}} @keyframes pFromR{from{opacity:0;transform:translateX(46px)}} @keyframes pPop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}} @keyframes pTile{from{opacity:0;transform:translateY(10px) scale(.94)}} @keyframes pDrawL{from{opacity:0;transform:scaleX(0)}} @keyframes pTitle{from{opacity:0;letter-spacing:.8em}} @keyframes pSketch{from{opacity:0;transform:translateX(34px)}} @keyframes pSweep{from{background-position:-160% 0}to{background-position:260% 0}} /* titles: the letters settle, the flourishes draw out from the title */ .opening .plate-title{animation:pTitle .7s var(--ease-out) both} .opening .plate-title::before{transform-origin:right center;animation:pDrawL .6s var(--ease-out) .18s both} .opening .plate-title::after{transform-origin:left center;animation:pDrawL .6s var(--ease-out) .18s both} /* game menu: the veil darkens, both side leaves slide in from their edges, the tiles follow */ #gmenu.opening{animation:pFade .3s ease-out both} #gmenu.opening .gl{animation:pFromL .42s var(--ease-out) both} #gmenu.opening .gr{animation:pFromR .42s var(--ease-out) both} #gmenu.opening .gchar{animation:pRise .45s var(--ease-out) .14s both} #gmenu.opening .gl .tile{animation:pRise .45s var(--ease-out) .22s both} #gmenu.opening .gtop{animation:pFade .4s ease-out .12s both} #gmenu.opening .tiles .tile{animation:pTile .42s var(--ease-back) both} #gmenu.opening .tiles .tile:nth-child(1){animation-delay:.16s}#gmenu.opening .tiles .tile:nth-child(2){animation-delay:.22s} #gmenu.opening .tiles .tile:nth-child(3){animation-delay:.28s}#gmenu.opening .tiles .tile:nth-child(4){animation-delay:.34s} /* a glint runs over each tile once as it lands */ #gmenu .tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,214,160,.22) 50%,transparent 62%) 0 0/250% 100% no-repeat} #gmenu.opening .tile::after{opacity:1;animation:pSweep .9s ease-out .38s both} /* skills: the torn leaf slides in, its rows follow; the page and the sketch fade up; the sockets pop round the arc */ #skills.opening{animation:pFade .25s ease-out both} #skills.opening .slist{animation:pFromL .45s var(--ease-out) both} #skills.opening .slist h3{animation:pFade .4s ease-out .15s both} #skills.opening .slist .sk{animation:pFromL .42s var(--ease-out) both;animation-delay:calc(.12s + var(--i,0) * 45ms)} #skills.opening .spage{animation:pFade .5s ease-out .08s both} #skills.opening .spage::before{animation:pSketch 1.1s var(--ease-out) .15s both} #skills.opening .spage .sinfo{animation:pRise .5s var(--ease-out) .3s both} #skills.opening .spage .sload{animation:pFade .5s ease-out .25s both} #skills.opening .spage .sock{animation:pPop .42s var(--ease-back) both} #skills.opening .spage .sock:nth-child(1){animation-delay:.32s}#skills.opening .spage .sock:nth-child(2){animation-delay:.42s} #skills.opening .spage .sock:nth-child(3){animation-delay:.48s}#skills.opening .spage .sock:nth-child(4){animation-delay:.54s}#skills.opening .spage .sock:nth-child(5){animation-delay:.6s} /* inventory: the figure's page from the left, the bag page from the right, the gear slots pop, the bag fills cell by cell */ #inv.opening{animation:pFade .25s ease-out both} #inv.opening .ihead{animation:pRise .45s var(--ease-out) .1s both} #inv.opening .doll{animation:pFromL .45s var(--ease-out) both} #inv.opening .doll .fig{animation:pRise .6s var(--ease-out) .12s both} #inv.opening .doll .eq{animation:pPop .4s var(--ease-back) both} #inv.opening .doll .sec .eq:nth-child(1),#inv.opening .doll .pri .eq:nth-child(1){animation-delay:.18s} #inv.opening .doll .sec .eq:nth-child(2),#inv.opening .doll .pri .eq:nth-child(2){animation-delay:.25s} #inv.opening .doll .sec .eq:nth-child(3),#inv.opening .doll .pri .eq:nth-child(3){animation-delay:.32s} #inv.opening .bagwrap{animation:pFromR .45s var(--ease-out) both} #inv.opening .cell{animation:pFade .3s ease-out both;animation-delay:calc(.15s + var(--i,0) * 14ms)} #inv.opening .statsbtn{animation:pFade .4s ease-out .4s both} /* quest log and settings: rise into place, the entries after */ #qlog.opening{animation:pFade .25s ease-out both} #qlog.opening .qbody{animation:pRise .45s var(--ease-out) .08s both} #qlog.opening .q{animation:pRise .45s var(--ease-out) both} #qlog.opening .q:nth-child(2){animation-delay:.14s}#qlog.opening .q:nth-child(3){animation-delay:.2s}#qlog.opening .q:nth-child(4){animation-delay:.26s}#qlog.opening .q:nth-child(5){animation-delay:.32s} #help.opening{animation:pFade .3s ease-out both} /* small panels: dialogue rises from the bottom, cards slide out of the item, the stats sheet and compare pop */ @keyframes dlgIn{from{opacity:0;transform:translate(-50%,18px)}} #dialogue.on{animation:dlgIn .38s var(--ease-out) both} @keyframes cardIn{from{opacity:0;transform:translateX(-10px)}} #icard.on{animation:cardIn .22s var(--ease-out) both} #icard.on .col + .col{animation:pFade .3s ease-out .08s both} #inv .statspane.on{animation:pFade .2s ease-out both} #inv .statspane.on .sp,#cmp.on .col{animation:pTile .32s var(--ease-back) both} #cmp.on{animation:pFade .2s ease-out both} #cmp.on .col:last-child{animation-delay:.08s} @media (prefers-reduced-motion:reduce){.opening *,.opening,.opening *::before,.opening *::after,#dialogue.on,#icard.on,#cmp.on,#cmp.on *{animation-duration:.01s!important;animation-delay:0s!important}} /* ---------- quest update: the tracker top left calls for attention for a few seconds ---------- a "New quest" / "Quest updated" flag slides in, the leaf swells and glows orange-gold, a light runs across it, the diamond spins; it waits until no scene or dialogue hides the HUD (Story.update) */ #quest .qt,#quest .qo,#quest .qf{position:relative;z-index:1} #quest .qf{height:0;overflow:hidden;opacity:0;font:600 calc(9px * var(--k))/1.4 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#ffdcb4;text-shadow:0 0 8px rgba(238,162,74,.9),0 1px 2px #000} #quest::before,#quest::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0} #quest::before{background:linear-gradient(90deg,rgba(238,162,74,.5),rgba(238,162,74,.18) 70%,transparent)} #quest::after{background:linear-gradient(105deg,transparent 35%,rgba(255,226,190,.55) 50%,transparent 65%) 0 0/260% 100% no-repeat} #quest.pulse{animation:qswell 3.4s var(--ease-out,ease-out) both;transform-origin:left top} #quest.pulse::before{animation:qglow 3.4s ease-out both} #quest.pulse::after{animation:qsweep 1.1s ease-out .25s both} #quest.pulse .qf{animation:qflag 3.4s var(--ease-out,ease-out) both} #quest.pulse .qt::before{animation:qspin 1s var(--ease-out,ease-out) .1s both} #quest.pulse .qo{animation:qpulse 2.4s ease-out} @keyframes qswell{0%{transform:scale(1)}12%{transform:scale(1.12)}70%{transform:scale(1.06)}100%{transform:scale(1)}} @keyframes qglow{0%{opacity:0}10%{opacity:1}65%{opacity:.7}100%{opacity:0}} @keyframes qsweep{0%{opacity:1;background-position:-160% 0}100%{opacity:1;background-position:260% 0}} @keyframes qflag{0%{height:0;opacity:0}10%,78%{height:1.4em;opacity:1}100%{height:0;opacity:0}} @keyframes qspin{from{transform:rotate(45deg) scale(2);box-shadow:0 0 12px #eea24a}to{transform:rotate(405deg) scale(1)}} @keyframes qpulse{0%{color:#ffdcb4;text-shadow:0 0 12px #eea24a,0 1px 2px #000}100%{}} /* ===================================================================== SETTINGS: full screen like the skills screen — a torn leaf on the left with the settings as plates, the page on the right with the controls ===================================================================== */ #help{background:var(--an-1)!important;align-items:stretch!important;justify-content:flex-start!important;flex-direction:column!important;padding:0;z-index:61} #help .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} #help .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st));width:calc(28px * var(--k));height:calc(28px * var(--k));font-size:calc(15px * var(--k))} #help .hbody{flex:1;min-height:0;display:flex} /* the leaf: same torn edge and frayed rim as the skill list */ #help .hlist{position:relative;z-index:2;flex:none;width:clamp(270px,40%,460px);margin-right:-16px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y; padding:0 26px 26px calc(14px + var(--sl)); background:linear-gradient(90deg,transparent calc(100% - 16px),rgba(217,205,178,.05) calc(100% - 11px),rgba(217,205,178,.2)),linear-gradient(0deg,rgba(217,205,178,.18),rgba(217,205,178,.04) 10px,transparent 15px),linear-gradient(90deg,#26282c,#202226); -webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x; mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x} #help h3{margin:10px 0 9px 4px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)} #help h3::after{content:"";display:block;height:calc(9px * var(--k));margin-top:3px;background:var(--o-rule) left center/100% 100% no-repeat;opacity:.9} /* a setting: a plate pointed at both ends, label left, choice right */ #help .hrow{position:relative;display:flex;align-items:center;gap:calc(8px * var(--k));margin:0 0 6px;padding:calc(6px * var(--k)) 22px calc(6px * var(--k)) 16px;min-height:calc(38px * var(--k)); background:#4a3a22;clip-path:polygon(11px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,11px 100%,0 50%)} #help .hrow::before{content:"";position:absolute;inset:1.5px;z-index:-1;clip-path:polygon(10.4px 0,calc(100% - 12.4px) 0,100% 50%,calc(100% - 12.4px) 100%,10.4px 100%,0 50%);background:linear-gradient(90deg,#34363b,#202226 70%,#1a1b1e)} #help .hrow>span{flex:none;width:calc(66px * var(--k));font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.04em;color:var(--bone)} #help .seg{display:flex;flex-wrap:wrap;gap:4px} #help .opt{padding:calc(4px * var(--k)) calc(9px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;cursor:pointer; font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo);transition:color .2s,filter .2s} #help .opt:hover{color:var(--bone)} #help .opt.on{border-image-source:var(--o-plate-gold);color:#ffdcb4;filter:drop-shadow(0 0 6px rgba(238,162,74,.35))} #help .tog{margin-left:auto;min-width:calc(78px * var(--k))} #help .seedrow input{flex:1;min-width:0;padding:calc(5px * var(--k)) 8px;border:1px solid var(--bronze-lo);background:#0c0d0f;color:var(--bone);font:calc(12px * var(--k)) var(--f-body);outline:none;user-select:text;-webkit-user-select:text} #help .seedrow input:focus{border-color:#eea24a} #help .act{border-image-source:var(--o-fire);color:#241304} #help .hnote{margin:2px 6px 0;font:italic calc(11px * var(--k))/1.35 var(--f-body);color:var(--bone-lo)} /* the page: corner filigree, the key art screened in faintly, the controls as an engraved ledger */ #help .hpage{position:relative;flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:4px calc(20px + var(--sr)) 20px 38px; box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8); background:var(--o-c-br) right 6px bottom 6px/40px 40px no-repeat,var(--o-c-bl) left 22px bottom 6px/40px 40px no-repeat,var(--o-c-tl) left 22px top 6px/40px 40px no-repeat, linear-gradient(90deg,rgba(22,23,26,.99) 35%,rgba(22,23,26,.86)),url(../assets/ui/keyart.webp) right center/cover no-repeat,var(--an-2)} #help .hpage table{width:100%;border-collapse:collapse} #help .hpage td{padding:calc(5px * var(--k)) 0;vertical-align:baseline;border-bottom:1px solid rgba(74,58,34,.55)} #help .hpage td:first-child{width:36%;padding-right:12px;font:600 calc(9.5px * var(--k)) var(--f-display)!important;letter-spacing:.12em;text-transform:uppercase;color:#eea24a!important;white-space:normal} #help .hpage td:last-child{font:calc(12px * var(--k))/1.35 var(--f-body)!important;font-style:normal!important;color:var(--bone)!important} #help .hpage tr:last-child td{border-bottom:0} /* entrance */ #help.opening .hlist{animation:pFromL .45s var(--ease-out) both} #help.opening .hlist>*{animation:pFromL .4s var(--ease-out) both} #help.opening .hpage{animation:pFade .5s ease-out .08s both} #help.opening .hpage h3{animation:pFade .4s ease-out .2s both} #help.opening .hpage tr{animation:pRise .4s var(--ease-out) both} #help.opening .hlist>:nth-child(1){animation-delay:0.15s}#help.opening .hlist>:nth-child(2){animation-delay:0.20s}#help.opening .hlist>:nth-child(3){animation-delay:0.25s}#help.opening .hlist>:nth-child(4){animation-delay:0.30s}#help.opening .hlist>:nth-child(5){animation-delay:0.35s}#help.opening .hlist>:nth-child(6){animation-delay:0.40s}#help.opening .hlist>:nth-child(7){animation-delay:0.45s}#help.opening .hlist>:nth-child(8){animation-delay:0.50s}#help.opening .hlist>:nth-child(9){animation-delay:0.55s}#help.opening .hpage tr:nth-child(1){animation-delay:0.285s}#help.opening .hpage tr:nth-child(2){animation-delay:0.320s}#help.opening .hpage tr:nth-child(3){animation-delay:0.355s}#help.opening .hpage tr:nth-child(4){animation-delay:0.390s}#help.opening .hpage tr:nth-child(5){animation-delay:0.425s}#help.opening .hpage tr:nth-child(6){animation-delay:0.460s}#help.opening .hpage tr:nth-child(7){animation-delay:0.495s}#help.opening .hpage tr:nth-child(8){animation-delay:0.530s}#help.opening .hpage tr:nth-child(9){animation-delay:0.565s}#help.opening .hpage tr:nth-child(10){animation-delay:0.600s}#help.opening .hpage tr:nth-child(11){animation-delay:0.635s} #help .hpage{padding-top:calc(16px + var(--st))} #help .hpage>h3{margin-left:14px} /* game menu: the two side leaves come all the way in from off-screen, the world stays visible between them */ @keyframes pSlideL{from{transform:translateX(-102%)}} @keyframes pSlideR{from{transform:translateX(102%)}} #gmenu.opening{animation:pFade .35s ease-out both} #gmenu.opening .gl{animation:pSlideL .5s var(--ease-out) both} #gmenu.opening .gr{animation:pSlideR .5s var(--ease-out) both} #gmenu.opening .gchar{animation-delay:.3s}#gmenu.opening .gl .tile{animation-delay:.38s}#gmenu.opening .gtop{animation-delay:.3s} #gmenu.opening .tiles .tile:nth-child(1){animation-delay:.32s}#gmenu.opening .tiles .tile:nth-child(2){animation-delay:.38s} #gmenu.opening .tiles .tile:nth-child(3){animation-delay:.44s}#gmenu.opening .tiles .tile:nth-child(4){animation-delay:.5s} #gmenu.opening .tile::after{animation-delay:.55s} #help .hpage{padding-bottom:44px} /* no double-tap zoom anywhere (iOS decides it per element): manipulation keeps taps and scrolling, drops the zoom; the controls that say touch-action:none and the scroll lists (pan-y) keep their own */ *{touch-action:manipulation} /* ===================================================================== ITEM CARD + COMPARE: the stats scroll, the buttons stay underneath; Equip is the orange-gold call to action, Drop / Cancel small and quiet ===================================================================== */ #icard .col,#cmp .col{display:flex!important;flex-direction:column;overflow:hidden!important} #icard .col{max-height:calc(var(--lh) - 16px)!important} #icard .scroll,#cmp .scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;padding:2px 4px 2px 0;scrollbar-width:thin;scrollbar-color:#6a5230 transparent} #icard .scroll::-webkit-scrollbar,#cmp .scroll::-webkit-scrollbar{width:4px} #icard .scroll::-webkit-scrollbar-thumb,#cmp .scroll::-webkit-scrollbar-thumb{background:#6a5230;border-radius:0} #icard .btns,#cmp .btns{display:flex!important;flex:none;gap:6px;align-items:center;margin-top:8px!important;padding:0!important;position:static!important;background:none!important} #icard .btns button.pri,#cmp .btns button.pri{flex:1;min-width:0;padding:calc(5px * var(--k)) 6px!important;border-image:var(--o-fire) 11 fill / 11px / 0 stretch!important;color:#241304!important; font:600 calc(10px * var(--k)) var(--f-display)!important;letter-spacing:.14em!important;text-shadow:0 1px 0 rgba(255,236,200,.35)} #icard .btns button.pri:hover,#cmp .btns button.pri:hover{border-image-source:var(--o-fire-hi)!important} #icard .btns button.minor,#cmp .btns button.minor{flex:none;padding:calc(3px * var(--k)) calc(10px * var(--k))!important;border-image:var(--o-tile) 11 fill / 11px / 0 stretch!important;color:var(--bone-lo)!important; font:600 calc(8.5px * var(--k)) var(--f-display)!important;letter-spacing:.12em!important} #icard .btns button.minor:hover,#cmp .btns button.minor:hover{color:var(--bone)!important} /* the banner over a panel: a ribbon notched on the left, pointed on the right */ .ip .banner{border-radius:0!important;padding:2px 16px 2px 12px!important;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,6px 50%); background:linear-gradient(90deg,#8a6a3a,#5a4526 70%,#3a2c18)!important;color:#ffdcb4!important;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:calc(9px * var(--k))!important} /* each panel is lit from the top in its item's rarity colour */ .ip{position:relative} .ip::before{content:"";position:absolute;left:-16px;right:-16px;top:-14px;height:110px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 70% 100% at 50% 0,color-mix(in srgb,var(--rc,#8a6a3a) 20%,transparent),transparent 72%)} .ip .bs{position:relative;padding-bottom:calc(8px * var(--k));margin-bottom:2px} .ip .bs::after{content:"";position:absolute;left:0;bottom:0;width:min(100%,calc(150px * var(--k)));height:calc(7px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.8} /* the compare screen: full page, title with flourishes, corner filigree, an ornate arrow between the two */ #cmp{justify-content:flex-start!important;padding:calc(2px + var(--st)) calc(16px + var(--sr)) calc(12px + var(--sb)) calc(16px + var(--sl))!important; background:var(--o-c-tl) left 8px top 8px/40px 40px no-repeat,var(--o-c-tr) right 8px top 8px/40px 40px no-repeat,var(--o-c-bl) left 8px bottom 8px/40px 40px no-repeat,var(--o-c-br) right 8px bottom 8px/40px 40px no-repeat, radial-gradient(ellipse at 50% 45%,rgba(36,38,42,.97),rgba(12,13,15,.985) 75%)!important} #cmp .plate-title{padding:calc(8px * var(--k)) 0 calc(8px * var(--k))!important;flex:none} #cmp .cbody{flex:1;min-height:0;width:100%;justify-content:center;align-items:stretch!important;gap:calc(10px * var(--k))!important} #cmp .col{max-height:100%!important;width:min(360px,calc(44 * var(--vw)));padding:12px 12px 10px 14px!important} #cmp .col:first-child{opacity:.9} #cmp .ip{width:auto!important} #cmp .arrow{align-self:center;flex:none;width:calc(22px * var(--k));height:calc(22px * var(--k));display:flex;align-items:center;justify-content:center;background:#111214;border:1.5px solid #eea24a;transform:rotate(45deg);box-shadow:0 0 12px rgba(238,162,74,.35)} #cmp .arrow i{transform:rotate(-45deg) translateX(1px);animation:cmpnudge 1.4s ease-in-out infinite} @keyframes cmpnudge{50%{transform:rotate(-45deg) translateX(4px)}} #cmp.on .plate-title{animation:pTitle .6s var(--ease-out) both} #icard .scroll,#cmp .scroll{overflow-x:hidden} /* phone: the bag page gives its height to the cells (InventoryPanel.layout reserves exactly this: 36 + 22 + count line) */ body.touch #inv.open .bagwrap{padding-top:calc(36px + var(--st))!important;padding-bottom:calc(22px + var(--sb))!important;gap:6px} /* every button in a card's bar the same height; the compare button is a square with the ⇅ glyph */ #icard .btns,#cmp .btns{align-items:stretch!important} #icard .btns button,#cmp .btns button{height:calc(26px * var(--k));display:flex!important;align-items:center;justify-content:center;padding-top:0!important;padding-bottom:0!important;line-height:1} #icard .btns button.icon{width:calc(34px * var(--k));padding:0!important} #icard .btns button.icon svg{width:calc(14px * var(--k));height:calc(14px * var(--k));fill:none;stroke:var(--bone);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ===================================================================== MAP TOUR: the world holds still, the HUD steps aside, the minimap flies to the middle and grows (UI.tourStart sets the transform), the usual hint points at the spot; one button walks on ===================================================================== */ #minimapWrap{transition:opacity .6s,transform .7s var(--ease-out)} body.maptour #minimapWrap{z-index:57} body.maptour #freezeVeil{z-index:56;opacity:1;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.45),rgba(0,0,0,.82) 70%);transition:opacity .5s} body.maptour #side,body.maptour #zone,body.maptour #touch,body.maptour #quest,body.maptour #feed,body.maptour #target,body.maptour #skipBtn{opacity:0!important;pointer-events:none!important;transition:opacity .35s} body.maptour #touch *{pointer-events:none!important} #mapPin{position:fixed;left:0;top:0;width:18px;height:18px;pointer-events:none;z-index:58} #tourBtn{position:fixed;z-index:60;left:50%;transform:translateX(-50%);height:calc(28px * var(--k));padding:0 calc(26px * var(--k));border:2px solid transparent;background:none;cursor:pointer;pointer-events:auto; border-image:var(--o-fire) 11 fill / 11px / 0 stretch;color:#241304;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,236,200,.35); filter:drop-shadow(0 0 12px rgba(238,162,74,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.7));animation:pFade .5s ease-out .5s both} #tourBtn[hidden]{display:none} #tourBtn:hover{border-image-source:var(--o-fire-hi)} body.maptour #callout{z-index:60!important} /* ===================================================================== MAP PANEL (menu tile Map): full page like skills — a torn legend leaf on the left, the zone map on an engraved page on the right ===================================================================== */ #mapPanel{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;background:var(--an-1);pointer-events:auto} #mapPanel.open{display:flex} #mapPanel .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} #mapPanel .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st));width:calc(28px * var(--k));height:calc(28px * var(--k));font-size:calc(15px * var(--k))} #mapPanel .mbody{flex:1;min-height:0;display:flex} #mapPanel .mlist{position:relative;z-index:2;flex:none;width:clamp(230px,32%,380px);margin-right:-16px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:0 26px 26px calc(14px + var(--sl)); background:linear-gradient(90deg,transparent calc(100% - 16px),rgba(217,205,178,.05) calc(100% - 11px),rgba(217,205,178,.2)),linear-gradient(0deg,rgba(217,205,178,.18),rgba(217,205,178,.04) 10px,transparent 15px),linear-gradient(90deg,#26282c,#202226); -webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x; mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x} #mapPanel h3{margin:10px 0 8px 4px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)} #mapPanel h3::after{content:"";display:block;height:calc(9px * var(--k));margin-top:3px;background:var(--o-rule) left center/100% 100% no-repeat;opacity:.9} #mapPanel .mrow{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px 4px} #mapPanel .mrow b{display:block;font:500 calc(12.5px * var(--k))/1.2 var(--f-body);color:var(--bone)} #mapPanel .mrow small{display:block;margin-top:1px;font:calc(10.5px * var(--k))/1.3 var(--f-body);color:var(--bone-lo)} #mapPanel .mi{flex:none;width:calc(10px * var(--k));height:calc(10px * var(--k));margin-top:calc(3px * var(--k));transform:rotate(45deg);border:1px solid #0a0b0c} #mapPanel .mi.quest{background:#eea24a;box-shadow:0 0 8px rgba(238,162,74,.7)} #mapPanel .mi.you{background:var(--bone);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);transform:none;border:0} #mapPanel .mi.camp{background:#6a4a22;border-color:var(--bone)} #mapPanel .mi.exit{background:#6aa0a8;border-color:var(--bone)} #mapPanel .mi.nest{background:#b3261c} #mapPanel .mpage{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:6px 16px 12px 32px; box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8); background:var(--o-c-br) right 6px bottom 6px/40px 40px no-repeat,var(--o-c-bl) left 22px bottom 6px/40px 40px no-repeat,var(--o-c-tl) left 22px top 6px/40px 40px no-repeat,var(--o-c-tr) right 6px top 6px/40px 40px no-repeat, radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.04),transparent 60%),linear-gradient(rgba(36,38,42,.97),rgba(22,23,26,.98))} /* the map sits in a chamfered bronze frame */ #mapPanel .mframe{position:relative;padding:5px;border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);box-sizing:content-box} #mapPanel canvas{display:block;width:100%;height:100%} #mapPanel.opening .mlist{animation:pFromL .45s var(--ease-out) both} #mapPanel.opening .mrow,#mapPanel.opening h3{animation:pFromL .4s var(--ease-out) .15s both} #mapPanel.opening .mframe{animation:pTile .55s var(--ease-back) .12s both} /* hint to the right of its target: the arrow on its left, pointing left */ #callout.rt b{right:auto!important;left:-14px!important;border-left:0!important;border-right:14px solid #efa853!important} @keyframes nudgeL{50%{transform:translateX(5px)}} #callout.rt{animation:callin .3s ease-out,nudgeL 1.4s ease-in-out .3s infinite!important} /* during the map tour the hint wraps, so it always fits beside the grown map instead of lying across it */ body.maptour #callout{max-width:min(300px,calc((var(--lw,100vw) - min(72 * var(--vh,1vh),46 * var(--vw,1vw))) / 2 - 36px));white-space:normal} body.maptour #callout span{white-space:normal;line-height:1.3}