/* Share links, postcards and the Elvish name card (js/share.js, js/view-elvish.js) */

@font-face {
  font-family: 'Alcarin Tengwar'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/AlcarinTengwar-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Alcarin Tengwar'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/AlcarinTengwar-Bold.woff2') format('woff2');
}

/* ------------------------------------------------------------- the dock */

.share-dock { position: fixed; left: 24px; bottom: 24px; z-index: 30; display: flex; gap: 8px; animation: sd-in .6s var(--ease) both; }
body[data-view='journey'] .share-dock { bottom: 64px; }
body:not([data-view='map']):not([data-view='place']):not([data-view='journey']) .share-dock { display: none; }
.share-dock .chip { height: 38px; font-size: 14.5px; }
.share-dock .chip:hover { color: var(--gold-hi); box-shadow: 0 0 0 1px var(--hair-gold); }
.share-dock .chip:disabled { opacity: .5; cursor: progress; }
@keyframes sd-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 820px) {
  .share-dock { left: auto; right: 12px; bottom: auto; top: calc(var(--top) + 6px); }
  body[data-view='journey'] .share-dock { bottom: auto; }
  .share-dock .chip span { display: none; }
  .share-dock .chip { width: 38px; padding: 0; justify-content: center; }
}

/* ------------------------------------------------------------- toast */

.rb-toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 90; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 22px; font: italic 400 16px/1.3 var(--display); color: var(--text);
  background: var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: toast-in .4s var(--ease) both; transition: opacity .4s, transform .4s;
}
.rb-toast.out { opacity: 0; transform: translate(-50%, 8px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ------------------------------------------------------------- postcard modal */

.pc-modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(6, 4, 2, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: pc-fade .3s ease both;
}
.pc-modal.out { opacity: 0; transition: opacity .25s; }
.pc-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: min(1100px, 100%); }
.pc-inner .kicker { margin: 0; }
.pc-frame { width: 100%; perspective: 1400px; }
.pc-frame img {
  display: block; width: 100%; max-height: 72vh; object-fit: contain; border-radius: 3px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 240, 210, .08);
  animation: pc-drop .9s var(--ease) both; transform-origin: 50% 0;
}
.pc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@keyframes pc-fade { from { opacity: 0; } }
@keyframes pc-drop { from { opacity: 0; transform: translateY(-30px) rotateX(18deg) rotate(-2.5deg) scale(.94); } 60% { transform: translateY(4px) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .pc-frame img, .pc-modal, .share-dock { animation: none; } }

/* ------------------------------------------------------------- the Elvish page */

.elvish-page .page-head { margin-bottom: 34px; }
.el-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 44px; align-items: start; }
.el-controls { display: flex; flex-direction: column; gap: 22px; }
.el-label { display: block; font: 500 10.5px/1.4 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.el-input {
  display: block; width: 100%; margin-top: 10px; padding: 14px 18px; border: 0; border-radius: 4px;
  font: 500 32px/1.1 var(--display); color: #f6e8c6; background: rgba(20, 16, 12, .7);
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 10px 30px -18px #000; transition: box-shadow .25s;
}
.el-input::placeholder { color: var(--text-3); font-style: italic; }
.el-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold), 0 0 34px -8px rgba(201, 163, 91, .45); }
.el-live {
  min-height: 64px; margin-top: -8px; font: 700 46px/1.4 'Alcarin Tengwar'; color: var(--gold-hi);
  text-shadow: 0 0 18px rgba(236, 160, 60, .45); overflow-wrap: anywhere; letter-spacing: .02em;
}
.el-row { display: flex; flex-direction: column; gap: 10px; }
.el-seg { display: inline-flex; padding: 3px; border-radius: 20px; background: rgba(20, 16, 12, .6); box-shadow: 0 0 0 1px var(--hair-2); align-self: flex-start; }
.el-seg button { border: 0; background: none; padding: 8px 16px; border-radius: 17px; cursor: pointer; font: 400 15px/1 var(--body); color: var(--text-3); transition: color .2s, background .2s; }
.el-seg button.on { color: #1a1208; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.el-seg button:not(.on):hover { color: var(--text); }
.el-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.el-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.el-try .el-label { width: 100%; }
.el-try .chip { height: 32px; font-size: 14.5px; }
.el-figure { margin: 0; }
.el-card { position: relative; aspect-ratio: 16 / 10; border-radius: 3px; background: #2a2016; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 240, 210, .06); overflow: hidden; }
.el-card canvas { display: block; width: 100%; height: 100%; animation: el-in .6s var(--ease) both; }
@keyframes el-in { from { opacity: .4; filter: blur(3px); } }
.el-figure figcaption { margin-top: 14px; min-height: 1.5em; font: italic 400 15px/1.5 var(--body); color: var(--text-3); }
.el-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.el-how-card { padding: 24px 24px 20px; border-radius: 4px; background: rgba(20, 16, 12, .55); box-shadow: 0 0 0 1px var(--hair); }
.el-how-card h3 { margin: 0 0 8px; font: 500 24px/1.2 var(--display); color: #f3e3bd; }
.el-how-card p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.el-how-glyphs { margin: 0 0 14px !important; font: 700 40px/1.3 'Alcarin Tengwar' !important; color: var(--gold-hi) !important; letter-spacing: .1em; }
.el-note { max-width: 760px; margin: 34px 0 0; font: italic 400 14.5px/1.6 var(--body); color: var(--text-3); }
@media (max-width: 900px) {
  .el-grid { grid-template-columns: 1fr; gap: 28px; }
  .el-figure { order: -1; }
  .el-how-grid { grid-template-columns: 1fr; }
}

/* lore entries: "Frodo Baggins in Elvish letters" */
.infobox .el-lore { display: inline-block; margin-top: 16px; }
.el-grid > *, .el-card { min-width: 0; }

/* phones: with more sections in the nav than fit, let it scroll sideways instead of widening the page */
@media (max-width: 820px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav { justify-content: flex-start; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 18px), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
}