@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root{--fog:#d8d7d0;--paper:#efeee7;--navy:#102b42;--navy2:#183d55;--red:#d9472f;--yellow:#e4b62f;--foam:#f7f5e9;--rust:#7d4b36;--muted:#637079;--line:rgba(16,43,66,.24);--soft:rgba(16,43,66,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);background:var(--fog);font-family:"IBM Plex Mono",monospace;line-height:1.55}button{font:inherit}a{color:inherit}.header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 clamp(20px,5vw,78px);border-bottom:1px solid var(--line);background:var(--paper)}.brand{display:inline-flex;align-items:center;gap:11px;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-decoration:none}.brand strong{color:var(--red);font-size:13px}.brand-icon{width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--navy);background:var(--yellow);font-family:"Archivo Black",sans-serif;font-size:19px}nav{display:flex;gap:28px}nav a,footer a{color:var(--muted);font-size:11px;font-weight:600;text-decoration:none}nav a:hover,footer a:hover{color:var(--red)}.shift-link{color:var(--red);font-size:11px;font-weight:700;text-decoration:none}
.hero{min-height:700px;display:grid;grid-template-columns:42% 58%}.hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:70px clamp(28px,6vw,94px);background:linear-gradient(155deg,var(--paper),#d2d2ca)}.hero-art{min-height:630px;border-left:1px solid var(--line);background:url("../assets/images/buoyworks-yard.png") 58% center/cover no-repeat}.serial{margin:0 0 16px;color:var(--red);font-size:9px;font-weight:700;letter-spacing:.18em}.hero h1,.section-heading h2,.briefing-section h2,.breakwater-section h2,.game-overlay h3{font-family:"Archivo Black",sans-serif;text-transform:uppercase;line-height:.9;letter-spacing:-.045em}.hero h1{margin:0;font-size:clamp(58px,7vw,104px)}.hero h1 em{color:var(--red);font-style:normal}.hero-copy>p:not(.serial){max-width:500px;margin:28px 0;color:var(--muted);font-size:15px}.yard-button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:0 23px;border:2px solid var(--navy);background:var(--navy);color:var(--foam);font-size:11px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:6px 6px 0 var(--yellow);transition:.15s}.yard-button:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--yellow)}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.warning-label{position:absolute;right:22px;bottom:26px;padding:8px 10px;border:2px solid var(--red);color:var(--red);font-size:8px;font-weight:700;transform:rotate(-4deg)}
.yard-section{padding:105px clamp(12px,6vw,96px)}.section-heading{max-width:1220px;margin:0 auto 44px;display:grid;grid-template-columns:1fr .7fr;gap:90px;align-items:end}.section-heading h2,.briefing-section h2,.breakwater-section h2{margin:0;font-size:clamp(48px,5.7vw,82px)}.section-heading>p{margin:0;color:var(--muted);font-size:13px}.control-rig{max-width:1220px;margin:auto;border:2px solid var(--navy);background:var(--paper);box-shadow:8px 8px 0 rgba(16,43,66,.12)}.rig-header{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:2px solid var(--navy)}.rig-header>div{padding:13px 15px;border-right:1px solid var(--line)}.rig-header>div:last-child{border:0}.rig-header small,.yard-status small,.drop-button small{display:block;color:var(--muted);font-size:7px;font-weight:700;letter-spacing:.12em}.rig-header strong{font-size:20px}.game-frame{position:relative;aspect-ratio:8/5;overflow:hidden;background:#aebbc0}#gameCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}.draft-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:60px 60px;mix-blend-mode:multiply}.game-overlay{position:absolute;z-index:5;inset:0;display:none;place-items:center;align-content:center;padding:25px;text-align:center;background:rgba(239,238,231,.92)}.game-overlay.open{display:grid}.contract-seal{width:58px;height:58px;display:grid;place-items:center;margin-bottom:14px;border:4px double var(--red);border-radius:50%;color:var(--red);font-weight:700;transform:rotate(-7deg)}.game-overlay h3{margin:0;font-size:clamp(36px,5vw,58px)}.game-overlay>p:not(.serial){max-width:520px;margin:15px auto 22px;color:var(--muted);font-size:12px}.game-overlay .yard-button{margin:auto}.rig-footer{min-height:78px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:12px 15px 12px 21px;border-top:2px solid var(--navy)}.yard-status{display:flex;align-items:center;gap:11px}.yard-status>i{width:10px;height:10px;background:var(--red);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--red)}.yard-status strong{display:block;font-size:10px}.storm-meter{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:7px}.storm-meter div{width:130px;height:8px;border:1px solid var(--navy);padding:1px}.storm-meter i{display:block;width:0;height:100%;background:var(--red);transition:width .2s}.drop-button{min-width:170px;min-height:50px;border:2px solid var(--navy);background:var(--red);color:var(--foam);cursor:pointer}.drop-button strong{font-family:"Archivo Black",sans-serif;font-size:12px}.drop-button:disabled{opacity:.45;cursor:not-allowed}
.briefing-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;padding:110px clamp(24px,8vw,130px);background:var(--navy);color:var(--foam)}.briefing-section .serial{color:var(--yellow)}.briefing-section ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}.briefing-section li{padding:18px 24px;border-left:1px solid rgba(247,245,233,.2)}.briefing-section li>span{color:var(--yellow);font-size:11px}.briefing-section h3{margin:18px 0 7px;font-family:"Archivo Black",sans-serif;font-size:18px;text-transform:uppercase}.briefing-section p{margin:0;color:#b9c5cb;font-size:12px}.breakwater-section{min-height:620px;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center;padding:100px clamp(24px,9vw,145px);background:var(--yellow)}.signal-tower{height:410px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;position:relative;border:1px solid var(--line);background:rgba(247,245,233,.25)}.signal-tower span{width:180px;height:54px;border:3px solid var(--navy);background:var(--red)}.signal-tower span:nth-child(even){width:150px;background:var(--foam)}.signal-tower i{position:absolute;top:45px;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 0 10px rgba(217,71,47,.2)}.breakwater-section p:not(.serial){color:#374c59}.breakwater-section a{color:var(--red);font-size:10px;font-weight:700;text-decoration:none;text-transform:uppercase}
footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(20px,5vw,78px);background:var(--paper);border-top:1px solid var(--line)}footer p{color:var(--muted);font-size:9px}footer>div{display:flex;gap:20px}.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,18px);padding:10px 17px;border:2px solid var(--navy);background:var(--yellow);color:var(--navy);font-size:10px;font-weight:700;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.legal-main{min-height:calc(100vh - 206px);padding:85px 24px;background:var(--fog)}.legal-copy{max-width:760px;margin:auto}.legal-copy h1{margin:0 0 28px;font-family:"Archivo Black",sans-serif;font-size:clamp(54px,8vw,92px);line-height:.95;text-transform:uppercase}.legal-copy h2{margin-top:36px;font-family:"Archivo Black",sans-serif;font-size:25px;text-transform:uppercase}.legal-copy p{color:var(--muted)}.back-link{display:inline-block;margin-bottom:32px;color:var(--red);font-size:10px;font-weight:700;text-decoration:none}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:570px}.hero-art{min-height:500px;border-left:0;border-top:1px solid var(--line)}.section-heading,.briefing-section,.breakwater-section{grid-template-columns:1fr}.briefing-section ol{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:650px){.header{height:66px;padding:0 14px}.shift-link{display:none}.hero-copy{min-height:590px;padding:58px 24px}.hero h1{font-size:clamp(42px,12.5vw,52px);letter-spacing:-.06em}.hero-art{min-height:340px;background-position:68% center}.warning-label{display:none}.yard-section{padding:72px 9px}.section-heading{grid-template-columns:1fr;gap:18px;padding:0 15px}.section-heading h2,.briefing-section h2,.breakwater-section h2{font-size:51px}.rig-header{grid-template-columns:repeat(3,1fr)}.rig-header>div{padding:8px}.rig-header strong{font-size:17px}.game-frame{aspect-ratio:8/5}.rig-footer{grid-template-columns:1fr auto;gap:8px;padding:9px}.storm-meter{grid-row:2}.storm-meter div{width:80px}.drop-button{min-width:130px}.briefing-section,.breakwater-section{padding:75px 24px}.briefing-section ol{grid-template-columns:1fr}.briefing-section li{border-left:0;border-top:1px solid rgba(247,245,233,.2)}.signal-tower{height:300px}footer{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* Big Bass Signal Yard: independent art direction */
body[data-variant="industrial"]{background:#eef0e5;font-family:Arial, Helvetica, sans-serif}
body[data-variant="industrial"] .hero{position:relative}
body[data-variant="industrial"] .variant-note{z-index:3;max-width:34rem;padding:1rem 1.15rem;background:#eef0e5;color:#14241e;border:2px solid #14241e;font-family:Arial, Helvetica, sans-serif;box-shadow:8px 8px 0 #f4b400}
body[data-variant="industrial"] .variant-note span{display:block;margin-bottom:.55rem;color:#f4b400;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
body[data-variant="industrial"] .variant-note p{margin:0!important;color:inherit!important;font:700 1rem/1.4 Arial, Helvetica, sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body[data-variant="industrial"] canvas{max-width:100%}
@media(max-width:760px){
 body[data-variant="industrial"] .variant-note{position:static!important;width:auto!important;max-width:none!important;margin:1.5rem 0 0!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #f4b400!important}
}

body[data-variant="industrial"] .header{display:grid;grid-template-columns:1fr auto auto;background:#14241e;color:#eef0e5;border-bottom:10px solid #f4b400}
body[data-variant="industrial"] .header nav a{color:#eef0e5}
body[data-variant="industrial"] .header .brand-icon{color:#14241e}
body[data-variant="industrial"] .header .brand strong{color:#f4b400}
body[data-variant="industrial"] .hero{grid-template-columns:38% 62%;border-bottom:12px solid #14241e;background:#eef0e5}
body[data-variant="industrial"] .hero-copy{order:2;border-left:2px solid #14241e}
body[data-variant="industrial"] .hero-art{order:1;filter:saturate(.65) contrast(1.12)}
body[data-variant="industrial"] .variant-note{position:absolute;left:3vw;bottom:3vw;width:31%;background:#f4b400;box-shadow:none}
body[data-variant="industrial"] .variant-note span{color:#14241e}
body[data-variant="industrial"] .yard-section{border-inline:18px solid #14241e}
body[data-variant="industrial"] .drop-button small{color:#fff}
body[data-variant="industrial"] .breakwater-section .serial,body[data-variant="industrial"] .breakwater-section a{color:#14241e}
@media(max-width:760px){
  body[data-variant="industrial"]{overflow-x:hidden}
  body[data-variant="industrial"] header nav a:not(:first-child),
  body[data-variant="industrial"] header nav button{display:none!important}
  body[data-variant="industrial"] .hero{width:100%!important;margin-inline:0!important;display:block!important;clip-path:none!important;transform:none!important}
  body[data-variant="industrial"] .hero-copy{width:100%!important;max-width:calc(100vw - 40px)!important}
  body[data-variant="industrial"] .section-intro,
  body[data-variant="industrial"] .section-heading,
  body[data-variant="industrial"] .section-title{width:100%!important;max-width:calc(100vw - 20px)!important;grid-template-columns:1fr!important}
  body[data-variant="industrial"] .hero p,
  body[data-variant="industrial"] .section-intro > p,
  body[data-variant="industrial"] .variant-note p{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="industrial"] .hero h1{display:block!important;width:100%!important;max-width:100%!important;font-size:42px!important;line-height:.92!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;transform:none!important}
  body[data-variant="industrial"] .section-intro h2,
  body[data-variant="industrial"] .section-heading h2,
  body[data-variant="industrial"] .section-title h2{display:block!important;width:100%!important;max-width:100%!important;font-size:36px!important;line-height:.98!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="industrial"] .variant-note{position:static!important;display:block!important;box-sizing:border-box!important;width:calc(100vw - 40px)!important;max-width:calc(100vw - 40px)!important;min-height:0!important;aspect-ratio:auto!important;margin:1.5rem 0 0!important;border-radius:12px!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #f4b400!important;columns:1!important}
  body[data-variant="industrial"] .game-section,
  body[data-variant="industrial"] .game-shell,
  body[data-variant="industrial"] .mission-shell,
  body[data-variant="industrial"] .cabinet-section,
  body[data-variant="industrial"] .control-section{max-width:100vw!important;margin-inline:0!important;border-inline:0!important;box-shadow:none!important}
  body[data-variant="industrial"] .game-section{padding-inline:10px!important}
}