/* ============================================================
   random.css — 사다리타기·랜덤뽑기 전용 스타일
   ★ 이 도구의 모양만 바꾸고 싶을 때 이 파일을 수정하세요.
   ============================================================ */

.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.mode-tab{
  padding:12px 6px;border-radius:12px;font-size:14px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
}
.mode-tab.active{
  color:#241c00;background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-color:transparent;
}

.stage{
  background:linear-gradient(180deg,var(--card),#141631);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px 20px 24px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

/* --- 입력 --- */
.in-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 8px}
.in-label:first-child{margin-top:0}
.in-hint{font-weight:400;font-size:12px;color:var(--dim)}
.in-text{
  width:100%;padding:14px 15px;border-radius:12px;font-size:15px;
  font-family:inherit;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.in-text:focus{outline:none;border-color:rgba(242,201,76,.5)}
.btn-gold{
  width:100%;margin-top:18px;padding:15px;font-size:15.5px;color:#241c00;border-radius:14px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 12px 24px -10px rgba(242,201,76,.5);
}
.btn-ghost{
  flex:1;padding:13px;font-size:14px;font-weight:700;color:var(--text);border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover{background:rgba(255,255,255,.09)}

/* --- 게임 영역 --- */
#gameCanvas{width:100%;height:auto;border-radius:14px;display:block;touch-action:manipulation}
.game-hint{text-align:center;font-size:13.5px;color:var(--muted);margin:14px 0 10px}
.game-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ctrl-btn{
  padding:10px 16px;border-radius:99px;font-size:14px;font-weight:700;
  background:rgba(242,201,76,.1);border:1px solid rgba(242,201,76,.35);color:var(--gold);
}
.ctrl-btn:hover{background:rgba(242,201,76,.18)}
.ctrl-btn:disabled{opacity:.4;cursor:default}

.winner-banner{
  text-align:center;padding:16px;border-radius:14px;margin-bottom:14px;
  background:rgba(242,201,76,.1);border:1px solid rgba(242,201,76,.4);
  font-size:17px;font-weight:800;color:var(--gold);
  animation:pop-in .4s cubic-bezier(.18,1.4,.4,1);
}
@keyframes pop-in{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

.r-actions{display:flex;gap:10px}

/* --- 카드 모드 --- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.flip-card{aspect-ratio:3/4;perspective:600px;cursor:pointer}
.flip-inner{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.2,.4,1);
}
.flip-card.open .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;font-weight:800;
}
.flip-front{
  background:linear-gradient(135deg,#232653,#1a1c3a);
  border:1px solid rgba(242,201,76,.35);color:var(--gold);font-size:26px;
}
.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#241c00;font-size:14px;text-align:center;padding:6px;line-height:1.4;
}
.flip-back.lose{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--line)}

@media (max-width:420px){
  .mode-tab{font-size:12.5px;padding:11px 2px}
  .card-grid{grid-template-columns:repeat(3,1fr)}
}

/* --- 순위 목록 (마블런·동물 레이스) --- */
.rank-list{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;
}
.rank-item{
  padding:8px 14px;border-radius:99px;font-size:13.5px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  animation:pop-in .35s cubic-bezier(.18,1.4,.4,1);
}
.rank-item.first{
  color:#241c00;background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-color:transparent;
}

/* 선택된 옵션 버튼 (구슬 개수 등) */
.ctrl-btn.on{
  color:#241c00;background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-color:transparent;
}