/* SmilhY Dice v5.3 — cohesive production Dice polish.
 * Scope is Dice only: the rest of the home site is unchanged.
 * Visual movements never determine winnings; that remains with Supabase RPC.
 */
@media(min-width:1160px){
 body:has(#dice-screen:not([hidden])) .app-shell{width:calc(100% - 44px);max-width:1490px}
 body:has(#dice-screen:not([hidden])) .page-content{padding:18px 20px}
}
@media(min-width:901px) and (max-width:1159px){
 body:has(#dice-screen:not([hidden])) .app-shell{max-width:calc(100% - 24px);width:calc(100% - 24px)}
}
#dice-screen .dicepro{--dp-accent:#2af1c5;--dp-cyan:#39dfff;--dp-purple:#9566ff;--dp-text:#f7f9ff;--dp-muted:#b2c5ee;color:var(--dp-text);padding-top:9px;line-height:1.4;font-family:Inter,'Segoe UI',system-ui,sans-serif}
#dice-screen .dp-pagebar{min-height:55px;padding-bottom:15px;gap:12px}
#dice-screen .dp-grid{grid-template-columns:minmax(285px,26%) minmax(0,1fr) minmax(255px,23%);gap:13px;align-items:stretch}
#dice-screen .dp-card{
 border:1px solid rgba(106,133,255,.78);border-radius:15px;
 background:linear-gradient(126deg,rgba(190,224,255,.08),transparent 32%),linear-gradient(140deg,rgba(18,39,100,.88),rgba(5,16,49,.95) 70%,rgba(10,17,58,.94));
 box-shadow:inset 0 1px 0 rgba(245,250,255,.23),inset 0 0 20px rgba(74,73,220,.09),0 0 20px rgba(41,87,245,.11),0 14px 40px rgba(0,4,30,.43);
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
#dice-screen .dp-controls{padding:21px 20px;gap:14px;justify-content:flex-start;min-height:575px}
#dice-screen .dp-intro h1{font-weight:880;font-size:clamp(24px,2vw,31px);letter-spacing:-.046em;line-height:1.13;margin:10px 0 7px}
#dice-screen .dp-intro em{color:#2cf2bf;text-shadow:0 0 17px #00ffa344}
#dice-screen .dp-intro p{font-size:12px;color:#c2cbed}
#dice-screen .dp-chip{font-size:9px;color:#b4c9ff;letter-spacing:.09em}
#dice-screen .dp-segment{background:linear-gradient(135deg,rgba(1,13,43,.98),rgba(4,17,48,.92));border:1px solid rgba(67,92,181,.42);border-radius:9px;gap:3px;padding:3px}
#dice-screen .dp-segment>button{min-height:39px;font-size:11px;font-weight:780;letter-spacing:0;text-transform:none;border-radius:7px;color:#c6cff0}
#dice-screen .dp-segment>button.selected{background:linear-gradient(109deg,rgba(0,85,89,.65),rgba(0,42,68,.85));border:1px solid #26ffc7;box-shadow:inset 0 1px rgba(204,255,254,.15),0 0 14px rgba(0,235,189,.31);color:#f4fffe}
#dice-screen .dp-row{align-items:center;letter-spacing:0;color:#b3c8ef;font-size:11px}
#dice-screen .dp-row strong{font-size:17px;font-variant-numeric:tabular-nums;color:#f9fbff;letter-spacing:-.02em}
#dice-screen .dp-controls input[type=range]{accent-color:#2bf1c2;min-height:17px;margin:1px 0 4px;cursor:pointer}
#dice-screen .dp-stake-title{font-size:11px}
#dice-screen .dp-stake{border:1px solid rgba(112,154,248,.58);background:linear-gradient(135deg,#091e4c,#081437);min-height:55px;border-radius:10px;box-shadow:inset 0 1px 4px #0006}
#dice-screen .dp-stake button{background:linear-gradient(#264883,#1a3368);border:1px solid rgba(127,166,255,.35);border-radius:7px;width:38px;font-weight:750;box-shadow:inset 0 1px rgba(255,255,255,.09)}
#dice-screen .dp-stake input{font-size:21px;font-weight:850}
#dice-screen .dp-quick button{background:linear-gradient(#1f3e79,#142a56);border:1px solid rgba(107,148,238,.52);color:#e5efff;min-height:32px;font-size:11px;border-radius:8px}
#dice-screen .dp-quick button:hover,#dice-screen .dp-secondary button:hover{border-color:#4cebd7;box-shadow:0 0 18px #22b7ff35}
#dice-screen .dp-outcome{margin-top:3px;border-top:1px solid rgba(120,150,234,.25);font-size:11px}
#dice-screen .dp-outcome strong{font-size:14px;color:#36ffbd;text-shadow:0 0 10px #00edb650}
#dice-screen .dp-gradient{min-height:67px;background:linear-gradient(105deg,#5df4cd 0%,#98eaaa 30%,#fce59e 54%,#ffabc1 77%,#b787fa 100%);border:1px solid rgba(250,255,255,.50);box-shadow:inset 0 1px 0 #ffffffbd,0 0 23px rgba(103,255,227,.27),0 10px 23px rgba(27,202,200,.14);border-radius:10px}
#dice-screen .dp-gradient strong{color:#09112b;font-size:16px;font-weight:950;letter-spacing:.027em}
#dice-screen .dp-gradient small{font-size:10px;font-weight:550;color:#27314f}
#dice-screen .dp-secondary button{border:1px solid rgba(107,150,236,.50);background:linear-gradient(#1b3873,#102854);border-radius:8px;min-height:39px;font-size:11px}
#dice-screen .dp-disclaimer{color:#a3b4d7;font-size:10px;line-height:1.5;margin-top:0}
/* Stage composition is calibrated to 550–700px, with legible readout and space for HUD. */
#dice-screen .dp-stage{min-height:575px;padding:17px 19px 19px;overflow:hidden;isolation:isolate;
 background:radial-gradient(ellipse at 49% 43%,rgba(54,51,215,.39),transparent 61%),linear-gradient(146deg,rgba(9,29,84,.96),rgba(8,13,52,.99));
 border:1px solid rgba(102,119,255,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 35px rgba(71,69,252,.14),0 0 23px rgba(90,61,246,.25),0 17px 34px rgba(0,2,27,.52)
}
#dice-screen .dp-stage:before{content:"";position:absolute;inset:0;pointer-events:none;mask-image:none;opacity:1;background:
 radial-gradient(ellipse at 48% 56%,transparent 40%,#070d30c9 99%),url('assets/dice-cosmic-arena.svg') center 23%/auto 86% no-repeat;
 z-index:0}
#dice-screen .dp-stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,#0000 66%,#08143b77 85%,#0000 97%),radial-gradient(ellipse at 50% 51%,#004ee522,transparent 66%);filter:none}
#dice-screen .dp-stage-head{z-index:8;position:relative;color:#f8fbff;font-weight:850;font-size:12px;letter-spacing:.014em}
#dice-screen .dp-scene{position:relative;z-index:2;flex:1;min-height:370px;display:grid;grid-template-rows:minmax(212px,1fr) minmax(126px,auto);align-items:stretch;justify-items:center;padding:0 4px 10px;overflow:hidden}
#dice-screen .dp-scene:before{content:"";position:absolute;inset:0;z-index:0;opacity:.7;background:radial-gradient(ellipse at 50% 52%,rgba(30,123,255,.1),transparent 64%);pointer-events:none}
#dice-screen .dp-nebula{inset:-40% -20%;opacity:.35;animation-duration:44s;filter:blur(34px)}
#dice-screen .dp-cube-stage{z-index:6;position:relative;grid-row:1;width:100%;height:auto;min-height:225px;perspective:1100px;display:grid;place-items:center;transform:none;padding-top:26px}
#dice-screen .dp-cube-float{width:165px;height:165px;animation:dpFloatPremium 3.7s ease-in-out infinite}
#dice-screen .dp-cube{--dp-cube-size:157px;--dp-depth:78.5px;width:var(--dp-cube-size);height:var(--dp-cube-size);animation:dpPremiumIdle 12s ease-in-out infinite;
 filter:drop-shadow(0 7px 13px rgba(18,213,248,.45)) drop-shadow(0 0 20px rgba(116,45,254,.53));}
#dice-screen .dp-cube-face{border-radius:31px;border:2px solid rgba(85,255,255,.91);background:linear-gradient(139deg,#19466a,#041627 56%,#071033);box-shadow:inset 6px 7px 17px #81faff26,inset -14px -14px 20px #02061fa6,0 0 10px #03ffff71,0 0 22px #6847fb6b}
#dice-screen .dp-cube-face:before{border-radius:25px}
#dice-screen .dp-cube-face i{width:16%;height:16%;background:radial-gradient(circle at 33% 25%,#d2fffb,#70fff1 40%,#14ebc1 76%,#028cbe);box-shadow:0 0 17px 4px rgba(7,240,237,.72),inset -2px -2px 3px #075d8650}
#dice-screen .dp-cube-aura{position:absolute;top:36%;left:50%;width:240px;height:135px;z-index:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#30efff3d,#812aff2b 47%,transparent 76%);filter:blur(20px);pointer-events:none}
#dice-screen .dp-orbit{z-index:2;top:39%;width:min(90%,490px);height:102px;border:1px solid #56dfff91;box-shadow:0 0 13px #3f9bffae,inset 0 0 9px #187eff4c;transform:translate(-50%,-50%) rotate(-13deg);animation-duration:8s}
#dice-screen .dp-o2{width:min(97%,515px);height:145px;top:42%;border-color:#a74dff89;box-shadow:0 0 16px #a431ffc4;animation-duration:10s}
#dice-screen .dp-o3{width:min(76%,390px);height:79px;top:37%;border-color:#38f8ef78}
#dice-screen .dp-glow-floor{z-index:1;top:53%;height:85px;width:85%;background:radial-gradient(ellipse,#18c8ff70 3%,#8139ff4b 34%,transparent 69%);filter:blur(20px);animation-duration:4.1s}
#dice-screen .dp-scene-readout{z-index:7;grid-row:2;align-self:start;position:relative;width:100%;min-height:115px;flex:none;align-items:center;gap:0;justify-content:center;margin:0;padding-top:0}
#dice-screen .dp-result{margin:0;font-size:clamp(62px,5.3vw,90px);line-height:1.02;letter-spacing:.018em;font-weight:900;color:#ffa4d7;font-variant-numeric:tabular-nums;text-shadow:0 0 22px #ff56b05c,0 0 48px #f146c568;transition:color .2s,text-shadow .2s,transform .25s}
#dice-screen .dp-result.win{color:#6affdb;text-shadow:0 0 20px #0ffbd0a8,0 0 44px #09f9ed66}
#dice-screen .dp-result.lose{color:#ff719e;text-shadow:0 0 18px #fc4f9da6,0 0 35px #fb2a9666}
#dice-screen .dp-result-message{color:#ccd9fc;font-size:12px;line-height:1.4;min-height:18px;margin:3px 0 0;text-align:center}
#dice-screen .dp-roll-scale{margin-top:8px}
#dice-screen .dp-scale-bar{height:11px;border:1px solid rgba(135,179,255,.55);background:linear-gradient(90deg,#18255c,#162b4e);border-radius:20px}
#dice-screen .dp-scale-bar span{background:linear-gradient(100deg,#06cbff,#49f7c5);box-shadow:0 0 15px #33cfff80}
#dice-screen .dp-scale-bar i{height:24px;top:-7px;border-radius:6px;box-shadow:0 0 14px #d1faff}
#dice-screen .dp-scale-nums{color:#aabbe9;font-size:10px;margin-top:7px}
#dice-screen .dp-session{border-top:1px solid rgba(104,133,243,.4);margin-top:16px;padding-top:13px;gap:7px}
#dice-screen .dp-session span{color:#b0c1ee;font-size:10px;line-height:1.25}
#dice-screen .dp-session strong{font-size:clamp(12px,1.05vw,16px);font-weight:850}
#dice-screen .dp-side{gap:12px}
#dice-screen .dp-side .dp-card{padding:17px}
#dice-screen .dp-side h3{font-size:14px;letter-spacing:-.018em}
#dice-screen .dp-side-info button{border-radius:9px;box-shadow:inset 0 1px #ffffff2c,0 2px 12px #2847db3a}
#dice-screen .dp-side-feed{min-height:0}
#dice-screen .dp-side-feed .dp-win-row{min-height:55px}
#dice-screen .dp-side-tip{border-color:rgba(111,96,255,.75)}
#dice-screen .dp-history{grid-column:1/-1;padding:14px 17px 17px;min-height:0;align-self:start}
#dice-screen .dp-history-top{margin-bottom:10px}
#dice-screen .dp-history-tabs{max-width:625px}
#dice-screen .dp-history-top>span{font-size:10px;color:#a4bce9}
#dice-screen .dp-history-scroll{height:441px!important;max-height:441px!important;border:1px solid rgba(79,117,231,.45);border-radius:9px;overflow-y:auto!important;overflow-x:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
#dice-screen .dp-history table{min-width:560px}
#dice-screen .dp-history thead th{background:#17346e;position:sticky;top:0;height:35px;z-index:3;padding:8px 12px;color:#c6d6fe}
#dice-screen .dp-history tbody tr{height:39px}
#dice-screen .dp-history tbody tr:nth-child(odd){background:#152b5c76}
#dice-screen .dp-history tbody tr:nth-child(even){background:#0a194694}
#dice-screen .dp-history td{padding:9px 12px;font-size:11px;border-bottom:1px solid #6b8eff12}
#dice-screen .dp-history td.pos{color:#38ffc0}
#dice-screen .dp-history td.neg{color:#ff658e}
#dice-screen .dp-history-tabs>button{font-size:11px}
@keyframes dpFloatPremium{0%,100%{transform:translateY(-3px) rotate(-1deg)}50%{transform:translateY(-19px) rotate(1deg)}}
@keyframes dpPremiumIdle{0%,100%{transform:rotateX(-10deg) rotateY(-10deg) rotateZ(-14deg)}24%{transform:rotateX(-7deg) rotateY(9deg) rotateZ(-12deg)}53%{transform:rotateX(-14deg) rotateY(20deg) rotateZ(-8deg)}77%{transform:rotateX(-8deg) rotateY(-5deg) rotateZ(-14deg)}}
#dice-screen .dp-scene.rolling .dp-cube{animation:dpCubeRoll .53s linear infinite}
#dice-screen .dp-scene.rolling .dp-cube-float{animation:dpCubeRollFloat .4s linear infinite}
#dice-screen .dp-scene.just-settled .dp-cube{animation:dpPremiumSettle .85s cubic-bezier(.2,.86,.24,1) both}
@keyframes dpPremiumSettle{0%{transform:rotateX(72deg) rotateY(110deg) rotateZ(60deg) scale(1.08)}67%{transform:rotateX(-19deg) rotateY(-18deg) rotateZ(-18deg) scale(.94)}100%{transform:rotateX(-10deg) rotateY(-10deg) rotateZ(-14deg) scale(1)}}
@media(min-width:1200px){#dice-screen .dp-grid{grid-template-columns:minmax(305px,26%) minmax(0,1fr) minmax(270px,23%)}#dice-screen .dp-scene{min-height:369px}#dice-screen .dp-cube{--dp-cube-size:161px;--dp-depth:80.5px}}
@media(min-width:1160px) and (max-width:1350px){#dice-screen .dp-grid{grid-template-columns:minmax(265px,28%) minmax(0,1fr) minmax(240px,24%)}}
@media(max-width:1199px){#dice-screen .dp-grid{grid-template-columns:minmax(260px,35%) minmax(0,1fr)}#dice-screen .dp-stage{min-height:550px}#dice-screen .dp-history{grid-column:1/-1}#dice-screen .dp-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
@media(max-width:760px){#dice-screen .dp-grid{grid-template-columns:minmax(0,1fr)}#dice-screen .dp-stage{order:1;min-height:480px}#dice-screen .dp-controls{order:2;min-height:auto}#dice-screen .dp-history{order:3}#dice-screen .dp-side{order:4;grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}#dice-screen .dp-side-tip{grid-column:1/-1}#dice-screen .dp-scene{min-height:325px;grid-template-rows:minmax(205px,1fr) minmax(110px,auto)}#dice-screen .dp-cube-stage{min-height:195px;padding-top:17px}#dice-screen .dp-cube{--dp-cube-size:138px;--dp-depth:69px}#dice-screen .dp-cube-float{width:145px;height:145px}#dice-screen .dp-result{font-size:clamp(58px,10vw,78px)}#dice-screen .dp-history-scroll{height:437px!important;max-height:437px!important}}
@media(max-width:560px){#dice-screen .dp-grid{gap:12px}#dice-screen .dp-stage{min-height:450px;padding:15px}#dice-screen .dp-scene{min-height:305px;grid-template-rows:minmax(188px,1fr) minmax(105px,auto)}#dice-screen .dp-cube-stage{min-height:178px;padding-top:22px}#dice-screen .dp-cube{--dp-cube-size:121px;--dp-depth:60.5px}#dice-screen .dp-cube-float{width:125px;height:125px}#dice-screen .dp-cube-aura{width:190px;height:120px}#dice-screen .dp-result{font-size:clamp(52px,12vw,67px)}#dice-screen .dp-result-message{font-size:11px}#dice-screen .dp-controls{padding:18px 16px;gap:13px}#dice-screen .dp-history{padding:12px}#dice-screen .dp-history-scroll{height:429px!important;max-height:429px!important}#dice-screen .dp-side{grid-template-columns:1fr}#dice-screen .dp-side-tip{grid-column:1}#dice-screen .dp-orbit{height:84px}#dice-screen .dp-o2{height:118px}#dice-screen .dp-o3{height:74px}#dice-screen .dp-history-top{gap:8px}}
@media(prefers-reduced-motion:reduce){#dice-screen .dp-cube-float,#dice-screen .dp-cube,#dice-screen .dp-nebula,#dice-screen .dp-glow-floor,#dice-screen .dp-orbit{animation:none!important}#dice-screen .dp-cube{transform:rotateX(-10deg) rotateY(-10deg) rotateZ(-14deg)}}
/* Keep the two non-absolute scene children in ONE centered grid column. */
#dice-screen .dp-scene{grid-template-columns:minmax(0,1fr);justify-items:stretch}
#dice-screen .dp-cube-stage{width:100%;min-width:0;justify-self:stretch}
#dice-screen .dp-scene-readout{width:100%;justify-self:stretch}
/* A history with no published rolls shouldn't look like a giant blank database table. */
#dice-screen .dp-history:has(#dp-history-rows tr:only-child) .dp-history-scroll{height:112px!important;max-height:112px!important}

/* v5.4: the selected 1×–4× speed changes LIVE roll animations. */
#dice-screen .dp-scene.rolling .dp-cube{animation-duration:var(--dp-roll-duration,.53s)}
#dice-screen .dp-scene.rolling .dp-cube-float{animation-duration:var(--dp-float-roll-duration,.4s)}
#dice-screen .dp-scene.rolling .dp-orbit{animation-duration:var(--dp-orbit-roll-duration,1.4s)}