:root {
  --bg:#07101d;
  --bg2:#0a1224;
  --panel:rgba(10,20,37,.82);
  --panel-strong:rgba(8,16,31,.94);
  --line:rgba(134,190,255,.22);
  --text:#f6f9ff;
  --muted:#aab8cf;
  --cyan:#69e8ff;
  --blue:#6fa8ff;
  --violet:#ad7bff;
  --magenta:#ff75dc;
  --gold:#ffd36e;
  --green:#7bf0bb;
  --danger:#ff7b92;
  --shadow:0 18px 60px rgba(0,0,0,.38);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid rgba(105,232,255,.7);outline-offset:3px}
.hidden{display:none!important}
.fx,.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-a{background:radial-gradient(circle at 15% 12%,rgba(54,160,255,.22),transparent 33%),radial-gradient(circle at 88% 20%,rgba(179,87,255,.17),transparent 30%)}
.fx-b{background:radial-gradient(circle at 48% 100%,rgba(34,230,196,.11),transparent 33%),radial-gradient(circle at 90% 80%,rgba(255,91,190,.09),transparent 25%)}
.grid-bg{opacity:.16;background-image:linear-gradient(rgba(117,181,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(117,181,255,.12) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%)}
.app-shell{position:relative;z-index:1;min-height:100vh;padding:clamp(22px,4vw,54px) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center}
.screen{width:min(1180px,100%);animation:screenIn .28s ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 30px rgba(105,232,255,.25);display:grid;place-items:center;color:#07101d;font-weight:1000;letter-spacing:-1px}
.brand-copy h1{font-size:clamp(26px,4vw,46px);line-height:1;margin:0;letter-spacing:.03em}
.brand-copy p{margin:7px 0 0;color:var(--muted);font-weight:700}
.glass{background:linear-gradient(180deg,rgba(17,31,54,.88),rgba(8,16,30,.92));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);border-radius:var(--radius)}
.hero-card{padding:clamp(26px,5vw,52px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(105,232,255,.2);background:rgba(105,232,255,.07);border-radius:999px;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.big-title{font-size:clamp(34px,7vw,72px);line-height:.98;margin:18px 0 10px;letter-spacing:-.045em}
.subtitle{font-size:clamp(17px,2vw,22px);color:var(--muted);margin:0 0 28px;line-height:1.55}
.field-label{display:block;font-size:14px;font-weight:900;margin:0 0 9px;color:#d9e7ff}
.text-input{width:100%;min-height:58px;border-radius:16px;border:1px solid rgba(149,197,255,.28);background:rgba(2,10,22,.7);color:white;padding:0 17px;font-size:18px;transition:.18s border,.18s box-shadow}
.text-input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(105,232,255,.08)}
.form-row{display:flex;gap:12px;align-items:end;max-width:650px}
.primary-btn,.secondary-btn,.ghost-btn{min-height:54px;border:none;border-radius:16px;padding:0 20px;font-weight:950;cursor:pointer;transition:.18s transform,.18s filter,.18s opacity;background:none;color:var(--text)}
.primary-btn{background:linear-gradient(135deg,#64e6ff,#7e88ff);color:#07101d;box-shadow:0 10px 30px rgba(88,190,255,.2)}
.secondary-btn{border:1px solid rgba(144,191,255,.25);background:rgba(20,37,64,.72)}
.ghost-btn{border:1px solid rgba(144,191,255,.17);background:rgba(255,255,255,.025);color:#dce9ff}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover{filter:brightness(1.07)}
.primary-btn:active,.secondary-btn:active,.ghost-btn:active{transform:translateY(1px) scale(.99)}
button[disabled]{opacity:.45;cursor:not-allowed;filter:none!important;transform:none!important}
.microcopy{font-size:12px;color:var(--muted);line-height:1.5;margin-top:9px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.user-chip{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-weight:850;color:#e9f2ff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(123,240,187,.7)}
.lobby-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.lobby-panel{padding:clamp(22px,4vw,38px);min-height:320px}
.lobby-panel h2{font-size:clamp(28px,4vw,46px);margin:10px 0 12px}
.lobby-panel p{color:var(--muted);line-height:1.6;margin:0 0 24px}
.solo-launch{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px;border:none;border-radius:20px;color:#06101b;background:linear-gradient(135deg,var(--cyan),#a5a1ff);cursor:pointer;text-align:left;box-shadow:0 18px 50px rgba(86,205,255,.2);transition:.2s transform,.2s filter}
.solo-launch:hover{transform:translateY(-2px);filter:brightness(1.04)}
.solo-launch strong{display:block;font-size:27px}.solo-launch small{display:block;margin-top:6px;font-weight:800;opacity:.75}.solo-launch .arrow{font-size:30px}
.stat-stack{display:grid;gap:12px;margin-top:16px}
.stat-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 16px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065)}
.stat-row span{color:var(--muted);text-align:left}.stat-row strong{color:white}
.stat-button{width:100%;font:inherit;cursor:pointer;transition:.16s ease;color:inherit}
.stat-button small{display:block;margin-top:3px;color:#6f839f;font-size:10px;font-weight:800}
@media(hover:hover) and (pointer:fine){.stat-button:hover{transform:translateY(-1px);border-color:rgba(105,232,255,.30);background:rgba(105,232,255,.055)}}
.stat-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 18px}.section-heading h2{font-size:clamp(27px,4vw,42px);margin:0}.section-heading p{color:var(--muted);margin:7px 0 0}
.mode-section{margin:22px 0 30px}.mode-section-title{display:flex;align-items:center;gap:9px;font-weight:1000;color:#dceaff;margin:0 0 12px;font-size:16px}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.mode-card{position:relative;text-align:left;padding:20px;border-radius:18px;border:1px solid rgba(145,190,255,.16);background:linear-gradient(180deg,rgba(17,31,54,.72),rgba(9,18,34,.8));color:white;cursor:pointer;transition:.18s transform,.18s border,.18s box-shadow}.mode-card:hover{transform:translateY(-2px);border-color:rgba(105,232,255,.45)}.mode-card.selected{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(105,232,255,.08),0 16px 38px rgba(0,0,0,.22)}.mode-card h3{margin:7px 0 8px;font-size:22px}.mode-card p{margin:0;color:var(--muted);line-height:1.45}.difficulty{font-size:12px;font-weight:950;color:var(--gold)}.mode-flow{display:flex;gap:7px;align-items:center;margin-top:13px;flex-wrap:wrap}.mode-chip{padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.05);font-size:12px;font-weight:850;color:#dfeaff}.mode-arrow{color:var(--cyan);font-weight:1000}.selection-footer{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 15px;margin-top:22px;background:rgba(6,14,27,.9);border:1px solid rgba(144,190,255,.18);backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,.28)}.selection-summary{min-width:0}.selection-summary strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-summary span{color:var(--muted);font-size:13px}
.utility-btn{position:fixed;z-index:40;top:max(14px,env(safe-area-inset-top));min-height:48px;border:1px solid rgba(145,190,255,.18);background:rgba(5,13,26,.82);backdrop-filter:blur(14px);color:#eaf4ff;border-radius:999px;padding:0 14px;font-weight:950;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.24)}.rules-fab{right:max(14px,env(safe-area-inset-right))}
.preview-wrap{text-align:center}.stage-kicker{font-size:13px;font-weight:950;letter-spacing:.08em;color:var(--cyan);text-transform:uppercase}.stage-title{font-size:clamp(28px,5vw,48px);margin:7px 0 7px}.stage-note{color:var(--muted);margin:0 0 18px}.preview-timer{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:rgba(105,232,255,.08);border:1px solid rgba(105,232,255,.18);font-weight:950;color:#e9fbff;margin-bottom:18px}.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.study-card{min-height:176px;padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(20,38,65,.9),rgba(7,15,30,.96));border:1px solid rgba(145,190,255,.17);display:flex;flex-direction:column;justify-content:center;box-shadow:0 15px 35px rgba(0,0,0,.22)}.study-en{font-size:clamp(17px,2.2vw,24px);font-weight:1000;line-height:1.32;overflow-wrap:anywhere}.study-mean{margin-top:13px;color:#dceaff;font-size:16px;font-weight:850;line-height:1.4}.study-pron{margin-top:7px;color:var(--cyan);font-size:14px;font-weight:800;line-height:1.35}.preview-foot{margin-top:16px;color:var(--muted);font-size:13px}
.countdown-screen{text-align:center}.countdown-number{font-size:min(35vw,260px);font-weight:1000;line-height:.8;letter-spacing:-.07em;background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 35px rgba(105,232,255,.24));animation:countPop .7s cubic-bezier(.2,.9,.2,1)}@keyframes countPop{0%{transform:scale(.55);opacity:0}50%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}.go-word{font-size:min(25vw,190px);color:var(--cyan);font-weight:1000;filter:drop-shadow(0 0 35px rgba(105,232,255,.35))}
.game-screen{width:min(1440px,100%)}.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:14px}.hud-box{min-height:64px;padding:10px 14px;border:1px solid rgba(145,190,255,.14);background:rgba(7,16,31,.72);backdrop-filter:blur(12px);border-radius:17px;display:flex;align-items:center;gap:10px}.hud-box.right{justify-content:flex-end}.hud-label{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.08em}.hud-value{font-size:21px;font-weight:1000}.timer-box{text-align:center;padding:8px 22px;border:1px solid rgba(145,190,255,.18);background:rgba(5,13,27,.9);border-radius:20px;min-width:145px}.timer-label{font-size:11px;color:var(--muted);font-weight:900}.timer-value{font-size:31px;line-height:1.05;font-variant-numeric:tabular-nums;font-weight:1000;letter-spacing:.02em}.timer-box.urgent{border-color:rgba(255,123,146,.7);box-shadow:0 0 0 3px rgba(255,123,146,.06),0 0 28px rgba(255,89,122,.12);animation:urgentPulse .75s ease-in-out infinite alternate}@keyframes urgentPulse{from{transform:scale(1)}to{transform:scale(1.025)}}
.mode-strip{display:flex;justify-content:center;margin-bottom:12px}.mode-strip span{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:900;color:#dbe8ff;border:1px solid rgba(145,190,255,.15);background:rgba(255,255,255,.035)}
.play-zone{position:relative;padding:clamp(18px,3vw,30px);border-radius:28px;border:1px solid rgba(145,190,255,.15);background:radial-gradient(circle at 50% 38%,rgba(54,123,215,.13),transparent 38%),linear-gradient(180deg,rgba(9,19,35,.8),rgba(4,10,20,.93));box-shadow:var(--shadow);overflow:hidden}.deck-orbit{width:74px;height:94px;border-radius:13px;position:absolute;left:24px;top:24px;background:linear-gradient(145deg,#203b67,#0b172b);border:1px solid rgba(105,232,255,.28);transform:rotate(-7deg);box-shadow:8px 8px 0 rgba(42,70,116,.45),16px 16px 0 rgba(24,44,77,.35),0 14px 30px rgba(0,0,0,.3)}.deck-orbit::after{content:"∞";position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:1000;color:var(--cyan)}.central-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:290px;padding:30px 12px 16px}.central-card{width:min(720px,86%);min-height:215px;border-radius:24px;border:1px solid rgba(114,218,255,.34);background:linear-gradient(180deg,rgba(18,35,60,.98),rgba(6,15,29,.99));box-shadow:0 0 0 7px rgba(105,232,255,.025),0 22px 80px rgba(0,0,0,.42),0 0 45px rgba(76,154,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;animation:cardDeal .25s ease-out}@keyframes cardDeal{from{opacity:.2;transform:translateY(-12px) rotateX(8deg) scale(.96)}to{opacity:1;transform:none}}.center-type{font-size:11px;font-weight:950;color:var(--cyan);letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px}.central-text{font-size:clamp(27px,4.8vw,54px);font-weight:1000;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}.status-line{height:30px;display:flex;justify-content:center;align-items:center;margin:2px 0 8px;color:var(--muted);font-weight:850;font-size:14px}.status-line.active{color:var(--cyan)}.hit-wrap{display:flex;justify-content:center;margin:4px 0 18px}.hit-btn{width:min(370px,80vw);height:88px;border:none;border-radius:22px;color:#06101a;background:linear-gradient(135deg,#77efff,#8794ff 54%,#c58cff);font-size:clamp(32px,6vw,48px);font-weight:1000;letter-spacing:.06em;cursor:pointer;box-shadow:0 13px 35px rgba(77,190,255,.22),0 0 0 5px rgba(105,232,255,.05);transition:.08s transform,.15s filter;animation:hitGlow 2s ease-in-out infinite alternate}@keyframes hitGlow{from{box-shadow:0 13px 35px rgba(77,190,255,.18),0 0 0 5px rgba(105,232,255,.04)}to{box-shadow:0 15px 45px rgba(77,190,255,.30),0 0 0 7px rgba(105,232,255,.07)}}.hit-btn:active{transform:scale(.985)}.hit-btn[disabled]{animation:none}
.hand-zone{padding:2px 0 4px}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 12px}.hand-heading strong{font-size:19px}.hand-heading span{font-size:13px;color:var(--muted)}.hand-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.hand-card{position:relative;min-height:168px;border-radius:18px;border:1px solid rgba(145,190,255,.14);background:linear-gradient(180deg,rgba(23,40,67,.98),rgba(7,15,29,.98));color:white;padding:20px 14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:clamp(18px,1.5vw,23px);font-weight:950;line-height:1.36;overflow-wrap:anywhere;word-break:keep-all;transition:.14s transform,.14s border,.14s box-shadow,.14s opacity}.hand-card.selectable{cursor:pointer;border-color:rgba(105,232,255,.55);box-shadow:0 0 0 3px rgba(105,232,255,.06),0 9px 28px rgba(0,0,0,.2)}.hand-card.selectable:hover{transform:translateY(-5px);border-color:var(--cyan)}.hand-card:not(.selectable){cursor:default}.card-number{position:absolute;right:7px;top:6px;font-size:10px;color:rgba(215,230,255,.42);font-weight:800}.selection-banner{display:flex;justify-content:center;margin:0 0 11px}.selection-pill{padding:8px 14px;border-radius:999px;background:rgba(255,211,110,.1);border:1px solid rgba(255,211,110,.25);color:var(--gold);font-weight:1000}.selection-pill strong{font-variant-numeric:tabular-nums}.empty-hand{grid-column:1/-1;min-height:90px;border:1px dashed rgba(145,190,255,.22);border-radius:16px;display:grid;place-items:center;color:var(--muted);font-weight:850}

.hand-card.hint-answer{
  border-color:rgba(255,211,110,.92)!important;
  box-shadow:0 0 0 3px rgba(255,211,110,.12),0 0 28px rgba(255,211,110,.52),0 12px 34px rgba(0,0,0,.28)!important;
  animation:answerHintGlow 1.05s ease-in-out infinite alternate!important;
}
@keyframes answerHintGlow{
  from{transform:translateY(0) scale(1);filter:brightness(1)}
  to{transform:translateY(-3px) scale(1.025);filter:brightness(1.16)}
}


.center-study-strip{
  width:min(720px,86%);
  margin-top:6px;
  padding:7px 11px;
  border-radius:14px;
  border:1px solid rgba(105,232,255,.18);
  background:rgba(7,18,34,.88);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;
  animation:studyInfoIn .22s ease-out;
}
.study-live-badge{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(105,232,255,.10);
  color:var(--cyan);
  font-size:10px;
  font-weight:950;
  letter-spacing:.05em;
  white-space:nowrap;
}
.center-study-item{
  min-width:0;
  color:#e9f3ff;
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.center-study-item b{
  color:var(--cyan);
  margin-right:6px;
  font-size:11px;
}
@keyframes studyInfoIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.hand-main{
  display:block;
  width:100%;
}
.hand-card.new-drawn-card{
  border-color:rgba(255,211,110,.72);
  box-shadow:0 0 0 3px rgba(255,211,110,.08),0 0 24px rgba(255,211,110,.18);
  padding-top:24px;
}
.new-card-badge{
  position:absolute;
  left:7px;
  top:6px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,211,110,.16);
  color:var(--gold);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.04em;
}
.new-card-study-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.09);
}
.new-card-study-row{
  display:block;
  color:#e9f2ff;
  font-size:10.5px;
  line-height:1.3;
  font-weight:750;
  overflow-wrap:anywhere;
}
.new-card-study-row b{
  color:var(--gold);
  margin-right:4px;
  font-size:9px;
}

.feedback-overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,17,.5);backdrop-filter:blur(4px);animation:feedbackIn .15s ease-out}@keyframes feedbackIn{from{opacity:0}to{opacity:1}}.feedback-card{width:min(620px,92%);padding:25px;border-radius:22px;text-align:center;background:rgba(7,16,31,.97);border:1px solid rgba(145,190,255,.24);box-shadow:0 24px 80px rgba(0,0,0,.5)}.feedback-card.correct{border-color:rgba(123,240,187,.6)}.feedback-card.wrong{border-color:rgba(255,123,146,.6)}.feedback-title{font-size:31px;font-weight:1000}.feedback-title.correct{color:var(--green)}.feedback-title.wrong{color:var(--danger)}.feedback-main{margin-top:10px;font-size:clamp(19px,3vw,30px);font-weight:1000;line-height:1.35}.feedback-sub{margin-top:8px;color:var(--muted);line-height:1.45}.penalty-pop{color:var(--danger);font-weight:1000;margin-top:9px}
.result-card{padding:clamp(24px,4vw,42px)}.result-score{font-size:clamp(58px,12vw,115px);font-weight:1000;line-height:.9;letter-spacing:-.06em;background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.result-label{color:var(--muted);font-weight:900;margin-top:7px}.result-top{display:grid;grid-template-columns:.75fr 1.25fr;gap:22px;align-items:center}.result-summary{padding:20px;border-radius:18px;border:1px solid rgba(145,190,255,.14);background:rgba(255,255,255,.025)}.result-summary-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}.result-summary-row:last-child{border-bottom:none}.result-summary-row span{color:var(--muted)}.review-title{margin:28px 0 12px;font-size:23px}.review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-height:420px;overflow:auto;padding-right:4px}.review-item{padding:16px;border-radius:16px;border:1px solid rgba(145,190,255,.12);background:rgba(255,255,255,.025)}.review-en{font-size:17px;font-weight:1000;line-height:1.35}.review-mean{font-size:14px;color:#dbe7fa;margin-top:8px;font-weight:800}.review-pron{font-size:13px;color:var(--cyan);margin-top:4px}.review-sentence{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-weight:900;line-height:1.4;color:#f7fbff}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.result-actions button{flex:1;min-width:175px}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(2,6,14,.72);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:18px;animation:feedbackIn .15s ease-out}.modal{width:min(620px,100%);max-height:min(760px,88vh);overflow:auto;border-radius:22px;background:linear-gradient(180deg,#101f37,#07101e);border:1px solid rgba(145,190,255,.22);box-shadow:0 28px 90px rgba(0,0,0,.56);padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.modal-head h2{margin:0;font-size:24px}.icon-btn{width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:white;font-size:22px;cursor:pointer}.rule-list{display:grid;gap:8px;counter-reset:rules}.rule-item{display:grid;grid-template-columns:31px 1fr;gap:10px;align-items:start;padding:10px;border-radius:13px;background:rgba(255,255,255,.03);color:#e9f2ff;line-height:1.45}.rule-num{width:27px;height:27px;border-radius:9px;background:rgba(105,232,255,.09);color:var(--cyan);display:grid;place-items:center;font-weight:1000;font-size:12px}.current-mode-box{margin-top:14px;padding:14px;border:1px solid rgba(105,232,255,.16);border-radius:15px;background:rgba(105,232,255,.045)}.current-mode-box strong{display:block;color:var(--cyan);margin-bottom:7px}.rules-warning{margin:13px 0 0;color:var(--gold);font-size:12px;font-weight:800}.toast-root{position:fixed;z-index:150;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;gap:8px;width:min(520px,calc(100% - 30px));pointer-events:none}.toast{padding:12px 15px;border-radius:14px;border:1px solid rgba(145,190,255,.2);background:rgba(6,14,27,.94);box-shadow:0 13px 32px rgba(0,0,0,.35);font-weight:850;text-align:center;animation:toastIn .18s ease-out}@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.error-panel{padding:28px;max-width:700px}.error-panel h2{color:var(--danger)}.error-panel pre{white-space:pre-wrap;background:#050a12;padding:14px;border-radius:12px;overflow:auto;color:#ffd4dc}.mini-note{font-size:12px;color:var(--muted);line-height:1.45}

.feedback-card.correct{
  max-width:min(720px,92%);
}
.feedback-card.correct .feedback-main{
  font-size:clamp(22px,3vw,38px);
  line-height:1.28;
}
.feedback-card.correct .feedback-sub{
  margin-top:12px;
  font-size:clamp(15px,2vw,21px);
  line-height:1.5;
  color:#f2f7ff;
}


.data-browser-modal{width:min(900px,100%);max-height:min(820px,90vh);overflow:hidden;display:flex;flex-direction:column}
.data-source-note{padding:11px 13px;border-radius:13px;background:rgba(105,232,255,.045);border:1px solid rgba(105,232,255,.12);color:#aebed3;font-size:12px;line-height:1.45;margin-bottom:12px}
.data-search-wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:900}
.data-search{width:100%;min-width:0;min-height:44px;border-radius:12px;border:1px solid rgba(145,190,255,.16);background:rgba(2,9,19,.60);color:white;padding:10px 12px;font:inherit;font-size:15px;outline:none}
.data-search:focus{border-color:rgba(105,232,255,.55);box-shadow:0 0 0 3px rgba(105,232,255,.07)}
.data-browser-list{overflow:auto;display:grid;gap:8px;padding-right:4px;min-height:120px}
.data-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.028)}
.data-entry-main{min-width:0;display:grid;gap:4px}
.data-entry-main strong{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.data-entry-main span{font-size:13px;color:#c7d4e6;line-height:1.35}
.data-entry-main em{font-size:11px;color:#7f93ae;font-style:normal;line-height:1.35}
.data-entry-meta{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;color:#70849e;font-size:10px;text-align:right}
.data-type-badge{display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(177,128,255,.10);color:#cbb2ff;font-weight:900;white-space:nowrap}
.data-empty{padding:30px;text-align:center;color:var(--muted)}
.match-group{border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.026);overflow:hidden}
.match-group summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 13px;font-size:14px;font-weight:900}
.match-group summary::-webkit-details-marker{display:none}
.match-group summary strong{color:var(--cyan);font-size:12px;white-space:nowrap}
.match-group[open] summary{border-bottom:1px solid rgba(255,255,255,.06)}
.match-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
.match-chip{display:grid;gap:2px;min-width:0;padding:8px 9px;border-radius:10px;background:rgba(4,13,26,.62);border:1px solid rgba(255,255,255,.045)}
.match-chip b{font-size:12px;overflow-wrap:anywhere}.match-chip small{font-size:10px;color:#8093ad;overflow-wrap:anywhere}

@media(max-width:900px){.lobby-grid,.result-top{grid-template-columns:1fr}.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hand-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.hud{grid-template-columns:1fr auto 1fr}.utility-btn span{display:none}.rules-fab{padding:0 14px}.central-area{min-height:260px}.deck-orbit{width:58px;height:75px;left:13px;top:17px}}
@media(max-width:620px){.center-study-strip{width:100%;padding:8px 9px;gap:5px 9px}.center-study-item{font-size:11px}.study-live-badge{font-size:9px}.hand-card.new-drawn-card{min-height:142px}.new-card-study-row{font-size:9.5px}.app-shell{align-items:flex-start;padding-top:max(68px,calc(env(safe-area-inset-top) + 58px))}.brand{margin-bottom:18px}.brand-mark{width:38px;height:38px}.form-row{display:grid}.form-row .primary-btn{width:100%}.mode-grid{grid-template-columns:1fr}.selection-footer{display:grid;grid-template-columns:1fr auto}.selection-summary span{display:none}.preview-grid{grid-template-columns:1fr 1fr;gap:8px}.study-card{min-height:150px;padding:12px}.study-en{font-size:16px}.study-mean{font-size:14px;margin-top:10px}.study-pron{font-size:12px}.hud{grid-template-columns:1fr auto 1fr;gap:6px}.hud-box{min-height:52px;padding:7px 8px;border-radius:13px}.hud-label{display:none}.hud-value{font-size:17px}.timer-box{min-width:110px;padding:7px 10px}.timer-value{font-size:26px}.play-zone{padding:12px;border-radius:20px}.deck-orbit{display:none}.central-area{min-height:230px;padding:15px 4px 10px}.central-card{width:100%;min-height:185px;padding:18px;border-radius:18px}.central-text{font-size:clamp(25px,8vw,40px)}.hit-btn{height:78px;width:100%;font-size:38px}.hand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hand-card{min-height:142px;font-size:17px;padding:16px 10px 12px}.status-line{font-size:12px}.review-list{grid-template-columns:1fr}.result-actions{display:grid}.result-actions button{width:100%}.current-mode-box{font-size:14px}}
@media(max-width:390px){.preview-grid{grid-template-columns:1fr}.selection-footer{grid-template-columns:1fr}.selection-footer button{width:100%}.hand-card{font-size:16px;min-height:136px}.central-text{font-size:27px}.utility-btn{top:max(9px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:760px) and (min-width:621px){.hand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:620px){.data-browser-modal{padding:15px}.data-entry{grid-template-columns:1fr}.data-entry-meta{align-items:flex-start;text-align:left}.match-chips{grid-template-columns:1fr}.data-source-note{font-size:11px}}


/* =========================================================
   v0.7 — PRE-LOBBY DISPLAY SETTINGS / MONOCHROME THEMES
   ========================================================= */
.prelobby-settings{
  margin-top:28px;
  max-width:760px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.prelobby-settings-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.prelobby-settings-head .field-label{margin:0 0 4px}
.prelobby-settings-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.settings-badge{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.09em;
  color:var(--muted);
}
.theme-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.theme-option{
  min-height:92px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 26px;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:16px;
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:.16s transform,.16s border-color,.16s box-shadow;
}
.theme-option:hover{transform:translateY(-1px)}
.theme-option.selected{
  border-color:var(--text);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 14%,transparent);
}
.theme-preview{
  height:62px;
  border-radius:11px;
  padding:11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:1px solid #888;
}
.theme-preview i{display:block;height:5px;border-radius:999px}
.theme-preview i:nth-child(1){width:72%}
.theme-preview i:nth-child(2){width:92%}
.theme-preview i:nth-child(3){width:54%}
.theme-preview-dark{background:#000;border-color:#343434}
.theme-preview-dark i{background:#fff}
.theme-preview-light{background:#fff;border-color:#d2d2d2}
.theme-preview-light i{background:#111}
.theme-option-copy{display:grid;gap:5px;min-width:0}
.theme-option-copy strong{font-size:17px;letter-spacing:.04em}
.theme-option-copy small{color:var(--muted);font-size:11px;font-weight:800}
.theme-check{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);
  opacity:.25;font-weight:1000;
}
.theme-option.selected .theme-check{opacity:1;background:var(--text);color:var(--bg)}
.theme-save-note{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.45}

/* Shared monochrome setup */
body[data-theme="mono-dark"]{
  --bg:#000000;
  --bg2:#000000;
  --panel:#090909;
  --panel-strong:#050505;
  --line:#343434;
  --text:#ffffff;
  --muted:#b8b8b8;
  --cyan:#ffffff;
  --blue:#ffffff;
  --violet:#ffffff;
  --magenta:#ffffff;
  --gold:#ffffff;
  --green:#ffffff;
  --danger:#ffffff;
  --shadow:0 18px 60px rgba(0,0,0,.58);
  color-scheme:dark;
}
body[data-theme="mono-light"]{
  --bg:#ffffff;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel-strong:#ffffff;
  --line:#d1d1d1;
  --text:#111111;
  --muted:#565656;
  --cyan:#111111;
  --blue:#111111;
  --violet:#111111;
  --magenta:#111111;
  --gold:#111111;
  --green:#111111;
  --danger:#111111;
  --shadow:0 18px 50px rgba(0,0,0,.10);
  color-scheme:light;
}
body[data-theme^="mono-"] .fx,
body[data-theme^="mono-"] .grid-bg{display:none!important}
body[data-theme^="mono-"] .brand-mark{
  background:var(--text)!important;
  color:var(--bg)!important;
  box-shadow:none!important;
}
body[data-theme^="mono-"] .eyebrow,
body[data-theme^="mono-"] .mode-chip,
body[data-theme^="mono-"] .mode-strip span,
body[data-theme^="mono-"] .preview-timer,
body[data-theme^="mono-"] .study-live-badge,
body[data-theme^="mono-"] .data-type-badge,
body[data-theme^="mono-"] .selection-pill,
body[data-theme^="mono-"] .rule-num{
  background:transparent!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
body[data-theme^="mono-"] .dot{
  background:var(--text)!important;
  box-shadow:none!important;
}
body[data-theme^="mono-"] :is(
  .glass,.mode-card,.selection-footer,.utility-btn,.study-card,
  .hud-box,.timer-box,.play-zone,.central-card,.hand-card,
  .center-study-strip,.feedback-card,.modal,.result-summary,
  .review-item,.current-mode-box,.rule-item,.toast,.data-source-note,
  .data-search,.data-entry,.match-group,.match-chip,.stat-row,.user-chip
){
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none;
}
body[data-theme^="mono-"] :is(
  .subtitle,.microcopy,.brand-copy p,.lobby-panel p,.section-heading p,
  .mode-card p,.selection-summary span,.hud-label,.timer-label,.status-line,
  .hand-heading span,.feedback-sub,.result-label,.result-summary-row span,
  .review-mean,.data-source-note,.data-search-wrap,.data-entry-main span,
  .data-entry-main em,.data-entry-meta,.match-chip small,.data-empty,
  .theme-option-copy small,.theme-save-note,.prelobby-settings-head p
){color:var(--muted)!important}
body[data-theme^="mono-"] :is(
  .field-label,.mode-section-title,.mode-chip,.mode-arrow,.stage-kicker,
  .study-pron,.center-type,.status-line.active,.new-card-badge,
  .new-card-study-row b,.center-study-item b,.review-pron,
  .current-mode-box strong,.match-group summary strong
){color:var(--text)!important}
body[data-theme^="mono-"] .text-input{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
body[data-theme^="mono-"] .text-input::placeholder,
body[data-theme^="mono-"] .data-search::placeholder{color:var(--muted)!important}
body[data-theme^="mono-"] :is(.primary-btn,.solo-launch,.hit-btn){
  background:var(--text)!important;
  color:var(--bg)!important;
  box-shadow:none!important;
  border:1px solid var(--text)!important;
}
body[data-theme^="mono-"] :is(.secondary-btn,.ghost-btn,.icon-btn){
  background:var(--panel)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
}
body[data-theme^="mono-"] .mode-card.selected,
body[data-theme^="mono-"] .hand-card.selectable{
  border-color:var(--text)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)!important;
}
body[data-theme^="mono-"] .hand-card.hint-answer{
  border:3px solid var(--text)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 15%,transparent)!important;
}
body[data-theme^="mono-"] .countdown-number,
body[data-theme^="mono-"] .result-score{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  filter:none!important;
}
body[data-theme^="mono-"] .go-word{
  color:var(--text)!important;
  filter:none!important;
}
body[data-theme^="mono-"] .deck-orbit{
  background:var(--panel)!important;
  border-color:var(--line)!important;
  box-shadow:5px 5px 0 color-mix(in srgb,var(--text) 12%,transparent),10px 10px 0 color-mix(in srgb,var(--text) 7%,transparent)!important;
}
body[data-theme^="mono-"] .deck-orbit::after{color:var(--text)!important}
body[data-theme^="mono-"] .feedback-overlay,
body[data-theme^="mono-"] .modal-backdrop{
  background:color-mix(in srgb,var(--bg) 82%,transparent)!important;
}
body[data-theme^="mono-"] .feedback-card.correct,
body[data-theme^="mono-"] .feedback-card.wrong{
  border-color:var(--text)!important;
}
body[data-theme^="mono-"] .feedback-title.correct,
body[data-theme^="mono-"] .feedback-title.wrong,
body[data-theme^="mono-"] .rules-warning,
body[data-theme^="mono-"] .difficulty{
  color:var(--text)!important;
}
body[data-theme^="mono-"] .new-card-study-info,
body[data-theme^="mono-"] .result-summary-row,
body[data-theme^="mono-"] .review-sentence,
body[data-theme^="mono-"] .match-group[open] summary{
  border-color:var(--line)!important;
}
body[data-theme="mono-light"] .app-shell{background:#fff}
body[data-theme="mono-light"] .theme-option.selected .theme-check{background:#111;color:#fff}
body[data-theme="mono-light"] .modal-backdrop,
body[data-theme="mono-light"] .feedback-overlay{background:rgba(255,255,255,.82)!important}
body[data-theme="mono-light"] .hand-card,
body[data-theme="mono-light"] .central-card{background:#fff!important}
body[data-theme="mono-light"] .new-card-badge{background:#111!important;color:#fff!important}
body[data-theme="mono-dark"] .new-card-badge{background:#fff!important;color:#000!important}

@media(max-width:620px){
  .theme-options{grid-template-columns:1fr}
  .theme-option{min-height:82px}
  .prelobby-settings{margin-top:22px}
}

/* v0.8 — larger hand cards and clearer typography */
.hand-main{
  display:block;
  width:100%;
  font-size:inherit;
  line-height:1.36;
  letter-spacing:-.015em;
}
.new-card-study-info{
  width:100%;
  margin-top:12px;
  padding-top:10px;
}
.new-card-study-row{
  font-size:13px!important;
  line-height:1.42!important;
  font-weight:800!important;
}
.new-card-study-row b{
  font-size:11px!important;
}
.new-card-badge{
  left:9px!important;
  top:8px!important;
  padding:4px 8px!important;
  font-size:10px!important;
}
.card-number{
  right:9px!important;
  top:8px!important;
  font-size:11px!important;
}

@media(max-width:760px) and (min-width:621px){.hand-card{min-height:155px;font-size:18px;padding:17px 12px}.hand-grid{gap:10px}}

@media(min-width:901px){.central-area{min-height:245px;padding-top:18px}.central-card{min-height:185px}.hit-btn{height:80px}.hit-wrap{margin-bottom:14px}}


/* =========================================================
   v0.9 — LARGE TYPE / LARGE HAND / WIDE SINGLE-LINE CENTER
   ========================================================= */

/* 전체 화면과 기본 글씨를 한 단계 크게 */
body{
  font-size:19px;
}
.screen{
  width:min(1500px,100%);
}
.game-screen{
  width:min(1580px,100%);
}
.app-shell{
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
}

/* 첫 화면 / 로비 / 모드 선택 */
.brand-copy h1{font-size:clamp(34px,4.5vw,58px)}
.brand-copy p{font-size:17px}
.eyebrow{font-size:15px;padding:9px 13px}
.big-title{font-size:clamp(46px,7vw,88px)}
.subtitle{font-size:clamp(22px,2.4vw,29px)}
.field-label{font-size:18px}
.text-input{min-height:70px;font-size:23px}
.primary-btn,.secondary-btn,.ghost-btn{min-height:66px;padding:0 26px;font-size:19px}
.microcopy{font-size:15px}
.user-chip{font-size:17px;padding:11px 15px}
.lobby-panel h2{font-size:clamp(36px,4.5vw,58px)}
.lobby-panel p{font-size:18px}
.solo-launch{padding:28px}
.solo-launch strong{font-size:34px}
.solo-launch small{font-size:16px}
.solo-launch .arrow{font-size:38px}
.stat-row{padding:19px 20px;font-size:18px}
.stat-button small{font-size:13px}
.section-heading h2{font-size:clamp(34px,4.5vw,54px)}
.section-heading p{font-size:17px}
.mode-section-title{font-size:21px}
.mode-card{padding:25px}
.mode-card h3{font-size:29px}
.mode-card p{font-size:17px}
.difficulty{font-size:15px}
.mode-chip{font-size:15px;padding:7px 10px}
.selection-summary strong{font-size:18px}
.selection-summary span{font-size:16px}

/* 상단 게임 HUD */
.hud-box{min-height:78px;padding:13px 18px}
.hud-label{font-size:14px}
.hud-value{font-size:28px}
.timer-box{min-width:175px;padding:10px 28px}
.timer-label{font-size:14px}
.timer-value{font-size:40px}
.mode-strip span{font-size:15px;padding:8px 14px}

/* 중앙 문제 카드:
   데스크톱/태블릿에서는 가능한 한 무조건 한 줄 유지.
   짧은 문장은 크게, 긴 문장은 길이에 따라 자동으로 한 단계씩 축소. */
.central-area{
  min-height:300px;
  padding:20px 6px 14px;
}
.central-card{
  width:min(1180px,96%);
  min-height:245px;
  padding:30px 38px;
  border-radius:28px;
}
.center-type{
  font-size:14px;
  margin-bottom:17px;
}
.central-text{
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.08;
  letter-spacing:-.035em;
}
.central-text.center-short{font-size:clamp(48px,5vw,72px)}
.central-text.center-medium{font-size:clamp(40px,4.2vw,62px)}
.central-text.center-long{font-size:clamp(31px,3.3vw,49px)}
.central-text.center-xlong{font-size:clamp(24px,2.6vw,38px)}
.center-study-strip{
  width:min(1180px,96%);
  font-size:15px;
}
.center-study-item{font-size:15px}
.study-live-badge{font-size:12px}
.status-line{
  height:38px;
  font-size:18px;
}
.hit-btn{
  width:min(500px,86vw);
  height:108px;
  font-size:clamp(42px,6vw,62px);
}

/* 손패: v0.8 대비 약 1.5배 */
.hand-zone{padding-top:8px}
.hand-heading{margin-bottom:16px}
.hand-heading strong{font-size:28px}
.hand-heading span{font-size:18px}
.hand-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.hand-card{
  min-height:252px;
  border-radius:24px;
  padding:31px 21px 24px;
  font-size:clamp(27px,2vw,35px);
  line-height:1.34;
}
.hand-card.selectable:hover{
  transform:translateY(-7px);
}
.hand-main{
  font-size:inherit!important;
  line-height:1.34!important;
}
.card-number{
  right:12px!important;
  top:10px!important;
  font-size:15px!important;
}
.new-card-badge{
  left:12px!important;
  top:10px!important;
  padding:5px 10px!important;
  font-size:13px!important;
}
.new-card-study-info{
  margin-top:16px!important;
  padding-top:13px!important;
}
.new-card-study-row{
  font-size:18px!important;
  line-height:1.45!important;
}
.new-card-study-row b{
  font-size:15px!important;
}

/* 정답창 / 결과 / 규칙 / 데이터 목록도 확대 */
.feedback-card{width:min(820px,94%);padding:34px}
.feedback-title{font-size:42px}
.feedback-card.correct .feedback-main,
.feedback-main{font-size:clamp(29px,3.4vw,45px)}
.feedback-card.correct .feedback-sub,
.feedback-sub{font-size:clamp(20px,2.2vw,28px)}
.result-label{font-size:18px}
.result-summary-row{font-size:18px;padding:13px 0}
.review-title{font-size:31px}
.review-en{font-size:23px}
.review-mean{font-size:19px}
.review-pron{font-size:17px}
.review-sentence{font-size:19px}
.modal{width:min(820px,100%);padding:28px}
.modal-head h2{font-size:32px}
.rule-item{font-size:18px;grid-template-columns:39px 1fr;padding:13px}
.rule-num{width:34px;height:34px;font-size:15px}
.current-mode-box{font-size:18px}
.rules-warning{font-size:15px}
.data-source-note{font-size:16px}
.data-search-wrap{font-size:16px}
.data-search{min-height:55px;font-size:19px}
.data-entry-main strong{font-size:20px}
.data-entry-main span{font-size:17px}
.data-entry-main em{font-size:15px}
.data-entry-meta{font-size:13px}
.match-group summary{font-size:18px}
.match-group summary strong{font-size:15px}
.match-chip b{font-size:17px}
.match-chip small{font-size:14px}

/* 태블릿: 카드 자체 크기는 크게 유지하되 3열 */
@media(max-width:1000px) and (min-width:621px){
  .hand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hand-card{
    min-height:235px;
    font-size:clamp(25px,3vw,32px);
  }
  .central-card{width:98%;padding-left:24px;padding-right:24px}
  .central-text.center-short{font-size:clamp(42px,6vw,62px)}
  .central-text.center-medium{font-size:clamp(34px,5vw,52px)}
  .central-text.center-long{font-size:clamp(27px,4vw,40px)}
  .central-text.center-xlong{font-size:clamp(21px,3vw,31px)}
}

/* 휴대폰에서는 화면 폭 때문에 긴 표현은 예외적으로 줄바꿈 허용 */
@media(max-width:620px){
  body{font-size:17px}
  .central-card{
    width:100%;
    min-height:220px;
    padding:22px 14px;
  }
  .central-text{
    white-space:normal;
    line-height:1.16;
  }
  .central-text.center-short{font-size:clamp(34px,10vw,48px)}
  .central-text.center-medium{font-size:clamp(30px,8.8vw,43px)}
  .central-text.center-long{font-size:clamp(25px,7vw,34px)}
  .central-text.center-xlong{font-size:clamp(21px,6vw,29px)}
  .hand-grid{grid-template-columns:1fr}
  .hand-card{
    min-height:215px;
    font-size:clamp(24px,7vw,31px);
    padding:28px 18px 22px;
  }
  .hand-heading strong{font-size:24px}
  .hand-heading span{font-size:15px}
  .hud-value{font-size:22px}
  .timer-value{font-size:34px}
  .status-line{font-size:15px}
  .hit-btn{height:96px;font-size:48px}
  .mode-card h3{font-size:25px}
  .mode-card p{font-size:16px}
}


/* =========================================================
   v1.0 — ORIGINAL BUBBLY ARCADE UI
   둥글고 귀여운 2000s Korean arcade-game 감성.
   특정 게임의 캐릭터/로고/에셋은 사용하지 않음.
   ========================================================= */

:root{
  --bubble-sky:#9eeaff;
  --bubble-blue:#47c9ff;
  --bubble-blue-deep:#168fe8;
  --bubble-yellow:#ffe86e;
  --bubble-orange:#ffb23e;
  --bubble-pink:#ff8fbe;
  --bubble-green:#7ee58e;
  --bubble-ink:#17345f;
  --bubble-line:#2f65a5;
  --bubble-cream:#fffdf4;
}

/* Colorful bubble theme */
body[data-theme="bubble"]{
  --bg:#b8f0ff;
  --bg2:#eafcff;
  --panel:#fffdf7;
  --panel-strong:#ffffff;
  --line:#72b7e7;
  --text:#17345f;
  --muted:#607ca6;
  --cyan:#168fe8;
  --blue:#168fe8;
  --violet:#7b6ee8;
  --magenta:#ed6aa4;
  --gold:#d68a00;
  --green:#299b48;
  --danger:#d74758;
  --shadow:0 10px 0 rgba(47,101,165,.18),0 22px 42px rgba(55,123,179,.18);
  color-scheme:light;
  font-family:"Arial Rounded MT Bold","Trebuchet MS","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  background:
    radial-gradient(circle at 11% 12%,rgba(255,255,255,.95) 0 18px,transparent 19px),
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.80) 0 11px,transparent 12px),
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.85) 0 22px,transparent 23px),
    linear-gradient(180deg,#8ddfff 0%,#c9f4ff 44%,#ecfcff 100%);
}

/* soft bubbly background blobs */
body[data-theme="bubble"] .app-shell::before,
body[data-theme="bubble"] .app-shell::after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:999px;
  filter:blur(.2px);
  pointer-events:none;
}
body[data-theme="bubble"] .app-shell::before{
  width:220px;height:220px;
  left:-70px;bottom:5vh;
  background:rgba(255,232,110,.58);
  box-shadow:280px 65px 0 rgba(255,143,190,.22),840px -80px 0 rgba(126,229,142,.22);
}
body[data-theme="bubble"] .app-shell::after{
  width:150px;height:150px;
  right:-35px;top:13vh;
  background:rgba(255,255,255,.72);
  box-shadow:-320px 30px 0 rgba(255,255,255,.48),-640px 130px 0 rgba(255,255,255,.30);
}

body[data-theme="bubble"] .fx,
body[data-theme="bubble"] .grid-bg{display:none!important}

/* chunky panels */
body[data-theme="bubble"] :is(
  .glass,.mode-card,.selection-footer,.utility-btn,.study-card,
  .hud-box,.timer-box,.play-zone,.central-card,.hand-card,
  .center-study-strip,.feedback-card,.modal,.result-summary,
  .review-item,.current-mode-box,.rule-item,.toast,.data-source-note,
  .data-search,.data-entry,.match-group,.match-chip,.stat-row,.user-chip
){
  background:linear-gradient(180deg,#ffffff 0%,#fffdf5 100%)!important;
  border:3px solid #6eb4e5!important;
  color:#17345f!important;
  box-shadow:0 6px 0 #4a91ca,0 12px 22px rgba(65,137,194,.16)!important;
}

/* headings */
body[data-theme="bubble"] .brand-mark{
  width:56px;height:56px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffe95f,#ffb73d)!important;
  color:#17345f!important;
  border:3px solid #fff;
  box-shadow:0 5px 0 #e48a25,0 8px 18px rgba(52,101,154,.18)!important;
}
body[data-theme="bubble"] .brand-copy h1,
body[data-theme="bubble"] .big-title,
body[data-theme="bubble"] .section-heading h2,
body[data-theme="bubble"] .lobby-panel h2{
  color:#17345f;
  text-shadow:0 3px 0 #fff,0 6px 0 rgba(70,144,204,.14);
  letter-spacing:-.04em;
}
body[data-theme="bubble"] .eyebrow{
  background:#fff4a8!important;
  color:#8d6410!important;
  border:2px solid #f0b33e!important;
  border-radius:999px!important;
  box-shadow:0 3px 0 #d79b31!important;
}

/* bubbly buttons */
body[data-theme="bubble"] :is(.primary-btn,.solo-launch,.hit-btn){
  border:3px solid #fff!important;
  border-radius:24px!important;
  color:#17345f!important;
  background:linear-gradient(180deg,#ffe970 0%,#ffb63e 100%)!important;
  box-shadow:0 7px 0 #db8428,0 12px 20px rgba(52,101,154,.18)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
body[data-theme="bubble"] :is(.primary-btn,.solo-launch,.hit-btn):active{
  transform:translateY(5px)!important;
  box-shadow:0 2px 0 #db8428,0 5px 10px rgba(52,101,154,.14)!important;
}
body[data-theme="bubble"] :is(.secondary-btn,.ghost-btn,.icon-btn,.utility-btn){
  border-radius:18px!important;
  border:3px solid #7ab8e7!important;
  background:linear-gradient(180deg,#fff,#eaf8ff)!important;
  color:#17345f!important;
  box-shadow:0 4px 0 #609dcc!important;
}
body[data-theme="bubble"] .hit-btn{
  background:linear-gradient(180deg,#72e7ff,#2ab2ff)!important;
  border-color:#fff!important;
  box-shadow:0 9px 0 #167cc5,0 15px 28px rgba(25,126,196,.23)!important;
  color:#fff!important;
  text-shadow:0 3px 0 #176aa8,0 0 8px rgba(255,255,255,.35);
  letter-spacing:.03em;
}

/* rounded mode cards */
body[data-theme="bubble"] .mode-card{
  border-radius:28px!important;
  overflow:hidden;
  position:relative;
}
body[data-theme="bubble"] .mode-card::after{
  content:"";
  position:absolute;
  width:78px;height:78px;
  right:-28px;top:-30px;
  border-radius:50%;
  background:rgba(71,201,255,.12);
  box-shadow:-50px 56px 0 rgba(255,143,190,.10);
  pointer-events:none;
}
body[data-theme="bubble"] .mode-card.selected{
  border-color:#2da8f2!important;
  background:linear-gradient(180deg,#fff,#eefbff)!important;
  box-shadow:0 7px 0 #2e8fd0,0 15px 28px rgba(44,138,201,.18)!important;
}
body[data-theme="bubble"] .mode-chip{
  border-radius:999px!important;
  background:#e8f8ff!important;
  color:#176fa9!important;
  border:2px solid #82c9f0!important;
}

/* game HUD */
body[data-theme="bubble"] .hud-box{
  border-radius:24px!important;
}
body[data-theme="bubble"] .timer-box{
  border-radius:26px!important;
  background:linear-gradient(180deg,#fff,#fff8cf)!important;
  border-color:#f5c64f!important;
  box-shadow:0 6px 0 #dca33a!important;
}
body[data-theme="bubble"] .timer-value{color:#e17a21!important}
body[data-theme="bubble"] .mode-strip span{
  border-radius:999px!important;
  background:#e6f7ff!important;
  color:#176fa9!important;
  border:2px solid #8cc9ec!important;
}

/* central challenge card */
body[data-theme="bubble"] .central-card{
  border-radius:38px!important;
  border:5px solid #ffffff!important;
  background:linear-gradient(180deg,#ffffff 0%,#f3fbff 72%,#e8f6ff 100%)!important;
  outline:4px solid #5eade1;
  outline-offset:-8px;
  box-shadow:0 12px 0 #438fca,0 22px 35px rgba(49,117,171,.23)!important;
}
body[data-theme="bubble"] .center-type{
  display:inline-flex;
  align-self:center;
  padding:7px 14px;
  border-radius:999px;
  background:#ffef90;
  color:#7f5e13!important;
  border:2px solid #eab83d;
  font-weight:1000;
}
body[data-theme="bubble"] .central-text{
  color:#17345f!important;
  text-shadow:0 2px 0 #fff;
}

/* hand cards - bubble toy-card feeling */
body[data-theme="bubble"] .hand-card{
  border-radius:30px!important;
  border:4px solid #fff!important;
  outline:3px solid #62ace0;
  outline-offset:-7px;
  background:
    radial-gradient(circle at 86% 16%,rgba(255,255,255,.96) 0 9px,transparent 10px),
    linear-gradient(180deg,#ffffff 0%,#edfaff 100%)!important;
  box-shadow:0 9px 0 #438fca,0 17px 28px rgba(45,116,172,.18)!important;
  color:#17345f!important;
}
body[data-theme="bubble"] .hand-card:nth-child(5n+2){
  background:linear-gradient(180deg,#fff,#fff6da)!important;
  outline-color:#e7b841;
  box-shadow:0 9px 0 #cf9534,0 17px 28px rgba(180,130,45,.15)!important;
}
body[data-theme="bubble"] .hand-card:nth-child(5n+3){
  background:linear-gradient(180deg,#fff,#fff0f6)!important;
  outline-color:#e48bb1;
  box-shadow:0 9px 0 #c96d96,0 17px 28px rgba(190,94,138,.14)!important;
}
body[data-theme="bubble"] .hand-card:nth-child(5n+4){
  background:linear-gradient(180deg,#fff,#efffed)!important;
  outline-color:#72c77c;
  box-shadow:0 9px 0 #53a660,0 17px 28px rgba(64,151,78,.14)!important;
}
body[data-theme="bubble"] .hand-card.selectable{
  animation:bubbleReady 1.15s ease-in-out infinite alternate;
}
@keyframes bubbleReady{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-4px) scale(1.015)}
}
body[data-theme="bubble"] .hand-card.hint-answer{
  border-color:#fff!important;
  outline-color:#ffb430!important;
  box-shadow:0 9px 0 #d67d20,0 0 0 8px rgba(255,203,71,.28),0 20px 30px rgba(196,126,36,.18)!important;
}
body[data-theme="bubble"] .card-number,
body[data-theme="bubble"] .new-card-badge{
  border-radius:999px!important;
  background:#2faef3!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 0 #1879b9;
}

/* feedback */
body[data-theme="bubble"] .feedback-overlay{
  background:rgba(116,208,242,.62)!important;
  backdrop-filter:blur(5px);
}
body[data-theme="bubble"] .feedback-card{
  border-radius:38px!important;
  outline:4px solid rgba(255,255,255,.92);
  outline-offset:-9px;
}
body[data-theme="bubble"] .feedback-card.correct{
  background:linear-gradient(180deg,#fbfff3,#eaffd9)!important;
  border-color:#78d56f!important;
  box-shadow:0 10px 0 #4caf58,0 20px 32px rgba(58,141,72,.20)!important;
}
body[data-theme="bubble"] .feedback-card.wrong{
  background:linear-gradient(180deg,#fff7f8,#ffe5eb)!important;
  border-color:#ef8ba3!important;
  box-shadow:0 10px 0 #d7627f,0 20px 32px rgba(174,68,99,.18)!important;
}

/* results + data browser */
body[data-theme="bubble"] .review-item,
body[data-theme="bubble"] .data-entry,
body[data-theme="bubble"] .match-group{
  border-radius:22px!important;
}
body[data-theme="bubble"] .data-type-badge{
  border-radius:999px!important;
  background:#eef8ff!important;
  border:2px solid #8bc9ef!important;
  color:#176fa9!important;
}
body[data-theme="bubble"] .data-search{
  border-radius:18px!important;
}

/* theme selector preview */
.theme-preview-bubble{
  background:linear-gradient(180deg,#7edcff,#d8f8ff);
  border-color:#4da9df;
}
.theme-preview-bubble i:nth-child(1){background:#ffcf47}
.theme-preview-bubble i:nth-child(2){background:#ffffff}
.theme-preview-bubble i:nth-child(3){background:#ff8fbe}
body[data-theme="bubble"] .theme-option.selected{
  border-color:#399dd9!important;
  box-shadow:0 5px 0 #2d85bd!important;
}
body[data-theme="bubble"] .theme-option.selected .theme-check{
  background:#2faef3;
  color:#fff;
}

/* keep BLACK / WHITE color modes, but inherit new rounded geometry */
body[data-theme^="mono-"] :is(
  .glass,.mode-card,.selection-footer,.utility-btn,.study-card,
  .hud-box,.timer-box,.play-zone,.central-card,.hand-card,
  .center-study-strip,.feedback-card,.modal,.result-summary,
  .review-item,.current-mode-box,.rule-item,.toast,.data-source-note,
  .data-search,.data-entry,.match-group,.match-chip,.stat-row,.user-chip
){
  border-radius:24px!important;
}
body[data-theme^="mono-"] .central-card{border-radius:34px!important}
body[data-theme^="mono-"] .hand-card{border-radius:28px!important}
body[data-theme^="mono-"] :is(.primary-btn,.secondary-btn,.ghost-btn,.hit-btn,.icon-btn,.utility-btn){
  border-radius:20px!important;
}

/* mobile */
@media(max-width:620px){
  body[data-theme="bubble"] .hand-card{border-radius:26px!important}
  body[data-theme="bubble"] .central-card{border-radius:30px!important}
  .theme-options{grid-template-columns:1fr}
}


/* =========================================================
   v1.2 — SOLO TOPIC / LEVEL SETUP
   ========================================================= */
.setup-panel{
  margin-top:18px;
  padding:26px;
  border-radius:30px!important;
}
.setup-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.setup-heading > div{
  display:grid;
  gap:5px;
}
.setup-heading strong{
  font-size:27px;
  line-height:1.15;
}
.setup-heading span{
  color:var(--muted);
  font-size:16px;
}
.ghost-btn.mini{
  min-height:48px;
  padding:0 16px;
  font-size:15px;
}
.topic-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.topic-choice{
  position:relative;
  min-height:170px;
  padding:21px 18px 18px;
  border:3px solid var(--line);
  border-radius:28px;
  background:var(--panel);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  transition:.16s transform,.16s box-shadow,.16s border-color;
}
.topic-choice:hover{transform:translateY(-3px)}
.topic-choice.selected{
  border-color:var(--blue);
  box-shadow:0 7px 0 color-mix(in srgb,var(--blue) 75%,#17345f),0 14px 24px rgba(30,110,170,.16);
}
.topic-emoji{
  font-size:38px;
  line-height:1;
}
.topic-copy{
  display:grid;
  gap:5px;
}
.topic-copy strong{
  font-size:27px;
}
.topic-copy small{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  font-weight:800;
}
.topic-count{
  font-size:13px;
  font-weight:1000;
  color:var(--muted);
}
.choice-check{
  position:absolute;
  right:14px;
  top:14px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid var(--line);
  opacity:.22;
  font-weight:1000;
}
.topic-choice.selected .choice-check{
  opacity:1;
  color:#fff;
  background:var(--blue);
  border-color:#fff;
}
.level-choice-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.level-choice{
  min-height:176px;
  padding:20px 14px;
  border:3px solid var(--line);
  border-radius:25px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  gap:7px;
  transition:.16s transform,.16s box-shadow,.16s border-color;
}
.level-choice:hover{transform:translateY(-3px)}
.level-choice.selected{
  border-color:var(--gold);
  box-shadow:0 7px 0 color-mix(in srgb,var(--gold) 72%,#9e6a16),0 13px 22px rgba(160,115,35,.16);
}
.level-stars{
  color:var(--gold);
  font-size:20px;
  letter-spacing:1px;
  white-space:nowrap;
}
.level-choice strong{font-size:24px}
.level-choice > span:not(.level-stars){
  font-size:14px;
  color:var(--muted);
  line-height:1.38;
  font-weight:800;
}
.level-choice small{
  margin-top:auto;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}
.setup-note{
  margin:16px 0 8px;
  padding:16px 19px;
  border-radius:20px;
  border:2px dashed var(--line);
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.setup-note strong{color:var(--text)}
body[data-theme="bubble"] .topic-choice{
  border-color:#88c9ef;
  box-shadow:0 5px 0 #71aed5;
  background:linear-gradient(180deg,#fff,#f4fbff);
}
body[data-theme="bubble"] .topic-choice.selected{
  border-color:#2faef3;
  box-shadow:0 7px 0 #2484be,0 15px 25px rgba(47,142,202,.18);
}
body[data-theme="bubble"] .level-choice{
  border-color:#91c9e9;
  box-shadow:0 5px 0 #72a9cb;
  background:linear-gradient(180deg,#fff,#fffdf4);
}
body[data-theme="bubble"] .level-choice.selected{
  border-color:#f0bd43;
  background:linear-gradient(180deg,#fffef6,#fff7c8);
  box-shadow:0 7px 0 #d69a2e,0 15px 25px rgba(184,126,30,.16);
}
body[data-theme^="mono-"] :is(.topic-choice,.level-choice,.setup-panel,.setup-note){
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
body[data-theme^="mono-"] :is(.topic-choice.selected,.level-choice.selected){
  border-color:var(--text)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 15%,transparent)!important;
}
body[data-theme^="mono-"] .choice-check{
  background:var(--text)!important;
  color:var(--bg)!important;
  border-color:var(--text)!important;
}
body[data-theme^="mono-"] .level-stars{color:var(--text)!important}

@media(max-width:1100px){
  .topic-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .level-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .setup-panel{padding:18px 14px}
  .setup-heading{align-items:flex-start}
  .setup-heading strong{font-size:23px}
  .topic-choice-grid{grid-template-columns:1fr 1fr;gap:9px}
  .topic-choice{min-height:155px;padding:16px 12px}
  .topic-copy strong{font-size:22px}
  .topic-copy small{font-size:12px}
  .level-choice-grid{grid-template-columns:1fr}
  .level-choice{min-height:118px}
}


/* =========================================================
   v1.3 — GLOBAL INTERACTIVE AUDIO FEEDBACK
   Every selectable item gets a visual hover reaction.
   ========================================================= */
.audio-start-note{
  margin:14px 0 0;
  padding:11px 14px;
  border-radius:16px;
  border:2px dashed color-mix(in srgb,var(--blue) 45%,var(--line));
  background:color-mix(in srgb,var(--panel) 88%,var(--blue) 12%);
  color:var(--muted);
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

:is(
  button:not(:disabled),
  summary,
  [role="button"],
  .hand-card.selectable,
  .mode-card,
  .theme-option,
  [data-topic],
  [data-level],
  .stat-button
){
  transition:
    transform .11s cubic-bezier(.2,.9,.2,1.3),
    box-shadow .11s ease,
    filter .11s ease,
    border-color .11s ease,
    background .11s ease!important;
  transform-origin:center;
}

:is(
  button:not(:disabled),
  summary,
  [role="button"],
  .hand-card.selectable,
  .mode-card,
  .theme-option,
  [data-topic],
  [data-level],
  .stat-button
).ui-hovered{
  transform:translateY(-4px) scale(1.018);
  filter:brightness(1.045) saturate(1.06);
}

:is(
  button:not(:disabled),
  summary,
  [role="button"],
  .hand-card.selectable,
  .mode-card,
  .theme-option,
  [data-topic],
  [data-level],
  .stat-button
):focus-visible{
  outline:4px solid color-mix(in srgb,var(--blue) 62%,white);
  outline-offset:4px;
}

/* Stronger response for major actions */
:is(.primary-btn,.solo-launch,.hit-btn).ui-hovered{
  transform:translateY(-6px) scale(1.025);
}

/* Hand cards should feel like physical toy cards */
.hand-card.selectable.ui-hovered{
  transform:translateY(-9px) scale(1.025)!important;
}

/* Bubble theme gets a bright arcade rim on hover */
body[data-theme="bubble"] :is(
  button:not(:disabled),
  summary,
  [role="button"],
  .mode-card,
  .theme-option,
  [data-topic],
  [data-level],
  .stat-button
).ui-hovered{
  box-shadow:
    0 7px 0 #438fca,
    0 0 0 5px rgba(255,255,255,.74),
    0 15px 26px rgba(45,116,172,.21)!important;
}

body[data-theme="bubble"] .hand-card.selectable.ui-hovered{
  box-shadow:
    0 11px 0 #438fca,
    0 0 0 6px rgba(255,255,255,.82),
    0 20px 32px rgba(45,116,172,.24)!important;
}

/* Do not leave stuck hover transforms on touch screens */
@media(hover:none){
  .ui-hovered{transform:none!important;filter:none!important}
}

/* =========================================================
   v1.4 — SEPARATE BGM / SFX CONTROLS
   ========================================================= */
.bgm-fab,.sfx-fab{
  min-width:118px;
}
.bgm-fab[aria-pressed="true"],
.sfx-fab[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--blue) 55%,white)!important;
}
.bgm-fab[aria-pressed="false"],
.sfx-fab[aria-pressed="false"]{
  opacity:.68;
  filter:saturate(.25);
}
body[data-theme="bubble"] .bgm-fab[aria-pressed="true"]{
  background:linear-gradient(180deg,#fff7a9,#ffd14e)!important;
  color:#654a00!important;
  border-color:#fff!important;
  box-shadow:0 5px 0 #d89524,0 9px 16px rgba(60,110,150,.16)!important;
}
body[data-theme="bubble"] .sfx-fab[aria-pressed="true"]{
  background:linear-gradient(180deg,#c9f8ff,#66dbff)!important;
  color:#15578b!important;
  border-color:#fff!important;
  box-shadow:0 5px 0 #3f9fd1,0 9px 16px rgba(60,110,150,.16)!important;
}
body[data-theme="bubble"] :is(.bgm-fab,.sfx-fab)[aria-pressed="false"]{
  background:linear-gradient(180deg,#f2f4f7,#d9e0e8)!important;
  color:#67788b!important;
  border-color:#fff!important;
  box-shadow:0 4px 0 #9da9b5!important;
}
@media(max-width:900px){
  .bgm-fab,.sfx-fab{min-width:48px}
}

/* v1.5 — friendlier Korean UI rhythm */
body{
  letter-spacing:-0.015em;
}
.subtitle,.microcopy,.setup-note,.selection-summary span,.rules-warning,
.data-source-note,.audio-start-note,.theme-save-note{
  line-height:1.58!important;
}
.rule-item span:last-child{
  line-height:1.55;
}
.feedback-sub{
  line-height:1.5!important;
}

/* =========================================================
   v1.6 — AUDIO MIXER / AVATAR SHOP
   ========================================================= */
.rules-fab{right:max(14px,env(safe-area-inset-right))!important}
.audio-dock{
  position:fixed;z-index:42;top:max(14px,env(safe-area-inset-top));
  right:max(140px,calc(env(safe-area-inset-right) + 140px));
  display:flex;gap:9px;align-items:center;
}
.audio-control{
  display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 5px;border-radius:999px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  border:2px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.audio-control .utility-btn{
  position:static!important;min-width:100px;box-shadow:none!important;
  border:0!important;background:transparent!important;padding:0 8px!important;
}
.audio-slider{width:92px;accent-color:var(--blue);cursor:pointer}
.user-area{display:flex;align-items:center;gap:10px}
.point-chip{
  padding:10px 14px;border-radius:999px;font-weight:1000;
  border:2px solid var(--line);background:var(--panel);color:var(--text);
}
.mini-avatar-wrap{width:70px;height:58px;display:grid;place-items:center}

.egg-avatar{
  position:relative;
  width:150px;
  height:135px;
  margin:18px auto;
  isolation:isolate;
}
.egg-avatar.mini{
  transform:scale(.38);
  transform-origin:center;
  margin:0;
  width:150px;
  height:135px;
}
.egg-avatar.large{
  transform:scale(1.35);
  transform-origin:center;
  margin:52px auto 64px;
}
.egg-avatar.result{
  transform:scale(.78);
  transform-origin:center;
  margin:0 auto;
}
.egg-avatar.shop-thumb{
  transform:scale(.52);
  transform-origin:center;
  margin:0;
}
.egg-body{
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:4px;
  height:105px;
  border-radius:70px 70px 34px 34px / 84px 84px 28px 28px;
  background:linear-gradient(160deg,#ffffff 0%,#fffdf2 48%,#eee9d8 100%);
  border:5px solid #6da9d0;
  box-shadow:0 8px 0 #438fca, inset -10px -8px 0 rgba(111,145,163,.08);
  overflow:hidden;
}
.egg-shine{
  position:absolute;
  top:14px;
  left:20px;
  width:28px;
  height:15px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  transform:rotate(-24deg);
}
.default-eyes{
  position:absolute;
  top:34px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:25px;
}
.default-eyes i{
  width:8px;
  height:11px;
  border-radius:50%;
  background:#24384d;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.38);
}
.default-nose{
  position:absolute;
  left:50%;
  top:58px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#e6ab85;
  transform:translateX(-50%);
  border:1px solid #8d6a58;
}
.default-mouth{
  position:absolute;
  left:50%;
  top:72px;
  width:27px;
  height:14px;
  transform:translateX(-50%);
  border-bottom:4px solid #24384d;
  border-radius:0 0 30px 30px;
}
.avatar-svg{
  position:absolute;
  inset:0;
  width:150px;
  height:135px;
  overflow:visible;
  pointer-events:none;
  transform:none;
  transform-origin:75px 67.5px;
}
.avatar-svg.slot-effect{z-index:1}
.avatar-svg.slot-eyes{z-index:4}
.avatar-svg.slot-nose{z-index:4}
.avatar-svg.slot-mouth{z-index:4}
.avatar-svg.slot-glasses{z-index:5}
.avatar-svg.slot-hat{z-index:6}
.avatar-svg.slot-gloves{z-index:7}
.shop-item-visual{
  width:92px;
  height:79px;
  display:grid;
  place-items:center;
  overflow:visible;
  margin:0 auto 2px;
}

.lobby-shop-actions{margin-top:18px}
.shop-layout{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px}
.shop-avatar-panel,.shop-list-panel{padding:26px;border-radius:30px}
.shop-avatar-panel{text-align:center;align-self:start;position:sticky;top:90px}
.shop-avatar-panel h2,.shop-list-panel h2{font-size:34px;margin:8px 0}
.point-balance{font-size:42px;font-weight:1000;margin-top:12px}
.shop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.shop-head>strong{font-size:28px}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.shop-item{
  min-height:226px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:14px;border-radius:22px;background:var(--panel);
  border:2px solid var(--line);text-align:center;
}
.shop-item.is-equipped{outline:4px solid color-mix(in srgb,var(--blue) 45%,transparent)}
.shop-item strong{font-size:17px}
.shop-item>span{font-size:12px;color:var(--muted)}
.shop-action{
  width:100%;min-height:42px;margin-top:auto;border-radius:14px;border:2px solid var(--line);
  background:var(--text);color:var(--bg);font-weight:950;cursor:pointer
}
.shop-action:disabled{opacity:.45;cursor:not-allowed}
.shop-action.equipped{opacity:1;background:var(--green);color:white}
.result-points{margin-top:12px;font-size:24px;font-weight:1000;color:var(--gold)}
.result-avatar{display:grid;place-items:center;min-width:170px}

.level-choice{min-height:92px}
.level-choice strong{font-size:24px}
.level-count-line{margin-top:14px;text-align:right;font-size:17px;font-weight:850;color:var(--muted)}
.topic-choice .topic-copy small{display:none}

@media(max-width:1050px){
  .audio-dock{top:68px;right:max(12px,env(safe-area-inset-right));flex-direction:column;align-items:flex-end}
  .audio-control{padding:3px 7px}
  .audio-slider{width:76px}
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .shop-layout{grid-template-columns:1fr}
  .shop-avatar-panel{position:static}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audio-dock{position:fixed;top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:10px;z-index:90}
  .audio-control .utility-btn span{display:none}
  .audio-control .utility-btn{min-width:44px}
  .audio-slider{width:62px}
}

/* v1.8 — local Web Audio mixer */
.volume-value{
  min-width:28px;
  text-align:right;
  font-size:11px;
  font-weight:1000;
  color:var(--muted);
}
.audio-slider{
  cursor:pointer;
}
@media(max-width:900px){
  .volume-value{display:none}
}

/* v1.9 — embedded MP3 BGM */
#bgmAudio{display:none!important}

/* v2.0 — shop try-on */
.shop-preview-btn{
  width:100%;
  min-height:38px;
  border-radius:13px;
  border:2px dashed color-mix(in srgb,var(--blue) 55%,var(--line));
  background:color-mix(in srgb,var(--panel) 85%,var(--blue) 15%);
  color:var(--text);
  font-weight:950;
  cursor:pointer;
}
.shop-item.is-previewed{
  outline:4px dashed color-mix(in srgb,var(--gold) 75%,white);
  outline-offset:2px;
}
.shop-preview-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* v2.2 — accessory proportions are locked to the egg's SVG coordinate system */
.shop-item{
  overflow:visible;
}
.shop-item-visual .egg-avatar{
  pointer-events:none;
}
.shop-item.is-previewed .shop-item-visual{
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 65%,transparent));
}

/* v2.3 — shop card layout fix: preview never overlaps item name */
.shop-item{
  min-height:250px;
  display:grid;
  grid-template-rows:112px 1fr;
  align-items:stretch;
  justify-items:stretch;
  gap:8px;
  padding:12px;
  overflow:hidden;
}
.shop-item-preview-area{
  position:relative;
  width:100%;
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:16px;
  background:color-mix(in srgb,var(--panel) 88%,var(--blue) 12%);
}
.shop-item-visual{
  width:150px;
  height:135px;
  display:grid;
  place-items:center;
  margin:0;
  transform:scale(.68);
  transform-origin:center center;
}
.shop-item-visual .egg-avatar.shop-thumb{
  transform:none;
  margin:0;
  width:150px;
  height:135px;
}
.shop-item-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  text-align:center;
}
.shop-item-name{
  display:block;
  min-height:2.5em;
  line-height:1.25;
  font-size:16px;
  overflow-wrap:anywhere;
  word-break:keep-all;
  position:relative;
  z-index:3;
}
.shop-item-slot{
  display:block;
  min-height:1.25em;
  font-size:12px;
  color:var(--muted);
}
.shop-item-info .shop-preview-btn,
.shop-item-info .shop-action{
  position:relative;
  z-index:3;
  flex:0 0 auto;
}
@media(max-width:760px){
  .shop-item{
    min-height:242px;
    grid-template-rows:104px 1fr;
  }
  .shop-item-preview-area{height:104px}
  .shop-item-visual{transform:scale(.62)}
}

/* v2.4 — CE mark removed / back buttons on upper-left */
.brand-text-only{gap:0}
.topbar.with-back{
  justify-content:flex-start;
  align-items:flex-start;
}
.back-btn{
  flex:0 0 auto;
  min-height:46px;
  padding:0 16px;
  margin-right:12px;
}
.section-heading.compact{
  margin:0;
  min-height:46px;
  align-items:center;
}
.section-heading.compact h2{margin-top:5px}
.lobby-shop-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.achievement-lobby-btn{width:100%}

/* Achievements */
.achievement-screen{align-self:flex-start}
.achievement-summary{
  padding:20px 22px;
  margin-bottom:16px;
}
.achievement-summary>div:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-weight:900;
}
.achievement-summary>div:first-child span{color:var(--muted)}
.achievement-summary>div:first-child strong{font-size:24px}
.achievement-total-bar,.achievement-progress-bar{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.achievement-total-bar{margin-top:13px;height:12px}
.achievement-total-bar i,.achievement-progress-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.achievement-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.achievement-card{
  min-height:188px;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(145,190,255,.15);
  background:linear-gradient(180deg,rgba(16,30,52,.90),rgba(8,16,30,.94));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.achievement-card.unlocked{
  border-color:rgba(255,211,110,.52);
  box-shadow:0 0 0 3px rgba(255,211,110,.05),0 14px 32px rgba(0,0,0,.20);
}
.achievement-card.locked{opacity:.68}
.achievement-state{
  align-self:flex-start;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.09);
}
.achievement-card.unlocked .achievement-state{
  color:#3d2c00;
  background:var(--gold);
  border-color:transparent;
}
.achievement-title{
  font-size:19px;
  line-height:1.2;
  font-weight:1000;
}
.achievement-desc{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  flex:1;
}
.achievement-progress{display:grid;gap:6px}
.achievement-progress strong{
  text-align:right;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
@media(max-width:980px){
  .achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lobby-shop-actions{grid-template-columns:1fr}
}
@media(max-width:460px){
  .achievement-grid{grid-template-columns:1fr}
  .back-btn{margin-right:5px;padding:0 12px}
}


/* =========================================================
   v2.5 — LIGHT THEME CONTRAST AUDIT
   bubble + mono-light must never inherit dark-theme white text
   ========================================================= */

/* Theme-specific readable ink */
body[data-theme="bubble"]{
  --light-ink:#17345f;
  --light-muted:#526f98;
  --light-soft:#6b7f9d;
  --light-panel:#fffdf7;
}
body[data-theme="mono-light"]{
  --light-ink:#111111;
  --light-muted:#535353;
  --light-soft:#666666;
  --light-panel:#ffffff;
}

/* A broad safety net for ordinary readable content.
   Deliberately excludes saturated badges/buttons handled below. */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(
  .hero-card,.lobby-panel,.setup-panel,.shop-avatar-panel,.shop-list-panel,
  .result-card,.achievement-summary,.achievement-card,
  .mode-card,.study-card,.central-card,.hand-card,.feedback-card,.modal,
  .current-mode-box,.rule-item,.review-item,.data-entry,.match-group,
  .stat-row,.selection-footer,.hud-box,.timer-box,.center-study-strip
){
  color:var(--light-ink)!important;
}

/* Primary text that used to contain hard-coded white / pale blue */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(
  .field-label,
  .user-chip,
  .stat-row strong,
  .mode-section-title,
  .mode-card h3,
  .mode-chip,
  .preview-timer,
  .study-en,
  .study-mean,
  .center-study-item,
  .new-card-study-row,
  .central-text,
  .hand-main,
  .hand-card,
  .feedback-main,
  .review-title,
  .review-en,
  .review-mean,
  .review-sentence,
  .modal-head h2,
  .rule-item,
  .current-mode-box,
  .data-entry-main strong,
  .data-entry-main span,
  .data-search,
  .match-group summary,
  .match-chip,
  .shop-item-name,
  .shop-item-slot,
  .achievement-title,
  .achievement-desc,
  .achievement-summary,
  .achievement-progress strong,
  .point-balance,
  .result-summary-row strong,
  .result-points
){
  color:var(--light-ink)!important;
}

/* The exact bug reported: correct-answer Korean meaning / subtext */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .feedback-card.correct .feedback-sub,
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .feedback-card .feedback-sub{
  color:var(--light-ink)!important;
  opacity:1!important;
}

/* Correct/wrong titles remain semantic, but dark enough for light cards */
body[data-theme="bubble"] .feedback-title.correct{color:#17783a!important}
body[data-theme="bubble"] .feedback-title.wrong{color:#b92f47!important}
body[data-theme="mono-light"] .feedback-title.correct{color:#176b35!important}
body[data-theme="mono-light"] .feedback-title.wrong{color:#9d2438!important}

/* Secondary/muted copy: still visibly darker than the panel */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(
  .subtitle,.microcopy,.brand-copy p,.lobby-panel p,.section-heading p,
  .mode-card p,.selection-summary span,.hud-label,.timer-label,.status-line,
  .hand-heading span,.result-label,.result-summary-row span,
  .data-source-note,.data-search-wrap,.data-entry-main em,.data-entry-meta,
  .match-chip small,.data-empty,.theme-option-copy small,.theme-save-note,
  .prelobby-settings-head p,.setup-heading span,.topic-count,.level-count-line,
  .shop-avatar-panel p,.achievement-state
){
  color:var(--light-muted)!important;
  opacity:1!important;
}

/* Study labels / pronunciation accents */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(
  .stage-kicker,.study-pron,.center-type,.status-line.active,
  .new-card-study-row b,.center-study-item b,.review-pron,
  .current-mode-box strong,.match-group summary strong
){
  color:var(--blue)!important;
}

/* Center/hand study information needs an actual light surface too */
body[data-theme="bubble"] .center-study-strip{
  background:#f4fbff!important;
  border-color:#78b9e5!important;
}
body[data-theme="mono-light"] .center-study-strip{
  background:#ffffff!important;
  border-color:#c9c9c9!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .new-card-study-info{
  border-top-color:color-mix(in srgb,var(--light-ink) 18%,transparent)!important;
}

/* Inputs: old rules used white text on dark fields */
body[data-theme="bubble"] :is(.text-input,.data-search){
  background:#ffffff!important;
  color:#17345f!important;
  border-color:#78b9e5!important;
}
body[data-theme="mono-light"] :is(.text-input,.data-search){
  background:#ffffff!important;
  color:#111111!important;
  border-color:#c9c9c9!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(.text-input,.data-search)::placeholder{
  color:var(--light-soft)!important;
  opacity:1!important;
}

/* Rules/data modals stay light in light themes */
body[data-theme="bubble"] .modal{
  background:linear-gradient(180deg,#ffffff,#f6fbff)!important;
  color:#17345f!important;
}
body[data-theme="mono-light"] .modal{
  background:#ffffff!important;
  color:#111111!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .rule-item{
  background:color-mix(in srgb,var(--light-panel) 88%,var(--blue) 12%)!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .current-mode-box{
  background:color-mix(in srgb,var(--light-panel) 91%,var(--blue) 9%)!important;
}

/* Results/review: eliminate pale text intended for the dark theme */
body[data-theme="bubble"] :is(.result-summary,.review-item){
  background:#ffffff!important;
  border-color:#83bde3!important;
}
body[data-theme="mono-light"] :is(.result-summary,.review-item){
  background:#ffffff!important;
  border-color:#d0d0d0!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .review-sentence{
  border-top-color:color-mix(in srgb,var(--light-ink) 16%,transparent)!important;
}

/* Achievement cards were still dark from the original theme */
body[data-theme="bubble"] .achievement-card{
  background:linear-gradient(180deg,#ffffff,#f4fbff)!important;
  border-color:#83bde3!important;
  box-shadow:0 5px 0 #5a9dcc,0 10px 22px rgba(65,137,194,.13)!important;
}
body[data-theme="mono-light"] .achievement-card{
  background:#ffffff!important;
  border-color:#d0d0d0!important;
  box-shadow:0 7px 20px rgba(0,0,0,.08)!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .achievement-card.locked{
  opacity:.72!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .achievement-progress-bar,
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .achievement-total-bar{
  background:color-mix(in srgb,var(--light-ink) 12%,transparent)!important;
}

/* Shop card copy should always be dark on its light surface */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .shop-item{
  color:var(--light-ink)!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .shop-preview-btn{
  color:var(--light-ink)!important;
}

/* Audio controls: sliders/text labels visible against their light dock */
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .audio-control{
  color:var(--light-ink)!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .volume-value{
  color:var(--light-muted)!important;
}

/* Exceptions: these intentionally use a saturated/dark background,
   so white text is more readable and should remain white. */
body[data-theme="bubble"] :is(
  .hit-btn,.card-number,.new-card-badge,
  .achievement-card.unlocked .achievement-state,
  .shop-action.equipped
){
  color:#ffffff!important;
}
body[data-theme="mono-light"] :is(
  .new-card-badge,
  .achievement-card.unlocked .achievement-state,
  .shop-action.equipped
){
  color:#ffffff!important;
}

/* Bubble feedback text must be visibly inked on green/pink light cards */
body[data-theme="bubble"] .feedback-card.correct :is(.feedback-main,.feedback-sub){
  color:#17345f!important;
  text-shadow:none!important;
}
body[data-theme="bubble"] .feedback-card.wrong :is(.feedback-main,.feedback-sub){
  color:#17345f!important;
  text-shadow:none!important;
}
body[data-theme="mono-light"] .feedback-card :is(.feedback-main,.feedback-sub){
  color:#111111!important;
  text-shadow:none!important;
}


/* =========================================================
   v2.6 — STUDY INFO SIZE
   ========================================================= */

/* 중앙 문제 카드 아래의 뜻/발음 설명:
   기존 최종값 약 15px → 약 3배 */
.center-study-strip{
  width:min(1280px,98%)!important;
  padding:15px 20px!important;
  gap:12px 24px!important;
}
.center-study-item{
  font-size:45px!important;
  line-height:1.22!important;
  font-weight:850!important;
}
.center-study-item b{
  font-size:33px!important;
  margin-right:12px!important;
  vertical-align:middle!important;
}
.study-live-badge{
  font-size:14px!important;
  padding:6px 10px!important;
}

/* 손패/새 카드의 뜻·발음 설명:
   기존 최종값 약 18px → 약 1.2배 */
.new-card-study-row{
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
}
.new-card-study-row b{
  font-size:18px!important;
  margin-right:5px!important;
}
.new-card-study-info{
  gap:6px!important;
}

/* 작은 화면에서는 카드 자체를 가리지 않도록 비율만 살짝 제한 */
@media(max-width:620px){
  .center-study-item{font-size:34px!important}
  .center-study-item b{font-size:25px!important}
  .center-study-strip{padding:12px 13px!important;gap:9px 14px!important}
  .new-card-study-row{font-size:20px!important}
  .new-card-study-row b{font-size:16px!important}
}

/* v2.7 — SHOP / WARDROBE separation */
.lobby-shop-actions.lobby-three-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop-action.owned{
  background:color-mix(in srgb,var(--panel) 85%,var(--green) 15%);
  color:var(--text);
  opacity:.82;
}
.wardrobe-status{
  margin:10px 0 16px;
  font-size:15px;
  font-weight:900;
  color:var(--muted);
}
.wardrobe-action{
  width:100%;
  min-height:42px;
  margin-top:auto;
  border-radius:14px;
  border:2px solid var(--line);
  font-weight:950;
  cursor:pointer;
}
.wardrobe-action.wear{background:var(--text);color:var(--bg)}
.wardrobe-action.remove{
  background:color-mix(in srgb,var(--danger) 14%,var(--panel));
  color:var(--danger);
}
.wardrobe-item.is-equipped{
  outline:4px solid color-mix(in srgb,var(--green) 55%,transparent);
}
.wardrobe-empty{
  min-height:250px;
  display:grid;
  place-items:center;
  padding:30px;
  text-align:center;
  color:var(--muted);
  font-weight:850;
  border:2px dashed var(--line);
  border-radius:22px;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .wardrobe-action.wear{
  background:var(--light-ink)!important;
  color:#fff!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .wardrobe-action.remove{
  color:#a72b3f!important;
}
@media(max-width:720px){
  .lobby-shop-actions.lobby-three-actions{grid-template-columns:1fr}
}

/* v3.0 — Unit 1 common core */
.unit1-core-banner{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 16px;
  padding:12px 15px;
  border:2px solid color-mix(in srgb,var(--gold) 65%,var(--line));
  border-radius:17px;
  background:color-mix(in srgb,var(--panel) 88%,var(--gold) 12%);
}
.unit1-core-banner strong{
  flex:0 0 auto;
  font-weight:1000;
  color:var(--text);
}
.unit1-core-banner span{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .unit1-core-banner strong{
  color:var(--light-ink)!important;
}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .unit1-core-banner span{
  color:var(--light-muted)!important;
}
@media(max-width:620px){
  .unit1-core-banner{align-items:flex-start;flex-direction:column;gap:4px}
}


/* =========================================================
   v3.1 — GLOBAL FIXED BACK BUTTON
   모든 뒤로가기 버튼은 규칙/음악 버튼처럼 viewport에 고정
   ========================================================= */
.back-btn{
  position:fixed!important;
  top:max(14px,env(safe-area-inset-top))!important;
  left:max(14px,env(safe-area-inset-left))!important;
  right:auto!important;
  bottom:auto!important;
  z-index:96!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 16px!important;
  border-radius:999px!important;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}

/* fixed 버튼이 문서 흐름에서 빠지므로 상단 제목이 버튼 뒤에 가려지지 않게 공간 확보 */
.topbar.with-back{
  min-height:50px;
  padding-left:116px;
}

/* 상점/옷장처럼 topbar에 제목이 없는 화면도 상단 여백을 일정하게 유지 */
.topbar.with-back:has(> .back-btn:only-child){
  min-height:50px;
}

@media(max-width:460px){
  .back-btn{
    top:max(9px,env(safe-area-inset-top))!important;
    left:max(9px,env(safe-area-inset-left))!important;
    min-height:44px!important;
    padding:0 12px!important;
  }
  .topbar.with-back{
    padding-left:102px;
  }
}


/* =========================================================
   v3.3 — BODY-LEVEL BACK BUTTON
   local .back-btn is intentionally hidden; the real button lives
   directly under <body>, just like rules/audio controls.
   ========================================================= */
.back-btn{display:none!important}
.topbar.with-back{
  padding-left:0!important;
  min-height:50px!important;
}
.global-back-fab{
  position:fixed!important;
  z-index:92!important;
  top:max(14px,env(safe-area-inset-top))!important;
  left:max(14px,env(safe-area-inset-left))!important;
  min-height:48px;
  border:1px solid rgba(145,190,255,.18);
  background:rgba(5,13,26,.88);
  backdrop-filter:blur(14px);
  color:#eaf4ff;
  border-radius:999px;
  padding:0 16px;
  font:inherit;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
body[data-theme="bubble"] .global-back-fab{
  background:#ffffff;
  color:#17345f;
  border-color:#78b9e5;
}
body[data-theme="mono-light"] .global-back-fab{
  background:#ffffff;
  color:#111111;
  border-color:#c9c9c9;
}
body[data-theme="mono-dark"] .global-back-fab{
  background:#111111;
  color:#ffffff;
  border-color:#505050;
}
@media(max-width:460px){
  .global-back-fab{
    top:max(9px,env(safe-area-inset-top))!important;
    left:max(9px,env(safe-area-inset-left))!important;
    min-height:44px;
    padding:0 12px;
  }
}

/* =========================================================
   v3.3 — TWO-LAYER SCROLL FOR EXPRESSION/VOCAB MATCH DATABASE
   ========================================================= */
.data-browser-modal{
  height:min(820px,90vh)!important;
  max-height:min(820px,90vh)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.data-browser-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:7px;
}
.match-group{
  flex:0 0 auto;
}
.match-group[open]{
  overflow:hidden!important;
}
.match-chips-scroll{
  max-height:min(360px,42vh)!important;
  min-height:72px;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  align-content:start;
}
.match-loading{
  grid-column:1/-1;
  padding:18px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
  font-weight:800;
}
.data-empty.compact{
  grid-column:1/-1;
  padding:18px;
}
@media(max-width:620px){
  .data-browser-modal{
    height:92vh!important;
    max-height:92vh!important;
  }
  .match-chips-scroll{
    max-height:38vh!important;
  }
}


/* =========================================================
   v3.4 — DATA MATCH BROWSER REBUILD
   No collapsed <details> rows. Every expression is a real card/button.
   ========================================================= */

/* Deleted copy must not leave visible empty shells. */
.data-source-note{display:none!important}

/* Outer match list: one full expression card per row. */
.data-browser-list.match-browser-list{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  align-content:initial!important;
  gap:10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
  padding:2px 8px 8px 1px!important;
  scrollbar-gutter:stable;
}

/* Never let the many rows be compressed into horizontal lines. */
.match-browser-list .match-group{
  display:block!important;
  flex:0 0 auto!important;
  min-height:64px!important;
  height:auto!important;
  overflow:hidden!important;
  border-radius:16px!important;
  border:2px solid color-mix(in srgb,var(--blue) 28%,var(--line))!important;
  background:var(--panel)!important;
}

.match-group-toggle{
  width:100%!important;
  min-height:64px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:12px 14px!important;
  margin:0!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transform:none!important;
}

.match-group-toggle:hover{
  background:color-mix(in srgb,var(--panel) 86%,var(--blue) 14%)!important;
}

.match-expression-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.match-expression-copy b{
  display:block;
  font-size:17px!important;
  line-height:1.3!important;
  color:var(--text)!important;
  overflow-wrap:anywhere;
}
.match-expression-copy small{
  display:block;
  font-size:12px!important;
  line-height:1.35!important;
  color:var(--muted)!important;
  overflow-wrap:anywhere;
}
.match-group-meta{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.match-group-meta strong{
  color:var(--blue)!important;
  font-size:13px!important;
}
.match-group-meta i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-style:normal;
  font-size:18px;
  color:var(--text);
  background:color-mix(in srgb,var(--panel) 80%,var(--blue) 20%);
  transition:transform .16s ease;
}
.match-group.is-open .match-group-meta i{
  transform:rotate(180deg);
}

/* Inner scroll: matching vocabulary for one expression. */
.match-browser-list .match-chips-scroll{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  max-height:min(360px,40vh)!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px!important;
  border-top:1px solid color-mix(in srgb,var(--blue) 22%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 94%,var(--blue) 6%)!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.match-browser-list .match-chips-scroll.hidden{
  display:none!important;
}
.match-browser-list .match-chip{
  min-height:58px;
  padding:10px 11px!important;
  border-radius:12px!important;
}
.match-browser-list .match-chip b{
  font-size:14px!important;
  line-height:1.3!important;
}
.match-browser-list .match-chip small{
  font-size:12px!important;
  line-height:1.35!important;
}

/* Light themes need explicit surfaces and text contrast. */
body[data-theme="bubble"] .match-browser-list .match-group,
body[data-theme="mono-light"] .match-browser-list .match-group{
  background:#fff!important;
}
body[data-theme="bubble"] .match-group-toggle,
body[data-theme="bubble"] .match-expression-copy b,
body[data-theme="mono-light"] .match-group-toggle,
body[data-theme="mono-light"] .match-expression-copy b{
  color:var(--light-ink)!important;
}
body[data-theme="bubble"] .match-expression-copy small,
body[data-theme="mono-light"] .match-expression-copy small{
  color:var(--light-muted)!important;
}

@media(max-width:620px){
  .match-group-toggle{
    min-height:60px!important;
    padding:10px 11px!important;
    gap:9px!important;
  }
  .match-expression-copy b{font-size:15px!important}
  .match-expression-copy small{font-size:11px!important}
  .match-browser-list .match-chips-scroll{
    grid-template-columns:1fr!important;
    max-height:36vh!important;
  }
}


/* =========================================================
   v3.8 — END-OF-GAME ACHIEVEMENT CELEBRATION
   ========================================================= */
.achievement-celebration{
  position:fixed;
  z-index:220;
  inset:0;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,224,104,.24),transparent 29%),
    rgba(2,7,18,.58);
  backdrop-filter:blur(7px);
  animation:achievementOverlayIn .32s ease-out both;
}
.achievement-celebration-card{
  position:relative;
  z-index:3;
  width:min(650px,94vw);
  padding:clamp(30px,6vw,58px) clamp(22px,6vw,56px);
  text-align:center;
  border-radius:30px;
  border:2px solid rgba(255,225,104,.82);
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035)),
    linear-gradient(180deg,#162747,#081226);
  box-shadow:
    0 0 0 8px rgba(255,223,92,.07),
    0 0 70px rgba(255,205,54,.38),
    0 36px 110px rgba(0,0,0,.62);
  animation:achievementCardPop .58s cubic-bezier(.18,.92,.26,1.25) both;
}
.achievement-crown{
  width:94px;
  height:94px;
  margin:0 auto 17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:54px;
  line-height:1;
  color:#6b4300;
  background:linear-gradient(145deg,#fff8bd,#ffd54b 57%,#ff9f1c);
  box-shadow:0 0 0 8px rgba(255,224,88,.11),0 0 45px rgba(255,215,65,.55);
  animation:achievementStarPulse .78s ease-in-out infinite alternate;
}
.achievement-unlocked-label{
  color:#ffe36e;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.19em;
}
.achievement-celebration-title{
  margin-top:10px;
  color:#fff;
  font-size:clamp(29px,5.5vw,54px);
  font-weight:1000;
  line-height:1.12;
  letter-spacing:-.045em;
  text-shadow:0 0 28px rgba(255,218,75,.3);
}
.achievement-celebration-title strong{
  color:#ffe05c;
}
.achievement-celebration-desc{
  margin-top:12px;
  color:#dcecff;
  font-size:clamp(14px,2.2vw,18px);
  font-weight:850;
}
.achievement-more-title{
  margin-top:22px;
  color:#ffe988;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
}
.achievement-more-list{
  margin-top:9px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.achievement-more-list span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,226,106,.38);
  background:rgba(255,224,95,.09);
  color:#fff3b5;
  font-size:12px;
  font-weight:900;
}
.achievement-rays{
  position:absolute;
  z-index:1;
  width:min(900px,120vw);
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(255,221,76,.14) 0deg 9deg,
    transparent 9deg 22deg
  );
  animation:achievementRays 8s linear infinite;
}
.achievement-confetti{
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
}
.achievement-confetti i{
  --c:#ffe05b;
  position:absolute;
  left:var(--x);
  top:-8vh;
  width:10px;
  height:20px;
  border-radius:3px;
  background:var(--c);
  opacity:.98;
  transform:translate3d(0,0,0) rotate(0);
  animation:achievementConfettiFall var(--dur) cubic-bezier(.2,.7,.2,1) var(--delay) forwards;
}
.achievement-confetti i:nth-child(4n+1){--c:#69e8ff;width:8px;height:18px}
.achievement-confetti i:nth-child(4n+2){--c:#ff6bd6;width:11px;height:11px;border-radius:50%}
.achievement-confetti i:nth-child(4n+3){--c:#9dff8d;width:7px;height:19px}
.achievement-confetti i:nth-child(4n){--c:#ffe05b}
@keyframes achievementOverlayIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes achievementCardPop{
  0%{opacity:0;transform:scale(.64) translateY(35px) rotate(-2deg)}
  68%{opacity:1;transform:scale(1.045) translateY(-4px) rotate(.5deg)}
  100%{transform:scale(1) translateY(0)}
}
@keyframes achievementStarPulse{
  from{transform:scale(.93) rotate(-5deg)}
  to{transform:scale(1.08) rotate(5deg)}
}
@keyframes achievementRays{
  to{transform:rotate(360deg)}
}
@keyframes achievementConfettiFall{
  0%{transform:translate3d(0,-12vh,0) rotate(0);opacity:0}
  8%{opacity:1}
  100%{transform:translate3d(var(--drift),112vh,0) rotate(var(--rot));opacity:.9}
}

/* Long new game title */
.brand-copy h1{
  max-width:100%;
  overflow-wrap:anywhere;
}
@media(max-width:620px){
  .achievement-celebration{padding:14px}
  .achievement-celebration-card{border-radius:24px}
  .achievement-crown{width:78px;height:78px;font-size:45px}
}


/* =========================================================
   v3.9 — LARGE LOBBY / RESULT AVATAR
   Old lobby mini: 0.38 scale -> new 1.22 scale (~10.3x area)
   Old result:     0.78 scale -> new 2.48 scale (~10.1x area)
   ========================================================= */

/* Lobby uses the empty half of the SOLO panel for a proper avatar showcase. */
.lobby-solo-panel{
  display:grid!important;
  grid-template-columns:minmax(300px,1fr) minmax(260px,.88fr)!important;
  gap:clamp(18px,3vw,38px)!important;
  align-items:center!important;
  min-height:390px!important;
  overflow:hidden;
}
.lobby-solo-copy{
  min-width:0;
  position:relative;
  z-index:2;
}
.lobby-avatar-showcase{
  position:relative;
  min-width:0;
  height:330px;
  display:grid;
  place-items:center;
  overflow:visible;
}
.egg-avatar.lobby{
  transform:scale(1.22);
  transform-origin:center center;
  margin:0;
  width:150px;
  height:135px;
  filter:drop-shadow(0 24px 24px rgba(0,0,0,.2));
}

/* The old topbar mini wrapper is no longer rendered in the lobby. */
.mini-avatar-wrap{
  display:none;
}

/* Result avatar becomes a central hero instead of a small decoration. */
.result-top{
  grid-template-columns:minmax(190px,.68fr) minmax(370px,1.25fr) minmax(250px,.86fr)!important;
  gap:clamp(18px,3vw,38px)!important;
  align-items:center!important;
}
.result-avatar{
  display:grid!important;
  place-items:center!important;
  min-width:370px!important;
  min-height:350px!important;
  overflow:visible!important;
}
.egg-avatar.result{
  transform:scale(2.48)!important;
  transform-origin:center center!important;
  margin:0!important;
  width:150px!important;
  height:135px!important;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.25));
}

/* Keep the huge avatar proportional on narrower screens. */
@media(max-width:1100px){
  .lobby-solo-panel{
    grid-template-columns:minmax(260px,1fr) minmax(220px,.72fr)!important;
  }
  .lobby-avatar-showcase{
    height:285px;
  }
  .egg-avatar.lobby{
    transform:scale(1.04);
  }

  .result-top{
    grid-template-columns:1fr 300px!important;
  }
  .result-avatar{
    min-width:300px!important;
    min-height:290px!important;
  }
  .egg-avatar.result{
    transform:scale(1.95)!important;
  }
  .result-summary{
    grid-column:1/-1;
  }
}

@media(max-width:760px){
  .lobby-solo-panel{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .lobby-avatar-showcase{
    order:-1;
    height:235px;
  }
  .egg-avatar.lobby{
    transform:scale(.94);
  }

  .result-top{
    grid-template-columns:1fr!important;
    text-align:center;
  }
  .result-avatar{
    min-width:0!important;
    min-height:275px!important;
  }
  .egg-avatar.result{
    transform:scale(1.78)!important;
  }
  .result-summary{
    grid-column:auto;
    text-align:left;
  }
}

@media(max-width:460px){
  .lobby-avatar-showcase{height:205px}
  .egg-avatar.lobby{transform:scale(.80)}
  .result-avatar{min-height:235px!important}
  .egg-avatar.result{transform:scale(1.48)!important}
}

/* =========================================================
   v4.6 — MOBILE TAP / AUDIO / SOLO PENALTY
   ========================================================= */
button,.hand-card.selectable{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.solo-time-penalty{
  position:absolute;right:14px;top:14px;z-index:34;
  padding:8px 12px;border-radius:999px;
  background:rgba(167,43,63,.92);color:#fff;
  font-size:13px;font-weight:1000;letter-spacing:.01em;
  pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:soloPenaltyPop 1.15s ease both;
}
@keyframes soloPenaltyPop{0%{opacity:0;transform:translateY(-8px) scale(.94)}15%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px) scale(.98)}}

@media(max-width:760px){
  /* bottom의 다음/START 버튼을 가리지 않도록 모바일 오디오 믹서를 위쪽으로 이동 */
  .audio-dock{
    position:fixed!important;
    top:max(62px,calc(env(safe-area-inset-top) + 56px))!important;
    bottom:auto!important;
    right:max(7px,env(safe-area-inset-right))!important;
    z-index:90!important;
    gap:5px!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    max-width:132px;
  }
  .audio-control{padding:2px 5px!important;gap:3px!important;box-shadow:0 5px 14px rgba(0,0,0,.16)!important}
  .audio-control .utility-btn{min-width:38px!important;width:38px!important;height:38px!important;padding:0!important;font-size:16px!important}
  .audio-slider{width:54px!important}
  .volume-value{display:none!important}
  .selection-footer{padding-right:12px!important}
}


/* =========================================================
   v4.7 — COLLAPSIBLE OPTIONS / AUDIO MIXER
   One compact Options button keeps sliders off the playfield.
   ========================================================= */
.options-fab{
  right:max(96px,calc(env(safe-area-inset-right) + 96px))!important;
  z-index:93!important;
}
.options-fab.is-open{
  outline:3px solid color-mix(in srgb,var(--blue) 48%,transparent);
  outline-offset:2px;
}
.audio-dock{
  position:fixed!important;
  z-index:94!important;
  top:max(74px,calc(env(safe-area-inset-top) + 66px))!important;
  right:max(14px,env(safe-area-inset-right))!important;
  bottom:auto!important;
  width:min(330px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  display:flex;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  box-sizing:border-box;
  padding:10px!important;
  border:2px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
.audio-dock.hidden{display:none!important}
.audio-control{
  width:100%;
  box-sizing:border-box;
  justify-content:flex-start;
  padding:5px 8px!important;
  gap:8px!important;
}
.audio-control .utility-btn{
  flex:0 0 112px;
  width:112px!important;
  min-width:112px!important;
  height:40px!important;
  min-height:40px!important;
  text-align:left;
  font-size:13px!important;
}
.audio-dock .audio-control .utility-btn span{display:inline!important}
.audio-dock .audio-slider{
  flex:1 1 auto;
  width:auto!important;
  min-width:74px;
}
.audio-dock .volume-value{
  display:inline-block!important;
  flex:0 0 28px;
}
@media(max-width:900px){
  .options-fab{right:max(72px,calc(env(safe-area-inset-right) + 72px))!important}
}
@media(max-width:760px){
  .audio-dock{
    top:max(64px,calc(env(safe-area-inset-top) + 58px))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:min(294px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    padding:8px!important;
  }
  .audio-control{padding:4px 6px!important}
  .audio-control .utility-btn{
    flex-basis:104px;
    width:104px!important;
    min-width:104px!important;
    font-size:12px!important;
  }
  .audio-dock .volume-value{display:none!important}
}
@media(max-width:390px){
  .options-fab{top:max(9px,env(safe-area-inset-top))!important}
}


/* =========================================================
   v4.8 — FRESH HANDS + DELAYED HAND MEANING HINT
   ========================================================= */
.hand-hint-meaning{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:100%;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);
  font-size:13px;
  font-weight:850;
  line-height:1.3;
  opacity:.92;
  animation:vemHandMeaningIn .18s ease both;
  pointer-events:none;
}
.hand-hint-meaning b{
  font-size:10px;
  letter-spacing:.08em;
  opacity:.62;
}
@keyframes vemHandMeaningIn{from{opacity:0;transform:translateY(4px)}to{opacity:.92;transform:none}}
@media(max-width:760px){
  .hand-hint-meaning{font-size:11.5px;margin-top:8px;padding-top:7px}
  .hand-hint-meaning b{font-size:9px}
}

/* =========================================================
   v5.0 — OPTIONS PROFILE ACTION + MOBILE USER HEADER
   ========================================================= */
.options-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);
}
.option-action-btn{
  width:100%!important;
  min-height:46px!important;
  padding:0 14px!important;
  font-size:14px!important;
  border-radius:14px!important;
}
.online-users-btn{
  min-height:46px;
  padding:0 15px;
  border:2px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
  white-space:nowrap;
}
.online-users-btn:hover{transform:translateY(-1px)}
.online-users-btn:disabled{opacity:.55;cursor:wait;transform:none}

@media(max-width:760px){
  /* Fixed Rules / Options live in the top-right. Put identity below them. */
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:14px;
    padding-top:24px;
    margin-bottom:26px;
  }
  .topbar .brand{width:100%;margin-bottom:0}
  .topbar .user-area{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:9px;
    margin-top:8px;
  }
  .topbar .user-chip,
  .topbar .point-chip{
    min-height:54px;
    display:flex;
    align-items:center;
    padding:0 18px;
    font-size:22px!important;
    line-height:1;
    border-width:2px;
    box-sizing:border-box;
  }
  .topbar .user-chip{font-size:23px!important}
  .topbar .point-chip{font-size:24px!important}
  .topbar .online-users-btn{
    min-height:54px;
    padding:0 16px;
    font-size:15px;
  }
}

@media(max-width:430px){
  .topbar{padding-top:30px}
  .topbar .user-area{margin-top:10px}
  .topbar .user-chip,
  .topbar .point-chip{min-height:56px;padding:0 17px}
  .topbar .user-chip{font-size:22px!important}
  .topbar .point-chip{font-size:25px!important}
  .topbar .online-users-btn{width:100%;min-height:50px}
}

/* v5.1 — PVP gear integration */
.avatar-svg.slot-aura{z-index:0}.avatar-svg.slot-belt{z-index:6}.avatar-svg.slot-weapon{z-index:9}
.shop-item-combat{display:block;min-height:34px;padding:7px 8px;border-radius:10px;background:color-mix(in srgb,var(--blue) 9%,var(--panel));color:var(--text);font-size:11px;font-weight:900;line-height:1.35}
.lobby-avatar-showcase{grid-template-rows:1fr auto;gap:8px;padding-bottom:6px}
.pvp-entry-btn{position:relative;z-index:4;width:min(245px,92%);min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid color-mix(in srgb,var(--danger) 55%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 18%,var(--panel)),color-mix(in srgb,var(--gold) 13%,var(--panel)));color:var(--text);box-shadow:0 12px 28px rgba(0,0,0,.14);font:inherit;cursor:pointer}.pvp-entry-btn strong{font-size:17px;font-weight:1000}.pvp-entry-btn small{font-size:10px;font-weight:950;letter-spacing:.08em;color:var(--muted)}.pvp-entry-btn:hover{transform:translateY(-2px)}
@media(max-width:760px){.lobby-avatar-showcase{height:305px!important}.egg-avatar.lobby{transform:scale(.94)}.pvp-entry-btn{width:min(280px,96%);min-height:56px}}@media(max-width:460px){.lobby-avatar-showcase{height:275px!important}.egg-avatar.lobby{transform:scale(.82)!important}}

/* =========================================================
   v5.2 — BLACK THEME CONTRAST SAFETY
   Newer lobby/shop/wardrobe/options elements must never inherit
   light-theme ink or white-on-white action states.
   ========================================================= */
body[data-theme="mono-dark"] :is(
  .topbar,.user-area,.user-chip,.point-chip,.online-users-btn,
  .audio-dock,.audio-control,.options-actions,.option-action-btn,
  .shop-avatar-panel,.shop-list-panel,.shop-item,.wardrobe-item,
  .wardrobe-status,.wardrobe-empty,.achievement-card,.achievement-summary,
  .lobby-avatar-card,.lobby-avatar-showcase,.avatar-info-card,
  .unit1-core-banner,.match-browser-list .match-group,.match-chips-scroll,
  .data-browser-modal,.data-browser-list
){color:#fff!important}
body[data-theme="mono-dark"] :is(
  .audio-dock,.shop-avatar-panel,.shop-list-panel,.shop-item,.wardrobe-item,
  .achievement-card,.lobby-avatar-card,.avatar-info-card,
  .match-browser-list .match-group,.match-chips-scroll,.data-browser-modal
){background:#090909!important;border-color:#3f3f3f!important}
body[data-theme="mono-dark"] :is(
  .shop-item>span,.wardrobe-status,.wardrobe-empty,.achievement-card p,
  .achievement-card small,.unit1-core-banner span,.option-help,.volume-value
){color:#bdbdbd!important}
body[data-theme="mono-dark"] :is(.shop-action.equipped,.achievement-card.unlocked .achievement-state){background:#fff!important;color:#000!important}
body[data-theme="mono-dark"] .shop-action:not(.equipped){background:#fff!important;color:#000!important}
body[data-theme="mono-dark"] .wardrobe-action.wear{background:#fff!important;color:#000!important}
body[data-theme="mono-dark"] .wardrobe-action.remove{background:#151515!important;color:#fff!important;border-color:#4a4a4a!important}
body[data-theme="mono-dark"] :is(.audio-slider){accent-color:#fff}
body[data-theme="mono-dark"] :is(.online-users-btn,.option-action-btn){background:#111!important;color:#fff!important;border-color:#4a4a4a!important}


/* =========================================================
   v5.3 — NEW UNIT 1 GAME THEMES
   ========================================================= */
.new-mode-select{padding-bottom:34px}
.new-mode-select .mode-difficulty-panel{margin:8px 0 24px}
.new-mode-select .level-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.new-mode-select .level-choice{min-height:84px;justify-content:center;align-items:center;text-align:center;padding:15px 12px}
.new-mode-select .level-choice strong{font-size:20px}
.new-theme-block{padding:14px;border:2px solid transparent;border-radius:28px;transition:.16s border-color,.16s background}
.new-theme-block.selected{border-color:color-mix(in srgb,var(--blue) 42%,var(--line));background:color-mix(in srgb,var(--panel) 88%,var(--blue) 12%)}
.new-theme-card{display:block;width:100%;min-height:0}
.expression-picker-wrap{margin-top:14px;padding:18px;border-radius:24px;background:color-mix(in srgb,var(--panel) 92%,var(--blue) 8%);border:2px solid var(--line)}
.expression-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.expression-choice{position:relative;min-height:112px;padding:14px 13px;border:2px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:5px;transition:.15s transform,.15s border-color,.15s box-shadow}
.expression-choice:hover{transform:translateY(-2px)}
.expression-choice.selected{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 13%,transparent)}
.expression-choice strong{font-size:16px;line-height:1.25}
.expression-choice small{font-size:12px;color:var(--muted);font-weight:800;line-height:1.35}
.expression-choice em{margin-top:auto;font-style:normal;font-size:11px;color:var(--muted);font-weight:1000}
.pronunciation-subchoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.pronunciation-subchoices button{min-height:86px;padding:14px;border:2px solid var(--line);border-radius:17px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.pronunciation-subchoices button.selected{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 13%,transparent)}
.pronunciation-subchoices strong{font-size:17px}.pronunciation-subchoices small{color:var(--muted);font-weight:800}
.new-hint-strip{max-width:760px;margin:10px auto 0}
body[data-theme^="mono-"] :is(.new-theme-block.selected,.expression-picker-wrap,.expression-choice,.pronunciation-subchoices button){background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:none!important}
body[data-theme^="mono-"] :is(.expression-choice.selected,.pronunciation-subchoices button.selected,.new-theme-block.selected){border-color:var(--text)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 14%,transparent)!important}
body[data-theme="mono-dark"] :is(.expression-choice strong,.expression-choice small,.expression-choice em,.pronunciation-subchoices strong,.pronunciation-subchoices small,.new-theme-card h3,.new-theme-card p){color:#fff!important}
body[data-theme="mono-dark"] :is(.expression-choice small,.expression-choice em,.pronunciation-subchoices small,.new-theme-card p){color:#bdbdbd!important}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(.expression-choice,.expression-choice strong,.expression-choice small,.expression-choice em,.pronunciation-subchoices button,.pronunciation-subchoices strong,.pronunciation-subchoices small,.new-theme-card h3,.new-theme-card p){color:var(--light-ink,#17345f)!important}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) :is(.expression-choice small,.expression-choice em,.pronunciation-subchoices small,.new-theme-card p){color:var(--light-muted,#526f98)!important}
@media(max-width:940px){.expression-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .new-mode-select .level-choice-grid{grid-template-columns:1fr}
  .new-mode-select .level-choice{min-height:62px}
  .new-theme-block{padding:8px;border-radius:22px}
  .expression-picker-wrap{padding:12px;border-radius:20px}
  .expression-choice-grid{grid-template-columns:1fr;gap:8px}
  .expression-choice{min-height:84px}
  .pronunciation-subchoices{grid-template-columns:1fr}
  .new-theme-card .mode-flow{display:grid;grid-template-columns:1fr auto 1fr}
  .new-theme-card .mode-chip{white-space:normal}
}


/* =========================================================
   v5.5 — STABLE HOVER FEEDBACK
   Hover remains clearly visible, but interactive elements no longer move
   away from the pointer. This prevents edge-hover enter/leave loops while
   leaving click/pointer/touch handlers completely untouched.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  :is(
    button:not(:disabled),
    summary,
    [role="button"],
    .hand-card.selectable,
    .mode-card,
    .theme-option,
    [data-topic],
    [data-level],
    .stat-button,
    .topic-choice,
    .level-choice,
    .online-users-btn,
    .pvp-entry-btn,
    .expression-choice,
    .match-group-toggle
  ):hover,
  :is(
    button:not(:disabled),
    summary,
    [role="button"],
    .hand-card.selectable,
    .mode-card,
    .theme-option,
    [data-topic],
    [data-level],
    .stat-button,
    .topic-choice,
    .level-choice,
    .online-users-btn,
    .pvp-entry-btn,
    .expression-choice,
    .match-group-toggle
  ).ui-hovered{
    transform:scale(1.012)!important;
    filter:brightness(1.055) saturate(1.055)!important;
  }

  :is(.primary-btn,.solo-launch,.hit-btn,.pvp-entry-btn):hover,
  :is(.primary-btn,.solo-launch,.hit-btn,.pvp-entry-btn).ui-hovered{
    transform:scale(1.016)!important;
  }

  .hand-card.selectable:hover,
  .hand-card.selectable.ui-hovered{
    transform:scale(1.018)!important;
  }

  /* Give the response a clear outline/shadow instead of moving the hit box. */
  body:not([data-theme="bubble"]) :is(
    button:not(:disabled),summary,[role="button"],.mode-card,.theme-option,
    [data-topic],[data-level],.stat-button,.topic-choice,.level-choice,
    .online-users-btn,.pvp-entry-btn,.expression-choice,.match-group-toggle
  ).ui-hovered{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent),0 8px 22px rgba(0,0,0,.16);
  }
}

/* Touch browsers sometimes keep a synthetic :hover state after tapping.
   Do not move/scale controls there; retain press feedback via :active. */
@media (hover:none), (pointer:coarse){
  :is(
    button:not(:disabled),summary,[role="button"],.hand-card.selectable,
    .mode-card,.theme-option,[data-topic],[data-level],.stat-button,
    .topic-choice,.level-choice,.online-users-btn,.pvp-entry-btn,
    .expression-choice,.match-group-toggle
  ):hover,
  :is(
    button:not(:disabled),summary,[role="button"],.hand-card.selectable,
    .mode-card,.theme-option,[data-topic],[data-level],.stat-button,
    .topic-choice,.level-choice,.online-users-btn,.pvp-entry-btn,
    .expression-choice,.match-group-toggle
  ).ui-hovered{
    transform:none!important;
  }
  :is(button:not(:disabled),[role="button"],.hand-card.selectable):active{
    transform:scale(.985)!important;
    filter:brightness(.96)!important;
  }
}

/* =========================================================
   v5.6 — LONG PROMPT + MOBILE FIT + 10s STUDY HINT
   Layout-only changes. Click/HIT/online handlers are untouched.
   ========================================================= */
.central-area{
  min-width:0;
  height:auto;
  overflow:visible;
}
.central-card{
  width:min(1040px,96%);
  max-width:100%;
  min-width:0;
  height:auto;
  min-height:245px;
  overflow:visible;
}
.central-text,
.central-text.center-short,
.central-text.center-medium,
.central-text.center-long,
.central-text.center-xlong,
.central-text.center-xxlong{
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
  text-wrap:pretty;
  line-height:1.2!important;
}
.central-text.center-short{font-size:clamp(43px,4.7vw,68px)}
.central-text.center-medium{font-size:clamp(35px,3.9vw,56px)}
.central-text.center-long{font-size:clamp(28px,3.1vw,45px)}
.central-text.center-xlong{font-size:clamp(23px,2.55vw,36px)}
.central-text.center-xxlong{font-size:clamp(19px,2.15vw,31px)}

.new-hint-strip{
  width:min(1040px,96%);
  max-width:100%;
  flex-wrap:wrap;
  justify-content:center;
}
.new-hint-strip .center-study-item{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.45;
}
.new-hint-strip .center-study-item b{font-weight:1000}
.new-hint-strip .center-study-item i{font-style:normal;opacity:.55;margin:0 4px}
.hand-hint-meaning{
  min-width:0;
  max-width:100%;
  gap:5px;
}
.hand-hint-meaning>span{
  display:block;
  width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.hand-hint-meaning>span b{
  display:inline-block;
  margin-right:6px;
}

/* The active game theme owns its own controls; hidden theme controls take no space. */
.expression-picker-wrap.hidden,
.pronunciation-subchoices.hidden{display:none!important}

@media(max-width:1000px) and (min-width:621px){
  .central-card{width:98%;min-height:220px;padding:26px 24px}
  .central-text.center-short{font-size:clamp(38px,5.4vw,58px)}
  .central-text.center-medium{font-size:clamp(31px,4.7vw,48px)}
  .central-text.center-long{font-size:clamp(25px,3.8vw,38px)}
  .central-text.center-xlong{font-size:clamp(21px,3.1vw,31px)}
  .central-text.center-xxlong{font-size:clamp(18px,2.7vw,27px)}
}

@media(max-width:620px){
  /* Generic overflow protection for mobile game UI. */
  .screen,
  .screen :is(section,article,div,label,button,span,strong,small,p,h1,h2,h3,input,select){
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .screen :is(h1,h2,h3,p,strong,small,span,button,label){overflow-wrap:anywhere}

  .screen{width:100%;padding-left:10px!important;padding-right:10px!important}
  .section-heading h2,.new-mode-select h2{font-size:clamp(22px,7vw,30px)!important;line-height:1.18}
  .section-heading p,.new-mode-select .section-heading p{font-size:clamp(11px,3.3vw,14px)!important;line-height:1.45}
  .new-theme-card{padding:14px!important}
  .new-theme-card h3{font-size:clamp(18px,6vw,24px)!important}
  .new-theme-card p{font-size:clamp(11px,3.45vw,14px)!important}
  .mode-flow{width:100%;gap:5px!important;align-items:stretch!important}
  .new-theme-card .mode-flow{display:flex!important;flex-wrap:wrap!important}
  .mode-chip{flex:1 1 42%;min-width:0!important;font-size:clamp(10px,3.15vw,13px)!important;padding:6px 7px!important;white-space:normal!important;text-align:center}
  .mode-arrow{flex:0 0 auto;align-self:center;font-size:14px}
  .expression-picker-wrap{width:100%;padding:10px!important}
  .expression-choice{width:100%;padding:11px!important}
  .expression-choice strong{font-size:clamp(13px,4.3vw,16px)!important}
  .expression-choice small{font-size:clamp(10px,3.2vw,12px)!important}
  .pronunciation-subchoices button{width:100%;padding:11px!important}
  .pronunciation-subchoices strong{font-size:clamp(14px,4.5vw,17px)!important}
  .pronunciation-subchoices small{font-size:clamp(10px,3.2vw,12px)!important}
  .level-choice strong{font-size:clamp(15px,5vw,19px)!important}
  .selection-footer{width:100%;bottom:8px;padding:10px!important;gap:8px!important}
  .selection-summary strong{font-size:clamp(12px,3.8vw,16px)!important;white-space:normal!important;text-overflow:clip!important}
  .selection-footer button{font-size:clamp(12px,4vw,16px)!important;min-width:0!important;padding-left:10px!important;padding-right:10px!important}

  .hud{width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;gap:4px!important}
  .hud-box{min-width:0!important;padding:6px!important}
  .hud-value{font-size:clamp(12px,4vw,17px)!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .timer-box{min-width:82px!important;padding:6px 8px!important}
  .timer-label{font-size:10px!important}
  .timer-value{font-size:clamp(21px,7vw,28px)!important}
  .mode-strip{max-width:100%;overflow:hidden}
  .mode-strip span{display:block;max-width:100%;font-size:clamp(10px,3vw,13px)!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35}
  .play-zone{width:100%;padding:10px!important;overflow:hidden}
  .central-area{width:100%;min-height:0!important;padding:12px 0 9px!important}
  .central-card{width:100%!important;min-height:190px!important;height:auto!important;padding:20px 12px!important}
  .center-type{font-size:clamp(9px,2.8vw,12px)!important;margin-bottom:11px!important}
  .central-text.center-short{font-size:clamp(29px,8.8vw,42px)!important}
  .central-text.center-medium{font-size:clamp(25px,7.8vw,36px)!important}
  .central-text.center-long{font-size:clamp(21px,6.5vw,31px)!important}
  .central-text.center-xlong{font-size:clamp(18px,5.5vw,26px)!important}
  .central-text.center-xxlong{font-size:clamp(16px,4.8vw,22px)!important}
  .new-hint-strip{width:100%!important;padding:9px!important;font-size:clamp(10px,3.1vw,13px)!important}
  .new-hint-strip .center-study-item{font-size:clamp(10px,3.15vw,13px)!important}
  .status-line{height:auto!important;min-height:28px;font-size:clamp(10px,3.2vw,13px)!important;text-align:center;line-height:1.35}
  .hit-btn{width:100%!important;height:72px!important;font-size:clamp(30px,10vw,42px)!important}
  .hand-heading{gap:7px!important}
  .hand-heading strong{font-size:clamp(17px,5.5vw,23px)!important}
  .hand-heading span{font-size:clamp(10px,3.2vw,13px)!important}
  .hand-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .hand-card{width:100%;min-height:150px!important;padding:17px 9px 13px!important;font-size:clamp(15px,4.8vw,21px)!important;overflow:hidden}
  .hand-main{max-width:100%;overflow-wrap:anywhere!important;word-break:keep-all!important}
  .hand-hint-meaning{font-size:clamp(9.5px,3vw,12px)!important;margin-top:8px!important;padding-top:7px!important}
  .hand-hint-meaning b{font-size:clamp(8px,2.5vw,10px)!important}

  .modal,.data-browser-modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:14px!important}
  .modal-head h2{font-size:clamp(19px,6vw,26px)!important}
  .rule-item{font-size:clamp(12px,3.7vw,16px)!important;grid-template-columns:30px minmax(0,1fr)!important}
  .data-entry-main strong{font-size:clamp(13px,4vw,17px)!important}
  .data-entry-main span{font-size:clamp(11px,3.4vw,14px)!important}
  .data-entry-main em{font-size:clamp(10px,3vw,12px)!important}
}

@media(max-width:390px){
  .hand-grid{grid-template-columns:1fr!important}
  .hand-card{min-height:132px!important}
  .hud-value{font-size:clamp(11px,3.7vw,14px)!important}
  .timer-box{min-width:72px!important}
}

/* v5.7 answer feedback: visible Korean pronunciation, English-only TTS */
.feedback-pronunciation{margin-top:8px;font-size:clamp(15px,2.4vw,22px);font-weight:900;color:var(--muted);line-height:1.4}

/* v5.8 — 하위 진행도 / 업적 난이도 */
.expression-choice.progress-locked,
.pronunciation-subchoices button.progress-locked{
  opacity:.48;
  filter:saturate(.55);
  cursor:not-allowed;
  transform:none !important;
}
.submode-progress{font-style:normal;margin-left:.45rem;white-space:nowrap}
.achievement-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.28rem 0 .42rem;font-size:.78rem;font-weight:900}
.achievement-meta span{opacity:.8}
.achievement-meta b{padding:.2rem .45rem;border-radius:999px;background:rgba(255,255,255,.16)}
.achievement-celebration-reward{margin-top:.6rem;font-weight:1000;font-size:1.05rem}


/* v5.9 — 안전한 중도 포기 / 온라인 기권 */
.game-abandon-bar{display:flex;align-items:center;justify-content:center;gap:12px;max-width:1180px;margin:12px auto 4px;padding:0 8px;flex-wrap:wrap;text-align:center}
.game-abandon-bar span{font-size:13px;font-weight:850;color:var(--muted);line-height:1.35}
.game-abandon-btn{min-width:176px;min-height:48px;border:2px solid rgba(255,190,105,.52);background:rgba(255,179,71,.10);color:#ffe3b0;border-radius:999px;padding:11px 22px;font:inherit;font-size:15px;font-weight:1000;letter-spacing:.01em;cursor:pointer;transition:filter .16s,transform .16s,border-color .16s,box-shadow .16s}
.game-abandon-btn:hover{filter:brightness(1.12);transform:scale(1.025);border-color:rgba(255,205,128,.72);box-shadow:0 7px 20px rgba(0,0,0,.16)}
.game-abandon-btn.online-forfeit{border-color:rgba(255,105,121,.48);background:rgba(255,74,94,.09);color:#ffd4d9}
@media(max-width:700px){.game-abandon-bar{justify-content:center;margin:8px auto 2px;gap:7px}.game-abandon-bar span{width:100%;font-size:clamp(10px,2.8vw,12px);text-align:center}.game-abandon-btn{width:min(260px,88vw);min-width:0;min-height:48px;font-size:clamp(13px,3.7vw,15px);padding:10px 16px}}
@media(hover:none),(pointer:coarse){.game-abandon-btn:hover{transform:none}}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .game-abandon-btn{color:#7a4a00;background:rgba(255,170,30,.12);border-color:rgba(150,92,0,.38)}
:is(body[data-theme="bubble"],body[data-theme="mono-light"]) .game-abandon-btn.online-forfeit{color:#9b1c2e;background:rgba(210,40,65,.08);border-color:rgba(180,35,55,.36)}
body[data-theme="mono-dark"] .game-abandon-btn{color:#fff;border-color:#777;background:#1c1c1c}
body[data-theme="mono-dark"] .game-abandon-btn.online-forfeit{color:#ffd9dd;border-color:#a84d5a;background:#241416}

/* =========================================================
   v5.10 — Rules hub / outfit / PVP title
   ========================================================= */
.avatar-svg.slot-outfit{z-index:3}
.avatar-title-badge{
  position:absolute;left:50%;bottom:-18px;z-index:14;transform:translateX(-50%);
  max-width:138px;padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;font-weight:1000;letter-spacing:.02em;color:#fff;background:rgba(14,27,48,.94);
  border:1px solid rgba(130,196,255,.45);box-shadow:0 5px 14px rgba(0,0,0,.32);text-shadow:0 1px 3px rgba(0,0,0,.8)
}
.avatar-title-badge.grade-2{border-color:#78d2ff;box-shadow:0 0 13px rgba(85,190,255,.34),0 5px 14px rgba(0,0,0,.32)}
.avatar-title-badge.grade-3{border-color:#9e7cff;background:linear-gradient(90deg,#27204e,#36285f);box-shadow:0 0 15px rgba(157,120,255,.4)}
.avatar-title-badge.grade-4{border-color:#ffd84e;background:linear-gradient(90deg,#5b3b08,#8b6110);box-shadow:0 0 17px rgba(255,216,78,.48)}
.avatar-title-badge.grade-5{border-color:#ff7ab9;background:linear-gradient(90deg,#50152f,#7c244b);box-shadow:0 0 20px rgba(255,116,180,.58);animation:titlePulse 1.8s ease-in-out infinite}
.avatar-title-badge.grade-6{border-color:#fff;background:linear-gradient(90deg,#5428a6,#087cc4,#8e2a99);box-shadow:0 0 24px rgba(105,232,255,.65),0 0 36px rgba(255,116,180,.35);animation:titleLegend 2.3s linear infinite}
@keyframes titlePulse{50%{transform:translateX(-50%) scale(1.045);filter:brightness(1.18)}}
@keyframes titleLegend{0%{filter:hue-rotate(0deg) brightness(1.05)}50%{filter:hue-rotate(70deg) brightness(1.25)}100%{filter:hue-rotate(0deg) brightness(1.05)}}
.shop-item .avatar-title-badge{bottom:-10px;font-size:8px;padding:3px 6px;max-width:112px}
.shop-action.title-locked{font-size:11px;line-height:1.25;white-space:normal}

.rules-hub{width:min(700px,100%)}
.rule-accordion{display:grid;gap:9px}
.rule-detail{border:1px solid rgba(145,190,255,.16);border-radius:15px;background:rgba(255,255,255,.035);overflow:hidden}
.rule-detail summary{list-style:none;display:grid;grid-template-columns:30px 1fr 24px;align-items:center;gap:9px;min-height:52px;padding:10px 13px;cursor:pointer;color:var(--text);font-weight:950}
.rule-detail summary::-webkit-details-marker{display:none}
.rule-detail summary>span{font-size:20px}.rule-detail summary>b{font-size:22px;color:var(--cyan);transition:.18s transform}
.rule-detail[open] summary>b{transform:rotate(90deg)}
.rule-detail-body{padding:0 14px 12px 53px;color:var(--muted);font-size:13px;line-height:1.55}
.rule-detail-body p{margin:6px 0}
@media(max-width:600px){.rule-detail summary{grid-template-columns:26px 1fr 20px;padding:9px 10px}.rule-detail-body{padding:0 10px 11px 45px;font-size:12px}.avatar-title-badge{max-width:118px;font-size:9px}}

/* v5.14 online cross-platform answer reveal */
.online-correct-feedback .feedback-card{max-width:min(92vw,760px)}
.online-feedback-wait{margin-top:10px;font-size:clamp(.72rem,1.7vw,.9rem);font-weight:800;opacity:.72;letter-spacing:.02em}
@media (max-width:640px){
  .online-correct-feedback .feedback-card{width:min(94vw,620px);padding:18px 14px}
  .online-correct-feedback .feedback-main{font-size:clamp(1.05rem,5vw,1.45rem);white-space:normal;overflow-wrap:anywhere}
  .online-correct-feedback .feedback-sub,.online-correct-feedback .feedback-pronunciation{font-size:clamp(.78rem,3.5vw,1rem);white-space:normal;overflow-wrap:anywhere}
}


/* v5.16 · 3-piece set collection */
.shop-set-collection{margin-top:30px;padding-top:24px;border-top:2px solid color-mix(in srgb,var(--blue) 22%,transparent)}
.shop-set-collection-title{margin-bottom:18px;padding:16px 18px;border-radius:18px;background:color-mix(in srgb,var(--blue) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--blue) 18%,transparent)}
.shop-set-collection-title h2{margin:4px 0 6px}.shop-set-collection-title p{margin:0;color:var(--muted);font-weight:800;line-height:1.5}
.shop-set-group{margin:16px 0 22px;padding:16px;border-radius:20px;border:1px solid color-mix(in srgb,var(--blue) 18%,transparent);background:color-mix(in srgb,var(--panel) 94%,var(--blue) 6%)}
.shop-set-group.is-active{outline:3px solid color-mix(in srgb,var(--yellow) 58%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--yellow) 16%,transparent)}
.shop-set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.shop-set-head h3{margin:2px 0 4px;font-size:20px}.shop-set-head p{margin:0;color:var(--muted);font-weight:900;font-size:13px}.shop-set-kicker{font-size:11px;font-weight:1000;letter-spacing:.1em;color:var(--blue)}
.shop-set-status{display:grid;justify-items:end;gap:3px;white-space:nowrap;font-size:12px}.shop-set-status b{font-size:14px}.shop-set-status span{color:var(--muted)}.shop-set-status strong{color:var(--yellow);font-size:12px}
.shop-set-grid{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){.shop-set-head{display:grid}.shop-set-status{justify-items:start;white-space:normal}.shop-set-grid{grid-template-columns:1fr}.shop-set-group{padding:12px}.shop-set-collection-title{padding:14px}}

/* =========================================================
   v5.20 — Study titles
   ========================================================= */
.avatar-title-badge.study-title{
  border-color:#7ef3c7;
  background:linear-gradient(90deg,#123d3b,#175c55,#163b63);
  box-shadow:0 0 16px rgba(94,245,196,.34),0 5px 14px rgba(0,0,0,.32)
}
.avatar-title-badge.study-title.grade-2{border-color:#72e8ff;box-shadow:0 0 18px rgba(94,224,255,.42),0 5px 14px rgba(0,0,0,.32)}
.avatar-title-badge.study-title.grade-3{border-color:#9dffb4;background:linear-gradient(90deg,#143d30,#176144,#204d77);box-shadow:0 0 20px rgba(116,255,173,.45)}
.avatar-title-badge.study-title.grade-4{border-color:#fff07d;background:linear-gradient(90deg,#345025,#7a6a14,#235f63);box-shadow:0 0 22px rgba(255,240,125,.5)}
.avatar-title-badge.study-title.grade-5{border-color:#b9fff7;background:linear-gradient(90deg,#214c58,#385899,#553b8d);box-shadow:0 0 25px rgba(126,247,255,.58),0 0 34px rgba(172,132,255,.28);animation:studyTitlePulse 1.7s ease-in-out infinite}
.avatar-title-badge.study-title.grade-6{border-color:#fff;background:linear-gradient(90deg,#0c9f8e,#2c79d6,#8d45ca,#e8b63d);box-shadow:0 0 28px rgba(112,255,224,.68),0 0 42px rgba(179,112,255,.38);animation:studyTitleLegend 2s linear infinite}
.shop-item.study-title-item{outline:1px solid rgba(105,237,205,.18);background:linear-gradient(180deg,rgba(42,132,118,.07),rgba(255,255,255,.02))}
.shop-action.study-title-locked{font-size:10px;line-height:1.35}
@keyframes studyTitlePulse{50%{transform:translateX(-50%) scale(1.055);filter:brightness(1.24)}}
@keyframes studyTitleLegend{0%{filter:hue-rotate(0deg) brightness(1.05)}50%{filter:hue-rotate(45deg) brightness(1.3)}100%{filter:hue-rotate(0deg) brightness(1.05)}}

/* v5.21 — prominent PVP entry + resale */
.pvp-entry-zone{display:grid;gap:10px;width:min(100%,420px);margin:12px auto 0}
.pvp-entry-prominent{min-height:96px!important;padding:18px 22px!important;border-width:2px!important;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.pvp-entry-prominent .pvp-entry-icon{grid-row:1/3;font-size:38px;line-height:1}
.pvp-entry-prominent strong{font-size:clamp(22px,3vw,32px);letter-spacing:.04em}
.pvp-entry-prominent small{font-size:13px;opacity:.82}
.pvp-ranking-entry{min-height:46px;border-radius:14px;font-weight:800;border:1px solid var(--line,rgba(255,255,255,.2));background:rgba(255,255,255,.08);color:inherit;cursor:pointer}
.wardrobe-sell{margin-top:7px;min-height:34px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,140,80,.45);background:rgba(255,110,55,.10);color:inherit;font-weight:800;cursor:pointer}
.wardrobe-sell:hover{filter:brightness(1.12)}
@media(max-width:720px){.pvp-entry-zone{width:100%}.pvp-entry-prominent{min-height:82px!important;padding:14px 16px!important}.pvp-entry-prominent .pvp-entry-icon{font-size:31px}.pvp-entry-prominent strong{font-size:22px}}


/* v5.22 unified rankings */
.ranking-backdrop{z-index:9500!important}
.ranking-hub-modal{width:min(720px,100%);max-height:min(820px,90vh);overflow:hidden;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}
.ranking-type-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.ranking-type-btn{min-height:52px;border-radius:15px;border:1px solid rgba(145,190,255,.18);background:rgba(255,255,255,.045);color:inherit;font-weight:950;font-size:15px;cursor:pointer}
.ranking-type-btn.active{background:linear-gradient(135deg,rgba(105,232,255,.22),rgba(130,115,255,.19));border-color:rgba(105,232,255,.52);box-shadow:0 0 0 1px rgba(105,232,255,.08) inset}
.ranking-hub-note{font-size:12px;font-weight:800;color:var(--muted);margin:0 2px 10px}
.ranking-hub-rows{overflow:auto;display:grid;gap:7px;padding-right:3px}
.ranking-hub-row{display:grid;grid-template-columns:38px minmax(120px,1fr) 100px 130px;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.045)}
.ranking-hub-row>b{font-size:18px}.ranking-hub-row>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-hub-row>span{text-align:right;font-weight:950}.ranking-hub-row>small{text-align:right;color:var(--muted);font-weight:750}
.ranking-loading{padding:30px 14px;text-align:center;color:var(--muted);font-weight:850}
@media(max-width:620px){.ranking-hub-modal{padding:16px}.ranking-type-tabs{grid-template-columns:1fr}.ranking-hub-row{grid-template-columns:32px minmax(0,1fr) auto}.ranking-hub-row>small{grid-column:2/4;text-align:left}.ranking-type-btn{min-height:48px}}


/* v5.26 — six-zone online HIT button. The frame stays fixed; only one cell lights per round. */
.hit-six-grid{
  width:min(390px,82vw);
  height:94px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:6px;
  border-radius:24px;
  border:1px solid rgba(124,208,255,.2);
  background:rgba(4,12,24,.72);
  box-shadow:0 13px 35px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.025);
}
.hit-segment{
  min-width:0;
  min-height:0;
  border:1px solid rgba(150,205,240,.18);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(104,137,174,.15),rgba(45,63,90,.2));
  color:rgba(255,255,255,.38);
  font:inherit;
  font-weight:1000;
  font-size:clamp(20px,3vw,29px);
  letter-spacing:.045em;
  cursor:default;
  transition:transform .12s ease,filter .15s ease,box-shadow .16s ease,border-color .16s ease;
}
.hit-segment.active{
  cursor:pointer;
  color:#06101a;
  border-color:rgba(216,250,255,.86);
  background:linear-gradient(135deg,#77efff,#8794ff 54%,#c58cff);
  box-shadow:0 0 0 2px rgba(105,232,255,.12),0 7px 24px rgba(77,190,255,.37);
  animation:hitSixGlow 1.15s ease-in-out infinite alternate;
}
.hit-segment.active:active{transform:scale(.96);filter:brightness(1.08)}
.hit-segment:disabled{opacity:1}
.hit-six-grid.blocked .hit-segment{opacity:.38}
.hit-six-caption{
  width:min(390px,82vw);
  margin-top:6px;
  text-align:center;
  min-height:17px;
  font-size:11px;
  font-weight:850;
  color:var(--muted);
}
@keyframes hitSixGlow{
  from{filter:brightness(.96);box-shadow:0 0 0 2px rgba(105,232,255,.10),0 6px 18px rgba(77,190,255,.28)}
  to{filter:brightness(1.09);box-shadow:0 0 0 3px rgba(105,232,255,.16),0 9px 30px rgba(132,128,255,.48)}
}
@media(max-width:620px){
  .hit-six-grid{width:100%;height:92px;gap:5px;padding:5px;border-radius:19px}
  .hit-segment{border-radius:11px;font-size:clamp(19px,6vw,26px)}
  .hit-six-caption{width:100%;font-size:10px}
}
body[data-theme^="mono-"] .hit-six-grid{border-color:var(--line);background:var(--panel)}
body[data-theme^="mono-"] .hit-segment{border-color:var(--line);background:rgba(127,127,127,.1);color:var(--muted)}
body[data-theme^="mono-"] .hit-segment.active{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:none}

.hit-segment.active.ui-hovered{filter:brightness(1.12);box-shadow:0 0 0 3px rgba(105,232,255,.18),0 10px 32px rgba(132,128,255,.5)}

/* =========================================================
   VEM v6.0 — unified mobile-first neon UI
   PC intentionally uses the same centered mobile composition.
   ========================================================= */
:root{
  --vem6-bg:#050a12;--vem6-panel:#091321;--vem6-panel2:#0b1727;--vem6-text:#f5f7fb;--vem6-muted:#9ba6b8;
  --vem6-cyan:#38d9ff;--vem6-blue:#4d8cff;--vem6-violet:#815cff;--vem6-border:rgba(108,139,190,.30);
  --vem6-grad:linear-gradient(105deg,var(--vem6-cyan),var(--vem6-blue) 52%,var(--vem6-violet));
  --vem6-shadow:0 18px 38px rgba(0,0,0,.34),0 0 28px rgba(55,150,255,.08);
}
html,body{min-height:100%;background:#050a12!important;color:var(--vem6-text)!important;overflow-x:hidden}
body[data-theme="mono-dark"]{background:
  radial-gradient(circle at 46% 32%,rgba(30,65,115,.13),transparent 30%),
  linear-gradient(180deg,#060b13,#08111d 52%,#050a12)!important}
body[data-theme="mono-dark"]::before,body[data-theme="mono-dark"]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body[data-theme="mono-dark"]::before{background:
  linear-gradient(90deg,transparent 13%,rgba(60,185,255,.10) 13.08%,transparent 13.18%,transparent 81%,rgba(111,89,255,.10) 81.08%,transparent 81.18%),
  radial-gradient(circle at 13% 43%,rgba(58,160,255,.75) 0 2px,transparent 3px),
  radial-gradient(circle at 81% 26%,rgba(51,221,255,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 76% 70%,rgba(121,82,255,.75) 0 2px,transparent 3px)}
body[data-theme="mono-dark"]::after{background:linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:4px 100%;opacity:.15}
.fx,.grid-bg{display:none!important}
#app.app-shell.vem6-shell{width:min(100%,600px)!important;max-width:600px!important;min-width:0!important;min-height:100dvh;margin:0 auto!important;padding:0 18px 54px!important;box-sizing:border-box;overflow:visible!important;background:transparent!important}
.screen{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:122px 0 34px!important;box-sizing:border-box}
.screen>*{min-width:0}
.glass,.card,.panel{background:linear-gradient(145deg,rgba(11,25,43,.90),rgba(5,12,23,.88))!important;border:1px solid var(--vem6-border)!important;box-shadow:var(--vem6-shadow)!important;backdrop-filter:blur(12px)}
button,input,select,textarea{font-family:inherit}
button{touch-action:manipulation}
.primary-btn,.secondary-btn,.ghost-btn,.icon-btn,.text-input,select,textarea{border-radius:15px!important}
.primary-btn{border:1px solid transparent!important;background:linear-gradient(#0a1424,#0a1424) padding-box,var(--vem6-grad) border-box!important;color:#fff!important;box-shadow:0 0 20px rgba(60,130,255,.12)!important}
.secondary-btn,.ghost-btn{background:rgba(7,16,29,.82)!important;border:1px solid rgba(98,129,181,.35)!important;color:#f4f7ff!important}
.text-input,select,textarea{background:#07111f!important;color:#fff!important;border:1px solid rgba(79,135,214,.38)!important;box-shadow:inset 0 0 22px rgba(0,0,0,.20)!important}

/* fixed, safe controls */
.vem6-utility-dock{position:fixed!important;z-index:11000!important;top:max(22px,env(safe-area-inset-top))!important;right:max(18px,calc((100vw - 600px)/2 + 18px))!important;display:flex!important;gap:8px!important;align-items:flex-start}
.vem6-utility-dock .utility-btn{width:58px!important;height:58px!important;min-width:58px!important;padding:6px 3px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;border:1px solid rgba(141,155,181,.30)!important;border-radius:13px!important;background:rgba(6,12,21,.82)!important;color:#edf1f8!important;box-shadow:inset 0 0 14px rgba(255,255,255,.015)!important;font-size:12px!important;line-height:1.15!important}
.vem6-utility-dock .utility-btn .util-icon{font-size:23px!important;line-height:1!important}
.vem6-back{position:fixed!important;z-index:11001!important;top:max(22px,env(safe-area-inset-top))!important;left:max(18px,calc((100vw - 600px)/2 + 18px))!important;width:58px!important;height:58px!important;border-radius:13px!important;border:1px solid rgba(141,155,181,.30)!important;background:rgba(6,12,21,.82)!important;color:#fff!important;font-size:35px!important;line-height:1!important;padding:0!important}
.vem6-options-panel{position:fixed!important;z-index:11020!important;top:max(88px,calc(env(safe-area-inset-top) + 68px))!important;right:max(18px,calc((100vw - 600px)/2 + 18px))!important;width:min(360px,calc(100vw - 36px))!important;background:#07111f!important;border:1px solid rgba(72,177,255,.35)!important;border-radius:18px!important;padding:16px!important;box-shadow:0 20px 55px rgba(0,0,0,.6)!important}
.vem6-option-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.vem6-option-title small{color:var(--vem6-muted)}
.audio-control{grid-template-columns:88px minmax(0,1fr) 34px!important}.audio-control .utility-btn{min-width:0!important;width:88px!important}

/* shared neon headings */
.vem6-screen-title{font-size:clamp(34px,8vw,48px)!important;font-weight:900!important;text-align:center!important;margin:28px 0 30px!important;letter-spacing:-.02em;background:var(--vem6-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:0 0 24px rgba(55,160,255,.12)}
.eyebrow{color:#72aefb!important;letter-spacing:.12em!important}

/* 1 landing */
.vem6-landing{min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding-top:80px!important}
.vem6-landing-core{text-align:center;width:100%;transform:translateY(-2vh)}
.vem6-logo{font-size:clamp(92px,24vw,150px);font-weight:950;letter-spacing:-.08em;line-height:.9;background:var(--vem6-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 26px rgba(42,133,255,.20))}
.vem6-logo-sub{margin-top:22px;color:#aeb6c5;font-size:clamp(20px,5vw,28px);letter-spacing:.01em}
.vem6-primary-launch{margin:112px auto 0;width:min(82%,430px);min-height:86px;border-radius:25px;border:1px solid transparent;background:linear-gradient(#07111f,#07111f) padding-box,var(--vem6-grad) border-box;color:white;display:flex;gap:30px;align-items:center;justify-content:center;font-size:30px;box-shadow:0 20px 38px rgba(19,86,157,.22),0 0 30px rgba(102,77,255,.13)}
.vem6-primary-launch span{color:#4bdcff;font-size:34px}.vem6-primary-launch b{font-weight:600}

/* 2 nickname */
.vem6-nickname{min-height:100dvh!important;display:flex!important;align-items:center!important;padding-top:95px!important}
.vem6-nickname-card{width:100%;text-align:center;margin-top:-8vh}
.vem6-nickname-card h1{font-size:clamp(31px,7vw,44px);font-weight:900;background:var(--vem6-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:46px}
.vem6-nickname-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px;width:min(94%,520px);margin:auto}
.vem6-nickname-row input{height:72px;font-size:22px;padding:0 24px;border:1px solid transparent!important;background:linear-gradient(#07111f,#07111f) padding-box,var(--vem6-grad) border-box!important}
.vem6-nickname-row button{font-size:21px}.vem6-nickname-card p{color:#8e98aa;font-size:16px;margin:30px 0 0}.vem6-nickname-card p+p{margin-top:9px}

/* 3 home */
.vem6-home{min-height:100dvh!important;display:flex!important;align-items:center!important}.vem6-home-spacer{display:none}
.vem6-home-buttons{width:100%;display:grid;gap:34px;margin-top:-3vh}
.vem6-big-menu{position:relative;width:100%;min-height:166px;border-radius:25px;border:1px solid transparent;background:linear-gradient(145deg,#091626,#060e19) padding-box,var(--vem6-grad) border-box;color:white;box-shadow:0 18px 30px rgba(0,0,0,.27),0 0 32px rgba(57,125,255,.09);display:flex;align-items:center;justify-content:center;gap:30px;padding:22px 34px}
.vem6-big-menu strong{font-size:clamp(42px,10vw,64px);background:var(--vem6-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.vem6-menu-icon{font-size:78px;color:#497abd;opacity:.55;font-weight:300}

/* My Room */
.vem6-myroom{padding-bottom:55px!important}.vem6-avatar-frame{width:min(78vw,340px);aspect-ratio:1/1;margin:0 auto 28px;border-radius:23px;border:1px solid transparent;background:linear-gradient(145deg,#0a192b,#06101e) padding-box,var(--vem6-grad) border-box;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:var(--vem6-shadow)}
.vem6-avatar-frame .avatar{transform:scale(.92)}.vem6-avatar-frame>span{position:absolute;bottom:12px;color:#768299;font-size:19px}
.vem6-room-menu{display:grid;gap:14px;width:min(94%,440px);margin:auto}.vem6-room-menu button{min-height:72px;border-radius:18px;border:1px solid transparent;background:linear-gradient(145deg,#091627,#07101c) padding-box,var(--vem6-grad) border-box;color:#fff;display:grid;grid-template-columns:58px 1fr;align-items:center;text-align:center;padding:8px 24px;box-shadow:0 8px 18px rgba(0,0,0,.20)}
.vem6-room-menu button span{font-size:34px;background:var(--vem6-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.vem6-room-menu button b{font-size:23px;font-weight:600}

/* English Game menu */
.vem6-english-menu{padding-bottom:48px!important}.vem6-game-cards{display:grid;gap:18px;width:min(94%,480px);margin:auto}.vem6-game-card{min-height:128px;padding:20px;border:1px solid transparent;border-radius:22px;background:linear-gradient(145deg,#091626,#06101e) padding-box,var(--vem6-grad) border-box;color:#fff;text-align:center;box-shadow:var(--vem6-shadow)}
.vem6-game-card strong{display:block;font-size:clamp(26px,6vw,36px);line-height:1.15;margin-bottom:10px}.vem6-game-card small{display:block;color:#aab4c6;font-size:16px;line-height:1.45}.vem6-game-card.selected{box-shadow:0 0 0 1px rgba(79,202,255,.5),0 0 24px rgba(83,110,255,.23)}
.vem6-start-panel{width:min(94%,480px);margin:26px auto 0;padding:18px;border:1px solid rgba(76,126,205,.23);border-radius:19px;background:rgba(6,15,27,.68)}
.vem6-diff-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.vem6-diff{min-width:0;padding:12px 4px;border-radius:11px;border:1px solid rgba(101,131,179,.30);background:#081322;color:#b9c2d1;font-size:13px}.vem6-diff.selected{border-color:#53cfff;color:#fff;box-shadow:inset 0 0 17px rgba(79,125,255,.15)}
.vem6-mode-summary{margin:14px 0;display:flex;flex-direction:column;gap:3px;color:#a8b2c2;text-align:center}.vem6-mode-summary b{color:#fff}.vem6-start-solo{width:100%;min-height:58px;font-size:19px}

/* My Room sub pages */
.vem6-subscreen{padding-bottom:60px!important}.vem6-list-card,.vem6-stat-panel,.vem6-loadout-card{width:min(94%,500px);margin:0 auto 18px;padding:18px;border:1px solid transparent;border-radius:20px;background:linear-gradient(145deg,#091626,#06101e) padding-box,var(--vem6-grad) border-box;box-shadow:var(--vem6-shadow)}
.vem6-stat-panel{display:grid;gap:10px}.vem6-stat-panel>div{padding:13px 14px;border-bottom:1px solid rgba(113,136,176,.15);display:flex;align-items:center;justify-content:space-between;gap:12px}.vem6-stat-panel>div:last-child{border-bottom:0}.vem6-stat-panel span{color:#a3adbd}.vem6-stat-panel strong{font-size:22px}.vem6-stat-panel button{border:0;background:none;color:#62b8ff;text-decoration:underline}
.vem6-wdl{justify-content:space-around!important}.vem6-wdl span{font-size:18px!important}.vem6-skill-row{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 4px;border-bottom:1px solid rgba(111,137,177,.14)}.vem6-skill-row:last-child{border:0}.vem6-skill-row>div{display:flex;flex-direction:column;gap:4px}.vem6-skill-row span,.vem6-skill-row small{color:#9da8b9}.vem6-loadout-card h3{margin:0 0 12px}.vem6-loadout-card>span{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(111,137,177,.12);color:#b6c0cf}.vem6-loadout-card>span b{color:#fff}

/* Game screen: reserved hint area means no resize */
.game-screen,.game-screen .play-zone{min-width:0!important}.game-screen{padding-top:112px!important}.game-hud,.hud{max-width:100%!important}.center-card,.problem-card,.game-center-card{width:100%!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:keep-all!important;height:auto!important;min-height:190px!important;box-sizing:border-box!important}
.vem6-hint-slot,.vem6-center-hint-slot{display:flex;align-items:center;justify-content:center;min-height:58px!important;height:58px!important;max-height:58px!important;overflow:hidden!important;padding:5px 8px!important;box-sizing:border-box!important;color:#97b7dd!important}
.vem6-hand-hint-slot{display:flex;align-items:center;justify-content:center;min-height:46px!important;height:46px!important;max-height:46px!important;overflow:hidden!important;font-size:12px!important;color:#9eb1ca!important}
.hand-card,.answer-card{min-width:0!important;overflow:hidden!important}.hand-card *,.answer-card *{overflow-wrap:anywhere!important}
#hintBtn,.hint-button{min-height:46px!important;border-radius:14px!important}
.vem6-writing-box{width:100%;display:grid;gap:10px;margin-top:10px}.vem6-writing-box input{width:100%;min-width:0;height:58px;padding:0 15px;font-size:18px}.vem6-writing-box button{min-height:52px;font-size:18px}

/* Results / shop / wardrobe / achievement compact into same mobile column */
.shop-layout,.wardrobe-layout{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;gap:16px!important}.shop-avatar-panel,.shop-list-panel{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.shop-grid,.wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.shop-item,.wardrobe-item{min-width:0!important}.result-card{width:100%!important;max-width:100%!important;padding:20px!important}.result-top{grid-template-columns:1fr!important;text-align:center!important}.result-avatar{margin:auto}.result-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}.achievement-grid{grid-template-columns:1fr!important}.topbar.with-back .back-btn{display:none!important}

/* modal/data/help consistent */
.modal-backdrop{padding:80px max(14px,calc((100vw - 600px)/2 + 14px)) 22px!important}.modal{width:min(100%,560px)!important;max-height:calc(100dvh - 110px)!important;background:#07111f!important;border:1px solid rgba(90,139,215,.35)!important;color:#fff!important}.data-entry,.ranking-hub-row,.rules-section{background:#091524!important;border-color:rgba(99,130,180,.22)!important;color:#fff!important}.ranking-hub-modal{width:min(100%,540px)!important}

/* hover only where actual mouse exists; never move controls */
@media (hover:hover) and (pointer:fine){
  .vem6-big-menu:hover,.vem6-game-card:hover,.vem6-room-menu button:hover,.primary-btn:hover,.secondary-btn:hover{filter:brightness(1.12);transform:none!important}
}
@media (max-width:420px){
  #app.app-shell.vem6-shell{padding-left:14px!important;padding-right:14px!important}.screen{padding-top:112px!important}.vem6-utility-dock{right:14px!important;gap:6px!important}.vem6-back{left:14px!important}.vem6-utility-dock .utility-btn,.vem6-back{width:52px!important;height:52px!important;min-width:52px!important}.vem6-utility-dock .utility-btn{font-size:11px!important}.vem6-utility-dock .utility-btn .util-icon{font-size:20px!important}.vem6-logo{font-size:27vw}.vem6-logo-sub{font-size:5.2vw}.vem6-primary-launch{margin-top:90px;min-height:75px;font-size:25px}.vem6-big-menu{min-height:142px;padding:18px}.vem6-big-menu strong{font-size:11vw}.vem6-menu-icon{font-size:16vw}.vem6-game-card{min-height:112px}.vem6-game-card strong{font-size:7vw}.vem6-game-card small{font-size:14px}.shop-grid,.wardrobe-grid{grid-template-columns:1fr!important}.result-actions{grid-template-columns:1fr!important}.vem6-nickname-row{grid-template-columns:minmax(0,1fr) 82px}.vem6-nickname-row input{height:64px;font-size:18px;padding:0 16px}.vem6-nickname-row button{font-size:18px}}
@media (min-width:900px){
  #app.app-shell.vem6-shell{padding-left:24px!important;padding-right:24px!important}.screen{padding-top:128px!important}.vem6-home-buttons{gap:26px}.vem6-big-menu{min-height:150px}.vem6-logo{font-size:132px}.vem6-game-card{min-height:120px}
}

/* =========================================================
   VEM v6.1 — mobile-width lock, browser bezel, admin keypad
   ========================================================= */
body[data-theme="mono-dark"]{
  padding:14px 0!important;
  min-height:100dvh!important;
}
#app.app-shell.vem6-shell{
  width:min(calc(100% - 16px),480px)!important;
  max-width:480px!important;
  min-height:calc(100dvh - 28px)!important;
  margin:0 auto!important;
  padding-left:14px!important;
  padding-right:14px!important;
  border-left:1px solid rgba(92,118,158,.08);
  border-right:1px solid rgba(92,118,158,.08);
}
.vem6-landing,.vem6-nickname,.vem6-home{
  min-height:calc(100dvh - 28px)!important;
}
.screen{padding-top:108px!important;}
.vem6-utility-dock{
  top:max(28px,calc(env(safe-area-inset-top) + 18px))!important;
  right:max(12px,calc((100vw - 480px)/2 + 14px))!important;
}
.vem6-back{
  top:max(28px,calc(env(safe-area-inset-top) + 18px))!important;
  left:max(12px,calc((100vw - 480px)/2 + 14px))!important;
}
.vem6-options-panel{
  top:max(94px,calc(env(safe-area-inset-top) + 80px))!important;
  right:max(12px,calc((100vw - 480px)/2 + 14px))!important;
  width:min(350px,calc(100vw - 28px))!important;
}
.vem6-utility-dock .utility-btn span{display:block!important;}
.vem6-utility-dock .admin-fab .util-icon{font-size:19px!important;}
.vem6-utility-dock .admin-fab{font-size:10px!important;}
.modal-backdrop{padding:86px max(12px,calc((100vw - 480px)/2 + 12px)) 28px!important;}
.modal{width:min(100%,452px)!important;max-height:calc(100dvh - 126px)!important;}
.vem6-center-hint-slot{min-height:76px!important;height:76px!important;max-height:76px!important;}
.vem6-hint-content{width:100%;line-height:1.4!important;text-align:center;}
.vem6-hint-content span{overflow-wrap:anywhere;word-break:keep-all;}

/* Admin keypad */
.vem6-admin-modal{width:min(100%,410px)!important;}
.vem6-admin-copy{margin:4px 0 16px;text-align:center;color:var(--vem6-muted);font-size:14px;}
.vem6-admin-dots{display:flex;justify-content:center;gap:12px;margin:8px 0 24px;min-height:14px;}
.vem6-admin-dots span{width:12px;height:12px;border-radius:50%;border:1px solid rgba(120,155,210,.52);background:rgba(255,255,255,.025);box-shadow:inset 0 0 8px rgba(0,0,0,.35);}
.vem6-admin-dots span.filled{border-color:#5ddcff;background:#5c9dff;box-shadow:0 0 12px rgba(91,157,255,.45);}
.vem6-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,320px);margin:0 auto;}
.vem6-keypad button{min-height:62px;border-radius:16px;border:1px solid rgba(100,143,207,.30);background:linear-gradient(145deg,#0a1728,#07111e);color:#f7f9ff;font-size:22px;font-weight:800;box-shadow:inset 0 0 16px rgba(79,122,190,.05);}
.vem6-keypad button:active{border-color:#60d8ff;background:#0c1d31;}
.vem6-admin-status{min-height:24px;margin-top:14px;text-align:center;color:#ff9bad;font-size:13px;font-weight:800;}
.vem6-admin-actions{display:grid;gap:12px;}
.vem6-admin-action{width:100%;min-height:84px;padding:16px 18px;border:1px solid transparent;border-radius:18px;background:linear-gradient(#081524,#081524) padding-box,var(--vem6-grad) border-box;color:#fff;text-align:left;}
.vem6-admin-action strong{display:block;font-size:19px;margin-bottom:5px;}
.vem6-admin-action small{display:block;color:#9eabbf;font-size:12px;line-height:1.4;}
.vem6-admin-action-panel{margin-top:16px;}
.vem6-admin-form{display:grid;gap:10px;padding-top:14px;border-top:1px solid rgba(112,143,190,.17);}
.vem6-admin-form label{display:grid;gap:8px;color:#cbd6e7;font-size:13px;font-weight:800;}
.vem6-admin-form small{color:#8d9bb0;line-height:1.4;}

@media (max-width:420px){
  body[data-theme="mono-dark"]{padding:10px 0!important;}
  #app.app-shell.vem6-shell{width:min(calc(100% - 10px),480px)!important;min-height:calc(100dvh - 20px)!important;}
  .vem6-landing,.vem6-nickname,.vem6-home{min-height:calc(100dvh - 20px)!important;}
  .vem6-utility-dock{right:10px!important;top:max(20px,calc(env(safe-area-inset-top) + 12px))!important;gap:5px!important;}
  .vem6-back{left:10px!important;top:max(20px,calc(env(safe-area-inset-top) + 12px))!important;}
  .vem6-utility-dock .utility-btn,.vem6-back{width:50px!important;height:50px!important;min-width:50px!important;}
  .vem6-utility-dock .utility-btn{font-size:9px!important;}
  .vem6-utility-dock .utility-btn .util-icon{font-size:18px!important;}
  .screen{padding-top:98px!important;}
  .vem6-center-hint-slot{min-height:82px!important;height:82px!important;max-height:82px!important;}
  .vem6-keypad button{min-height:58px;}
}

@media (min-width:900px){
  #app.app-shell.vem6-shell{max-width:480px!important;padding-left:18px!important;padding-right:18px!important;}
  .screen{padding-top:110px!important;}
  .vem6-logo{font-size:118px!important;}
  .vem6-big-menu{min-height:150px!important;}
}

/* =========================================================
   VEM v6.2 — mobile utility fix + DATA list readability
   ========================================================= */
/* The old .utility-btn rule made every child position:fixed. Inside the
   unified dock they must be normal flex items or mobile browsers push/stack
   them outside the viewport. */
.vem6-utility-dock > .utility-btn{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
}
.vem6-utility-dock > .options-fab{right:auto!important;top:auto!important;}
.vem6-utility-dock{
  max-width:calc(100vw - 92px)!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
}
@media(max-width:390px){
  .vem6-utility-dock{gap:4px!important;right:8px!important;max-width:calc(100vw - 78px)!important;}
  .vem6-utility-dock .utility-btn{width:46px!important;height:48px!important;min-width:46px!important;padding:4px 2px!important;font-size:8px!important;}
  .vem6-utility-dock .utility-btn .util-icon{font-size:17px!important;}
  .vem6-back{width:48px!important;height:48px!important;left:8px!important;font-size:31px!important;}
}

/* Avoid the bright browser-default-looking nickname submit button. */
.vem6-nickname-row .primary-btn{
  background:linear-gradient(#081423,#081423) padding-box,var(--vem6-grad) border-box!important;
  color:#f7f9ff!important;
  border:1px solid transparent!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

/* DATA category menu: one calm list item per row. */
.vem6-data-menu{overflow:hidden!important;}
.vem6-data-choices{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin-top:8px!important;
}
.vem6-data-choices > button{
  width:100%!important;
  min-height:76px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto 22px!important;
  align-items:center!important;
  gap:11px!important;
  padding:12px 13px!important;
  border:1px solid rgba(102,142,205,.28)!important;
  border-radius:15px!important;
  background:#091524!important;
  color:#f7f9ff!important;
  text-align:left!important;
  box-shadow:none!important;
}
.vem6-data-choice-index{font-size:11px;font-weight:900;color:#5baeff;letter-spacing:.06em;}
.vem6-data-choice-copy{min-width:0;display:grid;gap:4px;}
.vem6-data-choice-copy strong{font-size:16px;line-height:1.25;}
.vem6-data-choice-copy small{font-size:12px;line-height:1.4;color:#909db0;}
.vem6-data-choice-count{font-size:12px;font-weight:900;color:#7edcff;white-space:nowrap;}
.vem6-data-choice-arrow{font-size:24px;color:#5c769d;line-height:1;}

/* DATA browser itself: clearly separated, vertically listed records. */
.data-browser-list:not(.match-browser-list){
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:2px 4px 10px 0!important;
}
.data-list-row{
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px 12px!important;
  align-items:start!important;
  padding:14px 13px!important;
  border-radius:15px!important;
  border:1px solid rgba(94,132,188,.24)!important;
  background:#091524!important;
}
.data-list-index{
  grid-row:1 / span 2;
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(66,132,221,.10);
  border:1px solid rgba(92,153,235,.22);
  color:#68b7ff;font-size:11px;font-weight:950;
}
.data-list-row .data-entry-main{gap:6px!important;}
.data-list-row .data-entry-main strong{font-size:16px!important;line-height:1.35!important;}
.data-list-row .data-entry-main span{font-size:13px!important;line-height:1.45!important;color:#d4dbe6!important;}
.data-list-row .data-entry-main em{font-size:12px!important;line-height:1.4!important;color:#8ca0bc!important;}
.data-list-row .data-entry-meta{
  grid-column:2;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  text-align:left!important;
}
.data-list-row .data-type-badge{white-space:nowrap;}

/* Match contents are a vertical list instead of tightly packed chips. */
.match-browser-list .match-chips-scroll{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
}
.match-browser-list .match-chip.match-list-row{
  min-height:54px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  padding:9px 11px!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(100,135,190,.16)!important;
}
.match-list-index{font-size:10px;font-weight:950;color:#61b9ff;text-align:center;}
.match-list-copy{min-width:0;display:grid;gap:3px;}
.match-list-copy b{font-size:14px!important;line-height:1.3!important;overflow-wrap:anywhere;}
.match-list-copy small{font-size:12px!important;line-height:1.35!important;color:#9cabc0!important;}

@media(max-width:420px){
  .vem6-data-choices > button{grid-template-columns:30px minmax(0,1fr) auto 18px!important;gap:8px!important;min-height:72px!important;padding:11px 10px!important;}
  .vem6-data-choice-copy strong{font-size:15px;}
  .vem6-data-choice-copy small{font-size:11px;}
  .data-list-row{grid-template-columns:30px minmax(0,1fr)!important;padding:12px 10px!important;}
  .data-list-index{width:28px;height:28px;}
}
.vem6-nickname-row .primary-btn{white-space:nowrap!important;padding-left:10px!important;padding-right:10px!important;word-break:keep-all!important;}


/* VEM v6.3 — device dark-mode hardening. The game owns its dark palette explicitly. */
:root{color-scheme:dark;}
html,body{background:#070b12!important;color:#f7f9ff!important;color-scheme:dark;}
body[data-theme="mono-dark"]{background:#070b12!important;color:#f7f9ff!important;}
button,input,select,textarea{font:inherit;}
input,select,textarea{color-scheme:dark;background-color:#07111f;color:#f7f9ff;}
input::placeholder,textarea::placeholder{color:#8390a3;opacity:1;}
select option{background:#07111f;color:#f7f9ff;}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.48;}
@media (prefers-color-scheme:dark){
  html,body,body[data-theme="mono-dark"]{background:#070b12!important;color:#f7f9ff!important;}
  .text-input,.data-search,.audio-slider{color-scheme:dark;}
}
@media (prefers-color-scheme:light){
  /* VEM remains dark even when the device is light, preventing browser auto-theme mismatches. */
  html,body,body[data-theme="mono-dark"]{background:#070b12!important;color:#f7f9ff!important;}
}

/* v6.3 visibility fix: component display rules must never override .hidden. */
.vem6-utility-dock > .utility-btn.hidden{display:none!important;}
.vem6-back.hidden{display:none!important;}


/* v6.4 classroom-load resilience */
button:not(:disabled){-webkit-user-select:none;user-select:none;}
button:not(:disabled):active{opacity:.92;}


/* =========================================================
   VEM v6.5 — TRUE MOBILE VIEWPORT SAFETY
   Wide desktop screens are served through desktop.html's 412px iframe viewport.
   These rules also harden the native mobile layout against long text overflow.
   ========================================================= */
html{overscroll-behavior:none;}
body{max-width:100%;}
#app.app-shell.vem6-shell{contain:inline-size;}
.vem6-game-screen,
.vem6-game-screen .play-zone,
.vem6-game-screen .central-card,
.vem6-game-screen .hand-card,
.vem6-writing-box,
.vem6-writing-box label{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
.vem6-game-screen :is(.central-text,.hand-main,.status-line,.mode-strip span,.vem6-hint-content span,.vem6-writing-box small){
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
  max-width:100%!important;
}
.vem6-writing-box input{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;}

/* Desktop wrapper uses 412 CSS px, so this is also the desktop game layout. */
@media(max-width:540px){
  .game-screen{padding-left:0!important;padding-right:0!important;}
  .vem6-game-screen .play-zone{padding:9px!important;border-radius:18px!important;}
  .vem6-game-screen .central-card{padding:18px 11px!important;}
  .central-text.center-short{font-size:clamp(27px,8.2vw,35px)!important;}
  .central-text.center-medium{font-size:clamp(23px,7.1vw,31px)!important;}
  .central-text.center-long{font-size:clamp(19px,5.9vw,26px)!important;}
  .central-text.center-xlong{font-size:clamp(17px,5.0vw,22px)!important;}
  .central-text.center-xxlong{font-size:clamp(15px,4.35vw,19px)!important;}
  .hand-card{font-size:clamp(14px,4.25vw,18px)!important;}
  .vem6-writing-box input{font-size:16px!important;}
}