:root{
  --outline:#141824;
  --bg:#364d6d;
  --bg2:#2b3f5c;
  --surface:#f8fafc;
  --surface2:#ffffff;
  --dots:#cbd5e1;
  --text:#141824;
  --muted:#64748b;
  --accent:#a855f7;
  --accent2:#7e22ce;
  --header1:#f0d7ff;
  --header2:#b88cff;
  --header3:#8f5bf5;
  --green1:#5ee98b;
  --green2:#20c962;
  --green3:#119342;
  --blue1:#63a7ff;
  --blue2:#2f7ff2;
  --blue3:#1e56c6;
  --yellow1:#ffe66b;
  --yellow2:#ffd02e;
  --yellow3:#e9a700;
  --red1:#ff7b86;
  --red2:#ff4051;
  --red3:#d81f32;
  --shadow:#101521;
  --app-max:2200px;
  --radius:22px;
}

body[data-theme="dark"]{
  --bg:#121a27;--bg2:#090f18;--surface:#202b3d;--surface2:#172131;--dots:#3c4a60;--text:#f8fafc;--muted:#b3bfd2;
  --header1:#7f5cc1;--header2:#5e3b9b;--header3:#3d2469;
}
body[data-theme="gold"]{
  --bg:#5a4424;--bg2:#33230f;--surface:#fff9e9;--surface2:#fffdf7;--dots:#e7d59d;--text:#18130a;--muted:#756441;
  --header1:#fff0a2;--header2:#f3c53f;--header3:#d58b09;--accent:#f3b217;--accent2:#bb7800;
}
body[data-theme="custom"]{
  --header1:color-mix(in srgb,var(--accent) 35%,white 65%);
  --header2:color-mix(in srgb,var(--accent) 75%,white 25%);
  --header3:color-mix(in srgb,var(--accent) 80%,black 20%);
  --bg:color-mix(in srgb,var(--accent) 28%,#40526d 72%);
  --bg2:color-mix(in srgb,var(--accent) 16%,#202b3d 84%);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Rubik',sans-serif}
html{background:transparent}
body{
  color:var(--text);
  background-color:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.09) 2px,transparent 2px),linear-gradient(180deg,color-mix(in srgb,var(--bg) 93%,white 7%),var(--bg2));
  background-size:28px 28px,100% 100%;
  overflow-x:hidden;
  user-select:none;
  transition:background .25s ease,color .25s ease;
}
button,input,textarea{font:inherit}
button{color:inherit}
button:disabled{opacity:.5;cursor:not-allowed!important;filter:grayscale(.15)}
textarea{resize:vertical}
.hidden{display:none!important}

.app-shell{width:min(calc(100% - 28px),var(--app-max));margin:14px auto 28px}
.panel-3d,.window{border:4px solid var(--outline);box-shadow:0 8px 0 var(--shadow);border-radius:var(--radius);overflow:hidden}

.text-stroke{font-family:'Fredoka','Rubik',sans-serif;font-weight:700;color:#fff;-webkit-text-stroke:2.5px var(--outline);paint-order:stroke fill;text-shadow:0 3px 0 var(--outline);letter-spacing:.015em}

.ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}
.ico svg{width:1.18em;height:1.18em;stroke:currentColor;stroke-width:2.45;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* TOP BAR */
.topbar{
  min-height:82px;background:linear-gradient(180deg,var(--header1),var(--header2) 44%,var(--header3));display:grid;grid-template-columns:minmax(330px,.9fr) auto minmax(330px,.9fr);align-items:center;gap:18px;padding:12px 16px;position:relative;z-index:20
}
.topbar::before,.window-head::before{content:"";position:absolute;top:4px;left:14px;right:14px;height:6px;border-radius:99px;background:rgba(255,255,255,.46);pointer-events:none}
.brand-row{display:flex;align-items:center;gap:12px;min-width:0}
.brand-icon{width:52px;height:52px;border-radius:16px;border:3px solid var(--outline);box-shadow:0 4px 0 var(--outline),inset 0 3px 0 rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffe66b,#f3a600);font-size:29px;transform:rotate(-4deg)}
.brand-title{font-size:clamp(22px,1.6vw,34px);white-space:nowrap}
.brand-sub{font-size:10px;font-weight:900;letter-spacing:.12em;color:color-mix(in srgb,var(--text) 82%,transparent);margin-top:4px}
.tabs{display:flex;align-items:center;justify-content:center;gap:10px}
.tab-btn,.mini-btn,.square-btn,.btn,.seg,.close-btn{border:3px solid var(--outline);box-shadow:0 4px 0 var(--outline),inset 0 3px 0 rgba(255,255,255,.35);cursor:pointer;font-weight:900;transition:transform .12s cubic-bezier(.2,1.5,.4,1),filter .12s ease,box-shadow .12s ease}
.tab-btn{height:48px;padding:0 18px;border-radius:14px;background:linear-gradient(180deg,var(--blue1),var(--blue2) 55%,var(--blue3));display:flex;gap:8px;align-items:center;color:#fff;text-shadow:0 2px 0 var(--outline)}
.tab-btn.active{background:linear-gradient(180deg,var(--yellow1),var(--yellow2) 55%,var(--yellow3));color:#fff;transform:translateY(-2px)}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.mini-btn{height:40px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:6px;color:#fff;text-shadow:0 2px 0 var(--outline)}
.square-btn{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;color:#fff}
.green{background:linear-gradient(180deg,var(--green1),var(--green2) 55%,var(--green3))!important}.blue{background:linear-gradient(180deg,var(--blue1),var(--blue2) 55%,var(--blue3))!important}.yellow{background:linear-gradient(180deg,var(--yellow1),var(--yellow2) 55%,var(--yellow3))!important}.purple{background:linear-gradient(180deg,#d8b4fe,#a844f5 55%,#7621bd)!important}.red{background:linear-gradient(180deg,var(--red1),var(--red2) 55%,var(--red3))!important}
.tab-btn:hover,.mini-btn:hover,.square-btn:hover,.btn:hover:not(:disabled),.seg:hover:not(:disabled),.close-btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 6px 0 var(--outline),inset 0 3px 0 rgba(255,255,255,.42)}
.tab-btn:active,.mini-btn:active,.square-btn:active,.btn:active:not(:disabled),.seg:active:not(:disabled),.close-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--outline),inset 0 2px 0 rgba(255,255,255,.3)}

.workspace{margin-top:18px}
.tab-panel{display:none}.tab-panel.active{display:block;animation:panelIn .22s cubic-bezier(.2,1.1,.4,1)}
@keyframes panelIn{from{opacity:.2;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

.desktop-grid{display:grid;gap:18px;align-items:stretch}
.roller-grid{grid-template-columns:340px minmax(720px,1fr) 320px;min-height:calc(100vh - 136px)}
.wheel-grid{grid-template-columns:320px minmax(760px,1fr) 310px;min-height:calc(100vh - 136px)}
.dice-layout{display:grid;grid-template-columns:minmax(760px,1fr) 340px;gap:18px;min-height:calc(100vh - 136px)}

.window{background:var(--surface);display:flex;flex-direction:column;min-width:0}
.window-head{position:relative;min-height:56px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,var(--header1),var(--header2) 48%,var(--header3));border-bottom:4px solid var(--outline)}
.head-title{display:flex;align-items:center;gap:8px;min-width:0;font-family:'Fredoka','Rubik',sans-serif;font-size:20px;font-weight:700;color:#fff;-webkit-text-stroke:1.8px var(--outline);paint-order:stroke fill;text-shadow:0 2px 0 var(--outline)}
.head-title>.ico{font-size:22px}
.head-badges,.head-actions{display:flex;align-items:center;gap:8px}
.count-badge,.round-badge,.session-badge{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--outline);box-shadow:0 2px 0 var(--outline);border-radius:10px;font-size:11px;font-weight:900;-webkit-text-stroke:0;background:#fff;color:var(--outline);text-shadow:none;padding:4px 8px;white-space:nowrap}
.round-badge{background:linear-gradient(180deg,var(--yellow1),var(--yellow2));font-size:10px}.session-badge{background:#111827;color:#fff;border-color:var(--outline);font-family:ui-monospace,Consolas,monospace}
.close-btn{width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,var(--red1),var(--red2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.window-body{flex:1;min-height:0;padding:14px;background-color:var(--surface);background-image:radial-gradient(var(--dots) 1.6px,transparent 1.6px);background-size:17px 17px}

/* SHARED FORM */
.psx-input{width:100%;border:3px solid var(--outline);border-radius:13px;background:var(--surface2);color:var(--text);font-weight:800;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--dots) 60%,transparent);padding:11px 12px;outline:none}
.psx-input:focus{border-color:var(--accent)}
.psx-input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.btn{min-height:42px;border-radius:13px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;text-shadow:0 2px 0 var(--outline)}
.btn.full{width:100%}.btn.huge{min-height:58px;font-size:18px;border-radius:16px}.btn.compact{min-height:34px;padding:0 11px;font-size:11px;border-radius:11px}
.bulk-card{padding:10px;border:3px solid var(--outline);border-radius:16px;background:color-mix(in srgb,var(--surface2) 88%,var(--dots) 12%);display:flex;flex-direction:column;gap:8px}
.info-strip,.chance-note{display:flex;align-items:center;gap:8px;border:2px solid var(--outline);border-radius:12px;background:var(--surface2);padding:8px 10px;font-size:11px;font-weight:800;color:var(--muted)}
.scroll-list{min-height:0;overflow:auto;padding-right:3px}
.scroll-list::-webkit-scrollbar{width:8px}.scroll-list::-webkit-scrollbar-track{background:color-mix(in srgb,var(--surface2) 80%,var(--dots) 20%);border-radius:99px}.scroll-list::-webkit-scrollbar-thumb{background:#8b98aa;border:2px solid var(--outline);border-radius:99px}
.empty-list{border:3px dashed color-mix(in srgb,var(--dots) 75%,var(--outline) 25%);border-radius:16px;background:color-mix(in srgb,var(--surface2) 85%,transparent);padding:22px 10px;text-align:center;color:var(--muted);font-size:11px;font-weight:900}

/* ROLLER LEFT */
.player-body{display:flex;flex-direction:column;gap:10px}
.players-list{flex:1;min-height:190px;display:flex;flex-direction:column;gap:8px}
.player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:3px solid var(--outline);border-radius:14px;background:var(--surface2);box-shadow:0 3px 0 var(--outline)}
.player-main{display:flex;align-items:center;gap:9px;min-width:0}.player-avatar{width:42px;height:42px;border:3px solid var(--outline);border-radius:12px;background:linear-gradient(180deg,#fff,#e8eef7);box-shadow:0 3px 0 var(--outline);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-size:15px;font-weight:900;color:#1c2332}.player-avatar img{width:100%;height:100%;object-fit:cover;display:block}.player-copy{min-width:0}.player-name{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-sub{font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rbx-tag{display:inline-flex;margin-left:5px;background:#2f7ff2;color:white;border:1.5px solid var(--outline);border-radius:99px;padding:1px 5px;font-size:8px;font-weight:900;vertical-align:1px}.remove-mini{width:28px;height:28px;border-radius:8px;border:2px solid var(--outline);background:linear-gradient(180deg,var(--red1),var(--red2));color:#fff;font-weight:900;cursor:pointer;flex:0 0 auto}
.fair-box{border:3px solid var(--outline);box-shadow:0 3px 0 var(--outline);border-radius:15px;background:linear-gradient(180deg,#161f30,#101827);color:#fff;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}.fair-box strong{display:block;font-size:11px;letter-spacing:.06em}.fair-box small{display:block;color:#c8d2e0;font-size:9px;margin-top:3px}.compact-fair .btn{flex:0 0 auto}

/* ROLLER CENTER */
.roller-body{display:grid;grid-template-rows:auto minmax(330px,1fr) auto auto;gap:12px}
.control-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;border:3px solid var(--outline);border-radius:15px;background:color-mix(in srgb,var(--surface2) 88%,var(--dots) 12%);padding:9px}
.segmented{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.segmented.small{gap:5px}.seg{min-height:36px;border-radius:11px;padding:0 11px;background:linear-gradient(180deg,#fff,#dfe7f2);font-size:11px;color:#151b27;display:inline-flex;align-items:center;gap:6px}.seg.active{background:linear-gradient(180deg,var(--yellow1),var(--yellow2));}.seg.danger.active{background:linear-gradient(180deg,var(--red1),var(--red2));color:#fff}.right-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.toggle-pill{display:inline-flex;align-items:center;gap:7px;border:3px solid var(--outline);border-radius:12px;background:var(--surface2);box-shadow:0 3px 0 var(--outline);padding:5px 9px;font-size:10px;font-weight:900;cursor:pointer}.toggle-pill input{display:none}.toggle-ui{width:30px;height:18px;background:#a7b4c7;border:2px solid var(--outline);border-radius:99px;position:relative}.toggle-ui::after{content:"";position:absolute;width:10px;height:10px;left:2px;top:2px;background:white;border:1.5px solid var(--outline);border-radius:50%;transition:left .15s ease}.toggle-pill input:checked+.toggle-ui{background:var(--green2)}.toggle-pill input:checked+.toggle-ui::after{left:14px}
.roller-stage{position:relative;overflow:hidden;border:4px solid var(--outline);border-radius:19px;background:#182335;background-image:radial-gradient(#34445d 2px,transparent 2px);background-size:16px 16px;box-shadow:inset 0 7px 0 rgba(0,0,0,.28);display:flex;align-items:center;min-height:330px;perspective:1000px}.stage-noise{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 15%,transparent 85%,rgba(255,255,255,.02))}.roller-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#dbe7f6;text-align:center;z-index:2;padding:20px}.empty-icon{width:74px;height:74px;border-radius:22px;border:3px solid var(--outline);box-shadow:0 5px 0 var(--outline);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#60a5fa,#2f7ff2);font-size:34px}.empty-title{font-size:22px}.empty-sub{font-size:11px;font-weight:800;color:#aebed1}.roller-track{height:100%;display:flex;align-items:center;gap:14px;padding-left:18px;will-change:transform;transform:translate3d(0,0,0)}
.roller-card{width:210px;height:245px;flex:0 0 210px;border:4px solid var(--outline);border-radius:20px;overflow:hidden;background:var(--surface2);box-shadow:0 6px 0 var(--outline);position:relative;transform-origin:center;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}.roller-card::before{content:"";display:block;height:27px;background:var(--card-color,#2f7ff2);border-bottom:4px solid var(--outline)}.roller-card-body{height:calc(100% - 41px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:12px;background:linear-gradient(180deg,var(--surface2),color-mix(in srgb,var(--surface2) 88%,#dbeafe 12%))}.roller-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:14px;background:var(--card-color,#2f7ff2);border-top:4px solid var(--outline)}.roller-card .player-avatar{width:82px;height:82px;border-radius:20px;font-size:24px}.roller-card-name{max-width:100%;font-family:'Fredoka';font-size:20px;font-weight:700;color:#fff;-webkit-text-stroke:2px var(--outline);text-shadow:0 2px 0 var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roller-card.near-needle{transform:translateY(-8px) scale(1.04);filter:brightness(1.06);box-shadow:0 9px 0 var(--outline),0 0 0 4px rgba(255,208,46,.32)}.roller-card.winner{animation:winnerPop .62s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 0 0 5px #ffd02e,0 8px 0 var(--outline)}
.roller-stage.spinning .roller-card:nth-child(odd){transform:skewY(-1deg)}.roller-stage.spinning .roller-card:nth-child(even){transform:skewY(1deg)}.roller-stage.shake{animation:stageShake .28s linear 2}
@keyframes winnerPop{0%{transform:scale(.9)}55%{transform:scale(1.12) translateY(-10px)}100%{transform:scale(1.04) translateY(-6px)}}@keyframes stageShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.needle{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);width:5px;background:#ffd02e;border-left:1.5px solid var(--outline);border-right:1.5px solid var(--outline);z-index:8;pointer-events:none}.needle-top,.needle-bottom{position:absolute;left:50%;transform:translateX(-50%);width:34px;height:26px;background:#ffd02e;filter:drop-shadow(0 3px 0 var(--outline))}.needle-top{top:-2px;clip-path:polygon(0 0,100% 0,50% 100%)}.needle-bottom{bottom:-2px;clip-path:polygon(50% 0,0 100%,100% 100%);filter:drop-shadow(0 -3px 0 var(--outline))}
.spin-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px}.target-box{border:3px solid var(--outline);border-radius:14px;background:var(--surface2);box-shadow:0 4px 0 var(--outline);padding:9px 12px;display:flex;flex-direction:column;justify-content:center}.target-box span{font-size:9px;font-weight:900;color:var(--muted);letter-spacing:.08em}.target-box strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-card{min-height:100px;border:3px solid var(--outline);border-radius:16px;box-shadow:0 4px 0 var(--outline);overflow:hidden;background:var(--surface2)}.result-placeholder{height:100%;min-height:96px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px;font-weight:900}.result-win,.result-out{display:flex;align-items:center;gap:12px;padding:12px}.result-win{background:linear-gradient(180deg,#fff8c9,#ffe66b)}.result-out{background:linear-gradient(180deg,#ffe0e2,#ff9aa4)}.result-copy{min-width:0}.result-kicker{font-size:10px;font-weight:900;color:var(--muted);text-transform:uppercase}.result-name{font-family:'Fredoka';font-size:25px;font-weight:700;color:#fff;-webkit-text-stroke:2px var(--outline);text-shadow:0 2px 0 var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* RANKING */
.ranking-body{display:flex;flex-direction:column;gap:10px}.ranking-list{flex:1;display:flex;flex-direction:column;gap:8px}.history-row{border:3px solid var(--outline);border-radius:14px;background:var(--surface2);box-shadow:0 3px 0 var(--outline);padding:9px;display:flex;align-items:center;gap:9px}.history-row.winner-row{background:linear-gradient(180deg,#fff6b2,#ffd64d)}.place-badge{min-width:38px;height:31px;padding:0 8px;border:2px solid var(--outline);border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--red1),var(--red2));color:white;font-weight:900}.place-badge.win{background:linear-gradient(180deg,var(--yellow1),var(--yellow2));color:var(--outline)}.history-info{min-width:0;flex:1}.history-name{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-time{font-size:9px;font-weight:800;color:var(--muted);margin-top:2px}

/* WHEEL */
.wheel-editor-body{display:flex;flex-direction:column;gap:10px}.wheel-textarea{flex:1;min-height:260px}.fair-card{border:3px solid var(--outline);border-radius:16px;box-shadow:0 4px 0 var(--outline);background:linear-gradient(180deg,#172132,#101827);padding:10px;color:white}.fair-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.fair-top strong{display:block;font-size:11px;letter-spacing:.06em}.fair-top small{display:block;font-size:9px;color:#cbd5e1;margin-top:3px}.hash-pill{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:2px solid var(--outline);border-radius:9px;padding:5px 7px;background:#fff;color:#111827;font-family:ui-monospace,Consolas,monospace;font-size:9px;font-weight:900}.option-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:3px solid var(--outline);border-radius:14px;box-shadow:0 3px 0 var(--outline);background:var(--surface2);padding:10px;font-size:10px;font-weight:900}.option-row input{width:19px;height:19px;accent-color:var(--accent)}
.wheel-body{display:grid;grid-template-rows:auto minmax(480px,1fr) auto;gap:12px}.wheel-result{min-height:54px;border:3px solid var(--outline);border-radius:15px;box-shadow:0 4px 0 var(--outline);background:linear-gradient(180deg,var(--yellow1),var(--yellow2));display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 14px;font-size:22px}.wheel-stage{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;border:3px solid var(--outline);border-radius:20px;background:color-mix(in srgb,var(--surface2) 84%,#dbeafe 16%);box-shadow:inset 0 4px 0 rgba(255,255,255,.5);padding:24px;overflow:visible}.wheel-disc-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:min(72vh,100%);aspect-ratio:1/1;max-width:900px}.wheel-pointer{position:absolute;top:-26px;left:50%;transform:translateX(-50%);z-index:8;width:62px;height:76px;pointer-events:none}.wheel-pointer svg{width:100%;height:100%;overflow:visible}.wheel-pointer path{fill:#ff4051;stroke:var(--outline);stroke-width:5}.wheel-pointer circle{fill:#ffd64d;stroke:var(--outline);stroke-width:4}.wheel-pointer.kick{animation:pointerKick .09s ease}.wheel-disc-wrap canvas{display:block;width:100%;height:100%;max-width:100%;max-height:100%}@keyframes pointerKick{50%{transform:translateX(-50%) rotate(-20deg)}}

/* DICE */
.dice-main,.dice-history-panel{min-width:0}.dice-body{display:grid;grid-template-rows:minmax(380px,1fr) auto auto;gap:14px}.dice-arena{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;border:3px solid var(--outline);border-radius:20px;background:color-mix(in srgb,var(--surface2) 86%,#e8eef7 14%);min-height:380px;padding:22px}.color-die{width:150px;height:150px;border:4px solid var(--outline);border-radius:30px;box-shadow:0 11px 0 var(--outline),inset 0 16px 0 rgba(255,255,255,.24);position:relative}.color-die::before{content:"";position:absolute;inset:34px;border-radius:20px;border:4px solid rgba(20,24,36,.45);background:rgba(0,0,0,.13);box-shadow:inset 0 5px 0 rgba(0,0,0,.16),0 3px 0 rgba(255,255,255,.25)}.color-die::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.28);border:3px solid rgba(20,24,36,.38)}.color-die.rolling{animation:dieRoll .18s linear infinite}@keyframes dieRoll{0%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(7deg) translateY(-10px)}100%{transform:rotate(-5deg) translateY(0)}}.stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.stat-card{border:3px solid var(--outline);border-radius:14px;box-shadow:0 3px 0 var(--outline);background:var(--surface2);padding:9px}.stat-top{display:flex;align-items:center;gap:8px}.stat-dot{display:inline-block;width:26px;height:26px;border-radius:8px;border:2px solid var(--outline);box-shadow:0 2px 0 var(--outline);flex:0 0 auto}.stat-top strong{font-size:12px}.stat-top small{font-size:9px;color:var(--muted);font-weight:900}.stat-bar{height:9px;border:2px solid var(--outline);border-radius:99px;background:#e5ebf2;margin-top:8px;overflow:hidden}.stat-fill{height:100%}

/* MODALS */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,8,15,.73);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-card{width:min(780px,96vw);max-height:90vh;transform:translateY(12px) scale(.98);transition:transform .2s cubic-bezier(.2,1.2,.4,1)}.modal-backdrop.open .modal-card{transform:none}.modal-body{overflow:auto;display:flex;flex-direction:column;gap:12px}.setting-section{border:3px solid var(--outline);border-radius:16px;background:color-mix(in srgb,var(--surface2) 88%,var(--dots) 12%);padding:12px}.section-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:9px}.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.theme-card{border:3px solid var(--outline);border-radius:15px;box-shadow:0 3px 0 var(--outline);background:var(--surface2);padding:10px;text-align:left;cursor:pointer;color:var(--text)}.theme-card.active{outline:4px solid color-mix(in srgb,var(--accent) 72%,white 28%)}.theme-card strong,.theme-card small{display:block}.theme-card strong{font-size:12px;margin-top:6px}.theme-card small{font-size:9px;color:var(--muted);margin-top:2px}.theme-swatch{width:100%;height:42px;border:2px solid var(--outline);border-radius:10px;display:block}.theme-swatch.classic{background:linear-gradient(135deg,#d8b4fe 0 50%,#7e22ce 50%)}.theme-swatch.dark{background:linear-gradient(135deg,#202b3d 0 50%,#5e3b9b 50%)}.theme-swatch.gold{background:linear-gradient(135deg,#fff0a2 0 50%,#d58b09 50%)}.theme-swatch.custom{background:linear-gradient(135deg,#f8fafc 0 50%,var(--accent) 50%)}.setting-row{border:3px solid var(--outline);border-radius:15px;background:var(--surface2);box-shadow:0 3px 0 var(--outline);padding:11px;display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-row strong,.setting-row small{display:block}.setting-row strong{font-size:12px}.setting-row small{font-size:9px;color:var(--muted);margin-top:2px}.setting-row input[type="checkbox"]{width:22px;height:22px;accent-color:var(--accent)}.setting-row input[type="color"]{width:58px;height:40px;border:3px solid var(--outline);border-radius:10px;background:none;padding:0}.presets-modal{width:min(820px,96vw)}.preset-save-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.preset-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}.preset-row{border:3px solid var(--outline);border-radius:14px;background:var(--surface2);box-shadow:0 3px 0 var(--outline);padding:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}.preset-name{font-size:13px;font-weight:900}.preset-meta{font-size:9px;color:var(--muted);font-weight:800;margin-top:2px}.preset-actions{display:flex;gap:6px}.preset-actions button{min-height:32px}.transfer-code{min-height:90px;font-family:ui-monospace,Consolas,monospace;font-size:10px}.two-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* PODIUM */
.podium-backdrop{background:rgba(3,6,12,.82)}.podium-card{position:relative;width:min(1050px,95vw);border-radius:28px;background:linear-gradient(180deg,#201631,#0d1320);padding:34px;color:white;text-align:center;overflow:visible}.podium-card::before{content:"";position:absolute;inset:0;border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(255,213,77,.2),transparent 42%);pointer-events:none}.podium-close{position:absolute;right:16px;top:16px}.podium-kicker{font-size:11px;font-weight:900;letter-spacing:.14em;color:#c8d2e0}.podium-title{font-size:clamp(34px,4vw,58px);margin-top:5px}.podium-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:end;margin:30px auto 18px;max-width:900px}.podium-place{border:4px solid var(--outline);border-radius:22px;box-shadow:0 7px 0 var(--outline);background:#fff;color:#161d2a;padding:15px;position:relative}.podium-place.p1{min-height:285px;background:linear-gradient(180deg,#fff7bf,#ffd54a)}.podium-place.p2{min-height:235px;background:linear-gradient(180deg,#f8fafc,#d7e0eb)}.podium-place.p3{min-height:205px;background:linear-gradient(180deg,#ffe5c4,#e89a52)}.podium-rank{font-family:'Fredoka';font-size:40px;font-weight:700}.podium-avatar{width:100px;height:100px;margin:8px auto;border-radius:24px}.podium-name{font-family:'Fredoka';font-size:24px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.podium-sub{font-size:10px;font-weight:900;color:#657184;margin-top:4px}.podium-meta{font-size:11px;font-weight:900;color:#cbd5e1;margin:10px 0}.podium-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.podium-actions .btn{min-width:210px}

/* TOAST + CONFETTI */
.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:150}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:160;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{border:3px solid var(--outline);border-radius:14px;box-shadow:0 4px 0 var(--outline);padding:10px 13px;color:white;font-weight:900;font-size:11px;animation:toastIn .2s cubic-bezier(.2,1.3,.4,1)}@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* STREAM MODE */
body.stream-mode .roller-input-panel,body.stream-mode .wheel-input-panel{display:none}
body.stream-mode .roller-grid{grid-template-columns:minmax(760px,1fr) 330px}
body.stream-mode .wheel-grid{grid-template-columns:minmax(820px,1fr) 330px}
body.stream-mode .app-shell{width:min(calc(100% - 24px),2400px)}
body.stream-mode .roller-stage{min-height:430px}
body.stream-mode .wheel-stage{min-height:650px}

/* OBS MODE */
body.obs-mode{background:transparent!important;background-image:none!important}
body.obs-mode .topbar,body.obs-mode .roller-input-panel,body.obs-mode .ranking-panel,body.obs-mode .wheel-input-panel,body.obs-mode .wheel-history-panel,body.obs-mode .dice-history-panel{display:none!important}
body.obs-mode .app-shell{width:100%;max-width:none;margin:0;padding:0}
body.obs-mode .workspace{margin:0}
body.obs-mode .desktop-grid,body.obs-mode .dice-layout{display:block;min-height:100vh}
body.obs-mode .center-panel,body.obs-mode .dice-main{border-radius:0;box-shadow:none;border:0;min-height:100vh;background:transparent}
body.obs-mode .center-panel .window-head,body.obs-mode .dice-main .window-head{display:none}
body.obs-mode .window-body{background:transparent;background-image:none;padding:20px}
body.obs-mode .roller-body{min-height:100vh;grid-template-rows:auto minmax(520px,1fr) auto auto}
body.obs-mode .wheel-body{min-height:100vh;grid-template-rows:auto minmax(620px,1fr) auto}

/* MOTION OFF */
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* DARK OVERRIDES */
body[data-theme="dark"] .seg,body[data-theme="dark"] .psx-input,body[data-theme="dark"] .theme-card,body[data-theme="dark"] .player-row,body[data-theme="dark"] .history-row,body[data-theme="dark"] .option-row,body[data-theme="dark"] .setting-row,body[data-theme="dark"] .preset-row,body[data-theme="dark"] .stat-card,body[data-theme="dark"] .target-box,body[data-theme="dark"] .result-card{background:var(--surface2);color:var(--text)}
body[data-theme="dark"] .roller-card-body{background:linear-gradient(180deg,var(--surface2),#1d293a)}

@media (max-width:1450px){
  .app-shell{width:min(calc(100% - 20px),var(--app-max));margin-top:10px}.topbar{grid-template-columns:minmax(260px,.8fr) auto minmax(250px,.8fr);gap:10px}.brand-sub{display:none}.roller-grid{grid-template-columns:300px minmax(620px,1fr) 285px}.wheel-grid{grid-template-columns:290px minmax(650px,1fr) 280px}.roller-card{width:190px;flex-basis:190px;height:225px}.roller-card .player-avatar{width:72px;height:72px}.top-actions .mini-btn span:last-child{display:none}.mini-btn{width:42px;padding:0;justify-content:center}
}
@media (max-width:1120px){
  .topbar{grid-template-columns:1fr;gap:10px}.brand-row,.top-actions{justify-content:center}.tabs{order:3}.desktop-grid,.dice-layout{grid-template-columns:1fr!important}.roller-grid,.wheel-grid,.dice-layout{min-height:auto}.side-panel,.dice-history-panel{min-height:420px}.roller-center,.wheel-center{min-height:720px}.roller-grid .roller-input-panel{order:1}.roller-grid .roller-center{order:2}.roller-grid .ranking-panel{order:3}.wheel-grid .wheel-input-panel{order:1}.wheel-grid .wheel-center{order:2}.wheel-grid .wheel-history-panel{order:3}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.podium-grid{grid-template-columns:1fr}.podium-place{min-height:auto!important}.wheel-disc-wrap{width:min(78vh,94vw)}
}
@media (max-width:650px){
  .app-shell{width:calc(100% - 10px);margin:5px auto 12px}.panel-3d,.window{border-width:3px;border-radius:16px;box-shadow:0 5px 0 var(--shadow)}.topbar{padding:9px}.brand-title{font-size:21px}.brand-icon{width:44px;height:44px}.tabs{width:100%;display:grid;grid-template-columns:1fr}.tab-btn{width:100%;justify-content:center}.top-actions{flex-wrap:wrap}.control-bar{align-items:stretch;flex-direction:column}.right-controls{justify-content:flex-start}.spin-row{grid-template-columns:1fr}.roller-card{width:170px;flex-basis:170px;height:210px}.roller-card-name{font-size:16px}.roller-stage{min-height:280px}.wheel-stage{min-height:400px;padding:18px}.wheel-result{font-size:17px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-die{width:110px;height:110px}.theme-grid{grid-template-columns:1fr}.two-buttons,.preset-save-row{grid-template-columns:1fr}.podium-card{padding:24px 14px}.podium-actions .btn{width:100%}
}