/* Pekan OS 2031, round 3 and 4 styles: Halo actions, the ghost cursor, the
   in character dialog, the open world gag, 2014 mode, and
   the round 4 gag registry surfaces (the deck, cards, the call, the wallet,
   the ticker, the wanted level, achievements, autosave).
   Every gag surface sits below the dock (z 92) and the lead form (z 999999)
   in the stack, so the two doors and the form stay reachable, and every one
   carries a visible close control at 44 px on a phone.
   No em dashes anywhere in this file. */

/* ===== Halo actions ===== */
#os-halo .note .acts { display: flex; gap: 6px; margin-left: 10px; flex: none; }
#os-halo .note .acts button { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--os-line-2); background: rgba(255, 255, 255, 0.06); color: var(--os-text); font-family: var(--os-ui); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#os-halo .note .acts button.pri { background: var(--pm-purple); border-color: transparent; color: #fff; }
#os-halo .note .acts button:hover { background: rgba(255, 255, 255, 0.12); }
#os-halo .note .acts button.pri:hover { background: var(--pm-purple-deep); }
#os-halo .note .acts button:focus-visible { outline: 2px solid var(--pm-lavender); outline-offset: 2px; }
/* a message with actions stretches the Halo instead of clipping the line */
#os-halo.say.acts-on { height: auto; min-height: 48px; padding-top: 7px; padding-bottom: 7px; }
#os-halo.say.acts-on .note { max-width: 640px; }
#os-halo.say.acts-on .note > div { max-width: 300px; }
#os-halo.say.acts-on .note b, #os-halo.say.acts-on .note span { white-space: normal; overflow: visible; text-overflow: clip; }

/* ===== the ghost cursor ===== */
.os-ghost { position: fixed; z-index: 120; pointer-events: none; opacity: 0; transform: translate(-4px, -3px) scale(1.1); transition: opacity 300ms var(--pm-ease), transform 200ms var(--pm-ease); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.os-ghost.go { opacity: 0.85; transition: opacity 300ms var(--pm-ease), left 1300ms cubic-bezier(.3,.7,.3,1), top 1300ms cubic-bezier(.3,.7,.3,1), transform 200ms var(--pm-ease); }
.os-ghost.click { transform: translate(-4px, -3px) scale(0.9); }
.os-ghost.out { opacity: 0; }
#desktop > div.b.os-ghost-hit { background: rgba(131, 138, 251, 0.18); border-radius: 12px; }

@keyframes os-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes os-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ===== the dialog ===== */
#os-dialog { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(8, 8, 14, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: os-fade-in 180ms var(--pm-ease) both; }
#os-dialog .card { width: min(380px, 92vw); padding: 22px 22px 18px; border-radius: 16px; background: var(--os-pane); border: 1px solid var(--os-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); color: var(--os-text); font-family: var(--os-body); }
#os-dialog h3 { margin: 0 0 6px; font-family: var(--os-ui); font-size: 18px; font-weight: 700; }
#os-dialog p { margin: 0 0 10px; color: var(--os-text-2); font-size: 13.5px; line-height: 1.5; }
#os-dialog .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
#os-dialog .row button { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--os-line-2); background: rgba(255, 255, 255, 0.06); color: var(--os-text); font-family: var(--os-ui); font-weight: 700; font-size: 13px; cursor: pointer; }
#os-dialog .row button.pri { background: var(--pm-purple); border-color: transparent; color: #fff; }
#os-dialog .row button:hover { background: rgba(255, 255, 255, 0.12); }
#os-dialog .row button.pri:hover { background: var(--pm-purple-deep); }
#os-dialog .row button:focus-visible { outline: 2px solid var(--pm-lavender); outline-offset: 2px; }
#os-dialog .dev table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
#os-dialog .dev td { padding: 7px 0; border-bottom: 1px solid var(--os-line); }
#os-dialog .dev td:last-child { text-align: right; font-family: var(--os-mono); color: var(--os-text); }
#os-dialog .dev .sub { font-size: 12.5px; }

/* ===== Grand Theft Autofill VI ===== */
#os-gag { position: fixed; inset: 0; z-index: 210; font-family: var(--os-ui); color: #fff; outline: none; }
#os-gag .gag-stage { position: absolute; inset: 0; }
#os-gag .gag-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#os-gag.out { animation: os-fade-out 400ms var(--pm-ease) both; }
#os-gag .gag-launch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, 90vw); padding: 26px 26px 22px; border-radius: 14px; background: #121218; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); text-align: center; animation: os-fade-in 200ms var(--pm-ease) both; }
#os-gag .gag-ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: linear-gradient(160deg, #2a1a3f, #0f0a18); display: grid; place-items: center; font-weight: 800; font-size: 22px; letter-spacing: 0.04em; border: 1px solid rgba(255, 255, 255, 0.12); }
#os-gag .gag-launch h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
#os-gag .gag-verify { margin: 0 0 10px; font-family: var(--os-mono); font-size: 12.5px; color: #b9bcc8; }
#os-gag .gag-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#os-gag .gag-bar i { display: block; height: 100%; width: 0; background: #b18cff; transition: width 120ms linear; }
#os-gag .gag-world { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #2a1146 0%, #7a2a6a 28%, #ff7a3d 55%, #ffb347 66%, #1a0f2e 66.2%, #0d0818 100%); animation: os-fade-in 500ms var(--pm-ease) both; }
#os-gag .gag-world .sun { position: absolute; left: 50%; top: 40%; width: 24vmin; height: 24vmin; margin-left: -12vmin; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff2b0, #ff9e4a 55%, #ff5f7a 100%); box-shadow: 0 0 80px 30px rgba(255, 140, 80, 0.35); }
#os-gag .gag-world .sea { position: absolute; left: 0; right: 0; top: 66%; height: 12%; background: linear-gradient(180deg, rgba(255, 150, 90, 0.45), rgba(20, 8, 40, 0)); }
#os-gag .gag-world .palm { position: absolute; left: 6vw; bottom: -2vh; width: min(34vh, 40vw); height: auto; }
#os-gag .gag-load { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); width: min(520px, 86vw); }
#os-gag .gag-load p { margin: 0 0 10px; font-size: 15px; font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
#os-gag .gag-load .gag-bar { height: 8px; background: rgba(0, 0, 0, 0.35); }
#os-gag .gag-load .gag-bar i { background: #fff; }
#os-gag.hang .gag-world { filter: saturate(0.7) brightness(0.9); }
#os-gag .gag-bsod { position: absolute; inset: 0; background: #0a63c9; padding: clamp(24px, 10vh, 110px) clamp(22px, 12vw, 160px); box-sizing: border-box; font-family: var(--os-body); }
#os-gag .gag-bsod .face { font-size: clamp(64px, 14vh, 120px); line-height: 1; margin-bottom: 22px; font-weight: 300; }
#os-gag .gag-bsod p { margin: 0 0 16px; font-size: clamp(15px, 2.2vh, 20px); line-height: 1.45; max-width: 760px; }
#os-gag .gag-bsod .mono { font-family: var(--os-mono); font-size: clamp(12px, 1.8vh, 15px); }
#os-gag .gag-bsod .dim { opacity: 0.8; }
#os-gag .gag-recover { position: absolute; inset: 0; background: #000; display: grid; place-items: center; }
#os-gag .gag-recover p { margin: 0; font-family: var(--os-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9c9d6; opacity: 0; transition: opacity 400ms var(--pm-ease); }
#os-gag .gag-recover p.in { opacity: 1; }
/* while the game hangs the dock rises over it, the way a desktop surfaces the
   taskbar when something stops answering, so the tile can say so */
body.os-hang #dock-box { z-index: 215; }
#taskbar > a.gag-task.hung, body.os-hang #taskbar > a.gag-task { color: var(--os-text); box-shadow: inset 0 -2px 0 var(--pm-sun, #ffdc60); }
/* the running tile in the dock, wide enough for its name and the hang */
#dock-box #taskbar > a.gag-task, #taskbar > a.gag-task { width: auto; padding: 0 12px; gap: 8px; font-family: var(--os-ui); font-size: 12px; color: var(--os-text-2); }
#taskbar > a.gag-task span { white-space: nowrap; }
@media (max-width: 700px) { #taskbar > a.gag-task span { display: none; } #dock-box #taskbar > a.gag-task, #taskbar > a.gag-task { width: 44px; padding: 0; } }

/* ===== 2014 mode ===== */
#os-2014 { position: fixed; inset: 0; z-index: 205; background: #d4c8a8; display: grid; place-items: center; animation: os-fade-in 250ms var(--pm-ease) both; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; color: #000; }
#os-2014.out { animation: os-fade-out 350ms var(--pm-ease) both; }
#os-2014 .w95 { width: min(720px, 92vw); background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 4px 4px 0 #000; }
#os-2014 .tb { display: flex; justify-content: space-between; align-items: center; background: #000080; color: #fff; padding: 3px 6px; font: bold 13px/1.4 Tahoma, Arial, sans-serif; }
#os-2014 .page { background: #fff; margin: 4px; padding: 18px 20px 20px; min-height: 42vh; }
#os-2014 { outline: none; }
#os-2014 marquee, #os-2014 .mq { display: block; font-size: 26px; color: #c400c4; font-weight: bold; margin: 0; }
#os-2014.still .uc { animation: none; }
#os-2014 .uc { margin: 14px auto; width: max-content; padding: 6px 14px; background: repeating-linear-gradient(45deg, #ff0 0 12px, #000 12px 24px); color: #ff0; font: bold 16px Impact, "Arial Black", sans-serif; letter-spacing: 0.06em; text-shadow: 0 0 3px #000, 0 0 3px #000; border: 3px solid #000; animation: os-uc 900ms steps(2) infinite; }
#os-2014 .uc span { color: #fff; }
@keyframes os-uc { 50% { opacity: 0.55; } }
#os-2014 .ctr { font-size: 15px; }
#os-2014 .ctr b { font-family: "Courier New", monospace; background: #000; color: #0f0; padding: 2px 6px; }
#os-2014 .ctr small, #os-2014 .inbox small { font-size: 11px; color: #555; text-decoration: none; }
#os-2014 .inbox { font-size: 15px; color: #008; text-decoration: underline; }
#os-2014 .clock { font: 13px Tahoma, Arial, sans-serif; color: #444; margin-top: 20px; }
#os-2014 .why { position: absolute; left: 50%; bottom: 8vh; transform: translate(-50%, 20px); opacity: 0; transition: opacity 400ms var(--pm-ease), transform 400ms var(--pm-ease); text-align: center; font-family: var(--os-ui); }
#os-2014 .why[hidden] { display: none; }
#os-2014.ask .why { opacity: 1; transform: translate(-50%, 0); }
#os-2014 .why p { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: #1a1608; }
#os-2014 .why button { height: 44px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--pm-purple); color: #fff; font-family: var(--os-ui); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
#os-2014 .why button:hover { background: var(--pm-purple-deep); }
#os-2014 .why button:focus-visible { outline: 3px solid #1a1608; outline-offset: 3px; }
@media (max-width: 700px) { #os-2014 .page { min-height: 30vh; padding: 14px; } #os-2014 marquee { font-size: 20px; } #os-2014 .why { bottom: 5vh; width: 92vw; } }

/* ===== phone: the Halo with actions drops the message under the status row, every target 44 px ===== */
@media (max-width: 700px) {
  #os-halo .note .acts button { height: 44px; padding: 0 16px; font-size: 13px; }
  #os-dialog .row button { height: 44px; padding: 0 18px; }
  #os-halo.say.acts-on { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px 10px 12px; }
  #os-halo.say.acts-on .note { order: 10; flex: 1 1 100%; max-width: none; flex-wrap: wrap; }
  #os-halo.say.acts-on .note .dot { display: none; }
  #os-halo.say.acts-on .note > div { max-width: none; flex: 1 1 100%; }
  #os-halo.say.acts-on .note b { max-width: none; }
  #os-halo.say.acts-on .note span { display: block; }
  #os-halo.say.acts-on .note .acts { margin-left: 0; flex-wrap: wrap; }
}

/* ===== round 4: the gag registry surfaces ===== */
/* the deck stacks the notification bits above the dock but clear of it, and
   never over the free consultation key, which sits inside #dock-box */
#os-gag-deck { position: fixed; right: 16px; bottom: 74px; z-index: 91; display: flex; flex-direction: column-reverse; gap: 10px; align-items: flex-end; pointer-events: none; }
#os-gag-deck > * { pointer-events: auto; }

[data-gag] { font-family: var(--os-ui); color: var(--os-text); }
[data-gag].out { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--pm-ease), transform 240ms var(--pm-ease); }
[data-gag] .g-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
[data-gag] .g-row button { height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--os-line-3); background: rgba(255, 255, 255, 0.86); color: var(--os-text); font-family: var(--os-ui); font-weight: 700; font-size: 12.5px; cursor: pointer; }
[data-gag] .g-row button.pri { background: var(--pm-purple); border-color: transparent; color: #fff; }
[data-gag] .g-row button.pri:hover { background: var(--pm-purple-deep); }
[data-gag] .g-row button.pri[disabled] { opacity: 0.55; cursor: default; }
[data-gag] .g-row button:hover { background: #ffffff; border-color: var(--pm-purple); }
[data-gag] button:focus-visible, [data-gag] .g-x:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 2px; }
[data-gag] .g-x { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--os-line-2); background: rgba(255, 255, 255, 0.7); color: var(--os-text); font-size: 17px; line-height: 1; cursor: pointer; }
[data-gag] .g-x:hover { background: #ffffff; border-color: var(--pm-purple); }
[data-gag] .g-note { margin: 8px 0 0; font-size: 11.5px; color: var(--os-text-2); }

.g-card { width: min(360px, calc(100vw - 32px)); padding: 13px 14px 14px; border-radius: 14px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 220ms var(--pm-ease) both; }
.g-card .g-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.g-card .g-app { font-family: var(--os-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--os-text); }
.g-card h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.g-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--os-text-2); }
/* the spam popup wears its decade: a hard border and a shout, on our colours */
.g-spam { border: 2px solid #B8860B; }
.g-spam h3 { color: #5C4402; letter-spacing: 0.01em; }
.g-storage .g-note, .g-battery .g-note { color: var(--os-text-2); }
.g-printer .g-app { color: #15537A; }

.g-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 28px)); z-index: 96; border-radius: 14px; overflow: hidden; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 220ms var(--pm-ease) both; }
.g-panel .g-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; background: rgba(255, 255, 255, 0.78); border-bottom: 1px solid var(--os-line); }
.g-panel .g-dots { display: flex; gap: 6px; }
.g-panel .g-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--pm-purple); }
.g-panel .g-dots i:nth-child(2) { background: var(--pm-sun); }
.g-panel .g-dots i:nth-child(3) { background: var(--pm-sky); }
.g-panel .g-title { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--os-text); }
.g-panel .g-body { padding: 18px 18px 16px; }
.g-prince .g-letter { margin: 0; min-height: 4.6em; font-size: 14px; line-height: 1.6; color: var(--os-text); }
.g-prince .g-letter span { color: var(--os-text-2); font-size: 13px; }
.g-wallet .g-coin { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.g-wallet .g-chip { padding: 3px 8px; border-radius: 6px; background: var(--pm-purple); color: #fff; font-family: var(--os-mono); font-size: 11px; }
.g-wallet .g-k { margin: 0; font-family: var(--os-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--os-text); }
.g-wallet .g-v { margin: 2px 0 12px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.g-wallet .g-v.g-zero { color: #5C4402; }
.g-wallet .g-fail { margin: 10px 0 0; min-height: 1.4em; font-size: 12.5px; color: #8A4B00; }

.g-call { position: fixed; right: 20px; top: 74px; z-index: 96; width: min(340px, calc(100vw - 32px)); padding: 16px 16px 14px; border-radius: 16px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 240ms var(--pm-ease) both; }
.g-call .g-call-face { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--pm-purple), var(--pm-lavender)); color: #fff; font-size: 22px; font-weight: 800; }
.g-call .g-call-who { text-align: center; }
.g-call .g-call-who b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.g-call .g-call-who span { display: block; margin-top: 3px; font-size: 12px; color: var(--os-text-2); }
.g-call .g-call-line { margin: 12px 0 0; min-height: 4.4em; font-size: 13px; line-height: 1.55; color: var(--os-text-2); }
.g-call .g-call-line b { color: var(--os-text); font-size: 14px; }
.g-call .g-row { justify-content: center; }
.g-call .g-x { position: absolute; top: 10px; right: 10px; }
.g-call.live .g-call-face { animation: g-pulse 2s var(--pm-ease) infinite; }
@keyframes g-pulse { 50% { box-shadow: 0 0 0 10px rgba(131, 138, 251, 0.16); } }

/* the news ticker, above the dock and never across it */
.g-ticker { position: fixed; left: 16px; right: 16px; bottom: 68px; z-index: 91; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px 0 12px; border-radius: 12px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 220ms var(--pm-ease) both; }
.g-ticker .g-brand { flex: none; padding: 4px 9px; border-radius: 6px; background: var(--pm-purple); color: #fff; font-family: var(--os-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; }
.g-ticker .g-tape { flex: 1; min-width: 0; overflow: hidden; }
.g-ticker .g-tape-in { display: block; font-size: 13px; color: var(--os-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the wanted level: our stars, our colours, no lifted artwork */
.g-wanted { position: fixed; right: 20px; top: 74px; z-index: 96; width: min(300px, calc(100vw - 32px)); padding: 15px 16px 14px; border-radius: 14px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 220ms var(--pm-ease) both; }
.g-wanted .g-stars { display: flex; gap: 5px; margin-bottom: 10px; }
.g-wanted .g-stars i { width: 17px; height: 17px; background: var(--os-line-3); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background 260ms var(--pm-ease); }
.g-wanted .g-stars i.on { background: #C8960A; }
.g-wanted .g-crime { margin: 0; font-size: 13.5px; font-weight: 700; }
.g-wanted .g-level { margin: 5px 0 0; font-family: var(--os-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #5C4402; }

.g-ach { width: min(360px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 240ms var(--pm-ease) both; }
.g-ach .g-ach-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, var(--pm-sun), #f0a93c); color: #2a2208; }
.g-ach .g-ach-txt { flex: 1; min-width: 0; }
.g-ach .g-ach-txt b { display: block; font-size: 13px; font-weight: 700; }
.g-ach .g-ach-txt span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--os-text-2); }

.g-save { position: fixed; right: 20px; top: 74px; z-index: 96; display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100vw - 32px)); padding: 9px 9px 9px 13px; border-radius: 999px; background: var(--g3-bg); backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(var(--g3-sat)); border: var(--g3-border); box-shadow: var(--g3-shadow); animation: os-fade-in 220ms var(--pm-ease) both; }
.g-save.done { border-radius: 14px; flex-wrap: wrap; padding: 12px 12px 12px 14px; }
.g-save .g-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--os-line-3); border-top-color: var(--pm-lavender); animation: g-spin 900ms linear infinite; }
.g-save.done .g-spin { display: none; }
.g-save .g-save-txt { font-size: 12.5px; color: var(--os-text); }
.g-save .g-save-sub { flex: 1 1 100%; margin-left: 0; font-size: 12px; line-height: 1.45; color: var(--os-text-2); }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* a visible skip on the open world bit, so contract 1 has a control and not
   only a key */
#os-gag .gag-skip { position: absolute; right: 18px; top: 18px; z-index: 4; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.42); color: #fff; font-family: var(--os-ui); font-weight: 700; font-size: 12.5px; cursor: pointer; }
#os-gag .gag-skip:hover { background: rgba(0, 0, 0, 0.62); }
#os-gag .gag-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* phone: the shorter list only, every target 44 px, nothing centred over
   the dock */
@media (max-width: 700px) {
  #os-gag-deck { left: 12px; right: 12px; bottom: 92px; align-items: stretch; }
  .g-card, .g-ach { width: auto; }
  [data-gag] .g-row button { height: 44px; padding: 0 16px; font-size: 13px; }
  [data-gag] .g-x { width: 44px; height: 44px; }
  .g-call, .g-wanted, .g-save { left: 12px; right: 12px; top: 62px; width: auto; max-width: none; }
  .g-panel { width: calc(100vw - 24px); }
  /* a truncated headline is not a joke, so on a phone the ticker gives the
     line the room to finish instead of cutting it off */
  .g-ticker { left: 12px; right: 12px; bottom: 92px; height: auto; min-height: 44px; padding: 8px 8px 8px 12px; align-items: flex-start; }
  .g-ticker .g-brand { margin-top: 2px; }
  .g-ticker .g-tape-in { font-size: 12px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }
  #os-gag .gag-skip { height: 44px; right: 12px; top: 12px; }
}

@media (prefers-reduced-transparency: reduce) {
  .g-card, .g-panel, .g-call, .g-wanted, .g-ach, .g-save, .g-ticker { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #os-2014 .uc, .os-ghost { animation: none; transition: none; }
  #os-gag .gag-world, #os-gag .gag-launch, #os-dialog { animation: none; }
  .g-card, .g-panel, .g-call, .g-wanted, .g-ach, .g-save, .g-ticker { animation: none; }
  .g-save .g-spin, .g-call.live .g-call-face { animation: none; }
  [data-gag].out { transition: none; }
  .g-wanted .g-stars i { transition: none; }
}