/* Grafiker Dayı Games — Çekici 24 v4.3 responsive layout */
:root{--side-width:190px}
html{min-width:280px;width:100%;min-height:100%;scroll-padding-top:166px;-webkit-text-size-adjust:100%}
body{width:100%;min-width:280px;min-height:100svh;overflow-x:clip;overscroll-behavior-y:auto}
.app{width:100%;min-height:100svh;isolation:isolate}
#content,.app,.topbar,.card,.city-card,.rank,.objective,.modal-card{min-width:0}
#content .row>*,.card-head>*,.city-card .row>*,.rank>*{min-width:0}
#content .small-title,#content .desc,#content .card h3,#content .card h4{overflow-wrap:anywhere}
#content .row{flex-wrap:wrap}
#content .row .btn{max-width:100%}
#content .kpi strong{overflow-wrap:anywhere;white-space:normal}
.stat strong{font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.choice-row{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.choice-row .choice{flex-shrink:0;min-width:0}
.card-head{align-items:center}
.card-head .grow{min-width:0}
.card-head>.price,.card-head>.shop-price{max-width:41%;text-align:right;overflow-wrap:anywhere}
.city-gate{overflow:hidden}
.modal{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.modal-card{width:min(460px,100%);max-height:min(85dvh,800px);overscroll-behavior:contain}
.auth{overscroll-behavior-y:contain}
.auth-panel{box-shadow:0 20px 70px #0005}
.toast{max-width:min(360px,calc(100vw - 24px))}
/* Mobile: actual full-width portrait interface, fixed safe-area navigation */
@media (max-width:859px) and (orientation:portrait), (max-width:739px){
 .app{max-width:none;box-shadow:none;border:0;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
 .topbar{top:0;left:0;right:0;border-radius:0}
 .brandline{padding-top:max(8px,env(safe-area-inset-top));height:auto;min-height:62px}
 .brand small{letter-spacing:1.3px}
 .bottom-nav{width:100%;max-width:none;left:0;transform:none;min-height:64px;gap:2px;padding:5px 5px calc(7px + env(safe-area-inset-bottom));touch-action:manipulation}
 .bottom-nav button{min-height:50px;min-width:0;padding:4px 0;font-size:clamp(8px,2.3vw,11px);gap:2px}
 .bottom-nav button span{font-size:clamp(18px,5vw,22px)}
 main#content{min-height:calc(100svh - 245px);padding:13px 12px 22px}
 .scroll-top{scroll-margin-top:160px}
 .offline{top:calc(133px + env(safe-area-inset-top))}
 .hero{padding:15px}
 .hero h2{font-size:clamp(22px,6vw,29px)}
 .auth-panel{margin:max(18px,5svh) auto}
}
/* Narrow portrait phones: avoid money counter clipping and microscopic buttons */
@media (max-width:360px){
 .statline{gap:6px;padding:9px 8px}
 .stat small{font-size:8px;letter-spacing:0}
 .stat strong{font-size:clamp(12px,4vw,15px)}
 .ratestat strong{font-size:clamp(11px,3.65vw,14px)}
 .gemstat{padding:7px 5px;font-size:11px}
 main#content{padding:11px 9px}
 .card{border-radius:14px}
 .choice{font-size:10px}
 .illustration{width:42px;height:42px;font-size:24px}
}
/* Tablet landscape & desktop: true wide dashboard, permanent navigation rail */
@media (min-width:860px), (min-width:740px) and (orientation:landscape){
 html{scroll-padding-top:146px}
 body{background:radial-gradient(circle at 65% 0%,#19384b 0%,#06131c 57%)}
 .app{
  width:min(1600px,100%);max-width:none;min-height:100svh;
  margin:0 auto;padding-bottom:0;box-shadow:0 0 90px #0005;
  display:grid;grid-template-columns:var(--side-width) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"menu header" "menu game";
  align-items:start;
 }
 .bottom-nav{
  grid-area:menu;position:sticky;top:0;bottom:auto;left:auto;transform:none;
  z-index:50;align-self:start;width:100%;max-width:none;height:100svh;
  border:0;border-right:1px solid #314b5d;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
  gap:7px;padding:25px 12px 15px;background:#0e1e2ef7;
  overflow-y:auto;box-shadow:8px 0 38px #0002;
 }
 .bottom-nav::before{
  content:"GRAFİKER DAYI  /  GAMES";display:block;color:#b8fb68;
  text-align:left;letter-spacing:1.5px;font-weight:900;font-size:10px;
  line-height:1.55;padding:13px 8px 21px;border-bottom:1px solid #344a54;
  margin-bottom:10px;
 }
 .bottom-nav button{
  flex:none;min-height:56px;display:flex;flex-direction:row;
  justify-content:flex-start;align-items:center;text-align:left;
  gap:12px;padding:9px 12px;font-size:13px;border-radius:13px;
 }
 .bottom-nav button span{font-size:23px;min-width:27px;text-align:center}
 .topbar{grid-area:header;position:sticky;top:0;align-self:start;z-index:42;min-width:0;background:#0e1b2bfa}
 .brandline{height:53px;padding:6px 22px}
 .brand{font-size:18px}
 .statline{padding:9px 22px;gap:28px;justify-content:flex-start}
 .stat{flex:0 1 260px}
 .stat strong,.ratestat strong{font-size:21px}
 .gemstat{font-size:14px;padding:8px 15px}
 .level-line{padding:0 23px 9px}
 main#content{
  grid-area:game;width:100%;max-width:1370px;margin:0 auto;min-height:calc(100svh - 134px);
  padding:22px clamp(14px,2.8vw,38px) 56px;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;align-content:start;
 }
 main#content > *{min-width:0;grid-column:span 6;margin:0;align-self:stretch}
 main#content > .hero,main#content > .section-title,main#content > .choice-row,
 main#content > .beta,main#content > .split,main#content > .intro-card,
 main#content > .city-gate{grid-column:1/-1}
 main#content > .section-title{margin-top:10px;align-self:end}
 main#content > .choice-row{margin-bottom:2px}
 main#content > .choice-row .choice{min-height:42px}
 main#content > .hero{min-height:140px;padding:19px 24px;display:flex;flex-direction:column;justify-content:center}
 main#content > .hero h2{font-size:clamp(24px,3vw,34px);max-width:none;margin:6px 0}
 main#content > .hero .muted{font-size:13px;max-width:690px}
 main#content > .hero:after{right:6%;top:3px;font-size:126px;opacity:.075}
 main#content > .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
 main#content > .card{margin-bottom:0}
 main#content > .rank,main#content > .objective,main#content > .city-card{margin-bottom:0}
 .scroll-top{scroll-margin-top:144px}
 .offline{grid-column:2;grid-row:2;position:sticky;top:132px;z-index:45}
 .toast{bottom:24px;left:calc(50% + var(--side-width)/2);max-width:420px}
 .auth-panel{width:min(450px,94%);margin:8vh auto}
}
@media (min-width:740px) and (max-width:1023px) and (orientation:landscape){
 :root{--side-width:150px}
 .bottom-nav{padding:13px 8px}
 .bottom-nav button{font-size:11px;padding:8px 9px;gap:7px}
 .bottom-nav button span{font-size:19px;min-width:25px}
 .bottom-nav::before{font-size:9px;padding:7px 5px 13px}
 main#content{padding:13px 13px 35px;gap:10px}
 .card{padding:12px}
 .statline{padding:7px 14px;gap:14px}
 .stat strong,.ratestat strong{font-size:16px}
 .brandline{padding:6px 14px}
 .brand small{display:none}
}
@media (min-width:1440px){
 main#content{gap:18px}
 main#content>.card:not(.hero),main#content>.rank,main#content>.objective,main#content>.city-card{grid-column:span 4}
}
@media (prefers-reduced-motion:reduce){.loader i{animation:none}}