:root {
  color-scheme: light;
  --sky: #f3f0e9;
  --paper: #fcfbf7;
  --ice: #e3ebe8;
  --blue: #263d47;
  --blue-mid: #60777c;
  --muted: #76868a;
  --line: #d5d9d3;
  --coral: #b97657;
  --gold: #d0aa66;
  --teal: #4c7d79;
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 88% 5%, rgba(255, 255, 255, .8), transparent 29rem),
    linear-gradient(180deg, #f3f0e9 0, var(--sky) 44rem, #f8f7f2 100%);
  color: var(--blue);
  font: 400 16px/1.65 "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: #287c86; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 20; padding: 10px 16px; background: var(--blue); color: white; }
.skip:focus { left: 0; }
.photo-rail { display: none; }

.site-header {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(49, 96, 112, .13);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 17px; font-weight: 850; letter-spacing: -.03em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d8cbb8; border-radius: 8px; background: #e8dfd2; color: #6a5142; font-size: 15px; font-weight: 900; }
.site-header nav { display: flex; gap: 26px; flex-wrap: wrap; }
.site-header nav a { color: #4e7381; font-size: .86rem; font-weight: 720; text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: #e17159; }

main { max-width: var(--maxw); margin: 0 auto; padding: 38px 28px 56px; }
.intro { display: grid; grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr); align-items: center; gap: clamp(34px, 6vw, 78px); max-width: none; padding: 12px 0 49px; }
.intro-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: #51838d; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.eyebrow span:not(.eyebrow-dot) { color: #a0c3c4; }
.eyebrow-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(242, 131, 105, .13); }
h1 { max-width: 960px; margin: 0; color: #214657; font-size: clamp(2.7rem, 5vw, 4.4rem); font-weight: 950; line-height: .99; letter-spacing: -.08em; }
h1 br { display: none; }
h1 span { color: #38a4a4; }
.intro .eyebrow { margin-bottom: 18px; color: #8c674f; font-size: .67rem; letter-spacing: .12em; }
.intro .eyebrow span:not(.eyebrow-dot) { color: #bdab98; }
.intro h1 { color: #283d46; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif; font-size: clamp(2.9rem, 5vw, 4.35rem); font-weight: 850; line-height: 1.18; letter-spacing: -.075em; }
.intro h1 br { display: block; }
.intro h1 span { color: #a56548; }
.lede { max-width: 58ch; margin: 18px 0 18px; color: #557987; font-size: clamp(1rem, 1.75vw, 1.2rem); font-weight: 550; }
.intro .lede { max-width: 34ch; margin: 19px 0 24px; color: #65777b; font-size: clamp(.96rem, 1.35vw, 1.08rem); font-weight: 450; line-height: 1.9; }
.intro-cta { display: inline-flex; align-items: center; gap: 29px; padding: 11px 15px; background: #314950; color: #fffdf8; font-size: .82rem; font-weight: 750; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.intro-cta:hover, .intro-cta:focus-visible { background: #a56548; transform: translateY(-1px); }
.intro-cta span { font-size: 1rem; }
h2 { margin: 34px 0 11px; color: #2d586a; font-size: 1.35rem; font-weight: 880; letter-spacing: -.045em; }
h3 { margin: 0 0 5px; color: #315d6e; font-size: .98rem; font-weight: 850; }
.intro-stats { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 25px; padding-top: 15px; border-top: 1px solid #dedbd3; color: #718187; font-size: .69rem; font-weight: 620; }
.intro-stats b { margin-right: 5px; color: #a56548; font-size: .68rem; letter-spacing: .08em; }
.intro-portrait { min-width: 0; margin: 0; }
.intro-portrait img { display: block; width: 100%; aspect-ratio: 1.055; object-fit: cover; object-position: center 47%; background: #d8d1c5; box-shadow: 0 18px 42px rgba(44, 57, 55, .13); }
.intro-portrait figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 1px 0; color: #887e72; font-size: .65rem; letter-spacing: .11em; }
.intro-portrait figcaption strong { color: #354a4d; font-size: .87rem; font-weight: 750; letter-spacing: .01em; }

.game-section { position: relative; }
.stage-shell { overflow: hidden; padding: 12px; border: 1px solid rgba(60, 112, 127, .22); border-radius: 21px; background: var(--paper); box-shadow: 0 26px 70px rgba(52, 108, 129, .15), 0 3px 0 rgba(255, 255, 255, .8) inset; }
.stage-topline { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px 9px; color: #5f8791; font-size: .73rem; font-weight: 780; letter-spacing: .03em; }
.stage-topline .live-dot { width: 7px; height: 7px; background: #49b9a6; box-shadow: 0 0 0 4px rgba(73, 185, 166, .12); }
.stage-tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #e8f4f1; color: #458582; font-size: .65rem; letter-spacing: .08em; }
.stage-frame { overflow: hidden; position: relative; border-radius: 13px; background: #b5e1ed; box-shadow: 0 2px 8px rgba(26, 66, 84, .12) inset; }
#game-canvas { display: block; width: 100%; height: auto; touch-action: none; outline-offset: 3px; }
#game-canvas:focus-visible { outline: 3px solid var(--coral); }
#hud { padding: 12px 8px 4px; }
.hud-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hud-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border: 1px solid #d4e6e6; border-radius: 10px; background: #f1f8f5; color: #4e7380; font-size: .72rem; font-weight: 780; }
.hud-level-no { border-color: #f0d9a5; background: #fff8e6; color: #b17d2e; }
.hud-name { margin-right: auto; color: #285165; font-size: .96rem; font-weight: 850; }
.hud-stars { border-color: #f5e1ae; background: #fff9e9; color: #a97928; }
.hud-status { color: #438984; }
.hud-difficulty { border-color: #bfe1d4; background: #edf8f1; color: #43836f; }
.hud-difficulty-normal { border-color: #f2dfac; background: #fff8e5; color: #a7792f; }
.hud-difficulty-hard { border-color: #f0c6b9; background: #fff0eb; color: #be624f; }
.hud-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hud-btn { margin-left: 0; border-color: #b9d7d7; background: #fff; color: #456f7d; cursor: pointer; }
.hud-btn:hover { background: #eaf6f3; }
.hud-hint { margin: 8px 2px 2px; color: #547986; font-size: .86rem; font-weight: 620; }
.hud-legend { display: flex; flex-wrap: wrap; gap: 4px 17px; margin-top: 8px; }
.hud-key { color: #66848d; font-size: .73rem; font-weight: 600; }
.hud-tip { color: #dd8267; }
.hud-toast { min-height: 1.3em; margin: 5px 0 0; color: #ad7826; font-size: .78rem; font-weight: 750; }
.touch-controls { display: none; }

.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(26, 62, 78, .48); backdrop-filter: blur(8px); }
.overlay[hidden] { display: none; }
.overlay-card { position: relative; width: 100%; max-width: 450px; overflow: hidden; padding: 34px 32px 28px; border: 1px solid #d1e7e4; border-radius: 24px; background: linear-gradient(145deg, #fcfefa 0, #edf8f5 100%); box-shadow: 0 24px 80px rgba(16, 53, 70, .3); }
.overlay-card::after { position: absolute; right: -25px; bottom: -85px; width: 200px; height: 200px; border-radius: 50%; background: rgba(121, 201, 192, .14); content: ""; }
.win-spark { position: absolute; top: 24px; right: 26px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: #fff1c8; color: #df9c3b; font-size: 25px; transform: rotate(9deg); }
.overlay-kicker { margin: 0 0 3px; color: #4f9694; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.overlay-card h2 { position: relative; z-index: 1; margin: 0 48px 10px 0; color: #234d60; font-size: 1.7rem; font-weight: 900; line-height: 1.25; letter-spacing: -.05em; }
.overlay-card p:not(.overlay-kicker) { position: relative; z-index: 1; margin: 0 0 14px; color: #64838b; font-size: .92rem; }
.overlay-card .countdown { color: #d17d5d; font-size: .78rem; font-weight: 750; }
.overlay-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
button { padding: 10px 16px; border: 1px solid #ed856c; border-radius: 11px; background: var(--coral); color: #fffdf6; font: inherit; font-size: .85rem; font-weight: 820; cursor: pointer; box-shadow: 0 5px 11px rgba(222, 116, 91, .16); }
button:hover { filter: brightness(1.04); transform: translateY(-1px); }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button.ghost { border-color: #bfd9da; background: #f7fcf9; color: #4e7583; box-shadow: none; }
button.quiet { border-color: transparent; background: transparent; color: #528a8a; box-shadow: none; }
button[hidden] { display: none; }

.level-select-overlay { z-index: 12; }
.level-select-card { width: min(100%, 980px); max-height: min(90vh, 900px); overflow: auto; padding: 28px; border: 1px solid #d1e7e4; border-radius: 24px; background: linear-gradient(145deg, #fcfefa 0, #edf8f5 100%); box-shadow: 0 24px 80px rgba(16, 53, 70, .3); }
.level-select-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.level-select-heading .overlay-kicker { margin: 0 0 3px; color: #4f9694; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.level-select-heading h2 { margin: 0; color: #234d60; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 900; line-height: 1.25; letter-spacing: -.05em; }
.select-close { flex: 0 0 auto; }
.selection-intro { margin: 8px 0 16px; color: #64838b; font-size: .86rem; }
.selection-subtitle { margin: 0 0 9px; color: #315d6e; font-size: .87rem; font-weight: 850; }
.mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mode-option { display: flex; min-height: 74px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 11px 14px; border: 1px solid #d1e4e1; border-radius: 13px; background: rgba(255, 255, 255, .8); color: #315f70; text-align: left; box-shadow: none; }
.mode-option strong { font-size: .9rem; }
.mode-option span { color: #698690; font-size: .73rem; font-weight: 600; }
.mode-option[aria-pressed="true"] { border-color: #ec987d; background: #fff5eb; box-shadow: 0 0 0 2px rgba(242, 131, 105, .15); }
.mode-option.mode-hard[aria-pressed="true"] { border-color: #d67b68; background: #fff0eb; }
.selection-progress { margin: 13px 0 2px; color: #55878a; font-size: .78rem; font-weight: 750; }
.level-groups { display: grid; gap: 17px; }
.level-group { padding-top: 13px; border-top: 1px solid rgba(70, 127, 139, .16); }
.level-group h3 { margin: 0 0 9px; color: #43836f; font-size: .83rem; font-weight: 850; }
.level-group-normal h3 { color: #a7792f; }
.level-group-hard h3 { color: #be624f; }
.stage-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.stage-option { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 7px; min-width: 0; min-height: 57px; padding: 7px 8px; border: 1px solid #d8e9e5; border-radius: 11px; background: rgba(255, 255, 255, .72); color: #315d6e; text-align: left; box-shadow: none; }
.stage-option-number { grid-row: 1 / span 2; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #e3f2ed; color: #438985; font-size: .7rem; font-weight: 900; }
.stage-option strong { overflow: hidden; color: #315d6e; font-size: .7rem; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.stage-option small { overflow: hidden; color: #789094; font-size: .61rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.stage-option.is-cleared { border-color: #c1e0d4; background: #f5fbf6; }
.stage-option.is-cleared .stage-option-number { background: #d7eee3; color: #367a69; }
.stage-option.is-current { border-color: #edc181; background: #fff9ed; }
.stage-option.is-current .stage-option-number { background: #ffe9bd; color: #a7792f; }
.stage-option:disabled { cursor: not-allowed; opacity: .64; filter: saturate(.55); }
.stage-option:disabled:hover { transform: none; filter: saturate(.55); }
.stage-option:focus-visible, .mode-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.quick-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 48px; }
.guide-card { display: flex; gap: 13px; min-height: 110px; padding: 17px 17px 15px; border: 1px solid rgba(94, 145, 155, .2); border-radius: 15px; background: rgba(250, 253, 248, .72); box-shadow: 0 5px 18px rgba(77, 137, 145, .06); }
.guide-number { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #e1f2ed; color: #44978f; font-size: .72rem; font-weight: 900; }
.guide-jump .guide-number { background: #fff0dc; color: #d48e3b; }
.guide-collect .guide-number { background: #ffe8e1; color: #db7860; }
.guide-card h2 { margin: 0 0 3px; color: #2c5567; font-size: .98rem; font-weight: 850; }
.guide-card p { margin: 0; color: #6b8790; font-size: .78rem; line-height: 1.55; }
.meimei-gallery { margin: 0 0 52px; padding: 31px 0 35px; border-top: 1px solid rgba(70, 92, 89, .2); border-bottom: 1px solid rgba(70, 92, 89, .2); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 19px; }
.gallery-heading .eyebrow { margin-bottom: 6px; color: #8c674f; font-size: .65rem; }
.gallery-heading .eyebrow span:not(.eyebrow-dot) { color: #bdab98; }
.gallery-heading h2 { margin: 0; color: #2e454a; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.055em; }
.gallery-heading > p { margin: 0 0 2px; color: #788486; font-size: .77rem; line-height: 1.75; text-align: right; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.photo-card { min-width: 0; margin: 0; }
.photo-card img { display: block; width: 100%; aspect-ratio: 1.08; object-fit: cover; background: #e5e1d9; }
.photo-card figcaption { display: grid; gap: 5px; padding: 10px 1px 0; }
.photo-card figcaption span { color: #9a806d; font-size: .59rem; font-weight: 700; letter-spacing: .1em; }
.photo-card figcaption strong { overflow: hidden; color: #3d5052; font-size: .79rem; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.about-section { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 34px; align-items: start; max-width: 920px; padding: 27px 4px 4px; border-top: 1px solid rgba(70, 127, 139, .2); }
.about-heading .eyebrow { margin-bottom: 5px; }
.about-heading h2 { margin: 0; color: #285267; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; line-height: 1.3; letter-spacing: -.06em; }
.about-section > p { margin: 4px 0 0; color: #607e88; font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 30px; }
.card { padding: 17px 18px; border: 1px solid rgba(94, 145, 155, .2); border-radius: 14px; background: rgba(250, 253, 248, .78); }
.card p { margin: 0; color: #698690; font-size: .84rem; }
table { width: 100%; margin: 15px 0 27px; border-collapse: collapse; overflow: hidden; border: 1px solid #cfe2e2; border-radius: 12px; background: rgba(250, 253, 248, .75); font-size: .9rem; }
caption { padding: 0 0 9px; text-align: left; }
th, td { padding: 10px 12px; border-bottom: 1px solid #dbe9e8; text-align: left; vertical-align: top; }
th { color: #54808c; font-size: .73rem; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
kbd { padding: 1px 6px; border: 1px solid #b8d0d2; border-bottom-width: 2px; border-radius: 5px; background: #f6fbf8; color: #315f70; font: 750 .84em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 21px 0 18px; }
.difficulty-section { margin: 30px 0; }
.difficulty-section h2 { margin: 0 0 11px; }
.difficulty-section > p { margin: 0 0 14px; color: #6b8790; font-size: .85rem; }
.difficulty-title { display: flex; align-items: center; gap: 10px; }
.difficulty-title span { padding: 3px 9px; border: 1px solid #bfe1d4; border-radius: 999px; background: #edf8f1; color: #43836f; font-size: .68rem; letter-spacing: 0; }
.difficulty-normal .difficulty-title span { border-color: #f2dfac; background: #fff8e5; color: #a7792f; }
.difficulty-hard .difficulty-title span { border-color: #f0c6b9; background: #fff0eb; color: #be624f; }
.map-card { display: flex; align-items: flex-start; gap: 14px; min-height: 90px; padding: 16px; border: 1px solid rgba(94, 145, 155, .2); border-radius: 15px; background: rgba(250, 253, 248, .72); }
.map-card[href] { color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.map-card[href]:hover, .map-card[href]:focus-visible { border-color: rgba(71, 170, 169, .55); box-shadow: 0 7px 18px rgba(52, 108, 129, .1); transform: translateY(-2px); }
.map-card[aria-disabled="true"] { opacity: .58; filter: saturate(.55); }
.map-cleared { border-color: rgba(71, 170, 137, .32); }
.map-current { border-color: rgba(230, 170, 77, .5); background: #fff9ed; }
.map-current > span { background: #ffe9bd; color: #a7792f; }
.map-card > span { flex: 0 0 auto; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #e4f2ee; color: #438985; font-size: .76rem; font-weight: 900; }
.map-card h2 { margin: 0 0 2px; font-size: .98rem; }
.map-card p { margin: 0; color: #6b8790; font-size: .8rem; }
.map-final { border-color: rgba(242, 131, 105, .36); background: rgba(255, 248, 235, .86); }
.map-final > span { background: #ffebe0; color: #d9755d; }
.map-note { max-width: 72ch; margin: 21px 0; padding: 14px 16px; border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; background: rgba(223, 242, 237, .6); color: #557987; font-size: .87rem; }
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 22px 28px 38px; border-top: 1px solid rgba(70, 127, 139, .18); color: #66828a; font-size: .8rem; }
.site-footer p { margin: 4px 0; }
.site-footer strong { color: #315f70; }
.site-footer a { color: #39898d; }
.muted { color: #8aa0a1; font-size: .76rem; }
.notice { margin: 8px; padding: 12px 14px; border: 1px solid #e8d29d; border-radius: 10px; background: #fff7e2; color: #896b35; }

@media (min-width: 1440px) and (min-height: 680px) {
  .site-header, main, .site-footer { position: relative; z-index: 1; }
  .photo-rail {
    position: fixed;
    z-index: 0;
    top: 145px;
    bottom: 68px;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 13px;
    width: clamp(105px, calc(50vw - 644px), 250px);
    pointer-events: none;
  }
  .photo-rail-left { left: max(14px, calc(50vw - 870px)); }
  .photo-rail-right { right: max(14px, calc(50vw - 870px)); }
  .photo-rail figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; margin: 0; border: 1px solid #d8d0c4; background: rgba(252, 251, 247, .84); box-shadow: 0 9px 24px rgba(44, 57, 55, .09); }
  .photo-rail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; opacity: .9; }
  .photo-rail figcaption { padding: 5px 7px 6px; color: #76695d; font-size: .63rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
}

@media (max-width: 760px) {
  main { padding: 30px 18px 42px; }
  .site-header { padding: 14px 18px; }
  .intro { grid-template-columns: minmax(0, 1fr) minmax(270px, .9fr); gap: 24px; padding-bottom: 39px; }
  .intro h1 { font-size: clamp(2.45rem, 6.2vw, 3.35rem); }
  .intro-stats { gap: 7px 11px; }
  .quick-guide { grid-template-columns: 1fr; margin-bottom: 34px; }
  .guide-card { min-height: unset; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .about-section { grid-template-columns: 1fr; gap: 10px; }
  .map-grid { grid-template-columns: 1fr; }
  .stage-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .site-header { align-items: flex-start; }
  .site-header nav { gap: 13px; }
  .site-header nav a { font-size: .76rem; }
  .brand { font-size: 15px; }
  main { padding: 25px 12px 38px; }
  h1 br { display: block; }
  h1 { font-size: clamp(2.65rem, 13vw, 3.5rem); }
  .intro { grid-template-columns: 1fr; gap: 23px; padding: 7px 3px 31px; }
  .intro h1 { font-size: clamp(2.7rem, 12vw, 3.55rem); }
  .intro .lede { max-width: 37ch; }
  .intro-portrait { width: min(100%, 430px); }
  .intro-portrait img { aspect-ratio: 1.14; }
  .intro-stats { gap: 6px 13px; font-size: .65rem; }
  .eyebrow { flex-wrap: wrap; gap: 6px; font-size: .65rem; }
  .stage-shell { padding: 6px; border-radius: 15px; }
  .stage-frame { border-radius: 10px; }
  .stage-topline { padding: 0 5px 7px; font-size: .65rem; }
  #hud { padding: 9px 3px 3px; }
  .hud-bar { gap: 6px; }
  .hud-name { order: 4; width: 100%; }
   .hud-difficulty { order: 2; }
  .hud-legend { gap: 5px 11px; }
  .hud-key { font-size: .67rem; }
  .touch-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
  .touch-key { min-width: 0; min-height: 45px; padding: 6px 3px; border-color: #bed8d9; border-radius: 11px; background: #edf7f4; color: #416a78; font-size: .78rem; touch-action: none; user-select: none; box-shadow: none; }
  .touch-key.is-down { border-color: #e77c63; background: var(--coral); color: white; transform: translateY(1px); }
  .overlay-card { padding: 27px 22px 22px; border-radius: 19px; }
  .overlay-card h2 { font-size: 1.45rem; }
  .level-select-card { max-height: 92vh; padding: 20px 14px 16px; border-radius: 18px; }
  .level-select-heading { gap: 8px; }
  .level-select-heading h2 { font-size: 1.35rem; }
  .select-close { padding: 7px 9px; font-size: .7rem; }
  .mode-options { gap: 6px; }
  .mode-option { min-height: 70px; padding: 9px 8px; }
  .mode-option strong { font-size: .77rem; }
  .mode-option span { font-size: .62rem; line-height: 1.35; }
  .stage-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-option { min-height: 54px; }
  .overlay-actions { gap: 7px; }
  .overlay-actions button { padding: 9px 12px; font-size: .77rem; }
  th, td { padding: 8px 7px; font-size: .78rem; }
  .cards { grid-template-columns: 1fr; }
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .gallery-heading > p { text-align: left; }
  .photo-grid { gap: 17px 10px; }
  .photo-card figcaption strong { font-size: .7rem; }
  .photo-card figcaption span { font-size: .53rem; }
  .meimei-gallery { margin-bottom: 38px; padding: 25px 0 28px; }
  .site-footer { padding: 18px 14px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  button:hover { transform: none; }
}