/* ==========================================================================
   desktop.css - boot screen, welcome screen, desktop, taskbar, Start menu,
   and the league's own views (pitch, market, table).
   ========================================================================== */

/* --- boot ----------------------------------------------------------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: #000;
  color: #fff;
  animation: boot-out .5s ease-in 2.1s forwards;
}
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
.boot.instant { animation: none; opacity: 0; visibility: hidden; }

.boot-logo { display: flex; align-items: center; gap: 14px; }
.boot-word { display: flex; flex-direction: column; line-height: 1.05; }
.boot-brand   { font-size: 15px; letter-spacing: .4px; }
.boot-product { font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.boot-product sup { font-size: 11px; font-weight: 400; vertical-align: super; }

.boot-bar {
  width: 180px; height: 14px;
  border: 2px solid #9a9a9a;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}
.boot-bar-slider {
  width: 40px; height: 100%;
  border-radius: 6px;
  background: linear-gradient(to right, #0b2a6b, #2f6fd0, #6fb2ff);
  animation: boot-slide 1.6s linear infinite;
}
@keyframes boot-slide { from { transform: translateX(-42px); } to { transform: translateX(182px); } }

.boot-footer { position: absolute; bottom: 40px; font-size: 11px; color: #9a9a9a; }

/* --- welcome screen ------------------------------------------------------- */

.welcome {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #5a91e8 0%, #1b52b5 55%, #12388a 100%);
  color: #fff;
}
.welcome-bar {
  flex: none;
  height: 78px;
  position: relative;
  display: flex;
  align-items: center;
}
.welcome-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: linear-gradient(to right, #2c5cbe, #82b4ff 12%, #f6f9ff 50%, #82b4ff 88%, #2c5cbe);
  box-shadow: 0 0 8px rgba(160, 200, 255, .8);
}
.welcome-bar-top    { background: linear-gradient(to bottom, #003ba7, #1a5ac6); }
.welcome-bar-top::before    { bottom: 0; }
.welcome-bar-bottom { background: linear-gradient(to top, #003ba7, #1a5ac6); }
.welcome-bar-bottom::before { top: 0; }

.welcome-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 0 42px;
  padding: 24px 6vw;
}
.welcome-left { justify-self: end; max-width: 300px; text-align: right; }
.welcome-logo { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.welcome-brand   { font-size: 20px; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,.4); }
.welcome-edition { font-size: 12px; color: #cfe0ff; }
.welcome-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(to left, rgba(255,255,255,.75), rgba(255,255,255,0));
}
.welcome-hint { margin: 0; font-size: 15px; line-height: 1.4; text-shadow: 1px 1px 3px rgba(0,0,0,.35); }

.welcome-body::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.6) 50%, rgba(255,255,255,0));
}
/* Explicit column: the divider pseudo-element is placed in column 2, so the
   tiles must be pinned to column 3 or auto-placement squeezes them into it. */
.welcome-right { grid-column: 3; grid-row: 1; overflow-y: auto; max-height: 100%; padding: 8px 0; }

.tiles { list-style: none; margin: 0; padding: 0; max-width: 330px; }
.tiles li { margin: 2px 0; }
.tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.tile:hover, .tile:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .35);
  outline: none;
}
.tile.active { background: rgba(255, 255, 255, .22); border-color: rgba(255,255,255,.55); }
.tile-avatar {
  width: 48px; height: 48px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #dce9ff center/cover no-repeat;
  flex: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.tile-names { min-width: 0; }
.tile-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
}
.tile-team { display: block; font-size: 11px; color: #d3e3ff; }

.tile-login { margin: 4px 0 0 60px; display: none; }
.tile-login.open { display: block; }
.tile-login form { display: flex; align-items: center; gap: 6px; }
.tile-login input {
  flex: 1;
  min-width: 0;
  height: 22px;
  border: 1px solid #7f9db9;
  color: #000;
}
.tile-go {
  width: 26px; height: 22px;
  border: 1px solid #1a5f1a;
  border-radius: 3px;
  background: linear-gradient(to bottom, #7bd455, #3f9e21 55%, #2c7d15);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.tile-error {
  margin: 5px 0 0;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(180, 20, 20, .55);
  font-size: 11px;
}
.welcome-note { padding: 6px 6vw 0; font-size: 11px; color: #cfe0ff; }

/* --- desktop -------------------------------------------------------------- */

.desktop {
  position: fixed;
  inset: 0;
  background: #3a6ea5 url("../img/bliss.svg") center/cover no-repeat;
  overflow: hidden;
}

.icons {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  height: calc(100% - 34px);
  width: min-content;
}
.icon-button {
  width: 82px;
  padding: 5px 3px 6px;
  border: 1px dotted transparent;
  background: none;
  color: #fff;
  text-align: center;
  cursor: default;
  display: block;
}
.icon-button img { width: 32px; height: 32px; display: block; margin: 0 auto 4px; }
.icon-button span {
  display: inline-block;
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .85);
}
.icon-button:hover span { background: rgba(49, 106, 197, .45); }
.icon-button:focus-visible { border-color: #fff; outline: none; }
.icon-button.selected span { background: var(--select); text-shadow: none; }

.windows { position: absolute; inset: 0 0 30px 0; pointer-events: none; }
.windows .window { pointer-events: auto; }

/* --- taskbar -------------------------------------------------------------- */

.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  z-index: 5000;
  background: linear-gradient(to bottom,
    #245edb 0%, #3f8cf3 9%, #245edb 18%, #1941a5 92%, #172e7f 100%);
  border-top: 1px solid #4d90ff;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 22px 2px 8px;
  border: none;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(to bottom, #5eac56 0%, #3c8b1a 12%, #379c1d 45%, #2e7d16 92%, #245f10 100%);
  color: #fff;
  cursor: default;
  flex: none;
}
.start-button:hover  { filter: brightness(1.1); }
.start-button:active,
.start-button.open   { filter: brightness(.88); box-shadow: inset 2px 2px 4px rgba(0,0,0,.35); }
.start-label {
  font: italic 700 15px/1 Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.task-list { flex: 1; display: flex; align-items: center; gap: 3px; min-width: 0; padding: 3px 2px; }
.task-item {
  flex: 0 1 160px;
  min-width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid #1c4bb5;
  border-radius: 2px;
  background: linear-gradient(to bottom, #4b8ef5, #2a68e0 12%, #1e56cc);
  color: #fff;
  cursor: default;
  overflow: hidden;
}
.task-item img { width: 16px; height: 16px; flex: none; }
.task-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item:hover { filter: brightness(1.12); }
.task-item.active {
  background: linear-gradient(to bottom, #1c48a8, #2a5fc4 12%, #366fd6);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .45);
  font-weight: 700;
}

.tray {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  background: linear-gradient(to bottom, #1290e9 0%, #16a2f0 9%, #0d8bd8 18%, #0d76c4 92%, #0a5fa8 100%);
  border-left: 1px solid #16a2f0;
  color: #fff;
}
.tray-clock { font-size: 11px; }
.tray-sync {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #8fd66a;
  box-shadow: 0 0 4px rgba(140, 255, 120, .8);
}
.tray-sync.busy  { background: #ffd35a; animation: pulse 1s ease-in-out infinite; }
.tray-sync.error { background: #ff7060; }
@keyframes pulse { 50% { opacity: .35; } }

/* --- Start menu ----------------------------------------------------------- */

.start-menu {
  position: absolute;
  left: 2px;
  bottom: 30px;
  width: 340px;
  z-index: 5500;
  border: 1px solid #0b3fb5;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 3px -2px 14px rgba(0, 0, 0, .45);
  animation: rise .12s ease-out;
}
@keyframes rise { from { transform: translateY(12px); opacity: .3; } }

.start-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(to bottom, #1868d6, #0b47b0);
  border-bottom: 2px solid #ff9a00;
  color: #fff;
}
.start-avatar {
  width: 34px; height: 34px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #dce9ff center/cover no-repeat;
  flex: none;
}
.start-user { font-size: 14px; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }

.start-body { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.start-programs, .start-places {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.start-places { background: #d3e5fa; }
.start-body li.sep { height: 1px; margin: 4px 6px; background: #b6cfe8; }
.start-body button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 7px;
  border: none;
  border-radius: 3px;
  background: none;
  text-align: left;
  cursor: default;
}
.start-body button img { width: 20px; height: 20px; }
.start-places button { font-weight: 700; }
.start-body button:hover { background: #2f66c9; color: #fff; }

.start-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px;
  background: linear-gradient(to bottom, #1868d6, #0b47b0);
}
.start-logoff {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border: none;
  border-radius: 3px;
  background: none;
  color: #fff;
  cursor: default;
}
.start-logoff:hover { background: rgba(255, 255, 255, .18); }

/* --- My Team: the pitch --------------------------------------------------- */

.team-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid #c8c4b4;
  background: linear-gradient(to bottom, #fbfaf6, #ebe8d9);
}

/* My Team fills its window: toolbar, then pitch taking the slack, then bench. */
.team-layout { display: flex; flex-direction: column; height: 100%; }

.pitch {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  padding: 14px 8px 10px;
  overflow: auto;
  background:
    repeating-linear-gradient(to bottom,
      #2e8b32 0 34px, #2a8130 34px 68px);
  border-bottom: 3px solid #1d5f22;
  min-height: 260px;
}
.pitch::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 128px; height: 46px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, .5);
  border-top: none;
}
.pitch::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 78%; height: 0;
  transform: translateX(-50%);
  border-top: 2px solid rgba(255, 255, 255, .28);
}

.pitch-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.bench {
  flex: none;
  padding: 8px;
  background: linear-gradient(to bottom, #d8d4c4, #c9c5b3);
}
.bench-label {
  font-weight: 700;
  color: #4a4736;
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.shirt {
  width: 76px;
  padding: 0 0 3px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
  position: relative;
}
.shirt:hover     { background: rgba(255, 255, 255, .18); }
.shirt.selected  { background: rgba(255, 235, 120, .35); outline: 2px solid #ffd94a; }
.shirt.swap-target { outline: 2px dashed #ffffff; }
.bench .shirt { color: #2c2a22; }

.shirt-kit {
  display: block;
  width: 42px; height: 42px;
  margin: 2px auto 5px;
  border-radius: 4px 4px 6px 6px;
  position: relative;
  background: var(--kit, #dddddd);
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .18), 0 1px 2px rgba(0,0,0,.3);
}
.shirt-kit::before, .shirt-kit::after {
  content: "";
  position: absolute;
  top: 0;
  width: 9px; height: 15px;
  background: inherit;
  border-radius: 3px;
}
.shirt-kit::before { left: -6px; transform: skewY(14deg); }
.shirt-kit::after  { right: -6px; transform: skewY(-14deg); }
.shirt-kit .collar {
  position: absolute;
  left: 50%; top: 0;
  width: 14px; height: 7px;
  transform: translateX(-50%);
  border-radius: 0 0 7px 7px;
  background: rgba(0, 0, 0, .22);
}

.shirt-name {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.bench .shirt-name { text-shadow: none; }
.shirt-meta {
  display: block;
  font-size: 9px;
  opacity: .92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.bench .shirt-meta { text-shadow: none; opacity: .75; }

.shirt-badge {
  position: absolute;
  top: 0; right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #000;
  background: #ffd94a;
  border: 1px solid #a8860a;
}
.shirt-badge.vice { background: #cfe0f7; border-color: #6d92cd; }
.shirt-flag {
  position: absolute;
  top: 0; left: 8px;
  width: 15px; height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  background: #d33;
  color: #fff;
  border: 1px solid #7a1010;
}
.shirt-flag.doubt { background: #f0a020; border-color: #8a5a05; }

/* --- Transfer Market ------------------------------------------------------ */

.market { display: flex; flex-direction: column; height: 100%; }
.market-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid #c8c4b4;
  background: linear-gradient(to bottom, #fbfaf6, #ebe8d9);
}
.market-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 230px; }
.market-list { min-height: 0; overflow: auto; border-right: 1px solid #c8c4b4; background: #fff; }
.market-side { padding: 8px; overflow: auto; background: var(--face); }

.budget-bar {
  height: 14px;
  border: 1px solid var(--field-border);
  background: #fff;
  padding: 1px;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.1);
}
.budget-fill {
  height: 100%;
  background: linear-gradient(to bottom, #7ad14f, #3f9e21);
  transition: width .2s;
}
.budget-fill.over { background: linear-gradient(to bottom, #e77, #c22); }

.squad-mini { list-style: none; margin: 6px 0 0; padding: 0; }
.squad-mini li {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid #e2dfd2;
}
.squad-mini li .pos { width: 26px; color: #6d6d6d; }
.squad-mini li .nm  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- League table --------------------------------------------------------- */

.table-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid #c8c4b4;
  background: linear-gradient(to bottom, #fbfaf6, #ebe8d9);
}
.rank-avatar {
  width: 24px; height: 24px;
  border: 1px solid #9aa; border-radius: 3px;
  background: #dce9ff center/cover no-repeat;
  flex: none;
}
.medal { font-weight: 700; }
.medal-1 { color: #b8860b; }
.medal-2 { color: #808080; }
.medal-3 { color: #a0522d; }

/* --- Notepad -------------------------------------------------------------- */

.notepad-menu {
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  border-bottom: 1px solid #d6d2c2;
  background: var(--face);
}
.notepad-menu span { padding: 2px 7px; cursor: default; }
.notepad-menu span:hover { background: var(--select); color: #fff; }
.notepad-text {
  width: 100%;
  height: 100%;
  padding: 4px 6px;
  border: none;
  background: #fff;
  font: 12px/1.45 "Lucida Console", "DejaVu Sans Mono", monospace;
  white-space: pre-wrap;
  overflow: auto;
}

/* --- Control Panel -------------------------------------------------------- */

.cpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cpl-tile {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255,255,255,.5);
  cursor: default;
  text-align: left;
}
.cpl-tile:hover { border-color: #a8c4ea; background: #eaf1fb; }
.cpl-tile img { width: 28px; height: 28px; }

.log-line { font-family: "Lucida Console", monospace; font-size: 10px; white-space: nowrap; }
.log-ok    { color: #1a6b1a; }
.log-error { color: #b31414; }
.log-skip  { color: #6d6d6d; }

/* --- small screens -------------------------------------------------------- */

@media (max-width: 720px) {
  .welcome-body { grid-template-columns: 1fr; gap: 18px; padding: 16px 6vw; align-content: center; }
  .welcome-body::after { display: none; }
  .welcome-left  { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; max-width: none; }
  .welcome-right { grid-column: 1; grid-row: 2; }
  .welcome-bar { height: 54px; }
  .welcome-logo { justify-content: center; }
  .welcome-divider { background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); }
  .tiles { max-width: none; }
  .market-split { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .market-side { max-height: 190px; border-top: 1px solid #c8c4b4; }
  .icons { display: none; }
  .shirt { width: 62px; }
  .shirt-kit { width: 34px; height: 34px; }
}