/* Contourly — announce + drawing (2f). Owned by Wave-2 agent A.
   ONE responsive DOM (js/screens/match.js showDraw): mobile = full-bleed canvas
   with an in-canvas timer ring + a bottom toolbar; desktop ≥1024 reflows to the
   reference side-rail layout (tools rail | big square canvas | timer+finish rail)
   with the ring in the right rail. The canvas is always a letterboxed 1000×1000
   logical square (canvas.js) — the frame may be any aspect, never stretched. */

/* ============================================================================
   2f · Announce (blue colour moment)
   ========================================================================== */
.ct-match--announce { max-width: none; }         /* undo the 430px phone clamp */

@media (min-width: 1024px) {
  .ct-match--announce .ct-announce__eyebrow { font-size: 20px; }
  .ct-match--announce .ct-announce__card { padding: 34px 58px; border-radius: 30px; }
  .ct-match--announce .ct-announce__flag { font-size: 80px; }
  .ct-match--announce .ct-announce__name { font-size: 60px; }
  .ct-match--announce .ct-announce__note { font-size: 15px; }
}

/* ============================================================================
   2f · Drawing — shared shell
   ========================================================================== */
/* Top bar: brand + country chip (left) | rival status (right). */
.ct-draw__top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-draw__logo { display: none; }                /* desktop-only (see ≥1024) */

/* The stage holds the rails, the canvas, the mobile toolbar and the fact chips.
   Mobile: a flex column — canvas fills, toolbar pinned below. */
.ct-draw__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 2px 14px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ct-draw__stage > .ct-draw__rail { display: none; }   /* rails are desktop-only */
.ct-draw__facts { display: none; }                    /* facts are desktop-only */

.ct-match--draw .ct-canvas { flex: 1 1 auto; min-height: 0; }

/* Bottom toolbar (mobile): undo · Hold to finish · clear. */
.ct-draw__toolbar {
  flex: none;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 2px;
}
.ct-draw__toolbar .ct-btn--hold { flex: 1; max-width: 260px; }

/* Canvas hints — one per breakpoint. */
.ct-canvas__hint--desktop { display: none; }

/* ---- Timer rings ------------------------------------------------------------
   Two rings live in the DOM; CSS shows one per breakpoint. In-canvas ring floats
   top-right over the drawing (mobile, dark well); rail ring is a big framed dial
   (desktop, white well). */
.ct-timer-ring--in-canvas .ct-timer-ring__num {
  inset: 5px;
  background: var(--ct-ink);
  color: var(--ct-white);
  border: var(--ct-bw-thin) solid var(--ct-ink);
  box-shadow: var(--ct-sh-2);
}
.ct-timer-ring--rail { display: none; }

/* Last-5s urgency (not colour-only: the ring also grows + pulses and gains "!"). */
.ct-timer-ring--urgent { animation: ct-pulse 1s infinite; }
.ct-timer-ring--in-canvas.ct-timer-ring--urgent {
  width: 76px; height: 76px;
  box-shadow: var(--ct-sh-5);
}
.ct-timer-ring--in-canvas.ct-timer-ring--urgent .ct-timer-ring__num {
  background: var(--ct-red);
  border-color: var(--ct-red);
  font-size: 24px;
}

/* ============================================================================
   Tablet — roomier single column
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ct-draw__stage { padding-left: 22px; padding-right: 22px; gap: 14px; }
  .ct-draw__toolbar { padding-bottom: 8px; }
}

/* ============================================================================
   Desktop ≥1024 — reference side-rail layout
   ========================================================================== */
@media (min-width: 1024px) {
  /* widen the stage column so the rails + canvas centre comfortably
     (out-specify app.css's .ct-screen--stage.ct-screen--stage-wide 720px cap) */
  .ct-screen--stage.ct-screen--stage-wide.ct-match--draw { --ct-stage-max: 1060px; }

  .ct-draw__top { padding: 14px 8px 6px; }
  .ct-draw__logo { display: inline-flex; }

  .ct-draw__stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "lrail canvas rrail"
      "facts facts  facts";
    align-content: center;
    align-items: center;
    justify-items: center;
    gap: 20px 44px;
    padding: 6px 24px 20px;
  }
  .ct-draw__stage > .ct-draw__rail { display: flex; }
  .ct-draw__toolbar { display: none; }

  .ct-draw__rail {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .ct-draw__rail--left  { grid-area: lrail; }
  .ct-draw__rail--right { grid-area: rrail; gap: 20px; }
  .ct-draw__rail-note { font: 600 12px/1.4 var(--ct-font); color: var(--ct-text-4); text-align: center; }
  .ct-draw__rail .ct-btn--tool { width: 72px; height: 72px; border-radius: 22px; }
  .ct-draw__rail--right .ct-btn--hold { height: 64px; border-radius: 32px; padding: 0 26px; white-space: nowrap; }

  /* big square canvas, bounded by width AND height so it never overflows */
  .ct-match--draw .ct-canvas {
    grid-area: canvas;
    flex: none;
    width: min(620px, calc(100dvh - 240px));
    height: min(620px, calc(100dvh - 240px));
    border-radius: var(--ct-r-canvas-lg);
    box-shadow: 0 8px 0 var(--ct-ink);
  }

  /* hints swap to the desktop copy */
  .ct-canvas__hint { display: none; }
  .ct-canvas__hint--desktop { display: block; }

  /* the ring moves to the right rail — a big framed dial */
  .ct-timer-ring--in-canvas { display: none; }
  .ct-timer-ring--rail {
    display: block;
    /* MUST be relative: the ring's SVG is position:absolute;inset:0, so a static
       parent lets it escape to the stage and blow up to viewport size. */
    position: relative;
    width: 124px; height: 124px;
    flex: none;
  }
  .ct-timer-ring--rail .ct-timer-ring__num {
    inset: 11px;
    border: var(--ct-bw) solid var(--ct-ink);
    background: var(--ct-white);
    box-shadow: var(--ct-sh-4);
    font-size: 27px;
  }
  .ct-timer-ring--rail.ct-timer-ring--urgent .ct-timer-ring__num {
    border-color: var(--ct-red);
    color: var(--ct-red);
  }

  /* fact chips centred below the canvas */
  .ct-draw__facts {
    grid-area: facts;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}