/* Grow!n - look and feel. It copies Grow!'s screens; where Grow! is yellow, Grow!n is blurple (--acc).
   Every size is in em: main.js sets the font size of #app so that the column is always 30em wide (480px = 16px). */
:root {
  --acc: #8f7dff;          /* the blurple */
  --acc-dim: #5b4bd6;
  --acc-bg: #1d1a33;       /* a row that is bought / chosen */
  --ink: #1d1750;          /* outline of blurple words on the field */
  --bg: #0d0d0e;
  --panel: #1b1b1d;
  --panel2: #2b2b2e;
  --line: #3a3a3f;
  --text: #f2f2f2;
  --dim: #9b9ba3;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); overflow: hidden;
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
#app { position: absolute; top: 0; bottom: 0; left: 50%; overflow: hidden; background: var(--bg); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud, #menu, #screen, #overlay { position: absolute; inset: 0; }
#hud { pointer-events: none; }
#hud button, #hud .click { pointer-events: auto; }
.ico { display: block; flex: none; }

/* words that sit straight on the field: light with a dark outline, like Grow! */
.ol { color: var(--acc); -webkit-text-stroke: 0.14em var(--ink); paint-order: stroke fill; }
.ol.grey { color: #dedede; -webkit-text-stroke: 0.14em #4a4a4c; }

/* ---- the four tabs and the three currencies ---- */
.tabs { display: flex; gap: 0.18em; }
.tab { height: 2.35em; padding: 0 0.55em; font-size: 0.68em; font-weight: 600; background: var(--panel2); border-radius: 0.2em; letter-spacing: 0.02em; }
.tab.a { color: var(--acc); }
.tab.on { box-shadow: inset 0 0 0 0.12em var(--acc); }
.topbar { position: absolute; top: 0; left: 0; right: 0; padding: 1.9em 0.45em 0; display: flex; justify-content: space-between; align-items: flex-start; z-index: 3; }
.wallet { text-align: right; font-size: 0.6em; line-height: 1.38; }
.wallet .e { color: var(--acc); }

/* ---- home ---- */
#menu { background: #0a0a0b; }
.title { position: absolute; top: 8.6em; left: 0; right: 0; text-align: center; font-size: 5.4em; font-weight: 700; letter-spacing: -0.01em; line-height: 1; top: 1.55em; }
.title small { display: block; font-size: 0.19em; font-weight: 400; letter-spacing: 0; margin-top: 0.2em; padding-left: 9.5em; }
.sun { position: absolute; top: 18.3em; left: 50%; width: 6.6em; height: 6.6em; margin-left: -3.3em; border-radius: 50%;
  background: radial-gradient(circle, #b9adff 0 26%, var(--acc) 27% 34%, rgba(143,125,255,0.55) 35% 42%, rgba(143,125,255,0.28) 43% 50%, rgba(143,125,255,0.1) 51% 58%, rgba(143,125,255,0) 66%); animation: sun 3.2s ease-in-out infinite; }
@keyframes sun { 50% { transform: scale(1.07); } }
.play { position: absolute; top: 30.2em; left: 50%; width: 9.2em; margin-left: -4.6em; height: 2.2em; background: #505053; border-radius: 0.18em; font-size: 1em; letter-spacing: 0.03em; }
.play:active { background: #6a6a6e; }
.idle { position: absolute; top: 33.2em; left: 0; right: 0; text-align: center; }
.idle .rate { font-size: 0.5em; color: var(--acc); }
.idle .ibar { position: relative; width: 8.4em; height: 0.95em; margin: 0.25em auto; background: #2a2a2d; border-radius: 0.15em; overflow: hidden; font-size: 1em; }
.idle .ibar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); }
.idle .ibar span { position: relative; font-size: 0.48em; line-height: 2; display: block; }
.collect { width: 5.8em; height: 1.45em; background: var(--acc); color: #101010; border-radius: 0.15em; font-size: 1em; }
.collect span { font-size: 0.55em; font-weight: 600; }
.collect[disabled] { visibility: hidden; }
.side-r { position: absolute; right: 0.45em; bottom: 6.2em; width: 5.4em; display: flex; flex-direction: column; gap: 0.35em; align-items: stretch; text-align: center; }
.side-r .ev { background: var(--panel2); border-radius: 0.15em; padding: 0.2em 0.3em; font-size: 0.45em; text-align: left; line-height: 1.3; }
.side-r .ev b { color: var(--acc); font-weight: 600; display: block; }
.side-r .ghost { height: 2.6em; font-size: 0.5em; border: 0.14em solid #cfcfcf; border-radius: 0.3em; background: #1c1c2a; }
.side-r .ghost.a { border-color: var(--acc); background: #15131f; }
.side-r .ghost[disabled] { opacity: 0.4; }
.side-r .note { font-size: 0.42em; color: var(--acc); }
.side-l { position: absolute; left: 0.45em; bottom: 6.4em; font-size: 0.5em; color: var(--dim); line-height: 1.5; }
.side-l b { display: inline-block; background: var(--panel2); color: var(--text); font-size: 1.7em; font-weight: 500; padding: 0.15em 0.5em; border-radius: 0.2em; margin-bottom: 0.3em; }
.credit { position: absolute; left: 0.45em; right: 0.45em; bottom: 5em; display: flex; justify-content: space-between; font-size: 0.45em; color: #77777d; }
.nav { position: absolute; left: 0; right: 0; bottom: 0; height: 4.6em; display: flex; background: #151516; z-index: 4; }
.nav button { flex: 1; font-size: 1.5em; color: #8d8d92; display: flex; align-items: center; justify-content: center; }
.nav button.on { box-shadow: inset 0 0 0 0.07em var(--acc); background: #1d1a33; color: #fff; }
.nav svg { width: 1em; height: 1em; }

/* ---- the screens behind the tabs ---- */
#screen { background: #111112; display: flex; flex-direction: column; padding-top: 5.2em; }
#screen .scroll { flex: 1; overflow-y: auto; padding: 0.3em 0.6em 0.6em; touch-action: pan-y; }
#screen .scroll::-webkit-scrollbar { width: 0.25em; }
#screen .scroll::-webkit-scrollbar-thumb { background: #55555a; border-radius: 0.2em; }
.foot { display: flex; justify-content: space-between; align-items: center; padding: 0.45em 0.6em 0.7em; gap: 0.5em; }
.foot.nav-gap { padding-bottom: 5.2em; }
.fbtn { min-width: 4.4em; height: 1.6em; padding: 0 0.7em; background: #333336; border-radius: 0.25em; }
.fbtn span, .fbtn { font-size: 0.55em; }
.fbtn { font-size: 1em; } .fbtn > span { font-size: 0.55em; }
.h1 { text-align: center; color: var(--acc); font-size: 0.95em; letter-spacing: 0.05em; margin: 0.3em 0 0.6em; }
.note-box { background: var(--panel); border-radius: 0.3em; padding: 0.8em; font-size: 0.7em; line-height: 1.5; color: #d5d5d8; margin-bottom: 0.6em; }
.note-box b { color: var(--acc); }

/* Absolute */
.grp { font-size: 0.5em; color: #c9c9cc; letter-spacing: 0.05em; margin: 1.1em 0 0.5em 0.4em; }
.abs { display: block; width: 100%; text-align: left; background: #17171a; border-left: 0.16em solid var(--acc); padding: 0.75em 0.8em 0.45em; margin-bottom: 0.15em; }
.abs .r1 { display: flex; justify-content: space-between; font-size: 0.72em; }
.abs .r1 b { color: var(--acc); font-weight: 500; }
.segs { display: flex; gap: 0.12em; margin: 0.55em 0 0.3em; }
.segs i { flex: 1; height: 0.32em; background: #3a3a3f; }
.segs i.f { background: var(--acc); }
.abs .r3 { text-align: right; font-size: 0.48em; color: #b9b9be; height: 1.4em; }
.abs.max .r3 { color: var(--acc); }
.abs-total { text-align: center; margin: 1em 0 0.4em; font-size: 0.6em; }
.abs-total small { display: block; color: var(--dim); font-size: 0.8em; margin-top: 0.3em; }

/* Endergy pages */
.pg { text-align: center; font-size: 0.8em; color: #e6e6e6; margin: 0.9em 0 0.5em; }
.pg.mine { color: var(--acc); }
.el { display: flex; align-items: center; width: 100%; padding: 0 0.6em; height: 2.05em; border-top: 0.06em solid #242427; text-align: left; }
.el .n { flex: 1; font-size: 0.56em; }
.el .pips { display: flex; gap: 0.1em; margin-right: 1.3em; }
.el .pips i { width: 0.5em; height: 0.36em; background: #3a3a3f; }
.el .pips i.f { background: var(--acc); }
.el .c { width: 2.2em; font-size: 0.45em; color: #9b9ba3; text-align: center; }
.el .p { width: 5em; font-size: 0.46em; text-align: right; color: var(--acc); }
.el.max { background: var(--acc-bg); box-shadow: inset 0.1em 0 0 var(--acc); }
.el.max .n, .el.max .p { color: var(--acc); }
.el.max .c { color: var(--text); }
.pk { display: flex; align-items: center; width: 100%; padding: 0.7em 0.9em; margin: 0.25em 0; background: #161618; text-align: left; box-shadow: inset 0.12em 0 0 #333; }
.pk .n { flex: 1; }
.pk .n b { display: block; font-size: 0.78em; font-weight: 500; }
.pk .n span { display: block; font-size: 0.5em; color: #d0d0d4; margin-top: 0.4em; }
.pk .p { font-size: 0.6em; color: var(--acc); }
.pk.max { background: var(--acc-bg); box-shadow: inset 0.12em 0 0 var(--acc); }
.pk.max .n b, .pk.max .p { color: var(--acc); }
.el.no .p, .pk.no .p { color: #7d7d84; }
.unlock { margin: 1em 0.2em; }
.unlock .ub { position: relative; height: 1.1em; background: #2a2a2d; border-radius: 0.15em; overflow: hidden; }
.unlock .ub i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); }
.unlock .ub span { position: relative; display: block; text-align: center; font-size: 0.48em; line-height: 2.3; color: #111; font-weight: 700; }
.unlock small { display: block; text-align: center; color: #8a8a90; font-size: 0.45em; margin-top: 0.9em; }
.buy-end { position: absolute; top: 5em; left: 50%; transform: translateX(-50%); z-index: 2; background: #1c1c1e; border-bottom: 0.1em solid var(--acc); border-radius: 0.3em; padding: 0.5em 2.2em 0.6em; }
.buy-end span { font-size: 0.55em; color: var(--acc); }

/* Matter shop */
.folder { display: flex; align-items: center; width: 100%; height: 2.35em; margin-bottom: 0.55em; border: 0.1em solid var(--acc); border-radius: 0.3em; background: #131314; padding: 0 0.6em; }
.folder .sh { width: 1.5em; height: 1.5em; background: var(--acc-dim); }
.folder .sh.matrix { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.folder .sh.core { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.folder .sh.heart { clip-path: polygon(20% 10%, 80% 10%, 100% 45%, 50% 100%, 0 45%); }
.folder .n { flex: 1; text-align: center; color: var(--acc); font-size: 0.85em; }
.folder .ar { font-size: 0.7em; }
.folder.small { height: 2.1em; }
.folder.small .n { text-align: left; font-size: 0.6em; padding-left: 1.2em; }
.it { display: flex; align-items: center; background: #2a2a2c; border-radius: 0.3em; padding: 0.35em 0.4em 0.35em 0.6em; margin-bottom: 0.3em; min-height: 3.9em; }
.it .pic { width: 2.6em; height: 2.6em; background: #1b1b1d; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; margin-right: 0.9em; flex: none; }
.it .d { flex: 1; min-width: 0; }
.it .d b { display: block; font-size: 0.62em; color: var(--acc); font-weight: 500; }
.it .d span { display: block; font-size: 0.41em; color: #d8d8dc; line-height: 1.55; }
.it .d em { display: block; font-style: normal; font-size: 0.4em; color: var(--acc); line-height: 1.5; }
.it .buy { width: 3.7em; align-self: stretch; background: #3a3a3d; border-radius: 0.25em; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.it .buy b { font-size: 0.5em; color: var(--acc); font-weight: 500; }
.it .buy span { font-size: 0.38em; color: #bdbdc2; }
.it .buy.no b { color: #88888e; }
.it .buy.own b { color: #d8d8dc; }

/* Entity */
.stats { background: #232325; border-radius: 0.3em; padding: 0.55em 0.7em 0.7em; margin-bottom: 0.7em; }
.stats .big { display: flex; justify-content: space-around; font-size: 0.72em; padding-bottom: 0.45em; border-bottom: 0.06em solid #44444a; }
.stats .big span { color: var(--acc); margin-right: 0.4em; }
.stats .four { display: flex; justify-content: space-around; font-size: 0.62em; margin: 0.6em 0; }
.stats .four span, .stats .grid span { color: #9b9ba3; margin-right: 0.45em; }
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em 0; font-size: 0.42em; text-align: center; }
.stats .absbox { border: 0.08em solid var(--acc); border-radius: 0.3em; margin-top: 0.8em; padding: 0.35em 0 0.45em; text-align: center; }
.stats .absbox small { display: block; font-size: 0.4em; letter-spacing: 0.04em; }
.stats .absbox div { display: flex; justify-content: space-around; font-size: 0.42em; color: var(--acc); margin-top: 0.5em; }
.stats .absbox div span { color: #c9c9cd; margin-right: 0.4em; }
.sets { display: flex; justify-content: center; gap: 0.4em; margin-bottom: 0.6em; }
.setb { width: 3.7em; height: 1.4em; background: #3a3a3d; border-radius: 0.2em; }
.setb span { font-size: 0.42em; font-weight: 600; }
.setb.on { box-shadow: inset 0 0 0 0.09em var(--acc); color: var(--acc); }
.setb.stand { color: var(--acc); background: #1c1c1e; box-shadow: inset 0 0 0 0.06em var(--acc-dim); }
.setb[disabled] { opacity: 0.35; }
.slot { display: flex; align-items: center; width: 100%; min-height: 4em; padding: 0.4em 0.6em; margin-bottom: 0.55em; border: 0.1em solid var(--acc); border-radius: 0.35em; background: #232325; text-align: left; }
.slot.empty { border-color: transparent; background: #1c1c1e; }
.slot .pic { width: 2.8em; height: 2.8em; display: flex; align-items: center; justify-content: center; margin-right: 0.8em; flex: none; }
.slot small { display: block; font-size: 0.36em; color: #a9a9af; letter-spacing: 0.05em; }
.slot b { display: block; font-size: 0.66em; color: var(--acc); font-weight: 500; margin: 0.15em 0; }
.slot.empty b { color: var(--text); font-size: 0.55em; }
.slot span { display: block; font-size: 0.4em; color: #dcdce0; line-height: 1.5; }
.slot em { display: block; font-style: normal; font-size: 0.38em; color: var(--acc); }
.els { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.els .slot { margin: 0; min-height: 2.6em; padding: 0.3em 0.45em; }
.els .slot .pic { width: 1.7em; height: 1.7em; margin-right: 0.5em; }
.els .slot b { font-size: 0.48em; }
.els .slot span { font-size: 0.34em; }
.subh { font-size: 0.62em; margin: 0.7em 0 0.5em; }
.equip { width: 3.3em; align-self: stretch; background: #3a3a3d; border-radius: 0.25em; }
.equip span { font-size: 0.45em; }
.equip.on span { color: var(--acc); }

/* ---- the run ---- */
.h-tier { position: absolute; top: 2.15em; left: 1.5em; right: 1.5em; display: flex; justify-content: space-between; font-size: 1.12em; font-weight: 700; }
.h-bar { position: absolute; top: 4.05em; left: 0.6em; right: 0.6em; height: 0.6em; background: #343437; border-radius: 0.15em; overflow: hidden; }
.h-bar i { display: block; height: 100%; width: 0; background: var(--acc); }
.h-lv { position: absolute; top: 5.05em; left: 0.9em; right: 0.6em; display: flex; align-items: center; justify-content: space-between; }
.h-lv .lv { font-size: 1.5em; white-space: nowrap; letter-spacing: -0.02em; }
.h-lv .gain { position: absolute; left: 7.4em; top: -0.1em; font-size: 0.95em; font-weight: 800; white-space: nowrap; color: #fff; text-shadow: 0 0 0.15em #000, 0 0.08em 0 #000, 0.08em 0 0 #000, -0.08em 0 0 #000, 0 -0.08em 0 #000; }
.h-lv .tabs .tab { font-size: 0.72em; height: 2.3em; }
.cast { position: absolute; top: 7.9em; left: 0.6em; right: 0.6em; display: flex; gap: 0.7em; align-items: flex-start; }
.cast .col { flex: 1; min-width: 0; background: rgba(52,52,55,0.94); border-radius: 0.25em; padding: 0.15em 0.3em; }
.cast .col:empty { visibility: hidden; }
.cast .row { display: flex; align-items: center; height: 3.05em; }
.cast .row .ico { width: 2em; height: 2em; margin-right: 0.45em; }
.cast .row b { display: block; font-size: 0.92em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast .row span { display: block; font-size: 0.44em; color: #9c9ca2; letter-spacing: 0.03em; }
.cast .row div { min-width: 0; }
.cast .row.boss { box-shadow: inset 0 0 0 0.1em var(--acc); border-radius: 0.2em; background: #17151f; height: 2.2em; padding: 0 0.3em; margin-bottom: 0.2em; }
.cast .row.boss b { font-size: 0.72em; color: var(--acc); }
.h-side { position: absolute; right: 0; width: 1.75em; height: 7.3em; background: #2b2b2e; border: 0.1em solid var(--acc); border-right: 0; border-radius: 0.5em 0 0 0.5em; }
.h-side span { display: block; transform: rotate(-90deg); font-size: 0.5em; font-weight: 700; letter-spacing: 0.04em; color: var(--acc); white-space: nowrap; }
.h-side.q { top: 39.5%; } .h-side.f { top: 50.5%; }
.h-banner { position: absolute; top: 31%; left: 0; right: 0; text-align: center; font-size: 1.45em; font-weight: 700; }
.pops { position: absolute; bottom: 15.2em; left: 50%; width: 15.6em; margin-left: -7.8em; }
.pop { display: flex; align-items: center; background: rgba(48,48,51,0.95); border-radius: 0.25em; padding: 0.25em 0.5em; margin-top: 0.15em; height: 3.1em; }
.pop .ico { width: 2.3em; height: 2.3em; margin: 0 1.6em 0 0.6em; }
.pop b { display: block; font-size: 0.5em; color: var(--acc); font-weight: 500; }
.pop span { display: block; font-size: 0.42em; margin-top: 0.3em; }
.pop span i { font-style: normal; color: var(--acc); margin-right: 0.8em; }
.pop em { display: block; font-style: normal; font-size: 0.36em; color: var(--acc); margin-top: 0.3em; }
.h-dmg { position: absolute; bottom: 13.1em; left: 0; right: 0; text-align: center; font-size: 1.02em; }
.h-sets { position: absolute; bottom: 11.4em; left: 0; right: 0; display: flex; justify-content: center; gap: 0.45em; }
.h-sets .setb { width: 4em; height: 1.45em; background: #77777b; }
.h-sets .setb.on { background: var(--acc); color: #17151f; box-shadow: none; }
.h-slots { position: absolute; bottom: 7.2em; left: 0.9em; right: 0.9em; display: flex; align-items: center; justify-content: space-between; }
.round { width: 3.4em; height: 3.4em; border-radius: 50%; background: #77777b; box-shadow: 0 0 0 0.12em #9a9a9e; }
.round span { font-size: 0.62em; color: var(--acc); font-weight: 600; text-shadow: 0 0 0.2em #000; }
.round[disabled] { opacity: 0.45; }
.round.off { visibility: hidden; }
.atks { display: flex; gap: 0.5em; }
.atk { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0.12em #f6f4ff; display: flex; align-items: center; justify-content: center; color: #17151f; }
.atk span { font-size: 1.15em; line-height: 1; font-weight: 700; }
.atk.empty { background: #b9b9bd; box-shadow: none; opacity: 0.8; }
.atk.star { box-shadow: 0 0 0 0.12em #f6f4ff, 0 0 0.6em var(--acc); background: #b3a8ff; }
.h-hp { position: absolute; bottom: 5.55em; left: 0.6em; right: 0.6em; height: 1.2em; background: #3a3a3d; overflow: hidden; }
.h-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); }
.h-hp span { position: relative; display: block; text-align: center; font-size: 0.78em; line-height: 1.5; }
.h-cur { position: absolute; bottom: 3.75em; left: 0; right: 0; display: flex; justify-content: center; gap: 1.8em; font-size: 1.15em; white-space: nowrap; }
.h-cur .m { color: #fff; }
.h-stats { position: absolute; bottom: 0.95em; left: 4.6em; right: 4.6em; text-align: center; font-size: 0.6em; line-height: 1.65; white-space: nowrap; }
.h-ev, .h-dps { position: absolute; bottom: 0.55em; height: 2.3em; background: #2b2b2e; border-radius: 0.2em; padding: 0 0.7em; }
.h-ev { left: 0.5em; } .h-dps { right: 0.5em; }
.h-ev span, .h-dps span { font-size: 0.88em; }

/* ---- "YOU ARE GROWING!" and the other things that cover the run ---- */
#overlay { background: rgba(26,26,28,0.9); display: flex; flex-direction: column; align-items: center; z-index: 6; }
#overlay.dialog { justify-content: center; background: rgba(0,0,0,0.72); }
.grow { margin-top: 22%; width: 100%; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 14.5em; padding-top: 6em; margin-top: 0; }
.grow h2 { margin: 0; font-size: 1.42em; font-weight: 500; color: var(--acc); letter-spacing: 0.02em; }
.grow p { margin: 1.3em 0 1.2em; font-size: 0.9em; }
.card { display: flex; align-items: center; width: 17.8em; min-height: 3.85em; margin-bottom: 0.95em; padding: 0.5em 0.8em; background: #2a2a2c; border-radius: 0.3em; text-align: left; }
.card .ic { width: 1.6em; font-size: 1.1em; color: var(--acc); text-align: center; margin-right: 0.55em; flex: none; }
.card b { display: block; font-size: 1em; font-weight: 500; color: var(--acc); }
.card b i { font-style: normal; margin-left: 0.5em; }
.card span { display: block; font-size: 0.66em; margin-top: 0.35em; line-height: 1.35; }
.card.lit { background: #1c1b22; box-shadow: inset 0 0 0 0.12em var(--acc); }
.card.banning { box-shadow: inset 0 0 0 0.12em #ff6a5c; }
.gbtns { display: flex; gap: 0.6em; margin-top: 0.1em; }
.gbtn { width: 7.8em; height: 2em; background: #333336; border-radius: 0.3em; }
.gbtn span { font-size: 0.78em; color: var(--acc); }
.gbtn.ban span { color: #c9c9cd; }
.gbtn.on { box-shadow: inset 0 0 0 0.1em #ff6a5c; }
.gbtn[disabled] span { color: #77777d; }
.o-slots { position: absolute; bottom: 7.2em; left: 0; right: 0; display: flex; justify-content: center; }
.o-stats { position: absolute; bottom: 4em; left: 0; right: 0; text-align: center; font-size: 0.66em; line-height: 1.75; }
.chips { position: absolute; bottom: 1.05em; left: 2.7em; right: 2.7em; display: flex; justify-content: center; gap: 0.3em; flex-wrap: wrap; }
.chip { min-width: 2.1em; height: 1.75em; padding: 0 0.35em; border: 0.1em solid var(--acc); border-radius: 0.3em; background: #1c1b22; display: flex; align-items: center; justify-content: center; }
.chip span { font-size: 0.52em; font-weight: 700; color: var(--acc); }
.dlg { width: 21em; max-height: 80%; overflow-y: auto; background: #1e1e20; border: 0.1em solid var(--acc); border-radius: 0.5em; padding: 1em 1em 0.9em; text-align: center; touch-action: pan-y; }
.dlg h3 { margin: 0 0 0.6em; font-size: 1em; font-weight: 500; color: var(--acc); }
.dlg p { margin: 0.4em 0; font-size: 0.66em; line-height: 1.5; }
.dlg .rowl { display: flex; justify-content: space-between; align-items: center; font-size: 0.66em; padding: 0.45em 0.2em; border-top: 0.07em solid #333; text-align: left; }
.dlg .rowl b { color: var(--acc); font-weight: 500; }
.dlg .rowl .barx { flex: 1; height: 0.5em; background: #333; margin: 0 0.8em; }
.dlg .rowl .barx i { display: block; height: 100%; background: var(--acc); }
.dlg .big { font-size: 1.5em; color: var(--acc); margin: 0.2em 0 0.5em; }
.dlg .fbtn { margin-top: 0.8em; }
.dlg textarea { width: 100%; height: 5em; background: #111; color: #ddd; border: 0.07em solid #444; font-size: 0.5em; }
.optrow { display: flex; justify-content: space-between; align-items: center; background: #2a2a2c; border-radius: 0.3em; padding: 0.5em 0.7em; margin-top: 0.4em; text-align: left; }
.optrow b { font-size: 0.7em; font-weight: 500; display: block; }
.optrow span { font-size: 0.5em; color: #bbb; }
.optrow .fbtn { margin: 0; min-width: 5.6em; height: 2em; }
.optrow .fbtn span { color: var(--acc); }

/* ---- second pass: sizes checked against the recordings ---- */
.side-l { bottom: 10.6em; }
.credit { bottom: 10.9em; }
.stats .absbox div { font-size: 1em; margin-top: 0; }
.stats .absbox > div { display: flex; justify-content: space-around; font-size: 0.46em; color: var(--acc); margin-top: 0.5em; }
.it .d b { font-size: 0.72em; }
.it .d span { font-size: 0.46em; }
.it .d em { font-size: 0.44em; }
.it .buy b { font-size: 0.56em; }
.equip span { font-size: 0.56em; }
.slot b { font-size: 0.74em; }
.slot span { font-size: 0.45em; }
.slot em { font-size: 0.42em; }
.slot small { font-size: 0.4em; }
.els .slot b { font-size: 0.5em; }
.els .slot span { font-size: 0.38em; }
.el { height: 2.15em; }
.el .n { font-size: 0.64em; }
.el .c { font-size: 0.5em; }
.el .p { font-size: 0.5em; }
.stats .grid { font-size: 0.47em; }
.h-stats { font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; -webkit-text-stroke-width: 0.11em; }
.h-side { display: flex; align-items: center; justify-content: center; }
.side-r .ev { font-size: 0.5em; }
.side-r .ghost { font-size: 0.56em; }
.side-r .note { font-size: 0.46em; }
.idle .rate { font-size: 0.56em; }
.idle .ibar span { font-size: 0.52em; line-height: 1.85; }