@font-face{font-family:Head;font-weight:700;src:url(fonts/alegreya-sc-latin-800-normal.woff2)}
@font-face{font-family:Head;font-weight:500;src:url(fonts/alegreya-sc-latin-500-normal.woff2)}
@font-face{font-family:Body;font-weight:600;src:url(fonts/nunito-latin-700-normal.woff2)}
@font-face{font-family:Body;font-weight:800;src:url(fonts/nunito-latin-800-normal.woff2)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#120c06;font-family:Body,sans-serif;color:#f6ecd8;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#stage{position:fixed;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;pointer-events:none}
#ui{position:absolute;inset:0}
#ui .hit,#ui button,#ui .btn,#ui .tool,#ui .card,#ui input,#ui .clickable{pointer-events:auto;cursor:pointer}
button{font:inherit;color:inherit;background:none;border:none;padding:0}
.btn:disabled,.btn.dis{opacity:.5;filter:grayscale(.6);cursor:default}
.btn:active:not(.dis){transform:translateY(2px)}
.screen{position:absolute;inset:0}
.toast{position:absolute;left:50%;transform:translateX(-50%);font-family:Head;font-weight:700;color:#ffe37a;text-shadow:0 3px 0 #7a3a0c,0 0 20px rgba(0,0,0,.4);white-space:nowrap;animation:pop .9s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.1)}30%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}
.float{position:absolute;pointer-events:none;animation:floatUp 1.2s ease-out forwards}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-90px) scale(1.1)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:.6}}
.marker{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:3px dashed #fff6d8;background:rgba(255,240,190,.25);animation:pulse 1.2s infinite;pointer-events:auto;cursor:pointer}
.card{width:118px;padding:8px 6px;border-radius:10px;text-align:center;border:2px solid rgba(240,226,196,.35);background:rgba(0,0,0,.25)}
.card.on{border-color:rgba(240,226,196,1);background:rgba(240,226,196,.92);color:#3a2a1a}
.round{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.modal{position:absolute;inset:0;background:rgba(10,6,2,.55);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.modal .panel{position:relative}
input.name{font:800 30px Body,sans-serif;padding:10px 16px;border-radius:10px;border:2px solid rgba(240,226,196,.8);background:rgba(0,0,0,.35);color:#fff;width:360px;text-align:center;outline:none}
#rotate{display:none;position:fixed;inset:0;background:#1c120a;color:#f6ecd8;z-index:9;align-items:center;justify-content:center;flex-direction:column;font:800 24px Body,sans-serif;text-align:center;padding:30px}
@media (orientation:portrait) and (max-width:800px){#rotate{display:flex}}
.speedlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.0) 22px 24px);mask-image:radial-gradient(ellipse at 50% 50%,transparent 45%,#000 85%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent 45%,#000 85%)}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(20,12,4,.45) 100%)}
.panel{position:absolute;background:linear-gradient(180deg,rgba(38,30,22,.78),rgba(28,22,16,.82));border:2px solid rgba(240,226,196,.75);border-radius:10px;box-shadow:0 0 0 3px rgba(30,22,14,.55),0 0 0 4px rgba(240,226,196,.25),0 10px 30px rgba(0,0,0,.35)}
.panel:before,.panel:after{content:'';position:absolute;top:50%;width:10px;height:10px;background:#f0e2c4;transform:translateY(-50%) rotate(45deg)}
.panel:before{left:-7px}.panel:after{right:-7px}
.title{font-family:Head;font-weight:700;letter-spacing:.5px;color:#f6ecd8;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.row{display:flex;align-items:center;gap:10px}
.bar{height:16px;border-radius:9px;background:rgba(0,0,0,.45);border:1.5px solid rgba(240,226,196,.5);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:8px}
.chip{display:inline-block;white-space:nowrap;padding:4px 14px;border:1.5px solid rgba(240,226,196,.6);border-radius:20px;background:rgba(30,22,14,.6);font-size:15px}
.btn{position:absolute;font-family:Head;font-weight:700;font-size:30px;color:#fff;padding:12px 34px;border-radius:14px;background:linear-gradient(180deg,#7cc35a,#4f9a35);border:2px solid #e9f7d8;box-shadow:0 0 0 3px rgba(30,60,20,.5),0 8px 20px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.logo{position:absolute;font-family:Head;font-weight:700;color:#fff3d0;text-shadow:0 3px 0 #5a3a1a,0 0 18px rgba(0,0,0,.4)}
.logo small{display:block;font-family:Body;font-weight:800;font-size:14px;letter-spacing:1px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.tool{width:76px;height:76px;border-radius:12px;background:rgba(38,30,22,.82);border:2px solid rgba(240,226,196,.7);display:flex;align-items:center;justify-content:center;position:relative}
.tool.on{background:rgba(240,226,196,.92);box-shadow:0 0 18px rgba(255,230,150,.7)}
.tool .done{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:#5fb83f;border:2px solid #fff;font-size:15px;line-height:20px;text-align:center;color:#fff;font-weight:800}
.tool svg{width:48px;height:48px}