/* Hockey IQ — palette lifted from the cards themselves */
:root {
  --ice:        #c8d6dd;
  --slate:      #2b3d47;
  --slate-deep: #1d2b33;
  --slate-line: #3c525e;
  --green:      #1b9e4b;
  --green-dark: #157c3b;
  --amber:      #f6b32c;
  --paper:      #ffffff;

  --gap: clamp(10px, 2.2vh, 20px);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #354a56 0%, var(--slate-deep) 62%, #131e24 100%);
  color: var(--ice);
  font: 500 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding:
    max(8px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

/* ---------------- top bar ---------------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 6px 0;
  min-height: 26px;
}

.wordmark {
  margin: 0;
  font-size: clamp(13px, 1.9vh, 17px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa6b2;
}

.badges { display: flex; align-items: center; gap: 10px; }

.meta {
  font-size: clamp(11px, 1.6vh, 14px);
  font-weight: 600;
  color: #7d94a1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  color: #9fb4c0;
}
.badge--ready { background: rgba(27, 158, 75, 0.18); color: #6fd598; }

/* ---------------- the card ---------------- */

.stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--gap) 0;
  perspective: 1600px;
  /* own the gesture: without this iPadOS can claim a horizontal drag and
     fire pointercancel instead of pointerup, killing swipe detection */
  touch-action: none;
}

.card {
  position: relative;
  z-index: 1;              /* always paints over the loading text */
  height: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  transform-style: preserve-3d;
  transition: transform 460ms cubic-bezier(0.22, 0.9, 0.26, 1), opacity 180ms ease;
  cursor: pointer;
}

.card.is-flipped { transform: rotateY(180deg); }

/* card swap: slide out to the left, drop back in from the right */
.card.is-leaving  { transform: translateX(-14%) scale(0.94); opacity: 0; transition-duration: 190ms; }
.card.is-entering { transform: translateX(14%)  scale(0.94); opacity: 0; transition-duration: 0ms; }
.card.is-settling { transition-duration: 250ms; }
.card.no-anim     { transition: none !important; }

/* keep the card out of sight until its artwork is decoded, so the first thing
   on screen is never an empty white rectangle */
body:not(.is-ready) .card { opacity: 0; }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.face--back { transform: rotateY(180deg); }

.face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* thin coloured edge so you can tell the two sides apart at a glance */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 3px solid transparent;
  pointer-events: none;
}
.face--back::after { border-color: rgba(27, 158, 75, 0.55); }

.loader {
  position: absolute;
  font-size: 15px;
  color: #7d94a1;
  transition: opacity 250ms ease;
}
.is-ready .loader { opacity: 0; pointer-events: none; }
.loader--error { color: #ffb4a8; text-align: center; max-width: 30ch; line-height: 1.5; }

/* ---------------- controls ---------------- */

.controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.hint {
  margin: 0;
  height: 1.3em;
  font-size: clamp(12px, 1.8vh, 15px);
  font-weight: 600;
  color: #7d94a1;
  transition: opacity 160ms ease;
}
.hint.is-hidden { opacity: 0; }

.buttons {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 620px;
}

.btn {
  flex: 1 1 0;
  min-height: clamp(52px, 8.5vh, 66px);
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font: 800 clamp(16px, 2.5vh, 20px)/1 inherit;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  transition: transform 90ms ease, filter 120ms ease;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.97); filter: brightness(1.1); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.btn--flip {
  background: linear-gradient(#23b357, var(--green-dark));
  box-shadow: 0 4px 0 #0f5c2b, 0 8px 18px rgba(0, 0, 0, 0.35);
}

.btn--next {
  flex: 0 0 auto;
  min-width: clamp(130px, 34%, 210px);
  background: linear-gradient(#4e6674, #3a4e5a);
  box-shadow: 0 4px 0 #25353e, 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* once the answer is showing, "New Play" becomes the obvious next move */
body.is-revealed .btn--next {
  flex: 1 1 0;
  background: linear-gradient(#23b357, var(--green-dark));
  box-shadow: 0 4px 0 #0f5c2b, 0 8px 18px rgba(0, 0, 0, 0.35);
}
body.is-revealed .btn--flip {
  flex: 0 0 auto;
  min-width: clamp(120px, 32%, 190px);
  background: linear-gradient(#4e6674, #3a4e5a);
  box-shadow: 0 4px 0 #25353e, 0 8px 18px rgba(0, 0, 0, 0.35);
}

.btn__icon { font-size: 1.1em; margin-right: 2px; }

/* landscape on an iPad: put the buttons beside the card so it stays big */
@media (orientation: landscape) and (max-height: 620px) {
  .buttons { max-width: 520px; }
  .btn { min-height: 46px; }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition-duration: 1ms !important; }
}