/* interactions/say_it/say_it.css
   SAY IT – FIXED 1920x1080

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

   ✅ Theme assets
   - listen icon: themes/{theme}/assets/listen.png
   - start button: themes/{theme}/assets/start.png
*/

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

/* =========================================================
   MAIN LAYOUT
   ========================================================= */
.sayit-main{
  position:absolute;
  left:108px;
  top:190px;
  width:1704px;
  height:760px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:152px 60px 396px 152px; /* audio / status / content / bottom */
  grid-template-areas:
    "audio audio"
    "status status"
    "content content"
    "bottom bottom";
}

.sayit-audio-row{
  grid-area:audio;
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.sayit-hints-row{
  grid-area:content;
  width:100%;
  height:100%;
  box-sizing:border-box;

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

/* =========================================================
   HINT LAYOUT VARIATIONS
   ========================================================= */

/* ikisi de varsa: solda metin, sağda resim */
.sayit-wrap[data-has-hint-text="1"][data-has-hint-image="1"] .sayit-hints-row{
  grid-template-columns:1fr 1fr;
  grid-template-areas:"text image";
}

.sayit-wrap[data-has-hint-text="1"][data-has-hint-image="1"] .sayit-hint-text-block{
  grid-area:text;
  width:70%;
  height:70%;
  justify-self:end;
  align-self:center;
}

.sayit-wrap[data-has-hint-text="1"][data-has-hint-image="1"] .sayit-hint-image-block{
  grid-area:image;
  width:70%;
  height:70%;
  justify-self:start;
  align-self:center;
}

/* sadece metin varsa: ortada */
.sayit-wrap[data-has-hint-text="1"][data-has-hint-image="0"] .sayit-hints-row{
  grid-template-columns:1fr;
  grid-template-areas:"text";
}

.sayit-wrap[data-has-hint-text="1"][data-has-hint-image="0"] .sayit-hint-text-block{
  grid-area:text;
  width:70%;
  height:70%;
  justify-self:center;
  align-self:center;
}

/* sadece resim varsa: ortada */
.sayit-wrap[data-has-hint-text="0"][data-has-hint-image="1"] .sayit-hints-row{
  grid-template-columns:1fr;
  grid-template-areas:"image";
}

.sayit-wrap[data-has-hint-text="0"][data-has-hint-image="1"] .sayit-hint-image-block{
  grid-area:image;
  width:70%;
  height:70%;
  justify-self:center;
  align-self:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* ikisi de yoksa alan boş kalsın */
.sayit-wrap[data-has-hint-text="0"][data-has-hint-image="0"] .sayit-hints-row{
  grid-template-columns:1fr;
  grid-template-areas:"empty";
}

/* =========================================================
   AUDIO HINT BLOCK
   ========================================================= */
.sayit-audio-hint-block{
  position:relative;
  width:341px;
  height:152px;
  border-radius:28px;
  overflow:hidden;

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

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

.sayit-audio-label{
  display:none;
}

.sayit-audio-btn{
  width:100%;
  height:100%;
  flex:none;
  min-height:0;
  border:0;
  outline:none;
  cursor:pointer;

  background-image:var(--sayit-listen-bg);
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

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

.sayit-audio-btn:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.06);
}

.sayit-audio-btn:active{
  transform:translateY(0) scale(.98);
}

.sayit-audio-btn:disabled{
  cursor:default;
  opacity:.9;
}

/* =========================================================
   IMAGE HINT BLOCK
   ========================================================= */
.sayit-hint-image-block{
  position:relative;
  width:70%;
  height:70%;
  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;
}

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

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

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

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

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

/* Editor image buttons */
.sayit-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;
}

.sayit-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;
}

/* =========================================================
   MIDDLE AREA – HINT TEXT
   ========================================================= */
.sayit-middle{
  display:contents;
}

.sayit-hint-text-block{
  width:70%;
  height:70%;
  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;
}

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

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

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

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

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

/* =========================================================
   BOTTOM AREA – START BUTTON
   ========================================================= */
.sayit-bottom{
  grid-area:bottom;
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.sayit-start-btn{
  width:341px;
  height:152px;

  border:0;
  outline:none;
  cursor:pointer;

  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:44px;
  line-height:1;
  color:#111827;
  text-shadow:0 1px 0 rgba(255,255,255,.55);

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

.sayit-start-btn:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05);
}

.sayit-start-btn:active{
  transform:translateY(0) scale(.98);
}

.sayit-start-btn:disabled{
  cursor:default;
  opacity:.92;
}

/* editor preview support */
.sayit-start-btn-preview{
  display:none;
}

.sayit-listen-btn-preview{
  width:220px;
  height:120px;
  display:none;
}

/* =========================================================
   STATUS
   ========================================================= */
.sayit-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;
}

.sayit-status[data-status-type="listening"]{
  color:#1d4ed8;
}

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

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

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

.sayit-status[data-status-type="hint"]{
  color:#0f766e;
}

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

/* =========================================================
   EDITOR PREVIEW EXTRA
   ========================================================= */
.sayit-preview-top,
.sayit-preview-middle,
.sayit-preview-bottom{
  display:contents;
}

.sayit-hint-text-label{
  display:none;
}

.sayit-audio-card{
  display:none;
}

.sayit-audio-meta{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sayit-audio-text{
  font-weight:900;
  font-size:40px;
  line-height:1.15;
  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.sayit-audio-lang{
  font-weight:800;
  font-size:24px;
  opacity:.7;
}

.sayit-audio-visual{
  flex:0 0 180px;
  width:180px;
  height:180px;
  border-radius:24px;
  background:
    radial-gradient(circle at center, rgba(59,130,246,.18), rgba(59,130,246,.05) 60%, transparent 61%);
}

.sayit-config-summary{
  display:none;
}

.sayit-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"] .sayit-hint-text{
  cursor:inherit;
  pointer-events:none;
}

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

/* =========================================================
   SIMPLE ANIMS
   ========================================================= */
.anim-sayit-correct{
  animation:sayitPop 700ms ease both;
}

.anim-sayit-wrong{
  animation:sayitShake 650ms ease both;
}

.anim-sayit-hint{
  animation:sayitGlow 700ms ease both;
}

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

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

@keyframes sayitShake{
  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 sayitGlow{
  0%   { transform:scale(.98); filter:brightness(1); }
  50%  { transform:scale(1.02); filter:brightness(1.05); }
  100% { transform:scale(1); filter:brightness(1); }
}

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