/* The Road — bold cartoon UI */
:root {
  --ink: #1d1420; --ink2: #4b3f5e; --muted: #6b5f80; --line: #e4dcef;
  --gold: #ffd23f; --gold2: #f4a300; --purple: #9d4edd; --purple2: #3c096c; --night: #2a1b45;
  --blue: #3a86ff; --red: #ff5d5d; --green: #7ae582; --green2: #38b000; --sky: #4cc9f0; --cream: #fff7e6;
  --leg: #ffb703; --epic: #b15cff; --rare: #3a86ff; --common: #9aa0a6;
  --head: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: #120b1f; color: var(--ink); font-family: var(--body); overflow: hidden; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { position: relative; margin: 0 auto; max-width: 480px; height: 100%; overflow: hidden; background: #bdf1ff; box-shadow: 0 0 60px rgba(0,0,0,.6); }
@media (min-width: 520px) { #app { border-left: 3px solid #000; border-right: 3px solid #000; } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.bg-sky { background: linear-gradient(#4cc9f0, #bdf1ff 55%); }
.bg-night { background: linear-gradient(#5a3d8a, #2a1b45); color: #fff; }
.bg-cream { background: linear-gradient(#fff7e6, #ffe7b0); }
.bg-brown { background: linear-gradient(#7a4a2a, #3a2214); color: #fff; }
.bg-vine { background: linear-gradient(#e8ffe9, #b7e4c7); }
.bagbg { background: linear-gradient(#3c2a63, #1d1430); color: #fff; }
.herobg { background: linear-gradient(var(--robe), #1d1420 55%); color: #fff; }

.h { font-family: var(--head); font-weight: 400; letter-spacing: .2px; }
.outlined { color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font: 800 11px/1.25 var(--body); }
.lead { font-weight: 700; line-height: 1.5; margin: 8px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.spacer { height: 10px; }
.textin { width: 100%; font: 800 18px/1 var(--body); padding: 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-top)) 14px 8px; min-height: 62px; flex: none; }
.topbar .title { font: 400 24px/1 var(--head); }
.subtitle { font: 900 12px/1.2 var(--body); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0,0,0,.4); }
.iconbtn { width: 42px; height: 42px; flex: none; border-radius: 13px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; font: 400 22px/1 var(--head); cursor: pointer; color: var(--ink); padding: 0; }
.iconbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.iconbtn svg { width: 24px; height: 24px; }
.avatar { width: 50px; height: 50px; flex: none; border-radius: 15px; border: 3px solid var(--ink); overflow: hidden; background: linear-gradient(160deg, #e3b8ff, #8a2be2); box-shadow: 0 3px 0 var(--ink); padding: 0; cursor: pointer; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.big { width: 64px; height: 64px; }

/* buttons */
.btn { font: 400 19px/1 var(--head); border: 3px solid var(--ink); border-radius: 16px; padding: 13px 18px; box-shadow: 0 5px 0 var(--ink); background: var(--gold); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; user-select: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.green { background: var(--green); }
.btn.red { background: var(--red); color: #fff; }
.btn.white { background: #fff; }
.btn.purple { background: var(--purple); color: #fff; }
.btn.small { font-size: 15px; padding: 8px 12px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.btn.tiny { font-size: 13px; padding: 6px 9px; border-radius: 10px; box-shadow: 0 2px 0 var(--ink); border-width: 2px; }
.btn.wide { width: 100%; }
.btn svg { width: 22px; height: 22px; }
.btn[disabled], .btn.disabled { filter: grayscale(.85); opacity: .55; pointer-events: none; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 rgba(255,210,63,.9); } 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 10px rgba(255,210,63,0); } }

.panel { background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
button.panel { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.pad { padding: 12px 14px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 3px 10px 3px 5px; font: 900 14px/1 var(--body); box-shadow: 0 3px 0 var(--ink); color: var(--ink); white-space: nowrap; cursor: default; }
button.chip { cursor: pointer; }
.chip svg { width: 20px; height: 20px; flex: none; }
.chip.plain { padding: 3px 10px; }
.chip.soft { box-shadow: none; border-width: 2px; background: #fbf8ff; font-size: 13px; }
.chip.soft b { font-weight: 900; color: var(--muted); }
.chip.hero i { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); display: block; background: #ffe28a; flex: none; }
.chip.hero i svg { width: 100%; height: 100%; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fruitchip { background: color-mix(in srgb, var(--c) 22%, #fff); }
.chipberry { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 3px; }
.chipberry svg { width: 100%; height: 100%; display: block; }
.pill { display: inline-block; font: 400 11px/1 var(--head); color: #fff; background: var(--muted); border-radius: 8px; padding: 3px 7px; letter-spacing: .3px; }
.pill.legendary, .pill.gold { background: var(--gold2); } .pill.heroic { background: var(--blue); } .pill.common { background: #7a7a8c; } .pill.epic { background: var(--epic); } .pill.rare { background: var(--rare); } .pill.uncommon { background: #2f9e44; } .pill.locked { background: #b8aecb; }
.bar { height: 12px; border: 3px solid var(--ink); border-radius: 8px; background: #f1ecf8; overflow: hidden; position: relative; }
.bar > b { display: block; height: 100%; background: var(--green); transition: width .7s ease; }
.bar.thin { height: 10px; border-width: 2px; margin-top: 5px; }
.bar.xp { height: 12px; border-width: 2px; margin-top: 5px; }
.bar.xp > b { background: linear-gradient(#b9f3c1 50%, #7ae582 50%); }
.bar.gold > b { background: var(--gold); } .bar.purple > b { background: var(--purple); } .bar.blue > b { background: var(--blue); } .bar.red > b { background: var(--red); }
.plus { font: 900 13px/1 var(--body); color: #38b000; }
.sectiontitle { font: 400 19px/1.1 var(--head); margin: 18px 2px 10px; display: flex; align-items: center; gap: 8px; }
.sectiontitle .count { font: 900 12px/1 var(--body); background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 8px; -webkit-text-stroke: 0; }
.tag { display: inline-block; font: 400 11px/1 var(--head); color: #fff; background: var(--purple); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; white-space: nowrap; }
.tag.lie, .tag.temptation { background: #c1121f; }
.tag.emboldened { background: #e85d04; }
.tag.stunned, .tag.confused { background: #3a86ff; }
.tag.fear, .tag.deceived, .tag.tempted, .tag.poison, .tag.entangled { background: #6a4c93; }
.tag.atkUp, .tag.defUp, .tag.taunt { background: #2d6a4f; }
.tag.stone { background: #6c757d; display: inline-flex; gap: 3px; align-items: center; }
.tag.guest { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: var(--gold); color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.helpdot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ink); border: 2px solid var(--ink); font: 900 12px/1 var(--body); cursor: pointer; vertical-align: 1px; padding: 0; flex: none; }
.infodot { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid var(--ink); font: 900 11px/14px var(--body); text-align: center; }
.dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.dots i.on { background: var(--ink); }

/* bottom nav */
.nav { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 3px solid var(--ink); padding-bottom: var(--safe-bottom); }
.nav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 9px; font: 400 12px/1 var(--head); color: #8a7da0; cursor: pointer; position: relative; }
.nav button svg { width: 28px; height: 28px; }
.nav button.on { color: var(--ink); }
.nav button.on svg { transform: translateY(-2px) scale(1.1); }
.nav .badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font: 900 11px/18px var(--body); border: 2px solid var(--ink); padding: 0 4px; }

/* portrait cards */
.pcard { position: relative; display: block; width: 100%; padding: 0; border-radius: 14px; border: 3px solid var(--ink); overflow: hidden; box-shadow: 0 4px 0 var(--ink); background: #333; cursor: pointer; aspect-ratio: 1; }
.pcard.legendary { background: linear-gradient(160deg, #ffe28a, #f4a300); }
.pcard.epic { background: linear-gradient(160deg, #e3b8ff, #8a2be2); }
.pcard.rare { background: linear-gradient(160deg, #a9d1ff, #2a6fdb); }
.pcard.uncommon { background: linear-gradient(160deg, #c8f2c2, #2f9e44); }
.pcard.common { background: linear-gradient(160deg, #e4e6ea, #8d939c); }
.pcard > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard .lvl { position: absolute; right: 4px; bottom: 2px; font: 400 16px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pcard .role { position: absolute; left: 3px; bottom: 3px; width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; }
.pcard .role svg { width: 16px; height: 16px; }
.pcard.locked > svg { filter: grayscale(1) brightness(.35); }
.pcard.locked { background: #444; }
.pcard .lock { position: absolute; inset: 0; display: grid; place-items: center; }
.pcard .lock svg { width: 34%; height: 34%; }
.pcard.gone > svg { filter: grayscale(1) brightness(.6); }
.pcard.mini { width: 38px; flex: none; border-width: 2px; box-shadow: none; border-radius: 10px; }
.pcard.big { width: 132px; flex: none; border-radius: 22px; }
.pcard.big .lvl { font-size: 24px; right: 8px; bottom: 5px; }
.pcard .check { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; }
.pcard.readycall { animation: callglow 1.2s ease-in-out infinite alternate; }
@keyframes callglow { from { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255,210,63,0); } to { box-shadow: 0 4px 0 var(--ink), 0 0 16px 5px rgba(255,210,63,.9); } }
.pname { font: 400 14px/1.05 var(--head); text-align: center; margin-top: 6px; }
.psub { font: 800 10.5px/1.15 var(--body); text-align: center; color: var(--muted); }
.bg-night .psub, .bg-brown .psub { color: #d8cdeb; }

/* home */
.continue { display: flex; gap: 12px; align-items: center; }
.cicon { width: 54px; height: 54px; flex: none; border-radius: 16px; border: 3px solid var(--ink); display: grid; place-items: center; }
.cicon svg { width: 60%; height: 60%; }
.callout { display: flex; gap: 10px; align-items: center; margin-top: 12px; background: #fff3c4 !important; animation: callglow2 1.4s ease-in-out infinite alternate; }
@keyframes callglow2 { to { box-shadow: 0 5px 0 var(--ink), 0 0 18px 4px rgba(255,210,63,.9); } }
.chapters { display: flex; gap: 8px; overflow-x: auto; padding: 14px 14px 8px; margin: 0 -14px; scrollbar-width: none; }
.chapters::-webkit-scrollbar { display: none; }
.chaptab { flex: none; display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 6px 12px 6px 6px; cursor: pointer; text-align: left; }
.chaptab .num { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--ink); background: var(--c, #ddd); display: grid; place-items: center; font: 400 17px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; flex: none; }
.chaptab .num svg { width: 18px; height: 18px; }
.chaptab .nm { font: 400 15px/1.05 var(--head); white-space: nowrap; }
.chaptab .nm small { display: block; font: 800 10.5px/1.1 var(--body); color: var(--muted); }
.chaptab.on { background: var(--gold); transform: translateY(-2px); }
.chaptab[disabled] { opacity: .6; cursor: default; }
.chaptab.soon { background: #ece6f5; opacity: .8; }
.chaptab.soon .num { background: #b8aecb; }
.mapwrap { overflow: hidden; background: linear-gradient(#fff7e6, color-mix(in srgb, var(--c) 28%, #fff7e6)); }
.map { position: relative; margin: 0 auto; max-width: 360px; }
.map svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.node { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; width: 150px; }
.node .disc { position: relative; width: 60px; height: 60px; margin: 0 auto; border-radius: 19px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; background: #fff; }
.node.t-boss .disc { width: 72px; height: 72px; border-radius: 22px; }
.node.t-story .disc { border-radius: 50%; }
.node .disc svg { width: 56%; height: 56%; }
.node.cleared .disc { background: var(--green); }
.node.open .disc { background: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
.node.locked .disc { background: #d8d0e4; }
.node .joinpip { position: absolute; right: -12px; top: -10px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: #ffe28a; }
.node .joinpip svg { width: 100%; height: 100%; }
.node .lab { display: inline-block; margin-top: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 7px; max-width: 150px; }
.node .lab b { display: block; font: 400 13px/1.1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .lab span { display: block; font: 800 10px/1.15 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily { text-align: left; }

/* stage sheet */
.enemyrow { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.ecard { flex: none; width: 96px !important; padding: 6px; text-align: center !important; box-shadow: 0 3px 0 var(--ink); }
.ecard .art { height: 64px; display: grid; place-items: center; }
.ecard .art svg { max-height: 62px; max-width: 84px; }
.questioninfo { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; background: #f3e6ff; }
.readiness { display: flex; gap: 10px; margin-top: 10px; border-width: 3px; }
.readiness.dark { background: #2a1b45; color: #fff; box-shadow: 0 4px 0 #000; }

/* sheets and modals */
#overlay:empty { display: none; }
.sheetwrap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; background: rgba(20,10,30,.55); animation: fadein .15s; }
.sheet { width: 100%; max-width: 480px; max-height: 88%; overflow-y: auto; background: var(--cream); border: 3px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 16px 16px calc(20px + var(--safe-bottom)); animation: slideup .22s cubic-bezier(.2,.9,.3,1.1); color: var(--ink); scrollbar-width: none; position: relative; }
.sheet::-webkit-scrollbar { display: none; }
.modalwrap { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 16px; background: rgba(20,10,30,.6); animation: fadein .15s; }
.modal { width: 100%; max-width: 440px; max-height: 90%; overflow-y: auto; }
@keyframes fadein { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); pointer-events: none; transform: translateX(-50%); z-index: 300; background: var(--ink); color: #fff; font: 800 14px/1.35 var(--body); padding: 10px 14px; border-radius: 14px; max-width: min(92vw, 440px); text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* reading and scenes */
.scripture { font: 600 17px/1.65 Georgia, "Iowan Old Style", serif; color: #2a2118; }
.scripture p { margin: 0 0 10px; }
.scripture sup { color: var(--blue); font: 800 11px/1 var(--body); margin-right: 3px; }
.scripture .refhead { font: 400 14px/1 var(--head); color: var(--muted); margin: 14px 0 6px; }
.scripture .refhead:first-child { margin-top: 2px; }
.passage { background: #fffaf0; }
.quote { background: #fffaf0; border: 2px solid #eadfc8; border-radius: 14px; padding: 10px 12px; font-size: 15.5px; line-height: 1.55; }
.quote b { font: 400 13px/1 var(--head); color: var(--muted); }
.readnote { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; background: #fff3c4; font-weight: 800; font-size: 14px; }
/* "Where we are": the short bridge that sets the scene before the verses. Deliberately unlike the
   Scripture panel — sans serif on parchment-brown, with a label — so a reader never mistakes it for the Bible. */
.setting { margin-bottom: 12px; background: #f3e9d7; border: 2px dashed #b9a682; }
.setting .slabel { display: flex; align-items: center; gap: 6px; font: 400 13px/1 var(--head); color: #7c6a4a; letter-spacing: .4px; margin-bottom: 5px; }
.setting .slabel svg { width: 15px; height: 15px; flex: none; }
.setting p { font: 700 14.5px/1.55 var(--body); color: #4a3f2c; margin: 0; }
.setting p + p { margin-top: 7px; }
.setting .sref { display: block; font: 800 11.5px/1.35 var(--body); color: #8a7757; margin-top: 6px; }
.footbar { flex: none; padding: 10px 14px calc(12px + var(--safe-bottom)); display: flex; gap: 8px; background: rgba(255,247,230,.96); border-top: 3px solid var(--ink); }
.fruitgain { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.sceneart { overflow: hidden; padding: 0 !important; }
.sceneart > svg { display: block; width: 100%; height: auto; }
.joinart { position: relative; height: 190px; display: grid; place-items: center; background: radial-gradient(circle, #fff3a8, #ffb703 60%, #e85d04); overflow: hidden; }
.joinart .pcard { width: 130px; position: relative; z-index: 1; border-radius: 22px; }
.joinart .rays { opacity: 1; transform: translate(-50%, -50%) scale(.8); animation: spin 18s linear infinite; }
.joinart.small { height: 150px; border-radius: 20px; border: 3px solid var(--ink); margin-bottom: 12px; }
.joinart.small .pcard { width: 100px; }
@keyframes spin { to { transform: translate(-50%, -50%) scale(.8) rotate(360deg); } }
.opts { display: grid; gap: 8px; margin-top: 12px; }
.opt { display: block; width: 100%; text-align: left; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 10px 12px; font: 800 15px/1.3 var(--body); cursor: pointer; color: var(--ink); }
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.opt.right { background: var(--green); }
.opt.wrong { background: #ffb3b3; }
.opt[disabled] { cursor: default; }
.opts .btn { background: #f1ecf8; font-size: 17px; }
.opts .btn.right { background: var(--green); }
.opts .btn.wrong { background: #ffb3b3; }
.reply { font-weight: 800; margin-top: 12px; min-height: 22px; line-height: 1.4; }

/* team select */
.slots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pslot { width: 62px; position: relative; }
.pslot .pname { color: #fff; font-size: 12px; }
.emptyslot { aspect-ratio: 1; border: 3px dashed #ffe28a; border-radius: 14px; display: grid; place-items: center; color: #ffe28a; font: 400 26px/1 var(--head); background: rgba(0,0,0,.25); }
.rostertray { flex: 1; margin-top: 12px; background: var(--cream); color: var(--ink); border-top: 3px solid var(--ink); padding: 12px 14px calc(12px + var(--safe-bottom)); display: flex; flex-direction: column; min-height: 0; border-radius: 22px 22px 0 0; }
.rostergrid { margin-top: 10px; overflow-y: auto; flex: 1; align-content: start; padding-bottom: 6px; }
.rpick { background: none; border: 0; padding: 0; cursor: pointer; }
.rpick.picked .pcard { opacity: .55; }

/* results */
.results.win { background: radial-gradient(circle at 50% 22%, #ffd23f, #f4a300 30%, #9d4edd 62%, #3c096c); }
.results.lose { background: linear-gradient(#5a3d8a, #1d1420); }
.chestzone { position: relative; height: 240px; margin-top: 6px; }
.chestwrap { position: absolute; left: 50%; bottom: 10px; width: 200px; margin-left: -100px; cursor: pointer; }
.chestwrap .lid { position: absolute; left: 0; right: 0; bottom: 84%; transform-origin: 50% 100%; }
.chestwrap .inner { position: absolute; left: 8%; right: 8%; bottom: 72%; height: 40px; border-radius: 50%; background: radial-gradient(#fffbd1, #ffd23f); opacity: 0; }
.taplabel { position: absolute; left: 0; right: 0; top: 16px; font-size: 22px; }
.rays { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%) scale(.2); opacity: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,236,120,.9) 0 11deg, rgba(255,255,255,.25) 11deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent); pointer-events: none; }
.loot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.lootcard { width: 108px !important; padding: 8px 6px; text-align: center !important; opacity: 0; position: relative; }
.lootcard .ic { width: 52px; height: 52px; margin: 0 auto; }
.lootcard .ic svg { width: 100%; height: 100%; }
.lootcard .nm { font-size: 13.5px; line-height: 1.05; margin-top: 4px; }
.lootcard .sub { font: 800 10.5px/1.2 var(--body); color: #4b3f5e; margin: 3px 0; }
.lootcard.legendary { background: linear-gradient(#fff7cc, #ffd23f); }
.lootcard.heroic { background: linear-gradient(#fff, #d9e8ff); }
.tips { margin: 6px 0 0; padding-left: 20px; font-weight: 800; line-height: 1.5; }
.xprow { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.xprow .face { width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: #ffe28a; flex: none; }
.xprow .face svg { width: 100%; height: 100%; }
.newmove { margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; background: #fff3c4; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 8px; font: 800 12.5px/1 var(--body); }
.cardrow { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.joinpanel { display: flex; gap: 12px; align-items: center; margin-top: 12px; background: #ffe28a !important; }
.note { margin-top: 12px; font-weight: 800; font-size: 14px; background: #e6f0ff; }
.note.skim, .note.leave { background: #ffecec; }
.note.armor { background: #fff3a8; }

/* battle */
.battle { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; color: #fff; background: #1d1420; }
.btop { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-top)) 10px 8px; background: #2a1b45; border-bottom: 3px solid #000; }
.btop .iconbtn { width: 38px; height: 38px; }
.bname { font: 400 16px/1.05 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsub { font: 800 11.5px/1.2 var(--body); color: #cbb8ef; }
.arena { position: relative; flex: 1; overflow: hidden; min-height: 0; background: #2a1b45; }
.stagebox { position: absolute; left: 50%; top: 50%; width: 400px; height: 560px; transform-origin: 50% 50%; overflow: hidden; border-radius: 6px; }
.fieldbg { position: absolute; inset: 0; }
.fieldbg svg { width: 100%; height: 100%; display: block; }
.toppanel { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 20; background: rgba(29,20,32,.9); border: 3px solid #000; border-radius: 14px; padding: 7px 10px; color: #fff; }
.bossline { display: flex; justify-content: space-between; align-items: baseline; font: 400 17px/1 var(--head); }
.bossline .bh { font: 900 12px/1 var(--body); color: #ffd6e0; }
.bar.boss { height: 16px; margin-top: 4px; border-color: #000; background: #4b3f5e; }
.bar.boss > b { background: linear-gradient(#ff8a8a 50%, #ff5d5d 50%); }
.toprow { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.toprow .wave { font: 400 14px/1 var(--head); }
.meter { display: inline-flex; align-items: center; gap: 3px; font: 800 10px/1 var(--body); color: #ffd23f; }
.meter span { margin-right: 3px; }
.meter i { width: 14px; height: 7px; border-radius: 3px; background: #5a4a70; border: 1px solid #000; }
.meter i.on { background: #ffd23f; }
.hands { display: flex; align-items: center; gap: 8px; margin-top: 5px; font: 800 11px/1 var(--body); color: #ffe28a; }
.hands .bar { flex: 1; margin: 0; border-color: #000; background: #4b3f5e; }
.hands b.h { font-size: 14px; color: #fff; }
.unit { position: absolute; z-index: 5; cursor: pointer; }
.unit .fig { position: absolute; inset: 0; transform-origin: 50% 100%; }
.unit .fig svg { display: block; width: 100%; height: 100%; }
.unit.flip .fig svg { transform: scaleX(-1); }
.unit .hpb { position: absolute; left: 12%; right: 12%; bottom: -12px; height: 9px; border: 2px solid var(--ink); border-radius: 6px; background: #e9e2f2; overflow: hidden; z-index: 2; }
.unit .hpb b { display: block; height: 100%; background: linear-gradient(#7ae582 50%, #4cc764 50%); transition: width .45s; }
.unit.enemy .hpb b { background: linear-gradient(#ff8a8a 50%, #ff5d5d 50%); }
.unit .hpb i { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(58,134,255,.7); }
.unit .tags { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); display: flex; gap: 2px; white-space: nowrap; z-index: 3; }
.unit .tags .tag { font-size: 10px; padding: 2px 4px; }
.unit.ally .tags { top: 8%; }
.unit .ring { position: absolute; left: -6%; right: -6%; bottom: -8px; height: 20px; border-radius: 50%; border: 4px solid var(--gold); opacity: 0; transition: opacity .15s; box-shadow: 0 0 12px var(--gold); z-index: -1; }
.unit.focus .ring { opacity: 1; border-color: var(--red); box-shadow: 0 0 12px var(--red); }
.unit.acting .ring { opacity: 1; }
.unit .target { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font: 400 12px/1 var(--head); background: var(--red); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 5px; display: none; z-index: 4; }
.unit.focus .target { display: block; }
.unit.down { pointer-events: none; }
.unit.ally.down .fig { filter: grayscale(1) brightness(.7); transform: rotate(-80deg) translateX(-20%); opacity: .6; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.pop { position: absolute; z-index: 60; transform: translate(-50%, -50%); font: 400 24px/1 var(--head); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; }
.pop.crit { color: var(--gold); font-size: 30px; }
.pop.weak { color: var(--gold); font-size: 36px; }
.pop.heal { color: var(--green); }
.pop.shield { color: #9cc4ff; font-size: 17px; }
.pop.info { color: #e9d8ff; font-size: 16px; }
.pop.bad { color: #ffb3b3; font-size: 16px; }
.pop.good { color: var(--green); font-size: 18px; }
.fruitpop { position: absolute; left: 50%; top: 18%; z-index: 66; font: 400 16px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; white-space: nowrap; box-shadow: 0 4px 0 var(--ink); }
.bubble { position: absolute; z-index: 55; transform: translate(-50%, -100%); background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 8px; font: 400 13px/1.1 var(--head); white-space: nowrap; pointer-events: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.special { background: var(--gold); }
.banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 70; pointer-events: none; text-align: center; min-width: 72%; max-width: 92%; }
.banner .in { background: var(--gold); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); padding: 10px 16px; font: 400 24px/1.1 var(--head); color: var(--ink); }
.banner small { display: block; font: 800 13px/1.25 var(--body); margin-top: 3px; color: #5a3d00; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 65; pointer-events: none; }
.particle { position: absolute; z-index: 62; pointer-events: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, #ffc300 45%, #e08a00); border: 2px solid var(--ink); }
.poof { position: absolute; z-index: 61; pointer-events: none; width: 16px; height: 16px; border-radius: 50%; background: #e9d8ff; border: 2px solid var(--ink); }
.proj { position: absolute; z-index: 58; pointer-events: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle at 35% 35%, #eee, #8a867c); }
.proj.arrow { width: 26px; height: 6px; border-radius: 3px; background: #6a4a2a; }
.proj.net { width: 30px; height: 30px; border-radius: 8px; background: repeating-linear-gradient(45deg, #d6bf87 0 4px, transparent 4px 8px), repeating-linear-gradient(-45deg, #d6bf87 0 4px, transparent 4px 8px); }
.proj.pebble { width: 10px; height: 10px; }
.tray { flex: none; background: #fff; color: var(--ink); border-top: 3px solid var(--ink); padding: 8px 8px calc(8px + var(--safe-bottom)); position: relative; z-index: 40; }
.heroes { display: grid; gap: 5px; }
.hcard { position: relative; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #f1ecf8; cursor: pointer; padding: 0 0 3px; box-shadow: 0 3px 0 var(--ink); min-width: 0; text-align: center; }
.hcard .face { aspect-ratio: 1; position: relative; }
.hcard .face svg { width: 100%; height: 100%; display: block; }
.hcard .lv { position: absolute; right: 3px; bottom: 1px; font: 400 13px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.hcard .gst { position: absolute; left: 2px; top: 2px; font: 400 9px/1 var(--head); background: var(--gold); border: 1.5px solid var(--ink); border-radius: 5px; padding: 1px 3px; }
.hcard .hp { position: relative; height: 7px; margin: 3px 4px 0; border-radius: 4px; background: #e9e2f2; overflow: hidden; border: 1.5px solid var(--ink); }
.hcard .hp b { display: block; height: 100%; background: var(--green2); transition: width .4s; }
.hcard .hp i { position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: 3px; }
.hcard .mv { font: 800 9.5px/1.1 var(--body); padding: 3px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.hcard.ready { border-color: var(--gold2); box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--gold); animation: readyglow 1s ease-in-out infinite alternate; }
.hcard.ready .mv { color: #b36b00; }
@keyframes readyglow { to { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--gold), 0 0 12px 3px rgba(255,210,63,.8); } }
.hcard.armed { background: var(--gold); transform: translateY(-4px); }
.hcard.armed .mv { color: var(--ink); }
.hcard.held { opacity: .72; }
.hcard.held .mv { color: var(--muted); }
.hcard.down { filter: grayscale(1); opacity: .5; }
.hcard.oiltarget { outline: 3px dashed #2d6a4f; outline-offset: 1px; }
.traybtns { display: grid; grid-template-columns: auto auto auto 1fr; gap: 7px; margin-top: 8px; align-items: stretch; }
.oilbtn { padding: 8px 10px; font-size: 16px; box-shadow: 0 4px 0 var(--ink); }
.oilbtn.on { background: var(--green); }
.toggle { font: 400 13px/1 var(--head); border: 2px solid var(--ink); border-radius: 10px; padding: 6px 9px; background: #fff; cursor: pointer; color: var(--ink); }
.toggle.big { font-size: 15px; border-width: 3px; border-radius: 14px; padding: 0 12px; box-shadow: 0 4px 0 var(--ink); }
.toggle.on { background: var(--blue); color: #fff; }
.allbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 17px; line-height: 1; padding: 4px 10px; }
.allbtn small { font: 900 8.5px/1.1 var(--body); opacity: .8; }
.allbtn.on { background: var(--gold); color: var(--ink); }
.fightbtn { font-size: 21px; padding: 8px 10px; flex-wrap: wrap; row-gap: 0; }
.fightbtn small { width: 100%; font: 900 9.5px/1.15 var(--body); opacity: .85; margin-top: 3px; }
.fightbtn small:empty { display: none; }
.traytip { font: 800 11.5px/1.25 var(--body); color: var(--muted); margin-top: 7px; text-align: center; min-height: 15px; }
.movesheet { position: absolute; left: 6px; right: 6px; bottom: 150px; z-index: 90; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 10px; box-shadow: 0 8px 0 rgba(0,0,0,.35); max-height: 60%; overflow-y: auto; }
.mshead { display: flex; align-items: center; gap: 8px; }
.mshead .face { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: #ffe28a; flex: none; }
.mshead .face svg { width: 100%; height: 100%; }
.mvbtn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 7px; background: #fff; border: 3px solid var(--ink); border-radius: 13px; padding: 7px 8px; text-align: left; cursor: pointer; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.mvbtn .h { font-size: 15px; }
.mvbtn.on { background: #fff3c4; border-color: var(--gold2); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--gold); }
.mvbtn.ready .mst { background: var(--gold); }
.mvbtn.off { opacity: .6; box-shadow: none; cursor: default; }
.mic { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--ink); background: var(--purple); display: grid; place-items: center; flex: none; }
.mic.basic { background: #dfe6ee; }
.mic svg { width: 20px; height: 20px; }
.mdesc { display: block; font: 700 11.5px/1.3 var(--body); color: var(--ink2); }
.mst { font: 900 10px/1.1 var(--body); background: #efe8f7; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 5px; white-space: nowrap; flex: none; }
.mst .muses { display: block; margin-top: 2px; font-size: 9.5px; text-align: center; color: #5a3d00; }
.qwrap { position: absolute; inset: 0; z-index: 120; background: rgba(20,10,35,.72); display: flex; align-items: center; justify-content: center; padding: 12px; overflow-y: auto; }
.qcard { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: var(--cream); color: var(--ink); border: 3px solid #000; border-radius: 20px; padding: 14px; box-shadow: 0 8px 0 rgba(0,0,0,.4); }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qlabel { font: 400 20px/1 var(--head); }
.qreason { font: 900 11px/1.1 var(--body); background: var(--ink); color: var(--gold); border-radius: 8px; padding: 4px 7px; text-align: right; }
.qprompt { font: 800 16px/1.4 var(--body); margin-top: 8px; }
.qprompt.verse { font: 600 17px/1.55 Georgia, serif; background: #fffaf0; border: 2px solid #eadfc8; border-radius: 12px; padding: 10px; }
.blank { display: inline-block; min-width: 64px; border-bottom: 4px solid var(--ink); margin: 0 3px; color: var(--blue); text-align: center; }
.orderlist { display: grid; gap: 7px; margin-top: 10px; }
.opt.order { display: flex; gap: 8px; align-items: center; }
.opt.order i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: #efe8f7; display: grid; place-items: center; font: 400 15px/1 var(--head); flex: none; }
.opt.order.picked { background: #fff3c4; }
.opt.order.picked i { background: var(--gold); }
.stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.stakes.one { grid-template-columns: 1fr; }
.stakes span { border: 2px dashed var(--ink); border-radius: 10px; padding: 5px 7px; font: 800 11px/1.25 var(--body); }
.stakes .good { background: #e8ffe9; }
.stakes .bad { background: #ffecec; }
.feedback { margin-top: 10px; border-radius: 14px; padding: 10px; border: 3px solid var(--ink); font-weight: 800; line-height: 1.4; }
.feedback .h { font-size: 19px; }
.feedback.good { background: #e8ffe9; }
.feedback.bad { background: #ffecec; }
.feedback .quote { margin: 8px 0; }
.qwrap.answered button:disabled, .qwrap.answered input:disabled { pointer-events: none; }
.qwrap.answered { cursor: pointer; }
.qtaphint { margin-top: 7px; text-align: center; font-size: 12px; font-weight: 800; color: #6b5f80; opacity: 0; animation: qtaphint .3s ease-out .35s forwards; }
@keyframes qtaphint { to { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .qtaphint { animation: none; opacity: .85; } }
.rightorder { margin: 6px 0; padding-left: 20px; }
.helprows .row { align-items: flex-start; margin-top: 10px; font-weight: 700; line-height: 1.4; }
.helprows svg { width: 28px; height: 28px; flex: none; }
.tapme { position: absolute; z-index: 80; pointer-events: none; font: 400 14px/1 var(--head); background: var(--ink); color: #fff; padding: 7px 10px; border-radius: 12px; white-space: nowrap; animation: bob 1s ease-in-out infinite; }
.tapme::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* team */
.tcard { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; position: relative; }
.tcard .pname { color: #fff; }
.callbtn { display: inline-flex; margin-top: 4px; }
.roles { margin-top: 18px; background: #1d1420; color: #fff; border-color: #000; font-weight: 700; font-size: 13px; }
.srcrow { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; margin-top: 7px; text-align: left; cursor: pointer; color: var(--ink); }
.herotop { display: flex; gap: 12px; align-items: flex-start; }
.bio { font: 700 14px/1.5 var(--body); margin: 12px 2px 0; }
.breadpanel { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.moverow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 2px solid #efe8f7; }
.moverow:first-of-type { border-top: 0; }
.moverow.locked { opacity: .6; }
.slots6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }

/* bag */
.supply { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: #fff3c4; border: 3px solid var(--ink); border-radius: 13px; }
.sic svg { width: 34px; height: 34px; }
.sic.big { width: 60px; height: 60px; }
.supply .count { font-size: 22px; }
.empty { display: flex; gap: 12px; align-items: center; }
.empty svg { width: 44px; height: 44px; flex: none; }
.itemtext { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); }
.itembtns { display: grid; gap: 5px; flex: none; }
.armorpanel { background: linear-gradient(#fff7e6, #ffe7b0); }
.armorbtn { background: none; border: 0; padding: 0; cursor: pointer; text-align: center; color: var(--ink); }
.ic.big { width: 64px; height: 64px; flex: none; border: 3px solid var(--ink); border-radius: 14px; display: grid; place-items: center; background: #fffaf0; }
.ic.big svg { width: 76%; height: 76%; }
.effectline { font-weight: 800; margin-top: 6px; padding-left: 14px; position: relative; }
.effectline::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green2); }

.stat { display: flex; justify-content: space-between; font: 800 14px/1 var(--body); padding: 7px 0; border-top: 2px solid #efe8f7; }
.stat:first-child { border-top: 0; }
.slot { aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; background: #f1ecf8; display: grid; place-items: center; position: relative; cursor: pointer; font: inherit; color: var(--ink); }
.slot svg { width: 66%; height: 66%; }
.slot .plus { position: absolute; right: 2px; bottom: 0; font: 400 12px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.slot .sl { font: 800 9px/1.05 var(--body); color: #8a7da0; text-align: center; padding: 2px; }
.slot.empty { color: #38b000; font: 400 22px/1 var(--head); }
.slot.legendary { background: linear-gradient(160deg, #fff3a8, #ffb703); } .slot.heroic { background: #e6f0ff; } .slot.common { background: #f3efe6; }
.itemrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 2px solid #efe8f7; }
.itemrow:first-child { border-top: 0; }
.itemrow .ic { width: 46px; height: 46px; flex: none; border: 3px solid var(--ink); border-radius: 12px; display: grid; place-items: center; background: #f3efe6; padding: 0; cursor: pointer; }
.itemrow .ic.heroic { background: #e6f0ff; } .itemrow .ic.legendary { background: linear-gradient(160deg, #fff3a8, #ffb703); }
.itemrow .ic svg { width: 74%; height: 74%; }

/* fruit and memory */
.fruitgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fruit { text-align: center; padding: 10px 6px; cursor: pointer; }
.fruit .berry { width: 46px; height: 46px; margin: 0 auto; }
.versebox { font: 700 18px/1.5 Georgia, serif; text-align: center; margin: 10px 0 4px; color: #2a2118; }
.orderpieces { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.orderpieces .btn { font: 700 14px/1.3 var(--body); padding: 7px 10px; background: #fff; }
.orderline { min-height: 60px; border: 3px dashed #c9bfd8; border-radius: 14px; padding: 8px; font: 700 16px/1.5 Georgia, serif; }
textarea.recall { width: 100%; min-height: 110px; border: 3px solid var(--ink); border-radius: 14px; padding: 10px; font: 600 16px/1.5 Georgia, serif; resize: vertical; }
.ladder { display: flex; gap: 3px; }
.ladder i { width: 14px; height: 8px; border-radius: 3px; background: #e2d9ee; border: 1.5px solid var(--ink); }
.ladder i.on { background: var(--purple); }

@media (prefers-reduced-motion: reduce) { .pulse, .node.open .disc, .tapme, .hcard.ready, .callout, .pcard.readycall, .joinart .rays { animation: none; } }

/* battle: card table view */
.cardtable { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: linear-gradient(#3c2a63, #1d1430); overflow-y: auto; scrollbar-width: none; }
.cardtable::-webkit-scrollbar { display: none; }
.ctboss:empty, .ctwave:empty, .ctgrid:empty { display: none; }
.ctwave .toprow { margin: 0; color: #fff; }
.ctwave .hands { color: #ffe28a; }
.ucard { position: relative; background: #fff; color: var(--ink); border: 3px solid #000; border-radius: 14px; box-shadow: 0 4px 0 #000; padding: 6px; text-align: center; cursor: pointer; font: inherit; min-width: 0; display: block; }
.ucard.boss { display: flex; gap: 10px; align-items: center; text-align: left; background: linear-gradient(#ffe6f0, #ffc2d6); }
.ucard.boss .art { width: 96px; height: 96px; flex: none; background: #fff; border: 3px solid #000; border-radius: 12px; display: grid; place-items: center; padding: 4px; }
.ucard.boss .bossline { color: var(--ink); }
.ucard.boss .bossline .bh { color: #8a2b55; }
.ucard.boss .bar.boss { height: 16px; }
.ucard .art svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; display: block; }
.ctgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ctgrid.enemies .ucard .art { height: 64px; display: grid; place-items: center; }
.ucard .nm { display: block; font: 400 13px/1.05 var(--head); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucard .hpb { position: relative; height: 10px; border: 2px solid var(--ink); border-radius: 6px; background: #e9e2f2; overflow: hidden; margin-top: 4px; }
.ucard .hpb b { display: block; height: 100%; background: linear-gradient(#7ae582 50%, #4cc764 50%); transition: width .45s; }
.ucard.enemy .hpb b, .ucard.boss .hpb b { background: linear-gradient(#ff8a8a 50%, #ff5d5d 50%); }
.ucard .hpb i { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(58,134,255,.7); }
.ucard .tags { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }
.ucard.boss .tags { justify-content: flex-start; }
.ucard .tags:empty { display: none; }
.ucard .tags .tag { font-size: 9.5px; padding: 1px 4px; }
.ctgrid.heroes .ucard { background: linear-gradient(#e3b8ff, #b98ae8); padding: 5px; }
.ucard .face { position: relative; height: 70px; border: 2px solid #000; border-radius: 9px; overflow: hidden; background: #ffe28a; }
.ucard .face svg { position: absolute; left: 50%; top: 0; width: 76px !important; height: 76px !important; transform: translateX(-50%); }
.ucard .face svg { width: 100%; height: 100%; display: block; }
.ucard .lv { position: absolute; right: 3px; bottom: 1px; font: 400 15px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ucard .st { position: absolute; left: 3px; bottom: 2px; font: 400 11px/1 var(--head); background: var(--gold); border: 1.5px solid var(--ink); border-radius: 5px; padding: 1px 3px; }
.ucard .gst { position: absolute; left: 2px; top: 2px; font: 400 9px/1 var(--head); background: var(--gold); border: 1.5px solid var(--ink); border-radius: 5px; padding: 1px 3px; }
.ucard .mv { margin-top: 4px; font: 900 10px/1.15 var(--body); background: #fff; border: 2px solid #000; border-radius: 7px; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucard.ready { box-shadow: 0 4px 0 #000, 0 0 0 3px var(--gold); animation: readyglow 1s ease-in-out infinite alternate; }
.ucard.ready .mv { background: var(--gold); }
.ucard.armed { transform: translateY(-4px); }
.ucard.armed .mv { background: var(--green); }
.ucard.down { filter: grayscale(1); opacity: .5; pointer-events: none; }
.ucard.focus { outline: 4px solid var(--red); outline-offset: 1px; }
.ucard.oiltarget { outline: 3px dashed #7ae582; outline-offset: 1px; }
.ucard .target { display: none; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font: 400 11px/1 var(--head); color: #fff; background: var(--red); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 5px; z-index: 3; }
.ucard.focus .target { display: block; }
.ctnarr { flex: 1; min-height: 40px; display: grid; place-items: center; text-align: center; font: 400 15px/1.2 var(--head); color: #cbb8ef; padding: 4px; }
.ctnarr b { color: var(--gold); font-weight: 400; }
.cardsview .fx { position: absolute; }

/* questions: full-screen and typed */
.qwrap.full { background: linear-gradient(#fff7e6, #ffe7b0); padding: 0; align-items: stretch; }
.qwrap.full .qcard { max-width: 520px; max-height: none; margin: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: calc(18px + var(--safe-top)) 16px 20px; }
.typed { display: flex; gap: 8px; margin-top: 12px; }
.typed .textin { flex: 1; min-width: 0; font-size: 17px; padding: 10px 12px; }
.textin.right { background: #e8ffe9; border-color: #38b000; }
.textin.wrong { background: #ffecec; border-color: #e63946; }

/* listen */
.listenbtn.on { background: var(--gold); }
.listenbtn.loading { animation: listenwait 1s ease-in-out infinite; }
@keyframes listenwait { 50% { opacity: .45; } }
.scripture .v { transition: background .2s; border-radius: 4px; }
.scripture .v.speaking { background: #fff3a8; box-shadow: 0 0 0 3px #fff3a8; }
/* the word being said (narrate.js wraps each word of a verse being read in .nw while the human voice plays) */
.scripture .nw { border-radius: 4px; transition: background .08s; }
.scripture .nw.saying { background: #ffc93c; box-shadow: 0 0 0 2px #ffc93c; }
/* the narration credit, and the sync nudge that shows while the human voice is reading */
.narrationbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 2px 0; }
.narrationbar .grow { flex: 1; min-width: 140px; }
.syncnudge { display: flex; align-items: center; gap: 6px; }
.syncnudge [data-syncval] { min-width: 30px; text-align: center; font-weight: 800; }
.syncnudge .btn { min-width: 30px; padding: 2px 8px; }
@media (prefers-reduced-motion: reduce) { .listenbtn.loading { animation: none; opacity: .6; } }

/* Daily Bread */
.dailyhero { position: relative; overflow: hidden; padding: 0 !important; }
.dailyhero > svg { display: block; width: 100%; height: auto; }
.dailyhero .dq { position: absolute; left: 10px; right: 10px; top: 10px; background: rgba(255,250,240,.94); border: 2px solid var(--ink); border-radius: 12px; padding: 7px 10px; font: 600 15px/1.4 Georgia, serif; text-align: center; }
.dailyhero .dq b { font: 400 12px/1 var(--head); color: var(--muted); }
.streakstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.sday { position: relative; border: 2px solid var(--ink); border-radius: 11px; background: #f1ecf8; aspect-ratio: .8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.sday .dn { font: 400 13px/1 var(--head); color: var(--muted); }
.sday .di { width: 70%; height: 46%; display: grid; place-items: center; opacity: .55; }
.sday .di svg { width: 100%; height: 100%; }
.sday.got { background: var(--gold); }
.sday.got .dn { color: var(--ink); }
.sday.got .di { opacity: 1; }
.sday.today { box-shadow: 0 0 0 3px var(--green2); background: #e8ffe9; }
.sday.today .di { opacity: 1; }
.streakbig { text-align: center; margin: 6px 0 12px; color: #fff; }
.streakbig .n { display: block; font: 400 76px/1 var(--head); color: var(--gold); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.streakbig .l { font: 400 20px/1 var(--head); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.berrygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.berry9 { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fbf8ff; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 3px; cursor: pointer; text-align: center; color: var(--ink); min-width: 0; }
.berry9 span { width: 30px; height: 30px; flex: none; }
.berry9 span svg { width: 100%; height: 100%; }
.berry9 b { font: 400 12px/1 var(--head); max-width: 100%; white-space: nowrap; }
.berry9 i { font: 900 10px/1 var(--body); font-style: normal; color: var(--muted); }
.chip.keep { background: #fff3c4; }
.sic.small { width: 32px; height: 32px; border-width: 2px; border-radius: 9px; }
.sic.small svg { width: 24px; height: 24px; }

/* home: daily card, event banner, parables */
.dailycard { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: linear-gradient(#fff7cc, #ffe7a0) !important; }
.dailycard.done { background: #f1fbef !important; }
.dailycard .dic { width: 46px; height: 46px; flex: none; border: 3px solid var(--ink); border-radius: 14px; background: #fff; display: grid; place-items: center; }
.dailycard .dic svg { width: 34px; height: 34px; }
.streakpill { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 48px; font: 400 26px/1 var(--head); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.streakpill small { font: 900 10px/1 var(--body); -webkit-text-stroke: 0; color: var(--ink); margin-top: 2px; }
.eventbanner { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1d1420)) !important; border-color: #000; }
.eventbanner .eic { width: 46px; height: 46px; flex: none; border: 3px solid var(--ink); border-radius: 14px; background: #fff; display: grid; place-items: center; }
.eventbanner .eic svg { width: 32px; height: 32px; }
.evdots { display: grid; grid-template-columns: repeat(4, 9px); gap: 3px; flex: none; }
.evdots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #000; background: rgba(255,255,255,.35); }
.evdots i.cleared { background: var(--a); }
.evdots i.open { background: #fff; }
.chaptab.parables .num { background: #6a994e; }
.chaptab.parables .num svg { width: 22px; height: 22px; }
.node.t-puzzle .disc { border-radius: 50% 50% 18px 18px; }
.node.t-puzzle.open .disc { background: var(--pc); }
.node.t-puzzle.cleared .disc { background: color-mix(in srgb, var(--pc) 60%, #fff); }
.node .nstars { display: flex; justify-content: center; gap: 1px; margin-top: -8px; position: relative; z-index: 2; }
.node .nstars svg { width: 18px; height: 18px; }
.starrow { display: inline-flex; gap: 2px; }
.starrow svg { width: 24px; height: 24px; }
.chip.used { opacity: .55; }
.outfitreveal { position: relative; height: 230px; border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; background: radial-gradient(circle, #fff3a8, #ffb703 60%, #e85d04); display: grid; place-items: center; }
.outfitreveal .rays { opacity: 1; transform: translate(-50%, -50%) scale(.8); animation: spin 18s linear infinite; }
.outfitreveal .fig { position: relative; height: 210px; z-index: 1; }
.outfitreveal .fig svg { height: 100%; width: auto; }

/* team: stars, hero stage, Hero Rank, wardrobe */
.cardstars { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
.cardstars svg { width: 13px; height: 13px; }
.tbadge { position: absolute; right: 3px; top: 3px; font: 400 11px/1 var(--head); background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 5px; animation: pulse 1.2s ease-in-out infinite; }
.herostage { position: relative; width: 132px; height: 170px; flex: none; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); overflow: hidden; background: linear-gradient(#bdf1ff, #57cc99); display: flex; justify-content: center; align-items: flex-end; }
.herostage.legendary { background: linear-gradient(#fff3b0, #f4a300); }
.herostage.epic { background: linear-gradient(#f0d9ff, #9d4edd); }
.herostage.rare { background: linear-gradient(#dcebff, #3a86ff); }
.herostage.uncommon { background: linear-gradient(#dcf6d8, #2f9e44); }
.herostage.common { background: linear-gradient(#eceef1, #8d939c); }
.herostage .fig { height: 162px; }
.herostage .fig svg { height: 100%; width: auto; }
.herostage .lvl { position: absolute; right: 7px; bottom: 5px; font: 400 18px/1 var(--head); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.bigstars { display: flex; gap: 2px; margin-top: 6px; }
.bigstars svg { width: 22px; height: 22px; }
.rankpanel.ready { box-shadow: 0 5px 0 var(--ink), 0 0 16px 4px rgba(255,210,63,.9); }
.rankrow { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.rankrow .ric { width: 32px; height: 32px; flex: none; border: 2px solid var(--ink); border-radius: 9px; overflow: hidden; background: #fff3c4; display: grid; place-items: center; }
.rankrow .ric svg { width: 100%; height: 100%; }
.rankrow.done .ric { background: #e8ffe9; }
.okdot { width: 24px; height: 24px; flex: none; }
.okdot svg { width: 100%; height: 100%; }
.wardrobe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.wtile { position: relative; background: linear-gradient(#bdf1ff, #9be7c4); border: 3px solid var(--ink); border-radius: 13px; padding: 4px 3px 5px; cursor: pointer; text-align: center; color: var(--ink); min-width: 0; }
.wtile .wfig { height: 104px; display: flex; justify-content: center; }
.wtile .wfig svg { height: 100%; width: auto; }
.wtile b { display: block; font: 400 11.5px/1.05 var(--head); margin-top: 3px; min-height: 24px; }
.wtile .wtier { display: block; font: 900 9.5px/1 var(--body); color: var(--muted); margin-top: 2px; }
.wtile.on { background: linear-gradient(#fff3b0, #ffd23f); box-shadow: 0 0 0 3px var(--gold2); }
.wtile.locked .wfig { filter: grayscale(1) brightness(.55); }
.wtile .wlock { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 34px; height: 34px; }
.wtile .wlock svg { width: 100%; height: 100%; }
.outfitreveal.dim .fig { filter: grayscale(1) brightness(.6); }
.sub2 { font: 400 15px/1 var(--head); margin: 14px 0 2px; }
.keepgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.keepcard { display: flex !important; flex-direction: column; align-items: center; text-align: center !important; padding: 7px 4px; }
.keepcard .kic { width: 38px; height: 38px; }
.keepcard .kic svg { width: 100%; height: 100%; }
.keepcard b { font-size: 12px; line-height: 1.05; margin-top: 3px; min-height: 26px; display: grid; place-items: center; }
.keepcard .kct { font: 400 18px/1 var(--head); }
.keepcard .krank { display: flex; margin-top: 2px; }
.keepcard .krank svg { width: 10px; height: 10px; }
.keepcard.none { opacity: .6; }

/* puzzles */
.pzintro, .pzscreen { background: linear-gradient(var(--pc), color-mix(in srgb, var(--pc) 45%, #1d1420)); }
.pzpreview { overflow: hidden; padding: 0 !important; height: 200px; }
.pzpreview > svg { display: block; width: 100%; height: 100%; }
.howrow { display: flex; gap: 10px; align-items: flex-start; margin-top: 9px; font-weight: 700; line-height: 1.4; }
.howrow span { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--gold); display: grid; place-items: center; font: 400 15px/1 var(--head); }
.pzstage { flex: 1; min-height: 0; position: relative; margin: 0 10px; border: 3px solid #000; border-radius: 18px; overflow: hidden; background: #1d1420; box-shadow: 0 5px 0 #000; touch-action: none; }
.pzsvg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.pzspot { cursor: pointer; }
.pzfoot { flex: none; padding: 10px 12px calc(12px + var(--safe-bottom)); }
.pzhint { background: #fffaf0; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 10px; font: 800 14px/1.35 var(--body); min-height: 44px; }
.pzbtns { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 38px; flex-wrap: wrap; }
.pzbtns:empty { display: none; }
.pzstat { font: 900 13px/1 var(--body); color: #fff; margin-left: auto; }
.pzstat b { font: 400 18px/1 var(--head); color: var(--gold); }
.pzfloat { font-family: var(--head); stroke: var(--ink); stroke-width: 5px; paint-order: stroke fill; pointer-events: none; }
.pztag { font: 400 14px/1 var(--head); fill: var(--ink); pointer-events: none; }
.pzcount { font: 400 18px/1 var(--head); fill: #fff; stroke: var(--ink); stroke-width: 5px; paint-order: stroke fill; }
.pzbig { font: 400 24px/1 var(--head); fill: var(--ink); }
.pzsmall { font: 800 12px/1 var(--body); fill: var(--muted); }
.pzlabel { font: 400 13px/1 var(--head); fill: var(--ink); pointer-events: none; }
.rounddots { display: flex; gap: 5px; }
.rounddots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; background: rgba(255,255,255,.4); }
.rounddots i.done { background: var(--gold); }
.rounddots i.now { background: #fff; box-shadow: 0 0 0 2px var(--gold); }
.pzround { position: absolute; inset: 0; z-index: 150; background: rgba(20,10,35,.6); display: grid; place-items: center; padding: 20px; animation: fadein .2s; }
.pzround .panel { width: 100%; max-width: 360px; }
.starrow.big svg { width: 42px; height: 42px; }

/* events */
.eventscreen { background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 40%, #1d1420)); color: #fff; }
.daypath { display: grid; gap: 8px; margin-top: 12px; }
.dayrow { display: flex !important; align-items: center; gap: 10px; padding: 9px 11px; }
.dayrow .dnum { width: 38px; height: 38px; flex: none; border-radius: 12px; border: 3px solid var(--ink); background: #f1ecf8; display: grid; place-items: center; font: 400 19px/1 var(--head); }
.dayrow .dnum svg { width: 26px; height: 26px; }
.dayrow .dicon { width: 30px; height: 30px; flex: none; }
.dayrow .dicon svg { width: 100%; height: 100%; }
.dayrow.open { background: #fff3c4 !important; animation: callglow2 1.4s ease-in-out infinite alternate; }
.dayrow.open .dnum { background: var(--gold); }
.dayrow.cleared .dnum { background: var(--green); }
.dayrow.locked, .dayrow.tomorrow { opacity: .75; }
.eventreward { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: 8px; }
.evcard, .evoutfit { border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fffaf0; text-align: center; padding-bottom: 6px; }
.evcard .art svg { display: block; width: 100%; height: auto; }
.evoutfit { background: linear-gradient(#bdf1ff, #9be7c4); }
.evoutfit .fig { height: 110px; display: flex; justify-content: center; }
.evoutfit .fig svg { height: 100%; width: auto; }
.evcard b, .evoutfit b { display: block; font: 400 13px/1.1 var(--head); margin: 5px 4px 0; }
.evcard span, .evoutfit span { font: 800 10.5px/1 var(--body); color: var(--muted); }
.evcard.locked .art, .evoutfit.locked .fig { filter: grayscale(.8) brightness(.8); }
.pzcardtext { font: 800 12.5px/1.25 var(--body); color: var(--ink); display: flex; align-items: center; height: 100%; }
.pzitem { flex: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 2px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.pzitem svg { width: 34px; height: 34px; }
.pzitem span { font: 900 10px/1 var(--body); white-space: nowrap; }
.pzitem.on { background: var(--gold); transform: translateY(-3px); }
.starrow.big { display: flex; justify-content: center; gap: 6px; }
.starrow.big svg { filter: drop-shadow(0 4px 0 #1d1420); }
.results .starrow.big svg { width: 54px; height: 54px; }

/* squad of three: reserves and story combos */
.hcard.reserve { opacity: .85; background: #e7e1ef; transform: scale(.94); transform-origin: bottom; }
.hcard.reserve .mv { color: #6b5f80; }
.hcard.reserve.armed { opacity: 1; background: var(--green); }
.ctgrid.reserves { grid-template-columns: repeat(4, 1fr); }
.ctgrid.reserves .ucard { background: #cbbfe0; padding: 4px; }
.ctgrid.reserves .ucard .face { height: 46px; }
.ctgrid.reserves .ucard .face svg { width: 52px !important; height: 52px !important; }
.combobar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; margin-top: 6px; }
.combobar:empty { display: none; }
.combobtn { display: flex; align-items: center; gap: 8px; width: 100%; background: #f1ecf8; border: 3px solid var(--ink); border-radius: 13px; padding: 5px 8px; text-align: left; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.combobtn b { display: block; font: 400 15px/1.05 var(--head); }
.combobtn small { display: block; font: 800 10.5px/1.2 var(--body); color: var(--muted); }
.combobtn[disabled] { opacity: .6; box-shadow: none; cursor: default; }
.combobtn.ready { background: linear-gradient(#fff3b0, #ffd23f); animation: readyglow 1s ease-in-out infinite alternate; }
.combobtn.ready small { color: #6b3f00; }
.combobtn.on { background: var(--green); animation: none; transform: translateY(-2px); }
.cfaces { display: flex; flex: none; }
.cfaces i, .bfaces i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); overflow: hidden; background: #ffe28a; display: block; margin-left: -8px; }
.cfaces i:first-child, .bfaces i:first-child { margin-left: 0; }
.cfaces i svg, .bfaces i svg { width: 100%; height: 100%; display: block; }
.bfaces { display: flex; justify-content: center; margin-bottom: 4px; }
.bfaces i { width: 40px; height: 40px; }
.swaprow { display: flex; gap: 6px; margin-top: 4px; }
.swapbtn { flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 6px; cursor: pointer; color: var(--ink); text-align: left; }
.swapbtn i { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); flex: none; background: #ffe28a; }
.swapbtn i svg { width: 100%; height: 100%; display: block; }
.swapbtn span { font: 400 13px/1.05 var(--head); }
.swapbtn small { display: block; font: 800 10px/1 var(--body); color: var(--muted); }
.slots.squad { flex-direction: row; align-items: flex-end; gap: 14px; }
.slotgroup { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slotgroup.res .pslot { width: 52px; }
.slotgroup.res .pcard { opacity: .9; }
.slotlabel { font: 400 12px/1 var(--head); color: #ffe28a; letter-spacing: .5px; text-transform: uppercase; }
.combopreview { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.cchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 2px solid #000; border-radius: 999px; padding: 3px 9px 3px 4px; font: 800 11.5px/1.2 var(--body); color: #fff; }
.cchip.on { background: var(--gold); color: var(--ink); font: 400 13px/1 var(--head); }
.cchip .cfaces i { width: 24px; height: 24px; }
.combolist { display: grid; gap: 8px; }
.combocard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.combocard b { font-size: 15px; }
.combocard.locked { opacity: .7; }
.moverow .cfaces { margin-top: 2px; }

/* ---------------------------------------------------------------- Fellowship */
.fellowbtn { position: relative; }
.nbadge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--red); color: #fff; font: 900 11px/16px var(--body); border: 2px solid var(--ink); padding: 0 4px; }
.fellowship .ftabs { display: flex; gap: 8px; padding: 0 16px 6px; flex-wrap: wrap; }
.fellowship .ftabs .btn { flex: 1; min-width: 90px; }
.profilecard { padding: 12px; display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; color: var(--ink); }
.profilecard .pchero { position: relative; background: linear-gradient(#bdf1ff, #9be7b4); border: 3px solid var(--ink); border-radius: 14px; height: 124px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.profilecard .pchero .fig { width: 88px; } .profilecard .pchero .fig svg { width: 100%; display: block; }
.profilecard .pcstars { position: absolute; top: 3px; left: 0; right: 0; display: flex; justify-content: center; } .profilecard .pcstars svg { width: 14px; height: 14px; }
.pcstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.pcstats div { background: #f6f1ff; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 3px; text-align: center; min-width: 0; }
.pcstats b { display: block; font: 400 17px/1 var(--head); } .pcstats span { display: block; font: 800 9.5px/1.1 var(--body); color: var(--muted); }
.pcrow { grid-column: 1/-1; display: flex; gap: 6px; flex-wrap: wrap; }
.pch { position: relative; width: 50px; } .pch .face { width: 50px; height: 50px; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #ffe28a; } .pch .face svg { width: 100%; height: 100%; display: block; }
.pch .st, .pch .lv { position: absolute; font: 900 10px/1 var(--body); background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 3px; }
.pch .st { left: -3px; bottom: -4px; color: #b8860b; } .pch .lv { right: -3px; bottom: -4px; }
.pcbadges { grid-column: 1/-1; display: flex; gap: 4px; flex-wrap: wrap; } .pcb { width: 34px; display: block; } .pcb svg { width: 100%; display: block; }
.pcbadges.small { grid-column: auto; flex: none; } .pcbadges.small .pcb { width: 26px; }
.pcfruit { grid-column: 1/-1; display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.pcfruit span { flex: 1; height: 100%; border: 2px solid var(--ink); border-radius: 6px; background: #f1ecf8; position: relative; overflow: hidden; }
.pcfruit span i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c); }
.pcfruit small { font: 900 10px/1 var(--body); color: var(--muted); align-self: center; }
.codebig { font: 400 24px/1 var(--head); letter-spacing: 2px; background: #fff7d6; border: 3px solid var(--ink); border-radius: 10px; padding: 6px 8px; }
.toggle-row input { width: 26px; height: 26px; accent-color: var(--green); }
.badgegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badgecard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 8px; cursor: pointer; position: relative; color: var(--ink); font-family: var(--body); }
.badgecard .bic { width: 52px; } .badgecard .bic svg { width: 100%; display: block; }
.badgecard .h { font-size: 14px; line-height: 1.05; } .badgecard .bar { width: 100%; }
.badgecard .pill { position: absolute; top: 6px; right: 6px; }
.badgecard.claim { animation: claimGlow 1.4s ease-in-out infinite; }
@keyframes claimGlow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px #ffd23f; } }
.encgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.friendrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; margin-top: 10px; text-align: left; cursor: pointer; color: var(--ink); font-family: var(--body); }
.friendrow .face, .boardrow .face { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #ffe28a; flex: none; } .friendrow .face svg, .boardrow .face svg { width: 100%; height: 100%; display: block; }
.boardtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.boardtabs .chip.on { background: var(--gold); }
.boardrow { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-bottom: 2px dashed #ded5ec; padding: 7px 2px; cursor: pointer; font: 800 15px var(--body); color: var(--ink); text-align: left; }
.boardrow:last-child { border-bottom: 0; } .boardrow.me { background: #fff7d6; border-radius: 10px; }
.boardrow .rank { width: 28px; font: 400 18px var(--head); text-align: center; } .boardrow .val { font: 400 18px var(--head); }
.boardrow:nth-child(1) .rank { color: #d4a017; } .boardrow:nth-child(2) .rank { color: #8a8a99; } .boardrow:nth-child(3) .rank { color: #b0703a; }
@media (max-width: 380px) { .profilecard { grid-template-columns: 76px 1fr; } .profilecard .pchero { height: 104px; } .profilecard .pchero .fig { width: 70px; } }

/* ---- Scripture reading and memorizing (practice feedback, hints, Verse of the Day, reading gate) ---- */
.bg-cream .topbar .title.outlined, .bg-vine .topbar .title.outlined, .bg-cream .sectiontitle.outlined, .bg-vine .sectiontitle.outlined { color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255,255,255,.85); }
.opts .btn[disabled].right, .opts .btn[disabled].wrong { filter: none; opacity: 1; }
.opts .btn.right { background: var(--green); } .opts .btn.wrong { background: #ffb3b3; }
.blank.filled { cursor: pointer; background: #e6f0ff; border-radius: 6px 6px 0 0; padding: 0 4px; }
.blank.ok, .qprompt .blank.ok { color: #1f7a00; border-bottom-color: #38b000; background: #e8ffe9; border-radius: 6px 6px 0 0; padding: 0 4px; }
.blank.bad, .qprompt .blank.fix { color: #b3001b; border-bottom-color: #e63946; background: #ffecec; border-radius: 6px 6px 0 0; padding: 0 4px; }
.blank.bad s { color: #9a7f86; font-weight: 600; margin-right: 2px; }
.checkrow { margin-top: 12px; gap: 8px; align-items: center; }
.checkrow .tiny { font-weight: 800; line-height: 1.25; }
.orderline { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.orderline .btn.piece { font: 700 14px/1.3 var(--body); padding: 6px 9px; background: #fff3c4; box-shadow: 0 2px 0 var(--ink); border-width: 2px; border-radius: 10px; }
.orderline .btn.piece.right { background: var(--green); } .orderline .btn.piece.wrong { background: #ffb3b3; }
.orderline .btn.piece[disabled] { filter: none; opacity: 1; }
.pfb { border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; }
.pfb.good { background: #e8ffe9; } .pfb.bad { background: #fff1ec; }
.pfb > .h { font-size: 18px; display: block; }
.pfb .stepup { color: #1f7a00; font-weight: 900; margin-top: 2px; }
.pfb .pverse, .pfb .recalldiff { font-size: 15.5px; line-height: 1.6; text-align: left; margin-top: 8px; background: #fffaf0; border: 2px solid #eadfc8; border-radius: 12px; padding: 8px 10px; }
.pfb .tiny { text-align: left; font-weight: 700; }
.recalldiff .miss, .pfb .tiny .miss { background: #ffd6d6; color: #9b0015; border-radius: 4px; padding: 0 3px; }
.recalldiff .miss s { color: #b98a93; font-weight: 500; }
.recalldiff .slip, .pfb .tiny .slip { text-decoration: underline dotted #38b000 2px; text-underline-offset: 3px; }
.recalldiff .hinted, .pfb .tiny .hinted { box-shadow: inset 0 -3px 0 #c7a4f0; }
.recallhint { font: 600 15px/1.6 Georgia, serif; text-align: center; margin: 6px 0 8px; color: #4b3f5e; word-spacing: 2px; }
.recallhint b { color: var(--purple2); }
.spotbtn { margin-top: 8px; }
.feedback .spotbtn { display: flex; margin: 8px auto 10px; }
.spot { text-align: left; font-size: 15px; line-height: 1.6; background: #fffaf0; border: 2px solid #eadfc8; border-radius: 12px; padding: 8px 10px; margin: 8px 0; max-height: 260px; overflow-y: auto; }
.spot p { margin: 0; }
.spot .v { opacity: .6; }
.spot .v.hl { opacity: 1; background: #fff3a8; box-shadow: 0 0 0 3px #fff3a8; border-radius: 4px; }
.spot mark { background: #7ae582; color: var(--ink); border-radius: 3px; padding: 0 2px; }
.votd { background: linear-gradient(160deg, #fffdf5, #fff3c4); }
.votdlabel { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold2); }
.votdtext { font-size: 15.5px; line-height: 1.5; margin-top: 6px; }
.votd.done { background: linear-gradient(160deg, #f3fff4, #d8f5dc); }
.stamp { display: inline-flex; align-items: center; gap: 3px; font: 400 13px/1 var(--head); color: #9d6b00; border: 2px dashed #e0b43a; border-radius: 999px; padding: 4px 9px; transform: rotate(-4deg); background: #fff; white-space: nowrap; }
.stamp.on { color: #fff; background: #38b000; border: 2px solid var(--ink); }
.stamp svg { width: 14px; height: 14px; }
.streakline { margin-top: 12px; gap: 10px; background: #f3fff4; }
.footbar.wrap { flex-wrap: wrap; }
.readgate { flex-basis: 100%; text-align: center; font: 800 13px/1.2 var(--body); color: var(--muted); margin: -2px 0 2px; }
.gatebtn[disabled] { filter: none; opacity: .9; background: #fff3c4; }
.gatebtn .ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.gatebtn .ring circle { fill: none; stroke: #e6d9b8; stroke-width: 3.5; }
.gatebtn .ring .fill { stroke: var(--ink); stroke-dasharray: 100; stroke-dashoffset: 100; animation: gatefill var(--gate, 3s) linear forwards; }
@keyframes gatefill { to { stroke-dashoffset: 0; } }
.mvbtn .tiny.muted { white-space: nowrap; display: inline-block; }
.roles .row > span:first-child { flex: none; width: 24px !important; height: 24px; border-radius: 7px; background: #fff8e6; border: 2px solid #000; display: grid; place-items: center; }
.roles .row > span:first-child svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .gatebtn .ring .fill { animation: none; stroke-dashoffset: 0; } }
.nobr { white-space: nowrap; } .nobr .blank { margin-right: 1px; }

/* ================================================================ Fruit of the Spirit: basket, powers, the Vine */
.tag.joyful { background: #e09f00; } .tag.calmed { background: #b5838d; } .tag.steadfast { background: #7b2cbf; }
.tag.disciplined, .tag.escape { background: #1f7a70; } .tag.stillness { background: #2f6fd6; }
.unit.ally .tags { top: auto; bottom: -34px; transform: translate(-50%, 0); }
.hcard .lv { right: 5px; bottom: 2px; }
/* the basket bar in the battle tray */
.basketbar { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; }
.basketbar:empty { display: none; }
.basket { position: relative; flex: none; width: 92px; height: 46px; }
.basket .bk { position: absolute; left: 0; right: 0; bottom: -2px; height: 36px; display: block; }
.basket .bk svg { width: 100%; height: 100%; display: block; }
.basket .pips { position: absolute; left: 9px; right: 9px; top: 3px; display: flex; justify-content: space-between; z-index: 1; }
.basket .bk { z-index: 0; }
.fruitbtns.n3 .fruitbtn { flex-direction: column; justify-content: center; gap: 0; padding: 2px 2px 3px; text-align: center; }
.fruitbtns.n3 .fruitbtn .fb { width: 24px; height: 24px; }
.fruitbtns.n3 .fruitbtn b { font-size: 12px; max-width: 100%; }
.fruitbtns.n3 .fruitbtn small { display: none; }
.basket .pip { width: 24px; height: 24px; display: block; }
.basket .pip svg { width: 100%; height: 100%; display: block; }
.basket .pip.on { filter: drop-shadow(0 0 3px rgba(255, 220, 90, .9)); }
.fruitbtns { flex: 1; min-width: 0; display: grid; gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fruitbtns.n1 { grid-template-columns: minmax(0, 1fr); } .fruitbtns.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fruitbtn { display: flex; align-items: center; gap: 4px; min-width: 0; background: #f6f1fb; border: 3px solid var(--ink); border-radius: 12px; padding: 3px 5px 3px 3px; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); text-align: left; position: relative; }
.fruitbtn .fb { width: 30px; height: 30px; flex: none; filter: grayscale(.7); opacity: .75; }
.fruitbtn .fb svg { width: 100%; height: 100%; display: block; }
.fruitbtn .fbt { min-width: 0; }
.fruitbtn b { display: block; font: 400 13.5px/1.05 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fruitbtn small { display: block; font: 800 9.5px/1.15 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fruitbtn.ready { background: linear-gradient(#fff, color-mix(in srgb, var(--c) 32%, #fff)); animation: fruitglow 1.1s ease-in-out infinite alternate; }
.fruitbtn.ready .fb { filter: none; opacity: 1; }
.fruitbtn.sel { background: var(--c); transform: translateY(-3px); animation: none; }
.fruitbtn.sel small, .fruitbtn.sel b { color: var(--ink); }
@keyframes fruitglow { from { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 var(--c); } to { box-shadow: 0 3px 0 var(--ink), 0 0 10px 3px var(--c); } }
.basketrest { display: flex; align-items: center; gap: 8px; font: 800 12px/1.2 var(--body); color: var(--muted); }
.basketrest svg { width: 44px; height: 32px; flex: none; }
/* flying berries and power effects */
.flyberry { position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 120; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(29,20,32,.35)); }
.flyberry svg { width: 100%; height: 100%; display: block; }
.flyberry.glow { filter: drop-shadow(0 0 10px #fffbe0) drop-shadow(0 0 16px var(--c)); }
.miniberry { position: absolute; left: 0; top: 0; width: 28px; height: 28px; z-index: 64; pointer-events: none; }
.miniberry svg { width: 100%; height: 100%; display: block; }
.ripering { position: absolute; z-index: 119; width: 70px; height: 70px; border-radius: 50%; border: 6px solid var(--c); box-shadow: 0 0 18px var(--c), inset 0 0 12px var(--c); pointer-events: none; }
.sparkle { position: absolute; z-index: 121; pointer-events: none; width: 9px; height: 9px; background: #fff3a8; border: 1.5px solid var(--ink); transform-origin: center; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.powerbanner { position: absolute; inset: 0; z-index: 72; pointer-events: none; overflow: hidden; }
.powerbanner .pring { position: absolute; left: 50%; top: 45%; width: 150px; height: 150px; border-radius: 50%; border: 10px solid var(--c); box-shadow: 0 0 30px var(--c); }
.powerbanner .pring.two { border-width: 5px; border-color: #fff; }
.powerbanner .pbin { position: absolute; left: 0; right: 0; top: 45%; margin-top: -58px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px 10px; background: linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); box-shadow: 0 6px 0 rgba(29,20,32,.55); }
.powerbanner .pbberry { width: 76px; height: 76px; flex: none; background: #fff; border: 4px solid var(--ink); border-radius: 50%; padding: 6px; box-shadow: 0 4px 0 var(--ink); }
.powerbanner .pbberry svg { width: 100%; height: 100%; display: block; }
.powerbanner .pbtext { min-width: 0; color: #fff; }
.powerbanner .pbfruit { font: 900 11px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; color: var(--ink); background: #fff; display: inline-block; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 6px; }
.powerbanner .pbname { font: 400 28px/1.02 var(--head); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; margin-top: 3px; }
.powerbanner .pbquote { font: 800 13px/1.3 var(--body); color: var(--ink); margin-top: 3px; }
.powerbanner .pbquote b { font-weight: 900; white-space: nowrap; }
.aura { position: absolute; z-index: 55; width: 96px; height: 96px; border-radius: 50%; border: 5px solid var(--c); box-shadow: 0 0 16px var(--c), inset 0 0 14px var(--c); pointer-events: none; }
.sweep { position: absolute; left: 0; right: 0; top: 10%; height: 46%; z-index: 56; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, #fff) 35%, #fff 50%, color-mix(in srgb, var(--c) 70%, #fff) 65%, transparent); mix-blend-mode: screen; border-radius: 40%; filter: blur(2px); }
.seedplot { position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; width: 70px; text-align: center; pointer-events: none; }
.seedplot .sp { width: 62px; height: 54px; margin: 0 auto; }
.seedplot .sp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seedplot .spcount { display: inline-block; margin-top: 2px; font: 400 11px/1 var(--head); color: #fff; background: #2d6a4f; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 5px; white-space: nowrap; }
.helpmore { margin-top: 10px; }
.vineshare { display: flex; align-items: center; gap: 5px; color: #2d6a4f; margin-top: 6px; } .vineshare svg { width: 16px; height: 16px; flex: none; }
.vinenews { margin-top: 8px; font-size: 12px; }
.traytip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 30px; }
.helpmore summary { font: 400 16px/1.2 var(--head); cursor: pointer; padding: 4px 0; }
/* the Vine screen */
.vinequote { font-weight: 800; font-size: 14px; line-height: 1.45; }
.vinequote .ref { color: #2f6fd6; white-space: nowrap; }
.vinestart { margin-top: 12px; background: linear-gradient(160deg, #fffdf5, #ffe9a8); }
.vinestart .startberry { width: 46px; height: 46px; flex: none; animation: bob 1.6s ease-in-out infinite; }
.focuscard { display: block; width: 100%; margin-top: 12px; background: #fff3c4; cursor: pointer; }
.vinebox { margin-top: 12px; border: 3px solid var(--ink); border-radius: 22px; background: linear-gradient(#bde0fe 0%, #e8f7ff 55%, #d8f3dc 100%); box-shadow: 0 5px 0 var(--ink); overflow: hidden; }
.vineart { display: block; width: 100%; height: auto; }
.vineart .trunk { stroke-dasharray: 100; animation: vinedraw 1.1s ease-out both; }
.vineart .tendril { animation: fadein .4s 1s both; }
.vineart .leaf { transform-box: fill-box; transform-origin: 0 0; animation: leafin .45s cubic-bezier(.3,1.6,.5,1) var(--d) both; }
.vineart .root { stroke-dasharray: 90; stroke-dashoffset: 90; animation: rootdraw .7s ease-out var(--d) forwards; }
.vineart .cluster { cursor: pointer; transform-box: fill-box; }
.vineart .cluster .cin { animation: clusterin .5s cubic-bezier(.3,1.6,.5,1) var(--d) both; transform-box: fill-box; transform-origin: 50% 10%; }
.vineart .cluster.grew .cin { animation: clusterin .5s cubic-bezier(.3,1.6,.5,1) var(--d) both, grewpulse 1.2s ease-in-out calc(var(--d) + .5s) 2; }
.vineart .cluster.pop .cin { animation: grewpulse .8s ease-in-out infinite; }
.vineart .cluster.bud { opacity: .85; }
.vineart .ripeglow { animation: glowpulse 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.vineart .carryring { animation: spinring 8s linear infinite; transform-box: fill-box; transform-origin: center; }
.vineart .cluster:focus { outline: none; }
.vineart .cluster:focus-visible circle:first-child { stroke: var(--ink); stroke-width: 3; }
@keyframes vinedraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rootdraw { to { stroke-dashoffset: 0; } }
@keyframes leafin { from { transform: scale(0); } }
@keyframes clusterin { from { transform: scale(0); opacity: 0; } }
@keyframes grewpulse { 50% { transform: scale(1.18); filter: drop-shadow(0 0 8px #ffd23f); } }
@keyframes glowpulse { from { opacity: .18; transform: scale(.92); } to { opacity: .42; transform: scale(1.06); } }
@keyframes spinring { to { transform: rotate(360deg); } }
.carrybox { margin-top: 12px; }
.carryrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.carryslot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 84px; border: 3px dashed #b9a7cf; border-radius: 14px; background: #fbf8ff; color: var(--muted); padding: 5px 3px; text-align: center; min-width: 0; }
.carryslot small { font: 800 10px/1.15 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carryslot.locked svg { width: 20px; height: 20px; opacity: .5; }
.carryslot.on { border: 3px solid var(--ink); background: linear-gradient(#fff, color-mix(in srgb, var(--c) 28%, #fff)); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.carryslot.on span { width: 38px; height: 38px; } .carryslot.on span svg { width: 100%; height: 100%; }
.carryslot.on b { font: 400 14px/1 var(--head); }
.fruit.carried { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--c); }
.fruithead .bigberry { width: 70px; height: 70px; flex: none; }
.fruithead .bigberry svg { width: 100%; height: 100%; }
.powercard { margin-top: 12px; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 12px 12px; background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--c) 22%, #fff)); box-shadow: 0 4px 0 var(--ink); }
.powercard .pbadge { font: 900 10px/1 var(--body); text-transform: uppercase; letter-spacing: .6px; background: var(--c); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; flex: none; }
.powercard .pquote { font: 700 14px/1.4 Georgia, serif; margin-top: 6px; }
.powercard .pquote span { font: 900 12px/1 var(--body); color: var(--muted); white-space: nowrap; }
.powercard .pnow, .powercard .pnext { font: 800 13.5px/1.4 var(--body); margin-top: 6px; }
.powercard .pnext { color: var(--muted); }
.mtrack { display: flex; flex-direction: column; gap: 6px; }
.mstep { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid #d9cfe6; border-radius: 12px; padding: 7px 9px; color: var(--muted); }
.mstep .mlv { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--head); border: 3px solid #cbbedc; background: #f3eef9; }
.mstep b { font-size: 15px; }
.mstep .small { font-weight: 700; }
.mstep.on { border-color: var(--ink); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.mstep.on .mlv { background: var(--c); border-color: var(--ink); }
.plusxp { font: 900 13px/1 var(--body); color: #38b000; margin-right: 6px; }
.popcard { animation: popcard .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes popcard { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.milestone { text-align: center; }
.milestone .mberry { width: 96px; height: 96px; margin: 0 auto 4px; animation: grewpulse 1.4s ease-in-out infinite; }
.milestone .mberry svg { width: 100%; height: 100%; }
.milestone .scripture.quote { text-align: left; }
.mrows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; max-height: 42vh; overflow-y: auto; }
.mrow { display: flex; align-items: center; gap: 6px; background: #fbf8ff; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 6px; }
.mrow span { width: 30px; height: 30px; flex: none; } .mrow span svg { width: 100%; height: 100%; }
.mrow b { font-size: 13px; }
/* the party screen's Fruit picker */
.fruitpick { margin-top: 8px; }
.fpchips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; }
.fpchips::-webkit-scrollbar { display: none; }
.fpchip { flex: none; display: flex; align-items: center; gap: 3px; background: #4a3326; border: 3px solid #1d1420; border-radius: 999px; padding: 2px 9px 2px 3px; color: #f3e3cf; cursor: pointer; }
.fpchip span { width: 26px; height: 26px; } .fpchip span svg { width: 100%; height: 100%; display: block; }
.fpchip b { font: 400 13px/1 var(--head); white-space: nowrap; }
.fpchip.hint { border-color: #ffe28a; }
.fpchip.on { background: var(--c); color: var(--ink); box-shadow: 0 3px 0 #1d1420; transform: translateY(-2px); }
.fpnote { color: #ffe28a; line-height: 1.3; min-height: 14px; }
.fpchip.lockedslot { cursor: default; background: transparent; border-style: dashed; border-color: #8a7a6a; color: #cdbba6; padding: 2px 10px 2px 6px; }
.fpchip.lockedslot svg { width: 16px; height: 16px; opacity: .7; }
.fpchip.lockedslot b { font: 800 11px/1 var(--body); }
/* The Vine, simplified: role tags, one plain line per Fruit, silhouettes for Fruit not discovered yet */
.rolechip { display: inline-block; font: 900 10px/1 var(--body); text-transform: uppercase; letter-spacing: .5px; background: color-mix(in srgb, var(--c, #7ae582) 35%, #fff); border: 2px solid var(--ink); border-radius: 7px; padding: 3px 6px; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.fruitgrid .fruit { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.fruitgrid .fruit .bar { align-self: stretch; margin-top: auto !important; }
.fruit .fname { font-size: 15px; margin-top: 3px; }
.fruit .frole { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.fruit .frole .rolechip { font-size: 9px; padding: 2px 5px; }
.fruit .flv { font: 900 11px/1 var(--body); }
.fruit .fplain { font: 800 11px/1.25 var(--body); margin: 5px 0 6px; color: var(--ink); }
.fruit.locked { background: #f1ede4; color: var(--muted); box-shadow: 0 3px 0 #b9ab94; border-color: #b9ab94; }
.fruit.locked .berry { opacity: .55; }
.fruit.locked .fname { color: #8d8577; }
.fruit.locked .fplain { color: #6f675c; font-weight: 700; }
.fruit.locked .fplain b { color: var(--ink); font-weight: 900; }
.vineart .cluster.locked { opacity: .9; }
.carryslot.locked small { white-space: normal; line-height: 1.2; }
.howgrow { margin-top: 8px; }
.howgrow summary { font: 400 15px/1.2 var(--head); cursor: pointer; color: #2d6a4f; list-style: none; }
.howgrow summary::-webkit-details-marker { display: none; }
.howgrow summary::before { content: "▸ "; } .howgrow[open] summary::before { content: "▾ "; }
.howlist { margin: 6px 0 6px 18px; padding: 0; font: 700 13px/1.4 var(--body); }
.howlist li { margin: 3px 0; }
.powercard .pplain { font: 400 19px/1.2 var(--head); margin-top: 8px; }
.powercard .pstat { display: inline-block; font: 900 14px/1 var(--body); margin-top: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 6px 9px; }
.pmore { margin-top: 8px; }
.pmore summary { font: 900 12px/1 var(--body); color: var(--muted); cursor: pointer; }
.pmore ul { margin: 6px 0 0 18px; padding: 0; font: 700 13px/1.4 var(--body); }
.levelup { margin-top: 10px; font: 800 13px/1.4 var(--body); background: #fff; border: 2px dashed color-mix(in srgb, var(--c) 70%, var(--ink)); border-radius: 12px; padding: 7px 10px; }
.growpath .itemrow .ic svg { width: 70%; height: 70%; }
.morereads summary { font: 900 12px/1 var(--body); color: var(--muted); cursor: pointer; padding: 8px 0 2px; }
.milestone.discover .kicker { font: 900 11px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; color: #2d6a4f; margin-bottom: 6px; }
.milestone.discover .plainbig { font: 400 20px/1.2 var(--head); margin: 8px 0 6px; }
.discrows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.discrow { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #fff), #fff); border: 2px solid var(--ink); border-radius: 12px; padding: 5px 8px; }
.discrow > span { width: 38px; height: 38px; flex: none; } .discrow > span svg { width: 100%; height: 100%; }
.tinychip { font-size: 11px; padding: 3px 8px; box-shadow: none; border-width: 2px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 700px) {
  .traytip { display: none; }
  .basket { width: 80px; height: 40px; } .basket .pip { width: 21px; height: 21px; } .basket .bk { height: 30px; }
  .fruitbtn .fb { width: 26px; height: 26px; } .fruitbtn small { display: none; }
  .hcard .mv { font-size: 9px; }
  .hcard .face { aspect-ratio: auto; height: 48px; }
  .hcard .face svg { width: auto; margin: 0 auto; }
  .combobtn { padding: 3px 8px; } .combobtn small { display: none; }
  .traybtns { margin-top: 6px; } .fightbtn, .oilbtn, .traybtns .toggle.big { padding-top: 8px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fruitbtn.ready, .vinestart .startberry, .vineart .ripeglow, .vineart .carryring, .milestone .mberry { animation: none; } }

/* ---------------------------------------------------------------- Your Bible */
.yourbible { display: block; width: 100%; margin-top: 12px; cursor: pointer; color: var(--ink); font-family: var(--body); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.bgrid.mini { grid-template-columns: repeat(22, 1fr); gap: 2px; margin-top: 8px; }
.btile { position: relative; height: 34px; border: 2px solid #d9cfe8; border-radius: 7px; background: #f6f1ff; overflow: hidden; }
.btile.on { border-color: var(--ink); }
.btile i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#ffe28a, #ffc300); }
.btile span { position: relative; display: block; font: 900 10px/30px var(--body); text-align: center; color: #6b5f80; }
.btile.on span { color: var(--ink); }
.bgrid.mini .btile { height: 14px; border-width: 1.5px; border-radius: 3px; }
.bgrid.mini .btile span { display: none; }
.finaleheroes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.finaleheroes span { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #ffe28a; }
.finaleheroes span svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- polish: headers, toasts, encouragements */
.subtitle.oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .bg-sky > .topbar { gap: 6px !important; padding-left: 10px; padding-right: 10px; }
  .bg-sky > .topbar .avatar { width: 44px; height: 44px; }
  .bg-sky > .topbar .chip { padding: 3px 7px 3px 4px; font-size: 13px; gap: 3px; }
  .bg-sky > .topbar .chip svg { width: 18px; height: 18px; }
  .bg-sky > .topbar .iconbtn { width: 38px; height: 38px; }
}
.node .lab span.wrap2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* While a sheet or dialog is open, toasts sit at the top of the screen, clear of its buttons. */
body:has(#overlay .sheetwrap, #overlay .modalwrap) #toast { bottom: auto; top: calc(10px + var(--safe-top)); font-size: 13px; padding: 8px 12px; }
.enccard { margin-top: 12px; background: #fff0f3; }
.encline { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0 0; color: var(--ink); font: 800 14px/1.35 var(--body); cursor: pointer; }
.encline .tiny { display: block; margin-top: 1px; }
.encmore { display: block; background: none; border: 0; padding: 6px 0 0; color: #3a86ff; cursor: pointer; }
.codepanel { margin-top: 12px; }
.codepanel .coderow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.receivedrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 2px dashed #eadfc8; }
.receivedrow:first-of-type { border-top: 0; }
.receivedrow .ric { width: 26px; flex: none; }
.receivedrow.new b.h::after { content: "NEW"; margin-left: 6px; font: 900 9px/1 var(--body); background: var(--red); color: #fff; border-radius: 6px; padding: 2px 4px; vertical-align: 2px; }

/* ---------------------------------------------------------------- landscape phone battle: arena left, tray right */
@media (orientation: landscape) and (max-height: 520px) {
  #app:has(> .battle) { max-width: 100%; }
  .battle { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 42%, 400px); grid-template-rows: auto minmax(0, 1fr); }
  .battle > .btop { grid-column: 1; grid-row: 1; padding-top: calc(6px + var(--safe-top)); padding-bottom: 6px; }
  .battle > .arena { grid-column: 1; grid-row: 2; }
  .battle > .tray { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 3px solid var(--ink); overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: calc(6px + var(--safe-top)) calc(8px + var(--safe-right, 0px)) calc(6px + var(--safe-bottom)) 8px; scrollbar-width: none; }
  .battle .traytip { display: none; }
  .battle .hcard .face { aspect-ratio: auto; height: 52px; }
  .battle .hcard .face svg { width: auto; margin: 0 auto; }
  .battle .fightbtn, .battle .oilbtn, .battle .traybtns .toggle.big { padding-top: 8px; padding-bottom: 8px; }
  .battle .movesheet { left: 6px; right: calc(clamp(280px, 42%, 400px) + 6px); bottom: 6px; max-height: calc(100% - 60px); }
}

/* Where nobody fights: no health bars on the story's hardship; the top bar fills as the story moves on. */
.battle.wordonly .unit.enemy .hpb, .battle.wordonly .ucard.enemy .hpb { display: none; }
.bar.boss.progress > b { background: linear-gradient(#ffe28a 50%, #ffc300 50%); }
.herostats { display: flex; gap: 10px; margin-top: 8px; font: 900 13px/1 var(--body); }
.herostats span { display: inline-flex; align-items: center; gap: 3px; }
.herostats svg { width: 16px; height: 16px; }
.nextlv { font: 800 11.5px/1.3 var(--body); margin-top: 5px; color: #b9f3c1; }
.lvgain { font: 900 11.5px/1.3 var(--body); color: #38b000; margin-top: 3px; }

/* ---- Battle clarity (round 4): enemy turns, hurt heroes, big numbers, status explain, Fruit results ---- */
.stakes .note { grid-column: 1 / -1; background: #fff3c4; }
.pop.dmg { font-size: 28px; }
.pop.dmg.big { font-size: 34px; color: #fff6d6; }
.pop.crit { font-size: 36px; }
.pop.crit.word { font-size: 40px; }
/* A Word strike's number by how well the answer went (fx/numtier.js): plain (white) < good (gold, larger, ✦) < great (bright gold,
   largest, glow, ★). Size and a small icon change with the color, so color is never the only signal. A slow answer is just plain, never small. */
.pop.crit.word.plain { font-size: 38px; color: #fff; }
.pop.crit.word.good { font-size: 46px; color: #ffe27a; }
.pop.crit.word.great { font-size: 56px; color: #ffc61a; filter: drop-shadow(0 0 8px rgba(255, 214, 64, .9)); }
.pop .ni { display: inline-block; width: .72em; height: .72em; margin-right: .14em; vertical-align: .02em; }
.pop .ni svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Cards view is drawn at phone size and the arena view is scaled with its stage: keep the biggest tier from crowding a narrow screen. */
.cardsview .pop.crit.word.great { font-size: 50px; }
@media (max-width: 380px) { .pop.crit.word.great { font-size: 50px; } .pop.crit.word.good { font-size: 42px; } }
.pop.herohit { color: #ff4d4d; font-size: 34px; -webkit-text-stroke: 6px var(--ink); z-index: 62; }
.pop.herohit.small { font-size: 22px; color: #ff8a8a; }
/* After a wrong answer the enemy seizes the moment: a soft, small, neutral number (never red, never shaming). */
.pop.herohit.soft { font-size: 19px; color: #d9d2ec; -webkit-text-stroke: 4px var(--ink); }
.bubble.foe { background: #ff5d5d; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-size: 15px; z-index: 58; }
.foeturn { position: absolute; left: 50%; top: 10px; z-index: 64; transform: translateX(-50%); font: 400 15px/1 var(--head); color: #fff; background: #c1121f; border: 3px solid var(--ink); border-radius: 999px; padding: 5px 12px; box-shadow: 0 3px 0 var(--ink); pointer-events: none; white-space: nowrap; }
.foeorb { position: absolute; left: 0; top: 0; z-index: 57; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb3b3, #c1121f 55%, #3a0a14); border: 2px solid var(--ink); box-shadow: 0 0 14px #ff3b3b; pointer-events: none; }
.hcard.hurt { background: #ffd6d6; }
.hcard.hurt .hp b { background: #ff5d5d; }
.ctnarr .foe { color: #ffb3b3; }
.tag[data-status] { cursor: pointer; }
.mvbtn .gloss { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mvbtn .gloss .tag { font-size: 10.5px; padding: 2px 6px; }
.statuspop { position: absolute; z-index: 90; max-width: min(300px, calc(100% - 16px)); display: flex; gap: 8px; align-items: flex-start; background: #fffdf5; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; box-shadow: 0 4px 0 var(--ink); font: 800 13px/1.3 var(--body); }
.statuspop.bad { background: #fff0f0; }
.statuspop .tag { flex: none; }
.glosslist { display: grid; gap: 6px; padding: 6px 2px; font: 700 13px/1.3 var(--body); }
.glosslist .tag { margin-right: 4px; }
.powerbanner .pbresult { position: absolute; left: 50%; top: calc(45% + 70px); transform: translateX(-50%); width: min(92%, 360px); text-align: center; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 7px 10px; font: 900 14px/1.3 var(--body); box-shadow: 0 4px 0 var(--ink); }
.fruitresult { position: absolute; left: 50%; top: 31%; z-index: 66; transform: translateX(-50%); width: min(92%, 360px); text-align: center; background: color-mix(in srgb, var(--c) 30%, #fff); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; font: 900 13px/1.3 var(--body); box-shadow: 0 3px 0 var(--ink); pointer-events: none; }