/* Tailwind CSS utility classes */
*, ::before, ::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.min-h-screen {
  min-height: 100vh;
}

.min-h-64 {
  min-height: 16rem;
}

.w-full {
  width: 100%;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.min-w-64 {
  min-width: 16rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.self-start {
  align-self: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .sm\:p-8 {
    padding: 2rem;
  }
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-b {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.rounded {
  border-radius: 0.25rem;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.uppercase {
  text-transform: uppercase;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.list-decimal {
  list-style-type: decimal;
}

.list-inside {
  list-style-position: inside;
}

.overflow-x-auto {
  overflow-x: auto;
}

.select-all {
  user-select: all;
}

.opacity-70 {
  opacity: 0.7;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.shrink-0 {
  flex-shrink: 0;
}

/* daisyUI 5 semantic color with opacity utilities */
.bg-primary\/10 {
  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.bg-base-100\/50 {
  background-color: color-mix(in oklab, var(--color-base-100) 50%, transparent);
}

.bg-base-200\/60 {
  background-color: color-mix(in oklab, var(--color-base-200) 60%, transparent);
}

.text-base-content\/50 {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.text-base-content\/60 {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.text-base-content\/70 {
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.text-base-content\/80 {
  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-base-100: oklch(25.33% .016 252.42);
    --color-base-200: oklch(23.26% .014 253.1);
    --color-base-300: oklch(21.15% .012 254.09);
    --color-base-content: oklch(97.807% .029 256.847);
    --color-primary: oklch(58% .233 277.117);
    --color-primary-content: oklch(96% .018 272.314);
    --color-secondary: oklch(65% .241 354.308);
    --color-secondary-content: oklch(94% .028 342.258);
    --color-accent: oklch(77% .152 181.912);
    --color-accent-content: oklch(38% .063 188.416);
    --color-neutral: oklch(14% .005 285.823);
    --color-neutral-content: oklch(92% .004 286.32);
    --color-info: oklch(74% .16 232.661);
    --color-info-content: oklch(29% .066 243.157);
    --color-success: oklch(76% .177 163.223);
    --color-success-content: oklch(37% .077 168.94);
    --color-warning: oklch(82% .189 84.429);
    --color-warning-content: oklch(41% .112 45.904);
    --color-error: oklch(71% .194 13.428);
    --color-error-content: oklch(27% .105 12.094);
  }
}

.cursor-pointer {
  cursor: pointer;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* HTMX indicator utility classes */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-flex;
}

.htmx-request.htmx-indicator {
  display: inline-flex;
}

.htmx-request .htmx-hide-on-request {
  display: none !important;
}

/* The Guildhall: parchment, dark timber and old gold. */
:root,
[data-theme="light"] {
  color-scheme: dark;
  --color-base-100: #171b16;
  --color-base-200: #22271f;
  --color-base-300: #34392d;
  --color-base-content: #eee3c8;
  --color-primary: #9c7133;
  --color-primary-content: #fff3d4;
  --color-secondary: #5a7049;
  --color-secondary-content: #f2efd9;
  --color-accent: #c5a15a;
  --color-accent-content: #211b10;
  --color-neutral: #2b3027;
  --color-neutral-content: #eee3c8;
  --radius-box: 0.7rem;
  --radius-field: 0.35rem;
}

body {
  min-height: 100vh;
  color: #e9dfc7;
  background:
    radial-gradient(ellipse at 50% -15%, rgb(111 95 54 / 18%), transparent 55%),
    radial-gradient(ellipse at 12% 45%, rgb(38 63 43 / 22%), transparent 45%),
    #171b16;
  font-family: Georgia, "Times New Roman", serif;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #e2c37e; }
.page-shell { width: min(100% - 2rem, 76rem); padding: 2.25rem 0 4rem; }

.site-nav {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  padding: 0 1rem;
  border-bottom: 1px solid #6b5835;
  background: linear-gradient(180deg, #292c22, #1d211b);
  box-shadow: 0 5px 20px rgb(0 0 0 / 26%);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: min(100%, 76rem);
  min-height: 76px;
  margin: 0 auto;
}
.brand-mark { display: inline-flex; align-items: center; gap: .7rem; color: #e7d6ad; font-size: 1rem; font-weight: 700; letter-spacing: .2em; }
.brand-mark:hover { color: #f2d48f; }
.brand-mark small { display: block; margin-top: .15rem; color: #aa986f; font-size: .57rem; letter-spacing: .24em; }
.brand-sigil { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid #aa8545; border-radius: 50%; color: #d5b66d; font-size: 1.55rem; box-shadow: inset 0 0 0 3px #292c22, inset 0 0 0 4px #77613a; }
.nav-links, .nav-account { display: flex; align-items: center; gap: 1.5rem; }
.nav-links { flex: 1; }
.nav-links a, .logout-link { color: #d5c9ac; font-size: .91rem; }
.nav-links a:hover, .logout-link:hover { color: #f0cb76; }
.nav-account { gap: .8rem; }
.nav-account form { margin: 0; }
.account-name { color: #cfbd90; font-size: .85rem; }
.logout-link { padding: .4rem; border: 0; background: transparent; cursor: pointer; font-family: inherit; }

.btn { min-height: 2.55rem; height: auto; padding: .65rem 1rem; border-radius: .35rem; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .02em; box-shadow: none; }
.btn-primary { border: 1px solid #c39a51; color: #fff4dc; background: linear-gradient(#9d783f, #765529); }
.btn-primary:hover { border-color: #e3c578; color: #fff9ea; background: linear-gradient(#b38b4a, #8d6834); }
.btn-outline { border: 1px solid #817048; color: #e0d2ad; background: rgb(255 255 255 / 3%); }
.btn-outline:hover { border-color: #d5b66d; color: #f0d58f; background: rgb(213 182 109 / 9%); }
.input, .textarea, .select { border: 1px solid #61543a; color: #eee3c8; background: #171b16; }
.input:focus, .textarea:focus, .select:focus { outline: 1px solid #b28b4c; }
.label-text, legend { color: #d8c9a6; }
.checkbox { border-color: #9e8757; }
.card { border: 1px solid #4a4938; border-radius: .55rem; background: #22271f; box-shadow: 0 8px 18px rgb(0 0 0 / 17%); }
.card-body { gap: .8rem; }
.link { color: #d5b66d; text-decoration: none; }
.link:hover { color: #f1d997; text-decoration: underline; }
.badge { border-color: #817048; color: #e4d7b8; }
.badge-success { border-color: #658151; color: #c9dcaa; background: #31432d; }

.quest-hero {
  position: relative;
  display: flex;
  min-height: 285px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 1.2rem;
  padding: clamp(2rem, 5vw, 3.6rem);
  border: 1px solid #7c673d;
  border-radius: .65rem;
  background:
    radial-gradient(ellipse at 78% 50%, rgb(180 144 72 / 15%), transparent 42%),
    linear-gradient(120deg, #293b2b 0%, #202c22 60%, #30291c 100%);
  box-shadow: inset 0 0 0 5px rgb(215 189 126 / 5%), 0 14px 35px rgb(0 0 0 / 24%);
}
.quest-hero::after { position: absolute; inset: 12px; border: 1px solid rgb(207 178 111 / 20%); border-radius: .35rem; content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 42rem; }
.eyebrow { margin: 0 0 .45rem; color: #c6a35e; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-copy h1 { margin: .2rem 0 .75rem; color: #f0e2c2; font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.05; }
.hero-subtitle { max-width: 36rem; margin: 0; color: #c9c2a9; font-size: 1.05rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; }
.hero-sigil { position: absolute; right: 8%; color: rgb(208 177 108 / 15%); font-size: clamp(9rem, 22vw, 17rem); line-height: 1; text-shadow: 0 0 45px rgb(205 165 84 / 15%); }

.adventurer-panel {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 1.25rem 0 2.6rem;
  padding: 1.35rem 1.6rem;
  border: 1px solid #b7a16f;
  border-radius: .55rem;
  color: #342a1b;
  background: linear-gradient(125deg, #e8d9b5, #d5c396);
  box-shadow: 0 10px 22px rgb(0 0 0 / 17%), inset 0 0 0 4px rgb(255 255 255 / 14%);
}
.avatar-seal { display: grid; width: 4.1rem; height: 4.1rem; flex: 0 0 auto; place-items: center; border: 2px solid #a2844e; border-radius: 50%; color: #65502e; background: #f0e4c8; box-shadow: inset 0 0 0 4px #e2d3ae; font-size: 1.65rem; }
.adventurer-info { min-width: 10rem; flex: 1; }
.adventurer-info .eyebrow { color: #836432; }
.adventurer-info h2 { margin: 0; color: #302619; font-size: 1.65rem; }
.rank-label { margin: .2rem 0 0; color: #685a3f; font-size: .9rem; }
.xp-panel { width: min(30%, 18rem); min-width: 10rem; }
.xp-label-row { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; color: #55452c; font-size: .78rem; font-weight: 700; }
.xp-track { height: .68rem; overflow: hidden; border: 1px solid #a38a59; border-radius: 2rem; background: #b7a477; }
.xp-fill { height: 100%; min-width: 0; border-right: 1px solid #f4dd9c; background: linear-gradient(90deg, #687b45, #ac873d); box-shadow: 0 0 12px rgb(109 127 65 / 45%); }
.xp-hint { margin: .42rem 0 0; color: #756342; font-size: .72rem; }
.stat-coin { display: flex; align-items: center; gap: .65rem; min-width: 6rem; color: #594627; }
.stat-coin strong { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid #9d8046; border-radius: 50%; color: #fff2d1; background: #846735; font-size: 1.25rem; }
.stat-coin span { white-space: pre-line; font-size: .72rem; line-height: 1.2; }
.guest-panel { justify-content: space-between; }
.board-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 0 1rem; }
.board-heading h2 { margin: 0; color: #eddfc0; font-size: 1.8rem; }
.specialty-form { margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid #484735; border-radius: .5rem; background: #20241d; }
.specialty-heading { display: flex; align-items: center; gap: 1rem; }
.specialty-heading h3 { margin: 0; color: #e8d7ad; font-size: 1rem; }
.specialty-heading p { flex: 1; margin: 0; }
.specialty-form .label { padding: .35rem 0; }
.calling-column { min-height: 17rem; border-color: #a28a58; color: #392f20; background: linear-gradient(145deg, #e6d8b8, #d8c9a6); box-shadow: 0 9px 19px rgb(0 0 0 / 18%), inset 0 0 0 4px rgb(255 255 255 / 18%); }
.calling-column .card-title { padding-bottom: .65rem; border-bottom: 1px solid #baa77d; color: #3d3020; font-size: 1.18rem; }
.calling-column p { color: #756547; }
.calling-column .quest-card { border-color: #c0ad82; background: #f0e5cd; box-shadow: 0 3px 8px rgb(63 47 24 / 11%); }
.calling-column .quest-card .card-title { padding: 0; border: 0; color: #34291c; }
.calling-column .quest-card p { color: #63583f; }
.calling-column .quest-card .link { color: #79602c; }
.calling-column .rune-tag { border-color: #a69163; color: #72592b; background: #e7d9b8; }
.calling-column .xp-chip { color: #52613a; }
.calling-column .quest-card .btn-primary { color: #fff3d4; }
.quest-card { border-radius: .4rem; }
.quest-complete { opacity: .77; }
.xp-chip { flex: 0 0 auto; color: #d4b66f; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.rune-tag { color: #ddcb9d; }
.stage-control { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; padding-top: .5rem; border-top: 1px dashed #96825a; }
.stage-control .stage-label { color: #a28b5c; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stage-control .select { min-height: 2rem; height: 2rem; min-width: 8rem; padding: 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: .78rem; }
.stage-control .btn { min-height: 2rem; padding: .35rem .65rem; font-size: .72rem; }
.calling-column .stage-control { border-color: #b8a579; }
.calling-column .stage-control .stage-label { color: #766342; }
.calling-column .stage-control .select { color: #392f20; background: #f4ebd8; }

.table { color: #e8dec5; }
.table thead { color: #d5b66d; }
.table tr { border-color: #454737; }
.alert { border: 1px solid #78633d; color: #efe1be; background: #282b21; }
.alert-error { border-color: #925e47; }

@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; gap: .7rem 1rem; padding: .8rem 0; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 1.4rem; padding-top: .65rem; border-top: 1px solid #464433; }
  .nav-account { margin-left: auto; }
  .nav-account .btn { padding: .5rem .65rem; font-size: .76rem; }
  .page-shell { width: min(100% - 1.25rem, 76rem); padding-top: 1.25rem; }
  .quest-hero { min-height: 250px; padding: 2rem 1.5rem; }
  .hero-sigil { right: -1rem; opacity: .65; }
  .adventurer-panel { flex-wrap: wrap; gap: .8rem; padding: 1rem; }
  .adventurer-info { min-width: calc(100% - 5.5rem); }
  .xp-panel { width: calc(100% - 7rem); margin-left: 4.9rem; }
  .stat-coin { margin-left: auto; }
}
@media (max-width: 460px) {
  .brand-mark { font-size: .9rem; }
  .brand-sigil { width: 2.35rem; height: 2.35rem; }
  .nav-links { justify-content: space-around; gap: .5rem; font-size: .83rem; }
  .hero-copy h1 { font-size: 2.3rem; }
  .hero-sigil { right: -2.5rem; font-size: 9rem; }
  .specialty-heading { flex-wrap: wrap; }
  .specialty-heading p { min-width: 100%; order: 2; }
  .specialty-heading button { margin-left: auto; }
  .guest-panel .btn { width: 100%; }
}