/* Niyaziler DND — mobil web katmanı
   Masaüstü stillerine dokunmadan telefon ve küçük tabletlerde gerçek bir
   dokunmatik kullanım düzeni sağlar. */

:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-action-height: 62px;
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust:100%; }
  body { overflow-x:hidden; }
  button, a, input, select, textarea { touch-action:manipulation; }
  input, select, textarea { font-size:16px!important; }
  button, .btn, a.btn { min-height:44px; }

  /* Ortak sayfalar */
  .page-center { min-height:100dvh; align-items:flex-start; padding:calc(20px + var(--mobile-safe-top)) 14px calc(24px + var(--mobile-safe-bottom)); }
  .page-center>div { width:100%; }
  .brand-mark { margin-bottom:18px; gap:9px; }
  .brand-mark .seal { width:54px; height:54px; }
  .card { max-width:none; padding:24px 18px; }
  .form-footer { line-height:1.45; }

  .top-bar { position:sticky; top:0; z-index:80; min-height:auto; flex-wrap:wrap; gap:10px; padding:calc(9px + var(--mobile-safe-top)) 12px 9px; }
  .top-bar .brand { min-width:0; flex:1; }
  .top-bar .brand .seal { width:38px; height:38px; flex:0 0 38px; }
  .top-bar .brand>span { overflow:hidden; font-size:.82rem; white-space:nowrap; text-overflow:ellipsis; }
  .top-bar .brand>small { display:none; }
  .top-bar .who { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.82rem; }
  .top-bar .who>span:not(.connection-chip) { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .top-bar .who .btn-small { width:auto; flex:0 0 auto; margin:0; padding:8px 11px; }
  .container,.container-wide { width:100%; padding:18px 12px calc(28px + var(--mobile-safe-bottom)); }

  /* Giriş */
  .auth-shell { min-height:100dvh; grid-template-columns:1fr!important; }
  .auth-story { display:none!important; }
  .auth-panel { min-height:100dvh; width:100%; justify-content:center; padding:calc(30px + var(--mobile-safe-top)) 20px calc(30px + var(--mobile-safe-bottom))!important; }
  .auth-mobile-brand { display:flex!important; }
  .auth-panel-heading h2 { font-size:clamp(1.8rem,9vw,2.45rem); }
  .auth-input-wrap { min-height:50px; }

  /* Kampanya merkezi */
  .home-page,.campaign-home { padding-top:16px; }
  .home-hero,.campaign-hero { display:block; padding:20px 16px; }
  .home-hero h1,.campaign-hero h1 { font-size:clamp(1.85rem,9vw,2.7rem); }
  .campaign-date { width:max-content; margin-top:16px; }
  .campaign-grid { display:flex!important; flex-direction:column; gap:14px; }
  .campaign-sidebar,.campaign-content { width:100%; min-width:0; }
  .character-summary,.home-action-feature,.home-journal,.overview-card { padding:18px!important; }
  .character-summary-head { align-items:center; }
  .character-summary-avatar { width:62px; height:62px; flex:0 0 62px; }
  .home-stat-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .campaign-overview { grid-template-columns:1fr!important; }
  .party-preview { overflow-x:auto; padding-bottom:5px; }
  .home-journal-entry { padding:15px; }

  /* DM yönetim sayfası */
  .dm-workspace { padding:16px 12px calc(28px + var(--mobile-safe-bottom)); }
  .dm-workspace-header { padding:6px 2px 14px; }
  .dm-workspace-header h1 { font-size:1.8rem; }
  .dm-workspace .dm-tabs { position:sticky; top:calc(96px + var(--mobile-safe-top)); z-index:30; display:flex; gap:6px; margin:0 -12px 14px; padding:8px 12px; overflow-x:auto; overscroll-behavior-x:contain; background:#100c09f2; scrollbar-width:none; }
  .dm-workspace .dm-tabs::-webkit-scrollbar { display:none; }
  .dm-workspace .dm-tab { flex:0 0 auto; min-height:44px; padding:9px 13px; white-space:nowrap; }
  .dm-tab-panel { padding:16px 12px!important; }
  .dm-editor-form { padding:14px!important; }
  .dm-editor-actions { display:grid!important; grid-template-columns:1fr; gap:7px; }
  .dm-editor-actions .btn,.dm-tab-panel .btn-small { width:100%; }
  .user-item,.character-item { align-items:flex-start!important; flex-wrap:wrap; gap:9px!important; }
  .user-actions,.character-actions { width:100%; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .user-actions button,.character-actions button { width:100%; min-height:42px; }
  .dm-recipients { grid-template-columns:1fr!important; }
  .dm-content-item { padding:13px!important; }

  /* Profil */
  .profile-grid-top,.profile-grid-bottom { grid-template-columns:1fr!important; gap:12px; }
  .profile-mini-card { width:100%; max-width:none; }
  .inline-form { display:grid!important; grid-template-columns:1fr; gap:8px; }
  .inline-form .btn { width:100%; }
  .stat-row { grid-template-columns:minmax(0,1fr) auto!important; }
  .acquaintance-forms { gap:14px; }

  /* Oyun masası: üst oyuncu şeridi */
  .game-root { min-height:100dvh; height:100dvh; overflow:hidden; }
  .scene { inset:0; }
  .player-menu-link { top:calc(8px + var(--mobile-safe-top))!important; left:calc(8px + var(--mobile-safe-left))!important; min-height:46px; padding:0 11px!important; z-index:70; }
  .player-menu-link small { display:none; }
  .player-stack {
    top:calc(8px + var(--mobile-safe-top))!important;
    left:76px!important;
    right:calc(8px + var(--mobile-safe-right))!important;
    width:auto!important;
    max-width:none!important;
    height:52px;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding:0 2px 5px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .player-stack::-webkit-scrollbar { display:none; }
  .character-tile,
  html[data-ui-scale="compact"] .character-tile,
  html[data-ui-scale="large"] .character-tile {
    flex:0 0 118px!important;
    width:118px!important;
    height:48px!important;
    min-height:48px!important;
    scroll-snap-align:start;
  }
  .character-tile img,
  html[data-ui-scale="compact"] .character-tile img,
  html[data-ui-scale="large"] .character-tile img { width:40px!important; height:40px!important; flex-basis:40px!important; }
  .character-tile .char-name { padding:0 7px!important; font-size:9px!important; }
  .character-tile .char-name small { font-size:8px!important; }
  .character-hp { left:47px!important; right:6px!important; bottom:5px!important; height:4px!important; }
  .character-tile .status-dot { left:34px!important; width:8px!important; height:8px!important; }
  .condition-alert { left:-4px!important; top:-5px!important; width:18px!important; height:18px!important; font-size:11px!important; }
  .condition-tooltip { position:fixed!important; top:68px!important; left:8px!important; right:8px!important; width:auto!important; max-width:none!important; }

  /* Oyun masası: alttaki temel gezinme */
  .quick-actions,
  html[data-ui-scale="compact"] .quick-actions,
  html[data-ui-scale="large"] .quick-actions {
    position:fixed!important;
    z-index:75!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:calc(var(--mobile-action-height) + var(--mobile-safe-bottom));
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:0!important;
    padding:0 var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left)!important;
    border:0!important;
    border-top:1px solid #80613a!important;
    background:rgba(13,10,7,.98)!important;
    box-shadow:0 -10px 30px #000a!important;
    transform:none!important;
  }
  .quick-action,
  html[data-ui-scale="compact"] .quick-action,
  html[data-ui-scale="large"] .quick-action {
    width:100%!important;
    height:var(--mobile-action-height)!important;
    min-height:var(--mobile-action-height)!important;
    border:0!important;
    border-right:1px solid #3c2b1b!important;
    background:transparent!important;
    font-size:9px!important;
  }
  .quick-action:last-child { border-right:0!important; }
  .quick-action[aria-pressed="true"] { color:#f6ca72!important; background:#2a1b0d!important; box-shadow:inset 0 3px #d6a44f!important; }
  .quick-icon { font-size:18px!important; }

  .floating-panel,
  html[data-ui-scale="compact"] .floating-panel,
  html[data-ui-scale="large"] .floating-panel {
    position:fixed!important;
    z-index:74!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(var(--mobile-action-height) + var(--mobile-safe-bottom) + 8px)!important;
    width:auto!important;
    max-height:min(62dvh,560px)!important;
    transform:none!important;
    border:1px solid #8b6839!important;
    border-radius:12px 12px 3px 3px;
    box-shadow:0 18px 55px #000d!important;
    animation:mobile-panel-up .2s ease-out both;
  }
  .floating-panel .panel-head { min-height:50px; padding:11px 13px; cursor:default!important; touch-action:auto!important; }
  .floating-panel .panel-body { max-height:calc(62dvh - 52px)!important; overflow:auto; overscroll-behavior:contain; }
  .floating-panel.is-dragging { opacity:1!important; }

  /* Zar, harita ve savaş bilgileri */
  .dice-dock,
  html[data-ui-scale="compact"] .dice-dock,
  html[data-ui-scale="large"] .dice-dock {
    left:8px!important;
    right:8px!important;
    bottom:calc(var(--mobile-action-height) + var(--mobile-safe-bottom) + 8px)!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    padding:7px!important;
    transform:none!important;
  }
  .turn-status { margin-bottom:5px!important; font-size:9px!important; }
  .dice-actions { gap:4px!important; }
  .dice-actions button { min-height:42px!important; padding:4px 2px!important; font-size:8px!important; }
  .dice-actions button span { font-size:11px!important; }
  .last-roll-mini { display:none!important; }
  .map-widget,body[data-role="dm"] .map-widget {
    left:8px!important;
    bottom:calc(var(--mobile-action-height) + var(--mobile-safe-bottom) + 86px)!important;
    width:104px!important;
    border-width:2px!important;
  }
  .music-dock { left:8px!important; top:68px!important; bottom:auto!important; width:168px!important; max-height:76px; overflow:hidden; padding:7px!important; }
  .music-now small,.ambience-now { display:none!important; }
  .music-enable-btn { min-height:34px!important; padding:5px!important; font-size:9px!important; }
  .combat-hud { top:calc(66px + var(--mobile-safe-top))!important; }
  .combat-track { top:calc(106px + var(--mobile-safe-top))!important; right:8px!important; width:184px!important; max-height:31dvh!important; font-size:10px!important; }
  .dice-stage-name { min-width:180px!important; max-width:calc(100vw - 32px); font-size:14px!important; }
  .dice-stage-result { min-width:200px!important; max-width:calc(100vw - 32px); }

  /* DM mobil kontrol çekmecesi */
  .dm-mobile-backdrop { display:block; position:fixed; inset:0; z-index:998; width:100%; height:100%; min-height:0; padding:0; border:0; background:rgba(0,0,0,.58); backdrop-filter:blur(2px); animation:mobile-fade-in .16s ease both; }
  .dm-mobile-backdrop.hidden { display:none!important; }
  body.dm-mobile-open { overflow:hidden; }
  .dm-controls,
  body[data-role="dm"] .dm-controls {
    position:fixed!important;
    z-index:999!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:min(88dvh,820px)!important;
    max-height:none!important;
    display:flex;
    flex-direction:column;
    overflow:hidden!important;
    border:0!important;
    border-top:1px solid #bc8841!important;
    border-radius:18px 18px 0 0;
    box-shadow:0 -24px 70px #000e!important;
    animation:mobile-dm-sheet-up .24s cubic-bezier(.2,.75,.2,1) both;
  }
  .dm-controls.hidden { display:none!important; }
  .dm-titlebar { position:relative!important; top:auto!important; flex:0 0 auto; min-height:62px; padding:18px 16px 10px!important; border-radius:18px 18px 0 0; }
  .dm-titlebar::before { content:''; position:absolute; top:7px; left:50%; width:42px; height:4px; border-radius:4px; background:#71583a; transform:translateX(-50%); }
  .dm-titlebar h1 { font-size:16px!important; }
  .dm-titlebar .icon-btn { min-width:44px; min-height:44px; }
  .game-root .dm-tabs { position:relative!important; top:auto!important; flex:0 0 auto; display:flex!important; gap:5px!important; padding:7px 10px!important; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .game-root .dm-tabs::-webkit-scrollbar { display:none; }
  .game-root .dm-tabs button { flex:1 0 78px; min-height:44px!important; padding:8px 9px!important; }
  .game-root .dm-tab-section:not(.hidden) { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2px 0 calc(18px + var(--mobile-safe-bottom)); }
  .dm-card { margin:9px 10px!important; padding:14px!important; clip-path:none!important; border-radius:5px; }
  .dm-card-title { min-height:38px; display:flex; align-items:center; margin:-5px -3px 7px!important; padding:6px 38px 6px 3px!important; }
  .dm-card-title[role="button"]::after { top:7px!important; right:2px!important; width:30px!important; height:30px!important; }
  .dm-card p { font-size:13px!important; }
  .dm-field,.dm-primary-btn,.dm-secondary-btn,.upload-toggle,.audio-upload { min-height:46px!important; }
  .upload-drop { min-height:116px; }
  .background-grid,.npc-list,.audio-library-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .background-hover,.npc-card-hover { opacity:1!important; justify-content:flex-end!important; background:linear-gradient(transparent 30%,rgba(8,6,4,.94))!important; }
  .background-hover strong,.npc-card-hover strong { white-space:normal!important; }
  .pin-controls { grid-template-columns:1fr auto!important; }
  .pin-controls .dm-primary-btn { grid-column:1/-1; width:100%!important; }
  .combat-add-labels { grid-template-columns:1fr 1fr!important; }
  .combat-add-row { display:grid!important; grid-template-columns:1fr 1fr; }
  .combat-add-row input { width:100%!important; }
  .combat-add-row button { grid-column:1/-1; width:100%; }
  .combat-dm-row { display:grid!important; grid-template-columns:minmax(0,1fr) auto auto auto; gap:6px!important; padding:9px 4px!important; }
  .combat-dm-row>.combat-hp { grid-column:1/3; }
  .combat-dm-row>input { width:52px!important; }
  .combat-dm-row button { min-width:40px; min-height:40px!important; }
  .music-dm-actions { display:grid!important; grid-template-columns:repeat(3,1fr); gap:5px; }
  .music-dm-actions button { min-height:44px; padding:6px!important; }
  .dm-document-item { display:grid!important; grid-template-columns:1fr auto auto; }
  .dm-document-item>div { grid-column:1/-1; }
  body[data-role="dm"] .npc-resize-handle { width:30px!important; height:30px!important; right:-14px!important; bottom:-14px!important; border-width:3px!important; }
  .npc-token .token-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; font-size:10px!important; }
  .dm-footer-actions { flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:8px 10px calc(8px + var(--mobile-safe-bottom))!important; border-top:1px solid #49351f; background:#100c09; }
  .dm-footer-actions .dm-secondary-btn { margin:0!important; min-height:44px!important; }
  .dm-open-btn {
    position:fixed!important;
    z-index:73!important;
    left:8px!important;
    top:auto!important;
    bottom:calc(var(--mobile-action-height) + var(--mobile-safe-bottom) + 8px)!important;
    width:auto!important;
    min-width:58px;
    height:46px!important;
    border-color:#c08b43!important;
    background:#211409!important;
    box-shadow:0 8px 24px #000a;
  }

  /* Tam ekran pencereler */
  .pause-menu { align-items:end!important; padding:0!important; }
  .pause-menu-card,.pause-menu.character-open .pause-menu-card { width:100%!important; max-width:none!important; max-height:92dvh!important; padding:24px 18px calc(20px + var(--mobile-safe-bottom))!important; border-radius:18px 18px 0 0!important; overflow:auto; }
  .map-modal { padding:calc(58px + var(--mobile-safe-top)) 8px calc(8px + var(--mobile-safe-bottom))!important; }
  .map-modal-canvas { width:calc(100vw - 16px)!important; height:min(calc(100dvh - 132px),calc(100vw - 16px))!important; }
  .map-zoom-controls { top:calc(8px + var(--mobile-safe-top))!important; left:8px!important; right:58px!important; justify-content:center; }
  .map-modal-close { top:calc(8px + var(--mobile-safe-top))!important; right:8px!important; width:44px!important; height:44px!important; }
  .handout-modal { padding:12px!important; }
  .handout-paper { max-height:calc(100dvh - 24px)!important; overflow:auto; padding:28px 18px!important; }
}

@media (max-width:380px) {
  .character-tile,
  html[data-ui-scale="compact"] .character-tile,
  html[data-ui-scale="large"] .character-tile { flex-basis:104px!important; width:104px!important; }
  .music-dock { display:none!important; }
  .combat-track { width:166px!important; }
  .game-root .dm-tabs button { flex-basis:72px; font-size:9px!important; }
}

@media (max-width:760px) and (orientation:landscape) {
  .dm-controls,body[data-role="dm"] .dm-controls { height:94dvh!important; }
  .floating-panel { max-height:72dvh!important; }
  .floating-panel .panel-body { max-height:calc(72dvh - 52px)!important; }
  .map-widget { display:none!important; }
}

@keyframes mobile-dm-sheet-up { from { opacity:.4; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes mobile-panel-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes mobile-fade-in { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  .dm-controls,.dm-mobile-backdrop,.floating-panel { animation:none!important; }
}