.yj-arrow-game {
  --arrow-cyan: #55dfff;
  --arrow-green: #53f0ae;
  position: relative;
  color: #eaf8ff;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: clamp(10px, 2.4vw, 24px);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.yj-arrow-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(8px, 2vw, 18px);
  align-items: stretch;
  margin-bottom: 10px;
}

.yj-arrow-hud > div {
  min-width: 0;
  border: 1px solid rgba(91, 219, 255, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(12, 34, 48, .96), rgba(4, 16, 26, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 10px 28px rgba(0, 0, 0, .18);
  padding: 10px 13px;
}

.yj-arrow-hud small,
.yj-arrow-hud span {
  display: block;
  color: #7894a4;
  font-size: 10px;
  letter-spacing: .08em;
}

.yj-arrow-hud strong,
.yj-arrow-hud b {
  display: block;
  margin-top: 3px;
  color: #f3fbff;
  font-size: clamp(14px, 3.5vw, 19px);
  white-space: nowrap;
}

.yj-arrow-meter,
.yj-arrow-timer { text-align: center; min-width: 82px !important; }
.yj-arrow-meter b { color: var(--arrow-green); }
.yj-arrow-timer b { color: #ffd061; font-family: ui-monospace, "Roboto Mono", monospace; }
.yj-arrow-timer b.is-low { color: #ff645d; animation: yj-arrow-pulse .7s ease-in-out infinite alternate; }

.yj-arrow-board-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(83, 216, 255, .3);
  border-radius: clamp(16px, 4vw, 26px);
  background: #04101a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36), inset 0 0 70px rgba(51, 179, 226, .04);
}

.yj-arrow-board-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(91, 225, 255, .045) 50%, transparent 65%);
  animation: yj-arrow-scan 6s linear infinite;
}

.yj-arrow-status {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  font-size: 11px;
}

.yj-arrow-status span {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(95, 220, 255, .18);
  background: rgba(3, 14, 23, .78);
  backdrop-filter: blur(7px);
}

#yj-arrow-combo { color: #ffd065; font-family: ui-monospace, monospace; font-weight: 800; }
#yj-arrow-message { color: #9eb6c4; text-align: right; }
#yj-arrow-message[data-state="good"] { color: #70f5c2; }
#yj-arrow-message[data-state="bad"] { color: #ff8179; }

.yj-arrow-canvas {
  display: block;
  width: 100%;
  height: clamp(490px, 118vw, 700px);
  max-height: 70svh;
  min-height: 450px;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.yj-arrow-board-glow {
  position: absolute;
  z-index: 2;
  inset: auto 14% -45px;
  height: 80px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(83, 240, 174, .16), transparent 68%);
}

.yj-arrow-unlock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  width: min(86%, 470px);
  padding: 13px 16px;
  border: 1px solid rgba(255, 211, 90, .72);
  border-radius: 16px;
  color: #f5fbff;
  background: linear-gradient(135deg, rgba(12, 34, 48, .97), rgba(9, 24, 32, .97));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42), 0 0 28px rgba(255, 211, 90, .14), inset 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
  transform: translate(-50%, 18px) scale(.94);
  opacity: 0;
}

.yj-arrow-unlock.is-showing { animation: yj-arrow-unlock 1.8s ease both; }
.yj-arrow-unlock small { display: block; color: #ffd35a; font-size: 9px; letter-spacing: .2em; }
.yj-arrow-unlock strong { display: block; margin-top: 3px; color: #fff3bd; font-size: 14px; }
.yj-arrow-unlock p { margin: 5px 0 0; color: #dcecf2; font-size: 11px; line-height: 1.55; }

.yj-arrow-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.yj-arrow-actions button {
  appearance: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(84, 216, 255, .2);
  border-radius: 13px;
  color: #e8f7ff;
  background: linear-gradient(145deg, rgba(13, 38, 53, .98), rgba(4, 18, 28, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  cursor: pointer;
}

.yj-arrow-actions button:active { transform: translateY(1px) scale(.985); }
.yj-arrow-actions button.is-catching { animation: yj-arrow-knowledge-catch .52s ease-out both; }
.yj-arrow-actions i { color: var(--arrow-cyan); font-size: 22px; font-style: normal; }
.yj-arrow-actions span { font-size: 12px; font-weight: 700; }
.yj-arrow-actions small { display: block; color: #7894a4; font-size: 9px; font-weight: 400; margin-top: 2px; }

.yj-arrow-fly-knowledge {
  position: absolute;
  z-index: 24;
  display: block;
  padding: 6px 10px;
  border: 1px solid rgba(255, 226, 125, .9);
  border-radius: 999px;
  color: #fff4b6;
  background: rgba(9, 30, 38, .96);
  box-shadow: 0 0 10px rgba(255, 218, 95, .7), 0 0 26px rgba(83, 240, 174, .45);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}

.yj-arrow-lesson {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(83, 240, 174, .16);
  border-radius: 13px;
  background: rgba(7, 28, 31, .72);
}

.yj-arrow-lesson i {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  color: #061a17;
  background: var(--arrow-green);
  display: grid;
  place-items: center;
  font: 800 12px/1 system-ui;
}

.yj-arrow-lesson p { margin: 0; color: #9cb6b6; font-size: 11px; line-height: 1.65; }

.yj-arrow-knowledge-modal {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(1, 8, 14, .83);
  backdrop-filter: blur(9px);
}

.yj-arrow-knowledge-modal[hidden],
.yj-arrow-unlock[hidden] { display: none !important; }

.yj-arrow-knowledge-modal > section {
  width: min(100%, 680px);
  max-height: min(78svh, 650px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(83, 240, 174, .42);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(12, 39, 48, .99), rgba(4, 17, 27, .99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 38px rgba(83, 240, 174, .08);
  animation: yj-arrow-panel-in .24s ease-out both;
}

.yj-arrow-knowledge-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(83, 240, 174, .13);
}

.yj-arrow-knowledge-modal header small { color: #53f0ae; font-size: 9px; letter-spacing: .14em; }
.yj-arrow-knowledge-modal h3 { margin: 3px 0 0; color: #f1fbff; font-size: clamp(17px, 4vw, 24px); }
.yj-arrow-knowledge-modal header button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(119, 216, 236, .25);
  border-radius: 50%;
  color: #cce7f0;
  background: rgba(4, 18, 28, .85);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.yj-arrow-knowledge-note { margin: 0; padding: 10px 18px; color: #9eb8c1; font-size: 10px; }
.yj-arrow-knowledge-modal ol {
  min-height: 90px;
  margin: 0;
  padding: 2px 18px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: auto;
  list-style: none;
}

.yj-arrow-knowledge-modal li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(79, 210, 230, .13);
  border-radius: 11px;
  background: rgba(6, 24, 34, .82);
}

.yj-arrow-knowledge-modal li b { color: #ffd35a; font: 800 10px/1.55 ui-monospace, monospace; }
.yj-arrow-knowledge-modal li span { color: #d7e8ed; font-size: 10px; line-height: 1.55; }
.yj-arrow-knowledge-modal li.is-empty { display: block; grid-column: 1 / -1; color: #8fa8b1; font-size: 11px; text-align: center; }
.yj-arrow-knowledge-modal footer { padding: 10px 18px 13px; color: #66848e; font-size: 9px; text-align: center; border-top: 1px solid rgba(83, 240, 174, .1); }

@keyframes yj-arrow-pulse { to { opacity: .52; } }
@keyframes yj-arrow-scan { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes yj-arrow-unlock {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.93); }
  12%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
}
@keyframes yj-arrow-panel-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes yj-arrow-knowledge-catch {
  0% { border-color: rgba(84, 216, 255, .2); box-shadow: inset 0 1px rgba(255,255,255,.05); }
  34% { color: #fff7c8; border-color: #ffd35a; box-shadow: 0 0 0 4px rgba(255, 211, 90, .16), 0 0 28px rgba(83, 240, 174, .54), inset 0 0 18px rgba(255, 211, 90, .12); transform: scale(1.065); }
  100% { border-color: rgba(84, 216, 255, .2); box-shadow: inset 0 1px rgba(255,255,255,.05); transform: scale(1); }
}

@media (max-width: 520px) {
  .yj-arrow-game { padding: 6px 4px 12px; }
  .yj-arrow-hud { grid-template-columns: minmax(0, 1fr) 72px 78px; gap: 5px; }
  .yj-arrow-hud > div { padding: 8px 7px; border-radius: 11px; }
  .yj-arrow-meter, .yj-arrow-timer { min-width: 0 !important; }
  .yj-arrow-status { top: 7px; left: 7px; right: 7px; font-size: 9px; }
  .yj-arrow-status span { padding: 5px 7px; }
  #yj-arrow-message { max-width: 66%; }
  .yj-arrow-canvas { height: min(119vw, 62svh); min-height: 430px; }
  .yj-arrow-actions { gap: 5px; }
  .yj-arrow-actions button { min-height: 54px; gap: 5px; padding: 6px 3px; }
  .yj-arrow-actions i { font-size: 18px; }
  .yj-arrow-actions span { font-size: 10px; }
  .yj-arrow-actions small { font-size: 8px; }
  .yj-arrow-knowledge-modal { padding: 7px; }
  .yj-arrow-knowledge-modal > section { max-height: 82svh; border-radius: 16px; }
  .yj-arrow-knowledge-modal header { padding: 13px 13px 10px; }
  .yj-arrow-knowledge-note { padding: 8px 13px; }
  .yj-arrow-knowledge-modal ol { grid-template-columns: 1fr; padding: 2px 13px 11px; }
  .yj-arrow-unlock { bottom: 11px; padding: 11px 13px; }
}

@media (max-width: 370px) {
  .yj-arrow-canvas { min-height: 390px; }
  .yj-arrow-hud strong, .yj-arrow-hud b { font-size: 13px; }
  .yj-arrow-lesson { padding: 9px; }
  .yj-arrow-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .yj-arrow-game { width: min(100%, 760px); }
  .yj-arrow-canvas { height: 58svh; min-height: 320px; }
  .yj-arrow-actions button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .yj-arrow-board-shell::before,
  .yj-arrow-timer b.is-low,
  .yj-arrow-unlock.is-showing,
  .yj-arrow-knowledge-modal > section,
  .yj-arrow-actions button.is-catching { animation: none; }
  .yj-arrow-fly-knowledge { display: none; }
}