/* Listening Traps (IELTS Arena): a front-desk call card, an IELTS paper answer sheet, the marked transcript. */
.gm-poster.gm-trap{--c:#8A72F6}
.gm-theme-trap{--accent:#8A72F6;--accent2:#5b46e5;--aqua:#56DADC;--paper:#fbf7ec;--ink-dark:#1d1640}

/* Intro: two mode cards */
.tr-intro .gm-sub{max-width:560px}
.tr-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px;max-width:560px}
.gm-btn.choice.tr-mode{min-height:0;padding:14px 16px;border-radius:18px}
.gm-btn.choice.tr-mode strong{font-size:19px}
.gm-btn.choice.tr-mode.on{border-color:var(--aqua);background:color-mix(in srgb,var(--aqua) 16%,rgba(255,255,255,.06));box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua) 22%,transparent)}
.tr-host{max-height:400px}

/* HUD */
.tr-mode-pill{padding:4px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.1em;background:rgba(86,218,220,.16);color:var(--aqua);border:1px solid rgba(86,218,220,.45)}
.tr-mode-pill.practice{background:rgba(255,200,61,.14);color:var(--gold);border-color:rgba(255,200,61,.45)}
.tr-hud .gm-hearts{margin-left:auto}

/* The call card */
.tr-slot{margin-bottom:16px}
.tr-reveal{scroll-margin-top:72px}
.tr-call,.tr-room-q{text-align:left}
.tr-call-head{display:flex;align-items:center;gap:14px}
.tr-phone{display:grid;place-items:center;flex:0 0 auto;width:54px;height:54px;border-radius:18px;font-size:28px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -10px var(--accent)}
.ringing .tr-phone{animation:tr-ring 1.1s ease-in-out infinite}
@keyframes tr-ring{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}}
.tr-call-title{display:grid;min-width:0;line-height:1.2}
.tr-call-title small{color:var(--aqua);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tr-call-title strong{font-family:var(--display);font-size:clamp(19px,2.6vw,25px);overflow-wrap:anywhere}
.tr-eq{height:64px;margin:12px 0 6px}
.tr-eq i{width:8px;background:linear-gradient(180deg,#c9f8f8,var(--aqua))}
.tr-eq.on i{animation-name:tr-eq}
@keyframes tr-eq{from{height:10px}to{height:60px}}
.tr-status{margin:0 0 6px;text-align:center;color:var(--muted);font-weight:700;font-size:14px}
.tr-replay{display:flex;margin:6px auto 0}

/* The form field, on paper */
.tr-field{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--paper);color:var(--ink-dark);
  box-shadow:0 18px 40px -22px #000,inset 0 0 0 1px rgba(29,22,64,.08)}
.tr-field-label{display:flex;flex:1 1 260px;flex-wrap:wrap;align-items:baseline;gap:6px 8px;min-width:0;font-weight:800;font-size:17px}
.tr-field-label input{flex:1 1 160px;min-width:0;min-height:48px;padding:6px 4px;border:0;border-bottom:3px dashed rgba(29,22,64,.35);border-radius:0;background:transparent;
  color:var(--ink-dark);font-family:var(--display);font-size:22px;font-weight:700}
.tr-field-label input:focus{outline:none;border-bottom:3px solid var(--accent2)}
.tr-field-label input::placeholder{color:rgba(29,22,64,.38);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:15px;font-weight:600}
.tr-field-label input:disabled{opacity:.65}
.tr-after{color:var(--ink-dark)}
.tr-field .gm-btn{flex:0 0 auto}

/* After an answer: the marked transcript */
.tr-reveal-top{display:flex;align-items:center;gap:12px}
.tr-reveal-top .gm-reveal{flex:1;margin-top:0;font-size:clamp(19px,3vw,26px);overflow-wrap:anywhere}
.tr-aha{width:84px;flex:0 0 auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));animation:gm-bob 3s ease-in-out infinite}
.tr-explain{margin-top:12px}
.tr-yours{margin:0 0 8px;font-weight:700;color:#ffb3c1;overflow-wrap:anywhere}
.tr-trap-chip{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,77,109,.18);border:1px solid rgba(255,77,109,.5);color:#ffc2cd;font-weight:800;font-size:12px;letter-spacing:.08em}
.tr-script{margin-top:10px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.32);border:1px solid var(--line);display:grid;gap:6px}
.tr-legend{margin:0 0 2px;font-size:12px;color:var(--muted)}
.tr-legend mark{padding:0 6px}
.tr-line{display:flex;gap:10px;margin:0;align-items:flex-start;line-height:1.5}
.tr-who{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:800;font-size:13px;background:var(--accent);color:#fff}
.tr-line.B .tr-who{background:var(--aqua);color:#08313a}
.tr-text{min-width:0;overflow-wrap:anywhere}
.tr-script mark{border-radius:6px;padding:0 3px;color:#fff}
.tr-script mark.trap{background:rgba(255,77,109,.28);text-decoration:underline wavy #ff4d6d 2px;text-underline-offset:4px}
.tr-script mark.answer{background:rgba(47,227,154,.25);color:#b6ffdf;font-weight:800}
.tr-why{margin:10px 0 0;font-weight:600;line-height:1.5}
.tr-room-reveal .tr-explain{text-align:left}

/* The answer sheet: a clipped sheet of exam paper */
.tr-sheet{position:relative;padding:22px 18px 14px;border-radius:14px;background:var(--paper);color:var(--ink-dark);transform:rotate(-.4deg);
  box-shadow:0 24px 50px -26px #000,inset 0 0 0 1px rgba(29,22,64,.08);animation:gm-rise .35s backwards}
.tr-sheet::before{content:'';position:absolute;top:-10px;left:50%;width:110px;height:22px;margin-left:-55px;border-radius:8px;background:linear-gradient(180deg,#d9d2ef,#a99ad8);box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.tr-sheet-head{display:grid;gap:2px;padding-bottom:8px;border-bottom:2px solid rgba(29,22,64,.15)}
.tr-sheet-head strong{font-family:var(--display);font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.tr-sheet-head span{font-size:12px;font-weight:700;color:rgba(29,22,64,.65)}
.tr-rows{list-style:none;margin:6px 0 0;padding:0;display:grid}
.tr-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;border-bottom:1px solid rgba(29,22,64,.12)}
.tr-num{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:2px solid rgba(29,22,64,.3);font-weight:800;font-size:13px}
.tr-blank{flex:1;height:2px;margin-top:14px;background:repeating-linear-gradient(90deg,rgba(29,22,64,.25) 0 6px,transparent 6px 10px)}
.tr-row-body{flex:1;display:grid;min-width:0;line-height:1.3}
.tr-row-body small{font-size:11px;font-weight:700;color:rgba(29,22,64,.55);overflow-wrap:anywhere}
.tr-row-main{font-weight:700;overflow-wrap:anywhere}
.tr-row-main b{font-family:var(--display);font-size:18px;padding:0 2px}
.tr-row.right .tr-row-main b{color:#0b8f58}
.tr-row.wrong .tr-row-main b{color:#c8143a;text-decoration:line-through 2px}
.tr-fix{color:#0b8f58;font-weight:800;font-size:14px;overflow-wrap:anywhere}
.tr-mark{flex:0 0 auto;width:28px;text-align:center;font-weight:800;font-size:20px}
.tr-row.right .tr-mark{color:#0b8f58}.tr-row.wrong .tr-mark{color:#c8143a}
.tr-row.now{background:linear-gradient(90deg,rgba(138,114,246,.16),transparent);border-radius:8px}
.tr-row.now .tr-num{border-color:var(--accent2);background:var(--accent2);color:#fff}
.tr-gap{display:inline-block;min-width:60px;color:var(--accent2);animation:gm-blink 1.2s infinite}
.tr-row.right .tr-num{border-color:#0b8f58;color:#0b8f58}.tr-row.wrong .tr-num{border-color:#c8143a;color:#c8143a}

/* Finale: the reviewed sheet */
.tr-final{margin:10px auto 0;max-width:560px;text-align:left}
.tr-final .gm-sub{text-align:center}
.tr-final .tr-sheet{transform:rotate(.3deg)}

@media (max-width:640px){
  .tr-modes{grid-template-columns:1fr}
  .tr-host{max-height:170px}
  .tr-phone{width:44px;height:44px;font-size:22px;border-radius:14px}
  .tr-eq{height:48px;margin:8px 0 4px}
  @keyframes tr-eq{from{height:8px}to{height:44px}}
  .tr-field{padding:12px 14px}
  .tr-field .gm-btn{flex:1 1 100%}
  .tr-aha{width:60px}
  .tr-sheet{transform:none;padding:20px 12px 10px}
}
@media (prefers-reduced-motion:reduce){.ringing .tr-phone,.tr-aha,.tr-gap{animation:none}}