/* ============================================================
   夜航书 · UI — controls, dialogs, floating furniture
   ============================================================ */

/* ── Buttons ─────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  transition: transform .2s var(--ease-soft), box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.985); }

.btn--ink{
  background: linear-gradient(135deg, var(--ink) 0%, #4a3560 100%);
  color: var(--vellum);
  box-shadow: 0 4px 14px -4px rgba(43,32,57,.6);
}
.btn--ink:hover{ box-shadow: 0 8px 20px -5px rgba(43,32,57,.7); transform: translateY(-2px); }

.btn--sakura{
  background: linear-gradient(135deg, var(--sakura-ink) 0%, #9d2e78 100%);
  color: #fff6fa;
  box-shadow: 0 4px 14px -4px rgba(201,58,114,.55);
}
.btn--sakura:hover{ box-shadow: 0 8px 22px -5px rgba(201,58,114,.65); transform: translateY(-2px); }

.btn--quiet{
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--edge);
}
.btn--quiet:hover{ background: var(--vellum-2); color: var(--ink); border-color: var(--ink-faint); }

.btn--ghost{ background: transparent; color: var(--ink-soft); padding: 6px 10px; }
.btn--ghost:hover{ color: var(--sakura-ink); }

.btn[disabled]{ opacity: .42; pointer-events: none; }
.btn--sm{ padding: 6px 13px; font-size: var(--t-micro); }

/* ── Fields ──────────────────────────────── */
.field{
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.62);
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field::placeholder{ color: var(--ink-faint); }
.field:focus{
  outline: none;
  border-color: var(--sakura-ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,58,114,.14);
}
textarea.field{ resize: vertical; min-height: 108px; line-height: 1.7; font-family: var(--f-serif); }

.field-label{
  display: block;
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

/* ── Chips / tags ────────────────────────── */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--cc, #7c5aa8) 14%, transparent);
  color: color-mix(in srgb, var(--cc, #7c5aa8) 78%, #1a1024);
  border: 1px solid color-mix(in srgb, var(--cc, #7c5aa8) 26%, transparent);
}

/* ── Dialogs ─────────────────────────────── */
.veil{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(9,6,20,.74);
  backdrop-filter: blur(9px);
}
.veil.is-open{ display: grid; animation: veilIn .3s ease both; }
@keyframes veilIn{ from{ opacity: 0; } to{ opacity: 1; } }

.sheet{
  position: relative;
  width: min(540px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(160deg, var(--vellum) 0%, var(--vellum-2) 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.55);
  animation: sheetIn .42s var(--ease-soft) both;
}
@keyframes sheetIn{
  from{ opacity: 0; transform: translateY(24px) scale(.96); }
  to  { opacity: 1; transform: none; }
}
.sheet__title{
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.sheet__sub{ font-size: var(--t-small); color: var(--ink-soft); line-height: 1.7; }
.sheet__close{
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-faint);
  font-size: 1.1rem;
  transition: background .2s, color .2s;
}
.sheet__close:hover{ background: var(--vellum-3); color: var(--ink); }
.sheet__actions{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* Mystery sheet variant — dark, for the unlocked realm */
.sheet--arcane{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(140,224,255,.16), transparent 60%),
    linear-gradient(160deg, #1a1338 0%, #0d0a1f 100%);
  box-shadow: 0 40px 100px rgba(0,0,0,.75), inset 0 0 0 1px rgba(140,224,255,.22), 0 0 70px -20px rgba(140,224,255,.4);
  color: var(--vellum);
}
.sheet--arcane .sheet__title{ color: var(--mizu); }
.sheet--arcane .sheet__sub{ color: rgba(246,239,227,.72); }
.sheet--arcane .sheet__close{ color: rgba(246,239,227,.5); }
.sheet--arcane .sheet__close:hover{ background: rgba(255,255,255,.1); color: #fff; }

/* ── Toast ───────────────────────────────── */
.toasts{
  position: fixed;
  left: 50%; top: 22px;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--vellum);
  background: linear-gradient(135deg, rgba(36,26,74,.96), rgba(13,10,31,.96));
  border: 1px solid rgba(255,214,175,.28);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  animation: toastIn .4s var(--ease-soft) both;
}
.toast.is-out{ animation: toastOut .35s ease forwards; }
.toast--win{ border-color: rgba(126,240,196,.42); box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 30px -10px rgba(126,240,196,.6); }
.toast--miss{ border-color: rgba(255,183,213,.42); }
@keyframes toastIn { from{ opacity: 0; transform: translateY(-14px) scale(.94); } to{ opacity: 1; transform: none; } }
@keyframes toastOut{ to{ opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ── The quill: corner feedback button ───── */
.quill{
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 300;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 30%, #fff2dd 0%, #ffd9a0 40%, #d99a3e 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 34px -6px rgba(255,217,160,.6);
  transition: transform .28s var(--ease-soft), box-shadow .28s;
}
.quill:hover{ transform: translateY(-4px) rotate(-8deg) scale(1.07); box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 50px -6px rgba(255,217,160,.85); }
.quill svg{ width: 27px; height: 27px; color: #4a2f10; }
.quill::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255,217,160,.4);
  animation: quillHalo 2.8s ease-in-out infinite;
}
@keyframes quillHalo{
  0%,100%{ opacity: .5; transform: scale(1); }
  50%    { opacity: 0;  transform: scale(1.28); }
}
.quill__tip{
  position: absolute;
  right: 68px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 700;
  white-space: nowrap;
  color: var(--vellum);
  background: rgba(13,10,31,.9);
  border: 1px solid rgba(255,214,175,.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-soft);
}
.quill:hover .quill__tip{ opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Gramophone: music furniture ─────────── */
.gramophone{
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px 9px 9px;
  border-radius: 999px;
  background: rgba(13,10,31,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,214,175,.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: border-color .3s, box-shadow .3s;
}
.gramophone.is-playing{
  border-color: rgba(255,183,213,.42);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 34px -12px rgba(255,183,213,.8);
}

.disc{
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #241a4a 0 2px, #1a1236 2px 3.4px);
  border: 1px solid rgba(255,214,175,.26);
  display: grid;
  place-items: center;
  flex: none;
}
.disc::after{
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--sakura), #b8407a);
}
.gramophone.is-playing .disc{ animation: spin 3.6s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.gramophone__meta{ min-width: 0; }
.gramophone__label{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  color: rgba(255,217,160,.6);
}
.gramophone__track{
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--vellum);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.gramophone__ctl{
  display: flex;
  gap: 3px;
  align-items: center;
}
.gramophone__ctl button{
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(246,239,227,.68);
  font-size: .8rem;
  transition: background .2s, color .2s;
}
.gramophone__ctl button:hover{ background: rgba(255,255,255,.11); color: var(--sakura); }

/* live waveform */
.wave{ display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.wave i{
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--sakura), var(--lumen));
  height: 25%;
  transition: height .12s linear;
}

@media (max-width: 900px){
  .gramophone{ bottom: 68px; padding: 6px 11px 6px 6px; gap: 8px; }
  .gramophone__meta{ display: none; }
  .disc{ width: 30px; height: 30px; }
  .quill{ bottom: 68px; width: 50px; height: 50px; }
  .quill svg{ width: 22px; height: 22px; }
  .quill__tip{ display: none; }
}