/* LUMINARA: the Bazar de Luminara window, Axel's bag and the in-world prompts. Dark purple, turquoise and gold,
   cards of parchment, rounded buttons. The panel takes the window it is given: one column held upright, two side by side. */
.bz { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1a0f3a88, #0b0620cc); padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); box-sizing: border-box; opacity: 0; touch-action: pan-y; }
.bz[hidden] { display: none !important; }
.bz.in { animation: bzin .32s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.bz.out { animation: bzout .24s ease-in forwards; }
@keyframes bzin { from { opacity: 0; } to { opacity: 1; } }
@keyframes bzout { from { opacity: 1; } to { opacity: 0; } }
.bz.in .bz-panel { animation: bzpanel .36s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes bzpanel { from { transform: translateY(18px) scale(.94); } to { transform: none; } }
.bz-panel { position: relative; width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; box-sizing: border-box;
  background: linear-gradient(170deg, #34205f, #221344 55%, #1a0f36); border: 2px solid #d9b25e; border-radius: 22px; color: #fff4dc;
  box-shadow: 0 0 0 4px #2a174f, 0 0 0 5px #d9b25e66, 0 0 36px #4ff0e055, 0 18px 40px #000a; padding: 12px 12px 10px; font-family: 'LumFell', Georgia, serif; }
.bz-panel::before { content: ""; position: absolute; inset: 6px; border-radius: 17px; border: 1px solid #5fe8d955; pointer-events: none; }
.bz-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bz-title { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bz-title b { font: 700 clamp(17px, 4.6vw, 23px) 'LumCinzel', Georgia, serif; color: #f6d68a; letter-spacing: .03em; text-shadow: 0 0 10px #f6c46a66, 0 2px 0 #1a0d33; white-space: nowrap; }
.bz-spiral { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 2px solid #d9b25e; background: radial-gradient(circle, #8ff7ee, #2fbfc0 45%, #13525f 75%); box-shadow: 0 0 12px #5ff0e4aa; position: relative; }
.bz-spiral::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid #e9fffd; border-right-color: transparent; border-bottom-color: transparent; animation: bzspin 3.5s linear infinite; }
@keyframes bzspin { to { transform: rotate(360deg); } }
.bz-bal { display: flex; align-items: center; gap: 5px; background: #120a2acc; border: 1px solid #d9b25e; border-radius: 16px; padding: 5px 11px; font: 800 16px system-ui, sans-serif; color: #fff; }
.bz-bal span { font: 400 12px 'LumFell', Georgia, serif; color: #e9d7ff; }
.bz-gem { display: inline-block; width: 12px; height: 12px; transform: rotate(45deg); background: linear-gradient(135deg, #f0b3ff, #9a5cff 55%, #5ff0e4); box-shadow: 0 0 6px #c79bff; border-radius: 2px; margin: 0 3px 0 2px; }
.bz-x { font: 700 14px system-ui, sans-serif; color: #fff4dc; background: #3e2470; border: 1px solid #d9b25e; border-radius: 16px; padding: 8px 14px; min-height: 38px; cursor: pointer; }
.bz-x:active { transform: scale(.95); }
.bz-say { margin: 8px 2px 6px; padding: 7px 12px; border-radius: 14px; background: #fff3d61a; border: 1px solid #5fe8d966; color: #e8fffb; font-style: italic; font-size: 14.5px; line-height: 1.3; min-height: 1.3em; transition: opacity .6s; }
.bz-say.pop { animation: bzsay .35s ease-out; }
.bz-say.dim { opacity: .65; }
@keyframes bzsay { from { transform: scale(.97); background: #5fe8d944; } to { transform: none; } }
.bz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.bz-tab { font: 700 clamp(11px, 3.1vw, 14px) 'LumCinzel', Georgia, serif; color: #e9dcff; background: linear-gradient(#3b2370, #2a1752); border: 1px solid #8c6bd0; border-radius: 14px; padding: 9px 2px; min-height: 42px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-tab.on { color: #1e1033; background: linear-gradient(#ffe7a8, #e1b45a); border-color: #fff2c4; box-shadow: 0 0 12px #f6c46a88; }
.bz-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 2px 2px 4px; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
@media (min-aspect-ratio: 1/1) and (min-width: 620px) { .bz-list { grid-template-columns: 1fr 1fr; } }
.bz-card { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 4px 10px; padding: 9px 10px; border-radius: 16px;
  background: linear-gradient(160deg, #fbf0d4, #ecd7a6 70%, #e2c48a); color: #3a2410; border: 1px solid #b98a3c; box-shadow: inset 0 0 18px #b9873c55, 0 2px 0 #0006; }
.bz-card.bz-fixed { background: linear-gradient(160deg, #e3fbf6, #b9ece2 70%, #9bdcd0); border-color: #3fb3aa; }
.bz-ico { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 14px; background: #2a1550 center/cover no-repeat; border: 2px solid #c99a45; box-shadow: 0 0 10px #8f5cff55; }
.bz-imp { background: radial-gradient(circle at 50% 45%, #c9fff8, #2fd0c4 50%, #127a80); position: relative; }
.bz-imp::after { content: "»"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 34px system-ui; color: #fff; text-shadow: 0 1px 3px #0a4a50; }
.bz-body { min-width: 0; }
.bz-name { display: block; font: 700 15.5px 'LumCinzel', Georgia, serif; color: #4a1f6e; }
.bz-desc { margin: 2px 0 3px; font-size: 13.5px; line-height: 1.28; color: #4b3418; }
.bz-st { display: inline-block; font: 700 11.5px system-ui, sans-serif; padding: 2px 8px; border-radius: 10px; background: #5b3a8a22; color: #4a1f6e; border: 1px solid #8a63c066; }
.bz-st.on { background: #17b3a8; color: #fff; border-color: #0d7c74; box-shadow: 0 0 8px #3fe0d488; }
.bz-act { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bz-price { font: 800 16px system-ui, sans-serif; color: #3a1d5c; display: flex; align-items: center; }
.bz-own { font: italic 13px 'LumFell', Georgia, serif; color: #6a4a20; }
.bz-buy, .bz-eq { font: 800 14px system-ui, sans-serif; color: #fff; min-height: 40px; min-width: 104px; padding: 8px 14px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(#5d3aa8, #3b2178); border: 2px solid #e1b45a; box-shadow: 0 2px 0 #1d0e3a, 0 0 10px #8f5cff55; }
.bz-buy:active, .bz-eq:active { transform: translateY(1px) scale(.97); }
.bz-buy.confirm { background: linear-gradient(#25d1c3, #128c86); border-color: #fff1c0; animation: bzpulse .9s ease-in-out infinite; }
@keyframes bzpulse { 50% { box-shadow: 0 2px 0 #0b4a46, 0 0 18px #4ff0e4; } }
.bz-buy.poor { background: linear-gradient(#7a6a8e, #574a6a); border-color: #b8a27a; }
.bz-buy:disabled { opacity: .5; }
.bz-eq { background: linear-gradient(#24c2b6, #127e78); }
.bz-eq.on { background: linear-gradient(#efe2c0, #cdb47e); color: #3a2410; }
.bz-card.shake { animation: bzshake .4s; }
@keyframes bzshake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.bz-card.bought { animation: bzbought .9s ease-out; }
@keyframes bzbought { 0% { box-shadow: 0 0 0 0 #4ff0e4, 0 0 30px #f6d68a; } 100% { box-shadow: inset 0 0 18px #b9873c55, 0 2px 0 #0006; } }
.bz-foot { margin: 6px 4px 0; font-size: 12.5px; color: #cdb9ef; line-height: 1.25; }
.bz-empty { margin: 8px; font-size: 14px; color: #f0e2ff; }
.bag-panel { width: min(460px, 100%); }
@media (max-height: 460px) { .bz-say { display: none; } .bz-panel { padding: 8px 10px 6px; } .bz-tabs { margin-bottom: 5px; } .bz-tab { min-height: 36px; padding: 6px 2px; } .bz-foot { display: none; } }

/* the in-world prompt over the counter */
#bzprompt { position: fixed; left: 0; top: 0; z-index: 4; display: none; font: 700 15px 'LumCinzel', Georgia, serif; color: #2a1250; padding: 9px 16px 9px 38px; border-radius: 20px;
  background: linear-gradient(#fff4d4, #f0d08a); border: 2px solid #8a5cd0; box-shadow: 0 0 14px #5ff0e4aa, 0 3px 8px #0007; cursor: pointer; white-space: nowrap; min-height: 42px; }
#bzprompt::before { content: ""; position: absolute; left: 10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle, #8ff7ee, #2fbfc0 55%, #13525f); box-shadow: 0 0 8px #5ff0e4; }
#bzprompt.on { display: block; animation: bzprompt 1.8s ease-in-out infinite; }
@keyframes bzprompt { 50% { box-shadow: 0 0 22px #5ff0e4, 0 3px 8px #0007; } }

/* the bag button and the extra ability button */
#bagbtn { display: none; position: fixed; z-index: 3; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 108px); width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #e1b45a; background: radial-gradient(circle at 50% 40%, #6a44b0, #2f1a5c); box-shadow: 0 2px 8px #0007; cursor: pointer; padding: 0; }
#bagbtn .bg-ico { position: absolute; left: 50%; top: 52%; width: 22px; height: 20px; transform: translate(-50%, -50%); background: #e9c27a; border-radius: 4px 4px 9px 9px; box-shadow: inset 0 -4px 0 #b88a3c; }
#bagbtn .bg-ico::before { content: ""; position: absolute; left: 4px; right: 4px; top: -6px; height: 7px; border: 2px solid #e9c27a; border-bottom: 0; border-radius: 7px 7px 0 0; }
#bagbtn .bg-ico::after { content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #5ff0e4; box-shadow: 0 0 5px #5ff0e4; }
#bagbtn .bg-n { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #17b3a8; color: #fff; font: 800 11px/18px system-ui, sans-serif; border: 1px solid #fff; }
#bagbtn .bg-n:empty { display: none; }
#bagbtn.shield { box-shadow: 0 0 0 3px #5ff0e488, 0 2px 8px #0007; }
body.nilo[data-world="plaza"] #bagbtn, body.nilo[data-world="level1"] #bagbtn { display: block; }
body.explore #bagbtn, body.explore #abbtn { display: none !important; }

#abbtn { display: none; position: fixed; z-index: 3; width: 66px; height: 66px; border-radius: 50%; padding: 0; cursor: pointer; border: 3px solid #e1b45a;
  right: calc(max(16px, env(safe-area-inset-right)) + 104px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 30px);
  background: #2a1550 center/cover no-repeat; box-shadow: 0 0 12px #5ff0e477, 0 3px 10px #0008; touch-action: none; }
#abbtn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; background: conic-gradient(#0b0620cc calc((1 - var(--k, 1)) * 360deg), transparent 0); }
#abbtn.cool { filter: saturate(.6); }
#abbtn.off { filter: grayscale(.85) brightness(.7); border-color: #9a8a6a; }
#abbtn.press { transform: scale(.9); }
#abbtn.has { display: block; }
body:not(.nilo) #abbtn, body[data-world="sanct"] #abbtn { display: none !important; }
body[data-world="plaza"] #abbtn { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 96px); right: calc(max(22px, env(safe-area-inset-right)) + 104px); }
@media (pointer: fine) { #abbtn { width: 58px; height: 58px; right: 118px; bottom: 34px; } }

/* screen-edge glows: Visión Arcana (turquoise), Luz Purificadora (warm light), the guidance artifacts */
#fxveil { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s; }
#fxveil.vision { opacity: 1; box-shadow: inset 0 0 90px 10px #2fe6d888; }
#fxveil.light { opacity: 1; box-shadow: inset 0 0 120px 20px #fff2c066; }
#fxhint { position: fixed; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 130px); transform: translateX(-50%); z-index: 3; pointer-events: none; display: none;
  font: 700 14px 'LumFell', Georgia, serif; color: #fff; background: #1a0f36d9; border: 1px solid #5fe8d9; border-radius: 16px; padding: 6px 14px; white-space: nowrap; }
#fxhint.on { display: block; }
/* narrow screens: the four categories in two rows, every name whole */
@media (max-width: 480px) { .bz-tabs { grid-template-columns: repeat(2, 1fr); } .bz-tab { font-size: 13px; min-height: 38px; padding: 7px 4px; text-overflow: clip; } }

/* the marketplace: "Hablar" over the fruit merchant, and the talk box */
#mktalk { position: fixed; left: 0; top: 0; z-index: 4; display: none; font: 700 15px 'LumCinzel', Georgia, serif; color: #2a1250; padding: 9px 18px 9px 40px; border-radius: 20px;
  background: linear-gradient(#fff4d4, #f0d08a); border: 2px solid #4f9a3a; box-shadow: 0 0 14px #ffd27aaa, 0 3px 8px #0007; cursor: pointer; white-space: nowrap; min-height: 44px; }
#mktalk::before { content: ""; position: absolute; left: 11px; top: 50%; width: 20px; height: 18px; margin-top: -10px; border-radius: 50% 50% 50% 10%; background: radial-gradient(circle at 40% 40%, #fffbe8, #b4e07a 60%, #4f9a3a); box-shadow: 0 0 6px #ffe7a0; }
#mktalk.on { display: block; animation: mktalk 2s ease-in-out infinite; }
@keyframes mktalk { 50% { box-shadow: 0 0 22px #ffd27a, 0 3px 8px #0007; } }
#mkdlg { position: fixed; z-index: 6; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 12px); transform: translate(-50%, 20px); width: min(560px, calc(100vw - 20px));
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#mkdlg.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#mkdlg .mk-frame { position: relative; padding: 22px 18px 12px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(#fbf1d6, #ecd9a8); border: 3px solid #b8893a; outline: 2px solid #4a2a7a; outline-offset: 2px;
  box-shadow: inset 0 0 22px #b9873c66, 0 0 0 6px #2a124f55, 0 8px 24px #000a; }
#mkdlg .mk-name { position: absolute; left: 16px; top: -16px; padding: 4px 14px; border-radius: 12px; font: 700 15px 'LumCinzel', Georgia, serif; letter-spacing: .04em;
  color: #fff6dc; background: linear-gradient(#6a9a3a, #3f6e22); border: 2px solid #e8c56a; box-shadow: 0 2px 6px #0006; }
#mkdlg[data-who="a"] .mk-name { background: linear-gradient(#3fb8c8, #1f7a92); }
#mkdlg .mk-text { min-height: 3.9em; font: 18px/1.4 'LumFell', Georgia, serif; color: #2e1a10; }
#mkdlg .mk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font: 600 12.5px 'LumCinzel', Georgia, serif; color: #7a5420; }
#mkdlg .mk-next::after { content: " \25B8"; display: inline-block; animation: mknext 1.1s ease-in-out infinite; }
@keyframes mknext { 50% { transform: translateX(4px); } }
#mkdlg .mk-x { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; border: 0; background: none; font: 700 22px Georgia, serif; color: #7a5420; cursor: pointer; }
@media (max-width: 420px) { #mkdlg .mk-text { font-size: 16.5px; } }

/* ---------- the quick-select menu (quick.js): one round button at the right edge, Usar under it, a strip beside it ---------- */
#qs { display: none; position: fixed; z-index: 4; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 124px); width: 52px; }
body.nilo[data-world="plaza"] #qs, body.nilo[data-world="level1"] #qs { display: block; }
body[data-world="level1"] #qs { top: calc(max(8px, env(safe-area-inset-top)) + 60px); }
body.explore #qs { display: none !important; }
#qsbtn { position: relative; display: block; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  border: 2px solid #d9ae5c; background: radial-gradient(circle at 50% 38%, #4a2c86f0, #1e0f3ef0 72%); box-shadow: 0 0 0 1px #5ff0e455 inset, 0 3px 9px #0008; transition: transform .12s; }
#qsbtn .qs-ic { position: absolute; inset: 5px; background: center/contain no-repeat; filter: drop-shadow(0 1px 2px #0009); }
#qsbtn.empty .qs-ic { inset: 0; background: none; }
#qsbtn.empty .qs-ic::before { content: ""; position: absolute; left: 50%; top: 54%; width: 22px; height: 19px; transform: translate(-50%, -50%); background: #e9c27a; border-radius: 4px 4px 9px 9px; box-shadow: inset 0 -4px 0 #b88a3c; opacity: .8; }
#qsbtn.empty .qs-ic::after { content: ""; position: absolute; left: 50%; top: 22%; width: 12px; height: 7px; transform: translateX(-50%); border: 2px solid #e9c27a; border-bottom: 0; border-radius: 7px 7px 0 0; opacity: .8; }
.qs .qs-n { position: absolute; right: -5px; bottom: -4px; min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: #14a69c; color: #fff;
  font: 800 11px/17px system-ui, sans-serif; border: 1px solid #e8fffb; text-align: center; pointer-events: none; }
.qs .qs-n:empty { display: none; }
#qsbtn.shield { box-shadow: 0 0 0 3px #5ff0e488, 0 0 14px #5ff0e4aa, 0 3px 9px #0008; }
#qsbtn:active { transform: scale(.92); }
#qsbtn.picked { animation: qspick .35s ease-out; }
#qsbtn.used { animation: qsused .5s ease-out; }
#qsbtn.no { animation: qsno .32s ease-in-out; }
@keyframes qspick { 40% { box-shadow: 0 0 0 3px #5ff0e4, 0 0 16px #5ff0e4; } }
@keyframes qsused { 30% { transform: scale(1.12); box-shadow: 0 0 0 3px #ffe08a, 0 0 22px #ffd76a; } }
@keyframes qsno { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#qsuse { display: block; width: 52px; height: 32px; margin-top: 6px; padding: 0; border-radius: 16px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  border: 1.5px solid #d9ae5c; background: linear-gradient(#2fc9bd, #128a86); color: #fff; font: 800 11.5px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 1px 2px #064a4a; box-shadow: 0 2px 7px #0007; transition: transform .1s, filter .2s; }
#qsuse:active { transform: scale(.92); }
#qsuse.off, #qsuse:disabled { filter: grayscale(.8) brightness(.75); }
/* the strip: beside the button (a column on tall screens, a row on short ones), at most five icons in view, the rest scroll */
.qs-strip { position: absolute; right: 60px; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 16px;
  background: #1c0d3ae6; border: 1px solid #d9ae5c99; box-shadow: 0 0 0 1px #5ff0e422 inset, 0 4px 14px #000a;
  opacity: 0; visibility: hidden; transform: translateX(10px) scale(.94); transform-origin: right top; transition: opacity .16s, transform .16s, visibility 0s .16s; }
.qs.open .qs-strip { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.qs-row { display: flex; flex-direction: column; gap: 6px; max-height: 254px; overflow: auto; scrollbar-width: none; padding: 2px; }
.qs-row::-webkit-scrollbar { display: none; }
.qs-slot { position: relative; flex: none; width: 46px; height: 46px; padding: 0; border-radius: 12px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  border: 1.5px solid #b08a48; background: #2a1550 center/82% no-repeat; box-shadow: 0 2px 5px #0006; transition: box-shadow .15s, transform .1s; }
.qs-slot:active { transform: scale(.92); }
.qs-slot.on { border-color: #8ff7ee; box-shadow: 0 0 0 2px #5ff0e4, 0 0 12px #5ff0e4aa; }
.qs-slot.dim { filter: saturate(.45) brightness(.7); }
.qs-slot .qs-n { right: -4px; bottom: -4px; min-width: 17px; height: 17px; font-size: 10px; line-height: 15px; }
.qs-x { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid #d9ae5c88; background: #2a1550; color: #ffe9b0; font: 700 18px/26px system-ui, sans-serif; cursor: pointer; }
.qs-strip.empty { flex-direction: row; align-items: center; top: 58px; transform-origin: right center; }   /* below the level panel, never over it */
.qs-strip.empty .qs-row { flex-direction: row; }
.qs-empty { margin: 0 2px 0 6px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; color: #ffe9b0; text-align: left; }
.qs-empty b { font: 700 13px/1.2 system-ui, sans-serif; color: #ffe08a; }
.qs-empty span { font: 500 11.5px/1.25 system-ui, sans-serif; color: #e8ddff; }
@media (max-height: 560px) {
  .qs-strip { flex-direction: row; }
  .qs-row { flex-direction: row; max-height: none; max-width: 254px; }
}
/* small magical motes when an item is used */
.qs-fx { position: absolute; left: 26px; top: 26px; width: 0; height: 0; pointer-events: none; }
.qs-fx i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff6cf; box-shadow: 0 0 6px #ffd76a, 0 0 10px #5ff0e4; animation: qsmote .7s ease-out both; }
@keyframes qsmote { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
/* the settings page for the quick menu: tap controls only */
.qsc { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.qsc-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: #ffffff0f; border: 1px solid #ffd76a33; }
.qsc-row.hid { opacity: .55; }
.qsc-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #2a1550 center/84% no-repeat; border: 1px solid #b08a48; }
.qsc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qsc-name b { font-size: 13.5px; } .qsc-name small { font-size: 11px; opacity: .75; }
.qsc-ctl { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
#menu .qsc-b { width: auto; min-width: 38px; height: 36px; margin: 0; padding: 0 8px; font: 700 13px system-ui, sans-serif; color: #fff; background: #3b3180; border: 1px solid #8f7fe0; border-radius: 10px; }
#menu .qsc-b:disabled { opacity: .35; }