/* =====================================================================
   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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23t%29'/%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%28%23t%29'/%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%28%23r%29'/%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%28%23a%29'/%3E%3Cpolygon points='240,12 140,11 132,12 140,13' fill='url%28%23b%29'/%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%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='%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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%28%23g%29' 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%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='%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%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");
  /* (the user's, 16.10.: a quest item's tag in turquoise and an artifact's in violet, the same pointed plate as the others — focused, the quest one a deep teal with a bright rim, its text kept light) */
  --o-tag-quest: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='%233fe6d2' 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='%233fe6d2' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-quest-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='%23177a72'/%3E%3Cstop offset='1' stop-color='%230a3936'/%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='%2378f4e4' stroke-width='1.5'/%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='%233fe6d2' stroke-width='.8' opacity='.7'/%3E%3C/svg%3E");
  --o-tag-artifact: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='%23b36bff' 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='%23b36bff' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E");
  --o-tag-artifact-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='%23b36bff'/%3E%3Cstop offset='1' stop-color='%237d4bb3'/%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='%23b36bff' 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,#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{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,.mm-tests .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,.mm-tests .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,.mm-tests .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 .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,.mm-tests .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{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{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:4px 18px 5px 8px;margin-left:-8px;background:linear-gradient(90deg,rgba(10,11,12,.5),rgba(10,11,12,.32) 45%,rgba(10,11,12,0) 80%);-webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y;mask:linear-gradient(#000,#000) left top/calc(100% - 17px) 100% no-repeat,var(--o-torn-r) right top/18px 160px repeat-y}

/* ---------- 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,#explain{border:2px solid transparent!important;border-image:var(--o-fire) 11 fill / 6px / 0 stretch!important;background:none!important;box-shadow:none!important;color:#1a0d02!important;
  font:700 calc(14px * var(--k))/1.3 var(--f-body)!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,236,200,.45);padding:calc(7px * var(--k)) calc(14px * 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.quest{border-image-source:var(--o-tag-quest)!important}.loot-label.artifact{border-image-source:var(--o-tag-artifact)!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}.loot-label.focus.quest{border-image-source:var(--o-tag-quest-f)!important;color:#d6fff8!important;text-shadow:0 1px 2px #000}.loot-label.focus.artifact{border-image-source:var(--o-tag-artifact-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.use{border-width:3px!important;background:radial-gradient(circle at 50% 32%,#9ff8ea,#2ec8b4 45%,#0e6a60 100%) padding-box,linear-gradient(155deg,#d8fff8,#2a8a80 40%,#3fe6d2 62%,#0a3a34) border-box!important;box-shadow:0 0 18px rgba(63,230,210,.55)}
.tact.use::before{inset:5px;border:1.5px solid rgba(6,50,44,.55)}
.tact.use svg{stroke:#052622!important;stroke-width:2!important}
/* the rift gate's use button: violet (js/story/rift.js) */
.tact.use.rift{background:radial-gradient(circle at 50% 32%,#e6c8ff,#a060f0 45%,#4a1488 100%) padding-box,linear-gradient(155deg,#f4e4ff,#6a2ab0 40%,#b36bff 62%,#2a0a4a) border-box!important;box-shadow:0 0 18px rgba(179,107,255,.6)}
.tact.use.rift::before{border-color:rgba(40,8,70,.55)}
.tact.use.rift svg{stroke:#1e0636!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)}

/* ---------- worn iron under the menus ---------- */
/* the plain anthracite surfaces (map, skills, inventory) carry the menus' worn iron (panelGround: hammered metal, tarnish, an engraved
   lattice, scratches) under a thinner veil, and a faint engraved arc (--o-engrave) in a corner; their frames and filigree stay */
:is(#mapPanel,#qlog) .mlist,#skills .slist{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,rgba(38,40,44,.5),rgba(30,32,35,.58)),var(--tex-panel) 0 0/384px 384px,#222427!important}
:is(#mapPanel,#qlog) .mpage{background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.04),transparent 60%),linear-gradient(rgba(34,36,40,.52),rgba(20,21,24,.62)),var(--tex-panel) 0 0/384px 384px,#1c1d20!important}
#skills .spage{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(34,36,40,.52),rgba(20,21,24,.62)),var(--tex-panel) 0 0/384px 384px,#1c1d20!important}
#inv.open{background:radial-gradient(ellipse at 34% 58%,rgba(120,124,132,.16),transparent 42%),linear-gradient(rgba(36,38,42,.52),rgba(16,17,19,.66)),var(--tex-panel) 0 0/384px 384px,var(--an-0)!important}
#inv.open .bagwrap{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,.6),rgba(8,9,10,.7)),var(--tex-panel) 128px 64px/384px 384px,#0c0d0f!important}

/* ---------- the Chronicle (js/ui/chronicle.js): like the map — a torn leaf of chapters on the left, a page of cards on the right ---------- */
#chron{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;background:var(--an-1);pointer-events:auto}
#chron.open{display:flex}
#chron .plate-title{padding:calc(8px + var(--st)) 0 6px!important;font-size:calc(11px * var(--k))!important}
#chron .xclose{position:absolute;right:calc(10px + var(--sr));top:calc(8px + var(--st));width:calc(28px * var(--k));height:calc(28px * var(--k));font-size:calc(15px * var(--k));z-index:5}
#chron .cbody{flex:1;min-height:0;display:flex}
#chron .clist{position:relative;z-index:2;flex:none;width:clamp(210px,28%,340px);margin-right:-16px;overflow-y:auto;padding:0 26px 26px calc(14px + var(--sl));
  background:linear-gradient(90deg,transparent calc(100% - 16px),rgba(217,205,178,.05) calc(100% - 11px),rgba(217,205,178,.2)),linear-gradient(0deg,rgba(217,205,178,.18),rgba(217,205,178,.04) 10px,transparent 15px),linear-gradient(90deg,rgba(38,40,44,.5),rgba(30,32,35,.58)),var(--tex-panel) 0 0/384px 384px,#222427;
  -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}
#chron h3{margin:10px 0 8px 4px;font:600 calc(9px * var(--k)) var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
#chron 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}
#chron .ctab{display:block;width:100%;text-align:left;margin:0 0 calc(7px * var(--k));padding:calc(7px * var(--k)) calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;background:none;cursor:pointer;color:var(--bone)}
#chron .ctab b{display:block;font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.18em;text-transform:uppercase}
#chron .ctab small{display:block;margin-top:2px;font:calc(10px * var(--k)) var(--f-body);color:var(--bone-lo)}
#chron .ctab.on{border-image-source:var(--o-tile-gold);filter:drop-shadow(0 0 6px rgba(238,162,74,.35))}#chron .ctab.on b{color:#eea24a}
#chron .cnote{margin:0 4px;font:calc(10.5px * var(--k))/1.4 var(--f-body);color:var(--bone-lo)}#chron .cnote em{font-style:normal;color:#eea24a;font-weight:600}
#chron .cpage{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(8px * var(--k));padding:10px calc(14px + var(--sr)) calc(10px + var(--sb)) 30px;box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 22px 0 26px -18px rgba(0,0,0,.8);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.04),transparent 60%),linear-gradient(rgba(34,36,40,.52),rgba(20,21,24,.62)),var(--tex-panel) 0 0/384px 384px,#1c1d20}
/* the banner: the rank in a gold diamond, the bar to the next, what the next rank pays */
#chron .cbanner{flex:none;display:flex;align-items:center;gap:calc(14px * var(--k));padding:calc(8px * var(--k)) calc(16px * var(--k));border:2px solid transparent;border-image:var(--o-card-br) 11 fill / 11px / 0 stretch;
  background:radial-gradient(ellipse at 12% 50%,rgba(238,162,74,.16),transparent 55%),linear-gradient(rgba(10,11,12,.55),rgba(10,11,12,.7));filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
#chron .crank{flex:none;width:calc(40px * var(--k));height:calc(40px * var(--k));transform:rotate(45deg);border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 8px rgba(238,162,74,.45))}
#chron .crank span{transform:rotate(-45deg);font:600 calc(13px * var(--k)) var(--f-display);color:#ffdcb4}
#chron .cmid{flex:1;min-width:0}
#chron .cmid b{display:block;font:600 calc(13px * var(--k)) var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
#chron .cmid small{display:block;font:calc(9.5px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone-lo);margin:1px 0 4px}
#chron .cbar{position:relative;height:calc(10px * var(--k));border:1px solid #000;outline:1px solid var(--bronze-lo);background:#0c0d0e}
#chron .cbar div{height:100%;background:linear-gradient(90deg,#8a5a1c,#eea24a);box-shadow:0 0 8px rgba(238,162,74,.5)}
#chron .cbar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 calc(8px * var(--k)) var(--f-display);font-style:normal;color:#fff;text-shadow:0 1px 2px #000}
#chron .cnext{flex:none;display:flex;gap:calc(5px * var(--k))}
/* the cards: picture | name and count / what to do / how / bar, reward, one button */
#chron .ccards{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;flex-direction:column;gap:calc(8px * var(--k));padding:2px 4px 6px 0}
#chron .ccard{flex:none;display:flex;align-items:stretch;gap:calc(12px * var(--k));padding:calc(7px * var(--k));border:2px solid transparent;border-image:var(--o-card) 11 fill / 11px / 0 stretch;background:linear-gradient(90deg,rgba(40,42,46,.5),rgba(16,17,19,.6))}
#chron .ccard.ready{border-image-source:var(--o-card-gold);background:radial-gradient(ellipse at 80% 50%,rgba(238,162,74,.16),transparent 60%),linear-gradient(90deg,rgba(52,44,32,.6),rgba(20,18,15,.7));filter:drop-shadow(0 0 8px rgba(238,162,74,.3))}
#chron .ccard.full{opacity:.72}
#chron .cpic,#chron .cicon{flex:none;position:relative;width:calc(104px * var(--k));align-self:stretch;min-height:calc(66px * var(--k));background:#0d0e0f center/cover no-repeat;box-shadow:inset 0 0 14px rgba(0,0,0,.8);outline:1px solid var(--bronze-lo)}
#chron .cicon{width:calc(46px * var(--k));min-height:0;height:calc(46px * var(--k));align-self:center;display:flex;align-items:center;justify-content:center;outline:none;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;box-shadow:none}
#chron .cicon svg{width:58%;height:58%;fill:none;stroke:var(--bronze);stroke-width:1.6}
#chron .ccard.ready .cicon svg{stroke:#eea24a}
#chron .chere{position:absolute;left:0;right:0;bottom:0;padding:2px 0;text-align:center;background:rgba(10,11,12,.72);font:600 calc(8px * var(--k)) var(--f-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#eea24a}
#chron .ccard.locked .cpic{filter:grayscale(1) brightness(.45)}
#chron .ccard.locked .cpic svg{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);fill:none;stroke:var(--bone-lo);stroke-width:1.6}
#chron .ccard.locked .chead b{color:var(--bone-lo)}
#chron .cmain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(3px * var(--k))}
#chron .chead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:3px;margin-bottom:2px;border-bottom:1px solid rgba(138,106,58,.35)}
#chron .chead b{font:600 calc(11px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
#chron .ctag{flex:none;font:calc(10px * var(--k)) 'Alegreya SC',var(--f-body);color:var(--bone-lo)}
#chron .cwhat{font:600 calc(13.5px * var(--k))/1.2 var(--f-body);color:var(--bone)}
#chron .ccard.ready .cwhat{color:#ffdcb4}
#chron .chow{font:calc(11px * var(--k))/1.3 var(--f-body);color:var(--bone-lo)}
#chron .chow.got{font-style:italic}
#chron .cfoot{display:flex;align-items:center;gap:calc(10px * var(--k));margin-top:calc(4px * var(--k))}
#chron .cprog{position:relative;flex:1;min-width:calc(70px * var(--k));height:calc(16px * var(--k));border:1px solid #000;outline:1px solid var(--bronze-lo);background:#0c0d0e}
#chron .cprog div{height:100%;background:linear-gradient(90deg,#5a4a2a,#9a7a44)}
#chron .cprog.full div{background:linear-gradient(90deg,#8a5a1c,#eea24a);box-shadow:0 0 8px rgba(238,162,74,.5)}
#chron .cprog em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 calc(9px * var(--k)) var(--f-display);font-style:normal;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
#chron .crew{flex:none;display:flex;gap:calc(6px * var(--k))}
#chron .rw{position:relative;flex:none;width:calc(34px * var(--k));height:calc(34px * var(--k));display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-image:var(--o-tile) 11 fill / 11px / 0 stretch;font:700 calc(11px * var(--k)) var(--f-display);font-style:normal;color:#9fd0ff}
#chron .rw.gold b{width:58%;height:58%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,#e0b040 45%,#8a6010);box-shadow:0 0 6px rgba(238,190,74,.6)}
#chron .rw em{position:absolute;right:-3px;bottom:-4px;font:600 calc(9px * var(--k)) var(--f-display);font-style:normal;color:#ffdcb4;text-shadow:0 0 3px #000,0 0 3px #000}
#chron .rw.shard b{width:46%;height:46%;transform:rotate(45deg);background:linear-gradient(135deg,#f0dcff,#9a4ae8 55%,#4a1488);box-shadow:0 0 7px rgba(179,107,255,.8)}
#chron .rw.item svg{width:76%;height:76%;fill:none;stroke:var(--rc);stroke-width:1.8;filter:drop-shadow(0 0 3px var(--rc))}
/* one button per task, the same size wherever it is: Claim (fire) or Show (a map pin) */
#chron .cshow,#chron .cclaim{flex:none;min-width:calc(92px * var(--k));height:calc(34px * var(--k));display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid transparent;background:none;cursor:pointer;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.14em;text-transform:uppercase}
#chron .cshow{border-image:var(--o-tile) 11 fill / 11px / 0 stretch;color:var(--bone)}
#chron .cshow svg{width:calc(15px * var(--k));height:calc(15px * var(--k));fill:none;stroke:#eea24a;stroke-width:1.8}
#chron .cshow:hover{border-image-source:var(--o-tile-gold)}
#chron .cshow{min-width:0;width:calc(38px * var(--k))} /* (the pin alone, an icon button: the quest window's pin is the same) */
#chron .cshow svg{width:calc(18px * var(--k));height:calc(18px * var(--k))}
#chron .cclaim{border-image:var(--o-fire) 11 fill / 11px / 0 stretch;color:#241304;animation:cpulse 1.6s ease-in-out infinite}
#chron .cclaim.all{min-width:calc(120px * var(--k));margin-left:calc(6px * var(--k))}
@keyframes cpulse{50%{filter:drop-shadow(0 0 8px rgba(238,162,74,.8)) brightness(1.12)}}
/* the chapters' badges: rewards waiting there */
#chron .ctab{position:relative}
#chron .cbadge{position:absolute;right:calc(10px * var(--k));top:calc(8px * var(--k));min-width:calc(18px * var(--k));height:calc(18px * var(--k));padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#eea24a;color:#241304;font:700 calc(10px * var(--k)) var(--f-display);font-style:normal;box-shadow:0 0 8px rgba(238,162,74,.7)}
#chron .cfloat{position:absolute;z-index:6;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font:600 calc(12px * var(--k)) var(--f-display);color:#ffdcb4;text-shadow:0 0 6px rgba(238,162,74,.9),0 1px 2px #000;animation:cfloat 1.5s ease-out both}
@keyframes cfloat{0%{opacity:0;margin-top:0}15%{opacity:1}100%{opacity:0;margin-top:-50px}}
#chron.opening .clist{animation:pFromL .45s var(--ease-out) both}
#chron.opening .cbanner{animation:pRise .45s var(--ease-out) .08s both}
#chron.opening .ccard{animation:pFromR .4s var(--ease-out) both}
#chron.opening .ccard:nth-child(2){animation-delay:.05s}#chron.opening .ccard:nth-child(3){animation-delay:.1s}#chron.opening .ccard:nth-child(4){animation-delay:.15s}#chron.opening .ccard:nth-child(5){animation-delay:.2s}#chron.opening .ccard:nth-child(6){animation-delay:.25s}
/* a reward waits: the menu button's dot, Claim on the Chronicle's tile */
#side.claim .sbtn[data-open="menu"] .dot{display:block}
#gmenu .tile .claim{position:absolute;top:6px;right:8px;display:none;font:600 calc(8px * var(--k)) var(--f-display);letter-spacing:.1em;font-style:normal;color:#eea24a}
#gmenu.claim .tile .claim{display:block}

/* the map opened from the Chronicle: back to it */
:is(#mapPanel,#qlog) .mback{position:absolute;z-index:4;left:calc(12px * var(--k));top:calc(10px * var(--k));display:flex;align-items:center;gap:6px;padding:calc(5px * var(--k)) calc(12px * var(--k)) calc(5px * var(--k)) calc(8px * var(--k));border:2px solid transparent;border-image:var(--o-tile-gold) 11 fill / 11px / 0 stretch;background:none;cursor:pointer;color:#eea24a;font:600 calc(9.5px * var(--k)) var(--f-display);letter-spacing:.16em;text-transform:uppercase}
:is(#mapPanel,#qlog) .mback svg{width:calc(13px * var(--k));height:calc(13px * var(--k));fill:none;stroke:#eea24a;stroke-width:2}
:is(#mapPanel,#qlog) .mback[hidden]{display:none}
/* FEATURE UNLOCKED: a plate over the world, like the level-up */
#feat{position:fixed;z-index:52;left:50%;top:22%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:4px;min-width:calc(280px * var(--k));padding:calc(10px * var(--k)) calc(40px * var(--k)) calc(12px * var(--k));pointer-events:none;
  border:2px solid transparent;border-image:var(--o-card-br) 11 fill / 11px / 0 stretch;background:radial-gradient(ellipse at 50% 50%,rgba(238,162,74,.2),transparent 70%);filter:drop-shadow(0 6px 16px rgba(0,0,0,.7))}
#feat.on{display:flex;animation:featIn 3.2s ease-out both}
#feat small{font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:#eea24a}
#feat b{font:600 calc(20px * var(--k)) var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:#ffdcb4;text-shadow:0 0 14px rgba(238,162,74,.6)}
#feat::before,#feat::after{content:"";position:absolute;top:50%;width:calc(60px * var(--k));height:calc(12px * var(--k));margin-top:calc(-6px * var(--k));background:var(--o-fl-l) center/contain no-repeat}
#feat::before{right:100%}#feat::after{left:100%;background-image:var(--o-fl-r)}
@keyframes featIn{0%{opacity:0;transform:translateX(-50%) scale(.85)}10%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}

/* a guided step (UI.guideOn): only its target answers; the rest of the HUD and the panels is dimmed and dead */
body.guiding #side .sbtn:not(.gtarget),body.guiding #gmenu button:not(.gtarget),body.guiding #chron button:not(.gtarget),body.guiding #inv button:not(.gtarget),body.guiding :is(#mapPanel,#qlog) button:not(.gtarget),body.guiding #touch *:not(.gtarget){pointer-events:none!important} /* (the button the guide points at stays pressable: the potion could not be drunk under its own guide) */
body.guiding #gmenu button:not(.gtarget),body.guiding #chron button:not(.gtarget){opacity:.4!important;filter:grayscale(.6)!important;animation:none!important}
body.guiding .gtarget{z-index:3}body.guiding .gtarget:not(.sbtn):not(.xclose):not(.tpot){position:relative} /* (and the panels' ✕: placed absolutely in its corner, made relative it jumped to the top left) */ /* (the side buttons are placed absolutely: made relative, the portal button jumped out of its place) */

#explain{animation:callin .3s ease-out!important} /* the pointer label, but it points nowhere: no nudge */

/* the rank banner is the chapter's head: a tab as big as the cards (bigger rank, title, bar), the cards hang under it, indented on a bronze line */
#chron .cbanner{padding:calc(12px * var(--k)) calc(20px * var(--k));gap:calc(18px * var(--k));min-height:calc(76px * var(--k))}
#chron .crank{width:calc(56px * var(--k));height:calc(56px * var(--k));margin:0 calc(6px * var(--k))}
#chron .crank span{font-size:calc(19px * var(--k))}
#chron .cmid b{font-size:calc(17px * var(--k))}
#chron .cmid small{font-size:calc(11px * var(--k));margin:3px 0 6px}
#chron .cbar{height:calc(14px * var(--k))}#chron .cbar em{font-size:calc(10px * var(--k))}
#chron .ccards{margin-left:calc(34px * var(--k));padding-left:calc(16px * var(--k));border-left:2px solid rgba(154,120,66,.55);position:relative}
#chron .ccard{position:relative}
#chron .ccard::before{content:"";position:absolute;left:calc(-18px * var(--k));top:50%;width:calc(16px * var(--k));height:2px;background:rgba(154,120,66,.55)} /* each card's branch off the line */
/* the foe's plate, top centre: the hero's own life bar (pointed ends, bronze rim) under a small name on a plate that fades out to both sides */
#evTimer{position:fixed;left:50%;top:calc(64px * var(--k));transform:translateX(-50%);width:calc(300px * var(--k));text-align:center;display:none;pointer-events:none;z-index:6}
#target,#evTimer{box-sizing:border-box;padding:calc(5px * var(--k)) calc(22px * var(--k)) calc(7px * var(--k));background:linear-gradient(90deg,transparent,rgba(10,11,12,.62) 22%,rgba(10,11,12,.62) 78%,transparent)}
#evTimer .n,#target .n,body.touch #target .n{font:600 calc(9.5px * var(--k))/1.2 var(--f-display)!important;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
#evTimer .bar,#target .bar{height:calc(9px * var(--k))!important;margin:calc(4px * var(--k)) 0 0!important;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%)}
#evTimer .bar::before,#target .bar::before{content:""!important;position:absolute;inset:1.5px!important;left:1.5px!important;right:1.5px!important;top:1.5px!important;width:auto!important;height:auto!important;border:0!important;transform:none!important;background:#060708!important;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
#evTimer .bar::after,#target .bar::after{display:none!important}
#evTimer .bar div,#target .bar div{position:relative;border-radius:0!important;background:linear-gradient(#8e1c14,#4a0c08)!important;clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%)}
#target.boss .bar{background:#8a5ab8!important}#target.boss .bar div{background:linear-gradient(#d04028,#7a1a0c)!important}
#target .af{display:none;font:italic 600 calc(8.5px * var(--k))/1.2 Georgia,serif;color:#d9cdb2;letter-spacing:.06em;text-shadow:0 1px 2px #000;margin-top:1px}
#target.boss .n{font-size:calc(12.5px * var(--k))!important}

/* a mechanic's countdown: the target plate in the makers' turquoise */
#evTimer .n{color:#5ff0e0!important}
#evTimer .bar div{background:linear-gradient(#3fe6d2,#127a70)!important}

/* the item spiral: power at a glance, what it would change, a green arrow on better finds */
.ip .pw{font:600 calc(11px * var(--k,1)) var(--f-display,serif);letter-spacing:.12em;color:#b8a888;text-transform:uppercase;margin:2px 0 4px}
.ip .pw b{color:#f0dcb0;font-size:1.25em}
.ip .delta{font:700 calc(12.5px * var(--k,1))/1.3 Georgia,serif;margin:2px 0 6px;padding:3px 8px;border-left:3px solid currentColor;background:rgba(0,0,0,.28)}
.ip .delta.up{color:#6fdc6a}.ip .delta.dn{color:#e0604a}.ip .delta.mix{color:#e8c060}.ip .delta.eq{color:#9a9080;font-weight:400}
.ip .ln.base{color:#f0dcb0;font-weight:700}
.cell{position:relative}
/* the upgrade mark: a drawn arrow, a little crooked, that hops */
:root{--o-upg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2.6 11.4 9.2 2.6c.5-.6 1.1-.6 1.6 0l6.7 8.6c.3.5.1.9-.5.9l-3.3.2.4 7.1c0 .5-.3.8-.8.8l-5.9.3c-.5 0-.8-.3-.8-.8l.2-7-3.4-.2c-.6 0-.8-.5-.4-1.1z' fill='%2362c956' stroke='%23122208' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M5.4 10.6 9.9 4.5' stroke='%23c8f5a8' stroke-width='1.3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E")}
@keyframes upghop{0%,55%,100%{transform:translateY(0) rotate(-4deg)}20%{transform:translateY(-4px) rotate(3deg)}35%{transform:translateY(-1px) rotate(-2deg)}}
.cell .upg{position:absolute;right:1px;top:-2px;width:14px;height:16px;background:var(--o-upg) center/contain no-repeat;filter:drop-shadow(0 1px 1px #000);pointer-events:none;animation:upghop 1.6s ease-in-out infinite}
.loot-label .upg-ic{display:inline-block;width:.8em;height:.95em;margin-right:.3em;vertical-align:-.1em;background:var(--o-upg) center/contain no-repeat;filter:drop-shadow(0 1px 1px #000);animation:upghop 1.6s ease-in-out infinite}
#gmenu.claim .tile[data-go="chron"]{border-image:var(--o-tile-gold) 11 fill / 11px / 0 stretch!important;filter:drop-shadow(0 0 8px rgba(238,162,74,.5))}
/* inventory cells and worn slots as the shop's: the chamfered plate, the rarity a fine frame of its colour inside it with a wash behind the item */
#inv.open .cell,#inv.open .eq{border:2px solid transparent!important;border-radius:0!important;border-image:var(--o-tile) 11 fill / 11px / 0 stretch!important;background-color:transparent!important;box-shadow:none!important;outline:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
#inv.open .cell:not([class*=" r-"]){opacity:.55}
#inv.open .cell[class*=" r-"]::after{content:"";position:absolute;inset:4px;pointer-events:none;border:1.5px solid var(--rc);background:radial-gradient(ellipse at 50% 55%,var(--rg),transparent 72%);box-shadow:inset 0 0 10px var(--rg)}
#inv.open .eq[class*=" r-"]{box-shadow:inset 0 0 0 1.5px var(--rc),inset 0 0 16px var(--rg)!important}
#inv.open .r-normal{--rc:rgba(228,224,214,.6);--rg:rgba(228,224,214,.1)}#inv.open .r-magic{--rc:#5b8dff;--rg:rgba(91,141,255,.32)}
#inv.open .r-rare{--rc:#f5cf3d;--rg:rgba(245,207,61,.3)}#inv.open .r-unique{--rc:#ff7d1f;--rg:rgba(255,125,31,.36)}
#inv.open .r-artifact{--rc:#b36bff;--rg:rgba(179,107,255,.34)}#inv.open .r-quest{--rc:#3fe6d2;--rg:rgba(63,230,210,.32)}
#inv.open .cell:hover,#inv.open .eq:hover{border-image-source:var(--o-tile-gold)!important}
#inv.open .eq.sel,#inv.open .cell.sel{border-image-source:var(--o-tile-gold)!important;outline:0!important;filter:drop-shadow(0 0 7px rgba(238,162,74,.6))}
#inv.open .eq.fit{border-image-source:var(--o-tile-gold)!important;filter:drop-shadow(0 0 9px rgba(255,220,160,.6))}
#inv.open .cell img,#inv.open .eq img{position:relative;z-index:1}#inv.open .cell .upg{z-index:2}
#inv.open .cell img{max-width:86%!important;max-height:86%!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
/* something new behind the menu (a skill learned, a Chronicle reward): the button breathes gold until it is looked at — the frame alone was too quiet to notice */
#side.fresh .sbtn[data-open="menu"],#side.claim .sbtn[data-open="menu"]{border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch!important;animation:menuBreath 1.6s ease-in-out infinite}
@keyframes menuBreath{0%,100%{filter:drop-shadow(0 0 5px rgba(238,162,74,.7))}50%{filter:drop-shadow(0 0 8px #ffc060) drop-shadow(0 0 18px #eea24a) drop-shadow(0 0 30px rgba(238,162,74,.8)) brightness(1.35)}}
#side.fresh .sbtn[data-open="menu"] svg,#side.claim .sbtn[data-open="menu"] svg{stroke:#ffd08a!important}

/* the one badge for "something new here": a gold dot that breathes — on the menu button, on the Skills and Chronicle tiles, on each new skill in the list */
.nb{position:absolute;top:7px;right:9px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe2a8,#eea24a 55%,#b86a1c);border:1px solid #2a1606;box-shadow:0 0 8px rgba(238,162,74,.9);font-size:0!important;animation:nbBreath 1.6s ease-in-out infinite;pointer-events:none}
@keyframes nbBreath{0%,100%{transform:scale(1);box-shadow:0 0 6px rgba(238,162,74,.8)}50%{transform:scale(1.18);box-shadow:0 0 14px rgba(255,190,90,1)}}
#gmenu .tile .nb{top:8px;right:10px}
#skills .slist .sk .nb{position:relative;top:auto;right:auto;margin-left:auto;margin-right:14px;flex:none}
.sbtn .dot{transform:none!important;border-radius:50%!important;width:13px!important;height:13px!important;top:-4px!important;right:-4px!important;background:radial-gradient(circle at 35% 35%,#ffe2a8,#eea24a 55%,#b86a1c)!important;border:1px solid #2a1606!important;animation:nbBreath 1.6s ease-in-out infinite!important} /* (the same dot as the tiles') */
/* the Chronicle on a phone, tighter: the rank banner one slim row, the cards low (a small picture, the task and its bar side by side), so several fit on the screen */
body.touch #chron .cpage{gap:6px;padding-top:6px}
body.touch #chron .cbanner{gap:10px;padding:4px 12px;min-height:0}
body.touch #chron .crank{width:30px;height:30px}
body.touch #chron .crank span{font-size:12px}
body.touch #chron .cmid b{font-size:12px;letter-spacing:.2em;white-space:nowrap}
body.touch #chron .cmid small{margin:0 0 3px;font-size:10px}
body.touch #chron .cbar{height:9px}
body.touch #chron .rw{width:28px;height:28px}
body.touch #chron .cshow,body.touch #chron .cclaim{height:28px;min-width:78px;font-size:10px}body.touch #chron .cshow{min-width:0;width:32px}
body.touch #chron .cclaim.all{min-width:100px}
body.touch #chron .ccards{gap:6px}
body.touch #chron .ccard{gap:10px;padding:4px}
body.touch #chron .cpic{width:70px;min-height:0}
body.touch #chron .chere{font-size:7px;padding:1px 0}
body.touch #chron .chead{padding-bottom:1px;margin-bottom:0}
body.touch #chron .chead b{font-size:10.5px}
body.touch #chron .ctag{font-size:10px}
body.touch #chron .cwhat{font-size:13px;line-height:1.15}
body.touch #chron .chow{font-size:10.5px;line-height:1.2}
body.touch #chron .ccard.ready .chow{display:none}
body.touch #chron .cfoot{margin-top:2px;gap:8px}
body.touch #chron .cprog{height:13px}
/* the Combat Rating over her head: a gold plate; changing, it pops, glows and rolls its number like a fairground counter */
#inv .crate{position:absolute;left:50%;top:calc(100% + 12px * var(--k,1));bottom:auto;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;padding:calc(4px * var(--k)) calc(16px * var(--k)) calc(5px * var(--k));border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));pointer-events:none;white-space:nowrap}
#inv .crate small{font:600 calc(7.5px * var(--k)) var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:#eea24a}
#inv .crate b{font:700 calc(19px * var(--k))/1 var(--f-display);color:#ffdcb4;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000,0 0 10px rgba(238,162,74,.4)}
#inv .crate.up{animation:crPop .9s cubic-bezier(.3,1.6,.5,1) both}
#inv .crate.up b{animation:crGlow 1.3s ease-out}
#inv .crate.down{animation:crShake .5s ease-out both}
#inv .crate.down b{color:#ff8a70}
@keyframes crPop{0%{transform:translateX(-50%) scale(1)}25%{transform:translateX(-50%) scale(1.32) rotate(-3deg);filter:drop-shadow(0 0 18px rgba(255,200,90,1)) brightness(1.35)}55%{transform:translateX(-50%) scale(.94) rotate(2deg)}75%{transform:translateX(-50%) scale(1.08) rotate(-1deg)}100%{transform:translateX(-50%) scale(1);filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}}
@keyframes crGlow{0%,60%{color:#fff;text-shadow:0 0 10px #fff,0 0 22px #ffcf60}100%{color:#ffdcb4}}
@keyframes crShake{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 6px))}40%{transform:translateX(calc(-50% + 5px))}60%{transform:translateX(calc(-50% - 3px))}80%{transform:translateX(calc(-50% + 2px))}}
#inv .crfx{position:absolute;left:50%;top:50%;width:0;height:0;overflow:visible}
#inv .crd{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:700 calc(16px * var(--k)) var(--f-display);font-style:normal;white-space:nowrap;text-shadow:0 2px 4px #000,0 0 10px currentColor;animation:crRise 1.7s ease-out forwards}
#inv .crd.up{color:#7dff6a}#inv .crd.down{color:#ff6a50}
@keyframes crRise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-110%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-320%) scale(1)}}
#inv .crs{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:radial-gradient(circle,#fff8d8,#ffc040 60%,transparent 70%);box-shadow:0 0 8px #ffc040;animation:crSpark 1.1s ease-out both}
@keyframes crSpark{0%{opacity:1;transform:translate(0,0) scale(1.4)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 30px)) scale(.3)}}
/* the Combat Rating beside the level: small, gold, no plate */
#inv .crate{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;display:inline-flex!important;flex-direction:row!important;align-items:baseline;gap:4px;margin-left:10px;padding:0!important;border:0!important;border-image:none!important;filter:none!important}
#inv .crate small{font:600 calc(9px * var(--k)) var(--f-display)!important;letter-spacing:.14em;color:var(--bone-lo)!important}
#inv .crate b{font:600 calc(12px * var(--k)) var(--f-display)!important;color:#eea24a!important;text-shadow:0 1px 2px #000!important}
#inv .crate.up{animation:crPopS .7s cubic-bezier(.3,1.6,.5,1) both!important}
#inv .crate.down{animation:crShakeS .45s ease-out both!important}
@keyframes crPopS{0%{transform:scale(1)}30%{transform:scale(1.35);filter:drop-shadow(0 0 8px rgba(255,200,90,.9))}100%{transform:scale(1)}}
@keyframes crShakeS{0%,100%{transform:none}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
#inv .crate b{animation:none}
#inv .crate.up b{animation:crGlow 1.1s ease-out!important}
#inv .crd{font-size:calc(11px * var(--k))!important}
#inv .ihead .ilvl{display:inline}
#inv .crate svg{width:calc(13px * var(--k));height:calc(13px * var(--k));fill:none;stroke:#eea24a;stroke-width:1.9;stroke-linecap:round;align-self:center;filter:drop-shadow(0 1px 1px #000)} /* crossed swords: the Combat Rating */
/* while an Explain, a map tour, a pointer label or a camera ride runs, the side buttons' news (gold glow, dot) wait: they looked as if they belonged to it */
body.explaining #side .sbtn:not(.ptrtarget){animation:none!important;filter:none!important;border-image-source:var(--o-plate)!important}
body.explaining #side .sbtn:not(.ptrtarget) svg{stroke:var(--bone)!important}
body.explaining #side .sbtn:not(.ptrtarget) .dot{display:none!important}
body.explaining #side.fresh .sbtn[data-open="menu"]:not(.ptrtarget),body.explaining #side.claim .sbtn[data-open="menu"]:not(.ptrtarget){border-image:var(--o-plate) 11 fill / 11px / 0 stretch!important;animation:none!important;filter:none!important}
body.explaining #side.fresh .sbtn[data-open="menu"]:not(.ptrtarget) svg,body.explaining #side.claim .sbtn[data-open="menu"]:not(.ptrtarget) svg{stroke:var(--bone)!important}
/* the world map's filter: what it shows, and the ✕ that clears it */
:is(#mapPanel,#qlog) .mfilter{position:absolute;left:50%;bottom:calc(14px * var(--k));transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;max-width:80%;padding:calc(5px * var(--k)) calc(10px * var(--k)) calc(5px * var(--k)) calc(12px * var(--k));border:2px solid transparent;border-image:var(--o-plate-gold) 11 fill / 11px / 0 stretch;background:none;color:#ffdcb4;font:600 calc(10px * var(--k)) var(--f-display);letter-spacing:.08em;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
:is(#mapPanel,#qlog) .mfilter[hidden]{display:none}
:is(#mapPanel,#qlog) .mfilter i{width:8px;height:8px;background:#eea24a;transform:rotate(45deg);flex:none;box-shadow:0 0 6px #eea24a}
:is(#mapPanel,#qlog) .mfilter span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#mapPanel,#qlog) .mfilter b{flex:none;color:var(--bone);font-size:1.2em;padding-left:4px;border-left:1px solid rgba(238,162,74,.4);margin-left:2px}
:is(#mapPanel,#qlog) .mfilter.side{border-color:rgba(111,157,255,.6)}:is(#mapPanel,#qlog) .mfilter.side i{background:#6f9dff;box-shadow:0 0 6px #6f9dff}
/* the better-find arrow grows with the cell (a fixed 14 px was a speck on a desktop's big cells), with a green glow to be seen at a glance */
.cell .upg{width:30%!important;height:34%!important;right:4%!important;top:3%!important;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 5px rgba(110,230,90,.75))!important}
/* the worn pieces glow in their rarity as the bag's do: the same inset rim and soft fill (the corner ticks give way) */
#inv.open .eq[class*=" r-"]::before{opacity:1!important;inset:4px!important;background:radial-gradient(ellipse at 50% 55%,var(--rg),transparent 72%)!important;border:1.5px solid var(--rc);box-shadow:inset 0 0 10px var(--rg)}
/* the new-dots big enough to see on a desktop (the cells grow with the window) */
body:not(.touch) :is(.nb,#inv .ndot,#inv .itabs button i){width:calc(13px * var(--k))!important;height:calc(13px * var(--k))!important;min-width:12px;min-height:12px}
/* ---------- the game menu with painted cards (the user's design and pictures, 04.10.) ----------
   left: the hero's emblem, class, level and a gold bar; Quests, Map, Chronicle as wide cards (the picture to the right, fading into the dark under the name);
   right: the buttons, a heading, the four tall cards (picture whole, the name at its foot) and Settings as a bar with an arrow */
#gmenu .gside{gap:calc(12px * var(--k))}
#gmenu .gchar{display:flex!important;align-items:center;gap:calc(14px * var(--k));padding:calc(6px * var(--k)) calc(4px * var(--k)) calc(16px * var(--k))!important;border-image:none!important;background:var(--o-div) center bottom/calc(220px * var(--k)) calc(14px * var(--k)) no-repeat!important}
#gmenu .gem{flex:none;width:calc(64px * var(--k));height:calc(64px * var(--k));border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a2622,#0d0c0b 70%);box-shadow:0 0 0 calc(2px * var(--k)) #7a5e34,0 0 0 calc(4px * var(--k)) #15120f,0 0 0 calc(5px * var(--k)) #5a4526,inset 0 0 12px rgba(0,0,0,.9)}
#gmenu .gem svg{width:58%;height:58%;fill:none;stroke:#e8c98e;stroke-width:1.4;filter:drop-shadow(0 0 4px rgba(238,162,74,.45))}
#gmenu .gcw{flex:1;min-width:0}
#gmenu .gname{font:600 calc(19px * var(--k)) var(--f-display)!important;letter-spacing:.14em!important;text-transform:uppercase;color:#f0e2c0}
#gmenu .glvl{font-size:calc(13px * var(--k))!important;margin-top:1px}
#gmenu .gxp{height:calc(7px * var(--k))!important;margin:calc(7px * var(--k)) 0 0!important;border-radius:0!important;background:#0b0a09!important;box-shadow:0 0 0 1px #4a3a22,inset 0 1px 2px #000}
#gmenu .gxp div{background:linear-gradient(90deg,#8a5a22,#e0a85a 70%,#f4cf8a)!important;box-shadow:0 0 6px rgba(238,162,74,.5)}
#gmenu .gquest{display:none!important}
#gmenu .tile{overflow:hidden;isolation:isolate}
#gmenu .tile .art{position:absolute;inset:4px;z-index:-1;background:center/cover no-repeat;pointer-events:none;transition:transform .5s var(--ease-out),filter .3s}
#gmenu .tile:hover .art{transform:scale(1.04);filter:brightness(1.12)}
#gmenu .tile:has(.art) svg{display:none}
#gmenu .tile span{font-size:calc(13px * var(--k))!important;letter-spacing:.16em!important;color:#f0e2c0;text-shadow:0 1px 3px #000,0 0 10px #000}
/* left: the wide cards */
#gmenu .gl .tiles{grid-template-columns:1fr!important;gap:calc(12px * var(--k))}
#gmenu .gl .tiles::after{content:"";display:block;height:calc(16px * var(--k));margin-top:calc(4px * var(--k));background:var(--o-div) center/calc(200px * var(--k)) calc(16px * var(--k)) no-repeat}
#gmenu .gl .tile{grid-column:auto!important;aspect-ratio:2.5!important;align-items:flex-start!important;justify-content:center!important;padding:0 0 0 calc(22px * var(--k))!important;gap:calc(6px * var(--k))!important}
#gmenu .gl .tile .art{left:22%;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
#gmenu .gl .tile svg{display:block!important;width:calc(40px * var(--k))!important;height:calc(40px * var(--k))!important;stroke:#e8c98e!important;margin-left:calc(14px * var(--k))}
#gmenu .gl .tile span{background:none!important;padding:0!important;font-size:calc(18px * var(--k))!important}
/* right: a heading, the tall cards, the bar */
#gmenu .ghead{text-align:center;padding:calc(16px * var(--k)) 0;background:var(--o-div) center top/calc(220px * var(--k)) calc(14px * var(--k)) no-repeat,var(--o-div) center bottom/calc(220px * var(--k)) calc(14px * var(--k)) no-repeat}
#gmenu .ghead span{font:600 calc(15px * var(--k)) var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#d9c79c}
#gmenu .gr .tiles{padding-top:0!important;background:none!important;gap:calc(12px * var(--k))}
#gmenu .gr .tile:not(.bar){aspect-ratio:.8!important;justify-content:flex-end!important;padding-bottom:calc(14px * var(--k))!important}
#gmenu .gr .tile:not(.bar) .art{-webkit-mask:linear-gradient(#000 60%,rgba(0,0,0,.35));mask:linear-gradient(#000 60%,rgba(0,0,0,.35))}
#gmenu .gr .tile:not(.bar):not(:has(.art)){justify-content:center!important}
#gmenu .gr .tile.bar{grid-column:span 2;aspect-ratio:auto!important;height:calc(78px * var(--k));flex-direction:row!important;justify-content:flex-start!important;gap:calc(14px * var(--k))!important;padding:0 calc(20px * var(--k))!important}
#gmenu .gr .tile.bar .art{left:30%;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
#gmenu .gr .tile.bar svg{display:block!important;width:calc(34px * var(--k))!important;height:calc(34px * var(--k))!important;stroke:#e8c98e!important}
#gmenu .gr .tile.bar span{background:none!important;padding:0!important;flex:1;text-align:left}
#gmenu .tile .chev{width:calc(10px * var(--k));height:calc(10px * var(--k));border:solid #e8c98e;border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:calc(4px * var(--k))}
body:not(.touch) #gmenu .gside{width:clamp(360px,28%,470px)!important}
body.touch #gmenu .gl .tile{aspect-ratio:3!important}body.touch #gmenu .gr .tile:not(.bar){aspect-ratio:.95!important}body.touch #gmenu .gr .tile.bar{height:calc(56px * var(--k))}
body.touch #gmenu .gem{width:calc(46px * var(--k));height:calc(46px * var(--k))}body.touch #gmenu .gl .tile span{font-size:calc(14px * var(--k))!important}body.touch #gmenu .ghead{padding:calc(10px * var(--k)) 0}
#gmenu .gr .tile:not(.bar) span{font-size:calc(12px * var(--k))!important;letter-spacing:.1em!important;max-width:100%;white-space:nowrap}
#gmenu .gl .tiles{padding-top:calc(4px * var(--k))!important;background:none!important}
/* the painted menu on a phone (the user's screenshot: names cut, icons over the names): every size from the leaf's own width (cqi) */
body.touch #gmenu .gchar{gap:4cqi;padding:1cqi 1cqi 4cqi!important}
body.touch #gmenu .gem{width:19cqi!important;height:19cqi!important}
body.touch #gmenu .gname{font-size:clamp(9px,6cqi,19px)!important;letter-spacing:.08em!important;white-space:nowrap;overflow:hidden;text-overflow:clip}
body.touch #gmenu .glvl{font-size:clamp(8px,4.6cqi,13px)!important}
body.touch #gmenu .gxp{height:2.4cqi!important;margin-top:2cqi!important}
body.touch #gmenu .gl .tiles,body.touch #gmenu .gr .tiles{gap:3.5cqi!important}
body.touch #gmenu .gl .tile{aspect-ratio:3.2!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:3cqi!important;padding:0 0 0 5cqi!important}
body.touch #gmenu .gl .tile svg{width:10cqi!important;height:10cqi!important;margin:0!important}
body.touch #gmenu .gl .tile span{font-size:clamp(8px,5.4cqi,18px)!important;letter-spacing:.1em!important;white-space:nowrap}
body.touch #gmenu .gl .tile .art{left:35%}
body.touch #gmenu .ghead{padding:3.5cqi 0}body.touch #gmenu .ghead span{font-size:clamp(9px,5.2cqi,15px)}
body.touch #gmenu .gr .tile:not(.bar){aspect-ratio:1!important;padding-bottom:3cqi!important}
body.touch #gmenu .gr .tile:not(.bar) span{font-size:clamp(6.5px,3.5cqi,12px)!important;letter-spacing:.05em!important;overflow:visible!important;text-overflow:clip!important;padding-top:2.4cqi!important;background-size:22cqi 2.6cqi!important}
body.touch #gmenu .gr .tile.bar{height:17cqi!important;gap:4cqi!important;padding:0 5cqi!important}
body.touch #gmenu .gr .tile.bar svg{width:9cqi!important;height:9cqi!important}
body.touch #gmenu .gr .tile.bar span{font-size:clamp(7px,4.2cqi,13px)!important;letter-spacing:.1em!important;overflow:visible!important;text-overflow:clip!important}
body.touch #gmenu .tile .chev{width:2.6cqi;height:2.6cqi}
/* the bag's tabs stay pressable under a guide (the user, 04.10.: the Resources tab could not be opened while a pointer stood) — a step pointing into another tab waits until she is back */
body.guiding #inv .itabs button{pointer-events:auto!important}
/* the game menu on the desktop: the labels sized by the side column's width, not the window's height (05.10., the user: on a taller window
   the text grew with --k while the columns stop at 420 px — 'Fertigkeiten' ran out of its tile, the left labels crowded) */
body:not(.touch) #gmenu .gl .tile span{font-size:min(calc(12px * var(--k)), 5cqi)!important;letter-spacing:.12em!important} /* (smaller still, the user) */
body:not(.touch) #gmenu .gr .tile:not(.bar) span{font-size:min(calc(11px * var(--k)), 3.7cqi)!important;letter-spacing:.06em!important;white-space:nowrap}
body:not(.touch) #gmenu .gr .tile.bar span{font-size:min(calc(12px * var(--k)), 4.6cqi)!important;letter-spacing:.12em!important}
body:not(.touch) #gmenu .gname{font-size:min(calc(19px * var(--k)), 7.2cqi)!important}
body:not(.touch) #gmenu .ghead span{font-size:min(calc(15px * var(--k)), 5.6cqi)!important}