@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');
:root{--white:#f6f6f6;--panel:#0b0c0de8;--orange:#ffa309}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:"Baloo 2","Arial Black",Arial,sans-serif}
body{overflow-x:hidden}.scene{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(#000 0 52%,#252827 52% 65%,#6b5e4e 65% 100%)}
.scene:before{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:
repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px),
repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 28px,transparent 28px 58px);opacity:.9}
.cloud{position:absolute;background:#eee;width:180px;height:45px;z-index:0;filter:drop-shadow(0 8px 0 #c9c9c9)}.cloud:before,.cloud:after{content:"";position:absolute;background:#f7f7f7}.cloud:before{width:85px;height:70px;left:25px;top:-34px}.cloud:after{width:75px;height:55px;left:95px;top:-24px}.c1{left:2%;top:0}.c2{left:36%;top:42px}.c3{right:9%;top:8px}.c4{left:58%;top:170px;transform:scale(.7)}
.mountain{position:absolute;bottom:27%;width:310px;height:250px;background:linear-gradient(145deg,#315536,#17231a 65%);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.75}.m1{left:5%}.m2{right:5%;transform:scaleX(-1)}
.ground{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(#4d4d4b 0 17%,#6b5d4e 17% 100%);border-top:2px solid #292a29}.ground:after{content:"";position:absolute;left:0;right:0;top:38%;height:8%;background:repeating-linear-gradient(90deg,#9b8872 0 44px,#766553 44px 50px);opacity:.8}
.top{height:153px;position:relative;z-index:2;text-align:center;padding-top:22px}.logo{font-size:70px;line-height:1;font-weight:900;font-style:italic;letter-spacing:-5px;color:#ffb513;text-shadow:2px 2px 0 #fff,4px 5px 0 #8c4a00,7px 9px 0 #291500,0 13px 20px #000}.logo span{color:#ffbd14}
.online{position:absolute;right:16px;top:18px;background:#080d0ae8;border-radius:18px;padding:8px 14px;font:700 12px Arial}.online i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#48e991;margin-right:6px}.online b{color:#fff}
.layout{position:relative;z-index:2;width:1060px;margin:0 auto;display:grid;grid-template-columns:250px 520px 250px;gap:20px}.stream-panel,.game-panel{border:3px solid #efefef;border-radius:15px;background:rgba(7,8,9,.86);box-shadow:0 8px 24px #000c}.stream-panel{padding:10px 14px}.stream-panel h2{text-align:center;margin:4px 0 15px;font-size:15px;font-weight:900}.card{height:61px;margin:7px 0;border:2px solid #888;border-radius:10px;background:linear-gradient(90deg,#141619,#0d0f10);display:grid;grid-template-columns:38px 1fr 18px;align-items:center;gap:8px;padding:7px 9px}.card:first-child{border-color:#ff2020;background:linear-gradient(90deg,#391313,#171313)}.avatar{width:38px;height:38px;border-radius:50%;border:1px solid #ddd;display:grid;place-items:center;font-size:10px;font-weight:900;background:linear-gradient(135deg,#5b2cb7,#08080a)}.av2{background:linear-gradient(135deg,#8126a8,#111)}.av3{background:linear-gradient(135deg,#37a72e,#ec3d27)}.av4{background:linear-gradient(135deg,#b78635,#34200a)}.av5{background:linear-gradient(135deg,#ef8b18,#1b1b1b)}.av6{background:linear-gradient(135deg,#61bce9,#20205b)}.av7{background:#050505}.av8{background:linear-gradient(135deg,#7e7e7e,#222)}.card b{font-size:12px;line-height:1}.card small{display:block;color:#999;font:700 9px Arial;margin-top:3px}.verified{color:#ffd000;font-size:15px}
.game-panel{padding:16px 20px 12px;min-height:710px;text-align:center}.game-panel h1{font-size:31px;margin:0 0 25px;font-weight:900;text-shadow:2px 3px 0 #727272}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.controls select{height:51px;border:3px solid #aaa;border-radius:9px;background:#f5f5f5;color:#111;padding:0 11px;font:900 15px "Baloo 2",Arial;outline:none}.dice-stage{height:150px;display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}.die-wrap{width:78px;height:78px;perspective:500px}.die{width:76px;height:76px;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.12,.8,.25,1)}.face{position:absolute;inset:0;border:7px solid white;border-radius:17px;backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 5px 10px #0008}.face:after{content:"";width:16px;height:16px;border-radius:50%;background:#fff}.front{transform:translateZ(38px)}.back{transform:rotateY(180deg) translateZ(38px)}.right{transform:rotateY(90deg) translateZ(38px)}.left{transform:rotateY(-90deg) translateZ(38px)}.top{transform:rotateX(90deg) translateZ(38px)}.bottom{transform:rotateX(-90deg) translateZ(38px)}
.verify{font:14px Arial;margin:3px 0 10px}.verify b{font-weight:900}.roll{height:55px;width:100%;border:3px solid #fff;border-radius:10px;background:linear-gradient(#ffdd32,#ff9b00);color:#fff;font:900 25px "Baloo 2",Arial;text-shadow:0 2px #9a5700;box-shadow:0 4px 0 #a85e00;cursor:pointer}.roll:active{transform:translateY(3px);box-shadow:0 1px 0 #a85e00}
.score-box{height:114px;margin-top:18px;border:2px solid #37383b;border-radius:10px;background:#111216;display:grid;grid-template-columns:65px 120px 1fr 65px;align-items:center;padding:8px}.scale{display:flex;flex-direction:column;gap:4px;font:900 12px Arial}.scale.left{color:#ff535d}.scale.right{color:#37e77b}.scale.right{align-items:flex-end}.mini-result{height:67px;border:2px solid #555;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:3px}.mini-result span{font-size:12px}.tiny-dice{width:18px;height:36px;border-radius:3px;border:2px solid #fff;background:#d9d9d9;transform:skewY(-4deg)}.tiny-dice.b{background:#ffae16}.score-box>strong{font:900 38px Arial;color:#fff}.stats{display:flex;justify-content:center;gap:9px;margin:17px 0 10px}.stats span{padding:7px 12px;border:1px solid #666;border-radius:13px;background:#151719;font:700 10px Arial}.stats b{color:#ffd900}.goal{border:1px solid #06758d;border-radius:9px;background:#061c22;padding:8px 12px;text-align:left;font:10px Arial}.goal>div:first-child{display:flex;justify-content:space-between}.goal strong{color:#11c4e6}.bar{height:9px;border-radius:8px;background:#091114;margin:7px 0;overflow:hidden}.bar i{display:block;width:28%;height:100%;background:#13bce4}.goal small{font-size:8px;color:#80989a}.goal em{float:right;font-style:normal}.possible{font:15px Arial;margin-top:16px}.possible b{font-weight:900}.possible .r{color:#ff4040}.possible .o{color:#ff9f00}.possible .y{color:#ffd900}.possible .g{color:#18d36e}.possible .b{color:#3b8cff}.possible .p{color:#c038e8}.blur{width:100%;height:40px;margin-top:13px;border:0;border-radius:20px;background:#242729;color:#fff;font:900 12px Arial}
footer{position:fixed;z-index:9;left:0;right:0;bottom:0;height:49px;background:#080909ed;border-top:2px solid #777;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:900 10px Arial}footer button{background:#111;color:#fff;border:1px solid #ddd;border-radius:8px;padding:7px 13px;font-weight:900}footer>div{display:flex;gap:7px;align-items:center}
@media(max-width:1100px){.layout{transform-origin:top center;transform:scale(.9);margin-bottom:-70px}}@media(max-width:800px){.layout{display:block;width:min(520px,calc(100% - 16px));transform:none}.stream-panel{display:none}.top{height:120px}.logo{font-size:48px}.game-panel{min-height:auto}.online{top:10px}.scene{min-height:100vh}}

/* Reference-style native dropdowns: compact, white, bold, blue selection */
.controls select{font-family:Arial Black,Arial,sans-serif;appearance:auto;-webkit-appearance:auto}
.controls select:focus{outline:2px solid #111;outline-offset:-2px}
.picker-wrap{position:relative;width:104px;height:68px;margin:2px auto 4px}
.item-picker-toggle{width:104px;height:68px;border:2px solid #777;border-radius:10px;background:#0d0f11;color:#fff;display:flex;align-items:center;justify-content:center;gap:2px;cursor:pointer;box-shadow:inset 0 0 0 1px #111}
.item-picker-toggle img{width:35px;height:48px;object-fit:contain;image-rendering:auto}
.item-picker-toggle .caret{font-size:14px;color:#ddd;margin-right:2px}
.item-picker{position:absolute;z-index:20;left:0;top:70px;width:104px;display:none;background:#101216;border:2px solid #4b4d50;border-radius:10px;overflow:hidden;box-shadow:0 10px 20px #000}
.item-picker.open{display:block}
.item-picker button{display:block;width:100%;height:78px;background:#101216;border:0;border-bottom:1px solid #34363a;cursor:pointer;padding:4px}
.item-picker button:last-child{border-bottom:0}
.item-picker button:hover{background:#202328}
.item-picker img{width:100%;height:100%;object-fit:contain}