/* WORLD TOUR screens. Layout only: every colour, radius and font here comes from the tokens
   styles.css defines, so the other agent's palette work lands on these screens for free.
   Nothing in this file restyles an existing class - it only adds the ones ui-tour.js introduces. */

.tour-root { position: absolute; inset: 0; pointer-events: none; }
.tour-root .screen.is-open { pointer-events: auto; }

/* The tour screens sit on the same navy ground with the same lime/magenta rake as the menu and
   the sheets, so moving between them never feels like leaving the game. */
.screen-tour {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0 3px, transparent 3px 26px),
    radial-gradient(90% 55% at 12% 4%, rgba(184, 255, 42, .16), transparent 62%),
    radial-gradient(90% 60% at 92% 12%, rgba(255, 47, 179, .18), transparent 60%),
    linear-gradient(180deg, rgba(13, 27, 76, .95), rgba(5, 10, 36, .97));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* .card centres its children and hides its own overflow behind a scroll; the tour cards want a
   full-width column with ONE scroll pane inside it, so both are reset here rather than fought. */
.tour-card {
  width: min(520px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-xl);
  background: var(--panel-bg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.screen-pick .tour-card,
.screen-map .tour-card,
.screen-boards .tour-card { height: 100%; }

.tour-head { display: flex; align-items: center; gap: 10px; }
.tour-head .sheet-titles { flex: 1; min-width: 0; }
/* Screen titles are caps like every other sheet; only the names inside a list keep their case.
   Titan One is wide, so a long bowler's name wraps to a second line rather than being cut: his
   own scorecard is the last place to truncate him. */
.tour-head .sheet-title,
.sc-head .sheet-title {
  text-transform: uppercase;
  font-size: clamp(17px, 5.4vmin, 27px);
  line-height: .98;
  white-space: normal;
}
.tour-head .sheet-count { display: inline-flex; align-items: center; gap: 4px; color: var(--lime); }
.tour-head .sheet-count svg { width: 14px; height: 14px; fill: currentColor; }

.tour-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* The row the scroll happens to cut fades out instead of ending on a hard edge against the
     button below it, so a half-row reads as "more below" rather than as a clipping bug. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* --------------------------------------------------------------------- flags */

.flag-img {
  position: relative;
  display: block;
  width: 48px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--navy-3);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.flag-img.sm { width: 24px; height: 16px; border-radius: 4px; }
.flag-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------- nation grid */

.tour-pick-body.is-flags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  padding: 2px;
}

.tour-flag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border: 1.5px solid transparent;
  border-radius: var(--r-l);
  background: rgba(20, 34, 95, .5);
  color: var(--white);
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tour-flag { justify-content: center; }
.tour-flag:active { transform: scale(.96); }
.tour-flag.is-on { border-color: var(--lime); background: rgba(184, 255, 42, .12); }
.tour-flag.is-pinned { border-color: var(--cyan); }
.tour-flag-name { font-family: var(--display); font-size: 13px; letter-spacing: 0.02em; }
.tour-flag-str {
  position: absolute;
  top: 5px;
  right: 6px;
  font: 700 8.5px/1 var(--ui);
  color: var(--dim);
}

/* --------------------------------------------------------------------- batter rows */

.tour-pick-body.is-bats { display: flex; flex-direction: column; gap: 8px; padding: 2px; }

.tour-bat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--r-l);
  background: rgba(20, 34, 95, .5);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.tour-bat:active { transform: scale(.985); }
.tour-bat.is-on { border-color: var(--lime); background: rgba(184, 255, 42, .1); }
.tour-bat .flag-img { align-self: flex-start; margin-top: 2px; }
.tour-bat .tb-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tb-name { font: 400 14.5px/1 var(--display); letter-spacing: 0.02em; }
.tb-meta { font: 700 8.5px/1 var(--ui); letter-spacing: 0.034em; color: var(--dim); }

.tb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 9px; margin-top: 4px; }
.tb-stat { display: flex; align-items: center; gap: 5px; }
.tb-stat em {
  font: 700 8px/1 var(--ui);
  letter-spacing: 0.02em;
  color: var(--dim-2);
  font-style: normal;
  width: 38px;
  flex: 0 0 auto;
}
.tb-bar {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--navy-3);
  box-shadow: inset 0 0 0 1px rgba(196, 224, 255, .14);
  overflow: hidden;
}
.tb-bar b { display: block; height: 100%; border-radius: var(--r-pill); background: var(--lime); }

/* --------------------------------------------------------------------- tour map */

.tour-path { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 6px; }

/* A stop you have not reached is dimmed by PAINT, never by opacity: an opacity layer over a
   scrolling list of flags gets its own compositing layer per row, and those layers went stale
   on us and left the old row's text ghosted behind the new one. A scrim and a muted label cost
   nothing, keep every row on the same layer, and read better anyway. */
.tour-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--r-l);
  background: rgba(20, 34, 95, .5);
}
.tour-stop .flag-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 56, .62);
}
.tour-stop.is-pinned .flag-img::after,
.tour-stop.is-next .flag-img::after { background: transparent; }
.tour-stop.is-pinned { border-color: rgba(41, 224, 255, .5); }
.tour-stop.is-next {
  border-color: var(--lime);
  background: rgba(184, 255, 42, .1);
}
.stop-name { flex: 1; font: 400 15.5px/1 var(--display); letter-spacing: 0.02em; color: var(--dim-2); }
.tour-stop.is-pinned .stop-name,
.tour-stop.is-next .stop-name { color: var(--white); }
.stop-pips { display: flex; gap: 4px; }
.stop-pip {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
}
.stop-pip.on { background: var(--lime); }
.stop-pin { display: inline-flex; color: var(--cyan); }
.stop-pin svg { width: 16px; height: 16px; fill: currentColor; }

.btn-next-over { width: 100%; }

/* --------------------------------------------------------------------- scorecard */

.sc-card { gap: 8px; text-align: center; align-items: stretch; }
.sc-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.sc-head .sheet-titles { flex: 1; min-width: 0; }
.sc-flag { display: block; width: 48px; height: 32px; border-radius: var(--r-s); overflow: hidden; flex: 0 0 auto; background: var(--navy-3); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sc-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-score { display: flex; align-items: baseline; justify-content: center; gap: 9px; }
.sc-score .sc-runs { font: 400 53.5px/.86 var(--display); color: var(--white); }
.screen-scorecard.is-won .sc-runs { color: var(--lime); }
.sc-score .sc-balls { font: 700 12px/1 var(--ui); letter-spacing: 0.034em; color: var(--dim); font-style: normal; }

.sc-out { font: 700 10.5px/1.3 var(--ui); letter-spacing: 0.048em; color: var(--dim); }
.sc-out.is-out { color: var(--magenta); }

.sc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sc-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--r-m);
  background: rgba(20, 34, 95, .55);
}
.sc-k { font: 700 8px/1 var(--ui); letter-spacing: 0.034em; color: var(--dim-2); }
.sc-stat b { font: 400 16.5px/1 var(--display); color: var(--white); }

.sc-wagon { width: 148px; height: 148px; margin: 2px auto 0; display: block; }
.wag-rope { fill: rgba(184, 255, 42, .06); stroke: var(--line-soft); stroke-width: 1.2; }
.wag-ring { fill: none; stroke: var(--line-soft); stroke-width: .8; stroke-dasharray: 3 4; }
.wag-shot { stroke-width: 2; stroke-linecap: round; }
.wag-shot.is-run { stroke: var(--dim); }
.wag-shot.is-four { stroke: var(--cyan); }
.wag-shot.is-six { stroke: var(--magenta); stroke-width: 2.6; }

.sc-next { font: 700 9.5px/1.3 var(--ui); letter-spacing: 0.027em; color: var(--cyan); }
.sc-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: stretch; }
.sc-acts .btn { height: 100%; }

/* --------------------------------------------------------------------- boards */

.board-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.board-tab { min-height: 44px; padding: 8px 6px; }
.board-tab .btn-main { font-size: 10.5px; }
.board-tab.is-on { border-color: var(--lime); }
.board-tab.is-on .btn-main { color: var(--lime); }

.board-list { display: flex; flex-direction: column; gap: 5px; padding: 2px; }
.board-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: var(--r-l);
  background: rgba(20, 34, 95, .5);
  color: var(--white);
}
.board-row.is-me {
  background: rgba(184, 255, 42, .1);
  box-shadow: inset 0 0 0 1.5px rgba(184, 255, 42, .5);
}
.board-rank { width: 22px; font: 700 10.5px/1 var(--ui); color: var(--dim); }
.board-who { flex: 1; min-width: 0; font: 400 14px/1 var(--display); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-sr { font: 700 8.5px/1 var(--ui); letter-spacing: 0.02em; color: var(--dim-2); }
.board-runs { font: 400 17px/1 var(--display); color: var(--lime); }
.board-balls { font: 700 9.5px/1 var(--ui); color: var(--dim); font-style: normal; }
.board-empty { padding: 22px 12px; text-align: center; font: 700 10.5px/1.5 var(--ui); letter-spacing: 0.02em; color: var(--dim); }

.board-name { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.board-input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: rgba(0, 0, 0, .25);
  color: var(--white);
  font: 400 15.5px/1 var(--display);
  letter-spacing: 0.02em;
  min-width: 0;
}
.board-input::placeholder { color: var(--dim-2); }
.board-input:focus { outline: none; border-color: var(--lime); }

/* --------------------------------------------------------------------- bowler slam */

/* The one hero moment of an over: who you are facing, where he is from, how fast, and the ball
   he is famous for. Sat between the HUD and the batter so it never covers either, and built from
   the same card grammar as every other panel: navy, hairline, --r-l, one spring in, one fade out. */
.tour-bowler {
  position: absolute;
  left: 50%;
  top: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 22px 14px;
  border-radius: var(--r-l);
  background: var(--panel-bg);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow), 0 0 42px rgba(41, 224, 255, .16);
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .22s cubic-bezier(.12, 1.5, .3, 1), visibility .22s;
  pointer-events: none;
  width: max-content;
  max-width: min(88vw, 380px);
  text-align: center;
}
.tour-bowler.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.tour-bowler .tb-flag {
  display: block;
  width: 48px;
  height: 32px;
  border-radius: var(--r-s);
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--navy-3);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.tour-bowler .tb-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-bowler .tb-body { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.tour-bowler .tb-cap { font: 800 9px/1 var(--ui); letter-spacing: 0.102em; color: var(--cyan); }
.tour-bowler .tb-name {
  font: 400 clamp(21px, 5.6vmin, 30px)/1.02 var(--display);
  letter-spacing: 0.02em;
  color: var(--white);
  text-shadow: 0 4px 16px rgba(0, 0, 0, .8);
  max-width: 100%;
  /* The hero moment names the man in full, so it wraps rather than trailing off in dots. */
  white-space: normal;
  text-wrap: balance;
}
.tour-bowler .tb-meta {
  font: 800 10px/1 var(--ui);
  letter-spacing: 0.054em;
  color: var(--dim);
  white-space: nowrap;
}
.tour-bowler .tb-sig {
  font: 800 10px/1 var(--ui);
  letter-spacing: 0.048em;
  color: #10240a;
  padding: 5px 11px 6px;
  border-radius: var(--r-pill);
  background: var(--lime);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------- menu entries */

.btn-dailybowler.is-done { opacity: .6; }

/* The tour map has to stay readable at 360: the flag, the name and the three pips are the whole
   row, so nothing is allowed to wrap or shrink below a thumb. */
@media (max-width: 400px) {
  .tour-card { padding: 11px; }
  .sc-score .sc-runs { font-size: 44.5px; }
  .sc-wagon { width: 122px; height: 122px; }
  .tour-pick-body.is-flags { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .tour-flag { min-height: 78px; padding: 9px 4px; }
  .tour-flag-name { font-size: 12px; }
  .stop-name { font-size: 14.5px; }
  .tour-stop { gap: 9px; padding: 8px 10px; }
  .sc-grid { gap: 5px; }
  .sc-stat { padding: 7px 2px; }
  .board-tab .btn-main { font-size: 9.5px; letter-spacing: 0.02em; }
}