/* 看得到對手在做什麼 */
.of-banner{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));transform:translate(-50%,-4px) scale(.96);opacity:0;pointer-events:none;z-index:55;transition:opacity .25s,transform .25s;
  max-width:min(92vw,560px);padding:6px 16px;border-radius:999px;background:rgba(14,20,32,.95);border:1px solid var(--gold,#cbb889);color:var(--ink,#ecede9);font-size:14px;letter-spacing:.02em;text-align:center;box-shadow:0 8px 26px #0009}
.of-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
.of-arrows{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:53}
.of-arrow{stroke:#ff8a7a;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff6b5b);transition:stroke-dashoffset .32s ease-out,opacity .35s}
.of-hit{animation:of-hit .5s ease}
@keyframes of-hit{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.of-float{position:fixed;transform:translate(-50%,-50%);z-index:56;pointer-events:none;font-weight:800;font-size:26px;color:#ff7a6b;text-shadow:0 2px 0 #0008,0 0 10px #000;animation:of-float 1.25s ease-out forwards}
.of-float.heal{color:#71d9b2}
@keyframes of-float{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
.of-feed{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:30;display:none;max-width:230px;font-size:12px}
.of-feed.visible{display:block}
.of-feed ol{list-style:none;margin:0;padding:8px 10px;background:rgba(14,20,32,.82);border:1px solid var(--line,#ffffff18);border-radius:10px;cursor:pointer}
.of-feed li{padding:3px 0;color:var(--muted,#98a5b5);line-height:1.4}
.of-feed li:first-child{color:var(--ink,#ecede9)}
.of-feed li+li{border-top:1px solid var(--line,#ffffff18)}
.of-feed-toggle{display:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#ffffff18);background:rgba(14,20,32,.9);color:var(--gold,#cbb889);font-size:16px;cursor:pointer}
.of-feed.collapsed ol{display:none}
.of-feed.collapsed .of-feed-toggle{display:block}
@media (max-width:700px){
  .of-feed{left:6px;top:auto;bottom:calc(200px + env(safe-area-inset-bottom,0px));transform:none;max-width:70vw}
  .of-feed-toggle{display:block;margin-bottom:6px}
  .of-banner{font-size:12px;max-width:56vw;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .of-thinking{font-size:11px}
}
.of-thinking{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:31;display:none;padding:4px 12px;border-radius:999px;background:rgba(14,20,32,.88);border:1px solid var(--line,#ffffff18);color:var(--muted,#98a5b5);font-size:12px;pointer-events:none}
.of-thinking.show{display:block}
.of-thinking span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold,#cbb889);margin-right:4px;vertical-align:middle;animation:of-pulse 1s infinite}
@keyframes of-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.of-hit,.of-float{animation:none}.of-float{display:none}}