/* written by tools/art/cg_css.py — do not edit by hand */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --o-plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a3d42'/%3E%3Cstop offset='1' stop-color='%231a1b1e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%235a6068' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-plate-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2345433c'/%3E%3Cstop offset='1' stop-color='%231e1d1b'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23383b40'/%3E%3Cstop offset='1' stop-color='%231a1b1e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tile-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2346443c'/%3E%3Cstop offset='1' stop-color='%231c1b19'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%235a6068' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='0.28' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-engrave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='214' viewBox='0 0 236 214'%3E%3Cg fill='none' stroke='%235a6068' opacity='.5'%3E %3Cpath d='M47.8 177.01A98 98 0 0 1 212.5 81.92' stroke-width='1.4'/%3E %3Cpath d='M40.27 171.62A104 104 0 0 1 211.59 72.71' stroke-width='.7' stroke-dasharray='2 4'/%3E %3Cpath d='M23.6 193.09A126 126 0 0 1 243.94 75.94' stroke-width='.8'/%3E%3Cpath d='M25.48 192.41L20.78 194.12M21.95 181.05L17.11 182.3M19.53 169.4L14.59 170.18M18.23 157.57L13.24 157.88M18.08 145.67L13.08 145.5M19.06 133.81L14.1 133.16M21.18 122.11L16.31 120.98M24.41 110.65L19.67 109.07M28.72 99.56L24.15 97.53M34.08 88.94L29.72 86.48M40.43 78.88L36.33 76.01M47.71 69.47L43.91 66.22M55.86 60.8L52.39 57.21M64.81 52.96L61.7 49.04M74.46 46L71.74 41.81M84.74 40.01L82.43 35.58M95.55 35.03L93.68 30.39M106.78 31.11L105.36 26.31M118.34 28.28L117.39 23.37M130.12 26.57L129.64 21.59M142 26L142 21M153.88 26.57L154.36 21.59M165.66 28.28L166.61 23.37M177.22 31.11L178.64 26.31M188.45 35.03L190.32 30.39M199.26 40.01L201.57 35.58M209.54 46L212.26 41.81M219.19 52.96L222.3 49.04M228.14 60.8L231.61 57.21M236.29 69.47L240.09 66.22' stroke-width='.8'/%3E %3Ccircle cx='142' cy='150' r='54' stroke-width='1.2'/%3E%3Ccircle cx='142' cy='150' r='60' stroke-width='.6' stroke-dasharray='1 3'/%3E %3Cpath d='M88 150L72 150M100.63 115.29L88.38 105M132.62 96.82L129.84 81.06M169 103.23L177 89.38' stroke-width='1.2'/%3E%3C/g%3E%3Cpolygon points='49.91,112.48 53.91,116.48 49.91,120.48 45.91,116.48' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3Cpolygon points='93,61.13 97,65.13 93,69.13 89,65.13' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3Cpolygon points='159.02,49.49 163.02,53.49 159.02,57.49 155.02,53.49' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3C/svg%3E");
  --o-thorn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E %3Cdefs%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235a6068' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%235a6068'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='0,10 50,8.4 56,10 50,11.6' fill='url%28%23h%29'/%3E %3Cpath d='M16 9.3l5-6-1.2 6.1zM28 10.7l6 6.2-1.6-6.3zM38 9l5-7-1 7.1zM46 10.9l4 5-.8-5z' fill='%235a6068'/%3E %3Cpath d='M24 9.6C22 5 26 3 27.5 5.5' fill='none' stroke='%235a6068' stroke-width='.9'/%3E%3C/svg%3E");
  --o-crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M0 8.5H11L14 5.5M34 8.5H23L20 5.5' fill='none' stroke='%232a2e33' stroke-width='1.2'/%3E%3Cpolygon points='17,1 21,5.5 17,10 13,5.5' fill='%23111214' stroke='%235a6068' stroke-width='1.1'/%3E%3Ccircle cx='17' cy='5.5' r='1.1' fill='%235a6068'/%3E%3C/svg%3E");
  --o-tick-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(0 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(90 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(180 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(270 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-rail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='90' viewBox='0 0 14 90'%3E%3Cpath d='M4 0V90M9 0V90' stroke='%232a2e33' stroke-width='1.2'/%3E%3Cpath d='M6.5 0V90' stroke='%23000' stroke-width='2' opacity='.6'/%3E%3Cpolygon points='6.5,38 10.5,45 6.5,52 2.5,45' fill='%23141517' stroke='%235a6068' stroke-width='1'/%3E%3Ccircle cx='6.5' cy='45' r='1.1' fill='%235a6068'/%3E%3C/svg%3E");
  --o-fire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a3a'/%3E%3Cstop offset='1' stop-color='%23c0501a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ffc08a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%2324272b' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-fire-hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a4a'/%3E%3Cstop offset='1' stop-color='%23d0601a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23e8eaec' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%2324272b' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tag-rare:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d1f22'/%3E%3Cstop offset='1' stop-color='%230e0f11'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7a2a' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23ff7a2a' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-rare-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7a2a'/%3E%3Cstop offset='1' stop-color='%23b0952c'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7a2a' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23000' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-unique-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7d1f'/%3E%3Cstop offset='1' stop-color='%23a8400e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7d1f' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23000' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='none' stroke='%232a2e33' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M93 50L97 50M93.82 57.73L96.29 58.16M91.82 65.22L94.17 66.07M87.24 71.5L90.7 73.5M84.09 78.6L86 80.21M78.6 84.09L80.21 86M71.5 87.24L73.5 90.7M65.22 91.82L66.07 94.17M57.73 93.82L58.16 96.29M50 93L50 97M42.27 93.82L41.84 96.29M34.78 91.82L33.93 94.17M28.5 87.24L26.5 90.7M21.4 84.09L19.79 86M15.91 78.6L14 80.21M12.76 71.5L9.3 73.5M8.18 65.22L5.83 66.07M6.18 57.73L3.71 58.16M7 50L3 50M6.18 42.27L3.71 41.84M8.18 34.78L5.83 33.93M12.76 28.5L9.3 26.5M15.91 21.4L14 19.79M21.4 15.91L19.79 14M28.5 12.76L26.5 9.3M34.78 8.18L33.93 5.83M42.27 6.18L41.84 3.71M50 7L50 3M57.73 6.18L58.16 3.71M65.22 8.18L66.07 5.83M71.5 12.76L73.5 9.3M78.6 15.91L80.21 14M84.09 21.4L86 19.79M87.24 28.5L90.7 26.5M91.82 34.78L94.17 33.93M93.82 42.27L96.29 41.84' stroke='%235a6068' stroke-width='.8' opacity='.75'/%3E%3Cpolygon points='83.59,80.99 86.19,83.59 83.59,86.19 80.99,83.59' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='16.41,80.99 19.01,83.59 16.41,86.19 13.81,83.59' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='16.41,13.81 19.01,16.41 16.41,19.01 13.81,16.41' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='83.59,13.81 86.19,16.41 83.59,19.01 80.99,16.41' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3C/svg%3E");
  --o-c-tl:url("../assets/ui/cgx/c_tl.webp");
  --o-c-tr:url("../assets/ui/cgx/c_tr.webp");
  --o-c-bl:url("../assets/ui/cgx/c_bl.webp");
  --o-c-br:url("../assets/ui/cgx/c_br.webp");
  --o-fl-l:url("../assets/ui/cgx/fl_l.webp");
  --o-fl-r:url("../assets/ui/cgx/fl_r.webp");
  --o-div:url("../assets/ui/cgx/divider.webp");
  --o-rule:url("../assets/ui/cgx/divider.webp");
  --o-torn-l:linear-gradient(#000,#000);
  --o-torn-r:linear-gradient(#000,#000);
  --o-torn-b:linear-gradient(#000,#000);
  --bronze:#5a6068; --bronze-lo:#2a2e33; --cg-ember:#ff7a2a; --cg-steel:#2b2e33; --cg-steel2:#1c1e22; --cg-edge:#6a7078;
  --f-display:'Chakra Petch', 'Barlow Semi Condensed', sans-serif; --f-body:'Barlow', sans-serif;
}
/* ---- the hand-written rules of Cindergate's look (tools/art/cg_css.py appends this file) ---- */
/* the panel surface: brushed anthracite under every window */
body #inv,body #help,body #skills,body #qlog,body #shop,body #gmenu .gside,body #mappanel{background-color:#1d2024!important;background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25)),url("../assets/ui/cgx/panel_tex.webp")!important;background-size:auto,256px 256px!important}
/* the modal boxes and the ornate frames: a machined edge, an ember hairline inside */
.mm-cbox{background:linear-gradient(180deg,rgba(43,46,51,.97),rgba(24,26,29,.98)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 4px #15171a,inset 0 0 0 5px rgba(255,122,42,.45),0 10px 34px rgba(0,0,0,.7)!important}
#egAltar .mm-cbox.egalt,:is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 5px #15171a,inset 0 0 0 6px rgba(255,122,42,.5),0 0 0 1px #000,0 12px 40px rgba(0,0,0,.75)!important}
.egalt .egcn{background-image:url("../assets/ui/cgx/c_tl.webp")!important}
.egalt .egcrest{content:url("../assets/ui/cgx/header_bar.webp")}
.egalt .egdv{background-image:url("../assets/ui/cgx/divider.webp")!important}
/* the item slots: recessed anthracite wells */
#inv .eq,#inv .cell,#shop .cell{border:0!important;border-radius:0!important;background:url("../assets/ui/cgx/item_slot.webp") center/100% 100% no-repeat!important;box-shadow:none!important}
/* the dialogue (the user, 20.10.: 'das Textfenster ist sicher auch noch nicht fertig'): Kharos' torn plate with its gold lines gone — an anthracite
   plate cut at its corners, a machined steel edge, an ember line along the top that fades at the ends, a short ember tab on the left under the
   name; the name in steel white beside a small hexagon, the Next button in its hexagonal socket */
#dialogue{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important}
#dialogue::before,#dialogue::after{display:none!important}
#dialogue .dplate{opacity:1!important;-webkit-mask:none!important;mask:none!important;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)!important;
  background:linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.95) 8%,rgba(255,122,42,.95) 60%,rgba(255,122,42,0)) left 16px top 0/calc(100% - 32px) 2px no-repeat,
  linear-gradient(#ff7a2a,#ff7a2a) left 0 top 16px/3px calc(100% - 32px) no-repeat,
  linear-gradient(90deg,rgba(120,128,138,0),rgba(120,128,138,.6) 10%,rgba(120,128,138,.6) 90%,rgba(120,128,138,0)) left 0 bottom 0/100% 1px no-repeat,
  linear-gradient(180deg,rgba(40,43,48,.92),rgba(20,22,25,.94)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
html body #dialogue .who{color:#f0f2f4!important}
#dialogue .who::before{width:calc(9px * var(--k))!important;height:calc(10px * var(--k))!important;transform:none!important;border:0!important;background:#ff7a2a;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
html body #dialogue .who::after{background:linear-gradient(90deg,rgba(255,122,42,.8),rgba(255,122,42,0))!important}
html body #dialogue .more{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;transform:none!important;clip-path:none!important;box-shadow:none!important}
html body #dialogue .more svg,html body #dialogue .more::before{stroke:#ffb27a!important;color:#ffb27a!important}
/* the loading bars ember */
#zload .zl-bar i,#loading #loadBar i{background:linear-gradient(90deg,#7a2a0a,#ff7a2a)!important;box-shadow:0 0 8px rgba(255,122,42,.7)!important}
/* the portrait (top left): an octagonal plate frame round the face, the level on a steel tab */
#tLvl .d{transform:none;width:calc(var(--pz) * 1.3);height:calc(var(--pz) * 1.3);border:0;border-image:none;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.75))}
#tLvl .d i{inset:13%;transform:none;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);z-index:-1}
#tLvl b{background:#2b2e33!important;border:1px solid #ff7a2a!important;color:#f0f2f4!important}
/* the minimap in its bezel */
#minimapWrap::after{content:"";position:absolute;inset:-5%;background:url("../assets/ui/cgx/map_ring.webp") center/100% 100% no-repeat;pointer-events:none;z-index:2}
/* the round buttons by the map and the menu: anthracite discs */
#minimapWrap .sbtn,#side .sbtn{background:url("../assets/ui/cgx/btn_round.webp") center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;border-image:none!important}
/* mirrored against Kharos (the user, 20.10.): the settings' page left, its categories right; the skills' tree right, details left */
#help .hbody{flex-direction:row-reverse}
#skills .sbody{flex-direction:row-reverse}
/* the class choice mirrored: the classes right in hexagonal sockets, upright, the title left */
#mainmenu .mm-classes{left:auto;right:calc(var(--mmx) + var(--sr))}
#mainmenu[data-mode="create"] .mm-info{right:auto;left:calc(var(--mmx) - 10px * var(--k) + var(--sl))} /* (mirrored on the hero choice only: on the hero list the card stays right of the list — it had covered it) */
#mainmenu.opening .mm-classes{animation-name:pFromR}#mainmenu.opening .mm-info{animation-name:pFromL}
#mainmenu .mm-cls{transform:none;width:calc(76px * var(--k));height:calc(76px * var(--k));border:0;border-image:none;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat}
#mainmenu .mm-cls svg{transform:none;width:38%;height:38%}
#mainmenu .mm-cls.on{transform:scale(1.12);border-image:none}
#mainmenu .mm-cls .rim{display:none}
#mainmenu .mm-cls .smoke{display:none}
#mainmenu[data-mode="create"] .mm-classes::before{background:linear-gradient(transparent,rgba(255,122,42,.4) 15%,rgba(255,122,42,.4) 85%,transparent)}
/* the class's glow: ember for the chosen one, a dim steel for the rest (no fantasy colours) */
#mainmenu .mm-cls{--cg:#ff7a2a!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))!important;animation:none!important}
#mainmenu .mm-cls.on{filter:drop-shadow(0 0 14px rgba(255,122,42,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.7))!important}
#mainmenu .mm-cls svg{stroke:#c8ccd2!important}#mainmenu .mm-cls.on svg{stroke:#ffb27a!important}
/* type: titles in Chakra Petch upper case, a little wider; the small caps faces read as plain upper case */
.sc{font-variant:normal;text-transform:uppercase;letter-spacing:.08em}
/* the primary buttons' words light on the dark plate (Kharos' were dark on gold) */
.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){color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
/* the skill bubbles (the phone's ring and the desktop bar's sockets): an anthracite disc in a machined steel rim, the big one with an ember ring */
.tbtn{background:radial-gradient(circle at 50% 35%,#2b2e33,#15171a) padding-box,linear-gradient(155deg,#8a9098,#3a3e44 38%,#5a6068 62%,#1c1e22) border-box!important}
.tbtn.main::before{background:conic-gradient(from var(--ga),transparent 0deg,transparent 300deg,rgba(255,190,140,calc(var(--gk) * .9)) 345deg,rgba(255,220,190,var(--gk)) 356deg,transparent 360deg),linear-gradient(#ff8a3a,#c0501a)!important}
.tbtn .ring circle{stroke:#ff7a2a!important;filter:drop-shadow(0 0 4px rgba(255,122,42,.8))!important}
/* the life bar (the phone's, top left): segmented as the chosen layout's — a chamfered anthracite housing, the life in ember-red cells */
#tLife{background:#4a5058!important;height:14px!important;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)!important}
#tLife::before{background:#121417!important;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 100%,0 100%)!important}
#tLife div{clip-path:none!important;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);box-shadow:0 0 6px rgba(255,90,30,.5)}
#tXp div{background:#ff7a2a!important}
/* the area banner: an anthracite header plate with its ember notch, no rods, no flags, no medallion */
#banner .bn-plate::before{background:url("../assets/ui/cgx/header_bar.webp") center/100% 100% no-repeat!important;left:0!important;right:0!important}
#banner .bn-plate::after,#banner .bn-rod,#banner .bn-fl,#banner .bn-fr,#banner .bn-med{display:none!important}
#banner .bn-plate{padding:0 calc(var(--bh) * .6)!important}
#banner .bn-k{color:#ff9a5a!important}#banner .bn-k:not(.colon)::after{background:#ff7a2a!important}
#banner .bn-t{color:#e8eaec!important;text-shadow:0 1px 3px #000!important}
/* the skill icons in the bubbles: steel white with an ember tint, not gold */
.tbtn svg,.tbtn .ic svg{stroke:#e6e8ea!important}
/* the area banner: the generated plate with its swept wings and the order's lantern on a hexagonal badge over it */
#banner .bn-plate::before{background-image:url("../assets/ui/cgx/banner.webp")!important;left:calc(var(--bh) * -.35)!important;right:calc(var(--bh) * -.35)!important;top:calc(var(--bh) * -.08)!important;bottom:calc(var(--bh) * -.12)!important}
#banner .bn-med{display:block!important;background:url("../assets/ui/cgx/banner_emblem.webp") center/contain no-repeat!important;top:calc(var(--bh) * -.4)!important;width:calc(var(--bh) * .62)!important;height:calc(var(--bh) * .7)!important;margin-left:calc(var(--bh) * -.31)!important}
#banner .bn-med::after{background:radial-gradient(closest-side,rgba(255,140,60,.5),rgba(255,122,42,.15) 55%,transparent)!important}
#banner .bn-plate{padding:0 calc(var(--bh) * .9)!important}
/* the desktop bar: the generated anthracite plate instead of Kharos' painted frame and rod */
body.hudbar #skillsT .barplate::before{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/bar_plate.webp") center/100% 100% no-repeat!important;inset:6px -14px 0 -10px!important}
body.hudbar #skillsT .barplate::after,body.hudbar #skillsT .barrod{display:none!important}
/* the health orb in the generated armour ring */
body.hudbar #skillsT .hporb img{display:none!important}
body.hudbar #skillsT .hporb::after{content:"";position:absolute;left:calc(45.5% - 54px);top:calc(52.4% - 54px);width:108px;height:108px;background:url("../assets/ui/cgx/orb_frame.webp") center/100% 100% no-repeat;pointer-events:none}
body.hudbar #skillsT .hporb .hplv{font-family:var(--f-display)!important;color:#ffd9bf!important;top:-4px!important}
/* the target plate over the crosshair's foe: anthracite, the foe's life in ember red, its kind in steel */
#ashTarget{background:linear-gradient(180deg,rgba(43,46,51,.94),rgba(24,26,29,.95))!important;border:0!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 -2px 0 2px rgba(255,122,42,.5),0 3px 10px rgba(0,0,0,.6)!important;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);border-radius:0!important}
#ashTarget .tn{font-family:var(--f-display)!important;color:#f0f2f4!important}#ashTarget .tl{color:#ff9a5a!important}#ashTarget .tk{color:#9aa0a8!important}
#ashTarget .tb{background:#121417!important;border:1px solid #000!important;border-radius:0!important}
#ashTarget .tb>i{background:linear-gradient(180deg,#ff8a3a,#c8301a)!important}
#ashTarget.elite{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #c08a3a,0 3px 10px rgba(0,0,0,.6)!important}#ashTarget.boss{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #ff7a2a,0 0 18px rgba(255,90,30,.35)!important}
/* the drops' labels (the user, 20.10.: 'ein angepasstes Layout für die Waffendrops bzw. alle Drops'): a flat anthracite tag, a bar of the rarity's
   colour down its left edge, the right end cut off at an angle, the name in the rarity's colour; the one under the finger lit by its colour */
.loot-label{--rc:#e4e0d6;border:0!important;border-image:none!important;border-radius:0!important;outline:0!important;padding:2px 14px 3px 11px!important;font-family:var(--f-display)!important;font-weight:600!important;letter-spacing:.03em!important;
  background:linear-gradient(90deg,var(--rc) 0 3px,transparent 3px),linear-gradient(180deg,rgba(43,46,51,.95),rgba(20,22,25,.95))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);filter:none!important;text-shadow:0 1px 2px #000!important}
.loot-label.magic{--rc:#5b8dff}.loot-label.rare{--rc:#f5cf3d}.loot-label.unique{--rc:#ff7d1f}.loot-label.artifact{--rc:#b36bff}.loot-label.quest{--rc:#3fe6d2}.loot-label.gold{--rc:#ffb35a;color:#ffc98a!important}
.loot-label.focus{animation:none!important;color:#0e0f11!important;text-shadow:none!important;background:linear-gradient(90deg,#fff 0 3px,var(--rc) 3px)!important;box-shadow:0 0 12px var(--rc)!important}
/* the loading paintings: seen whole — no sigil over them, a light vignette, the foot dark only under the words */
#zload.ash canvas.ashsig{display:none!important}
#zload.ash::after{background:radial-gradient(ellipse 90% 85% at 50% 40%,transparent 45%,rgba(0,0,0,.45) 100%),linear-gradient(transparent 62%,rgba(6,6,9,.9))!important}
#zload.ash .zl-img::after{display:none!important}
#zload.ash .zl-img{filter:brightness(1.45) contrast(1.05)}
/* the game menu: the class's mark in the octagonal plate frame, the XP line ember; Kharos' systems (the lodestar, mastery) not offered */
#gmenu .gem{border-radius:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat!important}
#gmenu .gem svg{stroke:#ffb27a!important;filter:drop-shadow(0 0 4px rgba(255,122,42,.45))!important;width:46%!important;height:46%!important}
#gmenu .gxp{box-shadow:0 0 0 1px #3a3e44!important;background:#0e0f11!important}
#gmenu .gxp div{background:linear-gradient(90deg,#a8400e,#ff7a2a)!important;box-shadow:0 0 6px rgba(255,122,42,.5)!important}
body.ashzone #gmenu [data-go="lode"],body.ashzone #gmenu [data-go="mastery"],body.ashzone #gmenu [data-go="pets"]{display:none!important}
/* the hero choice and the character list after the chosen previews (20.10.): the info an anthracite panel (cut corners, an ember line on top and
   down its left edge), no compass ring or star behind it, the title flourishes off; the name field a recessed anthracite well */
#mainmenu .mm-info{background:linear-gradient(90deg,#ff7a2a,#ff7a2a) left 0 top 14px/3px calc(100% - 28px) no-repeat,linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.9) 10%,rgba(255,122,42,.9) 70%,rgba(255,122,42,0)) left 14px top 0/calc(100% - 28px) 2px no-repeat,linear-gradient(180deg,rgba(40,43,48,.9),rgba(20,22,25,.92))!important;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);padding:calc(18px * var(--k)) calc(20px * var(--k))!important;box-sizing:border-box}
#mainmenu .mm-info::before,#mainmenu .mm-info::after,#mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after,#mainmenu[data-mode="create"] .mm-info.none::before{display:none!important}
#mainmenu .mm-info h2::before,#mainmenu .mm-info h2::after,#mainmenu[data-mode="create"] .mm-info.none h2::after{display:none!important}
#mainmenu .mm-info h2{color:#f0f2f4!important;text-shadow:0 2px 8px #000!important}
#mainmenu .mm-desc{color:#b8bec6!important}
#mainmenu .mm-tags span{background:#15171a;border:1px solid #3a3e44;padding:3px 8px;color:#d8dce0}#mainmenu .mm-tags svg{stroke:#ff9a5a!important}
#heroName{--plate:none!important;background:#0e0f11!important;border:1px solid #3a3e44!important;border-left:3px solid #ff7a2a!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)!important;padding-left:14px!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#heroName::placeholder{color:#7a8088!important}
#mainmenu .mm-info .mm-name::before,#mainmenu .mm-info .mm-name::after,#mainmenu .namewrap::before,#mainmenu .namewrap::after{display:none!important}
/* the class buttons and the list's portraits in hexagonal sockets on a phone too */
#mainmenu .mm-cls,body.touch #mainmenu .mm-cls{border-image:none!important;border:0!important;transform:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important}
#mainmenu .mm-cls.on{filter:drop-shadow(0 0 12px rgba(255,122,42,.8))!important}
#mainmenu .mm-slots .mm-port{border-image:none!important;border:0!important;transform:none!important;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat!important}
#mainmenu .mm-slots .mm-port i,#mainmenu .mm-slots .mm-port svg{transform:none!important}
#mainmenu>.mm-create::before,#mainmenu>.mm-select::before{background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,0) 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55))!important}
.mm-namebox::before,.mm-namebox::after,.mm-namebox i{display:none!important}
#heroName{padding-left:14px!important}
/* the class buttons: no square behind the hexagon */
#mainmenu .mm-cls::before{display:none!important}
#mainmenu .mm-cls{width:calc(64px * var(--k))!important;height:calc(64px * var(--k))!important}
#mainmenu[data-mode="create"] .mm-classes .mm-cls{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important}
/* the map panel: anthracite list, the page dark; the area banner hidden while a window is open */
body.ashzone :is(#mapPanel,#qlog) .mlist,body.ashzone #skills .slist{background:linear-gradient(180deg,rgba(40,43,48,.95),rgba(20,22,25,.96))!important;border-right:1px solid #3a3e44!important}
body.ashzone :is(#mapPanel,#qlog) .mpage{background:#0e0f11!important}
body.ashzone :is(#mapPanel,#qlog) .mframe{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 4px #15171a,inset 0 0 0 5px rgba(255,122,42,.4)!important;border-image:none!important;border:0!important}
body:has(#qlog.open, #mapPanel.open, #inv.open, #skills.open, #help.open, #gmenu.open, #shop.open) #banner{visibility:hidden!important}
.art-ic{object-fit:contain}

/* the game menu's middle open: the world behind it, only darkened a little */
body #gmenu{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.35))!important}
/* ===== after the ADAM templates (20.10., second pass) ===== */
/* the portraits: our own (assets/ui/cgpor, set as --cgpor by js/fps/ashui.js) in the HUD plate and the game menu */
#tLvl .d{background:none!important}#tLvl .d::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;pointer-events:none}
#tLvl .d i{background:var(--cgpor) center 22%/cover no-repeat!important;filter:none!important;z-index:0!important}
#gmenu .gem{position:relative;flex:none!important;width:56px!important;height:56px!important;background:none!important;-webkit-mask:none}
#gmenu .gem::before{content:"";position:absolute;inset:12%;background:var(--cgpor) center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
#gmenu .gem::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat}
#gmenu .gem svg{display:none!important}
/* the quest tracker: an anthracite plate, an ember line down its left edge, no rods, frames or flourishes */
html body.ashzone #quest#quest .qfr,html body.ashzone #quest#quest .qrod{display:none!important}
#quest{background:linear-gradient(180deg,rgba(40,43,48,.88),rgba(20,22,25,.9))!important;-webkit-mask:none!important;mask:none!important;padding:7px 14px 8px 14px!important;margin-left:0!important;box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.06)!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#quest .qt{color:#ff9a5a!important;font-family:var(--f-display)!important}#quest .qt::before{background:#ff7a2a!important;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transform:none!important}
#quest .qo{color:#e6e8ea!important;font-family:var(--f-body)!important;margin-left:15px!important}
#quest .qw{color:#ffb27a!important}
/* the party: the other hero's plate as one's own, smaller (js/fps/ashui.js) */
#ashParty .apm.cgplate{display:flex;align-items:center;gap:8px;min-width:0;padding:0!important;background:none!important;border:0!important;clip-path:none;box-shadow:none!important}
#ashParty .cgplate .por{position:relative;flex:none;width:34px;height:34px;background:center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:inset 0 0 0 2px #50565e}
#ashParty .cgplate .por::after{content:"";position:absolute;inset:-3px;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat}
#ashParty .cgplate .por b{position:absolute;z-index:1;left:50%;bottom:-6px;transform:translateX(-50%);padding:0 3px;background:#2b2e33;border:1px solid #ff7a2a;font:600 9px/1.3 var(--f-display);color:#f0f2f4}
#ashParty .cgplate .pb{display:flex;flex-direction:column;gap:3px}
#ashParty .cgplate .nm{font:600 11px/1 var(--f-display);letter-spacing:.06em;color:#e6e8ea;text-shadow:0 1px 2px #000}
#ashParty .cgplate .hp{display:block;width:130px;height:8px;background:#121417;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #4a5058}
#ashParty .cgplate .hp u{display:block;height:100%;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 1.5px),transparent calc(10% - 1.5px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 1.5px),transparent calc(10% - 1.5px) 10%)}
#ashParty{top:calc(70px * var(--k,1))!important}body.touch #ashParty{top:62px!important}
/* the ammunition on the primary button; the middle's count off (the gun's name stays) */
body.cgammo-on #fpsHud .ammo .n,body.cgammo-on #fpsHud .ammo .m{display:none!important}
#skillsT .tbtn.main .cgammo{position:absolute;z-index:3;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:baseline;gap:1px;padding:1px 6px;background:rgba(14,15,17,.85);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%);pointer-events:none;white-space:nowrap}
#skillsT .tbtn.main .cgammo b{font:700 15px/1.1 var(--f-display);color:#f0f2f4}#skillsT .tbtn.main .cgammo i{font:600 10px/1 var(--f-display);font-style:normal;color:#9aa0a8}
#skillsT .tbtn.main .cgammo.low b{color:#ff5a3a}#skillsT .tbtn.main .cgammo.rl b{color:#ff9a5a}
body:not(.touch) #skillsT .tbtn.main .cgammo{bottom:2px}body:not(.touch) #skillsT .tbtn.main .cgammo b{font-size:12px}
/* the skills panel: the primary socket shows the gun */
#skills .sock.primary img.cggun{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}
/* the game menu after its template (mock_esc): no painted cards, no diamonds — rows of a filled icon and a word, the left and the right column alike */
body.ashzone #gmenu .tile .art,body.ashzone #gmenu .tile svg,body.ashzone #gmenu .gl .tiles::after,body.ashzone #gmenu .tile .chev{display:none!important}
body.ashzone #gmenu .tiles{display:flex!important;flex-direction:column!important;gap:calc(8px * var(--k))!important;padding:0!important;background:none!important}
body.ashzone #gmenu .tile,body.ashzone #gmenu .gl .tile,body.ashzone #gmenu .gr .tile,body.ashzone #gmenu .gr .tile.bar,body.ashzone #gmenu .gr .tile:not(.bar){aspect-ratio:auto!important;height:calc(54px * var(--k))!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:calc(14px * var(--k))!important;padding:0 calc(16px * var(--k))!important;
  border:0!important;border-image:none!important;background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important;box-shadow:inset 0 0 0 1px #3a3e44!important;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);grid-column:auto!important}
body.ashzone #gmenu .tile::before{content:"";flex:none;width:calc(36px * var(--k));height:calc(36px * var(--k));background:var(--cgic) center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
body.ashzone #gmenu .tile span{flex:1;text-align:left!important;font:600 calc(15px * var(--k)) var(--f-display)!important;letter-spacing:.12em!important;color:#e6e8ea!important;background:none!important;padding:0!important;text-shadow:0 1px 2px #000!important}
body.ashzone #gmenu .tile:hover,body.ashzone #gmenu .tile.gtarget,body.ashzone #gmenu .tile:has(.nb){box-shadow:inset 0 0 0 1px #ff7a2a,0 0 10px rgba(255,122,42,.25)!important}
body.ashzone #gmenu [data-go="quests"]{--cgic:url("../assets/icons/cg2/quests.webp?v=5")}body.ashzone #gmenu [data-go="map"]{--cgic:url("../assets/icons/cg2/map.webp?v=5")}body.ashzone #gmenu [data-go="chron"],body.ashzone #gmenu [data-go="canon"]{--cgic:url("../assets/icons/cg2/codex.webp?v=5")}
body.ashzone #gmenu [data-go="skills"]{--cgic:url("../assets/icons/cg2/skills.webp?v=5")}body.ashzone #gmenu [data-go="inv"]{--cgic:url("../assets/icons/cg2/bag.webp?v=5")}body.ashzone #gmenu [data-go="stats"]{--cgic:url("../assets/icons/cg2/character.webp?v=5")}body.ashzone #gmenu [data-go="settings"]{--cgic:url("../assets/icons/cg2/settings.webp?v=5")}
body.ashzone #gmenu [data-go="bestiary"]{display:none!important}
body.ashzone #gmenu .ghead{background:none!important;padding:calc(10px * var(--k)) 0 calc(8px * var(--k))!important;text-align:left!important;border-bottom:1px solid rgba(255,122,42,.5);margin-bottom:calc(10px * var(--k))}
body.ashzone #gmenu .ghead span{color:#e6e8ea!important;font-size:calc(14px * var(--k))!important}
body.ashzone #gmenu .gside{padding:calc(14px * var(--k)) calc(16px * var(--k))!important}
body.ashzone #gmenu .gchar{background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94));box-shadow:inset 0 0 0 1px #3a3e44;padding:calc(10px * var(--k));clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);margin-bottom:calc(12px * var(--k))}
body.ashzone #gmenu .gchar::after,body.ashzone #gmenu .gchar::before{display:none!important}
/* the filled icons: lifted a little (they are dark metal), the class figures in their sockets, the jump button a socket like the skills' */
img.art-ic[src*="icons/cg2/"]{filter:drop-shadow(0 1px 2px #000)!important}
#mainmenu .mm-cls img.cgcls{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
#mainmenu .mm-cls.on img.cgcls{filter:brightness(1.15) drop-shadow(0 0 6px rgba(255,122,42,.8))}
#jumpT{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:58px!important;height:58px!important}
#jumpT img{width:62%;height:62%;object-fit:contain}
#camTog img,#side .sbtn img.art-ic,#gmenu .gbtn img.art-ic{width:62%!important;height:62%!important;object-fit:contain}
/* the logo (assets/ui/cgart/logo.webp, generated) in place of the typed title on the splash and the turn-your-phone screen */
.hglogo{width:min(72vw,760px);aspect-ratio:1117/437;background:url("../assets/ui/cgart/logo.webp?v=3") center/contain no-repeat}
.hglogo b,.hglogo i{display:none!important}
/* the Play button: one plate, no double rim, its word in the middle */
#playBtn,#loading #playBtn{border:0!important;border-image:none!important;--plate:gold;height:calc(48px * var(--k,1))!important;min-width:calc(190px * var(--k,1));padding:0 calc(34px * var(--k,1))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))!important}
/* hidden while the world is prepared (the user, 21.10.: Play stood there all through the loading — our display:inline-flex beat the hidden attribute) */
html body #playBtn[hidden],html body #loading #playBtn[hidden]{display:none!important}
#playBtn:hover{filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,122,42,.45))!important}
/* the portraits in the hero list, the skills page (in place of Kharos' painted figures) */
#mainmenu .mm-slots .mm-port{background:none!important}#mainmenu .mm-slots .mm-port::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;pointer-events:none}
#mainmenu .mm-slots .mm-port i{transform:none!important;inset:12%!important;background:var(--cgpor) center 22%/cover no-repeat!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important;filter:none!important}
#skills .spage::before,#skills[data-cls] .spage::before,#skills.alt .spage::before{background:var(--cgpor) center 18%/cover no-repeat!important;opacity:.32!important;-webkit-mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 75%)!important;mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 75%)!important;filter:saturate(.8)!important}
/* the skills page after ADAM: the loadout on the left (mirrored, js/fps/ashui.js), the words on the right; no engraved ring; sockets hexagonal; the list anthracite rows */
#skills .spage{flex-direction:row-reverse!important;background:linear-gradient(180deg,rgba(30,32,36,.97),rgba(18,20,23,.98)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important}
#skills .spage .sload,body:not(.touch) #skills .spage .sload{background:none!important;transform-origin:left bottom!important;margin-left:0!important;margin-right:calc(-236px * (1 - .78 * var(--k)))!important}
#skills .sinfo{border:0!important;background:linear-gradient(180deg,rgba(43,46,51,.9),rgba(24,26,29,.92))!important;box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px #3a3e44!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);text-align:left!important;padding:12px 16px!important;border-radius:0!important}
#skills .sock{border:0!important;border-radius:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;outline:0!important}
#skills .sock canvas{clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);border-radius:0!important;transform:scale(.78)}
#skills .sock.ok{filter:drop-shadow(0 0 8px rgba(255,122,42,.8))!important}
#skills .sock em{color:#c3c5c8!important;font-family:var(--f-display)!important}
#skills .slist{background:linear-gradient(180deg,rgba(36,39,44,.97),rgba(20,22,25,.98))!important}
#skills .slist h3{color:#9aa0a8!important;font-family:var(--f-display)!important;background:none!important;border-bottom:1px solid rgba(255,122,42,.45);padding-bottom:6px!important}
#skills .sk{border:0!important;border-image:none!important;background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important;box-shadow:inset 0 0 0 1px #3a3e44!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)!important;-webkit-mask:none!important;mask:none!important}
#skills .sk::before,#skills .sk::after{display:none!important}
#skills .sk.sel{box-shadow:inset 0 0 0 1px #ff7a2a,inset 3px 0 0 #ff7a2a!important}
#skills .sk canvas{border-radius:0!important;clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);background:#15171a}
#skills .sk .tx b{color:#e6e8ea!important;font-family:var(--f-display)!important}#skills .sk .tx small{color:#9aa0a8!important}#skills .sk .ok{color:#ff7a2a!important}
/* the HUD's skill buttons: hexagonal sockets like the templates (no round disc, no steel ring), the icon inside; the weapon's the same, larger */
#skillsT .tbtn{border-radius:0!important;border:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;overflow:visible!important}
#skillsT .tbtn canvas,#skillsT .tbtn .ic{border-radius:0!important;clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);transform:scale(.7);background:transparent!important}
#skillsT .tbtn.main::before{display:none!important}
#skillsT .tbtn .ring{display:none!important}
/* the game menu's rows compact */
body.ashzone #gmenu .tile,body.ashzone #gmenu .gl .tile,body.ashzone #gmenu .gr .tile,body.ashzone #gmenu .gr .tile.bar,body.ashzone #gmenu .gr .tile:not(.bar){height:46px!important;min-height:0!important;max-height:46px!important}
body.ashzone #gmenu .tile::before{width:28px!important;height:28px!important}
body.ashzone #gmenu .tile span{font-size:14px!important}
body.ashzone #gmenu .gside{justify-content:flex-start!important}
/* the skills page's words readable, the chosen row an outline, the sockets without Kharos' rings */
#skills .sinfo,#skills .sinfo *{color:#e6e8ea}#skills .sinfo h2,#skills .sinfo h3,#skills .sinfo b{color:#ffffff!important;opacity:1!important}#skills .sinfo small,#skills .sinfo .meta,#skills .sinfo em{color:#9aa0a8!important}
#skills .sk.sel{background:linear-gradient(180deg,rgba(60,40,30,.95),rgba(30,24,22,.95))!important}
#skills .sock::before,#skills .sock::after{display:none!important}
/* the bubble buttons: the icon inset well clear of the socket's rim, in its middle (the user, 20.10.: 'die brauchen unbedingt einen Offset, damit man sie in der Mitte gut sieht') */
#skillsT .tbtn canvas,#skillsT .tbtn .ic,#skillsT .tbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:48%!important;height:48%!important;transform:translate(-50%,-50%)!important;clip-path:none!important;object-fit:contain}
#skillsT .tbtn.main img,#skillsT .tbtn.main canvas{width:52%!important;height:52%!important}
#jumpT img{width:48%!important;height:48%!important}
#skills .sock canvas{transform:scale(.5)!important}

body.ashzone #gmenu .gchar{display:flex!important;align-items:center;gap:12px}
body.ashzone #gmenu .tile{overflow:hidden!important}
body.ashzone #gmenu .tile::before{background-size:contain!important}
#gmenu .gchar img.cgcls,#gmenu .gem img.cgcls{display:none!important}
body.ashzone #gmenu .gchar{background-image:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important}
/* the skills page: its words light (Kharos' page colour was dark ink on parchment), the chosen row an outline, not a filled plate */
#skills .spage{color:#e6e8ea!important}
#skills .sinfo .hd{color:#ffffff!important;border-color:rgba(255,122,42,.5)!important;font-family:var(--f-display)!important}
#skills .sinfo .body,#skills .sinfo .ln{color:#d8dce0!important}#skills .sinfo .meta{color:#9aa0a8!important}#skills .sinfo .sep{background:rgba(255,122,42,.4)!important}
html body #skills .sk.sel,html body #skills .sk.sel:hover{background:linear-gradient(180deg,rgba(60,42,32,.96),rgba(32,26,24,.96))!important;background-color:transparent!important}
#skills .sk.sel .tx b{color:#ffffff!important}#skills .sk.sel .tx small{color:#ffb27a!important}
html body #skills .spage .sinfo .hd{color:#ffffff!important}html body #skills .spage .sinfo .ln,html body #skills .spage .sinfo .body{color:#d8dce0!important}
html body #skills .slist .sk.sel{--fc:#4a3a32!important;outline:0!important}
html body #skills .slist .sk{--fc:#2b2e33!important}
/* the icon safe zone (memory: round-button-safe-area): the socket's inner face is ~60% of the button — every icon ~34% of the button, centred */
html body #skillsT .tbtn canvas,html body #skillsT .tbtn .ic,html body #skillsT .tbtn img,html body #skillsT .tbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:34%!important;height:34%!important;transform:translate(-50%,-50%)!important;object-fit:contain!important;margin:0!important;max-width:none!important}
html body #skillsT .tbtn.main img,html body #skillsT .tbtn.main canvas,html body #skillsT .tbtn.main img.hgun{width:46%!important;height:46%!important;top:44%!important}
html body #jumpT img{width:34%!important;height:34%!important}
html body #side .sbtn img.art-ic,html body #camTog img,html body #gmenu .gbtn img.art-ic{width:42%!important;height:42%!important}
html body #mainmenu .mm-cls img.cgcls{width:44%!important;height:44%!important}
html body #skills .sock canvas,html body #skills .sock img{transform:scale(.4)!important}
/* round stays round (the user, 20.10.: no hexagons in round containers): the bubbles, the jump button and the skills page's sockets a round anthracite disc in a
   machined steel ring, the icon free inside it with its safe zone — no hex picture in or behind them */
html body #skillsT .tbtn,html body #jumpT,html body #skills .sock{border-radius:50%!important;border:2px solid transparent!important;background:radial-gradient(circle at 50% 38%,#2e3136,#15171a 70%) padding-box,linear-gradient(155deg,#9aa0a8,#3a3e44 40%,#5a6068 62%,#1c1e22) border-box!important;box-shadow:0 0 0 1.5px #070809,0 3px 8px rgba(0,0,0,.6)!important;overflow:hidden!important}
html body #skillsT .tbtn.main{border-width:3px!important;box-shadow:0 0 0 1.5px #070809,0 0 0 4px rgba(255,122,42,.55),0 3px 8px rgba(0,0,0,.6)!important}
html body #skills .sock::before,html body #skills .sock::after,html body #skills .sock.ok::after{display:none!important;background:none!important}
html body #skills .sock canvas,html body #skills .sock img{position:absolute!important;left:50%!important;top:50%!important;width:50%!important;height:50%!important;transform:translate(-50%,-50%)!important;clip-path:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
html body #skills .sock.ok{box-shadow:0 0 0 1.5px #070809,0 0 12px rgba(255,122,42,.8)!important;filter:none!important}
html body #skillsT .tbtn canvas,html body #skillsT .tbtn .ic,html body #skillsT .tbtn img,html body #skillsT .tbtn img.art-ic{width:50%!important;height:50%!important;border-radius:0!important}
html body #skillsT .tbtn.main img,html body #skillsT .tbtn.main canvas,html body #skillsT .tbtn.main img.hgun{width:58%!important;height:58%!important;top:42%!important}
html body #jumpT img{width:50%!important;height:50%!important}
html body #skills .sk canvas{clip-path:none!important;border-radius:50%!important;background:#15171a!important}
html body #skills .sock{overflow:visible!important}html body #skills .sock em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);z-index:2}
/* the map buttons: their icons larger, dead centre — the ring picture drawn square (it was stretched off its middle) */
html body #minimapWrap .sbtn,html body #side .sbtn{background:url("../assets/ui/cgx/btn_round.webp") center/contain no-repeat!important}
html body #side .sbtn img.art-ic,html body #camTog img,html body #minimapWrap .sbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:64%!important;height:64%!important;transform:translate(-50%,-50%)!important;margin:0!important}
/* the painted skill icons (Kharos' way, our palette): the picture fills the socket's round face inside its steel ring; the subject keeps its own safe zone */
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic{width:86%!important;height:86%!important;border-radius:50%!important}
html body #skills .sock:not(.primary) canvas,html body #skills .sock:not(.primary) img{width:86%!important;height:86%!important;border-radius:50%!important}
html body #skills .sk canvas{border-radius:50%!important}
/* the quest tracker after the template (20.10., the user: 'das Quest-Panel ist Slop'): a compact anthracite card under the player plate —
   a small 'QUEST' label with a hexagon, the quest's name in ember capitals, the objective in plain light text behind a chevron; no diamonds, no serif, no purple */
html body.ashzone #quest{left:calc(14px + var(--sl,0px))!important;top:calc(96px * var(--k,1))!important;width:min(250px,34vw)!important;max-width:none!important;padding:7px 12px 9px 12px!important;margin:0!important;
  background:linear-gradient(180deg,rgba(32,35,40,.86),rgba(16,18,21,.88))!important;box-shadow:inset 2px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.05)!important;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)!important;text-shadow:none!important}
html body.ashzone #quest::before{content:"QUEST"!important;position:static!important;display:block!important;opacity:1!important;inset:auto!important;background:none!important;font:600 8px/1 var(--f-display);letter-spacing:.24em;color:#8a9098;margin-bottom:4px;animation:none!important}
html body.ashzone #quest::after{display:none!important}
html body.ashzone #quest .qt{display:block!important;font:700 11px/1.2 var(--f-display)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#ff8a3a!important;text-shadow:0 1px 2px #000!important}
html body.ashzone #quest .qt::before{display:none!important}
html body.ashzone #quest .qo{margin:3px 0 0 0!important;padding-left:12px!important;position:relative;font:500 12px/1.3 'Barlow',sans-serif!important;color:#e6e8ea!important;text-shadow:0 1px 2px #000!important}
html body.ashzone #quest .qo::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:5px;border:solid #ff7a2a;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
html body.ashzone #quest .qw{margin-left:12px!important;font:italic 500 11px/1.25 'Barlow',sans-serif!important;color:#ffb27a!important}
body.touch #ashParty{top:calc(96px * var(--k,1) + 74px)!important}
/* the HUD's frames darker (the user, 20.10.: 'UI-Panels, Karte und so auf dem Screen abdunkeln'): the map's bezel, the banner, the round buttons, the portrait frame, the bubbles' rims */
#minimapWrap::after,#minimapWrap .sbtn,#side .sbtn,#tLvl .d::after,#tLvl .d{filter:brightness(.62) saturate(.9)!important}
#minimapWrap .sbtn img,#side .sbtn img{filter:brightness(1.6)!important}
html body #skillsT .tbtn,html body #jumpT{background:radial-gradient(circle at 50% 38%,#24272b,#0f1113 70%) padding-box,linear-gradient(155deg,#6a7078,#2a2d31 40%,#40454c 62%,#141618) border-box!important}
/* the octagonal sockets back (the user, 20.10.: 'warum haben wir die Panels nicht so eckig gelassen, sah doch gut aus'): the bubbles, the jump button and the skills
   page's sockets the octagonal plate, the painted icon cut to the same octagon inside its rim — round nowhere in these */
html body #skillsT .tbtn,html body #jumpT,html body #skills .sock{border-radius:0!important;border:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;overflow:visible!important}
html body #skillsT .tbtn.main{box-shadow:none!important;filter:drop-shadow(0 0 6px rgba(255,122,42,.45))}
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic,html body #skills .sock:not(.primary) canvas,html body #skills .sock:not(.primary) img{width:66%!important;height:66%!important;border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #skills .sk canvas{border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #jumpT img{width:46%!important;height:46%!important}
html body #skills .spage .sock,html body #skills .spage .sock.ok,html body #skills .spage .sock.primary{border-radius:0!important;border:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important}
html body #skills .spage .sock.ok{filter:drop-shadow(0 0 8px rgba(255,122,42,.85))!important}
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important;box-shadow:none!important}
/* the skills' and the gun's icons free-standing (transparent) in the octagonal sockets, a safe zone round them; the gun without its dark tile */
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic,html body #skills .spage .sock:not(.primary) canvas,html body #skills .spage .sock:not(.primary) img{width:60%!important;height:60%!important;clip-path:none!important;border-radius:0!important;background:transparent!important}
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{clip-path:none!important;background:transparent!important}
html body #skillsT .tbtn.main img.hgun,html body #skillsT .tbtn.main img{background:none!important;box-shadow:none!important;border-radius:0!important;width:64%!important;height:64%!important;top:44%!important;filter:drop-shadow(0 2px 3px #000)}
html body #skills .spage .sock.primary img.cggun{background:none!important;inset:auto!important;left:50%!important;top:50%!important;width:62%!important;height:62%!important;transform:translate(-50%,-50%)!important}
/* the skills page one panel (the user, 20.10.): the ember line down its very left edge, the loadout and the words inside it; the words' own box gone */
html body #skills .spage{box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.05)!important;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
html body #skills .sinfo{background:none!important;box-shadow:none!important;clip-path:none!important;padding-left:8px!important}
html body #skills .spage .sload,body:not(.touch) #skills .spage .sload{width:250px!important;height:230px!important;transform:none!important;margin:0!important;align-self:center!important}
/* the hero list after the template mirrored (the user, 20.10.): the list on the right, the chosen hero's card on the left */
#mainmenu[data-mode="select"] .mm-slots{left:auto!important;right:calc(var(--mmx) - 22px + var(--sr))!important}
#mainmenu[data-mode="select"] .mm-info{right:auto!important;left:calc(var(--mmx) - 10px * var(--k) + var(--sl))!important}
#mainmenu[data-mode="select"].opening .mm-slots{animation-name:pFromR}
/* the splash one centred group (the user, 20.10.: 'das Panel ist nicht centered'): the logo, the line under it and Play stacked in the screen's middle — no 17vh pushes;
   Play's plate drawn by CSS too, so it never shows as a bare word while the plate's canvas is still being made */
html body #loading{justify-content:center!important;align-items:center!important;gap:calc(10px * var(--k,1))}
html body #loading #splash{width:min(66vw,760px)!important;max-height:34vh!important;aspect-ratio:1307/420!important;margin:0!important}
html body #loading #splash .hglogo{width:100%!important;height:100%!important}
html body #loading #loadText{margin:calc(2px * var(--k,1)) 0 0!important}
html body #loading #playBtn{margin:calc(14px * var(--k,1)) 0 0!important;background:url("../assets/ui/cgx/btn_pri.webp") center/100% 100% no-repeat}
/* the target plate (the user, 20.10.: 'in das Panel, in dem die normalen Toasts erscheinen, oben im Kreis ein Enemy-Symbol'): the area banner's own plate with its swept wings, its
   hexagonal badge on top carrying the foe's mark (js/fps/ashui.js); the name centred in it, the kind and level under it, the life a segmented ember bar along its foot.
   Under the area banner while that shows, at the top when it does not (--tgtop) */
html body.ashzone #ashTarget{top:var(--tgtop,calc(34px + var(--st,0px)))!important;width:min(380px,33vw)!important;min-width:0!important;aspect-ratio:1374/353;box-sizing:border-box;padding:0 12% 0!important;
  display:none;grid-template-columns:1fr!important;grid-template-rows:auto auto auto;align-content:center!important;justify-items:center;gap:2px 0!important;
  background:url("../assets/ui/cgx/banner.webp") center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;overflow:visible!important;transition:top .25s}
html body.ashzone #ashTarget.on{display:grid!important}
html body.ashzone #ashTarget .tbadge{position:absolute;left:50%;top:-24%;width:14%;aspect-ratio:1;transform:translateX(-50%);background:url("../assets/ui/cgx/hex_socket.webp") center/contain no-repeat;display:flex;align-items:center;justify-content:center;color:#d8301e;filter:drop-shadow(0 2px 3px #000)}
html body.ashzone #ashTarget .tbadge svg{width:50%;height:50%;margin-top:0;filter:drop-shadow(0 0 4px rgba(255,60,30,.7))}
html body.ashzone #ashTarget.elite .tbadge{color:#e8b040}html body.ashzone #ashTarget.boss .tbadge{color:#ff7a2a}
html body.ashzone #ashTarget .tn{grid-row:1;font:700 clamp(12px,1.6vw,16px)/1.1 var(--f-display)!important;letter-spacing:.12em!important;color:#f0f2f4!important;text-transform:uppercase;text-shadow:0 1px 3px #000!important;margin-top:4%}
html body.ashzone #ashTarget .tk{grid-row:2;grid-column:1!important;font:600 clamp(8px,1vw,10px)/1.2 var(--f-display)!important;letter-spacing:.16em!important;color:#9aa0a8!important;text-align:center}
html body.ashzone #ashTarget .tl{position:absolute;right:13%;top:22%;font:700 clamp(8px,1vw,10px)/1 var(--f-display)!important;color:#ff9a5a!important;letter-spacing:.08em}
html body.ashzone #ashTarget .tb{grid-row:3;grid-column:1!important;width:100%;height:6px!important;margin-top:3px!important;background:#121417!important;border:0!important;box-shadow:inset 0 0 0 1px #3a3e44!important;border-radius:0!important}
html body.ashzone #ashTarget .tb>i{background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%);mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%)}
/* the target plate's words in order: the badge above the plate, the name, then kind · level · distance on one line, the bar — nothing overlapping */
html body.ashzone #ashTarget{width:min(420px,36vw)!important;padding:0 9%!important;grid-template-columns:auto auto!important;justify-content:center!important;column-gap:10px!important}
html body.ashzone #ashTarget .tbadge{top:-34%!important;width:12%!important}
html body.ashzone #ashTarget .tn{grid-column:1 / -1!important;grid-row:1!important;margin-top:3%!important;font-size:clamp(11px,1.4vw,15px)!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #ashTarget .tk{grid-column:1!important;grid-row:2!important;white-space:nowrap;text-align:right}
html body.ashzone #ashTarget .tl{position:static!important;grid-column:2!important;grid-row:2!important;white-space:nowrap;font-size:clamp(8px,1vw,10px)!important}
html body.ashzone #ashTarget .tb{grid-column:1 / -1!important;grid-row:3!important;width:min(100%,260px)!important;justify-self:center}
/* the target plate narrower (the user, 20.10.: 'viel zu groß und zu breit') */
html body.ashzone #ashTarget{width:min(300px,26vw)!important;padding:0 7%!important}
html body.ashzone #ashTarget .tbadge{width:13%!important;top:-30%!important}
html body.ashzone #ashTarget .tn{font-size:clamp(10px,1.15vw,13px)!important}
html body.ashzone #ashTarget .tk,html body.ashzone #ashTarget .tl{font-size:clamp(7px,.85vw,9px)!important;letter-spacing:.1em!important}
html body.ashzone #ashTarget .tb{height:5px!important;width:100%!important}
/* the quest tracker in the HUD's language (the user, 20.10.: 'Quest-Panel auch Slop'): an octagonal socket on the left with the quest icon, beside it the name in ember capitals
   and the objective — on a chamfered anthracite plate whose top edge carries the ember line, fading out to the right */
html body.ashzone #quest{display:grid!important;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;width:min(270px,32vw)!important;padding:8px 14px 9px 8px!important;
  background:linear-gradient(90deg,rgba(255,122,42,.9),rgba(255,122,42,0) 75%) left top/100% 2px no-repeat,linear-gradient(180deg,rgba(36,39,44,.9),rgba(16,18,21,.9))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)!important}
html body.ashzone #quest::before{content:""!important;grid-column:1;grid-row:1 / span 3;width:34px;height:34px;background:url("../assets/icons/cg2/quests.webp?v=5") center/56% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;margin:0!important;font-size:0!important}
html body.ashzone #quest .qf{grid-column:2}
html body.ashzone #quest .qt{grid-column:2;font:700 10px/1.2 var(--f-display)!important;letter-spacing:.14em!important;color:#ff8a3a!important}
html body.ashzone #quest .qo{grid-column:2;margin:2px 0 0!important;padding-left:0!important;font:500 12px/1.3 'Barlow',sans-serif!important}
html body.ashzone #quest .qo::before{display:none!important}
html body.ashzone #quest .qw{grid-column:2;margin:1px 0 0!important}
/* the target plate tinted red (the user, 20.10.: 'einen roten Tint wegen Gegner'): the plate picture redrawn behind the words through a red filter */
html body.ashzone #ashTarget{background:none!important;isolation:isolate}
html body.ashzone #ashTarget::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../assets/ui/cgx/banner.webp") center/100% 100% no-repeat;filter:sepia(1) hue-rotate(-38deg) saturate(2.6) brightness(.72) contrast(1.1);display:block!important;opacity:1!important}
html body.ashzone #ashTarget .tbadge{filter:sepia(1) hue-rotate(-38deg) saturate(2.2) brightness(.8) drop-shadow(0 2px 3px #000)}
html body.ashzone #ashTarget .tbadge svg{filter:none}
/* the quest card: only as wide as its words, gone when there is no quest; its icon lifted */
html body.ashzone #quest{width:auto!important;max-width:min(300px,40vw)!important}
html body.ashzone #quest:has(.qt:empty){display:none!important}
html body.ashzone #quest::before{filter:brightness(1.5)}
/* the jump button never a white face */
html body #jumpT,html body #jumpT:active,html body #jumpT.on,html body #jumpT.down{background-color:transparent!important}
/* the octagonal sockets' faces filled dark (their middle is open in the picture: a bright floor showed through as a white face) */
html body #skillsT .tbtn,html body #jumpT,html body #skills .spage .sock,html body #skills .spage .sock.ok,html body #skills .spage .sock.primary{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23101215' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
/* the badge's skull red, only the socket tinted */
html body.ashzone #ashTarget .tbadge{filter:drop-shadow(0 2px 3px #000)!important;background:none!important}
html body.ashzone #ashTarget .tbadge::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../assets/ui/cgx/hex_socket.webp") center/contain no-repeat,radial-gradient(circle,rgba(20,8,6,.95) 0 37%,transparent 38%) center/100% 100% no-repeat;filter:sepia(1) hue-rotate(-38deg) saturate(2.2) brightness(.8)}
html body.ashzone #ashTarget .tbadge svg{position:relative;color:#ff3a24;filter:drop-shadow(0 0 4px rgba(255,50,30,.8))!important}
/* the target plate only the name and the life (the user, 20.10.: the info line out, narrower, smaller type) */
html body.ashzone #ashTarget{width:min(220px,20vw)!important;padding:0 8%!important}
html body.ashzone #ashTarget .tk,html body.ashzone #ashTarget .tl{display:none!important}
html body.ashzone #ashTarget .tn{font-size:clamp(9px,1vw,11px)!important;letter-spacing:.1em!important;margin-top:6%!important}
html body.ashzone #ashTarget .tb{grid-row:2!important;height:4px!important;margin-top:4px!important}
html body.ashzone #ashTarget .tbadge{width:15%!important;top:-34%!important}
html body.ashzone #ashTarget{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important;justify-items:center!important;padding:0 12%!important}
html body.ashzone #ashTarget .tn{grid-column:1!important;width:100%;text-align:center;overflow:visible!important;text-overflow:clip!important}
html body.ashzone #ashTarget .tb{grid-column:1!important;width:100%!important;max-width:none!important}
html body.ashzone #ashTarget.on{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important}
html body.ashzone #ashTarget .tn{order:1;width:auto!important;margin:5% 0 0!important;text-align:center!important}
html body.ashzone #ashTarget .tb{order:2;display:block!important;width:78%!important;margin:0!important;height:4px!important;flex:none}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{padding:0 34px!important;width:min(220px,30vw)!important}
html body.ashzone #ashTarget .tn{margin:9px 0 0!important;white-space:nowrap}
/* the player's plate after the ADAM template */
#tBars{width:min(330px,40vw)!important}
#tBars .row{align-items:stretch!important;gap:0!important}
#tLvl{z-index:2;margin-right:-10px}
#tLvl b{display:none!important}
#tBars .cgplate2{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 18px 7px 20px;margin:6px 0;background:linear-gradient(180deg,rgba(40,43,48,.92),rgba(18,20,23,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 3px rgba(0,0,0,.35);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
#tBars .cgplate2 .nm{font:700 15px/1 var(--f-display);letter-spacing:.06em;color:#d8dce0;text-shadow:0 1px 2px #000;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:5px}
#tBars .cgplate2 .ln{display:flex;align-items:center;gap:10px}
#tBars .cgplate2 .lv{flex:none;font:500 13px/1 var(--f-display);color:#c3c5c8}
#tBars .cgplate2 #tLife{flex:1;height:9px!important;margin:0!important}
#tXp{margin-left:calc(var(--pz) * 1.42 + 10px)!important}
html body #tBars{width:min(300px,30vw)!important;max-width:300px!important}
html body #tBars .row{width:100%!important}
html body #tBars .cgplate2{max-width:230px;padding:6px 16px 8px 18px!important}
html body #tBars .cgplate2 .lv{line-height:1.2!important;font-size:12px!important;overflow:visible}
html body #tBars .cgplate2 #tLife{height:9px!important;min-height:9px!important;flex:1 1 auto;max-width:none!important;width:auto!important}
html body #tBars .cgplate2 #tLife div{height:100%!important}
/* the player's plate: the XP hairline no longer crosses the level */
html body #tXp{display:none!important}
/* the target plate compact and in one row (the user, 20.10.: the badge into the plate on the left, the name beside it written out, the life under the name, higher):
   a red-tinted chamfered anthracite plate — [badge] [NAME / life bar] */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{top:var(--tgtop,calc(8px + var(--st,0px)))!important;width:auto!important;min-width:150px!important;max-width:min(260px,30vw)!important;aspect-ratio:auto!important;
  padding:5px 14px 6px 5px!important;display:none;grid-template-columns:30px auto!important;grid-template-rows:auto auto!important;column-gap:9px!important;row-gap:4px!important;align-items:center!important;justify-items:start!important;
  background:linear-gradient(180deg,rgba(56,22,18,.92),rgba(26,12,10,.94))!important;box-shadow:inset 0 0 0 1px rgba(255,90,60,.28),inset 0 -2px 0 rgba(255,60,30,.6)!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)!important}
html body.ashzone #ashTarget.on{display:grid!important;flex-direction:initial!important}
html body.ashzone #ashTarget::before{display:none!important}
html body.ashzone #ashTarget .tbadge{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:30px!important;height:30px!important;grid-column:1;grid-row:1 / span 2}
html body.ashzone #ashTarget .tn{grid-column:2!important;grid-row:1!important;order:0;margin:0!important;width:auto!important;text-align:left!important;font-size:12px!important;letter-spacing:.08em!important;white-space:nowrap;overflow:visible!important;text-overflow:clip!important}
html body.ashzone #ashTarget .tb{grid-column:2!important;grid-row:2!important;order:0;width:100%!important;min-width:110px;height:5px!important;margin:0!important;justify-self:stretch}
/* ===== the three HUD plates as real art (assets/ui/cgx/plate_*.webp, generated after the banner and the sockets — the user, 20.10.: the CSS ones were slop);
   the content set into the plates' own faces, positions in % of each plate ===== */
/* the player: the portrait in the octagon (left 4–39%), the name in the face's upper half, level and life in its lower half */
html body #tBars{width:min(236px,30vw)!important;max-width:none!important;aspect-ratio:1411/631;height:auto!important;background:url("../assets/ui/cgx/plate_player.webp") center/100% 100% no-repeat;top:calc(8px + var(--st,0px))!important}
html body #tBars .row{position:static!important;display:block!important;width:auto!important}
html body #tLvl{position:absolute!important;left:6.5%;top:12%;width:30%!important;height:auto!important;aspect-ratio:1;margin:0!important;z-index:1}
html body #tLvl .d{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background:none!important;filter:none!important}
html body #tLvl .d::after{display:none!important}
html body #tLvl .d i{inset:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #tBars .cgplate2{position:absolute!important;left:42%;right:6%;top:27%;bottom:24%;margin:0!important;padding:0 4px!important;background:none!important;box-shadow:none!important;clip-path:none!important;display:grid!important;grid-template-rows:1fr 1fr;gap:0!important;max-width:none!important}
html body #tBars .cgplate2 .nm{align-self:center;border:0!important;padding:0!important;font-size:clamp(11px,1.25vw,15px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #tBars .cgplate2 .ln{align-self:center}
/* the quest: its icon in the small octagon, the name and the objective in the two halves of the face; as compact as the enemy's */
html body.ashzone #quest{display:block!important;width:min(250px,30vw)!important;max-width:none!important;aspect-ratio:1360/575;height:auto!important;padding:0!important;background:url("../assets/ui/cgx/plate_quest.webp") center/100% 100% no-repeat!important;box-shadow:none!important;clip-path:none!important;top:auto!important}
html body.ashzone #quest::before{position:absolute!important;left:3.7%;top:9.4%;width:32%!important;height:80%!important;background:url("../assets/icons/cg2/quests.webp?v=5") center/46% no-repeat!important;filter:brightness(1.4)}
html body.ashzone #quest .qt{position:absolute;left:40%;right:5%;top:27%;height:31%;display:flex!important;align-items:center;font-size:clamp(8px,.95vw,11px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #quest .qo{position:absolute;left:40%;right:5%;top:60%;height:20%;display:flex;align-items:center;margin:0!important;font-size:clamp(8px,.95vw,11px)!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #quest .qw,html body.ashzone #quest .qf{display:none!important}
/* the enemy: its mark in the small octagon, the name and the life in the face's two halves */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:min(220px,26vw)!important;min-width:0!important;max-width:none!important;aspect-ratio:1468/492;padding:0!important;background:url("../assets/ui/cgx/plate_foe.webp") center/100% 100% no-repeat!important;box-shadow:none!important;clip-path:none!important}
html body.ashzone #ashTarget.on{display:block!important}
html body.ashzone #ashTarget .tbadge{position:absolute!important;left:2.1%!important;top:8.7%!important;width:24.5%!important;height:82%!important;background:none!important;filter:none!important}
html body.ashzone #ashTarget .tbadge::before{display:none!important}
html body.ashzone #ashTarget .tbadge svg{width:50%!important;height:50%!important}
html body.ashzone #ashTarget .tn{position:absolute!important;left:29%;right:7%;top:23%;height:25%;display:flex!important;align-items:center;font-size:clamp(8px,.95vw,11px)!important;margin:0!important}
html body.ashzone #ashTarget .tb{position:absolute!important;left:30%!important;right:8%!important;top:56%!important;width:auto!important;min-width:0!important;height:5px!important;margin:0!important}
/* the plates' sizes set outright (an aspect ratio on a box with only absolute children came out 0 high) */
html body #tBars{width:236px!important;height:106px!important;aspect-ratio:auto!important}
html body #tBars .cgplate2{justify-items:start!important;text-align:left!important}
html body #tBars .cgplate2 .nm{justify-self:start!important;text-align:left!important}
html body #tBars .cgplate2 .ln{width:100%!important;justify-self:stretch!important;display:flex!important}
html body #tBars .cgplate2 .ln #tLife{flex:1 1 auto!important;width:auto!important}
html body.ashzone #quest{width:214px!important;height:90px!important;aspect-ratio:auto!important;position:fixed!important;left:calc(14px + var(--sl,0px))!important;top:calc(118px + var(--st,0px))!important}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:214px!important;height:72px!important;aspect-ratio:auto!important}
body.touch #ashParty{top:calc(214px + var(--st,0px))!important}
/* the skills page's locked sockets the same octagon, dimmed */
html body #skills .spage .sock.locked{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;opacity:.55!important;border:0!important}
/* the player's plate face: name above, level and life below, both from the left */
html body #tBars .cgplate2{display:flex!important;flex-direction:column!important;justify-content:space-around!important;align-items:stretch!important}
html body #tBars .cgplate2 .nm{text-align:left!important;width:100%}
html body #tBars .cgplate2 .ln{width:100%!important;align-self:stretch!important}
html body #tBars .cgplate2 .ln #tLife{display:block!important;flex:1 1 auto!important;min-width:60px!important}
/* the quest's words kept inside the plate's face */
html body.ashzone #quest .qt,html body.ashzone #quest .qo{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important;line-height:normal!important}
html body.ashzone #quest .qt{top:30%!important;height:auto!important}html body.ashzone #quest .qo{top:58%!important;height:auto!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{position:absolute!important;left:40%!important;right:5%!important;width:auto!important;max-width:55%!important}
/* the three plates as 3-slice art (border-image): the octagon cap on the left and the chamfered end on the right keep their shape,
   only the face between them stretches, so each plate is as wide as its words; heights: hero 72, quest 60, foe 54 (slices measured in the art) */
html body #tBars{width:max-content!important;min-width:0!important;max-width:none!important;height:72px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 21px 0 75px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 21px 0 75px stretch!important;padding:18px 6px 0 0!important}
html body #tBars .row{position:static!important;display:block!important;width:auto!important;height:auto!important}
html body #tLvl{left:-65px!important;top:10px!important;width:51px!important;height:51px!important}
html body #tBars .cgplate2{position:static!important;display:block!important;width:auto!important;padding:0!important;margin:0!important;max-width:220px!important}
html body #tBars .cgplate2 .nm{display:block!important;height:25px!important;line-height:25px!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #tBars .cgplate2 .ln{display:flex!important;align-items:center!important;gap:7px!important;height:11px!important;margin-top:1px!important;min-width:120px!important}
html body #tBars .cgplate2 .lv{font-size:11px!important;line-height:11px!important}
html body #tBars .cgplate2 .ln #tLife{height:6px!important;min-height:6px!important}
html body.ashzone #quest{width:max-content!important;min-width:0!important;max-width:none!important;height:60px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 16px 0 60px!important;border-image:url("../assets/ui/cgx/plate_quest.webp") 0 104 0 378 fill / 0 16px 0 60px stretch!important;padding:17px 6px 0 0!important;top:calc(84px + var(--st,0px))!important}
html body.ashzone #quest::before{left:-54px!important;top:6px!important;width:45px!important;height:47px!important;background-size:50%!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{position:static!important;display:block!important;width:auto!important;max-width:200px!important;margin:0!important;padding:0!important}
html body.ashzone #quest .qt{height:17px!important;line-height:17px!important;font-size:10px!important}
html body.ashzone #quest .qo{height:12px!important;line-height:12px!important;margin-top:1px!important;font-size:11px!important}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:max-content!important;min-width:0!important;max-width:none!important;height:54px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 24px 0 47px!important;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 133 0 263 fill / 0 24px 0 47px stretch!important;padding:14px 6px 0 2px!important}
html body.ashzone #ashTarget .tbadge{left:-44px!important;top:5px!important;width:39px!important;height:44px!important}
html body.ashzone #ashTarget .tn{position:static!important;display:block!important;height:12px!important;line-height:12px!important;font-size:11px!important;white-space:nowrap!important;max-width:200px!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.ashzone #ashTarget .tb{position:relative!important;left:auto!important;right:auto!important;top:auto!important;display:block!important;width:auto!important;min-width:120px!important;height:5px!important;margin:7px 0 0!important}
html body #tBars,html body.ashzone #quest,html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{align-content:start!important;justify-content:start!important}
html body.ashzone #ashTarget .tb{margin-top:3px!important}
html body.ashzone #ashTarget .tb{margin-top:6px!important}
body.touch #ashParty{top:calc(150px + var(--st,0px))!important}
/* the foe's plate the quest plate's own shape, tinted red (one family with the hero's and the quest's), 54 high */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{border-width:0 15px 0 54px!important;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 104 0 378 fill / 0 15px 0 54px stretch!important;padding:16px 6px 0 0!important}
html body.ashzone #ashTarget .tbadge{left:-49px!important;top:5px!important;width:41px!important;height:44px!important}
html body.ashzone #ashTarget .tn{height:15px!important;line-height:15px!important}
html body.ashzone #ashTarget .tb{margin-top:4px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:250px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:226px!important}html body.ashzone #quest .qo{font-size:10.5px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:205px!important}html body.ashzone #quest .qo{font-size:10px!important;letter-spacing:-.005em}
/* the plate's own sizes over game.css' Kharos tracker (#quest#quest, two ids: its 8 and 9.5 px times --k had won on a desktop — 13 and 15.4 px in the plate's 17 and 12 px rows, the objective cut at its foot and its end, the user 23.10.) */
html body.ashzone #quest#quest .qt{font-size:10px!important;line-height:17px!important}html body.ashzone #quest#quest .qo{font-size:10px!important;line-height:12px!important}
/* the goal's words whole (the quest audit, 03.11.: 16 goals cut at 205 px — the place they name lost): the plate grows to 300 px of words on a desktop, 250 on a phone */
html body.ashzone #quest#quest .qt,html body.ashzone #quest#quest .qo{width:max-content!important;max-width:300px!important}html body.ashzone.touch #quest#quest .qt,html body.ashzone.touch #quest#quest .qo{max-width:250px!important}
/* the riftcaller's portrait ours too (game.css put Kharos' necromancer sketch on .nec with !important) */
html body #tLvl.nec .d i,html body #mainmenu .mm-slots .mm-port.nec i{background-image:var(--cgpor)!important;background-position:center 22%!important}
/* the context buttons (talk, pick up, use) and the potion in the HUD's octagonal socket, their icons ours (a headset for talking, the user 20.10.) at half the socket, centred */
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on,html body .tpot{border-radius:0!important;border:0!important;box-shadow:none!important;filter:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23101215' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;overflow:visible!important}
html body .tact > img,html body .tact > svg,html body .tpot > img{display:none!important}
html body .tact::before,html body .tpot::before{display:none!important}
html body .tact::after,html body .tpot::after{content:""!important;position:absolute!important;inset:0!important;background:center/50% no-repeat!important;pointer-events:none;display:block!important;border:0!important;box-shadow:none!important;animation:none!important;transform:none!important}
html body .tact.talk::after{background-image:url("../assets/icons/cg2/talk.webp?v=1")!important}
html body .tact.pick::after{background-image:url("../assets/icons/cg2/pick.webp?v=1")!important}
html body .tact.use::after{background-image:url("../assets/icons/cg2/use.webp?v=1")!important}
html body .tpot::after{background-image:url("../assets/icons/cg2/potion.webp?v=5")!important}
html body .tact kbd,html body .tpot kbd{display:none!important}
html body .tpot b{position:absolute!important;right:4%!important;top:4%!important;min-width:16px;height:16px;padding:0 3px;display:flex!important;align-items:center;justify-content:center;font:700 10px/1 var(--f-display)!important;color:#fff!important;background:#ff7a2a!important;border:0!important;border-radius:0!important;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);box-shadow:none!important;text-shadow:none!important}
html body .tpot .cd{clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)!important;border-radius:0!important}
html body .tact.on{animation:callin .25s ease-out!important}
html body .tact::after,html body .tpot::after{filter:brightness(1.55)}
/* the hero choice's and the hero list's card on a painted ornate panel (the user, 20.10.: flourishes, no CSS panel) laid as a 9-slice behind it; its crest on the top edge by itself so the edge can stretch */
html body #mainmenu .mm-info{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;isolation:isolate;overflow:visible!important}
html body #mainmenu .mm-info::before,html body #mainmenu[data-mode] .mm-info::before{content:""!important;display:block!important;position:absolute!important;inset:-16px -10px!important;width:auto!important;height:auto!important;translate:none!important;animation:none!important;z-index:-1!important;border-style:solid!important;border-width:71px 48px 78px 48px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch!important;background:none!important;box-shadow:none!important;clip-path:none!important;opacity:1!important;transform:none!important;pointer-events:none}
html body #mainmenu .mm-info::after,html body #mainmenu[data-mode] .mm-info::after,html body #mainmenu[data-mode="create"] .mm-info:not(.none)::after,html body #mainmenu[data-mode="create"] .mm-info.none::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;right:auto!important;top:-16px!important;bottom:auto!important;width:31px!important;height:37px!important;margin-left:-15.5px!important;translate:none!important;animation:none!important;background:url("../assets/ui/cgx/panel_crest.webp") center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;opacity:1!important;transform:none!important;z-index:1!important;pointer-events:none}
/* the interact buttons (talk, pick up, use) always glow ember: the most important button when it shows (the user, 20.10.) */
@keyframes cgActGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,122,42,.75)) drop-shadow(0 0 10px rgba(255,122,42,.35))}50%{filter:drop-shadow(0 0 7px rgba(255,140,60,1)) drop-shadow(0 0 18px rgba(255,122,42,.6))}}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out,cgActGlow 1.6s ease-in-out .25s infinite!important}
/* the hero choice's ornate panel on the talk's plate too (a test, the user 20.10.) */
html body #dialogue .dplate{inset:-14px -8px!important;clip-path:none!important;opacity:1!important;background:none!important;box-shadow:none!important;border-style:solid!important;border-width:71px 48px 78px 48px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch!important}
/* the talk's plate smaller (the user, 20.10.: less room above and below, smaller over all): the frame's flourishes at two thirds, a slimmer box */
html body #dialogue{padding:4px 22px 4px!important;width:min(600px,calc(64 * var(--vw)))!important}
html body #dialogue .dplate{inset:-10px -6px!important;border-width:49px 33px 54px 33px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #dialogue .who{margin-bottom:2px!important}
html body #dialogue .say{font-size:calc(12.5px * var(--k))!important;line-height:1.4!important;min-height:2.6em!important}
/* the phone's bag, full screen again (the user, 20.10.): the window on a painted metal plate, the figure's side in the ornate frame, the worn gear in octagonal sockets with flourishes, the bag in cut-corner cells; an item's rarity a glow in its slot */
html body.touch #inv.open{background:url("../assets/ui/cgx/metal_tex.webp") center/256px 256px repeat,#15181b!important}
html body.touch #inv.open .doll{position:relative!important;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;padding:14px 18px!important}
html body.touch #inv.open .doll::after{content:""!important;display:block!important;position:absolute!important;inset:6px 0 6px 0!important;z-index:-1!important;border-style:solid!important;border-width:57px 38px 62px 38px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 57px 38px 62px 38px stretch!important;background:none!important;pointer-events:none;transform:none!important;width:auto!important;height:auto!important}
html body.touch #inv.open .eq,html body.touch #inv.open .cell{border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background-color:transparent!important}
html body.touch #inv.open .eq{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 62%),url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body.touch #inv.open .cell{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 66%),url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important}
html body.touch #inv.open .eq::before,html body.touch #inv.open .eq::after,html body.touch #inv.open .cell::before,html body.touch #inv.open .cell::after{display:none!important}
html body.touch #inv.open :is(.eq,.cell).r-normal{--rg:rgba(228,224,214,.14)}
html body.touch #inv.open :is(.eq,.cell).r-magic{--rg:rgba(91,141,255,.42)}
html body.touch #inv.open :is(.eq,.cell).r-rare{--rg:rgba(245,207,61,.38)}
html body.touch #inv.open :is(.eq,.cell).r-unique{--rg:rgba(255,125,31,.45)}
html body.touch #inv.open :is(.eq,.cell).r-artifact{--rg:rgba(179,107,255,.42)}
html body.touch #inv.open :is(.eq,.cell).r-quest{--rg:rgba(63,230,210,.38)}
html body.touch #inv.open :is(.eq,.cell).sel{filter:drop-shadow(0 0 6px rgba(255,122,42,.9))!important}
html body.touch #inv.open .bagwrap,html body.touch #inv.open .ibody{background:none!important;box-shadow:none!important}
html body.touch #inv.open{background:url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#15181b!important}
html body.touch #inv.open .ihead{translate:12px 12px}
/* the interact and talk buttons stand apart from the skills (the user, 20.10.: 'mehr leuchten'): an ember fire inside the socket, a strong pulsing glow, the icon bright */
@keyframes cgActGlow2{0%,100%{filter:drop-shadow(0 0 6px rgba(255,122,42,.95)) drop-shadow(0 0 16px rgba(255,122,42,.55))}50%{filter:drop-shadow(0 0 10px rgba(255,150,70,1)) drop-shadow(0 0 28px rgba(255,122,42,.85))}}
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{background:radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out,cgActGlow2 1.4s ease-in-out .25s infinite!important}
html body .tact::after{filter:brightness(2.1) drop-shadow(0 0 3px rgba(255,140,60,.8))!important;background-size:54%!important}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out!important;filter:drop-shadow(0 0 7px rgba(255,130,50,1)) drop-shadow(0 0 20px rgba(255,122,42,.75))!important}
html body #jumpT img{width:54%!important;height:54%!important;filter:brightness(1.7)!important}
/* the phone's bag laid out: a title over the bag in line with the hero's name, the worn slots centred in the frame, item pictures inside the slot's safe zone */
html body.touch #inv.open > .plate-title{display:block!important;position:absolute!important;left:397px!important;top:calc(24px + var(--st,0px))!important;padding:0!important;margin:0!important;font:600 15px/1 var(--f-display)!important;letter-spacing:.28em!important;color:#e6e8ea!important;text-shadow:0 1px 3px #000!important;z-index:4}
html body.touch #inv.open > .plate-title::before,html body.touch #inv.open > .plate-title::after{display:none!important}
html body.touch #inv.open .bag{margin-top:10px!important}
html body.touch #inv.open .doll .sec,html body.touch #inv.open .doll .pri,html body.touch #inv.open .doll .fig,html body.touch #inv.open .statsbtn{translate:0 16px}
html body.touch #inv.open :is(.eq,.cell) > img{width:62%!important;height:62%!important;object-fit:contain!important;position:static!important;inset:auto!important;margin:auto!important}
html body.touch #inv.open .bagcount{text-align:right!important;font:500 12px/1 var(--f-display)!important;letter-spacing:.12em;color:#9aa0a6!important;margin-top:8px!important}
html body.touch #inv.open .cell .upg{transform:scale(.72)!important;transform-origin:top right!important;top:9%!important;right:9%!important}
html body #jumpT img{width:50%!important;height:50%!important;filter:none!important}
/* the glow without a filter: iOS Safari clipped the drop-shadow to the button's square box (the user's shot, 20.10.); a soft ember light of its own behind the socket instead, and no square outline on the potion */
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{filter:none!important}
html body .tact::before,html body .tact.on::before{content:""!important;display:block!important;position:absolute!important;inset:-38%!important;z-index:-1!important;border:0!important;border-radius:50%!important;background:radial-gradient(circle,rgba(255,130,50,.7) 0,rgba(255,122,42,.38) 34%,rgba(255,122,42,.12) 52%,transparent 68%)!important;box-shadow:none!important;transform:none!important;animation:none!important;opacity:1!important;pointer-events:none}
html body .tact{isolation:isolate}
html body .tact:not(.on)::before{display:none!important}
html body .tact,html body .tpot,html body .tpot.low,html body #jumpT,html body #skillsT .tbtn{outline:0!important}
html body .tact::before,html body .tact.on::before{inset:-34%!important;background:radial-gradient(circle closest-side,rgba(255,130,50,.95) 0,rgba(255,130,50,.85) 52%,rgba(255,122,42,.5) 64%,rgba(255,122,42,.18) 80%,transparent 100%)!important}
/* (the socket, its ember fire and the icon all drawn by ::after, so the glow (::before, behind) can sit under them: a stacking element paints its negative children over its own background) */
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{background:none!important}
html body .tact.talk::after{background:url("../assets/icons/cg2/talk.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact.pick::after{background:url("../assets/icons/cg2/pick.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact.use::after{background:url("../assets/icons/cg2/use.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact::before,html body .tact.on::before{inset:-42%!important;background:radial-gradient(circle closest-side,rgba(255,130,50,.95) 0,rgba(255,130,50,.9) 56%,rgba(255,122,42,.62) 66%,rgba(255,122,42,.26) 80%,transparent 100%)!important}
/* the talk's plate wider and flatter, smaller words, its face a little see-through (the user, 20.10.); the frame's face made translucent in the art itself (panel_orn_t), the flourishes stay solid */
html body #dialogue{width:min(780px,calc(88 * var(--vw)))!important;padding:2px 22px 2px!important}
html body #dialogue .dplate{border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #dialogue .who{font-size:calc(9.5px * var(--k))!important}
html body #dialogue .say{font-size:calc(11px * var(--k))!important;line-height:1.35!important;min-height:2.7em!important}
/* the menu card's buttons as wide as their words (WELT BETRETEN ran out of its plate on a small phone) */
html body #mainmenu .mm-info .mm-go{max-width:none!important;width:auto!important;white-space:nowrap!important;letter-spacing:.14em!important;padding-left:calc(20px * var(--k))!important;padding-right:calc(20px * var(--k))!important}
html body #mainmenu .mm-info h2{letter-spacing:.12em!important;max-width:100%;white-space:nowrap;font-size:min(calc(20px * var(--k)),7.4vw)!important}
/* a short screen (a 12 mini or an SE with Safari's bars): the card and its frame tighter so nothing is cut */
@media (max-height:350px){
html body #mainmenu .mm-info::before,html body #mainmenu[data-mode] .mm-info::before{inset:-8px -6px!important;border-width:49px 33px 54px 33px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #mainmenu .mm-info::after,html body #mainmenu[data-mode] .mm-info::after{top:-8px!important;width:22px!important;height:26px!important;margin-left:-11px!important}
html body #mainmenu .mm-info h2{font-size:min(calc(16px * var(--k)),6vw)!important}
html body #mainmenu .mm-info{padding-top:calc(10px * var(--k))!important;padding-bottom:calc(10px * var(--k))!important}
}
/* one metal for every full window (the user, 20.10.: 'es muss zusammenpassen', the settings went from light to dark): the painted metal plate under the bag, the settings, the skills, the quests, the map and the game menu's side; their inner rows a darker inset of the same metal, no light grey */
html body :is(#inv,#help,#skills,#qlog,#shop,#mappanel,#mapPanel),html body #gmenu .gside{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.32)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#15181b!important}
html body #help .hbody > *,html body #help .hlist,html body #help .plate-title{background:none!important;box-shadow:none!important}
html body #help .hrow{background:rgba(6,8,10,.42)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;border:0!important}
html body #help .hlist{border-left:1px solid rgba(255,255,255,.06)!important}
/* (the talk's sizes once more with the id twice: game.css' 'html body.touch #dialogue' rules outranked them) */
html body #dialogue#dialogue{width:min(780px,calc(88 * var(--vw)))!important;padding:6px 64px 6px 34px!important}
html body #dialogue#dialogue .who{font-size:calc(9.5px * var(--k))!important;margin-bottom:2px!important}
html body #dialogue#dialogue .say{font-size:calc(11px * var(--k))!important;line-height:1.35!important;min-height:2.7em!important}
html body #dialogue#dialogue .more{right:18px!important;bottom:auto!important;top:50%!important;translate:0 -50%;width:calc(30px * var(--k))!important;height:calc(30px * var(--k))!important}
html body #dialogue#dialogue,html body.cine #dialogue#dialogue{bottom:calc(16px + var(--sb,0px))!important;padding:10px 64px 10px 34px!important}
html body #dialogue#dialogue .dplate{inset:-6px -4px!important;border-width:36px 24px 39px 24px!important;border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 36px 24px 39px 24px stretch!important}
html body #dialogue#dialogue .more{top:calc(50% - 15px)!important;translate:none!important}
html body #dialogue#dialogue{background:none!important;box-shadow:none!important}
html body #dialogue#dialogue .more{top:auto!important;bottom:calc(50% - 15px)!important}
/* the skills page: the list's pictures alone, no square frame (the user, 20.10.: 'hier einfach nur die Icons'); the empty info a quiet line at the foot of the page instead of a faint title across the portrait; the page's own face the same metal as the rest */
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}
html body #skills .sinfo:has(> .choose){position:absolute!important;left:0!important;right:0!important;bottom:14px!important;top:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border:0!important;text-align:center}
html body #skills .sinfo:has(> .choose)::before,html body #skills .sinfo:has(> .choose)::after,html body #skills .sinfo .choose::before,html body #skills .sinfo .choose::after{display:none!important}
html body #skills .sinfo .choose{font:500 12px/1.2 var(--f-display)!important;letter-spacing:.18em!important;color:#8d9399!important;opacity:1!important;text-transform:uppercase}
html body #skills .spage{background-color:rgba(0,0,0,.22)!important}
/* the hint callout on our quest plate (3-slice, the lantern emblem in its octagon, an ember pointer) instead of Kharos' gold label with the blue banner; the longer explanation on the see-through ornate frame */
/* (23.10., the user: 'Info-Pointer-Panel sieht scheiße aus' — the quest plate held at 40px while its text ran to two lines over and past it, the emblem a speck at its left, the ember arrow drawn pointing right where the code turns a left-pointing tip, so it pointed away from its target.)
   Now: the dialogue's plate (dialog_plate.webp, 1347×430; its rim, chamfers and ember line in 108 px of each side, the bottom 118 with its 30 px shadow) as a 9-slice that grows with the text, one line or two;
   the lantern emblem in its own hex socket, centred in the plate's height; the text centred in the plate; the ember tip pointing left (the shape the placement turns, as Kharos' label-tip.webp did) and set flush on the rim.
   --ib: the plate's transparent shadow under its painted bottom edge (in px × --k), which the placement (js/ui/ui.js placeHint) leaves out so an arrow from the bottom edge touches the metal */
html body #callout#callout{--ib:2.5;height:auto!important;min-height:calc(40px * var(--k))!important;box-sizing:border-box!important;padding:calc(3px * var(--k)) calc(4px * var(--k)) calc(4px * var(--k)) calc(27px * var(--k))!important;gap:calc(6px * var(--k))!important;align-items:center!important;border-style:solid!important;border-width:calc(9px * var(--k)) calc(9px * var(--k)) calc(10px * var(--k)) calc(9px * var(--k))!important;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / calc(9px * var(--k)) calc(9px * var(--k)) calc(10px * var(--k)) calc(9px * var(--k)) stretch!important;background:none!important;box-shadow:none!important;border-radius:0!important;max-width:min(calc(300px * var(--k)),56vw)!important;color:#eef0f2!important;text-shadow:0 1px 2px #000!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))!important}
html body #callout#callout.narrow{max-width:min(calc(250px * var(--k)),34vw)!important}
html body #callout#callout span{font:600 calc(11px * var(--k))/1.28 var(--f-display)!important;letter-spacing:.03em!important;color:#eef0f2!important}
html body #callout#callout::before{content:""!important;position:absolute!important;left:calc(-3px * var(--k))!important;top:50%!important;bottom:auto!important;width:calc(23px * var(--k))!important;height:calc(26px * var(--k))!important;margin-top:calc(-13.5px * var(--k))!important;background:url("../assets/ui/cgx/banner_emblem.webp") center/contain no-repeat!important;border:0!important;box-shadow:none!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))!important;transform:none!important;pointer-events:none}
html body #callout#callout span::before{display:none!important}
html body #callout#callout b{z-index:2;width:0!important;height:0!important;background:none!important;border-left:0!important;border-right:calc(11px * var(--k)) solid #ff7a2a!important;border-top:calc(8px * var(--k)) solid transparent!important;border-bottom:calc(8px * var(--k)) solid transparent!important;filter:drop-shadow(0 0 3px rgba(255,122,42,.85))!important}
html body #callout#callout:not(.pt) b{right:calc(-19px * var(--k))!important;left:auto!important;top:50%!important;margin-top:calc(-8px * var(--k))!important;transform:rotate(180deg)!important}
html body #callout#callout.rt:not(.pt) b{left:calc(-19px * var(--k))!important;right:auto!important;transform:none!important}
html body #callout#callout:is(.up,.bag):not(.pt) b{top:calc(-21.5px * var(--k))!important;right:calc(10px * var(--k))!important;left:auto!important;margin-top:0!important;transform:rotate(90deg)!important}
html body #callout#callout .more,html body #callout#callout #tourBtn{flex:none!important;width:calc(24px * var(--k))!important;height:calc(24px * var(--k))!important;margin:0 0 0 calc(2px * var(--k))!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;border-image:none!important;box-shadow:none!important}
html body #callout#callout .more[hidden],html body #callout#callout #tourBtn[hidden]{display:none!important}
html body #callout#callout .more svg,html body #callout#callout #tourBtn svg{display:block!important;width:50%!important;height:50%!important;fill:none!important;stroke:#ffb27a!important;stroke-width:3!important;stroke-linecap:square}
html body #explain#explain{border-style:solid!important;border-width:36px 24px 39px 24px!important;border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 36px 24px 39px 24px stretch!important;background:none!important;box-shadow:none!important}
/* the metal dark again (the user, 20.10.: 'alles hell gemacht statt dunkel'): the painted plate under a heavy shade, as dark as the windows were before */
html body :is(#inv,#help,#skills,#qlog,#shop,#mappanel,#mapPanel),html body #gmenu .gside,html body.touch #inv.open{background:linear-gradient(180deg,rgba(6,7,9,.6),rgba(6,7,9,.72)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#111316!important}
html body #help#help .hrow{background:rgba(0,0,0,.34)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
html body #skills#skills .slist .sk{--fc:rgba(0,0,0,.34)!important}
html body #skills#skills .slist .sk.sel{--fc:#3a2a22!important}
html body #inv .statspane .sec{margin:10px 0 4px;padding-top:8px;border-top:1px solid rgba(255,122,42,.35);font:600 calc(11px * var(--k))/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#ff8a3a}
html body #statsv .svskills button img.svgun{width:62%!important;height:62%!important;object-fit:contain;position:absolute;left:19%;top:19%;pointer-events:none}html body #statsv .svskills button{position:relative}
/* the way-out sign (desktop tooltip and the phone's sign) on our quest plate with the lantern emblem, cream caps and an ember chevron, instead of Kharos' scrolled steel and bronze compass */
html body .wsign::before{border:0!important;border-style:solid!important;border-width:0 10px 0 30px!important;border-image:url("../assets/ui/cgx/plate_quest.webp") 0 104 0 378 fill / 0 10px 0 30px stretch!important;left:calc(var(--md) * -.5)!important}
html body .wsign::after{display:none!important}
html body .wsign .ws-med{background:url("../assets/ui/cgx/banner_emblem.webp") center/70% no-repeat!important;filter:none!important}
html body .wsign .ws-n{color:#eef0f2!important;font-family:var(--f-display)!important;text-shadow:0 1px 2px #000!important}
html body .wsign .ws-go{background:none!important;width:0!important;height:0!important;border-left:.5em solid #ff7a2a;border-top:.34em solid transparent;border-bottom:.34em solid transparent;filter:drop-shadow(0 0 3px rgba(255,122,42,.8))}
/* the menu card's words sized by the card itself (a container): the class's name and the buttons never run past the frame on a narrow phone (the user's shot, 20.10.) */
html body #mainmenu .mm-info{container-type:inline-size}
html body #mainmenu .mm-info h2{font-size:min(calc(20px * var(--k)),9.6cqi)!important;letter-spacing:.1em!important}
html body #mainmenu .mm-info .mm-go{font-size:min(calc(12px * var(--k)),5.6cqi)!important;letter-spacing:.1em!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;text-indent:0!important}
html body #mainmenu .mm-actrow .mm-go{min-width:0!important;flex:1 1 0!important;padding-left:calc(6px * var(--k))!important;padding-right:calc(6px * var(--k))!important}
/* the item card's icon buttons readable on our dark plates (their strokes were Kharos' near-black, drawn for the gold button: the worn gun's 'Take off' looked empty) */
html body.touch #icard#icard .btns button.cardic svg,html body.touch #icard#icard .btns button.pri.cardic svg{stroke:#ffd9bf!important;filter:drop-shadow(0 0 3px rgba(255,122,42,.6))}
html body.touch #icard#icard .btns button.minor.cardic svg{stroke:#c3c7cc!important;filter:none}
html body.touch #icard#icard .btns button.cardic b{color:#ffd9bf!important}
/* the desktop's bag the phone's look (the user, 20.10.: 'Inventar auf Desktop sieht scheiße aus'): the figure's side in the ornate frame, the worn gear in the flourished octagons, the bag in cut-corner cells, rarity a glow, no Kharos corner brackets */
html body:not(.touch) #inv.open .doll{position:relative!important;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;padding:18px 22px!important}
html body:not(.touch) #inv.open .doll::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;border-style:solid!important;border-width:57px 38px 62px 38px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 57px 38px 62px 38px stretch!important;background:none!important;pointer-events:none;transform:none!important;width:auto!important;height:auto!important}
html body:not(.touch) #inv.open .eq,html body:not(.touch) #inv.open .cell{border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background-color:transparent!important}
html body:not(.touch) #inv.open .eq{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 62%),url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body:not(.touch) #inv.open .cell{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 66%),url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important}
html body:not(.touch) #inv.open .eq::before,html body:not(.touch) #inv.open .eq::after,html body:not(.touch) #inv.open .cell::before,html body:not(.touch) #inv.open .cell::after{display:none!important}
html body:not(.touch) #inv.open :is(.eq,.cell).r-normal{--rg:rgba(228,224,214,.14)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-magic{--rg:rgba(91,141,255,.42)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-rare{--rg:rgba(245,207,61,.38)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-unique{--rg:rgba(255,125,31,.45)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-artifact{--rg:rgba(179,107,255,.42)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-quest{--rg:rgba(63,230,210,.38)}
html body:not(.touch) #inv.open :is(.eq,.cell).sel{filter:drop-shadow(0 0 6px rgba(255,122,42,.9))!important}
html body:not(.touch) #inv.open :is(.eq,.cell) > img{width:62%!important;height:62%!important;object-fit:contain!important;margin:auto!important}
html body:not(.touch) #inv.open .bagwrap,html body:not(.touch) #inv.open .ibody{background:none!important;box-shadow:none!important;border-color:transparent!important}
html body:not(.touch) #inv.open .bagwrap::before,html body:not(.touch) #inv.open .bagwrap::after,html body:not(.touch) #inv.open .ibody::before,html body:not(.touch) #inv.open .ibody::after,html body:not(.touch) #inv.open .bag::before,html body:not(.touch) #inv.open .bag::after{display:none!important}
html body:not(.touch) #inv.open .cell .upg{transform:scale(.72)!important;transform-origin:top right!important;top:9%!important;right:9%!important}
/* the desktop's skills page: the loadout as the HUD's bar, on the bar's own plate and large, not Kharos' small strip */
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/bar_plate.webp") center/100% 100% no-repeat!important;transform:scale(1.55)!important;transform-origin:center center!important;margin:auto!important;align-self:center!important;padding:0!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar .sock{margin:0!important}
html body #inv#inv.open,html body #skills#skills,html body #help#help,html body #qlog#qlog,html body #shop#shop{background:linear-gradient(180deg,rgba(6,7,9,.6),rgba(6,7,9,.72)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#111316!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{position:absolute!important;left:50%!important;top:46%!important;margin:0!important;transform:translate(-50%,-50%) scale(1.15)!important;transform-origin:center center!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar .sock:not(.locked){opacity:1!important}
html body:not(.touch) #inv.open .ihead{translate:16px 16px}html body:not(.touch) #inv.open .doll{padding-top:30px!important}
/* Play never a bare word: a dark chamfered plate under the painted one while it loads (it is preloaded in index.html) */
html body #loading #playBtn{background:url("../assets/ui/cgx/btn_pri.webp") center/100% 100% no-repeat,linear-gradient(180deg,#24262a,#121315)!important;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);text-indent:0!important;padding-left:calc(34px * var(--k,1))!important;padding-right:calc(34px * var(--k,1))!important}
/* a party member's line: a speech bubble out of their portrait, right of their plate, on our dark plate with an ember edge and a tail toward the portrait */
#ashParty .apm.cgplate{position:relative}
#ashParty .cgsay{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);max-width:220px;width:max-content;padding:6px 10px;background:rgba(16,18,21,.94);border:1px solid rgba(255,122,42,.75);box-shadow:0 2px 8px rgba(0,0,0,.6);font:500 12px/1.3 'Barlow',sans-serif;color:#eef0f2;pointer-events:none;animation:cgSayIn .2s ease-out both}
#ashParty .cgsay::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:rgba(255,122,42,.85);border-left:0}
@keyframes cgSayIn{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
#ashParty .cgsay{left:48px!important;z-index:3}
/* the hero editor usable on a phone (the user, 20.10.): the part tabs a slim column of small octagons inside the screen, the options our cut-corner cells with words that fit, the chosen one an ember glow (no blue focus ring, no second box) */
html body .cu-tabs{gap:8px!important;max-height:calc(100% - 24px);top:50%!important}
html body .cu-tabs .cu-tab,html body .cu-tabs .cu-tab:nth-child(even){width:calc(44px * var(--k))!important;height:calc(44px * var(--k))!important;margin:0!important;transform:none!important;padding:0!important}
html body .cu-tabs .cu-tab svg{width:46%!important;height:46%!important}
html body .cu-tabs .cu-tab.on{transform:none!important;filter:drop-shadow(0 0 8px rgba(255,122,42,.8))!important}
html body .cu-opt,html body .cu-opt:focus,html body .cu-tab:focus,html body .cu-opt:focus-visible,html body .cu-tab:focus-visible{outline:0!important}
html body .cu-opt{border:0!important;border-image:none!important;clip-path:none!important;background:url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important;font:600 calc(13px * var(--k))/1 var(--f-display)!important;letter-spacing:.04em!important;color:#c3c7cc!important;overflow:hidden}
html body .cu-opt span{max-width:76%;overflow:hidden;text-overflow:clip;white-space:nowrap;font-size:inherit}
html body .cu-opt.on{color:#ffd9bf!important;filter:drop-shadow(0 0 7px rgba(255,122,42,.85))!important}
html body .cu-opt.on::after{display:none!important}
html body .cu-grid{grid-auto-rows:max-content!important;row-gap:calc(10px * var(--k))!important}
html body .cu-grid .cu-opt{width:calc(54px * var(--k))!important;height:calc(54px * var(--k))!important;max-width:none!important;aspect-ratio:1!important;flex:none!important;min-height:0!important}
/* the game menu's hero card on the hero plate's art (3-slice, the portrait in its octagon), the XP a thin ember line under the level */
html body #gmenu .gchar{position:relative!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;height:64px!important;padding:0 10px 0 4px!important;background:none!important;box-shadow:none!important;clip-path:none!important;border-style:solid!important;border-width:0 18px 0 64px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 18px 0 64px stretch!important}
html body #gmenu .gchar .gem{position:absolute!important;left:-57px!important;top:8px!important;width:46px!important;height:46px!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}
html body #gmenu .gchar .gem::before{inset:0!important}
html body #gmenu .gchar .gem::after{display:none!important}
html body #gmenu .gchar .gname{font:700 13px/1.1 var(--f-display)!important;letter-spacing:.08em!important;color:#eef0f2!important}
html body #gmenu .gchar .glvl{font:500 11px/1.2 var(--f-display)!important;color:#c3c7cc!important}
html body #gmenu .gchar .gxp{height:3px!important;margin-top:4px!important;background:#121417!important;border:0!important;box-shadow:none!important;clip-path:none!important}
html body #gmenu .gchar .gxp > div{background:#ff7a2a!important;box-shadow:none!important}
html body #gmenu .gchar::before,html body #gmenu .gchar::after{display:none!important}
html body #gmenu .gchar{width:auto!important;max-width:none!important;align-self:stretch!important;outline:0!important}
html body #gmenu .gchar .gcw{flex:1 1 auto!important;min-width:0!important;overflow:visible!important}
html body #gmenu .gchar .gname{font-size:12px!important;letter-spacing:.06em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important}
/* the game menu (21.10., the user's: the tiles of one width, every word inside; the top buttons' icons readable): both columns one width, every tile the column's width, the top icons half their button and lit */
html body.ashzone #gmenu#gmenu .gl,html body.ashzone #gmenu#gmenu .gr{width:clamp(calc(240px * var(--k,1)),30%,calc(300px * var(--k,1)))!important;flex:none!important}
html body.ashzone #gmenu#gmenu .tiles{align-self:stretch!important;width:100%!important}
html body.ashzone #gmenu#gmenu .tile,html body.ashzone #gmenu#gmenu .gl .tile,html body.ashzone #gmenu#gmenu .gr .tile,html body.ashzone #gmenu#gmenu .gr .tile.bar{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;flex:none!important}
html body.ashzone #gmenu#gmenu .tile span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #gmenu .gbtn img.art-ic{width:54%!important;height:54%!important;filter:brightness(1.6) drop-shadow(0 1px 2px #000)!important}
html body.ashzone #gmenu#gmenu .tile,html body.ashzone #gmenu#gmenu .gl .tile,html body.ashzone #gmenu#gmenu .gr .tile,html body.ashzone #gmenu#gmenu .gr .tile.bar{padding:0 calc(14px * var(--k,1))!important;gap:calc(14px * var(--k,1))!important;justify-content:flex-start!important}
html body.ashzone #gmenu#gmenu .tile span,html body.ashzone #gmenu#gmenu .gl .tile span,html body.ashzone #gmenu#gmenu .gr .tile span{font:600 calc(13px * var(--k,1)) var(--f-display)!important;letter-spacing:.1em!important;padding:0!important;margin:0!important;text-align:left!important}
/* the skills page (21.10., the user's: the whole loadout mirrored into the bottom left corner, the words inside the sockets; nothing chosen, the gun's card): the loadout pinned low left, the card beside it */
html body #skills.open .spage{position:relative!important}
html body #skills.open .spage .sload:not(.asbar){position:absolute!important;left:calc(14px * var(--k,1))!important;bottom:calc(8px * var(--k,1))!important;top:auto!important;right:auto!important;margin:0!important;transform:none!important;align-self:auto!important}
html body #skills.open .spage .sinfo{position:absolute!important;left:calc(280px * var(--k,1))!important;right:calc(14px * var(--k,1))!important;top:calc(10px * var(--k,1))!important;bottom:calc(10px * var(--k,1))!important;width:auto!important;max-width:none!important;margin:0!important;overflow-y:auto!important;scrollbar-width:none;display:block!important}
html body #skills#skills .spage .sock.locked em{left:0!important;right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;text-align:center!important;width:auto!important;margin:0!important;font:600 calc(11px * var(--k,1)) var(--f-display)!important;letter-spacing:.06em!important;color:#9aa0a6!important}
html body.touch #skills#skills .spage .sock:not(.locked) em{display:none!important}
html body #skills .spage .sock.primary.cgsel{box-shadow:0 0 14px rgba(255,122,42,.45)!important}
html body #skills .cgskcard{display:flex;flex-direction:column;gap:6px}
html body #skills .cgskcard .cgskgun{width:min(70%,260px);align-self:center;filter:drop-shadow(0 4px 8px #000)}
html body #skills .cgskcard .cgskmeta{font:600 calc(11px * var(--k,1)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#ff9a4a}
html body #skills .cgskcard .ip{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html body #skills .cgskcard .ip{width:auto!important;max-width:none!important;min-width:0!important;font-size:calc(12px * var(--k,1))!important}
html body #skills .cgskcard .ip::before,html body #skills .cgskcard .ip::after{display:none!important}
html body #skills .cgskcard .cgskgun{width:auto!important;max-width:80%!important;height:calc(64px * var(--k,1))!important;object-fit:contain}
html body #skills.open .spage .sinfo{left:calc(250px * var(--k,1))!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{left:calc(18px * var(--k,1))!important;top:auto!important;bottom:calc(18px * var(--k,1))!important;transform:none!important;transform-origin:left bottom!important}
html body.hudbar:not(.touch) #skills.open .spage .sinfo{left:calc(18px * var(--k,1))!important;right:calc(18px * var(--k,1))!important;bottom:calc(150px * var(--k,1))!important;max-width:calc(420px * var(--k,1))!important}
html body.touch #skills .cgskcard .ip{font-size:11px!important}
html body.touch #skills .cgskcard .cgskgun{height:36px!important}
html body.touch #skills .cgskcard{gap:2px}
/* the desktop bag's title over its grid */
html body #inv .cgbagt{display:none}
/* the bag's title gone on the desktop too (the user, 03.11., a shot of it cut under the hero's panel: 'Inventar-Label weg') */
html body:not(.touch) #inv .bagwrap .cgbagt{display:none!important}
html body:not(.touch) #inv .bagwrap .cgbagt{display:block;font:600 calc(14px * var(--k,1)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#e6e8ea;text-align:center;padding:calc(6px * var(--k,1)) 0 calc(8px * var(--k,1));margin-bottom:calc(8px * var(--k,1));border-bottom:1px solid rgba(255,122,42,.45);text-shadow:0 1px 2px #000}
/* the card's worded buttons on the phone (21.10.): light words on the dark plate, as every other button */
html body #icard#icard .btns button:not(.cardic){color:#ffd9bf!important;-webkit-text-fill-color:#ffd9bf!important;text-shadow:0 1px 2px #000!important;font:600 13px var(--f-display)!important;letter-spacing:.12em!important;text-transform:uppercase}
html body #icard#icard .btns button.minor:not(.cardic){color:#c3c7cc!important;-webkit-text-fill-color:#c3c7cc!important}
/* the currency is Celestine (21.10.): its crystal in every counter instead of the gold ball, its blue on the drop's label */
html body #inv .igold i,html body .igold i{width:calc(18px * var(--k,1))!important;height:calc(18px * var(--k,1))!important;border-radius:0!important;background:url("../assets/icons/cg2/celestine.webp?v=1") center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 4px rgba(143,211,255,.6))!important}
html body .loot-label.gold,html body .loot-label.celestine{--rc:#8fd3ff;color:#bfe6ff!important;text-shadow:0 0 6px rgba(80,170,255,.6),0 1px 2px #000!important}
/* a gun's mod sockets on its card (21.10., js/fps/ashmods.js): a steel line, each socket an octagon, filled ones lit in the mod's rarity */
.ip .gsocks{margin:.5em 0 .3em;padding-top:.4em;border-top:1px solid rgba(255,255,255,.08)}
.ip .gsocks .gsh{font:600 .78em var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#9aa0a6;margin-bottom:.3em}
.ip .gsock{display:flex;align-items:center;gap:.55em;color:#7d8288;font-size:.92em;line-height:1.35;margin:.18em 0}
.ip .gsock i{flex:none;width:.95em;height:.95em;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#2a2d32;box-shadow:inset 0 0 0 2px #4a4f56}
.ip .gsock.on{color:#e6e8ea}.ip .gsock.on i{background:var(--rc,#ff7a2a);box-shadow:0 0 6px var(--rc,#ff7a2a)}
.ip .ln.gmod{color:#ffd9bf;font-weight:600;margin:.5em 0}
/* the sockets are slots to tap (01.11., js/fps/ashmods.js): on the floating card each a plate with its mod or a plus; the picking views in the compare screen: a list of rows */
.ip .gsock b{font-weight:600}.ip .gsock span{flex:1;min-width:0}.ip .gsock u{display:none;text-decoration:none}
#icard .ip .gsock.tap{cursor:pointer;padding:.38em .55em;margin:.3em 0;border:1px dashed rgba(216,140,96,.55);border-radius:3px;background:rgba(216,140,96,.07)}
#icard .ip .gsock.tap.on{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045)}
#icard .ip .gsock.tap:hover{background:rgba(216,140,96,.18)}
#icard .ip .gsock .gsgo{display:block;flex:none;font:700 1.3em/1 var(--f-display);color:#ee864a}
body.touch #icard .ip .gsock.tap{padding:.55em .6em}
html body #cmp#cmp.gm .col.gmcol{width:min(400px,46vw)!important;max-width:min(400px,46vw)!important;min-width:0}
#cmp.gm .gmcol .scroll{flex:1 1 auto;min-height:0}
html body #cmp#cmp.gm button.pri{color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
body.touch #cmp.gm .gmrow{min-height:calc(34px * var(--k));padding-top:calc(2px * var(--k));padding-bottom:calc(2px * var(--k))}body.touch #cmp.gm .gmrow img{width:calc(28px * var(--k));height:calc(28px * var(--k))}
#cmp.gm .gmlist{display:flex;flex-direction:column;gap:calc(5px * var(--k));padding:2px}
#cmp.gm .gmrow{display:flex;align-items:center;gap:calc(9px * var(--k));min-height:calc(42px * var(--k));padding:calc(4px * var(--k)) calc(8px * var(--k));box-sizing:border-box;cursor:pointer;border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--rc,#888);border-radius:3px;background:rgba(255,255,255,.04)}
#cmp.gm .gmrow:hover{background:rgba(238,134,74,.13)}
#cmp.gm .gmrow.sel{background:rgba(238,134,74,.2);box-shadow:inset 0 0 0 1px #f59f6e,0 0 10px rgba(245,159,110,.45)}
#cmp.gm .gmrow.dim{opacity:.45}
#cmp.gm .gmrow img{flex:none;width:calc(36px * var(--k));height:calc(36px * var(--k));object-fit:contain;pointer-events:none}
#cmp.gm .gmrow .gmt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#cmp.gm .gmrow .gmt b{font:600 calc(13px * var(--k))/1.2 var(--f-display);color:var(--rc,#ddd)}
#cmp.gm .gmrow .gmt small{font:calc(12px * var(--k))/1.25 var(--f-body);color:var(--bone)}
#cmp.gm .gmrow em{flex:none;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.06em;color:var(--bone-lo);text-align:right}
#cmp.gm .gmrow em b{color:var(--bone)}#cmp.gm .gmrow em b.up{color:#9be07f}#cmp.gm .gmrow em b.dn{color:#e07a64}
#cmp.gm .gminfo{margin-top:calc(8px * var(--k));font:calc(12px * var(--k)) var(--f-body);color:var(--bone)}#cmp.gm .gminfo small{font-size:inherit;color:var(--bone-lo)}#cmp.gm .gminfo.none{color:var(--bone-lo);font-style:italic}
#cmp.gm .ip .gsock.gmcur{outline:1px solid #f59f6e;outline-offset:2px;color:#f59f6e}
#cmp.gm .ip .gsock.gmcur.on{color:#e6e8ea}
.gmghost{position:fixed;left:0;top:0;width:52px;height:52px;z-index:70;pointer-events:none;opacity:.92;filter:drop-shadow(0 4px 8px #000)}.gmghost img{width:100%;height:100%;object-fit:contain}
#inv.gmdrag .cell:not(.gmfit),#inv.gmdrag .eq:not(.gmfit){opacity:.35}
#inv.gmdrag .gmfit{box-shadow:0 0 0 2px #eea24a,0 0 14px rgba(238,134,74,.65)!important}
#inv.gmdrag .gmhot{box-shadow:0 0 0 3px #f59f6e,0 0 20px rgba(245,159,110,.9)!important;opacity:1}
/* the trader's and the smith's windows (21.10., step 6): over the painting of Holloway Deep, darkened, not Kharos' bazaar and smithy; Celestine's crystal in every price */
html body #shop:not(.pets):not(.seyla)::before,html body #inv.forging::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;z-index:0!important;background:linear-gradient(180deg,rgba(8,9,11,.62),rgba(8,9,11,.82)),url("../assets/ui/cgart/load_deep.webp") center/cover no-repeat!important;-webkit-mask:none!important;mask:none!important;opacity:1!important}
html body #shop .pr i,html body #shop .sbtn i,html body #shop .shgold i,html body .gc,html body #icard .btns button .gc,html body #petp .gc{border-radius:0!important;background:url("../assets/icons/cg2/celestine.webp?v=1") center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 3px rgba(143,211,255,.6))!important;width:calc(13px * var(--k,1))!important;height:calc(13px * var(--k,1))!important}
html body #icard .btns.gmout{flex-wrap:wrap;gap:6px;margin-top:6px}html body #icard .btns.gmout button{flex:1 1 100%;font-size:12px!important;letter-spacing:.06em!important}
/* the trader's five kinds (the gun mods the fifth) share the column's height instead of running past its foot */
html body #shop:not(.smith):not(.pets):not(.seyla) .cats{grid-template-rows:none!important;grid-auto-rows:minmax(0,1fr)!important;gap:calc(5px * var(--k,1))!important}
html body #shop:not(.smith):not(.pets):not(.seyla) .cat{min-height:0!important;height:auto!important;padding-top:2px!important;padding-bottom:2px!important;margin:0!important}
html body #icard .btns.gmout .gmh{flex:1 1 100%;font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#9aa0a6;text-align:center}
html body #icard .btns.gmout button{white-space:normal!important;line-height:1.2!important;text-transform:none!important}
html body #icard .btns.gmout{display:flex!important;flex-wrap:wrap!important;justify-content:center!important}
html body #icard .btns.gmout button{flex:1 1 100%!important;width:100%!important;max-width:none!important;min-height:calc(36px * var(--k,1))!important;height:auto!important;padding:4px 14px!important;font:600 13px var(--f-display)!important}
html body #icard#icard .btns.gmout{display:grid!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;gap:6px!important}
html body #icard#icard .btns.gmout button{grid-column:1/-1!important;width:auto!important;min-width:0!important;letter-spacing:.04em!important;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden}
/* a short phone screen (812×330, Safari's bars on a 12 mini): the place's name under the map ran under the skill buttons — it goes; the banner names the place on arrival */
@media (max-height:350px){html body.touch #zone{display:none!important}}
/* a gun the hero's class cannot carry (js/fps/gunclass.js): its card's red line, its bag cell tinted red */
html body .ip .ln.gnouse{color:#ff6a5a!important;font-weight:700;letter-spacing:.02em}
html body #inv .cell.nouse{position:relative!important;box-shadow:inset 0 0 0 2px rgba(255,70,50,.7),inset 0 0 22px rgba(255,40,30,.5)!important}
html body #inv .cell.nouse img{filter:grayscale(1) brightness(.7) sepia(1) hue-rotate(-45deg) saturate(4)!important}
html body #inv .cell.nouse i.noway{position:absolute;inset:12%;border-radius:4px;pointer-events:none;background:linear-gradient(45deg,transparent 47%,rgba(255,70,50,.85) 48%,rgba(255,70,50,.85) 52%,transparent 53%),rgba(150,20,10,.28)}
html body #inv button[data-a=equip][data-no],html body .icard button[data-a=equip][data-no]{opacity:.38!important;filter:grayscale(1)!important}
/* the party (js/fps/ashui.js, 21.10.): each other hero's plate the hero plate's own art as 3-slice, 60 high, the portrait in its octagon cap with the level under it;
   in a party one's own plate shows in the bar layout too; who speaks glows ember; the bubble the dialogue box's plate (chamfer, ember top line and left bar, the panel's grain) */
body.hudbar.inparty:not(.touch) #tBars{display:block!important}
html body #ashParty{top:calc(88px + var(--st,0px))!important;left:calc(14px + var(--sl,0px))!important;gap:10px!important;cursor:pointer}
html body.touch #ashParty{top:calc(148px + var(--st,0px))!important;transform:scale(.8);transform-origin:left top}
html body #ashParty .apm.cgplate3{position:relative!important;box-sizing:border-box!important;width:max-content!important;height:60px!important;min-width:0!important;padding:15px 8px 0 0!important;background:none!important;border:0 solid transparent!important;border-width:0 18px 0 62px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 18px 0 62px stretch!important;clip-path:none!important;box-shadow:none!important;transition:filter .25s}
#ashParty .cgplate3 .por{position:absolute;left:-54px;top:8px;width:42px;height:42px;background:center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
#ashParty .cgplate3 .por b{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 4px;background:rgba(18,20,23,.92);font:700 10px/1.35 var(--f-display);color:#f0f2f4}
#ashParty .cgplate3 .nm{display:block;height:20px;line-height:20px;max-width:180px;font:700 13px/20px var(--f-display);letter-spacing:.06em;color:#e8eaec;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the members' life bars are the hero's own (#tLife, 142-144): a chamfered anthracite housing, the life in ten ember-red cells — they had been a solid bar (the user, 01.11.: 'durchgezogen vs. Segmente') */
#ashParty .cgplate3 .hp{position:relative;display:block;box-sizing:border-box;width:130px;height:6px;margin-top:4px;padding:1.5px;background:#4a5058;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)}
#ashParty .cgplate3 .hp::before{content:"";position:absolute;inset:1.5px;background:#121417;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 100%,0 100%)}
#ashParty .cgplate3 .hp u{position:relative;display:block;height:100%;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);box-shadow:0 0 6px rgba(255,90,30,.5);transition:width .3s}
#ashParty .apm.cgplate3.talk{filter:drop-shadow(0 0 6px rgba(255,122,42,.95)) drop-shadow(0 0 14px rgba(255,122,42,.55));animation:cgTalk 1.2s ease-in-out infinite alternate}
@keyframes cgTalk{from{filter:drop-shadow(0 0 4px rgba(255,122,42,.8)) drop-shadow(0 0 10px rgba(255,122,42,.35))}to{filter:drop-shadow(0 0 8px rgba(255,140,60,1)) drop-shadow(0 0 18px rgba(255,122,42,.6))}}
#ashParty .cgplate3 .cgsay,#ashToast{box-sizing:border-box;max-width:260px;width:max-content;padding:8px 12px 8px 14px;border:0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);
  background:linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.95) 8%,rgba(255,122,42,.95) 60%,rgba(255,122,42,0)) left 10px top 0/calc(100% - 20px) 2px no-repeat,linear-gradient(#ff7a2a,#ff7a2a) left 0 top 10px/3px calc(100% - 20px) no-repeat,
  linear-gradient(180deg,rgba(40,43,48,.96),rgba(20,22,25,.97)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px;box-shadow:none;font:500 13px/1.35 'Barlow',sans-serif;color:#eef0f2;text-shadow:0 1px 2px #000}
html body #ashParty .cgplate3 .cgsay{position:absolute;left:calc(100% + 26px)!important;top:50%;transform:translateY(-50%);pointer-events:none;z-index:3;filter:none}
#ashParty .cgplate3 .cgsay[hidden]{display:none}
#ashParty .cgplate3 .cgsay.in{animation:cgSayIn .2s ease-out both}
#ashToast{text-align:center;max-width:min(420px,80vw)}
/* the bar (21.10.): the gun's key hidden under its rounds (the two were drawn over each other), a skill's charges a badge in its top right corner, clear of its key */
body.cgammo-on #skillsT .tbtn.main kbd{display:none!important}
html body #skillsT .tbtn .chg{left:auto!important;right:3px!important;top:3px!important;bottom:auto!important;transform:none!important;min-width:14px;height:14px;padding:0 2px;display:flex;align-items:center;justify-content:center;background:#ff7a2a;color:#fff!important;font:700 10px/1 var(--f-display)!important;text-shadow:none!important;clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
html body #skillsT .tbtn .chg:empty{display:none!important}
/* the hero choice's guns (js/fps/gunclass.js): a caption, then each gun the class may carry — its picture over its name, four to a row */
#mainmenu .mm-guns{width:100%;padding:calc(6px * var(--k)) 0 calc(2px * var(--k));border-top:1px solid rgba(91,98,105,.35)}
#mainmenu .mm-guns[hidden]{display:none}
#mainmenu .mm-guns h4{margin:0 0 calc(4px * var(--k));text-align:center;font:600 calc(10px * var(--k))/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#ff9a5a}
#mainmenu .mm-guns .mg{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(4px * var(--k)) calc(6px * var(--k))}
#mainmenu .mm-guns figure{margin:0;width:calc(54px * var(--k));display:flex;flex-direction:column;align-items:center}
#mainmenu .mm-guns img{width:calc(40px * var(--k));height:calc(40px * var(--k));object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
#mainmenu .mm-guns figcaption{font:500 calc(9px * var(--k))/1.15 'Barlow Semi Condensed','Barlow',sans-serif;color:#c8ccd0;text-align:center}
/* a phone's class panel has no room to spare: the guns smaller, four to a row */
html body.touch #mainmenu .mm-guns{padding:3px 0 0}
html body.touch #mainmenu .mm-guns h4{margin-bottom:1px;font-size:8px}
html body.touch #mainmenu .mm-guns .mg{gap:0 2px}
html body.touch #mainmenu .mm-guns figure{width:56px}
html body.touch #mainmenu .mm-guns img{width:24px;height:24px}
html body.touch #mainmenu .mm-guns figcaption{font-size:7.5px;white-space:nowrap}
/* the bar's keys (21.10.): each socket's key small inside its top left corner — the potion's too, a locked skill's dimmed — none hanging over the plate's edge */
html body.hudbar:not(.touch) #skillsT .tbtn kbd,html body.hudbar:not(.touch) #skillsT .tpot kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{display:block!important;position:absolute!important;left:5px!important;top:4px!important;bottom:auto!important;right:auto!important;transform:none!important;margin:0!important;min-width:0!important;padding:0 3px!important;height:13px!important;font:700 9px/13px var(--f-display)!important;color:#d8dce0!important;background:rgba(10,11,13,.82)!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);z-index:4;opacity:1!important;visibility:visible!important}
html body.hudbar:not(.touch) #skillsT .tbtn.locked kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{color:#7a8088!important}
html body.hudbar:not(.touch) #skillsT .tbtn.main kbd{display:none!important}
#inv .doll .eq.noblade{display:none!important}
/* the knight's blade drawn (js/fps/ashblade.js): no rounds on the socket then; on a phone the swap chip on the fire button's top left, showing what a tap takes in hand */
body.bladedrawn #skillsT .tbtn.main .cgammo{display:none!important}
html body #skillsT .tbtn.main .bswap{position:absolute;left:-2px;top:-2px;width:30px;height:30px;z-index:6;border-radius:50%;background:#14161a center/72% no-repeat;box-shadow:0 0 0 2px #50565e,0 0 0 3px #0a0b0c,0 2px 6px rgba(0,0,0,.7);pointer-events:auto}
html body #skillsT .tbtn.main .bswap::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#ff7a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9h12l-3-3M19 15H7l3 3'/%3E%3C/svg%3E") center/80% no-repeat}
/* the party's states (js/fps/ashui.js): offline greyed with its minute counting down, in the menu or elsewhere a small line under the life */
#ashParty .cgplate3 .st{display:block;font:600 10px/1.2 var(--f-display);font-style:normal;letter-spacing:.04em;color:#ffb070;margin-top:2px;white-space:nowrap}
#ashParty .cgplate3 .st[hidden]{display:none}
#ashParty .apm.cgplate3.off{filter:grayscale(1) brightness(.6)!important;animation:none!important}
#ashParty .apm.cgplate3.off .st{color:#ff6a50}
/* the trade's table: the inventory's cells */
#ashTrade .trbox{max-width:min(860px,94vw);width:max-content;max-height:92vh;overflow:auto}
#ashTrade .trcols{display:flex;gap:18px;align-items:flex-start;text-align:left}
#ashTrade .trcols>div{flex:1;min-width:0}
#ashTrade h4{margin:8px 0 6px;font:600 11px/1.3 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#ff9a5a}
#ashTrade .trgrid{display:grid;grid-template-columns:repeat(6,52px);gap:6px}
#ashTrade .trgrid.bag{max-height:172px;overflow-y:auto}
#ashTrade .cell{position:relative;width:52px;height:52px;box-sizing:border-box;background:url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}
#ashTrade .cell img{width:78%;height:78%;object-fit:contain;pointer-events:none}
#ashTrade .cell.r-magic{background-color:rgba(60,110,220,.22)}#ashTrade .cell.r-rare{background-color:rgba(220,190,60,.2)}#ashTrade .cell.r-unique{background-color:rgba(230,120,40,.24)}
#ashTrade .cell.on{opacity:.35}#ashTrade .cell.sel{box-shadow:0 0 0 2px #ff7a2a}
#ashTrade .trst{margin:8px 0;font:500 12px/1.3 'Barlow',sans-serif;color:#c8ccd0}
#ashTrade .trcard .ip{position:static!important;max-width:300px;transform:none!important}
html body.touch #ashTrade .trgrid{grid-template-columns:repeat(6,40px);gap:4px}html body.touch #ashTrade .cell{width:40px;height:40px}html body.touch #ashTrade .trgrid.bag{max-height:96px}
html body.touch #ashTrade .trcard .ip{max-width:240px;font-size:11px}
/* the ultimate's socket an octagon like the others (it was Kharos' round one), its key a chip like theirs */
html body.hudbar:not(.touch) #skillsT .ultsock{border-radius:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%230e1013'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
html body.hudbar:not(.touch) #skillsT .ultsock::after{left:5px!important;top:4px!important;padding:0 3px;height:13px;font:700 9px/13px var(--f-display)!important;color:#7a8088!important;background:rgba(10,11,13,.82);text-shadow:none!important;clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
html body.hudbar:not(.touch) #skillsT .tult{border-radius:0!important;clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)!important}

/* the running mission (js/fps/ashmisslog.js): turquoise as Kharos' events — the tracker's plate with its orange turned, the log's entry, its menu on the panel's flourished plate */
html body.ashzone #quest.mq{filter:hue-rotate(152deg) saturate(1.15)}
#qlog h3.mis{color:#5ff0e0}
#qlog .qitem.mission.sel{background:rgba(95,240,224,.07);border-color:rgba(95,240,224,.35)}
#qlog .qitem.mission .qd{background:#5ff0e0;box-shadow:0 0 6px rgba(95,240,224,.6)}
#qlog .qitem.mission .qhx b{color:#5ff0e0}
#qlog .qitem.mission .qf{color:#5ff0e0;border-color:rgba(95,240,224,.55)}
#qlog .qitem.mission .qwhere{border-left-color:#5ff0e0;background:rgba(95,240,224,.08)}
#qlog .qitem.mission .qnav svg{stroke:#5ff0e0}
#qlog .qitem.mission .qnav.qmore svg{fill:#5ff0e0;stroke:none}
#qlog .qitem.mission .qnav + .qnav{margin-left:2px}
#qlog .qitem.mission .qx li.now::before{background:#5ff0e0}
#qlog .qitem.mission .qx li.next{color:var(--bone-lo,#8d9298)}
#qlog .qitem.mission .mroute{margin:2px 0 4px;font:calc(9.5px * var(--k,1))/1.35 var(--f-display);letter-spacing:.06em;color:#9fd9d2}
#qlog .qitem.mission .mroute b{color:#d9fffa;font-weight:600}
body.touch #qlog .qitem.mission.sel{border-left-color:#5ff0e0!important;background:rgba(95,240,224,.07)}
body.touch #qlog .qitem.mission .mroute{font-size:11.5px}
#ashMQ{position:fixed;z-index:60;display:none;box-sizing:border-box;min-width:236px;padding:30px 28px 33px;isolation:isolate;pointer-events:auto}
#ashMQ.on{display:block}
#ashMQ::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:40px 27px 44px 27px;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 40px 27px 44px 27px stretch;filter:drop-shadow(0 8px 18px rgba(0,0,0,.75));pointer-events:none}
#ashMQ::after{content:"";position:absolute;left:50%;top:-5px;width:22px;height:26px;margin-left:-11px;background:url("../assets/ui/cgx/panel_crest.webp") center/contain no-repeat;pointer-events:none}
#ashMQ h4{margin:0 0 2px;text-align:center;font:600 12px/1.3 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#5ff0e0;text-shadow:0 0 8px rgba(95,240,224,.35),0 1px 2px #000}
#ashMQ p{margin:6px auto 0;max-width:210px;text-align:center;font:400 12.5px/1.4 var(--f-body);color:#d9dcdf}
#ashMQ .mqb{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:12px}
html body #ashMQ button{--plate:dark;box-sizing:border-box;width:180px;height:36px;padding:0 16px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 11.5px/1 var(--f-display)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#ddd0b6!important;text-shadow:0 1px 2px #000!important;cursor:pointer}
html body #ashMQ button.pri{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
html body #ashMQ button.neg{color:#ffa489!important}
/* the experience bar on the hero's plate: laid over the painted orange stripe at its foot (art 350–787 × 346–356 of 900 × 402, the plate 72 high:
   62 px down, from 12.5 px inside the left slice to 0.5 px into the right one) — the stripe had read as a full bar that never moved (the user 23.10.:
   'bei 99 % stecken geblieben'); its track dark, its fill the stripe's own orange */
html body #tBars #tXp{display:block!important;position:absolute!important;left:-12.5px!important;right:-1.5px!important;top:61.6px!important;height:2.6px!important;margin:0!important;padding:0!important;background:#16120e!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)!important;clip-path:polygon(1.6px 0,100% 0,calc(100% - 1.6px) 100%,0 100%);outline:0!important;border:0!important;width:auto!important}
html body #tBars #tXp div{height:100%!important;background:linear-gradient(180deg,#ffb27a,#ff7a2a 55%,#c8521a)!important;box-shadow:0 0 4px rgba(255,122,42,.7)!important;transition:width .4s ease-out}
/* the quest plate on a desktop grows with the desktop's HUD (--hs: the window's height): it had stood at the phone's 256 × 60 px with 10 px
   text on any screen — 'viel zu klein, man kann gar nix lesen' (the user 23.10.); the whole plate scaled (art and words keep their proportion),
   from its top right corner where it hangs (its pulse swells from there too) */
html body.ashzone:not(.touch) #quest#quest{scale:calc(var(--hs,1) * 1.3);transform-origin:100% 0!important}
/* the desktop dock's top half (the user 23.10.: 'die Inventarplätze oben vergrößern … die Panels oben am Char'): the worn slots and the figure sized by InventoryPanel.layout
   (--eq, --fig-h, --cg-*), the slots a column from under the header to the frame's foot, the figure between them; the stats button a small plate tab in the header's level line.
   The phone is untouched (body.touch never matches) */
html body.hudbar:not(.touch) #inv.open .doll{padding:var(--cg-dt,48px) 0 var(--cg-db,8px)!important;gap:var(--cg-cg,0px)!important;align-items:flex-start!important;justify-content:center!important}
html body.hudbar:not(.touch) #inv.open .doll :is(.sec,.pri){gap:var(--cg-gv,8px)!important;margin:0!important}
html body.hudbar:not(.touch) #inv.open .doll .fig{height:var(--fig-h)!important;width:var(--cg-fw)!important;margin:0!important;align-self:flex-start}
html body.hudbar:not(.touch) #inv.open .doll .fig::before{bottom:-3%!important;height:9%!important}
html body.hudbar:not(.touch) #inv.open :is(.eq) > img{width:56%!important;height:56%!important}
html body.hudbar:not(.touch) #inv.open .ihead .statsbtn{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none;translate:none!important;display:inline-block;vertical-align:middle;margin:0 0 0 calc(10px * var(--k));border-width:calc(6px * var(--k)) calc(8px * var(--k))!important;padding:0 calc(4px * var(--k))!important;font-size:calc(8px * var(--k))!important;line-height:1.2;letter-spacing:.18em}
html body.hudbar:not(.touch) #inv.open .ihead .statsbtn:active{transform:scale(.96)}
/* the foe's element state under the target plate (js/fps/ashelem.js): its own line outside the art, centred, the plate keeps its size */
#ashTarget .tst{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;display:flex;gap:10px;white-space:nowrap;pointer-events:none}
#ashTarget .tst b{font:700 clamp(9px,1.05vw,12px)/1 var(--f-display,'Arial Narrow',sans-serif);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 6px currentColor,0 1px 2px #000,0 0 2px #000}
/* the missions' mechanics (js/fps/ashmech.js): a countdown on the dialogue's plate (9-slice) and a held point's life on the foe's plate (3-slice, its
   emblem in the octagon) at the top, under the area banner while that shows; the foe's own plate below them; the hold's progress on the dialogue's plate */
#ashMech{position:fixed;left:50%;top:max(calc(8px + var(--st,0px)),var(--tgtop,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:21;transition:top .25s}
#ashMech .mt,#ashMech .mh,#ashMechHold{display:none}
#ashMech .mt.on{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-width:118px;padding:3px 16px 4px;border-style:solid;border-width:10px 10px 11px 10px;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / 10px 10px 11px 10px stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
#ashMech .mt .mk{font:600 9px/1.1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#9aa0a8;white-space:nowrap}
#ashMech .mt .mn{font:700 24px/1 var(--f-display);letter-spacing:.06em;color:#eef0f2;text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums;margin-top:3px}
#ashMech .mt.warn .mn{color:#ffb050}
#ashMech .mt.crit .mn{color:#ff5a3a;text-shadow:0 0 8px rgba(255,70,30,.7),0 1px 3px #000;animation:ashMechBeat 1s ease-out infinite}
#ashMech .mt.pulse{animation:ashMechPulse .6s ease-out}
@keyframes ashMechBeat{0%{transform:scale(1.14)}40%{transform:scale(1)}}
@keyframes ashMechPulse{0%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(255,90,30,.8))}100%{transform:scale(1)}}
#ashMech .mh.on{display:block;position:relative;width:max-content;height:54px;box-sizing:border-box;border-style:solid;border-width:0 15px 0 54px;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 104 0 378 fill / 0 15px 0 54px stretch;padding:16px 6px 0 0}
#ashMech .mh .mb{position:absolute;left:-49px;top:5px;width:41px;height:44px;background:url("../assets/icons/interact/fire.webp") center/50% no-repeat;filter:drop-shadow(0 0 4px rgba(255,120,40,.6))}
#ashMech .mh .mk{display:block;height:15px;font:700 11px/15px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#f0f2f4;text-shadow:0 1px 3px #000;white-space:nowrap}
#ashMech .mh .tb,#ashMechHold .tb{display:block;position:relative;min-width:150px;height:5px;margin-top:4px;background:#1a0a06;border:1px solid #5a2410;border-radius:2px;overflow:hidden}
#ashMech .mh .tb>i,#ashMechHold .tb>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#ffb050,#c0400e)}
#ashMech .mh .tb>i{transition:width .15s linear}
#ashMech .mh.hit .tb>i{background:linear-gradient(180deg,#ff6a40,#a0180e)}
#ashMech .mh.hit .mb{filter:drop-shadow(0 0 7px rgba(255,50,20,.95))}
html body.ashzone.mechon #ashTarget,html body.ashzone.mechon #ashTarget.on{top:calc(max(calc(8px + var(--st,0px)),var(--tgtop,0px)) + var(--mechH,0px) + 8px)!important}
#ashMechHold{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);flex-direction:column;align-items:center;box-sizing:border-box;min-width:170px;padding:2px 14px 4px;border-style:solid;border-width:10px 10px 11px 10px;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / 10px 10px 11px 10px stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));pointer-events:none;z-index:21}
#ashMechHold.on{display:flex}
#ashMechHold .mk{font:600 10px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#eef0f2;text-shadow:0 1px 2px #000;white-space:nowrap}
body.touch #ashMechHold{bottom:auto;top:calc(50% + 66px)}
/* the traders' signs over the head (js/fps/ashtrader.js): over the name plate, outside its box so it takes no touch, a little larger near (--svk) */
#labels .npc-label .svc-ico{position:absolute;left:50%;bottom:calc(100% - 4px);width:calc(34px * var(--svk,1));height:calc(34px * var(--svk,1));transform:translateX(-50%);background:center/contain no-repeat;pointer-events:none!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
body:not(.touch) #labels .npc-label .svc-ico{width:calc(40px * var(--svk,1));height:calc(40px * var(--svk,1))}
/* the talk's plate on a phone (the user, 25.10.: 'Speech Bubble ist viel zu breit auf dem Handy und nimmt den ganzen Platz'): under 58 % of the width, low on the screen's foot, the words in two or three lines */
html body.touch #dialogue#dialogue,html body.touch.cine #dialogue#dialogue{width:min(500px,calc(58 * var(--vw)))!important;bottom:calc(12px + var(--sb,0px))!important;padding:7px 56px 7px 26px!important}
html body.touch #dialogue#dialogue .say{font-size:12px!important;line-height:1.3!important;min-height:0!important}
html body.touch #dialogue#dialogue .who{font-size:9.5px!important;margin-bottom:1px!important}
/* Settings → Brightness, Black level, Contrast (26.10.): a slider of the settings' own plates — the groove the options' tile (9-slice), the part up to the value and the knob the chosen option's gold plate; the knob's centre runs from one half-knob in to one half-knob before the end, so it never leaves the groove */
#help .pslide{--kh:calc(12px * var(--k));position:relative;flex:1 1 0;min-width:calc(90px * var(--k));height:calc(30px * var(--k));cursor:pointer;touch-action:pan-y;outline:0;-webkit-tap-highlight-color:transparent}
#help .pslide::before,#help .pslide .pfill{content:"";position:absolute;left:0;top:50%;height:calc(12px * var(--k));transform:translateY(-50%);box-sizing:border-box;border:2px solid transparent;pointer-events:none}
#help .pslide::before{right:0;border-image:var(--o-tile) 11 fill / calc(6px * var(--k)) / 0 stretch;opacity:.9}
#help .pslide .pfill{width:calc(var(--kh) + (100% - 2 * var(--kh)) * var(--p, .5));border-image:var(--o-plate-gold) 11 fill / calc(6px * var(--k)) / 0 stretch;opacity:.75}
#help .pslide .pknob{position:absolute;top:50%;left:calc(var(--kh) + (100% - 2 * var(--kh)) * var(--p, .5));width:calc(2 * var(--kh));height:calc(2 * var(--kh));transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / calc(8px * var(--k)) / 0 stretch;filter:drop-shadow(0 0 5px rgba(238,162,74,.4));pointer-events:none}
#help .pslide:focus-visible .pknob{filter:drop-shadow(0 0 8px rgba(255,190,110,.8))}
#help .picrow .pval{flex:none;width:calc(44px * var(--k));text-align:right;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.06em;color:var(--bone);font-variant-numeric:tabular-nums}
body.touch #help .pslide{height:40px}

/* the volume sliders (Settings → Music, Effects): an ember track filled to the value, a small bronze-edged thumb; the value beside it */
#help .hrow .volr{flex:1 1 0;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:100%}
#help .hrow .volr::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ember) 0 var(--p),rgba(255,255,255,.12) var(--p) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#help .hrow .volr::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ember) 0 var(--p),rgba(255,255,255,.12) var(--p) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#help .hrow .volr::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd2a8,#c4602a 60%,#5a2410);box-shadow:0 0 0 2px #2a1a10,0 0 8px rgba(255,90,31,.45)}
#help .hrow .volr::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd2a8,#c4602a 60%,#5a2410);box-shadow:0 0 0 2px #2a1a10,0 0 8px rgba(255,90,31,.45)}
body.touch #help .hrow .volr{height:40px}
body.touch #help .hrow .volr::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10px}
#help .hrow .volv{flex:none;width:3.4em;text-align:right;font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone);font-weight:normal}
/* each member's colour (js/net/ashnet.js ashMateCol): his name on his plate, a ring round his portrait, his name over his head; the place line no longer cut off — the plate grows for it */
html body #ashParty .cgplate3 .nm{color:var(--mate,#e8eaec)!important}
#ashParty .cgplate3 .por{box-shadow:0 0 0 2px var(--mate,transparent),0 0 8px color-mix(in srgb,var(--mate,transparent) 60%,transparent)}
html body #ashParty .apm.cgplate3.away,html body #ashParty .apm.cgplate3.off{height:74px!important}
#ashParty .cgplate3 .st{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.npc-label.ashpeer.mate span{color:var(--mate)!important}
.ash-edge i{border-left-color:var(--mate,#5fd8ff)!important}
.ash-edge b{color:var(--mate,#9fe6ff)!important}
/* the crest on every panel's top (assets/ui/cgx/panel_crest.webp): the picture is a square cut from a frame, its own ground and an orange line of its own at another
   height than the frame's — it showed as a dark box with a stray line (the user, 02.11.: 'der Schnörkel sieht fehlplatziert aus'); only its diamond is shown now */
#ashQC::after,#ashTerm .atp::after,#ashAsk .aqp::after,#ashJS .jsp::after,#ashRelq .rqp::after,#ashMQ::after,html body #mainmenu .mm-info::after{clip-path:polygon(50% 4%,85% 40%,50% 97%,15% 40%)}
body.ashzone #gmenu [data-go="players"]{--cgic:url("../assets/icons/cg2/talk.webp?v=5")}body.ashzone #gmenu [data-go="party"]{--cgic:url("../assets/icons/cg2/chat.webp?v=5")}
/* four tabs in the quick panel (Quick, Own, Party, Players): narrower letters so the last stays clear of the close button */
html body #ashQC .qct.four button:not(.x){font-size:10px!important;letter-spacing:.06em!important;padding:0 4px!important}
/* the quick panel's close as everywhere else (the bag, the Reliquary): the square plate, the painted sign at half its size (the user, 02.11.: it had its own round one) */
html body #ashQC .qct button.x{position:relative;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important;width:36px;height:36px}
html body #ashQC .qct button.x svg{display:none}
html body #ashQC .qct button.x::after{content:"";position:absolute;inset:25%;background:url("../assets/icons/cg2/close.webp?v=5") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
/* a member's portrait on a dark ground: a hooded figure's picture is cut out, and the game had shown through it (the user, 02.11.) */
#ashParty .cgplate3 .por{background-color:#15171a}
/* a phone: the members in one row of small plates under one's own bar — portrait, name, life — so a party of four leaves the stick's corner free (the user, 02.11.:
   'mit 4 Spielern würde man den Steuer-Button nicht mehr treffen'); where each is stays in the party panel */
html body.touch #ashParty{flex-direction:row!important;align-items:flex-start;gap:8px!important;top:calc(118px + var(--st,0px))!important;transform:none!important}
html body.touch #ashParty .apm.cgplate3{width:58px!important;height:auto!important;padding:0!important;border-width:0!important;border-image:none!important;display:flex;flex-direction:column;align-items:center;gap:2px}
html body.touch #ashParty .apm.cgplate3.away,html body.touch #ashParty .apm.cgplate3.off{height:auto!important}
html body.touch #ashParty .cgplate3 .por{position:relative!important;left:0!important;top:0!important;width:40px!important;height:40px!important;box-shadow:0 0 0 2px var(--mate,#50565e),0 0 8px color-mix(in srgb,var(--mate,transparent) 60%,transparent)}
html body.touch #ashParty .cgplate3 .por::after{display:none}
html body.touch #ashParty .cgplate3 .nm{height:auto!important;line-height:1.1!important;max-width:58px!important;font-size:9.5px!important;text-align:center}
html body.touch #ashParty .cgplate3 .hp{width:44px!important;height:5px!important;margin-top:0!important}
html body.touch #ashParty .cgplate3 .st{display:none!important}
html body.touch #ashParty .cgplate3 .cgsay{left:0!important;top:calc(100% + 6px)!important;transform:none!important;max-width:200px}
/* the leader's crown (assets/icons/cg2/crown.webp): over his portrait in the party frame, before his name on his tag and in the party tab; the tag's 'out with …' line */
#ashParty .apm.lead .nm::before{content:"";display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
html body.touch #ashParty .apm.lead .nm::before{width:11px;height:11px;margin-right:2px}
.npc-label.ashpeer.lead > span::before{content:"";display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat}
.npc-label.ashpeer .ptag{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:1px;font:500 10px/1.2 'Barlow',sans-serif;font-style:normal;color:#c9d3db;white-space:nowrap}
.npc-label.ashpeer .ptag[hidden]{display:none}
.npc-label.ashpeer .ptag i{flex:none;width:13px;height:13px;background:center/contain no-repeat}
.npc-label.ashpeer .ptag i.cr{background-image:url("../assets/icons/cg2/crown.webp")}
.npc-label.ashpeer .ptag i.pt{background-image:url("../assets/icons/cg2/chat.webp?v=5")}
#ashQC .qccr{display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat}
html body.touch #ashChat{display:none!important}
/* the crown readable: larger, lit warm (dark iron on the dark plates had all but vanished) */
#ashParty .apm.lead .nm::before,.npc-label.ashpeer.lead > span::before,.npc-label.ashpeer .ptag i.cr,#ashQC .qccr{width:18px!important;height:18px!important;filter:brightness(1.6) drop-shadow(0 0 3px rgba(255,140,60,.95)) drop-shadow(0 1px 1px #000)!important}
/* a phone: the members' tiles right under one's own plate, each in the iron slot's frame (the user, 02.11.: 'mehr nach oben unter das Panel des eigenen Spielers und wenigstens den Rahmen drum') */
html body.touch #ashParty{top:calc(66px + var(--st,0px))!important;gap:6px!important}
html body.touch #ashParty .apm.cgplate3{box-sizing:border-box!important;width:64px!important;padding:6px 4px 5px!important;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body.touch #ashParty .apm.lead .nm::before{width:12px!important;height:12px!important}
/* (clear of one's own plate, a little smaller — the user, 02.11.) */
html body.touch #ashParty{top:calc(84px + var(--st,0px))!important;gap:5px!important}
html body.touch #ashParty .apm.cgplate3{width:54px!important;padding:5px 3px 4px!important}
html body.touch #ashParty .cgplate3 .por{width:34px!important;height:34px!important}
html body.touch #ashParty .cgplate3 .nm{font-size:8.5px!important;max-width:50px!important}
html body.touch #ashParty .cgplate3 .hp{width:38px!important;height:4px!important}
/* the ultimate charging (js/fps/ashult.js): shown from level 10, its icon dim, an ember fill rising with the charge */
html body .tult.charging{display:block!important;animation:none!important}
html body .tult.charging .ic{filter:grayscale(.85) brightness(.5)}
html body .tult.charging::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(255,138,58,.42) calc(var(--uc,0) * 100%),rgba(255,138,58,0) calc(var(--uc,0) * 100%));border-radius:50%}
html body.hudbar:not(.touch) #skillsT .tult.charging::after{border-radius:0;clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)}
/* the ultimate's button on a phone as Kharos draws it, full only (the user, 03.11.: 'der Button war visuell prägnanter — schau es dir genau bei Kharos ab'): game.css' own blazing look kept */
/* the phone's fire button framed by the ultimate's charge (js/fps/ashult.js): an ember line round its octagon, drawn as hits charge it, glowing; whole and pulsing while it burns */
html body.touch #skillsT .tbtn.main .ultframe{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;overflow:visible;z-index:3}
html body.touch #skillsT .tbtn.main .ultframe polygon{fill:none;stroke:#ff8a3a;stroke-width:3.2;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,138,58,.95)) drop-shadow(0 0 7px rgba(255,100,30,.6));transition:stroke-dashoffset .2s}
html body.touch #skillsT .tbtn.main .ultframe.off{display:none}
html body.touch #skillsT .tbtn.main .ultframe.full polygon,html body.touch #skillsT .tbtn.main .ultframe.burn polygon{stroke:#ffb060;animation:ultframe 0.9s ease-in-out infinite}
@keyframes ultframe{50%{stroke:#ffe0a0;filter:drop-shadow(0 0 5px rgba(255,190,90,1)) drop-shadow(0 0 12px rgba(255,120,40,.8))}}
/* the ultimate's button on a phone as Kharos' was — ablaze, a turning ring of light, a pulse going out — only its frame an octagon (the user, 03.11.: 'warum Ultimate nicht so
   wie sie war, nur mit eckigem Rahmen'); 64 px, its own place low beside the jump button (js/fps/ashult.js) */
@property --ua{syntax:'<angle>';inherits:false;initial-value:0deg}
html body.touch .tult{width:64px!important;height:64px!important;text-align:left;filter:drop-shadow(0 0 8px rgba(140,200,255,.85)) drop-shadow(0 0 20px rgba(90,150,255,.45));animation:ultblazeO .9s ease-in-out infinite!important}
html body.touch .tult .ic{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;overflow:hidden!important;background:#cfeaff;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
html body.touch .tult .ic::before,html body.touch .tult .ic::after{display:none!important}
html body.touch .tult .ic canvas{position:absolute;inset:3px;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important;border-radius:0!important;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
html body.touch .tult::before{content:"";position:absolute;inset:-10px;z-index:-1;pointer-events:none;background:conic-gradient(from var(--ua),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%);
  clip-path:polygon(evenodd,30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%,30% 0,32% 7%,68% 7%,93% 32%,93% 68%,68% 93%,32% 93%,7% 68%,7% 32%,32% 7%);animation:ultspinO 1.6s linear infinite}
html body.touch .tult::after{content:"";position:absolute;inset:-4px;pointer-events:none;background:rgba(190,230,255,.75);clip-path:polygon(evenodd,30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%,30% 0,31% 3%,69% 3%,97% 31%,97% 69%,69% 97%,31% 97%,3% 69%,3% 31%,31% 3%);animation:ultringO 1.2s ease-out infinite}
@keyframes ultblazeO{0%,100%{filter:drop-shadow(0 0 8px rgba(140,200,255,.8)) drop-shadow(0 0 18px rgba(90,150,255,.4));transform:scale(1)}50%{filter:drop-shadow(0 0 13px rgba(170,220,255,1)) drop-shadow(0 0 30px rgba(100,160,255,.6));transform:scale(1.06)}}
@keyframes ultspinO{to{--ua:360deg}}
@keyframes ultringO{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
html body.touch .tult .ic canvas{padding:11px;box-sizing:border-box;background:radial-gradient(circle at 50% 45%,#232833,#08090c 78%)} /* (the icon on a dark face inside the light frame, kept off the rim: memory round-button-safe-area) */
/* the bar's keys readable (the user, 03.11.: 'warum stehen keine Tasten in der Action-Bar?' — 9 px grey chips): 11 px, bright; the ultimate's socket says B (it had
   inherited the old bar's 'F' or nothing), over its button too */
html body.hudbar:not(.touch) #skillsT .tbtn kbd,html body.hudbar:not(.touch) #skillsT .tpot kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{height:15px!important;font:700 11px/15px var(--f-display)!important;padding:0 4px!important;color:#f2f4f6!important}
html body.hudbar:not(.touch) #skillsT .tbtn.locked kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{color:#a8aeb6!important}
html body.hudbar:not(.touch) #skillsT .ultsock::after{display:none!important} /* (the B rides on the ultimate's own button, shown from level 10: js/fps/ashult.js) */
html body.hudbar:not(.touch) #skillsT .tult kbd{display:block!important;position:absolute!important;left:5px!important;top:4px!important;bottom:auto!important;right:auto!important;transform:none!important;margin:0!important;min-width:0!important;padding:0 4px!important;height:15px!important;font:700 11px/15px var(--f-display)!important;color:#f2f4f6!important;background:rgba(10,11,13,.82)!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:4}
/* the chest's window in the desktop's side drawer (js/fps/ashhub.js, Kharos' js/story/stash.js): its tabs I–V left of the grid take room — the grid narrower by them so
   both stand in the drawer, and its long heading wraps instead of running off the screen */
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{width:calc(var(--dw) - 116px - 64px)!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell{justify-content:center!important;column-gap:14px!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell>h3{white-space:normal!important;text-align:center;line-height:1.4}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{align-self:start!important}
/* several at once (js/fps/ashbag.js): the sell-all signs as words, the picks marked, the trader's / chest's row, the bag's bar, the chest's window on the left */
html body #shop .salls .slab{display:none!important}
html body #shop .salls .sall{width:auto!important;height:auto!important;min-height:calc(30px * var(--k));padding:0 calc(12px * var(--k))!important;font:600 calc(11px * var(--k)) var(--f-display)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--rc,#e8e2d4)!important;white-space:nowrap}
html body #shop .salls .sall span{color:var(--rc,#e8e2d4)}
html body #shop .salls .sall img{display:none!important}
html body #shop .shsell .mrow{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:calc(8px * var(--k));margin-top:calc(10px * var(--k));align-items:center}
html body #shop .mrow button,html body #inv .mbar button{min-height:calc(30px * var(--k));padding:0 calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
html body #shop .mrow button.pri,html body #inv .mbar button.pri{border-image-source:var(--o-fire);color:#241304}
html body #shop .mrow button.on{color:#ee864a}
html body #shop .mrow button:disabled,html body #inv .mbar button:disabled{opacity:.45;cursor:default}
html body #inv .mbar button.warn{color:#ff7a5a}
html body #shop .sgrid [data-i].msel,html body #inv .bag .cell.msel{outline:2px solid #ee864a;outline-offset:-3px;box-shadow:inset 0 0 14px rgba(238,134,74,.45)}
html body #shop .sgrid [data-i].msel::after,html body #inv .bag .cell.msel::after{content:"✓";position:absolute;right:3px;top:1px;font:700 12px/1 var(--f-display);color:#ffb070;text-shadow:0 1px 2px #000;pointer-events:none}
html body #shop .sgrid [data-i],html body #inv .bag .cell{position:relative}
html body #inv .mbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
html body #inv .mbar[hidden]{display:none!important}
html body #inv .mbar .mn{font:600 11px var(--f-display);letter-spacing:.1em;color:#c9c2b4;margin-right:4px;text-transform:uppercase}
html body #inv .itabs .mtab svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

html body.hudbar:not(.touch) #shop.open.stashv .shsell{left:0!important;right:auto!important;box-shadow:10px 0 34px rgba(0,0,0,.65),inset -1px 0 0 rgba(212,129,81,.18)!important}
/* the drawer's grids bigger (the user, 03.11.: 'weg mit dem Text … lieber weniger Columns, dafür größer'): no heading over them, four columns of big slots, the sell-all
   words in a row under the grid */
html body.hudbar:not(.touch) #shop.open .shsell>h3{display:none!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid{width:calc(var(--dw) - 36px)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{width:calc(var(--dw) - 36px - 62px)!important}
html body.hudbar:not(.touch) #shop.open .sgrid [data-i]{width:auto!important;height:auto!important;aspect-ratio:1}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{grid-column:1 / -1!important;grid-row:3!important;flex-wrap:wrap!important;justify-content:flex-start!important;margin-top:12px!important}
html body.hudbar:not(.touch) #shop.open .shsell .mrow{grid-row:4}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .mrow{grid-row:3}
html body.hudbar:not(.touch) #shop.open .shsell{align-content:start!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid{grid-auto-rows:auto!important;height:auto!important;max-height:none!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid [data-i]{height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{flex-direction:row!important;display:flex!important;gap:8px!important}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls,html body.hudbar:not(.touch) #shop.open .shsell .mrow{width:calc(var(--dw) - 36px)!important;max-width:none!important;box-sizing:border-box}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls .sall{width:100%!important;justify-content:center!important;padding:0 4px!important;font-size:10px!important;letter-spacing:.04em!important}
/* the bag's bar on a phone: compact, laid over the grid's foot so all its buttons show (two lines had run out of the panel) */
html body.touch #inv .bagwrap{position:relative}
html body.touch #inv .mbar{position:absolute;left:0;right:0;bottom:0;z-index:6;margin:0;padding:6px 6px 4px;gap:4px;justify-content:center;background:linear-gradient(rgba(10,11,13,0),rgba(10,11,13,.94) 22%)}
html body.touch #inv .mbar button{min-height:26px;padding:0 8px;font-size:10px;letter-spacing:.04em}
html body.touch #inv .mbar .mn{font-size:10px;width:100%;text-align:center;margin:0}
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:2px solid #ee864a!important;outline-offset:-3px!important;box-shadow:inset 0 0 16px rgba(238,134,74,.55)!important}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:"✓"!important;display:block!important;position:absolute!important;right:4px!important;top:2px!important;left:auto!important;bottom:auto!important;width:auto!important;height:auto!important;background:none!important;font:700 13px/1 var(--f-display)!important;color:#ffb070!important;text-shadow:0 1px 2px #000!important;z-index:5!important;opacity:1!important}

html body #inv .mpick{min-height:28px;padding:0 12px;margin-right:auto;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 11px var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
html body #inv .mpick[hidden]{display:none!important}
/* the phone's trader / chest row: under the grid, in the flow (it had floated over the chest's tabs) */
html body.touch #shop .shsell .mrow{position:static!important;grid-column:1 / -1!important;grid-row:auto!important;justify-content:center;margin:8px 0 0!important}
/* the phone's chest: its row in the free column left of the tabs, the buttons one over the other (it had lain over the grid's top) */
html body.touch #shop.stashv .shsell .mrow{position:fixed!important;left:calc(16px + var(--sl,0px));bottom:24px;width:150px;flex-direction:column;align-items:stretch;gap:8px;margin:0!important;z-index:5}
html body.touch #shop.stashv .shsell .mrow button{white-space:normal;line-height:1.2;padding:6px 8px;min-height:34px}
/* the trader with the bag beside it on a desktop (js/fps/ashbag.js): the trader's own sell drawer away (it lay over the bag), the sell-all words under the bag */
html body.shopbag.hudbar:not(.touch) #shop.open .shsell{display:none!important}
html body #inv .trow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
html body #inv .trow[hidden]{display:none!important}
html body #inv .trow button{min-height:28px;padding:0 10px;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;font:600 10.5px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
html body #inv .trow .r-normal{color:#e8e2d4}html body #inv .trow .r-magic{color:#6f9dff}html body #inv .trow .r-rare{color:#f5cf3d}
html body #inv .mbar{flex-wrap:nowrap}
/* the trader's name on its plate: smaller, so it fits beside its close (it had run under the plate's edge) */
html body.hudbar:not(.touch) #shop.open .plate-title{font-size:11px!important;letter-spacing:.14em!important;white-space:nowrap;margin-left:66px!important;width:calc(100% - 136px)!important;max-width:none!important;overflow:hidden;text-overflow:ellipsis;text-align:center}
html body #inv .mbar .mn{white-space:nowrap}
html body.hudbar:not(.touch) #shop.open:not(.pets):not(.smith) .plate-title{font-size:12px!important;letter-spacing:.12em!important;padding-left:0!important;padding-right:0!important;margin-left:66px!important;width:calc(100% - 136px)!important;text-align:center!important}
/* the action icons' buttons (js/fps/ashbag.js): the sockets' octagon, the icon about half of it, a number beside it where there is one */
html body #inv .aib,html body #shop .aib{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;min-width:40px!important;width:auto!important;height:40px!important;min-height:40px!important;padding:0 6px!important;border:0!important;border-image:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/40px 40px no-repeat!important;cursor:pointer;color:#f2ede4!important}
html body #inv .aib .aic,html body #shop .aib .aic{width:24px;height:24px;flex:none;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
html body #inv .aib b,html body #shop .aib b{font:700 12px var(--f-display);color:#bfe6ff;letter-spacing:.02em;padding-right:6px}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") left center/40px 40px no-repeat,linear-gradient(90deg,transparent 20px,rgba(14,15,17,.92) 20px)!important;border-radius:0 6px 6px 0!important;padding-left:8px!important}
html body #inv .aib.pri,html body #shop .aib.pri{filter:drop-shadow(0 0 5px rgba(238,134,74,.55))}
html body #inv .aib.sure{filter:drop-shadow(0 0 7px rgba(255,80,50,.9))}
html body #inv .aib.sure b{color:#ff7a5a}
html body #inv .aib:disabled,html body #shop .aib:disabled{opacity:.4;filter:none;cursor:default}
html body #inv .mbar{gap:6px!important;flex-wrap:nowrap!important}
html body #inv .mbar .mn{font:700 13px var(--f-display);color:#ee864a;min-width:18px;text-align:center}
/* the phone's trader as the other windows (the user, 03.11.: 'warum sind die Buttons hier nicht unten links? Das ist überhaupt nicht so wie in den anderen Layouts'):
   the grid on top, one row under it from the left — Select / Done, Sell selected, then the sell-all words (they had stood above the grid and in a column right of it) */
html body #inv .aib[hidden],html body #shop .aib[hidden]{display:none!important}
html body #inv .aib,html body #shop .aib{min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body #inv .aib .aic,html body #shop .aib .aic{width:30px;height:30px}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") left center/46px 46px no-repeat,linear-gradient(90deg,transparent 23px,rgba(14,15,17,.92) 23px)!important}
/* the number inside its button (the user, 03.11.: '48 steht nicht im Button'), at the octagon's foot as the gun's rounds; every button of a row the same height, centred */
html body #inv .aib,html body #shop .aib{position:relative;width:46px!important;min-width:46px!important;padding:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;border-radius:0!important;vertical-align:middle}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;padding:0!important}
html body #inv .aib:has(b) .aic,html body #shop .aib:has(b) .aic{margin-top:-8px}
html body #inv .aib b,html body #shop .aib b{position:absolute;left:3px;right:3px;bottom:5px;padding:0!important;text-align:center;font:700 10px/1 var(--f-display)!important;color:#dff3ff;text-shadow:0 1px 2px #000;letter-spacing:0;pointer-events:none}
html body #inv .mbar,html body #inv .trow,html body #shop .mrow,html body #shop .salls{align-items:center!important}
html body #inv .trow,html body #shop .salls{gap:6px!important}
/* sell all of a colour: the sell icon, 'All' on it, the octagon's rim glowing in the colour */
html body .aib.sallb.r-normal{filter:drop-shadow(0 0 4px rgba(232,226,212,.55))}
html body .aib.sallb.r-magic{filter:drop-shadow(0 0 5px rgba(111,157,255,.85))}
html body .aib.sallb.r-rare{filter:drop-shadow(0 0 5px rgba(245,207,61,.85))}
html body .aib.sallb.r-normal b{color:#f2ede4}html body .aib.sallb.r-magic b{color:#9fc0ff}html body .aib.sallb.r-rare b{color:#ffe07a}
html body #shop .salls .sall.aib{min-height:46px!important;font-size:inherit!important}
html body #shop .salls .sall.aib img.aic{display:block!important;width:30px!important;height:30px!important;margin:-8px 0 0!important;max-width:none!important}
html body #shop .salls .sall.aib{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;width:46px!important;height:46px!important}
html body .aib.sallb.r-normal{filter:drop-shadow(0 0 4px rgba(232,226,212,.6))!important}html body .aib.sallb.r-magic{filter:drop-shadow(0 0 6px rgba(111,157,255,.9))!important}html body .aib.sallb.r-rare{filter:drop-shadow(0 0 6px rgba(245,207,61,.9))!important}
html body #shop .salls .sall.aib b{font-size:10px!important}
html body #shop .aib.sallb.r-normal b,html body #inv .aib.sallb.r-normal b{color:#f2ede4!important}
html body #shop .aib.sallb.r-magic b,html body #inv .aib.sallb.r-magic b{color:#8fb4ff!important}
html body #shop .aib.sallb.r-rare b,html body #inv .aib.sallb.r-rare b{color:#ffd84a!important}
html body #shop .aib.sallb.r-normal,html body #inv .aib.sallb.r-normal{filter:drop-shadow(0 0 3px rgba(232,226,212,.75))!important}
html body #shop .aib.sallb.r-magic,html body #inv .aib.sallb.r-magic{filter:drop-shadow(0 0 4px rgba(90,140,255,1)) drop-shadow(0 0 2px rgba(90,140,255,1))!important}
html body #shop .aib.sallb.r-rare,html body #inv .aib.sallb.r-rare{filter:drop-shadow(0 0 4px rgba(245,200,40,1)) drop-shadow(0 0 2px rgba(245,200,40,1))!important}
/* Select set apart on the left of its row (the user, 03.11.: 'der Multiselect-Button sollte links etwas Abstand von allen anderen Buttons haben') */
html body #inv .bfoot{display:flex;align-items:center;gap:6px;margin-top:6px}
html body #inv .bfoot .mpick{margin-right:18px!important}
html body #inv .bfoot .mpick[hidden]+.trow{margin-left:0}
html body #shop .mrow .mtog{margin-right:18px!important}
/* the bag's foot in one line (js/fps/ashbag.js): the actions left, the count right; on a desktop the buttons 38 px so the line is no taller than the count's own */
html body #inv .ifoot{display:flex;align-items:center;gap:6px;width:100%;min-height:0}
html body #inv .ifoot .bagcount{margin-left:auto;white-space:nowrap}
html body #inv .ifoot .bfoot{margin:0!important}
html body #inv .ifoot .bfoot[hidden]{display:none!important}
html body #inv .ifoot .mbar{margin:0!important;position:static!important;background:none!important;padding:0!important}
html body:not(.touch) #inv .ifoot .aib{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;background-size:38px 38px!important}
html body:not(.touch) #inv .ifoot .aib .aic{width:24px!important;height:24px!important}
html body:not(.touch) #inv .ifoot .aib:has(b) .aic{margin-top:-6px}
html body:not(.touch) #inv .ifoot .aib b{font-size:9px!important;bottom:4px}
html body:not(.touch) #inv .ifoot .bfoot .mpick{margin-right:14px!important}
html body.touch #inv .ifoot .mbar{position:static!important}
/* Safari: the foot's rows never wrap (it had stacked the sell-all buttons one over the other and out of the panel — the user, 03.11., macOS Safari) */
html body #inv .ifoot,html body #inv .ifoot .bfoot,html body #inv .ifoot .trow,html body #inv .ifoot .mbar{flex-wrap:nowrap!important;flex:none}
html body #inv .ifoot .bagcount{flex:1 1 auto;text-align:right}
html body #inv .ifoot .trow{display:flex;gap:6px!important}
html body:not(.touch) #inv .ifoot .trow .aib{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;background-size:38px 38px!important}
/* the picking mode plain to see (the user, 03.11.: 'ich sehe das gar nicht richtig, dass ich im Multiselect bin … was, wenn ich abbrechen will … so klein, dass man nix sieht'):
   the grid framed in glowing ember while picking, 'n selected' in words, the buttons 46 px again with a cancel X */
html body #inv.multi .bag{outline:2px solid rgba(238,134,74,.85);outline-offset:5px;box-shadow:0 0 18px rgba(238,134,74,.35)}
html body #inv .mbar .mn{font:700 12px var(--f-display)!important;letter-spacing:.08em!important;text-transform:uppercase;color:#ee864a!important;white-space:nowrap;margin-right:6px!important}
html body:not(.touch) #inv .ifoot .aib{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body:not(.touch) #inv .ifoot .aib .aic{width:30px!important;height:30px!important}
html body:not(.touch) #inv .ifoot .aib:has(b) .aic{margin-top:-8px}
html body:not(.touch) #inv .ifoot .aib b{font-size:10px!important;bottom:5px}
html body:not(.touch) #inv .ifoot .trow .aib{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body #inv .aib.cancel .aic,html body #shop .mtog.on .aic{filter:drop-shadow(0 0 3px rgba(255,90,60,.7))}
/* Cindergate's own tooltip (js/fps/ashbag.js AshTip) */
#ashTip{position:fixed;z-index:9999;pointer-events:none;padding:5px 10px 6px;background:linear-gradient(rgba(20,21,24,.97),rgba(12,13,15,.97));border:1px solid rgba(238,134,74,.7);box-shadow:0 4px 14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.6);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);font:600 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#f2ede4;white-space:nowrap;opacity:0;transition:opacity .12s}
#ashTip.on{opacity:1}
/* the chest's title over its drawer (the drawer on the left had covered it — the user, 03.11.: 'wo ist das Beutetruhe-Label? links oben, was es ist') */
html body.hudbar:not(.touch) #shop.open.stashv .plate-title{position:relative!important;z-index:8!important;color:#e6e1d6!important;opacity:1!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell{padding-top:64px!important}
/* picking, as the user drew it (03.11.): the count right where the bag's count stands, the buttons left; the grid's frame rounded and pulsing, the picked items pulsing with
   it; the bag's tabs up under the figure's panel (the page had centred its content and left a gap above them); the foot clear of the frame */
html body:not(.touch) #inv.open .bagwrap{justify-content:flex-start!important}
html body #inv .bag{position:relative}
html body #inv.multi .bag{outline:none!important;box-shadow:none!important}
html body #inv.multi .bag::before{content:"";position:absolute;inset:-7px;border:2px solid rgba(238,134,74,.9);border-radius:10px;pointer-events:none;animation:mpulse 1.4s ease-in-out infinite;z-index:0}
@keyframes mpulse{0%,100%{box-shadow:0 0 6px rgba(238,134,74,.35),inset 0 0 6px rgba(238,134,74,.15);border-color:rgba(238,134,74,.65)}50%{box-shadow:0 0 18px rgba(255,150,80,.75),inset 0 0 10px rgba(255,150,80,.3);border-color:rgba(255,170,100,1)}}
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:2px solid #ee864a!important;outline-offset:-3px!important;border-radius:6px;animation:mselp 1.4s ease-in-out infinite}
@keyframes mselp{0%,100%{box-shadow:inset 0 0 10px rgba(238,134,74,.35);outline-color:rgba(238,134,74,.7)}50%{box-shadow:inset 0 0 20px rgba(255,150,80,.75);outline-color:rgba(255,180,110,1)}}
html body #inv .ifoot{margin-top:16px!important}
html body #inv .ifoot .mbar{flex:1 1 auto!important;display:flex}
html body #inv .ifoot .mbar .mn{order:99;margin-left:auto!important;margin-right:0!important}
html body #inv.multi .ifoot .bagcount{display:none!important}
@media (prefers-reduced-motion:reduce){html body #inv.multi .bag::before,html body #inv .bag .cell.msel{animation:none}}
html body:not(.touch) #inv.open.multi .bag::before,html body.touch #inv.open.multi .bag::before{display:block!important}
/* the phone's trader as Kharos' (the user, 03.11., with Kharos' shot: 'warum ist das Grid nicht zentriert … warum nicht mobile vertikal wie Kharos'): the grid as the page
   sizes it, its buttons one column on its right — Select / Cancel and Sell selected first, a gap, then sell-all white, blue, yellow */
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;margin:0 0 10px!important;position:static!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow[hidden]{display:none!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .mrow .mtog{margin:0!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{justify-content:flex-start!important;align-self:start!important;margin-top:4px!important;gap:6px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;background-size:42px 42px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib .aic{width:26px!important;height:26px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib:has(b) .aic{margin-top:-7px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib b{bottom:4px!important;font-size:9px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow{gap:6px!important;margin-bottom:8px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{margin-top:22px!important}
/* the bag's foot flush with the grid (its width set to the grid's: js/fps/ashbag.js) */
html body #inv .ifoot{align-self:center!important;box-sizing:border-box;max-width:100%}
html body #inv .ifoot .bfoot .mpick{margin-right:14px!important}
/* ONE mark for a picked item in every grid (the user, 03.11.: 'warum ist die Selektion auf verschiedenen Systemen unterschiedlich'): a solid ember ring inside the cell,
   pulsing — drawn inside (an inset shadow), so the trader's octagon-cut cells keep it whole; no check mark anywhere */
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:none!important;box-shadow:inset 0 0 0 3px #ee864a,inset 0 0 14px rgba(238,134,74,.45)!important;animation:mring 1.4s ease-in-out infinite!important}
@keyframes mring{0%,100%{box-shadow:inset 0 0 0 3px rgba(238,134,74,.85),inset 0 0 10px rgba(238,134,74,.3)}50%{box-shadow:inset 0 0 0 3px rgba(255,180,110,1),inset 0 0 22px rgba(255,150,80,.65)}}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:none!important;display:none!important}
html body .aib.sallb[hidden]{display:none!important}
/* the ring as an overlay over the cell's own frame layers (the trader's cells draw their rarity frame in a ::before over any shadow of the cell): one rule, both grids */
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{box-shadow:none!important;animation:none!important}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;background:none!important;border:3px solid #ee864a!important;border-radius:5px!important;box-shadow:inset 0 0 12px rgba(238,134,74,.45)!important;pointer-events:none!important;z-index:6!important;opacity:1!important;animation:mring2 1.4s ease-in-out infinite!important}
@keyframes mring2{0%,100%{border-color:rgba(238,134,74,.85);box-shadow:inset 0 0 8px rgba(238,134,74,.3)}50%{border-color:rgba(255,185,115,1);box-shadow:inset 0 0 20px rgba(255,150,80,.65)}}
/* ===== picking (js/fps/ashbag.js): Select a tab like the others; on the bag's right edge a handle with the count; the action panel sliding out over the grid ===== */
html body #inv .itabs .mtab svg{fill:none;stroke-linecap:round}
html body #inv .bagwrap{position:relative}
html body #inv .mhandle{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:12;width:30px;height:86px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(238,134,74,.85);border-right:0;border-radius:8px 0 0 8px;background:linear-gradient(90deg,rgba(40,24,14,.96),rgba(18,14,12,.96));color:#ffb070;cursor:pointer;animation:mpulse 1.4s ease-in-out infinite;touch-action:none}
html body #inv .mhandle[hidden]{display:none!important}
html body #inv .mhandle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body #inv .mhandle b{font:700 12px var(--f-display);color:#ffd2a8}
html body #inv .mhandle.open{right:min(220px,46%)}
html body #inv .mpanel{position:absolute;right:0;top:0;bottom:0;z-index:11;width:min(220px,46%);box-sizing:border-box;padding:12px 10px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(90deg,rgba(14,15,17,.97),rgba(10,11,13,.98));border-left:1px solid rgba(238,134,74,.6);box-shadow:-12px 0 28px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .22s ease;overflow-y:auto}
html body #inv .mpanel.on{transform:none}
html body #inv .mpanel .mph{font:700 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#ee864a}
html body #inv .mpanel .mpc,html body #inv .mpanel .mpa{display:flex;flex-direction:column;gap:6px}
html body #inv .mpanel .mpa{margin-top:auto}
html body #inv .mpanel button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 11px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:left}
html body #inv .mpanel button.pri{border-image-source:var(--o-fire);color:#241304}
html body #inv .mpanel button:disabled{opacity:.4;cursor:default}
html body #inv .mpanel button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #inv .mpanel .r-normal{color:#f2ede4}html body #inv .mpanel .r-magic{color:#8fb4ff}html body #inv .mpanel .r-rare{color:#ffd84a}
html body #inv .mpanel button.cancel{color:#ff9a7a}
/* the trader's and the chest's buttons: line icons too */
html body #shop .aib svg.aic,html body #inv .aib svg.aic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:22px!important;height:22px!important}
html body #shop .aib.sallb.r-normal svg{color:#f2ede4}html body #shop .aib.sallb.r-magic svg{color:#8fb4ff}html body #shop .aib.sallb.r-rare svg{color:#ffd84a}
html body #shop .aib.pri svg{color:#ffb070}
html body #inv .mpanel{gap:8px;padding:10px 10px}
html body #inv .mpanel .mpa{margin-top:0}
html body #inv .mpanel .mpk{margin-top:6px;font:600 10px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#9a9286}
html body #inv .mpanel button{min-height:34px}
html body #inv .mhandle{transform:translateY(-50%)}
/* Select first in the tab row, a divider after it, its icon as bright as the others' (the user, 03.11.) */
html body #inv .itabs .mtab svg{stroke:#d8d2c6!important;stroke-width:1.8!important}
html body #inv .itabs .mtab.on svg{stroke:#ee864a!important}
html body #inv .itabs .msep{display:block!important;position:static!important;flex:none;width:1px;height:60%;align-self:center;background:rgba(216,210,198,.35);margin:0 4px;box-shadow:none;border-radius:0}
html body.touch #inv .itabs .msep{width:60%;height:1px;margin:2px 0;align-self:center}
/* the ultimate's B chip over the socket's rim as the other keys' (the user, 03.11.): the octagon cut moved from the button onto its face, the chip no longer cut away */
html body.hudbar:not(.touch) #skillsT .tult{clip-path:none!important;overflow:visible!important}
html body.hudbar:not(.touch) #skillsT .tult .ic{clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)}
html body.hudbar:not(.touch) #skillsT .tult kbd{z-index:7!important}
/* written by tools/art/cg_css.py — do not edit by hand */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/BarlowSemiCondensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ChakraPetch-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ChakraPetch-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/ChakraPetch-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --o-plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a3d42'/%3E%3Cstop offset='1' stop-color='%231a1b1e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%235a6068' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-plate-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2345433c'/%3E%3Cstop offset='1' stop-color='%231e1d1b'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23383b40'/%3E%3Cstop offset='1' stop-color='%231a1b1e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tile-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2346443c'/%3E%3Cstop offset='1' stop-color='%231c1b19'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%235a6068' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-card-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='none' fill-opacity='1' stroke='%23ff7a2a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='0.28' stroke='%232a2e33' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%23000' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-engrave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236' height='214' viewBox='0 0 236 214'%3E%3Cg fill='none' stroke='%235a6068' opacity='.5'%3E %3Cpath d='M47.8 177.01A98 98 0 0 1 212.5 81.92' stroke-width='1.4'/%3E %3Cpath d='M40.27 171.62A104 104 0 0 1 211.59 72.71' stroke-width='.7' stroke-dasharray='2 4'/%3E %3Cpath d='M23.6 193.09A126 126 0 0 1 243.94 75.94' stroke-width='.8'/%3E%3Cpath d='M25.48 192.41L20.78 194.12M21.95 181.05L17.11 182.3M19.53 169.4L14.59 170.18M18.23 157.57L13.24 157.88M18.08 145.67L13.08 145.5M19.06 133.81L14.1 133.16M21.18 122.11L16.31 120.98M24.41 110.65L19.67 109.07M28.72 99.56L24.15 97.53M34.08 88.94L29.72 86.48M40.43 78.88L36.33 76.01M47.71 69.47L43.91 66.22M55.86 60.8L52.39 57.21M64.81 52.96L61.7 49.04M74.46 46L71.74 41.81M84.74 40.01L82.43 35.58M95.55 35.03L93.68 30.39M106.78 31.11L105.36 26.31M118.34 28.28L117.39 23.37M130.12 26.57L129.64 21.59M142 26L142 21M153.88 26.57L154.36 21.59M165.66 28.28L166.61 23.37M177.22 31.11L178.64 26.31M188.45 35.03L190.32 30.39M199.26 40.01L201.57 35.58M209.54 46L212.26 41.81M219.19 52.96L222.3 49.04M228.14 60.8L231.61 57.21M236.29 69.47L240.09 66.22' stroke-width='.8'/%3E %3Ccircle cx='142' cy='150' r='54' stroke-width='1.2'/%3E%3Ccircle cx='142' cy='150' r='60' stroke-width='.6' stroke-dasharray='1 3'/%3E %3Cpath d='M88 150L72 150M100.63 115.29L88.38 105M132.62 96.82L129.84 81.06M169 103.23L177 89.38' stroke-width='1.2'/%3E%3C/g%3E%3Cpolygon points='49.91,112.48 53.91,116.48 49.91,120.48 45.91,116.48' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3Cpolygon points='93,61.13 97,65.13 93,69.13 89,65.13' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3Cpolygon points='159.02,49.49 163.02,53.49 159.02,57.49 155.02,53.49' fill='%23111214' stroke='%235a6068' stroke-width='1'/%3E%3C/svg%3E");
  --o-thorn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E %3Cdefs%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235a6068' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%235a6068'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='0,10 50,8.4 56,10 50,11.6' fill='url%28%23h%29'/%3E %3Cpath d='M16 9.3l5-6-1.2 6.1zM28 10.7l6 6.2-1.6-6.3zM38 9l5-7-1 7.1zM46 10.9l4 5-.8-5z' fill='%235a6068'/%3E %3Cpath d='M24 9.6C22 5 26 3 27.5 5.5' fill='none' stroke='%235a6068' stroke-width='.9'/%3E%3C/svg%3E");
  --o-crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M0 8.5H11L14 5.5M34 8.5H23L20 5.5' fill='none' stroke='%232a2e33' stroke-width='1.2'/%3E%3Cpolygon points='17,1 21,5.5 17,10 13,5.5' fill='%23111214' stroke='%235a6068' stroke-width='1.1'/%3E%3Ccircle cx='17' cy='5.5' r='1.1' fill='%235a6068'/%3E%3C/svg%3E");
  --o-tick-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(0 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(90 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(180 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-tick-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg transform='rotate(270 5 5)'%3E%3Cpath d='M1 8V1H8' fill='none' stroke='%232a2e33' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%235a6068'/%3E%3C/g%3E%3C/svg%3E");
  --o-rail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='90' viewBox='0 0 14 90'%3E%3Cpath d='M4 0V90M9 0V90' stroke='%232a2e33' stroke-width='1.2'/%3E%3Cpath d='M6.5 0V90' stroke='%23000' stroke-width='2' opacity='.6'/%3E%3Cpolygon points='6.5,38 10.5,45 6.5,52 2.5,45' fill='%23141517' stroke='%235a6068' stroke-width='1'/%3E%3Ccircle cx='6.5' cy='45' r='1.1' fill='%235a6068'/%3E%3C/svg%3E");
  --o-fire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a3a'/%3E%3Cstop offset='1' stop-color='%23c0501a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23ffc08a' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%2324272b' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-fire-hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a4a'/%3E%3Cstop offset='1' stop-color='%23d0601a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='7.31,0.75 28.69,0.75 35.25,7.31 35.25,28.69 28.69,35.25 7.31,35.25 0.75,28.69 0.75,7.31' fill='url%28%23g%29' fill-opacity='1' stroke='%23e8eaec' stroke-width='1.5'/%3E %3Cpolygon points='8.45,3.5 27.55,3.5 32.5,8.45 32.5,27.55 27.55,32.5 8.45,32.5 3.5,27.55 3.5,8.45' fill='none' stroke='%2324272b' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tag-rare:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d1f22'/%3E%3Cstop offset='1' stop-color='%230e0f11'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7a2a' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23ff7a2a' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-rare-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7a2a'/%3E%3Cstop offset='1' stop-color='%23b0952c'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7a2a' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23000' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-unique-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7d1f'/%3E%3Cstop offset='1' stop-color='%23a8400e'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='.8,12 9,.8 31,.8 39.2,12 31,23.2 9,23.2' fill='url%28%23g%29' stroke='%23ff7d1f' stroke-width='1.3'/%3E %3Cpolygon points='4,12 10.6,3.4 29.4,3.4 36,12 29.4,20.6 10.6,20.6' fill='none' stroke='%23000' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='none' stroke='%232a2e33' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M93 50L97 50M93.82 57.73L96.29 58.16M91.82 65.22L94.17 66.07M87.24 71.5L90.7 73.5M84.09 78.6L86 80.21M78.6 84.09L80.21 86M71.5 87.24L73.5 90.7M65.22 91.82L66.07 94.17M57.73 93.82L58.16 96.29M50 93L50 97M42.27 93.82L41.84 96.29M34.78 91.82L33.93 94.17M28.5 87.24L26.5 90.7M21.4 84.09L19.79 86M15.91 78.6L14 80.21M12.76 71.5L9.3 73.5M8.18 65.22L5.83 66.07M6.18 57.73L3.71 58.16M7 50L3 50M6.18 42.27L3.71 41.84M8.18 34.78L5.83 33.93M12.76 28.5L9.3 26.5M15.91 21.4L14 19.79M21.4 15.91L19.79 14M28.5 12.76L26.5 9.3M34.78 8.18L33.93 5.83M42.27 6.18L41.84 3.71M50 7L50 3M57.73 6.18L58.16 3.71M65.22 8.18L66.07 5.83M71.5 12.76L73.5 9.3M78.6 15.91L80.21 14M84.09 21.4L86 19.79M87.24 28.5L90.7 26.5M91.82 34.78L94.17 33.93M93.82 42.27L96.29 41.84' stroke='%235a6068' stroke-width='.8' opacity='.75'/%3E%3Cpolygon points='83.59,80.99 86.19,83.59 83.59,86.19 80.99,83.59' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='16.41,80.99 19.01,83.59 16.41,86.19 13.81,83.59' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='16.41,13.81 19.01,16.41 16.41,19.01 13.81,16.41' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3Cpolygon points='83.59,13.81 86.19,16.41 83.59,19.01 80.99,16.41' fill='%23141517' stroke='%235a6068' stroke-width='.8'/%3E%3C/svg%3E");
  --o-c-tl:url("../assets/ui/cgx/c_tl.webp");
  --o-c-tr:url("../assets/ui/cgx/c_tr.webp");
  --o-c-bl:url("../assets/ui/cgx/c_bl.webp");
  --o-c-br:url("../assets/ui/cgx/c_br.webp");
  --o-fl-l:url("../assets/ui/cgx/fl_l.webp");
  --o-fl-r:url("../assets/ui/cgx/fl_r.webp");
  --o-div:url("../assets/ui/cgx/divider.webp");
  --o-rule:url("../assets/ui/cgx/divider.webp");
  --o-torn-l:linear-gradient(#000,#000);
  --o-torn-r:linear-gradient(#000,#000);
  --o-torn-b:linear-gradient(#000,#000);
  --bronze:#5a6068; --bronze-lo:#2a2e33; --cg-ember:#ff7a2a; --cg-steel:#2b2e33; --cg-steel2:#1c1e22; --cg-edge:#6a7078;
  --f-display:'Chakra Petch', 'Barlow Semi Condensed', sans-serif; --f-body:'Barlow', sans-serif;
}
/* ---- the hand-written rules of Cindergate's look (tools/art/cg_css.py appends this file) ---- */
/* the panel surface: brushed anthracite under every window */
body #inv,body #help,body #skills,body #qlog,body #shop,body #gmenu .gside,body #mappanel{background-color:#1d2024!important;background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25)),url("../assets/ui/cgx/panel_tex.webp")!important;background-size:auto,256px 256px!important}
/* the modal boxes and the ornate frames: a machined edge, an ember hairline inside */
.mm-cbox{background:linear-gradient(180deg,rgba(43,46,51,.97),rgba(24,26,29,.98)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 4px #15171a,inset 0 0 0 5px rgba(255,122,42,.45),0 10px 34px rgba(0,0,0,.7)!important}
#egAltar .mm-cbox.egalt,:is(#riftAsk,#fullAsk,#newsAsk) .mm-cbox.egalt{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 5px #15171a,inset 0 0 0 6px rgba(255,122,42,.5),0 0 0 1px #000,0 12px 40px rgba(0,0,0,.75)!important}
.egalt .egcn{background-image:url("../assets/ui/cgx/c_tl.webp")!important}
.egalt .egcrest{content:url("../assets/ui/cgx/header_bar.webp")}
.egalt .egdv{background-image:url("../assets/ui/cgx/divider.webp")!important}
/* the item slots: recessed anthracite wells */
#inv .eq,#inv .cell,#shop .cell{border:0!important;border-radius:0!important;background:url("../assets/ui/cgx/item_slot.webp") center/100% 100% no-repeat!important;box-shadow:none!important}
/* the dialogue (the user, 20.10.: 'das Textfenster ist sicher auch noch nicht fertig'): Kharos' torn plate with its gold lines gone — an anthracite
   plate cut at its corners, a machined steel edge, an ember line along the top that fades at the ends, a short ember tab on the left under the
   name; the name in steel white beside a small hexagon, the Next button in its hexagonal socket */
#dialogue{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important}
#dialogue::before,#dialogue::after{display:none!important}
#dialogue .dplate{opacity:1!important;-webkit-mask:none!important;mask:none!important;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)!important;
  background:linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.95) 8%,rgba(255,122,42,.95) 60%,rgba(255,122,42,0)) left 16px top 0/calc(100% - 32px) 2px no-repeat,
  linear-gradient(#ff7a2a,#ff7a2a) left 0 top 16px/3px calc(100% - 32px) no-repeat,
  linear-gradient(90deg,rgba(120,128,138,0),rgba(120,128,138,.6) 10%,rgba(120,128,138,.6) 90%,rgba(120,128,138,0)) left 0 bottom 0/100% 1px no-repeat,
  linear-gradient(180deg,rgba(40,43,48,.92),rgba(20,22,25,.94)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
html body #dialogue .who{color:#f0f2f4!important}
#dialogue .who::before{width:calc(9px * var(--k))!important;height:calc(10px * var(--k))!important;transform:none!important;border:0!important;background:#ff7a2a;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
html body #dialogue .who::after{background:linear-gradient(90deg,rgba(255,122,42,.8),rgba(255,122,42,0))!important}
html body #dialogue .more{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;transform:none!important;clip-path:none!important;box-shadow:none!important}
html body #dialogue .more svg,html body #dialogue .more::before{stroke:#ffb27a!important;color:#ffb27a!important}
/* the loading bars ember */
#zload .zl-bar i,#loading #loadBar i{background:linear-gradient(90deg,#7a2a0a,#ff7a2a)!important;box-shadow:0 0 8px rgba(255,122,42,.7)!important}
/* the portrait (top left): an octagonal plate frame round the face, the level on a steel tab */
#tLvl .d{transform:none;width:calc(var(--pz) * 1.3);height:calc(var(--pz) * 1.3);border:0;border-image:none;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.75))}
#tLvl .d i{inset:13%;transform:none;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);z-index:-1}
#tLvl b{background:#2b2e33!important;border:1px solid #ff7a2a!important;color:#f0f2f4!important}
/* the minimap in its bezel */
#minimapWrap::after{content:"";position:absolute;inset:-5%;background:url("../assets/ui/cgx/map_ring.webp") center/100% 100% no-repeat;pointer-events:none;z-index:2}
/* the round buttons by the map and the menu: anthracite discs */
#minimapWrap .sbtn,#side .sbtn{background:url("../assets/ui/cgx/btn_round.webp") center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;border-image:none!important}
/* mirrored against Kharos (the user, 20.10.): the settings' page left, its categories right; the skills' tree right, details left */
#help .hbody{flex-direction:row-reverse}
#skills .sbody{flex-direction:row-reverse}
/* the class choice mirrored: the classes right in hexagonal sockets, upright, the title left */
#mainmenu .mm-classes{left:auto;right:calc(var(--mmx) + var(--sr))}
#mainmenu[data-mode="create"] .mm-info{right:auto;left:calc(var(--mmx) - 10px * var(--k) + var(--sl))} /* (mirrored on the hero choice only: on the hero list the card stays right of the list — it had covered it) */
#mainmenu.opening .mm-classes{animation-name:pFromR}#mainmenu.opening .mm-info{animation-name:pFromL}
#mainmenu .mm-cls{transform:none;width:calc(76px * var(--k));height:calc(76px * var(--k));border:0;border-image:none;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat}
#mainmenu .mm-cls svg{transform:none;width:38%;height:38%}
#mainmenu .mm-cls.on{transform:scale(1.12);border-image:none}
#mainmenu .mm-cls .rim{display:none}
#mainmenu .mm-cls .smoke{display:none}
#mainmenu[data-mode="create"] .mm-classes::before{background:linear-gradient(transparent,rgba(255,122,42,.4) 15%,rgba(255,122,42,.4) 85%,transparent)}
/* the class's glow: ember for the chosen one, a dim steel for the rest (no fantasy colours) */
#mainmenu .mm-cls{--cg:#ff7a2a!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))!important;animation:none!important}
#mainmenu .mm-cls.on{filter:drop-shadow(0 0 14px rgba(255,122,42,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.7))!important}
#mainmenu .mm-cls svg{stroke:#c8ccd2!important}#mainmenu .mm-cls.on svg{stroke:#ffb27a!important}
/* type: titles in Chakra Petch upper case, a little wider; the small caps faces read as plain upper case */
.sc{font-variant:normal;text-transform:uppercase;letter-spacing:.08em}
/* the primary buttons' words light on the dark plate (Kharos' were dark on gold) */
.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){color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
/* the skill bubbles (the phone's ring and the desktop bar's sockets): an anthracite disc in a machined steel rim, the big one with an ember ring */
.tbtn{background:radial-gradient(circle at 50% 35%,#2b2e33,#15171a) padding-box,linear-gradient(155deg,#8a9098,#3a3e44 38%,#5a6068 62%,#1c1e22) border-box!important}
.tbtn.main::before{background:conic-gradient(from var(--ga),transparent 0deg,transparent 300deg,rgba(255,190,140,calc(var(--gk) * .9)) 345deg,rgba(255,220,190,var(--gk)) 356deg,transparent 360deg),linear-gradient(#ff8a3a,#c0501a)!important}
.tbtn .ring circle{stroke:#ff7a2a!important;filter:drop-shadow(0 0 4px rgba(255,122,42,.8))!important}
/* the life bar (the phone's, top left): segmented as the chosen layout's — a chamfered anthracite housing, the life in ember-red cells */
#tLife{background:#4a5058!important;height:14px!important;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)!important}
#tLife::before{background:#121417!important;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 100%,0 100%)!important}
#tLife div{clip-path:none!important;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);box-shadow:0 0 6px rgba(255,90,30,.5)}
#tXp div{background:#ff7a2a!important}
/* the area banner: an anthracite header plate with its ember notch, no rods, no flags, no medallion */
#banner .bn-plate::before{background:url("../assets/ui/cgx/header_bar.webp") center/100% 100% no-repeat!important;left:0!important;right:0!important}
#banner .bn-plate::after,#banner .bn-rod,#banner .bn-fl,#banner .bn-fr,#banner .bn-med{display:none!important}
#banner .bn-plate{padding:0 calc(var(--bh) * .6)!important}
#banner .bn-k{color:#ff9a5a!important}#banner .bn-k:not(.colon)::after{background:#ff7a2a!important}
#banner .bn-t{color:#e8eaec!important;text-shadow:0 1px 3px #000!important}
/* the skill icons in the bubbles: steel white with an ember tint, not gold */
.tbtn svg,.tbtn .ic svg{stroke:#e6e8ea!important}
/* the area banner: the generated plate with its swept wings and the order's lantern on a hexagonal badge over it */
#banner .bn-plate::before{background-image:url("../assets/ui/cgx/banner.webp")!important;left:calc(var(--bh) * -.35)!important;right:calc(var(--bh) * -.35)!important;top:calc(var(--bh) * -.08)!important;bottom:calc(var(--bh) * -.12)!important}
#banner .bn-med{display:block!important;background:url("../assets/ui/cgx/banner_emblem.webp") center/contain no-repeat!important;top:calc(var(--bh) * -.4)!important;width:calc(var(--bh) * .62)!important;height:calc(var(--bh) * .7)!important;margin-left:calc(var(--bh) * -.31)!important}
#banner .bn-med::after{background:radial-gradient(closest-side,rgba(255,140,60,.5),rgba(255,122,42,.15) 55%,transparent)!important}
#banner .bn-plate{padding:0 calc(var(--bh) * .9)!important}
/* the desktop bar: the generated anthracite plate instead of Kharos' painted frame and rod */
body.hudbar #skillsT .barplate::before{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/bar_plate.webp") center/100% 100% no-repeat!important;inset:6px -14px 0 -10px!important}
body.hudbar #skillsT .barplate::after,body.hudbar #skillsT .barrod{display:none!important}
/* the health orb in the generated armour ring */
body.hudbar #skillsT .hporb img{display:none!important}
body.hudbar #skillsT .hporb::after{content:"";position:absolute;left:calc(45.5% - 54px);top:calc(52.4% - 54px);width:108px;height:108px;background:url("../assets/ui/cgx/orb_frame.webp") center/100% 100% no-repeat;pointer-events:none}
body.hudbar #skillsT .hporb .hplv{font-family:var(--f-display)!important;color:#ffd9bf!important;top:-4px!important}
/* the target plate over the crosshair's foe: anthracite, the foe's life in ember red, its kind in steel */
#ashTarget{background:linear-gradient(180deg,rgba(43,46,51,.94),rgba(24,26,29,.95))!important;border:0!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 -2px 0 2px rgba(255,122,42,.5),0 3px 10px rgba(0,0,0,.6)!important;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);border-radius:0!important}
#ashTarget .tn{font-family:var(--f-display)!important;color:#f0f2f4!important}#ashTarget .tl{color:#ff9a5a!important}#ashTarget .tk{color:#9aa0a8!important}
#ashTarget .tb{background:#121417!important;border:1px solid #000!important;border-radius:0!important}
#ashTarget .tb>i{background:linear-gradient(180deg,#ff8a3a,#c8301a)!important}
#ashTarget.elite{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #c08a3a,0 3px 10px rgba(0,0,0,.6)!important}#ashTarget.boss{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #ff7a2a,0 0 18px rgba(255,90,30,.35)!important}
/* the drops' labels (the user, 20.10.: 'ein angepasstes Layout für die Waffendrops bzw. alle Drops'): a flat anthracite tag, a bar of the rarity's
   colour down its left edge, the right end cut off at an angle, the name in the rarity's colour; the one under the finger lit by its colour */
.loot-label{--rc:#e4e0d6;border:0!important;border-image:none!important;border-radius:0!important;outline:0!important;padding:2px 14px 3px 11px!important;font-family:var(--f-display)!important;font-weight:600!important;letter-spacing:.03em!important;
  background:linear-gradient(90deg,var(--rc) 0 3px,transparent 3px),linear-gradient(180deg,rgba(43,46,51,.95),rgba(20,22,25,.95))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);filter:none!important;text-shadow:0 1px 2px #000!important}
.loot-label.magic{--rc:#5b8dff}.loot-label.rare{--rc:#f5cf3d}.loot-label.unique{--rc:#ff7d1f}.loot-label.artifact{--rc:#b36bff}.loot-label.quest{--rc:#3fe6d2}.loot-label.gold{--rc:#ffb35a;color:#ffc98a!important}
.loot-label.focus{animation:none!important;color:#0e0f11!important;text-shadow:none!important;background:linear-gradient(90deg,#fff 0 3px,var(--rc) 3px)!important;box-shadow:0 0 12px var(--rc)!important}
/* the loading paintings: seen whole — no sigil over them, a light vignette, the foot dark only under the words */
#zload.ash canvas.ashsig{display:none!important}
#zload.ash::after{background:radial-gradient(ellipse 90% 85% at 50% 40%,transparent 45%,rgba(0,0,0,.45) 100%),linear-gradient(transparent 62%,rgba(6,6,9,.9))!important}
#zload.ash .zl-img::after{display:none!important}
#zload.ash .zl-img{filter:brightness(1.45) contrast(1.05)}
/* the game menu: the class's mark in the octagonal plate frame, the XP line ember; Kharos' systems (the lodestar, mastery) not offered */
#gmenu .gem{border-radius:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat!important}
#gmenu .gem svg{stroke:#ffb27a!important;filter:drop-shadow(0 0 4px rgba(255,122,42,.45))!important;width:46%!important;height:46%!important}
#gmenu .gxp{box-shadow:0 0 0 1px #3a3e44!important;background:#0e0f11!important}
#gmenu .gxp div{background:linear-gradient(90deg,#a8400e,#ff7a2a)!important;box-shadow:0 0 6px rgba(255,122,42,.5)!important}
body.ashzone #gmenu [data-go="lode"],body.ashzone #gmenu [data-go="mastery"],body.ashzone #gmenu [data-go="pets"]{display:none!important}
/* the hero choice and the character list after the chosen previews (20.10.): the info an anthracite panel (cut corners, an ember line on top and
   down its left edge), no compass ring or star behind it, the title flourishes off; the name field a recessed anthracite well */
#mainmenu .mm-info{background:linear-gradient(90deg,#ff7a2a,#ff7a2a) left 0 top 14px/3px calc(100% - 28px) no-repeat,linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.9) 10%,rgba(255,122,42,.9) 70%,rgba(255,122,42,0)) left 14px top 0/calc(100% - 28px) 2px no-repeat,linear-gradient(180deg,rgba(40,43,48,.9),rgba(20,22,25,.92))!important;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);padding:calc(18px * var(--k)) calc(20px * var(--k))!important;box-sizing:border-box}
#mainmenu .mm-info::before,#mainmenu .mm-info::after,#mainmenu[data-mode="create"] .mm-info.none::after,#mainmenu[data-mode="create"] .mm-info:not(.none)::after,#mainmenu[data-mode="create"] .mm-info.none::before{display:none!important}
#mainmenu .mm-info h2::before,#mainmenu .mm-info h2::after,#mainmenu[data-mode="create"] .mm-info.none h2::after{display:none!important}
#mainmenu .mm-info h2{color:#f0f2f4!important;text-shadow:0 2px 8px #000!important}
#mainmenu .mm-desc{color:#b8bec6!important}
#mainmenu .mm-tags span{background:#15171a;border:1px solid #3a3e44;padding:3px 8px;color:#d8dce0}#mainmenu .mm-tags svg{stroke:#ff9a5a!important}
#heroName{--plate:none!important;background:#0e0f11!important;border:1px solid #3a3e44!important;border-left:3px solid #ff7a2a!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)!important;padding-left:14px!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#heroName::placeholder{color:#7a8088!important}
#mainmenu .mm-info .mm-name::before,#mainmenu .mm-info .mm-name::after,#mainmenu .namewrap::before,#mainmenu .namewrap::after{display:none!important}
/* the class buttons and the list's portraits in hexagonal sockets on a phone too */
#mainmenu .mm-cls,body.touch #mainmenu .mm-cls{border-image:none!important;border:0!important;transform:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important}
#mainmenu .mm-cls.on{filter:drop-shadow(0 0 12px rgba(255,122,42,.8))!important}
#mainmenu .mm-slots .mm-port{border-image:none!important;border:0!important;transform:none!important;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat!important}
#mainmenu .mm-slots .mm-port i,#mainmenu .mm-slots .mm-port svg{transform:none!important}
#mainmenu>.mm-create::before,#mainmenu>.mm-select::before{background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,0) 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55))!important}
.mm-namebox::before,.mm-namebox::after,.mm-namebox i{display:none!important}
#heroName{padding-left:14px!important}
/* the class buttons: no square behind the hexagon */
#mainmenu .mm-cls::before{display:none!important}
#mainmenu .mm-cls{width:calc(64px * var(--k))!important;height:calc(64px * var(--k))!important}
#mainmenu[data-mode="create"] .mm-classes .mm-cls{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important}
/* the map panel: anthracite list, the page dark; the area banner hidden while a window is open */
body.ashzone :is(#mapPanel,#qlog) .mlist,body.ashzone #skills .slist{background:linear-gradient(180deg,rgba(40,43,48,.95),rgba(20,22,25,.96))!important;border-right:1px solid #3a3e44!important}
body.ashzone :is(#mapPanel,#qlog) .mpage{background:#0e0f11!important}
body.ashzone :is(#mapPanel,#qlog) .mframe{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #50565e,inset 0 0 0 4px #15171a,inset 0 0 0 5px rgba(255,122,42,.4)!important;border-image:none!important;border:0!important}
body:has(#qlog.open, #mapPanel.open, #inv.open, #skills.open, #help.open, #gmenu.open, #shop.open) #banner{visibility:hidden!important}
.art-ic{object-fit:contain}

/* the game menu's middle open: the world behind it, only darkened a little */
body #gmenu{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.35))!important}
/* ===== after the ADAM templates (20.10., second pass) ===== */
/* the portraits: our own (assets/ui/cgpor, set as --cgpor by js/fps/ashui.js) in the HUD plate and the game menu */
#tLvl .d{background:none!important}#tLvl .d::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;pointer-events:none}
#tLvl .d i{background:var(--cgpor) center 22%/cover no-repeat!important;filter:none!important;z-index:0!important}
#gmenu .gem{position:relative;flex:none!important;width:56px!important;height:56px!important;background:none!important;-webkit-mask:none}
#gmenu .gem::before{content:"";position:absolute;inset:12%;background:var(--cgpor) center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
#gmenu .gem::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat}
#gmenu .gem svg{display:none!important}
/* the quest tracker: an anthracite plate, an ember line down its left edge, no rods, frames or flourishes */
html body.ashzone #quest#quest .qfr,html body.ashzone #quest#quest .qrod{display:none!important}
#quest{background:linear-gradient(180deg,rgba(40,43,48,.88),rgba(20,22,25,.9))!important;-webkit-mask:none!important;mask:none!important;padding:7px 14px 8px 14px!important;margin-left:0!important;box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.06)!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#quest .qt{color:#ff9a5a!important;font-family:var(--f-display)!important}#quest .qt::before{background:#ff7a2a!important;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transform:none!important}
#quest .qo{color:#e6e8ea!important;font-family:var(--f-body)!important;margin-left:15px!important}
#quest .qw{color:#ffb27a!important}
/* the party: the other hero's plate as one's own, smaller (js/fps/ashui.js) */
#ashParty .apm.cgplate{display:flex;align-items:center;gap:8px;min-width:0;padding:0!important;background:none!important;border:0!important;clip-path:none;box-shadow:none!important}
#ashParty .cgplate .por{position:relative;flex:none;width:34px;height:34px;background:center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:inset 0 0 0 2px #50565e}
#ashParty .cgplate .por::after{content:"";position:absolute;inset:-3px;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat}
#ashParty .cgplate .por b{position:absolute;z-index:1;left:50%;bottom:-6px;transform:translateX(-50%);padding:0 3px;background:#2b2e33;border:1px solid #ff7a2a;font:600 9px/1.3 var(--f-display);color:#f0f2f4}
#ashParty .cgplate .pb{display:flex;flex-direction:column;gap:3px}
#ashParty .cgplate .nm{font:600 11px/1 var(--f-display);letter-spacing:.06em;color:#e6e8ea;text-shadow:0 1px 2px #000}
#ashParty .cgplate .hp{display:block;width:130px;height:8px;background:#121417;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #4a5058}
#ashParty .cgplate .hp u{display:block;height:100%;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 1.5px),transparent calc(10% - 1.5px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 1.5px),transparent calc(10% - 1.5px) 10%)}
#ashParty{top:calc(70px * var(--k,1))!important}body.touch #ashParty{top:62px!important}
/* the ammunition on the primary button; the middle's count off (the gun's name stays) */
body.cgammo-on #fpsHud .ammo .n,body.cgammo-on #fpsHud .ammo .m{display:none!important}
#skillsT .tbtn.main .cgammo{position:absolute;z-index:3;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:baseline;gap:1px;padding:1px 6px;background:rgba(14,15,17,.85);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%);pointer-events:none;white-space:nowrap}
#skillsT .tbtn.main .cgammo b{font:700 15px/1.1 var(--f-display);color:#f0f2f4}#skillsT .tbtn.main .cgammo i{font:600 10px/1 var(--f-display);font-style:normal;color:#9aa0a8}
#skillsT .tbtn.main .cgammo.low b{color:#ff5a3a}#skillsT .tbtn.main .cgammo.rl b{color:#ff9a5a}
body:not(.touch) #skillsT .tbtn.main .cgammo{bottom:2px}body:not(.touch) #skillsT .tbtn.main .cgammo b{font-size:12px}
/* the skills panel: the primary socket shows the gun */
#skills .sock.primary img.cggun{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}
/* the game menu after its template (mock_esc): no painted cards, no diamonds — rows of a filled icon and a word, the left and the right column alike */
body.ashzone #gmenu .tile .art,body.ashzone #gmenu .tile svg,body.ashzone #gmenu .gl .tiles::after,body.ashzone #gmenu .tile .chev{display:none!important}
body.ashzone #gmenu .tiles{display:flex!important;flex-direction:column!important;gap:calc(8px * var(--k))!important;padding:0!important;background:none!important}
body.ashzone #gmenu .tile,body.ashzone #gmenu .gl .tile,body.ashzone #gmenu .gr .tile,body.ashzone #gmenu .gr .tile.bar,body.ashzone #gmenu .gr .tile:not(.bar){aspect-ratio:auto!important;height:calc(54px * var(--k))!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:calc(14px * var(--k))!important;padding:0 calc(16px * var(--k))!important;
  border:0!important;border-image:none!important;background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important;box-shadow:inset 0 0 0 1px #3a3e44!important;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);grid-column:auto!important}
body.ashzone #gmenu .tile::before{content:"";flex:none;width:calc(36px * var(--k));height:calc(36px * var(--k));background:var(--cgic) center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
body.ashzone #gmenu .tile span{flex:1;text-align:left!important;font:600 calc(15px * var(--k)) var(--f-display)!important;letter-spacing:.12em!important;color:#e6e8ea!important;background:none!important;padding:0!important;text-shadow:0 1px 2px #000!important}
body.ashzone #gmenu .tile:hover,body.ashzone #gmenu .tile.gtarget,body.ashzone #gmenu .tile:has(.nb){box-shadow:inset 0 0 0 1px #ff7a2a,0 0 10px rgba(255,122,42,.25)!important}
body.ashzone #gmenu [data-go="quests"]{--cgic:url("../assets/icons/cg2/quests.webp?v=5")}body.ashzone #gmenu [data-go="map"]{--cgic:url("../assets/icons/cg2/map.webp?v=5")}body.ashzone #gmenu [data-go="chron"],body.ashzone #gmenu [data-go="canon"]{--cgic:url("../assets/icons/cg2/codex.webp?v=5")}
body.ashzone #gmenu [data-go="skills"]{--cgic:url("../assets/icons/cg2/skills.webp?v=5")}body.ashzone #gmenu [data-go="inv"]{--cgic:url("../assets/icons/cg2/bag.webp?v=5")}body.ashzone #gmenu [data-go="stats"]{--cgic:url("../assets/icons/cg2/character.webp?v=5")}body.ashzone #gmenu [data-go="settings"]{--cgic:url("../assets/icons/cg2/settings.webp?v=5")}
body.ashzone #gmenu [data-go="bestiary"]{display:none!important}
body.ashzone #gmenu .ghead{background:none!important;padding:calc(10px * var(--k)) 0 calc(8px * var(--k))!important;text-align:left!important;border-bottom:1px solid rgba(255,122,42,.5);margin-bottom:calc(10px * var(--k))}
body.ashzone #gmenu .ghead span{color:#e6e8ea!important;font-size:calc(14px * var(--k))!important}
body.ashzone #gmenu .gside{padding:calc(14px * var(--k)) calc(16px * var(--k))!important}
body.ashzone #gmenu .gchar{background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94));box-shadow:inset 0 0 0 1px #3a3e44;padding:calc(10px * var(--k));clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);margin-bottom:calc(12px * var(--k))}
body.ashzone #gmenu .gchar::after,body.ashzone #gmenu .gchar::before{display:none!important}
/* the filled icons: lifted a little (they are dark metal), the class figures in their sockets, the jump button a socket like the skills' */
img.art-ic[src*="icons/cg2/"]{filter:drop-shadow(0 1px 2px #000)!important}
#mainmenu .mm-cls img.cgcls{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
#mainmenu .mm-cls.on img.cgcls{filter:brightness(1.15) drop-shadow(0 0 6px rgba(255,122,42,.8))}
#jumpT{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:58px!important;height:58px!important}
#jumpT img{width:62%;height:62%;object-fit:contain}
#camTog img,#side .sbtn img.art-ic,#gmenu .gbtn img.art-ic{width:62%!important;height:62%!important;object-fit:contain}
/* the logo (assets/ui/cgart/logo.webp, generated) in place of the typed title on the splash and the turn-your-phone screen */
.hglogo{width:min(72vw,760px);aspect-ratio:1117/437;background:url("../assets/ui/cgart/logo.webp?v=3") center/contain no-repeat}
.hglogo b,.hglogo i{display:none!important}
/* the Play button: one plate, no double rim, its word in the middle */
#playBtn,#loading #playBtn{border:0!important;border-image:none!important;--plate:gold;height:calc(48px * var(--k,1))!important;min-width:calc(190px * var(--k,1));padding:0 calc(34px * var(--k,1))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))!important}
/* hidden while the world is prepared (the user, 21.10.: Play stood there all through the loading — our display:inline-flex beat the hidden attribute) */
html body #playBtn[hidden],html body #loading #playBtn[hidden]{display:none!important}
#playBtn:hover{filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,122,42,.45))!important}
/* the portraits in the hero list, the skills page (in place of Kharos' painted figures) */
#mainmenu .mm-slots .mm-port{background:none!important}#mainmenu .mm-slots .mm-port::after{content:"";position:absolute;inset:0;background:url("../assets/ui/cgx/portrait.webp") center/100% 100% no-repeat;pointer-events:none}
#mainmenu .mm-slots .mm-port i{transform:none!important;inset:12%!important;background:var(--cgpor) center 22%/cover no-repeat!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important;filter:none!important}
#skills .spage::before,#skills[data-cls] .spage::before,#skills.alt .spage::before{background:var(--cgpor) center 18%/cover no-repeat!important;opacity:.32!important;-webkit-mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 75%)!important;mask:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 75%)!important;filter:saturate(.8)!important}
/* the skills page after ADAM: the loadout on the left (mirrored, js/fps/ashui.js), the words on the right; no engraved ring; sockets hexagonal; the list anthracite rows */
#skills .spage{flex-direction:row-reverse!important;background:linear-gradient(180deg,rgba(30,32,36,.97),rgba(18,20,23,.98)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px!important}
#skills .spage .sload,body:not(.touch) #skills .spage .sload{background:none!important;transform-origin:left bottom!important;margin-left:0!important;margin-right:calc(-236px * (1 - .78 * var(--k)))!important}
#skills .sinfo{border:0!important;background:linear-gradient(180deg,rgba(43,46,51,.9),rgba(24,26,29,.92))!important;box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px #3a3e44!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);text-align:left!important;padding:12px 16px!important;border-radius:0!important}
#skills .sock{border:0!important;border-radius:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;outline:0!important}
#skills .sock canvas{clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);border-radius:0!important;transform:scale(.78)}
#skills .sock.ok{filter:drop-shadow(0 0 8px rgba(255,122,42,.8))!important}
#skills .sock em{color:#c3c5c8!important;font-family:var(--f-display)!important}
#skills .slist{background:linear-gradient(180deg,rgba(36,39,44,.97),rgba(20,22,25,.98))!important}
#skills .slist h3{color:#9aa0a8!important;font-family:var(--f-display)!important;background:none!important;border-bottom:1px solid rgba(255,122,42,.45);padding-bottom:6px!important}
#skills .sk{border:0!important;border-image:none!important;background:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important;box-shadow:inset 0 0 0 1px #3a3e44!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)!important;-webkit-mask:none!important;mask:none!important}
#skills .sk::before,#skills .sk::after{display:none!important}
#skills .sk.sel{box-shadow:inset 0 0 0 1px #ff7a2a,inset 3px 0 0 #ff7a2a!important}
#skills .sk canvas{border-radius:0!important;clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);background:#15171a}
#skills .sk .tx b{color:#e6e8ea!important;font-family:var(--f-display)!important}#skills .sk .tx small{color:#9aa0a8!important}#skills .sk .ok{color:#ff7a2a!important}
/* the HUD's skill buttons: hexagonal sockets like the templates (no round disc, no steel ring), the icon inside; the weapon's the same, larger */
#skillsT .tbtn{border-radius:0!important;border:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;overflow:visible!important}
#skillsT .tbtn canvas,#skillsT .tbtn .ic{border-radius:0!important;clip-path:polygon(25% 6%,75% 6%,98% 50%,75% 94%,25% 94%,2% 50%);transform:scale(.7);background:transparent!important}
#skillsT .tbtn.main::before{display:none!important}
#skillsT .tbtn .ring{display:none!important}
/* the game menu's rows compact */
body.ashzone #gmenu .tile,body.ashzone #gmenu .gl .tile,body.ashzone #gmenu .gr .tile,body.ashzone #gmenu .gr .tile.bar,body.ashzone #gmenu .gr .tile:not(.bar){height:46px!important;min-height:0!important;max-height:46px!important}
body.ashzone #gmenu .tile::before{width:28px!important;height:28px!important}
body.ashzone #gmenu .tile span{font-size:14px!important}
body.ashzone #gmenu .gside{justify-content:flex-start!important}
/* the skills page's words readable, the chosen row an outline, the sockets without Kharos' rings */
#skills .sinfo,#skills .sinfo *{color:#e6e8ea}#skills .sinfo h2,#skills .sinfo h3,#skills .sinfo b{color:#ffffff!important;opacity:1!important}#skills .sinfo small,#skills .sinfo .meta,#skills .sinfo em{color:#9aa0a8!important}
#skills .sk.sel{background:linear-gradient(180deg,rgba(60,40,30,.95),rgba(30,24,22,.95))!important}
#skills .sock::before,#skills .sock::after{display:none!important}
/* the bubble buttons: the icon inset well clear of the socket's rim, in its middle (the user, 20.10.: 'die brauchen unbedingt einen Offset, damit man sie in der Mitte gut sieht') */
#skillsT .tbtn canvas,#skillsT .tbtn .ic,#skillsT .tbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:48%!important;height:48%!important;transform:translate(-50%,-50%)!important;clip-path:none!important;object-fit:contain}
#skillsT .tbtn.main img,#skillsT .tbtn.main canvas{width:52%!important;height:52%!important}
#jumpT img{width:48%!important;height:48%!important}
#skills .sock canvas{transform:scale(.5)!important}

body.ashzone #gmenu .gchar{display:flex!important;align-items:center;gap:12px}
body.ashzone #gmenu .tile{overflow:hidden!important}
body.ashzone #gmenu .tile::before{background-size:contain!important}
#gmenu .gchar img.cgcls,#gmenu .gem img.cgcls{display:none!important}
body.ashzone #gmenu .gchar{background-image:linear-gradient(180deg,rgba(43,46,51,.92),rgba(24,26,29,.94))!important}
/* the skills page: its words light (Kharos' page colour was dark ink on parchment), the chosen row an outline, not a filled plate */
#skills .spage{color:#e6e8ea!important}
#skills .sinfo .hd{color:#ffffff!important;border-color:rgba(255,122,42,.5)!important;font-family:var(--f-display)!important}
#skills .sinfo .body,#skills .sinfo .ln{color:#d8dce0!important}#skills .sinfo .meta{color:#9aa0a8!important}#skills .sinfo .sep{background:rgba(255,122,42,.4)!important}
html body #skills .sk.sel,html body #skills .sk.sel:hover{background:linear-gradient(180deg,rgba(60,42,32,.96),rgba(32,26,24,.96))!important;background-color:transparent!important}
#skills .sk.sel .tx b{color:#ffffff!important}#skills .sk.sel .tx small{color:#ffb27a!important}
html body #skills .spage .sinfo .hd{color:#ffffff!important}html body #skills .spage .sinfo .ln,html body #skills .spage .sinfo .body{color:#d8dce0!important}
html body #skills .slist .sk.sel{--fc:#4a3a32!important;outline:0!important}
html body #skills .slist .sk{--fc:#2b2e33!important}
/* the icon safe zone (memory: round-button-safe-area): the socket's inner face is ~60% of the button — every icon ~34% of the button, centred */
html body #skillsT .tbtn canvas,html body #skillsT .tbtn .ic,html body #skillsT .tbtn img,html body #skillsT .tbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:34%!important;height:34%!important;transform:translate(-50%,-50%)!important;object-fit:contain!important;margin:0!important;max-width:none!important}
html body #skillsT .tbtn.main img,html body #skillsT .tbtn.main canvas,html body #skillsT .tbtn.main img.hgun{width:46%!important;height:46%!important;top:44%!important}
html body #jumpT img{width:34%!important;height:34%!important}
html body #side .sbtn img.art-ic,html body #camTog img,html body #gmenu .gbtn img.art-ic{width:42%!important;height:42%!important}
html body #mainmenu .mm-cls img.cgcls{width:44%!important;height:44%!important}
html body #skills .sock canvas,html body #skills .sock img{transform:scale(.4)!important}
/* round stays round (the user, 20.10.: no hexagons in round containers): the bubbles, the jump button and the skills page's sockets a round anthracite disc in a
   machined steel ring, the icon free inside it with its safe zone — no hex picture in or behind them */
html body #skillsT .tbtn,html body #jumpT,html body #skills .sock{border-radius:50%!important;border:2px solid transparent!important;background:radial-gradient(circle at 50% 38%,#2e3136,#15171a 70%) padding-box,linear-gradient(155deg,#9aa0a8,#3a3e44 40%,#5a6068 62%,#1c1e22) border-box!important;box-shadow:0 0 0 1.5px #070809,0 3px 8px rgba(0,0,0,.6)!important;overflow:hidden!important}
html body #skillsT .tbtn.main{border-width:3px!important;box-shadow:0 0 0 1.5px #070809,0 0 0 4px rgba(255,122,42,.55),0 3px 8px rgba(0,0,0,.6)!important}
html body #skills .sock::before,html body #skills .sock::after,html body #skills .sock.ok::after{display:none!important;background:none!important}
html body #skills .sock canvas,html body #skills .sock img{position:absolute!important;left:50%!important;top:50%!important;width:50%!important;height:50%!important;transform:translate(-50%,-50%)!important;clip-path:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
html body #skills .sock.ok{box-shadow:0 0 0 1.5px #070809,0 0 12px rgba(255,122,42,.8)!important;filter:none!important}
html body #skillsT .tbtn canvas,html body #skillsT .tbtn .ic,html body #skillsT .tbtn img,html body #skillsT .tbtn img.art-ic{width:50%!important;height:50%!important;border-radius:0!important}
html body #skillsT .tbtn.main img,html body #skillsT .tbtn.main canvas,html body #skillsT .tbtn.main img.hgun{width:58%!important;height:58%!important;top:42%!important}
html body #jumpT img{width:50%!important;height:50%!important}
html body #skills .sk canvas{clip-path:none!important;border-radius:50%!important;background:#15171a!important}
html body #skills .sock{overflow:visible!important}html body #skills .sock em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);z-index:2}
/* the map buttons: their icons larger, dead centre — the ring picture drawn square (it was stretched off its middle) */
html body #minimapWrap .sbtn,html body #side .sbtn{background:url("../assets/ui/cgx/btn_round.webp") center/contain no-repeat!important}
html body #side .sbtn img.art-ic,html body #camTog img,html body #minimapWrap .sbtn img.art-ic{position:absolute!important;left:50%!important;top:50%!important;width:64%!important;height:64%!important;transform:translate(-50%,-50%)!important;margin:0!important}
/* the painted skill icons (Kharos' way, our palette): the picture fills the socket's round face inside its steel ring; the subject keeps its own safe zone */
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic{width:86%!important;height:86%!important;border-radius:50%!important}
html body #skills .sock:not(.primary) canvas,html body #skills .sock:not(.primary) img{width:86%!important;height:86%!important;border-radius:50%!important}
html body #skills .sk canvas{border-radius:50%!important}
/* the quest tracker after the template (20.10., the user: 'das Quest-Panel ist Slop'): a compact anthracite card under the player plate —
   a small 'QUEST' label with a hexagon, the quest's name in ember capitals, the objective in plain light text behind a chevron; no diamonds, no serif, no purple */
html body.ashzone #quest{left:calc(14px + var(--sl,0px))!important;top:calc(96px * var(--k,1))!important;width:min(250px,34vw)!important;max-width:none!important;padding:7px 12px 9px 12px!important;margin:0!important;
  background:linear-gradient(180deg,rgba(32,35,40,.86),rgba(16,18,21,.88))!important;box-shadow:inset 2px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.05)!important;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)!important;text-shadow:none!important}
html body.ashzone #quest::before{content:"QUEST"!important;position:static!important;display:block!important;opacity:1!important;inset:auto!important;background:none!important;font:600 8px/1 var(--f-display);letter-spacing:.24em;color:#8a9098;margin-bottom:4px;animation:none!important}
html body.ashzone #quest::after{display:none!important}
html body.ashzone #quest .qt{display:block!important;font:700 11px/1.2 var(--f-display)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#ff8a3a!important;text-shadow:0 1px 2px #000!important}
html body.ashzone #quest .qt::before{display:none!important}
html body.ashzone #quest .qo{margin:3px 0 0 0!important;padding-left:12px!important;position:relative;font:500 12px/1.3 'Barlow',sans-serif!important;color:#e6e8ea!important;text-shadow:0 1px 2px #000!important}
html body.ashzone #quest .qo::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:5px;border:solid #ff7a2a;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
html body.ashzone #quest .qw{margin-left:12px!important;font:italic 500 11px/1.25 'Barlow',sans-serif!important;color:#ffb27a!important}
body.touch #ashParty{top:calc(96px * var(--k,1) + 74px)!important}
/* the HUD's frames darker (the user, 20.10.: 'UI-Panels, Karte und so auf dem Screen abdunkeln'): the map's bezel, the banner, the round buttons, the portrait frame, the bubbles' rims */
#minimapWrap::after,#minimapWrap .sbtn,#side .sbtn,#tLvl .d::after,#tLvl .d{filter:brightness(.62) saturate(.9)!important}
#minimapWrap .sbtn img,#side .sbtn img{filter:brightness(1.6)!important}
html body #skillsT .tbtn,html body #jumpT{background:radial-gradient(circle at 50% 38%,#24272b,#0f1113 70%) padding-box,linear-gradient(155deg,#6a7078,#2a2d31 40%,#40454c 62%,#141618) border-box!important}
/* the octagonal sockets back (the user, 20.10.: 'warum haben wir die Panels nicht so eckig gelassen, sah doch gut aus'): the bubbles, the jump button and the skills
   page's sockets the octagonal plate, the painted icon cut to the same octagon inside its rim — round nowhere in these */
html body #skillsT .tbtn,html body #jumpT,html body #skills .sock{border-radius:0!important;border:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;box-shadow:none!important;overflow:visible!important}
html body #skillsT .tbtn.main{box-shadow:none!important;filter:drop-shadow(0 0 6px rgba(255,122,42,.45))}
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic,html body #skills .sock:not(.primary) canvas,html body #skills .sock:not(.primary) img{width:66%!important;height:66%!important;border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #skills .sk canvas{border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #jumpT img{width:46%!important;height:46%!important}
html body #skills .spage .sock,html body #skills .spage .sock.ok,html body #skills .spage .sock.primary{border-radius:0!important;border:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important}
html body #skills .spage .sock.ok{filter:drop-shadow(0 0 8px rgba(255,122,42,.85))!important}
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{border-radius:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important;box-shadow:none!important}
/* the skills' and the gun's icons free-standing (transparent) in the octagonal sockets, a safe zone round them; the gun without its dark tile */
html body #skillsT .tbtn:not(.main) canvas,html body #skillsT .tbtn:not(.main) .ic,html body #skills .spage .sock:not(.primary) canvas,html body #skills .spage .sock:not(.primary) img{width:60%!important;height:60%!important;clip-path:none!important;border-radius:0!important;background:transparent!important}
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{clip-path:none!important;background:transparent!important}
html body #skillsT .tbtn.main img.hgun,html body #skillsT .tbtn.main img{background:none!important;box-shadow:none!important;border-radius:0!important;width:64%!important;height:64%!important;top:44%!important;filter:drop-shadow(0 2px 3px #000)}
html body #skills .spage .sock.primary img.cggun{background:none!important;inset:auto!important;left:50%!important;top:50%!important;width:62%!important;height:62%!important;transform:translate(-50%,-50%)!important}
/* the skills page one panel (the user, 20.10.): the ember line down its very left edge, the loadout and the words inside it; the words' own box gone */
html body #skills .spage{box-shadow:inset 3px 0 0 #ff7a2a,inset 0 0 0 1px rgba(255,255,255,.05)!important;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
html body #skills .sinfo{background:none!important;box-shadow:none!important;clip-path:none!important;padding-left:8px!important}
html body #skills .spage .sload,body:not(.touch) #skills .spage .sload{width:250px!important;height:230px!important;transform:none!important;margin:0!important;align-self:center!important}
/* the hero list after the template mirrored (the user, 20.10.): the list on the right, the chosen hero's card on the left */
#mainmenu[data-mode="select"] .mm-slots{left:auto!important;right:calc(var(--mmx) - 22px + var(--sr))!important}
#mainmenu[data-mode="select"] .mm-info{right:auto!important;left:calc(var(--mmx) - 10px * var(--k) + var(--sl))!important}
#mainmenu[data-mode="select"].opening .mm-slots{animation-name:pFromR}
/* the splash one centred group (the user, 20.10.: 'das Panel ist nicht centered'): the logo, the line under it and Play stacked in the screen's middle — no 17vh pushes;
   Play's plate drawn by CSS too, so it never shows as a bare word while the plate's canvas is still being made */
html body #loading{justify-content:center!important;align-items:center!important;gap:calc(10px * var(--k,1))}
html body #loading #splash{width:min(66vw,760px)!important;max-height:34vh!important;aspect-ratio:1307/420!important;margin:0!important}
html body #loading #splash .hglogo{width:100%!important;height:100%!important}
html body #loading #loadText{margin:calc(2px * var(--k,1)) 0 0!important}
html body #loading #playBtn{margin:calc(14px * var(--k,1)) 0 0!important;background:url("../assets/ui/cgx/btn_pri.webp") center/100% 100% no-repeat}
/* the target plate (the user, 20.10.: 'in das Panel, in dem die normalen Toasts erscheinen, oben im Kreis ein Enemy-Symbol'): the area banner's own plate with its swept wings, its
   hexagonal badge on top carrying the foe's mark (js/fps/ashui.js); the name centred in it, the kind and level under it, the life a segmented ember bar along its foot.
   Under the area banner while that shows, at the top when it does not (--tgtop) */
html body.ashzone #ashTarget{top:var(--tgtop,calc(34px + var(--st,0px)))!important;width:min(380px,33vw)!important;min-width:0!important;aspect-ratio:1374/353;box-sizing:border-box;padding:0 12% 0!important;
  display:none;grid-template-columns:1fr!important;grid-template-rows:auto auto auto;align-content:center!important;justify-items:center;gap:2px 0!important;
  background:url("../assets/ui/cgx/banner.webp") center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;overflow:visible!important;transition:top .25s}
html body.ashzone #ashTarget.on{display:grid!important}
html body.ashzone #ashTarget .tbadge{position:absolute;left:50%;top:-24%;width:14%;aspect-ratio:1;transform:translateX(-50%);background:url("../assets/ui/cgx/hex_socket.webp") center/contain no-repeat;display:flex;align-items:center;justify-content:center;color:#d8301e;filter:drop-shadow(0 2px 3px #000)}
html body.ashzone #ashTarget .tbadge svg{width:50%;height:50%;margin-top:0;filter:drop-shadow(0 0 4px rgba(255,60,30,.7))}
html body.ashzone #ashTarget.elite .tbadge{color:#e8b040}html body.ashzone #ashTarget.boss .tbadge{color:#ff7a2a}
html body.ashzone #ashTarget .tn{grid-row:1;font:700 clamp(12px,1.6vw,16px)/1.1 var(--f-display)!important;letter-spacing:.12em!important;color:#f0f2f4!important;text-transform:uppercase;text-shadow:0 1px 3px #000!important;margin-top:4%}
html body.ashzone #ashTarget .tk{grid-row:2;grid-column:1!important;font:600 clamp(8px,1vw,10px)/1.2 var(--f-display)!important;letter-spacing:.16em!important;color:#9aa0a8!important;text-align:center}
html body.ashzone #ashTarget .tl{position:absolute;right:13%;top:22%;font:700 clamp(8px,1vw,10px)/1 var(--f-display)!important;color:#ff9a5a!important;letter-spacing:.08em}
html body.ashzone #ashTarget .tb{grid-row:3;grid-column:1!important;width:100%;height:6px!important;margin-top:3px!important;background:#121417!important;border:0!important;box-shadow:inset 0 0 0 1px #3a3e44!important;border-radius:0!important}
html body.ashzone #ashTarget .tb>i{background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408)!important;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%);mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 1px),transparent calc(5% - 1px) 5%)}
/* the target plate's words in order: the badge above the plate, the name, then kind · level · distance on one line, the bar — nothing overlapping */
html body.ashzone #ashTarget{width:min(420px,36vw)!important;padding:0 9%!important;grid-template-columns:auto auto!important;justify-content:center!important;column-gap:10px!important}
html body.ashzone #ashTarget .tbadge{top:-34%!important;width:12%!important}
html body.ashzone #ashTarget .tn{grid-column:1 / -1!important;grid-row:1!important;margin-top:3%!important;font-size:clamp(11px,1.4vw,15px)!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #ashTarget .tk{grid-column:1!important;grid-row:2!important;white-space:nowrap;text-align:right}
html body.ashzone #ashTarget .tl{position:static!important;grid-column:2!important;grid-row:2!important;white-space:nowrap;font-size:clamp(8px,1vw,10px)!important}
html body.ashzone #ashTarget .tb{grid-column:1 / -1!important;grid-row:3!important;width:min(100%,260px)!important;justify-self:center}
/* the target plate narrower (the user, 20.10.: 'viel zu groß und zu breit') */
html body.ashzone #ashTarget{width:min(300px,26vw)!important;padding:0 7%!important}
html body.ashzone #ashTarget .tbadge{width:13%!important;top:-30%!important}
html body.ashzone #ashTarget .tn{font-size:clamp(10px,1.15vw,13px)!important}
html body.ashzone #ashTarget .tk,html body.ashzone #ashTarget .tl{font-size:clamp(7px,.85vw,9px)!important;letter-spacing:.1em!important}
html body.ashzone #ashTarget .tb{height:5px!important;width:100%!important}
/* the quest tracker in the HUD's language (the user, 20.10.: 'Quest-Panel auch Slop'): an octagonal socket on the left with the quest icon, beside it the name in ember capitals
   and the objective — on a chamfered anthracite plate whose top edge carries the ember line, fading out to the right */
html body.ashzone #quest{display:grid!important;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;width:min(270px,32vw)!important;padding:8px 14px 9px 8px!important;
  background:linear-gradient(90deg,rgba(255,122,42,.9),rgba(255,122,42,0) 75%) left top/100% 2px no-repeat,linear-gradient(180deg,rgba(36,39,44,.9),rgba(16,18,21,.9))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)!important}
html body.ashzone #quest::before{content:""!important;grid-column:1;grid-row:1 / span 3;width:34px;height:34px;background:url("../assets/icons/cg2/quests.webp?v=5") center/56% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;margin:0!important;font-size:0!important}
html body.ashzone #quest .qf{grid-column:2}
html body.ashzone #quest .qt{grid-column:2;font:700 10px/1.2 var(--f-display)!important;letter-spacing:.14em!important;color:#ff8a3a!important}
html body.ashzone #quest .qo{grid-column:2;margin:2px 0 0!important;padding-left:0!important;font:500 12px/1.3 'Barlow',sans-serif!important}
html body.ashzone #quest .qo::before{display:none!important}
html body.ashzone #quest .qw{grid-column:2;margin:1px 0 0!important}
/* the target plate tinted red (the user, 20.10.: 'einen roten Tint wegen Gegner'): the plate picture redrawn behind the words through a red filter */
html body.ashzone #ashTarget{background:none!important;isolation:isolate}
html body.ashzone #ashTarget::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../assets/ui/cgx/banner.webp") center/100% 100% no-repeat;filter:sepia(1) hue-rotate(-38deg) saturate(2.6) brightness(.72) contrast(1.1);display:block!important;opacity:1!important}
html body.ashzone #ashTarget .tbadge{filter:sepia(1) hue-rotate(-38deg) saturate(2.2) brightness(.8) drop-shadow(0 2px 3px #000)}
html body.ashzone #ashTarget .tbadge svg{filter:none}
/* the quest card: only as wide as its words, gone when there is no quest; its icon lifted */
html body.ashzone #quest{width:auto!important;max-width:min(300px,40vw)!important}
html body.ashzone #quest:has(.qt:empty){display:none!important}
html body.ashzone #quest::before{filter:brightness(1.5)}
/* the jump button never a white face */
html body #jumpT,html body #jumpT:active,html body #jumpT.on,html body #jumpT.down{background-color:transparent!important}
/* the octagonal sockets' faces filled dark (their middle is open in the picture: a bright floor showed through as a white face) */
html body #skillsT .tbtn,html body #jumpT,html body #skills .spage .sock,html body #skills .spage .sock.ok,html body #skills .spage .sock.primary{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23101215' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
/* the badge's skull red, only the socket tinted */
html body.ashzone #ashTarget .tbadge{filter:drop-shadow(0 2px 3px #000)!important;background:none!important}
html body.ashzone #ashTarget .tbadge::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../assets/ui/cgx/hex_socket.webp") center/contain no-repeat,radial-gradient(circle,rgba(20,8,6,.95) 0 37%,transparent 38%) center/100% 100% no-repeat;filter:sepia(1) hue-rotate(-38deg) saturate(2.2) brightness(.8)}
html body.ashzone #ashTarget .tbadge svg{position:relative;color:#ff3a24;filter:drop-shadow(0 0 4px rgba(255,50,30,.8))!important}
/* the target plate only the name and the life (the user, 20.10.: the info line out, narrower, smaller type) */
html body.ashzone #ashTarget{width:min(220px,20vw)!important;padding:0 8%!important}
html body.ashzone #ashTarget .tk,html body.ashzone #ashTarget .tl{display:none!important}
html body.ashzone #ashTarget .tn{font-size:clamp(9px,1vw,11px)!important;letter-spacing:.1em!important;margin-top:6%!important}
html body.ashzone #ashTarget .tb{grid-row:2!important;height:4px!important;margin-top:4px!important}
html body.ashzone #ashTarget .tbadge{width:15%!important;top:-34%!important}
html body.ashzone #ashTarget{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important;justify-items:center!important;padding:0 12%!important}
html body.ashzone #ashTarget .tn{grid-column:1!important;width:100%;text-align:center;overflow:visible!important;text-overflow:clip!important}
html body.ashzone #ashTarget .tb{grid-column:1!important;width:100%!important;max-width:none!important}
html body.ashzone #ashTarget.on{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important}
html body.ashzone #ashTarget .tn{order:1;width:auto!important;margin:5% 0 0!important;text-align:center!important}
html body.ashzone #ashTarget .tb{order:2;display:block!important;width:78%!important;margin:0!important;height:4px!important;flex:none}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{padding:0 34px!important;width:min(220px,30vw)!important}
html body.ashzone #ashTarget .tn{margin:9px 0 0!important;white-space:nowrap}
/* the player's plate after the ADAM template */
#tBars{width:min(330px,40vw)!important}
#tBars .row{align-items:stretch!important;gap:0!important}
#tLvl{z-index:2;margin-right:-10px}
#tLvl b{display:none!important}
#tBars .cgplate2{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:6px 18px 7px 20px;margin:6px 0;background:linear-gradient(180deg,rgba(40,43,48,.92),rgba(18,20,23,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 3px rgba(0,0,0,.35);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
#tBars .cgplate2 .nm{font:700 15px/1 var(--f-display);letter-spacing:.06em;color:#d8dce0;text-shadow:0 1px 2px #000;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:5px}
#tBars .cgplate2 .ln{display:flex;align-items:center;gap:10px}
#tBars .cgplate2 .lv{flex:none;font:500 13px/1 var(--f-display);color:#c3c5c8}
#tBars .cgplate2 #tLife{flex:1;height:9px!important;margin:0!important}
#tXp{margin-left:calc(var(--pz) * 1.42 + 10px)!important}
html body #tBars{width:min(300px,30vw)!important;max-width:300px!important}
html body #tBars .row{width:100%!important}
html body #tBars .cgplate2{max-width:230px;padding:6px 16px 8px 18px!important}
html body #tBars .cgplate2 .lv{line-height:1.2!important;font-size:12px!important;overflow:visible}
html body #tBars .cgplate2 #tLife{height:9px!important;min-height:9px!important;flex:1 1 auto;max-width:none!important;width:auto!important}
html body #tBars .cgplate2 #tLife div{height:100%!important}
/* the player's plate: the XP hairline no longer crosses the level */
html body #tXp{display:none!important}
/* the target plate compact and in one row (the user, 20.10.: the badge into the plate on the left, the name beside it written out, the life under the name, higher):
   a red-tinted chamfered anthracite plate — [badge] [NAME / life bar] */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{top:var(--tgtop,calc(8px + var(--st,0px)))!important;width:auto!important;min-width:150px!important;max-width:min(260px,30vw)!important;aspect-ratio:auto!important;
  padding:5px 14px 6px 5px!important;display:none;grid-template-columns:30px auto!important;grid-template-rows:auto auto!important;column-gap:9px!important;row-gap:4px!important;align-items:center!important;justify-items:start!important;
  background:linear-gradient(180deg,rgba(56,22,18,.92),rgba(26,12,10,.94))!important;box-shadow:inset 0 0 0 1px rgba(255,90,60,.28),inset 0 -2px 0 rgba(255,60,30,.6)!important;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)!important}
html body.ashzone #ashTarget.on{display:grid!important;flex-direction:initial!important}
html body.ashzone #ashTarget::before{display:none!important}
html body.ashzone #ashTarget .tbadge{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:30px!important;height:30px!important;grid-column:1;grid-row:1 / span 2}
html body.ashzone #ashTarget .tn{grid-column:2!important;grid-row:1!important;order:0;margin:0!important;width:auto!important;text-align:left!important;font-size:12px!important;letter-spacing:.08em!important;white-space:nowrap;overflow:visible!important;text-overflow:clip!important}
html body.ashzone #ashTarget .tb{grid-column:2!important;grid-row:2!important;order:0;width:100%!important;min-width:110px;height:5px!important;margin:0!important;justify-self:stretch}
/* ===== the three HUD plates as real art (assets/ui/cgx/plate_*.webp, generated after the banner and the sockets — the user, 20.10.: the CSS ones were slop);
   the content set into the plates' own faces, positions in % of each plate ===== */
/* the player: the portrait in the octagon (left 4–39%), the name in the face's upper half, level and life in its lower half */
html body #tBars{width:min(236px,30vw)!important;max-width:none!important;aspect-ratio:1411/631;height:auto!important;background:url("../assets/ui/cgx/plate_player.webp") center/100% 100% no-repeat;top:calc(8px + var(--st,0px))!important}
html body #tBars .row{position:static!important;display:block!important;width:auto!important}
html body #tLvl{position:absolute!important;left:6.5%;top:12%;width:30%!important;height:auto!important;aspect-ratio:1;margin:0!important;z-index:1}
html body #tLvl .d{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background:none!important;filter:none!important}
html body #tLvl .d::after{display:none!important}
html body #tLvl .d i{inset:0!important;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)!important}
html body #tBars .cgplate2{position:absolute!important;left:42%;right:6%;top:27%;bottom:24%;margin:0!important;padding:0 4px!important;background:none!important;box-shadow:none!important;clip-path:none!important;display:grid!important;grid-template-rows:1fr 1fr;gap:0!important;max-width:none!important}
html body #tBars .cgplate2 .nm{align-self:center;border:0!important;padding:0!important;font-size:clamp(11px,1.25vw,15px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #tBars .cgplate2 .ln{align-self:center}
/* the quest: its icon in the small octagon, the name and the objective in the two halves of the face; as compact as the enemy's */
html body.ashzone #quest{display:block!important;width:min(250px,30vw)!important;max-width:none!important;aspect-ratio:1360/575;height:auto!important;padding:0!important;background:url("../assets/ui/cgx/plate_quest.webp") center/100% 100% no-repeat!important;box-shadow:none!important;clip-path:none!important;top:auto!important}
html body.ashzone #quest::before{position:absolute!important;left:3.7%;top:9.4%;width:32%!important;height:80%!important;background:url("../assets/icons/cg2/quests.webp?v=5") center/46% no-repeat!important;filter:brightness(1.4)}
html body.ashzone #quest .qt{position:absolute;left:40%;right:5%;top:27%;height:31%;display:flex!important;align-items:center;font-size:clamp(8px,.95vw,11px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #quest .qo{position:absolute;left:40%;right:5%;top:60%;height:20%;display:flex;align-items:center;margin:0!important;font-size:clamp(8px,.95vw,11px)!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.ashzone #quest .qw,html body.ashzone #quest .qf{display:none!important}
/* the enemy: its mark in the small octagon, the name and the life in the face's two halves */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:min(220px,26vw)!important;min-width:0!important;max-width:none!important;aspect-ratio:1468/492;padding:0!important;background:url("../assets/ui/cgx/plate_foe.webp") center/100% 100% no-repeat!important;box-shadow:none!important;clip-path:none!important}
html body.ashzone #ashTarget.on{display:block!important}
html body.ashzone #ashTarget .tbadge{position:absolute!important;left:2.1%!important;top:8.7%!important;width:24.5%!important;height:82%!important;background:none!important;filter:none!important}
html body.ashzone #ashTarget .tbadge::before{display:none!important}
html body.ashzone #ashTarget .tbadge svg{width:50%!important;height:50%!important}
html body.ashzone #ashTarget .tn{position:absolute!important;left:29%;right:7%;top:23%;height:25%;display:flex!important;align-items:center;font-size:clamp(8px,.95vw,11px)!important;margin:0!important}
html body.ashzone #ashTarget .tb{position:absolute!important;left:30%!important;right:8%!important;top:56%!important;width:auto!important;min-width:0!important;height:5px!important;margin:0!important}
/* the plates' sizes set outright (an aspect ratio on a box with only absolute children came out 0 high) */
html body #tBars{width:236px!important;height:106px!important;aspect-ratio:auto!important}
html body #tBars .cgplate2{justify-items:start!important;text-align:left!important}
html body #tBars .cgplate2 .nm{justify-self:start!important;text-align:left!important}
html body #tBars .cgplate2 .ln{width:100%!important;justify-self:stretch!important;display:flex!important}
html body #tBars .cgplate2 .ln #tLife{flex:1 1 auto!important;width:auto!important}
html body.ashzone #quest{width:214px!important;height:90px!important;aspect-ratio:auto!important;position:fixed!important;left:calc(14px + var(--sl,0px))!important;top:calc(118px + var(--st,0px))!important}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:214px!important;height:72px!important;aspect-ratio:auto!important}
body.touch #ashParty{top:calc(214px + var(--st,0px))!important}
/* the skills page's locked sockets the same octagon, dimmed */
html body #skills .spage .sock.locked{background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;opacity:.55!important;border:0!important}
/* the player's plate face: name above, level and life below, both from the left */
html body #tBars .cgplate2{display:flex!important;flex-direction:column!important;justify-content:space-around!important;align-items:stretch!important}
html body #tBars .cgplate2 .nm{text-align:left!important;width:100%}
html body #tBars .cgplate2 .ln{width:100%!important;align-self:stretch!important}
html body #tBars .cgplate2 .ln #tLife{display:block!important;flex:1 1 auto!important;min-width:60px!important}
/* the quest's words kept inside the plate's face */
html body.ashzone #quest .qt,html body.ashzone #quest .qo{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important;line-height:normal!important}
html body.ashzone #quest .qt{top:30%!important;height:auto!important}html body.ashzone #quest .qo{top:58%!important;height:auto!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{position:absolute!important;left:40%!important;right:5%!important;width:auto!important;max-width:55%!important}
/* the three plates as 3-slice art (border-image): the octagon cap on the left and the chamfered end on the right keep their shape,
   only the face between them stretches, so each plate is as wide as its words; heights: hero 72, quest 60, foe 54 (slices measured in the art) */
html body #tBars{width:max-content!important;min-width:0!important;max-width:none!important;height:72px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 21px 0 75px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 21px 0 75px stretch!important;padding:18px 6px 0 0!important}
html body #tBars .row{position:static!important;display:block!important;width:auto!important;height:auto!important}
html body #tLvl{left:-65px!important;top:10px!important;width:51px!important;height:51px!important}
html body #tBars .cgplate2{position:static!important;display:block!important;width:auto!important;padding:0!important;margin:0!important;max-width:220px!important}
html body #tBars .cgplate2 .nm{display:block!important;height:25px!important;line-height:25px!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #tBars .cgplate2 .ln{display:flex!important;align-items:center!important;gap:7px!important;height:11px!important;margin-top:1px!important;min-width:120px!important}
html body #tBars .cgplate2 .lv{font-size:11px!important;line-height:11px!important}
html body #tBars .cgplate2 .ln #tLife{height:6px!important;min-height:6px!important}
html body.ashzone #quest{width:max-content!important;min-width:0!important;max-width:none!important;height:60px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 16px 0 60px!important;border-image:url("../assets/ui/cgx/plate_quest.webp") 0 104 0 378 fill / 0 16px 0 60px stretch!important;padding:17px 6px 0 0!important;top:calc(84px + var(--st,0px))!important}
html body.ashzone #quest::before{left:-54px!important;top:6px!important;width:45px!important;height:47px!important;background-size:50%!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{position:static!important;display:block!important;width:auto!important;max-width:200px!important;margin:0!important;padding:0!important}
html body.ashzone #quest .qt{height:17px!important;line-height:17px!important;font-size:10px!important}
html body.ashzone #quest .qo{height:12px!important;line-height:12px!important;margin-top:1px!important;font-size:11px!important}
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{width:max-content!important;min-width:0!important;max-width:none!important;height:54px!important;aspect-ratio:auto!important;box-sizing:border-box!important;background:none!important;
  border-style:solid!important;border-width:0 24px 0 47px!important;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 133 0 263 fill / 0 24px 0 47px stretch!important;padding:14px 6px 0 2px!important}
html body.ashzone #ashTarget .tbadge{left:-44px!important;top:5px!important;width:39px!important;height:44px!important}
html body.ashzone #ashTarget .tn{position:static!important;display:block!important;height:12px!important;line-height:12px!important;font-size:11px!important;white-space:nowrap!important;max-width:200px!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.ashzone #ashTarget .tb{position:relative!important;left:auto!important;right:auto!important;top:auto!important;display:block!important;width:auto!important;min-width:120px!important;height:5px!important;margin:7px 0 0!important}
html body #tBars,html body.ashzone #quest,html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{align-content:start!important;justify-content:start!important}
html body.ashzone #ashTarget .tb{margin-top:3px!important}
html body.ashzone #ashTarget .tb{margin-top:6px!important}
body.touch #ashParty{top:calc(150px + var(--st,0px))!important}
/* the foe's plate the quest plate's own shape, tinted red (one family with the hero's and the quest's), 54 high */
html body.ashzone #ashTarget,html body.ashzone #ashTarget.on{border-width:0 15px 0 54px!important;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 104 0 378 fill / 0 15px 0 54px stretch!important;padding:16px 6px 0 0!important}
html body.ashzone #ashTarget .tbadge{left:-49px!important;top:5px!important;width:41px!important;height:44px!important}
html body.ashzone #ashTarget .tn{height:15px!important;line-height:15px!important}
html body.ashzone #ashTarget .tb{margin-top:4px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:250px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:226px!important}html body.ashzone #quest .qo{font-size:10.5px!important}
html body.ashzone #quest .qt,html body.ashzone #quest .qo{max-width:205px!important}html body.ashzone #quest .qo{font-size:10px!important;letter-spacing:-.005em}
/* the plate's own sizes over game.css' Kharos tracker (#quest#quest, two ids: its 8 and 9.5 px times --k had won on a desktop — 13 and 15.4 px in the plate's 17 and 12 px rows, the objective cut at its foot and its end, the user 23.10.) */
html body.ashzone #quest#quest .qt{font-size:10px!important;line-height:17px!important}html body.ashzone #quest#quest .qo{font-size:10px!important;line-height:12px!important}
/* the goal's words whole (the quest audit, 03.11.: 16 goals cut at 205 px — the place they name lost): the plate grows to 300 px of words on a desktop, 250 on a phone */
html body.ashzone #quest#quest .qt,html body.ashzone #quest#quest .qo{width:max-content!important;max-width:300px!important}html body.ashzone.touch #quest#quest .qt,html body.ashzone.touch #quest#quest .qo{max-width:250px!important}
/* the riftcaller's portrait ours too (game.css put Kharos' necromancer sketch on .nec with !important) */
html body #tLvl.nec .d i,html body #mainmenu .mm-slots .mm-port.nec i{background-image:var(--cgpor)!important;background-position:center 22%!important}
/* the context buttons (talk, pick up, use) and the potion in the HUD's octagonal socket, their icons ours (a headset for talking, the user 20.10.) at half the socket, centred */
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on,html body .tpot{border-radius:0!important;border:0!important;box-shadow:none!important;filter:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23101215' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;overflow:visible!important}
html body .tact > img,html body .tact > svg,html body .tpot > img{display:none!important}
html body .tact::before,html body .tpot::before{display:none!important}
html body .tact::after,html body .tpot::after{content:""!important;position:absolute!important;inset:0!important;background:center/50% no-repeat!important;pointer-events:none;display:block!important;border:0!important;box-shadow:none!important;animation:none!important;transform:none!important}
html body .tact.talk::after{background-image:url("../assets/icons/cg2/talk.webp?v=1")!important}
html body .tact.pick::after{background-image:url("../assets/icons/cg2/pick.webp?v=1")!important}
html body .tact.use::after{background-image:url("../assets/icons/cg2/use.webp?v=1")!important}
html body .tpot::after{background-image:url("../assets/icons/cg2/potion.webp?v=5")!important}
html body .tact kbd,html body .tpot kbd{display:none!important}
html body .tpot b{position:absolute!important;right:4%!important;top:4%!important;min-width:16px;height:16px;padding:0 3px;display:flex!important;align-items:center;justify-content:center;font:700 10px/1 var(--f-display)!important;color:#fff!important;background:#ff7a2a!important;border:0!important;border-radius:0!important;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);box-shadow:none!important;text-shadow:none!important}
html body .tpot .cd{clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)!important;border-radius:0!important}
html body .tact.on{animation:callin .25s ease-out!important}
html body .tact::after,html body .tpot::after{filter:brightness(1.55)}
/* the hero choice's and the hero list's card on a painted ornate panel (the user, 20.10.: flourishes, no CSS panel) laid as a 9-slice behind it; its crest on the top edge by itself so the edge can stretch */
html body #mainmenu .mm-info{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;isolation:isolate;overflow:visible!important}
html body #mainmenu .mm-info::before,html body #mainmenu[data-mode] .mm-info::before{content:""!important;display:block!important;position:absolute!important;inset:-16px -10px!important;width:auto!important;height:auto!important;translate:none!important;animation:none!important;z-index:-1!important;border-style:solid!important;border-width:71px 48px 78px 48px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch!important;background:none!important;box-shadow:none!important;clip-path:none!important;opacity:1!important;transform:none!important;pointer-events:none}
html body #mainmenu .mm-info::after,html body #mainmenu[data-mode] .mm-info::after,html body #mainmenu[data-mode="create"] .mm-info:not(.none)::after,html body #mainmenu[data-mode="create"] .mm-info.none::after{content:""!important;display:block!important;position:absolute!important;left:50%!important;right:auto!important;top:-16px!important;bottom:auto!important;width:31px!important;height:37px!important;margin-left:-15.5px!important;translate:none!important;animation:none!important;background:url("../assets/ui/cgx/panel_crest.webp") center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;opacity:1!important;transform:none!important;z-index:1!important;pointer-events:none}
/* the interact buttons (talk, pick up, use) always glow ember: the most important button when it shows (the user, 20.10.) */
@keyframes cgActGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,122,42,.75)) drop-shadow(0 0 10px rgba(255,122,42,.35))}50%{filter:drop-shadow(0 0 7px rgba(255,140,60,1)) drop-shadow(0 0 18px rgba(255,122,42,.6))}}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out,cgActGlow 1.6s ease-in-out .25s infinite!important}
/* the hero choice's ornate panel on the talk's plate too (a test, the user 20.10.) */
html body #dialogue .dplate{inset:-14px -8px!important;clip-path:none!important;opacity:1!important;background:none!important;box-shadow:none!important;border-style:solid!important;border-width:71px 48px 78px 48px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 71px 48px 78px 48px stretch!important}
/* the talk's plate smaller (the user, 20.10.: less room above and below, smaller over all): the frame's flourishes at two thirds, a slimmer box */
html body #dialogue{padding:4px 22px 4px!important;width:min(600px,calc(64 * var(--vw)))!important}
html body #dialogue .dplate{inset:-10px -6px!important;border-width:49px 33px 54px 33px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #dialogue .who{margin-bottom:2px!important}
html body #dialogue .say{font-size:calc(12.5px * var(--k))!important;line-height:1.4!important;min-height:2.6em!important}
/* the phone's bag, full screen again (the user, 20.10.): the window on a painted metal plate, the figure's side in the ornate frame, the worn gear in octagonal sockets with flourishes, the bag in cut-corner cells; an item's rarity a glow in its slot */
html body.touch #inv.open{background:url("../assets/ui/cgx/metal_tex.webp") center/256px 256px repeat,#15181b!important}
html body.touch #inv.open .doll{position:relative!important;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;padding:14px 18px!important}
html body.touch #inv.open .doll::after{content:""!important;display:block!important;position:absolute!important;inset:6px 0 6px 0!important;z-index:-1!important;border-style:solid!important;border-width:57px 38px 62px 38px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 57px 38px 62px 38px stretch!important;background:none!important;pointer-events:none;transform:none!important;width:auto!important;height:auto!important}
html body.touch #inv.open .eq,html body.touch #inv.open .cell{border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background-color:transparent!important}
html body.touch #inv.open .eq{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 62%),url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body.touch #inv.open .cell{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 66%),url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important}
html body.touch #inv.open .eq::before,html body.touch #inv.open .eq::after,html body.touch #inv.open .cell::before,html body.touch #inv.open .cell::after{display:none!important}
html body.touch #inv.open :is(.eq,.cell).r-normal{--rg:rgba(228,224,214,.14)}
html body.touch #inv.open :is(.eq,.cell).r-magic{--rg:rgba(91,141,255,.42)}
html body.touch #inv.open :is(.eq,.cell).r-rare{--rg:rgba(245,207,61,.38)}
html body.touch #inv.open :is(.eq,.cell).r-unique{--rg:rgba(255,125,31,.45)}
html body.touch #inv.open :is(.eq,.cell).r-artifact{--rg:rgba(179,107,255,.42)}
html body.touch #inv.open :is(.eq,.cell).r-quest{--rg:rgba(63,230,210,.38)}
html body.touch #inv.open :is(.eq,.cell).sel{filter:drop-shadow(0 0 6px rgba(255,122,42,.9))!important}
html body.touch #inv.open .bagwrap,html body.touch #inv.open .ibody{background:none!important;box-shadow:none!important}
html body.touch #inv.open{background:url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#15181b!important}
html body.touch #inv.open .ihead{translate:12px 12px}
/* the interact and talk buttons stand apart from the skills (the user, 20.10.: 'mehr leuchten'): an ember fire inside the socket, a strong pulsing glow, the icon bright */
@keyframes cgActGlow2{0%,100%{filter:drop-shadow(0 0 6px rgba(255,122,42,.95)) drop-shadow(0 0 16px rgba(255,122,42,.55))}50%{filter:drop-shadow(0 0 10px rgba(255,150,70,1)) drop-shadow(0 0 28px rgba(255,122,42,.85))}}
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{background:radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out,cgActGlow2 1.4s ease-in-out .25s infinite!important}
html body .tact::after{filter:brightness(2.1) drop-shadow(0 0 3px rgba(255,140,60,.8))!important;background-size:54%!important}
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{animation:callin .25s ease-out!important;filter:drop-shadow(0 0 7px rgba(255,130,50,1)) drop-shadow(0 0 20px rgba(255,122,42,.75))!important}
html body #jumpT img{width:54%!important;height:54%!important;filter:brightness(1.7)!important}
/* the phone's bag laid out: a title over the bag in line with the hero's name, the worn slots centred in the frame, item pictures inside the slot's safe zone */
html body.touch #inv.open > .plate-title{display:block!important;position:absolute!important;left:397px!important;top:calc(24px + var(--st,0px))!important;padding:0!important;margin:0!important;font:600 15px/1 var(--f-display)!important;letter-spacing:.28em!important;color:#e6e8ea!important;text-shadow:0 1px 3px #000!important;z-index:4}
html body.touch #inv.open > .plate-title::before,html body.touch #inv.open > .plate-title::after{display:none!important}
html body.touch #inv.open .bag{margin-top:10px!important}
html body.touch #inv.open .doll .sec,html body.touch #inv.open .doll .pri,html body.touch #inv.open .doll .fig,html body.touch #inv.open .statsbtn{translate:0 16px}
html body.touch #inv.open :is(.eq,.cell) > img{width:62%!important;height:62%!important;object-fit:contain!important;position:static!important;inset:auto!important;margin:auto!important}
html body.touch #inv.open .bagcount{text-align:right!important;font:500 12px/1 var(--f-display)!important;letter-spacing:.12em;color:#9aa0a6!important;margin-top:8px!important}
html body.touch #inv.open .cell .upg{transform:scale(.72)!important;transform-origin:top right!important;top:9%!important;right:9%!important}
html body #jumpT img{width:50%!important;height:50%!important;filter:none!important}
/* the glow without a filter: iOS Safari clipped the drop-shadow to the button's square box (the user's shot, 20.10.); a soft ember light of its own behind the socket instead, and no square outline on the potion */
html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{filter:none!important}
html body .tact::before,html body .tact.on::before{content:""!important;display:block!important;position:absolute!important;inset:-38%!important;z-index:-1!important;border:0!important;border-radius:50%!important;background:radial-gradient(circle,rgba(255,130,50,.7) 0,rgba(255,122,42,.38) 34%,rgba(255,122,42,.12) 52%,transparent 68%)!important;box-shadow:none!important;transform:none!important;animation:none!important;opacity:1!important;pointer-events:none}
html body .tact{isolation:isolate}
html body .tact:not(.on)::before{display:none!important}
html body .tact,html body .tpot,html body .tpot.low,html body #jumpT,html body #skillsT .tbtn{outline:0!important}
html body .tact::before,html body .tact.on::before{inset:-34%!important;background:radial-gradient(circle closest-side,rgba(255,130,50,.95) 0,rgba(255,130,50,.85) 52%,rgba(255,122,42,.5) 64%,rgba(255,122,42,.18) 80%,transparent 100%)!important}
/* (the socket, its ember fire and the icon all drawn by ::after, so the glow (::before, behind) can sit under them: a stacking element paints its negative children over its own background) */
html body .tact,html body .tact.on,html body .tact.talk.on,html body .tact.pick.on,html body .tact.use.on{background:none!important}
html body .tact.talk::after{background:url("../assets/icons/cg2/talk.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact.pick::after{background:url("../assets/icons/cg2/pick.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact.use::after{background:url("../assets/icons/cg2/use.webp?v=1") center/54% no-repeat,url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,radial-gradient(circle,rgba(255,122,42,.42) 0,rgba(255,122,42,.12) 42%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23221208' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;filter:none!important}
html body .tact::before,html body .tact.on::before{inset:-42%!important;background:radial-gradient(circle closest-side,rgba(255,130,50,.95) 0,rgba(255,130,50,.9) 56%,rgba(255,122,42,.62) 66%,rgba(255,122,42,.26) 80%,transparent 100%)!important}
/* the talk's plate wider and flatter, smaller words, its face a little see-through (the user, 20.10.); the frame's face made translucent in the art itself (panel_orn_t), the flourishes stay solid */
html body #dialogue{width:min(780px,calc(88 * var(--vw)))!important;padding:2px 22px 2px!important}
html body #dialogue .dplate{border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #dialogue .who{font-size:calc(9.5px * var(--k))!important}
html body #dialogue .say{font-size:calc(11px * var(--k))!important;line-height:1.35!important;min-height:2.7em!important}
/* the menu card's buttons as wide as their words (WELT BETRETEN ran out of its plate on a small phone) */
html body #mainmenu .mm-info .mm-go{max-width:none!important;width:auto!important;white-space:nowrap!important;letter-spacing:.14em!important;padding-left:calc(20px * var(--k))!important;padding-right:calc(20px * var(--k))!important}
html body #mainmenu .mm-info h2{letter-spacing:.12em!important;max-width:100%;white-space:nowrap;font-size:min(calc(20px * var(--k)),7.4vw)!important}
/* a short screen (a 12 mini or an SE with Safari's bars): the card and its frame tighter so nothing is cut */
@media (max-height:350px){
html body #mainmenu .mm-info::before,html body #mainmenu[data-mode] .mm-info::before{inset:-8px -6px!important;border-width:49px 33px 54px 33px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 49px 33px 54px 33px stretch!important}
html body #mainmenu .mm-info::after,html body #mainmenu[data-mode] .mm-info::after{top:-8px!important;width:22px!important;height:26px!important;margin-left:-11px!important}
html body #mainmenu .mm-info h2{font-size:min(calc(16px * var(--k)),6vw)!important}
html body #mainmenu .mm-info{padding-top:calc(10px * var(--k))!important;padding-bottom:calc(10px * var(--k))!important}
}
/* one metal for every full window (the user, 20.10.: 'es muss zusammenpassen', the settings went from light to dark): the painted metal plate under the bag, the settings, the skills, the quests, the map and the game menu's side; their inner rows a darker inset of the same metal, no light grey */
html body :is(#inv,#help,#skills,#qlog,#shop,#mappanel,#mapPanel),html body #gmenu .gside{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.32)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#15181b!important}
html body #help .hbody > *,html body #help .hlist,html body #help .plate-title{background:none!important;box-shadow:none!important}
html body #help .hrow{background:rgba(6,8,10,.42)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;border:0!important}
html body #help .hlist{border-left:1px solid rgba(255,255,255,.06)!important}
/* (the talk's sizes once more with the id twice: game.css' 'html body.touch #dialogue' rules outranked them) */
html body #dialogue#dialogue{width:min(780px,calc(88 * var(--vw)))!important;padding:6px 64px 6px 34px!important}
html body #dialogue#dialogue .who{font-size:calc(9.5px * var(--k))!important;margin-bottom:2px!important}
html body #dialogue#dialogue .say{font-size:calc(11px * var(--k))!important;line-height:1.35!important;min-height:2.7em!important}
html body #dialogue#dialogue .more{right:18px!important;bottom:auto!important;top:50%!important;translate:0 -50%;width:calc(30px * var(--k))!important;height:calc(30px * var(--k))!important}
html body #dialogue#dialogue,html body.cine #dialogue#dialogue{bottom:calc(16px + var(--sb,0px))!important;padding:10px 64px 10px 34px!important}
html body #dialogue#dialogue .dplate{inset:-6px -4px!important;border-width:36px 24px 39px 24px!important;border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 36px 24px 39px 24px stretch!important}
html body #dialogue#dialogue .more{top:calc(50% - 15px)!important;translate:none!important}
html body #dialogue#dialogue{background:none!important;box-shadow:none!important}
html body #dialogue#dialogue .more{top:auto!important;bottom:calc(50% - 15px)!important}
/* the skills page: the list's pictures alone, no square frame (the user, 20.10.: 'hier einfach nur die Icons'); the empty info a quiet line at the foot of the page instead of a faint title across the portrait; the page's own face the same metal as the rest */
html body #skills .slist .sk canvas,html body #skills .slist .sk[data-id] canvas{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}
html body #skills .sinfo:has(> .choose){position:absolute!important;left:0!important;right:0!important;bottom:14px!important;top:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border:0!important;text-align:center}
html body #skills .sinfo:has(> .choose)::before,html body #skills .sinfo:has(> .choose)::after,html body #skills .sinfo .choose::before,html body #skills .sinfo .choose::after{display:none!important}
html body #skills .sinfo .choose{font:500 12px/1.2 var(--f-display)!important;letter-spacing:.18em!important;color:#8d9399!important;opacity:1!important;text-transform:uppercase}
html body #skills .spage{background-color:rgba(0,0,0,.22)!important}
/* the hint callout on our quest plate (3-slice, the lantern emblem in its octagon, an ember pointer) instead of Kharos' gold label with the blue banner; the longer explanation on the see-through ornate frame */
/* (23.10., the user: 'Info-Pointer-Panel sieht scheiße aus' — the quest plate held at 40px while its text ran to two lines over and past it, the emblem a speck at its left, the ember arrow drawn pointing right where the code turns a left-pointing tip, so it pointed away from its target.)
   Now: the dialogue's plate (dialog_plate.webp, 1347×430; its rim, chamfers and ember line in 108 px of each side, the bottom 118 with its 30 px shadow) as a 9-slice that grows with the text, one line or two;
   the lantern emblem in its own hex socket, centred in the plate's height; the text centred in the plate; the ember tip pointing left (the shape the placement turns, as Kharos' label-tip.webp did) and set flush on the rim.
   --ib: the plate's transparent shadow under its painted bottom edge (in px × --k), which the placement (js/ui/ui.js placeHint) leaves out so an arrow from the bottom edge touches the metal */
html body #callout#callout{--ib:2.5;height:auto!important;min-height:calc(40px * var(--k))!important;box-sizing:border-box!important;padding:calc(3px * var(--k)) calc(4px * var(--k)) calc(4px * var(--k)) calc(27px * var(--k))!important;gap:calc(6px * var(--k))!important;align-items:center!important;border-style:solid!important;border-width:calc(9px * var(--k)) calc(9px * var(--k)) calc(10px * var(--k)) calc(9px * var(--k))!important;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / calc(9px * var(--k)) calc(9px * var(--k)) calc(10px * var(--k)) calc(9px * var(--k)) stretch!important;background:none!important;box-shadow:none!important;border-radius:0!important;max-width:min(calc(300px * var(--k)),56vw)!important;color:#eef0f2!important;text-shadow:0 1px 2px #000!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))!important}
html body #callout#callout.narrow{max-width:min(calc(250px * var(--k)),34vw)!important}
html body #callout#callout span{font:600 calc(11px * var(--k))/1.28 var(--f-display)!important;letter-spacing:.03em!important;color:#eef0f2!important}
html body #callout#callout::before{content:""!important;position:absolute!important;left:calc(-3px * var(--k))!important;top:50%!important;bottom:auto!important;width:calc(23px * var(--k))!important;height:calc(26px * var(--k))!important;margin-top:calc(-13.5px * var(--k))!important;background:url("../assets/ui/cgx/banner_emblem.webp") center/contain no-repeat!important;border:0!important;box-shadow:none!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))!important;transform:none!important;pointer-events:none}
html body #callout#callout span::before{display:none!important}
html body #callout#callout b{z-index:2;width:0!important;height:0!important;background:none!important;border-left:0!important;border-right:calc(11px * var(--k)) solid #ff7a2a!important;border-top:calc(8px * var(--k)) solid transparent!important;border-bottom:calc(8px * var(--k)) solid transparent!important;filter:drop-shadow(0 0 3px rgba(255,122,42,.85))!important}
html body #callout#callout:not(.pt) b{right:calc(-19px * var(--k))!important;left:auto!important;top:50%!important;margin-top:calc(-8px * var(--k))!important;transform:rotate(180deg)!important}
html body #callout#callout.rt:not(.pt) b{left:calc(-19px * var(--k))!important;right:auto!important;transform:none!important}
html body #callout#callout:is(.up,.bag):not(.pt) b{top:calc(-21.5px * var(--k))!important;right:calc(10px * var(--k))!important;left:auto!important;margin-top:0!important;transform:rotate(90deg)!important}
html body #callout#callout .more,html body #callout#callout #tourBtn{flex:none!important;width:calc(24px * var(--k))!important;height:calc(24px * var(--k))!important;margin:0 0 0 calc(2px * var(--k))!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat!important;border:0!important;border-image:none!important;box-shadow:none!important}
html body #callout#callout .more[hidden],html body #callout#callout #tourBtn[hidden]{display:none!important}
html body #callout#callout .more svg,html body #callout#callout #tourBtn svg{display:block!important;width:50%!important;height:50%!important;fill:none!important;stroke:#ffb27a!important;stroke-width:3!important;stroke-linecap:square}
html body #explain#explain{border-style:solid!important;border-width:36px 24px 39px 24px!important;border-image:url("../assets/ui/cgx/panel_orn_t.webp") 222.5 150 245 150 fill / 36px 24px 39px 24px stretch!important;background:none!important;box-shadow:none!important}
/* the metal dark again (the user, 20.10.: 'alles hell gemacht statt dunkel'): the painted plate under a heavy shade, as dark as the windows were before */
html body :is(#inv,#help,#skills,#qlog,#shop,#mappanel,#mapPanel),html body #gmenu .gside,html body.touch #inv.open{background:linear-gradient(180deg,rgba(6,7,9,.6),rgba(6,7,9,.72)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#111316!important}
html body #help#help .hrow{background:rgba(0,0,0,.34)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
html body #skills#skills .slist .sk{--fc:rgba(0,0,0,.34)!important}
html body #skills#skills .slist .sk.sel{--fc:#3a2a22!important}
html body #inv .statspane .sec{margin:10px 0 4px;padding-top:8px;border-top:1px solid rgba(255,122,42,.35);font:600 calc(11px * var(--k))/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#ff8a3a}
html body #statsv .svskills button img.svgun{width:62%!important;height:62%!important;object-fit:contain;position:absolute;left:19%;top:19%;pointer-events:none}html body #statsv .svskills button{position:relative}
/* the way-out sign (desktop tooltip and the phone's sign) on our quest plate with the lantern emblem, cream caps and an ember chevron, instead of Kharos' scrolled steel and bronze compass */
html body .wsign::before{border:0!important;border-style:solid!important;border-width:0 10px 0 30px!important;border-image:url("../assets/ui/cgx/plate_quest.webp") 0 104 0 378 fill / 0 10px 0 30px stretch!important;left:calc(var(--md) * -.5)!important}
html body .wsign::after{display:none!important}
html body .wsign .ws-med{background:url("../assets/ui/cgx/banner_emblem.webp") center/70% no-repeat!important;filter:none!important}
html body .wsign .ws-n{color:#eef0f2!important;font-family:var(--f-display)!important;text-shadow:0 1px 2px #000!important}
html body .wsign .ws-go{background:none!important;width:0!important;height:0!important;border-left:.5em solid #ff7a2a;border-top:.34em solid transparent;border-bottom:.34em solid transparent;filter:drop-shadow(0 0 3px rgba(255,122,42,.8))}
/* the menu card's words sized by the card itself (a container): the class's name and the buttons never run past the frame on a narrow phone (the user's shot, 20.10.) */
html body #mainmenu .mm-info{container-type:inline-size}
html body #mainmenu .mm-info h2{font-size:min(calc(20px * var(--k)),9.6cqi)!important;letter-spacing:.1em!important}
html body #mainmenu .mm-info .mm-go{font-size:min(calc(12px * var(--k)),5.6cqi)!important;letter-spacing:.1em!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;text-indent:0!important}
html body #mainmenu .mm-actrow .mm-go{min-width:0!important;flex:1 1 0!important;padding-left:calc(6px * var(--k))!important;padding-right:calc(6px * var(--k))!important}
/* the item card's icon buttons readable on our dark plates (their strokes were Kharos' near-black, drawn for the gold button: the worn gun's 'Take off' looked empty) */
html body.touch #icard#icard .btns button.cardic svg,html body.touch #icard#icard .btns button.pri.cardic svg{stroke:#ffd9bf!important;filter:drop-shadow(0 0 3px rgba(255,122,42,.6))}
html body.touch #icard#icard .btns button.minor.cardic svg{stroke:#c3c7cc!important;filter:none}
html body.touch #icard#icard .btns button.cardic b{color:#ffd9bf!important}
/* the desktop's bag the phone's look (the user, 20.10.: 'Inventar auf Desktop sieht scheiße aus'): the figure's side in the ornate frame, the worn gear in the flourished octagons, the bag in cut-corner cells, rarity a glow, no Kharos corner brackets */
html body:not(.touch) #inv.open .doll{position:relative!important;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;padding:18px 22px!important}
html body:not(.touch) #inv.open .doll::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;border-style:solid!important;border-width:57px 38px 62px 38px!important;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 57px 38px 62px 38px stretch!important;background:none!important;pointer-events:none;transform:none!important;width:auto!important;height:auto!important}
html body:not(.touch) #inv.open .eq,html body:not(.touch) #inv.open .cell{border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background-color:transparent!important}
html body:not(.touch) #inv.open .eq{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 62%),url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body:not(.touch) #inv.open .cell{background:radial-gradient(circle,var(--rg,transparent) 0,transparent 66%),url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important}
html body:not(.touch) #inv.open .eq::before,html body:not(.touch) #inv.open .eq::after,html body:not(.touch) #inv.open .cell::before,html body:not(.touch) #inv.open .cell::after{display:none!important}
html body:not(.touch) #inv.open :is(.eq,.cell).r-normal{--rg:rgba(228,224,214,.14)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-magic{--rg:rgba(91,141,255,.42)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-rare{--rg:rgba(245,207,61,.38)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-unique{--rg:rgba(255,125,31,.45)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-artifact{--rg:rgba(179,107,255,.42)}
html body:not(.touch) #inv.open :is(.eq,.cell).r-quest{--rg:rgba(63,230,210,.38)}
html body:not(.touch) #inv.open :is(.eq,.cell).sel{filter:drop-shadow(0 0 6px rgba(255,122,42,.9))!important}
html body:not(.touch) #inv.open :is(.eq,.cell) > img{width:62%!important;height:62%!important;object-fit:contain!important;margin:auto!important}
html body:not(.touch) #inv.open .bagwrap,html body:not(.touch) #inv.open .ibody{background:none!important;box-shadow:none!important;border-color:transparent!important}
html body:not(.touch) #inv.open .bagwrap::before,html body:not(.touch) #inv.open .bagwrap::after,html body:not(.touch) #inv.open .ibody::before,html body:not(.touch) #inv.open .ibody::after,html body:not(.touch) #inv.open .bag::before,html body:not(.touch) #inv.open .bag::after{display:none!important}
html body:not(.touch) #inv.open .cell .upg{transform:scale(.72)!important;transform-origin:top right!important;top:9%!important;right:9%!important}
/* the desktop's skills page: the loadout as the HUD's bar, on the bar's own plate and large, not Kharos' small strip */
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/bar_plate.webp") center/100% 100% no-repeat!important;transform:scale(1.55)!important;transform-origin:center center!important;margin:auto!important;align-self:center!important;padding:0!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar .sock{margin:0!important}
html body #inv#inv.open,html body #skills#skills,html body #help#help,html body #qlog#qlog,html body #shop#shop{background:linear-gradient(180deg,rgba(6,7,9,.6),rgba(6,7,9,.72)),url("../assets/ui/cgx/metal_tex.webp") center/cover no-repeat,#111316!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{position:absolute!important;left:50%!important;top:46%!important;margin:0!important;transform:translate(-50%,-50%) scale(1.15)!important;transform-origin:center center!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar .sock:not(.locked){opacity:1!important}
html body:not(.touch) #inv.open .ihead{translate:16px 16px}html body:not(.touch) #inv.open .doll{padding-top:30px!important}
/* Play never a bare word: a dark chamfered plate under the painted one while it loads (it is preloaded in index.html) */
html body #loading #playBtn{background:url("../assets/ui/cgx/btn_pri.webp") center/100% 100% no-repeat,linear-gradient(180deg,#24262a,#121315)!important;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);text-indent:0!important;padding-left:calc(34px * var(--k,1))!important;padding-right:calc(34px * var(--k,1))!important}
/* a party member's line: a speech bubble out of their portrait, right of their plate, on our dark plate with an ember edge and a tail toward the portrait */
#ashParty .apm.cgplate{position:relative}
#ashParty .cgsay{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);max-width:220px;width:max-content;padding:6px 10px;background:rgba(16,18,21,.94);border:1px solid rgba(255,122,42,.75);box-shadow:0 2px 8px rgba(0,0,0,.6);font:500 12px/1.3 'Barlow',sans-serif;color:#eef0f2;pointer-events:none;animation:cgSayIn .2s ease-out both}
#ashParty .cgsay::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:rgba(255,122,42,.85);border-left:0}
@keyframes cgSayIn{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
#ashParty .cgsay{left:48px!important;z-index:3}
/* the hero editor usable on a phone (the user, 20.10.): the part tabs a slim column of small octagons inside the screen, the options our cut-corner cells with words that fit, the chosen one an ember glow (no blue focus ring, no second box) */
html body .cu-tabs{gap:8px!important;max-height:calc(100% - 24px);top:50%!important}
html body .cu-tabs .cu-tab,html body .cu-tabs .cu-tab:nth-child(even){width:calc(44px * var(--k))!important;height:calc(44px * var(--k))!important;margin:0!important;transform:none!important;padding:0!important}
html body .cu-tabs .cu-tab svg{width:46%!important;height:46%!important}
html body .cu-tabs .cu-tab.on{transform:none!important;filter:drop-shadow(0 0 8px rgba(255,122,42,.8))!important}
html body .cu-opt,html body .cu-opt:focus,html body .cu-tab:focus,html body .cu-opt:focus-visible,html body .cu-tab:focus-visible{outline:0!important}
html body .cu-opt{border:0!important;border-image:none!important;clip-path:none!important;background:url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat!important;font:600 calc(13px * var(--k))/1 var(--f-display)!important;letter-spacing:.04em!important;color:#c3c7cc!important;overflow:hidden}
html body .cu-opt span{max-width:76%;overflow:hidden;text-overflow:clip;white-space:nowrap;font-size:inherit}
html body .cu-opt.on{color:#ffd9bf!important;filter:drop-shadow(0 0 7px rgba(255,122,42,.85))!important}
html body .cu-opt.on::after{display:none!important}
html body .cu-grid{grid-auto-rows:max-content!important;row-gap:calc(10px * var(--k))!important}
html body .cu-grid .cu-opt{width:calc(54px * var(--k))!important;height:calc(54px * var(--k))!important;max-width:none!important;aspect-ratio:1!important;flex:none!important;min-height:0!important}
/* the game menu's hero card on the hero plate's art (3-slice, the portrait in its octagon), the XP a thin ember line under the level */
html body #gmenu .gchar{position:relative!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;height:64px!important;padding:0 10px 0 4px!important;background:none!important;box-shadow:none!important;clip-path:none!important;border-style:solid!important;border-width:0 18px 0 64px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 18px 0 64px stretch!important}
html body #gmenu .gchar .gem{position:absolute!important;left:-57px!important;top:8px!important;width:46px!important;height:46px!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}
html body #gmenu .gchar .gem::before{inset:0!important}
html body #gmenu .gchar .gem::after{display:none!important}
html body #gmenu .gchar .gname{font:700 13px/1.1 var(--f-display)!important;letter-spacing:.08em!important;color:#eef0f2!important}
html body #gmenu .gchar .glvl{font:500 11px/1.2 var(--f-display)!important;color:#c3c7cc!important}
html body #gmenu .gchar .gxp{height:3px!important;margin-top:4px!important;background:#121417!important;border:0!important;box-shadow:none!important;clip-path:none!important}
html body #gmenu .gchar .gxp > div{background:#ff7a2a!important;box-shadow:none!important}
html body #gmenu .gchar::before,html body #gmenu .gchar::after{display:none!important}
html body #gmenu .gchar{width:auto!important;max-width:none!important;align-self:stretch!important;outline:0!important}
html body #gmenu .gchar .gcw{flex:1 1 auto!important;min-width:0!important;overflow:visible!important}
html body #gmenu .gchar .gname{font-size:12px!important;letter-spacing:.06em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important}
/* the game menu (21.10., the user's: the tiles of one width, every word inside; the top buttons' icons readable): both columns one width, every tile the column's width, the top icons half their button and lit */
html body.ashzone #gmenu#gmenu .gl,html body.ashzone #gmenu#gmenu .gr{width:clamp(calc(240px * var(--k,1)),30%,calc(300px * var(--k,1)))!important;flex:none!important}
html body.ashzone #gmenu#gmenu .tiles{align-self:stretch!important;width:100%!important}
html body.ashzone #gmenu#gmenu .tile,html body.ashzone #gmenu#gmenu .gl .tile,html body.ashzone #gmenu#gmenu .gr .tile,html body.ashzone #gmenu#gmenu .gr .tile.bar{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;flex:none!important}
html body.ashzone #gmenu#gmenu .tile span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #gmenu .gbtn img.art-ic{width:54%!important;height:54%!important;filter:brightness(1.6) drop-shadow(0 1px 2px #000)!important}
html body.ashzone #gmenu#gmenu .tile,html body.ashzone #gmenu#gmenu .gl .tile,html body.ashzone #gmenu#gmenu .gr .tile,html body.ashzone #gmenu#gmenu .gr .tile.bar{padding:0 calc(14px * var(--k,1))!important;gap:calc(14px * var(--k,1))!important;justify-content:flex-start!important}
html body.ashzone #gmenu#gmenu .tile span,html body.ashzone #gmenu#gmenu .gl .tile span,html body.ashzone #gmenu#gmenu .gr .tile span{font:600 calc(13px * var(--k,1)) var(--f-display)!important;letter-spacing:.1em!important;padding:0!important;margin:0!important;text-align:left!important}
/* the skills page (21.10., the user's: the whole loadout mirrored into the bottom left corner, the words inside the sockets; nothing chosen, the gun's card): the loadout pinned low left, the card beside it */
html body #skills.open .spage{position:relative!important}
html body #skills.open .spage .sload:not(.asbar){position:absolute!important;left:calc(14px * var(--k,1))!important;bottom:calc(8px * var(--k,1))!important;top:auto!important;right:auto!important;margin:0!important;transform:none!important;align-self:auto!important}
html body #skills.open .spage .sinfo{position:absolute!important;left:calc(280px * var(--k,1))!important;right:calc(14px * var(--k,1))!important;top:calc(10px * var(--k,1))!important;bottom:calc(10px * var(--k,1))!important;width:auto!important;max-width:none!important;margin:0!important;overflow-y:auto!important;scrollbar-width:none;display:block!important}
html body #skills#skills .spage .sock.locked em{left:0!important;right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;text-align:center!important;width:auto!important;margin:0!important;font:600 calc(11px * var(--k,1)) var(--f-display)!important;letter-spacing:.06em!important;color:#9aa0a6!important}
html body.touch #skills#skills .spage .sock:not(.locked) em{display:none!important}
html body #skills .spage .sock.primary.cgsel{box-shadow:0 0 14px rgba(255,122,42,.45)!important}
html body #skills .cgskcard{display:flex;flex-direction:column;gap:6px}
html body #skills .cgskcard .cgskgun{width:min(70%,260px);align-self:center;filter:drop-shadow(0 4px 8px #000)}
html body #skills .cgskcard .cgskmeta{font:600 calc(11px * var(--k,1)) var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#ff9a4a}
html body #skills .cgskcard .ip{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html body #skills .cgskcard .ip{width:auto!important;max-width:none!important;min-width:0!important;font-size:calc(12px * var(--k,1))!important}
html body #skills .cgskcard .ip::before,html body #skills .cgskcard .ip::after{display:none!important}
html body #skills .cgskcard .cgskgun{width:auto!important;max-width:80%!important;height:calc(64px * var(--k,1))!important;object-fit:contain}
html body #skills.open .spage .sinfo{left:calc(250px * var(--k,1))!important}
html body.hudbar:not(.touch) #skills.open .spage .sload.asbar{left:calc(18px * var(--k,1))!important;top:auto!important;bottom:calc(18px * var(--k,1))!important;transform:none!important;transform-origin:left bottom!important}
html body.hudbar:not(.touch) #skills.open .spage .sinfo{left:calc(18px * var(--k,1))!important;right:calc(18px * var(--k,1))!important;bottom:calc(150px * var(--k,1))!important;max-width:calc(420px * var(--k,1))!important}
html body.touch #skills .cgskcard .ip{font-size:11px!important}
html body.touch #skills .cgskcard .cgskgun{height:36px!important}
html body.touch #skills .cgskcard{gap:2px}
/* the desktop bag's title over its grid */
html body #inv .cgbagt{display:none}
/* the bag's title gone on the desktop too (the user, 03.11., a shot of it cut under the hero's panel: 'Inventar-Label weg') */
html body:not(.touch) #inv .bagwrap .cgbagt{display:none!important}
html body:not(.touch) #inv .bagwrap .cgbagt{display:block;font:600 calc(14px * var(--k,1)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#e6e8ea;text-align:center;padding:calc(6px * var(--k,1)) 0 calc(8px * var(--k,1));margin-bottom:calc(8px * var(--k,1));border-bottom:1px solid rgba(255,122,42,.45);text-shadow:0 1px 2px #000}
/* the card's worded buttons on the phone (21.10.): light words on the dark plate, as every other button */
html body #icard#icard .btns button:not(.cardic){color:#ffd9bf!important;-webkit-text-fill-color:#ffd9bf!important;text-shadow:0 1px 2px #000!important;font:600 13px var(--f-display)!important;letter-spacing:.12em!important;text-transform:uppercase}
html body #icard#icard .btns button.minor:not(.cardic){color:#c3c7cc!important;-webkit-text-fill-color:#c3c7cc!important}
/* the currency is Celestine (21.10.): its crystal in every counter instead of the gold ball, its blue on the drop's label */
html body #inv .igold i,html body .igold i{width:calc(18px * var(--k,1))!important;height:calc(18px * var(--k,1))!important;border-radius:0!important;background:url("../assets/icons/cg2/celestine.webp?v=1") center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 4px rgba(143,211,255,.6))!important}
html body .loot-label.gold,html body .loot-label.celestine{--rc:#8fd3ff;color:#bfe6ff!important;text-shadow:0 0 6px rgba(80,170,255,.6),0 1px 2px #000!important}
/* a gun's mod sockets on its card (21.10., js/fps/ashmods.js): a steel line, each socket an octagon, filled ones lit in the mod's rarity */
.ip .gsocks{margin:.5em 0 .3em;padding-top:.4em;border-top:1px solid rgba(255,255,255,.08)}
.ip .gsocks .gsh{font:600 .78em var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#9aa0a6;margin-bottom:.3em}
.ip .gsock{display:flex;align-items:center;gap:.55em;color:#7d8288;font-size:.92em;line-height:1.35;margin:.18em 0}
.ip .gsock i{flex:none;width:.95em;height:.95em;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#2a2d32;box-shadow:inset 0 0 0 2px #4a4f56}
.ip .gsock.on{color:#e6e8ea}.ip .gsock.on i{background:var(--rc,#ff7a2a);box-shadow:0 0 6px var(--rc,#ff7a2a)}
.ip .ln.gmod{color:#ffd9bf;font-weight:600;margin:.5em 0}
/* the sockets are slots to tap (01.11., js/fps/ashmods.js): on the floating card each a plate with its mod or a plus; the picking views in the compare screen: a list of rows */
.ip .gsock b{font-weight:600}.ip .gsock span{flex:1;min-width:0}.ip .gsock u{display:none;text-decoration:none}
#icard .ip .gsock.tap{cursor:pointer;padding:.38em .55em;margin:.3em 0;border:1px dashed rgba(216,140,96,.55);border-radius:3px;background:rgba(216,140,96,.07)}
#icard .ip .gsock.tap.on{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045)}
#icard .ip .gsock.tap:hover{background:rgba(216,140,96,.18)}
#icard .ip .gsock .gsgo{display:block;flex:none;font:700 1.3em/1 var(--f-display);color:#ee864a}
body.touch #icard .ip .gsock.tap{padding:.55em .6em}
html body #cmp#cmp.gm .col.gmcol{width:min(400px,46vw)!important;max-width:min(400px,46vw)!important;min-width:0}
#cmp.gm .gmcol .scroll{flex:1 1 auto;min-height:0}
html body #cmp#cmp.gm button.pri{color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
body.touch #cmp.gm .gmrow{min-height:calc(34px * var(--k));padding-top:calc(2px * var(--k));padding-bottom:calc(2px * var(--k))}body.touch #cmp.gm .gmrow img{width:calc(28px * var(--k));height:calc(28px * var(--k))}
#cmp.gm .gmlist{display:flex;flex-direction:column;gap:calc(5px * var(--k));padding:2px}
#cmp.gm .gmrow{display:flex;align-items:center;gap:calc(9px * var(--k));min-height:calc(42px * var(--k));padding:calc(4px * var(--k)) calc(8px * var(--k));box-sizing:border-box;cursor:pointer;border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--rc,#888);border-radius:3px;background:rgba(255,255,255,.04)}
#cmp.gm .gmrow:hover{background:rgba(238,134,74,.13)}
#cmp.gm .gmrow.sel{background:rgba(238,134,74,.2);box-shadow:inset 0 0 0 1px #f59f6e,0 0 10px rgba(245,159,110,.45)}
#cmp.gm .gmrow.dim{opacity:.45}
#cmp.gm .gmrow img{flex:none;width:calc(36px * var(--k));height:calc(36px * var(--k));object-fit:contain;pointer-events:none}
#cmp.gm .gmrow .gmt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#cmp.gm .gmrow .gmt b{font:600 calc(13px * var(--k))/1.2 var(--f-display);color:var(--rc,#ddd)}
#cmp.gm .gmrow .gmt small{font:calc(12px * var(--k))/1.25 var(--f-body);color:var(--bone)}
#cmp.gm .gmrow em{flex:none;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.06em;color:var(--bone-lo);text-align:right}
#cmp.gm .gmrow em b{color:var(--bone)}#cmp.gm .gmrow em b.up{color:#9be07f}#cmp.gm .gmrow em b.dn{color:#e07a64}
#cmp.gm .gminfo{margin-top:calc(8px * var(--k));font:calc(12px * var(--k)) var(--f-body);color:var(--bone)}#cmp.gm .gminfo small{font-size:inherit;color:var(--bone-lo)}#cmp.gm .gminfo.none{color:var(--bone-lo);font-style:italic}
#cmp.gm .ip .gsock.gmcur{outline:1px solid #f59f6e;outline-offset:2px;color:#f59f6e}
#cmp.gm .ip .gsock.gmcur.on{color:#e6e8ea}
.gmghost{position:fixed;left:0;top:0;width:52px;height:52px;z-index:70;pointer-events:none;opacity:.92;filter:drop-shadow(0 4px 8px #000)}.gmghost img{width:100%;height:100%;object-fit:contain}
#inv.gmdrag .cell:not(.gmfit),#inv.gmdrag .eq:not(.gmfit){opacity:.35}
#inv.gmdrag .gmfit{box-shadow:0 0 0 2px #eea24a,0 0 14px rgba(238,134,74,.65)!important}
#inv.gmdrag .gmhot{box-shadow:0 0 0 3px #f59f6e,0 0 20px rgba(245,159,110,.9)!important;opacity:1}
/* the trader's and the smith's windows (21.10., step 6): over the painting of Holloway Deep, darkened, not Kharos' bazaar and smithy; Celestine's crystal in every price */
html body #shop:not(.pets):not(.seyla)::before,html body #inv.forging::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;z-index:0!important;background:linear-gradient(180deg,rgba(8,9,11,.62),rgba(8,9,11,.82)),url("../assets/ui/cgart/load_deep.webp") center/cover no-repeat!important;-webkit-mask:none!important;mask:none!important;opacity:1!important}
html body #shop .pr i,html body #shop .sbtn i,html body #shop .shgold i,html body .gc,html body #icard .btns button .gc,html body #petp .gc{border-radius:0!important;background:url("../assets/icons/cg2/celestine.webp?v=1") center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 0 3px rgba(143,211,255,.6))!important;width:calc(13px * var(--k,1))!important;height:calc(13px * var(--k,1))!important}
html body #icard .btns.gmout{flex-wrap:wrap;gap:6px;margin-top:6px}html body #icard .btns.gmout button{flex:1 1 100%;font-size:12px!important;letter-spacing:.06em!important}
/* the trader's five kinds (the gun mods the fifth) share the column's height instead of running past its foot */
html body #shop:not(.smith):not(.pets):not(.seyla) .cats{grid-template-rows:none!important;grid-auto-rows:minmax(0,1fr)!important;gap:calc(5px * var(--k,1))!important}
html body #shop:not(.smith):not(.pets):not(.seyla) .cat{min-height:0!important;height:auto!important;padding-top:2px!important;padding-bottom:2px!important;margin:0!important}
html body #icard .btns.gmout .gmh{flex:1 1 100%;font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#9aa0a6;text-align:center}
html body #icard .btns.gmout button{white-space:normal!important;line-height:1.2!important;text-transform:none!important}
html body #icard .btns.gmout{display:flex!important;flex-wrap:wrap!important;justify-content:center!important}
html body #icard .btns.gmout button{flex:1 1 100%!important;width:100%!important;max-width:none!important;min-height:calc(36px * var(--k,1))!important;height:auto!important;padding:4px 14px!important;font:600 13px var(--f-display)!important}
html body #icard#icard .btns.gmout{display:grid!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;gap:6px!important}
html body #icard#icard .btns.gmout button{grid-column:1/-1!important;width:auto!important;min-width:0!important;letter-spacing:.04em!important;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden}
/* a short phone screen (812×330, Safari's bars on a 12 mini): the place's name under the map ran under the skill buttons — it goes; the banner names the place on arrival */
@media (max-height:350px){html body.touch #zone{display:none!important}}
/* a gun the hero's class cannot carry (js/fps/gunclass.js): its card's red line, its bag cell tinted red */
html body .ip .ln.gnouse{color:#ff6a5a!important;font-weight:700;letter-spacing:.02em}
html body #inv .cell.nouse{position:relative!important;box-shadow:inset 0 0 0 2px rgba(255,70,50,.7),inset 0 0 22px rgba(255,40,30,.5)!important}
html body #inv .cell.nouse img{filter:grayscale(1) brightness(.7) sepia(1) hue-rotate(-45deg) saturate(4)!important}
html body #inv .cell.nouse i.noway{position:absolute;inset:12%;border-radius:4px;pointer-events:none;background:linear-gradient(45deg,transparent 47%,rgba(255,70,50,.85) 48%,rgba(255,70,50,.85) 52%,transparent 53%),rgba(150,20,10,.28)}
html body #inv button[data-a=equip][data-no],html body .icard button[data-a=equip][data-no]{opacity:.38!important;filter:grayscale(1)!important}
/* the party (js/fps/ashui.js, 21.10.): each other hero's plate the hero plate's own art as 3-slice, 60 high, the portrait in its octagon cap with the level under it;
   in a party one's own plate shows in the bar layout too; who speaks glows ember; the bubble the dialogue box's plate (chamfer, ember top line and left bar, the panel's grain) */
body.hudbar.inparty:not(.touch) #tBars{display:block!important}
html body #ashParty{top:calc(88px + var(--st,0px))!important;left:calc(14px + var(--sl,0px))!important;gap:10px!important;cursor:pointer}
html body.touch #ashParty{top:calc(148px + var(--st,0px))!important;transform:scale(.8);transform-origin:left top}
html body #ashParty .apm.cgplate3{position:relative!important;box-sizing:border-box!important;width:max-content!important;height:60px!important;min-width:0!important;padding:15px 8px 0 0!important;background:none!important;border:0 solid transparent!important;border-width:0 18px 0 62px!important;border-image:url("../assets/ui/cgx/plate_player.webp") 0 118 0 420 fill / 0 18px 0 62px stretch!important;clip-path:none!important;box-shadow:none!important;transition:filter .25s}
#ashParty .cgplate3 .por{position:absolute;left:-54px;top:8px;width:42px;height:42px;background:center 22%/cover no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
#ashParty .cgplate3 .por b{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 4px;background:rgba(18,20,23,.92);font:700 10px/1.35 var(--f-display);color:#f0f2f4}
#ashParty .cgplate3 .nm{display:block;height:20px;line-height:20px;max-width:180px;font:700 13px/20px var(--f-display);letter-spacing:.06em;color:#e8eaec;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the members' life bars are the hero's own (#tLife, 142-144): a chamfered anthracite housing, the life in ten ember-red cells — they had been a solid bar (the user, 01.11.: 'durchgezogen vs. Segmente') */
#ashParty .cgplate3 .hp{position:relative;display:block;box-sizing:border-box;width:130px;height:6px;margin-top:4px;padding:1.5px;background:#4a5058;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)}
#ashParty .cgplate3 .hp::before{content:"";position:absolute;inset:1.5px;background:#121417;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 100%,0 100%)}
#ashParty .cgplate3 .hp u{position:relative;display:block;height:100%;background:linear-gradient(#ff8a3a,#c8301a 60%,#7a1408);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);box-shadow:0 0 6px rgba(255,90,30,.5);transition:width .3s}
#ashParty .apm.cgplate3.talk{filter:drop-shadow(0 0 6px rgba(255,122,42,.95)) drop-shadow(0 0 14px rgba(255,122,42,.55));animation:cgTalk 1.2s ease-in-out infinite alternate}
@keyframes cgTalk{from{filter:drop-shadow(0 0 4px rgba(255,122,42,.8)) drop-shadow(0 0 10px rgba(255,122,42,.35))}to{filter:drop-shadow(0 0 8px rgba(255,140,60,1)) drop-shadow(0 0 18px rgba(255,122,42,.6))}}
#ashParty .cgplate3 .cgsay,#ashToast{box-sizing:border-box;max-width:260px;width:max-content;padding:8px 12px 8px 14px;border:0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);
  background:linear-gradient(90deg,rgba(255,122,42,0),rgba(255,122,42,.95) 8%,rgba(255,122,42,.95) 60%,rgba(255,122,42,0)) left 10px top 0/calc(100% - 20px) 2px no-repeat,linear-gradient(#ff7a2a,#ff7a2a) left 0 top 10px/3px calc(100% - 20px) no-repeat,
  linear-gradient(180deg,rgba(40,43,48,.96),rgba(20,22,25,.97)),url("../assets/ui/cgx/panel_tex.webp") 0 0/256px;box-shadow:none;font:500 13px/1.35 'Barlow',sans-serif;color:#eef0f2;text-shadow:0 1px 2px #000}
html body #ashParty .cgplate3 .cgsay{position:absolute;left:calc(100% + 26px)!important;top:50%;transform:translateY(-50%);pointer-events:none;z-index:3;filter:none}
#ashParty .cgplate3 .cgsay[hidden]{display:none}
#ashParty .cgplate3 .cgsay.in{animation:cgSayIn .2s ease-out both}
#ashToast{text-align:center;max-width:min(420px,80vw)}
/* the bar (21.10.): the gun's key hidden under its rounds (the two were drawn over each other), a skill's charges a badge in its top right corner, clear of its key */
body.cgammo-on #skillsT .tbtn.main kbd{display:none!important}
html body #skillsT .tbtn .chg{left:auto!important;right:3px!important;top:3px!important;bottom:auto!important;transform:none!important;min-width:14px;height:14px;padding:0 2px;display:flex;align-items:center;justify-content:center;background:#ff7a2a;color:#fff!important;font:700 10px/1 var(--f-display)!important;text-shadow:none!important;clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
html body #skillsT .tbtn .chg:empty{display:none!important}
/* the hero choice's guns (js/fps/gunclass.js): a caption, then each gun the class may carry — its picture over its name, four to a row */
#mainmenu .mm-guns{width:100%;padding:calc(6px * var(--k)) 0 calc(2px * var(--k));border-top:1px solid rgba(91,98,105,.35)}
#mainmenu .mm-guns[hidden]{display:none}
#mainmenu .mm-guns h4{margin:0 0 calc(4px * var(--k));text-align:center;font:600 calc(10px * var(--k))/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#ff9a5a}
#mainmenu .mm-guns .mg{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(4px * var(--k)) calc(6px * var(--k))}
#mainmenu .mm-guns figure{margin:0;width:calc(54px * var(--k));display:flex;flex-direction:column;align-items:center}
#mainmenu .mm-guns img{width:calc(40px * var(--k));height:calc(40px * var(--k));object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
#mainmenu .mm-guns figcaption{font:500 calc(9px * var(--k))/1.15 'Barlow Semi Condensed','Barlow',sans-serif;color:#c8ccd0;text-align:center}
/* a phone's class panel has no room to spare: the guns smaller, four to a row */
html body.touch #mainmenu .mm-guns{padding:3px 0 0}
html body.touch #mainmenu .mm-guns h4{margin-bottom:1px;font-size:8px}
html body.touch #mainmenu .mm-guns .mg{gap:0 2px}
html body.touch #mainmenu .mm-guns figure{width:56px}
html body.touch #mainmenu .mm-guns img{width:24px;height:24px}
html body.touch #mainmenu .mm-guns figcaption{font-size:7.5px;white-space:nowrap}
/* the bar's keys (21.10.): each socket's key small inside its top left corner — the potion's too, a locked skill's dimmed — none hanging over the plate's edge */
html body.hudbar:not(.touch) #skillsT .tbtn kbd,html body.hudbar:not(.touch) #skillsT .tpot kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{display:block!important;position:absolute!important;left:5px!important;top:4px!important;bottom:auto!important;right:auto!important;transform:none!important;margin:0!important;min-width:0!important;padding:0 3px!important;height:13px!important;font:700 9px/13px var(--f-display)!important;color:#d8dce0!important;background:rgba(10,11,13,.82)!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);z-index:4;opacity:1!important;visibility:visible!important}
html body.hudbar:not(.touch) #skillsT .tbtn.locked kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{color:#7a8088!important}
html body.hudbar:not(.touch) #skillsT .tbtn.main kbd{display:none!important}
#inv .doll .eq.noblade{display:none!important}
/* the knight's blade drawn (js/fps/ashblade.js): no rounds on the socket then; on a phone the swap chip on the fire button's top left, showing what a tap takes in hand */
body.bladedrawn #skillsT .tbtn.main .cgammo{display:none!important}
html body #skillsT .tbtn.main .bswap{position:absolute;left:-2px;top:-2px;width:30px;height:30px;z-index:6;border-radius:50%;background:#14161a center/72% no-repeat;box-shadow:0 0 0 2px #50565e,0 0 0 3px #0a0b0c,0 2px 6px rgba(0,0,0,.7);pointer-events:auto}
html body #skillsT .tbtn.main .bswap::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#ff7a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9h12l-3-3M19 15H7l3 3'/%3E%3C/svg%3E") center/80% no-repeat}
/* the party's states (js/fps/ashui.js): offline greyed with its minute counting down, in the menu or elsewhere a small line under the life */
#ashParty .cgplate3 .st{display:block;font:600 10px/1.2 var(--f-display);font-style:normal;letter-spacing:.04em;color:#ffb070;margin-top:2px;white-space:nowrap}
#ashParty .cgplate3 .st[hidden]{display:none}
#ashParty .apm.cgplate3.off{filter:grayscale(1) brightness(.6)!important;animation:none!important}
#ashParty .apm.cgplate3.off .st{color:#ff6a50}
/* the trade's table: the inventory's cells */
#ashTrade .trbox{max-width:min(860px,94vw);width:max-content;max-height:92vh;overflow:auto}
#ashTrade .trcols{display:flex;gap:18px;align-items:flex-start;text-align:left}
#ashTrade .trcols>div{flex:1;min-width:0}
#ashTrade h4{margin:8px 0 6px;font:600 11px/1.3 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#ff9a5a}
#ashTrade .trgrid{display:grid;grid-template-columns:repeat(6,52px);gap:6px}
#ashTrade .trgrid.bag{max-height:172px;overflow-y:auto}
#ashTrade .cell{position:relative;width:52px;height:52px;box-sizing:border-box;background:url("../assets/ui/cgx/bag_cell.webp") center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}
#ashTrade .cell img{width:78%;height:78%;object-fit:contain;pointer-events:none}
#ashTrade .cell.r-magic{background-color:rgba(60,110,220,.22)}#ashTrade .cell.r-rare{background-color:rgba(220,190,60,.2)}#ashTrade .cell.r-unique{background-color:rgba(230,120,40,.24)}
#ashTrade .cell.on{opacity:.35}#ashTrade .cell.sel{box-shadow:0 0 0 2px #ff7a2a}
#ashTrade .trst{margin:8px 0;font:500 12px/1.3 'Barlow',sans-serif;color:#c8ccd0}
#ashTrade .trcard .ip{position:static!important;max-width:300px;transform:none!important}
html body.touch #ashTrade .trgrid{grid-template-columns:repeat(6,40px);gap:4px}html body.touch #ashTrade .cell{width:40px;height:40px}html body.touch #ashTrade .trgrid.bag{max-height:96px}
html body.touch #ashTrade .trcard .ip{max-width:240px;font-size:11px}
/* the ultimate's socket an octagon like the others (it was Kharos' round one), its key a chip like theirs */
html body.hudbar:not(.touch) #skillsT .ultsock{border-radius:0!important;box-shadow:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%230e1013'/%3E%3C/svg%3E") center/100% 100% no-repeat!important}
html body.hudbar:not(.touch) #skillsT .ultsock::after{left:5px!important;top:4px!important;padding:0 3px;height:13px;font:700 9px/13px var(--f-display)!important;color:#7a8088!important;background:rgba(10,11,13,.82);text-shadow:none!important;clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
html body.hudbar:not(.touch) #skillsT .tult{border-radius:0!important;clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)!important}

/* the running mission (js/fps/ashmisslog.js): turquoise as Kharos' events — the tracker's plate with its orange turned, the log's entry, its menu on the panel's flourished plate */
html body.ashzone #quest.mq{filter:hue-rotate(152deg) saturate(1.15)}
#qlog h3.mis{color:#5ff0e0}
#qlog .qitem.mission.sel{background:rgba(95,240,224,.07);border-color:rgba(95,240,224,.35)}
#qlog .qitem.mission .qd{background:#5ff0e0;box-shadow:0 0 6px rgba(95,240,224,.6)}
#qlog .qitem.mission .qhx b{color:#5ff0e0}
#qlog .qitem.mission .qf{color:#5ff0e0;border-color:rgba(95,240,224,.55)}
#qlog .qitem.mission .qwhere{border-left-color:#5ff0e0;background:rgba(95,240,224,.08)}
#qlog .qitem.mission .qnav svg{stroke:#5ff0e0}
#qlog .qitem.mission .qnav.qmore svg{fill:#5ff0e0;stroke:none}
#qlog .qitem.mission .qnav + .qnav{margin-left:2px}
#qlog .qitem.mission .qx li.now::before{background:#5ff0e0}
#qlog .qitem.mission .qx li.next{color:var(--bone-lo,#8d9298)}
#qlog .qitem.mission .mroute{margin:2px 0 4px;font:calc(9.5px * var(--k,1))/1.35 var(--f-display);letter-spacing:.06em;color:#9fd9d2}
#qlog .qitem.mission .mroute b{color:#d9fffa;font-weight:600}
body.touch #qlog .qitem.mission.sel{border-left-color:#5ff0e0!important;background:rgba(95,240,224,.07)}
body.touch #qlog .qitem.mission .mroute{font-size:11.5px}
#ashMQ{position:fixed;z-index:60;display:none;box-sizing:border-box;min-width:236px;padding:30px 28px 33px;isolation:isolate;pointer-events:auto}
#ashMQ.on{display:block}
#ashMQ::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:40px 27px 44px 27px;border-image:url("../assets/ui/cgx/panel_orn.webp") 222.5 150 245 150 fill / 40px 27px 44px 27px stretch;filter:drop-shadow(0 8px 18px rgba(0,0,0,.75));pointer-events:none}
#ashMQ::after{content:"";position:absolute;left:50%;top:-5px;width:22px;height:26px;margin-left:-11px;background:url("../assets/ui/cgx/panel_crest.webp") center/contain no-repeat;pointer-events:none}
#ashMQ h4{margin:0 0 2px;text-align:center;font:600 12px/1.3 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:#5ff0e0;text-shadow:0 0 8px rgba(95,240,224,.35),0 1px 2px #000}
#ashMQ p{margin:6px auto 0;max-width:210px;text-align:center;font:400 12.5px/1.4 var(--f-body);color:#d9dcdf}
#ashMQ .mqb{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:12px}
html body #ashMQ button{--plate:dark;box-sizing:border-box;width:180px;height:36px;padding:0 16px;border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;font:600 11.5px/1 var(--f-display)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#ddd0b6!important;text-shadow:0 1px 2px #000!important;cursor:pointer}
html body #ashMQ button.pri{--plate:gold;color:#ffd9bf!important;text-shadow:0 0 6px rgba(255,122,42,.55),0 1px 2px #000!important}
html body #ashMQ button.neg{color:#ffa489!important}
/* the experience bar on the hero's plate: laid over the painted orange stripe at its foot (art 350–787 × 346–356 of 900 × 402, the plate 72 high:
   62 px down, from 12.5 px inside the left slice to 0.5 px into the right one) — the stripe had read as a full bar that never moved (the user 23.10.:
   'bei 99 % stecken geblieben'); its track dark, its fill the stripe's own orange */
html body #tBars #tXp{display:block!important;position:absolute!important;left:-12.5px!important;right:-1.5px!important;top:61.6px!important;height:2.6px!important;margin:0!important;padding:0!important;background:#16120e!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.8)!important;clip-path:polygon(1.6px 0,100% 0,calc(100% - 1.6px) 100%,0 100%);outline:0!important;border:0!important;width:auto!important}
html body #tBars #tXp div{height:100%!important;background:linear-gradient(180deg,#ffb27a,#ff7a2a 55%,#c8521a)!important;box-shadow:0 0 4px rgba(255,122,42,.7)!important;transition:width .4s ease-out}
/* the quest plate on a desktop grows with the desktop's HUD (--hs: the window's height): it had stood at the phone's 256 × 60 px with 10 px
   text on any screen — 'viel zu klein, man kann gar nix lesen' (the user 23.10.); the whole plate scaled (art and words keep their proportion),
   from its top right corner where it hangs (its pulse swells from there too) */
html body.ashzone:not(.touch) #quest#quest{scale:calc(var(--hs,1) * 1.3);transform-origin:100% 0!important}
/* the desktop dock's top half (the user 23.10.: 'die Inventarplätze oben vergrößern … die Panels oben am Char'): the worn slots and the figure sized by InventoryPanel.layout
   (--eq, --fig-h, --cg-*), the slots a column from under the header to the frame's foot, the figure between them; the stats button a small plate tab in the header's level line.
   The phone is untouched (body.touch never matches) */
html body.hudbar:not(.touch) #inv.open .doll{padding:var(--cg-dt,48px) 0 var(--cg-db,8px)!important;gap:var(--cg-cg,0px)!important;align-items:flex-start!important;justify-content:center!important}
html body.hudbar:not(.touch) #inv.open .doll :is(.sec,.pri){gap:var(--cg-gv,8px)!important;margin:0!important}
html body.hudbar:not(.touch) #inv.open .doll .fig{height:var(--fig-h)!important;width:var(--cg-fw)!important;margin:0!important;align-self:flex-start}
html body.hudbar:not(.touch) #inv.open .doll .fig::before{bottom:-3%!important;height:9%!important}
html body.hudbar:not(.touch) #inv.open :is(.eq) > img{width:56%!important;height:56%!important}
html body.hudbar:not(.touch) #inv.open .ihead .statsbtn{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none;translate:none!important;display:inline-block;vertical-align:middle;margin:0 0 0 calc(10px * var(--k));border-width:calc(6px * var(--k)) calc(8px * var(--k))!important;padding:0 calc(4px * var(--k))!important;font-size:calc(8px * var(--k))!important;line-height:1.2;letter-spacing:.18em}
html body.hudbar:not(.touch) #inv.open .ihead .statsbtn:active{transform:scale(.96)}
/* the foe's element state under the target plate (js/fps/ashelem.js): its own line outside the art, centred, the plate keeps its size */
#ashTarget .tst{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;display:flex;gap:10px;white-space:nowrap;pointer-events:none}
#ashTarget .tst b{font:700 clamp(9px,1.05vw,12px)/1 var(--f-display,'Arial Narrow',sans-serif);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 6px currentColor,0 1px 2px #000,0 0 2px #000}
/* the missions' mechanics (js/fps/ashmech.js): a countdown on the dialogue's plate (9-slice) and a held point's life on the foe's plate (3-slice, its
   emblem in the octagon) at the top, under the area banner while that shows; the foe's own plate below them; the hold's progress on the dialogue's plate */
#ashMech{position:fixed;left:50%;top:max(calc(8px + var(--st,0px)),var(--tgtop,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:21;transition:top .25s}
#ashMech .mt,#ashMech .mh,#ashMechHold{display:none}
#ashMech .mt.on{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-width:118px;padding:3px 16px 4px;border-style:solid;border-width:10px 10px 11px 10px;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / 10px 10px 11px 10px stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
#ashMech .mt .mk{font:600 9px/1.1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#9aa0a8;white-space:nowrap}
#ashMech .mt .mn{font:700 24px/1 var(--f-display);letter-spacing:.06em;color:#eef0f2;text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums;margin-top:3px}
#ashMech .mt.warn .mn{color:#ffb050}
#ashMech .mt.crit .mn{color:#ff5a3a;text-shadow:0 0 8px rgba(255,70,30,.7),0 1px 3px #000;animation:ashMechBeat 1s ease-out infinite}
#ashMech .mt.pulse{animation:ashMechPulse .6s ease-out}
@keyframes ashMechBeat{0%{transform:scale(1.14)}40%{transform:scale(1)}}
@keyframes ashMechPulse{0%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(255,90,30,.8))}100%{transform:scale(1)}}
#ashMech .mh.on{display:block;position:relative;width:max-content;height:54px;box-sizing:border-box;border-style:solid;border-width:0 15px 0 54px;border-image:url("../assets/ui/cgx/plate_foe.webp") 0 104 0 378 fill / 0 15px 0 54px stretch;padding:16px 6px 0 0}
#ashMech .mh .mb{position:absolute;left:-49px;top:5px;width:41px;height:44px;background:url("../assets/icons/interact/fire.webp") center/50% no-repeat;filter:drop-shadow(0 0 4px rgba(255,120,40,.6))}
#ashMech .mh .mk{display:block;height:15px;font:700 11px/15px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#f0f2f4;text-shadow:0 1px 3px #000;white-space:nowrap}
#ashMech .mh .tb,#ashMechHold .tb{display:block;position:relative;min-width:150px;height:5px;margin-top:4px;background:#1a0a06;border:1px solid #5a2410;border-radius:2px;overflow:hidden}
#ashMech .mh .tb>i,#ashMechHold .tb>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#ffb050,#c0400e)}
#ashMech .mh .tb>i{transition:width .15s linear}
#ashMech .mh.hit .tb>i{background:linear-gradient(180deg,#ff6a40,#a0180e)}
#ashMech .mh.hit .mb{filter:drop-shadow(0 0 7px rgba(255,50,20,.95))}
html body.ashzone.mechon #ashTarget,html body.ashzone.mechon #ashTarget.on{top:calc(max(calc(8px + var(--st,0px)),var(--tgtop,0px)) + var(--mechH,0px) + 8px)!important}
#ashMechHold{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);flex-direction:column;align-items:center;box-sizing:border-box;min-width:170px;padding:2px 14px 4px;border-style:solid;border-width:10px 10px 11px 10px;border-image:url("../assets/ui/cgx/dialog_plate.webp") 108 108 118 108 fill / 10px 10px 11px 10px stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));pointer-events:none;z-index:21}
#ashMechHold.on{display:flex}
#ashMechHold .mk{font:600 10px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#eef0f2;text-shadow:0 1px 2px #000;white-space:nowrap}
body.touch #ashMechHold{bottom:auto;top:calc(50% + 66px)}
/* the traders' signs over the head (js/fps/ashtrader.js): over the name plate, outside its box so it takes no touch, a little larger near (--svk) */
#labels .npc-label .svc-ico{position:absolute;left:50%;bottom:calc(100% - 4px);width:calc(34px * var(--svk,1));height:calc(34px * var(--svk,1));transform:translateX(-50%);background:center/contain no-repeat;pointer-events:none!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
body:not(.touch) #labels .npc-label .svc-ico{width:calc(40px * var(--svk,1));height:calc(40px * var(--svk,1))}
/* the talk's plate on a phone (the user, 25.10.: 'Speech Bubble ist viel zu breit auf dem Handy und nimmt den ganzen Platz'): under 58 % of the width, low on the screen's foot, the words in two or three lines */
html body.touch #dialogue#dialogue,html body.touch.cine #dialogue#dialogue{width:min(500px,calc(58 * var(--vw)))!important;bottom:calc(12px + var(--sb,0px))!important;padding:7px 56px 7px 26px!important}
html body.touch #dialogue#dialogue .say{font-size:12px!important;line-height:1.3!important;min-height:0!important}
html body.touch #dialogue#dialogue .who{font-size:9.5px!important;margin-bottom:1px!important}
/* Settings → Brightness, Black level, Contrast (26.10.): a slider of the settings' own plates — the groove the options' tile (9-slice), the part up to the value and the knob the chosen option's gold plate; the knob's centre runs from one half-knob in to one half-knob before the end, so it never leaves the groove */
#help .pslide{--kh:calc(12px * var(--k));position:relative;flex:1 1 0;min-width:calc(90px * var(--k));height:calc(30px * var(--k));cursor:pointer;touch-action:pan-y;outline:0;-webkit-tap-highlight-color:transparent}
#help .pslide::before,#help .pslide .pfill{content:"";position:absolute;left:0;top:50%;height:calc(12px * var(--k));transform:translateY(-50%);box-sizing:border-box;border:2px solid transparent;pointer-events:none}
#help .pslide::before{right:0;border-image:var(--o-tile) 11 fill / calc(6px * var(--k)) / 0 stretch;opacity:.9}
#help .pslide .pfill{width:calc(var(--kh) + (100% - 2 * var(--kh)) * var(--p, .5));border-image:var(--o-plate-gold) 11 fill / calc(6px * var(--k)) / 0 stretch;opacity:.75}
#help .pslide .pknob{position:absolute;top:50%;left:calc(var(--kh) + (100% - 2 * var(--kh)) * var(--p, .5));width:calc(2 * var(--kh));height:calc(2 * var(--kh));transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / calc(8px * var(--k)) / 0 stretch;filter:drop-shadow(0 0 5px rgba(238,162,74,.4));pointer-events:none}
#help .pslide:focus-visible .pknob{filter:drop-shadow(0 0 8px rgba(255,190,110,.8))}
#help .picrow .pval{flex:none;width:calc(44px * var(--k));text-align:right;font:600 calc(11px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.06em;color:var(--bone);font-variant-numeric:tabular-nums}
body.touch #help .pslide{height:40px}

/* the volume sliders (Settings → Music, Effects): an ember track filled to the value, a small bronze-edged thumb; the value beside it */
#help .hrow .volr{flex:1 1 0;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:100%}
#help .hrow .volr::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ember) 0 var(--p),rgba(255,255,255,.12) var(--p) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#help .hrow .volr::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ember) 0 var(--p),rgba(255,255,255,.12) var(--p) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#help .hrow .volr::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd2a8,#c4602a 60%,#5a2410);box-shadow:0 0 0 2px #2a1a10,0 0 8px rgba(255,90,31,.45)}
#help .hrow .volr::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd2a8,#c4602a 60%,#5a2410);box-shadow:0 0 0 2px #2a1a10,0 0 8px rgba(255,90,31,.45)}
body.touch #help .hrow .volr{height:40px}
body.touch #help .hrow .volr::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10px}
#help .hrow .volv{flex:none;width:3.4em;text-align:right;font:calc(12px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone);font-weight:normal}
/* each member's colour (js/net/ashnet.js ashMateCol): his name on his plate, a ring round his portrait, his name over his head; the place line no longer cut off — the plate grows for it */
html body #ashParty .cgplate3 .nm{color:var(--mate,#e8eaec)!important}
#ashParty .cgplate3 .por{box-shadow:0 0 0 2px var(--mate,transparent),0 0 8px color-mix(in srgb,var(--mate,transparent) 60%,transparent)}
html body #ashParty .apm.cgplate3.away,html body #ashParty .apm.cgplate3.off{height:74px!important}
#ashParty .cgplate3 .st{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.npc-label.ashpeer.mate span{color:var(--mate)!important}
.ash-edge i{border-left-color:var(--mate,#5fd8ff)!important}
.ash-edge b{color:var(--mate,#9fe6ff)!important}
/* the crest on every panel's top (assets/ui/cgx/panel_crest.webp): the picture is a square cut from a frame, its own ground and an orange line of its own at another
   height than the frame's — it showed as a dark box with a stray line (the user, 02.11.: 'der Schnörkel sieht fehlplatziert aus'); only its diamond is shown now */
#ashQC::after,#ashTerm .atp::after,#ashAsk .aqp::after,#ashJS .jsp::after,#ashRelq .rqp::after,#ashMQ::after,html body #mainmenu .mm-info::after{clip-path:polygon(50% 4%,85% 40%,50% 97%,15% 40%)}
body.ashzone #gmenu [data-go="players"]{--cgic:url("../assets/icons/cg2/talk.webp?v=5")}body.ashzone #gmenu [data-go="party"]{--cgic:url("../assets/icons/cg2/chat.webp?v=5")}
/* four tabs in the quick panel (Quick, Own, Party, Players): narrower letters so the last stays clear of the close button */
html body #ashQC .qct.four button:not(.x){font-size:10px!important;letter-spacing:.06em!important;padding:0 4px!important}
/* the quick panel's close as everywhere else (the bag, the Reliquary): the square plate, the painted sign at half its size (the user, 02.11.: it had its own round one) */
html body #ashQC .qct button.x{position:relative;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important;width:36px;height:36px}
html body #ashQC .qct button.x svg{display:none}
html body #ashQC .qct button.x::after{content:"";position:absolute;inset:25%;background:url("../assets/icons/cg2/close.webp?v=5") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
/* a member's portrait on a dark ground: a hooded figure's picture is cut out, and the game had shown through it (the user, 02.11.) */
#ashParty .cgplate3 .por{background-color:#15171a}
/* a phone: the members in one row of small plates under one's own bar — portrait, name, life — so a party of four leaves the stick's corner free (the user, 02.11.:
   'mit 4 Spielern würde man den Steuer-Button nicht mehr treffen'); where each is stays in the party panel */
html body.touch #ashParty{flex-direction:row!important;align-items:flex-start;gap:8px!important;top:calc(118px + var(--st,0px))!important;transform:none!important}
html body.touch #ashParty .apm.cgplate3{width:58px!important;height:auto!important;padding:0!important;border-width:0!important;border-image:none!important;display:flex;flex-direction:column;align-items:center;gap:2px}
html body.touch #ashParty .apm.cgplate3.away,html body.touch #ashParty .apm.cgplate3.off{height:auto!important}
html body.touch #ashParty .cgplate3 .por{position:relative!important;left:0!important;top:0!important;width:40px!important;height:40px!important;box-shadow:0 0 0 2px var(--mate,#50565e),0 0 8px color-mix(in srgb,var(--mate,transparent) 60%,transparent)}
html body.touch #ashParty .cgplate3 .por::after{display:none}
html body.touch #ashParty .cgplate3 .nm{height:auto!important;line-height:1.1!important;max-width:58px!important;font-size:9.5px!important;text-align:center}
html body.touch #ashParty .cgplate3 .hp{width:44px!important;height:5px!important;margin-top:0!important}
html body.touch #ashParty .cgplate3 .st{display:none!important}
html body.touch #ashParty .cgplate3 .cgsay{left:0!important;top:calc(100% + 6px)!important;transform:none!important;max-width:200px}
/* the leader's crown (assets/icons/cg2/crown.webp): over his portrait in the party frame, before his name on his tag and in the party tab; the tag's 'out with …' line */
#ashParty .apm.lead .nm::before{content:"";display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
html body.touch #ashParty .apm.lead .nm::before{width:11px;height:11px;margin-right:2px}
.npc-label.ashpeer.lead > span::before{content:"";display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat}
.npc-label.ashpeer .ptag{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:1px;font:500 10px/1.2 'Barlow',sans-serif;font-style:normal;color:#c9d3db;white-space:nowrap}
.npc-label.ashpeer .ptag[hidden]{display:none}
.npc-label.ashpeer .ptag i{flex:none;width:13px;height:13px;background:center/contain no-repeat}
.npc-label.ashpeer .ptag i.cr{background-image:url("../assets/icons/cg2/crown.webp")}
.npc-label.ashpeer .ptag i.pt{background-image:url("../assets/icons/cg2/chat.webp?v=5")}
#ashQC .qccr{display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;background:url("../assets/icons/cg2/crown.webp") center/contain no-repeat}
html body.touch #ashChat{display:none!important}
/* the crown readable: larger, lit warm (dark iron on the dark plates had all but vanished) */
#ashParty .apm.lead .nm::before,.npc-label.ashpeer.lead > span::before,.npc-label.ashpeer .ptag i.cr,#ashQC .qccr{width:18px!important;height:18px!important;filter:brightness(1.6) drop-shadow(0 0 3px rgba(255,140,60,.95)) drop-shadow(0 1px 1px #000)!important}
/* a phone: the members' tiles right under one's own plate, each in the iron slot's frame (the user, 02.11.: 'mehr nach oben unter das Panel des eigenen Spielers und wenigstens den Rahmen drum') */
html body.touch #ashParty{top:calc(66px + var(--st,0px))!important;gap:6px!important}
html body.touch #ashParty .apm.cgplate3{box-sizing:border-box!important;width:64px!important;padding:6px 4px 5px!important;background:url("../assets/ui/cgx/eq_slot.webp") center/100% 100% no-repeat!important}
html body.touch #ashParty .apm.lead .nm::before{width:12px!important;height:12px!important}
/* (clear of one's own plate, a little smaller — the user, 02.11.) */
html body.touch #ashParty{top:calc(84px + var(--st,0px))!important;gap:5px!important}
html body.touch #ashParty .apm.cgplate3{width:54px!important;padding:5px 3px 4px!important}
html body.touch #ashParty .cgplate3 .por{width:34px!important;height:34px!important}
html body.touch #ashParty .cgplate3 .nm{font-size:8.5px!important;max-width:50px!important}
html body.touch #ashParty .cgplate3 .hp{width:38px!important;height:4px!important}
/* the ultimate charging (js/fps/ashult.js): shown from level 10, its icon dim, an ember fill rising with the charge */
html body .tult.charging{display:block!important;animation:none!important}
html body .tult.charging .ic{filter:grayscale(.85) brightness(.5)}
html body .tult.charging::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(255,138,58,.42) calc(var(--uc,0) * 100%),rgba(255,138,58,0) calc(var(--uc,0) * 100%));border-radius:50%}
html body.hudbar:not(.touch) #skillsT .tult.charging::after{border-radius:0;clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)}
/* the ultimate's button on a phone as Kharos draws it, full only (the user, 03.11.: 'der Button war visuell prägnanter — schau es dir genau bei Kharos ab'): game.css' own blazing look kept */
/* the phone's fire button framed by the ultimate's charge (js/fps/ashult.js): an ember line round its octagon, drawn as hits charge it, glowing; whole and pulsing while it burns */
html body.touch #skillsT .tbtn.main .ultframe{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;overflow:visible;z-index:3}
html body.touch #skillsT .tbtn.main .ultframe polygon{fill:none;stroke:#ff8a3a;stroke-width:3.2;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(255,138,58,.95)) drop-shadow(0 0 7px rgba(255,100,30,.6));transition:stroke-dashoffset .2s}
html body.touch #skillsT .tbtn.main .ultframe.off{display:none}
html body.touch #skillsT .tbtn.main .ultframe.full polygon,html body.touch #skillsT .tbtn.main .ultframe.burn polygon{stroke:#ffb060;animation:ultframe 0.9s ease-in-out infinite}
@keyframes ultframe{50%{stroke:#ffe0a0;filter:drop-shadow(0 0 5px rgba(255,190,90,1)) drop-shadow(0 0 12px rgba(255,120,40,.8))}}
/* the ultimate's button on a phone as Kharos' was — ablaze, a turning ring of light, a pulse going out — only its frame an octagon (the user, 03.11.: 'warum Ultimate nicht so
   wie sie war, nur mit eckigem Rahmen'); 64 px, its own place low beside the jump button (js/fps/ashult.js) */
@property --ua{syntax:'<angle>';inherits:false;initial-value:0deg}
html body.touch .tult{width:64px!important;height:64px!important;text-align:left;filter:drop-shadow(0 0 8px rgba(140,200,255,.85)) drop-shadow(0 0 20px rgba(90,150,255,.45));animation:ultblazeO .9s ease-in-out infinite!important}
html body.touch .tult .ic{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;overflow:hidden!important;background:#cfeaff;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
html body.touch .tult .ic::before,html body.touch .tult .ic::after{display:none!important}
html body.touch .tult .ic canvas{position:absolute;inset:3px;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important;border-radius:0!important;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
html body.touch .tult::before{content:"";position:absolute;inset:-10px;z-index:-1;pointer-events:none;background:conic-gradient(from var(--ua),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%);
  clip-path:polygon(evenodd,30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%,30% 0,32% 7%,68% 7%,93% 32%,93% 68%,68% 93%,32% 93%,7% 68%,7% 32%,32% 7%);animation:ultspinO 1.6s linear infinite}
html body.touch .tult::after{content:"";position:absolute;inset:-4px;pointer-events:none;background:rgba(190,230,255,.75);clip-path:polygon(evenodd,30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%,30% 0,31% 3%,69% 3%,97% 31%,97% 69%,69% 97%,31% 97%,3% 69%,3% 31%,31% 3%);animation:ultringO 1.2s ease-out infinite}
@keyframes ultblazeO{0%,100%{filter:drop-shadow(0 0 8px rgba(140,200,255,.8)) drop-shadow(0 0 18px rgba(90,150,255,.4));transform:scale(1)}50%{filter:drop-shadow(0 0 13px rgba(170,220,255,1)) drop-shadow(0 0 30px rgba(100,160,255,.6));transform:scale(1.06)}}
@keyframes ultspinO{to{--ua:360deg}}
@keyframes ultringO{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
html body.touch .tult .ic canvas{padding:11px;box-sizing:border-box;background:radial-gradient(circle at 50% 45%,#232833,#08090c 78%)} /* (the icon on a dark face inside the light frame, kept off the rim: memory round-button-safe-area) */
/* the bar's keys readable (the user, 03.11.: 'warum stehen keine Tasten in der Action-Bar?' — 9 px grey chips): 11 px, bright; the ultimate's socket says B (it had
   inherited the old bar's 'F' or nothing), over its button too */
html body.hudbar:not(.touch) #skillsT .tbtn kbd,html body.hudbar:not(.touch) #skillsT .tpot kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{height:15px!important;font:700 11px/15px var(--f-display)!important;padding:0 4px!important;color:#f2f4f6!important}
html body.hudbar:not(.touch) #skillsT .tbtn.locked kbd,html body.hudbar:not(.touch) #skillsT .hgslot kbd{color:#a8aeb6!important}
html body.hudbar:not(.touch) #skillsT .ultsock::after{display:none!important} /* (the B rides on the ultimate's own button, shown from level 10: js/fps/ashult.js) */
html body.hudbar:not(.touch) #skillsT .tult kbd{display:block!important;position:absolute!important;left:5px!important;top:4px!important;bottom:auto!important;right:auto!important;transform:none!important;margin:0!important;min-width:0!important;padding:0 4px!important;height:15px!important;font:700 11px/15px var(--f-display)!important;color:#f2f4f6!important;background:rgba(10,11,13,.82)!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:4}
/* the chest's window in the desktop's side drawer (js/fps/ashhub.js, Kharos' js/story/stash.js): its tabs I–V left of the grid take room — the grid narrower by them so
   both stand in the drawer, and its long heading wraps instead of running off the screen */
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{width:calc(var(--dw) - 116px - 64px)!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell{justify-content:center!important;column-gap:14px!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell>h3{white-space:normal!important;text-align:center;line-height:1.4}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{align-self:start!important}
/* several at once (js/fps/ashbag.js): the sell-all signs as words, the picks marked, the trader's / chest's row, the bag's bar, the chest's window on the left */
html body #shop .salls .slab{display:none!important}
html body #shop .salls .sall{width:auto!important;height:auto!important;min-height:calc(30px * var(--k));padding:0 calc(12px * var(--k))!important;font:600 calc(11px * var(--k)) var(--f-display)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--rc,#e8e2d4)!important;white-space:nowrap}
html body #shop .salls .sall span{color:var(--rc,#e8e2d4)}
html body #shop .salls .sall img{display:none!important}
html body #shop .shsell .mrow{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:calc(8px * var(--k));margin-top:calc(10px * var(--k));align-items:center}
html body #shop .mrow button,html body #inv .mbar button{min-height:calc(30px * var(--k));padding:0 calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
html body #shop .mrow button.pri,html body #inv .mbar button.pri{border-image-source:var(--o-fire);color:#241304}
html body #shop .mrow button.on{color:#ee864a}
html body #shop .mrow button:disabled,html body #inv .mbar button:disabled{opacity:.45;cursor:default}
html body #inv .mbar button.warn{color:#ff7a5a}
html body #shop .sgrid [data-i].msel,html body #inv .bag .cell.msel{outline:2px solid #ee864a;outline-offset:-3px;box-shadow:inset 0 0 14px rgba(238,134,74,.45)}
html body #shop .sgrid [data-i].msel::after,html body #inv .bag .cell.msel::after{content:"✓";position:absolute;right:3px;top:1px;font:700 12px/1 var(--f-display);color:#ffb070;text-shadow:0 1px 2px #000;pointer-events:none}
html body #shop .sgrid [data-i],html body #inv .bag .cell{position:relative}
html body #inv .mbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
html body #inv .mbar[hidden]{display:none!important}
html body #inv .mbar .mn{font:600 11px var(--f-display);letter-spacing:.1em;color:#c9c2b4;margin-right:4px;text-transform:uppercase}
html body #inv .itabs .mtab svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

html body.hudbar:not(.touch) #shop.open.stashv .shsell{left:0!important;right:auto!important;box-shadow:10px 0 34px rgba(0,0,0,.65),inset -1px 0 0 rgba(212,129,81,.18)!important}
/* the drawer's grids bigger (the user, 03.11.: 'weg mit dem Text … lieber weniger Columns, dafür größer'): no heading over them, four columns of big slots, the sell-all
   words in a row under the grid */
html body.hudbar:not(.touch) #shop.open .shsell>h3{display:none!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid{width:calc(var(--dw) - 36px)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .sgrid{width:calc(var(--dw) - 36px - 62px)!important}
html body.hudbar:not(.touch) #shop.open .sgrid [data-i]{width:auto!important;height:auto!important;aspect-ratio:1}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{grid-column:1 / -1!important;grid-row:3!important;flex-wrap:wrap!important;justify-content:flex-start!important;margin-top:12px!important}
html body.hudbar:not(.touch) #shop.open .shsell .mrow{grid-row:4}
html body.hudbar:not(.touch) #shop.open.stashv .shsell .mrow{grid-row:3}
html body.hudbar:not(.touch) #shop.open .shsell{align-content:start!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid{grid-auto-rows:auto!important;height:auto!important;max-height:none!important}
html body.hudbar:not(.touch) #shop.open .shsell .sgrid [data-i]{height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{flex-direction:row!important;display:flex!important;gap:8px!important}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls,html body.hudbar:not(.touch) #shop.open .shsell .mrow{width:calc(var(--dw) - 36px)!important;max-width:none!important;box-sizing:border-box}
html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}html body.hudbar:not(.touch) #shop.open:not(.stashv) .shsell .salls .sall{width:100%!important;justify-content:center!important;padding:0 4px!important;font-size:10px!important;letter-spacing:.04em!important}
/* the bag's bar on a phone: compact, laid over the grid's foot so all its buttons show (two lines had run out of the panel) */
html body.touch #inv .bagwrap{position:relative}
html body.touch #inv .mbar{position:absolute;left:0;right:0;bottom:0;z-index:6;margin:0;padding:6px 6px 4px;gap:4px;justify-content:center;background:linear-gradient(rgba(10,11,13,0),rgba(10,11,13,.94) 22%)}
html body.touch #inv .mbar button{min-height:26px;padding:0 8px;font-size:10px;letter-spacing:.04em}
html body.touch #inv .mbar .mn{font-size:10px;width:100%;text-align:center;margin:0}
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:2px solid #ee864a!important;outline-offset:-3px!important;box-shadow:inset 0 0 16px rgba(238,134,74,.55)!important}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:"✓"!important;display:block!important;position:absolute!important;right:4px!important;top:2px!important;left:auto!important;bottom:auto!important;width:auto!important;height:auto!important;background:none!important;font:700 13px/1 var(--f-display)!important;color:#ffb070!important;text-shadow:0 1px 2px #000!important;z-index:5!important;opacity:1!important}

html body #inv .mpick{min-height:28px;padding:0 12px;margin-right:auto;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 11px var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
html body #inv .mpick[hidden]{display:none!important}
/* the phone's trader / chest row: under the grid, in the flow (it had floated over the chest's tabs) */
html body.touch #shop .shsell .mrow{position:static!important;grid-column:1 / -1!important;grid-row:auto!important;justify-content:center;margin:8px 0 0!important}
/* the phone's chest: its row in the free column left of the tabs, the buttons one over the other (it had lain over the grid's top) */
html body.touch #shop.stashv .shsell .mrow{position:fixed!important;left:calc(16px + var(--sl,0px));bottom:24px;width:150px;flex-direction:column;align-items:stretch;gap:8px;margin:0!important;z-index:5}
html body.touch #shop.stashv .shsell .mrow button{white-space:normal;line-height:1.2;padding:6px 8px;min-height:34px}
/* the trader with the bag beside it on a desktop (js/fps/ashbag.js): the trader's own sell drawer away (it lay over the bag), the sell-all words under the bag */
html body.shopbag.hudbar:not(.touch) #shop.open .shsell{display:none!important}
html body #inv .trow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
html body #inv .trow[hidden]{display:none!important}
html body #inv .trow button{min-height:28px;padding:0 10px;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;font:600 10.5px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
html body #inv .trow .r-normal{color:#e8e2d4}html body #inv .trow .r-magic{color:#6f9dff}html body #inv .trow .r-rare{color:#f5cf3d}
html body #inv .mbar{flex-wrap:nowrap}
/* the trader's name on its plate: smaller, so it fits beside its close (it had run under the plate's edge) */
html body.hudbar:not(.touch) #shop.open .plate-title{font-size:11px!important;letter-spacing:.14em!important;white-space:nowrap;margin-left:66px!important;width:calc(100% - 136px)!important;max-width:none!important;overflow:hidden;text-overflow:ellipsis;text-align:center}
html body #inv .mbar .mn{white-space:nowrap}
html body.hudbar:not(.touch) #shop.open:not(.pets):not(.smith) .plate-title{font-size:12px!important;letter-spacing:.12em!important;padding-left:0!important;padding-right:0!important;margin-left:66px!important;width:calc(100% - 136px)!important;text-align:center!important}
/* the action icons' buttons (js/fps/ashbag.js): the sockets' octagon, the icon about half of it, a number beside it where there is one */
html body #inv .aib,html body #shop .aib{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;min-width:40px!important;width:auto!important;height:40px!important;min-height:40px!important;padding:0 6px!important;border:0!important;border-image:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/40px 40px no-repeat!important;cursor:pointer;color:#f2ede4!important}
html body #inv .aib .aic,html body #shop .aib .aic{width:24px;height:24px;flex:none;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
html body #inv .aib b,html body #shop .aib b{font:700 12px var(--f-display);color:#bfe6ff;letter-spacing:.02em;padding-right:6px}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") left center/40px 40px no-repeat,linear-gradient(90deg,transparent 20px,rgba(14,15,17,.92) 20px)!important;border-radius:0 6px 6px 0!important;padding-left:8px!important}
html body #inv .aib.pri,html body #shop .aib.pri{filter:drop-shadow(0 0 5px rgba(238,134,74,.55))}
html body #inv .aib.sure{filter:drop-shadow(0 0 7px rgba(255,80,50,.9))}
html body #inv .aib.sure b{color:#ff7a5a}
html body #inv .aib:disabled,html body #shop .aib:disabled{opacity:.4;filter:none;cursor:default}
html body #inv .mbar{gap:6px!important;flex-wrap:nowrap!important}
html body #inv .mbar .mn{font:700 13px var(--f-display);color:#ee864a;min-width:18px;text-align:center}
/* the phone's trader as the other windows (the user, 03.11.: 'warum sind die Buttons hier nicht unten links? Das ist überhaupt nicht so wie in den anderen Layouts'):
   the grid on top, one row under it from the left — Select / Done, Sell selected, then the sell-all words (they had stood above the grid and in a column right of it) */
html body #inv .aib[hidden],html body #shop .aib[hidden]{display:none!important}
html body #inv .aib,html body #shop .aib{min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body #inv .aib .aic,html body #shop .aib .aic{width:30px;height:30px}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") left center/46px 46px no-repeat,linear-gradient(90deg,transparent 23px,rgba(14,15,17,.92) 23px)!important}
/* the number inside its button (the user, 03.11.: '48 steht nicht im Button'), at the octagon's foot as the gun's rounds; every button of a row the same height, centred */
html body #inv .aib,html body #shop .aib{position:relative;width:46px!important;min-width:46px!important;padding:0!important;background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;border-radius:0!important;vertical-align:middle}
html body #inv .aib:has(b),html body #shop .aib:has(b){background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;padding:0!important}
html body #inv .aib:has(b) .aic,html body #shop .aib:has(b) .aic{margin-top:-8px}
html body #inv .aib b,html body #shop .aib b{position:absolute;left:3px;right:3px;bottom:5px;padding:0!important;text-align:center;font:700 10px/1 var(--f-display)!important;color:#dff3ff;text-shadow:0 1px 2px #000;letter-spacing:0;pointer-events:none}
html body #inv .mbar,html body #inv .trow,html body #shop .mrow,html body #shop .salls{align-items:center!important}
html body #inv .trow,html body #shop .salls{gap:6px!important}
/* sell all of a colour: the sell icon, 'All' on it, the octagon's rim glowing in the colour */
html body .aib.sallb.r-normal{filter:drop-shadow(0 0 4px rgba(232,226,212,.55))}
html body .aib.sallb.r-magic{filter:drop-shadow(0 0 5px rgba(111,157,255,.85))}
html body .aib.sallb.r-rare{filter:drop-shadow(0 0 5px rgba(245,207,61,.85))}
html body .aib.sallb.r-normal b{color:#f2ede4}html body .aib.sallb.r-magic b{color:#9fc0ff}html body .aib.sallb.r-rare b{color:#ffe07a}
html body #shop .salls .sall.aib{min-height:46px!important;font-size:inherit!important}
html body #shop .salls .sall.aib img.aic{display:block!important;width:30px!important;height:30px!important;margin:-8px 0 0!important;max-width:none!important}
html body #shop .salls .sall.aib{border:0!important;border-image:none!important;background:url("../assets/ui/cgx/hex_socket.webp") center/46px 46px no-repeat!important;width:46px!important;height:46px!important}
html body .aib.sallb.r-normal{filter:drop-shadow(0 0 4px rgba(232,226,212,.6))!important}html body .aib.sallb.r-magic{filter:drop-shadow(0 0 6px rgba(111,157,255,.9))!important}html body .aib.sallb.r-rare{filter:drop-shadow(0 0 6px rgba(245,207,61,.9))!important}
html body #shop .salls .sall.aib b{font-size:10px!important}
html body #shop .aib.sallb.r-normal b,html body #inv .aib.sallb.r-normal b{color:#f2ede4!important}
html body #shop .aib.sallb.r-magic b,html body #inv .aib.sallb.r-magic b{color:#8fb4ff!important}
html body #shop .aib.sallb.r-rare b,html body #inv .aib.sallb.r-rare b{color:#ffd84a!important}
html body #shop .aib.sallb.r-normal,html body #inv .aib.sallb.r-normal{filter:drop-shadow(0 0 3px rgba(232,226,212,.75))!important}
html body #shop .aib.sallb.r-magic,html body #inv .aib.sallb.r-magic{filter:drop-shadow(0 0 4px rgba(90,140,255,1)) drop-shadow(0 0 2px rgba(90,140,255,1))!important}
html body #shop .aib.sallb.r-rare,html body #inv .aib.sallb.r-rare{filter:drop-shadow(0 0 4px rgba(245,200,40,1)) drop-shadow(0 0 2px rgba(245,200,40,1))!important}
/* Select set apart on the left of its row (the user, 03.11.: 'der Multiselect-Button sollte links etwas Abstand von allen anderen Buttons haben') */
html body #inv .bfoot{display:flex;align-items:center;gap:6px;margin-top:6px}
html body #inv .bfoot .mpick{margin-right:18px!important}
html body #inv .bfoot .mpick[hidden]+.trow{margin-left:0}
html body #shop .mrow .mtog{margin-right:18px!important}
/* the bag's foot in one line (js/fps/ashbag.js): the actions left, the count right; on a desktop the buttons 38 px so the line is no taller than the count's own */
html body #inv .ifoot{display:flex;align-items:center;gap:6px;width:100%;min-height:0}
html body #inv .ifoot .bagcount{margin-left:auto;white-space:nowrap}
html body #inv .ifoot .bfoot{margin:0!important}
html body #inv .ifoot .bfoot[hidden]{display:none!important}
html body #inv .ifoot .mbar{margin:0!important;position:static!important;background:none!important;padding:0!important}
html body:not(.touch) #inv .ifoot .aib{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;background-size:38px 38px!important}
html body:not(.touch) #inv .ifoot .aib .aic{width:24px!important;height:24px!important}
html body:not(.touch) #inv .ifoot .aib:has(b) .aic{margin-top:-6px}
html body:not(.touch) #inv .ifoot .aib b{font-size:9px!important;bottom:4px}
html body:not(.touch) #inv .ifoot .bfoot .mpick{margin-right:14px!important}
html body.touch #inv .ifoot .mbar{position:static!important}
/* Safari: the foot's rows never wrap (it had stacked the sell-all buttons one over the other and out of the panel — the user, 03.11., macOS Safari) */
html body #inv .ifoot,html body #inv .ifoot .bfoot,html body #inv .ifoot .trow,html body #inv .ifoot .mbar{flex-wrap:nowrap!important;flex:none}
html body #inv .ifoot .bagcount{flex:1 1 auto;text-align:right}
html body #inv .ifoot .trow{display:flex;gap:6px!important}
html body:not(.touch) #inv .ifoot .trow .aib{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;background-size:38px 38px!important}
/* the picking mode plain to see (the user, 03.11.: 'ich sehe das gar nicht richtig, dass ich im Multiselect bin … was, wenn ich abbrechen will … so klein, dass man nix sieht'):
   the grid framed in glowing ember while picking, 'n selected' in words, the buttons 46 px again with a cancel X */
html body #inv.multi .bag{outline:2px solid rgba(238,134,74,.85);outline-offset:5px;box-shadow:0 0 18px rgba(238,134,74,.35)}
html body #inv .mbar .mn{font:700 12px var(--f-display)!important;letter-spacing:.08em!important;text-transform:uppercase;color:#ee864a!important;white-space:nowrap;margin-right:6px!important}
html body:not(.touch) #inv .ifoot .aib{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body:not(.touch) #inv .ifoot .aib .aic{width:30px!important;height:30px!important}
html body:not(.touch) #inv .ifoot .aib:has(b) .aic{margin-top:-8px}
html body:not(.touch) #inv .ifoot .aib b{font-size:10px!important;bottom:5px}
html body:not(.touch) #inv .ifoot .trow .aib{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;background-size:46px 46px!important}
html body #inv .aib.cancel .aic,html body #shop .mtog.on .aic{filter:drop-shadow(0 0 3px rgba(255,90,60,.7))}
/* Cindergate's own tooltip (js/fps/ashbag.js AshTip) */
#ashTip{position:fixed;z-index:9999;pointer-events:none;padding:5px 10px 6px;background:linear-gradient(rgba(20,21,24,.97),rgba(12,13,15,.97));border:1px solid rgba(238,134,74,.7);box-shadow:0 4px 14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.6);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);font:600 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#f2ede4;white-space:nowrap;opacity:0;transition:opacity .12s}
#ashTip.on{opacity:1}
/* the chest's title over its drawer (the drawer on the left had covered it — the user, 03.11.: 'wo ist das Beutetruhe-Label? links oben, was es ist') */
html body.hudbar:not(.touch) #shop.open.stashv .plate-title{position:relative!important;z-index:8!important;color:#e6e1d6!important;opacity:1!important}
html body.hudbar:not(.touch) #shop.open.stashv .shsell{padding-top:64px!important}
/* picking, as the user drew it (03.11.): the count right where the bag's count stands, the buttons left; the grid's frame rounded and pulsing, the picked items pulsing with
   it; the bag's tabs up under the figure's panel (the page had centred its content and left a gap above them); the foot clear of the frame */
html body:not(.touch) #inv.open .bagwrap{justify-content:flex-start!important}
html body #inv .bag{position:relative}
html body #inv.multi .bag{outline:none!important;box-shadow:none!important}
html body #inv.multi .bag::before{content:"";position:absolute;inset:-7px;border:2px solid rgba(238,134,74,.9);border-radius:10px;pointer-events:none;animation:mpulse 1.4s ease-in-out infinite;z-index:0}
@keyframes mpulse{0%,100%{box-shadow:0 0 6px rgba(238,134,74,.35),inset 0 0 6px rgba(238,134,74,.15);border-color:rgba(238,134,74,.65)}50%{box-shadow:0 0 18px rgba(255,150,80,.75),inset 0 0 10px rgba(255,150,80,.3);border-color:rgba(255,170,100,1)}}
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:2px solid #ee864a!important;outline-offset:-3px!important;border-radius:6px;animation:mselp 1.4s ease-in-out infinite}
@keyframes mselp{0%,100%{box-shadow:inset 0 0 10px rgba(238,134,74,.35);outline-color:rgba(238,134,74,.7)}50%{box-shadow:inset 0 0 20px rgba(255,150,80,.75);outline-color:rgba(255,180,110,1)}}
html body #inv .ifoot{margin-top:16px!important}
html body #inv .ifoot .mbar{flex:1 1 auto!important;display:flex}
html body #inv .ifoot .mbar .mn{order:99;margin-left:auto!important;margin-right:0!important}
html body #inv.multi .ifoot .bagcount{display:none!important}
@media (prefers-reduced-motion:reduce){html body #inv.multi .bag::before,html body #inv .bag .cell.msel{animation:none}}
html body:not(.touch) #inv.open.multi .bag::before,html body.touch #inv.open.multi .bag::before{display:block!important}
/* the phone's trader as Kharos' (the user, 03.11., with Kharos' shot: 'warum ist das Grid nicht zentriert … warum nicht mobile vertikal wie Kharos'): the grid as the page
   sizes it, its buttons one column on its right — Select / Cancel and Sell selected first, a gap, then sell-all white, blue, yellow */
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;margin:0 0 10px!important;position:static!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow[hidden]{display:none!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .mrow .mtog{margin:0!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{justify-content:flex-start!important;align-self:start!important;margin-top:4px!important;gap:6px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;background-size:42px 42px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib .aic{width:26px!important;height:26px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib:has(b) .aic{margin-top:-7px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .aib b{bottom:4px!important;font-size:9px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls .mrow{gap:6px!important;margin-bottom:8px!important}
html body.touch #shop:not(.stashv):not(.smith):not(.pets) .salls{margin-top:22px!important}
/* the bag's foot flush with the grid (its width set to the grid's: js/fps/ashbag.js) */
html body #inv .ifoot{align-self:center!important;box-sizing:border-box;max-width:100%}
html body #inv .ifoot .bfoot .mpick{margin-right:14px!important}
/* ONE mark for a picked item in every grid (the user, 03.11.: 'warum ist die Selektion auf verschiedenen Systemen unterschiedlich'): a solid ember ring inside the cell,
   pulsing — drawn inside (an inset shadow), so the trader's octagon-cut cells keep it whole; no check mark anywhere */
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{outline:none!important;box-shadow:inset 0 0 0 3px #ee864a,inset 0 0 14px rgba(238,134,74,.45)!important;animation:mring 1.4s ease-in-out infinite!important}
@keyframes mring{0%,100%{box-shadow:inset 0 0 0 3px rgba(238,134,74,.85),inset 0 0 10px rgba(238,134,74,.3)}50%{box-shadow:inset 0 0 0 3px rgba(255,180,110,1),inset 0 0 22px rgba(255,150,80,.65)}}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:none!important;display:none!important}
html body .aib.sallb[hidden]{display:none!important}
/* the ring as an overlay over the cell's own frame layers (the trader's cells draw their rarity frame in a ::before over any shadow of the cell): one rule, both grids */
html body #inv .bag .cell.msel,html body #shop .sgrid [data-i].msel{box-shadow:none!important;animation:none!important}
html body #inv .bag .cell.msel::after,html body #shop .sgrid [data-i].msel::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;background:none!important;border:3px solid #ee864a!important;border-radius:5px!important;box-shadow:inset 0 0 12px rgba(238,134,74,.45)!important;pointer-events:none!important;z-index:6!important;opacity:1!important;animation:mring2 1.4s ease-in-out infinite!important}
@keyframes mring2{0%,100%{border-color:rgba(238,134,74,.85);box-shadow:inset 0 0 8px rgba(238,134,74,.3)}50%{border-color:rgba(255,185,115,1);box-shadow:inset 0 0 20px rgba(255,150,80,.65)}}
/* ===== picking (js/fps/ashbag.js): Select a tab like the others; on the bag's right edge a handle with the count; the action panel sliding out over the grid ===== */
html body #inv .itabs .mtab svg{fill:none;stroke-linecap:round}
html body #inv .bagwrap{position:relative}
html body #inv .mhandle{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:12;width:30px;height:86px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(238,134,74,.85);border-right:0;border-radius:8px 0 0 8px;background:linear-gradient(90deg,rgba(40,24,14,.96),rgba(18,14,12,.96));color:#ffb070;cursor:pointer;animation:mpulse 1.4s ease-in-out infinite;touch-action:none}
html body #inv .mhandle[hidden]{display:none!important}
html body #inv .mhandle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body #inv .mhandle b{font:700 12px var(--f-display);color:#ffd2a8}
html body #inv .mhandle.open{right:min(220px,46%)}
html body #inv .mpanel{position:absolute;right:0;top:0;bottom:0;z-index:11;width:min(220px,46%);box-sizing:border-box;padding:12px 10px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(90deg,rgba(14,15,17,.97),rgba(10,11,13,.98));border-left:1px solid rgba(238,134,74,.6);box-shadow:-12px 0 28px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .22s ease;overflow-y:auto}
html body #inv .mpanel.on{transform:none}
html body #inv .mpanel .mph{font:700 12px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#ee864a}
html body #inv .mpanel .mpc,html body #inv .mpanel .mpa{display:flex;flex-direction:column;gap:6px}
html body #inv .mpanel .mpa{margin-top:auto}
html body #inv .mpanel button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;color:#e6e1d6;font:600 11px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:left}
html body #inv .mpanel button.pri{border-image-source:var(--o-fire);color:#241304}
html body #inv .mpanel button:disabled{opacity:.4;cursor:default}
html body #inv .mpanel button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #inv .mpanel .r-normal{color:#f2ede4}html body #inv .mpanel .r-magic{color:#8fb4ff}html body #inv .mpanel .r-rare{color:#ffd84a}
html body #inv .mpanel button.cancel{color:#ff9a7a}
/* the trader's and the chest's buttons: line icons too */
html body #shop .aib svg.aic,html body #inv .aib svg.aic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:22px!important;height:22px!important}
html body #shop .aib.sallb.r-normal svg{color:#f2ede4}html body #shop .aib.sallb.r-magic svg{color:#8fb4ff}html body #shop .aib.sallb.r-rare svg{color:#ffd84a}
html body #shop .aib.pri svg{color:#ffb070}
html body #inv .mpanel{gap:8px;padding:10px 10px}
html body #inv .mpanel .mpa{margin-top:0}
html body #inv .mpanel .mpk{margin-top:6px;font:600 10px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#9a9286}
html body #inv .mpanel button{min-height:34px}
html body #inv .mhandle{transform:translateY(-50%)}
/* Select first in the tab row, a divider after it, its icon as bright as the others' (the user, 03.11.) */
html body #inv .itabs .mtab svg{stroke:#d8d2c6!important;stroke-width:1.8!important}
html body #inv .itabs .mtab.on svg{stroke:#ee864a!important}
html body #inv .itabs .msep{display:block!important;position:static!important;flex:none;width:1px;height:60%;align-self:center;background:rgba(216,210,198,.35);margin:0 4px;box-shadow:none;border-radius:0}
html body.touch #inv .itabs .msep{width:60%;height:1px;margin:2px 0;align-self:center}
/* the ultimate's B chip over the socket's rim as the other keys' (the user, 03.11.): the octagon cut moved from the button onto its face, the chip no longer cut away */
html body.hudbar:not(.touch) #skillsT .tult{clip-path:none!important;overflow:visible!important}
html body.hudbar:not(.touch) #skillsT .tult .ic{clip-path:polygon(30% 8%,70% 8%,92% 30%,92% 70%,70% 92%,30% 92%,8% 70%,8% 30%)}
html body.hudbar:not(.touch) #skillsT .tult kbd{z-index:7!important}
/* the second weapon's socket (js/fps/ashakimbo.js): in the gun's column, as the others; the one not used hidden; the drawn weapon's socket lit */
html body #inv .doll .eq.eq.noside{display:none!important}
html body #inv .doll .eq.eq.drawn{box-shadow:none!important;filter:drop-shadow(0 0 2px rgba(255,150,80,1)) drop-shadow(0 0 7px rgba(238,134,74,.8))!important} /* (the glow follows the socket's own octagon) */
html body.touch #inv.open .ihead .statsbtn.statsbtn{position:static!important;transform:none!important;translate:none!important;inset:auto!important;margin:0 0 0 10px!important;display:inline-flex!important;vertical-align:middle;height:22px!important;min-height:0!important;padding:0 9px!important;font-size:10px!important;border-width:6px 8px!important;border-image-width:6px 8px!important} /* (inline after the rating, as on a desktop: it had sat over the level line) */
/* the two weapons side by side, as the user's sketch (03.11.): the helmet and the coat as big as ever, right; under them the second weapon and the gun, each 80 %, in a
   row ending on the column's right edge (js/fps/ashakimbo.js) */
html body #inv.open .doll.twoguns .pri{display:grid!important;grid-template-columns:calc(var(--eq) * 0.8) calc(var(--eq) * 0.8);grid-template-rows:var(--eq) var(--eq) var(--eq);row-gap:var(--cg-gv,8px)!important;justify-content:end;align-content:start;column-gap:calc(var(--cg-gv,8px) * 1.2)} /* (the third row as tall as a socket, the two at its foot: level with the boots) */
html body #inv.open .doll.twoguns .pri > .eq[data-k="helmet"],html body #inv.open .doll.twoguns .pri > .eq[data-k="chest"]{grid-column:1 / span 2;justify-self:end}
html body #inv.open .doll.twoguns .pri > .eq.noside{display:none!important}
html body #inv.open .doll.twoguns .pri > .eq[data-k="weapon"]{grid-column:2;grid-row:3}
html body #inv.open .doll.twoguns .pri > .eq[data-k="blade"]:not(.noside),html body #inv.open .doll.twoguns .pri > .eq[data-k="offhand"]:not(.noside){grid-column:1;grid-row:3}
html body #inv.open .doll.twoguns .pri > .eq[data-k="weapon"],html body #inv.open .doll.twoguns .pri > .eq[data-k="blade"],html body #inv.open .doll.twoguns .pri > .eq[data-k="offhand"]{width:calc(var(--eq) * 0.8)!important;height:calc(var(--eq) * 0.8)!important;align-self:end}
/* the Gunner's stance on its button (js/fps/ashgun2.js) */
html body #skillsT .tbtn.st-tac{filter:drop-shadow(0 0 3px rgba(150,230,110,1)) drop-shadow(0 0 8px rgba(120,210,90,.7))}
html body #skillsT .tbtn.st-snipe{filter:drop-shadow(0 0 3px rgba(255,90,60,1)) drop-shadow(0 0 8px rgba(255,70,40,.75))}
html body #skillsT .tbtn .stchip{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:6;padding:1px 5px;font:700 8px/12px var(--f-display);letter-spacing:.06em;font-style:normal;white-space:nowrap;pointer-events:none;background:rgba(10,11,13,.92);clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% 100%,0 100%,0 3px)}
html body #skillsT .tbtn.st-tac .stchip{color:#a8e070}html body #skillsT .tbtn.st-snipe .stchip{color:#ff6a4a}
/* the knight's swap socket beside the gun on a desktop's bar (js/fps/ashblade.js ashSwapSock): the bar's socket art, its key as the others', the weapon he would take up; the card turn */
html body #skillsT .cgswap{display:none}
html body.hudbar:not(.touch) #skillsT .cgswap{display:block;position:absolute;z-index:5;cursor:pointer;pointer-events:auto;background:url("../assets/ui/cgx/hex_socket.webp") center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30,8 70,8 92,30 92,70 70,92 30,92 8,70 8,30' fill='%23101215' fill-opacity='.96'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.hudbar:not(.touch) #skillsT .cgswap img{position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
html body.hudbar:not(.touch) #skillsT .cgswap:hover{filter:brightness(1.25)}
html body.hudbar:not(.touch) #skillsT .cgswap.empty img{opacity:.35}
html body.hudbar:not(.touch) #skillsT .cgswap kbd{display:block;position:absolute;left:4px;top:3px;margin:0;padding:0 4px;height:15px;font:700 11px/15px var(--f-display);color:#f2f4f6;background:rgba(10,11,13,.82);border:0;border-radius:0;clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);z-index:4;pointer-events:none}
html body.hudbar:not(.touch) #skillsT .cgswap .sw{position:absolute;right:-11px;top:50%;margin-top:-8px;width:16px;height:16px;z-index:6;pointer-events:none;background:#ff7a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 9h12l-3-3M19 15H7l3 3'/%3E%3C/svg%3E") center/80% no-repeat;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
html body #skillsT .tbtn.main.cgflip img.hgun,html body #skillsT .cgswap.cgflip img{animation:cgFlip .24s ease-in-out}
html body #skillsT .tbtn.main.cgflip{animation:cgFlipS .24s ease-in-out}
@keyframes cgFlip{0%{transform:translate(-50%,-50%) perspective(220px) rotateY(0)}46%,54%{transform:translate(-50%,-50%) perspective(220px) rotateY(90deg) scale(1.12)}100%{transform:translate(-50%,-50%) perspective(220px) rotateY(0)}}
@keyframes cgFlipS{0%,100%{filter:none}50%{filter:brightness(1.6) drop-shadow(0 0 6px rgba(255,170,90,.8))}}
/* five classes in the hero choice's column (the Cinder Zealot, 03.11.; the user: 'dass man nichts scrollen muss'): on a short (phone) screen the sockets a step smaller and closer */
@media (max-height:520px){html body #mainmenu[data-mode="create"] .mm-classes{gap:calc(12px * var(--k))!important}
html body #mainmenu[data-mode="create"] .mm-classes .mm-cls{width:calc(48px * var(--k))!important;height:calc(48px * var(--k))!important}}