/* 🧠 AI 마음 읽기 (mindreader) — 수정구슬·보랏빛 밤하늘 */
#mr-wrap {
  --mr-bg: #f6f3ff; --mr-card: #ffffff; --mr-line: #e4dcfb; --mr-text: #241a3d; --mr-sub: #6d6390;
  --mr-acc: #6d3fe0; --mr-acc2: #b06cff; --mr-gold: #c98a00; --mr-soft: #efe9ff;
  --mr-yes: #13863f; --mr-no: #d02b2b; --mr-dunno: #6b6880; --mr-partly: #b46a00;
  width: 100%; max-width: none; margin: 0 auto 8px; box-sizing: border-box; color: var(--mr-text); position: relative;
}
html[data-theme="dark"] #mr-wrap {
  --mr-bg: #120d22; --mr-card: #1b1430; --mr-line: #34295a; --mr-text: #eee8ff; --mr-sub: #a99fcc;
  --mr-acc: #9b74ff; --mr-acc2: #c99bff; --mr-gold: #ffcc4d; --mr-soft: #251c42;
  --mr-yes: #3fd47a; --mr-no: #ff6b6b; --mr-dunno: #b3aecb; --mr-partly: #ffb547;
}
#mr-wrap *, #mr-wrap *::before, #mr-wrap *::after { box-sizing: border-box; }
#mr-wrap [hidden] { display: none !important; }
.mr-card { background: var(--mr-card); border: 1px solid var(--mr-line); border-radius: 20px; padding: 22px 18px; box-shadow: 0 10px 30px rgba(80, 40, 160, .10); text-align: center; }

/* 수정구슬 */
.mr-orb { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, #d9c6ff 14%, #8a5cf0 48%, #3b1d8a 78%, #1d0f45 100%);
  box-shadow: 0 0 0 4px rgba(155, 116, 255, .18), 0 10px 30px rgba(109, 63, 224, .45); animation: mrFloat 3.6s ease-in-out infinite; }
.mr-orb span { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 60% 65%, rgba(255, 210, 120, .55), transparent 55%); animation: mrSwirl 5s linear infinite; }
.mr-orb.small { width: 54px; height: 54px; margin: 0; flex-shrink: 0; }
.mr-orb.thinking { animation: mrFloat 1s ease-in-out infinite; box-shadow: 0 0 0 6px rgba(255, 204, 77, .25), 0 0 26px rgba(176, 108, 255, .8); }
@keyframes mrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mrSwirl { to { transform: rotate(360deg); } }

.mr-title { font-size: 1.35rem; font-weight: 900; margin: 4px 0 14px; color: var(--mr-text); }
.mr-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mr-cat { min-height: 52px; border: 1.5px solid var(--mr-line); background: var(--mr-soft); color: var(--mr-text); border-radius: 14px; font-size: .86rem; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; line-height: 1.2; }
.mr-cat i { font-style: normal; font-size: 1.15rem; }
.mr-cat.on { border-color: var(--mr-acc); background: var(--mr-acc); color: #fff; box-shadow: 0 4px 14px rgba(109, 63, 224, .35); }
.mr-label { display: block; text-align: left; font-weight: 800; font-size: .92rem; margin: 0 2px 6px; color: var(--mr-text); }
.mr-label small { font-weight: 600; color: var(--mr-sub); margin-left: 4px; }
.mr-inrow { display: flex; gap: 8px; }
#mr-secret { flex: 1; min-width: 0; height: 50px; border: 1.5px solid var(--mr-line); border-radius: 14px; padding: 0 14px; font-size: 16px; background: var(--mr-bg); color: var(--mr-text); outline: none; }
#mr-secret:focus { border-color: var(--mr-acc); }
.mr-btn { min-height: 50px; padding: 0 22px; border: none; border-radius: 14px; font-weight: 900; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--mr-acc), var(--mr-acc2)); box-shadow: 0 6px 16px rgba(109, 63, 224, .3); flex-shrink: 0; }
.mr-btn:disabled { opacity: .55; cursor: default; }
.mr-btn.ghost { background: var(--mr-soft); color: var(--mr-text); box-shadow: none; border: 1.5px solid var(--mr-line); }
.mr-btn.wide { width: 100%; margin-top: 14px; }
.mr-err { min-height: 1.3em; margin: 8px 2px 0; font-size: .85rem; color: var(--mr-no); text-align: left; font-weight: 700; }

.mr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mr-stats div { background: var(--mr-soft); border-radius: 12px; padding: 10px 4px; }
.mr-stats b { display: block; font-size: 1.15rem; font-weight: 900; color: var(--mr-acc); }
.mr-stats small { font-size: .74rem; color: var(--mr-sub); }
.mr-recent { margin-top: 12px; text-align: left; font-size: .84rem; color: var(--mr-sub); line-height: 1.6; }
.mr-recent h4 { font-size: .86rem; margin: 8px 0 4px; color: var(--mr-text); font-weight: 800; }
.mr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-tag { background: var(--mr-soft); border: 1px solid var(--mr-line); color: var(--mr-text); border-radius: 99px; padding: 3px 10px; font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-tag em { font-style: normal; color: var(--mr-sub); margin-left: 3px; }

/* 플레이 */
.mr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.mr-chip { background: var(--mr-acc); color: #fff; font-weight: 800; font-size: .8rem; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.mr-prog { font-size: .84rem; font-weight: 800; color: var(--mr-sub); }
.mr-bar { height: 6px; background: var(--mr-soft); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.mr-bar i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--mr-acc), var(--mr-gold)); border-radius: 99px; transition: width .4s; }
.mr-ai { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin-bottom: 16px; }
.mr-bubble { flex: 1; min-width: 0; min-height: 76px; background: var(--mr-soft); border: 1px solid var(--mr-line); border-radius: 4px 18px 18px 18px; padding: 12px 14px; font-size: 1.08rem; font-weight: 800; line-height: 1.45; color: var(--mr-text); word-break: keep-all; overflow-wrap: anywhere; }
.mr-qn { display: inline-block; font-size: .74rem; font-weight: 900; color: #fff; background: var(--mr-gold); border-radius: 6px; padding: 1px 7px; margin-right: 6px; vertical-align: 2px; }
html[data-theme="dark"] .mr-qn { color: #2a1a00; }
.mr-think { display: inline-flex; align-items: center; gap: 4px; height: 22px; color: var(--mr-sub); font-size: .9rem; font-weight: 700; }
.mr-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--mr-acc); animation: mrDot 1.1s infinite; }
.mr-think i:nth-child(2) { animation-delay: .18s; } .mr-think i:nth-child(3) { animation-delay: .36s; }
@keyframes mrDot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
.mr-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mr-ans { min-height: 56px; border-radius: 14px; border: 2px solid var(--mr-line); background: var(--mr-card); color: var(--mr-text); font-size: 1rem; font-weight: 900; cursor: pointer; transition: transform .08s; }
.mr-ans:active { transform: scale(.97); }
.mr-ans:disabled { opacity: .45; cursor: default; }
.mr-ans.yes { border-color: var(--mr-yes); color: var(--mr-yes); }
.mr-ans.no { border-color: var(--mr-no); color: var(--mr-no); }
.mr-ans.dunno { border-color: var(--mr-dunno); color: var(--mr-dunno); }
.mr-ans.partly { border-color: var(--mr-partly); color: var(--mr-partly); }
.mr-tools { display: flex; justify-content: space-between; margin-top: 12px; }
.mr-link { background: none; border: none; color: var(--mr-sub); font-size: .86rem; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 6px; }
.mr-link b { color: var(--mr-acc); }
.mr-hist { text-align: left; margin: 6px 0 0; padding: 10px 12px 10px 32px; background: var(--mr-soft); border-radius: 12px; font-size: .84rem; line-height: 1.55; color: var(--mr-text); max-height: 260px; overflow-y: auto; }
.mr-hist li { margin: 3px 0; }
.mr-hist .a { font-weight: 800; margin-left: 4px; white-space: nowrap; }
.mr-hist .a.yes { color: var(--mr-yes); } .mr-hist .a.no { color: var(--mr-no); } .mr-hist .a.dunno { color: var(--mr-dunno); } .mr-hist .a.partly { color: var(--mr-partly); }
.mr-hist .g { color: var(--mr-no); font-weight: 800; list-style: none; margin-left: -18px; }
.mr-hist:empty { display: none; }

/* 결과 */
.mr-rbadge { display: inline-block; font-size: .8rem; font-weight: 900; padding: 5px 14px; border-radius: 99px; background: var(--mr-soft); color: var(--mr-acc); margin-bottom: 8px; }
.mr-rtitle { font-size: 1.35rem; font-weight: 900; margin: 4px 0 10px; line-height: 1.4; color: var(--mr-text); word-break: keep-all; }
.mr-ranswer { font-size: .95rem; color: var(--mr-sub); }
.mr-ranswer b { display: block; font-size: 1.7rem; color: var(--mr-gold); margin-top: 2px; word-break: break-all; }
.mr-rline { margin: 12px 0; font-size: .92rem; color: var(--mr-text); line-height: 1.6; background: var(--mr-soft); border-radius: 12px; padding: 10px 12px; }
.mr-rline:empty { display: none; }
.mr-rscore b { display: block; font-size: 2.6rem; font-weight: 900; color: var(--mr-acc); line-height: 1.1; }
.mr-rscore small { color: var(--mr-sub); font-size: .8rem; }
#mr-rhist { margin-top: 14px; }
.mr-result-win .mr-rbadge { background: var(--mr-gold); color: #2a1a00; }

/* 추측 모달 */
.mr-modal { position: fixed; inset: 0; z-index: 10050; background: rgba(15, 8, 35, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mr-mbox { width: 100%; max-width: 380px; background: var(--mr-card); color: var(--mr-text); border-radius: 20px; padding: 22px 18px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); border: 1px solid var(--mr-line); }
.mr-mbox .mr-orb { margin: 0 auto 10px; }
.mr-mq { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; word-break: keep-all; }
.mr-mq b { color: var(--mr-acc); font-size: 1.4rem; }
.mr-mt { font-size: .86rem; color: var(--mr-sub); margin: 0 0 14px; min-height: 1em; }
.mr-mbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mr-mbox small { font-size: .74rem; color: var(--mr-sub); }

/* 가이드 */
.mr-guide { text-align: left; line-height: 1.7; margin-top: 16px; }
.mr-guide p, .mr-guide li { font-size: .9rem; }
.mr-guide h3 { font-size: 1rem; margin: 10px 0 4px; }
.mr-guide ul { padding-left: 20px; margin: 4px 0; }
.mr-guide small { font-size: .8rem; display: block; margin-top: 8px; }

@media (max-width: 360px) {
  .mr-card { padding: 18px 12px; }
  .mr-cat { font-size: .78rem; }
  .mr-btn { padding: 0 14px; }
  .mr-bubble { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .mr-orb, .mr-orb span, .mr-think i { animation: none; } }

/* 10-10 게임 영역 폭 100%: 배경·테두리는 꽉 채우고 넓은 화면에서는 안쪽 콘텐츠만 가운데로 모은다 */
@media (min-width: 761px) {
    #mr-wrap .mr-card { padding-left: max(18px, calc((100% - 680px) / 2)); padding-right: max(18px, calc((100% - 680px) / 2)); }
}