*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#566455,#26372f 72%);color:#f9eedb;font:15px system-ui,sans-serif}
canvas{display:block;touch-action:none}
header,footer,#guide,#movement,#farewell{position:fixed}
header{inset:max(12px,env(safe-area-inset-top)) 12px auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between}
.bar{display:inline-flex;align-items:center;gap:3px;background:#23332cea;border:1px solid #e3caa26b;border-radius:24px;padding:4px 7px}
.bar strong{padding:0 4px;font-family:SimSun,serif;font-size:17px}
#hall{padding:0 6px;color:#e9d9bc;font-size:12px}
button{font:inherit;color:inherit;border:1px solid transparent;background:transparent;border-radius:18px;padding:8px;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.65;cursor:default}
button:hover:not(:disabled),button:focus-visible,button[aria-pressed=true]{background:#79613c;color:#fff;border-color:#e3caa288}
#guide{top:58px;left:0;right:0;text-align:center;color:white;text-shadow:0 1px 4px #000,0 1px 8px #000;pointer-events:none}
footer{inset:auto 8px max(14px,env(safe-area-inset-bottom));text-align:center;pointer-events:none}
footer nav{pointer-events:auto;max-width:100%;flex-wrap:wrap;justify-content:center}
#status{display:table;margin:0 auto 8px;background:#23332ce8;border-radius:16px;padding:5px 12px}
#status:empty{display:none}
#movement{bottom:85px;left:14px;display:grid;grid-template-columns:repeat(3,42px);gap:3px}
#movement button{background:#23332cd9;color:white;touch-action:none}
#movement button:first-child{grid-column:2}
#movement button:nth-child(2){grid-column:1}
dialog{width:min(370px,calc(100vw - 24px));max-height:80dvh;padding:20px;color:#28382e;background:#f4ebda;border:1px solid #aa9267;border-radius:18px}
dialog::backdrop{background:#18231d66}
dialog form{float:right}
dialog h2{margin:5px 0 16px;font-size:20px}
dialog label{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
dialog ul{max-height:45dvh;overflow:auto;padding:0;list-style:none}
dialog li{padding:8px 0;border-bottom:1px solid #ddd2bd}
dialog p{color:#525c4d;font-size:12px}
#farewell{inset:0;display:grid;align-content:center;justify-items:center;background:#e9ecdf;color:#263a30}
#farewell h1{font-family:SimSun,serif;font-size:36px}
#return{background:#364c3e;color:white;padding:10px 20px}
@media(max-width:540px){#guide{top:99px;font-size:13px}button{padding:7px;font-size:13px}}

#entry{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:linear-gradient(90deg,#1c2b24c9,#192b2266),#26382e}
#entry form{width:min(100%,390px);padding:29px;border:1px solid #e1c69976;border-radius:22px;background:#24362ded;box-shadow:0 20px 70px #10181188}
#entry h1{font:36px SimSun,serif;margin:0 0 8px}
#entry .entry-tagline{margin:0 0 24px}
#entry label{display:block;margin-bottom:8px}
.name-row{display:flex;gap:8px}
.name-row output{min-width:0;flex:1;padding:10px;border:1px solid #b5a27a;border-radius:10px;background:#f7eedf;color:#29352d;font:inherit}
#random-name{border-color:#b5a27a;white-space:nowrap}
#enter{margin-top:15px;width:100%;background:#e5c78f;color:#28342a;font-weight:700}
#name-tags{position:fixed;inset:0;pointer-events:none}
.name-tag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;padding:4px 9px;border-radius:12px;background:#26332ee8;color:#fff4de;font-size:12px;box-shadow:0 2px 8px #0004}
#my-name{background:#f5e9cb;color:#384635}
#merit{position:absolute;left:50%;bottom:100%;white-space:nowrap;color:#fbe1a6;text-shadow:0 2px 5px #221a10;animation:float-merit .85s ease-out both;pointer-events:none}
#fish{position:relative}
@keyframes float-merit{from{opacity:1;transform:translate(-50%,4px)}to{opacity:0;transform:translate(-50%,-30px)}}
#beads-page{position:fixed;inset:0;z-index:4;background:radial-gradient(ellipse at center,#fffdf6,#e8dfcf);color:#57452f}
#beads-page canvas{width:100%;height:100%;touch-action:none;cursor:grab}
#beads-page canvas:active{cursor:grabbing}
#beads-page button{position:absolute;top:18px;background:#fff8ed;border-color:#b7a68c;color:#4d402e}
#beads-back{left:18px}
#beads-sound{right:18px}
#beads-caption{position:absolute;inset:auto 12px max(20px,env(safe-area-inset-bottom));pointer-events:none;text-align:center}
#beads-caption strong{font-size:26px}
#beads-caption p{margin:6px 0}

footer .bar{gap:0;padding:5px 11px;border-color:#e9d6ae91;background:#4d4737bd;border-radius:36px;backdrop-filter:blur(12px);box-shadow:0 6px 24px #18170f35}
footer nav button{display:grid;justify-items:center;align-content:center;gap:3px;min-width:67px;min-height:56px;border-radius:25px;padding:5px 11px;color:#f9e7c2;font:15px SimSun,serif}
footer nav svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.55;fill:none;stroke-linecap:round;stroke-linejoin:round}
header .bar{background:#35382cbd;backdrop-filter:blur(9px)}
#guide{font-size:12px;font-weight:500}
@media(max-width:540px){footer nav button{min-width:44px;min-height:46px;padding:4px 6px;font-size:12px}footer nav svg{width:19px;height:19px}}
#change-name{margin-top:8px;border-color:#73806c;color:#364c3e}
#scene-loading{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#25372d;color:#f0dfbe;font:20px KaiTi,SimSun,serif;letter-spacing:.12em}