/* Guild application extras (on top of style.css) */
.field { margin-top: 14px; }
.field label, .field > b { display: block; margin-bottom: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .two { grid-template-columns: 1fr; } }
.apply-bards { max-width: 360px; margin: 0 auto; }
.btn.small { padding: 7px 12px; font-size: .9rem; }
.trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pop-in { animation: popIn .45s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes popIn { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }

/* region chips */
.regions { display: flex; gap: 10px; flex-wrap: wrap; }
.region { appearance: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--text); padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: #ffffff06; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, border-color .2s; }
.region:hover { transform: translateY(-2px); border-color: #e8c26a88; }
.region.on { border-color: var(--gold); background: #e8c26a18; box-shadow: 0 0 0 2px #e8c26a44 inset; }
.region .flag { font-size: 1.4rem; }

/* border patrol */
.overlay.border .box { max-width: 520px; }
.border-stage { position: relative; height: 160px; border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(#24314a, #3b2c25 70%, #5a4632 70%); }
.bp-sign { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 800 .72rem/1 'Inter', sans-serif; letter-spacing: .08em;
  color: #1a1408; background: repeating-linear-gradient(45deg, #f3d488 0 14px, #1a1408 14px 18px); padding: 6px 0; }
.bp-sign { background: #f3d488; }
.bp-gate { position: absolute; left: 52%; bottom: 30%; width: 44%; height: 8px; border-radius: 4px; transform-origin: left center;
  background: repeating-linear-gradient(90deg, #ff5c6c 0 18px, #fff 18px 36px); animation: gateDrop .6s 1.1s both cubic-bezier(.5, 1.8, .5, 1); }
@keyframes gateDrop { from { transform: rotate(-80deg) } to { transform: rotate(0) } }
.bp-guard { position: absolute; left: 44%; bottom: 22%; font-size: 52px; animation: guardStop .5s 1s both; }
@keyframes guardStop { from { transform: translateX(-30px) } 60% { transform: translateX(6px) scale(1.1) } to { transform: none } }
.bp-traveler { position: absolute; bottom: 22%; right: 6%; font-size: 30px; display: flex; align-items: flex-end; gap: 0;
  animation: travelerWalk 1.2s both ease-out, travelerBounce .25s 1.25s 3 both; }
.bp-face { font-size: 48px; }
.bp-item { font-size: 26px; animation: itemDrop .7s 1.8s both; }
@keyframes travelerWalk { from { transform: translateX(160px) } to { transform: none } }
@keyframes travelerBounce { 50% { transform: translateX(14px) } }
@keyframes itemDrop { from { transform: none } 60% { transform: translate(10px, -30px) rotate(200deg) } to { transform: translate(24px, 0) rotate(360deg) } }
.bp-stamp { position: absolute; left: 50%; top: 46%; font: 900 2.4rem/1 'Cinzel', serif; color: #ff3b4e; border: 5px solid #ff3b4e; padding: 2px 14px;
  border-radius: 8px; transform: translate(-50%, -50%) rotate(-14deg); opacity: 0; animation: stamp .35s 2.3s both cubic-bezier(.3, 1.6, .5, 1);
  text-shadow: 0 0 10px #000; background: #0006; }
@keyframes stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3) } to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1) } }

/* lookup */
.scry { text-align: center; padding: 20px 0; }
.scry .orb { font-size: 84px; display: inline-block; animation: orb 1.2s ease-in-out infinite; filter: drop-shadow(0 0 30px #8f6bff); }
@keyframes orb { 0%, 100% { transform: scale(1) rotate(-6deg) } 50% { transform: scale(1.12) rotate(6deg); filter: drop-shadow(0 0 50px #c9b6ff) } }
.found-hero .avatar-wrap { border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: #0006; box-shadow: 0 0 0 2px var(--class), 0 0 30px color-mix(in srgb, var(--class) 40%, transparent); }
.found-hero .avatar { width: 100%; height: 100%; object-fit: cover; display: block; animation: popIn .6s cubic-bezier(.2, .9, .3, 1.4); }
.found-hero .avatar-wrap .scene { height: 100%; aspect-ratio: auto; }
.roast { list-style: none; padding: 0; margin: 4px 0 0; }
.roast li { padding: 8px 12px; border-left: 3px solid var(--gold); background: #e8c26a0d; border-radius: 0 10px 10px 0; margin: 6px 0;
  animation: cardIn .5s both; }
.roast li:nth-child(2) { animation-delay: .25s; } .roast li:nth-child(3) { animation-delay: .5s; }
.notfound { text-align: center; }
.notfound .huge { font-size: 80px; display: inline-block; animation: sneakPeek 2.4s ease-in-out infinite; }
@keyframes sneakPeek { 0%, 100% { opacity: .15; transform: translateX(-20px) } 40%, 60% { opacity: 1; transform: none } }
.thisyou { border: 1px dashed var(--line); border-radius: 14px; padding: 12px 14px; }
.linkrow { display: flex; gap: 10px; align-items: center; padding: 4px 0; overflow-wrap: anywhere; font-size: .92rem; }
.thisyou.hide-mine .linkrow { opacity: .4; text-decoration: line-through; }
.thisyou-q { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.thisyou-q > span { font-weight: 700; margin-right: 4px; font-family: 'Cinzel', serif; color: var(--gold); }
#otherurls { margin-top: 14px; animation: cardIn .35s; }
.tile .yours { position: absolute; top: 8px; left: 10px; font-size: .7rem; font-weight: 700; background: var(--class); color: #000; padding: 2px 8px; border-radius: 99px; }

/* times */
.clockrow { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #8f6bff14; border: 1px solid #8f6bff44; }
.clockrow .clock { font-size: 2.4rem; display: inline-block; animation: tick 2s steps(4) infinite; }
@keyframes tick { to { transform: rotate(360deg) } }
.melt { font-size: 84px; display: inline-block; animation: melt 2.4s ease-in infinite; transform-origin: bottom center; }
@keyframes melt { 0% { transform: none } 60% { transform: scale(1.1, .6) skewX(-8deg); filter: blur(.5px) } 100% { transform: scale(1.4, .15); opacity: 0 } }

/* age slider */
.age { text-align: center; margin-top: 10px; }
.age-face { font-size: 76px; line-height: 1; display: inline-block; transition: transform .3s; }
.age-val { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.6rem; color: var(--gold); margin: 6px 0 14px; transition: font-size .5s cubic-bezier(.2, .9, .3, 1.5), letter-spacing .5s; }
.age-val.zoom { font-size: clamp(4rem, 16vw, 8rem); letter-spacing: .06em; text-shadow: 0 0 30px #e8c26a88; }
.age input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #4fd18b, #e8c26a, #ff8a3d, #ff5c6c, #7a5cff); outline: none; }
.age input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); border: 4px solid #0b0a10; cursor: pointer; box-shadow: 0 0 16px #e8c26a88; }
.age input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); border: 4px solid #0b0a10; cursor: pointer; }
.age-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.age-ticks span { cursor: pointer; flex: 1; transition: color .2s, transform .2s; }
.age-ticks span:first-child { text-align: left; } .age-ticks span:last-child { text-align: right; }
.age-ticks span.on { color: var(--gold); transform: scale(1.15); }
.age-line { margin-top: 16px; min-height: 2.6em; font-weight: 500; transition: font-size .5s; }
.age-card { transition: font-size .6s cubic-bezier(.2, .9, .3, 1.3); }
.age-card.large-print { font-size: 1.35rem; }
.age-card.large-print .age-line { font-size: 1.9rem; font-weight: 800; color: var(--gold); }
.age-card.large-print .age-ticks { font-size: 1rem; }
.age-card.large-print .btn { font-size: 1.3rem; padding: 16px 30px; }

/* grumpy grandpa */
.grandpa { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle, #3a1010ee, #000e); padding: 16px; text-align: center; animation: fadeIn .2s; }
.grandpa.out { opacity: 0; transition: opacity .4s; }
.gp-bubble { display: inline-block; font: 900 clamp(1.8rem, 7vw, 4rem)/1.05 'Cinzel', serif; color: #fff; background: #ff3b4e; padding: 18px 26px; border-radius: 22px;
  position: relative; box-shadow: 8px 8px 0 #000; animation: gpYell .5s cubic-bezier(.3, 1.8, .5, 1) both, gpShake .12s .5s infinite; }
.gp-bubble::after { content: ''; position: absolute; bottom: -22px; left: 50%; border: 14px solid transparent; border-top: 18px solid #ff3b4e; transform: translateX(-50%); }
@keyframes gpYell { from { transform: scale(0) rotate(-20deg) } to { transform: scale(1) rotate(-3deg) } }
@keyframes gpShake { 0%, 100% { transform: rotate(-3deg) translateX(0) } 50% { transform: rotate(2deg) translateX(4px) } }
.gp-man { position: relative; display: inline-block; margin-top: 26px; }
.gp-face { font-size: clamp(110px, 26vw, 180px); display: inline-block; animation: gpBob .3s ease-in-out infinite; }
.gp-cane { position: absolute; right: -50px; top: 10px; font-size: clamp(60px, 14vw, 100px); transform-origin: bottom left; animation: gpCane .35s ease-in-out infinite alternate; }
@keyframes gpBob { 50% { transform: translateY(-8px) scale(1.04) } }
@keyframes gpCane { from { transform: rotate(-30deg) } to { transform: rotate(25deg) } }
.gp-sub { color: #ffd5d9; max-width: 520px; margin: 18px auto 0; }

/* raid type: AoTC pep talks, drill sergeant, helping hand */
.lvl-slider { position: relative; }
.nudge { min-height: 2.4em; margin-top: 10px; text-align: center; font-weight: 600; color: #ffd27a; opacity: 0; transition: opacity .2s; }
.nudge.on { opacity: 1; }
.nudge .nf { font-size: 1.4em; vertical-align: -3px; }
.card.trembling { animation: tremble .09s infinite; }
@keyframes tremble { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(var(--tremble), 0) } 75% { transform: translate(calc(var(--tremble) * -1), 0) } }
.sarge { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; padding: 16px; text-align: center;
  background: repeating-linear-gradient(45deg, #2f3a1fee 0 40px, #3b4726ee 40px 80px), #000; animation: fadeIn .2s; }
.sarge.out { opacity: 0; transition: opacity .4s; }
.sg-bubble { display: inline-block; font: 900 clamp(1.8rem, 7vw, 4rem)/1.05 'Cinzel', serif; color: #1b1f0e; background: #e8d36b; padding: 18px 26px; border-radius: 6px;
  position: relative; box-shadow: 8px 8px 0 #000; border: 4px solid #1b1f0e; animation: gpYell .5s cubic-bezier(.3, 1.8, .5, 1) both, gpShake .14s .5s infinite; }
.sg-man { font-size: clamp(100px, 24vw, 170px); margin-top: 22px; position: relative; display: inline-block; animation: gpBob .45s ease-in-out infinite; }
.sg-salute { position: absolute; left: 50%; top: 58%; font-size: .55em; transform: translateX(-50%); }
.sg-sub { color: #f2ecc8; max-width: 540px; margin: 14px auto 0; }
.sg-march { margin-top: 22px; white-space: nowrap; font-size: clamp(28px, 7vw, 44px); animation: march 3.4s linear both; }
.sg-march span { display: inline-block; margin: 0 6px; animation: stomp .4s ease-in-out infinite alternate; }
.sg-march span:nth-child(even) { animation-delay: .2s; }
@keyframes march { from { transform: translateX(-60vw) } to { transform: translateX(60vw) } }
@keyframes stomp { from { transform: translateY(0) } to { transform: translateY(-8px) } }
.helping-hand { position: fixed; z-index: 95; font-size: 44px; transform: translate(-50%, 0); pointer-events: none; filter: drop-shadow(2px 4px 4px #000a);
  transition: transform .15s; animation: fadeIn .25s; }
.helping-hand.grab { transform: translate(-50%, -6px) scale(.9); }
.helping-hand.travel { transition: left .85s ease-in-out, top .85s ease-in-out, transform .15s; }
.helping-hand.click { transform: translate(-50%, -4px) scale(.8); }
.btn.pressed { transform: scale(.94); filter: brightness(1.25); }

/* "mostly" = 80%, right? right?? */
.overlay.mostly .pct-meter { position: relative; height: 26px; border-radius: 99px; background: #0006; overflow: hidden; margin: 0 auto 14px; max-width: 320px; }
.pct-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ff3b4e, #ffd27a, #5fdc8a); animation: fillTo80 1.1s .2s ease-out forwards; }
.pct-meter span { position: relative; font-weight: 800; line-height: 26px; }
@keyframes fillTo80 { to { width: 80% } }
.right-right { font: 900 clamp(1.6rem, 6vw, 2.6rem) 'Cinzel', serif; color: #ffd27a; margin: 6px 0 4px; animation: gpYell .4s cubic-bezier(.3, 1.8, .5, 1) both, gpShake .15s .4s 6; }

/* contact */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
@media (max-width: 600px) { .contacts { grid-template-columns: 1fr 1fr; } .contact.pigeon { grid-column: span 2; } }
.contact { --c: var(--gold); appearance: none; cursor: pointer; font: inherit; color: var(--text); padding: 20px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: #ffffff05; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.contact:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--c); }
.contact.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: 0 0 0 2px var(--c) inset, 0 10px 40px color-mix(in srgb, var(--c) 35%, transparent); }
.contact.on .clogo { animation: logoSpin .7s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes logoSpin { from { transform: rotate(-200deg) scale(.4) } to { transform: none } }
.clogo { width: 52px; height: 52px; display: grid; place-items: center; font-size: 40px; color: var(--c); }
.clogo svg { width: 100%; height: 100%; }
.clogo.small { width: 26px; height: 26px; font-size: 20px; flex: none; }
.contact.pigeon b { font-size: .9rem; min-height: 2.5em; }
.contact.pigeon.gone .clogo { visibility: hidden; }
.contact.pigeon:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.flyaway { position: fixed; z-index: 70; font-size: 40px; pointer-events: none; animation: flyaway 1.8s ease-in forwards; }
@keyframes flyaway { 0% { transform: translate(-50%, 0) } 30% { transform: translate(-10%, -60px) scaleX(-1) } 100% { transform: translate(60vw, -110vh) rotate(25deg) scaleX(-1) } }
.cin { --c: var(--gold); margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 8%, transparent); }
.cin .quip { font-weight: 600; margin-bottom: 10px; }
.cfield { display: flex; align-items: center; gap: 10px; }
.cfield input { flex: 1; }
.cfield .clogo { color: var(--c); }
#cmark { width: 1.6em; font-size: 1.2rem; }

/* history */
.effort { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.eface { font-size: 1.8rem; display: inline-block; width: 1.4em; text-align: center; }
.emeter { flex: 0 0 140px; height: 10px; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.emeter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8f6bff, var(--gold)); transition: width .3s; }

/* sources */
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.src { appearance: none; cursor: pointer; font: inherit; font-size: .9rem; color: var(--text); padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line); background: #ffffff06; transition: transform .15s, border-color .2s; }
.src:hover { transform: translateY(-2px); border-color: #e8c26a88; }
.src.on { border-color: var(--gold); background: #e8c26a22; color: var(--gold); font-weight: 700; }
.quipline { margin: 14px 0 0; font-weight: 600; color: var(--gold); }

/* review */
.review { margin: 10px 0 0; }
.rv { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ffffff10; align-items: start; }
.rv dt { color: var(--muted); font-weight: 600; } .rv dd { margin: 0; overflow-wrap: anywhere; }
.rv .clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.rv-edit { all: unset; cursor: pointer; opacity: .55; padding: 0 4px; } .rv-edit:hover { opacity: 1; }
@media (max-width: 560px) { .rv { grid-template-columns: 1fr auto; } .rv dt { grid-column: 1; } .rv dd { grid-column: 1 / -1; grid-row: 2; } }

/* wax seal */
.seal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: #05040a99; animation: fadeIn .2s; }
.seal-wax { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font: 900 4.5rem/1 'Cinzel', serif; color: #ffd9d9;
  background: radial-gradient(circle at 35% 30%, #e0475a, #8c1020 70%); box-shadow: 0 0 0 10px #8c102088, 0 20px 60px #000;
  animation: sealStamp .6s cubic-bezier(.3, 1.6, .5, 1) both; text-shadow: 0 -2px 0 #5a0010, 0 2px 0 #ff8a95; }
@keyframes sealStamp { from { transform: scale(3) rotate(-30deg); opacity: 0 } 70% { transform: scale(.92) rotate(4deg); opacity: 1 } to { transform: scale(1) rotate(0) } }

/* done */
.gryphon { font-size: 90px; display: inline-block; position: relative; animation: gryph 2.4s ease-in-out infinite; }
.gryphon .scroll { position: absolute; font-size: 36px; right: -10px; bottom: 0; }
@keyframes gryph { 0%, 100% { transform: translate(-30px, 0) rotate(-6deg) } 50% { transform: translate(30px, -16px) rotate(6deg) } }

@media (prefers-reduced-motion: reduce) {
  .card.trembling, .sg-bubble, .sg-man, .sg-march, .sg-march span, .right-right, .gp-bubble, .gp-face, .gp-cane,.flyaway, .orb, .melt, .gryphon, .bp-traveler, .bp-guard, .bp-gate, .clock { animation: none !important; }
}
.loading-chip { opacity: .7; animation: loadPulse 1.2s ease-in-out infinite; }
@keyframes loadPulse { 50% { opacity: .35 } }
.age-card.large-print h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.age-card h2 { transition: font-size .6s cubic-bezier(.2, .9, .3, 1.3); }