/* 戏精设定：语言选择页的片场横幅（戏精等级、演出数据、打卡月历）、语言片场卡片、推荐卡片的狗血指数、复盘颁奖 */

/* 片场横幅：左边等级和数据，右边月历 */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; margin-bottom: 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; position: relative; overflow: hidden; }
/* 左上角一道很淡的聚光灯 */
.hero::before { content: ""; position: absolute; left: -120px; top: -160px; width: 520px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.hero > * { position: relative; }
.hero-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kicker { font-size: 13px; color: var(--accent); font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.hero-h { margin: 0; font-size: 34px; line-height: 1.15; }
.hero-h span { color: var(--accent); }
.hero-sub { margin: -6px 0 0; color: var(--muted); font-size: 15px; }

/* 戏精等级 */
.rank { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.rank-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.rank.tier-5 .rank-ic, .rank.tier-6 .rank-ic { background: var(--warn-soft); color: var(--warn); }
.rank-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-b small { color: var(--muted); font-size: 12px; }
.rank-b b { font-size: 17px; font-weight: 600; margin-left: 2px; }
.rank-b em { color: var(--muted); font-size: 13px; font-style: normal; margin-left: 6px; }
.rank .pbar { max-width: none; margin: 4px 0 2px; }
.rank .pbar i { background: var(--accent); }

.hero-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.htile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.htile b { display: flex; align-items: baseline; gap: 4px; font: 700 24px/1.2 Fraunces, serif; }
.htile b .ic { width: 16px; height: 16px; align-self: center; color: var(--accent); margin-right: 2px; }
.htile b span { font: 400 13px Inter, "PingFang SC", sans-serif; color: var(--muted); }
.htile small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .acts-row { margin: 0; }

.hero-cal { display: flex; flex-direction: column; gap: 8px; }
.hero-cal .mcal { border-top: none; padding-top: 0; }
.hero-cal .cal-legend { justify-content: center; }

/* 语言片场卡片：右下角大号水印字 + 该语言的戏精口头禅 */
.lang-card { min-height: 170px; }
.lang-card.last { border-color: var(--accent); }
.lang-card .mark { position: absolute; right: -6px; bottom: -28px; font: 700 110px/1 Fraunces, "Songti SC", serif;
  color: var(--ink); opacity: .05; pointer-events: none; transition: opacity .2s, transform .2s; }
.lang-card:hover .mark { opacity: .09; transform: rotate(-4deg); }
.lang-card .catch { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lang-card .catch .tl { font: italic 500 16px Fraunces, serif; }
.lang-card .catch .tl::before { content: "“"; } .lang-card .catch .tl::after { content: "”"; }
.lang-card .catch small { color: var(--muted); font-size: 12px; }
.lang-card .meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.lang-card .meta .due { color: var(--accent); }

/* 推荐卡片的狗血指数 */
.heat { display: flex; align-items: center; gap: 1px; margin-top: auto; color: var(--line); font-size: 13px; }
.heat small { color: var(--muted); font-size: 12px; margin-right: 5px; }
.heat .on { color: var(--accent); }
.heat .on .ic { fill: color-mix(in srgb, var(--accent) 25%, transparent); }

/* 复盘颁奖 */
.award { display: flex; gap: 14px; align-items: center; padding: 14px 16px; margin: 4px 0 12px; border-radius: 12px;
  background: var(--warn-soft); color: var(--warn); }
.award > .ic { width: 34px; height: 34px; flex: none; }
.award div { display: flex; flex-direction: column; gap: 1px; color: var(--ink); }
.award small { color: var(--warn); font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.award b { font: 700 19px Fraunces, "Songti SC", serif; }
.award span { color: var(--muted); font-size: 14px; }