/* Undermere and the Burrowdeep Line (public/js/undermere.ts) */

/* the ride: a little picture of the way, in a brass frame, tap to skip */
.um-ride { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(14, 10, 12, .62); animation: um-in .35s; transition: opacity .6s; cursor: pointer; }
.um-ride.out { opacity: 0; }
.um-ride-frame { padding: 6px; border-radius: 12px; background: #3a2e26; border: 3px solid #c8962a; box-shadow: 0 6px 0 rgba(0, 0, 0, .4), 0 0 44px rgba(255, 200, 120, .35); }
.um-ride-cv { display: block; width: min(88vw, 576px); height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; border-radius: 6px; }
.um-ride-to { color: #fff2d0; font-size: 21px; font-weight: 700; text-shadow: 0 2px 0 #000; text-align: center; padding: 0 12px; }
@keyframes um-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .um-ride-to { font-size: 16px; } }
.um-offer { background: linear-gradient(#3a2e26, #5a4434); border-color: #c8962a; }

/* singing: hear the notes, hum them back on the four runes */
.um-echo .um-say { margin: 6px 0 2px; }
.um-dots { display: flex; gap: 6px; justify-content: center; margin: 6px 0; font-size: 14px; color: rgba(90, 70, 50, .35); }
.um-dots .on { color: #c8962a; text-shadow: 0 0 6px rgba(255, 200, 100, .8); }
.um-runes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.um-rune { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; min-height: 76px; background: linear-gradient(#4a423c, #2e2722); border: 2px solid #6a6058; color: #f0e0c0; border-radius: 12px; font-size: 12px; transition: transform .08s, box-shadow .2s, border-color .2s; }
.um-rune:active { transform: scale(.96); }
.um-rune.on { border-color: #fff2a0; box-shadow: 0 0 18px rgba(255, 230, 150, .9), inset 0 0 12px rgba(255, 230, 150, .5); }
.um-rune-cv { width: 40px; height: 40px; image-rendering: pixelated; }
@media (max-width: 520px) { .um-runes { gap: 6px; } .um-rune { min-height: 70px; font-size: 11px; } .um-rune-cv { width: 34px; height: 34px; } }

/* needs, the bench's dial, the Visitors' Stone */
.um-needs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 12px; }
.um-needs > span { display: inline-flex; align-items: center; gap: 2px; }
.um-needs .ico { width: 16px; height: 16px; }
.um-tune { text-align: center; }
.um-dial { width: min(80vw, 360px); height: auto; aspect-ratio: 96 / 40; image-rendering: pixelated; border-radius: 8px; border: 2px solid #8a6038; margin: 6px auto; display: block; }
.um-tune .btns { justify-content: center; }
.um-stone { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: linear-gradient(#7a7068, #5a5048); color: #2a2220; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 1.6; max-height: 40vh; overflow-y: auto; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.um-stone .old { font-style: italic; color: #3a3230; }
.um-hall .row, .um-gems .row, .um-ride-list .row { align-items: center; }
.um-top h4, .um-ride-list h4, .um-gems h4, .um-pot h4, .um-bench h4, .um-pudding h4 { margin: 8px 0 4px; }
.um-card { margin-top: 8px; }