/* ═══════════════════════════════════════════════
   RAKUN — dolaylı anlatmaca
   koyu mürekkep / asit yeşili / damga kırmızısı
   ═══════════════════════════════════════════════ */

:root {
  --ink: #0A1B21;
  --ink-2: #0E262C;
  --panel: #0F2A31;
  --line: #1D4750;
  --paper: #EDE6D3;
  --paper-ink: #17130A;
  --leak: #2EC4B6;
  --leak-dim: #1FA396;
  --danger: #E4572E;
  --gold: #FFC145;
  --txt: #F3EAD3;
  --muted: #7FA8A1;
  --font-display: 'Baloo 2', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: Nunito, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--txt);
  font-family: var(--font-body);
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #12343c 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 110%, #101b12 0%, transparent 55%),
    var(--ink);
  min-height: 100dvh;
  user-select: none;
  -webkit-user-select: none;
}

/* ── atmosfer katmanları ── */
.noise {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanline {
  position: fixed; inset: 0; z-index: 51; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
}

.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* ── ekran sistemi ── */
#app { min-height: 100dvh; }
.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  padding: calc(16px + var(--sat)) 20px calc(20px + var(--sab));
  max-width: 560px;
  margin: 0 auto;
}
.screen.active { display: flex; animation: screenIn .38s cubic-bezier(.2,.9,.3,1) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── butonlar ── */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  border: none;
  border-radius: 4px;
  padding: 17px 22px;
  cursor: pointer;
  width: 100%;
  transition: transform .12s, box-shadow .12s, opacity .2s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(2px) scale(.985); }
.btn:disabled { opacity: .3; pointer-events: none; }
.btn-primary {
  background: var(--leak);
  color: #06262B;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 24px rgba(46,196,182,.22);
}
.btn-success {
  background: var(--leak);
  color: #06262B;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  font-size: 17px;
  padding: 19px 22px;
  box-shadow: 0 0 28px rgba(46,196,182,.3);
}
.btn-danger {
  background: var(--danger);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.btn-outline {
  background: transparent;
  color: var(--txt);
  border: 1.5px solid var(--line);
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-small { padding: 10px; font-size: 13px; }

/* ── topbar ── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.btn-back {
  background: var(--panel); color: var(--txt);
  border: 1px solid var(--line); border-radius: 4px;
  width: 42px; height: 42px; font-size: 20px; cursor: pointer;
  flex-shrink: 0;
}
.topbar-title {
  font-size: 13px; letter-spacing: .3em; color: var(--muted);
}
.topbar-title::before { content: "▸ "; color: var(--leak); }

/* ═══════════ SPLASH ═══════════ */
#screen-splash { justify-content: center; align-items: center; text-align: center; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 22vw, 110px);
  line-height: .92;
  letter-spacing: -.02em;
}
.logo-line { color: var(--txt); }
.logo-leak {
  color: var(--leak);
  text-shadow: 0 0 30px rgba(46,196,182,.55);
  position: relative;
  animation: leakFlicker 4s infinite steps(1);
}
@keyframes leakFlicker {
  0%, 91%, 94.5%, 100% { opacity: 1; }
  92%, 94% { opacity: .35; }
}
.logo-bar {
  width: 130px; height: 5px; background: var(--danger);
  margin: 14px 0 4px;
  transform: skewX(-18deg);
}
.tagline { color: var(--muted); font-size: 13px; letter-spacing: .12em; }
.splash-desc {
  margin: 26px 0 30px;
  font-size: 16px;
  line-height: 1.65;
  color: #B9C4CE;
}
.splash-desc em { color: var(--leak); font-style: normal; border-bottom: 1.5px dashed var(--leak-dim); }

/* ── damgalar ── */
.stamp {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--danger);
  border: 4px solid var(--danger);
  border-radius: 6px;
  padding: 6px 18px;
  letter-spacing: .28em;
  text-indent: .28em;
  transform: rotate(-8deg);
  opacity: .92;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -0.08'/%3E%3C/filter%3E%3Crect width='120' height='120' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 130px;
}
.stamp-gizli { font-size: 15px; margin-bottom: 18px; }
.stamp-result, .stamp-final {
  font-size: clamp(30px, 9vw, 44px);
  padding: 12px 26px;
  animation: stampSlam .45s cubic-bezier(.15,1.6,.4,1) both;
}
.stamp-final { text-align: center; line-height: 1.15; transform: rotate(-7deg); }
.stamp-green { color: var(--leak); border-color: var(--leak); }
.stamp-gray  { color: var(--muted); border-color: var(--muted); }
@keyframes stampSlam {
  0% { transform: rotate(-8deg) scale(2.6); opacity: 0; }
  60% { transform: rotate(-8deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: .92; }
}

/* açılış kademeli reveal */
.reveal-1, .reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6 {
  animation: rise .55s cubic-bezier(.2,.9,.3,1) both;
}
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .16s; }
.reveal-3 { animation-delay: .3s; }
.reveal-4 { animation-delay: .44s; }
.reveal-5 { animation-delay: .58s; }
.reveal-6 { animation-delay: .7s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.stamp.reveal-1 { animation-name: stampRise; }
.stamp.reveal-2 { animation-name: stampSlam; animation-delay: .3s; animation-duration: .5s; }
@keyframes stampRise {
  from { opacity: 0; transform: rotate(-8deg) translateY(18px); }
  to   { opacity: .92; transform: rotate(-8deg); }
}

/* ═══════════ MODE ═══════════ */
.mode-cards { display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: center; }
.mode-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--leak);
  border-radius: 6px;
  padding: 24px 22px 20px;
  text-align: left;
  color: var(--txt);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.mode-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.045) 45%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.mode-card:active { transform: scale(.98); }
.mode-card:hover::after { transform: translateX(100%); }
.mode-card-team { border-left-color: var(--danger); }
.mode-tag { font-size: 11px; color: var(--muted); letter-spacing: .25em; }
.mode-icon { font-size: 30px; }
.mode-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; letter-spacing: .02em;
}
.mode-desc { font-size: 14.5px; line-height: 1.55; color: #A9B4BF; }
.mode-min { font-size: 11px; color: var(--leak-dim); letter-spacing: .15em; margin-top: 4px; }
.mode-card-team .mode-min { color: var(--danger); }

/* ═══════════ PLAYERS ═══════════ */
.players-body { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.add-row { display: flex; gap: 10px; }
#input-player {
  flex: 1;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s;
}
#input-player:focus { border-color: var(--leak); box-shadow: 0 0 0 3px rgba(46,196,182,.12); }
#input-player::placeholder { color: var(--muted); }
.btn-add {
  width: 52px; border-radius: 4px; border: none;
  background: var(--leak); color: #06262B;
  font-size: 26px; font-weight: 800; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-add:active { transform: scale(.93); }

.player-list { display: flex; flex-wrap: wrap; gap: 9px; }
.p-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 8px 8px 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  animation: chipIn .25s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes chipIn { from { opacity: 0; transform: scale(.6); } }
.p-chip .p-x {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-2); color: var(--muted);
  border: none; cursor: pointer; font-size: 13px; line-height: 1;
}
.p-chip .p-x:active { background: var(--danger); color: #fff; }
.hint { font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.hint.hint-ok { color: var(--leak-dim); }

/* takım paneli */
.team-panel {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: start;
}
.team-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: .2em; margin-bottom: 8px; text-align: center;
}
.team-a { color: var(--leak); }
.team-b { color: var(--danger); }
.team-vs { align-self: center; color: var(--muted); font-size: 12px; }
.team-drop {
  min-height: 90px;
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.team-drop .t-chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-mono); font-size: 13.5px;
  padding: 8px 10px; text-align: center; cursor: pointer;
  transition: transform .12s;
}
.team-drop .t-chip:active { transform: scale(.95); }
[data-team="0"] .t-chip { border-left: 3px solid var(--leak); }
[data-team="1"] .t-chip { border-left: 3px solid var(--danger); }

/* ayarlar */
.settings {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-label { font-size: 12px; letter-spacing: .25em; color: var(--muted); }
.seg { display: flex; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button {
  background: transparent; border: none; color: var(--muted);
  font-family: var(--font-mono); font-size: 13.5px;
  padding: 9px 16px; cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button.on { background: var(--leak); color: #06262B; font-weight: 600; }

.bottombar { padding-top: 16px; }

/* kelime paketleri — kart grid */
.setting-col { flex-direction: column; align-items: stretch; gap: 10px; }
.setting-col .setting-label small { color: var(--leak-dim); letter-spacing: .05em; }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-all {
  background: none; border: 1px solid var(--line); border-radius: 100px;
  color: var(--leak-dim); font-size: 11px; letter-spacing: .08em;
  padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
.deck-all:active { background: rgba(46,196,182,.1); }
.deck-search {
  width: 100%;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 10px 13px;
  outline: none;
}
.deck-search:focus { border-color: var(--leak); }
.deck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 264px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* alt kenarda solma: devamı olduğunu hissettir */
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
}
.deck-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 11px 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
  min-width: 0;
}
.deck-card:active { transform: scale(.97); }
.deck-card .deck-state {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 1.5px solid var(--line); border-radius: 5px;
  display: grid; place-items: center;
  font-size: 11px; color: #06262B;
  transition: background .15s, border-color .15s;
}
.deck-card .deck-name {
  flex: 1; min-width: 0;
  color: var(--txt);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.deck-card .deck-count { font-size: 10.5px; color: var(--muted); opacity: .8; flex-shrink: 0; }
.deck-card.on {
  border-color: rgba(46,196,182,.4);
  border-left-color: var(--leak);
  color: var(--txt);
  background: rgba(46,196,182,.06);
}
.deck-card.on .deck-state { background: var(--leak); border-color: var(--leak); }
.settings.locked .deck-card, .settings.locked .deck-all { cursor: default; pointer-events: none; }

/* ═══════════ BRIEFING ═══════════ */
#screen-briefing { justify-content: center; }
.brief-inner { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.round-no { color: var(--muted); letter-spacing: .3em; font-size: 13px; }

.dossier {
  position: relative;
  width: 100%;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  padding: 30px 22px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(120,90,20,.08);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(23,19,10,.05) 26px 27px);
  transform: rotate(-1.2deg);
  animation: dossierIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes dossierIn {
  from { opacity: 0; transform: rotate(-1.2deg) translateY(30px) scale(.94); }
  to   { opacity: 1; transform: rotate(-1.2deg); }
}
.dossier-clip {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 22px;
  background: #2c2c2c; border-radius: 4px 4px 0 0;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.5);
}
.dossier-head { font-size: 11px; letter-spacing: .35em; color: #8a7f65; margin-bottom: 18px; }
.brief-role { display: flex; flex-direction: column; gap: 3px; }
.role-label { font-size: 11px; letter-spacing: .3em; color: var(--danger); font-weight: 600; }
.role-label-green { color: #4f7d12; }
.role-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 8vw, 36px);
  line-height: 1.1;
}
.brief-arrow { color: #b0a488; font-size: 14px; margin: 6px 0; }
.brief-team { font-size: 12px; letter-spacing: .2em; color: #6d6248; margin-top: 10px; }
.brief-listeners { margin-top: 16px; border-top: 1.5px dashed #c9bfa4; padding-top: 12px; }
.brief-listeners-head { font-size: 10px; letter-spacing: .3em; color: var(--danger); }
.brief-spies { font-family: var(--font-mono); font-size: 13.5px; margin-top: 6px; color: #4a4331; line-height: 1.6; }
.pass-note { color: #B9C4CE; font-size: 15px; }
.pass-note strong { color: var(--leak); }

/* ═══════════ WORD ═══════════ */
#screen-word { justify-content: center; }
.word-inner { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.word-warn { color: var(--danger); font-size: 13px; letter-spacing: .15em; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.word-card {
  width: 100%;
  min-height: 190px;
  background: var(--paper);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.word-redacted {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}
.redact-bar {
  width: 210px; height: 46px;
  background: var(--paper-ink);
  border-radius: 2px;
  position: relative;
}
.redact-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(237,230,211,.25) 50%, transparent 60%);
  animation: redactShine 2.2s infinite;
}
@keyframes redactShine { from { transform: translateX(-120%);} to { transform: translateX(120%);} }
.redact-label { color: #8a7f65; font-size: 12px; letter-spacing: .35em; }
.word-secret { pointer-events: none; }
.word-text {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 9.5vw, 46px);
  color: var(--paper-ink);
  text-align: center;
  padding: 0 14px;
  line-height: 1.15;
  animation: wordPop .2s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes wordPop { from { transform: scale(.85); opacity: 0; } }

/* ═══════════ PLAY ═══════════ */
#screen-play { gap: 12px; }
.play-top {
  display: flex; align-items: center; gap: 14px;
  justify-content: space-between;
}
.play-word {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--leak);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer;
}
.play-word-label { font-size: 10px; letter-spacing: .3em; color: var(--muted); }
.play-word-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 5vw, 22px);
  transition: filter .18s;
}
.play-word-text.blurred { filter: blur(9px); }

.timer { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: var(--line); stroke-width: 7; }
.timer-arc {
  fill: none; stroke: var(--leak); stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 276.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .3s;
}
.timer.low .timer-arc { stroke: var(--danger); }
.timer.low .timer-num { color: var(--danger); animation: pulseNum 1s infinite; }
@keyframes pulseNum { 50% { transform: translate(-50%,-50%) scale(1.18); } }
.timer-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
}

.play-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.play-hint { font-size: 12px; color: var(--muted); letter-spacing: .05em; text-align: center; }
.spy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spy-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 16px 10px;
  color: var(--txt);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  transition: transform .12s, border-color .15s;
}
.spy-btn:active { transform: scale(.95); }
.spy-name { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.spy-status { font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .1em; }
.spy-dot { color: var(--leak); }
.spy-btn.burned { opacity: .38; pointer-events: none; }
.spy-btn.burned .spy-name { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.spy-btn.team-tag-0 { border-top: 3px solid var(--leak); }
.spy-btn.team-tag-1 { border-top: 3px solid var(--danger); }

.play-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

/* buzzer — söz hakkını ilk basan alır */
.btn-buzz {
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .05em;
  color: #2b1600;
  background: linear-gradient(160deg, #FFD75E 0%, var(--gold) 55%, #E8A61E 100%);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 34px rgba(255,193,69,.4);
  cursor: pointer;
  animation: buzzPulse 1.4s ease-in-out infinite;
  touch-action: manipulation;
}
.btn-buzz:active { transform: scale(.95); }
@keyframes buzzPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255,193,69,.3); }
  50% { box-shadow: 0 0 44px rgba(255,193,69,.6); }
}

.buzz-banner {
  width: 100%;
  text-align: center;
  font-size: 14px;
  letter-spacing: .05em;
  padding: 13px 14px;
  border-radius: 5px;
  border: 1.5px solid var(--gold);
  background: rgba(255,193,69,.1);
  color: var(--gold);
  animation: rise .25s both;
}
.buzz-banner strong { color: var(--txt); }
.buzz-banner.buzz-urgent {
  border-color: var(--danger);
  color: var(--danger);
  animation: blink .7s infinite;
}

.timer.paused .timer-arc { stroke: var(--gold); }
.timer.paused .timer-num { color: var(--gold); }
.timer.paused::after {
  content: "⏸";
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--gold);
}
.feed-item.buzz-expired { border-left-color: var(--gold); }

/* ── ses düğmesi ── */
.btn-mute {
  position: fixed; top: calc(12px + var(--sat)); right: 12px; z-index: 160;
  width: 42px; height: 42px;
  background: rgba(21, 29, 39, .85);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.btn-mute:active { transform: scale(.9); }

/* ── buzz sırasında herkeste kenar nabzı ── */
body.buzzing::before {
  content: ""; position: fixed; inset: 0; z-index: 140; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 60px rgba(255,193,69,.25);
  animation: edgePulse .9s ease-in-out infinite;
  border: none;
}
@keyframes edgePulse { 50% { opacity: .35; } }

/* ── anlatan DUR overlay'i — kaçırılamaz ── */
.stop-overlay {
  position: fixed; inset: 0; z-index: 155;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,68,56,.22) 0%, transparent 55%),
    rgba(10, 5, 5, .93);
  backdrop-filter: blur(5px);
  animation: stopFlash .35s steps(2) 3, cdOverlayIn .2s both;
}
@keyframes stopFlash { 50% { background-color: rgba(120, 15, 10, .95); } }
.stop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; padding: 20px;
}
.stop-word {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(72px, 26vw, 150px);
  line-height: 1;
  color: var(--danger);
  text-shadow: 0 0 50px rgba(255,68,56,.6);
  animation: stopShake .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes stopShake {
  0% { transform: scale(2.2); opacity: 0; }
  40% { transform: scale(.95); opacity: 1; }
  55% { transform: scale(1.05) rotate(-1deg); }
  70% { transform: scale(1) rotate(1deg); }
  100% { transform: none; }
}
.stop-line { font-size: 18px; color: #EBC5C1; }
.stop-line strong { color: #fff; }
.stop-sec {
  font-size: 44px; font-weight: 600; color: var(--gold);
  animation: stopSecPulse 1s infinite;
}
@keyframes stopSecPulse { 50% { transform: scale(1.15); } }
.stop-hint { font-size: 12.5px; letter-spacing: .15em; color: var(--muted); }

/* ═══════════ SHEET ═══════════ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,7,10,.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s both;
}
@keyframes fadeIn { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 560px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 26px 20px calc(24px + var(--sab));
  display: flex; flex-direction: column; gap: 12px;
  animation: sheetUp .3s cubic-bezier(.2,1.1,.4,1) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-title { text-align: center; font-size: 17px; margin-bottom: 6px; }
.sheet-title strong { color: var(--leak); }

.sheet-rules { gap: 14px; max-height: 88dvh; overflow-y: auto; }
.rules-title { font-family: var(--font-display); font-size: 20px; text-align: center; }
.rules-list { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.55; color: #C3CDD6; }
.hl-red { color: var(--danger); font-weight: 700; }
.hl-green { color: var(--leak); font-weight: 700; }
.rules-scoring {
  background: var(--panel); border-left: 3px solid var(--leak);
  border-radius: 4px; padding: 12px 14px;
  font-size: 12px; line-height: 1.9; color: #A9B4BF;
}

/* ═══════════ RESULT ═══════════ */
#screen-result { justify-content: center; }
.result-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.result-word { color: var(--muted); font-size: 13px; letter-spacing: .12em; }
.result-word strong { color: var(--txt); font-size: 15px; }
.result-desc { font-size: 16px; line-height: 1.6; color: #C3CDD6; max-width: 320px; }
.result-desc strong { color: var(--leak); }

/* puan dökümü — kim hangi rolde ne kazandı */
.breakdown { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.breakdown:empty { display: none; }
.bd-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  animation: bdIn .4s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes bdIn { from { opacity: 0; transform: translateX(-16px); } }
.bd-icon { font-size: 18px; }
.bd-role { font-size: 10.5px; letter-spacing: .18em; color: #8a7f65; width: 92px; }
.bd-name { flex: 1; font-weight: 800; font-size: 15px; text-align: left; }
.bd-pts { font-weight: 600; font-size: 17px; color: #3f7d0a; }
.bd-row.bd-neg .bd-pts { color: var(--danger); }
.bd-row.bd-neg { background: #e8d9d4; }
.board-head { font-size: 10.5px; letter-spacing: .3em; color: var(--muted); margin-top: 4px; }
.score-delta.delta-neg { color: var(--danger); }

.scoreboard {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.score-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 14.5px;
}
.score-row:last-child { border-bottom: none; }
.score-rank { color: var(--muted); font-size: 12px; width: 20px; }
.score-name { flex: 1; text-align: left; }
.score-pts { font-weight: 600; color: var(--leak); }
.score-row.leader { background: rgba(46,196,182,.07); }
.score-row.leader .score-name { color: var(--leak); }
.score-delta { color: var(--gold); font-size: 12px; animation: rise .4s .3s both; }
.score-row.team-row-0 .score-name { color: var(--leak); }
.score-row.team-row-1 .score-name { color: var(--danger); }

/* ═══════════ FINAL ═══════════ */
#screen-final { justify-content: center; }
.final-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.final-inner > .mono { color: var(--muted); letter-spacing: .25em; font-size: 12px; }
.final-winner { display: flex; flex-direction: column; gap: 4px; }
.final-winner .w-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.final-winner .w-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 11vw, 52px);
  color: var(--gold);
  text-shadow: 0 0 34px rgba(255,193,69,.4);
}
.final-btns { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* MVP damgaları */
.awards { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.awards:empty { display: none; }
.award-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  padding: 11px 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  border-left: 4px solid var(--gold);
  animation: bdIn .4s cubic-bezier(.2,1.3,.4,1) both;
  text-align: left;
}
.award-icon { font-size: 22px; }
.award-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.award-title { font-size: 10px; letter-spacing: .22em; color: #8a7f65; }
.award-name { font-weight: 800; font-size: 15.5px; }
.award-detail { font-size: 11px; color: #6d6248; }

/* konfeti */
.confetti {
  position: fixed; top: -12px; z-index: 90;
  width: 8px; height: 14px;
  pointer-events: none;
  animation: confFall linear forwards;
}
@keyframes confFall {
  to { transform: translateY(110dvh) rotate(720deg); opacity: .6; }
}

/* ═══════════ ONLINE BİLEŞENLER ═══════════ */

/* giriş */
.entry-box {
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 26px;
}
.field {
  width: 100%;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 15px 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
}
.field:focus { border-color: var(--leak); box-shadow: 0 0 0 3px rgba(46,196,182,.12); }
.field::placeholder { color: var(--muted); }
.join-row { display: flex; gap: 10px; }
.field-code {
  flex: 1;
  letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase;
  font-size: 20px; font-weight: 600;
}
.btn-join { width: 40%; }

/* toast & bağlantı */
.toast {
  position: fixed; top: calc(14px + var(--sat)); left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: 13.5px;
  padding: 11px 18px; border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  max-width: 90vw; text-align: center;
  animation: toastIn .25s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes toastIn { from { transform: translate(-50%, -20px); opacity: 0; } }
.conn-badge {
  position: fixed; bottom: calc(14px + var(--sab)); left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--gold); font-size: 12px;
  padding: 8px 14px; border-radius: 100px;
  animation: blink 1.4s infinite;
}

/* lobi */
.lobby-code {
  width: 100%;
  background: var(--panel);
  border: 1.5px dashed var(--leak-dim);
  border-radius: 6px;
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--txt);
  cursor: pointer;
  margin-bottom: 18px;
  transition: transform .12s;
  font-family: inherit;
}
.lobby-code:active { transform: scale(.98); }
.lobby-code-label { font-size: 10.5px; letter-spacing: .2em; color: var(--muted); }
.lobby-code-val {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 13vw, 54px);
  letter-spacing: .3em; text-indent: .3em;
  color: var(--leak);
  text-shadow: 0 0 26px rgba(46,196,182,.4);
}
.lobby-code-hint { font-size: 11px; color: var(--leak-dim); }
.p-chip.p-off { opacity: .4; }
.p-chip.p-off::after { content: " ⚡koptu"; color: var(--danger); font-size: 11px; }
.t-chip.t-you { border-color: var(--leak); cursor: pointer; }
.settings.locked { opacity: .55; pointer-events: none; }

/* rol bandı */
.your-role {
  width: 100%;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .06em;
  padding: 13px 14px;
  border-radius: 4px;
  border: 1.5px solid var(--line);
  background: var(--panel);
}
.your-role:empty { display: none; }
.your-role.role-teller { border-color: var(--danger); color: var(--danger); }
.your-role.role-guesser { border-color: var(--leak); color: var(--leak); }
.your-role.role-spy { border-color: var(--gold); color: var(--gold); }

.teller-tools { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.word-pick, .word-chosen { display: flex; flex-direction: column; gap: 12px; }
.choose-timer {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold);
}
.choose-timer.choose-urgent { color: var(--danger); animation: blink 1s infinite; }
.btn-ghost:disabled { opacity: .35; text-decoration: none; }
.word-options { display: flex; flex-direction: column; gap: 10px; }
.word-opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  color: var(--paper-ink);
  border: none; border-radius: 4px;
  padding: 16px 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 4.6vw, 19px);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  transition: transform .12s, box-shadow .12s;
  animation: chipIn .3s cubic-bezier(.2,1.3,.4,1) both;
}
.word-opt:nth-child(2) { animation-delay: .07s; }
.word-opt:nth-child(3) { animation-delay: .14s; }
.word-opt:active { transform: scale(.97); }
.word-opt-no {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--paper-ink); color: var(--paper);
  border-radius: 50%;
  font-size: 13px; font-weight: 600;
}

/* rol bandı — herkes kimin anlattığını görür */
.role-bar {
  width: 100%;
  text-align: center;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 10px;
}
.role-bar strong { color: var(--txt); }
.rb-arrow { color: var(--leak); font-weight: 700; }

/* tahmin akışı */
.guess-feed {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  padding: 4px 2px;
}
.spy-strip {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}
.spy-pill {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 12px;
  color: var(--gold);
}
.spy-pill.burned {
  color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--danger);
  opacity: .55;
}
.spy-pill.burned::before { content: "✕ "; color: var(--danger); }
.spy-pill.pill-guesser { color: var(--leak); border-color: rgba(46,196,182,.35); }
.spy-pill.pill-guesser.burned { color: var(--muted); }
.feed-item {
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 13px;
  border-radius: 4px;
  background: var(--panel);
  border-left: 3px solid var(--line);
  animation: feedIn .25s cubic-bezier(.2,1.2,.4,1) both;
  color: #B9C4CE;
}
@keyframes feedIn { from { opacity: 0; transform: translateY(8px); } }
.feed-item.spy-wrong { border-left-color: var(--danger); }
.feed-item.guesser-wrong { border-left-color: var(--leak-dim); }
.feed-who { font-weight: 700; color: var(--txt); }
.feed-x { color: var(--danger); font-weight: 600; }

.guess-row { display: flex; gap: 10px; }
.guess-row .field { text-align: left; flex: 1; }
.score-members { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ═══════════ GERİ SAYIM OVERLAY ═══════════ */
.cd-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 45%, rgba(46,196,182,.06) 0%, transparent 60%),
    rgba(6, 9, 13, .96);
  backdrop-filter: blur(6px);
  animation: cdOverlayIn .3s ease-out both;
  overflow: hidden;
}
@keyframes cdOverlayIn { from { opacity: 0; } }

.cd-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(46,196,182,.14) 0%, transparent 38%);
  animation: cdGlowPulse 1.1s ease-in-out infinite;
}
@keyframes cdGlowPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

.cd-label {
  font-size: 13px; letter-spacing: .4em; text-indent: .4em;
  color: var(--danger);
  animation: blink 1s infinite;
}

.cd-stage {
  position: relative;
  width: min(64vw, 300px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.cd-ring, .cd-ring-2 {
  position: absolute; inset: 0;
  border: 2px solid rgba(46,196,182,.5);
  border-radius: 50%;
  animation: cdRing 1.1s cubic-bezier(.2,.7,.3,1) infinite;
}
.cd-ring-2 { animation-delay: .35s; border-color: rgba(255,68,56,.4); }
@keyframes cdRing {
  0% { transform: scale(.55); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}

.cd-digit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(120px, 42vw, 210px);
  line-height: 1;
  color: var(--leak);
  text-shadow:
    0 0 40px rgba(46,196,182,.55),
    0 0 110px rgba(46,196,182,.3);
  position: relative;
}
.cd-digit.cd-pop {
  animation: cdSlam .95s cubic-bezier(.15,1.5,.4,1) both, cdGlitch 1s steps(1) both;
}
@keyframes cdSlam {
  0% { transform: scale(2.4) rotate(-6deg); opacity: 0; filter: blur(6px); }
  30% { transform: scale(.94) rotate(1deg); opacity: 1; filter: blur(0); }
  45% { transform: scale(1.04); }
  60%, 100% { transform: scale(1); }
}
@keyframes cdGlitch {
  0%, 8%, 100% { text-shadow: 0 0 40px rgba(46,196,182,.55), 0 0 110px rgba(46,196,182,.3); }
  3% {
    text-shadow:
      -5px 0 0 rgba(255,68,56,.85),
      5px 0 0 rgba(62,199,255,.7),
      0 0 40px rgba(46,196,182,.55);
    transform: translateX(2px);
  }
  6% {
    text-shadow:
      4px 0 0 rgba(255,68,56,.85),
      -4px 0 0 rgba(62,199,255,.7),
      0 0 40px rgba(46,196,182,.55);
  }
}

.cd-word {
  background: var(--paper);
  color: var(--paper-ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  padding: 10px 18px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: rise .4s .15s both;
  position: relative; z-index: 1;
}
.cd-sub {
  font-size: 12px; letter-spacing: .25em;
  color: var(--muted);
  position: relative; z-index: 1;
}

/* ═══════════ TAKTİK TAVSİYE KARTI ═══════════ */
.tip-card {
  position: relative;
  border: 1.5px dashed var(--gold);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,193,69,.08) 0%, transparent 55%),
    var(--panel);
  padding: 16px 40px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  animation: tipIn .45s cubic-bezier(.2,1.2,.4,1) both;
  overflow: hidden;
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
}
.tip-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: tipScan 2.4s linear infinite;
}
@keyframes tipScan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.tip-head {
  font-size: 11px; letter-spacing: .25em;
  color: var(--gold);
  display: flex; align-items: center; gap: 8px;
}
.tip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255,193,69,.5);
  animation: tipPing 1.6s ease-out infinite;
}
@keyframes tipPing {
  0% { box-shadow: 0 0 0 0 rgba(255,193,69,.5); }
  100% { box-shadow: 0 0 0 10px rgba(255,193,69,0); }
}
.tip-text { font-size: 14px; line-height: 1.6; color: #C3CDD6; }
.tip-text strong { color: var(--txt); }
.tip-btn { padding: 13px; font-size: 13.5px; }
.tip-x {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: none; border: none;
  color: var(--muted); font-size: 14px; cursor: pointer;
}
.tip-x:active { color: var(--danger); }

/* ═══════════ AKADEMİ (solo mod) ═══════════ */
/* splash'ta ana giriş kapısı: dosya kartı görünümlü hero buton */
.akademi-hero {
  position: relative;
  width: 100%;
  margin-top: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left;
  padding: 18px 18px 15px;
  background:
    radial-gradient(ellipse 90% 130% at 100% 0%, rgba(46, 196, 182, .13), transparent 55%),
    linear-gradient(160deg, #0E3038, #0B272E 60%, var(--ink-2));
  border: 1.5px solid rgba(46, 196, 182, .55);
  border-radius: 12px;
  color: var(--txt);
  cursor: pointer;
  overflow: hidden;
  animation: hero-breathe 2.8s ease-in-out infinite;
  transition: transform .12s;
}
.akademi-hero:active { transform: scale(.975); }
@keyframes hero-breathe {
  0%, 100% { box-shadow: 0 0 16px rgba(46, 196, 182, .10), inset 0 0 30px rgba(46, 196, 182, .04); }
  50%      { box-shadow: 0 0 32px rgba(46, 196, 182, .26), inset 0 0 34px rgba(46, 196, 182, .07); }
}
/* dosyayı tarayan ışık şeridi */
.akademi-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 36%;
  background: linear-gradient(180deg, transparent, rgba(46, 196, 182, .07), transparent);
  animation: hero-scan 3.8s linear infinite;
  pointer-events: none;
}
@keyframes hero-scan { to { top: 120%; } }
.ah-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  color: #06262B; background: var(--gold);
  padding: 3px 8px; border-radius: 3px;
}
.ah-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .02em; }
.ah-sub { font-size: 13px; color: var(--muted); font-family: var(--font-body); }
.ah-go { margin-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--leak); }
.entry-label { font-size: 10px; color: var(--muted); letter-spacing: .25em; text-align: center; }

/* ── RAKUN marka katmanı ── */
.logo-img { width: min(330px, 82%); display: block; margin: 0 auto; }
:root { --cta: #F4652F; }
.btn-primary { background: var(--cta) !important; color: #fff !important; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn, .field, .akademi-hero, .tip-card, .sheet { border-radius: 16px; }
.ah-badge { border-radius: 8px; }
.stamp-gizli { border-color: var(--cta); color: var(--cta); }

/* hub mod kartları: hero'nun altın (düello) ve nötr (multiplayer) varyantları */
.akademi-hero.hero-gold, .akademi-hero.hero-dim { margin-top: 10px; animation: none; }
.akademi-hero.hero-gold {
  border-color: rgba(255, 193, 69, .5);
  background:
    radial-gradient(ellipse 90% 130% at 100% 0%, rgba(255, 193, 69, .11), transparent 55%),
    linear-gradient(160deg, #123138, #0D2930 60%, var(--ink-2));
  box-shadow: 0 0 14px rgba(255, 193, 69, .08);
}
.hero-gold .ah-go { color: var(--gold); }
.hero-gold::after { background: linear-gradient(180deg, transparent, rgba(255, 193, 69, .06), transparent); animation-delay: 1.9s; }
.akademi-hero.hero-dim {
  border-color: var(--line);
  background: linear-gradient(160deg, #0E2A31, var(--ink-2));
  box-shadow: none;
}
.hero-dim::after { display: none; }
.hero-dim .ah-badge { background: var(--line); color: var(--txt); }
.hero-dim .ah-go { color: var(--txt); opacity: .75; }

/* ═══════════ DÜELLO ═══════════ */
.duel-setup-body {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  justify-content: center; align-items: stretch; max-width: 380px; width: 100%; margin: 0 auto;
}
.duel-setup-body .stamp { align-self: center; }
.duel-blurb { text-align: center; color: var(--txt); font-size: 14.5px; line-height: 1.65; }
.duel-name-row { display: flex; align-items: center; gap: 10px; }
.duel-name-row .field { flex: 1; }
.duel-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.duel-dot.a { background: var(--gold); box-shadow: 0 0 10px rgba(255, 193, 69, .5); }
.duel-dot.b { background: var(--leak); box-shadow: 0 0 10px rgba(46, 196, 182, .5); }

.duel-top { gap: 8px; }
.duel-score {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duel-score.a { color: var(--gold); text-align: right; }
.duel-score.b { color: var(--leak); }
.duel-vs { font-size: 10px; color: var(--muted); letter-spacing: .1em; }

.duel-buzz-row { display: flex; gap: 10px; }
.duel-buzz {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 16px 8px 14px;
  border-radius: 12px;
  background: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .1s, opacity .15s, box-shadow .15s;
}
.duel-buzz:active { transform: scale(.94); }
.duel-buzz:disabled { opacity: .3; pointer-events: none; }
.duel-buzz .db-name {
  font-size: 10.5px; letter-spacing: .18em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.duel-buzz .db-txt { font-weight: 800; font-size: 17px; }
.duel-buzz.a { border: 2px solid var(--gold); color: var(--gold); box-shadow: 0 0 18px rgba(255, 193, 69, .15); }
.duel-buzz.b { border: 2px solid var(--leak); color: var(--leak); box-shadow: 0 0 18px rgba(46, 196, 182, .15); }

#duel-form.duel-turn-a .field { border-color: var(--gold); }
#duel-form.duel-turn-b .field { border-color: var(--leak); }

.duel-champ { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--gold); text-align: center; }
.duel-final { font-size: 15px; color: var(--txt); letter-spacing: .1em; text-align: center; }
.ak-score { margin-left: auto; margin-right: 46px; color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.ak-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

/* ── eğitmen notu: like/dislike ── */
.ak-vote {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 100%; max-width: 340px; margin: 0 auto;
}
.ak-vote-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; color: var(--muted); letter-spacing: .28em;
  white-space: nowrap;
}
.ak-vote-label::before, .ak-vote-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.ak-vote-label::after { background: linear-gradient(90deg, var(--line), transparent); }
.ak-vote-btns { display: flex; gap: 8px; }
.vote-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .08em;
  padding: 10px 6px;
  background: transparent;
  border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, box-shadow .2s, transform .1s;
}
.vote-btn:active { transform: scale(.9); }
.vote-btn.on {
  color: var(--leak); border-color: var(--leak);
  background: rgba(46, 196, 182, .08);
  box-shadow: 0 0 16px rgba(46, 196, 182, .22);
}
.vote-btn.vote-down.on {
  color: var(--danger); border-color: var(--danger);
  background: rgba(255, 68, 56, .08);
  box-shadow: 0 0 16px rgba(255, 68, 56, .2);
}

/* dosya kâğıdına inen mürekkep damgası */
.entry-stamp {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(17px, 5.2vw, 24px);
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  padding: 7px 16px;
  color: var(--leak-dim);
  border: 3px double currentColor; border-radius: 8px;
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: multiply; /* kâğıda işlemiş mürekkep hissi */
  animation: stamp-in .38s cubic-bezier(.16, 1.4, .3, 1) both;
}
.entry-stamp.stamp-down { color: var(--danger); transform: translate(-50%, -50%) rotate(8deg); }
@keyframes stamp-in {
  0%   { transform: translate(-50%, -50%) rotate(-11deg) scale(2.5); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-11deg) scale(1); opacity: .9; }
}
.entry-stamp.stamp-down { animation-name: stamp-in-down; }
@keyframes stamp-in-down {
  0%   { transform: translate(-50%, -50%) rotate(8deg) scale(2.5); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(8deg) scale(1); opacity: .9; }
}
.ak-progress { color: var(--muted); letter-spacing: .3em; font-size: 12px; text-align: center; }
.ak-entry-card {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  padding: 30px 20px 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 0 60px rgba(120,90,20,.08);
  background-image: repeating-linear-gradient(0deg, transparent 0 26px, rgba(23,19,10,.05) 26px 27px);
  transform: rotate(-.6deg);
  min-height: 150px;
}
/* deste chip'i: kâğıt üstünde görünür kategori etiketi */
.ak-deck {
  width: max-content; max-width: 100%;
  margin: 0 auto 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: #6b5416;
  background: rgba(138, 109, 31, .12);
  border: 1.5px solid rgba(138, 109, 31, .5);
  border-radius: 999px;
  padding: 6px 14px;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ŞİFRE şeridi: reels kartındaki altın damganın oyun içi hali */
.cipher-strip {
  flex-shrink: 0; /* flex sıkışmasında kırpılmasın */
  width: max-content; max-width: 96%;
  margin: -2px auto 0;
  transform: rotate(-1.2deg);
  font-size: 15px; font-weight: 600; letter-spacing: .18em;
  color: #d9ad3c;
  border: 2.5px solid #b08a28; border-radius: 7px;
  padding: 9px 16px;
  background: rgba(255, 193, 69, .05);
  white-space: nowrap;
}
/* uzun kelime: font kademeli küçülür, asla "…" ile kesilmez (fillCipher atar) */
.cipher-strip.cipher-sm { font-size: 12.5px; letter-spacing: .12em; padding: 8px 12px; }
.cipher-strip.cipher-xs { font-size: 10.5px; letter-spacing: .07em; padding: 7px 10px; }
/* klavye açık (viewport kısa): şerit gizlenir — odak inputta */
@media (max-height: 540px) {
  .cipher-strip { display: none; }
}
.cipher-strip.solved {
  color: var(--leak); border-color: var(--leak);
  background: rgba(46, 196, 182, .07);
  animation: rise .3s both;
}
.ak-entry { font-size: 16.5px; line-height: 1.75; white-space: pre-wrap; }
/* uzun dosyalar ekrana sığsın diye kademeli küçülür (typeWriter'da atanır) */
.ak-entry.ak-entry-sm { font-size: 15px; line-height: 1.6; }
.ak-entry.ak-entry-xs { font-size: 13.5px; line-height: 1.55; }

/* telefonda ekran viewport'a kilitli: aksiyonlar hep görünür, gerekirse kâğıt içi kayar */
@media (max-width: 699.98px) {
  #screen-akademi { height: 100dvh; min-height: 0; }
  #screen-akademi .ak-body { overflow: hidden; }
  #screen-akademi .ak-entry-card {
    flex: 0 1 auto; min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
  }
}
.ak-tries { text-align: center; color: var(--gold); font-size: 12.5px; letter-spacing: .1em; }
.ak-feedback {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  padding: 12px;
  border-radius: 6px;
  animation: rise .3s both;
}
.ak-feedback.ak-good { background: rgba(46,196,182,.12); color: var(--leak); }
.ak-feedback.ak-bad { background: rgba(255,68,56,.12); color: var(--danger); }

/* paylaşım kartı */
.share-preview {
  width: 100%; max-height: 46dvh; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--ink);
}
.share-row { display: flex; gap: 8px; }
.sharemode-hint { text-align: center; margin: -4px 0 4px; font-size: 11px; }
.share-btn { flex: 1; text-align: center; text-decoration: none; font-size: 13px; padding: 12px 6px; }

/* eğitmen yazarken: iskelet satırlar + nokta animasyonu */
.ak-skel {
  display: block; height: 15px; border-radius: 3px;
  margin: 12px 0;
  background: linear-gradient(90deg, rgba(23,19,10,.08) 25%, rgba(23,19,10,.2) 50%, rgba(23,19,10,.08) 75%);
  background-size: 200% 100%;
  animation: akSkel 1.1s ease-in-out infinite;
}
@keyframes akSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ak-dots::after {
  content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: akDots 1.2s steps(4) infinite;
}
@keyframes akDots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }
}

/* ═══════════ SOLO LOBİ + İLK ZİYARET ═══════════ */
.solo-card { border-color: var(--leak-dim); }
.solo-card .tip-dot { background: var(--leak); box-shadow: 0 0 0 0 rgba(46,196,182,.5); }
.solo-card .tip-head { color: var(--leak); }
.wa-btn {
  display: block; text-align: center; text-decoration: none;
  box-sizing: border-box;
}
.fv-callout {
  margin-top: 16px;
  width: 100%;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  animation: tipIn .4s cubic-bezier(.2,1.2,.4,1) both;
  font-size: 14.5px;
}
.fv-btns { display: flex; align-items: center; gap: 10px; }
.fv-go { flex: 1; padding: 12px; font-size: 13.5px; }
.fv-skip { position: static; color: #8a7f65; }

/* ═══════════ BETA KAYIT + TANITIM TURU ═══════════ */
.splash-links { display: flex; gap: 4px; align-items: center; }
.beta-card {
  margin-top: 18px;
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: var(--panel);
  border: 1.5px dashed var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
  transition: transform .12s;
  font-family: var(--font-body);
}
.beta-card:active { transform: scale(.98); }
.beta-icon { font-size: 26px; }
.beta-text { font-size: 13px; line-height: 1.5; color: #B9C4CE; }
.beta-text strong { color: var(--gold); }
.beta-desc { font-size: 14px; line-height: 1.6; color: #B9C4CE; text-align: center; }
.beta-promise { color: var(--gold); }
.beta-steps {
  margin: 4px 0 6px;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; line-height: 1.55; color: #B9C4CE;
}
.beta-steps strong { color: var(--leak); }

.tut-bubble {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(14px + var(--sab));
  z-index: 210;
  max-width: 536px; margin: 0 auto;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 8px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: sheetUp .3s cubic-bezier(.2,1.1,.4,1) both;
}
.tut-text { font-size: 15px; line-height: 1.65; }
.tut-text strong { color: #1d4a00; }
.tut-next { margin-top: 12px; padding: 13px; font-size: 14px; }
.tut-exit {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  font-family: var(--font-mono); font-size: 11px;
  color: #8a7f65; cursor: pointer;
}

/* ═══════════ GENİŞ EKRAN — operasyon terminali ═══════════ */
@media (min-width: 700px) {
  body {
    background:
      radial-gradient(ellipse 120% 60% at 50% -10%, #12343c 0%, transparent 60%),
      radial-gradient(ellipse 80% 50% at 100% 110%, #101b12 0%, transparent 55%),
      repeating-linear-gradient(0deg, transparent 0 48px, rgba(46,196,182,.025) 48px 49px),
      repeating-linear-gradient(90deg, transparent 0 48px, rgba(46,196,182,.025) 48px 49px),
      var(--ink);
  }
  /* köşe süsleri — hedef vizörü */
  body::before, body::after {
    content: ""; position: fixed; width: 90px; height: 90px; z-index: 1;
    border: 2px solid rgba(46,196,182,.14); pointer-events: none;
  }
  body::before { top: 22px; left: 22px; border-right: none; border-bottom: none; }
  body::after { bottom: 22px; right: 22px; border-left: none; border-top: none; }

  .screen {
    min-height: 0;
    max-width: 640px;
    margin: 34px auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, .6),
      0 0 0 1px rgba(46,196,182,.05),
      0 0 60px rgba(46,196,182,.04);
    background: rgba(11, 15, 20, .82);
    backdrop-filter: blur(4px);
    padding: 34px 44px 38px;
    position: relative;
    overflow: hidden;
  }
  .screen.active { display: flex; min-height: calc(100dvh - 68px); }
  /* terminal üst çizgisi */
  .screen::before {
    content: "🦝 RAKUN · rakungame.com";
    position: absolute; top: 0; left: 0; right: 0;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .3em;
    color: var(--muted);
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(21, 29, 39, .6);
  }
  .screen > *:first-child { margin-top: 26px; }
  .spy-grid { grid-template-columns: repeat(3, 1fr); }
  .btn-buzz:hover { transform: translateY(-2px); }
  .word-opt:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .mode-card:hover { border-color: var(--leak); }
}

/* hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════ RAKUN SPLASH — mockup düzeni ═══════════ */
.mini-head { display: flex; align-items: center; padding: 2px 4px 0; }
.mh-logo { height: 40px; width: auto; }
.splash-doodles span {
  position: absolute; font-size: 15px; opacity: .16; color: var(--gold);
  pointer-events: none; user-select: none;
}
#screen-splash { position: relative; overflow: hidden; }
.tagline-big {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(21px, 6vw, 27px); letter-spacing: .01em;
  color: var(--txt); text-align: center; margin-top: 2px;
}
.tagline-big span { color: var(--cta); }
.tagline-sub {
  font-size: 13.5px; color: var(--muted); text-align: center;
  margin: 4px 0 14px; font-weight: 600;
}

.mode-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 12px; padding: 16px 14px;
  background: linear-gradient(160deg, #143B43, #0F2F37);
  border: 1.5px solid rgba(46, 196, 182, .22);
  border-radius: 22px;
  cursor: pointer; text-align: left;
  color: var(--txt); font-family: var(--font-body);
  transition: transform .12s, border-color .15s;
}
.mode-card:active { transform: scale(.97); }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.mc-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-row2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mc-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 23px; letter-spacing: .02em; color: var(--txt);
}
.mc-badge {
  background: var(--gold); color: #3A2A08;
  font-weight: 800; font-size: 10px; letter-spacing: .07em;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}
.mc-sub { font-size: 12.5px; line-height: 1.45; color: #A9C6BF; min-width: 0; }
.mc-cta {
  background: var(--cta); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .02em;
  padding: 11px 13px; border-radius: 13px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.mode-card:active .mc-cta { box-shadow: 0 2px 0 rgba(0,0,0,.3); transform: translateY(2px); }

/* kart ikonları */
.mc-icon { width: 64px; height: 64px; flex-shrink: 0; position: relative; display: grid; place-items: center; }
.mc-icon-quest {
  background: var(--gold); border-radius: 14px;
  transform: rotate(-8deg);
  font-family: var(--font-display); font-weight: 800; font-size: 34px; color: #3A2A08;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .3);
  width: 52px; height: 62px; margin: 0 6px;
}
.mc-icon-bubbles i { position: absolute; border-radius: 45% 45% 45% 12%; }
.mc-icon-bubbles .bb1 {
  width: 44px; height: 38px; left: 2px; top: 6px; background: var(--leak);
  box-shadow: 3px 4px 0 rgba(0,0,0,.28);
}
.mc-icon-bubbles .bb2 {
  width: 30px; height: 26px; right: 2px; bottom: 4px; background: var(--cta);
  border-radius: 45% 45% 12% 45%;
  box-shadow: 3px 4px 0 rgba(0,0,0,.28);
}
.mc-icon-bubbles i::before {
  content: ""; position: absolute; top: 40%; left: 26%;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(10,27,33,.85);
  box-shadow: 10px 0 0 rgba(10,27,33,.85);
}
.mc-icon-tails i {
  position: absolute; width: 24px; height: 58px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, #E8E3D5 0 11px, #2E3038 11px 22px);
  border: 2px solid #1B1D24;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
}
.mc-icon-tails .tl1 { left: 6px; transform: rotate(-14deg); }
.mc-icon-tails .tl2 { right: 6px; transform: rotate(12deg); top: 4px; }

/* beta kartı: kesikli sarı çerçeve */
.beta-card.rakun-beta {
  border: 2px dashed var(--gold); background: rgba(255, 193, 69, .05);
  border-radius: 18px; margin-top: 16px;
}
.beta-card.rakun-beta .beta-text strong:first-child {
  font-family: var(--font-display); color: var(--gold); font-size: 16px; letter-spacing: .03em;
}

/* eski .mode-card (v1 ekranı) column'du — splash kartları satır düzeni */
.splash-inner .mode-card { flex-direction: row; align-items: center; }
.splash-inner { gap: 2px; }
.mini-head { margin-bottom: 4px; }
.mc-img { width: 66px; height: 66px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.25)); }
.mh-logo { height: 44px; }
.mc-img { width: 78px; height: 78px; }
.mc-row2 { align-items: center; }
.mc-sub { flex: 1; }
.mc-cta { font-size: 11.5px; padding: 10px 11px; }

/* ═══ RAKUN ölçek düzeltmesi: mockup oranları ═══ */
.logo-img { width: min(400px, 96%); margin-top: 6px; }
.tagline-big { font-size: clamp(26px, 7.6vw, 34px); margin-top: 10px; }
.tagline-sub { font-size: 15px; margin: 6px 0 18px; }
.tagline-sub::before { content: "≋ "; color: var(--leak); }
.tagline-sub::after { content: " ≋"; color: var(--leak); }

.splash-inner .mode-card {
  padding: 24px 18px;
  gap: 16px;
  border-radius: 26px;
  margin-top: 16px;
  background: linear-gradient(160deg, #164046, #113439);
  border: 1px solid rgba(46, 196, 182, .3);
}
.mc-img { width: 100px; height: 100px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.3)); }
.mc-main { gap: 12px; }
.mc-title { font-size: 29px; }
.mc-badge { font-size: 11px; padding: 7px 12px; border-radius: 10px; letter-spacing: .09em; }
.mc-sub { font-size: 14px; line-height: 1.5; color: #C3D8D2; }
.mc-cta { font-size: 14px; padding: 15px 17px; border-radius: 15px; box-shadow: 0 5px 0 rgba(0,0,0,.32); }
.splash-doodles span { font-size: 18px; opacity: .22; }
.beta-card.rakun-beta { padding: 18px 16px; margin-top: 20px; }
.beta-card.rakun-beta .beta-icon { font-size: 40px; }
.mh-logo { height: 48px; }

/* kart: 3 kolon — ikon | başlık+açıklama | rozet+CTA */
.splash-inner .mode-card { padding: 20px 14px; gap: 12px; align-items: center; }
.mc-img { width: 82px; height: 82px; }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-title { font-size: 23px; line-height: 1; }
.mc-sub { font-size: 12.5px; line-height: 1.45; }
.mc-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; max-width: 150px; }
.mc-badge { text-align: center; font-size: 10px; padding: 6px 9px; }
.mc-cta { text-align: center; font-size: 12px; padding: 13px 10px; border-radius: 14px; }
/* 390px gerçekliği: oranları koru, metne alan aç */
.mc-img { width: 64px; height: 64px; }
.mc-side { max-width: 132px; gap: 8px; }
.mc-title { font-size: 21px; }
.mc-sub { font-size: 12px; }
.mc-cta { font-size: 11px; padding: 12px 8px; }
.mc-badge { font-size: 9.5px; padding: 5px 7px; }
.splash-inner .mode-card { padding: 18px 12px; gap: 10px; }

/* hiyerarşi düzeltmesi: rozet ince etiket, CTA baskın buton (mockup oranı) */
.mc-side { max-width: 152px; gap: 9px; align-items: flex-end; }
.mc-badge {
  align-self: flex-end; width: auto;
  font-size: 9.5px; padding: 5px 10px; border-radius: 9px;
  border: 1.5px solid rgba(0,0,0,.25);
}
.mc-cta {
  align-self: stretch;
  font-size: 14px; font-weight: 800;
  padding: 15px 12px; border-radius: 16px;
  box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.15);
}
.mc-title { font-size: 24px; letter-spacing: .01em; }
.mc-sub { font-size: 12.5px; color: #B9D2CB; }
.mc-img { width: 70px; height: 70px; }
.splash-inner .mode-card { padding: 20px 14px; }
.mc-side { max-width: 136px; }
.mc-cta { font-size: 12.5px; padding: 14px 10px; }
.mc-img { width: 62px; height: 62px; }

/* ═══ RAKUN cila: mockup farkları (7 madde) ═══ */
/* 1. mini logo sola yaslı */
.mini-head { justify-content: flex-start; padding: 4px 2px 0; }
/* 2. ses butonu: turkuaz dolgulu yuvarlak */
.btn-mute {
  background: #164046; border: 2px solid rgba(46, 196, 182, .5);
  border-radius: 50%; font-size: 17px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
/* 3. logo tam yatay */
.logo-img { width: min(440px, 100%); }
/* 5. CTA gradient + parlak kenar */
.mc-cta {
  background: linear-gradient(180deg, #F98243, #EE5A21);
  border: 1.5px solid rgba(255, 255, 255, .25);
}
.btn-primary { background: linear-gradient(180deg, #F98243, #EE5A21) !important; }
/* 4. kartlar daha "oyun": derin zemin, kalın çift kenar, iç ışık */
.splash-inner .mode-card {
  background: linear-gradient(165deg, #17454B, #0F343B 70%);
  border: 2px solid rgba(46, 196, 182, .35);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mc-img { transform: rotate(-4deg); }
.mode-card:nth-child(odd) .mc-img { transform: rotate(4deg); }
/* 6. rakun bıyığı: üç çizgi vurgular */
.wsk { display: inline-block; width: 13px; height: 12px; margin: 0 7px; vertical-align: -1px;
  background: repeating-linear-gradient(100deg, currentColor 0 1.6px, transparent 1.6px 5px); opacity: .85; }
.wsk.flip { transform: scaleX(-1); }
.tagline-sub { color: #BFD8D2; }
.tagline-sub .wsk { color: var(--leak); }
.tagline-sub::before, .tagline-sub::after { content: none; }
.mc-badge { position: relative; }
.mc-side::before { content: ""; position: absolute; } /* no-op koruma */
/* 7. arka plan: vinyet + yıldız serpintisi */
#screen-splash {
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, #143A44 0%, transparent 58%),
    radial-gradient(ellipse 100% 40% at 50% 108%, #10333C 0%, transparent 55%),
    #0A1B21;
}
.splash-doodles span { font-size: 17px; opacity: .28; color: #E8C978; }
.splash-doodles span:nth-child(2n) { color: var(--leak); font-size: 13px; }
.mini-head { width: 100%; }
.mc-title { font-size: 22px; }

/* RAKUN: eski casus-tema overlay'leri kapalı (tarama çizgisi butonları bantlıyordu) */
.noise, .scanline { display: none !important; }
/* CTA taşma düzeltmesi */
.mc-side { max-width: 148px; }
.mc-cta { font-size: 11.5px; letter-spacing: 0; padding: 13px 6px; overflow: hidden; }
.mc-title { font-size: 21px; }

/* ═══════════ RAKUN ANTRENMAN — design ekran 2-3 ═══════════ */
.rk-title { font-family: var(--font-display); font-weight: 800; letter-spacing: .14em; font-size: 15px; color: var(--txt); }
.score-pill {
  margin-left: auto; margin-right: 46px;
  background: var(--gold); color: #3A2A08 !important;
  font-weight: 800; font-size: 12px !important; letter-spacing: .08em;
  padding: 7px 13px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.prog-row { display: flex; align-items: center; gap: 12px; }
.prog-label { font-weight: 800; font-size: 12px; letter-spacing: .18em; color: #9FBDB6; white-space: nowrap; }
.prog-bar { flex: 1; height: 10px; border-radius: 999px; background: #0E2A31; border: 1px solid #1D4750; overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #1FA396, var(--leak)); transition: width .5s; }

.ak-deck { /* soluk sol chip (design) */
  margin: 0 0 10px; width: max-content; max-width: 100%;
  background: rgba(138,109,31,.07);
  border: 1.5px solid rgba(120,105,60,.4); color: #7A6C3E;
  font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px;
}
/* KELİME damgası kâğıdın İÇİNDE sol altta */
.ak-entry-card .cipher-strip {
  margin: 14px 0 2px; transform: rotate(-2deg);
  width: max-content; max-width: 100%;
  border: 2.5px solid #E5A93D; color: #C07F1E;
  background: rgba(255,193,69,.12);
  font-weight: 800; font-size: 15px; letter-spacing: .16em;
  padding: 8px 14px; border-radius: 9px;
}
.ak-entry-card .cipher-strip.solved {
  border-color: var(--leak); color: #167F74; background: rgba(46,196,182,.13);
}
.ak-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listen-link {
  background: none; border: none; cursor: pointer;
  color: var(--leak); font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  text-decoration: underline dotted; padding: 4px 2px;
}
.ak-tries { color: var(--gold); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; }

.ak-feedback { /* koyu yeşil sonuç bandı: sol kelime, sağ puan */
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(160deg, #17454B, #113439);
  border: 1.5px solid rgba(46,196,182,.35); border-radius: 16px;
  padding: 15px 16px; font-family: var(--font-body);
}
.ak-feedback b { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.ak-feedback.ak-good b { color: var(--leak); }
.ak-feedback.ak-bad b { color: var(--danger); }
.ak-feedback .fb-pts { font-weight: 800; font-size: 14px; color: var(--txt); white-space: nowrap; }

.ak-vote-label { text-align: center; font-weight: 800; font-size: 11.5px; letter-spacing: .2em; color: #9FBDB6; }
.ak-vote-label::before, .ak-vote-label::after { content: none; }
.ak-vote-btns { justify-content: center; }
.vote-btn {
  flex: 0 1 auto; min-width: 128px;
  font-family: var(--font-body); font-weight: 800; font-size: 13px;
  border: 2px solid #2A5A62; color: #BBD4CE; background: transparent;
  border-radius: 999px; padding: 12px 18px;
}
.vote-btn.on {
  background: linear-gradient(180deg, #35D4C5, #23A99C); color: #06322D;
  border-color: transparent; box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.vote-btn.vote-down.on {
  background: linear-gradient(180deg, #EE7A54, #E4572E); color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.rk-guess .field { border-radius: 999px; border: 2px solid rgba(46,196,182,.5); padding-left: 18px; }
.btn-send {
  width: 52px; height: 52px; flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #35D4C5, #23A99C); color: #06322D;
  font-size: 21px; font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn-send:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.end-row { display: flex; gap: 10px; }
.end-row .btn { border-radius: 16px; }
.end-row #ak-share { flex: 1; }
.end-row #ak-next { flex: 1.5; }
.entry-stamp { font-family: var(--font-display); font-weight: 800; border-width: 3px; border-style: solid; color: #23A99C; }
.entry-stamp.stamp-down { color: var(--danger); }
.ak-entry-card .cipher-strip { max-width: 100%; overflow: hidden; }
.ak-entry-card .cipher-strip.cipher-sm { font-size: 12px; letter-spacing: .1em; }
.ak-entry-card .cipher-strip.cipher-xs { font-size: 10px; letter-spacing: .05em; }

/* ═══════════ KAPIŞMA — design ekran 6/6b ═══════════ */
.duel-scorebar {
  display: flex; align-items: center; gap: 8px;
  padding-top: 4px;
}
.ds-card {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-radius: 16px; padding: 12px 14px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-display); font-weight: 800;
  transition: opacity .2s, box-shadow .2s;
}
.ds-card.a { border: 2px solid var(--gold); color: var(--gold); }
.ds-card.b { border: 2px solid var(--leak); color: var(--leak); }
.ds-card .ds-name { font-size: 13px; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-card .ds-pts { font-size: 17px; }
.ds-card.dim { opacity: .35; }
.ds-card.hot { box-shadow: 0 0 16px rgba(255,193,69,.35); }
.ds-card.b.hot { box-shadow: 0 0 16px rgba(46,196,182,.35); }
.ds-vs { font-weight: 800; font-size: 11px; color: #9FBDB6; white-space: nowrap; }
.duel-note { text-align: center; font-size: 11.5px; color: #7FA8A1; font-weight: 600; }

.duel-buzz {
  border: none; border-radius: 20px;
  padding: 18px 8px 16px;
  font-family: var(--font-body); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  flex: 1; min-width: 0;
  transition: transform .1s, opacity .2s;
}
.duel-buzz .db-name { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-buzz .db-txt { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.duel-buzz.a { background: linear-gradient(180deg, #FFD066, #F5B32B); color: #3A2A08; box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.duel-buzz.b { background: linear-gradient(180deg, #35D4C5, #23A99C); color: #06322D; box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.duel-buzz:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.duel-buzz:disabled { opacity: .3; pointer-events: none; }

.write-card {
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 20px; padding: 14px;
  background: rgba(255,255,255,.02);
}
.write-card.turn-a { border: 2.5px solid var(--gold); }
.write-card.turn-b { border: 2.5px solid var(--leak); }
.write-head { text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.write-card.turn-a .write-head { color: var(--gold); }
.write-card.turn-b .write-head { color: var(--leak); }
.write-head b { font-size: 19px; }
.duel-scorebar { margin-bottom: 14px; }

/* ═══════════ KAPIŞMA kurulum + sonuç — design 5/7 ═══════════ */
.pill-badge {
  align-self: center; background: var(--gold); color: #3A2A08;
  font-weight: 800; font-size: 12px; letter-spacing: .1em;
  padding: 8px 16px; border-radius: 999px;
}
.big-title {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: 44px; color: var(--txt); letter-spacing: .01em; line-height: 1.1;
}
.name-row {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px; padding: 4px 16px 4px 14px;
  background: rgba(255,255,255,.02);
}
.name-row.na { border: 2px solid rgba(255,193,69,.65); }
.name-row.nb { border: 2px solid rgba(46,196,182,.65); }
.name-row .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.name-row.na .dot { background: var(--gold); }
.name-row.nb .dot { background: var(--leak); }
.name-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--txt); font-family: var(--font-body); font-weight: 800; font-size: 16px;
  padding: 14px 0;
}
.name-row .who { font-size: 11px; color: #7FA8A1; font-weight: 700; white-space: nowrap; }
.hint-note { text-align: center; font-size: 11.5px; color: #7FA8A1; font-weight: 600; line-height: 1.5; }
.corner-mascot {
  position: absolute; right: -12px; bottom: -10px; width: 150px;
  pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
#screen-duel-setup { position: relative; overflow: hidden; }

.confetti-dots span {
  position: absolute; width: 12px; height: 18px; border-radius: 3px;
  opacity: .85; transform: rotate(24deg);
}
.confetti-dots span:nth-child(2n) { transform: rotate(-18deg); width: 10px; height: 14px; }
#screen-duel-end { position: relative; overflow: hidden; }
.champ-line {
  font-family: var(--font-display); font-weight: 800; font-size: 46px;
  color: var(--gold); text-align: center; line-height: 1.05;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.duel-final { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.df-a { color: var(--gold); }
.df-b { color: var(--leak); }
.df-sep { color: #9FBDB6; }
.end-mascots { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.em-big { width: 200px; }
.em-small { width: 96px; }
.end-body .btn { width: min(340px, 100%); border-radius: 16px; }

/* ═══════════ TAYFA giriş + lobi — design 8/9 ═══════════ */
.field-label { font-weight: 800; font-size: 11px; letter-spacing: .2em; color: #9FBDB6; margin-bottom: -6px; }
.rk-field { border-radius: 16px; border: 2px solid rgba(46,196,182,.45); font-weight: 700; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.or-sep i { flex: 1; height: 1px; background: #1D4750; }
.or-sep span { font-size: 11px; font-weight: 700; color: #7FA8A1; letter-spacing: .1em; }
.btn-join-solid {
  background: linear-gradient(180deg, #35D4C5, #23A99C); color: #06322D;
  border: none; border-radius: 16px; font-weight: 800; font-size: 14px;
  padding: 0 26px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.35);
  font-family: var(--font-body);
}
.btn-join-solid:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }

.lobby-code {
  position: relative; overflow: visible;
  background: linear-gradient(160deg, #17454B, #113439);
  border: 2px solid rgba(46,196,182,.4); border-radius: 22px;
  padding: 18px 16px 14px;
}
.lobby-code-label { font-weight: 800 !important; font-size: 11px !important; letter-spacing: .3em !important; color: #9FBDB6 !important; }
.lobby-code-val {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  color: var(--gold) !important; letter-spacing: .32em !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.lobby-code-hint { font-size: 11px !important; color: #7FA8A1 !important; font-weight: 600; }
.lobby-mascot {
  position: absolute; right: -14px; top: 50%; transform: translateY(-46%);
  width: 92px; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}

/* oyuncu çipleri */
.player-list { display: flex; flex-wrap: wrap; gap: 8px; }
.player-chip, .player-list > * {
  border-radius: 999px !important;
}
/* ayar hapları */
.setting-label { font-weight: 800 !important; letter-spacing: .2em !important; color: #9FBDB6 !important; }
.seg { border-radius: 999px; }
.seg button {
  border-radius: 999px !important; font-family: var(--font-body) !important;
  font-weight: 800 !important; border: 2px solid #2A5A62 !important; color: #BBD4CE;
  background: transparent;
}
.seg button.on {
  background: linear-gradient(180deg, #35D4C5, #23A99C) !important;
  color: #06322D !important; border-color: transparent !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
/* deste kartları */
.deck-card { border-radius: 16px !important; border-width: 2px !important; }
.deck-card.on { border-color: var(--leak) !important; background: rgba(46,196,182,.08) !important; }
.join-row { gap: 10px; }
.join-row .rk-field { flex: 1; min-width: 0; text-align: center; letter-spacing: .3em; font-weight: 800; }
.btn-join-solid { flex: 0 0 auto; padding: 14px 28px; }

/* ═══════════ TAYFA OYUN EKRANLARI — design 10-14 ═══════════ */
/* rol şeridi: üstte tam genişlik kart */
.role-bar {
  border: 2px solid rgba(46,196,182,.45); border-radius: 16px;
  background: rgba(46,196,182,.06);
  font-family: var(--font-body) !important; font-weight: 800; font-size: 13px;
  color: var(--leak); text-align: center; padding: 12px 10px;
  letter-spacing: .04em;
}
/* anlatanın kelime kutusu: krem kâğıt hissi */
.play-word {
  background: #EDE6D3; border-radius: 14px; border: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.play-word-label { color: #7A6C3E !important; font-weight: 800; letter-spacing: .2em; }
.play-word-text { color: #17130A !important; font-family: var(--font-display); font-weight: 800; }
/* süre halkası */
.timer-arc { stroke: var(--leak) !important; }
.timer-num { font-family: var(--font-display); font-weight: 800; color: var(--txt); }
/* tahminci beklerken düşünen rakun */
.play-body { position: relative; }
.play-body::before {
  content: ""; position: absolute; inset: 0;
  background: url("/img/rakun-dusunen.png") center 40%/140px no-repeat;
  opacity: .5; pointer-events: none;
}
.guess-feed { position: relative; z-index: 1; }
/* dev buzzer (12b) */
.btn-buzz {
  background: linear-gradient(180deg, #35D4C5, #23A99C) !important;
  color: #06322D !important; border: none !important; border-radius: 22px !important;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 24px !important; padding: 26px 10px !important;
  box-shadow: 0 6px 0 rgba(0,0,0,.35) !important;
}
.btn-buzz:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.35) !important; }
/* kelime seçim kartları (10): krem mini kâğıtlar */
.word-options button, .word-opt {
  background: #EDE6D3 !important; color: #17130A !important;
  border: none !important; border-radius: 14px !important;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.3) !important;
}
/* tur sonucu (13) */
.stamp-result {
  border-radius: 999px; border-width: 2px; letter-spacing: .1em;
  font-family: var(--font-display); font-weight: 800;
}
.result-word { font-family: var(--font-body) !important; font-weight: 700; }
.result-word strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.breakdown > *, .scoreboard > * { border-radius: 14px !important; }
.board-head { font-weight: 800 !important; letter-spacing: .2em !important; color: #9FBDB6 !important; }
/* final (14): ödül kartları 2 sütun */
.awards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.awards > * {
  border-radius: 16px !important; border: 2px solid #2A5A62 !important;
  background: rgba(255,255,255,.02) !important; text-align: left;
}
.final-winner { font-family: var(--font-display); font-weight: 800; color: var(--gold); }
/* geri sayım (11) */
.cd-digit { font-family: var(--font-display) !important; font-weight: 800 !important; color: var(--gold) !important; }
.cd-label { font-weight: 800 !important; letter-spacing: .3em !important; color: #9FBDB6 !important; }
/* DUR overlay (12d): turuncu tema */
.stop-overlay { background: rgba(190,65,20,.96) !important; }
.stop-word { font-family: var(--font-display) !important; font-weight: 800 !important; }
/* sheetler (15): tutma çubuğu + radius */
.sheet { border-radius: 26px 26px 0 0; }
.sheet::before {
  content: ""; display: block; width: 44px; height: 5px; border-radius: 3px;
  background: #2A5A62; margin: 0 auto 12px;
}
.sheet-title { font-family: var(--font-display); font-weight: 800; }
/* görev emri (briefing) kâğıdı zaten dossier — köşeler */
.dossier { border-radius: 16px; }
.your-role { font-weight: 800 !important; letter-spacing: .1em; }

/* ═══════════ geri bildirim düzeltmeleri (v55) ═══════════ */
/* KOD geniş, KATIL kompakt */
.join-row .field-code, .join-row .rk-field {
  flex: 2 1 0 !important; width: auto !important; min-width: 0 !important;
}
.btn-join-solid { flex: 1 1 0 !important; max-width: 150px; padding: 14px 10px; }
/* lobi kod kartı: topbara yapışmasın */
.lobby-code { margin-top: 14px; }
/* geri sayım: eski casus halkaları/etiket sil, doodle + rakun */
.cd-ring, .cd-ring-2 { display: none !important; }
.cd-glow { display: none !important; }
.cd-label {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  color: var(--txt) !important; letter-spacing: .2em !important; font-size: 17px !important;
}
.cd-digit {
  font-size: 150px !important;
  text-shadow: 0 6px 0 rgba(0,0,0,.4) !important;
}
.cd-overlay {
  background:
    url("/img/rakun-maskot.png") right -20px bottom -14px/160px no-repeat,
    radial-gradient(ellipse 90% 60% at 50% 30%, #143A44 0%, #0A1B21 70%) !important;
}
.cd-overlay::before {
  content: "✦"; position: absolute; top: 18%; left: 16%;
  color: var(--gold); font-size: 22px; opacity: .7;
}
.cd-overlay::after {
  content: "✧"; position: absolute; top: 26%; right: 14%;
  color: var(--leak); font-size: 18px; opacity: .7;
}
/* brifing kâğıdı rol etiketleri */
.role-label { font-weight: 800 !important; letter-spacing: .16em !important; }
.dossier-head { font-weight: 800 !important; letter-spacing: .24em !important; color: #8a7f65 !important; }