/*
  Mobile Rebuild Phase 2 — Interaction + Motion
  ----------------------------------------------
  Motion is functional: it confirms pickup, placement, return, clue focus,
  hints, scoring and turn handoff. Mobile Canonical Phase 1 geometry remains
  authoritative and this layer never introduces decorative desktop chrome.
*/
:root{
  --mi2-ease:cubic-bezier(.2,.82,.24,1);
  --mi2-pop:cubic-bezier(.18,.88,.22,1.16);
  --mi2-blue:#2f95df;
  --mi2-blue-soft:#eaf6fd;
  --mi2-gold:#e4ad54;
  --mi2-green:#70b85c;
}

/* Touch response: subtle and immediate, never floaty. */
.cm-phase2-screen .aw-tile,
.cm-phase2-screen .aw-answer,
.cm-phase2-screen .aw-clue,
.cm-phase2-screen .cm2-actions button,
.cm-phase2-screen .duel-compact-top button{
  transition:transform 110ms var(--mi2-ease),box-shadow 160ms var(--mi2-ease),background-color 160ms ease,border-color 160ms ease,opacity 160ms ease!important;
  transform-origin:center!important;
}
.cm-phase2-screen .aw-tile.mi2-pressed:not(:disabled){transform:translateY(1px) scale(.965)!important}
.cm-phase2-screen .cm2-utility.mi2-pressed:not(:disabled){transform:scale(.93)!important}
.cm-phase2-screen .cm2-primary.mi2-pressed:not(:disabled){transform:scale(.975)!important}
.cm-phase2-screen .aw-clue.mi2-pressed:not(:disabled),.cm-phase2-screen .aw-answer.mi2-pressed:not(:disabled){transform:scale(.965)!important}
.cm-phase2-screen button:focus-visible{outline:3px solid rgba(47,149,223,.45)!important;outline-offset:2px!important;z-index:8!important}

/* Selected rack tile: lift, shadow and blue focus halo. */
.cm-phase2-screen .aw-tile.selected{
  transform:translateY(-6px) scale(1.035)!important;
  box-shadow:0 4px 0 #d1ab63,0 10px 19px rgba(67,54,29,.17),0 0 0 3px rgba(47,149,223,.18)!important;
  animation:mi2-pickup 180ms var(--mi2-pop) both!important;
}

/* Drag is physical but restrained; target visibly magnetises. */
.duel-dragging{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.duel-drag-ghost{
  z-index:10020!important;pointer-events:none!important;position:fixed!important;margin:0!important;
  opacity:.96!important;will-change:transform!important;
  filter:drop-shadow(0 14px 14px rgba(30,40,52,.24))!important;
  transition:transform 65ms linear,opacity 120ms ease!important;
}
.duel-drag-ghost.snap{opacity:.15!important;transition:transform 165ms var(--mi2-pop),opacity 150ms ease!important}
.duel-drag-ghost.returning{opacity:.55!important;transition:transform 190ms var(--mi2-ease),opacity 190ms ease!important}
.cm-phase2-screen .aw-answer.drag-target{
  background:#e7f5ff!important;box-shadow:inset 0 0 0 3px var(--mi2-blue),0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(47,149,223,.24)!important;
  transform:scale(1.045)!important;z-index:5!important;
}
.cm-phase2-screen .aw-tile.drag-source{opacity:.2!important;transform:scale(.9)!important}

/* Placement and return feedback survive app.js full rerenders. */
.cm-phase2-screen .aw-answer.mi2-placed-now{animation:mi2-cell-land 240ms var(--mi2-pop) both!important}
.cm-phase2-screen .aw-answer.mi2-returned-now{animation:mi2-cell-return 220ms var(--mi2-ease) both!important}
.cm-phase2-screen .aw-answer.buffered>span{animation:mi2-letter-land 210ms var(--mi2-pop) both!important}
.cm-phase2-screen .aw-answer .aw-return{opacity:.46!important;transform:scale(.86)!important;transition:opacity 160ms ease,transform 160ms var(--mi2-ease)!important}
.cm-phase2-screen .aw-answer.buffered:active .aw-return{opacity:.8!important;transform:scale(1)!important}

/* Lane/clue selection is informative, not a permanent glow show. */
.cm-phase2-screen .aw-clue.mi2-clue-now{animation:mi2-clue-focus 340ms var(--mi2-ease) both!important}
.cm-phase2-screen .aw-answer.lane{transition:background-color 180ms ease,box-shadow 180ms ease!important}
.cm-phase2-screen .aw-answer.lane-open{animation:mi2-lane-open 260ms ease-out both!important}

/* Hint: green pulse once, then rests as the Phase-1 green target state. */
.cm-phase2-screen .aw-answer.mi2-hint-now{
  animation:mi2-hint-reveal 560ms var(--mi2-pop) var(--mi2-delay,0ms) both!important;
}
.cm-phase2-screen .aw-answer.hint-target>span{font-weight:800!important}

/* Score and turn feedback: content remains still after a short confirmation. */
.cm-phase2-screen .duelist b.mi2-score-now{animation:mi2-score 500ms var(--mi2-pop) both!important}
.cm-phase2-screen.mi2-turn-now .duelist.active .avatar{animation:mi2-turn-label 360ms var(--mi2-ease) both!important}
.cm-phase2-screen.mi2-turn-now .duelist.active b{animation:mi2-turn-score 360ms var(--mi2-ease) both!important}
.cm-phase2-screen .duel-phase-cue{transition:opacity 180ms ease,transform 180ms var(--mi2-ease)!important}

/* Opponent placement reads as a sequential move, not a board flash. */
.cm-phase2-screen .aw-answer.mi2-opponent-now,
.cm-phase2-screen .aw-answer.opponent-preview,
.cm-phase2-screen .aw-answer.ai-preview{
  animation:mi2-opponent-place 300ms var(--mi2-pop) var(--mi2-delay,0ms) both!important;
}
.cm-phase2-screen .aw-answer.recent-move:not(.mi2-opponent-now){animation:mi2-recent 440ms ease-out both!important}

/* Rack refresh after Swap/+Letter has a short settle. */
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:not(.selected){animation:mi2-rack-settle 300ms var(--mi2-pop) both!important}
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:nth-child(2){animation-delay:22ms!important}
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:nth-child(3){animation-delay:44ms!important}
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:nth-child(4){animation-delay:66ms!important}
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:nth-child(5){animation-delay:88ms!important}
.cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile:nth-child(6){animation-delay:110ms!important}

/* Pass -> Submit is perceived as one central control changing purpose. */
.cm-phase2-screen .cm2-primary.mi2-primary-swap{animation:mi2-primary-swap 270ms var(--mi2-pop) both!important}
.cm-phase2-screen .cm2-primary:not(:disabled){box-shadow:0 3px 8px rgba(47,149,223,.19)!important}
.cm-phase2-screen .cm2-primary:not(:disabled):active{box-shadow:0 1px 4px rgba(47,149,223,.16)!important}
.cm-phase2-screen .cm2-utility:not(:disabled):active>span{background:#f4f9fc!important;border-color:#cbdce7!important}

/* Rewarded-ad verification state: modal-like status chip above the thumb row. */
.cm-phase2-screen .rewarded-tool-status.mi2-ad-now{animation:mi2-ad-chip 250ms var(--mi2-pop) both!important}
.cm-phase2-screen .rewarded-tool-status:before{content:'●';font-size:8px;color:var(--mi2-blue);margin-right:7px;animation:mi2-ad-dot .9s ease-in-out infinite!important}

/* Existing invalid feedback is made tactile and local. */
.cm-phase2-screen .aw-answer.duel-invalid{animation:mi2-invalid 330ms ease both!important;box-shadow:inset 0 0 0 2px #df7c78!important}
.cm-phase2-screen .aw-answer.duel-pulse{animation:mi2-cell-land 240ms var(--mi2-pop) both!important}

/* Initial screen reveal is almost imperceptible, avoiding a web-page feel. */
.cm-phase2-screen.mi2-screen-enter .duel-board-stage{animation:mi2-screen-board 300ms var(--mi2-ease) both!important}
.cm-phase2-screen.mi2-screen-enter .aw-rack{animation:mi2-screen-rack 330ms var(--mi2-ease) 35ms both!important}
.cm-phase2-screen.mi2-screen-enter .cm2-actions{animation:mi2-screen-actions 330ms var(--mi2-ease) 65ms both!important}

/* Result overlays: one clean arrival; legacy celebration remains underneath. */
.result-overlay .phase4-result,.friend-result-page.phase4-result .friend-result-hero{animation:mi2-result 400ms var(--mi2-pop) both!important}
.result-overlay .result-icon,.friend-result-page .result-icon{animation:mi2-result-icon 520ms var(--mi2-pop) 90ms both!important}

@keyframes mi2-pickup{0%{transform:translateY(0) scale(.96)}70%{transform:translateY(-7px) scale(1.05)}100%{transform:translateY(-6px) scale(1.035)}}
@keyframes mi2-cell-land{0%{transform:scale(.72);filter:brightness(1.08)}68%{transform:scale(1.08)}100%{transform:none;filter:none}}
@keyframes mi2-letter-land{0%{opacity:.15;transform:translateY(-7px) scale(.7)}70%{opacity:1;transform:translateY(1px) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes mi2-cell-return{0%{transform:scale(1);background:#fff0d3}55%{transform:scale(.9);background:#fff7e9}100%{transform:none}}
@keyframes mi2-clue-focus{0%{transform:scale(.96)}62%{transform:scale(1.025)}100%{transform:none}}
@keyframes mi2-lane-open{0%{box-shadow:inset 0 0 0 0 rgba(228,173,84,0)}100%{box-shadow:inset 0 0 0 2px var(--mcu-lane-line)}}
@keyframes mi2-hint-reveal{0%{transform:scale(.78);box-shadow:inset 0 0 0 0 rgba(112,184,92,0)}52%{transform:scale(1.08);box-shadow:inset 0 0 0 3px var(--mi2-green),0 0 0 3px rgba(112,184,92,.16)}100%{transform:none;box-shadow:inset 0 0 0 2px var(--mcu-hint-line)}}
@keyframes mi2-score{0%{transform:scale(.82)}45%{transform:scale(1.18)}72%{transform:scale(.98)}100%{transform:none}}
@keyframes mi2-turn-label{0%{opacity:.55;transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes mi2-turn-score{0%{box-shadow:0 0 0 0 rgba(47,149,223,.25)}70%{box-shadow:0 0 0 5px rgba(47,149,223,0)}100%{box-shadow:none}}
@keyframes mi2-opponent-place{0%{opacity:.05;transform:translateY(-8px) scale(.75)}68%{opacity:1;transform:translateY(1px) scale(1.07)}100%{opacity:1;transform:none}}
@keyframes mi2-recent{0%{box-shadow:inset 0 0 0 2px rgba(112,184,92,.7)}100%{box-shadow:inset 0 0 0 0 rgba(112,184,92,0)}}
@keyframes mi2-rack-settle{0%{opacity:.5;transform:translateY(5px) scale(.94)}70%{opacity:1;transform:translateY(-1px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes mi2-primary-swap{0%{opacity:.25;transform:scale(.9)}70%{opacity:1;transform:scale(1.025)}100%{opacity:1;transform:none}}
@keyframes mi2-ad-chip{0%{opacity:0;transform:translate(-50%,8px) scale(.94)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes mi2-ad-dot{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes mi2-invalid{0%,100%{transform:translateX(0)}24%{transform:translateX(-3px)}48%{transform:translateX(3px)}72%{transform:translateX(-2px)}}
@keyframes mi2-screen-board{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes mi2-screen-rack{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes mi2-screen-actions{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes mi2-result{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mi2-result-icon{0%{opacity:.2;transform:scale(.65) rotate(-7deg)}70%{opacity:1;transform:scale(1.09) rotate(2deg)}100%{opacity:1;transform:none}}

/* Keep the motion budget low on tiny/short phones. */
@media(max-width:350px),(max-height:620px){
  .cm-phase2-screen .aw-answer.mi2-hint-now{animation-duration:420ms!important}
  .cm-phase2-screen .aw-rack.mi2-rack-refresh .aw-tile{animation-duration:240ms!important}
}

/* Accessibility is absolute: no transition, animation, drag flourish or pulse. */
.reduced-motion .cm-phase2-screen *,
.reduced-motion .duel-drag-ghost,
.reduced-motion .result-overlay *,
.reduced-motion .friend-result-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){
  .cm-phase2-screen *,
  .duel-drag-ghost,
  .result-overlay *,
  .friend-result-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}