:root{
  color-scheme:dark;
  --bg:#0f1519;
  --panel:#151d22;
  --panel-2:#1a242a;
  --panel-3:#202c33;
  --line:#2b3941;
  --line-strong:#3b505a;
  --text:#edf4f6;
  --muted:#9aabb4;
  --accent:#d7eef2;
  --accent-text:#102027;
  --danger:#e7a3a3;
  --shadow:0 18px 48px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 0%,rgba(116,181,194,.12),transparent 30rem),
    radial-gradient(circle at 84% 8%,rgba(154,133,190,.08),transparent 26rem),
    var(--bg);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  line-height:1.55;
}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

.roulette-shell{
  width:min(1500px,calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 48px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:10px 0 22px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand strong{font-size:1.05rem}
.brand span{color:var(--muted);font-size:.76rem}
.topbar nav{display:flex;gap:18px;color:var(--muted);font-size:.92rem}
.topbar nav a:hover{color:var(--text)}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:34px 0 24px;
}
.eyebrow,.panel-kicker{
  color:var(--muted);
  letter-spacing:.16em;
  font-size:.72rem;
}
.page-head h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;margin:5px 0 10px}
.page-head p{margin:0;color:var(--muted)}
.database-status{
  color:var(--muted);
  font-size:.88rem;
  border:1px solid var(--line);
  background:rgba(21,29,34,.72);
  border-radius:999px;
  padding:8px 12px;
  white-space:nowrap;
}

.roulette-layout{
  display:grid;
  grid-template-columns:minmax(260px,1.08fr) minmax(420px,2fr) minmax(260px,1.08fr);
  gap:16px;
  align-items:stretch;
}

.panel{
  min-width:0;
  background:rgba(21,29,34,.94);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:20px;
}
.panel-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.panel h2{margin:3px 0 0;font-size:1.25rem}
.text-button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:6px 0;
}
.text-button:hover{color:var(--text)}

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-btn{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  border-radius:11px;
  padding:10px 12px;
  text-align:left;
}
.mode-btn:hover{border-color:var(--line-strong);color:var(--text)}
.mode-btn.active{
  color:var(--accent-text);
  background:var(--accent);
  border-color:var(--accent);
  font-weight:700;
}

.condition-box{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
}
.condition-box label{display:block;color:var(--muted);font-size:.84rem;margin-bottom:8px}
.number-row{display:flex;align-items:center;gap:8px}
.number-row input{
  width:82px;
  min-width:0;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--text);
  padding:8px 9px;
  outline:none;
}
.number-row input:focus{border-color:#708f99}
.original-note{color:var(--muted);font-size:.84rem}

.switch-list{
  display:grid;
  gap:10px;
  margin:18px 0;
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--muted);
  font-size:.9rem;
}
.check-row input{margin-top:4px}

.pool-card{
  margin-top:auto;
  min-height:108px;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,var(--panel-2),rgba(26,36,42,.65));
  color:var(--muted);
}
.pool-card strong{font-size:2.15rem;color:var(--text);line-height:1.05;margin-top:3px}
.pool-card small{font-size:.78rem}

.draw-panel{
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.draw-panel::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(173,225,234,.10),transparent 67%);
  pointer-events:none;
}
.draw-status{
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:.84rem;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.draw-window{
  width:min(680px,100%);
  min-height:270px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:22px;
  padding:28px 24px;
  background:linear-gradient(180deg,rgba(32,44,51,.90),rgba(18,25,29,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.draw-window.spinning{animation:pulseWindow .55s ease-in-out infinite alternate}
@keyframes pulseWindow{from{transform:scale(1)}to{transform:scale(1.008)}}
.draw-title{
  max-width:100%;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.15;
  font-weight:800;
  overflow-wrap:anywhere;
}
.draw-artist{margin-top:14px;color:var(--muted);font-size:1rem}
.draw-meta{margin-top:18px;color:#c4d1d6;font-size:.9rem}
.draw-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}
.primary-btn,.secondary-btn,.ghost-btn{
  border-radius:11px;
  padding:10px 16px;
  border:1px solid var(--line);
  transition:.15s ease;
}
.primary-btn{
  color:var(--accent-text);
  background:var(--accent);
  border-color:var(--accent);
  font-weight:800;
}
.secondary-btn{color:var(--text);background:var(--panel-3)}
.ghost-btn{color:var(--muted);background:transparent}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.danger{color:var(--danger)}

.playlist-panel{display:flex;flex-direction:column;min-height:560px}
.playlist-count{color:var(--muted);font-size:.9rem}
.playlist-empty{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:22px 14px;
  text-align:center;
  color:var(--muted);
  font-size:.88rem;
}
.playlist{
  display:grid;
  gap:8px;
  overflow:auto;
  max-height:430px;
  padding-right:2px;
}
.playlist-item{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel-2);
}
.playlist-no{color:var(--muted);font-size:.78rem;text-align:center}
.playlist-main{min-width:0}
.playlist-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-artist{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.remove-btn{
  width:28px;height:28px;border:0;border-radius:8px;
  color:var(--muted);background:transparent;
}
.remove-btn:hover{color:var(--danger);background:rgba(255,255,255,.04)}
.playlist-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.playlist-actions button{flex:1}
.storage-note{margin-top:10px;color:var(--muted);font-size:.72rem;text-align:center}

@media(max-width:1050px){
  .roulette-layout{grid-template-columns:1fr 1.45fr}
  .playlist-panel{grid-column:1/-1;min-height:auto}
  .playlist{max-height:340px}
}

@media(max-width:760px){
  .roulette-shell{width:min(100% - 20px,1500px);padding-top:12px}
  .topbar,.page-head{align-items:flex-start;flex-direction:column}
  .page-head{padding-top:26px}
  .database-status{white-space:normal}
  .roulette-layout{grid-template-columns:1fr}
  .playlist-panel{grid-column:auto}
  .draw-panel{min-height:500px}
  .mode-grid{grid-template-columns:1fr 1fr}
  .draw-window{min-height:235px;padding-inline:16px}
  .draw-title{font-size:clamp(1.8rem,11vw,3rem)}
}


/* v1.1 抽選紀錄 */
.history-item{cursor:pointer;transition:.15s ease}
.history-item:hover{background:var(--panel-3);border-color:var(--line-strong);transform:translateY(-1px)}
.history-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.history-arrow{font-size:1.45rem;color:var(--muted);text-align:center}
.history-item:hover .history-arrow{color:var(--text)}
.history-more{
  width:100%;
  margin-top:12px;
}

.history-more[hidden]{
  display:none!important;
}

/* Mobile floating site navigation — shared visual language with the main archive. */
.roulette-mobile-nav{display:none}

@media(max-width:900px){
  .topbar nav{display:none}
  .roulette-shell{padding-bottom:96px}
  .roulette-mobile-nav{display:block}

  .roulette-menu-scrim{
    position:fixed;
    z-index:70;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    background:rgba(0,0,0,.46);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .roulette-menu-panel{
    position:fixed;
    z-index:72;
    right:max(16px,calc((100vw - 480px)/2 + 16px));
    bottom:calc(88px + env(safe-area-inset-bottom));
    width:min(320px,calc(100vw - 32px));
    padding:15px;
    border:1px solid var(--line-strong);
    border-radius:22px;
    background:rgba(21,29,34,.96);
    box-shadow:0 26px 70px rgba(0,0,0,.48);
    backdrop-filter:blur(22px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px) scale(.97);
    transform-origin:right bottom;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  }
  .roulette-menu-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    padding:3px 3px 12px;
    border-bottom:1px solid var(--line);
  }
  .roulette-menu-head strong{font-size:20px}
  .roulette-menu-kicker{margin-bottom:3px;color:var(--accent);font-size:9px;letter-spacing:.12em;font-weight:900}
  .roulette-menu-current{color:var(--muted);font-size:11px;white-space:nowrap}
  .roulette-menu-list{display:grid;gap:6px;padding:10px 0 0}
  .roulette-menu-item{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    width:100%;
    min-height:46px;
    padding:8px 12px;
    border:1px solid transparent;
    border-radius:13px;
    color:var(--text);
    text-align:left;
    text-decoration:none;
  }
  .roulette-menu-item > span{color:var(--accent);font-size:17px;text-align:center}
  .roulette-menu-item b{font-size:14px}
  .roulette-menu-item.active{
    border-color:var(--line-strong);
    background:var(--panel-3);
  }
  .roulette-menu-toggle{
    position:fixed;
    z-index:74;
    right:max(16px,calc((100vw - 480px)/2 + 16px));
    bottom:calc(18px + env(safe-area-inset-bottom));
    width:58px;
    height:58px;
    border:1px solid var(--line-strong);
    border-radius:18px;
    background:linear-gradient(145deg,var(--panel-3),var(--panel-2));
    color:var(--text);
    box-shadow:0 16px 42px rgba(0,0,0,.4);
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
  }
  .roulette-menu-toggle:active{transform:scale(.96)}
  .roulette-menu-icon{display:block;font-size:25px;line-height:1;font-weight:400}
  .roulette-mobile-nav.open .roulette-menu-scrim,
  .roulette-mobile-nav.open .roulette-menu-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .roulette-mobile-nav.open .roulette-menu-panel{transform:translateY(0) scale(1)}
  .roulette-mobile-nav.open .roulette-menu-toggle{
    border-color:var(--accent);
    background:linear-gradient(145deg,var(--panel-3),var(--panel-2));
  }
}

@media(max-width:360px){
  .roulette-menu-panel{width:calc(100vw - 20px);right:10px}
  .roulette-menu-toggle{right:10px}
}


/* Embedded inside the main Lily Linglan Archive shell */
.roulette-embedded body{
  min-height:0;
  background:transparent;
}

.roulette-embedded .roulette-shell{
  width:100%;
  max-width:none;
  padding:8px 0 18px;
  overflow-x:hidden;
}

.roulette-embedded .topbar,
.roulette-embedded .roulette-mobile-nav{
  display:none !important;
}

.roulette-embedded .page-head{
  margin-top:0;
}

@media (max-width:900px){
  .roulette-embedded .roulette-shell{
    padding:6px 0 12px;
  }
}