/* LifeRPG v1.2.0 - design system da HUD. Grid de 8px (meio passo de 4px) e escala de fontes 12/14/16/18/20/24/28/32/40.
   v1.1.0: Fontes livres (Google Fonts, licença OFL). Arte 100% original. */
:root {
  color-scheme: dark;
  --obsidian: #07090f;
  --obsidian-2: #0d1220;
  --glass: rgba(18, 24, 40, 0.78);
  --glass-strong: rgba(12, 16, 28, 0.94);
  --line: rgba(212, 178, 106, 0.34);
  --line-soft: rgba(160, 176, 205, 0.22);
  --gold: #d4b26a;
  --gold-hi: #f3dca0;
  --celeste: #7fd8ff;
  --fg: #f1f4fa;
  --muted: #aeb8cc;
  --hp: #e0484f;
  --hp-deep: #6d1420;
  --xp: #7fd8ff;
  --xp-deep: #18406b;
  --ok: #5fd38a;
  --warn: #f2a54e;
  --r-comum: #9aa3ad;
  --r-incomum: #5fd38a;
  --r-rara: #4fa3ff;
  --r-epica: #b57bff;
  --r-lendaria: #f2c14e;
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--fg);
  font: 16px/1.5 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 120px;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgba(127, 216, 255, 0.13), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(212, 178, 106, 0.10), transparent 60%),
    radial-gradient(600px 400px at 0% 70%, rgba(181, 123, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--obsidian-2), var(--obsidian));
}
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); letter-spacing: .05em; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Glass panel with gilded corners ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--glass), var(--glass-strong));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 16px;
  min-width: 0;
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 1.5px solid var(--gold); opacity: .7;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font: 700 18px/1.2 var(--font-display); letter-spacing: .06em; color: var(--gold-hi); text-wrap: balance; }

/* ---------- Top HUD ---------- */
.hud {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(7, 9, 15, .96), rgba(7, 9, 15, .78));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hud-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crest {
  position: relative; width: 64px; height: 64px; flex: none;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: conic-gradient(from 200deg, var(--gold), #6b5426, var(--gold-hi), #6b5426, var(--gold));
  display: grid; place-items: center;
}
.crest-inner {
  width: 56px; height: 56px;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: radial-gradient(circle at 50% 35%, #2a3754, #0b1020 70%);
  display: grid; place-items: center;
  font: 800 24px var(--font-display); color: var(--gold-hi);
}
.lv {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  background: #0a0d16; border: 1px solid var(--gold); color: var(--gold-hi);
  font: 700 12px var(--font-num); padding: 1px 8px; border-radius: 8px; white-space: nowrap;
}
.crest-wrap { position: relative; padding-bottom: 8px; }
.who { min-width: 0; flex: 1 1 260px; display: grid; gap: 4px; }
.who-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.who-name { font: 700 20px/1.1 var(--font-display); letter-spacing: .05em; }
.tag {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 1000px;
  border: 1px solid var(--line-soft); color: var(--celeste); background: rgba(127, 216, 255, .07);
}
.tag.gm { color: var(--gold-hi); border-color: var(--line); background: rgba(212, 178, 106, .08); }
.bar { position: relative; height: 24px; border-radius: 8px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; max-width: 384px; }
.bar.thin { height: 16px; }
.bar.thin > span { font-size: 12px; }
.bar > i { position: absolute; inset: 0 auto 0 0; display: block; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bar.hp > i { background: linear-gradient(90deg, var(--hp-deep), var(--hp) 70%, #ff8a8a); box-shadow: 0 0 12px rgba(224, 72, 79, .6); }
.bar.xp > i { background: linear-gradient(90deg, var(--xp-deep), #3aa0e0 60%, var(--xp)); box-shadow: 0 0 12px rgba(127, 216, 255, .55); }
.bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font: 600 12px/1 var(--font-num); color: #fff; text-shadow: 0 1px 2px #000; }
.bar.xp > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: shine 3.2s infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.attrs { display: flex; gap: 8px; flex-wrap: wrap; }
.attr { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--font-num); padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.attr b { font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.debuff { color: var(--hp); border-color: rgba(224, 72, 79, .35); background: rgba(224, 72, 79, .08); }

.hud-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.wallet { display: flex; gap: 16px; padding: 8px 16px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line-soft); font: 700 14px var(--font-num); }
.wallet .c { color: var(--celeste); } .wallet .b { color: var(--ok); } .wallet .u { color: var(--gold-hi); }
.sync {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 8px;
  border: 1px solid rgba(95, 211, 138, .35); background: rgba(95, 211, 138, .08); color: var(--ok);
  font: 600 14px var(--font-num);
}
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.8s infinite; }
.sync.off { color: var(--warn); border-color: rgba(242, 165, 78, .4); background: rgba(242, 165, 78, .08); }
.sync.off .dot { animation: none; }
.qbadge { background: var(--warn); color: #1a1205; border-radius: 8px; padding: 0 4px; font-weight: 700; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Boss band ---------- */
.boss {
  margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 16px 16px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(109, 20, 32, .38), rgba(18, 24, 40, .55) 45%, rgba(18, 24, 40, .55));
  border: 1px solid rgba(224, 72, 79, .3);
}
.boss-sigil { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: rgba(224, 72, 79, .14); color: #ff9a9a; border: 1px solid rgba(224, 72, 79, .4); }
.boss-sigil svg.i { width: 24px; height: 24px; }
.boss-mid { min-width: 0; display: grid; gap: 4px; }
.boss-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.boss-title strong { font: 700 16px var(--font-display); letter-spacing: .05em; }
.bar.boss-hp { max-width: none; height: 24px; border-color: rgba(242, 193, 78, .35); }
.bar.boss-hp > i { background: linear-gradient(90deg, #5b0f19, #c42a37 55%, var(--r-lendaria)); }
.boss-when { text-align: right; font: 600 14px var(--font-num); color: var(--muted); }
.boss-when b { display: block; font-size: 20px; color: var(--fg); }

/* ---------- Field ---------- */
.field { margin-top: 16px; display: grid; gap: 16px; grid-template-columns: 264px minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1104px) { .field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .party { grid-column: 1 / -1; } }
@media (max-width: 720px) { .field { grid-template-columns: minmax(0, 1fr); } .boss { grid-template-columns: auto 1fr; } .boss-when { grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; align-items: baseline; } .boss-when b { display: inline; font-size: 16px; } }

/* Party roster */
.party-list { display: grid; gap: 8px; }
@media (max-width: 1104px) { .party-list { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); } }
.member {
  display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; text-align: left;
  padding: 8px 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft);
  transition: border-color .2s, background .2s;
}
.member:hover { border-color: var(--line); }
.member[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 178, 106, .07); }
.m-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--font-display); color: var(--gold-hi); background: radial-gradient(circle at 50% 35%, #2a3754, #0b1020 75%); border: 1px solid var(--line); }
.m-info { min-width: 0; display: grid; gap: 4px; }
.m-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.m-top span:last-child { font: 600 12px var(--font-num); color: var(--muted); }
.member .bar { height: 4px; border: 0; }

/* Quests */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 14px; padding: 4px 8px; border-radius: 1000px; border: 1px solid var(--line-soft); background: transparent; color: var(--muted); }
.chip[aria-pressed="true"] { color: var(--fg); border-color: var(--gold); background: rgba(212, 178, 106, .1); }
.quests { display: grid; gap: 8px; }
.quest {
  --rc: var(--r-comum);
  position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 16px 16px 16px; border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 13%, transparent), rgba(255, 255, 255, .015) 55%);
  border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent);
  transition: transform .2s, opacity .3s, border-color .2s;
}
.quest::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.quest:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.quest.done { opacity: .5; }
.quest.done .q-title { text-decoration: line-through; text-decoration-color: var(--muted); }
.q-check {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--rc); background: rgba(0, 0, 0, .35);
  display: grid; place-items: center; color: var(--rc);
}
.q-check svg { opacity: 0; transform: scale(.4); transition: .25s; }
.quest.done .q-check { background: var(--rc); color: #0a0d16; }
.quest.done .q-check svg { opacity: 1; transform: none; }
.q-body { min-width: 0; display: grid; gap: 4px; }
.q-title { font-weight: 600; font-size: 16px; }
.q-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.rar { color: var(--rc); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.q-reward { display: grid; justify-items: end; gap: 2px; font: 700 14px var(--font-num); }
.q-reward .x { color: var(--celeste); } .q-reward .g { color: var(--muted); font-weight: 500; }
.pending { color: var(--warn); }
.r-comum { --rc: var(--r-comum); } .r-incomum { --rc: var(--r-incomum); } .r-rara { --rc: var(--r-rara); } .r-epica { --rc: var(--r-epica); } .r-lendaria { --rc: var(--r-lendaria); }
.r-lendaria .q-check { animation: legend 2.4s infinite; }
@keyframes legend { 50% { box-shadow: 0 0 16px var(--r-lendaria); } }

/* Guild board */
.board { position: relative; }
.contracts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.contract {
  --rc: var(--r-rara);
  display: grid; gap: 8px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25));
  border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.contract h3 { margin: 0; font-size: 16px; font-weight: 600; }
.contract p { margin: 0; font-size: 14px; color: var(--muted); }
.c-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(212, 178, 106, .2), rgba(212, 178, 106, .06));
  color: var(--gold-hi); padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(212, 178, 106, .32), rgba(212, 178, 106, .1)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.claimed { font-size: 14px; color: var(--ok); font-weight: 600; }
.lock {
  position: absolute; inset: 0; z-index: 2; border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 24px;
  background: rgba(7, 9, 15, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lock div { max-width: 304px; display: grid; gap: 8px; justify-items: center; }
.lock svg.i { width: 32px; height: 32px; color: var(--warn); }
.lock strong { font: 700 16px var(--font-display); color: var(--gold-hi); }
.lock span { font-size: 14px; color: var(--muted); }

/* Views other than quests */
.view[hidden] { display: none; }
.pots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
.pot { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); display: grid; gap: 4px; }
.pot strong { font: 700 20px var(--font-num); }
.sim { margin-top: 16px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.sim label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.sim input { background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 8px; color: var(--fg); font: 600 16px var(--font-num); width: 100%; }
.split { margin-top: 16px; display: grid; gap: 8px; }
.split-bar { height: 16px; border-radius: 4px; overflow: hidden; display: flex; background: rgba(0, 0, 0, .4); }
.split-bar i { display: block; height: 100%; transition: width .5s; }
.split-legend { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.events { display: grid; gap: 8px; }
.event { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft); }
.event .d { text-align: center; font: 700 20px/1 var(--font-num); }
.event .d small { display: block; font: 600 12px var(--font-body); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.event.boss-ev { border-color: rgba(224, 72, 79, .4); background: rgba(224, 72, 79, .06); }
.soon { display: grid; gap: 8px; justify-items: start; padding: 8px 2px; color: var(--muted); }
.soon strong { color: var(--fg); font: 700 18px var(--font-display); letter-spacing: .05em; }

/* ---------- Radial menu ---------- */
.radial-dock { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; width: 0; height: 0; }
.orb {
  position: absolute; left: -32px; top: -64px; width: 64px; height: 64px; border-radius: 50%; border: 0; z-index: 2;
  background: radial-gradient(circle at 50% 35%, #34476e, #0c1222 70%);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(212, 178, 106, .15), 0 0 28px rgba(127, 216, 255, .35), 0 10px 30px rgba(0, 0, 0, .7);
  display: grid; place-items: center; color: var(--gold-hi); transition: transform .35s;
}
.orb svg.i { width: 24px; height: 24px; }
.radial-open .orb { transform: rotate(135deg); }
.ring { position: absolute; left: 0; top: -32px; width: 0; height: 0; pointer-events: none; }
.ring::before {
  content: ""; position: absolute; left: -136px; top: -136px; width: 264px; height: 264px; border-radius: 50%;
  border: 1px dashed rgba(212, 178, 106, .35);
  background: radial-gradient(circle, rgba(7, 9, 15, .92) 30%, rgba(7, 9, 15, .75) 62%, transparent 72%);
  opacity: 0; transform: scale(.4); transition: .35s cubic-bezier(.2, .9, .3, 1.2);
}
.radial-open .ring::before { opacity: 1; transform: none; }
.r-item {
  position: absolute; left: -24px; top: -24px; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(18, 24, 40, .95); color: var(--fg);
  display: grid; place-items: center; pointer-events: none; opacity: 0; transform: translate(0, 0) scale(.3);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.25), opacity .25s, border-color .2s, color .2s;
}
.r-item svg.i { width: 24px; height: 24px; }
.r-item .r-label { position: absolute; top: 100%; margin-top: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.radial-open .r-item { opacity: 1; pointer-events: auto; transform: translate(var(--x), var(--y)) scale(1); }
.r-item:hover, .r-item[aria-current="true"] { border-color: var(--gold); color: var(--gold-hi); }
.r-item[aria-current="true"] .r-label { color: var(--gold-hi); }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.radial-open .scrim { opacity: 1; pointer-events: auto; }

/* ---------- Feedback ---------- */
.floater { position: fixed; z-index: 60; pointer-events: none; font: 800 18px var(--font-num); color: var(--celeste); text-shadow: 0 0 12px rgba(127, 216, 255, .8), 0 2px 3px #000; animation: rise 1.3s ease-out forwards; }
.floater.gold { color: var(--gold-hi); text-shadow: 0 0 12px rgba(242, 193, 78, .8), 0 2px 3px #000; }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } to { opacity: 0; transform: translateY(-46px) scale(1); } }
.toast { position: fixed; z-index: 60; left: 50%; top: calc(88px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 8px; background: var(--glass-strong); border: 1px solid var(--line); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: opacity .3s; }
.levelup { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: radial-gradient(circle, rgba(242, 193, 78, .22), rgba(7, 9, 15, .88) 60%); text-align: center; padding: 24px; }
.levelup[hidden] { display: none; }
.lu-card { display: grid; gap: 8px; justify-items: center; animation: pop .6s cubic-bezier(.2, .9, .3, 1.3); }
.lu-card .eyebrow { color: var(--gold); }
.lu-num { font: 800 clamp(64px, 18vw, 120px)/1 var(--font-display); color: var(--gold-hi); text-shadow: 0 0 40px rgba(242, 193, 78, .7); }
.lu-card p { margin: 0; color: var(--muted); max-width: 320px; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===================== v1.1.0: app real ===================== */
a { color: var(--celeste); }
.hud-body { padding-bottom: 152px; }
.crest-wrap { background: none; border: 0; padding: 0 0 8px; }
.crest-inner img { width: 100%; height: 100%; object-fit: cover; }
.wallet { color: inherit; }
.tag.streak { color: var(--warn); border-color: rgba(242, 165, 78, .35); background: rgba(242, 165, 78, .07); }
.tag.streak:empty { display: none; }
.sync.err { color: var(--hp); border-color: rgba(224, 72, 79, .4); background: rgba(224, 72, 79, .08); }
.view-root { display: block; margin-top: 16px; outline: none; }
.view-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.view-grid.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.view-grid > .full { grid-column: 1 / -1; }
@media (max-width: 904px) { .view-grid, .view-grid.wide-left { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.gold { color: var(--gold-hi); }
.cel { color: var(--celeste); }
.ok { color: var(--ok); }
.bad { color: var(--hp); }
.empty { padding: 16px 8px; text-align: center; color: var(--muted); font-size: 14px; display: grid; gap: 8px; justify-items: center; }
.empty svg.i { width: 24px; height: 24px; color: var(--line); }
.section-title { margin: 8px 0 2px; font: 700 14px var(--font-display); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; }
.btn.ghost { background: transparent; border-color: var(--line-soft); color: var(--fg); }
.btn.danger { border-color: rgba(224, 72, 79, .45); color: #ff9a9a; background: rgba(224, 72, 79, .08); }
.btn.ok { border-color: rgba(95, 211, 138, .45); color: var(--ok); background: rgba(95, 211, 138, .08); }
.btn.big { padding: 8px 16px; font-size: 16px; }
.btn.icon { padding: 8px; }
.btn svg.i { width: 16px; height: 16px; }
.btn.busy { opacity: .6; pointer-events: none; }

/* Formulários */
.form { display: grid; gap: 16px; }
.form .grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.field-l { display: grid; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 600; min-width: 0; }
.input, .field-l input, .field-l select, .field-l textarea {
  width: 100%; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 8px 8px; color: var(--fg); font: 500 16px var(--font-body); min-width: 0;
}
.field-l textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.field-l input:focus, .field-l select:focus, .field-l textarea:focus, .input:focus { border-color: var(--gold); outline: none; }
.field-l select option { background: #0d1220; }
.check-l { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.check-l input { width: 16px; height: 16px; accent-color: var(--gold); }
.hint { font-size: 14px; color: var(--muted); margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 8px 16px; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: rgba(212, 178, 106, .16); color: var(--gold-hi); }

/* Modal */
.modal-root { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 10, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-root[hidden] { display: none; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; animation: pop .3s cubic-bezier(.2, .9, .3, 1.2); }
.modal .panel-head { position: sticky; top: -16px; background: linear-gradient(180deg, rgba(12, 16, 28, .98), rgba(12, 16, 28, .9)); margin: -16px -16px 16px; padding: 16px; z-index: 1; border-radius: 16px 16px 0 0; }
.modal-close { border: 0; background: transparent; color: var(--muted); padding: 4px; }

/* Missões: extras */
.quest { grid-template-columns: 32px 1fr auto; }
.q-check:disabled { cursor: default; }
.quest.pending-approval .q-check { border-style: dashed; }
.q-meta .late { color: var(--hp); font-weight: 700; }
.q-meta .who { display: inline; color: var(--gold-hi); }
.q-more { grid-column: 2 / -1; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.q-more .md { color: var(--fg); }
.q-items { display: grid; gap: 4px; }
.q-item { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fg); background: none; border: 0; text-align: left; padding: 4px 0; }
.q-item .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rc); display: grid; place-items: center; flex: none; }
.q-item .box svg.i { width: 16px; height: 16px; opacity: 0; }
.q-item.on .box { background: var(--rc); color: #0a0d16; }
.q-item.on .box svg.i { opacity: 1; }
.q-item.on span { text-decoration: line-through; color: var(--muted); }
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.q-body { cursor: pointer; }
.gm-note { font-size: 14px; color: var(--warn); }
.raid { --rc: var(--r-epica); display: grid; gap: 8px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); background: linear-gradient(135deg, rgba(181, 123, 255, .12), rgba(0, 0, 0, .2)); }
.raid h3 { margin: 0; font: 700 16px var(--font-display); letter-spacing: .05em; }
.bar.raid-hp { max-width: none; height: 24px; }
.bar.raid-hp > i { background: linear-gradient(90deg, #3a1660, #8d4fe0 55%, var(--r-epica)); }
.contrib { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.contrib span { padding: 2px 8px; border-radius: 1000px; background: rgba(255, 255, 255, .05); }
.contract.mine { border-color: rgba(95, 211, 138, .45); }

/* Painel: feed */
.feed { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.feed-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: baseline; font-size: 14px; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.feed-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 8px; }
.feed-item.k-levelup::before, .feed-item.k-reward::before { background: var(--celeste); }
.feed-item.k-faint::before, .feed-item.k-late::before { background: var(--hp); }
.feed-item time { font: 500 12px var(--font-num); color: var(--muted); white-space: nowrap; }

/* Cards genéricos */
.cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.card { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); display: grid; gap: 8px; align-content: start; min-width: 0; }
.card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.card p { margin: 0; font-size: 14px; color: var(--muted); }
.card .cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: rgba(0, 0, 0, .3); }
.card.r-lendaria, .card.main-quest { border-color: rgba(242, 193, 78, .4); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 1000px; font-size: 12px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--line-soft); }
.pill.warn { color: var(--warn); border-color: rgba(242, 165, 78, .4); }
.pill.ok { color: var(--ok); border-color: rgba(95, 211, 138, .4); }
.pill.gold { color: var(--gold-hi); border-color: var(--line); }
.pill.cel { color: var(--celeste); border-color: rgba(127, 216, 255, .35); }
.progress { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #6b5426, var(--gold-hi)); transition: width .6s; }
.progress.cel i { background: linear-gradient(90deg, var(--xp-deep), var(--celeste)); }
.list { display: grid; gap: 8px; }
.li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft); font-size: 14px; min-width: 0; }
.li > div { min-width: 0; }
.li strong { font-weight: 600; }
.amount-in { color: var(--ok); font-family: var(--font-num); font-weight: 700; }
.amount-out { color: var(--hp); font-family: var(--font-num); font-weight: 700; }

/* Markdown */
.md { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.md h1, .md h2, .md h3 { font-family: var(--font-display); color: var(--gold-hi); letter-spacing: .04em; margin: 16px 0 8px; font-size: 16px; }
.md h1 { font-size: 18px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 24px; }
.md code { font-family: var(--font-num); font-size: 14px; background: rgba(0, 0, 0, .4); padding: 1px 4px; border-radius: 4px; }
.md pre { background: rgba(0, 0, 0, .45); padding: 8px; border-radius: 8px; overflow: auto; white-space: pre-wrap; }
.md blockquote { margin: 8px 0; padding: 8px 16px; border-left: 3px solid var(--gold); color: var(--muted); }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { border: 1px solid var(--line-soft); padding: 4px 8px; text-align: left; }

/* Carteira */
.pot { position: relative; overflow: hidden; }
.pot .pot-sub { font: 600 14px var(--font-num); color: var(--muted); }
.pot.k-piggy_bank strong { color: var(--gold-hi); }
.pot.k-bank_account strong { color: var(--celeste); }
.pot.k-investments strong { color: var(--ok); }
.total-line { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; margin-top: 8px; }
.chart-box { position: relative; height: 240px; margin-top: 16px; }
.sim { margin-top: 0; }

/* Chat */
.chat { display: grid; grid-template-rows: auto 1fr auto; height: min(68vh, 640px); }
.chat-log { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
.msg { max-width: 82%; display: grid; gap: 4px; align-self: flex-start; }
.msg.me { align-self: flex-end; justify-items: end; }
.msg .bubble { padding: 8px 16px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-soft); font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me .bubble { border-radius: 16px 16px 4px 16px; background: rgba(212, 178, 106, .14); border-color: var(--line); }
.msg .bubble img { display: block; max-width: 240px; width: 100%; border-radius: 8px; margin-top: 8px; }
.msg .meta { font: 500 12px var(--font-num); color: var(--muted); display: flex; gap: 8px; }
.msg .meta .sender { font-family: var(--font-body); font-weight: 700; color: var(--gold); }
.chat-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.chat-form textarea { resize: none; height: 40px; min-height: 40px; }

/* Personagem */
.sheet { display: grid; grid-template-columns: 144px 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .sheet { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.portrait { width: 144px; height: 160px; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); background: conic-gradient(from 200deg, var(--gold), #6b5426, var(--gold-hi), #6b5426, var(--gold)); display: grid; place-items: center; }
.portrait > div { width: 136px; height: 152px; clip-path: inherit; background: radial-gradient(circle at 50% 35%, #2a3754, #0b1020 70%); display: grid; place-items: center; font: 800 40px var(--font-display); color: var(--gold-hi); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.attr-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.attr-card { padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft); display: grid; gap: 2px; }
.attr-card b { font: 700 24px var(--font-num); color: var(--gold-hi); }
.class-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.class-opt { text-align: left; padding: 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); display: grid; gap: 4px; }
.class-opt[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 178, 106, .1); }
.class-opt strong { font: 700 16px var(--font-display); letter-spacing: .04em; color: var(--gold-hi); }
.class-opt span { font-size: 14px; color: var(--muted); }
.camera { display: grid; gap: 8px; justify-items: center; }
.camera video, .camera img { width: min(320px, 100%); border-radius: 16px; background: #000; aspect-ratio: 3/4; object-fit: cover; }

/* Auth */
.auth-body { display: grid; min-height: 100vh; place-items: center; padding: 24px 16px; }
.auth-wrap { width: min(424px, 100%); display: grid; gap: 16px; }
.auth-brand { display: grid; justify-items: center; gap: 4px; text-align: center; }
.auth-brand strong { font: 800 28px var(--font-display); letter-spacing: .08em; color: var(--gold-hi); }
.auth-brand span { color: var(--muted); font-size: 14px; }
.auth-card { position: relative; display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: linear-gradient(180deg, var(--glass), var(--glass-strong)); border: 1px solid var(--line-soft); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.auth-card h1 { margin: 0 0 4px; font: 700 20px var(--font-display); letter-spacing: .05em; color: var(--gold-hi); }
.auth-card label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.auth-card input { background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 16px; color: var(--fg); font: 500 16px var(--font-body); }
.auth-card input:focus { border-color: var(--gold); outline: none; }
.auth-error { margin: 0; padding: 8px 16px; border-radius: 8px; background: rgba(224, 72, 79, .1); border: 1px solid rgba(224, 72, 79, .35); color: #ff9a9a; font-size: 14px; }
.auth-hint { margin: 0; font-size: 14px; color: var(--muted); }
.btn-gold { border: 1px solid var(--gold); border-radius: 8px; padding: 16px; font: 700 16px var(--font-display); letter-spacing: .06em; color: #1a1205; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); cursor: pointer; }
.btn-gold:hover { filter: brightness(1.06); }
.auth-foot, .app-foot { text-align: center; font-size: 14px; color: var(--muted); margin-top: 24px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.auth-foot { margin-top: 0; }
.auth-foot a, .app-foot a { color: var(--gold); text-decoration: none; }

/* Menu radial em dois anéis */
.ring::before { left: -208px; top: -208px; width: 408px; height: 408px; }
@media (max-width: 424px) { .ring::before { left: -184px; top: -184px; width: 368px; height: 368px; } }
.r-item .r-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--hp); color: #fff; font: 700 12px/16px var(--font-num); padding: 0 4px; }
.r-item .r-badge:empty { display: none; }
.skeleton { height: 120px; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.upload-progress { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.upload-progress i { display: block; height: 100%; width: 0; background: var(--celeste); transition: width .2s; }
.toast.err { border-color: rgba(224, 72, 79, .5); }

@media (max-width: 560px) {
  .hud-right { width: 100%; flex-wrap: nowrap; justify-content: space-between; margin-left: 0; }
  .wallet { gap: 8px; padding: 4px 8px; font-size: 14px; }
  .sync { padding: 4px 8px; font-size: 12px; }
  .crest { width: 56px; height: 56px; } .crest-inner { width: 48px; height: 48px; font-size: 20px; }
  .hud-row { gap: 8px; }
}

/* v1.1.2 - NPCs, pacote de missões, painel de integrações */
.npc { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 8px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line-soft); border-left: 3px solid var(--npc, var(--gold)); backdrop-filter: blur(10px); }
.npc-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--npc, var(--gold)) 30%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--npc, var(--gold)) 45%, transparent); }
.npc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 16px; }
.npc-txt strong { font-family: var(--font-display); font-size: 16px; color: var(--npc, var(--gold-hi)); }
.npc-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.pack-list { display: grid; gap: 8px; max-height: 56vh; overflow: auto; padding-right: 4px; }
.pack-group { margin: 16px 0 4px; font-family: var(--font-display); color: var(--gold-hi); font-size: 16px; letter-spacing: .04em; }
.pack-item { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 8px 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); cursor: pointer; }
.pack-item.added { opacity: .55; }
.pack-item input { margin-top: 4px; accent-color: var(--gold); }
.pack-item .t { font-weight: 600; }
.pack-item .m { font-size: 14px; color: var(--muted); }
.cfg-group { display: grid; gap: 8px; margin-bottom: 16px; }
.cfg-group h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: 16px; color: var(--gold-hi); }
.cfg-env { font-size: 12px; color: var(--ok); }
.tgl { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.tgl input { margin-top: 4px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.book-sug { display: grid; gap: 4px; padding: 8px 16px; border-radius: 16px; border: 1px solid var(--line-soft); }
.book-sug .row { justify-content: space-between; }

/* v1.1.3 - avisos, conquistas, relatório, trocas */
.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 32px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); color: var(--gold-hi); cursor: pointer; }
.bell .i { width: 16px; height: 16px; }
.bell-n { position: absolute; top: -8px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--hp); color: #fff; font: 700 12px/18px var(--font-num); text-align: center; }
.notif-list { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.notif { display: grid; gap: 2px; text-align: left; padding: 8px 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); color: var(--fg); cursor: pointer; font: inherit; }
.notif.unread { border-color: var(--gold); background: rgba(212,178,106,.07); }
.notif span { font-size: 14px; color: var(--muted); }
.notif time { font-size: 12px; color: var(--muted); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.medal { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border-radius: 16px; border: 1px solid var(--line-soft); text-align: center; background: rgba(255,255,255,.02); }
.medal .ic { font-size: 32px; filter: grayscale(1) opacity(.35); }
.medal.on { border-color: var(--gold); background: radial-gradient(circle at 50% 0, rgba(212,178,106,.16), transparent 70%); }
.medal.on .ic { filter: none; }
.medal strong { font-size: 14px; line-height: 1.25; }
.medal small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.medal .bar { width: 100%; height: 4px; }
.report { width: 100%; border-collapse: collapse; font-size: 16px; }
.report th, .report td { padding: 8px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.report th:first-child, .report td:first-child { text-align: left; }
.report th { font: 600 12px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.report-wrap { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.kpi { padding: 8px 16px; border-radius: 16px; border: 1px solid var(--line-soft); }
.kpi b { display: block; font: 700 24px var(--font-num); color: var(--gold-hi); }
.kpi span { font-size: 14px; color: var(--muted); }
.exam-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 640px) { .exam-row { grid-template-columns: 1fr 1fr; } }
.vac-banner { margin: 0 0 16px; padding: 8px 16px; border-radius: 16px; border: 1px solid rgba(127,216,255,.35); background: rgba(127,216,255,.07); color: var(--celeste); font-size: 16px; }

/* ---------- v1.1.4: barra de status do app instalado ---------- */
.hud-body { padding-top: env(safe-area-inset-top, 0px); }

/* ---------- v1.1.4: tela de título ---------- */
.title-screen { padding: 0; min-height: 100vh; min-height: 100dvh; display: block; overflow: hidden; }
.title-screen::before { display: none; }
.title-bg { position: fixed; inset: 0; z-index: 0; background: #04060d; cursor: pointer; }
.title-bg canvas, .title-bg video, .title-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.title-bg video { object-fit: cover; }
.title-img { background-size: cover; background-position: center; }
.title-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(4, 6, 13, 0) 0, rgba(4, 6, 13, .25) 55%, rgba(4, 6, 13, .8) 100%), linear-gradient(180deg, rgba(4, 6, 13, .35), rgba(4, 6, 13, 0) 30%, rgba(4, 6, 13, 0) 60%, rgba(4, 6, 13, .7)); transition: background .5s; }
.show-form .title-shade { background-color: rgba(4, 6, 13, .45); }
.title-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 24px; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(72px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.title-wrap > * { pointer-events: auto; }
.title-logo { display: grid; justify-items: center; gap: 8px; text-align: center; transition: transform .5s ease, gap .5s; animation: titleIn 1.4s ease-out both; }
.title-logo img { width: clamp(72px, 18vw, 112px); height: auto; border-radius: 22%; box-shadow: 0 0 0 1px rgba(212, 178, 106, .5), 0 0 40px rgba(127, 216, 255, .35), 0 12px 30px rgba(0, 0, 0, .6); transition: width .5s; }
.title-name { margin: 8px 0 0; font: 900 clamp(42px, 12vw, 92px)/1 var(--font-display); letter-spacing: .1em; color: var(--gold-hi); background: linear-gradient(180deg, #fff6d8 0%, #f3dca0 40%, #b88a3e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(242, 193, 78, .45)) drop-shadow(0 4px 6px rgba(0, 0, 0, .8)); transition: font-size .5s; }
.title-tag { margin: 0; font: 600 clamp(12px, 3.4vw, 15px) var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: #cfd8ee; text-shadow: 0 2px 6px #000; }
.title-start { border: 0; background: none; padding: 16px 24px; font: 700 clamp(14px, 4vw, 18px) var(--font-display); letter-spacing: .25em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 0 14px rgba(242, 193, 78, .7), 0 2px 4px #000; animation: blinkSoft 1.8s ease-in-out infinite, titleIn 1.4s .6s ease-out both; }
.title-form { width: min(400px, 100%); display: none; }
.show-form .title-start { display: none; }
.show-form .title-form { display: block; animation: formIn .45s ease-out both; }
.show-form .title-logo { gap: 2px; }
.show-form .title-logo img { width: 56px; }
.show-form .title-name { font-size: clamp(30px, 8vw, 46px); }
.title-form .auth-card { background: linear-gradient(180deg, rgba(14, 20, 38, .78), rgba(8, 12, 24, .9)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(212, 178, 106, .35); }
.title-foot { position: fixed; z-index: 1; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); text-shadow: 0 1px 3px #000; }
@keyframes blinkSoft { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes titleIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes formIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- v1.1.4: splash / carregando ---------- */
#splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #16203d 0, #0a0f1d 45%, #05070d 100%); transition: opacity .5s ease, visibility .5s; }
#splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-in { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 0 24px; transform: translateY(-4%); }
.splash-in img { width: 120px; height: 120px; border-radius: 22%; box-shadow: 0 0 46px rgba(127, 216, 255, .28); animation: pulseEmblem 1.6s ease-in-out infinite; }
.splash-in strong { font: 800 32px var(--font-display); letter-spacing: .12em; color: var(--gold-hi); }
.splash-bar { width: 200px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid rgba(212, 178, 106, .25); }
.splash-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6b5426, var(--gold-hi)); border-radius: 8px; transition: width .35s ease; }
.splash-tip { min-height: 2.6em; max-width: 304px; font-size: 14px; color: var(--muted); }
@keyframes pulseEmblem { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .title-start, .splash-in img, .title-logo { animation: none; }
}

/* ---------- v1.1.5: iPhone em pé ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { max-width: 100%; }
/* Datas e horas no Safari ignoram a largura e estouram a tela */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; width: 100%; min-height: 48px; text-align: left; line-height: 1.2; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Listas de escolha com a mesma cara em todo celular */
.field-l select, select.input { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4b26a' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.li { grid-template-columns: minmax(0, 1fr) auto; }
.modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
@media (max-width: 760px) {
  /* Abaixo de 16px o iPhone dá zoom no campo e a tela fica torta */
  input, select, textarea, .input, .auth-card input, .sim input, .field-l input, .field-l select, .field-l textarea { font-size: 18px; }
  .input, .field-l input, .field-l select, .auth-card input { min-height: 48px; padding: 8px 16px; border-radius: 8px; }
  .field-l { font-size: 14px; gap: 8px; }
  .form .grid2 { grid-template-columns: minmax(0, 1fr); }
  .btn { min-height: 40px; }
  .chip { padding: 8px 16px; font-size: 14px; }
  .li > span { white-space: normal; text-align: right; }
  .modal-root { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)); align-items: end; }
  .modal { width: 100%; }
  .modal form > .row.end:last-child { position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(12, 16, 28, .98) 70%, rgba(12, 16, 28, 0)); z-index: 1; }
  .modal form > .row.end:last-child .btn { flex: 1; }
  .chat { height: max(304px, calc(100dvh - 344px)); }
  .attr-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-backups] .li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  [data-backups] .li > span:first-child { word-break: break-all; }
  [data-backups] .li > span { text-align: left; }
}
input[type="file"] { font-size: 16px; color: var(--muted); }
input[type="file"]::file-selector-button { margin-right: 8px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--gold); background: rgba(212, 178, 106, .12); color: var(--gold-hi); font: 600 16px var(--font-body); }
/* Menu em grade no celular */
.ring.as-grid { top: auto; bottom: 88px; left: 0; width: min(560px, calc(100vw - 24px)); height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; padding: 16px 8px 16px; border-radius: 24px; background: rgba(10, 14, 26, .97); border: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 20px); transition: opacity .2s, transform .25s ease-out; }
.radial-open .ring.as-grid { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ring.as-grid::before { display: none; }
.ring.as-grid .r-item { position: relative; left: auto; top: auto; justify-self: center; width: 56px; height: 56px; margin-bottom: 16px; transition: none; }
.radial-open .ring.as-grid .r-item { transform: none; }
.ring.as-grid .r-item .r-label { font-size: 12px; left: 50%; transform: translateX(-50%); margin-top: 4px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 600px) { .ring.as-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) { .chat-form textarea { height: 48px; min-height: 48px; padding: 16px; line-height: 1.3; } }
/* v1.1.6: desempenho no celular. Vidro fosco (backdrop-filter) é caro no iPhone: troca por fundo sólido. */
@media (max-width: 760px), (hover: none) {
  .panel, .npc, .modal-root, .title-form .auth-card, .wallet, .sync, .hud, .lock { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .panel { background: linear-gradient(180deg, #121a2e, #0c1222); }
  .npc { background: #10172a; }
  .hud { background: #07090f; }
  .lock { background: rgba(7, 9, 15, .94); }
  .modal-root { background: rgba(3, 5, 10, .86); }
  .title-form .auth-card { background: linear-gradient(180deg, rgba(14, 20, 38, .94), rgba(8, 12, 24, .97)); }
  .bar.xp > i::after, .sync .dot { animation: none; }
}
.ring.as-grid, .scrim, .orb { will-change: transform, opacity; }
.radial-open .ring.as-grid .r-item { transition: none; }

/* ---------- v1.1.6: Sistema em abas + Saúde do sistema ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding: 2px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); color: var(--muted); border-radius: 1000px; padding: 8px 16px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--gold-hi); border-color: var(--gold); background: rgba(212, 178, 106, .12); }
[data-tabbody] { display: grid; gap: 16px; }
.hl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
.hl-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(95, 211, 138, .5); }
.hl-dot.warn { background: #f2c14e; box-shadow: 0 0 8px rgba(242, 193, 78, .5); }
.hl-dot.fail { background: var(--hp); box-shadow: 0 0 8px rgba(224, 72, 79, .6); }
.hl-dot.info { background: rgba(143, 155, 179, .5); }
.hl-hero { border-left: 3px solid var(--ok); }
.hl-hero.warn { border-left-color: #f2c14e; } .hl-hero.fail { border-left-color: var(--hp); }
.hl-hero-top { display: flex; gap: 16px; align-items: center; }
.hl-hero h2 { margin: 2px 0 0; font: 800 24px var(--font-display); letter-spacing: .05em; color: var(--gold-hi); }
.hl-emoji { font-size: 40px; line-height: 1; }
.hl-counts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 16px; color: var(--muted); }
.hl-counts span { display: inline-flex; align-items: center; gap: 8px; }
.hl-counts b { color: var(--fg); font-size: 18px; }
.hl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-alerts { display: grid; gap: 8px; }
.hl-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(242, 193, 78, .3); background: rgba(242, 193, 78, .05); }
.hl-alert.fail { border-color: rgba(224, 72, 79, .45); background: rgba(224, 72, 79, .07); }
.hl-alert .hl-dot { margin-top: 4px; }
.hl-hint { margin-top: 4px; font-size: 14px; color: var(--fg); opacity: .85; }
.hl-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 344px), 1fr)); align-items: start; }
.hl-ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hl-ghead h3 { flex: 1; margin: 0; font: 700 16px var(--font-display); letter-spacing: .05em; color: var(--gold-hi); }
.hl-items { display: grid; gap: 2px; }
.hl-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.hl-item:last-child { border-bottom: 0; }
.hl-item .hl-dot { width: 8px; height: 8px; align-self: center; grid-row: span 2; }
.hl-l { color: var(--muted); font-size: 14px; }
.hl-v { grid-column: 2; overflow-wrap: anywhere; }
.hl-log summary { cursor: pointer; color: var(--gold-hi); font-weight: 600; font-size: 16px; }
.hl-log pre { margin: 8px 0 0; max-height: 320px; overflow: auto; font: 500 12px/1.5 var(--font-num); white-space: pre-wrap; word-break: break-word; color: #c9d3e8; background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 8px; }
@media (max-width: 760px) { .hl-actions .btn { flex: 1 1 calc(50% - 8px); } }
.auth-card select { background: rgba(0, 0, 0, .4); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 32px 8px 16px; color: var(--fg); font: 500 16px var(--font-body); width: 100%; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4b26a' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.auth-card select option { background: #0d1220; }
a.btn-gold { display: block; }
.invite-link { display: grid; gap: 8px; padding: 16px; border-radius: 8px; border: 1px dashed var(--gold); background: rgba(212, 178, 106, .06); }
.invite-link code { word-break: break-all; font-size: 14px; color: var(--gold-hi); }
@media (max-width: 760px) { .auth-card select { font-size: 18px; min-height: 48px; } }
.title-screen.show-form { overflow-y: auto; }
.show-form .title-foot { position: relative; bottom: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.show-form .title-wrap { padding-bottom: 32px; }

/* ---------- Chat fixo no canto (v1.1.8) ---------- */
:root { --kb: 0px; }
.chat-dock { position: fixed; z-index: 34; left: max(8px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cd-mini {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 24px;
  width: min(304px, calc(50vw - 56px)); min-width: 48px;
  background: rgba(10, 14, 26, .9); border: 1px solid var(--line); color: var(--fg); font-size: 14px; text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.cd-mini svg.i { width: 16px; height: 16px; flex: none; color: var(--gold); }
.cd-last { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.cd-last b { color: var(--gold); font-weight: 700; }
.has-new .cd-mini { border-color: var(--gold); }
.has-new .cd-last { color: var(--fg); }
.cd-n { flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 8px; background: #e0484f; color: #fff; font: 700 12px/20px var(--font-num); text-align: center; }
.cd-panel {
  position: absolute; left: 0; bottom: 56px; width: min(384px, calc(100vw - 24px));
  height: min(464px, calc(100vh - 192px)); height: min(464px, calc(100dvh - 192px - var(--kb)));
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); padding: 8px 16px 16px; border-radius: 16px;
  background: rgba(10, 14, 26, .98); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .65);
}
.chat-open .cd-panel { display: grid; animation: cdIn .18s ease-out; }
@keyframes cdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chat-open .cd-mini { border-color: var(--gold); }
.cd-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.cd-head strong { flex: none; display: flex; align-items: center; gap: 8px; font: 700 16px var(--font-display); letter-spacing: .04em; color: var(--gold-hi); }
.cd-head strong svg.i { width: 16px; height: 16px; }
.cd-head .btn.icon { width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 18px; }
.cd-log { min-height: 0; padding-top: 8px; }
.cd-log .msg { max-width: 88%; }
.cd-log .msg .bubble { font-size: 16px; padding: 8px 8px; }
.cd-log .msg .bubble img { max-width: 184px; }
.cd-form { padding-top: 8px; gap: 8px; }
.on-chat .chat-dock, .radial-open .chat-dock { display: none; }
@media (max-width: 760px) {
  .chat-open .chat-dock { bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--kb)); }
  .cd-panel { bottom: 72px; width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  .cd-form .btn[type=submit] { padding-inline: 16px; }
}

/* Abas do chat: Guilda + conversas individuais (v1.1.9) */
.ch-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; min-width: 0; }
.ch-tabs::-webkit-scrollbar { display: none; }
.cd-head .ch-tabs { flex: 1; padding: 0; }
.ch-tab { flex: none; position: relative; height: 32px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04); color: var(--muted); font: 600 14px var(--font-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.ch-tab[aria-selected="true"] { border-color: var(--gold); color: var(--gold-hi); background: rgba(212, 178, 106, .12); }
.ch-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e0484f; color: #fff; font: 700 12px/18px var(--font-num); text-align: center; }
.cd-head { gap: 8px; }
.chat .ch-tabs { border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }

/* ---------- Salão de Jogos (v1.1.9) ---------- */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; }
.gm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); }
.gm-card > .btn { grid-column: 1 / -1; justify-self: stretch; }
.gm-card.locked { border-style: dashed; }
.gm-ico { position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; background: radial-gradient(circle at 50% 35%, #2a3a5e, #0f1527); border: 1px solid var(--line); }
.gm-lock { position: absolute; right: -8px; bottom: -8px; font-size: 18px; }
.gm-body { display: grid; gap: 4px; min-width: 0; }
.gm-body strong { font: 700 18px var(--font-display); letter-spacing: .03em; color: var(--gold-hi); }
.gm-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.gm-meta b { color: var(--fg); }
.gm-prize { color: var(--celeste); font-weight: 700; }
.gm-prize.done { color: var(--muted); }
.gm-playing { overflow: hidden; }
.gm-playing .chat-dock, .gm-playing .radial-dock, .gm-playing .offline-play { display: none; }
.gm-stage { position: fixed; inset: 0; z-index: 75; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: radial-gradient(ellipse at 50% 0, #18213f, #070a14 70%); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.gm-top { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.gm-top strong { flex: 1; min-width: 0; font: 700 18px var(--font-display); color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-score { font-size: 14px; color: var(--celeste); white-space: nowrap; }
.gm-area { position: relative; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.gm-end { align-self: center; justify-self: center; text-align: center; display: grid; gap: 8px; padding: 24px 16px; max-width: 424px; }
.gm-big { font-size: 56px; }
.gm-end h3 { margin: 0; font: 800 28px var(--font-display); color: var(--gold-hi); }
.gm-final { font-size: 20px; margin: 0; }
.gm-prize-msg { color: var(--muted); margin: 0; }
.gm-prize-msg.ok { color: var(--celeste); font-weight: 700; }
.row.center { justify-content: center; flex-wrap: wrap; }
.center { text-align: center; }

/* Forja */
.fj { align-self: center; justify-self: center; width: min(464px, 100%); padding: 16px 16px; display: grid; gap: 16px; }
.fj-card { min-height: 128px; display: grid; place-items: center; text-align: center; padding: 16px; border-radius: 16px; font: 700 24px/1.3 var(--font-body); border: 1px solid var(--line); background: linear-gradient(180deg, #1c2440, #10162a); transition: border-color .2s, background .2s; }
.fj-card.in { animation: cdIn .25s ease-out; }
.fj-card.right { border-color: #6fcf97; background: linear-gradient(180deg, #17402c, #10241a); }
.fj-card.wrong { border-color: #e0484f; background: linear-gradient(180deg, #43181d, #230e12); }
.fj-why { min-height: 40px; margin: 0; text-align: center; color: var(--muted); }
.fj-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fj-btns .btn { min-height: 56px; font-size: 18px; }
.fj-want { background: linear-gradient(180deg, #5b3d8a, #3b2760); color: #fff; }

/* Tabuada */
.tb { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; height: 100%; }
.tb-sky { position: relative; overflow: hidden; min-height: 224px; }
.tb-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, #e0484f, #d4b26a, #e0484f); opacity: .7; }
.tb-drop { position: absolute; top: 0; width: 28%; text-align: center; padding: 8px 4px; border-radius: 16px; font: 800 24px var(--font-num); color: #fff; background: linear-gradient(180deg, #2b4a7a, #1a2c4c); border: 1px solid #7fd8ff; box-shadow: 0 0 14px rgba(127, 216, 255, .35); will-change: transform; }
.tb-drop.pop { animation: tbPop .38s ease-out forwards; }
.tb-drop.crash { animation: tbCrash .38s ease-out forwards; }
@keyframes tbPop { to { opacity: 0; filter: brightness(2); scale: 1.4; } }
@keyframes tbCrash { to { opacity: 0; background: #e0484f; } }
.tb-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line-soft); }
.tb-input output { flex: 1; text-align: center; font: 800 28px var(--font-num); color: var(--gold-hi); }
.tb-input output.shake { animation: shake .3s; color: #e0484f; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tb-time { font-size: 18px; color: var(--muted); min-width: 40px; text-align: right; }
.tb-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 8px 16px; max-width: 424px; width: 100%; justify-self: center; }
.tb-pad button { height: 56px; border-radius: 16px; border: 1px solid var(--line); background: #151c31; color: var(--fg); font: 700 24px var(--font-num); touch-action: manipulation; }
.tb-pad button:active { background: #24305a; }
.tb-pad [data-ok] { color: #6fcf97; }

/* Pergaminho */
.pg { align-self: center; justify-self: center; width: min(560px, 100%); padding: 16px; display: grid; gap: 16px; }
.pg-scroll { min-height: 96px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #efe1bd, #d9c38e); color: #3a2a12; border: 2px solid #b08d4a; }
.pg-scroll.right { box-shadow: 0 0 0 3px #6fcf97; }
.pg-scroll.wrong { animation: shake .3s; }
.pg-scroll .muted { color: #7a6537; }
.pg-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pg-w { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: #1a2238; color: var(--fg); font: 600 18px var(--font-body); }
.pg-w.in { background: rgba(255, 255, 255, .55); color: #3a2a12; border-color: #b08d4a; }
.pg-msg { min-height: 24px; margin: 0; text-align: center; color: var(--muted); }

/* Memória */
.mm { align-self: center; justify-self: center; padding: 16px; width: 100%; max-width: 480px; }
.mm-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 8px; }
.mm-c { position: relative; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); background: transparent; padding: 0; perspective: 600px; touch-action: manipulation; }
.mm-c span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; backface-visibility: hidden; transition: transform .35s; }
.mm-f { font-size: clamp(24px, 8vw, 38px); background: #21305a; transform: rotateY(180deg); }
.mm-b { font-size: 24px; color: var(--gold); background: radial-gradient(circle at 50% 35%, #34476e, #0c1222 75%); }
.mm-c.open .mm-f, .mm-c.done .mm-f { transform: none; }
.mm-c.open .mm-b, .mm-c.done .mm-b { transform: rotateY(-180deg); }
.mm-c.done .mm-f { background: #1d4a33; box-shadow: inset 0 0 0 2px #6fcf97; }

/* Trilha do Herói */
.tr { position: relative; min-height: 0; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.tr canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tr-hint { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: min(320px, 86%); text-align: center; padding: 16px 16px; border-radius: 16px; background: rgba(7, 9, 15, .8); border: 1px solid var(--line); font-size: 16px; pointer-events: none; }

/* Desbloqueio e Prova */
.ul-opts { display: grid; gap: 8px; margin: 16px 0; }
.ul-opt { display: grid; gap: 4px; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--fg); }
.ul-opt b { font-size: 18px; color: var(--gold-hi); }
.ul-opt span { font-size: 14px; color: var(--muted); }
.ul-opt:disabled { opacity: .5; }
.pv-q { font: 700 20px/1.35 var(--font-body); margin: 8px 0 16px; }
.pv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-opts .btn { min-height: 56px; font-size: 18px; }
.pv-opts .btn.right { border-color: #6fcf97; background: rgba(111, 207, 151, .18); }
.pv-opts .btn.wrong { border-color: #e0484f; background: rgba(224, 72, 79, .18); }
.pv-msg { min-height: 24px; color: var(--muted); }

/* Atalho para jogar quando o app fica sem internet */
.offline-play { display: none; position: fixed; z-index: 33; right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 48px; max-width: calc(50vw - 56px); overflow: hidden; text-overflow: ellipsis; padding: 0 16px; border-radius: 24px; border: 1px solid var(--gold); background: rgba(10, 14, 26, .95); color: var(--gold-hi); font: 600 16px var(--font-body); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); white-space: nowrap; }
.is-offline .offline-play { display: block; }
.chat-open .offline-play { display: none; }
.radial-open .offline-play { display: none; }

.cd-head { flex-wrap: wrap; }
.cd-head .ch-tabs { order: 3; flex: 1 0 100%; padding-top: 8px; }
.cd-head strong { flex: 1; }

/* Contagem regressiva das perguntas (v1.2.0) */
.cdn { display: grid; gap: 8px; justify-items: center; }
.cdn[hidden] { display: none; }
.cdn-txt { font-size: 16px; color: var(--muted); }
.cdn-txt b { color: var(--gold-hi); font-size: 20px; }
.cdn-bar { width: min(240px, 100%); height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cdn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--celeste)); transform-origin: left; animation: cdnShrink linear forwards; }
@keyframes cdnShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fj-btns .btn:disabled, .pv-opts .btn:disabled { opacity: .6; }
.pv-opts .btn.right:disabled, .pv-opts .btn.wrong:disabled { opacity: 1; }

.wallet span { white-space: nowrap; }
@media (max-width: 420px) { .wallet { gap: 8px; padding: 8px; font-size: 14px; } .hud-right { gap: 8px; } }

.bar > span { gap: 8px; }
.bar > span b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar > span b:last-child { flex: none; }
.cdn .btn { min-width: 160px; }