/* Napkin mode at /draw/napkin/. Loaded after /assets/css/styles.css (site colors and fonts).
   Phones: the napkin fills the width, the tools sit right under it. Laptops: the napkin takes the
   full height and the tools stand in a column beside it.
   Built into online-basketball-playbook-site/draw/napkin/ by scripts/build_draw.py. Edit this file, not the copy. */
:root {
  --obp-header: 93px; /* .site-header: 30px message bar, 60px menu row, 3px orange rule (styles.css), every width */
  --napkin-bar: 52px;
  --napkin-line: #2c4272;
}
html { overflow-x: hidden; }
body.napkin-page { margin: 0; background: var(--navy, #0f1d3a); font-family: var(--font-sans); }
.napkin-page .site-header { position: sticky; top: 0; z-index: 30; }

/* Bar under the site header: name, the one-line pitch, and the switch back to PlayDraw */
.napkin-bar {
  box-sizing: border-box;
  height: var(--napkin-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--navy-2, #162a52);
  border-bottom: 1px solid var(--napkin-line);
  color: #fff;
}
.napkin-bar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.napkin-name { font: 800 20px/1 var(--font-sans); white-space: nowrap; }
.obp-free-pill {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--yellow, #ffc61a);
  color: var(--navy, #0f1d3a);
  font: 800 11px/1.3 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obp-mode-switch {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #4a6096;
  border-radius: 999px;
  background: #0b1630;
}
.obp-mode {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: #c8d1e4;
  font: 700 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.obp-mode:hover { color: #fff; }
.obp-mode.is-active { background: var(--orange, #e8701e); color: var(--navy, #0f1d3a); }
.obp-mode:focus-visible { outline: 2px solid var(--yellow, #ffc61a); outline-offset: 2px; }

/* The app: the napkin and its tools fill the screen under the two bars */
.napkin-app {
  box-sizing: border-box;
  height: calc(100dvh - var(--obp-header) - var(--napkin-bar));
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px 12px;
  background: radial-gradient(circle at 50% 40%, #1b3264 0%, var(--navy, #0f1d3a) 70%);
}
.napkin-stage {
  flex: 0 1 calc(100vw - 24px);
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.napkin-sheet {
  position: relative;
  width: min(100%, 60vh); /* browsers without container units (iOS 15) */
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  border-radius: 3px;
  background: #fbfaf5;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.napkin-sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; }
#napkinInk {
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.napkin-sheet[data-tool="eraser"] #napkinInk { cursor: cell; }
.napkin-sheet[data-tool="O"] #napkinInk, .napkin-sheet[data-tool="X"] #napkinInk { cursor: copy; }
.napkin-sheet[data-tool="text"] #napkinInk { cursor: text; }

/* The label being typed sits right on the napkin, in the pen color and the same handwriting look */
.napkin-text-input {
  position: absolute;
  z-index: 2;
  box-sizing: content-box;
  min-width: 3ch;
  max-width: 92%;
  margin: 0;
  padding: 2px 4px;
  border: 1.5px dashed rgba(15, 29, 58, 0.45);
  border-radius: 4px;
  background: rgba(251, 250, 245, 0.85);
  font-family: 'Marker Felt', 'Chalkboard SE', 'Comic Sans MS', 'Segoe Print', cursive;
  font-weight: 700;
  line-height: 1.25;
  transform: translate(-6px, -50%);
  outline: none;
}
.napkin-text-input:focus { border-color: var(--orange, #e8701e); }

.napkin-panel { flex: none; display: flex; flex-wrap: wrap; gap: 8px; width: min(100%, 640px); margin: 0 auto; }
.napkin-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; flex: 1 1 100%; }
.napkin-players { flex: 3 1 0; } /* O, X, Text, Undo and Clear share one row on a phone */
.napkin-group-edit { flex: 2 1 0; }
.napkin-text-tool.is-red:not(.is-active) { color: #ff8a8a; }
.napkin-text-tool.is-red.is-active { color: #c8102e; }
.napkin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #4a6096;
  border-radius: 8px;
  background: var(--navy-2, #162a52);
  color: #fff;
  font: 700 14px/1.1 var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.napkin-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.napkin-btn[hidden] { display: none; }
.napkin-btn:disabled { opacity: 0.45; cursor: default; }
.napkin-btn.is-active { background: #fbfaf5; border-color: #fbfaf5; color: #111; }
.napkin-red, .napkin-red.is-active { color: #ff8a8a; }
.napkin-red.is-active { color: #c8102e; }
.napkin-mark { font: 800 20px/1 var(--font-sans); }
.napkin-primary { background: var(--orange, #e8701e); border-color: var(--orange, #e8701e); color: var(--navy, #0f1d3a); }
.napkin-btn:focus-visible { outline: 2px solid var(--yellow, #ffc61a); outline-offset: 2px; }
@media (hover: hover) {
  .napkin-btn:not(:disabled):not(.is-active):hover { background: #1f3160; }
  .napkin-primary:not(:disabled):hover { background: var(--orange-2, #ff8c2a); }
}
.napkin-status { flex: 1 1 100%; min-height: 18px; margin: 0; color: var(--yellow, #ffc61a); font-size: 14px; text-align: center; }

/* Laptops and tablets on their side: the napkin takes the full height, tools in a column beside it. The tools
   start at the top with the same gap as the napkin (a centered column taller than the screen used to spill up
   under the bar, Lee 2026-10-14) and the page scrolls when the column is taller than the screen. */
@media (orientation: landscape) and (min-width: 700px) {
  .napkin-app { flex-direction: row; align-items: flex-start; justify-content: center; gap: 18px; padding: 12px 16px; height: auto; min-height: calc(100dvh - var(--obp-header) - var(--napkin-bar)); }
  .napkin-stage { flex: 0 1 calc(100dvh - var(--obp-header) - var(--napkin-bar) - 24px); height: calc(100dvh - var(--obp-header) - var(--napkin-bar) - 24px); }
  .napkin-panel { width: 250px; flex-direction: row; flex-wrap: wrap; align-content: start; align-self: flex-start; margin: 0; }
  .napkin-group { flex: 1 1 100%; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .napkin-court { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .napkin-court .napkin-btn { flex-direction: column; gap: 2px; font-size: 13px; }
  .napkin-players { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .napkin-group-edit { flex: 1 1 100%; }
  .napkin-send { grid-template-columns: 1fr; margin-top: 8px; }
  .napkin-send .napkin-btn { min-height: 48px; font-size: 15px; }
  .napkin-status { flex: none; text-align: left; }
}

/* Phones on their side: no minimum height, the send buttons two a row, tools from the top */
@media (orientation: landscape) and (max-height: 520px) {
  .napkin-app { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .napkin-stage { flex-basis: calc(100dvh - var(--obp-header) - var(--napkin-bar) - 16px); }
  .napkin-panel { align-self: start; gap: 6px; width: 300px; }
  .napkin-group[aria-label="Pens"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .napkin-group[aria-label="Pens"] .napkin-btn svg { display: none; }
  .napkin-send { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); margin-top: 0; }
  .napkin-send .napkin-btn, .napkin-btn { min-height: 38px; padding: 4px; font-size: 13px; }
  .napkin-court .napkin-btn { flex-direction: row; gap: 4px; }
  .napkin-players { flex: 3 1 0; }
  .napkin-group-edit { flex: 2 1 0; }
  .napkin-players .napkin-btn svg, .napkin-group-edit .napkin-btn svg { display: none; }
}

/* Small phones: shorter labels in the bar, smaller type on the buttons */
/* Phones upright: the napkin always takes the full width. Safari's toolbars shrink the screen height,
   so the tools may sit a little lower and the page scrolls to them, instead of the napkin shrinking. */
@media (max-width: 600px) and (orientation: portrait) {
  .napkin-app { height: auto; min-height: 0; }
  .napkin-stage { flex: 0 0 calc(100vw - 24px); }
}
@media (max-width: 600px) {
  .obp-mode-switch .obp-mode:not(.is-active) { padding: 0 10px; }
  .napkin-app { justify-content: flex-start; }
}
@media (max-width: 440px) {
  /* phones that can share files show four send buttons: two a row, so no label wraps */
  .napkin-send:has(#napkinShare:not([hidden])) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .napkin-group[aria-label="Pens"] .napkin-btn svg,
  .napkin-group-edit .napkin-btn svg,
  .napkin-text-tool svg { display: none; }
  .napkin-group { gap: 5px; }
}
@media (max-width: 360px) {
  .napkin-bar .obp-free-pill { display: none; }
}
@media (max-width: 380px) {
  .napkin-btn { font-size: 13px; padding: 6px 4px; gap: 4px; }
  .napkin-btn svg { width: 16px; height: 16px; }
  .napkin-bar { padding: 0 10px; }
  .obp-mode { padding: 0 10px; font-size: 13px; }
}

/* Fallback picture when the browser will not copy */
.napkin-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 20px;
  border: 1px solid #4a6096;
  border-radius: 12px;
  background: var(--navy, #0f1d3a);
  color: #fff;
  font-family: var(--font-sans);
}
.napkin-dialog::backdrop { background: rgba(7, 12, 26, 0.8); }
.napkin-dialog h2 { margin: 0 0 12px; font: 800 20px/1.2 var(--font-sans); }
.napkin-dialog img { display: block; width: 100%; height: auto; border-radius: 4px; -webkit-touch-callout: default; }
.napkin-dialog p { margin: 12px 0; color: #c8d1e4; font-size: 15px; line-height: 1.5; }

/* Page text under the napkin */
.napkin-about { background: var(--paper, #fffdf8); color: var(--ink, #0f1d3a); padding: 40px 16px 48px; }
.napkin-about-inner { width: min(var(--max, 1160px), 100%); margin: 0 auto; }
.napkin-about h1 { margin: 0 0 12px; font: 900 clamp(28px, 4vw, 40px)/1.1 var(--font-sans); }
.napkin-about p { max-width: 70ch; font-size: 17px; line-height: 1.6; }
.napkin-about a { color: var(--orange-deep, #b04b0a); font-weight: 700; }