/* Project-specific overlay on top of lupta.css (the design system). */

/* ============================================================
   Native-feel touch behavior
   ------------------------------------------------------------
   Mobile browsers add a 300ms tap delay + an ugly blue highlight
   on touch. Kill both globally. `touch-action: manipulation`
   stops the browser from waiting for a double-tap to dispatch
   click events on every tappable thing.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button, a, .avatar-cell, .tab, .cta, .login-btn, .reg-btn, .logout-btn,
[role="button"], [data-tappable] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
/* Press-down feedback shared by all tappable surfaces */
button:active, a:active, .cta:active, .login-btn:active, .reg-btn:active,
.logout-btn:active, .avatar-cell:active, .tab:active, [data-tappable]:active {
  transform: scale(0.96);
  filter: brightness(1.06);
  transition: transform .06s ease-out, filter .06s ease-out;
}

/* On desktop, render the phone as a centered card with subtle device frame */
@media (min-width: 800px) {
  body {
    background:
      radial-gradient(900px 600px at 50% 0%, rgba(48,56,72,.25), transparent 60%),
      #06080b;
    padding: 24px 0;
  }
  .phone {
    border-radius: 28px;
    border: 1px solid #1a1f27;
    box-shadow:
      0 30px 80px rgba(0,0,0,.65),
      0 0 0 6px #14181f,
      0 0 0 7px #2a323d;
    min-height: calc(100vh - 48px);
    max-height: 920px;
    overflow: hidden auto;
  }
}

/* Tiny global helpers used by the JS shell + auth pages */
.fade-in { animation: fadein .18s ease-out both }
@keyframes fadein {
  from { opacity: 0; transform: translateY(4px) }
  to   { opacity: 1; transform: translateY(0) }
}

.alert {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid var(--line-2);
}
.alert.err {
  background: rgba(210, 58, 58, .12);
  color: #ff8e8e;
  border-color: rgba(210, 58, 58, .35);
}
.alert.ok {
  background: rgba(58, 165, 92, .12);
  color: #7bd49a;
  border-color: rgba(58, 165, 92, .35);
}

/* Spinner used while a partial loads */
.spinner-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 80px 16px; color: var(--text-mute);
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #1f242b;
  border-top-color: #4aa8d8;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Disabled buttons */
.cta[disabled], .login-btn[disabled], .reg-btn[disabled] {
  opacity: .55; cursor: not-allowed;
  filter: grayscale(.35);
}

/* ============================================================
   Bottom tab bar (sticky, mobile-style)
   ------------------------------------------------------------
   Lives in shell.html, toggled visible by app.js for in-app
   routes (/profil, /cimp, …), hidden on auth pages.
   ============================================================ */
.tabbar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(15, 17, 21, .82), rgba(10, 12, 15, .96));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.tabbar[hidden] { display: none }
.tabbar .tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 10px;
  color: var(--text-mute, #6b7280);
  text-decoration: none; font-size: 10px; font-weight: 600;
  letter-spacing: .04em; position: relative;
}
.tabbar .tab .ic { width: 22px; height: 22px; display: grid; place-items: center }
.tabbar .tab.active {
  color: #fff;
}
.tabbar .tab.active::before {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 26px; height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, var(--silver-1, #c9ced6), #fff);
  box-shadow: 0 0 8px rgba(255, 255, 255, .35);
}
/* Cimp de lupta tab gets a red active tint (it's the combat hub) */
.tabbar .tab[data-route="/cimp/"].active { color: #ff8e8e }
.tabbar .tab[data-route="/cimp/"].active::before {
  background: linear-gradient(90deg, #d23a3a, #ff8e8e);
  box-shadow: 0 0 8px rgba(210, 58, 58, .55);
}
/* Push the phone container above the tabbar */
.phone { padding-bottom: 90px }
body.is-auth .phone { padding-bottom: 24px }  /* auth pages have no tabbar */

/* Inline field errors (auth forms + future modules).
   Use on a `.input-row` that wraps a single input + a `.field-error` slot. */
.input-row.has-error input {
  border-color: #d23a3a !important;
  background: #1a0e10 !important;
  box-shadow: 0 0 0 3px rgba(210, 58, 58, .18) !important;
}
.field-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #ff8e8e;
  letter-spacing: .01em;
  animation: shake .25s ease-in-out;
}
.input-row.has-error .field-error { display: block }
@keyframes shake {
  0%,100% { transform: translateX(0) }
  25% { transform: translateX(-3px) }
  75% { transform: translateX(3px) }
}

/* Re-submit with the same unfixed error — nudge the whole row sideways
   instead of removing+re-adding the message (which would jump layout). */
.input-row.shake-again {
  animation: shakeRow .32s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shakeRow {
  10%, 90%  { transform: translateX(-1px); }
  20%, 80%  { transform: translateX( 2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%      { transform: translateX( 4px); }
}