/*   CSS FILE HEADER #
 *
 *   File:         [bancada.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['07.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['The bench of the Ficha FAC: a walnut table with brass and leather that rises over the book, and sheets of the book paper on it (body, backpack, market) drawn in the sepia ink of Daniel paper sheet.']
 */

/* ================= THE TABLE ================= */
.bancada { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 4, 2, .55); overflow: hidden; }
body.com-bancada { overflow: hidden; }
.mesa {
    position: relative; width: min(1500px, 100vw); height: min(940px, calc(100vh - 18px)); display: flex; flex-direction: column;
    border-radius: 14px 14px 0 0; padding: 14px 26px 22px;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(255, 210, 140, .18), transparent 70%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
        url('../../comum/img/madeira.webp') 0 0 / 640px,
        #3a2414;
    box-shadow: inset 0 2px 0 rgba(255, 220, 160, .18), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 -12px 40px rgba(0, 0, 0, .6);
}
/* brass edge and a leather blotter under the sheets */
.mesa::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 14px 14px 0 0; pointer-events: none;
    background: linear-gradient(180deg, #f3d98e, #b88c34 45%, #5a3d0e);
}
.mesa::after {
    content: ''; position: absolute; inset: 64px 18px 14px; border-radius: 8px; pointer-events: none; z-index: 0;
    background: url('../../comum/img/couro.webp') 0 0 / 420px, #3b1d14;
    box-shadow: inset 0 0 0 2px rgba(214, 170, 92, .35), inset 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .6);
    opacity: .9;
}

.mesa-topo { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; height: 50px; color: #f1e2bd; }
.mesa-voltar { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border: 1px solid rgba(243, 217, 142, .45); border-radius: 3px; background: rgba(0, 0, 0, .25); color: inherit; font: italic 1.05em 'IM Fell English', serif; cursor: pointer; }
.mesa-voltar:hover { border-color: #f3d98e; background: rgba(0, 0, 0, .4); }
.mesa-voltar .ic { width: 1.1em; height: 1.1em; }
.mesa-abas { --fundo-2: rgba(0, 0, 0, .25); --borda: rgba(243, 217, 142, .3); --borda-forte: rgba(243, 217, 142, .55); --texto-2: #e8d7ae; --texto: #fff4d6; --painel-2: rgba(0, 0, 0, .4); }
.mesa-abas button { font: 1.05em var(--uncial); letter-spacing: .04em; padding: .3em 1.1em; }
.mesa-dica { margin-left: auto; font: italic .95em 'IM Fell English', serif; opacity: .7; }
.mesa-dica kbd { padding: 0 .35em; border: 1px solid currentColor; border-radius: 3px; font: inherit; font-style: normal; }

.mesa-papeis { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 482px; gap: 26px; padding: 18px 10px 4px; }
.mesa-esquerda { position: relative; min-height: 0; display: grid; }
.mesa-esquerda > .papel { grid-area: 1 / 1; }
.mesa-direita { position: relative; min-height: 0; display: grid; }

/* ================= SHEETS ================= */
.papel {
    position: relative; min-height: 0; overflow: auto; padding: 18px 24px 22px; color: var(--tinta); font-family: var(--serif);
    border-radius: var(--e-raio-papel);
    background:
        radial-gradient(90% 60% at 20% 0%, rgba(255, 240, 200, .22), transparent 70%),
        radial-gradient(ellipse at center, transparent 60%, rgba(120, 75, 20, .24) 100%), var(--g-papiro), var(--papel);
    /* lying on the leather blotter: a hairline lip, a contact shadow and the long candle shadow toward bottom-right */
    box-shadow: 0 1px 0 rgba(255, 248, 228, .35) inset, 0 -1px 0 rgba(90, 55, 15, .25) inset, 1px 2px 1px rgba(0, 0, 0, .35), 4px 8px 6px rgba(0, 0, 0, .28), 10px 22px 34px rgba(0, 0, 0, .45);
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tinta) 35%, transparent) transparent;
}
.papel-corpo { transform: rotate(-.6deg); }
.papel-mochila { transform: rotate(.5deg); }
.papel-mercado { transform: rotate(-.3deg); }
[data-tom="escuro"] .papel { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .45) 100%), var(--g-papiro), var(--papel); }
.papel-titulo { margin: 0 0 6px; font: 2.3em/1 var(--uncial); color: var(--tinta); font-weight: 400; text-transform: lowercase; }
.papel h3 { margin: 18px 0 8px; font: 1.35em/1 var(--uncial); font-weight: 400; text-transform: lowercase; border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 45%, transparent); padding-bottom: 5px; }
/* auto sort buttons (13/10): small, in the heading line of the backpack and of the chest */
.papel h3 .mochila-organizar, .papel h3 .bau-organizar { margin-left: .6em; padding: 1px 12px; font: italic .6em var(--serif); text-transform: none; vertical-align: middle; border: 1px dashed currentColor; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.papel h3 .mochila-organizar:hover, .papel h3 .bau-organizar:hover { opacity: 1; border-style: solid; }
.papel h3 small { margin-left: .5em; font: italic .62em var(--serif); opacity: .75; text-transform: none; }
.area-vazia { margin: 6px 0; font: italic .95em var(--serif); opacity: .6; }
.bancada .it-glifo { display: inline-grid; place-items: center; color: var(--tinta); }
.bancada .it-glifo svg { width: 100%; height: 100%; }

/* ================= BODY ================= */
.corpo { position: relative; width: min(100%, 600px, calc((100vh - 230px) * .8)); aspect-ratio: 4 / 5; margin: 0 auto; }
.corpo-figura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fig-traco path, .fig-traco circle { fill: none; stroke: var(--tinta); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; vector-effect: non-scaling-stroke; }
.fig-sombra path { fill: color-mix(in srgb, var(--tinta) 9%, transparent); }

.slot {
    position: absolute; display: grid; place-items: center; border-radius: 8px;
    border: 3px dotted color-mix(in srgb, var(--tinta) 70%, transparent);
    background: color-mix(in srgb, var(--papel) 70%, transparent);
    transition: border-color .2s, background .2s, box-shadow .2s, opacity .2s;
}
.slot.cheio { border-style: solid; border-width: 2.5px; background: color-mix(in srgb, var(--tinta) 6%, var(--papel)); }
.slot-rotulo { position: absolute; left: 0; right: 0; bottom: -1.5em; text-align: center; font: italic .95em var(--serif); opacity: .8; white-space: nowrap; pointer-events: none; }
/* labels that sit on the drawn figure get a patch of paper under the words, so the ink line never crosses them */
.corpo-joias > .slot-rotulo, .corpo-cinto > .slot-rotulo { left: 50%; right: auto; width: max-content; padding: 0 .35em; transform: translateX(-50%); border-radius: var(--e-raio-papel); background: color-mix(in srgb, var(--papel) 92%, transparent); opacity: 1; color: var(--e-tinta-suave); }
.slot-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 6px; cursor: grab; touch-action: none; }
.slot-item .it-glifo { width: 62%; max-width: 74px; aspect-ratio: 1; }
.slot-item .it-nome { font: italic .92em/1.05 var(--serif); text-align: center; color: var(--tinta-vermelha); }
.slot-fantasma { width: 46%; max-width: 64px; aspect-ratio: 1; color: var(--tinta); opacity: .16; pointer-events: none; }
.slot-fantasma svg { width: 100%; height: 100%; }
.slot.travada { border-style: dashed; background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--tinta) 13%, transparent) 7px 9px); }
.slot-travada { display: grid; justify-items: center; gap: 4px; opacity: .45; }
.slot-travada svg { width: 46px; height: 46px; }
.slot-travada em { font: italic .9em var(--serif); }

.corpo-joias { position: absolute; left: 37%; top: 19.5%; width: 26%; height: 6%; display: flex; justify-content: space-between; align-items: center; }
.slot-joia { position: relative; height: 72%; width: auto; aspect-ratio: 1; transform: rotate(45deg); border-radius: 4px; border-width: 2px; }
.slot-joia .slot-item { transform: rotate(-45deg); padding: 3px; }
.slot-joia .it-glifo { width: 80%; }
.corpo-joias > .slot-rotulo { left: 100%; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); margin-left: 8px; text-align: left; }

.corpo-cinto {
    position: absolute; left: 30%; width: 40%; top: 49.5%; min-height: 9%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 6px; border-top: 3px solid color-mix(in srgb, var(--tinta) 75%, transparent); border-bottom: 3px solid color-mix(in srgb, var(--tinta) 75%, transparent);
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--papel) 75%, transparent) 0 14px, color-mix(in srgb, var(--tinta) 10%, var(--papel)) 14px 16px);
    border-radius: 2px;
}
.corpo-cinto.aceita, .corpo-cinto.sobre { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 55%, transparent); }
.corpo .slot-pocao { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border-width: 2px; }
.slot-pocao .it-glifo { width: 70%; }
.slot-pocao.livre-cinto { color: color-mix(in srgb, var(--tinta) 55%, transparent); font: 1.4em/1 var(--serif); }
.corpo-cinto > .slot-rotulo { bottom: -1.6em; }

.corpo-defesa { position: absolute; left: 3%; top: 82%; width: 24%; margin: 0; display: grid; gap: 2px; padding: 6px 10px; border: 2.5px solid color-mix(in srgb, var(--tinta) 75%, transparent); border-radius: 4px; }
.corpo-defesa div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 40%, transparent); }
.corpo-defesa div:last-child { border-bottom: 0; }
.corpo-defesa dt { font: 1.05em var(--uncial); }
.corpo-defesa dd { margin: 0; font: 1.45em/1.1 var(--serif); color: var(--tinta-vermelha); }

/* while dragging: what takes the item glows green, what refuses goes pale */
.bancada.arrastando .slot.aceita { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent), 0 0 18px color-mix(in srgb, var(--ok) 35%, transparent); }
.bancada.arrastando .slot.recusa { opacity: .45; }
.bancada.arrastando .slot.aceita.sobre { background: color-mix(in srgb, var(--ok) 16%, var(--papel)); transform: scale(1.04); }
.bancada.arrastando .slot.recusa.sobre { border-color: var(--perigo); }
.slot-joia.aceita.sobre { transform: rotate(45deg) scale(1.08) !important; }

/* ================= BACKPACK ================= */
.mochila-cabeca { display: flex; align-items: center; gap: 14px; }
.mochila-cabeca .papel-titulo { margin: 0; }
.mochila-espacos { display: flex; align-items: baseline; gap: 4px; margin-left: auto; cursor: help; font: italic 1em var(--serif); }
.mochila-espacos span { margin-right: 4px; opacity: .8; }
.mochila-espacos b { font: 1.7em var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.mochila-espacos.estourou b:first-of-type { text-decoration: underline wavy; }
/* the purse: a leather pouch drawn in ink (narrow mouth, round bottom), not a pill */
.mochila-ouro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 5px; border: 1.5px solid color-mix(in srgb, var(--tinta) 60%, transparent); border-radius: 5px 5px 16px 16px / 5px 5px 12px 12px; background: color-mix(in srgb, var(--e-papiro-claro) 35%, transparent); color: var(--tinta); cursor: pointer; transition: border-color var(--e-dur-toque), transform var(--e-dur-toque); }
.mochila-ouro:active { transform: translateY(1px); }
.mochila-ouro:focus-visible { outline: none; box-shadow: var(--e-foco); }
.mochila-ouro svg { width: 26px; height: 26px; color: var(--ouro); }
.mochila-ouro b { font: 1.5em var(--serif); color: var(--tinta-vermelha); font-weight: 400; display: inline-block; }
.mochila-ouro small { font: italic .85em var(--serif); opacity: .75; }
.mochila-ouro:hover { border-color: var(--tinta-vermelha); }

.grade-funcional { position: relative; width: calc(var(--col) * (var(--cel) + var(--vao)) - var(--vao)); height: calc(var(--lin) * (var(--cel) + var(--vao)) - var(--vao)); margin: 4px auto 0; }
.grade-celulas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--col), var(--cel)); grid-auto-rows: var(--cel); gap: var(--vao); }
.grade-celulas .cel { border: 2px dotted color-mix(in srgb, var(--tinta) 55%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.grade-celulas .cel.morta { visibility: hidden; }
.grade-itens, .grade-previa { position: absolute; inset: 0; }
.grade-previa { pointer-events: none; }
.grade-previa i { position: absolute; width: var(--cel); height: var(--cel); border-radius: 5px; }
.grade-previa i.ok { background: color-mix(in srgb, var(--ok) 28%, transparent); box-shadow: inset 0 0 0 2px var(--ok); }
.grade-previa i.ruim { background: color-mix(in srgb, var(--perigo) 22%, transparent); box-shadow: inset 0 0 0 2px var(--perigo); }

.item-grade { position: absolute; cursor: grab; touch-action: none; display: grid; place-items: center; align-content: center; gap: 2px; }
.item-grade .pc, .arrasto .pc { position: absolute; background: color-mix(in srgb, var(--tinta) 12%, var(--papel)); }
.item-grade .pc.bt { border-top: 2.5px solid var(--tinta); }
.item-grade .pc.bd { border-right: 2.5px solid var(--tinta); }
.item-grade .pc.bb { border-bottom: 2.5px solid var(--tinta); }
.item-grade .pc.be { border-left: 2.5px solid var(--tinta); }
.item-grade .it-glifo { position: relative; width: 40px; height: 40px; }
.item-grade.pequeno .it-glifo { width: 44px; height: 44px; }
.item-grade .it-nome { position: relative; max-width: calc(100% - 8px); font: italic .82em/1 var(--serif); text-align: center; color: var(--tinta-vermelha); }
.item-grade:hover .pc { background: color-mix(in srgb, var(--tinta) 20%, var(--papel)); }
/* equipped: the cells stay reserved, with the silhouette hatched */
.item-grade.no-corpo .pc { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--tinta) 16%, transparent) 6px 8px), color-mix(in srgb, var(--tinta) 6%, var(--papel)); }
.item-grade.no-corpo .pc.bt, .item-grade.no-corpo .pc.bd, .item-grade.no-corpo .pc.bb, .item-grade.no-corpo .pc.be { border-style: dashed; }
.item-grade.no-corpo .it-glifo, .item-grade.no-corpo .it-nome { opacity: .75; }
/* a scroll (25/10): the cell is a rolled parchment with a wax seal, so it is told from the other items at a glance */
.item-grade.item-pergaminho .pc { background: linear-gradient(180deg, color-mix(in srgb, #e9d6a8 70%, var(--papel)), color-mix(in srgb, #c9a865 45%, var(--papel))); }
.item-grade.item-pergaminho::after, .item-ficha.item-pergaminho::after {
    content: ''; position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e0574a, #8e1b17 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.item-grade.item-pergaminho .it-glifo { color: var(--tinta-vermelha); }
.item-ficha.item-pergaminho { position: relative; padding-right: 20px; background: color-mix(in srgb, #e9d6a8 55%, var(--papel)); }
.it-corpo { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; color: var(--tinta-vermelha); }
.it-corpo .ic { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.levantado { opacity: .25 !important; }

.faixa-itens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.faixa-rotulo { font: italic .9em var(--serif); opacity: .75; margin-right: 4px; }
.faixa-itens.sem-lugar .faixa-rotulo { color: var(--perigo); opacity: 1; }

.item-ficha {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; cursor: grab; touch-action: none;
    border: 2px solid color-mix(in srgb, var(--tinta) 65%, transparent); border-radius: 4px;
    background: color-mix(in srgb, var(--tinta) 6%, var(--papel)); font: italic .95em var(--serif);
}
.item-ficha .it-glifo { width: 26px; height: 26px; }
.item-ficha .it-esp { font-size: .8em; opacity: .65; font-style: normal; }
.item-ficha.perdido { border-color: var(--perigo); color: var(--perigo); }
.item-ficha.no-corpo { border-style: dashed; opacity: .6; }
.item-ficha:hover { border-color: var(--tinta-vermelha); }

.area { border-radius: 6px; transition: box-shadow .2s, background .2s; }
.bancada.arrastando .area-bau { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta) 30%, transparent); }
.bancada.arrastando .area.sobre { background: color-mix(in srgb, var(--ok) 10%, transparent); box-shadow: 0 0 0 2px var(--ok); }
.bau-itens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; padding: 6px; border: 2px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: 6px; }

.livres { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.livre { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 40%, transparent); }
.livre .it-glifo { width: 28px; height: 28px; flex: none; }
.livre-texto { display: flex; flex-direction: column; min-width: 0; }
.livre-texto b { font: 1.05em var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.livre-texto em { font: italic .88em var(--serif); opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a free item: the click edits it (25/10); the pen and the bin stay visible, not only on hover */
.livre.editavel { cursor: pointer; border-radius: 4px; transition: background-color .15s; }
.livre.editavel:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.livre-acoes { margin-left: auto; display: flex; gap: 2px; flex: none; }
.livre-editar, .livre-tirar { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 4px; background: none; color: var(--tinta); cursor: pointer; opacity: .7; }
.livre-editar .ic, .livre-tirar .ic { width: 17px; height: 17px; }
.livre-editar:hover, .livre-editar:focus-visible { opacity: 1; background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.livre-tirar:hover, .livre-tirar:focus-visible { opacity: 1; color: var(--perigo); background: color-mix(in srgb, var(--perigo) 12%, transparent); }

.bancada.leitura [data-arrastar] { cursor: default; }

/* the dragged copy */
.arrasto { position: fixed; z-index: 90; pointer-events: none; display: grid; place-items: center; filter: drop-shadow(4px 10px 10px rgba(0, 0, 0, .45)); background: none; box-shadow: none; }
.arrasto .pc { border: 2.5px solid var(--tinta); border-radius: 3px; background: color-mix(in srgb, var(--tinta) 14%, var(--papel)); }
.arrasto .it-glifo { position: relative; width: 40px; height: 40px; }

.moeda-voando {
    position: fixed; left: 0; top: 0; z-index: 95; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #fff3c4, #e2b955 45%, #8c6a24 100%); box-shadow: 0 0 0 1px #5a3d0e, 0 2px 4px rgba(0, 0, 0, .4);
}

/* ================= MARKET ================= */
.mercado-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.mercado-modo button { font: italic 1em var(--serif); padding: .25em .9em; }
.mercado-busca { display: inline-flex; align-items: center; gap: 6px; font: inherit; text-transform: none; letter-spacing: 0; }
.mercado-busca .ic { width: 1.1em; height: 1.1em; }
.mercado-busca input { width: 180px; padding: .3em .6em; }
.mercado-bolsa { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mercado-bolsa svg { width: 24px; height: 24px; color: var(--ouro); }
.mercado-bolsa b { font: 1.4em var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
/* the sections are paper tabs on one line (they scroll sideways if the paper is narrow) */
.mercado-secoes { display: flex; flex-wrap: nowrap; gap: 0 2px; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 55%, transparent); }
.mercado-secoes::-webkit-scrollbar { display: none; }
.mercado-secoes button {
    flex: none; margin-bottom: -2px; padding: .32em .6em .28em; border: 1.5px solid transparent; border-bottom: 0; border-radius: var(--e-raio-aba); background: none; color: var(--e-tinta-suave);
    font: .95em var(--uncial); white-space: nowrap; cursor: pointer; transition: color var(--e-dur-toque), background-color var(--e-dur-toque);
}
.mercado-secoes button:hover { color: var(--tinta); background: color-mix(in srgb, var(--e-papiro-sombra) 30%, transparent); }
.mercado-secoes button.ativo { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 55%, transparent); background: color-mix(in srgb, var(--e-papiro-claro) 55%, var(--papel)); }
.mercado-secoes button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tinta-vermelha); }

/* ---------- the market is a merchant's ledger: one ruled line per article, a red margin, prices in the right column ---------- */
.mercado-cartas {
    position: relative; display: flex; flex-direction: column; margin: 0; padding: 4px 0 0;
    background: linear-gradient(90deg, transparent 53px, color-mix(in srgb, var(--tinta-vermelha) 45%, transparent) 53px 54px, transparent 54px 57px, color-mix(in srgb, var(--tinta-vermelha) 30%, transparent) 57px 58px, transparent 58px);
}
.carta {
    --rar: color-mix(in srgb, var(--tinta) 30%, transparent);
    position: relative; display: grid; align-items: center; column-gap: 14px; row-gap: 1px;
    grid-template-columns: 40px minmax(140px, 1.1fr) minmax(0, 1.5fr) max-content 112px;
    grid-template-areas: "glifo nome linhas preco acao" "glifo resumo linhas preco acao";
    padding: 9px 6px 9px 4px; border: 0; border-bottom: 1px dotted var(--e-pauta); border-radius: 0; background: none; box-shadow: none;
    transition: background-color var(--e-dur-toque);
}
.carta:hover, .carta:focus-within { background: linear-gradient(90deg, transparent 58px, color-mix(in srgb, var(--e-papiro-sombra) 30%, transparent) 58px); }
/* the head of the ledger (mercado-ui.js cabecaColunas): the names of the columns in caption ink, not a line to hover */
.carta.mercado-colunas { padding-block: 0 4px; border-bottom: 1px solid var(--e-pauta); }
.carta.mercado-colunas:hover, .carta.mercado-colunas:focus-within { background: none; }
.mercado-coluna { font: var(--e-legenda); color: var(--e-tinta-apagada); letter-spacing: .06em; }
.carta-glifo { grid-area: glifo; width: 34px; height: 34px; color: var(--tinta); }
.carta-glifo svg { width: 100%; height: 100%; }
.carta h4 { grid-area: nome; align-self: end; margin: 0 0 0 14px; font: 1.15em/1.1 var(--serif); color: var(--tinta-vermelha); font-weight: 400; }
.carta-resumo { grid-area: resumo; align-self: start; margin: 0 0 0 14px; font: italic .88em/1.3 var(--serif); color: var(--e-tinta-apagada); }
/* rarity is the colour of the ink, and a stroke in the margin */
.carta.rar-comum { --rar: var(--e-tinta-suave); }
.carta.rar-incomum { --rar: var(--e-ok); }
.carta.rar-raro { --rar: var(--e-tinta-azul); }
.carta:not(.rar-nenhuma)::before { content: ''; position: absolute; left: 47px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--rar); opacity: .8; }
.carta-rar { font: .95em var(--uncial); color: var(--rar); }
.carta.rar-raro .carta-rar::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; vertical-align: .05em; background: radial-gradient(circle at 35% 30%, var(--cera-luz), var(--cera) 60%, #4d0d0d); }
.carta.caro { opacity: 1; }
.carta.caro :is(h4, .carta-preco) { color: var(--e-tinta-apagada); }
.carta.caro .carta-glifo { opacity: .55; }
.carta-linhas { grid-area: linhas; margin: 0; padding: 0; list-style: none; font: .9em/1.35 var(--serif); color: var(--e-tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carta-linhas li { display: inline; }
.carta-linhas li + li::before { content: ' · '; color: var(--e-tinta-apagada); }
/* the price column: the sum in red ink, the small print under it */
.carta footer { grid-area: preco; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 8px; max-width: 150px; margin: 0; padding: 0; border: 0; font: italic .82em var(--serif); color: var(--e-tinta-apagada); text-align: right; }
.carta-preco { flex: 0 0 100%; justify-content: flex-end; display: inline-flex; align-items: center; gap: 4px; font: 1.5em/1.1 var(--serif); color: var(--tinta-vermelha); font-style: normal; font-variant-numeric: lining-nums; }
.carta-preco svg { width: 18px; height: 18px; color: var(--e-ouro-tinta); }
.carta-pagina { margin-left: 0; }
/* only a crafter makes it, and this sheet cannot: red ink, since the button stays hidden */
.carta-so { flex: 0 0 100%; color: var(--tinta-vermelha); font-style: italic; }
/* buying is an ink button that shows on the line under the hand or the keyboard (never six gold buttons at once) */
.carta-botoes { grid-area: acao; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.carta [data-pegar] { min-height: 24px; padding: .1em .6em; font-size: .82em; }
.carta .btn {
    justify-self: end; margin: 0; min-height: 30px; padding: .25em .8em; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--tinta) 50%, transparent); border-radius: var(--e-raio-controle); background: none; box-shadow: none; text-shadow: none;
    color: var(--tinta); font: italic 1em var(--serif); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--e-dur-rapido), transform var(--e-dur-rapido) var(--e-ease-tinta), background-color var(--e-dur-toque), border-color var(--e-dur-toque);
}
.carta:hover .btn, .carta:focus-within .btn { opacity: 1; transform: none; }
.carta .btn:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--e-papiro-sombra) 45%, transparent); box-shadow: none; }
.carta .btn:focus-visible { box-shadow: var(--e-foco); }
.carta .btn:disabled { opacity: 0; }
@media (hover: none) { .carta .btn { opacity: 1; transform: none; } }
.mercado-nota { margin: 14px 0 0; font: var(--e-legenda); color: var(--e-tinta-apagada); }
.mercado-topo { margin-bottom: 12px; }
.mercado-busca input { border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 60%, transparent); border-radius: 0; background: none; box-shadow: none; color: var(--tinta); font: italic 1.05em var(--serif); }
.mercado-busca input:focus { border-bottom: 1px solid var(--tinta-vermelha); box-shadow: 0 1px 0 var(--tinta-vermelha); }

.mercado-mestre { display: grid; gap: 10px; max-width: 460px; }
/* the black market form shares the sheet of the master's form; the access line is small print */
.mercado-negro .mercado-nota { margin: 0; }
.mercado-acesso { font-style: italic; }
.mercado-negro label small { font: var(--e-legenda); color: var(--e-tinta-apagada); }
.mercado-mestre label { display: grid; gap: 4px; }
.mercado-mestre label { text-transform: none; letter-spacing: 0; font: var(--e-rotulo); color: var(--tinta); }
.mercado-mestre .rotulo, .escolha-glifo + * { font: var(--e-rotulo); letter-spacing: 0; text-transform: none; }
.mercado-mestre :is(input[type=text], input[type=number], select, textarea) { border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 60%, transparent); border-radius: 0; background: none; box-shadow: none; color: var(--tinta); font: italic 1.1em var(--serif); }
.mercado-mestre :is(input, select, textarea):focus { border-bottom: 1px solid var(--tinta-vermelha); box-shadow: 0 1px 0 var(--tinta-vermelha); }
.escolha-glifo { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.escolha-glifo label { cursor: pointer; }
.escolha-glifo input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-glifo span { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid transparent; border-radius: 6px; color: var(--texto); }
.escolha-glifo span svg { width: 28px; height: 28px; }
.escolha-glifo input:checked + span { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 14%, transparent); }

/* ================= ITEM CARD AND BUYING CARD (dialogs) ================= */
.cartao-item { display: flex; gap: 14px; align-items: flex-start; background: none; box-shadow: none; color: var(--texto); }
.cartao-glifo { flex: none; width: 64px; height: 64px; color: var(--tinta, var(--texto)); }
.cartao-glifo svg { width: 100%; height: 100%; }
.cartao-resumo { margin: 0 0 4px; font: italic 1.05em var(--serif); }
.cartao-linhas { margin: 0; padding-left: 1.1em; line-height: 1.35; }
.cartao-onde { margin: 8px 0 0; font: italic .95em var(--serif); opacity: .8; }
.compra { display: grid; gap: 14px; }
.compra-opcoes { display: grid; gap: 10px; }
.compra-opcoes label { display: grid; gap: 4px; }
.compra-opcoes label small { font: italic .95em var(--serif); text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.compra-opcoes .op-check { display: flex; align-items: center; gap: 8px; text-transform: none; font: 1em var(--serif); letter-spacing: 0; }
.op-foco { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 6px 10px 8px; border: 1px solid var(--borda); border-radius: 4px; }
.op-foco legend { padding: 0 4px; font: var(--e-rotulo); letter-spacing: 0; text-transform: none; }
.compra-opcoes label { text-transform: none; letter-spacing: 0; font: var(--e-rotulo); }
.op-foco label { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font: 1em var(--serif); }
.preco-total { margin: 0; padding-top: 10px; border-top: 1px dashed var(--borda-forte); font: 1.1em var(--serif); }
.preco-total b { font-size: 1.5em; color: var(--ouro-2); font-weight: 400; }
.preco-total b.falta { color: var(--perigo); }
.preco-total small { opacity: .75; }

/* ================= THE PAPER SHEET BOXES THAT OPEN THE BENCH ================= */
.ff-caixa.abre-bancada { cursor: pointer; transition: background .2s; }
.ff-caixa.abre-bancada:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.ff-caixa.abre-bancada:hover .ff-caixa-titulo { color: var(--tinta-vermelha); }
/* weapon rows sit on the dotted lines of the paper sheet: the first one (y 1610) is under the header, then one every 40 (of 1414 wide) */
.ff-caixa .ff-armas { position: absolute; left: 1.2cqw; right: 1.2cqw; top: calc(75 / 1414 * 100cqw); padding: 0; }
/* one weapon per ruled line of the paper (40 units apart): the columns of the header, text centred between the lines and never wrapping; the row is the attack button */
.ff-arma { all: unset; box-sizing: border-box; display: grid; grid-template-columns: var(--ff-armas-colunas); align-items: center; justify-items: center; width: 100%; height: calc(40 / 1414 * 100cqw); padding: 0; font: italic 1.55cqw/1.15 var(--serif); color: var(--tinta); cursor: pointer; border-radius: .5cqw; transition: background .15s; }
.ff-arma > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 .3cqw; box-sizing: border-box; }
.ff-arma:hover, .ff-arma:focus-visible { background: color-mix(in srgb, var(--tinta-vermelha) 10%, transparent); }
.ff-arma:hover .ff-arma-nome { color: var(--tinta-vermelha); }
.ff-arma:active { transform: translateY(.1cqw); }
.ff-caixa .ff-armas .ff-vazio { margin: 1cqw 0 0; }
.ff-arma b { font-weight: 400; color: var(--tinta-vermelha); font-style: normal; }
/* the inventory box of the sheet: lines start under its slanted corner */
.ff-caixa .ff-inventario { position: absolute; left: 1.4cqw; right: 1.4cqw; top: calc(85 / 1414 * 100cqw); bottom: calc(70 / 1414 * 100cqw); padding: 0; overflow: hidden; }
.ff-inv-lista { display: flex; flex-direction: column; }
.ff-inv { display: grid; grid-template-columns: 2.4cqw 1fr auto; align-items: end; column-gap: .7cqw; height: calc(40 / 1414 * 100cqw); padding-bottom: .35cqw; border-bottom: .2cqw dotted color-mix(in srgb, var(--tinta) 40%, transparent); font: italic 1.6cqw/1.1 var(--serif); }
.ff-inv svg { width: 2.2cqw; height: 2.2cqw; align-self: center; }
.ff-inv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-inv small { font-size: .78em; opacity: .7; }
.ff-inv.no-corpo span { color: var(--tinta-vermelha); }
.ff-inv.mais { grid-template-columns: 1fr; opacity: .75; }
.ff-inv-resumo { margin: 1cqw 0 0; font: italic 1.45cqw var(--serif); opacity: .8; }
/* the item card has many actions: the button row wraps */
dialog:has(.cartao-item) .dialogo-pe { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

/* masculine or feminine figure behind the slots */
.corpo-tipo { display: flex; justify-content: center; margin: -4px auto 10px; width: max-content; }
.corpo-tipo button { padding: .2em .9em; font: italic 1em var(--serif); }