/*
 * ff8-menu.css - Final Fantasy VIII menu component (Judith & Kamyar, 04.09.2027).
 * Shared by every save-the-date page. Do not override .ff8-* classes or --ff8-* properties.
 * Geometry is expressed in native PS1 pixels (320x240 stage): 1 native px = var(--ff8-u).
 * Tokens are pixel-sampled from the FF8 references (see NOTES.md).
 */

/* ------------------------------------------------------------------ isolation */
.ff8-root, .ff8-chip, .ff8-acursor { all: initial; }
.ff8-root.ff8-root :where(:not(svg, svg *)), .ff8-root.ff8-root :where(:not(svg, svg *))::before, .ff8-root.ff8-root :where(:not(svg, svg *))::after,
.ff8-chip.ff8-chip :where(*), .ff8-chip.ff8-chip :where(*)::before, .ff8-chip.ff8-chip :where(*)::after { all: revert; box-sizing: border-box; }
.ff8-root.ff8-root :where(svg) { display: block; overflow: hidden; }
.ff8-root [hidden], .ff8-root.ff8-root [hidden] { display: none !important; }
.ff8-root.ff8-root :where(p, h2, nav, section, div, span) { margin: 0; padding: 0; }

.ff8-root, .ff8-chip, .ff8-acursor {
  --ff8-font: 'Encode Sans', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --ff8-white: #ffffff;
  --ff8-grey-text: #96959e;
  --ff8-off: #a8a8a8;
  --ff8-on: #ffffff;
  --ff8-yellow: #d4d63c;
  --ff8-star: #fdfe4f;
  --ff8-label: #bfbfbf;
  --ff8-fill-dark: #3d3d3d;
  --ff8-fill-light: #646464;
  --ff8-edge-tl: #2a2a2a;
  --ff8-edge-br: #1c1c1c;
  --ff8-bevel-tl: #737373;
  --ff8-bevel-br: #333333;
  /* hard 0.8 native px offset, 40 % black (round 2: the reviewer read 0.7 px at 25 % as barely visible; NOTES.md) */
  --ff8-tshadow: calc(0.8 * var(--ff8-u)) calc(0.8 * var(--ff8-u)) 0 rgba(0, 0, 0, 0.4);
  --ff8-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 510 342'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M2670 3293 c-14 -2 -90 -15 -170 -28 -139 -22 -282 -65 -376 -113 -21 -10 -64 -25 -94 -32 -67 -15 -84 -23 -137 -67 -123 -99 -236 -99 -313 1 -68 87 -183 103 -362 50 -24 -7 -157 -137 -188 -184 -61 -92 -88 -129 -132 -183 -27 -32 -48 -60 -48 -61 0 -2 -9 -48 -20 -101 -37 -178 -53 -980 -31 -1485 12 -272 26 -297 211 -381 l94 -42 66 13 c40 8 78 23 99 39 19 14 59 40 89 56 62 34 88 73 97 147 7 58 29 62 111 24 45 -21 124 -104 124 -131 0 -5 18 -32 40 -62 l41 -53 65 0 c73 0 121 20 168 69 51 54 76 43 76 -31 0 -110 81 -234 168 -258 131 -35 345 -46 417 -22 33 11 74 23 90 26 34 7 189 153 240 225 17 24 40 57 53 74 13 18 26 44 29 60 8 41 53 39 53 -3 0 -73 134 -85 206 -18 41 38 134 200 134 235 0 5 13 27 29 46 16 20 39 61 51 92 21 52 24 55 57 55 l35 0 -5 -42 c-2 -24 -9 -68 -15 -98 -6 -30 -16 -102 -22 -160 -6 -58 -16 -149 -22 -203 -20 -183 12 -264 116 -291 181 -47 248 -29 352 96 138 165 158 394 49 573 -17 26 -46 76 -65 109 -26 44 -55 75 -105 113 -39 29 -81 61 -95 72 l-25 19 -6 238 c-5 174 -11 257 -24 304 -47 182 -81 168 415 174 723 10 793 20 899 126 25 25 60 54 77 65 43 27 174 198 174 226 0 5 25 56 56 112 123 226 101 406 -56 455 -37 12 -143 15 -1030 31 -656 12 -716 15 -840 46 -52 13 -135 29 -185 35 -49 6 -158 19 -240 30 -136 18 -309 24 -375 13z'/%3E%3C/clipPath%3E%3Cfilter id='b' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='40'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(0.000000,420.000000) scale(0.100000,-0.100000)'%3E%3Cpath d='M2670 3293 c-14 -2 -90 -15 -170 -28 -139 -22 -282 -65 -376 -113 -21 -10 -64 -25 -94 -32 -67 -15 -84 -23 -137 -67 -123 -99 -236 -99 -313 1 -68 87 -183 103 -362 50 -24 -7 -157 -137 -188 -184 -61 -92 -88 -129 -132 -183 -27 -32 -48 -60 -48 -61 0 -2 -9 -48 -20 -101 -37 -178 -53 -980 -31 -1485 12 -272 26 -297 211 -381 l94 -42 66 13 c40 8 78 23 99 39 19 14 59 40 89 56 62 34 88 73 97 147 7 58 29 62 111 24 45 -21 124 -104 124 -131 0 -5 18 -32 40 -62 l41 -53 65 0 c73 0 121 20 168 69 51 54 76 43 76 -31 0 -110 81 -234 168 -258 131 -35 345 -46 417 -22 33 11 74 23 90 26 34 7 189 153 240 225 17 24 40 57 53 74 13 18 26 44 29 60 8 41 53 39 53 -3 0 -73 134 -85 206 -18 41 38 134 200 134 235 0 5 13 27 29 46 16 20 39 61 51 92 21 52 24 55 57 55 l35 0 -5 -42 c-2 -24 -9 -68 -15 -98 -6 -30 -16 -102 -22 -160 -6 -58 -16 -149 -22 -203 -20 -183 12 -264 116 -291 181 -47 248 -29 352 96 138 165 158 394 49 573 -17 26 -46 76 -65 109 -26 44 -55 75 -105 113 -39 29 -81 61 -95 72 l-25 19 -6 238 c-5 174 -11 257 -24 304 -47 182 -81 168 415 174 723 10 793 20 899 126 25 25 60 54 77 65 43 27 174 198 174 226 0 5 25 56 56 112 123 226 101 406 -56 455 -37 12 -143 15 -1030 31 -656 12 -716 15 -840 46 -52 13 -135 29 -185 35 -49 6 -158 19 -240 30 -136 18 -309 24 -375 13z' fill='%23fff' stroke='%23000' stroke-width='420' stroke-linejoin='round' paint-order='stroke'/%3E%3Cg clip-path='url(%23c)'%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M5121 2663 c-77 -118 -80 -122 -115 -146 -19 -12 -62 -42 -96 -66 -35 -24 -87 -50 -117 -58 -75 -19 -123 -52 -123 -82 0 -56 218 8 299 89 25 25 60 54 77 65 58 37 174 201 174 246 0 59 -42 39 -99 -48z M3411 1801 c-28 -26 -31 -35 -31 -89 0 -150 -112 -246 -202 -172 -139 115 -218 58 -218 -156 0 -203 -142 -424 -272 -424 -54 0 -117 62 -198 195 -33 55 -80 114 -119 150 l-63 60 -97 0 c-75 0 -110 -5 -161 -24 -187 -67 -516 -32 -662 70 -57 41 -131 0 -174 -96 -12 -27 -40 -73 -61 -101 -21 -28 -52 -72 -70 -97 -36 -52 -62 -62 -127 -53 -86 13 -91 28 -102 334 l-7 182 -29 0 -28 0 0 -152 c2 -589 13 -625 220 -719 l94 -42 66 13 c40 8 78 23 99 39 19 14 59 40 89 56 62 34 88 73 97 148 7 57 29 61 111 23 45 -21 124 -104 124 -131 0 -5 18 -32 40 -62 l41 -53 65 0 c73 0 121 20 168 69 51 54 76 43 76 -31 0 -110 81 -234 168 -258 131 -35 345 -46 417 -22 33 11 74 23 90 26 34 7 189 153 240 225 17 24 40 57 53 74 13 18 26 44 29 60 8 41 53 39 53 -3 0 -73 134 -85 206 -18 41 38 134 200 134 235 0 5 13 27 29 46 16 20 39 61 51 92 21 52 24 55 57 55 l35 0 -5 -42 c-2 -24 -9 -68 -15 -98 -6 -30 -16 -102 -22 -160 -6 -58 -16 -149 -22 -203 -20 -183 12 -264 116 -291 181 -47 248 -29 352 96 138 165 158 394 49 573 -17 26 -46 76 -65 109 -26 44 -55 75 -105 112 -124 92 -125 94 -125 168 l0 66 -60 0 -60 0 0 85 0 85 -28 0 c-17 0 -48 16 -81 40 -68 51 -114 54 -160 11z' fill='%23c5c5c5'/%3E%3Cpath d='M3462 1708 c-14 -18 -32 -111 -32 -166 0 -131 -129 -225 -218 -159 -17 12 -49 37 -73 55 -76 58 -109 37 -109 -71 -2 -335 -236 -658 -439 -607 -72 18 -81 31 -81 116 0 87 -35 172 -99 239 -21 22 -51 58 -66 80 -54 75 -90 81 -290 44 -307 -55 -450 -49 -592 27 -133 71 -165 50 -279 -180 -66 -135 -122 -178 -200 -157 -85 23 -134 77 -134 146 0 20 -5 25 -26 25 l-27 0 6 -98 c9 -174 40 -217 207 -293 l94 -42 66 13 c40 8 78 23 99 39 19 14 59 40 89 56 62 34 88 73 97 148 7 57 29 61 111 23 45 -21 124 -104 124 -131 0 -5 18 -32 40 -62 l41 -53 65 0 c73 0 121 20 168 69 51 54 76 43 76 -31 0 -110 81 -234 168 -258 131 -35 345 -46 417 -22 33 11 74 23 90 26 34 7 189 153 240 225 17 24 40 57 53 74 13 18 26 44 29 60 8 41 53 39 53 -3 0 -73 134 -85 206 -18 41 38 134 200 134 235 0 5 13 27 29 46 16 20 39 61 51 92 21 52 24 55 57 55 l35 0 -5 -42 c-2 -24 -9 -68 -15 -98 -6 -30 -16 -102 -22 -160 -6 -58 -16 -149 -22 -203 -20 -183 12 -264 116 -291 181 -47 248 -29 352 96 138 165 158 394 49 573 -17 26 -46 76 -65 109 -26 44 -55 75 -105 112 -124 92 -125 94 -125 168 l0 66 -60 0 c-50 0 -60 3 -60 18 0 9 -12 25 -28 34 -15 10 -49 33 -77 53 -51 36 -95 45 -113 23z' fill='%23a4a4a4'/%3E%3Cpath d='M3496 1598 c-2 -7 -11 -67 -20 -132 -10 -66 -23 -131 -30 -145 -8 -14 -26 -71 -41 -126 -29 -101 -50 -135 -86 -135 -15 0 -19 -7 -19 -39 0 -26 -5 -41 -16 -45 -27 -10 -36 4 -29 46 5 29 3 44 -9 57 -8 9 -26 53 -39 98 -31 108 -48 133 -91 133 -38 0 -47 -23 -61 -155 -14 -129 -42 -222 -82 -269 -14 -17 -34 -51 -45 -76 -25 -59 -44 -79 -95 -101 -23 -9 -59 -33 -80 -52 -60 -54 -255 -117 -364 -117 -89 0 -128 174 -68 305 106 235 -65 413 -229 237 -30 -32 -33 -33 -87 -27 -43 6 -61 4 -80 -9 -27 -18 -61 -21 -70 -6 -3 5 -29 9 -58 8 -138 -3 -263 35 -328 98 -74 72 -117 31 -118 -112 -1 -86 -15 -108 -93 -146 -107 -54 -292 -60 -365 -12 -54 34 -80 6 -49 -54 20 -38 59 -64 167 -113 l93 -42 66 13 c40 8 78 23 99 39 19 14 59 40 89 56 62 34 88 73 97 148 7 57 29 61 111 23 45 -21 124 -104 124 -131 0 -5 18 -32 40 -62 l41 -53 65 0 c73 0 121 20 168 69 51 54 76 43 76 -31 0 -110 81 -234 168 -258 131 -35 345 -46 417 -22 33 11 74 23 90 26 34 7 189 153 240 225 17 24 40 57 53 74 13 18 26 44 29 60 8 41 53 39 53 -3 0 -73 134 -85 206 -18 41 38 134 200 134 235 0 5 13 27 29 46 16 20 39 61 51 92 21 52 24 55 57 55 l35 0 -5 -42 c-2 -24 -9 -68 -15 -98 -6 -30 -16 -102 -22 -160 -6 -58 -16 -149 -22 -203 -12 -108 7 -230 41 -261 33 -30 212 -64 270 -51 32 7 48 54 19 55 -156 7 -212 18 -239 48 -31 35 -30 72 3 72 20 0 23 291 3 376 -6 26 -2 37 23 65 16 19 32 44 36 56 4 13 23 41 42 64 21 25 34 52 34 69 0 57 16 80 55 80 52 0 50 40 -5 75 -49 31 -60 51 -60 114 0 61 -42 79 -53 23 -18 -91 -90 -108 -119 -28 -29 81 -118 144 -132 94z' fill='%238c8c8c'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ overlay + stage */
.ff8-root {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: #000000; color: #ffffff;
  font-family: var(--ff8-font); font-size: 16px; line-height: 1.25; font-weight: 400;
  text-align: left; direction: ltr; letter-spacing: 0; word-spacing: 0; text-transform: none;
  white-space: normal; visibility: visible; cursor: default;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  --ff8-u: min(calc(100vw / 320), calc(100vh / 240));
}
@supports (height: 100dvh) { .ff8-root { --ff8-u: min(calc(100vw / 320), calc(100dvh / 240)); } }
.ff8-root.ff8-open { display: block; }
.ff8-root.ff8-col { --ff8-u: min(calc(100vw / 184), 3px); }

.ff8-root .ff8-dialog {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; outline: none; margin: 0; padding: 0; border: 0; background: none;
}
.ff8-root.ff8-col .ff8-dialog { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.ff8-root .ff8-stage {
  position: relative; flex: none; display: block; margin: 0; padding: 0;
  width: calc(320 * var(--ff8-u)); height: calc(240 * var(--ff8-u)); isolation: isolate;
  font-family: var(--ff8-font); color: #ffffff;
}
.ff8-root.ff8-col .ff8-stage {
  width: calc(176 * var(--ff8-u)); height: auto; margin: 0 auto; padding: calc(6 * var(--ff8-u)) 0 calc(12 * var(--ff8-u));
  display: flex; flex-direction: column; gap: calc(3 * var(--ff8-u));
}

.ff8-root .ff8-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ positioning */
.ff8-root .ff8-abs {
  position: absolute; display: block; margin: 0;
  left: calc(var(--ff8-x) * var(--ff8-u)); top: calc(var(--ff8-y) * var(--ff8-u));
  width: calc(var(--ff8-w) * var(--ff8-u)); height: calc(var(--ff8-h) * var(--ff8-u));
}
.ff8-root .ff8-grp { display: block; padding: 0; border: 0; background: none; }
.ff8-root.ff8-col .ff8-abs { position: relative; left: auto; top: auto; width: auto; height: auto; }
.ff8-root.ff8-col .ff8-win { min-height: calc(var(--ff8-mh, var(--ff8-h)) * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-o1 { order: 1; } .ff8-root.ff8-col .ff8-o2 { order: 2; }
.ff8-root.ff8-col .ff8-o3 { order: 3; } .ff8-root.ff8-col .ff8-o4 { order: 4; }
.ff8-root.ff8-col .ff8-o5 { order: 5; } .ff8-root.ff8-col .ff8-o6 { order: 6; }
.ff8-root.ff8-col .ff8-o7 { order: 7; } .ff8-root.ff8-col .ff8-o8 { order: 8; }

/* ------------------------------------------------------------------ window (measured) */
.ff8-root .ff8-win, .ff8-chip .ff8-win, .ff8-chip.ff8-win {
  background-color: var(--ff8-fill-light);
  background-image: linear-gradient(90deg, var(--ff8-fill-dark) calc(2 * var(--ff8-u)), var(--ff8-fill-light) calc(102 * var(--ff8-u)));
  box-shadow:
    inset calc(1 * var(--ff8-u)) calc(1 * var(--ff8-u)) 0 0 var(--ff8-edge-tl),
    inset calc(-1 * var(--ff8-u)) calc(-1 * var(--ff8-u)) 0 0 var(--ff8-edge-br),
    inset calc(2 * var(--ff8-u)) calc(2 * var(--ff8-u)) 0 0 var(--ff8-bevel-tl),
    inset calc(-2 * var(--ff8-u)) calc(-2 * var(--ff8-u)) 0 0 var(--ff8-bevel-br);
  border: 0; border-radius: 0; padding: 0; color: #ffffff;
}
/* window label: HELP / STATUS / INFO. sitting on the top-left border */
.ff8-root .ff8-lab {
  position: absolute; left: calc(3.8 * var(--ff8-u)); top: calc(-0.2 * var(--ff8-u)); z-index: 1; display: block; margin: 0; padding: 0;
  font-family: var(--ff8-font); font-weight: 900; font-stretch: 125%; font-style: normal;
  font-size: calc(5.4 * var(--ff8-u)); line-height: 1; letter-spacing: 0.14em; color: var(--ff8-label); white-space: nowrap;
  text-shadow:
    calc(0.5 * var(--ff8-u)) 0 0 #000, calc(-0.5 * var(--ff8-u)) 0 0 #000, 0 calc(0.5 * var(--ff8-u)) 0 #000, 0 calc(-0.5 * var(--ff8-u)) 0 #000,
    calc(0.4 * var(--ff8-u)) calc(0.4 * var(--ff8-u)) 0 #000, calc(-0.4 * var(--ff8-u)) calc(0.4 * var(--ff8-u)) 0 #000, calc(0.4 * var(--ff8-u)) calc(-0.4 * var(--ff8-u)) 0 #000, calc(-0.4 * var(--ff8-u)) calc(-0.4 * var(--ff8-u)) 0 #000;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.ff8-root .ff8-lab--r { left: auto; right: calc(4 * var(--ff8-u)); }

/* ------------------------------------------------------------------ type */
.ff8-root .ff8-tx, .ff8-chip .ff8-tx {
  display: block; margin: 0; padding: 0;
  font-family: var(--ff8-font); font-weight: 450; font-stretch: 80%; font-style: normal;
  font-size: calc(11.6 * var(--ff8-u)); line-height: 1.25; letter-spacing: 0.012em; word-spacing: 0.04em; color: #ffffff; white-space: nowrap;
  text-shadow: var(--ff8-tshadow);
  text-decoration: none; text-transform: none;
}
.ff8-root .ff8-fig {
  font-family: var(--ff8-font); font-weight: 800; font-stretch: 96%; font-style: normal;
  font-size: calc(9.2 * var(--ff8-u)); line-height: 1.25; letter-spacing: 0.03em; color: #ffffff; white-space: nowrap; margin: 0;
  text-shadow: calc(0.6 * var(--ff8-u)) calc(0.6 * var(--ff8-u)) calc(0.2 * var(--ff8-u)) rgba(0, 0, 0, 0.6), 0 0 calc(0.35 * var(--ff8-u)) rgba(0, 0, 0, 0.45);
}
.ff8-root .ff8-num { font-stretch: 112%; letter-spacing: 0.17em; margin-right: -0.17em; }
.ff8-root .ff8-wrap { white-space: normal; }
.ff8-root .ff8-grey { color: var(--ff8-grey-text); }
.ff8-root .ff8-off { color: var(--ff8-off); }
.ff8-root .ff8-on { color: var(--ff8-on); }
.ff8-root .ff8-yel { color: var(--ff8-yellow); }
.ff8-root .ff8-star { color: var(--ff8-star); font-size: 0.82em; margin-left: 0.12em; letter-spacing: 0; }
.ff8-root .ff8-colon { color: #a8a8a8; }
.ff8-root .ff8-g { font-size: 0.62em; letter-spacing: 0; margin-left: 0.08em; }

/* ------------------------------------------------------------------ options + cursor */
.ff8-root .ff8-opt {
  position: relative; display: block; margin: 0; padding: 0; border: 0; border-radius: 0;
  outline: none; appearance: none; -webkit-appearance: none;
  font-family: var(--ff8-font); color: #ffffff; text-align: left; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.ff8-root .ff8-opt:not(.ff8-win) { background: none; box-shadow: none; }
.ff8-root .ff8-opt.ff8-row { width: 100%; height: calc(13 * var(--ff8-u)); line-height: calc(13 * var(--ff8-u)); }
/* touch target: at least 44 CSS px tall even though rows are 13 native px */
.ff8-root .ff8-opt.ff8-row::after {
  content: ''; position: absolute; left: calc(-14 * var(--ff8-u)); right: 0;
  top: calc(50% - max(50%, 22px)); height: max(100%, 44px);
}
.ff8-root .ff8-opt:focus-visible { outline: none; }
.ff8-root .ff8-opt[aria-disabled='true'] { color: var(--ff8-grey-text); }
.ff8-root .ff8-opt[aria-disabled='true'] .ff8-tx { color: var(--ff8-grey-text); }

/* the glove: points right, fingertip 1.2 native px before the text, overlaps borders */
.ff8-root .ff8-opt.ff8-cur::before, .ff8-root .ff8-opt.ff8-parent::before {
  content: ''; position: absolute; z-index: 20; pointer-events: none; display: block;
  width: calc(21.8 * var(--ff8-u)); height: calc(14.6 * var(--ff8-u));
  right: calc(100% + calc(var(--ff8-cgap, 1.2) * var(--ff8-u)));
  top: calc(50% + calc(var(--ff8-cy, -2.6) * var(--ff8-u)));
  background: var(--ff8-hand) no-repeat 0 0 / 100% 100%;
}
.ff8-root .ff8-opt.ff8-parent::before { animation: ff8-blink 0.1s steps(1, end) infinite; }
.ff8-root .ff8-stage.ff8-closing .ff8-opt::before { visibility: hidden; }
@keyframes ff8-blink { 0% { visibility: visible; } 50% { visibility: hidden; } }

/* ------------------------------------------------------------------ open / close */
.ff8-root .ff8-win.ff8-unfold { animation: ff8-unfold 0.12s linear backwards; }
.ff8-root .ff8-stage.ff8-closing .ff8-win { animation: ff8-fold 0.12s linear both; }
@keyframes ff8-unfold { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }
@keyframes ff8-fold { from { transform: scaleY(1); } to { transform: scaleY(0.02); } }
@media (prefers-reduced-motion: reduce) {
  .ff8-root .ff8-win.ff8-unfold, .ff8-root .ff8-stage.ff8-closing .ff8-win { animation: none; }
  .ff8-root .ff8-opt.ff8-parent::before { animation: none; opacity: 0.55; }
}

/* ------------------------------------------------------------------ shared windows */
.ff8-root .ff8-help { --ff8-x: 6; --ff8-y: 9; --ff8-w: 223; --ff8-h: 27; display: flex; align-items: center; padding: calc(1.4 * var(--ff8-u)) calc(22 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); }
.ff8-root [data-ff8-screen^='save'] .ff8-help { --ff8-x: 26.5; --ff8-y: 33.5; --ff8-w: 281; --ff8-h: 27.5; padding-left: calc(7.5 * var(--ff8-u)); padding-right: calc(6 * var(--ff8-u)); }
.ff8-root [data-ff8-screen='config'] .ff8-help { --ff8-x: 21.5; --ff8-y: 7.5; --ff8-w: 211; --ff8-h: 23.5; padding-left: calc(7.5 * var(--ff8-u)); padding-right: calc(6 * var(--ff8-u)); }
/* the Cartes help is a spec-verbatim long line and no hand sits on the HELP bar there: drop the hand clearance */
.ff8-root [data-ff8-screen='cartes'] .ff8-help { padding-right: calc(6 * var(--ff8-u)); }
.ff8-root .ff8-help .ff8-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
.ff8-root.ff8-col .ff8-help { --ff8-mh: 38.5; padding: calc(5 * var(--ff8-u)) calc(6 * var(--ff8-u)) calc(3.5 * var(--ff8-u)) calc(9 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-help .ff8-tx { white-space: normal; overflow: visible; }

/* z-index 5: above the full-screen save sections, which come later in the DOM and would swallow the click */
.ff8-root .ff8-ttab { --ff8-x: 235; --ff8-y: 7.5; --ff8-w: 78; --ff8-h: 23.5; z-index: 5; }
/* the visible way back (round 3): main and the four panes put it in the free right column under the command window */
.ff8-root .ff8-stage:is([data-ff8-screen='main'], [data-ff8-screen='date'], [data-ff8-screen='lieu'], [data-ff8-screen='statut'], [data-ff8-screen='cartes']) .ff8-ttab { --ff8-x: 230; --ff8-y: 118; --ff8-w: 83; --ff8-h: 23.5; }
.ff8-root.ff8-col .ff8-ttab { align-self: flex-end; min-width: calc(64 * var(--ff8-u)); width: auto; }
.ff8-root .ff8-tabbtn {
  position: absolute; inset: 0; display: flex; align-items: center; gap: calc(2.4 * var(--ff8-u));
  padding: 0 calc(3 * var(--ff8-u)) 0 calc(5.5 * var(--ff8-u)); margin: 0; border: 0; background: none; color: #fff;
  cursor: pointer; appearance: none; -webkit-appearance: none; outline: none; text-align: left; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.ff8-root.ff8-col .ff8-tabbtn { position: relative; inset: auto; min-height: calc(23.5 * var(--ff8-u)); width: 100%; padding-right: calc(6 * var(--ff8-u)); }
/* touch target: at least 44 CSS px tall even when the window is 23.5 native px (phone landscape) */
.ff8-root .ff8-tabbtn::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - max(50%, 22px)); height: max(100%, 44px); }
.ff8-root .ff8-back { display: inline; font-size: calc(6 * var(--ff8-u)); color: #bdbdbd; }
.ff8-root .ff8-ttab-lab:empty { display: none; }
.ff8-root .ff8-ttab .ff8-ttab-tx { display: block; }
/* the glove points at the way back while the pointer is on it (the list cursor is not involved) */
@media (hover: hover) {
  .ff8-root .ff8-tabbtn:hover::before {
    content: ''; position: absolute; z-index: 20; pointer-events: none; display: block;
    width: calc(21.8 * var(--ff8-u)); height: calc(14.6 * var(--ff8-u));
    right: calc(100% - calc(3 * var(--ff8-u))); top: calc(50% - calc(5 * var(--ff8-u)));
    background: var(--ff8-hand) no-repeat 0 0 / 100% 100%;
  }
  .ff8-root .ff8-stage.ff8-closing .ff8-tabbtn::before { visibility: hidden; }
}

.ff8-root .ff8-cmd { --ff8-x: 230; --ff8-y: 8; --ff8-w: 83; --ff8-h: 102.5; padding: calc(5.6 * var(--ff8-u)) calc(4 * var(--ff8-u)) calc(5.6 * var(--ff8-u)) calc(6.5 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cmd { padding-left: calc(20 * var(--ff8-u)); }

.ff8-root .ff8-play { --ff8-x: 231; --ff8-y: 192.5; --ff8-w: 82; --ff8-h: 41; padding: calc(3.6 * var(--ff8-u)) calc(7.5 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); }
.ff8-root .ff8-play .ff8-prow { display: flex; justify-content: space-between; align-items: baseline; height: calc(11.6 * var(--ff8-u)); line-height: calc(11.6 * var(--ff8-u)); }
.ff8-root .ff8-play .ff8-prow--r { justify-content: flex-end; }
.ff8-root.ff8-col .ff8-play { padding-top: calc(4 * var(--ff8-u)); padding-bottom: calc(3 * var(--ff8-u)); }

.ff8-root .ff8-loc { --ff8-x: 6; --ff8-y: 205.5; --ff8-w: 223; --ff8-h: 28.5; display: flex; align-items: center; padding: 0 calc(6 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-loc { padding: calc(5 * var(--ff8-u)) calc(6 * var(--ff8-u)) calc(4 * var(--ff8-u)) calc(8 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-loc .ff8-tx { white-space: normal; }

/* ------------------------------------------------------------------ main: party */
.ff8-root .ff8-party { --ff8-x: 14; --ff8-y: 37.5; --ff8-w: 211; --ff8-h: 167; }
.ff8-root.ff8-col .ff8-party { display: flex; flex-direction: column; gap: calc(1 * var(--ff8-u)); }
.ff8-root .ff8-st { --ff8-x: 0; --ff8-w: 211; --ff8-h: 27.5; display: grid; align-items: center;
  grid-template-columns: 1fr calc(14 * var(--ff8-u)) calc(23.7 * var(--ff8-u)) calc(6.7 * var(--ff8-u)) calc(15 * var(--ff8-u)) calc(69.9 * var(--ff8-u));
  padding: calc(2.6 * var(--ff8-u)) calc(7.7 * var(--ff8-u)) 0 calc(6.6 * var(--ff8-u)); }
.ff8-root .ff8-st:nth-child(1) { --ff8-y: 0; } .ff8-root .ff8-st:nth-child(2) { --ff8-y: 27.5; } .ff8-root .ff8-st:nth-child(3) { --ff8-y: 55; }
.ff8-root .ff8-st .ff8-fig { line-height: 1; }
.ff8-root .ff8-st .ff8-lvv, .ff8-root .ff8-st .ff8-hpv { text-align: right; }

.ff8-root .ff8-st .ff8-hpl { grid-column: 5; }
.ff8-root.ff8-col .ff8-st { grid-template-columns: 1fr calc(13 * var(--ff8-u)) calc(10 * var(--ff8-u)) calc(3 * var(--ff8-u)) calc(13 * var(--ff8-u)) calc(61 * var(--ff8-u)); padding-left: calc(6 * var(--ff8-u)); padding-right: calc(6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-st .ff8-fig { font-size: calc(7.6 * var(--ff8-u)); letter-spacing: 0.06em; }
.ff8-root.ff8-col .ff8-st .ff8-num { letter-spacing: 0.12em; margin-right: -0.12em; }
.ff8-root .ff8-reserve { --ff8-x: 0; --ff8-y: 82.5; --ff8-w: 211; --ff8-h: 84.5; padding: calc(4.5 * var(--ff8-u)) calc(6 * var(--ff8-u)) 0 calc(7.2 * var(--ff8-u)); }
.ff8-root .ff8-reserve .ff8-tx { height: calc(13 * var(--ff8-u)); line-height: calc(13 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-reserve { display: none; }

/* ------------------------------------------------------------------ panes (date / lieu / statut / cartes) */
.ff8-root .ff8-pane { --ff8-x: 14; --ff8-y: 38.5; --ff8-w: 211; --ff8-h: 165.5; }
.ff8-root .ff8-ptab { --ff8-x: 0; --ff8-y: 0; --ff8-h: 16.5; width: auto; z-index: 2; }
.ff8-root .ff8-ptab { display: flex; align-items: center; padding: 0 calc(6 * var(--ff8-u)) calc(0.5 * var(--ff8-u)) calc(6 * var(--ff8-u)); }
.ff8-root .ff8-pwin { --ff8-x: 6; --ff8-y: 8.5; --ff8-w: 205; --ff8-h: 157; }
.ff8-root.ff8-col .ff8-pane { display: flex; flex-direction: column; gap: calc(3 * var(--ff8-u)); padding-top: calc(8.5 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-ptab { position: absolute; left: 0; top: 0; }
.ff8-root.ff8-col .ff8-pane > .ff8-win:not(.ff8-ptab) { margin-left: calc(6 * var(--ff8-u)); }

/* date */
.ff8-root .ff8-bigdate { position: absolute; left: 0; right: 0; top: calc(17 * var(--ff8-u)); text-align: center; font-size: calc(17 * var(--ff8-u)); letter-spacing: 0.08em; }
.ff8-root .ff8-dlabel { position: absolute; left: 0; right: 0; top: calc(44 * var(--ff8-u)); text-align: center; }
.ff8-root .ff8-cdwin { --ff8-x: 36; --ff8-y: 66; --ff8-w: 133; --ff8-h: 41; padding: calc(4.2 * var(--ff8-u)) calc(8 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); }
.ff8-root .ff8-cdwin .ff8-prow { display: flex; justify-content: space-between; height: calc(15 * var(--ff8-u)); line-height: calc(15 * var(--ff8-u)); align-items: center; }
.ff8-root .ff8-dopt { position: absolute; left: calc(24 * var(--ff8-u)); top: calc(124 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-pwin--date { display: flex; flex-direction: column; align-items: stretch; padding: calc(14 * var(--ff8-u)) calc(8 * var(--ff8-u)) calc(10 * var(--ff8-u)); gap: calc(6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-bigdate, .ff8-root.ff8-col .ff8-dlabel { position: relative; top: auto; font-size: calc(14 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-dlabel { font-size: calc(11.6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cdwin { margin: calc(2 * var(--ff8-u)) calc(6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-dopt { margin: calc(4 * var(--ff8-u)) 0 0 calc(16 * var(--ff8-u)); }

/* lieu */
.ff8-root .ff8-lines { position: absolute; left: calc(12 * var(--ff8-u)); top: calc(9 * var(--ff8-u)); right: calc(8 * var(--ff8-u)); }
.ff8-root .ff8-lines .ff8-tx { height: calc(13 * var(--ff8-u)); line-height: calc(13 * var(--ff8-u)); }
.ff8-root .ff8-lopts { position: absolute; left: calc(24 * var(--ff8-u)); top: calc(70 * var(--ff8-u)); right: calc(8 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-pwin--lieu { padding: calc(14 * var(--ff8-u)) calc(6 * var(--ff8-u)) calc(10 * var(--ff8-u)) calc(10 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-lines, .ff8-root.ff8-col .ff8-lopts { position: relative; left: auto; top: auto; right: auto; }
.ff8-root.ff8-col .ff8-lines .ff8-tx { white-space: normal; height: auto; min-height: calc(13 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-lopts { margin: calc(10 * var(--ff8-u)) 0 0 calc(12 * var(--ff8-u)); }

/* statut */
.ff8-root .ff8-chars { --ff8-x: 6; --ff8-y: 8.5; --ff8-w: 58; --ff8-h: 56; padding: calc(10.5 * var(--ff8-u)) calc(4 * var(--ff8-u)) 0 calc(17 * var(--ff8-u)); }
/* 'J' overhangs to the left: keep the fingertip clear of it */
.ff8-root .ff8-chars .ff8-opt { --ff8-cgap: 2.6; }
.ff8-root .ff8-sheet { --ff8-x: 67; --ff8-y: 8.5; --ff8-w: 144; --ff8-h: 157; }
.ff8-root .ff8-portrait {
  position: absolute; left: calc(8 * var(--ff8-u)); top: calc(8 * var(--ff8-u)); width: calc(30 * var(--ff8-u)); height: calc(36 * var(--ff8-u));
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 30%, #6d7fa8 0, #2e3b5e 70%, #1d2540 100%);
  box-shadow: 0 0 0 calc(0.6 * var(--ff8-u)) #d9d9d9, 0 0 0 calc(1.2 * var(--ff8-u)) #1a1a1a;
}
.ff8-root .ff8-portrait .ff8-fig { font-size: calc(18 * var(--ff8-u)); letter-spacing: 0; }
.ff8-root .ff8-portrait svg { width: 70%; height: auto; display: block; }
.ff8-root .ff8-shead { position: absolute; left: calc(46 * var(--ff8-u)); top: calc(7 * var(--ff8-u)); right: calc(6 * var(--ff8-u)); }
.ff8-root .ff8-shead .ff8-tx { height: calc(13 * var(--ff8-u)); line-height: calc(13 * var(--ff8-u)); }
.ff8-root .ff8-shead .ff8-fig { height: calc(11 * var(--ff8-u)); line-height: calc(11 * var(--ff8-u)); }
.ff8-root .ff8-slines { position: absolute; left: calc(9 * var(--ff8-u)); top: calc(54 * var(--ff8-u)); right: calc(6 * var(--ff8-u)); }
.ff8-root .ff8-slines .ff8-tx { height: calc(14 * var(--ff8-u)); line-height: calc(14 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-chars { padding: calc(13 * var(--ff8-u)) calc(4 * var(--ff8-u)) calc(5 * var(--ff8-u)) calc(20 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-clist { padding-top: calc(13 * var(--ff8-u)); min-height: calc(30 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-sheet { padding: calc(7 * var(--ff8-u)) calc(6 * var(--ff8-u)) calc(8 * var(--ff8-u)) calc(8 * var(--ff8-u)); display: grid; grid-template-columns: calc(32 * var(--ff8-u)) 1fr; column-gap: calc(8 * var(--ff8-u)); row-gap: calc(6 * var(--ff8-u)); min-height: 0; }
.ff8-root.ff8-col .ff8-portrait, .ff8-root.ff8-col .ff8-shead, .ff8-root.ff8-col .ff8-slines { position: relative; left: auto; top: auto; right: auto; }
.ff8-root.ff8-col .ff8-slines { grid-column: 1 / -1; }
.ff8-root.ff8-col .ff8-slines .ff8-tx { white-space: normal; height: auto; min-height: calc(14 * var(--ff8-u)); }

/* cartes */
.ff8-root .ff8-clist { --ff8-x: 6; --ff8-y: 8.5; --ff8-w: 205; --ff8-h: 27; padding: calc(9.5 * var(--ff8-u)) calc(26 * var(--ff8-u)) 0 calc(17 * var(--ff8-u)); }
.ff8-root .ff8-clist .ff8-opt { display: flex; align-items: center; justify-content: space-between; }
.ff8-root .ff8-clist .ff8-lab:not(.ff8-lab--r) { left: calc(36 * var(--ff8-u)); }
.ff8-root .ff8-dia { display: inline-block; width: calc(6.5 * var(--ff8-u)); height: calc(6.5 * var(--ff8-u)); margin-right: calc(3 * var(--ff8-u)); transform: rotate(45deg) scale(0.86);
  background: linear-gradient(135deg, #e2ddf6, #9b93c9 55%, #6e66a3); box-shadow: 0 0 0 calc(0.5 * var(--ff8-u)) #2b2840; vertical-align: middle; }
.ff8-root .ff8-cwin { --ff8-x: 6; --ff8-y: 38; --ff8-w: 205; --ff8-h: 97; }
.ff8-root .ff8-ranks { position: absolute; left: calc(18 * var(--ff8-u)); top: calc(10 * var(--ff8-u)); width: calc(58 * var(--ff8-u)); height: calc(46 * var(--ff8-u)); }
.ff8-root .ff8-rk {
  position: absolute; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: calc(15 * var(--ff8-u)); line-height: 1;
  color: #fff; text-shadow: calc(0.6 * var(--ff8-u)) calc(0.6 * var(--ff8-u)) calc(0.3 * var(--ff8-u)) rgba(0,0,0,.7);
}
.ff8-root .ff8-rk--t { left: calc(23 * var(--ff8-u)); top: 0; } .ff8-root .ff8-rk--l { left: calc(8 * var(--ff8-u)); top: calc(13 * var(--ff8-u)); }
.ff8-root .ff8-rk--r { left: calc(38 * var(--ff8-u)); top: calc(13 * var(--ff8-u)); } .ff8-root .ff8-rk--b { left: calc(23 * var(--ff8-u)); top: calc(27 * var(--ff8-u)); }
.ff8-root .ff8-cnote { position: absolute; left: calc(12 * var(--ff8-u)); top: calc(62 * var(--ff8-u)); }
.ff8-root .ff8-cnote .ff8-tx { height: calc(13 * var(--ff8-u)); line-height: calc(13 * var(--ff8-u)); }
.ff8-root .ff8-card { position: absolute; left: calc(124 * var(--ff8-u)); top: calc(9 * var(--ff8-u)); width: calc(62 * var(--ff8-u)); height: calc(78 * var(--ff8-u)); }
.ff8-root .ff8-cbar { --ff8-x: 6; --ff8-y: 138; --ff8-w: 205; --ff8-h: 27.5; display: flex; align-items: center; justify-content: space-between; padding: calc(1 * var(--ff8-u)) calc(9 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cwin { min-height: calc(97 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-ranks { left: calc(10 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-card { left: auto; right: calc(10 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cnote { left: calc(8 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-clist .ff8-lab:not(.ff8-lab--r) { left: calc(46 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cbar .ff8-tx:first-child { margin-right: calc(6 * var(--ff8-u)); }

/* triple triad card */
.ff8-root .ff8-card svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ save (full screen, mirrors the PS1 save screens) */
.ff8-root .ff8-full { --ff8-x: 0; --ff8-y: 0; --ff8-w: 320; --ff8-h: 240; }
.ff8-root.ff8-col .ff8-full { display: flex; flex-direction: column; gap: calc(3 * var(--ff8-u)); }
.ff8-root .ff8-info { --ff8-x: 21.5; --ff8-y: 7.5; --ff8-w: 211.5; --ff8-h: 23.5; display: flex; align-items: center; padding: calc(1.2 * var(--ff8-u)) calc(5 * var(--ff8-u)) 0 calc(27 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-info { padding: calc(6 * var(--ff8-u)) calc(5 * var(--ff8-u)) calc(3 * var(--ff8-u)) calc(12 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-info .ff8-tx { white-space: normal; }
.ff8-root .ff8-cell { --ff8-w: 118; --ff8-h: 46; }
.ff8-root .ff8-cell--a { --ff8-x: 36.5; --ff8-y: 85.5; } .ff8-root .ff8-cell--b { --ff8-x: 36.5; --ff8-y: 143.5; }
.ff8-root .ff8-cell--c { --ff8-x: 189.5; --ff8-y: 85.5; } .ff8-root .ff8-cell--d { --ff8-x: 189.5; --ff8-y: 143.5; }
.ff8-root .ff8-stab { --ff8-x: 0; --ff8-y: 0; --ff8-w: 43; --ff8-h: 21; z-index: 2; display: flex; align-items: center; padding: 0 0 0 calc(5 * var(--ff8-u)); }
.ff8-root .ff8-swin { --ff8-x: 3.5; --ff8-y: 8.5; --ff8-w: 114.5; --ff8-h: 37; display: flex; align-items: center; padding: calc(7 * var(--ff8-u)) calc(4 * var(--ff8-u)) 0 calc(5 * var(--ff8-u)); }
.ff8-root .ff8-swin .ff8-opt { --ff8-cy: -1.8; }
.ff8-root.ff8-col .ff8-grid { display: flex; flex-direction: column; gap: calc(4 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cell { display: block; padding: 0; }
.ff8-root.ff8-col .ff8-stab { position: absolute; left: 0; top: 0; padding-right: calc(4 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-swin { margin: calc(8.5 * var(--ff8-u)) 0 0 calc(3.5 * var(--ff8-u)); padding-left: calc(22 * var(--ff8-u)); }

.ff8-root .ff8-blk { position: absolute; --ff8-x: 21.5; --ff8-w: 291.5; --ff8-h: 57; --ff8-cy: 1.6; --ff8-cgap: 0.2; padding: 0; text-align: left; }
.ff8-root .ff8-blk:nth-child(1) { --ff8-y: 63; } .ff8-root .ff8-blk:nth-child(2) { --ff8-y: 121.5; } .ff8-root .ff8-blk:nth-child(3) { --ff8-y: 181; }
.ff8-root .ff8-opt.ff8-blk.ff8-cur::before, .ff8-root .ff8-opt.ff8-blk.ff8-parent::before { top: calc(5.5 * var(--ff8-u)); right: calc(100% - calc(7 * var(--ff8-u))); }
.ff8-root .ff8-blk .ff8-lab { font-size: calc(7.4 * var(--ff8-u)); letter-spacing: 0.04em; color: #fff; top: calc(0.4 * var(--ff8-u)); left: calc(1.6 * var(--ff8-u)); text-shadow: calc(0.5 * var(--ff8-u)) calc(0.5 * var(--ff8-u)) calc(0.2 * var(--ff8-u)) rgba(0,0,0,.7); font-stretch: 105%; }
.ff8-root .ff8-blk .ff8-free { position: absolute; left: calc(19.5 * var(--ff8-u)); top: calc(20 * var(--ff8-u)); }
.ff8-root .ff8-pics { position: absolute; left: calc(18.5 * var(--ff8-u)); top: calc(1.2 * var(--ff8-u)); display: flex; gap: calc(1 * var(--ff8-u)); height: calc(54.5 * var(--ff8-u)); }
.ff8-root .ff8-pic {
  width: calc(28.5 * var(--ff8-u)); height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, #8a96b8 0, #3f4a6e 55%, #252b45 100%);
  box-shadow: inset 0 0 0 calc(0.6 * var(--ff8-u)) #e6e6e6, inset 0 0 0 calc(1.1 * var(--ff8-u)) #222;
}
.ff8-root .ff8-pic .ff8-fig { font-size: calc(19 * var(--ff8-u)); letter-spacing: 0; }
.ff8-root .ff8-pic svg { width: 78%; height: auto; display: block; }
.ff8-root .ff8-bname { position: absolute; left: calc(117 * var(--ff8-u)); top: calc(1.5 * var(--ff8-u)); }
.ff8-root .ff8-blv { position: absolute; left: calc(117 * var(--ff8-u)); top: calc(16 * var(--ff8-u)); display: flex; gap: calc(5 * var(--ff8-u)); align-items: baseline; }
.ff8-root .ff8-bdisc { position: absolute; left: calc(170 * var(--ff8-u)); top: calc(16.6 * var(--ff8-u)); }
.ff8-root .ff8-bplay { position: absolute; right: calc(8 * var(--ff8-u)); top: calc(5 * var(--ff8-u)); text-align: right; }
.ff8-root .ff8-bplay .ff8-fig { line-height: calc(12.5 * var(--ff8-u)); }
.ff8-root .ff8-bloc { --ff8-x: 111.5; --ff8-y: 35; --ff8-w: 180; --ff8-h: 22; display: flex; align-items: center; padding: 0 calc(4 * var(--ff8-u)) 0 calc(5.5 * var(--ff8-u)); }
.ff8-root .ff8-bloc .ff8-tx { font-size: calc(10.6 * var(--ff8-u)); }
.ff8-root .ff8-arrow { position: absolute; top: calc(146 * var(--ff8-u)); width: 0; height: 0; border-top: calc(3 * var(--ff8-u)) solid transparent; border-bottom: calc(3 * var(--ff8-u)) solid transparent; pointer-events: none; }
.ff8-root .ff8-arrow--l { left: calc(15 * var(--ff8-u)); border-right: calc(3.5 * var(--ff8-u)) solid #9a9a9a; }
.ff8-root .ff8-arrow--r { right: calc(1.5 * var(--ff8-u)); border-left: calc(3.5 * var(--ff8-u)) solid #9a9a9a; }
.ff8-root.ff8-col .ff8-arrow { display: none; }
.ff8-root.ff8-col .ff8-blocks { display: flex; flex-direction: column; gap: calc(3 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-blk { min-height: calc(40 * var(--ff8-u)); margin-left: calc(10 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-blk.ff8-filled { min-height: calc(96 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-pics { left: calc(12 * var(--ff8-u)); top: calc(9 * var(--ff8-u)); height: calc(46 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-pic { width: calc(20 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-bname { left: calc(80 * var(--ff8-u)); top: calc(6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-blv { left: calc(80 * var(--ff8-u)); top: calc(22 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-blv .ff8-tx, .ff8-root.ff8-col .ff8-blv .ff8-fig { line-height: 1; }
.ff8-root.ff8-col .ff8-bdisc { left: calc(80 * var(--ff8-u)); top: calc(35 * var(--ff8-u)); line-height: 1; }
.ff8-root.ff8-col .ff8-bplay { right: auto; left: calc(80 * var(--ff8-u)); top: calc(46 * var(--ff8-u)); text-align: left; }
.ff8-root.ff8-col .ff8-bplay .ff8-fig { line-height: 1; }
.ff8-root.ff8-col .ff8-bplay .ff8-fig { display: inline; margin-right: calc(4 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-bloc { position: absolute; left: calc(4 * var(--ff8-u)); right: calc(2 * var(--ff8-u)); top: auto; bottom: calc(2 * var(--ff8-u)); width: auto; min-height: calc(20 * var(--ff8-u)); height: auto; padding-top: calc(2 * var(--ff8-u)); padding-bottom: calc(2 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-bloc .ff8-tx { white-space: normal; font-size: calc(10 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-blk .ff8-free { left: calc(16 * var(--ff8-u)); top: calc(15 * var(--ff8-u)); }

.ff8-root .ff8-msg { --ff8-x: 60; --ff8-y: 100; --ff8-w: 200; --ff8-h: 40; z-index: 30; display: flex; align-items: center; padding: 0 calc(8 * var(--ff8-u)) 0 calc(26 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-msg { position: fixed; left: calc(8 * var(--ff8-u)); right: calc(8 * var(--ff8-u)); top: 40%; width: auto; min-height: calc(40 * var(--ff8-u)); }

/* ------------------------------------------------------------------ config (mirrors the Config screen) */
/* FFVIII_Config.ref.png (640x480, 2 px per native px): window 21.5,35 x 291.5; rows 17.75 native px apart;
   pair values at 156.5 / 224 from the window edge; gauge end labels 119.5-141 and 238.5; bar 142.5 x 92.5. */
.ff8-root .ff8-cfg { --ff8-x: 21.5; --ff8-y: 35; --ff8-w: 291.5; --ff8-h: 170; padding: calc(4.6 * var(--ff8-u)) calc(6 * var(--ff8-u)) 0 calc(20 * var(--ff8-u)); }
.ff8-root .ff8-cfg .ff8-opt { height: calc(17.75 * var(--ff8-u)); line-height: calc(17.75 * var(--ff8-u)); --ff8-cy: -0.9; }
.ff8-root .ff8-cfg .ff8-opt::after { content: ''; position: absolute; left: calc(-14 * var(--ff8-u)); right: 0; top: calc(50% - max(50%, 22px)); height: max(100%, 44px); }
.ff8-root .ff8-cfg .ff8-tx, .ff8-root .ff8-cfg .ff8-fig { line-height: inherit; }
/* values and gauges sit above the row's padded hit area (::after), so a click picks the value it lands on */
.ff8-root .ff8-cv { position: absolute; top: 0; z-index: 1; }
.ff8-root .ff8-cv--1 { left: calc(136.5 * var(--ff8-u)); } .ff8-root .ff8-cv--2 { left: calc(204 * var(--ff8-u)); }
.ff8-root .ff8-gauge { position: absolute; z-index: 1; left: calc(111 * var(--ff8-u)); top: 0; width: calc(150 * var(--ff8-u)); height: calc(17.75 * var(--ff8-u)); }
.ff8-root .ff8-glo, .ff8-root .ff8-ghi { position: absolute; top: 0; font-size: calc(8 * var(--ff8-u)); letter-spacing: 0.04em; }
.ff8-root .ff8-glo { left: 0; width: calc(23.5 * var(--ff8-u)); text-align: right; }
.ff8-root .ff8-ghi { left: calc(121.5 * var(--ff8-u)); }
.ff8-root .ff8-cfg .ff8-opt[aria-disabled='true'] .ff8-fig { color: var(--ff8-grey-text); }
.ff8-root .ff8-cfg .ff8-opt[aria-disabled='true'] .ff8-bar-fill { display: none; }
.ff8-root .ff8-bar {
  position: absolute; left: calc(25.5 * var(--ff8-u)); top: calc(50% - calc(6 * var(--ff8-u))); width: calc(92 * var(--ff8-u)); height: calc(12 * var(--ff8-u));
  border-radius: calc(3 * var(--ff8-u)) / calc(6 * var(--ff8-u));
  background: linear-gradient(180deg, #c7c7c7 0, #777777 18%, #5a5a5a 50%, #3c3c3c 82%, #262626 100%);
  box-shadow: 0 0 0 calc(0.5 * var(--ff8-u)) #111;
}
.ff8-root .ff8-bar-in {
  position: absolute; left: calc(2.2 * var(--ff8-u)); right: calc(2.2 * var(--ff8-u)); top: calc(2 * var(--ff8-u)); bottom: calc(2 * var(--ff8-u)); border-radius: calc(2 * var(--ff8-u)) / calc(4 * var(--ff8-u)); overflow: hidden;
  background: linear-gradient(180deg, #1e1e1e 0, #3a3a3a 25%, #525252 50%, #3a3a3a 75%, #1e1e1e 100%);
}
.ff8-root .ff8-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 35%;
  background: linear-gradient(180deg, #2d2d39 0%, #404165 12%, #7374b6 25%, #8b89f5 37%, #b1b1ff 47%, #b9b8ff 50%, #9698fe 60%, #7678ec 72%, #5a5eaa 86%, #343661 100%);
}
/* phone: pairs keep two value columns; a gauge drops to its own line under its label, with both end labels */
.ff8-root.ff8-col .ff8-cfg { padding: calc(4 * var(--ff8-u)) calc(8 * var(--ff8-u)) calc(4 * var(--ff8-u)) calc(22 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cfg .ff8-tx { font-size: calc(10.6 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cv--1 { left: calc(64.5 * var(--ff8-u)); } .ff8-root.ff8-col .ff8-cv--2 { left: calc(108 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-cfg .ff8-opt[data-ff8-gauge] { height: calc(30 * var(--ff8-u)); line-height: calc(17.75 * var(--ff8-u)); --ff8-cy: -7; }
.ff8-root.ff8-col .ff8-cfg .ff8-opt[data-ff8-gauge] > .ff8-tx { position: absolute; left: 0; top: 0; }
.ff8-root.ff8-col .ff8-gauge { left: 0; right: 0; width: auto; top: calc(16.5 * var(--ff8-u)); height: calc(12 * var(--ff8-u)); line-height: calc(12 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-glo { width: calc(22 * var(--ff8-u)); }
.ff8-root.ff8-col .ff8-bar { left: calc(25 * var(--ff8-u)); right: calc(30 * var(--ff8-u)); width: auto; }
.ff8-root.ff8-col .ff8-ghi { left: auto; right: 0; width: calc(28 * var(--ff8-u)); }

/* parent-cursor blink switched off in Config ("Clignotement : Coupé"): static, dimmed, like reduced motion */
.ff8-root.ff8-noblink .ff8-opt.ff8-parent::before { animation: none; opacity: 0.55; }

/* ------------------------------------------------------------------ floating chip (outside the overlay) */
.ff8-chip {
  --ff8-u: 2.2px;
  position: fixed; z-index: 8999; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; height: calc(21 * var(--ff8-u)); padding: 0 calc(8 * var(--ff8-u)) 0 calc(9 * var(--ff8-u)); margin: 0;
  cursor: pointer; color: #fff; font-family: var(--ff8-font); -webkit-tap-highlight-color: transparent;
  background-color: #646464;
  background-image: linear-gradient(90deg, #3d3d3d calc(2 * var(--ff8-u)), #646464 calc(110 * var(--ff8-u)));
  box-shadow: inset calc(1 * var(--ff8-u)) calc(1 * var(--ff8-u)) 0 0 #2a2a2a, inset calc(-1 * var(--ff8-u)) calc(-1 * var(--ff8-u)) 0 0 #1c1c1c, inset calc(2 * var(--ff8-u)) calc(2 * var(--ff8-u)) 0 0 #737373, inset calc(-2 * var(--ff8-u)) calc(-2 * var(--ff8-u)) 0 0 #333333, 0 2px 10px rgba(0,0,0,.35);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.ff8-chip .ff8-chip-hand { position: absolute; left: calc(-15 * var(--ff8-u)); top: calc(50% - calc(5 * var(--ff8-u))); width: calc(21.8 * var(--ff8-u)); height: calc(14.6 * var(--ff8-u)); background: var(--ff8-hand) no-repeat 0 0 / 100% 100%; pointer-events: none; }
.ff8-chip .ff8-chip-tx { font-size: calc(11 * var(--ff8-u)); letter-spacing: 0.08em; font-weight: 450; font-stretch: 80%; text-shadow: var(--ff8-tshadow); line-height: 1; }
.ff8-chip:focus-visible { outline: 2px solid #fdfe4f; outline-offset: 2px; }
.ff8-chip.ff8-chip--hidden { display: none; }

/* ------------------------------------------------------------------ attachCursor: glove on a page-owned list */
.ff8-acursor {
  position: fixed; z-index: 8998; display: none; pointer-events: none;
  width: 22px; height: 15px; background: var(--ff8-hand) no-repeat 0 0 / 100% 100%;
}
.ff8-root .ff8-play .ff8-money { letter-spacing: 0.15em; margin-right: -0.15em; }