/* Página central do Rei da Praça. O jogo continua em um quadro 9:16. */
/* Impede que o foco dos modais role o quadro fixo e exponha a arena embaixo. */
#gameContainer { overflow: clip; }
/* O cadastro rola dentro do próprio cartão em telas pequenas e com teclado aberto. */
#loginModal .login-card { max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; }
#cancelProfileEdit[hidden] { display: none; }
#startModal.home-hub {
  background: #17232b;
  color: #fff8df;
}
.hub-backdrop,
.hub-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hub-backdrop {
  object-fit: cover;
  object-position: center 42%;
  opacity: .25;
  filter: blur(2px) saturate(.75);
}
.hub-shade {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(83, 148, 153, .25), transparent 60%),
    linear-gradient(180deg, rgba(11, 37, 53, .93), rgba(18, 45, 53, .85) 42%, rgba(32, 27, 20, .96));
}
.hub-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.1cqh, 10px);
  padding: max(10px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  isolation: isolate;
}
.hub-header { position: relative; z-index: 6; display: grid; gap: 6px; }
.hub-brand-row,
.hub-account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.hub-logo {
  display: block;
  width: min(48%, 178px);
  height: clamp(42px, 7cqh, 60px);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 0 #1d120c) drop-shadow(0 8px 10px #0009);
}
.hub-menu { position: relative; flex: none; }
.hub-menu summary {
  display: grid;
  place-items: center;
  width: 43px;
  height: 40px;
  border: 2px solid #0e1010;
  border-radius: 12px;
  background: linear-gradient(#ffdf6e, #eda023);
  box-shadow: inset 0 2px #fff2b4, 0 4px 0 #6f3412, 0 6px 10px #0008;
  color: #301704;
  font-size: 23px;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}
.hub-menu summary::-webkit-details-marker { display: none; }
.hub-menu-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 193px;
  padding: 6px;
  border: 2px solid #b78137;
  border-radius: 13px;
  background: #291b12;
  box-shadow: 0 10px 22px #000c;
}
.hub-menu-popover button,
.hub-menu-popover a {
  display: block;
  width: 100%;
  padding: 11px 9px;
  border: 0;
  border-bottom: 1px solid #ffffff22;
  background: transparent;
  color: #fff1c8;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hub-menu-popover > :last-child { border-bottom: 0; }
.hub-account-row .player-profile-header { min-width: 0; flex: 1; }
.hub-account-row .player-profile-chip {
  max-width: 100%;
  min-height: 40px;
  padding: 3px 8px 3px 4px;
  border: 2px solid #c89445;
  border-radius: 12px;
  background: linear-gradient(180deg, #433023, #261b18);
  box-shadow: inset 0 1px #f9db9c5c, 0 3px 0 #120d0b, 0 6px 10px #0007;
}
.hub-account-row .player-avatar-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: linear-gradient(#fff4d1, #eeb763);
  font-size: 20px;
}
.hub-account-row .player-info-meta { min-width: 0; }
.hub-account-row .player-info-meta strong {
  overflow: hidden;
  color: #fff4cd;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-account-row .player-info-meta small { color: #e8bb78; font-size: 9px; }
.hub-balances { display: flex; gap: 5px; flex: none; }
.hub-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 49px;
  height: 34px;
  padding: 2px 6px 2px 3px;
  border: 1.5px solid #c99442;
  border-radius: 10px;
  background: linear-gradient(#132633, #121923);
  box-shadow: inset 0 1px #fff4c533, 0 3px 8px #0006;
  color: #fff2c0;
  font-size: 12px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}
.hub-balance img { width: 21px; height: 21px; object-fit: contain; filter: drop-shadow(0 2px 2px #0008); }
.hub-main { min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1cqh, 9px); }
.hub-section-heading,
.hub-progress-copy { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hub-section-heading {
  color: #ffe5a0;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 2px 2px #000b;
}
.hub-section-heading span:last-child {
  padding: 3px 7px;
  border: 1px solid #e2b159a8;
  border-radius: 8px;
  background: #13212bd9;
  font-size: 9px;
}
.hub-arena-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 100px;
  width: 100%;
  overflow: hidden;
  border: 3px solid #2d1c12;
  border-radius: 22px;
  background: #223237;
  box-shadow: 0 0 0 2px #fbd471, inset 0 0 0 3px #fff0b56b, 0 7px 0 #26150c, 0 13px 24px #0008;
  text-align: left;
  cursor: pointer;
}
.hub-arena-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transition: transform .5s ease;
}
.hub-arena-card:hover > img { transform: scale(1.04); }
.hub-arena-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff7dc15, transparent 40%, #061c22bf 73%, #07100bed 100%);
  box-shadow: inset 0 0 0 3px #ffecb563;
  pointer-events: none;
}
.hub-arena-caption {
  position: absolute;
  inset: auto 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 2px 3px #000, 0 0 7px #000;
}
.hub-arena-kicker { color: #ffda70; font-size: 9px; font-weight: 1000; letter-spacing: .12em; }
.hub-arena-caption strong {
  font-size: clamp(19px, 5.2cqw, 28px);
  font-weight: 1000;
  line-height: 1.06;
  -webkit-text-stroke: .35px #2d160a;
}
.hub-arena-caption small { color: #fff5d3; font-size: 10px; font-weight: 700; }
.hub-progress-card {
  padding: 7px 10px 8px;
  border: 1px solid #d39b48;
  border-radius: 11px;
  background: linear-gradient(#253d42ed, #162127f5);
  box-shadow: inset 0 1px #ffffff24, 0 4px 8px #0007;
}
.hub-progress-copy { margin-bottom: 5px; font-size: 10px; font-weight: 750; }
.hub-progress-copy strong { color: #ffdc69; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-progress-card progress { display: block; width: 100%; height: 8px; border: 1px solid #0b1b20; border-radius: 99px; appearance: none; background: #111a1b; overflow: hidden; }
.hub-progress-card progress::-webkit-progress-bar { background: #111a1b; }
.hub-progress-card progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #f5a420, #ffe36b); box-shadow: 0 0 7px #ffbe34; }
.hub-progress-card progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #f5a420, #ffe36b); }
.hub-battle-button {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: min(78%, 300px);
  min-height: clamp(55px, 8cqh, 69px);
  margin: 0 auto 3px;
  border: 3px solid #261406;
  border-radius: 19px;
  background: linear-gradient(#fff783, #ffc826 50%, #f58410);
  box-shadow: inset 0 2px #fffbd0, 0 5px 0 #7d330a, 0 10px 20px #000a;
  color: #311807;
  font: inherit;
  font-size: clamp(21px, 6cqw, 30px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px #fff4b4;
  cursor: pointer;
  animation: hub-battle-glow 2.8s ease-in-out infinite;
}
.hub-battle-button > span:first-child { font-size: 30px; text-shadow: 0 2px #fff4b4; }
.hub-battle-button small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .1em; }
.hub-battle-button:active { transform: translateY(3px); box-shadow: inset 0 2px #fffbd0, 0 2px 0 #7d330a, 0 5px 12px #000a; }
@keyframes hub-battle-glow { 50% { filter: brightness(1.09); } }
.hub-reward-section { min-width: 0; }
.hub-reward-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: clamp(56px, 8cqh, 70px);
  padding: 5px 10px 5px 6px;
  border: 2px solid #b77a32;
  border-radius: 14px;
  background: linear-gradient(110deg, #7d401b, #3d281d 50%, #253341);
  box-shadow: inset 0 1px #ffe6a466, 0 4px 0 #1b110d, 0 7px 14px #0008;
  color: #fff3cb;
  text-align: left;
  cursor: pointer;
}
.hub-reward-art { display: grid; flex: none; place-items: center; width: 47px; height: 47px; border-radius: 10px; background: radial-gradient(#fff1ae77, #b3641833 60%, transparent 75%); }
.hub-reward-art img { width: 43px; height: 43px; object-fit: contain; filter: drop-shadow(0 2px 2px #000b); }
.hub-reward-copy { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.hub-reward-copy small { color: #ffd36f; font-size: 9px; font-weight: 1000; letter-spacing: .07em; }
.hub-reward-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.hub-reward-copy > span { color: #e8dcbe; font-size: 10px; }
.hub-reward-arrow { color: #ffd262; font-size: 30px; font-weight: 900; line-height: 1; }
.hub-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  min-height: clamp(56px, 8.5cqh, 72px);
  padding: 4px;
  border: 2px solid #a97434;
  border-radius: 15px;
  background: linear-gradient(#4b3527, #211814);
  box-shadow: inset 0 2px #e8bd6f5c, 0 3px 0 #0e0b09;
}
.hub-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  border: 1.5px solid #e0ab50;
  border-radius: 11px;
  background: linear-gradient(#ffe77b, #f2aa24 63%, #cb6515);
  box-shadow: inset 0 1px #fff9cd, 0 2px 0 #6a2e0d;
  color: #291607;
  font: inherit;
  font-size: clamp(8px, 1.8cqw, 10px);
  font-weight: 1000;
  cursor: pointer;
}
.hub-nav-item img { width: clamp(22px, 3.8cqh, 30px); height: clamp(22px, 3.8cqh, 30px); object-fit: contain; filter: drop-shadow(0 2px 1px #66340c70); }
.hub-nav-item i { position: absolute; right: 2px; top: 1px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 1px 3px; border-radius: 99px; background: #db402e; color: #fff; font-size: 9px; font-style: normal; }
.hub-nav-item i[hidden] { display: none; }
.hub-nav-item:active { transform: translateY(2px); box-shadow: inset 0 1px #fff9cd; }
.hub-nav-item[aria-pressed="true"] {
  background: linear-gradient(#fff6a8, #ffd330 60%, #eb8e12);
  box-shadow: inset 0 2px #fffde0, 0 2px 0 #6a2e0d, 0 0 0 2px #ffdc58;
}
@container (max-height: 670px) {
  .hub-shell { gap: 5px; padding-top: 7px; padding-bottom: 6px; }
  .hub-logo { height: 40px; }
  .hub-header { gap: 4px; }
  .hub-reward-art { width: 39px; height: 39px; }
  .hub-reward-art img { width: 36px; height: 36px; }
  .hub-arena-caption { bottom: 7px; }
  .hub-arena-kicker, .hub-arena-caption small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-battle-button { animation: none; }
  .hub-arena-card > img { transition: none; }
}

/* Rasch Studio -> capa ilustrada -> hub. A capa é uma etapa própria. */
.game-title-screen {
  position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #14314a;
  transition: opacity .34s ease, transform .34s ease;
}
.game-title-screen[hidden] { display: none !important; }
.game-title-screen.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.game-title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.game-title-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #092739b8 0%, #0b34443b 18%, transparent 38%, transparent 60%, #141d26a8 82%, #111119e8 100%);
}
.game-title-brand {
  position: absolute;
  z-index: 1;
  top: max(4.5cqh, env(safe-area-inset-top));
  left: 0;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.game-title-brand img {
  width: min(52cqw, 238px);
  height: auto;
  max-height: 17cqh;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 #33140b) drop-shadow(0 9px 13px #071722c9);
  animation: title-logo-breathe 3.5s ease-in-out infinite;
}
.game-title-brand span {
  padding: 4px 10px;
  border-radius: 99px;
  background: #0b25339c;
  color: #ffe4a0;
  font-size: clamp(8px, 2cqw, 11px);
  font-weight: 950;
  letter-spacing: .13em;
  text-shadow: 0 2px #000;
}
.game-title-actions {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: max(5.5cqh, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 13px;
}
.game-title-actions .title-play-button {
  width: min(70cqw, 300px);
  height: clamp(62px, 9cqh, 76px);
  gap: 15px;
  border: 3px solid #301808;
  border-radius: 19px;
  background: linear-gradient(180deg, #fff187 0%, #ffcc35 42%, #ee8210 100%);
  box-shadow: inset 0 2px #fffac8, inset 0 -4px #ca5b0a, 0 5px 0 #542508, 0 11px 25px #000a, 0 0 25px #ffb63c6b;
  color: #321802;
  font-size: clamp(24px, 6cqw, 33px);
  font-weight: 1000;
  letter-spacing: .06em;
  animation: title-button-breathe 2.7s ease-in-out infinite;
}
.title-play-mark { display: block; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid #311a0b; filter: drop-shadow(1px 1px #fff3a1); }
.game-title-actions small { color: #fff1cc; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 5px #000; }
@keyframes title-logo-breathe { 50% { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 3px 0 #33140b) drop-shadow(0 12px 18px #f4b84b70); } }
@keyframes title-button-breathe { 50% { filter: brightness(1.1); box-shadow: inset 0 2px #fffac8, inset 0 -4px #ca5b0a, 0 5px 0 #542508, 0 11px 25px #000a, 0 0 38px #ffbc4a9c; } }

/* Hub: uma peça de jogo, não uma grade de botões dourados independentes. */
#startModal.home-hub { background: #0c2230; }
.hub-backdrop { opacity: .4; filter: blur(1px) saturate(.9); }
.hub-shade { background: linear-gradient(180deg, #071a28ef 0%, #092432dc 29%, #0b2630aa 49%, #152230dc 76%, #0b1622fa 100%); }
.hub-shell { gap: clamp(7px, 1cqh, 11px); padding-inline: 14px; }
.hub-logo { width: min(43%, 164px); height: clamp(40px, 6cqh, 54px); }
.hub-menu summary { width: 39px; height: 39px; border: 1px solid #c79a51; background: linear-gradient(#324c59, #132733); box-shadow: inset 0 1px #ffffff53, 0 3px 7px #0008; }
.hub-menu-lines, .hub-menu-lines::before, .hub-menu-lines::after { display: block; width: 17px; height: 2px; border-radius: 3px; background: #ffe2a2; box-shadow: 0 1px #20150b; }
.hub-menu-lines { position: relative; }
.hub-menu-lines::before, .hub-menu-lines::after { content: ''; position: absolute; left: 0; }
.hub-menu-lines::before { top: -6px; }
.hub-menu-lines::after { top: 6px; }
.hub-account-row .player-profile-chip { border: 1px solid #9fb7bb72; background: linear-gradient(120deg, #1b3a47ed, #172936ed); border-radius: 13px; box-shadow: inset 0 1px #ffffff4d, 0 3px 9px #0006; }
.hub-account-row .player-avatar-icon { overflow: hidden; width: 33px; height: 33px; border: 1px solid #e1bd74; border-radius: 9px; background: radial-gradient(#ffe7a2, #9c7133); }
.hub-account-row .player-avatar-icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hub-balance { border-color: #b6a371a6; background: linear-gradient(#1e3946, #132533); border-radius: 9px; }
.hub-section-heading { font-size: 12px; color: #fff3d0; }
.hub-section-heading span:last-child { border-color: #90bbca8c; color: #d9f5fb; }
.hub-arena-card { border: 2px solid #0b1a23; border-radius: 19px; box-shadow: 0 0 0 2px #d8b86c, inset 0 0 0 2px #ffefc060, 0 8px 20px #0009; }
.hub-arena-sheen { background: linear-gradient(180deg, #0617220d 15%, transparent 38%, #051923b8 76%, #041018f2 100%); }
.hub-arena-caption { left: 16px; bottom: 14px; }
.hub-arena-kicker { color: #ffd76d; }
.hub-arena-caption strong { font-size: clamp(22px, 6cqw, 31px); -webkit-text-stroke: .5px #13181c; }
.hub-progress-card { border-color: #5f8897; background: linear-gradient(#244252ed, #132635f7); border-radius: 10px; }
.hub-battle-button { width: min(82%, 318px); justify-content: space-between; padding: 5px 18px 5px 9px; border-radius: 16px; background: linear-gradient(#fff3a2, #ffd23d 46%, #e98614); font-size: clamp(21px, 5.5cqw, 28px); }
.hub-battle-button img { width: clamp(39px, 7cqh, 54px); height: clamp(39px, 7cqh, 54px); object-fit: contain; filter: drop-shadow(0 3px 2px #6d320980); }
.hub-battle-button > span:nth-child(2) { flex: 1; text-align: center; }
.hub-battle-button small { font-size: 8px; letter-spacing: .09em; }
.hub-battle-arrow { font-size: 37px; line-height: 1; }
.hub-reward-button { border: 1px solid #668a91; background: linear-gradient(100deg, #1e4050, #18313f 55%, #163043); border-radius: 12px; box-shadow: inset 0 1px #ffffff45, 0 5px 13px #0008; }
.hub-reward-copy small { color: #f9ca70; }
.hub-nav { gap: 3px; padding: 5px; border: 1px solid #567b86; border-radius: 14px; background: linear-gradient(#183746, #102530); box-shadow: inset 0 1px #b2dce251, 0 5px 15px #0009; }
.hub-nav-item { gap: 2px; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; color: #d9e5e7; font-size: 10px; letter-spacing: .03em; }
.hub-nav-item img { width: clamp(28px, 5cqh, 37px); height: clamp(28px, 5cqh, 37px); filter: drop-shadow(0 2px 2px #000b); }
.hub-nav-item:active { transform: translateY(1px); background: #294a53; box-shadow: none; }
.hub-nav-item[aria-pressed="true"] { border-color: #e1b951a8; background: linear-gradient(#c69336, #7b4b1a); box-shadow: inset 0 1px #fff2b184, 0 0 9px #f8bd4766; color: #fff8df; }
.hub-nav-item[aria-pressed="true"]::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 1px; height: 2px; border-radius: 4px; background: #ffe28c; }
.hub-account-row .player-info-meta strong { font-size: 12px; }
.hub-account-row .player-info-meta small { font-size: 10px; }
.hub-arena-kicker, .hub-arena-caption small { font-size: 11px; }
.hub-progress-copy { font-size: 11px; }
.hub-reward-copy small { font-size: 10px; }
.hub-reward-copy strong { font-size: 15px; }
.hub-reward-copy > span { font-size: 11px; }
.hub-nav-item { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .game-title-screen, .game-title-brand img, .game-title-actions .title-play-button { animation: none; transition: none; } }

/* One home shell: fixed brand + resources, switchable center, fixed bottom dock. */
.hub-brand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.hub-brand-row .hub-logo { width: 100%; max-width: 164px; height: clamp(40px, 6cqh, 54px); }
.hub-brand-row .hub-balances { min-width: 0; align-items: center; }
.hub-brand-row .hub-balance { min-width: 44px; padding-inline: 3px 5px; }
.hub-level-balance {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.hub-player-level {
  color: #ffe19a;
  font-size: clamp(7px, 1.45cqw, 9px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000c;
}
.hub-content { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.hub-plaza-panel {
  height: 100%; min-height: 0; display: flex; flex-direction: column;
  gap: clamp(7px, 1cqh, 10px); padding: 2px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: #77a5ae #142c39;
}
.hub-plaza-panel > .hub-main { flex: 1 0 260px; }
.hub-plaza-panel > .hub-reward-section { flex: none; margin-bottom: 3px; }
.hub-plaza-panel[hidden], #hubTrailGuide[hidden], .hub-menu-popover [hidden] { display: none !important; }
#startModal #progressionModal {
  position: relative; inset: auto; z-index: auto;
  display: block; width: 100%; height: 100%; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; backdrop-filter: none; opacity: 1; visibility: visible;
  pointer-events: auto; transition: none;
}
#startModal #progressionModal.modal-hidden { display: none; }
#startModal .journey-shell {
  width: 100%; height: 100%; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.hub-trail-guide { flex: none; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: #102e3dbd; border: 1px solid #6f9dab52; }
.hub-trail-guide strong { color: #fff4cf; font: 900 12px/1.2 system-ui; letter-spacing: .06em; }
#startModal .hub-trail-guide #crownNext { margin: 3px 0 0; font: 600 11px/1.3 system-ui; color: #d2e4e7; }
#startModal .journey-shell #journeyScroll { margin: 0; min-height: 0; border-radius: 12px; mask-image: none; border: 1px solid #618d9e55; }
#startModal .journey-shell .collection-panel { padding: 2px 3px 16px; min-height: 0; overscroll-behavior: contain; }
.hub-section-notice { flex: none; margin-top: 5px; color: #ffe49e; font: 700 10px/1.3 system-ui; }
.hub-section-notice:empty { display: none; }

.hub-nav { position: relative; z-index: 5; grid-template-columns: minmax(0, 1fr) clamp(64px, 18cqw, 82px) minmax(0, 1fr); min-height: clamp(66px, 10cqh, 80px); }
.hub-nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.hub-nav-group-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-nav-group-right > .hub-nav-item { width: 100%; }
.hub-nav-plaza {
  transform: translateY(-3px); gap: 0; border: 1px solid #b39358;
  background: linear-gradient(#335664, #193844); color: #fff2cf;
  box-shadow: inset 0 1px #fff6c75c, 0 3px 6px #0009;
}
.hub-nav-plaza[aria-pressed="true"] { background: linear-gradient(#ffdf77, #df9428); color: #382009; box-shadow: inset 0 1px #fff7ca, 0 3px 0 #633715; }
.hub-nav-emote {
  display: block; width: clamp(33px, 5.5cqh, 43px); height: clamp(33px, 5.5cqh, 43px);
  background-image: image-set(url('assets/image-quality/variants/opombo_tower_moods-0fb29c9a8bbe-512.webp') 1x, url('assets/image-quality/variants/opombo_tower_moods-0fb29c9a8bbe-1024.webp') 2x);
  background-size: 400% 400%; background-position: 33.333333% 0; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 1px #0007);
}

.hub-menu-popover { width: min(268px, calc(100cqw - 28px)); max-height: calc(100cqh - 76px); overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(#1d3b48, #102735); border-color: #7899a1; scrollbar-width: thin; }
.hub-menu-popover .player-profile-header { margin: 0 0 4px; }
.hub-menu-popover .player-profile-chip {
  display: flex; align-items: center; gap: 9px; width: 100%; margin: 0;
  padding: 9px; border: 1px solid #b69b64; border-radius: 9px;
  background: linear-gradient(#33525d, #203946); color: #fff2ce;
  box-shadow: inset 0 1px #ffffff21; text-align: left;
}
.hub-menu-popover .player-avatar-icon { display: grid; place-items: center; flex: none; width: 37px; height: 37px; overflow: hidden; border-radius: 9px; background: #ffe3a0; }
.hub-menu-popover .player-avatar-icon img { width: 100%; height: 100%; object-fit: contain; }
.hub-menu-popover .player-info-meta { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.hub-menu-popover .player-info-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hub-menu-popover .player-info-meta small { color: #f2d18c; font-size: 10px; }
.hub-menu-popover button, .hub-menu-popover a { color: #f5edcf; }
.hub-menu-settings { padding: 0 9px; border-bottom: 1px solid #ffffff22; }
.hub-menu-settings > details { padding: 9px 0; font: 600 11px/1.4 system-ui; color: #d7e4e7; }
.hub-menu-settings summary { display: list-item; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background: none; color: #f5edcf; font: 800 11px/1.4 system-ui; list-style: disclosure-closed; }
.hub-menu-settings details[open] > summary { list-style: disclosure-open; }
.hub-menu-settings p { margin-top: 7px; }
.hub-menu-settings .sound-controls { margin-top: 9px; gap: 7px; }
.hub-menu-settings .sound-controls label { color: #d6e7e9; font-size: 10px; }
.hub-menu-settings .sound-controls button { width: 29px; padding: 0; border: 1px solid #c4a766; text-align: center; }

/* Keep the Pombo level before the currency chips, never between them. */
.hub-brand-row { align-items: center; }
.hub-brand-row .hub-balances { display: flex; flex-wrap: nowrap; width: max-content; flex: none; }
.hub-brand-row .hub-player-level {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(6px, 1.35cqw, 8px);
  white-space: nowrap;
  padding: 4px 5px;
  border: 1px solid #cda54e;
  border-radius: 7px;
  background: linear-gradient(#263f48, #132a35);
}

@container (max-width: 300px) {
  .hub-shell { padding-inline: 7px; }
  .hub-brand-row { gap: 4px; }
  .hub-brand-row .hub-balance { min-width: 32px; gap: 1px; font-size: 10px; }
  .hub-brand-row .hub-balance img { width: 16px; height: 16px; }
  .hub-level-balance { gap: 3px; }
  .hub-player-level { font-size: 7px; }
  .hub-menu > summary { width: 32px; height: 34px; }
  .hub-nav { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 1px; padding: 3px; }
  .hub-nav-item { font-size: 9px; }
  .hub-nav-item img { width: 25px; height: 25px; }
  .hub-nav-group-right > .hub-nav-item { width: 100%; }
}

/* ========================================================
   LOJA DO REI DA PRAÇA: PACKS POR RARIDADE & BISCOITOS
   ======================================================== */
.shop-balance-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #170d06;
  border: 1.5px solid #ffbe42;
  border-radius: 99px;
  padding: 3px 9px 3px 5px;
  color: #ffdf79;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.shop-balance-pill b {
  color: #fff6d6;
  font-size: 12px;
}
.shop-balance-pill small {
  color: #e5b357;
  font-size: 9px;
  text-transform: uppercase;
}
.shop-section-title {
  color: #ffda70;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #ffda7077, transparent);
}
.shop-pack-grid,
.shop-bundle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.shop-pack-card,
.shop-bundle-card {
  position: relative;
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  border: 1.5px solid #784c20;
  background: linear-gradient(145deg, #2a1b12, #170f0b);
}
.shop-pack-badge,
.shop-bundle-badge {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: .05em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.rarity-badge-comum { background: #166534; color: #bbf7d0; border: 1px solid #22c55e; }
.rarity-badge-raro { background: #0369a1; color: #e0f2fe; border: 1px solid #38bdf8; }
.rarity-badge-epico { background: #6b21a8; color: #f3e8ff; border: 1px solid #c084fc; box-shadow: 0 0 8px rgba(192, 132, 252, 0.4); }
.rarity-badge-lendario { background: linear-gradient(135deg, #b45309, #db2777); color: #fff; border: 1px solid #fde047; box-shadow: 0 0 10px rgba(253, 224, 71, 0.6); }

.shop-pack-card.rarity-comum { border-color: #22c55e77; background: linear-gradient(145deg, #182a20, #0d1712); }
.shop-pack-card.rarity-raro { border-color: #38bdf888; background: linear-gradient(145deg, #132536, #0c151f); box-shadow: 0 0 10px rgba(56, 189, 248, 0.15); }
.shop-pack-card.rarity-epico { border-color: #c084fc99; background: linear-gradient(145deg, #2b1836, #140b1a); box-shadow: 0 0 14px rgba(192, 132, 252, 0.25); }
.shop-pack-card.rarity-lendario { border-color: #fde047; background: linear-gradient(145deg, #3d240e, #220b1e); box-shadow: 0 0 18px rgba(253, 224, 71, 0.35); }

.shop-pack-icon-wrapper {
  margin: 6px 0 4px;
}
.shop-pack-art {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.shop-bundle-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 6px 0 2px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.shop-pack-card h3 {
  font-size: 13px;
  color: #fff1c8;
  margin: 2px 0;
  line-height: 1.1;
}
.shop-pack-desc {
  font-size: 9px;
  color: #c7b39a;
  line-height: 1.3;
  margin: 2px 0 4px;
  min-height: 24px;
}
.shop-pack-meta {
  font-size: 8.5px;
  color: #ffbe42;
  font-weight: 800;
  margin-bottom: 6px;
}
.shop-buy-btn,
.shop-bundle-btn {
  width: 100%;
  min-height: 33px;
  border-radius: 9px;
  border: 1.5px solid #ffd86b;
  background: linear-gradient(180deg, #ffdf6d, #f5a31b 65%, #c86307);
  box-shadow: inset 0 1px #fff7c2, 0 3px 0 #572905, 0 4px 8px rgba(0,0,0,0.4);
  color: #241407;
  font-weight: 1000;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  margin-top: auto;
}
.shop-buy-btn:active,
.shop-bundle-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px #fff7c2, 0 1px 0 #572905;
}
.shop-buy-btn:disabled, .shop-bundle-btn:disabled {
  background: #332720;
  border-color: #5a4435;
  color: #8f7767;
  box-shadow: none;
  cursor: default;
}
.shop-bundle-card {
  border-color: #d19a43;
  background: linear-gradient(145deg, #312117, #19100a);
}
.shop-bundle-card h3 {
  color: #ffe685;
  font-size: 15px;
  font-weight: 1000;
  margin: 2px 0;
}
.shop-bundle-name {
  color: #fff2d3;
  font-size: 10.5px;
  font-weight: 800;
  margin: 0;
}
.shop-bundle-card small {
  color: #bfa588;
  font-size: 8px;
  line-height: 1.2;
  display: block;
  margin: 2px 0 6px;
  min-height: 20px;
}
.shop-bundle-btn {
  background: linear-gradient(180deg, #5eead4, #14b8a6 65%, #0f766e);
  border-color: #a7f3d0;
  color: #042f2e;
  box-shadow: inset 0 1px #ccfbf1, 0 3px 0 #064e3b;
}
.shop-bundle-card:first-child .shop-bundle-badge {
  background: #059669;
  color: #ecfdf5;
  border: 1px solid #34d399;
}

/* O menu do topo permanece acima das abas fixas do Deck e dos seus cartões. */
.hub-header { position:relative; z-index:120 !important; }
.hub-menu { position:relative; z-index:130 !important; }
.hub-menu-popover { position:absolute; z-index:140 !important; }