*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;height:100dvh;min-height:100dvh;position:fixed;inset:0;overflow:hidden;background:#0d1117;color:#e8eef5;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:none;overscroll-behavior:none}
#game{position:fixed;inset:0;display:block;touch-action:none;width:100%;height:100%}
.hide{display:none!important}
button{font:inherit;color:#eef3f8;background:linear-gradient(#2c3a48,#1c2631);border:1px solid #4a5d70;border-radius:8px;padding:6px 10px;cursor:pointer}
button:active{transform:translateY(1px)} button.on{background:linear-gradient(#3d7a3d,#285428);border-color:#7c7}
button:disabled{opacity:.4}
#top{position:fixed;left:0;right:0;top:0;height:40px;display:flex;align-items:center;gap:6px;padding:0 6px;background:linear-gradient(rgba(10,14,20,.94),rgba(10,14,20,.78));border-bottom:1px solid #2d3b4a;z-index:5;font-size:14px;white-space:nowrap;overflow:hidden}
#topStats{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden}
#topActs{display:flex;align-items:center;gap:4px;flex:0 0 auto}
#top .cell{display:flex;align-items:center;gap:4px;padding:3px 7px;background:rgba(255,255,255,.04);border-radius:6px}
#top .money b{color:#ffd34d;font-size:16px} #top small{opacity:.6;font-size:11px}
#top .small{font-size:12px;opacity:.85}
.pbar{width:70px;height:9px;background:#222;border-radius:5px;overflow:hidden;border:1px solid #444} .pbar i{display:block;height:100%;background:#4e4}
#mats span{margin-right:5px;font-size:12px}
#top .spacer{flex:1}
#top button{padding:4px 8px;height:32px}
#swBtn.ready{background:linear-gradient(#2a8fb0,#155a75);animation:blink 1s infinite}
#side{position:fixed;right:0;top:40px;bottom:0;width:188px;background:rgba(12,17,24,.9);border-left:1px solid #2d3b4a;z-index:4;display:flex;flex-direction:column}
#sideClose{display:none}
#tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px}
.tab{padding:3px 0;display:flex;flex-direction:column;align-items:center;font-size:16px;border-radius:6px}
.tab small{font-size:9px;opacity:.8}
.tab.on{background:linear-gradient(#3b5f80,#24405a);border-color:#7ab}
.tab.dim{opacity:.4} .tab.blink{animation:blink 1s infinite}
@keyframes blink{50%{box-shadow:0 0 10px #ffd34d;border-color:#ffd34d}}
#grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;align-content:start;touch-action:pan-y}
.item{position:relative;border:1px solid #3a4b5c;border-radius:8px;overflow:hidden;cursor:pointer;background:#111820;aspect-ratio:1/1.12}
.item img{width:100%;display:block;aspect-ratio:1/1}
.item .nm{position:absolute;left:0;right:0;bottom:12px;font-size:9.5px;text-align:center;background:rgba(0,0,0,.6);line-height:1.15;padding:1px}
.item .cs{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;text-align:center;color:#ffd34d;background:rgba(0,0,0,.75)}
.item .pg{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(80,200,255,.35);pointer-events:none}
.item .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;pointer-events:none}
.item .ct{position:absolute;top:2px;right:4px;font-weight:bold;color:#fff;text-shadow:0 0 3px #000}
.item .rd{display:none;position:absolute;top:30%;left:0;right:0;text-align:center;font-weight:bold;color:#ffd34d;text-shadow:0 0 4px #000;animation:blink 1s infinite}
.item.ready .rd{display:block}
.item.locked{filter:grayscale(1) brightness(.5)} .item.poor{filter:brightness(.7)} .item.done{filter:brightness(.6)} .item.done .lk{color:#6f6}
#tip{position:fixed;z-index:20;max-width:240px;background:rgba(10,14,20,.96);border:1px solid #4a5d70;border-radius:8px;padding:8px;font-size:12px;line-height:1.4;pointer-events:none}
.g{color:#7f7}.r{color:#f88}
#mini{position:fixed;left:6px;bottom:6px;width:170px;height:170px;border:2px solid #3a4b5c;border-radius:8px;background:#000;z-index:4;image-rendering:pixelated}
#selp{position:fixed;left:184px;bottom:6px;right:200px;max-width:560px;background:rgba(12,17,24,.9);border:1px solid #3a4b5c;border-radius:10px;padding:8px 10px;z-index:4;font-size:12.5px}
#selp .sn{font-weight:bold;font-size:14px} #selp .sp{opacity:.9;margin-top:2px}
.hpb{height:6px;background:#222;border-radius:3px;margin-top:4px;overflow:hidden} .hpb i{display:block;height:100%;background:#4e4}
.acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .acts button{font-size:12px;padding:5px 8px}
#touch{position:fixed;left:6px;bottom:184px;display:flex;flex-direction:column;gap:6px;z-index:4}
#touch button{width:44px;height:44px;font-size:20px;padding:0;background:rgba(20,28,38,.85)}
#cmdClose{display:none}
#placebar{position:fixed;left:50%;transform:translateX(-50%);top:46px;z-index:7;display:flex;gap:6px;align-items:center;background:rgba(12,17,24,.92);padding:3px 6px;border-radius:999px;border:1px solid #6a6;max-width:calc(100vw - 16px)}
#placebar button{font-size:13px;padding:3px 10px;height:28px} #placebar small{opacity:.75;font-size:11px;white-space:nowrap}
.phone-only{display:none}
html.side-shut #side{display:none!important}
html.cmd-shut #touch{display:none!important}
#toasts{position:fixed;left:50%;transform:translateX(-50%);top:48px;z-index:7;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:min(90vw,560px)}
.toast{background:rgba(12,17,24,.9);border:1px solid #4a5d70;border-radius:8px;padding:6px 12px;font-size:13px;transition:opacity .6s;text-align:center}
.toast.good{border-color:#5c5;color:#cfc} .toast.bad{border-color:#d55;color:#fcc} .toast.out{opacity:0}
#fps{position:fixed;left:184px;top:44px;font-size:10px;opacity:.5;z-index:3;pointer-events:none}
.panel{position:fixed;left:50%;top:50px;transform:translateX(-50%);width:min(94vw,640px);max-height:calc(100vh - 70px);overflow-y:auto;background:rgba(12,17,24,.96);border:1px solid #4a5d70;border-radius:12px;padding:14px;z-index:9;font-size:13px;touch-action:pan-y}
.panel h2{font-size:17px;margin-bottom:8px} .panel h3{font-size:14px;margin:10px 0 4px;color:#9cf}
.panel .x{position:absolute;right:8px;top:8px}
.panel .row{margin:4px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bar{width:140px;height:9px;background:#222;border-radius:5px;overflow:hidden;display:inline-block} .bar.sm{width:80px} .bar i{display:block;height:100%;background:#6af}
.hint{opacity:.65;font-size:11.5px;width:100%}
.law.on{background:linear-gradient(#3d7a3d,#285428);border-color:#7c7}
#log{left:auto;right:196px;transform:none;width:320px} #logList div{padding:2px 0;border-bottom:1px solid #222;font-size:12px}
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,rgba(40,70,100,.55),rgba(5,8,12,.94));touch-action:pan-y}
.mbox{width:min(92vw,380px);display:flex;flex-direction:column;gap:8px;background:rgba(14,20,28,.92);border:1px solid #4a5d70;border-radius:14px;padding:20px;max-height:94vh;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mbox.wide{width:min(94vw,620px)} .mbox.scroll{overflow-y:auto;font-size:13.5px;line-height:1.45} .mbox.scroll p{margin:4px 0}
.mbox button{padding:11px;font-size:16px}
.mbox label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.mbox select,.mbox input[type=range],.mbox input:not([type]){font:inherit;padding:5px;border-radius:6px;background:#1c2631;color:#fff;border:1px solid #4a5d70}
.logo{font-size:30px;font-weight:900;letter-spacing:2px;text-align:center;color:#ffd34d;text-shadow:0 2px 0 #7a5a00,0 0 18px rgba(255,200,60,.4)}
.logo span{color:#6cf;text-shadow:0 2px 0 #1a4a6a,0 0 18px rgba(90,200,255,.5)}
.sub{text-align:center;opacity:.7;font-size:12px;letter-spacing:3px;margin-bottom:6px}
.foot{opacity:.5;font-size:11px;text-align:center}
.go{background:linear-gradient(#3d8a3d,#255a25);border-color:#7c7}
.danger{background:linear-gradient(#8a2d2d,#5a1d1d);border-color:#c66}
#newOpts{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px dashed #4a5d70;border-radius:10px}
@media (max-width:900px),(max-height:520px){
  #side{width:150px} #tabs{grid-template-columns:repeat(4,1fr)} .tab small{display:none}
  #mini{width:120px;height:120px} #selp{left:132px;right:156px;font-size:11.5px;padding:5px 8px} #touch{bottom:132px} #fps{left:132px}
  #top{font-size:12px;height:36px} #top .small,#mats{display:none} #side{top:36px} #top button{height:28px;padding:2px 6px}
  #log{right:156px}
}
@media (max-height:420px){ #touch{flex-direction:row;bottom:auto;top:42px;left:6px} #touch button{width:38px;height:38px} #mini{width:104px;height:104px} #selp{left:116px} }

/* Telefon: tek ince şerit, çekmeceler kapalı, oyun alanı ekranın çoğu */
html.mob #top{height:28px;font-size:11px;gap:3px;padding:0 4px;z-index:10;overflow:hidden;touch-action:manipulation}
html.mob #top .cell{padding:1px 4px}
html.mob #top .money b{font-size:13px}
html.mob #top .small,html.mob #mats,html.mob #moral,html.mob #day{display:none!important}
html.mob #top button{height:24px;min-width:24px;padding:0 5px;font-size:13px}
html.mob .pbar{width:42px;height:7px}
html.mob .phone-only{display:inline-flex;align-items:center;justify-content:center}
html.mob #side{top:28px;width:min(118px,32vw);z-index:8;background:rgba(12,17,24,.94)}
html.mob #sideClose{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border-radius:0;border:none;border-bottom:1px solid #4a5d70;background:#243140;font-size:14px;flex:none}
html.mob #tabs{grid-template-columns:repeat(4,1fr)}
html.mob .tab{font-size:14px;padding:2px 0}
html.mob .item{aspect-ratio:1/0.92}
html.mob #touch{flex-direction:row;top:32px;bottom:auto;left:4px;gap:4px;z-index:8}
html.mob #touch button{width:32px;height:32px;font-size:15px}
html.mob #cmdClose{display:inline-flex;align-items:center;justify-content:center}
html.mob #placebar{top:32px;padding:1px 4px;gap:4px;background:rgba(12,17,24,.88)}
html.mob #placebar small{display:none}
html.mob #placebar button{height:24px;font-size:12px;padding:0 8px}
html.mob #mini{width:72px;height:72px;left:4px;bottom:4px}
html.mob #selp{left:80px;right:6px;bottom:4px;max-width:none;padding:3px 8px;font-size:11px;z-index:6;cursor:pointer}
html.mob #selp .sn{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mob #selp .sn::after{content:'  ▾';opacity:.65;font-size:10px}
html.mob #selp.open .sn::after{content:'  ▴'}
html.mob #selp:not(.open){max-height:34px;overflow:hidden}
html.mob #selp:not(.open) .sp,html.mob #selp:not(.open) .acts{display:none}
html.mob #selp .hpb{margin-top:2px;height:4px}
html.mob #selp.open{max-height:32vh;overflow:auto}
html.mob #selp.open .acts button{font-size:11px;padding:3px 6px}
html.mob #fps{display:none}
html.mob #toasts{top:34px;width:min(70vw,280px)}
html.mob .toast{font-size:12px;padding:4px 8px}
@media (max-height:420px){
  html.mob #mini{width:52px;height:52px}
  html.mob #selp{left:60px}
  html.mob #top{height:26px}
  html.mob #side{top:26px}
}
@media (max-width:520px){
  html.mob #clock,html.mob #devletBtn,html.mob #logBtn{display:none!important}
}

/* Dar ekran: yapı çekmecesi kapalı başlar, açıkken ekranın en fazla ~çeyreği.
   html.mob olmasa da geçer (X ile kapanır). */
@media (max-width:700px), (max-height:500px) and (max-width:1100px){
  #fps{display:none!important}
  #mats,#day,#moral{display:none!important}
  .phone-only{display:inline-flex!important;align-items:center;justify-content:center}
  #top{height:28px;font-size:11px}
  #side{top:28px;width:min(100px,26vw)!important;z-index:8}
  html:not(.side-open) #side{display:none!important}
  html.side-open #side{display:flex!important}
  #sideClose{display:flex!important;align-items:center;justify-content:center;width:100%;height:40px;border-radius:0;border:none;border-bottom:1px solid #4a5d70;background:#243140;font-size:14px;flex:none;position:relative;z-index:9}
  html:not(.cmd-open) #touch{display:none!important}
  html.cmd-open #touch{display:flex!important;flex-direction:row;top:32px;bottom:auto;left:4px;z-index:8}
  #cmdClose{display:inline-flex!important;align-items:center;justify-content:center}
  #mini{width:64px;height:64px}
  #touch button{width:36px;height:36px}
}

/* Yatay telefon: menü, ayarlar ve diğer pencereler ekrana sığsın, taşan kısım kaysın */
@media (orientation: landscape) and (max-height: 560px) {
  .overlay { align-items: flex-start; padding: 6px 0; overflow: hidden; }
  .mbox, .mbox.wide, .panel {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}