/* FireRed mode page. Every colour and size is a token here. */
:root {
  --fr-page: #101014;
  --fr-panel: #1c1824;
  --fr-button: #2a2234;
  --fr-button-hover: #3a3048;
  --fr-text: #e8e8d8;
  --fr-muted: #9a96a8;
  --fr-pass: #7ad67a;
  --fr-fail: #f07070;
  --fr-focus: #f8d048;
  --fr-screen-bg: #000000;
  --fr-gap: 12px;
  --fr-gap-small: 8px;
  --fr-button-pad: 14px;
  --fr-radius: 8px;
  --fr-screen-scale: 3;
  --fr-screen-width: 240px;
  --fr-debug-width: 26rem;
  --fr-target: 44px;
  --fr-overlay-bg: #101014;
  --fr-band-bg: #1c1824;
  --fr-band-height: auto;
  --fr-band-gap: 24px;
  --fr-frame-pad: 8px;
  --fr-modal-scrim: rgba(16, 16, 20, 0.9);
  --fr-key-size: 22px;
  --fr-key-font: 0.875rem;
  --fr-wipe-ms: 350ms;
  --fr-fade-ms: 250ms;
  --fr-dots-ms: 1200ms;
  --fr-prompt-bg: rgba(16, 16, 20, 0.88);
  --fr-toast-bg: #2f6f3a;
  --fr-toast-error-bg: #8a2f2f;
  --fr-toast-offset: 24px;
  --fr-cooldown-shade: rgba(0, 0, 0, 0.6);
  --fr-move-stripe: 4px;
  --fr-control-max: 900px;
  --fr-control-target: 56px;
  --fr-control-font: 1.15rem;
  --fr-segment-pad: 4px;
  --fr-type-icon: 22px;
}

[hidden] { display: none !important; }

html, body { margin: 0; background: var(--fr-page); color: var(--fr-text); font-family: system-ui, sans-serif; }

.fr-head { display: flex; align-items: center; gap: var(--fr-gap); padding: var(--fr-gap); }
.fr-head h1 { margin: 0; font-size: 1.4rem; }
.fr-back { color: var(--fr-muted); }

.fr-main { display: flex; flex-wrap: wrap; gap: var(--fr-gap); padding: 0 var(--fr-gap) var(--fr-gap); align-items: flex-start; }
.fr-play { display: flex; flex-direction: column; gap: var(--fr-gap); max-width: 100%; }

.fr-screen {
  width: calc(var(--fr-screen-width) * var(--fr-screen-scale));
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  image-rendering: pixelated;
  background: var(--fr-screen-bg);
}

.fr-status { margin: 0; min-height: 1.4em; }
.fr-hint { margin: 0; color: var(--fr-muted); font-size: 0.9rem; }

.fr-tools { display: flex; flex-wrap: wrap; gap: var(--fr-gap-small); }
.fr-mode { display: inline-flex; align-items: center; gap: var(--fr-gap-small); }
.fr-mode-label { font-weight: 600; }
.fr-mode-options { display: inline-flex; padding: var(--fr-segment-pad); border-radius: var(--fr-radius); background: var(--fr-button); }
.fr-tools .fr-mode-option { background: transparent; color: var(--fr-muted); }
.fr-tools .fr-mode-option[aria-pressed="true"] { background: var(--fr-focus); color: var(--fr-page); font-weight: 600; }
.fr-tools button {
  min-height: var(--fr-target);
  padding: 0 var(--fr-button-pad);
  border: 0;
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.fr-tools button:hover { background: var(--fr-button-hover); }
.fr-tools button:focus-visible, .fr-back:focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; }

.fr-debug {
  flex: 1 1 var(--fr-debug-width);
  min-width: 0;
  padding: var(--fr-gap);
  border-radius: var(--fr-radius);
  background: var(--fr-panel);
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}
.fr-debug h2, .fr-debug h3, .fr-debug h4 { margin: 0.6em 0 0.3em; font-family: system-ui, sans-serif; }
.fr-info { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--fr-gap); margin: 0; }
.fr-info dt { color: var(--fr-muted); }
.fr-info dd { margin: 0; overflow-wrap: anywhere; }
.fr-debug :is(.fr-party, .fr-test, .fr-log) { margin: 0; padding-left: 1.2em; }
.fr-pass { color: var(--fr-pass); }
.fr-fail { color: var(--fr-fail); }

.fr-screen-wrap { position: relative; max-width: 100%; }
.fr-prompt {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-gap-small);
  padding: var(--fr-gap);
  background: var(--fr-prompt-bg);
}
.fr-prompt-text { margin: 0; font-size: 1.1rem; }
.fr-prompt-buttons { display: flex; flex-wrap: wrap; gap: var(--fr-gap-small); }
.fr-prompt-buttons :where(button) {
  min-height: var(--fr-target);
  padding: 0 var(--fr-button-pad);
  border: 0;
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
}
.fr-prompt-buttons :where(button):hover { background: var(--fr-button-hover); }
.fr-prompt-buttons :where(button):focus-visible, .fr-prompt-buttons :where(button)[data-selected] { outline: 2px solid var(--fr-focus); outline-offset: 2px; }

/* Our battle owns the whole page, opaque, in one frame (overlay.js):
   - a wide screen: the top bar (fast forward, the page's chat), the arena
     as large as fits, and one command band under it: the party left, the
     moves in the middle, Çanta and Yakala right;
   - a phone held sideways (battle-tools.css): the party a column left, the
     arena in the middle, the right thumb's column with fast forward, Çanta
     and Yakala over the moves at the bottom;
   - an upright phone: the top bar, the HP panels over the arena, then the
     party, Çanta and Yakala, and the moves at the bottom.
   The canvas sizes come from battle-view.js, which fits the arena into
   .fr-stage-box and sets --fr-arena-width, --fr-arena-height and
   --fr-hud-top (the HP panels' band above it). */
.fr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template: "top top top" auto "stage stage stage" minmax(0, 1fr) "party moves actions" var(--fr-band-height) / minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--fr-gap-small) var(--fr-band-gap);
  box-sizing: border-box;
  padding: var(--fr-frame-pad);
  background: var(--fr-overlay-bg);
}
/* The command band's surface, behind its three groups. */
.fr-overlay::before {
  content: '';
  grid-area: party / party / actions / actions;
  margin: 0 calc(-1 * var(--fr-frame-pad)) calc(-1 * var(--fr-frame-pad));
  background: var(--fr-band-bg);
}
.fr-stage-box { grid-area: stage; position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; contain: size; }
.fr-stage { position: relative; }
.fr-arena { display: block; image-rendering: pixelated; }
.fr-hud { position: absolute; inset: 0; pointer-events: none; }
.fr-battle-top { grid-area: top; display: flex; align-items: center; justify-content: flex-end; gap: var(--fr-gap-small); min-height: var(--fr-target); }
/* Our battle's fast forward: lit while fast with the factor as a badge,
   disabled in lockstep battles. Yakala (with the reason when it cannot be
   used) stands with Çanta (battle-tools.css). */
.fr-battle-tools { display: flex; align-items: center; gap: var(--fr-gap-small); }
/* A key's badge in a button's top left corner (Q W E R, T, Y, Boşluk, the
   party's digits); a touch screen has no keys. */
.fr-key-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: var(--fr-key-size);
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: var(--fr-radius);
  background: var(--fr-page);
  color: var(--fr-text);
  font-size: var(--fr-key-font);
  font-weight: 700;
  line-height: var(--fr-key-size);
  text-align: center;
  pointer-events: none;
}
@media (hover: none) and (pointer: coarse) {
  .fr-key-badge { display: none; }
}
/* The frame wipes in when a battle starts and fades out to the overworld. */
@media (prefers-reduced-motion: no-preference) {
  .fr-overlay[data-entering] { animation: fr-wipe-in var(--fr-wipe-ms) ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-overlay[data-entering] { animation: fr-fade-in var(--fr-fade-ms) ease-out; }
}
.fr-overlay[data-leaving] { animation: fr-fade-out var(--fr-fade-ms) ease-in forwards; pointer-events: none; }
@keyframes fr-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
@keyframes fr-fade-in {
  from { opacity: 0; }
}
@keyframes fr-fade-out {
  to { opacity: 0; }
}
/* After a covered fight: the map is coming (after-fight.js); before a fight:
   its sprites still load (overlay.js). */
.fr-return-hint {
  position: absolute;
  left: 50%;
  bottom: var(--fr-gap);
  transform: translateX(-50%);
  padding: var(--fr-gap-small) var(--fr-button-pad);
  border-radius: var(--fr-radius);
  background: var(--fr-modal-scrim);
  color: var(--fr-text);
  font-size: var(--fr-control-font);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.fr-return-hint[hidden] { display: none; }
.fr-return-hint::after { content: '...'; display: inline-block; width: 1.5em; text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .fr-return-hint::after { animation: fr-dots var(--fr-dots-ms) steps(1) infinite; }
}
@keyframes fr-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}
.fr-catch-now {
  position: relative;
  min-height: var(--fr-target);
  padding: 0 var(--fr-button-pad);
  border: 0;
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
}
.fr-catch-now:disabled { opacity: 0.5; cursor: default; }
.fr-speed {
  position: relative;
  min-width: var(--fr-target);
  min-height: var(--fr-target);
  border: 0;
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.fr-speed::before { content: '\25B6\25B6'; }
.fr-speed[aria-pressed="true"] { outline: 2px solid var(--fr-focus); }
.fr-speed:disabled { opacity: 0.5; cursor: default; }
/* Savaştan çık at the start of the top bar (battle-exit.js): a cross, and
   "Emin misin?" in the fail colour while a second tap would leave. A way
   out at any moment, so it stays above the battle's question and the bag's
   scrim (battle-tools.css). */
.fr-exit {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fr-gap-small);
  min-width: var(--fr-target);
  min-height: var(--fr-target);
  margin-right: auto;
  border: 0;
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.fr-exit::before { content: '\2715'; }
.fr-exit[data-armed] { padding: 0 var(--fr-button-pad); background: var(--fr-fail); color: var(--fr-page); font-weight: 700; }
.fr-exit[data-armed]::before { content: none; }
.fr-exit:disabled { opacity: 0.5; cursor: default; }
.fr-exit-text[hidden] { display: none; }
.fr-speed-badge { display: none; margin-left: var(--fr-gap-small); font-weight: 700; }
.fr-speed[aria-pressed="true"] .fr-speed-badge { display: inline; }

/* Control mode: the player's moves, the middle of the command band. */
.fr-control {
  grid-area: moves;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
  gap: var(--fr-gap-small);
  max-width: var(--fr-control-max);
}
.fr-control-title { flex-basis: 100%; margin: 0; text-align: center; color: var(--fr-text); font-weight: 600; text-shadow: 0 1px 2px var(--fr-page); }
.fr-control-move {
  --fr-cooldown: 0;
  --fr-move-color: var(--fr-button);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--fr-gap-small);
  min-height: var(--fr-control-target);
  padding: 0 var(--fr-button-pad);
  border: 0;
  border-left: var(--fr-move-stripe) solid var(--fr-move-color);
  border-radius: var(--fr-radius);
  background: var(--fr-button);
  color: var(--fr-text);
  font: inherit;
  font-size: var(--fr-control-font);
  cursor: pointer;
  touch-action: manipulation;
}
/* The cooldown sweep sits behind the label, so the name stays readable. */
.fr-control-move::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform-origin: left;
  transform: scaleX(var(--fr-cooldown));
  background: var(--fr-cooldown-shade);
  pointer-events: none;
}
.fr-control-move:hover { background: var(--fr-button-hover); }
.fr-control-move[aria-disabled="true"] { color: var(--fr-muted); cursor: default; }
.fr-control-move.fr-control-ordered { outline: 2px solid var(--fr-focus); }
.fr-control-key { color: var(--fr-muted); }
.fr-control-type { width: var(--fr-type-icon); height: auto; }
.fr-control-info { color: var(--fr-muted); font-size: 0.85em; }
/* The cooldown's seconds after the PP; why a press did nothing, over the button. */
.fr-control-name[data-long] { font-size: 0.85em; }
.fr-control-wait { color: var(--fr-muted); font-size: 0.85em; }
.fr-control-note:empty { display: none; }
.fr-control-note { position: absolute; inset: 0; display: grid; place-items: center; background: var(--fr-cooldown-shade); }
/* A touch screen without a keyboard has no use for the key hints. */
@media (hover: none) and (pointer: coarse) {
  .fr-control-title, .fr-control-key { display: none; }
}

.fr-toast {
  position: fixed;
  left: 50%;
  bottom: var(--fr-toast-offset);
  z-index: 20;
  margin: 0;
  padding: var(--fr-gap-small) var(--fr-gap);
  border-radius: var(--fr-radius);
  background: var(--fr-toast-bg);
  color: var(--fr-text);
  transform: translateX(-50%);
}
.fr-toast-error { background: var(--fr-toast-error-bg); }