*,::after,::before{box-sizing:border-box;margin:0;padding:0}

/* ── BASE ─────────────────────────────────────────── */
body{font-family:'Lilita One',cursive;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000;transition:background .5s ease}
#bgGlow{display:none!important}
#bgCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.45;transition:opacity .4s ease}

/* ── START SCREEN ─────────────────────────────────── */
#startScreen{position:fixed;inset:0;z-index:99999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,transform .5s ease}
#startScreen.hide{opacity:0;pointer-events:none;transform:scale(1.04)}
.start-box{display:flex;flex-direction:column;align-items:center;gap:24px;animation:startIn .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes startIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:none}}
.start-title{font-family:'Lilita One',cursive;font-size:clamp(34px,6vw,72px);color:#fff;text-transform:uppercase;letter-spacing:3px;text-align:center;text-shadow:4px 5px 0 rgba(0,80,160,.45)}
.start-follow{font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:1px;text-align:center;margin-top:-10px}
.start-handle{color:#fdd835;font-weight:900;letter-spacing:2px}
#startBtn{padding:22px 46px;border:none;border-radius:20px;background:#fdd835;color:#c84800;font-family:'Lilita One',cursive;font-size:clamp(24px,4vw,44px);letter-spacing:3px;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.5);transition:transform .12s,filter .2s,box-shadow .2s}
#startBtn:hover{filter:brightness(1.07);transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5)}
#startBtn:active{transform:scale(.96)}

/* ── ROLL OVERLAY ─────────────────────────────────── */
#rollOverlay{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
#rollOverlay.show{opacity:1;pointer-events:all;transform:none}
#rollOverlay::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 25%,rgba(255,255,255,.52) 0,transparent 70%)}
.roll-msg{font-family:'Lilita One',cursive;font-size:clamp(30px,5.5vw,54px);color:#fff;text-transform:uppercase;letter-spacing:2px;text-shadow:3px 4px 0 rgba(0,80,160,.5);position:relative;z-index:1;animation:rollMsgIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes rollMsgIn{from{opacity:0;transform:scale(.7) translateY(-10px)}to{opacity:1;transform:none}}
.roll-dice-row{display:flex;gap:16px;justify-content:center;position:relative;z-index:1}
.roll-ghost{width:106px;height:106px;border-radius:18px;background:rgba(255,255,255,.9);border:7px solid #fff;box-shadow:0 0 24px rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;animation:ghostRock .46s ease-in-out infinite alternate}
.roll-ghost:nth-child(2){animation-delay:.11s}.roll-ghost:nth-child(3){animation-delay:.22s}.roll-ghost:nth-child(4){animation-delay:.33s}.roll-ghost:nth-child(5){animation-delay:.44s}.roll-ghost:nth-child(6){animation-delay:.55s}
@keyframes ghostRock{from{transform:rotate(-9deg) scale(.93)}to{transform:rotate(9deg) scale(1.07)}}
.roll-ghost-dot{width:17px;height:17px;border-radius:50%;background:rgba(100,185,240,.4)}
.follow-ticker{position:relative;z-index:1;width:380px;max-width:90vw;overflow:hidden;padding:6px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.follow-ticker-inner{display:inline-block;white-space:nowrap;animation:tickerMove 3s linear infinite;font-family:'Lilita One',cursive;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55)}
@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── MEGA OVERLAY ─────────────────────────────────── */
#megaOverlay{
  position:fixed;inset:-40px;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:28px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  background:#000;
  overflow:hidden;
}
#megaOverlay::before{display:none;}
#megaOverlay.show{opacity:1;pointer-events:all}
#megaOverlay.shake{animation:screenShake .4s ease both}
@keyframes screenShake{0%{transform:translate(0) scale(1)}10%{transform:translate(-18px,10px) scale(1.015)}20%{transform:translate(18px,-10px) scale(1.01)}30%{transform:translate(-15px,8px)}40%{transform:translate(15px,-8px)}60%{transform:translate(-8px,4px)}80%{transform:translate(8px,-4px)}100%{transform:translate(0) scale(1)}}

.mega-title{
  font-family:'Lilita One',cursive;font-size:clamp(36px,7vw,68px);color:#fff;
  text-transform:uppercase;letter-spacing:4px;position:relative;z-index:1;
  text-shadow:0 0 40px rgba(213,0,249,.9),0 0 80px rgba(255,23,68,.5),3px 4px 0 rgba(0,0,0,.6);
  animation:megaTitlePulse .9s ease-in-out infinite alternate;
}
@keyframes megaTitlePulse{
  from{text-shadow:0 0 30px rgba(213,0,249,.7),0 0 60px rgba(255,23,68,.4),3px 4px 0 rgba(0,0,0,.6);letter-spacing:4px}
  to{text-shadow:0 0 70px #d500f9,0 0 130px rgba(255,23,68,.9),3px 4px 0 rgba(0,0,0,.6);letter-spacing:5px}
}
.mega-subtitle{
  font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;letter-spacing:6px;
  text-transform:uppercase;color:rgba(255,200,255,.45);position:relative;z-index:1;
  margin-top:-18px;
}

/* ── MEGA FACE (rises from bottom, then floats/sways, sits behind the dice) ── */
.mega-face{
  width:clamp(660px,125vw,1250px);
  position:absolute;left:50%;top:41%;z-index:0;
  pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.65));
  opacity:0;
  transform:translate(-50%,150%) scale(.7);
}
.mega-face.enter{animation:megaFaceEnter .9s cubic-bezier(.2,.8,.35,1.1) both;}
.mega-face.floaty{animation:megaFaceFloat 3.2s ease-in-out infinite;opacity:1;}
@keyframes megaFaceEnter{
  0%{opacity:0;transform:translate(-50%,150%) scale(.7) rotate(0deg)}
  60%{opacity:1;transform:translate(-50%,-58%) scale(1.08) rotate(-3deg)}
  80%{transform:translate(-50%,-44%) scale(.97) rotate(2deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
}
@keyframes megaFaceFloat{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  25%{transform:translate(-44%,-56%) rotate(-2.5deg)}
  50%{transform:translate(-50%,-50%) rotate(0deg)}
  75%{transform:translate(-56%,-44%) rotate(2.5deg)}
  100%{transform:translate(-50%,-50%) rotate(0deg)}
}

/* ── MEGA HANDS (flank the dice row, gentle grab bob) ── */
.mega-hands-wrap{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-top:65vh;}
.mega-hand{
  width:clamp(192px,36vw,330px);
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
  transition:opacity .35s ease;
  align-self:center;
}
.mega-hand-left{margin-right:-16px;transform:translateY(0);}
.mega-hand-right{margin-left:-16px;transform:translateY(0);}
.mega-hand.show{opacity:1;}
.mega-hand.show.mega-hand-left{animation:handBobL 1.5s ease-in-out infinite;}
.mega-hand.show.mega-hand-right{animation:handBobR 1.5s ease-in-out infinite .35s;}
@keyframes handBobL{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-11px) rotate(-3deg)}}
@keyframes handBobR{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-11px) rotate(3deg)}}

.mega-dice-row{
  display:flex;gap:18px;justify-content:center;align-items:center;
  min-height:150px;position:relative;z-index:1;
}
.mega-dice{
  width:115px;height:115px;border-radius:19px;border:5px solid rgba(255,255,255,.9);
  background:#000;
  box-shadow:0 0 30px rgba(255,255,255,.4);
  position:relative;
  overflow:hidden;
}
.reel-3d-wrap{position:absolute;inset:0;perspective:420px;perspective-origin:50% 50%;overflow:hidden;border-radius:14px}
.reel-cylinder{position:absolute;left:0;right:0;top:50%;transform-style:preserve-3d;transform-origin:center center}
.reel-face{
  position:absolute;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;overflow:hidden;
}
.mega-color-face{
  width:96%;height:96%;border-radius:16px;border:5px solid rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.mega-color-face[data-c=red]{background:#ff1744;box-shadow:inset -6px -6px 0 #b71c1c,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(255,23,68,.45)}
.mega-color-face[data-c=orange]{background:#ff6d00;box-shadow:inset -6px -6px 0 #bf360c,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(255,109,0,.45)}
.mega-color-face[data-c=yellow]{background:#ffea00;box-shadow:inset -6px -6px 0 #f9a825,inset 6px 6px 0 rgba(255,255,255,.3),0 8px 24px rgba(255,234,0,.4)}
.mega-color-face[data-c=green]{background:#00e676;box-shadow:inset -6px -6px 0 #00600a,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(0,230,118,.45)}
.mega-color-face[data-c=blue]{background:#2979ff;box-shadow:inset -6px -6px 0 #0d1b6e,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(41,121,255,.5)}
.mega-color-face[data-c=purple]{background:#d500f9;box-shadow:inset -6px -6px 0 #6a0080,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(213,0,249,.45)}
.mega-dice-dot{
  width:18px;height:18px;background:rgba(255,255,255,.88);border-radius:50%;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.mega-dice.revealed{border-color:#fff}
.mega-dice.land{animation:megaLand .4s ease-out both}
@keyframes megaLand{
  0%{transform:translateY(0) scale(1)}
  25%{transform:translateY(-8px) scale(1.05)}
  50%{transform:translateY(4px) scale(.96)}
  75%{transform:translateY(-3px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
.mega-dice[data-c=red]{box-shadow:0 0 60px rgba(255,23,68,.95),0 0 120px rgba(255,23,68,.4)}
.mega-dice[data-c=orange]{box-shadow:0 0 60px rgba(255,109,0,.95),0 0 120px rgba(255,109,0,.4)}
.mega-dice[data-c=yellow]{box-shadow:0 0 60px rgba(255,234,0,.95),0 0 120px rgba(255,234,0,.4)}
.mega-dice[data-c=green]{box-shadow:0 0 60px rgba(0,230,118,.95),0 0 120px rgba(0,230,118,.4)}
.mega-dice[data-c=blue]{box-shadow:0 0 60px rgba(41,121,255,.95),0 0 120px rgba(41,121,255,.4)}
.mega-dice[data-c=purple]{box-shadow:0 0 60px rgba(213,0,249,.95),0 0 120px rgba(213,0,249,.4)}
.mega-color-name{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-family:'Lilita One',cursive;font-size:12px;letter-spacing:2px;color:#fff;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s ease}
.mega-dice.revealed .mega-color-name{opacity:1}
.mega-progress{display:flex;gap:8px;position:relative;z-index:1}
.mega-pip{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3);transition:all .3s ease}
.mega-pip.done{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);transform:scale(1.2)}
.mega-close{padding:12px 36px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);border-radius:14px;font-family:'Lilita One',cursive;font-size:16px;color:#fff;letter-spacing:2px;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .4s ease,background .2s,transform .1s;position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:5;backdrop-filter:blur(8px)}
.mega-close:hover{background:rgba(255,255,255,.22);transform:translateX(-50%) translateY(-2px)}
.mega-close.show{opacity:1}

/* ── PARTICLES ────────────────────────────────────── */
.impact{position:fixed;pointer-events:none;z-index:201;border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:impactBurst .3s ease-out both}
@keyframes impactBurst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}60%{transform:translate(-50%,-50%) scale(1.8);opacity:.5}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
.star-particle{position:fixed;pointer-events:none;z-index:202;animation:starFly .45s ease-out both}
@keyframes starFly{0%{transform:translate(0,0) scale(1.2);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.ring-particle{position:fixed;pointer-events:none;z-index:201;border-radius:50%;border:3px solid;transform:translate(-50%,-50%) scale(0);animation:ringExpand .35s ease-out both}
@keyframes ringExpand{0%{transform:translate(-50%,-50%) scale(0);opacity:.8}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}

/* ── GAME LAYOUT ──────────────────────────────────── */
.game-wrap{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:20px 12px}
.game-spacer{min-width:118px;flex-shrink:0;visibility:hidden}
.page{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding:0}
/* ── CARD ─────────────────────────────────────────── */
.card{
  background:rgba(20,20,30,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.16);border-radius:20px;padding:22px 26px 24px;
  width:100%;max-width:660px;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.15),inset 0 1.5px 0 rgba(255,255,255,.1);
  position:relative;overflow:hidden;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.02) 60%,transparent 100%);border-radius:20px 20px 0 0;pointer-events:none;z-index:0}
.card>*{position:relative;z-index:1}
.card-title{font-family:'Lilita One',cursive;font-size:clamp(22px,4.5vw,36px);color:#fff;text-transform:uppercase;letter-spacing:2px;text-align:center;text-shadow:2px 3px 0 rgba(0,80,170,.5);transition:color .4s,text-shadow .4s}
.card-subtitle{font-family:Nunito,sans-serif;font-size:24px;font-weight:900;color:rgba(255,255,255,.85);letter-spacing:2px;text-transform:uppercase;margin-top:-2px;transition:color .4s}
.enter-hint{
  font-family:'Lilita One',cursive;font-size:clamp(13px,2.2vw,17px);letter-spacing:3px;
  color:#fff;text-transform:uppercase;text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,.4);
  transition:color .4s;
}
body.bright-bg-invert .enter-hint{color:#111;text-shadow:0 2px 4px rgba(0,0,0,.15)}

/* ── BRIGHT BACKGROUND FRAME INVERSION ───────────────
   When the user picks a light/bright custom background color,
   body.bright-bg-invert is toggled on <body> (see applyCustomBgColor),
   turning all the semi-transparent white "frames"/borders black
   so they stay visible instead of disappearing into the light bg. */
body.bright-bg-invert .card,
body.bright-bg-invert .dropdown,
body.bright-bg-invert .dice,
body.bright-bg-invert .btn-roll,
body.bright-bg-invert .btn-mega,
body.bright-bg-invert .colors-info,
body.bright-bg-invert .trade-ref,
body.bright-bg-invert .tr-title,
body.bright-bg-invert .tr-row,
body.bright-bg-invert .tr-sq,
body.bright-bg-invert .dc-panel,
body.bright-bg-invert .dc-title,
body.bright-bg-invert .hist-dot,
body.bright-bg-invert .sound-btn,
body.bright-bg-invert .sound-toggle-track,
body.bright-bg-invert .theme-btn,
body.bright-bg-invert .theme-dropdown,
body.bright-bg-invert .block-ref,
body.bright-bg-invert .bl-title,
body.bright-bg-invert .bl-row,
body.bright-bg-invert .mega-dice,
body.bright-bg-invert .roll-ghost{
  border-color:rgba(0,0,0,.75)!important;
}
body.bright-bg-invert .card-title,
body.bright-bg-invert .card-subtitle,
body.bright-bg-invert .tr-title,
body.bright-bg-invert .tr-color,
body.bright-bg-invert .tr-trade,
body.bright-bg-invert .rule-num,
body.bright-bg-invert .rule-input,
body.bright-bg-invert .dc-title,
body.bright-bg-invert .bl-title{
  color:#111!important;
  text-shadow:none!important;
}
body.bright-bg-invert .rule-input::placeholder{color:rgba(0,0,0,.45)!important}
body.bright-bg-invert .rule-input{border-bottom-color:rgba(0,0,0,.3)!important}
body.bright-bg-invert .rule-input:focus{border-bottom-color:rgba(0,0,0,.8)!important}
.dropdowns{display:flex;gap:10px;width:100%}
.dropdown{flex:1;padding:10px 14px;border-radius:10px;border:2px solid rgba(255,255,255,.3);background:rgba(20,20,30,.35);color:#fff;font-family:'Lilita One',cursive;font-size:15px;letter-spacing:1px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;transition:background .4s,border-color .4s,color .4s}
.dropdown option{background:#141420;color:#fff;}
.dropdown:focus{outline:0}
.dice-area{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;min-height:130px;width:100%}
.dice{width:106px;height:106px;border-radius:18px;border:5px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .1s}
.dice-dot{width:18px;height:18px;background:rgba(255,255,255,.88);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dice[data-color=red]{background:#ff1744;box-shadow:inset -6px -6px 0 #b71c1c,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(255,23,68,.45)}
.dice[data-color=orange]{background:#ff6d00;box-shadow:inset -6px -6px 0 #bf360c,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(255,109,0,.45)}
.dice[data-color=yellow]{background:#ffea00;box-shadow:inset -6px -6px 0 #f9a825,inset 6px 6px 0 rgba(255,255,255,.3),0 8px 24px rgba(255,234,0,.4)}
.dice[data-color=green]{background:#00e676;box-shadow:inset -6px -6px 0 #00600a,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(0,230,118,.45)}
.dice[data-color=blue]{background:#2979ff;box-shadow:inset -6px -6px 0 #0d1b6e,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(41,121,255,.5)}
.dice[data-color=purple]{background:#d500f9;box-shadow:inset -6px -6px 0 #6a0080,inset 6px 6px 0 rgba(255,255,255,.2),0 8px 24px rgba(213,0,249,.45)}
.dice[data-color=none]{background:rgba(255,255,255,.32);box-shadow:inset -4px -4px 0 rgba(0,100,200,.15),0 4px 12px rgba(0,0,0,.1)}
.dice[data-color=none] .dice-dot{background:rgba(100,180,240,.3)}
.dice.pop{animation:dicePop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes dicePop{from{transform:scale(.45) rotate(-8deg);opacity:.2}60%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}
.dice-area.compact .dice{width:82px;height:82px;border-radius:14px}
.dice-area.compact .dice-dot{width:13px;height:13px}
.bongo-label{width:100%;text-align:center;font-family:'Lilita One',cursive;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:-4px;transition:color .4s}
.card-follow{width:100%;text-align:center;font-family:'Lilita One',cursive;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:-8px;transition:color .4s}
.card-follow-handle{color:rgba(255,255,255,.6)}


/* ── CARD RIBBON ──────────────────────────────────── */
.card-ribbon{
  position:absolute;top:22px;left:-44px;
  background:linear-gradient(135deg,#fdd835,#ff6d00);
  color:#fff;font-family:'Lilita One',cursive;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
  padding:5px 44px;
  transform:rotate(-35deg);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  z-index:2;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
  white-space:nowrap;
}
/* ── BUTTONS ──────────────────────────────────────── */
.btn-roll{width:100%;padding:14px 20px;background:#fdd835;border:3px solid rgba(255,255,255,.6);border-radius:12px;border-bottom:5px solid #f9a825;font-family:'Lilita One',cursive;font-size:clamp(18px,3vw,24px);color:#c84800;text-transform:uppercase;letter-spacing:3px;cursor:pointer;transition:transform 80ms,border-bottom-width 80ms,background .15s,box-shadow .2s}
.btn-roll:hover{background:#ffee58;box-shadow:0 6px 20px rgba(249,168,37,.4)}
.btn-roll:active{transform:translateY(3px);border-bottom-width:2px}
.btn-roll:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-mega{width:100%;padding:14px 20px;background-size:200% 200%;animation:megaGrad 3s ease infinite;border:3px solid rgba(255,255,255,.7);border-radius:12px;border-bottom:5px solid rgba(0,0,0,.25);font-family:'Lilita One',cursive;font-size:clamp(16px,2.5vw,22px);text-transform:uppercase;letter-spacing:3px;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.4);box-shadow:0 0 24px rgba(213,0,249,.5),0 8px 0 rgba(0,0,0,.2);transition:transform 80ms,box-shadow 80ms}
.btn-def{color:#111;background:linear-gradient(135deg,#ffffff,#f0f0f0,#ffffff,#fafafa,#ffffff);background-size:300% 300%;animation:defGrad 3s ease infinite;border-color:rgba(0,0,0,.2)!important;text-shadow:none!important;box-shadow:0 0 22px rgba(255,255,255,.8),0 8px 0 rgba(0,0,0,.12)!important}
.btn-def:hover{box-shadow:0 0 38px rgba(255,255,255,1),0 10px 0 rgba(0,0,0,.12)!important}
@keyframes defGrad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.btn-black{color:#ddd;background:linear-gradient(135deg,#2a2a2a,#111,#1e1e1e,#0a0a0a,#2a2a2a);background-size:300% 300%;animation:blackGrad 3s ease infinite;border-color:rgba(255,255,255,.18)!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;box-shadow:0 0 16px rgba(0,0,0,.7),0 8px 0 rgba(0,0,0,.5)!important}
.btn-black:hover{box-shadow:0 0 28px rgba(80,80,80,.6),0 10px 0 rgba(0,0,0,.5)!important}
@keyframes blackGrad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}50%{background-position:100% 50%}100%{background-position:0 50%}}
.btn-mega:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(213,0,249,.8),0 10px 0 rgba(0,0,0,.2)}
.btn-mega:active{transform:translateY(4px);border-bottom-width:2px}
.btn-mega:disabled{opacity:.5;cursor:not-allowed;transform:none;animation:none}
@keyframes megaGrad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.colors-info{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 14px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,.95);text-align:center;width:100%;transition:background .4s,color .4s,border-color .4s}
.ci-red{color:#ff5252;font-weight:900}.ci-orange{color:#ffab40;font-weight:900}.ci-yellow{color:#ffe000;font-weight:900}.ci-green{color:#69ff47;font-weight:900}.ci-blue{color:#82b1ff;font-weight:900}.ci-purple{color:#ea80fc;font-weight:900}

/* ── TOAST ────────────────────────────────────────── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(8,8,35,.93);color:#a78bfa;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:10px 24px;border-radius:10px;border:1px solid rgba(124,58,237,.45);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;opacity:0;pointer-events:none;z-index:999}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── TRADE REF PANEL ──────────────────────────────── */
.trade-ref{display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.32);border-radius:24px;padding:30px 26px;min-width:310px;transition:background .4s,border-color .4s;align-self:center;flex-shrink:0}
.tr-title{font-family:'Lilita One',cursive;font-size:28px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.95);text-align:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.28);margin-bottom:6px;transition:color .4s}
.tr-row{display:flex;align-items:center;gap:16px;padding:14px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);transition:background .4s,border-color .4s}
.tr-sq{width:50px;height:50px;border-radius:11px;flex-shrink:0;border:2px solid rgba(255,255,255,.7)}
.tr-sq.red{background:#ff1744;box-shadow:0 0 7px rgba(255,23,68,.7)}.tr-sq.orange{background:#ff6d00;box-shadow:0 0 7px rgba(255,109,0,.7)}.tr-sq.yellow{background:#ffea00;box-shadow:0 0 7px rgba(255,234,0,.6)}.tr-sq.green{background:#00e676;box-shadow:0 0 7px rgba(0,230,118,.7)}.tr-sq.blue{background:#2979ff;box-shadow:0 0 7px rgba(41,121,255,.7)}.tr-sq.purple{background:#d500f9;box-shadow:0 0 7px rgba(213,0,249,.7)}
.tr-info{display:flex;flex-direction:column;gap:3px}
.tr-color{font-family:'Lilita One',cursive;font-size:26px;color:rgba(255,255,255,1);letter-spacing:.3px;line-height:1.2;transition:color .4s}
.tr-trade{font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;color:rgba(255,255,255,.78);letter-spacing:.5px;line-height:1.2;transition:color .4s}
@media(max-width:820px){.trade-ref{display:none}}

/* ── RULE PANEL ───────────────────────────────────── */
.rule-row{display:flex;align-items:center;gap:14px;padding:12px 8px;}
.rule-num{font-family:'Lilita One',cursive;font-size:24px;color:rgba(255,255,255,.95);min-width:28px;flex-shrink:0;}
.rule-input{
  flex:1;min-width:0;
  background:transparent;
  border:none;border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-family:'Nunito',sans-serif;font-size:20px;font-weight:700;
  letter-spacing:.4px;
  padding:6px 2px 6px 0;
  outline:none;
  transition:border-color .2s;
}
.rule-input::placeholder{color:rgba(255,255,255,.4);}
.rule-input:focus{border-bottom-color:rgba(255,255,255,.8);}

/* ── DICE COUNTER SIDE PANELS (Garams / Dragons) — styled like COLORS panel ─────── */
.dc-group{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:650;display:flex;align-items:center;
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.dc-group-right{right:0;transform:translateY(-50%) translateX(calc(100% - 46px))}
.dc-group-right.open{transform:translateY(-50%) translateX(0)}
.dc-group-left{left:0;flex-direction:row-reverse;transform:translateY(-50%) translateX(calc(-100% + 46px))}
.dc-group-left.open{transform:translateY(-50%) translateX(0)}

.dc-tab{
  flex-shrink:0;width:46px;box-sizing:border-box;
  padding:16px 8px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.32);
  font-family:'Lilita One',cursive;font-size:13px;letter-spacing:1px;color:rgba(255,255,255,.95);
  writing-mode:vertical-rl;text-orientation:mixed;cursor:pointer;
  transition:background .2s;
  text-align:center;
}
.dc-tab:hover{background:rgba(255,255,255,.12)}
.dc-group-right .dc-tab{border-radius:20px 0 0 20px;border-right:none}
.dc-group-left .dc-tab{border-radius:0 20px 20px 0;border-left:none}

.dc-panel{
  width:min(280px,86vw);
  background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.32);
  z-index:650;padding:26px 22px;display:flex;flex-direction:column;align-items:center;
  min-height:300px;overflow:hidden;
}
.dc-group-right .dc-panel{border-radius:0 24px 24px 0;border-left:none}
.dc-group-left .dc-panel{border-radius:24px 0 0 24px;border-right:none}

.dc-title{font-family:'Lilita One',cursive;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.95);text-align:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.28);margin-bottom:10px;width:100%}
.dc-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-height:136px;width:100%}
.dc-img{width:142px;max-height:150px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));animation:dcBounce 2.2s ease-in-out infinite;justify-self:start}
.dc-img.dc-pop{animation:dcPop .5s cubic-bezier(.2,1.35,.32,1), dcBounce 2.2s ease-in-out .5s infinite}
.dc-number{min-width:78px;color:#fff;font-family:'Lilita One',cursive;font-size:34px;line-height:1;text-align:right;text-shadow:0 2px 8px rgba(0,0,0,.5);justify-self:end}
.dc-number.negative{color:#ef4444;text-shadow:0 2px 8px rgba(239,68,68,.5)}
.dc-label{color:rgba(255,255,255,.78);font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.7px;margin:6px 0 16px;text-transform:uppercase}
.dc-btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;margin-bottom:7px}
.dc-btn{
  border:1.5px solid rgba(255,255,255,.32);border-radius:10px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.95);font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  padding:9px 0;cursor:pointer;
  transition:background .15s;
}
.dc-btn:hover{background:rgba(255,255,255,.16)}
.dc-btn:active{transform:translateY(1px) scale(.98)}
@keyframes dcBounce{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  45%{transform:translateY(-8px) rotate(1.4deg) scale(1.03)}
  70%{transform:translateY(2px) rotate(-.6deg)}
}
@keyframes dcPop{
  0%{transform:translateY(0) scale(1) rotate(-1deg)}
  45%{transform:translateY(-14px) scale(1.12) rotate(3deg)}
  100%{transform:translateY(0) scale(1) rotate(-1deg)}
}
@media(max-width:820px){.dc-panel{width:min(240px,80vw)}}

/* ── HISTORY PANEL ────────────────────────────────── */
#historyWrap{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  z-index:500;width:100%;max-width:760px;
  padding:0 12px;
  pointer-events:none;
}
#historyPanel{
  background:rgba(0,10,40,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.1);border-bottom:none;
  border-radius:18px 18px 0 0;
  padding:0;
  pointer-events:all;
  transform:translateY(calc(100% - 36px));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  max-height:320px;
  display:flex;flex-direction:column;
}
#historyPanel.open{transform:translateY(0);}
#historyTab{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;cursor:pointer;user-select:none;flex-shrink:0;
  border-radius:18px 18px 0 0;
}
#historyTab:hover{background:rgba(255,255,255,.04);}
.hist-tab-label{font-family:'Lilita One',cursive;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);}
.hist-tab-arrow{font-size:10px;color:rgba(255,255,255,.35);transition:transform .3s;}
#historyPanel.open .hist-tab-arrow{transform:rotate(180deg);}
#historyBody{
  display:flex;gap:10px;padding:0 12px 14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  flex:1;
}
#historyBody::-webkit-scrollbar{height:4px;}
#historyBody::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:2px;}
#historyBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px;}
.hist-col{
  flex:0 0 180px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:6px;
}
.hist-col-title{
  font-family:'Lilita One',cursive;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.4);text-align:center;
  padding:6px 0 4px;border-bottom:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.hist-list{
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;max-height:220px;
  padding-right:2px;
}
.hist-list::-webkit-scrollbar{width:3px;}
.hist-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
.hist-entry{
  display:flex;align-items:center;gap:5px;
  padding:4px 6px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.hist-dots{display:flex;gap:3px;align-items:center;}
.hist-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.3);}
.hist-dot.red{background:#ff1744;}.hist-dot.orange{background:#ff6d00;}.hist-dot.yellow{background:#ffea00;}.hist-dot.green{background:#00e676;}.hist-dot.blue{background:#2979ff;}.hist-dot.purple{background:#d500f9;}
.hist-time{font-family:'Nunito',sans-serif;font-size:9px;font-weight:700;color:rgba(255,255,255,.25);margin-left:auto;white-space:nowrap;}
.hist-empty{font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,.2);text-align:center;padding:16px 0;letter-spacing:1px;}

.sound-btn{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 10px;backdrop-filter:blur(10px);cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:1px;white-space:nowrap;user-select:none;transition:background .2s,opacity .2s}
.sound-btn:hover{background:rgba(0,0,0,.4)}
.sound-btn.muted{opacity:.5}
.sound-toggle-track{width:28px;height:16px;border-radius:8px;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.35);position:relative;flex-shrink:0;transition:background .25s,border-color .25s}
.sound-btn:not(.muted) .sound-toggle-track{background:#fdd835;border-color:#fdd835}
.sound-toggle-thumb{width:10px;height:10px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.sound-btn:not(.muted) .sound-toggle-thumb{transform:translateX(12px)}

/* ── THEME PICKER ─────────────────────────────────── */
.theme-wrap{position:fixed;top:14px;right:14px;z-index:9999;display:flex;align-items:center;gap:8px}
.theme-btn{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 12px;backdrop-filter:blur(10px);cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:1px;white-space:nowrap;user-select:none;transition:background .2s,color .3s,border-color .3s}
.theme-btn:hover{background:rgba(0,0,0,.4)}
.theme-dropdown{position:absolute;top:calc(100% + 6px);right:0;display:flex;flex-direction:column;gap:4px;background:rgba(20,20,40,.95);border:1.5px solid rgba(255,255,255,.15);border-radius:14px;padding:6px;min-width:120px;backdrop-filter:blur(16px);opacity:0;pointer-events:none;transform:translateY(-8px) scale(.95);transform-origin:top right;transition:opacity .2s ease,transform .2s ease}
.theme-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.theme-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:rgba(255,255,255,.7);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;letter-spacing:.5px;transition:background .12s,color .12s}
.theme-opt:hover{background:rgba(255,255,255,.12);color:#fff}
.theme-opt.active{background:rgba(255,255,255,.18);color:#fff}

/* ── LIGHT THEME ──────────────────────────────────── */
body.light{background:linear-gradient(160deg,#dbeafe 0%,#ede9fe 40%,#fce7f3 70%,#ecfdf5 100%)!important}
body.light #bgGlow{opacity:.35!important;filter:hue-rotate(30deg) saturate(.7)}
body.light #bgCanvas{opacity:.22!important}
body.light #startScreen{background:linear-gradient(135deg,#667eea,#764ba2)!important}
body.light #rollOverlay{background:linear-gradient(135deg,#ede9fe,#ddd6fe)!important}
body.light .roll-msg{color:#4c1d95!important;text-shadow:2px 3px 0 rgba(100,60,200,.2)!important}
body.light .roll-ghost{background:rgba(167,139,250,.3)!important;border-color:rgba(124,58,237,.5)!important}
body.light .follow-ticker-inner{color:rgba(80,50,180,.65)!important}
body.light .card{background:rgba(255,255,255,.88)!important;border-color:rgba(167,139,250,.5)!important;box-shadow:0 16px 48px rgba(109,40,217,.1)!important}
body.light .card-title{color:#2d1b69!important;text-shadow:1px 2px 0 rgba(100,60,200,.1)!important}
body.light .card-subtitle{color:#7c5cbf!important}
body.light .bongo-label{color:rgba(100,70,200,.45)!important}
body.light .card-follow{color:#5b21b6!important}
body.light .card-follow-handle{color:#7c3aed!important}
body.light .btn-roll{background:linear-gradient(135deg,#a78bfa,#7c3aed)!important;border-bottom-color:#5b21b6!important;color:#fff!important}
body.light .btn-mega{background:linear-gradient(135deg,#f472b6,#a78bfa,#60a5fa)!important;background-size:200% 200%!important}
body.light .colors-info{background:rgba(237,233,254,.8)!important;color:#5b41a0!important;border-color:rgba(167,139,250,.3)!important}
body.light .dropdown{background:rgba(255,255,255,.95)!important;color:#2d1b69!important;border-color:rgba(167,139,250,.4)!important}
body.light .theme-btn{background:rgba(100,80,200,.12)!important;border-color:rgba(100,80,200,.3)!important;color:#2d1b69!important}
body.light .theme-dropdown{background:rgba(250,248,255,.97)!important;border-color:rgba(167,139,250,.3)!important}
body.light .theme-opt{color:rgba(60,30,120,.7)!important}
body.light .theme-opt:hover{background:rgba(120,80,220,.08)!important;color:#2d1b69!important}
body.light .theme-opt.active{background:rgba(120,80,220,.14)!important;color:#2d1b69!important}
body.light .trade-ref{background:rgba(237,233,254,.7)!important;border-color:rgba(167,139,250,.35)!important}
body.light .tr-title{color:rgba(80,50,160,.55)!important}
body.light .tr-row{background:rgba(255,255,255,.7)!important;border-color:rgba(167,139,250,.15)!important}
body.light .tr-color{color:#2d1b69!important}
body.light .tr-trade{color:rgba(100,70,180,.55)!important}

/* ── DARK THEME ───────────────────────────────────── */
body.dark{background:#0b0b18!important}
body.dark #bgGlow{opacity:.06!important}
body.dark #bgCanvas{opacity:.12!important}
body.dark #startScreen{background:#0b0b18!important}
body.dark .start-title{text-shadow:0 0 30px rgba(167,139,250,.35),3px 4px 0 rgba(0,0,0,.9)!important}
body.dark #rollOverlay{background:rgba(6,3,16,.97)!important}
body.dark .roll-ghost{background:rgba(30,15,60,.8)!important;border-color:rgba(124,58,237,.5)!important}
body.dark .follow-ticker-inner{color:rgba(167,139,250,.4)!important}
body.dark .card{background:rgba(13,10,30,.9)!important;border-color:rgba(124,58,237,.28)!important;box-shadow:0 8px 32px rgba(0,0,0,.5)!important}
body.dark .card-title{color:#e2d9ff!important;text-shadow:2px 3px 0 rgba(0,0,0,.7)!important}
body.dark .card-subtitle{color:rgba(167,139,250,.5)!important}
body.dark .bongo-label{color:rgba(167,139,250,.22)!important}
body.dark .card-follow{color:rgba(167,139,250,.45)!important}
body.dark .card-follow-handle{color:rgba(196,181,253,.55)!important}
body.dark .btn-roll{background:linear-gradient(135deg,#6d28d9,#4c1d95)!important;border-bottom-color:#2e1065!important;color:#ddd6fe!important}
body.dark .btn-mega{background:linear-gradient(135deg,#be185d,#7c3aed,#0e7490)!important;background-size:200% 200%!important}
body.dark .colors-info{background:rgba(13,10,30,.75)!important;color:rgba(167,139,250,.5)!important;border-color:rgba(124,58,237,.14)!important}
body.dark .dropdown{background:rgba(16,10,36,.95)!important;color:#c4b5fd!important;border-color:rgba(124,58,237,.22)!important}
body.dark .theme-btn{background:rgba(124,58,237,.16)!important;border-color:rgba(124,58,237,.32)!important;color:#c4b5fd!important}
body.dark .trade-ref{background:rgba(10,6,26,.7)!important;border-color:rgba(124,58,237,.18)!important}
body.dark .tr-title{color:rgba(167,139,250,.32)!important}
body.dark .tr-row{background:rgba(124,58,237,.05)!important;border-color:rgba(124,58,237,.1)!important}
body.dark .tr-color{color:rgba(220,210,255,.78)!important}
body.dark .tr-trade{color:rgba(167,139,250,.32)!important}

/* ── ANNOUNCE BANNER ──────────────────────────────── */
.announce-banner{position:fixed;bottom:-90px;left:0;right:0;z-index:8888;display:flex;align-items:center;gap:12px;padding:14px 20px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:bottom .5s cubic-bezier(.34,1.28,.64,1);border-top:1.5px solid rgba(255,255,255,.2)}
.announce-banner.show{bottom:0}
.announce-banner.default{background:rgba(10,20,60,.82);color:#fff}.announce-banner.green{background:rgba(0,80,30,.85);color:#86efac}.announce-banner.red{background:rgba(100,0,20,.85);color:#fca5a5}.announce-banner.yellow{background:rgba(80,60,0,.85);color:#fde68a}.announce-banner.purple{background:rgba(60,0,100,.85);color:#d8b4fe}
.announce-icon{font-size:20px;flex-shrink:0;animation:iconPulse 1.5s ease-in-out infinite alternate}
@keyframes iconPulse{from{transform:scale(1)}to{transform:scale(1.2)}}
.announce-text{flex:1;letter-spacing:.5px;line-height:1.4}
.announce-close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:8px;color:inherit;font-size:13px;font-weight:800;padding:4px 10px;cursor:pointer;flex-shrink:0;transition:background .15s}
.announce-close:hover{background:rgba(255,255,255,.28)}

@media(max-width:520px){.card{padding:14px 12px 18px}.dice{width:82px;height:82px;border-radius:14px}.dice-dot{width:13px;height:13px}.roll-ghost{width:80px;height:80px;border-radius:14px}.dropdowns{flex-direction:column}}

/* ── COLOR PANEL ── */
.block-ref{position:fixed;left:14px;top:14px;display:flex;flex-direction:column;gap:6px;background:rgba(0,30,80,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.2);border-radius:18px;padding:12px 10px;min-width:130px;z-index:9999;transform:translateX(0);opacity:1;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.block-ref.hidden{transform:translateX(calc(-100% - 20px));opacity:0;pointer-events:none}
.bl-title{font-family:'Lilita One',cursive;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:2px}
.bl-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:10px;background:rgba(0,0,0,.2);border:1.5px solid rgba(255,255,255,.07);cursor:pointer;transition:background .15s,border-color .15s,transform .1s;user-select:none}
.bl-row:hover{background:rgba(255,255,255,.08);transform:scale(1.03)}
.bl-row.blocked{background:rgba(0,0,0,.45);border-color:rgba(255,80,80,.4)}
.bl-sq{width:24px;height:24px;border-radius:6px;flex-shrink:0;border:2px solid rgba(255,255,255,.5);transition:filter .2s,opacity .2s}
.bl-row.blocked .bl-sq{filter:grayscale(1) brightness(.5);opacity:.55}
.bl-sq.red{background:#ff1744;box-shadow:0 0 7px rgba(255,23,68,.7)}.bl-sq.orange{background:#ff6d00;box-shadow:0 0 7px rgba(255,109,0,.7)}.bl-sq.yellow{background:#ffea00;box-shadow:0 0 7px rgba(255,234,0,.6)}.bl-sq.green{background:#00e676;box-shadow:0 0 7px rgba(0,230,118,.7)}.bl-sq.blue{background:#2979ff;box-shadow:0 0 7px rgba(41,121,255,.7)}.bl-sq.purple{background:#d500f9;box-shadow:0 0 7px rgba(213,0,249,.7)}
.bl-label{font-family:'Lilita One',cursive;font-size:12px;color:rgba(255,255,255,.9);letter-spacing:.3px;line-height:1;flex:1}
.bl-row.blocked .bl-label{color:rgba(255,255,255,.35);text-decoration:line-through}
.bl-ban{font-size:14px;line-height:1;opacity:0;transition:opacity .2s}
.bl-row.blocked .bl-ban{opacity:1}
body.light .block-ref{background:rgba(237,233,254,.7)!important;border-color:rgba(167,139,250,.35)!important}
body.light .bl-label{color:#2d1b69!important}
body.light .bl-title{color:rgba(80,50,160,.55)!important}
body.light .bl-row{background:rgba(255,255,255,.7)!important;border-color:rgba(167,139,250,.15)!important}
body.light .bl-row.blocked{background:rgba(200,200,220,.5)!important}
body.dark .block-ref{background:rgba(10,6,26,.7)!important;border-color:rgba(124,58,237,.18)!important}
body.dark .bl-row{background:rgba(124,58,237,.05)!important;border-color:rgba(124,58,237,.1)!important}
body.dark .bl-row.blocked{background:rgba(0,0,0,.6)!important;border-color:rgba(239,68,68,.3)!important}
body.dark .bl-label{color:rgba(220,210,255,.78)!important}
body.dark .bl-title{color:rgba(167,139,250,.32)!important}

/* ── DRAGGABLE / SCALABLE PANELS ───────────────────── */
/* Moving only works from the title/text bar (.dnd-handle) and always
   moves the plain .dnd-frame wrapper, never just the content inside,
   so the panel's box and its content always travel together.
   Resizing only works via the small grip icon (.dnd-resize-grip),
   which sits on the frame itself (not inside the scaled content), so
   it never shrinks and stays easy to grab. Resizing applies
   transform:scale() to the panel's own element, which never disturbs
   its internal layout — it scales like a picture, in proportion,
   with nothing cropped or reflowed. */
.dnd-frame{box-sizing:border-box}
.dnd-panel{overflow:hidden;position:fixed}
#historyPanel{position:relative;box-sizing:border-box}
.dnd-scale-wrap{transform-origin:top left;will-change:transform}
.dnd-handle{
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.dnd-handle:active{cursor:grabbing}
.dnd-resize-grip{
  position:absolute;
  right:6px;top:6px;
  width:22px;height:22px;
  line-height:22px;
  font-size:15px;
  text-align:center;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.28);
  opacity:.6;
  cursor:nwse-resize;
  border-radius:7px;
  z-index:5;
  transition:opacity .15s,background .15s;
}
.dnd-resize-grip:hover{opacity:1;background:rgba(0,0,0,.45)}

/* Horizontal-only stretch handles (left/right edges) — used on the
   COLOR DICE table so it can be widened/narrowed sideways, letting
   the dice reflow into more or fewer per row. Independent from the
   diagonal .dnd-resize-grip (which scales width+height together). */
.dnd-resize-h-grip{
  position:absolute;
  top:50%;
  width:16px;height:64px;
  margin-top:-32px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.28);
  font-size:13px;
  border-radius:9px;
  opacity:0;
  cursor:ew-resize;
  z-index:5;
  transition:opacity .15s,background .15s;
  -webkit-user-select:none;user-select:none;
}
.dnd-resize-h-grip::before{content:'⋮⋮'}
.dnd-resize-h-grip.left{left:4px}
.dnd-resize-h-grip.right{right:4px}
.dnd-panel:hover .dnd-resize-h-grip{opacity:.55}
.dnd-resize-h-grip:hover{opacity:1!important;background:rgba(0,0,0,.5)}
.dnd-dragging{
  transition:none!important;
  opacity:.94;
  box-shadow:0 24px 60px rgba(0,0,0,.55)!important;
}
@media(max-width:820px){
  .dnd-resize-grip{display:none}
  .dnd-resize-h-grip{display:none}
}


/* ── THEMES (reskin the main chrome; body bg is set inline by JS) ── */
@font-face{
  font-family:'DeathNoteFont';
  src:url('assets/fonts/deathnote_font.ttf') format('truetype');
  font-display:swap;
}

/* Death Note: plain black "book cover" look — side panels, the
   COLOR DICE title and the LAST DODEP button are hidden; remaining
   text uses the handwritten Death Note font; dice are darkened. */
body.theme-deathnote #rulePanel,
body.theme-deathnote #colorsPanel{
  display:none!important;
}
body.theme-deathnote .card-title{
  display:none!important;
}
.dn-title-img{display:none}
body.theme-deathnote .dn-title-img{
  display:block;
  width:min(380px,72%);
  margin:16px auto 6px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));
}
body.theme-deathnote .dice-area{
  transform:translateX(-22px);
}
body.theme-deathnote #btnRoll{
  display:none!important;
}
body.theme-deathnote .card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.theme-deathnote .card::before{display:none!important}
body.theme-deathnote .dc-panel{
  background:rgba(10,10,10,.55)!important;
  border-color:rgba(255,255,255,.25)!important;
  box-shadow:0 8px 40px rgba(0,0,0,.6)!important;
}
body.theme-deathnote .card-subtitle,
body.theme-deathnote .colors-info,
body.theme-deathnote .dc-title,
body.theme-deathnote .enter-hint,
body.theme-deathnote .dropdown{
  font-family:'DeathNoteFont','Lilita One',cursive!important;
  color:rgba(255,255,255,.82)!important;
  letter-spacing:1px;
}
body.theme-deathnote #btnRoll2,body.theme-deathnote #btnFastRoll{
  font-family:'DeathNoteFont','Lilita One',cursive!important;
  background:linear-gradient(135deg,#050505,#1c1c1c,#050505)!important;
  background-size:200% 200%!important;
  border-color:rgba(255,255,255,.3)!important;
  color:#fff!important;
  text-shadow:0 0 10px rgba(255,255,255,.35)!important;
}
body.theme-deathnote .follow-ticker-inner{
  font-family:'DeathNoteFont','Lilita One',cursive!important;
  color:rgba(255,255,255,.45)!important;
}
/* darker, muted dice — matches the black-cover mood instead of
   bright candy colors */
body.theme-deathnote .dice[data-color]{
  filter:brightness(.5) saturate(.75)!important;
}
body.theme-deathnote .dice{
  border-color:rgba(255,255,255,.35)!important;
}


body.theme-kon .card,
body.theme-kon .trade-ref,
body.theme-kon .dc-panel{
  background:rgba(255,235,200,.16)!important;
  border-color:rgba(255,200,140,.55)!important;
  box-shadow:0 8px 40px rgba(255,180,90,.2),inset 0 1.5px 0 rgba(255,255,255,.3)!important;
}
body.theme-kon .card-title{color:#8a4b12!important;text-shadow:0 0 16px rgba(255,214,140,.9),2px 3px 0 rgba(255,255,255,.5)!important}
body.theme-kon .card-subtitle{color:rgba(150,90,30,.85)!important}
body.theme-kon #btnRoll,body.theme-kon #btnRoll2,body.theme-kon #btnFastRoll{
  background:linear-gradient(135deg,#ffd9a0,#ff9ecb,#ffe29a,#ffd9a0)!important;
  background-size:200% 200%!important;
  border-color:rgba(255,255,255,.7)!important;
  color:#7a3a10!important;
  text-shadow:none!important;
}
body.theme-kon .follow-ticker-inner{color:rgba(150,90,30,.6)!important}

/* wanzex — clean niche white theme: soft paper-white panels,
   graphite text, a single understated accent, gentle shadows. */
body.theme-wanzex .card,
body.theme-wanzex .trade-ref,
body.theme-wanzex .dc-panel{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(20,20,30,.08)!important;
  box-shadow:0 20px 60px rgba(20,20,40,.12),inset 0 1.5px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
body.theme-wanzex .card-title{
  color:#1c2230!important;
  text-shadow:none!important;
}
body.theme-wanzex .card-subtitle{color:rgba(30,34,48,.7)!important}
body.theme-wanzex .tr-title,
body.theme-wanzex .dc-title{color:#1c2230!important}
body.theme-wanzex .rule-num{color:#1c2230!important}
body.theme-wanzex .rule-input,
body.theme-wanzex .dropdown{
  background:rgba(20,20,40,.06)!important;
  color:#1c2230!important;
  border-color:rgba(20,20,40,.16)!important;
}
body.theme-wanzex .rule-input::placeholder{color:rgba(20,20,40,.4)!important}
body.theme-wanzex .rule-input:focus{border-bottom-color:rgba(20,20,40,.7)!important}
body.theme-wanzex .dropdown{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c2230' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
body.theme-wanzex .dropdown option{background:#fff!important;color:#1c2230!important}
body.theme-wanzex .colors-info{
  background:rgba(20,20,40,.05)!important;
  border-color:rgba(20,20,40,.12)!important;
  color:rgba(30,34,48,.85)!important;
}
body.theme-wanzex #btnRoll,body.theme-wanzex #btnRoll2,body.theme-wanzex #btnFastRoll{
  background:linear-gradient(135deg,#1c2230,#3a4258,#1c2230)!important;
  background-size:200% 200%!important;
  border-color:rgba(255,255,255,.25)!important;
  color:#fff!important;
  text-shadow:none!important;
  box-shadow:0 10px 26px rgba(20,20,40,.28)!important;
}
body.theme-wanzex .follow-ticker-inner{color:rgba(30,34,48,.5)!important}
body.theme-wanzex .dice{border-color:rgba(20,20,40,.15)!important}

/* dice counter side panels: number, label, +/- buttons, tab */
body.theme-wanzex .dc-number{color:#1c2230!important;text-shadow:none!important}
body.theme-wanzex .dc-label{color:rgba(30,34,48,.65)!important}
body.theme-wanzex .dc-btn{
  background:rgba(20,20,40,.06)!important;
  border-color:rgba(20,20,40,.14)!important;
  color:#1c2230!important;
}
body.theme-wanzex .dc-btn:hover{background:rgba(20,20,40,.12)!important}
body.theme-wanzex .dc-tab{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(20,20,30,.1)!important;
  color:#1c2230!important;
}

/* history bar */
body.theme-wanzex #historyPanel{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(20,20,30,.1)!important;
}
body.theme-wanzex .hist-tab-label{color:rgba(30,34,48,.75)!important}
body.theme-wanzex .hist-tab-arrow{color:rgba(30,34,48,.5)!important}
body.theme-wanzex .hist-time{color:rgba(30,34,48,.4)!important}
body.theme-wanzex .hist-empty{color:rgba(30,34,48,.35)!important}

/* top pill buttons: Фон / Темы / TOP ЛУДИКОВ / sound toggle —
   solid dark pills so they stay readable over the light page bg */
body.theme-wanzex .sound-btn{
  background:rgba(28,34,48,.92)!important;
  border-color:rgba(20,20,40,.25)!important;
  color:#fff!important;
}
body.theme-wanzex .sound-btn:hover{background:rgba(45,52,70,.95)!important}
body.theme-wanzex .top-ludikov-panel{
  background:rgba(28,34,48,.95)!important;
  border-color:rgba(20,20,40,.25)!important;
}


/* ── Death Note: pen-write reveal for Fast Roll dice ── */
.dn-pen{
  position:fixed;
  font-size:22px;
  z-index:400;
  pointer-events:none;
  transform:rotate(-25deg);
  animation:dnPenBob .28s ease-in-out infinite alternate;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
@keyframes dnPenBob{
  0%{transform:rotate(-25deg) translateY(0)}
  100%{transform:rotate(-18deg) translateY(-5px)}
}
.dice.dn-writing{clip-path:inset(0 100% 0 0);transition:none!important}
.dice.dn-write-in{clip-path:inset(0 0% 0 0);transition:clip-path .36s ease-out!important}

/* ── Top-left "TOP ЛУДИКОВ" slide-out button ── */
.top-ludikov-wrap{position:fixed;top:14px;left:14px;z-index:9999}
.top-ludikov-panel{
  margin-top:8px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  border-radius:14px;
  background:rgba(0,0,0,.55);
  border:1.5px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:max-height .3s ease,opacity .25s ease,padding .3s ease;
}
.top-ludikov-panel.open{
  max-height:100px;
  opacity:1;
  padding:14px 18px;
}
.top-ludikov-soon{
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:15px;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.5px;
}