:root {
  --joystick-opacity: 0.6;
  --joystick-scale: 1;
  --attack-opacity: 0.88;
  --attack-scale: 1;
  color-scheme: light;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #57454f;
  background: #f6ecef;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background-color: #f6ecef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='13' cy='17' r='1' fill='%23b996a4' fill-opacity='.12'/%3E%3Ccircle cx='58' cy='42' r='1.4' fill='%23b996a4' fill-opacity='.1'/%3E%3C/svg%3E");
}

body.is-playing {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.is-playing .page-shell,
body.is-playing .game-screen,
body.is-playing .game-frame,
body.is-playing canvas,
body.is-playing .touch-controls {
  touch-action: none;
}

button, kbd { font: inherit; }

.page-shell {
  width: 100%;
  min-height: 100vh;
}

.home-screen {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(20px, 4vw, 52px) max(18px, calc((100vw - 1240px) / 2));
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.82) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 32%, rgba(226,160,183,0.2) 0 80px, transparent 82px),
    linear-gradient(145deg, #fff8f7 0%, #f9e8ee 48%, #f5dce6 100%);
}

.home-screen::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(255,247,248,0.84), rgba(247,226,235,0.9)), var(--home-stage-art);
  background-position: center;
  background-size: cover;
  content: "";
  opacity: 0.72;
  transition: background-image 220ms ease;
}

.home-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.home-header h1 { font-size: clamp(2rem, 5vw, 4rem); }
.home-subtitle { margin: 10px 0 0; color: #846b77; font-weight: 650; }

.home-best {
  min-width: 150px;
  padding: 12px 18px;
  display: grid;
  justify-items: center;
  border: 2px dashed #c790a7;
  border-radius: 21px 25px 20px 24px;
  background: rgba(255, 250, 248, 0.88);
  box-shadow: 4px 5px 0 rgba(135,86,106,0.13);
}

.home-best span { color: #9b7686; font-size: 0.75rem; font-weight: 800; }
.home-best strong { color: #9e607a; font-size: 1.65rem; font-variant-numeric: tabular-nums; }

.adventure-notebook {
  min-height: min(720px, calc(100dvh - 165px));
  display: grid;
  grid-template-columns: minmax(265px, 0.72fr) minmax(480px, 1.55fr);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.92);
  border-radius: 32px 38px 30px 36px;
  outline: 2px dashed #c792a7;
  outline-offset: -11px;
  background: #fffaf8;
  box-shadow: 9px 13px 0 rgba(117,79,96,0.16), 0 22px 60px rgba(136,88,109,0.14);
}

.stage-directory {
  min-width: 0;
  padding: 30px 24px;
  border-right: 3px dashed #d6aabd;
  background:
    linear-gradient(90deg, transparent 0 34px, rgba(218,150,177,0.25) 35px 36px, transparent 37px),
    repeating-linear-gradient(#fff7f4 0 35px, #eadde3 36px, #fff7f4 37px);
}

.directory-heading { margin: 0 0 17px 24px; }
.directory-heading p { margin: 0; color: #c27693; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.2em; }
.directory-heading h2 { margin: 2px 0 0; color: #765563; font-size: 1.18rem; }
.stage-directory .stage-options { display: grid; grid-template-columns: 1fr; gap: 7px; }

.stage-directory .stage-card {
  min-width: 0;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 16px 20px 15px 19px;
  color: #70545f;
  background: rgba(255,250,248,0.72);
  box-shadow: none;
  text-align: left;
}

.stage-card > span:last-child { min-width: 0; display: grid; gap: 1px; }
.stage-card strong { overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.stage-card small { overflow: hidden; color: #947a85; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.stage-number { color: #c17c98; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 900; }
.stage-directory .stage-card.is-selected { border-color: #bd7895; color: #fff; background: #cb839f; box-shadow: 3px 4px 0 #986277; }
.stage-directory .stage-card.is-selected .stage-number,
.stage-directory .stage-card.is-selected small { color: #fff4f7; }
.stage-directory .stage-card.is-locked { opacity: 0.46; cursor: not-allowed; }

.stage-preview {
  position: relative;
  min-width: 0;
  padding: clamp(26px, 4vw, 52px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(238,176,198,0.25) 0 4px, transparent 5px),
    linear-gradient(160deg, rgba(255,252,249,0.96), rgba(253,236,241,0.94));
}

.stage-preview::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 22px;
  border-left: 2px dashed rgba(204,143,168,0.34);
  content: "";
}

.stage-preview-art {
  position: relative;
  height: clamp(150px, 24vw, 245px);
  margin-bottom: 20px;
  overflow: hidden;
  border: 3px dashed #d6a2b6;
  border-radius: 26px 32px 24px 30px;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 190px;
  background: #f7e5ea;
  box-shadow: 5px 7px 0 rgba(126,86,103,0.12);
}

.stage-preview-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 180ms ease;
}

.cover-cats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cover-cat {
  position: absolute;
  width: clamp(54px, 8vw, 88px);
  height: auto;
  filter: drop-shadow(0 5px 1px rgba(107,78,89,0.16));
}

.cover-attack-cat {
  bottom: 24%;
  left: 11%;
  transform: rotate(-2deg);
}

.cover-support-cat {
  bottom: 8%;
  left: 23%;
  transform: rotate(2deg) scale(0.94);
}

.cover-chapter-tag {
  position: absolute;
  top: 13px;
  left: 15px;
  padding: 6px 11px;
  border: 2px dashed rgba(152,103,124,0.62);
  border-radius: 13px 16px 12px 15px;
  color: #805a6b;
  background: rgba(255,249,247,0.84);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  backdrop-filter: blur(3px);
}

.preview-cloud { position: absolute; width: 80px; height: 26px; border-radius: 50%; background: rgba(255,250,248,0.84); box-shadow: 22px -12px 0 rgba(255,250,248,0.84), 45px 1px 0 rgba(255,250,248,0.84); }
.cloud-one { top: 34px; left: 11%; }
.cloud-two { top: 58px; right: 18%; transform: scale(0.7); }
.preview-hill { position: absolute; bottom: -80px; width: 58%; height: 175px; border-radius: 50% 50% 0 0; background: #e4acc0; }
.hill-one { left: -8%; transform: rotate(7deg); }
.hill-two { right: -11%; background: #d998b1; transform: rotate(-7deg); }
.preview-castle { position: absolute; right: 16%; bottom: 52px; width: 78px; height: 74px; border: 4px solid #a87389; border-radius: 12px 12px 5px 5px; background: #f7d7e2; box-shadow: -40px 17px 0 -13px #f2c1d3, 40px 17px 0 -13px #f2c1d3; }
.preview-castle::before { position: absolute; top: -29px; left: 20px; border-right: 17px solid transparent; border-bottom: 29px solid #ae7189; border-left: 17px solid transparent; content: ""; }
.preview-cat { position: absolute; bottom: 28px; left: 20%; width: 66px; height: 58px; border: 5px solid #947682; border-radius: 43% 45% 38% 41%; background: #fff6ef; box-shadow: inset 12px 10px 0 #efc4b3; }
.preview-cat::before,
.preview-cat::after { position: absolute; top: -16px; width: 23px; height: 24px; transform: rotate(45deg); border: 5px solid #947682; border-right: 0; border-bottom: 0; background: #fff1eb; content: ""; }
.preview-cat::before { left: 5px; }
.preview-cat::after { right: 5px; }

/* Each notebook chapter reuses the paper-cut preview pieces with its own scene. */
[data-stage-theme="creamGarden"] .stage-preview-art {
  background:
    radial-gradient(circle at 17% 39%, rgba(255,248,250,0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 73% 30%, rgba(239,176,198,0.54) 0 7px, transparent 8px),
    linear-gradient(#fce6ec 0 57%, #f3bed0 58% 100%);
}
[data-stage-theme="creamGarden"] .preview-hill { background: #dca8bb; }
[data-stage-theme="creamGarden"] .hill-two { background: #efc0cf; }
[data-stage-theme="creamGarden"] .preview-castle { background: #fff0e8; }

[data-stage-theme="ribbonHill"] .stage-preview-art {
  background:
    repeating-linear-gradient(150deg, rgba(255,249,251,0.45) 0 9px, transparent 10px 25px),
    linear-gradient(#eadced 0 53%, #d8a9c5 54% 100%);
}
[data-stage-theme="ribbonHill"] .preview-hill { bottom: -101px; background: #be91b2; transform: rotate(13deg); }
[data-stage-theme="ribbonHill"] .hill-two { background: #dfa9c4; transform: rotate(-15deg); }
[data-stage-theme="ribbonHill"] .preview-castle { border-style: dashed; background: #efd9e8; }

[data-stage-theme="roseGate"] .stage-preview-art {
  background:
    radial-gradient(circle at 23% 38%, #d7849f 0 9px, transparent 10px),
    radial-gradient(circle at 77% 25%, #c86989 0 11px, transparent 12px),
    linear-gradient(#f5d8df 0 55%, #cb7f9c 56% 100%);
}
[data-stage-theme="roseGate"] .preview-cloud { opacity: 0.42; }
[data-stage-theme="roseGate"] .preview-hill { background: #b76582; }
[data-stage-theme="roseGate"] .hill-two { background: #d4869f; }
[data-stage-theme="roseGate"] .preview-castle { right: 12%; border-color: #925168; background: #f3c9d6; box-shadow: -40px 17px 0 -13px #d5879f, 40px 17px 0 -13px #d5879f; }

[data-stage-theme="cloudStation"] .stage-preview-art {
  background:
    linear-gradient(118deg, transparent 0 41%, rgba(184,175,211,0.38) 42% 45%, transparent 46% 100%),
    linear-gradient(#dce4f3 0 60%, #c6b8db 61% 100%);
}
[data-stage-theme="cloudStation"] .preview-cloud { background: rgba(255,255,255,0.92); box-shadow: 22px -12px 0 rgba(255,255,255,0.92), 45px 1px 0 rgba(255,255,255,0.92); }
[data-stage-theme="cloudStation"] .cloud-one { top: 23px; left: 21%; transform: scale(1.18); }
[data-stage-theme="cloudStation"] .cloud-two { top: 76px; right: 7%; transform: scale(0.95); }
[data-stage-theme="cloudStation"] .preview-hill { background: #a9b7d4; }
[data-stage-theme="cloudStation"] .hill-two { background: #d1b7d8; }
[data-stage-theme="cloudStation"] .preview-castle { width: 98px; height: 52px; bottom: 62px; border-radius: 23px 10px 10px 23px; background: #f2e8f1; }

[data-stage-theme="puddingMarsh"] .stage-preview-art {
  background:
    radial-gradient(ellipse at 68% 78%, rgba(255,228,190,0.48) 0 20px, transparent 21px),
    radial-gradient(ellipse at 30% 69%, rgba(209,148,112,0.32) 0 14px, transparent 15px),
    linear-gradient(#f4d5c7 0 51%, #bd826f 52% 100%);
}
[data-stage-theme="puddingMarsh"] .preview-cloud { opacity: 0.32; }
[data-stage-theme="puddingMarsh"] .preview-hill { bottom: -68px; border-radius: 48% 48% 18% 18%; background: #c58070; }
[data-stage-theme="puddingMarsh"] .hill-two { background: #e0ac92; }
[data-stage-theme="puddingMarsh"] .preview-castle { bottom: 46px; border-radius: 38px 38px 12px 12px; border-color: #936b68; background: #f0c7a9; }

[data-stage-theme="pigeonRoof"] .stage-preview-art {
  background:
    repeating-linear-gradient(135deg, rgba(255,244,239,0.2) 0 2px, transparent 3px 18px),
    linear-gradient(#d8c5d0 0 50%, #8c7185 51% 100%);
}
[data-stage-theme="pigeonRoof"] .preview-cloud { background: rgba(251,242,247,0.56); box-shadow: 22px -12px 0 rgba(251,242,247,0.56), 45px 1px 0 rgba(251,242,247,0.56); }
[data-stage-theme="pigeonRoof"] .preview-hill { bottom: -110px; border-radius: 14px 14px 0 0; background: #746377; transform: rotate(13deg); }
[data-stage-theme="pigeonRoof"] .hill-two { background: #aa7f93; transform: rotate(-13deg); }
[data-stage-theme="pigeonRoof"] .preview-castle { width: 92px; height: 51px; bottom: 55px; border-color: #69566a; background: #e2ceda; }

[data-stage-theme="candyFactory"] .stage-preview-art {
  background:
    repeating-linear-gradient(90deg, rgba(255,246,247,0.22) 0 12px, transparent 13px 27px),
    linear-gradient(#e6bfd9 0 54%, #c477a6 55% 100%);
}
[data-stage-theme="candyFactory"] .preview-cloud { opacity: 0.38; }
[data-stage-theme="candyFactory"] .preview-hill { background: #ad6592; }
[data-stage-theme="candyFactory"] .hill-two { background: #e099bd; }
[data-stage-theme="candyFactory"] .preview-castle { border-width: 6px; border-radius: 25px 10px 25px 10px; border-color: #875070; background: #f6d1e5; box-shadow: -40px 17px 0 -13px #e69ec4, 40px 17px 0 -13px #e69ec4; }

[data-stage-theme="moonForest"] .stage-preview-art {
  background:
    radial-gradient(circle at 76% 25%, rgba(255,239,204,0.84) 0 17px, transparent 18px),
    linear-gradient(#61566f 0 57%, #3d435a 58% 100%);
}
[data-stage-theme="moonForest"] .preview-cloud { opacity: 0.24; }
[data-stage-theme="moonForest"] .preview-hill { bottom: -52px; width: 44%; height: 190px; border-radius: 50% 50% 0 0; background: #394052; }
[data-stage-theme="moonForest"] .hill-two { background: #56506c; }
[data-stage-theme="moonForest"] .preview-castle { border-color: #dbbed1; background: #82708d; box-shadow: -40px 17px 0 -13px #58536d, 40px 17px 0 -13px #58536d; }
[data-stage-theme="moonForest"] .preview-cat { border-color: #655468; background: #f5e4df; }

[data-stage-theme="stormRoof"] .stage-preview-art {
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(255,246,239,0.7) 49% 51%, transparent 52% 100%),
    linear-gradient(#8b7b92 0 55%, #66586e 56% 100%);
}
[data-stage-theme="stormRoof"] .preview-cloud { background: rgba(224,216,229,0.72); box-shadow: 22px -12px 0 rgba(224,216,229,0.72), 45px 1px 0 rgba(224,216,229,0.72); }
[data-stage-theme="stormRoof"] .cloud-one { top: 20px; left: 8%; transform: scale(1.3); }
[data-stage-theme="stormRoof"] .preview-hill { bottom: -112px; border-radius: 10px 10px 0 0; background: #55485b; }
[data-stage-theme="stormRoof"] .hill-two { background: #806377; }
[data-stage-theme="stormRoof"] .preview-castle { border-color: #e4bfd0; background: #907489; }

[data-stage-theme="starCastle"] .stage-preview-art {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,244,208,0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 53% 18%, rgba(255,244,208,0.86) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 32%, rgba(255,244,208,0.84) 0 2px, transparent 3px),
    linear-gradient(#55466b 0 57%, #846486 58% 100%);
}
[data-stage-theme="starCastle"] .preview-cloud { opacity: 0.18; }
[data-stage-theme="starCastle"] .preview-hill { background: #71566f; }
[data-stage-theme="starCastle"] .hill-two { background: #a47b9d; }
[data-stage-theme="starCastle"] .preview-castle { right: 13%; width: 88px; height: 84px; border-color: #f4d5bd; background: #c6a1bf; box-shadow: -40px 17px 0 -13px #8e6f93, 40px 17px 0 -13px #8e6f93; }
[data-stage-theme="starCastle"] .preview-castle::before { border-bottom-color: #f0cfc1; }

.preview-number { margin: 0; color: #be7693; font: 800 0.78rem Georgia, serif; letter-spacing: 0.15em; }
.stage-preview h2 { margin: 5px 0 8px; color: #684b59; font-size: clamp(1.75rem, 4vw, 3.15rem); }
.preview-description { max-width: 650px; margin: 0 0 20px; color: #7e6571; font-size: 0.96rem; line-height: 1.65; }
.stage-facts { margin: 0 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.stage-facts div { padding: 10px 13px; border: 2px dashed #d6a7b9; border-radius: 14px 17px 13px 16px; background: rgba(255,250,248,0.72); }
.stage-facts dt { color: #a47788; font-size: 0.68rem; font-weight: 800; }
.stage-facts dd { margin: 2px 0 0; color: #704f5d; font-size: 0.86rem; font-weight: 850; }
.home-mode-panel h3 { margin: 0 0 8px; color: #745665; font-size: 0.88rem; }
.home-mode-panel .mode-actions { max-width: 620px; }
.home-mode-panel .choice-card { min-height: 58px; }
.stage-preview .menu-primary-actions { justify-content: flex-start; }
.home-tip { margin: 16px 0 0; color: #937481; font-size: 0.75rem; }

.online-panel {
  max-width: 700px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 2px dashed rgba(198, 132, 157, 0.72);
  border-radius: 15px 18px 14px 17px;
  background: rgba(255, 250, 248, 0.62);
}

.online-panel h3 { margin: 0 0 4px; color: #745665; font-size: 0.88rem; }
.online-panel p { margin: 0; color: #8b6c7b; font-size: 0.72rem; line-height: 1.45; }
.online-actions { margin: 9px 0 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.online-actions label { color: #876675; font-size: 0.72rem; font-weight: 800; }
.online-actions input {
  width: 104px;
  min-height: 42px;
  padding: 7px 10px;
  border: 2px solid #d5a8b8;
  border-radius: 12px 14px 11px 13px;
  color: #704f5d;
  background: rgba(255,255,255,0.82);
  font: 800 1rem/1 monospace;
  letter-spacing: 0.18em;
  text-align: center;
}

.room-status { font-weight: 750; }
.room-status.is-connected { color: #547f6b; }
.room-status.is-error { color: #a95467; }

.game-screen {
  width: min(100% - 28px, 1040px);
  margin-inline: auto;
  padding: 26px 0;
}

.game-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 4px;
  color: #bd718d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

h1 {
  margin: 0;
  color: #664c5a;
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  line-height: 1;
}

.scoreboard { display: flex; gap: 9px; }

.scoreboard div {
  min-width: 86px;
  padding: 7px 14px;
  display: grid;
  justify-items: center;
  border: 2px dashed #cfa2b2;
  border-radius: 15px 18px 14px 17px;
  background: #fffaf8;
  box-shadow: 3px 4px 0 rgba(133, 96, 112, 0.12);
}

.scoreboard span { color: #957987; font-size: 0.72rem; }
.scoreboard strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.game-frame {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border: 5px solid #fffaf8;
  border-radius: 24px 27px 23px 26px;
  outline: 2px dashed #c99cad;
  outline-offset: -8px;
  background: #fffaf7;
  box-shadow: 6px 9px 0 rgba(119, 83, 99, 0.16);
}

canvas { display: block; width: 100%; height: 100%; }

.install-status {
  margin: 9px 0 0;
  color: #8b6c7b;
  font-size: 0.72rem;
  line-height: 1.35;
}

.touch-controls {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 10px;
  left: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.touch-controls[hidden] { display: none; }

.touch-player {
  display: grid;
  gap: 4px;
  pointer-events: auto;
}

.touch-player > strong {
  color: rgba(103, 71, 87, 0.9);
  font-size: 0.66rem;
  text-align: left;
  text-shadow: 0 1px #fffaf8;
}

.touch-player-two > strong { text-align: right; }

.touch-control-row {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-start;
}

.touch-player-two .touch-control-row { justify-content: flex-end; }

.touch-joystick {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border: 2px solid rgba(135, 86, 106, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,250,248,0.26) 0 28%, transparent 29%),
    rgba(255, 250, 248, 0.2);
  box-shadow: inset 0 0 0 5px rgba(255,250,248,0.15), 1px 2px 0 rgba(108,73,89,0.12);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  opacity: var(--joystick-opacity);
  scale: var(--joystick-scale);
}

.touch-joystick::before,
.touch-joystick::after {
  position: absolute;
  inset: 13px 47px;
  border-radius: 2px;
  background: rgba(135, 86, 106, 0.1);
  content: "";
  pointer-events: none;
}

.touch-joystick::after { transform: rotate(90deg); }

.touch-joystick-knob {
  --stick-x: 0px;
  --stick-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));
  border: 2px solid rgba(135, 86, 106, 0.48);
  border-radius: 50%;
  background: rgba(252, 200, 220, 0.58);
  box-shadow: 1px 2px 0 rgba(108, 73, 89, 0.22), inset 0 0 0 5px rgba(255,250,248,0.18);
  pointer-events: none;
}

.touch-joystick.is-active .touch-joystick-knob {
  background: rgba(196, 111, 145, 0.68);
  box-shadow: 1px 2px 0 rgba(108, 73, 89, 0.25), inset 0 0 0 5px rgba(255,250,248,0.16);
}

.touch-button {
  min-width: 0;
  min-height: 40px;
  padding: 4px;
  border: 2px solid rgba(135, 86, 106, 0.82);
  border-radius: 14px 16px 13px 15px;
  color: #744e60;
  background: rgba(255, 250, 248, 0.82);
  box-shadow: 2px 3px 0 rgba(108, 73, 89, 0.5);
  font-size: 0.68rem;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.touch-button.is-pressed {
  transform: translateY(2px) scale(0.96);
  color: #fffaf8;
  background: rgba(196, 111, 145, 0.94);
  box-shadow: 0 1px 0 rgba(108, 73, 89, 0.5);
}

.touch-attack {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  color: #fffaf8;
  background: rgba(196, 111, 145, 1);
  font-size: 0.76rem;
  opacity: var(--attack-opacity);
  scale: var(--attack-scale);
}

.touch-controls.single-player {
  grid-template-columns: 1fr;
}

.touch-controls.single-player .touch-player-one .touch-control-row { justify-content: space-between; }
.touch-controls.single-player .touch-player-two { display: none; }
.touch-controls.online-host .touch-player-two { display: none; }
.touch-controls.online-host { grid-template-columns: 1fr; }
.touch-controls.online-host .touch-control-row { justify-content: space-between; }
.touch-controls.online-guest .touch-player-one { display: none; }
.touch-controls.online-guest { grid-template-columns: 1fr; }
.touch-controls.online-guest .touch-control-row { justify-content: space-between; }
.touch-controls.online-guest .touch-attack { order: 2; }
.touch-controls.online-guest .touch-joystick { order: 1; }
.touch-controls.online-guest .touch-player-two > strong { text-align: left; }

.frame-menu-action {
  position: absolute;
  z-index: 5;
  top: 76px;
  right: 16px;
  min-width: 76px;
  padding: 6px 13px;
  border-width: 2px;
  font-size: 0.76rem;
}

.coop-hud {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 16px;
  left: 16px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) minmax(180px, 1fr);
  gap: 12px;
  align-items: start;
  pointer-events: none;
}

.coop-hud.single-player {
  right: auto;
  left: 50%;
  width: min(calc(100% - 32px), 620px);
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px);
  transform: translateX(-50%);
}

.player-hud,
.stage-hud {
  min-height: 50px;
  padding: 7px 12px;
  border: 2px dashed rgba(153, 112, 130, 0.62);
  border-radius: 15px 18px 14px 17px;
  background: rgba(255, 250, 248, 0.88);
  box-shadow: 2px 3px 0 rgba(116, 83, 98, 0.12);
}

.player-hud { display: grid; gap: 2px; font-size: 0.73rem; }
.player-hud strong { color: #745665; font-size: 0.79rem; }
.player-two-hud { text-align: right; }
.player-status { color: #806b75; line-height: 1.2; }

.health-readout {
  display: grid;
  grid-template-columns: auto minmax(56px, 1fr);
  gap: 7px;
  align-items: center;
}

.health-text {
  color: #82586b;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.health-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid #c99bad;
  border-radius: 999px;
  background: #eadde3;
  box-shadow: inset 0 1px 1px rgba(104, 73, 88, 0.15);
}

.health-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d77f9b, #edaabe);
  transition: width 180ms ease-out;
}

.boss-health-hud {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.boss-health-hud[hidden] { display: none; }
.boss-health-text { color: #8b4e68; font-size: 0.72rem; }
.boss-health-meter { height: 9px; border-color: #b8758f; background: #dfcdd5; }
.boss-health-fill { background: linear-gradient(90deg, #ad5e7b, #db809e); }

.stage-hud { text-align: center; }
.stage-hud strong { display: block; margin-bottom: 5px; font-size: 0.82rem; }
.weather-status {
  margin: -2px 0 5px;
  overflow: hidden;
  color: #8a6678;
  font-size: 0.61rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #c9a1b1;
  border-radius: 999px;
  background: #f2e5ea;
}

#progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #c9829e;
  transition: width 180ms linear;
}

.heart {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 1px 8px 1px 3px;
  transform: rotate(45deg);
  border-radius: 2px;
  background: #c97991;
  vertical-align: middle;
}

.heart::before,
.heart::after {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.heart::before { left: -5px; }
.heart::after { top: -5px; }
.heart-empty { background: #d8c8ce; }

.player-hud strong::after {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  transform: rotate(-12deg);
  border: 2px solid #ac7d91;
  border-radius: 50%;
  content: "";
}

.overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: rgba(91, 68, 80, 0.18);
}

.overlay-card {
  width: min(100%, 760px);
  max-height: 100%;
  padding: 23px 25px;
  overflow: auto;
  text-align: center;
  border: 3px dashed #c590a6;
  border-radius: 23px 27px 21px 25px;
  background: #fffaf8;
  box-shadow: 5px 7px 0 rgba(94, 66, 79, 0.18);
}

.overlay-kicker {
  margin: 0 0 4px !important;
  color: #b56f8a !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.overlay h2 { margin: 4px 0 8px; font-size: 1.65rem; }
.overlay p { margin: 0 auto 17px; color: #765f6b; line-height: 1.48; }

.menu-section { margin-top: 12px; }

.menu-section h3,
.tutorial-items h3 {
  margin: 0 0 8px;
  color: #745665;
  font-size: 0.9rem;
}

.control-settings { width: min(100%, 680px); margin-inline: auto; }
.control-settings > p { margin-bottom: 11px; }
.home-settings-overlay {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(91, 68, 80, 0.24);
}

.home-settings-card {
  width: min(100%, 720px);
  max-height: 100%;
  padding: 21px 23px;
  overflow: auto;
  border: 3px dashed #c590a6;
  border-radius: 23px 27px 21px 25px;
  background: #fffaf8;
  box-shadow: 5px 7px 0 rgba(94, 66, 79, 0.18);
}

.home-settings-card h2 { margin: 0 0 5px; color: #684b59; text-align: center; }
.home-settings-card > p { margin: 0 0 12px; color: #826976; font-size: 0.8rem; text-align: center; }
.control-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; align-items: center; }
.control-settings-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.control-settings-fields label { margin-top: 3px; display: flex; justify-content: space-between; gap: 12px; color: #735764; font-size: 0.75rem; font-weight: 800; }
.control-settings-fields output { min-width: 48px; color: #ad6883; font-variant-numeric: tabular-nums; text-align: right; }
.control-settings-fields input[type="range"] { width: 100%; min-height: 30px; accent-color: #c87996; touch-action: pan-x; }
.control-settings-preview {
  min-height: 145px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  overflow: hidden;
  border: 2px dashed #d1a2b4;
  border-radius: 16px 19px 15px 18px;
  background: linear-gradient(#fbe3e7 0 32%, #e5b9a3 33% 62%, #c3d09f 63% 70%, #efd3b9 71%);
}

.settings-preview-joystick { flex: 0 0 auto; }
.settings-preview-attack { display: grid; place-items: center; flex: 0 0 auto; }
.settings-actions { margin-top: 13px; display: flex; justify-content: center; gap: 9px; }

.mode-actions,
.result-actions,
.pause-actions,
.return-menu-actions,
.menu-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.menu-primary-actions { margin-top: 14px; }
.return-menu-actions { margin-top: 10px; }

.choice-card {
  min-width: 0;
  padding: 9px 11px;
  display: grid;
  gap: 2px;
  border-width: 2px;
  color: #725663;
  background: #fffaf8;
  box-shadow: 2px 3px 0 #c9a5b2;
  text-align: left;
}

.choice-card strong { font-size: 0.86rem; }
.choice-card span { color: #907681; font-size: 0.68rem; font-weight: 600; line-height: 1.25; }
.choice-card.is-selected { border-style: solid; color: #fffaf8; background: #c87996; box-shadow: 2px 3px 0 #87566a; }
.choice-card.is-selected span { color: #fff5f8; }
.choice-card.is-locked { opacity: 0.48; cursor: not-allowed; }

.tutorial-item-grid {
  margin: 0 0 13px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.tutorial-item-grid li {
  min-height: 88px;
  padding: 10px 8px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 2px dashed #d0a1b3;
  border-radius: 15px 18px 14px 17px;
  background: #fff5f3;
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.tutorial-item-grid li:not(.is-current) { opacity: 0.58; }
.tutorial-item-grid li.is-current {
  border-style: solid;
  border-color: #b86f8b;
  background: #fff9f8;
  box-shadow: 2px 3px 0 rgba(135, 86, 106, 0.18);
  transform: translateY(-2px);
}
.tutorial-item-grid strong { color: #9c6078; font-size: 0.82rem; }
.tutorial-item-grid span { color: #806b75; font-size: 0.68rem; line-height: 1.32; }

.tutorial-item-symbol { position: relative; width: 30px; height: 30px; margin: 0 auto 2px; display: block; }
.shield-symbol {
  border: 3px solid #759fb4;
  border-radius: 12px 12px 16px 16px;
  background: #b9d8e4;
  clip-path: polygon(8% 4%, 92% 4%, 84% 67%, 50% 100%, 16% 67%);
}
.heal-symbol { transform: rotate(-45deg); }
.heal-symbol::before,
.heal-symbol::after { position: absolute; background: #e4a0b1; content: ""; }
.heal-symbol::before { inset: 8px 3px 3px 8px; border-radius: 7px 2px 3px 2px; }
.heal-symbol::after { width: 15px; height: 15px; top: 1px; left: 8px; border-radius: 50%; box-shadow: 8px 8px 0 #e4a0b1; }
.speed-symbol {
  background: #b89ccc;
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 69% 59%, 79% 96%, 50% 73%, 20% 96%, 31% 59%, 0 38%, 38% 35%);
}
.yarn-symbol { border: 4px solid #c98eaa; border-radius: 50%; background: repeating-linear-gradient(35deg, #f1cada 0 3px, #c98eaa 4px 6px); }
.bomb-symbol { border: 3px solid #9d7186; border-radius: 50% 55% 50% 45%; background: #d69aaa; }
.bomb-symbol::before {
  position: absolute;
  top: -7px;
  right: -4px;
  width: 12px;
  height: 10px;
  border-top: 3px solid #806878;
  border-radius: 50%;
  content: "";
}
.storm-symbol {
  background: #a98bc4;
  clip-path: polygon(58% 0, 17% 53%, 46% 53%, 30% 100%, 84% 39%, 55% 39%);
  filter: drop-shadow(0 0 3px rgba(255,226,151,0.7));
}

button {
  min-width: 158px;
  padding: 11px 20px;
  border: 3px solid #a86b82;
  border-radius: 18px 21px 17px 20px;
  color: #fffaf8;
  background: #c87996;
  box-shadow: 3px 4px 0 #87566a;
  cursor: pointer;
  font-weight: 800;
}

button.secondary-action {
  border-style: dashed;
  color: #725663;
  background: #fffaf8;
  box-shadow: 3px 4px 0 #c9a5b2;
}

button:hover { transform: translateY(-1px); }
button:active { transform: translateY(3px); box-shadow: 1px 1px 0 #87566a; }
button:focus-visible { outline: 4px solid #759fb4; outline-offset: 4px; }
button:disabled:hover,
button:disabled:active { transform: none; box-shadow: 2px 3px 0 #c9a5b2; }
.overlay small { display: block; margin-top: 14px; color: #907681; }

.controls { margin: 16px 0 0; text-align: center; color: #806878; }
kbd { padding: 3px 8px; border: 1px solid #d4aaba; border-bottom-width: 3px; border-radius: 7px; background: #fffaf8; }

@media (max-width: 720px) {
  .home-screen { padding: 18px 12px 26px; }
  .home-header { align-items: center; margin-bottom: 16px; }
  .home-subtitle { font-size: 0.78rem; }
  .adventure-notebook { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .stage-directory { padding: 20px 16px 16px; border-right: 0; border-bottom: 3px dashed #d6aabd; }
  .directory-heading { margin: 0 0 10px 7px; }
  .stage-directory .stage-options { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 3px 8px; }
  .stage-directory .stage-card { min-width: 194px; scroll-snap-align: start; }
  .stage-preview { padding: 24px 21px 30px; }
  .stage-preview-art { height: 170px; }
  .coop-hud { top: 7px; right: 9px; left: 9px; grid-template-columns: 1fr 116px 1fr; gap: 6px; }
  .coop-hud.single-player {
    right: auto;
    left: 50%;
    width: calc(100% - 18px);
    grid-template-columns: 1fr 116px;
  }
  .player-hud, .stage-hud { min-height: 39px; padding: 4px 7px; border-width: 1.5px; }
  .player-hud { font-size: 0.62rem; }
  .player-hud strong, .stage-hud strong { font-size: 0.67rem; }
  .health-readout { grid-template-columns: auto minmax(38px, 1fr); gap: 4px; }
  .health-text { font-size: 0.56rem; }
  .health-meter { height: 6px; }
  .boss-health-hud { gap: 2px; margin-top: 3px; }
  .boss-health-text { font-size: 0.56rem; }
  .boss-health-meter { height: 6px; }
  .progress-track { height: 6px; }
  .frame-menu-action { top: 53px; right: 9px; }
  .tutorial-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-settings-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .control-settings-preview { min-height: 112px; }
}

@media (max-width: 620px) {
  .game-screen { width: min(100% - 16px, 1040px); padding: 14px 0; }
  .home-header h1 { font-size: 1.65rem; }
  .home-best { min-width: 106px; padding: 8px 10px; }
  .home-best span { font-size: 0.61rem; }
  .home-best strong { font-size: 1.22rem; }
  .stage-preview-art { height: 142px; }
  .stage-facts { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stage-facts div { padding: 8px 9px; }
  .stage-preview .mode-actions { gap: 6px; }
  .stage-preview .choice-card { min-width: 0; padding: 8px 10px; }
  .stage-preview .menu-primary-actions { display: grid; grid-template-columns: 1fr; }
  .stage-preview .menu-primary-actions button { width: 100%; }
  .game-header { align-items: center; gap: 10px; }
  .scoreboard div { min-width: 61px; padding: 5px 8px; }
  .scoreboard strong { font-size: 1rem; }
  .game-frame { border-width: 3px; border-radius: 17px 19px 16px 18px; outline-offset: -5px; }
  .overlay { padding: 7px; }
  .overlay-card { width: min(100%, 540px); padding: 8px 10px; border-width: 2px; border-radius: 17px 19px 16px 18px; }
  .overlay-kicker { display: none; }
  .overlay h2 { margin: 1px 0 5px; font-size: 1.15rem; }
  .overlay p { margin-bottom: 8px; font-size: 0.75rem; line-height: 1.3; }
  .menu-section { margin-top: 6px; }
  .menu-section h3, .tutorial-items h3 { margin-bottom: 4px; font-size: 0.73rem; }
  .mode-actions, .stage-options, .result-actions { gap: 5px; }
  .menu-primary-actions { margin-top: 7px; }
  .overlay button { min-width: 126px; padding: 6px 12px; border-width: 2px; font-size: 0.76rem; box-shadow: 2px 2px 0 #87566a; }
  .overlay .choice-card { min-width: 0; padding: 5px 7px; }
  .choice-card strong { font-size: 0.7rem; }
  .choice-card span { font-size: 0.56rem; }
  .tutorial-item-grid { margin-bottom: 7px; grid-template-columns: repeat(5, minmax(86px, 1fr)); gap: 4px; overflow-x: auto; }
  .tutorial-item-grid li { min-height: 66px; padding: 5px 3px; border-width: 1px; }
  .tutorial-item-grid strong { font-size: 0.65rem; }
  .tutorial-item-grid span { font-size: 0.5rem; line-height: 1.18; }
  .tutorial-item-symbol { width: 20px; height: 20px; }
  .overlay small { display: none; }
  .control-settings > p { display: block; margin-bottom: 5px; }
  .control-settings-layout { grid-template-columns: minmax(0, 1fr) 145px; gap: 8px; }
  .control-settings-fields { grid-template-columns: 1fr 1fr; column-gap: 9px; }
  .control-settings-fields label { margin-top: 0; font-size: 0.62rem; }
  .control-settings-fields input[type="range"] { min-height: 20px; }
  .control-settings-preview { min-height: 92px; padding: 7px; gap: 7px; }
  .control-settings-preview .touch-joystick { width: 68px; height: 68px; }
  .control-settings-preview .touch-joystick-knob { width: 30px; height: 30px; }
  .control-settings-preview .touch-attack { width: 48px; height: 48px; min-width: 0; }
  .settings-actions { margin-top: 7px; }
  .frame-menu-action { top: auto; right: 7px; bottom: 7px; min-width: 58px; padding: 4px 8px; font-size: 0.66rem; }
  .controls { margin-top: 11px; font-size: 0.78rem; }
  .player-status { display: none; }
  .heart { margin-right: 6px; }
  .touch-controls { right: 7px; bottom: 6px; left: 7px; gap: 8px; }
  .touch-joystick { width: 78px; height: 78px; }
  .touch-joystick-knob { width: 35px; height: 35px; }
  .touch-button { min-height: 32px; border-width: 1.5px; font-size: 0.58rem; }
  .touch-attack { width: 54px; height: 54px; }
  .touch-control-row { gap: 6px; }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .touch-controls { display: none !important; }
}

@media (orientation: portrait) and (max-width: 720px) {
  .game-screen::before {
    display: block;
    margin: 0 8px 8px;
    padding: 7px 10px;
    border: 2px dashed #c99bad;
    border-radius: 14px;
    color: #765967;
    background: #fff7f5;
    content: "横过手机，画面和双人按钮会更宽敞";
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.is-playing { position: fixed; inset: 0; }
  .page-shell { min-height: 100dvh; }
  .game-screen { width: 100%; padding: 0; }
  .game-header, .controls { display: none; }
  .game-frame {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
    max-width: none;
    border-width: 0;
    border-radius: 0;
    outline: 0;
  }
  .coop-hud { top: max(5px, env(safe-area-inset-top)); }
  .touch-controls {
    right: max(9px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    left: max(9px, env(safe-area-inset-left));
  }
  .touch-joystick { width: 112px; height: 112px; }
  .touch-joystick-knob { width: 48px; height: 48px; }
  .touch-button { min-height: 48px; font-size: 0.68rem; }
  .touch-attack { width: 72px; height: 72px; }
}

@media (max-width: 360px) {
  .coop-hud {
    right: 5px;
    left: 5px;
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
    gap: 3px;
  }

  .coop-hud.single-player {
    width: calc(100% - 10px);
    grid-template-columns: minmax(0, 1fr) 86px;
  }

  .player-hud,
  .stage-hud {
    min-width: 0;
    padding: 3px 4px;
  }

  .health-readout { grid-template-columns: 1fr; gap: 1px; }
  .health-text { font-size: 0.52rem; }
  .health-meter { width: 100%; min-width: 0; }
  .stage-hud strong { margin-bottom: 2px; }
  .boss-health-text { font-size: 0.52rem; }
}