*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --felt:#1a5c35;
  --cw:clamp(62px,10.5vw,138px);
  --ch:calc(var(--cw)*1.454);
  --cr:clamp(5px,1.2vw,10px);
  --gap:clamp(3px,0.8vw,8px);
  --off-down:clamp(6px,1vw,10px);
  --off-up:clamp(24px,4vw,40px);
  --nav-h:52px;
  --gold:#f0c040;
  --sidebar-w:260px;
}
html,body{height:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--felt) !important;background-color:var(--felt) !important;}

/* ===== PAGE WRAPPER ===== */
#page-wrapper{
  display:flex;
  flex-direction:row;
  min-height:100vh;
  padding-top:var(--nav-h);
}

/* ===== SIDEBAR — vain desktop ===== */
#seo-sidebar{
  display:none;
  width:var(--sidebar-w);
  flex-shrink:0;
  padding:12px 8px 16px 12px;
  height:calc(100vh - var(--nav-h));
  overflow-y:auto;
  position:sticky;
  top:var(--nav-h);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
#seo-sidebar::-webkit-scrollbar{width:4px;}
#seo-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px;}
@media(min-width:900px){
  #seo-sidebar{display:block;}
}

/* ===== PELILAUTA ===== */
#game{
  flex:1;
  min-width:0;
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px var(--gap) var(--gap);
  user-select:none;
  -webkit-user-select:none;
  position:relative;
  z-index:1;
  overflow:hidden;
  /* Pelipöydän gradient — tummempi kuin flat-vihreä */
  background:
    radial-gradient(ellipse at 50% 25%, rgba(35,120,60,.45) 0%, transparent 55%),
    linear-gradient(180deg, #166035 0%, #0e3d20 40%, #0a2a15 100%);
}
/* Vignette — tummat reunat */
#game::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.35) 100%);}
/* Huopa-tekstuuri */
#game::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size:200px;opacity:.8;}
/* Sisäinen wrapper joka rajoittaa leveyden ja on keskitetty */
#game-inner{
  width:100%;
  max-width:1060px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ===== STATS ===== */
#statsbar{display:flex;justify-content:center;gap:clamp(8px,3vw,24px);padding:6px 4px 10px;flex-shrink:0;}
.stat-item{display:flex;flex-direction:column;align-items:center;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:5px 14px;min-width:66px;}
.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.4);font-weight:600;}
.stat-value{font-size:clamp(16px,3vw,20px);font-weight:700;color:#fff;line-height:1.3;font-variant-numeric:tabular-nums;}
.stat-value.gold{color:var(--gold);text-shadow:0 0 16px rgba(240,192,64,.25);}

/* ===== RIVIT ===== */
/* Grid-layout: 7 yhtä leveää saraketta jotta stock (col 1), waste (col 2), foundations (cols 4-7) ja tableau (cols 1-7) linjautuvat.
   KRIITTINEN: molemmilla riveillä on TÄSMÄLLEEN sama width, margin ja grid-template jotta sarakkeet asettuvat pystysuunnassa. */
#top-row,
#tableau-row{
  display:grid;
  grid-template-columns:repeat(7,var(--cw));
  gap:var(--gap);
  justify-content:center;
  width:calc(7 * var(--cw) + 6 * var(--gap));
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
#top-row{
  margin-bottom:var(--gap);
  flex-shrink:0;
}
#tableau-row{
  align-items:flex-start;
  flex:1;
}
#stock-zone{grid-column:1;}
#waste-zone{grid-column:2;overflow:visible;}
/* Foundation-zonet ovat top-row:n 3.-6. lapset (stock=1, waste=2, fnd=3,4,5,6) */
#top-row > .fnd-zone:nth-child(3){grid-column:4;}
#top-row > .fnd-zone:nth-child(4){grid-column:5;}
#top-row > .fnd-zone:nth-child(5){grid-column:6;}
#top-row > .fnd-zone:nth-child(6){grid-column:7;}
.zone{position:relative;width:var(--cw);height:var(--ch);flex-shrink:0;}
.tab-zone{height:auto; min-height:var(--ch);}

/* ===== PLACEHOLDER ===== */
.ph{width:var(--cw);height:var(--ch);border-radius:var(--cr);
  border:2px dashed rgba(255,255,255,0.12);background:rgba(0,0,0,0.12);position:relative;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15);}
.ph-suit::after{content:attr(data-s);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:clamp(20px,5vw,34px);color:rgba(255,255,255,0.15);pointer-events:none;}
.ph-stock::after{content:'↻';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:clamp(20px,5vw,30px);color:rgba(255,255,255,0.2);pointer-events:none;}

/* ===== KORTIT ===== */
.card{position:absolute;width:var(--cw);height:var(--ch);border-radius:var(--cr);
  box-shadow:0 1px 2px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.1);
  will-change:transform;}
.card-back{background:linear-gradient(145deg,#1d3f73,#15305a);border:1.5px solid #3a68a8;position:absolute;
  transition:transform .2s ease,opacity .2s ease;overflow:hidden;}
.card-back::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.03) 4px,rgba(255,255,255,.03) 5px),
             repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(255,255,255,.03) 4px,rgba(255,255,255,.03) 5px);}
.card-face{background:linear-gradient(145deg,#ffffff,#f8f8f5);border:1.5px solid rgba(0,0,0,.1);
  cursor:pointer;overflow:hidden;position:absolute;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,opacity .2s ease;}
.card-face > img{width:100%;height:100%;display:block;pointer-events:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;}
.card-face:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.15),0 14px 36px rgba(0,0,0,.1);}
.card.selected{
  box-shadow:0 0 0 3px #f0c040,0 0 20px rgba(240,192,64,.35),0 8px 24px rgba(0,0,0,.2) !important;
  transform:translateY(-6px);}
.card.selected::before{content:'';position:absolute;inset:-4px;border-radius:calc(var(--cr) + 2px);
  background:radial-gradient(circle,rgba(240,192,64,.15),transparent 70%);
  pointer-events:none;animation:selectPulse 1.5s ease-in-out infinite;z-index:-1;}
@keyframes selectPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}

/* ===== DRAG GHOST ===== */
#drag-ghost{position:fixed;z-index:9999;pointer-events:none;display:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));}
#drag-ghost .card{position:relative;}

/* ===== VOITTO ===== */
#win-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;
  align-items:center;justify-content:center;}
#win-overlay.show{display:flex;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
#win-card{background:linear-gradient(145deg,#1a5c35,#124027);border:1px solid rgba(240,192,64,.4);
  border-radius:20px;padding:32px 48px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6);
  max-width:340px;width:90%;}
#win-card h1{color:var(--gold);font-family:'Righteous','Inter',sans-serif;font-size:clamp(26px,7vw,40px);margin-bottom:16px;}
#win-stats{display:flex;gap:12px;justify-content:center;margin-bottom:20px;}
.win-stat{background:rgba(0,0,0,.3);border-radius:10px;padding:8px 14px;color:#fff;font-size:13px;}
.win-stat span{display:block;color:var(--gold);font-size:18px;font-weight:700;}
#win-newgame{background:var(--gold);color:#111;border:none;padding:12px 32px;border-radius:24px;
  font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
#win-newgame:hover{background:#f5ce50;}

/* ===== KORTINSELKÄ DIALOG ===== */
#cb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10001;
  align-items:center;justify-content:center;touch-action:auto;}
#cb-overlay.show{display:flex;}
#cb-dialog{background:linear-gradient(145deg,#1a5c35,#124027);border:1px solid rgba(255,255,255,.15);
  border-radius:16px;padding:20px;max-width:480px;width:94%;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.7);touch-action:auto;}
#cb-dialog h2{color:#fff;font-family:'Righteous','Inter',sans-serif;font-size:18px;text-align:center;margin-bottom:14px;}
#cb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px;}
#cb-grid > div{display:flex;flex-direction:column;align-items:center;}
.cb-opt{cursor:pointer;border-radius:6px;overflow:hidden;border:2px solid transparent;
  width:100%;aspect-ratio:88/128;position:relative;transition:border-color .15s,transform .1s;display:block;}
.cb-opt:hover{transform:scale(1.04);}
.cb-opt.active{border-color:#f0c040;}
.cb-opt svg{width:100%;height:100%;display:block;position:absolute;inset:0;}
.cb-opt img{width:100%;height:100%;display:block;object-fit:cover;}
.cb-lbl{font-size:9px;text-align:center;color:rgba(255,255,255,.6);margin-top:3px;}
#cb-close{display:block;width:100%;background:var(--gold);color:#111;border:none;
  padding:10px;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer;}
#cb-close:hover{background:#f5ce50;}

/* ===== SIDEBAR KORTIT ===== */
.sidebar-card{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:14px 16px;margin-bottom:12px;
  color:rgba(255,255,255,.9);font-family:'Inter',sans-serif;font-size:13px;line-height:1.6;}
.sidebar-card h2{font-family:'Righteous','Inter',sans-serif;font-size:15px;color:#f0c040;
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-card h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.5);margin:12px 0 6px;font-weight:600;}
.sidebar-card p{margin:0 0 8px;color:rgba(255,255,255,.75);font-size:12.5px;}
.sidebar-card ul{margin:0 0 8px;padding-left:16px;color:rgba(255,255,255,.75);}
.sidebar-card li{margin-bottom:4px;font-size:12.5px;}
.sidebar-card strong{color:rgba(255,255,255,.95);}
.sidebar-score-table{width:100%;border-collapse:collapse;font-size:12px;margin:4px 0;}
.sidebar-score-table td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.07);}
.sidebar-score-table td:last-child{text-align:right;font-weight:700;}
.sidebar-score-table .plus{color:#4caf50;}
.sidebar-score-table .minus{color:#ef5350;}
.sidebar-faq-item{border-bottom:1px solid rgba(255,255,255,.08);padding:6px 0;}
.sidebar-faq-q{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.sidebar-faq-q::after{content:'▾';color:rgba(255,255,255,.4);transition:transform .2s;flex-shrink:0;}
.sidebar-faq-q.open::after{transform:rotate(180deg);}
.sidebar-faq-a{font-size:12px;color:rgba(255,255,255,.65);max-height:0;overflow:hidden;
  transition:max-height .25s ease;padding-top:0;}
.sidebar-faq-a.open{max-height:200px;padding-top:4px;}

/* Sidebar tilastot */
.stat-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:rgba(255,255,255,.75);}
.stat-row strong{color:#fff;}

/* ===== SEO-SISÄLTÖ ACCORDION ===== */
#seo-mobile{
  display:none;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;
}
@media(max-width:899px){
  #seo-mobile{display:block;}
}
.seo-accordion-wrap{
  max-width:860px;
  margin:0 auto;
  padding:8px 12px 32px;
}
.seo-acc{
  border-bottom:1px solid rgba(255,255,255,.1);
}
.seo-acc summary{
  list-style:none;
  cursor:pointer;
  padding:14px 4px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  -webkit-user-select:none;
}
.seo-acc summary::-webkit-details-marker{display:none;}
.seo-acc summary::after{
  content:'▾';
  margin-left:auto;
  color:rgba(255,255,255,.4);
  font-size:14px;
  transition:transform .2s;
}
.seo-acc[open] summary::after{transform:rotate(180deg);}
.seo-acc-body{
  padding:0 4px 16px;
  color:rgba(255,255,255,.75);
  font-size:13.5px;
  line-height:1.7;
}
.seo-acc-body h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.45);margin:12px 0 6px;font-weight:600;
}
.seo-acc-body p{margin-bottom:10px;}
.seo-acc-body ul{padding-left:18px;margin-bottom:8px;}
.seo-acc-body li{margin-bottom:4px;}
.seo-acc-body strong{color:rgba(255,255,255,.95);}

/* ===== MOBIILI ===== */
@media(max-width:600px){
  :root{
    --cw:calc((100vw - 48px) / 7);
    --gap:clamp(2px,0.5vw,4px);
    --off-down:6px;
    --off-up:18px;
  }
  #game{padding:0 4px 4px;max-width:100vw;}
  /* #top-row ja #tableau-row peritt\xc3\xa4v\xc3\xa4t yhteisen gridin \xe2\x80\x94 ei override-tarvetta t\xc3\xa4\xc3\xa4ll\xc3\xa4. */
  .zone{width:var(--cw);}
  #statsbar{gap:8px;padding:2px 4px 6px;}
  .stat-item{padding:3px 8px;min-width:50px;}
  .stat-label{font-size:9px;}
  .stat-value{font-size:16px;}
  .nav-btn-icon{padding:8px 10px;font-size:18px;}
  #cb-close{padding:14px;font-size:16px;}

  /* Nav ja game-alue mobiilissa */
  :root{--nav-h:40px;}
  #game{height:calc(100vh - var(--nav-h) - 52px);} /* 52px = alapalkki + padding */
  #game-inner{height:100%;}

  /* Mobiilissa ei hover-efektiä korteille */
  .card-face:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.1);}
  .card-face,.card-back{transition:none !important;}

  /* === FREECELL MOBIILI === */
  .freecell-page :root,
  .freecell-page{
    --cw:calc((100vw - 24px) / 8);
    --gap:2px;
  }
  .freecell-page #game{padding:0 2px 4px;}
  .freecell-page #game-inner{max-width:100vw !important;}
  #fc-top-row{
    gap:2px !important;
    margin-bottom:6px;
  }
  #fc-tableau{
    gap:2px !important;
  }

  /* === NAV MOBIILI === */
  #game-nav{padding:0 6px;gap:3px;}
  .nav-btn{padding:5px 8px;font-size:11px;gap:3px;}
  .nav-btn-primary{padding:5px 10px;}
  .nav-btn-turn{padding:5px 8px;font-size:10px;}
  .nav-btn-daily{padding:5px 8px;font-size:11px;}
  .nav-btn-icon{padding:6px 7px;font-size:16px;}
  .nav-brand{font-size:12px;margin-right:2px;}
}

/* Extra small phones */
@media(max-width:380px){
  :root{
    --cw:calc((100vw - 36px) / 7);
  }
  .freecell-page{
    --cw:calc((100vw - 18px) / 8);
  }
  .nav-btn{padding:4px 6px;font-size:10px;}
  .nav-btn-daily{display:none !important;} /* piilota päivän haaste extralle pienillä */
  .stat-item{min-width:42px;padding:2px 5px;}
  .stat-value{font-size:14px;}
}
/* Tabletti — estä liian isot kortit ennen sidebaria */
@media(min-width:601px) and (max-width:1099px){
  :root{
    --cw:clamp(62px,10vw,110px);
  }
  #game-inner{max-width:900px;}
}

/* Mobiili: kiinteä ohjeet-palkki ruudun alareunassa */
#mobile-ohjeet-bar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:500;
  background:rgba(18,64,39,.97);
  border-top:1px solid rgba(255,255,255,.15);
  padding:10px 16px;
  text-align:center;
  cursor:pointer;
  color:rgba(255,255,255,.8);
  font-size:13px;
  font-family:'Inter',sans-serif;
  font-weight:500;
}
#mobile-ohjeet-bar span{color:#f0c040;margin-right:6px;}
/* Sulje-ohjeet -nappi — maltillinen, alareunassa */
#seo-back-to-game{
  display:none;
  background:rgba(18,64,39,.96);
  border-top:1px solid rgba(240,192,64,.25);
  padding:6px 10px 8px;
  text-align:center;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1100;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 -4px 12px rgba(0,0,0,.25);
}
#seo-back-to-game .back-btn{
  display:inline-block;
  padding:7px 18px;
  background:rgba(240,192,64,.15);
  color:#f0c040;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid rgba(240,192,64,.4);
  border-radius:8px;
  transition:background .15s ease, transform .15s ease;
}
#seo-back-to-game .back-btn::before{content:'▲  Palaa peliin ja vaihda valikkonäkymä';}
#seo-back-to-game:active .back-btn{
  transform:scale(.97);
  background:rgba(240,192,64,.25);
}
/* Ohjeet-tilassa: nappi näkyy ja sisältöön jää tilaa */
body.ohjeet-open #seo-back-to-game{display:block !important;}
body.ohjeet-open #seo-mobile{padding-bottom:56px;}
/* #mobile-ohjeet-bar on vanhentunut — "📖 Ohjeet" -toiminto on nyt mobiili-alapalkissa (#mobile-bottom-bar) */
#mobile-ohjeet-bar{display:none !important;}

/* ===== TILASTOPALKKI ===== */
#stats-display{
  display:flex;
  justify-content:center;
  gap:clamp(8px,2vw,20px);
  padding:0 4px 6px;
  flex-shrink:0;
  flex-wrap:wrap;
}
#stats-display span{
  font-size:11px;
  color:rgba(255,255,255,.5);
  font-family:'Inter',sans-serif;
  cursor:default;
  white-space:nowrap;
}
#stats-display span:hover{color:rgba(255,255,255,.8);}

/* ===== LEADERBOARD SIDEBAR ===== */
.lb-loading,.lb-empty{
  text-align:center;color:rgba(255,255,255,.4);
  font-size:12px;padding:12px 0;
}
.lb-row{
  display:flex;align-items:center;gap:6px;
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:12px;
}
.lb-row:last-child{border-bottom:none;}
.lb-row.lb-top .lb-nick{color:#f0c040;font-weight:700;}
.lb-rank{width:20px;flex-shrink:0;text-align:center;font-size:13px;}
.lb-nick{flex:1;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-score{font-weight:700;color:#f0c040;flex-shrink:0;}
.lb-detail{color:rgba(255,255,255,.35);font-size:10px;flex-shrink:0;}
.lb-refresh-btn{
  display:block;width:100%;margin-top:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);padding:5px;border-radius:8px;
  font-size:11px;cursor:pointer;font-family:'Inter',sans-serif;
}
.lb-refresh-btn:hover{background:rgba(255,255,255,.14);}
.lb-actions{display:flex;gap:4px;margin-top:8px;}
.lb-actions .lb-refresh-btn{flex:1;margin-top:0;}

/* Aikafiltteri-napit */
.lb-filters{display:flex;gap:3px;margin-bottom:8px;}
.lb-filter-btn,.lb-popup-filter-btn{
  flex:1;padding:4px 2px;border-radius:6px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);font-size:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;
  transition:all .15s;
}
.lb-filter-btn:hover,.lb-popup-filter-btn:hover{background:rgba(255,255,255,.12);}
.lb-filter-btn.active,.lb-popup-filter-btn.active{
  background:rgba(240,192,64,.15);border-color:rgba(240,192,64,.4);
  color:#f0c040;font-weight:700;
}

/* Tulostaulukko popup overlay */
#lb-popup-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.85);z-index:10003;
  align-items:center;justify-content:center;
}
#lb-popup-overlay.show{display:flex;}
#lb-popup-card{
  background:linear-gradient(145deg,#1a5c35,#0f2d1b);
  border:1px solid rgba(240,192,64,.3);
  border-radius:20px;padding:24px;
  max-width:500px;width:94%;
  height:min(85vh, 640px);
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.lb-popup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.lb-popup-header h2{color:#f0c040;font-size:18px;font-family:'Righteous','Inter',sans-serif;margin:0;}
.lb-popup-close{
  background:none;border:none;color:rgba(255,255,255,.5);
  font-size:20px;cursor:pointer;padding:4px 8px;
}
.lb-popup-close:hover{color:#fff;}
.lb-popup-filters{margin-bottom:8px;}
.lb-popup-filters .lb-popup-filter-btn{font-size:12px;padding:6px 4px;}
#lb-popup-list{
  flex:1;overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
/* Popup leaderboard rivit */
#lb-popup-list .lb-row{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
#lb-popup-list .lb-row:last-child{border-bottom:none;}
#lb-popup-list .lb-medal{font-size:16px;flex-shrink:0;width:26px;text-align:center;padding-top:1px;}
#lb-popup-list .lb-pos{color:rgba(255,255,255,.4);font-size:13px;font-weight:600;}
#lb-popup-list .lb-info{flex:1;min-width:0;}
#lb-popup-list .lb-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
#lb-popup-list .lb-name{color:rgba(255,255,255,.9);font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
#lb-popup-list .lb-score{color:#f0c040;font-size:15px;font-weight:700;
  font-family:'Righteous','Inter',sans-serif;flex-shrink:0;min-width:50px;text-align:right;}
#lb-popup-list .lb-detail{display:flex;gap:10px;margin-top:3px;font-size:11.5px;
  color:rgba(255,255,255,.45);}
#lb-popup-list .lb-empty,
#lb-popup-list .lb-loading{
  display:flex;align-items:center;justify-content:center;
  height:100%;color:rgba(255,255,255,.35);font-size:14px;
}

/* ===== NIMIMERKKI PROMPT ===== */
#lb-prompt-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);z-index:10002;
  align-items:center;justify-content:center;
  
}
#lb-prompt-overlay.show{display:flex;}
#lb-prompt-card{
  background:linear-gradient(145deg,#1a5c35,#124027);
  border:1px solid rgba(240,192,64,.4);
  border-radius:20px;padding:28px 32px;
  text-align:center;max-width:320px;width:90%;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
#lb-prompt-card h2{color:#f0c040;font-family:'Righteous','Inter',sans-serif;font-size:22px;margin-bottom:8px;}
#lb-prompt-card p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:16px;}
#lb-nickname-input{
  width:100%;padding:10px 14px;border-radius:10px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:16px;font-family:'Inter',sans-serif;
  text-align:center;margin-bottom:14px;outline:none;
}
#lb-nickname-input:focus{border-color:#f0c040;}
.lb-prompt-btns{display:flex;gap:8px;}
#lb-submit-btn{
  flex:1;background:#f0c040;color:#111;border:none;
  padding:10px;border-radius:20px;font-size:14px;
  font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
}
#lb-submit-btn:hover{background:#f5ce50;}
#lb-skip-btn{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.15);padding:10px 16px;
  border-radius:20px;font-size:13px;cursor:pointer;
  font-family:'Inter',sans-serif;
}
#lb-skip-btn:hover{background:rgba(255,255,255,.18);}

/* ===== OMAT TILASTOT + LEADERBOARD RAKENNE ===== */
.lb-own-stats{
  background:rgba(255,255,255,.06);
  border-radius:8px;
  padding:10px;
  margin-bottom:10px;
}
.lb-own-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.45);margin-bottom:8px;font-weight:600;
}
.lb-own-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
}
.lb-own-item{text-align:center;}
.lb-own-val{
  font-size:14px;font-weight:700;color:#f0c040;line-height:1.2;
}
.lb-own-lbl{
  font-size:9px;color:rgba(255,255,255,.4);margin-top:2px;
}
.lb-section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.45);margin:8px 0 6px;font-weight:600;
}
.lb-header{
  display:flex;align-items:center;gap:4px;
  padding:3px 0 4px;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:2px;
}
.lb-header span{
  font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.35);font-weight:600;
}
.lb-col-moves{width:32px;flex-shrink:0;text-align:right;font-size:11px;color:rgba(255,255,255,.5);}
.lb-col-time{width:36px;flex-shrink:0;text-align:right;font-size:11px;color:rgba(255,255,255,.5);}

/* ===== CARD ANIMATIONS ===== */

/* Kortin kääntö 3D flip */
@keyframes cardFlip{
  0%{transform:perspective(600px) rotateY(0deg);}
  50%{transform:perspective(600px) rotateY(90deg);}
  100%{transform:perspective(600px) rotateY(0deg);}
}
.anim-flip{animation:cardFlip .3s ease;}

/* Kortti perustukseen — nousee ja loistaa */
@keyframes cardCollect{
  0%{transform:scale(1);box-shadow:0 2px 8px rgba(0,0,0,.3);}
  40%{transform:scale(1.08);box-shadow:0 0 20px rgba(240,192,64,.6),0 8px 24px rgba(0,0,0,.3);}
  100%{transform:scale(1);box-shadow:0 2px 8px rgba(0,0,0,.3);}
}
.anim-collect{animation:cardCollect .35s ease;}

/* Virhe — ravistus */
@keyframes cardShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.anim-shake{animation:cardShake .3s ease;}

/* Kortin asetus paikoilleen — pieni pomppaus */
@keyframes cardBounce{
  0%{transform:translateY(-6px);}
  50%{transform:translateY(2px);}
  100%{transform:translateY(0);}
}
.anim-place{animation:cardBounce .2s ease;}

/* Valmis sarja (Spider) — liukuu pois + häviää */
@keyframes cardSweep{
  0%{transform:translateX(0) scale(1);opacity:1;}
  60%{transform:translateX(30px) scale(0.95);opacity:0.7;}
  100%{transform:translateX(80px) scale(0.8);opacity:0;}
}
.anim-sweep{animation:cardSweep .5s ease forwards;}

/* Voittoanimaatio — konfetti-efekti pelialueella */
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}
.confetti-piece{
  position:fixed;top:0;width:10px;height:10px;
  pointer-events:none;z-index:9998;border-radius:2px;
  animation:confettiFall 2.5s ease-in forwards;
}

/* Kortin nosto/valinta — pieni nousee */
.card-face.selected{
  transform:translateY(-4px);
  box-shadow:0 0 0 2.5px var(--gold),0 8px 20px rgba(0,0,0,.4) !important;
  transition:transform .15s ease,box-shadow .15s ease;
}

/* Automaattinen liike kohteeseen — sliding */
@keyframes cardSlideIn{
  from{opacity:0.7;transform:translate(var(--slide-x,0),var(--slide-y,-20px));}
  to{opacity:1;transform:translate(0,0);}
}
.anim-slide{animation:cardSlideIn .2s ease;}

/* Reduce motion -tuki */
@media(prefers-reduced-motion:reduce){
  .card-face,.card-back{transition:none !important;}
  .anim-flip,.anim-collect,.anim-shake,.anim-place,.anim-sweep,.anim-slide,.confetti-piece{animation:none !important;}
}

/* ===== DAILY CHALLENGE ===== */
body.daily-page{
  overflow:hidden;
}
body.daily-page #game{
  padding:0;
  overflow:hidden;
}
body.daily-page #game-inner{
  padding:8px var(--gap) var(--gap);
  flex:1;
  min-height:0;
}
#daily-hero{
  background:linear-gradient(90deg, rgba(240,192,64,.12), rgba(240,192,64,.04) 60%, rgba(240,192,64,.08));
  border-bottom:1px solid rgba(240,192,64,.15);
  padding:10px 16px;
  position:relative;
  z-index:5;
  flex-shrink:0;
  width:100%;
}
.daily-hero-inner{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.daily-hero-left{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:14px;
  flex-wrap:nowrap;
}
.daily-badge{
  display:inline-flex;align-items:center;
  height:26px;
  background:linear-gradient(135deg,#f0c040,#e6a800);
  color:#1a1a00;
  padding:0 12px;border-radius:20px;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  flex-shrink:0;
  white-space:nowrap;
  line-height:1;
}
.daily-title{
  font-family:'Righteous','Inter',sans-serif;
  font-size:16px;
  color:#f0c040;
  margin:0;
  line-height:26px;
  white-space:nowrap;
  flex-shrink:0;
}
.daily-subtitle{
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:26px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.daily-info-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 10px;
  height:20px;
  background:rgba(255,200,80,.12);
  border:1px solid rgba(255,200,80,.25);
  border-radius:10px;
  font-size:11px;
  color:#f0c88a;
  line-height:20px;
  font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
}
/* Piilota info mobiilissa & kapeilla näytöillä */
@media (max-width:900px){
  .daily-info-tag{display:none;}
}
.daily-hero-right{
  display:flex;align-items:center;gap:14px;
  flex-shrink:0;
  height:26px;
}
#daily-streak{
  background:rgba(255,80,0,.15);
  border:1px solid rgba(255,120,40,.3);
  color:#ff9050;
  padding:6px 12px;border-radius:8px;
  font-size:13px;
  display:inline-flex;align-items:center;gap:4px;
}
#daily-streak strong{color:#ffb070;font-size:15px;}
.daily-countdown-wrap{
  text-align:right;
}
.daily-countdown-wrap{
  display:flex;align-items:center;gap:8px;
  height:26px;
}
.daily-countdown-label{
  font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.4);
  font-weight:600;
  white-space:nowrap;
  line-height:26px;
}
.daily-countdown-val{
  font-family:'Righteous','Inter',sans-serif;
  font-size:13px;color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  line-height:26px;
}
.daily-myrank{
  background:rgba(240,192,64,.08);
  border:1px solid rgba(240,192,64,.2);
  border-radius:6px;
  padding:8px 10px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  margin-bottom:10px;
  text-align:center;
}
.daily-myrank strong{color:#f0c040;font-size:15px;}
.lb-mine{
  background:rgba(240,192,64,.12) !important;
  border-left:3px solid #f0c040;
}
.lb-sep{
  text-align:center;color:rgba(255,255,255,.3);
  padding:4px 0;font-size:12px;
}
#win-stats-grid{
  display:flex;gap:20px;justify-content:center;margin:18px 0 24px;
}
.ws-item{text-align:center;}
.ws-label{
  font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.4);
}
.ws-value{
  font-family:'Righteous','Inter',sans-serif;
  font-size:24px;color:rgba(255,255,255,.9);
  font-variant-numeric:tabular-nums;
}
.ws-value.gold{color:#f0c040;}
.win-actions{
  display:flex;flex-direction:column;gap:10px;
  align-items:center;
}
.win-actions button{
  min-width:180px;padding:10px 20px;
  border-radius:8px;font-weight:600;cursor:pointer;
  border:none;font-family:'Righteous','Inter',sans-serif;
}
.win-link{
  color:rgba(255,255,255,.5);font-size:12px;
  text-decoration:none;margin-top:4px;
}
.win-link:hover{color:#f0c040;}

@media(max-width:700px){
  #daily-hero{padding:8px 12px;}
  .daily-hero-inner{gap:8px;align-items:center;}
  .daily-hero-left{flex-wrap:wrap;gap:6px 10px;}
  .daily-title{
    font-size:13px;
    line-height:1.2;
    flex-basis:100%;
    order:2;
  }
  .daily-badge{order:1;}
  .daily-subtitle{
    display:none; /* Piilota mobiilissa \xe2\x80\x94 tila on rajallinen, countdown on t\xc3\xa4rke\xc3\xa4mpi */
  }
  .daily-countdown-val{font-size:12px;}
  .daily-countdown-label{font-size:9px;}
  .daily-hero-right{gap:8px;}
}
/* Tosi kapeille n\xc3\xa4yt\xc3\xb6ille piilota my\xc3\xb6s h1 */
@media(max-width:420px){
  .daily-title{display:none;}
  .daily-countdown-label{display:none;} /* n\xc3\xa4yt\xc3\xa4 vain aika */
}

/* Nav Daily-haaste -nappi */
.nav-btn-daily{
  background:linear-gradient(135deg,rgba(240,120,50,.2),rgba(240,80,30,.15)) !important;
  color:#ff9050 !important;
  border:1px solid rgba(255,140,60,.35) !important;
  font-weight:600 !important;
  text-decoration:none !important;
  display:inline-flex;align-items:center;gap:4px;
  transition:all .15s;
}
.nav-btn-daily:hover{
  background:linear-gradient(135deg,rgba(240,120,50,.3),rgba(240,80,30,.25)) !important;
  color:#ffb070 !important;
  transform:translateY(-1px);
}
.nav-btn-daily.active{
  background:linear-gradient(135deg,#ff9050,#f06030) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.nav-mobile-daily{
  color:#ff9050 !important;
  font-weight:700 !important;
}

/* Piilota mobiilissa nav-btn-daily text, näytä vain mobile-menun kautta */
@media(max-width:700px){
  .nav-btn-daily{display:none;}
}

/* Placeholder leaderboard rows */
.lb-empty-title{
  text-align:center;
  color:#f0c040;
  font-size:13px;
  font-weight:600;
  padding:10px 6px 14px;
  line-height:1.4;
}
.lb-row.lb-placeholder{
  opacity:.3;
  pointer-events:none;
}
.lb-row.lb-placeholder .lb-name,
.lb-row.lb-placeholder .lb-time{
  color:rgba(255,255,255,.3);
}

/* Haasta kaveri -boksi */
.sidebar-share-card{
  background:linear-gradient(135deg,rgba(76,175,80,.08),rgba(76,175,80,.03)) !important;
  border-color:rgba(120,200,120,.25) !important;
}
.sidebar-share-card h2{color:#8fd97f !important;}
.sidebar-share-card p{
  font-size:12.5px;
  color:rgba(255,255,255,.7);
  margin-bottom:10px;
}
/* Mobiilin haasta-kaveri -kortti — näkyy daily-sivun seo-mobilessa kärjessä */
.daily-share-mobile{
  background:linear-gradient(135deg,rgba(76,175,80,.12),rgba(76,175,80,.04));
  border:1px solid rgba(120,200,120,.3);
  border-radius:12px;
  padding:14px 14px 12px;
  margin-bottom:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.daily-share-mobile h2{
  color:#8fd97f;
  font-size:15px;
  font-weight:700;
  margin:0 0 6px;
  font-family:'Righteous','Inter',sans-serif;
}
.daily-share-mobile p{
  font-size:13px;
  color:rgba(255,255,255,.75);
  margin:0 0 10px;
  line-height:1.4;
}
.daily-share-mobile .share-btn-row{
  display:flex;
  flex-direction:row;
  gap:8px;
}
.daily-share-mobile .share-btn{
  flex:1;
  padding:10px 8px;
  font-size:13px;
}
.share-btn-row{
  display:flex;flex-direction:column;gap:6px;
}
.share-btn{
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Righteous','Inter',sans-serif;
}
.share-btn:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.share-whatsapp{
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  border-color:transparent;
}
.share-whatsapp:hover{
  background:linear-gradient(135deg,#128c7e,#0a6a5e);
  color:#fff;
}
.share-copy{
  background:rgba(240,192,64,.12);
  color:#f0c040;
  border-color:rgba(240,192,64,.3);
}
.share-copy:hover{
  background:rgba(240,192,64,.2);
  color:#f0c040;
}

/* Exit daily -linkki */
.sidebar-exit-card{
  background:transparent !important;
  border:none !important;
  text-align:center;
  padding:0 !important;
  margin-top:4px;
}
.exit-daily-link{
  display:block;
  color:#f0c040;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(240,192,64,.08);
  border:1px solid rgba(240,192,64,.25);
  transition:all .15s;
  box-sizing:border-box;
  font-family:'Righteous','Inter',sans-serif;
  line-height:1.2;
}
.exit-daily-link:hover{
  background:rgba(240,192,64,.15);
  color:#fff;
  border-color:rgba(240,192,64,.45);
  transform:translateY(-1px);
}
.exit-sub{
  font-size:11px;
  color:rgba(255,255,255,.4);
  margin:6px 0 0;
  line-height:1.3;
}

/* Turn 1/3 -nappi */
.nav-btn-turn{
  background:rgba(100,150,220,.15) !important;
  color:#6fa8dc !important;
  border:1px solid rgba(100,150,220,.3) !important;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.nav-btn-turn:hover{
  background:rgba(100,150,220,.25) !important;
  color:#9cc3e5 !important;
}

/* Turn 3 waste-kortit — alla olevat eivät pelattavissa mutta näyttävät normaalilta */
.waste-back{
  /* pointer-events:none asetetaan JS:ssä; ei visuaalista eroa ylimpään */
}

/* Auto-complete -nappi */
#autocomplete-btn{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:10px auto 0;
  padding:10px 20px;
  background:linear-gradient(135deg,#f0c040,#e6a800);
  color:#1a1a00;
  border:none;
  border-radius:8px;
  font-family:'Righteous','Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(240,192,64,.35),0 0 0 1px rgba(255,220,120,.3) inset;
  animation:autopulse 1.4s ease-in-out infinite;
  position:relative;
  z-index:10;
}
#autocomplete-btn:hover{
  background:linear-gradient(135deg,#ffd060,#f0b820);
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(240,192,64,.5),0 0 0 1px rgba(255,220,120,.4) inset;
}
@keyframes autopulse{
  0%,100%{box-shadow:0 4px 20px rgba(240,192,64,.35),0 0 0 1px rgba(255,220,120,.3) inset;}
  50%{box-shadow:0 4px 30px rgba(240,192,64,.6),0 0 0 1px rgba(255,220,120,.5) inset;}
}

/* Perinteinen-pasianssi -badget */
.lb-badge-hard{
  display:inline-block;
  background:linear-gradient(135deg,#ff7730,#e64a00);
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:2px 7px;
  border-radius:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
  margin-left:6px;
}
.sidebar-perinteinen-info{
  background:linear-gradient(135deg,rgba(255,120,60,.08),rgba(255,120,60,.03)) !important;
  border-color:rgba(255,150,80,.25) !important;
}
.sidebar-perinteinen-info h2{
  color:#ff9060 !important;
}

/* Leaderboard popup — peli-tabit */
.lb-game-tabs{display:none;} /* piilota vanhat jos jäänyt */
.lb-main-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid rgba(255,255,255,.1);
  margin-bottom:0;
}
.lb-main-tab{
  flex:1;
  padding:10px 6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.5);
  font-size:13px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
}
.lb-main-tab:hover{
  color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.03);
}
.lb-main-tab.active{
  color:#f0c040;
  border-bottom-color:#f0c040;
}
.lb-sub-tabs{
  display:none;
  gap:6px;
  padding:8px 0;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:0;
}
.lb-sub-tab{
  padding:5px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:500;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s;
}
.lb-sub-tab:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.8);
}
.lb-sub-tab.active{
  background:rgba(240,192,64,.15);
  border-color:rgba(240,192,64,.4);
  color:#f0c040;
  font-weight:600;
}
/* ===== PYRAMIDI ===== */
.pyramidi-page #game-inner{
  max-width:800px;
}
#pyramid-area{
  text-align:center;
  padding-top:8px;
  overflow:hidden;
}
/* Jokainen rivi on inline-block-korttien container, keskitetty */
.pyr-row{
  text-align:center;
  margin-top:calc(var(--pyr-ch) * -0.7);
  height:var(--pyr-ch);
  pointer-events:none;
  white-space:nowrap;
  font-size:0;
}
.pyr-row-first{
  margin-top:0;
}
/* Pyramidi-kohtaiset korttikoot — JS ylikirjoittaa --pyr-cw:n mobiilissa */
:root{
  --pyr-cw:clamp(38px,11vw,105px);
  --pyr-ch:calc(var(--pyr-cw)*1.4);
  --pyr-gap:clamp(1px,0.3vw,4px);
}
.pyr-cell{
  width:var(--pyr-cw);
  height:var(--pyr-ch);
  display:inline-block;
  margin:0 var(--pyr-gap);
  position:relative;
  vertical-align:top;
}
.pyr-cell .pyr-card{
  width:100%;
  height:100%;
  border-radius:var(--cr);
  position:relative;
  left:auto;
  top:auto;
}
.pyr-cell .pyr-card img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
.pyr-card *{
  pointer-events:none;
}
.pyr-empty{
  visibility:hidden;
}
/* Vapaat kortit: pointer-events puhkaisee rivin eston */
.pyr-free .pyr-card{
  pointer-events:all;
  cursor:pointer;
  transition:transform .12s ease-out;
}
.pyr-free:hover{
  z-index:1;
}
.pyr-free:hover .pyr-card{
  transform:scale(1.06);
}
/* Valittu kortti */
.pyr-selected .pyr-card{
  outline:3px solid #f0c040;
  outline-offset:-1px;
  box-shadow:0 0 20px rgba(240,192,64,.6);
  transform:scale(1.06);
  z-index:2;
}
/* Estetyt kortit — näkyvät normaalisti mutta eivät klikattavia */
.pyr-blocked .pyr-card{
  pointer-events:none;
}
/* Alarivi: stock, waste, discard */
#pyramid-bottom{
  display:flex;
  gap:var(--pyr-gap);
  justify-content:center;
  align-items:flex-start;
  padding:16px 0 8px;
  flex-shrink:0;
}
#pyramid-bottom .zone{
  width:var(--pyr-cw);
  height:var(--pyr-ch);
  position:relative;
  flex-shrink:0;
}
#pyramid-bottom .pyr-card{
  width:100%;height:100%;
  position:relative;
  left:auto;top:auto;
}
#pyramid-bottom .ph{
  width:100%;height:100%;
}
.pyramidi-page #discard-zone{
  margin-left:clamp(8px,4vw,40px);
}
.ph-discard::after{
  content:attr(data-s);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(16px,4vw,24px);color:rgba(255,255,255,0.15);pointer-events:none;
}
.discard-count{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;
}

/* ===== VAIKEUSASTE-POPUP ===== */
#diff-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.85);z-index:10005;
  align-items:center;justify-content:center;
}
#diff-overlay.show{display:flex;}
#diff-card{
  background:linear-gradient(145deg,#1a5c35,#0f2d1b);
  border:1px solid rgba(240,192,64,.3);
  border-radius:20px;padding:28px 24px;
  max-width:420px;width:94%;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  text-align:center;
  -webkit-font-smoothing:antialiased;
}
#diff-card h2{
  color:#f0c040;font-size:20px;
  font-family:'Righteous','Inter',sans-serif;
  margin:0 0 8px;
}
.diff-subtitle{
  color:rgba(255,255,255,.55);font-size:13px;margin-bottom:18px;
}
.diff-options{
  display:flex;flex-direction:column;gap:10px;
}
.diff-option{
  background:rgba(255,255,255,.04);
  border:2px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:14px 16px;
  cursor:pointer;
  transition:all .15s;
  text-align:left;
}
.diff-option:hover{
  background:rgba(240,192,64,.08);
  border-color:rgba(240,192,64,.35);
  transform:translateY(-2px);
}
.diff-option.active{
  background:rgba(240,192,64,.12);
  border-color:#f0c040;
  box-shadow:0 0 16px rgba(240,192,64,.2);
}
.diff-option-header{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.diff-emoji{font-size:18px;}
.diff-name{
  font-family:'Righteous','Inter',sans-serif;
  font-size:16px;color:#fff;font-weight:600;
}
.diff-desc{
  font-size:12.5px;color:rgba(255,255,255,.7);margin:0 0 6px;line-height:1.4;
}
.diff-stat{
  font-size:11px;color:rgba(255,255,255,.4);
}

/* ===== FREECELL ===== */
.freecell-page #game-inner{
  max-width:880px;
}
.freecell-page #game{
  overflow:hidden;
}
/* Top row: 8 slottia samassa gridissä kuin tableau */
#fc-top-row{
  display:grid;
  grid-template-columns:repeat(8, var(--cw));
  gap:var(--gap);
  justify-content:center;
  margin-bottom:12px;
}
#fc-cells, #fc-foundations{
  display:contents; /* items osallistuvat suoraan gridiin */
}
.fc-cell, .fc-fnd{
  width:var(--cw);
  height:var(--ch);
  position:relative;
}
.fc-cell .card, .fc-fnd .card{
  position:absolute;inset:0;
}
.fc-cell .ph-cell{
  width:100%;height:100%;
  border:2px dashed rgba(255,255,255,.2);
  border-radius:var(--cr);
  background:rgba(255,255,255,.04);
}
.fc-fnd .ph-fnd{
  width:100%;height:100%;
  border:2px dashed rgba(255,255,255,.15);
  border-radius:var(--cr);
  background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:rgba(255,255,255,.12);
}
.fc-fnd .ph-fnd::after{
  content:attr(data-s);
}
/* Tableau: sama 8-sarakkeen grid */
#fc-tableau{
  display:grid;
  grid-template-columns:repeat(8, var(--cw));
  gap:var(--gap);
  justify-content:center;
  align-items:start;
}
.fc-col{
  width:var(--cw);
  min-height:var(--ch);
  position:relative;
}
.fc-col .card{
  position:absolute;
  left:0;
  width:var(--cw);
  height:var(--ch);
}
.fc-col .ph-tab{
  width:100%;
  border:2px dashed rgba(255,255,255,.08);
  border-radius:var(--cr);
}

/* Selection highlight */
.fc-cell .card.selected,
.fc-col .card.selected{
  outline:3px solid #f0c040;
  outline-offset:-1px;
  box-shadow:0 0 20px rgba(240,192,64,.6);
  transform:translateY(-4px);
  z-index:100 !important;
}

/* FreeCell drag ghost */
.fc-drag-ghost .card{
  border-radius:var(--cr);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
/* Prevent text selection during drag */
.freecell-page #game{
  -webkit-user-select:none;
  user-select:none;
}