:root {
  --ink: #0c1230;
  --glass: rgba(14, 20, 56, .78);
  --line: rgba(255, 255, 255, .16);
  --cyan: #42f5c8;
  --blue: #3d8bff;
  --ery: #0f6db0;
  --amber: #ffc93c;
  --pink: #ff6b86;
  --txt: #eef3ff;
  --dim: #a9b5e0;
  --u: clamp(11px, 2.4vh, 18px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--txt);
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--u); line-height: 1.25;
  touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* ───────── ekranlar ───────── */
.screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  animation: fade .25s ease both;
}
.screen.dim { background: rgba(8, 10, 34, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#s-title { background: linear-gradient(180deg, rgba(8, 10, 34, .25), rgba(8, 10, 34, .6)); }
#s-levels, #s-how, #s-about, #s-cards { background: rgba(8, 10, 34, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel {
  background: var(--glass); border: 2px solid var(--line); border-radius: 1.5em; padding: 1.5em 1.8em;
  box-shadow: 0 1.2em 3em rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  width: min(26em, 100%); max-height: 100%; overflow-y: auto; text-align: center;
}
.panel.wide { width: min(46em, 100%); }
.panel h2 { font-size: 1.9em; font-weight: 800; margin-bottom: .5em; letter-spacing: .01em; }
.panel h2 small { font-size: .55em; color: var(--dim); font-weight: 700; margin-left: .4em; }
.row { display: flex; gap: .7em; justify-content: center; flex-wrap: wrap; margin-top: 1.1em; }
.menu { display: flex; flex-direction: column; gap: .65em; align-items: stretch; }
.dim { color: var(--dim); }
.lead { font-size: 1.1em; color: var(--txt); margin: .2em 0 .6em; }

/* ───────── başlık ───────── */
.title-wrap { display: flex; align-items: center; gap: 2.2em; }
.hero-col { display: flex; flex-direction: column; align-items: center; }
#heroCv { width: clamp(150px, 42vh, 330px); height: auto; aspect-ratio: 6 / 5; filter: drop-shadow(0 .8em 1.2em rgba(0, 0, 0, .45)); }
.nameplate { margin-top: .2em; padding: .2em .9em .25em; border-radius: 2em; background: var(--glass); border: 2px solid rgba(47, 155, 234, .7); font-size: .82em; font-weight: 700; color: #dfefff; white-space: nowrap; }
.nameplate b { color: #fff; background: var(--ery); border-radius: 1em; padding: 0 .55em; margin-right: .45em; letter-spacing: .08em; }
.erylogo { display: block; height: clamp(54px, 16vh, 128px); width: auto; margin-bottom: .1em; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)) drop-shadow(0 0 18px rgba(120, 190, 255, .35)); }   /* koyu zeminde siyah "SYSTEM" yazısı okunsun: beyaz hale */
.foot { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); text-align: center; font-size: .8em; font-weight: 700; letter-spacing: .14em; color: rgba(223, 239, 255, .7); text-shadow: 0 1px 4px #000; }
.brand { font-weight: 800; letter-spacing: .32em; font-size: .95em; color: var(--cyan); text-shadow: 0 0 1em rgba(66, 245, 200, .6); }
.brand.ok { color: #5dffa8; }
.logo {
  font-size: clamp(44px, 15vh, 112px); font-weight: 800; line-height: .95; letter-spacing: -.01em; margin: .05em 0 .12em; color: var(--cyan);
  text-shadow: 0 .045em 0 #1c4fd1, 0 .09em 0 #142a8a, 0 .14em 0 var(--ink), 0 .22em .35em rgba(0, 0, 0, .5);
}
/* "V" turkuaz, "ERY" beyaz */
.logo span { color: #fff; }
/* oyunun alt adı: kahramanın adının altında şerit */
.logo small {
  display: block; width: fit-content; margin: .16em 0 .1em; padding: .2em .7em .12em; border-radius: .35em; transform: skewX(-8deg);
  font-size: .3em; line-height: 1; font-weight: 800; letter-spacing: .2em; color: #fff; background: linear-gradient(90deg, #0f6db0, #2f9bea);
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .35); box-shadow: 0 .18em 0 #06365c, 0 .4em .8em rgba(0, 0, 0, .4);
}
.tag { font-size: 1.25em; color: #dfe8ff; margin-bottom: 1.1em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
#s-title .menu { width: min(21em, 100%); }

.row3 { display: flex; gap: .45em; }
.row3 .btn { flex: 1 1 auto; font-size: .8em; padding: .6em .45em; white-space: nowrap; }
/* hakkında */
.about .erylogo { height: clamp(44px, 11vh, 90px); margin: 0 auto .3em; }
.about p { font-weight: 500; font-size: 1.02em; line-height: 1.4; margin: 0 auto .7em; max-width: 38em; color: #e6edff; }
.about p b { color: var(--cyan); font-weight: 800; }
.facts { display: flex; gap: .5em; justify-content: center; flex-wrap: wrap; margin: .2em 0 1em; }
.facts span { padding: .2em .85em; border-radius: 2em; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font-size: .88em; font-weight: 700; color: var(--dim); }
.facts b { color: #fff; }
.gift { margin-top: .2em; padding-top: .9em; border-top: 1px solid var(--line); font-weight: 800; font-size: 1.08em; color: #fff; letter-spacing: .01em; }
.gift small { display: block; margin-top: .25em; font-size: .8em; font-weight: 700; letter-spacing: .08em; color: var(--cyan); }
.whoami { margin-top: .8em; display: inline-flex; align-items: center; gap: .8em; padding: .35em .5em .35em .9em; border-radius: 2em; background: var(--glass); border: 2px solid var(--line); font-size: .95em; font-weight: 700; color: #dfe8ff; }
.whoami b { color: #fff; }
.btn.small { padding: .35em .9em; font-size: .9em; border-radius: 1.6em; background: rgba(66, 245, 200, .18); border-color: rgba(66, 245, 200, .7); color: #ccfff0; box-shadow: none; }
.btn.small:hover { background: rgba(66, 245, 200, .32); }
.link { color: var(--cyan); font-weight: 700; text-decoration: underline; font-size: 1em; padding: .2em .1em; }
.field {
  width: 100%; margin: .7em 0 .2em; padding: .55em .8em; border-radius: .7em; border: 2px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .95); color: #10173d;
  font: 800 1.35em "Baloo 2", system-ui, sans-serif; text-align: center; outline: none; user-select: text; -webkit-user-select: text; touch-action: auto;
}
.field:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(66, 245, 200, .25); }
.err { min-height: 1.4em; color: #ffb3c0; font-weight: 700; font-size: .92em; margin-bottom: .5em; }
#s-name { background: rgba(8, 10, 34, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#s-name .link { margin-top: .8em; }
#s-board { background: rgba(8, 10, 34, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ───────── lider tablosu ───────── */
.board { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: .35em .7em; text-align: left; }
.brow { display: flex; align-items: center; gap: .6em; padding: .28em .7em .28em .35em; border-radius: .7em; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font-weight: 700; }
.brow i { flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .9em; background: rgba(255, 255, 255, .12); }
.brow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow b { font-weight: 800; color: var(--amber); }
.brow.top1 i { background: linear-gradient(180deg, #ffe58a, #f0a81e); color: #4a2c00; }
.brow.top2 i { background: linear-gradient(180deg, #f1f5ff, #a9b5d6); color: #1c2447; }
.brow.top3 i { background: linear-gradient(180deg, #ffc49a, #c9783a); color: #3d1c00; }
.brow.me { background: rgba(66, 245, 200, .16); border-color: rgba(66, 245, 200, .7); }
.board p { grid-column: 1 / -1; padding: .8em 0; }
.board-me { margin-top: .7em; font-weight: 700; color: #dfe8ff; min-height: 1.3em; }
.board-me b { color: var(--cyan); }
#f-board { margin-bottom: .2em; }
.scorebox { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin: 0 auto .8em; padding: .45em 1.2em; border-radius: 1em; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .45); width: fit-content; max-width: 100%; }
.sc-main small { display: block; font-size: .68em; font-weight: 800; letter-spacing: .14em; color: var(--amber); }
.sc-main b { display: block; font-size: 2.3em; line-height: 1; color: #fff; text-shadow: 0 .05em 0 #b06a00; }
.sc-side { display: flex; flex-direction: column; text-align: left; font-weight: 700; font-size: .92em; }
.sc-side em { font-style: normal; color: var(--dim); font-size: .88em; font-weight: 500; }
.btn.gold { background: linear-gradient(180deg, #ffd75e, #f0a01e); color: #3d2600; border-color: rgba(255, 255, 255, .55); box-shadow: 0 .28em 0 #9a5f00, 0 .5em 1em rgba(240, 160, 30, .35); }
.btn.gold:active { box-shadow: 0 .08em 0 #9a5f00; }
.btn:disabled { opacity: .6; cursor: wait; }
.ico-sc { font-style: normal; color: var(--amber); font-size: 1.05em; line-height: 1; }

/* ───────── düğmeler ───────── */
.btn {
  font-weight: 800; font-size: 1.15em; padding: .55em 1.3em; border-radius: .85em; color: #fff;
  background: linear-gradient(180deg, #3a468f, #262f6b); border: 2px solid rgba(255, 255, 255, .2);
  box-shadow: 0 .28em 0 #121843, 0 .5em 1em rgba(0, 0, 0, .35); transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(.2em); box-shadow: 0 .08em 0 #121843; }
.btn.primary { background: linear-gradient(180deg, #46f7cd, #12b98a); color: #05301f; border-color: rgba(255, 255, 255, .55); box-shadow: 0 .28em 0 #0a7a5a, 0 .5em 1.2em rgba(18, 185, 138, .45); font-size: 1.35em; }
.btn.primary:active { box-shadow: 0 .08em 0 #0a7a5a; }
.btn.ghost { background: rgba(255, 255, 255, .07); box-shadow: none; }
.btn:focus-visible, .ibtn:focus-visible, .lv:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ───────── bölüm kartları ───────── */
/* paylaşım */
.sh-img { display: block; width: 100%; max-width: 640px; margin: .3em auto .7em; border-radius: .8em; border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 .5em 1.5em rgba(0, 0, 0, .45); background: rgba(0, 0, 0, .25); aspect-ratio: 1200 / 630; }
.sh-text { display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: .7em .9em; border-radius: .8em; border: 2px solid var(--line); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .95em; line-height: 1.4; resize: vertical; }
.sh-text:focus { outline: none; border-color: var(--cyan); }
.btn.wa { background: linear-gradient(180deg, #4fe08a, #1fb35c); color: #06351a; border-color: rgba(255, 255, 255, .45); }
.sh-side { display: flex; flex-direction: column; gap: .6em; width: 100%; max-width: 640px; margin: 0 auto; }
.sh-msg { margin: 0; min-height: 0; }
.sh-actions { margin-top: .2em; }
/* Telefon (yatay): görsel solda, düğmeler sağda ve EN ÜSTTE; metin altta — paylaş düğmesi kaydırmadan görünür */
@media (max-height: 430px) {
  #s-share .panel { padding: .7em 1em; }
  #s-share h2 { font-size: 1.3em; margin-bottom: .3em; }
  .sh-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .8em; align-items: start; }
  .sh-img { margin: 0; max-width: none; }
  .sh-side { gap: .4em; }
  .sh-actions { order: -1; margin: 0; }
  .sh-actions .btn { padding: .5em .9em; font-size: .92em; }
  .sh-text { font-size: .8em; line-height: 1.3; }
  .sh-text[rows] { height: 5.2em; }
}
/* kahraman seçimi */
.hcards { display: flex; gap: 1em; justify-content: center; margin: .6em 0 .9em; }
.hcard { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .7em .9em .8em; border-radius: 1.1em; color: #fff; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 .3em 0 rgba(0, 0, 0, .35); cursor: pointer; transition: transform .12s, border-color .12s; }
.hcard canvas { width: clamp(90px, 22vh, 160px); height: auto; aspect-ratio: 4 / 5; }
.hcard b { font-size: 1.15em; letter-spacing: .06em; }
.hcard small { color: var(--dim); font-weight: 600; }
.hcard:hover { transform: translateY(-.25em); }
.hcard.sel { border-color: var(--cyan); box-shadow: 0 .3em 0 rgba(0, 0, 0, .35), 0 0 1em rgba(66, 245, 200, .45); }
#lv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.lv {
  position: relative; border-radius: 1.1em; padding: .9em .6em 1em; text-align: center; color: #fff; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .28); box-shadow: 0 .3em 0 rgba(0, 0, 0, .35); transition: transform .12s;
}
.lv:not(.locked):hover { transform: translateY(-.25em); }
.lv .n { font-size: 2.6em; font-weight: 800; line-height: 1; text-shadow: 0 .08em 0 rgba(0, 0, 0, .3); }
.lv .nm { font-weight: 800; font-size: 1.05em; margin-top: .2em; }
.lv .sb { font-size: .8em; opacity: .85; }
.lv .sp { display: flex; gap: .2em; justify-content: center; flex-wrap: wrap; margin-top: .5em; }
.lv .sp span { width: 2.3em; height: 1.3em; background: #fff; border-radius: .35em; padding: .12em .2em; overflow: hidden; opacity: .6; }
.lv .sp span.on { opacity: 1; box-shadow: 0 0 .5em rgba(255, 255, 255, .7); }
.lv .st { margin-top: .4em; font-size: 1.2em; letter-spacing: .1em; }
.lv .st i { font-style: normal; color: rgba(255, 255, 255, .3); }
.lv .st i.on { color: var(--amber); text-shadow: 0 0 .5em rgba(255, 201, 60, .8); }
.lv.locked { filter: grayscale(.85) brightness(.55); cursor: not-allowed; }
.lv.locked .st { letter-spacing: 0; font-size: .85em; }
.lv.t-net { background: linear-gradient(170deg, #35429a, #8b61b3 60%, #f38d6c); }
.lv.t-dc { background: linear-gradient(170deg, #14204d, #1d3672 55%, #c98a2a); }
.lv.t-cloud { background: linear-gradient(170deg, #2a86f5, #63b8ff 60%, #d8f0ff); }
.lv.t-sec { background: linear-gradient(170deg, #2f0b3b, #6f1547 55%, #c4344b); }

/* ───────── nasıl oynanır / koleksiyon ───────── */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; text-align: left; }
.how h3 { color: var(--cyan); font-size: 1.1em; margin-bottom: .3em; }
.how p { margin: .32em 0; font-weight: 500; }
kbd { display: inline-block; min-width: 1.7em; text-align: center; padding: 0 .4em; border-radius: .4em; background: #2a3478; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 .15em 0 #121843; font: inherit; font-weight: 700; font-size: .9em; }
.c-red { color: #ff8fa3; }
.c-green { color: #5dffa8; } .c-blue { color: #6fe3ff; } .c-amber { color: var(--amber); } .c-pink { color: var(--pink); }

/* Logo kapları sabit boyutludur; logo oranını bozmadan içine sığar. */
.lg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lgtxt { font-size: .62em; line-height: 1; color: var(--ery); font-weight: 800; text-align: center; }
.lgbox { flex: none; width: 4.6em; height: 2.4em; background: #fff; border-radius: .6em; padding: .3em .45em; overflow: hidden; }
#cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; text-align: left; }
#s-cards .panel { width: min(64em, 100%); }
.pc { display: flex; gap: .55em; align-items: center; padding: .4em .5em; border-radius: .8em; background: rgba(255, 255, 255, .09); border: 1px solid var(--line); }
.pc b { display: block; font-size: .88em; line-height: 1.15; }
.pc small { display: block; color: var(--dim); font-size: .7em; font-weight: 500; line-height: 1.2; }
.pc.off { background: rgba(255, 255, 255, .04); }
.pc:not(.off) { border-color: rgba(93, 255, 168, .55); background: rgba(93, 255, 168, .1); }
.pc:not(.off) b::after { content: ' ✓'; color: #5dffa8; }
.pc.off b { color: #cfd8f5; }
.sub { font-size: .9em; color: var(--dim); font-weight: 700; margin: 1em 0 .4em; letter-spacing: .08em; text-transform: uppercase; }
.lgstrip { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; }
.lgstrip span { width: 4.9em; height: 2.2em; background: #fff; border-radius: .5em; padding: .28em .42em; overflow: hidden; }
#f-logos { margin: .7em 0 .2em; }
#f-logos span { width: 4.1em; height: 1.9em; }
a.btn { text-decoration: none; display: inline-block; }

/* ───────── bölüm sonu raporu ───────── */
.stars { font-size: 3.2em; line-height: 1; letter-spacing: .12em; margin: .1em 0 .25em; }
.stars i { font-style: normal; display: inline-block; color: rgba(255, 255, 255, .18); }
.stars i.on { color: var(--amber); text-shadow: 0 0 .4em rgba(255, 201, 60, .9), 0 .06em 0 #b06a00; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.stars i.on:nth-child(2) { animation-delay: .22s; } .stars i.on:nth-child(3) { animation-delay: .44s; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.goals { display: flex; gap: .5em; justify-content: center; flex-wrap: wrap; margin-bottom: .8em; }
.goals span { padding: .15em .8em; border-radius: 2em; font-size: .85em; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--dim); border: 1px solid var(--line); }
.goals span.on { background: rgba(93, 255, 168, .16); color: #5dffa8; border-color: rgba(93, 255, 168, .5); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.stats div { background: rgba(255, 255, 255, .07); border-radius: .8em; padding: .45em .3em; }
.stats b { display: block; font-size: 1.5em; line-height: 1.1; }
.stats small { color: var(--dim); font-size: .78em; font-weight: 500; }
.tip { margin-top: .8em; padding: .55em .9em; border-radius: .8em; background: rgba(66, 245, 200, .1); border: 1px solid rgba(66, 245, 200, .35); font-size: .92em; font-weight: 500; text-align: left; }
.tip b { color: var(--cyan); }

/* ───────── HUD ───────── */
#hud { position: fixed; inset: 0; pointer-events: none; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
.hud-l, .hud-r { position: absolute; top: max(8px, env(safe-area-inset-top)); display: flex; gap: .45em; align-items: center; }
.hud-l { flex-wrap: wrap; max-width: 46vw; }
.hud-l { left: max(10px, env(safe-area-inset-left)); } .hud-r { right: max(10px, env(safe-area-inset-right)); }
.pill { display: flex; align-items: center; gap: .3em; height: 2.3em; padding: 0 .75em; border-radius: 2em; background: var(--glass); border: 2px solid var(--line); font-weight: 800; font-size: 1.05em; box-shadow: 0 .2em .6em rgba(0, 0, 0, .3); }
#hearts svg { width: 1.25em; height: 1.25em; transition: transform .2s; }
#hearts svg.off { opacity: .28; filter: grayscale(1); transform: scale(.82); }
.ico-bit { width: 1.1em; height: 1.2em; background: linear-gradient(180deg, #fff3a0, #ffab1a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
#bits b { min-width: 1.6em; text-align: left; }
#bits.pulse { animation: pulse .25s; }
@keyframes pulse { 50% { transform: scale(1.14); } }
#powers { display: flex; gap: .3em; flex-basis: 100%; flex-wrap: wrap; }
.pw { position: relative; width: 3.9em; height: 2.4em; background: #fff; border-radius: .6em; padding: .22em .35em .5em; overflow: hidden; border: 2px solid var(--ery); box-shadow: 0 .2em .6em rgba(0, 0, 0, .3); animation: fade .25s both; }
.pw em { position: absolute; left: .3em; right: .3em; bottom: .18em; height: .2em; background: #d5dceb; border-radius: 1em; overflow: hidden; }
.pw em i { display: block; height: 100%; width: 100%; background: #12b98a; }
.pw em i.hold { background: var(--ery); }
#cards { gap: .25em; padding: 0 .4em; }
.sc { width: 2.5em; height: 1.55em; background: #fff; border-radius: .42em; padding: .14em .24em; overflow: hidden; opacity: .32; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; }
.sc.on { opacity: 1; filter: none; box-shadow: 0 0 .6em rgba(255, 255, 255, .85); animation: pulse .4s; }
.ibtn { pointer-events: auto; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--glass); border: 2px solid var(--line); display: grid; place-items: center; box-shadow: 0 .2em .6em rgba(0, 0, 0, .3); }
.ibtn svg { width: 1.2em; height: 1.2em; fill: #fff; }
.ibtn:active { transform: scale(.92); }

#bossbar { position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(22em, 40vw); text-align: center; }
#bossbar span { font-weight: 800; letter-spacing: .2em; font-size: .8em; color: #ffd0d6; text-shadow: 0 2px 4px #000; }
#bossbar .bar { height: .85em; border-radius: 1em; background: rgba(10, 4, 20, .8); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden; }
#bossbar .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a6e, #ffb84a); transition: width .35s; }

#hint, #toast { position: absolute; left: 50%; transform: translate(-50%, .6em); opacity: 0; transition: opacity .3s, transform .3s; text-align: center; font-weight: 700; max-width: 90vw; }
#hint { top: 27%; padding: .4em 1.1em; border-radius: 2em; background: var(--glass); border: 2px solid rgba(66, 245, 200, .5); color: #e6fff8; font-size: 1.05em; }
#toast { top: 38%; font-size: 1.7em; font-weight: 800; color: #fff; text-shadow: 0 .08em 0 var(--ink), 0 0 .8em rgba(93, 255, 168, .9); white-space: nowrap; }
#hint.on, #toast.on { opacity: 1; transform: translate(-50%, 0); }

#spop { position: absolute; left: 50%; top: 3.6em; transform: translate(-50%, -1em) scale(.92); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); display: flex; gap: .8em; align-items: center; padding: .55em .9em .55em .6em; border-radius: 1.1em; background: var(--glass); border: 2px solid rgba(47, 155, 234, .8); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .45); max-width: 92vw; text-align: left; }
#spop.on { opacity: 1; transform: translate(-50%, 0); }
#spop .lgbox { width: 7em; height: 3.4em; padding: .35em .5em; }
#spop small { display: block; font-size: .68em; font-weight: 800; letter-spacing: .12em; color: #7fd0ff; }
#spop b { display: block; font-size: 1.35em; line-height: 1.1; }
#spop p { font-size: .88em; font-weight: 500; color: #dfe8ff; }
#banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .4s, transform .4s; text-align: center; width: min(34em, 92vw); }
#banner.on { opacity: 1; transform: translate(-50%, -50%); }
#banner small { font-weight: 800; letter-spacing: .3em; color: var(--cyan); }
#banner b { display: block; font-size: 3.4em; line-height: 1; font-weight: 800; text-shadow: 0 .06em 0 #1c4fd1, 0 .12em 0 var(--ink), 0 .2em .4em rgba(0, 0, 0, .6); }
#banner p { margin-top: .5em; font-size: 1.1em; font-weight: 700; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#flash.red { animation: fl .35s; background: radial-gradient(transparent 40%, rgba(255, 40, 70, .55)); }
#flash.green { animation: fl .8s; background: radial-gradient(rgba(93, 255, 168, .25), rgba(93, 255, 168, .6)); }
@keyframes fl { from { opacity: 1; } to { opacity: 0; } }

/* ───────── dokunmatik ───────── */
/* Görünen düğmeler küçük ve sadedir; dokunma alanı ekranın alt köşelerini kaplar (parmak düğmeyi tam tutturmak zorunda değil). */
#touch { position: fixed; inset: 0; pointer-events: none; --tb: clamp(50px, 16vh, 64px); --tj: clamp(60px, 19vh, 78px); --tm: max(12px, env(safe-area-inset-bottom)); }
#pad, .tzone, .tbtn { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#pad { position: absolute; left: 0; bottom: 0; width: 44%; height: 64%; }
.tzone { position: absolute; right: 0; bottom: 0; width: 44%; height: 64%; }
.pv { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: var(--tm); display: flex; gap: 12px; }
.pv span, .tv, .tbtn { display: grid; place-items: center; padding: 0; border-radius: 50%; color: rgba(255, 255, 255, .88); background: rgba(10, 16, 44, .34); border: 1.5px solid rgba(255, 255, 255, .36); transition: background .08s, transform .08s; }
.pv span { width: var(--tb); height: var(--tb); }
.tv { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: var(--tm); width: var(--tj); height: var(--tj); }
.tbtn.fire { position: absolute; right: calc(max(18px, env(safe-area-inset-right)) + var(--tj) + 14px); bottom: var(--tm); width: var(--tb); height: var(--tb); border-color: rgba(127, 208, 255, .7); }
#touch svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#pad[data-dir="-1"] .l, #pad[data-dir="1"] .r, .tzone.on .tv, .tbtn.on { background: rgba(66, 245, 200, .45); border-color: rgba(255, 255, 255, .85); color: #fff; transform: scale(.94); }

#perf { position: fixed; left: 8px; bottom: 8px; z-index: 60; display: none; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #7dffb0; font: 600 12px ui-monospace, Menlo, monospace; pointer-events: none; }
#rotate { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: var(--ink); text-align: center; font-size: 3em; }
#rotate p { font-size: .4em; font-weight: 700; margin-top: .5em; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }

/* ───────── dar/alçak ekranlar ───────── */
@media (max-width: 760px), (max-height: 430px) {
  .title-wrap { gap: 1em; }
  #heroCv { width: clamp(130px, 30vw, 220px); }   /* dar ekranda iki kahraman menüyü sıkıştırmasın */
  .foot { display: none; }                          /* alçak ekranda alt yazı yerine oyuncu adı kutusu görünsün */
  .whoami { margin-top: .45em; font-size: .88em; padding: .25em .4em .25em .8em; }
  .btn.small { padding: .3em .8em; font-size: .88em; }
  .nameplate { white-space: normal; text-align: center; max-width: 240px; line-height: 1.25; }
  #lv-grid { grid-template-columns: repeat(4, 1fr); gap: .5em; }
  .how { gap: .9em; }
  #cards-grid { grid-template-columns: repeat(3, 1fr); }
  .panel { padding: 1em 1.1em; }
}
@media (max-width: 560px) {
  .board { grid-template-rows: none; grid-auto-flow: row; }
  .title-wrap { flex-direction: column; text-align: center; }
  #lv-grid { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  #cards-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }