Takas Teklifi
Oyuncu takas teklif ediyor...
/* ═══ RESPONSIVE & HUD FIXES ═══ */ /* 1. HUD sağ taraf — flex-shrink kontrolü ve overflow */ .h-r{display:flex;align-items:center;gap:clamp(3px,.5vw,8px);margin-left:auto;flex-shrink:0;min-width:0;flex-wrap:nowrap} .h-gold{display:flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--c-gold);font-weight:700;flex-shrink:0;white-space:nowrap} #hud-kd-badge{flex-shrink:0} /* 2. HUD Pet rozeti */ #hud-pet{display:none;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:.65rem;cursor:pointer;transition:.18s;color:var(--c-muted);flex-shrink:0;white-space:nowrap} #hud-pet:hover{border-color:rgba(168,85,247,.5);color:var(--c-text);background:rgba(168,85,247,.08)} #hud-pet .hp-icon{font-size:.88rem;line-height:1} #hud-pet .hp-lv{font-size:.52rem;font-weight:700;color:rgba(255,255,255,.4)} /* 3. Günlük Ödül HUD butonu */ #dr-hud-btn{display:none;align-items:center;gap:3px;padding:3px 8px;border-radius:7px;border:1px solid rgba(242,99,24,.35);background:rgba(242,99,24,.08);color:var(--c-ember);font-size:.62rem;font-weight:800;cursor:pointer;transition:.2s;flex-shrink:0;white-space:nowrap;line-height:1} #dr-hud-btn:hover{background:rgba(242,99,24,.18);border-color:rgba(242,99,24,.6)} #dr-hud-btn.pulse{animation:dr-pulse 1.5s ease infinite} @keyframes dr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,99,24,.5)}50%{box-shadow:0 0 0 5px rgba(242,99,24,0)}} /* 4. h-vit max-width kısıtlaması tablet için */ @media(max-width:900px){.h-vit{max-width:clamp(80px,14vw,160px)}} @media(max-width:700px){.h-vit{display:none}} /* 5. h-nav kademeli gizleme — tablet orta */ @media(max-width:700px) and (min-width:481px){ .h-nav .hn:not(#hn-char):not([data-p="quest"]):not([data-p="market"]):not([data-p="kingdom"]){display:none} } /* Daha küçük mobil: tüm h-nav gizle */ @media(max-width:480px){.h-nav{display:none}} /* 6. HUD sağdaki elemanlar — ekran boyutuna göre gizle/göster */ @media(max-width:520px){ #hud-kd-badge{display:none!important} .h-srv{display:none} #lang-btn{display:none} } @media(max-width:400px){ #hud-pet{display:none!important} } /* 7. Skill bar actbar — min-width:0 ile overflow engelleme */ .skills{display:flex;align-items:center;gap:clamp(3px,.6vw,7px);flex:1;justify-content:center;min-width:0;overflow:hidden} /* 8. Pet panel sekmeleri responsive */ .pet-tab{padding:4px 10px;border:none;border-radius:6px;background:transparent;color:var(--c-muted);font-size:.62rem;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap} .pet-tab.on{background:var(--c-e2);color:var(--c-ember)} /* 9. Daily reward modal — mobil uyumlu */ #daily-reward-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:12px} #daily-reward-modal.open{display:flex} .dr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px)} .dr-box{position:relative;z-index:1;background:linear-gradient(160deg,#0E0E1F,#14142A);border:1px solid rgba(255,200,50,.2);border-radius:16px;padding:18px 16px 16px;width:100%;max-width:440px;box-shadow:0 0 60px rgba(242,99,24,.12)} .dr-title{text-align:center;font-size:1rem;font-weight:900;color:#F2C318;letter-spacing:.04em;margin-bottom:3px} .dr-sub{text-align:center;font-size:.58rem;color:rgba(255,255,255,.35);margin-bottom:12px} .dr-streak{text-align:center;font-size:.68rem;font-weight:700;color:var(--c-ember);margin-bottom:12px} .dr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:14px} @media(max-width:420px){.dr-grid{grid-template-columns:repeat(4,1fr)}} .dr-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);position:relative} .dr-day.claimed{border-color:rgba(116,220,100,.3);background:rgba(116,220,100,.07)} .dr-day.claimed::after{content:'✓';position:absolute;top:2px;right:3px;font-size:.45rem;color:#74DC64;font-weight:900} .dr-day.today{border-color:rgba(242,99,24,.55);background:rgba(242,99,24,.1);box-shadow:0 0 10px rgba(242,99,24,.18)} .dr-day.special{border-color:rgba(242,195,24,.45);background:rgba(242,195,24,.07)} .dr-day-num{font-size:.48rem;font-weight:700;color:rgba(255,255,255,.3)} .dr-day-icon{font-size:1.1rem;line-height:1} .dr-day-gold{font-size:.45rem;color:var(--c-gold);font-weight:700} .dr-day-xp{font-size:.45rem;color:#74DC64;font-weight:700} .dr-day-label{font-size:.42rem;color:rgba(255,255,255,.35);text-align:center;line-height:1.3} .dr-claim-btn{width:100%;padding:10px;border:none;border-radius:10px;font-size:.82rem;font-weight:900;cursor:pointer;transition:.2s;letter-spacing:.03em} .dr-claim-btn.can-claim{background:linear-gradient(135deg,#C94D0E,#F26318);color:#fff;box-shadow:0 3px 16px rgba(242,99,24,.35)} .dr-claim-btn.can-claim:hover{transform:translateY(-1px)} .dr-claim-btn.already-claimed{background:rgba(255,255,255,.05);color:rgba(255,255,255,.25);cursor:not-allowed} .dr-next-claim{text-align:center;font-size:.58rem;color:rgba(255,255,255,.25);margin-top:8px} .dr-close{position:absolute;top:8px;right:12px;background:none;border:none;color:rgba(255,255,255,.3);font-size:.9rem;cursor:pointer;padding:4px;line-height:1} .dr-close:hover{color:#fff} .dr-reward-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2100;background:linear-gradient(160deg,#1A1A30,#23234A);border:2px solid rgba(242,195,24,.45);border-radius:14px;padding:20px 28px;text-align:center;pointer-events:none;animation:dr-pop .5s cubic-bezier(.2,1.6,.4,1) forwards} @keyframes dr-pop{from{opacity:0;transform:translate(-50%,-60%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} /* 10. Pet panel — katalog grid mobil */ .catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:6px 0} @media(min-width:481px){.catalog-grid{grid-template-columns:repeat(3,1fr)}} /* 11. Genel panel scroll ve p-body */ .p-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 12. .actbar responsive */ @media(max-width:380px){ .ab-vit{display:none} } @media(max-width:320px){ .sk-slot{width:36px;height:36px} }
Oyuncu takas teklif ediyor...