/* ==========================================================
   FleetFixer Regatta - shared styles for the simulator pages.
   Built on the FleetFixer palette used across the Learn platform.
   ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#15614A;--accent-2:#1C7A5C;--accent-light:#3FB680;
  --bg:#070F0C;--panel:#0E1714;--panel-2:#16241C;--stroke:#25372E;
  --text:#EAF3EC;--muted:#9DB0A6;--radius:14px;
  --good:#16a34a;--warn:#f59e0b;--bad:#dc2626;--info:#3FB680;
  --grad:linear-gradient(135deg,#15614A,#3FB680);
}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}
body.scroll{overflow:auto}
a{color:var(--accent-light)}
button{font-family:inherit}

/* ---- Generic UI ---- */
.btn{font-size:14px;font-weight:700;padding:13px 26px;border-radius:12px;border:none;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff}
.btn:focus-visible{outline:3px solid var(--accent-light);outline-offset:2px}
.btn-primary{background:var(--grad);box-shadow:0 6px 18px rgba(21,97,74,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--panel-2);border:1px solid var(--stroke);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-danger{background:var(--bad)}
.btn-sm{padding:8px 14px;font-size:12px;border-radius:9px}
.chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;border:1.5px solid var(--stroke);background:var(--panel);color:var(--text);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- Topbar ---- */
.topbar{position:fixed;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:rgba(8,18,14,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke);z-index:50}
.topbar .tb-left{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px}
.topbar img{height:30px}
.tb-tag{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--stroke);border-radius:20px;padding:3px 10px}

/* ---- Setup / lobby panels ---- */
.sheet{position:fixed;inset:54px 0 0 0;overflow:auto;padding:24px 18px 80px;display:flex;flex-direction:column;align-items:center}
.sheet.hidden{display:none}
.card{width:100%;max-width:760px;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.card h2{font-size:18px;font-weight:800;margin-bottom:4px}
.card .sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.field select,.field input[type=text],.field input[type=number]{width:100%;background:var(--panel-2);border:1px solid var(--stroke);border-radius:10px;color:var(--text);padding:11px 12px;font-size:14px;font-family:inherit}
.field .rangewrap{display:flex;align-items:center;gap:12px}
.field input[type=range]{flex:1;accent-color:var(--accent-light)}
.field .rangeval{font-weight:800;font-size:15px;min-width:62px;text-align:right}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.venue-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:6px;line-height:1.5}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.class-card{background:var(--panel-2);border:2px solid var(--stroke);border-radius:12px;padding:12px;cursor:pointer;text-align:center;transition:.15s}
.class-card:hover{border-color:var(--accent-light)}
.class-card.on{border-color:var(--accent-light);background:rgba(63,182,128,.12)}
.class-card .cn{font-weight:800;font-size:14px}
.class-card .ca{font-size:11px;color:var(--muted)}

/* ---- Lobby ---- */
.lobby{text-align:center;max-width:560px;margin:0 auto}
.code{font-size:clamp(46px,12vw,76px);font-weight:900;letter-spacing:.16em;color:var(--accent-light);margin:6px 0}
.qr{display:inline-block;background:#fff;padding:14px;border-radius:14px;margin:10px 0}
.qr svg{display:block;width:200px;height:200px}
.joinlink{font-size:12px;color:var(--muted);word-break:break-all;margin-bottom:14px}
.players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0}
.ptag{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--stroke);border-radius:10px;padding:7px 13px;font-weight:600;font-size:13px}
.ptag .dot{width:12px;height:12px;border-radius:50%}

/* ---- 3D stage ---- */
.stage-wrap{position:fixed;inset:0}
canvas.stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---- HUD ---- */
.rg-hud{position:fixed;top:64px;left:12px;z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.rg-dial{width:128px;height:128px;background:rgba(8,18,14,.6);border:1px solid var(--stroke);border-radius:16px;backdrop-filter:blur(8px);padding:6px}
.rg-dial-svg{width:100%;height:100%}
.rg-dial-bg{fill:rgba(22,42,34,.5);stroke:var(--stroke);stroke-width:1}
.rg-nogo{fill:rgba(220,38,38,.18);stroke:rgba(220,38,38,.4);stroke-width:.5}
.rg-tick{stroke:var(--muted);stroke-width:1}
.rg-boat{fill:var(--accent-light);stroke:#fff;stroke-width:.6}
.rg-wind-line{stroke:#ffd24a;stroke-width:2}
.rg-wind-head{fill:#ffd24a}
.rg-tws{fill:#fff;font-size:13px;font-weight:800;text-anchor:middle}
.rg-tws-l{fill:var(--muted);font-size:6px;text-anchor:middle}
.rg-readout{display:flex;flex-direction:column;gap:4px;background:rgba(8,18,14,.6);border:1px solid var(--stroke);border-radius:12px;padding:8px 10px;backdrop-filter:blur(8px);width:128px}
.rg-stat{display:flex;justify-content:space-between;align-items:baseline}
.rg-stat .rg-v{font-size:16px;font-weight:800}
.rg-stat .rg-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rg-leg{display:flex;justify-content:space-between;align-items:center;background:rgba(8,18,14,.6);border:1px solid var(--stroke);border-radius:12px;padding:8px 10px;backdrop-filter:blur(8px);width:128px;gap:6px}
.rg-leg .rg-v{font-size:11px;font-weight:700}
.rg-clock{font-size:14px;font-weight:900;color:var(--accent-light)}

/* ---- Touch steering ---- */
.rg-steer{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:flex-end;gap:10px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
.rg-steer>*{pointer-events:auto}
.rg-btn{flex:0 0 84px;height:84px;border-radius:18px;border:1px solid var(--stroke);background:rgba(16,38,30,.85);color:var(--text);font-size:13px;font-weight:800;line-height:1.15;backdrop-filter:blur(8px);cursor:pointer;user-select:none}
.rg-btn:active{background:var(--accent)}
.rg-tiller{flex:1;background:rgba(16,38,30,.8);border:1px solid var(--stroke);border-radius:18px;padding:14px 16px 10px;backdrop-filter:blur(8px);position:relative}
.rg-tiller-track{position:relative;height:46px;background:var(--panel-2);border-radius:23px;border:1px solid var(--stroke);touch-action:none}
.rg-tiller-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:38px;border-radius:19px;background:var(--grad);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.rg-tiller-l,.rg-tiller-r{position:absolute;bottom:-2px;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase}
.rg-tiller-l{left:16px}.rg-tiller-r{right:16px}

/* ---- Coach side panel ---- */
.coach{position:fixed;top:64px;right:12px;bottom:12px;width:312px;max-width:46vw;z-index:20;display:flex;flex-direction:column;gap:10px;overflow:auto}
.coach .panel{background:rgba(8,18,14,.78);border:1px solid var(--stroke);border-radius:14px;padding:12px;backdrop-filter:blur(10px)}
.coach .panel h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;font-weight:600}
.sw{position:relative;width:40px;height:22px;flex-shrink:0}
.sw input{display:none}
.sw .tr{position:absolute;inset:0;background:var(--stroke);border-radius:11px;transition:.2s}
.sw input:checked+.tr{background:var(--accent-light)}
.sw .th{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked~.th{transform:translateX(18px)}
.fleet-row{display:flex;align-items:center;gap:8px;padding:7px;border-radius:9px;cursor:pointer;font-size:13px}
.fleet-row:hover{background:var(--panel-2)}
.fleet-row.sel{background:rgba(63,182,128,.16);outline:1px solid var(--accent-light)}
.fleet-row .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.fleet-row .nm{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleet-row .pos{font-weight:800;color:var(--accent-light)}
.fleet-row .sp{font-size:11px;color:var(--muted)}
.inc{font-size:12px;padding:8px 10px;border-radius:9px;margin-bottom:6px;border-left:3px solid var(--info);background:var(--panel-2)}
.inc.caution{border-left-color:var(--warn)}
.inc.contact{border-left-color:var(--bad)}
.inc .rule{font-weight:800;color:var(--accent-light);font-size:11px}
.cam-row{display:flex;gap:6px;flex-wrap:wrap}
.tool-row{display:flex;gap:6px;flex-wrap:wrap}

/* ---- Timeline (replay) ---- */
.timeline{position:fixed;left:12px;right:336px;bottom:12px;z-index:20;background:rgba(8,18,14,.82);border:1px solid var(--stroke);border-radius:14px;padding:10px 14px;backdrop-filter:blur(10px)}
@media(max-width:820px){.timeline{right:12px}.coach{display:none}}
.timeline .row{display:flex;align-items:center;gap:12px}
.timeline input[type=range]{flex:1;accent-color:var(--accent-light)}
.timeline .tlabel{font-size:13px;font-weight:800;min-width:96px}
.tl-events{position:relative;height:8px;margin-top:6px}
.tl-ev{position:absolute;top:0;width:3px;height:8px;border-radius:2px;background:var(--warn)}
.tl-ev.contact{background:var(--bad)}

/* ---- Banners / toasts ---- */
.banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:40;background:rgba(8,18,14,.92);border:1px solid var(--stroke);border-radius:16px;padding:26px 34px;text-align:center;font-weight:800;font-size:clamp(28px,7vw,56px);pointer-events:none;transition:opacity .4s}
.banner.hide{opacity:0}
.toast{position:fixed;bottom:108px;left:50%;transform:translateX(-50%);z-index:40;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:11px 18px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.center-msg{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.spinner{width:38px;height:38px;border:3px solid var(--stroke);border-top-color:var(--accent-light);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---- Mobile gameplay declutter ---- */
@media(max-width:760px),(pointer:coarse){
  .rg-hud{top:60px;left:8px;gap:6px}
  .rg-dial{width:92px;height:92px;padding:4px}
  .rg-readout{width:92px;padding:6px 8px;gap:2px}
  /* keep SOG, VMG, TWA; hide HDG + Tack to cut clutter */
  .rg-readout .rg-stat:nth-child(n+4){display:none}
  .rg-stat .rg-v{font-size:14px}
  .rg-stat .rg-l{font-size:9px}
  .rg-leg{width:auto;min-width:92px;padding:6px 8px}
  .rg-leg .rg-v{display:none}        /* leg name off; clock stays */
  .rg-clock{font-size:13px}
  .rg-steer{gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .rg-btn{flex:0 0 72px;height:72px;font-size:12px;border-radius:16px}
  .rg-tiller{padding:10px 12px 8px}
}

.hidden{display:none!important}