/* Portal shell: fills the host iframe on CrazyGames / itch.io. No site chrome,
   no outbound links, relative asset paths only. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  src: url("../../assets/fonts/Fraunces144ptSoft-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  src: url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

* { box-sizing: border-box; }
button { font: inherit; }

html, body { height: 100%; }

body {
  background: var(--cn-color-ink);
  color: var(--cn-color-canvas);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  margin: 0;
  overflow: hidden;
}

.frame {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  margin: 0 auto;
  max-width: 68rem;
  padding: clamp(.5rem, 2vw, 1rem);
}

.game-bar { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: space-between; }
.game-bar p { font-size: .9rem; font-weight: 600; margin: 0; }

/* The canvas keeps its 960x560 logical space and is letterboxed into whatever
   the portal frame gives us. point() in game.js already rescales via
   getBoundingClientRect, so no game logic depends on the rendered size. */
.arena-wrap { align-items: center; container-type: size; display: flex; flex: 1 1 auto; justify-content: center; min-height: 0; }

/* The stage carries the 960:560 ratio and letterboxes inside whatever the
   portal frame gives us; the canvas then fills the stage exactly. Scaling the
   box rather than the bitmap keeps getBoundingClientRect equal to the drawn
   area, which is what point() divides by to aim taps.
   aspect-ratio alone is not enough: a max-height clamp shrinks the height
   without pulling the width back, so the bitmap stretches in short frames.
   Solving both axes against the container size letterboxes in either
   direction, which portals need because they frame at many shapes. */
.arena-stage {
  height: min(100cqh, 100cqw * 560 / 960);
  position: relative;
  width: min(100cqw, 100cqh * 960 / 560);
}

#arena { background: var(--cn-game-field); display: block; height: 100%; touch-action: none; width: 100%; }

.game-controls { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .8rem; }
.game-controls p { font-size: .9rem; margin: 0; }

/* The label is Paper, not Ink: at 16px/600 this is body text, and Ink on the
   accent fill is 3.02:1 against a 4.5:1 floor. Paper on the same fill is
   5.41:1. The hover state below sets its own colour and is unaffected. */
button { background: var(--cn-color-amber); border: 2px solid var(--cn-color-ink); color: var(--cn-color-canvas); cursor: pointer; font-weight: 600; padding: .5rem .8rem; }
button:hover, button:focus-visible { background: var(--cn-color-canvas); color: var(--cn-color-ink); outline: 2px solid var(--cn-color-amber); outline-offset: 2px; }

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* The draft overlays the arena so a choice never pushes the canvas off-frame. */
.draft-panel {
  align-content: center;
  background: var(--cn-color-ink);
  border: 2px solid var(--cn-color-amber);
  bottom: 0;
  display: grid;
  left: 0;
  margin: auto;
  overflow-y: auto;
  padding: clamp(.75rem, 2vw, 1.25rem);
  position: absolute;
  right: 0;
  top: 0;
}
.draft-panel[hidden] { display: none; }
.draft-panel h2 { font-family: Fraunces, Georgia, serif; font-size: clamp(1.1rem, 3vw, 1.6rem); margin: 0 0 .75rem; }
.draft-options { display: grid; gap: .6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.draft-option { background: transparent; color: var(--cn-color-canvas); min-height: 7rem; text-align: left; }
.draft-option strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.1rem; margin-bottom: .4rem; }
.draft-option span { display: block; font-size: .85rem; font-weight: 400; line-height: 1.35; }

@media (max-width: 40rem) {
  .draft-panel {
    bottom: auto;
    height: 19rem;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    top: 50%;
    width: min(34rem, calc(100vw - 2rem));
  }

  .draft-options { grid-template-columns: 1fr; }
  .draft-option { min-height: 0; }
}