:root { --paper: #faf4ed; --ink: #543b39; --muted: #9a7d76; --rose: #c96879; --line: #e9d9cf; --space: 24px; font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 35% 40%, #fffaf5, transparent 65%), var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #a64a63; outline-offset: 4px; }
.site-header { max-width: 1440px; margin: auto; padding: 25px 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: 2px; }
.seal { background: var(--rose); color: white; border-radius: 10px 3px; padding: 7px 9px; font-family: serif; }
.brand-sub { font-size: 12px; font-weight: 400; border-left: 1px solid var(--line); padding-left: 14px; color: var(--muted); }
.edition, .eyebrow { font-size: 10px; letter-spacing: 3px; color: var(--muted); }
.layout { max-width: 1320px; padding: 36px 42px 24px; margin: auto; display: grid; grid-template-columns: 1fr minmax(320px, 440px) 0.7fr; gap: 48px; align-items: center; }
h1 { font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(29px, 2.7vw, 42px); line-height: 1.7; letter-spacing: 2px; font-weight: 500; margin: 20px 0; }
h1 span { color: var(--rose); }
.description, .journey > p:not(.eyebrow) { font-size: 13px; line-height: 2.1; color: var(--muted); }
.record { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; margin: 28px 0; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
.record strong { color: var(--ink); font-size: 30px; font-weight: 400; }
.record small { font-size: 10px; margin-left: 8px; }
.instructions h2 { font-size: 13px; font-weight: 500; }
.instructions p { font-size: 11px; color: var(--muted); line-height: 1.8; }
kbd { display: inline-block; min-width: 23px; text-align: center; border: 1px solid var(--line); background: #fffaf5; border-radius: 5px; margin-right: 4px; padding: 2px; }
.side-note { font-size: 11px; color: #b99a8d; margin-top: 36px; }
.game-frame { position: relative; width: 100%; aspect-ratio: 480 / 760; border: 6px solid #fffcf8; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 65px #91665720, 0 0 0 1px #eadbd3; background: #efcacc; }
canvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.hud { position: absolute; top: 22px; left: 24px; right: 18px; display: flex; justify-content: space-between; pointer-events: none; }
.hud-label { display: block; font-size: 10px; letter-spacing: 2px; opacity: .65; }
.hud strong { font-size: 30px; font-weight: 400; }
.hud small { font-size: 12px; }
.icon-button { pointer-events: auto; border: 1px solid #fff8; border-radius: 50%; width: 35px; height: 35px; background: #fff7; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #f8ede25c; backdrop-filter: blur(5px); padding: 24px; }
.overlay[hidden] { display: none; }
.modal { text-align: center; width: 100%; padding: 38px 24px; border-radius: 24px; background: #fffaf1e8; border: 1px solid white; box-shadow: 0 12px 45px #7f534c12; }
.modal h2 { font-family: "PMingLiU", serif; font-weight: 500; font-size: 40px; letter-spacing: 5px; margin: 12px 0; }
.modal > p:not(.eyebrow) { font-size: 12px; color: var(--muted); line-height: 1.8; }
.primary { width: 100%; border: none; border-radius: 12px; padding: 15px 20px; background: var(--rose); color: white; margin-top: 20px; box-shadow: 0 5px 16px #c9687928; }
.primary:hover { background: #b9586c; }
.primary span { float: right; }
.touch-controls { position: absolute; bottom: 17px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.touch-controls button { pointer-events: auto; width: 55px; height: 43px; border-radius: 15px; background: #fff9; border: 1px solid white; font-size: 23px; touch-action: none; user-select: none; }
.touch-controls span { font-size: 10px; color: #967270; letter-spacing: 3px; }
.journey h2 { font-family: "PMingLiU", serif; font-size: 26px; letter-spacing: 3px; font-weight: 400; }
.journey ol { list-style: none; padding: 0; margin: 30px 0; }
.journey li { display: flex; gap: 15px; padding: 16px 0; font-size: 13px; color: #b6a29b; }
.journey li > span { font-size: 10px; padding-top: 3px; }
.journey li.active { color: var(--rose); }
.journey small { display: block; font-size: 10px; margin-top: 6px; }
.journey-note { border-top: 1px solid var(--line); padding-top: 20px; color: var(--rose); font-size: 24px; }
.journey-note p { color: var(--muted); font-size: 11px; line-height: 2; }
footer { max-width: 1220px; margin: auto; padding: 15px 30px 24px; font-size: 10px; letter-spacing: 1px; color: #b2998c; display: flex; justify-content: space-between; }
.character-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.character-picker[hidden] { display: none; }
.character-picker button { padding: 8px 4px 13px; border: 1px solid #e9d7cd; background: #fff7ef80; border-radius: 15px; }
.character-picker button[aria-pressed="true"] { border-color: var(--rose); background: #f9e3e2; box-shadow: 0 0 0 1px var(--rose); }
.portrait { display: block; width: 115px; max-width: 100%; height: 115px; margin: auto; background-image: url('../assets/characters.png'); background-size: 200% 100%; background-repeat: no-repeat; }
.portrait.apple { background-position: right; }
.character-picker strong { display: block; font-size: 14px; letter-spacing: 3px; }
.character-picker small { display: block; font-size: 9px; color: var(--muted); margin-top: 6px; }
.realm-badge { position: absolute; top: 100px; left: 24px; font-size: 10px; letter-spacing: 2px; padding: 6px 11px; border-radius: 20px; background: #fff9; }
.stats { position: absolute; top: 75px; left: 24px; right: 20px; display: flex; gap: 12px; font-size: 10px; background: #fff9; border-radius: 10px; padding: 5px 9px; }
#health { color: #b84c64; }
.mode-picker { display: flex; border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; margin-top: 16px; }
.mode-picker[hidden] { display: none; }
.mode-picker button { width: 50%; padding: 8px 3px; font-size: 11px; border: none; background: transparent; border-radius: 6px; color: var(--muted); }
.mode-picker button[aria-pressed="true"] { background: #f0d7d5; color: var(--ink); }
.upgrade-panel { position: absolute; inset: 18% 7%; padding: 26px; border: 1px solid white; background: #fff8edfa; border-radius: 20px; text-align: center; box-shadow: 0 0 0 200px #65425a55; z-index: 2; }
.upgrade-panel h2 { font-family: serif; letter-spacing: 3px; }
.upgrade-panel > p { font-size: 12px; color: var(--muted); }
.upgrade-panel button { width: 100%; border: 1px solid #e7c3bd; border-radius: 10px; padding: 14px; background: #f9e7df; margin-top: 12px; }
.upgrade-panel small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.hud-actions { display: flex; gap: 7px; }
.sound-button { width: 49px; border-radius: 18px; font-size: 11px; }
.modal { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.howto { text-align: left; font-size: 11px; margin-top: 16px; color: var(--muted); line-height: 1.8; }
.howto summary { cursor: pointer; text-align: center; }
.overlay:not([hidden]) ~ .touch-controls { visibility: hidden; }
.hud > div:first-child { background: #fff9; border-radius: 12px; padding: 7px 11px; margin: -7px 0 0 -9px; }
@media (max-width: 650px) { .modal { padding: 22px 16px; } .modal h2 { font-size: 32px; } .portrait { width: 92px; height: 92px; } .character-picker { margin-top: 14px; } .modal .primary { margin-top: 12px; } .overlay { padding: 19px; } }
@media (max-width: 1000px) { .layout { gap: 30px; grid-template-columns: 1fr minmax(310px, 440px); } .journey { display: none; } .edition { display: none; } }
@media (max-width: 650px) { .site-header { padding: 13px 20px; } .brand { font-size: 13px; } .layout { display: block; padding: 16px 14px; } .intro { display: none; } .game-frame { max-width: 440px; margin: auto; max-height: calc(100svh - 110px); width: auto; } footer { justify-content: center; font-size: 9px; } footer span { display: none; } .hud { top: 16px; } }