/* Seiken Online — interface dentro do jogo (tela cheia), no estilo das janelas do SD3 */
body.ingame { margin: 0; overflow: hidden; background: #000; }
body.ingame .gamebox { position: fixed; inset: 0; display: block; background: #000; }
body.ingame #screen { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }

/* janela padrão do SD3: azul em degradê com borda clara dupla */
.sd3win, .topbar .where, .menubtns button, .menutoggle, .gtoast, .areabanner, .chatinput {
  background: linear-gradient(180deg, rgba(43, 63, 154, .92) 0%, rgba(26, 39, 102, .94) 60%, rgba(18, 27, 76, .95) 100%);
  border: 2px solid #e4ecff; box-shadow: 0 0 0 1px #0a1030, inset 0 0 0 1px #5b74c9; color: #f2f5ff;
}

/* topo: local e botões de menu */
.topbar { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; z-index: 5; }
.topbar .where { border-radius: 8px; padding: 4px 10px; font-size: 13px; pointer-events: auto; }
.topbar .where b { color: #ffe28a; font-weight: 700; }
.menubtns { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; pointer-events: auto; }
.menubtns button { border-radius: 7px; padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.menubtns button:hover { border-color: #ffe28a; color: #ffe28a; }
.menubtns kbd { font-size: 10px; opacity: .65; background: #0a1030; border-radius: 3px; padding: 0 3px; }
.menubtns .exit { background: linear-gradient(#7a2633, #4d1520); border-color: #ffc7cf; }
.menubtns #count { color: #7cf2a0; }

/* faixa com o nome da área ao entrar */
.areabanner { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); padding: 10px 34px; border-radius: 10px; text-align: center; z-index: 4; pointer-events: none;
  transition: opacity .6s; opacity: 1; }
.areabanner span { display: block; font-size: 22px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 0 #0a1030; }
.areabanner small { color: #9fb0e8; font-size: 12px; }
.areabanner.out { opacity: 0; }

/* chat dentro do jogo (canto inferior esquerdo) */
.chatbox { position: absolute; left: 8px; bottom: 14px; width: min(42vw, 520px); z-index: 6; pointer-events: none; }
.chatbox .log { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; scrollbar-width: none; }
.chatbox .log::-webkit-scrollbar { display: none; }
.chatbox .log > div { font-size: 13px; line-height: 1.3; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000; padding: 1px 6px;
  background: rgba(8, 12, 40, .45); border-radius: 4px; width: fit-content; max-width: 100%; transition: opacity .8s; word-wrap: break-word; }
.chatbox .log > .sys { color: #ffe28a; font-style: italic; }
.chatbox .log > .area { color: #c8f0ff; }
.chatbox .log > .party { color: #9be7a8; }
.chatbox .log > .guild { color: #9bc8ff; }
.chatbox .log > .old { opacity: 0; }
.chatbox.typing { pointer-events: auto; }
.chatbox.typing .log { background: rgba(8, 12, 40, .55); border-radius: 6px; }
.chatbox.typing .log > .old { opacity: 1; }
.chatinput { display: flex; gap: 6px; align-items: center; border-radius: 8px; padding: 4px 6px; margin-top: 4px; pointer-events: auto; }
.chatinput .chan { font-size: 12px; font-weight: 700; color: #1a1420; background: #ffe28a; border-radius: 4px; padding: 2px 6px; }
.chatinput .chan[data-c="area"] { background: #c8f0ff; }
.chatinput .chan[data-c="party"] { background: #9be7a8; }
.chatinput .chan[data-c="guild"] { background: #9bc8ff; }
.chatinput input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; }
.chatinput input::placeholder { color: #9fb0e8; }

/* avisos (canto superior central) */
.toasts { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; z-index: 9; pointer-events: none; }
.gtoast { border-radius: 8px; padding: 5px 14px; font-size: 13px; transition: opacity .5s, transform .5s; }
.gtoast.out { opacity: 0; transform: translateY(-6px); }

/* janelas grandes centralizadas no jogo */
body.ingame .panel { top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 82vh; width: min(92vw, 780px); z-index: 8; }
body.ingame .dialog { bottom: 64px; width: min(92vw, 680px); z-index: 7; }
body.ingame .invite { top: 52px; right: 12px; z-index: 9; }
body.ingame .booting { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: #000c; color: #fff; z-index: 10; }
table.help { border-collapse: collapse; width: 100%; }
table.help td { padding: 4px 8px; border-bottom: 1px solid #ffffff1a; }
table.help kbd { background: #0d1540; border: 1px solid #4d64b8; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

@media (max-width: 800px) {
  .menubtns button kbd { display: none; }
  .chatbox { width: 70vw; }
}

/* ===== tela de entrada (login e seleção de personagem) ===== */
body.title { margin: 0; min-height: 100vh; background: #0a1030; color: #f2f5ff; overflow-x: hidden; }
body.title #bg { position: fixed; inset: 0; image-rendering: pixelated; z-index: 0; }
body.title .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,16,48,.15) 0%, rgba(10,16,48,.55) 55%, rgba(5,8,26,.92) 100%); }
body.title > *:not(#bg):not(.vignette) { position: relative; z-index: 2; }
.sd3win { border-radius: 10px; }
body.title button { cursor: pointer; font-weight: 700; border-radius: 7px; padding: 6px 14px; background: linear-gradient(#ffe28a, #e6b450); color: #1a1420; border: 1px solid #fff3c4; }
body.title button.ghost { background: #22336f; color: #dfe6ff; border-color: #4d64b8; }
body.title button.big { font-size: 1.05em; padding: 9px 22px; }
body.title button.small { padding: 3px 9px; font-size: .85em; }
body.title input { background: #0d1540; color: #fff; border: 1px solid #4d64b8; border-radius: 7px; padding: 9px 11px; font-size: 1em; outline: none; }
body.title input:focus { border-color: #ffe28a; }
body.title .error { color: #ff8a8a; min-height: 1.2em; margin-top: 6px; }
body.title .muted { color: #a9b6e0; }
.gtag { display: inline-block; background: #e6b450; color: #1a1420; font-weight: 800; border-radius: 4px; padding: 0 6px; font-size: .75em; vertical-align: middle; }

.logo { text-align: center; padding-top: 7vh; user-select: none; }
body.title.inlobby .logo { padding-top: 18px; transform: scale(.62); transform-origin: top center; margin-bottom: -40px; }
.logo-main { font: 900 clamp(48px, 9vw, 104px)/1 Georgia, 'Times New Roman', serif; letter-spacing: .08em; color: #fff3c4;
  text-shadow: 0 3px 0 #b8862c, 0 6px 0 #6b4a12, 0 10px 24px #000c; }
.logo-sub { font: 800 clamp(18px, 3vw, 32px)/1.2 Georgia, serif; letter-spacing: .6em; color: #9fd0ff; text-shadow: 0 2px 0 #1a2766, 0 6px 16px #000a; margin-top: 4px; }
.logo-tag { margin-top: 10px; color: #c6d0f0; letter-spacing: .12em; font-size: 13px; text-shadow: 0 1px 2px #000; }

.authwin { width: min(92vw, 380px); margin: 5vh auto 0; padding: 16px 18px 12px; }
.authwin form { display: grid; gap: 10px; margin-top: 12px; }
.authwin label { display: grid; gap: 4px; font-size: .85em; color: #c6d0f0; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tabs2 button:not(.on) { background: #22336f !important; color: #dfe6ff !important; border-color: #4d64b8 !important; }
.status { text-align: center; color: #c6d0f0; font-size: .85em; margin-top: 8px; }
.dotlive { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5adc7a; box-shadow: 0 0 6px #5adc7a; margin-right: 3px; }

.lobby { width: min(96vw, 1060px); margin: 0 auto; padding: 0 12px 40px; }
.lobbytop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lobbytop .status { margin: 0; }
.ttl { text-align: center; font: 700 22px Georgia, serif; color: #fff3c4; text-shadow: 0 2px 0 #1a2766, 0 4px 12px #000; margin: 14px 0; }
.slots2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); justify-content: center; gap: 14px; }
.slot2 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; text-align: center; position: relative; }
.slot2 .pedestal { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 45%, transparent) 0%, rgba(13,21,64,.6) 60%, transparent 72%); }
.slot2 canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.cname { font-size: 1.2em; font-weight: 800; color: #fff; }
.cclass { font-weight: 700; font-size: .9em; }
.clevel { color: #ffe28a; font-weight: 700; }
.cinfo { font-size: .82em; line-height: 1.4; margin-bottom: 6px; }
.slot2 .del { position: absolute; top: 8px; right: 8px; opacity: .7; }
.slot2 .del:hover { opacity: 1; }
.slot2.empty { min-height: 260px; justify-content: center; color: #c6d0f0 !important; background: rgba(13,21,64,.55) !important; border: 2px dashed #8fa5ef !important; box-shadow: none !important; font-weight: 600; }
.slot2.empty .plus { font-size: 46px; line-height: 1; color: #ffe28a; }
.slot2.empty:hover { border-color: #ffe28a !important; }

.createwin { margin-top: 18px; padding: 16px 18px; }
.createwin h3 { margin: 0 0 10px; color: #ffe28a; font-family: Georgia, serif; }
.heroes2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hero2 { display: flex !important; flex-direction: column; align-items: center; gap: 2px; background: #0d1540 !important; color: #dfe6ff !important; border: 2px solid #34488f !important; padding: 8px 4px !important; }
.hero2 canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.hero2 b { color: var(--c); }
.hero2 span { font-size: .78em; font-weight: 500; color: #a9b6e0; }
.hero2.on { border-color: #ffe28a !important; box-shadow: 0 0 0 2px #ffe28a55, inset 0 0 16px color-mix(in srgb, var(--c) 40%, transparent); }
.herodesc { min-height: 2.6em; margin: 10px 2px; color: #dfe6ff; }
.createwin .create { display: flex; gap: 8px; flex-wrap: wrap; }
.createwin .create input { flex: 1; min-width: 200px; }
.warn { padding: 10px 14px; border-color: #ff8a8a !important; margin: 10px 0; }
@media (max-width: 760px) { .heroes2 { grid-template-columns: repeat(3, 1fr); } }

/* barra de atalhos 1-9 */
.hotbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; z-index: 6; border-radius: 9px;
  background: linear-gradient(180deg, rgba(43, 63, 154, .85), rgba(18, 27, 76, .9)); border: 2px solid #e4ecff; box-shadow: 0 0 0 1px #0a1030, inset 0 0 0 1px #5b74c9; }
.hslot { position: relative; width: 40px; height: 40px; border-radius: 6px; background: #0b1238; border: 2px solid #34488f; display: grid; place-items: center; cursor: pointer; user-select: none; }
.hslot img { pointer-events: none; }
.hslot:hover { border-color: #8fa5ef; }
.hslot.over { border-color: #ffe28a; box-shadow: 0 0 8px #ffe28a88; }
.hslot.empty { opacity: .55; }
.hslot.locked img { filter: grayscale(1) brightness(.6); }
.hslot.nomp img { filter: saturate(.3) brightness(.7) hue-rotate(200deg); }
.hslot .key { position: absolute; left: 2px; top: 0; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.hslot .cnt { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.hslot .mpc { position: absolute; right: 2px; bottom: 0; font-size: 9px; color: #9fd0ff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; }
.hslot .cd { position: absolute; inset: 0; border-radius: 4px; pointer-events: none; display: grid; place-items: center; font-style: normal; }
.hslot .cd::after { content: attr(data-t); color: #fff; font-weight: 800; font-size: 13px; text-shadow: 1px 1px 0 #000; }
body.ingame .chatbox { bottom: calc(var(--px, 2px) * 46); }
body.ingame .dialog { bottom: 70px; }

/* menu de skills */
.skilllist { display: grid; gap: 6px; }
.skill { display: flex; gap: 10px; align-items: center; background: #0d1540; border: 1px solid #34488f; border-radius: 8px; padding: 6px 10px; cursor: grab; }
.skill:hover { border-color: #ffe28a; }
.skill img { border-radius: 6px; }
.skill.locked { opacity: .5; cursor: default; }
.skill .sinfo { flex: 1; }
.skill .scost { display: grid; text-align: right; }
.skill .mpv { color: #9fd0ff; font-weight: 700; }
.skill .lockt { color: #ff9a9a; font-size: .8em; }
label.vol { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
label.vol input { flex: 1; accent-color: #e6b450; }
body.ingame #hudcanvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }

/* chat nítido: fundo sólido, letra maior, sem sombras borradas */
.chatbox .log > div { font: 500 14px/1.35 "Segoe UI", system-ui, sans-serif; text-shadow: none; background: rgba(10, 16, 48, .78); border-left: 3px solid #5b74c9; padding: 2px 8px; border-radius: 3px; }
.chatbox .log > .sys { border-left-color: #e6b450; }
.chatbox .log > .area { border-left-color: #c8f0ff; }
.chatbox .log > .party { border-left-color: #7cf2a0; }
.chatbox .log > .guild { border-left-color: #9bc8ff; }
.chatinput input { font: 500 15px "Segoe UI", system-ui, sans-serif; }
.menubtns button, .topbar .where { font-family: "Segoe UI", system-ui, sans-serif; }

/* seletor de visual */
.lookpick { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; margin: 8px 0; }
.lookprev { display: grid; justify-items: center; gap: 4px; background: radial-gradient(circle at 50% 65%, #3a55b8 0%, #16235e 70%); border: 2px solid #8fa5ef; border-radius: 10px; padding: 10px; }
.lookprev canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.lookprev .lname { font-weight: 800; color: #ffe28a; text-shadow: 0 1px 0 #000; }
.lookopts { display: grid; gap: 8px; }
.lrow { display: grid; gap: 4px; }
.lrow > span { font-size: .8em; color: #9fb0e8; text-transform: uppercase; letter-spacing: .05em; }
.clsbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.clsbtns .cb { padding: 3px 9px !important; font-size: .82em !important; background: #22336f !important; color: #dfe6ff !important; border: 1px solid #4d64b8 !important; border-radius: 6px; cursor: pointer; }
.clsbtns .cb.on { background: linear-gradient(#ffe28a, #e6b450) !important; color: #1a1420 !important; border-color: #fff3c4 !important; }
.sws { display: flex; flex-wrap: wrap; gap: 5px; }
.sws .sw { width: 26px; height: 26px; padding: 0 !important; border-radius: 50% !important; background: var(--c) !important; border: 2px solid #34488f !important; cursor: pointer; color: #fff !important; font-size: 12px !important; text-shadow: 0 1px 0 #000; }
.sws .sw.on { border-color: #ffe28a !important; box-shadow: 0 0 0 2px #ffe28a88; }
@media (max-width: 640px) { .lookpick { grid-template-columns: 1fr; } }

/* atributos */
.attrs { margin: 8px 0; display: grid; gap: 4px; }
.attrhead { display: flex; justify-content: space-between; align-items: center; }
.attrs .pts { background: linear-gradient(#ffe28a, #e6b450); color: #1a1420; font-weight: 800; border-radius: 10px; padding: 1px 9px; font-size: .82em; animation: gaugepulse .7s ease-in-out infinite alternate; }
.attr { display: grid; grid-template-columns: 34px 30px 26px 1fr 30px; gap: 6px; align-items: center; background: #0d1540; border: 1px solid #34488f; border-radius: 6px; padding: 3px 6px; }
.attr .an { color: #9fb0e8; font-weight: 700; font-size: .85em; }
.attr .ad { font-size: .72em; line-height: 1.2; }
.attr .plus { padding: 1px 0 !important; width: 26px; font-weight: 900; }
.menubtns button.alert { border-color: #ffe28a; color: #ffe28a; animation: gaugepulse .7s ease-in-out infinite alternate; }

/* pontos de skill e ranks */
.skhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.skhead .pts { background: linear-gradient(#ffe28a, #e6b450); color: #1a1420; font-weight: 800; border-radius: 10px; padding: 1px 9px; font-size: .82em; animation: gaugepulse .7s ease-in-out infinite alternate; }
.skfilter { display: flex; gap: 4px; }
.skill .stars { color: #ffd34a; font-size: .8em; letter-spacing: -1px; text-shadow: 0 0 4px #a06a00; }
.skill .stars i { color: #3a4470; font-style: normal; text-shadow: none; }
.skill .sfx { color: #9ff0c8; font-size: .74em; margin-top: 1px; }
.skill.adv { border-color: #6a58b8; background: linear-gradient(90deg, #171448, #0d1540); }
.skill .advt { background: #4a3a9a; color: #e8e0ff; }
.skill.locked.adv { opacity: .75; }
.skill button.plus { width: 28px; padding: 2px 0 !important; font-weight: 900; }
.skill button.learn { padding: 3px 6px !important; font-size: .78em; }
.skill .maxr { color: #ffd34a; font-weight: 800; font-size: .75em; }
.skill.locked button { opacity: 1; }
.skill button:disabled { filter: grayscale(1); opacity: .4 !important; cursor: not-allowed; }

/* árvore de classes */
.ctree { display: grid; gap: 8px; }
.ctabs { display: flex; gap: 6px; margin-bottom: 6px; }
.cfull { overflow-x: auto; background: rgba(5, 9, 34, .55); border: 1px solid #2a3a7a; border-radius: 8px; padding: 6px; margin: 6px 0 8px; }
.cfull svg { display: block; margin: 0 auto; max-width: none; }
.cfull .ctl { fill: #ffe28a; font: bold 12px Nunito, system-ui; text-anchor: middle; }
.cfull .cln { fill: none; stroke: #34488f; stroke-width: 1.5; }
.cfull .cln.on { stroke: #7cf2a0; stroke-width: 2; }
.cfull .cnode { cursor: pointer; }
.cfull .cnode rect { fill: #0d1540; stroke: #4d64b8; stroke-width: 1.2; }
.cfull .cnode text { fill: #dfe6ff; font: 600 11.5px Nunito, system-ui; }
.cfull .cnode .cmark { text-anchor: end; fill: #7cf2a0; }
.cfull .cnode.light rect { fill: #2a2410; stroke: #c9a646; }
.cfull .cnode.dark rect { fill: #1e1236; stroke: #8f6ad8; }
.cfull .cnode.locked { opacity: .55; }
.cfull .cnode.next rect { stroke-width: 2; stroke-dasharray: 4 3; }
.cfull .cnode.have rect { stroke: #7cf2a0; stroke-width: 2; }
.cfull .cnode.cur rect { stroke: #ffd34a; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(255, 211, 74, .7)); }
.cfull .cnode.cur .cmark { fill: #ffd34a; }
.cfull .cnode.sel rect { fill: #3a3170; }
.cfull .cnode:hover rect { fill: #2a2a60; }
.crow { display: grid; gap: 8px; }
.crow.r0 { grid-template-columns: minmax(0, 1fr); max-width: 50%; margin: 0 auto; width: 100%; }
.crow.r1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crow.r2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccard { background: #0d1540; border: 1px solid #34488f; border-radius: 8px; padding: 6px 8px; display: grid; gap: 3px; align-content: start; }
.ccard.locked { opacity: .6; }
.ccard.have { border-color: #6a8ad8; }
.ccard.cur { border-color: #ffd34a; box-shadow: 0 0 10px rgba(255, 211, 74, .35) inset; }
.ccard.next { border-color: #b08ae8; }
.ccard.trial { border-color: #e0b0ff; box-shadow: 0 0 12px rgba(224, 176, 255, .35) inset; }
.ccard .chead b { color: #fff; }
.ccard .crole { color: #b8c4ec; line-height: 1.25; }
.ccard .cbonus { color: #9ff0c8; }
.ccard .cskills { display: flex; gap: 3px; flex-wrap: wrap; }
.ccard .cskills img { border-radius: 4px; }
.cbadge { font-size: .74em; font-weight: 800; border-radius: 8px; padding: 1px 8px; display: inline-block; }
.cbadge.cur { background: linear-gradient(#ffe28a, #e6b450); color: #1a1420; }
.cbadge.done { background: #2c3c78; color: #c8d4ff; }
.cbadge.lock { background: #2a2440; color: #b8a8d8; }
.tbar { position: relative; height: 14px; background: #1a1838; border: 1px solid #6a58b8; border-radius: 7px; overflow: hidden; }
.tbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a5ae0, #e0b0ff); }
.tbar span { position: relative; font-size: .7em; font-weight: 700; padding-left: 6px; color: #fff; text-shadow: 0 1px 0 #000; }
.ccard .ok { color: #9ff0c8; }
.skill .clst { background: #6a3a9a; color: #f0e0ff; }

/* trajes */
.suithead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.suithead .skfilter { margin-left: auto; }
.suits { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 5px; max-height: 236px; overflow-y: auto; padding: 2px; }
.suit { background: #0d1540; border: 1px solid #34488f; border-radius: 7px; padding: 3px; display: grid; justify-items: center; gap: 1px; cursor: pointer; text-align: center; }
.suit canvas { image-rendering: pixelated; background: radial-gradient(#2a3a7a, #0d1540 70%); border-radius: 5px; }
.suit b { font-size: .66em; line-height: 1.1; color: #e8ecff; }
.suit .sprice { font-size: .6em; color: #ffd34a; }
.suit .sprice.no { color: #ff9a9a; }
.suit .sown { font-size: .6em; color: #9ff0c8; }
.suit:not(.own) canvas { opacity: .85; }
.suit.on { border-color: #ffd34a; box-shadow: 0 0 8px rgba(255, 211, 74, .45) inset; }
.suit.own { border-color: #4a8ad8; }
.suitbuy { align-items: center; gap: 8px; background: #1a1838; border: 1px solid #6a58b8; border-radius: 7px; padding: 4px 8px; font-size: .82em; }

/* janelas dos serviços (Banco, Baú, Ferreiro, Mercado): nunca passam da tela — rolagem por dentro */
body.ingame .dialog { max-height: calc(100vh - 150px); display: flex; flex-direction: column; overflow: hidden; }
body.ingame .dialog .svc, body.ingame .dialog .qlist, body.ingame .dialog .shopwrap { min-height: 0; }
body.ingame .dialog .svc { overflow: auto; flex: 1 1 auto; }
body.ingame .dialog .shopwrap { max-height: min(42vh, 360px); overflow: auto; }
body.ingame .dialog:has(.svc) { width: min(94vw, 860px); }
.dialog .svc.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dialog .svc.two h4 { margin: 2px 0 4px; color: #ffe28a; display: flex; align-items: center; gap: 6px; }
.dialog .svc label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; }
.dialog .svc input, .dialog .svc select { background: #0d1540; color: #fff; border: 1px solid #4a5ea8; border-radius: 5px; padding: 4px 6px; font: inherit; }
.dialog .mtabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.dialog .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.dialog table.shop tr.on td { background: #ffe28a22; }
.dialog .wpn { display: flex; align-items: center; gap: 8px; font-size: 1.05em; margin-bottom: 6px; }
.dialog .sslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.dialog .sslot { background: #0d1540; border: 1px dashed #4a5ea8; border-radius: 7px; padding: 6px 8px; display: grid; gap: 2px; justify-items: start; min-height: 64px; align-content: start; }
.dialog .sslot.full { border-style: solid; border-color: #ffd34a; }
.dialog .sslot b { font-size: .9em; }
.dialog .dbtns { flex: 0 0 auto; }
.clevel { margin-top: 6px; font-size: 12px; color: #ffd76a; }

/* controle: botão focado pelo direcional */
#dialog button:focus, #panel button:focus, #panel input:focus { outline: 2px solid #ffd76a; outline-offset: 2px; }
.padwiz { background: #2a3a8a; border: 1px solid #ffd76a; padding: 6px 8px; border-radius: 6px; margin: 4px 0; }
.padkeys td:first-child { white-space: nowrap; }
/* configuração do controle */
.padsetup { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.padsetup-win { min-width: 340px; max-width: 92vw; padding: 14px 18px; }
.padsetup-win h3 { margin: 0 0 4px; }
.padask { font-size: 16px; margin: 12px 0 8px; }
.padsteps { display: flex; gap: 4px; margin-bottom: 8px; }
.padsteps i { width: 14px; height: 6px; border-radius: 3px; background: #3a4a8a; }
.padsteps i.done { background: #7cf2a0; } .padsteps i.now { background: #ffd76a; }
.padmapped td { padding: 1px 8px 1px 0; } .padmapped td:last-child { color: #9be7ff; }
/* link de volta ao site Seiken World */
body.title .sitelink { position: fixed; left: 16px; top: 14px; z-index: 5; color: #ffe28a; text-decoration: none; font: 600 14px system-ui; text-shadow: 0 1px 2px #000; background: rgba(10, 16, 48, .7); border: 1px solid #c9a227; border-radius: 6px; padding: 6px 10px; }
body.title .sitelink:hover { background: rgba(40, 50, 110, .85); }

/* ---------- tipografia do jogo: uma fonte só (Nunito, arredondada), tamanhos menores e na mesma escala ---------- */
body.ingame, body.lobbypage { --ui-font: "Nunito", "Segoe UI", system-ui, sans-serif; font-family: var(--ui-font); }
body.ingame { font-size: 13px; line-height: 1.4; }
body.ingame button, body.ingame input, body.ingame select, body.ingame textarea { font-family: var(--ui-font); }
body.ingame .panel { font-size: 13px; }
body.ingame .panel .ptabs button { font-size: 12px; padding: 3px 9px; }
body.ingame .panel h3, body.ingame .panel h4 { font-size: 14px; font-weight: 800; letter-spacing: .01em; }
body.ingame .panel button, body.ingame .dialog button, body.ingame .invite button { font-size: 12px; font-weight: 700; padding: 3px 10px; }
body.ingame .panel button.small, body.ingame .dialog button.small { font-size: 11px; padding: 2px 8px; }
body.ingame .dialog { font: 500 14px/1.45 var(--ui-font); }
body.ingame .dialog .speaker { font-size: 14px; font-weight: 800; }
body.ingame .dialog table.shop { font-size: 13px; }
body.ingame .dialog table.shop .small, body.ingame .panel .small { font-size: 11px; }
body.ingame .tag { font-size: 10.5px; font-weight: 700; }
body.ingame .bar { font-size: 10.5px; height: 14px; }
body.ingame .topbar .where { font: 600 12px var(--ui-font); }
body.ingame .menubtns button { font: 700 11.5px var(--ui-font); }
body.ingame .areabanner span { font-weight: 800; font-size: 20px; }
body.ingame .gtoast { font: 600 12.5px var(--ui-font); }
body.ingame .invite { font-size: 13px; }
/* chat: menor, sem itálico, leitura limpa */
body.ingame .chatbox .log > div { font: 600 12.5px/1.35 var(--ui-font); padding: 2px 7px; }
body.ingame .chatbox .log > .sys { font-style: normal; }
body.ingame .chatinput input { font: 600 13px var(--ui-font); }
body.ingame .chatinput .chan { font: 800 11px var(--ui-font); }
body.ingame .tradewin { font-size: 13px; }

/* menu retrátil: só o botão Menu fica na tela; a lista desce ao clicar */
.menuwrap { margin-left: auto; position: relative; pointer-events: auto; }
.menutoggle { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 4px 11px 4px 9px; font: 800 12px var(--ui-font, system-ui); cursor: pointer; position: relative; }
.menutoggle:hover, .menuwrap.open .menutoggle { border-color: #ffe28a; color: #ffe28a; }
.menutoggle .burger { display: grid; gap: 2px; width: 12px; }
.menutoggle .burger i { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.menuwrap.open .burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menuwrap.open .burger i:nth-child(2) { opacity: 0; }
.menuwrap.open .burger i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
.menutoggle .mdot { display: none; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ffd34a; box-shadow: 0 0 6px #ffd34a; }
.menutoggle.alert .mdot { display: block; animation: gaugepulse .7s ease-in-out infinite alternate; }
.menuwrap .menubtns { position: absolute; top: calc(100% + 6px); right: 0; margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; min-width: 150px; padding: 6px;
  background: linear-gradient(#22357ef2, #121d52f2); border: 2px solid #d8e2ff; border-radius: 9px; box-shadow: 0 0 0 2px #0a1030, 0 10px 24px #000a;
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.menuwrap.open .menubtns { opacity: 1; transform: none; pointer-events: auto; }
.menuwrap .menubtns button { justify-content: space-between; width: 100%; background: transparent; border: 1px solid transparent; box-shadow: none; padding: 4px 8px; }
.menuwrap .menubtns button:hover { background: #ffffff14; border-color: #ffe28a66; }
.menuwrap .menubtns .exit { margin-top: 4px; background: linear-gradient(#7a2633, #4d1520); border-color: #ffc7cf; justify-content: center; }

/* modo PK no perfil do herói */
.pkbox { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 14, 40, .5); }
.pkbox.on { border-color: #ff9a3c; background: rgba(90, 40, 10, .35); }
.pkbox.red { border-color: #ff3b3b; background: rgba(110, 10, 10, .45); }
.pkbox .redname { color: #ff3b3b; }
.pkbox button { flex: none; }