/* VoicerInn Hub Premium — four fully illustrated cards, same routing via data-hub.
   Based on the approved VoicerInn Hub mockup; no new screen or back-end. */
.hub-panel {
  container: vi-hub / inline-size;
  margin:0 6px 12px;
  padding:12px 12px 14px;
  border-radius:17px;
  border:1px solid rgba(93,119,186,.34);
  background:linear-gradient(165deg,#0d1832 0%,#0b152c 75%,#111831 100%);
  box-shadow:0 10px 28px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.035);
}
body[data-theme-mode] .hub-panel {
  background:linear-gradient(165deg,#0d1832,#0b152c 75%,#111831)!important;
  border-color:rgba(93,119,186,.34)!important;
}
.hub-panel .hub-panel-head,
body[data-theme-mode] .hub-panel .hub-panel-head {
  padding:1px 1px 0!important;
  margin:0 0 11px!important;
  border:0!important;
  background:transparent!important;
}
.hub-panel .hub-panel-head span,
body[data-theme-mode] .hub-panel .hub-panel-head span {
  color:#f2f7ff!important;font-size:14px;font-weight:800;
}
.hub-panel .hub-grid {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
.hub-panel .hub-card,
body[data-theme-mode] .hub-panel .hub-card {
  position:relative; isolation:isolate; overflow:hidden;
  min-width:0; min-height:130px; padding:13px 12px 11px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  gap:10px; text-align:left; cursor:pointer;
  border-radius:14px;
  color:#fff!important;
  border:1px solid var(--vi-hub-border)!important;
  background:radial-gradient(ellipse at 92% 14%,var(--vi-hub-glow),transparent 62%),
             linear-gradient(115deg,var(--vi-hub-from),var(--vi-hub-to))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 2px 11px rgba(0,0,0,.19)!important;
  transform:translateZ(0);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hub-panel .hub-card::before {
  content:""; position:absolute; top:0; right:-2px; bottom:0; width:78%;
  background:var(--vi-hub-art) right center / auto 106% no-repeat;
  z-index:-2; pointer-events:none;
}
.hub-panel .hub-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(5,13,28,.86),rgba(7,13,31,.54) 40%,rgba(7,13,31,.05) 78%);
  z-index:-1; pointer-events:none;
}
.hub-panel .hub-card-copy {display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;max-width:87%;}
.hub-panel .hub-card strong,
body[data-theme-mode] .hub-panel .hub-card strong {
  display:block;max-width:100%;font-size:clamp(12px,1.05vw,15px);
  font-weight:800;line-height:1.13;color:#fff!important;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hub-panel .hub-card small,
body[data-theme-mode] .hub-panel .hub-card small {
  display:block;max-width:150px;font-size:10px;line-height:1.25;
  font-weight:500;color:#c3d9ff!important;
  text-shadow:0 1px 5px rgba(0,0,0,.58);
}
.hub-panel .hub-card-arrow {
  position:relative; z-index:1; flex:0 0 auto;
  display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--vi-hub-border);
  background:var(--vi-hub-arrow-bg);color:var(--vi-hub-accent);
  font-size:22px;font-family:Arial,sans-serif;font-weight:400;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.hub-panel .hub-card-party {
  --vi-hub-border:#278dfb;--vi-hub-accent:#51d7ff;
  --vi-hub-from:#061a3e;--vi-hub-to:#102657;--vi-hub-glow:rgba(0,116,255,.42);
  --vi-hub-arrow-bg:rgba(18,70,147,.60);--vi-hub-art:url("vi-hub-party.webp");
}
.hub-panel .hub-card-story {
  --vi-hub-border:#9350ed;--vi-hub-accent:#d4a0ff;
  --vi-hub-from:#220d4d;--vi-hub-to:#261453;--vi-hub-glow:rgba(129,45,235,.48);
  --vi-hub-arrow-bg:rgba(91,33,154,.49);--vi-hub-art:url("vi-hub-story.webp");
}
.hub-panel .hub-card-games {
  --vi-hub-border:#ea399e;--vi-hub-accent:#ff90d8;
  --vi-hub-from:#3b0a30;--vi-hub-to:#3e144b;--vi-hub-glow:rgba(244,29,119,.42);
  --vi-hub-arrow-bg:rgba(159,30,106,.45);--vi-hub-art:url("vi-hub-games.webp");
}
.hub-panel .hub-card-community {
  --vi-hub-border:#16c6a9;--vi-hub-accent:#5cfce2;
  --vi-hub-from:#023a3d;--vi-hub-to:#043c3d;--vi-hub-glow:rgba(0,202,155,.34);
  --vi-hub-arrow-bg:rgba(0,121,94,.43);--vi-hub-art:url("vi-hub-community.webp");
}
.hub-panel .hub-card:hover,
body[data-theme-mode] .hub-panel .hub-card:hover {
  transform:translateY(-2px);
  border-color:var(--vi-hub-accent)!important;
  box-shadow:0 0 0 1px var(--vi-hub-border),0 8px 24px rgba(0,0,0,.38)!important;
}
.hub-panel .hub-card.vi352-selected,
.hub-panel .hub-card:focus-visible {
  outline:2px solid var(--vi-hub-accent)!important;
  outline-offset:1px;
}
@container vi-hub (max-width:430px) {
  .hub-grid .hub-card {min-height:118px;padding:12px 10px 10px;}
  .hub-card .hub-card-copy strong {font-size:12px;}
  .hub-card .hub-card-copy small {font-size:10px;max-width:120px;}
  .hub-card .hub-card-arrow {width:27px;height:27px;font-size:19px;}
}
@container vi-hub (max-width:290px) {
  .hub-grid {grid-template-columns:1fr!important;}
  .hub-grid .hub-card {min-height:110px;}
}
@media (prefers-reduced-motion:reduce){.hub-panel .hub-card{transition:none!important;}}