/* The welcome tutorial (js/tutorial.js): a guided walk through the real site. The page is dimmed except for one lit-up spot (the thing to use next), a coach card sits next to it, and a
   chest waits at the end. The dimming is the lit-up spot's own huge shadow; four invisible walls around it (and a cover over it, for the stops where you only look) keep clicks away from
   everything else, while the spot itself lets the real click through. z-index 95: above the page and its menus, below the windows (100), the toasts (200) and the tooltips (400). */
.tg { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.tg-dim { display: none; position: fixed; inset: 0; pointer-events: auto; }
.tg-dim.full { display: block; background: rgba(8, 7, 6, .88); } .tg-dim.light { display: block; background: rgba(8, 7, 6, .5); }
.tg-bk, .tg-cap { position: fixed; display: block; background: transparent; pointer-events: auto; }
.tg-hole { position: fixed; display: block; border-radius: 12px; pointer-events: none; z-index: 1; box-shadow: 0 0 0 200vmax rgba(8, 7, 6, .76); outline: 3px solid var(--lime); outline-offset: -1px; }
.tg[data-kind="look"] .tg-hole { outline-color: #EFE6D2; }
.tg-hand { position: fixed; display: block; width: 36px; height: 36px; z-index: 2; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .55)); }
.tg-card { position: fixed; z-index: 3; pointer-events: auto; display: flex; flex-direction: column; max-height: calc(var(--view-h) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--paper-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-2); box-shadow: 6px 6px 0 var(--lime-shadow); transition: box-shadow .25s, border-color .25s; }
.tg-card.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px)); }
.tg-card.ok { border-color: #2F6B47; box-shadow: 6px 6px 0 var(--lime); }
.tg-card::after { content: ''; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--paper); transform: rotate(45deg); display: none; }
.tg-card[data-where="below"]::after { display: block; top: -9px; border-left: var(--bw) solid #0E0C0A; border-top: var(--bw) solid #0E0C0A; }
.tg-card[data-where="above"]::after { display: block; bottom: -9px; border-right: var(--bw) solid #0E0C0A; border-bottom: var(--bw) solid #0E0C0A; }
.tg-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1.5px dashed var(--paper-line); flex: none; }
.tg-path { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-dots { flex: 1; display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.tp-dots li { flex: 1; height: 9px; min-width: 0; border: 2px solid #0E0C0A; border-radius: 99px; background: rgba(14, 12, 10, .1); transition: background .3s; }
.tp-dots li.done { background: var(--lime); } .tp-dots li.now { background: var(--verm); }
.tp-prize { flex: none; display: flex; align-items: center; gap: 6px; } .tp-prize b { font: 800 14px var(--f-mono); letter-spacing: -.03em; }
.tp-prize .tp-chest { width: 38px; height: auto; } .tp-prize.now .tp-chest { animation: tpWiggle 1.4s ease-in-out infinite; }
.tg-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #0E0C0A; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.tg-x:hover { background: var(--verm); color: var(--verm-ink); }
.tg-body { padding: 14px 16px 4px; }
.tg-kicker { display: block; font: 700 11px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--verm-deep); }
.tg-title { margin: 5px 0 6px; font-size: 24px; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.tg-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--paper-mute, var(--paper-ink)); overflow-wrap: anywhere; } .tg-text b { color: var(--paper-ink); background: var(--lime); padding: 0 4px; border-radius: 3px; }
.tg-extra { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; } .tg-extra[hidden] { display: none; }
.tg-extra > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } .tg-extra svg.sticker { flex: none; }
.tg-extra.goals { flex-direction: column; } .tg-extra.goals .btn { justify-content: center; }
.tg-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; flex: none; }
.tg-hint { flex: 1; min-width: 0; font: 600 12px var(--f-mono); letter-spacing: .03em; color: var(--paper-mute, var(--paper-ink)); overflow-wrap: anywhere; }
.tg [hidden] { display: none !important; }
.tg-art.fin { display: flex; align-items: center; justify-content: center; height: 170px; background: var(--lime); border-bottom: var(--bw) solid #0E0C0A; overflow: hidden; }
.tp-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--paper-mute, var(--paper-ink)); }
.tp-open { align-self: stretch; justify-content: center; min-height: 50px; font-size: 18px; width: 100%; } .tg-extra:has(.tp-open) { flex-direction: column; }

/* the chest */
.tp-chest { display: block; width: 130px; height: auto; overflow: visible; }
.tp-chest .tp-lid { transform-origin: 14px 64px; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.tp-chest.open .tp-lid { transform: rotate(-62deg); }
.tp-chest .tp-coins { opacity: 0; transform: translateY(26px); transition: opacity .3s .15s, transform .5s .15s cubic-bezier(.3, 1.6, .5, 1); }
.tp-chest.open .tp-coins { opacity: 1; transform: translateY(-8px); }
.tp-chestbig .tp-chest { width: 150px; margin-top: 44px; } .tp-chestbig.popped .tp-chest { animation: tpPop .6s; }

/* the card at the top of the main page (js/tourcard.js) */
.tourcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 22px; margin-bottom: 26px; padding: 16px 22px 16px 18px; background: var(--lime); color: var(--lime-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-2); box-shadow: 6px 6px 0 var(--lime-shadow); }
.tc-chest .tp-chest { width: 112px; } .tourcard:hover .tp-chest, .tourcard:focus-within .tp-chest { animation: tpWiggle 1.1s ease-in-out; }
.tc-copy { min-width: 0; } .tc-copy .kicker { color: var(--lime-ink); opacity: .7; }
.tc-copy h2 { margin: 4px 0 6px; font-size: clamp(21px, 3.2vw, 28px); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; } .tc-copy h2 b { background: #0E0C0A; color: var(--lime); padding: 0 8px; border-radius: 6px; font-family: var(--f-mono); letter-spacing: -.03em; white-space: nowrap; }
.tc-copy p { margin: 0; font-size: 14.5px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.tc-act { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 150px; }
.tc-go { justify-content: center; background: #0E0C0A; color: var(--lime); border-color: #0E0C0A; box-shadow: 4px 4px 0 var(--lime-shadow); min-height: 46px; font-size: 16px; } .tc-go:hover { background: #0E0C0A; color: #fff; }
.tc-later { background: transparent; border: 0; color: inherit; font: 700 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; cursor: pointer; padding: 4px; } .tc-later:hover { opacity: 1; text-decoration: underline; }

/* the Tutorial page (views/tutorialpage.js) */
.tpg-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; padding: 20px 24px; border: var(--bw) solid #0E0C0A; border-radius: var(--r-2); box-shadow: 6px 6px 0 var(--lime-shadow); }
.tpg-status.todo { background: var(--lime); color: var(--lime-ink); } .tpg-status.done { background: var(--paper); color: var(--paper-ink); box-shadow: 6px 6px 0 var(--verm-shadow); }
.tpg-chest .tp-chest { width: 120px; } .tpg-chest .tp-chest.open { margin-top: 30px; } .tpg-body { min-width: 0; } .tpg-body .kicker { opacity: .7; color: inherit; }
.tpg-body h2 { margin: 4px 0 6px; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; } .tpg-body p { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.tpg-act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 170px; text-align: center; } .tpg-act .btn { justify-content: center; min-height: 48px; }
.tpg-status.todo .btn-primary { background: #0E0C0A; color: var(--lime); border-color: #0E0C0A; box-shadow: 4px 4px 0 var(--lime-shadow); }
.tpg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tpg-tile { display: flex; gap: 14px; min-width: 0; padding: 16px; background: var(--card); border: var(--bw) solid var(--line-soft); border-radius: var(--r-1); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tpg-tile:hover { transform: translate(-2px, -2px); border-color: var(--lime); box-shadow: 4px 4px 0 var(--lime-shadow); }
.tpg-ico { flex: none; } .tpg-copy { min-width: 0; } .tpg-copy h3 { margin: 2px 0 4px; font-size: 19px; letter-spacing: -.03em; overflow-wrap: anywhere; } .tpg-copy p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.tpg-go { font: 700 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); } .tpg-go:hover { text-decoration: underline; }
.tpg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpg-facts li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px dashed var(--line-soft); border-radius: var(--r-1); min-width: 0; } .tpg-facts b { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); } .tpg-facts span { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .tg-card:not(.center) { animation: tgIn .3s cubic-bezier(.2, .9, .3, 1.2); }
  .tg-card.center { animation: tgCenter .35s cubic-bezier(.2, .9, .3, 1.2); }
  .tg[data-kind="click"] .tg-hole::after, .tg[data-kind="do"] .tg-hole::after { content: ''; position: absolute; inset: -4px; border: 3px solid var(--lime); border-radius: 16px; animation: tgRing 1.4s ease-out infinite; }
  .tg-hand { animation: tgHand 1s ease-in-out infinite; }
  .tp-dots li.now { animation: tpPulse 1.2s ease-in-out infinite; }
  .tp-chestbig .tp-chest:not(.open) { animation: tpWiggle 1.6s ease-in-out infinite; }
}
@keyframes tgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes tgCenter { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes tgRing { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes tgHand { 50% { transform: translate(-7px, -7px); } }
@keyframes tpPulse { 50% { opacity: .45; } }
@keyframes tpWiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } }
@keyframes tpPop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (max-width: 640px) {
  .tg-card { box-shadow: 4px 4px 0 var(--lime-shadow); } .tg-card[data-where="below"]::after, .tg-card[data-where="above"]::after { display: none; }
  .tg-title { font-size: 21px; } .tg-text { font-size: 14.5px; } .tg-body { padding: 12px 14px 2px; }
  .tourcard, .tpg-status { grid-template-columns: minmax(0, 1fr); text-align: left; } .tc-chest .tp-chest, .tpg-chest .tp-chest { width: 84px; } .tc-act, .tpg-act { min-width: 0; }
  .tpg-tiles, .tpg-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .tg-foot { flex-wrap: wrap; } .tg-hint { flex-basis: 100%; order: -1; }
}