/* Platform & Jordan (M8): the welcome, the "what's next" hint, Settings, the phone's quick chat,
   action label and thumb-arc abilities, memory frames, the credits. See public/js/platform.ts. */

/* ------------------------------------------------------------------ text size, calmer motion */
html.pf-text-l .pbody, html.pf-text-l #chat-log, html.pf-text-l #toasts, html.pf-text-l #pf-hint { zoom: 1.15; }
html.pf-text-xl .pbody, html.pf-text-xl #chat-log, html.pf-text-xl #toasts, html.pf-text-xl #pf-hint { zoom: 1.32; }
html.pf-text-l .ptitle { font-size: 22px; }
html.pf-text-xl .ptitle { font-size: 24px; }
html.pf-calm *, html.pf-calm *::before, html.pf-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.pf-nostick #stick { display: none !important; }

/* ------------------------------------------------------------------ the welcome */
.pf-welcome p { margin: 4px 0 10px; font-size: 15.5px; line-height: 1.4; }
.pf-steps { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; padding: 8px 10px; background: #fffaf0; border: 2px solid var(--paper2); border-radius: 8px; font-size: 15px; }

/* ------------------------------------------------------------------ what's next */
#pf-hint { left: 50%; transform: translateX(-50%); bottom: calc(98px + var(--safe-b)); max-width: min(440px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 0; background: rgba(255, 246, 216, .94); border: 2px solid var(--wood2); border-radius: 18px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); animation: pf-rise .5s ease-out; }
#pf-hint .pf-hint-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 12px; background: none; border: none; font-size: 14.5px; font-weight: 600; text-align: left; }
#pf-hint .pf-hint-i { font-size: 17px; }
#pf-hint .pf-hint-x { width: 30px; height: 30px; margin-right: 3px; border-radius: 50%; background: none; border: none; color: var(--ink2); font-size: 13px; }
#pf-hint .pf-hint-more { flex-basis: 100%; padding: 0 12px 9px; font-size: 13.5px; line-height: 1.35; color: var(--ink2); }
#pf-hint .pf-hint-more .btn { margin-left: 8px; vertical-align: middle; }
#pf-hint.open { border-radius: 14px; }
body:has(#abilities:not([style*="none"])) #pf-hint, body:has(#panel-root.on) #pf-hint, body:has(#planbar:not([style*="none"])) #pf-hint { display: none !important; }
@keyframes pf-rise { from { opacity: 0; transform: translate(-50%, 8px); } }
/* (a phone held upright: up under the party frames, clear of the thumbstick and the buttons) */
@media (max-width: 600px) {
  #pf-hint { bottom: auto; top: calc(236px + var(--safe-t)); left: calc(10px + var(--safe-l)); transform: none; max-width: calc(100vw - 76px); animation: none; }
  #pf-hint .pf-hint-main { font-size: 13.5px; }
}

/* ------------------------------------------------------------------ settings */
.pf-settings h4 { margin: 14px 0 6px; }
.pf-settings h4:first-child { margin-top: 2px; }
.pf-slider { display: grid; grid-template-columns: 118px 1fr 44px; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; }
.pf-slider input[type=range] { padding: 0; border: none; background: transparent; height: 30px; accent-color: var(--good); }
.pf-val { text-align: right; font-size: 13px; color: var(--ink2); }
.pf-choice { margin: 8px 0 10px; }
.pf-lab { font-weight: 600; }
.pf-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pf-seg .btn { flex: 1 1 auto; }

/* ------------------------------------------------------------------ the phone: quick chat */
#pf-wheel { position: fixed; inset: 0; z-index: 35; background: rgba(20, 12, 6, .5); animation: pf-fade .15s; }
#pf-wheel .pf-ring { --r: min(37vw, 34vh, 150px); position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pf-q { position: absolute; left: calc(var(--x, 0) * var(--r)); top: calc(var(--y, 0) * var(--r)); transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; padding: 0; background: radial-gradient(circle at 40% 35%, #fff6d8, var(--paper2)); border: 3px solid var(--wood); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pf-pop .18s ease-out; }
.pf-q.say { width: 84px; height: 54px; border-radius: 27px; }
.pf-qi { font-size: 24px; line-height: 1; }
.pf-q.say .pf-qi { font-size: 18px; }
.pf-qt { font-size: 11.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.pf-q.pf-type { width: 66px; height: 66px; background: radial-gradient(circle at 40% 35%, #e8f4d8, #b8d89c); }
@keyframes pf-pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@keyframes pf-fade { from { opacity: 0; } }

/* the action button's label: what a tap will do */
#pf-act { position: fixed; z-index: 6; right: calc(14px + var(--safe-r)); bottom: calc(66px + var(--safe-b)); width: 74px; text-align: center; pointer-events: none; font-size: 12px; font-weight: 700; color: #fff6e0; white-space: nowrap; }
#pf-act { text-shadow: 1px 1px 0 #2a1a0a, -1px 0 0 #2a1a0a, 0 -1px 0 #2a1a0a, 1px 0 #2a1a0a; }
body:not(.touch) #pf-act { display: none !important; }

/* ------------------------------------------------------------------ the thumb arc */
/* On a touch screen the abilities fan out round the action button: four close to the thumb,
   four a little further out. The bar itself shrinks to a point at the button's middle. */
body.touch #abilities { left: auto; right: calc(51px + var(--safe-r)); bottom: calc(123px + var(--safe-b)); width: 0; height: 0; transform: none; }
body.touch #abilities .ab { position: absolute; transform: translate(-50%, -50%); }
body.touch #abilities .ab:nth-child(1) { left: -104px; top: 0; }
body.touch #abilities .ab:nth-child(2) { left: -90px; top: -52px; }
body.touch #abilities .ab:nth-child(3) { left: -52px; top: -90px; }
body.touch #abilities .ab:nth-child(4) { left: 0; top: -104px; }
body.touch #abilities .ab:nth-child(5) { left: -163px; top: -14px; }
body.touch #abilities .ab:nth-child(6) { left: -139px; top: -87px; }
body.touch #abilities .ab:nth-child(7) { left: -85px; top: -141px; }
body.touch #abilities .ab:nth-child(8) { left: -11px; top: -164px; }
body.touch #abilities .ab:active { transform: translate(-50%, calc(-50% + 2px)); }
/* (the wand's spells step aside while the abilities are out) */
body.touch:has(#abilities:not([style*="none"])) #spells { right: auto; left: calc(8px + var(--safe-l)); bottom: auto; top: 38%; }
@media (max-width: 600px), (max-height: 420px) {
  body.touch #abilities .ab { width: 44px; height: 44px; }
  body.touch #abilities .ab .abi { font-size: 21px; line-height: 38px; }
  body.touch #abilities .ab:nth-child(1) { left: -94px; top: 0; }
  body.touch #abilities .ab:nth-child(2) { left: -81px; top: -47px; }
  body.touch #abilities .ab:nth-child(3) { left: -47px; top: -81px; }
  body.touch #abilities .ab:nth-child(4) { left: 0; top: -94px; }
  body.touch #abilities .ab:nth-child(5) { left: -146px; top: -13px; }
  body.touch #abilities .ab:nth-child(6) { left: -124px; top: -78px; }
  body.touch #abilities .ab:nth-child(7) { left: -76px; top: -126px; }
  body.touch #abilities .ab:nth-child(8) { left: -10px; top: -147px; }
}

/* ------------------------------------------------------------------ memory frames */
.pf-memory { text-align: center; }
.pf-pic { display: block; margin: 4px auto 8px; width: min(100%, 416px); height: auto; image-rendering: pixelated; border-radius: 4px; }
.pf-caption { font-size: 16px; font-style: italic; line-height: 1.4; margin: 6px 6px 10px; }

/* ------------------------------------------------------------------ the credits */
#pf-credits { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #3a2a5a 0%, #1a1630 45%, #0a0a18 100%); color: #fff6dc; transition: opacity .8s; animation: pf-fade 1.2s; }
#pf-credits.out { opacity: 0; }
#pf-credits .pf-stars { position: absolute; inset: -20px; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 70px, #ffe9b0, transparent), radial-gradient(1.5px 1.5px at 150px 120px, #cfe0ff, transparent), radial-gradient(1px 1px at 60px 160px, #fff, transparent), radial-gradient(1px 1px at 180px 20px, #fff, transparent); background-size: 200px 190px; opacity: .8; animation: pf-twinkle 5s ease-in-out infinite alternate; }
@keyframes pf-twinkle { to { opacity: .45; } }
#pf-credits .pf-roll { position: relative; max-width: 560px; margin: 0 auto; padding: 0 24px; text-align: center; will-change: transform; }
#pf-credits.calm .pf-roll { height: 100%; overflow-y: auto; padding: 64px 24px 48px; }
#pf-credits h1 { margin: 0 0 8px; font-size: 44px; color: #f2c94c; text-shadow: 0 3px 0 #6b4a2e, 0 0 24px rgba(242, 201, 76, .35); letter-spacing: 1px; }
#pf-credits h3 { margin: 22px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #c8b4ff; }
#pf-credits .pf-name { font-size: 21px; line-height: 1.45; }
#pf-credits .pf-gap { height: 18px; }
#pf-credits .pf-end { font-size: 38px; padding-bottom: 40vh; }
#pf-credits .x { position: absolute; z-index: 2; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); background: rgba(255, 246, 220, .15); color: #fff6dc; border-color: rgba(255, 246, 220, .4); }
@media (max-width: 600px) { #pf-credits h1 { font-size: 34px; } #pf-credits .pf-name { font-size: 18px; } }

/* ------------------------------------------------------------------ QR codes, inviting a friend */
.qr { display: block; flex: none; image-rendering: pixelated; border-radius: 8px; border: 3px solid var(--wood2); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.qr-pair { display: flex; gap: 14px; align-items: flex-start; }
.qr-pair > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qr-pair p { margin: 0; line-height: 1.35; }
@media (max-width: 480px) { .qr-pair { flex-direction: column; align-items: center; } .qr-pair > div { align-self: stretch; } }
.pf-invite > p:first-child { margin: 0 0 10px; line-height: 1.35; }
.pf-invite h4 { margin: 14px 0 2px; }
.pf-code-box { display: flex; flex-direction: column; gap: 8px; }
.pf-code { font-size: 44px; font-weight: 700; letter-spacing: 4px; color: var(--wood); text-align: center; padding: 8px 6px; background: #fffaf0; border: 3px dashed var(--wood2); border-radius: 10px; user-select: text; -webkit-user-select: text; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the front door (landing.ts) */
#overlay.pf-landing { display: block; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: calc(18px + var(--safe-t)) 16px calc(24px + var(--safe-b));
  background: radial-gradient(ellipse at 50% 0%, #6aa556 0, #4f8a46 30%, #2c5a33 70%, #1e3a24 100%) fixed; }
body.pf-landing #offline { display: none; }
.pf-land { width: min(940px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pf-land-hero { padding: 18px 22px 16px; text-align: center; }
.pf-land-hero h1 { margin: 2px 0 6px; font-size: 52px; line-height: 1; color: var(--wood); text-shadow: 0 3px 0 var(--paper2); letter-spacing: 1px; }
.pf-land-friends { width: 156px; height: 66px; image-rendering: pixelated; }
.pf-land-tag { margin: 0 auto 14px; max-width: 560px; font-size: 18px; line-height: 1.4; color: var(--ink2); }
.pf-land-join { max-width: 420px; margin: 0 auto; padding: 12px 14px; background: #fffaf0; border: 2px solid var(--paper2); border-radius: 10px; text-align: left; }
.pf-land-lab { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.pf-land-row { display: flex; gap: 8px; }
.pf-land-row .btn { flex: none; }
.pf-land-code { font-size: 26px; letter-spacing: 3px; text-align: center; font-weight: 700; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.pf-land-msg { min-height: 1.3em; margin: 6px 0 2px; font-size: 14px; font-weight: 600; color: var(--wood); }
.pf-land-join .sub { margin: 4px 0 0; line-height: 1.35; font-size: 13.5px; }
/* (five cards: two across, then three) */
.pf-land-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pf-land-card { padding: 12px 16px 14px; grid-column: span 2; }
.pf-land-card:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 800px) { .pf-land-cards { grid-template-columns: 1fr 1fr; } .pf-land-card, .pf-land-card:nth-child(-n+2) { grid-column: auto; } .pf-land-card:last-child { grid-column: span 2; } }
.pf-land-card h2 { margin: 2px 0 4px; font-size: 21px; color: var(--wood); }
.pf-land-card p { margin: 0; font-size: 15px; line-height: 1.4; }
.pf-land-i { font-size: 26px; }
.pf-land-pics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pf-land-pics figure { margin: 0; padding: 6px; overflow: hidden; }
.pf-land-pics img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; image-rendering: pixelated; background: #2c5a33; }
.pf-land-pics figcaption { padding: 6px 4px 2px; font-size: 14px; color: var(--ink2); text-align: center; }
.pf-land-foot { text-align: center; color: #e8f0d8; font-size: 14px; padding: 4px 10px 12px; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
@media (max-width: 600px) {
  .pf-land { gap: 12px; }
  .pf-land-hero { padding: 14px 14px 14px; }
  .pf-land-hero h1 { font-size: 38px; }
  .pf-land-tag { font-size: 16px; }
  .pf-land-pics { grid-template-columns: 1fr; }
  .pf-land-cards { grid-template-columns: 1fr; gap: 10px; }
  .pf-land-card:last-child { grid-column: auto; }
}

/* ------------------------------------------------------------------ the main menu: your worlds (#13) */
.pf-land-worlds { max-width: 420px; margin: 0 auto 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pf-land-world { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; white-space: normal; text-align: left; background: #fffaf0; }
.pf-land-world.cur { border-color: var(--good); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px var(--good2); }
.pf-land-wname { font-size: 18px; color: var(--wood); }
.pf-land-world .sub { font-weight: 400; }
.pf-land-join .pf-land-row + .pf-land-row { margin-top: 8px; }
.pf-land-link { font-size: 15px; padding: 7px 10px; }
.pf-land-note { margin: 0 auto 10px; max-width: 420px; padding: 8px 12px; background: #f6dccf; border: 2px solid var(--bad); border-radius: 8px; font-weight: 600; }

/* M10: story holds (a moment waiting for everyone) */
#pf-holds { position: fixed; z-index: 15; top: calc(66px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(430px, 92vw); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.pf-hold { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 14px; background: rgba(46, 34, 78, .9); color: #f4ecff; border: 2px solid #c8b4f0; border-radius: 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(180, 140, 255, .35); font-size: 14px; animation: pf-rise .5s ease-out; }
.pf-hold b { display: block; font-size: 15px; color: #fff6d8; }
.pf-hold span { color: #ddd0f8; }
.pf-hold .btn { flex: none; color: var(--ink); }
.pf-hold .btn.good { color: #fff; }
.pf-hold-btns { display: flex; gap: 4px; flex: none; }
.pf-hold.go { flex-direction: column; align-items: center; gap: 1px; text-align: center; padding: 9px 14px; background: linear-gradient(#3a2a6a, #5a3a8a); }
.pf-hold.go b { font-size: 18px; }
/* (on a phone the top is full of friends and buttons: above the thumbstick instead) */
@media (max-width: 760px) { #pf-holds { top: auto; bottom: calc(236px + var(--safe-b)); } .pf-hold { font-size: 13px; } }
/* Under the HUD row (clear of the target frame) on a desktop, and everything else that lives at
   the top centre steps down below it while it's there (--pf-hold: its height, from holds.ts). */
@media (min-width: 761px) {
  body.pf-held #toasts { top: calc(70px + var(--pf-hold, 0px) + var(--safe-t)); }
  body.pf-held #tw-banner, body.pf-held #adv-banner, body.pf-held #dg-banner { top: calc(62px + var(--pf-hold, 0px) + var(--safe-t)); }
  body.pf-held #planbar, body.pf-held .hs-movebar { top: calc(64px + var(--pf-hold, 0px) + var(--safe-t)); }
  body.pf-held .hs-banner.hs-count { top: calc(70px + var(--pf-hold, 0px) + var(--safe-t)); }
  body.pf-held .hs-morning { top: calc(78px + var(--pf-hold, 0px) + var(--safe-t)); }
}

/* M10: books, the shelf, Memory Spots' plaques */
.pf-case { display: block; width: min(100%, 420px); margin: 0 auto 6px; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); cursor: pointer; }
.pf-spines { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pf-spine { display: flex; align-items: center; gap: 8px; width: calc(50% - 4px); min-width: 180px; flex: 1 1 calc(50% - 4px); padding: 6px 10px 6px 6px; background: #fffaf0; border: 2px solid var(--paper2); border-radius: 8px; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; flex-wrap: wrap; }
.pf-spine .sub { width: 100%; padding-left: 28px; margin-top: -4px; font-weight: 400; }
.pf-spine-img { width: 20px; height: 68px; image-rendering: pixelated; border-radius: 2px; flex: none; }
.pf-spine > span:not(.sub) { flex: 1; min-width: 0; }
.pf-shelf-more { margin-top: 6px; font-style: italic; }
.pf-book-head { display: flex; flex-direction: column; align-items: center; margin: 0 0 8px; padding: 8px; border-radius: 8px; background: var(--cover, #7a3a3a); color: #fff6dc; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); text-align: center; }
.pf-book-head b { font-size: 18px; }
.pf-book-head .sub { color: #f0e0c8; font-style: italic; }
.pf-page { min-height: 150px; padding: 12px 16px; background: #fbf4e2; border: 2px solid var(--paper2); border-radius: 6px; box-shadow: inset 0 0 12px rgba(160, 120, 60, .15); font-size: 15.5px; line-height: 1.5; }
.pf-page p { margin: 0 0 6px; white-space: pre-wrap; }
.pf-turn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 2px; }
.pf-turn .btn { min-width: 46px; font-size: 18px; }
.pf-plaque { text-align: center; }
.pf-plaque-plate { display: inline-block; max-width: 100%; margin: 6px auto 8px; padding: 12px 18px; background: linear-gradient(#e8c870, #c8a040); border: 3px solid #8a6a2a; border-radius: 6px; box-shadow: inset 0 0 0 2px #f4dc90, 0 2px 0 rgba(0, 0, 0, .3); color: #4a3414; }
.pf-plaque-plate b { display: block; font-size: 18px; margin-bottom: 4px; }
.pf-plaque-plate p { margin: 2px 0; font-size: 15px; line-height: 1.35; }

/* M10: the world map */
@media (min-width: 601px) { .panel.wide:has(.pf-map) { width: min(760px, 96vw); } }
.pf-map-frame { max-width: calc(60vh * 4 / 3 + 18px); margin: 0 auto; padding: 6px; background: #b88850; border: 3px solid #5a3a20; border-radius: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.pf-map-cv { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; border-radius: 3px; cursor: grab; touch-action: none; } /* (dragged about to look around, #65) */
.pf-map-card { margin-top: 10px; min-height: 64px; }
.pf-map-info { padding: 8px 12px; background: #fffaf0; border: 2px solid var(--paper2); border-radius: 9px; }
.pf-map-info p { margin: 4px 0; line-height: 1.35; }
.pf-map-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.pf-map-head .pill { font-size: 12px; padding: 1px 7px; border-radius: 9px; background: var(--paper2); }
.pf-map-tip { margin: 4px 2px; }
@media (max-width: 640px) { .pf-map-frame { padding: 3px; border-width: 2px; } }

/* M10: asking for a world, and how the asks are getting on */
.pf-land-asks { max-width: 420px; margin: 0 auto 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pf-land-ask-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 12px; background: #fffaf0; border: 2px dashed var(--paper2); border-radius: 10px; font-size: 15px; }
.pf-land-ask-row .sub { margin-top: 2px; font-size: 13px; }
.pf-land-ask-row .btn { flex: none; }
.pf-land-ask-row.ready { border: 2px solid var(--good2); background: #f0f8e4; }
.pf-land-ask-row.no { border-style: solid; background: #fbf1e8; }
.pf-land-reply { margin-top: 3px; font-size: 14px; font-style: italic; color: var(--ink2); }
.pf-land-askform { max-width: 420px; margin: 12px auto 0; }
.pf-land-askform > .btn { width: 100%; }
.pf-land-askform .pf-land-lab { margin-top: 6px; font-size: 15px; }
.pf-land-askform input, .pf-land-askform textarea { width: 100%; }
.pf-land-askform textarea { resize: vertical; min-height: 64px; font: inherit; font-size: 15px; }
.pf-land-askform .pf-land-row { margin-top: 4px; }
.pf-land-sent { margin: 0; padding: 10px 12px; background: #f0f8e4; border: 2px solid var(--good2); border-radius: 10px; font-size: 15px; text-align: left; }

/* ------------------------------------------------------------------ recovery codes (recovery.ts, landing.ts) */
.pf-rc { display: flex; flex-direction: column; gap: 10px; }
.pf-rc > p { margin: 0; line-height: 1.4; }
.pf-rc-made { padding: 10px 12px; background: #f0f8e4; border: 2px solid var(--good2); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.pf-rc-made h4 { margin: 0; }
.pf-rc-made > p { margin: 0; }
.pf-code.pf-rc-code { font-size: 27px; letter-spacing: 2px; padding: 8px 4px; white-space: nowrap; font-family: 'Pixelify Sans', ui-monospace, monospace; }
.pf-rc-list { display: flex; flex-direction: column; gap: 6px; }
.pf-rc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: #fffaf0; border: 2px solid var(--paper2); border-radius: 9px; }
.pf-rc-who { flex: 1 1 160px; min-width: 0; }
.pf-rc-row .btns { margin: 0; flex: none; }
.btn.pf-rc-sure { background: #f2d58a; border-color: var(--wood2); }
.pf-rc-hint { margin: 8px 2px 0; line-height: 1.35; }
.pf-land-rc .pf-land-code.pf-rc-code { font-size: 22px; letter-spacing: 2px; text-transform: uppercase; min-width: 0; flex: 1; font-family: 'Pixelify Sans', ui-monospace, monospace; }
.pf-land-rc .pf-land-note { margin: 6px 0 0; font-size: 13.5px; }
.pf-land-rc .sub + .pf-land-row { margin-top: 8px; }
.pf-rc-out .btns { justify-content: center; }
@media (max-width: 480px) { .pf-code.pf-rc-code { font-size: 32px; letter-spacing: 3px; } }

/* ------------------------------------------------------------------ the world speed, by the clock (while it isn't 1x) */
#pf-speed { display: inline-block; margin: 3px 0 0 6px; padding: 1px 7px; border-radius: 6px; background: #ffe2a8; color: #7a4a10; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px #e8b860; }
@media (max-width: 600px) { #pf-speed { font-size: 11px; padding: 1px 5px; } }

/* "A new version is here" (#49, newbuild.ts): until it's refreshed or put off, just above the hotbar */
#pf-update { pointer-events: auto; z-index: 16; left: 50%; transform: translateX(-50%); bottom: calc(98px + var(--safe-b)); width: min(400px, calc(100vw - 24px)); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 14px; background: rgba(38, 74, 52, .94); color: #eefbe6; border: 2px solid #9cd07c; border-radius: 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(156, 208, 124, .3); font-size: 14px; animation: pf-rise .5s ease-out; }
#pf-update b { display: block; font-size: 15px; color: #fff6d8; }
#pf-update span { color: #d6efc8; }
#pf-update .btn { flex: none; color: var(--ink); }
#pf-update .btn.good { color: #fff; }
.pf-update-btns { display: flex; gap: 4px; flex: none; }
/* (the "what's next" hint steps up above it; in the wild it sits above the abilities and the cast bar) */
@media (min-width: 601px) { body:has(#pf-update) #pf-hint { bottom: calc(160px + var(--safe-b)); } }
body:has(#abilities:not([style*="none"])) #pf-update { bottom: calc(182px + var(--safe-b)); }
/* (a phone: above the thumbstick and the buttons, like a story hold, and above one if there is one) */
@media (max-width: 760px) {
  #pf-update, body:has(#abilities:not([style*="none"])) #pf-update { bottom: calc(236px + var(--safe-b)); font-size: 13px; }
  body.pf-held #pf-update { bottom: calc(236px + var(--pf-hold, 0px) + var(--safe-b)); }
}