/* match.css — componentes da partida: janela de resposta, Chain, faixas, cut-in, zoom de cartas,
   inspetor de peças, promoção, cemitério e ecrã final. O layout da arena está em arena.css. */

/* resposta (momento de Chain: a única janela com brilho, na cor primária) */
.respond-bar { position: absolute; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--surface-2); color: var(--text-main); border: 3px solid var(--border-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel), inset 0 4px 0 var(--color-primary), 0 0 22px rgba(255, 183, 3, .4); max-width: 96vw; }
.rb-head { display: flex; flex-direction: column; max-width: 240px; }
.rb-head b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.1; color: var(--text-main); -webkit-text-stroke: 1.2px var(--border-ink); paint-order: stroke fill; }
.rb-head span { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.pick-item .pick-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.pick-item .pick-card { cursor: pointer; transition: transform 160ms var(--ease-out-snappy); }
.pick-item .pick-card:hover { transform: translateY(-8px); }
.rb-head .rb-sub { color: #FCA5A5; font-weight: 800; margin: 2px 0; }
.rb-secs { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-style: normal; font-weight: 700; color: var(--color-primary); text-align: center; }
.respond-bar .rb-min { position: absolute; top: -18px; right: -14px; width: 36px; height: 36px; transform: rotate(90deg); }
/* minimizada: só o título, o tempo e o botão para abrir — o tabuleiro fica à vista */
.respond-bar.mini { cursor: pointer; padding: 8px 14px; gap: 10px; bottom: 8px !important; }
.respond-bar.mini .rb-cards, .respond-bar.mini .rb-head span:not(.rb-sub), .respond-bar.mini .rb-timer { display: none; }
.respond-bar.mini .rb-head { max-width: 420px; }
.respond-bar.mini .rb-min { transform: rotate(-90deg); }
/* avisos da partida à esquerda, por baixo do histórico, para não taparem o tabuleiro */
body.in-match #toasts { left: 16px; top: 200px; transform: none; align-items: flex-start; }
body.in-match .toast { max-width: 300px; }
.rb-cards { display: flex; gap: 10px; }
.rb-cards .hcard { cursor: pointer; }
.rb-cards .hcard:hover { transform: translateY(-6px); transition: transform 160ms var(--ease-out-snappy); }
.rb-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.rb-timer { width: 100px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-tray); }
.rb-timer i { display: block; height: 100%; background: var(--color-primary); border-right: 2px solid var(--border-ink); transform-origin: left; }

/* Chain: elos numerados como cadeados de vinil dourado */
.chain-item { position: relative; }
.chain-item::before { content: attr(data-n); position: absolute; left: -9px; top: -9px; z-index: 5; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));
  border: 2.5px solid var(--border-ink); box-shadow: 0 3px 0 var(--color-primary-lip); font: 700 14px/20px var(--font-num); color: var(--text-inverse); text-align: center; }
.chain-item.cs-resolving .hc-face { box-shadow: 0 0 0 4px var(--color-primary), 0 0 22px rgba(255, 183, 3, .85); }
.chain-item.cs-negated { filter: grayscale(1) brightness(.6); transform: rotate(-8deg) scale(.92); transition: transform .3s var(--ease-out-snappy), filter .3s; }
.chain-item.cs-negated::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--color-danger); border: 3px solid var(--border-ink);
  box-shadow: inset 0 0 0 6px var(--color-danger), inset 0 0 0 9px #F8FAFC; }
.chain-item.cs-fizzle { opacity: .45; }
.chain-stage { position: fixed; inset: 0; pointer-events: none; z-index: 66; }
.link-label { position: fixed; transform: translateX(-50%); padding: .3em .9em; border-radius: 10px; background: var(--surface-2); border: 2.5px solid var(--border-ink); color: var(--color-primary);
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; white-space: nowrap; box-shadow: 0 4px 0 #090C10; -webkit-text-stroke: 1px var(--border-ink); paint-order: stroke fill; }

/* faixas (banners de turno inclinados) e cut-in */
.banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 64; pointer-events: none; display: flex; justify-content: center; overflow: hidden; padding: 20px 0; }
.banner-band { background: var(--c, var(--color-primary)); color: var(--text-inverse); border: 4px solid var(--border-ink); border-radius: 14px; padding: 8px 54px; transform: skewX(-4deg);
  box-shadow: 0 7px 0 #090C10, 0 16px 30px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .35); text-align: center; }
.banner-band b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 52px); line-height: 1; -webkit-text-stroke: 3px var(--border-ink); color: #fff; paint-order: stroke fill; text-shadow: 0 4px 0 var(--border-ink); }
.banner-band small { font-weight: 800; font-size: .95rem; letter-spacing: .04em; }
.cutin { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.cutin-band { width: 130vw; height: 180px; display: flex; align-items: center; justify-content: center; gap: 36px; transform: skewY(-6deg);
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)); border-top: 7px solid var(--border-ink); border-bottom: 7px solid var(--border-ink); box-shadow: 0 16px 0 rgba(0, 0, 0, .35); }
.cutin-art { width: 150px; height: 150px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
.cutin-art svg, .cutin-art img { width: 100%; height: 100%; object-fit: contain; }
.cutin-txt small { display: block; font-weight: 800; color: var(--text-inverse); letter-spacing: .3em; text-transform: uppercase; }
.cutin-txt b { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 56px); color: #fff; -webkit-text-stroke: 3px var(--border-ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--border-ink); }

/* carta a ser arrastada da mão (MatchDrag) */
/* sem filter no fantasma (refazia a sombra desfocada a cada fotograma) nem animações dentro da carta: só transforms */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 96; pointer-events: none; will-change: transform; }
.drag-ghost .hc-rays, .drag-ghost .hc-face { animation: none !important; }
.drag-ghost .hc-face { box-shadow: 0 4px 0 var(--lip), 0 7px 0 #0F141C, 0 26px 34px rgba(0, 0, 0, .55); }
.dg-card { position: absolute; left: -64px; top: -104px; perspective: 700px; transform-origin: 64px 66px; will-change: transform, opacity; }
.dg-tilt { will-change: transform; }
.dg-item { position: absolute; left: -46px; top: -84px; will-change: transform, opacity; }
.dg-sway { transform-origin: 50% 88%; will-change: transform; }
.dg-label { position: absolute; left: 56px; top: -84px; width: max-content; min-width: 150px; max-width: 250px; padding: 8px 12px; text-align: left;
  background: var(--bg-canvas); border: 2.5px solid var(--surface-3); border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .7); }
.dg-label.left { left: auto; right: 56px; }
.dg-label b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 1px var(--border-ink); paint-order: stroke fill; }
.dg-label span { display: block; margin-top: 3px; font-weight: 700; font-size: 12.5px; line-height: 1.3; color: #CBD5E1; }
.dg-label.ok { border-color: var(--color-success); } .dg-label.ok span { color: #99F6E4; }
.dg-label.bad { border-color: var(--color-danger); } .dg-label.bad span { color: #FCA5A5; }
/* a carta transformada em objeto (ItemToken): sombra no chão e anel de cor em vez de auréola néon */
.item-token { position: relative; width: var(--is); height: var(--is); pointer-events: none; }
.item-token .it-aura { position: absolute; inset: 4% 4% -6%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ic) 32%, transparent) 0%, transparent 62%); transition: background .2s; }
.item-token .it-shadow { position: absolute; left: 22%; right: 22%; bottom: -12%; height: 12%; border-radius: 50%; background: rgba(9, 12, 16, .6); animation: it-shadow 1.4s ease-in-out infinite; }
.item-token .it-bob { position: absolute; inset: 0; animation: it-bob 1.4s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.item-token .it-svg, .item-token .it-svg svg, .item-token .it-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.drag-ghost.ok .item-token .it-aura { background: radial-gradient(circle, rgba(46, 196, 182, .55), transparent 62%); }
.drag-ghost.bad .item-token .it-aura { background: radial-gradient(circle, rgba(217, 4, 41, .5), transparent 62%); }
@keyframes it-bob { 50% { transform: translateY(-8%) rotate(3deg); } }
@keyframes it-shadow { 50% { transform: scale(.8); opacity: .6; } }
.it-puff { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.it-puff b { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid #F8FAFC; box-shadow: 0 0 0 3px var(--c); animation: puff-ring .42s var(--ease-out-snappy) forwards; }
.it-puff i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); border: 2px solid #0F141C; animation: puff-dot .5s var(--ease-out-snappy) forwards; }
@keyframes puff-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes puff-dot { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3) rotate(90deg); opacity: 0; } }
.fly-token { position: fixed; left: 0; top: 0; z-index: 72; pointer-events: none; }
.fly-token .item-token { margin: calc(var(--is) / -2) 0 0 calc(var(--is) / -2); }
.drag-ghost.ok .hc-face { box-shadow: 0 0 0 3px var(--color-success), 0 0 14px rgba(46, 196, 182, .7), 0 26px 34px rgba(0, 0, 0, .5); }
.drag-ghost.bad .hc-face { box-shadow: 0 0 0 3px var(--color-danger), 0 26px 34px rgba(0, 0, 0, .5); }
/* zoom de carta (estilo Hearthstone) */
.card-zoom { position: fixed; z-index: 95; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); }
.cz-speed { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.35; color: var(--text-main);
  background: var(--surface-2); border: 2.5px solid var(--border-ink); border-radius: 10px; box-shadow: 0 4px 0 #090C10, inset 4px 0 0 #94A3B8; }
.cz-speed.s2 { box-shadow: 0 4px 0 #090C10, inset 4px 0 0 #00B4D8; } .cz-speed.s3 { box-shadow: 0 4px 0 #090C10, inset 4px 0 0 #FFB703; }
.cz-speed b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; }
.cz-speed span + span { color: var(--text-muted, #A7B0BE); }
.hc-tip .tip-speed { font-size: 12px; line-height: 1.35; padding-left: 7px; border-left: 3px solid #94A3B8; }
.hc-tip .tip-speed.s2 { border-left-color: #00B4D8; } .hc-tip .tip-speed.s3 { border-left-color: #FFB703; }
.cz-cap { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; padding: 7px 10px; text-align: center; font-weight: 800; font-size: 14px; color: var(--text-main);
  background: var(--surface-2); border: 2.5px solid var(--border-ink); border-radius: 10px; box-shadow: 0 4px 0 #090C10, inset 0 4px 0 var(--color-primary); }

/* cartão da peça (inspetor) */
.piece-insp { position: fixed; z-index: 94; width: 300px; pointer-events: none; border-radius: var(--radius-lg); overflow: hidden; color: var(--text-main);
  background: var(--surface-2); border: 3px solid var(--border-ink); box-shadow: var(--shadow-panel), inset 0 4px 0 #CBD5E1; }
.piece-insp.b { box-shadow: var(--shadow-panel), inset 0 4px 0 #64748B; }
.pi-stage { position: relative; height: 200px; display: grid; place-items: end center; padding-bottom: 10px; overflow: hidden; border-bottom: 3px solid var(--border-ink);
  background: radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, .14), transparent 55%), radial-gradient(circle at 50% 30%, #2A3550, #181F2C 75%); }
.pi-disc { position: absolute; left: 50%; bottom: 12px; width: 150px; height: 30px; transform: translateX(-50%); border-radius: 50%; border: 3px solid var(--border-ink);
  background: repeating-conic-gradient(var(--board-tile-light) 0 25%, var(--board-tile-dark) 0 50%) 50% 50% / 25% 50%; box-shadow: 0 6px 0 var(--surface-1), 0 6px 0 3px var(--border-ink); }
.pi-figure { position: relative; width: 130px; height: 130px; }
.pi-figure .squash { position: absolute; inset: 0; animation: insp-idle 1.6s ease-in-out infinite; transform-origin: 50% 95%; }
.pi-figure .piece-svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); }
.pi-figure .p3d { transform: scale(1.22); transform-origin: 50% 88%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.pi-figure .shield-dome { inset: 0 4% 4%; }
/* sprite sheet (Portraits3D): o mesmo zoom da foto; a origem desce porque o quadro é 35 % mais alto */
.pi-figure .squash.play { animation: none; }
.pi-figure .p3d-spr { transform: scale(1.22); transform-origin: 50% 91.1%; }
.pi-figure .p3d-spr img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
@keyframes insp-idle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.99, 1.025); } }
.pi-body { padding: 12px 14px 14px; }
.pi-title { display: flex; flex-direction: column; margin-bottom: 8px; }
.pi-title b { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1; -webkit-text-stroke: 1.5px var(--border-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--border-ink); }
.pi-title span { font-size: .78rem; color: var(--text-muted); font-weight: 700; margin-top: 3px; }
.pi-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pi-chips span { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface-1); border: 2px solid var(--border-ink); }
.pi-chips .ico { width: 15px; height: 15px; }
.pi-chips .chip-shield { box-shadow: inset 3px 0 0 var(--color-accent); }
.pi-chips .chip-ice { box-shadow: inset 3px 0 0 #8FD3FF; }
.pi-chips .chip-morph { box-shadow: inset 3px 0 0 var(--color-success); }
.pi-chips .chip-danger { background: var(--color-danger); }
.pi-chips .chip-threat { box-shadow: inset 3px 0 0 #FF4D5E; }
.pi-chips .chip-reach { box-shadow: inset 3px 0 0 #FB8500; }

/* efeitos ativos ao lado da placa do jogador (MatchBuffs): do lado de dentro (para o centro), onde não há nada;
   por baixo ficava tapada pelos avisos */
.hud-fx { position: absolute; top: 2px; left: calc(100% + 8px); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; width: 176px; }
.hud-p.me .hud-fx { left: auto; right: calc(100% + 8px); flex-direction: row-reverse; }
.fx-chip { position: relative; width: 38px; height: 38px; padding: 3px; display: grid; place-items: center; cursor: help; border-radius: 10px;
  background: var(--surface-2); border: 2.5px solid var(--border-ink); box-shadow: 0 3px 0 #090C10, inset 0 2px 0 var(--border-highlight); }
.fx-chip .card-icon, .fx-chip svg { width: 100%; height: 100%; object-fit: contain; }
.fx-chip.k-forbid { background: #4A1420; box-shadow: 0 3px 0 #090C10, inset 0 0 0 2px var(--color-danger); }
.fx-chip.k-punish { background: #4A2A0A; box-shadow: 0 3px 0 #090C10, inset 0 0 0 2px var(--color-warning); }
.fx-chip.k-buff { box-shadow: 0 3px 0 #090C10, inset 0 0 0 2px var(--color-accent); }
.fx-chip.k-status { background: var(--surface-1); color: #8FD3FF; }
.fx-chip.k-off { filter: grayscale(1) brightness(.7); }
.fx-chip em { position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-danger); border: 2px solid var(--border-ink); }
.fx-chip.k-punish em { background: var(--color-warning); }
.fx-chip:hover { transform: translateY(-2px); }
.fx-tip { position: fixed; z-index: 95; width: 260px; padding: 10px 12px; pointer-events: none; border-radius: var(--radius-sm); color: var(--text-main);
  background: var(--surface-2); border: 2.5px solid var(--border-ink); box-shadow: 0 5px 0 #090C10, inset 4px 0 0 var(--color-accent); font-family: var(--font-sans); }
.fx-tip.k-forbid { box-shadow: 0 5px 0 #090C10, inset 4px 0 0 var(--color-danger); }
.fx-tip.k-punish { box-shadow: 0 5px 0 #090C10, inset 4px 0 0 var(--color-warning); }
.fx-tip b { display: block; font-weight: 800; font-size: .9rem; }
.fx-tip .fx-where { display: block; font-size: .74rem; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.fx-tip .fx-note { margin: 0 0 4px; font-weight: 700; font-size: .82rem; line-height: 1.3; }
.fx-tip small { display: block; font-size: .74rem; line-height: 1.3; color: #CBD5E1; }
@media (max-aspect-ratio: 4/5) {
  /* telemóvel: as placas ocupam a largura toda; os efeitos ficam por cima da borda de baixo da placa */
  .hud-fx, .hud-p.me .hud-fx { top: auto; bottom: -20px; left: 50px; right: auto; width: auto; gap: 3px; flex-direction: row; }
  .hud-p.me .hud-fx { left: auto; right: 50px; flex-direction: row-reverse; }
  .fx-chip { width: 26px; height: 26px; padding: 2px; border-radius: 7px; border-width: 2px; }
  .fx-chip em { width: 13px; height: 13px; right: -4px; top: -4px; }
}

/* "porque é que não dá" junto da casa debaixo do rato (MatchHints) */
.move-why { position: fixed; z-index: 93; max-width: 300px; display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; pointer-events: none;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 2.5px solid var(--border-ink); box-shadow: 0 4px 0 #090C10, inset 3px 0 0 var(--color-danger);
  color: var(--text-main); font: 700 .84rem/1.3 var(--font-sans); animation: why-in .14s var(--ease-out-snappy); }
.move-why .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.move-why.soft { box-shadow: 0 4px 0 #090C10, inset 3px 0 0 var(--color-accent); font-weight: 600; }
@keyframes why-in { from { opacity: 0; transform: translateY(4px); } }
html.reduce-motion .move-why { animation: none; }
.pi-eq-title { font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.pi-eq { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-1); border-radius: 10px; box-shadow: var(--shadow-tray); }
.pi-eq li { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: var(--surface-2); border: 2px solid var(--border-ink); }
.pi-eq-ico { width: 38px; height: 38px; flex: none; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #334158, #181F2C); border: 2px solid var(--border-ink); }
.pi-eq-ico svg, .pi-eq-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pi-eq b { display: block; font-weight: 800; font-size: .86rem; }
.pi-eq small { display: block; font-size: .72rem; line-height: 1.3; color: #CBD5E1; font-weight: 600; }
.pi-none { margin: 0; font-size: .8rem; color: var(--text-muted); }

/* fim */
.end-modal { text-align: center; min-width: min(420px, 92vw); }
.end-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 9vw, 78px); line-height: 1; color: var(--color-primary); -webkit-text-stroke: 4px var(--border-ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--border-ink); margin: 6px 0 12px; display: inline-block; transform: skewX(-4deg); }
.end-modal.lose .end-title { color: #94A3B8; }
.end-modal.draw .end-title { color: var(--color-accent); }
.end-reason { font-size: 1.05rem; }
.end-rewards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 36px; }
.rating-pill { font-family: var(--font-num); font-weight: 700; padding: .3em .8em; border-radius: 10px; background: var(--surface-1); color: var(--text-main); border: 2.5px solid var(--border-ink); box-shadow: var(--shadow-tray); }
.end-modal .row { justify-content: center; }
.btn.ghost-dark { --bg: var(--surface-2); --fg: var(--text-main); --lip: #111722; --shadow: var(--shadow-btn-secondary); font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; font-size: .9rem; }

/* promoção e cemitério */
.promo-row { display: flex; gap: 10px; justify-content: center; }
.promo-btn { width: 100px; padding: 8px; border: 3px solid var(--border-ink); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-btn-secondary); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; transition: transform 120ms var(--ease-out-toy), background 120ms; }
.promo-btn:hover { background: var(--surface-3); transform: translateY(-3px); }
.promo-btn .piece-svg, .promo-btn .p3d { width: 72px; height: 72px; }
.promo-btn .eyes-star, .promo-btn .eyes-spiral, .promo-btn .brows, .promo-btn .mouth-o, .promo-btn .mouth-grit, .promo-btn .sweat { display: none; }
.gy-modal { max-width: min(760px, 94vw); }
.gy-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-height: 60vh; overflow-y: auto; padding: 10px; background: var(--surface-1); border-radius: 12px; box-shadow: var(--shadow-tray); }