:root{
  --bg:#0b0f14;
  --panel:#111823;
  --card:#141e2b;
  --text:#e7eef7;
  --muted:#a9b6c7;
  --line:#223043;
  --primary:#6d5efc;
  --danger:#ff5d5d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 50% 0%, #162235, var(--bg));
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,14,20,.6);
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
}
.brand__title{font-weight:900; letter-spacing:-.5px; font-size:18px;}
.brand__sub{color:var(--muted); font-size:12px; margin-top:2px;}

.wrap{
  display:grid;
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-areas: "panel stage";
  gap:14px;
  padding:14px;
  max-width: 1320px;
  margin:0 auto;
}

.panel{grid-area:panel; display:flex; flex-direction:column; gap:14px;}
.stage{grid-area:stage; min-height: 420px;}

@media (max-width: 980px){
  .wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "panel";
    padding:12px;
  }
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}

.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.row--gap{gap:10px; justify-content:flex-start; flex-wrap:wrap;}
.right{text-align:right;}

.label{color:var(--muted); font-size:12px; margin-bottom:6px;}
.big{font-size:18px; font-weight:800; letter-spacing:-.5px;}
.timer{font-size:22px; font-weight:900; font-variant-numeric: tabular-nums;}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:#d0def2;}

.divider{height:1px; background:rgba(255,255,255,.08); margin:12px 0;}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{background:rgba(255,255,255,.07);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn--primary{background:linear-gradient(180deg, rgba(109,94,252,.95), rgba(109,94,252,.75)); border-color:rgba(109,94,252,.9);}
.btn--primary:hover{filter:brightness(1.05);}
.btn--ghost{background:transparent;}
.btn--danger{background:rgba(255,93,93,.12); border-color:rgba(255,93,93,.5);}

.chk{display:flex; align-items:center; gap:8px; user-select:none; color:var(--text); font-weight:700;}
.chk input{transform: translateY(1px);}

.input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
}

.result{margin-top:12px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.2);}
.result__line{font-weight:900; letter-spacing:-.2px;}
.result__sub{color:var(--muted); font-size:12px; margin-top:6px;}

.history{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.histItem{padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18);}
.histTop{display:flex; justify-content:space-between; gap:10px;}
.histMsg{font-weight:800;}
.histMeta{color:var(--muted); font-size:12px; margin-top:4px;}

.hint{color:var(--muted); font-size:12px;}

/* ---- STAGE LAYOUT ---- */
.stage{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 데스크톱: 광고가 게임 위(기본) */
.adslot{order:0;}
.stage__frame{order:1;}

/* 모바일: 광고가 게임 아래 */
@media (max-width: 980px){
  .stage{flex-direction:column-reverse;}
}

/* 광고 슬롯(에드핏 자리) */
.adslot{
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.20);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.adslot__inner{
  padding:14px;
}
.adslot__title{
  font-weight:900;
  letter-spacing:-.2px;
  margin-bottom:6px;
}
.adslot__desc{
  color:var(--muted);
  font-size:12px;
}

/* 게임 프레임 */
.stage__frame{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* 투명 배경 시각화용 (체커보드) */
.stage__frame::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0;
  opacity:.25;
  z-index:0;
}

#stage{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}

/* HUD: 모바일에서 남은 시간 상단 중앙 */
.hud{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
}
.hud__timer{
  font-weight:900;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.3px;
  padding:8px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

/* 안내 */
.stage__hint{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:2;
  color:rgba(255,255,255,.85);
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}

/* 모바일 전용 큰 누르기 버튼 */
.btn--pressMobile{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:4;
  padding:16px 18px;
  border-radius:16px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.2px;
  width:min(520px, 92%);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* 데스크톱에서는 모바일 버튼 숨김 */
@media (min-width: 981px){
  #btnPressMobile{display:none;}
}

/* 모바일에서는 패널의 작은 누르기 버튼 숨김(중복 방지) */
@media (max-width: 980px){
  #btnPress{display:none;}
}

/* 모달 */
.hidden{display:none !important;}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:14px; z-index:99;}
.modal__sheet{
  width:min(920px, 96vw);
  background:linear-gradient(180deg, rgba(20,30,43,.98), rgba(12,17,25,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.modal__sheet--wide{width:min(1100px, 96vw);}
.modal__title{font-weight:900; margin-bottom:10px;}
.modal__list{margin:0; padding-left:18px; color:var(--text);}
.modal__list li{margin:8px 0; color:rgba(255,255,255,.9);}

.cropWrap{flex:1;}
.cropSide{width:240px;}
#cropCanvas{width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25);}

.customList{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:10px;}
.customItem{border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.2); border-radius:14px; padding:10px;}
.customThumb{width:100%; aspect-ratio: 16/10; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.customThumb canvas{width:100%; height:100%;}
.customName{font-weight:900; margin-top:8px;}
.customBtns{display:flex; gap:8px; margin-top:8px;}