/* game.css: the four screens (start / preview / draw / results).
   Layout only, no theme; the custom UI goes on top of this.

   Screens share the header and sit in the same grid cell as the canvas
   workspace, on top of it. The workspace stays laid out (just hidden) so
   the canvas keeps its size between rounds. */

#app > #workspace,
#app > .screen {
  grid-row: 2;
  grid-column: 1;
}

.screen {
  display: none;
  overflow-y: auto;
  padding: 24px 16px;
  background: transparent; /* the page backdrop shows through */
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

body[data-screen="start"] #screen-start,
body[data-screen="preview"] #screen-preview,
body[data-screen="results"] #screen-results {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:not([data-screen="draw"]) #workspace {
  visibility: hidden;
}

/* header pieces that only make sense while drawing */
#draw-footer { display: none; }
body[data-screen="draw"] #draw-footer { display: flex; }

/* keep the timer's line reserved so the header doesn't jump between screens */
#round-timer {
  min-height: 1.2em;
}

/* ---- header round controls ---- */
#round-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

#round-bar button {
  height: 32px;
  min-width: 96px;
  padding: 0 16px;
  cursor: pointer;
}

/* ---- 1) start ---- */
.name-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.name-field input { padding: 6px 8px; font: inherit; }
.scoreboard { margin: 8px 0; text-align: left; }
.scoreboard h3 { margin: 0 0 4px; font-size: 1em; }
.scoreboard ol { margin: 0; padding-left: 1.5em; }
.scoreboard p { margin: 0; opacity: 0.7; }

.start-card {
  width: min(620px, 100%);
  padding: 24px;
  background: url("../assets/ui/ui-box-1x1.5.png") center / 100% 100% no-repeat;
}

.start-card h2 {
  margin: 0 0 14px;
  text-align: center;
}

.mode-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  cursor: pointer;
}

.mode-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.mode-name {
  font-size: 32px;
}
.mode-desc {
  opacity: 0.7;
}

/* ---- 2) preview ---- */
.preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, 100%);
  padding: 20px;
  background: url("../assets/ui/ui-box-1x1.5.png") center / 100% 100% no-repeat;
  text-align: center;
}

.preview-frame {
  width: 100%;
  height: min(520px, calc(100vh - var(--header-h, 120px) - 230px));
  min-height: 120px;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

/* fill the frame's fixed height; object-fit letterboxes so the whole
   image shows at the frame height (tall images get side bars, not cropped) */
#preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-caption {
  margin: 14px 0 4px;
  font-size: 16px;
}

/* ---- 4) results ---- */
#results-title {
  margin: 0 0 8px;
}

#results-score {
  margin-bottom: 12px;
  text-align: center;
}

#results-score-num {
  font-size: 64px;
  line-height: 1;
}

#results-score .score-max { font-size: 32px; }


#round-bar,
#results-title,
#results-painting,
#results-score,
.results-pair figcaption,
#screen-results > .credit,
#results-status {
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

#screen-results > .credit a {
  color: #fff;
}

.results-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: min(900px, 100%);
}

.results-pair figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.results-pair img {
  width: 100%;
  /* fit the space under the header so the buttons stay on screen */
  height: min(440px, calc(100vh - var(--header-h, 120px) - 320px));
  min-height: 160px;
  object-fit: contain;
  background: url("../assets/ui/ui-box-1x2.png") center / 100% 100% no-repeat;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.results-actions button {
  height: 32px;
  min-width: 96px;
  padding: 0 18px;
  cursor: pointer;
}

#results-again {
  min-width: 128px;
}

#results-status {
  margin-top: 8px;
  font-size: 16px;
  min-height: 1em;
}

.credit {
  font-size: 16px;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .mode-buttons,
  .results-pair {
    grid-template-columns: 1fr;
  }
}

/* painting ambush reveal on the results screen */
#results-painting {
  margin: -8px 0 12px;
  font-size: 16px;
  text-align: center;
}

#results-painting a { color: inherit; }

/* Betelgeuse's verdict (Gemma 4 judge) on the results screen */
#results-judge {
  width: min(900px, 100%);
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-shadow: 0 1px 3px #000;
  text-align: center;
}
#results-judge .judge-head { font-size: 14px; opacity: 0.85; }
#results-judge-score { margin-left: 8px; font-weight: bold; opacity: 1; }
#results-judge-roast { margin: 4px 0 0; font-size: 18px; }
#results-judge.loading #results-judge-roast { opacity: 0.7; font-style: italic; }