/* Orynda palette: night blue, lunar silver, shard turquoise, ember gold */
:root {
  --bg: #0d1220;
  --panel: rgba(13, 18, 32, 0.78);
  --panel-solid: #151c2e;
  --line: rgba(229, 233, 241, 0.16);
  --text: #e5e9f1;
  --muted: #9aa4b8;
  --gold: #e3a85c;
  --shard: #55cbc2;
  --hp: #d8423b;
  --mp: #3b7bd8;
  --xp: #55cbc2;
  --good: #7dff8a;
  --bad: #ff6b5e;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* a phone: dragging down from the top never reloads the game (pull to refresh), and a long press on a picture
   or a button never opens the system's menu */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ---------- screens */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 18px 16px; background: radial-gradient(ellipse at 50% 30%, #1b2742 0%, var(--bg) 70%); z-index: 30; overflow-y: auto; }
.brand { font: 400 40px/1 Georgia, "Times New Roman", serif; letter-spacing: 8px; color: var(--text);
  text-shadow: 0 2px 18px rgba(85, 203, 194, 0.35); text-align: center; }
.brand span { display: block; margin-top: 8px; font: 400 13px system-ui, sans-serif; letter-spacing: 3px; color: var(--shard); }
.bar { width: min(320px, 80vw); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
#loadbar { height: 100%; width: 0; background: var(--shard); transition: width 0.2s; }
#loadtext, .hint { color: var(--muted); margin: 0; text-align: center; }
#loadtip { max-width: min(460px, 86vw); margin: 18px auto 0; text-align: center; color: #c9b88a; font-style: italic; line-height: 1.45; min-height: 3em; }
#select { background: none; justify-content: flex-start; padding: 12px 16px; }
#select .brand { font-size: 30px; }
.select-body { flex: 1; width: 100%; display: flex; gap: 12px; align-items: stretch; min-height: 0; }
#classes { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 8px; width: min(300px, 38vw); align-content: center; }
#preview-gap { flex: 1; min-width: 60px; }
.new-char { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; width: min(340px, 40vw); padding: 12px;
  background: rgba(13, 18, 32, 0.72); border: 1px solid var(--line); border-radius: 14px; }
.new-char #charname { width: 100%; }
.news-btn { background: none; border: 1px solid rgba(85, 203, 194, 0.5); color: #9fe8df; border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
/* Novidades and the war to watch share a row when they fit (on a short screen, with the short label) */
.nc-row { display: flex; flex-wrap: wrap; gap: inherit; }
.nc-row > * { flex: 1 1 auto; }
#watch-btn .short { display: none; }
#news { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 14, 0.6); padding: 16px; }
#news.hidden { display: none; }
#news .news-box { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: #141a26; border: 1px solid #2c3a52; border-radius: 12px; padding: 12px 16px; color: #dfe6f0; }
#news ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* the list scrolls, the button stays at hand (a phone lying down is short) */
#news h3 { margin: 0 0 8px; color: #ffd24a; }
#news ul { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.45; }
#news li { margin-bottom: 6px; }
#news li b { color: #9fe8df; }
#news .primary { width: 100%; }
.new-char .primary { min-width: 0; width: 100%; }
#class-desc { text-align: left; font-size: 12px; color: var(--text); }
#class-desc b { color: var(--shard); }
@media (orientation: portrait) {
  .select-body { flex-direction: column; }
  #classes { width: 100%; grid-template-columns: repeat(3, 1fr); }
  #preview-gap { min-height: 34vh; }
  .new-char { width: 100%; }
}
.cls { padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: center; }
.cls b { display: block; font-size: 14px; }
.cls small { color: var(--muted); }
.cls.on { border-color: var(--shard); box-shadow: 0 0 0 1px var(--shard) inset; }
#class-desc { min-height: 34px; font-size: 12px; max-width: 420px; }
#charname { width: min(260px, 80vw); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f1626;
  color: var(--text); font: inherit; text-align: center; user-select: text; -webkit-user-select: text; }
button.primary { min-width: 220px; max-width: 100%; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--shard); color: #08201f; font-weight: 700; }
button.primary:disabled { opacity: 0.5; }

/* ---------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #stick { pointer-events: auto; }
/* phones: quick repeated taps on the HUD never zoom the page (the game handles every touch there); the
   button itself takes the touch, not the icon inside it */
#hud, #hud * { touch-action: none; }
#hud button * { pointer-events: none; }
#status { position: absolute; top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l)); width: min(210px, 44vw);
  padding: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#lvl { font-weight: 700; color: var(--gold); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gold { font-size: 11px; color: var(--gold); margin-top: 3px; }
#relicbar { font-size: 10px; color: #cfd6e4; margin-top: 2px; letter-spacing: 1px; }
#relicbar:empty { display: none; }
#relicbar span { letter-spacing: 0; opacity: 0.85; }
.gauge { position: relative; height: 13px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gauge > div { height: 100%; width: 100%; transition: width 0.15s; }
.gauge span { position: absolute; inset: 0; font-size: 10px; line-height: 13px; text-align: center; text-shadow: 0 1px 2px #000; }
.gauge.hp > div { background: linear-gradient(#ef5a50, var(--hp)); }
.gauge.mp > div { background: linear-gradient(#5a95ef, var(--mp)); }
.gauge.xp { height: 6px; }
.gauge.xp > div { background: linear-gradient(90deg, var(--xp), #c8fff6); box-shadow: 0 0 6px rgba(120, 240, 225, 0.6); transition: width 0.4s ease-out; }
#tracker { position: absolute; top: calc(118px + var(--safe-t)); left: calc(8px + var(--safe-l)); width: min(210px, 44vw);
  font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#tracker:not(:empty) { padding: 4px 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(10, 14, 22, 0.66), rgba(10, 14, 22, 0.28)); } /* readable over snow too */
#tracker .q { margin-bottom: 4px; pointer-events: auto; cursor: pointer; }
#tracker .q b { color: var(--gold); display: block; }
#tracker .q.done b { color: var(--good); }
#tracker .q.next b { color: #9fe8ff; }
#tracker .q b.one { display: flex; gap: 5px; }
#tracker .q b.one span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tracker .q b.one i { flex: none; font-style: normal; color: #ece6d6; }
#target { position: absolute; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(200px, 34vw);
  padding: 5px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
#tname { font-size: 11px; color: #ffb4a8; display: flex; justify-content: center; white-space: nowrap; }
#tname .tn { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tname .tl { flex: none; }
#target.npc #tname { color: var(--good); }
#area-name { position: absolute; top: calc(96px + var(--safe-t)); left: 50%; transform: translateX(-50%); font: 400 17px Georgia, serif;
  letter-spacing: 1px; color: var(--text); text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity 1s; white-space: nowrap; }
#area-name.show { opacity: 1; }
#fps { position: absolute; top: calc(122px + var(--safe-t)); right: calc(8px + var(--safe-r)); width: 96px; text-align: center; font-size: 10px; color: #9fe8df; text-shadow: 0 1px 2px #000; pointer-events: none; }
#clock { position: absolute; top: calc(106px + var(--safe-t)); right: calc(8px + var(--safe-r)); width: 96px; text-align: center; font-size: 11px; color: #e8e0cc; text-shadow: 0 1px 2px #000; pointer-events: none; }
#minimap { position: absolute; top: calc(8px + var(--safe-t)); right: calc(8px + var(--safe-r)); width: 96px; height: 96px;
  border-radius: 50%; border: 2px solid var(--line); background: #000; }
#topbtns { position: absolute; top: calc(8px + var(--safe-t)); right: calc(112px + var(--safe-r)); display: flex; gap: 5px; }
.corner { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 16px; padding: 0; position: relative; }
/* big moments: level up, boss down, dungeon cleared */
#banner { position: fixed; left: 0; right: 0; top: 19%; text-align: center; pointer-events: none; z-index: 30; }
#banner .b { display: inline-block; max-width: 92vw; box-sizing: border-box; padding: 10px 34px; font-family: Georgia, serif; font-size: clamp(24px, 5.4vw, 34px); color: #ffe2a0; letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(255, 200, 90, 0.9), 0 2px 4px #000; background: linear-gradient(90deg, transparent, rgba(30, 22, 10, 0.75), transparent);
  animation: banner 2.6s ease-out forwards; }
#banner .b small { display: block; font-size: 14px; letter-spacing: 1px; color: #f0e6cc; text-shadow: 0 1px 3px #000; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.4); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
/* fallen: the screen dims while you wait to stand again */
#fallen { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle, rgba(60, 0, 0, 0.25), rgba(10, 0, 0, 0.7)); }
#fallen b { display: block; font-family: Georgia, serif; font-size: 40px; color: #ff8a7a; text-shadow: 0 0 16px #000; text-align: center; }
#fallen span { display: block; color: #f0d8d0; text-align: center; margin-top: 6px; }
#fallen.hidden { display: none; }
.corner.badge::after, #btn-lume.badge::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 6px #ff4a3a; }
#log { position: absolute; left: calc(8px + var(--safe-l)); bottom: calc(160px + var(--safe-b)); width: min(270px, 50vw);
  font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#log div { transition: opacity 1s; }
#stick { position: absolute; left: calc(16px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); width: 132px; height: 132px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); touch-action: none; opacity: 0.55;
  transition: opacity 0.15s; }
#stick.active { opacity: 1; }
#knob { position: absolute; left: 42px; top: 42px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.4); }
/* the hotbar wheel, like the phone MMOs: the attack in the middle, eight slots around it numbered from the
   top clockwise (radius 80 px), the page button above and the target button below on the left, on a round
   backdrop; a column of round buttons at the right edge (the Lume, jump, walk, the horse, the auto hunt) */
#actions { position: absolute; right: calc(58px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); width: 232px; height: 232px;
  pointer-events: none; transform-origin: right bottom; transform: scale(0.76); }
#actions::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(8, 12, 22, 0.62) 0 40%, rgba(8, 12, 22, 0.42) 66%, rgba(8, 12, 22, 0.24) 100%);
  border: 2px solid rgba(214, 184, 120, 0.32); box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.3); }
.act { position: absolute; border-radius: 50%; border: 2px solid rgba(150, 170, 200, 0.35); background: rgba(18, 24, 40, 0.88);
  font-size: 22px; touch-action: none; padding: 0; color: #e8eef8; }
.act:active { filter: brightness(1.5); }
.act .lab { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font: 800 10px/1 system-ui; letter-spacing: 0.5px;
  color: #f0e2c0; text-shadow: 0 1px 2px #000; }
.act.big { left: 74px; top: 74px; width: 84px; height: 84px; font-size: 34px; border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #4a2a20 0, #24140f 72%); box-shadow: 0 0 0 4px rgba(8, 12, 22, 0.85), 0 0 14px rgba(255, 200, 90, 0.25); }
.act.big b, .act.tg b { display: block; margin-top: -9px; font-weight: 400; }
.act.sk { width: 54px; height: 54px; }
.act.sk::before { content: attr(data-n); position: absolute; left: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; z-index: 2;
  background: #0d1220; border: 1px solid rgba(214, 184, 120, 0.55); font: 700 10px/15px system-ui; color: #e8dcc0; text-align: center; }
.act.sk b { position: absolute; inset: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 400; overflow: hidden; }
.act.sk b.ic { width: auto !important; height: auto !important; }
.act.sk b.empty { background: none; }
.act.sk b.empty::after { content: '+'; font: 300 22px system-ui; color: rgba(220, 230, 245, 0.42); }
/* ready to use: a teal ring; waiting: a dark sweep that turns like a clock hand */
.act.sk.ready { border-color: rgba(80, 220, 200, 0.85); box-shadow: 0 0 6px rgba(80, 220, 200, 0.35); }
.act.sk i { position: absolute; inset: 3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(0, 0, 0, 0.72) calc(var(--cd, 0) * 1%), transparent 0); }
.act.sk s { position: absolute; right: 4px; bottom: 2px; font: 700 11px system-ui; text-decoration: none; text-shadow: 0 1px 2px #000; }
.act.sk.nomp b { filter: grayscale(1) brightness(0.6); }
.act.sk[data-k="0"] { left: 89px; top: 9px; }
.act.sk[data-k="1"] { left: 146px; top: 32px; }
.act.sk[data-k="2"] { left: 169px; top: 89px; }
.act.sk[data-k="3"] { left: 146px; top: 146px; }
.act.sk[data-k="4"] { left: 89px; top: 169px; }
.act.sk[data-k="5"] { left: 32px; top: 146px; }
.act.sk[data-k="6"] { left: 9px; top: 89px; }
.act.sk[data-k="7"] { left: 32px; top: 32px; }
.act.pg { left: 82px; top: -54px; width: 68px; height: 44px; border-radius: 22px; font: 800 12px system-ui; color: var(--gold); border-color: rgba(214, 184, 120, 0.7); }
.act.tg { left: -48px; top: 172px; width: 56px; height: 56px; font-size: 20px; }
.side { position: absolute; right: calc(8px + var(--safe-r)); width: 42px; height: 42px; border-radius: 50%; padding: 0;
  font: 800 8px system-ui; letter-spacing: 0.3px; color: #f0e6cc; background: rgba(18, 24, 40, 0.85); border: 2px solid rgba(214, 184, 120, 0.55); }
.side.on { background: rgba(60, 130, 115, 0.75); border-color: #8fe8d0; color: #fff; }
#btn-jump { bottom: calc(151px + var(--safe-b)); }
#btn-walk { bottom: calc(104px + var(--safe-b)); }
#potions { position: absolute; bottom: calc(14px + var(--safe-b)); left: calc(158px + var(--safe-l)); display: flex; gap: 6px; }
.pot { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); padding: 0; }
.pot b { position: absolute; left: 2px; top: 2px; }
.pot span { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#btn-interact { position: absolute; right: calc(276px + var(--safe-r)); bottom: calc(60px + var(--safe-b)); padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--gold); background: rgba(40, 32, 12, 0.85); color: var(--gold); font-weight: 700; max-width: 40vw; }
#btn-interact small { font-size: inherit; font-weight: inherit; }

/* icons: placeholder symbols on a coloured disc, or an image */
.ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; line-height: 1; font-weight: 700;
  background-repeat: no-repeat; flex: 0 0 auto; }

/* portrait phones: menu buttons in a column under the minimap, target frame under the status,
   the outer arc of the hotbar folds away (use the page button) */
@media (max-aspect-ratio: 1/1) {
  #status { width: min(250px, calc(100vw - 130px)); }
  #topbtns { top: calc(112px + var(--safe-t)); right: calc(10px + var(--safe-r)); flex-direction: column; }
  #target { top: calc(98px + var(--safe-t)); left: calc(8px + var(--safe-l)); transform: none; width: min(250px, calc(100vw - 130px)); }
  #tracker { top: calc(148px + var(--safe-t)); }
  #area-name { top: calc(30vh + var(--safe-t)); }
  #potions { left: calc(14px + var(--safe-l)); bottom: calc(160px + var(--safe-b)); flex-direction: column; }
  #log { bottom: calc(272px + var(--safe-b)); width: min(240px, 62vw); }
  #btn-interact { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(196px + var(--safe-b)); }
}
/* portrait: the wheel at the right edge, smaller; jump and walk to its upper left */
@media (max-aspect-ratio: 1/1) {
  #actions { right: calc(8px + var(--safe-r)); transform: scale(0.64); }
  #btn-jump, #btn-walk { right: calc(166px + var(--safe-r)); width: 38px; height: 38px; }
  #btn-jump { bottom: calc(136px + var(--safe-b)); }
  #btn-walk { bottom: calc(92px + var(--safe-b)); }
}
@media (max-aspect-ratio: 1/1) and (max-width: 420px) {
  #stick { width: 112px; height: 112px; }
  #knob { left: 32px; top: 32px; }
}
/* short portrait screens: the wheel a little smaller still, clear of the menu column above it */
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  #actions { transform: scale(0.58); }
  #btn-jump, #btn-walk { right: calc(152px + var(--safe-r)); }
  #btn-jump { bottom: calc(126px + var(--safe-b)); }
  #btn-walk { bottom: calc(84px + var(--safe-b)); }
}

/* ---------- a phone held upright: only the screen lying down is played */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(ellipse at 50% 35%, #1b2742 0%, var(--bg) 75%); color: var(--text); padding: 24px; }
}
.rot-box b { display: block; font: 400 26px Georgia, serif; color: #ffe2a0; margin-bottom: 8px; }
.rot-box span { display: block; font-size: 15px; margin-bottom: 18px; }
.rot-box small { display: block; font-size: 12px; color: var(--muted); max-width: 260px; margin: 0 auto; }
.rot-phone { width: 44px; height: 78px; border: 3px solid var(--shard); border-radius: 10px; margin: 0 auto 22px; box-shadow: 0 0 18px rgba(85, 203, 194, 0.35);
  animation: rotphone 2.4s ease-in-out infinite; }
@keyframes rotphone { 0%, 18% { transform: rotate(0); } 48%, 78% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ---------- world labels */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.lume-say { position: absolute; left: 0; top: 0; max-width: 210px; padding: 5px 9px; border-radius: 10px; background: rgba(16, 20, 30, 0.86);
  border: 1px solid var(--lume, #aef5ec); color: #eef3fa; font: 12px/1.3 system-ui, sans-serif; text-align: center; opacity: 0; transition: opacity 0.25s; white-space: normal; }
.lume-say.show { opacity: 1; }
.lume-say::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--lume, #aef5ec); border-bottom: 0; }
.lbl { position: absolute; transform: translate(-50%, -100%); font-size: 11px; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px #000; text-align: center; }
.lbl.npc { color: #9fe39f; }
.lbl.mob { color: #ffd0c8; }
.lbl .mk { display: block; font: 900 28px Georgia, serif; line-height: 1; margin-bottom: 2px; animation: mkbob 1.4s ease-in-out infinite;
  -webkit-text-stroke: 1.5px #2a1d00; text-shadow: 0 0 10px currentColor, 0 2px 3px #000; }
.lbl .mk.avail { color: #ffd24a; }
.lbl .mk.ready { color: #6dff7e; -webkit-text-stroke-color: #062a0c; }
@keyframes mkbob { 50% { transform: translateY(-5px); } }
.dmg { position: fixed; pointer-events: none; font: 800 19px system-ui, sans-serif; color: #fff; z-index: 9; /* under the HUD's panels: a crit's number covered the target frame */
  text-shadow: 0 2px 0 #000, 0 0 6px #000; transform: translate(-50%, -50%); }
.dmg.player { color: var(--bad); }
.dmg.crit { color: #ffd24a; font-size: 25px; }
.dmg.heal { color: var(--good); }
.dmg.xp { color: #9ff0e6; font-size: 14px; }

/* ---------- sheets (panel / npc) */
.sheet { position: fixed; z-index: 20; top: calc(6px + var(--safe-t)); bottom: calc(6px + var(--safe-b));
  left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; } /* the row slides under a finger; no bar */
.tabs button { flex: 1; min-width: 80px; padding: 8px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; }
.tabs button.on { background: rgba(85, 203, 194, 0.15); color: var(--shard); }
.tabs .close, .npc-head .close { flex: 0 0 40px; min-width: 40px; color: var(--text); font-size: 16px; border: 0; background: #262f45; border-radius: 8px; }
.tabs .close { position: sticky; right: 0; box-shadow: -8px 0 8px var(--panel-solid); } /* stays visible when the tabs scroll */
#panel-body, #npc-body { flex: 1; overflow-y: auto; padding: 10px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.npc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.npc-head b { color: var(--good); font-size: 15px; }
/* on wide screens the talk with an NPC is a panel on the right, as tall as its content: the world (and the NPC) stay in view */
@media (min-width: 760px) and (min-height: 480px) {
  #npc.sheet { left: auto; right: calc(12px + var(--safe-r)); width: min(500px, 48vw); top: calc(64px + var(--safe-t)); bottom: auto; max-height: calc(100vh - 150px); }
  body:has(#npc:not(.hidden):not(.wide)) #toast { left: calc((100vw - min(500px, 48vw) - 12px) / 2); width: calc(100vw - min(500px, 48vw) - 40px); }
  body:has(#npc:not(.hidden):not(.wide)) #banner { right: calc(min(500px, 48vw) + 12px); }
  body:has(#npc:not(.hidden):not(.wide)) #area-name { left: calc((100vw - min(500px, 48vw) - 12px) / 2); } /* (it was behind the talk) */
  #npc.sheet.wide { width: min(860px, 84vw); }
}
.cols { display: flex; flex-wrap: wrap; gap: 12px; }
.cols > * { flex: 1 1 260px; min-width: 0; }
h3 { margin: 0 0 6px; font-size: 13px; color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 6px; }
.slot { position: relative; width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); padding: 0; }
.slot .ic { position: absolute; left: 1px; top: 1px; }
.slot .n { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.slot .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--muted); text-align: center; }
.slot.sel { border-color: var(--shard); }
.slot.empty { opacity: 0.4; }
.slot.bad .ic { filter: grayscale(1) brightness(0.6); opacity: 0.5; }
.slot.up::after { content: '▲'; position: absolute; left: 3px; top: 1px; font: 700 11px system-ui; color: #5dff7a; text-shadow: 0 0 4px #000, 0 1px 2px #000; }
.equip { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 6px; }
.paperdoll { display: flex; gap: 10px; align-items: flex-start; }
.paperdoll .equip { flex: 1; grid-template-columns: repeat(2, 48px); }
.portrait { width: 132px; height: 172px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #18202e; flex: none; }
.stats { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 12px; }
.stats span:nth-child(odd) { color: var(--muted); }
.row-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.row-item .txt { flex: 1; min-width: 0; }
.row-item .txt b { display: block; }
.row-item .txt small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.07); white-space: nowrap; }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.btn.danger { border-color: #ff6b5e; color: #ffb3aa; background: rgba(120, 30, 24, 0.4); } /* a second tap does it (Abandonar) */
.btn:disabled { opacity: 0.4; }
.dialog-line { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.dialog-line.me { background: rgba(85, 203, 194, 0.1); text-align: right; }
.quest-card { padding: 8px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; }
.quest-card b { color: var(--gold); }
.quest-card .obj { font-size: 12px; color: var(--text); }
.quest-card .obj.done { color: var(--good); }
.quest-card .rw { font-size: 11px; color: var(--muted); }
.actions-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* the buttons that close a conversation (Aceitar missão, Concluir, Voltar) stay in sight at the foot of the window: on a
   phone a long story pushed them under the edge */
#npc-body > .actions-row:last-child { position: sticky; bottom: -7px; z-index: 1; margin-bottom: -7px; padding: 8px 0 7px;
  background: linear-gradient(rgba(21, 28, 46, 0), rgb(21, 28, 46) 8px); }
.muted { color: var(--muted); }

#popup { position: fixed; z-index: 25; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 92vw);
  max-height: 86vh; overflow-y: auto; padding: 12px; background: #1a2236; border: 1px solid var(--shard); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
#popup .head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
#popup .desc { color: var(--muted); font-size: 12px; margin: 6px 0; }
#toast { position: fixed; z-index: 26; left: 50%; top: calc(19% + 72px); transform: translateX(-50%); pointer-events: none; text-align: center; width: min(92vw, 640px); }
#toast div { font: 400 20px/1.25 Georgia, serif; color: var(--gold); text-shadow: 0 2px 8px #000; margin: 6px 4px; animation: toast 2.6s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.bar-row { display: flex; align-items: center; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.bar-row .muted { width: 58px; font-size: 11px; }
.bar-row .slot { width: 42px; height: 42px; }
#fatal { color: #ffb4a8; text-align: center; }

/* ---------- additions: effects, mode overlay, Lume, nations, map */
#effects, #teffects { display: flex; gap: 3px; margin-top: 3px; min-height: 0; }
#effects i, #teffects i { font-style: normal; font-size: 11px; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 4px; background: rgba(255,255,255,0.1); }
#effects i.fx-elixir { width: auto; padding: 0 3px; font-weight: 700; } .fx-elixir.atk { color: #ff8a5a; } .fx-elixir.def { color: #8ab8ff; }
.fx-stun { color: #ffd24a; } .fx-slow { color: #9fe8ff; } .fx-dot { color: #ff7a6a; } .fx-hot { color: #7dff8a; } .fx-shield { color: #9ad0ff; } .fx-buff { color: #ffd24a; }
#mode-hud { position: absolute; top: calc(8px + var(--safe-t)); left: 50%; transform: translateX(-50%); min-width: 190px; max-width: 46vw; padding: 7px 12px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; font-size: 12px; text-align: center; line-height: 1.45; }
#mode-hud b { color: var(--gold); }
.chan { height: 6px; margin: 4px 0 2px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.chan > div { height: 100%; background: var(--shard); }
#btn-mode { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + var(--safe-b)); padding: 12px 18px; border-radius: 12px;
  border: 1px solid var(--shard); background: rgba(16, 48, 47, 0.9); color: #c8fff8; font-weight: 700; font-size: 14px; }
#btn-lume { position: absolute; right: calc(9px + var(--safe-r)); bottom: calc(198px + var(--safe-b)); width: 40px; height: 40px; border-radius: 50%; padding: 0;
  border: 1px solid var(--lume, #aef5ec); background: radial-gradient(circle, var(--lume, #aef5ec) 0%, rgba(13,18,32,0.8) 62%); box-shadow: 0 0 10px var(--lume, #aef5ec); }
#btn-lume.ready { animation: pulse 1.2s infinite; border-width: 2px; }
@keyframes pulse { 50% { box-shadow: 0 0 22px var(--lume, #aef5ec); transform: scale(1.08); } }
.lbl.ally { color: #9fd8ff; }
.lbl.foe { color: #ff9a8a; }
.lbl .hpb { display: block; width: 46px; height: 4px; margin: 2px auto 0; background: rgba(0,0,0,0.5); border-radius: 2px; overflow: hidden; }
.lbl .hpb span { display: block; height: 100%; background: #e85a50; }
.lbl .hpb.mini { width: 34px; height: 3px; opacity: 0.9; }
.lbl.ally .hpb span { background: #5ab0ef; }
.dmg.gold { color: var(--gold); font-size: 14px; }
#area-name small { display: block; font: 400 11px system-ui; color: var(--muted); text-align: center; letter-spacing: 0; }
.mini { padding: 0 6px; border-radius: 6px; border: 1px solid var(--gold); background: none; color: var(--gold); font-weight: 700; margin-left: 4px; }
.row-item.locked { opacity: 0.5; }
/* achievements: a bar that fills, the reward under it; collected ones dim */
.cmp { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); line-height: 1.5; }
.invhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invhead .btn { padding: 5px 12px; font-size: 12px; }
.invhead h3 { flex: 1; } /* the buttons (Abrir caixas, Organizar) together on the right */
.titles { display: flex; flex-wrap: wrap; gap: 6px; }
.titles .btn { padding: 5px 10px; font-size: 12px; }
#lvl .ttl { color: #ffd24a; font-size: 0.85em; font-style: italic; }
.ach { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ach .txt { flex: 1; min-width: 0; }
.ach .txt b { display: block; }
.ach .txt small { color: var(--muted); display: block; }
.ach .txt small.rw { font-size: 11px; margin-top: 2px; }
.ach.ready { background: linear-gradient(90deg, rgba(255, 210, 74, 0.12), transparent 70%); }
.ach.done { opacity: 0.55; }
.achbar { height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.achbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b8893a, #ffd24a); }
.ach.done .achbar i { background: #6fbf6a; }
#panel .tabs button.badge { position: relative; }
#panel .tabs button.badge::after { content: ''; position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ff4a3a; }
.chapter { padding: 6px 8px; margin: 3px 0; border-radius: 8px; background: rgba(255,255,255,0.05); }
.chapter.done { color: var(--good); }
.lume-pic { width: 96px; height: 108px; object-fit: cover; border-radius: 10px; border: 1px solid var(--lume); flex: none; }
.lume-card { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--lume); background: rgba(255,255,255,0.03); }
.lume-orb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff 0 12%, var(--lume) 30%, transparent 70%);
  box-shadow: 0 0 24px var(--lume); animation: pulse 2.4s infinite; }
.lume-orb.small { width: 40px; height: 40px; display: block; margin: 0 auto 6px; }
.affs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.aff { padding: 10px; border-radius: 12px; border: 1px solid var(--lume); background: rgba(255,255,255,0.04); text-align: center; }
.aff b { display: block; color: var(--lume); }
.aff small { color: var(--muted); }
.nations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin-top: 8px; }
.nation-card { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--nc); background: rgba(255,255,255,0.03); text-align: left; font-size: 12px; display: block; }
.nation-card b { color: var(--nc); font-size: 14px; }
.nation-card.mine { box-shadow: 0 0 0 2px var(--nc) inset; }
#popup .nations { max-height: 56vh; overflow-y: auto; }
#popup { width: min(560px, 94vw); }
#worldmap { width: min(100%, 520px); height: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 0 auto; flex: none; }
/* the world map tab: the map whole, as big as the screen lets it (js/ui.js fitWorldMap), nothing to scroll */
#panel-body.mapview { overflow: hidden; padding: 6px; }
#panel.mapfull .tabs { display: none; }
#wm-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
#wm-wrap.wm-row { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 14px; }
#wm-wrap .wm-side { display: flex; flex-direction: column; gap: 6px; }
#wm-wrap .wm-side h3 { margin: 0; }
#wm-wrap .wm-side p { margin: 0; font-size: 12px; line-height: 1.4; }
#wm-wrap.wm-row .wm-side { flex: 0 1 210px; min-width: 120px; }
@media (orientation: landscape) and (max-height: 500px) {
  #wm-wrap .wm-side p { font-size: 11px; line-height: 1.35; }
}
@media (max-aspect-ratio: 1/1) {
  #btn-lume { right: calc(10px + var(--safe-r)); top: calc(112px + 6 * 41px + var(--safe-t)); bottom: auto; width: 40px; height: 40px; }
  #mode-hud { top: calc(150px + var(--safe-t)); left: auto; right: calc(56px + var(--safe-r)); transform: none; max-width: 60vw; }
}

/* gender choice on the start screen */
.gender { display: flex; gap: 8px; margin: 8px 0; }
.gender button { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #dfe6f0; font: inherit; }
.gender button.on { background: rgba(85,203,194,0.25); border-color: #55cbc2; color: #fff; }

/* refining */
.slot .plus { position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.refine-result { font-size: 22px; font-weight: 800; text-align: center; margin: 6px 0 10px; text-shadow: 0 0 12px currentColor; animation: refine-pop 0.5s ease-out; }
@keyframes refine-pop { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* mount button: under the Lume button */
#btn-mount { position: absolute; right: calc(8px + var(--safe-r)); bottom: calc(57px + var(--safe-b)); width: 42px; height: 42px; border-radius: 50%; padding: 0;
  font-size: 21px; line-height: 38px; color: #e8d2a8; background: rgba(20, 24, 34, 0.75); border: 1px solid rgba(232, 210, 168, 0.5); }
#btn-mount.on { background: rgba(160, 120, 60, 0.6); border-color: #ffd27a; color: #fff; }
#btn-auto { position: absolute; right: calc(8px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); width: 42px; height: 42px; border-radius: 50%; padding: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #cfe6ff; background: rgba(20, 24, 34, 0.75); border: 1px solid rgba(160, 200, 255, 0.5); }
#btn-auto.on { background: rgba(60, 120, 200, 0.65); border-color: #9fd8ff; color: #fff; box-shadow: 0 0 10px rgba(120, 190, 255, 0.7); }
@media (max-aspect-ratio: 1/1) { #btn-auto { right: calc(10px + var(--safe-r)); top: calc(112px + 8 * 41px + var(--safe-t)); bottom: auto; width: 40px; height: 40px; } }
@media (max-aspect-ratio: 1/1) { #btn-mount { right: calc(10px + var(--safe-r)); top: calc(112px + 7 * 41px + var(--safe-t)); bottom: auto; width: 40px; height: 40px; line-height: 36px; font-size: 22px; } }

/* party frames under the player's status */
#party { position: absolute; left: calc(8px + var(--safe-l)); top: 42%; width: min(150px, 36vw); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
#party:empty { display: none; }
#party .pm { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; }
#party .pm { font-size: 11px; line-height: 1.2; }
#party .pm small { color: #a8b4c4; }
#party .pm .gauge { height: 5px; margin-top: 2px; }
#party .pm.dead { opacity: 0.45; }

/* in-game question box (js/ask.js), above every screen */
.ask { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 16, 0.55); pointer-events: auto; }
.ask-card { width: min(340px, 92vw); padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-solid);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.ask-card p { margin: 0 0 10px; }
.ask-card input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f1626; color: var(--text);
  font: inherit; user-select: text; -webkit-user-select: text; }
.ask-card .actions-row { justify-content: flex-end; }

/* ---------- the simulated battle (js/modes/warsim.js): the watcher's screen instead of the player's */
body.sim #actions, body.sim #potions, body.sim .side, body.sim #btn-auto, body.sim #btn-mount, body.sim #btn-lume, body.sim #status,
body.sim #tracker, body.sim #party, body.sim #topbtns, body.sim #btn-interact, body.sim #mode-hud, body.sim #btn-mode, body.sim #log { display: none !important; }
#sim-board { position: absolute; top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l)); pointer-events: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; font-size: 12px; }
#sim-board .sim-title { color: var(--gold); font-weight: 700; margin-bottom: 3px; }
#sim-board table { border-collapse: collapse; }
#sim-board td { padding: 1px 6px; white-space: nowrap; }
#sim-board .pts { color: var(--gold); font-weight: 700; text-align: right; }
#sim-board .gems i { font-style: normal; text-shadow: 0 0 4px currentColor; }
#sim-feed { position: absolute; top: calc(112px + var(--safe-t)); right: calc(8px + var(--safe-r)); width: min(340px, 46vw); display: flex;
  flex-direction: column; gap: 4px; pointer-events: none; font-size: 12px; }
#sim-feed div { background: rgba(10, 14, 24, 0.72); border-left: 3px solid; border-radius: 6px; padding: 4px 7px; text-shadow: 0 1px 2px #000; }
#sim-cap { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(58px + var(--safe-b)); background: rgba(10, 14, 24, 0.72);
  border-radius: 10px; padding: 4px 10px; font-size: 12px; pointer-events: none; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
#sim-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--safe-b)); display: flex; gap: 5px; flex-wrap: wrap;
  justify-content: center; max-width: 96vw; }
#sim-bar .btn { padding: 6px 9px; font-size: 12px; background: rgba(16, 20, 32, 0.85); }
#sim-bar .btn.on { background: rgba(214, 184, 120, 0.3); border-color: var(--gold); color: #fff; }
#sim-end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92vw); background: var(--panel-solid);
  border: 1px solid var(--gold); border-radius: 14px; padding: 14px 16px; pointer-events: auto; text-align: center; }
#sim-end h2 { margin: 0 0 8px; font-size: 18px; }
@media (max-aspect-ratio: 1/1) {
  #sim-feed { top: auto; bottom: calc(118px + var(--safe-b)); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); width: auto; }
  #sim-feed div:nth-child(n + 5) { display: none; }
  #sim-cap { bottom: calc(92px + var(--safe-b)); }
}

/* the Relic War's call: a card with the question, then a small button until it can no longer be joined */
#war-call { position: absolute; top: calc(122px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(330px, 86vw); padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; font-size: 12.5px; line-height: 1.45; text-align: center; pointer-events: auto;
  box-shadow: 0 0 18px rgba(255, 200, 90, 0.35); animation: warcall 0.5s ease-out; }
#war-call .wc-title { font: 700 15px Georgia, serif; color: var(--gold); margin-bottom: 4px; }
#war-call .actions-row { justify-content: center; margin-top: 8px; }
#war-call.pill { width: auto; padding: 0; border: none; background: none; box-shadow: none; animation: none; }
#war-call.pill .btn { border-color: var(--gold); color: var(--gold); background: var(--panel); padding: 7px 12px; font-weight: 700; }
@keyframes warcall { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* the war's scoreboard */
table.board { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 8px; }
table.board td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); text-align: center; }
table.board td:nth-child(2) { text-align: left; }
table.board tr.me { background: rgba(214, 184, 120, 0.18); }
#popup .board-scroll { max-height: 42vh; overflow-y: auto; }
#popup h3 { margin: 4px 0; }
#mode-hud .mini { pointer-events: auto; }
#mode-hud .nrows { display: block; }
#mode-hud .nr { display: block; }
/* a narrow screen: the card stays clear of the column of buttons on the right */
@media (max-width: 600px) {
  #war-call { left: calc(10px + var(--safe-l, 0px)); right: calc(58px + var(--safe-r)); width: auto; transform: none; animation: warcall-narrow 0.5s ease-out; }
  #war-call.pill { animation: none; }
}
@keyframes warcall-narrow { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* an NPC is not a fight: no life bar in its frame */
#target.npc .gauge { display: none; }
/* the talk with an NPC on a narrow screen: a sheet from the bottom, as tall as its content (the world, and the
   NPC, stay in view above it) */
@media not all and (min-width: 760px) and (min-height: 480px) {
  #npc.sheet { top: auto; max-height: calc(100vh - 120px - var(--safe-t)); box-shadow: 0 -6px 24px rgba(0,0,0,0.45); }
}

/* your own numbers pop; the ones of fights round you stay small */
.dmg.mine { font-size: 24px; animation: dmgpop 0.28s ease-out; }
.dmg.mine.crit { font-size: 33px; color: #ffcf3a; text-shadow: 0 2px 0 #4a2a00, 0 0 12px rgba(255, 170, 40, 0.9); }
.dmg.other { font-size: 14px; color: #d6d6d6; font-weight: 700; }
/* a skill's numbers in the Skills panel: damage gold, healing green, shield blue, buffs amber */
.row-item small.sknum { display: block; margin-top: 2px; color: #c9d2e3; }
.row-item .txt small.sknum b { display: inline; font-size: inherit; } .sknum .dmgv { color: #ffcf6a; } .sknum .healv { color: #7dff8a; } .sknum .shieldv { color: #9ad0ff; } .sknum .buffv { color: #ffd24a; }
/* a skill: its name rising over you in its colour, its numbers bigger and lit in the same colour (js/combat.js) */
.dmg.skillname { font: italic 700 18px Georgia, serif; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 12px currentColor, 0 0 3px #000; animation: skillpop 0.45s ease-out; }
.dmg.mine.skill { font-size: 29px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 14px currentColor; animation: dmgpop 0.3s ease-out; }
@keyframes skillpop { 0% { transform: translate(-50%, -50%) scale(0.4); } 60% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }
.dmg.player { font-size: 21px; }
@keyframes dmgpop { 0% { transform: translate(-50%, -50%) scale(1.9); } 60% { transform: translate(-50%, -50%) scale(0.92); } 100% { transform: translate(-50%, -50%) scale(1); } }
/* hit: the screen's edges flash red */
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 20, 20, 0.55) 100%); }
#hurt.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { 0% { opacity: var(--k, 0.5); } 100% { opacity: 0; } }

/* what you got rises over your head */
.dmg.loot { font-size: 14px; color: #bfe6ff; font-weight: 700; }
.dmg.loot.gear { color: #ffd48a; font-size: 15px; }
.dmg.loot.quest { color: #ffe08a; font-size: 15px; }
.dmg.loot.up { color: #ffcf3a; font-size: 17px; text-shadow: 0 2px 0 #4a2a00, 0 0 10px rgba(255, 190, 60, 0.9); animation: dmgpop 0.35s ease-out; }
/* a better piece of gear: one tap to wear it */
#upcard { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); width: min(300px, 80vw); padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; text-align: center; font-size: 12.5px; pointer-events: auto;
  box-shadow: 0 0 18px rgba(255, 200, 90, 0.35); animation: warcall 0.4s ease-out; }
#upcard .up-t { font: 700 13px Georgia, serif; color: var(--gold); }
#upcard b { display: block; margin-top: 2px; color: #ffe2a0; }
#upcard small { color: var(--muted); }
#upcard .actions-row { justify-content: center; margin-top: 8px; }
/* a phone held upright: the joystick and the wheel fill the bottom, so the card sits just above them */
@media (max-aspect-ratio: 3/4) { #upcard { bottom: calc(178px + var(--safe-b)); width: min(300px, calc(100vw - 140px)); } }

/* the quest the minimap's arrow is following */
#tracker .q.on { border-left: 2px solid var(--gold); padding-left: 6px; }

/* the gift of the day: a calendar of seven */
#popup .gifts { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0; }
#popup .gift { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); text-align: center; font-size: 10px; line-height: 1.15; }
#popup .gift small { color: var(--muted); font-size: 10px; }
#popup .gift .ic { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
#popup .gift .gold-ic { color: var(--gold); font-size: 24px; background: rgba(214, 184, 120, 0.12); }
#popup .gift.today { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 200, 90, 0.45); background: rgba(214, 184, 120, 0.12); }
#popup .gift.got { opacity: 0.45; }
#popup .gift.got::after { content: '✓'; color: var(--good); font-weight: 800; }
#popup .gift.big span { color: #ffd48a; font-weight: 700; }
@media (max-width: 520px) { #popup .gifts { grid-template-columns: repeat(4, 1fr); } }

/* the combat power: big in the character panel, and rising over your head when it grows */
.power-big { margin: 2px 0 8px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(214, 184, 120, 0.18), rgba(214, 184, 120, 0));
  color: var(--muted); font-size: 12px; }
.power-big b { color: #ffd48a; font: 700 20px Georgia, serif; margin-left: 6px; text-shadow: 0 0 10px rgba(255, 190, 60, 0.4); }
.dmg.power { color: #ffd48a; font: 700 18px Georgia, serif; text-shadow: 0 2px 0 #3a2400, 0 0 10px rgba(255, 190, 60, 0.8); animation: dmgpop 0.4s ease-out; }

/* the prologue of a new Bearer */
#intro { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(8, 10, 22, 0.78), rgba(4, 5, 12, 0.96)); transition: opacity 0.9s; }
#intro.out { opacity: 0; pointer-events: none; }
#intro .intro-box { max-width: 560px; text-align: center; }
#intro p { font: 400 clamp(16px, 2.6vw, 22px)/1.5 Georgia, serif; color: #e8e2d0; margin: 0 0 14px; opacity: 0; animation: introIn 1.4s ease-out forwards;
  text-shadow: 0 2px 8px #000; }
#intro p:last-of-type { color: #ffd48a; font-size: clamp(18px, 3vw, 26px); }
#intro .btn { margin-top: 10px; opacity: 0; animation: introIn 1s ease-out forwards; padding: 10px 28px; font-size: 15px; }
@keyframes introIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* a world event in the tracker */
#tracker .q.event b { color: #ffcf5a; }

/* a tip for a new Bearer: a bubble pointing at its button */
.tip { position: fixed; z-index: 35; max-width: min(260px, 70vw); padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35;
  background: #fff4d6; color: #2a1d08; box-shadow: 0 4px 18px rgba(0,0,0,0.45); animation: tipIn 0.35s ease-out; pointer-events: auto; }
.tip small { display: block; margin-top: 3px; font-size: 10px; color: #8a7350; }
.tip::after { content: ''; position: absolute; left: var(--ax, 50%); width: 12px; height: 12px; background: #fff4d6; transform: translateX(-50%) rotate(45deg); }
.tip.up::after { bottom: -6px; }
.tip.down::after { top: -6px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- a phone lying down (up to 500 px tall): the HUD packs into the corners so the middle stays for
   the world, nothing on top of anything else. Top left: a small status box, the party as a row of mini bars
   under it, the quests below fading out before the joystick. Top: the target to the right of the status,
   small menu buttons, the dungeon or war card under them. Bottom: the chat (four lines) over the flasks. */
@media (orientation: landscape) and (max-height: 500px) {
  #status { top: calc(6px + var(--safe-t)); width: 150px; padding: 4px 6px; border-radius: 8px; }
  #lvl { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a long name and the nation on one line */
  #status .gauge { height: 10px; margin-top: 2px; border-radius: 3px; }
  #status .gauge span { font-size: 8.5px; line-height: 10px; }
  #status .gauge.xp { height: 3px; }
  #gold { font-size: 9.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
  #relicbar { display: none; }
  #effects i { font-size: 9px; width: 13px; height: 13px; line-height: 13px; }
  /* --sbt: where the life box ends (js/ui.js; it grows with the effects and relic rows, which spilled over the party) */
  #party { top: var(--sbt, calc(76px + var(--safe-t))); width: 150px; flex-direction: row; gap: 3px; }
  #party .pm { flex: 1; min-width: 0; padding: 2px 4px; border-radius: 6px; font-size: 9px; line-height: 1.1; }
  #party .pm span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #party .pm small { display: none; }
  #party .pm .gauge { height: 3px; margin-top: 1px; }
  #tracker { top: calc(var(--sbt, calc(76px + var(--safe-t))) + 2px); width: 150px; font-size: 10px; line-height: 1.25; overflow: hidden; padding: 3px 5px;
    max-height: calc(100vh - var(--sbt, calc(76px + var(--safe-t))) - 2px - 122px - var(--safe-b)); } /* down to the joystick's top */
  /* only whole quests go in (js/ui.js fitTracker); one alone too tall for the box fades out at the bottom */
  #tracker.cut { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  #tracker .q b, #tracker .ln { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a name on one line: "Evento: Atirador de Ferro Ancião" took two */
  #hud:has(#party:not(:empty)) #tracker { top: calc(var(--sbt, calc(76px + var(--safe-t))) + 28px); max-height: calc(100vh - var(--sbt, calc(76px + var(--safe-t))) - 28px - 122px - var(--safe-b)); }
  #tracker .q { margin-bottom: 3px; }
  #target { top: calc(6px + var(--safe-t)); left: calc(164px + var(--safe-l)); transform: none; width: 150px; padding: 3px 6px; border-radius: 8px; }
  #tname { font-size: 10px; }
  #target .gauge { height: 8px; margin-top: 2px; }
  #teffects i { font-size: 9px; width: 13px; height: 13px; line-height: 13px; }
  #minimap { width: 82px; height: 82px; top: calc(6px + var(--safe-t)); }
  #clock { top: calc(90px + var(--safe-t)); width: 82px; font-size: 10px; }
  #fps { top: calc(104px + var(--safe-t)); width: 82px; }
  #topbtns { top: calc(6px + var(--safe-t)); right: calc(96px + var(--safe-r)); gap: 4px; }
  #topbtns .corner { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
  #mode-hud { top: calc(42px + var(--safe-t)); left: auto; right: calc(96px + var(--safe-r)); transform: none; min-width: 0; max-width: min(240px, 34vw);
    padding: 4px 8px; font-size: 10.5px; line-height: 1.3; }
  #war-call { top: calc(50px + var(--safe-t)); width: min(300px, 48vw); padding: 7px 10px; font-size: 11px; }
  #war-call.pill { top: calc(42px + var(--safe-t)); left: calc(320px + var(--safe-l)); transform: none; animation: none; }
  #war-call.pill .btn { padding: 4px 9px; font-size: 11px; }
  #area-name { top: 30%; font-size: 15px; }
  #stick { width: 112px; height: 112px; bottom: calc(10px + var(--safe-b)); }
  #knob { left: 32px; top: 32px; }
  #potions { left: calc(136px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); }
  #log { left: calc(136px + var(--safe-l)); bottom: calc(62px + var(--safe-b)); width: min(240px, 32vw); font-size: 10px; line-height: 1.3; }
  #log div:nth-last-child(n+5) { display: none; }
  /* one row a message, cut at its end (wrapped lines rose over the quests, and a box cut at the top showed
     messages from their middle) */
  #log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #actions { transform: scale(0.68); }
  #btn-interact { bottom: calc(12px + var(--safe-b)); right: auto; left: calc(240px + var(--safe-l)); padding: 7px 11px; font-size: 12px;
    max-width: calc(100vw - 500px - var(--safe-l) - var(--safe-r)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #btn-interact { padding: 4px 11px 5px; line-height: 1.15; } /* the name on a line of its own: it was cut ("Falar com Arquivis...") */
  #btn-interact small { display: block; font-size: 9.5px; font-weight: 600; opacity: 0.8; }
  #upcard { top: calc(44px + var(--safe-t)); bottom: auto; left: calc(164px + var(--safe-l)); transform: none; width: min(200px, 30vw); padding: 6px 9px; font-size: 11px;
    animation-name: warcall-narrow; } /* the centred card's slide-in moved it half its width left, over the life box */
  /* a battle's or a dungeon's card takes the quests' place on the left (it sat over the hotbar wheel) */
  #mode-hud { top: calc(var(--sbt, calc(76px + var(--safe-t))) + 2px); left: calc(8px + var(--safe-l)); right: auto; transform: none; width: 196px; max-width: 196px;
    max-height: calc(100vh - var(--sbt, calc(76px + var(--safe-t))) - 2px - 128px - var(--safe-b)); overflow: hidden; font-size: 9.5px; line-height: 1.25; text-align: left; }
  #mode-hud .nrows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; margin: 1px 0; }
  #mode-hud .nr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mode-hud .mini { padding: 1px 6px; font-size: 9.5px; }
  #hud:has(#mode-hud:not(.hidden)) #tracker { display: none; }
  /* your party in a dungeon (Entrar com o grupo): its frames stay in their row and the board goes under them */
  #hud:has(#party:not(:empty)) #mode-hud { top: calc(var(--sbt, calc(76px + var(--safe-t))) + 28px); max-height: calc(100vh - var(--sbt, calc(76px + var(--safe-t))) - 28px - 128px - var(--safe-b)); }
  /* the column at the right edge, tighter, clear of the minimap; the clock over the minimap's foot */
  .side, #btn-lume, #btn-mount, #btn-auto { width: 36px; height: 36px; right: calc(8px + var(--safe-r)); }
  #btn-auto { bottom: calc(8px + var(--safe-b)); }
  #btn-mount { bottom: calc(48px + var(--safe-b)); line-height: 32px; }
  #btn-walk { bottom: calc(88px + var(--safe-b)); }
  #btn-jump { bottom: calc(128px + var(--safe-b)); }
  #btn-lume { bottom: calc(168px + var(--safe-b)); }
  #clock { top: calc(72px + var(--safe-t)); font-size: 9.5px; }
  #fps { top: calc(90px + var(--safe-t)); right: calc(50px + var(--safe-r)); }
  /* the messages between the quests and the wheel (a long one ran behind the wheel's buttons) */
  #toast { top: calc(24% + 34px); left: calc(50% - 34px); width: min(270px, 44vw); }
  #toast div { font-size: 15px; margin: 3px 4px; }
  /* in the free space up top, between the life box and the minimap, under the buttons (across the middle it
     covered the party's frames, then the wheel's PAG and the top of the wheel) */
  #banner { top: calc(48px + var(--safe-t)); left: calc(162px + var(--safe-l)); right: calc(96px + var(--safe-r)); } /* (clear of the target's frame with its effects row) */
  #banner .b { max-width: 100%; padding: 4px 14px; font-size: 19px; letter-spacing: 1px; }
  #banner .b small { font-size: 11px; }
  .lbl { font-size: 10px; }
  /* the talk with an NPC: a panel on the right, the height of the screen (as a sheet from the bottom its
     buttons sat below the fold); the world and the NPC stay in view on the left */
  #npc.sheet { top: calc(6px + var(--safe-t)); bottom: calc(6px + var(--safe-b)); left: auto; right: calc(6px + var(--safe-r));
    width: min(380px, 56vw); max-height: none; box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45); }
  #npc .npc-head { padding: 5px 8px; }
  #npc-body { padding: 7px 8px; font-size: 12.5px; }
  #npc-body .dialog-line { padding: 6px 8px; margin-bottom: 6px; }
  /* the shop, the forge, the refine list: rows half as tall (four items filled the panel), the small line
     wrapping instead of cut ("falha s..."), the bag's squares smaller so a row holds seven */
  #npc-body h3 { font-size: 12px; margin-bottom: 4px; }
  #npc-body .row-item { padding: 4px 3px; gap: 7px; }
  #npc-body .row-item .ic { width: 34px !important; height: 34px !important; font-size: 17px !important; border-radius: 6px; flex: none; }
  #npc-body .row-item .txt b { font-size: 12.5px; }
  #npc-body .row-item .txt small { font-size: 10.5px; line-height: 1.25; white-space: normal; }
  #npc-body .row-item .btn { padding: 5px 9px; font-size: 12px; }
  #npc-body .actions-row .btn { padding: 6px 10px; font-size: 12px; }
  #npc-body .grid { grid-template-columns: repeat(auto-fill, 40px); gap: 4px; }
  #npc-body .slot { width: 40px; height: 40px; }
  #npc-body .slot .ic { width: 38px !important; height: 38px !important; font-size: 19px !important; }
  /* with an NPC's panel open the messages and big titles center on the free part on the left (they were
     written over the shop's rows), the chat narrows so its lines are not cut under the panel */
  body:has(#npc:not(.hidden):not(.wide)) #toast { left: calc((100vw - min(380px, 56vw) - 6px) / 2); width: calc(100vw - min(380px, 56vw) - 24px); }
  body:has(#npc:not(.hidden):not(.wide)) #toast div { font-size: 14px; }
  body:has(#npc:not(.hidden):not(.wide)) #banner { left: calc(8px + var(--safe-l)); top: max(26%, calc(var(--sbt, calc(76px + var(--safe-t))) + 28px)); right: calc(min(380px, 56vw) + 12px); }
  body:has(#npc:not(.hidden):not(.wide)) #banner .b { font-size: 18px; padding: 4px 12px; letter-spacing: 1px; }
  body:has(#npc:not(.hidden):not(.wide)) #area-name { left: calc((100vw - min(380px, 56vw) - 6px) / 2); } /* the place's name beside the talk, not behind it */
  /* the herald's call to the war, in the free side while you talk (it hid behind the window) */
  body:has(#npc:not(.hidden):not(.wide)) #war-call { top: calc(var(--sbt, calc(76px + var(--safe-t))) + 28px); left: calc(8px + var(--safe-l)); transform: none; animation: none;
    width: calc(100vw - min(380px, 56vw) - 26px - var(--safe-l)); }
  body:has(#npc:not(.hidden):not(.wide)) #war-call.pill { display: none; } /* the timer comes back with the game (it sat under the titles) */
  .lume-say { max-width: 150px; padding: 3px 7px; font-size: 10.5px; line-height: 1.3; border-radius: 8px; } /* the Lume's line: it covered the names round you (it is in the chat too) */
  .tip { max-width: 210px; padding: 6px 9px; font-size: 11.5px; line-height: 1.3; border-radius: 8px; } /* a beginner's tip covered a quarter of the screen */
  .tip small { font-size: 9px; margin-top: 1px; }
  /* a battle's or a dungeon's action (leave the dungeon, take a relic): beside the flasks like the talk button,
     not a big button in the middle of the screen; over the talk button when both show */
  #btn-mode { left: calc(240px + var(--safe-l)); transform: none; bottom: calc(12px + var(--safe-b)); padding: 7px 12px; font-size: 12px; border-radius: 10px; }
  #hud:has(#btn-interact:not(.hidden)) #btn-mode { bottom: calc(52px + var(--safe-b)); }
  /* a window with a long list (the five nations, the war's board): the list scrolls inside and the buttons
     under it stay on the screen ("Ainda não" sat below the bottom edge) */
  #popup { display: flex; flex-direction: column; max-height: calc(100vh - 16px); }
  #popup > * { flex-shrink: 0; }
  #popup > .nations, #popup > .board-scroll { flex: 1 1 auto; min-height: 70px; max-height: none; overflow-y: auto; }
  /* the war's board: rows tight enough for the Close button to stay on the screen */
  #popup table.board { font-size: 11px; margin: 2px 0 4px; }
  #popup table.board td { padding: 1px 4px; }
  #popup h3 { margin: 2px 0; font-size: 12px; }
  #popup > .board-scroll { min-height: 50px; }
  #popup p { margin: 5px 0; font-size: 12px; line-height: 1.35; } /* the war's result: its buttons were cut at the bottom */
  #popup { padding: 8px 12px; }
  /* the war to watch: the board small in its corner, the news two lines under the minimap, the buttons one row
     along the bottom that slides under a finger (three rows of them covered the middle of the battle) */
  #sim-board { font-size: 9.5px; padding: 3px 6px; border-radius: 8px; }
  #sim-board td { padding: 0 4px; }
  #sim-feed { top: calc(96px + var(--safe-t)); bottom: auto; left: auto; right: calc(8px + var(--safe-r)); width: min(240px, 36vw); font-size: 10px; gap: 3px; }
  #sim-feed div { padding: 2px 6px; }
  #sim-feed div:nth-child(n + 3) { display: none; }
  #sim-cap { bottom: calc(46px + var(--safe-b)); font-size: 10px; padding: 2px 8px; }
  #sim-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r));
    transform: none; max-width: none; scrollbar-width: none; }
  #sim-bar::-webkit-scrollbar { display: none; }
  #sim-bar .btn { padding: 5px 8px; font-size: 11px; flex: none; }
  body.sim #target { left: auto; right: calc(96px + var(--safe-r)); } /* the Bearer followed: beside the minimap, not over the board */
  /* the menu open over the whole screen: the messages slip along its bottom edge, small (they were written over
     the character sheet) */
  /* the menu's nine tabs side by side in the width (80 px each slid "Mapa" and "Sistema" under the ✕) */
  #panel .tabs { gap: 1px; padding: 5px; }
  #panel .tabs button:not(.close) { flex: 1 1 auto; min-width: 0; padding: 7px 4px; font-size: 12px; white-space: nowrap; }
  /* (and a shop or the storage, the whole screen too: "Vestiu 5 peças novas" crossed the shop's list) */
  body:has(#panel:not(.hidden)) #toast, body:has(#npc.wide:not(.hidden)) #toast { top: auto !important; bottom: calc(10px + var(--safe-b)); left: 50%; width: min(420px, 70vw); }
  body:has(#panel:not(.hidden)) #toast div, body:has(#npc.wide:not(.hidden)) #toast div { font-size: 12px; margin: 1px 4px; background: rgba(10, 14, 24, 0.85); border-radius: 8px; padding: 2px 8px; }
  body:has(#npc:not(.hidden)) #tracker { display: none; } /* the talk lists the quests; the messages land where it was */
  body:has(#npc:not(.hidden)) #log { width: calc(100vw - min(380px, 56vw) - 148px - var(--safe-l) - var(--safe-r)); }
  #npc.sheet.wide { left: calc(6px + var(--safe-l)); width: auto; }
  #npc.wide .cols { gap: 10px; flex-wrap: nowrap; }
  #npc.wide .cols > * { flex: 1 1 0; }
}

/* a phone lying down (short screen): the creation screen packs tighter so all of it fits without scrolling */
@media (orientation: landscape) and (max-height: 480px) {
  #select { padding: 6px 12px; gap: 6px; }
  #select .brand { font-size: 22px; letter-spacing: 6px; }
  #select .brand span { margin-top: 3px; font-size: 10px; }
  #classes { gap: 6px; }
  .cls { padding: 6px 4px; }
  .cls b { font-size: 12.5px; }
  .cls small { font-size: 10px; line-height: 1.2; display: block; }
  .new-char { gap: 6px; padding: 8px; }
  .new-char .news-btn { padding: 4px 8px; font-size: 11.5px; }
  #class-desc { font-size: 11px; line-height: 1.3; max-height: 4.2em; overflow: hidden; }
  .gender { margin: 0; }
  .gender button { padding: 6px; }
  #charname { padding: 7px 10px; }
  .new-char button.primary, #continue { padding: 8px 14px; }
  /* the column on the right ran 20 px past the bottom ("Criar personagem" cut in half): the continue button
     and the watch button on one line each, the class text without its reserved height */
  #continue { padding: 7px 10px; font-size: 13px; line-height: 1.2; }
  #watch-btn { font-size: 11.5px; padding: 4px 8px; }
  #watch-btn .long { display: none; }
  #watch-btn .short { display: inline; }
  /* the class's text kept its place (it was squeezed to nothing when a class was picked) */
  .new-char { gap: 5px; overflow-y: auto; }
  #class-desc { min-height: 0; flex-shrink: 0; max-height: 5.3em; overflow: hidden; }
  #class-desc .cd-head { display: none; } /* the name and the style are on the class's card already: the line goes to what it does */
  .gender button { padding: 4px; }
  #charname { padding: 5px 10px; }
  .new-char button.primary { padding: 7px 14px; }
  #select .brand { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } /* the moon behind it: white on white */
}

/* online: the chat button with how many are online, and the chat bar (at the top: a phone's keyboard covers the bottom) */
#btn-chat { position: relative; }
#online-n { position: absolute; right: -4px; top: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #2fb36a; color: #fff; font: 700 9px/15px system-ui, sans-serif; font-style: normal; pointer-events: none; }
#online-n:empty, #online-n.off { display: none; }
#chatbar { position: absolute; top: calc(48px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(520px, 72vw); display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; z-index: 40; }
#chatbar.hidden { display: none; }
#chatbar { pointer-events: auto; } /* (the HUD lets touches through to the game: the history did not scroll, a tap on a name or the field went to the world) */
#chat-in { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(8, 12, 20, 0.85); color: #e5e9f1; font-size: 14px; outline: none; }
#chatbar .btn { padding: 6px 10px; }

/* the chat window's history (players' words kept apart from the battle log), new-message count, the peek */
.chat-row { display: flex; gap: 6px; }
#chat-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; font-size: 12px; line-height: 1.35; color: #e5e9f1; overscroll-behavior: contain; }
#chat-list:empty::before { content: 'Ninguém falou ainda. Diga oi!'; color: #8a9ab0; }
#chat-list small { color: #7d8aa0; font-size: 10px; }
#chat-list .sys { color: #8a9ab0; font-style: italic; font-size: 11px; }
#chat-list [data-pid] b { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,0.35); }
#chat-unread { position: absolute; left: -5px; top: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #e5484d; color: #fff; font: 700 9px/15px system-ui, sans-serif; pointer-events: none; }
#chat-unread:empty { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #chat-list { max-height: 36vh; font-size: 11px; }
}

/* the chat window's people list: friends and who is online; the minimap opens the world map */
#minimap { cursor: pointer; pointer-events: auto; } /* (the HUD lets touches through to the game: the minimap's tap never arrived) */
#chat-people { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 2px 4px; border-bottom: 1px solid var(--line); overscroll-behavior: contain; }
#chat-people.hidden { display: none; }
#chat-people .pp { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#chat-people .pp small { color: #8a9ab0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-people .pp span { display: flex; gap: 4px; }
#chat-people .pp .btn { padding: 3px 8px; font-size: 11px; }
#chat-people .pp-h { color: #ffd48a; font-size: 11px; font-weight: 700; margin-top: 2px; }
#chat-people .pp-e { color: #7d8aa0; font-size: 11px; font-style: italic; }
#chat-friends { white-space: nowrap; }
@media (orientation: landscape) and (max-height: 500px) {
  #chat-people { max-height: 30vh; }
  #chat-people .pp { font-size: 11px; }
  .chat-row .btn { padding: 5px 8px; font-size: 11px; }
}

/* the last six chat lines, always on screen and faint, under the top buttons, clear of the wheel and the
   minimap; taps go through to the game; a new line lights the box up for a few seconds */
#chat-feed { position: absolute; top: calc(54px + var(--safe-t)); right: calc(112px + var(--safe-r)); width: min(320px, 40vw); display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; color: #e5e9f1; opacity: 0.42; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; transition: opacity 0.8s; z-index: 5; }
#chat-feed.fresh { opacity: 0.9; }
#chat-feed.hidden { display: none; }
#chat-feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-feed b { font-weight: 600; }
@media (orientation: landscape) and (max-height: 500px) {
  #chat-feed { top: calc(40px + var(--safe-t)); right: calc(96px + var(--safe-r)); width: min(230px, 36vw); font-size: 9.5px; line-height: 1.22; }
}

/* the account window (js/account.js): near the top, a phone's keyboard covers the bottom */
#acct { position: fixed; inset: 0; background: rgba(4, 7, 12, 0.6); z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding-top: calc(10px + var(--safe-t)); }
#acct .acct-box { width: min(420px, 92vw); max-height: 92vh; overflow-y: auto; background: var(--panel, #141b28); border: 1px solid var(--line, #2a3446); border-radius: 12px; padding: 12px 14px; color: #e5e9f1; display: flex; flex-direction: column; gap: 7px; }
#acct h3 { margin: 0; color: #ffd48a; font-size: 16px; }
#acct .acct-intro { margin: 0; font-size: 13px; line-height: 1.4; color: #cfd6e4; }
#acct input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line, #2a3446); background: rgba(8, 12, 20, 0.9); color: #e5e9f1; font-size: 15px; outline: none; }
#acct .acct-err { margin: 0; min-height: 16px; color: #ff9a8a; font-size: 12px; }
#acct .acct-row { display: flex; gap: 6px; flex-wrap: wrap; }
#acct .acct-col { flex-direction: column; }
#acct .acct-note { margin: 0; font-size: 11px; color: #7d8aa0; }
@media (orientation: landscape) and (max-height: 500px) {
  #acct { padding-top: 4px; }
  #acct .acct-box { gap: 5px; padding: 8px 12px; width: min(460px, 80vw); }
  #acct input { padding: 6px 9px; font-size: 14px; }
  #acct .acct-intro { font-size: 12px; }
}

/* the group of players (js/net.js): their frames under the companions (blue, a tap opens theirs), the call
   card at the top, the chat's world/group switch */
#party .pm.online { border-color: #3d6fa8; pointer-events: auto; cursor: pointer; }
#party .pm.online span { color: #bfe0ff; }
#party .pm.online .gauge div { background: linear-gradient(#5fd17a, #2f9a4c); }
#party .pm.far { opacity: 0.55; }
#pinvite { position: fixed; z-index: 45; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(380px, 70vw); background: var(--panel, #141b28); border: 1px solid #3d6fa8; border-radius: 10px; padding: 8px 10px; color: #e5e9f1; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
#pinvite.hidden { display: none; }
#pinvite small { color: #a8b4c4; }
#pinvite .pi-row { display: flex; gap: 6px; margin-top: 6px; }
#pinvite .pi-row .btn { flex: 1; }
#chat-chan { white-space: nowrap; }
#chat-chan.hidden { display: none; }
#chat-people .pp-h .btn { padding: 2px 7px; font-size: 10px; margin-left: 6px; }
@media (orientation: landscape) and (max-height: 500px) {
  #party { flex-wrap: wrap; }
  #party .pm { flex: 1 1 30%; }
  #pinvite { top: calc(44px + var(--safe-t)); width: min(340px, 56vw); font-size: 12px; padding: 6px 8px; }
  #pinvite .pi-row .btn { padding: 5px 6px; font-size: 12px; }
}

/* links that look like buttons (System: Termos de Uso, Privacidade, Suporte) */
a.btn { text-decoration: none; display: inline-flex; align-items: center; color: var(--text, #e5e9f1); }