/* ===== 공부하자 구구단 - 스타일 ===== */

:root{
  --purple:#534AB7;
  --purple-light:#7F77DD;
  --purple-bg:#EEEDFE;
  --purple-text:#3C3489;
  --orange:#D85A30;
  --pink:#D4537E;
  --pink-bg:#FBEAF0;
  --pink-text:#993556;
  --green:#1D9E75;
  --green-bg:#E1F5EE;
  --green-text:#0F6E56;
  --amber:#EF9F27;
  --amber-bg:#FAEEDA;
  --amber-text:#854F0B;
  --blue:#378ADD;
  --blue-bg:#E6F1FB;
  --blue-text:#185FA5;
  --ink:#2C2C2A;
  --muted:#6b6a66;
  --line:#e7e5dd;
  --font-title:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-body:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:#f4f2ea;
  color:var(--ink);
  display:flex;
  justify-content:center;
  height:100%;
  overflow:hidden;              /* 페이지 전체는 안 움직이고, 화면 안에서만 스크롤 */
}

/* 주아체는 큰 로고 제목에만 사용 (통통해서 본문엔 안 어울림) */
.logo-sub,.logo-main{ font-family:var(--font-title); font-weight:400; }

/* 그 외 모든 글씨는 또렷한 프리텐다드로 통일 */
button,input,select,textarea{ font-family:var(--font-body); }

/* 입력칸/선택상자 글씨 또렷하게 */
select,.input-area input,#practice-answer{ font-family:var(--font-body); font-weight:500; }

#app{
  width:100%;
  max-width:430px;
  height:100vh;
  height:100dvh;                /* 모바일 동적 뷰포트 (지원 브라우저 우선) */
  background:#fff;
  position:relative;
  overflow:hidden;
  --home-bg:url('../images/main_bg.jpg');   /* 기본 배경 (테마 선택 시 상점에서 교체) */
  --screen-bg:url('../images/splash.jpg');
}

/* ---- 화면 전환 ---- */
.screen{
  display:none; height:100%; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;   /* 내용이 길면 화면 안에서 스크롤 */
  background-image:var(--screen-bg);
  background-size:cover; background-position:center;
}
.screen.active{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.hidden{ display:none !important; }

/* ---- 상단바 ---- */
.topbar{
  height:52px; flex:0 0 52px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; color:#fff;
}
.topbar-purple{ background:var(--purple); }
.topbar-purple2{ background:var(--purple-light); }
.topbar-green{ background:var(--green); }
.topbar-pink{ background:var(--pink); }
.topbar-orange{ background:var(--orange); }
.topbar-blue{ background:var(--blue); }
.topbar-title{ font-size:16px; font-weight:600; }
.topbar-left,.topbar-right{ font-size:13px; display:flex; align-items:center; gap:10px; }
.nick-btn{
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:13px; font-weight:600;
  padding:5px 10px; border-radius:20px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.nick-btn:active{ transform:scale(.97); }
.nick-edit{ font-size:11px; opacity:.85; }
.topbar-pad{ width:36px; }
.dot{ color:#9ee6c7; font-size:9px; }
.coin{ background:rgba(255,255,255,.2); padding:4px 9px; border-radius:20px; font-weight:700; }
.back-btn{
  width:36px; height:36px; border:0; background:rgba(255,255,255,.2);
  color:#fff; font-size:24px; border-radius:50%; cursor:pointer; line-height:1;
}
.sound-btn{ border:0; background:transparent; font-size:18px; cursor:pointer; padding:2px 4px; }
.bell-btn{ position:relative; }
.bell-dot{ position:absolute; top:0; right:1px; width:9px; height:9px; border-radius:50%;
  background:#E24B4A; display:none; box-shadow:0 0 0 2px rgba(255,255,255,.65); }
.bell-dot.on{ display:block; }
.sound-btn.muted{ opacity:.38; }

.pad{ padding:18px 16px 24px; flex:1; }
/* 글자 많은 화면(이론/설정/기록)은 흰 카드로 감싸고, 카드는 내용 크기만큼만 (아래는 배경 풍경) */
#screen-theory .pad, #screen-practice-setup .pad, #screen-game-select .pad, #screen-record .pad{
  flex:0 0 auto;
  background:rgba(255,255,255,0.94); border-radius:20px; margin:12px; padding:16px 16px 20px;
  box-shadow:0 4px 14px rgba(83,74,183,.10);
}
.center-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
/* 문제/게임/결과는 배경이 그대로 보이도록 투명 */
.pad.center-col{ background:transparent; border-radius:0; margin:0; }

/* ---- 홈 ---- */
#screen-home{
  background-image:var(--home-bg);
  background-size:cover; background-position:center top;
}
.home-body{ flex:1; padding:14px 16px 22px; display:flex; flex-direction:column; }
/* 로고 받침: 어떤 테마 배경에서도 로고가 통일되게 보이도록 */
.logo-plate{
  margin:0 0 12px; padding:4px 8px; border-radius:26px;
  background:rgba(255,255,255,0.5);
  box-shadow:0 4px 16px rgba(0,0,0,0.12), inset 0 0 0 1.5px rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.logo-card{
  background:url('../images/logo.png') 50% 43% / 128% auto no-repeat;
  border:0; border-radius:0; box-shadow:none;
  padding:22px 14px; text-align:center; position:relative; margin:0;
  min-height:162px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  -webkit-mask-image:radial-gradient(118% 74% at 50% 50%, #000 58%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(118% 74% at 50% 50%, #000 58%, rgba(0,0,0,0) 100%);
}
.logo-sub{ font-size:12px; font-weight:700; color:var(--purple); letter-spacing:2px; text-shadow:0 1px 4px rgba(255,255,255,.98); margin-bottom:1px; }
.logo-main{ font-size:33px; font-weight:800; letter-spacing:2px; line-height:1.02; }
.logo-main span{ text-shadow:0 2px 6px rgba(255,255,255,.98), 0 0 3px rgba(255,255,255,.95); }
.logo-star{ display:none; }
.logo-main .c-orange{ color:var(--orange); }
.logo-main .c-pink{ color:var(--pink); }
.logo-main .c-purple{ color:var(--purple); }
.logo-star{ position:absolute; color:var(--amber); font-size:16px; animation:twinkle 1.8s ease-in-out infinite; }
.logo-star.s1{ top:10px; left:16px; }
.logo-star.s2{ bottom:10px; right:18px; color:var(--orange); animation-delay:.6s; }
@keyframes twinkle{ 0%,100%{opacity:.4; transform:scale(.9);} 50%{opacity:1; transform:scale(1.2);} }

/* 캐릭터 + 레벨/미션 영역 */
.hero{ display:flex; gap:12px; margin-bottom:12px; align-items:stretch; }
.hero-char{ flex:0 0 108px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.speech{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:7px 10px; font-size:12px; color:var(--ink); line-height:1.3; margin-bottom:8px;
  word-break:keep-all; width:100%;
}
.speech::after{
  content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
.char-face{
  width:84px; height:84px; margin:0 auto; border-radius:50%; overflow:hidden;
  background:var(--pink-bg); border:3px solid var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:46px;
  animation:bob 2.4s ease-in-out infinite;
}
.char-face img{ width:100%; height:100%; object-fit:contain; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.char-name-sm{ font-size:12px; color:var(--muted); margin-top:6px; }

.hero-right{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.level-row{ display:flex; align-items:center; justify-content:space-between; }
.lv-group{ display:flex; align-items:center; gap:6px; min-width:0; }
.level-badge{
  background:var(--purple); color:#fff; font-size:13px; font-weight:700;
  padding:3px 12px; border-radius:20px; flex:0 0 auto;
}
.title-badge{
  background:var(--purple-bg); color:var(--purple-text); font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.title-badge-img{ width:22px; height:22px; object-fit:contain; }
.exp-text{ font-size:12px; color:var(--muted); flex:0 0 auto; }
.exp-bar{ height:9px; background:#eceae2; border-radius:20px; overflow:hidden; }
.exp-fill{ height:100%; width:0; background:var(--purple-light); border-radius:20px; transition:width .4s; }

.mission-card{
  background:var(--green-bg); border:1.5px solid #9FE1CB; border-radius:14px; padding:10px 12px; margin-top:2px;
}
.mission-top{ display:flex; justify-content:space-between; align-items:center; }
.mission-title{ font-size:13px; font-weight:700; color:var(--green-text); }
.mission-count{ font-size:13px; font-weight:700; color:var(--green-text); }
.mbar{ height:8px; background:#cdeee0; border-radius:20px; overflow:hidden; margin:7px 0 5px; }
.mbar-fill{ height:100%; width:0; background:var(--green); border-radius:20px; transition:width .4s; }
.mission-reward{ font-size:11px; color:var(--green-text); }

.mini-cards{ display:flex; gap:9px; margin-bottom:14px; }
.mini-card{ flex:1; background:#f4f2ea; border-radius:14px; padding:11px 8px; text-align:center; cursor:pointer; }
.mini-label{ font-size:11px; color:var(--muted); }
.mini-val{ font-size:21px; font-weight:800; margin-top:2px; }

.menu{ display:flex; flex-direction:column; gap:11px; margin-top:10px; }
/* 말랑 3D 젤리 버튼 (상위권 캐주얼 앱 스타일) */
.menu-btn{
  border:0; color:#fff; border-radius:20px; padding:16px 18px; font-size:18px; font-weight:700;
  cursor:pointer; text-align:center; position:relative;
  transition:transform .08s, box-shadow .08s;
  background:linear-gradient(var(--btn-light), var(--btn-base));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),
             0 6px 0 var(--btn-dark),
             0 12px 16px rgba(60,40,90,.18);
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}
.menu-btn:active{
  transform:translateY(5px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), 0 1px 0 var(--btn-dark), 0 3px 7px rgba(60,40,90,.18);
}
.menu-ico{ width:26px; height:26px; object-fit:contain; vertical-align:middle; margin-right:6px; }
.m-purple{ --btn-base:#7F77DD; --btn-light:#9C95EA; --btn-dark:#534AB7; }
.m-green{  --btn-base:#1D9E75; --btn-light:#34BB8D; --btn-dark:#0F6E56; }
.m-pink{   --btn-base:#D4537E; --btn-light:#E36E95; --btn-dark:#9E3557; }

.home-foot{ display:flex; gap:10px; margin-top:16px; }
.ghost-btn{
  flex:1; border:0; background:#fff; color:var(--purple);
  border-radius:16px; padding:13px; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #E3DFF5, 0 7px 12px rgba(83,74,183,.14);
  transition:transform .08s, box-shadow .08s;
}
.ghost-btn:active{ transform:translateY(3px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #E3DFF5, 0 2px 6px rgba(83,74,183,.14); }
.ghost-btn.danger{ color:#A32D2D; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 4px 0 #F1C7C7, 0 7px 12px rgba(163,45,45,.12); margin-top:20px; width:100%; flex:none; }
.ghost-btn.danger:active{ transform:translateY(3px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 1px 0 #F1C7C7, 0 2px 6px rgba(163,45,45,.12); }

/* ---- 이론 표 ---- */
.hint{ font-size:14px; color:var(--muted); text-align:center; margin-bottom:14px; }
.theory-grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:3px; }
.tcell{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:14px; border-radius:6px; color:var(--muted); cursor:default;
  transition:background .12s, color .12s, transform .12s;
}
.tcell.head-row{ background:var(--pink-bg); color:var(--pink-text); font-weight:700; }
.tcell.head-col{ background:var(--blue-bg); color:var(--blue-text); font-weight:700; }
.tcell.corner{ color:#bbb; }
.tcell.body{ cursor:pointer; }
.tcell.cross{ background:var(--amber-bg); color:var(--amber-text); font-weight:700; }
.tcell.target{ background:var(--orange); color:#fff; font-weight:800; transform:scale(1.06); }
.tcell.head-on{ background:var(--amber); color:#fff; }
.explain-box{
  margin-top:16px; background:var(--green-bg); border:1.5px solid #5DCAA5;
  border-radius:14px; padding:16px; text-align:center; color:var(--green-text);
  font-size:15px; line-height:1.6; min-height:64px;
}
.explain-box b{ font-size:18px; }

/* ---- 설정 / 공통 폼 ---- */
.setup-h{ font-size:15px; font-weight:600; margin:18px 0 10px; color:var(--ink); }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row label{ font-size:14px; color:var(--muted); }
select{
  flex:1; min-width:70px; height:42px; border:1.5px solid var(--line); border-radius:12px;
  padding:0 10px; font-size:16px; background:#fff; color:var(--ink);
}
/* 커스텀 드롭다운 (단 선택) */
.dropdown{ position:relative; flex:1; min-width:74px; }
.native-hidden{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.dropdown-btn{
  width:100%; height:44px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:0 12px; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; transition:border-color .15s;
}
.dropdown-btn:active{ transform:scale(.99); }
.dropdown.open .dropdown-btn{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(83,74,183,.12); }
.dropdown-arrow{ color:var(--purple); font-size:12px; transition:transform .18s; }
.dropdown.open .dropdown-arrow{ transform:rotate(180deg); }
.dropdown-list{
  display:none; position:absolute; top:50px; left:0; right:0; z-index:40;
  background:#fff; border:1.5px solid var(--purple-light); border-radius:14px;
  box-shadow:0 10px 24px rgba(83,74,183,.20); padding:6px; max-height:216px; overflow-y:auto;
}
.dropdown.open .dropdown-list{ display:block; animation:ddin .15s ease; }
@keyframes ddin{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.dropdown-opt{
  padding:10px 12px; margin:2px 0; border-radius:10px; font-size:15px; font-weight:600;
  color:var(--ink); cursor:pointer; text-align:center;
}
.dropdown-opt:hover{ background:var(--purple-bg); }
.dropdown-opt.sel{ background:var(--purple); color:#fff; }

/* 입력 필드 통일 — 그냥 둥근 사각형 대신 살짝 눌러진 입체 필드 */
.dropdown-btn, .rain-display, .input-area input, #practice-answer, select{
  background-image:linear-gradient(#ffffff, #f5f3fb);
  box-shadow:inset 0 2px 5px rgba(83,74,183,0.10);
  border:2px solid #E3DFF5;
}
.dropdown.open .dropdown-btn, .rain-display:focus, .input-area input:focus, #practice-answer:focus{
  border-color:var(--purple);
  box-shadow:inset 0 2px 5px rgba(83,74,183,0.10), 0 0 0 3px rgba(83,74,183,0.14);
}

.seg{ display:flex; gap:8px; }
.seg-btn{
  flex:1; height:44px; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; font-size:15px; font-weight:600; cursor:pointer;
}
.seg-btn.active{ background:var(--purple); color:#fff; border-color:var(--purple); }

.big-btn{
  width:100%; border:0; color:#fff; border-radius:20px; padding:16px; font-size:18px;
  font-weight:700; cursor:pointer; margin-top:26px;
  background:linear-gradient(var(--btn-light), var(--btn-base));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), 0 6px 0 var(--btn-dark), 0 12px 16px rgba(60,40,90,.18);
  text-shadow:0 1px 1px rgba(0,0,0,.16); transition:transform .08s, box-shadow .08s;
}
.big-btn:active{ transform:translateY(5px); box-shadow:inset 0 2px 0 rgba(255,255,255,.42), 0 1px 0 var(--btn-dark), 0 3px 7px rgba(60,40,90,.18); }
.b-green{ --btn-base:#1D9E75; --btn-light:#34BB8D; --btn-dark:#0F6E56; }
.b-pink{  --btn-base:#D4537E; --btn-light:#E36E95; --btn-dark:#9E3557; }
.b-revive{ --btn-base:#6C5CE0; --btn-light:#8B7CF0; --btn-dark:#4B3EA8; }
.over-col .b-revive{ margin-top:22px; }
.over-col .b-revive + .b-pink{ margin-top:12px; }

/* ---- 문제 / 게임 공통 ---- */
.q-big{
  font-size:46px; font-weight:800; color:var(--purple); margin:24px 0 20px; text-align:center;
  background:rgba(255,255,255,0.78); border-radius:18px; padding:8px 26px; display:inline-block;
}
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:340px; }
.choice{
  background:var(--purple-bg); color:var(--purple-text); border:1.5px solid #AFA9EC;
  border-radius:16px; padding:18px; font-size:22px; font-weight:800; cursor:pointer;
  transition:transform .08s;
}
.choice:active{ transform:scale(.96); }
.choice.right{ background:var(--green); color:#fff; border-color:var(--green); }
.choice.wrong{ background:#F09595; color:#fff; border-color:#E24B4A; }
.input-area{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:260px; }
.input-area input{
  height:60px; border:2px solid var(--line); border-radius:16px; text-align:center;
  font-size:30px; font-weight:800; color:var(--purple);
}
.input-area input:focus{ outline:none; border-color:var(--purple); }
.feedback{ margin-top:18px; font-size:20px; font-weight:800; min-height:30px; text-align:center; }
.feedback:not(:empty){ background:rgba(255,255,255,0.9); border-radius:12px; padding:7px 16px; }
.feedback.ok{ color:var(--green); }
.feedback.no{ color:#E24B4A; }

/* ---- 게임 ---- */
.game-cards{ display:flex; flex-direction:column; gap:12px; }
.game-card{
  display:flex; flex-direction:row; align-items:center; gap:14px; text-align:left;
  border:1.5px solid var(--line); background:rgba(255,255,255,0.96); border-radius:18px; padding:14px 16px; cursor:pointer;
}
.game-card:active{ transform:scale(.98); }
.game-thumb{ width:58px; height:58px; object-fit:contain; flex:0 0 auto; }
.game-txt{ flex:1; }
.game-emoji{ font-size:40px; flex:0 0 auto; }
.game-title{ font-size:18px; font-weight:700; color:var(--ink); }
.game-desc{ font-size:13px; color:var(--muted); margin-top:2px; }
.time-bar{ height:8px; background:#eceae2; overflow:hidden; }
.time-bar-fill{ height:100%; width:100%; background:var(--pink); transition:width .1s linear, background .2s; }
.game-lives{ font-size:18px; letter-spacing:2px; }
.game-timer{ font-size:16px; font-weight:800; background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px; }
.stat-row{ display:flex; gap:12px; width:100%; max-width:340px; margin-top:8px; }
.stat-box{ flex:1; background:#f4f2ea; border-radius:14px; padding:10px; text-align:center; }
.stat-box.stat-combo{ background:var(--amber-bg); }
.stat-label{ font-size:12px; color:var(--muted); }
.stat-combo .stat-label{ color:var(--amber-text); }
.stat-val{ font-size:24px; font-weight:800; }
.stat-combo .stat-val{ color:var(--orange); }
.game-flash{ font-size:40px; min-height:50px; margin-top:10px; }

/* ---- 구구단 소나기 ---- */
.rain-hud{ font-size:14px; font-weight:700; color:#fff; }
.rain-field{
  flex:1; position:relative; overflow:hidden;
  background:rgba(255,255,255,0.34);
}
.rain-field.hit{ animation:rainhit .4s ease; }
@keyframes rainhit{ 0%,100%{background:rgba(255,255,255,0.34);} 30%{background:rgba(226,75,74,0.34);} }
.rain-ground{
  position:absolute; left:0; right:0; bottom:0; height:8px; z-index:2;
  background:repeating-linear-gradient(45deg,#E24B4A 0 10px,#F09595 10px 20px);
}
.drop{
  position:absolute; top:0; left:0; z-index:1;
  background:#fff; border:2px solid var(--purple-light); border-radius:14px;
  padding:7px 12px; font-size:19px; font-weight:800; color:var(--purple);
  box-shadow:0 3px 8px rgba(83,74,183,.18); white-space:nowrap;
}
.drop.pop{ animation:droppop .22s ease forwards; }
@keyframes droppop{ from{transform:scale(1); opacity:1;} to{transform:scale(1.5); opacity:0;} }
.rain-pad{
  flex:0 0 auto; padding:8px 12px 14px;
  background:rgba(255,255,255,0.92); border-top:1.5px solid var(--line);
}
.rain-display{
  width:100%; height:46px; border:2px solid var(--purple-light); border-radius:12px; text-align:center;
  font-size:26px; font-weight:800; color:var(--purple); background:#fff; margin-bottom:8px; letter-spacing:3px;
}
.rain-display:focus{ outline:none; }
.rain-display.shake{ animation:shake .3s; border-color:#E24B4A; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.key{
  height:52px; border:0; border-radius:12px; font-size:22px; font-weight:800; cursor:pointer;
  background:var(--purple-bg); color:var(--purple-text);
}
.key:active{ transform:scale(.95); }
.k-back{ background:#F1EFE8; color:#5F5E5A; }
.k-fire{ background:var(--pink); color:#fff; font-size:18px; }

/* ---- 소나기: 물풍선 발사 ---- */
.rain-shooter{
  position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:88px; height:auto; z-index:3; pointer-events:none;
  transform-origin:50% 100%;
  filter:drop-shadow(0 4px 6px rgba(83,74,183,.28));
}
/* 발사 순간: 웅크렸다 팟 튀어오르며 던지는 동작 */
.rain-shooter.throw{ animation:shooterThrow .34s ease; }
@keyframes shooterThrow{
  0%   { transform:translateX(-50%) translateY(0)     scaleY(1);    }
  22%  { transform:translateX(-50%) translateY(5px)   scaleY(.88);  }
  48%  { transform:translateX(-50%) translateY(-11px) scaleY(1.1);  }
  72%  { transform:translateX(-50%) translateY(0)     scaleY(.97);  }
  100% { transform:translateX(-50%) translateY(0)     scaleY(1);    }
}
/* 발사 지점 물 튀김 퍼프 */
.rain-launch{
  position:absolute; width:48px; height:48px; z-index:4; pointer-events:none;
  margin-left:-24px; margin-top:-24px; border-radius:50%;
  background:radial-gradient(circle, rgba(150,214,255,.95) 0%, rgba(150,214,255,.45) 45%, rgba(150,214,255,0) 70%);
  animation:launchPuff .32s ease-out forwards;
}
@keyframes launchPuff{ 0%{transform:scale(.3);opacity:.9;} 100%{transform:scale(1.5);opacity:0;} }
.rain-shot{
  position:absolute; width:34px; height:34px; z-index:4; pointer-events:none;
  margin-left:-17px; margin-top:-17px;
  filter:drop-shadow(0 2px 3px rgba(30,90,160,.35));
  animation:shotSpawn .16s ease-out;
}
@keyframes shotSpawn{ from{transform:scale(.35);} to{transform:scale(1);} }
.rain-splash{
  position:absolute; width:78px; height:78px; z-index:5; pointer-events:none;
  margin-left:-39px; margin-top:-39px;
  animation:splashpop .42s ease forwards;
}
@keyframes splashpop{
  0%{ transform:scale(.4); opacity:0; }
  30%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.4); opacity:0; }
}
/* 소나기 레벨업 안내 (필드 하단, 문제 안 가림) */
.rain-notice{
  position:absolute; left:50%; bottom:104px; transform:translateX(-50%) translateY(8px);
  background:rgba(60,40,90,.82); color:#fff; font-size:14px; font-weight:800;
  padding:8px 16px; border-radius:16px; white-space:nowrap; z-index:6; pointer-events:none;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.rain-notice.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- 게임 결과 ---- */
.over-col{ justify-content:center; min-height:100vh; gap:6px; padding-top:60px; }
.over-deco{ width:150px; object-fit:contain; margin-bottom:-14px; animation:pop .4s ease; }
.over-emoji{ font-size:72px; animation:pop .4s ease; }
@keyframes pop{ from{transform:scale(0);} to{transform:scale(1);} }
.over-title{ font-size:24px; font-weight:800; }
.over-score{ font-size:48px; font-weight:800; color:var(--pink); margin:6px 0; }
.over-best{ font-size:15px; color:var(--amber-text); font-weight:700; }
.over-coin{ font-size:15px; color:var(--muted); margin-bottom:20px; }
.over-col .big-btn{ width:100%; max-width:260px; }
.over-col .ghost-btn{ flex:none; width:100%; max-width:260px; margin-top:10px; }

/* ---- 캐릭터 ---- */
.gacha-card{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--purple-bg); border:1.5px solid var(--purple-light);
  border-radius:18px; padding:14px 16px; margin-bottom:16px;
}
.gacha-title{ font-size:16px; font-weight:700; color:var(--purple-text); }
.gacha-sub{ font-size:13px; color:var(--purple); margin-top:2px; }
.gacha-btn{
  border:0; color:#fff; border-radius:16px;
  padding:12px 22px; font-size:16px; font-weight:800; cursor:pointer;
  background:linear-gradient(#8C84E6, #534AB7);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38), 0 5px 0 #3C3489, 0 9px 12px rgba(60,40,90,.2); transition:transform .08s, box-shadow .08s;
}
.gacha-btn:active{ transform:translateY(4px); box-shadow:inset 0 2px 0 rgba(255,255,255,.38), 0 1px 0 #3C3489, 0 2px 6px rgba(60,40,90,.2); }
/* ---- 상점 ---- */
.shop-tabs{ display:flex; gap:6px; padding:10px 12px 0; }
.shop-tab{
  flex:1; border:0; background:rgba(255,255,255,0.7); color:var(--muted);
  border-radius:12px 12px 0 0; padding:11px 4px; font-size:13px; font-weight:700; cursor:pointer;
}
.shop-tab.active{ background:#fff; color:var(--orange); }
.shop-pad{ background:rgba(255,255,255,0.94); border-radius:0 0 18px 18px; margin:0 12px 12px; padding:14px; flex:0 0 auto; box-shadow:0 4px 14px rgba(216,90,48,.10); }
.shop-hint{ font-size:13px; color:var(--muted); text-align:center; margin-bottom:12px; }
.shop-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.shop-item{
  border:1.5px solid var(--line); border-radius:16px; padding:10px; text-align:center;
  background:#fff; cursor:pointer; position:relative;
}
.shop-item.selected{ border-color:var(--orange); border-width:2.5px; }
.shop-swatch{ height:56px; border-radius:12px; margin-bottom:8px; border:1px solid rgba(0,0,0,.06); }
.shop-swatch.skin{ display:flex; align-items:center; justify-content:center; background:#f4f2ea; }
.mini-drop{ display:inline-block; padding:6px 12px; border-radius:12px; border:2px solid var(--purple-light);
  font-size:13px; font-weight:800; color:var(--purple); }
.mini-drop::before{ content:'3 × 4'; }
.shop-name{ font-size:14px; font-weight:700; }
.shop-tag{ display:inline-block; font-size:12px; font-weight:700; margin-top:4px; padding:2px 10px; border-radius:10px; }
.shop-tag.sel{ background:var(--orange); color:#fff; }
.shop-tag.own{ background:var(--green-bg); color:var(--green-text); }
.shop-tag.buy{ background:var(--amber-bg); color:var(--amber-text); }

/* 소나기 스킨 (떨어지는 문제가 그림 모양으로) */
.rain-field[data-skin="cloud"] .drop,
.rain-field[data-skin="star"] .drop,
.rain-field[data-skin="ribbon"] .drop{
  border:0; box-shadow:none; background-color:transparent;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  text-shadow:0 1px 2px rgba(255,255,255,.9);
}
.rain-field[data-skin="cloud"]  .drop{ background-image:url('../images/skin_cloud.png');  color:#185FA5; padding:26px 30px 30px; }
.rain-field[data-skin="star"]   .drop{ background-image:url('../images/skin_star.png');   color:#8a4b00; padding:34px 30px 32px; }
.rain-field[data-skin="ribbon"] .drop{ background-image:url('../images/skin_ribbon.png'); color:#0F6E56; padding:22px 32px; }

.char-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.char-cell{
  border:1.5px solid var(--line); border-radius:16px; padding:12px 6px; text-align:center;
  background:#fff; cursor:pointer; position:relative;
}
.char-cell.selected{ border-color:var(--orange); border-width:2.5px; }
.char-cell.locked{ opacity:.55; }
.char-circle{
  width:60px; height:60px; margin:0 auto 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.char-circle{ overflow:hidden; }
.char-circle img{ width:100%; height:100%; object-fit:contain; }
.char-nm{ font-size:13px; font-weight:600; }
.char-rank{ font-size:11px; font-weight:700; margin-top:2px; }
.rank-common{ color:var(--muted); }
.rank-rare{ color:var(--blue-text); }
.rank-epic{ color:var(--purple); }
.rank-legend{ color:var(--orange); }
.char-badge{
  position:absolute; top:6px; right:6px; font-size:11px; background:var(--orange);
  color:#fff; border-radius:10px; padding:1px 7px; font-weight:700;
}

/* ---- 기록 ---- */
.rec-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rec-card{ background:#f4f2ea; border-radius:14px; padding:14px; }
.rec-label{ font-size:12px; color:var(--muted); }
.rec-val{ font-size:24px; font-weight:800; margin-top:4px; }
.weak-list{ font-size:15px; color:var(--muted); background:#f4f2ea; border-radius:12px; padding:14px; }
.weak-tag{ display:inline-block; background:var(--pink-bg); color:var(--pink-text); border-radius:10px; padding:4px 10px; margin:3px; font-weight:700; }

/* 뽑기 연출 */
.gacha-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; z-index:50; animation:fade .2s;
}
.gacha-pop .box{
  background:#fff; border-radius:24px; padding:30px 26px; text-align:center; max-width:280px;
  animation:pop .4s ease;
}
.gacha-pop .big-emoji{ font-size:80px; }
.gacha-pop .got{ font-size:20px; font-weight:800; margin:10px 0 4px; }
.gacha-pop .rk{ font-size:14px; font-weight:700; margin-bottom:16px; }
.gacha-pop button{
  border:0; background:var(--purple); color:#fff; border-radius:14px;
  padding:12px 28px; font-size:16px; font-weight:800; cursor:pointer;
}
.gacha-pop .btns{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.gacha-pop .btns button{ width:100%; padding:12px; }
.gacha-pop .gacha-redraw{ background:linear-gradient(180deg,#7bd88f,#39b36f); }

/* 토스트 알림 (레벨업/미션 등) */
.toast{
  position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-12px);
  background:var(--purple); color:#fff; font-size:14px; font-weight:700;
  padding:11px 18px; border-radius:20px; z-index:80; opacity:0;
  transition:opacity .25s, transform .25s; white-space:nowrap; max-width:90%;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 확인 팝업 */
.confirm-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
  display:flex; align-items:center; justify-content:center; animation:fade .2s;
}
.confirm-box{ background:#fff; border-radius:20px; padding:24px 22px; max-width:280px; width:80%; text-align:center; animation:pop .3s ease; }
.confirm-msg{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.55; margin-bottom:18px; }
.confirm-btns{ display:flex; gap:10px; }
.confirm-btns button{ flex:1; border:0; border-radius:12px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; }
.confirm-cancel{ background:#F1EFE8; color:var(--muted); }
.confirm-ok{ background:var(--pink); color:#fff; }
.confirm-btns button:active{ transform:scale(.97); }

/* 작은 UI 아이콘 */
.coin-ico{ width:15px; height:15px; object-fit:contain; vertical-align:-2px; }
.mini-ico{ width:14px; height:14px; object-fit:contain; vertical-align:-2px; margin-right:3px; }
.ui-ico{ width:14px; height:14px; object-fit:contain; vertical-align:-2px; }

/* 정답/오답/축하 이펙트 (화면 가운데 잠깐) */
.fx-pop{
  position:fixed; left:50%; top:60%; width:132px; height:132px; object-fit:contain;
  transform:translate(-50%,-50%) scale(.5); opacity:0; pointer-events:none; z-index:90;
  transition:opacity .18s ease, transform .18s ease;
}
.fx-pop.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* 마스코트 (문제/게임 화면 - 내용 아래, 큰 화면에선 자동으로 맨 아래) */
.mascot{
  margin-top:auto; align-self:center; width:78px; height:78px; object-fit:contain;
  pointer-events:none;
}

/* 게임 결과 마스코트 */
.over-mascot{ width:110px; height:110px; object-fit:contain; }

/* 뽑기 팝업: 캐릭터 + 반짝임 */
.gacha-pop .big-emoji{
  position:relative; width:120px; height:120px; margin:0 auto 4px;
  display:flex; align-items:center; justify-content:center; font-size:76px;
}
.gacha-fx{ position:absolute; inset:-8px; width:136px; height:136px; object-fit:contain; opacity:.9; }
.gacha-char{ position:relative; width:88px; height:88px; object-fit:contain; z-index:1; }

/* ===== 전체 카드 톤 통일 (부드럽게 떠 있는 카드) ===== */
.game-card, .mini-card, .stat-box, .char-cell, .shop-item,
.gacha-card, .mission-card, .rec-card, .weak-list{
  border-radius:16px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), 0 5px 13px rgba(83,74,183,.12);
}
/* 선택 가능한 카드 = 살짝 눌리는 반응 */
.game-card, .char-cell, .shop-item{ transition:transform .09s, box-shadow .09s; }
.game-card:active, .char-cell:active, .shop-item:active{
  transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), 0 2px 6px rgba(83,74,183,.12);
}
/* 상단바에도 은은한 그림자로 화면과 분리 */
.topbar{ box-shadow:0 3px 10px rgba(60,40,90,.14); position:sticky; top:0; z-index:5; }

/* ===== 랭킹 ===== */
.rank-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.rank-tab{ flex:1; border:0; background:rgba(255,255,255,.66); color:var(--muted);
  border-radius:14px; padding:11px 4px; font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:0 2px 6px rgba(83,74,183,.10); transition:transform .08s; }
.rank-tab:active{ transform:scale(.96); }
.rank-tab.active{ background:#fff; color:var(--blue-text);
  box-shadow:0 4px 11px rgba(83,74,183,.18), inset 0 0 0 2px rgba(108,99,255,.35); }
.rank-list{ background:rgba(255,255,255,.95); border-radius:18px; padding:8px;
  box-shadow:0 6px 16px rgba(83,74,183,.13), inset 0 1px 0 rgba(255,255,255,.9); }
.rank-row{ display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:13px; }
.rank-row:not(:last-child){ border-bottom:1px solid #f1eff8; }
.rank-row.me{ background:linear-gradient(180deg,#f3f1ff,#ece9ff);
  box-shadow:inset 0 0 0 2px rgba(108,99,255,.30); }
.rank-badge{ width:34px; text-align:center; font-size:22px; }
.rank-num{ display:inline-block; width:27px; height:27px; line-height:27px; border-radius:50%;
  background:#f0eef8; color:var(--muted); font-size:13px; font-weight:800; }
.rank-nick{ flex:1; min-width:0; font-weight:700; font-size:15.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-row.me .rank-nick::after{ content:'나'; margin-left:6px; padding:1px 7px; border-radius:8px;
  background:var(--blue-text); color:#fff; font-size:11px; font-weight:800; vertical-align:middle; }
.rank-score{ font-weight:800; font-size:15px; color:var(--blue-text); white-space:nowrap; }
.rank-msg{ text-align:center; color:var(--muted); padding:44px 18px; font-size:15px; line-height:1.75; }
.rank-sub{ font-size:13px; color:#a9a4c4; }

/* ===== 게임 난이도 선택 ===== */
.diff-select{ display:flex; gap:10px; margin:2px 0 8px; }
.diff-btn{ flex:1; border:0; border-radius:16px; padding:14px 6px; cursor:pointer;
  background:rgba(255,255,255,.72); color:var(--muted); font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  box-shadow:0 3px 8px rgba(83,74,183,.10); transition:transform .08s; }
.diff-btn b{ font-size:16px; font-weight:800; }
.diff-btn span{ font-size:12px; opacity:.85; }
.diff-btn:active{ transform:scale(.96); }
.diff-btn.active{ background:linear-gradient(180deg,#fff,#f1efff); color:var(--blue-text);
  box-shadow:0 5px 13px rgba(83,74,183,.20), inset 0 0 0 2px rgba(108,99,255,.40); }
.diff-hint{ text-align:center; font-size:13px; color:var(--muted); margin:0 0 16px; }

/* ===== 랭킹 난이도 세그먼트 ===== */
.rank-diff{ display:flex; gap:6px; background:rgba(255,255,255,.6); border-radius:12px; padding:4px; margin-bottom:10px;
  box-shadow:inset 0 1px 3px rgba(83,74,183,.10); }
.rank-diff-btn{ flex:1; border:0; background:transparent; border-radius:9px; padding:9px 4px;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.rank-diff-btn.active{ background:#fff; color:var(--blue-text); box-shadow:0 2px 6px rgba(83,74,183,.16); }

/* ===== 닉네임 모달 ===== */
.nick-title{ font-size:19px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.nick-sub{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.nick-input{ width:100%; box-sizing:border-box; height:48px; border:2px solid var(--purple-light);
  border-radius:12px; padding:0 14px; font-size:17px; font-family:inherit; color:var(--ink);
  text-align:center; margin-bottom:16px; background:#fff; }
.nick-input:focus{ outline:none; border-color:var(--purple); }
.nick-input.shake{ animation:shake .3s; border-color:#E24B4A; }

/* ===== 공지 모달 ===== */
.notice-box{ text-align:left; max-width:320px; }
.notice-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.notice-badge{ background:var(--blue-text); color:#fff; font-size:12px; font-weight:800; padding:3px 9px; border-radius:9px; }
.notice-title{ font-size:18px; font-weight:800; color:var(--ink); }
.notice-list{ margin:0 0 12px; padding:0; list-style:none; }
.notice-list li{ font-size:14.5px; color:#4a4666; line-height:1.5; padding:5px 0; }
.notice-hide{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:14px; cursor:pointer; }
.notice-hide input{ width:16px; height:16px; }
.notice-close{ width:100%; }

/* ===== 시즌 / 명예의 전당 ===== */
.rank-mode{ display:flex; gap:8px; margin-bottom:10px; }
.rank-mode-btn{ flex:1; border:0; border-radius:12px; padding:11px 4px; font-family:inherit; font-size:14px; font-weight:700;
  background:rgba(255,255,255,.66); color:var(--muted); cursor:pointer; box-shadow:0 2px 6px rgba(83,74,183,.10); }
.rank-mode-btn.active{ background:linear-gradient(180deg,#fff,#f1efff); color:var(--blue-text);
  box-shadow:0 4px 11px rgba(83,74,183,.18), inset 0 0 0 2px rgba(108,99,255,.35); }
.rank-season{ text-align:center; font-size:13px; font-weight:700; color:var(--muted); margin:2px 0 10px; }

.hall-list{ display:flex; flex-direction:column; gap:12px; }
.hall-season{ background:rgba(255,255,255,.95); border-radius:16px; padding:6px 8px 8px;
  box-shadow:0 5px 13px rgba(83,74,183,.13), inset 0 1px 0 rgba(255,255,255,.9); }
.hall-season-h{ text-align:center; font-size:14px; font-weight:800; color:var(--blue-text); padding:9px 0 7px; }
.hall-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:11px; }
.hall-row:not(:last-child){ border-bottom:1px solid #f1eff8; }
.hall-row.me{ background:linear-gradient(180deg,#f3f1ff,#ece9ff); box-shadow:inset 0 0 0 2px rgba(108,99,255,.28); }
.hall-medal{ width:28px; text-align:center; font-size:19px; }
.hall-nick{ flex:1; min-width:0; font-weight:700; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hall-row.me .hall-nick::after{ content:'나'; margin-left:6px; padding:1px 6px; border-radius:7px; background:var(--blue-text); color:#fff; font-size:10px; font-weight:800; vertical-align:middle; }
.hall-score{ font-weight:800; font-size:14px; color:var(--blue-text); white-space:nowrap; }