/*
 * CONCURSEIRO RPG — linguagem visual global de jogo
 *
 * Esta folha e carregada por ultimo nos quatro shells. Ela transforma os
 * componentes funcionais existentes em pecas de uma interface de RPG civico,
 * mantendo texto, estados, foco e areas de toque como HTML/CSS reais.
 * Manifesto: assets/img/game-ui/banners/banner-civic-v1.jpg,
 * assets/img/game-ui/banners/banner-careers-v1.jpg,
 * assets/img/game-ui/banners/banner-study-v1.jpg e
 * assets/img/game-ui/banners/banner-challenge-v1.jpg.
 * NPCs: assets/img/game-ui/npcs/npc-auditoria-fiscal-v1.jpg e
 * assets/img/game-ui/npcs/npc-legislativo-v1.jpg.
 * Carreiras: assets/img/game-ui/carreiras/carreira-juridica-v1.jpg e
 * assets/img/game-ui/carreiras/carreira-fiscal-controle-v1.jpg.
 * Orgaos: assets/img/game-ui/orgaos/orgao-palacio-justica-v1.jpg e
 * assets/img/game-ui/orgaos/orgao-complexo-seguranca-v1.jpg.
 */

:root {
  --game-midnight: #14050e;
  --game-abyss: #210917;
  --game-panel: rgba(30,8,21, .94);
  --game-panel-soft: rgba(46,13,32, .9);
  --game-gold: #e77262;
  --game-gold-bright: #ffaba0;
  --game-cyan: #e959ad;
  --game-violet: #a773ff;
  --game-ember: #ee7854;
  --game-ink: #f7edd2;
  --game-muted: #cdafc1;
  --game-line: rgba(221,104,89, .46);
  --game-focus: #fc7cc7;
  --game-hero-art: url('../img/game-ui/banners/banner-civic-v1.jpg');
  --game-npc-audit: url('../img/game-ui/npcs/npc-auditoria-fiscal-v1.jpg');
  --game-npc-legislative: url('../img/game-ui/npcs/npc-legislativo-v1.jpg');
  --game-career-law: url('../img/game-ui/carreiras/carreira-juridica-v1.jpg');
  --game-career-audit: url('../img/game-ui/carreiras/carreira-fiscal-controle-v1.jpg');
  --game-organ-justice: url('../img/game-ui/orgaos/orgao-palacio-justica-v1.jpg');
  --game-organ-security: url('../img/game-ui/orgaos/orgao-complexo-seguranca-v1.jpg');
}

[data-game-context="civic"] {
  --game-hero-art: url('../img/game-ui/banners/banner-civic-v1.jpg');
  --game-accent: #e26d5d;
  --game-accent-rgb: 226, 182, 93;
}

[data-game-context="careers"] {
  --game-hero-art: url('../img/game-ui/banners/banner-careers-v1.jpg');
  --game-accent: #ee9dcc;
  --game-accent-rgb: 155, 223, 240;
}

[data-game-context="study"] {
  --game-hero-art: url('../img/game-ui/banners/banner-study-v1.jpg');
  --game-accent: #fc84ca;
  --game-accent-rgb: 169, 129, 255;
}

[data-game-context="challenge"] {
  --game-hero-art: url('../img/game-ui/banners/banner-challenge-v1.jpg');
  --game-accent: #ee805d;
  --game-accent-rgb: 238, 128, 93;
}

[data-game-route] {
  --game-route-glow: rgba(var(--game-accent-rgb, 226, 182, 93), .22);
}

body.game-ui {
  color: var(--game-ink);
  background-color: var(--game-midnight);
  background-image:
    radial-gradient(circle at 12% -10%, var(--game-route-glow), transparent 32rem),
    radial-gradient(circle at 91% 12%, rgba(222,72,160, .09), transparent 29rem),
    linear-gradient(180deg, rgba(23,5,15, .88), rgba(16,3,11, .98));
  background-attachment: fixed;
}

body.game-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(90deg, transparent 49.7%, rgba(231,114,98, .08) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(233,89,173, .045) 50%, transparent 50.3%);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000, transparent 74%);
  mask-image: radial-gradient(circle at 50% 18%, #000, transparent 74%);
}

body.game-ui h1,
body.game-ui h2,
body.game-ui h3,
body.game-ui .card-heading strong,
body.game-ui .panel-ribbon strong {
  font-family: "Cinzel", "Times New Roman", serif;
  letter-spacing: .035em;
}

body.game-ui .eyebrow,
body.game-ui small,
body.game-ui .badge,
body.game-ui .status-pill,
body.game-ui .main-nav__item strong,
body.game-ui .game-button {
  font-family: "Oswald", "Arial Narrow", sans-serif;
}

/* ---------------------------------------------------------- banners */

.game-banner,
.page-header {
  position: relative;
  isolation: isolate;
  min-height: 176px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 42px);
  color: var(--game-ink);
  border: 1px solid var(--game-line);
  border-radius: 0;
  clip-path: polygon(0 18px, 18px 0, calc(100% - 66px) 0, calc(100% - 52px) 12px, 100% 12px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 60px 100%, 45px calc(100% - 13px), 0 calc(100% - 13px));
  background:
    linear-gradient(90deg, rgba(18,3,12, .97) 0%, rgba(26,6,18, .86) 42%, rgba(22,5,15, .36) 100%),
    linear-gradient(180deg, transparent 58%, rgba(16,3,11, .9)),
    var(--game-hero-art) center 42% / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,191,182, .08),
    inset 0 -34px 70px rgba(12,1,7, .65),
    0 17px 34px rgba(0, 0, 0, .34),
    0 0 25px var(--game-route-glow);
}

/* Vence os fundos historicos mais especificos de `.theme-city`. */
body.game-ui.theme-city .page-header,
body.game-ui .game-banner {
  background:
    linear-gradient(90deg, rgba(18,3,12, .97) 0%, rgba(26,6,18, .86) 42%, rgba(22,5,15, .36) 100%),
    linear-gradient(180deg, transparent 58%, rgba(16,3,11, .9)),
    var(--game-hero-art) center 42% / cover no-repeat;
}

.game-banner::before,
.page-header::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(var(--game-accent-rgb, 226, 182, 93), .25);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 54px) 0, calc(100% - 41px) 10px, 100% 10px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 48px 100%, 35px calc(100% - 10px), 0 calc(100% - 10px));
}

.game-banner::after,
.page-header::after {
  content: "◆";
  position: absolute;
  top: 16px;
  right: 22px;
  z-index: 1;
  color: var(--game-accent, var(--game-gold));
  font-size: 15px;
  text-shadow: -24px 10px 0 rgba(var(--game-accent-rgb, 226, 182, 93), .38);
}

.game-hero-banner {
  background-image:
    linear-gradient(90deg, rgba(18,3,12, .97), rgba(23,4,15, .4)),
    var(--game-hero-art);
}

body.game-ui .page-header__title {
  position: relative;
  z-index: 2;
  max-width: min(740px, 78%);
  align-items: flex-start;
}

body.game-ui .page-header__title h1 {
  color: var(--game-gold-bright);
  font-size: clamp(28px, 3.3vw, 48px);
  line-height: 1.04;
  text-shadow: 0 3px 0 #24170a, 0 0 18px var(--game-route-glow);
}

body.game-ui .page-header__title p {
  color: #e0e8e8;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  text-shadow: 0 2px 4px #0c0208;
}

/* ------------------------------------------------------------ nav */

.game-nav-silhouette {
  position: relative;
  isolation: isolate;
}

.game-nav-silhouette::before,
.game-nav-silhouette::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.game-nav-silhouette::before {
  inset: 1px 8px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--game-gold), var(--game-cyan), var(--game-gold), transparent);
  box-shadow: 0 0 12px var(--game-route-glow);
}

.game-nav-silhouette::after {
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--game-gold);
  background: #210a17;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(231,114,98, .6);
}

.game-nav-silhouette .main-nav__item,
.game-nav-silhouette > a,
.game-nav-silhouette > button {
  position: relative;
  min-width: 92px;
  min-height: 72px;
  padding: 10px 14px 9px;
  overflow: visible;
  color: var(--game-muted);
  border: 1px solid rgba(210,159,189, .26);
  border-radius: 0;
  clip-path: polygon(0 13px, 13px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 18px 100%, 0 calc(100% - 18px));
  background:
    linear-gradient(160deg, rgba(72,25,52, .84), rgba(26,6,18, .96) 62%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, .02) 12px 13px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), inset 0 -12px 20px rgba(0, 0, 0, .28);
  transition: transform .18s ease, color .18s ease, filter .18s ease, box-shadow .18s ease;
}

.game-nav-silhouette .main-nav__item::before,
.game-nav-silhouette > a::before,
.game-nav-silhouette > button::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(var(--nav-rgb, 231, 189, 98), .14);
  clip-path: inherit;
}

.game-nav-silhouette .main-nav__item strong {
  display: block;
  max-width: 100%;
  color: currentColor;
  font-size: clamp(12px, .84vw, 14px);
  line-height: 1.12;
  letter-spacing: .055em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.game-nav-silhouette .main-nav__crest {
  display: grid;
  place-items: center;
  width: 47px;
  height: 43px;
  margin: 0 auto 4px;
  color: var(--game-accent, var(--game-gold));
  clip-path: polygon(50% 0, 92% 18%, 100% 68%, 74% 100%, 26% 100%, 0 68%, 8% 18%);
  background: linear-gradient(180deg, rgba(var(--nav-rgb, 231, 189, 98), .2), rgba(23,4,15, .9));
  box-shadow: inset 0 0 0 1px rgba(var(--nav-rgb, 231, 189, 98), .35);
}

.game-nav-silhouette .main-nav__item:hover,
.game-nav-silhouette > a:hover,
.game-nav-silhouette > button:hover {
  z-index: 3;
  color: #fff4d0;
  filter: brightness(1.15) saturate(1.12);
  transform: translateY(-4px);
  box-shadow: inset 0 0 18px rgba(var(--nav-rgb, 231, 189, 98), .2), 0 8px 22px rgba(0, 0, 0, .42), 0 0 16px rgba(var(--nav-rgb, 231, 189, 98), .22);
}

.game-nav-silhouette .main-nav__item:focus-visible,
.game-nav-silhouette > a:focus-visible,
.game-nav-silhouette > button:focus-visible {
  z-index: 4;
  outline: 3px solid var(--game-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(233,89,173, .2), 0 0 22px rgba(233,89,173, .58);
}

.game-nav-silhouette .main-nav__item:active,
.game-nav-silhouette > a:active,
.game-nav-silhouette > button:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.9);
}

.game-nav-silhouette .main-nav__item.is-active,
.game-nav-silhouette .main-nav__item[aria-current="page"],
.game-nav-silhouette > a[aria-selected="true"] {
  color: #fff0be;
  border-color: rgba(var(--nav-rgb, 231, 189, 98), .72);
  background: linear-gradient(155deg, rgba(var(--nav-rgb, 231, 189, 98), .34), rgba(41,13,29, .96) 64%);
  box-shadow: inset 0 0 20px rgba(var(--nav-rgb, 231, 189, 98), .18), 0 0 18px rgba(var(--nav-rgb, 231, 189, 98), .28);
}

.game-nav-silhouette .main-nav__item.is-active::after,
.game-nav-silhouette .main-nav__item[aria-current="page"]::after {
  content: "◆";
  position: absolute;
  left: 50%;
  bottom: -7px;
  color: rgb(var(--nav-rgb, 231, 189, 98));
  font-size: 11.5px;
  transform: translateX(-50%);
  text-shadow: 0 0 9px currentColor;
}

.game-nav-silhouette .main-nav__item:disabled,
.game-nav-silhouette .main-nav__item[disabled],
.game-nav-silhouette .main-nav__item.is-disabled,
.game-nav-silhouette .main-nav__item[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .42;
  filter: grayscale(.75);
}

/* ---------------------------------------------------------- shapes */

body.game-ui .game-button {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  border-color: rgba(231,114,98, .62);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 22px) 0, 100% 18px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 18px 100%, 0 calc(100% - 16px));
  background: linear-gradient(180deg, #541a3c, #2f0c20 58%, #200816);
  color: var(--game-ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -5px 0 rgba(0, 0, 0, .28), 0 5px 0 #11030b, 0 10px 20px rgba(0, 0, 0, .26);
  transition: transform .14s ease, filter .18s ease, box-shadow .18s ease;
}

.game-shape--crest {
  min-width: 44px;
  min-height: 44px;
  clip-path: polygon(50% 0, 92% 12%, 100% 58%, 78% 91%, 50% 100%, 22% 91%, 0 58%, 8% 12%);
}

.game-shape--rune {
  min-width: 44px;
  min-height: 44px;
  clip-path: polygon(14% 0, 78% 0, 100% 26%, 88% 100%, 22% 100%, 0 72%, 6% 24%);
}

.game-shape--ticket {
  min-width: 44px;
  min-height: 44px;
  clip-path: polygon(0 12px, 12px 0, calc(100% - 26px) 0, 100% 20px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 24px 100%, 0 calc(100% - 20px));
}

.game-button:hover,
.game-shape--crest:hover,
.game-shape--rune:hover,
.game-shape--ticket:hover {
  filter: brightness(1.16) saturate(1.1);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -4px 0 rgba(0, 0, 0, .24), 0 7px 0 #11030b, 0 13px 25px var(--game-route-glow);
}

.game-button:focus-visible,
.game-shape--crest:focus-visible,
.game-shape--rune:focus-visible,
.game-shape--ticket:focus-visible {
  outline: 3px solid var(--game-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(233,89,173, .18), 0 0 24px rgba(233,89,173, .55);
}

.game-button:active,
.game-shape--crest:active,
.game-shape--rune:active,
.game-shape--ticket:active {
  transform: translateY(3px);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .58), 0 2px 0 #11030b;
}

.game-button.is-active,
.game-button[aria-current="page"],
.game-shape--rune[aria-selected="true"] {
  color: #240804;
  border-color: #ffafa4;
  background: linear-gradient(180deg, #ffa79b, #c94635 62%, #851f12);
}

.game-button:disabled,
.game-button[disabled],
.game-button.is-disabled,
.game-button[aria-disabled="true"],
.game-shape--ticket[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .42;
  filter: grayscale(.8) brightness(.75);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

body.game-ui .game-button--gold {
  color: #230804;
  border-color: #ffbfb6;
  background: linear-gradient(180deg, #ffada2 0%, #d55443 46%, #8f2416 100%);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .34);
}

body.game-ui .game-button--purple {
  border-color: #d7b9ff;
  background: linear-gradient(180deg, #8e58d3, #542986 55%, #26133f);
  clip-path: polygon(8% 0, 92% 0, 100% 24%, 94% 100%, 18% 100%, 0 72%, 5% 22%);
}

body.game-ui .game-button--ghost {
  color: #ead3e0;
  border-color: rgba(219,126,180, .38);
  background: linear-gradient(180deg, rgba(61,18,43, .76), rgba(24,4,16, .82));
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 8px));
}

/* ---------------------------------------------------------- cards */

.game-card,
.game-panel {
  position: relative;
  min-width: 0;
  color: var(--game-ink);
  border: 1px solid rgba(218,105,90, .38);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(61,20,44, .94), rgba(27,6,18, .97) 52%, rgba(37,12,27, .96)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255, 255, 255, .015) 13px 14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), inset 0 18px 40px rgba(174,79,134, .04), 0 13px 28px rgba(0, 0, 0, .3);
}

.game-card {
  overflow: hidden;
  clip-path: polygon(0 18px, 18px 0, calc(100% - 43px) 0, calc(100% - 30px) 13px, 100% 13px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 36px 100%, 24px calc(100% - 11px), 0 calc(100% - 11px));
}

.game-card::before,
.game-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.game-card::before {
  inset: 7px;
  border: 1px solid rgba(var(--game-accent-rgb, 226, 182, 93), .2);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 35px) 0, calc(100% - 25px) 10px, 100% 10px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 29px 100%, 19px calc(100% - 8px), 0 calc(100% - 8px));
}

.game-card::after {
  top: 13px;
  right: 16px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--game-accent, var(--game-gold));
  background: #210a17;
  transform: rotate(45deg);
  box-shadow: -13px 13px 0 -2px rgba(var(--game-accent-rgb, 226, 182, 93), .52);
}

body.game-ui .card-heading,
body.game-ui .panel-ribbon {
  position: relative;
  min-height: 48px;
  margin: 0 0 14px;
  padding: 11px 40px 11px 18px;
  border: 0;
  border-bottom: 1px solid rgba(231,114,98, .38);
  clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 21px 100%, 0 calc(100% - 14px));
  background: linear-gradient(90deg, rgba(182,56,39, .24), rgba(67,23,49, .65) 38%, rgba(27,6,18, .18));
}

body.game-ui .card-heading::before,
body.game-ui .panel-ribbon::before {
  content: "◆";
  position: absolute;
  right: 17px;
  top: 50%;
  color: var(--game-gold);
  font-size: 10.5px;
  transform: translateY(-50%) rotate(45deg);
}

body.game-ui .stat-tile {
  position: relative;
  min-height: 86px;
  border-radius: 0;
  border-color: rgba(231,114,98, .34);
  clip-path: polygon(12px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: linear-gradient(150deg, rgba(80,37,62, .9), rgba(29,7,20, .96) 62%);
  box-shadow: inset 0 0 20px rgba(var(--game-accent-rgb, 226, 182, 93), .08);
}

body.game-ui .stat-tile strong {
  color: var(--game-gold-bright);
  font-family: "Cinzel", serif;
}

body.game-ui .badge,
body.game-ui .status-pill,
body.game-ui .nav-badge {
  border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

/* --------------------------------------------------- art showcase */

.game-world-showcase {
  margin-block: 18px;
}

.game-world-showcase__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.game-world-showcase__head > p {
  max-width: 58ch;
  margin: 0;
  color: var(--game-muted);
  font-size: 14px;
  line-height: 1.5;
}

.game-world-showcase__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}

.game-world-showcase .game-card {
  min-height: 268px;
  display: flex;
  flex-direction: column;
}

.game-card__visual {
  margin: 0;
  overflow: hidden;
  background: #1e0815;
}

.game-card__image,
.game-npc-art,
.game-career-art,
.game-organ-art {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 24%;
  border-bottom: 1px solid rgba(231,114,98, .38);
  filter: saturate(.96) contrast(1.04);
}

.game-card__body {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 13px 14px 17px;
}

.game-card__kicker {
  color: var(--game-accent, var(--game-cyan));
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.game-card__body h3 {
  margin: 0;
  color: var(--game-gold-bright);
  font-family: "Cinzel", serif;
  font-size: 17px;
  line-height: 1.25;
}

.game-card__body p {
  margin: 0;
  color: var(--game-muted);
  font-size: 14px;
  line-height: 1.45;
}

.game-card__action {
  align-self: end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 9px 12px;
  color: #ffafa4;
  border-top: 1px solid rgba(231,114,98, .28);
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.game-card__action:hover { color: #fff; background: rgba(var(--game-accent-rgb, 226, 182, 93), .12); }
.game-card__action:focus-visible { outline: 3px solid var(--game-focus); outline-offset: -3px; }

/* ------------------------------------------------ guide callout */

.game-world-callout {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-block: 16px 20px;
  padding: 17px 20px;
  border-left-color: var(--game-cyan);
  background:
    linear-gradient(100deg, rgba(89,27,63, .42), rgba(32,8,22, .96) 52%),
    linear-gradient(180deg, rgba(252,132,202, .06), transparent);
}

.game-world-callout__crest {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: var(--game-gold-bright);
  clip-path: polygon(50% 0, 92% 18%, 100% 68%, 74% 100%, 26% 100%, 0 68%, 8% 18%);
  background: linear-gradient(160deg, rgba(233,89,173, .3), rgba(51,16,36, .92));
  box-shadow: inset 0 0 0 1px rgba(231,114,98, .52), 0 0 18px rgba(233,89,173, .18);
}

.game-world-callout > div { min-width: 0; }
.game-world-callout small { color: var(--game-cyan); font-size: 12px; letter-spacing: .12em; }
.game-world-callout strong { display: block; margin-top: 3px; color: var(--game-gold-bright); font: 17px/1.3 "Cinzel", serif; }
.game-world-callout p { margin: 5px 0 0; color: var(--game-muted); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------ forms/tables */

body.game-ui input:not([type]),
body.game-ui input[type="text"],
body.game-ui input[type="email"],
body.game-ui input[type="password"],
body.game-ui input[type="search"],
body.game-ui input[type="url"],
body.game-ui input[type="tel"],
body.game-ui input[type="number"],
body.game-ui input[type="date"],
body.game-ui input[type="time"],
body.game-ui input[type="datetime-local"],
body.game-ui select,
body.game-ui textarea {
  min-height: 44px;
  border-radius: 0;
  border-color: rgba(209,117,171, .4);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background-color: rgba(23,4,15, .88);
  box-shadow: inset 3px 0 0 rgba(var(--game-accent-rgb, 226, 182, 93), .3);
}

body.game-ui input:focus,
body.game-ui select:focus,
body.game-ui textarea:focus {
  border-color: var(--game-focus);
  box-shadow: inset 3px 0 0 var(--game-focus), 0 0 0 3px rgba(233,89,173, .14);
}

body.game-ui .data-table {
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(21,3,13, .74);
}

body.game-ui .data-table th {
  color: #f8a195;
  font-family: "Oswald", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(62,35,31, .92), rgba(34,22,29, .94));
}

body.game-ui .data-table tbody tr:hover td {
  background: rgba(var(--game-accent-rgb, 226, 182, 93), .075);
}

/* ------------------------------------------------ focus / auth */

body.game-ui .focus-bar.game-nav-silhouette {
  min-height: 72px;
  border-radius: 0;
  clip-path: polygon(0 14px, 14px 0, calc(100% - 34px) 0, 100% 22px, 100% 100%, 31px 100%, 18px calc(100% - 10px), 0 calc(100% - 10px));
  background: linear-gradient(90deg, rgba(46,12,32, .98), rgba(24,4,16, .98));
  box-shadow: 0 10px 25px rgba(0, 0, 0, .34), inset 0 -1px rgba(231,114,98, .32);
}

body.game-ui .focus-bar__back,
body.game-ui .focus-bar__home {
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  box-sizing: border-box;
}

body.game-ui .focus-bar__home {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

/* Controles densos de leitura e prova continuam compactos visualmente, mas a
 * área acionável respeita 44 px em mouse, toque e navegação por teclado. */
body.game-ui .focus-shell .reader-mode,
body.game-ui .focus-shell .exam-track__dot {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
}

body.game-ui .focus-shell .exam-track__dot {
  width: 44px;
  height: 44px;
}

body.game-ui .focus-shell .option-row {
  box-sizing: border-box;
  min-height: 44px;
}

body.game-ui .auth-card.game-panel {
  overflow: visible;
  border-color: rgba(231,114,98, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 195, .07), 0 28px 60px rgba(0, 0, 0, .5), 0 0 34px var(--game-route-glow);
}

body.game-ui.theme-auth .auth-hero {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  padding: clamp(24px, 3vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(231,114,98, .42);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 46px) 0, calc(100% - 30px) 16px, 100% 16px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 36px 100%, 22px calc(100% - 12px), 0 calc(100% - 12px));
  background:
    linear-gradient(180deg, rgba(18,3,12, .4), rgba(23,4,15, .95) 72%),
    linear-gradient(90deg, rgba(23,4,15, .9), transparent),
    var(--game-hero-art) center / cover no-repeat;
  box-shadow: inset 0 0 0 7px rgba(19,3,12, .36), 0 24px 52px rgba(0, 0, 0, .35);
}

body.game-ui.theme-auth .auth-feature-grid article {
  border-radius: 0;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 13px 100%, 0 calc(100% - 13px));
  background: rgba(25,5,17, .88);
}

body.game-ui.theme-inicio .ficha__head {
  min-height: 142px;
  display: grid;
  align-content: end;
  padding: 24px 20px 17px;
  overflow: hidden;
  clip-path: polygon(0 14px, 14px 0, calc(100% - 30px) 0, 100% 24px, 100% 100%, 24px 100%, 13px calc(100% - 8px), 0 calc(100% - 8px));
  background:
    linear-gradient(180deg, rgba(21,4,14, .22), rgba(21,4,14, .96)),
    var(--game-hero-art) center 36% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(231,114,98, .36);
}

body.game-ui.theme-focus {
  background-image:
    linear-gradient(180deg, rgba(21,4,14, .78), var(--game-midnight) 360px),
    var(--game-hero-art);
  background-position: center top;
  background-size: 100% 420px, cover;
  background-repeat: no-repeat;
}

body.game-ui .auth-tabs.game-nav-silhouette {
  gap: 8px;
}

body.game-ui .auth-tabs.game-nav-silhouette > a {
  min-width: 44px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--game-muted);
  text-align: center;
}

/* -------------------------------------------- career strip overhaul */

body.game-ui .career-strip {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border-color: rgba(231,114,98, .35);
  clip-path: polygon(0 13px, 13px 0, calc(100% - 36px) 0, calc(100% - 24px) 12px, 100% 12px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 24px 100%, 12px calc(100% - 10px), 0 calc(100% - 10px));
  background: linear-gradient(90deg, rgba(47,12,32, .97), rgba(24,5,16, .97));
}

body.game-ui .career-strip__flag {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, #f99e92, #aa2f1f);
}

body.game-ui .career-pick {
  border-radius: 0;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 15px 100%, 0 calc(100% - 15px));
}

/*
 * A barra principal acumulou regras historicas muito especificas em
 * `.theme-city` e `.screen-city`. Esta declaracao fica deliberadamente no fim
 * da camada global para que nenhum destino volte a 8,5 px em telas reais.
 */
body.game-ui .hud-dock .main-nav.game-nav-silhouette .main-nav__item strong {
  display: block;
  color: currentColor;
  font-size: clamp(12px, .84vw, 14px);
  line-height: 1.12;
  letter-spacing: .055em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

body.game-ui.theme-city .hud-dock .main-nav.game-nav-silhouette .main-nav__item {
  position: relative;
  min-width: 92px;
  min-height: 72px;
  border: 1px solid rgba(210,159,189, .26);
  border-radius: 0;
  clip-path: polygon(0 13px, 13px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 18px 100%, 0 calc(100% - 18px));
  background: linear-gradient(160deg, rgba(72,25,52, .84), rgba(26,6,18, .96) 62%);
}

/* ------------------------------------------------ responsive */

@media (max-width: 1280px) {
  .game-world-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .game-nav-silhouette .main-nav__item {
    min-width: 82px;
    padding-inline: 9px;
  }

  .game-nav-silhouette .main-nav__item strong { font-size: 12px; }
}

@media (max-width: 900px) {
  .game-banner,
  .page-header {
    min-height: 154px;
    padding: 25px 22px 28px;
    background-position: 62% center;
  }

  body.game-ui .page-header__title { max-width: 94%; }
  .game-world-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .game-world-callout { grid-template-columns: 62px minmax(0, 1fr); }
  .game-world-callout > .game-button { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .game-banner,
  .page-header {
    min-height: 150px;
    padding: 24px 17px 25px;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 34px) 0, calc(100% - 24px) 9px, 100% 9px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 28px 100%, 18px calc(100% - 8px), 0 calc(100% - 8px));
    background-position: 68% center;
  }

  body.game-ui .page-header__title { max-width: 100%; }
  body.game-ui .page-header__title h1 { font-size: clamp(25px, 8.5vw, 36px); }
  body.game-ui .page-header__title p { font-size: 15px; }

  body.game-ui .focus-bar__id strong {
    display: block;
    max-height: 2.35em;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    font-size: 13px;
    line-height: 1.15;
  }

  .game-nav-silhouette {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .game-nav-silhouette .main-nav__item {
    flex: 0 0 94px;
    min-width: 94px;
    min-height: 78px;
    padding: 8px 7px 7px;
    scroll-snap-align: start;
  }

  .game-nav-silhouette .main-nav__item strong {
    display: block;
    font-size: 12px;
    line-height: 1.08;
  }

  body.game-ui .hud-dock .main-nav.game-nav-silhouette .main-nav__item strong {
    display: block;
    font-size: 12px;
    line-height: 1.08;
  }

  .game-nav-silhouette .main-nav__crest {
    width: 42px;
    height: 39px;
  }

  .game-nav-silhouette .main-nav__item:hover { transform: none; }

  .game-world-showcase__head {
    display: grid;
    align-items: start;
  }

  .game-world-callout {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .game-world-callout__crest { width: 50px; height: 50px; }
  .game-world-callout strong { font-size: 15px; }

  .game-world-showcase__grid {
    display: flex;
    gap: 11px;
    padding: 3px 3px 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .game-world-showcase__grid .game-card {
    flex: 0 0 min(78vw, 292px);
    min-height: 250px;
    scroll-snap-align: start;
  }

  body.game-ui .card-heading,
  body.game-ui .panel-ribbon { min-height: 52px; }
}

@media (hover: none) and (pointer: coarse) {
  .game-button,
  .game-nav-silhouette .main-nav__item,
  .game-nav-silhouette > a,
  .game-nav-silhouette > button,
  body.game-ui summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.game-ui *,
  body.game-ui *::before,
  body.game-ui *::after {
    animation: none !important;
    animation-duration: 0s !important;
    transition: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body.game-ui { background: #fff; color: #111; }
  .game-banner,
  .page-header,
  .game-card,
  .game-panel { clip-path: none; box-shadow: none; }
}

/* ========================================================================
 * SALA DE CONTROLE
 *
 * Administracao usa o mesmo vocabulário do jogo sem fingir ser um mapa. E um
 * ambiente operacional fullscreen, estatico e denso: tabelas permanecem
 * tabelas, autoridade e formularios permanecem no servidor.
 * ===================================================================== */

@media screen {
  body.admin-control-room {
    --game-accent: #e56bb2;
    --game-accent-rgb: 104, 217, 232;
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 18%, rgba(200,65,144, .17), transparent 27rem),
      radial-gradient(circle at 88% 8%, rgba(232,102,85, .1), transparent 24rem),
      linear-gradient(145deg, #2a081c, #17040f 58%, #1f0715);
  }

  body.admin-control-room::before {
    opacity: .34;
    background-image:
      linear-gradient(rgba(226,102,174, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(226,102,174, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(#000, transparent 88%);
    mask-image: linear-gradient(#000, transparent 88%);
  }

  .admin-control-room > .logo-bar,
  .admin-control-room > .site-footer,
  .admin-control-room > .career-strip { display: none !important; }

  .admin-control-room .hud-dock {
    position: sticky;
    top: 0;
    z-index: 100;
    border: 0;
    background: linear-gradient(180deg, rgba(26,4,17, .99), rgba(34,5,22, .96));
    box-shadow: 0 11px 28px rgba(0, 0, 0, .38);
  }

  /* A Sala de Controle possui a propria navegacao operacional. O dock de
     destinos do jogador duplicava comandos e misturava os dois mundos. */
  .admin-control-room .hud-dock .main-nav { display: none !important; }

  .admin-control-room .game-route-stage {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    margin: 0;
    padding: 0;
  }

  .admin-control-stage {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    padding: clamp(18px, 2.4vw, 38px);
    overflow: clip;
  }

  .admin-control-stage::before,
  .admin-control-stage::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
  }

  .admin-control-stage::before {
    top: 22%;
    right: -8vw;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,77,154, .12), transparent 67%);
  }

  .admin-control-stage::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    background: linear-gradient(transparent, rgba(14,1,9, .58));
  }

  .admin-control-surface {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(14px, 1.7vw, 24px);
    width: min(100%, 1760px);
    margin: 0 auto;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  }

  .admin-control-surface :is(h1, h2, h3),
  .admin-control-surface :is(.card-heading, .commerce-admin-heading) strong {
    font-family: "Marcellus", Georgia, serif;
    letter-spacing: .01em;
    text-transform: none;
  }

  .admin-control-surface :is(p, li, td, dd, label, input, select, textarea, button, .game-button) {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    letter-spacing: normal;
  }

  .admin-control-surface :is(.stat-tile, .commerce-admin-stat) strong {
    font-family: "Marcellus", Georgia, serif;
    letter-spacing: .01em;
  }

  .admin-control-surface .page-header {
    min-height: 0;
    margin: 0;
    padding: 8px 0 14px;
    border: 0;
    clip-path: none;
    background: transparent !important;
    box-shadow: none;
  }

  .admin-control-surface .page-header::before,
  .admin-control-surface .page-header::after { display: none; }

  .admin-control-surface .page-header__title h1 {
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1;
  }

  .admin-control-surface :is(.game-panel, .commerce-admin-stat, .stat-tile) {
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: linear-gradient(108deg, rgba(71,18,49, .58), rgba(32,5,21, .26) 82%, transparent) !important;
    box-shadow: none !important;
  }

  .admin-control-surface :is(.commerce-admin-stat, .stat-tile) {
    min-height: 108px;
    padding: 16px 20px;
    clip-path: polygon(14px 0, calc(100% - 24px) 0, 100% 18px, calc(100% - 9px) 100%, 20px 100%, 0 calc(100% - 16px)) !important;
    background: linear-gradient(145deg, rgba(89,26,63, .76), rgba(29,4,19, .68) 72%) !important;
  }

  .admin-control-surface :is(.game-panel, .commerce-admin-stat, .stat-tile)::before,
  .admin-control-surface :is(.game-panel, .commerce-admin-stat, .stat-tile)::after { display: none !important; }

  .admin-control-surface :is(
    [class*="-card"],
    [class*="__card"],
    [class*="-panel"],
    [class*="__panel"],
    [class*="-frame"],
    [class*="__frame"]
  ) {
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .admin-control-surface :is(
    [class*="-card"],
    [class*="__card"],
    [class*="-panel"],
    [class*="__panel"],
    [class*="-frame"],
    [class*="__frame"]
  )::before,
  .admin-control-surface :is(
    [class*="-card"],
    [class*="__card"],
    [class*="-panel"],
    [class*="__panel"],
    [class*="-frame"],
    [class*="__frame"]
  )::after { display: none !important; }

  .admin-control-surface :is(.card-heading, .commerce-admin-heading) {
    min-height: 44px;
    border: 0 !important;
    background: linear-gradient(90deg, rgba(229,96,174, .16), transparent 76%) !important;
  }

  .admin-control-surface :is(.ranking-tabs, .commerce-admin-nav__tabs) {
    border: 0;
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 calc(100% - 10px));
    background: rgba(29,4,19, .66);
    box-shadow: none;
  }

  .admin-control-surface :is(.ranking-tabs, .commerce-admin-nav__tabs) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 8px 100%, 0 50%);
    background: linear-gradient(145deg, rgba(89,32,65, .8), rgba(28,4,18, .9));
  }

  .admin-control-surface :is(.ranking-tabs, .commerce-admin-nav__tabs) a:is(.is-active, [aria-current="page"]) {
    color: #260905;
    background: linear-gradient(145deg, #ffaa9f, #c84534 66%, #781b0f);
  }

  .admin-control-surface .table-scroll {
    max-width: 100%;
    border: 0;
    background: rgba(23,3,15, .72);
    box-shadow: inset 0 0 24px rgba(205,75,151, .035);
  }

  .admin-control-surface :is(.data-table, .commerce-admin-table) {
    width: 100%;
    background: transparent;
  }

  .admin-control-surface :is(.data-table, .commerce-admin-table) th {
    position: sticky;
    top: 0;
    z-index: 2;
    border: 0;
    background: #43132f;
  }

  .admin-control-surface :is(.data-table, .commerce-admin-table) td {
    border-color: rgba(229,107,178, .1);
    background: rgba(28,4,18, .3);
  }

  .admin-control-surface :is(a[href], button, summary, input, select, textarea) { min-height: 44px; }
}

@media screen and (max-width: 760px) {
  .admin-control-room .game-route-stage,
  .admin-control-stage { min-height: 100svh; }
  .admin-control-stage { padding: 12px 8px 28px; overflow: visible; }
  .admin-control-surface { gap: 12px; }
  .admin-control-surface .page-header { padding-inline: 8px; }
  .admin-control-surface .page-header__title h1 { font-size: 28px; }
  .admin-control-surface :is(.commerce-admin-grid, .two-columns, .form-two-columns) { grid-template-columns: 1fr; }
  .admin-control-surface :is(.stats-grid, .commerce-admin-stats) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(56vw, 220px);
    gap: 9px;
    padding: 2px 18px 10px 1px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(229,107,178, .58) rgba(29,4,19, .38);
  }
  .admin-control-surface :is(.stats-grid, .commerce-admin-stats) > * {
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .admin-control-surface .table-scroll { overflow-x: auto; }
}