@font-face{font-family:'Noto Arabic';src:url('fonts/noto-arabic-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Arabic';src:url('fonts/noto-arabic-semibold.ttf') format('truetype');font-weight:500 700;font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#0d101d;--panel:#171b2acc;--border:#30354d;--text:#f2efff;--muted:#a3a6c3;--field:#0e122080;--purple:#7750ef}
body{margin:0;background:radial-gradient(ellipse at 49% 44%,#24204770,transparent 48%),radial-gradient(ellipse at 0 0,#40265450,transparent 25%),var(--bg);color:var(--text);font-family:'Noto Arabic','Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}
button{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text);background:var(--field);border:1px solid var(--border);border-radius:13px;padding:10px 14px;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
button:hover:not(:disabled){border-color:#8b72d4;background:#7455d82b}button:active:not(:disabled){transform:scale(.98)}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #b4a0ff;outline-offset:3px}
.icon{display:block;width:18px;height:18px;flex-shrink:0}[data-icon]{display:inline-flex;align-items:center;flex-shrink:0}
header{height:132px;max-width:1560px;width:100%;margin:auto;padding:20px 32px;display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:25px}
.brand{color:var(--text);text-decoration:none;display:grid;justify-items:center;text-align:center;width:100px;flex-shrink:0;gap:2px}.brand img{display:block;width:100%;height:64px;object-fit:contain}.brand small{font:600 14px/1.4 'Segoe UI',Arial,sans-serif;color:#d8cbff;letter-spacing:.7px}
.navigation{width:560px;max-width:46vw;text-align:center;direction:rtl}nav{display:flex;border:1px solid #575778;border-radius:18px;padding:2px}nav button{width:50%;font-weight:600;font-size:16px;border-color:transparent;background:none;padding:14px 12px}
nav button.active,.primary{background:linear-gradient(115deg,#8458f5,#5332cf);border-color:#9b72fa;box-shadow:inset 0 2px 7px #c5acff50,0 5px 24px #642fea25;color:#fff}
.utilities{display:flex;align-items:center;gap:8px;direction:ltr}.utilities button{padding:10px;min-width:39px;min-height:39px}.utilities small{direction:rtl;line-height:1.9;color:var(--muted);margin-left:12px;font-size:12px;white-space:nowrap}
main{max-width:1540px;width:100%;margin:auto;padding:0 28px 25px;display:grid;grid-template-columns:minmax(275px,1fr) minmax(380px,1.42fr) minmax(275px,1fr);gap:30px;align-items:stretch}
.panel{background:linear-gradient(145deg,#171a2980,#1b2030aa);border:1px solid var(--border);border-radius:18px;padding:21px;min-width:0;box-shadow:0 12px 35px #00000015}
h2{font-size:17px;font-weight:600;margin:4px 0 18px;display:flex;align-items:center;gap:10px}h2 [data-icon]{color:#9c94fb}h3{font-size:14px;color:var(--muted);font-weight:400;margin:20px 0 13px}
.names-toolbar{display:flex;gap:8px;margin:0 0 14px}.names-toolbar button{flex:1;padding:7px 8px;font-size:12px;border-radius:9px;white-space:nowrap}.names-toolbar .icon{width:15px;height:15px}
.names>label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}textarea{width:100%;height:190px;resize:vertical;background:var(--field);border:1px solid #393d57;border-radius:13px;padding:14px;color:var(--text);font-size:14px;line-height:1.85;min-height:110px;max-height:310px}
.meta{display:flex;justify-content:space-between;gap:6px;color:var(--muted);font-size:11px;margin:7px 0 11px}#notice{font-size:12px;color:#ffc376;margin:0 0 9px;min-height:0}.names>.primary{width:100%;font-weight:600;padding:13px}
.options{margin-top:21px;display:grid;gap:8px}.options label{display:flex;gap:10px;align-items:center;padding:7px;border:1px solid var(--border);border-radius:11px;font-size:13px;cursor:pointer}
input[type=checkbox]{appearance:none;width:35px;height:21px;flex-shrink:0;background:#51566b;border-radius:20px;position:relative;margin:0;cursor:pointer}input[type=checkbox]:after{content:'';position:absolute;width:17px;height:17px;top:2px;left:2px;background:#eeeafa;border-radius:50%;transition:transform .2s}input[type=checkbox]:checked{background:#7750ef}input[type=checkbox]:checked:after{transform:translateX(14px)}
.palettes{display:flex;justify-content:space-between;direction:ltr;gap:8px}.palettes button{width:32px;height:32px;padding:0;border-radius:9px;border:2px solid transparent;box-shadow:0 3px 7px #0004}.palettes button[aria-pressed=true]{outline:2px solid #b499ff;outline-offset:3px}
.center{display:flex;align-items:center;justify-content:center;min-width:0}.center>div{width:100%}.wheel-wrap{width:100%;aspect-ratio:1;position:relative;margin:17px auto 20px;border:3px solid #51496f;border-radius:50%;padding:16px;background:linear-gradient(150deg,#191c32,#0b101c);box-shadow:0 0 40px #7750ef20,inset 0 0 10px #7464c729}
canvas{display:block;width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 0 5px #0009)}canvas.rotating{will-change:transform}.pointer{position:absolute;z-index:3;top:-17px;left:calc(50% - 20px);width:40px;height:45px;background:linear-gradient(#ff608b,#e93266);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 0 6px #ff6993);border-radius:6px}
.hub{position:absolute;inset:37%;border-radius:50%;background:radial-gradient(circle at 40% 20%,#25203c,#0c1120);border:2px solid #60518a;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #0005}.hub img{display:block;width:62%;height:58%;object-fit:contain}
.lights i{position:absolute;width:8px;height:8px;background:#e1c5ff;box-shadow:0 0 10px #a268ff;border-radius:50%;left:calc(50% - 4px);top:calc(50% - 4px)}
.spin{width:86%;margin:0 7%;font-size:17px;font-weight:600;padding:14px}.actions{display:flex;gap:12px;margin:13px 7%}.actions button{flex:1;font-size:13px;padding:10px}.hint{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:12px}kbd{font:11px 'Segoe UI',Arial;border:1px solid var(--border);border-radius:4px;padding:2px 4px}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-title h2{font-size:15px;gap:7px;margin:3px 0 18px}.panel-title button{font-size:11px;padding:7px;margin-bottom:16px;gap:4px;white-space:nowrap}.panel-title button .icon{width:14px;height:14px}
em{font-size:12px;border:1px solid #8683fc;background:#55538b60;width:23px;height:23px;display:inline-grid;place-items:center;border-radius:50%;font-style:normal}
#history{list-style:none;padding:0;margin:0;max-height:335px;overflow:auto;display:grid;gap:8px;direction:ltr}#history li{display:flex;align-items:center;gap:14px;border:1px solid var(--border);background:#11152155;padding:10px;border-radius:13px}#history li.new-result{animation:arrive .3s}#history li b{background:linear-gradient(145deg,#666784,#303451);border:1px solid #777496;border-radius:12px;padding:9px;font-size:13px}#history li:first-child b{background:linear-gradient(145deg,#f5bb36,#795213);border-color:#ffd45e}#history li span{flex:1;direction:rtl;text-align:left;overflow-wrap:anywhere}#history time{font-size:11px;color:var(--muted)}#history li small{font-size:11px;color:var(--muted)}#undo{width:100%;margin-top:23px;background:#484a672f;font-size:13px}
blockquote{color:#9692bb;line-height:1.8;font-size:18px;text-align:center;margin:34px 0 5px}#emptyHistory{text-align:center;color:var(--muted);padding:40px 0}#emptyHistory>.icon,#emptyHistory>span .icon{width:35px;height:35px;color:#8e77b6}#emptyHistory small{font-size:12px}
footer{border-top:1px solid #272b42;width:100%;max-width:1600px;margin:auto auto 0;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;gap:18px;color:var(--muted);font-size:12px;line-height:1.6}footer a{color:#b1a7ff;text-decoration:none}footer a:hover{color:var(--text)}footer b{font-weight:600;color:#d3ccef}.copyright,.portfolio{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}.copyright a{display:inline-flex;padding:6px}.copyright .icon{width:20px;height:20px}.brand-phrase{font:11px/1.6 'Segoe UI',Arial,sans-serif;letter-spacing:1.2px;white-space:nowrap}.portfolio a{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;letter-spacing:.3px}
.eyebrow{color:#b79cef;font-size:13px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#30284c;color:#fff;border:1px solid #77649d;border-radius:12px;padding:12px 20px;z-index:40;opacity:0;pointer-events:none;transition:opacity .2s;width:max-content;max-width:calc(100vw - 32px);font-size:13px}#toast.show{opacity:1}
.team-heading{text-align:center;margin:18px 0}.team-heading h1{font-size:21px;font-weight:600}.team-heading p{color:var(--muted);font-size:13px}.team-count{display:flex;align-items:center;justify-content:center;gap:16px}.team-count input{width:70px;background:var(--field);color:var(--text);padding:8px;border:1px solid var(--border);border-radius:8px}.presets{display:flex;justify-content:center;gap:8px;margin:12px}.presets button{font-size:12px}.teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:370px;overflow:auto;margin:12px 0}.team{padding:15px;border:1px solid var(--border);border-top:3px solid var(--accent);background:var(--panel);border-radius:12px}.team h3{margin:0 0 12px;color:var(--accent)}.team p{background:var(--field);padding:8px;border-radius:7px;margin:6px 0;font-size:13px;overflow-wrap:anywhere}.team p.assigned{animation:assign .3s ease-out}#teamView>.primary,#copy{width:100%;margin-top:12px}#shuffleName{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;color:#cbb4ff;min-height:26px;margin:12px;overflow-wrap:anywhere}#teamView,#wheelView{animation:arrive .22s ease-out}
.modal{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:#060915b8;backdrop-filter:blur(7px);padding:20px}.modal-open{overflow:hidden}.result-card,.settings-card{background:radial-gradient(at top,#352457,#171b2a 70%);border:1px solid #8058c1;border-radius:24px;padding:32px 26px;box-shadow:0 0 70px #7e42c240;animation:arrive .25s;max-height:calc(100dvh - 40px);overflow:auto;width:min(440px,100%)}.result-card{text-align:center}#result h2{display:block;font-size:32px;overflow-wrap:anywhere;margin:22px 0;animation:reveal .4s}#result p{color:var(--muted);font-size:13px}#resultCountdown{color:var(--muted);font-size:12px}
.settings-card{width:min(480px,100%);padding:23px}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-heading h2{margin:0}.settings-heading button{padding:8px}.settings-card fieldset{border:0;border-top:1px solid var(--border);margin:20px 0 0;padding:12px 0 0;min-width:0}.settings-card legend{padding:0 0 0 12px;color:#c5adff;font-size:14px;font-weight:600}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0;font-size:13px}.setting-row select,.setting-row input[type=number]{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:6px 10px;width:155px;max-width:52%}.setting-row input[type=number]{width:85px}.settings-note{display:block;font-size:11px;color:var(--muted);line-height:1.8;margin:5px 0}.volume-label{display:flex;justify-content:space-between;align-items:center;margin:18px 0 4px;font-size:13px}#volume{width:100%;accent-color:#9c75ff;cursor:pointer}#volumeValue{font-family:'Segoe UI',Arial;font-size:13px}#resetSettings{width:100%;margin-top:18px}
.confetti{position:fixed;top:-20px;width:8px;height:12px;z-index:30;animation:fall 2s ease-in forwards;pointer-events:none}
body.light{color-scheme:light;--bg:#f0eff7;--panel:#ffffffb8;--border:#d0cbdf;--text:#27243a;--muted:#666079;--field:#ffffff80;background:radial-gradient(at 50% 40%,#e2d6ff,transparent 55%),var(--bg)}.light .panel{background:#ffffffa8}.light nav button{color:var(--text)}.light nav button.active{color:white}.light .brand small{color:#61499b}.light #history li{background:#fff8}.light footer b{color:#514876}.light footer a{color:#5c429c}.light .result-card,.light .settings-card{background:#f5efff}.light .settings-card legend{color:#6843b3}.light .eyebrow{color:#67409a}.light #notice{color:#8b5b12}
[hidden]{display:none!important}@keyframes arrive{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes reveal{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes assign{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translateY(100vh) rotate(620deg);opacity:0}}
@media(min-width:1400px){main{gap:35px}.panel{padding:24px 23px}textarea{height:220px}.wheel-wrap{margin-top:20px}header{height:140px}}
@media(max-width:1200px){.utilities small{display:none}.brand-phrase{font-size:10px;letter-spacing:.6px}.panel-title{flex-wrap:wrap}.panel-title h2{margin-bottom:10px}.panel-title button{margin-bottom:12px}}
@media(max-width:1100px){header{gap:14px;padding:22px}main{grid-template-columns:260px minmax(320px,1fr);gap:22px;padding:0 20px 24px}.history{grid-column:1/-1}.history blockquote{display:none}#history{grid-template-columns:repeat(3,1fr);max-height:200px}#emptyHistory{padding:10px}#emptyHistory>span{display:none}.navigation{max-width:55vw}header .brand{width:75px}.brand img{height:54px}.brand small{font-size:12px}.panel-title{flex-wrap:nowrap}footer{gap:12px;padding:16px}.brand-phrase{white-space:normal;max-width:190px}}
@media(max-width:800px){header{height:auto;flex-wrap:wrap}.navigation{order:3;width:100%;max-width:none}main{display:flex;flex-direction:column}.center{order:0}.names{order:1}.history{order:2}.wheel-wrap{max-width:440px}footer{flex-wrap:wrap;justify-content:center}.brand-phrase{max-width:none;white-space:nowrap}.copyright{order:-1}}
@media(max-width:650px){header{padding:17px 18px 22px;gap:20px}nav button{font-size:14px}.utilities{gap:7px}.utilities button{padding:10px}main{padding:0 14px 20px;gap:20px}.wheel-wrap{margin-top:8px}.panel{padding:20px}.spin{font-size:16px}textarea{height:150px}#history{grid-template-columns:1fr}.hint{margin-bottom:3px}footer{padding:16px;gap:14px;font-size:11px}.copyright{width:100%;white-space:normal}.portfolio{font-size:12px}.brand-phrase{font-size:10px}.team-heading h1{font-size:19px}.modal{padding:12px}.settings-card{padding:18px;max-height:calc(100dvh - 24px)}}
body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* J2 Roll compact desktop refinement — preserve original proportions, no page scroll */
@media (min-width:1101px){
  html,body{height:100%;height:100dvh;overflow:hidden}
  body{min-height:0}

  header{
    height:96px;max-width:1780px;padding:14px 32px;position:relative;flex:0 0 96px
  }
  .brand{width:88px;gap:0}
  .brand img{height:54px}
  .brand small{width:100%;font-size:11px;line-height:1.25;letter-spacing:2.15px;white-space:nowrap}

  .navigation{position:absolute;left:50%;transform:translateX(-50%);width:410px;max-width:none}
  nav{border-radius:14px;padding:2px}
  nav button{height:38px;min-height:38px;padding:6px 12px;border-radius:11px;font-size:13px;gap:6px}
  nav button .icon{width:14px;height:14px}

  .utilities{gap:6px}
  .utilities button{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:10px}
  .utilities button .icon{width:15px;height:15px}
  .utilities small{font-size:11px;line-height:1.4;margin-left:10px;white-space:nowrap}

  main{
    flex:1;min-height:0;max-width:1780px;padding:4px 32px 10px;
    grid-template-columns:300px minmax(500px,650px) 300px;
    column-gap:clamp(44px,5vw,96px);justify-content:space-between;align-items:center
  }
  .panel{width:300px;max-height:calc(100dvh - 160px);padding:17px 16px;border-radius:16px;align-self:center;overflow:hidden}
  .names{justify-self:start}.history{justify-self:end}
  h2{font-size:15px;margin:2px 0 13px;gap:7px}
  h2 .icon{width:15px;height:15px}
  h3{font-size:12px;margin:14px 0 9px}

  button{min-height:34px;border-radius:10px;padding:7px 11px;gap:6px;font-size:12px}
  button .icon{width:15px;height:15px}
  .names-toolbar{gap:7px;margin-bottom:10px}
  .names-toolbar button{height:32px;min-height:32px;padding:5px 7px;font-size:11px;border-radius:9px}
  .names>label{font-size:11px;margin-bottom:6px}
  textarea{height:150px;min-height:150px;max-height:150px;resize:none;border-radius:11px;padding:10px 11px;font-size:12px;line-height:1.7}
  .meta{font-size:10px;margin:5px 0 7px}
  #notice{font-size:10px;margin-bottom:6px}
  .names>.primary{height:36px;min-height:36px;padding:7px 10px}
  .options{margin-top:13px;gap:6px}
  .options label{min-height:32px;padding:5px 7px;border-radius:9px;font-size:11px}
  input[type=checkbox]{width:31px;height:18px}
  input[type=checkbox]:after{width:14px;height:14px}
  input[type=checkbox]:checked:after{transform:translateX(13px)}
  .palettes{gap:7px}.palettes button{width:28px;height:28px;min-height:28px;border-radius:8px}

  .center{height:100%;min-height:0;align-items:center}
  .center>div{width:100%;min-height:0}
  .wheel-wrap{
    width:min(100%,calc(100dvh - 285px));max-width:650px;
    margin:0 auto 12px;padding:14px;border-width:2px
  }
  .pointer{top:-14px;left:calc(50% - 17px);width:34px;height:38px}
  .hub img{width:50%;height:50%}
  .lights i{width:7px;height:7px}
  .spin{width:82%;height:40px;min-height:40px;margin:0 9%;padding:8px;font-size:14px;border-radius:10px}
  .actions{gap:9px;margin:8px 9% 0}
  .actions button{height:34px;min-height:34px;padding:6px 9px;font-size:11px}
  .hint{font-size:10px;margin-top:6px}

  .panel-title{gap:6px}
  .panel-title h2{font-size:13px;margin:2px 0 12px;white-space:nowrap}
  .panel-title button{height:30px;min-height:30px;font-size:10px;padding:5px 7px;margin-bottom:10px}
  em{width:20px;height:20px;font-size:10px}
  #history{max-height:min(330px,calc(100dvh - 310px));gap:6px}
  #history li{gap:9px;padding:7px;border-radius:10px;font-size:11px}
  #history li b{padding:6px;border-radius:9px;font-size:11px}
  #history time,#history li small{font-size:9px}
  #emptyHistory{padding:30px 0}
  #emptyHistory>.icon,#emptyHistory>span .icon{width:28px;height:28px}
  #emptyHistory p{font-size:12px;margin:8px 0 3px}#emptyHistory small{font-size:10px}
  #undo{height:34px;min-height:34px;margin-top:13px;font-size:11px}

  footer{
    flex:0 0 46px;height:46px;max-width:1780px;padding:8px 32px;gap:14px;font-size:10px;line-height:1.3
  }
  .copyright,.portfolio{gap:7px}.copyright a{padding:3px}.copyright .icon{width:16px;height:16px}
  .brand-phrase{font-size:9px;letter-spacing:1px}.portfolio a{font-size:11px}
}

@media (min-width:1101px) and (max-height:820px){
  header{height:82px;flex-basis:82px;padding-top:10px;padding-bottom:10px}
  .brand{width:80px}.brand img{height:47px}.brand small{font-size:10px;letter-spacing:1.85px}
  main{padding-top:0;padding-bottom:6px;grid-template-columns:285px minmax(450px,580px) 285px;column-gap:clamp(36px,4.5vw,78px)}
  .panel{width:285px;padding:14px 14px;max-height:calc(100dvh - 136px)}
  textarea{height:125px;min-height:125px;max-height:125px}
  .options{margin-top:9px}.options label{min-height:29px;padding:3px 6px}
  h3{margin:10px 0 7px}.palettes button{width:25px;height:25px;min-height:25px}
  .wheel-wrap{width:min(100%,calc(100dvh - 235px));margin-bottom:8px}
  .spin{height:36px;min-height:36px}.actions button{height:31px;min-height:31px}.hint{margin-top:3px}
  footer{height:42px;flex-basis:42px;padding-top:6px;padding-bottom:6px}
}

/* Final UI refinements */
:root{scrollbar-color:#6650a8 #101422;scrollbar-width:thin}
*{scrollbar-width:thin;scrollbar-color:#6650a8 #101422}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:#101422;border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8064d7,#59438e);border:2px solid #101422;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#9478ed,#6b52a6)}
body.light{scrollbar-color:#8c73ca #e8e4f2}
body.light *::-webkit-scrollbar-track{background:#e8e4f2}
body.light *::-webkit-scrollbar-thumb{border-color:#e8e4f2}
.brand{gap:7px}
.copyright a{border:0!important;background:transparent!important;box-shadow:none!important;padding:2px!important;border-radius:0!important}
.copyright a:hover{transform:translateY(-1px);color:#c5b5ff}
.copyright .icon{width:18px;height:18px}
#resultInfo:empty{display:none}
@media (min-width:1101px){
  .brand{gap:7px}
  .panel.names,.panel.history{height:min(540px,calc(100dvh - 175px));max-height:min(540px,calc(100dvh - 175px));display:flex;flex-direction:column}
  .history #history{flex:1;min-height:0;max-height:none}
  .history #emptyHistory{margin:auto 0}
  .history #undo{margin-top:auto}
  .names textarea{flex:0 0 150px}
}
@media (min-width:1101px) and (max-height:820px){
  .panel.names,.panel.history{height:min(485px,calc(100dvh - 145px));max-height:min(485px,calc(100dvh - 145px))}
  .names textarea{flex-basis:125px}
}

/* History rows: keep each eliminated participant compact; never stretch rows to fill panel. */
#history{
  align-content:start;
  grid-auto-rows:max-content;
}
#history li{
  flex:none;
  min-height:52px;
  height:auto;
  max-height:58px;
  box-sizing:border-box;
}