/* ================================================================
   AW Worksheet Builder — Player Styles v2.5
   ================================================================ */

.aw-wb-player-wrap { font-family:'Inter','Segoe UI',sans-serif; padding:0 0 24px; box-sizing:border-box; }
.aw-wb-player-wrap * { box-sizing:border-box; }

/* ── Title ── */
.aw-wb-title { font-size:1.5rem; font-weight:700; color:#1e293b; margin:0 0 12px; padding-bottom:10px; border-bottom:3px solid #3b82f6; }

/* ── Progress bar ── */
.aw-wb-progress { height:6px; background:#e2e8f0; border-radius:99px; margin-bottom:16px; overflow:hidden; }
.aw-wb-progress-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#06b6d4); border-radius:99px; transition:width .3s ease; }

/* ── Timer ── */
.aw-timer { display:inline-block; padding:4px 14px; background:#1e293b; color:#f1f5f9; border-radius:99px; font-size:0.9rem; font-weight:600; margin-bottom:12px; transition:background .3s; }
.aw-timer.aw-timer-warn { background:#dc2626; animation:pulse .8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ── Canvas container ── */
.aw-player-canvas-wrap { background:#e5e7eb; border-radius:8px; padding:12px; margin-bottom:16px; }
.aw-player-container { position:relative; display:inline-block; width:100%; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.12); border-radius:4px; }
.aw-player-bg { display:block; width:100%; height:auto; user-select:none; pointer-events:none; }

/* ── Text inputs ── */
.aw-input-text {
  position:absolute; background:transparent; border:2px solid #94a3b8;
  border-radius:4px; padding:2px 6px; font-family:inherit; width:100%; height:100%;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.aw-input-text:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }

/* ── Open Answer (textarea) ── */
.aw-open-answer {
  position:absolute; background:rgba(255,255,255,.95); border:2px solid #0284c7;
  border-radius:4px; padding:4px 6px; font-family:inherit; width:100%; height:100%;
  outline:none; resize:none; transition:border-color .2s, box-shadow .2s;
}
.aw-open-answer:focus { border-color:#0369a1; box-shadow:0 0 0 3px rgba(2,132,199,.2); }

/* ── Select dropdown ── */
.aw-select {
  position:absolute; background:rgba(255,255,255,.95); border:2px solid #94a3b8;
  border-radius:4px; padding:2px 4px; font-family:inherit; width:100%; height:100%; cursor:pointer; outline:none;
}
.aw-select:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.2); }

/* ── Single Choice (radio) ── */
.aw-single-choice {
  position:absolute; background:rgba(255,255,255,.95); border:2px solid #7c3aed;
  border-radius:6px; padding:4px 8px; display:flex; flex-direction:column; gap:3px; overflow:auto;
}
.aw-radio-label { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:inherit; color:#1e293b; }
.aw-radio-input { accent-color:#7c3aed; cursor:pointer; }

/* ── Checkboxes ── */
.aw-checkboxes {
  position:absolute; background:transparent; border:2px solid #94a3b8;
  border-radius:4px; padding:4px 8px; display:flex; flex-direction:column; gap:3px; overflow:auto;
  transition:border-color .2s, box-shadow .2s;
}
.aw-cb-label { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:inherit; color:#1e293b; }
.aw-cb-input { accent-color:#db2777; cursor:pointer; }

/* ── Drag items ── */
.aw-drag-item {
  position:absolute; background:#dbeafe; border:2px solid #3b82f6; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
  font-weight:600; color:#1d4ed8; text-align:center; transition:opacity .2s, transform .15s; z-index:20;
}
.aw-drag-item.dragging { opacity:.5; transform:scale(1.05); cursor:grabbing; }

/* ── Drop zones ── */
.aw-drop-zone {
  position:absolute; background:rgba(245,158,11,.1); border:2px dashed #f59e0b; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:0.82rem; color:#92400e; transition:background .2s, border-color .2s; min-height:32px;
}
.aw-drop-zone.over  { background:rgba(245,158,11,.25); border-color:#d97706; }
.aw-drop-zone.filled { background:#fef3c7; border-style:solid; font-weight:600; }

/* ── Join / Match — invisible hit-zones, crosshair/pencil cursor ── */
.aw-join-item {
  position:absolute !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:crosshair;
  z-index:20;
  user-select:none;
}
.aw-join-item:focus { outline:none !important; }
.aw-join-item.join-pending { animation:joinPulse .7s ease-in-out infinite; }
@keyframes joinPulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.aw-join-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50; }

/* ── Checkbox / Tick ── */
.aw-tick-wrap { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:4px; background:transparent; border:2px solid #94a3b8; transition:background .2s, border-color .2s; cursor:pointer; }
.aw-tick { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.aw-tick-wrap:has(.aw-tick:checked)::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.4em; color:#db2777; font-weight:900; line-height:1; }
.aw-tick-wrap.aw-correct  { background:rgba(34,197,94,.18)!important; border:2px solid #22c55e!important; }
.aw-tick-wrap.aw-correct::after { color:#16a34a !important; }
.aw-tick-wrap.aw-incorrect { background:rgba(239,68,68,.15)!important; border:2px solid #ef4444!important; }


/* ── True / False (click-cycle div) ── */
.aw-tf-wrap { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:4px; background:transparent; border:2px solid #94a3b8; transition:background .15s, border-color .15s; cursor:pointer; user-select:none; }
.aw-tf-wrap[data-state="tick"]::after  { content:'\2713'; font-size:1.4em; color:#db2777; font-weight:900; line-height:1; }
.aw-tf-wrap[data-state="cross"]::after { content:'\2717'; font-size:1.4em; color:#ef4444; font-weight:900; line-height:1; }
.aw-tf-wrap.aw-tf-disabled { cursor:default; pointer-events:none; }
.aw-tf-wrap.aw-correct  { border-color:#22c55e!important; background:rgba(34,197,94,.15)!important; }
.aw-tf-wrap.aw-correct::after  { color:#16a34a!important; }
.aw-tf-wrap.aw-incorrect { border-color:#dc2626!important; border-width:3px!important; background:rgba(239,68,68,.12)!important; }
.aw-tf-wrap.aw-incorrect::after { color:#dc2626!important; }
.aw-tf-wrap.aw-tf-revealed { border-color:#22c55e!important; border-width:3px!important; background:rgba(34,197,94,.22)!important; }
.aw-tf-wrap.aw-tf-revealed::after { color:#16a34a!important; }

/* ── Speak (Mic) ── */
.aw-speak-wrap { position:absolute; }
.aw-mic-btn {
  background:linear-gradient(135deg,#7c3aed,#a855f7); border:none; border-radius:50%;
  color:#fff; font-size:1.4rem; width:50px; height:50px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s;
}
.aw-mic-btn:hover { transform:scale(1.1); box-shadow:0 4px 14px rgba(124,58,237,.4); }
.aw-mic-btn.aw-mic-active { background:linear-gradient(135deg,#dc2626,#ef4444); animation:pulse .8s infinite; }
.aw-speak-result { font-style:italic; }

/* ── MP3 Player ── */
.aw-mp3-wrap { position:absolute; }
.aw-mp3-btn {
  background:rgba(255,255,255,.2); border:none; color:#fff; font-size:1.2rem;
  width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s;
}
.aw-mp3-btn:hover { transform:scale(1.15); background:rgba(255,255,255,.35); }

/* ── Link element ── */
.aw-link-el { position:absolute; }
.aw-link-el:hover { opacity:.8; }

/* ── Boost element ── */
.aw-boost-el { position:absolute; }
.aw-boost-el:hover { transform:scale(1.05); filter:brightness(1.1); }

/* ════════════════════════════
   WORD SEARCH
════════════════════════════ */
.aw-ws-wrap { position:absolute; }
.aw-ws-wordlist {
  display:flex; flex-wrap:wrap; gap:4px; padding:4px;
  background:rgba(99,102,241,.08); border-radius:4px;
}
.aw-ws-word {
  font-size:0.78em; font-weight:700; color:#4338ca; background:#ede9fe;
  border-radius:4px; padding:2px 6px; text-transform:uppercase; letter-spacing:.05em;
}
.aw-ws-word.aw-ws-word-found {
  text-decoration:line-through; color:#6b7280; background:#e5e7eb;
}
.aw-ws-grid { margin-top:4px; }
.aw-ws-cell {
  display:flex; align-items:center; justify-content:center; border-radius:3px;
  font-size:clamp(8px, 1.4vw, 14px); font-weight:700; color:#374151;
  background:#f9fafb; border:1px solid #e5e7eb; cursor:pointer; aspect-ratio:1;
  user-select:none; transition:background .1s, color .1s;
}
.aw-ws-cell:hover { background:#ede9fe; color:#4338ca; }
.aw-ws-cell.aw-ws-selecting { background:#fef9c3; color:#713f12; }
.aw-ws-cell.aw-ws-found { background:#bbf7d0; color:#14532d; border-color:#86efac; }

/* ── Feedback States ── */
.aw-correct   { border-color:#22c55e!important; background-color:rgba(34,197,94,.15)!important; color:#14532d!important; }
.aw-incorrect { border-color:#ef4444!important; background-color:rgba(239,68,68,.12)!important; color:#7f1d1d!important; }
.aw-answer-tip {
  position:absolute; background:#14532d; color:#fff; font-size:0.75rem;
  padding:3px 8px; border-radius:4px; white-space:nowrap;
  top:calc(100% + 4px); left:0; z-index:99; pointer-events:none;
}

/* ── Button Row ── */
.aw-wb-btn-row { display:flex; gap:12px; margin:16px 0; flex-wrap:wrap; }
.aw-btn-check {
  padding:12px 32px; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none;
  border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer;
  transition:opacity .2s, transform .15s; box-shadow:0 4px 14px rgba(59,130,246,.35);
}
.aw-btn-check:hover { opacity:.9; transform:translateY(-1px); }
.aw-btn-check:active { transform:translateY(1px); }
.aw-btn-check:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.aw-btn-retry { padding:12px 24px; background:#f1f5f9; color:#475569; border:2px solid #e2e8f0; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s; }
.aw-btn-retry:hover { background:#e2e8f0; }
.aw-btn-show-answer { padding:12px 28px; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s, opacity .2s; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.aw-btn-show-answer:hover    { background:#1d4ed8; }
.aw-btn-show-answer:active   { background:#1e40af; }
.aw-btn-show-answer:disabled { opacity:.5; cursor:not-allowed; }

/* ── Score ── */
.aw-wb-score {
  margin-top:20px; padding:24px; background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  border:2px solid #bae6fd; border-radius:12px; display:flex; align-items:center; gap:20px; animation:slideIn .4s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.aw-score-circle {
  width:80px; height:80px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(#3b82f6 calc(var(--pct) * 1%), #e2e8f0 0);
  display:flex; align-items:center; justify-content:center;
}
.aw-score-num {
  font-size:1.1rem; font-weight:800; color:#1e293b; background:#fff;
  border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center;
}
.aw-score-text { font-size:1.1rem; color:#1e293b; }
.aw-score-text strong { color:#2563eb; }

/* ── Scrollable Multi-page layout ── */
.aw-page-section {
  margin-bottom: 24px;
}
.aw-page-section:last-child {
  margin-bottom: 0;
}
.aw-page-label {
  display: inline-block;
  padding: 4px 14px;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 99px 99px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

/* ── Page Navigation (legacy — hidden in scrollable mode) ── */
.aw-player-page-nav { display:none; }
.aw-page-btn { padding:7px 16px; background:#1e293b; color:#f1f5f9; border:none; border-radius:6px; cursor:pointer; font-weight:600; }
.aw-page-btn:hover { background:#334155; }
.aw-page-indicator { color:#64748b; font-size:0.9rem; font-weight:600; }

/* ── Loading / Error ── */
.aw-wb-loading { display:flex; align-items:center; gap:10px; padding:24px; color:#64748b; }
.aw-wb-spinner { width:20px; height:20px; border:3px solid #e2e8f0; border-top-color:#3b82f6; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }
.aw-wb-error { color:#dc2626; padding:16px; }

/* ── Responsive ── */
@media (max-width:600px) {
  .aw-wb-title { font-size:1.1rem; }
  .aw-btn-check { padding:10px 20px; font-size:0.9rem; }
  .aw-wb-score { flex-direction:column; text-align:center; }
}

/* ── YouTube embed ── */
.aw-youtube-wrap { position:absolute; z-index:60; border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.3); overflow:hidden; background:#000; }
.aw-youtube-wrap iframe { width:100%; height:100%; border:none; display:block; }

/* ── Label / Textbox ── */
.aw-label-block { pointer-events:none; border-radius:3px; z-index:5; }

/* ════════════════════════════
   DICTATION
════════════════════════════ */
.aw-dictation-wrap {
  position:absolute; display:flex; flex-direction:column; gap:6px;
  background:rgba(255,255,255,.97); border:2px solid #0284c7;
  border-radius:8px; padding:8px; box-sizing:border-box; z-index:20; overflow:auto;
}

.aw-dictation-label { font-weight:600; font-size:0.82em; color:#0284c7; flex-shrink:0; letter-spacing:0.01em; }
.aw-dictation-header {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.aw-dictation-play {
  background:linear-gradient(135deg,#0284c7,#0ea5e9); border:none; border-radius:50%;
  color:#fff; font-size:1.1rem; width:36px; height:36px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .15s, box-shadow .15s;
}
.aw-dictation-play:hover { transform:scale(1.1); box-shadow:0 3px 10px rgba(2,132,199,.4); }
.aw-dictation-hint {
  font-size:0.78em; color:#64748b; background:#f1f5f9; border-radius:99px; padding:2px 8px;
}
.aw-dictation-input {
  width:100%; flex:1; min-height:48px; resize:none;
  border:1.5px solid #bae6fd; border-radius:6px; padding:6px 8px;
  font-family:inherit; font-size:inherit; outline:none;
  transition:border-color .2s; box-sizing:border-box;
}
.aw-dictation-input:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,.2); }
.aw-dictation-feedback {
  font-size:0.88em; line-height:1.8; word-break:break-word; padding:4px 2px;
}
.aw-dict-ok   { color:#16a34a; font-weight:600; }
.aw-dict-err  { color:#dc2626; font-weight:600; text-decoration:line-through; }
.aw-dict-miss { color:#d97706; font-weight:600; font-style:italic; }