.hub-screen { --cyan:#37cff7; --violet:#8054ed; --gold:#ffd25c; min-height:100dvh; height:100%; max-width:680px; margin:auto; overflow-x:hidden; overflow-y:auto; color:#fff; background:radial-gradient(circle at 50% 18%,#132b5d,transparent 38%),#060c20; font-family:"Baloo 2",system-ui,sans-serif; }
.hub-hud { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:84px; padding:max(10px,env(safe-area-inset-top)) 14px 10px; border-bottom:1px solid rgba(86,218,255,.32); background:rgba(5,11,31,.94); box-shadow:0 5px 22px rgba(0,0,0,.42); }
.hub-profile { display:flex; align-items:center; min-width:0; gap:9px; }
.hub-profile__avatar { position:relative; flex:none; width:56px; height:56px; overflow:hidden; border-radius:17px; background:linear-gradient(145deg,#1d4d83,#131638); }
.hub-profile__avatar { padding:0; border:0; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.hub-profile__avatar:active { transform:scale(.94); }
.hub-profile__avatar:focus,.hub-profile__avatar:focus-visible { outline:none; }
.hub-profile__avatar img {
  position:absolute;
  top:-24%;
  left:50%;
  width:175%;
  height:175%;
  object-fit:contain;
  object-position:center top;
  transform:translateX(-50%);
}
.hub-profile__copy { display:grid; min-width:0; line-height:1; }
.hub-profile__copy small { color:#8fa4c3; font-size:.58rem; font-weight:800; letter-spacing:.12em; }
.hub-profile__copy strong { overflow:hidden; color:var(--cyan); font-size:clamp(.95rem,4vw,1.15rem); text-overflow:ellipsis; white-space:nowrap; }
.hub-profile__copy > span { margin-top:6px; color:#d7dfed; font-size:.68rem; font-weight:700; }
.hub-wallet { flex:none; display:grid; gap:5px; }
.hub-wallet__item { display:flex; align-items:center; gap:6px; min-width:70px; padding:4px 9px; border:1px solid rgba(255,255,255,.17); border-radius:9px; background:rgba(255,255,255,.07); font-size:.9rem; }
.hub-wallet__item i { font-style:normal; }
.hub-wallet__item--coins i { color:var(--gold); }
.hub-wallet__item--gems i { color:#61e3ff; }
.hub-hero { position:relative; min-height:190px; overflow:hidden; background:url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/cadiz-promenade.png") center 42% / cover no-repeat; }
.hub-hero__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,9,27,.05),rgba(4,9,27,.9)); }
.hub-hero__content { position:absolute; right:17px; bottom:15px; left:17px; }
.hub-hero__content > p { margin:0; color:#c9f4ff; font-size:.65rem; font-weight:800; letter-spacing:.15em; }
.hub-hero h1 { margin:3px 0 9px; font-size:clamp(1.35rem,6vw,2rem); line-height:1; text-shadow:0 3px 7px #000; }
.hub-level { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:.64rem; }
.hub-level__track { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.18); }
.hub-level__track i { display:block; width:6%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.hub-section { padding:20px 14px 4px; }
.hub-section__heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:11px; }
.hub-section__heading small { color:#7489ab; font-size:.58rem; font-weight:800; letter-spacing:.12em; }
.hub-section__heading h2 { margin:1px 0 0; font-size:1rem; line-height:1; }
.hub-section__heading > span { color:#8fa3c0; font-size:.67rem; }
.hub-grid { display:grid; gap:9px; }
.hub-grid--primary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hub-card { --card-color:linear-gradient(145deg,#20c6df,#1574af); display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:74px; padding:10px 9px; border:1px solid rgba(255,255,255,.14); border-radius:15px; color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 5px 14px rgba(0,0,0,.28); text-align:left; cursor:pointer; }
.hub-card__icon { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--card-color); box-shadow:inset 0 1px rgba(255,255,255,.3),0 5px 10px rgba(0,0,0,.3); font-size:1.3rem; }
.hub-card__label { display:grid; min-width:0; }
.hub-card strong { font-size:clamp(.69rem,3.1vw,.83rem); line-height:1; }
.hub-card small { margin-top:5px; color:#98aac5; font-size:.59rem; line-height:1; }
.hub-card > b { color:#7385a4; font-size:1.25rem; }
.hub-card--violet { --card-color:linear-gradient(145deg,#a35ced,#5933b3); }
.hub-card--blue { --card-color:linear-gradient(145deg,#4e8df2,#2748a7); }
.hub-card--gold { --card-color:linear-gradient(145deg,#f5c646,#c67718); }
.hub-mission { margin:18px 14px 0; padding:15px; border:1px solid rgba(110,218,255,.35); border-radius:17px; background:linear-gradient(135deg,rgba(18,56,105,.85),rgba(35,18,83,.88)); box-shadow:0 8px 25px rgba(0,0,0,.3); }
.hub-mission__top { display:flex; justify-content:space-between; color:#82dcff; font-size:.62rem; font-weight:800; letter-spacing:.08em; }
.hub-mission__top b { color:var(--gold); }
.hub-mission h2 { margin:7px 0 2px; font-size:1.05rem; }
.hub-mission > p { margin:0; color:#bbc8dc; font-size:.72rem; line-height:1.3; }
.hub-mission__progress { position:relative; height:18px; margin-top:12px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.32); }
.hub-mission__progress i { display:block; width:4%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.hub-mission__progress span { position:absolute; inset:0; font-size:.6rem; font-weight:800; line-height:18px; text-align:center; }
.hub-mission .hub-mission__status { min-height:16px; margin-top:9px; color:#82dcff; }
.hub-section--secondary { padding-top:21px; }
.hub-grid--secondary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hub-shortcut { position:relative; display:grid; justify-items:center; gap:6px; min-width:0; padding:10px 3px 8px; border:1px solid rgba(255,255,255,.13); border-radius:13px; color:#fff; background:rgba(255,255,255,.055); cursor:pointer; }
.hub-shortcut i { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#bfefff; background:#152d59; font-size:1.1rem; font-style:normal; }
.hub-shortcut span { overflow:hidden; max-width:100%; font-size:clamp(.52rem,2.3vw,.67rem); font-weight:800; text-overflow:ellipsis; }
.hub-shortcut b { position:absolute; top:-7px; right:-4px; min-width:21px; height:21px; padding-inline:5px; border-radius:999px; color:#fff; background:#e52e69; box-shadow:0 3px 7px #000; font-size:.66rem; line-height:21px; }
.hub-footer-space { height:102px; }
.hub-turn { position:sticky; z-index:5; right:0; bottom:0; left:0; padding:10px 13px max(12px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(4,8,25,.96) 24%); }
.hub-turn button { position:relative; display:grid; width:100%; min-height:70px; place-content:center; border:3px solid #b9f1ff; border-radius:16px; color:#fff; background:linear-gradient(135deg,#17b9e7,#3657d5 55%,#6e32c5); box-shadow:inset 0 4px rgba(255,255,255,.22),inset 0 -7px rgba(0,0,0,.2),0 6px #061943; text-shadow:0 2px #10214b; cursor:pointer; }
.hub-turn button small { font-size:.57rem; letter-spacing:.12em; }
.hub-turn button strong { font-size:clamp(1.35rem,6vw,1.85rem); line-height:1; }
.hub-turn button > span { position:absolute; top:50%; right:16px; font-size:1.8rem; transform:translateY(-55%); }
.hub-turn button:active { transform:translateY(5px); box-shadow:inset 0 3px rgba(255,255,255,.18),inset 0 -3px rgba(0,0,0,.16),0 1px #061943; }
.hub-turn button.is-ready { isolation:isolate; animation:hubTurnReady 2.6s ease-in-out infinite; }.hub-turn button.is-ready::before { content:""; position:absolute; z-index:-1; inset:-5px; border:2px solid rgba(255,239,137,.82); border-radius:20px; opacity:0; pointer-events:none; animation:hubTurnReadyRing 2.6s ease-out infinite; }.hub-turn button.is-ready small { color:#744308; font-weight:900; }.hub-turn button.is-ready > span { animation:hubTurnReadyArrow 1.15s ease-in-out infinite; }@keyframes hubTurnReady{0%,72%,100%{filter:none;transform:scale(1)}82%{filter:brightness(1.14);transform:scale(1.018)}90%{filter:brightness(1.05);transform:scale(1.006)}}@keyframes hubTurnReadyRing{68%{opacity:0;transform:scale(.98)}78%{opacity:.85}100%{opacity:0;transform:scale(1.035)}}@keyframes hubTurnReadyArrow{0%,100%{transform:translateY(-55%)}50%{transform:translate(5px,-55%)}}
.hub-turn button.is-ready::after {
  content:"PULSA AQUÍ";
  position:absolute;
  z-index:3;
  top:-10px;
  left:50%;
  min-width:104px;
  padding:4px 10px 3px;
  border:2px solid #fff3a0;
  border-radius:999px;
  color:#542600;
  background:linear-gradient(#ffe766,#ffae22);
  box-shadow:0 3px 0 #a94b08,0 5px 10px rgba(0,0,0,.38);
  font:900 clamp(.48rem,2vw,.62rem)/1 "Baloo 2",sans-serif;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:0 1px rgba(255,255,255,.55);
  transform:translateX(-50%);
  pointer-events:none;
}
.hub-turn button.is-disabled{filter:grayscale(.82) brightness(.55);opacity:.62;cursor:default}
.hub-turn button.is-disabled:active{transform:none}
.hub-turn button.is-energy-empty, .hub-turn button.is-contest {
  border-color:#ffb0b0;
  color:#fff;
  background:linear-gradient(145deg,#f0444f,#b81127 62%,#790d20);
  box-shadow:inset 0 4px rgba(255,255,255,.22),inset 0 -7px rgba(82,0,10,.28),0 6px #5f0918;
  text-shadow:0 2px #720b1d;
  cursor:pointer;
  animation:hubEnergyEmpty 2.1s ease-in-out infinite;
}
.hub-turn button.is-energy-empty small { color:#ffd8d8; font-weight:900; }
.hub-turn button.is-energy-empty strong { font-size:clamp(.9rem,4.3vw,1.3rem); }
@keyframes hubEnergyEmpty {
  0%,72%,100% { filter:none; transform:scale(1); }
  82% { filter:brightness(1.14); transform:scale(1.012); }
}
@media (max-width:360px) {
  .hub-hud { padding-inline:9px; }
  .hub-profile__avatar { width:49px; height:49px; }
  .hub-wallet__item { min-width:61px; padding-inline:7px; }
  .hub-section { padding-inline:10px; }
  .hub-mission { margin-inline:10px; }
  .hub-card { grid-template-columns:37px minmax(0,1fr); }
  .hub-card__icon { width:37px; height:37px; }
  .hub-card > b { display:none; }
}

/* Centro de gestión sobre una escena limpia: la interfaz y los textos siguen siendo HTML. */
.hub-screen { position:relative; isolation:isolate; display:flex; flex-direction:column; background:#07152f url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/game-hub-cadiz.png") center top / cover fixed no-repeat; }
.hub-screen.is-night { background-image:url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/game-hub-cadiz-night.png"); }
.hub-screen.hub-screen--contest { background-image:url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/game-hub-falla-night.png"); }
.hub-screen.hub-screen--contest.hub-screen--contest-eliminated { background-image:url("assets/game-hub-falla-night-grayscale.png"); background-blend-mode:normal; }
.hub-screen::before { content:""; position:fixed; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06) 0 36%,rgba(8,25,50,.08) 55%,rgba(4,11,30,.5) 100%); pointer-events:none; }
.hub-hud { order:0; margin:10px 10px 0; min-height:74px; padding:max(8px,env(safe-area-inset-top)) 10px 8px; border:2px solid #72dfff; border-radius:17px; background:linear-gradient(135deg,rgba(5,47,96,.96),rgba(13,31,71,.96)); box-shadow:inset 0 2px rgba(255,255,255,.16),0 5px 0 rgba(4,20,52,.75),0 8px 20px rgba(0,0,0,.3); }
.hub-profile__avatar { background:#e9f8ff; }
.hub-wallet__item { border-color:#76cbed; background:rgba(3,24,62,.85); box-shadow:inset 0 1px rgba(255,255,255,.14); }
.hub-hero { order:1; min-height:300px; overflow:visible; background:none; }
.hub-hero__logo { position:absolute; z-index:2; top:15px; left:16px; width:min(45%,230px); height:auto; filter:drop-shadow(0 5px 3px rgba(0,0,0,.48)); }
.hub-hero__shade { background:linear-gradient(180deg,transparent 50%,rgba(3,14,36,.75)); }
.hub-hero__content { z-index:2; padding:11px 13px; border:1px solid rgba(142,226,255,.5); border-radius:14px; background:rgba(4,26,61,.78); backdrop-filter:blur(7px); box-shadow:0 5px 15px rgba(0,0,0,.3); }
.hub-mission { order:2; margin-top:12px; border:5px solid #7b4d2d; border-radius:13px; color:#fff; background:linear-gradient(rgba(22,30,38,.95),rgba(12,19,25,.96)); box-shadow:inset 0 0 0 2px #c69558,0 7px 18px rgba(0,0,0,.38); text-align:center; }
.hub-mission__top { color:#ffd45e; }
.hub-mission__action { min-width:170px; min-height:43px; margin:12px auto 2px; padding:7px 24px; border:2px solid #ff9b91; border-radius:13px; color:#fff; background:linear-gradient(#f3534d,#c92732); box-shadow:inset 0 3px rgba(255,255,255,.23),inset 0 -5px rgba(0,0,0,.18),0 4px #77131b; font:800 1.05rem/1 "Baloo 2",sans-serif; text-shadow:0 2px rgba(0,0,0,.45); cursor:pointer; }
.hub-section { order:3; margin-top:13px; padding-top:15px; background:linear-gradient(180deg,rgba(4,13,35,.84),rgba(4,10,28,.94)); backdrop-filter:blur(8px); }
.hub-section__heading small { color:#8edfff; }
.hub-grid--primary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hub-card { min-height:105px; grid-template-columns:1fr auto; align-content:center; border:3px solid rgba(255,255,255,.45); border-radius:21px; background:var(--card-color); box-shadow:inset 0 4px rgba(255,255,255,.2),inset 0 -7px rgba(0,0,0,.18),0 6px 0 rgba(3,12,31,.72); text-align:center; }
.hub-card__icon { grid-column:1/-1; width:54px; height:54px; margin:auto; border:2px solid rgba(255,255,255,.42); background:rgba(5,22,52,.28); font-size:1.55rem; }
.hub-card__label { grid-column:1/-1; }
.hub-card strong { font-size:clamp(.82rem,3.8vw,1rem); text-shadow:0 2px rgba(0,0,0,.4); }
.hub-card small,.hub-card > b { display:none; }
.hub-card--cyan { --card-color:linear-gradient(145deg,#32c6e3,#127eaf); }
.hub-card--violet { --card-color:linear-gradient(145deg,#c064ed,#7831bc); }
.hub-card--blue { --card-color:linear-gradient(145deg,#50a9f0,#2572bd); }
.hub-card--gold { --card-color:linear-gradient(145deg,#f4c84d,#d4831e); }
.hub-section--secondary { order:4; margin-top:0; padding-bottom:18px; background:rgba(4,10,28,.94); }
.hub-shortcut { min-height:76px; border:2px solid rgba(255,255,255,.2); background:linear-gradient(#f5eee3,#d9cbb8); color:#172039; box-shadow:inset 0 2px #fff,0 4px rgba(0,0,0,.3); }
.hub-shortcut i { color:#fff; background:linear-gradient(145deg,#3377b8,#183c78); }
.hub-footer-space { order:5; height:96px; background:rgba(4,10,28,.94); }
.hub-turn { order:6; }
.hub-turn button { border-color:#fff0a5; color:#4c2d08; background:linear-gradient(#ffd95b,#f4a916); box-shadow:inset 0 4px rgba(255,255,255,.38),inset 0 -7px rgba(157,88,0,.22),0 6px #9b620a; text-shadow:0 1px rgba(255,255,255,.35); }
@media (max-height:740px) {
  .hub-hero { min-height:245px; }
}

/* El centro de gestión siempre cabe en una única pantalla del WebView. */
.hub-screen { height:100dvh; min-height:0; overflow:hidden; }
.hub-hud { flex:0 0 clamp(58px,9dvh,76px); min-height:0; margin-top:clamp(4px,1.2dvh,10px); }
.hub-profile__avatar { width:clamp(42px,6.2dvh,56px); height:clamp(42px,6.2dvh,56px); }
.hub-hero { flex:0 0 clamp(108px,20dvh,190px); min-height:0; }
.hub-hero__logo { top:clamp(7px,1.5dvh,15px); width:min(38%,190px); }
.hub-hero__content { right:clamp(9px,2vw,17px); bottom:clamp(6px,1.2dvh,15px); left:clamp(9px,2vw,17px); padding:clamp(7px,1.2dvh,11px) 11px; }
.hub-hero h1 { margin:2px 0 clamp(4px,.8dvh,9px); font-size:clamp(1.05rem,4.2dvh,1.7rem); }
.hub-mission { flex:0 0 auto; margin:clamp(5px,1dvh,10px) 10px 0; padding:clamp(7px,1.2dvh,13px); border-width:3px; }
.hub-mission h2 { margin:clamp(2px,.5dvh,6px) 0 1px; font-size:clamp(.86rem,2.2dvh,1.05rem); }
.hub-mission > p { font-size:clamp(.58rem,1.45dvh,.72rem); }
.hub-mission__progress { height:clamp(12px,2dvh,18px); margin-top:clamp(4px,.8dvh,9px); }
.hub-mission__progress span { line-height:clamp(12px,2dvh,18px); }
.hub-mission__action { min-height:clamp(32px,4.8dvh,41px); margin:clamp(4px,.7dvh,9px) auto 0; padding-block:4px; font-size:clamp(.82rem,2dvh,1rem); }
.hub-mission .hub-mission__status { min-height:12px; margin-top:clamp(3px,.6dvh,7px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-section { flex:0 0 auto; margin-top:clamp(4px,.8dvh,9px); padding:clamp(5px,.9dvh,10px) 10px 2px; }
.hub-section__heading { margin-bottom:clamp(4px,.7dvh,8px); }
.hub-section__heading h2 { font-size:clamp(.76rem,1.8dvh,.95rem); }
.hub-section__heading small,.hub-section__heading > span { font-size:clamp(.48rem,1.15dvh,.6rem); }
.hub-grid { gap:clamp(5px,.8dvh,8px); }
.hub-card { min-height:clamp(53px,8.5dvh,75px); padding:clamp(4px,.7dvh,8px); border-width:2px; border-radius:15px; }
.hub-card__icon { width:clamp(28px,4.5dvh,40px); height:clamp(28px,4.5dvh,40px); font-size:clamp(.9rem,2.5dvh,1.25rem); }
.hub-card strong { font-size:clamp(.62rem,1.65dvh,.82rem); }
.hub-section--secondary { margin-top:0; padding-top:clamp(5px,.8dvh,9px); padding-bottom:clamp(5px,.8dvh,10px); }
.hub-shortcut { min-height:clamp(50px,7.8dvh,68px); padding:clamp(4px,.7dvh,8px) 2px; gap:3px; }
.hub-shortcut i { width:clamp(26px,4.2dvh,36px); height:clamp(26px,4.2dvh,36px); font-size:clamp(.78rem,2.1dvh,1rem); }
.hub-footer-space { display:none; }
.hub-turn { position:static; flex:1 0 auto; display:flex; align-items:flex-end; padding:clamp(5px,.8dvh,9px) 10px max(7px,env(safe-area-inset-bottom)); background:rgba(4,10,28,.94); }
.hub-turn button { min-height:clamp(53px,8dvh,68px); }
.hub-turn button small { font-size:clamp(.48rem,1.1dvh,.57rem); }
.hub-turn button strong { font-size:clamp(1.02rem,3.2dvh,1.5rem); }

@media (max-height:650px) {
  .hub-hero__logo { width:31%; }
  .hub-mission > p:not(.hub-mission__status) { display:none; }
  .hub-mission__progress { margin-top:3px; }
}

.hub-screen { padding-bottom:clamp(68px,10dvh,88px); }
.hub-hero { flex-basis:clamp(88px,16dvh,155px); }
.hub-turn { position:absolute; z-index:10; right:0; bottom:0; left:0; }

.hub-grid--primary {
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,430px);
  margin-inline:auto;
}
.hub-card {
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:auto;
  aspect-ratio:190 / 153;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background-color:transparent;
  box-shadow:none;
  background-image:url("https://revoseo1.ams3.digitaloceanspaces.com/fallamania/assets/game-hub-menu.png");
  background-size:300% 200%;
  background-repeat:no-repeat;
}
.hub-card__icon,.hub-card > b { display:none; }
.hub-card__label {
  position:absolute;
  right:0;
  bottom:6%;
  left:0;
  display:block;
  height:13%;
  padding:0 3px;
  background:none;
  line-height:1;
  text-align:center;
}
.hub-card strong {
  display:block;
  font-size:clamp(.56rem,2.5vw,.78rem);
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}
.hub-card--costumes > .hub-card__label,
.hub-card--shows > .hub-card__label,
.hub-card--coac > .hub-card__label { height:16%; }
.hub-card small { display:none; }
.hub-card--cyan { background-position:0 0; }
.hub-card--violet { background-position:50% 0; }
.hub-card--blue { background-position:100% 0; }
.hub-card--costumes { background-position:0 100%; }
.hub-card--shows { background-position:50% 100%; }
.hub-card--coac { background-position:100% 100%; }
.hub-card:disabled {
  filter:grayscale(.82) brightness(.55);
  opacity:.62;
  cursor:default;
  pointer-events:none;
}
.hub-card:disabled .hub-card__label { opacity:.72; }
.hub-card.is-tutorial-target {
  z-index:2;
  overflow:visible;
  filter:drop-shadow(0 0 7px rgba(255,220,64,.95));
  animation:hubTutorialTarget 1.35s ease-in-out infinite;
}
.hub-card.is-tutorial-target::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:2%;
  border:3px solid #ffe467;
  border-radius:18%;
  box-shadow:0 0 0 3px rgba(255,109,44,.65),0 0 16px 5px rgba(255,218,51,.82);
  pointer-events:none;
  animation:hubTutorialTargetRing 1.35s ease-out infinite;
}
.hub-card.is-tutorial-target::after {
  content:"PULSA AQUÍ";
  position:absolute;
  z-index:3;
  top:-7px;
  left:50%;
  min-width:68%;
  padding:4px 8px 3px;
  border:2px solid #fff3a0;
  border-radius:999px;
  color:#542600;
  background:linear-gradient(#ffe766,#ffae22);
  box-shadow:0 3px 0 #a94b08,0 5px 10px rgba(0,0,0,.38);
  font:900 clamp(.48rem,2vw,.62rem)/1 "Baloo 2",sans-serif;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:0 1px rgba(255,255,255,.55);
  transform:translateX(-50%);
  pointer-events:none;
}
@keyframes hubTutorialTarget {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-4px) scale(1.035); }
}
@keyframes hubTutorialTargetRing {
  0%,100% { opacity:.72; transform:scale(.98); }
  50% { opacity:1; transform:scale(1.035); }
}

/* Controles principales anclados al pie del WebView. */
.hub-section {
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  max-width:680px;
  padding-bottom:70px;
  transform:translateX(-50%);
}
.hub-turn { height:70px; padding:5px 10px 10px; }
.hub-turn button { height:55px; min-height:0; }

/* Cabecera compacta del perfil. */
.hub-hud {
  flex-basis:clamp(60px,8.5dvh,70px);
  gap:8px;
  margin:8px 10px 0;
  padding:6px 8px;
  border:1px solid rgba(111,224,255,.72);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(6,42,83,.94),rgba(7,24,57,.94));
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.hub-profile { flex:1 1 auto; gap:8px; }
.hub-profile__avatar {
  width:clamp(44px,6dvh,52px);
  height:clamp(44px,6dvh,52px);
  border-radius:50%;
}
.hub-profile__copy small { color:#a8bad2; font-size:.5rem; letter-spacing:.16em; }
.hub-profile__copy strong { font-size:clamp(.9rem,3.2vw,1.08rem); line-height:1.05; }
.hub-profile__copy > span { margin-top:4px; font-size:clamp(.53rem,1.7vw,.64rem); }
.hub-wallet {
  display:flex;
  align-items:center;
  gap:0;
  padding:3px;
  border:1px solid rgba(111,224,255,.5);
  border-radius:12px;
  background:rgba(2,15,39,.62);
}
.hub-wallet__item {
  min-width:0;
  gap:5px;
  padding:5px 8px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:clamp(.72rem,2.4vw,.88rem);
}
.hub-wallet__item + .hub-wallet__item { border-left:1px solid rgba(111,224,255,.28); }
.hub-wallet__item img {
  flex:none;
  width:clamp(21px,3.6dvh,29px);
  height:clamp(21px,3.6dvh,29px);
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

@media (max-width:380px) {
  .hub-hud { margin-inline:6px; padding-inline:6px; }
  .hub-wallet__item { padding-inline:6px; }
}

.hub-hero__logo {
  top:50%;
  left:50%;
  width:min(68%,300px);
  transform:translate(-50%,-50%);
}

@media (max-height:650px) {
  .hub-hero__logo { width:min(54%,240px); }
}

/* Panel inferior de gestión. */
.hub-section {
  padding:0 0 70px;
  background:rgba(4,10,28,.96);
  backdrop-filter:none;
}
.hub-section__panel {
  padding:clamp(5px,.9dvh,10px) 10px 2px;
  background:linear-gradient(180deg,rgba(4,13,35,.88),rgba(4,10,28,.96));
  backdrop-filter:blur(8px);
}

/* Cabecera de perfil y recursos. */
.hub-hud {
  flex-basis:clamp(72px,10dvh,88px);
  gap:clamp(6px,1.5vw,12px);
  margin:5px;
  margin-top:-5px;
  padding:max(7px,env(safe-area-inset-top)) clamp(8px,2vw,14px) 7px;
  border:1px solid rgba(105,224,255,.68);
  border-radius:0 0 21px 21px;
  background:linear-gradient(100deg,rgba(8,47,91,.98),rgba(4,27,63,.98));
  box-shadow:inset 0 -1px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.32);
}
.hub-profile { flex:1 1 auto; gap:clamp(7px,1.5vw,11px); overflow:hidden; }
.hub-profile__avatar {
  width:clamp(48px,7.2dvh,62px);
  height:clamp(48px,7.2dvh,62px);
}
.hub-profile__copy small { color:#acbdd6; font-size:clamp(.46rem,1.3vw,.56rem); letter-spacing:.18em; }
.hub-profile__copy strong { font-size:clamp(.92rem,3.4vw,1.18rem); }
.hub-profile__copy > span { margin-top:5px; font-size:clamp(.5rem,1.65vw,.66rem); white-space:nowrap; }
.hub-message {
  position:relative;
  flex:none;
  width:auto;
  height:32px;
  padding:3px 8px;
  border:0;
  border-radius:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  outline:none;
  transition:opacity .2s ease,transform .15s ease;
}
.hub-message span { display:block; color:#d8f6ff; font:800 clamp(.62rem,1.65dvh,.82rem)/1 "Baloo 2",sans-serif; letter-spacing:.025em; white-space:nowrap; }
.hub-message:focus,.hub-message:focus-visible { outline:none; }
.hub-message img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.hub-message--section { width:auto; height:32px; margin:0; }
.hub-shortcuts { display:grid; flex:1 1 auto; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:0; padding:1px 0; border:1px solid rgba(72,201,236,.45); border-radius:8px; background:linear-gradient(145deg,rgba(10,49,91,.82),rgba(4,25,59,.9)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 0 rgba(1,12,31,.65); }
.hub-shortcuts .hub-message--section { height:27px; padding-block:2px; margin-right:0; }
.hub-shortcuts .hub-message--section + .hub-message--section { border-left:1px solid rgba(107,211,242,.35); }
.hub-message b {
  position:absolute;
  top:-5px;
  right:4px;
  display:grid;
  min-width:20px;
  height:20px;
  padding:0 4px;
  place-items:center;
  border:2px solid #ff9fb1;
  border-radius:999px;
  background:#e83258;
  box-shadow:0 2px 5px rgba(0,0,0,.42);
  font-size:.62rem;
}
.hub-message b[hidden] { display:none; }
.hub-message.has-pending-messages,
.hub-message.has-pending-missions,
.hub-message:has(b:not([hidden])) {
  z-index:1;
}
.hub-message.has-pending-messages span,
.hub-message.has-pending-missions span,
.hub-message:has(b:not([hidden])) span {
  color:#ffd76a;
  text-shadow:0 1px 0 #573608,0 0 8px rgba(255,196,62,.65);
  animation:hubMessagePending 1.35s ease-in-out infinite;
}
.hub-message.has-pending-messages b,
.hub-message.has-pending-missions b,
.hub-message:has(b:not([hidden])) b {
  animation:hubMessageBadgePending 1.35s ease-in-out infinite;
}
@keyframes hubMessagePending {
  0%,100% { filter:brightness(1); transform:scale(1); }
  50% { filter:brightness(1.32); transform:scale(1.07); }
}
@keyframes hubMessageBadgePending {
  0%,100% { filter:brightness(1); transform:scale(1); }
  50% { filter:brightness(1.2); transform:scale(1.12); }
}
.hub-wallet {
  min-height:clamp(44px,6.8dvh,58px);
  padding:4px 5px;
  border:2px solid rgba(58,193,229,.72);
  border-radius:18px;
  background:rgba(2,18,47,.68);
}
.hub-wallet__item { min-width:auto; gap:4px; padding:4px clamp(5px,1.4vw,10px); font-size:clamp(.72rem,2.6vw,1rem); }
.hub-wallet__item img { width:clamp(23px,3.8dvh,31px); height:clamp(23px,3.8dvh,31px); }
.hub-wallet__add {
  display:grid;
  flex:none;
  width:clamp(30px,4.5dvh,38px);
  height:clamp(30px,4.5dvh,38px);
  margin-left:3px;
  padding:0;
  place-items:center;
  border:1px solid #a3f1ff;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(#62e5ff,#1599d3);
  box-shadow:inset 0 2px rgba(255,255,255,.36),0 3px 0 #075783;
  font:800 clamp(1.15rem,3.8dvh,1.55rem)/1 "Baloo 2",sans-serif;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.hub-wallet__add:focus,.hub-wallet__add:focus-visible { outline:none; }
.hub-message:active,.hub-wallet__add:active { transform:translateY(2px); }
.hub-message:active { opacity:.72; box-shadow:none; }

@media (max-width:380px) {
  .hub-hud { gap:4px; padding-inline:6px; }
  .hub-profile { gap:6px; }
  .hub-profile__avatar { width:44px; height:44px; }
  .hub-message { width:auto; height:30px; padding-inline:5px; }
  .hub-message b { min-width:17px; height:17px; border-width:1px; font-size:.52rem; }
  .hub-wallet { padding-inline:3px; border-radius:15px; }
  .hub-wallet__item { padding-inline:4px; }
  .hub-wallet__item img { width:21px; height:21px; }
  .hub-wallet__add { width:28px; height:28px; }
}

/* El escenario ocupa exactamente el hueco entre el HUD y el panel de gestión. */
.hub-screen .hub-hero {
  position:absolute;
  z-index:1;
  top:var(--hub-hero-top,80px);
  right:0;
  bottom:var(--hub-hero-bottom,420px);
  left:0;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
.hub-screen .hub-hero__logo {
  top:50%;
  left:50%;
  width:min(58%,260px);
  transform:translate(-50%,-50%);
  transition:opacity .22s ease,transform .22s ease;
}
.hub-hero__next-week {
  position:absolute;
  z-index:2;
  top:calc(50% + clamp(36px,7vw,56px));
  left:50%;
  width:max-content;
  max-width:86%;
  margin:0;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  color:#fff;
  background:rgba(5,23,50,.72);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  font-size:clamp(.55rem,2.4vw,.72rem);
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.7);
  transform:translateX(-50%);
  transition:opacity .22s ease,transform .22s ease;
}
.hub-screen .hub-hero.has-tutorial .hub-hero__logo {
  opacity:0;
  transform:translate(-50%,-50%) scale(.9);
}
.hub-screen .hub-hero.has-tutorial .hub-hero__next-week,
.hub-screen .hub-hero.has-reward-packs .hub-hero__next-week {
  opacity:0;
  visibility:hidden;
}
.hub-hero.has-reward-packs .hub-hero__logo { opacity:0; visibility:hidden; }
.hub-screen .hub-hero.has-reward-packs { pointer-events:auto; }
.hub-reward-packs {
  position:absolute;
  z-index:6;
  inset:8% 5% 5%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,4vw,24px);
  pointer-events:auto;
}
.hub-reward-packs[hidden] { display:none; }
.hub-reward-packs button {
  position:relative;
  display:grid;
  align-content:end;
  justify-items:center;
  width:min(38%,180px);
  padding:5px 5px 7px;
  overflow:hidden;
  border:2px solid #d8efff;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(155deg,rgba(37,79,126,.94),rgba(7,22,51,.96));
  box-shadow:inset 0 2px rgba(255,255,255,.18),inset 0 -5px rgba(0,0,0,.2),0 4px 0 #07152f,0 7px 16px rgba(0,0,0,.42),0 0 13px rgba(86,207,255,.42);
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.hub-reward-packs button::before { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.16); border-radius:11px; pointer-events:none; }
.hub-reward-packs button[data-pack-type="bronze"] { border-color:#e7a16c; box-shadow:inset 0 2px rgba(255,255,255,.18),inset 0 -5px rgba(0,0,0,.2),0 4px 0 #512711,0 7px 16px rgba(0,0,0,.42),0 0 14px rgba(226,119,53,.48); }
.hub-reward-packs button[data-pack-type="silver"] { border-color:#d9edff; }
.hub-reward-packs button[data-pack-type="gold"] { border-color:#ffe56f; box-shadow:inset 0 2px rgba(255,255,255,.2),inset 0 -5px rgba(0,0,0,.2),0 4px 0 #715006,0 7px 16px rgba(0,0,0,.42),0 0 15px rgba(255,211,54,.55); }
.hub-reward-packs button[data-pack-type="legend"] { border-color:#cb85ff; box-shadow:inset 0 2px rgba(255,255,255,.2),inset 0 -5px rgba(0,0,0,.2),0 4px 0 #42116b,0 7px 16px rgba(0,0,0,.42),0 0 16px rgba(177,75,255,.58); }
/* Match the gold highlight and pulse of missions ready to collect. */
.hub-reward-packs button[data-pack-type] {
  border-color:#fff2a0;
  color:#321900;
  background:linear-gradient(155deg,#ffe978,#f4b82e 58%,#c7790c);
  box-shadow:inset 0 2px rgba(255,255,255,.62),inset 0 -6px rgba(131,68,0,.18),0 4px 0 #754108,0 0 20px rgba(255,199,47,.62);
  animation:qualityMissionReadyPulse 1.65s ease-in-out infinite;
}
.hub-reward-packs img { position:relative; z-index:1; display:block; width:94%; max-height:210px; object-fit:contain; filter:drop-shadow(0 6px 5px rgba(0,0,0,.48)); animation:hubRewardPack 1.8s ease-in-out infinite alternate; }
.hub-reward-packs button:nth-child(even) img { animation-delay:-.9s; }
.hub-reward-packs strong {
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  margin:4px 0 0;
  padding:7px 2px 6px;
  border:1px solid rgba(77,37,0,.48);
  border-radius:8px;
  color:#fff8d0;
  background:#683500;
  box-shadow:inset 0 1px rgba(255,255,255,.16);
  font-size:clamp(.5rem,2.2vw,.68rem);
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.hub-reward-packs button:focus-visible { outline:3px solid #fff3a0; outline-offset:4px; }
.hub-reward-packs button:hover strong { filter:brightness(1.12); }
.hub-reward-packs button:active strong { transform:translateY(2px); box-shadow:inset 0 1px rgba(255,255,255,.45); }
.hub-hero.has-tutorial.has-reward-packs .hub-reward-packs {
  top:clamp(8px,2vh,16px);
  right:auto;
  bottom:36%;
  left:clamp(10px,3vw,22px);
  width:min(43%,270px);
  justify-content:flex-start;
  gap:clamp(4px,1.5vw,10px);
}
.hub-hero.has-tutorial.has-reward-packs .hub-reward-packs button {
  width:min(46%,118px);
}
.hub-hero.has-tutorial.has-reward-packs .hub-reward-packs img { max-height:125px; }
@keyframes hubRewardPack { from { transform:translateY(3px) rotate(-1.5deg); } to { transform:translateY(-5px) rotate(1.5deg); } }
.hub-tutorial {
  position:absolute;
  z-index:4;
  inset:0;
}
.hub-tutorial[hidden] { display:none; }
.hub-tutorial__character {
  position:absolute;
  z-index:4;
  top:-4%;
  right:auto;
  bottom:auto;
  left:82%;
  width:120%;
  height:120%;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  will-change:transform;
  filter:none;
  animation:hubGuideBreath 3.2s ease-in-out infinite;
}
.hub-tutorial__dialog {
  position:absolute;
  z-index:5;
  right:auto;
  bottom:7%;
  left:4%;
  width:auto;
  max-width:63%;
}
.hub-tutorial__speech {
  position:relative;
  min-height:0;
  padding:8px 11px;
  border:2px solid #19345d;
  border-radius:15px;
  color:#14223a;
  background:linear-gradient(#fff,#eef5fb);
  box-shadow:0 4px 0 rgba(6,18,42,.45),0 7px 16px rgba(0,0,0,.28);
  text-align:center;
}
@media (prefers-reduced-motion:reduce) {
  .hub-tutorial__character,.hub-reward-packs img,.hub-reward-packs button[data-pack-type],.hub-turn button.is-ready,.hub-turn button.is-ready::before,.hub-turn button.is-ready > span,.hub-turn button.is-energy-empty,.hub-card.is-tutorial-target,.hub-card.is-tutorial-target::before { animation:none; }
}
.hub-tutorial__speech::before {
  content:"";
  position:absolute;
  top:50%;
  right:-12px;
  width:14px;
  height:18px;
  border:0;
  background:#eef5fb;
  clip-path:polygon(0 0,100% 50%,0 100%);
  filter:drop-shadow(2px 0 0 #19345d);
  transform:translateY(-50%);
}
.hub-tutorial__speech p {
  margin:0;
  font-size:clamp(.78rem,3.2vw,1rem);
  font-weight:800;
  line-height:1.18;
}
.hub-energy { position:relative; z-index:12; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; width:auto; margin:0 10px; padding:7px 0 5px; border:0; background:transparent; box-shadow:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.hub-energy:focus,.hub-energy:focus-visible { outline:none; }
.hub-energy__tooltip { position:absolute; z-index:40; bottom:calc(100% + 10px); left:50%; display:grid; width:min(310px,calc(100vw - 32px)); padding:10px 12px; gap:2px; border:1px solid #46536a; border-radius:10px; color:#fff; background:rgba(5,9,18,.97); box-shadow:0 8px 22px rgba(0,0,0,.58); text-align:left; transform:translateX(-50%); pointer-events:none; }
.hub-energy__tooltip[hidden] { display:none; }
.hub-energy__tooltip::after { content:""; position:absolute; top:100%; left:50%; width:11px; height:11px; border-right:1px solid #46536a; border-bottom:1px solid #46536a; background:#080c17; transform:translate(-50%,-6px) rotate(45deg); }
.hub-energy__tooltip > strong { color:#70ddff; font-size:.55rem; letter-spacing:.09em; }.hub-energy__tooltip > span { color:#d9e1ec; font-size:.62rem; font-weight:700; line-height:1.25; }
.hub-turn__tooltip > strong { color:#ff6678; }
.hub-energy > strong { color:#8de5ff; font-size:clamp(.48rem,2vw,.62rem); letter-spacing:.08em; }
.hub-energy > b { min-width:28px; color:#70ddff; font-size:clamp(.44rem,1.8vw,.56rem); text-align:right; }
.hub-energy__segments { display:grid; min-width:0; grid-template-columns:repeat(20,minmax(2px,1fr)); gap:2px; }
.hub-energy__segments i { display:block; min-width:2px; height:10px; border:1px solid rgba(255,255,255,.18); border-radius:2px; background:#050a12; box-shadow:inset 0 1px 2px rgba(0,0,0,.72); }
.hub-energy__segments i.is-full { border-color:#6ee8ff; background:linear-gradient(#63eaff,#149bd2); box-shadow:inset 0 1px rgba(255,255,255,.65),0 0 5px rgba(31,198,255,.75); }
@keyframes hubGuideEnter {
  from { opacity:0; transform:translateY(18px) scale(.96); }
  to { opacity:1; transform:none; }
}
@keyframes hubGuideBreath {
  0%,100% { transform:translateX(-50%) scaleX(1) scaleY(1); }
  45%,55% { transform:translateX(-50%) scaleX(1.012) scaleY(.982); }
}
.hub-screen .hub-section { z-index:3; }

/* Aire inferior y zona segura para el indicador de inicio de iOS/WebView. */
.hub-screen {
  --hub-bottom-safe:env(safe-area-inset-bottom,0px);
  padding-bottom:calc(78px + var(--hub-bottom-safe));
}
.hub-screen .hub-section { padding-bottom:calc(78px + var(--hub-bottom-safe)); }
.hub-turn {
  height:calc(78px + var(--hub-bottom-safe));
  padding:5px 10px calc(16px + var(--hub-bottom-safe));
}

/* Presentación compacta del grupo cuando el siguiente paso es ensayar. */
.hub-tutorial__character[hidden],.hub-tutorial__formation[hidden],.hub-tutorial__rehearsal-title[hidden],.hub-tutorial__formation-identity[hidden] { display:none; }
.hub-tutorial__rehearsal-title {
  position:absolute;
  z-index:0;
  top:2%;
  left:3%;
  width:auto;
  max-width:54%;
  height:auto;
  max-height:25%;
  object-fit:contain;
  transform-origin:18% 55%;
  pointer-events:none;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.42));
  animation:
    hubRehearsalTitleDrop .9s cubic-bezier(.2,.85,.28,1.15) both,
    hubRehearsalTitleClamor 1.8s .95s ease-in-out infinite;
}
@keyframes hubRehearsalTitleDrop {
  0% { top:-30%; opacity:0; }
  68% { top:4%; opacity:1; }
  84% { top:1%; }
  100% { top:2%; opacity:1; }
}
@keyframes hubRehearsalTitleClamor {
  0%,100% { transform:rotate(-1deg) scale(1); }
  18% { transform:rotate(1.2deg) scale(1.025); }
  34% { transform:rotate(-.6deg) scale(.99); }
  52% { transform:rotate(1deg) scale(1.018); }
  70% { transform:rotate(-1.1deg) scale(1.005); }
  84% { transform:rotate(.55deg) scale(1.015); }
}
.hub-tutorial__formation {
  position:absolute;
  z-index:1;
  right:clamp(2px,3vw,20px);
  bottom:15%;
  display:grid;
  width:min(58%,360px);
  height:min(75%,330px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  align-items:end;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.45));
  animation:hubGuideEnter .4s cubic-bezier(.2,.8,.25,1.15) both;
}
.hub-tutorial__formation img {
  width:135%;
  height:135%;
  margin-left:-17.5%;
  object-fit:contain;
  object-position:center bottom;
  transform-origin:center bottom;
  animation:hubGuideBreath 3.2s ease-in-out infinite;
}
.hub-tutorial__formation img:nth-child(2n) { animation-delay:-1.1s; }
.hub-tutorial__formation img:nth-child(3n) { animation-delay:-2.1s; }
.hub-turn button.is-rehearsal {
  border-color:#caffcf;
  color:#083c21;
  background:linear-gradient(#75eb8c,#2ebd63);
  box-shadow:inset 0 4px rgba(255,255,255,.38),inset 0 -7px rgba(13,105,47,.24),0 6px #176c38;
  text-shadow:0 1px rgba(255,255,255,.38);
}
.hub-turn button.is-rehearsal strong { font-size:clamp(.9rem,4.5vw,1.3rem); }
@media (prefers-reduced-motion:reduce) {
  .hub-tutorial__formation,.hub-tutorial__formation img { animation:none; }
  .hub-tutorial__rehearsal-title { animation:none; }
}

/* La escena de ensayo usa la formación titular y sus posiciones reales. */
.hub-tutorial.has-formation .hub-tutorial__dialog { display:none; }
.hub-tutorial__formation-stage { display:none; }
.hub-tutorial.has-formation .hub-tutorial__formation-stage {
  position:absolute;
  inset-inline:0;
  top:50%;
  display:block;
  width:100%;
  height:min(100%,clamp(220px,47.111vw,360px));
  transform:translateY(-50%);
}
.hub-tutorial.has-formation .hub-tutorial__formation {
  inset:0 2% 10px;
  display:block;
  width:auto;
  height:auto;
  filter:none;
}
.hub-tutorial.has-formation .hub-tutorial__formation img {
  position:absolute;
  z-index:var(--z);
  top:var(--y);
  left:50%;
  width:28%;
  height:64%;
  margin:0;
  object-fit:contain;
  object-position:center bottom;
  transform:translateX(var(--offset));
  animation:hubFormationBreath 3.2s ease-in-out infinite;
}
.hub-tutorial.has-formation .hub-tutorial__formation img.is-empty { opacity:.35; filter:grayscale(1); }
.hub-tutorial__formation-identity {
  position:absolute;
  z-index:4;
  right:auto;
  bottom:10px;
  left:10px;
  display:block;
  width:max-content;
  max-width:88%;
  margin:0;
  padding:5px 15px 3px;
  overflow:hidden;
  border:1px solid rgba(255,224,117,.75);
  border-radius:999px;
  color:#fff3bd;
  background:rgba(15,18,45,.86);
  box-shadow:0 4px 9px rgba(0,0,0,.42);
  font:800 clamp(.62rem,1.65dvh,.82rem)/1 "Baloo 2",sans-serif;
  letter-spacing:.025em;
  text-transform:uppercase;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
@keyframes hubFormationBreath {
  0%,100% { transform:translateX(var(--offset)) scaleX(1) scaleY(1); }
  45%,55% { transform:translateX(var(--offset)) scaleX(1.012) scaleY(.982); }
}
@media (prefers-reduced-motion:reduce) {
  .hub-tutorial.has-formation .hub-tutorial__formation img { animation:none; }
}

/* La fecha de temporada funciona como información principal de la cabecera. */
.hub-profile__copy > .hub-profile__date {
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  color:#fff;
  font-size:clamp(.66rem,2.25vw,.82rem);
  font-weight:900;
  line-height:1;
  letter-spacing:.025em;
  text-shadow:0 2px 3px rgba(0,0,0,.42);
}
.hub-profile__date > span { display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.hub-profile__calendar {
  position:relative;
  flex:none;
  width:15px;
  height:14px;
  border:1.5px solid #9cecff;
  border-radius:3px;
  background:linear-gradient(#42cdef 0 34%,#eefcff 34%);
  box-shadow:0 2px 3px rgba(0,0,0,.32);
}
.hub-profile__calendar::before {
  content:"";
  position:absolute;
  top:-3px;
  left:2px;
  width:2px;
  height:4px;
  border-radius:2px;
  background:#dffaff;
  box-shadow:6px 0 #dffaff;
}
.hub-profile__calendar::after {
  content:"";
  position:absolute;
  top:7px;
  left:2px;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#209ac1;
  box-shadow:4px 0 #209ac1,8px 0 #209ac1;
}

/* La propuesta ocupa el escenario, sin mezclarla con el tutorial o los sobres. */
.hub-screen .hub-hero.has-sponsor-offer { pointer-events:auto; }
.hub-hero.has-sponsor-offer > :not(.hub-sponsor) { display:none !important; }
.hub-sponsor[hidden] { display:none; }
.hub-sponsor.is-awaiting-entry { opacity:0; pointer-events:none; }
.hub-sponsor.is-entering { animation:hubSponsorDrop .75s both; }
@keyframes hubSponsorDrop {
  0% { transform:translateY(calc(-100% - 24px)); opacity:0; animation-timing-function:cubic-bezier(.45,0,.8,.5); }
  62% { transform:translateY(7px); opacity:1; animation-timing-function:ease-out; }
  80% { transform:translateY(-5px); animation-timing-function:ease-in-out; }
  100% { transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .hub-sponsor.is-entering { animation:none; }
}
.hub-sponsor {
  position:absolute; inset:8px 12px; display:flex; flex-direction:column;
  max-width:440px; margin:auto; overflow:hidden; text-align:center;
  border:2px solid #7bd9ed; border-radius:20px;
  background:linear-gradient(155deg,rgba(15,48,79,.97),rgba(6,18,42,.97));
  box-shadow:inset 0 2px 0 #ffffff1f,0 5px 14px #0005; color:#fff;
}
.hub-sponsor__body { min-height:0; flex:1; overflow-y:auto; padding:9px 14px 4px; scrollbar-width:thin; align-content:center; }
.hub-sponsor__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); align-items:center; gap:12px; }
.hub-sponsor__details { min-width:0; text-align:left; overflow-wrap:break-word; }
.hub-sponsor__eyebrow { display:block; color:#88e4ff; font-size:.68rem; letter-spacing:.08em; }
.hub-sponsor__logo { display:block; width:100%; height:auto; max-height:150px; object-fit:contain; margin:0; }
.hub-sponsor h2 { margin:4px 0 0; color:#fff1c1; font-size:clamp(1rem,4.5vw,1.3rem); line-height:1.1; }
.hub-sponsor__slogan { margin:5px 0; color:#b9d5ed; font-size:.72rem; line-height:1.25; }
.hub-sponsor__copy { max-width:360px; margin:6px auto; font-size:.8rem; line-height:1.25; }
.hub-sponsor__copy strong { color:#8eeaff; }
.hub-sponsor__payment { display:inline-flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; align-self:center; box-sizing:border-box; width:fit-content; max-width:calc(100% - 24px); padding:5px 12px; margin:3px auto 5px; border:2px solid #e4bb61; border-radius:10px; background:linear-gradient(145deg,#443018,#201b29); box-shadow:inset 0 1px #fff0ad44,inset 0 -3px #0003,0 3px 0 #614017,0 0 10px #ffcb4522; text-align:center; }
.hub-sponsor__payment > span { display:block; white-space:nowrap; color:#ffe5a4; font-size:.5rem; font-weight:900; letter-spacing:.04em; line-height:1; }
.hub-sponsor__payment > strong { display:flex; align-items:center; justify-content:center; gap:7px; margin:0; white-space:nowrap; color:#ffda64; font-size:1.35rem; line-height:1.05; text-shadow:0 2px 0 #6c400f; }
.hub-sponsor__payment img { width:21px; height:21px; object-fit:contain; }
.hub-sponsor__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex-shrink:0; padding:8px 12px 12px; background:#091c36; }
.hub-sponsor__actions button {
  --sponsor-button-edge:#ffafb5; --sponsor-button-top:#fa6c73;
  --sponsor-button-bottom:#d82d45; --sponsor-button-base:#86172d;
  min-height:48px; padding:9px 7px; border:3px solid var(--sponsor-button-edge);
  border-radius:16px; color:#fff;
  background:linear-gradient(var(--sponsor-button-top),var(--sponsor-button-bottom));
  box-shadow:inset 0 3px rgba(255,255,255,.4),inset 0 -6px rgba(0,0,0,.12),0 5px 0 var(--sponsor-button-base);
  font:900 clamp(.85rem,3.4vw,1.05rem)/1 "Baloo 2",sans-serif;
  text-shadow:0 2px 1px rgba(65,10,22,.55); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hub-sponsor__actions [data-sponsor-decision="accept"] {
  --sponsor-button-edge:#caffcf; --sponsor-button-top:#75eb8c;
  --sponsor-button-bottom:#2ebd63; --sponsor-button-base:#176c38;
  color:#083c21; text-shadow:0 1px rgba(255,255,255,.38);
}
.hub-sponsor__actions button:active:not(:disabled) {
  transform:translateY(3px);
  box-shadow:inset 0 3px rgba(255,255,255,.3),inset 0 -3px rgba(0,0,0,.12),0 2px 0 var(--sponsor-button-base);
}
.hub-sponsor__actions button:disabled { opacity:.55; cursor:wait; }
@media (max-height:740px) {
  .hub-sponsor { inset:4px 12px; }
  .hub-sponsor__body { padding:4px 10px 2px; }
  .hub-sponsor__eyebrow { font-size:.58rem; }
  .hub-sponsor__intro { grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px; }
  .hub-sponsor__logo { max-height:85px; }
  .hub-sponsor h2 { font-size:.9rem; }
  .hub-sponsor__slogan { margin:3px 0 0; font-size:.65rem; line-height:1.15; }
  .hub-sponsor__copy { margin:3px auto; font-size:.66rem; line-height:1.15; }
  .hub-sponsor__payment > strong { font-size:1.15rem; }
  .hub-sponsor__payment img { width:18px; height:18px; }
  .hub-sponsor__actions { padding:4px 10px 8px; }
  .hub-sponsor__actions button { min-height:42px; padding-block:7px; }
}

/* Patrocinador de la temporada, junto al cartel de ensayo. */
.hub-active-sponsor { position:absolute; top:3%; right:3%; z-index:20; width:clamp(54px,17vw,82px); pointer-events:auto; }
.hub-active-sponsor[hidden] { display:none; }
.hub-active-sponsor > button { display:block; width:100%; aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer; }
.hub-active-sponsor > button > img { display:block; width:100%; height:100%; object-fit:contain; }
.hub-active-sponsor .hub-energy__tooltip { top:calc(100% + 10px); bottom:auto; left:auto; right:0; transform:none; width:min(240px,75vw); }
.hub-active-sponsor .hub-energy__tooltip::after { top:auto; bottom:100%; left:auto; right:22px; transform:translateY(6px) rotate(225deg); }
.hub-active-sponsor .hub-energy__tooltip > span { overflow-wrap:anywhere; }

.hub-sponsor__payment > small { grid-column:1/-1; color:#b9f5ff; font-size:.6rem; font-weight:800; text-align:center; }

.hub-screen .hub-hero.has-local-offer{pointer-events:auto}
.hub-hero.has-local-offer > :not(.hub-local-offer){display:none!important}

.hub-local-offer__scene{position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden;border-radius:17px 17px 0 0}
.hub-local-offer__preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hub-local-offer__member{position:absolute;left:-3%;bottom:0;width:51%;height:94%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 2px #0005)}
.hub-local-offer .hub-local-offer__bubble{right:10px;left:auto;bottom:12px;width:59%;max-width:63%;box-sizing:border-box;text-align:left}
.hub-local-offer .hub-local-offer__bubble::before{left:-12px;right:auto;clip-path:polygon(100% 0,0 50%,100% 100%);filter:drop-shadow(-2px 0 0 #19345d)}
.hub-local-offer__bubble strong{text-align:left;position:relative;display:block;color:#775015;font-size:clamp(.62rem,2.7vw,.8rem);text-transform:uppercase;overflow-wrap:anywhere}
.hub-local-offer__bubble p{position:relative;margin:4px 0 0;font:inherit;line-height:inherit;text-align:left}
.hub-local-offer__error{margin:6px 12px;color:#ffd5d5;font-size:.7rem}
.hub-local-offer .hub-sponsor__actions{flex-shrink:0;padding-top:10px}
.hub-sponsor__actions [data-local-decision="accept"]{--sponsor-button-edge:#caffcf;--sponsor-button-top:#75eb8c;--sponsor-button-bottom:#2ebd63;--sponsor-button-base:#176c38}
@media(max-height:700px){.hub-local-offer .hub-local-offer__bubble{bottom:6px;right:6px}}

/* Profundidad bajo la formación, en ensayo y fases del concurso. */
.hub-tutorial.has-formation::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:45% 0 0;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.62) 100%);
  pointer-events:none;
}

.hub-powerup-badge{position:absolute;z-index:5;top:7%;right:6%;display:flex;align-items:center;justify-content:center;gap:3px;min-width:30px;padding:3px 6px;border:1px solid #ffe592;border-radius:9px;background:linear-gradient(#25385a,#101a31);box-shadow:0 3px 0 #070d1b,0 2px 8px #0008;color:#ffe579;font:900 13px/1 "Baloo 2",sans-serif;pointer-events:none}
.hub-powerup-badge img{display:block;width:14px;height:20px;object-fit:contain}

/* Collection novelty badges on incoming offers. */
.hub-offer-new,
.hub-sponsor__collection.is-new.hub-offer-new {
  position:absolute;top:12px;right:12px;z-index:3;transform:rotate(9deg);
  display:inline-block;width:max-content;max-width:100%;margin:0;padding:5px 10px;
  border:1px solid #fff1a6;border-radius:7px;
  background:linear-gradient(180deg,#ffe779,#ffb52c);color:#493005;
  box-shadow:0 2px 0 #a26112,0 0 12px #ffce5540;
  font-size:.65rem;font-weight:950;line-height:1.1;letter-spacing:.04em;text-shadow:none;
}
.hub-offer-new[hidden] { display:none; }

.hub-turn button.is-contest { animation:none; }
.hub-turn button.is-contest small { color:#ffd8d8; }
.hub-turn button.is-contest.is-verdict {
  border-color:#e8c2ff;
  background:linear-gradient(145deg,#a855e7,#7022b8 58%,#42116f);
  box-shadow:inset 0 4px rgba(255,255,255,.24),inset 0 -7px rgba(39,4,68,.3),0 6px #2d0a4d,0 0 18px rgba(178,82,242,.32);
  text-shadow:0 2px #351052;
}
.hub-turn button.is-contest.is-verdict small { color:#f2dcff; }

.hub-energy.is-recharged .hub-energy__segments i.is-full{animation:energyRechargeGlow .7s ease-in-out 5}
.hub-energy.is-recharged>strong,.hub-energy.is-recharged>b{animation:energyRechargeTextGlow .7s ease-in-out 5}
.hub-energy__gain{position:absolute;right:5px;top:-20px;color:#b9ffb2;font-size:15px;font-weight:900;text-shadow:0 0 8px #41ff75;pointer-events:none}
.hub-energy__gain[hidden]{display:none}
@keyframes energyRechargeGlow{50%{filter:brightness(1.6);box-shadow:inset 0 1px #ffffffaa,0 0 10px #6ee8ffcc}}
@keyframes energyRechargeTextGlow{50%{color:#d3fff6;text-shadow:0 0 9px #6ee8ff}}
@media(prefers-reduced-motion:reduce){.hub-energy.is-recharged .hub-energy__segments i.is-full{animation:none;box-shadow:inset 0 1px #ffffffaa,0 0 6px #6ee8ff99}.hub-energy.is-recharged>strong,.hub-energy.is-recharged>b{animation:none;color:#d3fff6}}

.hub-local-offer__scene .hub-local-offer__new { z-index:6; }