/* Ciepło czy zimno? — scoped to .game2 so it never leaks site-wide tokens */
.game2{
  --g2-paper:#E9F2FC;
  --g2-paper-2:#DCEAF9;
  --g2-ink:#1E293B;
  --g2-ink-soft:#64748B;
  --g2-warm-1:#FF6B35;
  --g2-warm-2:#B23A1E;
  --g2-warm-bg:#FFF1E2;
  --g2-warm-bg-2:#FFE1BE;
  --g2-cold-1:#2F9BD6;
  --g2-cold-2:#175E8A;
  --g2-cold-bg:#E7F5FC;
  --g2-cold-bg-2:#D2EBF8;
  --g2-surface:#FFFFFF;
  --g2-surface-2:#F2F7FF;
  --g2-line: rgba(30,41,59,0.11);
  --g2-shadow: rgba(30,64,120,0.16);
  --g2-brand:#3B5BDB;
  --g2-brand-dark:#2A46B8;
  --g2-good:#2FB768;
  --g2-alert:#E14545;
  color-scheme: light;

  display:block;
  border-radius:28px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--g2-paper), var(--g2-paper-2));
  color: var(--g2-ink);
  font-family:"Quicksand","Trebuchet MS",sans-serif;
  box-shadow:0 10px 30px var(--g2-shadow);
}

@media (prefers-color-scheme: dark){
  .game2:not([data-theme="light"]){
    --g2-paper:#101825;
    --g2-paper-2:#0C121C;
    --g2-ink:#EAF1FB;
    --g2-ink-soft:#93A5C2;
    --g2-warm-1:#FF8A54;
    --g2-warm-2:#FFB48A;
    --g2-warm-bg:#3A2416;
    --g2-warm-bg-2:#4A2E1B;
    --g2-cold-1:#5FC0EE;
    --g2-cold-2:#9BDCF7;
    --g2-cold-bg:#12303F;
    --g2-cold-bg-2:#163A4C;
    --g2-surface:#182437;
    --g2-surface-2:#1E2C42;
    --g2-line: rgba(255,255,255,0.13);
    --g2-shadow: rgba(0,0,0,0.5);
    --g2-brand:#7C97FF;
    --g2-brand-dark:#5B7FFF;
    --g2-good:#4FD98A;
    --g2-alert:#FF6B6B;
    color-scheme: dark;
  }
}
.game2[data-theme="dark"]{
  --g2-paper:#101825;
  --g2-paper-2:#0C121C;
  --g2-ink:#EAF1FB;
  --g2-ink-soft:#93A5C2;
  --g2-warm-1:#FF8A54;
  --g2-warm-2:#FFB48A;
  --g2-warm-bg:#3A2416;
  --g2-warm-bg-2:#4A2E1B;
  --g2-cold-1:#5FC0EE;
  --g2-cold-2:#9BDCF7;
  --g2-cold-bg:#12303F;
  --g2-cold-bg-2:#163A4C;
  --g2-surface:#182437;
  --g2-surface-2:#1E2C42;
  --g2-line: rgba(255,255,255,0.13);
  --g2-shadow: rgba(0,0,0,0.5);
  --g2-brand:#7C97FF;
  --g2-brand-dark:#5B7FFF;
  --g2-good:#4FD98A;
  --g2-alert:#FF6B6B;
  color-scheme: dark;
}

.game2, .game2 *{box-sizing:border-box;}
.game2 [hidden]{display:none!important;}
.game2 .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.game2 h1, .game2 h2, .game2 h3{font-family:"Baloo 2",sans-serif; margin:0; text-wrap:balance;}

/* ---------- layout scaffolding ---------- */
.game2 #screens{
  padding: clamp(18px,4vw,32px);
  display:flex;
}
.game2 .screen{
  width:100%;
  max-width:980px;
  margin:0 auto;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.game2 .screen.active{display:flex;}

/* ---------- start screen ---------- */
.game2 .eyebrow{
  font-family:"Quicksand",sans-serif; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.72rem; color:var(--g2-ink-soft);
  background:var(--g2-surface); border:1px solid var(--g2-line);
  padding:6px 14px; border-radius:999px;
}
.game2 .title-hero{
  font-size:clamp(2.1rem,6vw,3.2rem);
  text-align:center;
  background:linear-gradient(90deg,var(--g2-warm-2),var(--g2-warm-1) 42%, var(--g2-cold-1) 58%, var(--g2-cold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.game2 .lead{
  max-width:56ch; text-align:center; font-size:1.05rem; line-height:1.55; color:var(--g2-ink-soft);
}
.game2 .badge-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.game2 .badge{
  font-size:.85rem; font-weight:600; padding:7px 14px; border-radius:999px;
  background:var(--g2-surface); border:1px solid var(--g2-line); color:var(--g2-ink-soft);
}
.game2 .cta{
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.1rem;
  color:#fff; background:var(--g2-brand);
  border:none; border-radius:14px; padding:15px 32px; cursor:pointer;
  box-shadow:0 6px 18px var(--g2-shadow);
  transition:transform .12s ease, box-shadow .12s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.game2 .cta:hover{transform:translateY(-2px); box-shadow:0 9px 22px var(--g2-shadow);}
.game2 .cta:active{transform:translateY(0); box-shadow:0 4px 10px var(--g2-shadow);}
.game2 .cta.warm{background:linear-gradient(135deg,var(--g2-warm-1),var(--g2-warm-2));}
.game2 .cta.cold{background:linear-gradient(135deg,var(--g2-cold-1),var(--g2-cold-2));}
.game2 .cta.ghost{
  background:var(--g2-surface); color:var(--g2-ink); box-shadow:none; border:2px solid var(--g2-line);
}
.game2 .cta.ghost:hover{transform:translateY(-2px); box-shadow:0 4px 10px var(--g2-shadow);}
.game2 .cta .arrow{font-size:1rem;}

.game2 .level-picker{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px;
}
.game2 .chip{
  font-family:"Baloo 2",sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--g2-surface); border:1px solid var(--g2-line); border-top:4px solid var(--chip-color,var(--g2-brand));
  border-radius:16px;
  padding:12px 20px; cursor:pointer; color:var(--g2-ink); font-weight:700;
  min-width:118px;
  box-shadow:0 4px 14px var(--g2-shadow);
  transition:transform .12s ease;
}
.game2 .chip:hover{transform:translateY(-2px);}
.game2 .chip small{font-family:"Quicksand",sans-serif; font-weight:600; color:var(--g2-ink-soft); font-size:.72rem;}
.game2 .chip.done{border-top-color:var(--g2-good); color:var(--g2-good);}
.game2 .chip .dot{font-size:1.3rem;}

/* ---------- level intro ---------- */
.game2 .intro-num{
  font-family:"Baloo 2",sans-serif; font-size:5rem; font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--g2-warm-1),var(--g2-cold-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- play screen ---------- */
.game2 .play-topbar{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--g2-surface); border:1px solid var(--g2-line); border-radius:18px;
  padding:14px 18px;
  box-shadow:0 4px 16px var(--g2-shadow);
}
.game2 .topbar-status{ display:flex; align-items:center; gap:10px; }
.game2 .status-dot{
  width:12px;height:12px;border-radius:50%; background:var(--g2-brand); flex:none;
  box-shadow:0 0 0 4px var(--g2-line);
}
.game2 .eyebrow-inline{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g2-ink-soft);
}
.game2 .status-line{
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1rem; color:var(--g2-ink);
}
.game2 .topbar-progress{
  display:flex; align-items:center; gap:10px; flex:1; min-width:170px; max-width:300px;
}
.game2 .progress-pill{
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.82rem; color:var(--g2-ink);
  background:var(--g2-surface-2); border:1px solid var(--g2-line);
  padding:5px 12px; border-radius:999px; white-space:nowrap; flex:none;
}
.game2 .progress-bar{
  flex:1; height:10px; border-radius:999px; background:var(--g2-line); overflow:hidden;
}
.game2 .progress-bar-fill{
  height:100%; border-radius:999px; width:0%;
  background:linear-gradient(90deg,var(--g2-good),#63d98a);
  transition:width .35s ease;
}

.game2 .board-frame{
  width:100%; background:var(--g2-surface); border:1px solid var(--g2-line); border-radius:28px;
  padding:clamp(14px,3vw,24px); box-shadow:0 10px 30px var(--g2-shadow);
}
.game2 .play-grid{
  width:100%; display:grid;
  grid-template-columns: 1fr min(240px,32vw) 1fr;
  align-items:stretch;
  gap:16px;
}
@media (max-width:720px){
  .game2 .play-grid{grid-template-columns:1fr; }
  .game2 .zone{order:2;}
  .game2 .stage-col{order:1;}
  .game2 .zone.cold{order:3;}
}

.game2 .zone{
  border-radius:26px;
  position:relative;
  overflow:hidden;
  padding:16px 14px 14px;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  min-height:190px;
  border:3px solid transparent;
  background-size:cover; background-position:center;
  transition:transform .15s ease, border-color .15s ease;
}
.game2 .zone.warm{ background-color:var(--g2-warm-bg); }
.game2 .zone.cold{ background-color:var(--g2-cold-bg); }
.game2 .zone::before{
  content:""; position:absolute; inset:0; background-size:contain; background-position:center;
  background-repeat:no-repeat; opacity:.55; z-index:0;
}
.game2 .zone.warm::before{ background-image:var(--img-ramka-cieplo); }
.game2 .zone.cold::before{ background-image:var(--img-ramka-zimno); }
.game2 .zone > *{position:relative; z-index:1;}
.game2 .zone-label{
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:.02em;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.game2 .zone-sub{
  font-size:.72rem; font-weight:600; color:rgba(255,255,255,.92); margin-top:-8px;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.game2 .zone.zone--hover{ border-color:var(--g2-good); transform:scale(1.03); }
.game2 .zone-tray{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:44px;
}
.game2 .tray-chip{
  width:44px;height:44px;border-radius:12px; background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; padding:4px;
  animation:game2-pop .35s ease;
}
.game2 .tray-chip img{width:100%;height:100%;object-fit:contain;}
@keyframes game2-pop{ from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;} }

.game2 .stage-col{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
}
.game2 .stage-card{
  width:100%; max-width:230px; aspect-ratio:1/1;
  background:var(--g2-surface); border-radius:28px;
  border:1px solid var(--g2-line);
  box-shadow:0 10px 26px var(--g2-shadow);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  touch-action:none;
  cursor:grab;
}
.game2 .stage-card.dragging{cursor:grabbing; box-shadow:0 18px 34px var(--g2-shadow); z-index:20;}
.game2 .stage-card img{
  width:74%; height:74%; object-fit:contain;
  animation:game2-bob 3s ease-in-out infinite;
  pointer-events:none;
  user-select:none; -webkit-user-drag:none;
}
@media (prefers-reduced-motion:reduce){
  .game2 .stage-card img{animation:none;}
}
@keyframes game2-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.game2 .stage-card.shake{ animation:game2-shake .4s ease; }
@keyframes game2-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}
.game2 .speak-btn{
  position:absolute; right:-6px; bottom:-6px;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--g2-warm-1),var(--g2-cold-1));
  color:#fff; border:3px solid var(--g2-paper); font-size:1.1rem;
  display:flex;align-items:center;justify-content:center; cursor:pointer;
}
.game2 .hint{font-size:.82rem; color:var(--g2-ink-soft); text-align:center;}

.game2 .toast{
  min-height:30px; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.05rem;
  text-align:center; padding:6px 18px; border-radius:14px;
  transition:opacity .2s ease;
}
.game2 .toast.good{color:var(--g2-good);}
.game2 .toast.bad{color:var(--g2-alert);}
.game2 .toast:empty{opacity:0;}

/* ---------- level end / final ---------- */
.game2 .recap{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:640px;
}
.game2 .recap img{width:52px;height:52px;object-fit:contain; background:var(--g2-surface); border-radius:12px; padding:6px; border:1px solid var(--g2-line);}
.game2 .summary-card{
  background:var(--g2-surface); border:1px solid var(--g2-line); border-radius:24px;
  padding:30px clamp(20px,5vw,48px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  box-shadow:0 10px 26px var(--g2-shadow);
  max-width:560px;
}

.game2 #confetti-layer{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5;
}
.game2 .confetto{
  position:absolute; top:-20px; width:10px; height:14px; border-radius:2px;
  animation:game2-fall linear forwards;
}
@keyframes game2-fall{
  to{ transform:translateY(110vh) rotate(360deg); }
}
@media (prefers-reduced-motion:reduce){
  .game2 .confetto{display:none;}
}

.game2 .icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--g2-line);
  background:var(--g2-surface);
  color:var(--g2-ink);
  font-size:1.15rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px var(--g2-shadow);
  transition:transform .15s ease, background .15s ease;
  flex:none;
}
.game2 .icon-btn:hover{transform:translateY(-1px);}
.game2 .icon-btn:active{transform:translateY(0);}
.game2 .icon-btn:focus-visible,
.game2 button:focus-visible,
.game2 .chip:focus-visible{outline:3px solid var(--g2-brand); outline-offset:2px;}