/* interactions/write_it/write_it.css
   WRITE IT – FIXED 1920x1080

   ✅ Shared styles moved to: /interactions/global.css
   - Header: .mwp-header + .mwp-intro-title + .mwp-title
   - [data-edit] hover styles

   ✅ UPDATE
   - Çizim alanındaki paper background kaldırıldı
   - Yazma alanı düz beyaz yapıldı
*/

.writeit-wrap{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
}

.writeit-main{
  position:absolute;
  left:108px;
  top:190px;
  width:1704px;
  height:760px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns:60% 40%;
  grid-template-rows:1fr 60px;
  grid-template-areas:
    "left right"
    "status status";
  column-gap:24px;
}

/* LEFT: WRITING AREA (%60) */
.writeit-left{
  grid-area:left;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

.writeit-paper{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  border-radius:28px;
  overflow:hidden;

  background:#ffffff;

  box-sizing:border-box;
  padding:0;
}

.writeit-clear-btn{
  position:absolute;
  top:22px;
  right:22px;
  z-index:5;

  min-width:120px;
  height:50px;
  padding:0 18px;

  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.08);

  font-weight:800;
  font-size:20px;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

.writeit-clear-btn:hover{
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.05);
}

.writeit-clear-btn:active{
  transform:translateY(0) scale(.98);
}

.writeit-clear-btn:disabled{
  cursor:default;
  opacity:.92;
}

.writeit-canvas{
  position:absolute;
  inset:0;
  z-index:1;

  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;

  background:transparent;
  border:0;
  outline:none;
  box-shadow:none;

  touch-action:none;
  -ms-touch-action:none;

  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path fill='%232563eb' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75z'/><path fill='%23111827' d='M20.71 7.04a1.003 1.003 0 0 0 0-1.42L18.37 3.29a1.003 1.003 0 0 0-1.42 0L15.13 5.11l3.75 3.75z'/></svg>") 2 28, crosshair;
}

/* RIGHT: HINT AREA (%40) */
.writeit-right{
  grid-area:right;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;

  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:40% 30% 20%;
  row-gap:18px;
  justify-items:center;
  align-content:start;
}

/* IMAGE HINT */
.writeit-hint-image-block{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  border-radius:28px;
  overflow:hidden;

  background-image:var(--mc-drop-pic-bg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  padding:16px;
  box-sizing:border-box;
}

.writeit-hint-image-block.is-disabled{
  opacity:.45;
}

.writeit-hint-image-frame{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:22px;
  overflow:hidden;

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

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

.writeit-hint-placeholder{
  font-weight:900;
  font-size:34px;
  opacity:.65;
  text-align:center;
}

.writeit-hint-pick{
  position:absolute;
  left:18px;
  top:18px;
  z-index:5;

  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  cursor:pointer;

  font-weight:800;
  font-size:12px;
}

.writeit-hint-trash{
  position:absolute;
  right:18px;
  top:18px;
  z-index:6;

  width:34px;
  height:34px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  cursor:pointer;
}

/* TEXT HINT */
.writeit-hint-text-block{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  border-radius:28px;

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

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

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

.writeit-hint-text-block.is-disabled{
  opacity:.45;
}

.writeit-hint-text{
  width:100%;
  min-height:88px;

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

  text-align:center;
  font-weight:900;
  font-size:34px;
  line-height:1.2;

  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* CHECK BUTTON */
.writeit-check-wrap{
  width:50%;
  height:50%;

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

.writeit-check-btn{
  width:80%;
  height:100%;

  border:0;
  outline:none;
  cursor:pointer;
  border-radius:24px;

  background-image:var(--sayit-start-bg);
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;

  font-weight:900;
  font-size:38px;
  line-height:1;
  color:#111827;
  text-shadow:0 1px 0 rgba(255,255,255,.55);

  -webkit-user-drag:none;
  transform-origin:center center;
  animation:writeitButtonPulse 3.2s ease-in-out infinite;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

.writeit-check-btn:hover{
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.05);
}

.writeit-check-btn:active{
  transform:translateY(0) scale(.98);
}

.writeit-check-btn:disabled{
  cursor:default;
  opacity:.92;
}

/* STATUS */
.writeit-status{
  grid-area:status;
  width:100%;
  height:100%;

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

  text-align:center;
  font-weight:900;
  font-size:30px;
  line-height:1.15;
  letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(255,255,255,.18);

  pointer-events:none;
}

.writeit-status[data-status-type="correct"]{
  color:#16a34a;
}

.writeit-status[data-status-type="wrong"]{
  color:#dc2626;
}

.writeit-status[data-status-type="reveal"]{
  color:#7c3aed;
}

.writeit-status[data-status-type="error"]{
  color:#b91c1c;
}

/* EDITOR PREVIEW EXTRA */
.writeit-config-summary{
  display:none;
}

.writeit-summary-line{
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 14px rgba(0,0,0,.05);

  font-weight:800;
  font-size:16px;
  line-height:1.15;
  overflow-wrap:anywhere;
}

/* PLAYER MODE SAFETY */
body[data-mode="player"] .writeit-hint-text{
  cursor:inherit;
  pointer-events:none;
}

body[data-mode="player"] .writeit-hint-image-frame img{
  pointer-events:none;
}

body[data-mode="player"] .writeit-canvas{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color: transparent;
}

/* SIMPLE ANIMS */
.anim-writeit-correct{
  animation:writeitPop 700ms ease both;
}

.anim-writeit-wrong{
  animation:writeitShake 650ms ease both;
}

@keyframes writeitButtonPulse{
  0%   { transform:scale(1); }
  50%  { transform:scale(1.025); }
  100% { transform:scale(1); }
}

@keyframes writeitPop{
  0%   { transform:scale(.94); }
  45%  { transform:scale(1.05); }
  75%  { transform:scale(.985); }
  100% { transform:scale(1); }
}

@keyframes writeitShake{
  0%   { transform:translateX(0); }
  20%  { transform:translateX(-10px); }
  40%  { transform:translateX(10px); }
  60%  { transform:translateX(-7px); }
  80%  { transform:translateX(7px); }
  100% { transform:translateX(0); }
}

/* REVIEW MODE */
.writeit-wrap[data-review-mode="1"] .writeit-check-btn,
.writeit-wrap[data-review-mode="1"] .writeit-clear-btn,
.writeit-wrap[data-review-mode="1"] .writeit-canvas{
  cursor:default !important;
  opacity:.9 !important;
  filter:none !important;
  animation:none !important;
}