/* Alle regler er avgrenset til .hbt; ingen CSS-biblioteker eller eksterne fonter. */
.hbt {
  --hbt-ink: #f8f2ec;
  --hbt-muted: #d9d0df;
  --hbt-gold: #e7c888;
  --hbt-gold-dark: #86632d;
  --hbt-border: rgba(231,200,136,.25);
  color: var(--hbt-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1100px;
  margin: 28px auto;
  padding: clamp(25px, 5.5vw, 62px) clamp(16px, 4vw, 42px) 22px;
  border-radius: 23px;
  border: 1px solid #564260;
  background: radial-gradient(ellipse at 50% -15%, #644a76 0%, transparent 54%),
              radial-gradient(ellipse at 85% 83%, rgba(104,68,116,.35), transparent 50%),
              #211b32;
  box-shadow: 0 18px 52px rgba(28,19,39,.16);
  font-family: inherit;
  line-height: 1.65;
}
.hbt *, .hbt *::before, .hbt *::after { box-sizing: border-box; }
.hbt [hidden] { display: none !important; }
.hbt button, .hbt textarea { font: inherit; }
.hbt button { cursor: pointer; }
.hbt button:disabled { cursor: progress; opacity: .75; }
.hbt :is(button,textarea,a):focus-visible { outline: 3px solid #f6d696; outline-offset: 4px; }
.hbt__ambient {
  position: absolute; inset: 18px; z-index: -1;
  border: 1px solid rgba(231,200,136,.15); border-radius: 16px;
  pointer-events: none;
}
.hbt__inner { max-width: 1010px; margin: auto; }
.hbt__eyebrow { text-align:center; margin: 0 0 10px; color: var(--hbt-gold); font-size: 12px; font-weight: 750; letter-spacing: .23em; }
.hbt .hbt__title { color: #fff6e9; text-align: center; font-size: clamp(28px, 4.5vw, 43px); font-weight: 650; line-height: 1.18; margin: 0 0 17px; letter-spacing: -.035em; }
.hbt__intro { color: #e5dce5; font-size: clamp(15px, 1.8vw, 17px); text-align:center; max-width: 660px; margin: 0 auto 27px; line-height:1.7; }
.hbt__controls { max-width: 680px; margin: 0 auto; }
.hbt .hbt__label { display: block; margin-bottom: 8px; color: #f7ebdc; font-size: 14px; font-weight: 650; }
.hbt .hbt__question {
  display: block; width: 100%; min-width: 0; min-height: 75px; padding: 12px 16px;
  border: 1px solid rgba(238,218,197,.34); border-radius: 12px;
  background: rgba(255,255,255,.085); color: #fff; box-shadow: none;
  resize: vertical; font-size: 15px; line-height: 1.5;
}
.hbt .hbt__question::placeholder { color: #cfc3d2; opacity: .88; }
.hbt .hbt__question:focus { border-color: var(--hbt-gold); background: rgba(255,255,255,.11); }
.hbt .hbt__count-box { border: 0; padding: 0; margin: 19px 0 0; min-width:0; }
.hbt .hbt__count-box legend { margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 650; color:#f7ebdc; }
.hbt__choices { display: flex; gap: 10px; }
.hbt .hbt__choice {
  flex: 1; min-width:0; min-height: 65px; padding: 8px 10px;
  border: 1px solid rgba(238,218,197,.28); border-radius:12px;
  background: rgba(255,255,255,.065); box-shadow: none; color: #f7f0f7;
  text-align: center; line-height: 1.4; font-weight: 700; font-size:15px;
  transition: border-color .18s, background .18s, transform .18s;
}
.hbt .hbt__choice span { display:block; font-size: 12px; font-weight: 400; color: #e0d5df; margin-top: 3px; }
.hbt .hbt__choice:hover { border-color: var(--hbt-gold); transform: translateY(-1px); }
.hbt .hbt__choice.is-active { border-color: var(--hbt-gold); background: rgba(231,200,136,.16); box-shadow: inset 0 0 0 1px rgba(231,200,136,.13); }
.hbt__deck-area { position:relative; display:flex; align-items:center; flex-direction:column; padding-top:35px; }
.hbt .hbt__deck {
  position:relative; display:block; width: clamp(158px, 26vw, 198px); aspect-ratio: 848 / 1264;
  border: 0; padding: 0; margin: 0 0 18px; background: transparent; border-radius: 11px;
  transform: translate3d(0,0,0);
  box-shadow:none;
  transition: transform .25s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.hbt .hbt__deck:hover:not(:disabled) { transform:translateY(-7px); filter: drop-shadow(0 0 13px rgba(245,211,143,.25)); }
.hbt .hbt__deck:active:not(:disabled) { transform:translateY(-2px) scale(.98); }
.hbt__deck-image, .hbt__deck-layer {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  border:2px solid #b5945b; border-radius: 10px;
  box-shadow: 0 9px 24px rgba(0,0,0,.28);
  object-fit: cover; object-position:center; background: linear-gradient(135deg, #3b254b, #6e467a 48%, #2b204a);
}
.hbt__deck-image { z-index:3; }
.hbt__deck-layer--middle { transform:rotate(-7deg) translate(-9px,4px); z-index:2; }
.hbt__deck-layer--back { transform:rotate(6deg) translate(9px,3px); z-index:1; }
.hbt__deck-layer { background: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(228,197,132,.12) 9px, rgba(228,197,132,.12) 11px), radial-gradient(circle, #785387, #2c2149); }
.hbt__sparkle { position:absolute; top:35%; color:#e9c88e; opacity:.75; font-size:45px; line-height:1; pointer-events:none; }
.hbt__sparkle--left { left:calc(50% - 170px); }
.hbt__sparkle--right { right:calc(50% - 170px); font-size:31px; top:50%; }
.hbt__deck-caption { margin:5px 0 16px; color:#e4d9e7; font-size:13px; }
.hbt .hbt__action {
  display:inline-flex; justify-content:center; align-items:center; gap: 8px;
  min-height: 48px; padding: 11px 26px; border:1px solid #eed7a0; border-radius:999px;
  background: linear-gradient(145deg, #ffe9b8, #ddba75); color:#33253d;
  font-size:15px; font-weight: 800; line-height:1.4; text-decoration:none;
  box-shadow: 0 6px 21px rgba(0,0,0,.2);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.hbt .hbt__action:hover:not(:disabled) { background:linear-gradient(145deg, #fff0cc, #efd095); color:#261c32; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.28); }
.hbt__status { min-height: 25px; margin: 19px auto 0; text-align:center; color:#f3dba9; font-size:14px; }
.hbt .hbt__results { margin:18px auto 28px; max-width:960px; outline: none; }
.hbt__results.is-visible { animation:hbt-reveal .45s both; }
.hbt__reading > * { max-width:100%; }
.hbt .hbt-reading__heading { margin:0 auto 23px; text-align:center; color: #f7e6bd; font-size: clamp(21px,2.7vw,27px); line-height:1.3; }
.hbt-reading__question {
  max-width:780px; margin:0 auto 21px; text-align:center; color:#e8d9e8;
  font-size:15px; overflow-wrap:anywhere;
}
.hbt-reading__question span { color:#e7c888; font-weight:700; }
.hbt-reading__cards { display:grid; justify-content:center; gap:18px; margin:0 auto; align-items:stretch; }
.hbt-reading__cards.is-one { grid-template-columns:minmax(0, 610px); }
.hbt-reading__cards.is-three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.hbt-card { min-width:0; overflow:hidden; display:flex; flex-direction:column; background:#fbf8f5; color:#312b36; border:1px solid rgba(238,215,169,.38); border-radius:15px; box-shadow:0 12px 26px rgba(0,0,0,.16); }
.hbt-card__art { background:#2b2236; margin:0; display:flex; justify-content:center; padding:15px 15px 0; }
.hbt-card__image { display:block; width:auto; max-width:100%; height:auto; max-height:355px; aspect-ratio:848/1264; object-fit:contain; border-radius:6px 6px 0 0; box-shadow:0 6px 17px rgba(0,0,0,.3); }
.hbt-reading__cards.is-three .hbt-card__image { max-height:270px; }
.hbt-card__content { flex:1; padding:18px clamp(16px,2.3vw,24px) 24px; text-align:left; }
.hbt-card__position { display:table; margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#73558a; }
.hbt .hbt-card__name { margin:0 0 3px; color:#382342; font-size:clamp(19px,2.3vw,25px); line-height:1.25; }
.hbt-card__theme { display:block; margin:0 0 13px; color:#8f6b3d; font-size:14px; font-weight:750; }
.hbt-card__meaning, .hbt-card__advice { color:#4a4350; font-size:14px; line-height:1.7; margin:0; }
.hbt-card__advice-label { color:#503b5e; font-weight:800; font-size:13px; margin:17px 0 4px; }
.hbt-card__advice { padding-left:12px; border-left:3px solid #d2ad6d; }
.hbt-verdict { max-width:650px; margin:0 auto 25px; padding:22px 24px; border-radius:14px; text-align:center; background:rgba(246,229,190,.10); border:1px solid rgba(248,214,149,.3); }
.hbt-verdict__eyebrow { margin:0 0 4px; color:#eedca9; letter-spacing:.12em; text-transform:uppercase; font-size:11px; font-weight:800; }
.hbt .hbt-verdict__heading { font-size:clamp(29px,4vw,43px); color:#ffe9af; margin:0 0 2px; line-height:1.2; font-weight:800; }
.hbt-verdict.is-no .hbt-verdict__heading { color:#ffd0c9; }
.hbt-verdict.is-maybe .hbt-verdict__heading { color:#d9daff; }
.hbt-verdict__subtitle { font-size:14px; color:#f2e5ee; margin:0 0 10px; }
.hbt-verdict__explanation { color:#f5e7f2; font-size:16px; line-height:1.65; margin:0 auto; max-width:490px; }
.hbt-reading__summary { max-width:820px; margin:25px auto 0; border:1px solid var(--hbt-border); border-radius:12px; padding:17px 21px; background:rgba(255,255,255,.065); }
.hbt .hbt-reading__summary h4 { margin:0 0 6px; font-size:18px; color:#ffe5af; }
.hbt-reading__summary p { color:#ede2ec; margin:0; font-size:14px; line-height:1.7; }
.hbt__disclaimer { text-align:center; max-width:720px; margin:23px auto 10px; color:#cfc5d2; font-size:12px; line-height:1.6; }
.hbt__credit { margin:0; padding-top:9px; text-align:center; color:#bfb1be; font-size:11px; line-height:1.7; }
.hbt .hbt__credit a { color:#e0cda9; text-decoration:underline; text-underline-offset:2px; }
.hbt .hbt__credit a:hover { color:#fff2d5; }
.hbt.is-shuffling .hbt__deck { animation:hbt-shuffle .34s ease-in-out infinite alternate; }
@keyframes hbt-shuffle { from {transform:rotate(-3deg) translateY(1px)} to {transform:rotate(4deg) translateY(-7px)} }
@keyframes hbt-reveal { from {opacity:0; transform:translateY(14px)} to {opacity:1; transform:translateY(0)} }
@media (max-width:760px) {
  .hbt-reading__cards.is-three { grid-template-columns:minmax(0, 570px); gap:16px; }
  .hbt-reading__cards.is-three .hbt-card__image { max-height:315px; }
  .hbt-reading__cards.is-one { grid-template-columns:minmax(0, 570px); }
  .hbt-card__art { padding-top:18px; }
  .hbt-card__content { padding:17px 21px 21px; }
}
@media (max-width:500px) {
  .hbt { padding:28px 17px 19px; border-radius:16px; margin:18px auto; }
  .hbt__ambient { inset:9px; border-radius:12px; }
  .hbt__intro { margin-bottom:23px; }
  .hbt__choices { gap:8px; }
  .hbt .hbt__choice { font-size:14px; padding:8px 5px; min-height:68px; }
  .hbt .hbt__choice span { font-size:11px; }
  .hbt__deck-area { padding-top:28px; }
  .hbt__sparkle--left { left:calc(50% - 134px); }
  .hbt__sparkle--right { right:calc(50% - 132px); }
  .hbt .hbt__action { width:100%; max-width:310px; }
  .hbt-card__image { max-height:310px; }
}
@media (prefers-reduced-motion:reduce) {
  .hbt *, .hbt *::before, .hbt *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}