/* Evertrail Idle client · the tutorial tracker (views/tutorial.mjs, docs/TUTORIAL.md). On a desktop it takes a row
   at the top of the right column; on a phone it sits in the flow under the top bar. It never covers a world. */

/* ---------------------------------------------------------------- Place */
.region-tutorial { grid-column: 3; grid-row: 2; min-width: 0; margin-bottom: var(--gap); }
.region-tutorial:empty { display: none; }
.region-tutorial:has(> .tutorial) { padding-top: .8rem; }
/* The skills and the stage span both rows; the gear panel keeps the rest of the column. */
.ia-client.has-tutorial { grid-template-rows: var(--top) auto minmax(0, 1fr); }
.ia-client.has-tutorial > .region-left, .ia-client.has-tutorial > .center { grid-row: 2 / 4; }
.ia-client.has-tutorial > .region-right { grid-row: 3; }

/* ---------------------------------------------------------------- Tracker */
.tutorial { --skill: var(--gold-2); display: grid; gap: .45rem; padding: 1.05rem .75rem .65rem; }
.tutorial::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(85% 75% at 0% 0%, color-mix(in srgb, var(--skill) 17%, transparent), transparent 72%); }
.tutorial > :not(.plaque):not(.tut-fold) { position: relative; z-index: 1; }
.tutorial .plaque { font-size: .9rem; padding: .16rem 1.05rem .2rem; }
.tut-fold { position: absolute; z-index: 3; top: .3rem; right: .3rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .35rem; color: var(--text-3); transition: color .15s, background .15s; }
.tut-fold:hover { color: var(--gold-1); background: rgba(255, 255, 255, .06); }
.tut-fold .ia-glyph { width: .85rem; height: .85rem; }

.tut-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem; padding-right: 1.4rem; }
.tut-step .medal .ring { inset: -.2rem; }
.tut-copy { display: grid; gap: .16rem; min-width: 0; }
.tut-kicker { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tut-kicker .t-caps { flex: none; font-size: .58rem; color: color-mix(in srgb, var(--skill) 65%, #fff); }
.tut-copy strong { font-size: 1.12rem; line-height: 1.1; color: var(--text-1); text-shadow: 0 1px 0 #000; }
.tut-pips { display: inline-flex; align-items: center; gap: .22rem; min-width: 0; }
.tut-pips i { flex: none; width: .36rem; height: .36rem; rotate: 45deg; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); }
.tut-pips i.is-done { background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); }
.tut-pips i.is-now { background: var(--skill); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 .4rem var(--skill); }

.tut-why { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--text-2); }
.tut-target { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-2); }
.tut-target .ia-glyph { width: .85rem; height: .85rem; color: var(--gold-2); }
.tut-target b { color: var(--gold-1); font-weight: 650; }
.tut-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.tut-count { display: inline-flex; align-items: center; gap: .25rem; font: 700 .76rem var(--font-num); color: var(--text-1); white-space: nowrap; }
.tut-count.is-done { color: var(--emerald); font-family: var(--font-ui); }
.tut-count .ia-glyph { width: .8rem; height: .8rem; }
.tut-checks { display: flex; flex-wrap: wrap; gap: .3rem; }
.tut-check { display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .45rem; border-radius: 1rem; font-size: .66rem; font-weight: 650; color: #ffd0b3; border: 1px solid rgba(255, 143, 79, .4); background: rgba(110, 45, 18, .35); }
.tut-check.is-ok { color: #b9f5c8; border-color: rgba(88, 214, 127, .4); background: rgba(23, 80, 44, .45); }
.tut-check .ia-glyph { width: .68rem; height: .68rem; }
.tut-check small { font-size: .62rem; opacity: .8; }

.tut-foot { display: grid; gap: .5rem; margin-top: .1rem; padding-top: .5rem; border-top: 1px solid var(--edge-soft); }
.tut-reward { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.tut-reward > .t-caps { flex: none; font-size: .58rem; color: var(--gold-3); }
.tut-prizes { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.tut-prize { display: inline-flex; align-items: center; gap: .22rem; padding: .12rem .45rem .12rem .22rem; border-radius: .4rem; background: rgba(0, 0, 0, .32); border: 1px solid rgba(242, 198, 106, .3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.tut-prize .ia-emblem, .tut-prize img { width: 1.3rem; height: 1.3rem; object-fit: contain; filter: drop-shadow(0 .08rem .08rem rgba(0, 0, 0, .6)); }
.tut-prize b { font-size: .8rem; color: var(--gold-1); }
.tut-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tut-show .ia-glyph, .tut-claim .ia-glyph { width: .9rem; height: .9rem; }
.tut-skip { flex: none; padding: .2rem .1rem; font-size: .7rem; font-weight: 650; color: var(--text-3); text-decoration: underline; text-decoration-color: rgba(147, 141, 125, .45); text-underline-offset: .18em; transition: color .15s; }
.tut-skip:hover { color: var(--text-1); }

/* A step that is done has its reward waiting: a gilded edge that breathes, and the Claim button. */
.tutorial.is-ready { border-color: color-mix(in srgb, var(--gold-2) 70%, transparent); animation: tut-ready 2.4s ease-in-out infinite; }
@keyframes tut-ready { 50% { box-shadow: var(--shadow-panel), 0 0 1.4rem rgba(242, 198, 106, .38), inset 0 1px 0 rgba(255, 238, 200, .07); } }
/* Low detail keeps the gilded edge still. */
.graphics-low .tutorial.is-ready { animation: none; box-shadow: var(--shadow-panel), 0 0 1rem rgba(242, 198, 106, .3); }
.tut-claim { flex: 1; min-height: 2.05rem; }

/* ---------------------------------------------------------------- Folded: a pill */
.tut-pill-row { display: flex; align-items: center; gap: .6rem; }
.tut-pill { display: inline-flex; align-items: center; gap: .45rem; height: 2.35rem; padding: 0 .7rem 0 .35rem; border-radius: 1.2rem; border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(34, 50, 76, .94), rgba(10, 16, 28, .95)); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 238, 200, .08); color: var(--text-1); transition: border-color .15s, filter .15s; }
.tut-pill:hover { border-color: var(--edge-strong); filter: brightness(1.08); }
.tut-pill .ia-emblem { width: 1.6rem; height: 1.6rem; }
.tut-pill > .ia-glyph { width: .8rem; height: .8rem; color: var(--text-3); }
.tut-pill-copy { display: grid; line-height: 1.1; text-align: left; }
.tut-pill-copy b { font: 600 .86rem var(--font-display); color: var(--gold-1); }
.tut-pill-copy small { font-size: .64rem; color: var(--text-3); }
.tut-pill.is-ready { border-color: var(--gold-2); box-shadow: var(--shadow-panel), 0 0 1rem rgba(242, 198, 106, .4); }
.tut-pill.is-ready .tut-pill-copy small { color: var(--gold-2); font-weight: 650; }
.tut-pill-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold-1); box-shadow: 0 0 .5rem var(--gold-2); animation: pulse 1.8s infinite; }
/* Beside the pill, Skip sits on its own dark capsule so it reads over any backdrop. */
.tut-pill-row .tut-skip { padding: .28rem .65rem; border-radius: 1rem; background: rgba(4, 8, 14, .62); border: 1px solid rgba(255, 255, 255, .08); color: var(--text-2); }

/* ---------------------------------------------------------------- Show me */
.spot-ring { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; border: 2px solid var(--gold-1); box-shadow: 0 0 0 2px rgba(0, 0, 0, .65), 0 0 1.2rem rgba(242, 198, 106, .7), inset 0 0 .8rem rgba(242, 198, 106, .25); opacity: 0; transition: opacity .2s; }
.spot-ring::after { content: ""; position: absolute; inset: -.3rem; border-radius: inherit; border: 2px solid rgba(255, 231, 166, .7); opacity: 0; }
.spot-ring.is-on { opacity: 1; animation: spot-pulse 1.2s ease-in-out infinite; }
.spot-ring.is-on::after { animation: spot-wave 1.2s ease-out infinite; }
@keyframes spot-pulse { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .65), 0 0 2.2rem rgba(242, 198, 106, .95), inset 0 0 1.1rem rgba(242, 198, 106, .35); } }
@keyframes spot-wave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.18); } }

/* ---------------------------------------------------------------- Skip: the confirmation */
.tut-scrim-hit { position: absolute; inset: 0; cursor: default; }
.modal.tut-skip-modal { position: relative; width: min(31rem, 100%); }
.tut-skip-modal h2 { font-size: 1.6rem; }
.tut-lost { display: grid; justify-items: center; gap: .5rem; margin: 0 0 1.15rem; padding: .75rem .9rem .8rem; border-radius: .55rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 93, 87, .32); }
.tut-lost > .t-caps { color: #ffb4a8; font-size: .6rem; }
.tut-lost .tut-prizes { justify-content: center; }
.tut-lost p { margin: 0; font-size: .82rem; color: var(--text-1); }
.tut-prize.is-lost { border-color: rgba(255, 93, 87, .38); }
.tut-prize.is-lost b { color: #ffd0c8; }
.tut-skip-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ---------------------------------------------------------------- A claimed reward */
.level-up.is-tutorial .lu-copy > small { letter-spacing: .24em; }
.level-up .tut-fx-prizes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.level-up .tut-prize { font-size: .9rem; color: var(--gold-1); }
.level-up .tut-prize b { font-size: .95rem; }

/* ---------------------------------------------------------------- Phones */
@media (max-width: 760px) {
  .region-tutorial { flex: none; margin: .45rem .5rem 0; }
  .region-tutorial:has(> .tutorial) { padding-top: .65rem; }
  .ia-client.has-tutorial .center { padding-top: .45rem; }
  .tutorial { gap: .38rem; padding: .95rem .65rem .6rem; }
  .tut-step { gap: .55rem; }
  .tut-step .medal { --size: 2.3rem !important; }
  .tut-copy strong { font-size: 1.02rem; }
  .tut-why { font-size: .74rem; line-height: 1.35; }
  .tut-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding-top: .45rem; }
  .tut-actions { gap: .45rem; }
  .tut-claim { flex: none; }
  .tut-skip-buttons { grid-template-columns: 1fr; }
}