:root{
    --sea-0:#081726; --sea-1:#0c2236; --sea-2:#11314b;
    --chart:#14304a; --chart-line:#caa961; --brass:#d4af5a; --brass-soft:#9c834a;
    --cream:#f1e6cb; --ink:#e8dcbe; --muted:#8aa1b4;
    --port:#d2493a;        /* 左舷 紅 */
    --starboard:#3fae6b;   /* 右舷 綠 */
    --nogo:#b8392f; --sail:#f3ead0; --hull:#2a1d12; --wood:#7a5a35;
    --line:rgba(202,169,97,.22);
    --display:"Cormorant Garamond",serif; --body:"Spectral",Georgia,serif; --mono:"JetBrains Mono",monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--body); color:var(--ink); min-height:100vh;
    background:
      radial-gradient(1200px 600px at 78% -8%, rgba(212,175,90,.10), transparent 60%),
      radial-gradient(900px 700px at 8% 110%, rgba(63,174,107,.06), transparent 55%),
      linear-gradient(160deg, var(--sea-1) 0%, var(--sea-0) 70%);
    background-attachment:fixed; padding:26px 18px 0;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1180px;margin:0 auto}
  header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
    border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:24px;
    animation:rise .7s ease both}
  .brand{display:flex;align-items:center;gap:14px}
  .anchor{width:42px;height:42px;flex:none}
  h1{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,40px);letter-spacing:.5px;line-height:1;color:var(--cream)}
  .sub{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--brass-soft);margin-top:7px}
  .tagline{font-family:var(--display);font-style:italic;font-size:18px;color:var(--muted);text-align:right;max-width:300px}

  .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);gap:26px;align-items:start}
  @media(max-width:860px){.grid{grid-template-columns:1fr}}

  .card{background:linear-gradient(180deg, rgba(20,48,74,.55), rgba(8,23,38,.5));
    border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(3px);
    box-shadow:0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04)}
  .stage{padding:14px;animation:rise .8s .05s ease both}
  svg.compass{width:100%;height:auto;display:block;cursor:grab;touch-action:none}
  svg.compass:active{cursor:grabbing}

  /* ---- 風向箭頭動畫 ---- */
  .windflow line, .windflow path{stroke:var(--brass);stroke-width:2;}
  .wind-arrow{animation:drift 2.6s linear infinite}
  .wind-arrow:nth-child(2){animation-delay:.45s}
  .wind-arrow:nth-child(3){animation-delay:.9s}
  .wind-arrow:nth-child(4){animation-delay:1.3s}
  .wind-arrow:nth-child(5){animation-delay:1.75s}
  @keyframes drift{0%{opacity:0;transform:translateY(-10px)}18%{opacity:.95}82%{opacity:.95}100%{opacity:0;transform:translateY(26px)}}

  .luffing{animation:flap .34s ease-in-out infinite}
  @keyframes flap{0%,100%{opacity:.92}50%{opacity:.62}}

  /* ---- 氣流飄線小窗 ---- */
  .telltale-win{position:absolute;top:14px;left:14px;width:188px;z-index:5;
    background:linear-gradient(180deg,rgba(8,20,33,.94),rgba(7,17,28,.94));
    border:1px solid var(--line);border-radius:12px;padding:11px 12px 10px;
    box-shadow:0 16px 40px -20px rgba(0,0,0,.9);animation:rise .8s .2s ease both}
  .telltale-win .tw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .telltale-win .tw-t{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--brass-soft)}
  .telltale-win .tw-dot{display:flex;gap:5px}
  .telltale-win .tw-dot i{width:9px;height:9px;border-radius:50%;display:block}
  .telltale-win svg{width:100%;height:auto;display:block;border-radius:7px;background:rgba(20,48,74,.35)}
  .tw-verdict{font-family:var(--body);font-size:12.5px;line-height:1.4;margin-top:7px;color:var(--cream);min-height:34px}
  .tw-verdict b{color:var(--brass)}
  .tw-verdict.good b{color:var(--starboard)}
  .tw-verdict.bad b{color:var(--port)}
  .tw-tag{position:absolute;font-family:var(--mono);font-size:7.5px;letter-spacing:1px;fill:var(--muted)}
  @media(max-width:520px){.telltale-win{width:150px}}

  /* ---- 主繚示意圖浮窗(右上角) ---- */
  .sheet-win{position:absolute;top:14px;right:14px;width:190px;z-index:5;
    background:linear-gradient(180deg,rgba(8,20,33,.94),rgba(7,17,28,.94));
    border:1px solid var(--line);border-radius:12px;padding:11px 12px 9px;
    box-shadow:0 16px 40px -20px rgba(0,0,0,.9);animation:rise .8s .24s ease both}
  .sheet-win .tw-head{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:6px}
  .sheet-win .tw-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:.2px}
  /* 自動配平開關 */
  .autotog{display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none;flex:none}
  .autotog .lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.3px;color:var(--muted);transition:color .2s}
  .autotog input{position:absolute;opacity:0;width:0;height:0}
  .autotog .sw{width:27px;height:15px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid var(--line);position:relative;transition:.2s;flex:none}
  .autotog .sw::after{content:"";position:absolute;top:1px;left:1px;width:11px;height:11px;border-radius:50%;background:var(--muted);transition:.2s}
  .autotog input:checked + .sw{background:rgba(63,174,107,.32);border-color:var(--starboard)}
  .autotog input:checked + .sw::after{transform:translateX(12px);background:var(--starboard)}
  .autotog.on .lab{color:var(--starboard)}
  .autotog input:focus-visible + .sw{outline:2px solid var(--brass);outline-offset:2px}
  .sheet-win .tw-t{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass-soft);white-space:nowrap}
  .sheet-win .meter{font-family:var(--mono);font-size:9px;color:var(--muted);white-space:nowrap}
  .sheet-win .meter b{color:var(--cream)}
  .sheet-win .sheet-diagram{margin:0;background:rgba(20,48,74,.35)}
  .sheet-win .sw-meter{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--muted);text-align:center;margin-top:6px}
  .sheet-win .sw-meter b{color:var(--cream);font-size:12px}
  @media(max-width:520px){.sheet-win{width:152px}}

  /* ---- 窄屏(手機):兩個浮窗不再絕對定位浮在羅盤上,改為置於羅盤上方並排 ---- */
  @media(max-width:680px){
    .stage{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
    .telltale-win,.sheet-win{position:static;width:calc(50% - 5px);min-width:150px;
      box-shadow:none;animation:none;order:0}
    .compass{order:2;width:100%}
    .telltale-win .tw-verdict{min-height:0}
  }
  @media(max-width:380px){
    .telltale-win,.sheet-win{width:100%}
  }

  /* 飄線動畫:.stream 平順向後 / .lift 迎風揚起抖動 / .flutter 背風失速亂抖 / .limp 順風垂落 */
  .tt{transform-box:fill-box;transform-origin:0% 50%}
  .tt.stream{animation:ttStream 1.5s ease-in-out infinite}
  .tt.lift{animation:ttLift .32s ease-in-out infinite}
  .tt.flutter{animation:ttFlutter .26s linear infinite}
  .tt.limp{animation:ttLimp 2.4s ease-in-out infinite}
  @keyframes ttStream{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
  @keyframes ttLift{0%{transform:rotate(-16deg)}25%{transform:rotate(-50deg)}50%{transform:rotate(-24deg)}75%{transform:rotate(-54deg)}100%{transform:rotate(-16deg)}}
  @keyframes ttFlutter{0%{transform:rotate(5deg)}20%{transform:rotate(36deg)}40%{transform:rotate(10deg)}60%{transform:rotate(42deg)}80%{transform:rotate(16deg)}100%{transform:rotate(5deg)}}
  @keyframes ttLimp{0%,100%{transform:rotate(64deg)}50%{transform:rotate(72deg)}}

  /* ---- 主帆配平控件 ---- */
  .trim{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
  .trim .row1{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
  .trim .meter{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .trim .meter b{color:var(--cream);font-size:14px}
  .trim-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .trim-btns button{text-align:center;padding:10px 6px;font-size:14px}
  .trim-btns button .en{text-align:center}
  .trim-btns button.on{border-color:var(--starboard);background:linear-gradient(180deg,rgba(63,174,107,.2),rgba(63,174,107,.05))}
  .trim-btns button.on .gly{color:var(--starboard)}
  .sheet-diagram{margin:11px 0 4px;background:rgba(20,48,74,.32);border:1px solid var(--line);border-radius:9px;padding:6px 8px 4px}
  .sheet-diagram svg{width:100%;height:auto;display:block}
  .sd-key{font-family:var(--mono);font-size:8.5px;text-align:center;color:var(--muted);margin-top:2px;letter-spacing:.3px}
  .tiller{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
  .tiller .row1{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
  .tiller .meter{font-family:var(--mono);font-size:11px;color:var(--muted)}
  #tillerSvg{width:100%;height:auto;display:block;cursor:grab;touch-action:none;background:rgba(20,48,74,.3);border:1px solid var(--line);border-radius:9px}
  #tillerSvg:active{cursor:grabbing}

  /* ---- 控制面板 ---- */
  .panel{padding:20px 20px 22px;animation:rise .8s .12s ease both}
  .readout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:15px}
  .cell{background:linear-gradient(180deg,rgba(10,26,42,.7),rgba(8,20,33,.7));padding:7px 11px}
  .cell.full{grid-column:1/-1}
  .cell .k{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass-soft)}
  .cell .v{font-family:var(--display);font-size:20px;color:var(--cream);line-height:1.1;margin-top:1px}
  .cell .v small{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.5px}
  .posrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .posrow .posmain{min-width:0}
  .posrow .posside{flex:none;text-align:right}
  .posname{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .posname #posZh{font-family:var(--display);font-size:21px;color:var(--cream);line-height:1.1}
  .posname .en{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:1px}
  .tackval{font-family:var(--display);font-size:16px;color:var(--cream);display:flex;align-items:center;justify-content:flex-end;margin-top:2px}
  .tackdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;box-shadow:0 0 0 3px rgba(0,0,0,.25)}

  .tip{font-size:14.5px;line-height:1.62;color:var(--ink);min-height:66px;
    border-left:2px solid var(--brass);padding:4px 0 4px 14px;margin-bottom:20px;transition:.3s}
  .tip.alert{border-color:var(--nogo);color:#ffd9d2}
  .tip.gust{border-color:var(--port)}

  .ctl-label{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass-soft);margin:0 0 10px}
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  button{font-family:var(--body);font-size:15px;color:var(--ink);cursor:pointer;
    background:linear-gradient(180deg,rgba(212,175,90,.14),rgba(212,175,90,.05));
    border:1px solid var(--line);border-radius:9px;padding:12px 10px;text-align:left;
    transition:transform .12s ease, border-color .2s, background .2s; position:relative}
  button .gly{font-family:var(--mono);font-size:18px;color:var(--brass);margin-right:8px}
  button .en{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--muted);margin-top:2px}
  button:hover{transform:translateY(-2px);border-color:var(--brass);background:linear-gradient(180deg,rgba(212,175,90,.24),rgba(212,175,90,.08))}
  button:active{transform:translateY(0)}
  button.tack{grid-column:1/-1;border-color:rgba(212,175,90,.4)}
  button.gybe{grid-column:1/-1;border-color:rgba(210,73,58,.45);background:linear-gradient(180deg,rgba(210,73,58,.14),rgba(210,73,58,.04))}
  button.gybe .gly{color:var(--port)}
  button.gybe:hover{border-color:var(--port);background:linear-gradient(180deg,rgba(210,73,58,.24),rgba(210,73,58,.07))}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none}

  .reset{margin-top:12px;width:100%;text-align:center;font-size:13px;color:var(--muted);
    background:none;border:1px dashed var(--line)}
  .reset:hover{color:var(--brass);border-color:var(--brass);background:none}

  .legend{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
  .legend h3{font-family:var(--display);font-size:19px;color:var(--cream);font-weight:600;margin-bottom:12px}
  .legend dl{display:grid;gap:11px}
  .legend .row{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
  .legend .ic{font-family:var(--mono);color:var(--brass);font-size:17px;width:22px;text-align:center;padding-top:1px}
  .legend dt{font-family:var(--body);font-weight:500;color:var(--cream);font-size:14.5px}
  .legend dt span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;margin-left:6px}
  .legend dd{font-size:13px;line-height:1.55;color:var(--muted);margin-top:1px}

  .page-copyright{margin-top:40px;padding:18px 18px 24px;text-align:center;
    border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--brass-soft);opacity:.7;line-height:1.7}
  .page-copyright .credit{font-size:11.5px;color:var(--cream);opacity:.92;margin-bottom:5px;letter-spacing:.5px}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  .banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:12px;letter-spacing:2px;padding:7px 16px;border-radius:30px;
    background:rgba(8,20,33,.85);border:1px solid var(--brass);color:var(--cream);
    opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
  .banner.show{opacity:1}
  .banner.danger{border-color:var(--port);color:#ffd2cb}
  .stage{position:relative}

  /* ---- 左列:羅盤 + 機動卡片 ---- */
  .leftcol{display:flex;flex-direction:column;gap:24px;min-width:0}
  .maneuver-card{padding:18px 20px 20px;animation:rise .8s .16s ease both}

  /* ---- 儀表盤:風速 / 船速 ---- */
  .gauges{display:flex;gap:12px;margin-bottom:18px}
  .gauge{flex:1;background:linear-gradient(180deg,rgba(10,26,42,.7),rgba(8,20,33,.7));
    border:1px solid var(--line);border-radius:11px;padding:10px 8px 9px;text-align:center}
  .gauge svg{width:100%;height:auto;display:block}
  .gnum{margin-top:-6px;display:flex;align-items:baseline;justify-content:center;gap:5px}
  .gnum b{font-family:var(--display);font-size:26px;color:var(--cream);font-weight:600;line-height:1}
  .gnum span{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted)}
  .glab{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--brass-soft);margin-top:4px}

  .legend-card{padding:18px 20px 20px;animation:rise .8s .2s ease both}
  .legend-card .legend{margin-top:0;border-top:none;padding-top:0}
  .legend-full{grid-column:1 / -1}                      /* 通欄:橫跨左右兩列 */
  .legend-full .legend dl{grid-template-columns:1fr 1fr;gap:11px 32px}
  @media(max-width:680px){ .legend-full .legend dl{grid-template-columns:1fr} }