/* Entrika — darbe afişi / baskı kâğıdı havası */
:root {
  --kagit:#e8dfca; --kagit2:#f2ebd9; --murekkep:#1a1410; --soluk:#6e6150; --kirmizi:#b3261e; --kirmizi2:#8f1c16;
  --cizgi:#1a1410; --gold:#c9962b; --yesil:#3f6b4f;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--kagit); color:var(--murekkep); font:16px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif; }
body {
  min-height:100dvh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 90% 95%, rgba(120,90,40,.12), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#uyg { max-width:520px; margin:0 auto; padding:16px 16px 48px; }

h1 { font:800 54px/.95 var(--serif); letter-spacing:-.02em; margin:14px 0 6px; text-transform:uppercase; }
h1.kucuk { font-size:28px; margin:0; }
h1 + .soluk { font-size:15px; margin:0 0 6px; }
h2 { font:600 12px/1 "Segoe UI",system-ui,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--murekkep); margin:24px 0 10px; display:flex; align-items:center; gap:10px; }
h2::after { content:""; flex:1; border-top:1.5px solid var(--cizgi); }
.soluk { color:var(--soluk); font-size:14px; }
.ortala { text-align:center; }

input[type=text] { width:100%; padding:13px 14px; border-radius:2px; border:2px solid var(--cizgi); background:var(--kagit2); color:var(--murekkep); font:600 18px var(--serif); }
input[type=text]::placeholder { color:#9a8d79; font-weight:400; }
input[type=text]:focus { outline:3px solid var(--kirmizi); outline-offset:1px; }
button { font:inherit; color:inherit; cursor:pointer; }

.btn { display:block; width:100%; padding:13px 16px; border-radius:2px; border:2px solid var(--cizgi); background:var(--kagit2); font-weight:700; letter-spacing:.04em; text-align:center; box-shadow:3px 3px 0 var(--cizgi); transition:transform .08s, box-shadow .08s; }
.btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--cizgi); }
.btn.vurgu { background:var(--kirmizi); color:#fbf4e4; border-color:var(--cizgi); text-transform:uppercase; letter-spacing:.12em; }
.btn.kirmizi { background:var(--kirmizi); color:#fbf4e4; }
.btn.ince { padding:9px 12px; font-weight:600; box-shadow:2px 2px 0 var(--cizgi); font-size:14px; }
.btn:disabled { opacity:.4; box-shadow:none; }
.satir { display:flex; gap:10px; } .satir > * { flex:1; }

.kart { background:var(--kagit2); border:2px solid var(--cizgi); border-radius:2px; padding:12px; box-shadow:3px 3px 0 var(--cizgi); }
.kod { font:800 52px/1 var(--serif); letter-spacing:.18em; text-align:center; padding:12px 0 14px; color:var(--kirmizi); }

.liste { display:flex; flex-direction:column; gap:9px; }
.oyuncu-satir { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--kagit2); border:1.5px solid var(--cizgi); border-radius:2px; }
.oyuncu-satir.sira { border-width:2px; background:#f7e3b8; box-shadow:3px 3px 0 var(--kirmizi); }
.oyuncu-satir.elendi { opacity:.45; text-decoration:line-through; text-decoration-thickness:1px; }
.nokta { width:9px; height:9px; background:var(--yesil); transform:rotate(45deg); } .nokta.kapali { background:#a89c88; }
.ad { font:700 17px var(--serif); }
.rozet { font:600 10.5px "Segoe UI",sans-serif; letter-spacing:.14em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--cizgi); background:transparent; color:var(--murekkep); }
.altin { margin-left:auto; font:800 19px var(--serif); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.altin::before { content:""; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f1cf6d, var(--gold) 70%); border:1.5px solid var(--cizgi); }
.kartlar-mini { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.mini { width:20px; height:27px; border-radius:2px; border:1.5px solid var(--cizgi); background:repeating-linear-gradient(135deg,var(--murekkep) 0 2px,#3a2e25 2px 5px); }
.mini.acik { width:auto; height:auto; padding:2px 7px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; background:var(--kagit); color:var(--soluk); text-decoration:line-through; }

.ik { width:1em; height:1em; vertical-align:-.14em; flex:none; }

/* Oyun kartı */
.el { display:flex; gap:12px; margin:8px 0 4px; }
.karakter { position:relative; flex:1; border-radius:4px; padding:22px 8px 12px; border:2.5px solid var(--cizgi); background:var(--kagit2); min-height:128px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; box-shadow:4px 4px 0 var(--cizgi); overflow:hidden; }
.karakter::before { content:""; position:absolute; left:0; right:0; top:0; height:9px; background:var(--c, var(--murekkep)); border-bottom:2px solid var(--cizgi); }
.karakter::after { content:""; position:absolute; inset:14px 5px 5px; border:1px solid rgba(26,20,16,.35); border-radius:2px; pointer-events:none; }
.karakter .simge { font-size:40px; color:var(--c, var(--murekkep)); line-height:1; display:grid; place-items:center; }
.karakter b { font:800 16px var(--serif); text-transform:uppercase; letter-spacing:.03em; }
.karakter small { color:var(--soluk); font-size:11.5px; line-height:1.3; position:relative; z-index:1; }
.karakter.acik { opacity:.5; filter:grayscale(1); box-shadow:none; }
.karakter.acik::after { content:"AÇIK"; position:absolute; inset:auto; right:8px; bottom:8px; border:none; font:800 10px sans-serif; letter-spacing:.2em; color:var(--kirmizi); }
.karakter.sec { outline:4px solid var(--kirmizi); outline-offset:2px; }
button.karakter { font:inherit; color:inherit; }

/* Oyun ekranı */
.durum { color:var(--soluk); font-size:12.5px; letter-spacing:.04em; margin:6px 0; }
.son { font:600 15px/1.35 var(--serif); padding:10px 12px; border-left:5px solid var(--kirmizi); background:var(--kagit2); margin:6px 0 14px; }
.panel { background:var(--kagit2); border:2px solid var(--cizgi); border-radius:2px; padding:14px 12px; box-shadow:4px 4px 0 var(--cizgi); }
.panel > h2:first-child { margin-top:0; }
.panel .btn { background:var(--kagit); }
.panel .btn.kirmizi { background:var(--kirmizi); }
.log { max-height:190px; overflow:auto; font-size:13.5px; color:var(--soluk); display:flex; flex-direction:column; gap:4px; }
.log div:last-child { color:var(--murekkep); font-weight:600; }
details.kart summary { cursor:pointer; font-weight:700; letter-spacing:.06em; }
.not { padding:10px 12px; background:var(--kagit); border:1.5px dashed var(--cizgi); font-size:14.5px; }
.uyari { border:2px solid var(--kirmizi); color:var(--kirmizi2); background:#f6dcc8; font-weight:600; }
.hamle-btn { text-align:left; display:flex; flex-direction:column; gap:2px; }
.hamle-btn span { font:800 16px var(--serif); }
.hamle-btn small { color:var(--soluk); font-weight:400; letter-spacing:0; line-height:1.3; }
.anahtar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; background:var(--kagit2); border:1.5px solid var(--cizgi); border-radius:2px; margin-bottom:9px; }
.anahtar span { font-weight:700; } .anahtar small { color:var(--soluk); display:block; font-weight:400; }
.anahtar input { width:24px; height:24px; accent-color:var(--kirmizi); flex:none; }
.ust { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; border-bottom:3px double var(--cizgi); padding-bottom:8px; }
.ust .soluk { font:700 15px var(--serif); letter-spacing:.2em; margin-right:auto; margin-left:14px; }
.sade { background:none; border:none; color:var(--murekkep); padding:6px 4px; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.ust .sade { width:30px; height:30px; border:2px solid var(--cizgi); border-radius:50%; text-decoration:none; font-weight:800; padding:0; }

.modal { position:fixed; inset:0; background:rgba(26,20,16,.6); display:flex; align-items:flex-end; z-index:10; }
.modal > div { background:var(--kagit); border-top:3px solid var(--cizgi); width:100%; max-height:86dvh; overflow:auto; padding:16px; max-width:520px; margin:0 auto; }
.yardim-satir { padding:10px 0; border-bottom:1px solid rgba(26,20,16,.25); font-size:14.5px; } .yardim-satir b { font:800 16px var(--serif); }
select { width:100%; padding:10px; border-radius:2px; background:var(--kagit); color:var(--murekkep); border:2px solid var(--cizgi); font-size:16px; margin-top:6px; }
.kazanan { text-align:center; padding:22px 0; font:800 28px/1.1 var(--serif); text-transform:uppercase; color:var(--kirmizi); }
.karakter em { font:600 11px sans-serif; font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--soluk); position:relative; z-index:1; }