/* TEAM ARCADE — 학습 문제 화면 (learn.js) */
.lq{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; padding:4px 2px; }
.lq-q{ font-family:var(--game); font-size:clamp(20px,6vw,28px); text-align:center; color:#fff; text-shadow:0 3px 0 #0E0838; word-break:keep-all; line-height:1.25; }
.lq-calc .lq-q{ font-size:clamp(38px,12vw,58px); color:#FFD12E; letter-spacing:1px; }
.lq-v{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.lq-emo{ font-size:clamp(84px,30vw,130px); line-height:1.05; filter:drop-shadow(0 6px 0 rgba(14,8,56,.45)); animation:lqPop .3s cubic-bezier(.2,1.5,.4,1); } .lq-emo.sm{ font-size:clamp(56px,18vw,80px); }
.lq-ko{ font-family:var(--game); font-size:20px; color:#C9C3FF; }
.lq-sent{ max-width:92%; padding:14px 18px; border-radius:18px; background:#fff; color:#1B1050; border:4px solid #0E0838; box-shadow:0 6px 0 #0E0838; font-size:clamp(20px,6vw,26px); font-weight:900; text-align:center; line-height:1.35; }
.lq-clk{ width:min(52vw,220px); filter:drop-shadow(0 6px 0 rgba(14,8,56,.5)); }
.lq-pizza{ width:min(52vw,210px); filter:drop-shadow(0 6px 0 rgba(14,8,56,.5)); }
.lq-shapes{ width:min(80vw,320px); max-height:30vh; background:#fff; border:4px solid #0E0838; border-radius:18px; padding:6px; box-shadow:0 6px 0 #0E0838; }
.lq-mbox{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-radius:20px; background:#fff; color:#1B1050; border:4px solid #0E0838; box-shadow:0 6px 0 #0E0838; }
.lq-mbox .lq-it{ font-size:56px; } .lq-mbox b{ display:block; font-family:var(--game); font-weight:400; font-size:24px; } .lq-mbox small{ display:block; font-weight:900; font-size:16px; color:#E8326A; }
.lq-say{ font-family:var(--game); font-size:22px; padding:12px 24px; border-radius:18px; border:4px solid #0E0838; color:#05312A; background:linear-gradient(180deg,#8CFFE9,#5BF5D6 45%,#14B898); box-shadow:0 6px 0 #0A6E5B; cursor:pointer; }
.lq-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:440px; }
.lq-opts.two .lq-o{ min-height:110px; font-size:clamp(26px,8vw,40px); }
.lq-opts.big .lq-o{ font-size:clamp(46px,14vw,64px); min-height:110px; }
.lq-o{ font-family:var(--game); font-size:clamp(22px,6.5vw,30px); min-height:70px; padding:8px; border-radius:20px; border:4px solid #0E0838; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#7B6BF0,#4A3BC4); box-shadow:0 6px 0 #231877, inset 0 3px 0 rgba(255,255,255,.3); display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:manipulation; }
.lq-o small{ font-family:Pretendard,sans-serif; font-size:14px; font-weight:900; opacity:.9; }
.lq-o:active{ translate:0 4px; box-shadow:0 2px 0 #231877; }
.lq-o.ok{ background:linear-gradient(180deg,#8CFFE9,#5BF5D6 45%,#14B898); color:#05312A; box-shadow:0 6px 0 #0A6E5B; animation:lqPop .3s; }
.lq-o.no{ background:linear-gradient(180deg,#FF8DB6,#FF6FA0 45%,#E8326A); animation:lqShk .35s; }
.lq-slot{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.lq-slot i{ width:clamp(30px,9vw,42px); height:clamp(40px,11vw,52px); border-radius:10px; border:3px dashed rgba(255,255,255,.4); display:grid; place-items:center; font-style:normal; font-family:var(--game); font-size:clamp(22px,7vw,32px); color:#FFD12E; }
.lq-slot i.on{ border-style:solid; border-color:#FFD12E; background:rgba(255,209,46,.15); animation:lqPop .25s; }
.lq-tiles{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:440px; }
.lq-t{ width:clamp(50px,15vw,66px); height:clamp(54px,16vw,70px); border-radius:16px; border:4px solid #0E0838; font-family:var(--game); font-size:clamp(26px,8vw,36px); color:#4A2A00; cursor:pointer;
  background:linear-gradient(180deg,#FFF3A8,#FFD12E 40%,#F2A900); box-shadow:0 6px 0 #A87300, inset 0 3px 0 rgba(255,255,255,.6); touch-action:manipulation; }
.lq-tiles.seq .lq-t{ background:linear-gradient(180deg,#8CFFE9,#5BF5D6 45%,#14B898); color:#05312A; box-shadow:0 6px 0 #0A6E5B; }
.lq-t.used{ opacity:.25; translate:0 4px; box-shadow:none; }
.lq-t.shk{ animation:lqShk .35s; background:linear-gradient(180deg,#FF8DB6,#E8326A); }
.lq.lq-ok .lq-q::after{ content:' ⭕'; } .lq.lq-no .lq-q::after{ content:' ❌'; }
@keyframes lqPop{ 0%{ scale:.7; } 60%{ scale:1.12; } }
@keyframes lqShk{ 20%{ translate:-8px 0; } 40%{ translate:8px 0; } 60%{ translate:-5px 0; } 80%{ translate:5px 0; } }