@nano133/nanoterra 0.9.0 → 0.9.3

package/src/shop/panel/mount.ts

@@ -4,9 +4,14 @@
 //   owned()      the looks the player owns (the game's GET /api/me gives them)    signedIn()  whether a player is signed in
 //   signIn()     the game's own sign-in (the kit's sign-in path, or the game's): true when the player is signed in after it. The shop draws no sign-in.
 //   worn/wear    what the player wears; `onOwned(lookId)` when a paid order gave a look (wear it)
+//   onSignInCancel(lookId)  the game's own Buy (`buy(lookId)`) asked for a sign-in and the player closed it: the game shows its own sheet again
 //
-// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. The sheet is a <dialog>: it rises from
-// the bottom on a phone held upright and stands in the middle on a wide screen; on a phone held sideways the pay sheet puts the QR code beside the words.
+// `key: false` draws no key: the game opens the sheet from its own key with `open()`, as the options panel allows. `buy(lookId)` starts on the next frame:
+// a game's own <dialog> that closed just before has had its `close` event by then (Chromium fires it at the frame), so its handler cannot take the focus.
+// The sheet is a <dialog>: it rises from the bottom on a phone held upright and stands in the middle on a wide screen; on a phone held sideways the pay
+// sheet puts the QR code beside the words. Phone first: text 16 px, every key 48 px or more each way.
+//
+// `words` changes any word of the two sheets (./words.ts: SHOP_WORDS are the defaults), for a game's own words or language.
 
 import { ApiError, createApi } from "../../admin/panel/api.js";
 import { h, releaseFocus } from "../../admin/panel/dom.js";
@@ -15,6 +20,7 @@ import { checkLooks, wearOf, type Look } from "../../looks/look.js";
 import type { PayView } from "../handler.js";
 import { looksView, slotsOf, type SlotWords } from "./looks.js";
 import { payPanel } from "./pay.js";
+import { shopWords, type ShopWords } from "./words.js";
 
 export type ShopMountOptions = {
   /** The game's looks (looks.json as it was read). The server decides every price; these are for the list. */
@@ -26,6 +32,16 @@ export type ShopMountOptions = {
   signedIn(): boolean;
   /** The game's sign-in: true when a player is signed in after it. With none, Buy asks the player to sign in and stops. */
   signIn?: () => Promise<boolean>;
+  /**
+   * The game's own Buy (`buy(lookId)`) asked for a sign-in, and the player closed it without signing in: the game shows its own looks sheet again.
+   * The kit's list does not open then (the kit's sheet closes if it was open). A Buy in the kit's own list goes back to that list, as before.
+   */
+  onSignInCancel?: (lookId: string, look: Look) => void;
+  /**
+   * The server refused an order with 401: the player's session ended, though `signedIn()` said yes. The game marks the player signed out. The sheet's
+   * "Sign in" key then calls `signIn()` without asking `signedIn()` first, so a stale "yes" cannot post the same refused order again.
+   */
+  onSessionEnd?: () => void;
   /** Whether the player wears this look now. */
   worn(look: Look): boolean;
   /** Wear a look the player owns. */
@@ -40,8 +56,10 @@ export type ShopMountOptions = {
   picture?: (look: Look) => HTMLElement | null;
   /** Words for the tabs of the wear slots. */
   slots?: Record<string, SlotWords>;
-  /** The sheet's title. Default "Looks". */
+  /** The sheet's title. Default: `words.title` ("Looks"). */
   title?: string;
+  /** The game's words for the two sheets, over the defaults (SHOP_WORDS): `{ buyTitle: (look) => look, sendExactly: "Pay exactly" }`. */
+  words?: Partial<ShopWords>;
   /** Draw the Looks key. Default true; false: the game calls `open()` from its own key. */
   key?: boolean;
   /** "light", "dark", or "device" (the default): the page's `data-n133-theme` when it has one, else the device's setting. */
@@ -58,7 +76,10 @@ export type MountedShop = {
   /** Opens the sheet on the looks. */
   open(): void;
   close(): void;
-  /** Opens the sheet on Buy for one look (the game's own "Buy" elsewhere). */
+  /**
+   * Opens the sheet on Buy for one look (the game's own "Buy" elsewhere), on the next frame: close the game's own <dialog> first. A sign-in closed
+   * without a sign-in calls `onSignInCancel` and opens nothing.
+   */
   buy(lookId: string): void;
   /** Draws the looks again (after the player signed in, or wore something). */
   refresh(): void;
@@ -75,12 +96,14 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   let stopPay: (() => void) | null = null;
   let destroyed = false;
   const cleanup: (() => void)[] = [];
+  const words = shopWords(options.words);
+  const sheetTitle = options.title ?? words.title;
 
   const title = h("h2", { class: "n133s-title", tabindex: "-1" });
-  const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": "Close" }, icon("close", 20));
+  const closeKey = h("button", { class: "n133s-close", type: "button", "aria-label": words.close }, icon("close", 20));
   const body = h("div", { class: "n133s-body" });
-  const dialog = h("dialog", { class: "n133s-sheet", "aria-label": options.title ?? "Looks" }, h("header", { class: "n133s-head" }, title, closeKey), body);
-  const key = options.key === false ? null : h("button", { class: "n133s-key", type: "button", "aria-haspopup": "dialog" }, icon("shirt", 20), h("span", { class: "n133s-key-word" }, options.title ?? "Looks"));
+  const dialog = h("dialog", { class: "n133s-sheet", "aria-label": sheetTitle }, h("header", { class: "n133s-head" }, title, closeKey), body);
+  const key = options.key === false ? null : h("button", { class: "n133s-key", type: "button", "aria-haspopup": "dialog" }, icon("shirt", 20), h("span", { class: "n133s-key-word" }, sheetTitle));
   const wrap = h("div", { class: "n133-shop" }, key, dialog);
   root.append(wrap);
 
@@ -147,7 +170,7 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   function showLooks() {
     if (destroyed) return;
     show(
-      options.title ?? "Looks",
+      sheetTitle,
       looksView({
         looks,
         owned: ownedNow(),
@@ -163,9 +186,10 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
               showLooks();
             }
           : undefined,
-        buy: (l) => void buy(l),
+        buy: (l) => void buy(l, false),
         picture: options.picture,
         slots: options.slots,
+        words,
         tab,
         onTab: (s) => {
           tab = s;
@@ -177,23 +201,31 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
   }
 
   const back = (message: string, extra?: HTMLElement | null) =>
-    h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, "Back to looks"));
+    h("div", { class: "n133s-message" }, h("p", { class: "n133s-status" }, message), extra ?? null, h("button", { class: "n133s-btn n133s-wide", type: "button", onclick: () => showLooks() }, words.back));
 
-  async function buy(look: Look) {
+  /**
+   * `game`: the game's own Buy started it (`buy(lookId)`), not the kit's list: a closed sign-in goes back to the game, not to the list.
+   * `ended`: the server said the session ended (401): sign in again whatever `signedIn()` says.
+   */
+  async function buy(look: Look, game: boolean, ended = false) {
     if (destroyed) return;
     tab = slotsOf(looks).length > 1 ? wearOf(look) : undefined;
-    if (!options.signedIn()) {
-      if (!options.signIn) return show(`Buy ${look.name}`, back("To buy a look, sign in with Nano first: your looks belong to your Nano address."));
+    if (ended || !options.signedIn()) {
+      if (!options.signIn) return show(words.buyTitle(look.name), back(words.signInFirst));
       let ok = false;
       try {
         ok = await options.signIn();
       } catch {
         ok = false;
       }
-      if (!ok || !options.signedIn()) return showLooks();
+      if (!ok || !options.signedIn()) {
+        if (!game) return showLooks();
+        close();
+        return options.onSignInCancel?.(look.id, look);
+      }
     }
     const box = h("div", { class: "n133s-turnstile", hidden: true });
-    show(`Buy ${look.name}`, h("div", {}, h("p", { class: "n133s-status" }, "Making your order…"), box));
+    show(words.buyTitle(look.name), h("div", {}, h("p", { class: "n133s-status" }, words.making), box));
     try {
       const turnstile = options.personCheck ? await options.personCheck(box) : null;
       const order = await api.post<PayView>("", { lookId: look.id, turnstile });
@@ -201,18 +233,21 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
       const pay = payPanel(order, {
         lookName: look.name,
         check: (id) => api.post<PayView>(`/${id}/check`),
-        errorText: (e) => (e instanceof ApiError ? e.message : null),
+        errorText: (e) => (e instanceof ApiError ? words.refusal(e.message, e.status) : null),
+        words,
         onPaid: () => {
           bought.add(look.id);
           options.onOwned?.(look.id, look);
         },
       });
-      show(`Buy ${look.name}`, pay.node);
+      show(words.buyTitle(look.name), pay.node);
       stopPay = pay.stop;
     } catch (e) {
-      const message = e instanceof ApiError ? e.message : e instanceof Error && e.message ? e.message : "The order did not start. Try again.";
-      const again = e instanceof ApiError && e.status === 401 && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look) }, "Sign in") : null;
-      show(`Buy ${look.name}`, back(message, again));
+      const message = e instanceof ApiError ? words.refusal(e.message, e.status) : e instanceof Error && e.message ? words.refusal(e.message, 0) : words.orderFailed;
+      const gone = e instanceof ApiError && e.status === 401;
+      if (gone) options.onSessionEnd?.();
+      const again = gone && options.signIn ? h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", onclick: () => void buy(look, game, true) }, words.signIn) : null;
+      show(words.buyTitle(look.name), back(message, again));
     }
   }
 
@@ -221,7 +256,11 @@ export function mountShop(root: HTMLElement, options: ShopMountOptions): Mounted
     close,
     buy(lookId) {
       const look = looks.find((l) => l.id === lookId);
-      if (look) void buy(look);
+      // On the next frame (rAF; a hidden page has none): a <dialog> of the game's that closed just before has had its `close` event by then.
+      if (!look) return;
+      const go = () => void buy(look, true);
+      if (typeof requestAnimationFrame === "function" && !globalThis.document?.hidden) requestAnimationFrame(go);
+      else setTimeout(go, 0);
     },
     refresh() {
       if (isOpen() && body.querySelector(".n133s-looks-view")) showLooks();

package/src/shop/panel/pay.ts

@@ -3,12 +3,13 @@
 //
 // TEST MODE: the server sends no address and no link, and this sheet shows a large "TEST MODE: DO NOT PAY" stamp where the QR code would be, with the
 // wallet key off. Never change that: a payment to an address that nobody holds the key for is lost for good. The sheet decides it from the ORDER (its
-// `test`, a missing `uri` or a missing `address`), never from a setting of the page.
+// `test`, a missing `uri` or a missing `address`), never from a setting of the page. The stamp's words are not among the game's words (./words.ts).
 
-import { copy, h } from "../../admin/panel/dom.js";
+import { h } from "../../admin/panel/dom.js";
 import { usdText } from "../../looks/look.js";
 import type { PayView } from "../handler.js";
 import { qrSvg } from "./qr.js";
+import { priceLine, shopWords, type ShopWords } from "./words.js";
 
 export const PAY_TIMING = { pollMs: 5000, checkForMs: 2 * 60_000 } as const;
 
@@ -23,6 +24,8 @@ export type PayOptions = {
   errorText?(e: unknown): string | null;
   /** The time now in ms (a test gives its own). */
   now?: () => number;
+  /** The game's words (./words.ts): the keys it leaves out keep the defaults. */
+  words?: Partial<ShopWords>;
 };
 
 export type PayPanel = { node: HTMLElement; stop(): void };
@@ -37,44 +40,62 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
   let timer: ReturnType<typeof setTimeout> | undefined;
   let clockTimer: ReturnType<typeof setInterval> | undefined;
   let checkingUntil = 0;
+  const w = shopWords(options.words);
+  const test = isTestOrder(order);
 
-  const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite" });
-  const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, "Check again");
-  const left = h("span", { class: "n133s-time-left" });
-  const amount = h("div", { class: "n133s-amount" }, h("strong", {}, `${order.xno} XNO`), h("span", {}, ` = ${usdText(Number(order.usd))}`));
+  /** The order's state. In test mode nothing is checked, so it has nothing to say and takes no room. */
+  const status = h("p", { class: "n133s-status", role: "status", "aria-live": "polite", hidden: test });
+  const again = h("button", { class: "n133s-btn n133s-wide", type: "button", hidden: true }, w.checkAgain);
+  /** The time left, live only: in test mode nothing is paid, so nothing waits for the end. */
+  const ends = h("p", { class: "n133s-fine n133s-time-left", hidden: test });
+  const amount = h(
+    "div",
+    { class: "n133s-amount" },
+    test ? null : h("span", { class: "n133s-exact" }, w.sendExactly),
+    h("strong", {}, w.amount(order.xno)),
+    h("span", {}, w.usd(usdText(Number(order.usd)))),
+  );
+  const copyKey = (value: string) => {
+    const key = h("button", { class: "n133s-btn n133s-small", type: "button" }, w.copy);
+    key.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(value);
+        key.textContent = w.copied;
+      } catch {
+        key.textContent = w.copyFailed;
+      }
+      setTimeout(() => (key.textContent = w.copy), 1500);
+    });
+    return key;
+  };
 
   let payArea: HTMLElement;
   /** The main key (the wallet link; off in test mode): it stands in a foot that stays in view, so a phone on its side never hides it. */
   let wallet: HTMLElement;
-  const test = isTestOrder(order);
   if (test) {
     payArea = h(
       "div",
       { class: "n133s-test-pay" },
       h("div", { class: "n133s-qr n133s-qr-blocked", "aria-hidden": "true" }, h("div", { class: "n133s-qr-fake" })),
       h("div", { class: "n133s-stamp", role: "alert" }, h("span", {}, "TEST MODE:"), " ", h("span", {}, "DO NOT PAY")),
-      h("p", { class: "n133s-fine" }, "This game is in test mode, so nothing can be paid here. To sell for real, the creator sets their own receive address and turns test mode off."),
+      h("p", { class: "n133s-fine" }, w.testNote),
     );
-    wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, "Open wallet (off in test mode)");
+    wallet = h("button", { class: "n133s-btn n133s-primary n133s-wide", type: "button", disabled: true }, w.walletOff);
   } else {
-    const copyAmount = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
-    copyAmount.addEventListener("click", () => copy(order.xno, copyAmount));
-    const copyAddress = h("button", { class: "n133s-btn n133s-small", type: "button" }, "Copy");
-    copyAddress.addEventListener("click", () => copy(order.address!, copyAddress));
     payArea = h(
       "div",
       { class: "n133s-live-pay" },
-      h("div", { class: "n133s-qr" }, qrSvg(order.uri!, `QR code to pay ${order.xno} XNO`)),
+      h("div", { class: "n133s-qr" }, qrSvg(order.uri!, w.qrLabel(order.xno))),
       h(
         "details",
         { class: "n133s-by-hand" },
-        h("summary", {}, "Enter it by hand"),
-        h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "Amount"), h("code", {}, `${order.xno} XNO`), copyAmount),
-        h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, "To"), h("code", { class: "n133s-address" }, order.address!), copyAddress),
-        h("p", { class: "n133s-fine" }, "Send exactly this amount, with every digit. Another amount does not match this order."),
+        h("summary", {}, w.byHand),
+        h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.amountLabel), h("code", {}, w.amount(order.xno)), copyKey(order.xno)),
+        h("div", { class: "n133s-row" }, h("span", { class: "n133s-label" }, w.toLabel), h("code", { class: "n133s-address" }, order.address!), copyKey(order.address!)),
+        h("p", { class: "n133s-fine" }, w.byHandNote),
       ),
     );
-    wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri! }, "Open wallet");
+    wallet = h("a", { class: "n133s-btn n133s-primary n133s-wide", href: order.uri! }, w.wallet);
   }
 
   const node = h(
@@ -83,17 +104,17 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     h(
       "div",
       { class: "n133s-pay-main" },
-      h("p", { class: "n133s-pay-what" }, `${options.lookName}: a look for your character. It changes how you look, not how you play.`),
+      h("p", { class: "n133s-pay-what" }, w.lookLine(options.lookName)),
       amount,
       payArea,
     ),
     h(
       "div",
       { class: "n133s-pay-side" },
-      h("p", { class: "n133s-fine" }, "This order ends in ", left, "."),
+      ends,
       status,
       again,
-      h("p", { class: "n133s-fine n133s-prices" }, `Price in XNO from ${order.prices.join(", ")}. Powered by CoinGecko.`),
+      h("p", { class: "n133s-fine n133s-prices" }, priceLine(w, order.prices)),
       h("div", { class: "n133s-foot" }, wallet),
     ),
   );
@@ -109,7 +130,7 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     const ms = Math.max(0, order.expiresAt - now());
     const m = Math.floor(ms / 60_000);
     const s = Math.floor((ms % 60_000) / 1000);
-    left.textContent = `${m}:${String(s).padStart(2, "0")}`;
+    ends.textContent = w.endsIn(`${m}:${String(s).padStart(2, "0")}`);
   };
   tick();
   clockTimer = setInterval(tick, 1000);
@@ -118,7 +139,7 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     order = o;
     if (o.status === "paid") {
       stop();
-      payArea.replaceChildren(h("div", { class: "n133s-paid" }, h("strong", {}, "Paid. Thank you!"), h("p", {}, `${options.lookName} is yours now.`)));
+      payArea.replaceChildren(h("div", { class: "n133s-paid" }, h("strong", {}, w.paid), h("p", {}, w.paidLine(options.lookName))));
       wallet.hidden = true;
       status.textContent = "";
       again.hidden = true;
@@ -127,13 +148,13 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     }
     if (o.status === "paid_late") {
       stop();
-      status.textContent = "This payment came after the order ended. The look was not given. The creator sees it and can send it back.";
+      status.textContent = w.paidLate;
       again.hidden = true;
       return true;
     }
     if (o.status === "expired") {
       stop();
-      status.textContent = "This order ended. If you already paid, wait here: a payment sent in time still counts.";
+      status.textContent = w.expired;
       again.hidden = false;
       return false;
     }
@@ -145,13 +166,13 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     try {
       const o = await options.check(order.id);
       if (show(o)) return;
-      if (o.status === "open") status.textContent = test ? "Test mode: the game does not wait for a payment." : "Waiting for your payment…";
+      if (o.status === "open") status.textContent = test ? "" : w.waiting;
     } catch (e) {
-      status.textContent = options.errorText?.(e) ?? "No connection. Trying again…";
+      status.textContent = options.errorText?.(e) ?? w.noConnection;
     }
     if (now() < checkingUntil) timer = setTimeout(poll, PAY_TIMING.pollMs);
     else if (!stopped) {
-      status.textContent = "Still waiting. Already paid? Press Check again.";
+      status.textContent = w.stillWaiting;
       again.hidden = false;
     }
   }
@@ -164,8 +185,8 @@ export function payPanel(start: PayView, options: PayOptions): PayPanel {
     void poll();
   }
   again.addEventListener("click", startChecking);
+  // Test mode makes no checks: nothing can be paid, so nothing is waited for.
   if (!test) startChecking();
-  else status.textContent = "Test mode: the game does not wait for a payment.";
 
   return { node, stop };
 }

package/src/shop/panel/style.css

@@ -1,5 +1,5 @@
 /* The Looks key and the shop's sheet (mountShop in ./mount.ts). Every rule is under .n133-shop, so nothing leaks into the game's page.
-   Phone first: every key is 44 px or more (the buy and pay keys 48 px). On a phone held upright the sheet rises from the bottom; on a wide screen it
+   Phone first: text is 16 px (the stamp and the amount bigger), and every key, tab, close key and fold is 48 px or more each way. On a phone held upright the sheet rises from the bottom; on a wide screen it
    stands in the middle; on a phone held sideways the pay sheet puts the QR code beside the words, and the wallet key stays in view.
    Light and dark: mountShop sets data-theme="light" | "dark" on .n133-shop (the game's word, the page's data-n133-theme, or the device's setting).
    To theme it, set the --n133-* custom properties on the element that holds the key (or a parent): --n133-ink, --n133-ink-soft, --n133-paper,
@@ -64,14 +64,14 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-width: 44px;
-  min-height: 44px;
-  padding: 0 14px;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--paper);
   color: var(--ink);
-  font: 650 15px/1 var(--font);
+  font: 650 16px/1 var(--font);
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -143,8 +143,8 @@
 .n133-shop .n133s-close {
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   border: 0;
   border-radius: 12px;
   background: transparent;
@@ -172,7 +172,7 @@
 
 .n133-shop .n133s-fine {
   color: var(--ink-soft);
-  font-size: 13px;
+  font-size: 16px;
 }
 
 /* ---- keys ---- */
@@ -182,6 +182,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
+  min-width: 48px;
   min-height: 48px;
   padding: 0 18px;
   border: 2px solid var(--line);
@@ -227,9 +228,7 @@
 }
 
 .n133-shop .n133s-small {
-  min-height: 44px;
-  padding: 0 12px;
-  font-size: 14px;
+  padding: 0 14px;
 }
 
 /* ---- the looks ---- */
@@ -245,13 +244,14 @@
 
 .n133-shop .n133s-tab {
   flex: none;
-  min-height: 44px;
-  padding: 0 14px;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--ground);
   color: var(--ink);
-  font: 650 15px/1 var(--font);
+  font: 650 16px/1 var(--font);
   cursor: pointer;
 }
 
@@ -295,7 +295,7 @@
 
 .n133-shop .n133s-look-text small {
   color: var(--ink-soft);
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .n133-shop .n133s-swatch {
@@ -366,6 +366,11 @@
   font-weight: 700;
 }
 
+/* The time left: its digits keep their width while it counts down. */
+.n133-shop .n133s-time-left {
+  font-variant-numeric: tabular-nums;
+}
+
 .n133-shop .n133s-qr {
   display: grid;
   place-items: center;
@@ -429,8 +434,8 @@
 }
 
 .n133-shop .n133s-by-hand summary {
-  min-height: 44px;
-  line-height: 44px;
+  min-height: 48px;
+  line-height: 48px;
   font-weight: 700;
   cursor: pointer;
 }
@@ -443,17 +448,16 @@
 }
 
 .n133-shop .n133s-label {
-  width: 60px;
+  width: 64px;
   flex: none;
   color: var(--ink-soft);
-  font-size: 14px;
 }
 
 .n133-shop .n133s-row code {
   flex: 1;
   min-width: 0;
   word-break: break-all;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .n133-shop .n133s-paid {