:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #304534; background: #f3eddf; }
* { box-sizing: border-box; }
body { margin: 0; }
.preview-layout { min-height: 100svh; display: flex; align-items: center; justify-content: center; gap: clamp(56px, 9vw, 150px); padding: 24px; background: radial-gradient(ellipse at 80% 25%, #fff9ed, #efe9da 70%); }
.intro { width: 340px; margin-top: -10px; }
.brand-logo { display: block; width: 72px; height: 72px; border-radius: 19px; margin: 0 0 18px; }
.eyebrow { color: #778361; font-size: 11px; letter-spacing: .25em; font-weight: 600; }
.intro h1 { font-size: 38px; line-height: 1.55; font-weight: 700; margin: 28px 0 23px; letter-spacing: .02em; }
.intro p { color: #746951; font-size: 14px; line-height: 2.2; }
.rule { width: 150px; border-top: 1px solid #cbbda3; margin: 35px 0 26px; position: relative; }
.rule span { width: 8px; height: 8px; position: absolute; top: -5px; left: 0; border-radius: 50%; background: #889976; }
.intro .instruction { font-size: 12px; }
.caption { display: inline-block; margin-top: 58px; color: #99917e; font-size: 10px; letter-spacing: .08em; }
.game-frame { width: min(390px, calc((100svh - 48px) * 390 / 844)); height: min(844px, calc(100svh - 48px)); min-width: 290px; min-height: 628px; position: relative; overflow: hidden; border-radius: 30px; background: #f5edde; box-shadow: 0 20px 60px #4c432322, 0 0 0 1px #d7ccba; touch-action: none; }
canvas { width: 100%; height: 100%; display: block; }
#controls { position: absolute; inset: 0; pointer-events: none; }
.game-control { position: absolute; padding: 0; border: 0; background: transparent; color: transparent; font-size: 0; border-radius: 12px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, transform .15s ease; }
.game-control:active:not(:disabled) { background: transparent; }
.game-control:focus-visible { outline: 3px solid #a28149; outline-offset: 2px; background: #ffffff22; }
.game-control:disabled { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#loading { position: absolute; inset: 0; background: #f5edde; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 5; font-size: 13px; color: #8b836e; }
.loading-yarn { width: 48px; height: 48px; border: 4px solid #c6d0b8; border-top-color: #667d59; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .intro { display: none; } .preview-layout { padding: 0; } .game-frame { width: 100vw; height: 100svh; min-width: 0; min-height: 0; max-width: 500px; border-radius: 0; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .loading-yarn { animation: none; } }
.postcard-dialog { border: 1px solid #cbbba0; border-radius: 20px; padding: 18px 24px; background: #faf4e8; color: #4c4b3e; width: min(370px, calc(100vw - 28px)); max-height: 94svh; text-align: center; }
.postcard-dialog::backdrop { background: #36312a99; }
.postcard-dialog h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.postcard-dialog img { display: block; width: min(100%, 260px); height: auto; max-height: 63svh; object-fit: contain; margin: 0 auto; border-radius: 10px; }
.postcard-dialog p { font-size: 11px; color: #908773; margin: 12px 0; }
.postcard-dialog a, .postcard-dialog button { display: block; width: 100%; padding: 12px; border-radius: 12px; border: 0; font: 600 13px "Microsoft YaHei", sans-serif; text-decoration: none; cursor: pointer; }
.postcard-dialog a { color: #faf4e8; background: #667d59; }
.postcard-dialog button { margin-top: 8px; color: #667d59; background: #e7ecde; }