/* Kattaa Raj */
:root {
  --bg: #1b1a12;
  --wood: #3a2a1a;
  --wood2: #2a1e12;
  --wood3: #523b24;
  --brass: #e2b45a;
  --brass2: #a87b2c;
  --ink: #fbefd6;
  --dim: #c9b48e;
  --red: #ff5a45;
  --green: #6be06b;
  --sun: #ff9a1f;
  --sat: #ff7a1a;
  --panel-h: 160px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'Nunito', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body[data-screen="game"] { overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 800; font-size: 16px; line-height: 1.1; }
.btn-main { background: linear-gradient(#ffb43a, #f07b12); color: #2b1300; box-shadow: 0 3px 0 #9c4806, 0 6px 18px rgba(240, 123, 18, .35); font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: .3px; }
.btn-main:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c4806; }
.btn-ghost { background: rgba(255, 236, 200, .08); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255, 220, 160, .28); }
.btn-ghost:hover { background: rgba(255, 236, 200, .14); }
.btn-small { padding: 8px 10px; font-size: 13px; border-radius: 9px; background: rgba(255, 236, 200, .1); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .25); display: inline-flex; gap: 6px; align-items: center; }
.btn-small.ok { background: rgba(107, 224, 107, .16); box-shadow: inset 0 0 0 1px rgba(107, 224, 107, .45); }
.btn-small.bad { background: rgba(255, 90, 69, .16); box-shadow: inset 0 0 0 1px rgba(255, 90, 69, .5); }
.cost { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cost .c { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 12px; }
.cost .c img { width: 16px; height: 16px; border-radius: 3px; }
.cost .c.no { color: var(--red); }

/* ---------- start ---------- */
.start { min-height: 100dvh; background:
  radial-gradient(120% 70% at 50% 0%, rgba(255, 154, 31, .35), transparent 60%),
  radial-gradient(80% 50% at 85% 100%, rgba(214, 55, 43, .22), transparent 70%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 14px, transparent 14px 28px),
  linear-gradient(#2b1c10, #15110b); position: relative; isolation: isolate; }
.start::before { content: ""; position: fixed; inset: -24px; z-index: -2; background: #2b1c10 url(../img/title-bg.webp) center 40% / cover no-repeat; filter: blur(3px) saturate(1.05); transform: scale(1.04); }
.start::after { content: ""; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(70% 60% at 50% 45%, rgba(20, 13, 6, .62), rgba(20, 13, 6, .35) 70%, rgba(20, 13, 6, .55)),
  linear-gradient(rgba(20, 13, 6, .35), transparent 30%, transparent 70%, rgba(20, 13, 6, .7)); }
@media (max-width: 900px) { .start::before { background-image: url(../img/title-bg-900.webp); } }
.start .kicker, .start .title, .start .lede, .start .endless-lede, .start .fine, .start .rv-note { text-shadow: 0 2px 10px rgba(0, 0, 0, .75); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l)); }
.topbar .logo img { height: 30px; width: auto; display: block; }
.top-fill { flex: 1; }
.icon-btn { border: 0; background: rgba(255, 255, 255, .08); border-radius: 10px; width: 40px; height: 40px; font-size: 18px; }
.start-wrap { max-width: 760px; margin: 0 auto; padding: 18px 18px 40px; text-align: center; }
.kicker { margin: 10px 0 0; color: var(--brass); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
.title { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(54px, 13vw, 104px); line-height: .95; margin: 6px 0 12px; color: #fff3dd; text-shadow: 0 4px 0 #6b3a0f, 0 10px 30px rgba(0, 0, 0, .5); }
.title span { color: var(--sun); }
.lede { font-size: 17px; line-height: 1.5; color: #f1dfbd; max-width: 600px; margin: 0 auto 14px; }
.start-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cont-btn { display: block; margin: 0 auto 14px; font-size: 20px; padding: 12px 28px; max-width: 100%; }
.cont-btn[hidden] { display: none; }
.fine { color: #9f8b69; font-size: 12px; margin-top: 22px; }
.fine a { color: inherit; }

/* ---------- game layout ---------- */
#game { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; }
.view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.view[data-mode="amove"] #cv, .view[data-mode="rally"] #cv { cursor: crosshair !important; }

.hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l)); pointer-events: none;
  background: linear-gradient(rgba(20, 13, 6, .82), rgba(20, 13, 6, .55) 70%, transparent); }
.hud-top > * { pointer-events: auto; }
.res { display: flex; gap: 6px; flex-wrap: wrap; }
.rs { display: inline-flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .45); border-radius: 9px; padding: 3px 9px 3px 3px; box-shadow: inset 0 0 0 1px rgba(226, 180, 90, .35); cursor: help; }
.rs img { width: 22px; height: 22px; border-radius: 6px; }
.rs > span { display: flex; flex-direction: column; line-height: 1; }
.rs b { font-weight: 900; font-size: 15px; min-width: 30px; font-variant-numeric: tabular-nums; }
.rs i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #e8c98a; margin-top: 1px; }
.rs.full b { color: var(--red); }
.hud-mid { margin: 0 auto; text-align: center; line-height: 1.1; text-shadow: 0 1px 2px #000; }
.hud-mid b { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; color: var(--brass); font-size: 15px; }
.hud-mid span { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.hud-btns { display: flex; gap: 6px; }
.hb { border: 0; display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(226, 180, 90, .4); border-radius: 9px; height: 34px; padding: 0 10px; }
.hb i { font-style: normal; font-weight: 800; font-size: 13px; }

.log { position: absolute; left: calc(8px + var(--safe-l)); top: 46px; max-width: min(460px, 58%); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.msg { pointer-events: none; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: rgba(15, 10, 5, .72); border-left: 3px solid var(--dim); transition: opacity .6s, transform .6s; text-shadow: 0 1px 1px #000; }
.msg.good { border-color: var(--green); }
.msg.bad { border-color: var(--red); color: #ffd9d3; }
.msg.go { pointer-events: auto; cursor: pointer; text-decoration: underline dotted; }
.msg.out { opacity: 0; transform: translateX(-10px); }
.big-msg { position: absolute; left: 50%; top: 58px; transform: translate(-50%, -10px); max-width: min(560px, 80%); padding: 9px 18px; border-radius: 14px; background: rgba(22, 15, 8, .84); box-shadow: 0 0 0 1.5px #c9962e, 0 6px 18px rgba(0,0,0,.45); pointer-events: none; text-align: center; font-family: 'Nunito', sans-serif; font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; line-height: 1.3; color: #fff2d6; text-shadow: 0 1px 0 #000; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
.big-msg.on { opacity: 1; transform: translate(-50%, 0); }

.offers { position: absolute; right: calc(8px + var(--safe-r)); top: 48px; width: min(300px, 46%); display: flex; flex-direction: column; gap: 8px; }
.offer { position: relative; overflow: hidden; background: linear-gradient(#4a321b, #2b1d10); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 0 0 1.5px var(--brass2), 0 8px 20px rgba(0, 0, 0, .5); animation: pop .3s ease-out; }
.offer p { margin: 0 0 6px; font-size: 13px; line-height: 1.35; font-weight: 700; }
.offer .ob { display: flex; gap: 6px; margin-top: 6px; }
.offer .ob button { flex: 1; border: 0; border-radius: 8px; padding: 7px 0; font-weight: 900; font-size: 13px; }
.offer .yes { background: var(--sun); color: #2b1300; }
.offer .no { background: rgba(255, 255, 255, .12); }
.offer .tm { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brass); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

.quick { position: absolute; right: calc(8px + var(--safe-r)); bottom: 8px; display: flex; gap: 6px; }
.qb { position: relative; width: 44px; height: 44px; border: 0; border-radius: 11px; background: rgba(20, 12, 5, .78); box-shadow: inset 0 0 0 1.5px rgba(226, 180, 90, .45); padding: 3px; font-size: 22px; }
.qb .qi img { width: 100%; height: 100%; border-radius: 8px; display: block; }
.qb b { position: absolute; right: -4px; top: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #555; font-size: 11px; line-height: 18px; text-align: center; font-weight: 900; }
.qb.hot b { background: var(--red); animation: blink 1.2s infinite; }
.qb.on { box-shadow: inset 0 0 0 2px var(--sun); background: rgba(255, 154, 31, .3); }
.qb-box { display: none; }
.qb-sol { width: auto; min-width: 44px; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; box-shadow: inset 0 0 0 2px var(--sun); }
.qb-sol .qi { width: 38px; height: 38px; flex: none; }
.qb-sol em { font-style: normal; font-size: 13px; font-weight: 900; color: #fff3da; }
body.touch .qb-box { display: block; }
@keyframes blink { 50% { transform: scale(1.15); } }

.place-bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(20, 12, 5, .88); border-radius: 12px; padding: 6px 6px 6px 12px; box-shadow: 0 0 0 1.5px var(--brass2); white-space: nowrap; }
.place-bar span { font-weight: 800; font-size: 13px; }
.pb { border: 0; border-radius: 9px; padding: 8px 12px; font-weight: 900; background: rgba(255, 255, 255, .12); font-size: 13px; }
.pb.ok { background: var(--green); color: #0d2a0d; }

.tip { position: absolute; z-index: 5; max-width: 270px; background: rgba(18, 11, 5, .95); border-radius: 10px; padding: 8px 10px; box-shadow: 0 0 0 1px var(--brass2), 0 8px 20px rgba(0, 0, 0, .6); pointer-events: none; font-size: 13px; }
.tip b { display: block; font-size: 14px; color: var(--brass); }
.tip p { margin: 4px 0 0; line-height: 1.35; color: #ead9b8; }
.tip .why { color: var(--red); font-weight: 800; }
.tip .cost { margin-top: 3px; }
.tip .again { color: var(--sun); font-weight: 900; }
.cmd.armed { box-shadow: 0 0 0 3px var(--sun), 0 0 12px rgba(255, 200, 60, .55); }

/* ---------- bottom panel ---------- */
.panel { flex: none; height: calc(var(--panel-h) + var(--safe-b)); padding: 6px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  background: linear-gradient(#5a4128, #3a2a1a 8%, #2c1f13); border-top: 3px solid var(--brass2); box-shadow: 0 -4px 14px rgba(0, 0, 0, .5); }
.mm-wrap { height: calc(var(--panel-h) - 12px); width: min(300px, calc((var(--panel-h) - 12px) * 2)); min-height: 0; overflow: hidden; background: #0c0905; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--brass2); padding: 3px; }
#mm { width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.info { position: relative; min-width: 0; background: rgba(0, 0, 0, .3); border-radius: 10px; padding: 8px 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(226, 180, 90, .2); }
.info .none b { font-family: 'Nunito', sans-serif; font-weight: 900; color: var(--brass); font-size: 17px; }
.info .none p { margin: 3px 0 0; font-size: 13px; color: #e5d3b0; }
.info .none .hint { color: var(--dim); font-size: 12px; }
.one { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 10px; }
.por img { width: 64px; height: 64px; border-radius: 10px; box-shadow: 0 0 0 2px var(--brass2); display: block; }
.txt { min-width: 0; }
.txt > b { font-size: 16px; font-weight: 900; margin-right: 6px; }
.ow { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--c, #777); color: #fff; vertical-align: 2px; }
.ow.pol { background: #a88d52; }
.hp { position: relative; height: 18px; background: #1a120a; border-radius: 7px; overflow: hidden; margin: 4px 0 3px; max-width: 280px; }
.hp s { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7af07a, #3dad3d); text-decoration: none; }
.hp s.y { background: linear-gradient(#ffd75a, #d9a11b); }
.hp s.r { background: linear-gradient(#ff7a6a, #c9301f); }
.hp s.res { background: linear-gradient(#ffd98a, #c9962e); }
.hp span { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; font-size: 11px; font-weight: 900; padding-left: 7px; line-height: 1; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.st { margin: 0; font-size: 13px; font-weight: 800; color: #ffe3a8; }
.sub { margin: 2px 0 0; font-size: 12px; color: var(--dim); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.queue { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.queue .qi { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: none; }
.queue .qi img { width: 100%; height: 100%; display: block; }
.queue .qi i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .6); }
.queue .qi s { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.queue .qi:hover::after { content: '✕'; position: absolute; inset: 0; background: rgba(160, 20, 10, .6); display: grid; place-items: center; font-weight: 900; }
.multi { display: flex; flex-wrap: wrap; gap: 5px; padding-right: 26px; }
.mi { position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 8px; background: none; overflow: hidden; }
.mi img { width: 100%; height: 100%; display: block; }
.mi b { position: absolute; right: 2px; top: 1px; font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.mi i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #300; }
.mi s { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.desel { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 12px; padding: 0; }

.cmds { display: grid; grid-template-columns: repeat(6, 70px); grid-auto-rows: 70px; gap: 5px; align-content: start; overflow-y: auto; max-height: calc(var(--panel-h) - 12px); }
.cmd { position: relative; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 9px; background: none; box-shadow: 0 0 0 1.5px var(--brass2), 0 2px 0 #000; overflow: hidden; }
.cmd img { width: 100%; height: 100%; display: block; }
.cmd .cl { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 2px 3px; background: rgba(12, 8, 3, .82); font-size: 10.5px; font-weight: 900; line-height: 1.05; color: #fff3da; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmd.off .cl { color: #b9a582; }
.cmd:hover { box-shadow: 0 0 0 2px var(--brass), 0 2px 0 #000; }
.cmd:active { transform: translateY(1px); }
.cmd.off img { filter: grayscale(.85) brightness(.55); }
.cmd.on { box-shadow: 0 0 0 2.5px var(--sun); }
.cmd kbd { position: absolute; left: 2px; top: 1px; font: 900 10px 'Nunito', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.cmd em { position: absolute; right: 3px; top: 16px; font-style: normal; font-weight: 900; font-size: 12px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cmd u { position: absolute; right: 3px; top: 0; text-decoration: none; font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 2px #000; }
body.touch .cmd kbd { display: none; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; background: rgba(8, 5, 2, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet { width: min(560px, 100%); max-height: calc(100dvh - 28px); overflow: auto; background: linear-gradient(#47311c, #2a1c10); border-radius: 16px; padding: 16px 18px 18px; box-shadow: 0 0 0 2px var(--brass2), 0 20px 50px rgba(0, 0, 0, .6); user-select: text; -webkit-user-select: text; touch-action: pan-y; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet h2 { font-family: 'Nunito', sans-serif; font-weight: 900; margin: 0; color: var(--brass); font-size: 24px; }
.x { border: 0; background: rgba(255, 255, 255, .1); width: 34px; height: 34px; border-radius: 9px; }
.dr { background: rgba(0, 0, 0, .28); border-radius: 12px; padding: 10px 12px; margin-bottom: 9px; border-left: 4px solid var(--c); }
.dr.out { opacity: .5; }
.dh { display: flex; align-items: center; gap: 10px; }
.dh > div { flex: 1; min-width: 0; }
.dh b { display: block; font-size: 15px; }
.dh small { color: var(--dim); font-size: 12px; }
.sw { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.stance { font-weight: 900; font-size: 12px; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, .12); white-space: nowrap; }
.st-war .stance { background: var(--red); color: #fff; }
.st-ally .stance { background: var(--green); color: #0d2a0d; }
.bio { margin: 6px 0; font-size: 13px; color: #e5d3b0; }
.moodbar { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #8a1f14, #6b5a2a 50%, #2f7a2f); overflow: hidden; margin-bottom: 8px; }
.moodbar i { position: absolute; top: 0; bottom: 0; left: 0; border-right: 3px solid #fff; background: rgba(0, 0, 0, .0); }
.moodbar span { position: relative; font-size: 11px; font-weight: 900; padding-left: 8px; line-height: 18px; text-shadow: 0 1px 2px #000; }
.dbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.dip-note { margin: 0 0 8px; font-size: 13px; color: #ffe3a8; font-weight: 700; min-height: 1.3em; }
.dip-top { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.dip-top .you { flex: 1; min-width: 0; }
.dip-top .you b { font-size: 14px; color: var(--sun); }
.dip-top .you small { display: block; color: var(--dim); font-size: 11px; }
.dip-top .sort { display: flex; gap: 4px; flex: none; }
.dip-top .sort button { border: 0; border-radius: 8px; padding: 6px 9px; font-weight: 900; font-size: 12px; background: rgba(255, 255, 255, .1); }
.dip-top .sort button.on { background: var(--brass); color: #2b1300; }
.sbar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 3px; }
.sbar i { display: block; height: 100%; background: var(--c, var(--sun)); }
.str { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 7px 0 5px; }
.str > b { font-size: 20px; font-weight: 900; line-height: 1; }
.str small { color: var(--dim); font-size: 11px; }
.str .sbar { flex-basis: 100%; }
.tag { font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 6px; }
.tag.g2 { background: #2f7a2f; color: #e8ffe0; } .tag.g1 { background: #4b6b2a; color: #f0ffd8; } .tag.g0 { background: #6b5a2a; color: #fff3d0; }
.tag.b1 { background: #a0471c; color: #fff; } .tag.b2 { background: var(--red); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.chips span { display: inline-flex; align-items: center; gap: 3px; background: rgba(255, 255, 255, .08); border-radius: 7px; padding: 2px 7px 2px 2px; font-size: 12px; font-weight: 900; }
.chips img { width: 22px; height: 22px; border-radius: 5px; }
.rh { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; color: #e5d3b0; }
.rh li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rh b { font-weight: 900; white-space: nowrap; } .rh .up { color: #8fe08f; } .rh .dn { color: #ff8f7a; }
.offer.inc h4 { margin: 0 0 4px; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--brass); }
.offer.inc h4 small { color: var(--dim); font-weight: 700; }
.offer.inc .sw { width: 10px; height: 10px; }
.offer .ob.ch3, .offer .ob.ch4 { display: grid; grid-template-columns: 1fr 1fr; }
.offer .ob.ch3 button:last-child { grid-column: span 2; }
.offer .ob button { line-height: 1.15; }
.offer .ob button .cost { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
.offer .war { background: var(--red); color: #fff; }
.menu-btns { display: grid; gap: 8px; }
.keys { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 12px 0 0; }
.how { padding-left: 20px; margin: 0; }
.how li { margin-bottom: 8px; line-height: 1.45; font-size: 14px; }
.how em { color: var(--brass); font-style: normal; font-weight: 800; }
.how-ctl { font-size: 13px; color: var(--dim); line-height: 1.5; }
.end-sheet { text-align: center; }
.end-emoji { font-size: 50px; margin: 0; line-height: 1.1; }
.end-sheet h2 { font-size: 28px; }
.end-line { color: #f1dfbd; margin: 6px 0 10px; }
.end-score b { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 44px; color: var(--sun); display: block; line-height: 1; }
.end-score span { color: var(--dim); font-size: 13px; }
.end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.end-stats div { background: rgba(0, 0, 0, .3); border-radius: 9px; padding: 6px 4px; }
.end-stats small { display: block; font-size: 11px; color: var(--dim); }
.end-stats b { font-size: 14px; }
.end-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .rivals { grid-template-columns: 1fr; }
  .end-stats { grid-template-columns: repeat(2, 1fr); }
}
/* phone landscape */
@media (max-height: 500px) {
  :root { --panel-h: 92px; }
  .panel { gap: 6px; padding-top: 4px; }
  .cmds { grid-template-columns: none; grid-template-rows: repeat(2, 37px); grid-auto-flow: column; grid-auto-columns: 37px; overflow-y: hidden; max-height: none; grid-auto-rows: unset; gap: 4px; overflow-x: auto; max-width: 46vw; scrollbar-width: none; }
  .cmd { width: 37px; height: 37px; }
  .cmd .cl { font-size: 7.5px; padding: 1px 1px 2px; -webkit-line-clamp: 1; }
  .cmd em { top: 10px; font-size: 10px; }
  .por img { width: 44px; height: 44px; }
  .one { gap: 2px 8px; }
  .txt > b { font-size: 14px; }
  .sub { display: none; }
  .hp { height: 12px; margin: 2px 0; }
  .hp span { line-height: 12px; }
  .queue .qi { width: 28px; height: 28px; }
  .info { padding: 5px 8px; }
  .info .none p:not(.hint) { display: none; }
  .mi { width: 38px; height: 38px; }
  .hud-top { padding-top: 4px; padding-bottom: 4px; }
  .rs img { width: 18px; height: 18px; }
  .rs b { font-size: 13px; min-width: 24px; }
  .hud-mid b { font-size: 13px; }
  .hb { height: 30px; }
  .hb i { display: none; }
  .log { top: 36px; }
  .msg { font-size: 12px; padding: 3px 8px; }
  .offers { top: 38px; }
  .offer { padding: 7px 9px 9px; }
  .offer p { font-size: 12px; }
  .qb { width: 38px; height: 38px; }
  .qb-sol { width: auto; }
  .qb-sol .qi { width: 32px; height: 32px; }
  .big-msg { font-size: 12px; top: 44px; max-width: 64%; padding: 6px 12px; }
  .hp { height: 13px; }
  .hp span { line-height: 13px; font-size: 9px; }
}
@media (max-height: 500px) { .cmd .cl { display: none; } .info { overflow-y: auto; } .st { font-size: 10px; line-height: 1.25; } }
@media (max-height: 340px) {
  :root { --panel-h: 84px; }
  .cmds { grid-template-rows: repeat(2, 34px); grid-auto-columns: 34px; gap: 3px; }
  .cmd { width: 34px; height: 34px; }
  .cmd .cl { font-size: 7px; }
  .hud-mid span { display: none; }
  body.endless .hud-mid span { display: block; font-size: 11px; white-space: nowrap; }
  body.endless .hud-mid b { font-size: 12px; }
}
/* phone portrait */
@media (max-width: 600px) and (min-height: 501px) {
  :root { --panel-h: 246px; }
  .panel { grid-template-columns: 96px 1fr; grid-template-rows: 92px minmax(0, 1fr); gap: 6px; padding-top: 5px; }
  .mm-wrap { grid-row: 1; height: 64px; width: 96px; align-self: center; }
  .info { grid-row: 1; padding: 5px 8px; overflow-y: auto; }
  .st { font-size: 10px; line-height: 1.25; font-weight: 800; }
  .hp { height: 14px; margin: 2px 0; }
  .hp span { font-size: 9px; }
  .queue .qi { width: 26px; height: 26px; }
  .desel { width: 22px; height: 22px; }
  .cmds { grid-column: 1 / -1; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 66px; gap: 4px; max-height: none; min-height: 0; overflow-y: auto; }
  .cmd { width: auto; height: 66px; display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, .35); }
  .cmd img { width: 44px; height: 44px; flex: none; margin-top: 1px; }
  .cmd .cl { position: static; flex: 1; width: 100%; display: -webkit-box; padding: 0 2px; background: none; font-size: 8px; line-height: 1.05; letter-spacing: -.1px; -webkit-line-clamp: 2; color: #fff3da; }
  .cmd em { top: 2px; right: 3px; }
  .por img { width: 40px; height: 40px; }
  .sub { display: none; }
  .info .none p:not(.hint) { display: none; }
  .txt > b { font-size: 13px; }
  .hud-top { flex-wrap: wrap; }
  .res { order: 2; width: 100%; justify-content: center; }
  .hud-mid { margin: 0; text-align: left; }
  .hud-btns { margin-left: auto; }
  .rs b { font-size: 13px; min-width: 22px; }
  .rs img { width: 18px; height: 18px; }
  .log { top: 76px; max-width: 75%; }
  .offers { top: 76px; width: 64%; }
}
@media (max-width: 600px) and (min-height: 760px) {
  :root { --panel-h: 262px; }
}

/* ---------- Campaign: Gamchha ---------- */
.camp-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 auto 12px; padding: 12px 30px; max-width: 100%; font-size: 22px; }
.camp-btn small { font-size: 13px; font-weight: 700; opacity: .85; }
.log { transform: translateY(var(--goal-h, 0px)); transition: transform .2s; }
.st-goal { position: absolute; z-index: 3; left: calc(8px + var(--safe-l, 0px)); top: 46px; width: min(300px, 58%); background: rgba(22, 15, 8, .86); border-radius: 10px; box-shadow: 0 0 0 1.5px var(--brass2); padding: 0 10px 7px; font-size: 13px; line-height: 1.3; }
.st-goal.shut { padding-bottom: 0; width: auto; }
.st-goal[hidden] { display: none; }
.goal-h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 2px; border: 0; background: none; color: var(--brass); font: 900 13px 'Nunito', sans-serif; cursor: pointer; }
.goal-h i { font-style: normal; font-size: 16px; }
.goal-a { margin: 0; color: #fff2d6; font-weight: 800; }
.goal-b { margin: 2px 0 0; color: var(--sun, #ffd27a); font-weight: 700; }
.st-flags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.ghat-flag { position: absolute; left: 0; top: 0; will-change: transform; }
.ghat-flag i { position: absolute; left: -1px; bottom: 0; width: 3px; height: 34px; background: #e8d9b8; }
.ghat-flag i::after { content: ''; position: absolute; left: 3px; top: 0; width: 22px; height: 14px; background: #c9302c; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ghat-flag.own i::after { background: #2f9e4a; }
.ghat-flag span { position: absolute; left: -26px; bottom: -18px; width: 52px; text-align: center; font: 900 11px 'Nunito', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.st-layer { position: fixed; inset: 0; z-index: 30; }
.st-layer[hidden] { display: none; }
/* chapter select */
.st-chapters { overflow: auto; background: radial-gradient(circle at 50% 0, #4a2f17, #160d06 70%); padding: max(10px, env(safe-area-inset-top)) 12px 20px; }
.chs-head { display: flex; align-items: center; gap: 10px; max-width: 900px; margin: 0 auto 8px; }
.chs-head h2 { flex: 1; margin: 0; color: var(--brass); font: 900 clamp(18px, 3.4vw, 28px) 'Nunito', sans-serif; text-align: center; }
.chs-total { color: #ffd27a; font-weight: 900; white-space: nowrap; }
.chs-diff { display: flex; justify-content: center; gap: 6px; margin: 0 auto 10px; }
.chs-diff .df { border: 0; border-radius: 9px; padding: 6px 14px; background: rgba(0, 0, 0, .4); color: var(--ink); font: 800 14px 'Nunito', sans-serif; box-shadow: inset 0 0 0 1.5px var(--brass2); cursor: pointer; min-width: 0; }
.chs-diff .df.on { background: var(--brass); color: #2b1300; }
.chs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; max-width: 900px; margin: 0 auto; }
.chs-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: linear-gradient(#47311c, #2a1c10); box-shadow: 0 0 0 1.5px var(--brass2); }
.chs-card.focus { box-shadow: 0 0 0 2.5px var(--brass), 0 0 18px rgba(226, 180, 90, .35); }
.chs-card img { width: 58px; height: 58px; border-radius: 10px; flex: none; background: #1a1009; }
.chs-card.locked { opacity: .55; }
.chs-card.locked img { filter: grayscale(1) brightness(.5); }
.chs-txt { flex: 1; min-width: 0; }
.chs-txt small { color: var(--dim, #b9a27a); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.chs-txt b { display: block; color: #fff2d6; font: 900 17px 'Nunito', sans-serif; }
.chs-txt p { margin: 1px 0 2px; font-size: 13px; line-height: 1.25; color: #e9d8b6; }
.stars i { font-style: normal; color: #5c4630; font-size: 16px; }
.stars i.on, .che-stars i.on { color: #ffcc33; text-shadow: 0 0 6px rgba(255, 204, 51, .6); }
.chs-card .btn { flex: none; padding: 8px 14px; }
/* comic */
.st-comic { background: #0d0905; display: flex; flex-direction: column; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); cursor: pointer; user-select: none; -webkit-user-select: none; }
.cm-page { flex: 1; min-height: 0; display: flex; gap: 8px; }
.cm-panel { position: relative; flex: 1; min-width: 0; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #f4ead2; opacity: 0; transform: translateX(40px) scale(.96); transition: opacity .35s, transform .35s; }
.cm-panel.in { opacity: 1; transform: none; }
.cm-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-cap { position: absolute; left: 6px; top: 6px; max-width: 80%; margin: 0; padding: 4px 8px; background: #ffe7a3; color: #2b1300; font: 900 clamp(11px, 1.6vw, 15px) 'Nunito', sans-serif; box-shadow: 2px 2px 0 #000; }
.cm-say { position: absolute; bottom: auto; top: 22%; width: 52%; margin: 0; padding: 5px 9px; background: #fff; color: #111; border-radius: 14px; font: 700 clamp(11px, 1.5vw, 15px)/1.25 'Nunito', sans-serif; box-shadow: 2px 2px 0 #000; }
.cm-say + .cm-say { top: 44%; }
.cm-say + .cm-say + .cm-say { top: 64%; }
.cm-cap ~ .cm-say { top: 26%; }
.cm-say b { display: block; font-size: .78em; color: #b2410e; text-transform: uppercase; letter-spacing: .5px; }
.cm-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.cm-hint { color: var(--dim, #b9a27a); font-weight: 800; font-size: 13px; }
.cm-skip { padding: 6px 16px; }
@media (orientation: portrait) { .cm-page { flex-direction: column; } .cm-say { width: 64%; } }
/* phone call */
.st-call { top: auto; height: min(52vh, 360px); display: flex; align-items: flex-end; justify-content: center; padding: 0 8px max(8px, env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .55) 40%); }
.call-card { pointer-events: auto; display: flex; gap: 12px; width: min(620px, 100%); max-height: 100%; overflow: auto; background: linear-gradient(#47311c, #24170c); border-radius: 16px; padding: 12px; box-shadow: 0 0 0 2px var(--brass), 0 -6px 30px rgba(0, 0, 0, .6); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.st-call.in .call-card { transform: none; }
.call-face { flex: none; }
.call-face img { width: 96px; height: 96px; border-radius: 14px; box-shadow: 0 0 0 2px var(--brass2); display: block; background: #1a1009; transform: translateX(-30px); opacity: 0; transition: transform .45s .1s, opacity .45s .1s; }
.st-call.in .call-face img { transform: none; opacity: 1; }
.call-body { flex: 1; min-width: 0; }
.call-tag { margin: 0; color: #7fd47f; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.call-body h3 { margin: 0; color: var(--brass); font: 900 19px 'Nunito', sans-serif; }
.call-text { margin: 3px 0 8px; color: #fff2d6; font-weight: 700; font-size: 15px; line-height: 1.3; }
.call-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.call-ch .btn { padding: 8px 14px; font-size: 14px; }
.call-ch .btn small { font-weight: 700; opacity: .8; }
.call-ch .btn.short { opacity: .55; }
.call-ch .btn.short small { color: #ff8a7a; }
/* chapter end */
.st-chend { display: grid; place-items: center; padding: 12px; background: rgba(8, 5, 2, .72); overflow: auto; }
.che-card { width: min(460px, 100%); text-align: center; background: linear-gradient(#47311c, #2a1c10); border-radius: 16px; padding: 14px 18px 16px; box-shadow: 0 0 0 2px var(--brass2), 0 20px 50px rgba(0, 0, 0, .6); }
.che-card small { color: var(--dim, #b9a27a); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.che-card h2 { margin: 2px 0 4px; color: var(--brass); font: 900 26px 'Nunito', sans-serif; }
.che-stars { margin: 0; font-size: 38px; line-height: 1.1; color: #ffcc33; }
.che-stars i { font-style: normal; color: #5c4630; }
.che-crit { list-style: none; padding: 0; margin: 6px 0; text-align: left; display: inline-block; color: #b9a27a; font-weight: 700; }
.che-crit li.ok { color: #ffe29a; }
.che-line { color: #fff2d6; font-weight: 700; margin: 6px 0; }
.che-time { color: var(--dim, #b9a27a); font-size: 13px; margin: 2px 0 8px; }
.che-pts { color: #f3e3c3; font-size: 14px; margin: 0 0 8px; }
.che-pts b { color: var(--brass); }
#che-save { margin: 0 0 8px; }
.che-face { width: 76px; height: 76px; border-radius: 12px; box-shadow: 0 0 0 2px var(--brass2); }
.che-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-height: 500px) {
  .st-goal { top: 36px; width: min(260px, 46%); font-size: 12px; }
  .camp-btn { font-size: 18px; padding: 8px 22px; }
  .st-call { height: 62vh; }
  .call-face img { width: 64px; height: 64px; }
  .call-text { font-size: 13px; margin-bottom: 6px; }
  .call-body h3 { font-size: 16px; }
  .call-card { padding: 8px 10px; }
  .che-card { padding: 8px 14px 10px; }
  .che-card h2 { font-size: 20px; }
  .che-stars { font-size: 28px; }
  .che-crit { margin: 2px 0; font-size: 13px; }
  .chs-card img { width: 44px; height: 44px; }
  .chs-txt b { font-size: 15px; }
}
@media (max-width: 600px) and (min-height: 501px) {
  .st-goal { top: 76px; width: min(300px, 75%); }
  .big-msg { top: calc(84px + var(--goal-h, 0px)); }
  .call-face img { width: 70px; height: 70px; }
}
/* story screens: picture + plain text */
.st-comic.brief { cursor: default; align-items: center; justify-content: center; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.bf-card { width: min(980px, 100%); height: 100%; max-height: 640px; display: grid; grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto; gap: 10px 14px; background: linear-gradient(#3a2816, #22170d); border-radius: 14px; padding: 12px; box-shadow: 0 0 0 2px var(--brass2, #a8823e), 0 20px 50px rgba(0, 0, 0, .6); }
.bf-pic { position: relative; grid-row: 1 / 3; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #f4ead2; }
.bf-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bf-txt { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; color: #f4e6c8; }
.bf-txt small { color: var(--dim, #b9a27a); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.bf-txt h2 { margin: 0 0 6px; color: var(--brass, #ffcf6b); font: 900 clamp(20px, 3vw, 28px)/1.1 'Nunito', sans-serif; }
.bf-txt p { margin: 0 0 8px; font: 600 clamp(14px, 1.8vw, 17px)/1.4 'Nunito', sans-serif; }
.bf-txt h4 { margin: 10px 0 3px; color: #ffcc33; font: 900 13px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.bf-todo { color: #fff; font-weight: 800 !important; }
.bf-stars { list-style: none; margin: 0; padding: 0; font: 700 14px/1.5 'Nunito', sans-serif; color: #e9d8b6; }
.bf-bar { display: flex; gap: 8px; justify-content: flex-end; }
.bf-bar .btn { padding: 10px 22px; font-size: 16px; }
@media (max-height: 420px) { .bf-card { padding: 8px; gap: 6px 10px; } .bf-txt p { font-size: 14px; line-height: 1.3; margin-bottom: 5px; } .bf-txt h2 { font-size: 20px; margin-bottom: 3px; } .bf-bar .btn { padding: 7px 18px; font-size: 15px; } }
@media (orientation: portrait) { .bf-card { grid-template-columns: 1fr; grid-template-rows: 28vh 1fr auto; } .bf-pic { grid-row: auto; } }
/* phones: pictures instead of words (names show in the tip when tapped) */
@media (max-height: 500px), (max-width: 600px) {
  .rs { padding: 2px 8px 2px 2px; gap: 3px; }
  .rs i { display: none; }
  .rs img { width: 26px; height: 26px; border-radius: 0; }
  .cmd:not(.armed):not(.on) { box-shadow: 0 0 0 1.5px var(--brass2), 0 2px 0 #000; }
  .qb-sol { padding: 3px; min-width: 0; }
  .qb-sol em { display: none; }
}

/* Endless mode title */
.endless-lede,.endless-only{display:none}
.endless-lede{font-size:16px;line-height:1.5;color:#f1dfbd;max-width:600px;margin:0 auto 14px}
body.endless .endless-lede{display:block}
body.endless .endless-only{display:inline-flex;align-items:center}
body.endless .modes,body.endless .lede{display:none}
.rv-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:400px;margin:0 auto}
.rv-strip span{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px var(--c);background:rgba(10,7,3,.55);display:grid;place-items:center;overflow:hidden}
.rv-strip img{width:28px;height:28px}
.rv-note{font-size:13px;opacity:.8;text-align:center;margin:6px 0 0}

/* ---------- title menu: mode cards, difficulty switch, rival chips ---------- */
.lede { font-size: 16px; max-width: 520px; margin-bottom: 22px; }
.cont-btn { margin-bottom: 16px; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; padding: 16px 16px 14px; border: 0; border-radius: 16px; color: var(--ink);
  background: linear-gradient(180deg, rgba(46, 32, 18, .82), rgba(22, 15, 8, .88)); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .16), 0 10px 26px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s, box-shadow .15s; }
.mode:hover, .mode:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 14px 30px rgba(0, 0, 0, .45); outline: 0; }
.mode:active { transform: translateY(0); }
.mode#campaign { background: linear-gradient(180deg, rgba(120, 62, 14, .88), rgba(48, 24, 6, .92)); box-shadow: inset 0 0 0 1.5px rgba(255, 180, 70, .55), 0 10px 26px rgba(0, 0, 0, .35); }
.m-art { width: 60px; height: 60px; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(255, 220, 160, .35), 0 4px 10px rgba(0, 0, 0, .4); }
.m-art img { width: 100%; height: 100%; display: block; }
.m-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-tag { font: 700 11px 'Titillium Web', sans-serif; text-transform: uppercase; letter-spacing: 1.6px; color: var(--brass); }
.mode b { font: 900 21px/1.1 'Nunito', sans-serif; color: #fff3dd; }
.mode small { font-size: 13px; line-height: 1.35; color: var(--dim); }
.m-meta { margin-top: auto; font: 700 12px 'Titillium Web', sans-serif; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 236, 200, .1); color: #f1dfbd; }
.mode#campaign .m-meta { background: var(--sun); color: #2b1300; }
.setup { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 0 20px; }
.seg-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seg-h, .rv-h { font: 700 11px 'Titillium Web', sans-serif; text-transform: uppercase; letter-spacing: 1.6px; color: var(--dim); margin: 0; }
.diffs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(10, 7, 3, .6); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .14); }
.df { border: 0; background: transparent; color: var(--dim); font: 800 15px 'Nunito', sans-serif; padding: 8px 20px; border-radius: 999px; transition: background .15s, color .15s; }
.df:hover { color: var(--ink); }
.df.on { background: var(--brass); color: #2b1300; }
.seg-note { margin: 0; font-size: 13px; color: #e7d6b4; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); min-height: 1.3em; }
.rivals { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rv-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rv { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(10, 7, 3, .55); text-align: left; }
.rv img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); flex: none; }
.rv b { display: block; font-size: 13px; line-height: 1.15; }
.rv small { display: block; font-size: 11px; color: var(--dim); }
.start-row { margin-top: 4px; }
body.endless .start-row .btn-main { font-size: 22px; padding: 14px 34px; }
.like { margin: 18px auto 0; display: flex; justify-content: center; }
@media (max-width: 640px) {
  .start-wrap { padding-top: 6px; }
  .lede { font-size: 15px; margin-bottom: 16px; }
  .modes { grid-template-columns: 1fr; gap: 10px; }
  .mode { flex-direction: row; align-items: center; padding: 12px; gap: 12px; }
  .m-art { width: 52px; height: 52px; border-radius: 12px; }
  .m-txt { flex: 1; }
  .mode b { font-size: 19px; }
  .m-meta { margin: 0; align-self: center; white-space: nowrap; }
  .df { padding: 8px 16px; }
}