@font-face{font-family:MuseumClassicB;src:url(assets/fonts/MuseumClassic-B.woff) format('woff');font-display:block}
@font-face{font-family:MuseumClassicM;src:url(assets/fonts/MuseumClassic-M.woff) format('woff');font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0a0606;color:#f4ead2;overflow:hidden;overscroll-behavior:none;font-family:MuseumClassicM,serif;user-select:none;-webkit-user-select:none;touch-action:none}
body{background-image:linear-gradient(180deg,#1a0c0c 0%,#0c0607 48%,#050303 100%)}
#app{position:fixed;inset:0}
#text,#fx{position:absolute;pointer-events:none}
#fx{image-rendering:pixelated;image-rendering:crisp-edges}
#screen{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 8px 40px rgba(0,0,0,.65);outline:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
/* 터치 조작: 세로 화면은 전장 아래, 가로 화면은 전장 위에 겹친다. 오른쪽 위는 비운다 */
#pad{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
body.touch #pad{display:flex}
body.portrait #pad{background:linear-gradient(#1c0d0c,#080405)}
body.landscape #pad{height:64%;pointer-events:none}
body.landscape #pad>*{pointer-events:auto}
body:not(.playing) .play-only,body.playing .menu-only{display:none}
#stick-zone{position:relative;flex:1 1 50%;touch-action:none;margin-left:calc(-1 * max(4px,env(safe-area-inset-left)))}
#stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;left:78px;top:calc(100% - 82px);pointer-events:none;opacity:.6;
  background:radial-gradient(circle,#2a1414 0,#1c0c0c 62%,#140808 63%);border:3px solid #8a6428;box-shadow:0 0 0 2px #0a0405,inset 0 0 0 3px #3a1c14}
#stick.on{opacity:1}
#stick .ar{position:absolute;width:0;height:0;border:6px solid transparent;opacity:.8}
#stick .u{left:50%;top:8px;margin-left:-6px;border-bottom:8px solid #b08a48;border-top:0}#stick .d{left:50%;bottom:8px;margin-left:-6px;border-top:8px solid #b08a48;border-bottom:0}
#stick .l{top:50%;left:8px;margin-top:-6px;border-right:8px solid #b08a48;border-left:0}#stick .r{top:50%;right:8px;margin-top:-6px;border-left:8px solid #b08a48;border-right:0}
#knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f4dca0,#c89a48 55%,#7a5420);border:3px solid #3a2410;box-shadow:0 3px 0 #0a0405}
#btns,#mbtns{position:relative;flex:0 0 250px;min-height:240px}
/* 둥근 단추: 검은 옻칠 판 + 어두운 금테, 큰 공격 단추는 붉은 옻칠 + 밝은 금테 */
.btn{position:absolute;border-radius:50%;width:58px;height:58px;background:radial-gradient(circle at 50% 30%,#3a2220,#1a0e0e 72%);border:3px solid #8a6428;box-shadow:0 0 0 2px #0a0405,inset 0 0 0 2px #2a1410,0 4px 0 #050203;
  color:#ffffff;font-size:13px;font-weight:700;text-shadow:0 2px 0 #000,0 0 3px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;opacity:.9;line-height:1.05}
.btn b{font-size:17px;color:#ffffff}
.btn.big{width:92px;height:92px;border-color:#e8b850;font-size:20px;background:radial-gradient(circle at 50% 30%,#b02a22,#6a1010 72%);box-shadow:0 0 0 2px #0a0405,inset 0 0 0 3px #4a0c0a,0 4px 0 #050203}
.btn.big b{font-size:13px;color:#ffe6a0}
.btn.small{width:50px;height:50px;font-size:12px}
.btn.atk{right:4px;bottom:14px}.btn.skill{right:104px;bottom:6px}.btn.roll{right:112px;bottom:76px;width:52px;height:52px;font-size:12px}
.btn.u1{right:2px;bottom:114px}.btn.u2{right:74px;bottom:138px}.btn.u3{right:146px;bottom:156px}
.btn.u1,.btn.u2,.btn.u3{width:68px;height:68px;color:#e8d8c0;background-size:cover;background-position:center;image-rendering:pixelated;font-size:14px}
.btn.u3{width:76px;height:76px}.btn.u1 b,.btn.u2 b,.btn.u3 b{color:#c8a878}
.btn.u1.ready,.btn.u2.ready,.btn.u3.ready{border-color:#ffcc50;color:#fff0d0;animation:pulse .7s ease-in-out infinite alternate}
.btn.u1.ready b,.btn.u2.ready b,.btn.u3.ready b{color:#ffcc50}
.btn.bag{right:178px;bottom:12px}
.btn.ok{right:6px;bottom:14px}.btn.back{right:108px;bottom:8px}.btn.fn{right:40px;bottom:122px}.btn.tab{right:116px;bottom:84px}
.btn.down{transform:translateY(3px);box-shadow:0 0 0 2px #0a0405,0 1px 0 #050203}
body.landscape .btn{opacity:.82}
/* 세로 화면 안내 카드 */
#rotate{display:none;position:absolute;left:50%;transform:translateX(-50%);width:min(84vw,360px);padding:16px 14px 12px;background:#170c0c;border:2px solid #8a6428;text-align:center;color:#e8d8c0;z-index:9;box-shadow:0 0 0 2px #050203}
body.touch.portrait.ask-rotate #rotate{display:block}
#rotate b{display:block;font-size:17px;color:#ffffff;margin:6px 0 4px}
#rotate p{margin:0 0 12px;font-size:12px;color:#b8a488}
#rotate button{display:block;margin:0 auto;padding:9px 18px;border:2px solid #e8b850;background:#7a1612;color:#ffeccc;font-size:15px;font-weight:700}
#rotate .skip{margin-top:8px;border:0;background:none;color:#9a8468;font-size:12px;padding:4px}
.rot-icon{display:flex;align-items:center;justify-content:center;gap:6px}
.rot-icon .ph{display:inline-block;border:3px solid #8a6428;border-radius:4px}.rot-icon .v{width:22px;height:34px}.rot-icon .h{width:38px;height:22px;border-color:#e8b850;background:#4a1410}
.rot-icon .arrow{color:#ffcc50;font-size:22px}
@keyframes pulse{from{box-shadow:0 4px 0 #000,0 0 4px #ffb84a}to{box-shadow:0 4px 0 #000,0 0 22px #ffb84a}}
#namebox{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(80vw,320px);padding:16px;background:#170c0c;border:2px solid #c8963a;box-shadow:0 0 0 2px #050203;text-align:center;z-index:20;color:#fff}
#namebox.on{display:block}#namebox b{display:block;margin-bottom:10px;font-size:16px;color:#ffcc50}
#namebox input{width:100%;box-sizing:border-box;padding:8px;font:16px MuseumClassicM,serif;background:#0c0606;color:#fff;border:2px solid #6a4a24;border-radius:6px;margin-bottom:10px}
#namebox button{margin:0 4px;padding:7px 16px;border:2px solid #e8b850;border-radius:4px;background:#7a1612;color:#ffeccc;font-size:14px;font-weight:700}#namebox .skip{border-color:#6a4a24;background:#2a1814;color:#d8c8b0}
#backupbox{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,360px);padding:16px;background:#170c0c;border:2px solid #c8963a;box-shadow:0 0 0 2px #050203;text-align:center;z-index:20;color:#fff}
#backupbox.on{display:block}#backupbox b{display:block;font-size:17px;color:#ffcc50;margin-bottom:6px}#backupbox .d{font-size:12px;color:#b8a488;margin:0 0 10px}
#backupbox .code{font:700 20px monospace;letter-spacing:1px;color:#ffd890;background:#0c0606;border:2px dashed #6a4a24;padding:8px;margin-bottom:8px;user-select:text;-webkit-user-select:text}
#backupbox button{padding:8px 14px;border:2px solid #e8b850;border-radius:4px;background:#7a1612;color:#ffeccc;font-size:14px;font-weight:700}
#backupbox .row{display:flex;gap:6px;margin-top:12px}#backupbox input{flex:1;padding:8px;font:16px monospace;letter-spacing:2px;text-transform:uppercase;background:#0c0606;color:#fff;border:2px solid #6a4a24;border-radius:6px}
#backupbox .msg{min-height:16px;font-size:12px;color:#9ae08a;margin:8px 0}#backupbox .skip{border-color:#6a4a24;background:#2a1814;color:#d8c8b0}
/* 멈춤 단추: 전장 위쪽 오른편 (토스 닫기 단추 자리인 화면 오른쪽 위 끝은 비운다). 위치는 layout()이 잡는다 */
#b-esc{display:none;position:absolute;z-index:5;height:34px;padding:0 12px 0 10px;align-items:center;gap:3px;background:#1a0e0e;border:2px solid #8a6428;box-shadow:0 0 0 2px #0a0405,0 3px 0 #050203;color:#fff;font-size:13px;font-weight:700;text-shadow:0 2px 0 #000;opacity:.92;touch-action:none}
#b-esc i{display:block;width:4px;height:13px;background:#ffcc50;box-shadow:0 1px 0 #000}#b-esc i+i{margin-right:5px}
body.touch #b-esc{display:flex}body.touch:not(.playing) #b-esc,body.overlay #b-esc{display:none}
#b-esc.down{transform:translateY(2px);box-shadow:0 0 0 2px #0a0405,0 1px 0 #050203}
/* 기세 고르기·보물 상자·멈춤 화면: 오른쪽 조작 단추를 숨겨 카드가 가리지 않게 (카드는 손가락으로 누른다) */
body.overlay #btns,body.overlay #stick-zone{visibility:hidden}