/* 滋賀県中国人スポーツ愛好会 — every board is its own venue (court, hardwood, green, felt),
   tied together by ivory tile-like cards, ink outlines and one display face. */

@font-face {
  font-family: "ZCOOL QingKe HuangYou";
  src: url(fonts/zcool-qingke-huangyou.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url(fonts/noto-sans-sc.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #1D2440;
  --ivory: #FFFBF0;
  --ivory-shade: #F0E4C8;
  --gold: #FFC83D;
  --back: #F5B700;
  --red: #E0393E;
  --poster: #C62A30;      /* 首页 */
  --court: #2160C4;       /* 羽毛球 */
  --court-deep: #17468F;
  --wood: #5B3418;        /* 篮球 */
  --wood-hi: #A8652F;
  --grass: #2F8A3B;       /* 高尔夫 */
  --grass-hi: #4FAE45;
  --felt: #0E7350;        /* 麻将 */
  --felt-hi: #22A673;
  --felt-deep: #08523A;
  --night: #1D2440;       /* 联系版主 */
  --line: 3px;
  --display: "ZCOOL QingKe HuangYou", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --grain: radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1.4px) 0 0 / 5px 5px;

  /* per-page venue; dark venues by default */
  --page-bg: var(--felt);
  --fg: var(--ivory);
  --rail-bg: var(--ink);
}
.p-home     { --page-bg: var(--ivory); --fg: var(--ink); --rail-bg: var(--poster); }
.p-yumaoqiu { --page-bg: var(--court-deep); --rail-bg: #0F3168; }
.p-lanqiu   { --page-bg: var(--wood); --rail-bg: #3A1F0C; }
.p-gaoerfu  { --page-bg: var(--grass); --rail-bg: #1F5E27; }
.p-majiang  { --page-bg: var(--felt); --rail-bg: linear-gradient(180deg, #8A4E2A, #6E3B1E); }
.p-contact  { --page-bg: var(--night); --rail-bg: #12172B; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grain), var(--page-bg);
  color: var(--fg);
  font: 500 1.0625rem/1.85 var(--body);
  overflow-x: hidden;
}
body.p-home { background: var(--page-bg); }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--gold); color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: .3rem .8rem; font-weight: 700; text-decoration: none;
}
.skip:focus { top: .5rem; }

/* ---------- header ---------- */
.bar {
  position: relative; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem;
  padding: .5rem 1rem .45rem;
  background: var(--ivory);
  color: var(--ink);
  border-bottom: var(--line) solid var(--ink);
  box-shadow: 0 4px 0 var(--back);
}
.logo {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  text-decoration: none;
  font-weight: 700; font-size: .98rem; line-height: 1.3;
}
.logo svg { flex: none; width: 1.8rem; height: auto; }
.bar nav {
  display: flex; gap: .1rem;
  width: 100%;
  justify-content: space-between;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar nav a {
  flex: none;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-weight: 700; font-size: .92rem; line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.bar nav a:hover { background: #FFE7A1; }
.bar nav a[aria-current="page"] { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink); }
@media (min-width: 52rem) {
  html { scroll-padding-top: 4.5rem; }
  .bar { position: sticky; top: 0; flex-wrap: nowrap; padding: .45rem 1.25rem; }
  .bar nav { width: auto; gap: .2rem; }
  .bar nav a { padding: .35rem .8rem; font-size: .95rem; }
}

/* ---------- shared pieces ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid; justify-items: center; align-content: center;
  padding: 2.6rem 1rem 3.6rem;
  text-align: center;
}
.kicker {
  padding: .05rem .9rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700; font-size: .92rem; letter-spacing: .15em;
}
.big {
  margin: .9rem 0 .6rem;
  font: 400 clamp(4.2rem, 22vw, 8.5rem)/1.05 var(--display);
  letter-spacing: .04em;
  color: var(--ivory);
  -webkit-text-stroke: .1em var(--ink);
  paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--ink);
}
.sfx {
  position: absolute;
  font: 400 clamp(1.8rem, 8vw, 3rem)/1 var(--display);
  color: var(--gold);
  -webkit-text-stroke: .16em var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}
.jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 1.2rem 0 0; padding: 0; list-style: none;
}
.jump a {
  display: block;
  padding: .3rem 1rem;
  background: var(--ivory); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 700; text-decoration: none;
}
.jump a:hover { background: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.9rem;
  background: var(--gold);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
  font: 400 1.35rem/1 var(--display);
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.btn:hover { background: #FFD873; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

.block { max-width: 62rem; margin: 0 auto; padding: 3.2rem 1rem .4rem; }
.midashi {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem;
  margin: 0 0 1.3rem;
  font: 400 clamp(2rem, 7.5vw, 2.8rem)/1.2 var(--display);
  letter-spacing: .06em;
  color: var(--fg);
  text-shadow: 0 .07em 0 var(--ink);
}
.p-home .midashi { text-shadow: none; }
.midashi span { font: 700 1rem/1.4 var(--body); letter-spacing: .1em; color: var(--gold); text-shadow: none; }

/* an ivory card standing on the venue like a big tile */
.card {
  background: linear-gradient(180deg, #FFFFFF, var(--ivory) 60%, var(--ivory-shade));
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 1.3rem;
  box-shadow: 0 .7rem 0 -.1rem var(--back), 0 .7rem 0 .1rem var(--ink), 0 1.2rem 1rem rgb(0 0 0 / .25);
}

.bubble {
  position: relative;
  padding: .7rem 1.1rem;
  background: var(--ivory);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 1.3rem;
  font-weight: 700; font-size: 1.08rem; line-height: 1.6;
  text-align: left;
  word-break: keep-all; overflow-wrap: anywhere;
}
.bubble::before {
  content: "";
  position: absolute; left: -11px; top: calc(50% - 10px);
  width: 20px; height: 20px;
  background: var(--ivory);
  border-left: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  transform: rotate(45deg) skew(12deg, 12deg);
}
.says { display: flex; align-items: center; gap: .8rem; }
.says > svg { flex: none; width: 3.6rem; height: auto; }

.qr { display: block; cursor: zoom-in; }
.qr img {
  width: 11rem; height: auto;
  background: #FFFFFF;
  border: var(--line) solid var(--ink);
  border-radius: .6rem;
}

/* photos as comic panels */
.panels { display: grid; gap: .8rem; }
.panel {
  position: relative; margin: 0; overflow: hidden;
  border: var(--line) solid var(--ink);
  background: var(--ink);
}
.panel .zoom { display: block; cursor: zoom-in; }
.panel img { width: 100%; height: auto; }
.panel figcaption {
  position: absolute; left: 0; top: 0;
  padding: .3rem .85rem;
  background: var(--ink); color: var(--ivory);
  border-right: var(--line) solid var(--ivory);
  border-bottom: var(--line) solid var(--ivory);
  font-weight: 700;
}
.panel .sfx { position: static; }
.panel .sfx-at { position: absolute; right: .8rem; bottom: .7rem; transform: rotate(-8deg); }

/* ---------- footer ---------- */
.rail {
  margin-top: 4.5rem;
  background: var(--rail-bg);
  color: var(--ivory);
  border-top: 5px solid var(--ink);
}
.rail-in {
  max-width: 62rem; margin: 0 auto;
  padding: 1.8rem 1rem 2.2rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem;
}
.rail h2 { margin: 0 0 .2rem; font-size: .95rem; color: var(--gold); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail a { font-weight: 700; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* the original site's golden scroll, kept at its native size with the forum name on it */
.rail-name {
  display: grid; place-items: center;
  width: 323px; max-width: 100%; height: 45px;
  padding: 0 2.6rem .15rem;
  background: url(img/footer.png) center / 323px 45px no-repeat;
  color: var(--ink);
  font: 400 1.12rem/1 var(--display);
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .rail-in { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- viewer ---------- */
.viewer {
  padding: .6rem;
  border: var(--line) solid var(--ink);
  border-radius: 1rem;
  background: var(--ivory);
  max-width: min(94vw, 64rem);
  overflow: visible;
}
.viewer::backdrop { background: rgb(29 36 64 / .9); }
.viewer img { max-width: 100%; max-height: 84vh; width: auto; height: auto; margin: auto; }
.viewer form { position: absolute; right: -.6rem; top: -1.2rem; }
.viewer-close {
  padding: .3rem 1rem;
  background: var(--gold); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  font: 700 .95rem/1.4 var(--body);
  cursor: pointer;
}

/* =========================================================
   首页 — a red rally poster, then the boards to pick from
   ========================================================= */
.hero-home {
  background: var(--poster);
  color: var(--ivory);
  padding: 5.2rem 1rem 4.4rem;
}
.hero-home .kicker { letter-spacing: .04em; font-size: .88rem; }
.hero-home::before {               /* halftone that thickens toward the edges */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(#9E1F25 1.6px, transparent 2.2px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 85%);
}
.rally {
  margin: 1rem 0 1.1rem;
  font: 400 clamp(3rem, 14.5vw, 6.4rem)/1.08 var(--display);
  letter-spacing: .03em;
  color: var(--ivory);
  -webkit-text-stroke: .1em var(--ink);
  paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--gold);
  word-break: keep-all;
}
.rally span { display: block; }
.rally span:last-child { color: var(--gold); text-shadow: .06em .07em 0 var(--ink); }
.hero-home .bubble { margin-bottom: 1.4rem; }

.flyer { position: absolute; z-index: -1; pointer-events: none; }
.flyer-shuttle { width: clamp(6rem, 22vw, 10rem); right: -.6rem; top: .6rem; transform: rotate(-24deg); }
.flyer-ball { width: clamp(3.4rem, 12vw, 5.5rem); left: -.8rem; bottom: 2.2rem; transform: rotate(-15deg); }
.flyer-golf { width: clamp(2.2rem, 8vw, 3.4rem); right: 9%; bottom: 1.4rem; }
.flyer-tile { width: clamp(2.8rem, 10vw, 4.4rem); left: 5%; top: .7rem; transform: rotate(-16deg); }

.letter {
  display: grid; gap: 1rem;
  padding: 1.6rem 1.3rem 1.8rem;
  max-width: 46rem;
}
.letter-head { display: flex; align-items: center; gap: .8rem; }
.letter-head svg { width: 3.2rem; height: auto; }
.letter-head p { font: 400 1.5rem/1.3 var(--display); letter-spacing: .06em; }
.letter > p { padding-left: 1rem; border-left: 4px solid var(--gold); }
.letter b { color: var(--red); }

.boards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.3rem;
}
.board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid; align-content: end; gap: .5rem;
  min-height: 11.5rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border: var(--line) solid var(--ink);
  border-radius: 1.2rem;
  color: var(--ivory);
  text-decoration: none;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.board:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 0 var(--ink); }
.board:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.board > svg {
  position: absolute; z-index: -1;
  right: .9rem; top: .8rem;
  width: 5.2rem; height: auto;
  transform: rotate(10deg);
}
.board-name {
  font: 400 2.5rem/1 var(--display);
  letter-spacing: .06em;
  text-shadow: 0 .07em 0 var(--ink);
}
.board-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.board-tags span {
  padding: 0 .6rem;
  background: var(--ivory); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: .85rem; font-weight: 700; line-height: 1.6;
}
.board-yumaoqiu {
  background:
    linear-gradient(90deg, transparent calc(50% - 1.5px), rgb(255 255 255 / .55) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    var(--court);
}
.board-yumaoqiu::before {          /* court boundary lines */
  content: ""; position: absolute; inset: .7rem; z-index: -2;
  border: 3px solid rgb(255 255 255 / .55);
}
.board-yumaoqiu > svg { width: 7rem; transform: rotate(-28deg); right: -.4rem; top: 1.4rem; }
.board-lanqiu {
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--wood-hi), #7C4520);
}
.board-gaoerfu {
  background: repeating-linear-gradient(90deg, var(--grass) 0 26px, #3A9A3F 26px 52px);
}
.board-gaoerfu > svg { width: 3.8rem; transform: rotate(4deg); }
.board-majiang { background: var(--grain), radial-gradient(ellipse at 60% 30%, var(--felt-hi), var(--felt) 60%, var(--felt-deep)); }
.board-majiang > svg { width: 3.8rem; }

@media (min-width: 46rem) {
  .boards { grid-template-columns: repeat(2, 1fr); }
  .letter { padding: 2rem 2.2rem 2.2rem; }
}

/* =========================================================
   羽毛球 — the court
   ========================================================= */
.hero-yumaoqiu {
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #3478DF, var(--court) 55%, var(--court-deep));
  color: var(--ivory);
  min-height: 22rem;
}
.court-lines {
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: min(120vw, 60rem); height: auto; max-width: none;
  transform: translate(-50%, -50%) rotate(-62deg);
  opacity: .32;
}
.smash {
  position: absolute; z-index: -1;
  width: clamp(9rem, 34vw, 15rem);
  right: 4%; top: 1.2rem;
  transform: rotate(150deg);
}
.hero-yumaoqiu .sfx { right: max(1rem, calc(50% - 20rem)); top: clamp(7rem, 30vw, 10rem); transform: rotate(10deg); }

.split { display: grid; gap: 1.6rem; align-items: center; }
.wechat {
  display: grid; justify-items: center; gap: 1rem;
  padding: 1.8rem 1.2rem 2rem;
  text-align: center;
}
.wechat p { font-weight: 700; font-size: 1.12rem; }
.wechat b { color: var(--court); }

.sched { max-width: 46rem; }
.sched + .sched { margin-top: 1.2rem; }
.sched-year {
  margin: 0 0 .8rem;
  font: 400 1.6rem/1.3 var(--display); letter-spacing: .05em;
  color: var(--ivory);
}
details.sched > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem;
  background: rgb(0 0 0 / .25);
  border: 2px solid rgb(255 251 240 / .45);
  border-radius: .9rem;
  cursor: pointer; list-style: none;
}
details.sched > summary::-webkit-details-marker { display: none; }
details.sched > summary::after {
  content: "＋";
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--gold); color: var(--ink);
  font: 700 1rem/1 var(--body);
}
details.sched[open] > summary { margin-bottom: .8rem; }
details.sched[open] > summary::after { content: "－"; }
details.sched > summary .sched-year { margin: 0; }

.sched-group { margin-bottom: 1rem; }
.sched-group h4 {
  display: inline-block;
  margin: 0 0 -.15rem 1rem;
  position: relative; z-index: 1;
  padding: .05rem .8rem;
  background: var(--gold); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: .5rem;
  font-size: .95rem; line-height: 1.5;
}
.sched-rows {
  list-style: none; margin: 0; padding: .4rem 0 .2rem;
  border-radius: 1rem;
}
.sched-rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "what time" "detail detail";
  gap: .35rem .8rem;
  padding: .75rem 1.1rem;
  border-top: 2px dashed var(--ivory-shade);
}
.sched-rows li:first-child { border-top: 0; }
.sched-rows .what { grid-area: what; font-weight: 700; font-size: 1.1rem; }
.sched-rows .time {
  grid-area: time; align-self: center;
  padding: 0 .7rem;
  background: var(--court); color: var(--ivory);
  border-radius: 999px;
  font-weight: 700; font-size: .92rem; line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.sched-rows .detail { grid-area: detail; font-weight: 700; }
.sched-rows .dates { grid-area: detail; display: flex; flex-wrap: wrap; gap: .4rem; }
.sched-rows .dates span {
  min-width: 3.4rem;
  padding: .05rem .5rem;
  border: 2px solid var(--ink);
  border-radius: .45rem;
  background: #FFFFFF;
  text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--ink);
}

@media (min-width: 46rem) {
  .split { grid-template-columns: auto 1fr; }
  .wechat { padding: 1.8rem 2rem 2rem; }
  .sched-rows li { grid-template-columns: 6.5rem 1fr auto; grid-template-areas: "what detail time"; align-items: center; }
  .panels-yumaoqiu { grid-template-columns: 1.75fr 1fr; }
  .panels-yumaoqiu .panel-tall .zoom { position: absolute; inset: 0; }
  .panels-yumaoqiu .panel-tall img { height: 100%; object-fit: cover; }
}
.panels-yumaoqiu .panel-tall img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 46rem) { .panels-yumaoqiu .panel-tall img { aspect-ratio: auto; } }

/* =========================================================
   篮球 — an empty gym at night, one spotlight
   ========================================================= */
.hero-lanqiu {
  min-height: 34rem;
  align-content: start;
  padding-top: 2.2rem;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 34% 60% at 50% 0%, rgb(255 236 170 / .38), transparent 70%),
    linear-gradient(180deg, #14182B 0 52%, transparent 52%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #7A4420 52%, var(--wood) 100%);
}
.hero-lanqiu::before {              /* the pool of light on the floor */
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 3.2rem;
  width: min(80vw, 30rem); height: 7rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(255 236 170 / .5), transparent 70%);
}
.hero-lanqiu::after {               /* three-point arc */
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -14rem;
  width: min(120vw, 44rem); aspect-ratio: 1;
  transform: translateX(-50%);
  border: 4px solid rgb(255 251 240 / .45);
  border-radius: 50%;
}
.hero-lanqiu { grid-template-rows: auto auto 1fr; padding-bottom: 3.4rem; }
.alone {
  align-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.alone .bubble { font-size: 1.15rem; white-space: nowrap; }
.alone .bubble::before { left: calc(50% - 10px); top: auto; bottom: -11px; transform: rotate(-45deg) skew(12deg, 12deg); }
.alone-cast { position: relative; display: flex; align-items: flex-end; }
.alone-cast .who { width: 5.6rem; height: auto; }
.alone-cast .ball { width: 3.2rem; height: auto; margin-left: -.4rem; }
.sweat {
  position: absolute; left: -.4rem; top: .3rem;
  width: .9rem; height: 1.3rem;
  background: #8FD3FF;
  border: 2.5px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform: rotate(-20deg);
}
.recruit { display: grid; justify-items: center; gap: 1rem; margin-top: 1rem; text-align: center; }

/* =========================================================
   高尔夫 — sky, hills, a pin
   ========================================================= */
.hero-gaoerfu {
  min-height: 30rem;
  align-content: start;
  padding-top: 2.4rem;
  color: var(--ink);
  background: linear-gradient(180deg, #7CC8FF 0%, #BFE6FF 55%, #E6F6FF 70%);
}
.hero-gaoerfu .kicker { background: rgb(255 255 255 / .7); }
.hills { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 55%; }
.pin { position: absolute; z-index: -1; right: 14%; bottom: 23%; width: clamp(3.4rem, 10vw, 5rem); }
.shot { position: absolute; z-index: -1; left: 4%; bottom: 30%; width: 84%; height: 45%; }
.hero-gaoerfu .sfx { left: max(1rem, calc(50% - 22rem)); top: 50%; transform: rotate(-10deg); }

.green-card {
  display: grid; gap: 1.3rem; justify-items: center;
  width: calc(100% - 2rem); max-width: 44rem; margin: -5.5rem auto 0;
  position: relative; z-index: 2;
  padding: 1.8rem 1.3rem 2rem;
  text-align: center;
}
.green-card .lead {
  font-weight: 700; font-size: clamp(1.2rem, 4.6vw, 1.5rem); line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere;
}

/* =========================================================
   麻将 — the table
   ========================================================= */
.table {
  padding: 2.4rem 1rem 3.6rem;
  color: var(--ivory);
  background:
    var(--grain),
    radial-gradient(ellipse 70% 60% at 50% 38%, var(--felt-hi) 0%, var(--felt) 55%, var(--felt-deep) 100%);
  border-bottom: 6px solid var(--felt-deep);
}
.kicker-ivory { color: var(--ivory); letter-spacing: .2em; }

.tile, .loose, .hands li {
  position: relative;
  display: inline-block;
  background: var(--back);
  border: var(--line) solid var(--ink);
  border-radius: .8rem;
}
.tile > span, .loose > span {
  position: absolute; inset: -3px -3px .75rem -3px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ivory) 55%, var(--ivory-shade) 100%);
  border: var(--line) solid var(--ink);
  border-radius: .8rem;
}
.tiles {
  display: flex; justify-content: center; gap: clamp(.4rem, 2vw, .9rem);
  margin: 1.6rem 0 .6rem;
  font-weight: 400;
}
.tile {
  width: clamp(4.1rem, 19vw, 7.2rem);
  aspect-ratio: 3 / 4.15;
  filter: drop-shadow(0 .7rem .45rem rgb(0 0 0 / .35));
}
.tile > span { font: 400 clamp(2.6rem, 12.5vw, 4.8rem)/1 var(--display); padding-bottom: .05em; }
.tile:nth-child(1) { transform: rotate(-5deg) translateY(.3rem); }
.tile:nth-child(2) { transform: rotate(3deg); }
.tile:nth-child(3) { transform: rotate(-2deg) translateY(.45rem); }
.tile:nth-child(4) { transform: rotate(6deg) translateY(-.1rem); }
.ink-navy > span { color: var(--ink); }
.ink-red > span { color: var(--red); }
.ink-green > span { color: #11804F; }
.table .sfx { top: clamp(4.6rem, 15vw, 6rem); right: max(1rem, calc(50% - 21rem)); transform: rotate(12deg); }

.loose { position: absolute; z-index: -1; width: 3.6rem; aspect-ratio: 3 / 4.15; opacity: .9; }
.loose > span { font: 400 2.3rem/1 var(--display); }
.loose-a { left: -1.1rem; top: 5.5rem; transform: rotate(-24deg); }
.loose-a > span { color: var(--red); }
.loose-b { right: -1.3rem; bottom: 4.5rem; transform: rotate(18deg); }
.loose-b > span { color: #11804F; }
.loose-c { left: 12%; bottom: -1.6rem; transform: rotate(68deg); }
.loose-c > span::after { content: ""; width: 58%; height: 62%; border: 3px solid #3E7BD6; border-radius: .35rem; }
.table .says { margin: 1.8rem 0 1.4rem; }

.sheet-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
  padding: .9rem 1.1rem;
  background: rgb(8 82 58 / .65);
  border: 2px solid rgb(255 251 240 / .35);
  border-radius: 1rem;
}
.sheet-head h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.stake {
  display: grid; place-items: center;
  width: 6.6rem; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE7A1, var(--gold) 55%, #E0A200);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  text-align: center;
  font-size: .95rem; line-height: 1.25;
  transform: rotate(-8deg);
}
.stake strong { font-weight: 700; padding: 0 .55rem; }
.tier { display: grid; grid-template-columns: 4.4rem 1fr; gap: 1rem; align-items: start; margin-top: 1.6rem; }
.tier-x {
  margin: 0; padding-top: .35rem;
  font: 400 2.7rem/1 var(--display);
  color: var(--gold);
  -webkit-text-stroke: .1em var(--ink);
  paint-order: stroke fill;
}
.hands {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 1.1rem .7rem;
}
.hands li {
  display: grid; place-items: center;
  min-height: 3.9rem;
  padding: 0 .5rem .65rem;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ivory) 55%, var(--ivory-shade) calc(100% - .65rem), var(--back) calc(100% - .65rem));
  color: var(--ink);
  font-weight: 700; font-size: 1.12rem; line-height: 1.3;
  text-align: center;
  box-shadow: 0 .45rem .35rem rgb(0 0 0 / .28);
}
.hands li::after {
  content: "";
  position: absolute; left: -3px; right: -3px; bottom: calc(.65rem - 3px);
  border-top: var(--line) solid var(--ink);
}
.tier-4 .hands li { --back: var(--gold); }
.tier-4 .tier-x { font-size: 3rem; }
.tier-8 .hands li {
  --back: transparent;
  min-height: 4.6rem;
  font-size: 1.35rem;
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--ivory) 55%, var(--ivory-shade) calc(100% - .65rem), transparent calc(100% - .65rem)),
    linear-gradient(90deg, #FF5E7E, #FFB341, #FFE66B, #4CD9A0, #4BA3FF, #A77BFF);
  box-shadow: 0 0 0 4px rgb(255 230 107 / .35), 0 0 1.6rem rgb(255 230 107 / .55), 0 .45rem .35rem rgb(0 0 0 / .28);
}
.tier-8 .tier-x { font-size: 3.3rem; }
.tier-8 .hands { grid-template-columns: minmax(9rem, 13rem); }
.note { margin-top: 1.8rem; padding-left: 1em; text-indent: -1em; font-size: .98rem; max-width: 40em; }

/* =========================================================
   联系版主 — a name card under the night sky
   ========================================================= */
body.p-contact {
  background:
    radial-gradient(rgb(255 251 240 / .5) 1px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(rgb(255 200 61 / .45) 1.2px, transparent 1.8px) 23px 17px / 61px 61px,
    var(--night);
}
.hero-contact { padding-bottom: 1rem; color: var(--ivory); }
.namecard {
  display: grid; gap: 1.6rem;
  max-width: 52rem; margin: 0 auto;
  padding: 1.8rem 1.3rem 2.2rem;
  text-align: center;
}
.namecard-who { display: grid; justify-items: center; gap: .3rem; }
.namecard-who svg { width: 5.4rem; height: auto; }
.namecard-who p { font: 400 1.7rem/1.2 var(--display); letter-spacing: .2em; }
.namecard-col { display: grid; justify-items: center; gap: .9rem; }
.namecard-col .lead { font-weight: 700; font-size: 1.15rem; }
.namecard-col b { color: var(--red); }
.btn-mail { font: 700 1rem/1.4 var(--body); letter-spacing: .02em; padding: .75rem 1.3rem; overflow-wrap: anywhere; }
@media (min-width: 52rem) {
  .namecard { grid-template-columns: auto 1fr 1fr; align-items: center; padding: 2.2rem 2rem; }
  .namecard-col + .namecard-col { border-left: 2px dashed var(--ivory-shade); padding-left: 1.5rem; }
}

.voices { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.voices > svg { width: clamp(4.6rem, 18vw, 6.5rem); height: auto; }
.voices ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.voices li {
  position: relative;
  padding: .5rem 1.1rem;
  background: var(--ivory); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  font-weight: 700; line-height: 1.5;
}
.voices li:first-child::before {
  content: "";
  position: absolute; left: -11px; top: calc(50% - 9px);
  width: 18px; height: 18px;
  background: var(--ivory);
  border-left: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  transform: rotate(45deg) skew(12deg, 12deg);
}

/* =========================================================
   one entrance per page
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rally span { animation: pop .5s cubic-bezier(.3, 1.5, .6, 1) both; }
  .rally span:nth-child(2) { animation-delay: .12s; }
  .rally span:nth-child(3) { animation-delay: .28s; }
  .smash { animation: smash .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .tile { animation: slap .42s cubic-bezier(.3, 1.5, .6, 1) both; }
  .tile:nth-child(1) { animation-delay: .15s; }
  .tile:nth-child(2) { animation-delay: .3s; }
  .tile:nth-child(3) { animation-delay: .45s; }
  .tile:nth-child(4) { animation-delay: .6s; }
  .hero .sfx { animation: stamp .3s ease-out .8s both; }
  .table .sfx { animation-delay: 1.1s; }
}
@keyframes pop { from { opacity: 0; transform: scale(1.6); } }
@keyframes smash { from { opacity: 0; transform: translate(-30vw, -20vh) rotate(150deg); } }
@keyframes slap { from { opacity: 0; transform: translateY(-3.5rem) rotate(-14deg) scale(1.25); } }
@keyframes stamp { from { opacity: 0; transform: scale(2.4); } }