*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0a0e17;--bg2:#131a2b;--bg3:#1a2236;--border:#2a3a55;--gold:#f0c040;--gold2:#d4a020;--red:#e05050;--green:#40c870;--blue:#4088e0;--purple:#a050e0;--orange:#e08030;--cyan:#40c8d0;--text:#e8e8e8;--text2:#8899aa;--text3:#556677;--c1:#b0b0b0;--c2:#40a0e0;--c3:#a050e0;--c4:#e08030;--c5:#f0c040}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;touch-action:manipulation}
button{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px;transition:.15s;min-height:36px}
button:hover{background:var(--border);border-color:var(--gold)}
button:active{transform:scale(.96)}
button.primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;border-color:var(--gold);font-weight:700}
button.primary:hover{filter:brightness(1.15)}
button.danger{border-color:var(--red);color:var(--red)}
button.danger:hover{background:var(--red);color:#fff}
button:disabled{opacity:.4;cursor:default;transform:none}
#app{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.screen{display:none;width:100%;height:100%;flex-direction:column}
.screen.active{display:flex}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;min-height:44px}
.top-bar .title{font-size:15px;font-weight:700;color:var(--gold);white-space:nowrap}
.top-bar .info{display:flex;gap:10px;font-size:12px;color:var(--text2);flex-wrap:wrap;justify-content:flex-end}
.top-bar .info span{display:flex;align-items:center;gap:2px;white-space:nowrap}
.main-area{flex:1;overflow:hidden;position:relative}
.bottom-bar{display:flex;gap:6px;padding:6px 10px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;justify-content:center;flex-wrap:wrap}
#screen-title{align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a2540 0%,#0a0e17 70%)}
#screen-title .logo{font-size:36px;font-weight:900;color:var(--gold);text-shadow:0 0 30px rgba(240,192,64,.4);letter-spacing:2px}
#screen-title .sub{color:var(--text2);font-size:13px;margin:8px 0 30px}
#screen-title button{font-size:16px;padding:12px 36px;margin:5px}
#screen-world .map-wrap{width:100%;height:100%;position:relative;overflow-y:auto}
#screen-world canvas{display:block;width:100%}
#screen-board .board-wrap{flex:1;display:flex;overflow:hidden;position:relative}
#screen-board .board-main{flex:1;overflow:hidden;position:relative}
#screen-board canvas{display:block}
#screen-board .side-panel{width:260px;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;background:var(--bg2);flex-shrink:0}
.pnl{padding:6px 8px;border-bottom:1px solid var(--border)}
.pnl h3{font-size:11px;color:var(--gold);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.pnl .row{display:flex;justify-content:space-between;font-size:11px;margin:1px 0}
.pnl .row .lb{color:var(--text2)}
.clist{max-height:120px;overflow-y:auto}
.citem{display:flex;align-items:center;gap:5px;padding:3px 4px;font-size:11px;border-radius:4px;cursor:pointer}
.citem:hover{background:var(--bg3)}
.citem .ic{width:18px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.citem .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem .lv{color:var(--text3);font-size:10px}
.r1{border-left:2px solid var(--c1)}.r2{border-left:2px solid var(--c2)}.r3{border-left:2px solid var(--c3)}.r4{border-left:2px solid var(--c4)}.r5{border-left:2px solid var(--c5)}
.dice-box{text-align:center;padding:4px 0}
.dice-num{font-size:52px;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(240,192,64,.5);line-height:1;margin:2px 0}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;align-items:center;justify-content:center}
.modal-bg.active{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;max-width:560px;width:92%;max-height:85vh;overflow-y:auto;padding:16px}
.modal h2{color:var(--gold);margin-bottom:10px;font-size:16px}
.modal .acts{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;flex-wrap:wrap}
.modal p{margin:4px 0;font-size:13px}
.blog{font-size:11px;color:var(--text2);max-height:220px;overflow-y:auto;padding:4px;line-height:1.6}
.blog .atk{color:var(--red)}.blog .hl{color:var(--green)}.blog .bf{color:var(--blue)}.blog .dm{color:var(--orange)}.blog .sk{color:var(--purple)}.blog .wp{color:var(--cyan)}
.toast{position:fixed;top:50px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--gold);color:var(--gold);padding:8px 20px;border-radius:8px;font-size:13px;z-index:200;animation:ti .3s,to .3s 2s forwards;pointer-events:none;white-space:nowrap}
@keyframes ti{from{opacity:0;top:30px}to{opacity:1;top:50px}}
@keyframes to{to{opacity:0;top:30px}}
.bubble{position:absolute;background:var(--bg3);border:1px solid var(--gold);border-radius:10px;padding:5px 10px;font-size:10px;max-width:160px;pointer-events:none;animation:bp .3s;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.bubble::after{content:'';position:absolute;bottom:-6px;left:20px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--bg3)}
@keyframes bp{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.hp-bar{height:6px;border-radius:3px;background:#222;overflow:hidden;margin:1px 0}
.hp-bar .fill{height:100%;border-radius:3px;transition:width .3s}
.vprog{height:8px;border-radius:4px;background:#222;overflow:hidden;margin:4px 0}
.vprog .fill{height:100%;border-radius:4px;transition:width .5s}
.npc-banner{position:absolute;top:0;left:0;right:0;background:rgba(224,80,80,.15);border-bottom:1px solid rgba(224,80,80,.3);padding:4px 10px;font-size:11px;color:var(--red);display:none;z-index:5;animation:slideDown .3s}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.float-dice{display:none;position:absolute;bottom:70px;right:12px;z-index:10;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;font-size:24px;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(240,192,64,.4);align-items:center;justify-content:center;font-weight:900}
.float-dice:active{transform:scale(.9)}
.float-info{display:none;position:absolute;bottom:70px;left:12px;z-index:10;width:40px;height:40px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;align-items:center;justify-content:center}
.mobile-panel{display:none;position:absolute;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);z-index:15;max-height:50vh;overflow-y:auto;padding:10px;animation:slideUp .25s}
.mobile-panel.active{display:block}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.equip-slot{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--bg);border-radius:6px;margin:2px 0;font-size:11px}
.equip-slot .sl{color:var(--text3);width:50px}
.equip-slot .ev{flex:1;color:var(--text)}
.eq-qual1{color:var(--c1)}.eq-qual2{color:var(--c2)}.eq-qual3{color:var(--c3)}.eq-qual4{color:var(--c4)}.eq-qual5{color:var(--c5)}
.flag-skill{padding:8px;margin:4px 0;background:var(--bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:.15s}
.flag-skill:hover{border-color:var(--gold);background:var(--bg3)}
.flag-skill.active{border-color:var(--gold);background:rgba(240,192,64,.1)}
.flag-skill .fs-name{font-size:12px;font-weight:700;color:var(--gold)}
.flag-skill .fs-cost{font-size:10px;color:var(--orange)}
.flag-skill .fs-desc{font-size:10px;color:var(--text2);margin-top:2px}
.class-card{padding:10px;margin:4px 0;background:var(--bg);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s}
.class-card:hover{border-color:var(--gold)}
.class-card.selected{border-color:var(--gold);background:rgba(240,192,64,.08)}
.class-card .cc-name{font-size:13px;font-weight:700;color:var(--gold)}
.class-card .cc-growth{font-size:10px;color:var(--text2);margin-top:2px}
.awaken-card{padding:10px;margin:4px 0;background:var(--bg);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s}
.awaken-card:hover{border-color:var(--purple)}
.awaken-card .ac-name{font-size:13px;font-weight:700;color:var(--purple)}
.awaken-card .ac-desc{font-size:10px;color:var(--text2);margin-top:2px}
.weather-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:var(--bg3);border-radius:4px;font-size:11px}
@media(max-width:700px){
#screen-board .side-panel{display:none}
.modal{max-width:96%;padding:12px}
.dice-num{font-size:40px}
.float-dice,.float-info{display:flex}
#event-log div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.4}
}