/* =====================================================================
   ORGANIC FRAMES (after the Diablo Immortal panels): torn and fringed panel
   edges, chamfered plates with a double rim, filigree on titles and dividers,
   engraved backgrounds. Anthracite, bronze and gold stay; only the shapes change.
   The ornaments are SVG data URIs (bronze #8a6a3a, bronze-lo #4a3a22, gold #eea24a).
   ===================================================================== */
: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(%23g)' fill-opacity='1' stroke='%238a6a3a' 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(%23g)' fill-opacity='1' stroke='%23eea24a' 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(%23g)' fill-opacity='1' stroke='%234a3a22' 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(%23g)' fill-opacity='1' stroke='%23eea24a' 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='%234a3a22' 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='%238a6a3a' 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='%23eea24a' 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(%23g)' fill-opacity='0.28' stroke='%234a3a22' 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-fl-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='18' viewBox='0 0 110 18'%3E %3Cdefs%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6a3a' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%238a6a3a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='2,9 92,7.6 97,9 92,10.4' fill='url(%23t)'/%3E %3Cpath d='M86 8.2C82 1.5 69 1.2 68.6 6.2 68.4 9 72.5 9.6 73.6 7.4M86 9.8C82 16.5 69 16.8 68.6 11.8 68.4 9 72.5 8.4 73.6 10.6' fill='none' stroke='%238a6a3a' stroke-width='1.1'/%3E %3Cpath d='M44 8.3l5-4.6-1.4 4.4zM54 9.7l5 4.6-1.4-4.4zM30 8.5l3.6-3-1 3z' fill='%238a6a3a' opacity='.8'/%3E %3Cpolygon points='100,9 104,4.8 108,9 104,13.2' fill='%23111214' stroke='%238a6a3a' stroke-width='1.2'/%3E %3Ccircle cx='104' cy='9' r='1.2' fill='%23eea24a' opacity='.8'/%3E%3C/svg%3E");
  --o-fl-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='18' viewBox='0 0 110 18'%3E%3Cg transform='translate(110 0) scale(-1 1)'%3E %3Cdefs%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6a3a' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%238a6a3a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='2,9 92,7.6 97,9 92,10.4' fill='url(%23t)'/%3E %3Cpath d='M86 8.2C82 1.5 69 1.2 68.6 6.2 68.4 9 72.5 9.6 73.6 7.4M86 9.8C82 16.5 69 16.8 68.6 11.8 68.4 9 72.5 8.4 73.6 10.6' fill='none' stroke='%238a6a3a' stroke-width='1.1'/%3E %3Cpath d='M44 8.3l5-4.6-1.4 4.4zM54 9.7l5 4.6-1.4-4.4zM30 8.5l3.6-3-1 3z' fill='%238a6a3a' opacity='.8'/%3E %3Cpolygon points='100,9 104,4.8 108,9 104,13.2' fill='%23111214' stroke='%238a6a3a' stroke-width='1.2'/%3E %3Ccircle cx='104' cy='9' r='1.2' fill='%23eea24a' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --o-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E %3Cdefs%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6a3a'/%3E%3Cstop offset='1' stop-color='%238a6a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='9,4.8 200,6 9,7.2' fill='url(%23r)'/%3E %3Cpolygon points='1,6 4.5,2.5 8,6 4.5,9.5' fill='%23111214' stroke='%238a6a3a' stroke-width='1'/%3E %3Cpath d='M40 5.2l4-3.4-1 3.3zM70 6.8l4 3.4-1-3.3z' fill='%238a6a3a' opacity='.7'/%3E%3C/svg%3E");
  --o-div:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E %3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238a6a3a' stop-opacity='0'/%3E%3Cstop offset='.8' stop-color='%238a6a3a'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%238a6a3a' stop-opacity='0'/%3E%3Cstop offset='.8' stop-color='%238a6a3a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='0,12 100,11 108,12 100,13' fill='url(%23a)'/%3E%3Cpolygon points='240,12 140,11 132,12 140,13' fill='url(%23b)'/%3E %3Cpath d='M110 11C106 4 97 4 97 8.5 97 11 100 11.4 101 9.6M110 13C106 20 97 20 97 15.5 97 13 100 12.6 101 14.4M130 11C134 4 143 4 143 8.5 143 11 140 11.4 139 9.6M130 13C134 20 143 20 143 15.5 143 13 140 12.6 139 14.4' fill='none' stroke='%238a6a3a' stroke-width='1.1'/%3E %3Cpath d='M120 1l2 6h-4zM120 23l2-6h-4z' fill='%238a6a3a'/%3E %3Cpolygon points='120,5.5 126.5,12 120,18.5 113.5,12' fill='%23111214' stroke='%238a6a3a' stroke-width='1.3'/%3E %3Cpolygon points='120,9.2 122.8,12 120,14.8 117.2,12' fill='%23eea24a' opacity='.75'/%3E%3C/svg%3E");
  --o-torn-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='160' viewBox='0 0 18 160'%3E%3Cpath d='M0 0L10.799999999999999 0L4.93 2.07L4.69 7.2L4 12.52L4 15.7L4 19.48L4 22.62L4 27.91L5.26 33.23L7.55 38.98L2.26 43.53L4 47.75L4 53.97L6.89 56.8L5.75 59.94L6.84 65.23L7.88 67.93L8.54 75.69L10.77 83.5L12.56 89.84L12.07 95.19L10.75 101.62L4.83 103.68L3.86 109.46L4 115.76L4.87 121.66L4.92 124.5L4 127.46L5.11 134.63L8.3 140.29L10.37 143.66L10.21 146.8L9.78 149.89L2.52 152.91L2.52 157L10.8 160L0 160ZM3.5 11.82L10.82 12.61L3.5 13.219999999999999ZM7.05 38.279999999999994L11.43 38.27L7.05 39.68ZM5.25 59.239999999999995L12.17 62.05L5.25 60.64ZM10.27 82.8L16.35 82.64L10.27 84.2ZM2.02 152.21L6.06 154.79L2.02 153.60999999999999Z' fill='%23000'/%3E%3C/svg%3E");
  --o-torn-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='160' viewBox='0 0 18 160'%3E%3Cpath d='M18 0L7.2 0L6.44 5.07L9.38 12.17L9.52 17.82L8.25 22.34L7.67 26.72L5.54 31.23L7.27 35.13L5.57 38.91L3.15 44.23L15.77 48.54L14 53.53L14.07 59.93L14 67.84L14 70.13L14 73.93L14.11 76.89L14 79.64L14 86.76L14 92.28L14 94.34L13.76 97.08L14.32 102.16L13.63 109.47L14 114.91L12.53 120.81L9.55 128.64L12.55 135.21L11.65 141.19L14 147.5L11.78 151.79L14.7 157L7.2 160L18 160ZM8.75 21.64L4.36 21.22L8.75 23.04ZM8.17 26.02L1.69 27.1L8.17 27.419999999999998ZM7.77 34.43L0.57 37.52L7.77 35.830000000000005ZM3.65 43.529999999999994L0 45.84L3.65 44.93ZM14.57 59.23L8.85 60.6L14.57 60.63ZM13.03 120.11L8.84 121.55L13.03 121.51Z' fill='%23000'/%3E%3C/svg%3E");
  --o-torn-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='16' viewBox='0 0 170 16'%3E%3Cpath d='M0 0L0 9.6L6.14 7.64L8.65 9.18L16.08 11.14L22.05 3.4L29.43 5.18L32.95 4.38L36.58 4.17L40.06 4.55L44.5 4L47.8 5.56L52.87 6.6L56.77 7.37L60.87 5.61L68.86 3.05L72.74 4L76.26 4L83.98 4.23L91.07 7.43L96.31 2.88L99.24 4.75L106.07 4.14L110.03 5.85L115.66 3.09L117.97 6.01L124.58 4.45L127.83 4L133.81 5.27L137.33 6.27L143.79 3.86L145.9 4L151.76 4.65L158.4 4L165.74 4L167 6.76L170 9.6L170 0ZM52.169999999999995 6.1L53.26 12.78L53.57 6.1ZM56.07 6.87L55.97 15.03L57.470000000000006 6.87ZM60.169999999999995 5.11L59.76 12.78L61.57 5.11ZM72.03999999999999 3.5L72.86 10.67L73.44 3.5ZM98.53999999999999 4.25L98.37 8.15L99.94 4.25ZM105.36999999999999 3.64L108.36 8.59L106.77 3.64ZM109.33 5.35L112.19 12.76L110.73 5.35ZM123.88 3.95L126.21 10.01L125.28 3.95ZM157.70000000000002 3.5L157.03 7.21L159.1 3.5Z' fill='%23000'/%3E%3C/svg%3E");
  --o-c-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='rotate(0 24 24)'%3E %3Cpath d='M3 44V13Q3 3 13 3H44' fill='none' stroke='%238a6a3a' stroke-width='1.2' opacity='.8'/%3E %3Cpath d='M8 34V16Q8 8 16 8H34' fill='none' stroke='%234a3a22' stroke-width='1'/%3E %3Cpath d='M13 13C19 13 21 17 18 19 16 20.5 14 18.5 15.5 17' fill='none' stroke='%238a6a3a' stroke-width='1'/%3E %3Cpolygon points='13,9 15,13 13,17 11,13' fill='%238a6a3a' transform='rotate(-45 13 13)'/%3E %3Ccircle cx='3' cy='46' r='1.3' fill='%238a6a3a'/%3E%3Ccircle cx='46' cy='3' r='1.3' fill='%238a6a3a'/%3E%3C/g%3E%3C/svg%3E");
  --o-c-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='rotate(90 24 24)'%3E %3Cpath d='M3 44V13Q3 3 13 3H44' fill='none' stroke='%238a6a3a' stroke-width='1.2' opacity='.8'/%3E %3Cpath d='M8 34V16Q8 8 16 8H34' fill='none' stroke='%234a3a22' stroke-width='1'/%3E %3Cpath d='M13 13C19 13 21 17 18 19 16 20.5 14 18.5 15.5 17' fill='none' stroke='%238a6a3a' stroke-width='1'/%3E %3Cpolygon points='13,9 15,13 13,17 11,13' fill='%238a6a3a' transform='rotate(-45 13 13)'/%3E %3Ccircle cx='3' cy='46' r='1.3' fill='%238a6a3a'/%3E%3Ccircle cx='46' cy='3' r='1.3' fill='%238a6a3a'/%3E%3C/g%3E%3C/svg%3E");
  --o-c-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='rotate(180 24 24)'%3E %3Cpath d='M3 44V13Q3 3 13 3H44' fill='none' stroke='%238a6a3a' stroke-width='1.2' opacity='.8'/%3E %3Cpath d='M8 34V16Q8 8 16 8H34' fill='none' stroke='%234a3a22' stroke-width='1'/%3E %3Cpath d='M13 13C19 13 21 17 18 19 16 20.5 14 18.5 15.5 17' fill='none' stroke='%238a6a3a' stroke-width='1'/%3E %3Cpolygon points='13,9 15,13 13,17 11,13' fill='%238a6a3a' transform='rotate(-45 13 13)'/%3E %3Ccircle cx='3' cy='46' r='1.3' fill='%238a6a3a'/%3E%3Ccircle cx='46' cy='3' r='1.3' fill='%238a6a3a'/%3E%3C/g%3E%3C/svg%3E");
  --o-c-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='rotate(270 24 24)'%3E %3Cpath d='M3 44V13Q3 3 13 3H44' fill='none' stroke='%238a6a3a' stroke-width='1.2' opacity='.8'/%3E %3Cpath d='M8 34V16Q8 8 16 8H34' fill='none' stroke='%234a3a22' stroke-width='1'/%3E %3Cpath d='M13 13C19 13 21 17 18 19 16 20.5 14 18.5 15.5 17' fill='none' stroke='%238a6a3a' stroke-width='1'/%3E %3Cpolygon points='13,9 15,13 13,17 11,13' fill='%238a6a3a' transform='rotate(-45 13 13)'/%3E %3Ccircle cx='3' cy='46' r='1.3' fill='%238a6a3a'/%3E%3Ccircle cx='46' cy='3' r='1.3' fill='%238a6a3a'/%3E%3C/g%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='%238a6a3a' 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='%238a6a3a' stroke-width='1'/%3E%3Cpolygon points='93,61.13 97,65.13 93,69.13 89,65.13' fill='%23111214' stroke='%238a6a3a' 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='%238a6a3a' 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='%238a6a3a' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%238a6a3a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpolygon points='0,10 50,8.4 56,10 50,11.6' fill='url(%23h)'/%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='%238a6a3a'/%3E %3Cpath d='M24 9.6C22 5 26 3 27.5 5.5' fill='none' stroke='%238a6a3a' 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='%234a3a22' stroke-width='1.2'/%3E%3Cpolygon points='17,1 21,5.5 17,10 13,5.5' fill='%23111214' stroke='%238a6a3a' stroke-width='1.1'/%3E%3Ccircle cx='17' cy='5.5' r='1.1' fill='%238a6a3a'/%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='%234a3a22' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%238a6a3a'/%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='%234a3a22' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%238a6a3a'/%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='%234a3a22' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%238a6a3a'/%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='%234a3a22' stroke-width='1.3'/%3E%3Crect x='2.5' y='2.5' width='1.6' height='1.6' fill='%238a6a3a'/%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='%234a3a22' 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='%238a6a3a' stroke-width='1'/%3E%3Ccircle cx='6.5' cy='45' r='1.1' fill='%238a6a3a'/%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='%23efa853'/%3E%3Cstop offset='1' stop-color='%23c27a30'/%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(%23g)' fill-opacity='1' stroke='%23ffd49e' 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='%235a3410' 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='%23f6b766'/%3E%3Cstop offset='1' stop-color='%23cc8638'/%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(%23g)' fill-opacity='1' stroke='%23ffe4c0' 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='%235a3410' stroke-width='1' opacity='.75'/%3E %3Cpath d='M10.45 4.5H25.55' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --o-tag-normal: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(%23g)' stroke='%23e4e0d6' 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='%23e4e0d6' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-normal-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='%23e4e0d6'/%3E%3Cstop offset='1' stop-color='%23a4a19a'/%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(%23g)' stroke='%23e4e0d6' 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-magic: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(%23g)' stroke='%235b8dff' 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='%235b8dff' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-magic-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='%235b8dff'/%3E%3Cstop offset='1' stop-color='%234266b8'/%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(%23g)' stroke='%235b8dff' 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-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(%23g)' stroke='%23f5cf3d' 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='%23f5cf3d' 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='%23f5cf3d'/%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(%23g)' stroke='%23f5cf3d' 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: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(%23g)' 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='%23ff7d1f' 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='%23b85a16'/%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(%23g)' 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='%234a3a22' 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='%238a6a3a' 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='%238a6a3a' 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='%238a6a3a' 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='%238a6a3a' 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='%238a6a3a' stroke-width='.8'/%3E%3C/svg%3E");
}

/* titles: a flourish on each side instead of plain lines */
.plate-title::before,.plate-title::after{width:calc(84px * var(--k))!important;height:calc(14px * var(--k))!important;background:var(--o-fl-l) center/contain no-repeat!important}
.plate-title::after{background-image:var(--o-fl-r)!important}

/* square buttons become chamfered plates: bronze rim, dark hairline inside, gold when it matters */
.sbtn,#gmenu .gbtn,.xclose,#inv .xclose,#skills .xclose,#qlog .xclose,#inv.open .statsbtn,#icard button,#cmp button,#playBtn{border:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-image:var(--o-plate) 11 fill / 11px / 0 stretch!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.sbtn:hover,#gmenu .gbtn:hover,.xclose:hover,#inv.open .statsbtn:hover,#icard button:hover,#cmp button:hover,#icard button.pri,#cmp button.pri,#playBtn{border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch!important}
#side.fresh .sbtn[data-open="menu"]{border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch!important;filter:drop-shadow(0 0 6px rgba(238,162,74,.55))}
/* the panels' close button: a thorn bracket reaching out to its left */
#inv .xclose::before,#skills .xclose::before,#qlog .xclose::before{content:"";position:absolute;right:calc(100% - 4px);top:50%;width:calc(44px * var(--k));height:calc(16px * var(--k));margin-top:calc(-8px * var(--k));background:var(--o-thorn) right center/contain no-repeat;pointer-events:none}

/* ---------- game menu ---------- */
/* the side panels end in a torn, fringed edge toward the world */
#gmenu .gside{border:0!important}
#gmenu .gl{-webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;padding-right:30px}
#gmenu .gr{-webkit-mask:linear-gradient(#000,#000) right top/calc(100% - 17px) 100% no-repeat,var(--o-torn-l) left top/18px 160px repeat-y;mask:linear-gradient(#000,#000) right top/calc(100% - 17px) 100% no-repeat,var(--o-torn-l) left top/18px 160px repeat-y;padding-left:30px}
#gmenu .tile{border:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-image:var(--o-tile) 11 fill / 11px / 0 stretch!important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
#gmenu .tile:hover{border-image:var(--o-tile-gold) 11 fill / 11px / 0 stretch!important}
#gmenu.fresh .tile[data-go="skills"]{border-image:var(--o-tile-gold) 11 fill / 11px / 0 stretch!important;filter:drop-shadow(0 0 8px rgba(238,162,74,.5))}
#gmenu .tile span{position:relative;padding-top:calc(6px * var(--k));background:var(--o-div) center top/calc(80px * var(--k)) calc(8px * var(--k)) no-repeat}
#gmenu .gl .tile span{padding-top:0;background:none}
#gmenu .gchar{border:2px solid transparent!important;border-radius:0!important;background:none!important;border-image:var(--o-soft) 11 fill / 11px / 0 stretch!important}
#gmenu .tiles{padding-top:calc(20px * var(--k));background:var(--o-div) center top/calc(200px * var(--k)) calc(20px * var(--k)) no-repeat}
#gmenu .gtop{margin-bottom:-6px}

/* ---------- skills ---------- */
/* the list is a torn leaf lying over the page: ragged right and bottom edges */
#skills .slist{position:relative;z-index:2;margin-right:-16px;padding-right:24px!important;padding-bottom:26px!important;
  background:linear-gradient(90deg,transparent calc(100% - 16px),rgba(217,205,178,.05) calc(100% - 11px),rgba(217,205,178,.2)),linear-gradient(0deg,rgba(217,205,178,.18),rgba(217,205,178,.04) 10px,transparent 15px),linear-gradient(90deg,#26282c,#202226)!important;
  -webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x;mask:linear-gradient(#000,#000) left top/calc(100% - 17px) calc(100% - 15px) no-repeat,var(--o-torn-r) right top/18px 160px repeat-y,var(--o-torn-b) left bottom/170px 16px repeat-x}
#skills .spage{padding-left:34px!important;box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8);
  background:var(--o-c-br) right 6px bottom 6px/40px 40px no-repeat,var(--o-c-bl) left 22px bottom 6px/40px 40px no-repeat,var(--o-c-tl) left 22px top 6px/40px 40px no-repeat,
  radial-gradient(ellipse at 72% 28%,rgba(255,255,255,.05),transparent 60%),linear-gradient(rgba(36,38,42,.97),rgba(22,23,26,.98)),var(--tex) 0 0/256px 256px!important}
/* section headings with a tapered underline */
#skills .slist h3{margin-bottom:9px!important}
#skills .slist h3::after{content:"";display:block;height:calc(9px * var(--k));margin-top:3px;background:var(--o-rule) left center/100% 100% no-repeat;opacity:.9}
/* each skill: round socket on the left, the plate runs out into a point on the right */
#skills .slist .sk[data-id]{border:0!important;outline:0!important;box-shadow:none!important;border-radius:40px 0 0 40px!important;background:var(--fc,#4a3a22)!important;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);padding-right:22px!important;margin-bottom:6px!important}
#skills .slist .sk::before{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:40px 0 0 40px;clip-path:polygon(0 0,calc(100% - 12.4px) 0,100% 50%,calc(100% - 12.4px) 100%,0 100%);background:linear-gradient(90deg,#34363b,#202226 70%,#1a1b1e)}
#skills .slist .sk canvas{box-shadow:0 0 0 2px #0c0d0f,0 0 0 3px #4a3a22!important;border-color:#26282c!important}
#skills .slist .sk.fresh{--fc:#8a6a3a}
#skills .slist .sk.sel{--fc:#eea24a;outline:0!important}
#skills .slist .sk.fresh::before{background:linear-gradient(90deg,#4a4434,#26241f 70%,#1d1c19)}
#skills .slist .sk.locked::before{background:linear-gradient(90deg,#26282c,#18191c)}
#skills .slist .sk.sel canvas{box-shadow:0 0 0 2px #0c0d0f,0 0 0 3px #eea24a!important}
/* "Choose a skill" between two ornate dividers, like the empty page in DI */
#skills .spage .choose::before,#skills .spage .choose::after{content:"";display:block;width:calc(200px * var(--k));height:calc(20px * var(--k));margin:calc(10px * var(--k)) auto;background:var(--o-div) center/contain no-repeat}
#skills .spage .choose::after{transform:scaleY(-1)}
#skills .spage .choose{margin-top:24%!important}
#skills .spage .sinfo .sep{height:calc(10px * var(--k))!important;background:var(--o-rule) left center/min(100%,calc(200px * var(--k))) 100% no-repeat!important;margin:8px 0!important}
/* the loadout sits on an engraved ring, its sockets set in iron */
#skills .spage .sload{background:var(--o-engrave) 0 0/236px 214px no-repeat}
#skills .spage .sock{box-shadow:0 0 0 3px #0c0d0f,0 0 0 4px #4a3a22,0 3px 8px rgba(0,0,0,.6)!important}
#skills .spage .sock.ok{box-shadow:0 0 0 3px #0c0d0f,0 0 0 4px #eea24a,0 0 16px 3px rgba(238,162,74,.7)!important}

/* ---------- inventory ---------- */
/* the equipment slots carry a small crest and engraved corners */
#inv.open .eq{overflow:visible}
#inv.open .eq::after{content:"";position:absolute;left:50%;top:calc(-6px * var(--k));width:calc(30px * var(--k));height:calc(9px * var(--k));margin-left:calc(-15px * var(--k));background:var(--o-crest) center/contain no-repeat;pointer-events:none}
#inv.open .eq::before{content:"";position:absolute;inset:3px;pointer-events:none;background:var(--o-tick-tl) left top/8px 8px no-repeat,var(--o-tick-tr) right top/8px 8px no-repeat,var(--o-tick-br) right bottom/8px 8px no-repeat,var(--o-tick-bl) left bottom/8px 8px no-repeat;opacity:.9}
#inv.open .eq[class*=" r-"]::before{opacity:0}
/* the bag page: an iron rail with studs down its left edge, filigree in its corners */
#inv.open .bagwrap{border-left:0!important;box-shadow:-10px 0 30px rgba(0,0,0,.45);
  background:var(--o-rail) left top/14px 90px repeat-y,var(--o-c-tr) right 8px top 8px/40px 40px no-repeat,var(--o-c-br) right 8px bottom 8px/40px 40px no-repeat,var(--o-c-bl) left 20px bottom 8px/40px 40px no-repeat,var(--o-c-tl) left 20px top 8px/40px 40px no-repeat,linear-gradient(rgba(12,13,15,.94),rgba(8,9,10,.96))!important}
#inv .ihead .ixp{border-radius:0!important;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%)}
/* item cards and the stats sheet: chamfered, double rim */
#icard .col,#cmp .col,#inv .statspane .sp,#qlog .q,#qlog.open{border:2px solid transparent!important;border-radius:0!important;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);border-image:var(--o-card) 11 / 11px / 0 stretch!important}
#icard .col:last-child,#cmp .col:last-child,#inv .statspane .sp,#qlog.open{border-image:var(--o-card-br) 11 / 11px / 0 stretch!important}

/* ---------- dialogue and the HUD ---------- */
#dialogue{outline:0!important;border:2px solid transparent!important;border-radius:0!important;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);border-image:var(--o-card-br) 11 / 11px / 0 stretch!important}
#dialogue .who{display:flex;align-items:center;gap:8px}
#dialogue .who::after{content:"";width:calc(90px * var(--k));height:calc(9px * var(--k));background:var(--o-rule) left center/100% 100% no-repeat;opacity:.8}
/* life bar with pointed ends, set in a bronze band */
#tLife{position:relative;border:0!important;outline:0!important;border-radius:0!important;padding:1.5px;background:#8a6a3a!important;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
#tLife::before{content:"";position:absolute;inset:1.5px;background:#060708;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
#tLife div{position:relative;border-radius:0!important;clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%)}
#tXp{border-radius:0!important}#tXp div{border-radius:0!important}
/* quest tracker: a soft dark leaf behind it, torn at the right */
#quest{padding:5px 22px 6px 8px;margin-left:-8px;background:linear-gradient(90deg,rgba(10,11,12,.62),rgba(10,11,12,.45) 70%,rgba(10,11,12,.2));-webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y}

/* ---------- fire orange for the calls to action: Play, and the hint notifications (were a yellow post-it) ---------- */
#playBtn{border-image:var(--o-fire) 11 fill / 11px / 0 stretch!important;color:#241304!important;text-shadow:0 1px 0 rgba(255,236,200,.35)!important;filter:drop-shadow(0 0 14px rgba(238,162,74,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.7));animation:playin .8s ease-out both,firepulse 2.4s ease-in-out .8s infinite!important;box-shadow:none!important}
#playBtn:hover{border-image:var(--o-fire-hi) 11 fill / 11px / 0 stretch!important}
@keyframes firepulse{50%{filter:drop-shadow(0 0 24px rgba(238,162,74,.65)) drop-shadow(0 3px 6px rgba(0,0,0,.7))}}
#callout{border:2px solid transparent!important;border-image:var(--o-fire) 11 fill / 11px / 0 stretch!important;background:none!important;box-shadow:none!important;color:#241304!important;
  font:600 calc(12px * var(--k))/1.25 var(--f-body)!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,236,200,.35);padding:calc(6px * var(--k)) calc(13px * var(--k))!important;
  filter:drop-shadow(0 0 8px rgba(238,162,74,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.6));animation:callin .3s ease-out,nudgeR 1.4s ease-in-out .3s infinite!important}
#callout.up,#callout.bag{animation:callin .3s ease-out,nudgeU 1.4s ease-in-out .3s infinite!important}
#callout b{right:-15px!important;border-left-color:#efa853!important;filter:none!important}
#callout.up b,#callout.bag b{border-bottom-color:#efa853!important}

/* ---------- loot labels: pointed plates in the rarity colour; the one the pick-up button means is filled and glows ---------- */
.loot-label{border:2px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:0!important;padding:1px 13px 2px!important;
  border-image:var(--o-tag-normal) 12 10 fill / 50% 10px / 0 stretch!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));text-shadow:0 1px 2px #000}
.loot-label.magic{border-image-source:var(--o-tag-magic)!important}.loot-label.rare{border-image-source:var(--o-tag-rare)!important}.loot-label.unique{border-image-source:var(--o-tag-unique)!important}
.loot-label:hover{filter:drop-shadow(0 0 5px var(--rc)) drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.loot-label.focus{background:none!important;box-shadow:none!important;text-shadow:none;border-image-source:var(--o-tag-normal-f)!important;animation:tagpulse 1.8s ease-in-out infinite!important}
.loot-label.focus.magic{border-image-source:var(--o-tag-magic-f)!important}.loot-label.focus.rare{border-image-source:var(--o-tag-rare-f)!important}.loot-label.focus.unique{border-image-source:var(--o-tag-unique-f)!important}
@keyframes tagpulse{0%,100%{filter:drop-shadow(0 0 5px var(--rc)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 12px var(--rc)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}}

/* ---------- skill and action buttons: a beveled metal rim instead of a flat line ---------- */
.tbtn{border:2px solid transparent!important;outline:0!important;background:radial-gradient(circle at 50% 35%,#1c1d20,#0a0b0c) padding-box,linear-gradient(155deg,#d0aa6c,#6a5230 38%,#9a7842 62%,#3a2c18) border-box!important;
  box-shadow:0 0 0 1.5px #070809,0 3px 8px rgba(0,0,0,.65)!important}
.tbtn.main{border-width:3px!important}
.tbtn.main::before{content:"";position:absolute;inset:-11px;border-radius:50%;background:var(--o-ring) center/100% 100% no-repeat;pointer-events:none;z-index:-1}
.tbtn.press{background:radial-gradient(circle at 50% 35%,#1c1d20,#0a0b0c) padding-box,linear-gradient(155deg,#ffdcb4,#c9a266 40%,#eea24a 65%,#6a5230) border-box!important}
.tbtn.main.talk{background:radial-gradient(circle,#3a2e1a,#15110a) padding-box,linear-gradient(155deg,#ffdcb4,#b8913e 45%,#eea24a 65%,#6a5230) border-box!important}
.tbtn kbd,.tact kbd{border-radius:0!important;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%);padding:0 7px!important;background:#0c0d0f!important;border:0!important;color:var(--bone)!important}
/* talk: dark iron with a bronze rim · pick up: a gold coin with a raised rim and an engraved inner ring */
.tact{border:2px solid transparent!important;outline:0!important;background:radial-gradient(circle at 50% 38%,#3a3c41,#141518) padding-box,linear-gradient(155deg,#d0aa6c,#6a5230 38%,#9a7842 62%,#3a2c18) border-box!important}
.tact::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(238,162,74,.35);pointer-events:none}
.tact.talk.on{background:radial-gradient(circle at 50% 38%,#3a3c41,#141518) padding-box,linear-gradient(155deg,#ffdcb4,#b8913e 45%,#eea24a 65%,#6a5230) border-box!important}
.tact.pick{border-width:3px!important;background:radial-gradient(circle at 50% 32%,#fbcf94,#e28e32 45%,#a85a14 100%) padding-box,linear-gradient(155deg,#ffe4c4,#8a6a3a 40%,#eea24a 62%,#4a3a22) border-box!important}
.tact.pick::before{inset:5px;border:1.5px solid rgba(90,60,10,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(255,255,255,.3)}