/* Botanical travel stationery surrounds the game; game coordinates stay unchanged. */
:root{--page-game-width:min(75vw,133.2624867dvh);--page-game-height:min(75dvh,42.209928225vw);--page-ink:#3e4c3c;--page-muted:#716957}
html,body{background:#eee9dc}
body{background:radial-gradient(ellipse at 48% 42%,#fcf9f0 0%,#f2edde 48%,#e5dfce 100%);isolation:isolate}
.page-surround{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.page-rule{position:absolute;inset:22px;border:1px solid #998d682c;border-radius:3px}
.page-rule::before,.page-rule::after{content:'';position:absolute;top:-3px;width:5px;height:5px;border:1px solid #a79a73;background:#eee9dc;transform:rotate(45deg)}
.page-rule::before{left:23px}.page-rule::after{right:23px}
.page-mat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--page-game-width) + 24px);height:calc(var(--page-game-height) + 24px);background:#f8f4e9;border:1px solid #b2a282;border-radius:5px;box-shadow:0 18px 55px #4c50321c,0 2px 5px #493f2014,inset 0 0 0 4px #e6ddca,inset 0 0 0 5px #c2b493}
#qingteng-motion{box-shadow:0 0 0 2px #4b4e3e;border-radius:2px}
.page-botanical{position:absolute;width:clamp(210px,25vw,430px);height:auto;color:#657653;opacity:.42}
.botanical-left{left:-45px;bottom:-68px;transform:rotate(-9deg)}
.botanical-right{right:-56px;top:-130px;transform:rotate(171deg);opacity:.28;color:#8b8057}
.page-masthead{position:fixed;left:50%;bottom:calc(50% + var(--page-game-height)/2 + 34px);transform:translateX(-50%);width:min(88vw,560px);text-align:center;color:var(--page-ink);pointer-events:none}
.page-masthead .page-eyebrow{font:10px/1.5 Georgia,serif;letter-spacing:.3em;margin:0 0 13px;color:#786d50}
.page-masthead h1{display:flex;align-items:center;justify-content:center;gap:22px;font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;font-size:36px;font-weight:500;letter-spacing:.2em;line-height:1.25;margin:0;text-indent:.2em}
.page-masthead h1 span{display:block;width:35px;height:1px;background:#ac9b72;position:relative}
.page-masthead h1 span::after{content:'';position:absolute;left:50%;top:-2px;width:5px;height:5px;background:#a79970;transform:rotate(45deg)}
.page-masthead .page-intro{margin:13px 0 0;font-size:12px;line-height:1.8;letter-spacing:.18em;color:var(--page-muted)}
.page-afterword{position:fixed;left:50%;top:calc(50% + var(--page-game-height)/2 + 29px);transform:translateX(-50%);width:min(88vw,560px);text-align:center;pointer-events:none;color:var(--page-ink)}
.page-small-leaf{display:block;width:34px;height:24px;color:#8b926b;margin:0 auto 6px}
.page-afterword p{margin:0 0 9px;font-family:'Songti SC','STSong',serif;font-size:17px;line-height:1.6;letter-spacing:.14em}
.page-footnote{font-size:11px;line-height:1.8;letter-spacing:.08em;color:var(--page-muted)}
@media(max-width:600px){.page-rule{inset:12px}.page-masthead{bottom:calc(50% + var(--page-game-height)/2 + 27px)}.page-masthead h1{font-size:28px;gap:14px}.page-masthead .page-eyebrow{font-size:9px}.page-masthead .page-intro{font-size:11px;letter-spacing:.08em}.page-afterword{top:calc(50% + var(--page-game-height)/2 + 24px)}.page-afterword p{font-size:15px}.page-footnote{font-size:11px}.page-mat{width:calc(var(--page-game-width) + 16px);height:calc(var(--page-game-height) + 16px)}.page-botanical{opacity:.21;width:230px}.botanical-left{left:-110px}.botanical-right{right:-115px}}
@media(max-height:600px){.page-masthead{bottom:calc(50% + var(--page-game-height)/2 + 22px)}.page-masthead .page-eyebrow,.page-masthead .page-intro{display:none}.page-masthead h1{font-size:25px}.page-afterword{top:calc(50% + var(--page-game-height)/2 + 19px)}.page-small-leaf,.page-footnote{display:none}.page-afterword p{font-size:13px}.page-rule{inset:10px}}

/* Keep the page lettering within the smaller margins around the 75% game. */
.page-masthead{bottom:calc(50% + var(--page-game-height)/2 + 18px)}
.page-masthead h1{font-size:28px}
.page-masthead .page-eyebrow{font-size:9px;margin-bottom:6px}
.page-masthead .page-intro,.page-small-leaf{display:none}
.page-afterword{top:calc(50% + var(--page-game-height)/2 + 16px)}
.page-afterword p{font-size:14px;margin-bottom:4px}
@media(max-height:700px){.page-masthead{bottom:calc(50% + var(--page-game-height)/2 + 12px)}.page-masthead h1{font-size:24px}.page-masthead .page-eyebrow,.page-footnote{display:none}.page-afterword{top:calc(50% + var(--page-game-height)/2 + 12px)}.page-afterword p{font-size:12px}}
@media(max-height:350px){.page-masthead{bottom:calc(50% + var(--page-game-height)/2 + 10px)}.page-masthead h1{font-size:20px}.page-afterword{top:calc(50% + var(--page-game-height)/2 + 10px)}}