:root {
  color-scheme: dark;
  --gold: #edae35;
  --gold-light: #ffd779;
  --gold-dark: #8a4c10;
  --bronze: #b87324;
  --ink: #050607;
  --metal: #17191b;
  --font-industrial: "Oswald", "Arial Narrow", "Arial Narrow Bold", Impact, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #030405;
}

body {
  color: #fff;
  font-family: var(--font-industrial);
  font-weight: 700;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  background: #000;
}

body[data-player-state="unavailable"]::before {
  background:
    linear-gradient(180deg, rgba(2, 4, 6, .34), rgba(2, 3, 4, .76)),
    url("https://maritime.fitness/wp-content/uploads/2026/09/file_00000000d2148210a63df24c39327fb4.png") center top / cover no-repeat;
  filter: saturate(.82) contrast(1.05);
}

body[data-player-state="rest"]::before,
body[data-player-state="completed"]::before {
  background-image: url("https://maritime.fitness/wp-content/uploads/2026/09/file_00000000ee6c81f4b3017791e3209c25.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[hidden] { display: none !important; }

button,
a { font: inherit; }

#fob-player {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom));
}

.fob-state {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.fob-hero {
  padding: 2px 0 10px;
  text-align: center;
  text-transform: uppercase;
}

.fob-hero h1 {
  margin: 0;
  font-size: clamp(45px, 14vw, 78px);
  font-style: italic;
  font-weight: 700;
  line-height: .84;
  letter-spacing: .02em;
  text-shadow: 0 5px 1px #000, 0 8px 18px #000;
  transform: skew(-2deg);
}

.fob-hero h1 span,
.fob-hero h1 strong { display: block; }

.fob-hero h1 span {
  color: #f2f2ef;
  background: linear-gradient(#fff 20%, #aaa 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fob-hero h1 strong {
  color: var(--gold);
  background: linear-gradient(#ffe194 4%, #f1ad30 50%, #a85c0f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metal-panel {
  position: relative;
  overflow: hidden;
  border: 3px solid #b87524;
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.07), transparent 26%, rgba(255,255,255,.03) 55%, transparent),
    linear-gradient(180deg, #222426 0%, #0c0e10 52%, #17191a 100%);
  box-shadow:
    inset 0 0 0 1px #412a13,
    inset 0 7px 14px rgba(255,255,255,.03),
    inset 0 -9px 18px #000,
    0 0 14px rgba(238, 151, 31, .24),
    0 5px 12px rgba(0,0,0,.65);
}

/* Paired radial gradients produce four restrained corner rivets. */
.metal-panel::before {
  position: absolute;
  z-index: 0;
  inset: 5px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at left top, #e0a649 0 2px, #44280e 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at right top, #e0a649 0 2px, #44280e 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at left bottom, #e0a649 0 2px, #44280e 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at right bottom, #e0a649 0 2px, #44280e 2.5px 4px, transparent 4.5px);
}

.metal-panel > * { position: relative; z-index: 1; }

.fob-exercise-name {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  color: #fff;
  font-size: clamp(25px, 7vw, 38px);
  line-height: 1.02;
  text-align: center;
  text-shadow: 0 3px 3px #000;
  text-transform: uppercase;
}

/* The active player is deliberately denser than the rest and completion views. */
#fob-active-state {
  max-width: 520px;
}

body[data-player-state="active"] #fob-player {
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}

#fob-active-state .fob-exercise-name {
  min-height: 52px;
  margin: 0;
  padding: 5px 24px;
  color: var(--gold);
  font-size: clamp(30px, 8.5vw, 36px);
  letter-spacing: .025em;
}

#fob-active-state .fob-info-panel {
  min-height: 40px;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 18px;
  font-size: clamp(14px, 4vw, 18px);
}

#fob-active-state .fob-video-frame {
  margin-top: 6px;
  padding: 3px;
}

#fob-active-state .fob-video-viewport {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

#fob-active-state #fob-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#fob-active-state .fob-set-target {
  min-height: 48px;
  gap: 10px;
  margin-top: 6px;
  padding: 5px 16px;
  font-size: clamp(19px, 5.5vw, 27px);
}

#fob-active-state .fob-button {
  min-height: 48px;
  grid-template-columns: 46px 1fr 46px;
  margin-top: 6px;
  padding: 4px 0;
  font-size: clamp(17px, 5vw, 24px);
}

#fob-active-state .fob-button::after { width: 46px; }
#fob-active-state .fob-icon { min-width: 46px; font-size: 28px; }
#fob-active-state .fob-button-gold { min-height: 50px; }
#fob-active-state .fob-button-back { min-height: 46px; font-size: clamp(15px, 4.4vw, 21px); }

.fob-info-panel {
  display: grid;
  min-height: 52px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 22px;
  color: #f3f3f0;
  font-size: clamp(15px, 4vw, 20px);
  letter-spacing: .02em;
  text-align: center;
}

.fob-info-panel i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 7px var(--gold);
}

.fob-video-frame {
  width: 100%;
  margin-top: 12px;
  padding: 4px;
  border: 3px solid #c17a24;
  border-radius: 11px;
  overflow: hidden;
  background: #060606;
  box-shadow: inset 0 0 0 1px #33200e, 0 0 17px rgba(237, 154, 37, .28), 0 7px 18px #000;
}

.fob-video-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  background: #000;
}

#fob-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

#fob-video-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  font-size: clamp(18px, 5vw, 28px);
  text-shadow: 0 3px 3px #000;
}

.fob-set-target {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 12px 0 0;
  padding: 10px 22px;
  color: var(--gold-light);
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 2px #000;
  text-transform: uppercase;
}

.fob-set-target .fob-reps { color: #fff; }

.fob-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 0;
  border: 3px solid #b87524;
  border-radius: 9px;
  cursor: pointer;
  color: #fff;
  font-size: clamp(19px, 5.4vw, 29px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 3px 2px #000;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px #3a260f, inset 0 -8px 14px rgba(0,0,0,.72), 0 6px 12px rgba(0,0,0,.6), 0 0 12px rgba(238,151,31,.2);
  -webkit-tap-highlight-color: transparent;
}

.fob-button::after {
  width: 54px;
  content: "";
}

.fob-button:hover { filter: brightness(1.12); }
.fob-button:active { transform: translateY(2px); }
.fob-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.fob-button-gold {
  min-height: 68px;
  border-color: #ffd06b #a85e15 #713b0b;
  color: #171009;
  background: linear-gradient(180deg, #ffc85a 0%, #d98520 46%, #9e5110 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 1px #6e380b, inset 0 8px 10px rgba(255,255,255,.2), inset 0 -9px 14px rgba(76,31,1,.45), 0 0 18px rgba(255,160,34,.35), 0 6px 13px #000;
}

.fob-button-dark {
  background: linear-gradient(120deg, #222528 0%, #090b0c 46%, #1b1d1f 100%);
}

.fob-icon {
  display: flex;
  min-width: 54px;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.fob-button-back { min-height: 58px; font-size: clamp(16px, 4.6vw, 25px); }

.fob-rest {
  display: flex;
  min-height: calc(100svh - max(18px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
  flex-direction: column;
  justify-content: center;
}

.fob-rest-heading {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 26px;
  color: #f5f6f6;
  background:
    linear-gradient(115deg, rgba(255,255,255,.08), transparent 26%, rgba(255,255,255,.035) 55%, transparent),
    linear-gradient(180deg, #222426 0%, #0c0e10 52%, #17191a 100%);
  font-size: clamp(42px, 13vw, 52px);
  line-height: 1;
  letter-spacing: .045em;
  text-align: center;
  text-shadow: 0 2px 0 #fff, 0 4px 5px #000;
  text-transform: uppercase;
}

.fob-rest-clock {
  display: flex;
  width: min(60vw, 270px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: clamp(18px, 4vh, 28px) auto;
  border: 11px solid #191b1c;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #242628 0%, #090a0b 62%, #020202 100%);
  box-shadow: inset 0 0 0 3px #a75a12, inset 0 0 27px #000, 0 0 0 3px #d68b25, 0 0 27px rgba(255,151,25,.53), 0 9px 20px #000;
}

.fob-rest-clock strong {
  font-size: clamp(52px, 15vw, 82px);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 4px 4px #000;
}

.fob-rest-clock span {
  margin-top: 8px;
  color: var(--gold-light);
  font-size: clamp(18px, 5vw, 25px);
  letter-spacing: .08em;
}

.fob-rest-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fob-rest-actions .fob-button { min-width: 0; min-height: 72px; margin-top: 0; grid-template-columns: 44px 1fr 18px; font-size: clamp(16px, 4.6vw, 24px); }
.fob-rest-actions .fob-button::after { width: 18px; }
.fob-rest-actions .fob-icon { min-width: 44px; font-size: 32px; color: var(--gold-light); }

.fob-completed { padding-top: 2px; }

.fob-well-done {
  min-height: 60px;
  margin: 4px 0 12px;
  padding: 10px 20px;
  color: #fff;
  font-size: clamp(23px, 7vw, 34px);
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 3px 3px #000;
}

.fob-results { padding: 12px 10px; }

.fob-result-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr) minmax(90px, 120px);
  align-items: center;
  gap: 7px;
  min-height: 62px;
  border-bottom: 1px solid rgba(202,129,35,.26);
}

.fob-result-row:last-child { border-bottom: 0; }

.fob-stat-icon {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 27px;
  text-align: center;
  text-shadow: 0 0 8px rgba(255,166,32,.45), 0 2px #000;
}

.fob-seacoin-icon {
  display: flex;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 3px solid #f3bd4d;
  border-radius: 50%;
  color: #5e3108;
  background: radial-gradient(circle at 34% 26%, #ffe69a 0%, #d99220 42%, #8d480c 76%, #e5a536 100%);
  box-shadow: inset 0 0 0 2px #9d5913, inset 0 2px 4px rgba(255,255,255,.55), 0 0 9px rgba(255,166,32,.42), 0 2px 2px #000;
  font-size: 21px;
  text-shadow: 0 1px 1px rgba(255,230,154,.5);
}

.fob-seacoin-icon span { transform: translateY(-1px); }

.fob-completed .fob-hero {
  padding: 4px 0 12px;
}

.fob-completed .fob-hero h1 {
  font-size: clamp(48px, 14vw, 76px);
  font-style: normal;
  line-height: .95;
  letter-spacing: .035em;
  text-shadow: 0 3px 5px #000;
  transform: none;
}

.fob-completed .fob-hero h1 span,
.fob-completed .fob-hero h1 strong {
  color: #f5f5f5;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.fob-stat-label {
  min-width: 0;
  overflow: hidden;
  color: #f3f3f1;
  font-size: clamp(17px, 4.8vw, 25px);
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 3px 2px #000;
  white-space: nowrap;
}

.fob-result-row b {
  display: flex;
  width: 100%;
  height: 52px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #a9691e;
  border-radius: 7px;
  color: var(--gold-light);
  background: linear-gradient(#090a0b, #17191a);
  box-shadow: inset 0 0 0 1px #3d290f, inset 0 0 10px #000;
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px #000;
  white-space: nowrap;
}

.fob-completed-back { margin-top: 14px; font-size: clamp(16px, 4.7vw, 26px); }

.fob-unavailable { padding-top: 16vh; text-align: center; }
.fob-unavailable .metal-panel { padding: 28px 20px; }
.fob-unavailable h1 { margin: 0; color: var(--gold-light); font-size: clamp(31px, 9vw, 48px); }
.fob-unavailable p { margin: 15px 0 22px; font-family: Arial, sans-serif; font-weight: 400; }

@media (max-width: 359px) {
  #fob-player { padding-inline: 8px; }
  .fob-hero h1 { font-size: 44px; }
  .fob-info-panel { padding-inline: 13px; gap: 7px; }
  .fob-button { grid-template-columns: 46px 1fr 46px; }
  .fob-button::after { width: 46px; }
  .fob-icon { min-width: 46px; }
  .fob-rest-actions { gap: 7px; }
  .fob-rest-actions .fob-button { min-height: 62px; grid-template-columns: 36px 1fr 8px; font-size: 15px; }
  .fob-rest-actions .fob-button::after { width: 8px; }
  .fob-rest-actions .fob-icon { min-width: 36px; font-size: 27px; }
  .fob-result-row { grid-template-columns: 42px minmax(0, 1fr) minmax(90px, 104px); gap: 4px; }
  .fob-stat-label { font-size: 16px; }
}

@media (min-width: 700px) {
  #fob-player { padding-block: 28px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}
.fob-achievement-unlock{position:fixed;z-index:50;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:rgba(2,7,12,.94);text-align:center}.fob-achievement-unlock[hidden]{display:none}.fob-achievement-unlock p,.fob-achievement-unlock h2{color:var(--gold-light);font-family:Oswald,sans-serif;letter-spacing:.08em}.fob-achievement-unlock img{width:min(72vw,360px);height:auto;max-height:52vh;object-fit:contain}.fob-achievement-unlock button{min-width:180px;padding:13px 24px;border:1px solid var(--gold-light);border-radius:7px;background:var(--gold-light);font:700 18px Oswald;color:#071019}