:root {
      --ink: #2c1b12;
      --muted: #765842;
      --paper: #fff8e8;
      --paper-dark: #efd9ac;
      --wood: #8b4e2f;
      --wood-dark: #57321f;
      --jade: #2f8a68;
      --jade-dark: #17624d;
      --red: #b73d32;
      --gold: #d8a84b;
      --blue: #4d7ca8;
      --shadow: 0 18px 50px rgba(65, 35, 18, .22);
      --base-font-size: 16px;
      --max-content-width: min(1040px, 100%);
      --panel-padding: 22px;
      --gap-size: 16px;
    }

    html {
      font-size: var(--base-font-size);
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      height: 100%;
      overflow-y: auto;
    }

    @media (max-width: 1200px) {
      :root {
        --panel-padding: 18px;
        --gap-size: 14px;
        --base-font-size: 15.5px;
      }
    }

    @media (max-width: 960px) {
      :root {
        --panel-padding: 14px;
        --gap-size: 12px;
        --base-font-size: 15px;
      }
    }

    @media (max-width: 768px) {
      :root {
        --panel-padding: 12px;
        --gap-size: 10px;
        --base-font-size: 14.5px;
        --max-content-width: 100%;
      }
    }

    @media (max-width: 480px) {
      :root {
        --base-font-size: 13.8px;
      }
    }

    @media (max-width: 360px) {
      :root {
        --base-font-size: 12.8px;
      }
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      height: 100%;
      min-height: 100vh;
      min-height: calc(var(--vh, 1vh) * 100);
      font-family: "STKaiti", "KaiTi", "FangSong", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.34), transparent 18%),
        radial-gradient(circle at 84% 10%, rgba(183,61,50,.1), transparent 20%),
        linear-gradient(180deg, #ead0ad 0%, #f7e8ca 46%, #e2bf8b 100%);
      overflow-x: hidden;
      overflow-y: visible;
    }

    body.route-game {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: auto;
      touch-action: pan-y;
    }

    body.route-game .scene {
      height: auto;
      overflow: visible;
      touch-action: pan-y;
    }

    body.route-game .game {
      overflow: visible;
    }

    body.route-cover,
    body.route-home {
      overflow-y: hidden;
    }

    body.route-result {
      overflow-y: hidden;
    }

    body.modal-open {
      overflow: hidden;
      overscroll-behavior: none;
    }

    button {
      font: inherit;
      color: inherit;
      border: 0;
      cursor: pointer;
    }

    .scene {
      min-height: calc(var(--vh, 1vh) * 100);
      height: 100%;
      padding: var(--panel-padding);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .sun {
      position: fixed;
      width: 96px;
      height: 96px;
      right: 26px;
      top: 26px;
      border-radius: 50%;
      background: radial-gradient(circle, #ffe5a1 0 38%, #dd6f42 39% 52%, transparent 53%);
      opacity: .74;
      z-index: 0;
    }

    .cloud {
      position: fixed;
      width: 180px;
      height: 44px;
      left: -60px;
      top: 74px;
      border-radius: 999px;
      background: rgba(255,255,255,.38);
      animation: drift 22s linear infinite;
      z-index: 0;
    }

    .cloud::before,
    .cloud::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: inherit;
    }

    .cloud::before {
      width: 72px;
      height: 72px;
      left: 28px;
      bottom: 8px;
    }

    .cloud::after {
      width: 54px;
      height: 54px;
      right: 34px;
      bottom: 10px;
    }

    @keyframes drift {
      from { transform: translateX(-180px); }
      to { transform: translateX(calc(100vw + 260px)); }
    }

    .game {
      width: var(--max-content-width);
      min-height: min(720px, calc(var(--vh, 1vh) * 100 - (var(--panel-padding) * 2)));
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: var(--gap-size);
      background:
        linear-gradient(rgba(255,248,232,.86), rgba(255,248,232,.86)),
        repeating-linear-gradient(0deg, rgba(87,50,31,.06) 0 1px, transparent 1px 12px);
      border: 5px solid #3b2218;
      box-shadow: var(--shadow), inset 0 0 0 9px #d7b37e, inset 0 0 0 13px #3b2218;
      border-radius: 4px;
      padding: var(--panel-padding);
      overflow: hidden;
    }

    .game::before {
      content: "";
      position: absolute;
      inset: 10px;
      background-image:
        linear-gradient(90deg, #7a2e26 0 18px, transparent 18px calc(100% - 18px), #7a2e26 calc(100% - 18px)),
        linear-gradient(#7a2e26 0 18px, transparent 18px calc(100% - 18px), #7a2e26 calc(100% - 18px));
      pointer-events: none;
      opacity: .18;
    }

    .left,
    .right {
      position: relative;
      z-index: 1;
    }

    .clinic {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .signboard {
      height: 74px;
      display: grid;
      grid-template-columns: 86px 1fr 86px;
      align-items: center;
      gap: 10px;
      color: #ffecc2;
      text-shadow: 0 2px 0 rgba(0,0,0,.28);
      position: relative;
    }

    .lantern {
      width: 54px;
      height: 66px;
      justify-self: center;
      border-radius: 26px 26px 22px 22px;
      background: linear-gradient(90deg, #9d2f29, #df6a42 48%, #8d2823);
      border: 3px solid #6a201d;
      position: relative;
      box-shadow: 0 10px 18px rgba(87,50,31,.18);
      animation: sway 2.8s ease-in-out infinite;
    }

    .lantern::before,
    .lantern::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      height: 6px;
      background: #ebbe64;
      border-radius: 999px;
    }

    .lantern::before { top: 6px; }
    .lantern::after { bottom: 7px; }

    @keyframes sway {
      50% { transform: rotate(3deg); }
    }

    .board {
      height: 70px;
      border-radius: 6px;
      background: #f6dfb7;
      border: 4px solid #3b2218;
      display: grid;
      place-items: center;
      box-shadow: inset 0 0 0 4px #d2a76e, 0 8px 0 rgba(59,34,24,.18);
      position: relative;
    }

    .board::before,
    .board::after {
      content: "卷";
      position: absolute;
      top: 14px;
      width: 30px;
      height: 38px;
      border-radius: 50%;
      background: #9e6239;
      color: #f6dfb7;
      display: grid;
      place-items: center;
      font-size: 12px;
      border: 3px solid #3b2218;
    }

    .board::before { left: -17px; }
    .board::after { right: -17px; }

    h1 {
      margin: 0;
      font-size: clamp(28px, 5vw, 50px);
      letter-spacing: 0;
      line-height: 1;
      color: #2a170e;
      font-weight: 950;
      text-shadow: none;
    }

    .stage {
      flex: 1;
      min-height: 420px;
      background:
        radial-gradient(circle at 18% 18%, rgba(216,168,75,.16), transparent 22%),
        #f8e3bd;
      border: 4px solid #3b2218;
      border-radius: 4px;
      padding: 14px;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 12px;
    }

    .patient-area {
      position: relative;
      min-height: 270px;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 12px;
      align-items: end;
      padding: 12px 12px 0;
    }

    .stage-profile {
      align-self: stretch;
      display: grid;
      align-content: center;
      gap: 10px;
      padding: 10px 4px 16px;
      min-width: 0;
    }

    .stage-profile h2 {
      margin: 0;
      color: #2a170e;
      font-size: clamp(24px, 4vw, 36px);
      line-height: 1.15;
    }

    .stage-profile p {
      margin: 0;
      color: #5d3924;
      font-size: 16px;
      line-height: 1.65;
    }

    .active-clue {
      min-height: 42px;
      padding: 10px 12px 10px 42px;
      border: 3px solid #9f382e;
      border-left-width: 8px;
      border-radius: 10px;
      background:
        radial-gradient(circle at 18px 18px, rgba(255,255,255,.65), transparent 16px),
        linear-gradient(180deg, #fff1c6, #ffd98c);
      color: #3a1d0e;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 900;
      box-shadow: 0 5px 0 rgba(123,67,41,.22), inset 0 0 0 2px rgba(255,255,255,.28);
      position: relative;
    }

    .active-clue::before {
      content: "诊";
      position: absolute;
      left: 10px;
      top: 10px;
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #9f382e;
      color: #fff8e8;
      font-size: 13px;
      line-height: 1;
    }

    .patient {
      width: min(260px, 52vw);
      height: 250px;
      justify-self: end;
      position: relative;
      transition: transform .25s ease;
      display: grid;
      place-items: end center;
    }

    .patient img {
      max-width: 100%;
      max-height: 270px;
      object-fit: contain;
      filter: drop-shadow(0 12px 0 rgba(59,34,24,.18));
      transform-origin: bottom center;
    }

    .patient.happy { transform: translateY(-8px) scale(1.03); }
    .patient.sad { transform: rotate(-2deg); }

    .head {
      width: 90px;
      height: 90px;
      border-radius: 42% 42% 48% 48%;
      background: #ffd3ad;
      border: 6px solid #24150f;
      position: absolute;
      left: 84px;
      top: 18px;
      z-index: 3;
    }

    .hair {
      position: absolute;
      width: 98px;
      height: 40px;
      left: 80px;
      top: 14px;
      border-radius: 50% 50% 16px 16px;
      background: #15100d;
      border: 6px solid #24150f;
      z-index: 4;
    }

    .face {
      position: absolute;
      inset: 36px 16px 0;
      z-index: 5;
    }

    .eye {
      position: absolute;
      width: 8px;
      height: 14px;
      top: 8px;
      border-radius: 50%;
      background: #24150f;
      box-shadow: 34px 0 0 #24150f;
    }

    .mouth {
      position: absolute;
      width: 26px;
      height: 14px;
      left: 18px;
      top: 32px;
      border-bottom: 5px solid #8b2d2d;
      border-radius: 0 0 50px 50px;
    }

    .body {
      position: absolute;
      width: 146px;
      height: 142px;
      left: 56px;
      bottom: 12px;
      border-radius: 34px 34px 10px 10px;
      background: var(--patient-color, #4d7ca8);
      border: 6px solid #24150f;
      z-index: 2;
    }

    .body::before,
    .body::after {
      content: "";
      position: absolute;
      width: 42px;
      height: 94px;
      top: 20px;
      background: inherit;
      border: 6px solid #24150f;
      border-radius: 24px;
    }

    .body::before {
      left: -34px;
      transform: rotate(12deg);
    }

    .body::after {
      right: -34px;
      transform: rotate(-12deg);
    }

    .hat {
      position: absolute;
      left: 66px;
      top: 0;
      width: 126px;
      height: 38px;
      background: #1f1b19;
      border: 6px solid #24150f;
      border-radius: 18px 18px 8px 8px;
      z-index: 6;
      display: none;
    }

    .patient.scholar .hat { display: block; }
    .patient.scholar .body { --patient-color: #6f5aa7; }
    .patient.lady .hair { background: #241813; }
    .patient.lady .body { --patient-color: #d65f76; }
    .patient.worker .body { --patient-color: #2f8a68; }

    .dialogue {
      min-height: 0;
      background: #fff2d3;
      border: 4px solid #3b2218;
      border-radius: 4px;
      box-shadow: inset 0 0 0 4px #e0bd83;
      padding: 10px;
    }

    .name-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 8px;
    }

    .name {
      font-weight: 900;
      font-size: 20px;
    }

    .tag {
      color: #fff8e8;
      background: #9f382e;
      border: 2px solid #5e201a;
      padding: 3px 8px;
      border-radius: 2px;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .speech {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
      font-size: 15px;
    }

    .actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .action {
      min-height: 44px;
      border-radius: 4px;
      background: #f6dfb7;
      border: 3px solid #3b2218;
      box-shadow: 0 4px 0 #7b4329;
      font-weight: 900;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }

    .action:hover,
    .action.done {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #7b4329;
      background: #ffe08e;
    }

    .right {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    .hud {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .back-btn {
      position: absolute;
      left: 18px;
      top: 18px;
      z-index: 20;
      min-height: 42px;
      padding: 0 12px;
      background: #fff2d3;
      border: 4px solid #3b2218;
      border-radius: 4px;
      box-shadow: 0 4px 0 #7b4329;
      font-size: 15px;
      font-weight: 950;
    }

    .music-btn {
      position: absolute;
      right: 18px;
      top: 18px;
      z-index: 20;
      width: 58px;
      height: 58px;
      padding: 0;
      border-radius: 6px;
      border: 4px solid #8f2c24;
      background: linear-gradient(180deg, #de5a43, #a9342a);
      box-shadow: 0 4px 0 #7b4329;
      color: #fff8df;
      display: grid;
      place-items: center;
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease, filter .18s ease, background .18s ease;
    }

    .music-btn.playing {
      background: linear-gradient(180deg, #4ab768, #176c3a);
      border-color: #12583c;
    }

    .back-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #7b4329;
    }

    .music-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #7b4329;
    }

    .back-btn.scroll-hidden,
    .music-btn.scroll-hidden {
      opacity: 0;
      transform: translateY(-14px);
      pointer-events: none;
      visibility: hidden;
    }

    .timeup-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .timeup-actions .primary {
      width: 100%;
      min-width: 0;
      margin-top: 0;
    }

    .hud-box {
      min-height: 66px;
      background: #fff2d3;
      border: 4px solid #3b2218;
      border-radius: 4px;
      padding: 8px;
      display: grid;
      align-content: center;
      gap: 2px;
    }

    .hud-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .hud-value {
      font-size: 22px;
      font-weight: 950;
      line-height: 1;
    }

    .prescription {
      background: #fff2d3;
      border: 4px solid #3b2218;
      border-radius: 4px;
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .prescription h2 {
      margin: 0;
      font-size: 22px;
      text-align: center;
      border-bottom: 3px solid #3b2218;
      padding-bottom: 6px;
    }

    .note {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
    }

    .formula {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 42px;
    }

    .pill {
      padding: 8px 10px;
      border-radius: 4px;
      background: #fff1c6;
      border: 3px solid #3b2218;
      font-weight: 900;
    }

    .pill.need {
      background: #e9ffe9;
      border-style: solid;
      border-color: var(--jade);
      box-shadow: 0 0 0 3px rgba(47,138,104,.12);
    }

    .cabinet {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      background: #8b4e2f;
      border: 5px solid #3b2218;
      border-radius: 4px;
      padding: 10px;
      min-height: 225px;
      max-height: 360px;
      overflow: auto;
    }

    .cabinet::-webkit-scrollbar {
      width: 10px;
    }

    .cabinet::-webkit-scrollbar-thumb {
      background: #d7b37e;
      border: 2px solid #3b2218;
      border-radius: 999px;
    }

    .herb {
      min-height: 64px;
      border-radius: 4px;
      border: 3px solid #4a2a1d;
      background: #c98245;
      box-shadow: inset 0 0 0 3px rgba(255,230,183,.28);
      display: grid;
      place-items: center;
      text-align: center;
      font-weight: 950;
      user-select: none;
      touch-action: manipulation;
      color: #2e1b13;
      position: relative;
      padding: 8px;
      gap: 4px;
      min-width: 0;
      overflow: hidden;
    }

    .herb::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2px solid rgba(74,42,29,.35);
      border-radius: 4px;
      pointer-events: none;
    }

    .herb.dragging {
      opacity: .5;
    }

    .herb.recommended {
      background: linear-gradient(180deg, #f6d97a, #d89a37);
      border-color: var(--jade-dark);
      box-shadow: 0 0 0 4px rgba(47,138,104,.28), inset 0 4px 0 rgba(255,255,255,.24);
      animation: recommendPulse 1.2s ease-in-out infinite;
    }

    .herb.recommended::after {
      content: "抓这个";
      position: absolute;
      right: 5px;
      top: 5px;
      padding: 2px 5px;
      border-radius: 5px;
      background: var(--jade);
      color: #fff8e8;
      font-size: 11px;
      font-weight: 950;
    }

    @keyframes recommendPulse {
      50% { transform: translateY(-2px); }
    }

    .herb-name {
      font-size: 19px;
      line-height: 1;
      color: #22130c;
      display: block;
      max-width: 100%;
      padding: 0 4px;
      word-break: break-word;
    }

    .herb-use {
      max-width: 100%;
      color: #5c351f;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
      opacity: .86;
      display: block;
      padding: 0 4px;
      word-break: break-word;
    }

    .herb-name::first-letter {
      font-size: 1.08em;
    }

    .desk {
      min-height: 132px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: stretch;
    }

    .bag {
      border: 4px dashed #3b2218;
      border-radius: 4px;
      background:
        radial-gradient(circle at 50% 8%, rgba(123,67,41,.14), transparent 18%),
        #f3dcae;
      display: grid;
      place-items: center;
      padding: 10px;
      text-align: center;
      transition: transform .15s ease, background .15s ease;
    }

    .bag.over {
      transform: scale(1.02);
      background: #ffeab8;
    }

    .bag-title {
      font-weight: 950;
      font-size: 18px;
      margin-bottom: 8px;
    }

    .bag-list {
      min-height: 24px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
    }

    .bag-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 4px 8px;
      border-radius: 6px;
      background: #fff8e8;
      border: 2px solid #a66a36;
      color: var(--ink);
      font-weight: 900;
    }

    .remove-herb {
      width: 20px;
      height: 20px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: var(--red);
      color: #fff8e8;
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
      border: 1px solid #6f241e;
      flex: 0 0 auto;
      overflow: hidden;
      box-sizing: border-box;
    }

    .submit {
      width: 96px;
      border-radius: 4px;
      background: #9f382e;
      color: #fff6df;
      border: 4px solid #3b2218;
      box-shadow: 0 6px 0 #6f241e;
      font-size: 18px;
      font-weight: 950;
    }

    .submit:active {
      transform: translateY(3px);
      box-shadow: 0 3px 0 #6f241e;
    }

    .screen {
      position: absolute;
      inset: 0;
      z-index: 100;
      background:
        linear-gradient(rgba(49,28,19,.34), rgba(49,28,19,.34)),
        radial-gradient(circle at 48% 28%, #fff4d3 0 20%, #e6bd75 55%, #8a4e31 100%);
      display: grid;
      place-items: center;
      padding: 18px;
    }

    .screen > * {
      position: relative;
      z-index: 101;
    }

    .screen.hidden {
      display: none;
    }

    #coverScreen.screen {
      position: fixed;
      inset: 0;
      padding: 0;
      z-index: 190;
      background:
        linear-gradient(rgba(28, 14, 8, .18), rgba(28, 14, 8, .18)),
        radial-gradient(circle at 50% 18%, rgba(255,243,205,.24), transparent 28%),
        linear-gradient(180deg, #28140d 0%, #8a5932 28%, #ead0ad 100%);
    }

    .cover-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .cover-art {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .cover-start {
      position: absolute;
      left: 50%;
      bottom: clamp(18px, 4.2vw, 66px);
      transform: translateX(-50%);
      width: min(82%, 560px);
      padding: 0;
      border: 0;
      background: transparent;
      display: block;
      filter: drop-shadow(0 14px 20px rgba(34, 18, 7, .32));
    }

    .cover-start img {
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .cover-start:focus-visible {
      outline: 4px solid rgba(255, 237, 177, .8);
      outline-offset: 6px;
    }

    #startScreen.screen {
      position: fixed;
      inset: 0;
      align-items: start;
      justify-items: center;
      overflow: auto;
      padding: clamp(8px, 2vmin, 18px);
      z-index: 180;
    }

    .paper-card {
      width: min(620px, 100%);
      background: #fff2d3;
      border: 5px solid #3b2218;
      border-radius: 4px;
      padding: 22px;
      box-shadow: var(--shadow), inset 0 0 0 5px #d7b37e;
      text-align: center;
    }

    .paper-card h2 {
      margin: 0 0 10px;
      font-size: clamp(30px, 8vw, 56px);
      line-height: 1.08;
      color: #2a170e;
    }

    .paper-card p {
      margin: 0 auto 16px;
      max-width: 480px;
      color: var(--muted);
      line-height: 1.7;
    }

    .action,
    .submit,
    .primary,
    .system-btn,
    .codex-card,
    .upgrade-btn,
    .remove-herb,
    .back-btn,
    .music-btn,
    .difficulty,
    .nav-btn,
    .reply,
    .herb {
      touch-action: manipulation;
    }

    @media (max-width: 1024px) {
      .game {
        grid-template-columns: 1fr;
        overflow: auto;
      }

      .right,
      .left,
      .clinic,
      .stage,
      .cabinet,
      .patient-area,
      .desk {
        min-height: unset;
      }
    }

    @media (max-width: 768px) {
      .patient-area {
        grid-template-columns: 1fr;
      }

      .patient {
        width: min(260px, 64vw);
        justify-self: center;
      }

      .actions {
        grid-template-columns: repeat(2, 1fr);
      }

      .hud {
        grid-template-columns: 1fr 1fr;
      }

      .choice-grid,
      .mini-panels,
      .desk {
        grid-template-columns: 1fr;
      }

      .submit {
        width: 100%;
      }

      .paper-card {
        width: min(620px, 100%);
      }
    }

    @media (max-width: 520px) {
      .signboard {
        grid-template-columns: 42px 1fr 42px;
      }

      .lantern {
        width: 44px;
        height: 56px;
      }

      .board {
        height: 62px;
      }

      .sun,
      .cloud {
        display: none;
      }

      .screen,
      #startScreen.screen {
        padding: 10px;
      }

      #coverScreen.screen {
        padding: 0;
      }

      .timeup-actions {
        grid-template-columns: 1fr;
      }

      .cover-stage {
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .cover-start {
        bottom: clamp(16px, 5vw, 52px);
        width: min(86%, 420px);
      }
    }

    @media (max-width: 380px) {
      h1 {
        font-size: clamp(23px, 8vw, 40px);
      }

      .hud-value,
      .poster-score {
        font-size: 18px;
      }

      .back-btn {
        left: 10px;
        top: 10px;
        min-height: 38px;
        padding-inline: 10px;
      }

      .music-btn {
        right: 10px;
        top: 10px;
        width: 44px;
        height: 44px;
        font-size: 22px;
      }
    }

    .primary {
      min-height: 52px;
      padding: 0 22px;
      border-radius: 8px;
      background: var(--jade);
      color: #fff8e8;
      border: 3px solid var(--jade-dark);
      box-shadow: 0 6px 0 var(--jade-dark);
      font-size: 18px;
      font-weight: 950;
    }

    .primary:active {
      transform: translateY(3px);
      box-shadow: 0 3px 0 var(--jade-dark);
    }

    .choice-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 14px 0 16px;
      text-align: left;
    }

    .difficulty {
      min-height: 138px;
      padding: 12px;
      border-radius: 4px;
      background: #fff1c6;
      border: 4px solid #3b2218;
      box-shadow: 0 5px 0 #7b4329;
      display: grid;
      align-content: start;
      gap: 7px;
    }

    .difficulty.selected {
      background: #e9ffe9;
      border-color: var(--jade);
      box-shadow: 0 5px 0 var(--jade-dark);
    }

    .difficulty strong {
      font-size: 18px;
    }

    .difficulty span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .mini-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
      text-align: left;
    }

    .mini-panel {
      background: #fff1c6;
      border: 3px solid #3b2218;
      border-radius: 4px;
      padding: 10px;
    }

    .mini-panel h3 {
      margin: 0 0 8px;
      font-size: 17px;
    }

    .mini-list {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 13px;
    }

    .system-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 14px 0 12px;
    }

    .system-btn {
      min-height: 42px;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff1c6, #e8bf7c);
      border: 3px solid #3b2218;
      box-shadow: 0 4px 0 #7b4329;
      font-weight: 950;
    }

    #restartBtn {
      width: 100%;
      min-height: 62px;
      margin-top: 0;
      display: block;
    }

    .bottom-nav {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 14px;
      z-index: 50;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 10px;
      border: 4px solid #2a170e;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,239,199,.96), rgba(221,178,112,.96));
      box-shadow: 0 10px 28px rgba(42,23,14,.24), inset 0 0 0 3px rgba(255,255,255,.2);
    }

    .nav-btn {
      min-height: 58px;
      display: grid;
      place-items: center;
      gap: 3px;
      border-radius: 16px;
      border: 3px solid rgba(42,23,14,.5);
      background: linear-gradient(180deg, #fff7dd, #e8d2a6);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
      color: #4a2a1d;
      font-weight: 950;
    }

    .nav-btn.active {
      border-color: #b74331;
      background: linear-gradient(180deg, #f8d88e, #efbd65);
      color: #9f382e;
      box-shadow: 0 0 0 3px rgba(183,67,49,.15), inset 0 1px 0 rgba(255,255,255,.45);
    }

    .nav-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(180deg, #c84536, #8e2d26);
      color: #fff7dd;
      font-size: 14px;
      line-height: 1;
    }

    .nav-btn[data-nav="codex"] .nav-icon {
      background: linear-gradient(180deg, #71bd6a, #2f8a68);
    }

    .nav-btn[data-nav="clinic"] .nav-icon {
      background: linear-gradient(180deg, #db5d76, #a93455);
    }

    .nav-btn[data-nav="poster"] .nav-icon {
      background: linear-gradient(180deg, #f1b745, #c17c21);
    }

    .nav-label {
      font-size: 14px;
      line-height: 1;
    }

    .overlay-panel {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: clamp(10px, 2vw, 18px);
      background: rgba(42, 23, 14, .58);
    }

    .overlay-panel.hidden {
      display: none;
    }

    .modal-card {
      width: min(680px, 100%);
      max-height: min(86vh, 820px);
      overflow: auto;
      padding: 18px;
      border-radius: 14px;
      border: 5px solid #2a170e;
      background: linear-gradient(180deg, #fff0c5, #eec98d);
      box-shadow: 0 24px 80px rgba(20,10,5,.4), inset 0 0 0 6px #d7b37e;
      margin: auto;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .modal-head h2 {
      margin: 0;
      font-size: 30px;
    }

    .close-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #9f382e;
      color: #fff8e8;
      border: 3px solid #2a170e;
      font-size: 22px;
      font-weight: 950;
    }

    .codex-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }

    .codex-card {
      min-height: 184px;
      padding: 12px;
      border-radius: 12px;
      border: 3px solid #3b2218;
      background: linear-gradient(180deg, #fff8dc, #efd09a);
      box-shadow: 0 5px 0 rgba(74,42,29,.32);
      text-align: center;
      transition: transform .2s ease;
    }

    .codex-card.flipped {
      background: linear-gradient(180deg, #e9f9dd, #c6e9ab);
    }

    .codex-glyph {
      width: 58px;
      height: 58px;
      margin: 0 auto 8px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 3px solid #7b4329;
      background: radial-gradient(circle, #fff8dd 0 48%, #d7a867 49%);
      font-size: 26px;
      font-weight: 950;
    }

    .codex-card strong {
      display: block;
      font-size: 20px;
      margin-bottom: 7px;
    }

    .codex-card p {
      margin: 0;
      color: #5d3924;
      font-size: 13px;
      line-height: 1.5;
    }

    .upgrade-shop {
      display: grid;
      gap: 10px;
    }

    .upgrade-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 10px;
      border: 3px solid #3b2218;
      background: #fff1c6;
    }

    .upgrade-row strong {
      display: block;
      font-size: 18px;
    }

    .upgrade-row span {
      color: #5d3924;
      font-size: 13px;
      line-height: 1.45;
    }

    .poster-share {
      min-height: 620px;
      padding: 34px 22px;
      border-radius: 18px;
      border: 6px solid #2a170e;
      background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.7), transparent 22%),
        linear-gradient(180deg, #fff0c5, #e4bd7e);
      text-align: center;
      box-shadow: inset 0 0 0 8px #8b4e2f, inset 0 0 0 14px #d7b37e;
    }

    .poster-share h2 {
      margin: 0 0 22px;
      font-size: 48px;
    }

    .poster-disclaimer {
      margin-top: 18px;
      color: #6d4a31;
      font-size: 12px;
      line-height: 1.55;
    }

    .health-notice {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(42, 23, 14, .72);
    }

    .health-notice.hidden {
      display: none;
    }

    .health-card {
      width: min(680px, 100%);
      max-height: min(86vh, 760px);
      overflow: auto;
      padding: 22px;
      border-radius: 16px;
      border: 5px solid #2a170e;
      background: linear-gradient(180deg, #fff4cf, #eec98d);
      box-shadow: 0 28px 80px rgba(20,10,5,.42), inset 0 0 0 6px #d7b37e;
    }

    .health-card h2 {
      margin: 0 0 14px;
      color: #9f382e;
      font-size: 34px;
      text-align: center;
    }

    .health-card p {
      margin: 0 0 12px;
      color: #3a1d0e;
      font-size: 17px;
      line-height: 1.85;
      font-weight: 800;
    }

    .health-card .primary {
      width: 100%;
      min-width: 0;
      margin-top: 8px;
    }

    .poster-score {
      margin: 20px auto;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff8df;
      background: linear-gradient(180deg, #9f382e, #6f241e);
      border: 6px solid #2a170e;
      font-size: 38px;
      font-weight: 950;
    }

    .qr-placeholder {
      width: 120px;
      height: 120px;
      margin: 24px auto 0;
      display: grid;
      place-items: center;
      border: 4px solid #2a170e;
      background: #fff;
      font-size: 14px;
      font-weight: 950;
      padding: 6px;
    }

    .qr-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .dialogue-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    .reply {
      min-height: 42px;
      border-radius: 4px;
      background: #fff1c6;
      border: 3px solid #3b2218;
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      padding: 7px;
    }

    .coin-pop {
      position: fixed;
      z-index: 40;
      color: #d79a28;
      font-weight: 950;
      text-shadow: 0 2px 0 #5c351f;
      pointer-events: none;
      animation: coinPop .8s ease forwards;
    }

    @keyframes coinPop {
      to { transform: translateY(-46px) scale(1.2); opacity: 0; }
    }

    .result-title {
      color: var(--red);
      font-size: clamp(30px, 8vw, 54px);
      line-height: 1.05;
      white-space: nowrap;
      text-align: center;
      letter-spacing: .02em;
      margin-top: 8px;
      margin-bottom: 16px;
    }

    .knowledge {
      text-align: left;
      background: #fff1c6;
      border: 2px solid #d4a35b;
      padding: 12px;
      border-radius: 8px;
      margin: 14px 0;
      line-height: 1.7;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      z-index: 130;
      background: #2f2118;
      color: #fff8e8;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 900;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 860px) {
      .scene {
        padding: 10px;
      }

      .game {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 10px;
      }

      .signboard {
        grid-template-columns: 54px 1fr 54px;
        height: 64px;
      }

      .lantern {
        width: 42px;
        height: 54px;
      }

      .board {
        height: 60px;
      }

      .stage {
        min-height: 360px;
      }

      .patient-area {
        min-height: 230px;
        grid-template-columns: 1.22fr .78fr;
        gap: 8px;
        padding: 8px 8px 0;
      }

      .patient {
        height: 220px;
      }

      .patient img {
        max-height: 220px;
      }

      .stage-profile {
        gap: 7px;
        padding: 6px 0 10px;
      }

      .stage-profile h2 {
        font-size: 22px;
      }

      .stage-profile p {
        font-size: 13px;
        line-height: 1.45;
      }

      .active-clue {
        min-height: 36px;
        padding: 7px 8px 7px 34px;
        font-size: 12px;
      }

      .active-clue::before {
        left: 8px;
        top: 8px;
        width: 18px;
        height: 18px;
        font-size: 11px;
      }

      .actions {
        grid-template-columns: repeat(2, 1fr);
      }

      .hud {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .hud-box {
        min-height: 58px;
        padding: 7px;
      }

      .back-btn {
        left: 14px;
        top: 14px;
        min-height: 38px;
        font-size: 14px;
      }

      .music-btn {
        right: 14px;
        top: 14px;
        width: 48px;
        height: 48px;
        font-size: 24px;
      }

      .hud-value {
        font-size: 18px;
      }

      .cabinet {
        grid-template-columns: repeat(2, 1fr);
      }

      .choice-grid,
      .mini-panels,
      .dialogue-options {
        grid-template-columns: 1fr;
      }

      .desk {
        grid-template-columns: 1fr;
      }

      .submit {
        width: 100%;
        min-height: 54px;
      }

      .system-actions {
        margin: 12px 0 10px;
        gap: 7px;
      }

      #restartBtn {
        min-height: 56px;
      }
    }

    /* Refined game-poster theme inspired by the provided opening screen. */
    body {
      font-family: "STKaiti", "KaiTi", "FangSong", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,248,220,.5), transparent 26%),
        linear-gradient(180deg, #3a2417 0%, #7a4a2a 18%, #edce95 52%, #3a2417 100%);
    }

    .game {
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.65), transparent 22%),
        linear-gradient(180deg, rgba(255,239,196,.96), rgba(238,197,128,.94));
      border-radius: 14px;
      border: 6px solid #2a170e;
      box-shadow:
        0 26px 70px rgba(20, 10, 5, .38),
        inset 0 0 0 9px #8b4e2f,
        inset 0 0 0 14px #d6a867,
        inset 0 -26px 50px rgba(81,42,21,.18);
    }

    .game::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(42,23,14,.3), transparent 5%, transparent 95%, rgba(42,23,14,.3)),
        linear-gradient(180deg, rgba(42,23,14,.26), transparent 8%, transparent 92%, rgba(42,23,14,.32));
    }

    .board {
      background: linear-gradient(180deg, #fff0c5, #d8a86a);
      border-radius: 10px;
      box-shadow: inset 0 0 0 4px rgba(255,255,255,.34), 0 8px 0 rgba(59,34,24,.28);
    }

    h1 {
      font-size: clamp(32px, 5vw, 54px);
      color: #2a170e;
    }

    .stage,
    .dialogue,
    .hud-box,
    .prescription,
    .bag {
      background: linear-gradient(180deg, #fff4cf, #f1d29b);
      border-radius: 10px;
      box-shadow: inset 0 0 0 4px rgba(255,255,255,.25);
    }

    .patient-area {
      background:
        radial-gradient(circle at 50% 72%, rgba(47,122,80,.1), transparent 30%),
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.28), transparent 18%);
      border-bottom: 4px solid rgba(59,34,24,.32);
    }

    .name {
      font-size: 24px;
      color: #2a170e;
    }

    .speech,
    .note,
    .herb-use,
    .bag-list {
      color: #5d3924;
    }

    .tag {
      background: linear-gradient(180deg, #bd493d, #8d2e27);
      border-radius: 4px;
    }

    .action,
    .reply,
    .pill,
    .bag-item {
      border-radius: 8px;
      background: linear-gradient(180deg, #fff1c6, #e8bf7c);
      box-shadow: 0 4px 0 #7b4329;
    }

    .action.done,
    .action:hover,
    .reply:hover,
    .pill.need {
      background: linear-gradient(180deg, #e8f8d7, #bddf9e);
      border-color: #1f7a44;
    }

    .cabinet {
      background: linear-gradient(180deg, #7c482c, #4e291b);
      border-radius: 10px;
      box-shadow: inset 0 0 0 4px rgba(255,210,140,.14);
    }

    .herb {
      border-radius: 8px;
      background: linear-gradient(180deg, #d99550, #b56835);
    }

    .herb.recommended {
      background: linear-gradient(180deg, #e8f8d7, #c2e5a5);
      border-color: #1f7a44;
      box-shadow: 0 0 0 4px rgba(31,122,68,.32), inset 0 0 0 3px rgba(255,255,255,.34);
    }

    .submit,
    .primary {
      background: linear-gradient(180deg, #329b57, #176c3a);
      border: 4px solid #2a170e;
      border-radius: 12px;
      box-shadow: 0 7px 0 #0f4b2b, inset 0 0 0 3px rgba(255,255,255,.2);
      color: #fff8df;
    }

    .primary {
      min-height: 66px;
      min-width: 280px;
      font-size: 34px;
      letter-spacing: 0;
    }

    .back-btn {
      background: linear-gradient(180deg, #fff4cf, #d8a86a);
      border-radius: 10px;
    }

    .screen {
      background:
        radial-gradient(circle at 50% 8%, rgba(255,244,203,.86), transparent 28%),
        linear-gradient(90deg, rgba(42,23,14,.9), rgba(91,52,30,.48) 12%, rgba(244,215,160,.34) 50%, rgba(91,52,30,.48) 88%, rgba(42,23,14,.9)),
        linear-gradient(180deg, #3a2417, #edce95 18%, #f8dfad 76%, #3a2417);
    }

    .paper-card {
      width: min(760px, 100%);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.68), transparent 24%),
        linear-gradient(180deg, #fff0c5, #eec98d);
      border: 7px solid #2a170e;
      border-radius: 18px;
      padding: 34px 36px 28px;
      box-shadow:
        0 28px 80px rgba(29,15,8,.42),
        inset 0 0 0 8px #8b4e2f,
        inset 0 0 0 13px #d6a867;
      position: relative;
      overflow: visible;
    }

    .paper-card::before {
      content: none;
    }

    .paper-card::after {
      content: "✥";
      position: absolute;
      top: -33px;
      left: 50%;
      transform: translateX(-50%);
      width: 74px;
      height: 74px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #f8dfad;
      background: linear-gradient(180deg, #2f7a50, #18442f);
      border: 6px solid #8b4e2f;
      box-shadow: 0 5px 0 #2a170e;
      font-size: 34px;
    }

    .paper-card h2 {
      margin-top: 18px;
      margin-bottom: 22px;
      font-size: clamp(54px, 11vw, 92px);
      line-height: 1;
      color: #3a1d0e;
      text-shadow: 0 3px 0 rgba(255,255,255,.35);
    }

    .paper-card p {
      max-width: 560px;
      font-size: 22px;
      color: #4a2a1d;
    }

    .choice-grid {
      grid-template-columns: 1fr;
      gap: 18px;
      margin: 26px 0 28px;
    }

    .difficulty {
      min-height: 132px;
      padding: 20px 62px 18px 154px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 74px 50%, rgba(255,255,255,.6) 0 52px, transparent 53px),
        linear-gradient(180deg, #fff0c5, #e7c18a);
      border: 5px solid #7b4329;
      box-shadow: 0 8px 0 rgba(74,42,29,.5), inset 0 0 0 4px rgba(255,255,255,.22);
      position: relative;
    }

    .difficulty::before {
      content: attr(data-icon);
      position: absolute;
      left: 28px;
      top: 22px;
      width: 94px;
      height: 84px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #d9b47a, #8b4e2f);
      border: 5px solid #6a3a22;
      color: #fff8df;
      font-size: 34px;
      font-weight: 950;
    }

    .difficulty.selected {
      background:
        radial-gradient(circle at 74px 50%, rgba(255,255,255,.72) 0 52px, transparent 53px),
        linear-gradient(180deg, #e6f8d6, #bee4a3);
      border-color: #1f7a44;
      box-shadow: 0 8px 0 #176c3a, inset 0 0 0 4px rgba(255,255,255,.24);
    }

    .difficulty.selected::after {
      content: "✓";
      position: absolute;
      right: -18px;
      top: -18px;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #3ab85f, #17723f);
      color: white;
      border: 5px solid #2a170e;
      font-size: 34px;
      font-weight: 950;
    }

    .difficulty strong {
      font-size: 36px;
      color: #1f5f37;
    }

    .difficulty span {
      font-size: 22px;
      color: #5d3924;
      line-height: 1.45;
    }

    @media (max-width: 860px) {
      .paper-card {
        padding: 28px 18px 20px;
      }

      .paper-card h2 {
        font-size: clamp(44px, 13vw, 68px);
      }

      .result-title {
        font-size: clamp(26px, 10vw, 40px);
        margin-top: 4px;
        margin-bottom: 12px;
      }

      .paper-card p,
      .difficulty span {
        font-size: 18px;
      }

      .difficulty {
        min-height: 118px;
        padding: 15px 44px 14px 112px;
      }

      .difficulty::before {
        left: 18px;
        top: 22px;
        width: 72px;
        height: 68px;
        font-size: 26px;
      }

      .difficulty strong {
        font-size: 28px;
      }
    }

    @media (max-width: 480px) {
      .result-title {
        font-size: clamp(22px, 9vw, 34px);
        letter-spacing: 0;
      }
    }
    .poster-home {
      width: min(720px, calc(100vw - 2 * clamp(8px, 2vmin, 18px)));
      min-height: min(1040px, calc(100dvh - 2 * clamp(8px, 2vmin, 18px)));
      padding: clamp(68px, 9vh, 86px) clamp(18px, 7vw, 54px) clamp(22px, 4vh, 34px);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(10px, 2vh, 18px);
      background:
        linear-gradient(90deg, rgba(42,23,14,.35), transparent 7%, transparent 93%, rgba(42,23,14,.35)),
        radial-gradient(circle at 16% 92%, rgba(103,58,31,.32), transparent 15%),
        radial-gradient(circle at 88% 92%, rgba(103,58,31,.28), transparent 14%),
        radial-gradient(circle at 50% 13%, rgba(255,255,255,.72), transparent 22%),
        linear-gradient(180deg, rgba(255,242,206,.99), rgba(242,209,149,.97) 68%, rgba(127,71,38,.92));
      border: 8px solid #2a170e;
      border-radius: 22px;
      box-shadow: 0 30px 90px rgba(20,10,5,.5), inset 0 0 0 12px #7b4329, inset 0 0 0 18px #d9a965, inset 0 -44px 68px rgba(74,42,29,.34);
      overflow: hidden;
    }

    .poster-home::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 92px;
      background:
        radial-gradient(circle at 50% 16px, #2f7a50 0 28px, #8b4e2f 29px 38px, transparent 39px),
        radial-gradient(ellipse at 50% -8px, rgba(214,158,75,.85) 0 34%, transparent 35%),
        linear-gradient(160deg, transparent 0 12%, #5b351f 13% 25%, #2c1b12 26% 32%, transparent 33%),
        linear-gradient(-160deg, transparent 0 12%, #5b351f 13% 25%, #2c1b12 26% 32%, transparent 33%),
        linear-gradient(180deg, #2d2117, #7b4329);
      border-bottom: 6px solid #2a170e;
    }

    .poster-home::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 8% 89%, rgba(42,23,14,.34), transparent 15%),
        radial-gradient(circle at 94% 90%, rgba(42,23,14,.28), transparent 13%),
        linear-gradient(90deg, rgba(42,23,14,.32), transparent 7%, transparent 93%, rgba(42,23,14,.32));
    }

    .poster-tassel {
      position: absolute;
      top: 88px;
      width: 40px;
      height: 104px;
      z-index: 1;
    }

    .poster-tassel.left { left: 44px; }
    .poster-tassel.right { right: 44px; }

    .poster-tassel::before {
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      margin: 0 auto;
      border-radius: 50%;
      background: radial-gradient(circle, #a8d8c5 0 44%, #2f7a50 45% 54%, #d7a85e 55%);
      border: 3px solid #7b4329;
      box-shadow: 0 4px 0 rgba(42,23,14,.28);
    }

    .poster-tassel::after {
      content: "";
      display: block;
      width: 16px;
      height: 62px;
      margin: 3px auto 0;
      background: linear-gradient(90deg, #12583c, #3ea174, #12583c);
      border-radius: 0 0 10px 10px;
      border: 2px solid #7b4329;
    }

    .poster-content {
      position: relative;
      z-index: 2;
      text-align: center;
      display: grid;
      gap: clamp(8px, 1.6vh, 14px);
      justify-items: center;
    }

    .poster-health-btn {
      position: absolute;
      z-index: 4;
      left: 24px;
      top: 22px;
      min-width: 96px;
      height: 42px;
      padding: 0 14px;
      border-radius: 12px;
      border: 3px solid #6f3e24;
      background: linear-gradient(180deg, #fff0c5, #d9a965);
      color: #4a2a1d;
      font-size: 18px;
      font-weight: 900;
      box-shadow: 0 5px 0 rgba(42,23,14,.42), inset 0 0 0 2px rgba(255,255,255,.3);
      cursor: pointer;
      pointer-events: auto;
    }

    .poster-health-btn:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 rgba(42,23,14,.42), inset 0 0 0 2px rgba(255,255,255,.24);
    }

    .poster-title {
      margin: 0;
      position: relative;
      width: 100%;
      max-width: 100%;
      color: #3a1d0e;
      font-size: clamp(34px, min(7.2vw, 6.4vh), 58px);
      line-height: .86;
      font-weight: 950;
      text-shadow: 0 4px 0 rgba(255,255,255,.32);
      display: grid;
      place-items: center;
      padding: 0;
      min-height: 62px;
    }

    .poster-main-title {
      display: block;
      white-space: nowrap;
    }

    .poster-title::after {
      content: "";
      display: block;
      width: 112px;
      height: 10px;
      margin: 4px auto 0;
      background:
        radial-gradient(circle at 50% 50%, #b8894e 0 5px, transparent 6px),
        linear-gradient(90deg, transparent, #b8894e 28%, #b8894e 72%, transparent);
      opacity: .78;
    }

    .poster-copy {
      max-width: 560px;
      margin: 0 auto clamp(12px, 2.2vh, 24px);
      color: #4a2a1d;
      font-size: clamp(18px, min(3.2vw, 2.8vh), 23px);
      line-height: 1.62;
      font-weight: 800;
    }

    .poster-options {
      display: grid;
      gap: clamp(12px, 2vh, 18px);
      margin: 0;
      width: 100%;
    }

    .poster-option {
      min-height: clamp(116px, 16vh, 146px);
      position: relative;
      display: grid;
      grid-template-columns: clamp(92px, 16vw, 124px) 1fr;
      gap: clamp(12px, 2vw, 20px);
      align-items: center;
      padding: clamp(12px, 2vh, 18px) clamp(44px, 7vw, 62px) clamp(12px, 2vh, 18px) clamp(12px, 2vw, 18px);
      text-align: left;
      border: 5px solid #8b5b34;
      border-radius: 18px;
      background: radial-gradient(circle at 88% 82%, rgba(123,67,41,.08), transparent 18%), linear-gradient(180deg, #fff0c5, #e9c58d);
      box-shadow: 0 8px 0 rgba(74,42,29,.45), inset 0 0 0 4px rgba(255,255,255,.24);
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .poster-option.difficulty::before {
      content: none;
      display: none;
    }

    .poster-option:hover,
    .poster-option:focus-visible {
      transform: translateY(-3px);
      border-color: #b8753d;
      box-shadow: 0 12px 0 rgba(74,42,29,.42), 0 0 0 5px rgba(255,238,181,.35), inset 0 0 0 4px rgba(255,255,255,.28);
    }

    .poster-option:focus-visible {
      outline: 4px solid rgba(47,122,80,.42);
      outline-offset: 4px;
    }

    .poster-option:active {
      transform: translateY(3px);
      box-shadow: 0 4px 0 rgba(74,42,29,.45), inset 0 0 0 4px rgba(255,255,255,.2);
    }

    .poster-option.selected {
      border-color: #21834c;
      background: radial-gradient(circle at 88% 82%, rgba(47,122,80,.12), transparent 18%), linear-gradient(180deg, #e9f9dd, #c6e9ab);
      box-shadow: 0 9px 0 #176c3a, 0 0 0 5px rgba(52,170,91,.24), inset 0 0 0 4px rgba(255,255,255,.28);
    }

    .poster-option.selected::after {
      content: "✓";
      position: absolute;
      right: -18px;
      top: -18px;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      font-size: 36px;
      font-weight: 950;
      background: linear-gradient(180deg, #44bc64, #17723f);
      border: 5px solid #2a170e;
      box-shadow: 0 5px 0 #0f4b2b;
    }

    .poster-illus {
      width: clamp(76px, 14vh, 104px);
      height: clamp(76px, 14vh, 104px);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: radial-gradient(circle, #fff8dd 0 48%, #d7a867 49% 66%, #8b4e2f 67%);
      border: 4px solid rgba(74,42,29,.75);
      color: #3a1d0e;
      font-size: 44px;
      font-weight: 950;
    }

    .poster-option strong {
      display: block;
      color: #3a1d0e;
      font-size: clamp(28px, min(5vw, 4vh), 36px);
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .poster-option.selected strong {
      color: #165f38;
    }

    .poster-option span {
      display: block;
      color: #5d3924;
      font-size: clamp(16px, min(3vw, 2.5vh), 20px);
      line-height: 1.46;
      font-weight: 800;
    }

    .poster-option .poster-illus {
      display: grid;
      place-items: center;
      color: #5a321f;
      font-size: clamp(34px, 6vh, 46px);
      line-height: 1;
      text-align: center;
      font-weight: 950;
      text-shadow: 0 2px 0 rgba(255, 244, 210, .85);
    }

    .poster-option.selected::after {
      content: "✓";
    }

    .poster-option.selected .poster-illus {
      color: #4a2a1d;
      background: radial-gradient(circle, #fff8dd 0 46%, #e6bd74 47% 64%, #9a6239 65%);
      border-color: #21834c;
    }

    .poster-start {
      position: relative;
      z-index: 2;
      display: block;
      justify-self: stretch;
      align-self: stretch;
      width: 100%;
      box-sizing: border-box;
      min-height: clamp(62px, 9vh, 82px);
      margin-top: 0;
      border-radius: 18px;
      font-size: clamp(32px, min(7vw, 5.6vh), 42px);
      background: linear-gradient(180deg, #37a65c, #176c3a);
      box-shadow: 0 10px 0 #0f4b2b, inset 0 0 0 4px rgba(255,255,255,.22);
      border: 5px solid #d6b26e;
      cursor: pointer;
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    }

    .poster-start:hover,
    .poster-start:focus-visible {
      transform: translateY(-3px);
      filter: brightness(1.06);
      box-shadow: 0 13px 0 #0f4b2b, 0 0 0 5px rgba(255,238,181,.25), inset 0 0 0 4px rgba(255,255,255,.25);
    }

    .poster-start:active {
      transform: translateY(4px);
      box-shadow: 0 5px 0 #0f4b2b, inset 0 0 0 4px rgba(255,255,255,.18);
    }

    .poster-props {
      position: absolute;
      z-index: 1;
      left: 22px;
      right: 22px;
      bottom: 18px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      color: rgba(42,23,14,.42);
      font-size: 54px;
    }

    @media (max-width: 860px) {
      .poster-home {
        min-height: calc(100vh - 20px);
        padding: 56px 16px 22px;
        border-width: 5px;
      }

      .poster-home::before {
        height: 72px;
      }

      .poster-title {
        margin: 0;
        font-size: clamp(30px, 9vw, 46px);
      }

      .poster-copy {
        margin-bottom: 0;
        font-size: clamp(16px, 4.2vw, 18px);
        line-height: 1.52;
      }

      .poster-option {
        grid-template-columns: 82px 1fr;
        min-height: 118px;
        gap: 12px;
        padding: 12px 40px 12px 12px;
      }

      .poster-illus {
        width: 74px;
        height: 74px;
        font-size: 34px;
      }

      .poster-option strong {
        font-size: clamp(24px, 6vw, 28px);
      }

      .poster-option span {
        font-size: 15px;
        line-height: 1.4;
      }

      .poster-start {
        width: 100%;
        min-width: 0;
        min-height: 66px;
        font-size: 34px;
      }
    }

    @media (min-width: 641px) and (max-height: 820px) {
      #startScreen.screen {
        align-items: start;
        padding: 10px;
      }

      .poster-home {
        width: min(720px, calc(100vw - 16px));
        min-height: calc(100dvh - 16px);
        padding: 48px 30px 18px;
        gap: 10px;
      }

      .poster-home::before {
        height: 64px;
      }

      .poster-tassel {
        top: 48px;
        transform: scale(.82);
        transform-origin: top center;
      }

      .poster-health-btn {
        top: 14px;
        left: 18px;
      }

      .poster-title {
        margin: 0;
        font-size: clamp(28px, 5.8vh, 44px);
      }

      .poster-title::after {
        margin-top: 5px;
      }

      .poster-copy {
        max-width: 620px;
        margin-bottom: 0;
        font-size: clamp(17px, 2.4vh, 20px);
        line-height: 1.45;
      }

      .poster-options {
        gap: 9px;
        margin: 0;
      }

      .poster-option {
        min-height: clamp(92px, 15vh, 118px);
        grid-template-columns: 88px 1fr;
        gap: 12px;
        padding: 10px 42px 10px 12px;
      }

      .poster-illus {
        width: 76px;
        height: 76px;
      }

      .poster-option strong {
        font-size: clamp(24px, 4vh, 30px);
        margin-bottom: 4px;
      }

      .poster-option span {
        font-size: clamp(14px, 2vh, 17px);
        line-height: 1.36;
      }

      .poster-start {
        min-height: 60px;
        font-size: clamp(30px, 5.2vh, 38px);
      }
    }

    @media (max-width: 640px) {
      body {
        background: linear-gradient(180deg, #2a170e 0%, #6f4328 18%, #e9c27f 100%);
      }

      .scene {
        display: block;
        padding: 0;
        overflow: visible;
      }

      .game {
        width: 100%;
        min-height: calc(100vh + 120px);
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 50px 8px 148px;
        border-width: 0;
        border-radius: 0;
        box-shadow: inset 0 0 0 5px #2a170e, inset 0 0 0 10px #8b4e2f;
        overflow: visible;
      }

      .game::before,
      .game::after {
        display: none;
      }

      .back-btn {
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 60;
        min-height: 38px;
        padding: 0 12px;
        font-size: 14px;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      }

      .music-btn {
        position: fixed;
        right: 10px;
        top: 10px;
        z-index: 60;
        width: 44px;
        height: 44px;
        font-size: 22px;
      }

      .left,
      .right {
        width: 100%;
      }

      .right {
        display: contents;
      }

      .hud {
        order: -3;
        position: sticky;
        top: 0;
        z-index: 40;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 0 2px;
      }

      .hud-box {
        min-height: 52px;
        border-width: 3px;
        padding: 6px;
        text-align: center;
      }

      .hud-label {
        font-size: 11px;
      }

      .hud-value {
        font-size: 18px;
      }

      .left {
        order: -2;
      }

      .clinic {
        gap: 8px;
      }

      .signboard {
        height: 52px;
        grid-template-columns: 34px 1fr 34px;
      }

      .lantern {
        width: 30px;
        height: 42px;
        border-width: 2px;
      }

      .board {
        height: 50px;
        border-width: 3px;
      }

      .board::before,
      .board::after {
        display: none;
      }

      h1 {
        font-size: clamp(24px, 8vw, 34px);
      }

      .stage {
        min-height: 0;
        padding: 8px;
        gap: 6px;
        border-width: 3px;
      }

      .patient-area {
        min-height: 196px;
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: 6px;
        padding: 4px 6px 0;
      }

      .patient {
        width: 100%;
        height: 196px;
        place-items: center;
        transform-origin: bottom center;
      }

      .patient img {
        max-height: 196px;
      }

      .stage-profile h2 {
        font-size: 20px;
      }

      .stage-profile p {
        font-size: 12px;
        line-height: 1.38;
      }

      .active-clue {
        font-size: 11px;
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 6px;
      }

      .dialogue {
        min-height: 0;
        padding: 10px;
        border-width: 3px;
      }

      .name-row {
        align-items: flex-start;
      }

      .name {
        font-size: 20px;
        line-height: 1.2;
      }

      .tag {
        font-size: 12px;
        padding: 3px 6px;
      }

      .speech {
        font-size: 14px;
        line-height: 1.55;
      }

      .actions,
      .dialogue-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
      }

      .action,
      .reply {
        min-height: 42px;
        font-size: 14px;
        padding: 6px;
      }

      .prescription {
        order: -1;
        padding: 10px;
        gap: 8px;
        border-width: 3px;
      }

      .prescription h2 {
        font-size: 20px;
        padding-bottom: 5px;
      }

      .note {
        font-size: 13px;
        line-height: 1.45;
      }

      .formula {
        gap: 6px;
      }

      .pill {
        padding: 7px 8px;
        font-size: 13px;
        line-height: 1.35;
      }

      .cabinet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        min-height: 0;
        max-height: min(46vh, 390px);
        overflow-y: auto;
        padding: 8px;
        border-width: 4px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }

      .herb {
        min-height: 70px;
        padding: 8px 6px;
        border-width: 3px;
        touch-action: pan-y;
        align-content: center;
        overflow: hidden;
      }

      .herb-name {
        font-size: 16px;
        line-height: 1.08;
        padding: 0 18px 0 4px;
      }

      .herb-use {
        font-size: 10.5px;
        line-height: 1.35;
        max-width: 100%;
        margin: 0;
        padding: 0 4px;
      }

      .herb.recommended::after {
        font-size: 9px;
        right: 3px;
        top: 3px;
        padding: 2px 3px;
      }

      .desk {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        grid-template-columns: 1fr 78px;
        min-height: 74px;
        gap: 6px;
        padding: 0;
        background: transparent;
      }

      .bag {
        min-height: 66px;
        padding: 6px;
        border-width: 3px;
      }

      .bag-title {
        font-size: 15px;
        margin-bottom: 3px;
      }

      .bag-list {
        font-size: 12px;
        gap: 5px;
        min-height: 20px;
        max-height: 42px;
        overflow-y: auto;
      }

      .bag-item {
        min-height: 26px;
        padding: 3px 6px;
      }

      .remove-herb {
        width: 18px;
        height: 18px;
        font-size: 11px;
      }

      .submit {
        width: 78px;
        min-height: 66px;
        font-size: 18px;
      }

      .screen {
        position: fixed;
        overflow: auto;
        padding: 10px;
      }

      .poster-home {
        width: 100%;
        min-height: calc(100vh - 20px);
        padding: 50px 12px 18px;
      }

      .cover-enter {
        width: min(calc((100dvh - 20px) * 941 / 1672), calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
      }

      .poster-tassel {
        display: none;
      }

      .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        z-index: 55;
      }

      .nav-btn {
        min-height: 54px;
        border-radius: 16px;
      }

      .nav-icon {
        width: 22px;
        height: 22px;
        font-size: 13px;
      }

      .nav-label {
        font-size: 13px;
      }
    }

    @media (max-width: 420px) {
      .cover-enter {
        width: min(calc((100dvh - 20px) * 941 / 1672), calc(100vw - 20px));
      }

      .poster-home {
        padding-top: 48px;
      }

      .poster-home::before {
        height: 60px;
      }

      .poster-tassel {
        top: 42px;
        transform: scale(.72);
      }

      .poster-health-btn {
        top: 10px;
        left: 12px;
        min-width: 84px;
        height: 38px;
        font-size: 16px;
      }

      .poster-title {
        margin: 0;
        font-size: clamp(26px, 8.5vw, 38px);
      }

      .poster-title::after {
        width: 96px;
        height: 8px;
        margin-top: 3px;
      }

      .poster-copy {
        margin-bottom: 0;
        font-size: 15px;
      }

      .poster-options {
        margin: 0;
      }

      .poster-option {
        min-height: 102px;
        padding: 8px 38px 8px 10px;
        grid-template-columns: 72px 1fr;
      }

      .poster-start {
        min-height: 58px;
        font-size: 30px;
      }

      .poster-illus {
        width: 66px;
        height: 66px;
        font-size: 30px;
      }

      .poster-option strong {
        font-size: 20px;
      }

      .poster-option span {
        font-size: 13px;
        line-height: 1.32;
      }
    }

    @media (max-width: 640px) and (max-height: 700px) {
      .game {
        padding-top: 46px;
        padding-bottom: 134px;
        min-height: calc(100vh + 140px);
        overflow: visible;
      }

      .signboard {
        height: 46px;
      }

      .board {
        height: 44px;
      }

      h1 {
        font-size: clamp(22px, 7vw, 30px);
      }

      .patient-area {
        min-height: 176px;
      }

      .patient {
        height: 176px;
      }

      .patient img {
        max-height: 176px;
      }

      .stage-profile {
        gap: 4px;
        padding: 4px 0 6px;
      }

      .stage-profile h2 {
        font-size: 18px;
      }

      .stage-profile p,
      .active-clue {
        font-size: 10.5px;
      }

      .cabinet {
        max-height: min(43vh, 330px);
      }

      .herb {
        min-height: 66px;
        padding: 7px 5px;
        overflow: hidden;
      }

      .herb-name {
        font-size: 15px;
        padding: 0 14px 0 3px;
      }

      .herb-use {
        font-size: 10px;
        line-height: 1.28;
        padding: 0 3px;
      }

      .desk {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        min-height: 68px;
        grid-template-columns: 1fr 72px;
      }

      .bag {
        min-height: 60px;
      }

      .submit {
        width: 72px;
        min-height: 60px;
      }

      .bottom-nav {
        gap: 6px;
        padding-top: 6px;
      }

      .nav-btn {
        min-height: 48px;
      }
    }