:root {
  --ink: #18251f;
  --gold: #e6b84a;
  --gold-bright: #f0cf7a;
  --bronze: #9b7830;
  --bronze-dark: #6f5422;
  --panel-bg: #161a1c;
  --panel-bg-2: #101313;
  --panel-edge: #202528;
  --hp-color: #4caf30;
  --hp-color-2: #7fd858;
  --xp-color: #2f7fce;
  --xp-color-2: #5fb3f0;
  --text: #e8e6df;
  --text-muted: #a7ab9e;
  --red: #de5b51;
}

/* Barra completa por classe: duas linhas rolaveis, sem icones fixos do Naruto. */
.skills-panel { width: min(1040px, calc(100vw - 540px)); }
.skill-bar {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(54px, auto));
  grid-auto-columns: minmax(142px, 1fr);
  grid-template-columns: none;
  gap: 6px;
  max-width: 100%;
  padding: 1px 2px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.skill-bar button { min-height: 54px; padding: 6px 7px 5px 31px; }
.skill-bar button::before { content: none; }
.skill-bar button.locked { filter: saturate(.35); opacity: .5; }
.skill-bar button.locked kbd { background: #68747b; }
@media(max-width:900px){
  .skills-panel { width: calc(100vw - 16px); max-height: 170px; overflow: visible; }
  .skill-bar { grid-template-rows: repeat(2,minmax(50px,auto)); grid-auto-columns:minmax(132px,72vw); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(ellipse at top, #1c2320 0%, #0b0d0c 70%);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  display: flex;
  justify-content: center;
  padding: 24px 12px;
}

#app { width: 100%; max-width: 1080px; }

img, canvas { image-rendering: pixelated; }

/* --- painel "OTClient shell": relevo metalico via box-shadow em camadas
   + cantos em dourado via pseudo-elementos, sem precisar de border-image --- */
.panel-bevel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-bg) 0%, var(--panel-bg-2) 100%);
  border-radius: 3px;
  padding: 10px 12px;
  box-shadow:
    inset 0 0 0 2px #0d0f0d,
    inset 0 0 0 3px var(--bronze-dark),
    inset 0 1px 0 3px rgba(208, 171, 75, 0.28),
    0 3px 0 #050605,
    0 6px 14px rgba(0, 0, 0, 0.6);
}
.panel-bevel::before,
.panel-bevel::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.panel-bevel::before {
  top: 2px; left: 2px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
}
.panel-bevel::after {
  bottom: 2px; right: 2px;
  border-bottom: 2px solid var(--bronze-dark);
  border-right: 2px solid var(--bronze-dark);
}

.top-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.top-bar h1 {
  font-family: Georgia, serif;
  font-size: 22px;
  margin: 0;
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}
.region-name {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
.controls-hint {
  font-size: 11px;
  color: var(--bronze);
  margin-left: auto;
  padding-left: 12px;
}
.map-shortcut { margin-left: auto; color: var(--gold-bright); background: #0b0e0d; border: 1px solid var(--bronze-dark); border-radius: 3px; padding: 5px 8px; }
.map-shortcut kbd { color: #111; background: var(--gold); border-radius: 2px; padding: 1px 5px; }
.map-shortcut + .controls-hint { margin-left: 0; }

#game-area {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.canvas-frame { padding: 6px; }
canvas#scene {
  display: block;
  width: 720px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 720 / 480;
  background: #000;
  border-radius: 2px;
}

#hud { display: flex; flex-direction: column; gap: 10px; min-width: 220px; flex: 1; }

.panel-title {
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.bar {
  position: relative;
  height: 16px;
  background: #0a0c0a;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px #000, inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.bar:last-child { margin-bottom: 0; }
.bar-fill { height: 100%; width: 0%; transition: width 0.2s linear; }
.hp-bar .bar-fill { background: linear-gradient(180deg, var(--hp-color-2), var(--hp-color)); }
.xp-bar .bar-fill { background: linear-gradient(180deg, var(--xp-color-2), var(--xp-color)); }
.bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; text-shadow: 0 1px 1px #000;
  font-variant-numeric: tabular-nums;
}

.stats-panel { display: flex; justify-content: space-around; font-size: 15px; text-align: center; }
.stats-panel > div { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.skill-bar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.skill-bar button { position: relative; min-height: 52px; padding: 6px 5px 5px 30px; text-align: left; color: var(--text); background: #0c1110; border: 1px solid #3c443d; border-radius: 3px; }
.skill-bar button:hover:not(:disabled) { border-color: var(--gold); background: #17201c; }
.skill-bar button:disabled { opacity: .55; }
.skill-bar kbd { position: absolute; left: 6px; top: 7px; width: 18px; height: 18px; text-align: center; color: #17150c; background: var(--gold); border-radius: 2px; }
.skill-bar strong, .skill-bar span { display: block; }
.skill-bar strong { color: var(--gold-bright); font-size: 10px; }
.skill-bar span { margin-top: 3px; color: var(--text-muted); font-size: 8px; }

.log-panel { margin-top: 12px; }
#log { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; font-size: 12.5px; }
#log li { padding: 3px 0; border-bottom: 1px solid #23282a; color: var(--text-muted); }
#log li:first-child { border-top: none; }
#log li.kill { color: #8fe37a; }
#log li.hit { color: #e0a15c; }
#log li.levelup { color: var(--gold-bright); font-weight: 600; }

#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: var(--bronze-dark); border-radius: 4px; }
#log::-webkit-scrollbar-track { background: #0a0c0a; }

.catalog-section { margin-top: 14px; }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.catalog-heading p { margin: -3px 0 8px; color: var(--text-muted); font-size: 12px; }
#catalog-search {
  width: min(300px, 100%); padding: 9px 11px; color: var(--text); background: #090b0a;
  border: 1px solid var(--bronze-dark); border-radius: 3px; outline: none;
}
#catalog-search:focus { border-color: var(--gold); }
.catalog-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 7px 0 10px; }
.catalog-filters button, .catalog-pager button, .catalog-card select {
  color: var(--text); background: #222826; border: 1px solid #4c4a35; border-radius: 3px; padding: 7px 11px;
}
.catalog-filters button.active { color: #17150c; background: var(--gold); border-color: var(--gold-bright); font-weight: 700; }
.catalog-status { color: var(--text-muted); font-size: 12px; margin-bottom: 9px; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 9px; }
.catalog-card {
  min-width: 0; padding: 8px; background: #0b0e0d; border: 1px solid #292d29; border-radius: 3px;
  display: flex; flex-direction: column; align-items: stretch;
}
.catalog-card canvas { width: 104px; height: 104px; align-self: center; background: radial-gradient(#202a25, #0c0f0d); }
.catalog-card strong { margin-top: 7px; font-family: Georgia, serif; color: var(--gold-bright); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-card span { color: var(--text-muted); font-size: 9px; margin: 3px 0 6px; }
.catalog-card select { width: 100%; padding: 4px 6px; font-size: 10px; }
.catalog-pager { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.catalog-pager button:disabled { opacity: .4; }

@media (max-width: 620px) {
  .catalog-heading { align-items: stretch; flex-direction: column; gap: 4px; }
  #catalog-search { width: 100%; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.world-map-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); padding: 24px; overflow: auto; }
.world-map-overlay[hidden] { display: none; }
.world-map-modal { width: min(1180px, 100%); margin: 0 auto; }
.world-map-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.world-map-header p { color: var(--text-muted); margin: -3px 0 10px; font-size: 12px; }
#close-world-map { color: var(--gold-bright); background: #16100e; border: 1px solid var(--bronze-dark); width: 34px; height: 34px; font-size: 24px; }
.world-map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 12px; }
.world-map-image { position: relative; align-self: start; border: 2px solid var(--bronze-dark); background: #090b0a; }
.world-map-image > img { display: block; width: 100%; height: auto; }
#world-map-pins { position: absolute; inset: 0; }
.world-pin { position: absolute; transform: translate(-50%, -100%); border: 0; background: transparent; color: #fff; padding: 0; cursor: pointer; filter: drop-shadow(0 2px 2px #000); }
.world-pin > span { display: block; width: 18px; height: 18px; margin: auto; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d53f32; border: 2px solid #fff3c7; }
.world-pin > span::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #411; transform: translate(4.5px,4.5px); }
.world-pin small { display: block; margin-top: 3px; padding: 2px 4px; white-space: nowrap; background: rgba(0,0,0,.75); font-size: 9px; }
.world-region-panel { min-height: 420px; padding: 10px; background: #090c0b; border: 1px solid #292d29; }
.world-region-panel h2 { color: var(--gold-bright); font: 18px Georgia, serif; margin: 0 0 4px; }
.world-region-panel > p { color: var(--text-muted); font-size: 11px; }
.respawn-list { display: flex; flex-direction: column; gap: 7px; max-height: 520px; overflow: auto; padding-right: 4px; }
.respawn-card { padding: 8px; border: 1px solid #34372f; background: #121614; }
.respawn-card{position:relative;min-height:132px;padding:11px 11px 44px 78px!important;border-color:#345263!important;background:linear-gradient(135deg,#10232d,#071116)!important}.respawn-portrait{position:absolute;left:9px;top:11px;width:56px;height:56px;object-fit:contain;image-rendering:pixelated;background:radial-gradient(circle,#30566a,#081318 68%);border:1px solid #426879}.threat-badge{display:inline-block;margin:0 0 4px;padding:2px 5px;color:#8fb6c7;background:#112b36;border:1px solid #345c6d;font-size:7px;letter-spacing:1px}.threat-rare{color:#74aaff;border-color:#3561a0}.threat-epic{color:#ca86ff;border-color:#74449a}.threat-legendary{color:#ffc462;border-color:#9d641d;box-shadow:0 0 10px #d77a2633}.respawn-card button{position:absolute;left:78px;right:11px;bottom:9px;background:linear-gradient(#69e7ff,#2da4c0)!important;border-color:#a9f4ff!important}
.respawn-card strong { color: var(--gold); font-size: 12px; }
.respawn-card p { color: var(--text-muted); font-size: 10px; line-height: 1.45; margin: 5px 0 7px; }
.respawn-card button { color: #17150c; background: var(--gold); border: 1px solid var(--gold-bright); padding: 5px 8px; font-weight: 700; }
@media (max-width: 850px) { .world-map-layout { grid-template-columns: 1fr; } .world-map-overlay { padding: 8px; } }

/* --- modo jogo fullscreen --- */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { display: block; padding: 0; background: #050706; }
#app { position: fixed; inset: 0; width: 100%; max-width: none; }
#game-area, .canvas-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-frame { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.canvas-frame::before, .canvas-frame::after { display: none; }
canvas#scene { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border-radius: 0; }

.top-bar {
  position: fixed; z-index: 20; top: 14px; left: 50%; transform: translateX(-50%);
  width: auto; min-width: min(980px, calc(100vw - 360px)); margin: 0; padding: 7px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(10, 14, 12, .92); backdrop-filter: blur(4px);
}
.top-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.top-menu button, #action-content button {
  color: var(--gold-bright); background: #101613; border: 1px solid var(--bronze-dark);
  border-radius: 3px; padding: 7px 11px; cursor: pointer; white-space: nowrap;
}
.top-menu button:hover { border-color: var(--gold-bright); background: #20281f; }
.top-menu .map-shortcut { margin: 0; }
.region-name { font-size: 10px; }

#hud { position: static; min-width: 0; }
.player-panel { position: fixed; z-index: 20; top: 14px; left: 14px; width: 300px; background: rgba(10,14,12,.92); }
.stats-panel { position: fixed; z-index: 20; top: 122px; left: 14px; width: 210px; padding: 7px 10px; background: rgba(10,14,12,.88); }
.skills-panel {
  position: fixed; z-index: 20; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); padding: 8px 10px; background: rgba(10,14,12,.92);
}
.skills-panel .panel-title { margin: 0 0 5px; text-align: center; font-size: 10px; }
.skill-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill-bar button { min-height: 48px; }

.log-panel { position: fixed; z-index: 15; right: 14px; bottom: 16px; width: 300px; margin: 0; opacity: .72; }
.log-panel:hover { opacity: 1; }
#log { max-height: 95px; font-size: 10px; }
.catalog-section { display: none; position: fixed; z-index: 45; inset: 70px 5vw 70px; margin: 0; overflow: auto; }
.catalog-section.catalog-open { display: block; }

.action-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.action-overlay[hidden] { display: none; }
.action-modal { width: min(480px, calc(100vw - 32px)); padding: 24px; }
.action-modal > #close-action { position: absolute; right: 10px; top: 8px; color: var(--gold); background: transparent; border: 0; font-size: 25px; cursor: pointer; }
.action-modal p { color: var(--text-muted); }
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.system-card { padding: 10px; border: 1px solid #343c35; background: #0b100e; }
.system-card strong { display: block; color: var(--gold-bright); margin-bottom: 4px; }
.system-card span { color: var(--text-muted); font-size: 12px; }
.inventory-tabs { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.inventory-list { display: grid; gap: 6px; max-height: 330px; overflow: auto; }
.inventory-item { display: flex; justify-content: space-between; padding: 8px; background: #0b100e; border: 1px solid #343c35; }
.item-catalog-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.item-catalog-list .inventory-item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:9px;min-height:64px;background:linear-gradient(135deg,#10232c,#071116);border-color:#34505e}.item-sprite{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;padding:5px;background:radial-gradient(circle,#29495a,#071116 68%);border:1px solid #3c6070;filter:drop-shadow(0 4px 4px #0008)}.item-placeholder{display:grid;place-items:center;color:#496777;font-weight:800}.inventory-item>span>b{display:block;color:#e9dcae}.inventory-tabs button.active{color:#061116!important;background:#61ddf4!important;border-color:#a8f4ff!important}.rarity-raro .item-sprite{border-color:#397dce;box-shadow:0 0 10px #397dce44}.rarity-épico .item-sprite{border-color:#9d59d7;box-shadow:0 0 12px #9d59d744}.rarity-lendário .item-sprite{border-color:#dc8d28;box-shadow:0 0 14px #dc8d2855}@media(max-width:600px){.item-catalog-list{grid-template-columns:1fr}}
.helper-option { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #343c35; }
.action-modal { max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
.action-modal h3 { margin: 16px 0 8px; color: var(--gold); font: 13px Georgia,serif; text-transform: uppercase; }
.class-card { text-align: left; cursor: pointer; color: var(--text); }
.class-card.selected { border-color: var(--gold-bright); background: linear-gradient(135deg,#302917,#121713); box-shadow: inset 0 0 18px rgba(222,177,72,.12); }
.class-card small,.inventory-item small,.system-card small { display:block; margin-top:5px; color:#8e9b91; font-size:10px; }
.inventory-item > span { display:flex; flex-direction:column; gap:2px; }
.inventory-item button,.quest-list button { align-self:center; color:#17150c; background:var(--gold); border:1px solid var(--gold-bright); padding:6px 9px; cursor:pointer; }
.item-actions { display:flex; gap:5px; align-items:center; }
.system-card button { margin-top:8px; color:#17150c; background:var(--gold); border:1px solid var(--gold-bright); padding:6px 9px; cursor:pointer; }
.system-card button:disabled { opacity:.4; cursor:not-allowed; }
.inventory-item.rarity-raro { border-left:3px solid #4a91ff; }
.inventory-item.rarity-épico { border-left:3px solid #a665ff; }
.inventory-item.rarity-lendário { border-left:3px solid #ff9d24; }
.quest-list { display:grid; gap:8px; }
.quest-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.quest-filters button{padding:7px 10px;border:1px solid #315565;background:#0b1d26;color:#b7d9e5;cursor:pointer}.quest-card{position:relative}.quest-card p{margin:4px 0;color:#b8cbd2}.quest-card .quest-status{color:#5be9ff;font-size:9px;text-transform:uppercase;letter-spacing:1px}.quest-card.status-completed{border-color:#d7a83f;box-shadow:inset 3px 0 #d7a83f}.quest-card.status-claimed{opacity:.65}.quest-card.status-active{border-color:#39778b}.quest-source{margin:7px 0;padding:7px;border-left:2px solid #4fcbe2;background:#07151b;color:#94bbc8;font-size:9px}.quest-travel{margin-right:6px!important;background:#173d4b!important;color:#8eeeff!important;border-color:#39798e!important}.respawn-card.quest-highlight{border-color:#f2bd45!important;box-shadow:0 0 18px #f2bd4566,inset 4px 0 #f2bd45}
.quest-progress { height:7px; margin:8px 0; overflow:hidden; border-radius:5px; background:#050706; }
.quest-progress i { display:block; height:100%; background:linear-gradient(90deg,#ad7f24,var(--gold-bright)); }
.quest-list article { display:grid; grid-template-columns:1fr auto; gap:5px 10px; }
.quest-list article strong,.quest-list article .quest-progress { grid-column:1/-1; }
.quest-list button:disabled { opacity:.45; cursor:not-allowed; }
.economy-balance,.boss-banner { margin-bottom:12px; padding:12px; border:1px solid var(--bronze-dark); background:linear-gradient(135deg,#211c10,#0b100e); }
.boss-banner strong,.boss-banner span { display:block; }
.boss-banner strong { color:var(--gold-bright); margin-bottom:5px; }
.boss-banner span { color:var(--text-muted); font-size:12px; }
.saga-hero,.event-card,.chakra-meter { padding:18px; border:1px solid var(--bronze-dark); background:radial-gradient(circle at 90% 10%,rgba(190,128,32,.18),transparent 42%),#0b100e; }
.saga-hero > strong,.event-card > strong { display:block; margin:5px 0 10px; color:var(--gold-bright); font:22px Georgia,serif; }
.saga-hero > span,.event-card > span,.saga-hero p,.event-card p { color:var(--text-muted); font-size:12px; }
.saga-hero > small,.event-card > small { color:#e89c4a; letter-spacing:1.4px; font-weight:700; }
.saga-hero button,.event-card button { color:#17150c; background:var(--gold); border:1px solid var(--gold-bright); padding:8px 12px; }
.saga-hero button:disabled,.event-card button:disabled { opacity:.4; }
.chakra-meter { margin-bottom:10px; }
.chakra-meter span,.chakra-meter strong { display:block; }
.chakra-meter strong { margin-top:4px; color:#71c8ff; font-size:20px; }
.chakra-meter .quest-progress i { background:linear-gradient(90deg,#2467a8,#71d8ff); }
.online-login,.chat-send,.guild-create,.online-head { display:flex; gap:8px; align-items:center; }
.online-login input,.chat-send input,.guild-create input { flex:1; min-width:0; padding:9px; color:var(--text); background:#080b0a; border:1px solid var(--bronze-dark); }
.online-login button,.chat-send button,.guild-create button,.online-head button { color:#17150c; background:var(--gold); border:1px solid var(--gold-bright); padding:8px 10px; }
.online-head { justify-content:space-between; margin-bottom:12px; padding:10px; border:1px solid var(--bronze-dark); }
.online-head > div { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.online-head strong { color:var(--gold-bright); }
.online-head span { color:var(--text-muted); }
#online-presence { color:#65dc8b; font-size:11px; white-space:nowrap; }
.online-head button.danger { color:#ffb2a6; background:#301411; border-color:#7c3028; }
.online-help { margin:9px 0 0; font-size:11px; }
.online-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:12px; }
.online-columns section { padding:10px; border:1px solid #343c35; background:#0b100e; }
.ranking-row { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid #252c27; font-size:11px; }
.ranking-row b { color:var(--gold); }
.chat-list { height:190px; overflow:auto; padding:6px; background:#070908; }
.chat-list p { margin:0 0 6px; color:var(--text-muted); font-size:11px; }
.chat-list b { color:#77d6ff; }
.guild-create { margin-top:10px; }
.sync-conflict { margin:0 0 12px; padding:12px; border:1px solid #b47c29; background:#241b0d; }
.sync-conflict strong { color:var(--gold-bright); }
.sync-conflict p { font-size:11px; line-height:1.6; }
.sync-conflict div,.account-security form { display:flex; gap:8px; }
.account-security,.recovery-box { margin-top:12px; padding:10px; border:1px solid #343c35; background:#0b100e; }
.account-security summary { color:var(--gold); cursor:pointer; }
.account-security form { margin:10px 0; }
.account-security input { flex:1; min-width:0; padding:8px; color:var(--text); background:#080b0a; border:1px solid var(--bronze-dark); }
.recovery-box form { display:flex; gap:8px; margin-top:9px; }
.recovery-box input { flex:1; min-width:0; padding:8px; color:var(--text); background:#080b0a; border:1px solid var(--bronze-dark); }
.email-status { font-size:11px; }
.session-list > div { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #252c27; }
.session-list span,.session-list small { display:block; }
.session-list small { color:var(--text-muted); font-size:9px; }
.group-center { margin-top:12px; padding:10px; border:1px solid #343c35; background:#0b100e; }
.group-center select { padding:8px; color:var(--text); background:#080b0a; border:1px solid var(--bronze-dark); }
.invite-list > div { display:flex; gap:8px; align-items:center; padding:7px 0; border-top:1px solid #252c27; }
.invite-list > div span { flex:1; }
.admin-overview { border-color:#84651e; }

/* Interface shinobi: estrutura inspirada no cliente original, modernizada. */
:root { --ui-cyan:#63e8ff; --ui-navy:#07131c; --ui-panel:rgba(7,15,20,.94); --ui-edge:#355467; }
.top-bar { left:50%; right:auto; top:10px; width:min(1120px,calc(100vw - 360px)); min-height:58px; transform:translateX(-50%); padding:7px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; border-color:#567287; background:linear-gradient(180deg,rgba(18,35,45,.97),rgba(5,12,17,.96)); box-shadow:0 8px 28px #000b,inset 0 1px #87a8ba55; }
.client-brand { display:flex; align-items:center; gap:8px; min-width:145px; }
.client-mark,.character-orb { display:grid; place-items:center; color:#071018; background:radial-gradient(circle at 35% 30%,#fff7ba,#e4a52e 55%,#7b3c0b); border:2px solid #ffe29a; box-shadow:0 0 16px #f5b73855,inset 0 0 8px #fff8; }
.client-mark { width:34px; height:34px; border-radius:50%; font:900 19px Georgia; }
.client-brand strong,.client-brand small { display:block; white-space:nowrap; }.client-brand strong { color:#f6e8bf; letter-spacing:1.4px; font:700 14px Georgia; }.client-brand small { margin-top:2px; color:var(--ui-cyan); font-size:7px; letter-spacing:2px; }
.top-menu { flex-wrap:nowrap; justify-content:flex-start; gap:3px; overflow-x:auto; scrollbar-width:none; }.top-menu::-webkit-scrollbar{display:none}
.top-menu button { width:40px; min-width:40px; height:40px; overflow:hidden; text-indent:-999px; border-color:#405767; background-color:#0a151c; background-repeat:no-repeat; background-position:center; background-size:26px; border-radius:5px; }
.top-menu button:hover { transform:translateY(-2px); filter:brightness(1.25); box-shadow:0 5px 12px #0008; }
.top-menu #toggle-sound{background-image:url('assets/client-ui/topbuttons/audio.png')}
.top-menu #toggle-sound[aria-pressed="false"]{background-image:url('assets/client-ui/topbuttons/audio_mute.png');filter:saturate(.45);border-color:#8b4b4b}
.top-menu #open-world-map{background-image:none!important;text-indent:0!important;font-size:0}
.top-menu #open-world-map::after{content:"🗺";font-size:22px;line-height:1}
.menu-tooltip{position:fixed;z-index:120;max-width:260px;padding:8px 10px;color:#eaf8ff;background:linear-gradient(180deg,#17313d,#091820);border:1px solid #65cbe1;border-radius:5px;box-shadow:0 8px 22px #000c;font:600 11px/1.35 Arial,sans-serif;letter-spacing:.15px;pointer-events:none}
.menu-tooltip[hidden]{display:none}
#return-city{background-image:url('assets/client-ui/topbuttons/login.png')}#sell-items{background-image:url('assets/client-ui/topbuttons/unjustifiedpoints.png')}#buy-items{background-image:url('assets/client-ui/topbuttons/modulemanager.png')}#open-outfits{background-image:url('assets/client-ui/topbuttons/skills.png')}#open-backpack{background-image:url('assets/client-ui/topbuttons/inventory.png')}#open-hunt-analyzer{background-image:url('assets/client-ui/topbuttons/healthinfo.png')}#open-auto-helper{background-image:url('assets/client-ui/topbuttons/combatcontrols.png')}#open-character{background-image:url('assets/client-ui/topbuttons/skills.png')}#open-equipment{background-image:url('assets/client-ui/topbuttons/hotkeys.png')}#open-quests{background-image:url('assets/client-ui/topbuttons/questlog.png')}#open-npcs{background-image:url('assets/client-ui/topbuttons/viplist.png')}#open-bosses{background-image:url('assets/client-ui/topbuttons/battle.png')}#open-saga{background-image:url('assets/client-ui/topbuttons/motd.png')}#open-powers{background-image:url('assets/client-ui/topbuttons/spelllist.png')}#open-events{background-image:url('assets/client-ui/topbuttons/particles.png')}#open-online{background-image:url('assets/client-ui/topbuttons/login.png')}#open-world-map{background-image:url('assets/client-ui/topbuttons/minimap.png')}
#open-wiki{background-image:url('assets/client-ui/topbuttons/questlog.png')}

/* Wiki integrada: carrega os catálogos apenas quando aberta. */
.action-overlay.wiki-open .action-modal{width:min(1180px,calc(100vw - 28px));height:min(820px,calc(100dvh - 28px));max-height:none;overflow:hidden;padding:0;background:#071218}
.action-overlay.wiki-open #close-action{z-index:5;right:15px;top:12px;width:36px;height:36px;border:1px solid #7b4d4d;background:#32171d;border-radius:7px;color:#ff9ba4}
.action-overlay.wiki-open>#action-title,.action-overlay.wiki-open>#action-description{display:none}
.action-overlay.wiki-open .action-modal>#action-title,.action-overlay.wiki-open .action-modal>#action-description{display:none}
.wiki-shell{height:100%;display:grid;grid-template-rows:auto 1fr;color:#d8e7ee}
.wiki-header{padding:18px 62px 16px 22px;border-bottom:1px solid #34505c;background:linear-gradient(120deg,#102d38,#11192c)}
.wiki-header h2{margin:0;color:#f7d46d;font:700 23px Georgia,serif}.wiki-header p{margin:5px 0 12px;color:#8fb0bd}.wiki-search{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #486b7a;border-radius:8px;background:#071116;color:#fff;font-size:15px}
.wiki-body{min-height:0;display:grid;grid-template-columns:230px 1fr}.wiki-nav{overflow:auto;padding:14px 10px;border-right:1px solid #29434f;background:#091820}.wiki-nav button{display:block;width:100%;margin:2px 0;padding:9px 10px;text-align:left;border:0;border-radius:6px;background:transparent;color:#a9c1ca}.wiki-nav button:hover,.wiki-nav button.active{background:#173341;color:#ffe08a}.wiki-main{overflow:auto;padding:22px;background:radial-gradient(circle at top right,#18334455,transparent 40%),#0b151b}
.wiki-main h2{margin:0 0 8px;color:#ffe08a;font:700 25px Georgia,serif}.wiki-main h3{color:#67ddeb}.wiki-lead{color:#9fb5bd;max-width:850px}.wiki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px;margin:16px 0}.wiki-card{padding:14px;border:1px solid #2e4b57;border-radius:9px;background:#10212a;box-shadow:inset 0 1px #ffffff0a}.wiki-card h3,.wiki-card strong{margin:0 0 6px;color:#f5d675}.wiki-card p{margin:6px 0;color:#b6c8cf;line-height:1.45}.wiki-card small{display:block;color:#7895a1}.wiki-steps{counter-reset:step;display:grid;gap:10px;padding:0}.wiki-steps li{list-style:none;position:relative;padding:13px 14px 13px 50px;border-left:3px solid #54d5e5;background:#10212a}.wiki-steps li:before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:11px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f0c653;color:#172027;font-weight:bold}.wiki-table-wrap{overflow:auto;border:1px solid #294650;border-radius:8px}.wiki-table{width:100%;border-collapse:collapse;min-width:620px}.wiki-table th,.wiki-table td{padding:10px;border-bottom:1px solid #203942;text-align:left}.wiki-table th{position:sticky;top:0;background:#142a34;color:#f2cf68}.wiki-badge{display:inline-block;margin:2px;padding:3px 7px;border:1px solid #3c6573;border-radius:999px;color:#9fe8ef;font-size:11px}.wiki-catalog-search{width:min(520px,100%);padding:10px;border:1px solid #446774;border-radius:7px;background:#071116;color:white}.wiki-item{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start}.wiki-item img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}.wiki-warning{padding:12px;border-left:3px solid #e9ba4f;background:#392d142e;color:#f4dda1}.wiki-empty{padding:30px;text-align:center;color:#86a0aa}.wiki-statline{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.wiki-statline span{padding:7px 10px;border-radius:6px;background:#19313b;color:#82dfeb}
@media(max-width:720px){.action-overlay.wiki-open .action-modal{width:100vw;height:100dvh}.wiki-header{padding:14px 55px 12px 14px}.wiki-header h2{font-size:19px}.wiki-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.wiki-nav{display:flex;gap:5px;overflow-x:auto;border-right:0;border-bottom:1px solid #29434f;padding:7px}.wiki-nav button{width:auto;min-width:max-content}.wiki-main{padding:14px}.wiki-grid{grid-template-columns:1fr}}

/* Portão de autenticação obrigatório antes de entrar no mundo. */
body.auth-locked{overflow:hidden}.auth-gate{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 35%,#173d39 0,#071b18 30%,#020b0a 72%)}.auth-gate[hidden]{display:none}.auth-gate:before,.auth-gate:after{content:"";position:absolute;border:1px solid #d8af4b33;border-radius:50%;pointer-events:none}.auth-gate:before{width:min(720px,82vw);aspect-ratio:1}.auth-gate:after{width:min(520px,62vw);aspect-ratio:1;box-shadow:0 0 90px #27c3901d}.auth-card{position:relative;z-index:1;width:min(430px,calc(100vw - 28px));padding:28px;border-color:#967335;background:linear-gradient(180deg,#10242aee,#071216f5);box-shadow:0 30px 100px #000,inset 0 1px #ffe38a42}.auth-brand{text-align:center;margin-bottom:20px}.auth-seal{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 10px;border:2px solid #e3b94f;border-radius:50%;background:#d8a932;color:#12201e;font:bold 34px Georgia,serif;box-shadow:0 0 0 8px #d8a93218,0 0 40px #d8a9322f}.auth-brand h1,.auth-loading strong{display:block;margin:5px 0;color:#ffe29a;font:700 27px Georgia,serif;letter-spacing:2px}.auth-brand p,.auth-loading small{color:#78bdc2;letter-spacing:2px;text-transform:uppercase;font-size:10px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 16px;padding:4px;border:1px solid #294852;border-radius:8px;background:#061014}.auth-tabs button{padding:10px;border:0;border-radius:5px;background:transparent;color:#78939d;font-weight:bold}.auth-tabs button.active{background:#1b3d47;color:#f5d16c}.auth-form{display:grid;gap:11px}.auth-form label{display:grid;gap:5px;color:#9fb3ba;font-size:12px}.auth-form input{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid #365763;border-radius:7px;background:#050d11;color:#fff;outline:none}.auth-form input:focus{border-color:#55c9d3;box-shadow:0 0 0 3px #55c9d319}.auth-submit{padding:13px;border:1px solid #e3bd5f;border-radius:7px;background:linear-gradient(#e8c55f,#b98723);color:#17201c;font-weight:900;cursor:pointer}.auth-submit:disabled{opacity:.55}.auth-message{min-height:18px;margin:12px 0 0;color:#ffb8a6;text-align:center;font-size:12px}.auth-message.success{color:#8ee5b4}.auth-recovery{margin-top:14px;border-top:1px solid #263e47;padding-top:12px;color:#829ba5}.auth-recovery summary{cursor:pointer;text-align:center}.auth-recovery form{display:grid;gap:8px;margin-top:10px}.auth-recovery input{padding:10px;border:1px solid #365763;border-radius:6px;background:#050d11;color:#fff}.auth-recovery button{padding:9px}.auth-loading{text-align:center;padding:35px 0}.auth-footer{margin:15px 0 0;text-align:center;color:#607a83;font-size:10px}@media(max-width:520px){.auth-gate{padding:8px}.auth-card{padding:22px 16px}.auth-brand h1{font-size:23px}}
.world-status { display:flex; align-items:center; gap:5px; min-width:76px; justify-content:flex-end; }.world-status i{width:7px;height:7px;border-radius:50%;background:#5aff9c;box-shadow:0 0 9px #5aff9c}.world-status small{color:#81a3b7;font-size:7px;white-space:nowrap}.region-name{grid-column:1/-1;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding:2px 12px;border-radius:0 0 8px 8px;background:#07131ce8;border:1px solid #355467;border-top:0;color:#b7d3df;}
.player-panel { top:82px; left:14px; width:320px; min-height:72px; padding:8px; display:grid; grid-template-columns:58px 1fr; gap:9px; align-items:center; border-color:var(--ui-edge); background:var(--ui-panel); }
.character-orb { width:52px;height:52px;border-radius:8px;font:900 24px Georgia;clip-path:polygon(50% 0,95% 22%,88% 78%,50% 100%,12% 78%,5% 22%)}
.player-panel .panel-title{margin-bottom:6px;color:#f7e7b6}.player-panel .bar{height:13px;margin-bottom:4px;border-color:#486070;border-radius:7px;overflow:hidden}.player-panel .bar-text{font-size:8px}
.stats-panel { top:182px; left:14px; width:190px; border-color:var(--ui-edge); background:var(--ui-panel); }
.battle-panel,.minimap-panel { position:fixed; z-index:20; right:14px; width:220px; border-color:var(--ui-edge); background:var(--ui-panel); }
.battle-panel{top:84px;padding:9px}.battle-panel header,.minimap-head{display:flex;align-items:center;gap:7px;color:#93b4c6;font-size:9px;letter-spacing:1.5px;border-bottom:1px solid #29404d;padding-bottom:6px}.battle-panel header img{width:18px;height:18px;object-fit:none}.battle-target{padding:8px 2px 5px}.battle-target b,.battle-target small{display:block}.battle-target b{color:#f4df9e;font-size:12px}.battle-target small{margin-top:2px;color:#708d9c;font-size:8px}.target-bar{height:7px;background:#020609;border:1px solid #2b424f}.target-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#b51e2b,#ff5e46);transition:width .18s}
.minimap-panel{top:188px;padding:8px}.minimap-head{justify-content:space-between}.minimap-head button{width:21px;height:21px;color:#9fefff;background:#0a1922;border:1px solid #426476}.minimap-radar{position:relative;height:128px;margin-top:7px;overflow:hidden;background:radial-gradient(circle,#244d3b 0 2%,transparent 3%),repeating-linear-gradient(0deg,#0d2426 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,#0d2426 0 1px,#071418 1px 16px);border:1px solid #2b4855}.minimap-radar:before,.minimap-radar:after{content:'';position:absolute;background:#2d5d64}.minimap-radar:before{left:50%;top:0;width:1px;height:100%}.minimap-radar:after{top:50%;left:0;height:1px;width:100%}.radar-player{position:absolute;z-index:2;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:#ffd655;box-shadow:0 0 10px #ffd655}.minimap-radar span{position:absolute;left:7px;bottom:5px;color:#84b3ba;font-size:8px}
.condition-tray{position:fixed;z-index:20;left:14px;top:238px;display:flex;gap:4px;padding:5px;border:1px solid #304d5c;background:#071116dc}.condition-tray img{width:18px;height:18px;object-fit:none;image-rendering:pixelated}
.skills-panel { width:min(720px,calc(100vw - 540px)); padding:7px 10px 9px; border-color:#496677; background:linear-gradient(180deg,rgba(11,25,33,.97),rgba(4,10,14,.96)); }
.skill-bar button{min-height:58px;border-color:#3c5868;background:linear-gradient(180deg,#10232e,#071116);border-radius:6px}.skill-bar button:before{content:'';float:left;width:34px;height:34px;margin:0 7px 0 -23px;background:center/contain no-repeat;image-rendering:pixelated}.skill-bar button:nth-child(1):before{background-image:url('assets/sprites/spell-456-0.png')}.skill-bar button:nth-child(2):before{background-image:url('assets/sprites/spell-129-0.png')}.skill-bar button:nth-child(3):before{background-image:url('assets/sprites/spell-528-0.png')}.skill-bar button:nth-child(4):before{background-image:url('assets/sprites/spell-77-0.png')}.skill-bar strong{font-size:10px;color:#e9d28f}.skill-bar span{color:#7894a2}.skill-bar kbd{background:#5acfe8;color:#061116}
.log-panel{right:14px;bottom:16px;width:300px;border-color:#395665;background:rgba(5,13,17,.87)}
@media(max-width:900px){.top-bar{width:calc(100vw - 20px);top:6px}.client-brand{display:none}.world-status{display:none}.player-panel{top:74px;left:8px;width:245px;transform:scale(.86);transform-origin:top left}.stats-panel,.condition-tray,.battle-panel{display:none}.minimap-panel{top:74px;right:8px;width:125px}.minimap-radar{height:82px}.skills-panel{width:calc(100vw - 16px);bottom:8px}.skill-bar button:before{display:none}.log-panel{display:none}}
.action-modal{width:min(760px,calc(100vw - 32px));border-color:#486575;background:linear-gradient(180deg,#10232c,#071116 120px);box-shadow:0 26px 90px #000d,inset 0 1px #8bc2da44}.action-modal>#action-title{color:#f7e6b2;font-size:15px;letter-spacing:1.2px}.action-modal>#action-description{color:#7393a4;border-bottom:1px solid #29434f;padding-bottom:10px}
.class-showcase{margin:-4px 0 14px;padding:18px 20px;border:1px solid #39596a;background:radial-gradient(circle at 85% 50%,#27748c55,transparent 33%),linear-gradient(120deg,#122f3d,#0b1720)}.class-showcase small,.class-showcase strong,.class-showcase span{display:block}.class-showcase small{color:#5be9ff;font-size:8px;letter-spacing:2px}.class-showcase strong{margin:5px 0;color:#f7e8b9;font:700 23px Georgia}.class-showcase span{color:#84a2b1;font-size:11px}.class-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.class-card{display:flex;flex-direction:column;align-items:center;min-height:245px!important;padding:13px!important;text-align:center!important;border-color:#365263!important;background:linear-gradient(180deg,#132a35,#071116)!important}.class-card.selected{border-color:#65eaff!important;box-shadow:0 0 22px #36cce633,inset 0 0 25px #2a8aa833!important}.class-portrait{display:grid!important;place-items:center;width:90px;height:90px;margin-bottom:10px!important;border-radius:50%;background:radial-gradient(circle,#31576b,#0a1921 65%);border:1px solid #4f788b}.class-portrait img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 7px 5px #0008)}.class-card>i{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:auto;padding-top:10px}.class-card em{padding:3px 5px;color:#91bdca;background:#0b1d26;border:1px solid #294957;font:normal 7px sans-serif}.boss-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.boss-contract{position:relative;overflow:hidden;padding:12px;border:1px solid #405b68;background:linear-gradient(180deg,#172d37,#081116);text-align:center}.boss-art{position:relative;height:150px;display:grid;place-items:center;background:radial-gradient(circle,#56243d88,transparent 58%)}.boss-art img{position:relative;z-index:2;width:112px;height:112px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 8px #000)}.boss-art i{position:absolute;width:100px;height:28px;bottom:15px;border-radius:50%;background:#02050699;filter:blur(3px)}.boss-contract>small,.boss-contract>strong,.boss-contract>span{display:block}.boss-contract>small{color:#df738b;font-size:8px;letter-spacing:1.3px}.boss-contract>strong{margin:5px;color:#f7e6b4;font:700 21px Georgia}.boss-contract>span{min-height:28px;color:#809ca9;font-size:9px}.boss-contract button{margin-top:10px;padding:8px 14px;color:#081116;background:linear-gradient(#73eaff,#36a8c5);border:1px solid #b5f5ff;font-weight:800}.boss-contract button:disabled{filter:grayscale(1);opacity:.4}.boss-contract.rarity-épico{border-color:#8053b1}.boss-contract.rarity-lendário{border-color:#c47d28}.boss-contract.rarity-lendário .boss-art{background:radial-gradient(circle,#a3592555,transparent 60%)}
@media(max-width:700px){.class-grid,.boss-grid{grid-template-columns:1fr 1fr}.class-card{min-height:210px!important}.class-portrait{width:68px;height:68px}.boss-art{height:110px}.boss-art img{width:82px;height:82px}}

@media (max-width: 1050px) {
  .log-panel { display: none; }
  .top-bar { min-width: 0; width: max-content; max-width: calc(100vw - 24px); }
}
@media (max-width: 720px) {
  .top-bar { top: 104px; }
  .top-menu { flex-wrap: wrap; }
  .player-panel { width: calc(100vw - 28px); }
  .stats-panel { display: none; }
  .skill-bar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .top-bar { max-height:150px; overflow:auto; }
  .action-modal { width:calc(100vw - 18px); padding:18px 12px; }
  .system-grid { grid-template-columns:1fr; }
  .online-columns { grid-template-columns:1fr; }
  .online-login,.online-head { align-items:stretch; flex-direction:column; }
  .account-security form { flex-direction:column; }
  .recovery-box form { flex-direction:column; }
}
@media (max-width:720px){
  .top-bar{top:6px;left:10px;right:10px;width:auto;max-width:none;height:54px;min-height:54px;overflow:hidden;transform:none;display:block;padding:6px}
  .top-menu{display:flex;flex-wrap:nowrap;overflow-x:auto;height:42px;justify-content:flex-start}.top-menu button{width:38px;min-width:38px;height:38px;background-size:24px}
  .region-name{top:100%;font-size:7px}.player-panel{top:68px;width:245px}.minimap-panel{top:68px}.skills-panel{max-height:156px;overflow:hidden}.skill-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-bar button{min-height:54px}
}
.equipment-slots .system-card{display:flex;align-items:center;gap:12px}.equipment-slots .item-sprite{flex:0 0 auto}
.class-showcase input{margin-top:14px;width:min(420px,100%);padding:12px 14px;border:1px solid rgba(100,220,255,.35);border-radius:10px;background:#07131c;color:#fff}.class-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.class-portrait b{font-size:30px;color:#ffd65a}

/* Regras finais da barra dinamica (sobrescrevem o HUD legado de 4 slots). */
.skills-panel{width:min(1040px,calc(100vw - 540px));padding:7px 10px 9px}
.skill-bar{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,minmax(54px,auto));grid-auto-columns:minmax(142px,1fr);gap:6px;max-width:100%;padding:1px 2px 5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.skill-bar button{min-height:54px;padding:6px 7px 5px 31px}
.skill-bar button::before{content:none!important;background-image:none!important}
.skill-bar button.locked{filter:saturate(.35);opacity:.5}.skill-bar button.locked kbd{background:#68747b}
@media(max-width:900px){.skills-panel{width:calc(100vw - 16px);max-height:170px;overflow:visible}.skill-bar{grid-template-columns:none;grid-template-rows:repeat(2,minmax(50px,auto));grid-auto-columns:minmax(132px,72vw)}}

/* HUD modular: ícones sem repetição, técnicas compactas e janelas móveis. */
.top-menu button:hover{background-color:#20281f;background-repeat:no-repeat;background-position:center;background-size:26px}
.hud-window{touch-action:none}.hud-drag-handle{cursor:grab;user-select:none}.hud-dragging{z-index:55!important;opacity:.92}.hud-dragging .hud-drag-handle{cursor:grabbing}

.skills-panel{width:min(760px,calc(100vw - 560px));padding:5px 7px 7px}
.skills-panel .panel-title{margin:0 0 3px;font-size:8px;line-height:11px;letter-spacing:.7px}
.skill-bar{display:flex;grid-auto-flow:initial;grid-template:initial;gap:4px;max-width:100%;padding:1px 1px 4px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.skill-bar button{position:relative;flex:0 0 52px;width:52px;height:52px;min-height:52px;padding:3px;overflow:visible;border:1px solid #3c5868;border-radius:4px;background:linear-gradient(180deg,#10232e,#071116);text-align:center}
.skill-bar button::before{content:none!important;background-image:none!important}
.skill-bar .skill-icon{display:block;width:42px;height:42px;margin:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #000b)}
.skill-bar kbd{position:absolute;z-index:3;left:2px;top:2px;width:15px;height:15px;line-height:15px;border-radius:2px;background:#5acfe8;color:#061116;font:700 8px Arial}
.skill-bar strong{position:absolute;z-index:8;left:50%;bottom:calc(100% + 7px);display:none;min-width:130px;max-width:220px;padding:6px 8px;transform:translateX(-50%);color:#f6e5ad;background:#07141ceb;border:1px solid #4e788b;border-radius:4px;box-shadow:0 6px 18px #000c;font:700 9px/1.25 Arial;white-space:normal;pointer-events:none}
.skill-bar button:hover strong{display:block}
.skill-bar span{position:absolute;z-index:3;left:2px;right:2px;bottom:2px;margin:0;padding:1px 2px;overflow:hidden;color:#d8f8ff;background:#061117cf;border-radius:2px;font:700 6px/9px Arial;letter-spacing:.3px;text-overflow:ellipsis;white-space:nowrap}
.skill-bar button:disabled .skill-icon{filter:grayscale(.75) brightness(.55)}

.minimap-radar{height:128px;background:#061015}.minimap-radar::before,.minimap-radar::after,.radar-player{display:none}.minimap-radar canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.minimap-radar span{z-index:3;padding:2px 4px;background:#061015c7;border-radius:2px}

.paperdoll-panel{position:fixed;z-index:20;left:14px;top:286px;width:190px;padding:8px;border-color:var(--ui-edge);background:var(--ui-panel)}
.paperdoll-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;color:#93b4c6;border-bottom:1px solid #29404d;font-size:9px;letter-spacing:1.4px}
.paperdoll-head button{width:21px;height:21px;color:#9fefff;background:#0a1922;border:1px solid #426476}
.paperdoll-grid{position:relative;display:grid;grid-template-columns:42px 54px 42px;grid-template-rows:42px 54px 42px;justify-content:center;gap:4px;margin-top:8px}
.paperdoll-slot{display:grid;place-items:center;width:42px;height:42px;padding:2px;color:#426274;background:linear-gradient(135deg,#0c1d26,#061015);border:1px solid #355365;box-shadow:inset 0 0 8px #000;image-rendering:pixelated}
.paperdoll-slot:hover{border-color:#70e8ff}.paperdoll-slot.equipped{border-color:#b88b35;box-shadow:inset 0 0 8px #000,0 0 7px #d9a43a44}.paperdoll-slot img{max-width:34px;max-height:34px;object-fit:contain;image-rendering:pixelated}.paperdoll-slot span{font:700 10px Arial;opacity:.55}
.paperdoll-character{grid-column:2;grid-row:1/4;display:grid;place-items:center;color:#f6d36c;background:radial-gradient(circle,#244455,#07131b 68%);border:1px solid #3c5f72}.paperdoll-character span{font:700 26px Georgia}.slot-capacete{grid-column:1;grid-row:1}.slot-acessorio{grid-column:3;grid-row:1}.slot-arma{grid-column:1;grid-row:2}.slot-peitoral{grid-column:3;grid-row:2}.slot-calcas{grid-column:1;grid-row:3}.slot-botas{grid-column:3;grid-row:3}

@media(max-width:900px){.skills-panel{width:calc(100vw - 16px);max-height:76px}.skill-bar{display:flex}.skill-bar button{flex-basis:48px;width:48px;height:48px;min-height:48px}.skill-bar .skill-icon{width:38px;height:38px}.paperdoll-panel{display:none}.minimap-radar{height:82px}}
@media(max-width:720px){.hud-window{touch-action:auto}.hud-drag-handle{cursor:default}}
.helper-ai-status{margin-bottom:10px;padding:10px 12px;border:1px solid #315c6c;background:linear-gradient(135deg,#102b37,#07151d)}.helper-ai-status strong,.helper-ai-status span{display:block}.helper-ai-status strong{color:#63e8ff;font-size:9px;letter-spacing:1.4px}.helper-ai-status span{margin-top:5px;color:#8eabb8;font-size:9px;line-height:1.45}
.world-destination-tabs{display:flex;gap:8px;margin:10px 0 14px}.world-destination-tabs button{flex:1;padding:9px 12px;border:1px solid #345363;background:#0d2028;color:#bcd0d7;border-radius:6px;font-weight:700}.world-destination-tabs button.active{background:#d5a936;color:#071116;border-color:#f4d779}.town-card{border-color:#2f8c71}.town-badge{background:#153e35!important;color:#76f2c5!important;border-color:#2f8c71!important}
.town-floor-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}.town-floor-actions button{min-width:0;padding:8px 6px;font-size:11px}@media(max-width:720px){.town-floor-actions{grid-template-columns:1fr}.world-destination-tabs{flex-direction:column}}
.event-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.event-catalog .event-card{display:flex;flex-direction:column;gap:8px}.event-catalog .event-card>strong{font-size:19px;color:#f1cf6b}.event-catalog .event-card button{margin-top:auto}
.canvas-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:soft-light;opacity:.16;transition:background .8s ease,opacity .8s ease}.canvas-frame{position:relative}body[data-environment="city"] .canvas-frame::after{background:radial-gradient(circle at 50% 45%,rgba(255,228,150,.18),transparent 62%)}body[data-environment="agua"] .canvas-frame::after{background:linear-gradient(135deg,rgba(55,150,255,.35),rgba(20,55,100,.1))}body[data-environment="chuva"] .canvas-frame::after{background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(160,210,255,.24) 15px 16px);opacity:.25}body[data-environment="raio"] .canvas-frame::after{background:radial-gradient(circle at 70% 15%,rgba(190,205,255,.5),transparent 28%)}body[data-environment="terra"] .canvas-frame::after,body[data-environment="pedra"] .canvas-frame::after{background:linear-gradient(rgba(175,125,65,.25),rgba(50,30,15,.1))}body[data-environment="som"] .canvas-frame::after{background:radial-gradient(circle,rgba(130,80,180,.2),rgba(20,5,35,.22))}body[data-environment="vento"] .canvas-frame::after{background:linear-gradient(120deg,rgba(230,245,210,.2),transparent 45%,rgba(220,250,235,.16))}
/* Objetos do mapa: dica curta e central, sem ocupar os painéis móveis. */
.world-interaction-hint {
  position: fixed;
  left: 50%;
  bottom: 8.5rem;
  z-index: 80;
  transform: translateX(-50%);
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 204, 75, .72);
  border-radius: .5rem;
  background: rgba(5, 18, 25, .92);
  color: #ffe29a;
  box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .45);
  font: 800 .76rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .035em;
  pointer-events: none;
  white-space: nowrap;
}

.world-interaction-hint[hidden] { display: none; }

.waypoint-panel {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 120;
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 5rem));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(99, 224, 238, .55);
  border-radius: .85rem;
  background: rgba(4, 19, 28, .97);
  box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, .68);
  color: #eafcff;
  padding: 1rem;
}

.waypoint-panel[hidden] { display: none; }

.waypoint-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.waypoint-panel > header span { display: grid; gap: .15rem; }
.waypoint-panel > header small { color: #51dbea; font-weight: 900; letter-spacing: .12em; }
.waypoint-panel > header strong { color: #ffe29a; font: 800 1.15rem Georgia, serif; }
.waypoint-panel > header button {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid #68404a;
  border-radius: .45rem;
  background: #351923;
  color: #ff9cae;
  font-size: 1.25rem;
}

.waypoint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.waypoint-grid > button {
  display: grid;
  gap: .28rem;
  min-height: 4.25rem;
  padding: .75rem;
  border: 1px solid rgba(81, 219, 234, .28);
  border-radius: .55rem;
  background: linear-gradient(135deg, rgba(11, 47, 62, .95), rgba(13, 29, 48, .95));
  color: #f4fcff;
  text-align: left;
}

.waypoint-grid > button:hover:not(:disabled) { border-color: #51dbea; transform: translateY(-1px); }
.waypoint-grid > button:disabled { opacity: .42; }
.waypoint-grid small { color: #8db2bd; }

@media (max-width: 700px) {
  .world-interaction-hint {
    bottom: 6.25rem;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .waypoint-grid { grid-template-columns: 1fr; }
}
.quest-chain {
  display: inline-flex;
  width: fit-content;
  padding: .24rem .48rem;
  border: 1px solid rgba(87, 218, 235, .32);
  border-radius: 999px;
  background: rgba(25, 101, 118, .18);
  color: #70e4ef;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .035em;
}
.pvp-invite{position:fixed;top:110px;left:50%;transform:translateX(-50%);z-index:120;background:#07151def;border:1px solid #e7b84b;box-shadow:0 12px 36px #000a;padding:14px 18px;min-width:280px;color:#f6e7b2;text-align:center}.pvp-invite strong,.pvp-invite span{display:block;margin-bottom:8px}.pvp-invite div{display:flex;gap:8px;justify-content:center}.pvp-invite button{padding:7px 14px;border:1px solid #4d7180;background:#102631;color:#fff;cursor:pointer}.pvp-invite button:first-child{border-color:#42c98b;color:#8fffc7}

/* Hub de criação: uma conta só entra no mundo depois de escolher nome e classe. */
.character-hub-card{width:min(1120px,calc(100vw - 24px));height:min(880px,calc(100dvh - 24px));box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0}.character-hub-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid #31505b;background:linear-gradient(110deg,#12313a,#10192b)}.character-hub-head>div{display:grid;grid-template-columns:58px 1fr;column-gap:14px}.character-hub-head .auth-seal{grid-row:1/4;width:52px;height:52px;font-size:27px}.character-hub-head small{color:#69d7df;letter-spacing:2px}.character-hub-head h1{margin:2px 0;color:#ffe09a;font:700 24px Georgia,serif}.character-hub-head p{margin:0;color:#89a6b1}.character-hub-head>button{padding:9px 13px;border:1px solid #526773;background:#111c23;color:#aebfc5;border-radius:6px}.character-hub-card form{min-height:0;display:grid;grid-template-rows:auto auto 1fr auto}.character-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 20px 8px}.character-fields label{display:grid;gap:5px;color:#94adb6;font-size:12px}.character-fields input{padding:11px 12px;border:1px solid #40616d;border-radius:7px;background:#050e12;color:#fff}.character-selected{padding:2px 20px 10px;color:#78929c}.character-selected strong{color:#f3cf67}.character-class-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-content:start;gap:10px;padding:8px 20px 18px}.character-choice{min-height:205px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1px solid #31515e;border-radius:9px;background:#0d2028;color:#b8c9cf;cursor:pointer}.character-choice:hover{border-color:#65cddd;transform:translateY(-2px)}.character-choice.selected{border-color:#f0c653;box-shadow:0 0 0 2px #f0c65333;background:#183038}.character-choice img{width:88px;height:92px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 8px #0008)}.character-choice strong{color:#f7d575;font-size:15px}.character-choice small{color:#91a7af}.character-choice span:last-child{font-size:10px;color:#68bac4;text-align:center}.character-placeholder{display:grid;place-items:center;width:88px;height:92px;font-size:36px}.character-create-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 20px;border-top:1px solid #29434d;background:#08151a}.character-create-footer .auth-message{margin:0;margin-right:auto}.character-create-footer .auth-submit{min-width:290px}.character-empty{grid-column:1/-1;text-align:center;color:#8299a2}@media(max-width:680px){.character-hub-card{width:100vw;height:100dvh}.character-hub-head{padding:12px}.character-hub-head h1{font-size:18px}.character-hub-head p{font-size:11px}.character-hub-head>button{font-size:0}.character-hub-head>button:after{content:"Sair";font-size:12px}.character-fields{grid-template-columns:1fr;padding:10px 12px 6px}.character-class-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 12px 12px}.character-choice{min-height:185px;padding:8px}.character-choice img{width:70px;height:76px}.character-create-footer{display:block;padding:9px 12px}.character-create-footer .auth-submit{width:100%;min-width:0}.character-create-footer .auth-message{margin:0 0 6px}}

/* Controles móveis e HUD compacto. */
.touch-controls{display:none}
@media (max-width:720px), (pointer:coarse) {
  html,body,#app,#game-area{width:100%;height:100%;overflow:hidden}
  .canvas-frame{inset:0;width:100vw;height:100dvh;border:0}
  #scene{width:100%;height:100%;object-fit:cover}
  .top-bar{top:max(6px,env(safe-area-inset-top));left:8px;right:8px;width:auto;max-width:none}
  .top-menu{padding-right:3rem;scroll-snap-type:x proximity}
  .top-menu button{scroll-snap-align:start}
  .player-panel{top:calc(max(6px,env(safe-area-inset-top)) + 60px);left:8px;width:min(238px,66vw);transform:none;grid-template-columns:42px 1fr;min-height:58px}
  .character-orb{width:38px;height:38px;font-size:18px}
  .minimap-panel{top:calc(max(6px,env(safe-area-inset-top)) + 60px);right:8px;width:min(116px,29vw)}
  .skills-panel{left:50%!important;right:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:min(58vw,430px);max-height:62px;transform:translateX(-50%)!important;padding:4px}
  .skills-panel .panel-title{display:none}
  .skill-bar button{flex:0 0 46px;width:46px;height:46px;min-height:46px}
  .skill-bar .skill-icon{width:36px;height:36px}
  .action-overlay,.world-map-overlay{padding:calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px)}
  .action-modal,.world-map-modal{max-height:calc(100dvh - 16px);overflow:auto}
  .touch-controls{position:fixed;z-index:75;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:5px;touch-action:none;user-select:none}
  .touch-controls button{display:grid;place-items:center;padding:0;border:1px solid #6a91a4;border-radius:13px;background:#07151ddd;color:#d7f8ff;box-shadow:0 5px 15px #0009,inset 0 1px #a7eaff44;font-size:18px;-webkit-tap-highlight-color:transparent}
  .touch-controls button.pressed{background:#3e95ad;color:#fff;transform:scale(.94)}
  .touch-controls [data-direction="up"]{grid-column:2;grid-row:1}
  .touch-controls [data-direction="left"]{grid-column:1;grid-row:2}
  .touch-controls [data-direction="down"]{grid-column:2;grid-row:2}
  .touch-controls [data-direction="right"]{grid-column:3;grid-row:2}
  .pvp-invite{top:calc(max(6px,env(safe-area-inset-top)) + 64px);width:calc(100vw - 24px);min-width:0}
}
@media (max-width:420px) {
  .minimap-panel{display:none}
  .player-panel{width:calc(100vw - 16px)}
  .skills-panel{left:auto!important;right:8px!important;width:calc(100vw - 190px);min-width:150px;transform:none!important}
  .class-grid,.boss-grid{grid-template-columns:1fr}
}