/* ============================================================
   Gecenin Tanıkları — telefon / tablet arayüzü
   Bu dosya en son yüklenir; yalnızca ≤820px ekranlarda etkilidir.
   Masaüstü görünümü bu dosyadan etkilenmez.
   ============================================================ */

/* ---------- Dokunmatik kontroller (her genişlikte, yalnız dokunmatikte görünür) ---------- */
#touchPad{position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;z-index:26}
#stick{position:absolute;left:18px;bottom:22px;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(20,30,38,.55),rgba(8,14,19,.6));
  border:1px solid rgba(214,183,124,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.45);
  pointer-events:auto;touch-action:none;display:grid;place-items:center}
#stick::before{content:'';position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(214,183,124,.22)}
#stick i{width:56px;height:56px;border-radius:50%;display:block;
  background:radial-gradient(circle at 35% 30%,#efd9ad,#c2a575 60%,#9a7d4f);
  box-shadow:0 6px 16px rgba(0,0,0,.55),inset 0 -3px 6px rgba(0,0,0,.25);transition:transform .06s linear}
#touchBtns{position:absolute;right:16px;bottom:26px;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
#touchBtns button{pointer-events:auto;touch-action:manipulation;border-radius:50%;
  border:1px solid rgba(214,183,124,.5);background:rgba(10,18,24,.6);color:#eee8db;
  font:600 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.6px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
#tAct{width:94px;height:94px;font-size:14px;
  background:radial-gradient(circle at 40% 35%,rgba(214,183,124,.42),rgba(214,183,124,.18));border-color:#d6b77c}
#tAct:active{background:rgba(214,183,124,.7);color:#161d21}
#tAct{padding:0 8px;line-height:1.25;transition:transform .15s,box-shadow .15s}
#tAct.ready{transform:scale(1.06);box-shadow:0 0 0 4px rgba(214,183,124,.18),0 8px 22px rgba(0,0,0,.45);color:#fff3d6}
#sheetArrows{display:none}
body.talking #touchPad,body.talking #objective,body.talking #roomLabel,body.talking #chat{display:none!important}

/* ============================================================
   ≤ 820px — dikey telefon / küçük tablet
   ============================================================ */
@media (max-width:820px){
  :root{--mob-head:52px;--mob-bar:64px;--safe-b:env(safe-area-inset-bottom,0px)}
  html,body{height:100dvh;overflow:hidden}

  /* Sahne tüm ekranı kaplar; alt panel sabit "sheet" olur */
  #app{grid-template-columns:1fr!important;grid-template-rows:var(--mob-head) minmax(0,1fr)!important;height:100dvh}
  #gameArea{min-height:0}

  /* ---------- Üst şerit ---------- */
  header{grid-column:1!important;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
    height:var(--mob-head);min-height:0;padding:0 8px!important;overflow:hidden;
    background:linear-gradient(180deg,rgba(24,30,40,.98),rgba(15,19,27,.98));
    border-bottom:1px solid rgba(214,183,124,.18);box-shadow:0 6px 24px rgba(0,0,0,.45)}
  header h1{display:flex!important;align-items:center;font-size:0!important;letter-spacing:0;margin:0;max-width:none!important;flex:0 0 auto}
  header h1 img{display:block!important;width:32px!important;height:32px!important;margin:0!important;
    box-shadow:0 0 0 2px rgba(214,183,124,.18)}
  header .info,#teamBadge,#apBar{display:none!important}
  header>*{flex:0 0 auto}

  /* Enerji & saat: kompakt pill'ler */
  #apBadge{padding:0 10px;height:34px;border-radius:17px;font-size:13px;gap:5px;animation:none}
  #apBadge b{font-size:14px}
  #apBadge::before{content:none!important}
  #restBtn{font-size:0!important;width:36px!important;padding:0!important;text-align:center;letter-spacing:0}
  #restBtn::before{content:'☕';font-size:16px;line-height:34px}
  #apBadge svg.ic{width:14px;height:14px}
  #clock{height:34px;display:inline-flex;align-items:center;padding:0 10px;border-radius:17px;font-size:13px;animation:none}
  #restBtn{height:34px;border-radius:17px;min-width:0;white-space:nowrap}

  /* Sağ grup: ikon düğmeler */
  #soundBtn{margin-left:auto!important}
  #soundBtn,#talkBtn,#menuBtn,#visualBtn{width:38px!important;height:38px!important;min-height:0!important;padding:0!important;
    border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;line-height:1;gap:0}
  #soundBtn,#talkBtn,#menuBtn,#visualBtn{color:#e6d3ac}
  #soundBtn svg,#menuBtn svg,#visualBtn svg{width:18px!important;height:18px!important;display:block!important;stroke:currentColor}
  #menuBtn span:not([data-ic]),#visualBtn span{display:none!important}
  #menuBtn span[data-ic]{display:inline-flex}

  /* ---------- Sahne üstü katmanlar ---------- */
  #roomLabel{top:8px;left:8px;padding:5px 10px;font-size:11px;border-radius:9px;letter-spacing:.5px}
  #objective{top:8px;left:auto;right:8px;bottom:auto;transform:none;max-width:calc(100% - 112px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.35;padding:6px 10px;border-radius:9px;text-align:right}
  #objective.expand{white-space:normal;text-overflow:clip}
  #chat{left:8px;top:44px;bottom:auto;width:min(240px,62%);display:none!important} /* yalnız ekip varsa JS açar */
  #chat.coop{display:block!important}
  #chatLog{max-height:84px}
  #chatIn{font-size:12px;padding:6px 9px}
  #prompt{display:none!important}
  #hintPulse{top:44px;right:8px;left:8px;max-width:none;padding:8px 12px;font-size:12px;line-height:1.4;border-radius:10px;animation:hintIn .4s}
  #minimap,#minimapLbl{display:none!important}
  #touchPad{bottom:calc(var(--mob-bar) + var(--safe-b))}
  #vignette{bottom:calc(var(--mob-bar) + var(--safe-b))}
  #toast{top:auto;bottom:calc(var(--mob-bar) + var(--safe-b) + 200px);max-width:86%;font-size:13px}

  /* NPC diyaloğu: alt bardan yukarıda, tam genişlik */
  #dialog{left:6px;right:6px;bottom:calc(var(--mob-bar) + var(--safe-b) + 6px);width:auto;
    max-height:calc(100dvh - var(--mob-head) - var(--mob-bar) - 20px);border-radius:16px}
  #dialogOpts{grid-template-columns:1fr}

  /* Vaka dosyası kartı */
  #introCard .file{width:min(560px,94%);padding:22px 18px;max-height:88%;overflow-y:auto;border-radius:16px}
  #introCard h2{font-size:19px}
  #introCard .ln{font-size:14px;line-height:1.7}
  #visualPanel{width:min(320px,92vw)}

  /* ---------- Alt sheet: sekme çubuğu + içerik ---------- */
  #side{position:fixed;left:0;right:0;bottom:0;z-index:30;border-left:0!important;border-top:0;
    height:min(72dvh,640px);
    transform:translateY(calc(100% - var(--mob-bar) - var(--safe-b)));
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
    background:linear-gradient(180deg,rgba(22,31,40,.97),rgba(12,18,25,.99));
    border-radius:18px 18px 0 0;box-shadow:0 -14px 44px rgba(0,0,0,.6);
    display:flex;flex-direction:column;overflow:hidden!important;
    padding-bottom:var(--safe-b)}
  #side.open{transform:translateY(0);height:min(50dvh,460px)}
  #side.open.full{height:calc(100dvh - var(--mob-head))}
  #side{transition:transform .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1)}
  #sheetArrows{display:flex!important;flex-direction:column;gap:2px;justify-content:center;padding:0 2px 0 4px;flex:0 0 auto}
  #sheetArrows button{width:30px;height:22px;border-radius:7px;border:1px solid rgba(214,183,124,.3);background:rgba(214,183,124,.1);
    color:#e6d3ac;font-size:10px;line-height:1;padding:0;-webkit-tap-highlight-color:transparent}
  #sheetArrows button:disabled{opacity:.25}
  #sheetArrows[hidden]{display:none!important}
  #side::before{ /* tutamaç çizgisi */
    content:'';position:absolute;top:4px;left:50%;width:40px;height:3px;margin-left:-20px;border-radius:2px;
    background:rgba(214,183,124,.35);z-index:2}

  #tabs{order:0;display:flex;height:var(--mob-bar);padding:10px 6px 4px;gap:4px;border-bottom:0;
    border-top:1px solid rgba(214,183,124,.22);background:transparent;flex:0 0 auto;position:relative}
  #tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px 2px;font-size:10.5px;letter-spacing:.3px;border:0!important;border-radius:12px;background:none;
    color:var(--dim);min-height:0;position:relative;-webkit-tap-highlight-color:transparent}
  #tabs button .tico{display:inline-flex;transform:none!important;animation:none!important}
  #tabs button svg.ic{width:20px;height:20px;vertical-align:0}
  #tabs button.active{color:var(--tc);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 18%,transparent),transparent)}
  #tabs button.active::after{display:none}
  #tabs button .bdg{top:2px;right:calc(50% - 22px);min-width:15px;height:15px;line-height:15px;font-size:9.5px}

  #tabContent{order:2;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:20px 14px 14px;font-size:13.5px;line-height:1.6}
  #side:not(.open) #tabContent{visibility:hidden}

  /* Kapatma tutamacı (JS ekler) */
  #sheetGrip{order:1;flex:0 0 auto;height:26px;border-top:1px solid rgba(214,183,124,.1);display:flex;align-items:center;justify-content:center;
    color:rgba(214,183,124,.55);font-size:10px;letter-spacing:2px;cursor:pointer;user-select:none;touch-action:none}
  #side:not(.open) #sheetGrip{display:none}
  #sheetGrip span{padding:2px 12px;border-radius:10px;background:rgba(214,183,124,.08)}

  /* Kartlar biraz daha kompakt */
  .card{padding:14px;border-radius:12px}
  .card h3{font-size:15px}
}

/* ============================================================
   Yatay telefon
   ============================================================ */
@media (max-width:820px) and (orientation:landscape){
  :root{--mob-head:44px;--mob-bar:52px}
  #apBadge,#clock,#restBtn{height:30px;font-size:12px}
  #soundBtn,#talkBtn,#menuBtn,#visualBtn{width:34px!important;height:34px!important}
  #side{height:min(88dvh,520px)}
  #tabs{padding-top:3px}
  #tabs button{flex-direction:row;gap:6px;font-size:11px}
  #tabs button svg.ic{width:16px;height:16px}
  #touchPad{height:150px}
  #stick{width:108px;height:108px;bottom:12px;left:12px}
  #stick i{width:46px;height:46px}
  #tAct{width:76px;height:76px;font-size:12px}#tRun{width:54px;height:54px}
  #touchBtns{right:12px;bottom:14px;gap:8px}
  #prompt{bottom:calc(var(--mob-bar) + var(--safe-b) + 112px)}
  #toast{bottom:calc(var(--mob-bar) + var(--safe-b) + 150px)}
}

@media (max-width:820px){#talkBtn{font-size:18px!important}#talkBtn.on{border-color:rgba(92,184,92,.6)!important}#camBtns{bottom:150px;gap:6px}#camBtns button{width:36px;height:36px;font-size:15px}body.talking #camBtns{display:none}}