/* Cidade online: janela de chat sobre o palco, menu de jogador, bancas e o Salão de Trocas em blocos.
   Mesma língua visual do resto (theme-sumi/theme-estampa): papel, tinta índigo, um acento de laca, ouro só na recompensa. */

/* ---- janela de chat sobre o palco ---- */
#chat-dock{position:absolute;left:10px;bottom:10px;z-index:7;width:min(420px,calc(100% - 20px));display:flex;flex-direction:column;border-radius:4px;background:rgba(13,12,18,.86);border:1px solid rgba(236,226,208,.16);box-shadow:0 8px 22px rgba(0,0,0,.4);backdrop-filter:blur(6px);transition:opacity .2s}
#chat-dock .cd-head{display:flex;align-items:center;gap:6px;padding:4px 6px 0}
#chat-dock .cd-tabs{display:flex;gap:2px;flex:1;min-width:0;overflow:auto;scrollbar-width:none}
#chat-dock .cd-tabs button{flex:none;height:26px;padding:0 9px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dim,#a39d92);font:700 11px var(--ui);letter-spacing:.04em;cursor:pointer}
#chat-dock .cd-tabs button.active{color:var(--washi,#ece2d0);border-bottom-color:var(--shu,#b8452c)}
#chat-dock .cd-toggle{flex:none;width:28px;height:26px;border:0;background:none;color:var(--washi,#ece2d0);cursor:pointer;display:grid;place-items:center}
#chat-dock .cd-toggle .pi{width:18px;height:18px}
#chat-dock .cd-log{height:150px;overflow:auto;padding:6px 8px;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.35}
#chat-dock .cd-line{display:flex;flex-wrap:wrap;gap:0 5px;align-items:baseline;color:var(--washi,#ece2d0);overflow-wrap:anywhere}
#chat-dock .cd-line small{color:var(--dim,#a39d92);font-size:10px}
#chat-dock .cd-line i{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#8fa3c7}
#chat-dock .cd-line.ch-local i{color:#9ce9cc}#chat-dock .cd-line.ch-guild i{color:#d8b062}#chat-dock .cd-line.ch-pm i{color:#e39ab1}
#chat-dock .cd-line b,#chat-dock .cd-who{font:700 12px var(--ui);color:#fff1dc}
#chat-dock .cd-line.me b{color:var(--gold,#d8b062)}
#chat-dock .cd-who{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted rgba(255,241,220,.45)}
#chat-dock .cd-line span{color:var(--washi,#ece2d0)}
#chat-dock .cd-empty{margin:0;color:var(--dim,#a39d92);font-size:12px}
#chat-dock .cd-form{display:flex;align-items:center;gap:6px;padding:6px}
#chat-dock .cd-ch{flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#9ce9cc}
#chat-dock .cd-input{flex:1;min-width:0;height:34px;padding:0 10px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 13px var(--ui)}
#chat-dock .cd-form .action{height:34px}
/* recolhida: só as três últimas linhas, translúcida; o toque abre */
#chat-dock.collapsed{opacity:.78;background:rgba(13,12,18,.62);border-color:rgba(236,226,208,.08)}
#chat-dock.collapsed .cd-tabs,#chat-dock.collapsed .cd-form{display:none}
#chat-dock.collapsed .cd-head{position:absolute;right:0;top:0}
#chat-dock.collapsed .cd-log{height:auto;max-height:58px;padding:4px 36px 4px 8px;cursor:pointer}
#chat-dock.collapsed .cd-log .cd-line:nth-last-child(n+4){display:none}
#chat-dock.collapsed .cd-empty{display:none}
#chat-dock.collapsed:hover{opacity:1}
body.in-combat #chat-dock{opacity:.55;max-width:300px}
body.in-combat #chat-dock:not(.collapsed){opacity:1}
@media (max-width:900px){body.in-combat #chat-dock{display:none} #chat-dock{left:6px;bottom:6px;width:calc(100% - 12px)} #chat-dock .cd-log{height:120px}}

/* ---- menu rápido sobre outro jogador ---- */
#player-menu{position:absolute;z-index:8;min-width:160px;padding:8px 10px;border-radius:4px;background:rgba(13,12,18,.94);border:1px solid rgba(236,226,208,.18);border-left:3px solid var(--shu,#b8452c);box-shadow:0 8px 22px rgba(0,0,0,.45);color:var(--washi,#ece2d0)}
#player-menu b{display:block;font:700 13px var(--display);margin-bottom:2px}
#player-menu small{display:block;color:var(--gold,#d8b062);font-size:11px;margin-bottom:6px}
#player-menu .pm-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---- linhas especiais do chat: dados e emotes ---- */
.chat-line.k-roll p,#chat-dock .cd-line.k-roll span{color:var(--gold,#d8b062);font-weight:700}
.chat-line.k-emote p,#chat-dock .cd-line.k-emote span{color:#9ce9cc;font-style:italic}
#chat-dock .cd-line.k-emote span::before{content:'* '}

/* ---- Pavilhão das Lanternas: adornos ---- */
.wardrobe{display:grid;gap:12px}
.wardrobe .ic-gem{vertical-align:-2px}
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cos-card{display:grid;gap:6px;padding:12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03);align-content:start}
.cos-card.owned{border-color:rgba(156,233,204,.35)}
.cos-card.on{border-color:var(--gold,#d8b062);box-shadow:inset 0 0 0 1px rgba(216,176,98,.35)}
.cos-card b{font:700 14px var(--display);color:var(--washi,#ece2d0)}
.cos-card p{margin:0;color:var(--dim,#a39d92);font-size:12px;line-height:1.35}
.cos-card .cos-price{color:var(--washi,#ece2d0);font-weight:700}
.cos-card .cos-rule{color:var(--dim,#a39d92);font-size:11px}.cos-card .cos-rule.ok{color:#9ce9cc}
.cos-card .cos-on{color:var(--gold,#d8b062);font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cos-card .box-actions{margin-top:2px}
.cos-prev{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:3px;background:rgba(13,12,18,.6);position:relative;overflow:hidden}
.cos-prev.cos-title{color:#e9c98c;font:600 13px var(--ui)}
.cos-prev.cos-bubble{flex-direction:column;gap:2px;margin:6px 10px;padding:6px 12px;border-radius:6px;font:500 12px var(--ui);background:#fbf3e2}
.cos-prev.cos-bubble small{font:700 9px var(--ui)}
.cos-prev.cos-bubble em{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#b8452c}
.cos-prev.cos-sign{gap:6px;margin:10px 14px;padding:4px 10px;border-radius:3px;font:700 12px var(--ui);min-height:0}
.cos-prev.cos-sign .dot{width:6px;height:6px;border-radius:50%;background:#b8452c}
.cos-prev.cos-sign .lantern{width:7px;height:10px;border-radius:50%;background:#e8562c;box-shadow:0 0 8px 3px rgba(255,179,71,.55)}
.cos-prev.cos-aura i{position:absolute;width:5px;height:5px;border-radius:50%;animation:cos-float 2.6s ease-in-out infinite}
.cos-prev.cos-aura i:nth-child(1){left:30%;top:60%}.cos-prev.cos-aura i:nth-child(2){left:52%;top:35%;animation-delay:-.9s}.cos-prev.cos-aura i:nth-child(3){left:68%;top:65%;animation-delay:-1.7s}
.cos-aura.a_petals i{background:#f6b6c8;border-radius:60% 40%}.cos-aura.a_fireflies i{background:#e3f59a;box-shadow:0 0 6px #e3f59a}.cos-aura.a_ink i{background:#1d1a24;border:1px solid #6b6259}
.cos-aura.a_maple i{background:#d8432a;border-radius:60% 40%}.cos-aura.a_embers i{background:#ff7a2a;box-shadow:0 0 6px #ffb347}.cos-aura.a_snow i{background:#f4f8ff}.cos-aura.a_moon i{background:#dfe6ff;box-shadow:0 0 8px #aab6ff}
@keyframes cos-float{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-10px);opacity:1}}

/* ---- Salão de Trocas em blocos + bancas ---- */
.mkt-tabs{margin:0 0 10px}
.stall-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.stall{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.stall .av{grid-row:1/3;width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(236,226,208,.2)}
.stall b{font:700 14px var(--display);color:var(--washi,#ece2d0)}
.stall small{color:var(--dim,#a39d92);font-size:11px}
.stall .stall-actions{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stall.offline b{color:#b9b1a3}
.stall .on-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9ce9cc;margin-right:5px;vertical-align:middle}
.stall.offline .on-dot{background:#6b6259}
.myshop{display:grid;gap:10px;max-width:520px}
.myshop .shop-name{display:flex;gap:8px}.myshop .shop-name input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0)}
.myshop .req{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.myshop .req li{display:flex;gap:8px;align-items:center;color:var(--dim,#a39d92);font-size:13px}
.myshop .req li::before{content:'';width:8px;height:8px;border-radius:50%;border:1px solid var(--dim,#a39d92)}
.myshop .req li.ok{color:var(--washi,#ece2d0)}.myshop .req li.ok::before{background:#9ce9cc;border-color:#9ce9cc}
.vendor-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vendor-head .sign{padding:6px 12px;border-radius:3px;background:#f1e4cc;color:#2a211c;font:700 15px var(--display);border:1px solid #2a211c}
.chat-ch{color:#9ce9cc;font-style:normal;text-transform:uppercase;letter-spacing:.04em;font-size:10px}
.chat-line.ch-pm .chat-ch{color:#e39ab1}
.settings select{height:36px;padding:0 10px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 13px var(--ui)}

/* ---- Estação do Balão: as duas placas de viagem de um bairro formam uma coluna só ---- */
/* As duas têm a mesma âncora no index.html (borda esquerda, meio da primeira): a primeira fica nela e a segunda (col2) desce
   uma placa mais o vão. Antes cada uma era centrada num ponto próprio e, com nomes de larguras diferentes, uma encavalava
   na outra. Mesma largura nas duas (hud.js fitQuarterPlates), para a coluna fechar dos dois lados. */
#village-actions .signpost.quarter.col{transform:translate(0,-50%)}
#village-actions .signpost.quarter.col2{transform:translate(0,calc(50% + 6px))}
#village-actions .signpost.quarter.col:hover{transform:translate(3px,-50%)}
#village-actions .signpost.quarter.col2:hover{transform:translate(3px,calc(50% + 6px))}
#village-actions .signpost.quarter.col .sp-plate{min-width:var(--quarter-plate,0)}

/* ---- Praça social: salas de conversa, Pátio de Duelos e Palco das Folhas (src/plaza.js) ---- */
#chat-dock .cd-line.ch-room i{color:#f0c674}
#chat-dock .cd-line.k-duel span,#chat-dock .cd-line.k-draw span,.chat-line.k-duel p,.chat-line.k-draw p{color:var(--gold,#d8b062);font-weight:700}
.chat-line.ch-room .chat-ch{color:#f0c674}
.rooms,.room,.stage-panel,.duel-panel{display:grid;gap:12px;max-width:760px}
.room-form,.room-mine,.room-guild,.stage-goals,.duel-panel article{display:grid;gap:8px;padding:12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.room-form input,.room-form select{height:40px;padding:0 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 13px var(--ui);min-width:0}
.room-form .room-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.room-form .room-opts label{display:grid;gap:3px;color:var(--dim,#a39d92);font-size:11px}
.room-form .room-opts .action{margin-left:auto;min-height:40px}
.room-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.room-card{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line2,#2a2733);border-left:3px solid var(--shu,#b8452c);border-radius:4px;background:rgba(255,255,255,.03);align-content:start}
.room-card.k-party{border-left-color:#7fc7a4}.room-card.k-guild{border-left-color:var(--gold,#d8b062)}
.room-card.on{box-shadow:inset 0 0 0 1px rgba(216,176,98,.35)}
.room-card header,.room-mine{min-width:0}
.room-card b,.room-mine b,.room-guild b{display:block;font:700 14px var(--display);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.room-card small,.room-mine small,.room-guild small,.room-tag{color:var(--dim,#a39d92);font-size:11px}
.room-head h3{margin:2px 0;font:700 20px var(--display);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.room.k-party .room-head .eyebrow{color:#7fc7a4}.room.k-guild .room-head .eyebrow{color:var(--gold,#d8b062)}
.room-guild{border-left:3px solid var(--gold,#d8b062)}
.room-guild .action{justify-self:start}
.room-members,.duel-list,.stage-goals ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.room-members li,.duel-list li{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px;border-radius:3px;background:rgba(255,255,255,.03)}
.room-members li em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold,#d8b062)}
.room-members li .action,.duel-list li .action{margin-left:auto}
.room-members .chat-who{background:none;border:0;padding:0;color:var(--washi,#ece2d0);cursor:pointer;text-align:left}
.duel-list .av{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(236,226,208,.2);flex:none}
.duel-list b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--washi,#ece2d0)}
.duel-wait,.stage-now{margin:0;color:var(--washi,#ece2d0)}
.duel-panel article p,.stage-panel p,.stage-goals p{margin:0}
.stage-goals li{color:var(--dim,#a39d92);font-size:13px}
.stage-goals li::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;border:1px solid var(--dim,#a39d92)}
.stage-goals li.ok{color:var(--washi,#ece2d0)}.stage-goals li.ok::before{background:#9ce9cc;border-color:#9ce9cc}
.stage-goals .action{justify-self:start}

.duel-panel article>.action{justify-self:start}

/* ---- Cristais do Pavilhão (src/crystals.js): pacotes, pedido em aberto e histórico ---- */
.crystals{display:grid;gap:12px;max-width:760px}
.crystals p{margin:0}
.cr-wallet b{color:var(--gold,#d8b062)}
.cr-note{padding:10px 12px;border-left:3px solid var(--gold,#d8b062);background:rgba(255,255,255,.03);color:var(--washi,#ece2d0)}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cr-pack,.cr-pay,.cr-orders{display:grid;gap:6px;padding:12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03);align-content:start}
.cr-pack b{font:800 22px var(--ui);color:var(--gold,#d8b062)}
.cr-pack small{color:var(--dim,#a39d92);font-size:11px}
.cr-pack .box-actions{display:grid;gap:6px}
.cr-pay{border-left:3px solid var(--gold,#d8b062)}
.cr-pay textarea{width:100%;min-width:0;padding:8px 10px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 12px/1.4 ui-monospace,monospace;resize:none;overflow-wrap:anywhere}
.cr-pay a.action{text-decoration:none;display:inline-flex;align-items:center}
.cr-pay>.action{justify-self:start}
.cr-orders ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.cr-orders li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;font-size:12px;color:var(--dim,#a39d92)}
.cr-orders li b{color:var(--washi,#ece2d0)}
.cr-orders li em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.cr-orders li.st-paid em{color:#9ce9cc}.cr-orders li.st-refunded em{color:#e39ab1}
/* ---- Salão da guilda (src/guildhall.js): emblema desenhado e armazém ---- */
/* O emblema é um selo de papel com o brasão na tinta da guilda. O atlas (assets/icons/crest.webp) é uma máscara branca:
   --cx/--cy dizem a casa do brasão e --ink a tinta; --cols/--rows acompanham o atlas (tools/crest_gen.py). */
.crest{--s:28px;--cols:8;--rows:5;--ink:#23233a;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:#f3e9d6;box-shadow:inset 0 0 0 max(1px,calc(var(--s)*.06)) var(--ink);vertical-align:middle}
.crest::before{content:"";width:70%;height:70%;background:var(--ink);-webkit-mask:url(assets/icons/crest.webp) no-repeat;mask:url(assets/icons/crest.webp) no-repeat;-webkit-mask-size:calc(var(--cols)*100%) calc(var(--rows)*100%);mask-size:calc(var(--cols)*100%) calc(var(--rows)*100%);-webkit-mask-position:calc(var(--cx)*100%/(var(--cols) - 1)) calc(var(--cy)*100%/(var(--rows) - 1));mask-position:calc(var(--cx)*100%/(var(--cols) - 1)) calc(var(--cy)*100%/(var(--rows) - 1))}
.crest.xs{--s:18px;margin-right:4px;vertical-align:-4px}.crest.md{--s:52px}.crest.lg{--s:84px}.crest.xl{--s:104px}.crest.pick{--s:44px}
.guild-hero>.crest,.guild-card>.crest{align-self:flex-start}
/* a lista de guildas pedia 320 px por cartão e, numa tela de 320, o painel rolava de lado */
.guild-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.guild-card>div{min-width:0}.guild-card b{overflow-wrap:anywhere}
.crest-edit{display:grid;justify-items:center;gap:5px;flex:none;padding:0;border:0;background:none;color:var(--dim,#a39d92);cursor:pointer}
.crest-edit small{font:700 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.crest-edit:hover small,.crest-edit:focus-visible small{color:var(--washi,#ece2d0)}
.crest-edit:focus-visible{outline:2px solid var(--washi,#ece2d0);outline-offset:4px;border-radius:4px}
.chat-channel h3 .crest,.room-guild b .crest{margin-right:8px}
.room-tag .crest.xs{--s:16px;vertical-align:-3px}
/* escolha do emblema */
.crest-stage{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;margin-bottom:4px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.crest-stage>div{flex:1 1 220px;min-width:0}
.crest-stage h3{margin:3px 0 8px;font:21px var(--display);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.crest-stage .eyebrow{overflow-wrap:anywhere}
.crest-line{display:inline-flex;align-items:center;max-width:100%;margin:0 0 8px;padding:3px 10px 3px 3px;border-radius:999px;background:rgba(14,11,24,.78);color:#dfe6ff;font:700 12px var(--ui)}
.crest-line .crest.xs{margin-right:6px;vertical-align:0}
.crest-line span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crest-stage small{display:block}
.crest-inks{display:flex;flex-wrap:wrap;gap:8px}
.crest-ink{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 9px;border:1px solid var(--line2,#2a2733);border-radius:999px;background:rgba(0,0,0,.25);color:var(--muted,#b9b1a3);font:600 12.5px var(--ui);cursor:pointer}
.crest-ink i{width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #f3e9d6}
.crest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.crest-pick{display:grid;place-items:center;min-height:58px;padding:5px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(0,0,0,.22);cursor:pointer}
.crest-pick:hover:not(:disabled),.crest-ink:hover:not(:disabled){border-color:rgba(236,226,208,.5)}
.crest-pick.active,.crest-ink.active{border-color:#c9472d;box-shadow:inset 0 0 0 1px #c9472d;color:var(--washi,#ece2d0)}
.crest-pick:disabled,.crest-ink:disabled{cursor:default}
.crest-pick:focus-visible,.crest-ink:focus-visible{outline:2px solid var(--washi,#ece2d0);outline-offset:2px}
.crest-note{display:block;margin-top:10px}
.crest-save{position:sticky;bottom:-1px;z-index:2;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:#16141e}
.crest-now{display:flex;align-items:center;gap:8px;flex:1 1 170px;min-width:0;color:var(--washi,#ece2d0);font:700 13px var(--ui)}
.crest-now span:last-child{min-width:0;overflow-wrap:anywhere}
/* celular: a prova fica ao lado do texto e a barra de baixo cabe numa linha (selo, usar, cancelar) */
@media (max-width:560px){.crest-stage{flex-wrap:nowrap;align-items:flex-start;gap:12px;padding:12px}.crest-stage>div{flex:1 1 0}.crest-stage .crest.xl{--s:68px}.crest-stage h3{font-size:18px}
  .crest-save{flex-wrap:nowrap;padding:8px}.crest-now{flex:0 0 auto}.crest-now span:last-child{display:none}.crest-save .action{flex:1 1 auto;min-width:0;padding-left:8px;padding-right:8px}}
/* armazém */
.vault-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:4px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.vault-copy{flex:1 1 220px;min-width:0}
.vault-copy h3{margin:2px 0 8px;font:21px var(--display);color:var(--washi,#ece2d0)}
.vault-copy p{margin:8px 0 0;font-size:13px;color:var(--muted,#b9b1a3)}
.vault-copy p b{color:var(--washi,#ece2d0)}
.vault-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.vault-row select,.vault-row input{min-width:0;min-height:40px;padding:0 10px;border-radius:4px;background:rgba(0,0,0,.35);border:1px solid var(--line2,#2a2733);color:var(--text,#ece2d0);font:inherit}
.vault-row select{flex:1 1 170px}.vault-row input{flex:0 1 76px}
.vault-row .action{flex:0 0 auto;min-height:40px}
.vault-hint{display:block;margin-top:2px}
.vault-block{margin:0 0 10px}
.vault-block .action{margin-left:6px;vertical-align:baseline}
.vault-piece .action.locked{opacity:.55}
.vault-filter{margin-bottom:10px}
/* a aba: no computador, as peças à esquerda e guardar, cota e registro à direita; no celular, guardar, peças e o resto */
.vault-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"list put" "list side";gap:0 18px;align-items:start}
.vault-put{grid-area:put;min-width:0}.vault-pieces{grid-area:list;min-width:0}.vault-side{grid-area:side;min-width:0}
@media (max-width:900px){.vault-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"put" "list" "side"}}
/* uma peça por linha: ícone, nome, o que é, quem guardou e o botão; o item abre a ficha inteira */
.vault-list{display:grid;gap:6px}
.vault-piece{border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.vp-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;list-style:none}
summary.vp-row{cursor:pointer}
summary.vp-row::-webkit-details-marker{display:none}
summary.vp-row:focus-visible{outline:2px solid var(--washi,#ece2d0);outline-offset:-2px}
.vp-ic{display:grid;place-items:center;width:44px;height:44px}
.vp-ic .item-art{width:40px;height:40px}
.vp-ic .mat-dot{width:26px;height:26px;border-radius:4px;background:var(--shu,#c9472d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.vp-ic .card-art{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.05)}
.vp-ic .card-art img{max-width:100%;max-height:100%}
.vp-main{display:grid;gap:1px;min-width:0}
.vp-main b{font:700 13.5px var(--ui);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.vp-main small{color:var(--dim,#a39d92);font-size:11.5px;overflow-wrap:anywhere}
.vp-see{font-style:normal;color:var(--muted,#b9b1a3);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.vp-see span:last-child,details[open]>.vp-row .vp-see span:first-child{display:none}
details[open]>.vp-row .vp-see span:last-child{display:inline}
.vp-more{padding:0 10px 10px}
.vp-more .item{max-width:380px}
.vp-row .action{min-height:36px}
.vault-by{min-width:0}
.vault-who{padding:0;border:0;background:none;color:var(--washi,#ece2d0);font:inherit;font-weight:700;cursor:pointer}
.vault-who:hover{text-decoration:underline}
.vault-quota{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.vault-quota .cur-switch button{min-width:40px;min-height:36px;justify-content:center}
.vault-quota small{flex:1 1 160px}
.vault-rule{margin:0}
.vault-log{display:grid;margin:0;padding:0;list-style:none;max-height:300px;overflow-y:auto}
.vault-log li{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 2px 7px 11px;border-bottom:1px solid var(--line,#24212c);font-size:12.5px;color:var(--muted,#b9b1a3)}
.vault-log li:last-child{border-bottom:0}
.vault-log li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:#7fc7a4}
.vault-log li.act-out::before{background:#c9472d}.vault-log li.act-back::before{background:#8f8a80}.vault-log li.dim::before{display:none}
.vault-log li span{min-width:0;overflow-wrap:anywhere}.vault-log li b{color:var(--washi,#ece2d0)}
.vault-log li small{flex:none;color:var(--dim,#a39d92)}
.vault-rules{margin-top:12px}
@media (pointer:coarse){.vp-row .action,.vault-quota .cur-switch button{min-height:40px}}

/* ---- Menu rápido de um jogador com mais opções (carta, duelo, sala): largura contida, medida por city.js ---- */
#player-menu{box-sizing:border-box;max-width:min(300px,calc(100% - 8px))}

/* ---- Peças que mudam de dono (src/goods.js): o desenho pequeno de item, carta, material, ouro, chave e herói ---- */
.goods-thumb{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:rgba(13,12,18,.6);border:1px solid var(--line2,#2a2733);overflow:hidden;font-size:22px}
.goods-thumb .item-art{width:38px;height:38px}
.goods-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.goods-thumb .coin-ic{width:24px;height:24px}
.goods-thumb .goods-dot{width:24px;height:24px;border-radius:4px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.4),transparent 55%),var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.goods-thumb[class*="rarity-"]{border-color:color-mix(in srgb,var(--c) 55%,transparent)}

/* ---- Selo de presente no cartão do item (Bolsa): a peça que chegou por carta fica 7 dias fora do comércio ---- */
.hold-tag{display:flex;align-items:center;gap:6px;padding:3px 8px;border-left:2px solid var(--shu,#b8452c);border-radius:0 3px 3px 0;background:rgba(184,69,44,.1);color:var(--washi,#ece2d0);font-size:11px;line-height:1.3}
.hold-tag .pi{width:14px;height:14px}

/* ---- Correio de Tsukimori (src/post.js): caixa de entrada, escrever e enviadas ---- */
.post{display:grid;gap:12px;max-width:820px}
.post p{margin:0}
.post-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.post-top p{flex:1 1 260px;min-width:0}
.post .box-actions,.auction .box-actions{margin:0}
.post-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.post-row{display:grid;gap:8px;min-width:0;padding:10px 12px;border:1px solid var(--line2,#2a2733);border-left:3px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.post-row.unread{border-left-color:var(--shu,#b8452c);background:rgba(184,69,44,.07)}
.post-row.system{border-left-color:var(--gold,#d8b062)}
.post-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.post-head .pi{width:18px;height:18px}
.post-head .eyebrow{color:var(--gold,#d8b062)}
.post-head small{color:var(--dim,#a39d92);font-size:11px}
.post-head em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim,#a39d92)}
.post-row.unread .post-head em{color:var(--washi,#ece2d0);background:var(--shu,#b8452c);padding:1px 6px;border-radius:2px}
.post-head em.read{color:#9ce9cc}
.post-who{min-width:0;padding:0;border:0;background:none;color:var(--washi,#ece2d0);font:700 14px var(--display);text-align:left;cursor:pointer;overflow-wrap:anywhere;text-decoration:underline dotted rgba(236,226,208,.4);text-underline-offset:3px}
.post-who:hover{text-decoration-style:solid}
.post-body{color:var(--washi,#ece2d0);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.post-att{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;padding:8px;border-radius:3px;background:rgba(0,0,0,.24)}
.post-att-txt{flex:1 1 150px;min-width:0;display:grid;gap:2px}
.post-att-txt b{font-size:13.5px;color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.post-att-txt b[class*="rarity-"]{color:var(--c)}
.post-att-txt small{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.post-att-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.post-wait{color:var(--gold,#d8b062);font-size:11.5px}
.post-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.post-actions small{margin-right:auto}
.post-form{display:grid;gap:12px;max-width:560px}
.post-field,.auc-field{display:grid;gap:5px;min-width:0}
.cap-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--dim,#a39d92);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cap-line small{letter-spacing:0;text-transform:none}
.post-form input,.post-form select,.post-form textarea,.auc-form input,.auc-form select,.auc-bid input{width:100%;min-width:0;min-height:40px;padding:8px 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 14px var(--ui)}
.post-form textarea{resize:vertical;line-height:1.4}
.post-pick{display:flex;gap:8px;min-width:0}
.post-pick select{flex:1 1 0}
.post-pick input{flex:0 0 92px;width:92px}
.post-to{display:flex;align-items:center;gap:10px;min-height:40px;padding:2px 4px 2px 12px;border:1px solid var(--line2,#2a2733);border-radius:3px;background:#16141e}
.post-to b{flex:1;min-width:0;color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.post-fee{color:var(--washi,#ece2d0)}
.post-fee b{color:var(--gold,#d8b062)}
.post-fee.bad,.post-why,.auc-hint.bad{color:#f0a48f}
.post-hint{padding:8px 12px;border-left:3px solid var(--gold,#d8b062);background:rgba(255,255,255,.03);color:var(--washi,#ece2d0);font-size:13px;line-height:1.4}
.pc-actions{margin:12px 0 0}
.pc-actions .pi{width:16px;height:16px}

/* ---- Casa de Leilões (src/auction.js): lotes, meus lances, leiloar e encerrados ---- */
.auction{display:grid;gap:12px}
.auction p{margin:0}
.auction .sub-title{margin:6px 0 0!important}
.auc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;color:var(--washi,#ece2d0)}
.auc-top b{color:var(--gold,#d8b062)}
.auc-flash{display:grid;gap:8px;padding:10px 12px;border-left:3px solid var(--shu,#b8452c);border-radius:0 4px 4px 0;background:rgba(184,69,44,.1);color:var(--washi,#ece2d0)}
.auc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.auc-bar small{flex:1 1 240px;min-width:0}
.auc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start}
.auc-lot{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.02)}
.auc-head{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:10px 12px}
.auc-head-txt{flex:1;min-width:0;display:grid;gap:1px}
.auc-head-txt b{font-size:14px;line-height:1.25;color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.auc-head-txt b[class*="rarity-"]{color:var(--c)}
.auc-head-txt small{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.auc-more{border-top:1px solid var(--line2,#2a2733)}
.auc-more summary{padding:8px 12px;color:var(--dim,#a39d92);font-size:12px;cursor:pointer}
.auc-more summary:hover{color:var(--washi,#ece2d0)}
.auc-more>.item{border:0;border-radius:0 0 4px 4px}
.auc-lot.lead{border-color:rgba(156,233,204,.5)}
.auc-lot.out{border-color:var(--shu,#b8452c)}
.auc-lot.mine{border-color:rgba(216,176,98,.55)}
.auc-info{display:grid;gap:6px;padding:10px 12px;border-top:1px solid var(--line2,#2a2733)}
.auc-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;min-width:0;color:var(--washi,#ece2d0);font-size:12.5px}
.auc-row.dim{color:var(--dim,#a39d92);font-size:11.5px}
.auc-time{font-weight:700}
.auc-time.soon{color:#f0a48f}
.auc-price{font:800 16px var(--ui);color:var(--gold,#d8b062);white-space:nowrap}
.auc-chip{padding:2px 7px;border-radius:2px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.auc-chip.lead{color:#0f2a21;background:#9ce9cc}
.auc-chip.out{color:var(--washi,#ece2d0);background:var(--shu,#b8452c)}
.auc-chip.mine{color:#2a1d0c;background:var(--gold,#d8b062)}
.auc-bid{display:flex;gap:6px;min-width:0}
.auc-bid input{flex:1 1 0;min-height:36px;padding:4px 10px}
.auc-hint{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.35}
.auc-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.auc-done{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03)}
.auc-done>div{flex:1 1 160px;min-width:0;display:grid;gap:2px}
.auc-done b{color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.auc-done b[class*="rarity-"]{color:var(--c)}
.auc-done small{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.35}
.auc-form{display:grid;gap:12px;min-width:0}
.auc-sell-grid{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:14px;align-items:start}
.auc-sell-side{display:grid;gap:12px;min-width:0}
.auc-facts{display:grid;gap:4px;margin:0;padding:0;list-style:none;color:var(--washi,#ece2d0);font-size:12.5px;line-height:1.4}
.auc-facts b{color:var(--gold,#d8b062)}
@media (max-width:760px){.auc-sell-grid{grid-template-columns:minmax(0,1fr)} .auc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.post .action.small,.auction .action.small{min-height:40px} .auc-bid input{min-height:40px}}

/* ---------- Pavilhão das Lanternas, quarta rodada: provador, vitrine da semana, conjuntos, presente e os tipos novos ----------
   (src/cosmetics.js monta o painel; src/cosmetics-draw.js desenha o provador e as miniaturas em canvas) */
.wardrobe{grid-template-columns:minmax(0,232px) minmax(0,1fr);align-items:start;gap:16px}
.cos-side{position:sticky;top:0;z-index:3;display:grid;gap:8px;align-content:start;min-width:0}
.cos-main{display:grid;gap:12px;min-width:0;align-content:start}
.cos-fit{display:grid;gap:6px;padding:8px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:var(--surf,#16141e)}
.cos-fit canvas{display:block;width:100%;height:176px;border-radius:3px;background:#1d1b29}
.cos-fit-note{color:var(--dim,#a39d92);font-size:11.5px;line-height:1.4}
.cos-fit-note b{color:var(--washi,#ece2d0);font-weight:600}
.cos-fit .action{justify-self:start}
.cos-purse{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:12.5px;color:var(--dim,#a39d92)}
.cos-purse b{color:var(--washi,#ece2d0)}
.cos-purse .ic-gem{vertical-align:-2px}
.cos-filter{display:flex;gap:4px}
.cos-filter button{flex:1 1 0;min-width:0;min-height:32px;padding:0 6px;border:1px solid var(--line2,#2a2733);border-radius:3px;background:none;color:var(--dim,#a39d92);font:600 12px var(--ui);cursor:pointer}
.cos-filter button.on{color:#1b1307;background:var(--washi,#ece2d0);border-color:transparent}
.modal-body .cos-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:2px 0 0;padding:0;font:700 16px/1.25 var(--display);color:var(--washi,#ece2d0)}
.modal-body .cos-h::before{content:none}
.cos-h em{font:600 11px var(--ui);font-style:normal;color:var(--dim,#a39d92);letter-spacing:.04em}
.cos-h small{flex:1 1 100%;font:400 12.5px/1.45 var(--ui);color:var(--dim,#a39d92);max-width:74ch}
.cos-grid.sets{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.cos-card,.cos-set{position:relative}
.cos-card.trying{border-color:rgba(236,226,208,.75)}
.cos-card .box-actions,.cos-set .box-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.cos-card{grid-template-rows:auto auto auto 1fr auto}
.cos-tags{display:flex;flex-wrap:wrap;gap:4px;min-height:17px}
.cos-tag{font:700 9.5px/1 var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px 3px;border-radius:2px;border:1px solid transparent;white-space:nowrap}
.cos-tag.on{color:#1b1307;background:var(--gold,#d8b062)}
.cos-tag.have{color:#9ce9cc;border-color:rgba(156,233,204,.45)}
.cos-tag.feat{color:#c9cdf5;border-color:rgba(157,168,240,.45)}
.cos-tag.week{color:var(--gold,#d8b062);border-color:rgba(216,176,98,.55)}
.cos-tag.new{color:#fff5ec;background:#b8452c}
.cos-tag.set{color:var(--dim,#a39d92);border-color:var(--line2,#2a2733)}
/* de onde o adorno vem: etiqueta discreta ao lado das outras (o feito mantém a cor de conquista) e, no alto da aba, o
   filtro de origem, com botões do tamanho do texto (o da coluna, tenho / não tenho, divide a largura por igual) */
.cos-tag.pav{color:var(--washi,#ece2d0);border-color:rgba(236,226,208,.38)}
.cos-tag.game{color:var(--dim,#a39d92);border-color:var(--line2,#2a2733)}
.cos-tag.event{color:#c9cdf5;border-color:rgba(157,168,240,.45)}
.cos-tag[title]{cursor:help}
.cos-filter.src{flex-wrap:wrap}
.cos-filter.src button{flex:0 1 auto;padding:0 12px}
/* "Comprar com o saldo do Pavilhão" não cabe numa linha no cartão de celular (150 px): quebra em duas em vez de alargar
   o cartão e empurrar a aba para o lado. Com as camadas ligadas, é o botão de quase todo adorno. */
.cos-card [data-cos-wallet],.cos-set [data-cos-wallet]{white-space:normal;min-width:0;max-width:100%;padding-block:5px;line-height:1.2;text-align:left}
.cos-card .cos-price s,.cos-set .cos-price s{margin-left:4px;color:var(--dim,#a39d92);font-weight:400}
.cos-card .cos-price.paid{color:var(--dim,#a39d92);font-weight:500}
.cos-set .cos-price{color:var(--washi,#ece2d0);font-weight:700}
.cos-why{color:#e8b29a;font-size:11.5px;line-height:1.35}
.action.small.on{color:var(--washi,#ece2d0);border-color:rgba(236,226,208,.7);background:rgba(236,226,208,.12)}
.cos-giftbtn{margin-left:auto;padding:0 8px;min-width:32px}
.cos-giftbtn .pi{font-size:19px}
.cos-giftrow{margin-top:12px}
.cos-giftrow .pi{font-size:16px}
.cos-set{display:grid;gap:6px;padding:12px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:rgba(255,255,255,.03);align-content:start}
.cos-set.owned{border-color:rgba(156,233,204,.35)}
.cos-set>b{font:700 15px var(--display);color:var(--washi,#ece2d0)}
.cos-set p{margin:0;color:var(--dim,#a39d92);font-size:12px;line-height:1.35}
.cos-set ul{display:grid;gap:3px;margin:2px 0;padding:0;list-style:none}
.cos-set li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--washi,#ece2d0);min-width:0}
.cos-set li span{min-width:0;overflow-wrap:anywhere}
.cos-set li small{color:var(--dim,#a39d92);font-size:10.5px;white-space:nowrap}
.cos-set li.have span{color:#9ce9cc}
.cos-gift,.cos-got{display:grid;gap:6px;padding:10px 12px;border-left:3px solid var(--gold,#d8b062);background:rgba(255,255,255,.03);font-size:13px;color:var(--washi,#ece2d0)}
.cos-gift>b,.cos-got>b{font:700 14px var(--display)}
.cos-gift select{min-height:36px;max-width:100%;padding:0 8px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:var(--surf,#16141e);color:var(--washi,#ece2d0);font:500 13px var(--ui)}
.cos-got span{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cos-got i{font-style:normal}
/* miniaturas dos tipos novos */
.cos-prev.cos-ink b{padding:4px 12px;border-radius:99px;background:rgba(14,11,24,.78);font:700 13px var(--ui)}
.cos-prev.cos-frame .av{width:40px;height:40px}
.cos-prev.cos-thumb canvas{display:block;height:56px;width:auto}
.cos-prev.cos-balloon svg{display:block;width:44px;height:55px;flex:none}
.cos-prev.cos-trail{gap:9px}
.cos-prev.cos-trail i{display:block;width:9px;height:5px;border-radius:50%}
.cos-trail i:nth-child(1){opacity:.35}.cos-trail i:nth-child(2){opacity:.6}.cos-trail i:nth-child(3){opacity:.85}
.cos-trail i:nth-child(odd){transform:translateY(-4px) rotate(-8deg)}.cos-trail i:nth-child(even){transform:translateY(4px) rotate(-8deg)}
.cos-trail.r_ink{background:rgba(236,226,208,.9)}.cos-trail.r_ink i{background:#17141f}
.cos-trail.r_petals i{background:#ee9ab5;border-radius:60% 40%}
.cos-trail.r_ripples i{width:13px;height:6px;background:none;border:1px solid #d6ecff}
.cos-trail.r_embers i{width:4px;height:4px;background:#ff7a2a;box-shadow:0 0 5px #ffb347}
.cos-trail.r_dust i{width:11px;height:8px;background:#cdbfa5}
/* moldura de retrato (perfil, chat e a miniatura): dois aros, sem mexer no tamanho do retrato */
.av.fr{border-color:transparent}
.av.fr-f_ink{box-shadow:0 0 0 2px #15131b,0 0 0 3px #ece2d0}
.av.fr-f_lacquer{box-shadow:0 0 0 2px #b8452c,0 0 0 3px #5e1f12}
.av.fr-f_jade{box-shadow:0 0 0 2px #6fbf9a,0 0 0 3px #1f4a3a}
.av.fr-f_petal{box-shadow:0 0 0 2px #f2b3c6,0 0 0 3px #c0395c}
.av.fr-f_moon{box-shadow:0 0 0 2px #dfe6ff,0 0 0 3px #5a6494}
.av.fr-f_veteran{box-shadow:0 0 0 2px #d8b062,0 0 0 3px #6b4f1c,0 0 0 4px #d8b062}
.chat-who .av.fr{margin:3px}
/* tinta e selo do nome no chat */
.cos-name{font:inherit}
.cos-hanko{display:inline-block;width:1.1em;height:1.1em;margin-right:.32em;vertical-align:-.2em;border-radius:2px}
/* celular: o provador vira uma faixa baixa no alto (tela à esquerda; cristais, filtro e a prova à direita) */
@media (max-width:760px){
  .wardrobe{grid-template-columns:minmax(0,1fr);gap:10px}
  .cos-side{grid-template-columns:128px minmax(0,1fr);grid-auto-rows:min-content;gap:5px 10px;padding:6px;border:1px solid var(--line2,#2a2733);border-radius:4px;background:var(--surf,#16141e);box-shadow:0 8px 10px -8px rgba(0,0,0,.7)}
  .cos-fit{display:contents}
  .cos-fit canvas{grid-column:1;grid-row:1/6;height:112px;align-self:start}
  .cos-side>*,.cos-fit>*{grid-column:2}
  .cos-fit-note{font-size:11px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .cos-fit-note[hidden]{display:none}
  .cos-fit .action{min-height:32px}
  .cos-purse{font-size:12px}
  .cos-filter button{min-height:34px;padding:0 4px;font-size:11.5px;white-space:nowrap}
  .cos-filter.src button{min-height:40px;padding:0 10px}
  .cos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cos-grid.sets{grid-template-columns:minmax(0,1fr)}
}
@media (max-height:700px) and (min-width:761px){.cos-fit canvas{height:150px}}
/* Presentear com nome: ícone e palavra; quando não cabe ao lado de Provar e Comprar, desce para a linha de baixo. */
.cos-giftbtn{display:inline-flex;align-items:center;gap:5px}
.cos-giftbtn>span{font-weight:600}

/* ---- Convés do Balão (o quarto lugar da cidade) ---- */
/* As placas do convés só aparecem nele (a regra dos outros bairros está em theme-game.css). */
body:not([data-quarter="balloon"]) #village-actions .signpost[data-q="balloon"]{display:none!important}
/* Estação do Balão com três destinos: a terceira placa da coluna (col3) desce duas placas mais os vãos. */
#village-actions .signpost.quarter.col3{transform:translate(0,calc(150% + 12px))}
#village-actions .signpost.quarter.col3:hover{transform:translate(3px,calc(150% + 12px))}
/* Palco pequeno no computador (janela de 901 a 1180 px de largura, ou até 620 px de altura): placas mais enxutas, para a
   coluna de três da Estação do Balão e as vizinhas caberem sem se encostar. O nome continua em 12 px. */
@media (min-width:901px) and (max-width:1180px),(min-width:901px) and (max-height:620px){
  #village-actions .signpost{min-height:36px}
  #village-actions .signpost .sp-icon{width:32px;height:32px}
  #village-actions .signpost .sp-icon .pi{width:26px;height:26px}
  #village-actions .signpost .sp-plate{min-height:26px;margin-left:-10px;padding:2px 9px 3px 15px}
  #village-actions .signpost b{font-size:12px}
  #village-actions .signpost .sp-lv{font-size:9px}
}

/* ---- Sala do Global por idioma: o botão na janela de chat e os quatro botões no painel ---- */
/* O menu abre por cima das falas, dentro da própria janela: fora dela seria cortado pela borda do palco no celular e nas
   janelas baixas. Duas colunas, para caber na altura das falas. */
#chat-dock .cd-lang{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:3px;border:1px solid rgba(236,226,208,.22);background:rgba(255,255,255,.04);color:var(--dim,#a39d92);font:700 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
#chat-dock .cd-lang[hidden]{display:none}
#chat-dock .cd-lang b{color:var(--washi,#ece2d0);font:800 11px var(--ui)}
#chat-dock .cd-lang:hover,#chat-dock .cd-lang[aria-expanded="true"]{border-color:var(--washi,#ece2d0);color:var(--washi,#ece2d0)}
#chat-dock.collapsed .cd-lang,#chat-dock.collapsed .cd-langs{display:none}
#chat-dock .cd-langs{position:absolute;right:6px;top:30px;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;width:min(320px,calc(100% - 12px));max-height:calc(100% - 36px);overflow:auto;padding:8px 10px 10px;border-radius:4px;background:rgba(13,12,18,.98);border:1px solid rgba(236,226,208,.2);border-left:3px solid var(--shu,#b8452c);box-shadow:0 8px 22px rgba(0,0,0,.5)}
#chat-dock .cd-langs[hidden]{display:none}
#chat-dock .cd-langs>b{grid-column:1/-1;font:700 13px var(--display);color:var(--washi,#ece2d0)}
#chat-dock .cd-langs>small{grid-column:1/-1;color:var(--dim,#a39d92);font-size:11px;line-height:1.3;margin-bottom:2px}
#chat-dock .cd-langs button{display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;padding:0 10px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:rgba(255,255,255,.03);color:var(--washi,#ece2d0);font:500 13px var(--ui);cursor:pointer;text-align:left}
#chat-dock .cd-langs button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-dock .cd-langs button i{min-width:22px;font:800 10px var(--ui);letter-spacing:.06em;color:var(--dim,#a39d92)}
#chat-dock .cd-langs button[aria-checked="true"]{border-color:var(--shu,#b8452c);background:rgba(184,69,44,.12);font-weight:700}
#chat-dock .cd-langs button[aria-checked="true"] i{color:var(--washi,#ece2d0)}
@media (max-width:520px){#chat-dock .cd-lang span{display:none}}
@media (max-width:900px){#chat-dock .cd-langs>small{display:none} #chat-dock .cd-langs button{min-height:36px}}
/* A janela aberta nunca passa da altura do palco: num celular de 320 px o palco tem uns 170 px e as abas (com o botão da
   sala e o de recolher) saíam por cima da borda. As falas encolhem para o resto caber. */
#chat-dock{max-height:calc(100% - 12px)}
#chat-dock:not(.collapsed) .cd-log{flex:0 1 auto;min-height:40px}
/* Grade de lugares do celular: a segunda linha de um botão (aviso do momento, como a próxima apresentação do palco). */
#district-grid button small{display:block;font:700 10px/1.25 var(--ui);letter-spacing:.02em;color:var(--gold,#d8b062);overflow-wrap:anywhere}
.chat-rooms{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.chat-rooms span{margin-right:2px;color:var(--dim,#a39d92);font:700 10px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.chat-rooms button{min-height:36px;padding:0 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:rgba(255,255,255,.03);color:var(--washi,#ece2d0);font:500 13px var(--ui);cursor:pointer}
.chat-rooms button.active{border-color:var(--shu,#b8452c);background:rgba(184,69,44,.12);font-weight:700}

/* ---- Palco das Folhas: agenda da comunidade (src/plaza.js) ---- */
.stage-agenda{display:grid;gap:8px;padding:12px;border:1px solid var(--line2,#2a2733);border-left:3px solid var(--shu,#b8452c);border-radius:4px;background:rgba(255,255,255,.03)}
.agenda-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.agenda-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:3px;background:rgba(255,255,255,.03)}
.agenda-list time{min-width:52px;font:800 13px var(--ui);color:var(--washi,#ece2d0);white-space:nowrap}
.agenda-list li div{min-width:0}
.agenda-list b{display:block;font:700 14px var(--display);color:var(--washi,#ece2d0);overflow-wrap:anywhere}
.agenda-list small{color:var(--dim,#a39d92);font-size:11px}
.agenda-list li.mine{box-shadow:inset 0 0 0 1px rgba(236,226,208,.28)}
.agenda-list li.live time{color:#e0603f}
.agenda-form{display:grid;gap:8px}
.agenda-form input,.agenda-form select{height:40px;min-width:0;padding:0 12px;border-radius:3px;border:1px solid var(--line2,#2a2733);background:#16141e;color:var(--washi,#ece2d0);font:400 13px var(--ui)}
.agenda-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.agenda-opts label{display:grid;gap:3px;color:var(--dim,#a39d92);font-size:11px}
.agenda-opts .action{margin-left:auto;min-height:40px}
.agenda-why,.agenda-mine{margin:0;padding:8px 10px;border-radius:3px;background:rgba(255,255,255,.03);font-size:13px}
.agenda-why{color:var(--dim,#a39d92)}.agenda-mine{color:var(--washi,#ece2d0)}
#chat-dock .cd-line.k-stage span,.chat-line.k-stage p{color:var(--gold,#d8b062);font-weight:700}