@font-face { font-family: "Pix"; src: url("/client/assets/fonts/Born2bSportyV2.ttf"); }
@font-face { font-family: "Txt"; src: url("/client/assets/fonts/Lato-Semibold.ttf"); }
/* Pix (pixel) só em 16/32/64px = nítida. Txt (Lato) para leitura. */
:root {
  --ink: #1a1126; --bg: #160f22ee; --bg2: #241a33; --line: #3d2c56; --hi: #553f78;
  --txt: #e3dcef; --dim: #8e86a3; --gold: #f7d77a; --blood: #e0283f; --mp: #45c6e8; --xp: #93b46a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07040c; overflow: hidden; font-family: "Txt", "Segoe UI", sans-serif; color: var(--txt); user-select: none; }
.px, #zone, #frame .row, #inv .title, #inv .title2, .cls .cn, #login .logo, button, .lbox label, #toast, #dead div, .slot .key, .slot .count, #tip .nm { font-family: "Pix", monospace; -webkit-font-smoothing: none; }
#game { position: fixed; inset: 0; }
canvas { image-rendering: pixelated; }
.hidden { display: none !important; }
.dim { color: var(--dim); } .small { font-size: 14px; }
.panel { background: var(--bg); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--line), inset 0 3px 0 2px var(--hi); padding: 8px; }
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 15px; }
#hud .panel, #hud input, #inv, #inv * { pointer-events: auto; }

#frame { position: absolute; left: 12px; top: 12px; width: 300px; display: flex; gap: 8px; }
#portrait { width: 64px; height: 64px; background: var(--bg2); border: 2px solid var(--gold); }
#frame .info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#frame .row { display: flex; justify-content: space-between; color: var(--gold); }
.bar { position: relative; height: 16px; background: #0b0712; border: 2px solid var(--ink); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; transition: width .15s; }
.bar b { position: absolute; inset: 0; text-align: center; font-weight: normal; font-size: 12px; line-height: 13px; text-shadow: 1px 1px 0 var(--ink), -1px 0 0 var(--ink); }
.bar.hp i { background: linear-gradient(#e0283f 0 3px, #a8162f 3px); }
.bar.mp i { background: linear-gradient(#b8f1ff 0 2px, #2b8fb0 2px); }
.bar.xp { height: 8px; } .bar.xp i { background: var(--xp); }

#zone { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 32px; text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px; }
#walk-guide { position:absolute; top:56px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; padding:7px 12px; color:var(--txt); background:#160f22dc; border:2px solid #6b543e; box-shadow:inset 0 0 0 1px #d2a85c55, 2px 3px 0 #0b0712; pointer-events:none; text-align:left; }
#walk-guide.hidden { display:none; }
#walk-guide .walk-guide-icon { color:var(--gold); font-size:22px; text-shadow:2px 2px 0 var(--ink); }
#walk-guide b,#walk-guide small { display:block; }
#walk-guide b { color:var(--gold); font:12px Pix,monospace; letter-spacing:.5px; }
#walk-guide small { margin-top:2px; font:13px Txt,sans-serif; color:#e3dcef; }
#mapbox { position: absolute; right: 12px; top: 12px; padding: 5px; }
#minimap { width: 168px; height: 126px; display: block; }

#chat { position: absolute; left: 12px; bottom: 12px; width: 380px; height: 170px; display: flex; flex-direction: column; }
html:not(.chat-open) #chat{display:none!important}
.chat-heading{display:flex;align-items:center;justify-content:space-between;flex:none;padding-bottom:3px;border-bottom:1px solid var(--line);color:var(--gold);font:13px Pix,monospace}
#chat-close{display:grid;place-items:center;width:26px;height:24px;padding:0;background:#302139;color:#e9d2a7;border:1px solid #745569;font:22px/1 Txt,sans-serif;cursor:pointer;touch-action:manipulation}
#chat-close:hover,#chat-close:focus-visible{background:#654052;color:#fff0c8;outline:1px solid #e4bd7f}
#chatlog { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 15px; line-height: 19px; text-shadow: 1px 1px 0 var(--ink); }
#chatlog .sys { color: var(--dim); } #chatlog .n { color: var(--gold); }
#chatin { margin-top: 4px; background: #0b0712; color: var(--txt); border: 2px solid var(--line); font-family: inherit; font-size: 15px; padding: 4px 6px; outline: none; }

#hotbar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slot { position: relative; width: 48px; height: 48px; background: var(--bg2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.slot .key { position: absolute; left: 3px; top: -2px; font-size: 16px; color: var(--gold); text-shadow: 1px 1px 0 var(--ink); }
.slot .count { position: absolute; right: 3px; bottom: -2px; font-size: 16px; text-shadow: 1px 1px 0 var(--ink); }

#inv { position: absolute; right: 12px; top: 160px; width: 360px; }
#inv .title { color: var(--gold); font-size: 16px; border-bottom: 2px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; }
#inv .title2 { color: var(--gold); margin: 8px 0 4px; }
.eqwrap { display: flex; justify-content: space-between; align-items: center; }
.eqcol { display: flex; flex-direction: column; gap: 6px; }
.preview { text-align: center; }
#dollprev { width: 144px; height: 168px; background: radial-gradient(#2e2142, #160f22 70%); border: 2px solid var(--line); }
.eq { position: relative; width: 52px; height: 52px; background: var(--bg2); border: 2px solid var(--line); display: grid; place-items: center; cursor: pointer; }
.eq img { width: 32px; height: 32px; image-rendering: pixelated; }
.eq .lab { position: absolute; bottom: -1px; left: 0; right: 0; font-size: 11px; text-align: center; color: var(--dim); }
#statline { margin-top: 6px; color: var(--txt); }
#bag { display: grid; grid-template-columns: repeat(8, 38px); gap: 3px; }
#bag .b { width: 38px; height: 38px; background: var(--bg2); border: 2px solid var(--line); display: grid; place-items: center; cursor: pointer; }
#bag .b img { width: 28px; height: 28px; image-rendering: pixelated; }
#bag .b:hover, .eq:hover { border-color: var(--gold); }
#tip { position: absolute; width: 250px; font-size: 15px; line-height: 20px; z-index: 130; pointer-events: none !important; }
#tip .nm { font-size: 16px; }
#tip.chat-item-tip { position: fixed; box-sizing: border-box; width: min(320px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: auto !important; overflow-wrap: anywhere; }
#tip .chat-tip-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#tip .chat-tip-heading>div { flex: 1; min-width: 0; }
#tip .chat-tip-icon { display: block; width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; image-rendering: pixelated; }
#tip .chat-tip-close { align-self: flex-start; flex: 0 0 28px; min-width: 28px; min-height: 28px; padding: 2px; font-size: 14px; }
#tip .chat-tip-description { margin: 0 0 8px; white-space: pre-line; }
#toast { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); text-align: center; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); font-size: 16px; }
#toast div { animation: fade 3s forwards; }
@keyframes fade { 0%,70% { opacity: 1 } 100% { opacity: 0 } }
#dead { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(transparent, #3d081499 60%, #1a0208dd); color: var(--blood); font-size: 32px; text-shadow: 3px 3px 0 var(--ink); }
#dead small { color: var(--txt); font-size: 16px; }
#help { position: absolute; bottom: 74px; font-size: 14px; left: 50%; transform: translateX(-50%); text-shadow: 1px 1px 0 var(--ink); }

#login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2e2142 0%, #120b1c 55%, #07040c 100%); }
#login .logo { font-size: 64px; color: var(--blood); text-shadow: 4px 4px 0 var(--ink), 0 0 30px #a8162f88; letter-spacing: 6px; }
#login .sub { color: var(--dim); margin-bottom: 18px; font-size: 17px; }
.lbox { width: 640px; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.lbox label { color: var(--gold); margin-top: 6px; font-size: 16px; }
.lbox input { background: #0b0712; color: var(--txt); border: 2px solid var(--line); font-family: inherit; font-size: 17px; padding: 6px 8px; outline: none; }

.cls .cn { color: var(--gold); font-size: 16px; margin: 2px 0 4px; } .cls .cd { font-size: 14px; line-height: 18px; color: #c4bccf; }
#hairs { display: flex; gap: 8px; }
.hair { width: 28px; height: 28px; border: 2px solid var(--ink); cursor: pointer; }
.hair.sel { outline: 2px solid var(--gold); }
button { margin-top: 10px; background: #6e0f22; color: var(--txt); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #a8162f, inset 0 3px 0 2px #e0283f;
  font-size: 16px; padding: 12px; cursor: pointer; }
button:hover { filter: brightness(1.15); }
#cont button { width: 100%; background: #2b4257; box-shadow: inset 0 0 0 2px #3a6b74, inset 0 3px 0 2px #4f9a96; }
.or { text-align: center; margin-top: 6px; }
.err { color: var(--blood); min-height: 18px; }
/* ajustes de nitidez: fonte pixel só em 16px */
#frame .row, #inv .title2, #inv .title { font-size: 16px; }
#inv .title2 .small, #inv .title .dim { font-family: "Txt", sans-serif; font-size: 13px; }

/* ===== tela de escolha em CARTAS (estilo do roguelike) ===== */
#login { justify-content: flex-start; padding-top: 22px; overflow-y: auto; }
#login .logo { font-size: 64px; line-height: 64px; }
#login .sub { margin-bottom: 8px; }
#login::before { content: ""; position: fixed; inset: -40%; pointer-events: none; opacity: .04;
  background: repeating-conic-gradient(from 0deg at 50% 60%, #efe6d6 0 4deg, transparent 4deg 14deg); animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pickhead { text-align: center; margin: 2px 0 28px; }
.ptitle { font-family: "Txt", sans-serif; font-size: 30px; letter-spacing: 1px; color: #d8b77a; }
.pline { position: relative; width: 420px; height: 1px; background: #5f5874; margin: 8px auto; }
.pline i { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; background: #d8b77a; transform: translateX(-50%) rotate(45deg); }
.psub { color: #a49cb6; font-size: 15px; }
#classes { display: flex; gap: 26px; justify-content: center; perspective: 1200px; margin-bottom: 16px; }
.card { --c: #8e86a3; --c2: #5f5874; --glow: #8e86a355; position: relative; width: 214px; height: 340px; cursor: pointer;
  background: linear-gradient(#1b1526, #120d1b 60%, #0e0a16); border: 3px solid var(--c); outline: 1px solid #0007; outline-offset: -8px;
  box-shadow: 8px 10px 0 #0006, inset 0 0 0 5px #120d1b, inset 0 0 0 6px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s; transform-style: preserve-3d; display: flex; flex-direction: column; align-items: center; }
.card:nth-child(1) { transform: rotate(-1.2deg); } .card:nth-child(2) { transform: rotate(.6deg) translateY(-4px); }
.card:nth-child(3) { transform: rotate(-.5deg); } .card:nth-child(4) { transform: rotate(1.3deg) translateY(-3px); }
.card:hover { transform: translateY(-10px) rotate(0); filter: brightness(1.12); }
.card.sel { transform: translateY(-14px) scale(1.04) rotate(0); box-shadow: 8px 14px 0 #0006, 0 0 28px var(--glow), inset 0 0 0 5px #120d1b, inset 0 0 0 6px var(--c); }
.card.dimmed { filter: brightness(.62) saturate(.7); }
.card.flip { animation: flip .55s ease-out; }
@keyframes flip { 0% { transform: translateY(-14px) rotateY(0) scale(1.04); } 50% { transform: translateY(-22px) rotateY(180deg) scale(1.08); } 100% { transform: translateY(-14px) rotateY(360deg) scale(1.04); } }
.stud { position: absolute; width: 9px; height: 9px; background: #d8b77a; border: 2px solid #1a1126; transform: rotate(45deg); z-index: 2; }
.stud.tl { left: -7px; top: -7px; } .stud.tr { right: -7px; top: -7px; } .stud.bl { left: -7px; bottom: -7px; } .stud.br { right: -7px; bottom: -7px; }
.card .art { position: relative; margin-top: 12px; width: 182px; height: 150px; border: 1px solid color-mix(in srgb, var(--c) 60%, #000);
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 30%, #1b1526) 0, #15101f 70%); overflow: hidden; }
.card .rays { position: absolute; inset: -40%; opacity: .22; background: repeating-conic-gradient(from 0deg, var(--c) 0 8deg, transparent 8deg 24deg); animation: spin 26s linear infinite; }
.card.sel .rays { opacity: .38; animation-duration: 9s; }
.card .art canvas { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 120px; height: 140px; image-rendering: pixelated; }
.card .ring { position: absolute; left: 50%; top: 55%; width: 96px; height: 96px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(#ffffff22, transparent 70%); }
.card .banner { margin-top: -14px; z-index: 1; width: 196px; padding: 7px 0 6px; text-align: center; letter-spacing: 1px; font-size: 16px; color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--c2) 100%, #fff 12%), var(--c2)); border: 1px solid color-mix(in srgb, var(--c) 80%, #fff 10%); box-shadow: 0 2px 0 #0008; text-shadow: 1px 1px 0 #0009; }
.card .tag { margin-top: 9px; font-size: 12px; letter-spacing: 1px; color: var(--c); }
.card .desc { margin: 6px 14px 0; text-align: center; font-size: 14.5px; line-height: 19px; color: #e3dcef; }
.card .pick { margin: auto 0 10px; font-size: 13px; letter-spacing: 1px; color: color-mix(in srgb, var(--c) 70%, #fff); width: 180px; max-width: calc(100% - 24px); text-align: center; border-top: 1px solid #ffffff14; padding-top: 7px; }
.card.sel .pick { color: #f7d77a; }
.c-guerreiro { --c: #b9b2c9; --c2: #5f5874; --glow: #c4bccf66; }
.c-mago { --c: #b98cff; --c2: #553f78; --glow: #b98cff66; }
.c-arqueira { --c: #a6c96a; --c2: #3f5e40; --glow: #93b46a66; }
.c-sacerdote { --c: #f0cf78; --c2: #8a6427; --glow: #f7d77a66; }
.spark { position: fixed; width: 4px; height: 4px; pointer-events: none; z-index: 20; image-rendering: pixelated; }
.lbox { width: 920px; padding: 12px 18px; }
.lrow { display: flex; gap: 18px; align-items: flex-end; }
.lcol { display: flex; flex-direction: column; gap: 6px; }
.lcol:first-child { flex: 1; }
.lrow button { margin-top: 0; padding: 12px 28px; }

/* ===== tutorial ao vivo ===== */
#tutorial { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 440px; padding: 10px 14px 12px; pointer-events: auto;
  border-color: #1a1126; box-shadow: inset 0 0 0 2px #9a6327, inset 0 3px 0 2px #d69a34, 0 6px 0 #0008; }
#tutorial .th { display: flex; justify-content: space-between; align-items: center; font-family: "Pix", monospace; font-size: 16px; color: #d69a34; }
#tutorial .skip { margin: 0; padding: 2px 10px; font-size: 13px; font-family: "Txt", sans-serif; background: #241a33; box-shadow: inset 0 0 0 2px #3d2c56; }
#tutorial .tt { font-family: "Pix", monospace; font-size: 16px; color: #f7d77a; margin: 6px 0 4px; }
#tutorial .tx { font-size: 15.5px; line-height: 22px; color: #efe6d6; }
#tutorial .tx b { color: #f7d77a; font-weight: normal; }
#tutorial .tp { display: flex; gap: 5px; margin-top: 9px; }
#tutorial .tp i { flex: 1; height: 5px; background: #2e2142; border: 1px solid #1a1126; }
#tutorial .tp i.ok { background: #93b46a; } #tutorial .tp i.cur { background: #d69a34; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }
kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin: 0 1px; text-align: center; font-family: "Pix", monospace; font-size: 16px; line-height: 20px;
  color: #1a1126; background: linear-gradient(#efe6d6, #c4bccf); border: 2px solid #1a1126; border-bottom-width: 4px; border-radius: 3px; }
.tut-hl { outline: 3px solid #f7d77a !important; outline-offset: 2px; animation: hl 0.9s infinite; }
@keyframes hl { 50% { outline-color: #d69a3400; } }
#tutedge { position: absolute; display: none; font-size: 34px; color: #f7d77a; text-shadow: 2px 2px 0 #1a1126; pointer-events: none; animation: blink .8s infinite; }
#toast { top: 190px; }

/* ===== som ===== */
#sndslot { cursor: pointer; } #sndicon { width: 32px; height: 32px; image-rendering: pixelated; }
#sndpanel { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); width: 300px; pointer-events: auto; z-index: 6; }
#sndpanel .title { font-family: "Pix", monospace; font-size: 16px; color: var(--gold); border-bottom: 2px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; }
#sndpanel label { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 8px; margin: 6px 0; font-size: 15px; }
#sndpanel input[type=range] { accent-color: #d69a34; width: 100%; }
#sndpanel b { font-weight: normal; text-align: right; color: var(--gold); }
#sndpanel button { width: 100%; margin-top: 8px; padding: 8px; }
.sndbtn { position: fixed; right: 16px; top: 14px; margin: 0; padding: 6px 12px; font-family: "Txt", sans-serif; font-size: 14px;
  background: #241a33; box-shadow: inset 0 0 0 2px #3d2c56; }

/* ===== seleção de personagem: bosque sombrio, com leitura mais clara ===== */
#login {
  isolation: isolate;
  padding: 24px 24px 28px;
  background:
    radial-gradient(circle at 84% 19%, #9d3946 0 3.2%, #85283777 3.5% 5.8%, transparent 13%),
    radial-gradient(ellipse at 50% 57%, #8b747323 0, transparent 43%),
    radial-gradient(ellipse at 50% 19%, #76233445 0, transparent 39%),
    linear-gradient(180deg, #28232b 0%, #211e26 43%, #111015 100%);
}
#login::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .82;
  background:
    linear-gradient(96deg, transparent 0 7%, #0c0b10 7.2% 7.7%, transparent 8.2% 91%, #0c0b10 91.2% 91.7%, transparent 92.2%),
    radial-gradient(ellipse at 8% 77%, #0b0a0f 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 20% 75%, #111016 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 90% 78%, #0b0a0f 0 15%, transparent 15.5%),
    radial-gradient(ellipse at 76% 76%, #111016 0 12%, transparent 12.5%),
    linear-gradient(0deg, #090a0ddd 0%, #11111799 12%, transparent 35%);
}
#login::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .16;
  background-image:
    radial-gradient(circle, #efb781 0 1px, transparent 1.8px),
    radial-gradient(circle, #a83c49 0 1.3px, transparent 2px),
    radial-gradient(circle, #e8d1ab 0 .8px, transparent 1.7px);
  background-size: 137px 173px, 211px 197px, 283px 229px;
  background-position: 4px 20px, 73px 91px, 151px 47px;
  animation: ash-drift 34s linear infinite;
}
#login > :not(.embers) { position: relative; z-index: 1; }
.embers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ember { position: absolute; left: var(--left); top: var(--top); width: var(--size); height: var(--size); border-radius: 50%;
  background: #e27c61; box-shadow: 0 0 7px 2px #bb3c46aa; opacity: 0;
  animation: ember-rise var(--duration) var(--delay) ease-in infinite; }
.ember:nth-child(3n) { background: #e0bd87; box-shadow: 0 0 6px 2px #d1a36b88; }
.ember:nth-child(4n) { width: 2px; height: 2px; filter: blur(.5px); }
@keyframes ember-rise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.55); }
  14% { opacity: .68; }
  72% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(var(--drift), -165px, 0) scale(.2); }
}
@keyframes ash-drift {
  from { background-position: 4px 20px, 73px 91px, 151px 47px; }
  to { background-position: -70px -180px, 190px -110px, 20px -250px; }
}
#login .logo {
  color: #e9c98b;
  text-shadow: 3px 4px 0 #40131f, 0 0 22px #dd445055;
  letter-spacing: 8px;
}
#login .sub { color: #d0c5b8; text-shadow: 0 2px 8px #08070a; }
.pickhead { margin-bottom: 22px; }
.ptitle { color: #eed8ae; text-shadow: 0 2px 8px #08070a; }
.pline { background: linear-gradient(90deg, transparent, #b88d70, transparent); }
.pline i { background: #d9b77c; box-shadow: 0 0 12px #d9b77c88; }
.psub { color: #d0c5ba; }
#classes { gap: 22px; margin-bottom: 18px; }
.card {
  background: linear-gradient(160deg, #29242d 0%, #211d25 55%, #17151c 100%);
  border-color: color-mix(in srgb, var(--c) 70%, #79686b);
  box-shadow: 5px 8px 0 #07060999, inset 0 0 0 5px #1b181f, inset 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent);
}
.card.dimmed { filter: brightness(.84) saturate(.78); }
.card.sel { box-shadow: 5px 11px 0 #07060999, 0 0 16px color-mix(in srgb, var(--glow) 55%, transparent), inset 0 0 0 5px #1b181f, inset 0 0 0 6px color-mix(in srgb, var(--c) 82%, #86736e); }
.card .art {
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--c) 24%, #39323a) 0, #29252e 55%, #1c1921 100%);
  border-color: color-mix(in srgb, var(--c) 68%, #8c7774);
}
.card .rays { opacity: .045; }
.card.sel .rays { opacity: .08; }
.card .art canvas { filter: brightness(.94) contrast(1.03) saturate(.94); }
.card .ring { background: radial-gradient(#fff5dc20, transparent 72%); }
.card .banner { box-shadow: 0 3px 0 #09070baa; }
.card .desc { color: #eee7df; }
.card .pick { border-color: #fff2; }
.stud { background: #e2c489; border-color: #27212a; }
.lbox.panel {
  width: min(920px, calc(100vw - 40px));
  padding: 14px 20px 12px;
  gap: 8px;
  background: linear-gradient(145deg, #37313aee, #211d25f5);
  border-color: #161219;
  box-shadow: inset 0 0 0 2px #66545d, inset 0 3px 0 2px #998176, 0 10px 28px #05040888;
}
.lbox label { color: #e8cb91; letter-spacing: .4px; }
.lbox input {
  min-height: 46px; border: 2px solid #82717a; border-radius: 5px;
  background: #17151be8; color: #f4eee5; padding: 8px 12px;
  box-shadow: inset 0 2px 8px #05040877;
}
.lbox input:focus { border-color: #d9b77c; box-shadow: 0 0 0 3px #d9b77c33, inset 0 2px 8px #05040877; }
.lbox input::placeholder { color: #8f8589; }
#hairs { gap: 10px; min-height: 42px; align-items: center; }
.hair {
  position: relative; width: 32px; height: 32px; flex: 0 0 32px;
  border: 3px solid #ddd1c3; border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 5px #05040899, inset 0 0 0 2px #0004;
  transition: transform .14s ease, box-shadow .14s ease;
}
.hair:hover { transform: translateY(-2px) scale(1.08); }
.hair.sel { outline: 2px solid #e6c783; outline-offset: 3px; box-shadow: 0 0 14px #e6c78388, inset 0 0 0 2px #0004; }
.hair.sel::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font: bold 15px "Txt", sans-serif; text-shadow: 0 1px 3px #000; }
button {
  border-radius: 5px; border-color: #21151a;
  background: linear-gradient(#bd4050, #762133);
  box-shadow: inset 0 0 0 2px #d66b70, inset 0 3px 0 2px #ef8b83, 0 4px 0 #160b10;
  text-shadow: 0 2px 2px #38121a;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
button:hover { filter: brightness(1.12); transform: translateY(-2px); }
button:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px #d66b70, 0 1px 0 #160b10; }
#btnplay { min-width: 190px; padding-inline: 22px; color: #fff8e9; }
#cont { padding-bottom: 8px; border-bottom: 1px solid #fff2; }
#cont button {
  min-height: 48px; color: #fff6e7; border-color: #1c171d;
  background: linear-gradient(#667e72, #354e46);
  box-shadow: inset 0 0 0 2px #849985, inset 0 3px 0 2px #b2c3a1, 0 4px 0 #151c19;
}
#cont button b { color: #f0d492; }
.or { color: #c3b8b2; }
.err { color: #ff8990; }
@media (max-width: 980px) {
  #login { padding: 18px 14px 24px; }
  #login .logo { font-size: 48px; line-height: 52px; }
  .pickhead { margin-bottom: 16px; }
  #classes { flex-wrap: wrap; gap: 14px; }
  .card { width: min(214px, calc(50vw - 24px)); height: 310px; }
  .card .art { width: calc(100% - 24px); height: 132px; }
  .card .art canvas { transform: translateX(-50%) scale(.88); transform-origin: bottom center; }
  .lrow { flex-wrap: wrap; align-items: flex-end; }
  .lcol:first-child { min-width: 220px; }
}
@media (max-width: 520px) {
  #login { justify-content: flex-start; padding-top: 54px; }
  #login .logo { font-size: 40px; letter-spacing: 5px; }
  #login .sub { font-size: 14px; }
  .ptitle { font-size: 23px; }
  .pline { width: min(320px, 80vw); }
  .psub { max-width: 340px; margin: auto; font-size: 13px; }
  #classes { gap: 12px; }
  .card { width: calc(50vw - 22px); height: 300px; }
  .card .desc { margin-inline: 8px; font-size: 13px; line-height: 17px; }
  .card .tag { font-size: 10px; }
  .lbox.panel { width: calc(100vw - 24px); padding: 12px; }
  .lrow { gap: 10px; align-items: stretch; }
  .lcol:first-child { flex-basis: 100%; }
  .lcol:nth-child(2) { flex: 1; }
  #btnplay { flex: 1; min-width: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  #login::before, .ember { animation: none; }
  .ember { display: none; }
  .card .rays { animation: none; }
}

/* ===== estúdio de criação: visual de Vexoria com prévia antes do primeiro acesso ===== */
#login { gap: 0; padding: 12px 20px 28px; }
#login .logo { font-size: 54px; line-height: 56px; }
#login .sub { margin: 0 0 5px; }
.pickhead { margin: 2px 0 14px; }
.ptitle { font: 26px Pix, monospace; color: #f0cf91; text-shadow: 2px 2px 0 #1a1126; }
.pline { width: min(390px, 76vw); margin: 6px auto; }
.psub { font-size: 14px; }
.creation-studio, .lbox.panel { width: min(1120px, calc(100vw - 40px)); }
.creation-studio { padding: 14px; margin-bottom: 8px; overflow: hidden; border-color: #17101f; box-shadow: inset 0 0 0 2px #72523d, inset 0 3px 0 2px #d6a75d, 0 10px 32px #05030bc9; }
.studio-grid { display: grid; grid-template-columns: minmax(165px, .7fr) minmax(220px, 1fr) minmax(390px, 1.8fr); gap: 12px; min-height: 330px; }
.appearance-panel, .hero-preview, .class-panel { min-width: 0; border: 1px solid #6c5362; background: linear-gradient(145deg, #21182bee, #130e1bfa); box-shadow: inset 0 0 0 2px #100b16; }
.appearance-panel, .class-panel { padding: 14px; }
.studio-label, .preview-caption { color: #e8c981; font: 14px Pix, monospace; letter-spacing: .6px; text-shadow: 1px 1px #08060c; }
.appearance-panel p { margin: 7px 0 16px; color: #c6b8c7; font-size: 13px; line-height: 1.45; }
.appearance-panel label { display: block; margin: 12px 0 7px; color: #e8d8bd; font: 13px Pix, monospace; }
#skins, #hairs { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.skin-swatch, .hair { width: 32px; height: 32px; min-width: 32px; margin: 0; padding: 0; border: 2px solid #0b0810; box-shadow: inset 0 0 0 1px #ffffff55, 0 2px 0 #07050a; cursor: pointer; }
.skin-swatch { background: linear-gradient(135deg, var(--skin-light) 0 52%, var(--skin-shadow) 53%); border-radius: 50% 50% 45% 45%; }
.hair { background: var(--hair); border-radius: 5px 5px 2px 2px; }
.skin-swatch:hover, .hair:hover { filter: brightness(1.18); transform: translateY(-1px); }
.skin-swatch.sel, .hair.sel { outline: 2px solid #f6d77e; outline-offset: 2px; box-shadow: 0 0 12px #f6d77e66, inset 0 0 0 1px #fff; }
.appearance-note { margin-top: 20px; padding-top: 12px; border-top: 1px solid #ffffff1a; color: #b6a5bc; font-size: 12px; line-height: 1.5; }
.appearance-note span { color: #f0c76f; }
.hero-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 12px; text-align: center; background: radial-gradient(ellipse at 50% 47%, #483044 0, #24192d 42%, #15101d 78%); }
.hero-preview::before, .hero-preview::after { content: ""; position: absolute; width: 210px; height: 210px; border: 1px solid #d1a85e33; border-radius: 50%; pointer-events: none; }
.hero-preview::after { width: 164px; height: 164px; border-style: dashed; animation: creation-turn 36s linear infinite; }
@keyframes creation-turn { to { transform: rotate(360deg); } }
.preview-caption { position: absolute; top: 12px; font-size: 11px; color: #bda5b4; }
.preview-stage { position: relative; display: grid; place-items: center; width: 100%; height: 222px; margin-top: 12px; }
.preview-stage::before { content: ""; position: absolute; width: 108px; height: 22px; bottom: 23px; border-radius: 50%; background: #120b18; box-shadow: 0 0 22px #a5314566; }
#creation-preview { position: relative; z-index: 1; width: 192px; height: 224px; image-rendering: pixelated; filter: drop-shadow(0 8px 9px #05030a); }
.preview-orbit { position: absolute; z-index: 0; width: 7px; height: 7px; background: #f3cc76; box-shadow: 0 0 10px #e49b48; transform: rotate(45deg); animation: ember 3.6s ease-in-out infinite; }
.orbit-one { left: 19%; top: 37%; }.orbit-two { right: 18%; bottom: 32%; animation-delay: -1.8s; }
#creation-name-preview { color: #f5d98d; font: 19px Pix, monospace; text-shadow: 2px 2px #120c18; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#creation-class-preview { margin-top: 5px; color: #e4c7be; font-size: 13px; }
.preview-foot { margin-top: 12px; color: #958596; font-size: 11px; letter-spacing: .4px; }
#classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 9px 0 10px; perspective: none; }
.class-option { --class-color: #c4bccf; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 53px; margin: 0; padding: 7px 9px; text-align: left; color: #e3dcef; background: linear-gradient(145deg, #30243b, #1d1528); border: 1px solid #655064; box-shadow: inset 0 0 0 1px #110c16, 0 3px 0 #0b0710; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.class-option:hover { transform: translateY(-2px); filter: brightness(1.08); }
.class-option.sel { border-color: var(--class-color); box-shadow: inset 0 0 0 1px var(--class-color), 0 0 14px color-mix(in srgb, var(--class-color) 38%, transparent), 0 3px 0 #0b0710; }
.class-option img { flex: none; width: 32px; height: 32px; padding: 3px; image-rendering: pixelated; background: #100b17; border: 1px solid color-mix(in srgb, var(--class-color) 45%, #33253b); }
.class-option span { display: grid; min-width: 0; gap: 3px; }
.class-option b { overflow: hidden; color: #f3e4d0; font: 13px Pix, monospace; text-overflow: ellipsis; white-space: nowrap; }
.class-option small { color: #b8a9ba; font-size: 11px; line-height: 1.2; }
.class-option kbd { margin-left: auto; min-width: 20px; padding: 0 3px; font-size: 12px; line-height: 17px; }
.c-guerreiro { --class-color: #c4bccf; }.c-mago { --class-color: #b98cff; }.c-arqueira { --class-color: #a6c96a; }.c-sacerdote { --class-color: #f0cf78; }
.class-summary { border-top: 1px solid #6c5362; padding-top: 9px; }
.class-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.class-summary-head small, .class-facts small { display: block; color: #a497aa; font: 10px Pix, monospace; letter-spacing: .3px; }
.class-summary-head h2 { margin: 2px 0 0; color: var(--class-color, #f2d185); font: 17px Pix, monospace; }
.class-summary-head > span { padding: 5px 8px; color: var(--class-color, #f2d185); background: #0f0b16; border: 1px solid color-mix(in srgb, var(--class-color, #f2d185) 40%, #35273c); font: 11px Pix, monospace; }
.class-summary > p { margin: 6px 0 8px; color: #c9bdca; font-size: 12px; line-height: 1.4; }
.class-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.class-facts span { padding: 5px 6px; background: #120d19; border: 1px solid #3b2b43; }
.class-facts b { display: block; margin-top: 3px; color: #f1d48b; font: 12px Pix, monospace; }
.skill-preview-title { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 9px 0 5px; color: #e8c981; font: 11px Pix, monospace; }
.skill-preview-title small { color: #9e90a6; font: 10px Txt, sans-serif; }
.skill-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.skill-preview { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 6px; background: #17101f; border: 1px solid #3f3048; }
.skill-preview img { flex: none; width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.skill-preview span { display: grid; min-width: 0; gap: 2px; }
.skill-preview b { overflow: hidden; color: #e9d7b3; font: 11px Pix, monospace; text-overflow: ellipsis; white-space: nowrap; }
.skill-preview small { color: #aa9daf; font-size: 10px; line-height: 1.2; }
.lbox.panel { padding: 10px 14px; }
.lrow { align-items: center; }
.lrow .lcol { flex: 0 1 330px; }
.lrow .creation-prompt { flex: 1; color: #b9aabb; font-size: 13px; line-height: 1.4; }
.lrow button#btnplay { min-width: 220px; padding: 12px 18px; background: linear-gradient(#8a2538, #501525); box-shadow: inset 0 0 0 2px #a9474d, inset 0 3px 0 2px #dc6670, 0 3px 0 #100910; }
.lrow button#btnplay:disabled { filter: grayscale(.7) brightness(.65); cursor: not-allowed; }
@media (max-width: 900px) {
  #login { padding: 12px 12px 24px; }
  .creation-studio, .lbox.panel { width: min(760px, calc(100vw - 24px)); }
  .studio-grid { grid-template-columns: minmax(150px, .7fr) minmax(190px, .9fr) minmax(300px, 1.5fr); gap: 8px; }
  .appearance-panel, .class-panel { padding: 10px; }
  .preview-stage { height: 190px; }.preview-stage::before { bottom: 14px; }#creation-preview { width: 164px; height: 192px; }
  .class-option { gap: 5px; padding: 6px; }.class-option img { width: 27px; height: 27px; }
  .skill-preview-list { gap: 4px; }
}
@media (max-width: 700px) {
  #login { justify-content: flex-start; padding: 10px 10px 24px; }
  #login .logo { font-size: 42px; line-height: 46px; }
  #login .sub { font-size: 13px; }
  .pickhead { margin: 4px 0 10px; }.ptitle { font-size: 20px; }.psub { max-width: 500px; font-size: 12px; }
  .creation-studio, .lbox.panel { width: min(540px, calc(100vw - 20px)); }
  .creation-studio { padding: 8px; }
  .studio-grid { grid-template-columns: 1fr 1.35fr; min-height: 0; }
  .hero-preview { grid-column: 1 / -1; grid-row: 1; min-height: 250px; }
  .preview-stage { height: 190px; margin-top: 18px; }.preview-foot { display: none; }
  .appearance-panel { grid-column: 1; }.class-panel { grid-column: 2; }
  .class-option { min-height: 47px; }.class-option b { font-size: 11px; }.class-option small { font-size: 10px; }
  .class-summary-head h2 { font-size: 14px; }.class-summary > p { font-size: 11px; }
  .class-facts { gap: 3px; }.class-facts span { padding: 4px; }.class-facts b { font-size: 10px; }
  .skill-preview-list { grid-template-columns: 1fr; }.skill-preview { min-height: 34px; }.skill-preview img { width: 22px; height: 22px; }
  .skill-preview b { font-size: 10px; }.skill-preview small { font-size: 9px; }
  .lrow { flex-wrap: wrap; gap: 8px; }.lrow .lcol { flex: 1 1 100%; }.lrow .creation-prompt { display: none; }.lrow button#btnplay { flex: 1 1 100%; }
}
@media (max-width: 440px) {
  .studio-grid { grid-template-columns: 1fr; }
  .hero-preview { grid-column: 1; grid-row: 1; min-height: 238px; }
  .appearance-panel, .class-panel { grid-column: 1; }
  .appearance-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .appearance-panel .studio-label, .appearance-panel p, .appearance-note { grid-column: 1 / -1; }
  .appearance-panel p { margin: 5px 0 3px; }.appearance-panel label { margin: 8px 0 5px; }
  .class-panel { padding: 10px; }.skill-preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-option img { width: 25px; height: 25px; }.class-option kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-preview::after, .preview-orbit { animation: none; } }

/* ===== criação em estilo de RPG, integrada ao mundo de Vexoria ===== */
#login { justify-content: flex-start; align-items: center; overflow-y: auto; padding: 16px 28px 24px; gap: 10px; }
.creator-header { display: flex; align-items: center; justify-content: space-between; width: min(1540px, calc(100vw - 56px)); min-height: 72px; padding: 0 10px 8px; border-bottom: 2px solid #b089544d; }
.creator-brand { display: flex; align-items: center; gap: 18px; }
#login .creator-brand .logo { font-size: 46px; line-height: 1; letter-spacing: 5px; }
.creator-brand > div:last-child { display: grid; gap: 5px; padding-left: 15px; border-left: 1px solid #d1ae6b55; }
.creator-brand b { color: #f0d59a; font: 15px Pix, monospace; letter-spacing: .5px; }
.creator-brand small { color: #c0abb2; font-size: 12px; }
.creator-location { display: grid; gap: 3px; text-align: right; padding-right: 12px; border-right: 3px solid #982f40; }
.creator-location small { color: #bd958e; font: 10px Pix, monospace; letter-spacing: 1px; }
.creator-location b { color: #f0d393; font: 15px Pix, monospace; }
.creator-location span { color: #aa9baa; font-size: 11px; }
#login .sub, .pickhead { display: none; }
.creation-studio, .lbox.panel { width: min(1540px, calc(100vw - 56px)); }
.creation-studio { position: relative; padding: 10px; margin: 0; overflow: visible; background: linear-gradient(120deg, #17111deF, #211724f2 46%, #15101ceF); border: 2px solid #171019; box-shadow: inset 0 0 0 2px #73513b, inset 0 0 0 4px #241b24, inset 0 4px 0 #d3a95c, 0 8px 0 #08060b, 0 18px 38px #050309b8; }
.creation-studio::before { content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 3; background: linear-gradient(#dfba72,#dfba72) left top/18px 3px no-repeat,linear-gradient(#dfba72,#dfba72) left top/3px 18px no-repeat,linear-gradient(#dfba72,#dfba72) right top/18px 3px no-repeat,linear-gradient(#dfba72,#dfba72) right top/3px 18px no-repeat,linear-gradient(#dfba72,#dfba72) left bottom/18px 3px no-repeat,linear-gradient(#dfba72,#dfba72) left bottom/3px 18px no-repeat,linear-gradient(#dfba72,#dfba72) right bottom/18px 3px no-repeat,linear-gradient(#dfba72,#dfba72) right bottom/3px 18px no-repeat; }
.studio-grid { grid-template-columns: minmax(205px, .58fr) minmax(380px, 1.05fr) minmax(440px, 1.25fr); gap: 8px; min-height: 540px; }
.class-panel, .hero-preview, .class-details-panel { min-width: 0; border: 0; background: none; box-shadow: none; }
.class-panel { position: relative; padding: 18px 12px; background: linear-gradient(90deg,#100b16d9,#211824bd); border-right: 1px solid #ad865344; }
.class-panel::after { content: ""; position: absolute; top: 15px; bottom: 15px; right: -3px; width: 5px; background: linear-gradient(#342433,#ad8653,#342433); }
.studio-label { font-size: 14px; color: #f0d08d; letter-spacing: .7px; }
.class-subtitle { margin: 7px 0 18px; color: #a99aa8; font-size: 12px; line-height: 1.5; }
#classes { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.class-option { --class-color: #c4bccf; min-height: 70px; gap: 12px; padding: 8px 10px; border: 2px solid #51404b; background: linear-gradient(90deg,#17111c,#241a26 72%,#17111c); box-shadow: inset 0 0 0 2px #0c0810, 0 4px 0 #09070b; }
.class-option::before { content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 4px; background: #5e4652; }
.class-option.sel { border-color: var(--class-color); background: linear-gradient(90deg,color-mix(in srgb,var(--class-color) 20%,#211725),#352437 72%,#201622); box-shadow: inset 0 0 0 2px #100b14, inset 5px 0 0 var(--class-color), 0 4px 0 #09070b, 0 0 20px color-mix(in srgb,var(--class-color) 24%,transparent); }
.class-option.sel::before { background: var(--class-color); }
.class-option img { width: 42px; height: 42px; padding: 5px; background: radial-gradient(#51404b,#17111c); border: 1px solid color-mix(in srgb,var(--class-color) 54%,#322332); }
.class-option span { gap: 5px; }
.class-option b { color: #f0ddbd; font-size: 15px; }
.class-option small { color: #aa9aa9; font-size: 11px; }
.class-option kbd { min-width: 22px; background: #130d17; color: #e9c981; border: 1px solid #76604c; border-bottom-width: 3px; }
.class-legend { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #8c6a4844; color: #9f8f9f; font-size: 11px; line-height: 1.4; }
.class-legend i { width: 7px; height: 7px; background: #d2a85d; transform: rotate(45deg); }
.hero-preview { display: grid; grid-template-rows: 24px minmax(245px,1fr) auto auto; align-items: center; justify-items: center; position: relative; overflow: hidden; padding: 12px 18px 16px; text-align: center; background: radial-gradient(ellipse at 50% 39%,#69414955 0,#3826376e 32%,#1b1422 72%,#130e19 100%); }
.hero-preview::before { width: min(400px,90%); height: min(400px,90%); border: 2px solid #d4b16a2c; box-shadow: 0 0 0 14px #ad794b0b,0 0 0 28px #ad794b08; }
.hero-preview::after { width: min(340px,78%); height: min(340px,78%); border: 1px dashed #e5c77b44; animation: creation-turn 42s linear infinite; }
.preview-caption { position: static; display: flex; align-items: center; gap: 10px; color: #d3b776; font: 12px Pix,monospace; letter-spacing: 1px; }
.preview-caption i { width: 22px; height: 1px; background: linear-gradient(90deg,transparent,#c8a768); }.preview-caption i:last-child { transform: scaleX(-1); }
.preview-stage { height: 100%; min-height: 255px; max-height: 330px; margin: 0; align-self: stretch; }
.preview-stage::before { width: 180px; height: 36px; bottom: 18px; background: #0e0914; border: 2px solid #795044; box-shadow: 0 -5px 0 #382436,0 0 34px #bb4c4666; }
#creation-preview { width: 270px; height: 315px; filter: drop-shadow(0 13px 8px #05030aaa) drop-shadow(0 0 15px #f1cd7655); }
.preview-orbit { width: 5px; height: 5px; background: #f5d88b; box-shadow: 0 0 9px 3px #eaa85e77; }
.orbit-one { left: 14%; top: 31%; }.orbit-two { right: 15%; bottom: 36%; }.orbit-three { right: 24%; top: 22%; animation-delay: -2.7s; }
.preview-nameplate { position: relative; z-index: 2; min-width: 230px; padding: 9px 22px 8px; background: linear-gradient(90deg,transparent,#1b111deF 18%,#1b111deF 82%,transparent); border-top: 1px solid #b58d50aa; border-bottom: 1px solid #b58d50aa; }
.preview-nameplate small { color: #98879a; font: 9px Pix,monospace; letter-spacing: .6px; }
#creation-name-preview { color: #f2d68f; font-size: 22px; }
#creation-class-preview { margin-top: 4px; color: #d9bdad; font: 12px Pix,monospace; }
.appearance-panel { width: min(100%,470px); padding: 10px 14px; border: 0; border-top: 1px solid #bb93554d; background: linear-gradient(90deg,transparent,#18121caa,transparent); box-shadow: none; }
.appearance-title { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; text-align: left; }
.appearance-title > i { color: #f2d28a; font-style: normal; }
.appearance-title span { color: #e6c986; font: 12px Pix,monospace; }
.appearance-title small { margin-left: auto; color: #8d8192; font-size: 9px; }
.appearance-choices { display: flex; justify-content: center; gap: clamp(16px,4vw,48px); }
.appearance-choice { display: flex; align-items: center; gap: 9px; }
.appearance-choice label { color: #b6a4ad; font: 10px Pix,monospace; white-space: nowrap; }
#skins, #hairs { gap: 7px; min-height: 29px; align-items: center; }
.skin-swatch,.hair { width: 25px; height: 25px; min-width: 25px; border: 2px solid #0d0910; box-shadow: inset 0 0 0 1px #ffffff48,0 2px 0 #08060a; }
.skin-swatch { border-radius: 50%; }.hair { border-radius: 3px 3px 1px 1px; }
.skin-swatch.sel,.hair.sel { outline: 2px solid #efcf80; outline-offset: 2px; }
.class-details-panel { position: relative; padding: 18px 20px 14px; background: linear-gradient(90deg,#211821e8,#19131deF); border-left: 1px solid #ad865344; }
.class-details-panel::before { content: ""; position: absolute; left: -3px; top: 15px; bottom: 15px; width: 5px; background: linear-gradient(#342433,#ad8653,#342433); }
.details-ribbon { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #8b694744; color: #a9928e; font: 11px Pix,monospace; letter-spacing: 1px; }
.details-ribbon i { color: #e4c57e; font-style: normal; }
.class-summary { padding-top: 0; border: 0; }
.class-summary-head { padding-bottom: 9px; border-bottom: 1px solid #ab82503a; }
.class-summary-head small { color: #a28e91; font-size: 10px; }
.class-summary-head h2 { margin-top: 5px; color: var(--class-color,#f0d28e); font-size: 26px; }
.class-summary-head > span { padding: 6px 10px; background: transparent; border: 1px solid color-mix(in srgb,var(--class-color,#f0d28e) 52%,#32252f); color: var(--class-color,#f0d28e); font-size: 11px; }
.class-summary > p { min-height: 38px; margin: 10px 0 14px; color: #c4b3bb; font-size: 13px; line-height: 1.5; }
.class-facts { gap: 7px; }
.class-facts span { position: relative; padding: 9px 10px; background: linear-gradient(135deg,#120d16,#211821); border: 0; border-left: 2px solid var(--class-color,#a58c76); box-shadow: inset 0 -1px #ffffff12; }
.class-facts b { color: #f1d58f; font-size: 14px; }
.skill-preview-title { margin: 17px 0 8px; color: #e7c982; font-size: 12px; letter-spacing: .5px; }
.skill-preview-title small { color: #948694; }
.skill-preview-list { grid-template-columns: 1fr 1fr; gap: 7px; }
.skill-preview { min-height: 62px; gap: 9px; padding: 7px 8px; background: linear-gradient(110deg,#17111c,#211925); border: 1px solid #80624644; box-shadow: inset 0 -2px #09070c; }
.skill-preview img { width: 34px; height: 34px; padding: 3px; background: radial-gradient(#3e2e3d,#150f19); border: 1px solid #98724b66; }
.skill-preview b { color: #e8d4b5; font-size: 12px; }
.skill-preview small { color: #a99aa7; font-size: 10px; line-height: 1.3; }
.lbox.panel { position: relative; padding: 12px 16px 13px; gap: 10px; background: linear-gradient(110deg,#16111beb,#251b25f2,#17111beb); border: 2px solid #171019; box-shadow: inset 0 0 0 2px #694c3b,inset 0 3px 0 #c69a56,0 7px 0 #08060a; }
.lbox.panel::before { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; height: 1px; background: #f4d69144; }
#character-slots h3 { margin: 0 0 8px; color: #e7c982; font-size: 14px; letter-spacing: .5px; }
#character-slots h3 small { color: #b69ca1; font: 11px Pix,monospace; }
.slot-grid { gap: 8px; margin: 0; }
.saved-slot { position: relative; min-height: 92px; padding: 8px; overflow: hidden; background: linear-gradient(120deg,#201822,#151019); border: 1px solid #70534a; box-shadow: inset 0 0 0 2px #0f0b11,0 3px 0 #09070a; }
.saved-slot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg,#d0a15c18,transparent 34%); }
.saved-slot canvas { position: relative; width: 60px; height: 70px; margin-right: 8px; }
.saved-slot h4 { position: relative; margin: 6px 0 2px; font-size: 17px; }
.saved-slot p { position: relative; margin: 4px 0; color: #b9aab4; font-size: 11px; }
.saved-slot button { position: relative; margin: 2px 3px 0; padding: 4px 10px; font-size: 11px; }
.saved-slot button[data-enter] { background: linear-gradient(#596f5e,#2b4436); box-shadow: inset 0 0 0 1px #8ca17a,0 3px 0 #0c0d0b; }
.delete-character { background: linear-gradient(#622433,#35141d); }
.empty-slot { min-height: 92px; color: #d0b56f; border: 1px dashed #8e6a4c; background: linear-gradient(120deg,#1c1520,#130e18); }
.empty-slot b { font: 28px Pix,monospace; }
.empty-slot span { font: 12px Pix,monospace; }
.empty-slot small { color: #958693; font-size: 10px; }
.lrow { align-items: center; gap: 14px; padding-top: 9px; border-top: 1px solid #79583b4f; }
.lrow .lcol { flex: 0 1 330px; gap: 4px; }
.lbox label { color: #d8b970; font-size: 12px; }
.lbox input { min-height: 40px; border: 2px solid #6d5049; border-radius: 0; background: #100c13; font: 16px Txt,sans-serif; }
.lrow .creation-prompt { color: #9f8f9c; font-size: 11px; }
.creation-prompt i { color: #d7b566; font-style: normal; }
.lrow button#btnplay { display: grid; gap: 3px; min-width: 250px; margin: 0; padding: 9px 18px; border: 2px solid #402027; border-radius: 0; background: linear-gradient(#b53948,#6a1c2b); box-shadow: inset 0 0 0 2px #d66d70,inset 0 3px 0 #f0a379,0 4px 0 #10080b; }
.lrow button#btnplay span { font-size: 16px; }.lrow button#btnplay small { color: #f2d5bd; font: 10px Txt,sans-serif; }
.class-option, .skin-swatch, .hair, .saved-slot, .lrow button#btnplay { border-radius: 0; }
@media(max-width:1050px) {
  #login { padding-inline: 14px; }
  .creator-header,.creation-studio,.lbox.panel { width: calc(100vw - 28px); }
  .studio-grid { grid-template-columns: minmax(175px,.55fr) minmax(310px,1fr) minmax(360px,1.15fr); min-height: 500px; }
  .class-panel,.class-details-panel { padding-inline: 12px; }
  .skill-preview-list { grid-template-columns: 1fr; }
  .skill-preview { min-height: 48px; }
  #creation-preview { width: 220px; height: 257px; }
}
@media(max-width:800px) {
  #login { padding: 10px 10px 18px; }
  .creator-header,.creation-studio,.lbox.panel { width: calc(100vw - 20px); }
  .creator-header { min-height: 60px; }.creator-brand { gap: 9px; }.creator-brand > div:last-child { padding-left: 9px; }
  #login .creator-brand .logo { font-size: 34px; }.creator-brand b { font-size: 11px; }.creator-brand small { font-size: 10px; }
  .creator-location b { font-size: 11px; }.creator-location small,.creator-location span { font-size: 9px; }
  .studio-grid { grid-template-columns: minmax(150px,.55fr) minmax(260px,1fr) minmax(280px,1fr); min-height: 470px; }
  .class-panel,.hero-preview,.class-details-panel,.appearance-panel { grid-column:auto;grid-row:auto; }
  .class-option { min-height: 58px; gap: 7px; padding: 6px; }.class-option img { width: 32px; height: 32px; }.class-option b { font-size: 12px; }.class-option small { font-size: 9px; }.class-option kbd { display: none; }
  .class-summary-head h2 { font-size: 20px; }.class-summary > p { font-size: 11px; }
  .appearance-title small { display: none; }.appearance-choice { flex-direction: column; gap: 4px; }.appearance-choice label { font-size: 9px; }
  .saved-slot canvas { width: 48px; height: 56px; }.saved-slot h4 { font-size: 14px; }.saved-slot button { padding: 3px 6px; font-size: 9px; }
}
@media(max-width:620px) {
  .creator-header { min-height: 52px; padding-bottom: 5px; }.creator-location { display: none; }
  .studio-grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .class-panel { grid-column: 1 / -1; grid-row: 1; padding: 10px; border: 0; }
  .class-panel::after { display: none; }
  .class-panel .studio-label { text-align: center; }
  .class-subtitle,.class-legend { display: none; }
  #classes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 8px; }
  .class-option { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 66px; padding: 5px 2px; text-align: center; }
  .class-option img { width: 28px; height: 28px; }.class-option b { font-size: 9px; }.class-option small { display: none; }
  .hero-preview { grid-column: 1 / -1; grid-row: 2; min-height: 390px; padding: 8px; }
  .preview-stage { min-height: 190px; max-height: 220px; }.preview-stage::before { bottom: 6px; }#creation-preview { width: 174px; height: 203px; }
  .appearance-panel { display:block;grid-template-columns:none;column-gap:0;grid-column:auto;width:100%; }.appearance-choices { gap: 22px; }
  .class-details-panel { grid-column: 1 / -1; grid-row: 3; padding: 11px; border: 0; border-top: 1px solid #ad865344; }
  .class-details-panel::before { display: none; }.details-ribbon { margin-bottom: 8px; }
  .class-summary > p { min-height: 0; }.skill-preview-list { grid-template-columns: 1fr 1fr; }.skill-preview { min-height: 48px; }
  .slot-grid { grid-template-columns: 1fr; }.saved-slot { min-height: 78px; }
  .lrow .lcol { flex: 1 1 100%; }.lrow .creation-prompt { display: none; }.lrow button#btnplay { flex: 1 1 100%; }
  .lbox.panel { padding: 10px; }
}
@media(prefers-reduced-motion:reduce) { .hero-preview::after { animation:none; } }

/* Confirmações e entradas sempre fazem parte da interface do jogo. */
.vex-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 18px; background: #08050dcc; backdrop-filter: blur(2px); }
.vex-modal { position: relative; width: min(480px,100%); padding: 27px 28px 24px; text-align: center; color: #e8d9c7; background: linear-gradient(145deg,#2a1d2b,#17111d 70%); border: 2px solid #9c754a; box-shadow: inset 0 0 0 3px #120d17,inset 0 4px 0 #d2a75d,0 0 0 5px #100b13,0 16px 48px #000c; }
.vex-modal::before,.vex-modal::after { content:""; position:absolute; width:18px; height:18px; border-color:#f0cf82; border-style:solid; pointer-events:none; }.vex-modal::before{top:-3px;left:-3px;border-width:3px 0 0 3px}.vex-modal::after{right:-3px;bottom:-3px;border-width:0 3px 3px 0}
.vex-modal-emblem { display:grid;place-items:center;width:36px;height:36px;margin:0 auto 8px;color:#f6d686;background:#211522;border:1px solid #a27b4d;transform:rotate(45deg);font:18px Pix,monospace; }.vex-modal-emblem::first-letter{transform:rotate(-45deg)}
.vex-modal-kicker { margin:10px 0 7px;color:#b89a73;font:10px Pix,monospace;letter-spacing:1px; }
.vex-modal h2 { margin:0;color:#f2d38c;font:22px Pix,monospace;text-shadow:2px 2px #100a13; }
.vex-modal p { margin:12px auto 18px;max-width:380px;color:#c8b9c5;font:14px/1.55 Txt,sans-serif; }
.vex-modal-input { display:block;width:100%;height:42px;margin:0 0 14px;padding:8px 11px;color:#f5e9d7;background:#100c14;border:2px solid #73534c;outline:0;font:15px Txt,sans-serif; }
.vex-modal-input:focus { border-color:#e1bd70;box-shadow:0 0 0 2px #e1bd7040; }
.vex-modal-actions { display:flex;justify-content:center;gap:12px; }
.vex-modal-actions button { min-width:132px;margin:0;padding:9px 13px;border-radius:0;color:#efe2cd;background:linear-gradient(#514052,#302437);border:2px solid #17101b;box-shadow:inset 0 0 0 1px #8d6f77,0 4px 0 #0c080e;font:13px Pix,monospace;text-shadow:none; }
.vex-modal-actions button[data-accept] { color:#fff0c8;background:linear-gradient(#68785c,#354a3b);box-shadow:inset 0 0 0 1px #adbd82,0 4px 0 #0c080e; }
.vex-modal-actions button[data-accept].danger { background:linear-gradient(#9b3343,#5d1929);box-shadow:inset 0 0 0 1px #e08077,0 4px 0 #0c080e; }
.vex-modal-actions button:hover { filter:brightness(1.15);transform:translateY(-1px); }
@media(max-width:480px){.vex-modal{padding:23px 17px 18px}.vex-modal-actions{gap:8px}.vex-modal-actions button{min-width:0;flex:1;font-size:11px}}
.vex-modal-input[hidden]{display:none}
@media(max-width:1050px){.studio-grid{grid-template-columns:minmax(165px,.55fr) minmax(280px,1fr) minmax(330px,1.15fr)}}
.lbox #character-slots h3{margin:0 0 8px;color:#e7c982;font:14px Pix,monospace;letter-spacing:.5px}
.lbox #character-slots h3 small{color:#b69ca1;font:11px Pix,monospace}
.lbox #character-slots .slot-grid{gap:8px;margin:0}
.lbox #character-slots .saved-slot{position:relative;min-height:92px;padding:8px;overflow:hidden;background:linear-gradient(120deg,#201822,#151019);border:1px solid #70534a;box-shadow:inset 0 0 0 2px #0f0b11,0 3px 0 #09070a}
.lbox #character-slots .saved-slot::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#d0a15c18,transparent 34%)}
.lbox #character-slots .saved-slot canvas{position:relative;width:60px;height:70px;margin-right:8px}
.lbox #character-slots .saved-slot h4{position:relative;margin:6px 0 2px;color:#efd294;font:17px Pix,monospace}
.lbox #character-slots .saved-slot p{position:relative;margin:4px 0;color:#b9aab4;font-size:11px}
.lbox #character-slots .saved-slot button{position:relative;margin:2px 3px 0;padding:4px 10px;font-size:11px}
.lbox #character-slots .saved-slot button[data-enter]{background:linear-gradient(#596f5e,#2b4436);box-shadow:inset 0 0 0 1px #8ca17a,0 3px 0 #0c0d0b}
.lbox #character-slots .delete-character{background:linear-gradient(#622433,#35141d)}
.lbox #character-slots .empty-slot{min-height:92px;color:#d0b56f;border:1px dashed #8e6a4c;background:linear-gradient(120deg,#1c1520,#130e18)}
.lbox #character-slots .empty-slot b{font:28px Pix,monospace}.lbox #character-slots .empty-slot span{font:12px Pix,monospace}.lbox #character-slots .empty-slot small{color:#958693;font-size:10px}
@media(max-width:800px){.lbox #character-slots .saved-slot canvas{width:48px;height:56px}.lbox #character-slots .saved-slot h4{font-size:14px}.lbox #character-slots .saved-slot button{padding:3px 6px;font-size:9px}}
@media(max-width:620px){.lbox #character-slots .slot-grid{grid-template-columns:1fr}.lbox #character-slots .saved-slot{min-height:78px}}
/* ◆ CONJUNTO nas dicas, detalhes e mochila (Claude, 19/10 · client/src/set-ui.js) */
.set-block{margin-top:6px;padding:6px 8px;background:#1d1528;border-left:2px solid #f7d77a;font:12px/1.45 Txt}
.set-block .set-title{color:#f7d77a;font:13px Pix}.set-block .set-title b{float:right;color:#fff3c8}
.set-block small{display:block;color:#b9a8c4;margin-bottom:3px}.set-block ul{list-style:none;margin:2px 0 4px;padding:0}.set-block li{color:#8f8299}.set-block li.on{color:#9be37a}.set-block li.cur{font-weight:bold}
.set-block p{margin:1px 0;color:#8f8299}.set-block p.on{color:#9be37a}
.set-tag{color:#f7d77a}
#bag .b .bag-set{position:absolute;left:2px;bottom:0;font:11px/1 sans-serif;font-style:normal;color:#f7d77a;text-shadow:1px 1px 0 #1a1126;pointer-events:none}
.item-set .set-block{margin:0}

/* ---- facilidades sociais (Claude, 19/10) — client/src/social-plus.js ---- */
#chatlog .chat-name, #chatlog .chat-item, #chatlog .chat-recruit button { pointer-events: auto; cursor: pointer; }
#chatlog .chat-name:hover { text-decoration: underline; }
#chatlog .chat-item { font: inherit; background: none; border: 0; padding: 0; text-shadow: inherit; }
#chatlog .chat-item:hover { text-decoration: underline; filter: brightness(1.25); }
#chatlog .chat-recruit { display: inline; color: var(--text, #e3dcef); }
#chatlog .chat-recruit small { color: var(--dim); }
#chatlog .chat-recruit button { font: inherit; font-size: 13px; margin-left: 4px; padding: 0 6px; background: #3a2a1a; color: #f7d77a; border: 2px solid #8a6a3a; }
#chatlog .chat-recruit button:disabled { opacity: .6; cursor: default; }
.social-apply { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 60; display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1a1126ee; border: 2px solid #f7d77a; color: #e3dcef; font-size: 15px; pointer-events: auto; max-width: calc(100vw - 32px); }
.social-apply button { font: inherit; padding: 2px 8px; background: #2b2040; color: #f7d77a; border: 2px solid #5a4a7a; cursor: pointer; }
.finder-window .game-window { width: min(560px, calc(100vw - 32px)); }
.fd-help { color: var(--dim); margin: 0 0 8px; }
.fd-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.fd-list li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: #241935; border: 2px solid #3a2c52; }
.fd-list li small { display: block; color: var(--dim); font-size: 13px; }
.fd-list .fd-empty { display: block; color: var(--dim); text-align: center; }
.fd-list button, .fd-form button, .fd-mine button, .fd-refresh { font: inherit; padding: 3px 10px; background: #2b2040; color: #f7d77a; border: 2px solid #5a4a7a; cursor: pointer; }
.fd-list button:disabled { color: var(--dim); cursor: default; }
.fd-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 2px dashed #3a2c52; }
.fd-form b { width: 100%; color: var(--gold); }
.fd-form select, .fd-form input { font: inherit; background: #120c1c; color: #e3dcef; border: 2px solid #3a2c52; padding: 2px 4px; }
.fd-form input { width: 56px; }
.fd-mine { padding: 8px; color: #8fd1b8; }
.fd-refresh { margin-top: 8px; }
@media (max-width: 560px) { .fd-list li { grid-template-columns: 1fr auto; } .fd-goal { grid-column: 1 / -1; grid-row: 2; } }
#bag-actions .bag-link { min-width: 32px; }

/* ---- durabilidade e conserto (Claude, 19/10) — shared/durability.js · client/src/repair-ui.js ---- */
.eq .dur-bar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; background: #1a1126; border: 1px solid #1a1126; pointer-events: none; }
.eq .dur-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--c); }
.eq.eq-broken img { filter: grayscale(1) brightness(.55) sepia(1) hue-rotate(-40deg) saturate(3); }
.eq.eq-broken::after { content: "✖"; position: absolute; right: 3px; top: 1px; color: #ff5d6e; font: 14px Pix; text-shadow: 1px 1px 0 #1a1126; pointer-events: none; }
#dur-warn { position: fixed; left: 16px; top: 214px; z-index: 30; pointer-events: auto; font: 14px Pix; padding: 3px 8px; color: #ffb347; background: #1a1126dd; border: 2px solid #ffb347; cursor: pointer; animation: durPulse 1.6s ease-in-out infinite; }
#dur-warn.broken { color: #ff5d6e; border-color: #ff5d6e; }
@keyframes durPulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { #dur-warn { animation: none; } }
.repair-window .game-window { width: min(560px, calc(100vw - 32px)); }
.rp-help { color: var(--dim); margin: 0 0 8px; }
.rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.rp-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: #241935; border: 2px solid #3a2c52; }
.rp-list li.rp-broken { border-color: #7a2a3a; }
.rp-list img { width: 40px; height: 40px; image-rendering: pixelated; }
.rp-list small { display: block; color: var(--dim); font-size: 13px; }
.rp-list em { color: #ff5d6e; font-style: normal; }
.rp-bar { display: block; height: 6px; margin: 3px 0 1px; background: #120c1c; border: 1px solid #3a2c52; }
.rp-bar i { display: block; height: 100%; }
.rp-list button, .rp-foot button { font: inherit; padding: 4px 10px; background: #2b2040; color: #f7d77a; border: 2px solid #5a4a7a; cursor: pointer; line-height: 1.1; }
.rp-list button small { color: #e3dcef; }
.rp-list button:disabled, .rp-foot button:disabled { opacity: .5; cursor: default; }
.rp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rp-empty { color: #93b46a; text-align: center; padding: 16px; }
.rp-foot.rp-sticky { position: sticky; top: -16px; z-index: 2; margin: -6px 0 8px; padding: 6px 0; background: #241a33; border-bottom: 2px solid #493450; }
.rp-foot.rp-sticky button[data-fix="all"] { color: #ffe9aa; border-color: #e6b96a; }
html.touch-device .repair-window .rp-help { display: none; }
html.touch-device .repair-window .rp-list { max-height: none; overflow: visible; }

/* ---- agenda de eventos e dia/noite (Claude, 19/10) — client/src/agenda.js ---- */
#clock-chip { position: absolute; left: 6px; bottom: 6px; z-index: 3; pointer-events: auto; cursor: pointer; font: 14px Pix, monospace; padding: 1px 6px; color: #f7d77a; background: #1a1126e6; border: 2px solid #8a6a3a; line-height: 16px; }
#clock-chip.night { color: #bcd4ff; border-color: #4a5f9a; box-shadow: 0 0 6px #4a6aff55; }
.agenda-window .game-window { width: min(600px, calc(100vw - 32px)); }
.ag-now { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 2px solid #8a6a3a; background: linear-gradient(90deg, #3a2a12, #241935); margin-bottom: 10px; }
.ag-now.night { border-color: #4a5f9a; background: linear-gradient(90deg, #101a3a, #241935); }
.ag-now b { display: block; color: #f7d77a; font-size: 18px; } .ag-now.night b { color: #bcd4ff; }
.ag-now small { color: var(--dim); }
.ag-sky { font-size: 34px; line-height: 1; color: #f7d77a; text-shadow: 0 0 10px #f7d77a88; } .ag-now.night .ag-sky { color: #dfe8ff; text-shadow: 0 0 12px #8fb8ffaa; }
.ag-moon, .ag-list { margin-bottom: 10px; }
.agenda-window h3 { margin: 0 0 6px; font: 16px Pix, monospace; color: var(--gold); }
.ag-moon ol { margin: 0; padding-left: 24px; } .ag-moon li { display: flex; justify-content: space-between; max-width: 280px; }
.ag-moon li span { color: #bcd4ff; }
.ag-mine { margin: 6px 0 0; color: #c9bcd6; font-size: 14px; }
.ag-list ul, .ag-rules ul { list-style: none; margin: 0; padding: 0; }
.ag-list li { display: grid; grid-template-columns: 26px 74px 1fr; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #3a2c52; }
.ag-list li small { display: block; color: var(--dim); font-size: 13px; }
.ag-list li.live { background: #3a1a2a; border: 2px solid #e0283f; }
.ag-ic { font-size: 20px; text-align: center; }
.ev-moon .ag-ic { color: #bcd4ff; } .ev-boss .ag-ic { color: #e0283f; } .ev-daily .ag-ic { color: #8fd1b8; } .ev-pk .ag-ic { color: #f7d77a; }
.ag-when { font-size: 13px; color: #e3dcef; line-height: 1.2; }
.ag-rules summary { cursor: pointer; color: #bcd4ff; }
.ag-rules li { padding: 3px 0 3px 14px; position: relative; color: #c9bcd6; font-size: 14px; } .ag-rules li::before { content: "☾"; position: absolute; left: 0; color: #8fb8ff; font-size: 11px; }
#clock-chip.floating { position: fixed; left: auto; bottom: auto; right: 58px; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 40; }
#clock-chip.vigil { color: #ff8a9a; border-color: #e0283f; box-shadow: 0 0 8px #e0283f88; }
.ag-now.vigil { border-color: #e0283f; background: linear-gradient(90deg, #3a0f1a, #241935); } .ag-now.vigil b, .ag-now.vigil .ag-sky { color: #ff8a9a; text-shadow: 0 0 10px #e0283f88; }
.ev-vigil .ag-ic { color: #ff5d6e; }

/* desequipar arrastando para a mochila (Claude, 20/10) */
#bag.equip-over{outline:2px dashed #f7d77a;outline-offset:-2px;background-color:#f7d77a12}
#inv .eq[draggable=true]{cursor:grab}
/* chat: campo + botão Enviar no mesmo formulário (client/src/hud.js) */
#chat-form { display: flex; gap: 4px; margin-top: 4px; flex-shrink: 0; }
#chat-form #chatin { flex: 1; min-width: 0; margin-top: 0; }
#chat-send { flex: none; width: 40px; font: 18px Pix, monospace; color: #f7d77a; background: #2b2040; border: 2px solid #5a4a7a; cursor: pointer; padding: 0; pointer-events: auto; }
html:not(.touch-device) #chat-send { width: 32px; font-size: 14px; }
html.touch-device #chat-send { width: 52px; min-height: 40px; font-size: 22px; }