/* ===========================================================
   DBE Hibrit Asesman — Mini-Game ortak görsel dili (mg-core)
   Sıcak illüstratif palet · tablet çerçevesi · telemetri
   =========================================================== */
:root{
  --cream:#FAF4E8; --cream-2:#F3E9D4; --cream-3:#FCF7EC;
  --terra:#C7794E; --terra-dark:#A85F38; --terra-h:#E7A878;
  --mustard:#D4A645; --mustard-dark:#B8862C;
  --navy:#26405E; --navy-soft:#3D5878; --navy-2:#1B2C40;
  --wood:#8A5A3B; --wood-dark:#5E3B23; --wood-l:#A56F49;
  --green:#5E9460; --green-bright:#6FB46F; --green-dark:#3E6B40;
  --blue:#5B86A8; --blue-dark:#3E6582;
  --rose:#C98B86;
  --bubble:#F4D06F; --bubble-line:#E0B33F;
  --line:#EBDCBE;
  --shadow:rgba(63,40,23,.22);
  --font:'Segoe UI Rounded',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--navy);
  background:radial-gradient(120% 90% at 50% 0%, var(--cream-3) 0%, var(--cream) 46%, var(--cream-2) 100%);
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px 14px 84px; overflow-x:hidden;
}

/* ---------- stage ---------- */
.mg-stage{ display:flex; align-items:center; justify-content:center; gap:18px; width:100%; max-width:780px; }

/* ---------- NPC ---------- */
.mg-npc{ display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto; width:150px; }
.mg-bubble{
  position:relative; background:var(--bubble); border:2px solid var(--bubble-line);
  color:#6B4E12; padding:12px 15px 13px; border-radius:20px 20px 20px 6px;
  font-size:17px; font-weight:600; line-height:1.25;
  box-shadow:0 6px 0 rgba(224,179,63,.35), 0 12px 22px var(--shadow);
  transform:rotate(-2deg); text-align:center; min-height:22px;
  transition:transform .25s ease, background .25s ease;
}
.mg-bubble::after{ content:""; position:absolute; left:22px; bottom:-13px; width:0;height:0;
  border:7px solid transparent; border-top-color:var(--bubble); border-bottom:0;
  filter:drop-shadow(0 2px 0 var(--bubble-line)); }
.mg-bubble.hint{ background:#F7E0A0; animation:mgBubblePulse 1.6s ease-in-out 2; }
@keyframes mgBubblePulse{50%{transform:rotate(-2deg) scale(1.06);}}
.mg-avatar{ width:72px;height:72px;border-radius:50%; background:var(--cream);
  border:3px solid #EAD9B6; box-shadow:0 8px 18px var(--shadow); display:block; }
.mg-avatar-name{ font-size:13px;font-weight:700;color:var(--navy-soft);letter-spacing:.4px; }

/* ---------- tablet ---------- */
.mg-tablet{ flex:0 0 auto; width:min(440px, 92vw);
  background:linear-gradient(160deg,#4A3526 0%, #3A2817 60%, #30200F 100%);
  border-radius:34px; padding:16px 14px; position:relative;
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 22px 44px -8px var(--shadow), 0 4px 10px rgba(0,0,0,.18); }
.mg-tablet::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%; background:#1c1308; box-shadow:0 0 0 2px rgba(0,0,0,.25); }
.mg-screen{ background:var(--cream); border-radius:22px; overflow:hidden; position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset, 0 2px 14px rgba(0,0,0,.14) inset;
  aspect-ratio:440/612; }

/* ---------- panels ---------- */
.mg-panel{ position:absolute; inset:0; display:none; flex-direction:column; }
.mg-panel.active{ display:flex; animation:mgFadeIn .3s ease; }
@keyframes mgFadeIn{ from{opacity:0;} to{opacity:1;} }

.mg-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 6px; gap:8px; }
.mg-title{ font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.25; flex:1; }
.mg-badge{ flex:0 0 auto; background:var(--mustard); color:#5B3F08; font-size:11.5px; font-weight:800;
  letter-spacing:.4px; padding:5px 11px; border-radius:999px; box-shadow:0 3px 8px rgba(212,166,69,.35);
  display:none; }
.mg-badge.show{ display:inline-block; animation:mgPop .4s ease; }
@keyframes mgPop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}

.mg-body{ position:relative; flex:1; min-height:0; }

/* ---------- intro ---------- */
.mg-intro{ padding:8px 22px 22px; justify-content:center; gap:16px; text-align:center; }
.mg-intro-illust{ width:100%; max-width:300px; margin:0 auto 2px; display:block; }
.mg-intro-text{ font-size:15.5px; color:var(--navy-soft); line-height:1.5; font-weight:500;
  max-width:300px; margin:0 auto; text-wrap:balance; }
.mg-steps{ display:flex; justify-content:center; gap:8px; margin:10px 0 2px; flex-wrap:wrap; }
.mg-chip{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid var(--line);
  border-radius:999px; padding:7px 13px 7px 9px; font-size:13px; font-weight:600; color:var(--navy);
  box-shadow:0 3px 8px rgba(63,40,23,.08); }
.mg-chip .dot{ width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800; }

/* ---------- buttons ---------- */
.mg-btn{ border:none; cursor:pointer; font-family:var(--font); font-weight:700; letter-spacing:.3px;
  border-radius:16px; padding:14px 30px; font-size:17px; user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.mg-btn-primary{ background:linear-gradient(180deg,var(--terra) 0%, var(--terra-dark) 100%); color:#fff;
  box-shadow:0 5px 0 #8A4E2C, 0 12px 20px rgba(167,95,56,.32); }
.mg-btn-primary:active{ transform:translateY(4px); box-shadow:0 1px 0 #8A4E2C, 0 6px 12px rgba(167,95,56,.3); }
.mg-btn-primary:hover{ filter:brightness(1.04); }
.mg-btn-primary:disabled{ filter:grayscale(.4) opacity(.6); cursor:default; box-shadow:0 5px 0 #8A4E2C; }
.mg-btn-ghost{ background:#fff; color:var(--navy); box-shadow:0 4px 0 #E3D2AE, 0 10px 18px rgba(63,40,23,.12); }
.mg-btn-ghost:active{ transform:translateY(3px); box-shadow:0 1px 0 #E3D2AE; }
.mg-btn-sm{ padding:11px 20px; font-size:14px; border-radius:13px; }

/* ---------- toast (non-shaming retry) ---------- */
.mg-toast{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.8);
  background:rgba(255,255,255,.96); border:2px solid var(--line); color:var(--navy);
  font-weight:700; font-size:16px; padding:12px 20px; border-radius:16px;
  box-shadow:0 10px 26px var(--shadow); opacity:0; pointer-events:none; z-index:6;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.4,.5,1);
  display:flex; align-items:center; gap:9px; }
.mg-toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---------- skip ---------- */
.mg-skip{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:6; }
.mg-skip.show{ opacity:1; visibility:visible; }
.mg-btn-skip{ background:#fff; color:var(--navy-soft); font-size:14px; font-weight:700; border:none;
  cursor:pointer; font-family:var(--font); border-radius:13px; padding:11px 20px;
  box-shadow:0 4px 0 #E3D2AE, 0 8px 16px rgba(63,40,23,.14); }
.mg-btn-skip:active{ transform:translateY(3px); box-shadow:0 1px 0 #E3D2AE; }

/* ---------- success ---------- */
.mg-success{ padding:24px; justify-content:center; align-items:center; gap:6px; text-align:center; }
.mg-success-icon{ width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #8FD08F, var(--green) 70%);
  display:grid;place-items:center;margin-bottom:8px;
  box-shadow:0 12px 28px rgba(62,107,64,.4); animation:mgPopIn .5s cubic-bezier(.2,1.5,.4,1); }
.mg-success-icon.neutral{ background:radial-gradient(circle at 38% 32%, #E8C879, var(--mustard) 70%);
  box-shadow:0 12px 28px rgba(184,134,44,.35); }
@keyframes mgPopIn{0%{transform:scale(.3);opacity:0;}100%{transform:scale(1);opacity:1;}}
.mg-success-icon svg{width:52px;height:52px;}
.mg-success-title{ font-size:24px; font-weight:800; color:var(--navy); margin:2px 0; }
.mg-success-sub{ font-size:15px; color:var(--navy-soft); font-weight:500; max-width:300px; }
.mg-success-bubble{ margin-top:14px; background:var(--bubble); border:2px solid var(--bubble-line);
  color:#6B4E12; font-weight:600; font-size:15px; padding:11px 16px; border-radius:16px 16px 16px 5px;
  box-shadow:0 5px 0 rgba(224,179,63,.3); animation:mgPopIn .5s .25s both cubic-bezier(.2,1.5,.4,1); }

/* ---------- confetti ---------- */
.mg-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:7; }
.mg-confetti i{ position:absolute; top:-14px; width:9px; height:13px; border-radius:2px; animation:mgFall linear forwards; }
@keyframes mgFall{ 0%{transform:translateY(0) rotate(0);opacity:1;} 100%{transform:translateY(640px) rotate(540deg);opacity:.85;} }

/* ---------- sound toggle ---------- */
.mg-sound{ position:absolute; top:10px; right:10px; z-index:8; width:34px;height:34px;border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.85); box-shadow:0 3px 8px rgba(63,40,23,.18);
  display:grid; place-items:center; }
.mg-sound svg{ width:18px;height:18px; }

/* ---------- telemetry ---------- */
.mg-tel{ position:fixed; left:0; right:0; bottom:0; z-index:40; font-family:var(--mono); }
.mg-tel-bar{ display:flex; align-items:center; justify-content:space-between; background:var(--navy);
  color:#E9F0F7; padding:9px 16px; cursor:pointer; box-shadow:0 -4px 18px rgba(38,64,94,.22); user-select:none; }
.mg-tel-bar .left{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.3px; font-family:var(--font); }
.mg-tel-dot{ width:8px;height:8px;border-radius:50%; background:var(--green-bright); box-shadow:0 0 0 3px rgba(111,180,111,.25); }
.mg-tel-tag{ background:rgba(255,255,255,.12); font-size:10px; padding:2px 7px; border-radius:6px; font-weight:700; letter-spacing:.5px; }
.mg-tel-count{ font-size:11px; opacity:.7; }
.mg-tel-chev{ transition:transform .25s ease; font-family:var(--font); }
.mg-tel.open .mg-tel-chev{ transform:rotate(180deg); }
.mg-tel-body{ max-height:0; overflow:hidden; background:var(--navy-2); color:#CDD9E6; transition:max-height .3s ease; }
.mg-tel.open .mg-tel-body{ max-height:230px; }
.mg-tel-scroll{ max-height:230px; overflow-y:auto; padding:8px 14px 12px; }
.mg-tel-row{ display:flex; gap:10px; align-items:baseline; font-size:11.5px; line-height:1.6; padding:1px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.mg-tel-ts{ color:#7FA0C4; flex:0 0 60px; text-align:right; }
.mg-tel-type{ flex:0 0 138px; font-weight:700; }
.mg-tel-payload{ color:#9FB4CC; word-break:break-word; }
.t-mg{color:#F4D06F;} .t-attempt{color:#8FD0F0;} .t-act{color:#E59A6C;}
.t-ok{color:#7FE08A;} .t-bad{color:#E58A8A;} .t-hint{color:#D9A6E0;} .t-meta{color:#9FB4CC;}

@media (max-width:560px){
  .mg-stage{ flex-direction:column; gap:10px; }
  .mg-npc{ flex-direction:row; width:auto; max-width:92vw; gap:12px; align-items:center; }
  .mg-npc .mg-avatar{ width:56px;height:56px; }
  .mg-npc .col{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
  .mg-bubble{ font-size:15.5px; transform:rotate(0); border-radius:16px 16px 16px 6px; }
  .mg-bubble::after{ left:18px; }
  .mg-bubble.hint{ transform:scale(1.02); }
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.01ms !important; } }