/* 网站主页（/）和游戏页（/games/）：网站自己的样子——云海上的晨光。
   “霄”是云霄，MindHale 的 hale 是呼吸：天从淡蓝渐到晨曦的暖色，两边是远山，底下是慢慢飘的云海，站名后面的光晕像呼吸一样一涨一落。
   主页是公司各个线上入口的总门户，入口卡片一格一格排，以后多了照样往后排。标题用宋体（serif.css），正文和实验页一样用 Figtree。 */
:root {
  --sky-1: #a9b9ea;
  --sky-2: #cbc4ef;
  --sky-3: #f3cbc5;
  --sky-4: #ffe6cf;
  --ink: #272a5e;
  --ink-soft: #555a8e;
  --coral: #ec876a;
  --serif: "MindHale Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "Figtree", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  /* 星星在站名周围空出来的地方（跟着各种屏幕上站名的位置改） */
  --hero-x: 50%;
  --hero-y: 150px;
  --hero-rx: 280px;
  --hero-ry: 130px;
}
* { box-sizing: border-box; }
html {
  min-height: 100%;
  background: var(--sky-3) linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 74%, var(--sky-4) 100%) no-repeat;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 30px;
  padding: max(40px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }

/* 背后的天：底下的暖光、星星、飞鸟、两边的远山、三层云海（都不挡点击） */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky .glow {
  position: absolute; left: 50%; bottom: 0; width: max(760px, 120vmin); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 247, 224, .95), rgba(255, 228, 192, .72) 38%, rgba(255, 214, 194, .28) 68%, rgba(255, 214, 194, 0));
  transform: translate(-50%, 58%) scale(.95);
  animation: breathe 10s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, 58%) scale(.95); opacity: .82; }
  50% { transform: translate(-50%, 58%) scale(1.05); opacity: 1; }
}
.sky .stars {
  position: absolute; left: 0; top: 0; width: 100%; height: 56%;
  -webkit-mask-image: radial-gradient(var(--hero-rx) var(--hero-ry) at var(--hero-x) var(--hero-y), transparent 62%, #000 100%);
  mask-image: radial-gradient(var(--hero-rx) var(--hero-ry) at var(--hero-x) var(--hero-y), transparent 62%, #000 100%);
}
.sky .stars g { animation: twinkle 7s ease-in-out infinite; }
.sky .stars g + g { animation-delay: -3.5s; }
@keyframes twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .3; } }
/* 三只鸟从左往右慢慢飞过去（在站名和卡片之间的那段天上） */
.sky .birds { position: absolute; left: 0; top: 40%; width: 84px; height: auto; opacity: .5; animation: fly 90s linear -36s infinite; }
@keyframes fly {
  from { transform: translate(-110px, 0); }
  50% { transform: translate(50vw, -22px); }
  to { transform: translate(calc(100vw + 110px), 0); }
}
/* 远山：左右各一片，中间是山谷；山脚埋进云海里 */
.sky .mount { position: absolute; bottom: 7vh; width: min(58vw, 880px, 130vh); height: auto; aspect-ratio: 2 / 1; }
.sky .mount.left { left: 0; }
.sky .mount.right { right: 0; }
/* 云海：远、中、近三层，越近越白、飘得越快；一块图宽是高的 6 倍，横着铺开，正好挪过一块的距离再从头来，看不出接缝 */
.sky .cloud {
  position: absolute; left: 0; bottom: 0; height: var(--ch); width: calc(100% + var(--ch) * 6);
  background-repeat: repeat-x; background-position: left bottom; background-size: calc(var(--ch) * 6) 100%;
  animation: drift var(--t) linear infinite;
  will-change: transform;
}
.sky .cloud.far {
  --ch: clamp(100px, 28vh, 250px); --t: 240s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 118a82 50 0 0 1 150-12a98 58 0 0 1 180 8a72 44 0 0 1 130-14a110 62 0 0 1 200 16a88 52 0 0 1 160-10a77 46 0 0 1 140 4a132 70 0 0 1 240 8V200H0Z' fill='%23f2ecfb'/%3E%3C/svg%3E");
  opacity: .75;
}
.sky .cloud.mid {
  --ch: clamp(80px, 21vh, 190px); --t: 170s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 132a116 58 0 0 1 210-10a88 46 0 0 1 160 12a104 52 0 0 1 190-6a77 40 0 0 1 140 8a126 60 0 0 1 230-12a83 42 0 0 1 150 6a66 34 0 0 1 120 2V200H0Z' fill='%23fbe8ee'/%3E%3C/svg%3E");
  opacity: .85;
}
.sky .cloud.near {
  --ch: clamp(64px, 16vh, 150px); --t: 120s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 150a66 38 0 0 1 120-8a94 50 0 0 1 170 10a61 36 0 0 1 110-12a104 54 0 0 1 190 6a77 42 0 0 1 140-4a88 46 0 0 1 160 12a72 40 0 0 1 130-8a99 50 0 0 1 180 4V200H0Z' fill='%23fff'/%3E%3C/svg%3E");
}
@keyframes drift { to { transform: translateX(calc(var(--ch) * -6)); } }

/* 主页顶上：站名站在一团晨光前面 */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; --halo: 460px; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: var(--halo); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 248, 230, .97), rgba(255, 236, 210, .82) 40%, rgba(255, 224, 206, .36) 68%, rgba(255, 224, 206, 0));
  transform: translate(-50%, -50%) scale(.96);
  animation: halo 10s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: .86; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}
.mark { display: block; flex: none; width: 54px; height: 54px; filter: drop-shadow(0 6px 12px rgba(39, 42, 94, .25)); }
.hero .mark { width: 78px; height: 78px; }
.brand { display: flex; flex-direction: column; align-items: center; margin: 16px 0 0; font-weight: 400; }
.brand .zh { font-family: var(--serif); font-weight: 700; font-size: 56px; line-height: 1.12; letter-spacing: .22em; margin-right: -.22em; }
.brand .en { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-weight: 700; font-size: 13px; line-height: 1; text-transform: uppercase; color: var(--ink-soft); }
.brand .en > span { letter-spacing: .62em; margin-right: -.62em; }
.brand .en::before, .brand .en::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .45; }

/* 游戏页顶上：返回首页和“游戏” */
.top { display: flex; align-items: center; justify-content: center; position: relative; min-height: 48px; }
.title { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: .3em; }
.title span { margin-right: -.3em; }
.title .mark { width: 42px; height: 42px; }
.back {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 999px; background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px -14px rgba(39, 42, 94, .45);
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-decoration: none;
  transition: background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.back:hover { background: #fff; }

/* 入口卡片：磨砂玻璃一样，整张都能点。主页的入口在电脑上排成一行，多了每张窄一点；游戏页的多了自动换行 */
.choices { display: grid; gap: 30px; align-content: center; justify-content: center; width: 100%; max-width: 1300px; margin: 0 auto; }
.choices.entries { grid-auto-flow: column; grid-auto-columns: minmax(0, clamp(280px, 24vw, 340px)); }
.choices.list { grid-template-columns: repeat(auto-fit, minmax(0, clamp(300px, 25vw, 400px))); gap: 26px; }
/* 平板这样不太宽的屏幕：主页的入口两个一排 */
@media (max-width: 900px) {
  .choices.entries { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 300px)); }
}
.choice {
  --glow: rgba(98, 88, 190, .5);
  --accent: #8b7fd8;
  position: relative; display: flex; flex-direction: column; padding: 12px;
  border: 1px solid transparent; border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .64)) padding-box,
    linear-gradient(160deg, #fff, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .85)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 48px -26px var(--glow), 0 6px 16px -6px rgba(39, 42, 94, .16);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.choice:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 38px 58px -24px var(--glow), 0 10px 22px -8px rgba(39, 42, 94, .2); }
.choice:active { transform: translateY(1px); }
.choice:focus-visible, .back:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
/* 每张卡底下的光和名字下的小横条用自己的颜色 */
.choice.measure { --glow: rgba(236, 135, 106, .55); --accent: #ec876a; }
.choice.star { --glow: rgba(52, 62, 150, .5); }
.choice.panda { --glow: rgba(72, 140, 92, .45); }
.choice.shanhai { --glow: rgba(196, 140, 92, .45); }
.art { position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden; border-radius: 22px; isolation: isolate; }
.art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), inset 0 -26px 40px -32px rgba(39, 42, 94, .3); pointer-events: none; }
.art > img, .art > svg { display: block; width: 100%; height: 100%; }
.art > img { object-fit: cover; transition: transform .5s ease; }
.choice:hover .art > img { transform: scale(1.04); }
/* 图被裁窄的时候（手机上）留住主角：熊猫在左边，山海的小铺在右边 */
.art.panda > img { object-position: 35% 50%; }
.art.shanhai > img { object-position: 80% 50%; }
.choices.list .art { aspect-ratio: 4 / 3; }
.words { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 8px 8px; }
.words::after { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--accent); opacity: .8; transition: width .3s ease; }
.choice:hover .words::after { width: 48px; }
.words strong { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.2; letter-spacing: .3em; margin-right: -.3em; white-space: nowrap; }
/* 游戏页：图标和名字排一行，字距收一点 */
.choices.list .words { flex-direction: row; gap: 10px; padding: 14px 8px 6px; }
.choices.list .words::after { display: none; }
.choices.list .words strong { font-size: 26px; letter-spacing: .12em; margin-right: -.12em; }
.words img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 2px 6px rgba(39, 42, 94, .25); }

/* 卡片里的图会动一点：游戏手柄浮起来，旁边的小东西一上一下；测量的进度往前走、新芽长一点 */
.art .float { transform-box: fill-box; transform-origin: center; animation: bob 6s ease-in-out infinite; }
.art .float.b { animation-delay: -1.5s; }
.art .float.c { animation-delay: -3s; }
.art .float.d { animation-delay: -4.5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.art .pad { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.choice:hover .art .pad { transform: translateY(-9px) rotate(5deg); }
.art .gauge { transition: stroke-dashoffset .8s ease; }
.choice:hover .art .gauge { stroke-dashoffset: 50.9; }
.art .knob { transform: rotate(120deg); transform-origin: 150px 196px; transition: transform .8s ease; }
.choice:hover .art .knob { transform: rotate(147.6deg); }
.art .sprout { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s ease; }
.choice:hover .art .sprout { transform: scale(1.07); }

footer { text-align: center; font-size: 12px; line-height: 1.75; color: var(--ink-soft); }
footer p { margin: 0; }
footer a { text-decoration: none; margin: 0 6px; white-space: nowrap; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer img { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }

/* 手机上一屏放下、不用滑：页面正好一屏高，卡片分剩下的高度，图占卡片里除了名字以外的地方 */
@media (max-width: 640px) and (orientation: portrait), (orientation: landscape) and (max-height: 560px) {
  body { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  main.choices { min-height: 0; }
  .choice { min-height: 0; }
  .art, .choices.list .art { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
}
/* 手机竖着：站名在上，入口两个一排 */
@media (max-width: 640px) and (orientation: portrait) {
  :root { --hero-y: 112px; --hero-rx: 220px; --hero-ry: 110px; }
  .sky .birds { top: 30%; }
  body { gap: 18px; padding: max(30px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .hero { --halo: 330px; }
  .hero .mark { width: 60px; height: 60px; }
  .brand { margin-top: 12px; }
  .brand .zh { font-size: 36px; }
  .brand .en { gap: 10px; margin-top: 11px; font-size: 11px; }
  .brand .en::before, .brand .en::after { width: 28px; }
  .title { font-size: 26px; gap: 10px; }
  .title .mark { width: 34px; height: 34px; }
  .back { min-height: 40px; padding: 0 14px; font-size: 14px; letter-spacing: .04em; }
  .choices.entries { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 320px); gap: 14px; }
  .choice { padding: 8px; border-radius: 24px; }
  .art { border-radius: 17px; }
  .words { gap: 7px; padding: 12px 4px 6px; }
  .words strong { font-size: 22px; }
  /* 游戏页：一款一行，图在左，图标和名字在右 */
  .choices.list { grid-template-columns: minmax(0, 440px); grid-auto-rows: minmax(0, 210px); gap: 12px; }
  .choices.list .choice { flex-direction: row; align-items: stretch; padding: 10px; border-radius: 28px; }
  .choices.list .art { flex: 0 0 52%; border-radius: 19px; }
  .choices.list .words { flex: 1; flex-direction: column; gap: 8px; padding: 6px 2px; }
  .choices.list .words strong { font-size: 19px; letter-spacing: .1em; margin-right: -.1em; }
}
/* 窄手机：页脚的备案号排两行放得下 */
@media (max-width: 400px) {
  footer { font-size: 11px; }
  footer a { margin: 0 4px; }
}
/* 手机横着：主页站名在左、入口在右；游戏页几款排一行 */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --hero-x: 26%; --hero-y: 165px; --hero-rx: 190px; --hero-ry: 120px; }
  body { gap: 10px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  body.home { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 22px; row-gap: 8px; }
  body.home .hero { grid-column: 1; grid-row: 1; --halo: 280px; }
  body.home main { grid-column: 2; grid-row: 1; }
  body.home footer { grid-column: 1 / -1; grid-row: 2; }
  .hero .mark { width: 50px; height: 50px; }
  .brand { margin-top: 10px; }
  .brand .zh { font-size: 30px; }
  .brand .en { gap: 10px; margin-top: 10px; font-size: 10px; }
  .brand .en::before, .brand .en::after { width: 22px; }
  .top { min-height: 38px; }
  .title { font-size: 23px; gap: 9px; }
  .title .mark { width: 30px; height: 30px; }
  .back { min-height: 38px; padding: 0 14px; font-size: 14px; letter-spacing: .04em; }
  .choices { gap: 14px; }
  .choices.entries { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 300px); }
  .choices.list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 250px); grid-auto-rows: minmax(0, 300px); }
  .choice { padding: 8px; border-radius: 24px; }
  .art { border-radius: 17px; }
  .words { gap: 6px; padding: 9px 6px 4px; }
  .words strong { font-size: 20px; }
  .choices.list .words { padding: 8px 6px 2px; }
  .choices.list .words strong { font-size: 20px; }
  .words img { width: 28px; height: 28px; border-radius: 8px; }
  footer { font-size: 11px; line-height: 1.5; }
}
/* 最矮的横屏：站名再小一点，游戏名字小一点 */
@media (orientation: landscape) and (max-height: 340px) {
  :root { --hero-y: 140px; }
  body.home .hero { --halo: 230px; }
  .hero .mark { width: 42px; height: 42px; }
  .brand { margin-top: 8px; }
  .brand .zh { font-size: 24px; }
  .brand .en { margin-top: 8px; font-size: 9px; }
  .brand .en::before, .brand .en::after { width: 16px; }
  .words strong { font-size: 18px; }
  .choices.list .words { gap: 6px; padding: 7px 2px 2px; }
  .choices.list .words strong { font-size: 16px; letter-spacing: .06em; margin-right: -.06em; }
  .choices.list .words img { width: 24px; height: 24px; border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .glow, .sky .stars g, .sky .cloud, .hero::before, .art .float { animation: none; }
  .sky .birds { display: none; }
  .choice, .art > img, .art .pad, .art .gauge, .art .knob, .art .sprout, .words::after { transition: none; }
  .choice:hover, .choice:active { transform: none; }
}