/* Character-led invitations share the player's native frames and real hit targets. */
.summoners-player .battle-player[data-guide] { --guide-light:#ffe1a0; --guide-halo:#dbab454a; --guide-beacon:#ffd275; --guide-aura:#f8b53b85; }
.summoners-player [data-kind="magic"][data-guide] { --guide-light:#e1c2ff; --guide-halo:#a774ee55; --guide-beacon:#d5b0ff; --guide-aura:#b880ff99; }
.summoners-player .guide-cover { position:absolute; inset:0; z-index:30; overflow:hidden; display:grid; grid-template-columns:40% 60%; align-items:center; background:linear-gradient(115deg,#192926b8,#222b32eb 52%,#29242cd9); isolation:isolate; }
.summoners-player [data-kind="magic"] .guide-cover { background:linear-gradient(115deg,#22253db8,#242235eb 52%,#262335d9); }
.summoners-player .guide-cover::before { content:""; position:absolute; inset:9px; border:1px solid #edca7738; pointer-events:none; }
.summoners-player .guide-cover-light { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 20% 75%,var(--guide-halo),transparent 60%); }
.summoners-player .guide-character { position:absolute; bottom:-4px; left:1%; width:43%; height:98%; object-fit:contain; object-position:center bottom; image-rendering:pixelated; filter:drop-shadow(0 6px 12px #071719a0); transform-origin:50% 100%; }
.summoners-player .guide-invitation { position:relative; grid-column:2; padding:22px 22px 14px 4px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; }
.summoners-player .guide-bubble { position:relative; width:100%; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill stretch; background:#302734; padding:10px 12px; color:#f6ead5; box-shadow:0 5px 14px #09101755; }
.summoners-player .guide-bubble::before { content:""; position:absolute; left:-17px; top:46%; width:13px; height:13px; background:#302734; border-left:2px solid #b89458; border-bottom:2px solid #b89458; transform:rotate(45deg); }
.summoners-player .guide-name { display:block; margin-bottom:8px; font:10px/1.2 var(--control-font); text-transform:uppercase; letter-spacing:1.8px; color:var(--guide-light); }
.summoners-player .guide-bubble h4 { margin:0 0 9px; font:normal clamp(19px,2.6cqi,28px)/1.05 Georgia,serif; color:#fff0d4; letter-spacing:-.4px; }
.summoners-player .guide-line { position:relative; font:13px/1.55 var(--control-font); margin:0; }
.summoners-player .guide-measure { visibility:hidden; }
.summoners-player .guide-typed { position:absolute; inset:0; }
.summoners-player .guide-accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.summoners-player .guide-enter { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px; position:relative; padding:16px 36px; border:0; background:transparent; color:#fff3cc; font:600 16px/1.3 var(--control-font); image-rendering:pixelated; isolation:isolate; }
.summoners-player .guide-enter>span { min-width:0; white-space:normal; text-wrap:balance; text-align:center; }
.summoners-player .guide-enter::before { content:""; position:absolute; inset:0; border:solid transparent; border-width:16px 32px; border-image:url('ui/button-primary.png') 8 16 fill stretch; z-index:-1; pointer-events:none; filter:drop-shadow(0 0 4px var(--guide-beacon)) drop-shadow(0 0 12px var(--guide-aura)); }
.summoners-player .guide-enter::after { content:""; position:absolute; inset:14px 28px; z-index:-1; pointer-events:none; background:linear-gradient(110deg,transparent 36%,#fff2cc66 49%,transparent 62%) 180% 0/240% 100% no-repeat; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); opacity:0; }
.summoners-player .guide-enter:hover::before { border-image-source:url('ui/button-primary-hover.png'); }
.summoners-player .guide-enter svg { width:30px; height:30px; flex:none; fill:#ebd4a5; stroke:#ebd4a5; stroke-width:1.5; stroke-linejoin:round; }
.summoners-player .guide-enter svg path:first-child { stroke:#302636; }
.summoners-player .guide-bypass { font:11px/1.3 var(--control-font); border:0; color:#d7caba; background:transparent; min-height:32px; padding:0 8px; }
.summoners-player .guide-bypass:hover { color:white; text-decoration:underline; }
.summoners-player .guide-spotlight { position:absolute; inset:0; width:100%; height:100%; z-index:18; overflow:visible; pointer-events:none; }
.summoners-player .guide-dim { fill:#090d1a; fill-opacity:.5; }
.summoners-player .guide-rings rect { fill:none; stroke:var(--guide-light); stroke-width:2; filter:drop-shadow(0 0 5px var(--guide-light)); }
.summoners-player .guide-rail { display:contents; }
.summoners-player .guide-dialogue { position:absolute; top:24%; left:34%; right:4%; z-index:22; pointer-events:none; }
.summoners-player .guide-avatar { position:absolute; width:100px; height:126px; bottom:-6px; left:-91px; object-fit:contain; object-position:bottom; image-rendering:pixelated; filter:drop-shadow(0 4px 5px #090e17aa); }
.summoners-player .guide-dialogue .guide-bubble { padding:7px 10px 9px; border-width:6px; border-image-slice:6; }
.summoners-player .guide-dialogue .guide-line { font-size:13px; line-height:1.4; }
.summoners-player .guide-step-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; gap:6px; }
.summoners-player .guide-step { color:var(--guide-light); font:600 12px/1.2 var(--control-font); }
.summoners-player .guide-skip { pointer-events:auto; background:none; border:0; padding:3px 6px; margin:-7px -6px -5px 0; min-height:30px; color:#c9bcac; font:10px var(--control-font); }
.summoners-player .guide-skip:hover { color:#fff; text-decoration:underline; }
.summoners-player .guide-dialogue[data-step="result"] { top:4px; left:19%; right:19%; }
.summoners-player .guide-dialogue[data-step="result"] .guide-avatar { width:40px; height:48px; left:-38px; top:0; bottom:auto; }
.summoners-player .guide-dialogue[data-step="result"] .guide-step-heading { display:none; }
.summoners-player .guide-dialogue[data-step="result"] .guide-line { font-size:12px; }
.summoners-player .guide-restart { min-height:44px; background:none; color:#e7cb97; border:1px solid #bda16a; padding:8px 14px; font:12px var(--control-font); }
.summoners-player .guide-restart:hover { background:#7d654333; }
/* Help and deliberate card inspection sit above a tutorial, never beneath its dimmer. */
.summoners-player [data-guide] .helper { z-index:40; }
.summoners-player [data-guide] .inline-tip { z-index:24; }
.summoners-player [data-guide="choice"] .choice::before,
.summoners-player [data-guide="position"] .target-hint { animation:none!important; }
.summoners-player .guide-visible .guide-character { animation:guide-breathe 4s ease-in-out infinite; }
/* Animate the frame and pointing cue, keeping the label and click target still. */
.summoners-player .guide-visible .guide-enter::before { animation:guide-invite 2.4s ease-in-out infinite; }
.summoners-player .guide-visible .guide-enter::after { animation:guide-sheen 2.4s ease-in-out infinite; }
.summoners-player .guide-visible .guide-enter svg { animation:guide-tap 2.4s ease-in-out infinite; transform-origin:50% 80%; }
.summoners-player .guide-visible .guide-enter:is(:hover,:focus-visible)::before { animation:none; filter:brightness(1.25) drop-shadow(0 0 8px var(--guide-beacon)) drop-shadow(0 0 24px var(--guide-aura)); }
.summoners-player .guide-visible .guide-rings { animation:guide-ring 2s ease-in-out infinite; }
.summoners-player .guide-visible .guide-dialogue { animation:guide-speak-in .24s ease-out both; }
@keyframes guide-breathe { 0%,100% { transform:translateY(0) rotate(-.5deg); } 50% { transform:translateY(-3px) rotate(.3deg); } }
@keyframes guide-invite { 0%,70%,100% { filter:brightness(1.05) drop-shadow(0 0 4px var(--guide-beacon)) drop-shadow(0 0 12px var(--guide-aura)); } 18%,48% { filter:brightness(1.45) drop-shadow(0 0 8px var(--guide-beacon)) drop-shadow(0 0 28px var(--guide-aura)); } 32% { filter:brightness(1.12) drop-shadow(0 0 5px var(--guide-beacon)) drop-shadow(0 0 16px var(--guide-aura)); } }
@keyframes guide-sheen { 0%,8% { opacity:0; background-position:180% 0; } 16% { opacity:.8; } 52% { opacity:.65; background-position:-80% 0; } 60%,100% { opacity:0; background-position:-80% 0; } }
@keyframes guide-tap { 0%,60%,100% { transform:none; } 12%,40% { transform:translate(-2px,-4px) rotate(-12deg); } 22%,50% { transform:translateY(1px) rotate(4deg); } }
@keyframes guide-ring { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@keyframes guide-speak-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@container summoners-player (max-width:740px) {
  .summoners-player .guide-invitation { padding:12px 14px 8px 0; gap:6px; }
  .summoners-player .guide-bubble { padding:6px 8px; }
  .summoners-player .guide-name { font-size:9px; margin-bottom:5px; }
  .summoners-player .guide-bubble h4 { font-size:22px; margin-bottom:7px; }
  .summoners-player .guide-line { font-size:12px; line-height:1.45; }
  .summoners-player .guide-enter { min-height:56px; font-size:14px; padding:16px 32px; gap:7px; }
  .summoners-player .guide-enter svg { width:24px; height:24px; }
  .summoners-player .guide-dialogue { left:31%; right:3%; top:23%; }
  .summoners-player .guide-avatar { width:74px; height:92px; left:-67px; }
}
@container summoners-player (max-width:500px) {
  .summoners-player .guide-cover { grid-template-columns:30% 70%; }
  .summoners-player .guide-character { left:-6%; width:50%; height:94%; }
  .summoners-player .guide-invitation { padding:6px 8px 4px 4px; gap:2px; }
  .summoners-player .guide-bubble { border-width:4px; border-image-slice:4; padding:5px 7px; }
  .summoners-player .guide-bubble::before { left:-12px; width:10px; height:10px; }
  .summoners-player .guide-name { display:none; }
  .summoners-player .guide-bubble h4 { font-size:17px; margin-bottom:4px; }
  .summoners-player .guide-line { font-size:11px; line-height:1.35; }
  .summoners-player .guide-enter { min-height:48px; font-size:12.5px; padding:9px 20px; gap:6px; }
  .summoners-player .guide-enter::before { border-width:8px 16px; }
  .summoners-player .guide-enter::after { inset:8px 16px; }
  .summoners-player .guide-enter svg { width:18px; height:18px; }
  .summoners-player .guide-bypass { font-size:10px; min-height:26px; }
  .summoners-player .guide-rail { display:block; height:0; overflow:hidden; background:#292631; transition:height .3s ease; }
  .summoners-player [data-guide="choice"] .guide-rail,
  .summoners-player [data-guide="position"] .guide-rail,
  .summoners-player [data-guide="start"] .guide-rail,
  .summoners-player [data-guide="result"] .guide-rail { height:88px; border-bottom:1px solid #ab8b5455; }
  .summoners-player .guide-dialogue { position:relative; top:auto; left:auto; right:auto; margin:0; padding:8px 6px 8px 58px; min-height:88px; }
  .summoners-player .guide-avatar { width:62px; height:78px; left:0; bottom:4px; }
  .summoners-player .guide-dialogue .guide-bubble { padding:4px 6px; border-width:4px; border-image-slice:4; min-height:70px; }
  .summoners-player .guide-dialogue .guide-line { font-size:12px; line-height:1.35; }
  .summoners-player .guide-step { font-size:12px; }
  .summoners-player .guide-step-heading { margin-bottom:3px; }
  .summoners-player .guide-skip { min-height:24px; font-size:10px; margin:-4px -3px -3px 0; padding:0 4px; }
  .summoners-player .guide-dialogue[data-step="result"] { top:auto; left:auto; right:auto; }
  .summoners-player .guide-dialogue[data-step="result"] .guide-avatar { width:62px; height:78px; left:0; top:auto; bottom:4px; }
  .summoners-player .guide-dialogue[data-step="result"] .guide-line { font-size:12px; }
  .summoners-player .guide-dialogue[data-step="result"] .guide-bubble { display:flex; align-items:center; }
}
/* Keep a two-line invitation label and its skip control inside narrow arenas. */
@container summoners-player (max-width:340px) {
  .summoners-player .guide-invitation { padding-top:0; padding-bottom:0; gap:0; }
}
.motion-paused .summoners-player [data-guide] *,
.motion-paused .summoners-player [data-guide] *::before,
.motion-paused .summoners-player [data-guide] *::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  .summoners-player [data-guide] *,
  .summoners-player [data-guide] *::before,
  .summoners-player [data-guide] *::after { animation:none!important; transition:none!important; }
}