@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(../vendor/fonts/fredoka-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF; }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(../vendor/fonts/fredoka-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F; }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url(../vendor/fonts/fredoka-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF; }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url(../vendor/fonts/fredoka-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F; }
:root {
  --ink: #1f2a3d; --soft: #5b6679; --glass: rgba(14, 26, 42, .72); --glass2: rgba(14, 26, 42, .55); --line: rgba(255, 255, 255, .12);
  --go: #1fa98c; --go2: #178a74; --gold: #ffc93c; --bad: #e8394b;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --font: 'Fredoka', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f2a44; color: #fff; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
canvas { display: block; }
#map, #fx { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
#fx { pointer-events: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------- Maç içi ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: calc(10px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.goal { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.gbar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: visible; }
.gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width .4s; }
#gLead { background: rgba(255,255,255,.35); } #gMe { background: var(--gold); z-index: 1; }
#gMark { position: absolute; top: -4px; width: 2px; height: 16px; background: #fff; border-radius: 1px; }
#gTxt { font-size: 12px; font-weight: 600; opacity: .9; white-space: nowrap; }
#clock { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
#clock.low { color: #ff8a8a; }
#lead { position: absolute; top: calc(10px + var(--st)); right: calc(10px + var(--sr)); margin: 0; padding: 6px; list-style: none; width: min(210px, 42vw);
  border-radius: 14px; background: var(--glass2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
#lead li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; font-weight: 600; border-radius: 8px; }
#lead li.me { background: rgba(255,255,255,.16); }
#lead li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#lead li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lead li em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .9; }
#feed { position: absolute; left: calc(10px + var(--sl)); top: calc(10px + var(--st)); display: flex; flex-direction: column; gap: 4px; max-width: min(300px, 44vw); pointer-events: none; }
#feed div { padding: 5px 10px; border-radius: 10px; background: var(--glass2); font-size: 13px; font-weight: 600; animation: fin .3s ease-out; }
#feed div.bad { background: rgba(200, 40, 55, .8); }
#feed div.good { background: rgba(23, 138, 116, .85); }
@keyframes fin { from { opacity: 0; transform: translateX(-12px); } }
#offers { position: absolute; right: calc(10px + var(--sr)); top: 40%; display: flex; flex-direction: column; gap: 8px; width: min(260px, 70vw); }
.offer { padding: 10px 12px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.3); animation: fin .3s ease-out; }
.offer p { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.offer div { display: flex; gap: 8px; }
.offer button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--go2); cursor: pointer; }
.offer button.no { background: rgba(255,255,255,.14); }
#banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); padding: 12px 22px; border-radius: 18px; background: var(--glass); font-size: 22px; font-weight: 700;
  text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap; }
#banner small { display: block; font-size: 14px; font-weight: 600; opacity: .85; }
/* alt panel: başparmakla kullanılır */
#panel { position: absolute; left: 50%; bottom: calc(10px + var(--sb)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 20px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0,0,0,.3);
  width: min(620px, calc(100vw - 20px)); }
.stat { display: flex; flex-direction: column; min-width: 72px; line-height: 1.1; }
.stat small { font-size: 11px; opacity: .75; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; opacity: .75; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.gold b { color: var(--gold); }
.ratio { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rtop { display: flex; justify-content: space-between; align-items: baseline; }
.rtop small { font-size: 11px; opacity: .75; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.rtop b { font-size: 16px; }
#ratio { width: 100%; height: 28px; margin: 0; accent-color: var(--gold); touch-action: none; }
.presets { display: flex; gap: 5px; }
.presets button { flex: 1; min-height: 30px; border: 0; border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.presets button.on { background: var(--gold); color: #3b2a00; }
.round { width: 52px; height: 52px; flex: none; border-radius: 16px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }
.round.small { position: absolute; width: 44px; height: 44px; font-size: 18px; background: var(--glass2); }
#homeBtn { right: calc(10px + var(--sr)); bottom: calc(130px + var(--sb)); }
#exitBtn { left: calc(10px + var(--sl)); bottom: calc(130px + var(--sb)); }
#exitBtn.arm { width: auto; padding: 0 12px; background: var(--bad); }
@media (max-width: 560px) {
  /* telefon: üstte asker · altın · inşa, altta tam genişlik oran çubuğu (başparmakla) */
  #panel { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: "tr gd bd" "rt rt rt"; gap: 6px 10px; padding: 10px 12px; }
  #panel .stat:first-child { grid-area: tr; } #panel .stat.gold { grid-area: gd; } #buildBtn { grid-area: bd; width: 48px; height: 48px; }
  #panel .ratio { grid-area: rt; }
  .stat { min-width: 0; } .stat b { font-size: 20px; }
  .presets button { min-height: 36px; }
  #homeBtn, #exitBtn { bottom: calc(168px + var(--sb)); }
  #palette { bottom: calc(178px + var(--sb)); max-height: calc(100dvh - 260px); overflow-y: auto; }
  /* telefon: üst çubuk tam genişlik, sıralama onun altında sağda (üst üste binmez) */
  #topbar { left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); transform: none; top: calc(8px + var(--st)); padding: 6px 12px; }
  .goal { min-width: 0; flex: 1; }
  #lead { top: calc(62px + var(--st)); width: 160px; } #lead li { font-size: 12px; padding: 2px 5px; } #lead li:nth-child(n+4):not(.me) { display: none; }
  #feed { top: calc(62px + var(--st)); max-width: calc(100vw - 190px); }
}
/* daire menü */
#radial { position: fixed; z-index: 30; width: 0; height: 0; }
#radial button { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 11px; font-weight: 700; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; animation: rpop .18s ease-out both; line-height: 1.05; text-align: center; padding: 4px; }
#radial button span { font-size: 20px; }
#radial button.center { width: 46px; height: 46px; font-size: 18px; background: rgba(255,255,255,.2); }
#radial .title { position: absolute; transform: translate(-50%, -150px); white-space: nowrap; padding: 4px 10px; border-radius: 10px; background: var(--glass); font-weight: 700; font-size: 14px; }
@keyframes rpop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* inşa paleti */
#palette { position: fixed; z-index: 25; left: 50%; bottom: calc(118px + var(--sb)); transform: translateX(-50%); width: min(620px, calc(100vw - 20px));
  padding: 10px; border-radius: 20px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pal button { display: flex; align-items: center; gap: 8px; padding: 8px; min-height: 56px; border: 0; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.pal button.sel { box-shadow: 0 0 0 2px var(--gold); background: rgba(255,201,60,.16); }
.pal button:disabled { opacity: .45; }
.pal button span { font-size: 24px; }
.pal button div { display: flex; flex-direction: column; min-width: 0; }
.pal b { font-size: 14px; } .pal small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal em { font-style: normal; font-size: 12px; color: var(--gold); font-weight: 700; }
@media (max-width: 560px) { .pal { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Menü / sonuç ---------- */
.screen { position: fixed; inset: 0; display: flex; padding: 16px; padding-top: calc(16px + var(--st)); padding-bottom: calc(16px + var(--sb)); overflow-y: auto; touch-action: pan-y;
  background: radial-gradient(ellipse at center, rgba(10, 25, 40, .25), rgba(10, 25, 40, .7)); z-index: 20; }
.screen > .card { margin: auto; }
.card { width: min(400px, 100%); background: rgba(255,255,255,.94); color: var(--ink); border-radius: 26px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 12px; text-align: center; animation: pop .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #eef1f6; }
.tabs a, .tabs span { flex: 1; min-height: 40px; display: grid; place-items: center; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--soft); text-decoration: none; }
.tabs .on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(31,42,61,.12); }
.logo { margin: 4px 0 0; font-size: 44px; letter-spacing: 3px; font-weight: 700; background: linear-gradient(90deg, #e8394b, #ffb300 40%, #1fa98c 70%, #4c6fff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
#nick { width: 100%; font: inherit; font-size: 18px; font-weight: 600; text-align: center; color: var(--ink); padding: 11px 14px; border: 3px solid #dfe4ec; border-radius: 16px; outline: none; user-select: text; -webkit-user-select: text; }
.btn { font: inherit; font-size: 18px; font-weight: 700; border: 0; border-radius: 16px; padding: 13px 16px; color: #fff; cursor: pointer; }
.btn.big { font-size: 24px; background: linear-gradient(180deg, var(--go), var(--go2)); box-shadow: 0 6px 0 #0f6655; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #0f6655; }
.btn.ghost { background: #e3e8f0; color: var(--soft); box-shadow: 0 4px 0 #c9d1dd; }
.btn:disabled { filter: grayscale(.5); opacity: .7; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modes button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; min-height: 62px; border: 0; border-radius: 16px;
  background: #f1f4f8; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #dde3ec; }
.modes button b { font-size: 15px; } .modes button small { font-size: 12px; color: var(--soft); font-weight: 600; }
.modes button.on { background: #fff6d8; box-shadow: 0 0 0 2px var(--gold), 0 3px 0 #e9cf7c; }
.modes button em { position: absolute; right: 8px; top: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #8a93a3; border-radius: 6px; padding: 1px 5px; }
.hint { margin: 0; font-size: 13px; color: var(--soft); font-weight: 600; }
.hint:empty { display: none; }
#endBox h2 { margin: 0; font-size: 34px; }
#endBox p { margin: 0; color: var(--soft); font-weight: 600; font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { background: #f1f4f8; border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; }
.stats b { font-size: 20px; } .stats span { font-size: 11px; color: var(--soft); font-weight: 700; text-transform: uppercase; }
.reward { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.reward span { padding: 7px 12px; border-radius: 12px; font-weight: 700; font-size: 17px; background: #fff6d8; color: #6b4b00; }
.reward span.x { background: #eaefff; color: #2e47b8; }
#toast { position: fixed; left: 50%; bottom: calc(175px + var(--sb)); transform: translate(-50%, 20px); z-index: 40; padding: 10px 16px; border-radius: 14px; background: rgba(14,26,42,.92);
  color: #fff; font-weight: 600; font-size: 15px; opacity: 0; transition: .25s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
/* panel (senaryo / özel oda / günlük) */
.card.sh { width: min(440px, 100%); text-align: left; max-height: calc(100dvh - 32px); overflow-y: auto; }
.shHead { display: flex; align-items: center; justify-content: space-between; }
.shHead h2 { margin: 0; font-size: 24px; }
.x { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #eef1f6; color: var(--soft); font-size: 16px; font-weight: 700; cursor: pointer; }
.opt { display: flex; flex-direction: column; gap: 6px; }
.opt label { font-size: 13px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .4px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #eef1f6; flex-wrap: wrap; }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; padding: 0 8px; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(31,42,61,.12); }
.scen { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: #f1f4f8; border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; color: var(--ink); box-shadow: 0 3px 0 #dde3ec; }
.scen span { font-size: 30px; } .scen b { display: block; font-size: 16px; } .scen small { color: var(--soft); font-weight: 600; font-size: 13px; }
.codeRow { display: flex; gap: 8px; } .codeRow input { flex: 1; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-align: center; padding: 10px; border: 3px solid #dfe4ec; border-radius: 14px; outline: none; user-select: text; -webkit-user-select: text; }
.board { display: flex; flex-direction: column; gap: 2px; }
.board div { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-weight: 600; }
.board div.me { background: #e6f7f2; } .board b { width: 28px; text-align: center; color: var(--soft); } .board span { flex: 1; } .board em { font-style: normal; font-weight: 700; }
.note { margin: 0; color: var(--soft); font-size: 13px; font-weight: 600; }
#waitBox { position: fixed; inset: 0; display: grid; place-items: center; z-index: 22; background: rgba(10, 25, 40, .35); padding: 16px; }
.card.wait { align-items: center; }
.card.wait small { color: var(--soft); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.card.wait > b { font-size: 44px; letter-spacing: 6px; }
.card.wait .row { display: flex; gap: 8px; width: 100%; } .card.wait .row .btn { flex: 1; }
.card.wait p { margin: 0; color: var(--soft); font-weight: 600; font-size: 14px; }
/* öğretici ipucu: alt panelin hemen üstünde, oka benzer kuyruk */
#tip { position: absolute; left: 50%; bottom: calc(118px + var(--sb)); transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 16px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); pointer-events: none; animation: tipIn .35s cubic-bezier(.2,1.4,.4,1); }
#tip::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: #fff; }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }
@media (max-width: 560px) { #tip { bottom: calc(178px + var(--sb)); font-size: 14px; } }
/* ihanet / saldırı alarmı: ekran kenarında kırmızı nabız */
#alarm { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(232, 57, 75, 0); z-index: 5; }
#alarm.on { animation: alarm 1.4s ease-out 2; }
@keyframes alarm { 0% { box-shadow: inset 0 0 0 0 rgba(232,57,75,0); } 25% { box-shadow: inset 0 0 70px 18px rgba(232,57,75,.75); } 100% { box-shadow: inset 0 0 0 0 rgba(232,57,75,0); } }
#sheet { background: rgba(10, 25, 40, .6); z-index: 24; }
#sheet .card { background: #fff; }
#shBody { display: flex; flex-direction: column; gap: 12px; }
#shBody .btn { width: 100%; }
#shBody .codeRow .btn { width: auto; }
/* bayrak */
.nickRow { display: flex; gap: 8px; align-items: stretch; } .nickRow #nick { flex: 1; min-width: 0; }
.flagBtn { flex: none; width: 64px; border: 3px solid #dfe4ec; border-radius: 14px; background: #fff; padding: 6px; cursor: pointer; display: grid; place-items: center; }
.flagBtn canvas { width: 42px; height: 28px; border-radius: 3px; }
.fed { display: flex; flex-direction: column; gap: 10px; }
.fed .big { display: grid; place-items: center; padding: 10px; background: #f1f4f8; border-radius: 16px; }
.fed .big canvas { width: 180px; height: 120px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; padding: 0; background: #f1f4f8; display: grid; place-items: center; }
.chips button.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.chips button canvas { width: 30px; height: 20px; border-radius: 2px; }
#lead li img { width: 18px; height: 12px; border-radius: 2px; flex: none; }
.fed .lbl { font-size: 12px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .4px; }
.row2 { display: flex; gap: 8px; } .row2 .btn { flex: 1; }
.chips button[style] { box-shadow: inset 0 0 0 1px rgba(31,42,61,.18); }
.chips button[style].on { box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(31,42,61,.3); }
.replay { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.replay canvas, .replay video { width: 100%; border-radius: 14px; background: #10263b; }
/* ---------- Klan Sezonu ---------- */
#sheet.wide .card.sh { width: min(560px, 100%); }
.btn.sm { font-size: 15px; padding: 10px 12px; }
.btn.big.sm { font-size: 16px; padding: 9px 14px; box-shadow: 0 4px 0 #0f6655; width: auto !important; flex: none; }
.btn.danger { color: var(--bad); }
.note.center { text-align: center; }
.sBan { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, #2d3a8c, #6b3fd6 55%, #d24fb4); box-shadow: 0 4px 0 #1f2766; }
.sBan > div:first-child { display: flex; flex-direction: column; line-height: 1.1; } .sBan b { font-size: 18px; } .sBan span { font-size: 12px; font-weight: 700; opacity: .85; }
.sBar { flex: 1; display: flex; gap: 3px; } .sBar i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); }
.sBar i.done { background: rgba(255,255,255,.7); } .sBar i.now { background: var(--gold); box-shadow: 0 0 8px rgba(255,201,60,.8); }
.sBan em { font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; background: rgba(0,0,0,.2); padding: 3px 8px; border-radius: 8px; }
.sMap { border-radius: 16px; overflow: hidden; background: #14304b; box-shadow: inset 0 0 0 1px rgba(31,42,61,.12); }
.sMap canvas { display: block; width: 100%; height: auto; cursor: pointer; touch-action: manipulation; }
.rInfo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f1f4f8; animation: fin .25s ease-out; }
.rInfo > div { flex: 1; display: flex; flex-direction: column; } .rInfo b { font-size: 17px; } .rInfo small { color: var(--soft); font-weight: 600; font-size: 13px; }
.rInfo img, .clanRow img, .cHead img, .cTop img { width: 24px; height: 16px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.muted { color: var(--soft); font-weight: 600; font-size: 12px; max-width: 150px; text-align: right; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 9px; background: #e3e8f0; color: var(--soft); white-space: nowrap; }
.pill.gold { background: #fff1c2; color: #7a5600; }
.how { display: grid; gap: 6px; }
.how div { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 12px; background: #f6f8fb; }
.how span { font-size: 20px; }
.clans { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.clanRow, .mem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f6f8fb; }
.clanRow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .clanRow b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clanRow small { color: var(--soft); font-weight: 600; font-size: 12px; }
.mini { min-width: 38px; height: 34px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; background: #e3e8f0; color: var(--ink); cursor: pointer; padding: 0 10px; }
.mini.go { background: var(--go); color: #fff; box-shadow: 0 3px 0 var(--go2); } .mini.ok { background: #d8f5ec; color: #0f6655; } .mini.no { background: #fde3e6; color: var(--bad); }
.mini:disabled { opacity: .5; }
.cHead { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #f1f4f8; }
.cHead img { width: 48px; height: 32px; border-radius: 4px; } .cHead > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cHead b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cHead small { color: var(--soft); font-weight: 600; font-size: 13px; }
.cHead .wk { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; border-radius: 12px; background: #fff6d8; }
.cHead .wk b { font-size: 20px; color: #7a5600; } .cHead .wk small { font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9a7a20; }
.seg .dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; }
.tgt { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #fff6d8; color: #5a4000; font-weight: 600; }
.tgt small { color: #8a6a10; font-size: 12px; } .tgt .warn { color: #b3261e; font-weight: 700; }
.mems { display: flex; flex-direction: column; gap: 4px; }
.mem span { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mem em { font-style: normal; font-weight: 700; color: var(--soft); font-size: 13px; }
.mem.me { background: #e6f7f2; }
.cTop div { gap: 8px; } .cTop em small { font-size: 10px; color: var(--soft); font-weight: 600; }
.cNew { display: flex; gap: 12px; align-items: flex-end; }
.cNew .flagBtn { width: 84px; height: 64px; } .cNew .flagBtn img { width: 60px; height: 40px; border-radius: 4px; }
.tagIn, .txtIn { font: inherit; font-size: 20px; font-weight: 700; padding: 10px 12px; border: 3px solid #dfe4ec; border-radius: 14px; outline: none; user-select: text; -webkit-user-select: text; color: var(--ink); width: 100%; box-sizing: border-box; }
.tagIn { letter-spacing: 4px; text-transform: uppercase; }
.rules summary { cursor: pointer; font-weight: 700; color: var(--soft); font-size: 13px; }
.rules p { margin: 6px 0 0; font-size: 13px; color: var(--soft); font-weight: 600; line-height: 1.45; }
.reward span.c { background: #efe6ff; color: #5b2fb8; }
.codeRow input#cQ { font-size: 16px; letter-spacing: 0; text-transform: none; text-align: left; font-weight: 600; }
#sheet.wide > .card { margin: 0 auto auto; } /* içerik değişince kart zıplamasın */
/* kozmetik seçimi */
.chips.cos button { width: 58px; height: 58px; position: relative; overflow: hidden; border-radius: 12px; }
.chips.cos button canvas { width: 100%; height: 100%; border-radius: 10px; }
.chips.cos button.locked canvas { filter: saturate(.55) brightness(.92); }
.chips.cos button em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: rgba(14,26,42,.72); padding: 1px 0; }
.fed .lbl .bal { float: right; text-transform: none; color: #7a5600; background: #fff6d8; padding: 1px 8px; border-radius: 8px; }
.cosAsk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff6d8; font-weight: 700; color: #5a4000; animation: fin .25s ease-out; }
.langMini { align-self: center; font: inherit; font-size: 13px; font-weight: 600; color: var(--soft); background: #eef1f6; border: 0; border-radius: 10px; padding: 6px 10px; cursor: pointer; }
html.rtl .card, html.rtl #feed, html.rtl .offer, html.rtl #toast, html.rtl #tip { direction: rtl; }
/* alt panelin gerçek yüksekliği (--ph, JS ölçer): düğmeler, palet ve ipucu her ekranda panelin üstünde kalır */
#homeBtn, #exitBtn { bottom: calc(var(--ph, 110px) + 20px + var(--sb)); }
#palette { bottom: calc(var(--ph, 110px) + 18px + var(--sb)); max-height: calc(100dvh - var(--ph, 110px) - 110px); overflow-y: auto; }
#tip { bottom: calc(var(--ph, 110px) + 22px + var(--sb)); }
#toast { bottom: calc(var(--ph, 110px) + 76px + var(--sb)); }
html[dir="rtl"] #ratio, html[dir="rtl"] .gbar, html[dir="rtl"] .presets, html[dir="rtl"] .sBar { direction: ltr; }
/* yatay telefon: menü iki sütun (sol: sekme, logo, ad, OYNA · sağ: modlar) — kaydırmadan her şey görünür */
@media (max-height: 520px) and (orientation: landscape) {
  #menu .card { width: min(800px, 100%); display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 16px; row-gap: 10px; align-items: start;
    grid-template-areas: "tabs modes" "logo modes" "nick modes" "play modes" "online lang"; padding: 14px 18px; }
  #menu .tabs { grid-area: tabs; } #menu .logo { grid-area: logo; font-size: 34px; margin: 0; } #menu .nickRow { grid-area: nick; }
  #menu #playBtn { grid-area: play; } #menu #modes { grid-area: modes; } #menu #online { grid-area: online; align-self: center; } #menu #langSel { grid-area: lang; justify-self: end; }
  #menu .modes button { min-height: 54px; padding: 8px 10px; }
}
/* davet (arkadaşını çağır, kazan) */
.inviteBtn { font: inherit; font-size: 15px; font-weight: 700; color: #6b4b00; background: linear-gradient(180deg, #fff3c4, #ffe28a); border: 0; border-radius: 14px; padding: 11px 14px; cursor: pointer; box-shadow: 0 3px 0 #e2c15c; }
.inviteBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #e2c15c; }
.refHero { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; text-align: center; color: #fff; background: linear-gradient(135deg, #ff8a3d, #e8394b 55%, #b3268f); box-shadow: 0 4px 0 #8a1f5a; }
.refHero b { font-size: 20px; } .refHero p { margin: 0; font-weight: 600; font-size: 14px; opacity: .95; }
.refHero .btn.ghost { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.rstep { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #f6f8fb; font-weight: 600; font-size: 14px; }
.rstep i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: var(--go); color: #fff; font-weight: 700; }
.rstep span { flex: 1; } .rstep em { font-style: normal; font-weight: 700; color: #7a5600; font-size: 13px; }
.rbar { height: 10px; border-radius: 5px; background: #eef1f6; overflow: hidden; } .rbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ff8a3d); border-radius: 5px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: #f6f8fb; font-size: 13px; }
.tier small { color: var(--soft); font-weight: 700; } .tier.got { background: #e6f7f2; box-shadow: inset 0 0 0 2px var(--go); }
.mem em.bad { color: var(--bad); }
@media (max-height: 520px) and (orientation: landscape) { #menu .inviteBtn { grid-area: online; } #menu #online { display: none; } }
.refHero .row2 .btn { min-width: 0; font-size: 16px; padding: 12px 8px; line-height: 1.15; }
.refHero .row2 .btn.big { box-shadow: 0 4px 0 #0f6655; }