@font-face { font-family: Italiana; src: url('assets/italiana.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: DM; src: url('assets/dm-sans.ttf') format('truetype'); font-display: swap; }
@font-face { font-family:'Cal Sans'; src:url('assets/cal-sans.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Cinzel; src:url('assets/cinzel.ttf') format('truetype'); font-weight:600; font-display:swap; }
:root { --paper:#f0efea; --ink:#34382f; --muted:#858b7c; --line:#d6d8cd; --accent:#91764f; }
/* What the site is cast in: bronze, then silver from half the medals on, gold with all of them (conquistas.js sets
   data-metal on <html>). metal-0 the deepest to metal-6 the glint, metal-on the text on a metal face; plate: the
   helper's dark panels; stud-0: a day without commits on the GitHub plaque. */
:root { --metal-0:#3a2b1b; --metal-1:#5c4427; --metal-2:#8d6a3b; --metal-3:#c09760; --metal-4:#e8cb95; --metal-5:#f8e9c2; --metal-6:#fffaf0; --metal-on:#f8e9c2;
  --plate:#292319; --plate-deep:#1f1a13; --plate-well:#1d1812; --plate-field:#2c2116; --plate-bevel:#4d3a24; --plate-raise:#33291d; --plate-lift:#46351f; --plate-row:#231d15; --plate-row-hover:#2c2419; --metal-hover:#9a7644;
  --stud-0:#46351f; --stud-0-lit:#4f3c24; --stud-0-shade:#36281a; }
html[data-metal="prata"] { --metal-0:#2e3236; --metal-1:#5b636a; --metal-2:#939ca4; --metal-3:#c3cbd1; --metal-4:#eef2f4; --metal-5:#f7fafb; --metal-6:#ffffff; --metal-on:#202428;
  --plate:#24272b; --plate-deep:#1b1e21; --plate-well:#191b1e; --plate-field:#272b2f; --plate-bevel:#41474e; --plate-raise:#2d3135; --plate-lift:#3b4046; --plate-row:#202326; --plate-row-hover:#2a2e32; --metal-hover:#a3abb2;
  --stud-0:#3b4045; --stud-0-lit:#454b51; --stud-0-shade:#2f3337; }
html[data-metal="ouro"] { --metal-0:#5a3b0b; --metal-1:#986810; --metal-2:#cc961b; --metal-3:#ecc145; --metal-4:#fdeeab; --metal-5:#fff6cf; --metal-6:#fffdf3; --metal-on:#3b2606;
  --plate:#2a2213; --plate-deep:#201a0d; --plate-well:#1d170b; --plate-field:#2e2410; --plate-bevel:#54401a; --plate-raise:#342915; --plate-lift:#4a3a18; --plate-row:#241c0e; --plate-row-hover:#2e2513; --metal-hover:#d9a427;
  --stud-0:#4d3a14; --stud-0-lit:#584318; --stud-0-shade:#3c2d0f; }
/* the moment the wave of a new metal passes over a thing: a flash, in steps like the pixels */
.fundido canvas,canvas.fundido { animation:fundido .55s steps(4) both; }
@keyframes fundido { 0% { filter:brightness(2.1) saturate(.4); } 100% { filter:none; } }
@media (prefers-reduced-motion:reduce) { .fundido canvas,canvas.fundido { animation:none; } }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:DM,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:var(--cursor-chisel,pointer); } button:disabled { opacity:.45; cursor:var(--cursor-arrow,default); }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
a { color:inherit; text-decoration:none; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
/* Pixel cursors, drawn by assets/cursor-bronze.js; the system ones until it runs. */
html { cursor:var(--cursor-arrow,auto); }
a[href],summary { cursor:var(--cursor-chisel,pointer); }
::selection { background:#d6ceba; }.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.atelier { position:relative; height:100svh; min-height:640px; overflow:hidden; isolation:isolate; }
.header { position:absolute; z-index:6; top:0; left:3.4vw; right:3.4vw; height:83px; display:flex; align-items:center; justify-content:space-between; }
.signature { display:inline-flex; align-items:center; gap:10px; font-size:17px; letter-spacing:-.6px; }.signature svg { width:21px; height:21px; color:var(--accent); }.signature-dot { color:var(--accent); }
.header-note { font-size:8px; letter-spacing:1.9px; color:#858b7b; }
.sound-button { display:flex; align-items:center; gap:9px; border:0; background:none; padding:12px 0 12px 12px; font-size:10px; color:#878d7e; }.sound-button svg { width:14px; height:14px; }.sound-button[aria-pressed="false"] svg { opacity:.4; }.sound-button:hover { color:var(--ink); }
.hero-content { position:absolute; inset:0; }
h1 { position:absolute; z-index:0; width:100%; text-align:center; top:50%; transform:translateY(-50%); margin:0; font:400 23.4vw/.95 Italiana,Georgia,serif; letter-spacing:-1.25vw; color:#d6d9ce; white-space:nowrap; user-select:none; }
h1 span { color:#c5caba; }
.scene,.agent-layer { position:absolute; inset:0; }.scene { z-index:1; pointer-events:none; transform:translate3d(-200%,0,0); }
.portrait { position:absolute; left:50%; bottom:-3.5%; height:101%; width:auto; max-width:none; transform:translateX(-50%); object-fit:contain; user-select:none; }
.loading .portrait { opacity:0; }
#sculpture-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.agent-layer { z-index:4; pointer-events:none; }
.agent-layer.companion { position:fixed; inset:0; z-index:20; }
.agent { position:absolute; padding:0; border:0; background:transparent; pointer-events:auto; opacity:0; transition:opacity .35s; }
.prologue-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.agent:disabled { opacity:0; pointer-events:none; }
.sculpting .agent { opacity:1; }
.agent-sprite { display:block; image-rendering:pixelated; pointer-events:none; }
.agent-bubble { position:absolute; left:50%; bottom:calc(100% + 8px); width:max-content; max-width:min(250px,calc(100vw - 24px)); padding:7px 9px 8px; background:var(--plate); color:#f2eadc; font:500 12px/1.4 ui-monospace,Consolas,monospace; text-align:left; opacity:0; transition:opacity .15s; pointer-events:none; }
.agent-bubble::after { content:''; position:absolute; left:var(--tail,50%); bottom:-6px; width:6px; height:6px; margin-left:-3px; background:inherit; }
/* The help box in the prologue: a dialogue in the helper's pixel style, with its face, a line, a notch per pull and the
   button to pull with it. */
.pull-help { position:absolute; z-index:7; left:50%; top:clamp(104px,17vh,190px); display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:10px 16px 10px 8px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0); transform:translateX(-50%); animation:pull-in .3s steps(4) both; }
.pull-help[hidden] { display:none; }
@keyframes pull-in { from { opacity:0; transform:translate(-50%,8px); } }
.pull-face { display:block; flex:none; image-rendering:pixelated; }
.pull-body { display:flex; flex-direction:column; gap:9px; }
.pull-line { margin:0; font:500 13px/1.4 ui-monospace,Consolas,monospace; white-space:nowrap; }
.pull-row { display:flex; align-items:center; gap:14px; }
.pull-meter { display:flex; gap:3px; }
.pull-meter i { width:8px; height:8px; background:var(--plate-well); box-shadow:inset 0 0 0 1px var(--metal-1); }
.pull-meter i.on { background:var(--metal-4); box-shadow:inset -2px -2px 0 var(--metal-3); }
.pull-button { padding:8px 14px 7px; border:0; background:var(--metal-2); color:var(--metal-on); font:700 11px/1 ui-monospace,Consolas,monospace; letter-spacing:2px; text-transform:uppercase; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1),0 0 0 2px #191410,0 3px 0 2px #191410; transform:translateY(-2px); cursor:var(--cursor-grab,grab); user-select:none; }
.pull-button:hover { background:var(--metal-hover); }
/* A scroll tried while it asks for a hand: the button hops, in whole steps like the pixels around it. */
.pull-button.nudge { animation:pull-nudge .5s steps(1,end); }
@keyframes pull-nudge { 20% { transform:translateY(-6px); } 45% { transform:translateY(-3px); } 65% { transform:translateY(-5px); } 85% { transform:translateY(-2px); } }
.pull-button:active { transform:translateY(1px); box-shadow:inset 2px 2px 0 var(--metal-1),inset -2px -2px 0 var(--metal-3),0 0 0 2px #191410,0 0 0 2px #191410; cursor:var(--cursor-grabbing,grabbing); }
.pull-button:focus-visible { outline:2px solid var(--metal-4); outline-offset:5px; }
.agent.speaking .agent-bubble { opacity:1; }.intro-note { position:absolute; z-index:3; left:5vw; bottom:9%; }.small-label { font-size:8px; letter-spacing:1.4px; color:#858e79; }
.intro-note p { font:400 clamp(25px,2.5vw,42px)/1.1 Italiana,Georgia,serif; margin:18px 0 20px; letter-spacing:-.8px; }.intro-note em { font-style:normal; }.specialty { font-size:11px; line-height:1.8; color:#7f8873; }

.footer { position:absolute; z-index:5; bottom:28px; left:3.4vw; right:3.4vw; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }.footer-note { font-size:7px; letter-spacing:1.5px; color:#9ba28e; }.project-link { display:flex; align-items:center; gap:5px; background:none; border:0; font-size:10px; color:#939c87; pointer-events:auto; padding:10px 0; }.project-link strong { font-weight:400; color:#657354; text-decoration:underline; text-decoration-color:#b7bfaa; text-underline-offset:4px; }.project-link svg { width:12px; height:12px; margin-left:4px; }
.project-note { position:absolute; right:0; bottom:55px; width:280px; padding:25px; background:#fafaf5; border:1px solid var(--line); box-shadow:0 8px 30px #34382f0b; pointer-events:auto; }.project-note p { font:28px Italiana,Georgia,serif; margin:18px 0 12px; }.project-note span:not(.small-label) { font-size:11px; line-height:1.7; color:#7b8570; }.project-note button { position:absolute; right:10px; top:8px; border:0; background:none; font-size:18px; color:#98a08e; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media(max-width:1050px) { .intro-note { left:3.5vw; }.specialty { font-size:10px; }.portrait { height:100%; bottom:-3.8%; }.header-note { display:none; } }
@media(max-width:760px) { .atelier { min-height:680px; }.header { left:22px; right:22px; height:70px; }.signature { font-size:16px; }.sound-button { font-size:9px; }h1 { font-size:23.4vw; letter-spacing:-1.25vw; }.portrait { height:87%; bottom:-3.6%; }.intro-note { top:23%; bottom:auto; left:24px; }.small-label { font-size:6px; letter-spacing:1px; }.intro-note .small-label { display:none; }.intro-note p { font:400 17px/1.1 DM,sans-serif; letter-spacing:-.5px; margin:0 0 8px; }.pull-help { top:calc(23% + 64px); }.specialty { display:none; }.portrait { height:78%; bottom:-3.3%; }.footer { left:20px; right:20px; bottom:15px; }.footer-note { display:none; }.project-link { font-size:9px; background:#f0efeaee; padding:8px 10px; border:1px solid #d8dbd0; }.project-note { left:0; right:auto; bottom:47px; } }
@media(max-width:370px) { .signature { font-size:14px; }.sound-button span { display:none; }.intro-note { left:18px; }.intro-note p { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }

/* Projects, in the atelier palette. */
/* The page moves an area at a time: each section is a magnet the scroll settles on, one at a time (one taller than
   the window scrolls freely inside before letting go). The wheel, the keys and the links to a section glide from one
   to the next (the script); the magnets are off meanwhile. Until the portrait is carved the page stays on screen 1
   (the gutter is kept, so nothing shifts when the scrollbar comes back), and the way down only shows up then. */
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; scrollbar-gutter:stable; }
html.gliding { scroll-snap-type:none; scroll-behavior:auto; }
html.scroll-locked { overflow:hidden; }
.atelier,.project-gallery,.year,.arena,.contato { scroll-snap-align:start; scroll-snap-stop:always; }
.scroll-locked .work-jump { opacity:0; visibility:hidden; }
.work-jump { display:inline-flex; align-items:center; gap:16px; font-size:8px; letter-spacing:1.3px; color:#78816d; pointer-events:auto; padding:10px 0; transition:opacity .8s,visibility .8s; }
.work-jump span { font-size:18px; transition:transform .25s; }.work-jump:hover span { transform:translateY(4px); }
/* Architectural fragments belong to the gallery, entirely below the hero. */
.project-gallery { --column-width:clamp(240px,20vw,330px); --cornice-height:86px; --floor-height:30px; position:relative; overflow:clip; isolation:isolate; }
/* Drawn like the hero lettering: flat sage, thick verticals, thin horizontals, cuts in the paper colour. */
.gallery-cornice,.gallery-floor,.gallery-column { position:absolute; color:#d6d9ce; pointer-events:none; }
.gallery-cornice svg,.gallery-floor svg,.gallery-column svg { fill:currentColor; stroke:none; }
.gallery-cornice { top:0; left:0; right:0; height:var(--cornice-height); }
.gallery-floor { bottom:0; left:0; right:0; height:var(--floor-height); }
.gallery-cornice svg,.gallery-floor svg { display:block; width:100%; height:100%; }
/* Capital and base keep their proportions; only the fluted shaft stretches with the section. */
.gallery-column { top:var(--cornice-height); bottom:var(--floor-height); width:var(--column-width); display:flex; flex-direction:column; }
.gallery-column svg { position:relative; z-index:1; display:block; flex:none; width:100%; height:auto; overflow:visible; }
.gallery-column .column-shaft { z-index:0; flex:1 1 0; min-height:0; margin:-3px 0; }
/* Each column stands on the edge of the window: its axis is the edge, half of it is outside. */
.gallery-column-left { left:calc(var(--column-width) * -.5); }
.gallery-column-right { right:calc(var(--column-width) * -.5); }
.col-cut { fill:var(--paper); }.col-cut-line { fill:none; stroke:var(--paper); stroke-width:1.5; }
/* The projects sit in the middle of the portico: the same air under the cornice and above the floor. */
.work { --air:64px; position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; width:calc(100% - 340px); max-width:1120px; margin:auto; padding:calc(var(--cornice-height) + var(--air)) 0 calc(var(--floor-height) + var(--air)); scroll-margin-top:24px; }
.work > h2 { margin:0 0 34px; text-align:center; font:400 48px/1.1 Italiana,Georgia,serif; letter-spacing:-1.8px; transition:opacity .3s; }
.work > h2 span { color:#929d80; }
.work.card-over-title > h2 { opacity:0; }
/* A carousel of bronze boxes. The script places each box on a ring and draws it at its own pixel size; the open one
   lets its project card out between the lid (back canvas) and the body (front canvas). */
.vault { position:relative; }
.vault-stage { position:relative; height:var(--stage-h,285px); margin:var(--room,0px) 0 var(--tail,0px); transition:margin .45s cubic-bezier(.2,.7,.2,1); touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:var(--cursor-grab,grab); }
.ring-dragging,.ring-dragging * { cursor:var(--cursor-grabbing,grabbing)!important; }
.chest { position:absolute; left:0; top:0; }
.chest canvas { position:absolute; left:0; top:0; display:block; image-rendering:pixelated; pointer-events:none; }
.chest-back { z-index:0; }.chest-reveal { z-index:1; }.chest-front { z-index:2; }.chest-lock { z-index:3; }
.chest.settled .chest-reveal { z-index:4; }
.chest-lock { position:absolute; padding:0; border:0; background:none; }
.chest-lock:focus-visible { outline:2px solid var(--accent); outline-offset:8px; }
.chest-reveal { position:absolute; width:var(--card-w,640px); user-select:text; -webkit-user-select:text; cursor:var(--cursor-arrow,auto); }
.chest.opening .chest-reveal,.chest.closing .chest-reveal { overflow:hidden; }
/* Out of the light: the card rises from the mouth of the box, narrow and bright, and opens to its size only once it is
   out, over the box; the script sets how narrow (--rise-s) and how deep it starts (--rise-y). Closing, the reverse. */
.chest.opening .work-card { animation:card-rise .9s linear both; }
.chest.closing .work-card { animation:card-sink .5s linear both; }
@keyframes card-rise {
  from { transform:translateY(var(--rise-y,100%)) scale(var(--rise-s,.25)); filter:brightness(1.8) sepia(.5); animation-timing-function:cubic-bezier(.3,.7,.4,1); }
  42% { transform:translateY(0) scale(var(--rise-s,.25)); filter:brightness(1.6) sepia(.4); animation-timing-function:cubic-bezier(.2,.8,.25,1); }
  to { transform:none; filter:none; }
}
@keyframes card-sink {
  from { transform:none; animation-timing-function:cubic-bezier(.5,0,.8,.5); }
  50% { transform:translateY(0) scale(var(--rise-s,.25)); filter:brightness(1.5) sepia(.35); animation-timing-function:cubic-bezier(.5,0,.75,.4); }
  to { transform:translateY(var(--rise-y,100%)) scale(var(--rise-s,.25)); filter:brightness(1.8) sepia(.5); }
}
.work-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:14px; border:1px solid #d4d6cb; background:#e8e9e1; transform-origin:50% 100%; }
.chest .work-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); padding:12px; background:#ecece4; border-color:#cdbf9f; box-shadow:0 0 0 1px #f3e6c8 inset,0 26px 60px -30px #3a2b1b88; transition:box-shadow .35s; }
.chest.opening .work-card,.chest.closing .work-card { box-shadow:0 0 0 1px #f3e6c8 inset,0 26px 60px -30px #3a2b1b00; }
.chest .work-card:focus { outline:none; }
.project-cover { position:relative; aspect-ratio:16/9; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.chest .project-cover { aspect-ratio:auto; align-self:start; height:212px; }
.cover-gevia { background:#0d0d0d; color:#fe683e; }
.gevia-wordmark { font:400 42px/1 'Cal Sans',DM,sans-serif; letter-spacing:-.025em; }
.gevia-wordmark > span { color:#fff; }
.cover-fitfeed { background:#fff; }
.fitfeed-logo { display:block; width:68%; height:auto; }
.cover-tv1 { background:#0d0d0d; }
.tv1-logo { display:block; width:auto; height:30%; }
.card-content { display:flex; flex-direction:column; flex:1; padding:23px 7px 6px; }
.chest .card-content { padding:20px 30px 6px 26px; }
.card-content h3 { margin:0 0 11px; font:500 19px/1.3 DM,sans-serif; letter-spacing:-.5px; }
.card-content > p { margin:0; color:#707763; font-size:13px; line-height:1.75; max-width:46ch; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:26px; min-height:23px; }
.work-tag { font-size:8px; letter-spacing:1.3px; color:#73835e; }
.card-bottom a { font-size:11px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#a7b093; }.card-bottom a span { margin-left:4px; }
.card-link { margin:12px 0 0; font-size:11px; }.card-link a { text-decoration:underline; text-underline-offset:4px; text-decoration-color:#a7b093; }.card-link a span { margin-left:4px; }
.card-story { margin-top:auto; padding-top:26px; }
.card-story summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:23px; font-size:11px; color:#667359; list-style:none; }
.card-story summary::-webkit-details-marker { display:none; }.story-label { display:inline-flex; align-items:center; gap:10px; }.story-plus { font-size:18px; font-weight:300; transition:transform .2s; }.card-story[open] .story-plus { transform:rotate(45deg); }
.card-story summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.card-story p { font-size:12px; line-height:1.8; color:#707763; margin:15px 0 8px; }
.chest-close { position:absolute; top:6px; right:8px; width:30px; height:30px; padding:0; border:0; background:none; font-size:19px; line-height:1; color:#98a08e; }
.chest-close:hover { color:var(--ink); }
/* Under the ring: turn left or right, and the name of the box in front. */
.vault-controls { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:22px; }
.vault-turn { border:0; background:none; padding:10px 14px; font-size:17px; line-height:1; color:#78816d; }
.vault-turn:hover { color:var(--ink); }
.vault-caption { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:230px; margin:0; }
.vault-numeral { font-size:8px; letter-spacing:1.6px; color:#858e79; }
.vault-name { font:400 30px/1 Italiana,Georgia,serif; letter-spacing:-.6px; }
@media(min-width:761px) and (max-width:1200px) {
  .project-gallery { --column-width:200px; --cornice-height:68px; --floor-height:24px; }
  .work { width:calc(100% - 220px); }
}
@media(max-width:760px) {
  .project-gallery { --column-width:88px; --cornice-height:46px; --floor-height:16px; }
  .work { --air:44px; width:calc(100% - 88px); }.work > h2 { font-size:40px; margin:0 0 30px; }
  .chest .work-card { grid-template-columns:1fr; padding:11px; }.chest .project-cover { aspect-ratio:16/9; height:auto; }.chest .card-content { padding:20px 5px 6px; }
  .gevia-wordmark { font-size:38px; }
  .card-content h3 { font-size:18px; }.card-content > p { font-size:12px; }.card-bottom,.card-story { padding-top:22px; }.work-tag { font-size:7px; }
  .chest-close { top:17px; right:17px; width:28px; height:28px; background:#ecece4e6; }
  .vault-controls { gap:8px; }.vault-caption { min-width:0; gap:10px; }.vault-name { font-size:24px; }
  .footer .work-jump { font-size:7px; gap:7px; }.footer .project-link { margin-left:auto; }
}
/* The year: a bronze plaque the helper engraves (assets/placa-bronze.js), and under it the year's total, standing in
   the hero's pale lettering like a pedestal. The script sizes the plaque (--plaque-w) and cuts the total along with
   the plaque (--carved, 0 to 1, left to right). */
.year { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 3.4vw 44px; overflow:clip; }
.year-head { display:flex; flex-direction:column; align-items:center; text-align:center; }
.year .small-label { font-size:10px; letter-spacing:1.8px; }
.year-head h2 { margin:18px 0 14px; font:400 52px/1.1 Italiana,Georgia,serif; letter-spacing:-1.9px; }
.year-head h2 span { color:#929d80; }
.year-head p { margin:0; max-width:46ch; font-size:16px; line-height:1.65; color:#707763; }
.plaque { display:flex; flex-direction:column; align-items:center; margin:34px 0 0; }
.plaque-dates { align-self:stretch; display:flex; justify-content:space-between; margin:0 0 12px; font-size:10px; letter-spacing:1.8px; color:#858e79; }
.plaque-stage { position:relative; z-index:1; }
#plaque-canvas { display:block; image-rendering:pixelated; }
/* The apprentices who hammer the days in: small bronze helpers over the plaque, placed by the script. */
.apprentice { position:absolute; left:0; top:0; z-index:2; display:block; image-rendering:pixelated; pointer-events:none; opacity:0; transition:opacity .25s; }
.apprentice.in { opacity:1; }
/* A day under the pointer, in the helper's speech bubble. */
.plaque-tip { position:absolute; left:0; top:0; width:max-content; padding:7px 9px 8px; background:var(--plate); color:#f2eadc; font:500 12px/1.4 ui-monospace,Consolas,monospace; pointer-events:none; transform:translate(-50%,calc(-100% - 10px)); }
.plaque-tip::after { content:''; position:absolute; left:var(--tail,50%); bottom:-6px; width:6px; height:6px; margin-left:-3px; background:inherit; }
.plaque-tip[hidden] { display:none; }
.plaque-total { display:flex; flex-direction:column; align-items:center; gap:16px; margin:var(--total-gap,0px) 0 0; }
/* Italiana's old-style figures: the box is cut to the ink, from the top of the tallest figure (line-height) to the
   bottom of the ones that descend (padding), so the figures stand right under the plaque. */
.plaque-number { display:block; padding-bottom:.177em; font:400 min(30vw,31svh)/.542 Italiana,Georgia,serif; letter-spacing:-.03em; color:#d6d9ce; white-space:nowrap; user-select:none; clip-path:inset(-4% calc(100% - var(--carved,1) * 100%) -4% -2%); }
.year-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; width:var(--plaque-w,100%); max-width:100%; margin-top:30px; }
.year-stats { display:flex; gap:40px; margin:0; }
.year-stats div { display:flex; flex-direction:column-reverse; gap:10px; }
.year-stats dt { font-size:10px; letter-spacing:1.8px; color:#858e79; }
.year-stats dd { margin:0; font:600 32px/1 Cinzel,Georgia,serif; }
.year-meta { display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.plaque-legend { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:1.8px; color:#858e79; }
/* The legend is a strip of the plaque: the gilded studs vanish on paper. */
.legend-chips { display:flex; gap:2px; padding:3px; background:var(--plate-field); box-shadow:0 0 0 1px var(--metal-0); }
.legend-chips i { width:12px; height:12px; background:var(--stud-0); box-shadow:inset 2px 2px 0 var(--stud-0-lit),inset -2px -2px 0 var(--stud-0-shade); }
.legend-chips i:nth-child(2) { background:var(--metal-2); box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1); }
.legend-chips i:nth-child(3) { background:var(--metal-3); box-shadow:inset 2px 2px 0 var(--metal-4),inset -2px -2px 0 var(--metal-2); }
.legend-chips i:nth-child(4) { background:var(--metal-4); box-shadow:inset 2px 2px 0 var(--metal-5),inset -2px -2px 0 var(--metal-3); }
.legend-chips i:nth-child(5) { background:var(--metal-5); box-shadow:inset 2px 2px 0 var(--metal-6),inset -2px -2px 0 var(--metal-4); }
.year-link { font-size:13px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#a7b093; }.year-link > span { margin-left:4px; }
.year.no-data .plaque,.year.no-data .year-stats,.year.no-data .plaque-legend { display:none; }
@media(max-width:760px) {
  .year { padding:54px 16px 34px; }
  .year .small-label { font-size:9px; letter-spacing:1.5px; }
  .year-head h2 { font-size:42px; margin:16px 0 12px; }.year-head p { font-size:14px; max-width:32ch; }
  .plaque { margin-top:30px; }.plaque-dates { font-size:9px; }
  .plaque-number { font-size:min(40vw,24svh); }
  .year-foot { flex-direction:column; align-items:center; gap:28px; margin-top:32px; }
  .year-stats { gap:22px; }.year-stats div { align-items:center; text-align:center; }
  .year-stats dt { max-width:10ch; line-height:1.7; font-size:9px; letter-spacing:1.5px; }.year-stats dd { font-size:26px; }
  .year-meta { align-items:center; }
}
/* Redes sociais: LinkedIn × Instagram as a duel in the Colosseum. The stage runs edge to edge: the wall (drawn for
   the width by assets/coliseu.js) over the sand, a stone statue for each network with its numbers beside it (under it
   below 1280px), the gladiators (canvases) between them, ropes and dust on a canvas over the statues. --rivals-top,
   set by the script, is the room left for the wall over the statues. */
.arena { --stone:#e3d8c5; --stone-hi:#ece4d6; --band:#d9ccb5; --void:#5b4a39; --podium:#c3ad8b; --sand:#e8d6b0; --ring:#dcc69a;
  --crest:#a8432c; --sand-ink:#7a6a50; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:72px; }
.arena .small-label { font-size:10px; letter-spacing:1.8px; }
.arena-head { display:flex; flex-direction:column; align-items:center; padding:0 16px; text-align:center; }
.arena-head h2 { margin:18px 0 14px; font:400 52px/1.1 Italiana,Georgia,serif; letter-spacing:-1.9px; }
.arena-head h2 span { color:var(--crest); }
.arena-head p { margin:0; max-width:46ch; font-size:16px; line-height:1.65; color:#707763; text-wrap:balance; }
.arena-stage { --statue:clamp(220px,19vw,300px); --duel:clamp(140px,13vw,200px); --number:clamp(52px,5.2vw,82px);
  position:relative; margin-top:40px; padding:var(--rivals-top,48px) 0 72px; overflow:hidden; }
.coliseum { position:absolute; inset:0; width:100%; height:100%; stroke:none; }
.col-face { fill:var(--stone); }.col-podium { fill:var(--podium); }.col-band { fill:var(--band); }.col-void { fill:var(--void); }
.col-column { fill:var(--stone-hi); }.col-cut { fill:var(--paper); }.col-sand { fill:var(--sand); }
.col-ring { fill:none; stroke:var(--ring); stroke-width:2; }
.arena-fx { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; }
.gladiator { position:absolute; z-index:3; left:0; top:0; pointer-events:none; image-rendering:pixelated; }
.rivals { position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end; gap:var(--duel); }
.rival { display:flex; align-items:flex-end; gap:clamp(24px,2.8vw,44px); margin:0; }
.rival-ig { flex-direction:row-reverse; }
.rival-statue { display:block; width:var(--statue); height:auto; filter:drop-shadow(0 12px 10px rgba(70,50,25,.22)); }
.rival-card { display:flex; flex-direction:column; align-items:flex-end; padding-bottom:6px; text-align:right; }
.rival-ig .rival-card { align-items:flex-start; text-align:left; }
.rival .small-label { color:var(--sand-ink); }
.rival-tag { display:flex; gap:14px; }
.rival .rival-name { color:var(--ink); }
/* The number counts up as the statue comes in; the final one, unseen, keeps the card from changing width meanwhile. */
.rival-number { display:grid; margin:16px 0 12px; font:600 var(--number)/.9 Cinzel,Georgia,serif; letter-spacing:-.01em; white-space:nowrap; }
.rival-number::after { content:attr(data-final); visibility:hidden; }
.rival-number > *,.rival-number::after { grid-area:1/1; }
.rival-li .rival-number { justify-items:end; }
.rival-stats { display:flex; gap:26px; margin:24px 0 18px; }
.rival-stats div { display:flex; flex-direction:column-reverse; gap:8px; }
.rival-stats dt { font-size:10px; letter-spacing:1.8px; color:var(--sand-ink); }
.rival-stats dd { margin:0; font:600 26px/1 Cinzel,Georgia,serif; }
.rival-stats a { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:#b39d76; }
.rival-link { font-size:13px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#b39d76; }.rival-link > span[aria-hidden] { margin-left:4px; }
.arena.no-linkedin .rival-li,.arena.no-instagram .rival-ig { display:none; }
/* Below 1280px the numbers go under the statues, which stand side by side over the wall's foot. */
@media(max-width:1279px) {
  .arena-stage { --duel:clamp(84px,18vw,150px); --statue:min(240px,calc((100vw - 32px - var(--duel)) / 2)); --number:clamp(30px,7vw,60px); padding-bottom:56px; }
  .rivals { align-items:flex-start; padding:0 16px; }
  .rival,.rival-ig { flex-direction:column; align-items:center; gap:24px; width:var(--statue); }
  .rival-statue { order:-1; }
  .rival-card,.rival-ig .rival-card { align-items:center; text-align:center; }
  .rival-tag { flex-direction:column; align-items:center; gap:6px; }
  .rival-li .rival-number { justify-items:center; }.rival-ig .rival-number { justify-items:center; }
  .rival-stats { flex-direction:column; align-items:center; gap:16px; margin:20px 0 16px; }
  .rival-stats div { align-items:center; }
}
@media(max-width:760px) {
  .arena { padding-top:56px; }
  .arena .small-label,.rival-stats dt { font-size:9px; letter-spacing:1.5px; }
  .arena-head h2 { font-size:42px; margin:16px 0 12px; }.arena-head p { font-size:14px; max-width:32ch; }
  .arena-stage { margin-top:28px; }
  .rival-stats dt { max-width:14ch; line-height:1.7; text-align:center; }.rival-stats dd { font-size:21px; }
  .rival-link { font-size:12px; }
}
/* Contato: the last screen. A meadow under a big sky with a path up to a sanctuary on a hill (drawn for the size by
   assets/campo.js; a narrow window sees the middle of a wider meadow), petals blowing across it on a canvas, and four
   small Greek buildings along the path, one for each way to reach Felipe (assets/casas.js): each with its contact on
   a pixel-art scroll at its foot (assets/pergaminho-bronze.js). The script places the buildings on the ground and
   sizes each paper in whole sprite pixels, and cuts its text where the paper has unrolled. A door lights up while
   its building is pointed at or its link has the focus. */
.contato { --sky-1:#8fb5c4; --sky-2:#afcdd3; --sky-3:#cfe2e0; --cloud:#f7f5ee; --cloud-shade:#d9e2df; --mount-1:#b3c7c8; --mount-2:#9db3a7;
  --rock:#dcd1ba; --rock-shade:#beae8e; --temple:#f2ede2; --temple-shade:#b9aa88;
  --grass-1:#c4d394; --grass-2:#a6c06e; --grass-3:#8daf58; --grass-4:#769c49; --grass-5:#62893f;
  --ruin:#ebe3d2; --ruin-shade:#c6b691; --ruin-line:#b09c74; --fl-w:#fbf8ef; --fl-y:#efd67a; --fl-p:#e9a59d; --path:#e3d5b3; --path-shade:#d2c29c;
  --marble:#f2ede2; --marble-shade:#d6c9ab; --marble-deep:#b9aa88; --marble-line:#9c8a66; --tile:#c58a6b; --tile-shade:#a8705a; --paint:#7f98a5;
  --door:#5b4c3b; --door-shade:#4a3d30; --lamp:#f3cf86; --lamp-shade:#e2b46a;
  position:relative; height:100svh; min-height:600px; overflow:hidden; color:#3b2f22; background:linear-gradient(var(--sky-2) 42%, var(--grass-3) 42%); }
.campo { position:absolute; inset:0; width:100%; height:100%; stroke:none; }
.cp-sky { fill:var(--sky-1); }.cp-sky-2 { fill:var(--sky-2); }.cp-sky-3 { fill:var(--sky-3); }.cp-glow { fill:#fbf8ee; opacity:.35; }
.cp-cloud { fill:var(--cloud); }.cp-cloud-shade { fill:var(--cloud-shade); }.cp-mount-1 { fill:var(--mount-1); }.cp-mount-2 { fill:var(--mount-2); }
.cp-rock { fill:var(--rock); }.cp-rock-shade { fill:var(--rock-shade); }.cp-temple { fill:var(--temple); }.cp-temple-shade { fill:var(--temple-shade); }
.cp-grass-1 { fill:var(--grass-1); }.cp-grass-2 { fill:var(--grass-2); }.cp-grass-3 { fill:var(--grass-3); }.cp-grass-4 { fill:var(--grass-4); }.cp-grass-5 { fill:var(--grass-5); }
.cp-ruin { fill:var(--ruin); }.cp-ruin-shade { fill:var(--ruin-shade); }.cp-ruin-line { fill:var(--ruin-line); }
.cp-fl-w { fill:var(--fl-w); }.cp-fl-y { fill:var(--fl-y); }.cp-fl-p { fill:var(--fl-p); }.cp-path { fill:var(--path); }.cp-path-shade { fill:var(--path-shade); }
.field-fx { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; }
.contact-head { position:absolute; z-index:2; top:7%; left:0; right:0; padding:0 16px; text-align:center; }
.contact-head h2 { margin:0; font:400 64px/1 Italiana,Georgia,serif; letter-spacing:-1.5px; }
.contact-head p { margin:10px 0 0; font-size:15px; }
.houses { position:absolute; z-index:2; inset:0; margin:0; padding:0; list-style:none; pointer-events:none; }
.house-art { position:absolute; display:block; pointer-events:auto; cursor:var(--cursor-chisel,pointer); }
.house-art svg { display:block; width:100%; height:100%; overflow:visible; stroke:none; }
.cs-marble { fill:var(--marble); }.cs-shade { fill:var(--marble-shade); }.cs-deep { fill:var(--marble-deep); }.cs-line { fill:var(--marble-line); }
.cs-roof { fill:var(--tile); }.cs-roof-shade { fill:var(--tile-shade); }.cs-paint { fill:var(--paint); }
.cs-text { fill:var(--marble-line); font-family:Cinzel,Georgia,serif; font-weight:600; }
.cs-door { fill:var(--door); transition:fill .25s; }.cs-door-shade { fill:var(--door-shade); transition:fill .25s; }
.house:hover .cs-door,.house:focus-within .cs-door { fill:var(--lamp); }
.house:hover .cs-door-shade,.house:focus-within .cs-door-shade { fill:var(--lamp-shade); }
/* The scroll at the building's foot: the canvas draws itself around the paper; rolled, the paper is cut away. */
.house-scroll { position:absolute; pointer-events:auto; }
.house-canvas { position:absolute; image-rendering:pixelated; pointer-events:none; }
.house-scroll.rolled { cursor:var(--cursor-chisel,pointer); }
.house-scroll.rolled::before { content:''; position:absolute; left:calc(-1 * var(--knob,12px)); right:calc(-1 * var(--knob,12px)); top:calc(-1 * var(--rod,12px)); height:calc(2 * var(--rod,12px)); }
.house-scroll.rolled .house-paper { pointer-events:none; }
.house-paper { position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 22px 9px; text-align:center; white-space:nowrap; }
.house-net { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#654a2c; }
.house-row { display:flex; justify-content:center; align-items:center; gap:10px; font-size:16px; color:#2e241a; }
.house-row a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:#a07f4f; }
.house-row a:hover { text-decoration-color:var(--metal-1); }
/* The copy button, a small one of the pixel buttons (like PUXAR). */
.copy-button { min-width:62px; padding:5px 7px 4px; border:0; background:var(--metal-2); color:var(--metal-on); font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.5px; text-transform:uppercase;
  box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1),0 0 0 2px var(--metal-0); cursor:var(--cursor-chisel,pointer); }
.copy-button:hover { background:var(--metal-hover); }
.copy-button:active { box-shadow:inset 2px 2px 0 var(--metal-1),inset -2px -2px 0 var(--metal-3),0 0 0 2px var(--metal-0); }
.copy-button:focus-visible { outline:2px solid #3b2f22; outline-offset:3px; }
/* Without the drawings (their scripts missing), plain papers in a row near the bottom. */
.houses.plain { inset:auto 0 8%; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; padding:0 16px; pointer-events:auto; }
.houses.plain .house-scroll { position:static; }.houses.plain .house-art { display:none; }.houses.plain .house-paper { background:#ecdcb9; box-shadow:0 0 0 4px var(--metal-2); }
@media(max-width:760px) {
  .contact-head { top:5%; }.contact-head h2 { font-size:46px; }.contact-head p { font-size:13px; margin-top:8px; }
  .house-paper { max-width:46vw; padding:7px 12px 6px; white-space:normal; }.house-net { font-size:10px; letter-spacing:1.3px; }
  .house-row { flex-wrap:wrap; gap:6px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ---------------------------------------------------------------- games and secrets (assets/conquistas.js and the
   scripts after it): the helper's dark pixel panels, like the prologue's help box. */
.jw-button { padding:7px 12px 6px; border:0; background:var(--metal-2); color:var(--metal-on); font:700 10px/1.1 ui-monospace,Consolas,monospace; letter-spacing:1.6px; text-transform:uppercase; text-align:center; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1),0 0 0 2px #191410,0 3px 0 2px #191410; transform:translateY(-2px); user-select:none; }
.jw-button:hover { background:var(--metal-hover); }
.jw-button:active { transform:translateY(1px); box-shadow:inset 2px 2px 0 var(--metal-1),inset -2px -2px 0 var(--metal-3),0 0 0 2px #191410; }
.jw-button:disabled { opacity:.4; transform:none; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1),0 0 0 2px #191410; }
.jw-button:focus-visible { outline:2px solid var(--metal-4); outline-offset:5px; }
.jw-button.quiet { background:var(--metal-0); color:var(--metal-4); box-shadow:inset 2px 2px 0 var(--plate-bevel),inset -2px -2px 0 var(--plate-field),0 0 0 2px #191410,0 3px 0 2px #191410; }
.jw-button.quiet:hover { background:var(--plate-lift); }
a.jw-button { display:inline-block; }

/* the dialog */
.jw { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:12px; background:#191410a6; animation:jw-in .18s steps(3) both; }
.jw[hidden] { display:none; }
@keyframes jw-in { from { opacity:0; } }
.jw-sheet { position:relative; width:min(560px,100%); max-height:calc(100svh - 24px); overflow:auto; overscroll-behavior:contain; padding:16px 18px 20px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 12px 0 #19141055; scrollbar-color:var(--metal-1) var(--plate-deep); }
.jw-sheet:focus { outline:none; }
.jw-head { display:flex; align-items:center; gap:12px; margin:0 34px 14px 0; }
.jw-face { display:block; flex:none; image-rendering:pixelated; }
.jw-titles { min-width:0; }
.jw-title { margin:0; font:600 19px/1.15 Cinzel,Georgia,serif; letter-spacing:.4px; color:var(--metal-5); }
.jw-line { margin:5px 0 0; min-height:1.4em; font:500 12px/1.4 ui-monospace,Consolas,monospace; color:var(--metal-4); }
.jw-close { position:absolute; top:10px; right:10px; width:30px; height:30px; padding:0; border:0; background:var(--metal-0); color:var(--metal-4); font:700 16px/1 ui-monospace,Consolas,monospace; box-shadow:inset 2px 2px 0 var(--plate-bevel),inset -2px -2px 0 var(--plate-field),0 0 0 2px #191410; }
.jw-close:hover { background:var(--plate-lift); color:var(--metal-5); }
.jw-close:focus-visible { outline:2px solid var(--metal-4); outline-offset:3px; }
.jw-body { font-size:14px; line-height:1.55; }

/* the medal in the corner: the coin of the helper's metal, the count, a notch for each of the 25 (taller at the 13th,
   where it turns to silver); the name of a coin just struck slides out under it; the coins fly on a canvas over all */
.md-hud { position:fixed; z-index:30; top:16px; right:16px; display:flex; align-items:center; gap:8px; padding:5px 10px 5px 6px; border:0; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0); }
.md-hud[hidden] { display:none; }
.md-hud.over-hero { top:83px; right:3.4vw; }
.md-hud:hover { background:var(--plate-raise); }
.md-hud:focus-visible { outline:2px solid var(--metal-4); outline-offset:4px; }
.md-hud-coin { display:block; flex:none; image-rendering:pixelated; }
.md-hud.struck .md-hud-coin { animation:md-hop .5s steps(1,end); }
@keyframes md-hop { 20% { transform:translateY(-5px); } 45% { transform:translateY(-2px); } 70% { transform:translateY(-3px); } }
.md-hud-text { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.md-hud-count { font:600 13px/1 Cinzel,Georgia,serif; letter-spacing:.6px; color:var(--metal-5); }
.md-hud-meter { display:flex; align-items:flex-end; gap:1px; }
.md-hud-meter i { width:2px; height:4px; background:var(--plate-bevel); }
.md-hud-meter i.mark { height:7px; margin-right:2px; }
.md-hud-meter i.on { background:var(--metal-3); }
.md-hud[data-metal="prata"] .md-hud-meter i.on { background:#c3cbd1; }
.md-hud[data-metal="ouro"] .md-hud-meter i.on { background:#ecc145; }
.md-label { position:fixed; z-index:30; top:64px; right:16px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:calc(100vw - 32px); padding:8px 11px 9px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-1); text-align:right; cursor:var(--cursor-chisel,pointer); }
.md-label[hidden] { display:none; }
.md-label.over-hero { top:131px; right:3.4vw; }
.md-label.in { animation:md-label .32s steps(4) both; }
@keyframes md-label { from { transform:translateY(-14px); opacity:0; } }
.md-label-kind { font:700 8px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-3); }
.md-label strong { font:600 16px/1.15 Cinzel,Georgia,serif; color:var(--metal-5); }
.md-fly { position:fixed; z-index:31; inset:0; width:100%; height:100%; pointer-events:none; }

/* the medalheiro: the track to silver and gold, the board of 25 coins (the ones not found dark, with what to look
   for), the games around the site (each a way to get there), the prize */
.md-panel .jw-sheet { width:min(640px,100%); }
.md-panel[data-metal="prata"] .jw-sheet { box-shadow:0 0 0 2px #191410,inset 0 0 0 2px #939ca4; }
.md-panel[data-metal="ouro"] .jw-sheet { box-shadow:0 0 0 2px #191410,inset 0 0 0 2px #cc961b; }
.md-track { position:relative; margin:2px 0 26px; }
.md-track-bar { display:grid; grid-template-columns:repeat(25,1fr); gap:3px; }
.md-track-bar i { height:8px; background:var(--plate-well); box-shadow:inset 0 0 0 1px var(--metal-1); }
.md-track-bar i.on { background:var(--metal-4); box-shadow:inset -2px -2px 0 var(--metal-3); }
.md-track-mark { position:absolute; top:16px; font:700 8px/1 ui-monospace,Consolas,monospace; letter-spacing:1.4px; text-transform:uppercase; color:#8b8273; transform:translateX(-50%); }
.md-track-mark::before { content:''; position:absolute; left:50%; top:-8px; width:2px; height:5px; margin-left:-1px; background:currentColor; }
.md-track-mark.prata { left:52%; color:#939ca4; }
.md-track-mark.ouro { left:auto; right:0; transform:none; color:#cc961b; }
.md-track-mark.ouro::before { left:auto; right:0; }
.md-prize { display:flex; flex-direction:column; gap:8px; margin:0 0 18px; padding:12px 14px; background:var(--metal-0); box-shadow:inset 0 0 0 2px #cc961b; }
.md-prize[hidden] { display:none; }
.md-prize strong { font:600 17px/1.2 Cinzel,Georgia,serif; color:#fdeeab; }
.md-prize a { color:#ecc145; text-decoration:underline; text-underline-offset:3px; }
.md-code { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.md-code code { padding:6px 10px; background:var(--plate-deep); font:700 18px/1 ui-monospace,Consolas,monospace; letter-spacing:3px; color:#fdeeab; }
.md-board { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:18px; }
.md-grid { display:grid; grid-template-columns:repeat(5,auto); gap:4px; margin:0; padding:8px; list-style:none; background:var(--plate-deep); box-shadow:inset 0 0 0 2px var(--metal-0); }
.md-socket { display:block; padding:3px; border:0; background:none; line-height:0; }
.md-socket canvas { display:block; image-rendering:pixelated; }
.md-socket:hover canvas { transform:translateY(-2px); }
.md-socket.picked { background:var(--metal-0); box-shadow:inset 0 0 0 2px var(--metal-2); }
.md-socket:focus-visible { outline:2px solid var(--metal-4); outline-offset:1px; }
.md-caption { display:flex; flex-direction:column; gap:8px; min-height:96px; margin:6px 0 0; }
.md-caption strong { font:600 20px/1.15 Cinzel,Georgia,serif; color:#8f7a5c; }
.md-caption span { font-size:13.5px; line-height:1.5; color:#b5a990; }
.md-caption.got strong { color:var(--metal-5); }
.md-caption.got span { color:#d9cfbd; }
.md-sub { margin:24px 0 10px; font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-3); }
.md-sub[hidden] { display:none; }
.md-games { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.md-game { display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:'name score go' 'where score go'; align-items:center; column-gap:14px; row-gap:3px; width:100%; padding:9px 10px 9px 12px; border:0; text-align:left; background:var(--plate-row); color:#f2eadc; }
.md-game:hover { background:var(--plate-row-hover); }
.md-game:focus-visible { outline:2px solid var(--metal-4); outline-offset:3px; }
.md-game strong { grid-area:name; font:600 14px/1.2 Cinzel,Georgia,serif; color:var(--metal-5); }
.md-game-where { grid-area:where; font-size:12px; color:#b5a990; }
.md-game-score { grid-area:score; font:500 11px/1.3 ui-monospace,Consolas,monospace; color:var(--metal-4); text-align:right; }
.md-game-go { grid-area:go; padding:6px 9px 5px; background:var(--metal-2); color:var(--metal-on); font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.4px; text-transform:uppercase; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1); }
.md-game:hover .md-game-go { background:var(--metal-hover); }
.md-foot { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:12px; border-top:2px solid var(--metal-0); }
.md-reset { padding:4px 0; border:0; background:none; font:500 11px/1.3 ui-monospace,Consolas,monospace; color:#b5a990; text-decoration:underline; text-underline-offset:3px; }
.md-reset:hover { color:var(--metal-4); }
.md-note { font-size:11px; color:#8b8273; }
/* the window's two tabs: the helper's inventory, the medalheiro */
.md-tabs { display:flex; gap:4px; margin:0 0 18px; }
.md-tab { flex:1; padding:9px 10px 8px; border:0; background:var(--plate-row); color:#b5a990; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; box-shadow:inset 0 -2px 0 var(--plate-field); }
.md-tab:hover { background:var(--plate-row-hover); color:var(--metal-4); }
.md-tab[aria-selected="true"] { background:var(--metal-0); color:var(--metal-5); box-shadow:inset 0 -3px 0 var(--metal-3); }
.md-tab:focus-visible { outline:2px solid var(--metal-4); outline-offset:2px; }
.md-med[hidden],.iv[hidden] { display:none; }
/* the inventory: the helper on a stand, its slots (a little helper in each, as it would look), its attributes */
.iv-hero { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:18px; }
.iv-stand { position:relative; display:flex; align-items:flex-end; justify-content:center; width:212px; height:176px; padding:0 0 18px; border:0; background:var(--plate-deep); box-shadow:inset 0 0 0 2px var(--metal-0); overflow:hidden; }
.iv-stand::before { content:''; position:absolute; left:0; right:0; bottom:0; height:18px; background:var(--plate-field); box-shadow:inset 0 2px 0 var(--metal-0); }
.iv-stand::after { content:''; position:absolute; left:46px; right:46px; bottom:12px; height:8px; background:var(--metal-2); box-shadow:inset 0 2px 0 var(--metal-4),inset 0 -2px 0 var(--metal-1),0 0 0 2px #191410; }
.iv-stand:focus-visible { outline:2px solid var(--metal-4); outline-offset:3px; }
.iv-portrait { position:relative; z-index:1; display:block; flex:none; image-rendering:pixelated; }
.iv-who { display:flex; flex-direction:column; gap:6px; padding-bottom:4px; }
.iv-kind { font:700 8px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-3); }
.iv-name { font:600 clamp(20px,2.4vw,26px)/1.1 Cinzel,Georgia,serif; color:var(--metal-5); }
.iv-level { font:500 11.5px/1.45 ui-monospace,Consolas,monospace; color:#d9cfbd; }
.iv-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.iv-slot { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:8px 6px 10px; border:0; background:var(--plate-row); color:#f2eadc; text-align:center; box-shadow:inset 0 0 0 2px var(--plate-field); }
.iv-slot:hover { background:var(--plate-row-hover); }
.iv-slot[aria-pressed="true"] { background:var(--metal-0); box-shadow:inset 0 0 0 2px var(--metal-3); }
.iv-slot:focus-visible { outline:2px solid var(--metal-4); outline-offset:2px; }
.iv-slot canvas { display:block; image-rendering:pixelated; }
.iv-slot strong { font:600 13px/1.15 Cinzel,Georgia,serif; color:var(--metal-5); }
.iv-slot span { font:500 10px/1.35 ui-monospace,Consolas,monospace; color:#b5a990; }
.iv-slot[aria-pressed="true"] span { color:var(--metal-4); }
.iv-slot.locked { cursor:var(--cursor-arrow,default); }
.iv-slot.locked canvas { filter:brightness(.3) saturate(0); }
.iv-slot.locked strong { color:#8b8273; }
.iv-stats { display:grid; gap:9px; margin:0; }
.iv-stat { display:grid; grid-template-columns:132px minmax(0,1fr) 92px; align-items:center; gap:12px; }
.iv-stat dt { font:600 13px/1.1 Cinzel,Georgia,serif; color:var(--metal-5); }
.iv-stat dt small { display:block; margin-top:3px; font:500 9.5px/1.2 ui-monospace,Consolas,monospace; color:#b5a990; }
.iv-stat dd { margin:0; }
.iv-bar { display:grid; grid-template-columns:repeat(10,1fr); gap:2px; }
.iv-bar i { height:8px; background:var(--plate-well); box-shadow:inset 0 0 0 1px var(--metal-1); }
.iv-bar i.on { background:var(--metal-4); box-shadow:inset -2px -2px 0 var(--metal-3); }
.iv-val { font:500 11px/1.2 ui-monospace,Consolas,monospace; color:var(--metal-4); text-align:right; }
.iv-dev { margin-top:22px; padding:11px 12px 12px; outline:2px dashed var(--metal-1); outline-offset:-2px; }
.iv-dev[hidden] { display:none; }
.iv-dev p { margin:0 0 9px; font:500 11px/1.5 ui-monospace,Consolas,monospace; color:#d9cfbd; }
.iv-dev strong { color:var(--metal-4); }
.iv-dev .iv-dev-note { margin:9px 0 0; color:#b5a990; }
.iv-dev-row { display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:520px) {
  .iv-hero { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .iv-who { align-items:center; }
  .iv-stand { width:100%; max-width:240px; height:150px; }
  .iv-slot span { font-size:9.5px; }
  .iv-stat { grid-template-columns:96px minmax(0,1fr) 74px; gap:8px; }
}
@media (max-width:560px) {
  .jw-sheet { padding:14px 12px 16px; }
  .md-board { grid-template-columns:1fr; gap:12px; }
  .md-grid { justify-self:center; }
  .md-caption { min-height:0; margin:0; text-align:center; align-items:center; }
  .md-game { grid-template-areas:'name go' 'where go' 'score go'; grid-template-columns:minmax(0,1fr) auto; }
  .md-game-score { text-align:left; }
}

/* talking to the helper: its speech box beside it, the tail pointing at it (docked at the bottom on a phone), the
   replies to pick from, a field to ask anything; the "!" over its head when it has something new to say there */
.papo { position:fixed; z-index:22; left:0; top:0; width:min(340px,calc(100vw - 24px)); padding:12px 14px 13px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 6px 0 #1914104d; animation:papo-in .2s steps(3) both; }
.papo[hidden] { display:none; }
@keyframes papo-in { from { opacity:0; transform:translateY(6px); } }
.papo::after { content:''; position:absolute; left:var(--tail,50%); bottom:-8px; width:8px; height:8px; margin-left:-4px; background:var(--plate); box-shadow:2px 0 0 #191410,-2px 0 0 #191410,0 2px 0 #191410; }
.papo.below::after { bottom:auto; top:-8px; box-shadow:2px 0 0 #191410,-2px 0 0 #191410,0 -2px 0 #191410; }
.papo.dock { left:12px; right:12px; top:auto; width:auto; }
.papo.dock::after { display:none; }
.papo-close { position:absolute; top:5px; right:5px; width:28px; height:28px; padding:0; border:0; background:none; color:#b5a990; font:700 15px/1 ui-monospace,Consolas,monospace; }
.papo-close:hover { color:var(--metal-5); }
.papo-close:focus-visible { outline:2px solid var(--metal-4); outline-offset:-2px; }
.papo-line { margin:0 26px 0 0; min-height:1.45em; font:500 13px/1.45 ui-monospace,Consolas,monospace; color:#f2eadc; cursor:var(--cursor-arrow,default); }
.papo-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.papo-chips:empty { display:none; }
.papo-chips.wide { flex-direction:column; }
.papo-chip { display:flex; flex-direction:column; gap:5px; padding:7px 10px 6px; border:0; background:var(--metal-0); color:var(--metal-4); font:600 11.5px/1.25 ui-monospace,Consolas,monospace; text-align:left; box-shadow:inset 2px 2px 0 var(--plate-bevel),inset -2px -2px 0 var(--plate-field); }
.papo-chip:hover { background:var(--plate-lift); color:var(--metal-5); }
.papo-chip:focus-visible { outline:2px solid var(--metal-4); outline-offset:2px; }
.papo-chips.wide .papo-chip { padding:10px 12px 9px; font:500 13.5px/1.4 DM,sans-serif; color:#f2eadc; box-shadow:inset 2px 2px 0 var(--plate-bevel),inset -2px -2px 0 var(--plate-field),inset 4px 0 0 #a8432c; }
.papo-chip-extra { font:700 8.5px/1 ui-monospace,Consolas,monospace; letter-spacing:1.3px; text-transform:uppercase; color:#b5a990; }
.papo-form { display:flex; gap:6px; margin-top:11px; }
.papo-form[hidden] { display:none; }
.papo-input { flex:1; min-width:0; padding:8px 10px; border:0; border-radius:0; background:var(--plate-deep); color:#f2eadc; font:13px DM,sans-serif; box-shadow:inset 2px 2px 0 #191410,inset -2px -2px 0 var(--metal-0); }
.papo-input::placeholder { color:#8b8273; }
.papo-input:focus { outline:2px solid var(--metal-4); outline-offset:1px; }
.papo-send { width:36px; padding:0; border:0; background:var(--metal-2); color:var(--metal-on); font:700 14px/1 ui-monospace,Consolas,monospace; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1); }
.papo-send:hover { background:var(--metal-hover); }
.papo-send:focus-visible { outline:2px solid var(--metal-4); outline-offset:2px; }
@media (pointer:coarse) { .papo-input { font-size:16px; } }
.papo-marca { position:fixed; z-index:21; left:0; top:0; display:grid; place-items:center; width:20px; height:24px; padding:0; border:0; background:#ecc145; color:#2c2116; font:800 15px/1 ui-monospace,Consolas,monospace; box-shadow:0 0 0 2px #191410,inset -2px -2px 0 #cc961b,inset 2px 2px 0 #fdeeab; animation:papo-marca 1s steps(1,end) infinite; }
.papo-marca[hidden] { display:none; }
.papo-marca::after { content:''; position:absolute; left:50%; bottom:-6px; width:4px; height:4px; margin-left:-2px; background:#191410; }
@keyframes papo-marca { 50% { transform:translateY(-3px); } }

/* the game of the light, on the ring of boxes: the arrows step aside and the caption under the ring tells the round */
.vault.cp-on .vault-turn { visibility:hidden; }
.vault.cp-on .vault-stage { cursor:var(--cursor-arrow,default); }
.vault.cp-on .vault-numeral { color:var(--accent); letter-spacing:2px; }
.vault.cp-pick .chest-lock { cursor:var(--cursor-chisel,pointer); }
.vault.cp-pick .chest-lock:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.cp-exit { display:block; margin:12px auto 0; padding:6px 10px; border:0; background:none; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:#858b7c; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c5caba; }
.cp-exit:hover { color:var(--ink); }
.cp-exit[hidden] { display:none; }

/* the Colosseum's games (assets/arena-jogos.js): what can be touched on the sand (a gladiator, a half of the rope)
   with its label; the tug of war's count over the sand */
.arena-hits { position:absolute; z-index:4; inset:0; pointer-events:none; visibility:hidden; }
.arena-hits.on { visibility:visible; }
.arena-hit { position:absolute; padding:0; border:0; background:none; }
.arena-hits.on .arena-hit { pointer-events:auto; }
.arena-hit.rope { cursor:var(--cursor-grab,grab); }
.arena-hit:focus-visible { outline:2px dashed var(--metal-1); outline-offset:2px; }
.arena-hits[data-hint="cabo"] .arena-hit.rope,.arena-hits[data-hint="cartas"] .arena-hit.fighter { outline:2px dashed var(--metal-1); outline-offset:2px; animation:arena-hint .5s steps(1,end) infinite; }
@keyframes arena-hint { 50% { outline-color:transparent; } }
.arena-tip { position:absolute; z-index:1; padding:5px 8px 4px; background:var(--plate); color:#f2eadc; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1px; white-space:nowrap; box-shadow:0 0 0 2px #191410; transform:translate(-50%,-100%); pointer-events:none; }
.arena-tip[hidden] { display:none; }
.arena-tip::after { content:''; position:absolute; left:50%; bottom:-6px; width:6px; height:6px; margin-left:-3px; background:var(--plate); }
.arena-tip.below { transform:translate(-50%,0); }
.arena-tip.below::after { bottom:auto; top:-6px; }
.tug-hud { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:center; gap:9px; padding:11px 18px 12px; background:var(--plate); box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 6px 0 #19141040; transform:translate(-50%,-100%); text-align:center; pointer-events:none; }
.tug-hud[hidden] { display:none; }
.tug-hud.top { transform:translate(-50%,0); }
.tug-sub { font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.6px; text-transform:uppercase; color:#b5a990; white-space:nowrap; }
.tug-big { font:600 clamp(30px,3.6vw,54px)/1 Cinzel,Georgia,serif; color:var(--metal-5); white-space:nowrap; }
.tug-big:empty { display:none; }
.tug-big.go,.tug-big.win { color:#ecc145; }
.tug-big.beat { animation:tug-beat .3s steps(3) both; }
@keyframes tug-beat { from { transform:scale(1.6); opacity:0; } }
.tug-clock { display:flex; gap:3px; }
.tug-clock i { width:9px; height:9px; background:var(--plate-well); box-shadow:inset 0 0 0 1px var(--metal-1); }
.tug-clock i.on { background:var(--metal-4); box-shadow:inset -2px -2px 0 var(--metal-3); }
.tug-hud[data-phase="end"] .tug-clock { visibility:hidden; }

/* the duel of cards on the sand (assets/duelo.js): the statues and their numbers step aside; two fighters a team with
   their life over their heads; first a board with the level and the team's metal, then (the first time) the helper's
   walk round the board; each team's deck in a row above it, the hand rising at the bottom, the two cards up big
   between the teams during a round; the subtitle narrates, in the lines it had */
.arena .rival { transition:opacity .3s steps(3),visibility 0s; }
.arena.duelo .rival { opacity:0; visibility:hidden; transition:opacity .3s steps(3),visibility 0s .3s; }
.arena.duelo .gladiator { visibility:hidden; }
.arena.duelo .arena-head p { max-width:62ch; height:calc(var(--lines,2) * 1.65em); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--lines,2); color:var(--ink); }
.dl-arena { position:absolute; z-index:5; inset:0; pointer-events:none; --sand-ink:#7a6a50; }
.dl-arena[hidden] { display:none; }
.dl-fighters { position:absolute; inset:0; pointer-events:none; }
.dl-fighter { position:absolute; left:0; top:0; }
.dl-fighter canvas { display:block; image-rendering:pixelated; }
.dl-fighter.caiu canvas { opacity:.55; }
.dl-bar { position:absolute; left:var(--feet-x); top:calc(var(--head) - 22px); width:46px; height:8px; margin-left:-23px; background:var(--plate-field); box-shadow:0 0 0 2px #191410; }
.dl-bar i { position:absolute; inset:0 auto 0 0; background:var(--metal-3); box-shadow:inset 0 -2px 0 var(--metal-2); transition:width .3s steps(4); }
.dl-bar.low i { background:#a8432c; box-shadow:inset 0 -2px 0 #7a2f1f; }
.dl-bar b { position:absolute; left:calc(100% + 6px); top:50%; font:600 13px/1 Cinzel,Georgia,serif; color:var(--ink); transform:translateY(-50%); }
.dl-alc { position:absolute; left:var(--feet-x); top:calc(var(--head) - 10px); display:flex; gap:3px; transform:translateX(-50%); }
.dl-alc i { width:6px; height:6px; background:#efe6d3; box-shadow:inset 0 0 0 1px #b39d76; }
.dl-alc i.on { background:#ecc145; box-shadow:inset -2px -2px 0 #cc961b,0 0 0 1px #191410; }
.dl-name { position:absolute; left:var(--feet-x); top:100%; margin-top:3px; font:700 8.5px/1 ui-monospace,Consolas,monospace; letter-spacing:1px; text-transform:uppercase; color:var(--sand-ink); white-space:nowrap; transform:translateX(-50%); }
.dl-fighter.ativo .dl-name { color:var(--ink); }
.dl-arena.narrow .dl-bar { width:38px; margin-left:-19px; }
.dl-arena.narrow .dl-bar b { left:calc(100% + 4px); font-size:12px; }
.dl-hit { position:absolute; inset:0; padding:0; border:0; background:none; pointer-events:none; }
.dl-arena[data-phase="over"] .dl-hit { pointer-events:auto; }
.dl-arena[data-phase="over"] .dl-fighter:hover canvas { transform:translateY(-2px); }
.dl-hit:focus-visible { outline:2px dashed var(--metal-1); outline-offset:2px; }
/* (what a fighter loses or gains pops beside its head, on the side away from the middle, under the card over it) */
.dl-pops { position:absolute; left:calc(var(--feet-x) + var(--aside,0px)); top:calc(var(--head) + 24px); width:0; height:0; }
.dl-pop { position:absolute; left:0; bottom:calc(var(--row,0) * 28px); white-space:nowrap; font:600 clamp(24px,2.6vw,36px)/1 Cinzel,Georgia,serif; color:#a8432c; transform:translateX(var(--pop-x,-50%)); animation:dl-pop 1.15s steps(8,end) both; }
.dl-pop.self { font-size:18px; }
.dl-pop.heal { color:#5f6b48; }
.dl-pop.held,.dl-pop.alc { display:flex; align-items:center; gap:5px; padding:4px 7px 3px; background:var(--plate); color:#f2eadc; font:700 11px/1 ui-monospace,Consolas,monospace; letter-spacing:.6px; box-shadow:0 0 0 2px #191410; }
.dl-pop.held .dl-icon { width:12px; height:12px; color:#c3cbd1; }
.dl-pop.alc { background:var(--metal-2); color:var(--metal-on); }
@keyframes dl-pop { from { transform:translate(var(--pop-x,-50%),10px) scale(1.5); opacity:0; } 12% { transform:translate(var(--pop-x,-50%),0); opacity:1; } 75% { opacity:1; } to { transform:translate(var(--pop-x,-50%),-26px); opacity:0; } }
.dl-row { position:absolute; display:flex; flex-direction:column; gap:10px; pointer-events:auto; }
.dl-row[data-align="end"] { align-items:flex-end; }.dl-row[data-align="start"] { align-items:flex-start; }.dl-row[data-align="center"] { align-items:center; }
.dl-row-label { padding:3px 6px 2px; background:#ece4d6e6; font:700 8.5px/1 ui-monospace,Consolas,monospace; letter-spacing:1.6px; text-transform:uppercase; color:var(--sand-ink); }
.dl-row[data-side="0"] .dl-row-label { color:var(--ink); }
.dl-cards { display:flex; align-items:flex-end; margin:0; padding:0; list-style:none; }
.dl-cards > li + li { margin-left:calc(6px + var(--overlap,0px)); }
.dl-slot-card { position:relative; display:flex; }
.dl-slot-card.live { z-index:2; }
.dl-slot-card.live .dl-card { transform:translateY(-6px); --ring:0 0 0 4px #ecc145; }
.dl-row.placing .dl-slot-card { pointer-events:none; }
.dl-gap { position:relative; z-index:3; display:flex; width:12px; }
.dl-gap-button { position:relative; width:100%; height:var(--mini-h,62px); padding:0; border:0; background:none; }
.dl-gap-button::before { content:''; position:absolute; inset:-6px -14px; }
.dl-gap-button::after { content:''; position:absolute; left:50%; top:6px; bottom:6px; width:4px; margin-left:-2px; background:#b39d76; animation:dl-gap 1s steps(1,end) infinite; }
.dl-gap-button:hover::after,.dl-gap-button:focus-visible::after { top:-4px; bottom:-4px; width:8px; margin-left:-4px; background:#ecc145; box-shadow:0 0 0 2px #191410; animation:none; }
.dl-gap-button:focus-visible { outline:none; }
@keyframes dl-gap { 50% { background:var(--metal-2); } }
.dl-more { align-self:center; padding:0 4px; font:600 14px/1 Cinzel,Georgia,serif; color:var(--sand-ink); }
/* each card in the metal of its deck (m-bronze, m-prata, m-ouro): a bevelled frame of it, a paper of its tone, its
   back; bronze has studs, silver a bright line cut in the frame, gold corners and a glint that runs across it now and
   then. Over the paper, the colour of the network. A card that holds a special move (golpe, assets/golpes.js) is a
   night sky with its constellation, the move's name under the card's. */
.m-bronze { --m0:#3a2b1b; --m1:#5c4427; --m2:#8d6a3b; --m3:#c09760; --m4:#e8cb95; --card-paper:#ece4d6; }
.m-prata { --m0:#2e3236; --m1:#5b636a; --m2:#939ca4; --m3:#c3cbd1; --m4:#eef2f4; --card-paper:#e4e8ea; }
.m-ouro { --m0:#5a3b0b; --m1:#986810; --m2:#cc961b; --m3:#ecc145; --m4:#fdeeab; --card-paper:#f4ebcf; }
.dl-card { --net:var(--metal-2); --stripe:8px; --ring:0 0 transparent; --drop:0 0 transparent;
  --frame:inset 1px 1px 0 var(--m4,#e8cb95),inset -1px -1px 0 var(--m0,#3a2b1b),inset 0 0 0 3px var(--m2,#8d6a3b),inset 0 0 0 4px var(--m1,#5c4427);
  position:relative; display:flex; flex-direction:column; gap:4px; padding:7px 8px 8px; border:0; text-align:left; background:var(--card-paper,#ece4d6); color:#2c2116;
  box-shadow:0 0 0 2px #191410,var(--ring),var(--frame),inset 0 var(--stripe) 0 var(--net),var(--drop); transition:transform .15s steps(2),rotate .15s steps(2); }
.dl-card.m-prata { --frame:inset 1px 1px 0 var(--m4),inset -1px -1px 0 var(--m0),inset 0 0 0 2px var(--m2),inset 0 0 0 3px var(--m4),inset 0 0 0 4px var(--m1); }
.dl-card.net-li { --net:#a8432c; }.dl-card.net-ig { --net:#5f6b48; }
/* each fighter's cards (f-<fighter>: its colours from assets/gladiadores.js, as --f, --f-shade and --f-light): its
   colour in the band at the top, the emblem of its format in the corner, and on the paper a faint pattern of the
   format: Textão a notebook's ruled lines, Networking a net, Reels a film's holes down both edges, Stories a story's
   bars along the top */
.dl-card[class*=" f-"] { --net:var(--f); --ink-f:color-mix(in srgb,var(--f) 24%,transparent); }
.dl-card-em { flex:none; width:14px; height:14px; fill:var(--f); stroke:none; shape-rendering:crispEdges; }
.dl-card.golpe .dl-card-em { fill:var(--f-light); }
.dl-card.mini .dl-card-who { position:absolute; z-index:1; top:calc(var(--stripe) + 4px); right:6px; margin:0; }
.dl-card.mini .dl-card-who > span { display:none; }
.dl-arena.narrow .dl-card.mini .dl-card-who { top:calc(var(--stripe) + 3px); right:4px; }
.dl-arena.narrow .dl-card.mini .dl-card-em { width:10px; height:10px; }
.dl-card.f-textao:not(.golpe) { background:linear-gradient(90deg,transparent 0 7px,#a8432c40 7px 8px,transparent 8px),repeating-linear-gradient(180deg,transparent 0 13px,var(--ink-f) 13px 14px) 0 calc(var(--stripe) + 4px),var(--card-paper); }
.dl-card.f-networking:not(.golpe) { background:repeating-linear-gradient(45deg,transparent 0 9px,var(--ink-f) 9px 10px),repeating-linear-gradient(-45deg,transparent 0 9px,var(--ink-f) 9px 10px),var(--card-paper); }
.dl-card.f-reels:not(.golpe) { --film:7px;
  background:linear-gradient(180deg,var(--card-paper) 0 4px,transparent 4px) calc(4px + (var(--film) - 3px) / 2) 3px / 3px 8px repeat-y,
    linear-gradient(180deg,var(--card-paper) 0 4px,transparent 4px) right calc(4px + (var(--film) - 3px) / 2) top 3px / 3px 8px repeat-y,
    linear-gradient(var(--ink-f),var(--ink-f)) 4px 0 / var(--film) 100% no-repeat,linear-gradient(var(--ink-f),var(--ink-f)) right 4px top 0 / var(--film) 100% no-repeat,var(--card-paper); }
.dl-card.mini.f-reels:not(.golpe) { --film:5px; }
.dl-card.f-stories:not(.golpe) { background:linear-gradient(var(--f),var(--f)) 8px calc(var(--stripe) + 3px) / calc((100% - 16px) / 4 - 2px) 2px no-repeat,
    repeating-linear-gradient(90deg,var(--ink-f) 0 calc(25% - 2px),transparent calc(25% - 2px) 25%) 8px calc(var(--stripe) + 3px) / calc(100% - 14px) 2px no-repeat,var(--card-paper); }
.dl-card.f-stories.golpe { background:linear-gradient(var(--f),var(--f)) 8px calc(var(--stripe) + 3px) / calc((100% - 16px) / 4 - 2px) 2px no-repeat,#15122a; }
.dl-card.mini.f-stories { padding-top:14px; }
.dl-arena.narrow .dl-card.mini.f-stories { padding-top:11px; }
.dl-card.big::after { content:''; position:absolute; inset:0; pointer-events:none; }
.dl-card.big.m-bronze::after { background:linear-gradient(var(--m4),var(--m4)) 1px 1px / 2px 2px no-repeat,linear-gradient(var(--m4),var(--m4)) calc(100% - 1px) 1px / 2px 2px no-repeat,
  linear-gradient(var(--m4),var(--m4)) 1px calc(100% - 1px) / 2px 2px no-repeat,linear-gradient(var(--m4),var(--m4)) calc(100% - 1px) calc(100% - 1px) / 2px 2px no-repeat,
  linear-gradient(var(--m0),var(--m0)) 50% 1px / 2px 2px no-repeat,linear-gradient(var(--m0),var(--m0)) 50% calc(100% - 1px) / 2px 2px no-repeat; }
.dl-card.big.m-ouro::after { background:linear-gradient(var(--m2),var(--m2)) 6px calc(100% - 6px) / 8px 2px no-repeat,linear-gradient(var(--m2),var(--m2)) 6px calc(100% - 6px) / 2px 8px no-repeat,
  linear-gradient(var(--m2),var(--m2)) calc(100% - 6px) calc(100% - 6px) / 8px 2px no-repeat,linear-gradient(var(--m2),var(--m2)) calc(100% - 6px) calc(100% - 6px) / 2px 8px no-repeat; }
.dl-card.big.m-ouro::before { content:''; position:absolute; z-index:2; inset:0; background:linear-gradient(110deg,transparent 44%,#fff6cf55 47%,#fffdf3aa 50%,#fff6cf55 53%,transparent 56%) no-repeat; background-size:300% 100%; background-position:110% 0; pointer-events:none; animation:dl-shine 5s steps(18) infinite; }
@keyframes dl-shine { 0% { background-position:110% 0; } 28%,100% { background-position:-10% 0; } }
.dl-card.golpe { background:#15122a; color:#f2eadc; }
.dl-card.golpe > span { position:relative; z-index:1; text-shadow:0 1px 0 #15122a, 0 0 4px #15122a, 0 0 8px #15122a; }
.dl-sky { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }
.dl-sky > path { fill:none; stroke:var(--m3,#c09760); stroke-width:1.1; stroke-dasharray:2 2; opacity:.6; }
.dl-sky .stars rect { fill:#fffaf0; }.dl-sky .stars rect.red { fill:#ef4444; }.dl-sky .dust rect { fill:#c9c3e6; }
.dl-card.golpe .dl-card-who { color:var(--m3); }
.dl-card.golpe .dl-card-text { color:#d9cfbd; }
.dl-card.golpe.k-ataque .dl-icon { color:#e0775a; }.dl-card.golpe.k-defesa .dl-icon { color:#c3cbd1; }.dl-card.golpe.k-truque .dl-icon { color:#ecc145; }
.dl-card-golpe { font:700 8.5px/1.25 ui-monospace,Consolas,monospace; letter-spacing:1.1px; text-transform:uppercase; color:var(--m4); }
.dl-card:focus-visible { outline:2px solid var(--metal-0); outline-offset:4px; }
.dl-card.mini { --stripe:7px; --frame:inset 1px 1px 0 var(--m4,#e8cb95),inset -1px -1px 0 var(--m0,#3a2b1b),inset 0 0 0 2px var(--m2,#8d6a3b),inset 0 0 0 3px var(--m1,#5c4427);
  width:var(--mini-w,46px); height:var(--mini-h,62px); gap:4px; padding:10px 6px 5px; overflow:hidden; }
.dl-card.mini .dl-card-top { justify-content:flex-start; gap:6px; }
.dl-card.mini .dl-card-name { font-size:11px; line-height:1.15; }
.dl-card.mini .dl-card-n { font-size:21px; }
.dl-card.mini .dl-icon { width:13px; height:13px; }
.dl-arena.narrow .dl-card.mini { padding:7px 4px 4px; }
.dl-arena.narrow .dl-card.mini .dl-card-n { font-size:17px; }
.dl-arena.narrow .dl-card.mini .dl-icon { width:11px; height:11px; }
.dl-arena.narrow .dl-card.mini .dl-card-name { display:none; }
.dl-arena.narrow .dl-card.mini .dl-card-top { flex-direction:column; align-items:flex-start; gap:4px; }
.dl-card.back { background:var(--m0,#3a2b1b); box-shadow:0 0 0 2px #191410,var(--ring),var(--frame); }
.dl-card-back { position:absolute; inset:3px; display:grid; place-items:center; background:repeating-linear-gradient(45deg,var(--m1,#5c4427) 0 4px,var(--m0,#3a2b1b) 4px 8px); box-shadow:inset 0 0 0 1px var(--m2,#8d6a3b); }
.dl-card-back svg { width:14px; height:14px; padding:3px; background:var(--m0,#3a2b1b); box-shadow:0 0 0 1px var(--m2,#8d6a3b); fill:var(--m3,#c09760); shape-rendering:crispEdges; }
.dl-card.flip { animation:dl-flip .3s steps(3) both; }
@keyframes dl-flip { from { transform:scaleX(.1); } }
.dl-card-who { display:flex; align-items:center; gap:5px; margin-top:3px; font:700 8px/1 ui-monospace,Consolas,monospace; letter-spacing:.8px; text-transform:uppercase; color:#6f5a3c; }
.dl-card-top { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.dl-icon { width:14px; height:14px; fill:currentColor; stroke:none; shape-rendering:crispEdges; }
.k-ataque .dl-icon { color:#a8432c; }.k-defesa .dl-icon { color:#5b636a; }.k-truque .dl-icon { color:#cc961b; }
.dl-card-n { font:600 18px/1 Cinzel,Georgia,serif; }
.dl-card-n.word { font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:.5px; text-transform:uppercase; }
.dl-card-name { font:700 11px/1.15 DM,sans-serif; }
.dl-hand { position:absolute; left:0; right:0; top:var(--hand-top); display:flex; justify-content:center; align-items:flex-start; gap:10px; padding:0 16px; transform:translateY(calc(var(--big-h,168px) + 48px)); transition:transform .35s cubic-bezier(.2,.9,.25,1.06); pointer-events:none; }
.dl-hand.up { transform:none; pointer-events:auto; }
.dl-card.big { --stripe:9px; --drop:0 5px 0 2px #19141040; width:var(--big-w,122px); height:var(--big-h,168px); overflow:hidden; rotate:calc(var(--i,0) * 2.5deg); }
.dl-card.big:hover { transform:translateY(-8px); rotate:0deg; }
.dl-card.big.picked { transform:translateY(-16px); rotate:0deg; --ring:0 0 0 5px #ecc145; --drop:0 8px 0 2px #19141040; }
.dl-card.big { gap:6px; padding:12px 11px 10px; }
.dl-card.big .dl-card-who { font-size:9px; }
.dl-card.big .dl-card-name { font-size:15.5px; }
.dl-card.big .dl-icon { width:22px; height:22px; }
.dl-card.big .dl-card-n { font-size:30px; }
.dl-card.big .dl-card-golpe { margin-top:-2px; font-size:9px; }
.dl-card-text { font-size:12.5px; line-height:1.4; color:#4a3d30; }
.dl-arena.narrow .dl-card.big { padding:6px 6px 7px; gap:3px; }
.dl-arena.narrow .dl-card.big .dl-card-name { font-size:12px; }
.dl-arena.narrow .dl-card.big .dl-card-n { font-size:19px; }
.dl-arena.narrow .dl-card.big .dl-icon { width:15px; height:15px; }
.dl-arena.narrow .dl-card-text { font-size:10.5px; line-height:1.3; }
.dl-arena.narrow .dl-card.big .dl-card-golpe { font-size:7.5px; letter-spacing:.6px; }
.dl-card.gone { visibility:hidden; }
.dl-ghost { position:absolute; z-index:6; margin:0; rotate:0deg; transform-origin:0 0; pointer-events:none; }
.dl-end { position:absolute; z-index:6; left:50%; top:var(--banner-top,12%); display:flex; flex-direction:column; align-items:center; gap:14px; width:var(--banner-w,min(460px,calc(100% - 32px))); transform:translateX(-50%); pointer-events:auto; animation:dl-banner .4s steps(4) both; }
.dl-end[hidden] { display:none; }
.dl-banner { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; padding:18px 20px 16px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 8px 0 #19141040; text-align:center; }
.dl-end-go { display:flex; justify-content:center; gap:12px; }
.dl-go.dl-out { background:var(--plate); color:var(--metal-4); box-shadow:inset 2px 2px 0 var(--plate-lift),inset -2px -2px 0 var(--plate-deep),0 0 0 2px #191410,0 3px 0 2px #191410; }
.dl-go.dl-out:hover { background:var(--plate-raise); color:var(--metal-5); }
.dl-banner.win { box-shadow:0 0 0 2px #191410,inset 0 0 0 2px #cc961b,0 8px 0 #19141040; }
@keyframes dl-banner { from { transform:translate(-50%,-16px); opacity:0; } }
.dl-banner strong { font:600 clamp(22px,2.4vw,32px)/1.1 Cinzel,Georgia,serif; color:var(--metal-5); }
.dl-banner.win strong { color:#ecc145; }
.dl-banner-text { font-size:13.5px; line-height:1.45; color:#d9cfbd; }
.dl-banner-score { font:600 12px/1 Cinzel,Georgia,serif; letter-spacing:1.6px; text-transform:uppercase; color:var(--metal-4); }
.dl-ctrl { position:absolute; z-index:7; top:10px; right:12px; display:flex; gap:6px; pointer-events:auto; }
.dl-ctrl button { padding:6px 9px 5px; border:0; background:var(--plate); color:var(--metal-4); font:700 9.5px/1 ui-monospace,Consolas,monospace; letter-spacing:1.4px; text-transform:uppercase; box-shadow:0 0 0 2px #191410,inset 2px 2px 0 var(--metal-0); }
.dl-ctrl button:hover { background:var(--plate-raise); color:var(--metal-5); }
.dl-ctrl button[aria-pressed="true"],.dl-ctrl button[aria-expanded="true"] { background:var(--metal-2); color:var(--metal-on); box-shadow:0 0 0 2px #191410,inset 2px 2px 0 var(--metal-3); }
.dl-ctrl button[hidden] { display:none; }
.dl-ctrl button:focus-visible { outline:2px solid var(--metal-0); outline-offset:3px; }
/* the two cards up, each over the head of its fighter (placed by assets/duelo.js), a tail down to it, whose it is at
   its top and what it did at its foot */
.dl-vs { position:absolute; z-index:4; inset:0; pointer-events:none; }
.dl-vs-slot { position:absolute; left:0; top:0; width:var(--over-w,110px); visibility:hidden; }
.dl-vs-slot[hidden] { display:none; }
.dl-vs.up .dl-vs-slot { visibility:visible; animation:dl-over .28s steps(4) both; }
@keyframes dl-over { from { transform:translateY(16px) scale(.8); opacity:0; } }
.dl-vs-tail { position:absolute; left:var(--tail,50%); top:calc(100% + 2px); width:10px; height:6px; margin-left:-5px; background:#191410;
  clip-path:polygon(0 0,100% 0,100% 2px,80% 2px,80% 4px,60% 4px,60% 6px,40% 6px,40% 4px,20% 4px,20% 2px,0 2px); }
.dl-vs-slot[data-side="0"] .dl-card-who { color:var(--ink); }
.dl-vs-slot[data-side="0"] .dl-card.golpe .dl-card-who { color:var(--m4); }
.dl-vs .dl-card.big { width:var(--over-w,110px); height:var(--over-h,150px); padding:8px 8px 8px; gap:3px; rotate:0deg; --drop:0 4px 0 2px #19141040; }
.dl-vs .dl-card.big .dl-card-who { font-size:8px; }
.dl-vs .dl-card.big .dl-card-name { font-size:12.5px; }
.dl-vs .dl-card.big .dl-card-n { font-size:22px; }
.dl-vs .dl-card.big .dl-icon { width:16px; height:16px; }
.dl-vs .dl-card.big .dl-card-golpe { font-size:7.5px; letter-spacing:.6px; }
.dl-vs .dl-card-text { font-size:10.5px; line-height:1.3; }
.dl-arena.narrow .dl-vs .dl-card-text { display:none; }
.dl-vs-out { position:absolute; left:6px; right:6px; bottom:8px; padding:5px 6px 4px; background:var(--plate); color:#f2eadc; font:700 10px/1.3 ui-monospace,Consolas,monospace; letter-spacing:.3px; text-align:center; box-shadow:0 0 0 2px #191410; animation:dl-rise .25s steps(3) both; }
@keyframes dl-rise { from { transform:translateY(6px); opacity:0; } }
.dl-vs-out:empty { display:none; }
.dl-arena.narrow .dl-vs-out { left:4px; right:4px; bottom:5px; padding:4px 4px 3px; font-size:9px; }

/* a special move (assets/golpes.js): its canvases behind and in front of the fighters, its name shouted on a plate of
   its deck's metal (big the first time in a duel, a tag over the head after that); while the arena is dark, the decks
   step back and the words on the sand turn light */
.dl-fx { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.dl-fx.front { z-index:4; }
.dl-gritos { position:absolute; z-index:6; inset:0; pointer-events:none; }
.dl-grito { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:calc(100% - 16px); padding:10px 18px 9px; background:#110e1ce6; text-align:center;
  box-shadow:0 0 0 2px #191410,inset 1px 1px 0 var(--m4),inset -1px -1px 0 var(--m0),inset 0 0 0 3px var(--m2),inset 0 0 0 4px var(--m1),0 6px 0 #19141040; animation:dl-grito .36s steps(4) both; }
.dl-grito strong { font:600 clamp(20px,2.9vw,40px)/1.05 Cinzel,Georgia,serif; letter-spacing:.05em; text-transform:uppercase; color:var(--m4); text-shadow:0 3px 0 var(--m1); }
.dl-grito span { font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:2.4px; text-transform:uppercase; color:var(--m3); }
.dl-grito.curto { padding:6px 9px 5px; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--m2); animation-duration:.2s; }
.dl-grito.curto strong { font:700 10.5px/1.15 ui-monospace,Consolas,monospace; letter-spacing:1.2px; text-shadow:none; }
@keyframes dl-grito { 0% { transform:scale(1.7); opacity:0; } 50% { transform:scale(.95); opacity:1; } 75% { transform:scale(1.03); } }
.dl-arena.narrow .dl-grito strong { font-size:18px; }
.dl-arena.narrow .dl-grito.curto strong { font-size:9.5px; }
.dl-row { transition:opacity .25s steps(3); }
.dl-arena.cosmo .dl-row { opacity:.16; }
.dl-arena.cosmo .dl-name,.dl-arena.cosmo .dl-bar b { color:#f2eadc; }
.dl-arena.cosmo .dl-pop { color:#ff8a6a; }.dl-arena.cosmo .dl-pop.heal { color:#9be3b5; }

/* before the duel: the level and the team's metal, on a board over the sand */
.dl-setup { position:absolute; z-index:6; left:50%; top:8px; width:var(--setup-w,min(560px,calc(100% - 24px))); padding:16px 16px 14px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 8px 0 #19141040; transform:translateX(-50%); pointer-events:auto; animation:dl-banner .4s steps(4) both; }
.dl-setup[hidden] { display:none; }
.dl-setup-h { margin:0 0 8px; font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-3); }
.dl-levels,.dl-metals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:14px; }
.dl-tile { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:8px 6px 10px; border:0; background:var(--plate-row); color:#f2eadc; text-align:center; box-shadow:inset 0 0 0 2px var(--plate-field); }
.dl-tile:hover { background:var(--plate-row-hover); }
.dl-tile[aria-pressed="true"] { background:var(--metal-0); box-shadow:inset 0 0 0 2px var(--metal-3); }
.dl-tile:focus-visible { outline:2px solid var(--metal-4); outline-offset:2px; }
.dl-tile canvas { display:block; image-rendering:pixelated; }
.dl-tile strong { font:600 15px/1.1 Cinzel,Georgia,serif; color:var(--metal-5); }
.dl-tile-sub { font:700 8.5px/1.25 ui-monospace,Consolas,monospace; letter-spacing:1px; text-transform:uppercase; color:var(--metal-4); }
.dl-tile-note { font-size:11.5px; line-height:1.35; color:#b5a990; }
.dl-tile[aria-pressed="true"] .dl-tile-note { color:#d9cfbd; }
.dl-tile.locked { cursor:var(--cursor-arrow,default); }
.dl-tile.locked canvas { filter:brightness(.3) saturate(0); }
.dl-tile.locked strong,.dl-tile.locked .dl-tile-sub { color:#8b8273; }
.dl-metal { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; row-gap:3px; align-items:center; justify-items:start; padding:6px 8px; text-align:left; }
.dl-metal canvas { grid-row:1 / 4; }
.dl-metal .dl-tile-note { grid-column:2; }
.dl-metal strong { font-size:13.5px; }
.dl-metal[data-key="bronze"] strong { color:#e8cb95; }.dl-metal[data-key="prata"] strong { color:#eef2f4; }.dl-metal[data-key="ouro"] strong { color:#ecc145; }
.dl-metal.locked[data-key] strong { color:#8b8273; }
.dl-setup-go { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.dl-go { padding:10px 18px 9px; border:0; background:var(--metal-2); color:var(--metal-on); font:700 11px/1 ui-monospace,Consolas,monospace; letter-spacing:2px; text-transform:uppercase; box-shadow:inset 2px 2px 0 var(--metal-3),inset -2px -2px 0 var(--metal-1),0 0 0 2px #191410,0 3px 0 2px #191410; }
.dl-go:hover { background:var(--metal-hover); }
.dl-go:focus-visible { outline:2px solid var(--metal-4); outline-offset:4px; }
.dl-link { padding:6px 2px; border:0; background:none; color:#d9cfbd; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1.6px; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; }
.dl-link:hover { color:var(--metal-4); }
.dl-link:focus-visible { outline:2px solid var(--metal-4); outline-offset:3px; }
.dl-arena[data-phase="setup"] .dl-row { visibility:hidden; }
@media (max-width:520px) {
  .dl-setup { padding:10px 10px 8px; }
  .dl-tile { gap:3px; padding:6px 4px 6px; }
  .dl-tile strong { font-size:13.5px; }
  .dl-tile-note { font-size:10.5px; }
  .dl-metal { grid-template-columns:1fr; justify-items:center; padding:6px 4px 5px; text-align:center; }
  .dl-metal canvas { display:none; }
  .dl-metal .dl-tile-note { grid-column:auto; }
  .dl-metal strong { font-size:13px; }
  .dl-levels,.dl-metals { margin-bottom:8px; }
}

/* how to play: the rest dimmed, the part shown over it, the helper's words in a box with its face */
.dl-scrim { position:absolute; z-index:6; inset:0; background:#191410a8; pointer-events:auto; animation:vh-dim .3s steps(3) both; }
.dl-scrim[hidden] { display:none; }
.dl-arena .dl-lit { z-index:7 !important; }
.dl-arena.touring .dl-lit .dl-name,.dl-arena.touring .dl-lit .dl-bar b,.dl-arena.touring .dl-lit .dl-row-label { color:#f2eadc; }
.dl-arena.touring .dl-lit .dl-row-label { background:var(--plate); }
.dl-arena.touring .dl-hand,.dl-arena.touring .dl-row,.dl-arena.touring .dl-hit { pointer-events:none; }
.dl-tour { position:absolute; z-index:8; left:50%; top:12px; display:flex; align-items:flex-start; gap:12px; width:min(560px,calc(100% - 24px)); padding:12px 14px 12px 10px; background:var(--plate); color:#f2eadc; box-shadow:0 0 0 2px #191410,inset 0 0 0 2px var(--metal-0),0 8px 0 #19141040; transform:translateX(-50%); pointer-events:auto; animation:dl-banner .3s steps(3) both; }
.dl-tour[hidden] { display:none; }
.dl-tour-face { display:block; flex:none; image-rendering:pixelated; }
.dl-tour-body { display:flex; flex:1; flex-direction:column; gap:9px; min-width:0; }
.dl-tour-step { margin:0; font:700 9px/1 ui-monospace,Consolas,monospace; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-3); }
.dl-tour-line { display:grid; margin:0; font:500 13px/1.5 ui-monospace,Consolas,monospace; }
.dl-tour-room,.dl-tour-typed { grid-area:1 / 1; }
.dl-tour-room { visibility:hidden; }
.dl-tour-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1.2px; text-transform:uppercase; color:#d9cfbd; }
.dl-tour-legend[hidden] { display:none; }
.dl-tour-legend span { display:inline-flex; align-items:center; gap:6px; }
.dl-tour-legend .dl-icon { width:14px; height:14px; }
.dl-tour-legend .k-ataque .dl-icon { color:#e0775a; }.dl-tour-legend .k-defesa .dl-icon { color:#c3cbd1; }.dl-tour-legend .k-truque .dl-icon { color:#ecc145; }
.dl-tour-row { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
@media (max-width:520px) {
  .dl-tour { gap:8px; padding:10px 10px 10px 6px; }
  .dl-tour-line { font-size:12px; line-height:1.45; }
}

/* jogo da velha: the slab in the grass (the last game played still on it), and risen over the page, the rest dark */
.laje { position:absolute; z-index:2; padding:0; border:0; background:none; line-height:0; }
.laje[hidden] { display:none; }
.laje.away { visibility:hidden; }
.laje svg,.vh-slab svg { display:block; fill:none; stroke:none; shape-rendering:crispEdges; overflow:visible; }
.laje:hover svg,.laje:focus-visible svg { transform:translateY(-2px); }
.laje:focus-visible { outline:2px solid #3b2f22; outline-offset:4px; }
.lj-shadow { fill:#2c21163d; }.lj-top { fill:var(--marble); }.lj-front { fill:var(--marble-shade); }.lj-lit { fill:color-mix(in srgb,var(--marble) 55%,#fff); }
.lj-groove { fill:var(--marble-line); }.lj-lip { fill:color-mix(in srgb,var(--marble) 60%,#fff); }.lj-x { fill:#3a2b1b; }.lj-o { fill:#a8432c; }.lj-gold { fill:#cc961b; }
.laje-tip { position:absolute; left:50%; bottom:calc(100% + 8px); padding:5px 8px 4px; background:var(--plate); color:#f2eadc; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1px; white-space:nowrap; box-shadow:0 0 0 2px #191410; transform:translateX(-50%); opacity:0; transition:opacity .15s steps(2); pointer-events:none; }
.laje:hover .laje-tip,.laje:focus-visible .laje-tip { opacity:1; }
.vh-stage { --marble:#f2ede2; --marble-shade:#d6c9ab; --marble-line:#9c8a66; position:fixed; z-index:18; inset:0; }
.vh-stage[hidden] { display:none; }
.vh-dim { position:absolute; inset:0; background:#191410d1; animation:vh-dim .3s steps(3) both; }
.vh-stage.closing .vh-dim { animation:vh-undim .38s steps(3) both; }
@keyframes vh-dim { from { opacity:0; } }
@keyframes vh-undim { to { opacity:0; } }
.vh-slab { position:absolute; transform-origin:0 0; }
.vh-slab.won .lj-gold { animation:vh-shine .8s steps(1,end) infinite; }
@keyframes vh-shine { 50% { fill:#fdeeab; } }
.vh-cells { position:absolute; inset:0; }
.vh-cell { position:absolute; padding:0; border:0; background:none; }
.vh-cell.free:hover { background:#2c211614; }
.vh-cell[aria-disabled="true"] { cursor:var(--cursor-arrow,default); }
.vh-cell:focus-visible { outline:2px solid #cc961b; outline-offset:-3px; }
.vh-chips { position:absolute; pointer-events:none; }
.vh-foot { position:absolute; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:9px; padding:0 16px; text-align:center; animation:vh-dim .3s steps(3) .25s both; }
.vh-stage.closing .vh-foot { visibility:hidden; }
.vh-score { margin:0; font:600 12px/1 Cinzel,Georgia,serif; letter-spacing:1.8px; text-transform:uppercase; color:var(--metal-4); }
.vh-score b { font-weight:600; font-size:18px; color:var(--metal-5); }
.vh-hint { margin:0; min-height:1.3em; font:500 12px/1.3 ui-monospace,Consolas,monospace; color:#b5a990; }
.vh-exit { padding:6px 10px; border:0; background:none; color:#b5a990; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; }
.vh-exit:hover { color:var(--metal-5); }
.vh-exit:focus-visible { outline:2px solid var(--metal-4); outline-offset:3px; }

/* the secrets: the effects over the window, the crew that puts things back, the stone over the portrait */
.surpresa-fx { position:fixed; z-index:25; inset:0; width:100%; height:100%; pointer-events:none; }
.surpresa-turma { position:fixed; z-index:26; inset:0; pointer-events:none; }
.surpresa-turma canvas { position:absolute; image-rendering:pixelated; }
.surpresa-pedra { position:absolute; z-index:1; pointer-events:none; }
.surpresa-pedra[hidden] { display:none; }
main.bell { animation:bell-ring .8s steps(1,end); }
@keyframes bell-ring { 10% { transform:translateX(-4px); } 20% { transform:translateX(4px); } 30% { transform:translateX(-3px); } 40% { transform:translateX(3px); } 55% { transform:translateX(-2px); } 70% { transform:translateX(1px); } 85% { transform:none; } }
.caindo { transition:translate .75s cubic-bezier(.55,0,.85,.45),rotate .75s cubic-bezier(.4,0,.7,.4); }
.caindo.voltando { transition:translate .3s steps(4,end),rotate .3s steps(4,end); }
.petala-pega { position:absolute; z-index:3; padding:3px 6px; background:var(--plate); color:var(--metal-5); font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:1px; transform:translate(-50%,-140%); pointer-events:none; animation:petala-up .9s steps(6,end) both; }
@keyframes petala-up { to { transform:translate(-50%,-320%); opacity:0; } }
/* at night the meadow takes the colours of the night: a dark sky with stars, the stone dim, the doors lit */
.contato.noite { --sky-1:#141c29; --sky-2:#1b2635; --sky-3:#243243; --cloud:#334252; --cloud-shade:#2a3746; --mount-1:#28363f; --mount-2:#223038;
  --rock:#57554a; --rock-shade:#434033; --temple:#77756a; --temple-shade:#555246;
  --grass-1:#3a4730; --grass-2:#323f29; --grass-3:#2a3722; --grass-4:#232f1d; --grass-5:#1d2818;
  --ruin:#6a685d; --ruin-shade:#514f43; --ruin-line:#454335; --fl-w:#a3a296; --fl-y:#a3935c; --fl-p:#8a6c67; --path:#5b5748; --path-shade:#4c483b;
  --marble:#86847a; --marble-shade:#69675c; --marble-deep:#535146; --marble-line:#444237; --tile:#6b4e41; --tile-shade:#573f35; --paint:#46565e;
  --door:#f3cf86; --door-shade:#e2b46a; --lamp:#ffe4a6; --lamp-shade:#f3c470; color:#efe8d8; }
.contato.noite .contact-head p { color:#d9d2c0; }
.contato.noite .house-art { filter:drop-shadow(0 0 14px #f3cf8640); }
.estrelas { position:absolute; z-index:1; inset:0 0 50% 0; pointer-events:none; }
.estrelas i { position:absolute; z-index:1; width:2px; height:2px; background:#f7f0dc; animation:estrela 3.2s steps(2,end) var(--d,0s) infinite; }
.estrelas i.grande { width:3px; height:3px; box-shadow:0 0 0 1px #f7f0dc33; }
@keyframes estrela { 50% { opacity:.35; } }

@media (prefers-reduced-motion:reduce) {
  .jw,.md-hud.struck .md-hud-coin,.md-label.in,.papo,.papo-marca,.arena-hits[data-hint] .arena-hit,.tug-big.beat,.dl-pop,.dl-card.flip,.dl-end,.dl-setup,.dl-tour,.dl-vs-out,.dl-vs.up .dl-vs-slot,.dl-scrim,.dl-gap-button::after,.vh-dim,.vh-stage.closing .vh-dim,.vh-foot,.vh-slab.won .lj-gold,.petala-pega,.estrelas i,main.bell { animation:none; }
  .caindo,.caindo.voltando,.dl-bar i,.dl-card,.dl-hand,.dl-vs,.arena .rival,.arena.duelo .rival { transition:none; }
}