/* ============ Zenginleştirilmiş etkileşim sayfaları ============ */
.task { gap: 7px; }
.ribbon { display: flex; justify-content: center; }
.ribbon span {
  position: relative; display: inline-block; padding: 4px 26px 5px; background: var(--rust); color: #fbf3e2;
  font-family: var(--sc); font-size: 13px; letter-spacing: .18em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}
.task h3 { font-size: 1.5em; position: relative; }
.task h3::after { content: ''; display: block; width: 70px; height: 6px; margin: 4px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 6'%3E%3Cpath d='M2 3 Q 12 0 22 3 T 42 3 T 68 3' fill='none' stroke='%23c9962e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.scene { position: relative; flex: 1; min-height: 210px; }
.scene.framed { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px rgba(45,36,28,.35), 0 10px 18px -10px rgba(60,40,20,.45); margin: 6px 6px 4px; }
.scene.framed .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene.framed::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px; box-shadow: inset 0 0 40px rgba(80, 55, 25, .25); }
.scene .field { position: absolute; inset: 10px; min-height: 0; }
.scene.plain { display: flex; flex-direction: column; }
.scene.plain .field { position: relative; inset: auto; flex: 1; }
.sc-night .name-card, .sc-school .name-card { box-shadow: 3px 3px 0 var(--ink); }
.tw { animation: twinkle 2.6s ease-in-out infinite; }
.dust { animation: dust 6s ease-in-out infinite; }
@keyframes dust { 0%,100% { transform: translate(0,0); opacity: .2; } 50% { transform: translate(6px,-10px); opacity: .9; } }

/* Rehberin konuşma balonu */
.say { display: flex; align-items: flex-end; gap: 10px; min-height: 52px; padding: 0 4px; }
.say .avatar { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--ink); background: #f3e6c8; display: grid; place-items: center; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); }
.say .avatar svg { width: 86%; height: 86%; }
.say .avatar.av-yanki svg { width: 110%; height: 110%; }
.say .avatar.av-cira { background: #2f3b5c; }
.say .bubble { position: relative; flex: 1; background: #fffdf6; border: 1.5px solid var(--ink); border-radius: 14px 14px 14px 4px; padding: 7px 12px; font-size: 15.5px; line-height: 1.4; font-style: italic; color: var(--ink-2); }
.say .bubble::before { content: ''; position: absolute; left: -8px; bottom: 9px; width: 12px; height: 12px; background: inherit; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.say.done .bubble { background: #eef4e4; color: #33452a; font-style: normal; font-weight: 500; }
.say.empty { visibility: hidden; }
.say.pop .bubble { animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; }
.say.pop .avatar { animation: hop .6s ease both; }
.say .msg { color: inherit; font-weight: inherit; text-align: left; min-height: 0; font-style: inherit; }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(6px); } }
@keyframes hop { 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }

/* Görev bitince ışık patlaması */
.burst-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 8; }
.burst { width: 160px; animation: burst 1.3s ease-out both; }
@keyframes burst { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.5) rotate(10deg); opacity: 0; } }

/* Sürüklenebilir nesneler: el yapımı jeton */
.drag { background: radial-gradient(circle at 35% 30%, #fffaf0, #efe2c4); border: 1.5px solid var(--ink); box-shadow: 2px 3px 0 rgba(45,36,28,.6); animation: bobble 2.4s ease-in-out infinite; }
.drag:nth-of-type(2n) { animation-delay: .6s; }
.drag.dragging { animation: none; box-shadow: 4px 8px 0 rgba(45,36,28,.35); }
@keyframes bobble { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.drop.over { border-color: var(--rust); background: rgba(255, 246, 214, .45); }

/* Sahneye özel ayarlar */
.sc-night .window { border-color: #6b4a2b; }
.sc-night .window.lit { box-shadow: 0 0 40px 10px rgba(244,231,168,.45); }
.sc-school .word-list { color: #d8e2d6; }
.sc-school .word-list span.got { color: #f4e7a8; }
.sc-school .clue { color: #eaf0e6; font-family: var(--hand); font-size: 22px; font-style: normal; }
.sc-school .slot-l { color: #fff; border-bottom-color: #f4f1e6; font-size: 38px; }
.sc-school .tile { background: #fbf6ea; box-shadow: 2px 3px 0 #1f2f27; }
.sc-factory .net-kid { filter: grayscale(1) sepia(.4) opacity(.7); }
.sc-factory .net-kid.joined { filter: none; }
.sc-factory .chain-txt { background: rgba(251,246,234,.85); width: max-content; margin: 0 auto; padding: 1px 10px; border: 1px solid var(--ink); }
.sc-park .factory { background: rgba(203,191,168,.75); }
.sc-attic .chest-wrap { margin-top: 50px; }

/* Seçim sayfası küçük resmi */
.vignette { position: relative; height: 112px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--ink); margin: 2px 4px 10px; flex: none; }
.vignette .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette span { position: absolute; bottom: 4px; }
.vignette .v-kid { left: 12%; width: 40px; }
.vignette .v-cat { left: 24%; width: 46px; bottom: 2px; }
.vignette .v-sel { right: 14%; width: 50px; filter: grayscale(.6); }
.vignette .v-q { left: 0; right: 0; margin: 0 auto; width: max-content; top: 14px; bottom: auto; font-family: var(--hand); font-size: 48px; color: var(--rust); animation: float 3s ease-in-out infinite; }

/* Mühürlü şifreler */
.seal-item { background: #fffaf0; border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 2px 3px 0 rgba(45,36,28,.35); transition: transform .2s; }
.seal-item:not(.open):hover { transform: translateY(-2px) rotate(-.5deg); }
.seal-item .wax { width: 36px; height: 36px; font-size: 15px; border: 1.5px solid rgba(0,0,0,.35); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 0 0 3px rgba(0,0,0,.06); border-radius: 46% 54% 50% 50%; }
.seal-item.open .wax { animation: crack .5s ease both; }
@keyframes crack { 40% { transform: rotate(-14deg) scale(1.15); } 100% { transform: rotate(0) scale(1); } }

/* Empati kartı */
.ecard { border-radius: 10px; background: #fffaf0; box-shadow: 3px 4px 0 rgba(45,36,28,.3); border: 1.5px solid var(--ink); }
.ec-top { display: flex; gap: 10px; align-items: center; }
.ec-pic { flex: none; width: 66px; height: 80px; border-radius: 8px; background: #efe5cf; border: 1px solid var(--rule); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ec-pic svg { width: 54px; max-height: 74px; }
.ecard .choices { gap: 6px; }
.ecard .choice { font-size: 15px; padding: 6px 9px; }
.thread-line { position: relative; }
.thread-line.healed::after { content: '\2665'; position: absolute; right: -2px; top: -9px; color: var(--rust); font-size: 15px; animation: popIn .5s both; }

/* Kartlar ve seçenekler */
.m-item { background: #fffaf0; border: 1.5px solid var(--ink); box-shadow: 2px 3px 0 rgba(45,36,28,.3); border-radius: 8px; }
.m-item.matched { box-shadow: 2px 3px 0 #5f7f4a; }
.mission { padding: 7px 4px; }
.mission .box { border-radius: 3px; background: #fffaf0; }
.choice { background: #fffaf0; border-color: var(--ink-3); border-radius: 8px; box-shadow: 1px 2px 0 rgba(45,36,28,.2); transition: transform .15s, border-color .2s, background .2s; }
.choice:not([disabled]):hover { transform: translateX(3px); border-color: var(--ink); }

.task .skip { top: -4px; bottom: auto; right: 0; }
.pf-center.up { inset: auto 0 6% 0; width: 118px !important; }
.task + .stamp, .page > .stamp { top: 46px; bottom: auto; right: 16px; }
.content .ecard p, .content .ec-top p { text-indent: 0; }
.sc-factory .net-kid { width: 56px; }