@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+KR:wght@500;700;800&display=swap";:root{font-family:Manrope,Noto Sans KR,sans-serif;color:#f8f2df;background:#162021;--gold: #d9ad55;--red: #c94f41}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(#10181955,#10181955),url(/assets/backdrop.webp) center/cover fixed}button{font:inherit}header{height:68px;padding:0 clamp(12px,4vw,52px);display:flex;align-items:center;justify-content:space-between;background:#152021e8;border-bottom:1px solid #ae8747}.brand{display:flex;align-items:center;gap:10px}.brand>span{width:38px;height:38px;background:var(--red);border-radius:5px;display:grid;place-items:center}.brand svg{width:21px}.brand strong{display:block;font-size:15px}.brand small,.stage small{display:block;font-size:9px;color:#bdc4bd;text-transform:uppercase}.stage{text-align:center}.stage strong{font-size:14px}.icon{width:40px;height:40px;border:1px solid #70807a;border-radius:5px;background:#263332;color:#fff;display:grid;place-items:center;cursor:pointer}.icon svg{width:18px}.shell{min-height:calc(100svh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}.stats{width:min(1000px,96vw);display:flex;justify-content:space-between;padding:7px 3px;color:#d2d7d0;font-size:12px}.stats span{display:flex;align-items:center;gap:5px}.stats svg{width:15px}.stats b{color:#fff}.viewport{position:relative;width:min(1000px,96vw);aspect-ratio:25/14;border:1px solid #a17d43;border-radius:6px;overflow:hidden;box-shadow:0 25px 80px #0009;background:#a6dce0aa}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.instruction{position:absolute;left:18px;bottom:16px;padding:7px 10px;border-radius:4px;background:#172322d9;color:#f3e5c5;font-size:11px;transition:.2s}.instruction.hide{opacity:0}.shell nav{height:54px;width:min(1000px,96vw);display:flex;align-items:center;justify-content:space-between}.legend{display:flex;align-items:center;gap:6px;color:#e6eadf;font-size:11px;background:#192422bb;padding:7px 12px;border-radius:4px}.legend span{width:13px;height:13px;border-radius:2px}.wood{background:#a96f38}.glass{background:#61c8c5}.stone{background:#87918d}dialog{width:min(370px,88vw);border:1px solid #b68d47;border-radius:6px;background:#172220;color:#fff;text-align:center;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#07100fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog small{font-size:10px;color:#d5ad60}dialog h2{margin:5px}dialog p{color:#c0c8c0;font-size:13px}dialog button{width:100%;height:42px;margin-top:12px;border:0;border-radius:5px;background:var(--gold);font-weight:800;color:#1c211d}@media(max-width:650px){header{height:58px;padding:0 10px}.brand>span{width:34px;height:34px}.brand strong{font-size:13px}.brand small{display:none}.shell{min-height:calc(100svh - 58px);padding:6px}.stats{padding:3px;font-size:10px}.stats span:last-child{display:none}.viewport{width:min(96vw,calc((100svh - 122px) * 25 / 14))}.shell nav{height:48px}.legend{font-size:9px;padding:6px}.instruction{left:8px;bottom:8px}}@media(orientation:landscape)and (max-height:600px){header{height:48px;padding:0 10px}.brand small,.stage small{display:none}.brand>span{width:32px;height:32px}.shell{height:calc(100svh - 48px);min-height:0;padding:3px;overflow:hidden}.stats,.viewport,.shell nav{width:min(72vw,calc((100svh - 116px) * 25 / 14))}.stats{padding:2px;font-size:9px}.stats span:last-child{display:none}.shell nav{height:38px}.shell nav .icon{width:34px;height:34px}.legend{padding:5px 8px;font-size:9px}.instruction{left:7px;bottom:7px}}