/* KOTS Reborn · Metal Strogg. Shared by the React portal (app/) and the static pages.
   Spec: docs/superpowers/specs/2026-09-27-sitio-metal-strogg-design.md
   Fonts: OFL, self-hosted in /ui/fonts (licences beside them). */
@font-face{font-family:'Big Shoulders Display';src:url(/ui/fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/ui/fonts/chakra-petch-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/ui/fonts/chakra-petch-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/ui/fonts/barlow-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/ui/fonts/barlow-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --m-ink:#0c0b09;--m-ink2:#12100d;--m-plate:#1d1b17;--m-plate2:#262320;--m-field:#0f0e0b;
  --m-edge:#3b362d;--m-edge2:#5a513f;
  --m-cream:#efe9dc;--m-text:#dcd4c4;--m-mute:#a79f90;
  /* Placeholders and disabled states only: 3.8:1 on plate, below AA for body text. */
  --m-dim:#7e7667;
  --m-amber:#ffb13b;--m-on-hot:#1b0d02;
  --m-lcd:#ff3b1f;--m-lcd-off:rgba(255,59,31,.1);--m-lcd-gold:#ffc53d;--m-lcd-gold-off:rgba(255,197,61,.12);
  --m-ok:#62ff4a;--m-bad:#ff5a4a;
  --m-r-comun:#b9b3a6;--m-r-poco-comun:#6fd36a;--m-r-raro:#5aa9ff;--m-r-epico:#b07cff;--m-r-legendario:#ffb13b;
  --m-f-title:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --m-f-ui:'Chakra Petch','Arial Narrow',sans-serif;
  --m-f-body:Barlow,Arial,sans-serif;
}

/* Seven-segment digits: the same masks as the arena HUD (scripts/hud-digits.mjs :root).
   tests/client-metal-ui.test.mjs refuses a copy that drifted from the generator. */
:root{--d0:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,37.5V22Q6,22 6,25V34Q6,37.5 0,37.5ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5Z'/%3E%3C/svg%3E");--d1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5Z'/%3E%3C/svg%3E");--d2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,37.5V22Q6,22 6,25V34Q6,37.5 0,37.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,37.5V22Q6,22 6,25V34Q6,37.5 0,37.5ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d7:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5Z'/%3E%3C/svg%3E");--d8:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,37.5V22Q6,22 6,25V34Q6,37.5 0,37.5ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--d9:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M6,0H18Q18,6 15,6H9Q6,6 6,0ZM24,2.5V18Q18,18 18,15V6Q18,2.5 24,2.5ZM24,37.5V22Q18,22 18,25V34Q18,37.5 24,37.5ZM6,40H18Q18,34 15,34H9Q6,34 6,40ZM0,2.5V18Q6,18 6,15V6Q6,2.5 0,2.5ZM7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E");--dcolon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 40'%3E%3Cpath d='M1.5,11h5v5h-5zM1.5,25h5v5h-5z'/%3E%3C/svg%3E");--dslash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 40'%3E%3Cpath d='M10,1h4L4,39H0z'/%3E%3C/svg%3E");--ddash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M7,17.2H17Q19,20 17,22.8H7Q5,20 7,17.2Z'/%3E%3C/svg%3E")}

.m-lcd{--h:40px;display:inline-flex;align-items:flex-end;gap:calc(var(--h) * .1);font-size:0;line-height:0;filter:drop-shadow(0 0 6px rgba(255,59,31,.5))}
.m-lcd i{position:relative;flex:none;width:calc(var(--h) * .6);height:var(--h);font-style:normal;color:transparent}
.m-lcd i::before,.m-lcd i::after{content:"";position:absolute;inset:0;-webkit-mask:center/100% 100% no-repeat;mask:center/100% 100% no-repeat}
.m-lcd i::before{background:var(--m-lcd-off);-webkit-mask-image:var(--d8);mask-image:var(--d8)}
.m-lcd i::after{background:var(--m-lcd)}
.m-lcd.gold{filter:drop-shadow(0 0 7px rgba(255,197,61,.55))}
.m-lcd.gold i::before{background:var(--m-lcd-gold-off)}
.m-lcd.gold i::after{background:var(--m-lcd-gold)}
.m-lcd i[data-d="0"]::after{-webkit-mask-image:var(--d0);mask-image:var(--d0)}
.m-lcd i[data-d="1"]::after{-webkit-mask-image:var(--d1);mask-image:var(--d1)}
.m-lcd i[data-d="2"]::after{-webkit-mask-image:var(--d2);mask-image:var(--d2)}
.m-lcd i[data-d="3"]::after{-webkit-mask-image:var(--d3);mask-image:var(--d3)}
.m-lcd i[data-d="4"]::after{-webkit-mask-image:var(--d4);mask-image:var(--d4)}
.m-lcd i[data-d="5"]::after{-webkit-mask-image:var(--d5);mask-image:var(--d5)}
.m-lcd i[data-d="6"]::after{-webkit-mask-image:var(--d6);mask-image:var(--d6)}
.m-lcd i[data-d="7"]::after{-webkit-mask-image:var(--d7);mask-image:var(--d7)}
.m-lcd i[data-d="8"]::after{-webkit-mask-image:var(--d8);mask-image:var(--d8)}
.m-lcd i[data-d="9"]::after{-webkit-mask-image:var(--d9);mask-image:var(--d9)}
.m-lcd i[data-d="/"]{width:calc(var(--h) * .35)}
.m-lcd i[data-d="/"]::before{display:none}
.m-lcd i[data-d="/"]::after{background:var(--m-mute);-webkit-mask-image:var(--dslash);mask-image:var(--dslash)}
.m-lcd i[data-d=" "]::after{display:none}
.m-lcdbox{display:grid;gap:6px;align-content:start;padding:10px 14px 12px;background:#0a0807;border:1px solid #3a342a;box-shadow:inset 0 0 18px rgba(0,0,0,.9)}

/* Materials — drawn in CSS and SVG, no game art. */
.m-plate{position:relative;background:
 radial-gradient(circle at 12px 12px,#8d8474 0 2px,#15130f 2.6px,transparent 3.6px),
 radial-gradient(circle at calc(100% - 12px) 12px,#8d8474 0 2px,#15130f 2.6px,transparent 3.6px),
 radial-gradient(circle at 12px calc(100% - 12px),#8d8474 0 2px,#15130f 2.6px,transparent 3.6px),
 radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8d8474 0 2px,#15130f 2.6px,transparent 3.6px),
 linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.26)),var(--m-plate);
 border:1px solid var(--m-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 36px rgba(0,0,0,.5)}
.m-hazard{height:8px;background:repeating-linear-gradient(-45deg,#e8a322 0 14px,#16140f 14px 28px)}

/* Type */
.m-kicker{margin:0;font:600 13px/1.4 var(--m-f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--m-amber)}
.m-label{font:600 11px/1.3 var(--m-f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--m-mute)}
.m-metal{background:linear-gradient(180deg,#fbf7ee 0%,#d8d0bf 44%,#7c7263 50%,#bfb4a0 66%,#5e5547 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #050403) drop-shadow(0 12px 20px rgba(0,0,0,.65))}
.m-molten{background:linear-gradient(180deg,#fff0b8 0%,#ffbe45 38%,#f06418 72%,#8f1f08 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #1c0602) drop-shadow(0 0 22px rgba(255,110,20,.45))}
.m-hint{margin:0;font:500 13px/1.45 var(--m-f-body);color:var(--m-mute)}
.m-error{min-height:20px;margin:12px 0 0;color:#ffb4a4;font:600 14px/1.45 var(--m-f-body)}
.m-error:empty{min-height:0;margin:0}

/* Buttons. clip-path would clip an outline, so focus is drawn inside. */
.m-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:700 15px/1 var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:14px 22px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .15s,box-shadow .15s}
.m-btn:disabled{cursor:not-allowed;filter:grayscale(.7) brightness(.7)}
.m-btn-hot{color:var(--m-on-hot);background:linear-gradient(180deg,#ffd07a 0%,#ffa02f 48%,#d8661a 100%);box-shadow:inset 0 0 0 1px #ffcf85}
.m-btn-hot:not(:disabled):hover{filter:brightness(1.08) drop-shadow(0 0 16px rgba(255,140,40,.45))}
.m-btn-hot:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--m-on-hot),inset 0 0 0 5px #ffe7b5}
.m-btn-ghost{color:var(--m-cream);background:#1a1814;box-shadow:inset 0 0 0 1px #6b604c}
.m-btn-ghost:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--m-amber)}
.m-btn-ghost:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--m-amber)}
.m-btn-big{font-size:22px;padding:20px 34px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.m-btn-sm{font-size:12px;padding:9px 12px;gap:8px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.m-btn-sm svg{width:15px;height:15px}
.m-link{appearance:none;background:none;border:0;border-bottom:2px solid var(--m-amber);padding:0 0 3px;cursor:pointer;font:600 15px var(--m-f-ui);letter-spacing:.08em;color:var(--m-cream);text-decoration:none}
.m-link:focus-visible,.m-text-button:focus-visible{outline:2px solid var(--m-amber);outline-offset:4px}
.m-text-button{appearance:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--m-amber);text-decoration:underline;text-underline-offset:3px}

/* Tabs, fields, tags */
.m-tabs{display:flex;gap:4px;border-bottom:1px solid var(--m-edge)}
.m-tabs button{appearance:none;border:0;background:none;cursor:pointer;font:600 14px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;color:var(--m-mute)}
.m-tabs button[aria-pressed=true]{color:var(--m-cream);background:linear-gradient(180deg,#2c2822,#1d1b17);box-shadow:inset 0 3px 0 var(--m-amber)}
.m-tabs button:focus-visible{outline:2px solid var(--m-amber);outline-offset:-2px}
.m-field{display:grid;gap:8px}
.m-field label{font:600 12px var(--m-f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--m-mute)}
.m-field input,.m-field select,.m-field textarea{min-height:52px;width:100%;background:var(--m-field);border:1px solid #4a4336;border-radius:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);padding:0 16px;font:500 17px var(--m-f-body);color:var(--m-cream)}
.m-field input::placeholder{color:var(--m-dim)}
.m-field input:focus-visible{outline:none;border-color:var(--m-amber);box-shadow:0 0 0 3px rgba(255,177,59,.2),inset 0 2px 8px rgba(0,0,0,.6)}
.m-field input:user-invalid{border-color:var(--m-bad)}
.m-tag{display:inline-block;font:700 11px/1.4 var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;padding:1px 7px;border:1px solid currentColor}
.m-rarity{font:700 11px var(--m-f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--m-rc,var(--m-r-comun))}
[data-rareza=comun]{--m-rc:var(--m-r-comun)}
[data-rareza=poco-comun]{--m-rc:var(--m-r-poco-comun)}
[data-rareza=raro]{--m-rc:var(--m-r-raro)}
[data-rareza=epico]{--m-rc:var(--m-r-epico)}
[data-rareza=legendario]{--m-rc:var(--m-r-legendario)}

/* Live indicator */
@keyframes m-pulse{50%{opacity:.45}}
.m-live-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--m-ok);box-shadow:0 0 10px var(--m-ok);animation:m-pulse 2s ease-in-out infinite}
.m-live-dot.off{background:var(--m-dim);box-shadow:none;animation:none}

/* Side drawer (entry panel) */
.m-drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(560px,100vw);max-width:100vw;padding:34px 44px 28px 52px;border:0;border-left:1px solid var(--m-edge2);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.3)),#1a1814;color:var(--m-cream);overflow-y:auto;box-shadow:-30px 0 60px rgba(0,0,0,.6)}
.m-drawer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:repeating-linear-gradient(-45deg,#e8a322 0 12px,#16140f 12px 24px)}
.m-drawer::backdrop{background:rgba(6,5,4,.72);backdrop-filter:blur(2px)}
.m-drawer[open]{animation:m-drawer-in .22s ease-out}
@keyframes m-drawer-in{from{transform:translateX(40px);opacity:0}}
.m-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.m-drawer-close{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--m-mute);font:600 13px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase}
.m-drawer-close:focus-visible{outline:2px solid var(--m-amber);outline-offset:4px}
.m-drawer-title{margin:18px 0 0;font:900 clamp(44px,5vw,64px)/.9 var(--m-f-title);text-transform:uppercase}
.m-drawer-lead{margin:10px 0 0;color:var(--m-text);font:500 17px/1.45 var(--m-f-body)}
.m-drawer-submit{width:100%;margin-top:22px}
.m-drawer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.m-drawer-foot{margin-top:26px;padding-top:16px;border-top:1px dashed #4a4336;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font:600 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m-mute)}
.m-drawer .security-trigger{margin:0;padding:0 0 3px;border:0;border-bottom:1px solid var(--m-amber);background:none;color:var(--m-cream);font:600 13px var(--m-f-ui);letter-spacing:.08em}

/* Header and footer */
.m-header{display:flex;align-items:center;gap:clamp(16px,3vw,38px);min-height:66px;padding:0 clamp(16px,4vw,56px);background:linear-gradient(180deg,#24211c,#15130f);border-bottom:1px solid #3d372d;color:var(--m-cream)}
.m-logo{display:inline-flex;align-items:center;gap:12px;font:900 34px/1 var(--m-f-title);letter-spacing:.04em;color:var(--m-cream);text-decoration:none;white-space:nowrap}
.m-logo small{font:700 13px var(--m-f-ui);letter-spacing:.42em;color:var(--m-mute)}
.m-logo-mark{position:relative;flex:none;width:26px;height:26px;border:3px solid var(--m-amber);border-radius:50%}
.m-logo-mark::before,.m-logo-mark::after{content:"";position:absolute;background:var(--m-amber)}
.m-logo-mark::before{left:50%;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px}
.m-logo-mark::after{top:50%;left:-6px;right:-6px;height:3px;margin-top:-1.5px}
.m-nav{display:flex;gap:clamp(14px,2vw,30px)}
.m-nav-item{appearance:none;border:0;background:none;padding:6px 0;cursor:pointer;white-space:nowrap;color:#cfc6b5;font:600 14px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.m-nav-item[aria-current=page]{color:var(--m-amber);box-shadow:0 3px 0 var(--m-amber)}
.m-nav-item:hover{color:var(--m-cream)}
.m-nav-item:focus-visible{outline:2px solid var(--m-amber);outline-offset:4px}
.m-header-live{margin:0 0 0 auto;display:flex;align-items:center;gap:10px;white-space:nowrap;font:600 13px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;color:#d8cfbd}
.m-header-account{padding:11px 18px;font-size:13px}
.m-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:16px clamp(16px,4vw,56px);border-top:1px solid #2d2922;background:var(--m-ink);color:var(--m-mute);font:600 12px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase}
.m-footer b{color:var(--m-amber);margin:0 8px}
.m-footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.m-footer-nav a{color:var(--m-cream);text-decoration:none;border-bottom:1px solid var(--m-edge2)}
/* During a match the footer link is an overlay button: same look as the link it replaces. */
.m-footer-nav .m-link{padding:0;border-bottom:1px solid var(--m-edge2);font:600 12px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase}
.m-footer .bug-trigger{position:static;min-height:0;padding:0;border:0;border-bottom:1px solid var(--m-edge2);background:none;box-shadow:none;color:var(--m-cream);font:600 12px var(--m-f-ui);letter-spacing:.16em;text-transform:uppercase}
.m-footer .bug-trigger span{margin-right:6px;font:700 11px/1.4 var(--m-f-ui);letter-spacing:.16em;color:var(--m-amber)}
/* The bug-report (footer) and account-security (drawer foot) dialogs: community.css still
   styles .community-dialog in the old olive palette and Arial, and is also loaded by the
   in-game page, so it is left untouched. Every rule here is scoped under the two DOM parents
   instead, matched by equal or higher specificity so it wins, giving both dialogs the plate
   and amber language of the entry drawer. They would otherwise inherit the footer/drawer-foot
   upper-case tracked labels too (inputs included, through letter-spacing:inherit), hence the
   resets on every text element below. */
.m-footer .community-dialog,.m-drawer-foot .community-dialog{position:fixed;inset:0;margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;box-sizing:border-box;padding:28px 32px 30px;border:1px solid var(--m-edge2);border-radius:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.3)),var(--m-plate);color:var(--m-cream);box-shadow:0 24px 60px rgba(0,0,0,.6);text-transform:none;letter-spacing:normal;font:500 15px/1.55 var(--m-f-body)}
.m-footer .community-dialog::backdrop,.m-drawer-foot .community-dialog::backdrop{background:rgba(6,5,4,.72);backdrop-filter:blur(2px)}
.m-footer .community-dialog[open],.m-drawer-foot .community-dialog[open]{animation:m-dialog-in .18s ease-out}
@keyframes m-dialog-in{from{transform:translateY(14px);opacity:0}}
.m-footer .community-dialog-bar,.m-drawer-foot .community-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--m-edge)}
.m-footer .community-dialog-bar span,.m-drawer-foot .community-dialog-bar span{font:700 11px var(--m-f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--m-amber)}
.m-footer .community-dialog-bar button,.m-drawer-foot .community-dialog-bar button{appearance:none;cursor:pointer;border:0;background:#1a1814;box-shadow:inset 0 0 0 1px #6b604c;color:var(--m-cream);font:700 12px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;min-height:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:box-shadow .15s}
.m-footer .community-dialog-bar button:not(:disabled):hover,.m-drawer-foot .community-dialog-bar button:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--m-amber)}
.m-footer .community-dialog-bar button:focus-visible,.m-drawer-foot .community-dialog-bar button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--m-amber)}
.m-footer .community-dialog-bar button:disabled,.m-drawer-foot .community-dialog-bar button:disabled{cursor:not-allowed;filter:grayscale(.7) brightness(.7)}
.m-footer .community-dialog h2,.m-drawer-foot .community-dialog h2{margin:20px 0 10px;font:900 clamp(26px,4vw,34px)/1.05 var(--m-f-title);letter-spacing:normal;text-transform:none;color:var(--m-cream)}
.m-footer .community-dialog p,.m-drawer-foot .community-dialog p{margin:0;color:var(--m-text);font:500 15px/1.55 var(--m-f-body);text-transform:none;letter-spacing:normal}
.m-footer .community-dialog fieldset,.m-drawer-foot .community-dialog fieldset{margin:0;padding:0;border:0;min-width:0}
.m-footer .community-dialog label,.m-drawer-foot .community-dialog label{display:grid;gap:8px;margin:18px 0 0;font:600 12px var(--m-f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--m-mute)}
.m-footer .community-dialog :is(input,select,textarea),.m-drawer-foot .community-dialog :is(input,select,textarea){box-sizing:border-box;width:100%;min-height:48px;background:var(--m-field);border:1px solid #4a4336;border-radius:0;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);padding:10px 14px;font:500 16px var(--m-f-body);letter-spacing:normal;text-transform:none;color:var(--m-cream)}
.m-footer .community-dialog textarea,.m-drawer-foot .community-dialog textarea{resize:vertical}
.m-footer .community-dialog :is(input,textarea)::placeholder,.m-drawer-foot .community-dialog :is(input,textarea)::placeholder{color:var(--m-dim)}
.m-footer .community-dialog :is(input,select,textarea):focus-visible,.m-drawer-foot .community-dialog :is(input,select,textarea):focus-visible{outline:none;border-color:var(--m-amber);box-shadow:0 0 0 3px rgba(255,177,59,.2),inset 0 2px 8px rgba(0,0,0,.6)}
.m-footer .community-dialog :is(input,textarea):user-invalid,.m-drawer-foot .community-dialog :is(input,textarea):user-invalid{border-color:var(--m-bad)}
.m-footer .community-dialog .hint,.m-drawer-foot .community-dialog .hint{margin:14px 0 0;font:500 13px/1.5 var(--m-f-body);color:var(--m-mute);text-transform:none;letter-spacing:normal}
.m-footer .community-dialog .community-primary,.m-drawer-foot .community-dialog .community-primary{appearance:none;border:0;cursor:pointer;width:100%;min-height:0;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:700 14px var(--m-f-ui);letter-spacing:.14em;text-transform:uppercase;padding:14px 20px;color:var(--m-on-hot);background:linear-gradient(180deg,#ffd07a 0%,#ffa02f 48%,#d8661a 100%);box-shadow:inset 0 0 0 1px #ffcf85;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .15s,box-shadow .15s}
.m-footer .community-dialog .community-primary:not(:disabled):hover,.m-drawer-foot .community-dialog .community-primary:not(:disabled):hover{filter:brightness(1.08) drop-shadow(0 0 16px rgba(255,140,40,.45))}
.m-footer .community-dialog .community-primary:focus-visible,.m-drawer-foot .community-dialog .community-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--m-on-hot),inset 0 0 0 5px #ffe7b5}
.m-footer .community-dialog .community-primary:disabled,.m-drawer-foot .community-dialog .community-primary:disabled{cursor:not-allowed;filter:grayscale(.7) brightness(.7)}
.m-footer .community-dialog .community-result,.m-drawer-foot .community-dialog .community-result{display:block;margin-top:14px;min-height:20px;font:600 14px/1.5 var(--m-f-body);color:var(--m-text);text-transform:none;letter-spacing:normal}
@media (max-width:900px){.m-header{flex-wrap:wrap;row-gap:4px;padding-top:10px;padding-bottom:6px}.m-nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}.m-header-live{font-size:11px}}
@media (max-width:650px){.m-logo{font-size:26px}.m-logo small{display:none}.m-header-account{padding:9px 12px}.m-footer{flex-direction:column;align-items:flex-start}}
/* Phones: a signed-in name must not push the account button onto a row of its own; the live
   line yields its width first, and very long names end in an ellipsis. */
@media (max-width:650px){.m-header{column-gap:12px}.m-header-live{display:block;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;letter-spacing:.08em}.m-header-live .m-live-dot{margin-right:7px}.m-header-account{display:block;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Device: the game needs a keyboard and a mouse. A touch-first device with a mouse or trackpad
   attached (any fine pointer) keeps the desktop layout, so it can still enter. */
.m-touch-only{display:none}
@media (hover:none) and (pointer:coarse) and (not (any-pointer:fine)){.m-desktop-only{display:none!important}.m-touch-only{display:block}}

/* Motion yields to the system setting on every site page. The game page (html[data-game]) is left
   out: this rule would reach the arena HUD's own animations, and the game's menus carry a rule
   limited to their dialogs (public/engine/menus.css). */
@media (prefers-reduced-motion:reduce){:root:not([data-game]),:root:not([data-game]) *,:root:not([data-game]) *::before,:root:not([data-game]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Weapon tags: one colour per respawn weapon, keyed by the lower-cased names of
   public/engine/scoreboard-content.mjs (weaponKey in public/ranking/model.mjs). */
:root{--m-w-sabre:#ff7ad9;--m-w-escopeta:#d8b48a;--m-w-superescopeta:#f0c27a;--m-w-ametralladora:#c9d27a;--m-w-chaingun:#e7d35a;--m-w-granadas:#9ed36a;--m-w-lanzagranadas:#7fd88f;--m-w-lanzacohetes:#ff8a3b;--m-w-hyperblaster:#7fb8ff;--m-w-railgun:#6fd3ff;--m-w-bfg:#8dff6a;--m-w-antiweapon:#c7a4ff}
.m-tag[data-arma]{color:var(--m-wc,var(--m-text))}
[data-arma=sabre]{--m-wc:var(--m-w-sabre)}
[data-arma=escopeta]{--m-wc:var(--m-w-escopeta)}
[data-arma=superescopeta]{--m-wc:var(--m-w-superescopeta)}
[data-arma=ametralladora]{--m-wc:var(--m-w-ametralladora)}
[data-arma=chaingun]{--m-wc:var(--m-w-chaingun)}
[data-arma=granadas]{--m-wc:var(--m-w-granadas)}
[data-arma=lanzagranadas]{--m-wc:var(--m-w-lanzagranadas)}
[data-arma=lanzacohetes]{--m-wc:var(--m-w-lanzacohetes)}
[data-arma=hyperblaster]{--m-wc:var(--m-w-hyperblaster)}
[data-arma=railgun]{--m-wc:var(--m-w-railgun)}
[data-arma=bfg]{--m-wc:var(--m-w-bfg)}
[data-arma=antiweapon]{--m-wc:var(--m-w-antiweapon)}

/* Embedded pages (inside the game or the home overlay): no site chrome. Each page's head sets
   html[data-embedded] before the first paint. */
html[data-embedded] :is(.m-header,.m-site-hazard,.m-footer){display:none!important}