/* 🀄 Kelime Mahjong + Renkli Taşlar (Riven 3 Eki: "görüntüsü 3D güzel olacak şekilde … renkli, şatafatlı"). mahjong.js, renkli-taslar.js */
body.mj-acik #screen { padding:0; gap:0; }
.mj-kok { position:relative; min-height:100%; display:flex; flex-direction:column; padding:8px 8px 0; overflow:hidden; background:var(--mj-bg); color:#1f2a44; isolation:isolate;
  --mj-kenar1:#38a67b; --mj-kenar2:#1d7652; --mj-vurgu:#2f86d6; --mj-vurgu-koyu:#1b5a9c; --mj-tepsi1:#2f86d6; --mj-tepsi2:#1b5a9c; --mj-tepsi-kenar:#134577; }

/* ── Temalar: gökyüzü + köşe süsleri + zemin; parçacık (yaprak, kar, kabarcık, yıldız) ── */
.tema-bahar { --mj-bg: radial-gradient(circle at -4% -2%, #ffb3d1 0 64px, #ffd0e3 65px 96px, transparent 97px), radial-gradient(circle at 104% 6%, #ffc2dc 0 54px, #ffe0ec 55px 84px, transparent 85px),
  radial-gradient(ellipse 80% 22% at 50% 104%, #8fd18a 0 70%, transparent 71%), linear-gradient(180deg, #a9dcff 0%, #e4f4ff 46%, #fff0f6 100%); }
.tema-yaz { --mj-bg: radial-gradient(circle at 86% 8%, #fff6b0 0 34px, #ffe066 35px 46px, transparent 70px), radial-gradient(ellipse 90% 18% at 50% 100%, #ffe3a3 0 60%, transparent 61%),
  linear-gradient(180deg, #6fd0f6 0%, #b9ecff 52%, #4fb6e3 78%, #ffe3a3 100%); --mj-tepsi1:#0ea5b7; --mj-tepsi2:#0b7285; --mj-tepsi-kenar:#095a69; --mj-vurgu:#0ea5b7; --mj-vurgu-koyu:#0b7285; }
.tema-sonbahar { --mj-bg: radial-gradient(circle at 0% 0%, #ff922b 0 58px, #ffc078 59px 90px, transparent 91px), radial-gradient(circle at 100% 3%, #f76707 0 48px, #ffa94d 49px 80px, transparent 81px),
  radial-gradient(ellipse 85% 20% at 50% 104%, #c27c3e 0 70%, transparent 71%), linear-gradient(180deg, #ffd8a8 0%, #ffe9cc 50%, #ffd0a1 100%);
  --mj-tepsi1:#e8590c; --mj-tepsi2:#a8410a; --mj-tepsi-kenar:#7c3007; --mj-vurgu:#e8590c; --mj-vurgu-koyu:#a8410a; --mj-kenar1:#c2622b; --mj-kenar2:#8a3f14; }
.tema-kis { --mj-bg: radial-gradient(ellipse 70% 20% at 20% 104%, #ffffff 0 70%, transparent 71%), radial-gradient(ellipse 70% 22% at 85% 106%, #f1f8ff 0 70%, transparent 71%),
  linear-gradient(180deg, #9fd0ff 0%, #d6ecff 50%, #f4faff 100%); --mj-tepsi1:#4dabf7; --mj-tepsi2:#1971c2; --mj-tepsi-kenar:#145591; --mj-kenar1:#5aa9e6; --mj-kenar2:#2b6cb0; }
.tema-gece { --mj-bg: radial-gradient(circle at 82% 10%, #fff9db 0 22px, rgba(255,249,219,.25) 23px 40px, transparent 41px), linear-gradient(180deg, #0b1a3a 0%, #1d2f66 55%, #3b2a6b 100%);
  --mj-tepsi1:#7048e8; --mj-tepsi2:#4c2fb0; --mj-tepsi-kenar:#36208a; --mj-vurgu:#9775fa; --mj-vurgu-koyu:#5f3dc4; --mj-kenar1:#7048e8; --mj-kenar2:#432a9e; color:#fff; }
.tema-col { --mj-bg: radial-gradient(circle at 50% 30%, #fff3bf 0 30px, rgba(255,212,59,.35) 31px 60px, transparent 61px), radial-gradient(ellipse 70% 20% at 25% 102%, #e8a35f 0 70%, transparent 71%),
  radial-gradient(ellipse 70% 18% at 80% 104%, #d98a48 0 70%, transparent 71%), linear-gradient(180deg, #ff8f6b 0%, #ffc078 45%, #ffe0a8 100%);
  --mj-tepsi1:#d9480f; --mj-tepsi2:#9c3608; --mj-tepsi-kenar:#702705; --mj-vurgu:#e8590c; --mj-vurgu-koyu:#a8410a; --mj-kenar1:#c76b29; --mj-kenar2:#8e4a1b; }
.tema-orman { --mj-bg: radial-gradient(circle at -2% 0%, #2f9e44 0 70px, #51cf66 71px 100px, transparent 101px), radial-gradient(circle at 102% 2%, #2b8a3e 0 60px, #40c057 61px 92px, transparent 93px),
  linear-gradient(180deg, #b2f2bb 0%, #d3f9d8 50%, #8ce99a 100%); --mj-tepsi1:#2f9e44; --mj-tepsi2:#1e7130; --mj-tepsi-kenar:#155224; --mj-vurgu:#2f9e44; --mj-vurgu-koyu:#1e7130; }
.tema-okyanus { --mj-bg: radial-gradient(ellipse 30% 70% at 30% -10%, rgba(255,255,255,.28) 0 60%, transparent 61%), radial-gradient(ellipse 25% 65% at 72% -10%, rgba(255,255,255,.2) 0 60%, transparent 61%),
  linear-gradient(180deg, #4fc3f7 0%, #1f78b4 55%, #0b3f73 100%); --mj-tepsi1:#1098ad; --mj-tepsi2:#0b7285; --mj-tepsi-kenar:#085563; --mj-kenar1:#15aabf; --mj-kenar2:#0b7285; color:#fff; }
.tema-uzay { --mj-bg: radial-gradient(circle at 85% 14%, #ffa8a8 0 18px, #e03131 19px 24px, transparent 25px), radial-gradient(circle at 12% 80%, #74c0fc 0 26px, #1c7ed6 27px 32px, transparent 33px),
  linear-gradient(180deg, #1b0f3b 0%, #3a1d6e 55%, #120a2a 100%); --mj-tepsi1:#ae3ec9; --mj-tepsi2:#7b2393; --mj-tepsi-kenar:#5c1a6e; --mj-vurgu:#cc5de8; --mj-vurgu-koyu:#862e9c; --mj-kenar1:#9c36b5; --mj-kenar2:#5f1f72; color:#fff; }
.tema-saray { --mj-bg: radial-gradient(circle at 10% 8%, #ff6b6b 0 16px, #c92a2a 17px 22px, transparent 23px), radial-gradient(circle at 90% 8%, #ff6b6b 0 16px, #c92a2a 17px 22px, transparent 23px),
  linear-gradient(180deg, #ffe066 0%, #ffd43b 30%, #f59f00 70%, #c2410c 100%); --mj-tepsi1:#c92a2a; --mj-tepsi2:#8f1d1d; --mj-tepsi-kenar:#661414; --mj-vurgu:#e03131; --mj-vurgu-koyu:#a61e1e; --mj-kenar1:#c92a2a; --mj-kenar2:#7f1d1d; }
.mj-sahne { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mj-sahne i { position:absolute; top:-8%; left:var(--x); font-style:normal; font-size:calc(17px * var(--s)); opacity:.8; animation:mjDus var(--g) linear infinite; animation-delay:calc(var(--i) * -1.3s); }
.tema-yaz .mj-sahne i, .tema-okyanus .mj-sahne i { top:auto; bottom:-8%; animation-name:mjYuksel; opacity:.55; }
.tema-gece .mj-sahne i, .tema-col .mj-sahne i, .tema-uzay .mj-sahne i, .tema-saray .mj-sahne i { top:calc(var(--x) * .55); animation-name:mjParla; }
@keyframes mjDus { from { transform:translate(0, 0) rotate(0); } to { transform:translate(30px, 112vh) rotate(320deg); } }
@keyframes mjYuksel { from { transform:translateY(0) scale(.8); } to { transform:translateY(-112vh) scale(1.2); } }
@keyframes mjParla { 0%, 100% { opacity:.15; transform:scale(.7); } 50% { opacity:.95; transform:scale(1.15); } }

/* ── Üst bilgi, tepsi, bilgi satırı ── */
.mj-ust { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.mj-ust span { background:rgba(255,255,255,.82); color:#1f2a44; border-radius:99px; padding:5px 12px; font-weight:800; font-size:14px; box-shadow:0 2px 0 rgba(0,0,0,.08); }
.mj-puan { color:#b35c00 !important; font-size:17px !important; min-width:54px; text-align:center; }
.mj-sure.az { background:#ffe3e3 !important; color:#c92a2a !important; animation:mjNabiz 1s ease-in-out infinite; }
@keyframes mjNabiz { 50% { transform:scale(1.08); } }
.mj-tepsi { position:relative; z-index:2; display:grid; grid-template-columns:repeat(var(--yuva), minmax(0, 1fr)); gap:4px; width:min(100%, 430px); margin:8px auto 0; padding:7px;
  border-radius:18px; background:linear-gradient(180deg, var(--mj-tepsi1), var(--mj-tepsi2)); box-shadow:inset 0 3px 8px rgba(0,0,0,.35), 0 4px 0 var(--mj-tepsi-kenar), 0 10px 20px rgba(0,0,0,.25); }
.mj-tepsi.tehlike { animation:mjTehlike 1.2s ease-in-out infinite; }
@keyframes mjTehlike { 50% { box-shadow:inset 0 3px 8px rgba(0,0,0,.35), 0 4px 0 var(--mj-tepsi-kenar), 0 0 0 3px rgba(255,107,107,.9), 0 0 22px rgba(255,80,80,.7); } }
.mj-yuva { position:relative; aspect-ratio:5 / 6; border-radius:10px; background:rgba(0,0,0,.2); box-shadow:inset 0 2px 5px rgba(0,0,0,.35); }
.mj-yuva .mj-tas.mini { position:absolute; inset:0; width:auto; height:auto; animation:mjIn .2s ease-out; --tw:inherit; }
.mj-yuva.patla .mj-tas.mini { animation:mjPatla .42s ease-in forwards; }
@keyframes mjIn { from { transform:scale(.6); opacity:.3; } }
@keyframes mjPatla { 0% { transform:scale(1); filter:brightness(1); } 40% { transform:scale(1.22) rotate(-4deg); filter:brightness(1.4) drop-shadow(0 0 10px #fff3bf); } 100% { transform:scale(0) rotate(12deg); opacity:0; } }
.mj-arti { position:absolute; left:50%; top:-8px; transform:translateX(-50%); font-weight:900; font-size:26px; color:#ffd43b; -webkit-text-stroke:1.5px #b35c00; text-shadow:0 3px 0 #b35c00, 0 6px 14px rgba(0,0,0,.35); pointer-events:none; animation:mjArti .9s ease-out forwards; z-index:5; }
@keyframes mjArti { from { transform:translate(-50%, 10px) scale(.6); opacity:0; } 30% { opacity:1; transform:translate(-50%, -6px) scale(1.15); } to { transform:translate(-50%, -40px) scale(1); opacity:0; } }
.mj-bilgi { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px; width:min(100%, 430px); min-height:36px; margin:8px auto 2px; padding:6px 12px; border-radius:14px;
  background:rgba(255,255,255,.86); color:#1f2a44; font-size:13.5px; font-weight:600; text-align:center; line-height:1.3; box-shadow:0 2px 0 rgba(0,0,0,.06); }
.mj-bilgi.dogru { background:#ebfbee; box-shadow:0 0 0 2px #51cf66; } .mj-bilgi.uyari { background:#fff4e6; box-shadow:0 0 0 2px #ffa94d; }
.mj-bilgi em { font-style:normal; font-weight:900; color:#e8590c; white-space:nowrap; }
.mj-bilgi .mj-dinle { flex:none; width:32px; height:32px; border-radius:50%; border:0; background:#2f9e44; color:#fff; display:grid; place-items:center; padding:0; }

/* ── 3D taş: fildişi yüz + yeşim sırt, katman kayması, gölge ── */
.mj-tahta { position:relative; z-index:1; width:100%; margin:4px 0 0; }
.mj-tas { position:absolute; width:var(--tw); height:var(--th); padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .14s ease; }
.mj-tas .mj-yuz { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; text-align:center; padding:3px; overflow:hidden;
  border-radius:calc(var(--tw) * .16); background:linear-gradient(158deg, #fffef9 0%, #fbf5e6 52%, #eee2c6 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(170,140,90,.25), 0 0 0 1px rgba(150,120,70,.28), 2px 3px 0 #ebe0c4, 3px 5px 0 #d9c9a2; transition:filter .2s, transform .14s; }
.mj-tas .mj-arka { position:absolute; inset:0; z-index:1; border-radius:calc(var(--tw) * .16); transform:translate(calc(var(--tw) * .085), calc(var(--th) * .09));
  background:linear-gradient(160deg, var(--mj-kenar1), var(--mj-kenar2)); box-shadow:0 calc(var(--th) * .1) calc(var(--th) * .2) rgba(15,25,45,.34); }
.mj-tas.acik:active .mj-yuz, .mj-tas.acik:hover .mj-yuz { transform:translateY(-2px); }
.mj-tas.kapali { cursor:default; } .mj-tas.kapali .mj-yuz { filter:brightness(.78) saturate(.65); }
.mj-tas.ters .mj-yuz { background:radial-gradient(circle at 32% 26%, #7ce0bb 0%, #2a9d77 48%, #176b51 100%); filter:none; }
.mj-tas.ters .mj-yuz > * { visibility:hidden; }
.mj-tas.ters .mj-yuz::after { content:""; position:absolute; inset:20%; border:2px solid rgba(255,255,255,.35); border-radius:28%; box-shadow:inset 0 0 0 4px rgba(255,255,255,.1); }
.mj-tas.donuyor .mj-yuz { animation:mjCevir .45s ease-out; }
@keyframes mjCevir { 0% { transform:rotateY(90deg); } 100% { transform:rotateY(0); } }
.mj-tas.ipucu .mj-yuz { box-shadow:0 0 0 3px #ffd43b, 0 0 18px 5px rgba(255,212,59,.9); animation:mjIpucu .7s ease-in-out infinite alternate; filter:none; }
@keyframes mjIpucu { to { transform:translateY(-3px) scale(1.04); } }
.mj-tas.salla { animation:mjSalla .3s; }
@keyframes mjSalla { 25% { transform:translateX(-4px) rotate(-2deg); } 75% { transform:translateX(4px) rotate(2deg); } }
.mj-kilit { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:calc(var(--tw) * .16);
  background:rgba(25,30,45,.6); color:#fff; font-weight:900; font-size:calc(var(--tw) * .26); }
.mj-kilit .ik svg { width:calc(var(--tw) * .3); height:calc(var(--tw) * .3); }
.mj-ucan { transition:transform .24s cubic-bezier(.3,.7,.3,1), opacity .24s; pointer-events:none; }
.mj-ucan .mj-arka { display:none; }

/* ── Taş yüzleri: İngilizce (yeşil, serif) · Türkçe (kırmızı) · cümle (lacivert) · resim ── */
.mj-en { font-family:Georgia, "Times New Roman", serif; font-weight:700; color:#1d6b3b; font-size:calc(var(--tw) * 1.38 / max(var(--uz), 4.6)); line-height:1.05; letter-spacing:-.01em; overflow-wrap:normal; word-break:keep-all; }
.mj-tr { color:#b02a37; font-weight:900; font-size:calc(var(--tw) * 1.3 / max(var(--uz), 4.8)); line-height:1.05; overflow-wrap:normal; word-break:keep-all; }
.mj-cumle { color:#24305a; font-weight:700; font-size:calc(var(--tw) * .168); line-height:1.13; word-break:break-word; hyphens:auto; }
.mj-cumle u { text-decoration:none; border-bottom:2px solid #e8590c; }
.mj-resim { font-size:calc(var(--tw) * .56); line-height:1; }
.mj-tas.mini .mj-en { font-size:calc(var(--tw) * 1.3 / max(var(--uz), 4.4)); } .mj-tas.mini .mj-tr { font-size:calc(var(--tw) * 1.22 / max(var(--uz), 4.6)); }
.mj-tas.mini .mj-cumle { font-size:calc(var(--tw) * .13); line-height:1.05; } .mj-tas.mini .mj-yuz { padding:1px; border-radius:8px; }

/* ── Alt düğmeler ── */
.mj-alt { position:relative; z-index:2; display:flex; justify-content:center; gap:26px; margin-top:auto; padding:8px 0 calc(10px + env(safe-area-inset-bottom)); }
.mj-yrd { position:relative; width:60px; height:60px; border-radius:50%; padding:0; display:grid; place-items:center; color:var(--mj-vurgu-koyu); cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #eef6ff 60%, #d7e9fb 100%); border:3px solid var(--mj-vurgu); box-shadow:0 4px 0 var(--mj-vurgu-koyu), 0 9px 16px rgba(0,0,0,.25); }
.mj-yrd:active { transform:translateY(3px); box-shadow:0 1px 0 var(--mj-vurgu-koyu); }
.mj-yrd .ik svg { width:26px; height:26px; }
.mj-yrd small { position:absolute; top:-6px; right:-8px; min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:#fa5252; color:#fff; font-size:11.5px; font-weight:900; display:grid; place-items:center; box-shadow:0 2px 0 #c92a2a; white-space:nowrap; }
.mj-yrd.bos { filter:grayscale(.85); opacity:.55; }

/* ── Bitiş kartı ── */
.mj-son { position:absolute; inset:0; z-index:40; display:grid; place-items:center; padding:16px; background:rgba(10,18,38,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:mjIn .25s; }
.mj-son-kart { width:min(100%, 390px); max-height:90%; overflow:auto; padding:20px 18px 16px; border-radius:24px; background:#fffdf6; color:#1f2a44; text-align:center; box-shadow:0 12px 0 rgba(0,0,0,.08), 0 24px 50px rgba(0,0,0,.35); animation:mjKart .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes mjKart { from { transform:scale(.7); opacity:0; } }
.mj-son-bas { display:block; font-size:26px; font-weight:900; color:#1f2a44; }
.mj-son-kart.kazandi .mj-son-bas { background:linear-gradient(180deg, #ffd43b, #f59f00); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px #b35c00; font-size:32px; }
.mj-yildizlar { display:flex; justify-content:center; gap:6px; margin:6px 0 2px; }
.mj-yildizlar i { font-style:normal; font-size:48px; line-height:1; color:#dee2e6; text-shadow:0 3px 0 #adb5bd; }
.mj-yildizlar i.dolu { color:#ffd43b; text-shadow:0 3px 0 #e8590c, 0 0 18px rgba(255,212,59,.8); animation:mjYildiz .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay:var(--d); }
@keyframes mjYildiz { from { transform:scale(0) rotate(-40deg); } }
.mj-son-ozet { margin:6px 0 10px; font-weight:700; color:#495057; } .mj-son-ozet b { color:#2f9e44; }
.mj-son-alt { margin:4px 0 6px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#868e96; }
.mj-kelimeler { list-style:none; margin:0 0 12px; padding:0; text-align:left; display:grid; gap:6px; }
.mj-kelimeler li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; background:#f1f3f5; }
.mj-kelimeler button { flex:none; width:34px; height:34px; border-radius:50%; border:0; background:#2f9e44; color:#fff; display:grid; place-items:center; padding:0; }
.mj-kelimeler span { min-width:0; } .mj-kelimeler b { color:#1d6b3b; } .mj-kelimeler small { display:block; color:#495057; font-style:italic; }
.mj-son-dug { display:grid; gap:8px; } .mj-son-dug .btn { margin:0; }

/* ── Lobi ── */
.mjl { display:flex; flex-direction:column; gap:14px; padding-bottom:20px; }
.mjl-kahraman { position:relative; overflow:hidden; border-radius:24px; padding:18px 18px 16px; color:#fff; background:radial-gradient(circle at 92% 0%, rgba(255,212,59,.45), transparent 46%), linear-gradient(150deg, #1d6b3b, #0b3d2a); box-shadow:0 5px 0 #082c1f; }
.mjl-kahraman h1 { margin:0 0 4px; font-size:24px; color:#fff; max-width:60%; line-height:1.1; } .mjl-kahraman p { margin:0 0 10px; font-size:14px; line-height:1.4; color:#d3f9d8; max-width:62%; } .mjl-kahraman p b { color:#fff; }
.mjl-taslar { position:absolute; right:10px; top:14px; width:118px; height:110px; }
.mjl-taslar span { position:absolute; width:52px; height:64px; display:grid; place-items:center; text-align:center; padding:3px; border-radius:9px; font-weight:800; line-height:1.05;
  background:linear-gradient(158deg, #fffef9, #efe3c6); box-shadow:2px 3px 0 #e6d9b8, 5px 7px 0 #2a9d77, 6px 12px 14px rgba(0,0,0,.35); }
.mjl-taslar .t1 { left:0; top:20px; color:#1d6b3b; font-family:Georgia, serif; font-size:17px; transform:rotate(-8deg); }
.mjl-taslar .t2 { left:36px; top:0; color:#b02a37; font-size:15px; z-index:2; } .mjl-taslar .t3 { left:66px; top:36px; color:#24305a; font-size:10px; transform:rotate(7deg); }
.mjl-ozet { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .mjl-ozet span { background:rgba(255,255,255,.16); border-radius:99px; padding:5px 11px; font-size:13px; font-weight:800; }
.mjl-oyna { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:16px; padding:12px 20px; font:inherit; font-size:17px; font-weight:900; color:#1f2a44; background:#ffd43b; box-shadow:0 4px 0 #b88a00; cursor:pointer; }
.mjl-oyna:active { transform:translateY(3px); box-shadow:0 1px 0 #b88a00; }
.mjl-bant { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .mjl-bant small { color:var(--muted); font-weight:700; margin-right:4px; }
.mjl-bant button { border:0; border-radius:99px; padding:7px 13px; font:inherit; font-weight:800; font-size:13px; background:var(--card); color:var(--ink); box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.mjl-bant button[aria-pressed="true"] { background:#2f9e44; color:#fff; box-shadow:0 3px 0 #1d6b3b; }
.mjl-kural { margin:0; padding-left:20px; line-height:1.5; font-size:14px; } .mjl-kural li { margin-bottom:4px; }
.mjl-grup { border-radius:20px; padding:12px; background:var(--mj-bg); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.mjl-grup > b { display:inline-block; margin:0 0 10px; padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.85); color:#1f2a44; font-size:13.5px; }
.mjl-izgara { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.mjl-b { position:relative; aspect-ratio:1; border:0; border-radius:16px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; font:inherit;
  background:linear-gradient(158deg, #fffef9, #efe3c6); color:#1d6b3b; box-shadow:0 3px 0 #d9c9a2, 0 6px 0 var(--mj-kenar2, #1d7652); }
.mjl-b span { font-size:18px; font-weight:900; font-family:Georgia, serif; } .mjl-b i { font-style:normal; font-size:10.5px; letter-spacing:-.5px; color:#f59f00; }
.mjl-b.sirada { box-shadow:0 0 0 3px #ffd43b, 0 3px 0 #d9c9a2, 0 6px 0 var(--mj-kenar2, #1d7652); animation:mjIpucu .8s ease-in-out infinite alternate; }
.mjl-b.kilitli { filter:grayscale(.9) brightness(.85); opacity:.55; cursor:default; }
:root[data-theme="dark"] .mjl-grup > b { background:rgba(0,0,0,.45); color:#fff; }

/* ── 🌈 Renkli Taşlar (çocuk): gökkuşağı, balonlar, şeker renkli taşlar ── */
.rnk-menu { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:16px 14px 22px; border-radius:28px;
  background:radial-gradient(circle at 12% 8%, #fff 0 22px, transparent 23px), radial-gradient(circle at 18% 10%, #fff 0 16px, transparent 17px), radial-gradient(circle at 86% 14%, #fff 0 20px, transparent 21px),
  linear-gradient(180deg, #a5d8ff 0%, #d0bfff 38%, #ffdeeb 72%, #fff3bf 100%); }
.rnk-balonlar { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.rnk-balonlar i { position:absolute; bottom:-12%; left:calc(var(--i) * 16% + 4%); font-style:normal; font-size:30px; animation:rnkBalon 9s ease-in-out infinite; animation-delay:calc(var(--i) * -1.6s); opacity:.85; }
.rnk-balonlar.oyun i { font-size:24px; opacity:.6; left:calc(var(--i) * 12% + 2%); }
@keyframes rnkBalon { 0% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-60vh) rotate(6deg); } 100% { transform:translateY(-120vh) rotate(-6deg); } }
.rnk-menu > *:not(.rnk-balonlar) { position:relative; z-index:1; }
.rnk-baslik { margin:0; text-align:center; font-size:40px; font-weight:900; letter-spacing:.01em; line-height:1.05; }
.rnk-baslik span { display:inline-block; color:hsl(calc(var(--i) * 32), 85%, 52%); text-shadow:0 3px 0 rgba(0,0,0,.18), 0 0 12px rgba(255,255,255,.9); animation:rnkZipla 1.6s ease-in-out infinite; animation-delay:calc(var(--i) * .08s); }
@keyframes rnkZipla { 50% { transform:translateY(-6px) rotate(-3deg); } }
.rnk-koci { display:flex; align-items:center; justify-content:center; gap:8px; } .rnk-koci svg, .rnk-koci img { width:64px; height:64px; }
.rnk-koci span { background:#fff; color:#5f3dc4; font-weight:800; border-radius:18px; padding:8px 12px; box-shadow:0 3px 0 #d0bfff; }
.rnk-alt { margin:4px 0 0; text-align:center; font-weight:900; color:#5f3dc4; font-size:17px; }
.rnk-modlar { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rnk-mod { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border:0; border-radius:22px; background:#fff; color:#3b2a6b; font:inherit; cursor:pointer; box-shadow:0 5px 0 #b197fc, 0 10px 18px rgba(95,61,196,.18); }
.rnk-mod.secili { background:linear-gradient(180deg, #fff9db, #ffe066); box-shadow:0 5px 0 #f59f00, 0 0 0 3px #fff, 0 12px 22px rgba(245,159,0,.35); transform:translateY(-2px); }
.rnk-mod b { font-size:15px; } .rnk-mod small { font-size:11.5px; color:#6c5aa8; font-weight:700; line-height:1.25; text-align:center; }
.rnk-mod-taslar { display:flex; gap:6px; margin-bottom:4px; }
.rnk-mod-taslar i { width:44px; height:52px; display:grid; place-items:center; border-radius:10px; font-style:normal; font-weight:900; font-size:16px; color:#7048e8; background:linear-gradient(158deg, #fff, #f1ecff); box-shadow:2px 3px 0 #e5dbff, 4px 6px 0 #ff8fab; }
.rnk-mod-taslar i:nth-child(2) { font-size:24px; box-shadow:2px 3px 0 #e5dbff, 4px 6px 0 #63e6be; } .rnk-mod-taslar i.tr { font-size:15px; color:#e8590c; }
.rnk-temalar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.rnk-tema { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border:0; border-radius:18px; background:rgba(255,255,255,.9); font:inherit; color:#3b2a6b; cursor:pointer; box-shadow:0 4px 0 #d0bfff; }
.rnk-tema span { font-size:28px; line-height:1; } .rnk-tema b { font-size:12.5px; }
.rnk-tema { transition:transform .15s, box-shadow .15s, background .15s; }
.rnk-tema.secili { background:linear-gradient(180deg, #fff9db, #ffe066); color:#7a4a00; box-shadow:0 4px 0 #f59f00, 0 0 0 3px #fff, 0 10px 18px rgba(245,159,0,.35); transform:translateY(-2px); }   /* Riven 3 Eki: seçili konu üstteki mod kartı gibi sarı yansın */
.rnk-oyna { align-self:center; margin-top:6px; border:0; border-radius:99px; padding:16px 40px; font:inherit; font-size:24px; font-weight:900; color:#fff; cursor:pointer;
  background:linear-gradient(180deg, #ff8787, #f03e3e); box-shadow:0 6px 0 #c92a2a, 0 14px 24px rgba(240,62,62,.4); animation:mjNabiz 1.4s ease-in-out infinite; }
.rnk-oyna:active { transform:translateY(4px); box-shadow:0 2px 0 #c92a2a; }
.rnk-kok { --mj-bg: radial-gradient(circle at 10% 6%, #fff 0 20px, transparent 21px), radial-gradient(circle at 16% 8%, #fff 0 15px, transparent 16px), radial-gradient(circle at 88% 10%, #fff 0 18px, transparent 19px),
  radial-gradient(ellipse 80% 18% at 50% 104%, #8ce99a 0 70%, transparent 71%), linear-gradient(180deg, #a5d8ff 0%, #d0bfff 40%, #ffdeeb 75%, #fff3bf 100%);
  --mj-tepsi1:#cc5de8; --mj-tepsi2:#9c36b5; --mj-tepsi-kenar:#7b2393; --mj-vurgu:#f783ac; --mj-vurgu-koyu:#d6336c; }
.rnk-tas .mj-arka { background:linear-gradient(160deg, var(--rnk-kenar, #ff8fab), color-mix(in srgb, var(--rnk-kenar, #ff8fab) 70%, #000)); }
.rnk-tas .mj-yuz { flex-direction:column; gap:1px; background:linear-gradient(158deg, #ffffff 0%, #fbf8ff 55%, #efe8ff 100%); box-shadow:inset 0 2px 0 #fff, 0 0 0 1px rgba(150,120,200,.25), 2px 3px 0 #e9e1ff, 3px 5px 0 #d6c8ff; }
.rnk-en { font-family:inherit; color:#6741d9; font-weight:900; } .rnk-tr { color:#e8590c; }
.rnk-resim { font-size:calc(var(--tw) * .6); filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.rnk-ipucu-resim { font-size:calc(var(--tw) * .28); line-height:1; }
.rnk-sayac { color:#9c36b5 !important; }
.rnk-bilgi { font-size:15px; font-weight:800; color:#5f3dc4; } .rnk-bilgi.dogru { background:#fff9db; box-shadow:0 0 0 3px #ffd43b; } .rnk-bilgi em { color:#e64980; font-size:16px; }
.rnk-buyuk { font-size:26px; line-height:1; }
.rnk-yildiz { position:absolute; left:50%; top:50%; font-style:normal; font-size:22px; pointer-events:none; z-index:6; animation:rnkPatla .8s ease-out forwards; }
@keyframes rnkPatla { from { transform:translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(.4); opacity:1; } to { transform:translate(-50%, -50%) rotate(var(--a)) translateY(-90px) scale(1.2); opacity:0; } }
.rnk-kok .mj-yrd { font-size:24px; background:radial-gradient(circle at 35% 30%, #fff 0%, #fff0f6 60%, #ffdeeb 100%); }
.rnk-son-kart { box-shadow:0 0 0 5px #ffd43b, 0 0 0 10px #ff8fab, 0 24px 50px rgba(0,0,0,.35); }
.rnk-son-kart.kazandi .mj-son-bas { background:linear-gradient(90deg, #f03e3e, #f59f00, #37b24d, #1c7ed6, #ae3ec9); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0; font-size:38px; }
.rnk-odul { margin:4px 0 8px; font-weight:900; color:#d6336c; }
.rnk-kelimeler li { gap:8px; } .rnk-kelimeler button { background:#cc5de8; }