*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#080710;--s1:#111020;--s2:#181728;--border:#2a2840;
  --gold:#c9a84c;--gold-b:#e8c96a;--gold-d:#3d3118;
  --text:#ddd5be;--text-d:#7a7060;--crit:#ff7540;--fumb:#e05c5c;
}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:'Lora',serif;position:relative;}

#canvas{position:fixed;inset:0;z-index:1;transition:left .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1);}
#canvas canvas{width:100%!important;height:100%!important;}

/* Header — hidden, rendered as 3D text in scene instead */
#header{display:none;}
#header h1{font-family:'Cinzel Decorative',serif;font-size:clamp(18px,3vw,34px);font-weight:700;color:var(--gold);letter-spacing:3px;text-shadow:0 0 40px rgba(201,168,76,.3);}

/* Bottom UI */
#ui{position:fixed;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(8,7,16,.97) 60%,transparent);padding:12px 18px 18px;}
.ui-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:8px;}

/* Turn bar */
#turnBar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(201,168,76,.1);border:1px solid var(--gold-d);border-radius:10px;}
.turn-label{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--text-d);text-transform:uppercase;}
.turn-name{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold-b);flex:1;}
.turn-round{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;color:var(--text-d);}

/* Die selector */
.dice-row{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;}
.die-btn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:rgba(20,18,35,.8);border:1px solid var(--border);padding:6px 10px;border-radius:10px;transition:all .15s;position:relative;user-select:none;min-width:50px;}
.die-btn:hover{background:rgba(201,168,76,.12);border-color:var(--gold-d);transform:translateY(-2px);}
.die-btn.active{background:rgba(201,168,76,.15);border-color:var(--gold);}
.die-face{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text-d);letter-spacing:.5px;}
.die-btn.active .die-face{color:var(--gold);}
.die-cnt{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#080710;font-family:'Cinzel',serif;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 3px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .18s cubic-bezier(.34,1.56,.64,1);}
.die-btn.active .die-cnt{opacity:1;transform:scale(1);}

/* Controls */
.controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;}
.nota{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;color:var(--text);background:rgba(20,18,35,.8);border:1px solid var(--border);border-radius:8px;padding:8px 14px;min-width:120px;text-align:center;flex:1;max-width:260px;}
.btn{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:9px 16px;border-radius:8px;border:none;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-clear{background:rgba(20,18,35,.8);color:var(--text-d);border:1px solid var(--border);}
.btn-clear:hover{color:var(--text);border-color:var(--text-d);}
.btn-roll{background:var(--gold);color:#080710;font-weight:700;box-shadow:0 3px 18px rgba(201,168,76,.3);position:relative;overflow:hidden;}
.btn-roll::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 55%);}
.btn-roll:hover{background:var(--gold-b);transform:translateY(-1px);box-shadow:0 5px 26px rgba(201,168,76,.5);}
.btn-roll:active{transform:translateY(0);}
.btn-roll:disabled{opacity:.35;cursor:not-allowed;transform:none;}
.btn-hist,.btn-players{background:rgba(20,18,35,.8);color:var(--text-d);border:1px solid var(--border);font-size:9px;}
.btn-hist:hover,.btn-players:hover{color:var(--text);}

/* Result overlay */
#result-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-60%);z-index:20;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none;}
#result-overlay.show{opacity:1;pointer-events:all;}
.ro-total{font-family:'Cinzel Decorative',serif;font-size:clamp(56px,10vw,100px);color:var(--gold);line-height:1;text-shadow:0 0 60px rgba(201,168,76,.6);animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards;}
.ro-total.crit{color:var(--crit);text-shadow:0 0 60px rgba(255,117,64,.7);}
.ro-total.fumb{color:var(--fumb);text-shadow:0 0 60px rgba(224,92,92,.6);}
@keyframes popIn{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.ro-formula{font-family:'Cinzel',serif;font-size:19px;font-weight:700;letter-spacing:4px;color:var(--text);margin-top:8px;}
.ro-special{font-family:'Cinzel',serif;font-size:11px;letter-spacing:5px;text-transform:uppercase;margin-top:4px;}
.ro-special.crit{color:var(--crit);}
.ro-special.fumb{color:var(--fumb);}
.ro-breakdown{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;}
.ro-chip{background:rgba(12,11,24,.92);border:1px solid var(--border);border-radius:8px;padding:8px 18px;font-size:17px;font-weight:700;color:var(--text);}
.ro-chip b{font-family:'Cinzel',serif;font-size:16px;color:var(--gold);font-weight:700;margin-right:8px;}
.ro-chip .max{color:var(--crit);}
.ro-chip .min{color:var(--fumb);}
.ro-click{display:inline-block;font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;color:var(--text);background:rgba(201,168,76,.15);border:1px solid var(--gold-d);border-radius:8px;padding:8px 22px;margin-top:14px;cursor:pointer;pointer-events:all;transition:all .15s;}
.ro-click:hover{background:rgba(201,168,76,.28);border-color:var(--gold);color:var(--gold);}

/* ── Shared panel styles ─────────────────────────────────── */
.panel-close{background:none;border:none;color:var(--text-d);cursor:pointer;font-size:20px;padding:0;line-height:1;flex-shrink:0;}
.panel-close:hover{color:var(--text);}

/* ── History panel (right) ──────────────────────────────── */
#hist-panel{position:fixed;right:0;top:0;bottom:0;width:360px;z-index:15;background:rgba(9,8,18,.98);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;}
#hist-panel.open{transform:translateX(0);}
.hist-header{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.hist-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:var(--text-d);text-transform:uppercase;flex:1;}
.hist-header-actions{display:flex;gap:10px;align-items:center;}
.hist-clear-btn{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px;background:transparent;border:1px solid var(--border);color:var(--text-d);border-radius:6px;cursor:pointer;transition:all .15s;}
.hist-clear-btn:hover{color:var(--fumb);border-color:var(--fumb);}
.hist-body{flex:1;overflow-y:auto;padding:12px;}
.hist-body::-webkit-scrollbar{width:4px;}
.hist-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

.hist-empty{text-align:center;color:var(--text-d);font-style:italic;font-size:16px;padding:28px;}

/* Round delimiter */
.h-round-delim{text-align:center;padding:10px 0;margin:4px 0;}
.h-round-delim span{font-family:'Cinzel',serif;font-size:12px;letter-spacing:4px;color:var(--gold-d);text-transform:uppercase;background:var(--s1);padding:4px 14px;border-radius:20px;border:1px solid var(--border);}

/* History item */
.hitem{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;animation:slidein .22s ease;transition:border-color .2s;}
.hitem:hover{border-color:var(--gold-d);}
@keyframes slidein{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}

.hitem-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.h-form{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold);flex:1;}
.h-time{font-size:13px;color:var(--text-d);flex-shrink:0;}
.h-tot{font-family:'Cinzel Decorative',serif;font-size:26px;color:var(--gold);flex-shrink:0;min-width:42px;text-align:right;line-height:1;}
.h-tot.crit{color:var(--crit);}
.h-tot.fumb{color:var(--fumb);}
.h-del{background:none;border:none;color:var(--text-d);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0;}
.h-del:hover{color:var(--fumb);background:rgba(224,92,92,.12);}

.h-vals{font-size:16px;color:var(--text);line-height:1.8;margin-bottom:10px;}
.h-vals .max{color:var(--crit);font-weight:700;}
.h-vals .min{color:var(--fumb);font-weight:700;}
.h-die-lbl{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold);margin-right:4px;}

/* Label input */
.h-label-row{margin-top:2px;}
.h-label-input{width:100%;background:rgba(255,255,255,.03);border:none;border-bottom:1px solid var(--border);color:var(--text-d);font-family:'Lora',serif;font-style:italic;font-size:14px;padding:5px 4px;outline:none;transition:all .15s;border-radius:0;}
.h-label-input::placeholder{color:var(--text-d);opacity:.5;}
.h-label-input:focus{border-bottom-color:var(--gold-d);background:rgba(201,168,76,.04);color:var(--text);}
.h-label-input.has-label{color:var(--gold-b);border-bottom-color:var(--gold-d);}

/* ── Player panel (left) ─────────────────────────────────── */
#player-panel{position:fixed;left:0;top:0;bottom:0;width:320px;z-index:15;background:rgba(9,8,18,.98);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;}
#player-panel.open{transform:translateX(0);}

.player-header{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.player-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:var(--text-d);text-transform:uppercase;flex:1;}

.player-body{flex:1;display:flex;flex-direction:column;padding:14px;gap:12px;overflow:hidden;}

.player-add-row{display:flex;gap:8px;}
.player-add-row input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'Lora',serif;font-size:15px;padding:9px 12px;outline:none;transition:border-color .15s;}
.player-add-row input:focus{border-color:var(--gold-d);}
.player-add-row input::placeholder{color:var(--text-d);opacity:.6;}
.player-add-row button{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:9px 14px;background:var(--gold);color:#080710;border:none;border-radius:8px;cursor:pointer;font-weight:700;white-space:nowrap;transition:background .15s;}
.player-add-row button:hover{background:var(--gold-b);}

#playerList{flex:1;overflow-y:auto;}
#playerList::-webkit-scrollbar{width:4px;}
#playerList::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

.players-empty{text-align:center;color:var(--text-d);font-style:italic;font-size:15px;padding:24px;}

.player-item{display:flex;align-items:center;gap:10px;padding:12px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:grab;transition:all .15s;background:var(--s1);}
.player-item:hover{border-color:var(--gold-d);}
.player-item.active{border-color:var(--gold);background:rgba(201,168,76,.1);}
.player-item.dragging{opacity:.4;}
.player-item.drag-over{border-color:var(--gold);border-style:dashed;}
.player-drag{color:var(--text-d);font-size:15px;cursor:grab;user-select:none;flex-shrink:0;}
.player-name{font-family:'Cinzel',serif;font-size:15px;color:var(--text);flex:1;}
.player-item.active .player-name{color:var(--gold-b);font-weight:700;}
.player-badge{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#080710;background:var(--gold);padding:2px 8px;border-radius:10px;flex-shrink:0;}
.player-del{background:none;border:none;color:var(--text-d);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0;}
.player-del:hover{color:var(--fumb);background:rgba(224,92,92,.12);}

.player-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
.p-btn{font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;padding:11px;border-radius:8px;border:none;cursor:pointer;transition:all .15s;font-weight:700;}
.p-btn:disabled{opacity:.35;cursor:not-allowed;}
.p-btn-start{background:var(--s2);color:var(--text-d);border:1px solid var(--border);}
.p-btn-start:not(:disabled):hover{color:var(--text);border-color:var(--text-d);}
.p-btn-next{background:var(--gold);color:#080710;box-shadow:0 3px 14px rgba(201,168,76,.25);}
.p-btn-next:not(:disabled):hover{background:var(--gold-b);transform:translateY(-1px);}

/* ── Coin flip ───────────────────────────────────────────── */
.btn-coin{background:rgba(20,18,35,.8);color:var(--text-d);border:1px solid var(--border);}
.btn-coin:hover{color:var(--text);}

.ro-coin{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(42px,7vw,72px);
  letter-spacing:4px;
  line-height:1;
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ro-coin.heads{color:var(--gold);text-shadow:0 0 60px rgba(201,168,76,.6);}
.ro-coin.tails{color:#c0c8d8;text-shadow:0 0 60px rgba(180,196,216,.4);}

.h-coin-result{
  font-family:'Cinzel',serif;
  font-size:16px;font-weight:700;letter-spacing:2px;
}
.h-coin-result.heads{color:var(--gold);}
.h-coin-result.tails{color:#c0c8d8;}

/* ── VS Panel (slides from bottom) ──────────────────────── */
#vs-panel {
  position: fixed; left:0; right:0; bottom:0; z-index:16;
  background: rgba(9,8,18,.98); border-top:1px solid var(--border);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding-bottom: env(safe-area-inset-bottom);
}
#vs-panel.open { transform: translateY(0); }

.vs-header {
  display:flex; align-items:center; padding:14px 18px 10px;
  border-bottom:1px solid var(--border);
}
.vs-header-title {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:4px;
  color:var(--text-d); text-transform:uppercase; flex:1;
}

.vs-body {
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; padding:14px 16px 10px;
}
.vs-side { display:flex; flex-direction:column; gap:8px; min-width:0; }
.vs-divider-col {
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; font-family:'Cinzel Decorative',serif;
  font-size:18px; color:var(--gold-d); letter-spacing:2px; align-self:center;
}

.vs-player-sel {
  width:100%; background:var(--s2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-family:'Cinzel',serif;
  font-size:12px; padding:7px 10px; outline:none; cursor:pointer;
}
.vs-player-sel:focus { border-color:var(--gold-d); }
option { background:var(--s1); }

.vs-dice-grid {
  display:flex; flex-wrap:wrap; gap:5px;
}
.vs-die-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; background:rgba(20,18,35,.8); border:1px solid var(--border);
  padding:4px 7px; border-radius:8px; transition:all .12s;
  position:relative; user-select:none; min-width:38px;
}
.vs-die-btn:hover { background:rgba(201,168,76,.12); border-color:var(--gold-d); }
.vs-die-btn.active { background:rgba(201,168,76,.15); border-color:var(--gold); }
.vs-die-face {
  font-family:'Cinzel',serif; font-size:11px; font-weight:700;
  color:var(--text-d); letter-spacing:.3px;
}
.vs-die-btn.active .vs-die-face { color:var(--gold); }
.vs-die-cnt {
  position:absolute; top:-5px; right:-5px; background:var(--gold); color:#080710;
  font-family:'Cinzel',serif; font-size:8px; font-weight:700;
  min-width:14px; height:14px; border-radius:7px; padding:0 2px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0); transition:all .15s cubic-bezier(.34,1.56,.64,1);
}
.vs-die-btn.active .vs-die-cnt { opacity:1; transform:scale(1); }

.vs-nota {
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:1px;
  color:var(--text-d); min-height:18px;
}
.vs-nota.has-dice { color:var(--text); }

.vs-footer {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 16px 16px; border-top:1px solid var(--border); margin-top:4px;
}
.vs-clear-btn {
  font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; text-transform:uppercase;
  padding:7px 14px; background:transparent; border:1px solid var(--border);
  color:var(--text-d); border-radius:7px; cursor:pointer; transition:all .15s;
}
.vs-clear-btn:hover { color:var(--text); border-color:var(--text-d); }
.vs-clash-btn {
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  padding:10px 28px; background:var(--gold); color:#080710; font-weight:700;
  border:none; border-radius:8px; cursor:pointer;
  box-shadow:0 3px 18px rgba(201,168,76,.3); transition:all .15s;
}
.vs-clash-btn:hover { background:var(--gold-b); transform:translateY(-1px); }
.vs-clash-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }

/* ── VS Result overlay ───────────────────────────────────── */
#ro-vs { display:none; flex-direction:column; align-items:center; gap:6px; }
#ro-vs.active { display:flex; }
.vs-res-row {
  display:flex; align-items:flex-end; justify-content:center; gap:20px;
}
.vs-res-side { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vs-res-name {
  font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px;
  color:var(--text-d); text-transform:uppercase;
}
.vs-res-total {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(42px,7vw,76px); line-height:1;
  color:var(--gold); animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.vs-res-total.winner { color:var(--crit); text-shadow:0 0 50px rgba(255,117,64,.6); }
.vs-res-total.loser  { color:var(--text-d); font-size:clamp(32px,5vw,54px); }
.vs-res-total.draw   { color:var(--gold); }
.vs-sep {
  font-family:'Cinzel Decorative',serif; font-size:22px;
  color:var(--gold-d); padding-bottom:8px;
}
.vs-res-chips {
  display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:160px;
}
.vs-res-chip {
  background:rgba(12,11,24,.85); border:1px solid var(--border);
  border-radius:6px; padding:3px 8px; font-size:12px; font-weight:600; color:var(--text);
}
.vs-res-chip b { font-family:'Cinzel',serif; font-size:10px; color:var(--gold); margin-right:4px; }
.vs-res-verdict {
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:4px; text-transform:uppercase;
  margin-top:4px;
}
.vs-res-verdict.winner { color:var(--crit); }
.vs-res-verdict.draw   { color:var(--gold); }

.btn-vs{background:rgba(20,18,35,.8);color:var(--text-d);border:1px solid var(--border);font-size:9px;}
.btn-vs:hover{color:var(--text);}

/* On narrow screens, panels overlay instead of pushing canvas */
@media (max-width: 768px) {
  #canvas { left: 0 !important; right: 0 !important; }
}

/* ── Settings panel ──────────────────────────────────── */
#settings-panel{position:fixed;right:0;top:0;bottom:0;width:340px;z-index:17;background:rgba(9,8,18,.98);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;}
#settings-panel.open{transform:translateX(0);}
.settings-header{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.settings-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:var(--text-d);text-transform:uppercase;flex:1;}
.settings-body{flex:1;overflow-y:auto;padding:16px;}
.settings-body::-webkit-scrollbar{width:4px;}
.settings-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.s-section{font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;color:var(--gold-d);text-transform:uppercase;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.s-section:first-child{margin-top:0;}
.s-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;cursor:pointer;}
.s-row span{font-size:14px;color:var(--text);}
.s-row input[type=color]{width:40px;height:30px;border:1px solid var(--border);border-radius:6px;background:var(--s2);cursor:pointer;padding:2px;}
.s-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
.s-row input[type=color]::-webkit-color-swatch{border:none;border-radius:3px;}
.s-actions{margin-top:20px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.s-apply-btn{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;width:100%;padding:11px;background:var(--gold);color:#080710;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .15s;box-shadow:0 3px 14px rgba(201,168,76,.25);}
.s-apply-btn:hover{background:var(--gold-b);transform:translateY(-1px);}
.s-reset-btn{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;width:100%;padding:10px;background:transparent;border:1px solid var(--border);color:var(--text-d);border-radius:8px;cursor:pointer;transition:all .15s;}
.s-reset-btn:hover{color:var(--fumb);border-color:var(--fumb);}
.btn-settings{background:rgba(20,18,35,.8);color:var(--text-d);border:1px solid var(--border);font-size:9px;}
.btn-settings:hover{color:var(--text);}