/* Oyun yardımcılarının görünümü (arac.js ile birlikte; 5 oyunda aynı kopya). */
.ar-oyun { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px 8px; }
.ar-hud { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; min-height: 44px; font-weight: 900; font-size: clamp(16px, 2.2vw, 26px); }
.ar-hud .ar-kutu { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: var(--kart); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); white-space: nowrap; }
.ar-hud .ar-kutu.renkli { background: var(--renk); color: #fff; }
.ar-hud .ar-kutu .emoji { font-size: 1.2em; }
.ar-hud .ar-kutu.soluk { opacity: .45; }
.ar-kap { flex: 1; min-height: 0; width: 100%; position: relative; display: grid; place-items: center; }
.ar-tuval { display: block; touch-action: none; border-radius: 22px; box-shadow: var(--golge); background: #2b2140; }
/* oyun ekranı: kenar boşluğu yok; tuval bir eksende kenara değer, kalan bant tuvalin kenar renkleriyle dolar (A.tuval) */
html.mini-oyunda .ar-oyun { padding: 0; gap: 0; }
html.mini-oyunda .ar-tuval { border-radius: 0; box-shadow: none; }
html.mini-oyunda .ar-hud { min-height: 52px; padding: 4px 8px; }
html.mini-oyunda .ar-hud { padding-left: max(8px, var(--ust-sol)); padding-right: max(8px, var(--ust-sag)); }

/* ---------- Bölüm menüsü ---------- */
.ar-menu { gap: clamp(10px, 1.8vh, 20px); }
.ar-alt-baslik { font-size: clamp(20px, 2.6vw, 32px) !important; }
.ar-bolumler { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(76px, 9vw, 112px), 1fr)); gap: clamp(8px, 1.2vw, 14px); width: min(1100px, 100%); }
.ar-bolum {
  position: relative; border: 4px solid transparent; border-radius: 22px; background: var(--kart); box-shadow: var(--golge);
  min-height: clamp(76px, 10vw, 112px); padding: 6px 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-weight: 900; transition: transform .12s;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--renk) 26%, transparent), transparent 70%);
}
.ar-bolum .no { position: absolute; left: 8px; top: 4px; font-size: clamp(14px, 1.5vw, 19px); color: var(--soluk); }
.ar-bolum .s { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.05; }
.ar-bolum .y { color: #ffb000; font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); min-height: 1.1em; }
.ar-bolum small { font-size: 12px; color: var(--soluk); font-weight: 800; }
.ar-bolum.secili { border-color: var(--sari); transform: scale(1.06); background-color: color-mix(in srgb, var(--sari) 20%, var(--kart)); }
.ar-bolum.kilitli { opacity: .55; filter: grayscale(.7); }
.ar-bolum:hover { transform: translateY(-2px) rotate(-1deg); }
.ar-basla { min-width: min(520px, 90%); }

/* ---------- Dokunmatik düğmeler (yalnız dokunmatik ekranda) ---------- */
.ar-dokun { display: none; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 6; justify-content: space-between; align-items: flex-end; padding: 0 6px 6px; gap: 8px; }
html.ar-dokunmatik .ar-dokun { display: flex; }
.ar-dokun-grup { display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.ar-dokun-grup.sag { margin-left: auto; }
.ar-yonler { display: grid; gap: 6px; pointer-events: none; }
.ar-yonler.y2 { grid-template-columns: repeat(2, 72px); }
.ar-yonler.y4 { grid-template-columns: repeat(3, 66px); grid-template-rows: repeat(2, 66px); }
.ar-yonler.y4 .yukari { grid-column: 2; grid-row: 1; }
.ar-yonler.y4 .sol { grid-column: 1; grid-row: 2; }
.ar-yonler.y4 .asagi { grid-column: 2; grid-row: 2; }
.ar-yonler.y4 .sag { grid-column: 3; grid-row: 2; }
.ar-dd {
  pointer-events: auto; touch-action: none; min-width: 66px; min-height: 66px; border: 4px solid var(--renk); border-radius: 22px;
  background: color-mix(in srgb, var(--kart) 72%, transparent); color: var(--yazi); font-size: 28px; font-weight: 900; padding: 0;
  display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); -webkit-user-select: none; user-select: none;
}
.ar-dd.tamam { width: 92px; height: 92px; border-radius: 50%; font-size: 40px; font-family: var(--emoji); background: color-mix(in srgb, var(--renk) 55%, transparent); }
.ar-dd.basili { transform: translateY(3px) scale(.95); background: var(--renk); color: #fff; }

/* ---------- Duyuru ---------- */
.ar-duyuru {
  position: absolute; left: 50%; top: 45%; z-index: 7; pointer-events: none; white-space: nowrap; text-align: center;
  font-size: clamp(42px, 9vmin, 120px); font-weight: 900; color: #fff; -webkit-text-stroke: 3px #2b2140;
  text-shadow: 0 6px 0 #2b2140, 0 0 30px rgba(0, 0, 0, .3); animation: ar-duyuru 1.2s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.ar-duyuru.kucuk { font-size: clamp(28px, 5.5vmin, 70px); }
.ar-duyuru.sari { color: var(--sari); }
@keyframes ar-duyuru { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-10deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }

/* ---------- Bölüm sonu yıldızları ---------- */
.ar-yildizlar { display: flex; justify-content: center; gap: 10px; font-size: clamp(54px, 10vmin, 96px); line-height: 1; margin: 4px 0 6px; }
.ar-yildizlar span { color: #d6d0e4; text-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.ar-yildizlar span.dolu { color: #ffc93c; animation: ar-yildiz .6s cubic-bezier(.2, 1.8, .4, 1) both; text-shadow: 0 4px 0 #d08a00, 0 0 24px rgba(255, 201, 60, .7); }
@keyframes ar-yildiz { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.ar-rekor { font-size: clamp(20px, 3vw, 30px); font-weight: 900; color: var(--mor); animation: mini-nabiz 1s ease-in-out infinite; }

@media (max-width: 640px) {
  .ar-dd { min-width: 60px; min-height: 60px; font-size: 24px; }
  .ar-yonler.y4 { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 60px); }
  .ar-yonler.y2 { grid-template-columns: repeat(2, 62px); }
  .ar-dd.tamam { width: 78px; height: 78px; }
}