/* KØS SEJL — css/controls.css : touch / mouse controls built by js/ui/input.js (KOS.Input). All classes are prefixed kc-. */
.kc {
  --kc-pad: clamp(88px, 25vw, 118px);
  --kc-round: clamp(68px, 19vw, 84px);
  --kc-gap: 14px;
  --kc-edge: 14px;
  --kc-sl-w: 72px;
  --kc-sl-h: clamp(170px, 27vh, 240px);
  --kc-sl: var(--kc-sl-h);
  --kc-glass: rgba(13, 19, 33, .58);
  --kc-glass-hi: rgba(28, 38, 60, .72);
  --kc-line: rgba(255, 255, 255, .14);
  --kc-hot1: var(--primary, #ffc65c);
  --kc-hot2: var(--primary-2, #ff7a3d);
  --kc-good: var(--good, #3ee08f);
  --kc-sl-top: calc(var(--kc-edge) + env(safe-area-inset-top, 0px));
  --kc-sl-bot: calc(var(--kc-edge) + env(safe-area-inset-bottom, 0px));
  --kc-sl-left: calc(var(--kc-edge) + env(safe-area-inset-left, 0px));
  --kc-sl-right: calc(var(--kc-edge) + env(safe-area-inset-right, 0px));
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  font-family: var(--font, ui-rounded, "Segoe UI Variable Display", "SF Pro Rounded", system-ui, sans-serif);
  color: #fff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.kc > *, .kc .kc-extras > * { pointer-events: auto; touch-action: none; }
.kc .kc-extras { pointer-events: none; }
.kc svg { display: block; width: 100%; height: 100%; }

/* ---------- shared glass control ---------- */
.kc-pad, .kc-btn, .kc-slider, .kc-wheel, .kc-joy {
  position: absolute; box-sizing: border-box;
  background: var(--kc-glass);
  border: 1px solid var(--kc-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff; cursor: pointer; outline: none;
  transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), background .12s, box-shadow .15s, opacity .2s, color .12s;
}
.kc-btn { font: inherit; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; }
.kc b { display: block; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

.kc-pad, .kc-round {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.kc-pad { width: var(--kc-pad); height: var(--kc-pad); border-radius: 30%; }
.kc-pad svg { width: 50%; height: 50%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.kc-round { width: var(--kc-round); height: var(--kc-round); border-radius: 50%; gap: 3px; }
.kc-round svg { width: 50%; height: 50%; }
.kc-round b { font-size: 11px; }

/* pressed: orange, squish, glow */
.kc-pad.kc-on, .kc-btn.kc-on, .kc-btn:active {
  background: linear-gradient(180deg, var(--kc-hot1), var(--kc-hot2));
  color: #2a1606; border-color: rgba(255, 220, 160, .9);
  box-shadow: 0 0 0 6px rgba(255, 160, 70, .22), 0 6px 18px rgba(255, 122, 61, .45), inset 0 2px 0 rgba(255, 255, 255, .45);
  transform: scale(.92);
  transition: transform .07s ease-out, background .05s, box-shadow .1s, color .05s;
}
.kc-pad.kc-on b, .kc-btn.kc-on b { text-shadow: none; }
.kc-pad.kc-on svg, .kc-btn.kc-on svg { filter: none; }

/* ring burst on every press */
.kc-hit::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 3px solid var(--kc-hot1); animation: kc-ring .42s ease-out forwards;
}
@keyframes kc-ring { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }

/* tutorial highlight: pulsing yellow halo */
.kc-highlight { animation: kc-pulse 1.1s ease-in-out infinite; z-index: 2; }
@keyframes kc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 94, .85), 0 8px 22px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 14px rgba(255, 210, 94, 0), 0 8px 22px rgba(0, 0, 0, .35); }
}
.kc-disabled { opacity: .3; filter: grayscale(1); pointer-events: none !important; }

/* keyboard hints (desktop / fine pointer only) */
.kc-key {
  display: none; position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 7px; background: #f4f6fb; color: #1b2233; font: 800 12px/22px system-ui, sans-serif; text-align: center;
  box-shadow: 0 2px 0 #9aa6bd, 0 3px 8px rgba(0, 0, 0, .3); pointer-events: none; letter-spacing: 0; text-transform: none;
}
.kc-fine .kc-key { display: block; }

/* ---------- positions: portrait (default) ---------- */
.kc-pause {
  top: calc(var(--kc-sl-top) + 2px); right: var(--kc-sl-right); width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.kc-pause svg { width: 26px; height: 26px; }
.kc-steer-l { left: var(--kc-sl-left); bottom: var(--kc-sl-bot); }
.kc-steer-r { right: var(--kc-sl-right); bottom: var(--kc-sl-bot); }
.kc-hike { left: calc(var(--kc-sl-left) + (var(--kc-pad) - var(--kc-round)) / 2); bottom: calc(var(--kc-sl-bot) + var(--kc-pad) + var(--kc-gap) + 4px); }
.kc-spi { left: calc(var(--kc-sl-left) + (var(--kc-pad) - var(--kc-round)) / 2); bottom: calc(var(--kc-sl-bot) + var(--kc-pad) + var(--kc-round) + var(--kc-gap) * 2 + 4px); }
.kc-sheet { right: calc(var(--kc-sl-right) + (var(--kc-pad) - var(--kc-sl-w)) / 2); bottom: calc(var(--kc-sl-bot) + var(--kc-pad) + var(--kc-gap) + 4px); }
.kc-extras {
  position: absolute; right: var(--kc-sl-right); top: calc(var(--kc-sl-top) + 66px);
}
.kc-nopause .kc-extras { top: var(--kc-sl-top); }
.kc-extras {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.kc-extra {
  position: relative; display: flex; align-items: center; gap: 8px; height: 56px; min-width: 56px; padding: 0 14px 0 10px;
  border-radius: 18px;
}
.kc-extra svg, .kc-extra .kc-letter { width: 32px; height: 32px; flex: none; }
.kc-extra b { font-size: 12px; }
.kc-letter { display: grid; place-items: center; font-weight: 900; font-size: 22px; }

/* ---------- sliders (sheet + throttle) ---------- */
.kc-slider {
  width: var(--kc-sl-w); height: var(--kc-sl); border-radius: 26px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: ns-resize;
}
.kc-sl-lbl { display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: .9; pointer-events: none; }
.kc-sl-lbl svg { width: 24px; height: 24px; }
.kc-sl-lbl b { font-size: 10.5px; }
.kc-track { position: relative; flex: 1; width: 100%; min-height: 60px; }
.kc-track::before { /* the groove */
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 12px; transform: translateX(-50%);
  border-radius: 8px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1);
}
.kc-fill { /* the sheet paid out, drawn as rope */
  position: absolute; left: 50%; width: 6px; transform: translateX(-50%); top: 10px; border-radius: 4px;
  height: calc(var(--v, .5) * (100% - 40px) + 10px);
  background: repeating-linear-gradient(160deg, #e8eef8 0 4px, #8fb3d9 4px 7px);
  box-shadow: 0 0 6px rgba(143, 179, 217, .5);
}
.kc-zone {
  display: none; position: absolute; left: 6px; right: 6px; border-radius: 10px;
  top: calc(var(--z0, .4) * (100% - 40px) + 20px);
  height: max(8px, calc((var(--z1, .6) - var(--z0, .4)) * (100% - 40px)));
  background: rgba(62, 224, 143, .25); border: 2px solid rgba(62, 224, 143, .85);
  box-shadow: 0 0 12px rgba(62, 224, 143, .45); transition: top .25s ease, height .25s ease;
}
.kc-thumb {
  position: absolute; left: 50%; top: calc(var(--v, .5) * (100% - 40px)); width: 58px; height: 40px; margin-left: -29px;
  border-radius: 14px; background: linear-gradient(180deg, var(--kc-hot1), var(--kc-hot2));
  border: 2px solid rgba(255, 236, 200, .9);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: transform .15s cubic-bezier(.3, 1.7, .5, 1), box-shadow .2s, background .2s;
}
.kc-thumb i { display: block; width: 4px; height: 18px; border-radius: 2px; background: rgba(60, 25, 5, .45); }
.kc-slider.kc-on .kc-thumb { transform: scale(1.12); transition: transform .06s; }
.kc-sheet.kc-good .kc-thumb {
  background: linear-gradient(180deg, #8ff5c1, var(--kc-good)); border-color: #d7ffe9;
  box-shadow: 0 0 0 5px rgba(62, 224, 143, .3), 0 0 18px rgba(62, 224, 143, .7), inset 0 2px 0 rgba(255, 255, 255, .5);
  animation: kc-groove 1.2s ease-in-out infinite;
}
@keyframes kc-groove { 50% { box-shadow: 0 0 0 9px rgba(62, 224, 143, .12), 0 0 26px rgba(62, 224, 143, .9), inset 0 2px 0 rgba(255, 255, 255, .5); } }
.kc-sheet.kc-autoon .kc-track { opacity: .55; }
.kc-sheet.kc-autoon .kc-thumb { transition: top .25s ease; }
.kc-auto {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); height: 26px; padding: 0 10px;
  border-radius: 13px; border: 1px solid var(--kc-line); background: rgba(13, 19, 33, .85); color: rgba(255, 255, 255, .65);
  font: 900 11px/24px var(--font, system-ui, sans-serif); letter-spacing: .08em; cursor: pointer; touch-action: none;
  min-width: 52px; /* + generous hit area below */
}
.kc-auto::before { content: ""; position: absolute; inset: -10px -8px; }
.kc-autoon .kc-auto { background: var(--kc-good); color: #06301b; border-color: #c9ffe3; box-shadow: 0 0 12px rgba(62, 224, 143, .6); }

/* throttle lever */
.kc-throttle { --kc-sl: clamp(200px, 30vh, 270px); }
.kc-throttle .kc-track::after { /* ahead (green) / astern (red) tint */
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 12px; transform: translateX(-50%); border-radius: 8px;
  background: linear-gradient(180deg, rgba(62, 224, 143, .55), rgba(62, 224, 143, .05) 48%, rgba(255, 77, 94, .05) 52%, rgba(255, 77, 94, .55));
}
.kc-throttle .kc-fill { display: none; }
.kc-notch { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .5); z-index: 1; }
.kc-notch span { position: absolute; left: -2px; top: -8px; font: 900 11px/16px system-ui, sans-serif; color: rgba(255, 255, 255, .8); }
.kc-lever { top: calc(var(--v, .5) * (100% - 44px)); height: 44px; width: 62px; margin-left: -31px; border-radius: 22px; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #4b556b, #151a26 70%); border-color: #6b7690; }
.kc-lever i { background: rgba(255, 255, 255, .35); }
.kc-throttle.kc-fwd .kc-lever { border-color: var(--kc-good); box-shadow: 0 0 0 4px rgba(62, 224, 143, .3), 0 6px 14px rgba(0, 0, 0, .45); }
.kc-throttle.kc-rev .kc-lever { border-color: var(--bad, #ff4d5e); box-shadow: 0 0 0 4px rgba(255, 77, 94, .3), 0 6px 14px rgba(0, 0, 0, .45); }
.kc-throttle .kc-top b { color: var(--kc-good); font-size: 11px; }
.kc-throttle .kc-bot b { color: #ff8a95; font-size: 11px; }

/* steering wheel */
.kc-wheel {
  --kc-w: clamp(132px, 38vw, 168px);
  width: var(--kc-w); height: var(--kc-w); border-radius: 50%; padding: 8px;
  left: var(--kc-sl-left); bottom: var(--kc-sl-bot); cursor: grab;
}
.kc-wheel-rot { width: 100%; height: 100%; transition: transform .05s linear; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.kc-wheel.kc-on { box-shadow: 0 0 0 6px rgba(255, 160, 70, .25), 0 8px 22px rgba(0, 0, 0, .35); cursor: grabbing; }
.kc-rib .kc-throttle { right: var(--kc-sl-right); bottom: var(--kc-sl-bot); }

/* joystick */
.kc-joy {
  --kc-j: clamp(130px, 38vw, 170px);
  width: var(--kc-j); height: var(--kc-j); border-radius: 50%; left: var(--kc-sl-left); bottom: var(--kc-sl-bot);
}
.kc-joy-base { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .22); }
.kc-joy-base i { position: absolute; top: 50%; width: 0; height: 0; margin-top: -9px; border: 9px solid transparent; }
.kc-joy-base i:first-child { left: -26px; border-right: 12px solid rgba(255, 255, 255, .55); }
.kc-joy-base i:last-child { right: -26px; border-left: 12px solid rgba(255, 255, 255, .55); }
.kc-joy-knob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0a0, var(--kc-hot1) 40%, var(--kc-hot2));
  border: 2px solid rgba(255, 236, 200, .9); box-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .22s cubic-bezier(.3, 1.7, .5, 1);
}
.kc-joy.kc-on .kc-joy-knob { transition: none; }
.kc-joymode.kc-sail .kc-hike { left: auto; right: calc(var(--kc-sl-right) + (var(--kc-pad) - var(--kc-round)) / 2); bottom: var(--kc-sl-bot); }
.kc-joymode.kc-sail .kc-spi { left: auto; right: calc(var(--kc-sl-right) + var(--kc-round) + var(--kc-gap) + (var(--kc-pad) - var(--kc-round)) / 2); bottom: var(--kc-sl-bot); }
.kc-joymode.kc-sail .kc-sheet { bottom: calc(var(--kc-sl-bot) + var(--kc-round) + var(--kc-gap) + 4px); }

/* ---------- landscape: pads on the sides, inner controls next to them ---------- */
.kc-landscape { --kc-pad: clamp(86px, 24vh, 116px); --kc-round: clamp(64px, 18vh, 80px); --kc-sl-h: clamp(150px, 56vh, 230px); }
.kc-landscape .kc-steer-l { bottom: calc(var(--kc-sl-bot) + 4px); }
.kc-landscape .kc-steer-r { bottom: calc(var(--kc-sl-bot) + 4px); }
.kc-landscape .kc-hike { left: calc(var(--kc-sl-left) + var(--kc-pad) + var(--kc-gap)); bottom: calc(var(--kc-sl-bot) + 4px); }
.kc-landscape .kc-spi { left: calc(var(--kc-sl-left) + var(--kc-pad) + var(--kc-gap)); bottom: calc(var(--kc-sl-bot) + var(--kc-round) + var(--kc-gap) + 4px); }
.kc-landscape .kc-sheet { right: calc(var(--kc-sl-right) + var(--kc-pad) + var(--kc-gap)); bottom: var(--kc-sl-bot); }
.kc-landscape.kc-joymode.kc-sail .kc-hike { left: auto; right: var(--kc-sl-right); bottom: calc(var(--kc-sl-bot) + 4px); }
.kc-landscape.kc-joymode.kc-sail .kc-spi { left: auto; right: var(--kc-sl-right); bottom: calc(var(--kc-sl-bot) + var(--kc-round) + var(--kc-gap) + 4px); }
.kc-landscape.kc-joymode.kc-sail .kc-sheet { right: calc(var(--kc-sl-right) + var(--kc-round) + var(--kc-gap)); bottom: var(--kc-sl-bot); }
.kc-landscape .kc-throttle { --kc-sl: clamp(170px, 62vh, 260px); }
.kc-landscape .kc-wheel { --kc-w: clamp(124px, 40vh, 168px); }
.kc-landscape .kc-joy { --kc-j: clamp(124px, 40vh, 168px); }
.kc-landscape .kc-extras { flex-direction: row-reverse; top: var(--kc-sl-top); right: calc(var(--kc-sl-right) + 62px); }
.kc-landscape .kc-extra b { display: none; }
.kc-landscape .kc-extra { padding: 0 10px; }
.kc-short .kc-sl-lbl svg { display: none; }

/* desktop with a mouse: a bit smaller and calmer, keyboard is the main input */
.kc-fine { --kc-pad: 92px; --kc-round: 70px; --kc-sl-h: 210px; --kc-edge: 20px; }
.kc-fine.kc-landscape { --kc-pad: 92px; --kc-round: 70px; --kc-sl-h: 210px; }
.kc-fine .kc-pad, .kc-fine .kc-round, .kc-fine .kc-slider, .kc-fine .kc-wheel, .kc-fine .kc-joy { opacity: .9; }
.kc-fine .kc-wheel { --kc-w: 150px; }
.kc-fine .kc-throttle { --kc-sl: 240px; }
@media (hover: hover) {
  .kc-pad:hover, .kc-btn:hover:not(.kc-on), .kc-slider:hover { background: var(--kc-glass-hi); }
}
.kc-narrow { --kc-pad: 80px; --kc-round: 62px; --kc-edge: 10px; }

@media (prefers-reduced-motion: reduce) {
  .kc-hit::after, .kc-highlight, .kc-sheet.kc-good .kc-thumb { animation: none; }
  .kc-pad, .kc-btn, .kc-thumb, .kc-joy-knob { transition: none; }
}

/* keycap placement: top-right corner (labels sit at the bottom), sliders get theirs on the side */
.kc-key { bottom: auto; top: -7px; right: -7px; }
.kc-slider .kc-key { top: 50%; right: -16px; margin-top: -11px; }
.kc-slider { padding-top: 16px; }
.kc-throttle .kc-track { margin: 6px 0; }