:root { --pk-ink: #e9e2cf; --pk-muted: #a59d88; --pk-gold: #d2a24c; --pk-red: #c0392b; --pk-bg: #07090c; --pk-panel: rgba(14, 16, 19, .94); --pk-line: rgba(210, 162, 76, .28); color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--pk-bg); color: var(--pk-ink); font: 15px/1.5 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#game, #viewport { position: fixed; inset: 0; }
#viewport canvas { display: block; width: 100%; height: 100%; }
#viewport:focus { outline: none; }
/* telefonda sahnede sürükleme tarayıcıya kaydırma/yakınlaştırma olarak gitmesin (yoksa pointercancel bakışı keser) */
#viewport, #viewport canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .78) 100%); }
#danger { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; box-shadow: inset 0 0 160px rgba(160, 10, 10, .85); }
button, input { font: inherit; color: inherit; }
button { background: rgba(255, 255, 255, .06); border: 1px solid var(--pk-line); border-radius: 4px; padding: .55em 1.1em; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--pk-gold); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--pk-gold); color: #120d06; border-color: var(--pk-gold); font-weight: 600; }
kbd { border: 1px solid var(--pk-line); border-radius: 3px; padding: 0 .35em; font: 12px ui-monospace, monospace; color: var(--pk-gold); }
.micro { display: block; font-size: 10px; letter-spacing: .14em; color: var(--pk-muted); }
.fine { color: var(--pk-muted); font-size: 13px; }
a { color: var(--pk-gold); }
/* giriş */
.landing { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 30% 20%, rgba(80, 40, 12, .35), transparent 60%), rgba(4, 5, 7, .82); overflow: auto; }
.landing-inner { max-width: 640px; }
.eyebrow { letter-spacing: .2em; font-size: 12px; color: var(--pk-gold); text-transform: uppercase; }
h1 { font: 600 clamp(48px, 9vw, 92px)/1 Georgia, "Times New Roman", serif; color: var(--pk-gold); margin: 0 0 .2em; letter-spacing: .04em; }
h1 span { display: block; font: italic 400 20px/1.6 Georgia, serif; color: var(--pk-ink); letter-spacing: 0; }
.lead { color: #cfc6b0; }
.field { display: grid; gap: 4px; margin: 14px 0; max-width: 320px; }
.field span { font-size: 12px; color: var(--pk-muted); }
.field select, .field input:not([type=range]) { background: rgba(0, 0, 0, .4); border: 1px solid var(--pk-line); border-radius: 4px; padding: .5em .7em; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.status { min-height: 1.5em; color: var(--pk-muted); }
.how { margin-top: 18px; color: #cfc6b0; }
.how summary { cursor: pointer; color: var(--pk-gold); }
.how li { margin: .4em 0; }
/* gösterge */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-top { position: absolute; top: 12px; left: 16px; right: 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; text-shadow: 0 1px 3px #000; }
.hud-top .center { text-align: center; } .hud-top .right { text-align: right; }
#lies { font-size: 20px; letter-spacing: .25em; color: var(--pk-gold); }
#nose { font-size: 13px; color: var(--pk-ink); }
#room { display: block; font: italic 17px Georgia, serif; }
.timer { display: block; color: #ff8a70; font-weight: 600; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255, 240, 210, .7); }
.prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); background: rgba(0, 0, 0, .55); padding: .3em .8em; border-radius: 3px; font: 14px ui-monospace, monospace; white-space: nowrap; }
.hold { position: absolute; left: 50%; top: calc(50% + 66px); width: 140px; height: 4px; transform: translateX(-50%); background: rgba(255, 255, 255, .15); }
.hold i { display: block; height: 100%; width: 0; background: var(--pk-gold); }
.subtitle { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: min(720px, 90vw); text-align: center; font: italic 22px Georgia, serif; color: #f0b0a0; text-shadow: 0 2px 6px #000; margin: 0; }
.toasts { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(560px, 92vw); }
.toasts li { background: rgba(10, 12, 14, .82); border-left: 3px solid var(--pk-gold); padding: .4em .8em; font-size: 14px; animation: in .25s ease-out; }
.toasts li.k1 { border-color: #6fb3d9; } .toasts li.k2 { border-color: var(--pk-red); }
@keyframes in { from { opacity: 0; transform: translateY(-6px); } }
.hud-bottom { position: absolute; bottom: 14px; left: 16px; right: 190px; /* sağ alt: AdoGame rozeti */ display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.items { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.items li { min-width: 120px; background: rgba(10, 12, 14, .8); border: 1px solid var(--pk-line); border-radius: 4px; padding: .35em .6em; font-size: 13px; }
.items li.sel { border-color: var(--pk-gold); box-shadow: 0 0 0 1px var(--pk-gold); }
.items li.key { color: var(--pk-gold); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
.pills span { background: rgba(10, 12, 14, .7); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: .2em .7em; font-size: 12px; }
.pills span:empty { display: none; }
/* paneller */
dialog.panel { background: var(--pk-panel); color: var(--pk-ink); border: 1px solid var(--pk-line); border-radius: 6px; max-width: min(620px, 94vw); padding: 22px 24px; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.panel h2 { font: 400 24px/1.3 Georgia, serif; margin: .2em 0 .6em; }
.kicker { font-size: 11px; letter-spacing: .16em; color: var(--pk-red); margin: 0; }
.question h2 { color: #f2d0c0; font-size: 28px; }
.qbar { height: 3px; background: rgba(255, 255, 255, .1); margin-bottom: 12px; } .qbar i { display: block; height: 100%; background: var(--pk-red); width: 100%; }
#q-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
#q-opts button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 12px; }
#q-opts button small { color: var(--pk-muted); }
#q-opts button.s1 { border-color: rgba(210, 162, 76, .5); } #q-opts button.s2 { border-color: rgba(192, 57, 43, .6); } #q-opts button.s3 { border-color: var(--pk-red); color: #f09080; }
.keypad .digits input { width: 100%; font: 600 40px/1.2 ui-monospace, monospace; letter-spacing: .5em; text-align: center; background: #000; border: 1px solid var(--pk-line); border-radius: 4px; padding: .2em; }
.note #n-text { font: italic 20px/1.5 Georgia, serif; color: #2a1d0f; background: #e8dcb8; padding: 18px; border-radius: 2px; transform: rotate(-.6deg); }
.end table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.end th, .end td { text-align: left; padding: .3em .4em; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.end pre { white-space: pre-wrap; font-size: 12px; color: var(--pk-muted); max-height: 200px; overflow: auto; }
@media (max-width: 700px) { .hud-top { grid-template-columns: 1fr 1fr; } .hud-top .center { display: none; } .items li { min-width: 0; } }
.join { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.join input { flex: 1; background: rgba(0, 0, 0, .4); border: 1px solid var(--pk-line); border-radius: 4px; padding: .5em .7em; font-family: ui-monospace, monospace; text-transform: uppercase; }
#l-code { font-family: ui-monospace, monospace; color: var(--pk-gold); letter-spacing: .08em; }
#l-players { padding-left: 1.2em; } #l-players li.off { color: var(--pk-muted); }
/* dolap aralığı: iki kapak arasındaki dar dikey yarık; kenarlar ahşap karanlığı */
/* dolap: iki kapak arasındaki aralık (ekranın ~%30u); kenarlar ahşap kapak gölgesi, üst-alt kararır */
#peek { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 5, 3, .92) 0, transparent 16%, transparent 84%, rgba(8, 5, 3, .92) 100%); }
#peek i { position: absolute; inset: 0; background: linear-gradient(90deg, #0b0705 0, #140c07 calc(50% - 19vw), #2a1a0e calc(50% - 15.5vw), rgba(42, 26, 14, .55) calc(50% - 14.5vw), transparent calc(50% - 12.5vw), transparent calc(50% + 12.5vw), rgba(42, 26, 14, .55) calc(50% + 14.5vw), #2a1a0e calc(50% + 15.5vw), #140c07 calc(50% + 19vw), #0b0705 100%); }
/* dokunmatik: solda yürüme kolu, sağ yarıda sürükleyerek bakış, sağ altta düğmeler */
/* dokunmatik (yatay): GH Football telefon düzeniyle aynı parça. Solda sabit yürüme kolu (halka + topuz), sağ %55 sürükleyerek bakış;
   sağ altta koyu yuvarlak yazılı düğmeler ve büyük açık renkli Etkileş (Football'daki Şut gibi); üstte Menü ve Tam ekran. */
#hud { z-index: 3; }
#touch { position: fixed; inset: 0; z-index: 2; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch .tzone { position: absolute; top: 0; bottom: 0; touch-action: none; }
#t-move { left: 0; width: 45%; top: 18%; }
#t-look { right: 0; width: 55%; }
#touch button { touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.t-actions { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); display: grid;
  grid-template-columns: 58px 58px 80px; grid-template-rows: 58px 58px; gap: 10px; align-items: center; z-index: 1; }
.t-actions button { width: 58px; height: 58px; min-width: 0; padding: 0; border-radius: 50%; border: 1.5px solid #ffffff59; background: #0b1118b8;
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1.1; }
.t-actions button:active { transform: scale(.94); background: var(--pk-gold); color: #120d06; }
.t-actions button[aria-pressed=true] { border-color: var(--pk-gold); color: var(--pk-gold); }
.t-actions #t-throw { grid-area: 1 / 1; } .t-actions #t-light { grid-area: 1 / 2; } .t-actions #t-crouch { grid-area: 2 / 1; } .t-actions #t-run { grid-area: 2 / 2; }
.t-actions .t-main { grid-area: 1 / 3 / 3 / 4; justify-self: center; width: 80px; height: 80px; border: 0; background: #e6cf9c; color: #120d06; font-size: 14px; }
.t-actions .t-main.hold { animation: pk-hold 1s ease-in-out infinite; font-size: 12px; }
@keyframes pk-hold { 50% { box-shadow: 0 0 0 7px rgba(210, 162, 76, .3); } }
.t-actions #t-whisper { position: absolute; right: 0; bottom: calc(100% + 10px); width: 80px; height: 40px; border-radius: 20px; }
#touch .t-top { position: absolute; top: 10px; z-index: 1; width: 40px; height: 40px; padding: 0; border-radius: 8px; border: 1.5px solid #ffffff59;
  background: #0b1118b8; color: #fff; font-size: 18px; line-height: 1; }
#t-menu { right: calc(max(14px, env(safe-area-inset-right)) + 150px); }
#t-full { right: calc(max(14px, env(safe-area-inset-right)) + 198px); }
/* yürüme kolu: GH Football ile aynı görünüm (saydam halka + açık renk topuz), sol altta sabit */
#t-move .stick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: calc(24px + env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%; background: #0b111866; border: 2px solid #ffffff6b; box-sizing: border-box; pointer-events: none; }
#t-move .stick i { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #ffffffd9; box-shadow: 0 2px 8px #0008; }
#t-move .stick.on { border-color: #ffffffa8; }
body.touch .items li { pointer-events: auto; }
/* telefonda klavye ipuçları yok; dokunmatik karşılıkları görünür */
.only-touch { display: none; } body.touch .only-touch { display: inline; } body.touch p.only-touch { display: block; } body.touch .only-keys, body.touch #q-opts kbd { display: none; }
body.touch .prompt { top: calc(50% + 24px); }
body.touch .pills span:not(#p-state) { display: none; } /* fener/duruş dokunmatikte düğmelerde görünür */
/* eşya çubuğu ve durum: altta ortada (PUBG hızlı yuvaları gibi); AdoGame imzası en altta ortada */
body.touch #hud .hud-bottom { left: 50%; right: auto; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); justify-content: center; }
body.touch.playing .game-brand-credit.game-brand-credit { left: 50%; right: auto; bottom: calc(2px + env(safe-area-inset-bottom)); transform: translateX(-50%) scale(.85); }
/* oyun sırasında site gizlilik düğmesi yürüme kolunun altında kalmasın: menüde "Gizlilik tercihleri" var */
body.playing .gh-privacy-reopen { display: none !important; } /* oyun sırasında (masaüstü ve telefon) eşya çubuğunu örtmesin; menüde "Gizlilik tercihleri" var */
.linkish { background: none; border: 0; padding: 0; color: var(--pk-gold); text-decoration: underline; font: inherit; }
/* dikey telefonda: yan çevir ekranı (Android'de tam ekran + yatay kilit çoğunlukla bunu gereksiz kılar) */
#rotate { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(5, 4, 3, .96); color: var(--pk-ink); text-align: center; padding: 24px; }
#rotate[hidden] { display: none; }
#rotate p { font: 600 22px/1.3 Georgia, serif; color: var(--pk-gold); margin: 0; }
#rotate span { color: var(--pk-muted); font-size: 14px; }
.rotate-phone { width: 46px; height: 80px; border: 3px solid var(--pk-gold); border-radius: 9px; animation: pk-rotate 1.8s ease-in-out infinite; }
@keyframes pk-rotate { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.rotate-block #touch, body.rotate-block #hud { visibility: hidden; }
/* oyun sırasında fare imleci gizli; menü/sorgu/not pencereleri açıkken görünür */
body.playing, body.playing #viewport, body.playing #hud { cursor: none; }

/* envanter (çanta) */
dialog.inv { width: min(560px, 94vw); }
.inv-slots { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-slots li { min-height: 92px; border: 1px solid var(--pk-line); border-radius: 6px; background: rgba(0, 0, 0, .35); display: grid; place-items: center; text-align: center; padding: 8px; cursor: pointer; font-size: 13px; }
.inv-slots li .ic { font-size: 30px; line-height: 1.1; display: block; }
.inv-slots li.empty { color: var(--pk-muted); cursor: default; border-style: dashed; }
.inv-slots li.sel { border-color: var(--pk-gold); box-shadow: 0 0 0 1px var(--pk-gold) inset; }
.inv-slots li.inhand::after { content: 'elinde'; display: block; font-size: 10px; color: var(--pk-gold); letter-spacing: .1em; }
.inv-list { padding-left: 1.2em; margin: 6px 0 12px; font-size: 13px; }
.inv-list.notes li { margin-bottom: 6px; white-space: pre-wrap; }
/* düğmelerde yazı yerine işaret (GH Football düzeni korunur) */
#touch button svg { width: 50%; height: 50%; fill: currentColor; pointer-events: none; }
.t-actions .t-main svg { width: 46%; height: 46%; }
#t-bag { right: calc(max(14px, env(safe-area-inset-right)) + 246px); }
.inv-slots li img.ic { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 4px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.inv-list img.ic-sm { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.landing-inner { padding-bottom: 72px; } /* 375 px: site gizlilik düğmesi "Yapım ve lisanslar" bağlantısının üstüne binmesin */