@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:#f4f3ef;background:#061722;--gold: #d7a64d;--cyan: #43c8c8}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(#06131fb0,#06131fb0),url(/assets/backdrop.webp) center/cover fixed}button{font:inherit}header{height:68px;padding:0 clamp(12px,4vw,50px);display:flex;align-items:center;justify-content:space-between;background:#081722eb;border-bottom:1px solid #9d7540}.brand{display:flex;align-items:center;gap:10px}.brand>span{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);color:var(--cyan);display:grid;place-items:center;background:#121d2a}.brand svg{width:21px}.brand strong{display:block;font-size:15px}.brand small,.stage small{display:block;color:#98acb5;font-size:9px;text-transform:uppercase}.stage{text-align:center}.stage strong{font-size:14px}.icon{width:40px;height:40px;border:1px solid #526b76;border-radius:5px;background:#122532;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:8px}.stats{width:min(66vh,600px,92vw);display:flex;align-items:center;justify-content:space-between;padding:5px 3px;color:#bfd0d5;font-size:11px}.stats b{color:#fff}.stats span{display:flex;align-items:center;gap:5px}.stats i{width:18px;height:18px;border-radius:50%;display:inline-block;box-shadow:inset 3px 3px 6px #fff8}.viewport{width:min(66vh,600px,92vw);aspect-ratio:36/41;border:1px solid #a47e46;border-radius:6px;overflow:hidden;box-shadow:0 20px 70px #000b;background:#071925}.viewport canvas{width:100%;height:100%;display:block;touch-action:none}.shell nav{height:48px;display:flex;align-items:center;gap:16px;color:#ced6d5;font-size:10px}dialog{width:min(370px,88vw);border:1px solid #9b7846;border-radius:6px;background:#091c27;color:#fff;text-align:center;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#030a10cc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}dialog small{font-size:10px;color:var(--cyan)}dialog h2{margin:5px}dialog p{font-size:13px;color:#aec1c7}dialog button{width:100%;height:42px;margin-top:12px;border:0;border-radius:5px;background:var(--gold);font-weight:800;color:#15202a}@media(max-width:600px){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:4px}.stats{width:min(76svh,94vw);padding:2px}.viewport{width:min(76svh,94vw,calc((100svh - 112px) * 36 / 41))}.shell nav{height:42px}.stage small{display:none}}@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{width:min(48vw,calc((100svh - 116px) * 36 / 41))}.stats{padding:2px}.shell nav{height:38px}.shell nav .icon{width:34px;height:34px}}