/* interactions/choose_the_correct_option/choose_the_correct_option.css
   CHOOSE THE CORRECT OPTION – FIXED 1920x1080

   ✅ Shared styles moved to: /interactions/global.css
   - Header: .mwp-header + .mwp-intro-title + .mwp-title
   - Nav buttons: .mwp-prev / .mwp-next / .mwp-nav-text
   - [data-edit] hover styles

   ✅ Theme assets (set by theme.service.js on :root)
   - --mwp-header-bg
   - --mc-question-bg
   - --mc-tile-bg
   - --cto-choice-correct-bg   (co_correct.png)
   - --cto-choice-wrong-bg     (co_wrong.png)
*/

/* ====== WRAP ====== */
.cto-wrap{
  position:absolute;
  left:0; top:0;
  width:1920px;
  height:1080px;
}

/* =========================================================
   QUESTION AREA (OPTIONAL TEXT + OPTIONAL HINT IMAGE)
   - background: themes/{theme}/assets/question.png
   ========================================================= */
.cto-question{
  position:absolute;
  left:108px;
  top:200px;
  width:1704px;
  height:420px;

  background-image: var(--mc-question-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  display:flex;
  align-items:stretch;
  justify-content:stretch;

  box-sizing:border-box;
  padding:24px 28px;
  gap:22px;
}

/* Left: question text */
.cto-question-left{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cto-qtext{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px 26px;
  box-sizing:border-box;

  font-weight:900;
  font-size:56px; /* JS auto-fit may reduce */
  line-height:1.15;

  overflow:hidden;
  user-select:none;

  /* ✅ newline destek */
  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* alignment via wrap data */
.cto-wrap[data-q-align="left"]   .cto-qtext{ text-align:left;  justify-content:flex-start; }
.cto-wrap[data-q-align="center"] .cto-qtext{ text-align:center; justify-content:center; }
.cto-wrap[data-q-align="right"]  .cto-qtext{ text-align:right; justify-content:flex-end; }

/* Right: hint */
.cto-question-right{
  flex:0 0 30%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* no hint => remove right side */
.cto-wrap[data-has-hint="0"] .cto-question-right{
  display:none;
}

/* ✅ when text empty */
.cto-wrap[data-has-qtext="0"] .cto-question-left{
  display:none;
}

/* text empty + hint exists => hint takes full width */
.cto-wrap[data-has-qtext="0"][data-has-hint="1"] .cto-question-right{
  flex:1 1 auto;
  width:100%;
}

/* Hint container */
.cto-hint{
  width:100%;
  height:100%;
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;
  padding:14px;

  overflow:hidden;
}

.cto-hint-img{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  border-radius:16px;
}

.cto-hint-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
}

.cto-hint-placeholder{
  font-weight:900;
  opacity:.7;
}

/* Editor hint buttons */
.cto-hint-pick{
  position:absolute;
  left:14px;
  top:14px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  z-index:5;
  font-weight:800;
  font-size:12px;
}

.cto-hint-trash{
  position:absolute;
  right:14px;
  top:14px;
  width:30px;
  height:30px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  z-index:6;
}

/* =========================================================
   ANSWERS AREA (TEXT ONLY)
   - ONLY 2 or 4
   - background: themes/{theme}/assets/tile.png
   ========================================================= */
.cto-answers{
  position:absolute;
  left:108px;
  top:640px;
  width:1704px;
  height:260px;

  display:grid;
  gap:24px;

  align-items:center;
  justify-items:center;
}

.cto-answers[data-count="2"]{
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:1fr;
}

.cto-answers[data-count="4"]{
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
}

/* =========================================================
   CHOICE CARD
   ========================================================= */
.cto-choice{
  position:relative;
  width:100%;
  height:100%;
  pointer-events:auto;
  user-select:none;
  -webkit-user-drag:none;
  cursor:pointer;
  transform:translateZ(0);
}

/* Tile */
.cto-choice-tile{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;

  background-image: var(--mc-tile-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;
  border-radius:18px;
  overflow:hidden;
}

/* size variants */
.cto-answers[data-count="4"] .cto-choice{
  width:780px;
  height:118px;
}
.cto-answers[data-count="2"] .cto-choice{
  width:860px;
  height:155px;
}

/* press */
.cto-choice:active{
  transform:scale(.99);
}

/* Text */
.cto-choice-text{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  font-size:44px;
  line-height:1.15;
  text-align:center;

  overflow:hidden;
  user-select:none;
}

/* =========================================================
   ✅ PLAYER FEEDBACK: tile background swap
   - Correct => co_correct.png
   - Wrong   => co_wrong.png
   ========================================================= */
body[data-mode="player"] .cto-choice.is-correct .cto-choice-tile{
  background-image: var(--cto-choice-correct-bg);
}
body[data-mode="player"] .cto-choice.is-wrong .cto-choice-tile{
  background-image: var(--cto-choice-wrong-bg);
}

/* Optional: prevent re-click after answer if you add .is-locked in engine */
body[data-mode="player"] .cto-choice.is-locked{
  pointer-events:none;
}

/* =========================================================
   SLOW WOBBLE
   ========================================================= */
@keyframes ctoWobble{
  0%   { transform: rotate(-0.6deg) translateY(0px); }
  50%  { transform: rotate(0.6deg) translateY(-1px); }
  100% { transform: rotate(-0.6deg) translateY(0px); }
}

.cto-wrap.cto-wobble .cto-choice{
  animation-name: ctoWobble;
  animation-duration:5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.cto-choice.is-selected{
  animation:none !important;
}

/* =========================================================
   EDITOR PREVIEW: correct highlight
   ========================================================= */
.is-correct-preview{
  outline:5px solid rgba(34,197,94,.55);
  border-radius:18px;
}

/* Editor correct mark */
.cto-mark{
  position:absolute;
  right:12px;
  top:12px;
  width:30px;
  height:30px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  font-weight:900;
  z-index:6;
}

/* =========================================================
   OPTIONAL: anim classes
   ========================================================= */
.anim-correct{ animation: ctoPop 800ms ease both; }
.anim-wrong{ animation: ctoShake 650ms ease both; }
.anim-reveal{ animation: ctoGlow 700ms ease both; }

@keyframes ctoPop{
  0%   { transform:scale(.92); }
  45%  { transform:scale(1.06); }
  70%  { transform:scale(.98); }
  100% { transform:scale(1); }
}
@keyframes ctoShake{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); }
  40%{ transform:translateX(10px); }
  60%{ transform:translateX(-7px); }
  80%{ transform:translateX(7px); }
  100%{ transform:translateX(0); }
}
@keyframes ctoGlow{
  0%{ transform:scale(.99); }
  50%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

/* =========================================================
   PLAYER MODE (text selection safety)
   ========================================================= */
body[data-mode="player"] .cto-qtext{
  cursor:inherit;
  pointer-events:none;
}

body[data-mode="player"] .cto-choice{
  pointer-events:auto;
}

/* =========================================================
   PLAYER – Corner Mark (kept as before)
   ========================================================= */
body[data-mode="player"] .cto-choice-tile::after{
  content:"";
  position:absolute;
  right:18px;
  top:14px;

  width:90px;
  height:90px;
  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  font-size:80px;
  line-height:1;

  opacity:0;
  transform:scale(.45);
  pointer-events:none;
}

@keyframes ctoCornerMarkIn{
  0%   { opacity:0; transform:scale(.25); }
  55%  { opacity:1; transform:scale(1.35); }
  78%  { opacity:1; transform:scale(.92); }
  100% { opacity:1; transform:scale(1); }
}

body[data-mode="player"] .cto-choice.is-correct .cto-choice-tile::after{
  content:"✓";
  color:#16a34a;
  animation: ctoCornerMarkIn 360ms ease-out both;
}

@keyframes ctoCornerMarkInSoft{
  0%   { opacity:0; transform:scale(.35); }
  60%  { opacity:1; transform:scale(1.12); }
  100% { opacity:1; transform:scale(1); }
}

body[data-mode="player"] .cto-choice.is-wrong .cto-choice-tile::after{
  content:"×";
  color:#ef4444;
  font-size:90px;
  font-weight:400;
  animation: ctoCornerMarkInSoft 320ms cubic-bezier(.2,.8,.2,1) both;
}

/* =========================================================
   REVIEW MODE
   - kilitli olsun ama soluk görünmesin
   ========================================================= */
.cto-wrap[data-review-mode="1"] .cto-choice[aria-disabled="true"],
.cto-wrap[data-review-mode="1"] .cto-choice.is-locked{
  opacity:1 !important;
  filter:none !important;
  cursor:default !important;
}

.cto-wrap[data-review-mode="1"] .cto-choice[aria-disabled="true"] .cto-choice-tile,
.cto-wrap[data-review-mode="1"] .cto-choice[aria-disabled="true"] .cto-choice-text,
.cto-wrap[data-review-mode="1"] .cto-choice.is-locked .cto-choice-tile,
.cto-wrap[data-review-mode="1"] .cto-choice.is-locked .cto-choice-text{
  opacity:1 !important;
  filter:none !important;
}