@font-face {
  font-family: "Pixelify SF8";
  src: url("./assets/fonts/PixelifySans-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Press SF8";
  src: url("./assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #111315;
  --muted: #44484d;
  --blue: #2f8df2;
  --pale-blue: #aee0f7;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #fff;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(238, 240, 241, 0.62), rgba(238, 240, 241, 0.62)) 28px 0 / 23px 23px,
    linear-gradient(rgba(238, 240, 241, 0.34), rgba(238, 240, 241, 0.34)) 54px 83px / 11px 11px,
    radial-gradient(circle at 50% 0, rgba(219, 220, 221, 0.42), transparent 28%),
    #ffffff;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.work-player-page::before,
.work-player-page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
}

.work-player-page::before {
  top: 0;
  height: 220px;
  background:
    linear-gradient(#f0f1f2, #f0f1f2) 3% 9% / 22px 22px no-repeat,
    linear-gradient(#f3f4f4, #f3f4f4) 11% 18% / 12px 12px no-repeat,
    linear-gradient(#eceeef, #eceeef) 31% 3% / 18px 18px no-repeat,
    linear-gradient(#f2f3f3, #f2f3f3) 49% 7% / 14px 14px no-repeat,
    linear-gradient(#f3f4f4, #f3f4f4) 72% 8% / 20px 20px no-repeat,
    linear-gradient(#f0f1f2, #f0f1f2) 96% 14% / 22px 22px no-repeat;
}

.work-player-page::after {
  bottom: 0;
  height: 126px;
  background:
    linear-gradient(90deg, rgba(121, 207, 241, 0.52) 8px, transparent 8px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(121, 207, 241, 0.36) 12px, transparent 12px) 19px 20px / 67px 67px,
    linear-gradient(rgba(121, 207, 241, 0.45), rgba(121, 207, 241, 0.45)) 0 96px / 100% 30px no-repeat;
  opacity: 0.78;
}

.work-player-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: hidden;
  padding: 62px 7.8vw 128px;
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.player-brand {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.brand-arrows,
.player-brand strong,
.back-button {
  font-family: "Press SF8", "Pixelify SF8", monospace;
}

.brand-arrows {
  font-size: 17px;
  line-height: 1;
}

.player-brand strong {
  font-size: 39px;
  line-height: 1;
  letter-spacing: 0;
}

.player-brand span:last-child {
  font-size: 23px;
  font-weight: 900;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  height: 38px;
  padding: 0 22px;
  background: #fff;
  border: 2px solid #111;
  box-shadow: inset 0 -4px 0 #d6d6d6, 0 2px 0 #111;
  font-size: 18px;
  font-weight: 900;
}

.decor {
  position: absolute;
  pointer-events: none;
}

.decor-top-chevron {
  left: 54.3%;
  top: 90px;
  width: 124px;
  height: 31px;
  border-bottom: 6px solid #d4d4d4;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 15% 0, 33% 52%, 50% 26%, 67% 52%, 85% 0, 100% 0, 68% 96%, 50% 69%, 32% 96%);
}

.decor-top-mark {
  left: 63.4%;
  top: 60px;
  font-family: "Press SF8", monospace;
  font-size: 33px;
  font-weight: 900;
}

.decor-left-wing {
  left: 1.1vw;
  top: 289px;
  width: 118px;
  height: 64px;
  border-bottom: 8px solid #dadada;
  transform: skewX(12deg);
  clip-path: polygon(0 0, 26% 38%, 56% 39%, 77% 66%, 100% 31%, 100% 46%, 78% 82%, 55% 54%, 26% 53%, 0 14%);
}

.decor-left-wing::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 42px;
  width: 102px;
  height: 18px;
  background: repeating-linear-gradient(90deg, #d8d8d8 0 10px, transparent 10px 17px);
}

.decor-right-spark {
  right: 4.2vw;
  top: 224px;
  font-size: 22px;
  transform: rotate(15deg);
}

.pixel-tree {
  position: absolute;
  right: 3.4vw;
  bottom: 146px;
  width: 138px;
  height: 142px;
  background:
    linear-gradient(#7dc64f, #7dc64f) 31px 0 / 76px 20px no-repeat,
    linear-gradient(#7dc64f, #7dc64f) 18px 20px / 102px 20px no-repeat,
    linear-gradient(#7dc64f, #7dc64f) 6px 40px / 126px 25px no-repeat,
    linear-gradient(#75b946, #75b946) 0 65px / 138px 24px no-repeat,
    linear-gradient(#68aa3b, #68aa3b) 19px 89px / 100px 18px no-repeat;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.22));
}

.pixel-tree::before {
  content: "";
  position: absolute;
  left: 57px;
  bottom: 0;
  width: 34px;
  height: 56px;
  background: #9a5c2c;
  box-shadow: -13px 43px 0 -1px #9a5c2c, 23px 43px 0 -1px #9a5c2c;
}

.pixel-tree::after,
.pixel-tree i {
  content: "";
  position: absolute;
  background: #5b9b39;
}

.pixel-tree::after {
  right: 38px;
  top: 47px;
  width: 12px;
  height: 12px;
}

.pixel-tree i {
  right: 56px;
  top: 72px;
  width: 8px;
  height: 8px;
}

.player-layout {
  position: relative;
  max-width: 1562px;
  margin: 43px auto 0;
}

.video-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1562 / 727;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.035), transparent 16%),
    linear-gradient(135deg, #1a1d1d, #111313 62%, #191b1b);
  border-radius: 14px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24);
}

.big-play {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 0;
  height: 0;
  border-left: 74px solid rgba(255, 255, 255, 0.96);
  border-top: 46px solid transparent;
  border-bottom: 46px solid transparent;
  filter: drop-shadow(0 3px 8px rgba(255, 255, 255, 0.28));
  transform: translate(-37%, -50%);
}

.control-deck {
  position: absolute;
  left: 28px;
  right: 38px;
  bottom: 27px;
  color: #fff;
}

.scrub-line {
  height: 1px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.24);
}

.controls-row {
  display: grid;
  grid-template-columns: 38px 38px auto minmax(180px, 1fr) 42px 42px 42px;
  align-items: center;
  gap: 21px;
}

.control-play,
.control-volume,
.control-gear,
.control-window,
.control-fullscreen {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.control-play::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  border-left: 24px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.control-volume::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 10px;
  height: 12px;
  background: #fff;
}

.control-volume::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  width: 12px;
  height: 20px;
  border: 4px solid #fff;
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

.timecode {
  font-size: 22px;
  white-space: nowrap;
}

.progress-track {
  position: relative;
  display: block;
  height: 5px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 10px;
}

.progress-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 36%;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}

.progress-track i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-radius: 50%;
  transform: translateY(-50%);
}

.control-gear::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 7px dotted #fff;
  border-radius: 50%;
}

.control-gear::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: #fff;
  border-radius: 50%;
}

.control-window::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 31px;
  height: 22px;
  border: 5px solid #fff;
  border-radius: 3px;
}

.control-fullscreen::before {
  content: "";
  position: absolute;
  inset: 3px;
  background:
    linear-gradient(#fff, #fff) 0 0 / 12px 4px no-repeat,
    linear-gradient(#fff, #fff) 0 0 / 4px 12px no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / 12px 4px no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / 4px 12px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 12px 4px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 4px 12px no-repeat,
    linear-gradient(#fff, #fff) 100% 100% / 12px 4px no-repeat,
    linear-gradient(#fff, #fff) 100% 100% / 4px 12px no-repeat;
}

.video-info {
  margin-top: 45px;
  max-width: 760px;
}

.video-info h1 {
  margin: 0 0 18px;
  font-family: "Press SF8", "Pixelify SF8", monospace;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.video-info p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
}

.author-row {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #3f454b;
  font-size: 18px;
}

.avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 58% 48%, #f3b071 0 8px, transparent 9px),
    radial-gradient(circle at 38% 42%, #174b77 0 11px, transparent 12px),
    linear-gradient(135deg, #20a9ef, #ffd66d);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dot {
  font-weight: 900;
}

@media (max-width: 1120px) {
  .work-player-shell {
    padding: 34px 24px 104px;
  }

  .player-brand {
    gap: 12px;
  }

  .brand-arrows {
    display: none;
  }

  .player-brand strong {
    font-size: 29px;
  }

  .player-brand span:last-child {
    font-size: 18px;
  }

  .player-layout {
    margin-top: 35px;
  }

  .video-stage {
    min-height: auto;
  }

  .pixel-tree {
    opacity: 0.34;
    right: -28px;
    bottom: 98px;
    transform: scale(0.72);
  }

  .controls-row {
    grid-template-columns: 32px 30px auto minmax(120px, 1fr) 32px 32px 32px;
    gap: 12px;
  }

  .timecode {
    font-size: 17px;
  }

  .video-info h1 {
    font-size: 21px;
  }
}

@media (max-width: 640px) {
  .work-player-shell {
    padding: 22px 14px 88px;
  }

  .player-header {
    align-items: flex-start;
  }

  .player-brand {
    display: grid;
    gap: 7px;
  }

  .player-brand strong {
    font-size: 24px;
  }

  .back-button {
    min-width: 74px;
    height: 34px;
    padding: 0 14px;
    font-size: 15px;
  }

  .decor-top-mark,
  .decor-top-chevron,
  .decor-left-wing,
  .decor-right-spark {
    display: none;
  }

  .video-stage {
    aspect-ratio: 16 / 9;
    border-radius: 9px;
  }

  .big-play {
    border-left-width: 42px;
    border-top-width: 27px;
    border-bottom-width: 27px;
  }

  .control-deck {
    left: 13px;
    right: 13px;
    bottom: 13px;
  }

  .scrub-line {
    margin-bottom: 12px;
  }

  .controls-row {
    grid-template-columns: 22px 22px auto 1fr;
    gap: 9px;
  }

  .control-play,
  .control-volume,
  .control-gear,
  .control-window,
  .control-fullscreen {
    width: 22px;
    height: 22px;
  }

  .control-gear,
  .control-window,
  .control-fullscreen {
    display: none;
  }

  .control-play::before {
    border-left-width: 17px;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }

  .control-volume::before {
    top: 7px;
    width: 8px;
    height: 9px;
  }

  .control-volume::after {
    left: 10px;
    top: 5px;
    width: 8px;
    height: 13px;
    border-width: 3px;
  }

  .timecode {
    font-size: 13px;
  }

  .video-info {
    margin-top: 25px;
  }

  .video-info h1 {
    font-size: 18px;
  }

  .video-info p,
  .author-row {
    font-size: 14px;
  }
}