/* ======================================================
   Toán Vui – Math Learning for Kids
   Static CSS, no frameworks
   ====================================================== */

:root{
  --c-purple: #7C3AED;
  --c-purple-d:#5B21B6;
  --c-purple-l:#A78BFA;
  --c-pink:   #EC4899;
  --c-yellow: #FBBF24;
  --c-orange: #FB923C;
  --c-green:  #22C55E;
  --c-green-d:#15803D;
  --c-blue:   #3B82F6;
  --c-blue-d: #1E40AF;
  --c-red:    #EF4444;
  --c-cream:  #FFF8E7;
  --c-paper:  #FFFFFF;
  --c-ink:    #2A1208;
  --c-mut:    #6B7280;
  --c-bg:     #F5F0FF;

  --shadow-soft: 0 4px 0 rgba(0,0,0,.08), 0 14px 30px -10px rgba(124,58,237,.25);
  --shadow-card: 0 10px 30px -10px rgba(124,58,237,.35);
  --shadow-press: 0 2px 0 rgba(0,0,0,.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body{
  margin:0; padding:0; height:100%;
  font-family: 'Fredoka', 'Baloo 2', system-ui, -apple-system, sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow: hidden;
}
body{
  background: radial-gradient(1200px 800px at 10% -10%, #E9D5FF 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 10%, #FCD34D33 0%, transparent 60%),
              radial-gradient(900px 700px at 50% 110%, #A7F3D055 0%, transparent 60%),
              var(--c-bg);
}
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ====== APP SHELL ====== */
.app{
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
}
@media (min-width: 520px){
  .app{
    height: min(900px, 100dvh);
    margin-top: max(0px, calc((100dvh - 900px) / 2));
    border-radius: 36px;
    box-shadow: 0 30px 80px -20px rgba(91,33,182,.45), 0 6px 0 rgba(0,0,0,.05);
    background: #fff;
    overflow: hidden;
  }
  body{ display:flex; align-items:flex-start; justify-content:center; padding-top: 0; }
}

/* ====== SCREENS ====== */
.screen{
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active{ display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ====== HOME SCREEN ====== */
.screen-home{
  padding: 16px 16px 40px;
  background:
    radial-gradient(700px 500px at 0% -10%, #DDD6FE 0%, transparent 55%),
    radial-gradient(600px 500px at 100% 0%, #FDE68A55 0%, transparent 55%),
    linear-gradient(180deg, #F5F0FF 0%, #FFF7ED 100%);
}
.home-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.blob{
  position:absolute; border-radius:50%; filter: blur(40px); opacity:.45;
}
.blob-1{ width:260px; height:260px; background:#A78BFA; top:-60px; left:-80px; }
.blob-2{ width:220px; height:220px; background:#FCD34D; top:80px; right:-60px; }
.blob-3{ width:280px; height:280px; background:#86EFAC; bottom:-100px; left:-40px; }

.home-header{
  position: relative; z-index: 2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 6px 8px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
  font-size: 26px;
}
.brand-logo::before{ content:"🐶"; }
.brand-title{ font-weight: 800; font-size: 22px; letter-spacing:.2px; color: var(--c-purple-d); }
.brand-sub{ font-size: 12px; color: var(--c-mut); font-weight: 500; margin-top: -2px; }

.icon-btn{
  width:42px; height:42px; border-radius:14px;
  background:#fff; box-shadow: var(--shadow-soft);
  font-size: 18px; display:inline-flex; align-items:center; justify-content:center;
  transition: transform .1s;
}
.icon-btn:active{ transform: scale(.94); }
.icon-btn.ghost{ background: rgba(255,255,255,.7); }

/* HERO */
.hero{
  position: relative; z-index: 2;
  display:flex; align-items:flex-end; gap:10px;
  padding: 14px 4px 8px;
}
.hero-mascot{
  width: 130px; height: 130px;
  background: linear-gradient(135deg, #C4B5FD 0%, #F0ABFC 100%);
  border-radius: 50%;
  display:flex; align-items:flex-end; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(124,58,237,.55);
  position: relative;
  animation: bobble 3s ease-in-out infinite;
}
.hero-mascot svg{ width: 120%; height: 120%; margin-bottom: -6px; }
@keyframes bobble{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%    { transform: translateY(-6px) rotate(2deg); }
}
.hero-bubble{ flex:1; padding-bottom: 10px; }
.bubble{
  background:#fff; padding: 12px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.4;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.bubble::before{
  content:""; position:absolute; left:-10px; bottom: 16px;
  border:10px solid transparent; border-right-color:#fff;
}

/* PANEL */
.card{
  position: relative; z-index: 2;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-top: 14px;
}
.panel-title{
  font-weight: 700; font-size: 14px; color: var(--c-purple-d);
  margin-bottom: 10px;
}
.grade-row, .op-row{
  display: grid; gap: 8px;
}
.grade-row{ grid-template-columns: repeat(5, 1fr); }
.op-row{ grid-template-columns: repeat(4, 1fr) ; }
.op-row{ grid-template-columns: repeat(5, 1fr); }

.chip, .op-chip{
  padding: 12px 6px;
  border-radius: 14px;
  background: #F3F0FF;
  font-weight: 700; font-size: 14px;
  color: var(--c-purple-d);
  border: 2px solid transparent;
  transition: transform .08s, background .15s, color .15s;
  text-align:center;
}
.chip:active, .op-chip:active{ transform: scale(.95); }
.chip.active{
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
}
.op-chip{
  font-size: 22px; padding: 12px 4px;
  background: #FFF7ED; color: var(--c-orange);
}
.op-chip.active{
  background: linear-gradient(135deg, var(--c-orange), #FB7185);
  color: #fff;
}
.op-chip.wide{ font-size: 13px; padding: 12px 6px; }

/* MODE CARDS */
.modes{ position: relative; z-index: 2; margin-top: 18px; }
.modes-title{
  font-weight: 800; font-size: 16px; color: var(--c-ink);
  margin: 0 4px 10px;
}
.mode-card{
  display:flex; align-items:center; gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  text-align: left;
  transition: transform .08s;
  position: relative;
  overflow: hidden;
}
.mode-card::before{
  content:""; position:absolute; inset: 0; opacity:.08; pointer-events:none;
}
.mode-quiz::before{ background: linear-gradient(135deg, var(--c-purple), var(--c-pink)); }
.mode-cascade::before{ background: linear-gradient(135deg, var(--c-blue), var(--c-green)); }
.mode-fill::before{ background: linear-gradient(135deg, var(--c-orange), var(--c-yellow)); }
.mode-card:active{ transform: scale(.98); }
.mode-icon{
  width: 56px; height: 56px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  font-size: 30px;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}
.mode-quiz   .mode-icon{ background: linear-gradient(135deg, var(--c-purple), var(--c-pink)); }
.mode-cascade .mode-icon{ background: linear-gradient(135deg, var(--c-blue), var(--c-green)); }
.mode-fill   .mode-icon{ background: linear-gradient(135deg, var(--c-orange), var(--c-yellow)); }
.mode-info{ flex: 1; min-width: 0; }
.mode-title{ font-weight: 800; font-size: 17px; }
.mode-desc{ font-size: 12.5px; color: var(--c-mut); margin-top: 1px; }
.mode-best{
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--c-orange);
  background: #FFF7ED;
  padding: 3px 8px; border-radius: 999px;
}
.mode-arrow{
  font-size: 28px; color: var(--c-mut);
  font-weight: 800;
}
.footer-note{
  position: relative; z-index: 2;
  text-align: center; font-size: 12px; color: var(--c-mut);
  margin: 14px 8px 8px; line-height: 1.4;
}

/* ====== GAME SCREEN ====== */
.screen-game{
  display:none;
  background: linear-gradient(180deg, #EDE9FE 0%, #F5F0FF 50%, #FFF7ED 100%);
}
.screen-game.active{ display:flex; flex-direction:column; }

.hud{
  display:flex; align-items:center; gap:8px;
  padding: 12px 12px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(124,58,237,.1);
  z-index: 5; position: relative;
}
.hud-back{
  width:36px; height:36px; border-radius: 12px;
  background:#fff; font-size: 22px; font-weight: 800;
  color: var(--c-purple-d);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
.hud-avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #C4B5FD, #F0ABFC);
  display:flex; align-items:flex-end; justify-content:center;
  overflow: hidden; box-shadow: var(--shadow-soft);
  flex-shrink:0;
}
.hud-avatar svg{ width: 130%; height: 130%; margin-bottom: -4px; }
.hud-hearts{ display:flex; gap: 2px; font-size: 16px; flex-shrink:0; }
.heart{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); transition: transform .2s; }
.heart.lost{ filter: grayscale(1); opacity:.35; transform: scale(.85); }
.hud-progress{
  flex:1; height: 18px; position: relative;
  display:flex; align-items:center;
}
.hud-bar{
  width: 100%; height: 12px; border-radius: 999px;
  background: rgba(0,0,0,.08); overflow: hidden;
}
.hud-bar-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-orange));
  border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.hud-coin{
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  font-size: 22px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}
.hud-score{
  font-weight: 800; font-size: 18px; color: var(--c-purple-d);
  background:#fff; padding: 4px 10px; border-radius: 10px;
  box-shadow: var(--shadow-soft);
  min-width: 44px; text-align:center;
}
.hud-pause{
  width:36px; height:36px; border-radius: 12px;
  background:#fff; font-size: 14px; color: var(--c-purple-d);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}

.game-area{
  flex: 1;
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px;
  overflow: hidden;
}

/* ====== QUIZ MODE ====== */
.quiz-wrap{
  flex: 1;
  display: flex; flex-direction: column;
  gap: 18px;
}
.quiz-visual{
  background:#fff; border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  min-height: 110px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.quiz-visual.hidden-visual{ display: none; }
.quiz-q-wrap{ flex: 1; display: grid; place-items: center; min-height: 80px; }
.quiz-options{ margin-top: 0; }
.visual-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  font-size: 26px;
  line-height: 1;
}
.visual-grid .vi{
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 8px;
  background: #F5F3FF;
}
.visual-grid .vi.b{ background:#FEF3C7; }

.quiz-q{
  text-align: center;
  font-weight: 800;
  font-size: 56px;
  color: var(--c-ink);
  letter-spacing: 1px;
  line-height: 1.05;
  text-shadow: 0 3px 0 rgba(0,0,0,.04);
}
.quiz-q small{ font-size: 18px; color: var(--c-mut); display:block; font-weight: 600; margin-top:4px; }
.quiz-options{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.opt{
  background: #fff;
  border-radius: 18px;
  padding: 20px 8px;
  font-size: 28px; font-weight: 800;
  color: var(--c-ink);
  box-shadow: 0 5px 0 rgba(0,0,0,.06), var(--shadow-soft);
  transition: transform .08s;
  border: 2px solid transparent;
}
.opt:active{ transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.06); }
.opt.correct{
  background: linear-gradient(135deg, var(--c-green), #4ADE80);
  color: #fff; border-color: var(--c-green-d);
  animation: pop .35s ease;
}
.opt.wrong{
  background: linear-gradient(135deg, var(--c-red), #FCA5A5);
  color: #fff; border-color: #B91C1C;
  animation: shake .35s ease;
}
@keyframes pop{ 0%{transform:scale(.96)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ====== CASCADE MODE ====== */
.cascade-wrap{
  flex:1; display:flex; flex-direction:column; gap: 12px;
  position: relative;
}
.cascade-header{
  text-align:center; background:#fff; border-radius: 22px;
  padding: 16px; box-shadow: var(--shadow-card);
}
.cascade-prompt{
  font-size: 14px; color: var(--c-mut); font-weight: 600; margin-bottom: 4px;
}
.cascade-target{
  font-size: 56px; font-weight: 800; color: var(--c-purple-d);
  line-height: 1;
}
.cascade-track{
  flex: 1; position: relative; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #1E3A8A, #1E40AF);
  box-shadow: var(--shadow-card);
}
.cascade-track::before{
  content:""; position:absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.04) 38px 40px);
  pointer-events: none;
}
.cascade-zone{
  position: absolute; left: 8px; right: 8px;
  top: 38%; height: 56px;
  border: 3px dashed rgba(34,197,94,.7);
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(34,197,94,.4) inset;
}
.tile{
  position: absolute;
  left: 14px; right: 14px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #BAE6FD, #7DD3FC);
  color: var(--c-blue-d);
  font-weight: 800; font-size: 22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  transition: transform .15s, background .15s, color .15s;
}
.tile.hit{
  background: linear-gradient(180deg, #86EFAC, #22C55E);
  color:#fff; transform: scale(1.06);
}
.tile.miss{
  background: linear-gradient(180deg, #FCA5A5, #EF4444);
  color:#fff;
}

/* ====== FILL MODE ====== */
.fill-wrap{
  flex:1; display:flex; flex-direction:column; gap: 12px;
}
.fill-list{
  background: #fff;
  border-radius: 22px; padding: 14px 18px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 6px;
  flex: 0 0 auto;
}
.fill-row{
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  font-size: 22px; font-weight: 700;
  color: #D1D5DB;
  padding: 6px 0;
  transition: color .2s;
}
.fill-row.done{ color: #9CA3AF; }
.fill-row.done .tick{ color: var(--c-green); margin-left: 6px; }
.fill-row.active{ color: var(--c-ink); font-size: 30px; }
.fill-row.active .fill-input{
  display:inline-flex; min-width: 64px; height: 42px;
  border: 3px solid var(--c-green); border-radius: 10px;
  align-items:center; justify-content:center;
  background:#fff; color: var(--c-ink);
}
.fill-input{
  display:inline-flex; min-width: 50px; height: 34px;
  border: 2px solid #E5E7EB; border-radius: 8px;
  align-items:center; justify-content:center;
  background:#fff;
}

.numpad{
  margin-top: auto;
  background: #fff;
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.numkey{
  height: 56px; border-radius: 16px;
  background: #F3F0FF; color: var(--c-purple-d);
  font-size: 26px; font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  transition: transform .08s;
}
.numkey:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.numkey.action{
  background: linear-gradient(135deg, var(--c-orange), var(--c-pink));
  color:#fff;
  font-size: 18px;
}
.numkey.action.ok{
  background: linear-gradient(135deg, var(--c-green), #4ADE80);
}

/* ====== FEEDBACK ====== */
.float-feedback{
  position: absolute;
  top: 30%; left: 50%; transform: translate(-50%, -50%);
  font-size: 44px; font-weight: 800;
  color: var(--c-orange);
  text-shadow: 0 4px 0 rgba(0,0,0,.1);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}
.float-feedback.show{
  animation: feedback 1s ease-out;
}
@keyframes feedback{
  0%   { opacity:0; transform: translate(-50%, -30%) scale(.6); }
  20%  { opacity:1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity:0; transform: translate(-50%, -90%) scale(1);   }
}
.confetti{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 9;
}

/* ====== RESULT ====== */
.screen-result{
  background: radial-gradient(700px 500px at 50% 10%, #C4B5FD 0%, transparent 60%),
              linear-gradient(180deg, #F5F0FF 0%, #FFF7ED 100%);
  padding: 20px;
}
.result-card{
  margin-top: 50px;
  background: #fff;
  border-radius: 32px;
  padding: 28px 22px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
}
.result-mascot{
  width: 130px; height: 130px;
  margin: -90px auto 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #FB923C);
  display:flex; align-items:flex-end; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(251,146,60,.6);
  border: 6px solid #fff;
  overflow: hidden;
}
.result-mascot svg{ width: 130%; height: 130%; margin-bottom: -8px; }
.result-stars{
  font-size: 38px;
  color: #E5E7EB;
  letter-spacing: 6px;
  margin: 8px 0 4px;
}
.result-stars .star.on{
  color: var(--c-yellow);
  text-shadow: 0 3px 0 #B45309;
  animation: starPop .5s ease both;
}
.result-stars .star.on:nth-child(2){ animation-delay:.15s; }
.result-stars .star.on:nth-child(3){ animation-delay:.3s; }
@keyframes starPop{
  0%{ transform: scale(0) rotate(-30deg); }
  60%{ transform: scale(1.3) rotate(10deg); }
  100%{ transform: scale(1) rotate(0); }
}
.result-title{
  font-size: 28px; font-weight: 800;
  color: var(--c-purple-d);
  margin: 4px 0 14px;
}
.result-stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #F5F3FF;
  border-radius: 18px;
  padding: 12px 6px;
  margin-bottom: 14px;
}
.stat-num{ font-weight: 800; font-size: 22px; color: var(--c-purple-d); }
.stat-label{ font-size: 12px; color: var(--c-mut); font-weight: 600; }
.result-best{
  font-size: 13px; color: var(--c-orange); font-weight: 700;
  background: #FFF7ED; display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.result-actions{ display:flex; gap: 10px; }
.result-actions .btn{ flex: 1; }

/* ====== BUTTONS ====== */
.btn{
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 5px 0 rgba(0,0,0,.1);
  transition: transform .08s;
}
.btn:active{ transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.btn-primary{
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  color: #fff;
}
.btn-secondary{
  background: #F3F0FF; color: var(--c-purple-d);
}
.btn-tiny{ padding: 8px 12px; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.08); }

/* ====== OVERLAY ====== */
.overlay{
  position: absolute; inset: 0;
  background: rgba(20,10,40,.5);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 50;
  padding: 20px;
}
.overlay.active{ display: flex; animation: fadeIn .2s ease; }
.overlay-card{
  width: 100%; max-width: 360px;
  background: #fff;
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
}
.overlay-title{
  font-size: 22px; font-weight: 800;
  color: var(--c-purple-d);
  text-align: center;
  margin-bottom: 10px;
}
.overlay-body{
  text-align: center; color: var(--c-mut); margin-bottom: 18px;
}
.overlay-actions{ display:flex; gap: 10px; margin-top: 12px; }
.overlay-actions .btn{ flex: 1; }
.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F3F0FF;
  font-weight: 600;
}
.setting-row:last-of-type{ border-bottom: none; }

.toggle{
  width: 48px; height: 28px; border-radius: 999px;
  background: #E5E7EB;
  position: relative; transition: background .15s;
}
.toggle span{
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform .15s;
}
.toggle.on{ background: var(--c-green); }
.toggle.on span{ transform: translateX(20px); }

/* ====== UTILITIES ====== */
.hidden{ display:none !important; }

/* Tiny screens — adapt padding */
@media (max-height: 700px){
  .hero-mascot{ width: 100px; height: 100px; }
  .hero-bubble{ font-size: 12px; }
  .card{ padding: 12px; }
  .mode-card{ padding: 10px 12px; }
  .mode-icon{ width: 48px; height: 48px; font-size: 26px; }
  .quiz-q{ font-size: 44px; }
  .opt{ padding: 16px 8px; font-size: 24px; }
  .numkey{ height: 48px; font-size: 22px; }
}