/* 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} #vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 86% 82% at 50% 48%,transparent 52%,rgba(0,0,0,.14) 70%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.52) 100%)} /* a soft wide vignette over the 3D view, under the HUD (18.10.: Diablo Immortal's — the strong narrow one, with the picture's own under it, darkened a third of the screen; js/render/post.js LOOK) */ body.mainmenu #vignette,body.mainmenu #hint{display:none} body:not(.touch) #vignette{background:radial-gradient(ellipse 90% 86% at 50% 50%,transparent 64%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.16) 93%,rgba(0,0,0,.26) 100%)} /* the desktop's wide screen: a much gentler darkening at the edges */ #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;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;z-index:30;text-shadow:0 1px 2px #000;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} /* the foe's level and Combat Rating under its name, in the colour of the gap to hers (js/story/conlevel.js) */ #target .lv{display:none;margin-top:3px;font:600 12px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 6px #000,0 1px 2px #000;white-space:nowrap} #target .lv em{display:inline-block;width:5px;height:5px;margin:0 9px 2px;transform:rotate(45deg);background:currentColor;opacity:.6} #target .lv svg{width:13px;height:13px;margin:0 4px -2px 0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} #target .lv .sk{display:inline-block;width:12px;height:12px;margin:0 6px -1px 0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8c0 3 1.5 5 3.5 6v4h9v-4c2-1 3.5-3 3.5-6a8 8 0 0 0-8-8zM9 9.5a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6zm6 0a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8c0 3 1.5 5 3.5 6v4h9v-4c2-1 3.5-3 3.5-6a8 8 0 0 0-8-8zM9 9.5a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6zm6 0a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6z'/%3E%3C/svg%3E") center/contain no-repeat} #target .lv.red{animation:lvPulse 1.6s ease-in-out infinite}@keyframes lvPulse{50%{text-shadow:0 0 10px rgba(255,74,58,.8),0 1px 2px #000}} #target2{position:fixed;left:50%;top:88px;transform:translateX(-50%);width:280px;text-align:center;display:none;pointer-events:none} #target2 .n{font:600 13px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#7ff0e2;text-shadow:0 0 6px #000,0 1px 2px #000} #target2 .bar{height:7px;margin:5px 14px 0;background:var(--ink);border:1px solid #000;outline:1px solid var(--bronze-lo);outline-offset:1px} #target2 .bar div{height:100%;background:linear-gradient(#1a9a8c,#0c5a52)} #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:400 60px/1.05 'UnifrakturMaguntia', var(--f-display);letter-spacing:.02em;color:#8e1a14;text-shadow:0 0 18px #000,0 0 30px rgba(120,10,6,.45);text-align:center;padding:0 16px} /* (Fraktur, 05.10., the user's) */ #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%28%23n%29'/%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:not(.on){display:none!important} body.touch #fps.on{display:block!important;top:auto;bottom:6px;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#eea24a;text-shadow:0 1px 2px #000;z-index:30} #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:250px;pointer-events:none;--pz:40px} #tBars .row{display:flex;align-items:center;gap:8px} /* her portrait: the select screen's diamond with the sketch, the level on a plate under its point */ #tLvl{position:relative;flex:none;width:calc(var(--pz) * 1.42);height:calc(var(--pz) * 1.42);display:flex;align-items:center;justify-content:center} #tLvl .d{position:relative;width:var(--pz);height:var(--pz);transform:rotate(45deg);border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / 9px / 0 stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.75))} #tLvl .d i{position:absolute;inset:2px;transform:rotate(-45deg) scale(1.42);background:url(../assets/ui/sorceress-sketch.webp) 31% 19%/300% auto no-repeat;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:sepia(.35) contrast(1.1)} #tLvl.war .d i{background-image:url(../assets/ui/warrior-sketch.webp);background-position:68% 17%} #tLvl.rgr .d i{background-image:url(../assets/ui/ranger-sketch.webp);background-position:72% 20%} #tLvl b{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);min-width:calc(var(--pz) * 0.5);padding:0 5px;background:#7a2a14;border:1px solid #eea24a;color:#ffdcb4;font:600 calc(var(--pz) * 0.27) var(--f-display)!important;line-height:1.35;text-align:center;text-shadow:0 1px 2px #000;white-space:nowrap} .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:calc(var(--pz) * -0.5) 0 0 calc(var(--pz) * 1.42 + 8px);outline:none;border:0;position:relative}#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(.84);transform-origin:right top} body.touch #zone{top:128px;transform:scale(.85);transform-origin:right top} body.touch #target{top:10px;width:230px} 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 .qw{margin:3px 0 0 15px;font:italic 13px/1.25 var(--f-body);color:#c9a24a}#quest .qw:empty{display:none} #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 ---------- */ #boltFlash{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 35%,rgba(120,255,235,.9),rgba(40,160,150,.35) 55%,rgba(10,60,60,0) 85%)} #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)} 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:italic 15px/1.3 var(--f-body);letter-spacing:.01em;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 ---------- */ #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:82px;max-width:min(360px,33vw)} #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,.mm-tests .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} #gmenu .tile,.mm-tests .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,.mm-tests .tile:hover{border-color:#000 #eea24a #eea24a #000} #gmenu .tile svg,.mm-tests .tile svg{width:34px;height:34px;stroke:#f0e2c0;fill:none;stroke-width:1.5} #gmenu .tile span,.mm-tests .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:nth-child(3){grid-column:span 2;aspect-ratio:2.75} /* the left mirrors the right: the same tiles under the same divider, the third across both columns */ #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))} #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,.mm-tests .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) / 4 - 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) / 4 - 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:141.1px} .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:166px;top:158px} #callout{right:192px;top:10px;padding:5px 10px 5px 12px;gap:8px;font-size:calc(13px * var(--k))} body.touch #callout{right:calc(160px + 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{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,.mm-tests .tiles{gap:8px} #gmenu .tile,.mm-tests .tile{aspect-ratio:1.45;gap:5px;border-radius:8px} #gmenu .tile svg,.mm-tests .tile svg{width:calc(22px * var(--k));height:calc(22px * var(--k))} #gmenu .tile span,.mm-tests .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:nth-child(3){aspect-ratio:3.05} #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(9px * var(--k))!important} /* (one size down, the user's 08.10.) */ #quest .qo,body.touch #quest .qo{font-size:calc(11px * 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(42px * 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} #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)} /* the side without the notch (view.js marks the notch's side: html.nl / html.nr) keeps its small margin — the display's rounded corners are there too (01.10.: with none the menu, the bag, the minimap and the buttons sat in the curve); only the quest list's text runs closer to that edge (its dead strip) */ /* 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.use{border-color:#3fe6d2;background:radial-gradient(circle at 50% 40%,#5ff0dc,#138a7e);box-shadow:0 0 18px rgba(63,230,210,.6)} .tact.use svg{stroke:#062a26;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,#explain{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,#explain 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%28%23p%29'/%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) */ #explain .more{position:static!important;flex:none} #dialogue .more,#explain .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,#explain .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;visibility:hidden;transition:opacity .5s,visibility 0s .5s;background:radial-gradient(ellipse at center,rgba(0,0,0,.05) 30%,rgba(0,0,0,.5))} body.frozen #freezeVeil{opacity:1;visibility:visible;transition:opacity .5s} /* (no backdrop filter at all, 16.10.: while it showed — every freezing guide, the map tour — the black tiles came back, at Ilse after the Brood Mother; the grey is drawn in the grade pass now, Post.update frzK) (the backdrop filter only while it shows, 15.10.: always over the WebGL canvas, if unseen, Chrome on Windows flashed tiles of the picture black — the user's videos, in talks) */ /* skills page: the hero's class as a pencil sketch on the right (sorceress, warrior, ranger), 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:-25%;width:min(62%,calc((var(--lh) - 40px) * .667));background:url(../assets/ui/sorceress-sketch.webp) right top/contain no-repeat; /* (contain: in a tall narrow window cover cut the warrior's sword off at the left) (a quarter taller than the page, from the top: on a big screen the sketch's unfinished foot showed; now it lies below the edge) */ 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 20%,#000 40%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(0deg,transparent 20%,#000 40%);mask-composite:intersect} #skills[data-cls=warrior] .spage::before{background-image:url(../assets/ui/warrior-sketch.webp)} #skills[data-cls=ranger] .spage::before{background-image:url(../assets/ui/ranger-sketch.webp)} #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));bottom:auto;top:50%;transform:translateY(-50%)} /* (a locked socket is empty: its level inside it — under it, the labels ran into the next socket) */ /* 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(250px * var(--hs));--pz:calc(40px * var(--hs))} body:not(.touch) #tLife{height:calc(12px * var(--hs))} body:not(.touch) #quest{top:calc(82px * 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(calc(1.12 * var(--hs)));transform-origin:right top} body:not(.touch) #side{width:calc(188px * var(--hs))} body:not(.touch) #zone{top:calc(14px + 192px * var(--hs));width:calc(188px * var(--hs))} body:not(.touch) #callout:not(.anchor):not(.bag){right:calc(24px + 188px * var(--hs))} /* target plate and the skill arc */ body:not(.touch) #target{width:calc(300px * 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,.mm-tests .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 */ #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-wrap:wrap;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 0 auto;min-width:max-content;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:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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} /* the phone's card: every button an icon, all of one width across the row; Equip's on its gold plate in the plate's dark ink (the user's, 16.10.: one rule for all, js/ui/itemcard.js cardBtns) */ body.touch #icard .btns button.cardic{flex:1 1 0!important;width:auto!important;min-width:0!important}html body.touch #icard#icard .btns button.pri.cardic svg{stroke:#241304!important}html body.touch #icard#icard .btns .ringrow:has(.cardic){display:contents}body.touch #icard .btns button.cardic b{margin-left:3px;font:700 calc(11px * var(--k)) var(--f-display)} /* ===================================================================== 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 ===================================================================== */ :is(#mapPanel,#qlog){position:fixed;inset:0;z-index:45;display:none;flex-direction:column;background:var(--an-1);pointer-events:auto} :is(#mapPanel,#qlog).open{display:flex} :is(#mapPanel,#qlog) .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} :is(#mapPanel,#qlog) .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))} :is(#mapPanel,#qlog) .mbody{flex:1;min-height:0;display:flex} :is(#mapPanel,#qlog) .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} :is(#mapPanel,#qlog) h3{margin:10px 0 8px 4px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)} :is(#mapPanel,#qlog) 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} :is(#mapPanel,#qlog) .mrow{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px 4px} :is(#mapPanel,#qlog) .mrow b{display:block;font:500 calc(12.5px * var(--k))/1.2 var(--f-body);color:var(--bone)} :is(#mapPanel,#qlog) .mrow small{display:block;margin-top:1px;font:calc(10.5px * var(--k))/1.3 var(--f-body);color:var(--bone-lo)} :is(#mapPanel,#qlog) .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} :is(#mapPanel,#qlog) .mi.quest{background:#eea24a;box-shadow:0 0 8px rgba(238,162,74,.7)} :is(#mapPanel,#qlog) .mi.you{background:var(--bone);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);transform:none;border:0} :is(#mapPanel,#qlog) .mi.camp{background:#6a4a22;border-color:var(--bone)} :is(#mapPanel,#qlog) .mi.exit{background:#6aa0a8;border-color:var(--bone)} :is(#mapPanel,#qlog) .mi.nest{background:#b3261c} :is(#mapPanel,#qlog) .mpage{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:10px calc(14px + var(--sr)) calc(12px + var(--sb)) 30px; box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8); background: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 its frame: a bronze border hugging the map, the filigree corners on the map's own corners, the map's rim sunk in shadow under it */ :is(#mapPanel,#qlog) .mframe{position:relative;padding:4px;border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;box-sizing:content-box;background:#0d0c0b;box-shadow:0 6px 18px rgba(0,0,0,.6)} :is(#mapPanel,#qlog) .mframe::before{content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(160,120,60,.45),inset 0 0 28px 10px rgba(10,9,8,.85),inset 0 0 80px 20px rgba(10,9,8,.35)} :is(#mapPanel,#qlog) .mframe::after{content:"";position:absolute;inset:-2px;z-index:2;pointer-events:none; background:var(--o-c-tl) left top/40px 40px no-repeat,var(--o-c-tr) right top/40px 40px no-repeat,var(--o-c-bl) left bottom/40px 40px no-repeat,var(--o-c-br) right bottom/40px 40px no-repeat} :is(#mapPanel,#qlog) canvas{display:block;width:100%;height:100%} :is(#mapPanel,#qlog).opening .mlist{animation:pFromL .45s var(--ease-out) both} :is(#mapPanel,#qlog).opening .mrow,:is(#mapPanel,#qlog).opening h3{animation:pFromL .4s var(--ease-out) .15s both} :is(#mapPanel,#qlog).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} /* map tour, calmer: the flight is slower; the small map pulses once before it leaves; the advance button is the dialogue's (gold square, chevron) at the map's lower right */ #minimapWrap{transition:opacity .6s,transform 1.15s cubic-bezier(.45,.05,.25,1)} #minimapWrap.mmpulse #minimap{animation:mmpulse .65s ease-out} @keyframes mmpulse{0%{transform:scale(1);filter:none}40%{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(238,162,74,.85))}100%{transform:scale(1);filter:none}} #tourBtn{transform:none!important;width:calc(30px * var(--k));height:calc(30px * var(--k))!important;padding:0!important;display:flex;align-items:center;justify-content:center;border:0!important;border-image:none!important; background:#eea24a!important;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.6);filter:none!important;animation:pFade .4s ease-out both,morepulse 1.4s ease-in-out .4s infinite!important} #tourBtn svg{width:70%;height:70%;fill:none;stroke:#1a1409;stroke-width:3;stroke-linecap:square} #tourBtn:hover{background:#f6b766!important} /* the skill buttons own every touch that starts on them, their icon canvas included (no browser pan or zoom that would cancel an aim) */ .tbtn *,.tact *{touch-action:none} /* ===================================================================== MAIN MENU (js/ui/menu.js) — after Diablo Immortal, in our colours: the 3D stage fills the screen; classes / slots as diamonds on the left, the class sheet or Enter World on the right ===================================================================== */ body.mainmenu #touch,body.mainmenu #quest,body.mainmenu #side,body.mainmenu #callout,body.mainmenu #minimapWrap,body.mainmenu #zone,body.mainmenu #feed,body.mainmenu #target,body.mainmenu #msgs,body.mainmenu #labels,body.mainmenu #skipBtn,body.mainmenu #tourBtn{display:none!important} #mainmenu{position:fixed;inset:0;z-index:70;pointer-events:none;--mmx:max(48px,6vw)} /* (a phone: the diamonds and the column well in from the edges, not lost at them) */ /* (--mmx: the screens' side margin, one for the class, the slots, the editor's tabs and the right column) */ #mainmenu[hidden]{display:none} #mainmenu>div{position:absolute;inset:0;display:none} #mainmenu[data-mode="create"] .mm-create,#mainmenu[data-mode="select"] .mm-select{display:block} #mainmenu button,#mainmenu input{pointer-events:auto} /* shade toward the edges where the text sits */ #mainmenu::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,9,.72),transparent 30%,transparent 62%,rgba(6,6,9,.8)),linear-gradient(rgba(6,6,9,.45),transparent 22%,transparent 75%,rgba(6,6,9,.6))} /* (the selection darkens both sides as the creation does: the column on the right is read over the stage) */ /* a diamond: a square turned 45°, a chamfered bronze rim, its content turned back upright */ .mm-cls,.mm-port{position:relative;width:calc(52px * var(--k));height:calc(52px * var(--k));transform:rotate(45deg);border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center; filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));transition:filter .25s,transform .25s} .mm-cls svg,.mm-port svg{width:48%;height:48%;transform:rotate(-45deg);fill:none;stroke:var(--bone);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round} .mm-cls.on{border-image-source:var(--o-plate-gold);filter:drop-shadow(0 0 12px rgba(238,162,74,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.7));transform:rotate(45deg) scale(1.12)} .mm-cls.on svg{stroke:#ffdcb4} .mm-cls.locked{opacity:.38;filter:grayscale(1) drop-shadow(0 4px 8px rgba(0,0,0,.7))} .mm-classes{position:absolute;left:calc(var(--mmx) + var(--sl));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:calc(16px * var(--k))} .mm-classes .mm-cls:nth-child(even),.cu-tabs .cu-tab:nth-child(even){margin-left:calc(40px * var(--k))} .mm-slots .mm-slot:nth-child(even) .mm-port{margin-left:calc(34px * var(--k))} /* (name and bin follow their tile, straight beside it) */ /* the class sheet */ .mm-info{position:absolute;right:calc(var(--mmx) - 10px * var(--k) + var(--sr));top:50%;transform:translateY(-50%);width:min(34vw,calc(300px * var(--k)));display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(8px * var(--k))} .mm-info h2{font:600 calc(20px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-shadow:0 2px 10px #000;display:flex;align-items:center;gap:10px} .mm-info h2::before,.mm-info h2::after{content:"";width:calc(40px * var(--k));height:calc(10px * var(--k));background:var(--o-fl-l) center/contain no-repeat} .mm-info h2::after{background-image:var(--o-fl-r)} .mm-desc{font:calc(12px * var(--k))/1.45 var(--f-body);color:#cfc4ad;text-shadow:0 1px 3px #000} .mm-tags{display:flex;flex-direction:column;gap:4px;padding:calc(6px * var(--k)) 0;border-top:1px solid rgba(138,106,58,.35);width:100%;align-items:center} .mm-tags span{display:flex;align-items:center;gap:8px;font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone)} .mm-tags svg{width:calc(16px * var(--k));height:calc(16px * var(--k));fill:none;stroke:#eea24a;stroke-width:1.6} #heroName{width:100%;padding:calc(7px * var(--k)) 10px;background:rgba(8,8,10,.85);border:1px solid var(--bronze-lo);color:var(--bone);font:calc(13px * var(--k)) var(--f-body);outline:none;user-select:text;-webkit-user-select:text;touch-action:manipulation} #heroName:focus{border-color:#eea24a} .mm-hint{font:italic calc(10.5px * var(--k)) var(--f-body);color:var(--bone-lo)} .mm-go{margin-top:calc(4px * var(--k));padding:calc(8px * var(--k)) calc(34px * var(--k));border:2px solid transparent;border-image:var(--o-fire) 11 fill / 11px / 0 stretch;background:none;cursor:pointer; color:#241304;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,236,200,.35);filter:drop-shadow(0 0 14px rgba(238,162,74,.35)) drop-shadow(0 3px 6px rgba(0,0,0,.7))} .mm-go:hover{border-image-source:var(--o-fire-hi)} .mm-go:disabled{opacity:.4;filter:grayscale(.6)} #createBack{position:absolute;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))} /* the slots */ .mm-slots{position:absolute;left:calc(var(--mmx) + var(--sl));top:calc(20px + var(--st));bottom:calc(16px + var(--sb));display:flex;flex-direction:column;justify-content:center;gap:calc(16px * var(--k))} .mm-slot{display:flex;align-items:center;gap:calc(18px * var(--k))} .mm-port i{position:absolute;inset:3px;transform:rotate(-45deg) scale(1.42);background:url(../assets/ui/sorceress-sketch.webp) 31% 19%/300% auto no-repeat;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:sepia(.35) contrast(1.1)} .mm-port b{position:absolute;right:-8px;bottom:-8px;transform:rotate(-45deg);min-width:calc(20px * var(--k));padding:1px 5px;background:#7a2a14;border:1px solid #eea24a;color:#ffdcb4;font:600 calc(10px * var(--k)) var(--f-display);text-align:center} .mm-slot.on .mm-port{border-image-source:var(--o-plate-gold);filter:drop-shadow(0 0 12px rgba(238,162,74,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.7));transform:rotate(45deg) scale(1.12)} /* the chosen hero stands out: a gold wash behind the row that fades out to the right, a gold rule under the name, the name lit; the others sink back */ .mm-slot{position:relative} .mm-slot.on::before{content:"";position:absolute;left:calc(-18px * var(--k));right:calc(-60px * var(--k));top:calc(-8px * var(--k));bottom:calc(-8px * var(--k));pointer-events:none;z-index:-1; background:radial-gradient(ellipse 60% 90% at 18% 50%,rgba(238,162,74,.30),rgba(238,162,74,.08) 60%,transparent 80%),linear-gradient(90deg,rgba(20,14,8,.75),rgba(20,14,8,.35) 60%,transparent); -webkit-mask:linear-gradient(90deg,transparent 4%,#000 20%,#000 70%,transparent),linear-gradient(0deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 4%,#000 20%,#000 70%,transparent),linear-gradient(0deg,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect} /* (it fades in from the left too: the list's edge cut it off hard) */ .mm-slot.on .mm-who strong{color:#ffdcb4;text-shadow:0 0 10px rgba(238,162,74,.6),0 1px 3px #000} .mm-slot.on .mm-who small{color:#eea24a;border-top:1px solid rgba(238,162,74,.55);padding-top:2px;display:inline-block} .mm-slot:not(.on):not(.empty) .mm-port{filter:brightness(.6) saturate(.4)} .mm-slot.empty .mm-port{opacity:.75} .mm-who strong{display:block;font:500 calc(15px * var(--k)) var(--f-body);color:var(--bone);text-shadow:0 1px 3px #000} .mm-who small{font:calc(11px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone-lo)} .mm-slot:not(.on) .mm-who{opacity:.5} .mm-del{width:calc(32px * var(--k));height:calc(32px * var(--k));display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;cursor:pointer} .mm-del svg{width:60%;height:60%;fill:none;stroke:var(--bone-lo);stroke-width:1.7} .mm-del.sure{border-image-source:var(--o-fire)}.mm-del.sure svg{stroke:#241304} .mm-note{position:absolute;left:50%;bottom:calc(14px + var(--sb));transform:translateX(-50%);font:italic calc(11px * var(--k)) var(--f-body);color:#ffdcb4;text-shadow:0 1px 3px #000;opacity:0;white-space:nowrap;pointer-events:none} .mm-note.flash{animation:mmnote 3s ease-out} /* news for the testers (js/ui/news.js, 14.10.): a quiet line at the bottom left — the gold diamond, NEWS, the date, the first words — and a tap opens them all in the altar's dialog (#newsAsk, its rules shared with #fullAsk), scrolling (the user: 'subtler, lower, a dialog') */ #mainmenu .mm-newsbar{position:absolute;left:calc(var(--mmx) + var(--sl));bottom:calc(12px + var(--sb));max-width:min(46vw,calc(420px * var(--k)));display:none;align-items:center;gap:calc(8px * var(--k));padding:calc(6px * var(--k)) calc(14px * var(--k)) calc(6px * var(--k)) calc(10px * var(--k)); border:0;border-top:1px solid rgba(184,135,62,.45);background:linear-gradient(90deg,rgba(12,12,14,.78),rgba(12,12,14,.45) 70%,transparent);pointer-events:auto;cursor:pointer;text-align:left;color:var(--bone);font:calc(11px * var(--k)) var(--f-body);-webkit-tap-highlight-color:transparent} #mainmenu[data-mode="select"] .mm-newsbar:not([hidden]){display:flex} #mainmenu .mm-newsbar .nb-gem{flex:none;width:calc(7px * var(--k));height:calc(7px * var(--k));transform:rotate(45deg);background:#8a6a3a;box-shadow:0 0 0 1px #000} #mainmenu .mm-newsbar.fresh .nb-gem{background:#eea24a;box-shadow:0 0 8px #eea24a,0 0 0 1px #000;animation:nbPulse 1.8s ease-in-out infinite} @keyframes nbPulse{50%{box-shadow:0 0 14px #ffc06a,0 0 0 1px #000}} #mainmenu .mm-newsbar b{flex:none;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:#e7b866} #mainmenu .mm-newsbar time{flex:none;font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);color:#c8902e} #mainmenu .mm-newsbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;color:#d9ccb0;text-shadow:0 1px 2px #000} #mainmenu .mm-newsbar:hover span,#mainmenu .mm-newsbar.down span{color:#fff3dc} #newsAsk .egbody{text-align:center} #newsAsk .nw-item time{display:block;font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);color:#c8902e;letter-spacing:.08em} #newsAsk .nw-item p{margin:calc(3px * var(--k)) 0 0;font:italic calc(12px * var(--k))/1.45 var(--f-body);color:#e9dcc0;white-space:normal} #newsAsk .nw-item+.egdv{width:46%;opacity:.55} #newsAsk .egbody .mm-cbtns{margin-top:calc(10px * var(--k))} #mainmenu .mm-version{position:absolute;right:calc(14px + var(--sr));bottom:calc(10px + var(--sb));margin:0;font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:#e2d2ae;text-shadow:0 1px 3px #000,0 0 6px #000;opacity:.85;pointer-events:none;display:none} #mainmenu[data-mode="select"] .mm-version{display:block} @keyframes mmnote{0%,70%{opacity:1}100%{opacity:0}} #mainmenu.opening .mm-classes,#mainmenu.opening .mm-slots{animation:pFromL .5s var(--ease-out) .1s both} #mainmenu.opening .mm-info{animation:pFromR .5s var(--ease-out) .15s both} #createBack[hidden]{display:none} /* the Town Portal: a third button under the bag, once learned */ .sbtn[data-open="portal"]{right:-6px;top:calc(-4px + 32px * var(--k) + 12px)} .sbtn[hidden]{display:none!important} /* gold in the inventory, beside the close button */ #inv .igold{display:none} #inv.open .igold{display:flex;position:absolute;z-index:4;top:calc(12px + var(--st));right:calc(22px + 32px * var(--k) + var(--sr));align-items:center;gap:7px;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.06em;color:#f3d48a;text-shadow:0 1px 2px #000} #inv .igold i{width:calc(13px * var(--k));height:calc(13px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,#e0b040 45%,#8a6010);box-shadow:0 0 6px rgba(238,190,74,.6)} #inv .igold.pulse{animation:goldpulse .6s ease-out} @keyframes goldpulse{40%{transform:scale(1.18);color:#fff}} /* the character screens are a preview, not the game: a soft, milky grade over the 3D stage and a pale haze toward the edges */ body.mainmenu:not(.touch) #game{filter:contrast(.96) saturate(1.18) brightness(1.02)} /* (a phone: the saturation in the grade pass instead — a CSS filter on the WebGL canvas sent every frame through one more full-screen picture, the menu at 40 fps on the user's 16 Pro, 08.10.) */ #mainmenu>.mm-create::before,#mainmenu>.mm-select::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 75% 70% at 50% 48%,rgba(210,200,230,0) 55%,rgba(210,200,230,.06));mix-blend-mode:screen} /* gold heaps: the amount, in our orange-gold, not clickable (the coins come to her) */ .loot-label.gold{pointer-events:none;color:#eea24a;border-color:rgba(238,162,74,.55);--rc:#eea24a} /* the classes glow in their own colour: sorceress violet, warrior red, ranger green (the ranger glows but is not open yet) */ .mm-cls[data-cls="sorceress"]{--cg:#a070ff}.mm-cls[data-cls="warrior"]{--cg:#ff4a36}.mm-cls[data-cls="ranger"]{--cg:#5acd6a} .mm-cls{filter:drop-shadow(0 0 10px var(--cg)) drop-shadow(0 4px 8px rgba(0,0,0,.7));animation:clsglow 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)} .mm-cls svg{stroke:color-mix(in srgb,var(--cg) 55%,#ffe8d0)} .mm-cls.on{filter:drop-shadow(0 0 18px var(--cg)) drop-shadow(0 0 6px var(--cg)) drop-shadow(0 4px 8px rgba(0,0,0,.7));animation:none} .mm-cls.locked{opacity:.6;filter:drop-shadow(0 0 9px var(--cg)) drop-shadow(0 4px 8px rgba(0,0,0,.7)) saturate(.7)} @keyframes clsglow{50%{filter:drop-shadow(0 0 16px var(--cg)) drop-shadow(0 4px 8px rgba(0,0,0,.7))}} /* no class chosen yet: no name field, no Create — the page asks you to choose */ .mm-info.none #heroName,.mm-info.none #createBtn,.mm-info.none .mm-tags{display:none} /* a warrior's slot: his sigil instead of the sorceress's sketch */ .mm-port.war svg{width:52%;height:52%;stroke:#ff9a80} /* desktop: the side panels of the menu sit well in from the edges, closer to the hero in the middle */ body:not(.touch) #mainmenu{--mmx:10vw} /* (both sides alike: the right column stands out by the turned tiles' corner, 10 px × k, so the edges seen are as far from the screen's edge) */ .mm-port.rgr svg{width:52%;height:52%;stroke:#9ae08a} /* every class's slot shows a crop of its sketch (the face), as the sorceress's does */ .mm-port.war i{background-image:url(../assets/ui/warrior-sketch.webp);background-position:68% 17%} .mm-port.rgr i{background-image:url(../assets/ui/ranger-sketch.webp);background-position:72% 20%} :is(#mapPanel,#qlog) .mrow.tap{cursor:pointer;padding:4px 6px;margin-left:0;border-radius:4px;transition:background .2s} :is(#mapPanel,#qlog) .mrow.tap:hover,:is(#mapPanel,#qlog) .mrow.on{background:rgba(238,162,74,.14)} :is(#mapPanel,#qlog) canvas{cursor:pointer} /* the quest log: small type (the one place that sets it; nothing earlier may carry !important for it), a narrower panel, a link to the map */ /* phone edges: the menu's diamonds and small buttons get a larger invisible hit area, and sit a little further in from the screen's edge */ .mm-cls::before,.mm-port::before,.mm-del::before{content:"";position:absolute;inset:-12px;border-radius:50%} .xclose::after{content:"";position:absolute;inset:-10px} /* the slot list: a little smaller tiles, and it scrolls when the heroes do not fit (a phone with four); the padding keeps the turned corners, the glow and the bin inside, the edges fade out; centred while it fits (the auto margins, not justify-content: that cut the top off once it scrolled) */ .mm-slots{left:calc(var(--mmx) - 22px + var(--sl));justify-content:flex-start;overflow-y:auto;overflow-x:hidden;pointer-events:auto;padding:22px calc(30px * var(--k)) 22px 22px;box-sizing:border-box;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none; -webkit-mask:linear-gradient(transparent,#000 16px,#000 calc(100% - 16px),transparent);mask:linear-gradient(transparent,#000 16px,#000 calc(100% - 16px),transparent)} .mm-slots::-webkit-scrollbar{display:none} .mm-slots>.mm-slot:first-child{margin-top:auto}.mm-slots>.mm-slot:last-child{margin-bottom:auto} .mm-slots .mm-port{width:calc(44px * var(--k));height:calc(44px * var(--k));touch-action:pan-y} /* (a drag that starts on a tile still scrolls the list) */ .mm-slot{gap:calc(14px * var(--k))} .mm-info .mm-go{max-width:100%;box-sizing:border-box;white-space:nowrap} /* (its own width, as Create; never wider than the column: it stuck out of a narrow one) */ body.touch .mm-info .mm-go{padding-left:calc(18px * var(--k));padding-right:calc(18px * var(--k))} body.touch :is(#mapPanel,#qlog) .mlist{padding-left:calc(26px + var(--sl))} body.touch :is(#mapPanel,#qlog) .mrow.tap{padding:7px 8px} /* the bag's tabs (Items, Misc) and the Misc page */ #inv .itabs{display:flex;gap:6px;margin-bottom:6px} #inv .itabs button{position:relative;width:calc(34px * var(--k));height:calc(28px * var(--k));display:flex;align-items:center;justify-content:center;background:rgba(10,11,12,.7);border:1px solid var(--bronze-lo);border-radius:5px;cursor:pointer} #inv .itabs button svg{width:60%;height:60%;fill:none;stroke:var(--bone-lo);stroke-width:1.6;stroke-linejoin:round} #inv .itabs button.on{border-color:#eea24a;background:rgba(238,162,74,.14)}#inv .itabs button.on svg{stroke:#eea24a} #inv .itabs button i{display:none;position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#eea24a;box-shadow:0 0 8px #eea24a} #inv .itabs button.new i{display:block} #inv .misc{display:none;grid-template-columns:repeat(var(--cols,5),var(--cs,58px));gap:4px} #inv .misc .cell{width:var(--cs,58px);height:var(--cs,58px)} #inv .cell.r-artifact{box-shadow:inset 0 0 0 1px #b36bff,inset 0 0 14px rgba(179,107,255,.35)} #inv .cell.r-quest{box-shadow:inset 0 0 0 1px #3fe6d2,inset 0 0 14px rgba(63,230,210,.35)} /* the merchant's window: buy mystery gear by kind on the left, sell from the bag on the right */ #shop{position:fixed;inset:0;z-index:47;display:none;flex-direction:column;background:var(--an-1);pointer-events:auto} #shop.open{display:flex} #shop .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st))} #shop .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} #shop .shbody{flex:1;min-height:0;display:flex;gap:18px;padding:6px calc(18px + var(--sr)) 14px calc(22px + var(--sl))} #shop h3{margin:4px 0 10px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} #shop .shbuy{flex:1.1;min-width:0;display:flex;flex-direction:column} #shop .cats{display:grid;grid-template-columns:1fr 1fr;gap:10px} #shop .cat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:calc(8px * var(--k)) calc(10px * var(--k));background:rgba(10,11,12,.7);border:1px solid var(--bronze-lo);border-radius:6px;cursor:pointer;color:var(--bone)} #shop .cat svg{grid-row:1 / 3;width:calc(28px * var(--k));height:calc(28px * var(--k));fill:none;stroke:#eea24a;stroke-width:1.5} #shop .cat b{font:600 calc(11px * var(--k)) var(--f-body)} #shop .cat .pr{display:flex;align-items:center;gap:4px;font:600 calc(11px * var(--k)) var(--f-display);color:#eea24a} #shop .cat small{grid-column:2;font:calc(9px * var(--k)) var(--f-body);color:var(--bone-lo)} #shop .cat.dim{opacity:.5} #shop .pr i,#shop .sbtn i,#shop .shgold i{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20)} #shop .shnote{margin-top:12px;min-height:1.4em;font:italic calc(11px * var(--k)) var(--f-body);color:#ffdcb4} #shop .shnote.flash{animation:mmnote 3s ease-out} #shop .shsell{flex:1;min-width:0;display:flex;flex-direction:column} #shop .sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;overflow-y:auto} #shop .sgrid .cell{aspect-ratio:1;border:1px solid var(--an-line);background:var(--an-0);display:flex;align-items:center;justify-content:center;cursor:pointer} #shop .sgrid .cell img{width:80%;height:80%;object-fit:contain} #shop .sgrid .cell.sel{outline:2px solid #eea24a} #shop .sgrid .cell.r-magic{box-shadow:inset 0 0 0 1px #5b8dff}#shop .sgrid .cell.r-rare{box-shadow:inset 0 0 0 1px #f5cf3d}#shop .sgrid .cell.r-unique{box-shadow:inset 0 0 0 1px #ff7d1f} #shop .sdet{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(34px * var(--k));margin-top:8px;font:calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #shop .sbtn,#shop .sall{display:inline-flex;align-items:center;gap:5px;padding:calc(5px * var(--k)) calc(12px * var(--k));border:1px solid rgba(238,162,74,.6);background:rgba(238,162,74,.14);color:#eea24a;border-radius:5px;font:calc(10.5px * var(--k)) 'Alegreya SC',var(--f-body);cursor:pointer} #shop .sall{margin-top:8px;align-self:flex-start} #shop .shgold{position:absolute;top:calc(12px + var(--st));right:calc(56px + var(--sr));display:flex;align-items:center;gap:6px;font:600 calc(13px * var(--k)) var(--f-display);color:#eea24a} /* the merchant, in our frames: the wares are chamfered cards with a double rim and filigree in two corners, the icon on a diamond tile, a gold rule under the name; the bag is the inventory's own tiles in rarity colours; an item's card is the inventory's card, over the shop */ body.shopping #icard{z-index:49} #shop .cat{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;column-gap:calc(10px * var(--k));row-gap:2px;padding:calc(10px * var(--k)) calc(14px * var(--k)); border:2px solid transparent;border-radius:0;border-image:var(--o-card) 11 / 11px / 0 stretch;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); background:linear-gradient(rgba(16,17,19,.9),rgba(9,10,11,.94)),var(--tex) 0 0/256px 256px;transition:filter .2s} #shop .cat::before{content:"";position:absolute;inset:4px;pointer-events:none;background:var(--o-c-tl) left top/calc(22px * var(--k)) no-repeat,var(--o-c-br) right bottom/calc(22px * var(--k)) no-repeat;opacity:.75} #shop .cat:active,#shop .cat:hover{border-image-source:var(--o-card-gold);filter:drop-shadow(0 0 8px rgba(238,162,74,.35))} #shop .cat .ci{grid-row:1 / 4;width:calc(34px * var(--k));height:calc(34px * var(--k));display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;margin:0 calc(4px * var(--k))} #shop .cat .ci svg{transform:rotate(-45deg);width:62%;height:62%;grid-row:auto} #shop .cat b{grid-column:2 / 4;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.06em;color:var(--bone)} #shop .cat em{grid-column:2 / 4;height:calc(7px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.7} #shop .cat .pr{grid-column:2}#shop .cat small{grid-column:3;grid-row:3;text-align:right} #shop .cats{gap:calc(8px * var(--k))} #shop h3{display:flex;align-items:center;gap:8px}#shop h3::after{content:"";flex:1;height:calc(9px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.6} #shop .sgrid{gap:calc(5px * var(--k));padding:2px} #shop .sgrid .cell{position:relative;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;box-shadow:none!important;outline:0} #shop .sgrid .cell.sel{border-image-source:var(--o-tile-gold);filter:drop-shadow(0 0 6px rgba(238,162,74,.5))} #shop .sgrid .cell[class*=" r-"]::after{content:"";position:absolute;inset:3px;pointer-events:none;border:1.5px solid var(--rc);box-shadow:inset 0 0 10px var(--rg)} #shop .sgrid .cell.r-normal{--rc:rgba(228,224,214,.55);--rg:rgba(228,224,214,.08)}#shop .sgrid .cell.r-magic{--rc:#5b8dff;--rg:rgba(91,141,255,.3)} #shop .sgrid .cell.r-rare{--rc:#f5cf3d;--rg:rgba(245,207,61,.28)}#shop .sgrid .cell.r-unique{--rc:#ff7d1f;--rg:rgba(255,125,31,.34)} #shop .sall{margin-top:calc(10px * var(--k))} #shop .sall{align-self:flex-start;padding:calc(5px * var(--k)) calc(14px * var(--k));border:2px solid transparent;border-radius:0;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#eea24a;font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.05em} #shop .cat small{white-space:nowrap}#shop h3{white-space:nowrap} /* the inventory's gold: on its own small plate, clear of the close button */ #inv.open .igold{right:calc(30px + 46px * var(--k) + var(--sr));top:calc(10px + var(--st));gap:calc(8px * var(--k));padding:calc(3px * var(--k)) calc(12px * var(--k)) calc(3px * var(--k)) calc(9px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;line-height:1.2} /* the map's tabs, Area and World, on the frame's top edge */ :is(#mapPanel,#qlog) .mtabs{position:absolute;z-index:3;top:calc(10px * var(--k));left:50%;transform:translateX(-50%);display:flex;gap:calc(6px * var(--k))} /* the quest window's tabs sit on the frame's top rim: one engraved plaque, the two names either side of a diamond, the chosen one lit */ #qlog .mtabs{top:0;transform:translate(-50%,-55%);gap:0;align-items:center;padding:calc(3px * var(--k)) calc(6px * var(--k));border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(#1b1c1f,#0d0e10);box-shadow:0 3px 10px rgba(0,0,0,.7)} #qlog .mtabs button{min-width:0;border:0!important;border-image:none!important;background:none!important;filter:none!important;padding:calc(3px * var(--k)) calc(14px * var(--k))!important;color:var(--bone-lo);transition:color .2s,text-shadow .2s} #qlog .mtabs button:hover{color:var(--bone)} #qlog .mtabs button.on{color:#eea24a;text-shadow:0 0 10px rgba(238,162,74,.6)} #qlog .mtabs i{width:calc(5px * var(--k));height:calc(5px * var(--k));transform:rotate(45deg);background:var(--bronze);flex:none} :is(#mapPanel,#qlog) .mtabs button{min-width:calc(64px * var(--k));padding:calc(4px * var(--k)) calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:var(--bone-lo);font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;cursor:pointer} :is(#mapPanel,#qlog) .mtabs button.on{border-image-source:var(--o-tile-gold);color:#eea24a;filter:drop-shadow(0 0 6px rgba(238,162,74,.4))} /* the boss's bar: a wider plate, her name in violet (an end boss) */ #target.boss{width:min(520px,70vw)}body.touch #target.boss{width:min(380px,60vw)} #target.boss .n{text-shadow:0 0 10px rgba(170,90,255,.8),0 1px 2px #000;letter-spacing:.22em} #target.boss .bar{height:12px;outline-color:#7a4ab0}#target.boss .bar::before,#target.boss .bar::after{border-color:#b07aff} /* fix: the bin's enlarged hit area was placed against the whole slot column (the button was not positioned), so a tap anywhere there hit Delete */ .mm-del{position:relative;touch-action:none}.mm-del::before{inset:-10px!important} .mm-del.down{transform:scale(.9);border-image-source:var(--o-tile-gold)}.mm-cbtns button{touch-action:none}.mm-cbtns button:active{transform:scale(.95);filter:brightness(1.25)} /* delete, confirmed in a small framed dialog: chamfered double-rim card, filigree over the title */ .mm-confirm{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(4,5,6,.62);pointer-events:auto} #mainmenu .mm-confirm .mm-cbtns button{touch-action:none} /* (a tap on a dialog's buttons is never taken for a scroll and cancelled; the rest scrolls as before: the test scenes' list) */ #mainmenu .mm-confirm.on{display:flex!important;animation:pFade .2s ease-out both} .mm-cbox{position:relative;width:min(calc(300px * var(--k)),86vw);padding:calc(16px * var(--k)) calc(20px * var(--k)) calc(14px * var(--k));text-align:center; 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); background:var(--o-c-tl) left 6px top 6px/calc(24px * var(--k)) no-repeat,var(--o-c-br) right 6px bottom 6px/calc(24px * var(--k)) no-repeat,linear-gradient(rgba(16,17,19,.97),rgba(9,10,11,.98))} .mm-cbox h3{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 calc(8px * var(--k));font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)} .mm-cbox h3::before,.mm-cbox h3::after{content:"";width:calc(40px * var(--k));height:calc(10px * var(--k));background:var(--o-fl-l) center/contain no-repeat}.mm-cbox h3::after{background-image:var(--o-fl-r)} .mm-cbox p{margin:0 0 calc(12px * var(--k));font:calc(11px * var(--k))/1.45 var(--f-body);color:var(--bone-lo)}.mm-cbox p b{color:var(--bone);font-weight:600} .mm-cbtns{display:flex;justify-content:center;gap:calc(10px * var(--k))} .mm-cbtns button{min-width:calc(90px * var(--k));padding:calc(6px * var(--k)) calc(14px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:var(--bone);font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer} .mm-cbtns button.danger{border-image-source:var(--o-fire);color:#241304} .mm-cbox h3{white-space:nowrap} /* a new skill (after the first): no pointer, the menu button itself says it — its gold dot breathes */ #side.fresh .sbtn .dot{animation:freshdot 1.8s ease-in-out infinite} @keyframes freshdot{50%{box-shadow:0 0 10px 3px rgba(238,162,74,.85);transform:rotate(45deg) scale(1.25)}} /* the world map's travel card: a small chamfered plate over the map */ :is(#mapPanel,#qlog) .mtravel{position:absolute;z-index:4;left:50%;bottom:calc(14px * var(--k));transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:2px;min-width:calc(200px * var(--k));padding:calc(8px * var(--k)) calc(16px * var(--k)) calc(9px * var(--k)); border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);background:linear-gradient(rgba(16,17,19,.96),rgba(9,10,11,.97));pointer-events:auto} :is(#mapPanel,#qlog) .mtravel.on{display:flex;animation:pFade .2s ease-out both} :is(#mapPanel,#qlog) .mtravel b{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#eea24a} :is(#mapPanel,#qlog) .mtravel small{font:calc(9.5px * var(--k)) var(--f-body);color:var(--bone-lo)} :is(#mapPanel,#qlog) .mtravel div{display:flex;align-items:center;gap:8px;margin-top:calc(6px * var(--k))} :is(#mapPanel,#qlog) .mtravel em{font:italic calc(10px * var(--k)) var(--f-body);color:var(--bone-lo)} :is(#mapPanel,#qlog) .mtravel button{padding:calc(4px * var(--k)) calc(16px * var(--k));border:2px solid transparent;border-image:var(--o-fire) 11 fill / 11px / 0 stretch;background:none;color:#241304;font:600 calc(9.5px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer} :is(#mapPanel,#qlog) .mtravel button.x{border-image-source:var(--o-tile);color:var(--bone);padding:calc(4px * var(--k)) calc(9px * var(--k))} /* EXPLAIN (js/ui/explain.js): the pointer label (#callout) without its notch, low in the middle, the dialogue's advance button (.more) beside the text */ #explain{position:fixed;z-index:62;left:50%;bottom:calc(26px + var(--sb, 0px));transform:translateX(-50%);display:none;align-items:center;max-width:min(560px,80vw);pointer-events:auto;cursor:pointer} #explain.on{display:flex} #explain .more{border:0;padding:0;cursor:pointer} /* TEST (js/ui/tests.js): a small button beside Enter World; the panel is the delete dialog's frame with the game menu's tiles */ .mm-hero .mm-desc{font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);color:#eea24a;padding-bottom:calc(8px * var(--k));border-bottom:1px solid rgba(138,106,58,.35);width:100%} .mm-hero h2{text-transform:none;letter-spacing:.08em} /* (a name, not a title: its own spelling) */ .mm-tests .mm-cbox{width:min(760px,92vw);max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain} .mm-tests .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:calc(10px * var(--k)) 0} .mm-tests .tile{aspect-ratio:auto!important;min-height:calc(78px * var(--k));padding:8px 4px;color:var(--bone)} .mm-tests .tile small{font:calc(9px * var(--k))/1.2 var(--f-body);color:var(--bone-lo);text-align:center;padding:0 6px} .mm-tests .tsearch{position:relative;margin:calc(4px * var(--k)) auto 0;max-width:calc(320px * var(--k))} .mm-tests .tsearch input{width:100%;box-sizing:border-box;padding:calc(7px * var(--k)) calc(28px * var(--k)) calc(7px * var(--k)) calc(10px * var(--k));font:calc(11px * var(--k)) var(--f-body);color:var(--bone);background:rgba(0,0,0,.55);border:1px solid var(--bronze-lo);border-radius:0;outline:none;-webkit-appearance:none;appearance:none} .mm-tests .tsearch input::placeholder{color:var(--bone-lo);font-style:italic} .mm-tests .tsearch input:focus{border-color:#eea24a;box-shadow:0 0 calc(8px * var(--k)) rgba(238,162,74,.25)} .mm-tests .tsearch input::-webkit-search-cancel-button{display:none} .mm-tests .tsearch .tsx{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:none;width:calc(24px * var(--k));height:calc(24px * var(--k));padding:0;border:0;background:none;color:var(--bone-lo);font:calc(15px * var(--k))/1 var(--f-body);cursor:pointer} .mm-tests .tsearch.has .tsx{display:block} .mm-tests .tnone{margin:calc(14px * var(--k)) 0;font-style:italic} body.testrun #zone::after{content:"Test · not saved";display:block;margin-top:4px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#3fe6d2} /* a city's name over its first sight (Story.arriveCityScene): the name in a calligraphic hand, gilded, the UI's divider above it, the title line between the UI's flourishes below; it drifts in and settles, then fades */ #cityTitle{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4px * var(--k));pointer-events:none;z-index:45;opacity:0;transition:opacity 1.8s ease} #cityTitle.on{opacity:1} #cityTitle .ct-orn{width:calc(300px * var(--k));height:calc(30px * var(--k));background:var(--o-div) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))} #cityTitle .ct-name{font:400 calc(92px * var(--k))/1.05 'Pinyon Script', var(--f-display);padding:0 .3em .08em;color:#f0c46a;background:linear-gradient(180deg,#fff4d0 0%,#f2c66c 42%,#a8702a 68%,#f5d68c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 5px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(238,162,74,.35));transform:translateY(calc(14px * var(--k))) scale(.94);transition:transform 4s cubic-bezier(.16,.7,.2,1)} #cityTitle.on .ct-name{transform:none;animation:ctWrite 2.8s cubic-bezier(.45,.1,.4,1) .35s both} /* the name is written out, left to right, as by a pen: a slanted soft edge sweeps across the letters */ #cityTitle .ct-name{-webkit-mask:linear-gradient(100deg,#000 46%,transparent 54%) 100% 0/260% 100% no-repeat;mask:linear-gradient(100deg,#000 46%,transparent 54%) 100% 0/260% 100% no-repeat} @keyframes ctWrite{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}} #cityTitle .ct-sub{display:flex;align-items:center;gap:calc(16px * var(--k));font:600 calc(19px * var(--k)) var(--f-display);letter-spacing:.44em;text-transform:uppercase;color:var(--bone);text-shadow:0 2px 6px #000,0 0 12px rgba(0,0,0,.8);padding-left:.44em} #cityTitle .ct-sub::before,#cityTitle .ct-sub::after{content:"";width:calc(120px * var(--k));height:calc(20px * var(--k));background:var(--o-fl-l) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))} #cityTitle .ct-sub::after{background-image:var(--o-fl-r)} body.flight .npc-label,body.flight .bark{opacity:0!important;transition:opacity .4s} /* the turn-your-phone card: the logo, a phone that turns, one line under an ornament; the rotation-lock hint only if nothing happens for a while */ #rotate{gap:0} #rotate .logo{width:min(64%,340px)!important;margin-bottom:28px!important} #rotate .phone{width:46px!important;height:78px!important;border-width:2px!important;border-style:solid!important;border-color:#eea24a;border-radius:9px!important;box-shadow:0 0 18px rgba(238,162,74,.35);animation:turnphone 2.4s cubic-bezier(.6,0,.3,1) infinite!important} #rotate .phone i{background:#eea24a} #rotate h1{margin-top:26px!important;padding-top:calc(16px);background:var(--o-div) center top/180px 14px no-repeat;font:600 15px/1.3 var(--f-display)!important;letter-spacing:.32em!important;color:var(--bone)!important} #rotate .lock{margin-top:22px;font:italic 13px/1.4 var(--f-body);color:var(--bone-lo);opacity:0;animation:rotLock .8s ease 5s forwards} @keyframes rotLock{to{opacity:.85}} /* the install dialog: the delete dialog's frame and flourishes, over the loading screen, closed by OK */ #install.mm-confirm{position:fixed;z-index:85} #install.mm-confirm.on{display:flex;animation:pFade .3s ease-out both} #install .mm-cbox{width:min(calc(340px * var(--k)),88vw)} #install .lead{color:var(--bone)} #install svg{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:var(--bone);stroke-width:1.8} #install .mm-cbtns button.ib{border-image-source:var(--o-fire);color:#241304} /* phone: the bag's cells as big as the page allows — the tabs in a column at the grid's left, the page's top padding only what the close button needs */ body.touch #inv.open .bagwrap{position:relative;padding-top:calc(38px + var(--st))!important;padding-bottom:calc(8px + var(--sb))!important;padding-left:64px!important} body.touch #inv.open .itabs{position:absolute;left:18px;top:50%;transform:translateY(-50%);flex-direction:column;margin:0;gap:8px} body.touch #inv.open .itabs button{width:38px;height:38px} /* completely unnecessary: the phone turns from Kharos orange to Kharos turquoise as it tips over, and glows once it lies right */ #rotate .phone{animation:turnphone 2.4s cubic-bezier(.6,0,.3,1) infinite,phoneHue 2.4s cubic-bezier(.6,0,.3,1) infinite!important} #rotate .phone i{animation:phoneHueDot 2.4s cubic-bezier(.6,0,.3,1) infinite} @keyframes phoneHue{0%,20%{border-color:#eea24a;box-shadow:0 0 18px rgba(238,162,74,.35)}55%{border-color:#3fe6d2;box-shadow:0 0 14px rgba(63,230,210,.4)}62%,80%{border-color:#8ffff0;box-shadow:0 0 26px 4px rgba(63,230,210,.85),0 0 60px 10px rgba(63,230,210,.35),inset 0 0 14px rgba(63,230,210,.5)}90%{border-color:#3fe6d2;box-shadow:0 0 16px rgba(63,230,210,.4)}100%{border-color:#eea24a;box-shadow:0 0 18px rgba(238,162,74,.35)}} @keyframes phoneHueDot{0%,20%,100%{background:#eea24a}55%,90%{background:#3fe6d2}62%,80%{background:#c8fff8;box-shadow:0 0 8px #3fe6d2}} .msg.big.long{letter-spacing:.2em} body.touch .msg.big::before,body.touch .msg.big::after{width:50px;flex:none} body.touch .msg.big.long{letter-spacing:.14em;font-size:calc(16px * var(--k))!important} /* the shop's bag: sized to fit (Shop.fitGrid), never scrolled; the sell-all buttons in a row, the one asking for sure glows */ #shop .sgrid{overflow:hidden!important;flex:none;justify-content:start;align-content:start} #shop .sgrid .cell{aspect-ratio:auto!important} #shop .salls{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(10px * var(--k))} #shop .salls .sall{margin-top:0!important} #shop .sall.sure{border-image-source:var(--o-fire)!important;color:#241304!important} /* settings on a phone: every option a finger's size, a little air between them */ body.touch #help .opt{min-height:40px;min-width:48px;padding-left:12px!important;padding-right:12px!important;touch-action:pan-y} /* (the list still scrolls when a drag starts on a button) */ body.touch #help .seg{gap:4px} body.touch #help .hrow{min-height:48px} body.touch #help .xclose{touch-action:none} body.touch #help .hlist{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #leaveAsk.mm-confirm,#restartAsk.mm-confirm{position:fixed;z-index:95}#leaveAsk.mm-confirm.on,#restartAsk.mm-confirm.on{display:flex;animation:pFade .2s ease-out both} #minimap{pointer-events:auto;cursor:pointer;touch-action:none} /* a tap opens the big map */ /* every pointer label wraps onto a second or third line instead of running across the screen */ #callout{max-width:min(calc(250px * var(--k,1)),38vw)!important;white-space:normal!important} #callout span{white-space:normal!important;line-height:1.22!important;text-wrap:balance} /* the healing potion: a round button like the context actions, fixed above the skills; the charges on a plate, the wait after a drink as a dark sweep */ .tpot{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;pointer-events:auto;touch-action:none;cursor:pointer;border:2px solid #c0443a;outline:1px solid #000;background:radial-gradient(circle at 50% 40%,#5a1c18,#1c0a09);box-shadow:0 0 12px rgba(0,0,0,.6)} .tpot svg{position:relative;width:54%;height:54%;fill:none;stroke:#f0d8c0;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round} .tpot svg .liq{fill:#e0342a;stroke:none} .tpot .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.72) calc(var(--p,0) * 360deg),transparent 0);pointer-events:none;z-index:1} .tpot b{position:absolute;right:-6px;top:-6px;z-index:2;min-width:20px;padding:0 4px;border-radius:10px;background:#0a0b0c;border:1px solid #eea24a;color:#ffdcb4;font:600 11px/1.5 var(--f-display);text-align:center} .tpot kbd{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:2;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 .tpot kbd{display:none} .tpot.empty{filter:grayscale(.85) brightness(.6)} .tpot.low{border-color:#ff6a50;box-shadow:0 0 18px rgba(255,90,60,.75);animation:actpulse 1.4s ease-in-out infinite} .tpot:active{transform:scale(.94)} /* ---------------- Sand Rifts (js/story/rift.js): violet ---------------- */ /* the bars, top middle: the rift's fill (the guardian's life once it comes), the time beside it; the target's bar steps down under them */ #riftHud{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top, 0px));transform:translateX(-50%);width:min(calc(400px * var(--k)),52vw);display:none;pointer-events:none;text-align:center;z-index:5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))} #riftHud.on{display:block} #riftHud .rt{display:flex;justify-content:center;gap:10px;align-items:baseline;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#d8b0ff;text-shadow:0 1px 2px #000} #riftHud .rt span{letter-spacing:.08em;color:#f0e2ff;text-transform:none;font-size:calc(13px * var(--k))} #riftHud .rbar{position:relative;height:calc(17px * var(--k));margin-top:5px;padding:1.5px;background:#8a5ac8;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)} #riftHud .rbar::before{content:"";position:absolute;inset:1.5px;background:#0c0714;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)} #riftHud .rbar i{position:relative;display:block;height:100%;width:0;background:linear-gradient(#b870ff,#5a1a9a);clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%);transition:width .25s} #riftHud.boss .rbar i{background:linear-gradient(#e060ff,#7a108a)} #riftHud .rbar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.08em} #riftHud .rtime{position:relative;height:calc(6px * var(--k));margin:7px calc(30px * var(--k)) 0;background:#0c0a08;outline:1px solid rgba(238,162,74,.45)} #riftHud .rtime i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b8862a,#eea24a);transition:width .2s linear} #riftHud .rtime em{position:absolute;left:100%;margin-left:8px;top:50%;transform:translateY(-50%);font:600 calc(12px * var(--k)) var(--f-display);font-style:normal;color:#eea24a;text-shadow:0 1px 2px #000} #riftHud.low .rtime i{background:linear-gradient(90deg,#a02818,#e05030)}#riftHud.low .rtime em{color:#ff7050} #riftHud.late .rtime{outline-color:rgba(120,120,120,.4)}#riftHud.late .rtime em{color:#8a8680} #riftHud.bump .rbar{animation:riftBump .35s ease-out} @keyframes riftBump{0%{filter:brightness(1.8)}100%{filter:brightness(1)}} body.inrift #target{top:calc(8px + 60px * var(--k) + env(safe-area-inset-top, 0px))} /* the veil: while in a rift, violet at the screen's edge, slowly turning streaks and motes drifting up — quiet, but you know where you are */ #riftVeil{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s;overflow:hidden} body.inrift #riftVeil{opacity:var(--rv,1)} /* (--rv: steps back under the blood veil as the hero's life runs out, js/render/bloodveil.js) */ #riftVeil .a{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 52%,rgba(130,50,210,.24) 74%,rgba(80,14,150,.62) 100%);animation:riftBreath 5s ease-in-out infinite} #riftVeil .b{position:absolute;inset:-25%;opacity:.85; background:conic-gradient(from 0deg,transparent 0 6%,rgba(180,110,255,.22) 9%,transparent 13% 31%,rgba(150,80,240,.18) 35%,transparent 40% 58%,rgba(200,140,255,.2) 62%,transparent 67% 84%,rgba(160,90,250,.18) 88%,transparent 92%); -webkit-mask:radial-gradient(ellipse 48% 45% at 50% 50%,transparent 70%,#000 100%);mask:radial-gradient(ellipse 48% 45% at 50% 50%,transparent 70%,#000 100%);animation:riftTurn 40s linear infinite} body:not(.inrift) #riftVeil .a,body:not(.inrift) #riftVeil .b,body:not(.inrift) #riftVeil i{animation-play-state:paused} #riftVeil i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#e0c0ff;box-shadow:0 0 8px 2px rgba(180,110,255,.8);opacity:0;animation:riftMote linear infinite} @keyframes riftMote{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}100%{transform:translate(var(--dx,20px),-70vh);opacity:0}} @keyframes riftTurn{to{transform:rotate(360deg)}} @keyframes riftBreath{0%,100%{opacity:.85}50%{opacity:1}} /* the gate's use button and its asking */ :is(#riftAsk,#fullAsk,#newsAsk).mm-confirm,#riftLeave.mm-confirm,#mkLeave.mm-confirm,#dunLeave.mm-confirm,#ferryAsk.mm-confirm,#hintAsk.mm-confirm,#mkInfo.mm-confirm,#logView.mm-confirm{position:fixed;z-index:95}:is(#riftAsk,#fullAsk,#newsAsk).mm-confirm.on,#riftLeave.mm-confirm.on,#mkLeave.mm-confirm.on,#dunLeave.mm-confirm.on,#ferryAsk.mm-confirm.on,#hintAsk.mm-confirm.on,#mkInfo.mm-confirm.on,#logView.mm-confirm.on{display:flex;animation:pFade .2s ease-out both} .mm-confirm.rift .mm-cbox h3{color:#d8b0ff} .mm-confirm.rift .rcost{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--bone)} .mm-confirm.rift .rcost i{width:14px;height:14px;transform:rotate(45deg);background:linear-gradient(135deg,#e0c0ff,#7a2ac8);box-shadow:0 0 10px rgba(179,107,255,.8)} .mm-confirm.rift .rcost b{color:#e0c0ff} .mm-confirm.rift button.pri{border-color:#b36bff!important} .mm-confirm.rift button:disabled{opacity:.45;pointer-events:none} /* a new item in the bag's second tab: our small round NEW badge (the side buttons' gold dot) until it is looked at */ #inv .misc .cell{position:relative} #inv .misc .cell .ndot{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe2a8,#eea24a 55%,#b86a1c);border:1px solid #2a1606;box-shadow:0 0 8px rgba(238,162,74,.85);pointer-events:none;animation:ndotPulse 1.6s ease-in-out infinite} @keyframes ndotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} /* a pointer label that only explains: the Explain's advance button inside its plate, the whole plate takes the tap */ #callout .more{position:static!important;flex:none;width:calc(24px * var(--k));height:calc(24px * var(--k));display:flex;align-items:center;justify-content:center;padding:0;border:0;background:#eea24a;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:morepulse 1.4s ease-in-out infinite;cursor:pointer} #callout .more[hidden]{display:none!important} #callout .more svg{width:70%;height:70%;fill:none;stroke:#1a1409;stroke-width:3;stroke-linecap:square} #callout.next,#callout.anchor.next{cursor:pointer;pointer-events:auto} /* (an anchored label lets clicks through to what it points at — but one with the advance button must take them: the rift's guide could not be passed) */ .tpot[hidden]{display:none!important} /* ---------------- the hero editor (after Diablo Immortal's "Customize"): tabs down the left, the hero close in the middle, the choices on the right ---------------- */ #mainmenu[data-mode="custom"] .mm-custom{display:block} #mainmenu[data-mode="custom"]::before{background:linear-gradient(90deg,rgba(6,6,9,.75),transparent 26%,transparent 60%,rgba(6,6,9,.8))} .mm-custom{display:none;position:absolute;inset:0;pointer-events:none} .mm-custom>*{pointer-events:auto} .cu-tabs{position:absolute;left:calc(var(--mmx) + var(--sl));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:calc(16px * var(--k))} .cu-tab.on{border-image-source:var(--o-plate-gold)!important;filter:drop-shadow(0 0 12px rgba(238,162,74,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.7));transform:rotate(45deg) scale(1.1)} .cu-tab.on svg{stroke:#ffd08a} .cu-panel{position:absolute;right:0;top:0;bottom:0;width:clamp(200px,22%,290px);display:flex;flex-direction:column;box-sizing:border-box;padding:calc(16px + env(safe-area-inset-top, 0px)) calc(16px + var(--sr)) calc(84px + env(safe-area-inset-bottom, 0px)) 34px; background:linear-gradient(270deg,transparent calc(100% - 16px),rgba(217,205,178,.05) calc(100% - 11px),rgba(217,205,178,.2)),linear-gradient(270deg,#26282c,#202226); -webkit-mask:linear-gradient(#000,#000) right top/calc(100% - 17px) 100% no-repeat,var(--o-torn-l) left top/18px 160px repeat-y;mask:linear-gradient(#000,#000) right top/calc(100% - 17px) 100% no-repeat,var(--o-torn-l) left top/18px 160px repeat-y; filter:drop-shadow(-6px 0 14px rgba(0,0,0,.55));animation:culeaf .35s cubic-bezier(.2,.8,.3,1)} /* (the editor's choices on a torn leaf, the whole right side: it slides in from the edge) */ @keyframes culeaf{from{transform:translateX(100%)}} .cu-panel h3{margin:0 0 calc(10px * var(--k));display:flex;align-items:center;justify-content:center;gap:10px;font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)} .cu-panel h3::before,.cu-panel h3::after{content:"";width:calc(34px * var(--k));height:calc(9px * var(--k));background:var(--o-fl-l) center/contain no-repeat} .cu-panel h3::after{background-image:var(--o-fl-r)} .cu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;justify-items:center;gap:calc(12px * var(--k)) calc(8px * var(--k));flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:8px 4px} .cu-opt{position:relative;width:100%;max-width:calc(58px * var(--k));aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--bone-lo);font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.06em; border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));transition:color .15s,transform .15s} /* (the inventory's cell: the same tile, gold when chosen) */ .cu-opt:hover{color:var(--bone);border-image-source:var(--o-tile-gold)} .cu-opt.down{transform:scale(.94)} .cu-opt.sym svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round} /* (Female / Male: the signs, in the tiles' own size) */ .cu-opt.on{color:#ffd08a;border-image-source:var(--o-tile-gold);filter:drop-shadow(0 0 10px rgba(238,162,74,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.55))} .cu-opt.sw i{width:56%;height:56%;transform:rotate(45deg);background:linear-gradient(135deg,var(--hr) 0 50%,var(--sk) 50% 100%);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} #customDone{position:absolute;right:calc(16px + var(--sr));bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:calc(clamp(200px,22%,290px) - 50px - var(--sr));animation:culeaf .35s cubic-bezier(.2,.8,.3,1)} /* (at the foot of the leaf, as wide as it) */ body.touch #customDone{width:calc(clamp(170px,23vw,230px) - 50px - var(--sr))} /* a phone: the choices in two columns (the panel narrower, it scrolls), the tabs smaller and further in from the edge — more of the hero shows */ body.touch .cu-grid{grid-template-columns:repeat(2,minmax(0,1fr))} body.touch .cu-panel{width:clamp(170px,23vw,230px)} /* (two tiles a row at most: a narrower leaf, more of the hero) */ body.touch .cu-tabs{gap:calc(14px * var(--k))} body.touch .cu-tab{width:calc(46px * var(--k));height:calc(46px * var(--k))} /* (turned squares: the gap has to clear their corners) */ /* a wide screen: the editor's tabs, panel and button come in from the edges */ .mm-alt{margin-top:calc(2px * var(--k));padding:calc(6px * var(--k)) calc(26px * var(--k));border:2px solid transparent;border-image:var(--o-plate) 11 fill / 11px / 0 stretch;background:none;cursor:pointer;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)} .mm-alt:hover{border-image-source:var(--o-plate-gold)} .mm-info.none .mm-alt{display:none} .cu-tab svg{stroke:var(--bone)!important;opacity:.85} .cu-tab.on svg{stroke:#ffd08a!important;opacity:1} /* the loading screen (Game.loadScreen): between lands and after the selection, a painting of the land ahead (forest, cave, desert), its name under its flourishes and a tip to read, the painting drifting slowly closer; over the fade and the character screens (70), under the dialogs. The foot: a dark band rising from the bottom */ #zload{position:fixed;inset:0;z-index:72;background:#000;opacity:0;pointer-events:none;transition:opacity .45s ease;overflow:hidden} #zload.on{opacity:1;pointer-events:auto} #zload .zl-img{position:absolute;inset:0;background:#000 center/cover no-repeat;transform:scale(1.02);transition:transform 6s linear} #zload.on .zl-img{transform:scale(1.08)} #zload .zl-img{z-index:0}#zload .zl-foot{z-index:2} #zload::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 72% 68% at 50% 42%,transparent 25%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.96) 100%),linear-gradient(transparent 48%,rgba(6,6,9,.95));box-shadow:inset 0 0 200px 80px rgba(0,0,0,.9)} /* (a heavy vignette over the whole screen, not in the picture: the picture is scaled up and its own edges — the darkest part — were cut off) */ #zload .zl-foot{position:absolute;left:0;right:0;bottom:calc(18px * var(--k) + var(--sb));display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--k));padding:0 calc(24px + var(--sl)) 0 calc(24px + var(--sr));text-align:center} #zload .zl-name{margin:0;display:flex;align-items:center;gap:12px;font:600 calc(17px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);text-shadow:0 2px 12px #000} #zload .zl-name::before,#zload .zl-name::after{content:"";width:calc(46px * var(--k));height:calc(11px * var(--k));background:var(--o-fl-l) center/contain no-repeat} #zload .zl-name::after{background-image:var(--o-fl-r)} #zload .zl-tip{max-width:min(92vw,calc(560px * var(--k)));padding-top:calc(14px * var(--k));background:var(--o-div) center top/calc(200px * var(--k)) calc(12px * var(--k)) no-repeat} #zload .zl-tip b{display:block;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#eea24a;margin-bottom:calc(4px * var(--k))} #zload .zl-tip p{margin:0;font:calc(13px * var(--k))/1.45 var(--f-body);color:#d9cdb2;text-shadow:0 1px 4px #000} #zload .zl-bar{width:min(60vw,calc(260px * var(--k)));height:2px;margin-top:calc(6px * var(--k));background:rgba(138,106,58,.3);overflow:hidden} #zload .zl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a6a3a,#eea24a);box-shadow:0 0 6px rgba(238,162,74,.6)} #zload.on .zl-bar i{width:100%;transition:width var(--zl-dur,2.4s) linear} /* the second sketches: a sorcerer, a warrior woman, a ranger woman (sketchAlt) — in the slot, the HUD's portrait and on the skills page; each its own crop of the face */ .mm-port.alt i,#tLvl.alt .d i{background-image:url(../assets/ui/sorceress-m-sketch.webp);background-position:32% 23%} .mm-port.war.alt i,#tLvl.war.alt .d i{background-image:url(../assets/ui/warrior-f-sketch.webp);background-position:74% 13%} .mm-port.rgr.alt i,#tLvl.rgr.alt .d i{background-image:url(../assets/ui/ranger-f-sketch.webp);background-position:69% 18%} #skills.alt .spage::before{background-image:url(../assets/ui/sorceress-m-sketch.webp)} #skills.alt[data-cls=warrior] .spage::before{background-image:url(../assets/ui/warrior-f-sketch.webp)} #skills.alt[data-cls=ranger] .spage::before{background-image:url(../assets/ui/ranger-f-sketch.webp)} /* Ashkarra's life (js/story/town.js): side-quest marks in blue, the tracker of a side quest blue; the forge and the pets in the merchant's window */ .npc-label.quest.side b{color:#6f9dff;text-shadow:0 0 8px #000,0 0 6px rgba(91,141,255,.8)} .npc-label.quest.rift b{color:#c690ff;text-shadow:0 0 8px #000,0 0 6px rgba(179,107,255,.8)} .npc-label.quest.turn b::before{content:"?"} #quest.side .qt{color:#7aa6ff}#quest.side .qt::before{background:#7aa6ff} #shop .cat .ci img{transform:rotate(-45deg);width:78%;height:78%;object-fit:contain} #shop .cat.up small{grid-column:2 / 4;grid-row:4;text-align:left;color:var(--bone-lo)} #shop .cat.pet small.pd{grid-column:2 / 4;grid-row:4;text-align:left;font-style:italic;white-space:normal;line-height:1.35} #shop .cat.pet small.own{grid-column:2 / 4;grid-row:3;text-align:left;color:#eea24a} #shop .cat.pet.on{border-image-source:var(--o-card-gold);filter:drop-shadow(0 0 8px rgba(238,162,74,.35))} #shop .cat.pet .ci svg,#shop.pets .cat .ci svg{stroke:#eea24a} #shop.pets .shsell{display:none}#shop.pets .cats{grid-template-columns:repeat(3,1fr)}#shop.pets .shbuy{max-width:none} #shop .shnone{font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #shop .shmats{position:absolute;top:calc(12px + var(--st));right:calc(150px + var(--sr));display:flex;gap:calc(12px * var(--k));font:600 calc(12px * var(--k)) var(--f-display)} #shop .shmats[hidden]{display:none} #shop .shmats span{display:flex;align-items:center;gap:4px;color:var(--mc)} #shop .shmats svg{width:calc(15px * var(--k));height:calc(15px * var(--k));fill:none;stroke:var(--mc);stroke-width:1.6} .ip .nm .up{color:#ffdcb4;font-size:.85em;letter-spacing:.04em} body.touch #shop .shmats{right:auto;left:calc(22px + var(--sl));gap:8px} /* (a phone: the top left corner is free, on the right it ran into the title) */ /* the quest log: each quest a header to open (a diamond in its colour — the story gold, a side quest blue —, its title, the step now) and a Follow button */ :is(#mapPanel,#qlog) .mi.quest.side{background:#6f9dff;box-shadow:0 0 8px rgba(111,157,255,.7)} #shop .cat b .upn{color:#ffdcb4} #shop .shnone.forgehelp{grid-column:1 / -1;margin:6px 2px 0;line-height:1.45} #shop .mt{color:var(--mc)}#shop .ms{font-style:normal} #shop .petstage{display:block;flex:1;min-height:0;width:100%;margin-top:calc(8px * var(--k))}#shop .petstage[hidden]{display:none} /* the quest window: the Map mirrored (js/ui/questpanel.js) — the map on the left, the list on the right on a leaf torn along its left edge */ #qlog{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;background:var(--an-1);pointer-events:auto}#qlog.open{display:flex} #qlog .mlist.lr{width:clamp(320px,36%,580px);margin-right:0;margin-left:-16px;padding:0 calc(14px + var(--sr)) 26px 30px!important; background:linear-gradient(270deg,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(270deg,rgba(38,40,44,.5),rgba(30,32,35,.58)),var(--tex-panel) 0 0/384px 384px,#222427!important; -webkit-mask:linear-gradient(#000,#000) right top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-l) left top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x; mask:linear-gradient(#000,#000) right top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-l) left top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x} #qlog .mpage{flex-direction:column;padding:0 30px calc(12px + var(--sb));box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8),inset -22px 0 26px -18px rgba(0,0,0,.8)} #qlog .mlist.ll{width:clamp(220px,22%,320px)} #qlog .mpage .plate-title{flex:none;width:100%;padding:calc(8px + var(--st)) 0 calc(24px * var(--k))!important} #qlog.opening .mlist.ll{animation:pFromL .45s var(--ease-out) both}#qlog.opening .mlist.lr{animation:pFromR .45s var(--ease-out) both}#qlog.opening .qitem,#qlog.opening .lr h3{animation:pFromR .4s var(--ease-out) .15s both} /* (the leaves fly in from the sides, as the menu's) */ /* a quest: a header to tap (its diamond, its title, the step now), opening to the giver, the tale and the steps */ #qlog .qitem{margin:0 0 6px;border:1px solid transparent;border-radius:4px;transition:background .2s,border-color .2s} #qlog .qitem.sel{background:rgba(238,162,74,.1);border-color:rgba(238,162,74,.35)}#qlog .qitem.side.sel{background:rgba(111,157,255,.1);border-color:rgba(111,157,255,.4)} #qlog .qhd{display:flex;align-items:center;gap:calc(9px * var(--k));padding:calc(6px * var(--k)) calc(8px * var(--k));cursor:pointer} #qlog .qhd:hover{background:rgba(217,205,178,.05)} #qlog .qd{flex:none;width:calc(9px * var(--k));height:calc(9px * var(--k));transform:rotate(45deg);background:#eea24a;box-shadow:0 0 6px rgba(238,162,74,.6)} #qlog .qitem.side .qd{background:#6f9dff;box-shadow:0 0 6px rgba(111,157,255,.6)}#qlog .qitem.done .qd{background:var(--bone-lo);box-shadow:none} #qlog .qhx{flex:1;min-width:0} #qlog .qhx b{display:block;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.08em;color:#eea24a}#qlog .qitem.side .qhx b{color:#8fb2ff}#qlog .qitem.done .qhx b{color:var(--bone-lo)} #qlog .qhx small{display:block;margin-top:2px;font:italic calc(9.5px * var(--k))/1.3 var(--f-body);color:var(--bone-lo)} #qlog .qitem.open .qhx small{display:none} #qlog .qf{flex:none;font:calc(8.5px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:#eea24a;padding:1px 7px;border:1px solid rgba(238,162,74,.55)} #qlog .qitem.side .qf{color:#8fb2ff;border-color:rgba(111,157,255,.6)} #qlog .qc{flex:none;width:calc(6px * var(--k));height:calc(6px * var(--k));border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s} #qlog .qitem.open .qc{transform:rotate(225deg) translate(-1px,-1px)} #qlog .qx{padding:0 calc(10px * var(--k)) calc(8px * var(--k)) calc(26px * var(--k))} #qlog .qwhere{display:flex;align-items:center;gap:8px;margin:2px 0 7px;padding:calc(5px * var(--k)) calc(6px * var(--k)) calc(5px * var(--k)) calc(9px * var(--k));border-left:2px solid #eea24a;background:rgba(238,162,74,.08)} #qlog .qitem.side .qwhere{border-left-color:#6f9dff;background:rgba(111,157,255,.09)} #qlog .qwhere span{flex:1;min-width:0;font:calc(9.5px * var(--k))/1.3 var(--f-body);color:var(--bone)} #qlog .qwhere em{display:block;font:italic calc(9px * var(--k)) var(--f-body);color:#ffb08a} #qlog .qwhere b{display:block;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.08em;color:var(--bone)} #qlog .qnav{flex:none;width:calc(30px * var(--k));height:calc(30px * var(--k));display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;cursor:pointer} #qlog .qnav:hover{border-image-source:var(--o-tile-gold)} #qlog .qnav svg{width:calc(15px * var(--k));height:calc(15px * var(--k));fill:none;stroke:#eea24a;stroke-width:1.8} #qlog .qg{font:calc(8.5px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone-lo)} #qlog .qx p{margin:5px 0;font:calc(9.5px * var(--k))/1.45 var(--f-body);color:var(--bone)} #qlog .qx ul{list-style:none;margin:0;padding:0} #qlog .qx li{position:relative;padding-left:16px;font:calc(9.5px * var(--k))/1.55 var(--f-body);color:var(--bone)} #qlog .qx li.ok{color:var(--bone-lo);text-decoration:line-through}#qlog .qx li.ok::before{content:"✓";position:absolute;left:0;color:#7fcf6a;text-decoration:none} #qlog .qx li.now::before{content:"";position:absolute;left:2px;top:calc(5px * var(--k));width:calc(6px * var(--k));height:calc(6px * var(--k));background:#eea24a;transform:rotate(45deg)} #qlog .qitem.side .qx li.now::before{background:#6f9dff} #qlog h3.side{color:#7aa6ff}#qlog .none{color:var(--bone-lo);font-style:italic;font-size:calc(10px * var(--k))} body.touch #qlog .mlist.ll{width:clamp(170px,22%,240px)}body.touch #qlog .mlist.lr{width:clamp(230px,32%,330px)} /* on a phone the leaves are drawers: a handle at each edge of the map (the Map's and the Quests' signs from the menu) docks and undocks its leaf; the map takes the room */ #qlog .ldock{display:none;position:absolute;top:50%;z-index:5;width:calc(15px * var(--k));height:calc(46px * var(--k));padding:0;transform:translateY(-50%);align-items:center;justify-content:center;border:0;background:rgba(14,15,17,.82);cursor:pointer} #qlog .ldock::before{content:"";width:calc(6px * var(--k));height:calc(6px * var(--k));border:solid #eea24a;border-width:1.6px 1.6px 0 0;transform:rotate(45deg);margin-left:-3px} /* (a thin tab on the map's edge, one chevron: toward the map pulls the leaf out, toward the edge puts it away) */ #qlog .ldock.l{left:0;border-radius:0 7px 7px 0;box-shadow:inset -1px 0 0 rgba(238,162,74,.45)} #qlog .ldock.r{right:0;border-radius:7px 0 0 7px;box-shadow:inset 1px 0 0 rgba(238,162,74,.45)} #qlog .ldock.r::before{transform:rotate(225deg);margin:0 -3px 0 0} #qlog .ldock.l.on::before{transform:rotate(225deg);margin:0 -3px 0 0}#qlog .ldock.r.on::before{transform:rotate(45deg);margin:0 0 0 -3px} body.touch #qlog .ldock{display:flex} body.touch #qlog .mpage{padding-left:20px;padding-right:20px} /* (the thin tabs need little room: the map gets the rest) */ body.touch #qlog .mlist{transition:width .3s var(--ease-out),margin .3s var(--ease-out),padding .3s var(--ease-out),opacity .25s} body.touch #qlog .mlist.shut{width:0!important;margin:0!important;padding-left:0!important;padding-right:0!important;opacity:0;pointer-events:none} body.touch #qlog .mlist.shut *{white-space:nowrap} /* the tracker, a side quest's: its title, its diamond and its "New quest" in blue */ #quest.side .qf{color:#cfe0ff;text-shadow:0 0 8px rgba(111,157,255,.9),0 1px 2px #000} /* one window, two tabs over the list (js/ui/questpanel.js): the tabs stay, the list under them scrolls */ #qlog .mlist{display:flex;flex-direction:column;overflow:hidden!important} #qlog .lhd{flex:none;padding:calc(12px * var(--k) + var(--st)) 0 calc(14px * var(--k));text-align:center;font:600 calc(10.5px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--bone);background:var(--o-div) center bottom/calc(150px * var(--k)) calc(12px * var(--k)) no-repeat} /* (each leaf's name over its own divider, as the menu's tiles) */ #qlog .lr .lhd{padding-right:calc(30px * var(--k))} /* (clear of the ✕) */ #qlog :is(.lbody,.qbody){flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:20px} /* a person's card on the map */ #qlog .mnpc{position:absolute;z-index:4;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:1px;max-width:calc(230px * var(--k));padding:calc(6px * var(--k)) calc(13px * var(--k)) calc(7px * var(--k));text-align:center;pointer-events:none; border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(rgba(16,17,19,.96),rgba(9,10,11,.97));filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))} #qlog .mnpc.on{display:flex;animation:pFade .15s ease-out both} #qlog .mnpc::after{content:'';position:absolute;left:calc(50% + var(--nx, 0px));bottom:-6px;width:9px;height:9px;margin-left:-5px;transform:rotate(45deg);background:#0b0c0d;border:solid var(--bronze-lo);border-width:0 2px 2px 0} #qlog .mnpc.below::after{bottom:auto;top:-6px;border-width:2px 0 0 2px} #qlog .mnpc b{font:600 calc(10.5px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#eea24a} #qlog .mnpc small{font:calc(9px * var(--k)) var(--f-body);color:var(--bone-lo)} #qlog .mnpc em{display:block;margin-top:2px;font:italic calc(10px * var(--k)) var(--f-body);color:#ffdcb4} #qlog .mnpc em.side{color:#8fb2ff} #qlog .mnpc.side b{color:#8fb2ff} #qlog .mnpc.rift b{color:#d8b0ff} #qlog .mnpc em.svc{color:var(--bone)} :is(#mapPanel,#qlog) .mi.svc{width:calc(16px * var(--k));height:calc(16px * var(--k));margin-top:0;transform:none;border:0;background:center/contain no-repeat} /* the phone's camera distance in the settings (a desktop zooms with the wheel) */ #help .camrow{display:none}body.touch #help .camrow{display:flex} /* every scroll area: a thin bronze thumb on nothing, never the browser's white bars (the settings and the menu showed them in a narrow window) */ *{scrollbar-width:thin;scrollbar-color:rgba(138,106,58,.5) transparent} ::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-thumb{background:rgba(138,106,58,.5);border-radius:3px} /* the menu's leaves in a narrow window: the tiles' columns may shrink, the names shrink with the leaf (a long word — Einstellungen — pushed the right column out of it) */ #gmenu .gside{container-type:inline-size;overflow-x:hidden} #gmenu .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} body.touch #gmenu .tile span{font-size:clamp(8.5px,4.2cqi,11px)!important;letter-spacing:.1em!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* a desktop: the leaves wide enough for the tiles' names at their size (shrinking the names made them unreadable) */ body:not(.touch) #gmenu .gside{width:clamp(340px,30%,420px)!important;flex:none} /* the settings' names as wide as they are (a fixed 66 px let "Renderauflösung" run under its buttons), the buttons in the rest, wrapping */ #help .hrow>span{width:auto!important;min-width:calc(66px * var(--k));max-width:45%;hyphens:auto} #help .hrow .seg{flex:1 1 0;min-width:0} /* a way out under the pointer: where it leads (Input: exitTip) */ /* (its look: THE WAY-OUT SIGN at the end of this file — the plain dark box and the loot label's tag were replaced, the user's 08.10.: 'sieht kacke aus auf Desktop') */ /* the interface softened (settings: Soft): the UI's layers under a hair of blur, the world, the vignette and the loading picture untouched */ body.uisoft :is(#labels,#minimapWrap,#zone,#side,#callout,#quest,#feed,#target,#msgs,#lifeGlobe,#manaGlobe:not(.ready),#belt,#xpText,#inv,#cmp,#tip,#lvlup,#feat,#dialogue,#qlog,#skills,#mainmenu,#chron,#gmenu,#help,#touch,#icard,#shop,#petp,#fps){filter:blur(.35px)} body.uisoft #manaGlobe.ready{filter:blur(.35px) drop-shadow(0 0 12px rgba(140,200,255,.7))}body.uisoft #exitTip{filter:blur(.35px) drop-shadow(0 3px 8px rgba(0,0,0,.6))} /* the traders' window centred in the height on a desktop (it clung to the top and popped in there); the sell / salvage-all buttons: a sign in the colour each clears */ body:not(.touch) #shop .shbody{align-items:flex-start} #shop .salls{display:flex;align-items:center;gap:calc(8px * var(--k))!important} #shop .salls .slab{font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-right:4px} #shop .sall{width:calc(38px * var(--k));height:calc(38px * var(--k));padding:0!important;display:flex!important;align-items:center;justify-content:center;border-image-source:var(--o-tile)!important} #shop .sall svg{width:62%;height:62%;fill:none;stroke:var(--rc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--rg))} #shop .sall{overflow:visible}#shop .sall img.art-ic{width:118%;height:118%;margin:-9%;max-width:none;filter:drop-shadow(0 0 4px var(--rg)) drop-shadow(0 2px 2px rgba(0,0,0,.6))} #shop .sall.r-normal{--rc:#e8e2d4;--rg:rgba(232,226,212,.35)}#shop .sall.r-magic{--rc:#6f9dff;--rg:rgba(111,157,255,.6)}#shop .sall.r-rare{--rc:#f5cf3d;--rg:rgba(245,207,61,.55)} #shop .sall:hover{border-image-source:var(--o-tile-gold)!important} /* the question before all yellow goes: a small plate over the window */ #shop .shask{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}#shop .shask.on{display:flex;animation:pFade .15s ease-out both} #shop .shask .box{min-width:calc(260px * var(--k));padding:calc(16px * var(--k)) calc(22px * var(--k));text-align:center;border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(rgba(20,21,24,.98),rgba(10,11,12,.98));filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))} #shop .shask p{margin:0 0 calc(12px * var(--k));font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#f5cf3d}#shop .shask p small{display:block;margin-top:6px;font:calc(11px * var(--k)) var(--f-body);letter-spacing:0;text-transform:none;color:var(--bone)} #shop .shask .box>div{display:flex;gap:10px;justify-content:center} #shop .shask button{padding:calc(6px * var(--k)) calc(18px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:var(--bone);font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer} #shop .shask button.pri{border-image-source:var(--o-fire);color:#241304} /* the item card's buttons on a desktop: one under the other, each the card's whole width (side by side they wrapped unevenly) */ body:not(.touch) #icard .btns{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important} body:not(.touch) #icard .btns button{width:100%!important;flex:none!important;min-width:0!important} body:not(.touch) #icard .btns .ringrow{display:flex;gap:6px}body:not(.touch) #icard .btns .ringrow button{flex:1 1 0!important;width:auto!important} #icard .btns .ringrow{display:flex;gap:6px;flex:1 1 auto;min-width:0} /* the forge's two tabs, the map's plaque: Salvage ◆ Upgrade */ #shop .shtabs{display:none;align-self:center;align-items:center;margin:calc(2px * var(--k)) 0 calc(4px * var(--k));padding:calc(3px * var(--k)) calc(6px * var(--k));border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(#1b1c1f,#0d0e10);box-shadow:0 3px 10px rgba(0,0,0,.7)} #shop.smith .shtabs{display:flex} #shop .shtabs button{border:0;background:none;padding:calc(3px * var(--k)) calc(16px * var(--k));font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-lo);cursor:pointer;transition:color .2s,text-shadow .2s} #shop .shtabs button:hover{color:var(--bone)}#shop .shtabs button.on{color:#eea24a;text-shadow:0 0 10px rgba(238,162,74,.6)} #shop .shtabs i{width:calc(5px * var(--k));height:calc(5px * var(--k));transform:rotate(45deg);background:var(--bronze);flex:none} /* Salvage: the bag alone, centred both ways */ #shop.t-salvage .shbuy,#shop .shup{display:none} #shop.t-salvage .shbody{justify-content:center}#shop.t-salvage .shsell{flex:1 1 auto;max-width:calc(760px * var(--k));align-items:center} /* Upgrade: the hero in her gear on the left (the bag's live figure, borrowed), the bag on the right; five dots on every piece */ #shop.t-upgrade .shbuy{display:none}#shop.t-upgrade .shup{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:calc(12px * var(--k))} #shop.t-upgrade .salls{visibility:hidden} #shop .sdoll{display:flex;align-items:center;gap:calc(14px * var(--k))} #shop .sdoll .sec,#shop .sdoll .pri{display:flex;flex-direction:column;gap:calc(12px * var(--k))} #shop .sdoll .fig{position:relative;flex:none;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%)} #shop .sdoll .fig canvas{position:absolute;inset:0;width:100%;height:100%} #shop .sdoll .eq{position:relative;flex:none;width:var(--eq,78px);height:var(--eq,78px);display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch} #shop .sdoll .eq img{max-width:78%;max-height:78%;pointer-events:none} #shop .sdoll .eq.sel{border-image-source:var(--o-tile-gold);filter:drop-shadow(0 0 6px rgba(238,162,74,.5))} #shop .sdoll .eq[class*=" r-"]::after{content:"";position:absolute;inset:3px;pointer-events:none;border:1.5px solid var(--rc);box-shadow:inset 0 0 10px var(--rg)} #shop .sdoll .eq.r-normal{--rc:rgba(228,224,214,.55);--rg:rgba(228,224,214,.08)}#shop .sdoll .eq.r-magic{--rc:#5b8dff;--rg:rgba(91,141,255,.3)}#shop .sdoll .eq.r-rare{--rc:#f5cf3d;--rg:rgba(245,207,61,.28)}#shop .sdoll .eq.r-unique{--rc:#ff7d1f;--rg:rgba(255,125,31,.34)} #shop .uphelp{max-width:calc(360px * var(--k));text-align:center} .updots{position:absolute;left:0;right:0;bottom:calc(4px * var(--k));z-index:2;display:flex;justify-content:center;gap:calc(3px * var(--k));pointer-events:none} .updots i{width:calc(5px * var(--k));height:calc(5px * var(--k));border-radius:50%;background:rgba(20,16,10,.85);border:1px solid rgba(238,162,74,.45)} .updots i.on{background:radial-gradient(circle at 35% 35%,#ffe2a8,#eea24a 60%,#b86a1c);border-color:#2a1606;box-shadow:0 0 4px rgba(238,162,74,.8)} #icard .uphead{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;color:#eea24a} #icard .uphead .updots{position:static} #icard .btns button.dim{filter:grayscale(.7);opacity:.6} #icard .btns button.upbtn{height:auto!important;flex-direction:column!important;gap:2px;padding:calc(6px * var(--k)) 8px!important;white-space:normal!important;min-width:0!important;width:100%!important} #icard .btns button.upbtn b{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.16em} #icard .btns button.upbtn small{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;font:600 calc(9.5px * var(--k)) var(--f-body);letter-spacing:0;text-transform:none;color:#3a2206} #icard .btns button.upbtn small .mt{color:#3a2206!important}#icard .btns button.upbtn .gc{display:inline-block;width:calc(9px * var(--k));height:calc(9px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);border:1px solid #6a4a10} /* a desktop: the item card (and the compare) wider, growing with the window — names and stat lines no longer wrap every other word */ body:not(.touch) #icard .col,body:not(.touch) #cmp .col{width:clamp(300px,calc(250px * var(--k)),440px)!important} /* the bag at the forge scrolls when its big cells do not all fit; the salvage buttons stay under it */ #shop .sgrid.scroll{overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-right:4px} #shop .shsell{min-height:0}#shop .salls{flex:none} #shop.t-upgrade .shup{flex:none}#shop.t-upgrade .shbody{justify-content:center} body.touch #shop .uphelp{display:none} #shop .sdoll .sec,#shop .sdoll .pri{gap:12px} /* the forge's Upgrade page is the inventory itself (forge mode): over the forge, its tabs and materials centred at the top */ #inv.forging{z-index:48} #shop.t-upgrade .shbody{visibility:hidden} #inv .forgebar{position:absolute;z-index:6;left:50%;top:calc(6px + var(--st));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--k))}#inv .forgebar[hidden]{display:none} #inv .forgebar .shtabs{display:flex;align-items:center;padding:calc(3px * var(--k)) calc(6px * var(--k));border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(#1b1c1f,#0d0e10);box-shadow:0 3px 10px rgba(0,0,0,.7)} #inv .forgebar .shtabs button{border:0;background:none;padding:calc(3px * var(--k)) calc(16px * var(--k));font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-lo);cursor:pointer} #inv .forgebar .shtabs button.on{color:#eea24a;text-shadow:0 0 10px rgba(238,162,74,.6)}#inv .forgebar .shtabs i{width:calc(5px * var(--k));height:calc(5px * var(--k));transform:rotate(45deg);background:var(--bronze)} #inv .forgebar .shmats{display:flex;gap:calc(6px * var(--k))} /* the materials as plates: a dark round with the sign in its colour, the count beside (the forge's header and the upgrade page) */ .mchip{display:inline-flex;align-items:center;gap:calc(5px * var(--k));padding:calc(2px * var(--k)) calc(9px * var(--k)) calc(2px * var(--k)) calc(2px * var(--k));border:1px solid rgba(138,106,58,.45);border-radius:calc(14px * var(--k));background:linear-gradient(rgba(20,21,24,.92),rgba(10,11,12,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.5)} .mchip i{display:flex;align-items:center;justify-content:center;width:calc(22px * var(--k));height:calc(22px * var(--k));border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.08),rgba(0,0,0,.6));border:1px solid var(--mc);box-shadow:0 0 6px color-mix(in srgb,var(--mc) 45%,transparent)} .mchip svg{width:62%;height:62%;fill:none;stroke:var(--mc);stroke-width:1.8} .mchip b{font:600 calc(12px * var(--k)) var(--f-display);color:var(--bone);min-width:1ch} #shop .shmats{gap:calc(6px * var(--k))!important}#shop .shmats span.mchip{color:var(--bone)} /* the trader: the wares a narrow scrolling list (about a third), the bag the rest; the sell-all and salvage-all signs stand upright to the right of the bag */ #shop:not(.pets):not(.smith) .shbuy{flex:0 0 30%;max-width:30%;min-height:0} #shop:not(.pets):not(.smith) .cats{grid-template-columns:1fr!important;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding-right:4px} #shop:not(.pets) .shsell{flex:1 1 auto;display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto 1fr;column-gap:calc(12px * var(--k));justify-content:center;align-content:start} #shop:not(.pets) .shsell h3{grid-column:1 / -1} #shop:not(.pets) .shsell .sgrid{grid-column:1;grid-row:2} #shop:not(.pets) .salls{grid-column:2;grid-row:2;flex-direction:column!important;align-self:start;margin-top:0!important} #shop:not(.pets) .salls .slab{display:none} /* salvage: what it gave rises over the bag (as the Chronicle's rewards), each material its sign, count and name */ #shop .sfloat{position:absolute;z-index:6;transform:translate(-50%,0);display:flex;align-items:center;gap:calc(8px * var(--k));pointer-events:none;animation:sfloat 1.7s var(--ease-out) forwards;filter:drop-shadow(0 3px 8px rgba(0,0,0,.8))} #shop .sfloat b{font:600 calc(20px * var(--k)) var(--f-display);color:var(--mc);text-shadow:0 0 10px color-mix(in srgb,var(--mc) 55%,transparent),0 2px 3px #000} #shop .sfloat small{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)} #shop .sfloat .mchip{padding:2px;border-radius:50%} @keyframes sfloat{0%{opacity:0;transform:translate(-50%,14px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}} /* the inventory's Resources tab: every material, its sign, name, where it comes from, how many */ #inv .reslist{display:none;flex-direction:column;gap:calc(8px * var(--k));width:100%;max-width:calc(420px * var(--k));margin:0 auto} #inv .resrow{display:flex;align-items:center;gap:calc(12px * var(--k));padding:calc(8px * var(--k)) calc(14px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch} #inv .resrow .mchip{padding:2px;border-radius:50%}#inv .resrow .mchip i{width:calc(34px * var(--k));height:calc(34px * var(--k))} #inv .resrow div{flex:1;min-width:0}#inv .resrow b{display:block;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.08em;color:var(--mc)}#inv .resrow small{display:block;font:italic calc(10px * var(--k)) var(--f-body);color:var(--bone-lo)} #inv .resrow em{font:600 calc(20px * var(--k)) var(--f-display);font-style:normal;color:var(--bone)} /* a material in the Resources grid: its sign large in its colour, the count in the corner */ #inv .misc .matic{display:flex;width:62%;height:62%}#inv .misc .matic svg{width:100%;height:100%;fill:none;stroke:var(--mc);stroke-width:1.6;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mc) 55%,transparent))} #inv .misc .matn{position:absolute;right:calc(5px * var(--k));bottom:calc(3px * var(--k));z-index:2;font:600 calc(13px * var(--k)) var(--f-display);color:var(--bone);text-shadow:0 1px 3px #000,0 0 6px #000} /* a phone: the rift's bar smaller (it spanned half the screen over the HUD) */ body.touch #riftHud{width:min(250px,34vw);top:calc(6px + env(safe-area-inset-top, 0px))} body.touch #riftHud .rt{font-size:10px;letter-spacing:.14em}body.touch #riftHud .rt span{font-size:10.5px} body.touch #riftHud .rbar{height:10px;margin-top:3px}body.touch #riftHud .rbar em{font-size:8.5px} body.touch #riftHud .rtime{height:4px;margin:4px 34px 0 0}body.touch #riftHud .rtime em{font-size:10px} /* the item card never taller than the screen: its stats scroll, its buttons stay under them */ #icard{max-height:var(--cardmax,calc(100vh - 16px))!important}#icard .row,#icard .col{max-height:var(--cardmax,calc(100vh - 16px));min-height:0}#icard .col{display:flex!important;flex-direction:column!important}#icard .col .scroll{flex:1 1 auto;min-height:0;overflow-y:auto}#icard .col .btns{flex:none} /* the performance check's table (js/ui/bench.js) */ #benchOut{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);min-width:260px;max-width:94vw;padding:12px 16px;background:rgba(10,11,12,.94);border:1px solid var(--bronze);color:var(--bone);font:12px var(--f-body);pointer-events:auto} #benchOut b{display:block;font:600 13px var(--f-display);letter-spacing:.1em;color:#eea24a;margin-bottom:4px}#benchOut small{display:block;color:var(--bone-lo);margin:4px 0;font-size:10px} #benchOut table{border-collapse:collapse;width:100%}#benchOut td,#benchOut th{padding:2px 6px;text-align:right;white-space:nowrap}#benchOut td:first-child,#benchOut th:first-child{text-align:left}#benchOut th{color:var(--bronze);font-weight:600} /* a phone: the boss's bar fits between the hero's life bar and the minimap (it ran into her bar) */ body.touch #target.boss{width:min(300px,34vw)!important} /* a phone: the quest list without its nested margins — no card frame round each quest, the step text flush under the title, larger type */ body.touch #qlog .mlist.lr{padding-left:20px!important;padding-right:calc(8px + var(--sr))!important} body.touch #qlog .lhd{padding-top:calc(6px + var(--st));padding-bottom:6px} body.touch #qlog .lr h3{margin:4px 0 4px} body.touch #qlog .qitem{margin:0 0 4px;border:0!important;border-left:2px solid transparent!important;border-radius:0} body.touch #qlog .qitem.sel{border-left-color:#eea24a!important;background:rgba(238,162,74,.08)}body.touch #qlog .qitem.side.sel{border-left-color:#6f9dff!important} body.touch #qlog .qhd{gap:6px;padding:4px 4px 4px 6px} body.touch #qlog .qd{display:none} body.touch #qlog .qhx b{font-size:13px;letter-spacing:.04em}body.touch #qlog .qhx small{font-size:12px} body.touch #qlog .qf{font-size:10px;padding:0 5px} body.touch #qlog .qx{padding:0 6px 6px 8px} body.touch #qlog .qwhere{margin:0 0 5px;padding:3px 4px 3px 7px}body.touch #qlog .qwhere span{font-size:12px}body.touch #qlog .qnav{width:26px;height:26px} body.touch #qlog .qg{font-size:11px}body.touch #qlog .qx p{font-size:12.5px;line-height:1.4;margin:3px 0}body.touch #qlog .qx li{font-size:12.5px;line-height:1.45} /* Yusra's window (vendor pets), one open ground: the three on the left without boxes (the chosen one marked by a gold diamond and a glow), the chosen one large in the middle on the painted dunes, its name, words, quest and one button on the right; her gold beside the close */ #shop .shpets{display:none} :is(#shop,#petp) .pbtns{align-self:end;display:flex;align-items:center} :is(#shop,#petp) .pbtn{min-width:calc(150px * var(--k));padding:calc(8px * var(--k)) calc(18px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#eea24a;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap} :is(#shop,#petp) .pbtn.fire{border-image-source:var(--o-fire);color:#241304} :is(#shop,#petp) .pbtn:hover{filter:drop-shadow(0 0 8px rgba(238,162,74,.45))} #shop.pets{overflow:hidden;background:var(--o-c-tl) left 10px top 10px/56px 56px no-repeat,var(--o-c-bl) left 10px bottom 10px/56px 56px no-repeat,var(--o-c-br) right 10px bottom 10px/56px 56px no-repeat, radial-gradient(ellipse 50% 55% at 42% 62%,rgba(238,162,74,.07),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.6)),linear-gradient(rgba(16,15,14,.55),rgba(8,8,8,.7)),var(--tex-panel,none) 0 0/384px 384px,#121110} #shop.pets .shbuy,#shop.pets .shsell{display:none!important} #shop.pets .shbody{align-items:stretch!important} #shop.pets .shpets{flex:1;min-width:0;min-height:0;display:flex;gap:calc(16px * var(--k))} #shop.pets .shgold{top:calc(8px + var(--st));height:40px;right:calc(62px + var(--sr));gap:calc(8px * var(--k));font-size:calc(17px * var(--k))} #shop.pets .shgold i{width:calc(13px * var(--k));height:calc(13px * var(--k));box-shadow:0 0 6px rgba(255,200,90,.6)} #shop.pets .shgold::after{content:"";align-self:stretch;width:1px;margin:6px 0 6px calc(10px * var(--k));background:linear-gradient(transparent,var(--bronze),transparent)} #shop .pside{flex:none;width:clamp(230px,26%,340px);position:relative;z-index:2;display:flex;flex-direction:column;min-height:0} /* both side columns centred in height: auto margins round their content (unlike justify-content:center, a column taller than the window still starts at its top and scrolls) */ #shop.pets .pside>:first-child,#shop .pinfo>:first-child{margin-top:auto}#shop.pets .pside>:last-child,#shop .pinfo>:last-child{margin-bottom:auto}#shop .plist{flex:0 1 auto;min-height:0} #shop.pets .pside h3{display:flex;align-items:center;gap:10px;margin:0 0 calc(14px * var(--k)) calc(10px * var(--k));font-size:calc(10px * var(--k));letter-spacing:.24em;white-space:nowrap} #shop.pets .pside h3::after{content:"";flex:1;max-width:calc(170px * var(--k));height:calc(9px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.7} #shop .plist{display:flex;flex-direction:column;gap:calc(6px * var(--k));overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px} #shop .ptile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;outline:0;-webkit-tap-highlight-color:transparent;grid-template-rows:auto auto;column-gap:calc(16px * var(--k));row-gap:2px;align-items:center;text-align:left;padding:calc(14px * var(--k)) calc(14px * var(--k)) calc(14px * var(--k)) calc(30px * var(--k));border:0;background:none;color:var(--bone);cursor:pointer} #shop .ptile .ci{grid-row:1 / 3;width:calc(40px * var(--k));height:calc(40px * var(--k));display:flex;align-items:center;justify-content:center} #shop .ptile .ci svg{width:100%;height:100%;fill:none;stroke:#eea24a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(238,162,74,.3))} #shop .ptile b{min-width:0;font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.04em;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #shop .ptile small{grid-column:2;font:calc(12px * var(--k)) var(--f-body);color:var(--bone-lo)} #shop .ptile.side small,#shop .ptile.own small{color:#eea24a}#shop .ptile.quest small{color:#8fb4ff} #shop .ptile.on{background:linear-gradient(90deg,rgba(238,162,74,.17),rgba(238,162,74,.06) 55%,transparent)} #shop .ptile.on b{color:#fff3dc} #shop .ptile.on::after{content:"";position:absolute;left:calc(11px * var(--k));top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,rgba(238,162,74,.7),transparent)} #shop .ptile.on::before{content:"";position:absolute;z-index:1;left:calc(11px * var(--k) - 4.5px);top:50%;width:9px;height:9px;transform:translateY(-50%) rotate(45deg);background:#eea24a;box-shadow:0 0 8px #eea24a} #shop .ptile .pnew{grid-row:1 / 3;grid-column:3;width:calc(10px * var(--k));height:calc(10px * var(--k));transform:rotate(45deg);background:#6f9dff;box-shadow:0 0 8px #6f9dff} #shop .pview{position:relative;z-index:1;flex:1;min-width:0;min-height:0} /* the painted dunes behind it all, always wider than the window (its soft edges off-screen on both sides): the sand's bright patch (at 42 % / 60 % of the picture) about under the pet, the picture's foot below the window */ #shop .pdunes{--dw:max(125vw,230vh);position:absolute;z-index:0;width:var(--dw);height:calc(var(--dw) * .4285);left:calc(45vw - var(--dw) * .485);top:calc(72vh - var(--dw) * .2614);background:url(../assets/ui/yusra-dunes.webp) center/100% 100% no-repeat;pointer-events:none} /* (the picture itself muted, 01.10.: 60 % saturation, 78 % brightness — baked in, no CSS filter: a filtered layer this large could drop out on a phone) */ #shop .pview .petstage{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0} #shop .pinfo{flex:none;width:clamp(230px,29%,400px);position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(14px * var(--k));padding:0 calc(10px * var(--k)) calc(20px * var(--k)) 0;overflow-y:auto} #shop .phd b{display:block;font:600 calc(24px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#eea24a;text-shadow:0 0 16px rgba(238,162,74,.3)} #shop .phd b::after{content:"";display:block;width:min(100%,calc(200px * var(--k)));height:calc(10px * var(--k));margin-top:calc(8px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.8} #shop .phd small{display:block;margin-top:calc(10px * var(--k));font:italic calc(13px * var(--k))/1.45 var(--f-body);color:var(--bone-lo)} #shop .pq h4{display:flex;align-items:center;gap:calc(12px * var(--k));margin:0 0 calc(8px * var(--k));font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.1em;color:#8fb4ff} #shop .pq h4 i{width:calc(11px * var(--k));height:calc(11px * var(--k));transform:rotate(45deg);background:#6f9dff;box-shadow:0 0 8px #6f9dff;flex:none} #shop .pq.ok h4{color:var(--bronze)}#shop .pq.ok h4 i{background:var(--bronze);box-shadow:none} #shop .pq p{margin:0;font:calc(13px * var(--k))/1.55 var(--f-body);color:var(--bone)}#shop .pq p.qok{color:#9fe08a} #shop .pq ol{margin:0;padding:0;list-style:none;font:calc(13px * var(--k))/1.55 var(--f-body)} #shop .pq li{padding-left:calc(16px * var(--k));position:relative;color:var(--bone)} #shop .pq li::before{content:"";position:absolute;left:0;top:.6em;width:calc(6px * var(--k));height:calc(6px * var(--k));transform:rotate(45deg);border:1px solid #6f9dff} #shop .pq li.done{color:var(--bone-lo);text-decoration:line-through}#shop .pq li.done::before{background:#6f9dff} #shop .pq li em{font-style:normal;color:#8fb4ff} #shop.pets .pbtns{align-self:flex-start;gap:calc(8px * var(--k));margin-top:calc(6px * var(--k))} #shop.pets .pbtns:has(.pbtn.fire)::before,#shop.pets .pbtns:has(.pbtn.fire)::after{content:"";width:calc(22px * var(--k));height:calc(10px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.85}#shop.pets .pbtns:has(.pbtn.fire)::after{transform:scaleX(-1)} #shop.pets .pbtns:has(.pbtn.fire){margin-left:calc(-30px * var(--k))} #shop.pets .pbtn{min-width:calc(240px * var(--k));padding:calc(12px * var(--k)) calc(26px * var(--k));font-size:calc(14px * var(--k));letter-spacing:.2em}#shop.pets .pbtn.fire{filter:drop-shadow(0 0 10px rgba(238,162,74,.35))} #shop .pfollow{font:italic calc(12px * var(--k)) var(--f-body);color:#8fb4ff} #shop.pets .shnote{position:absolute;left:50%;bottom:calc(10px + var(--sb));transform:translateX(-50%);margin:0;pointer-events:none;z-index:3} /* a phone: the same three columns, narrower, the type a step smaller */ body.touch #shop .pside{width:clamp(160px,26%,220px);padding-top:4px}body.touch #shop.pets .pside h3{margin-bottom:6px} body.touch #shop .ptile{padding:8px 8px 8px 22px;column-gap:10px}body.touch #shop .ptile .ci{width:28px;height:28px}body.touch #shop .ptile b{font-size:12px}body.touch #shop .ptile small{font-size:10.5px} body.touch #shop .ptile.on::after{left:9px}body.touch #shop .ptile.on::before{left:4.5px} body.touch #shop .pinfo{width:clamp(190px,30%,280px);gap:8px;padding-top:4px} body.touch #shop .phd b{font-size:17px}body.touch #shop .phd small{font-size:11px;margin-top:6px}body.touch #shop .pq h4{font-size:11px}body.touch #shop .pq p,body.touch #shop .pq ol{font-size:11px} body.touch #shop.pets .pbtn{min-width:0;padding:9px 16px;font-size:12px}body.touch #shop.pets .pbtns:has(.pbtn.fire){margin-left:0}body.touch #shop.pets .pbtns:has(.pbtn.fire)::before,body.touch #shop.pets .pbtns:has(.pbtn.fire)::after{width:12px} /* the companion's window (the menu's Companion tile): one open ground, no boxes — the companion in its shaft of light, the vine over faint rings, the node tapped */ #petp{position:fixed;inset:0;z-index:46;display:none;flex-direction:column;pointer-events:auto; background:var(--o-c-tl) left 10px top 10px/56px 56px no-repeat,var(--o-c-bl) left 10px bottom 10px/56px 56px no-repeat,var(--o-c-br) right 10px bottom 10px/56px 56px no-repeat,var(--o-div) center bottom 8px/calc(240px * var(--k)) calc(24px * var(--k)) no-repeat,radial-gradient(ellipse 34% 60% at 50% 50%,rgba(238,162,74,.06),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.62)),linear-gradient(rgba(16,15,14,.55),rgba(8,8,8,.7)),var(--tex-panel,none) 0 0/384px 384px,#121110!important} #petp.open{display:flex} #petp .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st))} #petp .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} #petp .ppbody{flex:1;min-height:0;display:flex;gap:calc(18px * var(--k));padding:6px calc(22px + var(--sr)) 14px calc(22px + var(--sl))} #gmenu .tile .pnb{display:none}#gmenu .tile.has .pnb{display:block} #petp .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);box-shadow:0 0 6px rgba(255,200,90,.6);vertical-align:-1px} /* left: the companion on its glowing ring, a shaft of light from above, faint rings behind; its name, its level */ #petp .ppside{flex:none;width:clamp(220px,26%,360px);display:flex;flex-direction:column;min-height:0;container-type:inline-size} #petp .ppstage{flex:1;min-height:0;position:relative}#petp .ppstage[hidden]{display:none} #petp .ppstage::before{content:"";position:absolute;left:50%;top:-6%;width:90%;height:86%;transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse 26% 100% at 50% 0%,rgba(255,226,170,.30),rgba(255,196,110,.14) 45%,rgba(238,162,74,.04) 75%,transparent 100%); -webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)} #petp .ppdeco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #petp .ppdeco *{fill:none;stroke:#c8a060;stroke-width:.8;opacity:.22}#petp .ppdeco .d2{stroke-dasharray:1.5 5;opacity:.3}#petp .ppdeco .mk{fill:#c8a060;opacity:.35} #petp .ppview{position:absolute;inset:0;width:100%;height:100%;display:block} #petp .pplv{flex:none;padding:calc(6px * var(--k)) 0 calc(6px * var(--k));display:flex;flex-direction:column;gap:calc(12px * var(--k))} #petp .ppname{text-align:center} #petp .ppname b{display:block;white-space:nowrap;font:600 min(calc(19px * var(--k)),10.5cqw) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#eea24a;text-shadow:0 0 14px rgba(238,162,74,.35)} #petp .ppname small{font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #petp .ppname::after{content:"";display:block;height:calc(10px * var(--k));margin:calc(8px * var(--k)) auto 0;width:84%;background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.8;-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)} #petp .pplvrow{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--k))} #petp .pplring{flex:none;width:calc(64px * var(--k));height:calc(64px * var(--k))} #petp .pplring .bg{fill:#0e0d0c;stroke:#3a2c1a;stroke-width:4}#petp .pplring .fg{fill:none;stroke:#eea24a;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(238,162,74,.7))}#petp .pplring .fg.bond{stroke:#8fb4ff;filter:drop-shadow(0 0 3px rgba(143,180,255,.7))} #petp .pplring text{font:600 20px var(--f-display);fill:#ffdcb4} #petp .pplvrow b{display:block;white-space:nowrap;font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}#petp .pplvrow b i{font-style:normal;color:var(--bone-lo)} #petp .pplvrow small{font:calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #petp .ppnone{margin:auto;padding:20px;font:italic calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone-lo);text-align:center} /* middle: the tree on the open ground */ #petp .pptree{flex:1;min-width:0;position:relative;display:flex;align-items:stretch;justify-content:center;overflow:hidden} #petp .pptree>svg{width:100%;height:100%;display:block;overflow:visible} #petp .orn *{fill:none;stroke:#c8a060;stroke-width:.8;opacity:.13}#petp .orn .d2{stroke-dasharray:2 7;opacity:.2}#petp .orn .d3{opacity:.09}#petp .orn .tk{opacity:.18}#petp .orn .mk{fill:#c8a060;opacity:.25} #petp .vine{fill:none;stroke:#1a130b;stroke-width:9;stroke-linecap:round} #petp .vine2{fill:none;stroke:#4a3820;stroke-width:5;stroke-linecap:round} #petp .vinelit{fill:none;stroke:url(#ppVineLit);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(238,162,74,.6))} #petp .branch{fill:none;stroke:#4a3820;stroke-width:4;stroke-linecap:round}#petp .branch.lit{stroke:#d08a34;filter:drop-shadow(0 0 3px rgba(238,162,74,.6))} #petp .leaf{fill:#2e2414;stroke:#5a4628;stroke-width:1}#petp .leaf.lit{fill:#4a3010;stroke:#c08030} #petp .seal{fill:url(#ppRim);stroke:#8a6a3e;stroke-width:1.5}#petp .sealmark{fill:#eea24a} #petp .tier .plq{fill:#1a1612;stroke:#6a5030;stroke-width:1}#petp .tier text{font:600 10px var(--f-display);letter-spacing:.1em;fill:#c8a060}#petp .tier.shut text{fill:#6a5a44} #petp .need text{font:italic 11px var(--f-body);fill:#8a7a64}#petp .needmk{fill:none;stroke:#8a7a64;stroke-width:1.2} #petp .pn{cursor:pointer} #petp .pn .halo{fill:url(#ppHalo);opacity:0;transition:opacity .3s} #petp .pn .rim{fill:url(#ppRim);stroke:#0a0806;stroke-width:1.5}#petp .pn .rim2{fill:none;stroke:#1a130b;stroke-width:1.5} #petp .pn .face{fill:url(#ppFace)} #petp .pn .rays{fill:#2a2016;stroke:#5a4628;stroke-width:1} #petp .pn .pi{fill:none;stroke:#8a7a64;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #petp .pn.got .rim{fill:url(#ppGold)}#petp .pn.got .face{fill:url(#ppFaceOn)}#petp .pn.got .pi{stroke:#ffd38a}#petp .pn.got .halo{opacity:.7}#petp .pn.got .rays{fill:#8a5a20;stroke:#eea24a} #petp .pn.can .rim{stroke:#eea24a;stroke-width:2}#petp .pn.can .pi{stroke:#e8dcc8}#petp .pn.can .halo{animation:pnHalo 1.8s ease-in-out infinite} #petp .pn.shut{opacity:.5}#petp .pn.shut .pi{stroke:#4a4034}#petp .pn.other{opacity:.35} #petp .pn .lock rect,#petp .pn .lock path{fill:none;stroke:#8a7a64;stroke-width:1.4}#petp .pn .lock{transform:translate(0px,0px)} #petp .pn.shut .pi{opacity:.3} #petp .pn.sel .rim2{stroke:#fff3dc;stroke-width:2.5} #petp .pn.pop{animation:pnPop .5s var(--ease-back)} #petp .pip{fill:#1a130b;stroke:#6a5030;stroke-width:1}#petp .pip.on{fill:#eea24a;stroke:#ffe2a8;filter:drop-shadow(0 0 2px rgba(238,162,74,.8))} @keyframes pnHalo{0%,100%{opacity:.15}50%{opacity:.75}} @keyframes pnPop{0%{transform:scale(1.3)}100%{transform:scale(1)}} #petp .pn.pop>*{transform-box:fill-box} /* right: the points to spend, the node tapped (no card round it), Learn between two flourishes; Reset at the foot */ #petp .ppinfo{flex:none;width:clamp(200px,21%,290px);min-width:0;display:flex;flex-direction:column;gap:calc(14px * var(--k));padding-top:calc(4px * var(--k))} #petp .pppts{margin-top:auto;display:flex;align-items:baseline;gap:calc(8px * var(--k));font:italic calc(12px * var(--k)) var(--f-body);color:var(--bone-lo)} #petp .pppts b{font:600 calc(26px * var(--k)) var(--f-display);font-style:normal;color:var(--bone-lo)}#petp .pppts.has b{color:#eea24a;text-shadow:0 0 12px rgba(238,162,74,.7)} #petp .ppcard{min-width:0;display:flex;flex-direction:column;gap:calc(12px * var(--k))} #petp .ppcard.empty p{margin:0;font:italic calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone-lo)} #petp .pch{display:flex;align-items:center;gap:calc(16px * var(--k))} #petp .pch .ni{flex:none;width:calc(50px * var(--k));height:calc(50px * var(--k));margin:calc(4px * var(--k));display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border:2px solid transparent;border-image:var(--o-tile-gold,var(--o-tile)) 11 fill / 11px / 0 stretch;filter:drop-shadow(0 0 8px rgba(238,162,74,.25))} #petp .pch .ni svg{transform:rotate(-45deg);width:56%;height:56%;fill:none;stroke:#eea24a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #petp .pch b{display:block;font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#eea24a}#petp .pch small{font:calc(12px * var(--k)) var(--f-body);color:var(--bronze)} #petp .pcrule{display:block;height:calc(10px * var(--k));background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.7} #petp .ppcard p{margin:0;font:calc(13.5px * var(--k))/1.55 var(--f-body);color:var(--bone);overflow-wrap:break-word} #petp .ppact{display:flex;align-items:center;gap:calc(8px * var(--k));margin-top:calc(6px * var(--k))} #petp .ppact.lrn::before,#petp .ppact.lrn::after{content:"";flex:0 0 calc(22px * var(--k));height:calc(10px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.85}#petp .ppact.lrn::after{transform:scaleX(-1)} #petp .ppact .pbtn.fire{flex:1;min-width:0;padding-top:calc(11px * var(--k));padding-bottom:calc(11px * var(--k));font-size:calc(14px * var(--k));letter-spacing:.2em;filter:drop-shadow(0 0 10px rgba(238,162,74,.35))} #petp .pdone{font:italic calc(12px * var(--k)) var(--f-body);color:#9fe08a}#petp .pdone.dim{color:var(--bone-lo)} #petp .ppfoot{margin-top:auto;position:relative;padding:calc(12px * var(--k)) 0} #petp .ppfoot:has(.ppreset)::before,#petp .ppfoot:has(.ppreset)::after{content:"";position:absolute;left:0;right:0;height:calc(10px * var(--k));background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.45}#petp .ppfoot::before{top:-4px}#petp .ppfoot::after{bottom:-4px} #petp .ppreset{display:flex;align-items:center;gap:calc(14px * var(--k));width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--bone-lo)} #petp .ppreset .rr{flex:none;width:calc(40px * var(--k));height:calc(40px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid #5a4628;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a;background:radial-gradient(circle at 50% 35%,#2a2620,#0c0b0a)} #petp .ppreset .rr svg{width:52%;height:52%;fill:none;stroke:#c8a060;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #petp .ppreset .rt{display:flex;flex-direction:column;font:600 calc(10px * var(--k))/1.6 var(--f-display);letter-spacing:.16em;text-transform:uppercase}#petp .ppreset .rt em{font-style:normal;display:flex;align-items:center;gap:6px;color:#eea24a} #petp .ppreset:hover .rr,#petp .ppreset:active .rr{border-color:#c8a060}#petp .ppreset:hover{color:var(--bone)} /* a phone: the side columns narrower, the type a step smaller */ body.touch #petp .ppside{width:clamp(150px,21%,210px)}body.touch #petp .ppinfo{width:clamp(170px,22%,230px);gap:8px}body.touch #petp .ppbody{gap:10px} body.touch #petp .ppcard{gap:7px}body.touch #petp .pch b{font-size:12px;letter-spacing:.06em}body.touch #petp .pch .ni{width:34px;height:34px}body.touch #petp .ppcard p{font-size:12px} body.touch #petp .pplvrow b{font-size:11px;letter-spacing:.06em}body.touch #petp .pplvrow{gap:8px}body.touch #petp .pplring{width:46px;height:46px} body.touch #petp .pppts b{font-size:20px}body.touch #petp .ppact.lrn::before,body.touch #petp .ppact.lrn::after{flex-basis:12px} body.touch #petp .ppreset .rr{width:32px;height:32px}body.touch #petp .ppreset{gap:8px}body.touch #petp .ppreset .rt{font-size:9px;letter-spacing:.1em} /* Yusra's window, evened out (01.10.): the corner flourishes over the painted dunes (the window's own background lay under them), all four; both side columns the same width, from one shared top line (not each centred on its own: they began and ended at different heights), the same rubric heading both, equal margins left and right, the pet between them; every row of the list alike, its blue mark beside the name */ #shop.pets{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.6)),linear-gradient(rgba(16,15,14,.55),rgba(8,8,8,.7)),var(--tex-panel,none) 0 0/384px 384px,#121110!important} #shop.pets::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--o-c-tl) left calc(10px + var(--sl)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-tr) right calc(10px + var(--sr)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-bl) left calc(10px + var(--sl)) bottom 10px/56px 56px no-repeat,var(--o-c-br) right calc(10px + var(--sr)) bottom 10px/56px 56px no-repeat} #shop.pets .plate-title,#shop.pets .shgold{position:relative;z-index:5}#shop.pets .shgold{position:absolute} #shop.pets .xclose{z-index:6;top:calc(18px + var(--st));right:calc(18px + var(--sr))} #shop.pets .shgold{right:calc(70px + var(--sr));top:calc(16px + var(--st))} #shop.pets .shbody{padding:0 calc(40px + var(--sr)) 0 calc(40px + var(--sl))} #shop.pets .shpets{gap:0} #shop.pets .pside,#shop.pets .pinfo{padding:calc(13vh) 0 calc(20px * var(--k));overflow-y:auto}#shop.pets .pside{width:clamp(230px,26%,340px);padding-left:calc(30px * var(--k))!important} /* (the list a step in from the edge, 01.10.) */#shop.pets .pinfo{width:clamp(280px,38%,560px)} /* (the text column as wide as it was before) */ #shop.pets .pside>:first-child,#shop.pets .pinfo>:first-child,#shop.pets .pside>:last-child,#shop.pets .pinfo>:last-child{margin-top:0;margin-bottom:0} #shop.pets .pinfo{gap:calc(12px * var(--k))} #shop.pets :is(.pside h3,.pinfo .prub){display:flex;align-items:center;gap:10px;margin:0 0 calc(12px * var(--k));min-height:calc(14px * var(--k));font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);white-space:nowrap} #shop.pets .pside h3{margin-left:0} #shop.pets .pinfo .prub::after,#shop.pets .pside h3::after{content:"";flex:1;max-width:calc(170px * var(--k));height:calc(9px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.7} #shop.pets .pinfo .prub span{color:inherit} #shop.pets .phd b{font-size:calc(22px * var(--k))} #shop.pets .ptile{padding:calc(12px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)) calc(26px * var(--k));border-left:1px solid rgba(160,120,60,.22)} #shop.pets .ptile.on{border-left-color:transparent} #shop.pets .ptile.on::after{left:-1px}#shop.pets .ptile.on::before{left:-5.5px} #shop.pets .ptile b{display:flex;align-items:center;gap:calc(10px * var(--k))} #shop.pets .ptile b .pnew{flex:none;width:calc(8px * var(--k));height:calc(8px * var(--k));transform:rotate(45deg);background:#6f9dff;box-shadow:0 0 8px #6f9dff} #shop.pets .pbtns:has(.pbtn.fire){margin-left:0} body.touch #shop.pets .shbody{padding:0 calc(26px + var(--sr)) 0 calc(26px + var(--sl))} body.touch #shop.pets .pside,body.touch #shop.pets .pinfo{padding-top:calc(54px + var(--st))}body.touch #shop.pets .pside{width:clamp(170px,27%,240px);padding-left:22px!important}body.touch #shop.pets .pinfo{width:clamp(210px,38%,320px)} body.touch #shop.pets::after{background-size:40px 40px} body.touch #shop.pets .xclose{top:calc(12px + var(--st));right:calc(12px + var(--sr))}body.touch #shop.pets .shgold{right:calc(60px + var(--sr));top:calc(10px + var(--st))} body.touch #shop.pets .phd b{font-size:17px} #shop.pets .pbtns{max-width:100%}#shop.pets .pbtn{max-width:100%;white-space:normal} body.touch #shop.pets .pbtn{letter-spacing:.12em;padding:9px 12px} body.touch #shop.pets .pbtn{white-space:nowrap;font-size:11px;letter-spacing:.1em}body.touch #shop.pets .pbtns::before,body.touch #shop.pets .pbtns::after{display:none!important} body.touch #shop.pets .pq p{font-size:10.5px;line-height:1.4} /* the companion's window centred in its height (01.10.): the companion and its level one block in the middle of the left column (the stage took all the height and pushed the level down onto the frame's foot), the right column's points, card and reset one block in the middle too */ #petp .ppbody{align-items:center} #petp .ppside{align-self:stretch;justify-content:center} #petp .ppstage{flex:0 1 auto;height:min(52vh,calc(100% - 150px * var(--k)));min-height:120px} #petp .pptree{align-self:stretch} #petp .ppinfo{align-self:stretch;justify-content:center} #petp .pppts{margin-top:0}#petp .ppfoot{margin-top:calc(18px * var(--k))} body.touch #petp .ppstage{height:min(50vh,calc(100% - 110px));min-height:90px} body.touch #petp .ppstage{height:min(38vh,calc(100% - 130px))}body.touch #petp .pplv{gap:6px;padding:0}body.touch #petp .ppname::after{margin-top:4px} #petp .ppstage{height:min(44vh,calc(100% - 170px * var(--k)))}#petp .pplv{gap:calc(8px * var(--k))} /* the quest list on the side without the notch: its text close to the edge (the panel's ground ran there anyway, the text kept a notch's margin off it) */ html.nl body.touch #qlog .mlist.lr{padding-right:10px!important} /* Doran's forge behind his window (01.10.), draped as Yusra's dunes: the painting always wider than the window, its soft edges off-screen, the glow on its floor (at 38 % / 70 % of the picture) under the bag (Salvage) or under the hero's figure (Upgrade, the inventory in forge mode); muted in the file itself. The corner flourishes over it */ #shop.smith::before,#inv.forging::before{inset:auto;content:"";display:block;--dw:max(125vw,230vh);position:absolute;z-index:0;width:var(--dw);height:calc(var(--dw) * .4626);top:calc(74vh - var(--dw) * .3238);background:url(../assets/ui/forge-bg.webp) center/100% 100% no-repeat;pointer-events:none} #shop.smith::before{left:calc(50vw - var(--dw) * .38)} #inv.forging::before{left:calc(30vw - var(--dw) * .38)} #shop.smith,#inv.forging{overflow:hidden} #shop.smith>.plate-title,#shop.smith>.shtabs,#shop.smith>.shbody{position:relative;z-index:1} #inv.forging>.plate-title,#inv.forging>.ibody,#inv.forging>.statspane{position:relative;z-index:1} #shop.smith::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--o-c-tl) left calc(10px + var(--sl)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-tr) right calc(10px + var(--sr)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-bl) left calc(10px + var(--sl)) bottom 10px/56px 56px no-repeat,var(--o-c-br) right calc(10px + var(--sr)) bottom 10px/56px 56px no-repeat} body.touch #shop.smith::after{background-size:40px 40px} #shop.smith .xclose{z-index:6} /* the companion's window: the tree's drawing on the window's middle, not the body's (the title above pushed it down a little); the light on the companion falls from the window's very top (01.10.) */ #petp .pptree>svg{transform:translateY(calc(-12px * var(--k)))} #petp{overflow:hidden} #petp .ppstage::before{top:-100vh;height:calc(100vh + 62%);background:radial-gradient(ellipse 24% 100% at 50% 0%,rgba(255,226,170,.26),rgba(255,196,110,.13) 50%,rgba(238,162,74,.04) 80%,transparent 100%);-webkit-mask:linear-gradient(#000 calc(100% - 22%),transparent);mask:linear-gradient(#000 calc(100% - 22%),transparent)} /* the character list after the user's draft (01.10.): a plain column from the top left — each hero's portrait, its name, class and level in gold small caps under it; the chosen one's frame gold, the rest dimmed; one "+ Create character" line at the end. On the right the name large in spaced capitals over a fine rule with a diamond, class and level, Enter World; Test small under it */ #mainmenu[data-mode="select"] .mm-slots{justify-content:flex-start;padding-top:calc(16vh + var(--st))!important;gap:calc(18px * var(--k))} #mainmenu[data-mode="select"] .mm-slots>.mm-slot:first-child,#mainmenu[data-mode="select"] .mm-slots>.mm-slot:last-child{margin:0} #mainmenu[data-mode="select"] .mm-slots .mm-slot:nth-child(even) .mm-port{margin-left:0} #mainmenu[data-mode="select"] .mm-slot.on::before{display:none} #mainmenu[data-mode="select"] .mm-slots .mm-port{width:calc(50px * var(--k));height:calc(50px * var(--k))} #mainmenu[data-mode="select"] .mm-slot.on .mm-port{transform:rotate(45deg)} #mainmenu[data-mode="select"] .mm-who strong{font:500 calc(17px * var(--k)) var(--f-body);color:var(--bone)} #mainmenu[data-mode="select"] .mm-who small{display:block;margin-top:2px;font:calc(11px * var(--k)) 'Alegreya SC',var(--f-body);color:#c8902e;border:0!important;padding:0!important} #mainmenu[data-mode="select"] .mm-slot.on .mm-who strong{color:#fff3dc}#mainmenu[data-mode="select"] .mm-slot.on .mm-who small{color:#eea24a} #mainmenu[data-mode="select"] .mm-slot:not(.on) .mm-who{opacity:.72} #mainmenu[data-mode="select"] .mm-del{opacity:.55;transform:scale(.85)} #mainmenu[data-mode="select"] .mm-slot.add{margin-top:calc(6px * var(--k))!important;gap:calc(10px * var(--k))} #mainmenu[data-mode="select"] .mm-addp{width:calc(22px * var(--k))!important;height:calc(22px * var(--k))!important;border:0!important;background:none!important;transform:none!important;filter:none!important;opacity:1!important;margin-left:calc(14px * var(--k))} #mainmenu[data-mode="select"] .mm-addp svg{transform:none;width:100%;height:100%;stroke:#eea24a;stroke-width:1.8} #mainmenu[data-mode="select"] .mm-addt{padding:4px 0;border:0;background:none;cursor:pointer;font:calc(13px * var(--k)) var(--f-body);color:var(--bone);text-shadow:0 1px 3px #000} #mainmenu[data-mode="select"] .mm-addt:hover{color:#ffdcb4} #mainmenu[data-mode="select"] .mm-hero{gap:calc(10px * var(--k))} #mainmenu[data-mode="select"] .mm-hero h2{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:calc(24px * var(--k))} #mainmenu[data-mode="select"] .mm-hero h2::before{display:none} #mainmenu[data-mode="select"] .mm-hero h2::after{content:"";display:block;width:calc(150px * var(--k));height:calc(12px * var(--k));margin:calc(6px * var(--k)) auto 0;background:var(--o-div) center/100% 100% no-repeat;opacity:.85} #mainmenu[data-mode="select"] .mm-hero .mm-desc{border:0;padding:0;width:auto;font-size:calc(12px * var(--k));letter-spacing:.06em} #mainmenu[data-mode="select"] .mm-hero .mm-go{order:3;margin-top:calc(8px * var(--k))} #mainmenu[data-mode="select"] .mm-hero .mm-alt{order:4;border:0;padding:4px 10px;font-size:calc(10px * var(--k));letter-spacing:.2em;color:var(--bone-lo);opacity:.8} #mainmenu[data-mode="select"] .mm-hero .mm-alt:hover{color:var(--bone)} /* the quest tracker over the stick's zone (01.10.): the zone covered all of it but the title line — a tap on it moved the stick, the quest log opened only by luck */ #quest{z-index:22} /* the quest goal's card on the world map (01.10.): Travel in fire, Show on the area map as a plain plate; the filter strip under it hidden while it is open */ :is(#mapPanel,#qlog) .mtravel button[data-a="area"]{border-image-source:var(--o-tile);color:#eea24a} :is(#mapPanel,#qlog) .mtravel.goal{max-width:min(92%,calc(460px * var(--k)))}:is(#mapPanel,#qlog) .mtravel.goal small{text-align:center} :is(#mapPanel,#qlog):has(.mtravel.on) .mfilter{visibility:hidden} /* the class sketch on the skills page a step lower, its top edge (where the drawing's paper begins, across her hair) faded out instead of cut (01.10.) */ #skills .spage::before{top:7%;bottom:-32%;-webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)} /* (back up, 01.10.: from the top a step down, its top edge faded) */ /* the talk's plate after the user's draft (01.10.): a dark ink-brushed plate with torn ends, fine gold lines along it, a compass star on its top left corner; the speaker's name in spaced capitals with a diamond and a rule after it; Next as a gold diamond with a dark chevron */ html body #dialogue{width:min(1080px,calc(84 * var(--vw)))!important;padding:calc(28px * var(--k)) calc(70px * var(--k)) calc(22px * var(--k)) calc(62px * var(--k))!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M40 22 L80 15 L129 15 L175 17 L207 18 L238 17 L270 15 L313 21 L347 16 L396 22 L443 17 L502 14 L558 16 L592 15 L631 21 L667 19 L716 17 L763 15 L794 16 L845 17 L884 19 L928 16 L960 20 L962 22 L975 34 L973 46 L986 58 L981 70 L964 82 L990 94 L957 106 L969 118 L982 130 L959 142 L972 154 L954 166 L978 178 L907 185 L851 182 L800 185 L753 184 L697 188 L653 186 L621 186 L572 189 L517 182 L476 186 L445 184 L410 180 L378 187 L344 181 L303 188 L270 183 L224 188 L169 188 L131 183 L90 188 L40 181 L16 180 L6 168 L18 156 L15 144 L31 132 L7 120 L9 108 L13 96 L23 84 L19 72 L45 60 L23 48 L29 36 L20 24Z' fill='%230c0b0a' fill-opacity='.93'/%3E%3Cpath d='M120 24 H930' stroke='%23b8863e' stroke-opacity='.75' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M60 174 H900' stroke='%23b8863e' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M50 168 C150 176 260 176 330 170' stroke='%23b8863e' stroke-opacity='.4' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3Crect x='990' y='38' width='15' height='2.7' fill='%230b0a09' opacity='.8'/%3E%3Crect x='993' y='142' width='10' height='2.1' fill='%230b0a09' opacity='.8'/%3E%3Crect x='982' y='119' width='7' height='1.6' fill='%230b0a09' opacity='.8'/%3E%3Crect x='983' y='53' width='9' height='1.6' fill='%230b0a09' opacity='.8'/%3E%3Crect x='980' y='51' width='7' height='2.0' fill='%230b0a09' opacity='.8'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;border:0!important;border-image:none!important;outline:0!important;clip-path:none!important;box-shadow:none!important;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))} #dialogue::before{content:"";position:absolute;z-index:2;left:calc(-26px * var(--k));top:calc(12% - 50px * var(--k));width:calc(100px * var(--k));height:calc(100px * var(--k));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='gL' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c0'/%3E%3Cstop offset='1' stop-color='%23e0a24a'/%3E%3C/linearGradient%3E%3ClinearGradient id='gD' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a8692a'/%3E%3Cstop offset='1' stop-color='%234a2a0c'/%3E%3C/linearGradient%3E%3CradialGradient id='gC'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='.5' stop-color='%23eeb050'/%3E%3Cstop offset='1' stop-color='%236a3e10'/%3E%3C/radialGradient%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.5' flood-color='%23000' flood-opacity='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23sh%29'%3E%3Cpath d='M60 30 C78 22 96 26 104 12 M60 90 C42 98 24 94 16 108' fill='none' stroke='%23c8964e' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='60' r='21' fill='none' stroke='%23c8964e' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='%235a3a14' stroke-width='1'/%3E%3Cpath d='M60 60 L67.0 60.0 L60.0 6.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L53.0 60.0 L60.0 6.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L60.0 67.0 L114.0 60.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L60.0 53.0 L114.0 60.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L53.0 60.0 L60.0 114.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L67.0 60.0 L60.0 114.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L60.0 53.0 L6.0 60.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L60.0 67.0 L6.0 60.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L63.5 63.5 L81.2 38.8Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L56.5 56.5 L81.2 38.8Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L56.5 63.5 L81.2 81.2Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L63.5 56.5 L81.2 81.2Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L56.5 56.5 L38.8 81.2Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L63.5 63.5 L38.8 81.2Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L63.5 56.5 L38.8 38.8Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L56.5 63.5 L38.8 38.8Z' fill='url%28%23gD%29'/%3E%3Ccircle cx='60' cy='60' r='7.5' fill='url%28%23gC%29' stroke='%234a2a0c' stroke-width='1'/%3E%3Ccircle cx='58' cy='58' r='2' fill='%23fffbe8' opacity='.85'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none} /* (a painted star, 01.10.: each spike a lit and a shaded half, gold gradients, a jewel at its heart) */ html body #dialogue .who{display:flex!important;align-items:center;gap:calc(10px * var(--k));font:600 calc(11px * var(--k)) var(--f-display)!important;letter-spacing:.32em;color:#e8dcc8;margin-bottom:calc(8px * var(--k))!important} #dialogue .who::before{content:"";flex:none;width:calc(7px * var(--k));height:calc(7px * var(--k));order:2;transform:rotate(45deg);border:1px solid #c8964e} html body #dialogue .who::after{order:3;flex:0 1 calc(220px * var(--k));width:auto!important;height:1px!important;background:linear-gradient(90deg,#c8964e,rgba(200,150,78,0))!important;opacity:.9} html body #dialogue .say{font-size:calc(14px * var(--k))!important;line-height:1.5!important;color:#efe6d6} html body #dialogue .more{right:calc(30px * var(--k))!important;bottom:calc(18px * var(--k))!important;width:calc(40px * var(--k))!important;height:calc(40px * var(--k))!important;border-radius:0!important;background:linear-gradient(160deg,#f4c27a,#c8862e)!important;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:none!important;filter:drop-shadow(0 0 1px #c8964e) drop-shadow(0 3px 6px rgba(0,0,0,.6))} /* (a diamond by its outline, not by a turn: the pulse's own transform undid the turn) */ #dialogue .more svg{width:46%!important;height:46%!important} html body.touch #dialogue{width:min(760px,calc(80 * var(--vw)))!important;padding:22px 74px 16px 46px!important}body.touch #dialogue::before{width:78px;height:78px;left:-20px;top:calc(12% - 39px)} /* (its right spike on the top gold line: the line runs at 12 % of the plate's height) */ /* the plate's ground textured (01.10.: plain black before): its own layer under the words, the panels' stone-paper texture under a dark tint, cut to the torn brush shape; the gold lines on it */ html body #dialogue{background:none!important} #dialogue .dplate{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(184,134,62,0),rgba(184,134,62,.8) 6%,rgba(184,134,62,.8) 94%,rgba(184,134,62,0)) left 9% top var(--dl) / 84% 1px no-repeat,linear-gradient(90deg,rgba(184,134,62,0),rgba(184,134,62,.6) 6%,rgba(184,134,62,.6) 94%,rgba(184,134,62,0)) left 6% bottom var(--dl) / 84% 1px no-repeat,radial-gradient(ellipse at 30% 40%,rgba(140,108,62,.16),transparent 60%),linear-gradient(rgba(14,12,10,.38),rgba(8,7,6,.58)),var(--tex-panel) 0 0/320px 320px,#141210;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M40 22 L80 15 L129 15 L175 17 L207 18 L238 17 L270 15 L313 21 L347 16 L396 22 L443 17 L502 14 L558 16 L592 15 L631 21 L667 19 L716 17 L763 15 L794 16 L845 17 L884 19 L928 16 L960 20 L962 22 L975 34 L973 46 L986 58 L981 70 L964 82 L990 94 L957 106 L969 118 L982 130 L959 142 L972 154 L954 166 L978 178 L907 185 L851 182 L800 185 L753 184 L697 188 L653 186 L621 186 L572 189 L517 182 L476 186 L445 184 L410 180 L378 187 L344 181 L303 188 L270 183 L224 188 L169 188 L131 183 L90 188 L40 181 L16 180 L6 168 L18 156 L15 144 L31 132 L7 120 L9 108 L13 96 L23 84 L19 72 L45 60 L23 48 L29 36 L20 24Z' fill='%23000'/%3E%3Cg fill='%23000'%3E%3Crect x='990' y='38' width='15' height='2.7'/%3E%3Crect x='993' y='142' width='10' height='2.1'/%3E%3Crect x='982' y='119' width='7' height='1.6'/%3E%3Crect x='983' y='53' width='9' height='1.6'/%3E%3Crect x='980' y='51' width='7' height='2.0'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M40 22 L80 15 L129 15 L175 17 L207 18 L238 17 L270 15 L313 21 L347 16 L396 22 L443 17 L502 14 L558 16 L592 15 L631 21 L667 19 L716 17 L763 15 L794 16 L845 17 L884 19 L928 16 L960 20 L962 22 L975 34 L973 46 L986 58 L981 70 L964 82 L990 94 L957 106 L969 118 L982 130 L959 142 L972 154 L954 166 L978 178 L907 185 L851 182 L800 185 L753 184 L697 188 L653 186 L621 186 L572 189 L517 182 L476 186 L445 184 L410 180 L378 187 L344 181 L303 188 L270 183 L224 188 L169 188 L131 183 L90 188 L40 181 L16 180 L6 168 L18 156 L15 144 L31 132 L7 120 L9 108 L13 96 L23 84 L19 72 L45 60 L23 48 L29 36 L20 24Z' fill='%23000'/%3E%3Cg fill='%23000'%3E%3Crect x='990' y='38' width='15' height='2.7'/%3E%3Crect x='993' y='142' width='10' height='2.1'/%3E%3Crect x='982' y='119' width='7' height='1.6'/%3E%3Crect x='983' y='53' width='9' height='1.6'/%3E%3Crect x='980' y='51' width='7' height='2.0'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat} #dialogue{isolation:isolate} #dialogue .dplate{opacity:.82} /* (the plate a little see-through, 01.10.: the world behind it shows faintly) */ /* the talk's spacing even (01.10.): the gold lines at a fixed distance from the plate's top and foot (--dl), the same gap from the top line to the name as from the last line of words to the foot line (--dg), no minimum height on the words, Next centred in the plate's height, the star's right spike on the top line */ html body #dialogue{--dl:calc(12px * var(--k));--dg:calc(13px * var(--k));padding-top:calc(var(--dl) + var(--dg))!important;padding-bottom:calc(var(--dl) + var(--dg))!important} html body #dialogue .say{min-height:0!important} html body #dialogue .more{top:50%!important;bottom:auto!important;margin-top:calc(-20px * var(--k))} #dialogue::before{top:calc(var(--dl) - 50px * var(--k))!important} html body.touch #dialogue{--dl:10px;--dg:11px} body.touch #dialogue::before{top:calc(var(--dl) - 39px)!important} html body #dialogue{padding-right:calc(96px * var(--k))!important}html body.touch #dialogue{padding-right:84px!important} /* (the words clear of Next on the right, as far from it as they start from the left edge) */ /* the class choice after the user's draft (01.10.): the three in one straight column on a thin gold line, each in a thin gold frame and its colour's smoke drifting out to the right; the title large in two lines between a compass star above and a rule with a diamond, the words under it, a smaller star below, on a dark haze */ :root{--o-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='gL' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c0'/%3E%3Cstop offset='1' stop-color='%23e0a24a'/%3E%3C/linearGradient%3E%3ClinearGradient id='gD' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a8692a'/%3E%3Cstop offset='1' stop-color='%234a2a0c'/%3E%3C/linearGradient%3E%3CradialGradient id='gC'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='.5' stop-color='%23eeb050'/%3E%3Cstop offset='1' stop-color='%236a3e10'/%3E%3C/radialGradient%3E%3Cfilter id='sh'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.5' flood-color='%23000' flood-opacity='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23sh%29'%3E%3Cpath d='M60 30 C78 22 96 26 104 12 M60 90 C42 98 24 94 16 108' fill='none' stroke='%23c8964e' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='60' r='21' fill='none' stroke='%23c8964e' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='24' fill='none' stroke='%235a3a14' stroke-width='1'/%3E%3Cpath d='M60 60 L67.0 60.0 L60.0 6.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L53.0 60.0 L60.0 6.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L60.0 67.0 L114.0 60.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L60.0 53.0 L114.0 60.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L53.0 60.0 L60.0 114.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L67.0 60.0 L60.0 114.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L60.0 53.0 L6.0 60.0Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L60.0 67.0 L6.0 60.0Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L63.5 63.5 L81.2 38.8Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L56.5 56.5 L81.2 38.8Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L56.5 63.5 L81.2 81.2Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L63.5 56.5 L81.2 81.2Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L56.5 56.5 L38.8 81.2Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L63.5 63.5 L38.8 81.2Z' fill='url%28%23gD%29'/%3E%3Cpath d='M60 60 L63.5 56.5 L38.8 38.8Z' fill='url%28%23gL%29'/%3E%3Cpath d='M60 60 L56.5 63.5 L38.8 38.8Z' fill='url%28%23gD%29'/%3E%3Ccircle cx='60' cy='60' r='7.5' fill='url%28%23gC%29' stroke='%234a2a0c' stroke-width='1'/%3E%3Ccircle cx='58' cy='58' r='2' fill='%23fffbe8' opacity='.85'/%3E%3C/g%3E%3C/svg%3E")} #mainmenu[data-mode="create"] .mm-classes .mm-cls{margin-left:0!important} #mainmenu[data-mode="create"] .mm-classes{gap:calc(30px * var(--k));padding:calc(10px * var(--k)) 0} #mainmenu[data-mode="create"] .mm-classes::before{content:"";position:absolute;left:50%;top:-8%;bottom:-8%;width:1px;background:linear-gradient(transparent,rgba(200,150,78,.55) 15%,rgba(200,150,78,.55) 85%,transparent);z-index:-2} .mm-cls .rim{position:absolute;inset:calc(-9px * var(--k));border:1px solid rgba(200,150,78,.55);pointer-events:none} .mm-cls .rim::before,.mm-cls .rim::after{content:"";position:absolute;width:4px;height:4px;background:#c8964e;transform:rotate(45deg)}.mm-cls .rim::before{left:-2.5px;top:-2.5px}.mm-cls .rim::after{right:-2.5px;bottom:-2.5px} .mm-cls .smoke{position:absolute;left:50%;top:50%;width:calc(170px * var(--k));height:calc(70px * var(--k));transform:rotate(-45deg) translate(-12%,-50%);transform-origin:0 0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 60% 50% at 18% 50%,color-mix(in srgb,var(--cg) 70%,transparent),transparent 70%),radial-gradient(ellipse 40% 30% at 55% 35%,color-mix(in srgb,var(--cg) 35%,transparent),transparent 70%),radial-gradient(ellipse 35% 25% at 75% 62%,color-mix(in srgb,var(--cg) 25%,transparent),transparent 70%);filter:blur(7px);opacity:.75;animation:clsSmoke 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.6s)} @keyframes clsSmoke{0%,100%{opacity:.6;transform:rotate(-45deg) translate(-12%,-50%) scaleX(1)}50%{opacity:.85;transform:rotate(-45deg) translate(-8%,-54%) scaleX(1.12)}} .mm-cls.locked .smoke{opacity:.3} #mainmenu[data-mode="create"] .mm-info.none{gap:calc(10px * var(--k));padding:calc(20px * var(--k)) calc(10px * var(--k));background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(6,6,8,.72),rgba(6,6,8,.35) 60%,transparent 80%)} #mainmenu[data-mode="create"] .mm-info.none::before{content:"";width:calc(54px * var(--k));height:calc(54px * var(--k));background:var(--o-star) center/contain no-repeat;opacity:.9} #mainmenu[data-mode="create"] .mm-info.none h2{display:block;font-size:calc(30px * var(--k));line-height:1.12;letter-spacing:.1em;max-width:calc(320px * var(--k));text-shadow:0 2px 14px #000} #mainmenu[data-mode="create"] .mm-info.none h2::before{display:none} #mainmenu[data-mode="create"] .mm-info.none h2::after{content:"";display:block;width:calc(220px * var(--k));height:calc(12px * var(--k));margin:calc(10px * var(--k)) auto 0;background:var(--o-div) center/100% 100% no-repeat} #mainmenu[data-mode="create"] .mm-info.none .mm-desc{max-width:calc(250px * var(--k));font-size:calc(12px * var(--k));line-height:1.5;border:0;padding:0} #mainmenu[data-mode="create"] .mm-info.none .mm-desc::after{content:"";display:block;width:calc(30px * var(--k));height:calc(30px * var(--k));margin:calc(12px * var(--k)) auto 0;background:var(--o-star) center/contain no-repeat;opacity:.6} #mainmenu[data-mode="create"] .mm-classes{gap:calc(44px * var(--k))} #mainmenu[data-mode="create"] .mm-info.none h2{max-width:calc(440px * var(--k));font-size:calc(28px * var(--k))} #mainmenu[data-mode="create"] .mm-info.none{width:min(46vw,calc(440px * var(--k)))} /* (wide enough for the title in two lines) */ /* the class choice, closer to the draft (01.10.): each diamond in a double frame with small diamonds at its points and gold stubs out to the sides, its colour's smoke as curling threads; the title thin and wide-spaced on an ink blot, a long rule with a diamond, a star with a fine arc behind it */ .mm-cls .rim{inset:calc(-30px * var(--k))!important;border:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 112'%3E%3Cg fill='none' stroke='%23c8964e'%3E%3Crect x='21' y='21' width='70' height='70' stroke-width='1.1' stroke-opacity='.85'/%3E%3Crect x='25.5' y='25.5' width='61' height='61' stroke-width='.7' stroke-opacity='.45'/%3E%3Cpath d='M91 21 L108 4 M21 91 L4 108' stroke-width='.9' stroke-opacity='.8'/%3E%3C/g%3E%3Cg fill='%23c8964e'%3E%3Crect x='18.5' y='18.5' width='5' height='5'/%3E%3Crect x='88.5' y='18.5' width='5' height='5'/%3E%3Crect x='18.5' y='88.5' width='5' height='5'/%3E%3Crect x='88.5' y='88.5' width='5' height='5'/%3E%3Crect x='105.5' y='1.5' width='4' height='4'/%3E%3Crect x='2.5' y='106.5' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat} .mm-cls .rim::before,.mm-cls .rim::after{display:none} .mm-cls .smoke{width:calc(230px * var(--k))!important;height:calc(146px * var(--k))!important;transform:rotate(-45deg) translate(-20%,-50%);filter:none!important;opacity:.9!important;background:none!important;animation:clsSmoke2 6s ease-in-out infinite!important;animation-delay:calc(var(--i) * -2s)!important} .mm-cls[data-cls="sorceress"] .smoke{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 160'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='bb' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='120' cy='80' rx='60' ry='34' fill='%23a070ff' fill-opacity='.22' filter='url%28%23bb%29'%3E%3Canimate attributeName='ry' dur='3.4s' repeatCount='indefinite' values='34;44;34'/%3E%3C/ellipse%3E%3Cg filter='url%28%23b%29'%3E%3Cpath d='M70 75 C110 86 134 21 239 46' stroke='%23a070ff' stroke-width='1.6' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.7s' repeatCount='indefinite' values='M70 75 C110 86 134 21 239 46;M70 75 C105 114 133 40 238 54;M70 75 C103 94 141 23 243 55;M70 75 C110 86 134 21 239 46' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 85 C82 118 158 109 242 111' stroke='%23a070ff' stroke-width='1.7' stroke-opacity='0.36' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.3s' repeatCount='indefinite' values='M70 85 C82 118 158 109 242 111;M70 85 C90 112 164 106 250 132;M70 85 C73 98 153 135 240 118;M70 85 C82 118 158 109 242 111' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 80 C109 88 184 100 245 123' stroke='%23a070ff' stroke-width='1.3' stroke-opacity='0.37' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.7s' repeatCount='indefinite' values='M70 80 C109 88 184 100 245 123;M70 80 C119 97 178 120 254 146;M70 80 C111 100 178 119 246 111;M70 80 C109 88 184 100 245 123' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 87 C120 79 139 64 234 132' stroke='%23a070ff' stroke-width='2.4' stroke-opacity='0.28' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.7s' repeatCount='indefinite' values='M70 87 C120 79 139 64 234 132;M70 87 C111 85 130 77 230 153;M70 87 C130 79 149 54 225 137;M70 87 C120 79 139 64 234 132' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 74 C88 33 182 53 247 122' stroke='%23a070ff' stroke-width='1.3' stroke-opacity='0.46' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.3s' repeatCount='indefinite' values='M70 74 C88 33 182 53 247 122;M70 74 C85 31 182 62 249 125;M70 74 C90 57 182 50 252 107;M70 74 C88 33 182 53 247 122' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 90 C81 82 165 37 223 105' stroke='%23a070ff' stroke-width='1.5' stroke-opacity='0.44' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.6s' repeatCount='indefinite' values='M70 90 C81 82 165 37 223 105;M70 90 C72 89 164 47 220 117;M70 90 C85 55 156 47 232 91;M70 90 C81 82 165 37 223 105' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C96 70 166 60 206 115' stroke='%23a070ff' stroke-width='1.2' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.3s' repeatCount='indefinite' values='M70 82 C96 70 166 60 206 115;M70 82 C86 74 170 49 201 132;M70 82 C90 53 164 71 198 105;M70 82 C96 70 166 60 206 115' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 87 C88 72 169 129 212 54' stroke='%23a070ff' stroke-width='1.4' stroke-opacity='0.55' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 87 C88 72 169 129 212 54;M70 87 C81 74 163 146 218 36;M70 87 C84 89 172 146 208 33;M70 87 C88 72 169 129 212 54' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 86 C101 79 155 132 191 26' stroke='%23a070ff' stroke-width='1.1' stroke-opacity='0.37' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.4s' repeatCount='indefinite' values='M70 86 C101 79 155 132 191 26;M70 86 C110 100 164 128 200 50;M70 86 C95 92 161 141 191 15;M70 86 C101 79 155 132 191 26' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 75 C94 102 133 119 229 125' stroke='%23a070ff' stroke-width='0.7' stroke-opacity='0.46' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.4s' repeatCount='indefinite' values='M70 75 C94 102 133 119 229 125;M70 75 C102 125 134 92 233 107;M70 75 C90 112 133 114 237 132;M70 75 C94 102 133 119 229 125' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 75 C119 62 142 79 237 36' stroke='%23a070ff' stroke-width='2.2' stroke-opacity='0.42' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.6s' repeatCount='indefinite' values='M70 75 C119 62 142 79 237 36;M70 75 C125 85 148 97 227 43;M70 75 C126 37 137 66 238 31;M70 75 C119 62 142 79 237 36' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 86 C86 52 134 138 240 36' stroke='%23a070ff' stroke-width='0.6' stroke-opacity='0.27' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.4s' repeatCount='indefinite' values='M70 86 C86 52 134 138 240 36;M70 86 C86 41 130 129 243 41;M70 86 C84 34 131 117 241 48;M70 86 C86 52 134 138 240 36' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 72 C110 97 153 105 224 63' stroke='%23a070ff' stroke-width='0.9' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.5s' repeatCount='indefinite' values='M70 72 C110 97 153 105 224 63;M70 72 C108 97 157 100 227 61;M70 72 C105 99 157 81 222 59;M70 72 C110 97 153 105 224 63' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 89 C120 67 158 47 237 108' stroke='%23a070ff' stroke-width='1.3' stroke-opacity='0.56' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.8s' repeatCount='indefinite' values='M70 89 C120 67 158 47 237 108;M70 89 C127 84 161 60 238 86;M70 89 C121 40 151 63 228 85;M70 89 C120 67 158 47 237 108' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} .mm-cls[data-cls="ranger"] .smoke{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 160'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='bb' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='120' cy='80' rx='60' ry='34' fill='%235acd6a' fill-opacity='.22' filter='url%28%23bb%29'%3E%3Canimate attributeName='ry' dur='3.4s' repeatCount='indefinite' values='34;44;34'/%3E%3C/ellipse%3E%3Cg filter='url%28%23b%29'%3E%3Cpath d='M70 82 C127 104 185 31 213 136' stroke='%235acd6a' stroke-width='1.9' stroke-opacity='0.53' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 82 C127 104 185 31 213 136;M70 82 C130 126 178 29 208 138;M70 82 C129 77 180 18 221 151;M70 82 C127 104 185 31 213 136' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 86 C86 41 182 54 195 144' stroke='%235acd6a' stroke-width='0.8' stroke-opacity='0.47' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 86 C86 41 182 54 195 144;M70 86 C94 29 192 56 199 127;M70 86 C95 52 192 76 191 136;M70 86 C86 41 182 54 195 144' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 73 C110 28 171 55 202 111' stroke='%235acd6a' stroke-width='0.7' stroke-opacity='0.36' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.9s' repeatCount='indefinite' values='M70 73 C110 28 171 55 202 111;M70 73 C110 18 170 67 193 138;M70 73 C101 42 178 28 207 104;M70 73 C110 28 171 55 202 111' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 70 C128 43 175 117 246 52' stroke='%235acd6a' stroke-width='0.7' stroke-opacity='0.31' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.6s' repeatCount='indefinite' values='M70 70 C128 43 175 117 246 52;M70 70 C125 44 181 95 251 68;M70 70 C135 17 184 95 243 58;M70 70 C128 43 175 117 246 52' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 77 C96 60 141 30 190 100' stroke='%235acd6a' stroke-width='2.3' stroke-opacity='0.44' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.6s' repeatCount='indefinite' values='M70 77 C96 60 141 30 190 100;M70 77 C106 41 132 58 191 94;M70 77 C90 66 147 28 189 75;M70 77 C96 60 141 30 190 100' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 71 C87 92 187 85 235 23' stroke='%235acd6a' stroke-width='1.5' stroke-opacity='0.54' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 71 C87 92 187 85 235 23;M70 71 C85 72 194 74 234 51;M70 71 C94 118 186 84 240 22;M70 71 C87 92 187 85 235 23' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 78 C129 119 168 78 204 29' stroke='%235acd6a' stroke-width='0.9' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.7s' repeatCount='indefinite' values='M70 78 C129 119 168 78 204 29;M70 78 C125 135 175 70 209 44;M70 78 C133 129 173 70 208 16;M70 78 C129 119 168 78 204 29' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 85 C127 99 165 32 218 55' stroke='%235acd6a' stroke-width='1.8' stroke-opacity='0.35' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.1s' repeatCount='indefinite' values='M70 85 C127 99 165 32 218 55;M70 85 C131 97 171 40 224 47;M70 85 C130 112 171 23 225 76;M70 85 C127 99 165 32 218 55' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 90 C106 59 180 138 213 112' stroke='%235acd6a' stroke-width='2.3' stroke-opacity='0.43' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 90 C106 59 180 138 213 112;M70 90 C111 72 174 153 215 122;M70 90 C105 66 186 145 218 86;M70 90 C106 59 180 138 213 112' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 79 C114 91 133 76 196 25' stroke='%235acd6a' stroke-width='1.8' stroke-opacity='0.33' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.5s' repeatCount='indefinite' values='M70 79 C114 91 133 76 196 25;M70 79 C107 80 126 59 187 23;M70 79 C112 97 134 61 204 -3;M70 79 C114 91 133 76 196 25' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 76 C122 64 132 88 187 81' stroke='%235acd6a' stroke-width='1.3' stroke-opacity='0.29' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.7s' repeatCount='indefinite' values='M70 76 C122 64 132 88 187 81;M70 76 C118 69 141 106 185 99;M70 76 C124 57 125 93 188 107;M70 76 C122 64 132 88 187 81' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C80 47 164 95 190 98' stroke='%235acd6a' stroke-width='1.2' stroke-opacity='0.56' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.7s' repeatCount='indefinite' values='M70 82 C80 47 164 95 190 98;M70 82 C88 40 163 80 186 124;M70 82 C78 73 172 100 185 125;M70 82 C80 47 164 95 190 98' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 78 C105 59 159 37 224 72' stroke='%235acd6a' stroke-width='1.2' stroke-opacity='0.59' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 78 C105 59 159 37 224 72;M70 78 C100 75 165 9 224 59;M70 78 C113 75 154 24 217 99;M70 78 C105 59 159 37 224 72' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C110 104 137 111 201 86' stroke='%235acd6a' stroke-width='1.5' stroke-opacity='0.48' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.8s' repeatCount='indefinite' values='M70 82 C110 104 137 111 201 86;M70 82 C107 93 138 109 198 100;M70 82 C112 78 132 108 209 108;M70 82 C110 104 137 111 201 86' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} .mm-cls[data-cls="warrior"] .smoke{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 160'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='bb' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='120' cy='80' rx='60' ry='34' fill='%23ff4a36' fill-opacity='.22' filter='url%28%23bb%29'%3E%3Canimate attributeName='ry' dur='3.4s' repeatCount='indefinite' values='34;44;34'/%3E%3C/ellipse%3E%3Cg filter='url%28%23b%29'%3E%3Cpath d='M70 75 C115 37 145 129 195 92' stroke='%23ff4a36' stroke-width='2.3' stroke-opacity='0.29' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.9s' repeatCount='indefinite' values='M70 75 C115 37 145 129 195 92;M70 75 C114 35 145 112 201 69;M70 75 C110 10 140 124 203 85;M70 75 C115 37 145 129 195 92' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 75 C111 64 170 57 228 75' stroke='%23ff4a36' stroke-width='2.4' stroke-opacity='0.27' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 75 C111 64 170 57 228 75;M70 75 C114 87 171 37 220 100;M70 75 C111 47 179 62 233 96;M70 75 C111 64 170 57 228 75' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 77 C118 41 171 99 246 118' stroke='%23ff4a36' stroke-width='2.2' stroke-opacity='0.30' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.4s' repeatCount='indefinite' values='M70 77 C118 41 171 99 246 118;M70 77 C118 24 164 101 247 94;M70 77 C126 41 175 84 241 91;M70 77 C118 41 171 99 246 118' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 75 C122 111 141 64 192 95' stroke='%23ff4a36' stroke-width='1.4' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.5s' repeatCount='indefinite' values='M70 75 C122 111 141 64 192 95;M70 75 C131 94 146 53 182 110;M70 75 C119 92 139 49 190 92;M70 75 C122 111 141 64 192 95' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C84 46 161 66 237 82' stroke='%23ff4a36' stroke-width='1.1' stroke-opacity='0.28' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.1s' repeatCount='indefinite' values='M70 82 C84 46 161 66 237 82;M70 82 C88 73 153 39 229 76;M70 82 C86 60 158 92 227 101;M70 82 C84 46 161 66 237 82' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 88 C118 132 165 52 248 80' stroke='%23ff4a36' stroke-width='0.7' stroke-opacity='0.59' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.6s' repeatCount='indefinite' values='M70 88 C118 132 165 52 248 80;M70 88 C110 138 165 51 241 59;M70 88 C120 129 157 49 252 93;M70 88 C118 132 165 52 248 80' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 78 C90 73 136 103 230 91' stroke='%23ff4a36' stroke-width='1.2' stroke-opacity='0.33' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.0s' repeatCount='indefinite' values='M70 78 C90 73 136 103 230 91;M70 78 C80 65 135 80 239 106;M70 78 C90 85 131 87 230 105;M70 78 C90 73 136 103 230 91' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 70 C117 109 189 40 201 76' stroke='%23ff4a36' stroke-width='1.7' stroke-opacity='0.57' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.7s' repeatCount='indefinite' values='M70 70 C117 109 189 40 201 76;M70 70 C127 101 198 59 201 83;M70 70 C126 124 185 59 195 69;M70 70 C117 109 189 40 201 76' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 87 C111 118 171 135 231 125' stroke='%23ff4a36' stroke-width='1.2' stroke-opacity='0.35' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.4s' repeatCount='indefinite' values='M70 87 C111 118 171 135 231 125;M70 87 C113 110 170 134 232 144;M70 87 C106 94 176 122 229 104;M70 87 C111 118 171 135 231 125' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 75 C105 55 183 66 205 131' stroke='%23ff4a36' stroke-width='1.1' stroke-opacity='0.53' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.8s' repeatCount='indefinite' values='M70 75 C105 55 183 66 205 131;M70 75 C111 69 178 83 207 150;M70 75 C103 71 189 60 208 147;M70 75 C105 55 183 66 205 131' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 88 C111 105 135 84 241 137' stroke='%23ff4a36' stroke-width='2.0' stroke-opacity='0.30' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.4s' repeatCount='indefinite' values='M70 88 C111 105 135 84 241 137;M70 88 C119 82 137 105 244 127;M70 88 C101 129 142 93 238 155;M70 88 C111 105 135 84 241 137' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 84 C95 72 150 87 188 111' stroke='%23ff4a36' stroke-width='1.7' stroke-opacity='0.36' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='2.7s' repeatCount='indefinite' values='M70 84 C95 72 150 87 188 111;M70 84 C92 53 145 81 187 127;M70 84 C87 56 145 69 193 89;M70 84 C95 72 150 87 188 111' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 81 C108 66 183 107 214 89' stroke='%23ff4a36' stroke-width='1.9' stroke-opacity='0.54' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.5s' repeatCount='indefinite' values='M70 81 C108 66 183 107 214 89;M70 81 C117 93 192 87 210 83;M70 81 C101 80 174 129 215 95;M70 81 C108 66 183 107 214 89' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 89 C126 106 189 88 206 130' stroke='%23ff4a36' stroke-width='1.6' stroke-opacity='0.56' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.8s' repeatCount='indefinite' values='M70 89 C126 106 189 88 206 130;M70 89 C127 95 193 86 198 149;M70 89 C126 132 190 112 201 114;M70 89 C126 106 189 88 206 130' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} @keyframes clsSmoke2{0%,100%{opacity:.75;transform:rotate(-45deg) translate(-20%,-50%) scale(1)}50%{opacity:1;transform:rotate(-45deg) translate(-17%,-52%) scale(1.06,1.1)}} #mainmenu[data-mode="create"] .mm-classes{gap:calc(52px * var(--k))!important} #mainmenu[data-mode="create"] .mm-cls svg{width:58%;height:58%;stroke-width:1.7;filter:drop-shadow(0 0 4px var(--cg))} #mainmenu[data-mode="create"] .mm-info.none{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%' y='-40%' width='180%' height='180%'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.85' filter='url%28%23b%29'/%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.45' filter='url%28%23s%29' transform='translate%28200 120%29 scale%28.85%29 translate%28-200 -120%29'/%3E%3Cpath d='M73 130 q-21 3 -34 -2' stroke='%23050506' stroke-width='3.4' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M85 129 q-12 -10 -38 16' stroke='%23050506' stroke-width='3.1' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M77 96 q-14 13 -37 18' stroke='%23050506' stroke-width='3.3' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M88 116 q-23 -14 -26 -10' stroke='%23050506' stroke-width='2.9' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M78 150 q-16 -6 -37 9' stroke='%23050506' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M77 128 q-12 3 -36 17' stroke='%23050506' stroke-width='1.9' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M70 103 q-18 -13 -37 -5' stroke='%23050506' stroke-width='2.6' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3C/svg%3E") center/112% 108% no-repeat!important;padding:calc(34px * var(--k)) calc(20px * var(--k)) calc(30px * var(--k))} #mainmenu[data-mode="create"] .mm-info.none::before{width:calc(46px * var(--k));height:calc(46px * var(--k));opacity:.95;background:linear-gradient(90deg,transparent,rgba(200,150,78,.6)) left calc(50% - 0px) center / 0 0 no-repeat,var(--o-star) center/contain no-repeat;box-shadow:0 0 0 calc(70px * var(--k)) transparent} #mainmenu[data-mode="create"] .mm-info.none::after{content:"";position:absolute;z-index:-1;left:50%;top:calc(-8px * var(--k));width:calc(300px * var(--k));height:calc(300px * var(--k));transform:translateX(-50%);border-radius:50%;border:1px solid rgba(200,150,78,.22);-webkit-mask:linear-gradient(#000 30%,transparent 55%);mask:linear-gradient(#000 30%,transparent 55%);pointer-events:none} #mainmenu[data-mode="create"] .mm-info.none h2{font-weight:400!important;letter-spacing:.16em!important;color:#efe6d6!important} #mainmenu[data-mode="create"] .mm-info.none h2::after{width:min(100%,calc(360px * var(--k)))!important;height:calc(12px * var(--k))!important;background:linear-gradient(90deg,transparent,rgba(200,150,78,.85) 15%,rgba(200,150,78,.85) 85%,transparent) left center/100% 1px no-repeat,var(--o-div) center/calc(60px * var(--k)) 100% no-repeat!important} #mainmenu[data-mode="create"] .mm-info.none .mm-desc{max-width:calc(220px * var(--k))!important;font-size:calc(11px * var(--k))!important;color:#d8ccb4} #mainmenu[data-mode="create"] .mm-info.none .mm-desc::after{width:1px!important;height:calc(40px * var(--k))!important;background:linear-gradient(transparent,rgba(200,150,78,.7))!important;opacity:1!important;position:relative} /* (smoke threads finer and fainter, its glow inside the picture — it had a hard edge; the title in two lines again, the words as the draft breaks them) */ .mm-cls .smoke{width:calc(260px * var(--k))!important;height:calc(160px * var(--k))!important;transform:rotate(-45deg) translate(-27%,-50%)} @keyframes clsSmoke2{0%,100%{opacity:.8;transform:rotate(-45deg) translate(-27%,-50%) scale(1)}50%{opacity:1;transform:rotate(-45deg) translate(-25%,-52%) scale(1.05,1.12)}} #mainmenu[data-mode="create"] .mm-info.none h2{max-width:calc(330px * var(--k))!important} #mainmenu[data-mode="create"] .mm-info.none .mm-desc{max-width:calc(200px * var(--k))!important} #mainmenu[data-mode="create"] .mm-info.none .mm-desc{max-width:none!important}#mainmenu[data-mode="create"] .mm-info.none .mm-desc span{display:block} #mainmenu[data-mode="create"] .mm-classes .mm-cls{width:calc(60px * var(--k));height:calc(60px * var(--k))} #mainmenu[data-mode="create"] .mm-classes{gap:calc(46px * var(--k))!important} #mainmenu[data-mode="create"] .mm-cls svg{width:66%!important;height:66%!important;stroke-width:1.9!important} /* (the class diamonds' glow as a shadow round the tile, not a filter on it: a filter's box cut the smoke off in a hard rectangle) */ #mainmenu[data-mode="create"] .mm-cls,#mainmenu[data-mode="create"] .mm-cls.on,#mainmenu[data-mode="create"] .mm-cls.locked{filter:none!important;animation:none!important;box-shadow:0 0 calc(16px * var(--k)) color-mix(in srgb,var(--cg) 70%,transparent),inset 0 0 calc(12px * var(--k)) color-mix(in srgb,var(--cg) 30%,transparent)} #mainmenu[data-mode="create"] .mm-cls.on{box-shadow:0 0 calc(26px * var(--k)) var(--cg),inset 0 0 calc(14px * var(--k)) color-mix(in srgb,var(--cg) 45%,transparent)} /* the class choice, third pass (01.10.): the ink blot never cut (drawn inside its picture), the ring ornament behind the title clearly seen, each class's coloured haze stronger and waving */ #mainmenu[data-mode="create"] .mm-info.none{background-size:140% 140%!important;overflow:visible} #mainmenu[data-mode="create"] .mm-info.none::after{border:0!important;width:calc(330px * var(--k))!important;height:calc(330px * var(--k))!important;top:calc(-40px * var(--k))!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23c8964e'%3E%3Ccircle cx='150' cy='150' r='142' stroke-width='1' stroke-opacity='.7'/%3E%3Ccircle cx='150' cy='150' r='118' stroke-width='.9' stroke-opacity='.5' stroke-dasharray='2 6'/%3E%3Ccircle cx='150' cy='150' r='150' stroke-width='.6' stroke-opacity='.3'/%3E%3Cg stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M288.0 150.0 L296.0 150.0'/%3E%3Cpath d='M283.3 185.7 L291.0 187.8'/%3E%3Cpath d='M269.5 219.0 L276.4 223.0'/%3E%3Cpath d='M247.6 247.6 L253.2 253.2'/%3E%3Cpath d='M219.0 269.5 L223.0 276.4'/%3E%3Cpath d='M185.7 283.3 L187.8 291.0'/%3E%3Cpath d='M150.0 288.0 L150.0 296.0'/%3E%3Cpath d='M114.3 283.3 L112.2 291.0'/%3E%3Cpath d='M81.0 269.5 L77.0 276.4'/%3E%3Cpath d='M52.4 247.6 L46.8 253.2'/%3E%3Cpath d='M30.5 219.0 L23.6 223.0'/%3E%3Cpath d='M16.7 185.7 L9.0 187.8'/%3E%3Cpath d='M12.0 150.0 L4.0 150.0'/%3E%3Cpath d='M16.7 114.3 L9.0 112.2'/%3E%3Cpath d='M30.5 81.0 L23.6 77.0'/%3E%3Cpath d='M52.4 52.4 L46.8 46.8'/%3E%3Cpath d='M81.0 30.5 L77.0 23.6'/%3E%3Cpath d='M114.3 16.7 L112.2 9.0'/%3E%3Cpath d='M150.0 12.0 L150.0 4.0'/%3E%3Cpath d='M185.7 16.7 L187.8 9.0'/%3E%3Cpath d='M219.0 30.5 L223.0 23.6'/%3E%3Cpath d='M247.6 52.4 L253.2 46.8'/%3E%3Cpath d='M269.5 81.0 L276.4 77.0'/%3E%3Cpath d='M283.3 114.3 L291.0 112.2'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23c8964e' fill-opacity='.85'%3E%3Cpath d='M150 2 L155 8 L150 14 L145 8Z'/%3E%3Cpath d='M150 286 L155 292 L150 298 L145 292Z'/%3E%3Cpath d='M2 150 L8 145 L14 150 L8 155Z'/%3E%3Cpath d='M286 150 L292 145 L298 150 L292 155Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.8;-webkit-mask:linear-gradient(#000 45%,transparent 75%)!important;mask:linear-gradient(#000 45%,transparent 75%)!important;animation:ringTurn 120s linear infinite} @keyframes ringTurn{to{transform:translateX(-50%) rotate(360deg)}} .mm-cls .smoke::before{content:"";position:absolute;left:14%;top:12%;width:70%;height:76%;background:radial-gradient(ellipse 50% 50% at 30% 50%,var(--cg),transparent 70%);opacity:.6;filter:blur(calc(12px * var(--k)));animation:hazeWave 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.2s)} @keyframes hazeWave{0%,100%{transform:translateY(-6%) skewY(-7deg) scaleX(1)}25%{transform:translateY(0) skewY(0) scaleX(1.12)}50%{transform:translateY(6%) skewY(7deg) scaleX(1)}75%{transform:translateY(0) skewY(0) scaleX(1.12)}} @keyframes clsSmoke2{0%,100%{opacity:.9;transform:rotate(-45deg) translate(-27%,-50%) skewY(-5deg)}25%{transform:rotate(-45deg) translate(-25%,-50%) skewY(0) scale(1.06,1.08)}50%{opacity:1;transform:rotate(-45deg) translate(-27%,-50%) skewY(5deg)}75%{transform:rotate(-45deg) translate(-25%,-50%) skewY(0) scale(1.06,1.08)}} .mm-cls .smoke{animation-duration:4.2s!important;opacity:1!important} #mainmenu[data-mode="create"] .mm-info.none h2{font-family:'Cinzel',serif!important;font-weight:400!important;letter-spacing:.2em!important;font-size:calc(27px * var(--k))!important;text-shadow:0 0 18px rgba(0,0,0,.9),0 2px 4px #000!important} #mainmenu[data-mode="create"] .mm-info.none::after{width:calc(300px * var(--k))!important;height:calc(300px * var(--k))!important;top:calc(-28px * var(--k))!important;opacity:.65} /* Mirela's window (the trader's own, not the forge, Yusra's or Seyla's) on the user's painting of the night bazaar (01.10.): it fills the window, its edges already fade to black; the corner flourishes over it */ #shop:not(.smith):not(.pets):not(.seyla){overflow:hidden} #shop:not(.smith):not(.pets):not(.seyla)::before{content:"";display:block;position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(8,8,9,.15),rgba(8,8,9,.35)),url(../assets/ui/bazaar-bg.webp) 30% 60%/cover no-repeat;pointer-events:none} #shop:not(.smith):not(.pets):not(.seyla)>.plate-title,#shop:not(.smith):not(.pets):not(.seyla)>.shbody{position:relative;z-index:1} #shop:not(.smith):not(.pets):not(.seyla)::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--o-c-tl) left calc(10px + var(--sl)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-tr) right calc(10px + var(--sr)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-bl) left calc(10px + var(--sl)) bottom 10px/56px 56px no-repeat,var(--o-c-br) right calc(10px + var(--sr)) bottom 10px/56px 56px no-repeat} body.touch #shop:not(.smith):not(.pets):not(.seyla)::after{background-size:40px 40px} #shop:not(.smith):not(.pets):not(.seyla) .xclose{z-index:6} /* the class choice, fourth pass (01.10.): the ink blot on its own larger layer (a background stops at its box: that was the hard cut), the ring centred on the title block and the block on the screen's middle; black smoke threads among the coloured ones, the threads flickering outward */ #mainmenu[data-mode="create"] .mm-info.none{background:none!important;top:50%!important;transform:translateY(-50%)!important} #mainmenu[data-mode="create"] .mm-info.none h2::before{display:block!important;content:"";position:absolute;z-index:-2;left:50%;top:50%;width:calc(560px * var(--k));height:calc(420px * var(--k));transform:translate(-50%,-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%' y='-40%' width='180%' height='180%'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.85' filter='url%28%23b%29'/%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.45' filter='url%28%23s%29' transform='translate%28200 120%29 scale%28.85%29 translate%28-200 -120%29'/%3E%3Cpath d='M73 130 q-21 3 -34 -2' stroke='%23050506' stroke-width='3.4' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M85 129 q-12 -10 -38 16' stroke='%23050506' stroke-width='3.1' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M77 96 q-14 13 -37 18' stroke='%23050506' stroke-width='3.3' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M88 116 q-23 -14 -26 -10' stroke='%23050506' stroke-width='2.9' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M78 150 q-16 -6 -37 9' stroke='%23050506' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M77 128 q-12 3 -36 17' stroke='%23050506' stroke-width='1.9' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3Cpath d='M70 103 q-18 -13 -37 -5' stroke='%23050506' stroke-width='2.6' fill='none' stroke-linecap='round' opacity='.7' filter='url%28%23s%29'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none} #mainmenu[data-mode="create"] .mm-info.none::after{top:50%!important;transform:translate(-50%,-50%)!important;width:calc(340px * var(--k))!important;height:calc(340px * var(--k))!important;-webkit-mask:radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%)!important;mask:radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%)!important;animation:ringTurn2 140s linear infinite!important} @keyframes ringTurn2{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}} .mm-cls .smoke{animation:smokeFlow 3.2s ease-in-out infinite!important;animation-delay:calc(var(--i) * -1.1s)!important} @keyframes smokeFlow{0%{opacity:.85;transform:rotate(-45deg) translate(-27%,-50%) skewY(-10deg) scaleX(.96)}50%{opacity:1;transform:rotate(-45deg) translate(-24%,-50%) skewY(10deg) scaleX(1.1)}100%{opacity:.85;transform:rotate(-45deg) translate(-27%,-50%) skewY(-10deg) scaleX(.96)}} @keyframes smokeFlicker{0%,100%{transform:translateX(0) skewY(6deg) scaleY(1);opacity:.75}50%{transform:translateX(5%) skewY(-8deg) scaleY(1.15);opacity:1}} /* (01.10., fifth pass: no talk plate behind the title — the soft ink blot again, on its own layer large enough that its blur is never cut; no black threads; the coloured smoke itself moves: its resting transform no longer !important, which had frozen its animation) */ #mainmenu[data-mode="create"] .mm-info.none h2::before{width:calc(620px * var(--k))!important;height:calc(440px * var(--k))!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%' y='-40%' width='180%' height='180%'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.85' filter='url%28%23b%29'/%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.45' filter='url%28%23s%29' transform='translate%28200 120%29 scale%28.85%29 translate%28-200 -120%29'/%3E%3C/svg%3E") center/100% 100% no-repeat!important} /* (the ring smaller, 01.10.) */ #mainmenu[data-mode="create"] .mm-info.none::after{width:calc(270px * var(--k))!important;height:calc(270px * var(--k))!important} /* Mirela's window (01.10.): no headings over the two halves (they made no sense and ran into each other); the ware cards' names whole in their narrow column — smaller gaps and spacing, long words broken — at the same type size; the bazaar painting reaching below the window, its black foot out of sight */ #shop:not(.smith):not(.pets):not(.seyla) .shbuy>h3,#shop:not(.smith):not(.pets):not(.seyla) .shsell>h3{display:none!important} #shop:not(.smith):not(.pets):not(.seyla) .cat{column-gap:calc(8px * var(--k));padding-left:calc(10px * var(--k));padding-right:calc(10px * var(--k));min-width:0;overflow:hidden} #shop:not(.smith):not(.pets):not(.seyla) .cat b{letter-spacing:.02em!important;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;min-width:0;line-height:1.2} #shop:not(.smith):not(.pets):not(.seyla) .cat small{white-space:nowrap} #shop:not(.smith):not(.pets):not(.seyla) .cat .ci{width:calc(30px * var(--k));height:calc(30px * var(--k))} #shop:not(.smith):not(.pets):not(.seyla)::before{bottom:-30%!important;background-position:center,30% 0%!important} #shop:not(.smith):not(.pets):not(.seyla) .cat{overflow:visible!important;padding-top:calc(6px * var(--k))!important;padding-bottom:calc(6px * var(--k))!important;row-gap:0!important}#shop:not(.smith):not(.pets):not(.seyla) .cat em{margin:1px 0} /* (each smoke thread waves on its own now — its curve morphs between three shapes in the picture itself, each at its own pace — the box only breathes a little; 01.10.) */ @keyframes smokeFlow{0%,100%{opacity:.9;transform:rotate(-45deg) translate(-27%,-50%) scaleX(1)}50%{opacity:1;transform:rotate(-45deg) translate(-26%,-50%) scaleX(1.05)}} /* (01.10.: the class frames crisper — thicker, brighter lines; the ink blot behind the title without its dark threads) */ .mm-cls .rim{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 112' shape-rendering='geometricPrecision'%3E%3Cg fill='none' stroke='%23d8a85a'%3E%3Crect x='21' y='21' width='70' height='70' stroke-width='1.8'/%3E%3Crect x='25.5' y='25.5' width='61' height='61' stroke-width='1.1' stroke-opacity='.7'/%3E%3Cpath d='M91 21 L108 4 M21 91 L4 108' stroke-width='1.5'/%3E%3C/g%3E%3Cg fill='%23d8a85a'%3E%3Crect x='18' y='18' width='6' height='6'/%3E%3Crect x='88' y='18' width='6' height='6'/%3E%3Crect x='18' y='88' width='6' height='6'/%3E%3Crect x='88' y='88' width='6' height='6'/%3E%3Crect x='105' y='1' width='5' height='5'/%3E%3Crect x='2' y='106' width='5' height='5'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} #mainmenu[data-mode="create"] .mm-classes::before{width:1.5px!important;background:linear-gradient(transparent,rgba(216,168,90,.85) 12%,rgba(216,168,90,.85) 88%,transparent)!important} /* the class choice after the draft once more (01.10.): each diamond in ONE bevelled copper-gold frame at its very edge (light above, dark below) with a fine line inside, small studded diamonds on its points, a double stud where the chain runs on, the line out to the left only and fading, a faint arc behind; the signs thicker and flatter. The ring behind the title turns (its transform had been !important — that froze it); on a choice the ring whirls in behind the class's words and keeps turning faster, the other classes go out softly, their smoke fading away */ :root{--o-cring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23c8964e'%3E%3Ccircle cx='150' cy='150' r='142' stroke-width='1' stroke-opacity='.7'/%3E%3Ccircle cx='150' cy='150' r='118' stroke-width='.9' stroke-opacity='.5' stroke-dasharray='2 6'/%3E%3Ccircle cx='150' cy='150' r='150' stroke-width='.6' stroke-opacity='.3'/%3E%3Cg stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M288.0 150.0 L296.0 150.0'/%3E%3Cpath d='M283.3 185.7 L291.0 187.8'/%3E%3Cpath d='M269.5 219.0 L276.4 223.0'/%3E%3Cpath d='M247.6 247.6 L253.2 253.2'/%3E%3Cpath d='M219.0 269.5 L223.0 276.4'/%3E%3Cpath d='M185.7 283.3 L187.8 291.0'/%3E%3Cpath d='M150.0 288.0 L150.0 296.0'/%3E%3Cpath d='M114.3 283.3 L112.2 291.0'/%3E%3Cpath d='M81.0 269.5 L77.0 276.4'/%3E%3Cpath d='M52.4 247.6 L46.8 253.2'/%3E%3Cpath d='M30.5 219.0 L23.6 223.0'/%3E%3Cpath d='M16.7 185.7 L9.0 187.8'/%3E%3Cpath d='M12.0 150.0 L4.0 150.0'/%3E%3Cpath d='M16.7 114.3 L9.0 112.2'/%3E%3Cpath d='M30.5 81.0 L23.6 77.0'/%3E%3Cpath d='M52.4 52.4 L46.8 46.8'/%3E%3Cpath d='M81.0 30.5 L77.0 23.6'/%3E%3Cpath d='M114.3 16.7 L112.2 9.0'/%3E%3Cpath d='M150.0 12.0 L150.0 4.0'/%3E%3Cpath d='M185.7 16.7 L187.8 9.0'/%3E%3Cpath d='M219.0 30.5 L223.0 23.6'/%3E%3Cpath d='M247.6 52.4 L253.2 46.8'/%3E%3Cpath d='M269.5 81.0 L276.4 77.0'/%3E%3Cpath d='M283.3 114.3 L291.0 112.2'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23c8964e' fill-opacity='.85'%3E%3Cpath d='M150 2 L155 8 L150 14 L145 8Z'/%3E%3Cpath d='M150 286 L155 292 L150 298 L145 292Z'/%3E%3Cpath d='M2 150 L8 145 L14 150 L8 155Z'/%3E%3Cpath d='M286 150 L292 145 L298 150 L292 155Z'/%3E%3C/g%3E%3C/svg%3E")} .mm-cls .rim{inset:calc(-60px * var(--k))!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' shape-rendering='geometricPrecision'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe2a0'/%3E%3Cstop offset='.45' stop-color='%23d9a456'/%3E%3Cstop offset='1' stop-color='%237a4a1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9a456'/%3E%3Cstop offset='1' stop-color='%23d9a456' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='p'%3E%3Cstop offset='0' stop-color='%23302d30'/%3E%3Cstop offset='1' stop-color='%23121113'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='90' cy='90' r='50' fill='none' stroke='%23c8964e' stroke-opacity='.22' stroke-width='.7' stroke-dasharray='60 40 30 184'/%3E%3Cpath d='M59 121 L0 180' stroke='url%28%23l%29' stroke-width='1.3'/%3E%3Cpath d='M121 59 L128 52' stroke='%23d9a456' stroke-width='1.3'/%3E%3Crect x='60' y='60' width='60' height='60' fill='none' stroke='%23120b05' stroke-width='4.4'/%3E%3Crect x='60' y='60' width='60' height='60' fill='none' stroke='url%28%23g%29' stroke-width='2.8'/%3E%3Crect x='63.4' y='63.4' width='53.2' height='53.2' fill='none' stroke='%23d9a456' stroke-opacity='.5' stroke-width='.7'/%3E%3Cg fill='%231a1009' stroke='url%28%23g%29' stroke-width='1.1'%3E%3Crect x='56.5' y='116.5' width='7' height='7'/%3E%3Crect x='116.5' y='56.5' width='7' height='7'/%3E%3Crect x='56.5' y='56.5' width='7' height='7'/%3E%3Crect x='116.5' y='116.5' width='7' height='7'/%3E%3Crect x='50' y='50' width='4.5' height='4.5'/%3E%3Crect x='125.5' y='125.5' width='4.5' height='4.5'/%3E%3Crect x='127.5' y='50.5' width='4' height='4'/%3E%3Crect x='34' y='144' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23e8bb6a'%3E%3Crect x='59' y='119' width='2' height='2'/%3E%3Crect x='119' y='59' width='2' height='2'/%3E%3Crect x='59' y='59' width='2' height='2'/%3E%3Crect x='119' y='119' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} #mainmenu[data-mode="create"] .mm-cls svg{stroke-width:2.3!important;filter:drop-shadow(0 0 2px var(--cg))!important} #mainmenu[data-mode="create"] .mm-classes .mm-cls{border-image:none!important;border:0!important;background:radial-gradient(circle at 50% 50%,#2c2a2c,#141315 75%)!important} #mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(270px * var(--k));height:calc(270px * var(--k));border:0;background:var(--o-cring) center/contain no-repeat;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%);mask:radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%);transform:none!important;translate:-50% -50%;animation:ringSlow 90s linear infinite!important} @keyframes ringSlow{from{rotate:0deg}to{rotate:360deg}} #mainmenu[data-mode="create"] .mm-info:not(.none)::after{width:calc(380px * var(--k));height:calc(380px * var(--k));opacity:.4;animation:ringWhirl 1.6s cubic-bezier(.15,.75,.3,1) both,ringSlow 24s linear 1.6s infinite!important} @keyframes ringWhirl{from{rotate:-300deg;scale:.6;opacity:0}60%{opacity:.75}to{rotate:0deg;scale:1;opacity:.4}} .mm-cls .smoke{transition:opacity .9s ease-out,filter .9s ease-out,scale .9s ease-out} .mm-cls svg,.mm-cls .rim{transition:opacity .7s ease-out,filter .7s ease-out} #mainmenu[data-mode="create"] .mm-cls{transition:box-shadow .7s ease-out,transform .4s var(--ease-out),opacity .7s} #mainmenu[data-mode="create"] .mm-classes:has(.mm-cls.on) .mm-cls:not(.on){box-shadow:0 0 0 transparent,inset 0 0 0 transparent!important} #mainmenu[data-mode="create"] .mm-classes:has(.mm-cls.on) .mm-cls:not(.on) .smoke{opacity:0!important;filter:blur(8px)!important;scale:1.3 1.5} #mainmenu[data-mode="create"] .mm-classes:has(.mm-cls.on) .mm-cls:not(.on) svg{opacity:.4;filter:grayscale(.7)!important} #mainmenu[data-mode="create"] .mm-classes:has(.mm-cls.on) .mm-cls:not(.on) .rim{opacity:.55} #mainmenu[data-mode="create"] .mm-cls svg{width:74%!important;height:74%!important} #mainmenu[data-mode="create"] .mm-cls,#mainmenu[data-mode="create"] .mm-cls.locked{box-shadow:0 0 calc(18px * var(--k)) color-mix(in srgb,var(--cg) 65%,transparent)!important} #mainmenu[data-mode="create"] .mm-cls.on{box-shadow:0 0 calc(30px * var(--k)) var(--cg),0 0 calc(10px * var(--k)) var(--cg)!important} #mainmenu[data-mode="create"] .mm-cls.on svg{stroke:color-mix(in srgb,var(--cg) 70%,#fff0dc)!important;filter:drop-shadow(0 0 4px var(--cg))!important} #mainmenu[data-mode="create"] .mm-info:not(.none)::after{width:calc(320px * var(--k))!important;height:calc(320px * var(--k))!important} @media (max-height:520px){#mainmenu[data-mode="create"] .mm-classes{gap:calc(34px * var(--k))!important}#mainmenu[data-mode="create"] .mm-classes .mm-cls{width:calc(54px * var(--k));height:calc(54px * var(--k))}} /* (the column clear of a phone's top and bottom edge) */ /* (01.10.: behind a class's words a black fog that drifts; the ring clearer and now and then a gleam running round its lines) */ @property --ga{syntax:'';inherits:false;initial-value:0deg} @property --gk{syntax:'';inherits:false;initial-value:0} #mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after{background:conic-gradient(from var(--ga),transparent 0deg,transparent 300deg,rgba(255,236,180,calc(var(--gk) * .9)) 345deg,rgba(255,250,225,var(--gk)) 356deg,transparent 360deg),var(--o-cring) center/contain no-repeat!important;-webkit-mask:var(--o-cring) center/contain no-repeat!important;mask:var(--o-cring) center/contain no-repeat!important;filter:brightness(1.5) saturate(1.1)} #mainmenu[data-mode="create"] .mm-info.none::after{opacity:.9!important;animation:ringSlow 90s linear infinite,ringGlint 7s ease-in-out infinite!important} #mainmenu[data-mode="create"] .mm-info:not(.none)::after{animation:ringWhirl 1.6s cubic-bezier(.15,.75,.3,1) both,ringSlow 24s linear 1.6s infinite,ringGlint 6s ease-in-out 1.2s infinite!important} @keyframes ringWhirl{from{rotate:-300deg;scale:.6;opacity:0}60%{opacity:.95}to{rotate:0deg;scale:1;opacity:.75}} @keyframes ringGlint{0%{--ga:-40deg;--gk:0}6%{--gk:1}30%{--gk:1}36%,100%{--ga:400deg;--gk:0}} #mainmenu[data-mode="create"] .mm-info:not(.none)::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:150%;height:135%;translate:-50% -50%;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%' y='-40%' width='180%' height='180%'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.85' filter='url%28%23b%29'/%3E%3Cpath d='M319 120 L331 129 L316 137 L302 143 L307 154 L286 156 L277 162 L291 185 L267 184 L248 183 L235 191 L219 199 L200 181 L186 178 L169 183 L154 181 L140 177 L128 172 L105 172 L97 163 L101 152 L73 149 L77 138 L71 129 L67 120 L95 112 L73 101 L76 92 L107 90 L98 77 L124 78 L119 62 L146 68 L149 53 L167 52 L184 54 L200 59 L214 60 L228 62 L243 63 L267 56 L270 70 L279 77 L303 76 L294 90 L303 96 L323 102 L337 110Z' fill='%23050506' fill-opacity='.45' filter='url%28%23s%29' transform='translate%28200 120%29 scale%28.85%29 translate%28-200 -120%29'/%3E%3C/svg%3E") center/100% 100% no-repeat,radial-gradient(ellipse 50% 45% at 50% 50%,rgba(4,4,5,.7),rgba(4,4,5,.35) 55%,transparent 75%);animation:fogIn 1.2s ease-out both,fogDrift 9s ease-in-out 1.2s infinite alternate} @keyframes fogIn{from{opacity:0;scale:.85}to{opacity:1;scale:1}} @keyframes fogDrift{0%{scale:1 1;rotate:0deg;translate:-50% -50%}50%{scale:1.06 .96;rotate:-1.5deg;translate:-52% -49%}100%{scale:.97 1.05;rotate:1.5deg;translate:-48% -51%}} #mainmenu[data-mode="create"] .mm-info:not(.none)::after{width:calc(270px * var(--k))!important;height:calc(270px * var(--k))!important} @media (max-height:520px){#mainmenu[data-mode="create"] .mm-info:not(.none)::after{width:calc(230px * var(--k))!important;height:calc(230px * var(--k))!important}} /* (01.10.: the diamonds' inside as before — their colour glowing in them; the ring drawn as the first time, faded outward and not brightened, keeping its turning, whirl and gleam; the fog behind a class's words reaching up over its name) */ #mainmenu[data-mode="create"] .mm-cls,#mainmenu[data-mode="create"] .mm-cls.locked{box-shadow:0 0 calc(16px * var(--k)) color-mix(in srgb,var(--cg) 70%,transparent),inset 0 0 calc(12px * var(--k)) color-mix(in srgb,var(--cg) 30%,transparent)!important} #mainmenu[data-mode="create"] .mm-cls.on{box-shadow:0 0 calc(26px * var(--k)) var(--cg),inset 0 0 calc(14px * var(--k)) color-mix(in srgb,var(--cg) 45%,transparent)!important} #mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after{filter:none;-webkit-mask:var(--o-cring) center/contain no-repeat,radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%)!important;-webkit-mask-composite:source-in!important;mask:var(--o-cring) center/contain no-repeat,radial-gradient(circle,#000 60%,rgba(0,0,0,.35) 75%)!important;mask-composite:intersect!important} #mainmenu[data-mode="create"] .mm-info.none::after{opacity:.65!important} @keyframes ringWhirl{from{rotate:-300deg;scale:.6;opacity:0}60%{opacity:.7}to{rotate:0deg;scale:1;opacity:.45}} #mainmenu[data-mode="create"] .mm-info:not(.none)::before{height:150%;translate:-50% -58%;background-position:center,center;animation:fogIn 1.2s ease-out both,fogDrift2 9s ease-in-out 1.2s infinite alternate} @keyframes fogDrift2{0%{scale:1 1;rotate:0deg;translate:-50% -58%}50%{scale:1.06 .96;rotate:-1.5deg;translate:-52% -57%}100%{scale:.97 1.05;rotate:1.5deg;translate:-48% -59%}} /* (01.10.: the ring thinner but in stronger gold — drawn as a gold fill through the ring's own shape, the gleam on it; the fog behind a class's words from above its name down past the text; the signs of the classes not chosen thin) */ :root{--o-ringm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='150' cy='150' r='142' stroke-width='.75'/%3E%3Ccircle cx='150' cy='150' r='118' stroke-width='.7' stroke-opacity='.75' stroke-dasharray='2 6'/%3E%3Ccircle cx='150' cy='150' r='150' stroke-width='.45' stroke-opacity='.5'/%3E%3Cg stroke-width='.7' stroke-opacity='.85'%3E%3Cpath d='M288.0 150.0 L296.0 150.0'/%3E%3Cpath d='M283.3 185.7 L291.0 187.8'/%3E%3Cpath d='M269.5 219.0 L276.4 223.0'/%3E%3Cpath d='M247.6 247.6 L253.2 253.2'/%3E%3Cpath d='M219.0 269.5 L223.0 276.4'/%3E%3Cpath d='M185.7 283.3 L187.8 291.0'/%3E%3Cpath d='M150.0 288.0 L150.0 296.0'/%3E%3Cpath d='M114.3 283.3 L112.2 291.0'/%3E%3Cpath d='M81.0 269.5 L77.0 276.4'/%3E%3Cpath d='M52.4 247.6 L46.8 253.2'/%3E%3Cpath d='M30.5 219.0 L23.6 223.0'/%3E%3Cpath d='M16.7 185.7 L9.0 187.8'/%3E%3Cpath d='M12.0 150.0 L4.0 150.0'/%3E%3Cpath d='M16.7 114.3 L9.0 112.2'/%3E%3Cpath d='M30.5 81.0 L23.6 77.0'/%3E%3Cpath d='M52.4 52.4 L46.8 46.8'/%3E%3Cpath d='M81.0 30.5 L77.0 23.6'/%3E%3Cpath d='M114.3 16.7 L112.2 9.0'/%3E%3Cpath d='M150.0 12.0 L150.0 4.0'/%3E%3Cpath d='M185.7 16.7 L187.8 9.0'/%3E%3Cpath d='M219.0 30.5 L223.0 23.6'/%3E%3Cpath d='M247.6 52.4 L253.2 46.8'/%3E%3Cpath d='M269.5 81.0 L276.4 77.0'/%3E%3Cpath d='M283.3 114.3 L291.0 112.2'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M150 2 L155 8 L150 14 L145 8Z'/%3E%3Cpath d='M150 286 L155 292 L150 298 L145 292Z'/%3E%3Cpath d='M2 150 L8 145 L14 150 L8 155Z'/%3E%3Cpath d='M286 150 L292 145 L298 150 L292 155Z'/%3E%3C/g%3E%3C/svg%3E")} #mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after{background:conic-gradient(from var(--ga),transparent 0deg,transparent 300deg,rgba(255,236,180,calc(var(--gk) * .9)) 345deg,rgba(255,250,225,var(--gk)) 356deg,transparent 360deg),linear-gradient(#f0c070,#d49a4a)!important;-webkit-mask:var(--o-ringm) center/contain no-repeat,radial-gradient(circle,#000 62%,rgba(0,0,0,.45) 76%)!important;-webkit-mask-composite:source-in!important;mask:var(--o-ringm) center/contain no-repeat,radial-gradient(circle,#000 62%,rgba(0,0,0,.45) 76%)!important;mask-composite:intersect!important} #mainmenu[data-mode="create"] .mm-info.none::after{opacity:.85!important} @keyframes ringWhirl{from{rotate:-300deg;scale:.6;opacity:0}60%{opacity:.9}to{rotate:0deg;scale:1;opacity:.6}} #mainmenu[data-mode="create"] .mm-info:not(.none)::before{top:-14%;height:92%;translate:-50% 0;background-size:100% 100%,100% 100%;background-image:radial-gradient(ellipse 50% 50% at 50% 48%,rgba(4,4,5,.82),rgba(4,4,5,.55) 50%,rgba(4,4,5,.2) 72%,transparent 85%)!important;animation:fogIn 1.2s ease-out both,fogDrift3 9s ease-in-out 1.2s infinite alternate} @keyframes fogDrift3{0%{scale:1 1;rotate:0deg;translate:-50% 0}50%{scale:1.05 .97;rotate:-1.2deg;translate:-52% 1%}100%{scale:.97 1.04;rotate:1.2deg;translate:-48% -1%}} #mainmenu[data-mode="create"] .mm-classes:has(.mm-cls.on) .mm-cls:not(.on) svg{stroke-width:1.1!important} /* (01.10.: the bazaar painting lower still in Mirela's window, its top edge fading into the window's dark) */ #shop:not(.smith):not(.pets):not(.seyla)::before{top:14%!important;bottom:-44%!important;-webkit-mask:linear-gradient(transparent,#000 18%);mask:linear-gradient(transparent,#000 18%)} /* (01.10.: the sell grid's tiles as the bag's — the same textured tile, empty ones dimmed, the same shadow) */ #shop .sgrid .cell{background:linear-gradient(rgba(6,7,8,.62),rgba(6,7,8,.62)),var(--tex) 0 0/256px 256px,var(--ink)!important;background-clip:padding-box!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))} #shop .sgrid .cell:not([class*=" r-"]){opacity:.55} #shop .sgrid .cell.sel{filter:drop-shadow(0 0 6px rgba(238,162,74,.5))} #shop .sgrid .cell:not([class*=" r-"]){opacity:1} #shop:not(.smith):not(.pets):not(.seyla) .cat{background:linear-gradient(#101113,#090a0b)!important;background-clip:padding-box!important} /* (the ware cards solid, the painting not showing through; 01.10.) */ /* (01.10.: the sell grid's tiles exactly as the bag's: the bag's page under each tile, solid, and the tile itself drawn over it as in the bag — dimmed when empty, full with a ware in it — so nothing of the painting shows through) */ #shop .sgrid .cell{opacity:1!important;border:2px solid transparent!important;border-image:none!important;background:linear-gradient(rgba(36,38,42,.52),rgba(16,17,19,.66)),var(--tex-panel) 0 0/384px 384px,var(--an-0)!important;background-clip:border-box!important} #shop .sgrid .cell::before{content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;opacity:.55} #shop .sgrid .cell[class*=" r-"]::before{opacity:1} #shop .sgrid .cell.sel::before{border-image-source:var(--o-tile-gold);opacity:1} #shop .sgrid .cell img{position:relative;z-index:1}#shop .sgrid .cell[class*=" r-"]::after{z-index:2} #shop .sgrid .cell[class*=" r-"]::after{inset:4px!important;background:radial-gradient(ellipse at 50% 55%,var(--rg),transparent 72%);z-index:0!important} #shop .sgrid .cell.r-normal{--rc:rgba(228,224,214,.6);--rg:rgba(228,224,214,.1)}#shop .sgrid .cell.r-magic{--rg:rgba(91,141,255,.32)}#shop .sgrid .cell.r-rare{--rg:rgba(245,207,61,.3)}#shop .sgrid .cell.r-unique{--rg:rgba(255,125,31,.36)} #shop .sgrid .cell img{width:auto!important;height:auto!important;max-width:82%;max-height:82%} /* (01.10.: a ware too dear no longer see-through — the card stays solid, only its contents go grey and dark) */ #shop .cat.dim{opacity:1!important}#shop .cat.dim>*{filter:grayscale(.85) brightness(.6)} #shop .cat{background:linear-gradient(#101113,#090a0b)!important;background-clip:padding-box!important} /* a class chosen (01.10.): two seconds of flourish on its diamond with the sound — it draws in and charges (its glow gathering inside) for most of a second, then on the blow spins a full turn and springs out: two diamond shock rings run outward in its colour, rays of light turn behind it, its smoke surges; then it settles into its chosen state */ #mainmenu[data-mode="create"] .mm-classes .mm-cls.pick{animation:clsPick 2s cubic-bezier(.3,.6,.3,1) both!important;z-index:3} @keyframes clsPick{0%{transform:rotate(45deg) scale(1)} 38%{transform:rotate(45deg) scale(.82);box-shadow:0 0 calc(8px * var(--k)) var(--cg),inset 0 0 calc(30px * var(--k)) var(--cg)} 55%{transform:rotate(405deg) scale(1.42);box-shadow:0 0 calc(70px * var(--k)) var(--cg),0 0 calc(20px * var(--k)) #fff,inset 0 0 calc(24px * var(--k)) var(--cg)} 75%{transform:rotate(405deg) scale(1.06)} 100%{transform:rotate(405deg) scale(1.12);box-shadow:0 0 calc(26px * var(--k)) var(--cg),inset 0 0 calc(14px * var(--k)) color-mix(in srgb,var(--cg) 45%,transparent)}} .mm-cls .burst{position:absolute;inset:0;pointer-events:none;border:2px solid var(--cg);box-shadow:0 0 calc(14px * var(--k)) var(--cg),inset 0 0 calc(10px * var(--k)) var(--cg);opacity:0;animation:clsBurst 1.1s cubic-bezier(.2,.7,.3,1) .76s both} .mm-cls .burst.b2{border-width:1px;animation-delay:.92s;animation-duration:1.2s} @keyframes clsBurst{0%{opacity:0;scale:1}8%{opacity:1}100%{opacity:0;scale:3.2}} .mm-cls .rays{position:absolute;inset:-160%;z-index:-2;pointer-events:none;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--cg) 70%,#fff) 0deg 2deg,transparent 2deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.5) 25%,transparent 48%);mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.5) 25%,transparent 48%);opacity:0;animation:clsRays 1.5s ease-out .7s both} @keyframes clsRays{0%{opacity:0;rotate:0deg;scale:.4}20%{opacity:.85}100%{opacity:0;rotate:70deg;scale:1.2}} .mm-cls.pick .smoke{scale:1.35 1.5} /* (the flourish retimed, 01.10.: no waiting — the spin starts on the press after a short wind-up and bursts at ~0.55 s with the blow; the class's stage and theme follow at 1.15 s, the rings and rays still fading over it) */ #mainmenu[data-mode="create"] .mm-classes .mm-cls.pick{animation:clsPick2 1.5s cubic-bezier(.3,.6,.3,1) both!important} @keyframes clsPick2{0%{transform:rotate(45deg) scale(1)} 12%{transform:rotate(45deg) scale(.86);box-shadow:0 0 calc(8px * var(--k)) var(--cg),inset 0 0 calc(30px * var(--k)) var(--cg)} 38%{transform:rotate(405deg) scale(1.42);box-shadow:0 0 calc(70px * var(--k)) var(--cg),0 0 calc(20px * var(--k)) #fff,inset 0 0 calc(24px * var(--k)) var(--cg)} 65%{transform:rotate(405deg) scale(1.06)} 100%{transform:rotate(405deg) scale(1.12);box-shadow:0 0 calc(26px * var(--k)) var(--cg),inset 0 0 calc(14px * var(--k)) color-mix(in srgb,var(--cg) 45%,transparent)}} .mm-cls .burst{animation-delay:.5s}.mm-cls .burst.b2{animation-delay:.66s}.mm-cls .rays{animation-delay:.45s} /* the attack button's ring (01.10.): the class choice's thin gold ring round it (it had taken that ring by a clash of names and the user liked it — now on purpose), turning slowly; on a press it whirls in brightly and a gleam runs round it */ .tbtn.main::before{background:conic-gradient(from var(--ga),transparent 0deg,transparent 300deg,rgba(255,236,180,calc(var(--gk) * .9)) 345deg,rgba(255,250,225,var(--gk)) 356deg,transparent 360deg),linear-gradient(#f0c070,#d49a4a)!important;-webkit-mask:var(--o-ringm) center/100% 100% no-repeat;mask:var(--o-ringm) center/100% 100% no-repeat;animation:ringSlow 120s linear infinite} .tbtn.main.press::before{animation:ringSlow 120s linear infinite,tbtnWhirl .6s cubic-bezier(.15,.75,.3,1),ringGlint 1.2s ease-out} @keyframes tbtnWhirl{from{transform:rotate(-140deg) scale(1.14);filter:brightness(1.9)}to{transform:none;filter:none}} /* (01.10.: the talk plate narrower) */ html body #dialogue{width:min(900px,calc(70 * var(--vw)))!important}html body.touch #dialogue{width:min(640px,calc(66 * var(--vw)))!important} html body #dialogue .who{white-space:nowrap;min-width:0;overflow:hidden} /* (the name on one line; Dialogue.fitName shrinks it if it does not fit) */ /* (01.10.: the hero list scrolls — in a flex column its rows had shrunk to fit instead of running over, so there was nothing to scroll and the "+ Create character" line stayed out of reach) */ #mainmenu .mm-slots>*{flex-shrink:0} #mainmenu[data-mode="select"] .mm-slots{overflow-y:auto!important;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-bottom:calc(30px + var(--sb))!important} /* the fourth class (01.10.): the necromancer, soul-blue; four diamonds now, each smaller so the column keeps its room */ .mm-cls[data-cls="necromancer"]{--cg:#3a66ff} .mm-cls[data-cls="necromancer"] .smoke{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 160'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='bb' x='-50%' y='-50%' width='200%' height='200%'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='120' cy='80' rx='60' ry='34' fill='%233a66ff' fill-opacity='.22' filter='url%28%23bb%29'%3E%3Canimate attributeName='ry' dur='3.4s' repeatCount='indefinite' values='34;44;34'/%3E%3C/ellipse%3E%3Cg filter='url%28%23b%29'%3E%3Cpath d='M70 82 C127 104 185 31 213 136' stroke='%233a66ff' stroke-width='1.9' stroke-opacity='0.53' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 82 C127 104 185 31 213 136;M70 82 C130 126 178 29 208 138;M70 82 C129 77 180 18 221 151;M70 82 C127 104 185 31 213 136' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 86 C86 41 182 54 195 144' stroke='%233a66ff' stroke-width='0.8' stroke-opacity='0.47' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 86 C86 41 182 54 195 144;M70 86 C94 29 192 56 199 127;M70 86 C95 52 192 76 191 136;M70 86 C86 41 182 54 195 144' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 73 C110 28 171 55 202 111' stroke='%233a66ff' stroke-width='0.7' stroke-opacity='0.36' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.9s' repeatCount='indefinite' values='M70 73 C110 28 171 55 202 111;M70 73 C110 18 170 67 193 138;M70 73 C101 42 178 28 207 104;M70 73 C110 28 171 55 202 111' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 70 C128 43 175 117 246 52' stroke='%233a66ff' stroke-width='0.7' stroke-opacity='0.31' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.6s' repeatCount='indefinite' values='M70 70 C128 43 175 117 246 52;M70 70 C125 44 181 95 251 68;M70 70 C135 17 184 95 243 58;M70 70 C128 43 175 117 246 52' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 77 C96 60 141 30 190 100' stroke='%233a66ff' stroke-width='2.3' stroke-opacity='0.44' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.6s' repeatCount='indefinite' values='M70 77 C96 60 141 30 190 100;M70 77 C106 41 132 58 191 94;M70 77 C90 66 147 28 189 75;M70 77 C96 60 141 30 190 100' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 71 C87 92 187 85 235 23' stroke='%233a66ff' stroke-width='1.5' stroke-opacity='0.54' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 71 C87 92 187 85 235 23;M70 71 C85 72 194 74 234 51;M70 71 C94 118 186 84 240 22;M70 71 C87 92 187 85 235 23' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 78 C129 119 168 78 204 29' stroke='%233a66ff' stroke-width='0.9' stroke-opacity='0.38' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.7s' repeatCount='indefinite' values='M70 78 C129 119 168 78 204 29;M70 78 C125 135 175 70 209 44;M70 78 C133 129 173 70 208 16;M70 78 C129 119 168 78 204 29' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 85 C127 99 165 32 218 55' stroke='%233a66ff' stroke-width='1.8' stroke-opacity='0.35' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.1s' repeatCount='indefinite' values='M70 85 C127 99 165 32 218 55;M70 85 C131 97 171 40 224 47;M70 85 C130 112 171 23 225 76;M70 85 C127 99 165 32 218 55' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 90 C106 59 180 138 213 112' stroke='%233a66ff' stroke-width='2.3' stroke-opacity='0.43' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.0s' repeatCount='indefinite' values='M70 90 C106 59 180 138 213 112;M70 90 C111 72 174 153 215 122;M70 90 C105 66 186 145 218 86;M70 90 C106 59 180 138 213 112' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 79 C114 91 133 76 196 25' stroke='%233a66ff' stroke-width='1.8' stroke-opacity='0.33' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.5s' repeatCount='indefinite' values='M70 79 C114 91 133 76 196 25;M70 79 C107 80 126 59 187 23;M70 79 C112 97 134 61 204 -3;M70 79 C114 91 133 76 196 25' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 76 C122 64 132 88 187 81' stroke='%233a66ff' stroke-width='1.3' stroke-opacity='0.29' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='4.7s' repeatCount='indefinite' values='M70 76 C122 64 132 88 187 81;M70 76 C118 69 141 106 185 99;M70 76 C124 57 125 93 188 107;M70 76 C122 64 132 88 187 81' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C80 47 164 95 190 98' stroke='%233a66ff' stroke-width='1.2' stroke-opacity='0.56' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.7s' repeatCount='indefinite' values='M70 82 C80 47 164 95 190 98;M70 82 C88 40 163 80 186 124;M70 82 C78 73 172 100 185 125;M70 82 C80 47 164 95 190 98' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 78 C105 59 159 37 224 72' stroke='%233a66ff' stroke-width='1.2' stroke-opacity='0.59' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.2s' repeatCount='indefinite' values='M70 78 C105 59 159 37 224 72;M70 78 C100 75 165 9 224 59;M70 78 C113 75 154 24 217 99;M70 78 C105 59 159 37 224 72' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3Cpath d='M70 82 C110 104 137 111 201 86' stroke='%233a66ff' stroke-width='1.5' stroke-opacity='0.48' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='3.8s' repeatCount='indefinite' values='M70 82 C110 104 137 111 201 86;M70 82 C107 93 138 109 198 100;M70 82 C112 78 132 108 209 108;M70 82 C110 104 137 111 201 86' calcMode='spline' keySplines='.45 0 .55 1;.45 0 .55 1;.45 0 .55 1'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat!important} #mainmenu[data-mode="create"] .mm-classes .mm-cls{width:calc(50px * var(--k))!important;height:calc(50px * var(--k))!important} #mainmenu[data-mode="create"] .mm-classes{gap:calc(34px * var(--k))!important} @media (max-height:520px){#mainmenu[data-mode="create"] .mm-classes .mm-cls{width:calc(42px * var(--k))!important;height:calc(42px * var(--k))!important}#mainmenu[data-mode="create"] .mm-classes{gap:calc(24px * var(--k))!important}} #mainmenu[data-mode="create"] .mm-cls .rim{inset:-100%!important} /* (the frame drawn at the tile's own edge whatever its size: the box three tiles wide, the tile its middle third) */ /* the character choice's loading screen (01.10.): the painting alone and the bar, no land's name, no tip */ #zload.bare .zl-name,#zload.bare .zl-tip{display:none!important} /* the Bonedancer's portrait, until his own sketch comes (01.10.): the sorcerer's for him, the sorceress's for her */ .mm-port.nec i,#tLvl.nec .d i{background-image:url(../assets/ui/necromancer-sketch.webp)!important;background-position:47% 18%!important} .mm-port.nec.alt i,#tLvl.nec.alt .d i{background-image:url(../assets/ui/necromancer-f-sketch.webp)!important;background-position:44% 18%!important} #skills[data-cls=necromancer] .spage::before{background-image:url(../assets/ui/necromancer-sketch.webp)} #skills.alt[data-cls=necromancer] .spage::before{background-image:url(../assets/ui/necromancer-f-sketch.webp)} /* the warm-up before Play (js/core/warmup.js): a bar in the zone loading screen's gold, the line under it bright enough to read (02.10.) */ #loading #loadBar{width:min(64vw,calc(320px * var(--k)));height:3px;margin-top:calc(14px * var(--k));background:rgba(138,106,58,.35);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.5)} #loading #loadBar[hidden]{display:none} #loading #loadBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a6a3a,#eea24a);box-shadow:0 0 8px rgba(238,162,74,.7);transition:width .4s ease-out} #loading #loadText.warm{opacity:1;color:var(--bone);font:600 calc(13px * var(--k)) var(--f-display)!important;letter-spacing:.22em;margin-top:calc(8px * var(--k))!important;margin-bottom:0!important} /* the warm-up's splash: its painting crossfading to the next every 7 s, a light line under the bar, the first-start note (js/core/warmup.js splashDeco) */ #loading .warm-art{position:absolute;inset:-3%;background:center 38%/cover no-repeat;opacity:0;transition:opacity 1.5s ease;z-index:0;pointer-events:none;animation:keyart 30s ease-in-out infinite alternate} #loading .warm-art.on{opacity:1} #loading #loadQuip{position:relative;z-index:1;margin:calc(4px * var(--k)) 0 0!important;font:italic calc(12px * var(--k)) var(--f-body)!important;letter-spacing:.04em!important;color:var(--bone-lo);opacity:0!important;transition:opacity .35s;text-shadow:0 1px 3px #000;min-height:1.4em} #loading #loadQuip.on{opacity:1!important;color:var(--bone)} #loading #loadNote{position:relative;z-index:1;margin:calc(10px * var(--k)) 0 0!important;font:calc(10.5px * var(--k)) var(--f-body)!important;letter-spacing:.06em!important;color:#d8b878;opacity:.8!important;text-shadow:0 1px 3px #000;max-width:min(80vw,520px);text-align:center} #loading #loadSkip{position:relative;z-index:2;margin:calc(10px * var(--k)) 0 calc(17vh + 12px + var(--sb));padding:calc(5px * var(--k)) calc(18px * var(--k));font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bone);background:rgba(20,16,12,.7);border:1px solid rgba(216,184,120,.45);cursor:pointer} #loading #loadSkip:hover{border-color:#d8b878;color:#fff} #loading #loadSkip:disabled{opacity:.4} /* the talk plate wider on a big screen (02.10.: it read cramped on the desktop); a phone keeps its narrower one */ html body #dialogue{width:min(1100px,calc(78 * var(--vw)))!important} @media (min-width:1000px){html body.touch #dialogue{width:min(1000px,calc(72 * var(--vw)))!important}} /* ------------------------------ the Lodestar (js/ui/lodepanel.js): a star chart, the chosen star's card on the right ------------------------------ */ #gmenu .tile .lnb{display:none}#gmenu .tile.has .lnb{display:block} #lodep{position:fixed;inset:0;z-index:46;display:none;flex-direction:column;pointer-events:auto; background:radial-gradient(ellipse at 40% 50%,rgba(40,48,80,.18),transparent 60%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.66)),linear-gradient(rgba(12,12,16,.6),rgba(6,6,8,.75)),var(--tex-panel,none) 0 0/384px 384px,#0d0d10!important} #lodep.open{display:flex} #lodep .xclose{right:calc(10px + var(--sr));top:calc(8px + var(--st))} #lodep .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important} #lodep .lsbody{flex:1;min-height:0;display:flex;gap:calc(16px * var(--k));padding:4px calc(22px + var(--sr)) 14px calc(22px + var(--sl))} #lodep .lsboard{flex:1;min-width:0;position:relative;overflow:hidden;touch-action:none;cursor:grab;border-radius:6px; box-shadow:inset 0 0 0 1px rgba(200,160,96,.18),inset 0 0 60px rgba(0,0,0,.85);background:radial-gradient(ellipse at 50% 50%,#121424 0%,#0a0a12 55%,#060608 100%)} #lodep .lsboard:active{cursor:grabbing} /* the chart's ground, drifting a little with it (its colours below, 'the chart's ground'; the painted sky gone 16.10.); a gold rule with corner brackets round the board (03.10.: after the user's reference picture) */ #lodep .lsbg{position:absolute;inset:0;pointer-events:none;will-change:transform} #lodep::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--o-c-tl) left 10px top 10px/56px 56px no-repeat,var(--o-c-bl) left 10px bottom 10px/56px 56px no-repeat,var(--o-c-br) right 10px bottom 10px/56px 56px no-repeat} /* (the window's own corner scrolls, above the chart: 16.10., the user — one frame, the window's, the chart running under it) */ /* the right column's ornaments (03.10., after the reference): rules with a diamond in the middle and small ones at their ends, the buttons with gold tips */ #lodep .lsrule{display:block;position:relative;flex:none;height:calc(12px * var(--k));margin:calc(2px * var(--k)) 0} #lodep .lsrule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(138,106,58,.8) 10%,#c8a060 40%,#c8a060 60%,rgba(138,106,58,.8) 90%,transparent)} #lodep .lsrule b{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);background:#0d0c0b;border:1px solid #d8b070;box-shadow:0 0 0 2px #0d0c0b,0 0 0 3px rgba(200,160,96,.35)} #lodep .lsrule b.e{width:4px;height:4px;margin:-2.5px 0 0 0;border:0;background:#c8a060;box-shadow:none}#lodep .lsrule b.l{left:12%}#lodep .lsrule b.r{left:auto;right:12%} #lodep .lstot .lsrule{margin:0 0 calc(4px * var(--k))} #lodep .lsbtn{position:relative;margin:0 calc(14px * var(--k))} #lodep .lsbtn::before,#lodep .lsbtn::after{content:"";position:absolute;top:50%;width:calc(16px * var(--k));height:calc(20px * var(--k));margin-top:calc(-10px * var(--k));pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M16 10H8M8 10Q4 10 3 6M8 10Q4 10 3 14' stroke='%23c8a060' stroke-width='1.2' fill='none'/%3E%3Cpath d='M0 10l3-3 3 3-3 3z' fill='%23d8b070'/%3E%3C/svg%3E") center/contain no-repeat} #lodep .lsbtn::before{left:calc(-15px * var(--k))}#lodep .lsbtn::after{right:calc(-15px * var(--k));transform:scaleX(-1)} #lodep .lsbtn.fire{margin:0}#lodep .lsbtn.fire::before,#lodep .lsbtn.fire::after{display:none} #lodep .lsreset .rr{position:relative;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a,0 0 0 3px #0d0c0b,0 0 0 4px rgba(200,160,96,.35)} /* the glints on the painted sky */ #lodep .lsch .ni.key{filter:drop-shadow(0 0 10px var(--c))} #lodep .lsvg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none} #lodep .lsview{will-change:transform} /* the sky and the astrolabe */ #lodep .lsastro .ring{fill:none;stroke:#c8a060;stroke-opacity:.16;stroke-width:1.2;stroke-dasharray:2 9} #lodep .lsastro .rim{fill:none;stroke:#c8a060;stroke-opacity:.38;stroke-width:1.6}#lodep .lsastro .rim2{fill:none;stroke:#c8a060;stroke-opacity:.16;stroke-width:1} #lodep .lsastro .tick{fill:none;stroke:#c8a060;stroke-opacity:.38;stroke-width:1.2} #lodep .pname text{font:600 17px var(--f-display);letter-spacing:.26em;text-transform:uppercase;fill:var(--c);opacity:.9;paint-order:stroke;stroke:#07070a;stroke-width:4px} /* the lines */ #lodep .e{fill:none;stroke-linecap:round;stroke-linejoin:round} /* the stars */ #lodep .ln{cursor:pointer} #lodep .ln .hit{fill:transparent} #lodep .ln .selr{fill:none;stroke:#fff3dc;stroke-width:1.6;stroke-dasharray:3 4;opacity:0;transform-box:fill-box;transform-origin:center} #lodep .ln.dist{opacity:.7}#lodep .ln.far{opacity:.2} #lodep .ln.plan{opacity:1} #lodep .ln.sel{opacity:1}#lodep .ln.sel .selr{opacity:1;animation:lsSpin 9s linear infinite} #lodep .ln.pop>:not(.hit){animation:lsPop .55s cubic-bezier(.2,1.6,.4,1)} #lodep .cost circle{fill:#16110b;stroke:#ffd27a;stroke-width:1.6}#lodep .cost text{font:700 12px var(--f-display);fill:#ffe6b0} @keyframes lsPulse{0%,100%{opacity:.08}50%{opacity:.5}} @keyframes lsSpin{to{transform:rotate(360deg)}} @keyframes lsPop{0%{transform:scale(1.8);opacity:.3}100%{transform:scale(1);opacity:1}} #lodep .ln.pop>*{transform-box:fill-box;transform-origin:center} /* the zoom buttons */ #lodep .lszoom{position:absolute;left:calc(12px * var(--k));bottom:calc(12px * var(--k));display:flex;flex-direction:column;gap:calc(8px * var(--k))} #lodep .lszoom button{width:calc(38px * var(--k));height:calc(38px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer; border:1.5px solid #5a4628;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a,0 2px 8px rgba(0,0,0,.6);background:radial-gradient(circle at 50% 35%,#2a2620,#0c0b0a)} #lodep .lszoom svg{width:52%;height:52%;fill:none;stroke:#c8a060;stroke-width:1.9;stroke-linecap:round} #lodep .lszoom button:hover{border-color:#c8a060} /* the right column */ #lodep .lsinfo{flex:none;width:clamp(210px,24%,300px);min-width:0;display:flex;flex-direction:column;gap:calc(12px * var(--k));padding:calc(4px * var(--k)) 4px calc(10px * var(--k)) 0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin} #lodep .lsinfo>*{flex:none} /* (the column scrolls when it is taller than the window: nothing squeezed at its foot, 03.10.) */ #lodep .lspts{display:flex;align-items:baseline;gap:calc(8px * var(--k));font:italic calc(12px * var(--k)) var(--f-body);color:var(--bone-lo)} #lodep .lspts b{font:600 calc(26px * var(--k)) var(--f-display);font-style:normal;color:var(--bone-lo)}#lodep .lspts.has b{color:#eea24a;text-shadow:0 0 12px rgba(238,162,74,.7)} #lodep .lscard{min-width:0;display:flex;flex-direction:column;gap:calc(10px * var(--k))} #lodep .lscard.empty p{margin:0;font:italic calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone-lo)}#lodep .lscard.empty p.tip{font-size:calc(11px * var(--k));opacity:.7} #lodep .lsch{display:flex;align-items:center;gap:calc(14px * var(--k))} #lodep .lsch .ni{flex:none;width:calc(40px * var(--k));height:calc(40px * var(--k));margin:calc(6px * var(--k));transform:rotate(45deg);border:2px solid var(--c);background:radial-gradient(circle,var(--c) 0 22%,#16120e 26%);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent),inset 0 0 0 3px #0d0b09} #lodep .lsch .ni.small{transform:none;border-radius:50%;width:calc(30px * var(--k));height:calc(30px * var(--k));margin:calc(10px * var(--k))} #lodep .lsch .ni.key{width:calc(64px * var(--k));height:calc(64px * var(--k));margin:0;flex:none;transform:none;border:0;background:none;box-shadow:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 70%,transparent))} #lodep .lsch .ni.key svg{width:100%;height:100%;overflow:visible}#lodep .lsch .ni.key .k8{fill:var(--c);opacity:.55}#lodep .lsch .ni.key .k4{fill:var(--c);stroke:#fff6e2;stroke-opacity:.55;stroke-width:1}#lodep .lsch .ni.key .kd{fill:#e8c890}#lodep .lsch .ni.key .kc{fill:#fffaf0;filter:drop-shadow(0 0 5px #fff)} #lodep .lsch .ni.bridge{transform:none;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);border:0;background:radial-gradient(circle,var(--c) 0 30%,#16120e 34%)} #lodep .lsch .ni.core{transform:none;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,#ffd27a 22% 50%,#3a2a14 56%);border-color:#ffd27a} #lodep .lsch b{display:block;font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c)} #lodep .lsch small{font:calc(12px * var(--k)) var(--f-body);color:var(--bronze)} #lodep .pcrule{display:block;height:calc(10px * var(--k));background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.7} #lodep .lsfx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(5px * var(--k))} #lodep .lsfx li{position:relative;padding-left:calc(16px * var(--k));font:calc(13.5px * var(--k))/1.45 var(--f-body);color:var(--bone)} #lodep .lsfx li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;transform:rotate(45deg);background:var(--c);box-shadow:0 0 6px var(--c)} #lodep .lsfx li.neg{color:#e89a86}#lodep .lsfx li.neg::before{background:#c0503a;box-shadow:none} #lodep .lsact{display:flex;align-items:center;gap:calc(8px * var(--k));margin-top:calc(4px * var(--k));flex-wrap:wrap} #lodep .lsact.lrn::before,#lodep .lsact.lrn::after{content:"";flex:0 0 calc(20px * var(--k));height:calc(10px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.85}#lodep .lsact.lrn::after{transform:scaleX(-1)} #lodep .lsbtn{min-width:calc(120px * var(--k));padding:calc(8px * var(--k)) calc(14px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#eea24a;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer} #lodep .lsbtn.fire{flex:1;min-width:0;border-image-source:var(--o-fire);color:#241304;padding-top:calc(11px * var(--k));padding-bottom:calc(11px * var(--k));font-size:calc(13px * var(--k));letter-spacing:.18em;filter:drop-shadow(0 0 10px rgba(238,162,74,.35))} #lodep .lsbtn:hover{filter:drop-shadow(0 0 8px rgba(238,162,74,.45))} #lodep .ldone{font:italic calc(12px * var(--k)) var(--f-body);color:#9fe08a}#lodep .ldone.dim{color:var(--bone-lo)} #lodep .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);box-shadow:0 0 6px rgba(255,200,90,.6);vertical-align:-1px} #lodep .lstot{margin-top:auto;min-height:auto;display:flex;flex-direction:column;gap:calc(6px * var(--k))} #lodep .lstot .lsh{display:flex;align-items:baseline;justify-content:space-between;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#c8a060} #lodep .lstot .lsh em{font:italic calc(11px * var(--k)) var(--f-body);letter-spacing:0;text-transform:none;color:var(--bone-lo)} #lodep .lstot ul{list-style:none;margin:0;padding:0 4px 0 0} /* (no box of its own: 16.10., the user — the list was cut off behind Reset; the whole column scrolls instead) */ #lodep .lstot li{font:calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone)}#lodep .lstot p{margin:0;font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #lodep .lsfoot{position:relative;padding:calc(10px * var(--k)) 0 0} #lodep .lsreset{display:flex;align-items:center;gap:calc(12px * var(--k));width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--bone-lo)} #lodep .lsreset .rr{flex:none;width:calc(36px * var(--k));height:calc(36px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid #5a4628;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a;background:radial-gradient(circle at 50% 35%,#2a2620,#0c0b0a)} #lodep .lsreset .rr svg{width:52%;height:52%;fill:none;stroke:#c8a060;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #lodep .lsreset .rt{display:flex;flex-direction:column;font:600 calc(10px * var(--k))/1.6 var(--f-display);letter-spacing:.16em;text-transform:uppercase}#lodep .lsreset .rt em{font-style:normal;display:flex;align-items:center;gap:6px;color:#eea24a;text-transform:none;letter-spacing:.04em} #lodep .lsreset:hover .rr{border-color:#c8a060}#lodep .lsreset:hover{color:var(--bone)} body.touch #lodep .lspts b{font-size:20px}body.touch #lodep .lsbody{gap:10px;padding-bottom:8px}body.touch #lodep .lsfx li{font-size:12px} body.touch #lodep .lszoom button{width:34px;height:34px} /* ------------------------------ the Mastery (js/ui/masterypanel.js): Diablo Immortal's Paragon layout in our anthracite ------------------------------ */ #gmenu .tile .mnb{display:none}#gmenu .tile.has .mnb{display:block} #mastp{position:fixed;inset:0;z-index:46;display:none;flex-direction:column;pointer-events:auto;--tc:#e0573c; background:var(--o-c-bl) left 10px bottom 10px/56px 56px no-repeat,var(--o-c-br) right 10px bottom 10px/56px 56px no-repeat,radial-gradient(ellipse at 50% 60%,transparent 45%,rgba(0,0,0,.6)),linear-gradient(rgba(16,15,14,.55),rgba(8,8,8,.72)),var(--tex-panel,none) 0 0/384px 384px,#111010!important} #mastp.open{display:flex} #mastp .xclose{right:calc(10px + var(--sr));top:calc(10px + var(--st))} /* the head */ #mastp .mhead{flex:none;display:flex;align-items:center;gap:calc(16px * var(--k));padding:calc(10px + var(--st)) calc(70px + var(--sr)) calc(10px * var(--k)) calc(22px + var(--sl)); background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 14%,#1a1c22),#16181d 45%,#121317);border-bottom:1px solid #3a2c1a;box-shadow:0 1px 0 rgba(200,160,96,.12),0 6px 18px rgba(0,0,0,.45)} #mastp .mem{flex:none;width:calc(54px * var(--k));height:calc(54px * var(--k));display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border:2px solid var(--tc);background:radial-gradient(circle,color-mix(in srgb,var(--tc) 30%,#120e0b),#0d0b09 70%);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 45%,transparent),inset 0 0 0 3px #0d0b09} #mastp .mem svg{transform:rotate(-45deg);width:58%;height:58%;fill:none;stroke:var(--tc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--tc))} #mastp .mtt{min-width:0} #mastp .mtt b{display:block;font:600 calc(19px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)} #mastp .mtt p{margin:2px 0 0;font:calc(13px * var(--k)) var(--f-body);color:#c8b896} #mastp .mtt small{font:600 calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)}#mastp .mtt small em{font-style:normal;color:var(--bone)} #mastp .mright{margin-left:auto;display:flex;align-items:center;gap:calc(18px * var(--k))} #mastp .mfree{font:600 calc(13px * var(--k)) var(--f-body);color:var(--bone-lo);white-space:nowrap}#mastp .mfree b{font:600 calc(17px * var(--k)) var(--f-display);color:var(--bone-lo)}#mastp .mfree.has b{color:#9fe08a;text-shadow:0 0 10px rgba(159,224,138,.5)} #mastp .mseal{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-lo)} #mastp .mseal i{width:calc(32px * var(--k));height:calc(32px * var(--k));display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border:2px solid #5a4628;background:radial-gradient(circle,#2a2620,#0c0b0a)} #mastp .mseal i svg{transform:rotate(-45deg);width:62%;height:62%;fill:none;stroke:#8a7a64;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #mastp .mseal.on{color:#9fe08a;cursor:default}#mastp .mseal.on i{border-color:#9fe08a;background:radial-gradient(circle,#3c6a2a,#14240e);box-shadow:0 0 14px rgba(159,224,138,.45)}#mastp .mseal.on i svg{stroke:#eaffd8} #mastp button.mseal:hover i{border-color:#c8a060}#mastp button.mseal:hover{color:var(--bone)} #mastp .mseal.shut{cursor:default;flex-direction:row;gap:8px;max-width:calc(170px * var(--k));text-align:left;letter-spacing:.06em;text-transform:none;font:italic calc(11px * var(--k)) var(--f-body)}#mastp .mseal.shut i svg{stroke:#8a7a64;stroke-width:1.6} /* the body: trees, grid, card */ #mastp .mbody{flex:1;min-height:0;display:flex;gap:calc(14px * var(--k));padding:calc(10px * var(--k)) calc(22px + var(--sr)) 14px calc(22px + var(--sl))} #mastp .mtrees{flex:none;width:clamp(150px,17%,210px);display:flex;flex-direction:column;gap:calc(6px * var(--k));overflow-y:auto;touch-action:pan-y;scrollbar-width:none} #mastp .mtb{position:relative;display:flex;align-items:center;gap:calc(10px * var(--k));padding:calc(6px * var(--k)) calc(8px * var(--k));background:linear-gradient(90deg,rgba(255,255,255,.03),transparent);border:1px solid #2a2218;border-radius:4px;cursor:pointer;text-align:left;color:var(--bone-lo)} #mastp .mtb i{flex:none;width:calc(30px * var(--k));height:calc(30px * var(--k));display:flex;align-items:center;justify-content:center;transform:rotate(45deg);border:1.5px solid color-mix(in srgb,var(--c) 55%,#3a2c1a);background:#0e0c0a;margin:3px} #mastp .mtb i svg{transform:rotate(-45deg);width:60%;height:60%;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #mastp .mtn{display:flex;flex-direction:column;min-width:0;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}#mastp .mtn small{font:italic calc(10.5px * var(--k)) var(--f-body);letter-spacing:0;text-transform:none;opacity:.8} #mastp .mtb.sel{border-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,transparent),transparent);color:var(--bone)} #mastp .mtb.shut{opacity:.45}#mastp .mtb .mact{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;color:#9fe08a;font-weight:700} #mastp .mgrid{flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(200,160,96,.16),inset 0 0 50px rgba(0,0,0,.7);background:radial-gradient(ellipse at 50% 50%,#1d1b18,#121110 70%)} #mastp .mgrid>svg{width:100%;height:100%;display:block;overflow:visible} #mastp .mwm *{fill:none;stroke:var(--tc);stroke-width:.5;opacity:.07}#mastp .mwr{fill:none;stroke:var(--tc);stroke-opacity:.07;stroke-width:2}#mastp .mwr2{fill:none;stroke:#c8a060;stroke-opacity:.07;stroke-dasharray:3 9} #mastp .ml{stroke:#4a3c2a;stroke-width:2.2}#mastp .ml.ready{stroke:#a07a40;stroke-dasharray:5 4}#mastp .ml.lit{stroke:#e0b060;stroke-width:3;filter:drop-shadow(0 0 3px rgba(224,176,96,.6))} #mastp .ah{fill:#4a3c2a}#mastp .ahl{fill:#e0b060} #mastp .mn{cursor:pointer}#mastp .mn .hit{fill:transparent} #mastp .mn .halo{fill:var(--tc);opacity:0} #mastp .mn .fr{fill:#15120f;stroke:#4a3c2a;stroke-width:2}#mastp .mn .fr2{fill:url(#none);fill:#0f0d0b;stroke:#2a2218;stroke-width:1} #mastp .mn .rk{fill:none;stroke:var(--tc);stroke-width:4;stroke-linecap:round} #mastp .mn .ic *{fill:none;stroke:#6a5c48;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #mastp .mn .cnt rect{fill:#0d0b09;stroke:#4a3c2a;stroke-width:1}#mastp .mn .cnt text{font:600 11px var(--f-body);fill:#a89878} #mastp .mn .lk circle{fill:#0d0b09;stroke:#6a5c48}#mastp .mn .lk rect,#mastp .mn .lk path{fill:none;stroke:#a89878;stroke-width:1.4} #mastp .mn.shut{opacity:.55} #mastp .mn.can .fr{stroke:#e0b060}#mastp .mn.can .ic *{stroke:#e8dcc8}#mastp .mn.can .halo{opacity:.12;animation:lsPulse 1.8s ease-in-out infinite;fill:#e0b060} #mastp .mn.got .fr{stroke:var(--tc);fill:color-mix(in srgb,var(--tc) 22%,#120e0b)}#mastp .mn.got .ic *{stroke:#fff3dc}#mastp .mn.got .halo{opacity:.14}#mastp .mn.got .cnt text{fill:#9fe08a}#mastp .mn.got .cnt rect{stroke:#5a7a3a} #mastp .mn.full.spec .fr,#mastp .mn.full.cap .fr{stroke:#e0b060;stroke-width:2.6}#mastp .mn.full .halo{opacity:.2} #mastp .mn.sel .fr2{stroke:#fff3dc;stroke-width:2} #mastp .mn.pop>*{transform-box:fill-box;transform-origin:center}#mastp .mn.pop>:not(.hit){animation:lsPop .5s cubic-bezier(.2,1.6,.4,1)} /* the card */ #mastp .minfo{flex:none;width:clamp(210px,24%,300px);min-width:0;display:flex;flex-direction:column;gap:calc(10px * var(--k));overflow:hidden} #mastp .mcard{display:flex;flex-direction:column;gap:calc(8px * var(--k));min-width:0} #mastp .mcard.empty p{margin:0;font:italic calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone-lo)}#mastp .mcard.empty p.tip{font-size:calc(11px * var(--k));opacity:.75} #mastp .mch{display:flex;align-items:center;gap:calc(12px * var(--k))} #mastp .mni{flex:none;width:calc(48px * var(--k));height:calc(48px * var(--k));display:flex;align-items:center;justify-content:center;border:2px solid var(--tc);background:radial-gradient(circle,color-mix(in srgb,var(--tc) 25%,#120e0b),#0d0b09 75%);box-shadow:0 0 12px color-mix(in srgb,var(--tc) 35%,transparent)} #mastp .mni.attr,#mastp .mni.talent{border-radius:50%}#mastp .mni.cap{transform:rotate(45deg)}#mastp .mni.cap svg{transform:rotate(-45deg)} #mastp .mni svg{width:62%;height:62%;fill:none;stroke:#fff3dc;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #mastp .mch b{display:block;font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}#mastp .mch small{font:600 calc(12px * var(--k)) var(--f-body);color:#9fe08a} #mastp .mkind{font:italic calc(11.5px * var(--k)) var(--f-body);color:var(--bronze)} #mastp .pcrule{display:block;height:calc(10px * var(--k));background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.7} #mastp .lsfx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(4px * var(--k))} #mastp .lsfx li{position:relative;padding-left:calc(16px * var(--k));font:calc(13px * var(--k))/1.45 var(--f-body);color:var(--bone)} #mastp .lsfx li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;transform:rotate(45deg);background:var(--tc);box-shadow:0 0 6px var(--tc)} #mastp .lsfx.now li{color:#9fe08a}#mastp .mper{font:600 calc(9.5px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#c8a060} #mastp .mnote{margin:2px 0 0;font:italic calc(11.5px * var(--k))/1.45 var(--f-body);color:var(--bone-lo)}#mastp .mnote b{font-style:normal;color:var(--tc)} #mastp .mneed{font:italic calc(11.5px * var(--k)) var(--f-body);color:#e89a86}#mastp .mneed ul{margin:2px 0 0;padding-left:16px} #mastp .lsact{display:flex;align-items:center;gap:calc(8px * var(--k));flex-wrap:wrap} #mastp .lsact.lrn::before,#mastp .lsact.lrn::after{content:"";flex:0 0 calc(16px * var(--k));height:calc(10px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.85}#mastp .lsact.lrn::after{transform:scaleX(-1)} #mastp .lsbtn{min-width:calc(60px * var(--k));padding:calc(8px * var(--k)) calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#eea24a;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer} #mastp .lsbtn.fire{flex:1;min-width:0;border-image-source:var(--o-fire);color:#241304;padding-top:calc(10px * var(--k));padding-bottom:calc(10px * var(--k));font-size:calc(13px * var(--k));letter-spacing:.18em;filter:drop-shadow(0 0 10px rgba(238,162,74,.35))} #mastp .lsbtn.sm{font-size:calc(10px * var(--k));padding:calc(6px * var(--k)) calc(10px * var(--k))} #mastp .ldone{font:italic calc(12px * var(--k)) var(--f-body);color:#9fe08a}#mastp .ldone.dim{color:var(--bone-lo)} #mastp .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);box-shadow:0 0 6px rgba(255,200,90,.6);vertical-align:-1px} #mastp .lstot{margin-top:auto;min-height:0;display:flex;flex-direction:column;gap:calc(6px * var(--k))} #mastp .lstot .lsh{display:flex;align-items:baseline;justify-content:space-between;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#c8a060}#mastp .lstot .lsh em{font:italic calc(11px * var(--k)) var(--f-body);letter-spacing:0;text-transform:none;color:var(--bone-lo)} #mastp .lstot ul{list-style:none;margin:0;padding:0 4px 0 0;max-height:calc(130px * var(--k));overflow-y:auto;touch-action:pan-y;scrollbar-width:thin}#mastp .lstot li{font:calc(12px * var(--k))/1.5 var(--f-body);color:var(--bone)}#mastp .lstot p{margin:0;font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #mastp .mfoot{position:relative;padding:calc(10px * var(--k)) 0 0} #mastp .mfoot::before{content:"";position:absolute;left:0;right:0;top:-2px;height:calc(10px * var(--k));background:var(--o-rule) left center/50% 100% no-repeat,var(--o-rule) right center/50% 100% no-repeat;opacity:.45} #mastp .lsreset{display:flex;align-items:center;gap:calc(12px * var(--k));width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--bone-lo)} #mastp .lsreset .rr{flex:none;width:calc(34px * var(--k));height:calc(34px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid #5a4628;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a;background:radial-gradient(circle at 50% 35%,#2a2620,#0c0b0a)} #mastp .lsreset .rr svg{width:52%;height:52%;fill:none;stroke:#c8a060;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #mastp .lsreset .rt{display:flex;flex-direction:column;font:600 calc(10px * var(--k))/1.6 var(--f-display);letter-spacing:.16em;text-transform:uppercase}#mastp .lsreset .rt em{font-style:normal;display:flex;align-items:center;gap:6px;color:#eea24a;text-transform:none;letter-spacing:.04em} body.touch #mastp .mtrees{width:140px}body.touch #mastp .mtb .mtn small{display:none}body.touch #mastp .mhead{padding-top:calc(6px + var(--st));padding-bottom:6px}body.touch #mastp .mtt p{display:none} /* the phone: the right column scrolls, the buttons on one line */ body.touch :is(#lodep .lsinfo,#mastp .minfo){overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;padding-bottom:6px} body.touch :is(#lodep,#mastp) .lsbtn{white-space:nowrap;font-size:10px;letter-spacing:.08em;padding:7px 10px}body.touch :is(#lodep,#mastp) .lsbtn.fire{font-size:11px;letter-spacing:.1em;padding:8px 10px} body.touch :is(#lodep,#mastp) .lstot{margin-top:6px}body.touch :is(#lodep,#mastp) .lstot ul{max-height:none} body.touch #lodep .lsch b,body.touch #mastp .mch b{font-size:13px} body.touch #mastp .mtrees{width:150px}body.touch #mastp .mtn{font-size:9px;letter-spacing:.02em;overflow-wrap:normal;word-break:keep-all}body.touch #mastp .mtb{gap:7px;padding:5px 6px}body.touch #mastp .mtb i{width:24px;height:24px} body.touch #mastp .mem{width:40px;height:40px}body.touch #mastp .mtt b{font-size:16px} /* the Makers' wave washing over the screen while the next land is built (js/story/makers.js) */ #wavewash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(ellipse at 50% 50%,rgba(140,255,240,.95),rgba(40,190,175,.97) 45%,rgba(6,60,56,1))} #wavewash.on{opacity:1} body.touch #lodep .lstot ul{max-height:none} #chron .rw.star svg,.rw.star svg{width:60%;height:60%;fill:#ffd27a;filter:drop-shadow(0 0 4px rgba(255,210,122,.7))} /* the warm-up's lines readable on the bright sky (03.10.): a dark band behind them, stronger shadows */ #loading.warming::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 22%,transparent 34%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.94) 70%)!important} #loading.warming #loadText,#loading.warming #loadQuip,#loading.warming #loadNote{text-shadow:0 0 6px #000,0 1px 3px #000,0 0 14px rgba(0,0,0,.9)} #loading.warming #loadNote{opacity:1!important;color:#e8cf98} #loading.warming::before{background-position:center center!important;animation:keyin 2.2s ease-out both} /* (the key art centred and still while the shaders are built, 03.10.) */ /* the warm-up's block (logo, bar, lines, Skip) centred in the height: the start's foot margin (for Play) had pushed it up with empty dark below (03.10.) */ #loading.warming{justify-content:center!important} #loading.warming #loadSkip{margin-bottom:0!important} #loading.warming #loadText{margin-bottom:0!important} /* the Makers' Dungeons (js/story/makerdun.js): the rift's veil in their turquoise, and the run's bar (its name, its afflictions) where the rift's stands */ body.inmakers #riftVeil{opacity:var(--rv,1)} body.inmakers #riftVeil .a{background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 52%,rgba(40,200,180,.2) 74%,rgba(6,105,96,.6) 100%)} body.inmakers #riftVeil .b{background:conic-gradient(from 0deg,transparent 0 6%,rgba(80,240,220,.2) 9%,transparent 13% 31%,rgba(50,200,190,.16) 35%,transparent 40% 58%,rgba(120,255,235,.18) 62%,transparent 67% 84%,rgba(60,220,200,.16) 88%,transparent 92%)} body.inmakers #riftVeil i{background:#c8fff6;box-shadow:0 0 8px 2px rgba(63,230,210,.8)} body.inmakers #riftVeil .a,body.inmakers #riftVeil .b,body.inmakers #riftVeil i{animation-play-state:running} #mkHud{display:none;margin-top:5px;pointer-events:auto;cursor:pointer} #mkHud.on{display:block} #mkHud b{display:none} #mkHud span{display:block;font:italic calc(11px * var(--k))/1.25 var(--f-body);color:#9ff4ea;text-shadow:0 1px 2px #000,0 0 6px #000} #shop .cat .mkd{color:#7ff0e0;white-space:nowrap}#shop .cat .mkd svg{width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:2px;fill:none;stroke:#3fe6d2;stroke-width:1.6} #shop .shmats.mk span{color:#7ff0e0}#shop .shmats.mk svg{stroke:#3fe6d2} #inv .ip .ln.lp,#tip .ip .ln.lp,.ip .ln.lp{color:#ffb070;font-style:italic;margin-top:4px}.ip .ln.mkfrom{color:#7ff0e0;font-size:.9em;margin-top:2px} #tip button.mkmap{pointer-events:auto;margin:8px auto 2px;display:block;padding:6px 14px;font:600 calc(11px * var(--k, 1)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#0c1a19;background:#3fe6d2;border:1px solid #9ff4ea;border-radius:4px;cursor:pointer} /* the sigils' tab: one row per dungeon, its button fixed in the row (a tooltip's had moved with the mouse) */ #inv .siglist{display:flex;flex-direction:column;gap:8px;padding:2px} #inv .sgrow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(10,24,23,.55);border:1px solid rgba(63,230,210,.35);border-radius:6px} #inv .sgrow img{width:calc(40px * var(--k));height:calc(40px * var(--k));flex:none} #inv .sgrow .sgt{flex:1;min-width:0;text-align:left} #inv .sgrow .sgt b{display:block;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.06em;color:#9ff4ea} #inv .sgrow .sgt b em{font-style:normal;color:#e8d8b8} #inv .sgrow .sgt small{display:block;font:calc(11.5px * var(--k)) var(--f-body);color:var(--bone-lo)} #inv .sgrow button{flex:none;padding:6px 10px;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#0c1a19;background:#3fe6d2;border:1px solid #9ff4ea;border-radius:4px;cursor:pointer} #inv .sgnone{padding:14px;font:italic calc(12px * var(--k)) var(--f-body);color:var(--bone-lo);text-align:center} /* the sigils' tab: the Misc grid, a fixed card under it */ #inv .sigcard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;padding:10px 12px;min-height:44px;background:rgba(10,24,23,.55);border:1px solid rgba(63,230,210,.35);border-radius:6px} #inv .sigcard b{flex:1 1 100%;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.06em;color:#9ff4ea} #inv .sigcard small{flex:1 1 auto;font:calc(11.5px * var(--k)) var(--f-body);color:var(--bone-lo)} #inv .sigcard button{flex:none;padding:6px 10px;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#0c1a19;background:#3fe6d2;border:1px solid #9ff4ea;border-radius:4px;cursor:pointer} /* the rift's stations under its bar (in place of the time) */ #riftHud.stations .rtime{display:none} #riftHud .rst{display:flex;gap:8px;justify-content:center;margin:7px calc(24px * var(--k)) 0} #riftHud .rst i{flex:1;height:calc(7px * var(--k));background:#0c0714;outline:1px solid rgba(180,110,255,.5);position:relative} #riftHud .rst i b{display:block;height:100%;background:linear-gradient(90deg,#7a3ad0,#c890ff);transition:width .2s linear} #riftHud .rst i.low b{background:linear-gradient(90deg,#a02818,#e05030)} #riftHud .rst i.dark{outline-color:rgba(120,120,120,.35)}#riftHud .rst i.dark b{width:0!important} body.touch #riftHud .rst{margin:4px 18px 0}body.touch #riftHud .rst i{height:5px} #riftHud .rst i.hit{outline-color:#ff5a3a;animation:rstHit .5s ease-in-out infinite alternate}@keyframes rstHit{to{outline-color:rgba(255,90,58,.25)}} #riftAlarm{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:6;display:none}#riftAlarm.on{display:block} #riftAlarm i{position:absolute;left:-17px;top:-14px;width:34px;height:28px;background:#ff3a24;clip-path:polygon(100% 50%,0 0,28% 50%,0 100%);filter:drop-shadow(0 0 6px rgba(255,60,30,.9));animation:riftAl .45s ease-in-out infinite alternate} @keyframes riftAl{from{opacity:1;translate:0 0}to{opacity:.55;translate:-5px 0}} /* the sigil's card like a tooltip under the grid (on a desktop it ran across the whole leaf): as wide as the grid, its button inside under the text */ #inv .sigcard{flex-direction:column;align-items:stretch;flex-wrap:nowrap;align-self:center;box-sizing:border-box;gap:6px;border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;border-radius:0;background:linear-gradient(rgba(12,26,25,.95),rgba(7,15,15,.96));box-shadow:0 0 0 1px rgba(63,230,210,.35)} #inv .sigcard b{flex:none}#inv .sigcard small{flex:none} #inv .sigcard button{align-self:stretch;margin-top:4px;padding:8px 10px} /* the quest window on a desktop (the user, 05.10.: far more room for the map — legend 14 %, quests 22 %, the map the rest, about 64 %) */ body:not(.touch) #qlog .mlist.ll{width:14%!important;min-width:200px} body:not(.touch) #qlog .mlist.lr{width:22%!important;min-width:280px} body:not(.touch) #qlog .mpage{padding-left:16px;padding-right:16px} /* the run's mechanics (Game.mkInfo): a tap on its line under the minimap */ #mkHud{display:none!important} /* (the run's line under the land's name: gone, the name opens its window — Game.mkInfo) */ #zone.mkinfo{pointer-events:auto;cursor:pointer} #mkInfo .mm-cbox{max-width:min(92vw,440px)} #mkInfo .mkinfo{list-style:none;margin:6px 0 12px;padding:0;text-align:left;display:flex;flex-direction:column;gap:9px} #mkInfo .mkinfo li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid rgba(63,230,210,.45)} #mkInfo .mkinfo b{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#9ff4ea} #mkInfo .mkinfo span{font:calc(12px * var(--k))/1.35 var(--f-body);color:var(--bone)} #mkInfo h3{white-space:normal!important;line-height:1.3} #logView{z-index:120!important}#logView .mm-cbox{width:min(94vw,760px);max-width:none}#logView textarea{width:100%;box-sizing:border-box;height:min(60vh,520px);margin:6px 0 12px;padding:8px;font:11px/1.35 ui-monospace,Menlo,monospace;color:#cfe8c8;background:#06070a;border:1px solid rgba(180,150,100,.35);resize:none;white-space:pre;overflow:auto} #logView{background:rgba(4,5,7,.72)!important}#logView .mm-cbox{background:linear-gradient(rgba(22,23,26,.98),rgba(12,13,15,.99))!important} /* a long call wraps over two or three lines instead of being cut (the user, 04.10.) */ .bark{white-space:normal!important;width:max-content;text-align:center;text-wrap:balance} /* a tab with nothing in it yet stays away (the user, 04.10., again): display:flex above had overruled [hidden] */ #inv .itabs button[hidden]{display:none!important} /* Mirela's (and every plain trader's) window on the desktop, laid out like the inventory (the user, 05.10.): two halves, each centred both ways — the wares on the left, the bag and the sell buttons on the right; the ware names smaller and in the body face, not the display capitals */ body:not(.touch) #shop:not(.smith):not(.pets):not(.seyla) .shbody{align-items:stretch!important;justify-content:center;gap:0;padding-left:calc(40px + var(--sl));padding-right:calc(40px + var(--sr))} body:not(.touch) #shop:not(.smith):not(.pets):not(.seyla) .shbuy{flex:1 1 0!important;max-width:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center} body:not(.touch) #shop:not(.smith):not(.pets):not(.seyla) .cats{flex:none!important;width:clamp(300px,calc(230px * var(--k)),380px);overflow:visible} body:not(.touch) #shop:not(.smith):not(.pets):not(.seyla) .shsell{flex:1 1 0!important;grid-template-rows:auto auto!important;align-content:center!important;justify-content:center!important;border-left:1px solid rgba(160,120,60,.22)} body:not(.touch) #shop:not(.smith):not(.pets):not(.seyla) .shnote{text-align:center} #shop:not(.smith):not(.pets):not(.seyla) .cat b{font:600 calc(10.5px * var(--k)) var(--f-body)!important;letter-spacing:.01em!important;text-transform:none} /* the hints question: our yellow title, a checkbox in the kit's tiles (05.10., the user) */ #hintAsk .mm-cbox h3{color:#f5cf3d} #hintAsk .hck{display:flex;align-items:center;justify-content:center;gap:calc(10px * var(--k));margin:calc(4px * var(--k)) 0 calc(14px * var(--k));cursor:pointer;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);-webkit-tap-highlight-color:transparent} #hintAsk .hck input{position:absolute;opacity:0;pointer-events:none} #hintAsk .hck i{position:relative;flex:none;width:calc(20px * var(--k));height:calc(20px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch} #hintAsk .hck input:checked+i{border-image-source:var(--o-tile-gold)} #hintAsk .hck input:checked+i::after{content:"";position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%) rotate(45deg);background:#f5cf3d;box-shadow:0 0 8px rgba(245,207,61,.7)} #hintAsk .hck input:checked~span{color:#f5cf3d} #hintAsk .mm-cbtns{justify-content:center} /* Yusra's companions list (05.10., the user: on a desktop about 1000 px wide the names were cut to 'SA', the lines broken word by word; on a phone the new-mark was cut at the right): a wider column, a smaller icon and gap, names that wrap instead of being cut, room on the right */ body:not(.touch) #shop.pets .pside{width:clamp(300px,30%,420px)!important;padding-left:calc(18px * var(--k))!important} #shop.pets .ptile{column-gap:calc(12px * var(--k))!important;padding-left:calc(18px * var(--k))!important} #shop.pets .ptile .ci{width:calc(32px * var(--k))!important;height:calc(32px * var(--k))!important} #shop.pets .ptile b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.2} #shop.pets .ptile small{white-space:nowrap} #shop.pets .plist{padding-right:calc(10px * var(--k))!important;overflow-x:visible} body.touch #shop.pets .pside{width:clamp(190px,30%,260px)!important} /* the Stats view (js/ui/statsview.js): the inventory's frame and tiles; the stats on the left, a stat's reckoning on the right (05.10., the user) */ #statsv{position:fixed;inset:0;z-index:48;display:none;flex-direction:column;background:radial-gradient(ellipse at 30% 40%,rgba(138,106,58,.12),transparent 55%),linear-gradient(rgba(16,15,14,.55),rgba(8,8,8,.7)),var(--tex-panel,none) 0 0/384px 384px,#121110;pointer-events:auto;overflow:hidden} #statsv.open{display:flex} #statsv::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--o-c-tl) left calc(10px + var(--sl)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-tr) right calc(10px + var(--sr)) top calc(10px + var(--st))/56px 56px no-repeat,var(--o-c-bl) left calc(10px + var(--sl)) bottom calc(10px + var(--sb))/56px 56px no-repeat,var(--o-c-br) right calc(10px + var(--sr)) bottom calc(10px + var(--sb))/56px 56px no-repeat} #statsv .xclose{right:calc(14px + var(--sr));top:calc(10px + var(--st));z-index:3} #statsv .plate-title{padding:calc(10px + var(--st)) 0 8px!important} #statsv .svbody{flex:1;min-height:0;display:flex;gap:0;padding:0 calc(36px + var(--sr)) calc(18px + var(--sb)) calc(36px + var(--sl));max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box} #statsv .svleft{flex:none;width:clamp(260px,33%,440px);overflow-y:auto;padding:8px 14px 18px 0;border-right:1px solid rgba(160,120,60,.22);overscroll-behavior:contain} #statsv .svright{flex:1;min-width:0;overflow-y:auto;padding:14px 0 18px calc(28px * var(--k));display:flex;flex-direction:column;gap:calc(14px * var(--k))} #statsv .svhero{display:flex;align-items:baseline;gap:10px;padding:0 0 10px 8px;border-bottom:1px solid rgba(160,120,60,.22)} #statsv .svhero b{font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}#statsv .svhero span{font:calc(13px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone-lo)}#statsv .svhero em{margin-left:auto;font:600 calc(13px * var(--k)) var(--f-display);font-style:normal;color:#eea24a} #statsv .svgrp{display:flex;align-items:center;gap:10px;margin:calc(14px * var(--k)) 0 4px 8px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);white-space:nowrap}#statsv .svgrp::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bronze),transparent);opacity:.5} #statsv .svskills{display:flex;flex-wrap:wrap;gap:calc(10px * var(--k));padding:6px 0 4px 8px} #statsv .svskills{display:grid!important;grid-template-columns:repeat(auto-fill,calc(52px * var(--k)));gap:calc(12px * var(--k))!important} #statsv .svskills button{position:relative;width:calc(52px * var(--k));height:calc(52px * var(--k));padding:0;border-radius:50%;border:2px solid transparent;background:radial-gradient(circle at 50% 35%,#1c1d20,#0a0b0c) padding-box,linear-gradient(155deg,#d0aa6c,#6a5230 38%,#9a7842 62%,#3a2c18) border-box;box-shadow:0 0 0 1.5px #070809,0 3px 8px rgba(0,0,0,.65);overflow:hidden;cursor:pointer;filter:brightness(.72);transition:filter .15s,box-shadow .15s} /* (the action bar's own ring — the user) */ #statsv .svskills button canvas{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none} #statsv .svskills button:hover{filter:none} #statsv .svskills button.on{filter:none;border-width:3px;box-shadow:0 0 0 1.5px #070809,0 0 12px rgba(238,162,74,.6)} #statsv .svst{display:flex;align-items:baseline;gap:10px;width:100%;padding:calc(5px * var(--k)) 10px calc(5px * var(--k)) 22px;border:0;background:none;color:var(--bone);font:calc(13px * var(--k)) var(--f-body);text-align:left;cursor:pointer;position:relative} #statsv .svst:hover{background:rgba(238,162,74,.06)}#statsv .svst.on{background:linear-gradient(90deg,rgba(238,162,74,.18),rgba(238,162,74,.04) 70%,transparent)} #statsv .svst.on::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;transform:translateY(-50%) rotate(45deg);background:#eea24a;box-shadow:0 0 8px #eea24a} #statsv .svst span{min-width:0}#statsv .svst b{margin-left:auto;font:600 calc(12px * var(--k)) var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}#statsv .svst b.up{color:#8fb4ff} #statsv h2{margin:0;font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.1em;color:#eea24a;text-wrap:balance} #statsv .svbig{font:700 calc(24px * var(--k)) var(--f-display);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums} #statsv .svdesc{margin:0;max-width:64ch;font:calc(11.5px * var(--k))/1.5 var(--f-body);color:var(--bone)}#statsv .svfeel{color:#9fe08a} #statsv .svbox{max-width:560px;padding:calc(10px * var(--k)) calc(14px * var(--k));background:linear-gradient(rgba(30,31,34,.85),rgba(18,19,21,.85));border:1px solid rgba(160,120,60,.25);border-left:3px solid var(--bronze)} #statsv .svbox h3{margin:0 0 8px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)} #statsv .svcalc{display:grid;grid-template-columns:1fr auto;gap:3px 18px;font:calc(11.5px * var(--k)) var(--f-body);font-variant-numeric:tabular-nums} #statsv .svcalc span:nth-child(even){text-align:right;font-family:var(--f-display);font-weight:600;white-space:nowrap} #statsv .svcalc .tot{border-top:1px solid rgba(160,120,60,.3);padding-top:6px;margin-top:4px;color:#eea24a} #statsv .svsrc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font:calc(11.5px * var(--k)) var(--f-body)}#statsv .svsrc li{display:flex;gap:12px}#statsv .svsrc li b{margin-left:auto;font:600 calc(11px * var(--k)) var(--f-display);color:#8fb4ff;white-space:nowrap} body.touch #statsv .svbody{padding-left:calc(22px + var(--sl));padding-right:calc(22px + var(--sr))}body.touch #statsv::after{background-size:40px 40px} /* the Stats view on a phone (05.10., the user: the right side did not scroll and its text was too big): Safari's text autosizing switched off (it blew the paragraphs up in landscape), both sides scroll by finger, the touch controls hidden while it is open */ #statsv{-webkit-text-size-adjust:100%;text-size-adjust:100%;z-index:90} #statsv .svleft,#statsv .svright{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} body.statsopen #touch{display:none!important} body.touch #statsv h2{font-size:14px}body.touch #statsv .svbig{font-size:20px}body.touch #statsv .svdesc{font-size:11.5px} body.touch #statsv .svbox{padding:8px 12px}body.touch #statsv .svbox h3{font-size:8.5px;margin-bottom:6px}body.touch #statsv .svcalc,body.touch #statsv .svsrc{font-size:11px}body.touch #statsv .svcalc span:nth-child(even),body.touch #statsv .svsrc li b{font-size:10.5px} body.touch #statsv .svright{gap:10px;padding-top:8px}body.touch #statsv .svst{font-size:12px;padding-top:4px;padding-bottom:4px}body.touch #statsv .svst b{font-size:11px} body.touch #statsv .svskills{grid-template-columns:repeat(auto-fill,44px)}body.touch #statsv .svskills button{width:44px;height:44px} /* the sources: the item's icon in its rarity's frame, its slot and name, the stat, the value; a tap opens its card (05.10., the user) */ #statsv .svsrc li{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:calc(10px * var(--k));padding:4px 6px;margin:0 -6px;cursor:pointer;border-radius:3px} #statsv .svsrc li:hover{background:rgba(238,162,74,.07)} #statsv .svsrc .ic{width:calc(30px * var(--k));height:calc(30px * var(--k));display:flex;align-items:center;justify-content:center;border:1.5px solid var(--rc,#8a8070);background:radial-gradient(circle,rgba(255,255,255,.06),rgba(0,0,0,.4));box-shadow:inset 0 0 8px var(--rg,transparent)} #statsv .svsrc .ic img{max-width:84%;max-height:84%} #statsv .r-normal{--rc:rgba(228,224,214,.6);--rn:#e4e0d6}#statsv .r-magic{--rc:#5b8dff;--rg:rgba(91,141,255,.35);--rn:#8fb4ff}#statsv .r-rare{--rc:#f5cf3d;--rg:rgba(245,207,61,.3);--rn:#f5cf3d}#statsv .r-unique,#statsv .r-legendary{--rc:#ff7d1f;--rg:rgba(255,125,31,.35);--rn:#ff9a4a} #statsv .svsrc .who{display:flex;flex-direction:column;min-width:0;line-height:1.2}#statsv .svsrc .who small{font:calc(8.5px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-lo)} #statsv .svsrc .inm{color:var(--rn,var(--bone));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #statsv .svsrc .sst{color:var(--bone-lo);white-space:nowrap} #statsv .svcard{position:absolute;z-index:5;right:calc(36px + var(--sr));bottom:calc(24px + var(--sb));max-width:min(360px,calc(100vw - 32px));max-height:calc(100% - 80px);overflow-y:auto;padding:12px 14px;border:2px solid transparent;border-image:var(--o-card-br) 11 / 11px / 0 stretch;background:linear-gradient(rgba(16,17,19,.98),rgba(10,11,12,.98));filter:drop-shadow(0 8px 20px rgba(0,0,0,.7));-webkit-text-size-adjust:100%} #statsv .svcard .svcx{position:absolute;top:2px;right:2px;width:34px;height:34px;border:0;background:none;color:var(--bone-lo);font-size:18px;cursor:pointer} /* (a bigger target for a finger) */ body.touch #statsv .svsrc .ic{width:26px;height:26px}body.touch #statsv .svsrc .who small{font-size:8px} /* a held tooltip (a key's or sigil's on the desktop): it takes the mouse, an X at its top right */ #tip.pinned{pointer-events:auto}#tip.pinned .hd{padding-left:40px;padding-right:40px} #tip .tipx{position:absolute;right:6px;top:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(8,9,10,.6);border:1px solid var(--bronze-lo);border-radius:4px;color:var(--bone-lo);cursor:pointer;pointer-events:auto}#tip .tipx:hover{color:var(--bone);border-color:var(--bronze)}#tip .tipx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} #tip button.mkmap{margin:10px auto 2px} /* ---------- the books: the Canon and the Bestiary (js/ui/book.js) ---------- */ /* a full window like the others (the anthracite ground), the book as big as the height allows, its chapters as bookmarks at its left edge */ .book{position:fixed;inset:0;z-index:58;display:none;align-items:center;justify-content:center;padding:calc(6px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));background:var(--an-1);pointer-events:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%;--bh:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));--rw:clamp(74px,9vw,150px)} .book.open{display:flex} body.bookopen #touch{display:none!important} .book[data-kind=canon]{--bkimg:url(../assets/ui/book-canon.webp);--l:13.6%;--r:53.2%;--t:15.6%;--w:33.2%;--h:67%;--ink:#24170a;--accent:#4b2063;--rib:#27304a;--ribon:#5b3a86} .book[data-kind=bestiary]{--bkimg:url(../assets/ui/book-bestiary.webp?v=2);--l:18.6%;--r:55.6%;--t:15.5%;--w:26.4%;--h:65%;--ink:#24120a;--accent:#7a1c12;--rib:#3a1410;--ribon:#8a2216} .bk-title{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#d9c79c;text-shadow:0 1px 3px #000;z-index:7;pointer-events:none} .bk-x{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:calc(8px + env(safe-area-inset-top,0px));z-index:7;width:calc(40px * var(--k));height:calc(40px * var(--k));display:flex;align-items:center;justify-content:center;padding:0;border:2px solid transparent;border-image:var(--o-plate) 11 fill / 11px / 0 stretch;background:none;color:#e8c98e;cursor:pointer} .bk-x:hover{border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch} .bk-x svg{width:45%;height:45%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} .bk-row{display:flex;align-items:center;height:var(--bh);max-width:100%} .bk-ribbons{flex:none;width:var(--rw);display:flex;flex-direction:column;align-items:flex-end;gap:calc(5px * var(--k));margin-right:-1.2%;z-index:6;padding-top:6%} .bk-ribbons button{position:relative;width:92%;min-height:calc(42px * var(--k));display:flex;align-items:center;justify-content:flex-end;padding:calc(6px * var(--k)) calc(14px * var(--k)) calc(6px * var(--k)) calc(10px * var(--k));border:0;border-radius:6px 0 0 6px;background:linear-gradient(90deg,color-mix(in srgb,var(--rib) 70%,#000),var(--rib));box-shadow:inset 0 0 0 1px rgba(232,201,142,.18),-3px 3px 8px rgba(0,0,0,.5);color:#cdbb92;font:calc(13px * var(--k))/1.15 'Alegreya SC',var(--f-body);letter-spacing:.04em;text-align:right;cursor:pointer;transition:width .2s,background .2s,color .2s} .bk-ribbons button:hover{color:#f0e2c0;width:96%} .bk-ribbons button.on{width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--ribon) 75%,#000),var(--ribon));color:#fff3d6;box-shadow:inset 0 0 0 1px rgba(232,201,142,.45),-3px 3px 10px rgba(0,0,0,.6)} .bk-ribbons button::after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:8px;background:inherit;filter:brightness(.7)} .bk{position:relative;height:var(--bh);max-height:calc((100vw - var(--rw) - 24px) / 1.5);aspect-ratio:1.5;background:var(--bkimg) center/100% 100% no-repeat;container-type:inline-size;perspective:2600px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.7))} .bk-p{position:absolute;top:var(--t);height:var(--h);width:var(--w)} .bk-l{left:var(--l)}.bk-r{left:var(--r)} .bk-in{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;color:var(--ink);font:max(1.68cqi,11px)/1.42 var(--f-body);touch-action:pan-y} .bk-in::-webkit-scrollbar{display:none} .bk-in p{margin:0 0 .65em} .bk-in .bk-ch{display:block;font:max(1.2cqi,9px) 'Alegreya SC',var(--f-body);letter-spacing:.14em;color:var(--accent);text-align:center;margin-bottom:.25em} .bk-in h2{margin:0 0 .45em;font:600 max(2.5cqi,15px)/1.12 var(--f-display);letter-spacing:.05em;text-align:center;color:var(--ink);text-wrap:balance} .bk-in h3{margin:.5em 0 .3em;font:600 max(1.7cqi,11px)/1.2 var(--f-display);letter-spacing:.05em;color:var(--accent)} .bk-in .bk-rule{height:1cqi;margin:.15em auto .7em;width:60%;background:var(--o-div) center/100% 100% no-repeat;opacity:.55;filter:sepia(1) brightness(.4)} .bk-in .bk-drop::first-letter{float:left;font:600 3.9cqi/.85 var(--f-display);color:var(--accent);margin:.08em .12em 0 0} .bk-in .bk-q{font-style:italic;color:color-mix(in srgb,var(--ink) 82%,var(--accent));border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-left:.6em} .bk-in .bk-q small{display:block;margin-top:.3em;font:normal max(1.25cqi,9px) 'Alegreya SC',var(--f-body);letter-spacing:.05em} .bk-in .bk-fig{display:block;width:100%;aspect-ratio:1.3;object-fit:contain;mix-blend-mode:multiply;margin:.2em 0 .6em} .bk-in .bk-lock{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5em;color:color-mix(in srgb,var(--ink) 80%,transparent)} .bk-in .bk-lock b{font:600 max(2.6cqi,15px) var(--f-display);letter-spacing:.3em} .bk-in .bk-lock small{font:max(1.3cqi,9.5px) 'Alegreya SC',var(--f-body);letter-spacing:.06em} .bk-in .bk-runes{opacity:.25;background:repeating-linear-gradient(transparent 0 2.2cqi,color-mix(in srgb,var(--ink) 35%,transparent) 2.2cqi 2.35cqi);-webkit-mask:linear-gradient(transparent 12%,#000 20%,#000 80%,transparent 88%);mask:linear-gradient(transparent 12%,#000 20%,#000 80%,transparent 88%)} .bk-in .bk-tp{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.4em} .bk-in .bk-tp h1{margin:0;font:600 max(3.5cqi,19px)/1.1 var(--f-display);letter-spacing:.08em;color:var(--ink);text-wrap:balance} .bk-in .bk-tp p{font-style:italic;max-width:85%} .bk-in .bk-tp small,.bk-in .bk-chl li span{font:max(1.3cqi,9.5px) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:color-mix(in srgb,var(--ink) 75%,var(--accent))} .bk-in .bk-chl{list-style:none;margin:.4em 0 0;padding:0;display:flex;flex-direction:column;gap:.6em} .bk-in .bk-chl li{cursor:pointer;display:flex;align-items:baseline;gap:.5em} .bk-in .bk-chl li b{font:600 1.35em/1.2 var(--f-display);letter-spacing:.05em;color:var(--ink)} .bk-in .bk-chl li:hover b{color:var(--accent)} .bk-in .bk-chl li i{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--ink) 40%,transparent);transform:translateY(-.25em)} .bk-num{position:absolute;top:calc(var(--t) + var(--h) + 1.2%);font:max(1.2cqi,9px) 'Alegreya SC',var(--f-body);color:color-mix(in srgb,var(--ink) 70%,transparent);transform:translateX(-50%)} .bk-nl{left:calc(var(--l) + var(--w) / 2)}.bk-nr{left:calc(var(--r) + var(--w) / 2)} .bk-arr{position:absolute;bottom:3%;width:max(5.2cqi,38px);height:max(5.2cqi,38px);display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,rgba(20,14,8,.9),rgba(20,14,8,.6));box-shadow:0 0 0 1px rgba(232,201,142,.5),0 2px 8px rgba(0,0,0,.6);color:#e8c98e;cursor:pointer;z-index:6} .bk-arr[hidden]{display:none} .bk-arr svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .bk-arr:hover{color:#fff1cc;box-shadow:0 0 0 1px #e8c98e,0 0 12px rgba(238,162,74,.5)} .bk-prev{left:1.2%}.bk-next{right:1.2%} /* the turning leaf: half the book, hinged at the fold; its faces carry the same painted page */ .bk-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.45,.08,.25,1);z-index:5;pointer-events:none} .bk-leaf.fwd{left:50%;transform-origin:0 50%}.bk-leaf.fwd.go{transform:rotateY(-180deg)} .bk-leaf.back{left:0;transform-origin:100% 50%}.bk-leaf.back.go{transform:rotateY(180deg)} .bk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bkimg) 0 0/200% 100% no-repeat} .bk-face::after{content:"";position:absolute;inset:0;pointer-events:none} .bk-leaf.fwd .front{background-position:100% 0}.bk-leaf.fwd .front::after{background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%)} .bk-leaf.fwd .backside{background-position:0 0;transform:rotateY(180deg)}.bk-leaf.fwd .backside::after{background:linear-gradient(270deg,rgba(0,0,0,.28),transparent 18%)} .bk-leaf.back .front{background-position:0 0}.bk-leaf.back .front::after{background:linear-gradient(270deg,rgba(0,0,0,.28),transparent 18%)} .bk-leaf.back .backside{background-position:100% 0;transform:rotateY(180deg)}.bk-leaf.back .backside::after{background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%)} .bk-face .bk-l{left:calc(var(--l) * 2);width:calc(var(--w) * 2)} .bk-face .bk-r{left:calc((var(--r) - 50%) * 2);width:calc(var(--w) * 2)} @media (prefers-reduced-motion:reduce){.bk-leaf{transition-duration:.01s}} body.touch .bk-ribbons button{font-size:11px;min-height:34px;padding:4px 10px 4px 6px} /* the menu's left side: quests and map wide, under them the chronicle and the books as cards side by side (as on the right) */ #gmenu .gl .tiles:not(.know) .tile{aspect-ratio:3!important} #gmenu .gl .tiles:not(.know)::after{display:none} #gmenu .gl .tiles.know{grid-template-columns:1fr 1fr!important;padding-top:0!important;background:none!important} #gmenu .gl .tiles.know .tile{aspect-ratio:1.05!important;align-items:center!important;justify-content:flex-end!important;padding:0 0 calc(14px * var(--k))!important} #gmenu .gl .tiles.know .tile .art{left:4px;-webkit-mask:linear-gradient(#000 60%,rgba(0,0,0,.35));mask:linear-gradient(#000 60%,rgba(0,0,0,.35))} #gmenu .gl .tiles.know .tile svg{display:none!important} #gmenu .gl .tiles.know .tile span{font-size:calc(14px * var(--k))!important;letter-spacing:.12em!important} #gmenu .gl .tiles.know .tile[hidden],#gmenu .gl .tiles.know .tile[style*="display: none"]{display:none!important} #gmenu .gl{overflow-y:auto;scrollbar-width:none} body.touch #gmenu .gl .tiles{gap:6px!important} body.touch #gmenu .gl .tiles:not(.know) .tile{aspect-ratio:4.4!important} body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:1.7!important;padding-bottom:8px!important} body.touch #gmenu .gl .tiles.know .tile span{font-size:12px!important} .book{--rw:clamp(80px,11vw,176px)} .book[data-kind=canon]{--l:13.8%;--r:53.9%;--w:32.3%} .bk-ribbons button{font-size:calc(12.5px * var(--k));overflow-wrap:anywhere} .bk{-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-composite:intersect} body.touch #gmenu .gl .tiles.know .tile span{font-size:11px!important;letter-spacing:.06em!important} body.touch #gmenu .gl .tiles.know .tile span{font-size:10.5px!important;letter-spacing:.03em!important} body.touch #gmenu .gl .tiles.know .tile .nb{top:3px!important;right:3px!important;transform:scale(.75);transform-origin:top right} /* the left cards exactly as the right's: label centred at the foot with its small ornament, the same type (05.10., the user's) */ #gmenu .gl .tiles.know .tile{flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;padding:0 0 calc(14px * var(--k))!important;text-align:center} #gmenu .gl .tiles.know .tile span{background:var(--o-div) center top/calc(80px * var(--k)) calc(8px * var(--k)) no-repeat!important;padding-top:calc(6px * var(--k))!important;font-size:min(calc(11px * var(--k)),3.7cqi)!important;letter-spacing:.06em!important;white-space:nowrap;max-width:100%} body.touch #gmenu .gl .tiles.know .tile{padding-bottom:3cqi!important} body.touch #gmenu .gl .tiles.know .tile span{font-size:clamp(6.5px,3.5cqi,12px)!important;letter-spacing:.05em!important;padding-top:2.4cqi!important;background-size:22cqi 2.6cqi!important} #gmenu .gl .tiles.know::after{grid-column:1 / -1} #gmenu .gl > *{flex-shrink:0} body.touch #gmenu .gl .gchar{padding-bottom:calc(4cqi + 16px)!important} /* the books cut to the painted book (centred, as big as it gets), a little less brown (05.10., the user's); the words bigger; the close button the menu's size; gold, not violet, for what is chosen */ .book[data-kind=canon]{--ar:1.483;--l:9.6%;--r:54.7%;--w:36.1%;--t:12.9%;--h:74.4%;--accent:#7a4a14} .book[data-kind=bestiary]{--ar:1.375;--l:10.9%;--r:57.6%;--w:33.1%;--t:12.1%;--h:75%} .bk{aspect-ratio:var(--ar);max-height:calc((100vw - var(--rw) - 24px) / var(--ar));-webkit-mask:none;mask:none;filter:drop-shadow(0 14px 26px rgba(0,0,0,.75))} .book{--bh:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} .bk-in{font-size:max(1.92cqi,12.5px)} .bk-in h2{font-size:max(2.8cqi,17px)} .bk-in .bk-ch,.bk-in .bk-q small,.bk-in .bk-tp small,.bk-in .bk-chl li span{font-size:max(1.35cqi,10px)} .bk-in h3{font-size:max(1.9cqi,12px)} .bk-in .bk-tp h1{font-size:max(3.8cqi,21px)} .bk-in .bk-drop::first-letter{font-size:4.3cqi} .bk-x{width:calc(32px * var(--k));height:calc(32px * var(--k))} .bk-x svg{width:42%;height:42%} /* the window's ground as the inventory's, the Canon's picture laid in under it as the trader's is */ .book{background:radial-gradient(ellipse at 34% 58%,rgba(120,124,132,.16),transparent 42%),linear-gradient(rgba(36,38,42,.52),rgba(16,17,19,.66)),var(--tex-panel) 0 0/384px 384px,var(--an-0)} .book::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(8,8,9,.55),rgba(8,8,9,.25) 55%,rgba(8,8,9,.5)),var(--bkpic) 50% 70%/cover no-repeat;opacity:.55;pointer-events:none} .book[data-kind=canon]{--bkpic:url(../assets/ui/canon-bg.webp?v=2)} .book[data-kind=bestiary]{--bkpic:url(../assets/ui/bestiary-bg.webp?v=2)} .book > *{position:relative;z-index:1} .book > .bk-title,.book > .bk-x{position:absolute;z-index:7} .book[data-kind=canon]{--rib:#24221f;--ribon:#3a2f1e} .book[data-kind=bestiary]{--rib:#2a1a16;--ribon:#3a2a1a} .bk-ribbons button.on{color:#f3d08a;box-shadow:inset 0 0 0 1px rgba(238,162,74,.85),0 0 10px rgba(238,162,74,.35),-3px 3px 10px rgba(0,0,0,.6)} .book[data-kind=canon]{--w:34.2%;--t:13.6%;--h:73.6%;--accent:#5e330a} /* the menu on a phone (05.10., the user's): the left side narrower and one column — every entry a wide row; the right side wider */ body.touch #gmenu .gl{width:clamp(170px,24%,300px)!important} body.touch #gmenu .gr{width:clamp(240px,34%,440px)!important} body.touch #gmenu .gl .tiles.know{grid-template-columns:1fr!important} body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:4.4!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:3cqi!important;padding:0 0 0 5cqi!important;text-align:left} body.touch #gmenu .gl .tiles.know .tile span{background:none!important;padding:0!important;font-size:clamp(8px,5.4cqi,18px)!important;letter-spacing:.1em!important} body.touch #gmenu .gl .tiles.know .tile .art{left:35%;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)} body.touch #gmenu .gl .tiles.know .tile .nb{transform:none} body.touch #gmenu .gl .tiles:not(.know) .tile{aspect-ratio:4.4!important} /* a card alone in its row on the right: across the whole row */ #gmenu .gr .tiles .tile.wide{grid-column:span 2;aspect-ratio:1.7!important} body.touch #gmenu .gr .tile.wide{aspect-ratio:2.1!important} body.touch #gmenu .gl .tiles.know{margin-top:calc(3.5cqi - 12px * var(--k))} body.touch #gmenu .gr .tiles .tile:not(.bar){aspect-ratio:1.4!important} body.touch #gmenu .gr .tiles .tile.wide{aspect-ratio:2.9!important} body.touch #gmenu .gl .tiles:not(.know) .tile,body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:3.5!important} /* the window's picture brighter (05.10., the user's); the title in the menu's own ornaments above and below, as CHARAKTER */ .book::before{opacity:.9;background:linear-gradient(rgba(8,8,9,.35),rgba(8,8,9,.08) 55%,rgba(8,8,9,.3)),var(--bkpic) 50% 70%/cover no-repeat} .bk-title{padding:calc(14px * var(--k)) calc(18px * var(--k));background:var(--o-div) center top/calc(150px * var(--k)) calc(12px * var(--k)) no-repeat,var(--o-div) center bottom/calc(150px * var(--k)) calc(12px * var(--k)) no-repeat;text-align:center;top:calc(4px + env(safe-area-inset-top,0px))} .book::before{opacity:1;background:linear-gradient(rgba(8,8,9,.3),rgba(8,8,9,.05) 55%,rgba(8,8,9,.28)),var(--bkpic) 50% 60%/cover no-repeat} /* the bookmarks: the generated leather tab with its gold cap (art/ui/bookmark), stretched in the middle; the chosen one lit gold */ .bk-ribbons button{border:solid transparent;border-width:calc(8px * var(--k)) calc(10px * var(--k)) calc(8px * var(--k)) calc(26px * var(--k));border-image:url(../assets/ui/bookmark.webp) 40 40 40 120 fill / calc(8px * var(--k)) calc(10px * var(--k)) calc(8px * var(--k)) calc(26px * var(--k)) stretch;border-radius:0;background:none!important;box-shadow:none!important;padding:calc(4px * var(--k)) calc(8px * var(--k)) calc(4px * var(--k)) calc(6px * var(--k));filter:drop-shadow(-3px 3px 6px rgba(0,0,0,.55)) brightness(.85);color:#d8c69e;text-shadow:0 1px 2px #000} .bk-ribbons button::after{display:none} .bk-ribbons button:hover{filter:drop-shadow(-3px 3px 6px rgba(0,0,0,.55)) brightness(1)} .bk-ribbons button.on{filter:drop-shadow(0 0 8px rgba(238,162,74,.55)) drop-shadow(-3px 3px 6px rgba(0,0,0,.6)) brightness(1.18);color:#f6d28c;box-shadow:none!important} #skills .spage::before{top:17%;bottom:-42%} /* (the class sketch lower again, 05.10., the user's) */ /* ---------- the painted interface (05.10., the user's; art/README.md) ---------- */ img.art-ic{display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none} .tact img.art-ic{width:70%;height:70%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))} .tpot img.art-ic{position:relative;width:74%;height:74%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))} .mchip i img.art-ic,#inv .misc .cell img.art-ic{width:100%;height:100%} /* the side buttons and the menu's top buttons: a painted plate, the painted sign on it, pressed in on a tap */ .sbtn{border:0!important;border-image:none!important;background:url(../assets/icons/hud/plate-square.webp?v=1) center/100% 100% no-repeat!important;box-shadow:none!important;transition:transform .08s,filter .15s} .sbtn:hover{filter:brightness(1.18) drop-shadow(0 0 6px rgba(238,162,74,.35))} .sbtn:active{transform:scale(.93);filter:brightness(.9)} .sbtn img.art-ic,#gmenu .gbtn img.art-ic{width:62%;height:62%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))} /* the title screen's play button: the generated gold plate, its caps fixed and its middle stretched to the word */ #playBtn{border:solid transparent!important;border-width:calc(10px * var(--k)) calc(40px * var(--k))!important;border-image:url(../assets/ui/gold-button.webp?v=1) 38 140 38 140 fill / calc(10px * var(--k)) calc(40px * var(--k)) stretch!important;background:none!important;border-radius:0!important;box-shadow:none!important;padding:calc(6px * var(--k)) calc(14px * var(--k))!important;color:#2a1604!important;text-shadow:0 1px 0 rgba(255,236,200,.45)!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))!important;transition:transform .08s,filter .15s} #playBtn:hover{filter:brightness(1.1) drop-shadow(0 0 14px rgba(238,162,74,.5))!important} #playBtn:active{transform:scale(.96)} /* the pointer label: the generated amber plate, stretched to its words */ #callout,#explain{border:solid transparent!important;border-width:calc(7px * var(--k))!important;border-image:url(../assets/ui/label-plate.webp?v=1) 34 fill / calc(7px * var(--k)) stretch!important;border-radius:0!important;background:none!important} /* the Canon (05.10., the user's): the words bigger again; the bookmarks wider so a chapter's name never breaks inside a word */ .book{--rw:clamp(150px,17vw,250px)} .bk-ribbons button{overflow-wrap:normal;word-break:keep-all;hyphens:none;white-space:normal;min-height:calc(48px * var(--k));font-size:calc(13.5px * var(--k))} body.touch .bk-ribbons button{font-size:12.5px;min-height:40px} .bk-in{font-size:max(2.15cqi,13.5px)} .bk-in h2{font-size:max(3.05cqi,18px)} .bk-in .bk-ch,.bk-in .bk-q small,.bk-in .bk-tp small,.bk-in .bk-chl li span{font-size:max(1.5cqi,10.5px)} .bk-in h3{font-size:max(2.1cqi,13px)} /* ONE close button everywhere (05.10., the user's): the same chamfered plate as the buttons beside it (organic.css's --o-plate), only the sign inside painted — the crossed blades, laid on as ::after so no panel's own background rule can wipe it */ .xclose,.bk-x,#gmenu .gbtn[data-go="close"],#tip .tipx,#statsv .svcard .svcx{font-size:0!important;color:transparent!important;text-shadow:none!important} .bk-x,#tip .tipx,#statsv .svcard .svcx{border:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-image:var(--o-plate) 11 fill / 11px / 0 stretch!important} .xclose svg,.bk-x svg,#tip .tipx svg,.svcx svg,#gmenu .gbtn[data-go="close"] img{display:none!important} #gmenu .gbtn[data-go="close"]{position:relative} .xclose::after,.bk-x::after,#gmenu .gbtn[data-go="close"]::after,#tip .tipx::after,#statsv .svcard .svcx::after{content:"";position:absolute;inset:20%;background:url(../assets/icons/hud/close.webp?v=3) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))} .xclose:active,.bk-x:active,#gmenu .gbtn:active,#tip .tipx:active,.svcx:active{transform:scale(.93)} /* the menu's rows without their small signs (05.10., the user's): quests, map, the books, settings (its wheel and its chevron too) */ #gmenu .gl .tile svg,#gmenu .gr .tile.bar svg,#gmenu .tile .chev{display:none!important} #gmenu .gl .tile,body.touch #gmenu .gl .tiles.know .tile,body.touch #gmenu .gl .tile{padding-left:calc(18px * var(--k))!important} html body #gmenu .gside .tile svg,html body #gmenu .gside .tile .chev{display:none!important} html body.touch #gmenu .gside .tiles .tile svg,html body #gmenu .gside .tiles .tile.bar svg,html body #gmenu .gside .tiles .tile svg{display:none!important} /* the menu's left side, one way for every row (05.10., the user's: 'chaos'): one column of wide rows, the word at the left, vertically centred, the same type */ html body #gmenu .gl .tiles,html body #gmenu .gl .tiles.know{display:grid!important;grid-template-columns:1fr!important;gap:calc(10px * var(--k))!important} html body #gmenu .gl .tiles .tile{aspect-ratio:3.2!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;padding:0 0 0 calc(20px * var(--k))!important;gap:0!important} html body #gmenu .gl .tiles .tile span{background:none!important;padding:0!important;margin:0!important;font-size:calc(17px * var(--k))!important;letter-spacing:.14em!important;white-space:nowrap} html body #gmenu .gl .tiles .tile .art{left:30%!important;-webkit-mask:linear-gradient(90deg,transparent,#000 40%)!important;mask:linear-gradient(90deg,transparent,#000 40%)!important} html body.touch #gmenu .gl .tiles .tile{aspect-ratio:3.5!important;padding-left:5cqi!important} html body.touch #gmenu .gl .tiles .tile span{font-size:clamp(8px,5.4cqi,18px)!important;letter-spacing:.1em!important} html body #gmenu .gl .tiles.know{margin-top:0!important} html body #gmenu .gl .tiles.know .tile,html body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:3.2!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;padding:0 0 0 calc(20px * var(--k))!important} html body.touch #gmenu .gl .tiles.know .tile,html body.touch #gmenu .gl .tiles:not(.know) .tile{aspect-ratio:3.5!important;padding-left:5cqi!important} html body #gmenu .gl .tiles.know .tile span,html body.touch #gmenu .gl .tiles.know .tile span{background:none!important;padding:0!important;font-size:calc(17px * var(--k))!important;letter-spacing:.14em!important} html body.touch #gmenu .gl .tiles.know .tile span{font-size:clamp(8px,5.4cqi,18px)!important;letter-spacing:.1em!important} html body #gmenu .gl .tiles.know .tile .art{left:30%!important} /* ---------- the pointer label after the user's mock-up (generated parts, art/ui/label-*): a dark plate in a double gold rim, 9-sliced to its words; a blue pennant at its left; the gold tip pointing at the thing; the advance button a framed gold chevron ---------- */ html body #callout,html body #explain{border:solid transparent!important;border-width:calc(11px * var(--k))!important;border-image:url(../assets/ui/label-plate2.webp?v=1) 34 fill / calc(11px * var(--k)) stretch!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#efe4cc!important;text-shadow:0 1px 2px #000!important;filter:drop-shadow(0 0 8px rgba(238,162,74,.28)) drop-shadow(0 4px 8px rgba(0,0,0,.6))!important} html body #callout{padding-left:calc(30px * var(--k))!important} html body #callout::before{content:"";position:absolute;left:calc(-6px * var(--k));top:calc(-14px * var(--k));width:calc(26px * var(--k));height:calc(46px * var(--k));background:url(../assets/ui/label-pennant.webp?v=1) center top/contain no-repeat;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))} html body #callout span{color:#efe4cc!important} html body #callout b,html body #callout.rt b,html body #callout.up b,html body #callout.bag b{width:calc(13px * var(--k))!important;height:calc(22px * var(--k))!important;border:0!important;background:url(../assets/ui/label-tip.webp?v=1) center/contain no-repeat!important;filter:drop-shadow(0 0 4px rgba(238,162,74,.5))} html body #callout b::after,html body #callout.up b::after,html body #callout.bag b::after{display:none!important} html body #callout b{right:calc(-22px * var(--k))!important;left:auto!important;top:50%!important;margin-top:calc(-11px * var(--k))!important;transform:rotate(180deg)} html body #callout.rt b{left:calc(-22px * var(--k))!important;right:auto!important;transform:none} html body #callout.up b,html body #callout.bag b{top:calc(-26px * var(--k))!important;margin-top:0!important;transform:rotate(90deg)} html body #callout .more{width:calc(28px * var(--k))!important;height:calc(28px * var(--k))!important;border:0!important;background:url(../assets/ui/label-arrow.webp?v=1) center/contain no-repeat!important;box-shadow:none!important} html body #callout .more svg{display:none!important} html body #callout b,html body #callout.rt b,html body #callout.up b,html body #callout.bag b{width:calc(17px * var(--k))!important;height:calc(30px * var(--k))!important} html body #callout b{right:calc(-27px * var(--k))!important;margin-top:calc(-15px * var(--k))!important}html body #callout.rt b{left:calc(-27px * var(--k))!important} html body #callout.up b,html body #callout.bag b{top:calc(-33px * var(--k))!important} /* ---------- the item card, as the user's own mock-up (assets cut from it: art/ui/card-mockup.png — card-frame, icon-frame, btn-gold, btn-dark, 9-sliced) ---------- */ html body #icard#icard .col,html body #cmp#cmp .col{border:solid transparent!important;border-width:18px!important;border-image:url(../assets/ui/card-frame.webp?v=2) 48 fill / 18px stretch!important;border-radius:0!important;clip-path:none!important;background:none!important;padding:6px 8px 8px!important;box-shadow:none!important;filter:drop-shadow(0 10px 22px rgba(0,0,0,.65))} .ip2 .ihd{display:flex;gap:14px;align-items:center} .ip2 .ific{flex:none;width:84px;height:84px;padding:3px;border:solid transparent;border-width:9px;border-image:url(../assets/ui/icon-frame.webp?v=2) 28 / 9px stretch;background:radial-gradient(circle at 50% 42%,#2c2c2e,#121213 75%);display:flex;align-items:center;justify-content:center} .ip2 .ific img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))} .ip2 .ihx{min-width:0;display:flex;flex-direction:column;gap:2px} html body #icard#icard .ip2 .nm,html body #cmp#cmp .ip2 .nm{font:600 23px/1.08 var(--f-display);letter-spacing:.02em;color:#f2e6cf!important;text-wrap:balance} html body #icard#icard .ip2 .sub,html body #cmp#cmp .ip2 .sub,.ip2 .ilv{font:16px/1.25 var(--f-body);color:#b9ac94;margin:0;letter-spacing:.03em} /* the rules: a thin gold line with a diamond in its middle under the head and above the buttons; faint lines between the parts */ .ip2 .orn{position:relative;height:1px;margin:12px 0 10px;background:linear-gradient(90deg,transparent,#8a6a38 4%,#8a6a38 96%,transparent)} .ip2 .orn::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-4px;background:#c89a52;transform:rotate(45deg);box-shadow:0 0 0 2px #121213} .ip2 .sep2{height:1px;margin:10px 0 8px;background:rgba(150,120,80,.28)} html body .ip.ip2.ip2 .pw{display:flex;align-items:baseline;gap:16px;margin:2px 8px 10px;padding-bottom:10px;border-bottom:1px solid rgba(150,120,80,.28);font-size:0} html body .ip.ip2.ip2 .pw span{font:600 15px var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#cfc2a8} html body .ip.ip2.ip2 .pw b{font:700 34px/1 var(--f-display)!important;color:#f4e9d4!important} html body .ip.ip2.ip2 .delta{display:flex;gap:12px;align-items:flex-start;margin:4px 0 2px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--dc) 22%,transparent);border-left:3px solid var(--dc);border-radius:2px;background:color-mix(in srgb,var(--dc) 9%,#0d0c0c);font-size:0;color:inherit} .ip2 .delta{--dc:#c8a060}.ip2 .delta.up{--dc:#6fcf62}.ip2 .delta.dn{--dc:#e2584a}.ip2 .delta.mix{--dc:#e0b050} .ip2 .delta i{font:normal 17px/1.35 var(--f-body);color:var(--dc)} html body .ip.ip2.ip2 .delta b{display:block;font:700 20px/1.25 var(--f-body)!important;color:var(--dc);text-transform:none} .ip2 .delta small{display:block;font:14.5px/1.3 var(--f-body);color:#c9bda6;letter-spacing:.02em} html body #icard#icard .ip2 .ln,html body #cmp#cmp .ip2 .ln{position:relative;padding-left:22px;font-size:17px;line-height:1.55;color:#ece2cf} .ip2 .ln::before{content:"";position:absolute;left:5px;top:.66em;width:6px;height:6px;background:#c89a52;transform:rotate(45deg)} /* the buttons: Equip (gold) and Compare in a row, Drop below on its own; a thin rule with a diamond above them */ html body #icard#icard .btns,html body #cmp#cmp .btns{position:relative!important;display:flex!important;flex-wrap:nowrap!important;gap:10px!important;align-items:stretch;margin-top:12px!important;padding:14px 0 0!important;background:none!important} html body #icard#icard .btns::before,html body #cmp#cmp .btns::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(150,120,80,.5) 6%,rgba(150,120,80,.5) 94%,transparent)} html body #icard#icard .btns::after,html body #cmp#cmp .btns::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;background:#c89a52;transform:rotate(45deg)} html body #icard#icard .brow2,html body #cmp#cmp .brow2{display:flex;gap:10px;margin-top:10px} html body #icard#icard .btns .ringrow{display:flex;gap:10px;flex:1 1 0;min-width:0} html body #icard#icard button,html body #cmp#cmp button{flex:1 1 0;min-width:0;min-height:44px;border:solid transparent!important;border-width:12px 14px!important;border-image:none!important;--plate:dark;background:none!important;border-radius:0!important;box-shadow:none!important;padding:0 6px!important;font:600 15px var(--f-display)!important;letter-spacing:.16em!important;color:#d8ccb4!important;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #000;transition:transform .08s,filter .15s} html body #icard#icard button.pri,html body #cmp#cmp button.pri{border-width:13px 16px!important;border-image:none!important;--plate:gold;color:#1d1206!important;text-shadow:0 1px 0 rgba(255,232,190,.35)!important;font-size:17px!important} html body #icard#icard .brow2 button,html body #cmp#cmp .brow2 button{flex:0 0 auto;min-width:46%} html body #icard#icard button.icon,html body #cmp#cmp button.icon{flex:0 0 auto;width:62px;padding:0!important;display:flex;align-items:center;justify-content:center} html body #icard#icard button.icon svg,html body #cmp#cmp button.icon svg{display:block!important;width:22px!important;height:22px!important;stroke:#e8c98e!important;fill:none!important;stroke-width:2.2!important} html body #icard#icard button:hover,html body #cmp#cmp button:hover{filter:brightness(1.12)} html body #icard#icard button:active,html body #cmp#cmp button:active{transform:scale(.96)} /* the phone: the same card, smaller type */ html body.touch #icard#icard .ip2 .ific{width:58px;height:58px;border-width:7px} html body.touch #icard#icard .ip2 .nm{font-size:17px}html body.touch #icard#icard .ip2 .sub,html body.touch .ip2 .ilv{font-size:12.5px} html body.touch .ip.ip2.ip2 .pw b{font-size:24px!important}html body.touch .ip.ip2.ip2 .pw span{font-size:12px} html body.touch .ip.ip2.ip2 .delta b{font-size:15px!important}html body.touch .ip2 .delta small{font-size:11.5px} html body.touch #icard#icard .ip2 .ln{font-size:13.5px} html body.touch #icard#icard button{font-size:12px!important;letter-spacing:.1em!important;min-height:38px}html body.touch #icard#icard button.pri{font-size:13px!important} html body.touch #icard#icard button.icon{width:50px} /* the pointer label (05.10., the user's): the pennant lower and shorter, the words smaller, the advance button further right */ html body #callout::before{top:calc(-4px * var(--k))!important;height:calc(36px * var(--k))!important;width:calc(21px * var(--k))!important;left:calc(-3px * var(--k))!important} html body #callout span{font-size:calc(13px * var(--k))!important;line-height:1.25!important} html body #callout{padding-left:calc(24px * var(--k))!important;padding-right:calc(2px * var(--k))!important} html body #callout .more{margin-right:calc(-6px * var(--k))!important;margin-left:calc(8px * var(--k))!important} /* the painted materials wherever a glyph stood (05.10.: Imra's dust filled her whole wares): never bigger than the glyph's box */ img.art-ic{max-width:100%;max-height:100%} #shop .shmats img.art-ic,.mchip img.art-ic{width:calc(18px * var(--k))!important;height:calc(18px * var(--k))!important} #shop img.art-ic,#inv .forgebar img.art-ic,.matn img.art-ic{width:calc(22px * var(--k));height:calc(22px * var(--k))} #shop .sall img.art-ic{width:calc(42px * var(--k))!important;height:calc(42px * var(--k))!important;margin:calc(-4px * var(--k));max-width:none;max-height:none!important;min-height:0;flex:none;align-self:center} /* (the painted sell/salvage icons fill their tile: the rule above made them 22 px) */ /* the pennant from the upper rim to the lower (06.10., the user's: calm): its gem and its point fixed, the cloth between stretched to the label's height */ html body #callout::before{top:calc(-2px * var(--k))!important;bottom:calc(-2px * var(--k))!important;height:auto!important;width:calc(21px * var(--k))!important;left:calc(-2px * var(--k))!important;background:none!important;border-style:solid;border-color:transparent;border-width:calc(16px * var(--k)) 0 calc(10px * var(--k)) 0;border-image:url(../assets/ui/label-pennant.webp?v=1) 90 0 56 0 fill / calc(16px * var(--k)) 0 calc(10px * var(--k)) 0 stretch;box-sizing:border-box} /* the item card more compact (06.10., the user's): thinner rim, less air at the edges and between the parts */ html body #icard#icard .col,html body #cmp#cmp .col{border-width:12px!important;border-image-width:12px!important;padding:2px 4px 4px!important} html body #icard#icard .ip2 .ihd{gap:10px} html body #icard#icard .ip2 .ific{width:70px;height:70px;border-width:7px} .ip2 .orn{margin:8px 0 6px} html body .ip.ip2.ip2 .pw{margin:0 4px 6px;padding-bottom:6px} html body .ip.ip2.ip2 .delta{margin:2px 0;padding:6px 10px} .ip2 .sep2{margin:6px 0 4px} html body #icard#icard .ip2 .ln{line-height:1.4} html body #icard#icard .btns,html body #cmp#cmp .btns{margin-top:8px!important;padding-top:10px!important;gap:8px!important} html body #icard#icard .brow2{margin-top:8px} html body.touch #icard#icard .ip2 .ific{width:50px;height:50px;border-width:6px} /* ---------- THE BUTTONS (06.10., the user's): one gold button and one dark button for the whole game, both cut from the user's item-card mock-up (assets/ui/btn-gold.webp, btn-dark.webp), 9-sliced: their chamfered rims fixed, the face stretched to the word. .kb-gold / .kb-dark are the components; the game's existing primary and secondary buttons wear them by the lists below ---------- */ .kb-gold,.kb-dark, html body :is(#playBtn,.mm-go,.cclaim,.mm-cbtns button.pri,.mm-cbtns button[data-a="yes"],#death .cmd,#help .ok,button.fire,.upbtn), html body :is(.mm-alt,.mm-cbtns button:not(.pri):not([data-a="yes"]),#inv .statsbtn,#inv.open .statsbtn,#shop .sall,#shop .sbtn,.lsbtn:not(.fire),.pbtn:not(.fire),.lsreset,.cmd.sclose,button.minor:not(.icon)){ border-style:solid!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;background:none!important; font-family:var(--f-display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.14em!important;white-space:nowrap;cursor:pointer;transition:transform .08s,filter .15s} .kb-gold,html body :is(#playBtn,.mm-go,.cclaim,.mm-cbtns button.pri,.mm-cbtns button[data-a="yes"],#death .cmd,#help .ok,button.fire,.upbtn){ border-width:calc(10px * var(--k,1)) calc(13px * var(--k,1))!important;border-image:none!important;--plate:gold; color:#1d1206!important;text-shadow:0 1px 0 rgba(255,232,190,.35)!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))!important;animation:none!important} .kb-dark,html body :is(.mm-alt,.mm-cbtns button:not(.pri):not([data-a="yes"]),#inv .statsbtn,#inv.open .statsbtn,#shop .sall,#shop .sbtn,.lsbtn:not(.fire),.pbtn:not(.fire),.lsreset,.cmd.sclose,button.minor:not(.icon)){ border-width:calc(9px * var(--k,1)) calc(11px * var(--k,1))!important;border-image:none!important;--plate:dark; color:#ddd0b6!important;text-shadow:0 1px 2px #000!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))} html body :is(#playBtn,.mm-go,.cclaim,.mm-cbtns button,#death .cmd,#help .ok,button.fire,.upbtn,.mm-alt,#inv .statsbtn,#shop .sall,#shop .sbtn,.lsbtn,.pbtn,.lsreset,.cmd.sclose,button.minor):hover{filter:brightness(1.12) drop-shadow(0 3px 6px rgba(0,0,0,.55))!important} html body :is(#playBtn,.mm-go,.cclaim,.mm-cbtns button,#death .cmd,#help .ok,button.fire,.upbtn,.mm-alt,#inv .statsbtn,#shop .sall,#shop .sbtn,.lsbtn,.pbtn,.lsreset,.cmd.sclose,button.minor):active{transform:scale(.96)} html body :is(.lsbtn,.pbtn,#shop .sbtn,#shop .sall).dim,html body :is(.lsbtn,.pbtn,#shop .sbtn,.cclaim):disabled{filter:grayscale(.7) brightness(.7)!important} /* the advance button back off the rim a little (06.10.) */ html body #callout .more{margin-right:calc(3px * var(--k))!important} /* the item card: as narrow as its words allow (the --card-w its widest), its lines scrolling by finger */ html body #icard#icard .col,html body #cmp#cmp .col{width:fit-content!important;min-width:min(var(--card-w,300px),250px);max-width:var(--card-w,300px)} html body #icard#icard .col .scroll{overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} html body.touch #icard#icard .col{max-width:min(var(--card-w,300px),300px)} /* the card's buttons in one row (06.10., the user's): Equip widest, Compare square, Drop narrower; smaller type so all three fit */ html body #icard#icard .btns{gap:6px!important} html body #icard#icard .btns > button.pri{flex:1.7 1 0} html body #icard#icard .btns > button.minor:not(.icon){flex:1 1 0} html body #icard#icard button{font-size:13px!important;letter-spacing:.1em!important;padding:0 4px!important} html body #icard#icard button.pri{font-size:14px!important} html body #icard#icard button.icon{width:48px;flex:0 0 48px} html body.touch #icard#icard button{font-size:10.5px!important;letter-spacing:.06em!important;min-height:36px;border-width:8px 9px!important;border-image-width:8px 9px!important} html body.touch #icard#icard button.pri{font-size:11.5px!important;border-width:8px 10px!important;border-image-width:8px 10px!important} html body.touch #icard#icard button.icon{width:40px;flex:0 0 40px} html body.touch #icard#icard button.icon svg{width:17px!important;height:17px!important} /* the trader's wares list scrolls (06.10., the user's: Imra's ran out of the window) */ #shop .shbuy{min-height:0;overflow:hidden} #shop .shbuy .cats{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;padding-bottom:6px} #shop .shbuy .cats::-webkit-scrollbar{display:none} #shop .shbuy h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* the smith's upgrade (06.10., the user's): the cost a small line over a plain-sized button */ html body #icard#icard .upcost{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px;margin:6px 0 0;font:13px/1.3 var(--f-body);color:#d8ccb4} html body #icard#icard .upcost .gc{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);vertical-align:-1px;margin-right:3px} html body #icard#icard .upcost .bad{color:#e07a64} html body #icard#icard button.upbtn{flex:1 1 auto;min-height:40px} html body.touch #icard#icard .upcost{font-size:11px} html body #icard#icard .upcost .um{display:inline-flex;align-items:center;gap:2px} html body #icard#icard .upcost .um img.art-ic,html body #icard#icard .upcost .um svg{width:16px!important;height:16px!important} html body #icard#icard .upcost .um.bad{color:#e07a64} /* the camera-guided Explain label the same as the pointer label (06.10., the user's): the pennant from rim to rim, the framed gold chevron */ html body #explain{position:fixed;padding-left:calc(24px * var(--k))!important} html body #explain::before{content:"";position:absolute;top:calc(-2px * var(--k));bottom:calc(-2px * var(--k));left:calc(-2px * var(--k));width:calc(21px * var(--k));border-style:solid;border-color:transparent;border-width:calc(16px * var(--k)) 0 calc(10px * var(--k)) 0;border-image:url(../assets/ui/label-pennant.webp?v=1) 90 0 56 0 fill / calc(16px * var(--k)) 0 calc(10px * var(--k)) 0 stretch;box-sizing:border-box;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))} html body #explain .more{width:calc(28px * var(--k))!important;height:calc(28px * var(--k))!important;border:0!important;background:url(../assets/ui/label-arrow.webp?v=1) center/contain no-repeat!important;box-shadow:none!important;margin-left:calc(8px * var(--k))!important;margin-right:calc(3px * var(--k))!important} html body #explain .more svg{display:none!important} html body #explain span{color:#efe4cc!important;font-size:calc(13px * var(--k))!important} /* the labels' words smaller (06.10., the user's: more room) */ html body #callout span,html body #explain span{font-size:calc(11.5px * var(--k))!important;line-height:1.25!important} /* the pointer label one line where there is room (06.10., the user's): wider before it wraps */ html body #callout{max-width:min(calc(430px * var(--k,1)),62vw)!important} html body #callout span{text-wrap:pretty!important} /* the map tour's advance button inside the label's plate, the framed gold chevron (06.10., the user's) */ html body #callout #tourBtn{position:static!important;left:auto!important;top:auto!important;flex:none;width:calc(28px * var(--k))!important;height:calc(28px * var(--k))!important;margin:0 calc(3px * var(--k)) 0 calc(8px * var(--k))!important;border:0!important;border-image:none!important;background:url(../assets/ui/label-arrow.webp?v=1) center/contain no-repeat!important;box-shadow:none!important;pointer-events:auto;cursor:pointer} html body #callout #tourBtn svg{display:none!important} html body #callout #tourBtn[hidden]{display:none!important} /* the label never wider than its words (06.10., the user's: empty room to the right) — the words do not grow into the plate */ html body #callout span,html body #explain span{flex:0 1 auto!important;min-width:0} html body #callout,html body #explain{width:fit-content!important} /* the companion's drawing (06.10., the user's): no 3D model in the window */ #petp .ppview{display:none!important} #petp .ppstage img.pport{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:auto;height:88%;max-width:96%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));pointer-events:none} #mastp svg image,#petp svg image{pointer-events:none} /* the Canon's pencil sketches (06.10., the user's): laid onto the right page as if drawn there */ .bk-in img.bk-sk{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;mix-blend-mode:multiply;opacity:.9;margin:0 0 .5em;filter:sepia(.25) contrast(1.05);-webkit-mask:radial-gradient(ellipse at center,#000 62%,transparent 100%);mask:radial-gradient(ellipse at center,#000 62%,transparent 100%)} /* the Bestiary's pages */ .bk-in img.bk-beast{display:block;width:100%;max-height:72%;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.6) contrast(1.05);margin:.2em auto 0} .bk-in img.bk-beast.unmet{filter:brightness(0) opacity(.55);mix-blend-mode:normal} .bk-in .bk-kills{display:flex;align-items:baseline;gap:.5em;margin:0 0 .5em;padding-bottom:.4em;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)} .bk-in .bk-kills b{font:600 2.6em/1 var(--f-display);color:var(--accent)} .bk-in .bk-kills span{font:max(1.3cqi,10px) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:color-mix(in srgb,var(--ink) 75%,transparent)} .bk-in .bk-rune{color:color-mix(in srgb,var(--ink) 35%,transparent);letter-spacing:.2em;font-style:italic} .bk-in .bk-next,.bk-in .bk-zones{font:max(1.3cqi,10px) 'Alegreya SC',var(--f-body);letter-spacing:.04em;color:color-mix(in srgb,var(--ink) 70%,transparent)} .bk-in .bk-zones span{color:var(--accent)} /* five rows on the left on a phone (the Bestiary joined): a little flatter so all fit */ html body.touch #gmenu .gl .tiles:not(.know) .tile,html body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:4!important} html body.touch #gmenu .gl .tiles{gap:5px!important} /* the Bestiary's head: the group and the name never wider than the page */ .book[data-kind=bestiary] .bk-in h2{font-size:max(2.4cqi,15px);overflow-wrap:anywhere} .book[data-kind=bestiary] .bk-in .bk-ch{font-size:max(1.05cqi,8.5px);letter-spacing:.08em} #gmenu .tile .bknb[hidden]{display:none!important} /* the book's title between ornaments as wide as the title itself (the Bestiary's longer word had shown bare diamonds) */ .bk-title{background-size:100% calc(12px * var(--k)),100% calc(12px * var(--k))!important;padding-left:calc(10px * var(--k))!important;padding-right:calc(10px * var(--k))!important} /* the Lodestar's painted path signs: the drawn body hidden under them (halo, selection ring kept); unlearned dimmed but still in their colour */ /* the gold and dark plates: their faces tiled at their own scale, not stretched (the stretch drew streaks), the seam where they were cut softened */ .kb-gold,.kb-dark,html body :is(#playBtn,.mm-go,.cclaim,.mm-cbtns button,#death .cmd,#help .ok,button.fire,.upbtn,.mm-alt,#inv .statsbtn,#shop .sall,#shop .sbtn,.lsbtn,.pbtn,.lsreset,.cmd.sclose,button.minor),html body #icard#icard button,html body #cmp#cmp button{border-image-repeat:stretch!important} /* the hero's name as the user's mock-up: a dark plate in a gold rim with diamonds at its ends, the class's sign at the left behind a thin rule */ #heroName{padding:calc(9px * var(--k)) 14px calc(9px * var(--k)) calc(46px * var(--k))!important;border:solid transparent!important;border-width:calc(9px * var(--k)) calc(12px * var(--k))!important;border-image:none!important;--plate:dark;background:none!important;font:calc(15px * var(--k)) var(--f-body)!important;color:#efe4cc!important} #heroName::placeholder{color:#a99c86;opacity:1} #heroName:focus{filter:drop-shadow(0 0 6px rgba(238,162,74,.4))} .mm-namebox{position:relative;width:100%} .mm-namebox::before,.mm-namebox::after{content:"";position:absolute;top:50%;width:calc(9px * var(--k));height:calc(9px * var(--k));margin-top:calc(-4.5px * var(--k));background:#c89a52;transform:rotate(45deg);box-shadow:0 0 0 2px #17181b,0 0 0 3px #8a6a38;z-index:2;pointer-events:none} .mm-namebox::before{left:calc(-3px * var(--k))}.mm-namebox::after{right:calc(-3px * var(--k))} .mm-namebox i{position:absolute;left:calc(16px * var(--k));top:50%;transform:translateY(-50%);width:calc(30px * var(--k));height:calc(22px * var(--k));padding-right:calc(9px * var(--k));border-right:1px solid rgba(200,154,82,.45);pointer-events:none;z-index:1;display:flex;align-items:center} .mm-namebox i svg{width:100%;height:100%;fill:none;stroke:#eea24a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #lodep .lsch .ni.art{transform:none!important;border:0!important;background:none!important;box-shadow:none!important;clip-path:none!important;border-radius:0!important;width:calc(76px * var(--k))!important;height:calc(76px * var(--k))!important;margin:0!important;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 60%,transparent))} #lodep .lsch .ni.art.small{width:calc(56px * var(--k))!important;height:calc(56px * var(--k))!important;margin:calc(10px * var(--k))!important} #lodep .lsch .ni.art img{width:100%;height:100%;object-fit:contain;display:block} /* the primary action in a panel is the gold button (06.10., the user's: Learn, Learn path) */ html body #lodep .lsbtn.fire,html body #petp .pbtn.fire{border-style:solid!important;border-color:transparent!important;border-width:calc(10px * var(--k)) calc(13px * var(--k))!important;border-image:none!important;--plate:gold;background:none!important;color:#1d1206!important;text-shadow:0 1px 0 rgba(255,232,190,.35)!important;font-family:var(--f-display)!important;font-weight:600!important;letter-spacing:.14em!important;white-space:nowrap;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))!important;padding:calc(4px * var(--k)) calc(10px * var(--k))!important} /* reset: a quiet dark row, its words inside it */ html body #lodep .lsreset{padding:calc(4px * var(--k)) calc(8px * var(--k))!important;gap:calc(10px * var(--k))!important;letter-spacing:.06em!important;white-space:normal!important;text-transform:none!important} html body #lodep .lsreset .rr{width:calc(30px * var(--k));height:calc(30px * var(--k))} html body #lodep .lsreset *{white-space:normal!important} html body #lodep .lsreset b,html body #lodep .lsreset span,html body #lodep .lsreset small{font-size:calc(11px * var(--k))!important;letter-spacing:.06em!important;line-height:1.25} /* the creator's choice tiles (06.10., the user's): the card's dark face in a double gold rim with corner filigree and edge diamonds (generated, 9-sliced) */ html body .cu-opt{border:solid transparent!important;border-width:calc(14px * var(--k))!important;border-image:url(../assets/ui/cutile.webp?v=1) 130 / calc(14px * var(--k)) stretch!important;background:radial-gradient(ellipse at 50% 40%,#25252a,#121214 75%) padding-box!important;max-width:calc(70px * var(--k))!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))} html body .cu-opt:hover{filter:brightness(1.18) drop-shadow(0 3px 6px rgba(0,0,0,.55))!important} html body .cu-opt.on{filter:sepia(.4) saturate(2.2) brightness(1.25) drop-shadow(0 0 10px rgba(238,162,74,.55))!important;color:#ffd08a} /* the close buttons that sit in a card's corner stay there (06.10., the user's: the stats card's X had dropped to the foot) */ html body #statsv .svcard .svcx,html body #tip .tipx{position:absolute!important;top:6px!important;right:6px!important;width:32px!important;height:32px!important;z-index:3} html body #statsv .svcard .ip2 .ihd{padding-right:30px} /* the stats view's item card is the inventory's card (06.10., the user's): the same frame and the same rules */ html body #statsv .svcard .col{border:solid transparent!important;border-width:18px!important;border-image:url(../assets/ui/card-frame.webp?v=2) 48 fill / 18px stretch!important;border-radius:0!important;clip-path:none!important;background:none!important;padding:6px 8px 8px!important;box-shadow:none!important;filter:drop-shadow(0 10px 22px rgba(0,0,0,.65))} html body #statsv .svcard .ip2 .nm{font:600 23px/1.08 var(--f-display);letter-spacing:.02em;color:#f2e6cf!important;text-wrap:balance} html body #statsv .svcard .ip2 .sub{font:16px/1.25 var(--f-body);color:#b9ac94;margin:0;letter-spacing:.03em} html body #statsv .svcard .ip2 .ln{position:relative;padding-left:22px;font-size:17px;line-height:1.55;color:#ece2cf} html body #statsv .svcard .btns{position:relative!important;display:flex!important;flex-wrap:nowrap!important;gap:10px!important;align-items:stretch;margin-top:12px!important;padding:14px 0 0!important;background:none!important} html body #statsv .svcard .btns::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(150,120,80,.5) 6%,rgba(150,120,80,.5) 94%,transparent)} html body #statsv .svcard .btns::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;background:#c89a52;transform:rotate(45deg)} html body #statsv .svcard .brow2{display:flex;gap:10px;margin-top:10px} html body #statsv .svcard .btns .ringrow{display:flex;gap:10px;flex:1 1 0;min-width:0} html body #statsv .svcard button{flex:1 1 0;min-width:0;min-height:44px;border:solid transparent!important;border-width:12px 14px!important;border-image:none!important;--plate:dark;background:none!important;border-radius:0!important;box-shadow:none!important;padding:0 6px!important;font:600 15px var(--f-display)!important;letter-spacing:.16em!important;color:#d8ccb4!important;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #000;transition:transform .08s,filter .15s} html body #statsv .svcard button.pri{border-width:13px 16px!important;border-image:none!important;--plate:gold;color:#1d1206!important;text-shadow:0 1px 0 rgba(255,232,190,.35)!important;font-size:17px!important} html body #statsv .svcard .brow2 button{flex:0 0 auto;min-width:46%} html body #statsv .svcard button.icon{flex:0 0 auto;width:62px;padding:0!important;display:flex;align-items:center;justify-content:center} html body #statsv .svcard button.icon svg{display:block!important;width:22px!important;height:22px!important;stroke:#e8c98e!important;fill:none!important;stroke-width:2.2!important} html body #statsv .svcard button:hover{filter:brightness(1.12)} html body #statsv .svcard button:active{transform:scale(.96)} html body.touch #statsv .svcard .ip2 .ific{width:58px;height:58px;border-width:7px} html body.touch #statsv .svcard .ip2 .nm{font-size:17px} html body.touch #statsv .svcard .ip2 .sub{font-size:12.5px} html body.touch #statsv .svcard .ip2 .ln{font-size:13.5px} html body.touch #statsv .svcard button{font-size:12px!important;letter-spacing:.1em!important;min-height:38px} html body.touch #statsv .svcard button.pri{font-size:13px!important} html body.touch #statsv .svcard button.icon{width:50px} html body #statsv .svcard .col{border-width:12px!important;border-image-width:12px!important;padding:2px 4px 4px!important} html body #statsv .svcard .ip2 .ihd{gap:10px} html body #statsv .svcard .ip2 .ific{width:70px;height:70px;border-width:7px} html body #statsv .svcard .ip2 .ln{line-height:1.4} html body #statsv .svcard .btns{margin-top:8px!important;padding-top:10px!important;gap:8px!important} html body #statsv .svcard .brow2{margin-top:8px} html body.touch #statsv .svcard .ip2 .ific{width:50px;height:50px;border-width:6px} html body #statsv .svcard .col{width:fit-content!important;min-width:min(var(--card-w,300px),250px);max-width:var(--card-w,300px)} html body #statsv .svcard .col .scroll{overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} html body.touch #statsv .svcard .col{max-width:min(var(--card-w,300px),300px)} html body #statsv .svcard .btns{gap:6px!important} html body #statsv .svcard .btns > button.pri{flex:1.7 1 0} html body #statsv .svcard .btns > button.minor:not(.icon){flex:1 1 0} html body #statsv .svcard button{font-size:13px!important;letter-spacing:.1em!important;padding:0 4px!important} html body #statsv .svcard button.pri{font-size:14px!important} html body #statsv .svcard button.icon{width:48px;flex:0 0 48px} html body.touch #statsv .svcard button{font-size:10.5px!important;letter-spacing:.06em!important;min-height:36px;border-width:8px 9px!important;border-image-width:8px 9px!important} html body.touch #statsv .svcard button.pri{font-size:11.5px!important;border-width:8px 10px!important;border-image-width:8px 10px!important} html body.touch #statsv .svcard button.icon{width:40px;flex:0 0 40px} html body.touch #statsv .svcard button.icon svg{width:17px!important;height:17px!important} html body #statsv .svcard .upcost{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px;margin:6px 0 0;font:13px/1.3 var(--f-body);color:#d8ccb4} html body #statsv .svcard .upcost .gc{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#c08a20);vertical-align:-1px;margin-right:3px} html body #statsv .svcard .upcost .bad{color:#e07a64} html body #statsv .svcard button.upbtn{flex:1 1 auto;min-height:40px} html body.touch #statsv .svcard .upcost{font-size:11px} html body #statsv .svcard .upcost .um{display:inline-flex;align-items:center;gap:2px} html body #statsv .svcard .upcost .um img.art-ic,html body #statsv .svcard .upcost .um svg{width:16px!important;height:16px!important} html body #statsv .svcard .upcost .um.bad{color:#e07a64} html body #statsv .svcard button{border-image-repeat:stretch!important} #statsv .svcard{border:0!important;border-image:none!important;background:none!important;padding:0!important;overflow:visible!important;max-height:none!important} #statsv .svcard .col{max-height:calc(100vh - 60px);display:flex;flex-direction:column;width:min(330px,calc(100vw - 32px))} #statsv .svcard .col .scroll{overflow-y:auto;min-height:0} #statsv .svcard .svcx{top:10px!important;right:10px!important} /* the hero choice (06.10., the user's): nothing of the name field shows before a class is chosen; Create (gold, its word) and Customize (an edit sign) side by side */ .mm-info.none .mm-namebox,.mm-info.none .mm-actrow{display:none!important} .mm-actrow{display:flex;gap:calc(10px * var(--k));align-items:stretch;justify-content:center;width:100%;margin-top:calc(6px * var(--k))} .mm-actrow .mm-go{flex:1 1 auto;margin:0!important} html body .mm-actrow .mm-edit{flex:0 0 auto;width:calc(52px * var(--k));padding:0!important;display:flex;align-items:center;justify-content:center;margin:0!important} .mm-actrow .mm-edit svg{width:calc(20px * var(--k));height:calc(20px * var(--k));fill:none;stroke:#e8c98e;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* the creator (06.10., the user's): Done's word in its middle; the choice tiles big as the leaf allows, the dark face filling the whole frame (no black square inside) */ html body #customDone{display:flex!important;align-items:center;justify-content:center;padding:0 calc(8px * var(--k))!important;text-indent:.14em;box-sizing:border-box;min-height:calc(44px * var(--k))} html body .cu-opt{max-width:none!important;background:radial-gradient(ellipse at 50% 42%,#2a2a2f,#121214 78%) border-box!important;clip-path:polygon(9% 0,91% 0,100% 9%,100% 91%,91% 100%,9% 100%,0 91%,0 9%);font-size:calc(22px * var(--k))!important} html body .cu-grid{gap:calc(10px * var(--k))!important;padding:calc(4px * var(--k))} html body .cu-opt.on{filter:brightness(1.2) drop-shadow(0 0 10px rgba(238,162,74,.55))!important;color:#ffd08a} html body .cu-opt.on::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(238,162,74,.85),inset 0 0 18px rgba(238,162,74,.35)} /* the Lodestar's side (06.10., the user's: nothing fitted): wider; its buttons the game's own plates with nothing hung on them; the head's sign smaller; reset one plain row */ html body #lodep .lsinfo{width:clamp(250px,28%,340px)!important;padding-right:calc(10px * var(--k))!important} html body #lodep .lsbtn::before,html body #lodep .lsbtn::after{display:none!important} html body #lodep .lsbtn{margin:0!important;min-width:0!important;align-self:stretch} html body #lodep .lsch{display:flex;align-items:center;gap:calc(10px * var(--k));min-width:0} html body #lodep .lsch > div{min-width:0} html body #lodep .lsch b{white-space:normal!important;overflow-wrap:anywhere} html body #lodep .lsch .ni.art,html body #lodep .lsch .ni.art.small{width:calc(48px * var(--k))!important;height:calc(48px * var(--k))!important;margin:0!important;flex:none} html body #lodep .lsch .ni.art.key{width:calc(58px * var(--k))!important;height:calc(58px * var(--k))!important} html body #lodep .lsreset{width:100%!important;min-height:calc(46px * var(--k));justify-content:flex-start} html body #lodep .lsreset .rr{flex:none;width:calc(26px * var(--k))!important;height:calc(26px * var(--k))!important;box-shadow:none!important;border:0!important;background:none!important} html body #lodep .lsreset .rt{display:flex;flex-direction:column;min-width:0;text-align:left} html body #lodep .lsreset .rt span,html body #lodep .lsreset .rt em{font-size:calc(10.5px * var(--k))!important;letter-spacing:.08em!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #lodep .lsreset .rt em{font-style:normal;color:#e8b860;font-size:calc(9.5px * var(--k))!important} /* Lodestar (06.10., the user's): one frame round the chart — the board's own rule at its very edge, the window's inner second rule gone, nothing drawn past it */ html body #lodep .lsboard{border-radius:0!important} /* a lit star: a quiet gold line of its own above the button, no tick */ html body #lodep .ldone{display:flex!important;align-items:center;gap:calc(8px * var(--k));align-self:flex-start;margin:0 0 calc(6px * var(--k));font:calc(11px * var(--k)) 'Alegreya SC',var(--f-body)!important;letter-spacing:.14em!important;text-transform:uppercase;color:#e8c98e!important} html body #lodep .ldone::before{content:"";width:calc(7px * var(--k));height:calc(7px * var(--k));transform:rotate(45deg);background:#e8b860;box-shadow:0 0 6px rgba(238,162,74,.6)} html body #lodep .lsact,html body #lodep .lsbtnrow{flex-direction:column!important;align-items:stretch!important} /* reset: a slim button, one line, its cost a small note beneath */ html body #lodep .lsreset{min-height:0!important;width:auto!important;align-self:center;padding:calc(3px * var(--k)) calc(14px * var(--k))!important;gap:calc(8px * var(--k))!important;border-width:calc(7px * var(--k)) calc(10px * var(--k))!important} html body #lodep .lsreset .rr{width:calc(16px * var(--k))!important;height:calc(16px * var(--k))!important} html body #lodep .lsreset .rr svg{width:100%;height:100%} html body #lodep .lsreset .rt{flex-direction:column!important;align-items:flex-start} html body #lodep .lsreset .rt span{font-size:calc(10px * var(--k))!important;letter-spacing:.12em!important} html body #lodep .lsreset .rt em{font-size:calc(8.5px * var(--k))!important;letter-spacing:.08em!important;opacity:.85} html body #lodep .lsinfo .lsreset{width:max-content!important;max-width:100%!important;flex:none!important;align-self:center!important;min-height:0!important;height:auto!important} html body #lodep .lsinfo .lsreset .rt span{white-space:nowrap} html body #lodep .lsfoot{display:flex;flex-direction:column;align-items:center;gap:calc(4px * var(--k))} html body #lodep .lsrnote{font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:#c9a46a;opacity:.85} /* the side's contents centred (06.10., the user's): even room left and right, the buttons in the middle */ html body #lodep .lsinfo{padding-left:calc(10px * var(--k))!important;padding-right:calc(10px * var(--k))!important;scrollbar-gutter:stable both-edges} html body #lodep .lsact{width:100%;display:flex!important;flex-direction:column!important;align-items:center!important} html body #lodep .lsact .lsbtn{width:92%!important;align-self:center!important} html body #lodep .lsfoot{width:100%;align-items:center!important} #statsv .svcard{pointer-events:none} body.touch #statsv .svcard{pointer-events:auto} #statsv .svcard .svcx{display:none!important} /* unlit stars quieter (06.10., the user's): dark and grey, only what can be learned now a little brighter */ /* the companion's window, done over (06.10., the user's: 'UI slop'): a keeper's courtyard painted behind it (assets/ui/pets-scene.webp), the painted signs filling their sockets, a shut one only dark (no lock), Learned a gold line as on the Lodestar, Reset a slim dark plate with its cost beneath */ #petp .ppbg{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 80% at 55% 50%,rgba(8,7,6,.35),rgba(8,7,6,.9)),linear-gradient(90deg,rgba(8,7,6,.55),rgba(8,7,6,.2) 30%,rgba(8,7,6,.35) 70%,rgba(8,7,6,.8)),url(../assets/ui/pets-scene.webp) center/cover no-repeat,#0d0c0b;filter:brightness(.55) saturate(.8) blur(1px)} #petp .ppbody,#petp .plate-title{position:relative;z-index:1}#petp .xclose{z-index:2} #petp .ppstage img.pport{-webkit-mask-image:linear-gradient(#000 78%,transparent 99%);mask-image:linear-gradient(#000 78%,transparent 99%)} #petp .pn .lock{display:none} #petp .pn.shut{opacity:1}#petp .pn.shut .pi{opacity:1}#petp .pn.shut svg.pi image{filter:saturate(.35) brightness(.38)}#petp .pn.shut .rim{fill:#2a2116}#petp .pn.shut .rim2{stroke:#120e09} #petp .pn:not(.shut):not(.got) svg.pi image{filter:saturate(.75) brightness(.78)}#petp .pn.can svg.pi image{filter:none} #petp .pn.other svg.pi image{filter:saturate(.2) brightness(.4)} #petp .pn .face{fill:#0b0a09}#petp .pn.got .face{fill:url(#ppFaceOn)} #petp .pdone:not(.dim){display:flex;align-items:center;gap:calc(8px * var(--k));font:calc(11px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#e8c98e} #petp .pdone:not(.dim)::before{content:"";width:calc(7px * var(--k));height:calc(7px * var(--k));transform:rotate(45deg);background:#e8b860;box-shadow:0 0 6px rgba(238,162,74,.6)} #petp .ppfoot{display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--k))} #petp .ppfoot::before,#petp .ppfoot::after{display:none!important} html body #petp .ppreset{width:max-content!important;max-width:100%;align-self:center;display:flex;align-items:center;gap:calc(8px * var(--k))!important;padding:calc(3px * var(--k)) calc(14px * var(--k))!important;font:600 calc(10px * var(--k)) var(--f-display)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--bone)!important;white-space:nowrap} html body #petp .ppreset .rr{width:calc(16px * var(--k))!important;height:calc(16px * var(--k))!important;border:0!important;box-shadow:none!important;background:none!important} html body #petp .ppreset .rr svg{width:100%;height:100%} #petp .pprnote{display:flex;align-items:center;gap:5px;font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.06em;color:#c9a46a;opacity:.85} #petp .pppts{padding-bottom:calc(10px * var(--k));border-bottom:1px solid rgba(200,160,96,.22)} #petp .ppinfo{background:linear-gradient(90deg,transparent,rgba(10,9,8,.55) 18%);padding-left:calc(18px * var(--k))!important;padding-right:calc(6px * var(--k))} html body #petp .ppreset span{font-size:calc(10px * var(--k))!important;letter-spacing:.1em!important;white-space:nowrap} #petp .ppinfo{padding-right:calc(14px + var(--sr))!important}#petp .pch b{overflow-wrap:normal;font-size:calc(13.5px * var(--k));letter-spacing:.07em}#petp .pch{gap:calc(12px * var(--k))} html body #petp .ppfoot .ppreset{width:auto!important;max-width:none!important;min-width:0!important;flex:none!important} html body #petp .ppfoot .ppreset span{font-size:calc(9.5px * var(--k))!important;letter-spacing:.08em!important} /* the creator on a flat phone (06.10., the user's iPhone 12 mini, 375 px high): the words smaller, the two marks side by side, the name field and the buttons slimmer and closer */ @media (max-height:430px){ html body.touch #mainmenu .mm-info{gap:calc(5px * var(--k))!important} html body.touch #mainmenu .mm-create .mm-desc{font-size:11px!important;line-height:1.4!important} html body.touch #mainmenu .mm-create .mm-tags{flex-direction:row!important;justify-content:center;gap:14px!important;padding:4px 0!important} html body.touch #mainmenu .mm-create .mm-tags span{font-size:11px!important;gap:5px} html body.touch #mainmenu .mm-create .mm-tags svg{width:13px!important;height:13px!important} html body.touch #heroName{padding:5px 10px 5px 38px!important;border-width:6px 9px!important;font-size:13px!important} html body.touch .mm-namebox i{left:12px!important;width:22px!important;height:16px!important;padding-right:6px!important} html body.touch .mm-actrow{gap:8px!important;margin-top:2px!important} html body.touch .mm-actrow .mm-go{padding-top:5px!important;padding-bottom:5px!important;border-width:6px 12px!important;font-size:11.5px!important;letter-spacing:.16em!important} html body.touch .mm-actrow .mm-edit{width:40px!important;border-width:6px!important} html body.touch .mm-actrow .mm-edit svg{width:16px!important;height:16px!important} } /* a phone (06.10., the user's: a passage slow, a phone gone at the portal back): the passage's veil without its turning layer (half again the screen, redrawn every frame over the world) and its motes, its rim still */ body.touch #riftVeil .b,body.touch #riftVeil i{display:none!important} body.touch #riftVeil .a{animation:none!important} body.touch #zload .zl-img{transform:scale(1);transition:transform 2.6s cubic-bezier(.25,.6,.35,1)}body.touch #zload.on .zl-img{transform:scale(1.12)} /* (13.10., the user's: the push-in on a loading picture not seen at all on a phone — it was held still since 06.10.; now quicker and further, in the time a phone's loading screen stands: one layer scaled by the compositor) */ /* the settings from the class choice while there is no hero yet (06.10., the user's): top right, where the way back stands once there is one — the close button's plate, the painted cog */ #mmSettings{display:none;position:absolute;right:calc(10px + var(--sr));top:calc(8px + var(--st));width:calc(28px * var(--k));height:calc(28px * var(--k));pointer-events:auto} #mainmenu[data-mode="create"]:has(#createBack[hidden]) #mmSettings,#mainmenu[data-mode="select"] #mmSettings{display:flex} /* (and on the hero selection, the user's 06.10.) */ #mmSettings::after{background-image:url(../assets/icons/hud/settings.webp)!important} body.mainmenu #help{z-index:80!important} body.mainmenu #help .hrow:has(#benchBtn),body.mainmenu #help h3:has(+ .seedrow),body.mainmenu #help .seedrow,body.mainmenu #help .seedrow + .hnote,body.mainmenu #help h3:has(+ .hrow #quitMenu),body.mainmenu #help .hrow:has(#quitMenu){display:none!important} /* desktop (06.10., the user's, again): the Lodestar's side as wide as its words need at the desktop's scale — its width grows with --k as its letters do; the menu's right cards' names in the size of the left rows', not a third of it */ html body:not(.touch) #lodep .lsinfo{width:clamp(calc(260px * var(--k)),26%,calc(380px * var(--k)))!important} html body:not(.touch) #lodep .lsinfo b,html body:not(.touch) #lodep .lsinfo h3{overflow-wrap:normal!important;word-break:normal!important;hyphens:manual} html body:not(.touch) #gmenu .gside{width:clamp(calc(230px * var(--k)),30%,calc(260px * var(--k)))!important} /* (the columns grow with the desktop's scale as their words do: at 400 px the right cards cut their names) */ html body:not(.touch) #gmenu .gr .tiles .tile span{font-size:calc(12px * var(--k))!important;letter-spacing:.07em!important;white-space:nowrap} /* a phone's menu: the left rows taller (06.10., the user's: too flat at 4:1) */ html body.touch #gmenu .gl .tiles:not(.know) .tile,html body.touch #gmenu .gl .tiles.know .tile{aspect-ratio:3.25!important} /* a phone: no soft-UI blur — a filter on a full-screen panel is drawn once more into its own screen-sized buffer in the GPU's memory, shared with the world's; a 12 mini lost its WebGL context three times opening a shop (06.10.) */ body.touch.uisoft :is(#labels,#minimapWrap,#zone,#side,#callout,#quest,#feed,#target,#msgs,#lifeGlobe,#manaGlobe,#belt,#xpText,#inv,#cmp,#tip,#lvlup,#feat,#dialogue,#qlog,#skills,#mainmenu,#chron,#gmenu,#help,#touch,#icard,#shop,#petp,#fps,#exitTip){filter:none!important} /* the creator's two buttons (06.10., the user's, again): Create no longer the whole row's width, the edit button wider than a square — both centred as a pair, on every screen */ html body .mm-actrow{justify-content:center!important;gap:calc(10px * var(--k))!important} html body .mm-actrow .mm-go{flex:0 1 auto!important;width:auto!important;min-width:0!important;padding-left:calc(30px * var(--k))!important;padding-right:calc(30px * var(--k))!important} html body .mm-actrow .mm-edit{flex:0 0 auto!important;width:calc(76px * var(--k))!important} html body.touch .mm-actrow .mm-go{padding-left:26px!important;padding-right:26px!important} html body.touch .mm-actrow .mm-edit{width:68px!important} @media (max-height:430px){html body.touch .mm-actrow .mm-edit{width:60px!important}} /* the Lodestar's sky: the user's own starfield with its constellations (07.10.) — barely dimmed (it is dark already), kept inside the board's border (the board clips it) */ /* desktop, the menu's left rows (07.10., the user's: still too big): their names a little smaller */ html body:not(.touch) #gmenu .gl .tiles .tile span,html body:not(.touch) #gmenu .gl .tiles.know .tile span{font-size:calc(13px * var(--k))!important;letter-spacing:.12em!important} /* (the drawn extra stars off: only the user's own sky, 07.10.) */ /* the Lodestar's sky alive (07.10., the user's: a hard vignette, movement, a little blur): the painted sky breathes slowly in and out, a second softer copy of it turns slowly over it in light (the nebula seems to drift), a deep vignette closes the edges in; a phone keeps the drift but neither the second layer nor the blur */ /* the Lodestar after the user's mock-up (07.10.): each sign in a thick metal rim, the lines thicker and gold so the chart stands off the sky, the sky shown on the side panel too, faint */ /* the side panel's sky: darker, soft, fading out at every edge (no box) — the user's */ html body #lodep .lsinfo{background:none!important;position:relative;z-index:1} #lodep .lsbody{position:relative} #lodep .lsboard{z-index:1} /* a phone: no filter on a full-screen layer (each is drawn again into its own screen-sized GPU buffer — a 12 mini died opening the companion's window, 07.10.): the same darkness by a gradient instead */ body.touch #petp .ppbg{filter:none!important;background:linear-gradient(rgba(4,3,3,.5),rgba(4,3,3,.5)),radial-gradient(ellipse 70% 80% at 55% 50%,rgba(8,7,6,.35),rgba(8,7,6,.9)),url(../assets/ui/pets-scene.webp) center/cover no-repeat,#0d0c0b!important} /* the world map: the user's torn parchment is the frame (07.10.) — no bronze border, no ground, no sunk rim round it */ :is(#mapPanel,#qlog) .mframe.wmap{border-color:transparent;border-image:none;background:transparent;box-shadow:none} :is(#mapPanel,#qlog) .mframe.wmap::before,:is(#mapPanel,#qlog) .mframe.wmap::after{display:none} /* the world map's card of an Originators' Dungeon: its five legendaries as item tiles (07.10.) — orange rim and glow as in the bag, dim until found */ :is(#mapPanel,#qlog) .mtravel .mlegs{display:flex;flex-direction:column;align-items:center;gap:calc(4px * var(--k));margin-top:calc(6px * var(--k))} :is(#mapPanel,#qlog) .mtravel .mlegs>span{font:600 calc(8.5px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#d98a3a} :is(#mapPanel,#qlog) .mtravel .mlegs p{display:flex;gap:calc(6px * var(--k));margin:0} :is(#mapPanel,#qlog) .mtravel .mlg{position:relative;display:grid;place-items:center;width:calc(44px * var(--k));height:calc(44px * var(--k));border:1px solid rgba(255,138,48,.75);border-radius:3px;background:radial-gradient(circle at 50% 55%,rgba(255,122,32,.32),rgba(40,18,6,.85) 70%),#120c08;box-shadow:inset 0 0 calc(10px * var(--k)) rgba(255,120,30,.35),0 0 calc(6px * var(--k)) rgba(255,120,30,.25);cursor:pointer;opacity:.62;transition:opacity .15s,transform .15s} :is(#mapPanel,#qlog) .mtravel .mlg.got{opacity:1} :is(#mapPanel,#qlog) .mtravel .mlg.fancy{border-color:#ffb055;box-shadow:inset 0 0 calc(12px * var(--k)) rgba(255,150,50,.5),0 0 calc(9px * var(--k)) rgba(255,140,40,.45)} :is(#mapPanel,#qlog) .mtravel .mlg:hover{opacity:1;transform:translateY(-1px)} :is(#mapPanel,#qlog) .mtravel .mlg img{width:82%;height:82%;object-fit:contain;pointer-events:none} body.touch :is(#mapPanel,#qlog) .mtravel .mlg{width:38px;height:38px} #icard.onmap{z-index:60} /* a long German name ("Scheiterhaufen", "Sandschreiter") broken with a hyphen, not cut off at the card's edge */ #icard .nm,#icard .bs{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} /* the legendary power: its own block under the values — a gold rule, a heading, the words in orange (the general #icard .ln had painted it bone like any stat line) */ .ip .lph,#icard .ip .lph{margin-top:calc(8px * var(--k));padding-top:calc(7px * var(--k));border-top:1px solid rgba(255,140,50,.35);font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#e8862e} #icard .ip .ln.lp,#inv .ip .ln.lp,#tip .ip .ln.lp,.ip .ln.lp{color:#ffb466!important;font-style:normal;margin-top:calc(3px * var(--k));padding-left:0;text-shadow:0 0 calc(8px * var(--k)) rgba(255,120,30,.35)} .ip .ln.lp::before,.ip .ln.mkfrom::before,.ip2 .ln.lp::before,.ip2 .ln.mkfrom::before{display:none!important} .ip2 .ln.lp,.ip2 .ln.mkfrom{padding-left:0!important} #icard .ip .ln.mkfrom,.ip .ln.mkfrom{color:#7ff0e0!important;font-size:calc(10.5px * var(--k))!important;margin-top:calc(6px * var(--k));padding-left:0;opacity:.85} html body .lph{margin-top:calc(8px * var(--k));padding-top:calc(7px * var(--k));border-top:1px solid rgba(255,140,50,.35);font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#e8862e} html body #icard#icard .ln.lp,html body .ln.lp{color:#ffb466!important;font-style:normal;margin-top:calc(3px * var(--k));padding-left:0!important;text-shadow:0 0 calc(8px * var(--k)) rgba(255,120,30,.35)} html body #icard#icard .ln.mkfrom,html body .ln.mkfrom{color:#7ff0e0!important;font-size:calc(10.5px * var(--k))!important;margin-top:calc(6px * var(--k));padding-left:0!important;opacity:.85} html body .ln.lp::before,html body .ln.mkfrom::before{display:none!important} /* the legendaries' guide: the card held high in the frame, its pointer label free under it (on a phone it sat over the tiles) */ :is(#mapPanel,#qlog) .mtravel.mtut{bottom:auto;top:16%} :is(#mapPanel,#qlog) .mtravel .mlg{overflow:hidden} :is(#mapPanel,#qlog) .mtravel .mlg img{max-width:82%;max-height:82%;width:auto;height:auto} /* the guide's spot over a dungeon's mark on the world map (the mark is drawn on the canvas) */ :is(#mapPanel,#qlog) .mkmark{position:absolute;z-index:3;width:32px;height:32px;pointer-events:none} /* the book's drawings: the paper baked out of them (transparent, ink only, 07.10.) — no "multiply", which Safari dropped on the turning page and left a pale box (the user's iPhone); the canon's edges fade out all round */ .bk-in img.bk-sk,.bk-in img.bk-beast{mix-blend-mode:normal} .bk-in img.bk-sk{-webkit-mask:radial-gradient(ellipse closest-side at 50% 50%,#000 84%,transparent 100%);mask:radial-gradient(ellipse closest-side at 50% 50%,#000 84%,transparent 100%)} /* the chest's window (the forge's salvage page: one grid, centred) — no sell-all signs; the bag card's chest button */ /* the chest's tabs: where the forge's salvage signs stand, but on the left of the grid — I–V, the open one lit, the next one to buy with its price, the rest locked */ #shop.stashv .shsell .sgrid{grid-column:2} #shop.stashv .salls{grid-column:1;grid-row:2} #shop.stashv .salls .sall,#shop:not(.stashv) .salls .stab{display:none!important} #shop .stab{width:calc(46px * var(--k));height:calc(46px * var(--k));padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:var(--bone-lo);cursor:pointer} #shop .stab b{font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.06em} #shop .stab.on{border-image-source:var(--o-fire);color:#241304} #shop .stab svg{width:calc(16px * var(--k));height:calc(16px * var(--k));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} #shop .stab small{font:600 calc(8.5px * var(--k)) var(--f-body);color:#eea24a;line-height:1} #shop .stab.lock{color:#6f6556} #shop .stab.lock.next{color:#c9b28a} #shop .stab:disabled{cursor:default;opacity:.55} body.touch #shop .stab{width:40px;height:40px} body.touch #shop .stab b{font-size:13px} /* the chest: as the forge's salvage page — no wares column, the heading shown, the page centred */ #shop.stashv .shbuy{display:none!important} #shop.stashv .shsell h3{display:flex!important} #shop.stashv .shsell{flex:1 1 auto;max-width:calc(760px * var(--k))} #shop.stashv .shbody{justify-content:center} /* the ultimate when full: bigger than a skill (80px), ablaze — a pulsing halo, a turning ring of light round it (07.10., the user) */ .tult{width:92px} .tult .ic{position:relative;width:80px;height:80px;border:3px solid #cfeaff;overflow:visible;box-shadow:0 0 18px 6px rgba(140,200,255,.85),0 0 42px 14px rgba(90,150,255,.45);animation:ultblaze 0.9s ease-in-out infinite} .tult .ic canvas{border-radius:50%} .tult .ic::before{content:"";position:absolute;inset:-12px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 12%,rgba(200,235,255,.95) 18%,transparent 26% 46%,rgba(150,205,255,.9) 54%,transparent 62% 80%,rgba(220,245,255,.95) 88%,transparent 96%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 62%,#000 70%,transparent 74%);mask:radial-gradient(circle,transparent 58%,#000 62%,#000 70%,transparent 74%);animation:ultspin 1.6s linear infinite} .tult .ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;border:2px solid rgba(190,230,255,.7);animation:ultring 1.2s ease-out infinite} .tult span{font-size:13px;color:#e4f3ff;text-shadow:0 0 8px rgba(120,190,255,.9),0 1px 2px #000} @keyframes ultblaze{0%,100%{box-shadow:0 0 16px 5px rgba(140,200,255,.8),0 0 36px 12px rgba(90,150,255,.4);transform:scale(1)}50%{box-shadow:0 0 26px 10px rgba(170,220,255,1),0 0 60px 22px rgba(100,160,255,.6);transform:scale(1.06)}} @keyframes ultspin{to{transform:rotate(360deg)}} @keyframes ultring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}} @media (prefers-reduced-motion:reduce){.tult .ic,.tult .ic::before,.tult .ic::after{animation:none}} .tult{position:absolute} .tult kbd{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:2;padding:0 6px;border-radius:5px;background:#0a0b0c;border:1px solid #8cc6ff;font:600 10px/1.35 var(--f-display);color:#dff0ff;letter-spacing:.06em} body.touch .tult kbd{display:none} body:not(.touch) .tult span{margin-top:14px} .tult span{display:none!important} /* (no name under it: the label clashed with the buttons beside it, the user) */ /* a phone at the forge (07.10.: an iPhone 12 mini died 1.6 s after Upgrade opened): the forge's picture exactly screen-sized, not a layer 125 vw wide (≈ 3000 device px); under the upgrade page (the bag over the whole screen) the forge's own window not drawn at all — two such layers had stood stacked */ body.touch #shop.smith::before,body.touch #inv.forging::before{inset:0!important;left:0!important;top:0!important;width:auto!important;height:auto!important;background-size:cover!important;background-position:42% 62%!important} body.touch #shop.smith.t-upgrade{visibility:hidden} body.touch #shop.smith.t-upgrade .shask{visibility:visible} /* the ultimate a size smaller (64px, the user): beside skill 1, the talk button close by */ .tult{width:72px} .tult .ic{width:64px;height:64px} .tult .ic::before{inset:-9px} .tult kbd{top:56px} /* phones, the Lodestar (07.10., measured: ~40 MB of layers): no will-change on its full-panel layers, the sky's second turning copy left out — each was a bitmap of the whole panel at 3× density */ body.touch #lodep .lsbg,body.touch #lodep .lsview,body.touch #lodep .lsview g{will-change:auto!important} /* the Lodestar hot and flickering (15.10.): the .forge outline and outer shadow on the full-screen window made Chrome re-raster the whole window layer every frame while any transform animation ran inside it (the sky drifting) — measured 1450 tiles/s, the GPU busy ~25 %. The same 1 px bronze rule 5 px in as a border on a pseudo-element instead; the planned way's dashes stand still (stroke-dashoffset cannot run on the compositor: it repainted the chart) */ html body #lodep{outline:none!important;box-shadow:none!important} html body #lodep::before{display:block!important;content:"";position:absolute;inset:5px;z-index:6;border:1px solid var(--bronze-lo);background:none!important;pointer-events:none} /* the Lodestar as a star atlas (16.10., the user's: branches, constellations, lit stars that read at a glance; after Path of Exile's tree; the painterly look 'D' of four proposals, js/ui/lodepanel.js). Unlit: small, cold, dim. Can be lit: ice white (gold is the game's 'new', not this). Lit: the path's colour with a broad bloom, its lines glowing in it. The figures behind the paths as faint colour washes. Only small things move: the can-light halo's breath and the chosen star's ring — no endless animation on a large layer (87f16d1) */ #lodep .lsfigs{pointer-events:none}#lodep .lsfigs .fig image{opacity:calc(.66 + .3 * var(--lf, 0));transition:opacity .45s ease-out} /* (16.10., the user's: the figures pencil sketches — tools/art/lodebg.py; faint, a little clearer with the path's lit stars) */ html body #lodep .lsastro .ring{stroke-opacity:.09;stroke-dasharray:1 10} html body #lodep .pname text{font:italic 600 17px var(--f-display);letter-spacing:.3em;opacity:.95} /* the medallion: the class sketch cut round, a gilded sunburst, a jewel of each path's colour where it leaves */ #lodep .lsmed{pointer-events:none} #lodep .lsmed image{filter:sepia(.25) contrast(1.08) brightness(1.05)} #lodep .lsglow .mglow{transform:scale(1.25);transition:transform .45s ease-out,opacity .45s ease-out} #lodep :is(.lsglow,.lsaura,.lsrim){pointer-events:none}#lodep :is(.lsaura,.lsrim){mix-blend-mode:screen}#lodep :is(.lsaura .la,.lsrim .lr2){transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .45s ease-out,opacity .45s ease-out} #lodep .lsmed .mr1{fill:none;stroke:#e8c27a;stroke-opacity:.9;stroke-width:1.2} #lodep .mfd .d1{fill:url(#lsMetal);stroke:#2a1c0c;stroke-width:.6;opacity:.9}#lodep .mfd .d2{fill:none;stroke:url(#lsMetal);stroke-width:6}#lodep .mfd .d3{fill:none;stroke:#fff0c4;stroke-opacity:.7;stroke-width:1} #lodep .mfd .spk{transform-box:fill-box;transform-origin:center} /* the lines: a constant width on screen (vector-effect), so the lit route reads from far out */ #lodep .e2{fill:none;stroke-linecap:round;stroke-linejoin:round} #lodep .e2.dim{stroke:#a9b4c8;stroke-opacity:.22;stroke-width:1.4} #lodep .e2.next{stroke:#a8e4ff;stroke-opacity:.85;stroke-width:1.5;stroke-dasharray:3 4} #lodep .e2.plan{stroke:#eaf8ff;stroke-opacity:.95;stroke-width:1.8;stroke-dasharray:6 5} #lodep .e2.lg2{stroke-opacity:.12;stroke-width:26} #lodep .e2.lg{stroke-opacity:.3;stroke-width:12} #lodep .e2.lc{stroke-opacity:1;stroke-width:3} #lodep .e2.lw{stroke:#fff;stroke-opacity:.75;stroke-width:.9} /* the stars (16.10. evening, the user: 'strangely drawn, not glowing'): each a soft glow, a crisp white core and — for the bright stars and the keystones — a sparkle of four (eight) curved rays, no rings or crosshairs. Unlit: small and dim, cold grey; can be lit: ice white, bigger, glowing and breathing; lit: the path's colour, strong */ #lodep .ln .lh{opacity:0;transition:opacity .3s} #lodep .ln .lc{fill:#8a98ae;opacity:.8;transition:fill .3s} #lodep .ln .lr{fill:#0b0d14;fill-opacity:.7;stroke:#8a98ae;stroke-opacity:.35;stroke-width:1} #lodep .ln .ls{fill:#7d8ba2;opacity:.55}#lodep .ln .ls.s2{opacity:.35} #lodep .ln .lb{fill:#0b0d14;stroke:#8090a8;stroke-opacity:.5;stroke-width:1}#lodep .ln .lb2{fill:#8090a8;opacity:.25} /* can be lit next */ #lodep .ln.can .lh{fill:url(#lsHc);opacity:1;animation:lsBreath 2.6s ease-in-out infinite} #lodep .ln.can .lc{fill:#fff;opacity:1} #lodep .ln.can :is(.lr,.lb){stroke:#bfeaff;stroke-opacity:1;stroke-width:2}#lodep .ln.can .lr{fill:#163042;fill-opacity:.9} #lodep .ln.can .ls{fill:#dff4ff;opacity:1}#lodep .ln.can .ls.s2{fill:#fff;opacity:.8} @keyframes lsBreath{0%,100%{opacity:.6}50%{opacity:1}} /* lit */ #lodep .ln.got .lh{opacity:1} #lodep .ln.got .lc{fill:#fff;opacity:1} #lodep .ln.got .lr{stroke:#fff6e2;stroke-opacity:1;stroke-width:1.4;fill:var(--c);fill-opacity:.95} #lodep .ln.got .ls{fill:var(--c);opacity:1}#lodep .ln.got .ls.s2{fill:#fff;opacity:.9} #lodep .ln.got .lb{fill:var(--c);stroke:#fff6e2;stroke-opacity:.9;stroke-width:1.2}#lodep .ln.got .lb2{fill:var(--c2);opacity:1} /* far off, chosen, on the drawn way */ html body #lodep .ln.far{opacity:.45}html body #lodep .ln.dist{opacity:.75}html body #lodep .ln.far.dist{opacity:.45} #lodep .ln.plan :is(.lr,.lb){stroke:#eaf8ff;stroke-opacity:1;stroke-dasharray:3 2.5}#lodep .ln.plan .lc{fill:#eaf8ff;opacity:1}#lodep .ln.plan .ls{fill:#eaf8ff;opacity:.9} #lodep .ln .selr{stroke:#f2fbff} /* the chart's ground (16.10., the user's): no painted sky, no glints — the inventory's own ground (the window's gradient and its texture, as .book) under a strong dark veil (.68 → .80: 'even darker'), so the lines and the glows stand out */ html body #lodep .lsbg{inset:0!important;filter:none!important;opacity:1!important;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.8)),radial-gradient(ellipse at 34% 58%,rgba(120,124,132,.16),transparent 42%),linear-gradient(rgba(36,38,42,.52),rgba(16,17,19,.66)),var(--tex-panel) 0 0/384px 384px,var(--an-0)!important;background-blend-mode:normal!important} /* one frame (16.10., the user: 'the inner line should be painted over by the real frame'): the chart has no border of its own any more — it runs out to the window's frame line on the left, top and bottom, and the window's line and corner scrolls lie over its edge; the title over the chart; a single line of the frame's kind between the chart and the right column */ html body #lodep .plate-title{position:absolute!important;left:0;right:0;top:0;z-index:5;pointer-events:none;padding-left:var(--lsl, 0px)!important;padding-right:var(--lsr, 0px)!important} /* (centred over the chart: the room left and right of it, measured in LodePanel.size) */ #lodep .pname.under{display:none}#lodep .lssub{position:absolute;left:0;right:0;z-index:5;pointer-events:none;display:none;padding-left:var(--lsl, 0px);padding-right:var(--lsr, 0px);text-align:center;font:italic 600 calc(12px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--c);text-shadow:0 0 3px #07070a,0 0 6px #07070a}#lodep .lssub.on{display:block} /* (16.10., the user's: a path's name that would sit under the title stands as its subline — LodePanel.nameClash) */ html body.touch #lodep .plate-title{display:none!important}html body.touch #lodep .lssub{display:none!important} /* (16.10., the user's: on the phone the title floated over the chart and covered the top star — left out there; the desktop keeps it) */ html body #lodep .lsbody{padding:4px calc(18px + var(--sr)) 4px 4px!important;gap:0!important} /* (4 px: the frame line at 5 px lies over the chart's edge) */ html body #lodep .lsboard{border-radius:0!important;box-shadow:none!important} html body #lodep .lsinfo{border-left:1px solid var(--bronze-lo);padding-top:calc(48px * var(--k) + var(--st))!important;padding-left:calc(14px * var(--k))!important} html body #lodep .lszoom{left:calc(26px * var(--k) + var(--sl))!important;bottom:calc(26px * var(--k))!important} /* the right column smaller (16.10., the user: 'too much room — smaller, the button texts too'): narrower, so the chart gains the width; its type and its buttons a size down, near the inventory's (all with --k on the desktop) */ html body:not(.touch) #lodep .lsinfo{width:clamp(calc(205px * var(--k)),19%,calc(280px * var(--k)))!important} html body.touch #lodep .lsinfo{width:clamp(196px,24%,232px)!important} html body #lodep .lspts b{font-size:calc(20px * var(--k))!important}html body #lodep .lspts{font-size:calc(10.5px * var(--k))!important;gap:calc(6px * var(--k))!important} html body #lodep .lscard.empty p{font-size:calc(10.5px * var(--k))!important}html body #lodep .lscard.empty p.tip{font-size:calc(9.5px * var(--k))!important} html body #lodep .lsch b{font-size:calc(12px * var(--k))!important;letter-spacing:.08em!important}html body #lodep .lsch small{font-size:calc(10px * var(--k))!important} html body #lodep .lsch .ni.art,html body #lodep .lsch .ni.art.small{width:calc(38px * var(--k))!important;height:calc(38px * var(--k))!important}html body #lodep .lsch .ni.art.key{width:calc(46px * var(--k))!important;height:calc(46px * var(--k))!important} html body #lodep .lscard{gap:calc(7px * var(--k))!important}html body #lodep .lsfx li{font-size:calc(11px * var(--k))!important;padding-left:calc(13px * var(--k))!important} html body #lodep .lstot .lsh{font-size:calc(9px * var(--k))!important}html body #lodep .lstot .lsh em{font-size:calc(9.5px * var(--k))!important}html body #lodep .lstot li{font-size:calc(10.5px * var(--k))!important;line-height:1.45}html body #lodep .lstot p{font-size:calc(10px * var(--k))!important} html body #lodep .ldone{font-size:calc(9.5px * var(--k))!important} html body #lodep .lsbtn.fire{font-size:calc(10px * var(--k))!important;letter-spacing:.12em!important;border-width:calc(8px * var(--k)) calc(10px * var(--k))!important;padding:calc(2px * var(--k)) calc(8px * var(--k))!important} html body #lodep .lsbtn:not(.fire){font-size:calc(9.5px * var(--k))!important;padding:calc(6px * var(--k)) calc(10px * var(--k))!important} html body #lodep .lsact .lsbtn{width:86%!important} html body #lodep .lsinfo .lsreset{border-width:calc(6px * var(--k)) calc(8px * var(--k))!important;padding:calc(2px * var(--k)) calc(10px * var(--k))!important}html body #lodep .lsreset .rt span{font-size:calc(9px * var(--k))!important}html body #lodep .lsreset .rr{width:calc(13px * var(--k))!important;height:calc(13px * var(--k))!important}html body #lodep .lsrnote{font-size:calc(9px * var(--k))!important} html body.touch #lodep .lspts b{font-size:17px!important}html body.touch #lodep :is(.lsch b,.lsfx li){font-size:11.5px!important}html body.touch #lodep .lstot li{font-size:11.5px!important}html body.touch #lodep .lsbtn.fire{font-size:10px!important} /* ===================================================================== THE PHONE'S HTML AT HALF ITS DENSITY (08.10., measured in WebKit: Safari rasters every HTML layer over the 3D view at the phone's full density, ~190 MB of IOSurfaces in its GPU process — at density 1.5 a third of it). A full-screen element laid out at half size (zoom .5 in a box of half the screen) and scaled back up (scale(2)): the same layout, rastered at half the pixels, enlarged by the GPU — smith open: GPU process 614–625 → 528 MB. Text a touch softer. js/ui/uihalf.js picks the elements (full-screen, no transform of their own); 'kharos.uifull' = '1' for the full density ===================================================================== */ .uihalf{zoom:.5!important;inset:0 auto auto 0!important;width:50%!important;height:50%!important;transform:scale(2)!important;transform-origin:0 0!important} /* an Originators' run: its name at the top in a turquoise bar (where a passage shows its bar), a tap opens the run's card; the tracker in turquoise, a passage's in violet (08.10.) */ #mkTop{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top, 0px));transform:translateX(-50%);width:min(calc(400px * var(--k)),52vw);display:none;pointer-events:auto;cursor:pointer;text-align:center;z-index:5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))} #mkTop.on{display:block} #mkTop .rt{font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#7ff0e2;text-shadow:0 1px 2px #000} #mkTop .mkbar{position:relative;height:calc(17px * var(--k));margin-top:5px;padding:1.5px;background:#5fe8d6;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)} #mkTop .mkbar::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(#2ab8a8,#0f6e66);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)} #mkTop .mkbar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.1em} #mkTop .mklives{margin-top:4px;font:italic calc(11px * var(--k)) var(--f-body);color:#bff7ef;text-shadow:0 1px 2px #000}#mkTop .mklives:empty{display:none} #quest.mkq .qt{color:#5fe8d6}#quest.mkq .qt::before{background:#5fe8d6}#quest.mkq .qw{color:#9fe9df;font-style:normal} #quest.riftq .qt{color:#c58cff}#quest.riftq .qt::before{background:#c58cff}#quest.riftq .qw{color:#dcc2ff;font-style:normal} #mkInfo .mkscroll{max-height:min(56vh,calc(300px * var(--k)));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #mkTop .rt{white-space:nowrap} /* a phone: exactly the passage's bar's size (body.touch #riftHud), the user's 08.10. */ body.touch #mkTop{width:min(250px,34vw);top:calc(6px + env(safe-area-inset-top, 0px))}body.touch #mkTop .rt{font-size:10px;letter-spacing:.14em}body.touch #mkTop .mkbar{height:10px;margin-top:3px}body.touch #mkTop .mkbar em{font-size:8.5px}body.touch #mkTop .mklives{font-size:9px;margin-top:2px} /* an Originators' run's own dialogs in its turquoise, not the passage's violet (08.10., the user's) */ .mm-confirm.mk .mm-cbox h3{color:#7ff0e2}.mm-confirm.mk button.pri{border-color:#3fe6d2!important} /* an event in the tracker (js/ui/ui.js eventLog): turquoise, a four-pointed star before its name, a bar for its time */ #quest.ev .qt{color:#5ff0e0} #quest.ev .qt::before{width:13px;height:13px;transform:none;background:#5ff0e0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.7 7.6L22 12l-7.3 3.4L12 23l-2.7-7.6L2 12l7.3-3.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.7 7.6L22 12l-7.3 3.4L12 23l-2.7-7.6L2 12l7.3-3.4z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(95,240,224,.8))} #quest.ev .qf{color:#5ff0e0} #quest .qb{display:none} #quest.ev .qb{display:block;margin:6px 0 2px 15px;height:7px;width:min(190px,78%);background:rgba(4,14,14,.6);border:1px solid rgba(95,240,224,.5);box-shadow:0 0 6px rgba(63,230,210,.25)} #quest.ev .qb.none{display:none} #quest .qb div{height:100%;width:0;background:linear-gradient(90deg,#127a70,#3fe6d2);transition:width .25s linear} /* ---- the Endgame Redesign (js/story/endgame.js): a sigil's tier on its cell, Imra's row of tiers ---- */ #inv .misc .sigt{position:absolute;left:calc(5px * var(--k));top:calc(3px * var(--k));z-index:2;font:700 calc(11px * var(--k)) var(--f-display);letter-spacing:.06em;color:#7ff6e8;text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none} #shop .cats .mktiers{grid-column:1/-1;display:flex;align-items:center;gap:calc(6px * var(--k));padding:0 0 calc(2px * var(--k))} #shop .cats .mktiers span{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo);margin-right:calc(4px * var(--k))} #shop .cats .mktiers button{min-width:calc(38px * var(--k));height:calc(30px * var(--k));font:700 calc(13px * var(--k)) var(--f-display);color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);cursor:pointer} #shop .cats .mktiers button.on{color:#1a1004;background:linear-gradient(#f4c27a,#c9802c);border-color:#eea24a} /* the forge's two buttons and an item's story (js/story/endgame.js): cracks violet, veins turquoise, a torn item glowing violet */ .ip .egstate{display:flex;align-items:center;justify-content:center;gap:calc(10px * var(--k));margin:calc(4px * var(--k)) 0} .ip .egstate .egc,.ip .egstate .egv{display:flex;gap:calc(3px * var(--k))} .ip .egstate .egc i{width:calc(9px * var(--k));height:calc(12px * var(--k));background:#2a2430;clip-path:polygon(40% 0,70% 0,55% 45%,85% 45%,35% 100%,45% 55%,15% 55%)} .ip .egstate .egc i.on{background:#c48aff;filter:drop-shadow(0 0 3px #b36bff)} .ip .egstate .egv i{width:calc(14px * var(--k));height:calc(3px * var(--k));border-radius:2px;background:#3fe6d2;box-shadow:0 0 5px #3fe6d2;transform:rotate(-20deg)} .ip .egstate.torn b{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#d2a8ff;text-shadow:0 0 8px #b36bff} .ip .egwarn{margin:2px 0 calc(4px * var(--k));padding:calc(3px * var(--k)) calc(8px * var(--k));font-size:calc(11px * var(--k));color:#e6c8ff;background:rgba(120,50,200,.18);border:1px solid rgba(179,107,255,.45);text-align:center} .ip.egtorn{box-shadow:inset 0 0 calc(26px * var(--k)) rgba(150,80,255,.28)} .ip .ln.egtl{color:#d2a8ff!important;text-shadow:0 0 6px rgba(179,107,255,.6)} #icard .ln[data-ai]{position:relative;cursor:pointer;padding-right:calc(26px * var(--k));border-radius:3px} #icard .ln[data-ai]:hover{background:rgba(255,255,255,.04)} #icard .ln.egsel{background:rgba(238,162,74,.14);outline:1px solid rgba(238,162,74,.7)} #icard .ln .egt{position:absolute;right:calc(4px * var(--k));top:50%;transform:translateY(-50%);font:700 calc(10px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.06em;color:var(--bone-lo)} #icard .ln.egsel .egt{color:#eea24a} #icard .egbtns{display:flex;gap:calc(6px * var(--k));margin-top:calc(6px * var(--k))} #icard .egbtns button{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(5px * var(--k));height:calc(28px * var(--k));font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);cursor:pointer} #icard .egbtns button i{display:flex}#icard .egbtns button i svg{width:calc(15px * var(--k));height:calc(15px * var(--k));fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} #icard .egbtns .egroll{border-color:rgba(179,107,255,.7)}#icard .egbtns .egroll i svg{stroke:#c48aff} #icard .egbtns .egtemper{border-color:rgba(63,230,210,.6)}#icard .egbtns .egtemper i svg{stroke:#3fe6d2} #icard .egbtns .egroll.tear{color:#f0dcff;background:linear-gradient(#4a1f7a,#26103f)} #icard .egbtns button.dim{opacity:.45} #icard .egbtns b{font-weight:700;color:var(--bone-lo)} #icard .eghint{margin-top:calc(4px * var(--k));font-size:calc(11px * var(--k));color:var(--bone-lo);text-align:center;font-style:italic} #inv .cell .egm,#inv .eq .egm{position:absolute;left:calc(3px * var(--k));bottom:calc(2px * var(--k));display:flex;gap:2px;pointer-events:none;z-index:2} #inv .egm b{font:700 calc(10px * var(--k)) var(--f-display);padding:0 3px;border-radius:2px;color:#0b0b0e} #inv .egm b.c{background:#c48aff}#inv .egm b.v{background:#3fe6d2} #inv .cell.egtorn,#inv .eq.egtorn{box-shadow:inset 0 0 calc(14px * var(--k)) rgba(150,80,255,.65)} #icard .egbtns .egmirror{border-color:rgba(232,238,248,.6)}#icard .egbtns .egmirror i svg{stroke:#e8eef8} #egAltar .egspl{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--k));margin:calc(6px * var(--k)) 0} #egAltar .egspl i svg{width:calc(26px * var(--k));height:calc(26px * var(--k));fill:none;stroke:#3fe6d2;stroke-width:1.8} #egAltar .egspl b{font:700 calc(22px * var(--k)) var(--f-display);color:var(--bone-lo)}#egAltar .egspl.ok b{color:#7ff6e8;text-shadow:0 0 10px rgba(63,230,210,.6)} #egAltar .egspl span{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo)} #egAltar .mktiers{display:flex;justify-content:center;gap:calc(6px * var(--k));margin:calc(4px * var(--k)) 0} #egAltar .mktiers span{align-self:center;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo)} #egAltar .mktiers button{min-width:calc(38px * var(--k));height:calc(30px * var(--k));font:700 calc(13px * var(--k)) var(--f-display);color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo)} #egAltar .mktiers button.on{color:#1a1004;background:linear-gradient(#f4c27a,#c9802c);border-color:#eea24a} #egTear.mm-confirm,#egLeave.mm-confirm,#egAltar.mm-confirm,#egMirror.mm-confirm{position:fixed;z-index:95}#egTear.mm-confirm.on,#egLeave.mm-confirm.on,#egAltar.mm-confirm.on,#egMirror.mm-confirm.on{display:flex;animation:pFade .2s ease-out both} .mm-confirm.egtear .mm-cbox h3{color:#d2a8ff}.mm-confirm.egtear button.danger{border-color:#b36bff!important} /* a socket on the card: empty a dark ring, set the jewel's colour */ .ip .egsock{display:flex;align-items:center;gap:calc(6px * var(--k));margin:calc(4px * var(--k)) 0;font-size:calc(12px * var(--k));color:var(--bone-lo)} .ip .egsock i{width:calc(12px * var(--k));height:calc(12px * var(--k));transform:rotate(45deg);border:1.5px solid #8a7a5a;background:#0c0d0f} .ip .egsock.on{color:var(--bone)}.ip .egsock.on i{background:var(--jc);border-color:#d8a860;box-shadow:0 0 8px var(--jc)} .ip .egsock em{margin-left:auto;font-style:normal;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.08em;color:var(--bone-lo)} #icard .egjewels{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px * var(--k));margin-top:calc(6px * var(--k))} #icard .egjewels span{width:100%;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-lo)} #icard .egjewels button{position:relative;width:calc(40px * var(--k));height:calc(40px * var(--k));padding:0;background:#0c0d0f;border:1px solid var(--bronze-lo);cursor:pointer} #icard .egjewels img{width:100%;height:100%}#icard .egjewels b{position:absolute;right:2px;bottom:0;font:700 calc(9px * var(--k)) var(--f-display);color:var(--bone)} #icard .egbtns .egsockb{border-color:rgba(216,168,96,.6)}#icard .egbtns .egsockb b{display:flex;align-items:center;gap:3px} .mm-confirm .egwarnj{color:#ffcf8a} :is(#riftAsk,#fullAsk,#newsAsk) .mktiers{display:flex;justify-content:center;gap:calc(6px * var(--k));margin:calc(4px * var(--k)) 0} :is(#riftAsk,#fullAsk,#newsAsk) .mktiers span{align-self:center;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo)} :is(#riftAsk,#fullAsk,#newsAsk) .mktiers button{min-width:calc(34px * var(--k));height:calc(28px * var(--k));font:700 calc(12px * var(--k)) var(--f-display);color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo)} :is(#riftAsk,#fullAsk,#newsAsk) .mktiers button.on{color:#1a1004;background:linear-gradient(#f4c27a,#c9802c);border-color:#eea24a} /* the heroes past the free ones (js/story/fullgame.js FULL_SLOTS): kept, under a lock — the row sunk back, a small padlock before the name */ .mm-slots .mm-slot.locked .mm-port{filter:grayscale(1) brightness(.45)!important} .mm-slots .mm-slot.locked .mm-who{opacity:.55} .mm-slots .mm-slot.locked.on .mm-who{opacity:.8} .mm-slots .mm-lock{display:inline-flex;vertical-align:-.12em;width:1em;height:1em;margin-right:.35em} .mm-slots .mm-lock svg{width:100%;height:100%;fill:none;stroke:#eea24a;stroke-width:2;stroke-linejoin:round} .mm-slots .mm-slot.add.locked .mm-addp{opacity:.5} .mtravel .mkbest{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.08em;color:#7ff0e2;margin:calc(4px * var(--k)) 0} .mktiers.step b{min-width:calc(46px * var(--k));text-align:center;font:700 calc(15px * var(--k)) var(--f-display);color:#eea24a;align-self:center} .mktiers.step button[disabled]{opacity:.35} /* the card's button row with the forge's own beside Upgrade: one row, wrapping only if it must */ #icard .btns.egrow{flex-wrap:wrap}#icard .btns.egrow button.pri{flex:1 1 40%} #icard .btns.egrow button.egroll,#icard .btns.egrow button.egtemper,#icard .btns.egrow button.egmirror,#icard .btns.egrow button.egswap,#icard .btns.egrow button.egsockb{flex:1 1 22%;min-width:0;height:calc(26px * var(--k));display:flex;align-items:center;justify-content:center;gap:calc(4px * var(--k));font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);padding:0 calc(6px * var(--k))!important;cursor:pointer} #icard .btns.egrow i{display:flex}#icard .btns.egrow i svg{width:calc(14px * var(--k));height:calc(14px * var(--k));fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} #icard .btns.egrow .egroll{border-color:rgba(179,107,255,.7)}#icard .btns.egrow .egroll i svg{stroke:#c48aff}#icard .btns.egrow .egroll.tear{color:#f0dcff;background:linear-gradient(#4a1f7a,#26103f)} #icard .btns.egrow .egtemper{border-color:rgba(63,230,210,.6)}#icard .btns.egrow .egtemper i svg{stroke:#3fe6d2} #icard .btns.egrow .egmirror{border-color:rgba(232,238,248,.6)}#icard .btns.egrow .egmirror i svg{stroke:#e8eef8} #icard .btns.egrow .egsockb{border-color:rgba(216,168,96,.6)}#icard .btns.egrow b{font-weight:700;color:var(--bone-lo)} #icard .btns.egrow button.dim{opacity:.45} body.touch #icard .eghint{display:none} /* a phone's card: the forge's buttons as their sign and count only (their names did not fit beside Upgrade) */ body.touch #icard .btns.egrow button.egroll span,body.touch #icard .btns.egrow button.egtemper span,body.touch #icard .btns.egrow button.egmirror span,body.touch #icard .btns.egrow button.egswap span,body.touch #icard .btns.egrow button.egsockb span{display:none} body.touch #icard .btns.egrow button.egsockb::before{content:"◆";color:#d8a860;margin-right:3px} body.touch .ip .egwarn{font-size:calc(10px * var(--k));padding:2px 6px} .ip .egsock span{flex:1;min-width:0}.ip .egsock em,.ip .egsock i{flex:none} /* in a run and a boss's hall the foe's bar goes under the dungeon's, as in a passage (the boss's name lay over the run's title) */ body.inmakers #target{top:calc(8px + 60px * var(--k) + env(safe-area-inset-top, 0px))} body.inmakers #target{width:min(calc(470px * var(--k)),62vw)} body.touch.inmakers #target{top:calc(50px + env(safe-area-inset-top, 0px));width:min(250px,34vw)} /* (a phone, 10.10., the user: 62 % of the screen wide and halfway down it — now as wide as the run's bar, right under it) */ #egAltar .egstack em{font-style:normal;margin-left:calc(8px * var(--k));font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.06em;color:#ff9a4a;align-self:center} #egAltar .egchance{margin:calc(2px * var(--k)) 0 0;text-align:center;font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.08em;color:#ff9a4a} /* ---- the altar's question after the user's mock-up (09.10.): wide, the item card's frame, gems top and bottom, the boss on the left ---- */ #egAltar .mm-cbox.egalt{display:grid;grid-template-columns:38% 1fr;width:min(calc(600px * var(--k)),92vw);padding:0;clip-path:none;overflow:visible; border:solid transparent;border-width:18px;border-image:url(../assets/ui/card-frame.webp?v=2) 48 fill / 18px stretch;background:none} #egAltar .egalt::before,#egAltar .egalt::after{content:"";position:absolute;left:50%;width:calc(16px * var(--k));height:calc(16px * var(--k));transform:translateX(-50%) rotate(45deg);z-index:3; background:radial-gradient(circle at 40% 35%,#e8fffb,#3fe6d2 45%,#0d4e49);border:2px solid #c9984e;box-shadow:0 0 12px rgba(63,230,210,.9),0 0 0 2px #2a1c0c} #egAltar .egalt::before{top:calc(-18px - 8px * var(--k))}#egAltar .egalt::after{bottom:calc(-18px - 8px * var(--k))} #egAltar .egart{position:relative;overflow:hidden;margin:-6px 0 -6px -6px;min-height:calc(250px * var(--k))} #egAltar .egart .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:brightness(.5) saturate(.75) contrast(1.05)} #egAltar .egart::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% 72%,rgba(63,230,210,.22),transparent 70%),linear-gradient(90deg,transparent 62%,rgba(10,11,12,.96) 100%),linear-gradient(transparent 70%,rgba(10,11,12,.7))} #egAltar .egart .beast{position:absolute;left:8%;bottom:10%;width:84%;z-index:1;mix-blend-mode:screen;opacity:.92; filter:invert(1) sepia(1) saturate(3.5) hue-rotate(118deg) brightness(1.05) drop-shadow(0 0 calc(6px * var(--k)) rgba(63,230,210,.85))} #egAltar .egbody{position:relative;z-index:2;padding:calc(10px * var(--k)) calc(14px * var(--k)) calc(6px * var(--k));display:flex;flex-direction:column;align-items:center} #egAltar .egbody h3{font-size:calc(15px * var(--k));color:#e8dcc0;margin-bottom:calc(2px * var(--k))} #egAltar .egbody .lead{margin:0 0 calc(4px * var(--k))} #egAltar .egdv{display:block;width:80%;height:calc(10px * var(--k));margin:calc(2px * var(--k)) 0;background:var(--o-div) center/100% 100% no-repeat;opacity:.85} #egAltar .egspl{margin:calc(2px * var(--k)) 0} #egAltar .mm-cbtns{margin-top:auto;width:100%} #egAltar .egbody .how{margin-bottom:calc(8px * var(--k))} body.touch #egAltar .mm-cbox.egalt{width:min(calc(560px * var(--k)),88vw);grid-template-columns:34% 1fr}body.touch #egAltar .egart{min-height:0} body.touch #egAltar .egbody .how{display:none} #egAltar .egart .bg{filter:brightness(.78) saturate(.85) contrast(1.05)} #egAltar .egbody{min-width:0} #egAltar .egbody h3{white-space:normal;letter-spacing:.14em;line-height:1.25;max-width:100%} #egAltar .egbody h3::before,#egAltar .egbody h3::after{flex:none} #egAltar .egbody p{white-space:normal;max-width:100%} /* ---- the ornate frame (EG_FRAME): a thin gold double line, thorn-wing corners, gem crests ---- */ #egAltar .mm-cbox.egalt,:is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{border:none;border-image:none;background:linear-gradient(rgba(16,17,19,.98),rgba(9,10,11,.99)); box-shadow:inset 0 0 0 2px #b8873e,inset 0 0 0 5px #120d08,inset 0 0 0 6px #7a5426,0 0 0 1px #000,0 12px 40px rgba(0,0,0,.75)} .egalt .egcn{position:absolute;width:calc(62px * var(--k));height:calc(74px * var(--k));background:url(../assets/ui/eg-corner.webp) 0 0/100% 100% no-repeat;z-index:4;pointer-events:none} .egalt .egcn.tl{left:calc(-12px * var(--k));top:calc(-12px * var(--k))} .egalt .egcn.tr{right:calc(-12px * var(--k));top:calc(-12px * var(--k));transform:scaleX(-1)} .egalt .egcn.bl{left:calc(-12px * var(--k));bottom:calc(-12px * var(--k));transform:scaleY(-1)} .egalt .egcn.br{right:calc(-12px * var(--k));bottom:calc(-12px * var(--k));transform:scale(-1,-1)} .egalt .egcrest{position:absolute;left:50%;width:calc(190px * var(--k));transform:translateX(-50%);z-index:4;pointer-events:none} .egalt .egcrest.t{top:calc(-25px * var(--k))}.egalt .egcrest.b{bottom:calc(-25px * var(--k));transform:translateX(-50%) scaleY(-1)} #egAltar .egalt::before,#egAltar .egalt::after{display:none} #egAltar .egart{margin:6px 0 6px 6px} .egalt .egdv{display:block;width:78%;height:calc(9px * var(--k));margin:calc(3px * var(--k)) 0;background:url(../assets/ui/eg-divider.webp) center/100% 100% no-repeat;opacity:1} /* the count is the setter: ‹ 30 › big and turquoise, what she carries under it */ #egAltar .egspl{display:flex;align-items:center;gap:calc(8px * var(--k))} #egAltar .egspl button{width:calc(30px * var(--k));height:calc(30px * var(--k));font:700 calc(16px * var(--k)) var(--f-display);color:#7ff6e8;background:linear-gradient(#17191c,#0c0d0f);border:1px solid rgba(63,230,210,.5);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);cursor:pointer} #egAltar .egspl button[disabled]{opacity:.3} #egAltar .egspl b{min-width:calc(46px * var(--k));text-align:center} #egAltar .egcarry{margin:calc(-2px * var(--k)) 0 calc(2px * var(--k));font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} #egAltar .egchance{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--k));width:90%} #egAltar .egchance i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#b8873e);position:relative}#egAltar .egchance i:last-child{background:linear-gradient(90deg,#b8873e,transparent)} #egAltar .egchance i::after{content:"";position:absolute;top:-3px;width:6px;height:6px;transform:rotate(45deg);background:#d8a860}#egAltar .egchance i:first-child::after{right:0}#egAltar .egchance i:last-child::after{left:0} .egalt .egbody h3::before,.egalt .egbody h3::after{display:none} .egalt .egbody{padding-top:calc(24px * var(--k));padding-bottom:calc(20px * var(--k))} .egalt .egbody h3{white-space:nowrap;letter-spacing:.12em;font-size:calc(14px * var(--k))} body.touch .egalt .egbody{padding-top:calc(20px * var(--k));padding-bottom:calc(18px * var(--k))} body.touch .egalt .egcrest{width:calc(150px * var(--k))}body.touch .egalt .egcrest.t{top:calc(-20px * var(--k))}body.touch .egalt .egcrest.b{bottom:calc(-20px * var(--k))} #egAltar .egalt .egcrest{left:69%}body.touch #egAltar .egalt .egcrest{left:67%} #egAltar .egalt .egbody{padding-top:calc(30px * var(--k))}body.touch #egAltar .egalt .egbody{padding-top:calc(24px * var(--k))} /* one column, the dungeon's painting behind it all (the user's: only the picture, not so wide) */ #egAltar .mm-cbox.egalt{display:block;width:min(calc(400px * var(--k)),80vw)} #egAltar .egart{position:absolute;inset:6px;margin:0;min-height:0;z-index:0} #egAltar .egart .bg{filter:brightness(.42) saturate(.8)} #egAltar .egart::after{background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(10,11,12,.35),rgba(10,11,12,.85))} #egAltar .egalt .egcrest,body.touch #egAltar .egalt .egcrest{left:50%} body.touch #egAltar .mm-cbox.egalt{width:min(calc(380px * var(--k)),74vw)} /* the passage's question wears the altar's frame: its rules again for :is(#riftAsk,#fullAsk,#newsAsk) (copied rule by rule) */ :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{display:grid;grid-template-columns:38% 1fr;width:min(calc(600px * var(--k)),92vw);padding:0;clip-path:none;overflow:visible; border:solid transparent;border-width:18px;border-image:url(../assets/ui/card-frame.webp?v=2) 48 fill / 18px stretch;background:none} :is(#riftAsk,#fullAsk,#newsAsk) .egalt::before,:is(#riftAsk,#fullAsk,#newsAsk) .egalt::after{content:"";position:absolute;left:50%;width:calc(16px * var(--k));height:calc(16px * var(--k));transform:translateX(-50%) rotate(45deg);z-index:3; background:radial-gradient(circle at 40% 35%,#e8fffb,#3fe6d2 45%,#0d4e49);border:2px solid #c9984e;box-shadow:0 0 12px rgba(63,230,210,.9),0 0 0 2px #2a1c0c} :is(#riftAsk,#fullAsk,#newsAsk) .egalt::before{top:calc(-18px - 8px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egalt::after{bottom:calc(-18px - 8px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egart{position:relative;overflow:hidden;margin:-6px 0 -6px -6px;min-height:calc(250px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egart .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:brightness(.5) saturate(.75) contrast(1.05)} :is(#riftAsk,#fullAsk,#newsAsk) .egart::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% 72%,rgba(63,230,210,.22),transparent 70%),linear-gradient(90deg,transparent 62%,rgba(10,11,12,.96) 100%),linear-gradient(transparent 70%,rgba(10,11,12,.7))} :is(#riftAsk,#fullAsk,#newsAsk) .egart .beast{position:absolute;left:8%;bottom:10%;width:84%;z-index:1;mix-blend-mode:screen;opacity:.92; filter:invert(1) sepia(1) saturate(3.5) hue-rotate(118deg) brightness(1.05) drop-shadow(0 0 calc(6px * var(--k)) rgba(63,230,210,.85))} :is(#riftAsk,#fullAsk,#newsAsk) .egbody{position:relative;z-index:2;padding:calc(10px * var(--k)) calc(14px * var(--k)) calc(6px * var(--k));display:flex;flex-direction:column;align-items:center} :is(#riftAsk,#fullAsk,#newsAsk) .egbody h3{font-size:calc(15px * var(--k));color:#e8dcc0;margin-bottom:calc(2px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egbody .lead{margin:0 0 calc(4px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egdv{display:block;width:80%;height:calc(10px * var(--k));margin:calc(2px * var(--k)) 0;background:var(--o-div) center/100% 100% no-repeat;opacity:.85} :is(#riftAsk,#fullAsk,#newsAsk) .egspl{margin:calc(2px * var(--k)) 0} :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbtns{margin-top:auto;width:100%} :is(#riftAsk,#fullAsk,#newsAsk) .egbody .how{margin-bottom:calc(8px * var(--k))} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{width:min(calc(560px * var(--k)),88vw);grid-template-columns:34% 1fr} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egart{min-height:0} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egbody .how{display:none} :is(#riftAsk,#fullAsk,#newsAsk) .egart .bg{filter:brightness(.78) saturate(.85) contrast(1.05)} :is(#riftAsk,#fullAsk,#newsAsk) .egbody{min-width:0} :is(#riftAsk,#fullAsk,#newsAsk) .egbody h3{white-space:normal;letter-spacing:.14em;line-height:1.25;max-width:100%} :is(#riftAsk,#fullAsk,#newsAsk) .egbody h3::before,:is(#riftAsk,#fullAsk,#newsAsk) .egbody h3::after{flex:none} :is(#riftAsk,#fullAsk,#newsAsk) .egbody p{white-space:normal;max-width:100%} :is(#riftAsk,#fullAsk,#newsAsk) .egalt::before,:is(#riftAsk,#fullAsk,#newsAsk) .egalt::after{display:none} :is(#riftAsk,#fullAsk,#newsAsk) .egart{margin:6px 0 6px 6px} :is(#riftAsk,#fullAsk,#newsAsk) .egspl{display:flex;align-items:center;gap:calc(8px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egspl button{width:calc(30px * var(--k));height:calc(30px * var(--k));font:700 calc(16px * var(--k)) var(--f-display);color:#7ff6e8;background:linear-gradient(#17191c,#0c0d0f);border:1px solid rgba(63,230,210,.5);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);cursor:pointer} :is(#riftAsk,#fullAsk,#newsAsk) .egspl button[disabled]{opacity:.3} :is(#riftAsk,#fullAsk,#newsAsk) .egspl b{min-width:calc(46px * var(--k));text-align:center} :is(#riftAsk,#fullAsk,#newsAsk) .egcarry{margin:calc(-2px * var(--k)) 0 calc(2px * var(--k));font:italic calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)} :is(#riftAsk,#fullAsk,#newsAsk) .egchance{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--k));width:90%} :is(#riftAsk,#fullAsk,#newsAsk) .egchance i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#b8873e);position:relative} :is(#riftAsk,#fullAsk,#newsAsk) .egchance i:last-child{background:linear-gradient(90deg,#b8873e,transparent)} :is(#riftAsk,#fullAsk,#newsAsk) .egchance i::after{content:"";position:absolute;top:-3px;width:6px;height:6px;transform:rotate(45deg);background:#d8a860} :is(#riftAsk,#fullAsk,#newsAsk) .egchance i:first-child::after{right:0} :is(#riftAsk,#fullAsk,#newsAsk) .egchance i:last-child::after{left:0} :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egcrest{left:69%} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egcrest{left:67%} :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{padding-top:calc(30px * var(--k))} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{padding-top:calc(24px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{display:block;width:min(calc(400px * var(--k)),80vw)} :is(#riftAsk,#fullAsk,#newsAsk) .egart{position:absolute;inset:6px;margin:0;min-height:0;z-index:0} :is(#riftAsk,#fullAsk,#newsAsk) .egart .bg{filter:brightness(.42) saturate(.8)} :is(#riftAsk,#fullAsk,#newsAsk) .egart::after{background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(10,11,12,.35),rgba(10,11,12,.85))} :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egcrest,body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egcrest{left:50%} body.touch :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{width:min(calc(380px * var(--k)),74vw)} #egAltar .egart .bg,:is(#riftAsk,#fullAsk,#newsAsk) .egart .bg{filter:brightness(.62) saturate(.9)} #egAltar .egart::after,:is(#riftAsk,#fullAsk,#newsAsk) .egart::after{background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(10,11,12,.2),rgba(10,11,12,.78))} :is(#riftAsk,#fullAsk,#newsAsk) .egspl.rk i svg{stroke:#c48aff}:is(#riftAsk,#fullAsk,#newsAsk) .egspl.rk b{color:#d2a8ff;text-shadow:0 0 10px rgba(179,107,255,.6)} :is(#riftAsk,#fullAsk,#newsAsk) .egbody .lead{max-width:92%} /* the buttons further off the bottom crest (the user's) */ #egAltar .egalt .egbody,:is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{padding-bottom:calc(34px * var(--k))}body.touch #egAltar .egalt .egbody,body.touch :is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{padding-bottom:calc(28px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .egspl{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--k));margin:calc(4px * var(--k)) 0} :is(#riftAsk,#fullAsk,#newsAsk) .egspl i svg{width:calc(26px * var(--k));height:calc(26px * var(--k));fill:none;stroke:#c48aff;stroke-width:1.8} :is(#riftAsk,#fullAsk,#newsAsk) .egspl b{font:700 calc(22px * var(--k)) var(--f-display);color:#d2a8ff;text-shadow:0 0 10px rgba(179,107,255,.6)}:is(#riftAsk,#fullAsk,#newsAsk) .egspl:not(.ok) b{color:var(--bone-lo);text-shadow:none} :is(#riftAsk,#fullAsk,#newsAsk) .egspl span{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo)} /* the altar's legendaries: the world map card's tiles */ #egAltar .eglegs{display:flex;flex-direction:column;align-items:center;margin:calc(4px * var(--k)) 0} #egAltar .eglegs span{font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo);margin-bottom:calc(3px * var(--k))} #egAltar .eglegs p{display:flex;gap:calc(6px * var(--k));margin:0} #egAltar .eglegs .mlg{position:relative;width:calc(38px * var(--k));height:calc(38px * var(--k));display:flex;align-items:center;justify-content:center;background:rgba(10,11,12,.8);border:1px solid #ff7d1f88;box-shadow:inset 0 0 10px rgba(255,125,31,.25);cursor:pointer} #egAltar .eglegs .mlg img{width:86%;height:86%;object-fit:contain} #egAltar .eglegs .mlg.got::after{content:"✓";position:absolute;right:1px;bottom:-1px;font:700 calc(10px * var(--k)) var(--f-display);color:#7ff6e8} #egAltar .eglegs .mlg.fancy{border-color:#ffb46a;box-shadow:inset 0 0 12px rgba(255,160,60,.45)} #icard.onalt{z-index:99!important} /* the passage's question: only the ornate frame (its copied rules had brought the item card's frame back on top: a double rim) */ :is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{border:none;border-image:none;background:linear-gradient(rgba(16,17,19,.98),rgba(9,10,11,.99));box-shadow:inset 0 0 0 2px #b8873e,inset 0 0 0 5px #120d08,inset 0 0 0 6px #7a5426,0 12px 40px rgba(0,0,0,.75)} #egAltar .mm-cbox.egalt{box-shadow:inset 0 0 0 2px #b8873e,inset 0 0 0 5px #120d08,inset 0 0 0 6px #7a5426,0 12px 40px rgba(0,0,0,.75)} /* ---- the endgame's dialogs always fit the screen (the user's: a phone's browser bars take height) ---- the box never taller than the view less the crests; on a low screen everything closer and the explaining lines left out; past that its column scrolls */ #egAltar .mm-cbox.egalt,:is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{max-height:calc(100dvh - 52px * var(--k));display:flex;flex-direction:column} #egAltar .egalt .egbody,:is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y} #egAltar .egalt .egbody::-webkit-scrollbar,:is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody::-webkit-scrollbar{display:none} @media (max-height:460px){ #egAltar .egalt .egbody,:is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody{padding-top:calc(16px * var(--k))!important;padding-bottom:calc(18px * var(--k))!important} #egAltar .egbody h3,:is(#riftAsk,#fullAsk,#newsAsk) .egbody h3{font-size:calc(12px * var(--k))!important;margin-bottom:0!important} #egAltar .egbody .lead,:is(#riftAsk,#fullAsk,#newsAsk) .egbody .lead{font-size:calc(10px * var(--k));margin-bottom:calc(2px * var(--k))} #egAltar .egbody .how,:is(#riftAsk,#fullAsk,#newsAsk) .egbody .how,:is(#riftAsk,#fullAsk,#newsAsk) .egbody .lead{display:none} #egAltar .egdv,:is(#riftAsk,#fullAsk,#newsAsk) .egdv{margin:calc(1px * var(--k)) 0;height:calc(7px * var(--k))} #egAltar .egspl,:is(#riftAsk,#fullAsk,#newsAsk) .egspl{margin:0!important}#egAltar .egspl b,:is(#riftAsk,#fullAsk,#newsAsk) .egspl b{font-size:calc(18px * var(--k))!important} #egAltar .egspl button{width:calc(26px * var(--k));height:calc(26px * var(--k))} #egAltar .egcarry,:is(#riftAsk,#fullAsk,#newsAsk) .egcarry{margin:0;font-size:calc(10px * var(--k))} #egAltar .mktiers,:is(#riftAsk,#fullAsk,#newsAsk) .mktiers{margin:calc(2px * var(--k)) 0!important}#egAltar .mktiers button,:is(#riftAsk,#fullAsk,#newsAsk) .mktiers button{height:calc(24px * var(--k))!important;min-width:calc(30px * var(--k))!important} #egAltar .eglegs{margin:calc(2px * var(--k)) 0}#egAltar .eglegs span{display:none}#egAltar .eglegs .mlg{width:calc(30px * var(--k));height:calc(30px * var(--k))} #egAltar .egchance{margin:calc(2px * var(--k)) 0!important;font-size:calc(11px * var(--k))!important} #egAltar .mm-cbtns,:is(#riftAsk,#fullAsk,#newsAsk) .mm-cbtns{margin-top:calc(4px * var(--k))!important} .egalt .egcrest{width:calc(120px * var(--k))!important}.egalt .egcrest.t{top:calc(-16px * var(--k))!important}.egalt .egcrest.b{bottom:calc(-16px * var(--k))!important} .egalt .egcn{width:calc(48px * var(--k));height:calc(57px * var(--k))} } /* the buttons never scroll away: held at the foot of the column */ #egAltar .egalt .egbody .mm-cbtns,:is(#riftAsk,#fullAsk,#newsAsk) .egalt .egbody .mm-cbtns{position:sticky;bottom:0;z-index:3;padding-top:calc(6px * var(--k));background:linear-gradient(rgba(12,12,14,0),rgba(12,12,14,.92) 40%)} @media (max-height:340px){ #egAltar .egdv,:is(#riftAsk,#fullAsk,#newsAsk) .egdv,#egAltar .egcarry{display:none} #egAltar .egbody .lead{display:none} } /* the dialogs' buttons: the word in the middle of the plate (it sat at its foot, cut) */ #egAltar .egbody .mm-cbtns button,:is(#riftAsk,#fullAsk,#newsAsk) .egbody .mm-cbtns button{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;padding-top:0!important;padding-bottom:0!important;height:calc(34px * var(--k))} /* the passage's hoard: the altar's legendary tiles, its colours */ :is(#riftAsk,#fullAsk,#newsAsk) .eglegs{display:flex;flex-direction:column;align-items:center;margin:calc(4px * var(--k)) 0} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs span{font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-lo);margin-bottom:calc(3px * var(--k))} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs p{display:flex;gap:calc(6px * var(--k));margin:0} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg{position:relative;width:calc(38px * var(--k));height:calc(38px * var(--k));display:flex;align-items:center;justify-content:center;background:rgba(10,11,12,.8);border:1px solid #b36bff88;box-shadow:inset 0 0 10px rgba(179,107,255,.25)} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg.r-rare{border-color:#f5cf3d88}:is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg.r-magic{border-color:#5b8dff88}:is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg.r-quest{border-color:#3fe6d288} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg img{width:80%;height:80%;object-fit:contain} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg b{position:absolute;right:2px;bottom:0;font:700 calc(9px * var(--k)) var(--f-display);color:var(--bone);text-shadow:0 1px 2px #000,0 0 4px #000} @media (max-height:460px){ :is(#riftAsk,#fullAsk,#newsAsk) .eglegs span{display:none} :is(#riftAsk,#fullAsk,#newsAsk) .eglegs .mlg{width:calc(32px * var(--k));height:calc(32px * var(--k))} } #icard .btns.egrow .egsockb i svg{stroke:#3fe6d2}#icard .btns.egrow .egsockb b .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));margin-right:2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe2a8,#d8a040)} /* ---- the forge card's tools as one row (the user's: five rows hid the stats on a phone): Upgrade wide, the tools small squares with their count ---- */ #icard .btns.egrow{flex-wrap:nowrap!important;gap:calc(4px * var(--k))!important} #icard .btns.egrow button.pri{flex:1 1 auto!important;min-width:0!important} #icard .btns.egrow button.egroll,#icard .btns.egrow button.egtemper,#icard .btns.egrow button.egmirror,#icard .btns.egrow button.egswap,#icard .btns.egrow button.egsockb{flex:0 0 calc(36px * var(--k))!important;width:calc(36px * var(--k))!important;height:calc(36px * var(--k))!important;padding:0!important;position:relative} #icard .btns.egrow button span,#icard .btns.egrow button.egsockb::before{display:none!important} #icard .btns.egrow button i svg{width:calc(18px * var(--k))!important;height:calc(18px * var(--k))!important} #icard .btns.egrow button b{position:absolute;right:calc(3px * var(--k));bottom:calc(1px * var(--k));font:700 calc(9px * var(--k)) var(--f-display);color:var(--bone)!important;text-shadow:0 1px 2px #000} #icard .btns.egrow button.pri{height:calc(36px * var(--k))!important} /* the row: Upgrade a square too, the green arrow of a better find on it (the user's); the row always across, desktop as phone */ #icard .btns.egrow{flex-direction:row!important;justify-content:center!important;align-items:center!important} #icard .btns.egrow button.pri.upbtn{flex:0 0 calc(44px * var(--k))!important;width:calc(44px * var(--k))!important;height:calc(44px * var(--k))!important;padding:0!important;font-size:0!important;letter-spacing:0!important;position:relative} #icard .btns.egrow button.pri.upbtn::before{content:"";position:absolute;inset:22%;background:var(--o-upg) center/contain no-repeat;filter:drop-shadow(0 1px 1px #000)} #icard .btns.egrow button.egroll,#icard .btns.egrow button.egtemper,#icard .btns.egrow button.egmirror,#icard .btns.egrow button.egswap,#icard .btns.egrow button.egsockb{flex:0 0 calc(44px * var(--k))!important;width:calc(44px * var(--k))!important;height:calc(44px * var(--k))!important} #icard .btns.egrow button i svg{width:calc(20px * var(--k))!important;height:calc(20px * var(--k))!important} #icard .btns.egrow button b{font-size:calc(10px * var(--k))} html body #icard#icard .btns.egrow{flex-direction:row!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:calc(6px * var(--k))!important} html body #icard#icard .btns.egrow > button{flex:0 0 calc(44px * var(--k))!important;width:calc(44px * var(--k))!important;min-width:0!important;height:calc(44px * var(--k))!important;padding:0!important} html body #icard#icard .btns.egrow > button.upbtn{color:transparent!important;text-shadow:none!important;overflow:hidden!important;white-space:nowrap!important} /* the squares shrink with the card (desktop's row was wider than its card) */ html body #icard#icard .btns.egrow > button{flex:1 1 0!important;width:auto!important;max-width:calc(44px * var(--k))!important;height:auto!important;aspect-ratio:1/1} /* a phone's forge card: the head small, the comparison box left out, so the affix lines show without scrolling */ body.touch #icard.forgecard .ip2 .ific{width:34px!important;height:34px!important;border-width:4px!important} body.touch #icard.forgecard .ip2 .nm{font-size:calc(12px * var(--k))!important;line-height:1.15!important} body.touch #icard.forgecard .ip2 .bs,body.touch #icard.forgecard .ip2 .orn,body.touch #icard.forgecard .ip2 .delta{display:none!important} body.touch #icard.forgecard .ip2 .sub,body.touch #icard.forgecard .ip2 .ilv{font-size:calc(10px * var(--k))!important;line-height:1.2!important} body.touch #icard.forgecard .ip2 .pw{margin:2px 0!important}body.touch #icard.forgecard .ip2 .pw b{font-size:calc(16px * var(--k))!important}body.touch #icard.forgecard .ip2 .pw span{font-size:calc(9px * var(--k))!important} body.touch #icard.forgecard .uphead{margin-bottom:2px!important;transform:scale(.85)} body.touch #icard.forgecard .ip .egstate{margin:2px 0} body.touch #icard.forgecard .upcost{margin:2px 0!important;font-size:calc(10px * var(--k))!important} /* tighter still (10.10., the user: 'many margins, too big a head, the upgrade row's space above and below, the buttons can shrink'): the rows' gaps, the name and its type and level on one line under it, Power without the second rule under it, the affix lines closer, the squares smaller when the screen is low */ body.touch #icard.forgecard .col{gap:3px!important;padding-top:6px!important;padding-bottom:6px!important} body.touch #icard.forgecard .uphead{margin:0!important;transform:scale(.8);height:calc(11px * var(--k))} body.touch #icard.forgecard .ip2 .ihd{gap:8px!important;align-items:flex-start!important} body.touch #icard.forgecard .ip2 .ific{width:30px!important;height:30px!important;margin-top:2px} body.touch #icard.forgecard .ip2 .ihx{flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline;column-gap:0;row-gap:0!important} body.touch #icard.forgecard .ip2 .nm{flex:1 0 100%;font-size:calc(11px * var(--k))!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} body.touch #icard.forgecard .ip2 .sub,body.touch #icard.forgecard .ip2 .ilv{font-size:calc(9px * var(--k))!important;white-space:nowrap} body.touch #icard.forgecard .ip2 .ilv::before{content:"\00a0·\00a0"} body.touch #icard.forgecard .ip2 .pw{margin:3px 0 0!important;padding-bottom:3px!important} body.touch #icard.forgecard .ip2 .sep2{display:none!important} html body.touch #icard#icard.forgecard .ip2 .ln{font-size:calc(11px * var(--k))!important;line-height:1.3!important} body.touch #icard.forgecard .col .btns.egrow{padding:4px 0 0!important;margin-top:2px!important} @media (max-height:440px){html body.touch #icard#icard.forgecard .btns.egrow > button{max-width:calc(36px * var(--k))!important}} /* the dialogs' paintings without a CSS filter (each filter is one more picture layer for Safari — the 12 mini, 09.10.): darkened by the overlay instead */ #egAltar .egart .bg,:is(#riftAsk,#fullAsk,#newsAsk) .egart .bg{filter:none!important} #egAltar .egart::after,:is(#riftAsk,#fullAsk,#newsAsk) .egart::after{background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(10,11,12,.45),rgba(10,11,12,.86))!important} /* ---- a phone's windows without filter layers (09.10., the iPhone 12 mini died opening the smith): every element with a CSS filter is a picture of its own for Safari, at the screen's density — the bag cells' drop-shadow alone was ~90 MB of the +220 MB spike when the forge opened (tools/perf/peakprobe.mjs). On a phone the shadows are box-shadows (drawn in the same layer) and the dimmed things faded by opacity instead of a grayscale filter ---- */ body.touch :is(#shop,#inv,#icard,#cmp,.mm-confirm) :is(.cell,.eq,button,svg,img,.cat,.cat > *,.box,.sfloat,.ptile *,.pbtn){filter:none!important} body.touch :is(#shop,#inv) .cell,body.touch #shop .sgrid .cell{box-shadow:0 2px 3px rgba(0,0,0,.55)} body.touch :is(#shop,#inv) .cell.sel,body.touch #shop .sdoll .eq.sel{box-shadow:0 0 6px 1px rgba(238,162,74,.55)} body.touch #shop .cat.dim > *,body.touch :is(.lsbtn,.pbtn,#shop .sbtn,#shop .sall).dim{opacity:.55} body.touch :is(.mm-cbtns button,#playBtn,.mm-go,.cclaim,button.fire,.upbtn,.kb-gold,.kb-dark,button.minor){filter:none!important} body.touch .loot-label:not(.focus),body.touch .loot-label .upg-ic{filter:none!important} /* (10.10., the 12 mini under a field of drops: each label's drop-shadow made it a picture of its own at the screen's density — the plate's dark fill carries it; the one under her finger keeps its pulse) */ body.touch .opening *,body.touch .opening *::before,body.touch .opening *::after,body.touch :is(#icard.on .col + .col,#cmp.on .col,#inv .statspane.on .sp){animation:none!important} /* (10.10., measured: a window's parts coming in one by one — the figure, the slots, each of the bag's cells — were each a picture of their own while they moved: the bag's opening peak +143…165 MB, without them +88…106. A phone fades the window in whole) */ /* the side buttons on a phone (10.10., measured: hiding #side took 96 MB of picture surfaces off the GPU process in the city): the menu button's breath was a triple drop-shadow with brightness, animated — a filter redrawn every frame in surfaces of its own, at the screen's density; every button and icon carried a filter besides. Now no filters there; the breath a soft glow behind the button whose opacity alone pulses (the compositor's work) */ body.touch #side .sbtn,body.touch #side .sbtn .art-ic,body.touch #side .sbtn svg{filter:none!important} body.touch #side.fresh .sbtn[data-open="menu"],body.touch #side.claim .sbtn[data-open="menu"]{animation:none!important} body.touch #side.fresh .sbtn[data-open="menu"]::before,body.touch #side.claim .sbtn[data-open="menu"]::before{content:"";position:absolute;inset:-13px;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,200,110,1),rgba(250,175,80,.85) 50%,rgba(238,162,74,.45) 72%,transparent 100%);z-index:-1;pointer-events:none;animation:sideGlow 1.6s ease-in-out infinite} body.touch #side{isolation:isolate} /* (its own stacking: the glow under the button, over what lies behind) */ @keyframes sideGlow{0%,100%{opacity:.5}50%{opacity:1}} body.touch .sbtn .dot{animation-name:nbBreathT!important}@keyframes nbBreathT{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} /* at the forge the base values set apart from the affixes the smith works on (the user tapped one and nothing happened) */ #icard.forgecard .ip .ln.imp{opacity:.62}#icard.forgecard .ip .ln.imp + .ln:not(.imp){margin-top:calc(4px * var(--k))} /* the smith's word over the window's foot when its note line is hidden (the upgrade tab) */ #shfloat{position:fixed;left:50%;bottom:calc(8px * var(--k) + var(--sb, 0px));transform:translateX(-50%);max-width:min(92%, calc(520px * var(--k)));padding:calc(6px * var(--k)) calc(14px * var(--k));background:rgba(12,10,8,.92);border:1px solid rgba(201,162,92,.45);border-radius:calc(4px * var(--k));font:italic calc(12px * var(--k)) var(--f-body);color:#ffdcb4;text-align:center;pointer-events:none;z-index:9500;opacity:0} body.touch #shfloat{left:auto;right:calc(10px + var(--sr, 0px));transform:none;max-width:34vw;text-align:center} /* (a phone: beside the forge card, not over its buttons) */ #shfloat.flash{animation:egfloat 4s ease-out forwards}@keyframes egfloat{0%{opacity:0}6%{opacity:1}80%{opacity:1}100%{opacity:0}} /* a phone draws the vignette in the world's canvas, under the bars and numbers over heads (js/render/hudgl.js): the HTML one, a screen-sized layer, goes */ body.hudgl #vignette{display:none!important} /* the attack button's ring on a phone (10.10.): its slow turn (once in two minutes, endless) kept a picture layer of its own and pulled the touch controls' layers along — 16 MB of surfaces in the GPU process. It stands still; a press still whirls it in and runs the gleam round */ body.touch .tbtn.main::before{animation:none} body.touch .tbtn.main.press::before{animation:tbtnWhirl .6s cubic-bezier(.15,.75,.3,1),ringGlint 1.2s ease-out} /* the smith's work on an item's affixes, always shown (10.10., the user's): rolled with Unwhere Glass violet, tempered with Solder turquoise */ .ip .ln.egr{color:#c89bff!important}.ip .ln.egtp{color:#3fe6d2!important} /* the next glass's chance to shatter the item: hotter from 20 % */ .ip .egwarn.hot{color:#ffd0d0;background:rgba(200,40,60,.2);border-color:rgba(255,90,110,.55)} .ip .egstate .egc b{font:600 calc(11px * var(--k)) var(--f-body);color:#c48aff;margin-left:2px} /* the prism's Swap (10.10.): lilac; the line swapped once marked ⇄ */ #icard .btns.egrow .egswap{border-color:rgba(216,184,255,.7)}#icard .btns.egrow .egswap i svg{stroke:#d8b8ff} .ip .ln .egsw{margin-left:6px;color:#d8b8ff;font-style:normal} /* a pointer label inside a window (the forge's guide): narrow and tall, so it stands beside its target with its arrow to the side (10.10., the user) */ html body #callout.narrow{max-width:min(calc(270px * var(--k,1)),34vw)!important} html body #callout.narrow span{text-wrap:wrap!important} /* (pretty/balance keeps its lines short of the box on purpose: beside the hugging that left a gap on the right) */ /* the pointer label's arrow anywhere on its rim (the user's, 16.10.): placed and turned by placeHint (js/ui/ui.js) to point straight at its target from whichever edge faces it; the label nudges along that line */ html body #callout.pt b{left:var(--ax,0px)!important;top:var(--ay,0px)!important;right:auto!important;bottom:auto!important;margin:0!important;transform:rotate(var(--ar,0deg))!important;transform-origin:50% 50%!important} html body #callout.pt{animation:callin .3s ease-out,nudgeP 1.4s ease-in-out .3s infinite!important} @keyframes nudgeP{50%{transform:translate(var(--nx,0px),var(--ny,0px))}} /* SOCKETS AND JEWELS (js/story/endgame.js, 10.10.): the socket line a button on a pinned card; the jewel view in the compare screen; the bag while a jewel looks for its piece */ #icard .ip .egsock.tap{cursor:pointer;padding:calc(3px * var(--k)) calc(6px * var(--k));border:1px dashed rgba(216,168,96,.55);background:rgba(216,168,96,.07)} #icard .ip .egsock.tap:hover{background:rgba(216,168,96,.16)} .ip .egsock .egsgo{display:none}#icard .ip .egsock .egsgo{display:block;flex:none;margin-left:calc(6px * var(--k));font:700 calc(15px * var(--k))/1 var(--f-display);color:#eea24a} #cmp .ip .egsock .egsgo{display:none} #cmp.jw .jwcol{min-width:min(calc(250px * var(--k)),42vw)} #cmp.jw .jwhd{font:600 calc(12px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin-bottom:calc(6px * var(--k))} #cmp.jw .jwgrid{display:grid;grid-template-columns:repeat(4,calc(50px * var(--k)));gap:calc(6px * var(--k));padding:3px} #cmp.jw .jwgrid .jwt{position:relative;box-sizing:border-box;width:calc(50px * var(--k));height:calc(50px * var(--k));display:flex;align-items:center;justify-content:center;cursor:pointer} #cmp.jw .jwgrid .jwt img{position:relative;z-index:1;max-width:86%;max-height:86%;pointer-events:none} #cmp.jw .jwgrid .jwt .jwglow{position:absolute;inset:0;pointer-events:none} #cmp.jw .jwgrid .jwt b{position:absolute;z-index:2;right:calc(4px * var(--k));bottom:calc(2px * var(--k));font:700 calc(10px * var(--k)) var(--f-display);color:var(--bone);text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none} #cmp.jw .jwgrid .jwt.sel{outline:2px solid #f5d76e;outline-offset:1px;box-shadow:0 0 14px rgba(245,215,110,.7)} #cmp.jw .ip .egsock.jwnew{color:#f5d76e;background:rgba(245,215,110,.1);box-shadow:inset 0 0 0 1px rgba(245,215,110,.6);padding:calc(3px * var(--k)) calc(6px * var(--k))} #cmp.jw .jwinfo{display:flex;align-items:center;gap:calc(6px * var(--k));margin-top:calc(8px * var(--k));font:calc(12px * var(--k)) var(--f-body);color:var(--bone)} #cmp.jw .jwinfo i{flex:none;width:calc(10px * var(--k));height:calc(10px * var(--k));transform:rotate(45deg);background:var(--jc);box-shadow:0 0 8px var(--jc)} #cmp.jw .jwinfo em{margin-left:auto;font-style:normal;color:#c89bff} #cmp.jw .jwinfo.none{color:var(--bone-lo);font-style:italic} #cmp.jw .btns button .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));margin:0 2px 0 4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a0,#c8901c 60%,#6a4a0c);vertical-align:-1px} #cmp.jw .btns button.dim{opacity:.45} #inv.jwmode .cell.jwdim,#inv.jwmode .eq.jwdim{opacity:.28} #inv.jwmode .cell.jwfit,#inv.jwmode .eq.jwfit{box-shadow:0 0 0 2px #eea24a,0 0 14px rgba(238,162,74,.65)!important} #inv.jwmode .cell.jwsel{box-shadow:0 0 0 3px #f5d76e,0 0 16px rgba(245,215,110,.8)!important} #cmp.jw .jwcost{margin-top:calc(5px * var(--k));font:calc(11px * var(--k)) var(--f-body);color:var(--bone-lo)}#cmp.jw .jwcost.bad{color:#e07a64}#cmp.jw .jwcost .gc{display:inline-block;width:calc(10px * var(--k));height:calc(10px * var(--k));margin:0 2px 0 4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a0,#c8901c 60%,#6a4a0c);vertical-align:-1px} #cmp.jw .jwinfo + .jwinfo{margin-top:calc(3px * var(--k))} #cmp.jw .jwcol .scroll{min-height:calc(56px * var(--k))}#cmp.jw .jwinfo small{font-size:inherit;color:var(--bone-lo)}#cmp.jw .jwinfo em{color:var(--bone-lo);font:600 calc(10px * var(--k)) var(--f-display)}#cmp.jw .jwinfo span{color:#c89bff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} html body #cmp#cmp.jw .btns button{font-size:calc(13px * var(--k))!important;letter-spacing:.08em!important} /* ---------- Yusra's window: her three as cards with their drawings (10.10., the user's: no turning model) — the item card's frame, the chosen one lifted and lit ---------- */ html body #shop.pets .pside{flex:1;width:auto!important;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-right:calc(10px * var(--k))} html body #shop.pets .plist{flex:none;display:flex;flex-direction:row;overflow:visible;justify-content:center;align-items:center;gap:0;padding:calc(30px * var(--k)) 0 calc(26px * var(--k))} #shop .pcard{position:relative;flex:0 1 calc(240px * var(--k));min-width:0;height:min(calc(400px * var(--k)),60vh);display:flex;flex-direction:column;align-items:center;gap:calc(3px * var(--k));padding:0 calc(6px * var(--k)) calc(8px * var(--k)); border:solid transparent;border-width:calc(14px * var(--k));border-image:url(../assets/ui/card-frame.webp?v=2) 48 fill / calc(14px * var(--k)) stretch;background:none;outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer; opacity:.86;--r:0deg;transform-origin:50% 115%;transform:rotate(var(--r)) scale(.94);transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .25s ease,filter .25s ease;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))} #shop .pcard:hover{opacity:.92} /* (10.10., the user's: a fan — the three overlap, turned about a point below them, the chosen one lifted to the front) */ #shop .pcard:nth-child(1){--r:-7deg;z-index:1}#shop .pcard:nth-child(2){z-index:2}#shop .pcard:nth-child(3){--r:7deg;z-index:1} #shop .pcard+.pcard{margin-left:calc(-40px * var(--k))} html body #shop.pets .pside{overflow:visible!important} #shop .pcard.on{opacity:1;z-index:3;transform:rotate(var(--r)) translateY(calc(-14px * var(--k))) scale(1.02);filter:drop-shadow(0 0 calc(14px * var(--k)) rgba(238,162,74,.38)) drop-shadow(0 14px 22px rgba(0,0,0,.65))} #shop .pcard.on::after{content:"";position:absolute;left:50%;bottom:calc(-26px * var(--k));width:calc(10px * var(--k));height:calc(10px * var(--k));transform:translateX(-50%) rotate(45deg);background:#eea24a;box-shadow:0 0 10px rgba(238,162,74,.8)} #shop .pcart{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 58%,rgba(238,162,74,.16),transparent 68%)} #shop .pcart img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.12);filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));pointer-events:none} #shop .pcard.new .pcart{filter:grayscale(.7) brightness(.5)}#shop .pcard.quest .pcart{filter:grayscale(.45) brightness(.68)} /* (on the box, not the picture: WebKit dropped the chain on the img) */ #shop .pcard b{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--k));max-width:100%;font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.06em;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #shop .pcard.on b{color:#fff3dc} #shop .pcard small{font:calc(12px * var(--k)) var(--f-body);color:var(--bone-lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #shop .pcard:is(.side,.own) small{color:#eea24a}#shop .pcard.quest small{color:#8fb4ff} #shop .pcard b .pnew{position:absolute;right:calc(10px * var(--k));top:calc(10px * var(--k));width:calc(10px * var(--k));height:calc(10px * var(--k));transform:rotate(45deg);background:#6f9dff;box-shadow:0 0 8px #6f9dff} /* (in the card's corner: beside the name it cut a long one off) */ #shop .pcard .pclv{position:absolute;left:calc(2px * var(--k));top:calc(2px * var(--k));width:calc(30px * var(--k));height:calc(30px * var(--k));display:flex;align-items:center;justify-content:center;border-radius:50%; font:600 calc(13px * var(--k)) var(--f-display);font-style:normal;color:#ffd79a;background:radial-gradient(circle,#2a2218,#100d09 72%);box-shadow:inset 0 0 0 1px rgba(238,162,74,.65),0 0 0 2px rgba(0,0,0,.5)} body.touch #shop.pets .pside{padding-right:6px} body.touch #shop.pets .plist{gap:0;padding:18px 0 16px}body.touch #shop .pcard+.pcard{margin-left:-22px} body.touch #shop .pcard{flex-basis:150px;height:min(236px,60vh);border-width:10px;border-image-width:10px;padding:0 4px 6px} body.touch #shop .pcard b{font-size:12px}body.touch #shop .pcard small{font-size:11px} body.touch #shop .pcard.on::after{bottom:-18px;width:8px;height:8px} body.touch #shop .pcard .pclv{width:24px;height:24px;font-size:11px} /* ---------- the companion's tree as a board (10.10.): moved and zoomed as the Lodestar's chart; a wreath round its medallion ---------- */ #petp .pptree{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none} #petp .pptree>svg.ppsvg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden} #petp .pn .hit{fill:transparent;stroke:none} #petp .vnext{fill:none;stroke:#c8903e;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 6;opacity:.75} #petp .parm text{font:600 13px var(--f-display);letter-spacing:.32em;fill:#c8a060;opacity:.75;text-transform:uppercase} #petp .parm .pmk{fill:#c8a060;opacity:.6} #petp .pmed .mhalo{fill:url(#ppHalo);opacity:.35} #petp .pmed .mrim{fill:url(#ppRim);stroke:#0a0806;stroke-width:1.5} #petp .pmed .mface{fill:url(#ppMed)} #petp .pmed .mrim2{fill:none;stroke:#c8903e;stroke-width:1.2;opacity:.7} #petp .pmed .msign{fill:none;stroke:#eea24a;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(238,162,74,.55))} #petp .ppzoom{position:absolute;left:calc(8px * var(--k));bottom:calc(8px * var(--k));display:flex;flex-direction:column;gap:calc(8px * var(--k));z-index:2} #petp .ppzoom button{width:calc(38px * var(--k));height:calc(38px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0; border:1.5px solid #5a4628;box-shadow:inset 0 0 0 3px #141210,inset 0 0 0 4px #3a2c1a,0 2px 8px rgba(0,0,0,.6);background:radial-gradient(circle at 50% 35%,#2a2620,#0c0b0a)} #petp .ppzoom svg{width:52%;height:52%;fill:none;stroke:#c8a060;stroke-width:1.9;stroke-linecap:round} #petp .ppzoom button:hover{border-color:#c8a060} body.touch #petp .ppzoom button{width:34px;height:34px} #petp .ppcard.empty p.tip{opacity:.75} /* the companion's right column on a phone (10.10.): below the window's title and the ✕, scrolling if a long text needs it; Learn and Reset inside it */ body.touch #petp .ppinfo{justify-content:flex-start;padding-top:calc(46px + var(--st,0px))!important;overflow-y:auto;-webkit-overflow-scrolling:touch} body.touch #petp .ppact.lrn::before,body.touch #petp .ppact.lrn::after{display:none} html body.touch #petp .ppact .pbtn.fire{font-size:12px;letter-spacing:.1em;padding-left:4px;padding-right:4px} html body.touch #petp .ppfoot .ppreset{max-width:100%!important;padding-left:8px!important;padding-right:8px!important} html body.touch #petp .ppfoot .ppreset span{letter-spacing:.04em!important} /* the drawing on the left: whole, ears and all (10.10.: the stage cut its top off) */ #petp .ppstage{overflow:visible} #petp .ppstage img.pport{top:50%;height:82%} /* the fan kept inside its half on a desktop (its turned outer cards reached the frame and the text beside) */ html body:not(.touch) #shop.pets .plist{padding-left:calc(40px * var(--k));padding-right:calc(90px * var(--k))} body:not(.touch) #shop .pcard{flex-basis:calc(200px * var(--k));height:min(calc(350px * var(--k)),54vh)} /* Reset all on a phone: inside the column, on two lines if it must */ html body.touch #petp .ppfoot .ppreset span{font-size:9px!important;white-space:normal!important;text-align:center;line-height:1.3} html body:not(.touch) #shop.pets .pside{padding-right:calc(56px * var(--k))} /* Yusra's fan on a phone (10.10., the user on the 12 mini: the cards too big, the right one into the text): smaller, and room on the right for its turn */ body.touch #shop .pcard{flex:0 1 128px;height:min(210px,56vh)} html body.touch #shop.pets .plist{padding:16px 34px 14px 10px} body.touch #shop .pcard+.pcard{margin-left:-20px} /* ===================================================================== LORE (12.10.) — under the quest tracker. The toast of something new written is the pointer label itself (its plate, its pennant, its framed gold button, here with a play mark); the player while it is read is a second quest tracker (the same leaf torn at the right, gold caps over bone words) with the framed buttons and a bar like an event's ===================================================================== */ #lore{position:fixed;z-index:22;left:calc(16px + var(--sl));top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:calc(8px * var(--k));pointer-events:none;max-width:min(360px,36vw)} #lore [hidden]{display:none!important} #lore .lb{flex:none;padding:0;border:0;cursor:pointer;width:calc(28px * var(--k));height:calc(28px * var(--k));background:center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))} #lore .lb.is-play{background-image:url(../assets/ui/label-play.webp?v=1)} #lore .lb.is-pause{background-image:url(../assets/ui/label-pause.webp?v=1)} #lore .lb.lst{background-image:url(../assets/ui/label-stop.webp?v=1);width:calc(22px * var(--k));height:calc(22px * var(--k));opacity:.85} /* the player: #quest's leaf and type */ #lore .lp{pointer-events:auto;padding:4px 18px 5px 8px;margin-left:-8px;background:linear-gradient(90deg,rgba(10,11,12,.5),rgba(10,11,12,.32) 45%,rgba(10,11,12,0) 80%);-webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;text-shadow:0 1px 2px #000,0 0 8px #000;min-width:calc(170px * var(--k))} #lore .lp .qt{font:600 calc(9px * var(--k))/1.2 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#eea24a;display:flex;align-items:center;gap:8px;cursor:pointer} #lore .lp .qt::before{content:"";width:7px;height:7px;background:#eea24a;transform:rotate(45deg);flex:none} #lore .lwave{width:calc(54px * var(--k));height:calc(14px * var(--k));margin-left:4px;flex:none} #lore .lp .qo{margin:2px 0 0 15px;font:calc(11px * var(--k))/1.25 var(--f-body);color:var(--bone);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(260px,28vw)} #lore .lrow{display:flex;align-items:center;gap:calc(6px * var(--k));margin:calc(5px * var(--k)) 0 2px 15px} #lore .lbar{display:block;flex:1;min-width:calc(70px * var(--k));max-width:calc(150px * var(--k));height:7px;margin-left:calc(3px * var(--k));background:rgba(14,10,4,.6);border:1px solid rgba(238,162,74,.5);box-shadow:0 0 6px rgba(238,162,74,.2)} #lore .lbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5a1f,#eea24a);transition:width .25s linear} /* the toast: the pointer label (html body #callout), top middle (over the joystick on a phone it took her taps) */ #lore .lt{pointer-events:auto;cursor:pointer;position:fixed;left:50%;top:calc(12px + var(--st));transform:translateX(-50%);display:flex;align-items:center;gap:9px;border:solid transparent;border-width:calc(8px * var(--k));border-image:url(../assets/ui/label-plate2.webp?v=1) 34 fill / calc(8px * var(--k)) stretch; padding:0 0 0 calc(17px * var(--k));gap:calc(8px * var(--k));color:#efe4cc;text-shadow:0 1px 2px #000;filter:drop-shadow(0 0 8px rgba(238,162,74,.28)) drop-shadow(0 4px 8px rgba(0,0,0,.6));animation:loreIn .35s ease-out} #lore .lt::before{content:"";position:absolute;left:calc(-22px * var(--k));top:50%;z-index:1;width:calc(32px * var(--k));height:calc(32px * var(--k));transform:translateY(-50%) rotate(-6deg);background:url(../assets/ui/lore-canon.webp?v=1) center/contain no-repeat;pointer-events:none;filter:brightness(1.45) saturate(1.1) drop-shadow(0 0 5px rgba(238,162,74,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.9))} #lore .lt[data-k="b"]::before{background-image:url(../assets/ui/lore-bestiary.webp?v=1)} /* (a book for the pennant: the Canon's bronze-bound one, the Bestiary's in thorns — the user, 12.10.) */ #lore .lt .lx{min-width:0;flex:1;display:flex;flex-direction:row;align-items:baseline;gap:calc(8px * var(--k))} #lore .lt .lh{font:600 calc(9px * var(--k))/1.2 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#eea24a;white-space:nowrap} #lore .lt .ln{font:calc(11px * var(--k))/1.25 var(--f-body);color:#efe4cc;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #lore .lt .lb{margin:0 calc(1px * var(--k)) 0 auto;width:calc(20px * var(--k));height:calc(20px * var(--k));min-width:0;min-height:0} @keyframes loreIn{from{opacity:0;transform:translate(-50%,-12px)}} body.cine #lore,body.menu #lore{visibility:hidden} /* the books: play by a written page's title */ .bk-in .bk-play{display:flex;margin:-.15em auto .5em;width:max(3.4cqi,26px);height:max(3.4cqi,26px);border-radius:50%;border:1.5px solid var(--accent);background:transparent;color:var(--accent);padding:0;place-items:center;justify-content:center;align-items:center;cursor:pointer} .bk-in .bk-play svg{width:50%;height:50%;fill:currentColor} /* the full game's window (js/story/fullgame.js, 13.10.): the rift gate's question in the altar's frame (its rules above serve both), what the full game brings as a list of gems */ #fullAsk .fullli{list-style:none;margin:calc(4px * var(--k)) 0;padding:0;display:flex;flex-direction:column;gap:calc(5px * var(--k));text-align:left;max-width:92%} #fullAsk .fullli li{display:flex;align-items:center;gap:calc(8px * var(--k));font:calc(11.5px * var(--k))/1.35 var(--f-body);color:var(--bone)} #fullAsk .fullli i{flex:none;width:calc(8px * var(--k));height:calc(8px * var(--k));transform:rotate(45deg);background:linear-gradient(135deg,#e0c0ff,#7a2ac8);box-shadow:0 0 8px rgba(179,107,255,.7)} #fullAsk .mm-cbtns{flex-wrap:wrap;gap:calc(8px * var(--k))}#fullAsk .mm-cbtns button{min-width:0} #fullAsk .mm-cbtns button.pri{flex:1 1 100%;order:-1} #fullAsk.busy .mm-cbtns button{opacity:.5;pointer-events:none} /* the window's slides (18.10., js/story/fullgame.js FULL_SLIDES): the picture beside the words, a tile or two, the materials, the dots */ #fullAsk .mm-cbox.egalt.fullsl{display:grid;grid-template-columns:44% 1fr;width:min(calc(660px * var(--k)),92vw)} body.touch #fullAsk .mm-cbox.egalt.fullsl{width:min(calc(620px * var(--k)),94vw);grid-template-columns:43% 1fr} #fullAsk .fullsl .egart{position:relative;inset:auto;margin:6px 0 6px 6px;min-height:calc(240px * var(--k));overflow:hidden;z-index:1} #fullAsk .fullsl .egart .bg{filter:brightness(.95) saturate(1) contrast(1.04);object-position:50% 50%;animation:fsIn .35s ease} #fullAsk .fullsl .egart::after{background:linear-gradient(90deg,transparent 72%,rgba(10,11,12,.9) 100%),linear-gradient(transparent 82%,rgba(10,11,12,.5))} @keyframes fsIn{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:none}} #fullAsk .fullsl .egbody{align-items:stretch;padding-left:calc(12px * var(--k));padding-right:calc(16px * var(--k))} #fullAsk .fullsl .egbody h3,#fullAsk .fullsl .egbody .lead,#fullAsk .fullsl .egdv,#fullAsk .fullsl .egcarry{align-self:center;text-align:center} #fullAsk .fslide{min-height:calc(118px * var(--k));text-align:left;animation:fsIn .35s ease} #fullAsk .fsn{display:block;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.16em;color:#c48aff;opacity:.85} #fullAsk .fslide h4{margin:calc(1px * var(--k)) 0 calc(4px * var(--k));font:700 calc(14px * var(--k))/1.2 var(--f-display);letter-spacing:.05em;color:#f0d9a8} #fullAsk .fslide p{margin:0;font:calc(11.5px * var(--k))/1.42 var(--f-body);color:var(--bone)} #fullAsk .fschips{display:flex;flex-wrap:wrap;gap:calc(5px * var(--k));margin-top:calc(7px * var(--k))} #fullAsk .fschips span{display:flex;align-items:baseline;gap:.35em;padding:calc(3px * var(--k)) calc(8px * var(--k));border:1px solid rgba(196,138,255,.55);border-radius:3px;background:rgba(122,42,200,.16);font:600 calc(10.5px * var(--k)) var(--f-display);letter-spacing:.04em;color:#e8dcc0} #fullAsk .fschips b{font-size:calc(14px * var(--k));color:#e0c0ff;text-shadow:0 0 8px rgba(179,107,255,.6)} #fullAsk .fslegs{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:calc(5px * var(--k)) calc(8px * var(--k));margin-top:calc(6px * var(--k))} #fullAsk .fslegs .mlg{position:relative;display:grid;place-items:center;width:calc(40px * var(--k));height:calc(40px * var(--k));border:1px solid #ffb055;border-radius:3px;background:radial-gradient(circle at 50% 40%,rgba(255,140,40,.3),rgba(20,12,6,.92));box-shadow:inset 0 0 calc(12px * var(--k)) rgba(255,150,50,.5),0 0 calc(9px * var(--k)) rgba(255,140,40,.45);cursor:pointer;overflow:hidden} #fullAsk .fslegs .mlg img{max-width:82%;max-height:82%;pointer-events:none} #fullAsk .fslegs span{font:600 calc(11.5px * var(--k))/1.2 var(--f-display);letter-spacing:.03em;color:#ffb055} #fullAsk .fsmats{list-style:none;margin:calc(5px * var(--k)) 0 0;padding:0;display:grid;gap:calc(3px * var(--k))} #fullAsk .fsmats li{display:flex;align-items:center;gap:calc(7px * var(--k));font:calc(11px * var(--k))/1.3 var(--f-body);color:var(--bone)} #fullAsk .fsmats i{flex:none;display:grid;place-items:center;width:calc(18px * var(--k));height:calc(18px * var(--k))}#fullAsk .fsmats i svg{width:100%;height:100%} #fullAsk .fsnav{display:flex;align-items:center;justify-content:center;gap:calc(7px * var(--k));margin:auto 0 calc(2px * var(--k));padding-top:calc(8px * var(--k))} /* (margin-top auto: the dots, the line and the buttons at the column's foot on every slide) */ #fullAsk .fsnav .arr{display:grid;place-items:center;width:calc(26px * var(--k));height:calc(26px * var(--k));padding:0;font:700 calc(16px * var(--k))/1 var(--f-display);color:var(--bone);background:linear-gradient(#17191c,#0c0d0f);border:1px solid var(--bronze-lo);border-radius:50%;cursor:pointer} #fullAsk .fsnav .dot{width:calc(8px * var(--k));height:calc(8px * var(--k));min-width:0;padding:0;border:none;border-radius:50%;background:rgba(240,217,168,.25);cursor:pointer} #fullAsk .fsnav .dot.on{background:#c48aff;box-shadow:0 0 8px rgba(179,107,255,.8)} /* 18.10., later (the user's mock-up beside ours: "mehr Schnörkel über den ganzen Rand … innen drinnen total slop"): a frame of blackened iron with thorn filigree all round (assets/ui/full/full-frame.webp, a 9-slice: its corners kept, the thorn tile repeated along the edges; the generated frame's violet gems on top and bottom, full-gem-*.webp), the picture framed in gold with a gilt rule beside it, the slide's title gold between two flourishes, the legendaries in ornate tiles, gold rings for the arrows, the buttons the game's ornate gold plate (gold-button.webp; Later the same plate in dark iron) */ #fullAsk .mm-cbox.egalt.fullsl{border-style:solid;border-width:calc(24px * var(--k)) calc(33px * var(--k)) calc(25px * var(--k));border-image:url(../assets/ui/full/full-frame.webp) 108 150 115 150 / calc(24px * var(--k)) calc(33px * var(--k)) calc(25px * var(--k)) / calc(9px * var(--k)) round; background:radial-gradient(ellipse 90% 80% at 60% 40%,#17151a,#0b0b0d 75%) padding-box;box-shadow:none;filter:drop-shadow(0 calc(8px * var(--k)) calc(18px * var(--k)) rgba(0,0,0,.8));overflow:visible;clip-path:none} /* (the ground only inside the frame: its thorns stand out against the world) */ #fullAsk .fullsl .egcn,#fullAsk .fullsl .egcrest{display:none}#fullAsk .fullsl.egalt::before,#fullAsk .fullsl.egalt::after{display:none} #fullAsk .fsgem{position:absolute;left:50%;width:calc(58px * var(--k));height:calc(58px * var(--k));transform:translateX(-50%);z-index:6;pointer-events:none;background:center/contain no-repeat} #fullAsk .fsgem.t,#fullAsk .fsgem.b{background-image:url(../assets/ui/full/full-gem.webp)} /* (one free-standing crest, 18.10.: the gems cut out of the frame's picture showed their square edge) */ #fullAsk .fullsl .egart{margin:calc(4px * var(--k)) 0 calc(4px * var(--k)) calc(4px * var(--k))!important;border:1px solid rgba(201,163,106,.55);box-shadow:inset 0 0 calc(30px * var(--k)) rgba(0,0,0,.85),0 0 0 calc(3px * var(--k)) rgba(10,10,12,.9),0 0 0 calc(4px * var(--k)) rgba(201,163,106,.25)} #fullAsk .fullsl .egart::after{background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 55%,rgba(8,8,10,.75) 100%)!important} #fullAsk .fullsl .egbody{border-left:1px solid transparent;border-image:linear-gradient(transparent,rgba(201,163,106,.7) 20%,rgba(201,163,106,.7) 80%,transparent) 1;margin-left:calc(10px * var(--k))} #fullAsk .fullsl .egbody h3{letter-spacing:.24em;color:#d8ccb0;font-size:calc(13px * var(--k))} #fullAsk .fslide h4{display:flex;flex-direction:column;align-items:center;gap:calc(2px * var(--k));text-align:center;margin:calc(2px * var(--k)) 0 calc(6px * var(--k))} #fullAsk .fslide h4 span{font:700 calc(15px * var(--k))/1.2 var(--f-display);letter-spacing:.06em;background:linear-gradient(#ffe8b0,#e0a54a 55%,#b9772a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))} #fullAsk .fsdv{display:block;width:62%;height:calc(9px * var(--k));background:url(../assets/ui/eg-divider.webp) center/100% 100% no-repeat;opacity:.9} #fullAsk .fslegs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:calc(8px * var(--k)) calc(12px * var(--k))!important} #fullAsk .fsleg{display:flex;align-items:center;gap:calc(9px * var(--k));min-width:0} #fullAsk .fsleg .mlg{flex:none;width:calc(46px * var(--k))!important;height:calc(46px * var(--k))!important;border:none!important;border-radius:0!important;background:url(../assets/ui/icon-frame.webp) center/100% 100% no-repeat,radial-gradient(circle,rgba(255,140,40,.35),rgba(30,16,6,.95) 70%)!important;box-shadow:0 0 calc(10px * var(--k)) rgba(255,140,40,.45)!important} #fullAsk .fsleg .mlg img{max-width:66%!important;max-height:66%!important} #fullAsk .fsleg span{font:700 calc(11.5px * var(--k))/1.2 var(--f-display)!important;letter-spacing:.05em;color:#ffbf66!important;text-shadow:0 0 6px rgba(255,140,40,.35)} #fullAsk .fsnav .arr{border:calc(2px * var(--k)) solid #b9893f!important;background:radial-gradient(circle at 50% 35%,#2a2218,#0c0b0a 70%)!important;color:#f0c27a!important;box-shadow:0 0 0 1px rgba(0,0,0,.8),inset 0 0 calc(6px * var(--k)) rgba(255,190,100,.25)} #fullAsk .fullsl .mm-cbtns button{background:url(../assets/ui/gold-button.webp) center/100% 100% no-repeat!important;border:none!important;clip-path:none!important;box-shadow:none!important;color:#2a1706!important;text-shadow:0 1px 0 rgba(255,230,170,.45);height:calc(40px * var(--k));padding:0 calc(18px * var(--k))!important;font-weight:700} #fullAsk .fullsl .mm-cbtns button:not(.pri){filter:grayscale(1) brightness(.42) contrast(1.15);color:#fff!important;text-shadow:0 1px 1px #000} /* (the gold plate in dark iron: its words light again under the filter) */ #fullAsk .mm-cbox.fullsl .egbody .mm-cbtns{position:relative;bottom:auto;background:none} /* the desktop (18.10., the user's screenshot: the card had taken the phone's full height, its title cut, Later wrapped below): its own size, the same inner layout as the phone's */ body:not(.touch) #fullAsk .mm-cbox.egalt.fullsl{width:min(calc(700px * var(--k)),88vw)!important;height:min(calc(440px * var(--k)),84vh)!important;max-height:84vh!important;grid-template-columns:42% 1fr} body:not(.touch) #fullAsk .mm-cbox.fullsl .egbody{padding:calc(26px * var(--k)) calc(14px * var(--k)) calc(24px * var(--k)) calc(18px * var(--k))!important} #fullAsk .fsn{display:none!important} body:not(.touch) #fullAsk .fullsl .egbody .lead{display:block!important;margin:calc(2px * var(--k)) 0 0!important;font:italic calc(11px * var(--k)) var(--f-body);color:#a9c9c4;text-align:center} /* (the teaser of what was reached: the desktop's, the user's texts) */ #fullAsk .fullsl .mm-cbtns{flex-wrap:nowrap!important;gap:calc(8px * var(--k))!important} #fullAsk .fullsl .mm-cbtns button{flex:1 1 0!important;min-width:0} #fullAsk .fullsl .mm-cbtns button.pri{flex:3 1 0!important;order:-1;letter-spacing:.04em!important;font-size:calc(10.5px * var(--k))!important;padding:0 calc(10px * var(--k))!important;text-overflow:clip!important} /* 18.10., later still (the user: "die Schnörkel sollen die inneren Elemente überlagern … mach sie türkis, die zweite Farbe des Spiels … der Text zentriert … die Links-Rechts-Knöpfe und die lila Anzeigen gefallen mir nicht"): the frame drawn OVER the card (its thorns reach in over the picture's and the column's edges), in the game's turquoise; the gems turquoise; the words centred; the arrows bare chevrons; the dots small diamonds; the numbers without pills */ #fullAsk .mm-cbox.egalt.fullsl{border-image:none!important;border-color:transparent!important;border-width:calc(12px * var(--k))!important;background:radial-gradient(ellipse 90% 80% at 60% 40%,#121819,#090b0c 75%) padding-box!important} /* (its ground inside the frame only) */ #fullAsk .fsframe{position:absolute;inset:calc(-41px * var(--k)) calc(-54px * var(--k));z-index:7;pointer-events:none;border-style:solid;border-width:calc(49px * var(--k)) calc(60px * var(--k));border-image:url(../assets/ui/full/full-frame.webp) 108 150 115 150 / calc(49px * var(--k)) calc(60px * var(--k)) / 0 round; /* (sized so its iron band runs from the card's edge 6 px over its inside, the thorns outside: measured on the picture's slices) */ filter:sepia(1) saturate(2.6) hue-rotate(128deg) brightness(.95) contrast(1.1) drop-shadow(0 0 calc(5px * var(--k)) rgba(63,230,210,.35))} #fullAsk .fsgem{z-index:8;filter:drop-shadow(0 0 calc(7px * var(--k)) rgba(63,230,210,.55)) drop-shadow(0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(0,0,0,.8))} #fullAsk .fsgem.t{top:calc(-36px * var(--k))!important}#fullAsk .fsgem.b{bottom:calc(-40px * var(--k))!important} /* (its middle on the frame's band: it reaches over the panel below and the thorns above) */ #fullAsk .fullsl .egart{border-color:rgba(63,230,210,.45)!important;box-shadow:inset 0 0 calc(30px * var(--k)) rgba(0,0,0,.85)!important;margin:0!important} #fullAsk .fullsl .egbody{border-image:linear-gradient(transparent,rgba(63,230,210,.55) 20%,rgba(63,230,210,.55) 80%,transparent) 1!important;align-items:center!important;text-align:center} #fullAsk .fslide,#fullAsk .fslide p{text-align:center!important} #fullAsk .fullsl .fslide{display:flex;flex-direction:column;justify-content:center;align-items:center} #fullAsk .fslide>p{max-width:94%} /* (the slide's words in the middle of their space, both ways — the user, 18.10.) */ #fullAsk .fsleg{justify-content:center} #fullAsk .fslegs{justify-items:center} #fullAsk .fsmats{justify-items:center} #fullAsk .fsmats li{justify-content:center} #fullAsk .fsstats{display:flex;align-items:center;justify-content:center;gap:calc(10px * var(--k));margin-top:calc(8px * var(--k))} #fullAsk .fsstats span{display:flex;flex-direction:column;align-items:center;gap:calc(1px * var(--k))} #fullAsk .fsstats b{font:700 calc(20px * var(--k))/1 var(--f-display);background:linear-gradient(#ffe8b0,#e0a54a 60%,#b9772a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))} #fullAsk .fsstats em{font:600 calc(8.5px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#a9c9c4} #fullAsk .fsstats>i{width:1px;height:calc(26px * var(--k));background:linear-gradient(transparent,rgba(63,230,210,.6),transparent)} #fullAsk .fsnav .arr{width:calc(24px * var(--k))!important;height:calc(24px * var(--k))!important;border:none!important;border-radius:0!important;background:none!important;box-shadow:none!important;position:relative} #fullAsk .fsnav .arr::before{content:"";position:absolute;inset:calc(6px * var(--k)) calc(8px * var(--k));border:solid #e8c27a;border-width:0 0 calc(2px * var(--k)) calc(2px * var(--k));transform:rotate(45deg);filter:drop-shadow(0 0 3px rgba(232,194,122,.5))} #fullAsk .fsnav .arr[data-a="next"]::before{transform:rotate(-135deg)} #fullAsk .fsnav .dot{width:calc(7px * var(--k))!important;height:calc(7px * var(--k))!important;border-radius:0!important;transform:rotate(45deg);background:rgba(169,201,196,.28)!important;box-shadow:none!important} #fullAsk .fsnav .dot.on{background:#3fe6d2!important;box-shadow:0 0 8px rgba(63,230,210,.8)!important} /* the user's texts (18.10. evening): an eyebrow over each title, the buy line in two voices, Restore under the buttons */ #fullAsk .fseye{display:block;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#3fe6d2;opacity:.85;margin-bottom:calc(2px * var(--k))} #fullAsk .fslcap{margin:calc(5px * var(--k)) 0 0!important;font:600 calc(8.5px * var(--k)) var(--f-display)!important;letter-spacing:.14em;text-transform:uppercase;color:#a9c9c4!important} #fullAsk .fsmats{grid-template-columns:1fr 1fr;column-gap:calc(10px * var(--k))!important;row-gap:calc(3px * var(--k))!important;text-align:left} #fullAsk .fsmats li{justify-content:flex-start!important;align-items:flex-start!important;text-align:left} #fullAsk .fsmats li span{display:flex;flex-direction:column;line-height:1.15}#fullAsk .fsmats li b{font:700 calc(10px * var(--k)) var(--f-display);letter-spacing:.04em;color:#f0d9a8} #fullAsk .fsmats li:last-child{grid-column:1 / -1;justify-self:center} #fullAsk .fsbuy{margin:calc(4px * var(--k)) 0 calc(5px * var(--k));display:flex;flex-direction:column;align-items:center;gap:calc(1px * var(--k))} #fullAsk .fsbuy b{font:700 calc(11px * var(--k)) var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#f0d9a8} #fullAsk .fsbuy span{font:italic calc(9.5px * var(--k)) var(--f-body);color:#a9c9c4} #fullAsk .fsrestl{margin:calc(4px * var(--k)) 0 0;font:italic calc(9.5px * var(--k)) var(--f-body);color:#a99a80;text-align:center} #fullAsk .fsrestp{display:none;font-style:normal} /* 18.10., the user: the materials one under another, the slide's words scrolling in a roomier space */ #fullAsk .fullsl .fslide{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;justify-content:safe center!important;padding:0 calc(4px * var(--k))}#fullAsk .fullsl .fslide::-webkit-scrollbar{display:none} #fullAsk .fsmats{grid-template-columns:1fr!important;row-gap:calc(5px * var(--k))!important;width:max-content;max-width:100%;margin:calc(6px * var(--k)) auto 0!important} #fullAsk .fsmats li:last-child{grid-column:auto!important;justify-self:stretch!important} #fullAsk .fsmats li{display:grid!important;grid-template-columns:calc(18px * var(--k)) 1fr;column-gap:calc(8px * var(--k));justify-content:start!important;text-align:left!important} #fullAsk .fsmats li i{justify-self:center;margin-top:calc(2px * var(--k))} /* (icons in one column, the words flush beside them) */ #fullAsk .fullsl .fslide{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);padding-bottom:calc(14px * var(--k))} /* (it fades out at its foot: there is more below) */ @media (max-height:460px){ #fullAsk .fsnav{padding-top:calc(1px * var(--k))!important;margin-bottom:calc(-2px * var(--k))!important} #fullAsk .fsbuy{margin:0 0 calc(3px * var(--k))!important} #fullAsk .fslide h4 span{font-size:calc(12px * var(--k))!important} #fullAsk .fullsl .egbody h3{margin-bottom:0!important} } #fullAsk .fsmats li span{font-size:calc(10px * var(--k))!important;line-height:1.2!important}#fullAsk .fsmats li b{font-size:calc(10.5px * var(--k))!important}#fullAsk .fsmats i{width:calc(16px * var(--k))!important;height:calc(16px * var(--k))!important} @media (max-height:460px){ #fullAsk .fsrestp{display:inline} #fullAsk .fullsl .mm-cbtns button.pri{font-size:calc(9.8px * var(--k))!important;letter-spacing:.03em!important;padding:0 calc(6px * var(--k))!important} #fullAsk .fullsl .mm-cbtns button:not(.pri){flex:0.9 1 0!important} #fullAsk .fsmats li span{font-size:calc(8.8px * var(--k))!important;line-height:1.1} #fullAsk .fsmats li b{font-size:calc(9.2px * var(--k))!important} #fullAsk .fsmats{row-gap:calc(1px * var(--k))!important;margin-top:calc(1px * var(--k))!important} #fullAsk .fsmats i{width:calc(13px * var(--k))!important;height:calc(13px * var(--k))!important} #fullAsk .fsrestl{display:none!important} #fullAsk .fseye{display:none!important} #fullAsk .fsstats{margin-top:calc(4px * var(--k))} #fullAsk .fsstats b{font-size:calc(17px * var(--k))} #fullAsk .fslegs{margin-top:calc(3px * var(--k))!important} #fullAsk .fslcap{display:none} #fullAsk .fsbuy{margin:calc(2px * var(--k)) 0 calc(4px * var(--k))} #fullAsk .fsbuy b{display:none} #fullAsk .fsrestl{margin-top:calc(2px * var(--k))} #fullAsk .fseye{font-size:calc(8px * var(--k))} } body.touch #fullAsk .mm-cbox.fullsl .egbody,#fullAsk .mm-cbox.fullsl .egbody{padding:calc(4px * var(--k)) calc(6px * var(--k)) calc(4px * var(--k)) calc(14px * var(--k))!important} #fullAsk .fullsl .fslide{flex:1 1 0;min-height:0!important;overflow:hidden} #fullAsk .fslide h4 .fsdv:first-child{display:none} #fullAsk .fullsl .egbody h3{margin-bottom:calc(2px * var(--k))!important} #fullAsk .fslide h4{margin-bottom:calc(3px * var(--k))!important} #fullAsk .fsmats{gap:0!important;margin-top:calc(2px * var(--k))!important} #fullAsk .fsmats li{line-height:1.18!important} #fullAsk .fsmats i{width:calc(15px * var(--k))!important;height:calc(15px * var(--k))!important} #fullAsk .mm-cbox.egalt.fullsl{border-image-width:calc(46px * var(--k)) calc(52px * var(--k));border-image-outset:calc(15px * var(--k)) calc(18px * var(--k));height:calc(100vh - 56px);max-height:calc(100vh - 56px)} /* (the thorns larger, out past the box: they read as the frame's filigree) */ body.touch #fullAsk .mm-cbox.egalt.fullsl{grid-template-columns:38% 1fr} @media (max-height:460px){ #fullAsk .fslide p{font-size:calc(9.8px * var(--k))!important;line-height:1.32!important} #fullAsk .fschips span{padding:calc(2px * var(--k)) calc(6px * var(--k));font-size:calc(9.5px * var(--k))} #fullAsk .fschips b{font-size:calc(12px * var(--k))} #fullAsk .fschips{gap:calc(4px * var(--k));margin-top:calc(4px * var(--k))} #fullAsk .fsmats li{font-size:calc(9.6px * var(--k))!important} #fullAsk .fullsl .egcarry{font-size:calc(9px * var(--k))!important} #fullAsk .fsnav{padding-top:calc(3px * var(--k))} } #fullAsk .fullsl .egbody h3{margin:0!important} @media (max-height:460px){ #fullAsk .fslide h4{margin:0 0 calc(3px * var(--k))} #fullAsk .fslide h4 span{font-size:calc(13px * var(--k))} #fullAsk .fslide h4 .fsdv:first-child{display:none} #fullAsk .fsdv{height:calc(7px * var(--k))} #fullAsk .fsleg .mlg{width:calc(36px * var(--k))!important;height:calc(36px * var(--k))!important} #fullAsk .fsleg span{font-size:calc(10px * var(--k))!important} #fullAsk .fullsl .mm-cbtns button{height:calc(32px * var(--k))} #fullAsk .fullsl .egbody h3{font-size:calc(11px * var(--k))!important} } #fullAsk .mm-cbox.fullsl .egbody{overflow:visible;max-height:none} /* (nothing scrolls on a slide: the buttons not stuck to the column's foot, so its padding keeps them above the crest) */ #fullAsk .fullsl .egcrest,body.touch #fullAsk .fullsl .egcrest{left:71.5%} /* (the crests over the words' column: at the card's middle the bottom one sat on the Unlock button) */ #fullAsk .fsrest{display:inline;padding:0;margin:0;min-width:0;height:auto;border:none;background:none;font:italic calc(11px * var(--k)) var(--f-body);color:#c9a36a;text-decoration:underline;text-underline-offset:2px;cursor:pointer} @media (max-height:460px){ #fullAsk .fullsl .egbody{padding-top:calc(16px * var(--k));padding-bottom:calc(22px * var(--k))} #fullAsk .fslide{min-height:calc(96px * var(--k))} #fullAsk .fslide h4{font-size:calc(13px * var(--k))} #fullAsk .fslide p{font-size:calc(10.5px * var(--k));line-height:1.36} #fullAsk .fsmats li{font-size:calc(10px * var(--k))} #fullAsk .fullsl .lead{display:none} #fullAsk .fslegs .mlg{width:calc(32px * var(--k));height:calc(32px * var(--k))} #fullAsk .fslegs span{font-size:calc(10.5px * var(--k))} #fullAsk .fsnav{margin-bottom:0;padding-top:calc(5px * var(--k))} #fullAsk .fsnav .arr{width:calc(22px * var(--k));height:calc(22px * var(--k))} body.touch #fullAsk .mm-cbox.fullsl .egbody,#fullAsk .mm-cbox.fullsl .egbody{padding-top:calc(17px * var(--k))!important;padding-bottom:calc(15px * var(--k))!important} /* (the buttons above the bottom crest: the altar's own !important had won) */ #fullAsk .fsn{display:none} #fullAsk .fslide{min-height:0!important} body.touch #fullAsk .mm-cbox.egalt.fullsl{height:calc(100vh - 56px)!important;max-height:calc(100vh - 56px)!important} /* (one height for every slide: no jump between them) */ #fullAsk .fslegs{grid-template-columns:auto 1fr auto 1fr;gap:calc(4px * var(--k)) calc(6px * var(--k))} #fullAsk .fsmats{gap:calc(1px * var(--k))} #fullAsk .fullsl .mm-cbtns{flex-wrap:nowrap;gap:calc(6px * var(--k))} #fullAsk .fullsl .mm-cbtns button{flex:1 1 0;min-width:0;padding-left:calc(5px * var(--k));padding-right:calc(5px * var(--k));font-size:calc(10.5px * var(--k));letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #fullAsk .fullsl .mm-cbtns button.pri{flex:2.2 1 0;order:-1} #fullAsk .fullsl .egcarry{margin:calc(2px * var(--k)) 0} #fullAsk .fullsl .egdv{margin:0} } @media (max-height:460px){ #fullAsk .fullli{gap:calc(2px * var(--k))} #fullAsk .fullli li{font-size:calc(10.5px * var(--k))} } /* trailer mode (13.10., js/ui/trailer.js): the whole HUD away for recordings — the touch controls stay where they are, unseen but working */ body.trailer :is(#minimapWrap,#zone,#mapPin,#feed,#msgs,#side,#callout,#quest,#target,#fps,#hint,#tourBtn,#lifeGlobe,#manaGlobe,#belt,#xpText,#lvlup,#feat,#labels,#cityTitle,#exitTip,#lore,#mkHud,#mkTop){visibility:hidden!important} body.trailer #touch>*{opacity:0!important} html.store .dev{display:none!important} /* (the store's app: the testing tools out — index.html's STORE, native/store.sh; the user 14.10.) */ #restVeil{position:fixed;inset:0;z-index:70;background:#000;opacity:0;transition:opacity 1.2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8px * var(--k));pointer-events:auto} /* (the first night in the camp: js/story/quests.js restNight) */ #restVeil.on{opacity:1} #restVeil p{margin:0;font:400 calc(15px * var(--k))/1.2 var(--f-display);letter-spacing:.24em;color:#e2d2ae;opacity:0;transition:opacity 1s ease} #restVeil i{width:calc(150px * var(--k));height:calc(15px * var(--k));background:var(--o-div) center/contain no-repeat;opacity:0;transition:opacity 1s ease} #restVeil.txt p,#restVeil.txt i{opacity:1} /* the companion's tree, its states at a glance (16.10., the user: 'selected and learned nodes do not show'): the learned vine was not drawn at all (its gradient #ppVineLit never defined), and 'can be learned' wore the same gold rim and gold breathing halo as 'learned'. Now in the Lodestar's language: learned — a gold seal with a warm halo, its vine gold and glowing; can be learned — an ice-white ring (not gold: gold is the game's 'new'); not yet open — dark and dimmed; chosen — a white dashed ring turning slowly round it (a small element only) */ html body #petp .vinelitw{fill:none;stroke:#eea24a;stroke-opacity:.32;stroke-width:12;stroke-linecap:round} html body #petp .vinelit{stroke:url(#ppVineLit);stroke-width:4;filter:none} html body #petp .vnext{stroke:#a8e4ff;stroke-opacity:.9;stroke-width:2.2;stroke-dasharray:3 5;opacity:1} html body #petp .pn .canr{fill:none;stroke:#a8e4ff;stroke-width:2.2;opacity:0} html body #petp .pn .selr{fill:none;stroke:#fff6e6;stroke-width:2.2;stroke-dasharray:5 5;opacity:0;transform-box:fill-box;transform-origin:center} html body #petp .pn.can:not(.got) .rim{stroke:#a8e4ff;stroke-width:1.6}html body #petp .pn.can .canr{opacity:.95} html body #petp .pn.can .halo{fill:url(#ppHaloIce);animation:pnHalo 2.6s ease-in-out infinite} html body #petp .pn.got .halo{fill:url(#ppHalo);opacity:1;animation:none} html body #petp .pn.got .rim{stroke:#ffe9bf;stroke-width:1.6}html body #petp .pn.got .face{fill:url(#ppFaceOn)} html body #petp .pn.got.can .canr{opacity:.7} html body #petp .pn:not(.got):not(.can) .rim{fill:#3a2c1a}html body #petp .pn:not(.got):not(.can):not(.shut) svg.pi image{filter:saturate(.5) brightness(.6)} html body #petp .pn.shut svg.pi image{filter:saturate(.2) brightness(.32)}html body #petp .pn.shut .rim{fill:#1e1810} html body #petp .pn.sel .selr{opacity:1;animation:lsSpin 9s linear infinite}html body #petp .pn.sel .rim2{stroke:#fff6e6;stroke-width:2} /* ===================================================================== THE TOP BANNER (the user's, 16.10., after their mockup — without the flags): every announcement at the top on one hanging plaque — a bronze rod with spear-tip finials, a gold medallion on it (its sign by the kind of news), the plaque of tooled leather in a carved gold frame under it. Pieces cut from gpt-image-1 originals by tools/art/banner.py (assets/ui/banner): the plaque's caps, a tile of its rails repeated 'round' and its crest in the middle, so it grows with the text and no ornament bends. js/ui/ui.js banner(). ===================================================================== */ #banner{--bh:calc(62px * var(--k));position:fixed;left:50%;top:calc(130px * var(--hs));z-index:53;display:flex;flex-direction:column;align-items:center;pointer-events:none;visibility:hidden;transform:translateX(-50%)} #banner.on{visibility:visible} #banner .bn-plate{position:relative;display:flex;justify-content:center;box-sizing:border-box;height:var(--ph, var(--bh));min-width:min(calc(var(--bh) * 3.9), var(--bmax, 84vw));max-width:min(var(--bmax, 84vw), calc(600px * var(--k)));padding:0 calc(var(--ph, var(--bh)) * .42);background:url(../assets/ui/banner/plate-l.webp?v=2) left top/auto 100% no-repeat,url(../assets/ui/banner/plate-r.webp?v=2) right top/auto 100% no-repeat;filter:drop-shadow(0 calc(3px * var(--k)) calc(6px * var(--k)) rgba(0,0,0,.75))} #banner .bn-plate::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--ph, var(--bh)) * .347 - 1px);right:calc(var(--ph, var(--bh)) * .347 - 1px);background:url(../assets/ui/banner/plate-m.webp?v=1) left top/auto 100% round} #banner .bn-plate::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:calc(var(--ph, var(--bh)) * .61);transform:translateX(-50%);background:url(../assets/ui/banner/plate-c.webp?v=1) center top/100% 100% no-repeat} #banner .bn-t{position:relative;z-index:1;min-width:0;max-width:100%;overflow:hidden;justify-content:center;box-sizing:border-box;height:calc(var(--ph, var(--bh)) * .7);padding-top:var(--tp, calc(var(--bh) * .3));display:flex;align-items:center;white-space:nowrap;font:600 calc(17px * var(--k) * var(--bfs, 1))/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#f4e5c2;text-shadow:0 1px 0 #000,0 0 calc(8px * var(--k)) rgba(0,0,0,.9),0 0 calc(16px * var(--k)) rgba(238,162,74,.18)} #banner .bn-k{font-weight:600;color:#eeb35a;flex:none} #banner .bn-k[hidden]{display:none} #banner .bn-k.colon::after{content:":";margin-right:.5em} #banner .bn-k:not(.colon)::after{content:"";display:inline-block;width:.34em;height:.34em;margin:0 .6em .12em;vertical-align:middle;background:#eeb35a;transform:rotate(45deg)} #banner .bn-n{flex:none} #banner.stack .bn-t{flex-direction:column;justify-content:center;gap:calc(var(--bh) * .03)} #banner.wrap .bn-n{flex:0 1 auto;white-space:normal;text-align:center;line-height:1.12;letter-spacing:.06em} #banner.wrap .bn-plate{padding:0 calc(var(--ph, var(--bh)) * .37)} #banner.wrap .bn-t{overflow:visible} #banner.wrap .bn-plate{width:var(--bmax, 84vw)} #banner.wrap .bn-n{max-width:100%} #banner.stack .bn-k{font-size:max(.66em, calc(7.5px * var(--k)));letter-spacing:.2em} #banner.stack .bn-k::after{display:none} #banner .bn-rod{position:absolute;z-index:2;left:calc(var(--bh) * -.6);right:calc(var(--bh) * -.6);top:calc(var(--bh) * -.19);height:calc(var(--bh) * .42);filter:drop-shadow(0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(0,0,0,.7))} #banner .bn-rod::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--bh) * .48);right:calc(var(--bh) * .48);background:url(../assets/ui/banner/rod-m.webp?v=1) center/100% 100% no-repeat} #banner .bn-rl,#banner .bn-rr{position:absolute;top:0;bottom:0;width:calc(var(--bh) * .49);background:url(../assets/ui/banner/rod-l.webp?v=1) left center/100% 100% no-repeat} #banner .bn-rl{left:0}#banner .bn-rr{right:0;background-image:url(../assets/ui/banner/rod-r.webp?v=1)} #banner .bn-med{position:absolute;z-index:3;left:50%;top:calc(var(--bh) * -.47);width:calc(var(--bh) * .76);height:calc(var(--bh) * .76);margin-left:calc(var(--bh) * -.38);background:url(../assets/ui/banner/med-quest.webp?v=1) center/contain no-repeat;filter:drop-shadow(0 calc(2px * var(--k)) calc(4px * var(--k)) rgba(0,0,0,.8))} #banner .bn-med::after{content:"";position:absolute;inset:-35%;background:radial-gradient(closest-side,rgba(255,206,120,.55),rgba(238,162,74,.18) 55%,transparent);opacity:0;z-index:-1} #banner .bn-crest{display:none} /* the flags (the user's, 16.10.: on the top banner after all): hung from the rod just inside its finials, over the plaque's outer edge, longer than it */ #banner .bn-fl,#banner .bn-fr{position:absolute;z-index:4;top:calc(var(--bh) * -.13);height:calc(var(--bh) * 1.5);width:calc(var(--bh) * 1.5 * .449);background:url(../assets/ui/banner/flag.webp?v=1) center top/100% 100% no-repeat;transform-origin:50% 6%;filter:drop-shadow(0 calc(3px * var(--k)) calc(5px * var(--k)) rgba(0,0,0,.7));pointer-events:none} #banner .bn-fl{left:calc(var(--bh) * -.42)}#banner .bn-fr{right:calc(var(--bh) * -.42)} #banner.on .bn-fl,#banner.on .bn-fr{animation:bnFlag 1.5s cubic-bezier(.3,.8,.4,1) .2s both} #banner.on .bn-fr{animation-name:bnFlagR} @keyframes bnFlag{0%{opacity:0;transform:scaleY(.06)}30%{opacity:1;transform:scaleY(1.03)}50%{transform:rotate(2.2deg)}72%{transform:rotate(-1.2deg)}88%{transform:rotate(.5deg)}100%{opacity:1;transform:none}} @keyframes bnFlagR{0%{opacity:0;transform:scaleY(.06)}30%{opacity:1;transform:scaleY(1.03)}50%{transform:rotate(-2.2deg)}72%{transform:rotate(1.2deg)}88%{transform:rotate(-.5deg)}100%{opacity:1;transform:none}} #banner[data-kind="done"] .bn-med{background-image:url(../assets/ui/banner/med-done.webp?v=1)} #banner[data-kind="boss"] .bn-med{background-image:url(../assets/ui/banner/med-boss.webp?v=1)} #banner[data-kind="level"] .bn-med{background-image:url(../assets/ui/banner/med-level.webp?v=1)} #banner[data-kind="zone"] .bn-med{background-image:url(../assets/ui/banner/med-zone.webp?v=1)} #banner[data-kind="info"] .bn-med{background-image:url(../assets/ui/banner/med-info.webp?v=1)} /* in: the rod drops, the plaque unrolls under it, the medallion turns in with a glint, then the words; out: all of it lifts and fades */ #banner.on .bn-rod{animation:bnRod .45s cubic-bezier(.2,.9,.3,1.15) both} #banner.on .bn-plate{transform-origin:50% 0;animation:bnPlate .5s cubic-bezier(.25,.9,.35,1) .14s both} #banner.on .bn-med{animation:bnMed .6s cubic-bezier(.3,1.5,.5,1) .26s both} #banner.on .bn-med::after{animation:bnGlow 1.6s ease-out .4s both} #banner.on .bn-t{animation:bnText .4s ease-out .26s both} #banner.out{animation:bnOut .5s ease-in both} @keyframes bnRod{0%{opacity:0;transform:translateY(calc(var(--bh) * -.5)) scaleX(.55)}100%{opacity:1;transform:none}} @keyframes bnPlate{0%{opacity:0;transform:scaleY(.04)}45%{opacity:1}100%{opacity:1;transform:none}} @keyframes bnMed{0%{opacity:0;transform:scale(.2) rotate(-120deg)}100%{opacity:1;transform:none}} @keyframes bnGlow{0%{opacity:0}25%{opacity:1}100%{opacity:0}} @keyframes bnText{0%{opacity:0;transform:translateY(calc(4px * var(--k)))}100%{opacity:1;transform:none}} @keyframes bnOut{0%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%) translateY(calc(var(--bh) * -.3))}} body.cine #banner{top:calc(12 * var(--vh) + var(--bh) * .6)} body.touch #banner{--bh:min(calc(42px * var(--k)), 6.4vw);top:calc(5px + var(--bh) * .47 + env(safe-area-inset-top, 0px))} body.touch #banner .bn-t{font-size:calc(11.5px * var(--k) * var(--bfs, 1));letter-spacing:.11em} body.touch #banner .bn-med{top:calc(var(--bh) * -.42);width:calc(var(--bh) * .66);height:calc(var(--bh) * .66);margin-left:calc(var(--bh) * -.33)} body.touch.bannering #target{opacity:0;transition:opacity .3s} body.touch #banner .bn-fl,body.touch #banner .bn-fr{height:calc(var(--bh) * 1.2);width:calc(var(--bh) * 1.2 * .449);top:calc(var(--bh) * -.1)} body.touch #banner .bn-fl{left:calc(var(--bh) * -.35)}body.touch #banner .bn-fr{right:calc(var(--bh) * -.35)} body.touch.cine #banner{top:calc(12 * var(--vh) + var(--bh) * .5 + 4px)} body.mainmenu #banner{display:none!important} body.trailer #banner{visibility:hidden!important} @media (prefers-reduced-motion:reduce){#banner.on .bn-rod,#banner.on .bn-plate,#banner.on .bn-med,#banner.on .bn-t,#banner.on .bn-fl,#banner.on .bn-fr{animation-duration:.01s}} /* ===================================================================== THE QUEST TRACKER (the user's, 16.10., after their mockup — smaller, no flag): a translucent dark-brown panel in a thin carved gold frame — scrolled corners, a crest on the top rail, an ornament under the bottom one (assets/ui/banner/frame*.webp, tools/art/banner.py: a 9-slice whose rails repeat, so no ornament bends). The quest's name in gold small caps, the goal under it behind a gold diamond. The 'New quest' / 'Quest updated' call is the top banner's now (an event keeps its flag in here). ===================================================================== */ html body #quest#quest{--fc:calc(18px * var(--k));--qc:#eea24a;margin-left:0;padding:calc(var(--fc) * .64) calc(var(--fc) * .82) calc(var(--fc) * .7);min-width:calc(var(--fc) * 8);max-width:min(calc(214px * var(--k)), 34vw);box-sizing:border-box;background:none;-webkit-mask:none;mask:none} html body #quest#quest{--rh:calc(var(--fc) * 1.15)} html body #quest#quest .qfr{position:absolute;inset:0;z-index:-1;box-sizing:border-box;border:var(--fc) solid transparent;border-image:url(../assets/ui/banner/trk-frame.webp?v=1) 115 fill / var(--fc) / 0 round stretch;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));pointer-events:none} html body #quest#quest .qfr::before{content:"";position:absolute;left:50%;bottom:calc(var(--fc) * -1);width:calc(var(--fc) * 1.4);height:var(--fc);transform:translateX(-50%);background:url(../assets/ui/banner/trk-orn.webp?v=1) center/100% 100% no-repeat} html body #quest#quest .qfr::after{content:"";position:absolute;inset:calc(var(--fc) * -.84);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.45' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .4L9.6 5L5 9.6L.4 5Z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.7'/%3E%3C/svg%3E") left top/calc(var(--fc) * .34) auto no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.45' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .4L9.6 5L5 9.6L.4 5Z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.7'/%3E%3C/svg%3E") right top/calc(var(--fc) * .34) auto no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.45' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .4L9.6 5L5 9.6L.4 5Z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.7'/%3E%3C/svg%3E") left bottom/calc(var(--fc) * .34) auto no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.45' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .4L9.6 5L5 9.6L.4 5Z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.7'/%3E%3C/svg%3E") right bottom/calc(var(--fc) * .34) auto no-repeat} /* the rod it hangs from: turned finials, a plain shaft, the crest with a gold stud in the middle (the minimap's steel) */ html body #quest#quest .qrod{position:absolute;z-index:0;left:calc(var(--fc) * -.45);right:calc(var(--fc) * -.45);top:calc(var(--rh) * -.6 + var(--fc) * .1);height:var(--rh);pointer-events:none;background:url(../assets/ui/banner/trk-rod-l.webp?v=1) left center/auto 100% no-repeat,url(../assets/ui/banner/trk-rod-r.webp?v=1) right center/auto 100% no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))} html body #quest#quest .qrod::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--rh) * 1.26 - 1px);right:calc(var(--rh) * 1.26 - 1px);background:url(../assets/ui/banner/trk-rod-m.webp?v=1) center/100% 100% no-repeat} html body #quest#quest .qrod::after{content:"";position:absolute;left:50%;top:calc(var(--rh) * -.36);width:calc(var(--rh) * .95 * 3.56);height:calc(var(--rh) * .95);transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.45' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .4L9.6 5L5 9.6L.4 5Z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.7'/%3E%3C/svg%3E") 50% 70%/calc(var(--rh) * .4) auto no-repeat,url(../assets/ui/banner/trk-crest.webp?v=1) center bottom/100% 100% no-repeat} html body #quest#quest::before,html body #quest#quest::after{inset:calc(var(--fc) * .45)} html body #quest#quest:not(.ev) .qt::before{display:none} html body #quest#quest:not(.ev) .qf{display:none} html body #quest#quest .qt{text-shadow:0 1px 2px #000} html body #quest#quest:not(.ev) .qo{position:relative;margin-left:0;padding-left:1.05em} html body #quest#quest:not(.ev) .qo::before{content:"";position:absolute;left:.12em;top:.5em;width:.38em;height:.38em;background:var(--qc);transform:rotate(45deg);box-shadow:0 0 4px rgba(238,162,74,.5)} html body #quest#quest:not(.ev) .qw{margin-left:calc(13px * var(--k))} html body #quest#quest .qw{font-size:calc(10.5px * var(--k))} html body #quest#quest:not(.ev).pulse .qo::before{animation:qspin 1s var(--ease-out,ease-out) .1s both} html body #quest#quest .qt{font-size:calc(8px * var(--k))!important}html body #quest#quest .qo{font-size:calc(9.5px * var(--k))!important;line-height:1.22}html body #quest#quest .qw{font-size:calc(9px * var(--k))}html body #quest#quest{--fc:calc(16px * var(--k))} /* (the text a size smaller and the frame a little tighter, more compact: the user's, 16.10.) */ html body #quest#quest.side{--qc:#7aa6ff}html body #quest#quest.mkq{--qc:#5fe8d6}html body #quest#quest.riftq{--qc:#c58cff} /* ===================================================================== THE WAY-OUT SIGN (the user's, 08.10.: the dark plate with '→ ASHKARRA' 'sieht kacke aus auf Desktop'; redone 16.10.): where a way out leads, in the top banner's and the quest tracker's language — a small plate of the tracker's dark steel 9-slice (scrolled corners, assets/ui/banner/trk-frame.webp) with its ornament under the bottom rail, the banner's bronze compass medallion (med-zone.webp) riding its left end where the arrow was, the land's name in gold-cream display caps, a gold chevron after it. One look for the pointer's tooltip on a desktop (#exitTip, Input exitTip) and the tap-to-walk sign over the way out on a phone (.exitsign, UI.placeLabels). Every size runs on --k (the window's scale), as the tracker's does. ===================================================================== */ .wsign{--fc:calc(7px * var(--k));--md:calc(var(--fc) * 4.1);position:relative;isolation:isolate;display:none;align-items:center;box-sizing:border-box;height:calc(var(--fc) * 2 + 1.2em);margin-left:calc(var(--md) * .46);padding:0 calc(var(--fc) * 1.15) 0 calc(var(--md) * .6);white-space:nowrap;font:600 calc(10px * var(--k))/1 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:#f1dfb8;text-shadow:0 1px 0 #000,0 0 calc(5px * var(--k)) rgba(0,0,0,.95);filter:drop-shadow(0 calc(2px * var(--k)) calc(4px * var(--k)) rgba(0,0,0,.7))} .wsign::before{content:"";position:absolute;inset:0;z-index:-2;box-sizing:border-box;border:var(--fc) solid transparent;border-image:url(../assets/ui/banner/trk-frame.webp?v=1) 115 fill / var(--fc) / 0 round stretch} .wsign::after{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--fc) * -.78);width:calc(var(--fc) * 2.7);height:calc(var(--fc) * 1.93);transform:translateX(-50%);background:url(../assets/ui/banner/trk-orn.webp?v=1) center/100% 100% no-repeat} .wsign .ws-med{position:absolute;left:calc(var(--md) * -.46);top:50%;width:var(--md);height:var(--md);margin-top:calc(var(--md) * -.5);background:url(../assets/ui/banner/med-zone.webp?v=1) center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))} .wsign .ws-n{position:relative;top:.05em} .wsign .ws-go{flex:none;width:.78em;height:.66em;margin-left:.6em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.5' stop-color='%23e3ad4c'/%3E%3Cstop offset='1' stop-color='%237a4f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M.6.6L5 5 .6 9.4h2.6L7.6 5 3.2.6zM4.6.6L9 5 4.6 9.4h2.6L11.6 5 7.2.6z' fill='url(%23g)' stroke='%23231a0c' stroke-width='.5'/%3E%3C/svg%3E") center/contain no-repeat} /* the pointer's tooltip (desktop): beside the pointer, never under it */ #exitTip.wsign{position:fixed;z-index:40;pointer-events:none} /* the phone's sign over the way out: tapped, she walks there (a finger's height: the medallion overhangs the plate) */ #labels .exitsign.wsign{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform} body.touch .wsign{--fc:calc(6.5px * var(--k));font-size:calc(10.5px * var(--k));letter-spacing:.11em} body.uisoft #exitTip.wsign{filter:blur(.35px) drop-shadow(0 calc(2px * var(--k)) calc(4px * var(--k)) rgba(0,0,0,.7))} /* ===================================================================== THE BAR LAYOUT (Settings → Skill layout: Bar, desktop only; 19.10. for the PC / Steam release): the skill buttons in one row at the bottom centre on a forged plate, health stays top left. js/ui/touch.js placeBar sets the buttons in a 660 × 128 box ===================================================================== */ #help .deskrow{display:flex}body.touch #help .deskrow{display:none} body.hudbar:not(.touch) #skillsT{left:50%;right:auto;width:680px;height:116px;bottom:calc(2px * var(--hs));transform:translateX(-50%) scale(calc(.95 * var(--hs)));transform-origin:center bottom} /* (1.12 → .95, the user 19.10.: the bar and orb some 15 % smaller) */ /* the plate: the quest tracker's iron frame (trk-frame, nine-sliced, filled), its rod along the top, its ornament turned up over the rod's middle; talk / pick up / use stand left of it, outside (they come and go) */ body.hudbar #skillsT .barplate{--fc:18px;--rh:21px;position:absolute;left:116px;top:8px;width:558px;height:100px;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7))} body.hudbar #skillsT .barplate::before{content:"";position:absolute;inset:0;box-sizing:border-box;border:var(--fc) solid transparent;border-image:url(../assets/ui/banner/trk-frame.webp?v=1) 115 fill / var(--fc) / 0 round stretch} body.hudbar #skillsT .barplate::after{content:"";position:absolute;z-index:1;left:50%;top:calc(var(--fc) * -.95);width:calc(var(--fc) * 2.6);height:calc(var(--fc) * 1.86);transform:translateX(-50%) scaleY(-1);background:url(../assets/ui/banner/trk-orn.webp?v=1) center/100% 100% no-repeat} body.hudbar #skillsT .barrod{position:absolute;left:calc(var(--fc) * -.45);right:calc(var(--fc) * -.45);top:calc(var(--rh) * -.55);height:var(--rh);background:url(../assets/ui/banner/trk-rod-l.webp?v=1) left center/auto 100% no-repeat,url(../assets/ui/banner/trk-rod-r.webp?v=1) right center/auto 100% no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))} body.hudbar #skillsT .barrod::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--rh) * 1.26 - 1px);right:calc(var(--rh) * 1.26 - 1px);background:url(../assets/ui/banner/trk-rod-m.webp?v=1) center/100% 100% no-repeat} body.hudbar #skillsT .tult .ic{width:50px;height:50px} /* the health orb left of the plate, its iron flange under the plate's end; the top-left bars go, the quest tracker up into their place */ body.hudbar #skillsT .hporb{position:absolute;left:8px;top:-14px;width:112px;height:126px;pointer-events:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75))} body.hudbar #skillsT .hporb canvas{position:absolute;inset:0;width:100%;height:100%} body.hudbar #skillsT .hporb img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} body.hudbar #skillsT .hporb .hplv{position:absolute;left:45.5%;top:3px;transform:translateX(-50%);min-width:18px;text-align:center;font:600 11px/1 'Alegreya SC',var(--f-body);color:#f1dfb0;text-shadow:0 1px 2px #000,0 0 4px #000} body.hudbar #skillsT .hporb .hpv{position:absolute;left:45.5%;top:52%;transform:translate(-50%,-50%);white-space:nowrap;font:600 11px/1 var(--f-body);color:#fff4e6;text-shadow:0 1px 2px #000;opacity:0;transition:opacity .15s} body.hudbar #skillsT .hporb:hover .hpv{opacity:1} body.hudbar #skillsT .barxp{position:absolute;left:22px;right:22px;bottom:9px;height:3px;background:rgba(0,0,0,.55);border-radius:2px;overflow:hidden} body.hudbar #skillsT .barxp>i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#8a6a2c,#e6c57a)} body.hudbar:not(.touch) #tBars{display:none} html body.hudbar:not(.touch) #quest#quest{top:calc(26px * var(--hs))} /* the slots not yet open stand as empty sockets (19.10.: the bar keeps its size and places from the first minute, as in Diablo and PoE) */ body.hudbar:not(.touch) #skillsT .tbtn.locked{display:block;opacity:1;pointer-events:none;background:radial-gradient(circle at 50% 40%,#1d1e22,#0b0c0e 70%);box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 0 1.5px rgba(150,120,70,.35)} body.hudbar:not(.touch) #skillsT .tbtn.locked>*{visibility:hidden} body.hudbar:not(.touch) #skillsT .tpot[hidden]{display:block!important;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1d1e22,#0b0c0e 70%);box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 0 1.5px rgba(150,120,70,.35);pointer-events:none} body.hudbar:not(.touch) #skillsT .tpot[hidden]>*{visibility:hidden} body.hudbar #skillsT .ultsock{position:absolute;width:56px;height:56px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 40%,#1d1e22,#0b0c0e 70%);box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 0 1.5px rgba(150,120,70,.35)} body.hudbar #skillsT .tult span{position:absolute;left:50%;top:-18px;transform:translateX(-50%);white-space:nowrap;margin:0} /* Settings → Controls: the bindings (js/ui/gamepad.js renderBinds) */ #binds h4{margin:calc(10px * var(--k)) 0 calc(4px * var(--k));font:calc(11px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.14em;color:var(--gold,#c9a25c);text-transform:uppercase} #binds .brow{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--k));padding:calc(3px * var(--k)) 0;border-bottom:1px solid rgba(201,162,92,.12)} #binds .brow>span{font:calc(13px * var(--k)) var(--f-body);color:var(--bone)} #binds .opt{min-width:calc(70px * var(--k))} #binds .hnote{margin:calc(4px * var(--k)) 0} /* the PlayStation's symbols: the display face has no ✕ ○ □ △, they came out tiny */ body.pad-ps .tbtn kbd,body.pad-ps .tult kbd,body.pad-ps .tpot kbd,body.pad-ps .tact kbd,body.pad-ps #binds .bpad{font-family:system-ui,'Segoe UI Symbol',sans-serif;font-weight:700} body.pad-ps .tbtn kbd,body.pad-ps .tpot kbd,body.pad-ps .tact kbd{font-size:12px} #binds .bpad{font-family:system-ui,'Segoe UI Symbol',sans-serif} /* the PC's mouse pointers (19.10.; assets/ui/cursor, js/core/input.js sets body[data-cur] per hover): one gauntlet everywhere — menus, talks, the hero selection, the HUD (19.10., the user: 'zwischendurch andere Mauszeiger … Fadenkreuz … mach es einheitlich': #game's own crosshair had won over them) —, the hover's own over the world, the hand on loot labels, the text bar kept in text fields */ html:has(>body:not(.touch)),body:not(.touch),body:not(.touch) *{cursor:url(../assets/ui/cursor/pointer.png) 3 3,default!important} body:not(.touch)[data-cur=attack] #game{cursor:url(../assets/ui/cursor/attack.png) 3 3,crosshair!important} body:not(.touch)[data-cur=pick] #game,body:not(.touch) .loot-label{cursor:url(../assets/ui/cursor/pick.png) 3 3,pointer!important} body:not(.touch)[data-cur=exit] #game{cursor:url(../assets/ui/cursor/exit.png) 3 3,pointer!important} body:not(.touch)[data-cur=talk] #game{cursor:url(../assets/ui/cursor/talk.png) 3 3,pointer!important} body:not(.touch)[data-cur=use] #game{cursor:url(../assets/ui/cursor/use.png) 3 3,pointer!important} body:not(.touch)[data-cur=blocked] #game{cursor:url(../assets/ui/cursor/blocked.png) 3 3,not-allowed!important} body:not(.touch) input[type=text],body:not(.touch) input:not([type]),body:not(.touch) textarea{cursor:text!important} /* ===================================================================== THE BAR LAYOUT'S DOCKED WINDOWS (19.10., the user with Diablo IV's picture: 'Inventar, Char-Panel und alle Händler-Panel … kleiner und hier reinpassen, so wie bei Diablo … Händler-UI kommt von links'): only in the bar layout on a desktop; the hero's own windows (the inventory, the skills) dock on the right, a trader's window on the left, its bag as the right dock beside it; the game runs on between them, the bar moves into the free part (a trader open: it goes, nothing is fought at a counter). The ring layout and the phone keep the full-screen windows. ===================================================================== */ body.hudbar:not(.touch){--dw:clamp(400px,32vw,860px)} /* (40vw → 32vw, the user 19.10.: 'weniger Platz') */ @keyframes dockR{from{translate:100% 0}to{translate:0 0}} @keyframes dockL{from{left:calc(var(--dw) * -1)}to{left:0}} @keyframes dockRs{from{right:calc(var(--dw) * -1)}to{right:0}} /* the right dock: inventory and skills */ html body.hudbar:not(.touch) #inv.open,html body.hudbar:not(.touch) #skills.open{left:auto!important;right:0!important;width:var(--dw)!important;--lw:var(--dw);border-left:1px solid var(--an-line);box-shadow:-10px 0 34px rgba(0,0,0,.65),inset 1px 0 0 rgba(201,162,92,.18);animation:dockR .2s var(--ease-out,ease-out) both} html body.hudbar:not(.touch) #inv.open{--cw:0px} /* (the cells' size: Inventory.layout measures the dock) */ html body.hudbar:not(.touch) #inv.open .ibody{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important} html body.hudbar:not(.touch) #inv.open .doll{flex:0 0 auto!important;height:calc(var(--lh) * .5);padding:calc(48px + var(--st)) 18px 8px!important;border:none!important;justify-content:center!important;gap:calc(var(--cs) * .4)!important} html body.hudbar:not(.touch) #inv.open .doll .sec{margin-top:0!important} html body.hudbar:not(.touch) #inv.open .bagwrap{flex:1 1 auto!important;min-height:0;align-items:center!important;padding:12px 18px 14px!important;border-left:none!important;border-top:1px solid var(--an-line)} html body.hudbar:not(.touch) #inv.open .bagcount{width:calc(var(--cs) * 6)} /* the trader on the left, its bag (sell / salvage) as the right dock: the hero's side of the counter */ html body.hudbar:not(.touch) #shop.open:not(.pets){--dw:clamp(360px,28vw,720px);right:auto!important;width:var(--dw);filter:none!important;/* (no filter on the trader's panel: it would hold its bag's dock inside it) */border-right:1px solid var(--an-line);box-shadow:10px 0 34px rgba(0,0,0,.65),inset -1px 0 0 rgba(201,162,92,.18);animation:dockL .2s var(--ease-out,ease-out) both} html body.hudbar:not(.touch) #shop.open:not(.pets) .shbody{flex-direction:column;align-items:stretch!important;justify-content:flex-start!important} html body.hudbar:not(.touch) #shop.open:not(.pets):not(.smith) .shbuy{flex:1 1 auto!important;max-width:none!important} html body.hudbar:not(.touch) #shop.open .shsell{position:fixed;top:0;bottom:0;right:0;left:auto;width:var(--dw);box-sizing:border-box;max-width:none!important;padding:calc(56px + var(--st)) 18px 14px;background:linear-gradient(rgba(12,13,15,.97),rgba(8,9,10,.98)),var(--tex) 0 0/256px 256px;border-left:1px solid var(--an-line);box-shadow:-10px 0 34px rgba(0,0,0,.65),inset 1px 0 0 rgba(201,162,92,.18);animation:dockRs .2s var(--ease-out,ease-out) both;align-content:start!important} html body.hudbar:not(.touch) #shop.open .shsell .sgrid{width:calc(var(--dw) - 116px);grid-template-columns:repeat(6,minmax(0,1fr))!important} /* the skills in the right dock: the list a little under half, the page beside it in a column (the loadout ring under the text) */ html body.hudbar:not(.touch) #skills.open{--dw:clamp(600px,58vw,1240px)!important;width:var(--dw)!important;--lw:var(--dw)} /* (the skills want more room than the bag, the user 19.10.) */ html body.hudbar:not(.touch) #skills.open .slist{width:40%!important} html body.hudbar:not(.touch) #skills.open .spage{flex-direction:column} html body.hudbar:not(.touch) #skills.open .spage .sload{align-self:center;transform:none} /* the bar stays where it is under a dock, the dock over it (19.10., the user: 'die Action Bar nicht verdrängen, sondern überlagern'); a trader open, it goes */ body.hudbar.shopping:not(.touch) #skillsT{visibility:hidden} /* (Yusra's companions stay a full window: her stage of the pets is drawn in place of the world, Game.covered) */ body.hudbar:not(.touch) #hint{display:none!important} /* (the "Esc · Menu" line stood over the bar) */ /* the trader's bag says what it is for (19.10., the user: 'rechts sollte stehen, in welchem Modus man ist — Verkaufen, beim Schmied entsprechend'): its heading, hidden for the plain traders elsewhere, shown in the bar layout as the dock's title */ html body.hudbar:not(.touch) #shop.open .shsell>h3{display:flex!important;justify-content:center;align-items:center;margin:0 0 14px;padding:0 0 10px;font:calc(13px * var(--k)) 'Alegreya SC',var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#c9a25c);border-bottom:1px solid rgba(201,162,92,.25)} /* the bar layout's skills dock (19.10., the user): the loadout as a bar like the HUD's (on the panel's iron frame), the hero's sketch down in the bottom right */ html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{width:384px!important;height:92px!important;align-self:center;margin-top:auto;box-sizing:border-box;border:16px solid transparent;border-image:url(../assets/ui/banner/trk-frame.webp?v=1) 115 fill / 16px / 0 round stretch;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))} html body.hudbar:not(.touch) #skills.open .spage .sload.asbar .sock{margin:-16px 0 0 -16px} html body.hudbar:not(.touch) #skills.open .spage::before{top:auto!important;bottom:0!important;height:72%;width:min(58%,calc(var(--lh) * .5));background-position:right bottom!important;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)} /* the forge's two pages as pressed buttons, centred over the dock (19.10., the user: 'aus den beiden Tabs gedrückte Buttons, mittig verankert') */ html body.hudbar:not(.touch) #shop.open.smith .shtabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;margin:0;padding:3px;gap:3px;border:1px solid rgba(201,162,92,.55)!important;border-image:none!important;border-radius:7px;background:#0b0c0e;box-shadow:inset 0 1px 4px rgba(0,0,0,.8),0 2px 8px rgba(0,0,0,.5)} html body.hudbar:not(.touch) #shop.open.smith .shtabs i{display:none} html body.hudbar:not(.touch) #shop.open.smith .shtabs button{padding:8px 22px;border-radius:5px;font:600 12px var(--f-display);letter-spacing:.18em;color:var(--bone-lo);background:linear-gradient(#26272c,#17181b);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.6)} html body.hudbar:not(.touch) #shop.open.smith .shtabs button:hover{color:var(--bone);background:linear-gradient(#2d2e33,#1b1c20)} html body.hudbar:not(.touch) #shop.open.smith .shtabs button.on{color:#f3c97a;text-shadow:0 0 8px rgba(238,162,74,.5);background:linear-gradient(#141416,#1e1a12);box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(238,162,74,.6)} /* a trader's dock: its name on one line under the top edge, readable, the gold under it on the right (19.10., the user: 'Titel schlecht lesbar, runter damit; Geld unter den Header') */ html body.hudbar:not(.touch) #shop.open:not(.pets) .plate-title{padding:calc(22px + var(--st,0px)) 54px 4px 22px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:15px!important;letter-spacing:.16em} html body.hudbar:not(.touch) #shop.open:not(.pets) .shgold{top:calc(58px + var(--st,0px));right:22px;font-size:15px;text-shadow:0 1px 3px #000} html body.hudbar:not(.touch) #shop.open:not(.pets) .xclose{top:calc(14px + var(--st,0px))}