/* gamedschool · görsel soru şekilleri (GFig) — şekil kartları her temada “kâğıt” görünümünde kalır */
.qfig, .qfig *, .qfig *::before, .qfig *::after { box-sizing: border-box; }
.qfig { position: relative; width: 100%; min-width: 0; margin: 12px 0 14px; padding: 16px 16px 26px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 18px; color: #1e293b; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); font-family: Outfit, 'Segoe UI', Arial, sans-serif; text-align: left; isolation: isolate; }
.qfig .qf-title { font-weight: 800; font-size: 14px; color: #334155; text-align: center; margin: 0 0 10px; letter-spacing: .01em; }
.qfig .qf-body { position: relative; z-index: 1; display: flex; justify-content: center; }
.qfig .qf-body > * { max-width: 100%; }
.qfig .qf-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.qfig .qf-cap { margin-top: 8px; font-size: 12.5px; color: #64748b; text-align: center; font-weight: 600; }
.qfig .qf-wm { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='132'%3E%3Ctext x='120' y='70' text-anchor='middle' transform='rotate(-24 120 66)' font-family='Outfit,Arial,sans-serif' font-size='17' font-weight='800' fill='%230f172a' fill-opacity='.07'%3Egamedschool%3C/text%3E%3C/svg%3E"); background-repeat: repeat; }
.qfig .qf-badge { position: absolute; right: 11px; bottom: 7px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; font: 800 10.5px/1 Outfit, Arial, sans-serif; color: #64748b; letter-spacing: .02em; pointer-events: none; user-select: none; }
.qfig .qf-badge b { font-weight: 800; }
.qfig .qf-mark { display: block; }
:root[data-theme="dark"] .qfig { background: #f8fafc; border-color: #334155; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qfig { background: #f8fafc; border-color: #334155; box-shadow: none; } }

/* konuşma balonları */
.qf-bub { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px 14px; width: 100%; }
.qf-b { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.qf-b.wide { grid-column: 1 / -1; }
.qf-b.right { flex-direction: row-reverse; }
.qf-who { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.qf-who b { font-size: 12.5px; font-weight: 800; color: #334155; text-align: center; line-height: 1.15; }
.qf-av { display: block; border-radius: 50%; }
.qf-say { position: relative; flex: 1; min-width: 0; padding: 10px 13px; background: var(--bc, #eff6ff); border: 2px solid var(--bd, #3b82f6); border-radius: 16px; font-size: 14.5px; line-height: 1.42; font-weight: 600; color: #1e293b; margin-top: 4px; overflow-wrap: anywhere; }
.qf-say::before { content: ''; position: absolute; left: -9px; top: 16px; width: 14px; height: 14px; background: var(--bc, #eff6ff); border-left: 2px solid var(--bd, #3b82f6); border-bottom: 2px solid var(--bd, #3b82f6); transform: rotate(45deg); }
.qf-b.right .qf-say::before { left: auto; right: -9px; transform: rotate(-135deg); }
.qf-b.wide .qf-say { font-size: 15px; }

/* tablolar */
.qf-tblw { width: 100%; overflow-x: auto; }
.qf-tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid #cbd5e1; border-radius: 14px; overflow: hidden; font-size: 14.5px; background: #fff; }
.qf-tbl th { background: #dbeafe; color: #1e3a8a; font-weight: 800; padding: 9px 12px; text-align: left; border-bottom: 2px solid #cbd5e1; }
.qf-tbl td { padding: 9px 12px; border-top: 1px solid #e2e8f0; font-weight: 600; color: #1e293b; vertical-align: middle; }
.qf-tbl tbody tr:first-child td { border-top: 0; }
.qf-tbl tbody tr:nth-child(even) td { background: #f8fafc; }
.qf-tbl th + th, .qf-tbl td + td { border-left: 1px solid #e2e8f0; }
.qf-tbl td[data-rh] { font-weight: 800; color: #334155; background: #f1f5f9; }
.qf-tbl.center th, .qf-tbl.center td { text-align: center; }
.qf-tbl.compact th, .qf-tbl.compact td { padding: 6px 9px; font-size: 13.5px; }
.qf-tbl tr.hl td, .qf-tbl td.hl { background: #fff7ed !important; }
.qf-tnote { margin-top: 8px; font-size: 12.5px; color: #64748b; font-weight: 600; }
.qf-ok, .qf-no, .qf-q { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 900; font-size: 15px; line-height: 1; }
.qf-ok { background: #dcfce7; color: #15803d; } .qf-no { background: #fee2e2; color: #b91c1c; } .qf-q { background: #fff7ed; color: #ea580c; border: 2px dashed #f97316; }
.qf-icos { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; }
.qf-icos .qf-svg { width: 26px; }
.qf-strong { font-weight: 800; }

/* numaralı kartlar */
.qf-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; width: 100%; }
.qf-card { position: relative; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--cl, #eff6ff); border: 2px solid var(--cc, #3b82f6); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qf-card .qf-k { align-self: flex-start; }
.qf-k { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 9px; background: var(--cc, #3b82f6); color: #fff; font-weight: 900; font-size: 14px; }
.qf-k.alt { background: #8b5cf6; }
.qf-ci .qf-svg { width: 44px; }
.qf-ct { font-size: 14.5px; font-weight: 800; color: #0f172a; }
.qf-cx { font-size: 14px; line-height: 1.42; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }

/* eşleştirme */
.qf-match { width: 100%; }
.qf-mh { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-weight: 800; font-size: 13px; color: #475569; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.qf-mc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.qf-mi { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 8px; border-radius: 12px; background: #f8fafc; border: 2px solid #e2e8f0; font-weight: 700; font-size: 14px; position: relative; }
.qf-mi i { width: 9px; height: 9px; border-radius: 50%; background: #1e293b; flex: none; }
.qf-mi.l i { margin-left: auto; } .qf-mi.l { padding-right: 9px; }
.qf-mi.l::after { content: ''; position: absolute; right: -34px; top: 50%; width: 28px; border-top: 2px dotted #94a3b8; }

/* afiş */
.qf-poster { position: relative; width: min(100%, 460px); padding: 20px 22px 18px; border-radius: 18px; overflow: hidden; color: #0f172a; background: var(--p1); border: 3px solid var(--p2); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6); }
.qf-poster .qf-pdeco { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 92% 8%, var(--p3) 0 46px, transparent 47px), radial-gradient(circle at 4% 96%, var(--p3) 0 38px, transparent 39px); opacity: .5; }
.qf-poster > *:not(.qf-pdeco) { position: relative; }
.qf-pk { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--p2); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qf-ph { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.qf-pi .qf-svg { width: 56px; }
.qf-pt { font-size: 23px; line-height: 1.15; font-weight: 900; color: var(--p4); letter-spacing: .01em; }
.qf-ps { font-size: 15px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.qf-pl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.qf-pl li { padding: 7px 11px; background: rgba(255, 255, 255, .78); border-radius: 10px; font-size: 14px; font-weight: 600; }
.qf-pl li b { color: var(--p4); }
.qf-pf { margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--p2); font-size: 13px; font-weight: 800; color: var(--p4); text-align: center; }
.th-blue { --p1: #eff6ff; --p2: #3b82f6; --p3: #bfdbfe; --p4: #1e3a8a; } .th-green { --p1: #f0fdf4; --p2: #22c55e; --p3: #bbf7d0; --p4: #14532d; }
.th-orange { --p1: #fff7ed; --p2: #f97316; --p3: #fed7aa; --p4: #7c2d12; } .th-purple { --p1: #f5f3ff; --p2: #8b5cf6; --p3: #ddd6fe; --p4: #4c1d95; }
.th-red { --p1: #fef2f2; --p2: #ef4444; --p3: #fecaca; --p4: #7f1d1d; } .th-teal { --p1: #f0fdfa; --p2: #14b8a6; --p3: #99f6e4; --p4: #134e4a; } .th-pink { --p1: #fdf2f8; --p2: #ec4899; --p3: #fbcfe8; --p4: #831843; }

/* not kâğıdı, sözlük, sohbet, harf kartları */
.qf-note { width: min(100%, 520px); padding: 14px 16px; border-radius: 6px 6px 18px 6px; box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .3); font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.qf-note p { margin: 0 0 6px; } .qf-note p:last-child { margin: 0; }
.qf-nh { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; margin-bottom: 6px; }
.qf-nh .qf-svg { width: 26px; margin: 0; }
.qf-note.t-yellow { background: #fef9c3; border-left: 6px solid #facc15; } .qf-note.t-blue { background: #e0f2fe; border-left: 6px solid #38bdf8; }
.qf-note.t-green { background: #dcfce7; border-left: 6px solid #4ade80; } .qf-note.t-pink { background: #fce7f3; border-left: 6px solid #f472b6; } .qf-note.t-purple { background: #ede9fe; border-left: 6px solid #a78bfa; }
.qf-dict { width: min(100%, 520px); padding: 14px 18px; border-radius: 14px; background: #fffbeb; border: 2px solid #fcd34d; font-size: 14.5px; line-height: 1.5; }
.qf-dw { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .qf-dw b { font-size: 20px; font-weight: 900; color: #78350f; } .qf-dw i { color: #b45309; font-weight: 700; font-size: 13px; }
.qf-dict ol { margin: 4px 0 0; padding-left: 20px; font-weight: 600; } .qf-dict li { margin: 2px 0; }
.qf-dx { margin-top: 8px; font-style: italic; color: #78350f; font-weight: 600; }
.qf-chat { width: min(100%, 360px); border-radius: 22px; border: 3px solid #1e293b; background: #f1f5f9; overflow: hidden; }
.qf-chh { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #1e293b; color: #fff; font-weight: 800; font-size: 14px; }
.qf-chb { display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.qf-cm { max-width: 82%; padding: 8px 11px; background: #fff; border-radius: 14px 14px 14px 4px; font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 1px rgba(15, 23, 42, .08); }
.qf-cm.me { align-self: flex-end; background: #dcfce7; border-radius: 14px 14px 4px 14px; }
.qf-cf { display: block; font-size: 11.5px; font-weight: 800; color: #2563eb; margin-bottom: 2px; }
.qf-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.qf-tile { min-width: 46px; height: 52px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 12px; background: #fff; border: 2.5px solid var(--tc, #3b82f6); box-shadow: 0 4px 0 var(--tc, #3b82f6); font-size: 22px; font-weight: 900; color: #0f172a; }
.qf-tile.hl { background: #fef08a; } .qf-tile.q { border-style: dashed; color: #ea580c; border-color: #f97316; box-shadow: none; background: #fff7ed; }
.qf-op { font-size: 24px; font-weight: 900; color: #475569; }

/* blok tabanlı kod */
.qf-code { display: flex; flex-direction: column; gap: 3px; width: min(100%, 360px); }
.qf-cb { padding: 9px 12px; border-radius: 10px; background: var(--kc); color: #fff; font-weight: 800; font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.qf-cb > span { display: block; }
.qf-cin { margin: 7px 0 0 14px; display: flex; flex-direction: column; gap: 3px; padding-left: 8px; border-left: 4px solid rgba(255, 255, 255, .45); }
.qf-cbe { height: 8px; margin: 6px -12px -9px; border-radius: 0 0 10px 10px; background: rgba(0, 0, 0, .12); }

@media (max-width: 560px) {
  .qfig { padding: 12px 10px 24px; border-radius: 14px; }
  .qf-bub { grid-template-columns: 1fr; }
  .qf-cards { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
  .qf-mc, .qf-mh { gap: 18px; } .qf-mi.l::after { display: none; }
  .qf-who { width: 54px; } .qf-say { font-size: 14px; }
  .qf-pt { font-size: 20px; }
}