/* The tutorial (public/js/tutorial.js): its lesson panel, the ring around the HUD piece a lesson is about, the
   first-visit offer; first-use tips (tips.js); and the champion picker's beginner tag. */

/* Lesson panel: left side, under your unit card and above the turn log (the lessons happen mid-board and on the right). */
#tutorial { position: fixed; left: 14px; top: 140px; z-index: 5; width: min(340px, calc(100vw - 28px)); pointer-events: none; }
#tutorial[hidden] { display: none; }
.tt-card { pointer-events: auto; background: var(--panel-2); border: 1px solid rgba(63, 196, 224, .45); padding: 12px 15px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(160, 225, 255, .2);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tt-card.nudge { animation: tt-nudge .4s; }
@keyframes tt-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tt-hd { display: flex; align-items: center; gap: 8px; }
.tt-step { font: 700 10px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tt-dots { display: flex; gap: 3px; flex: 1; }
.tt-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(140, 170, 210, .25); }
.tt-dots i.on { background: var(--ally); box-shadow: 0 0 3px color-mix(in srgb, var(--ally) 60%, transparent); }
.tt-dots i.done { background: rgba(63, 196, 224, .55); }
.tt-skip { background: none; border: 1px solid var(--line); color: var(--muted); font: 600 11px var(--ui); padding: 3px 9px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.tt-skip:hover { color: var(--fg); border-color: rgba(255, 255, 255, .35); }
.tt-card h3 { margin: 8px 0 6px; font: 800 17px var(--title); letter-spacing: .04em; color: #fff; }
.tt-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--fg); }
.tt-card kbd { font: 700 11px var(--ui); padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
.tt-card .pk { font-weight: 700; }
.tt-card .pk-health { color: #62d894; } .tt-card .pk-might { color: #ff6a5a; }
.tt-goal { display: flex; gap: 8px; align-items: center; padding: 7px 9px; background: rgba(63, 196, 224, .08); border: 1px solid rgba(63, 196, 224, .25); font: 600 12.5px var(--ui); color: #dff6ff; }
.tt-goal .box { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border: 1.5px solid var(--ally); font-size: 11px; color: #041018; }
.tt-goal.ok .box { background: var(--ally); }
.tt-hint { margin-top: 8px; padding: 6px 9px; border-left: 3px solid #e8b947; background: rgba(255, 201, 40, .1); font-size: 12.5px; color: #ffe7a0; }
.tt-res { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: #fff; padding: 8px 10px; background: rgba(93, 255, 154, .08); border-left: 3px solid #62d894; }
.tt-res.wait { color: var(--muted); background: none; border-left-color: var(--line); font-style: italic; }
.tt-btns { display: flex; gap: 8px; }
.tt-btns .go { margin-top: 10px; padding: 10px; font-size: 14px; }
.tt-confirm { margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(255, 90, 106, .5); background: rgba(120, 24, 36, .25); font-size: 12.5px; }
.tt-confirm span { display: flex; gap: 8px; margin-top: 8px; }
.tt-confirm button { flex: 1; margin: 0; padding: 7px; font-size: 13px; border-radius: 8px; cursor: pointer; }
.tt-confirm [data-t="leave"] { background: rgba(120, 24, 36, .6); border: 1px solid rgba(255, 90, 106, .7); color: var(--fg); font-weight: 700; }
/* No clock in the tutorial: the lock-in ring and the time bank stay out of it. */
body.ag-tutorial #lock .secs, body.ag-tutorial #bank { display: none; }
body.ag-tutorial #lock .arc { opacity: 0; }

/* The ring around the piece of the HUD a lesson is about. */
#tutspot { position: fixed; z-index: 4; pointer-events: none; border: 2px solid #ffd84a; box-shadow: 0 0 0 3px rgba(255, 216, 74, .25), 0 0 12px rgba(255, 216, 74, .39); animation: tt-pulse 1.2s ease-in-out infinite; }
#tutspot[hidden] { display: none; }
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 216, 74, .12), 0 0 16px rgba(255, 216, 74, .54); } }

/* First visit: the offer, over the menu. */
#tutoffer { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 10, .62); backdrop-filter: blur(3px); }
#tutoffer[hidden] { display: none; }
.to-card .eyebrow { text-transform: uppercase; color: var(--ally); }
.to-card h2 { letter-spacing: .05em; color: #fff; }
.to-card p { margin: 0; line-height: 1.5; }
.to-btns { display: flex; }
.to-btns .ghost { cursor: pointer; text-transform: uppercase; }
.to-card small { display: block; color: var(--muted); text-align: center; }

/* First-use tips: a small card on the right under the enemy cards (clear of your spawn and the ability bar), gone in a few seconds or on ✕. */
#fttip { position: fixed; right: 14px; top: 330px; z-index: 4; width: min(330px, calc(100vw - 28px)); padding: 9px 12px 10px;
  background: rgba(10, 18, 30, .95); border: 1px solid rgba(255, 216, 74, .55); box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
#fttip[hidden], body:has(#lobby:not([hidden])) #fttip, body:has(#over:not([hidden])) #fttip { display: none; }
#fttip.in { animation: ft-in .3s ease-out; }
@keyframes ft-in { from { opacity: 0; transform: translateX(10px); } }
#fttip .ft-hd { display: flex; align-items: center; gap: 8px; }
#fttip .ft-hd b { flex: 1; font: 800 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #ffd84a; }
#fttip .ft-hd b::before { content: '💡 '; }
#fttip .ft-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
#fttip .ft-x:hover { color: #fff; }
#fttip p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--fg); }

/* The champion picker: easier champions say so. */
.ch .beg, .st-hd .beg { align-self: flex-start; white-space: nowrap; }
/* The menu's tutorial link sits beside the how-to link. */
.howlinks { justify-content: center; flex-wrap: wrap; }
/* The how-to guide's last card: bring the first-use tips back. */
#howto .hreset { display: block; margin: -4px 0 10px; padding: 0; background: none; border: 0; color: #ffd84a; font: 600 12.5px var(--ui); cursor: pointer; text-align: left; }
#howto .hreset:disabled { color: #62d894; cursor: default; }

/* ==== The first-visit offer and the how-to guide, in the HUD's angular look. ==== */
.to-card, #howto .hcard { --c: 14px; position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none; }
.to-card::before, .to-card::after, #howto .hcard::before, #howto .hcard::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.to-card::before, #howto .hcard::before { inset: 0; background: linear-gradient(180deg, rgba(150, 225, 255, .75), var(--ar-line) 90px); }
.to-card::after, #howto .hcard::after { inset: 1px; background: radial-gradient(ellipse 80% 140px at 50% 0, rgba(63, 196, 224, .14), transparent), linear-gradient(180deg, rgba(15, 24, 39, .98), rgba(7, 11, 19, .98)); }
.to-card { width: min(500px, 100%); padding: 24px; }
.to-card .eyebrow { font: 700 11px var(--ui); letter-spacing: .2em; }
.to-card h2 { margin: 8px 0 12px; font: 800 24px/1.15 var(--title); }
.to-card p { font-size: 13.5px; color: #d6e0ee; }
.to-btns { gap: var(--s3); margin-top: 24px; }
.to-btns > .ghost { flex: 0 0 auto; }
.to-btns > .go { flex: 1 1 auto; }
.to-btns .go, .to-btns .ghost { --c: 10px; height: 48px; margin: 0; padding: 0 20px; border-radius: 0; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.to-btns .go { font: 800 15px var(--title); letter-spacing: .14em; color: #031018; background: linear-gradient(180deg, #7ed6ea, #2aa4c4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 60, 80, .35); }
.to-btns .go:focus-visible { outline: none; filter: brightness(1.1); box-shadow: inset 0 0 0 2px #fff; }
.to-btns .ghost { font: 700 12px var(--ui); letter-spacing: .12em; color: #b8c6da; background: transparent; border: 1px solid var(--ar-line); }
.to-btns .ghost:hover { color: #fff; border-color: var(--ar-line-hi); }
.to-card small { margin-top: var(--s4); font-size: 11.5px; }

#howto .hcard { padding: var(--s4); }
#howto .hspot { border-radius: 0; }
#howto .hstep { font: 700 10px var(--ui); letter-spacing: .16em; color: #7fdcf0; }
#howto h3 { margin: 4px 0 8px; font: 800 17px var(--title); }
#howto .hno { margin: 12px 0; }
#howto .hbtns { gap: var(--s2); }
#howto .hbtns button { --c: 6px; height: var(--h-btn); padding: 0 16px; border-radius: 0; font: 700 12px var(--ui); letter-spacing: .06em; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
#howto .hbtns button.ghost { background: transparent; border: 1px solid var(--ar-line); color: #b8c6da; }
#howto .hbtns button.ghost:hover { color: #fff; border-color: var(--ar-line-hi); }
#howto .hbtns button.primary { min-width: 88px; background: linear-gradient(180deg, #7ed6ea, #2aa4c4); color: #031018; border: 0; }