/* Mister Myster: Mystery Pick game UI (Lead A worker, 2026-10-19). Builds on mm.css tokens and components (.mm-btn, .mm-vs, .mm-label).
   Prefix .mm-oyun-* and .mm-oda-*. One light theme, no glass, no blur. Motion: transform and opacity only, only under html.motion and never for reduced motion.
   Layout is keyed on [data-gen] (dar < 600, orta < 900, genis), set by mm-oyun.js from the width of the game box, so it works inside any column. */

.mm-oyun { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; color: var(--c-night); font-family: var(--f-body); }
.mm-oyun:focus { outline: none; }
.mm-oyun-yedek { margin: 0; padding: 20px 24px; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); font: 600 18px/1.4 var(--f-body); }
.mm-oyun-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- header: label and round dots */
.mm-oyun-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; margin: 0 0 clamp(14px, 2vw, 22px); }
.mm-oyun-skor { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px 1px; border-radius: var(--r-pill); background: #fff; color: var(--c-night); box-shadow: 0 4px 12px rgba(42, 17, 96, .1); font: 800 15px/1 var(--f-head); white-space: nowrap; }
.mm-oyun[data-mm-oyun="tek"] .mm-oyun-skor { display: none; }

/* ---------------------------------------------------------------- scene: [room A] [vs + ring] [room B] */
.mm-oyun-sahne { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 2.4vw, 30px); }
.mm-oyun-sahne[hidden], .mm-oyun-bitis[hidden], .mm-oyun-ek[hidden], .mm-oyun-not[hidden] { display: none; }
.mm-oyun-orta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mm-oyun-orta .mm-vs { --vs: clamp(46px, 4.4vw, 58px); position: relative; z-index: 1; }
.mm-oyun-ring { position: relative; width: clamp(96px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); }
.mm-oyun-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-oyun-iz, .mm-oyun-ilk { fill: none; stroke-width: 10; }
.mm-oyun-iz { stroke: var(--c-line); }
.mm-oyun-ilk { stroke: var(--c-myster); stroke-linecap: round; }
.mm-oyun-ring[data-son] .mm-oyun-ilk { stroke: var(--c-sunny-deep); }
.mm-oyun-sure { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: .05em; font: 800 clamp(38px, 4.2vw, 52px)/1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--c-night); }
.mm-oyun[data-gen="dar"] .mm-oyun-sahne { grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; }
.mm-oyun[data-gen="dar"] .mm-oda-ad { padding: 10px 6px 8px; font-size: 18px; }
.mm-oyun[data-gen="dar"] .mm-oda-harf { left: 8px; bottom: 8px; width: 32px; height: 32px; font-size: 16px; }
.mm-oyun[data-gen="dar"] .mm-oda-rozetler { left: 6px; top: 6px; right: 6px; gap: 4px; }
.mm-oyun[data-gen="dar"] .mm-oda-rozet { height: 24px; padding: 0 9px; font-size: 12px; }
.mm-oyun[data-gen="dar"] .mm-oda-rozet.my { padding-left: 3px; }
.mm-oyun[data-gen="dar"] .mm-oda-rozet img { width: 18px; height: 18px; }
.mm-oyun[data-gen="dar"] .mm-oyun-orta { grid-column: 1 / -1; grid-row: 1; flex-direction: row-reverse; justify-content: center; gap: 14px; }
.mm-oyun[data-gen="dar"] .mm-oyun-ring { width: 84px; }
.mm-oyun[data-gen="dar"] .mm-oyun-sure { font-size: 34px; }
.mm-oyun[data-gen="dar"] .mm-oyun-orta .mm-vs { --vs: 44px; }

/* ---------------------------------------------------------------- room card: a real button, 4:3 illustration in a 22 px frame */
.mm-oda-kart { appearance: none; display: block; width: 100%; margin: 0; padding: 10px 10px 4px; border: 0; border-radius: var(--r-card); background: var(--g-surface); box-shadow: var(--shadow-card);
  color: var(--c-night); font: inherit; text-align: left; cursor: pointer; transition: transform .28s var(--e-out), opacity .28s var(--e-out); -webkit-tap-highlight-color: transparent; }
.mm-oda-kart:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 4px; }
.mm-oda-kart:disabled, .mm-oda-kart[aria-disabled="true"] { cursor: default; }
.motion .mm-oyun[data-durum="tur"] .mm-oda-kart:hover { transform: translateY(-4px); }
.motion .mm-oyun[data-durum="tur"] .mm-oda-kart:active { transform: translateY(0) scale(.985); }
.mm-oda-ill { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--g-screen); }
.mm-oda-ciz { display: block; width: 100%; height: 100%; }
.mm-oda-ciz svg { display: block; width: 100%; height: 100%; }
.mm-oda-harf { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding-bottom: .06em; border-radius: 50%; background: var(--g-yellow); color: var(--c-night);
  font: 800 20px/1 var(--f-head); box-shadow: 0 5px 12px rgba(42, 17, 96, .26), inset 0 1px 0 rgba(255, 255, 255, .55); }
.mm-oda-ad { display: block; padding: 12px 8px 10px; font: 800 clamp(20px, 2.1vw, 28px)/1.1 var(--f-head); letter-spacing: -.01em; }
.mm-oda-rozetler { position: absolute; z-index: 2; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.mm-oda-rozet { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font: 800 13px/1 var(--f-body); box-shadow: 0 5px 12px rgba(42, 17, 96, .26); }
.mm-oda-rozet.sen { background: var(--g-purple); color: #fff; }
.mm-oda-rozet.my { padding-left: 4px; background: var(--g-yellow); color: var(--c-night); }
.mm-oda-rozet img { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--g-sun); }
.mm-oda-kart.sen { box-shadow: var(--shadow-card), 0 0 0 4px var(--c-myster); }
.mm-oda-kart.my { box-shadow: var(--shadow-card), 0 0 0 4px var(--c-sunny-deep); }
.mm-oda-kart.sen.my { box-shadow: var(--shadow-card), 0 0 0 4px var(--c-myster), 0 0 0 9px var(--c-sunny-deep); }
.mm-oda-kart.soluk .mm-oda-ciz { opacity: .5; }
.motion .mm-oda-kart.sen { transform: translateY(-4px); }
/* the mystery (gift and gold star) over the room that hides it */
.mm-oda-gizem { position: absolute; z-index: 1; left: 50%; bottom: 2%; width: 34%; margin-left: -17%; aspect-ratio: 120 / 130; pointer-events: none; transform-origin: 50% 100%; }
.mm-oda-gizem::before { content: ""; position: absolute; left: -22%; right: -22%; top: -14%; bottom: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 226, 122, .55) 42%, rgba(255, 226, 122, 0) 70%); }
.mm-oda-gizem svg { position: relative; display: block; width: 100%; height: 100%; }
/* covered room before the game starts */
.mm-oda-kapak { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--g-purple); }
.mm-oda-kapak::before { content: ""; position: absolute; left: 50%; bottom: -50%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); transform: translateX(-50%); }
.mm-oda-kapak b { position: relative; margin-top: -22%; font: 800 clamp(64px, 9vw, 112px)/1 var(--f-head); color: #fff; text-shadow: 0 6px 0 rgba(42, 17, 96, .22); }

/* ---------------------------------------------------------------- status, hint, actions */
.mm-oyun-durum { max-width: 34em; min-height: 1.2em; margin: clamp(20px, 2.6vw, 32px) auto 0; text-align: center; font: 800 clamp(22px, 2.4vw, 32px)/1.15 var(--f-head); letter-spacing: -.01em; color: var(--c-night); }
.mm-oyun[data-durum="bos"] .mm-oyun-durum, .mm-oyun[data-durum="hazir"] .mm-oyun-durum { font: 700 clamp(17px, 1.5vw, 20px)/1.4 var(--f-body); letter-spacing: 0; color: var(--c-night-soft); }
.mm-oyun-ipucu { display: none; margin: 8px auto 0; text-align: center; font: 600 14px/1.4 var(--f-body); color: var(--c-night-soft); }
.mm-oyun[data-durum="tur"] .mm-oyun-ipucu { display: block; }
.mm-oyun-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; min-height: 60px; margin-top: clamp(16px, 2vw, 24px); }
.mm-oyun-not { margin: 14px auto 0; text-align: center; font: 600 14px/1.4 var(--f-body); color: var(--c-night-soft); }
.mm-oyun-ek { margin-top: 16px; }
.mm-oyun-metin { display: block; width: 100%; max-width: 28em; margin: 0 auto; padding: 12px 14px; border: 2px solid var(--c-line); border-radius: var(--r-small); background: #fff; color: var(--c-night); font: 600 14px/1.5 var(--f-body); resize: none; }
.mm-oyun-metin:focus-visible { outline: 3px solid var(--c-iris); outline-offset: 2px; }

/* ---------------------------------------------------------------- final screen */
.mm-oyun-bitis { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(22px, 4vw, 52px); padding: clamp(24px, 3.6vw, 48px); border-radius: var(--r-card); background: var(--g-surface); box-shadow: var(--shadow-card); }
.mm-oyun-puan { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 16px); width: clamp(170px, 21vw, 250px); aspect-ratio: 1; border-radius: 50%; background: var(--g-sun); box-shadow: 0 16px 34px rgba(245, 181, 12, .36); color: var(--c-night); }
.mm-oyun-puan span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-oyun-puan b { font: 800 clamp(54px, 7vw, 86px)/1 var(--f-head); letter-spacing: -.03em; }
.mm-oyun-puan i { padding-bottom: .1em; font: 800 clamp(38px, 5vw, 62px)/1 var(--f-head); font-style: normal; }
.mm-oyun-puan small { font: 800 clamp(13px, 1.3vw, 16px)/1.1 var(--f-body); }
.mm-oyun-cumle { margin: 0 0 14px; font: 800 clamp(22px, 2.6vw, 34px)/1.12 var(--f-head); letter-spacing: -.015em; color: var(--c-night); }
.mm-oyun-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mm-oyun-liste li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--c-line); }
.mm-oyun-liste b { display: block; font: 800 clamp(16px, 1.4vw, 19px)/1.25 var(--f-head); }
.mm-oyun-liste span span { display: block; margin-top: 2px; font: 600 14.5px/1.4 var(--f-body); color: var(--c-night-soft); }
.mm-oyun-pt { width: 14px; height: 14px; margin-top: .3em; border-radius: 50%; background: var(--c-line); }
.mm-oyun-pt.k1 { background: var(--c-myster); }
.mm-oyun-pt.k2 { background: var(--c-night); }
.mm-oyun-pt.k3 { background: var(--c-sunny); }
.mm-oyun[data-gen="dar"] .mm-oyun-bitis { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.mm-oyun[data-gen="dar"] .mm-oyun-liste { text-align: left; width: 100%; }

/* ---------------------------------------------------------------- motion: only with html.motion; transform and opacity */
@media (prefers-reduced-motion: no-preference) {
  .motion .mm-oda-kart.giris { animation: mm-oyun-gir .5s var(--e-pop) backwards; }
  .motion .mm-oda-kart[data-oda="B"].giris { animation-delay: .09s; }
  .motion .mm-oda-rozet { animation: mm-oyun-pop .38s var(--e-pop) backwards; }
  .motion .mm-oda-kart.sen.my { animation: mm-oyun-vur .5s var(--e-pop); }
  .motion .mm-oda-gizem { animation: mm-oyun-gizem .6s var(--e-pop) backwards; }
}
@keyframes mm-oyun-gir { from { opacity: 0; transform: translateY(22px) scale(.95); } }
@keyframes mm-oyun-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes mm-oyun-vur { 40% { transform: translateY(-8px) scale(1.03); } }
@keyframes mm-oyun-gizem { from { opacity: 0; transform: translateY(28%) scale(.2); } }
@media (prefers-reduced-motion: reduce) {
  .mm-oda-kart, .mm-oda-kart:hover, .mm-oda-kart:active, .mm-oda-kart.sen { transition: none; transform: none; animation: none; }
}