:root {
  --bg:#0d0f14; --bg2:#13161e; --bg3:#1a1e29; --bg4:#222636;
  --border:#2e3347; --gold:#c8a84b; --gold2:#e8c86a;
  --red:#c0392b; --green:#27ae60; --blue:#2980b9;
  --text:#e8e0d0; --text2:#a09880; --text3:#5a5448;
  --font:'Palatino Linotype',Palatino,Georgia,serif; --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;overflow:hidden;display:flex;flex-direction:column}

/* DROPDOWN MENU */
.drop-item{padding:9px 14px;font-size:.8rem;color:var(--text2);cursor:pointer;transition:background .1s;white-space:nowrap}
.drop-item:hover{background:var(--bg3);color:var(--text)}
.drop-item.danger-item{color:var(--red)}
.drop-item.danger-item:hover{background:rgba(192,57,43,.1)}
.drop-divider{height:1px;background:var(--border);margin:3px 0}

/* TOP BAR (slim info bar) */
#header{display:flex;align-items:center;gap:8px;padding:4px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:200;position:relative;height:36px}
#header h1{font-size:.85rem;color:var(--gold);letter-spacing:2px;white-space:nowrap;flex-shrink:0;margin:0}
#room_info{margin-left:auto;font-size:.7rem;color:var(--text3);display:flex;align-items:center;gap:8px;flex-shrink:0}
#room_code_display{font-family:monospace;color:var(--gold2);background:var(--bg4);padding:2px 8px;border-radius:4px;cursor:pointer;border:1px solid var(--border);font-size:.78rem;letter-spacing:1px}
#cdot{width:7px;height:7px;border-radius:50%;background:#e74c3c;transition:background .3s;flex-shrink:0}
#cdot.on{background:var(--green)}

/* VERTICAL TOOLBAR */
#toolbar{
  width:52px;background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  padding:6px 0;gap:2px;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;z-index:100;
}
#toolbar::-webkit-scrollbar{display:none}
.tbtn{
  width:40px;height:40px;background:transparent;border:1px solid transparent;
  color:var(--text3);border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .15s;position:relative;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.tbtn:hover{background:var(--bg3);border-color:var(--border);color:var(--text)}
.tbtn.active{background:rgba(200,168,75,.15);border-color:var(--gold);color:var(--gold)}
.tbtn .tlabel{font-size:.5rem;line-height:1;margin-top:1px;letter-spacing:.3px;text-align:center}
.tbtn[title]:hover::after{
  content:attr(title);
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:rgba(13,15,20,.95);border:1px solid var(--border);
  color:var(--text);font-size:.72rem;padding:4px 8px;border-radius:4px;
  white-space:nowrap;pointer-events:none;z-index:500;font-family:var(--font);
}
.tb-sep{width:28px;height:1px;background:var(--border);margin:3px 0;flex-shrink:0}

/* hbtn still used in sidebar */
.hbtn{padding:4px 8px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.75rem;transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.hbtn:hover{border-color:var(--gold);color:var(--gold)}
.hbtn.active{background:rgba(200,168,75,.15);border-color:var(--gold);color:var(--gold)}
.hbtn.danger{border-color:var(--red);color:var(--red)}

/* LAYOUT */
#main{display:flex;flex:1;overflow:hidden;min-height:0;height:0}

/* CANVAS */
#cwrap{flex:1;position:relative;overflow:hidden;background:#080a0f;cursor:default;min-width:100px;min-height:200px}
#vtt{position:absolute;top:0;left:0;touch-action:none}

/* SIDEBAR */
#sidebar{width:220px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width .2s}
#sb_sections{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden}
#sb_chat{flex:0 0 auto;display:flex;flex-direction:column;min-height:160px;max-height:45%}
.s-title{padding:7px 10px;font-size:.65rem;letter-spacing:2px;color:var(--gold2);text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);user-select:none;-webkit-tap-highlight-color:transparent}
.s-title:hover{background:var(--bg3)}
.s-body{padding:6px 8px}



/* Sidebar toggle (mobile) */
#sb_toggle{
  display:none;
  position:absolute;bottom:48px;right:0;
  background:var(--bg2);border:1px solid var(--border);border-right:none;
  border-radius:6px 0 0 6px;padding:10px 6px;cursor:pointer;z-index:40;
  color:var(--text2);font-size:.75rem;writing-mode:vertical-rl;
  -webkit-tap-highlight-color:transparent;line-height:1.4;text-align:center;
}

/* Header group separator */
.hbtn-sep{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0;align-self:center}

/* ── Hamburger siempre visible (menú secundario) ── */
#menu_btn { display:inline-block }

(max-width:640px){
  /* Hide toolbar — bottom tabs replace all navigation */
  #toolbar{display:none !important}
}

/* Ping animation */
@keyframes ping-grow{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:1}
  70% {transform:translate(-50%,-50%) scale(1);opacity:0.6}
  100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}
}
.ping-dot{
  position:absolute;pointer-events:none;z-index:25;
  width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-50%);
  animation:ping-grow 1.2s ease-out forwards;
}

/* Turn banner — appears top-right near sidebar */
#turn_banner{
  position:fixed;top:52px;right:232px;transform:translateY(-60px);
  background:rgba(200,168,75,.15);border:1px solid var(--gold);
  border-radius:8px;padding:6px 18px;font-size:.85rem;color:var(--gold2);
  pointer-events:none;z-index:20;transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;font-family:var(--font);letter-spacing:1px;
  display:none;
}
#turn_banner.show{transform:translateY(0)}

/* HP Quick modal */
#hp_quick{
  position:fixed;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:12px;z-index:600;display:none;
  box-shadow:0 4px 20px rgba(0,0,0,.6);min-width:180px;
}

/* Ping animation */
@keyframes ping-out{0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
@keyframes ping-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}
#ping_dot{position:absolute;pointer-events:none;z-index:25;display:none}
#ping_dot .ping-ring{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid;transform:translate(-50%,-50%);animation:ping-out 1s ease-out forwards}
#ping_dot .ping-center{position:absolute;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);animation:ping-pulse 0.6s ease-in-out 3}
#ping_dot .ping-label{position:absolute;transform:translate(-50%,16px);font-size:.65rem;white-space:nowrap;font-family:var(--font);font-weight:bold;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* Turn banner — top-right near sidebar, not over canvas */
#turn_banner{position:fixed;top:52px;right:232px;transform:translateY(-60px);background:rgba(13,15,20,.95);border:1px solid var(--gold);border-radius:8px;padding:8px 20px;z-index:30;pointer-events:none;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s}
#turn_banner.show{transform:translateY(0)}
#turn_banner.hide{transform:translateY(-60px);opacity:0}

/* Quick HP popup */
#quickhp{position:fixed;background:var(--bg2);border:1px solid var(--gold);border-radius:8px;padding:10px 12px;z-index:600;display:none;box-shadow:0 4px 20px rgba(0,0,0,.7);min-width:160px}
#quickhp .qhp-name{font-size:.75rem;color:var(--gold2);font-weight:bold;margin-bottom:6px}
#quickhp .qhp-hp{font-size:.85rem;color:var(--text);margin-bottom:8px;text-align:center}
#quickhp .qhp-btns{display:flex;gap:4px}
#quickhp input{width:60px;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:4px 6px;font-size:.85rem;text-align:center}

/* Token image */
.tok-img-swatch{width:100%;height:60px;border:2px dashed var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:.78rem;background:var(--bg3);overflow:hidden;margin-bottom:8px}
.tok-img-swatch img{width:100%;height:100%;object-fit:cover;border-radius:4px}

/* Dice drum roller */
@keyframes drum-crit{0%,100%{transform:scale(1)}25%{transform:scale(1.15)}50%{transform:scale(0.95)}75%{transform:scale(1.1)}}
@keyframes drum-fail{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
@keyframes overlay-in{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes overlay-out{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
#dice_overlay.show{animation:overlay-in .2s ease-out forwards}
#dice_overlay.hide{animation:overlay-out .25s ease-in forwards}
.drum-num{height:64px;line-height:64px;font-size:2.2rem;font-weight:900;font-family:var(--font);color:var(--text)}
.drum-num.crit{color:#f0ad4e;text-shadow:0 0 20px rgba(240,173,78,.6)}
.drum-num.fail{color:var(--red);text-shadow:0 0 20px rgba(192,57,43,.5)}

.sfx-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:4px;padding:3px 2px;cursor:pointer;font-size:.62rem;transition:all .1s;font-family:var(--font);text-align:center}
.sfx-btn:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.05)}
.sfx-btn:active{background:rgba(200,168,75,.2);transform:scale(0.97)}

/* Audio */
.audio-preset{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:4px;padding:2px 5px;cursor:pointer;font-size:.65rem;transition:all .1s;font-family:var(--font)}
.audio-preset:hover{border-color:var(--gold);color:var(--gold)}
.audio-preset.active{background:rgba(200,168,75,.15);border-color:var(--gold);color:var(--gold)}
.audio-result{padding:4px 6px;font-size:.7rem;color:var(--text2);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:5px;transition:background .1s}
.audio-result:hover{background:var(--bg3)}
.audio-result .ar-dur{font-size:.62rem;color:var(--text3);margin-left:auto;flex-shrink:0}

/* Token action menu */
.tam-item{padding:9px 14px;font-size:.8rem;color:var(--text2);cursor:pointer;transition:background .1s}
.tam-item:hover{background:var(--bg3);color:var(--text)}
.area-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:5px;padding:6px 4px;cursor:pointer;font-size:.72rem;font-family:var(--font);transition:all .1s;text-align:center}
.area-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(200,168,75,.08)}
.area-btn:active{transform:scale(0.96)}

/* Conditions */
.cond-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .1s;user-select:none}
.cond-btn:hover{border-color:var(--gold);transform:scale(1.1)}
.cond-btn.cond-active{border-color:var(--gold);background:rgba(200,168,75,.2);box-shadow:0 0 6px rgba(200,168,75,.4)}

/* Monster list */
.mon-item{padding:6px 8px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.mon-item:hover{background:var(--bg3)}
.mon-item.mon-selected{background:rgba(200,168,75,.12);border-left:2px solid var(--gold)}

/* Draw tool */
.draw-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s;flex-shrink:0}
.draw-swatch:hover,.draw-swatch.sel{transform:scale(1.3);border-color:#fff}
#ctx_bar{display:none;position:fixed;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(13,15,20,.95);border:1px solid var(--gold);border-radius:8px;padding:8px 16px;z-index:50;align-items:center;gap:10px;flex-wrap:nowrap;min-width:600px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
#ctx_bar.show{display:flex !important}
#ctx_draw,#ctx_prop{display:none;align-items:center;gap:8px;flex-wrap:wrap}
#ctx_draw.show,#ctx_prop.show{display:flex}

/* Laser animation */
@keyframes laser-pulse{from{opacity:1;transform:scale(1)}to{opacity:0.6;transform:scale(1.3)}}

/* Scenes */
.scene-item{display:flex;align-items:center;gap:5px;padding:5px 6px;border-radius:4px;border:1px solid transparent;margin-bottom:3px;cursor:pointer;font-size:.77rem;transition:all .15s}
.scene-item:hover{background:var(--bg3);border-color:var(--border)}
.scene-item.active-scene{background:rgba(200,168,75,.1);border-color:var(--gold);color:var(--gold)}
.scene-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:768px){
  .dbtn{min-height:38px;font-size:.78rem}
  .tok-item{min-height:32px;font-size:.8rem}
  .init-row{min-height:30px}
  #cinput{font-size:16px}
  .hbtn{min-height:32px}
}

/* TOKEN LIST */
.tok-item{display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:4px;cursor:pointer;font-size:0.77rem;border:1px solid transparent;margin-bottom:2px}
.tok-item:hover{background:var(--bg3);border-color:var(--border)}
.tok-item.sel{background:rgba(200,168,75,.1);border-color:var(--gold)}
.tok-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* INIT */
.init-row{display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:4px;margin-bottom:2px;font-size:0.77rem}
.init-row.cur{background:rgba(200,168,75,.12);border:1px solid var(--gold)}
.init-num{font-family:monospace;color:var(--gold2);font-weight:bold;min-width:22px;text-align:right;font-size:0.8rem}

/* CHAT */
#chat_log{flex:1;overflow-y:auto;padding:6px 8px;min-height:0;font-size:0.77rem}
.cmsg{padding:3px 6px;border-radius:3px;margin-bottom:3px;border-left:2px solid var(--border);line-height:1.4}
.cmsg.dice{border-left-color:var(--gold);background:rgba(200,168,75,.04)}
.cmsg.crit{border-left-color:#f0ad4e;background:rgba(240,173,78,.08)}
.cmsg.fail{border-left-color:var(--red);background:rgba(192,57,43,.08)}
.cmsg.sys{border-left-color:var(--blue);color:var(--text3);font-style:italic}
.cmsg.whisper{border-left-color:#9b59b6;background:rgba(155,89,182,.08);font-style:italic}
.cmsg.emote{border-left-color:#2ecc71;background:rgba(46,204,113,.06);font-style:italic;color:var(--text2)}
.cmsg.secret{border-left-color:#e74c3c;background:rgba(231,76,60,.08)}
.cwho{font-weight:bold;color:var(--gold2);font-size:0.7rem}
.cres{font-size:1rem;font-weight:bold}
#cinput_wrap{padding:6px;border-top:1px solid var(--border);display:flex;gap:4px;flex-shrink:0}
#cinput{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:4px 7px;font-family:var(--font);font-size:0.77rem}
#cinput:focus{outline:none;border-color:var(--gold)}
#dice_bar{padding:5px 6px;border-bottom:1px solid var(--border);display:flex;gap:3px;flex-wrap:wrap;flex-shrink:0}
.dbtn{flex:1;min-width:28px;padding:3px 1px;background:var(--bg3);border:1px solid var(--border);color:var(--gold2);border-radius:3px;cursor:pointer;font-family:var(--font);font-size:0.7rem;text-align:center;transition:all .15s}
.dbtn:hover{background:rgba(200,168,75,.15);border-color:var(--gold)}

/* MOBILE: compact dice bar */

/* MODALS */
.mbg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center}
.mbg.open{display:flex}
.mcard{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:18px;width:340px;max-width:95vw;max-height:90vh;overflow-y:auto}
.mcard h2{font-size:.9rem;color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.mcard label{font-size:.75rem;color:var(--text2);display:block;margin-bottom:3px}
.mcard input,.mcard select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:6px 9px;font-family:var(--font);font-size:.82rem;margin-bottom:8px}
.mcard input:focus,.mcard select:focus{outline:none;border-color:var(--gold)}
.mbtns{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.bprimary{flex:1;padding:7px;background:rgba(200,168,75,.15);border:1px solid var(--gold);color:var(--gold);border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.82rem}
.bprimary:hover{background:rgba(200,168,75,.25)}
.bcancel{padding:7px 12px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.82rem}
.cswatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s;flex-shrink:0}
.cswatch:hover,.cswatch.sel{transform:scale(1.25);border-color:#fff}
.crow{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}

/* LOBBY */
#lobby{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
#lcard{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:520px;max-width:100%;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5)}

/* Header */
.l-header{padding:22px 28px 16px;text-align:center;background:linear-gradient(180deg,rgba(200,168,75,.06) 0%,transparent 100%);border-bottom:1px solid var(--border)}
.l-header h1{font-size:1.6rem;color:var(--gold);letter-spacing:5px;margin-bottom:3px}
.l-header p{color:var(--text3);font-size:.78rem;letter-spacing:.5px}

/* Tabs */
.l-tabs{display:flex;border-bottom:1px solid var(--border)}
.l-tab{flex:1;padding:10px 6px;text-align:center;cursor:pointer;font-size:.78rem;color:var(--text3);border-bottom:2px solid transparent;transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.l-tab:hover{color:var(--text2)}
.l-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(200,168,75,.04)}
.l-tab span{display:block;font-size:1.1rem;margin-bottom:2px}

/* Panels */
.l-panel{display:none;padding:20px 24px;flex-direction:column;gap:10px}
.l-panel.show{display:flex}
.l-panel-desc{font-size:.73rem;color:var(--text3);line-height:1.5;background:var(--bg3);border-radius:6px;padding:8px 10px;border-left:2px solid var(--border)}

/* Inputs */
.linput{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:9px 12px;font-family:var(--font);font-size:.88rem;transition:border-color .15s}
.linput:focus{outline:none;border-color:var(--gold)}
.linput.code{text-align:center;letter-spacing:4px;font-weight:bold;font-size:1rem}
.linput.pin{text-align:center;letter-spacing:8px;font-size:1.2rem}
.l-field{display:flex;flex-direction:column;gap:4px}
.l-field label{font-size:.72rem;color:var(--text2);letter-spacing:.3px}

/* Buttons */
.blg{width:100%;padding:10px;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.85rem;letter-spacing:.5px;transition:all .15s;border:1px solid}
.blg.gold{background:rgba(200,168,75,.15);border-color:var(--gold);color:var(--gold)}
.blg.gold:hover{background:rgba(200,168,75,.25)}
.blg.blue{background:rgba(41,128,185,.15);border-color:#5bb3e8;color:#5bb3e8}
.blg.blue:hover{background:rgba(41,128,185,.25)}
.blg.ghost{background:transparent;border-color:var(--border);color:var(--text3)}
.blg.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Footer */
.l-footer{padding:12px 24px;border-top:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
#lerr{width:100%;color:#e74c3c;font-size:.75rem;text-align:center;display:none;padding:4px 0}

/* ROLES */
.dm-only { display:none } /* hidden until isDM confirmed */
.role-dm { background:rgba(200,168,75,.15); color:var(--gold); border:1px solid var(--gold); }
.role-player { background:rgba(41,128,185,.15); color:#5bb3e8; border:1px solid #5bb3e8; }

/* PLAYER VIEW banner */
#player_view_banner {
  display:none;
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  background:rgba(41,128,185,.2);
  border:1px solid #5bb3e8;
  border-radius:5px;
  padding:3px 12px;
  font-size:.72rem;
  color:#5bb3e8;
  pointer-events:none;
  z-index:10;
  letter-spacing:1px;
}
/* Room code bar */
#room_bar{position:absolute;bottom:0;left:0;right:0;background:rgba(13,15,20,.9);border-top:1px solid rgba(200,168,75,.2);padding:5px 12px;font-size:.7rem;color:var(--text3);display:none;align-items:center;gap:8px;z-index:10;pointer-events:none}
#room_bar.show{display:flex}
#room_bar .rcode{font-family:monospace;color:var(--gold2);font-size:.85rem;font-weight:bold;letter-spacing:3px;cursor:pointer;pointer-events:all}
#room_bar .rcode:hover{color:var(--gold)}

/* TOOL INDICATOR */
#tool_ind{position:absolute;bottom:36px;left:10px;background:rgba(13,15,20,.88);border:1px solid var(--border);border-radius:5px;padding:4px 10px;font-size:.72rem;color:var(--text2);pointer-events:none;letter-spacing:1px}

/* MEASURE TOOLTIP */
#mtip{position:absolute;pointer-events:none;background:rgba(13,15,20,.92);border:1px solid var(--gold);border-radius:4px;padding:2px 8px;font-size:.72rem;color:var(--gold2);display:none;white-space:nowrap}

/* BRUSH SIZE */
#brush_ctrl{display:none;position:absolute;top:50px;left:60px;background:rgba(13,15,20,.88);border:1px solid var(--border);border-radius:5px;padding:6px 10px;font-size:.72rem;color:var(--text2)}
#brush_ctrl label{display:block;margin-bottom:3px;font-size:.68rem;color:var(--text3)}

/* TOAST */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--bg2);border:1px solid var(--gold);border-radius:6px;padding:7px 14px;font-size:.8rem;color:var(--gold2);opacity:0;transition:all .3s;z-index:999;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#audio_unlock{position:fixed;bottom:60px;right:12px;background:var(--bg2);border:1px solid var(--gold);border-radius:20px;padding:5px 12px;font-size:.75rem;color:var(--gold2);cursor:pointer;z-index:900;display:none;gap:5px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4);animation:pulse-gold 2s infinite}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,.4)}50%{box-shadow:0 0 0 6px rgba(200,168,75,0)}}

/* MAP URL modal */
#mapurl_modal .mcard{width:400px}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ═══════════════════════════════════════════════
   ═══════════════════════════════════════════════ */
(max-width:640px){

  /* Hide classic sidebar */
  #sidebar{display:none !important}
  #sb_toggle{display:none !important}
  #sb_overlay{display:none !important}

  /* Main fills all height minus top bar and bottom tabs */
  #main{flex-direction:column}

  /* Bottom tab bar */
  #bottom_tabs{
    display:flex !important;
    flex-shrink:0;
    background:var(--bg2);
    border-top:1px solid var(--border);
    z-index:60;
  }
  .btab{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:6px 2px;cursor:pointer;
    font-size:.65rem;color:var(--text3);gap:2px;
    border-top:2px solid transparent;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s;
  }
  .btab .btab-icon{font-size:1.1rem;line-height:1}
  .btab.active{color:var(--gold2);border-top-color:var(--gold)}

  /* Panel that slides up from bottom tabs */
  #mobile_panel{
    display:none;
    position:absolute;bottom:48px;left:0;right:0;
    background:var(--bg2);border-top:1px solid var(--border);
    z-index:55;max-height:55vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 -4px 20px rgba(0,0,0,.5);
  }
  #mobile_panel.open{display:block}

  /* Close handle */
  #mobile_panel_handle{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px;border-bottom:1px solid var(--border);
    font-size:.72rem;color:var(--gold2);letter-spacing:1px;
    cursor:pointer;
  }
  #main{position:relative}
}


(max-width:640px){
  /* Room bar above bottom tabs */
  #room_bar{bottom:52px !important}

  /* Tool indicator above room bar */
  #tool_ind{bottom:88px !important}

  /* Turn banner stays at top */
  #turn_banner{top:8px}

  /* Canvas/cwrap gets remaining height */
  #cwrap{flex:1;min-height:0}

  /* Notes panel repositioned */
  #notes_panel{top:8px;right:8px;bottom:auto;width:calc(100vw - 100px)}

  /* Prop ctrl panel above tabs */
  #ctx_bar{bottom:62px}

  /* Dice overlay centered properly */
  #dice_overlay{top:40%;bottom:auto}
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — MITO VTT
   
   DESKTOP (>768px landscape): sidebar + toolbar visible
   TABLET/MOBILE portrait OR ≤768px: bottom tabs, no sidebar/toolbar
   ═══════════════════════════════════════════════════════════ */


/* ── MOBILE MODE: portrait OR narrow screen ── */
@media (orientation:portrait), (max-width:768px) {

  /* Hide desktop sidebar and its toggle */
  #sidebar   { display:none !important }
  #sb_toggle { display:none !important }
  #sb_overlay{ display:none !important }

  /* Hide desktop toolbar */
  #toolbar   { display:none !important }

  /* Main layout: column so bottom tabs sit at bottom */
  #main { flex-direction:column; position:relative }

  /* Canvas/cwrap fills remaining space */
  #cwrap { flex:1; min-height:0; position:relative }

  /* Bottom tab bar */
  #bottom_tabs {
    display:flex !important;
    flex-shrink:0;
    background:var(--bg2);
    border-top:1px solid var(--border);
    z-index:60;
    height:52px;
  }
  .btab {
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:4px 2px;cursor:pointer;
    font-size:.6rem;color:var(--text3);gap:1px;
    border-top:2px solid transparent;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s;
    min-width:0;
  }
  .btab .btab-icon { font-size:1rem;line-height:1 }
  .btab.active     { color:var(--gold2);border-top-color:var(--gold) }

  /* Sliding panel from bottom */
  #mobile_panel {
    display:none;
    position:absolute;
    bottom:52px; left:0; right:0;
    background:var(--bg2);
    border-top:1px solid var(--border);
    z-index:55;
    max-height:52vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 -4px 20px rgba(0,0,0,.5);
  }
  #mobile_panel.open { display:block }

  #mobile_panel_handle {
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px;border-bottom:1px solid var(--border);
    font-size:.75rem;color:var(--gold2);letter-spacing:1px;
    cursor:pointer;position:sticky;top:0;
    background:var(--bg2);z-index:1;
  }

  /* Push floating UI above bottom tabs */
  #room_bar  { bottom:56px !important }
  #tool_ind  { bottom:92px !important }
  #ctx_bar { bottom:64px !important }
  #notes_panel { top:8px; right:8px; width:min(320px, calc(100vw - 16px)) }

  /* Dice bar hidden — inside chat panel */
  #dice_bar   { display:none !important }
  #dice_toggle{ display:none !important }

  /* Header title hidden to save space */
  #header h1  { display:none }
}

/* ── DESKTOP MODE: landscape AND wider than 768px ── */
@media (orientation:landscape) and (min-width:769px) {
  #bottom_tabs  { display:none !important }
  #mobile_panel { display:none !important }
  #sidebar      { display:flex }
  #toolbar      { display:flex }
  #dice_bar     { display:flex !important }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MITO VTT
   
   MOBILE/PORTRAIT (orientation:portrait OR ≤768px):
     → bottom tabs, no sidebar, no toolbar
   DESKTOP (landscape AND >768px):
     → sidebar + toolbar visible
   ═══════════════════════════════════════════ */

/* Touch device targets */
@media(hover:none){
  .dbtn{min-height:40px;font-size:.8rem}
  .tok-item{min-height:34px}
  .init-row{min-height:32px}
  #cinput{font-size:16px}
  .hbtn{min-height:34px}
}

/* ── MOBILE MODE ── */
@media (orientation:portrait),(max-width:768px){
  #sidebar,#sb_toggle,#sb_overlay,#toolbar{display:none !important}
  #main{flex-direction:column;position:relative}
  #cwrap{flex:1;min-height:0;position:relative}
  #header h1{display:none}
  #dice_bar,#dice_toggle{display:none !important}

  #bottom_tabs{
    display:flex !important;flex-shrink:0;height:52px;
    background:var(--bg2);border-top:1px solid var(--border);z-index:60;
  }
  .btab{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:4px 2px;cursor:pointer;
    font-size:.58rem;color:var(--text3);gap:1px;
    border-top:2px solid transparent;
    -webkit-tap-highlight-color:transparent;min-width:0;
  }
  .btab .btab-icon{font-size:1rem;line-height:1}
  .btab.active{color:var(--gold2);border-top-color:var(--gold)}

  #mobile_panel{
    display:none;position:absolute;
    bottom:52px;left:0;right:0;
    background:var(--bg2);border-top:1px solid var(--border);
    z-index:55;max-height:52vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 -4px 20px rgba(0,0,0,.5);
  }
  #mobile_panel.open{display:block}
  #mobile_panel_handle{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px;border-bottom:1px solid var(--border);
    font-size:.75rem;color:var(--gold2);cursor:pointer;
    position:sticky;top:0;background:var(--bg2);z-index:1;
  }

  #room_bar{bottom:56px !important}
  #tool_ind{bottom:92px !important}
  #ctx_bar{bottom:64px !important}
  #notes_panel{top:8px;right:8px;width:min(320px,calc(100vw - 16px))}
}

/* ── DESKTOP MODE ── */
@media (orientation:landscape) and (min-width:769px){
  #bottom_tabs,#mobile_panel{display:none !important}
  #toolbar{display:flex}
  #sidebar{display:flex}
  #dice_bar{display:flex !important}
}