/* ===== 入口卡片：公共部分 ===== */
.portals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
  max-width: 1180px; margin: 26px auto 0; padding: 0 20px;
}
.portal {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: block; min-height: 330px; overflow: hidden; isolation: isolate;
  text-decoration: none; cursor: pointer;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--spring), box-shadow .3s;
  animation: card-in .9s var(--spring) both;
}
.portal:nth-child(1) { animation-delay: .35s; }
.portal:nth-child(2) { animation-delay: .5s; }
.portal:nth-child(3) { animation-delay: .65s; }
.portal:nth-child(4) { animation-delay: .8s; }
.portal:hover { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); transition-duration: .25s; }
.portal:active { scale: .97; }
.portal:focus-visible { outline: 4px dashed var(--nw-line); outline-offset: 6px; }
@keyframes card-in { from { opacity: 0; translate: 0 70px; rotate: -3deg; } }
.portal-title, .portal-sub, .portal-host { margin: 0; font-weight: normal; }
.portal-host em {
  font-style: normal; font-size: .82em; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .12); white-space: nowrap;
}
.portal [data-slot] svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ===== 1. 像素风 · 协同办公 ===== */
.p-pixel {
  font-family: "NW Pixel", ui-monospace, monospace; color: #fff;
  background: linear-gradient(#140F38, #2E2270 55%, #5A3FA6);
  border: 6px solid #000; box-shadow: 8px 8px 0 #000;
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.p-pixel::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 4px),
              radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45));
}
.px-hud {
  position: absolute; z-index: 4; top: 12px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; font-size: 13px; text-shadow: 2px 2px 0 #000;
}
.px-hp i { display: inline-block; width: 10px; height: 10px; margin-left: 3px; background: #FF4D6D; box-shadow: 2px 2px 0 #000; }
.px-hp i.empty { background: transparent; outline: 2px solid #FF4D6D; outline-offset: -2px; animation: px-blink 1s steps(1) infinite; }
.px-sky { position: absolute; inset: 0; z-index: 0; }
.px-sky::before {
  content: ""; position: absolute; left: 20px; top: 40px; width: 3px; height: 3px; background: #fff;
  box-shadow: 60px 10px #fff, 140px -12px #FFE66D, 220px 30px #fff, 300px 4px #fff, 380px 24px #7DF9FF,
              450px -6px #fff, 520px 40px #fff, 90px 70px #FFE66D, 260px 80px #fff, 410px 90px #fff, 480px 120px #fff;
  animation: px-blink 1.6s steps(1) infinite;
}
.px-cloud {
  position: absolute; width: 8px; height: 8px; background: transparent;
  box-shadow: 16px 0 #fff, 24px 0 #fff, 32px 0 #fff,
              8px 8px #fff, 16px 8px #fff, 24px 8px #fff, 32px 8px #fff, 40px 8px #fff,
              0 16px #E6E1FF, 8px 16px #E6E1FF, 16px 16px #E6E1FF, 24px 16px #E6E1FF, 32px 16px #E6E1FF, 40px 16px #E6E1FF, 48px 16px #E6E1FF;
  opacity: .85; animation: px-cloud 38s steps(76) infinite;
}
.px-cloud.c1 { top: 52px; left: -60px; }
.px-cloud.c2 { top: 96px; left: -60px; animation-delay: -19s; animation-duration: 52s; scale: .7; }
@keyframes px-cloud { to { translate: 680px 0; } }
@keyframes px-blink { 50% { opacity: .25; } }

.px-stage { position: absolute; z-index: 3; right: 9%; bottom: 46px; width: 120px; height: 240px; }
.px-hero { position: absolute; left: 50%; bottom: 0; width: 80px; translate: -50% 0; animation: px-idle .8s steps(2) infinite; }
.px-qblock {
  position: absolute; left: 50%; bottom: 160px; width: 42px; height: 42px; translate: -50% 0;
  display: grid; place-items: center; font-size: 22px; color: #5A3A00;
  background: #F2A93B; border: 4px solid #000;
  box-shadow: inset -4px -4px 0 #A8611E, inset 4px 4px 0 #FFD58A;
}
.px-coin { position: absolute; left: 50%; bottom: 210px; translate: -50% 0; opacity: 0; color: #FFD93B; font-size: 15px; white-space: nowrap; text-shadow: 2px 2px 0 #000; }
.px-ground {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 46px;
  background:
    linear-gradient(#63D86A 0 10px, #2E8B3E 10px 14px, transparent 14px),
    repeating-linear-gradient(90deg, #8B4A1C 0 16px, #7A3F16 16px 32px);
  border-top: 4px solid #000;
}
.px-text { position: absolute; z-index: 4; left: 22px; top: 56px; width: 58%; }
.p-pixel .portal-title { font-size: clamp(26px, 3.2vw, 34px); color: #FFD93B; letter-spacing: 2px; text-shadow: 3px 3px 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.p-pixel .portal-sub { margin-top: 8px; font-size: 15px; color: #E6E1FF; text-shadow: 2px 2px 0 #000; }
.px-start { margin: 18px 0 0; font-size: 16px; color: #7DF9FF; text-shadow: 2px 2px 0 #000; animation: px-blink 1s steps(1) infinite; }
.p-pixel .portal-host { margin-top: 10px; font-size: 13px; color: #C9C3FF; }

@keyframes px-idle { 50% { translate: -50% -4px; } }
.p-pixel:hover .px-hero { animation: px-jump 1s cubic-bezier(.3, .7, .4, 1) infinite; }
.p-pixel:hover .px-qblock { animation: px-bump 1s linear infinite; }
.p-pixel:hover .px-coin { animation: px-coin 1s ease-out infinite; }
.p-pixel:hover .px-ground { animation: px-run .5s linear infinite; }
.p-pixel:hover .px-start { animation-duration: .25s; }
@keyframes px-jump { 0%, 100% { translate: -50% 0; } 40% { translate: -50% -58px; } 48% { translate: -50% -54px; } }
@keyframes px-bump { 0%, 38%, 60%, 100% { translate: -50% 0; } 46% { translate: -50% -12px; } }
@keyframes px-coin { 0%, 40% { opacity: 0; translate: -50% 0; } 50% { opacity: 1; } 90% { opacity: 0; translate: -50% -40px; } }
@keyframes px-run { to { background-position: 0 0, -32px 0; } }

/* ===== 2. 水墨风 · 教务系统 ===== */
.p-ink {
  font-family: "NW Brush", "STKaiti", "KaiTi", serif; color: #1C1A17;
  background-color: #F3ECDC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-block: 14px solid #4A2E18; border-inline: 3px solid #4A2E18; border-radius: 4px;
  box-shadow: 0 16px 30px rgba(74, 46, 24, .28);
}
.p-ink::before {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 1.5px solid rgba(28, 26, 23, .5); outline: 1px solid rgba(28, 26, 23, .25); outline-offset: 4px;
}
.ink-mountains { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: 120px; }
.ink-sun {
  position: absolute; z-index: 0; top: 30px; left: 34px; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle, #D9472B 0 52%, rgba(217, 71, 43, 0) 72%); opacity: .85;
}
.ink-hero { position: absolute; z-index: 2; left: 7%; bottom: 66px; width: 150px; animation: ink-float 5s ease-in-out infinite; transition: rotate .8s var(--spring); }
.ink-hero::before {
  content: ""; position: absolute; z-index: -1; left: 10%; top: 20%; width: 80%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 26, 23, .32), transparent 70%);
  scale: 0; transition: scale 1s var(--smooth);
}
@keyframes ink-float { 50% { translate: 0 -10px; } }
.ink-title {
  position: absolute; z-index: 3; right: 30px; top: 26px;
  display: flex; flex-direction: column; gap: 12px; writing-mode: vertical-rl; white-space: nowrap;
}
.p-ink .portal-title { font-size: 42px; letter-spacing: 6px; line-height: 1; }
.ink-poem { margin: 6px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: 4px; color: #4A443B; }
.ink-seal {
  position: absolute; z-index: 3; right: 34px; bottom: 22px; width: 52px; height: 52px;
  display: flex; flex-direction: column; writing-mode: vertical-rl; justify-content: center; align-items: center;
  font-size: 19px; line-height: 1.05; color: #F3ECDC; background: #B8322A; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #F3ECDC, inset 0 0 0 4px #B8322A;
  rotate: -6deg; opacity: .92;
}
.ink-foot { position: absolute; z-index: 3; left: 26px; right: 100px; bottom: 18px; }
.p-ink .portal-sub { font-size: 18px; }
.p-ink .portal-host { margin-top: 4px; font-family: var(--font-fun); font-size: 13px; color: #6B6255; }

.p-ink:hover .ink-seal { animation: stamp .7s var(--spring); }
.p-ink:hover .ink-hero { rotate: -8deg; }
.p-ink:hover .ink-hero::before { scale: 1.3; }
@keyframes stamp {
  0% { scale: 2.4; opacity: 0; rotate: -24deg; }
  55% { scale: .9; opacity: 1; rotate: -4deg; }
  100% { scale: 1; rotate: -6deg; }
}

/* ===== 3. 美漫波普风 · 体育分数 ===== */
.p-pop {
  font-family: "NW HuangYou", var(--font-fun); color: #111;
  background-color: #4DABF7;
  background-image:
    repeating-conic-gradient(from 0deg at 78% 42%, rgba(255, 255, 255, .38) 0 5deg, transparent 5deg 15deg),
    radial-gradient(#1C7ED6 28%, transparent 31%);
  background-size: auto, 14px 14px;
  border: 5px solid #111; border-radius: 6px; box-shadow: 10px 10px 0 #111;
}
.pop-burst {
  position: absolute; z-index: 1; right: 4%; top: 4%; width: 200px; height: 200px;
  display: grid; place-items: center; filter: drop-shadow(5px 5px 0 #111);
  rotate: -10deg; transition: scale .5s var(--spring), rotate .5s var(--spring);
}
.pop-burst::before {
  content: ""; position: absolute; inset: 0; background: #FF4D6D;
  clip-path: polygon(50% 0, 62% 20%, 86% 12%, 80% 36%, 100% 50%, 80% 62%, 88% 88%, 62% 80%, 50% 100%, 38% 80%, 12% 86%, 20% 62%, 0 50%, 20% 38%, 14% 12%, 38% 20%);
}
.pop-burst span {
  position: relative; font-family: "NW Comic", Impact, sans-serif; font-size: 46px; letter-spacing: 1px;
  color: #FFE21F; -webkit-text-stroke: 2px #111; translate: 0 -30px;
}
.pop-hero { position: absolute; z-index: 2; right: 9%; bottom: 18px; width: 150px; rotate: 8deg; animation: pop-run .32s ease-in-out infinite alternate; }
@keyframes pop-run { to { translate: 0 -8px; } }
.p-pop .nw-leg { transform-box: fill-box; transform-origin: 50% 0; animation: kick .32s ease-in-out infinite alternate; }
.p-pop .nw-leg-r { animation-direction: alternate-reverse; }
@keyframes kick { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.pop-say {
  position: absolute; z-index: 3; left: 22px; top: 22px; padding: 12px 20px;
  font-size: 19px; line-height: 1.3; background: #fff; border: 4px solid #111; border-radius: 50% / 42%;
  rotate: -4deg;
}
.pop-say b { font-weight: normal; color: #E03131; font-size: 1.3em; }
.pop-say::after {
  content: ""; position: absolute; right: 18px; bottom: -22px; width: 26px; height: 24px;
  background: #fff; border-right: 4px solid #111; border-bottom: 4px solid #111;
  clip-path: polygon(0 0, 100% 0, 100% 100%); translate: 0 -4px;
}
.pop-panel {
  position: absolute; z-index: 3; left: 22px; bottom: 22px; max-width: 58%;
  padding: 18px 16px 12px; background: #FFFBEA; border: 4px solid #111; box-shadow: 6px 6px 0 #111;
}
.pop-kicker {
  position: absolute; top: -18px; left: 12px; margin: 0; padding: 0 10px;
  font-family: "NW Comic", Impact, sans-serif; font-size: 22px; letter-spacing: 1px;
  background: #FFE21F; border: 3px solid #111; rotate: -4deg;
}
.p-pop .portal-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.p-pop .portal-sub { margin-top: 6px; font-family: var(--font-fun); font-size: 15px; }
.p-pop .portal-host { margin-top: 4px; font-family: var(--font-fun); font-size: 13px; color: #444; }

.p-pop:hover { animation: card-in .9s var(--spring) both, punch .4s linear; }
.p-pop:hover .pop-burst { scale: 1.2; rotate: 6deg; }
.p-pop:hover .pop-hero, .p-pop:hover .nw-leg { animation-duration: .16s; }
@keyframes punch {
  0%, 100% { translate: 0 0; }
  20% { translate: -6px 3px; }
  40% { translate: 5px -4px; }
  60% { translate: -4px 2px; }
  80% { translate: 3px -1px; }
}

/* ===== 4. 蒸汽波风 · 第二课堂 ===== */
.p-vapor {
  color: #fff; padding: 4px; background: #C0C0C0; border-radius: 2px;
  border: 3px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #DFDFDF, 0 18px 40px rgba(255, 42, 109, .35);
}
.vp-window { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 316px; }
.vp-titlebar {
  display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 3px 8px;
  font: bold 14px/1.2 system-ui, sans-serif; background: linear-gradient(90deg, #000080, #1084D0);
}
.vp-btns i {
  display: inline-grid; place-items: center; width: 20px; height: 18px; margin-left: 3px;
  font: bold 11px/1 system-ui, sans-serif; font-style: normal; color: #000; background: #C0C0C0;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
}
.vp-scene {
  position: relative; flex: 1; margin-top: 4px; overflow: hidden;
  background: linear-gradient(#120458 0%, #5B1A8C 40%, #FF2A6D 70%, #FFB86C 100%);
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.vp-sun {
  position: absolute; right: 12%; top: 28px; width: 160px; height: 160px; border-radius: 50%;
  background: linear-gradient(#FFE66D, #FF6AD5 75%);
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 70%, #000 70% 78%, transparent 78% 81%, #000 81% 88%, transparent 88% 90%, #000 90%);
  mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 70%, #000 70% 78%, transparent 78% 81%, #000 81% 88%, transparent 88% 90%, #000 90%);
  box-shadow: 0 0 60px #FF6AD5;
}
.vp-grid {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 52%;
  background-color: #1A0634;
  background-image: linear-gradient(#FF2A6D 2px, transparent 2px), linear-gradient(90deg, #FF2A6D 2px, transparent 2px);
  background-size: 44px 44px;
  transform: perspective(220px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%);
  animation: vp-grid 1.8s linear infinite;
}
@keyframes vp-grid { to { background-position: 0 44px, 0 0; } }
.vp-hero {
  position: absolute; z-index: 2; right: 16%; bottom: 18%; width: 122px;
  filter: drop-shadow(0 0 16px rgba(255, 106, 213, .85));
  animation: vp-float 4s ease-in-out infinite;
}
.vp-hero svg { transition: transform 1.2s var(--smooth); }
@keyframes vp-float { 0%, 100% { translate: 0 -8px; rotate: -6deg; } 50% { translate: 0 10px; rotate: 6deg; } }
.vp-text { position: absolute; z-index: 3; left: 20px; bottom: 20px; right: 42%; }
.p-vapor .portal-title {
  font-family: "NW HuangYou", var(--font-fun); font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1;
  background: linear-gradient(180deg, #FFFFFF 0%, #B9F3FF 46%, #3A1C71 49%, #FF6AD5 54%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #FF2A6D) drop-shadow(0 0 10px rgba(125, 249, 255, .6));
}
.vp-wide { margin: 6px 0 0; font-size: 12px; letter-spacing: 1px; color: #7DF9FF; text-shadow: 0 0 6px #7DF9FF; white-space: nowrap; }
.p-vapor .portal-sub { margin-top: 8px; font-size: 15px; color: #FFE6F7; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.p-vapor .portal-host { margin-top: 4px; font-size: 13px; color: #FFD1EC; }
.p-vapor .portal-host em { background: rgba(255, 255, 255, .18); }

.p-vapor:hover .vp-grid { animation-duration: .5s; }
.p-vapor:hover .vp-hero svg { transform: perspective(400px) rotateY(360deg); }
.p-vapor:hover .portal-title { animation: glitch .9s steps(2) infinite; }
@keyframes glitch {
  0%, 100% { filter: drop-shadow(2px 2px 0 #FF2A6D) drop-shadow(0 0 10px rgba(125, 249, 255, .6)); translate: 0 0; }
  33% { filter: drop-shadow(-4px 0 0 #7DF9FF) drop-shadow(4px 0 0 #FF2A6D); translate: 2px 0; skew: -6deg 0deg; }
  66% { filter: drop-shadow(3px 1px 0 #7DF9FF) drop-shadow(-3px -1px 0 #FF2A6D); translate: -2px 0; }
}

/* ===== 小屏 ===== */
@media (max-width: 860px) {
  .portals { grid-template-columns: 1fr; gap: 26px; padding: 0 16px; }
  .portal { min-height: 300px; }
}
@media (max-width: 480px) {
  .px-text { width: 64%; }
  .px-stage { right: 2%; scale: .85; transform-origin: bottom center; }
  .ink-hero { width: 118px; left: 4%; bottom: 72px; }
  .p-ink .portal-title { font-size: 36px; }
  .ink-foot { left: 18px; right: 92px; }
  .pop-burst { width: 150px; height: 150px; }
  .pop-burst span { font-size: 34px; translate: 0 -22px; }
  .pop-hero { width: 112px; right: 4%; }
  .pop-panel { max-width: 66%; }
  .pop-say { font-size: 16px; }
  .vp-text { right: 30%; }
  .vp-hero { width: 94px; right: 6%; }
  .vp-sun { width: 120px; height: 120px; }
}