:root{--metal:#dcab58;--stone:#50506a;--ink:#f4eeff;--ink-muted:#c9bbf0;--track:#120c28;--gold:#f8d68c;--gold-bright:#fff2c8;--danger:#7e2233}html,body,#game{height:100%;margin:0}body{background:var(--track);color:var(--ink);font-family:system-ui,sans-serif}.corner{align-items:center;gap:16px;font-family:Noto Sans Thai,system-ui,sans-serif;font-size:13px;display:flex;position:fixed;bottom:8px;right:12px}.corner-link{color:var(--ink-muted);text-shadow:0 1px 2px var(--track)}.corner-button{color:var(--ink);font:inherit;cursor:pointer;border:4px solid var(--stone);border-image:var(--frame-button) 4 fill / 4px stretch;image-rendering:pixelated;background:0 0;padding:0 4px}.page{z-index:10;text-align:center;background:var(--track);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;font-family:Noto Sans Thai,system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow:auto}.page-title{color:var(--gold-bright);margin:0;font-size:28px}.page-text{max-width:34em;margin:0;line-height:1.6}.page-link{box-sizing:border-box;width:min(100%,34em);color:var(--ink);font:inherit;background:var(--track);border:2px solid var(--stone);border-image:var(--frame-field) 1 fill / 2px stretch;image-rendering:pixelated;padding:8px}.page-link:focus-visible,.panel-text:focus-visible{outline:2px solid var(--metal);outline-offset:-2px}.hero-name-input{z-index:5;width:auto;font-family:Noto Sans Thai,system-ui,sans-serif;position:fixed}.page-button{min-height:44px;color:var(--gold-bright);font:inherit;cursor:pointer;border:8px solid var(--metal);border-image:var(--frame-button-chosen) 4 fill / 8px stretch;image-rendering:pixelated;background:0 0;padding:0 12px;font-weight:700}.page-button:hover:not(:disabled){border-image-source:var(--frame-button-hover)}.page-button:active:not(:disabled){border-image-source:var(--frame-button-press)}.page-button:disabled{cursor:default;opacity:.6}.page-button-quiet{color:var(--ink);border-color:var(--stone);border-image-source:var(--frame-button)}.page-button-danger{color:var(--gold-bright);background:var(--danger) padding-box;border-color:var(--stone);border-image:var(--frame-button) 4 / 8px stretch}.panel{box-sizing:border-box;width:min(92vw,560px);color:var(--ink);background:var(--track);border:20px solid var(--stone);border-image:var(--frame-panel) 10 fill / 20px round;image-rendering:pixelated;font-family:Noto Sans Thai,system-ui,sans-serif}.panel::backdrop{background:#0000008c}.panel-title{color:var(--gold-bright);margin:0 0 8px;font-size:22px}.panel-text{box-sizing:border-box;width:100%;color:var(--ink);font:inherit;background:var(--track);border:2px solid var(--stone);border-image:var(--frame-field) 1 fill / 2px stretch;image-rendering:pixelated;margin-top:12px;padding:8px}.panel-buttons{gap:8px;margin-top:8px;display:flex}.panel-status{min-height:1.5em;margin:8px 0}.panel-danger{border-top:2px solid var(--stone);flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;display:flex}.document{height:auto;overflow:auto}.document-body{box-sizing:border-box;max-width:44em;margin:0 auto;padding:24px 16px 48px;font-family:Noto Sans Thai,system-ui,sans-serif;line-height:1.65}.document-body a{color:var(--metal)}html[lang=th] .home [data-locale=en],html[lang=en] .home [data-locale=th]{display:none}.document-nav{margin-bottom:8px;font-weight:700}html.touch,html.touch body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overflow:hidden}@media (orientation:landscape){.page-turn{display:none}}html.touch canvas{touch-action:none}html.touch .corner{bottom:4px;left:50%;right:auto;transform:translate(-50%)}.page-start-button{min-width:220px;min-height:56px;font-size:20px}.turn-picture{width:140px;height:140px;position:relative}.turn-phone{box-sizing:border-box;border:5px solid var(--gold);background:var(--stone,#2b2340);border-radius:10px;width:50px;height:90px;animation:2.4s ease-in-out infinite turn-phone;position:absolute;top:25px;left:45px}.turn-phone:before,.turn-phone:after{content:"";background:var(--gold);border-radius:2px;position:absolute;left:50%;transform:translate(-50%)}.turn-phone:before{width:14px;height:3px;top:4px}.turn-phone:after{border-radius:50%;width:8px;height:8px;bottom:4px}.turn-arrow{border:4px solid #0000;border-top-color:var(--ink-muted);border-right-color:var(--ink-muted);border-radius:50%;animation:2.4s ease-in-out infinite turn-arrow;position:absolute;inset:4px;transform:rotate(-20deg)}.turn-arrow:after{content:"";border:8px solid #0000;border-top:11px solid var(--ink-muted);position:absolute;bottom:22px;right:6px;transform:rotate(10deg)}@keyframes turn-phone{0%,15%{transform:rotate(0)}45%,80%{transform:rotate(90deg)}to{transform:rotate(0)}}@keyframes turn-arrow{0%,15%{opacity:1}45%,to{opacity:.25}}@media (prefers-reduced-motion:reduce){.turn-phone{animation:none;transform:rotate(90deg)}.turn-arrow{animation:none}}
