genshin-interface 4.1.2 → 4.3.1

package/dist/style.css

@@ -1,10 +1,413 @@
 
+/* The parent places the button and may pad it, so these yield to any rule of its own */
+:where(.game-button[data-v-cab29bfa]) {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+}
+
+/* Each state is reached over its own crossfade: the duration is the state's being entered, so a hover fades in over
+   The hover's and out over the rest's, and a press shows at once */
+.game-button[data-v-cab29bfa] {
+  --state-duration: var(--v8de8a9a0);
+  transition: color var(--state-duration);
+}
+.game-button[data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--v4f7d0248);
+}
+.game-button[data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+}
+
+/* The side bar's icon, gold at rest. Hovered, a translucent navy disc 65 units across lights behind it, centred on its
+   Ink, and the icon turns cream and grows by 1.12, its ink's area fitted at rest and hovered: the current English PC
+   Client's settings gear at 1080 high (`yt-5EmJX_RyuY8-menu-settings` at 9.8 and 10.5 seconds). Pressed, the disc
+   Turns cream and the icon ink, falling back to its resting size, the press's smaller click: the same gear held at 10.65
+   Seconds, its ink's area 1.01 of its rest's. The disc's colour is fitted over two side bars' greens, the same
+   Recording's and a 2024 one's (`yt-kIDee7nyD0w-menu-quit-prompt`) */
+.game-button[data-kind="Disc"][data-v-cab29bfa] {
+  isolation: isolate;
+}
+
+/* At zero specificity, so a parent sets the icon's colour at rest where it places the button, as the rest of the
+   Button yields */
+:where(.game-button[data-kind="Disc"][data-v-cab29bfa]) {
+  color: var(--v5ff883e5);
+}
+
+/* Behind everything the button holds, which its own layer keeps above it however it is placed */
+.game-button[data-kind="Disc"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--unit) * 65);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  translate: -50% -50%;
+  transition: background-color var(--state-duration);
+}
+.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
+  transition: scale var(--state-duration);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  color: var(--c23e4506);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before {
+  background-color: rgb(30 49 63 / 0.5);
+}
+.game-button[data-kind="Disc"]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) > [data-v-cab29bfa-s] {
+  scale: 1.12;
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  color: var(--v7defe8be);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--c23e4506);
+}
+.game-button[data-kind="Disc"]:enabled:is(:active, [data-interaction-state="Pressed"] *) > [data-v-cab29bfa-s] {
+  scale: 1;
+}
+
+/* An unbuilt screen's button, which the game never has, is drawn faded and answers nothing */
+.game-button[data-kind="Disc"][data-v-cab29bfa]:disabled {
+  opacity: 0.4;
+}
+
+/* The lit icon's name, in a dark slate box 31 units high, centred on the icon and starting 49.5 units right of its
+   Centre, 5 past the side bar's edge, its words 17 units to their caps: the same recording's "Settings", read once it
+   Has settled at 10.5 seconds, where the box reads the same over the panel's cream and over a tile */
+.tip[data-v-cab29bfa] {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + var(--unit) * 49.5);
+  padding: 0 calc(var(--unit) * 9);
+  border-radius: calc(var(--unit) * 3);
+  background: #4d5063;
+  color: #e6eaf0;
+  font-size: calc(var(--unit) * 24);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 31);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+  translate: 0 -50%;
+}
+.game-button:enabled:is(:hover, :focus-visible, :active, [data-interaction-state] *) > .tip[data-v-cab29bfa] {
+  opacity: 1;
+}
+
+/* A row, the game's rectangle, lit by a tint laid over its own box and behind its words, as a disc is: hovered or focused,
+   pressed at once, or held selected by its parent's aria-selected at the hover's strength. Provisional, see the colours */
+.game-button[data-kind="Row"][data-v-cab29bfa] {
+  isolation: isolate;
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--v78a9c41c);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before,
+.game-button[data-kind="Row"][aria-selected="true"][data-v-cab29bfa]::before {
+  opacity: 1;
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--v77c60e0e);
+  opacity: 1;
+}
+
+/* The cream pill, read off the game's own (block 07356235: the quit prompt's choices are its option pill, and a dialog's
+   Confirm its brighter twin), its look measured on a dialog's Confirm at 1080 high (`yt-5EmJX_RyuY8-menu-settings` from
+   140.5 seconds). At rest its words are the game's ink, inside a 3 unit pale rim and a 3 unit darker band within it,
+   The pill's own bevel read off the wiki's crop of the quit prompt, and a faint dark shadow 7 units round it. Hovered,
+   A white ring lights over its edge, 1 unit outside it and 2 within, its shadow turning a faint white glow; it holds
+   Its size, the ring alone reaching past it */
+.game-button[data-kind="Pill"][data-v-cab29bfa] {
+  --state-duration: var(--v7a0541ee);
+  border-radius: calc(infinity * 1px);
+  background-color: var(--c23e4506);
+  box-shadow:
+    0 0 0 0 rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
+    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
+    0 0 calc(var(--unit) * 7) rgb(17 17 17 / 0.1);
+  color: var(--v7defe8be);
+  transition-duration: var(--state-duration);
+  transition-property: background-color, box-shadow, color;
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  box-shadow:
+    0 0 0 calc(var(--unit) * 1) #fff,
+    inset 0 0 0 calc(var(--unit) * 2) #fff,
+    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
+    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
+}
+
+/* Pressed, the pill's cream is tinted to slate at half alpha, its bevel lost in it, and from 2 units inside its edge a
+   Gold light adds over it, as the game adds it, fading from full to half as the words turn from black to cream over the
+   Press's clip. The game's light adds onto the world, which a screen's own layer cannot reach, so the gold is drawn
+   Over the world at half alpha in the colour the sum settles to, the slate and its light together, which matches the
+   Game's over any world but for red, 12 short where the sum passes white; the clip's first frame is the sum alone,
+   Opaque. The words show over the light only when the pill's content is positioned, as a laid out label is not */
+.game-button[data-kind="Pill"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
+  border-radius: inherit;
+  background: rgb(255 243 183 / 0.5) padding-box;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  background-color: transparent;
+  box-shadow:
+    0 0 0 0 rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 3) rgb(241 237 229 / 0),
+    inset 0 0 0 calc(var(--unit) * 6) rgb(230 225 213 / 0),
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.1);
+  color: var(--c23e4506);
+  animation: pill-press-words-cab29bfa var(--v307a3362) var(--v0673242b);
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  opacity: 1;
+  animation: pill-press-light-cab29bfa var(--v307a3362) var(--v0673242b);
+}
+@keyframes pill-press-words-cab29bfa {
+from {
+    color: #000;
+}
+}
+@keyframes pill-press-light-cab29bfa {
+from {
+    background-color: rgb(241 211 142);
+}
+}
+
+/* The dialogue reply's pill: a fifth black over the scene at rest, its words white, and lit as a cream-white pill with slate
+   Words when hovered, focused or selected by its screen. Its press holds that lit look at once. Provisional past the rest, see
+   The constants */
+.game-button[data-kind="Reply"][data-v-cab29bfa] {
+  --state-duration: var(--v8de8a9a0);
+  border-radius: calc(var(--unit) * 23);
+  background-color: var(--v40afb3ee);
+  color: #fff;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  letter-spacing: calc(var(--unit) * 0.5);
+  transition-duration: var(--state-duration);
+  transition-property: background-color, color;
+}
+.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--v4f7d0248);
+  outline: none;
+  background-color: var(--v5683177c);
+  color: var(--a79a636e);
+}
+.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+  background-color: var(--v5683177c);
+  color: var(--a79a636e);
+}
+
+/* The game draws no state for a plain button, so a keyboard's focus is ringed in the white its pills light in */
+.game-button[data-kind="Plain"][data-v-cab29bfa]:focus-visible {
+  outline: calc(var(--unit) * 3) solid #fff;
+  outline-offset: calc(var(--unit) * -2);
+}
+@media (prefers-reduced-motion: reduce) {
+.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
+    transition: none;
+}
+}
+
+.picker-shell[data-v-6f193621] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 120);
+  width: calc(var(--unit) * 640);
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--unit) * 24);
+  border-radius: calc(var(--unit) * 12);
+  background: rgb(20 24 36 / 0.92);
+  color: #ece3d8;
+}
+.title[data-v-6f193621] {
+  margin: 0;
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+}
+.picker-shell[data-v-6f193621] .caption {
+  opacity: 0.8;
+}
+
+.enhance-picker[data-v-7c672712] {
+  max-height: calc(var(--unit) * 900);
+  gap: calc(var(--unit) * 12);
+}
+.summary[data-v-7c672712],
+.notice[data-v-7c672712] {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+}
+.fodders[data-v-7c672712],
+.materials[data-v-7c672712] {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 6);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.option[data-v-7c672712] {
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 14);
+}
+.option[aria-pressed="true"][data-v-7c672712] {
+  background: rgb(255 255 255 / 0.28);
+}
+.material[data-v-7c672712] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 8);
+}
+.material .name[data-v-7c672712] {
+  flex: 1;
+}
+.actions[data-v-7c672712] {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--unit) * 8);
+}
+/* The option row the artifact pickers share, each picker sets its own padding */
+.option[data-v-7c672712] {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.1);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.artifact-picker[data-v-bf242b3e] {
+  max-height: calc(var(--unit) * 800);
+  gap: calc(var(--unit) * 16);
+}
+.options[data-v-bf242b3e] {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 8);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.option[data-v-bf242b3e] {
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 16);
+}
+.option[data-v-bf242b3e]:hover,
+.option[data-v-bf242b3e]:focus-visible {
+  background: rgb(255 255 255 / 0.2);
+}
+.close[data-v-bf242b3e] {
+  align-self: flex-end;
+}
+/* The option row the artifact pickers share, each picker sets its own padding */
+.option[data-v-bf242b3e] {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.1);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.members button[data-v-4c1e529d] {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  min-width: 16rem;
+  padding: 0.5rem 1rem;
+  background: rgb(255 255 255 / 8%);
+}
+/* The screen's colours and placement are provisional until the recording shows them */
+.blessing-screen[data-v-4c1e529d],
+.worship-screen[data-v-4c1e529d] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+  color: rgb(245 240 230);
+}
+.title[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  left: 6%;
+  font-size: 2rem;
+}
+.close[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  right: 6%;
+  font-size: 2rem;
+}
+.blessing[data-v-4c1e529d],
+.worship[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  right: 16%;
+  font-size: 1.25rem;
+}
+.held[data-v-4c1e529d],
+.pool[data-v-4c1e529d] {
+  position: absolute;
+  top: 16%;
+  left: 6%;
+  font-size: 1.25rem;
+}
+.levels[data-v-4c1e529d],
+.members[data-v-4c1e529d] {
+  position: absolute;
+  top: 26%;
+  left: 6%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 /* Measured off the English PC client's character screen at 21:9 (captures/session-2.mp4, a frame per tab from 155 to
    159 seconds), in units: a pixel of that frame at 1440 high is 0.75 units. The game's exports hold the screen's root
    alone, its contents a prefab loaded at run time, so every place here is read off the frames. The portraits sit 96
    units apart from their centre at 643, the panel's left edge at 2057 and its right margin at 195. The frame draws no
    scene: the world's screen lays one behind it */
-.character-menu[data-v-6efaddd5] {
+.character-menu[data-v-86092611] {
   position: absolute;
   inset: 0;
   color: #fff;
@@ -12,7 +415,7 @@
 
 /* The band across the top, the name and the portraits on it, a veil 96 units deep that keeps 78 hundredths of the scene
    under it all the way down, as the frame's scene measures above and below its edge */
-.head[data-v-6efaddd5] {
+.head[data-v-86092611] {
   position: absolute;
   top: 0;
   right: 0;
@@ -20,14 +423,14 @@
   height: calc(var(--unit) * 96);
   background: rgb(0 0 0 / 0.22);
 }
-.characters[data-v-6efaddd5],
-.tabs[data-v-6efaddd5] {
+.characters[data-v-86092611],
+.tabs[data-v-86092611] {
   position: absolute;
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.characters[data-v-6efaddd5] {
+.characters[data-v-86092611] {
   top: calc(var(--unit) * 12.5);
   left: calc(var(--unit) * 608);
   display: flex;
@@ -37,7 +440,7 @@
 
 /* Provisional: the portraits, which the frame draws as the game's own art once an asset is settled, until then a circle
    with the name. The chosen one's cyan underline sits 79 units below the top of its portrait */
-.character[data-v-6efaddd5] {
+.character[data-v-86092611] {
   position: relative;
   display: grid;
   width: calc(var(--unit) * 69);
@@ -53,10 +456,10 @@
   font-size: calc(var(--unit) * 11);
   place-items: center;
 }
-.character[aria-pressed="true"][data-v-6efaddd5] {
+.character[aria-pressed="true"][data-v-86092611] {
   border-color: #7fd6e0;
 }
-.character[aria-pressed="true"][data-v-6efaddd5]::after {
+.character[aria-pressed="true"][data-v-86092611]::after {
   position: absolute;
   top: calc(var(--unit) * 79);
   left: calc(var(--unit) * -13.5);
@@ -65,7 +468,7 @@
   background: #6fc9dc;
   content: "";
 }
-.breadcrumb[data-v-6efaddd5] {
+.breadcrumb[data-v-86092611] {
   position: absolute;
   top: calc(var(--unit) * 29);
   left: calc(var(--unit) * 216);
@@ -76,21 +479,32 @@
   line-height: calc(var(--unit) * 36);
 }
 
+/* The element's mark just left of the name, its size and place provisional until the parity pass measures them off the
+   frame, its colour the name's */
+.element[data-v-86092611] {
+  position: absolute;
+  top: calc(var(--unit) * 29);
+  left: calc(var(--unit) * 168);
+  width: calc(var(--unit) * 36);
+  height: calc(var(--unit) * 36);
+  fill: #e6d6a8;
+}
+
 /* The tabs down the left, measured off each tab's own frame of the recording (155 to 159 seconds): the rows on a
    69.6-unit pitch, the first's words centred 155.8 units down. Each row spans the column from the frame's left, so its
    word and its diamond are placed from the frame's own edge */
-.tabs[data-v-6efaddd5] {
+.tabs[data-v-86092611] {
   top: calc(var(--unit) * 121);
   left: 0;
   width: calc(var(--unit) * 560);
 }
-.tabs li[data-v-6efaddd5] {
+.tabs li[data-v-86092611] {
   height: calc(var(--unit) * 69.6);
 }
 
 /* A closed tab's word starts 216 units in, its ascenders 25.5 units tall in a cream a little short of white, letter-spaced
    out to the game's width, with a faint shadow round it */
-.tab[data-v-6efaddd5] {
+.tab[data-v-86092611] {
   position: relative;
   display: block;
   width: 100%;
@@ -110,7 +524,7 @@
 }
 
 /* A closed tab's diamond, 15 units corner to corner and centred 196.9 units in, the word's cream at half strength */
-.tab[data-v-6efaddd5]::before {
+.tab[data-v-86092611]::before {
   position: absolute;
   top: calc(50% - var(--unit) * 1.3);
   left: calc(var(--unit) * 191.6);
@@ -122,7 +536,7 @@
 }
 
 /* The open tab's word is a fifth larger and near white, 9.75 units further in, blooming into the light behind it */
-.tab[aria-pressed="true"][data-v-6efaddd5] {
+.tab[aria-pressed="true"][data-v-86092611] {
   z-index: 0;
   padding-left: calc(var(--unit) * 225.75);
   color: rgb(244 243 235);
@@ -135,7 +549,7 @@
 
 /* Its diamond is a faint outline 28.5 units corner to corner on the same centre, the part of it right of a line 4.5 units
    past its centre filled near white, a head pointing right, with a light rising towards it from the left corner */
-.tab[aria-pressed="true"][data-v-6efaddd5]::before {
+.tab[aria-pressed="true"][data-v-86092611]::before {
   top: 50%;
   left: calc(var(--unit) * 186.4);
   box-sizing: border-box;
@@ -148,7 +562,7 @@
 
 /* Behind its word, a warm light from the word's start out to 517.5 units, a thin bright streak along the row's middle in
    a fainter haze, as the frame less its clean plate measures it */
-.tab[aria-pressed="true"][data-v-6efaddd5]::after {
+.tab[aria-pressed="true"][data-v-86092611]::after {
   position: absolute;
   z-index: -1;
   top: 50%;
@@ -172,7 +586,7 @@
 
 /* The keys stepping through the tabs: white caps 30.75 by 25 units with dark letters, an arrow over the W and under the
    S, centred 148.9 units in from the frame's left */
-.tab-keys[data-v-6efaddd5] {
+.tab-keys[data-v-86092611] {
   position: absolute;
   top: calc(var(--unit) * 126.75);
   left: calc(var(--unit) * 133.5);
@@ -182,18 +596,18 @@
   align-items: center;
   gap: calc(var(--unit) * 3.5);
 }
-.tab-keys[data-v-6efaddd5]::before,
-.tab-keys[data-v-6efaddd5]::after {
+.tab-keys[data-v-86092611]::before,
+.tab-keys[data-v-86092611]::after {
   width: calc(var(--unit) * 11.25);
   height: calc(var(--unit) * 6);
   background: #fdfdfd;
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   content: "";
 }
-.tab-keys[data-v-6efaddd5]::after {
+.tab-keys[data-v-86092611]::after {
   clip-path: polygon(0 0, 100% 0, 50% 100%);
 }
-.key[data-v-6efaddd5] {
+.key[data-v-86092611] {
   display: grid;
   width: 100%;
   height: calc(var(--unit) * 25);
@@ -209,7 +623,7 @@
 
 /* The arrows stepping to the characters either side, centred down the frame's left and right edges, their heads 129.75
    units from the edge and their backs 153.75 */
-.step[data-v-6efaddd5] {
+.step[data-v-86092611] {
   position: absolute;
   top: calc(50% - var(--unit) * 21);
   width: calc(var(--unit) * 32.25);
@@ -219,27 +633,27 @@
   background: transparent;
   cursor: inherit;
 }
-.step svg[data-v-6efaddd5] {
+.step svg[data-v-86092611] {
   display: block;
   width: 100%;
   height: 100%;
 }
-.previous[data-v-6efaddd5] {
+.previous[data-v-86092611] {
   left: calc(var(--unit) * 129.75);
 }
-.next[data-v-6efaddd5] {
+.next[data-v-86092611] {
   right: calc(var(--unit) * 129.75);
   transform: scaleX(-1);
 }
-.arrow[data-v-6efaddd5] {
+.arrow[data-v-86092611] {
   fill: rgb(236 229 216);
 }
-.mark[data-v-6efaddd5] {
+.mark[data-v-86092611] {
   fill: rgb(236 229 216 / 0.5);
 }
 
 /* The panel's left edge sits at 2057 units of the 2580-unit frame and its right margin at 195 units */
-.panel[data-v-6efaddd5] {
+.panel[data-v-86092611] {
   position: absolute;
   top: calc(var(--unit) * 124);
   right: calc(var(--unit) * 195);
@@ -249,12 +663,12 @@
 }
 
 /* The Profile tab's stories and their text take the width the characters' row across the top leaves, from where it starts */
-.character-menu[data-tab="Profile"] .panel[data-v-6efaddd5] {
+.character-menu[data-tab="Profile"] .panel[data-v-86092611] {
   left: calc(var(--unit) * 608);
   width: auto;
 }
 
-.buttons[data-v-d4278b8b] {
+.buttons[data-v-359aa329] {
   position: absolute;
   top: calc(var(--unit) * 859);
   right: 0;
@@ -262,23 +676,62 @@
   display: flex;
   gap: calc(var(--unit) * 23);
 }
-.button[data-v-d4278b8b] {
+.button[data-v-359aa329] {
   flex: 1;
   height: calc(var(--unit) * 52);
   border-radius: calc(var(--unit) * 26);
   background: rgb(236 229 216 / 0.85);
 }
 
+.toast-notice[data-v-a09dfb40] {
+  position: relative;
+  display: flex;
+  min-width: calc(var(--unit) * 537);
+  height: calc(var(--unit) * 107);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 0 calc(var(--unit) * 82) 0 calc(var(--unit) * 148);
+  border-radius: calc(var(--unit) * 12);
+  background: #fff;
+}
+.mark[data-v-a09dfb40] {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * 61);
+  display: grid;
+  width: calc(var(--unit) * 59);
+  height: calc(var(--unit) * 59);
+  overflow: hidden;
+  border-radius: 50%;
+  background: #000;
+  place-items: center;
+  translate: 0 -50%;
+}
+.text[data-v-a09dfb40] {
+  margin: 0;
+  color: #1d1d1d;
+  font-size: calc(var(--unit) * 36);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.notice[data-v-525c0131] {
+  margin-bottom: calc(var(--unit) * 16);
+}
+
 /* Measured off the English PC client's Artifacts tab at 21:9, its settled frame at 157.5 seconds of session-2.mp4 (the
-   registered reference for it), in units from the panel's top: the details pill at 163, the set bonus block from 227
-   to 829 and the buttons at 859. The slots are drawn in the panel's top, which the game draws in the scene. Colours are
+   registered reference for it), in units from the panel's top: the details pill at 163, the set bonus block's bottom at
+   829 and the buttons at 859. The slots are drawn in the panel's top, which the game draws in the scene. The stats rows
+   sit under the details pill from 227, a row of 36 units each, and the set bonus block starts at 420 below them: both are
+   provisional, since the registered frame shows no picked piece's stats, so their place is not measured. Colours are
    provisional */
-.artifacts[data-v-d9a02adc] {
+.artifacts[data-v-525c0131] {
   position: absolute;
   inset: 0;
   color: #fff;
 }
-.slots[data-v-d9a02adc] {
+.slots[data-v-525c0131] {
   position: absolute;
   top: calc(var(--unit) * 15);
   right: 0;
@@ -289,49 +742,89 @@
   gap: calc(var(--unit) * 10);
   list-style: none;
 }
-.slot[data-v-d9a02adc] {
+.slots > li[data-v-525c0131] {
   flex: 1;
+}
+.slot[data-v-525c0131] {
+  display: block;
+  width: 100%;
   height: calc(var(--unit) * 40);
+  padding: 0;
+  border: none;
   border-radius: 50%;
   background: rgb(0 0 0 / 0.2);
+  cursor: pointer;
 }
-.slot.worn[data-v-d9a02adc] {
+.slot.worn[data-v-525c0131] {
   background: rgb(255 240 180 / 0.55);
   box-shadow: 0 0 calc(var(--unit) * 8) rgb(255 240 180 / 0.6);
 }
-.details[data-v-d9a02adc] {
+.slot[aria-pressed="true"][data-v-525c0131] {
+  outline: calc(var(--unit) * 2) solid rgb(255 255 255 / 0.8);
+  outline-offset: calc(var(--unit) * 2);
+}
+.details[data-v-525c0131] {
   position: absolute;
   top: calc(var(--unit) * 163);
   right: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: calc(var(--unit) * 42);
   border-radius: calc(var(--unit) * 21);
   background: rgb(0 0 0 / 0.2);
 }
-.set-bonus[data-v-d9a02adc] {
+.stats[data-v-525c0131] {
   position: absolute;
   top: calc(var(--unit) * 227);
   right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.stat[data-v-525c0131] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--unit) * 36);
+}
+.set-bonus[data-v-525c0131] {
+  position: absolute;
+  top: calc(var(--unit) * 420);
+  right: 0;
   bottom: calc(var(--unit) * 80);
   left: 0;
   background: rgb(0 0 0 / 0.1);
 }
+.set-bonus-heading[data-v-525c0131],
+.set-bonus-lines[data-v-525c0131] {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  list-style: none;
+}
+.button[data-v-525c0131] {
+  flex: 1;
+  height: calc(var(--unit) * 52);
+}
 
 /* Measured off the English PC client's Constellation tab at 21:9, its settled frame at 158.3 seconds of session-2.mp4
    (the star map's right-hand list), in units from the panel's top left: each ring is 72 units across, its gold border 4
    units wide with a 2-unit white band inside it, and the six are placed by CONSTELLATION_NODE_PLACES. Colours are provisional */
-.constellations[data-v-59aca725] {
+.constellations[data-v-4311eae1] {
   position: absolute;
   inset: 0;
 }
-.nodes[data-v-59aca725] {
+.nodes[data-v-4311eae1] {
   position: absolute;
   inset: 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.node[data-v-59aca725] {
+.node[data-v-4311eae1] {
   position: absolute;
   box-sizing: border-box;
   width: calc(var(--unit) * 72);
@@ -339,7 +832,7 @@
   border: calc(var(--unit) * 3) solid rgb(255 255 255 / 0.3);
   border-radius: 50%;
 }
-.node.lit[data-v-59aca725] {
+.node.lit[data-v-4311eae1] {
   background: rgb(72 53 17);
   border: calc(var(--unit) * 4) solid #ffea00;
   box-shadow:
@@ -347,6 +840,28 @@
     0 0 calc(var(--unit) * 6) rgb(255 180 40 / 0.6);
 }
 
+/* Placed under the lowest ring, which ends near 744 units, its place and colours provisional until the Constellation
+   tab's frame is measured against the button */
+.activate[data-v-4311eae1] {
+  position: absolute;
+  top: calc(var(--unit) * 800);
+  left: calc(var(--unit) * 0);
+  height: calc(var(--unit) * 56);
+  padding: 0 calc(var(--unit) * 32);
+  border: none;
+  border-radius: calc(var(--unit) * 28);
+  background: #ece5d8;
+  color: #3b4255;
+  cursor: pointer;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}
+.activate[data-v-4311eae1]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
 /* Provisional: the list and the text share the panel as two columns, the list a third of its width. The frame's sizes and
    colours are not measured yet, so they wait on the Profile tab's comparison */
 .profile[data-v-d064a750] {
@@ -416,12 +931,12 @@
 /* Measured off the English PC client's Talents tab at 21:9 (references/character-talents.png, 159 seconds), in units
    from the panel's top: the three combat talents' rows sit 90 units apart from 29, each with its icon at the panel's
    right edge. A pixel of that frame at 1440 high is 0.75 units. Colours are provisional */
-.talents[data-v-c095bfc3] {
+.talents[data-v-65541162] {
   position: absolute;
   inset: 0;
   color: #fff;
 }
-.talent-list[data-v-c095bfc3] {
+.talent-list[data-v-65541162] {
   position: absolute;
   top: calc(var(--unit) * 29);
   right: 0;
@@ -430,20 +945,42 @@
   padding: 0;
   list-style: none;
 }
-.talent[data-v-c095bfc3] {
+.talent[data-v-65541162] {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  height: calc(var(--unit) * 60);
+  min-height: calc(var(--unit) * 60);
   margin-bottom: calc(var(--unit) * 30);
   gap: calc(var(--unit) * 16);
 }
-.level[data-v-c095bfc3] {
+.level[data-v-65541162] {
   font-size: calc(var(--unit) * 26);
   font-weight: 600;
   text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
 }
-.icon[data-v-c095bfc3] {
+
+/* The next level's phase, cost and the reason it cannot rise, beside the Upgrade. Their place and size are provisional,
+   queued for the user's eyes against the recording */
+.detail[data-v-65541162] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: calc(var(--unit) * 18);
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
+}
+.costs[data-v-65541162] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.reason[data-v-65541162] {
+  color: #ffb4a8;
+}
+.upgrade[data-v-65541162] {
+  font-size: calc(var(--unit) * 18);
+  font-weight: 600;
+}
+.icon[data-v-65541162] {
   width: calc(var(--unit) * 40);
   height: calc(var(--unit) * 40);
   border-radius: 50%;
@@ -454,12 +991,12 @@
    from the panel's top: a pixel of that frame at 1440 high is 0.75 units. The name's line sits 15 units down, the two
    stat rows at 101 and 135, the stars at 206, the level at 244, the refinement at 289 and the buttons at 859. Their
    colours are provisional, sampled off the frame's darker panel glass */
-.weapons[data-v-bf484c68] {
+.weapons[data-v-77cff4ef] {
   position: absolute;
   inset: 0;
   color: #fff;
 }
-.name[data-v-bf484c68] {
+.name[data-v-77cff4ef] {
   position: absolute;
   top: calc(var(--unit) * 15);
   right: 0;
@@ -470,7 +1007,7 @@
   line-height: calc(var(--unit) * 36);
   text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
 }
-.stars[data-v-bf484c68] {
+.stars[data-v-77cff4ef] {
   position: absolute;
   top: calc(var(--unit) * 206);
   left: 0;
@@ -478,13 +1015,11 @@
   margin: 0;
   gap: calc(var(--unit) * 4);
 }
-.star[data-v-bf484c68] {
+.star[data-v-77cff4ef] {
   width: calc(var(--unit) * 20);
   height: calc(var(--unit) * 20);
-  background: #f5c542;
-  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
 }
-.stats[data-v-bf484c68] {
+.stats[data-v-77cff4ef] {
   position: absolute;
   top: calc(var(--unit) * 101);
   right: 0;
@@ -495,7 +1030,7 @@
 }
 
 /* Each row is a translucent band its value sits at the right of, on the game's 34-unit pitch */
-.stat[data-v-bf484c68] {
+.stat[data-v-77cff4ef] {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -507,7 +1042,7 @@
   font-size: calc(var(--unit) * 26);
   font-weight: 600;
 }
-.level[data-v-bf484c68] {
+.level[data-v-77cff4ef] {
   position: absolute;
   top: calc(var(--unit) * 244);
   right: 0;
@@ -519,54 +1054,186 @@
   font-size: calc(var(--unit) * 24);
   font-weight: 600;
 }
-.level-text[data-v-bf484c68] {
+.level-text[data-v-77cff4ef] {
   padding: 0 calc(var(--unit) * 8);
   border-radius: calc(var(--unit) * 4);
   background: rgb(0 0 0 / 0.45);
 }
-
+.refinement[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 289);
+  right: 0;
+  left: 0;
+  margin: 0;
+  color: #f0d27a;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 19);
+}
 /* The six ascension phases, each a small star the phases reached light */
-.spark[data-v-bf484c68] {
+.spark[data-v-77cff4ef] {
   width: calc(var(--unit) * 14);
   height: calc(var(--unit) * 14);
   background: rgb(255 255 255 / 0.3);
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
 }
-.spark.lit[data-v-bf484c68] {
+.spark.lit[data-v-77cff4ef] {
   background: #fff;
 }
-.refinement[data-v-bf484c68] {
+.star[data-v-77cff4ef] {
+  background: #f5c542;
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+
+/* The screen's colours are provisional until the glyph pass reads them from the recording */
+.cooking-screen[data-v-4aee3a78] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+}
+.stage[data-v-4aee3a78] {
   position: absolute;
-  top: calc(var(--unit) * 289);
-  right: 0;
-  left: 0;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.pot[data-v-4aee3a78] {
+  fill: #3a3a44;
+}
+.pot-rim[data-v-4aee3a78] {
+  fill: #4a4a56;
+}
+.track[data-v-4aee3a78] {
+  fill: none;
+  stroke: #5b5145;
+  stroke-width: 6;
+}
+.regular[data-v-4aee3a78] {
+  fill: none;
+  stroke: #e9dcb0;
+  stroke-width: 22;
+}
+.delicious[data-v-4aee3a78] {
+  fill: none;
+  stroke: #f0a040;
+  stroke-width: 22;
+}
+.pointer[data-v-4aee3a78] {
+  fill: #fff8e8;
+  stroke: #3a2f22;
+  stroke-width: 4;
+}
+.title[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 32);
+  left: calc(var(--unit) * 96);
   margin: 0;
-  color: #f0d27a;
-  font-size: calc(var(--unit) * 26);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 28);
   font-weight: 600;
-  line-height: calc(var(--unit) * 19);
+}
+.close[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 32);
+  right: calc(var(--unit) * 96);
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  border: 0;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 20%);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 28);
+}
+.dishes[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 96);
+  display: grid;
+  gap: calc(var(--unit) * 12);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.dishes button[data-v-4aee3a78] {
+  width: calc(var(--unit) * 260);
+  padding: calc(var(--unit) * 10);
+  border: 0;
+  background: rgb(255 255 255 / 12%);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 20);
+  text-align: left;
+}
+.dishes .selected[data-v-4aee3a78] {
+  background: #a154de;
+}
+.auto-cook[data-v-4aee3a78] {
+  position: absolute;
+  bottom: calc(var(--unit) * 40);
+  left: calc(50% + var(--unit) * 100);
+  width: calc(var(--unit) * 180);
+  height: calc(var(--unit) * 52);
+  transform: translateX(-50%);
+  border: 0;
+  background: #3a3a44;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+.auto-cook[data-v-4aee3a78]:disabled {
+  opacity: 0.4;
+}
+.stop[data-v-4aee3a78] {
+  position: absolute;
+  bottom: calc(var(--unit) * 40);
+  left: 50%;
+  width: calc(var(--unit) * 140);
+  height: calc(var(--unit) * 52);
+  transform: translateX(-50%);
+  border: 0;
+  background: #a154de;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+
+.disc-button[data-v-f5c878ff] {
+  display: grid;
+  width: calc(var(--unit) * var(--size));
+  height: calc(var(--unit) * var(--size));
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #fdfdfd;
+  box-shadow: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 1) rgb(0 0 0 / 0.3);
+  cursor: inherit;
+  place-items: center;
 }
 
-.crafting-screen[data-v-501eda08] {
+.title[data-v-5c68ef69] {
+  position: absolute;
+  top: calc(var(--unit) * 30);
+  left: calc(var(--unit) * 145);
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+}
+
+.crafting-screen[data-v-bd114327] {
   position: absolute;
   inset: 0;
   color: #fff7ea;
 }
-.head[data-v-501eda08] {
+.head[data-v-bd114327] {
   position: absolute;
   inset: 0 0 auto;
   height: calc(var(--unit) * 95);
   background: #161c31;
 }
-.title[data-v-501eda08] {
-  position: absolute;
-  top: calc(var(--unit) * 30);
-  left: calc(var(--unit) * 145);
-  margin: 0;
-  font-size: calc(var(--unit) * 22);
+.heading[data-v-bd114327] {
   line-height: calc(var(--unit) * 32);
 }
-.coins[data-v-501eda08] {
+.coins[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 34);
   left: calc(var(--unit) * 1650);
@@ -574,7 +1241,7 @@
   font-size: calc(var(--unit) * 22);
   line-height: calc(var(--unit) * 26);
 }
-.coin[data-v-501eda08] {
+.coin[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 4);
   left: calc(var(--unit) * -30);
@@ -583,20 +1250,12 @@
   border-radius: 50%;
   background: #e6b84a;
 }
-.close[data-v-501eda08] {
+.close[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 18);
   left: calc(var(--unit) * 1828);
-  width: calc(var(--unit) * 56);
-  height: calc(var(--unit) * 56);
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: #fdfdfd;
-  box-shadow: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 1) rgb(0 0 0 / 0.3);
-  cursor: inherit;
 }
-.close svg[data-v-501eda08] {
+.close svg[data-v-bd114327] {
   width: calc(var(--unit) * 24);
   height: calc(var(--unit) * 24);
   fill: none;
@@ -604,7 +1263,7 @@
   stroke-linecap: round;
   stroke-width: 3;
 }
-.tabs[data-v-501eda08] {
+.tabs[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 24);
   left: calc(var(--unit) * 822);
@@ -613,7 +1272,7 @@
   padding: 0;
   list-style: none;
 }
-.tab[data-v-501eda08] {
+.tab[data-v-bd114327] {
   width: calc(var(--unit) * 96);
   height: calc(var(--unit) * 68);
   padding: 0;
@@ -622,16 +1281,16 @@
   color: inherit;
   cursor: inherit;
 }
-.tab[aria-pressed="true"][data-v-501eda08] {
+.tab[aria-pressed="true"][data-v-bd114327] {
   border-bottom: calc(var(--unit) * 4) solid #e8d9b0;
 }
-.list[data-v-501eda08] {
+.list[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 120);
   left: calc(var(--unit) * 66);
   width: calc(var(--unit) * 580);
 }
-.recipes[data-v-501eda08] {
+.recipes[data-v-bd114327] {
   display: grid;
   grid-template-columns: repeat(4, calc(var(--unit) * 127));
   gap: calc(var(--unit) * 21) calc(var(--unit) * 19);
@@ -639,7 +1298,7 @@
   padding: 0;
   list-style: none;
 }
-.recipe[data-v-501eda08] {
+.recipe[data-v-bd114327] {
   position: relative;
   width: 100%;
   height: calc(var(--unit) * 152);
@@ -650,10 +1309,16 @@
   color: inherit;
   cursor: inherit;
 }
-.recipe[aria-pressed="true"][data-v-501eda08] {
+.recipe[aria-pressed="true"][data-v-bd114327] {
   outline: calc(var(--unit) * 2) solid #fdfdfd;
 }
-.recipe-name[data-v-501eda08] {
+.recipe-count[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 4);
+  right: calc(var(--unit) * 4);
+  font-size: calc(var(--unit) * 14);
+}
+.recipe-name[data-v-bd114327] {
   position: absolute;
   right: calc(var(--unit) * 4);
   bottom: calc(var(--unit) * 4);
@@ -665,11 +1330,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.detail[data-v-501eda08] {
+.detail[data-v-bd114327] {
   position: absolute;
   inset: 0;
 }
-.recipe-title[data-v-501eda08] {
+.recipe-title[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 113);
   left: calc(var(--unit) * 1020);
@@ -680,7 +1345,7 @@
   line-height: calc(var(--unit) * 36);
   text-align: center;
 }
-.materials-band[data-v-501eda08] {
+.materials-band[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 745);
   left: calc(var(--unit) * 735);
@@ -688,7 +1353,7 @@
   height: calc(var(--unit) * 213);
   background: #3e4860;
 }
-.materials-label[data-v-501eda08] {
+.materials-label[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 756);
   left: calc(var(--unit) * 788);
@@ -696,7 +1361,7 @@
   font-size: calc(var(--unit) * 20);
   line-height: calc(var(--unit) * 24);
 }
-.materials[data-v-501eda08] {
+.materials[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 810);
   left: calc(var(--unit) * 983);
@@ -706,7 +1371,7 @@
   padding: 0;
   list-style: none;
 }
-.material[data-v-501eda08] {
+.material[data-v-bd114327] {
   display: grid;
   width: calc(var(--unit) * 112);
   height: calc(var(--unit) * 132);
@@ -714,33 +1379,21 @@
   font-size: calc(var(--unit) * 18);
   place-items: end center;
 }
-.amount[data-v-501eda08] {
+.amount[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 666);
   left: calc(var(--unit) * 1120);
   width: calc(var(--unit) * 365);
-  height: calc(var(--unit) * 14);
-  margin: 0;
-  appearance: none;
-  background: transparent;
-  cursor: inherit;
 }
-.amount[data-v-501eda08]::-webkit-slider-runnable-track {
-  height: calc(var(--unit) * 4);
+.amount[data-v-bd114327]::-webkit-slider-runnable-track {
   background: #2d4159;
 }
-.amount[data-v-501eda08]::-webkit-slider-thumb {
-  width: calc(var(--unit) * 14);
-  height: calc(var(--unit) * 14);
-  margin-top: calc(var(--unit) * -5);
-  border-radius: calc(var(--unit) * 2);
+.amount[data-v-bd114327]::-webkit-slider-thumb {
   background: #fff7ea;
-  transform: rotate(45deg);
-  appearance: none;
 }
-.crafted[data-v-501eda08] {
+.crafted[data-v-bd114327],
+.required[data-v-bd114327] {
   position: absolute;
-  top: calc(var(--unit) * 622);
   left: calc(var(--unit) * 1020);
   width: calc(var(--unit) * 570);
   margin: 0;
@@ -748,17 +1401,13 @@
   line-height: calc(var(--unit) * 26);
   text-align: center;
 }
-.required[data-v-501eda08] {
-  position: absolute;
+.crafted[data-v-bd114327] {
+  top: calc(var(--unit) * 622);
+}
+.required[data-v-bd114327] {
   top: calc(var(--unit) * 700);
-  left: calc(var(--unit) * 1020);
-  width: calc(var(--unit) * 570);
-  margin: 0;
-  font-size: calc(var(--unit) * 22);
-  line-height: calc(var(--unit) * 26);
-  text-align: center;
 }
-.craft[data-v-501eda08] {
+.craft[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 990);
   left: calc(var(--unit) * 1636);
@@ -772,7 +1421,7 @@
   font-size: calc(var(--unit) * 22);
   cursor: inherit;
 }
-.crafters[data-v-501eda08] {
+.crafters[data-v-bd114327] {
   position: absolute;
   top: calc(var(--unit) * 808);
   left: calc(var(--unit) * 1517);
@@ -781,7 +1430,7 @@
   padding: 0;
   list-style: none;
 }
-.crafter[data-v-501eda08] {
+.crafter[data-v-bd114327] {
   position: relative;
   width: 100%;
   height: calc(var(--unit) * 134);
@@ -791,10 +1440,10 @@
   color: inherit;
   cursor: inherit;
 }
-.crafter[aria-pressed="true"][data-v-501eda08] {
+.crafter[aria-pressed="true"][data-v-bd114327] {
   outline: calc(var(--unit) * 2) solid #fdfdfd;
 }
-.crafter-name[data-v-501eda08] {
+.crafter-name[data-v-bd114327] {
   position: absolute;
   right: 0;
   bottom: calc(var(--unit) * 4);
@@ -803,353 +1452,502 @@
   line-height: calc(var(--unit) * 22);
   text-align: center;
 }
-.tab-name[data-v-501eda08] {
+.tab-name[data-v-bd114327] {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
 }
-
-/* The parent places the button and may pad it, so these yield to any rule of its own */
-:where(.game-button[data-v-cab29bfa]) {
-  position: relative;
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
+/* The quantity slider the crafting and shop screens share, each screen sets its own position and track colour */
+.amount[data-v-bd114327] {
+  height: calc(var(--unit) * 14);
+  margin: 0;
+  appearance: none;
+  background: transparent;
   cursor: inherit;
-  font: inherit;
+}
+.amount[data-v-bd114327]::-webkit-slider-runnable-track {
+  height: calc(var(--unit) * 4);
+}
+.amount[data-v-bd114327]::-webkit-slider-thumb {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  margin-top: calc(var(--unit) * -5);
+  border-radius: calc(var(--unit) * 2);
+  transform: rotate(45deg);
+  appearance: none;
+}
+
+.dialogue-screen[data-v-da022ee0] {
+  position: absolute;
+  inset: 0;
+}
+.band[data-v-da022ee0] {
+  position: absolute;
+  inset: auto 0 0;
+  display: flex;
+  height: calc(var(--unit) * 300);
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  padding-top: calc(var(--unit) * 42);
+}
+
+/* Provisional: a narration, which names no speaker and no role, is drawn centred on a black screen, the middle of the
+   screen being a best estimate of where the game's black screen sets its line, until a recording of one is read for
+   its place and darkness */
+.band.narration[data-v-da022ee0] {
+  inset: 0;
+  height: auto;
+  justify-content: center;
+  padding-top: 0;
+  background: #000;
+}
+
+/* The name's gold is the brightest saturated pixel of its letters in the English client's recording */
+.speaker[data-v-da022ee0] {
+  margin: 0;
+  color: #ffc700;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* The role under the name in the recording's smaller gold; its slot is the line's offset between a speaker with one and
+   one without, so the line keeps its place either way */
+.role[data-v-da022ee0] {
+  margin: 0;
+  color: #ffc700;
+  font-size: calc(var(--unit) * 13);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 16.5);
+}
+.line[data-v-da022ee0] {
+  max-width: calc(var(--unit) * 1200);
+  margin: calc(var(--unit) * 13.5) 0 0;
+  color: #fff;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  letter-spacing: calc(var(--unit) * 2.3);
+  line-height: calc(var(--unit) * 32);
+  text-align: center;
+}
+.unrevealed[data-v-da022ee0] {
+  visibility: hidden;
+}
+
+/* The whole line once, for a screen reader, which the written-out halves are hidden from */
+.spoken[data-v-da022ee0] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-/* Each state is reached over its own crossfade: the duration is the state's being entered, so a hover fades in over
-   The hover's and out over the rest's, and a press shows at once */
-.game-button[data-v-cab29bfa] {
-  --state-duration: var(--v8de8a9a0);
-  transition: color var(--state-duration);
-}
-.game-button[data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
-  --state-duration: var(--v4f7d0248);
-}
-.game-button[data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
-  --state-duration: 0s;
+/* The replies' place is read off the English client's recording: the first pill's left edge at 1275 of 1920 and its top
+   at 698 of 1080, each pill 45 high and 15 apart */
+.choices[data-v-da022ee0] {
+  position: absolute;
+  top: calc(var(--unit) * 698);
+  right: calc(var(--unit) * 273);
+  display: flex;
+  width: calc(var(--unit) * 372);
+  flex-direction: column;
+  gap: calc(var(--unit) * 15);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-/* The side bar's icon, gold at rest. Hovered, a translucent navy disc 65 units across lights behind it, centred on its
-   Ink, and the icon turns cream and grows by 1.12, its ink's area fitted at rest and hovered: the current English PC
-   Client's settings gear at 1080 high (`yt-5EmJX_RyuY8-menu-settings` at 9.8 and 10.5 seconds). Pressed, the disc
-   Turns cream and the icon ink, falling back to its resting size, the press's smaller click: the same gear held at 10.65
-   Seconds, its ink's area 1.01 of its rest's. The disc's colour is fitted over two side bars' greens, the same
-   Recording's and a 2024 one's (`yt-kIDee7nyD0w-menu-quit-prompt`) */
-.game-button[data-kind="Disc"][data-v-cab29bfa] {
-  isolation: isolate;
+/* The reply's look and its states are its GameButton kind's, so the screen places each and sets only its layout */
+.choice[data-v-da022ee0] {
+  display: flex;
+  width: 100%;
+  min-height: calc(var(--unit) * 45);
+  align-items: center;
+  gap: calc(var(--unit) * 7.5);
+  padding: 0 calc(var(--unit) * 10.5);
+  text-align: start;
 }
 
-/* At zero specificity, so a parent sets the icon's colour at rest where it places the button, as the rest of the
-   Button yields */
-:where(.game-button[data-kind="Disc"][data-v-cab29bfa]) {
-  color: var(--v5ff883e5);
+/* The mark's place, its traced glyph from the game's own file, drawn in the pill's colour */
+.icon[data-v-da022ee0] {
+  width: calc(var(--unit) * 30);
+  height: calc(var(--unit) * 30);
+  flex: none;
 }
 
-/* Behind everything the button holds, which its own layer keeps above it however it is placed */
-.game-button[data-kind="Disc"][data-v-cab29bfa]::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-  width: calc(var(--unit) * 65);
-  aspect-ratio: 1;
-  border-radius: 50%;
-  translate: -50% -50%;
-  transition: background-color var(--state-duration);
+.item-tile[data-v-8cf70011] {
+  display: inline-block;
+  container-type: size;
 }
-.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
-  transition: scale var(--state-duration);
+.face[data-v-8cf70011] {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: end;
+  overflow: hidden;
+  border-radius: 7cqw;
 }
-.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
-  outline: none;
-  color: var(--c23e4506);
+.item-tile[data-rarity="3"] .face[data-v-8cf70011] {
+  background: linear-gradient(#79809d, #7485a6 30%, #748faf 60%, #7298b9 77%);
 }
-.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before {
-  background-color: rgb(30 49 63 / 0.5);
+.item-tile[data-rarity="4"] .face[data-v-8cf70011] {
+  background: linear-gradient(#7e77a2, #877aac 30%, #917db4 60%, #9c80bc 77%);
 }
-.game-button[data-kind="Disc"]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) > [data-v-cab29bfa-s] {
-  scale: 1.12;
+.item-tile[data-rarity="5"] .face[data-v-8cf70011] {
+  background: linear-gradient(#b0804c, #ba8446 30%, #c38946 60%, #cc8d43 77%);
 }
-.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
-  color: var(--v7defe8be);
+.count[data-v-8cf70011] {
+  width: 100%;
+  height: 24cqh;
+  color: #fff;
+  font-size: var(--count-size, 30cqh);
+  font-weight: 600;
+  line-height: 24cqh;
+  text-align: center;
 }
-.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
-  background-color: var(--c23e4506);
+.item-tile[data-rarity="3"] .count[data-v-8cf70011] {
+  background: #4d6680;
 }
-.game-button[data-kind="Disc"]:enabled:is(:active, [data-interaction-state="Pressed"] *) > [data-v-cab29bfa-s] {
-  scale: 1;
+.item-tile[data-rarity="4"] .count[data-v-8cf70011] {
+  background: #665d82;
 }
-
-/* An unbuilt screen's button, which the game never has, is drawn faded and answers nothing */
-.game-button[data-kind="Disc"][data-v-cab29bfa]:disabled {
-  opacity: 0.4;
+.item-tile[data-rarity="5"] .count[data-v-8cf70011] {
+  background: #6b625c;
 }
 
-/* The lit icon's name, in a dark slate box 31 units high, centred on the icon and starting 49.5 units right of its
-   Centre, 5 past the side bar's edge, its words 17 units to their caps: the same recording's "Settings", read once it
-   Has settled at 10.5 seconds, where the box reads the same over the panel's cream and over a tile */
-.tip[data-v-cab29bfa] {
+.expedition-screen[data-v-ee73652f] {
   position: absolute;
-  top: 50%;
-  left: calc(50% + var(--unit) * 49.5);
-  padding: 0 calc(var(--unit) * 9);
-  border-radius: calc(var(--unit) * 3);
-  background: #4d5063;
-  color: #e6eaf0;
-  font-size: calc(var(--unit) * 24);
+  inset: 0;
+  overflow: hidden;
+  color: #ece5d8;
   font-weight: 600;
-  line-height: calc(var(--unit) * 31);
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--state-duration);
-  translate: 0 -50%;
 }
-.game-button:enabled:is(:hover, :focus-visible, :active, [data-interaction-state] *) > .tip[data-v-cab29bfa] {
-  opacity: 1;
+.map[data-v-ee73652f] {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 45%, #e4d9c0, #b8a683 70%, #8e7f63);
 }
-
-/* A row, the game's rectangle, lit by a tint laid over its own box and behind its words, as a disc is: hovered or focused,
-   pressed at once, or held selected by its parent's aria-selected at the hover's strength. Provisional, see the colours */
-.game-button[data-kind="Row"][data-v-cab29bfa] {
-  isolation: isolate;
+.limit[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 33);
+  right: calc(var(--unit) * 162);
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
 }
-.game-button[data-kind="Row"][data-v-cab29bfa]::before {
-  content: "";
+.close[data-v-ee73652f] {
   position: absolute;
-  z-index: -1;
-  inset: 0;
-  border-radius: inherit;
-  background-color: var(--v78a9c41c);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--state-duration);
+  top: calc(var(--unit) * 20);
+  right: calc(var(--unit) * 50);
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 10);
+  background: #f2efe6;
+  color: #3b4255;
+  font: inherit;
+  font-size: calc(var(--unit) * 36);
+  line-height: calc(var(--unit) * 56);
 }
-.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before,
-.game-button[data-kind="Row"][aria-selected="true"][data-v-cab29bfa]::before {
-  opacity: 1;
+.nations[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 135);
+  left: calc(var(--unit) * 70);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 20);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
-  background-color: var(--v77c60e0e);
-  opacity: 1;
+.nation[data-v-ee73652f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 12);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 30);
+  text-shadow: 0 calc(var(--unit) * 2) calc(var(--unit) * 4) rgb(0 0 0 / 0.5);
 }
-
-/* The cream pill, read off the game's own (block 07356235: the quit prompt's choices are its option pill, and a dialog's
-   Confirm its brighter twin), its look measured on a dialog's Confirm at 1080 high (`yt-5EmJX_RyuY8-menu-settings` from
-   140.5 seconds). At rest its words are the game's ink, inside a 3 unit pale rim and a 3 unit darker band within it,
-   The pill's own bevel read off the wiki's crop of the quit prompt, and a faint dark shadow 7 units round it. Hovered,
-   A white ring lights over its edge, 1 unit outside it and 2 within, its shadow turning a faint white glow; it holds
-   Its size, the ring alone reaching past it */
-.game-button[data-kind="Pill"][data-v-cab29bfa] {
-  --state-duration: var(--v7a0541ee);
-  border-radius: calc(infinity * 1px);
-  background-color: var(--c23e4506);
-  box-shadow:
-    0 0 0 0 rgb(255 255 255 / 0),
-    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
-    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
-    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
-    0 0 calc(var(--unit) * 7) rgb(17 17 17 / 0.1);
-  color: var(--v7defe8be);
-  transition-duration: var(--state-duration);
-  transition-property: background-color, box-shadow, color;
+.nation[aria-pressed="true"][data-v-ee73652f] {
+  font-size: calc(var(--unit) * 38);
 }
-.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
-  outline: none;
-  box-shadow:
-    0 0 0 calc(var(--unit) * 1) #fff,
-    inset 0 0 0 calc(var(--unit) * 2) #fff,
-    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
-    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
-    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
+.marker[data-v-ee73652f] {
+  width: calc(var(--unit) * 12);
+  height: calc(var(--unit) * 12);
+  flex: none;
+  background: currentcolor;
+  transform: rotate(45deg);
+}
+.alert[data-v-ee73652f] {
+  display: inline-flex;
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #d8473a;
+  color: #fff;
+  font-size: calc(var(--unit) * 16);
 }
 
-/* Pressed, the pill's cream is tinted to slate at half alpha, its bevel lost in it, and from 2 units inside its edge a
-   Gold light adds over it, as the game adds it, fading from full to half as the words turn from black to cream over the
-   Press's clip. The game's light adds onto the world, which a screen's own layer cannot reach, so the gold is drawn
-   Over the world at half alpha in the colour the sum settles to, the slate and its light together, which matches the
-   Game's over any world but for red, 12 short where the sum passes white; the clip's first frame is the sum alone,
-   Opaque. The words show over the light only when the pill's content is positioned, as a laid out label is not */
-.game-button[data-kind="Pill"][data-v-cab29bfa]::before {
-  content: "";
+/* Each pin is a circle 80 across standing on its place, its point under it, the picked one outlined as the game brackets it */
+.pins[data-v-ee73652f] {
   position: absolute;
   inset: 0;
-  border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
-  border-radius: inherit;
-  background: rgb(255 243 183 / 0.5) padding-box;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--state-duration);
-}
-.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
-  background-color: transparent;
-  box-shadow:
-    0 0 0 0 rgb(255 255 255 / 0),
-    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
-    inset 0 0 0 calc(var(--unit) * 3) rgb(241 237 229 / 0),
-    inset 0 0 0 calc(var(--unit) * 6) rgb(230 225 213 / 0),
-    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.1);
-  color: var(--c23e4506);
-  animation: pill-press-words-cab29bfa var(--v307a3362) var(--v0673242b);
-}
-.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
-  opacity: 1;
-  animation: pill-press-light-cab29bfa var(--v307a3362) var(--v0673242b);
-}
-@keyframes pill-press-words-cab29bfa {
-from {
-    color: #000;
-}
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-@keyframes pill-press-light-cab29bfa {
-from {
-    background-color: rgb(241 211 142);
+.pins li[data-v-ee73652f] {
+  position: absolute;
+  left: calc(var(--unit) * var(--x));
+  top: calc(var(--unit) * var(--y));
 }
+.pin[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * -40);
+  left: calc(var(--unit) * -40);
+  width: calc(var(--unit) * 80);
+  height: calc(var(--unit) * 80);
+  padding: 0;
+  border: calc(var(--unit) * 4) solid #dcd5c4;
+  border-radius: 50%;
+  background: #f7f4ec;
+  color: #6f6a58;
+  font: inherit;
+  font-size: calc(var(--unit) * 48);
+  line-height: calc(var(--unit) * 72);
+  box-shadow: 0 calc(var(--unit) * 4) calc(var(--unit) * 8) rgb(0 0 0 / 0.3);
 }
 
-/* The dialogue reply's pill: a fifth black over the scene at rest, its words white, and lit as a cream-white pill with slate
-   Words when hovered, focused or selected by its screen. Its press holds that lit look at once. Provisional past the rest, see
-   The constants */
-.game-button[data-kind="Reply"][data-v-cab29bfa] {
-  --state-duration: var(--v8de8a9a0);
-  border-radius: calc(var(--unit) * 23);
-  background-color: var(--v40afb3ee);
+/* The time left on the expedition away from a place, a dark tag above its pin */
+.away[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * -110);
+  left: 0;
+  padding: calc(var(--unit) * 4) calc(var(--unit) * 14);
+  border-radius: calc(var(--unit) * 14);
+  background: rgb(24 26 34 / 0.9);
   color: #fff;
-  font-size: calc(var(--unit) * 26);
-  font-weight: 600;
-  letter-spacing: calc(var(--unit) * 0.5);
-  transition-duration: var(--state-duration);
-  transition-property: background-color, color;
+  font-size: calc(var(--unit) * 20);
+  transform: translateX(-50%);
+  white-space: nowrap;
 }
-.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
-  --state-duration: var(--v4f7d0248);
-  outline: none;
-  background-color: var(--v5683177c);
-  color: var(--a79a636e);
+.pin[data-v-ee73652f]::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border: calc(var(--unit) * 10) solid transparent;
+  border-top-color: #dcd5c4;
+  content: "";
+  transform: translateX(-50%);
 }
-.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
-  --state-duration: 0s;
-  background-color: var(--v5683177c);
-  color: var(--a79a636e);
+.pin[aria-pressed="true"][data-v-ee73652f] {
+  outline: calc(var(--unit) * 3) solid #fff;
+  outline-offset: calc(var(--unit) * 22);
 }
 
-/* The game draws no state for a plain button, so a keyboard's focus is ringed in the white its pills light in */
-.game-button[data-kind="Plain"][data-v-cab29bfa]:focus-visible {
-  outline: calc(var(--unit) * 3) solid #fff;
-  outline-offset: calc(var(--unit) * -2);
+/* The panel at 1445 from the left and 120 from the top, 432 wide and 598 high, its children placed from its corner */
+.detail[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 1445);
+  width: calc(var(--unit) * 432);
+  height: calc(var(--unit) * 598);
+  margin: 0;
+  background: #e8e3d6;
+  color: #3b4255;
+  box-shadow: 0 0 calc(var(--unit) * 12) rgb(0 0 0 / 0.35);
 }
-@media (prefers-reduced-motion: reduce) {
-.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
-    transition: none;
+.detail-name[data-v-ee73652f] {
+  position: absolute;
+  top: 0;
+  left: calc(var(--unit) * 25);
+  height: calc(var(--unit) * 52);
+  margin: 0;
+  color: #d8c8a0;
+  font-size: calc(var(--unit) * 24);
+  line-height: calc(var(--unit) * 52);
 }
+.detail[data-v-ee73652f]::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 52);
+  background: #4b5165;
+  content: "";
 }
-
-.dialogue-screen[data-v-da022ee0] {
+.picture[data-v-ee73652f] {
   position: absolute;
-  inset: 0;
+  top: calc(var(--unit) * 52);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 158);
+  background: linear-gradient(#9fc3d3, #7ea9a0 40%, #6f8f5c 70%, #5b7650);
 }
-.band[data-v-da022ee0] {
+.description[data-v-ee73652f] {
   position: absolute;
-  inset: auto 0 0;
-  display: flex;
-  height: calc(var(--unit) * 300);
+  top: calc(var(--unit) * 210);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 160);
+  margin: 0;
+  padding: calc(var(--unit) * 14) calc(var(--unit) * 25) 0;
+  overflow: hidden;
   box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  padding-top: calc(var(--unit) * 42);
-}
-
-/* Provisional: a narration, which names no speaker and no role, is drawn centred on a black screen, the middle of the
-   screen being a best estimate of where the game's black screen sets its line, until a recording of one is read for
-   its place and darkness */
-.band.narration[data-v-da022ee0] {
-  inset: 0;
-  height: auto;
-  justify-content: center;
-  padding-top: 0;
-  background: #000;
+  font-size: calc(var(--unit) * 21);
+  font-weight: 400;
+  line-height: calc(var(--unit) * 26);
 }
-
-/* The name's gold is the brightest saturated pixel of its letters in the English client's recording */
-.speaker[data-v-da022ee0] {
+.rewards-label[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 389);
+  left: calc(var(--unit) * 29);
   margin: 0;
-  color: #ffc700;
-  font-size: calc(var(--unit) * 30);
-  font-weight: 600;
-  line-height: 1;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 28);
 }
-
-/* The role under the name in the recording's smaller gold; its slot is the line's offset between a speaker with one and
-   one without, so the line keeps its place either way */
-.role[data-v-da022ee0] {
+.rewards[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 428);
+  left: calc(var(--unit) * 29);
+  display: flex;
+  gap: calc(var(--unit) * 15);
   margin: 0;
-  color: #ffc700;
-  font-size: calc(var(--unit) * 13);
-  font-weight: 600;
-  line-height: calc(var(--unit) * 16.5);
+  padding: 0;
+  list-style: none;
 }
-.line[data-v-da022ee0] {
-  max-width: calc(var(--unit) * 1200);
-  margin: calc(var(--unit) * 13.5) 0 0;
+.item[data-v-ee73652f] {
+  display: block;
+  width: calc(var(--unit) * 76);
+  height: calc(var(--unit) * 76);
+}
+.status[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 527);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 69);
+  margin: 0;
+  background: #d9a441;
   color: #fff;
   font-size: calc(var(--unit) * 26);
-  font-weight: 600;
-  letter-spacing: calc(var(--unit) * 2.3);
-  line-height: calc(var(--unit) * 32);
+  line-height: calc(var(--unit) * 69);
   text-align: center;
 }
-.unrevealed[data-v-da022ee0] {
-  visibility: hidden;
-}
 
-/* The whole line once, for a screen reader, which the written-out halves are hidden from */
-.spoken[data-v-da022ee0] {
+/* The picker over the map's left, a row a character with its bonus words and its status when it is away */
+.characters[data-v-ee73652f] {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(var(--unit) * 960);
+  padding: calc(var(--unit) * 40) calc(var(--unit) * 50);
+  box-sizing: border-box;
+  background: rgb(31 37 54 / 0.96);
+  color: #f3eee3;
 }
-
-/* The replies' place is read off the English client's recording: the first pill's left edge at 1275 of 1920 and its top
-   at 698 of 1080, each pill 45 high and 15 apart */
-.choices[data-v-da022ee0] {
-  position: absolute;
-  top: calc(var(--unit) * 698);
-  right: calc(var(--unit) * 273);
+.characters-title[data-v-ee73652f] {
+  margin: 0 0 calc(var(--unit) * 30);
+  color: #d8c8a0;
+  font-size: calc(var(--unit) * 30);
+}
+.characters ul[data-v-ee73652f] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.character[data-v-ee73652f] {
   display: flex;
-  width: calc(var(--unit) * 372);
+  width: 100%;
+  height: calc(var(--unit) * 120);
+  margin-bottom: calc(var(--unit) * 10);
+  padding: 0 calc(var(--unit) * 30);
   flex-direction: column;
-  gap: calc(var(--unit) * 15);
+  justify-content: center;
+  border: none;
+  border-radius: calc(var(--unit) * 6);
+  background: #3b4560;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.character[data-v-ee73652f]:disabled {
+  opacity: 0.5;
+}
+.character-name[data-v-ee73652f] {
+  font-size: calc(var(--unit) * 34);
+}
+.character-bonus[data-v-ee73652f] {
+  color: #b9c2d6;
+  font-size: calc(var(--unit) * 22);
+}
+.character-status[data-v-ee73652f] {
+  color: #e3c77a;
+  font-size: calc(var(--unit) * 22);
+}
+.durations[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 527);
+  right: 0;
+  left: 0;
+  display: flex;
+  height: calc(var(--unit) * 69);
   margin: 0;
   padding: 0;
+  background: #4b5165;
   list-style: none;
 }
-
-/* The reply's look and its states are its GameButton kind's, so the screen places each and sets only its layout */
-.choice[data-v-da022ee0] {
+.durations li[data-v-ee73652f] {
   display: flex;
-  width: 100%;
-  min-height: calc(var(--unit) * 45);
+  flex: 1;
+}
+.durations button[data-v-ee73652f] {
+  flex: 1;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #f3eee3;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+}
+.durations button[aria-pressed="true"][data-v-ee73652f] {
+  background: #6b7289;
+}
+.action[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 990);
+  left: calc(var(--unit) * 1570);
+  display: flex;
+  width: calc(var(--unit) * 306);
+  height: calc(var(--unit) * 60);
   align-items: center;
-  gap: calc(var(--unit) * 7.5);
-  padding: 0 calc(var(--unit) * 10.5);
-  text-align: start;
+  gap: calc(var(--unit) * 12);
+  padding: 0 calc(var(--unit) * 22);
+  border: none;
+  border-radius: calc(var(--unit) * 30);
+  background: rgb(24 26 34 / 0.9);
+  color: #fff;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
 }
-
-/* The mark's place, its traced glyph from the game's own file, drawn in the pill's colour */
-.icon[data-v-da022ee0] {
-  width: calc(var(--unit) * 30);
-  height: calc(var(--unit) * 30);
+.ring[data-v-ee73652f] {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
   flex: none;
+  border: calc(var(--unit) * 4) solid #e3c77a;
+  border-radius: 50%;
 }
 
 .two-column-screen[data-v-d9df7bbc] {
@@ -1163,12 +1961,12 @@ from {
 }
 
 /* Measured off the wiki-clip reference at 886 high, each as a unit of the game's 1080 high screen */
-.forge-screen[data-v-c1d8f7f3] {
+.forge-screen[data-v-4426e963] {
   color: #ece5d8;
   font-family: "Signika", sans-serif;
   font-weight: 600;
 }
-.title[data-v-c1d8f7f3] {
+.title[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 34);
   left: calc(var(--unit) * 268);
@@ -1176,7 +1974,7 @@ from {
   font-size: calc(var(--unit) * 29);
   line-height: 1;
 }
-.coins[data-v-c1d8f7f3] {
+.coins[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 41);
   left: calc(var(--unit) * 1902);
@@ -1184,7 +1982,7 @@ from {
   font-size: calc(var(--unit) * 27);
   line-height: 1;
 }
-.close[data-v-c1d8f7f3] {
+.close[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 26);
   left: calc(var(--unit) * 2122);
@@ -1197,7 +1995,7 @@ from {
   font-size: calc(var(--unit) * 36);
   line-height: 1;
 }
-.tabs[data-v-c1d8f7f3] {
+.tabs[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 155);
   left: calc(var(--unit) * 137);
@@ -1206,19 +2004,19 @@ from {
   width: calc(var(--unit) * 741);
   height: calc(var(--unit) * 61);
 }
-.tab[data-v-c1d8f7f3] {
+.tab[data-v-4426e963] {
   flex: 1;
   border: none;
   background: rgb(20 28 38 / 0.55);
   color: #ece5d8;
   font-size: calc(var(--unit) * 27);
 }
-.tab[aria-pressed="true"][data-v-c1d8f7f3] {
+.tab[aria-pressed="true"][data-v-4426e963] {
   background: #ece5d8;
   color: #3b3b3b;
 }
-.recipes[data-v-c1d8f7f3],
-.queues[data-v-c1d8f7f3] {
+.recipes[data-v-4426e963],
+.queues[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 252);
   left: calc(var(--unit) * 134);
@@ -1226,13 +2024,13 @@ from {
   padding: 0;
   list-style: none;
 }
-.recipes[data-v-c1d8f7f3] {
+.recipes[data-v-4426e963] {
   width: calc(var(--unit) * 750);
 }
-.recipes li + li[data-v-c1d8f7f3] {
+.recipes li + li[data-v-4426e963] {
   margin-top: calc(var(--unit) * 9.7);
 }
-.recipe[data-v-c1d8f7f3] {
+.recipe[data-v-4426e963] {
   position: relative;
   display: block;
   width: 100%;
@@ -1242,32 +2040,32 @@ from {
   color: #ece5d8;
   text-align: left;
 }
-.recipes li:first-child .recipe[data-v-c1d8f7f3] {
+.recipes li:first-child .recipe[data-v-4426e963] {
   height: calc(var(--unit) * 123);
 }
-.recipe[aria-pressed="true"][data-v-c1d8f7f3] {
+.recipe[aria-pressed="true"][data-v-4426e963] {
   outline: calc(var(--unit) * 2) solid #ffffff;
   outline-offset: calc(var(--unit) * -2);
   background: rgb(236 229 216 / 0.25);
 }
-.recipe[data-v-c1d8f7f3]:disabled {
+.recipe[data-v-4426e963]:disabled {
   opacity: 0.4;
 }
-.recipe-name[data-v-c1d8f7f3] {
+.recipe-name[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 14);
   left: calc(var(--unit) * 152);
   font-size: calc(var(--unit) * 35);
   line-height: 1;
 }
-.recipe-time[data-v-c1d8f7f3] {
+.recipe-time[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 64);
   left: calc(var(--unit) * 151);
   font-size: calc(var(--unit) * 29);
   line-height: 1;
 }
-.detail[data-v-c1d8f7f3] {
+.detail[data-v-4426e963] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1275,12 +2073,12 @@ from {
   height: 100%;
   pointer-events: none;
 }
-.detail[data-v-c1d8f7f3] > * {
+.detail[data-v-4426e963] > * {
   pointer-events: auto;
   position: absolute;
   margin: 0;
 }
-.total-time[data-v-c1d8f7f3] {
+.total-time[data-v-4426e963] {
   top: calc(var(--unit) * 146);
   left: 50%;
   translate: -50% 0;
@@ -1288,20 +2086,28 @@ from {
   line-height: 1;
   white-space: nowrap;
 }
-.amount[data-v-c1d8f7f3] {
+.amount[data-v-4426e963] {
   top: calc(var(--unit) * 590);
   left: calc(var(--unit) * 1368);
   width: calc(var(--unit) * 446);
   height: calc(var(--unit) * 20);
   accent-color: #ece5d8;
 }
-.required[data-v-c1d8f7f3] {
+.required[data-v-4426e963] {
   top: calc(var(--unit) * 987);
   left: calc(var(--unit) * 1011);
   font-size: calc(var(--unit) * 24);
   line-height: 1;
 }
-.start[data-v-c1d8f7f3] {
+.refusal[data-v-4426e963] {
+  top: calc(var(--unit) * 963);
+  left: calc(var(--unit) * 1560);
+  width: calc(var(--unit) * 600);
+  font-size: calc(var(--unit) * 24);
+  line-height: 1;
+  text-align: right;
+}
+.start[data-v-4426e963] {
   top: calc(var(--unit) * 963);
   left: calc(var(--unit) * 1883);
   width: calc(var(--unit) * 277);
@@ -1312,10 +2118,10 @@ from {
   color: #3b3b3b;
   font-size: calc(var(--unit) * 29);
 }
-.queues[data-v-c1d8f7f3] {
+.queues[data-v-4426e963] {
   width: calc(var(--unit) * 1600);
 }
-.item-icon[data-v-c1d8f7f3] {
+.item-icon[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 265.7);
   left: calc(var(--unit) * 1505.4);
@@ -1323,7 +2129,7 @@ from {
   height: calc(var(--unit) * 209.7);
   background: #5b5a5f;
 }
-.item-count[data-v-c1d8f7f3] {
+.item-count[data-v-4426e963] {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -1335,7 +2141,7 @@ from {
   line-height: calc(var(--unit) * 34.1);
   text-align: center;
 }
-.amount-label[data-v-c1d8f7f3] {
+.amount-label[data-v-4426e963] {
   top: calc(var(--unit) * 551);
   left: calc(var(--unit) * 1589.5);
   translate: -50% 0;
@@ -1344,14 +2150,14 @@ from {
   line-height: 1;
   white-space: nowrap;
 }
-.materials-box[data-v-c1d8f7f3] {
+.materials-box[data-v-4426e963] {
   top: calc(var(--unit) * 658.2);
   left: calc(var(--unit) * 1025.1);
   width: calc(var(--unit) * 1130);
   height: calc(var(--unit) * 268.2);
   background: #545d6a;
 }
-.materials-head[data-v-c1d8f7f3] {
+.materials-head[data-v-4426e963] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1359,7 +2165,7 @@ from {
   height: calc(var(--unit) * 48.8);
   background: #464c5f;
 }
-.materials-head p[data-v-c1d8f7f3] {
+.materials-head p[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 15.8);
   margin: 0;
@@ -1367,32 +2173,32 @@ from {
   line-height: 1;
   white-space: nowrap;
 }
-.materials-title[data-v-c1d8f7f3] {
+.materials-title[data-v-4426e963] {
   left: calc(var(--unit) * 42.7);
 }
-.support-title[data-v-c1d8f7f3] {
+.support-title[data-v-4426e963] {
   right: calc(var(--unit) * 41.4);
 }
-.slot[data-v-c1d8f7f3] {
+.slot[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 79.2);
   height: calc(var(--unit) * 170.7);
   border: calc(var(--unit) * 2.4) solid rgb(255 255 255 / 0.12);
   background: rgb(20 28 38 / 0.25);
 }
-.slot-first[data-v-c1d8f7f3] {
+.slot-first[data-v-4426e963] {
   left: calc(var(--unit) * 163.3);
   width: calc(var(--unit) * 141.4);
 }
-.slot-second[data-v-c1d8f7f3] {
+.slot-second[data-v-4426e963] {
   left: calc(var(--unit) * 340.1);
   width: calc(var(--unit) * 134.1);
 }
-.slot-third[data-v-c1d8f7f3] {
+.slot-third[data-v-4426e963] {
   left: calc(var(--unit) * 508.3);
   width: calc(var(--unit) * 134.1);
 }
-.support-portrait[data-v-c1d8f7f3] {
+.support-portrait[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 79.2);
   left: calc(var(--unit) * 825.2);
@@ -1400,7 +2206,7 @@ from {
   height: calc(var(--unit) * 170.7);
   background: #8d7a5c;
 }
-.recipe-tile[data-v-c1d8f7f3] {
+.recipe-tile[data-v-4426e963] {
   position: absolute;
   top: calc(var(--unit) * 9.8);
   left: calc(var(--unit) * 14.6);
@@ -1408,19 +2214,19 @@ from {
   height: calc(var(--unit) * 107.3);
   background: #3a4556;
 }
-.amount-end[data-v-c1d8f7f3] {
+.amount-end[data-v-4426e963] {
   top: calc(var(--unit) * 614.4);
   translate: -50% -50%;
   font-size: calc(var(--unit) * 26.8);
   line-height: 1;
 }
-.amount-min[data-v-c1d8f7f3] {
+.amount-min[data-v-4426e963] {
   left: calc(var(--unit) * 1318.9);
 }
-.amount-max[data-v-c1d8f7f3] {
+.amount-max[data-v-4426e963] {
   left: calc(var(--unit) * 1861.4);
 }
-.amount-step[data-v-c1d8f7f3] {
+.amount-step[data-v-4426e963] {
   top: calc(var(--unit) * 614.4);
   width: calc(var(--unit) * 48.8);
   height: calc(var(--unit) * 48.8);
@@ -1432,10 +2238,10 @@ from {
   text-align: center;
   translate: -50% -50%;
 }
-.amount-minus[data-v-c1d8f7f3] {
+.amount-minus[data-v-4426e963] {
   left: calc(var(--unit) * 1249.4);
 }
-.amount-plus[data-v-c1d8f7f3] {
+.amount-plus[data-v-4426e963] {
   left: calc(var(--unit) * 1928.4);
 }
 
@@ -1574,13 +2380,13 @@ from {
 
 /* Every place and size is in the game's 1080-high units, read off the recording of the English PC client's bag: the
    Grid's top left at 648 by 114, its cells 124 by 152 with 23 and 24 between, and the detail panel 493 wide at 1298 */
-.inventory-screen[data-v-f5de1664] {
+.inventory-screen[data-v-cf391b68] {
   position: absolute;
   inset: 0;
   color: #ece3d8;
   font-size: calc(var(--unit) * 17);
 }
-.title[data-v-f5de1664] {
+.title[data-v-cf391b68] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1590,24 +2396,24 @@ from {
 }
 
 /* The bag's own pieces, placed against the screen as if the wrapper that makes them inert under the dialog were not there */
-.bag[data-v-f5de1664] {
+.bag[data-v-cf391b68] {
   display: contents;
 }
-.tabs[data-v-f5de1664],
-.currencies[data-v-f5de1664],
-.grid[data-v-f5de1664] {
+.tabs[data-v-cf391b68],
+.currencies[data-v-cf391b68],
+.grid[data-v-cf391b68] {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.tabs[data-v-f5de1664] {
+.tabs[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 22);
   left: calc(var(--unit) * 557);
   display: flex;
   gap: calc(var(--unit) * 56);
 }
-.tab[data-v-f5de1664] {
+.tab[data-v-cf391b68] {
   width: calc(var(--unit) * 40);
   height: calc(var(--unit) * 40);
   padding: 0;
@@ -1615,10 +2421,10 @@ from {
   border-radius: 50%;
   background: rgb(255 255 255 / 0.14);
 }
-.tab[aria-pressed="true"][data-v-f5de1664] {
+.tab[aria-pressed="true"][data-v-cf391b68] {
   background: #ece3d8;
 }
-.capacity[data-v-f5de1664] {
+.capacity[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 30);
   right: calc(var(--unit) * 115);
@@ -1627,7 +2433,7 @@ from {
   font-size: calc(var(--unit) * 20);
   font-weight: 600;
 }
-.back[data-v-f5de1664] {
+.back[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 14);
   left: calc(var(--unit) * 1824);
@@ -1638,7 +2444,7 @@ from {
   border-radius: 50%;
   background: rgb(255 255 255 / 0.14);
 }
-.grid[data-v-f5de1664] {
+.grid[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 114);
   left: calc(var(--unit) * 648);
@@ -1650,7 +2456,7 @@ from {
   gap: calc(var(--unit) * 24) calc(var(--unit) * 23);
   overflow-y: auto;
 }
-.cell[data-v-f5de1664] {
+.cell[data-v-cf391b68] {
   display: flex;
   align-items: end;
   width: 100%;
@@ -1661,16 +2467,16 @@ from {
   background: #6b6396;
   font: inherit;
 }
-.cell[data-rarity="5"][data-v-f5de1664] {
+.cell[data-rarity="5"][data-v-cf391b68] {
   background: #9d672b;
 }
-.cell[aria-pressed="true"][data-v-f5de1664] {
+.cell[aria-pressed="true"][data-v-cf391b68] {
   box-shadow: 0 0 0 calc(var(--unit) * 3) #ece3d8;
 }
-.cell[data-selected][data-v-f5de1664] {
+.cell[data-selected][data-v-cf391b68] {
   background: #a154de;
 }
-.caption[data-v-f5de1664] {
+.caption[data-v-cf391b68] {
   width: 100%;
   padding: calc(var(--unit) * 4) 0;
   border-radius: 0 0 calc(var(--unit) * 8) calc(var(--unit) * 8);
@@ -1679,7 +2485,7 @@ from {
   font-size: calc(var(--unit) * 17);
   text-align: center;
 }
-.detail[data-v-f5de1664] {
+.detail[data-v-cf391b68] {
   --detail-head-color: #655c83;
 
   position: absolute;
@@ -1698,10 +2504,10 @@ from {
   );
   color: #3b4255;
 }
-.detail[data-rarity="5"][data-v-f5de1664] {
+.detail[data-rarity="5"][data-v-cf391b68] {
   --detail-head-color: #7a4e22;
 }
-.detail-name[data-v-f5de1664] {
+.detail-name[data-v-cf391b68] {
   height: calc(var(--unit) * 52);
   margin: 0;
   padding: calc(var(--unit) * 10) calc(var(--unit) * 28);
@@ -1711,19 +2517,32 @@ from {
   font-size: calc(var(--unit) * 26);
   font-weight: 600;
 }
-.detail-caption[data-v-f5de1664] {
+.detail-caption[data-v-cf391b68] {
   margin: calc(var(--unit) * 230) 0 0;
   padding: 0 calc(var(--unit) * 28);
   font-size: calc(var(--unit) * 20);
   font-weight: 600;
 }
 
+/* The Use button under the detail panel's caption, provisional until the bag's Use is recorded */
+.use[data-v-cf391b68] {
+  position: absolute;
+  bottom: calc(var(--unit) * 28);
+  left: calc(var(--unit) * 28);
+  width: calc(var(--unit) * 437);
+  height: calc(var(--unit) * 52);
+  background: #a154de;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+
 /* The foot bar's pieces, measured off the bag's recording at 1080 high: the trash, the filter and the sort's dropdown and
    order on an equipment tab, the Primogems and Mora on the rest. The dropdown is the game's own pill, its list drawn by the
    browser until its open motion is measured */
-.trash[data-v-f5de1664],
-.filter[data-v-f5de1664],
-.order[data-v-f5de1664] {
+.trash[data-v-cf391b68],
+.filter[data-v-cf391b68],
+.order[data-v-cf391b68] {
   position: absolute;
   width: calc(var(--unit) * 50);
   height: calc(var(--unit) * 50);
@@ -1732,20 +2551,20 @@ from {
   border-radius: 50%;
   background: rgb(255 255 255 / 0.14);
 }
-.trash[data-v-f5de1664] {
+.trash[data-v-cf391b68] {
   top: calc(var(--unit) * 988);
   left: calc(var(--unit) * 47);
   width: calc(var(--unit) * 58);
   height: calc(var(--unit) * 58);
 }
-.trash[aria-pressed="true"][data-v-f5de1664] {
+.trash[aria-pressed="true"][data-v-cf391b68] {
   background: #a154de;
 }
 
 /* The destroy mode's foot and dialog are placed in the game's 1080-high units by the recording, not yet measured, so
    they sit in the foot's band and the screen's centre until then: the count and the Destroy button share the quick
    selects' row, so the foot's three rows end above the screen's 1080 */
-.destroy[data-v-f5de1664] {
+.destroy[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 960);
   left: calc(var(--unit) * 230);
@@ -1755,27 +2574,29 @@ from {
   align-items: center;
   gap: calc(var(--unit) * 12);
 }
-.destroy-tip[data-v-f5de1664],
-.destroy-cannot[data-v-f5de1664] {
+.destroy-tip[data-v-cf391b68],
+.destroy-cannot[data-v-cf391b68] {
   margin: 0;
   width: 100%;
 }
-.destroy-count[data-v-f5de1664] {
+.destroy-count[data-v-cf391b68] {
   margin: 0;
 }
-.destroy-cannot[data-v-f5de1664] {
+.destroy-cannot[data-v-cf391b68] {
   color: #ff9a7a;
 }
-.quick-selects[data-v-f5de1664] {
+.quick-selects[data-v-cf391b68] {
   display: flex;
   gap: calc(var(--unit) * 10);
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.quick-select[data-v-f5de1664],
-.destroy-button[data-v-f5de1664],
-.confirm-button[data-v-f5de1664] {
+.lock[data-v-cf391b68],
+.quick-select[data-v-cf391b68],
+.quick-use[data-v-cf391b68],
+.destroy-button[data-v-cf391b68],
+.confirm-button[data-v-cf391b68] {
   padding: calc(var(--unit) * 10) calc(var(--unit) * 20);
   border: none;
   border-radius: calc(var(--unit) * 8);
@@ -1783,59 +2604,61 @@ from {
   color: inherit;
   font: inherit;
 }
-.destroy-button[data-v-f5de1664]:disabled {
+.destroy-button[data-v-cf391b68]:disabled {
   opacity: 0.4;
 }
-.confirm[data-v-f5de1664] {
+.quick-use[data-v-cf391b68] {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  width: calc(var(--unit) * 560);
-  padding: calc(var(--unit) * 32);
-  transform: translate(-50%, -50%);
-  border-radius: calc(var(--unit) * 12);
-  background: #2b2a3d;
+  top: calc(var(--unit) * 960);
+  left: calc(var(--unit) * 1298);
+}
+.lock[data-v-cf391b68] {
+  position: absolute;
+  bottom: calc(var(--unit) * 88);
+  left: calc(var(--unit) * 28);
+  width: calc(var(--unit) * 437);
+  height: calc(var(--unit) * 52);
 }
-.confirm-title[data-v-f5de1664],
-.confirm-list-label[data-v-f5de1664],
-.confirm-warning[data-v-f5de1664] {
+.confirm-title[data-v-cf391b68],
+.confirm-list-label[data-v-cf391b68],
+.confirm-warning[data-v-cf391b68] {
   margin: 0 0 calc(var(--unit) * 12);
 }
-.confirm-title[data-v-f5de1664] {
+.confirm-title[data-v-cf391b68] {
   font-size: calc(var(--unit) * 22);
 }
-.confirm-names[data-v-f5de1664] {
+.confirm-names[data-v-cf391b68] {
   margin: 0 0 calc(var(--unit) * 12);
   padding: 0;
   list-style: none;
 }
-.confirm-warning[data-v-f5de1664] {
+.confirm-warning[data-v-cf391b68] {
   color: #ff9a7a;
 }
-.confirm-buttons[data-v-f5de1664] {
+.confirm-buttons[data-v-cf391b68] {
   display: flex;
   justify-content: flex-end;
   gap: calc(var(--unit) * 12);
 }
-.filter[data-v-f5de1664] {
+.filter[data-v-cf391b68] {
   top: calc(var(--unit) * 992);
   left: calc(var(--unit) * 140);
 }
-.order[data-v-f5de1664] {
+.order[data-v-cf391b68] {
   top: calc(var(--unit) * 992);
   left: calc(var(--unit) * 532);
   width: calc(var(--unit) * 48);
   height: calc(var(--unit) * 48);
   background: #ece3d8;
 }
-.sort[data-v-f5de1664] {
+.sort[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 992);
   left: calc(var(--unit) * 208);
   width: calc(var(--unit) * 304);
   height: calc(var(--unit) * 50);
 }
-.sort-select[data-v-f5de1664] {
+.sort-select[data-v-cf391b68] {
   width: 100%;
   height: 100%;
   padding: 0 calc(var(--unit) * 18);
@@ -1848,7 +2671,7 @@ from {
   font-size: calc(var(--unit) * 22);
   font-weight: 600;
 }
-.sort[data-v-f5de1664]::after {
+.sort[data-v-cf391b68]::after {
   position: absolute;
   top: 50%;
   right: calc(var(--unit) * 26);
@@ -1863,7 +2686,7 @@ from {
 }
 
 /* The figures are the game's cap height, 30 units, and the top-up plus overhangs the pill's end */
-.currencies[data-v-f5de1664] {
+.currencies[data-v-cf391b68] {
   position: absolute;
   top: calc(var(--unit) * 1002);
   left: calc(var(--unit) * 140);
@@ -1872,7 +2695,7 @@ from {
   font-size: calc(var(--unit) * 30);
   font-weight: 600;
 }
-.currency[data-v-f5de1664] {
+.currency[data-v-cf391b68] {
   display: flex;
   align-items: center;
   gap: calc(var(--unit) * 12);
@@ -1883,13 +2706,13 @@ from {
 }
 
 /* Provisional: the Primogem and Mora marks and the top-up plus, until the glyph pass traces them from the game's own icons */
-.currency-icon[data-v-f5de1664] {
+.currency-icon[data-v-cf391b68] {
   width: calc(var(--unit) * 26);
   height: calc(var(--unit) * 26);
   border-radius: 50%;
   background: #d8e4f0;
 }
-.top-up[data-v-f5de1664] {
+.top-up[data-v-cf391b68] {
   width: calc(var(--unit) * 31);
   height: calc(var(--unit) * 31);
   margin-left: calc(var(--unit) * 1);
@@ -1897,52 +2720,23 @@ from {
   border-radius: 50%;
   background: #ece3d8;
 }
-.currency-name[data-v-f5de1664] {
+.currency-name[data-v-cf391b68] {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
 }
-
-.item-tile[data-v-5f64ed92] {
-  display: inline-block;
-  container-type: size;
-}
-.face[data-v-5f64ed92] {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: end;
-  overflow: hidden;
-  border-radius: 7cqw;
-}
-.item-tile[data-rarity="3"] .face[data-v-5f64ed92] {
-  background: linear-gradient(#79809d, #7485a6 30%, #748faf 60%, #7298b9 77%);
-}
-.item-tile[data-rarity="4"] .face[data-v-5f64ed92] {
-  background: linear-gradient(#7e77a2, #877aac 30%, #917db4 60%, #9c80bc 77%);
-}
-.item-tile[data-rarity="5"] .face[data-v-5f64ed92] {
-  background: linear-gradient(#b0804c, #ba8446 30%, #c38946 60%, #cc8d43 77%);
-}
-.count[data-v-5f64ed92] {
-  width: 100%;
-  height: 24cqh;
-  color: #fff;
-  font-size: var(--count-size, 30cqh);
-  font-weight: 600;
-  line-height: 24cqh;
-  text-align: center;
-}
-.item-tile[data-rarity="3"] .count[data-v-5f64ed92] {
-  background: #4d6680;
-}
-.item-tile[data-rarity="4"] .count[data-v-5f64ed92] {
-  background: #665d82;
-}
-.item-tile[data-rarity="5"] .count[data-v-5f64ed92] {
-  background: #6b625c;
+/* The confirm dialog the inventory and the mail screens share, each screen sets its own title and text */
+.confirm[data-v-cf391b68] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--unit) * 560);
+  padding: calc(var(--unit) * 32);
+  transform: translate(-50%, -50%);
+  border-radius: calc(var(--unit) * 12);
+  background: #2b2a3d;
 }
 
 .loading-spinner[data-v-69cb5a34] {
@@ -2020,6 +2814,124 @@ to {
   translate: -50% 0;
 }
 
+.party-setup-screen[data-v-876761d0] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  color: #ece5d8;
+  font-weight: 600;
+}
+.team[data-v-876761d0] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--unit) * 60);
+}
+.slots[data-v-876761d0] {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  gap: calc(var(--unit) * 40);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.slot[data-v-876761d0] {
+  display: flex;
+  width: calc(var(--unit) * 300);
+  height: calc(var(--unit) * 600);
+  flex-direction: column;
+  align-items: center;
+  padding-top: calc(var(--unit) * 200);
+  box-sizing: border-box;
+}
+.slot[data-empty][data-v-876761d0] {
+  justify-content: center;
+  padding-top: 0;
+}
+.plate[data-v-876761d0] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--unit) * 6);
+  text-shadow: 0 calc(var(--unit) * 2) calc(var(--unit) * 6) rgb(0 0 0 / 0.6);
+}
+.element[data-v-876761d0] {
+  width: calc(var(--unit) * 26);
+  height: calc(var(--unit) * 26);
+  margin-right: calc(var(--unit) * 8);
+  vertical-align: middle;
+  fill: #ece5d8;
+}
+.name[data-v-876761d0] {
+  font-size: calc(var(--unit) * 24);
+}
+.level[data-v-876761d0] {
+  font-size: calc(var(--unit) * 18);
+  opacity: 0.85;
+}
+.plus[data-v-876761d0] {
+  display: flex;
+  width: calc(var(--unit) * 96);
+  height: calc(var(--unit) * 96);
+  align-items: center;
+  justify-content: center;
+  border: calc(var(--unit) * 2) dashed rgb(255 255 255 / 0.5);
+  border-radius: 50%;
+  font-size: calc(var(--unit) * 56);
+  opacity: 0.6;
+}
+.team-name[data-v-876761d0] {
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.foot[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--unit) * 24) calc(var(--unit) * 60);
+}
+.team-bar[data-v-876761d0],
+.deploy-bar[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 24);
+}
+.action[data-v-876761d0] {
+  min-width: calc(var(--unit) * 200);
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 24);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.15);
+  color: #ece5d8;
+  font: inherit;
+  font-size: calc(var(--unit) * 22);
+}
+/* The head, title and back control the party setup and reputation screens share */
+.head[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
+}
+.title[data-v-876761d0] {
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.back[data-v-876761d0],
+.step[data-v-876761d0] {
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.15);
+  color: #ece5d8;
+  font: inherit;
+  font-size: calc(var(--unit) * 28);
+}
+
 .progress-bar[data-v-bea8e745] {
   --open-ms: 250ms;
   display: flex;
@@ -2093,24 +3005,222 @@ from {
   line-height: 1;
 }
 
-.reputation-screen[data-v-1a7ee007] {
+.stars[data-v-a4c4ddf9] {
+  color: #ffcc32;
+  white-space: nowrap;
+}
+
+.reputation-screen[data-v-9468271c] {
   position: absolute;
   inset: 0;
   color: #3b4255;
   font-weight: 600;
 }
-.head[data-v-1a7ee007] {
+.head[data-v-9468271c] {
+  color: #ece5d8;
+}
+.detail[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 165);
+  left: calc(var(--unit) * 85);
+  width: calc(var(--unit) * 520);
+  color: #ece5d8;
+}
+.headline[data-v-9468271c] {
+  margin: 0;
+  font-size: calc(var(--unit) * 46);
+}
+.requirement[data-v-9468271c] {
+  margin: calc(var(--unit) * 16) 0 0;
+  font-size: calc(var(--unit) * 26);
+}
+
+/* The offer sits under the requirement, provisionally, until the reference frames it */
+.offer[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 380);
+  left: calc(var(--unit) * 85);
+  width: calc(var(--unit) * 520);
+  color: #ece5d8;
+}
+.offer-title[data-v-9468271c] {
+  margin: 0 0 calc(var(--unit) * 16);
+  font-size: calc(var(--unit) * 26);
+}
+.accept[data-v-9468271c] {
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 32);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: #ece5d8;
+  color: #3b4255;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+}
+
+/* The list's panel, its rows 126 apart from 27 down and 32 in, a row 1145 wide */
+.levels[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 145);
+  left: calc(var(--unit) * 652);
+  display: flex;
+  width: calc(var(--unit) * 1220);
+  height: calc(var(--unit) * 870);
+  flex-direction: column;
+  gap: calc(var(--unit) * 5);
+  margin: 0;
+  padding: calc(var(--unit) * 27) calc(var(--unit) * 43) calc(var(--unit) * 27) calc(var(--unit) * 32);
+  box-sizing: border-box;
+  overflow-y: auto;
+  background: #f0ebe5;
+  list-style: none;
+  scrollbar-width: none;
+}
+.level[data-v-9468271c] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: calc(var(--unit) * 121);
+  padding: 0;
+  box-sizing: border-box;
+  border: calc(var(--unit) * 2) solid #dad4cd;
+  border-width: calc(var(--unit) * 3) calc(var(--unit) * 2);
+  border-left-color: #c8c2b6;
+  background: #f6f1e8;
+  color: #5a5758;
+  font: inherit;
+  text-align: left;
+}
+.level[data-achieved][data-v-9468271c] {
+  background: #e9e3d9;
+}
+.level[aria-pressed="true"][data-v-9468271c] {
+  background: rgb(255 255 255 / 0.6);
+}
+
+/* The level's pentagon, the row's height, its point 166 in; its drop shadow falls on the row to its right */
+.badge[data-v-9468271c] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(var(--unit) * 166);
+  filter: drop-shadow(calc(var(--unit) * 6) 0 calc(var(--unit) * 5) rgb(120 100 80 / 0.22));
+}
+.badge-face[data-v-9468271c] {
+  position: absolute;
+  inset: 0;
+  background: #f8f4ee;
+  clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%);
+}
+.level[data-achieved] .badge-face[data-v-9468271c] {
+  background: #f4eee4;
+}
+.badge-word[data-v-9468271c],
+.badge-number[data-v-9468271c] {
+  position: absolute;
+  left: 0;
+  width: calc(var(--unit) * 146);
+  color: #6a645b;
+  line-height: 1;
+  text-align: center;
+}
+.badge-word[data-v-9468271c] {
+  top: calc(var(--unit) * 22);
+  font-size: calc(var(--unit) * 22);
+  letter-spacing: calc(var(--unit) * 2);
+}
+.badge-number[data-v-9468271c] {
+  top: calc(var(--unit) * 49.5);
+  font-size: calc(var(--unit) * 45);
+}
+.hidden-label[data-v-9468271c] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.items[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 20);
+  left: calc(var(--unit) * 238);
+  display: flex;
+  gap: calc(var(--unit) * 12);
+}
+
+/* The clip's slots, 76 square, their counts at 16 */
+.item[data-v-9468271c] {
+  --count-size: 21cqh;
+
+  width: calc(var(--unit) * 76);
+  height: calc(var(--unit) * 76);
+}
+
+/* The unlock line, wrapped at 320 and set centred on the row, behind its info mark 12 to the left */
+.unlock[data-v-9468271c] {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * 528);
+  width: calc(var(--unit) * 320);
+  font-size: calc(var(--unit) * 27);
+  letter-spacing: calc(var(--unit) * 2);
+  line-height: calc(var(--unit) * 32);
+  translate: 0 -50%;
+}
+.unlock[data-v-9468271c]::before {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * -45);
+  width: calc(var(--unit) * 31);
+  height: calc(var(--unit) * 31);
+  border: calc(var(--unit) * 1) solid #d4cfc8;
+  border-radius: 50%;
+  background: #fbfaf4;
+  color: #36362f;
+  content: "i";
+  font-size: calc(var(--unit) * 20);
+  letter-spacing: 0;
+  line-height: calc(var(--unit) * 31);
+  text-align: center;
+  translate: 0 -50%;
+}
+
+/* The row's end, 189 wide: the tick where the level is achieved, else the not achieved block */
+.achieved[data-v-9468271c],
+.status[data-v-9468271c] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  width: calc(var(--unit) * 189);
+  align-items: center;
+  justify-content: center;
+}
+.check[data-v-9468271c] {
+  width: calc(var(--unit) * 52);
+  height: calc(var(--unit) * 47);
+  margin-bottom: calc(var(--unit) * 4);
+  fill: #8cbc2c;
+}
+.status[data-v-9468271c] {
+  background: #ebe3d9;
+  color: #92867a;
+  font-size: calc(var(--unit) * 31);
+}
+/* The head, title and back control the party setup and reputation screens share */
+.head[data-v-9468271c] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
-  color: #ece5d8;
 }
-.title[data-v-1a7ee007] {
+.title[data-v-9468271c] {
   margin: 0;
   font-size: calc(var(--unit) * 24);
 }
-.back[data-v-1a7ee007] {
+.back[data-v-9468271c],
+.step[data-v-9468271c] {
   width: calc(var(--unit) * 56);
   height: calc(var(--unit) * 56);
   border: none;
@@ -2120,270 +3230,520 @@ from {
   font: inherit;
   font-size: calc(var(--unit) * 28);
 }
-.detail[data-v-1a7ee007] {
+
+.glyph[data-v-4f52a820] {
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  fill: #212121;
+}
+.ring[data-v-4f52a820] {
+  fill: none;
+  stroke: #858585;
+}
+
+.server-bar[data-v-6b68b3eb] {
+  position: relative;
+  display: grid;
+  width: calc(var(--unit) * 456);
+  height: calc(var(--unit) * 75);
+  box-sizing: border-box;
+  border: calc(var(--unit) * 1.5) solid rgb(120 124 130 / 0.6);
+  background: rgb(42 45 52 / 0.74);
+  place-items: center;
+}
+.mark[data-v-6b68b3eb] {
   position: absolute;
-  top: calc(var(--unit) * 165);
-  left: calc(var(--unit) * 85);
-  width: calc(var(--unit) * 520);
-  color: #ece5d8;
+  top: 50%;
+  left: calc(var(--unit) * 20);
+  width: calc(var(--unit) * 46);
+  height: calc(var(--unit) * 46);
+  translate: 0 -50%;
 }
-.headline[data-v-1a7ee007] {
-  margin: 0;
-  font-size: calc(var(--unit) * 46);
+.diamond[data-v-6b68b3eb] {
+  fill: #e4e0d4;
 }
-.requirement[data-v-1a7ee007] {
-  margin: calc(var(--unit) * 16) 0 0;
-  font-size: calc(var(--unit) * 26);
+.tick[data-v-6b68b3eb] {
+  fill: #1c1c1c;
+}
+.name[data-v-6b68b3eb] {
+  margin: 0;
+  color: #d4d4d4;
+  font-size: calc(var(--unit) * 33);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1;
 }
 
-/* The list's panel, its rows 126 apart from 27 down and 32 in, a row 1145 wide */
-.levels[data-v-1a7ee007] {
+.shop-screen[data-v-af7ce84f] {
   position: absolute;
-  top: calc(var(--unit) * 145);
-  left: calc(var(--unit) * 652);
+  inset: 0;
+  color: #fff7ea;
+}
+.heading[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 14);
+  left: calc(var(--unit) * 34);
+  line-height: calc(var(--unit) * 40);
+}
+.balances[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 34);
+  left: calc(var(--unit) * 1296);
   display: flex;
-  width: calc(var(--unit) * 1220);
-  height: calc(var(--unit) * 870);
-  flex-direction: column;
-  gap: calc(var(--unit) * 5);
+  gap: calc(var(--unit) * 36);
   margin: 0;
-  padding: calc(var(--unit) * 27) calc(var(--unit) * 43) calc(var(--unit) * 27) calc(var(--unit) * 32);
-  box-sizing: border-box;
+  padding: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  list-style: none;
+}
+.balance[data-v-af7ce84f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 8);
+}
+.balance-icon[data-v-af7ce84f] {
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+.top-up[data-v-af7ce84f] {
+  margin-left: calc(var(--unit) * 4);
+  color: #e8d9b0;
+}
+.close[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 19);
+  left: calc(var(--unit) * 1815);
+}
+.close svg[data-v-af7ce84f],
+.cancel svg[data-v-af7ce84f] {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 3;
+}
+.tabs[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 97);
+  left: calc(var(--unit) * 440);
+  display: flex;
+  gap: calc(var(--unit) * 40);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tab[data-v-af7ce84f] {
+  height: calc(var(--unit) * 60);
+  padding: 0 calc(var(--unit) * 22);
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  cursor: inherit;
+}
+.tab[aria-pressed="true"][data-v-af7ce84f] {
+  background: #ede5d7;
+  color: #2b2a26;
+}
+.goods[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 200);
+  left: calc(var(--unit) * 450);
+  display: grid;
+  grid-template-columns: repeat(4, calc(var(--unit) * 310));
+  gap: calc(var(--unit) * 32);
+  width: calc(var(--unit) * 1350);
+  height: calc(var(--unit) * 860);
+  margin: 0;
+  padding: 0;
   overflow-y: auto;
-  background: #f0ebe5;
   list-style: none;
-  scrollbar-width: none;
 }
-.level[data-v-1a7ee007] {
+.good[data-v-af7ce84f] {
   position: relative;
-  display: block;
   width: 100%;
-  height: calc(var(--unit) * 121);
+  height: calc(var(--unit) * 296);
   padding: 0;
-  box-sizing: border-box;
-  border: calc(var(--unit) * 2) solid #dad4cd;
-  border-width: calc(var(--unit) * 3) calc(var(--unit) * 2);
-  border-left-color: #c8c2b6;
-  background: #f6f1e8;
-  color: #5a5758;
-  font: inherit;
-  text-align: left;
+  border: none;
+  background: #6f78ab;
+  color: inherit;
+  cursor: inherit;
 }
-.level[data-achieved][data-v-1a7ee007] {
-  background: #e9e3d9;
+.good[aria-pressed="true"][data-v-af7ce84f] {
+  outline: calc(var(--unit) * 2) solid #fdfdfd;
 }
-.level[aria-pressed="true"][data-v-1a7ee007] {
-  background: rgb(255 255 255 / 0.6);
+.good-name[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 166);
+  right: calc(var(--unit) * 8);
+  left: calc(var(--unit) * 8);
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  text-align: center;
 }
-
-/* The level's pentagon, the row's height, its point 166 in; its drop shadow falls on the row to its right */
-.badge[data-v-1a7ee007] {
+.good-limit[data-v-af7ce84f] {
   position: absolute;
-  top: 0;
+  top: calc(var(--unit) * 214);
+  right: calc(var(--unit) * 8);
+  left: calc(var(--unit) * 8);
+  font-size: calc(var(--unit) * 18);
+  line-height: calc(var(--unit) * 22);
+  text-align: center;
+}
+.good-price[data-v-af7ce84f] {
+  position: absolute;
+  right: 0;
   bottom: 0;
   left: 0;
-  width: calc(var(--unit) * 166);
-  filter: drop-shadow(calc(var(--unit) * 6) 0 calc(var(--unit) * 5) rgb(120 100 80 / 0.22));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--unit) * 10);
+  height: calc(var(--unit) * 48);
+  background: #5b6882;
+  font-size: calc(var(--unit) * 24);
+}
+.price-icon[data-v-af7ce84f] {
+  width: calc(var(--unit) * 18);
+  height: calc(var(--unit) * 18);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+.detail[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 250);
+  left: calc(var(--unit) * 505);
+  width: calc(var(--unit) * 910);
+  height: calc(var(--unit) * 580);
+  background: #e8e1cd;
+  color: #2b2a26;
+}
+.detail-good[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 95);
+  left: calc(var(--unit) * 65);
+  display: flex;
+  width: calc(var(--unit) * 780);
+  height: calc(var(--unit) * 170);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--unit) * 8);
+  background: #6f78ab;
+  color: #fff7ea;
+}
+.detail-good p[data-v-af7ce84f] {
+  margin: 0;
+}
+.detail-name[data-v-af7ce84f] {
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 34);
+}
+.detail-price[data-v-af7ce84f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 10);
+  font-size: calc(var(--unit) * 24);
+  line-height: calc(var(--unit) * 28);
+}
+.detail-line[data-v-af7ce84f] {
+  font-size: calc(var(--unit) * 18);
+  line-height: calc(var(--unit) * 22);
+}
+.amount[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 380);
+  left: calc(var(--unit) * 183);
+  width: calc(var(--unit) * 540);
+}
+.amount[data-v-af7ce84f]::-webkit-slider-runnable-track {
+  background: #9aa3b8;
+}
+.amount[data-v-af7ce84f]::-webkit-slider-thumb {
+  background: #2b2a26;
+}
+.amount-value[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 366);
+  left: calc(var(--unit) * 728);
+  margin: 0;
+  font-size: calc(var(--unit) * 26);
+  line-height: calc(var(--unit) * 30);
+}
+.cancel[data-v-af7ce84f],
+.buy[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 478);
+  height: calc(var(--unit) * 62);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 4);
+  cursor: inherit;
+}
+.cancel[data-v-af7ce84f] {
+  left: calc(var(--unit) * 70);
+  width: calc(var(--unit) * 145);
+  background: #6f78ab;
+  color: #fff7ea;
+}
+.buy[data-v-af7ce84f] {
+  left: calc(var(--unit) * 630);
+  width: calc(var(--unit) * 210);
+  background: #3d4a68;
+  color: #fff7ea;
+  font-size: calc(var(--unit) * 24);
+}
+.buy[data-v-af7ce84f]:disabled {
+  opacity: 0.4;
+}
+/* The quantity slider the crafting and shop screens share, each screen sets its own position and track colour */
+.amount[data-v-af7ce84f] {
+  height: calc(var(--unit) * 14);
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: inherit;
+}
+.amount[data-v-af7ce84f]::-webkit-slider-runnable-track {
+  height: calc(var(--unit) * 4);
+}
+.amount[data-v-af7ce84f]::-webkit-slider-thumb {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  margin-top: calc(var(--unit) * -5);
+  border-radius: calc(var(--unit) * 2);
+  transform: rotate(45deg);
+  appearance: none;
 }
-.badge-face[data-v-1a7ee007] {
+
+/* Measured off the English PC client's weapon screen in the 7.1 Silver Light clip (captures/weapon-enhance-jXrYcFHiVnI.mp4,
+   frame at 2 seconds, Enhance tab at level 1, and frame at 92 seconds, Refine tab), at 1920 by 864 pixels, in units of the
+   1080-high frame: a pixel there is 1.25 units. The name's line sits 60 units down, the tabs' lit row at 280, the level at
+   164, the EXP bar at 235, the materials' panel from 600, the action at 965 and the way back at 25. Their colours are
+   provisional, sampled by eye off the frame's violet glass */
+.weapon-menu[data-v-f3f59f0e] {
   position: absolute;
   inset: 0;
-  background: #f8f4ee;
-  clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%);
+  color: #fff;
 }
-.level[data-achieved] .badge-face[data-v-1a7ee007] {
-  background: #f4eee4;
+.breadcrumb[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 40);
+  left: calc(var(--unit) * 269);
+  margin: 0;
+  color: #e8d9a6;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 40);
 }
-.badge-word[data-v-1a7ee007],
-.badge-number[data-v-1a7ee007] {
+.tabs[data-v-f3f59f0e] {
   position: absolute;
-  left: 0;
-  width: calc(var(--unit) * 146);
-  color: #6a645b;
-  line-height: 1;
-  text-align: center;
+  top: calc(var(--unit) * 245);
+  left: calc(var(--unit) * 170);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.badge-word[data-v-1a7ee007] {
-  top: calc(var(--unit) * 22);
-  font-size: calc(var(--unit) * 22);
-  letter-spacing: calc(var(--unit) * 2);
+
+/* Each tab is a row of the game's menu, its label in cream and the open one in white, on the game's 87.5-unit pitch */
+.tab[data-v-f3f59f0e] {
+  display: block;
+  width: calc(var(--unit) * 300);
+  height: calc(var(--unit) * 70);
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgb(236 229 216 / 0.7);
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 42);
+  font-weight: 600;
+  text-align: left;
 }
-.badge-number[data-v-1a7ee007] {
-  top: calc(var(--unit) * 49.5);
-  font-size: calc(var(--unit) * 45);
+.tab[aria-pressed="true"][data-v-f3f59f0e] {
+  color: #fff;
 }
-.hidden-label[data-v-1a7ee007] {
+.stars[data-v-f3f59f0e] {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
+  top: calc(var(--unit) * 100);
+  left: calc(var(--unit) * 1380);
+  display: flex;
+  margin: 0;
+  gap: calc(var(--unit) * 4);
+}
+.star[data-v-f3f59f0e] {
+  width: calc(var(--unit) * 22);
+  height: calc(var(--unit) * 22);
+}
+
+/* The refinement rank sits at the panel's right, as a gold figure in its own pill */
+.refinement[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 100);
+  right: calc(var(--unit) * 30);
+  margin: 0;
+  padding: 0 calc(var(--unit) * 14);
+  border-radius: calc(var(--unit) * 4);
+  background: rgb(0 0 0 / 0.35);
+  color: #f0d27a;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 36);
 }
-.items[data-v-1a7ee007] {
+.level[data-v-f3f59f0e] {
   position: absolute;
-  top: calc(var(--unit) * 20);
-  left: calc(var(--unit) * 238);
+  top: calc(var(--unit) * 140);
+  left: calc(var(--unit) * 1380);
   display: flex;
-  gap: calc(var(--unit) * 12);
+  align-items: center;
+  margin: 0;
+  gap: calc(var(--unit) * 14);
 }
-
-/* The clip's slots, 76 square, their counts at 16 */
-.item[data-v-1a7ee007] {
-  --count-size: 21cqh;
-
-  width: calc(var(--unit) * 76);
-  height: calc(var(--unit) * 76);
+.level-text[data-v-f3f59f0e] {
+  font-size: calc(var(--unit) * 50);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 60);
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
 }
-
-/* The unlock line, wrapped at 320 and set centred on the row, behind its info mark 12 to the left */
-.unlock[data-v-1a7ee007] {
-  position: absolute;
-  top: 50%;
-  left: calc(var(--unit) * 528);
-  width: calc(var(--unit) * 320);
-  font-size: calc(var(--unit) * 27);
-  letter-spacing: calc(var(--unit) * 2);
-  line-height: calc(var(--unit) * 32);
-  translate: 0 -50%;
+.sparks[data-v-f3f59f0e] {
+  display: flex;
+  gap: calc(var(--unit) * 6);
 }
-.unlock[data-v-1a7ee007]::before {
+.experience-text[data-v-f3f59f0e] {
   position: absolute;
-  top: 50%;
-  left: calc(var(--unit) * -45);
-  width: calc(var(--unit) * 31);
-  height: calc(var(--unit) * 31);
-  border: calc(var(--unit) * 1) solid #d4cfc8;
-  border-radius: 50%;
-  background: #fbfaf4;
-  color: #36362f;
-  content: "i";
-  font-size: calc(var(--unit) * 20);
-  letter-spacing: 0;
-  line-height: calc(var(--unit) * 31);
-  text-align: center;
-  translate: 0 -50%;
+  top: calc(var(--unit) * 150);
+  right: calc(var(--unit) * 30);
+  margin: 0;
+  color: #d9c8ff;
+  font-size: calc(var(--unit) * 34);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 44);
 }
 
-/* The row's end, 189 wide: the tick where the level is achieved, else the not achieved block */
-.achieved[data-v-1a7ee007],
-.status[data-v-1a7ee007] {
+/* The EXP bar, a thin track across the panel with its fill to the share of the next level held */
+.experience[data-v-f3f59f0e] {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  width: calc(var(--unit) * 189);
-  align-items: center;
-  justify-content: center;
+  top: calc(var(--unit) * 233);
+  left: calc(var(--unit) * 1365);
+  width: calc(var(--unit) * 910);
+  height: calc(var(--unit) * 4);
+  background: rgb(255 255 255 / 0.2);
 }
-.check[data-v-1a7ee007] {
-  width: calc(var(--unit) * 52);
-  height: calc(var(--unit) * 47);
-  margin-bottom: calc(var(--unit) * 4);
-  fill: #8cbc2c;
+.fill[data-v-f3f59f0e] {
+  display: block;
+  width: calc(var(--experience-ratio) * 100%);
+  height: 100%;
+  background: #f5c542;
 }
-.status[data-v-1a7ee007] {
-  background: #ebe3d9;
-  color: #92867a;
-  font-size: calc(var(--unit) * 31);
+.panel[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 600);
+  left: calc(var(--unit) * 1380);
+  width: calc(var(--unit) * 870);
+  height: calc(var(--unit) * 330);
 }
 
-.round-button[data-v-e1ab12d3] {
-  display: grid;
-  width: calc(var(--unit) * 52);
-  height: calc(var(--unit) * 52);
-  padding: 0;
+/* The action is the game's wide button at the panel's foot, its label in gold on a cream rectangle */
+.action[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 965);
+  left: calc(var(--unit) * 1890);
+  width: calc(var(--unit) * 360);
+  height: calc(var(--unit) * 79);
   border: none;
-  border-radius: 50%;
-  background: #fdfdfd;
-  box-shadow: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 1) rgb(0 0 0 / 0.3);
+  border-radius: calc(var(--unit) * 6);
+  background: #ece5d8;
+  color: #3b4255;
   cursor: inherit;
-  place-items: center;
-}
-.glyph[data-v-e1ab12d3] {
-  width: calc(var(--unit) * 48);
-  height: calc(var(--unit) * 48);
-  fill: #212121;
+  font: inherit;
+  font-size: calc(var(--unit) * 36);
+  font-weight: 600;
 }
-.ring[data-v-e1ab12d3] {
-  fill: none;
-  stroke: #858585;
+.action[data-v-f3f59f0e]:disabled {
+  background: rgb(236 229 216 / 0.35);
+  color: rgb(59 66 85 / 0.6);
 }
 
-.server-bar[data-v-6b68b3eb] {
-  position: relative;
-  display: grid;
-  width: calc(var(--unit) * 456);
-  height: calc(var(--unit) * 75);
-  box-sizing: border-box;
-  border: calc(var(--unit) * 1.5) solid rgb(120 124 130 / 0.6);
-  background: rgb(42 45 52 / 0.74);
-  place-items: center;
-}
-.mark[data-v-6b68b3eb] {
+/* The way back at the top right, the game's round return control */
+.close[data-v-f3f59f0e] {
   position: absolute;
-  top: 50%;
-  left: calc(var(--unit) * 20);
-  width: calc(var(--unit) * 46);
-  height: calc(var(--unit) * 46);
-  translate: 0 -50%;
+  top: calc(var(--unit) * 25);
+  left: calc(var(--unit) * 2177);
+  width: calc(var(--unit) * 72);
+  height: calc(var(--unit) * 69);
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.3);
+  color: #fff;
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 40);
+  line-height: 1;
 }
-.diamond[data-v-6b68b3eb] {
-  fill: #e4e0d4;
+/* The six ascension phases, each a small star the phases reached light */
+.spark[data-v-f3f59f0e] {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  background: rgb(255 255 255 / 0.3);
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
 }
-.tick[data-v-6b68b3eb] {
-  fill: #1c1c1c;
+.spark.lit[data-v-f3f59f0e] {
+  background: #fff;
 }
-.name[data-v-6b68b3eb] {
+.star[data-v-f3f59f0e] {
+  background: #f5c542;
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+
+p[data-v-2456390c] {
   margin: 0;
-  color: #d4d4d4;
-  font-size: calc(var(--unit) * 33);
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  line-height: 1;
+  font-size: calc(var(--unit) * 22);
+}
+.fate-points[data-v-2456390c] {
+  margin-left: calc(var(--unit) * 12);
+  opacity: 0.7;
 }
 
-.toast-notice[data-v-a09dfb40] {
-  position: relative;
+.pool[data-v-abdcc945],
+.pool-items[data-v-abdcc945] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pool[data-v-abdcc945] {
   display: flex;
-  min-width: calc(var(--unit) * 537);
-  height: calc(var(--unit) * 107);
-  box-sizing: border-box;
-  align-items: center;
-  padding: 0 calc(var(--unit) * 82) 0 calc(var(--unit) * 148);
-  border-radius: calc(var(--unit) * 12);
-  background: #fff;
+  flex-direction: column;
+  gap: calc(var(--unit) * 12);
+  font-size: calc(var(--unit) * 18);
 }
-.mark[data-v-a09dfb40] {
-  position: absolute;
-  top: 50%;
-  left: calc(var(--unit) * 61);
-  display: grid;
-  width: calc(var(--unit) * 59);
-  height: calc(var(--unit) * 59);
-  overflow: hidden;
-  border-radius: 50%;
-  background: #000;
-  place-items: center;
-  translate: 0 -50%;
+.pool-rarity[data-v-abdcc945] {
+  display: flex;
+  gap: calc(var(--unit) * 16);
 }
-.text[data-v-a09dfb40] {
-  margin: 0;
-  color: #1d1d1d;
-  font-size: calc(var(--unit) * 36);
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
+.pool-items[data-v-abdcc945] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--unit) * 4) calc(var(--unit) * 16);
 }
-
-.wish-details[data-v-4fcea975] {
+.pool-item[data-featured="true"][data-v-abdcc945] {
+  color: #ffd780;
+}
+/* The overlay, panel, title and close the wish screens share, WishDetails and WishHistory alike */
+.wish-details[data-v-abdcc945],
+.wish-history[data-v-abdcc945] {
   position: absolute;
   inset: 0;
   display: grid;
   background: rgb(0 0 0 / 0.5);
   place-items: center;
 }
-.panel[data-v-4fcea975] {
+.panel[data-v-abdcc945] {
   position: relative;
   display: flex;
   width: calc(var(--unit) * 1200);
@@ -2395,11 +3755,11 @@ from {
   background: rgb(28 32 42 / 0.96);
   color: #ece5d8;
 }
-.title[data-v-4fcea975] {
+.title[data-v-abdcc945] {
   margin: 0;
   font-size: calc(var(--unit) * 28);
 }
-.close[data-v-4fcea975] {
+.close[data-v-abdcc945] {
   position: absolute;
   top: calc(var(--unit) * 24);
   right: calc(var(--unit) * 24);
@@ -2409,80 +3769,89 @@ from {
   color: inherit;
   font: inherit;
 }
-.pool[data-v-4fcea975],
-.pool-items[data-v-4fcea975] {
+
+.panel[data-v-86f92bab] {
+  max-height: 100%;
+}
+.draws[data-v-86f92bab] {
   margin: 0;
   padding: 0;
+  overflow-y: auto;
   list-style: none;
-}
-.pool[data-v-4fcea975] {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--unit) * 12);
   font-size: calc(var(--unit) * 18);
 }
-.pool-rarity[data-v-4fcea975] {
-  display: flex;
+.draw[data-v-86f92bab] {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr auto;
   gap: calc(var(--unit) * 16);
+  padding: calc(var(--unit) * 6) 0;
 }
-.pool-items[data-v-4fcea975] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: calc(var(--unit) * 4) calc(var(--unit) * 16);
-}
-.pool-item[data-featured="true"][data-v-4fcea975] {
-  color: #ffd780;
+/* The overlay, panel, title and close the wish screens share, WishDetails and WishHistory alike */
+.wish-details[data-v-86f92bab],
+.wish-history[data-v-86f92bab] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  background: rgb(0 0 0 / 0.5);
+  place-items: center;
 }
-.stars[data-v-4fcea975] {
-  color: #ffcc32;
-  white-space: nowrap;
+.panel[data-v-86f92bab] {
+  position: relative;
+  display: flex;
+  width: calc(var(--unit) * 1200);
+  flex-direction: column;
+  gap: calc(var(--unit) * 12);
+  padding: calc(var(--unit) * 32) calc(var(--unit) * 40);
+  box-sizing: border-box;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(28 32 42 / 0.96);
+  color: #ece5d8;
 }
-.path[data-v-4fcea975] {
+.title[data-v-86f92bab] {
   margin: 0;
-  font-size: calc(var(--unit) * 22);
+  font-size: calc(var(--unit) * 28);
 }
-.fate-points[data-v-4fcea975] {
-  margin-left: calc(var(--unit) * 12);
-  opacity: 0.7;
+.close[data-v-86f92bab] {
+  position: absolute;
+  top: calc(var(--unit) * 24);
+  right: calc(var(--unit) * 24);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
 }
 
-.wish-screen[data-v-fe40ca36] {
+.wish-screen[data-v-669dc4ab] {
   position: absolute;
   inset: 0;
   background: rgb(28 32 42 / 0.92);
   color: #fff;
 }
-.title[data-v-fe40ca36] {
-  position: absolute;
-  top: calc(var(--unit) * 30);
-  left: calc(var(--unit) * 145);
-  margin: 0;
-  font-size: calc(var(--unit) * 22);
-}
-.banners[data-v-fe40ca36],
-.currencies[data-v-fe40ca36],
-.links[data-v-fe40ca36],
-.result-list[data-v-fe40ca36] {
+.banners[data-v-669dc4ab],
+.currencies[data-v-669dc4ab],
+.links[data-v-669dc4ab],
+.result-list[data-v-669dc4ab] {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.banners[data-v-fe40ca36] {
+.banners[data-v-669dc4ab] {
   position: absolute;
   top: 0;
   left: calc(var(--unit) * 678);
   display: flex;
   gap: calc(var(--unit) * 27);
 }
-.banner[data-v-fe40ca36] {
+.banner[data-v-669dc4ab] {
   width: calc(var(--unit) * 172);
   height: calc(var(--unit) * 92);
   border: calc(var(--unit) * 2) solid rgb(255 255 255 / 0.6);
 }
-.banner[aria-pressed="true"][data-v-fe40ca36] {
+.banner[aria-pressed="true"][data-v-669dc4ab] {
   background: rgb(253 247 242 / 0.85);
 }
-.currencies[data-v-fe40ca36] {
+.currencies[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 30);
   left: calc(var(--unit) * 1440);
@@ -2490,10 +3859,10 @@ from {
   gap: calc(var(--unit) * 24);
   font-size: calc(var(--unit) * 20);
 }
-.currency-name[data-v-fe40ca36] {
+.currency-name[data-v-669dc4ab] {
   opacity: 0.7;
 }
-.back[data-v-fe40ca36] {
+.back[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 17);
   left: calc(var(--unit) * 1812);
@@ -2503,11 +3872,11 @@ from {
 }
 
 /* The card is the plate's art, so only its words are drawn over it, each at the game's place on the banner */
-.card[data-v-fe40ca36] {
+.card[data-v-669dc4ab] {
   position: absolute;
   inset: 0;
 }
-.tag[data-v-fe40ca36] {
+.tag[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 213);
   left: calc(var(--unit) * 322);
@@ -2517,7 +3886,7 @@ from {
   background: rgb(62 195 238);
   font-size: calc(var(--unit) * 22);
 }
-.card-title[data-v-fe40ca36] {
+.card-title[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 250);
   left: calc(var(--unit) * 377);
@@ -2526,7 +3895,7 @@ from {
   font-size: calc(var(--unit) * 58);
   line-height: calc(var(--unit) * 72);
 }
-.probability[data-v-fe40ca36] {
+.probability[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 455);
   left: calc(var(--unit) * 377);
@@ -2534,7 +3903,7 @@ from {
   color: #3e3c3d;
   font-size: calc(var(--unit) * 26);
 }
-.rate-up[data-v-fe40ca36] {
+.rate-up[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 500);
   left: calc(var(--unit) * 377);
@@ -2545,16 +3914,16 @@ from {
   background: rgb(62 195 238);
   font-size: calc(var(--unit) * 20);
 }
-.featured[data-v-fe40ca36] {
+.featured[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 672);
   left: calc(var(--unit) * 1068);
 }
-.featured-name[data-v-fe40ca36] {
+.featured-name[data-v-669dc4ab] {
   margin: 0;
   font-size: calc(var(--unit) * 40);
 }
-.featured-title[data-v-fe40ca36] {
+.featured-title[data-v-669dc4ab] {
   width: calc(var(--unit) * 348);
   box-sizing: border-box;
   margin: calc(var(--unit) * 4) 0 0;
@@ -2562,41 +3931,31 @@ from {
   background: rgb(20 30 50 / 0.7);
   font-size: calc(var(--unit) * 22);
 }
-.stars[data-v-fe40ca36] {
-  color: #ffcc32;
-  white-space: nowrap;
-}
-.links[data-v-fe40ca36] {
+.links[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 1010);
   left: calc(var(--unit) * 68);
   display: flex;
   gap: calc(var(--unit) * 20);
 }
-.link[data-v-fe40ca36] {
+.link[data-v-669dc4ab] {
   width: calc(var(--unit) * 172);
   height: calc(var(--unit) * 32);
   font-size: calc(var(--unit) * 22);
 }
-.path[data-v-fe40ca36] {
+.path[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 940);
   left: calc(var(--unit) * 68);
-  margin: 0;
-  font-size: calc(var(--unit) * 22);
-}
-.fate-points[data-v-fe40ca36] {
-  margin-left: calc(var(--unit) * 12);
-  opacity: 0.7;
 }
-.sets[data-v-fe40ca36] {
+.sets[data-v-669dc4ab] {
   position: absolute;
   top: calc(var(--unit) * 975);
   left: calc(var(--unit) * 1147);
   display: flex;
   gap: calc(var(--unit) * 33);
 }
-.set[data-v-fe40ca36] {
+.set[data-v-669dc4ab] {
   display: flex;
   width: calc(var(--unit) * 340);
   height: calc(var(--unit) * 72);
@@ -2606,25 +3965,25 @@ from {
   color: #3b4255;
   font-size: calc(var(--unit) * 22);
 }
-.set-label[data-v-fe40ca36] {
+.set-label[data-v-669dc4ab] {
   font-weight: 600;
 }
-.cost[data-v-fe40ca36] {
+.cost[data-v-669dc4ab] {
   font-size: calc(var(--unit) * 18);
   opacity: 0.7;
 }
-.results[data-v-fe40ca36] {
+.results[data-v-669dc4ab] {
   position: absolute;
   inset: 0;
   display: grid;
   background: rgb(255 255 255 / 0.92);
   place-items: center;
 }
-.result-list[data-v-fe40ca36] {
+.result-list[data-v-669dc4ab] {
   display: flex;
   gap: calc(var(--unit) * 12);
 }
-.result[data-v-fe40ca36] {
+.result[data-v-669dc4ab] {
   display: flex;
   width: calc(var(--unit) * 120);
   height: calc(var(--unit) * 420);
@@ -2636,13 +3995,73 @@ from {
   font-size: calc(var(--unit) * 18);
   text-align: center;
 }
-.result[data-rarity="4"][data-v-fe40ca36] {
+.result[data-rarity="4"][data-v-669dc4ab] {
   background: #8d6fb5;
 }
-.result[data-rarity="5"][data-v-fe40ca36] {
+.result[data-rarity="5"][data-v-669dc4ab] {
   background: #c18b4c;
 }
-.result-return[data-v-fe40ca36] {
+.result-stella-fortuna[data-v-669dc4ab] {
+  font-size: calc(var(--unit) * 14);
+}
+.result-return[data-v-669dc4ab] {
   padding-bottom: calc(var(--unit) * 8);
   font-size: calc(var(--unit) * 14);
 }
+
+.levels button[data-v-529b74f5] {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  min-width: 20rem;
+  padding: 0.5rem 1rem;
+  background: rgb(255 255 255 / 8%);
+}
+.levels button[data-v-529b74f5]:disabled {
+  opacity: 0.5;
+}
+/* The screen's colours and placement are provisional until the recording shows them */
+.blessing-screen[data-v-529b74f5],
+.worship-screen[data-v-529b74f5] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+  color: rgb(245 240 230);
+}
+.title[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  left: 6%;
+  font-size: 2rem;
+}
+.close[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  right: 6%;
+  font-size: 2rem;
+}
+.blessing[data-v-529b74f5],
+.worship[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  right: 16%;
+  font-size: 1.25rem;
+}
+.held[data-v-529b74f5],
+.pool[data-v-529b74f5] {
+  position: absolute;
+  top: 16%;
+  left: 6%;
+  font-size: 1.25rem;
+}
+.levels[data-v-529b74f5],
+.members[data-v-529b74f5] {
+  position: absolute;
+  top: 26%;
+  left: 6%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}