/* Escape from Humanity — oyun sayfası (style.css üzerine ekler) */
.pix{ image-rendering:pixelated; image-rendering:crisp-edges; display:block; }
.efh-tags{ margin:0 0 26px; }

/* Hero sahnesi */
.efh-stage{ position:relative; height:220px; border-radius:var(--radius); background:var(--bg-soft); border:1px solid var(--border); overflow:hidden; }
.efh-ship{ position:absolute; top:14px; right:-10px; width:150px; height:auto; animation:efhFloat 6s steps(6,end) infinite; }
.efh-human{ position:absolute; left:22px; bottom:34px; width:69px; height:auto; }
.efh-zombie{ position:absolute; left:50%; bottom:34px; width:112px; height:auto; margin-left:-40px; animation:efhBob 1.4s steps(2,end) infinite; }
.efh-ground{ position:absolute; left:0; right:0; bottom:0; height:34px; background:repeating-linear-gradient(90deg,var(--panel) 0 16px,var(--panel-hi) 16px 32px); border-top:2px solid var(--games); }
@keyframes efhBob{ 50%{ transform:translateY(-4px); } }
@keyframes efhFloat{ 50%{ transform:translate(-8px,6px); } }

/* Karakter kartları */
.efh-char .efh-sprite-box{ height:150px; display:flex; align-items:center; justify-content:center; background:var(--bg-soft); border:1px dashed var(--border-hi); border-radius:var(--radius-sm); margin-bottom:18px; overflow:hidden; }
.efh-char-main{ border-color:var(--games); }
.efh-char-main .efh-sprite-box img{ width:112px; height:auto; }
.efh-char .efh-sprite-box img{ max-width:80%; max-height:120px; width:auto; height:auto; }
.efh-char:nth-child(2) .efh-sprite-box img{ width:224px; max-width:90%; }
.efh-sprite-wide img{ width:90% !important; max-height:130px !important; object-fit:contain; }

/* Demo bölümü */
.efh-steps{ margin-top:26px; display:grid; gap:10px; }
.efh-step{ display:flex; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); }
.efh-step .mono{ color:var(--accent); font-size:13px; }
.efh-step strong{ display:block; font-size:14.5px; font-weight:600; }
.efh-step small{ color:var(--text-dim); font-size:12.5px; }
.efh-dl-head{ display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.efh-dl-head img{ width:56px; height:auto; }
.efh-dl-head .mono{ font-size:12px; color:var(--accent); }
.efh-meta{ list-style:none; padding:0; margin:0 0 20px; border-top:1px solid var(--border); }
.efh-meta li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; }
.efh-meta span{ color:var(--text-dim); }
.efh-note{ margin-top:12px; font-size:12.5px; color:var(--text-dim); text-align:center; }

/* Tester */
.efh-tester{ max-width:760px; margin:0 auto; }
.efh-locked{ text-align:center; padding:28px 8px; }
.efh-lock-icon{ display:inline-block; color:var(--accent); border:1px dashed var(--accent); padding:5px 11px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:16px; }
.efh-locked p{ margin:10px auto 22px; }
.efh-verified{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--text-mid); margin-bottom:22px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.efh-verified .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.efh-link{ margin-left:auto; background:none; border:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; }
.efh-drop{ display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; padding:22px; border:1px dashed var(--border-hi); border-radius:var(--radius-sm); cursor:pointer; color:var(--text) !important; transition:border-color .15s, background .15s; }
.efh-drop:hover, .efh-drop.over{ border-color:var(--accent); background:var(--accent-soft); }
.efh-drop small{ color:var(--text-dim); font-size:12px; }
.efh-previews{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:12px; }
.efh-previews:empty{ display:none; }
.efh-prev{ position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-hi); background:var(--bg-soft); }
.efh-prev img{ width:100%; height:100%; object-fit:cover; }
.efh-prev button{ position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:var(--radius-sm); border:0; background:rgba(0,0,0,.75); color:#fff; cursor:pointer; }

/* Modal */
.efh-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,8,7,.86); }
.efh-modal.hide{ display:none; }
.efh-modal-card{ position:relative; width:100%; max-width:440px; max-height:calc(100vh - 40px); overflow:auto; background:var(--panel); border:1px solid var(--border-hi); border-radius:var(--radius); padding:30px 28px; }
.efh-modal-card h3{ margin:6px 0 14px; }
.efh-modal-card p{ margin-bottom:18px; }
.efh-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--border-hi); background:transparent; color:var(--text-mid); cursor:pointer; }
.efh-close:hover{ color:var(--accent); border-color:var(--accent); }
.efh-code{ text-align:center; font-family:var(--mono); font-size:26px !important; letter-spacing:.5em; padding-left:.5em !important; }
.efh-done{ text-align:center; padding:10px 0; }
.efh-done-icon{ width:56px; height:56px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid var(--accent); color:var(--accent); font-size:26px; }
.hide{ display:none !important; }

@media (max-width:720px){
  .efh-modal-card{ padding:26px 20px; }
  .efh-ship{ width:110px; }
}
@media (prefers-reduced-motion: reduce){ .efh-zombie, .efh-ship{ animation:none; } }