*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;min-height:100vh;
  background:linear-gradient(160deg,#1a0545 0%,#2d1470 30%,#0d2d8a 65%,#053f6b 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px;overflow-x:hidden;}
body::after{content:'';position:fixed;top:20%;left:50%;transform:translateX(-50%);
  width:700px;height:500px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(140,80,255,.18) 0%,rgba(60,120,255,.08) 50%,transparent 75%);}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 8% 12%,rgba(255,220,80,.95),transparent),
    radial-gradient(1.5px 1.5px at 22% 35%,rgba(255,255,255,.85),transparent),
    radial-gradient(2.5px 2.5px at 38% 8%,rgba(255,220,80,.85),transparent),
    radial-gradient(1px 1px at 55% 28%,rgba(255,255,255,.7),transparent),
    radial-gradient(2px 2px at 70% 15%,rgba(255,220,80,.8),transparent),
    radial-gradient(1.5px 1.5px at 85% 40%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 15% 60%,rgba(255,220,80,.6),transparent),
    radial-gradient(2px 2px at 48% 72%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.5px 1.5px at 78% 65%,rgba(255,220,80,.65),transparent),
    radial-gradient(1px 1px at 32% 85%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 92% 80%,rgba(255,220,80,.55),transparent),
    radial-gradient(1.5px 1.5px at 60% 90%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 5% 80%,rgba(255,220,80,.65),transparent),
    radial-gradient(2.5px 2.5px at 95% 20%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 42% 50%,rgba(255,220,80,.45),transparent);}
#app{width:100%;max-width:540px;position:relative;z-index:1;margin-top:8px;}
.screen{display:none;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.screen.active{display:block}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.card{background:#fff;border-radius:28px;padding:36px 26px;
  min-height:82vh;min-height:82dvh;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 2px rgba(140,100,255,.2),0 0 40px rgba(80,60,200,.12);}
/* Ekrany gry i wyników nie muszą mieć pełnej wysokości */
#screen-game .card,#screen-result .card{min-height:unset;justify-content:flex-start;}

/* ══ WELCOME ══ */
.wc{text-align:center}
.wlogo{font-size:3.5rem;display:block;animation:float 2s ease-in-out infinite alternate;margin-bottom:10px}
@keyframes float{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-10px) rotate(4deg)}}
.wtitle{font-family:'Baloo 2',cursive;font-size:clamp(1.9rem,8vw,3rem);line-height:1.1;margin-bottom:8px;
  background:linear-gradient(135deg,#7c3aed,#2563eb,#06b6d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.wsub{color:#888;font-weight:800;font-size:.95rem;margin-bottom:18px}
.sec-lbl{font-family:'Baloo 2',cursive;font-size:1.1rem;color:#666;text-align:center;margin-bottom:10px}
.age-grid{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.abtn{width:70px;height:70px;border-radius:16px;border:none;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:2rem;color:#fff;
  transition:transform .13s,box-shadow .13s;box-shadow:0 5px 0 rgba(0,0,0,.3)}
.abtn:hover{transform:translateY(-4px);box-shadow:0 9px 0 rgba(0,0,0,.3)}
.abtn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.abtn.sel{outline:3px solid #fbbf24;outline-offset:3px}
.abtn:nth-child(1){background:linear-gradient(145deg,#f43f5e,#e11d48)}
.abtn:nth-child(2){background:linear-gradient(145deg,#f97316,#ea580c)}
.abtn:nth-child(3){background:linear-gradient(145deg,#06b6d4,#0891b2)}
.abtn:nth-child(4){background:linear-gradient(145deg,#8b5cf6,#7c3aed)}
.abtn:nth-child(5){background:linear-gradient(145deg,#22c55e,#16a34a)}

/* ══ SUBJECT — 2 równe kafelki, stała wysokość ══ */
.stitle{font-family:'Baloo 2',cursive;font-size:1.65rem;text-align:center;color:#1e293b;margin-bottom:4px}
.stitle span{display:block;font-size:1rem;color:#94a3b8;font-family:'Nunito',sans-serif;font-weight:700;margin-bottom:16px}
.sbtn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.sbtn{height:140px;border-radius:18px;border:none;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:1.25rem;color:#fff;
  transition:transform .13s,box-shadow .13s;
  box-shadow:0 6px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.sbtn .se{font-size:2.6rem}
.sbtn:hover{transform:translateY(-4px);box-shadow:0 10px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.sbtn:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.sbtn.math{background:linear-gradient(145deg,#3b82f6,#1d4ed8)}
.sbtn.words{background:linear-gradient(145deg,#ec4899,#be185d)}
.sbtn.story{background:linear-gradient(145deg,#10b981,#059669)}
@media(max-width:400px){
  .sbtn{height:120px;font-size:1.1rem}
  .sbtn .se{font-size:2.2rem}
}

/* Story question display */
.story-box{background:linear-gradient(135deg,#FFF8E7,#FFF3CD);border:2px solid #FFD93D;
  border-radius:14px;padding:14px 16px;font-size:clamp(.9rem,3.5vw,1.1rem);
  font-weight:800;color:#5a3600;line-height:1.5;text-align:left;margin-bottom:10px;
  box-shadow:inset 0 2px 6px rgba(255,193,7,.15)}
.story-q{font-family:'Baloo 2',cursive;font-size:clamp(1.2rem,5vw,1.6rem);
  color:#2C3E50;text-align:center;padding:4px 0}
.back-btn{display:block;margin:8px auto 0;background:none;border:2px solid #ddd;border-radius:10px;
  padding:7px 20px;cursor:pointer;color:#aaa;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:.85rem;transition:all .13s}
.back-btn:hover{border-color:#aaa;color:#666}

/* ══ LEVEL MAP ══ */
.map-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.map-subject-icon{font-size:1.8rem}
.map-title-wrap{flex:1}
.map-title{font-family:'Baloo 2',cursive;font-size:1.3rem;color:#2C3E50}
.map-sub{font-size:.8rem;color:#999;font-weight:700}
.map-age-pill{background:linear-gradient(135deg,#FFD93D,#FF9F43);color:#7a4000;
  font-family:'Baloo 2',cursive;font-size:.8rem;padding:4px 12px;border-radius:20px}
.map-scroll{max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);
  overflow-y:auto;overflow-x:hidden;padding:2px 0;-webkit-overflow-scrolling:touch}
.map-scroll::-webkit-scrollbar{width:4px}
.map-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px}
.lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px}
.lv-card{border-radius:16px;padding:14px 10px 10px;text-align:center;cursor:pointer;
  transition:transform .13s,box-shadow .13s;box-shadow:0 4px 0 rgba(0,0,0,.2);position:relative;
  min-height:100px;}
.lv-card:hover:not(.locked){transform:translateY(-3px);box-shadow:0 7px 0 rgba(0,0,0,.2)}
.lv-card:active:not(.locked){transform:translateY(1px)}
.lv-card.locked{background:#e0e0e0!important;cursor:default;opacity:.65}
.lv-card.available{animation:lvcardPulse 1.6s ease-in-out infinite}
@keyframes lvcardPulse{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.2)}
  50%{box-shadow:0 4px 18px rgba(255,220,50,.6),0 4px 0 rgba(0,0,0,.2)}}
.lvc-num{position:absolute;top:6px;left:8px;font-family:'Baloo 2',cursive;
  font-size:.75rem;color:rgba(255,255,255,.8)}
.lvc-emoji{font-size:2rem;display:block;margin-bottom:4px}
.lvc-name{font-family:'Baloo 2',cursive;font-size:.8rem;color:#fff;line-height:1.2;margin-bottom:6px}
.lvc-stars{font-size:.95rem;min-height:20px}
.lvc-lock{font-size:1.4rem}
.lvc-desc{font-size:.65rem;color:rgba(255,255,255,.75);font-weight:700;margin-top:2px}
.progress-strip{background:#eee;border-radius:8px;height:8px;margin-top:12px;overflow:hidden}
.progress-strip-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#4ECDC4,#27AE60);transition:width .4s}
.map-stats{display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;font-weight:800;color:#999;margin-bottom:12px;padding:0 2px}
.map-stats span{color:#E67E22}

/* ══ GAME ══ */
.ghdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.rnd-info{font-family:'Baloo 2',cursive;font-size:.95rem;color:#888}
.diff-badge{font-family:'Baloo 2',cursive;font-size:.7rem;color:#fff;
  padding:4px 10px;border-radius:20px;transition:background .5s}
.score-box{font-family:'Baloo 2',cursive;font-size:1.05rem;color:#E67E22;
  background:#FFF3E0;padding:5px 12px;border-radius:20px;border:2px solid #FFD93D}
.pbar-wrap{height:11px;background:#EEE;border-radius:10px;margin-bottom:12px;overflow:hidden}
.pbar-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#3b82f6,#06b6d4);border-radius:10px;transition:width .4s}
.streak-bar{text-align:center;font-family:'Baloo 2',cursive;font-size:.85rem;color:#E67E22;min-height:20px;margin-bottom:10px}
.lvl-banner{text-align:center;font-family:'Baloo 2',cursive;font-size:.8rem;color:#9B59B6;margin-bottom:8px;min-height:18px}
.q-area{text-align:center;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:18px}
.q-badge{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:#bbb;margin-bottom:5px}
.q-emoji{font-size:2.6rem;display:block;margin-bottom:5px;animation:bob .9s ease-in-out infinite alternate}
@keyframes bob{from{transform:scale(1)}to{transform:scale(1.09)}}
.q-math{font-family:'Baloo 2',cursive;font-size:clamp(1.6rem,7vw,2.8rem);color:#2C3E50;word-break:break-word;line-height:1.3}
.word-row{font-family:'Baloo 2',cursive;font-size:clamp(1.7rem,7vw,2.5rem);
  color:#2C3E50;letter-spacing:5px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1px}
.wl{display:inline-block}
.wl.blank{color:#E91E8C;border-bottom:4px solid #E91E8C;min-width:34px;text-align:center;padding:0 3px}
.q-hint{font-size:.82rem;color:#aaa;font-weight:700;margin-top:7px}
.q-text{font-size:clamp(.82rem,3vw,1rem);font-weight:800;color:#2C3E50;line-height:1.7;
  background:#F0F4FF;border-radius:14px;padding:12px 14px;border-left:4px solid #9B59B6;
  text-align:left;width:100%}
.sbtn.text{background:linear-gradient(145deg,#E67E22,#D35400)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:7px}
.cbtn{padding:15px 8px;border-radius:16px;border:3px solid transparent;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:clamp(1.3rem,5vw,1.8rem);color:#fff;
  transition:transform .12s,box-shadow .12s;box-shadow:0 5px 0 rgba(0,0,0,.22)}
.cbtn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.3)}
.cbtn:active:not(:disabled){transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.cbtn:nth-child(1){background:linear-gradient(145deg,#f43f5e,#e11d48)}
.cbtn:nth-child(2){background:linear-gradient(145deg,#06b6d4,#0891b2)}
.cbtn:nth-child(3){background:linear-gradient(145deg,#f97316,#ea580c);color:#fff}
.cbtn:nth-child(4){background:linear-gradient(145deg,#8b5cf6,#7c3aed)}
.cbtn.correct{background:linear-gradient(145deg,#15803d,#166534)!important;border-color:#14532d;animation:pulse .35s}
.cbtn.wrong{background:linear-gradient(145deg,#991b1b,#7f1d1d)!important;border-color:#6b1414;animation:shake .35s;opacity:.4!important}
.cbtn:disabled{cursor:default}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.feedback{text-align:center;font-family:'Baloo 2',cursive;font-size:1.1rem;min-height:28px;padding-top:4px}
.feedback.ok{color:#27AE60}.feedback.err{color:#E74C3C}

/* ══ RESULT ══ */
.res-emoji{font-size:4rem;text-align:center;display:block;animation:popIn .4s .1s both}
.res-title{font-family:'Baloo 2',cursive;font-size:1.9rem;text-align:center;color:#2C3E50;margin:8px 0 4px}
.res-stars{text-align:center;font-size:2.6rem;margin:8px 0;animation:popIn .5s .2s both}
.res-score{text-align:center;font-family:'Baloo 2',cursive;font-size:1.35rem;color:#E67E22;margin-bottom:4px}
.res-msg{text-align:center;color:#888;font-weight:700;font-size:.9rem;margin-bottom:20px}
.res-btns{display:flex;gap:10px;flex-wrap:wrap}
.rbtn{flex:1;min-width:100px;padding:14px;border-radius:16px;border:none;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:1.1rem;color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.22);transition:transform .13s,box-shadow .13s}
.rbtn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.22)}
.rbtn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.22)}
.rbtn.p{background:linear-gradient(135deg,#27AE60,#1e8449)}
.rbtn.s{background:linear-gradient(135deg,#3498DB,#1a6dad)}
.rbtn.t{background:linear-gradient(135deg,#9B59B6,#7D3C98)}
.next-unlock{background:#FFF3E0;border-radius:12px;padding:10px 14px;margin-bottom:14px;
  font-size:.85rem;font-weight:800;color:#E67E22;text-align:center}

/* CONFETTI */
.cp{position:fixed;pointer-events:none;z-index:9999;border-radius:3px;animation:cfal 3.5s forwards}
@keyframes cfal{0%{transform:translateY(-30px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(900deg);opacity:0}}

/* ══ STORY PROBLEMS ══ */
.story-box{background:#FFF8EE;border-left:5px solid #FFD93D;border-radius:14px;
  padding:14px 16px;margin-bottom:10px;text-align:left;
  font-size:clamp(.88rem,3.5vw,1.05rem);line-height:1.7;color:#2C3E50;font-weight:700}
.story-box p{margin:0}
.story-q{font-family:'Baloo 2',cursive;font-size:clamp(1.1rem,4.5vw,1.45rem);
  color:#E67E22;text-align:center;margin-top:8px;line-height:1.3}
.q-area.story-mode{min-height:unset}
.speak-btn{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FF9F43,#E67E22);
  border:none;border-radius:30px;padding:10px 20px;
  font-family:'Baloo 2',cursive;font-size:1.05rem;color:#fff;
  cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.22);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,box-shadow .12s;margin:0 auto 10px;
}
.speak-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.22)}
.speak-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.speak-btn.speaking{background:linear-gradient(135deg,#27AE60,#1e8449);animation:speakPulse 0.6s ease-in-out infinite}
@keyframes speakPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.speak-icon{font-size:1.4rem}
.no-tts{display:none;font-size:.75rem;color:#bbb;text-align:center;margin-bottom:6px}

/* ══ TOUCH & MOBILE OPTIMIZATIONS ══ */
/* Remove tap delay on all interactive elements */
button,a,[onclick]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
}
/* Minimum touch target 48px for all buttons */
.abtn{min-height:52px;min-width:52px}
.cbtn{min-height:56px}
.sbtn{min-height:80px}
.rbtn{min-height:50px}
.lv-card{min-height:96px}
.back-btn{min-height:40px;min-width:80px}
/* Prevent text selection during rapid tapping */
.card{-webkit-user-select:none;user-select:none}

/* ══ TABLET (landscape & portrait, 600-900px) ══ */
@media(min-width:600px){
  body{padding:20px}
  .card{padding:32px 28px}
  .abtn{width:80px;height:80px;font-size:2.3rem}
  .lv-card{min-height:110px;padding:16px 12px 12px}
  .lvc-emoji{font-size:2.3rem}
  .lvc-name{font-size:.9rem}
  .cbtn{padding:18px 12px;font-size:1.9rem;min-height:64px}
  .q-area{min-height:150px}
  .sbtn{padding:32px 18px;font-size:1.6rem}
  .sbtn .se{font-size:3.2rem}
  .score-box{font-size:1.15rem}
}

/* ══ LARGE TABLET / iPad (900px+) ══ */
@media(min-width:900px){
  #app{max-width:600px}
  .card{padding:36px 32px}
  .abtn{width:86px;height:86px;font-size:2.5rem}
  .cbtn{font-size:2rem;min-height:70px}
  .q-math{font-size:3rem}
}

/* ══ SMALL PHONE (< 380px) ══ */
@media(max-width:380px){
  body{padding:8px}
  .card{padding:18px 12px;border-radius:20px}
  .abtn{width:56px;height:56px;font-size:1.65rem}
  .wtitle{font-size:1.8rem}
  .age-grid{gap:6px}
  .cgrid{gap:8px}
  .cbtn{padding:13px 6px;font-size:1.25rem}
  .lv-grid{gap:8px}
  .lvc-emoji{font-size:1.7rem}
  .lvc-name{font-size:.72rem}
  .word-row{font-size:1.5rem;letter-spacing:3px}
  .res-btns{flex-direction:column}
  .rbtn{min-height:48px}
}

/* ══ WORD DISPLAY overflow fix for long words ══ */
.word-row{overflow:hidden;max-width:100%;justify-content:center}
.wl{font-size:clamp(1.1rem,5.5vw,2.5rem);letter-spacing:clamp(2px,1.5vw,6px)}

/* ══ Safe area for notch phones (iPhone X+) ══ */
body{padding-bottom:max(12px,env(safe-area-inset-bottom));
     padding-left:max(12px,env(safe-area-inset-left));
     padding-right:max(12px,env(safe-area-inset-right))}

/* ══ Scrollbar hidden on mobile but functional ══ */
.map-scroll{-webkit-overflow-scrolling:touch}
.map-scroll::-webkit-scrollbar{width:5px}
.map-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}
/* Desktop: constrain card height so map scrolls */
@media(min-width:600px){
  body{align-items:center}
  .card{max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden}
  .card>.map-scroll{flex:1;max-height:none}
  #screen-game .card,#screen-result .card,#screen-welcome .card,#screen-subject .card{overflow:visible}
}
/* Global back button */
#g-back{
  position:fixed;top:14px;left:14px;z-index:200;
  background:rgba(255,255,255,.92);border:none;border-radius:50px;
  padding:8px 16px 8px 10px;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:.95rem;color:#555;
  box-shadow:0 2px 12px rgba(0,0,0,.2);display:none;
  align-items:center;gap:6px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s,transform .2s;
}
#g-back:hover{transform:scale(1.05)}
#g-back.visible{display:flex}
/* Resume banner */
.resume-bar{background:linear-gradient(135deg,#4ECDC4,#27AE60);color:#fff;
  border-radius:12px;padding:10px 14px;margin-bottom:12px;
  font-family:'Baloo 2',cursive;font-size:.95rem;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.resume-bar button{background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.6);
  border-radius:8px;padding:5px 12px;cursor:pointer;
  font-family:'Baloo 2',cursive;font-size:.85rem;color:#fff;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.resume-bar button:hover{background:rgba(255,255,255,.4)}


/* ══ MEMORY GAME ══ */
.sbtn.memory{background:linear-gradient(145deg,#8b5cf6,#6d28d9);grid-column:1/-1}
.mem-board{
  display:grid;gap:8px;
  width:100%;margin:0 auto;
}
.mem-card{
  aspect-ratio:1;cursor:pointer;
  perspective:600px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mem-card-inner{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  border-radius:14px;
}
.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner{transform:rotateY(180deg)}
.mem-card-front,.mem-card-back{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.mem-card-front{
  background:linear-gradient(135deg,#4c1d95,#6d28d9);
  font-size:1.6rem;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.mem-emoji-back{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  font-size:clamp(1.4rem,6vw,2.2rem);
  transform:rotateY(180deg);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.mem-word-back{
  background:linear-gradient(135deg,#0d9488,#0f766e);
  font-family:'Baloo 2',cursive;
  font-size:clamp(.65rem,3vw,1.1rem);
  color:#fff;letter-spacing:1px;
  transform:rotateY(180deg);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  text-align:center;padding:4px;
}
.mem-card.matched .mem-card-front,
.mem-card.matched .mem-emoji-back,
.mem-card.matched .mem-word-back{
  background:linear-gradient(135deg,#15803d,#166534)!important;
  box-shadow:0 0 12px rgba(34,197,94,.5);
}
@keyframes memPop{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes memShake{0%,100%{transform:rotateY(0) translateX(0)}25%{transform:rotateY(0) translateX(-6px)}75%{transform:rotateY(0) translateX(6px)}}
.mem-img-back{
  background:linear-gradient(135deg,#f97316,#ea580c);
  font-size:clamp(1.4rem,6vw,2.2rem);
  transform:rotateY(180deg);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.mem-card.matched .mem-img-back{
  background:linear-gradient(135deg,#15803d,#166534)!important;
  box-shadow:0 0 12px rgba(34,197,94,.5);
}

/* Memtype screen — oba przyciski równe, pełna szerokość */
#screen-memtype .sbtn-row { grid-template-columns: 1fr; }
#screen-memtype .sbtn { grid-column: auto; height: 120px; }

/* ══ TAXI GAME — pełny ekran ══ */
#screen-taxi-game{min-height:unset!important}
#screen-taxi-game.active{
  display:flex!important;flex-direction:column;
  height:100vh;height:100dvh;
  padding:0!important;
  position:relative;
}
#screen-taxi-game .card{display:none}
#taxi-map{
  width:100%;flex:1;min-height:0;
  position:relative;z-index:1;
}
#taxi-hud{
  position:absolute;top:0;left:0;right:0;z-index:10;
  background:linear-gradient(180deg,rgba(10,5,40,.95) 0%,rgba(10,5,40,.5) 85%,transparent 100%);
  padding:10px 14px 22px;pointer-events:none;
}
#taxi-hud *{pointer-events:auto}
#taxi-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  background:linear-gradient(0deg,rgba(10,5,40,.95) 0%,rgba(10,5,40,.5) 85%,transparent 100%);
  padding:20px 14px 12px;display:flex;gap:8px;
}
#taxi-popup{
  position:absolute;bottom:60px;left:10px;right:10px;
  z-index:20;
  background:linear-gradient(135deg,rgba(15,12,41,.96),rgba(45,20,112,.96));
  border-radius:18px;padding:12px 14px 10px;
  border:2px solid rgba(139,92,246,.4);
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  display:none;
}