* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d1420; font-family: 'Trebuchet MS', Verdana, sans-serif; color: #2a3346; user-select: none; }
#game { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M2 2 L2 19 L7 14 L11 22 L14 21 L10 13 L17 13 Z' fill='%23fff' stroke='%23222' stroke-width='1.5'/></svg>") 2 2, auto; }
#view.attack { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><path d='M3 3 L16 16 M13 19 L19 13 M17 17 L23 23' stroke='%23222' stroke-width='5' stroke-linecap='round'/><path d='M3 3 L16 16 M13 19 L19 13 M17 17 L23 23' stroke='%23ffd0a0' stroke-width='2.5' stroke-linecap='round'/></svg>") 3 3, crosshair; }
#view.talk { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='24'><path d='M2 3 H24 V16 H10 L5 22 V16 H2 Z' fill='%23fff' stroke='%23222' stroke-width='1.5'/><circle cx='8' cy='9.5' r='1.5' fill='%23222'/><circle cx='13' cy='9.5' r='1.5' fill='%23222'/><circle cx='18' cy='9.5' r='1.5' fill='%23222'/></svg>") 2 2, pointer; }
#tilt { position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(1.6px); -webkit-backdrop-filter: blur(1.6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%); }
#tilt.off { display: none; }
#grade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(10,20,30,0.45) 100%); }
.hidden { display: none !important; }

/* ---------- Painéis ---------- */
.panel { position: absolute; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(226,234,248,0.92)); border: 1px solid #8ea4d2; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 #fff; }
#charPanel { left: 12px; top: 12px; display: flex; gap: 10px; padding: 8px 12px 8px 8px; min-width: 300px; }
#portrait { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cfe4ff, #7a9ad0); border: 2px solid #fff; box-shadow: 0 0 0 1px #6f8bc4; image-rendering: pixelated; }
.charInfo { flex: 1; }
.charName { font-weight: bold; font-size: 14px; color: #243058; white-space: nowrap; }
.charName .job { font-size: 10px; font-weight: normal; color: #fff; background: #5a78c0; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.charLv { font-size: 11px; color: #5a6480; margin-bottom: 3px; }
.bar { position: relative; height: 14px; background: #2b3348; border-radius: 7px; overflow: hidden; margin-bottom: 3px; border: 1px solid #1c2233; }
.bar .fill { height: 100%; transition: width 0.15s; }
.bar.hp .fill { background: linear-gradient(180deg, #7dff8a, #2fb84a 60%, #1f8a36); }
.bar.hp.low .fill { background: linear-gradient(180deg, #ff9a8a, #e0402c 60%, #a82418); }
.bar.sp .fill { background: linear-gradient(180deg, #9ad0ff, #3a7ae0 60%, #2456a8); }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; font-weight: bold; }
.coins { font-size: 12px; color: #6a5010; font-weight: bold; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.coin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c0, #f2c230 50%, #a07a10); }

#mapPanel { right: 12px; top: 12px; padding: 6px; }
.mapTitle { font-size: 12px; font-weight: bold; color: #243058; text-align: center; margin-bottom: 4px; }
.mapTitle span { font-weight: normal; color: #6a7490; font-size: 10px; }
#minimap { display: block; border-radius: 6px; border: 1px solid #6f8bc4; cursor: pointer; }

#questTracker { right: 12px; top: 200px; width: 214px; padding: 8px 10px; font-size: 11px; }
#questTracker h4 { font-size: 12px; color: #b05a10; margin-bottom: 3px; }
#questTracker .qprog { color: #243058; font-weight: bold; margin-top: 3px; }
#questTracker .qdone { color: #1f8a36; font-weight: bold; margin-top: 3px; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1; } }

#sideMenu { position: absolute; right: 12px; top: 320px; display: flex; flex-direction: column; gap: 6px; }
.menuBtn { width: 76px; padding: 5px 0 4px; border-radius: 10px; border: 1px solid #6f8bc4; background: linear-gradient(180deg, #ffffff, #d4e0f6); color: #243058; font: bold 10px 'Trebuchet MS', sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; }
.menuBtn span { font-size: 18px; line-height: 20px; }
.menuBtn:hover { background: linear-gradient(180deg, #fff, #bcd0f4); }

#chatBox { left: 12px; bottom: 34px; width: 380px; height: 150px; padding: 6px 8px; background: rgba(10,18,34,0.55); border-color: rgba(140,170,230,0.5); }
#log { height: 100%; overflow-y: auto; font-size: 12px; line-height: 16px; color: #e8eefc; text-shadow: 0 1px 1px #000; scrollbar-width: thin; }
#log div { padding: 1px 0; }
#log .sys { color: #9fd0ff; } #log .item { color: #d8f0a0; } #log .bad { color: #ff9a8a; }
#log .lvl { color: #ffe45c; font-weight: bold; } #log .quest { color: #ffc27a; } #log .card { color: #ff9ae8; font-weight: bold; }
#log .boss { color: #ff6a5a; font-weight: bold; } #log .npc { color: #b8f0ff; }

#actionBar { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
#hotbar { display: flex; gap: 6px; padding: 6px; background: rgba(10,18,34,0.55); border-radius: 12px; border: 1px solid rgba(140,170,230,0.5); }
.slot { position: relative; width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(180deg, #3a4a70, #1e2840); border: 2px solid #8ea4d2; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 8px rgba(0,0,0,0.5); }
.slot:hover { border-color: #fff; }
.slot img { width: 38px; height: 38px; image-rendering: pixelated; }
.slot .sk { font-size: 26px; filter: drop-shadow(0 2px 2px #000); }
.slot .key { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 0 0 3px #000; }
.slot .qty { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: bold; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.slot .sp { position: absolute; right: 3px; top: 1px; font-size: 9px; color: #9ad0ff; text-shadow: 0 0 3px #000; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); }
.slot.empty { opacity: 0.45; }
.roundBtn { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #8ea4d2; background: linear-gradient(180deg, #fff, #c8d8f4); cursor: pointer; font-size: 22px; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.roundBtn.big { width: 64px; height: 64px; font: bold 15px 'Trebuchet MS', sans-serif; color: #243058; }
.roundBtn.on { background: linear-gradient(180deg, #ffe89a, #f2a820); color: #5a2e00; border-color: #fff; animation: glow 1s infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 6px #ffcf4a; } to { box-shadow: 0 0 20px #ffcf4a; } }

#expBar { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: rgba(10,16,30,0.85); border-top: 1px solid #5a6a90; }
#expBar .fill { height: 100%; background: linear-gradient(180deg, #ffe89a, #f2b020 60%, #b87a10); transition: width 0.3s; }
#expBar span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 17px; color: #fff; font-weight: bold; text-shadow: 0 1px 2px #000; }

/* ---------- Janelas ---------- */
.window { position: absolute; min-width: 260px; background: linear-gradient(180deg, #fafcff, #e4ecf8); border: 1px solid #6f8bc4; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,0.45); z-index: 20; }
.winHead { background: linear-gradient(180deg, #7f9fe0, #4a6bb5); color: #fff; font-weight: bold; font-size: 13px; padding: 6px 10px; border-radius: 9px 9px 0 0; cursor: move; text-shadow: 0 1px 1px rgba(0,0,0,0.4); display: flex; justify-content: space-between; align-items: center; }
.winHead .close { background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.5); color: #fff; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 16px; }
.winHead .close:hover { background: #e0402c; }
.winBody { padding: 10px 12px; font-size: 12px; }

#winStatus { width: 470px; }
.statGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.statRow { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,0.7); margin-bottom: 3px; border: 1px solid #d0dcf0; }
.statRow b { color: #243058; width: 32px; }
.statRow .v { font-weight: bold; min-width: 44px; text-align: right; }
.statRow .v i { color: #1f8a36; font-style: normal; font-size: 10px; }
.statRow .cost { font-size: 9px; color: #7a84a0; width: 20px; text-align: right; }
.plus { width: 20px; height: 20px; border-radius: 5px; border: 1px solid #4a6bb5; background: linear-gradient(180deg, #9ab8f0, #4a6bb5); color: #fff; font-weight: bold; cursor: pointer; }
.plus:disabled { opacity: 0.3; cursor: default; }
.pts { margin-top: 6px; text-align: center; font-weight: bold; color: #b05a10; }
.derived .statRow b { width: auto; }

.invGrid { display: grid; grid-template-columns: repeat(6, 48px); gap: 5px; min-height: 110px; }
.invCell { position: relative; width: 48px; height: 48px; border-radius: 8px; background: linear-gradient(180deg, #fff, #d8e2f4); border: 1px solid #8ea4d2; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.invCell:hover { border-color: #f2a820; box-shadow: 0 0 6px #f2c230; }
.invCell img { width: 36px; height: 36px; image-rendering: pixelated; }
.invCell .qty { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: bold; color: #243058; text-shadow: 0 0 2px #fff; }
.invCell.card { background: linear-gradient(180deg, #fff4fb, #f4d0ec); }
.invFoot { margin-top: 8px; display: flex; justify-content: space-between; color: #6a5010; font-weight: bold; }
.hint { font-size: 10px; color: #7a84a0; margin-top: 6px; }

.album { display: grid; grid-template-columns: repeat(4, 110px); gap: 8px; }
.cardBox { border-radius: 8px; padding: 6px; text-align: center; background: linear-gradient(180deg, #fffaf0, #f0e2c0); border: 2px solid #b08a50; position: relative; }
.cardBox img { width: 64px; height: 64px; background: radial-gradient(circle, #d8ecff, #9ac0e8); border-radius: 6px; border: 1px solid #b08a50; }
.cardBox .cn { font-weight: bold; font-size: 11px; color: #5a3a10; }
.cardBox .cb { font-size: 10px; color: #1f6a36; min-height: 26px; }
.cardBox.locked { filter: grayscale(1); opacity: 0.55; }
.cardBox.has { border-color: #f2a820; box-shadow: 0 0 10px #f2c230; }
.cardBox button { margin-top: 3px; }
.albumSum { margin-top: 10px; padding: 6px; background: rgba(255,255,255,0.7); border-radius: 6px; border: 1px solid #d0dcf0; }

.btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #4a6bb5; background: linear-gradient(180deg, #9ab8f0, #4a6bb5); color: #fff; font: bold 11px 'Trebuchet MS', sans-serif; cursor: pointer; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.btn.gold { background: linear-gradient(180deg, #ffe89a, #d89a20); border-color: #a07010; color: #4a2800; }
.btn.red { background: linear-gradient(180deg, #ff9a8a, #c8322a); border-color: #8a2018; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { flex: 1; padding: 5px; border-radius: 6px; border: 1px solid #8ea4d2; background: #e4ecf8; cursor: pointer; font-weight: bold; color: #4a5a80; }
.tab.on { background: linear-gradient(180deg, #9ab8f0, #4a6bb5); color: #fff; }
.shopRow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.7); border: 1px solid #d0dcf0; margin-bottom: 4px; width: 360px; }
.shopRow img { width: 30px; height: 30px; image-rendering: pixelated; }
.shopRow .nm { flex: 1; } .shopRow .nm b { display: block; color: #243058; } .shopRow .nm small { color: #7a84a0; }
.shopRow .pr { font-weight: bold; color: #6a5010; min-width: 52px; text-align: right; }

.dialog { left: 50%; bottom: 210px; transform: translateX(-50%); width: 460px; }
.dlgText { font-size: 13px; line-height: 19px; color: #243046; min-height: 50px; white-space: pre-line; }
.dlgOpts { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.dlgOpts button { text-align: left; padding: 7px 12px; border-radius: 7px; border: 1px solid #8ea4d2; background: linear-gradient(180deg, #fff, #dde7f7); cursor: pointer; font: 12px 'Trebuchet MS', sans-serif; color: #243058; }
.dlgOpts button:hover { background: linear-gradient(180deg, #fff6d8, #ffe08a); border-color: #d89a20; }

#banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); font: bold 34px 'Trebuchet MS', sans-serif; color: #fff; text-shadow: 0 0 12px #4a6bb5, 0 3px 0 #243058, 0 0 3px #000; pointer-events: none; opacity: 0; transition: opacity 0.4s; white-space: nowrap; letter-spacing: 1px; }
#banner.show { opacity: 1; }
#banner.danger { text-shadow: 0 0 14px #ff3a2a, 0 3px 0 #5a1010, 0 0 3px #000; }

#tooltip { position: absolute; z-index: 50; max-width: 240px; padding: 6px 9px; background: rgba(16,24,44,0.94); color: #e8eefc; border: 1px solid #8ea4d2; border-radius: 7px; font-size: 11px; line-height: 15px; pointer-events: none; }
#tooltip b { color: #ffe08a; display: block; font-size: 12px; }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 40; }
#death { background: rgba(20,0,0,0.45); }
.deathBox { text-align: center; padding: 26px 34px; background: linear-gradient(180deg, #fafcff, #e4ecf8); border-radius: 14px; border: 1px solid #6f8bc4; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.deathBox h2 { color: #a82418; margin-bottom: 8px; }
.deathBox p { margin-bottom: 16px; color: #4a5470; }
.bigBtn { padding: 10px 26px; font: bold 15px 'Trebuchet MS', sans-serif; border-radius: 10px; border: 1px solid #4a6bb5; background: linear-gradient(180deg, #9ab8f0, #4a6bb5); color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
.bigBtn:hover { filter: brightness(1.1); }
.bigBtn.alt { background: linear-gradient(180deg, #ffe89a, #d89a20); border-color: #a07010; color: #4a2800; text-shadow: none; }

#title { background: radial-gradient(ellipse at center, rgba(40,70,120,0.55), rgba(5,10,25,0.9)); }
.titleBox { text-align: center; color: #fff; }
.logo { font: 900 72px 'Trebuchet MS', sans-serif; letter-spacing: 6px; color: #fff; text-shadow: 0 0 20px #7fb0ff, 0 5px 0 #2a4a8a, 0 8px 18px rgba(0,0,0,0.6); }
.logo span { color: #ffcf4a; text-shadow: 0 0 20px #ffb030, 0 5px 0 #8a4a00, 0 8px 18px rgba(0,0,0,0.6); }
.subtitle { font-size: 18px; letter-spacing: 3px; color: #cfe0ff; margin-bottom: 26px; font-style: italic; }
#loadingMsg { font-size: 16px; color: #cfe0ff; animation: pulse 0.8s infinite alternate; }
#titleForm label { display: block; font-size: 12px; color: #cfe0ff; margin-bottom: 4px; }
#nameInput { width: 260px; padding: 8px 12px; font: bold 16px 'Trebuchet MS', sans-serif; text-align: center; border-radius: 8px; border: 2px solid #8ea4d2; background: rgba(255,255,255,0.95); color: #243058; outline: none; user-select: text; }
.titleBtns { display: flex; gap: 10px; justify-content: center; margin: 16px 0 22px; }
.controls { display: inline-block; text-align: left; font-size: 12px; line-height: 21px; color: #dbe6ff; background: rgba(0,0,0,0.3); padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(140,170,230,0.4); }
kbd { display: inline-block; padding: 0 5px; border-radius: 4px; background: #eef3ff; color: #243058; font: bold 10px Verdana, sans-serif; border-bottom: 2px solid #8ea4d2; line-height: 15px; }

.optRow { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 6px 0; border-bottom: 1px solid #d0dcf0; }

/* ---------- Classes e habilidades ---------- */
#classPick { display: grid; grid-template-columns: repeat(6, 128px); gap: 8px; margin: 4px auto 0; justify-content: center; }
.classCard { background: rgba(10,18,40,0.6); border: 2px solid rgba(140,170,230,0.35); border-radius: 12px; padding: 6px 6px 8px; cursor: pointer; transition: transform 0.12s, border-color 0.12s; display: flex; flex-direction: column; align-items: center; }
.classCard:hover { transform: translateY(-3px); border-color: var(--cc); }
.classCard.on { border-color: var(--cc); box-shadow: 0 0 16px var(--cc), inset 0 0 20px rgba(255,255,255,0.08); background: rgba(30,40,70,0.75); }
.classCard .classImg { width: 90px; height: 100px; image-rendering: pixelated; background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.18), rgba(0,0,0,0) 65%); }
.classCard b { display: block; color: #fff; font-size: 13px; text-shadow: 0 0 6px var(--cc); }
.classCard small { display: block; color: #bcd0f0; font-size: 10px; line-height: 13px; margin-top: 2px; }
.slot .lock { display: none; position: absolute; inset: 0; background: rgba(10,10,20,0.72); color: #ffd0a0; font-size: 11px; font-weight: bold; align-items: center; justify-content: center; }
.slot.locked .lock { display: flex; }
.slot.skill.kind-cc { border-color: #e8c030; } .slot.skill.kind-def { border-color: #5ad0a0; }
.slot.queued { box-shadow: 0 0 10px #fff, inset 0 0 8px #fff; }
.passiveIcon { display: inline-block; font-size: 13px; cursor: help; vertical-align: 1px; }
#buffBar { position: absolute; left: 14px; top: 112px; display: flex; gap: 4px; }
.buff { position: relative; width: 28px; height: 28px; border-radius: 7px; background: rgba(10,18,34,0.7); border: 2px solid var(--bc); box-shadow: 0 0 8px var(--bc); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.buff i { position: absolute; right: -2px; bottom: -4px; font: bold 10px Verdana, sans-serif; color: #fff; text-shadow: 0 0 3px #000; font-style: normal; }
.skHead { padding: 6px 10px; margin-bottom: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--cc), rgba(255,255,255,0)); color: #1a2038; font-size: 12px; }
.skHead b { font-size: 14px; }
.skList { display: flex; flex-direction: column; gap: 5px; width: 470px; }
.skRow { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.75); border: 1px solid #d0dcf0; }
.skRow.locked { opacity: 0.55; }
.skIcon { width: 38px; height: 38px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(180deg, #3a4a70, #1e2840); border: 2px solid #8ea4d2; }
.skIcon.kind-cc { border-color: #e8c030; } .skIcon.kind-def { border-color: #5ad0a0; } .skIcon.kind-passive { border-color: #c080ff; border-style: dashed; }
.skInfo small { color: #5a6480; font-size: 11px; line-height: 14px; }
.skInfo b { color: #243058; }
.tag { font-size: 9px; font-weight: bold; padding: 1px 5px; border-radius: 5px; color: #fff; background: #d05a3a; vertical-align: 1px; }
.tag.kind-cc { background: #c89a10; } .tag.kind-def { background: #2a9a6a; } .tag.kind-passive { background: #8a4ad0; }
.cost { font-size: 10px; color: #3a6ad8; } .lk { font-size: 10px; color: #b05a10; font-weight: bold; }

/* ---------- PvP ---------- */
#classPick { grid-template-columns: repeat(8, 112px); }
.classGrid.small { display: grid; grid-template-columns: repeat(8, 96px); gap: 6px; justify-content: center; }
.classGrid.small .classCard .classImg { width: 72px; height: 80px; }
.classGrid.small .classCard small { display: none; }
.titleBox .row { display: flex; gap: 22px; justify-content: center; align-items: flex-end; margin-bottom: 10px; }
.titleBox .row label { text-align: left; }
#modePick { display: flex; gap: 6px; }
.modeBtn { width: 90px; padding: 5px 0; border-radius: 9px; border: 2px solid rgba(140,170,230,0.4); background: rgba(10,18,40,0.6); color: #cfe0ff; cursor: pointer; font-family: inherit; }
.modeBtn b { display: block; font-size: 18px; color: #fff; } .modeBtn small { font-size: 10px; }
.modeBtn.on { border-color: #ffcf4a; box-shadow: 0 0 12px #ffb030; background: rgba(40,40,70,0.8); }
.titleBtns { flex-wrap: wrap; align-items: center; }
.joinBox { display: inline-flex; gap: 6px; align-items: center; }
#codeInput { width: 96px; padding: 9px 8px; font: bold 16px 'Trebuchet MS', sans-serif; text-align: center; letter-spacing: 3px; text-transform: uppercase; border-radius: 8px; border: 2px solid #8ea4d2; outline: none; user-select: text; }
#menuMsg { min-height: 18px; font-size: 12px; color: #bfe0ff; margin: -10px 0 12px; }
#menuMsg.bad { color: #ff9a8a; }
.controls { max-width: 900px; }
.bigBtn.red { background: linear-gradient(180deg, #ff9a8a, #c8322a); border-color: #8a2018; }

#lobby { background: radial-gradient(ellipse at center, rgba(30,50,100,0.75), rgba(5,10,25,0.93)); }
.lobbyBox { width: 860px; padding: 20px 24px; border-radius: 16px; background: rgba(12,20,42,0.88); border: 1px solid rgba(140,170,230,0.5); color: #dfe8ff; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.lobbyHead { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin-bottom: 14px; }
#lobbyCode { font-size: 30px; letter-spacing: 6px; color: #ffcf4a; text-shadow: 0 0 10px #ffb030; vertical-align: -4px; }
.lobbyHead small { color: #8fa8d8; font-size: 11px; }
.lobbyTeams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lTeam h4 { margin-bottom: 6px; font-size: 15px; }
.lTeam.a h4 { color: #6ab4ff; } .lTeam.b h4 { color: #ff7a6a; }
.lSlot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(140,170,230,0.25); }
.lSlot b { flex: none; } .lSlot small { color: #9fb4e0; font-size: 11px; }
.lSlot.me { border-color: #ffcf4a; } .lSlot.empty { opacity: 0.55; }
.lIcon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(255,255,255,0.12); }
.lobbyLabel { margin: 12px 0 6px; font-size: 12px; color: #9fb4e0; text-align: center; }
.lobbyBtns { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
#lobbyWait { color: #cfe0ff; animation: pulse 0.8s infinite alternate; }

#scoreTop { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.45); pointer-events: none; }
#scoreTop .team { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; position: relative; min-width: 190px; color: #fff; font-weight: bold; }
#scoreTop .team.a { background: linear-gradient(90deg, rgba(20,60,140,0.92), rgba(40,110,220,0.92)); justify-content: flex-end; }
#scoreTop .team.b { background: linear-gradient(90deg, rgba(220,60,50,0.92), rgba(140,24,20,0.92)); }
#scoreTop .team b { font-size: 30px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
#scoreTop .tname { font-size: 12px; letter-spacing: 2px; opacity: 0.85; }
#scoreTop .prog { position: absolute; bottom: 2px; font-size: 9px; letter-spacing: 1px; }
#scoreTop .team.a .prog { left: 12px; } #scoreTop .team.b .prog { right: 12px; }
#scoreTop .prog i { font-style: normal; margin-right: 6px; color: rgba(255,255,255,0.8); }
#scoreTop .prog i.done { color: #ffe45c; }
#scoreTop .mid { background: rgba(10,16,30,0.92); padding: 4px 16px; text-align: center; color: #fff; }
#timer { font: bold 24px 'Trebuchet MS', sans-serif; }
#timer.low { color: #ff6a5a; animation: pulse 0.5s infinite alternate; }
#scoreTop .mid small { font-size: 9px; color: #9fb4e0; display: block; }
#feed { position: absolute; right: 12px; top: 200px; width: 240px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.feedRow { background: rgba(10,16,30,0.75); border-radius: 8px; padding: 4px 10px; font: bold 12px 'Trebuchet MS', sans-serif; color: #fff; text-align: right; animation: slideIn 0.25s; text-shadow: 0 1px 1px #000; }
.feedRow .sw { color: #ffd23a; margin: 0 4px; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
#sideMenu { top: 420px; }
#charPanel { min-width: 310px; }
.bar.hp { height: 18px; }
.bar.hp span { line-height: 17px; font-size: 11px; }
.shieldFill { position: absolute; left: 0; top: 0; height: 4px; background: #e8f6ff; box-shadow: 0 0 4px #bfe8ff; transition: width 0.15s; }
#cardBar { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; max-width: 220px; }
.cardChip { font-size: 9px; font-weight: bold; color: #7a2a6a; background: #ffe6f6; border: 1px solid #e0a0d0; border-radius: 5px; padding: 0 4px; }
#buffBar { top: 108px; }
#ptsBtn { position: absolute; left: 14px; top: 144px; padding: 6px 12px; border-radius: 8px; border: 1px solid #a07010; background: linear-gradient(180deg, #ffe89a, #d89a20); color: #4a2800; font: bold 12px 'Trebuchet MS', sans-serif; cursor: pointer; animation: glow 0.9s infinite alternate; }
.slot .cdTxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 18px Verdana, sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000; z-index: 2; pointer-events: none; }
.slot.mob::after { content: '➤'; position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #8affc8; text-shadow: 0 0 3px #000; }
.tag.mobTag { background: #1a9a7a; }
.statRow .ad { flex: 1; font-size: 9px; color: #7a84a0; margin: 0 6px; }
#winStatus { width: 560px; }
#death { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); pointer-events: none; z-index: 30; }
#death .deathBox { background: rgba(40,0,0,0.75); border-color: #ff6a5a; color: #fff; }
#death .deathBox h2 { color: #ff8a7a; }
#death .deathBox p { color: #ffd0c8; margin: 0; font-size: 18px; font-weight: bold; }
#board { background: rgba(0,0,0,0.35); pointer-events: none; }
.boardBox, .endBox { background: rgba(12,20,42,0.94); border: 1px solid rgba(140,170,230,0.5); border-radius: 14px; padding: 16px 22px; color: #dfe8ff; min-width: 640px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); text-align: center; }
.boardBox h3 { margin-bottom: 10px; }
.bTeam { margin-bottom: 10px; text-align: left; }
.bHead { font-weight: bold; color: var(--tc); margin-bottom: 4px; font-size: 14px; }
.bTeam table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bTeam th { text-align: left; color: #8fa8d8; font-weight: normal; padding: 3px 6px; border-bottom: 1px solid rgba(140,170,230,0.3); }
.bTeam td { padding: 4px 6px; border-bottom: 1px solid rgba(140,170,230,0.12); }
.bTeam tr.me td { color: #ffe45c; font-weight: bold; }
#endScreen { background: radial-gradient(ellipse at center, rgba(20,30,60,0.7), rgba(0,0,0,0.85)); z-index: 60; }
#endTitle { font: 900 64px 'Trebuchet MS', sans-serif; letter-spacing: 4px; margin-bottom: 6px; color: #fff; }
#endTitle.win { color: #ffcf4a; text-shadow: 0 0 24px #ffb030; }
#endTitle.lose { color: #ff6a5a; text-shadow: 0 0 24px #a01010; }
#endReason { color: #bcd0f0; margin-bottom: 14px; }
.endBox .bigBtn { margin-top: 12px; }
#log .kill { color: #ffb070; font-weight: bold; }

/* ---------- Itens, mercador e missões ---------- */
#questTracker { right: 12px; top: 200px; width: 240px; z-index: 5; }
#questTracker small { color: #6a7490; display: block; margin-top: 2px; }
#feed { top: 300px; }
#sideMenu { top: 470px; }
#altarTxt.hot { color: #ffcf4a; font-weight: bold; animation: pulse 0.6s infinite alternate; }
.slot.blocked img { filter: grayscale(1) brightness(0.6); }
.bagTitle { font-weight: bold; color: #243058; margin: 6px 0 4px; font-size: 12px; }
#bagBody .invGrid { grid-template-columns: repeat(5, 48px); min-height: 0; }
.invCell.it-mat { background: linear-gradient(180deg, #fbfff0, #e0ecc8); }
.invCell.it-buff { background: linear-gradient(180deg, #fff6ee, #f4dcc8); }
.shopRow { width: 460px; }
.shopRow.cur { border-color: #d89a20; background: #fff8e0; }
.shopRow .cost { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: bold; color: #2a7a3a; margin-right: 6px; }
.shopRow .cost img { width: 18px; height: 18px; }
.shopRow .cost.miss { color: #c0402c; }
.qIcon { font-size: 22px; width: 30px; text-align: center; }

/* =================== Página principal — DeathMatcheroes.io =================== */
:root { --gold: #f2c230; --gold2: #ffe89a; --blood: #d8283c; --ink: #0d0914; --panel: rgba(18,12,28,0.82); --line: rgba(242,194,48,0.35); --txt: #efe6ff; --mut: #a898c8; }
#home { display: block; overflow-y: auto; overflow-x: hidden; z-index: 40; background: radial-gradient(ellipse at 50% 0%, rgba(90,20,50,0.55), rgba(8,5,14,0.93) 70%); font-family: 'Nunito', 'Trebuchet MS', sans-serif; color: var(--txt); }
#home::-webkit-scrollbar { width: 10px; } #home::-webkit-scrollbar-thumb { background: #3a2a4a; border-radius: 5px; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 10px 28px; background: linear-gradient(180deg, rgba(8,5,14,0.96), rgba(8,5,14,0.8)); border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
.brand { font-family: 'Cinzel', Georgia, serif; font-size: 22px; letter-spacing: 1px; white-space: nowrap; }
.brand b { color: #fff; } .brand b span { color: var(--blood); text-shadow: 0 0 12px rgba(216,40,60,0.7); } .brand i { color: var(--gold); font-style: normal; font-size: 16px; }
.brand .skull { color: var(--gold); margin-right: 6px; filter: drop-shadow(0 0 6px rgba(242,194,48,0.6)); }
.brand.small { font-size: 18px; text-align: center; margin-bottom: 14px; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.navBtn { background: none; border: none; color: var(--mut); font: 800 14px 'Nunito', sans-serif; padding: 9px 16px; border-radius: 10px; cursor: pointer; letter-spacing: 0.5px; transition: all 0.15s; }
.navBtn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.navBtn.on { color: var(--ink); background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0 16px rgba(242,194,48,0.45); }
.accBtn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: #fff; padding: 6px 14px; border-radius: 12px; cursor: pointer; font: 800 13px 'Nunito', sans-serif; }
.accBtn:hover { border-color: var(--gold); } .accBtn img { height: 30px; }
.coinsTag { background: rgba(242,194,48,0.15); color: var(--gold2); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 800; }
.loading { text-align: center; padding: 120px 0; font: 700 22px 'Cinzel', serif; color: var(--gold2); animation: pulse 0.8s infinite alternate; }
.homeMain { max-width: 1240px; margin: 0 auto; padding: 20px 24px 60px; }
.hero { position: relative; height: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,0,0,0.6); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.heroText { position: absolute; left: 0; right: 0; top: 18px; text-align: center; pointer-events: none; }
.heroText h1 { font: 900 64px 'Cinzel', Georgia, serif; letter-spacing: 3px; color: #fff; text-shadow: 0 4px 0 #3a0a14, 0 0 30px rgba(216,40,60,0.7), 0 0 60px rgba(0,0,0,0.8); }
.heroText h1 span { color: var(--blood); } .heroText h1 small { font-size: 32px; color: var(--gold); }
.heroText p { font-weight: 800; font-size: 16px; color: #ffe6d0; text-shadow: 0 2px 6px #000; margin-top: 2px; }
.onlineInfo { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800; background: rgba(0,0,0,0.55); padding: 4px 12px; border-radius: 10px; color: #bff0c8; }
.dPanel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(4px); margin-top: 18px; }
.dPanel h2 { font: 900 26px 'Cinzel', serif; color: var(--gold2); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.dPanel h3 { font: 700 18px 'Cinzel', serif; color: var(--gold2); margin: 6px 0 10px; }
.dPanel h4 { font: 700 14px 'Cinzel', serif; color: var(--gold2); margin: 14px 0 6px; }
.muted { color: var(--mut); font-size: 13px; }
.playGrid { display: grid; grid-template-columns: 1fr 330px; gap: 18px; }
.playGrid .dPanel { margin-top: 18px; }
.playCard label { display: block; font-size: 12px; font-weight: 800; color: var(--mut); margin: 4px 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.playCard .row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 10px; }
.playCard .nameCol { flex: 1 1 150px; min-width: 150px; max-width: 210px; } /* encolhe antes de a dificuldade quebrar a linha */ .playCard .nameCol #nameInput { width: 100%; }
#home #nameInput, #home #codeInput, .authBox input { background: rgba(0,0,0,0.45); color: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 800 15px 'Nunito', sans-serif; outline: none; }
#home #nameInput:focus, #home #codeInput:focus, .authBox input:focus { border-color: var(--gold); box-shadow: 0 0 10px rgba(242,194,48,0.3); }
#home #classPick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 0; }
#home .classCard { background: linear-gradient(180deg, rgba(40,26,60,0.8), rgba(14,8,22,0.9)); border: 2px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px 4px 8px; }
#home .classCard.on { border-color: var(--cc); box-shadow: 0 0 18px var(--cc); }
#home .classCard .classImg { width: 100%; height: auto; aspect-ratio: 9/10; }
#home .classCard b { font-size: 12px; } #home .classCard small { font-size: 9px; color: var(--mut); }
#home .modeBtn { background: rgba(0,0,0,0.4); border-color: var(--line); }
#home .modeBtn.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(242,194,48,0.5); }
.playBtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
#home .bigBtn { font-family: 'Nunito', sans-serif; font-weight: 900; border-radius: 12px; letter-spacing: 0.5px; }
.bigBtn.hot { background: linear-gradient(180deg, #ff6a5a, #b8142a); border-color: #6a0a14; color: #fff; box-shadow: 0 0 22px rgba(216,40,60,0.55), 0 4px 0 #5a0a14; font-size: 17px; padding: 12px 26px; }
.bigBtn.hot:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bigBtn:disabled { opacity: 0.5; cursor: default; filter: grayscale(0.5); }
.queueBox { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(216,40,60,0.12); border: 1px solid rgba(216,40,60,0.5); }
.queueBox #queueTxt { flex: 1; } .queueBox small { color: var(--mut); }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#home #menuMsg { margin: 10px 0 0; color: var(--mut); }
.sideCard h3 { display: flex; justify-content: space-between; align-items: center; }
.rankBox { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.35); margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.06); }
.rankBox img { width: 72px; } .rankBox b { display: block; font: 900 17px 'Cinzel', serif; } .rankBox small { color: var(--mut); font-size: 11px; display: block; }
.rankBox .prog { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 4px 0; width: 160px; overflow: hidden; } .rankBox .prog i { display: block; height: 100%; }
.tierRow { display: flex; justify-content: space-between; margin: 12px 0; } .tierRow img { width: 40px; }
.linkBtn { background: none; border: none; color: var(--mut); cursor: pointer; font: 700 12px 'Nunito'; text-decoration: underline; }
.matchRow { display: grid; grid-template-columns: 24px 38px 1fr 64px 60px 70px; gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 4px; border-radius: 8px; background: rgba(0,0,0,0.3); font-size: 12px; border-left: 4px solid #666; }
.matchRow.win { border-left-color: #3ad24a; } .matchRow.lose { border-left-color: var(--blood); }
.matchRow b { font-size: 14px; } .matchRow small { color: var(--mut); text-align: right; }
.up { color: #5aff7a; font-weight: 900; } .down { color: #ff6a6a; font-weight: 900; }
.how .howGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.how .howGrid div { background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; font-size: 13px; color: #d8cce8; line-height: 18px; border: 1px solid rgba(255,255,255,0.05); }
.how .howGrid b { display: block; color: var(--gold2); font: 700 15px 'Cinzel', serif; margin-bottom: 4px; }
.how .keys { margin-top: 12px; font-size: 12px; color: var(--mut); } .how kbd { margin: 0 2px 0 8px; }
.cardsScroll { overflow-x: auto; padding-bottom: 6px; } .cardsScroll canvas { display: block; }
.tierLegend { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0 16px; text-align: center; }
.tierLegend div { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 8px 4px; } .tierLegend img { width: 56px; } .tierLegend b { display: block; font: 700 14px 'Cinzel', serif; } .tierLegend small { color: var(--mut); }
#home .tabs .tab { background: rgba(0,0,0,0.35); color: var(--mut); border-color: var(--line); font-family: 'Nunito'; }
#home .tabs .tab.on { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: var(--ink); }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb th { text-align: left; color: var(--mut); padding: 6px 10px; border-bottom: 1px solid var(--line); font-weight: 800; }
table.lb td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); } table.lb td img { height: 22px; vertical-align: middle; }
table.lb tr.me td { color: var(--gold2); font-weight: 900; } table.lb tr:nth-child(2) td:first-child { color: var(--gold); font-weight: 900; }
.clsTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.clsTab { background: rgba(0,0,0,0.35); color: #ddd; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 6px 12px; cursor: pointer; font: 800 12px 'Nunito'; }
.clsTab.on { border-color: var(--cc); box-shadow: 0 0 12px var(--cc); color: #fff; }
.skinGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.skinCard { background: linear-gradient(180deg, rgba(40,26,60,0.8), rgba(14,8,22,0.9)); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.skinCard.on { border-color: var(--gold); box-shadow: 0 0 16px rgba(242,194,48,0.35); }
.skinCard canvas { image-rendering: pixelated; background: radial-gradient(circle at 50% 75%, rgba(255,255,255,0.12), rgba(0,0,0,0) 60%); border-radius: 10px; }
.skinCard b { font: 700 14px 'Cinzel', serif; color: #fff; }
.gem { font-size: 11px; color: #8ad8ff; font-weight: 800; }
.profHead { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.statsGrid div { background: rgba(0,0,0,0.35); border-radius: 12px; padding: 14px; text-align: center; } .statsGrid b { display: block; font: 900 26px 'Cinzel', serif; color: var(--gold2); } .statsGrid small { color: var(--mut); }
.authBox { position: relative; width: 380px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(180deg, #1c1228, #0d0914); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.7); color: var(--txt); display: flex; flex-direction: column; gap: 6px; font-family: 'Nunito'; }
.authBox label { font-size: 12px; font-weight: 800; color: var(--mut); margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }
.authBox .close { position: absolute; right: 12px; top: 10px; background: none; border: none; color: var(--mut); font-size: 22px; cursor: pointer; }
.authBox .err { color: #ff8a8a; font-size: 13px; min-height: 18px; }
.authBox .bigBtn { margin-top: 6px; }
#authModal { background: rgba(0,0,0,0.6); z-index: 50; }
.shareBtn { margin: 0 6px; padding: 5px 12px; font-size: 13px; vertical-align: middle; }
/* cadastro (nome, e-mail, nascimento, senha) · entrar (e-mail, senha) · completar conta antiga (e-mail, nascimento) */
.authBox .regOnly { display: none; } .authBox.reg .regOnly { display: block; } .authBox.done #authName, .authBox.done .nameOnly { display: none; }
.authBox.done .passOnly, .authBox.done .tabs { display: none; }
.authBox .loginOnly { display: none; } .authBox.login .loginOnly { display: block; }
.authBox .captchaOnly { display: none; margin-top: 8px; min-height: 65px; } .authBox.reg:not(.done) .captchaOnly { display: block; }
.authBox .authHint { color: var(--mut); font-size: 11px; margin-top: -2px; }
.authBox .authIntro { font-size: 13px; line-height: 1.4; color: #e8d8f0; background: rgba(242,194,48,0.1); border: 1px solid rgba(242,194,48,0.35); border-radius: 10px; padding: 8px 10px; }
.authBox input[type=date] { color-scheme: dark; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: linear-gradient(180deg, #2a1a3a, #140a1e); border: 1px solid var(--gold); color: #fff; padding: 10px 16px; border-radius: 12px; font: 800 13px 'Nunito'; box-shadow: 0 6px 20px rgba(0,0,0,0.5); animation: slideIn 0.25s; }
.toast.bad { border-color: var(--blood); }
/* ---- em partida ---- */
#emoteBar { position: absolute; left: 12px; bottom: 188px; display: flex; gap: 4px; }
.emoteBtn { width: 34px; height: 30px; border-radius: 8px; border: 1px solid rgba(140,170,230,0.5); background: rgba(10,18,34,0.7); color: #fff; font: bold 14px sans-serif; cursor: pointer; }
.emoteBtn:hover { border-color: #ffd23a; } .emoteBtn.ping { background: rgba(60,30,10,0.75); }
#talentBtn { position: absolute; left: 14px; top: 178px; padding: 7px 14px; border-radius: 8px; border: 1px solid #6a3aa8; background: linear-gradient(180deg, #d0a8ff, #7a3ad8); color: #fff; font: bold 13px 'Trebuchet MS', sans-serif; cursor: pointer; animation: glow 0.9s infinite alternate; }
.talentGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 460px; }
.talentCard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 12px; border: 2px solid #8ea4d2; background: linear-gradient(180deg, #fff, #e4ecf8); cursor: pointer; font-family: inherit; }
.talentCard:hover { border-color: #d89a20; box-shadow: 0 0 14px #f2c230; transform: translateY(-2px); }
.talentCard span { font-size: 34px; } .talentCard b { font-size: 15px; color: #243058; } .talentCard small { font-size: 11px; color: #5a6480; }
#streakTag { color: #ff7a3a; font-weight: bold; margin-left: 6px; }
#log .ping { color: #ffd23a; font-weight: bold; }
.rankResult { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 12px; background: rgba(0,0,0,0.35); margin: 4px 0 10px; }
.rankResult img { height: 70px; } .rankResult b { display: block; font: 900 20px 'Cinzel', serif; } .rankResult span { font-size: 18px; margin-right: 8px; } .rankResult small { color: #9fb4e0; }
.coinsWon { color: #ffe89a; font-weight: bold; margin-bottom: 8px; }
@media (max-width: 1100px) { .playGrid { grid-template-columns: 1fr; } .how .howGrid { grid-template-columns: 1fr 1fr; } #home #classPick { grid-template-columns: repeat(4, 1fr); } .heroText h1 { font-size: 42px; } .profHead { grid-template-columns: 1fr; } }

/* ajustes da página principal */
#home #codeInput { width: 138px; letter-spacing: 2px; text-align: center; text-transform: uppercase; }
#home #nameInput:disabled { opacity: 0.85; cursor: default; color: var(--gold); }
#home #classPick .clsCard small, #home #classPick small { white-space: normal; line-height: 1.25; }

/* dificuldade dos bots: estrelas na cor do nível (página principal, sala, placar) */
.diffTag { color: var(--dc); font-weight: 900; letter-spacing: 1px; white-space: nowrap; text-shadow: 0 0 6px color-mix(in srgb, var(--dc) 45%, transparent), 0 1px 1px #000; }
.diffTag small { letter-spacing: 0; font-size: 0.85em; }
/* seletor na linha do nome e do modo, e a explicação na linha de "Escolha sua classe": não empurra os botões de jogar */
.diffCol { margin-left: auto; }
#diffPick { display: flex; gap: 5px; }
#home .diffBtn { width: 60px; }
#home .diffBtn.auto { width: 96px; }
#home .diffBtn b.st { font-size: 13px; letter-spacing: 0; } /* as 4 estrelas cabem com folga nos 60px */
.diffBtn b { font-size: 15px; line-height: 24px; }
.diffBtn b.st { color: var(--dc); letter-spacing: 1px; text-shadow: 0 0 8px color-mix(in srgb, var(--dc) 50%, transparent); }
.diffBtn small .diffTag { font-size: 10px; }
#home .diffBtn.on { border-color: var(--dc); box-shadow: 0 0 12px color-mix(in srgb, var(--dc) 55%, transparent); }
.clsHead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.clsHead label { margin-top: 0; } /* no bloco a margem de cima somava com a da linha de cima; no flex, não */
.diffHint { margin-left: auto; font-size: 12px; line-height: 16px; text-align: right; cursor: help; }
.diffHint .muted { font-size: 12px; }
.lobbyHead .diffTag small { font-size: 13px; }
.lSlot .diffTag { font-size: 12px; }
.bTeam .diffTag, .bTeam .diffTag small { font-size: 11px; }

/* pontos de atributo no HUD */
#ptsQuick { position: absolute; left: 14px; top: 144px; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 9px; border: 1px solid #a07010; background: rgba(40,24,6,0.85); color: #ffe89a; font: bold 12px 'Trebuchet MS', sans-serif; pointer-events: auto; box-shadow: 0 0 12px rgba(255,200,60,0.35); animation: ptsPulse 1.6s ease-in-out infinite; }
#ptsQuick button { padding: 3px 6px; border-radius: 6px; border: 1px solid #a07010; background: linear-gradient(180deg, #ffe89a, #d89a20); color: #4a2800; font: bold 11px 'Trebuchet MS', sans-serif; cursor: pointer; }
#ptsQuick button:hover { filter: brightness(1.15); transform: translateY(-1px); }
#autoAttrBtn { position: absolute; left: 14px; top: 104px; padding: 3px 9px; border-radius: 7px; border: 1px solid #5a7aa8; background: rgba(20,30,50,0.8); color: #bfe0ff; font: bold 11px 'Trebuchet MS', sans-serif; cursor: pointer; pointer-events: auto; }
#autoAttrBtn.off { color: #9aa4b4; border-color: #4a5260; }
@keyframes ptsPulse { 50% { box-shadow: 0 0 20px rgba(255,200,60,0.6); } }

/* missões em sequência e recarga dos portais */
#questTracker .qSteps { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
#questTracker .qSteps i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #c8a050; background: rgba(0,0,0,0.35); }
#questTracker .qSteps i.done { background: #ffcf4a; }
#questTracker .qSteps i.cur { background: #fff; box-shadow: 0 0 6px #ffcf4a; }
#questTracker .portalCd { margin-top: 5px; font-size: 11px; color: #c8b8ff; }
#questTracker .portalCd.ok { color: #9affd0; }

/* modo das habilidades */
#castModeBtn { position: absolute; left: 104px; top: 104px; padding: 3px 9px; border-radius: 7px; border: 1px solid #5a7aa8; background: rgba(20,30,50,0.8); color: #bfe0ff; font: bold 11px 'Trebuchet MS', sans-serif; cursor: pointer; pointer-events: auto; }
#view.aim { cursor: crosshair; }
#questTracker .portalCd { font-size: 12px; font-weight: bold; color: #6a3ab8; }
#questTracker .portalCd.ok { color: #1f8a52; }

/* contagem de início */
#countdown { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; z-index: 30; }
#countdown b { display: block; font: 900 190px/1 'Cinzel', 'Trebuchet MS', serif; color: #ffe27a; background: linear-gradient(180deg, #fff6c8 10%, #ffcf4a 55%, #d8801a 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 0 #5a2c06) drop-shadow(0 0 28px rgba(255,190,60,0.75)); }
#countdown small { display: block; margin-top: 6px; font: bold 20px 'Nunito', 'Trebuchet MS', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,0.8); }
#countdown.go b { font-size: 150px; background: linear-gradient(180deg, #fff 5%, #ffb03a 45%, #e0301c 95%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 0 #4a0a06) drop-shadow(0 0 36px rgba(255,90,40,0.9)); }
#countdown.pop { animation: cdPop 1s cubic-bezier(.2,1.6,.4,1) both; }
#countdown.go.pop { animation: cdGo 1.3s ease-out both; }
#countdown.hidden { display: none; }
@keyframes cdPop { 0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; } }
@keyframes cdGo { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@media (max-width: 700px) { #countdown b { font-size: 120px; } #countdown.go b { font-size: 90px; } }

/* ---- barra de habilidades mais legível ---- */
#hotbar { gap: 7px; padding: 8px 10px; background: linear-gradient(180deg, rgba(14,20,38,0.88), rgba(8,12,24,0.92)); border: 1px solid rgba(200,170,90,0.55); border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); align-items: center; }
#hotbar .slot { width: 58px; height: 58px; border-radius: 11px; border-width: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.45); }
#hotbar .slot.skill { background: radial-gradient(circle at 50% 35%, #5a3a3a, #2a1620 75%); border-color: #d86a5a; }
#hotbar .slot.skill.kind-cc { background: radial-gradient(circle at 50% 35%, #5a4a22, #2a200e 75%); border-color: #f0c040; }
#hotbar .slot.skill.kind-def { background: radial-gradient(circle at 50% 35%, #1e4a3e, #0e2620 75%); border-color: #5ad0a0; }
#hotbar .slot.item { background: radial-gradient(circle at 50% 35%, #34405e, #161e34 75%); border-color: #8ea4d2; }
#hotbar .slot .sk { font-size: 30px; filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 6px rgba(255,255,255,0.25)); transition: filter .15s; }
#hotbar .slot.oncd .sk, #hotbar .slot.oncd img { filter: grayscale(0.85) brightness(0.55); }
#hotbar .slot .key { left: 2px; top: 2px; min-width: 16px; padding: 0 4px; border-radius: 5px; background: rgba(0,0,0,0.78); border: 1px solid rgba(255,215,120,0.7); color: #ffe89a; font: bold 11px/15px 'Trebuchet MS', sans-serif; text-align: center; z-index: 3; }
#hotbar .slot .cd { background: rgba(0,0,0,0.62); }
#hotbar .slot .cdTxt { font: bold 22px 'Trebuchet MS', sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 2px 0 #000; }
#hotbar .slot .lock { font-size: 13px; color: #ffcf8a; background: rgba(8,8,16,0.8); }
#hotbar .slot:hover { transform: translateY(-2px); border-color: #fff; }
#hotbar .slot.ready { animation: slotReady 0.6s ease-out; }
@keyframes slotReady { 0% { box-shadow: 0 0 0 0 rgba(255,240,150,0.95), inset 0 0 18px rgba(255,240,150,0.9); } 100% { box-shadow: 0 0 0 12px rgba(255,240,150,0), inset 0 0 0 rgba(255,240,150,0); } }
#hotbar .hbSep { width: 2px; height: 44px; margin: 0 3px; background: linear-gradient(180deg, transparent, rgba(220,190,110,0.7), transparent); }
/* passiva */
.passiveSlot { position: relative; width: 40px; height: 40px; margin-right: 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: help; border: 2px solid #6a6a7a; background: #1a1a24; }
.passiveSlot .sk { font-size: 20px; }
.passiveSlot .pl { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; font: bold 9px 'Trebuchet MS', sans-serif; color: #ffcf8a; text-shadow: 0 0 3px #000; }
.passiveSlot.off { filter: grayscale(1) brightness(0.55); opacity: 0.75; }
.passiveSlot.on { border-color: #ffd24a; background: radial-gradient(circle, #5a4a18, #241c08); box-shadow: 0 0 12px rgba(255,210,74,0.65); }
.passiveSlot.on .pl { display: none; }
.passiveSlot::before { content: 'PASSIVA'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font: bold 8px 'Trebuchet MS', sans-serif; letter-spacing: 1px; color: #c8b890; text-shadow: 0 0 3px #000; }
/* opções: teclas */
.optKeys { padding: 8px 0; border-bottom: 1px solid #d0dcf0; }
.optKeys small { color: #6a7a9a; }
.keyRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; font-size: 12px; }
.keyBtn { min-width: 64px; font-weight: bold; }
.keyBtn.wait { background: #ffe89a; animation: ptsPulse 1s infinite; }
@media (max-width: 900px) { #hotbar .slot { width: 46px; height: 46px; } #hotbar .slot .sk { font-size: 22px; } }
#hotbar .slot .sk, .passiveSlot .sk { color: #eaf6ff; }

/* ---- buffs: faixa acima da barra de habilidades ---- */
#buffBar { position: absolute; left: 50%; top: auto; bottom: 122px; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; z-index: 6; }
#buffBar .buff { position: relative; width: 42px; height: 42px; border-radius: 50%; border: none; box-shadow: 0 0 12px var(--bc); background: conic-gradient(var(--bc) var(--p), rgba(255,255,255,0.12) 0); display: flex; align-items: center; justify-content: center; cursor: help; }
#buffBar .buff::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a3450, #10141f 75%); }
#buffBar .buff .bi { position: relative; font-size: 20px; filter: drop-shadow(0 1px 2px #000); color: #eaf6ff; }
#buffBar .buff i { position: absolute; right: -4px; top: -4px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: #10141f; border: 1px solid var(--bc); font: bold 10px/14px 'Trebuchet MS', sans-serif; color: #fff; font-style: normal; text-align: center; }
#buffBar .buff b { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: bold 10px 'Trebuchet MS', sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
#buffBar .buff.team { box-shadow: 0 0 16px var(--bc), 0 0 0 2px #ffd24a; }
#buffBar .buff.streak { box-shadow: 0 0 18px var(--bc); animation: buffPulse 1.2s ease-in-out infinite; }
#buffBar .buff.debuff { background: conic-gradient(#ff5a4a 100%, transparent 0); animation: buffPulse 0.8s ease-in-out infinite; }
#buffBar .buff.debuff b { color: #ffb0a0; }
@keyframes buffPulse { 50% { transform: scale(1.08); } }
/* ---- cartas: painel à direita ---- */
#cardDock { position: absolute; right: 12px; top: 318px; width: 240px; padding: 7px 9px 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(40,22,48,0.9), rgba(18,10,24,0.92)); border: 1px solid #c890e0; box-shadow: 0 4px 16px rgba(0,0,0,0.45); pointer-events: auto; z-index: 5; }
#cardDock.hidden { display: none; }
#cardDock .cdHead { font: bold 12px 'Trebuchet MS', sans-serif; color: #ffd6f4; margin-bottom: 5px; }
#cardDock .cdList { display: flex; flex-wrap: wrap; gap: 6px; }
#cardDock .cdCard { position: relative; width: 44px; height: 56px; border-radius: 6px; background: linear-gradient(180deg, #f8ecd0, #d8c08a); border: 2px solid #8a5a2e; display: flex; align-items: center; justify-content: center; cursor: help; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
#cardDock .cdCard img { width: 38px; height: 38px; background: #bcd8f0; border-radius: 4px; image-rendering: auto; }
#cardDock .cdCard span { position: absolute; right: -5px; bottom: -5px; padding: 0 4px; border-radius: 7px; background: #7a2a6a; color: #fff; font: bold 10px/14px 'Trebuchet MS', sans-serif; }
#cardDock .cdCard.new { animation: cardNew 1.4s ease-out 2; }
#cardDock .cdSum { margin-top: 6px; font: bold 11px 'Trebuchet MS', sans-serif; color: #b8ffcf; line-height: 1.3; }
@keyframes cardNew { 0% { transform: scale(1.35) rotate(-6deg); box-shadow: 0 0 24px #ff9ae8; } 100% { transform: none; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } }
#cardBar { display: none; }
#buffBar { gap: 16px; }
#buffBar .buff b { max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }

/* ================= toque: iPhone/iPad (body.touch, liga em js/touch.js; nada disto vale no desktop) ================= */
#tJoy, #tAttack, #tBoard, #tRotate, .how .touchKeys { display: none; }
body.touch .how .keys { display: none; } body.touch .how .keys.touchKeys { display: block; }
body.touch { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -webkit-text-size-adjust: 100%; }
body.touch #view, body.touch #hud { touch-action: none; } /* nada de rolar/quicar a página no meio da partida */
body.touch .window, body.touch .boardBox, body.touch .endBox, body.touch .lobbyBox { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.touch, body.touch #game { overscroll-behavior: none; }
body.touch #tilt { backdrop-filter: none; -webkit-backdrop-filter: none; } /* desfoque de tela cheia pesa demais no celular */
body.touch button, body.touch .slot, body.touch .classCard, body.touch .menuBtn { touch-action: manipulation; }
body.touch input { font-size: 16px !important; -webkit-user-select: text; user-select: text; } /* 16px: o Safari não dá zoom ao focar */
/* joystick: descansa no canto inferior esquerdo e nasce onde o dedo encosta */
body.touch #tJoy { display: block; position: absolute; left: calc(env(safe-area-inset-left) + 110px); top: calc(100% - 120px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: radial-gradient(circle, rgba(10,18,34,0.15), rgba(10,18,34,0.4)); opacity: 0.5; pointer-events: none; z-index: 8; }
body.touch #tJoy.on { opacity: 1; }
#tJoyKnob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #aac4f0 60%, #5a7ab0); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
/* ataque + habilidades em arco (posições em touchLayoutHotbar) */
body.touch #actionBar { left: auto; right: calc(env(safe-area-inset-right) + 10px); bottom: 14px; transform: none; display: block; z-index: 7; pointer-events: none; }
body.touch #hotbar { display: block; padding: 0; background: none; border: none; box-shadow: none; }
body.touch #hotbar .passiveSlot, body.touch #hotbar .hbSep, body.touch #hotbar .slot .key { display: none; }
body.touch #hotbar .slot { position: absolute; border-radius: 50%; pointer-events: auto; }
body.touch #hotbar .slot:hover { transform: none; }
body.touch #hotbar .slot.down, body.touch #tAttack.down { transform: scale(0.9); filter: brightness(1.35); }
body.touch #hotbar .slot .sk { font-size: 26px; }
body.touch #hotbar .slot.item img { width: 68%; height: 68%; }
body.touch #hotbar .slot .cdTxt { font-size: 17px; }
body.touch #hotbar .slot .lock { font-size: 10px; }
body.touch #tAttack { display: block; position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid #ffd27a; background: radial-gradient(circle at 50% 35%, #ff7a5a, #8a1a14 75%); color: #fff; font-size: 32px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 0 12px rgba(255,220,160,0.5); }
body.touch #tBoard { display: block; position: absolute; right: calc(env(safe-area-inset-right) + 236px); top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c8a050; background: rgba(10,18,34,0.75); font-size: 18px; z-index: 6; }
/* painéis: nada no caminho do joystick; o menu vira uma fileira de ícones */
body.touch #castModeBtn { display: none; }
body.touch #sideMenu { left: calc(env(safe-area-inset-left) + 14px); right: auto; top: 140px; flex-direction: row; }
body.touch #sideMenu .menuBtn { width: 46px; height: 42px; font-size: 0; padding: 0; }
body.touch #sideMenu .menuBtn span { font-size: 20px; }
body.touch #talentBtn { top: 192px; z-index: 6; }
body.touch #chatBox { left: calc(env(safe-area-inset-left) + 12px); top: 236px; bottom: auto; width: 330px; height: 110px; pointer-events: none; }
body.touch #emoteBar { left: calc(env(safe-area-inset-left) + 12px); top: 354px; bottom: auto; }
body.touch #emoteBar .emoteBtn { width: 38px; height: 34px; }
body.touch #charPanel, body.touch #autoAttrBtn, body.touch #talentBtn, body.touch #ptsQuick { margin-left: env(safe-area-inset-left); }
body.touch #mapPanel, body.touch #questTracker { margin-right: env(safe-area-inset-right); }
body.touch .window { max-height: calc(100% - 16px); overflow-y: auto; }
body.touch .winHead { cursor: default; }
/* celular (tela baixa): HUD encolhido para caber em ~375-430 px de altura */
body.touch.phone #tJoy { width: 92px; height: 92px; margin: -46px 0 0 -46px; left: calc(env(safe-area-inset-left) + 88px); top: calc(100% - 92px); }
body.touch.phone #tJoyKnob { width: 40px; height: 40px; margin: -20px; }
body.touch.phone #charPanel { left: 6px; top: 6px; transform: scale(0.6); transform-origin: top left; }
body.touch.phone #autoAttrBtn { left: 8px; top: 102px; font-size: 10px; padding: 2px 7px; }
body.touch.phone #talentBtn { left: 8px; top: 124px; font-size: 11px; padding: 4px 9px; z-index: 6; }
body.touch.phone #ptsQuick { left: 96px; top: 98px; transform: scale(0.8); transform-origin: top left; }
body.touch.phone #sideMenu { left: calc(env(safe-area-inset-left) + 6px); top: 60px; gap: 4px; }
body.touch.phone #sideMenu .menuBtn { width: 36px; height: 34px; border-radius: 8px; }
body.touch.phone #sideMenu .menuBtn span { font-size: 16px; }
body.touch.phone #scoreTop { top: 4px; transform: translateX(-50%) scale(0.6); transform-origin: top center; }
body.touch.phone #mapPanel { top: 4px; right: 6px; transform: scale(0.5); transform-origin: top right; }
body.touch.phone #questTracker { top: 92px; right: 6px; width: 220px; transform: scale(0.58); transform-origin: top right; }
body.touch.phone #tBoard { right: calc(env(safe-area-inset-right) + 122px); top: 6px; width: 32px; height: 32px; font-size: 15px; }
body.touch.phone #feed { top: 50px; right: auto; left: 50%; width: 300px; margin-left: -150px; transform: scale(0.8); transform-origin: top center; }
body.touch.phone #chatBox { left: calc(env(safe-area-inset-left) + 6px); top: 150px; width: 250px; height: 62px; padding: 3px 6px; background: rgba(10,18,34,0.35); }
body.touch.phone #log { font-size: 10px; line-height: 13px; }
body.touch.phone #emoteBar, body.touch.phone #cardDock { display: none; }
body.touch.phone #buffBar { bottom: 64px; transform: translateX(-50%) scale(0.75); transform-origin: bottom center; }
body.touch.phone #expBar { height: 11px; }
body.touch.phone #expBar span { font-size: 9px; line-height: 10px; }
body.touch.phone #banner { font-size: 20px; }
body.touch.phone #death { transform: translate(-50%, -50%) scale(0.7); }
body.touch.phone .window { left: 50% !important; top: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; max-width: calc(100% - 16px); }
body.touch.phone .boardBox, body.touch.phone .endBox { min-width: 0; width: min(640px, calc(100vw - 16px)); max-height: calc(100% - 16px); overflow-y: auto; padding: 10px 12px; }
body.touch.phone .talentGrid { width: min(460px, calc(100vw - 40px)); }
/* sala: cabe na tela do celular deitado (rola se o 3x3 passar da altura) */
body.touch .lobbyBox { max-width: calc(100vw - 16px); max-height: calc(100% - 16px); overflow-y: auto; }
body.touch.phone .lobbyBox { padding: 10px 14px; }
body.touch.phone .lobbyHead { font-size: 13px; margin-bottom: 8px; }
body.touch.phone .classGrid.small { grid-template-columns: repeat(8, 1fr); }
body.touch.phone .classGrid.small .classCard .classImg { width: 100%; height: auto; }
/* celular em pé durante a partida: pede para girar */
@media (orientation: portrait) {
  body.touch.phone.playing #tRotate { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0d1420; color: #ffe89a; font: bold 20px 'Trebuchet MS', sans-serif; text-align: center; }
  #tRotate div { font-size: 54px; } #tRotate small { color: #9fb4e0; font-size: 14px; }
}
/* página principal em tela estreita (celular em pé) */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; padding-top: calc(env(safe-area-inset-top) + 8px); }
  .brand { font-size: 17px; }
  .topbar nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .navBtn { padding: 7px 8px; font-size: 13px; }
  .accBtn { margin-left: auto; padding: 5px 10px; }
  .homeMain { padding: 12px 10px 40px; }
  .hero { height: 230px; }
  .heroText h1 { font-size: 26px; letter-spacing: 1px; } .heroText h1 small { font-size: 16px; } .heroText p { font-size: 12px; }
  .playCard .row { gap: 10px; }
  .playCard .nameCol { max-width: none; flex-basis: 100%; }
  .diffCol { margin-left: 0; }
  #diffPick { flex-wrap: wrap; }
  #home #classPick { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  #home .classCard b { font-size: 10px; } #home .classCard small { display: none; }
  .diffHint { margin-left: 0; text-align: left; }
  .playBtns .bigBtn { flex: 1 1 100%; }
  .joinBox { flex: 1 1 100%; } .joinBox #codeInput { flex: 1; }
  .how .howGrid { grid-template-columns: 1fr; }
  .tierLegend { grid-template-columns: repeat(4, 1fr); }
  .statsGrid { grid-template-columns: repeat(2, 1fr); }
  .authBox { width: calc(100vw - 24px); }
  .dPanel { padding: 12px; }
  .lobbyHead { flex-wrap: wrap; gap: 6px 12px; } .lobbyTeams { grid-template-columns: 1fr; }
  body.touch.phone .classGrid.small, .classGrid.small { grid-template-columns: repeat(4, 1fr); } .lobbyBtns { flex-wrap: wrap; }
}

/* ================= trilha de troféus, moedas e heróis ================= */
.coinsTag.gem { background: rgba(90,200,255,0.15); color: #bfeaff; }
.coinsTag.tr { background: rgba(255,150,60,0.15); color: #ffd0a0; }
.accBtn .coinsTag { white-space: nowrap; }
.walletRow { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; vertical-align: middle; }
h2 .walletRow { margin: 0 0 0 6px; } h2 .walletRow .coinsTag { font: 800 13px 'Nunito', sans-serif; }
.rankBox > div { min-width: 0; } .rankBox > div small { line-height: 1.35; }
.roadBtn { width: 100%; margin: 6px 0 4px; font-size: 14px !important; padding: 9px 12px !important; }
.navBtn[data-badge]:not([data-badge=""])::after { content: attr(data-badge); display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--blood); color: #fff; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 8px rgba(216,40,60,0.8); }
.btn.gemBtn { background: linear-gradient(180deg, #bfeaff, #3a9ad8); border-color: #1a5a8a; color: #06243a; }
.buyRow { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.gem.road { color: #ffc890; }
/* pacotes */
.packGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.packCard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(40,26,60,0.8), rgba(14,8,22,0.9)); text-align: center; }
.packCard.gem { border-color: rgba(90,200,255,0.35); } .packCard.gold { border-color: rgba(242,194,48,0.35); }
.packCard .pi { font-size: 34px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
.packCard b { font: 900 18px 'Nunito', sans-serif; color: #fff; } .packCard b small { display: block; font-size: 11px; color: #8aff9a; }
/* cabeçalho da trilha */
.roadHead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.roadHead img { width: 96px; }
.roadHead > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.roadHead b { font: 900 26px 'Cinzel', serif; color: var(--gold2); } .roadHead small { color: var(--mut); font-size: 12px; }
/* heróis da trilha */
.heroStrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.heroCard { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.1); background: radial-gradient(circle at 50% 30%, rgba(90,60,130,0.6), rgba(14,8,22,0.95)); text-align: center; }
.heroCard img { width: 90px; height: 100px; image-rendering: pixelated; }
.heroCard b { font-size: 13px; color: #fff; } .heroCard small { font-size: 11px; color: var(--gold2); font-weight: 800; } .heroCard small.role { color: var(--mut); font-weight: 400; line-height: 1.25; }
.heroCard.soon img { filter: saturate(0.55) brightness(0.8); }
.ribbon { position: absolute; top: 12px; right: -30px; width: 110px; transform: rotate(35deg); background: linear-gradient(180deg, #ff6a5a, #b8142a); color: #fff; font: 900 9px 'Nunito', sans-serif; font-style: normal; letter-spacing: 1px; text-align: center; padding: 2px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
/* a trilha */
.road { position: relative; padding-left: 26px; }
.road::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.roadStep, .roadArena, .roadHere { position: relative; margin-bottom: 8px; }
.roadStep::before, .roadArena::before { content: ''; position: absolute; left: -26px; top: -8px; bottom: -8px; width: 6px; margin-left: 9px; background: transparent; }
.roadStep.claimed::before, .roadStep.ready::before, .roadArena.reached::before { background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.roadStep { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); }
.roadStep::after { content: ''; position: absolute; left: -24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #2a2238; border: 2px solid rgba(255,255,255,0.25); }
.roadStep.ready { border-color: var(--gold); box-shadow: 0 0 16px rgba(242,194,48,0.35); background: rgba(60,40,10,0.45); }
.roadStep.ready::after { background: var(--gold); border-color: #fff; box-shadow: 0 0 10px var(--gold); }
.roadStep.claimed { opacity: 0.6; } .roadStep.claimed::after { background: var(--gold); border-color: var(--gold2); }
.roadStep.locked .rsRw { filter: grayscale(0.35); }
.rsT { font: 900 16px 'Nunito', sans-serif; color: var(--gold2); white-space: nowrap; }
.rsRw { display: flex; flex-wrap: wrap; gap: 8px; }
.rsBtn .bigBtn { padding: 8px 16px; font-size: 14px; } .rsDone { color: #8aff9a; font-weight: 900; font-size: 13px; } .rsLock { color: var(--mut); font-size: 12px; white-space: nowrap; }
.rwd { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 86px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); text-align: center; }
.rwd .ri { font-size: 26px; } .rwd b { font-size: 14px; color: #fff; } .rwd small { font-size: 10px; color: var(--mut); line-height: 1.2; max-width: 120px; }
.rwd.gold b { color: var(--gold2); } .rwd.gem b { color: #bfeaff; }
.rwd.rwdHero, .rwd.item { border-color: rgba(242,194,48,0.4); background: radial-gradient(circle at 50% 30%, rgba(90,60,130,0.55), rgba(20,12,30,0.8)); }
.rwd.rwdHero img { width: 72px; height: 80px; image-rendering: pixelated; } .rwd.item img { width: 60px; height: 66px; image-rendering: pixelated; object-fit: contain; }
.rwd.rwdHero.soon img { filter: saturate(0.55) brightness(0.8); }
.roadArena { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 35%, transparent), rgba(0,0,0,0.25)); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); }
.roadArena img { width: 72px; } .roadArena b { display: block; font: 900 20px 'Cinzel', serif; color: var(--ag); } .roadArena small { display: block; color: #d8cce8; font-size: 12px; }
.roadArena:not(.reached) { filter: grayscale(0.6) brightness(0.8); }
.roadHere { margin: 4px 0 12px; } .roadHere span { display: inline-block; padding: 4px 12px; border-radius: 10px; background: var(--blood); color: #fff; font: 900 13px 'Nunito', sans-serif; box-shadow: 0 0 14px rgba(216,40,60,0.7); }
/* classe trancada pela trilha */
.classCard.locked { filter: grayscale(0.9) brightness(0.6); cursor: not-allowed; }
.tierLegend { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 640px) {
  .roadStep { grid-template-columns: 1fr; gap: 6px; } .rsBtn { justify-self: start; }
  .roadHead img { width: 72px; } .roadHead b { font-size: 21px; }
  .rwd { min-width: 72px; }
  .tierLegend { grid-template-columns: repeat(4, 1fr); }
  .accBtn .coinsTag { display: none; } .accBtn .coinsTag.tr { display: inline; }
}
#recentBox .matchRow { grid-template-columns: 20px 32px 1fr 52px 58px; } #recentBox .matchRow small { display: none; }
@media (max-width: 640px) { .heroStrip { grid-template-columns: repeat(3, 1fr); gap: 6px; } .heroCard img { width: 60px; height: 66px; } .heroCard small.role { display: none; } .heroCard b { font-size: 11px; } }

/* ================= página principal: capa em tela cheia, herói em destaque, seções ================= */
.hero { height: 600px; width: 100vw; margin: -20px calc(50% - 50vw) 0; border: none; border-radius: 0; box-shadow: none; background: #0d0914; }
.hero canvas { image-rendering: auto; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9,4,16,0.92) 0%, rgba(9,4,16,0.72) calc(50% - 330px), rgba(9,4,16,0) calc(50% + 40px)); }
.heroInner { position: absolute; inset: 0; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; display: flex; align-items: center; pointer-events: none; }
.heroText { position: static; max-width: 510px; text-align: left; pointer-events: auto; }
.heroKicker { display: inline-block; font: 900 12px 'Nunito', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--gold2); padding: 4px 12px; border-radius: 20px; background: rgba(242,194,48,0.12); border: 1px solid rgba(242,194,48,0.4); }
.heroText h1 { font: 900 62px/1.02 'Cinzel', Georgia, serif; letter-spacing: 1px; margin: 14px 0 10px; text-shadow: 0 4px 0 #3a0a14, 0 0 34px rgba(216,40,60,0.55), 0 8px 30px rgba(0,0,0,0.8); }
.heroText h1 small { font-size: 30px; }
.heroText .heroLead { font-weight: 700; font-size: 17px; line-height: 1.5; color: #f2dfe8; text-shadow: 0 2px 8px #000; margin: 0; }
.heroChips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.heroChips span { font: 800 13px 'Nunito', sans-serif; color: #fff; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(4px); }
.heroCtas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#home .heroCtas .bigBtn { font-size: 17px; padding: 13px 22px; border-radius: 14px; }
.bigBtn.ghost { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.35); color: #fff; box-shadow: none; backdrop-filter: blur(4px); }
.bigBtn.ghost:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.heroText .onlineInfo { margin-top: 18px; }
/* plaquinha do herói da frente (a posição vem da arte) */
.heroPlate { position: absolute; z-index: 3; bottom: 44px; left: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 20px 7px; border-radius: 14px; cursor: pointer; font-family: 'Nunito', sans-serif; color: #fff;
  background: linear-gradient(180deg, rgba(20,10,30,0.88), rgba(10,5,16,0.92)); border: 1px solid color-mix(in srgb, var(--cc, #f2c230) 70%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--cc, #f2c230) 45%, transparent), 0 8px 24px rgba(0,0,0,0.6); transition: box-shadow 0.2s; }
.heroPlate:hover { box-shadow: 0 0 34px var(--cc, #f2c230), 0 8px 24px rgba(0,0,0,0.6); }
.heroPlate:empty { display: none; }
.heroPlate b { font: 900 20px 'Cinzel', serif; letter-spacing: 1px; color: #fff; text-shadow: 0 0 12px var(--cc); }
.heroPlate small { font-size: 12px; font-weight: 800; color: #e8d8f0; }
.heroPlate i { font-style: normal; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold2); opacity: 0.8; }
/* painel de jogar sobe por cima do fim da capa */
.playGrid { position: relative; z-index: 3; margin-top: -26px; }
.playGrid .dPanel:first-child { margin-top: 0; } .playGrid .dPanel { margin-top: 0; }
.dPanel { background: linear-gradient(180deg, rgba(30,18,44,0.9), rgba(14,8,22,0.92)); box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); }
/* cartas de classe com a cor da classe */
#home #classPick { gap: 10px; }
#home .classCard { position: relative; padding: 8px 6px 10px; border-radius: 14px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cc) 30%, transparent), rgba(14,8,22,0.95) 72%); border: 2px solid rgba(255,255,255,0.08); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
#home .classCard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cc) 70%, transparent); box-shadow: 0 10px 20px rgba(0,0,0,0.45), 0 0 14px color-mix(in srgb, var(--cc) 40%, transparent); }
#home .classCard.on { border-color: var(--cc); box-shadow: 0 0 22px var(--cc), inset 0 0 18px color-mix(in srgb, var(--cc) 25%, transparent); transform: translateY(-4px); }
#home .classCard.on::after { content: '✓'; position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--cc); color: #120814; font: 900 12px/18px 'Nunito', sans-serif; text-align: center; }
#home .classCard .classImg { filter: drop-shadow(0 6px 6px rgba(0,0,0,0.5)); background: none; }
#home .classCard b { font-size: 13px; }
/* herói escolhido */
.classInfo { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 18%, transparent), rgba(0,0,0,0.25)); border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.classInfo:empty { display: none; }
.ciHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ciHead b { font: 900 20px 'Cinzel', serif; color: #fff; text-shadow: 0 0 12px var(--cc); }
.ciTags { display: flex; flex-wrap: wrap; gap: 6px; } .ciTags i { font-style: normal; font: 800 12px 'Nunito', sans-serif; color: #efe6ff; padding: 3px 9px; border-radius: 8px; background: rgba(0,0,0,0.35); }
.ciRole { margin: 6px 0 10px; font-size: 14px; color: #e0d4f0; }
.ciSkills { display: flex; flex-wrap: wrap; gap: 8px; }
.ciSk { display: flex; flex-direction: column; align-items: center; width: 54px; padding: 5px 0 4px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #4a2a3a, #1e1020 75%); border: 2px solid #d86a5a; cursor: help; transition: transform 0.12s; }
.ciSk:hover { transform: translateY(-3px); }
.ciSk.kind-cc { border-color: #f0c040; background: radial-gradient(circle at 50% 35%, #5a4a22, #2a200e 75%); }
.ciSk.kind-def { border-color: #5ad0a0; background: radial-gradient(circle at 50% 35%, #1e4a3e, #0e2620 75%); }
.ciSk.kind-passive { border-color: #ffd24a; border-style: dashed; background: radial-gradient(circle at 50% 35%, #4a3a18, #1c1408 75%); }
.ciSk em { font-style: normal; font-size: 24px; filter: drop-shadow(0 2px 2px #000); } .ciSk small { font: 800 10px 'Nunito', sans-serif; color: #ffe0b0; }
/* como funciona */
.how .howGrid div { position: relative; padding: 16px 14px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)); border: 1px solid rgba(242,194,48,0.18); transition: transform 0.15s, border-color 0.15s; }
.how .howGrid div:hover { transform: translateY(-3px); border-color: rgba(242,194,48,0.5); }
.howIco { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; font-style: normal; font-size: 24px; background: radial-gradient(circle at 35% 30%, #ffe89a, #d89a20 70%); box-shadow: 0 0 18px rgba(242,194,48,0.4), inset 0 -3px 0 rgba(0,0,0,0.2); }
.how .howGrid div:nth-child(2) .howIco { background: radial-gradient(circle at 35% 30%, #d0a8ff, #7a3ad8 70%); box-shadow: 0 0 18px rgba(160,100,255,0.4); }
.how .howGrid div:nth-child(3) .howIco { background: radial-gradient(circle at 35% 30%, #bfeaff, #3a9ad8 70%); box-shadow: 0 0 18px rgba(90,180,255,0.4); }
.how .howGrid div:nth-child(4) .howIco { background: radial-gradient(circle at 35% 30%, #ff9a8a, #b8142a 70%); box-shadow: 0 0 18px rgba(216,40,60,0.45); }
.how .howGrid b { font-size: 16px; }
/* rodapé */
.homeFoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin-top: 28px; padding: 18px 4px 0; border-top: 1px solid var(--line); color: var(--mut); font-size: 12px; }
.homeFoot .brand.small { margin: 0; font-size: 16px; }
/* telas médias e estreitas: texto em cima, arte embaixo */
@media (max-width: 1100px) {
  .heroText h1 { font-size: 50px; }
}
@media (max-width: 899px) {
  .hero { height: 560px; }
  .hero::after { background: linear-gradient(180deg, rgba(9,4,16,0.9) 0%, rgba(9,4,16,0.6) 38%, rgba(9,4,16,0) 60%); }
  .heroInner { align-items: flex-start; justify-content: center; padding-top: 22px; }
  .heroText { text-align: center; max-width: 560px; }
  .heroChips, .heroCtas { justify-content: center; }
  .heroText .heroLead { font-size: 15px; }
  .heroPlate { bottom: 18px; }
}
@media (max-width: 640px) {
  .hero { height: 520px; margin-top: -12px; }
  .heroKicker { font-size: 10px; letter-spacing: 2px; }
  .heroText h1 { font-size: 30px; margin: 10px 0 6px; } .heroText h1 small { font-size: 16px; }
  .heroText .heroLead { font-size: 13px; }
  .heroChips { margin: 10px 0 12px; gap: 5px; } .heroChips span { font-size: 11px; padding: 4px 8px; }
  #home .heroCtas .bigBtn { font-size: 15px; padding: 10px 16px; }
  .heroText .onlineInfo { display: none; }
  .heroPlate { padding: 5px 14px; } .heroPlate b { font-size: 16px; }
  .playGrid { margin-top: -20px; }
  .ciSk { width: 46px; } .ciSk em { font-size: 20px; }
}
.hero canvas { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.hero::after { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.playGrid { align-items: start; }
.gRoad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gRoad span { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(242,194,48,0.18); font: 800 12px 'Nunito', sans-serif; color: #fff; }
.gRoad b { color: var(--gold2); font-size: 11px; }
.gHeroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gHeroes span { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 6px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgba(90,60,130,0.55), rgba(14,8,22,0.9)); border: 1px solid rgba(255,255,255,0.08); text-align: center; }
.gHeroes img { width: 54px; height: 60px; image-rendering: pixelated; filter: saturate(0.7); }
.gHeroes b { font-size: 10px; color: #fff; line-height: 1.1; } .gHeroes small { font-size: 9px; color: var(--gold2); font-weight: 800; }
.sideCard .gBtn { width: 100%; margin-top: 14px; }
.sideCard .linkBtn { display: block; margin: 8px auto 0; }

/* ================= logotipo: os dois H (espadas unidas por uma gema) ligam as três palavras ================= */
.logoSprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: inline-flex; align-items: center; font-family: 'Cinzel', Georgia, serif; font-weight: 900; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.logo b { color: #fff; font-weight: 900; text-shadow: 0 0.05em 0 #2a0810, 0 0 0.3em rgba(0,0,0,0.6); }
.logo b.m { color: var(--blood); text-shadow: 0 0.05em 0 #2a0810, 0 0 0.35em rgba(216,40,60,0.75); }
.logo i { font-style: normal; font-size: 0.5em; color: var(--gold); align-self: flex-end; margin: 0 0 0.18em 0.08em; text-shadow: 0 0 0.4em rgba(242,194,48,0.6); }
.logo .lh { height: 1.36em; width: 0.91em; margin: -0.22em -0.02em -0.14em; flex: none; overflow: visible; filter: drop-shadow(0 0 0.14em rgba(242,194,48,0.55)) drop-shadow(0 0.04em 0.04em rgba(0,0,0,0.6)); transition: transform 0.25s; }
.logo .lh.h1 { --gem: #e8203a; } .logo .lh.h2 { --gem: #5ad0ff; }
.logo:hover .lh { transform: translateY(-0.04em) rotate(-3deg); } .logo:hover .lh.h2 { transform: translateY(-0.04em) rotate(3deg); }
.brand .logo { font-size: 1em; }
.brand b, .brand b span { color: inherit; text-shadow: none; }
.brand .logo b { color: #fff; text-shadow: 0 0 0.3em rgba(0,0,0,0.6); } .brand .logo b.m { color: var(--blood); text-shadow: 0 0 0.35em rgba(216,40,60,0.75); }
.heroText h1 .logo { font-size: 0.9em; letter-spacing: 0.01em; }
.heroText h1 .logo b { text-shadow: 0 0.06em 0 #3a0a14, 0 0 0.5em rgba(216,40,60,0.45), 0 0.12em 0.4em rgba(0,0,0,0.8); }
.heroText h1 .logo .lh { filter: drop-shadow(0 0 0.12em rgba(242,194,48,0.7)) drop-shadow(0 0.05em 0.06em rgba(0,0,0,0.7)); }
@media (max-width: 640px) {
  .hero { height: 470px; }
  .heroChips, .heroCtas { display: none; } /* os mesmos botões estão logo abaixo, no painel de jogar */
  .heroText .heroLead { font-size: 12.5px; line-height: 1.4; }
}

/* =================== Interface em pixel art (molduras e ícones do PixelLab: assets/ui/, tools/pixellab-ui.mjs) =================== */
/* Madeira com pergaminho nos painéis do HUD e nas janelas; madeira com ardósia na barra de habilidades, na conversa, nas
   dicas e nas telas de placar e fim; botões, espaços e botões redondos do mesmo kit. As molduras são de 9 partes
   (border-image): cobrem a borda de dentro e saem um pouco para fora, sem mudar o tamanho das caixas. */
:is(#hud, .window) .panel, .window { background: none; border: 1px solid transparent; border-radius: 0; box-shadow: none; border-image: url(../assets/ui/panel.png) 12 fill / 12px / 4px stretch; image-rendering: pixelated; color: #3a2410; }
.window { padding: 8px 8px 11px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
:is(#hud, .window) #chatBox { border-image: url(../assets/ui/dark.png) 11 / 11px / 4px stretch; background: rgba(28,32,44,0.62); background-clip: padding-box; }
body.touch.phone #hud #chatBox { background: rgba(28,32,44,0.4); }
#tooltip, .boardBox, .endBox, .lobbyBox, #death .deathBox { background: none; border: 1px solid transparent; border-radius: 0; border-image: url(../assets/ui/dark.png) 11 fill / 11px / 4px stretch; image-rendering: pixelated; }
#tooltip { padding: 8px 10px; color: #f0e6d0; }
#tooltip b { color: #ffd86a; }
.boardBox, .endBox { box-shadow: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)); }
#death .deathBox { background: rgba(60,8,8,0.55); background-clip: padding-box; border-image: url(../assets/ui/dark.png) 11 / 11px / 4px stretch; }
/* textos sobre o pergaminho */
:is(#hud, .window) .charName, :is(#hud, .window) .mapTitle, :is(#hud, .window) #questTracker .qprog, :is(#hud, .window) .skInfo b, :is(#hud, .window) .bagTitle, :is(#hud, .window) .talentCard b, :is(#hud, .window) .statRow b { color: #3a2410; }
:is(#hud, .window) .charLv, :is(#hud, .window) .mapTitle span, :is(#hud, .window) #questTracker small, :is(#hud, .window) .skInfo small, :is(#hud, .window) .statRow .ad, :is(#hud, .window) .talentCard small, :is(#hud, .window) .hint { color: #7a5634; }
:is(#hud, .window) #questTracker h4 { color: #9a3a0a; }
:is(#hud, .window) .charName .job { background: #6b4424; color: #ffe8b0; border-radius: 0; box-shadow: 0 0 0 1px #2a180a; }
:is(#hud, .window) #portrait { border: 2px solid #2a180a; box-shadow: 0 0 0 2px #c89a4a, 0 0 0 4px #4a2e16; background: radial-gradient(circle at 40% 35%, #f8e8c0, #b8905a); }
:is(#hud, .window) #minimap { border: 2px solid #4a2e16; border-radius: 0; box-shadow: 0 0 0 1px #c89a4a; }
/* barras de HP e EXP: madeira, recheio em faixas (sem degradê suave) */
:is(#hud, .window) .bar { border-radius: 0; background: #1e1a18; border: 2px solid #5a3a1e; box-shadow: 0 0 0 1px #1a0e04, inset 0 2px 0 rgba(0,0,0,0.45); }
:is(#hud, .window) .bar.hp .fill { background: linear-gradient(180deg, #a8ff90 0 22%, #45c24e 22% 68%, #23883a 68%); }
:is(#hud, .window) .bar.hp.low .fill { background: linear-gradient(180deg, #ffb09a 0 22%, #e0402c 22% 68%, #9a2016 68%); }
:is(#hud, .window) .bar.sp .fill { background: linear-gradient(180deg, #b8e0ff 0 22%, #3a8ae8 22% 68%, #2456a8 68%); }
:is(#hud, .window) #expBar { background: #1a120c; border-top: 2px solid #6b4424; box-shadow: 0 -1px 0 #2a180a; }
:is(#hud, .window) #expBar .fill { background: linear-gradient(180deg, #fff0a0 0 25%, #f2b020 25% 70%, #b87a10 70%); }
/* janelas: cabeçalho de madeira com o título em dourado */
:is(#hud, .window) .winHead { background: #5a3a1e; border-radius: 0; margin: 0 0 6px; padding: 5px 8px 5px 10px; color: #ffe39a; text-shadow: 1px 1px 0 #1a0e04; box-shadow: inset 0 2px 0 #8e6034, inset 0 -2px 0 #3a2412, 0 0 0 2px #2a180a; }
:is(#hud, .window) .winHead .close { width: 22px; height: 20px; padding: 0; border: 1px solid transparent; border-radius: 0; background: none; border-image: url(../assets/ui/btn-red.png) 6 fill / 6px stretch; color: #fff; font: bold 13px/14px 'Trebuchet MS', sans-serif; text-shadow: 1px 1px 0 #3a0a06; }
:is(#hud, .window) .winHead .close:hover { background: none; filter: brightness(1.25); }
:is(#hud, .window) .winBody { color: #3a2410; }
/* botões */
:is(#hud, .window) .btn, :is(#hud, .window) .plus, :is(#hud, .window) #ptsQuick button, :is(#hud, .window) #talentBtn, :is(#hud, .window) #autoAttrBtn, :is(#hud, .window) #castModeBtn, .endBox .bigBtn, .lobbyBox .bigBtn, .lobbyBox .btn, :is(#hud, .window) .tab, :is(#hud, .window) .keyBtn { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/btn.png) 6 fill / 6px stretch; image-rendering: pixelated; color: #fff; text-shadow: 1px 1px 0 #0c1c3a; }
:is(#hud, .window) .btn { padding: 5px 12px; }
:is(#hud, .window) .btn.gold, :is(#hud, .window) #ptsQuick button, .endBox .bigBtn.alt, .lobbyBox .bigBtn.alt { border-image-source: url(../assets/ui/btn-gold.png); color: #3a2000; text-shadow: 1px 1px 0 rgba(255,244,190,0.55); }
:is(#hud, .window) .btn.red, .endBox .bigBtn.red, .lobbyBox .bigBtn.red, .lobbyBox .btn.red { border-image-source: url(../assets/ui/btn-red.png); text-shadow: 1px 1px 0 #3a0a06; }
:is(#hud, .window) #autoAttrBtn, :is(#hud, .window) #castModeBtn, :is(#hud, .window) .tab { border-image-source: url(../assets/ui/btn-wood.png); color: #f6e2b4; text-shadow: 1px 1px 0 #1a0e04; }
:is(#hud, .window) #autoAttrBtn.off { color: #b8a484; }
:is(#hud, .window) .tab.on { border-image-source: url(../assets/ui/btn-gold.png); color: #3a2000; text-shadow: none; }
:is(#hud, .window) #talentBtn { border-image-source: url(../assets/ui/btn-green.png); text-shadow: 1px 1px 0 #0a2a08; }
:is(#hud, .window) .btn:hover, :is(#hud, .window) .plus:hover:not(:disabled), :is(#hud, .window) .tab:hover, .endBox .bigBtn:hover, .lobbyBox .bigBtn:hover { filter: brightness(1.15); }
:is(#hud, .window) .btn:disabled, :is(#hud, .window) .plus:disabled { filter: grayscale(0.85) brightness(0.9); opacity: 0.55; }
:is(#hud, .window) .plus { width: 24px; height: 22px; padding: 0; font: bold 14px/16px 'Trebuchet MS', sans-serif; }
:is(#hud, .window) #ptsQuick { border-radius: 0; background: rgba(30,18,8,0.88); border: 2px solid #6b4424; box-shadow: 0 0 0 1px #1a0e04; }
:is(#hud, .window) .keyBtn.wait { border-image-source: url(../assets/ui/btn-gold.png); color: #3a2000; }
/* linhas dentro das janelas */
:is(#hud, .window) .statRow, :is(#hud, .window) .skRow, :is(#hud, .window) .shopRow, :is(#hud, .window) .albumSum { border-radius: 0; background: rgba(255,246,220,0.55); border: 1px solid #c9a46a; }
:is(#hud, .window) .optRow, :is(#hud, .window) .optKeys { border-bottom-color: #c9a46a; }
:is(#hud, .window) .shopRow.cur { background: #fff3c8; border-color: #b8801a; }
:is(#hud, .window) .skHead { border-radius: 0; background: linear-gradient(90deg, var(--cc), rgba(255,255,255,0)); box-shadow: inset 2px 0 0 #3a2410; }
:is(#hud, .window) .talentCard { border-radius: 0; background: rgba(255,246,220,0.7); border: 2px solid #8e6034; box-shadow: 0 0 0 1px #2a180a; }
:is(#hud, .window) .talentCard:hover { border-color: #f2c230; box-shadow: 0 0 0 1px #2a180a, 0 0 12px #f2c230; }
:is(#hud, .window) .tag { border-radius: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
/* espaços: habilidades, itens da barra e da mochila (madeira com ardósia) */
:is(#hud, .window) #hotbar { border: 1px solid transparent; border-radius: 0; background: rgba(24,28,38,0.72); background-clip: padding-box; box-shadow: none; border-image: url(../assets/ui/dark.png) 11 / 11px / 4px stretch; image-rendering: pixelated; }
body.touch #hud #hotbar { border: none; border-image: none; background: none; }
:is(#hud, .window) #hotbar .slot, :is(#hud, .window) .invCell, :is(#hud, .window) .skIcon, :is(#hud, .window) .passiveSlot { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/slot.png) 7 fill / 7px stretch; image-rendering: pixelated; }
:is(#hud, .window) #hotbar .slot.skill, :is(#hud, .window) #hotbar .slot.item, :is(#hud, .window) #hotbar .slot.skill.kind-cc, :is(#hud, .window) #hotbar .slot.skill.kind-def { background: none; border-color: transparent; }
:is(#hud, .window) #hotbar .slot:hover { border-color: transparent; filter: brightness(1.15); }
:is(#hud, .window) #hotbar .slot.queued { box-shadow: none; outline: 2px solid #fff4c0; outline-offset: 1px; }
:is(#hud, .window) #hotbar .slot .cd { border-radius: 0; }
:is(#hud, .window) #hotbar .slot .key { border-radius: 0; border-color: #c89a4a; background: #2a180a; }
:is(#hud, .window) .passiveSlot.on { border-color: transparent; background: none; box-shadow: none; filter: drop-shadow(0 0 6px rgba(255,210,74,0.85)); }
:is(#hud, .window) .invCell.it-mat, :is(#hud, .window) .invCell.it-buff, :is(#hud, .window) .invCell.card { background: none; }
:is(#hud, .window) .invCell .qty { color: #fff; text-shadow: 1px 1px 0 #000, 0 0 2px #000; right: 5px; bottom: 3px; }
:is(#hud, .window) .invCell:hover { border-color: transparent; box-shadow: none; filter: brightness(1.2); }
/* no celular as habilidades são botões redondos em arco: sem a moldura quadrada */
body.touch #hud #hotbar .slot { border-image: none; border-radius: 50%; border: 3px solid #6b4424; box-shadow: 0 0 0 2px #1a0e04, 0 3px 8px rgba(0,0,0,0.5); background: radial-gradient(circle at 50% 35%, #3a4050, #161a24 75%); }
body.touch #hud #hotbar .slot.skill { border-color: #c89a4a; }
/* botões redondos e do menu lateral */
:is(#hud, .window) .roundBtn { border: none; border-radius: 50%; background: url(../assets/ui/round.png) center / 100% 100% no-repeat; image-rendering: pixelated; box-shadow: 0 3px 6px rgba(0,0,0,0.4); color: #3a2410; }
:is(#hud, .window) .roundBtn.on { background-image: url(../assets/ui/round.png); filter: brightness(1.15) saturate(1.3); }
:is(#hud, .window) .menuBtn { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/btn-wood.png) 6 fill / 6px stretch; image-rendering: pixelated; color: #f6e2b4; text-shadow: 1px 1px 0 #1a0e04; }
:is(#hud, .window) .menuBtn:hover { background: none; filter: brightness(1.18); }
:is(#hud, .window) .emoteBtn { border-radius: 0; border: 2px solid #5a3a1e; background: rgba(30,20,12,0.82); box-shadow: 0 0 0 1px #1a0e04; }
:is(#hud, .window) .emoteBtn:hover { border-color: #f2c230; }
:is(#hud, .window) .feedRow { border-radius: 0; background: rgba(28,18,10,0.82); box-shadow: 0 0 0 2px #5a3a1e, 0 0 0 3px #1a0e04; }
#tBoard { border-radius: 0 !important; border: 2px solid #6b4424 !important; background: rgba(30,20,12,0.85) !important; box-shadow: 0 0 0 1px #1a0e04; }
/* placar do topo: moldura de madeira */
:is(#hud, .window) #scoreTop { border-radius: 0; overflow: visible; border: 1px solid transparent; border-image: url(../assets/ui/dark.png) 11 / 8px / 5px stretch; image-rendering: pixelated; }
/* ícones em pixel art (js/ui.js: ico) */
.ico { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; background-image: var(--icons); background-size: var(--icons-bs); background-repeat: no-repeat; image-rendering: pixelated; font-style: normal; }
.ico.sm { width: 1.25em; height: 1.25em; }
#hotbar .slot .sk .ico { width: 42px; height: 42px; vertical-align: top; }
#hotbar .slot .sk:has(.ico), .passiveSlot .sk:has(.ico), #buffBar .buff .bi:has(.ico) { filter: none; font-size: 0; line-height: 0; }
#hotbar .slot.oncd .sk .ico { filter: grayscale(0.85) brightness(0.55); }
.passiveSlot .sk .ico { width: 28px; height: 28px; vertical-align: top; }
.skIcon .ico { width: 26px; height: 26px; }
.talentCard span .ico { width: 48px; height: 48px; }
#buffBar .buff .bi .ico { width: 30px; height: 30px; vertical-align: top; border-radius: 50%; }
.menuBtn span .ico { width: 22px; height: 22px; vertical-align: top; }
body.touch #sideMenu .menuBtn span .ico { width: 26px; height: 26px; }
body.touch.phone #sideMenu .menuBtn span .ico { width: 22px; height: 22px; }
#tBoard .ico { width: 24px; height: 24px; vertical-align: middle; }
body.touch #hotbar .slot .sk:has(.ico) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
body.touch #hotbar .slot .sk .ico { width: 74%; height: 74%; border-radius: 50%; }
body.touch #hud #hotbar .slot .cd { border-radius: 50%; }
:is(#hud, .window) .slot img, :is(#hud, .window) .invCell img, :is(#hud, .window) .shopRow img, :is(#hud, .window) .shopRow .cost img { image-rendering: pixelated; }
@media (max-width: 900px) { #hotbar .slot .sk .ico { width: 32px; height: 32px; } }
#buffBar .buff i { bottom: auto; height: 16px; }

/* =================== Página principal em pixel art (mais enxuta) =================== */
/* Painéis com a moldura de madeira do jogo, botões do kit do PixelLab, títulos em Pixelify Sans e ícones em pixel art. */
#home { --px: 'Tiny5', 'Nunito', sans-serif; } /* Tiny5: pixelada e com dígitos legíveis (a Pixelify confundia 3, 5 e 8) */
#home .dPanel, #home .authBox { border: 1px solid transparent; border-radius: 0; border-image: url(../assets/ui/dark.png) 11 / 11px / 4px stretch; image-rendering: pixelated; background: rgba(18,12,26,0.88); background-clip: padding-box; box-shadow: none; backdrop-filter: none; }
#home .dPanel h2, #home .dPanel h3, #home .dPanel h4, #home .heroesHead h2 { font-family: var(--px); font-weight: 400; letter-spacing: 0.5px; }
#home .dPanel h2, #home .heroesHead h2 { font-size: 26px; } #home .dPanel h3 { font-size: 19px; } #home .dPanel h4 { font-size: 15px; }
/* barra do topo e abas: texto simples, a aba atual sublinhada em dourado */
#home .navBtn { font: 400 15px var(--px); border-radius: 0; padding: 8px 12px; letter-spacing: 0.3px; }
#home .navBtn.on { background: none; color: var(--gold2); box-shadow: inset 0 -3px 0 var(--gold); }
#home .navBtn:hover { background: none; color: #fff; }
#home .accBtn { border-radius: 0; border: 2px solid #5a3a1e; box-shadow: 0 0 0 1px #0a0604; background: rgba(30,20,12,0.7); }
#home .accBtn:hover { border-color: var(--gold); }
#home .coinsTag, #home .onlineInfo { border-radius: 0; }
/* capa: só a arte, o nome e quem está online */
#home .hero { height: 440px; }
#home .heroText { top: 26px; }
#home .heroLead { font: 400 17px var(--px); color: #ffe6d0; letter-spacing: 0.3px; }
/* botões */
#home .bigBtn, #home .btn { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; border-image: url(../assets/ui/btn.png) 6 fill / 6px stretch; image-rendering: pixelated; color: #fff; text-shadow: 1px 1px 0 #0c1c3a; font-family: var(--px); font-weight: 400; letter-spacing: 0.4px; transform: none; }
#home .bigBtn { padding: 11px 22px; font-size: 16px; }
#home .bigBtn.hot { border-image-source: url(../assets/ui/btn-red.png); text-shadow: 1px 1px 0 #3a0a06; font-size: 18px; padding: 12px 28px; }
#home .bigBtn.alt, #home .btn.gold { border-image-source: url(../assets/ui/btn-gold.png); color: #3a2000; text-shadow: 1px 1px 0 rgba(255,244,190,0.55); }
#home .btn.gemBtn { border-image-source: url(../assets/ui/btn-gem.png); color: #06243a; text-shadow: none; }
#home .btn.red { border-image-source: url(../assets/ui/btn-red.png); }
#home .bigBtn:hover:not(:disabled), #home .btn:hover:not(:disabled) { filter: brightness(1.15); transform: none; }
#home .bigBtn:disabled, #home .btn:disabled { filter: grayscale(0.8) brightness(0.85); opacity: 0.6; }
#home .linkBtn { font-family: var(--px); }
/* campos, modo, dificuldade e classes: caixas de madeira escura, a escolhida em dourado */
#home #nameInput, #home #codeInput, #home .authBox input { border-radius: 0; border: 2px solid #5a3a1e; box-shadow: 0 0 0 1px #0a0604; background: rgba(8,6,12,0.7); font-family: var(--px); font-weight: 500; }
#home .modeBtn { border-radius: 0; border: 2px solid #5a3a1e; box-shadow: 0 0 0 1px #0a0604; background: rgba(8,6,12,0.6); font-family: var(--px); }
#home .modeBtn.on { border-color: var(--gold); box-shadow: 0 0 0 1px #0a0604, 0 0 12px rgba(242,194,48,0.45); background: rgba(60,40,10,0.55); }
#home .diffBtn { width: 64px; }
#home .diffBtn b.st { font-size: 11px; letter-spacing: -0.5px; }
#home .diffBtn.on { border-color: var(--dc); box-shadow: 0 0 0 1px #0a0604, 0 0 12px color-mix(in srgb, var(--dc) 55%, transparent); }
#home .playCard label { font-family: var(--px); font-weight: 400; letter-spacing: 0.8px; }
#home .classCard { border-radius: 0; border: 1px solid transparent; border-image: url(../assets/ui/slot.png) 7 fill / 7px stretch; background: none; image-rendering: pixelated; padding: 8px 9px 10px; text-align: center; }
#home .classCard > div { width: 100%; min-width: 0; } /* nome e tipo centralizados dentro da moldura, sem encostar na borda */
#home .classCard.on { outline: 2px solid var(--cc); outline-offset: 1px; box-shadow: 0 0 16px var(--cc); }
#home .classCard b { font-family: var(--px); font-weight: 400; font-size: 13px; line-height: 15px; overflow-wrap: anywhere; }
#home .classInfo { border-radius: 0; }
#home .ciSk { border-radius: 0; }
#home .ciSk em .ico { width: 30px; height: 30px; vertical-align: top; }
#home .ciSk em:has(.ico) { font-size: 0; line-height: 0; }
#home .queueBox { border-radius: 0; }
/* como funciona: uma faixa curta com ícones */
.howStrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.howStrip > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; background: rgba(18,12,26,0.75); border: 2px solid #3a2412; box-shadow: 0 0 0 1px #0a0604; }
.howStrip .hi { grid-row: span 2; width: 44px; height: 44px; }
.howStrip .hi .ico { width: 44px; height: 44px; vertical-align: top; }
.howStrip > div > b { font: 400 15px var(--px); color: var(--gold2); }
.howStrip small { color: #cbbfe0; font-size: 12px; line-height: 16px; }
/* como funciona: introdução curta antes da faixa */
.howIntro { margin-top: 22px; padding: 12px 14px; background: rgba(18,12,26,0.75); border: 2px solid #3a2412; box-shadow: 0 0 0 1px #0a0604; }
.howIntro h3, .howKeys h3 { font: 400 19px var(--px); color: var(--gold2); margin: 0 0 4px; letter-spacing: 0.5px; }
.howIntro p { margin: 0; font-size: 13px; line-height: 18px; color: #d8cce8; } .howIntro p b, .howStrip small b { color: #fff; font-weight: 700; }
.howStrip { margin-top: 10px; }
/* comandos: um grupo por linha, rótulo à esquerda em pixel e as teclas explicadas ao lado */
.howKeys { margin-top: 14px; padding: 12px 14px; background: rgba(18,12,26,0.75); border: 2px solid #3a2412; box-shadow: 0 0 0 1px #0a0604; }
.howKeys .keys { font-size: 12px; color: #cbbfe0; margin: 0; }
.howKeys .keyGroups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-top: 6px; }
.howKeys .keyGroups > div { display: grid; grid-template-columns: 96px 1fr; column-gap: 8px; align-items: baseline; line-height: 19px; }
.howKeys .keyGroups b { font: 400 13px var(--px); color: var(--gold2); letter-spacing: 0.3px; }
.howKeys kbd { margin: 0 1px; }
.howKeys .keyNote { margin: 8px 0 0; font-size: 11px; color: var(--mut); } .howKeys .keyNote kbd { margin: 0 1px; }
/* no toque, só o bloco de toque aparece (e vice-versa) */
.howKeys .keyGroups.touchKeys { display: none; } body.touch .howKeys .keyGroups { display: none; } body.touch .howKeys .keyGroups.touchKeys { display: grid; }
@media (max-width: 1100px) { .howKeys .keyGroups { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .howKeys .keyGroups > div { grid-template-columns: 1fr; } }
/* aba Personagens */
.heroesHead { margin: 6px 0 14px; } .heroesHead h2 { color: var(--gold2); margin-bottom: 4px; }
.heroGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; }
.hcard { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; border: 1px solid transparent; border-image: url(../assets/ui/dark.png) 11 / 11px / 4px stretch; image-rendering: pixelated; background: rgba(18,12,26,0.88); background-clip: padding-box; }
.hcArt { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 150px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cc, #8a7aa8) 35%, transparent), rgba(0,0,0,0) 65%); border: 2px solid #3a2412; box-shadow: inset 0 0 0 1px #0a0604; }
.hcArt canvas, .hcArt img { image-rendering: pixelated; width: 120px; height: auto; }
.hcArt img { width: 110px; margin-bottom: 8px; filter: saturate(0.55) brightness(0.8); }
.hcType, .hcSoon { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); white-space: nowrap; font: 400 11px var(--px); padding: 1px 8px; background: #2a180a; color: #ffe39a; border: 1px solid #8e6034; font-style: normal; }
.hcSoon { background: #7a1020; color: #fff; border-color: #ff6a5a; letter-spacing: 1px; }
.hcBody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcHead { display: flex; align-items: center; gap: 10px; }
.hcHead b { font: 400 21px var(--px); color: #fff; text-shadow: 0 0 10px var(--cc, transparent); }
.hcLock { font: 400 12px var(--px); color: #ffcf8a; font-style: normal; }
.hcRole { font-size: 13px; color: #d8cce8; line-height: 17px; }
.hcStats { display: flex; flex-wrap: wrap; gap: 6px; }
.hcStats span { display: flex; flex-direction: column; min-width: 58px; padding: 3px 8px; background: rgba(0,0,0,0.35); border: 1px solid #3a2412; }
.hcStats small { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: 0.5px; } .hcStats b { font: 400 15px var(--px); color: var(--gold2); }
.hcSkills { display: flex; flex-wrap: wrap; gap: 6px; }
.hcSk { display: flex; flex-direction: column; align-items: center; cursor: help; }
.hcSk .ico { width: 40px; height: 40px; border: 2px solid #3a2412; box-shadow: 0 0 0 1px #0a0604; }
.hcSk small { font: 400 10px var(--px); color: var(--mut); margin-top: 2px; }
.hcTal { font-size: 12px; color: #d8cce8; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.hcTal small { color: var(--mut); }
.hcPlay { align-self: flex-start; margin-top: 2px; }
.hcard.soon .hcRole { color: var(--mut); } .hcUnlock { color: #ffcf8a; font: 400 12px var(--px); }
.hcard.locked .hcArt canvas { filter: grayscale(0.7) brightness(0.7); }
#home .cardsPanel .muted { margin: -4px 0 8px; }
/* trilha: marcos da dificuldade dos bots */
.roadDiff { display: flex; align-items: center; gap: 12px; margin: 6px 0 6px 38px; padding: 6px 12px; border-left: 3px solid var(--dc); background: rgba(0,0,0,0.3); }
.roadDiff .rdStars { color: var(--dc); font-size: 14px; letter-spacing: -1px; min-width: 70px; text-shadow: 0 0 8px color-mix(in srgb, var(--dc) 50%, transparent); }
.roadDiff small { display: block; color: var(--mut); font-size: 11px; } .roadDiff b { font: 400 14px var(--px); color: #fff; }
.roadDiff:not(.reached) { opacity: 0.6; }
@media (max-width: 1100px) { .howStrip { grid-template-columns: 1fr 1fr; } .heroGrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .howStrip { grid-template-columns: 1fr; } .hcard { grid-template-columns: 1fr; } .hcArt { min-height: 130px; } #home .hero { height: 230px; } #home .navBtn { font-size: 13px; padding: 6px 6px; } }
.soonHead h3 { font: 400 20px var(--px); color: var(--gold2); } .soonHead { margin: 4px 0 10px; }
.soonGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.soonGrid .hcard { grid-template-columns: 1fr; gap: 8px; padding: 12px; text-align: center; }
.soonGrid .hcArt { min-height: 118px; } .soonGrid .hcHead { justify-content: center; } .soonGrid .hcHead b { font-size: 17px; }
.soonGrid .hcRole { font-size: 12px; line-height: 15px; }
@media (max-width: 1100px) { .soonGrid { grid-template-columns: repeat(2, 1fr); } }
#home .navBtn { font-size: 16px; } #home .bigBtn { font-size: 17px; } #home .bigBtn.hot { font-size: 19px; }
@media (max-width: 640px) {
  .topbar nav { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; justify-content: flex-start; }
  .topbar nav::-webkit-scrollbar { display: none; }
  #home .navBtn { flex: none; font-size: 14px; }
  #diffPick { flex-wrap: nowrap; } #home .diffBtn { width: auto; flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
  .hcStats span { min-width: 0; flex: 1 1 28%; }
}
.hcSk small { font-size: 11px; } .hcType, .hcSoon { font-size: 12px; }
@media (max-width: 640px) { #home .diffBtn b.st { font-size: 9px; letter-spacing: -1px; } }

/* ================= logotipo em pixel art (assets/logo.png, 162x24, desenhado por tools/pixel-logo.mjs) ================= */
/* sempre em múltiplos inteiros do tamanho original, para os pixels ficarem iguais */
.logoPx { display: block; image-rendering: pixelated; width: 324px; height: 48px; max-width: none; }
.brand .logoPx { width: 324px; height: 48px; }
.heroText h1 .logoPx { width: 486px; height: 72px; margin: 4px 0 2px -3px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)); }
.homeFoot .brand.small .logoPx { width: 162px; height: 24px; }
.homeFoot .footCredits { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--mut); padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.08); } .homeFoot .footCredits b { color: var(--gold2); font-weight: 700; }
.authBox .brand.small { display: flex; justify-content: center; }
.authBox .brand.small .logoPx { width: 324px; height: 48px; }
.topbar { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 899px) { .heroText h1 .logoPx { margin: 4px auto 2px; } }
@media (max-width: 640px) { .heroText h1 .logoPx { width: 324px; height: 48px; } }
@media (max-width: 350px) { .brand .logoPx, .heroText h1 .logoPx, .authBox .brand.small .logoPx { width: 162px; height: 24px; } }
@media (max-width: 640px) { #home .diffBtn small { font-size: 9px; letter-spacing: -0.3px; } }
/* loja: pacotes e moedas em pixel art */
.ico.cur { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
#home .packCard .pi { filter: none; font-size: 34px; line-height: 0; }
#home .packCard .pi .ico { width: 96px; height: 96px; vertical-align: top; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
#home .packCard { border-radius: 0; border: 1px solid transparent; border-image: url(../assets/ui/dark.png) 11 fill / 11px / 3px stretch; image-rendering: pixelated; background: none; }
#home .rwd .ri .ico { width: 36px; height: 36px; vertical-align: top; }
#home [data-ico] .ico { width: 1.2em; height: 1.2em; vertical-align: -0.22em; }
#home .skinCard { border-radius: 0; border: 1px solid transparent; border-image: url(../assets/ui/dark.png) 11 fill / 11px / 3px stretch; background: none; image-rendering: pixelated; }
#home .skinCard.on { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 16px rgba(242,194,48,0.35); }
#home .skinCard b { font: 400 15px var(--px); }
#home .clsTab { border-radius: 0; font-family: var(--px); font-weight: 400; font-size: 13px; }