/* Arrival split (workshop | cruise), view switching and the topbar Cruise button. shell.js sets body[data-view]. */
:root {
  --sa-gold: #e1a744;
  --sa-money: #3c8d34;
  --sa-blue: #7f9fd1;
  --sa-red: #b8312f;
  --sa-font: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --shell-ease: cubic-bezier(.65, 0, .25, 1);
}

/* views; before shell.js has run, the #workshop / #cruise anchors pick the first paint */
body[data-view="arrival"], body[data-view="cruise"] { min-width: 0; overflow: hidden; }
body[data-view="arrival"] > :is(.topbar, .layout, .foot), body[data-view="cruise"] > :is(.topbar, .layout, .foot) { display: none; }
body[data-view="workshop"] > .shell:not(.is-fading) { display: none; }
body:not([data-view]) > #workshop:target ~ .shell { display: none; }
body:not([data-view]) > #cruise:target ~ .shell .shell-work { flex-grow: 0; }

/* outlined San Andreas-style type */
.shell-o { font-family: var(--sa-font); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: .03em;
           -webkit-text-stroke: .16em #000; paint-order: stroke fill; text-shadow: .05em .06em 0 #000; }

/* shell */
.shell { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden; background: #07080b; color: #fff;
         font-family: var(--sa-font); -webkit-tap-highlight-color: transparent; transition: opacity .28s ease; }
.shell.is-entering, .shell.is-fading { opacity: 0; }
.shell.is-fading { pointer-events: none; }
.shell.no-anim, .shell.no-anim * { transition: none !important; }
.shell-halves { position: relative; flex: 1; min-height: 0; display: flex; }
.shell-half { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; outline: none;
              transition: flex-grow .56s var(--shell-ease), border-width .56s var(--shell-ease); }
body[data-view="arrival"] .shell-half:hover, body[data-view="arrival"] .shell-half:focus-visible { flex-grow: 1.2727; }
.shell[data-expand="workshop"] .shell-half.shell-cruise, .shell[data-expand="cruise"] .shell-half.shell-work { flex-grow: 0; }
.shell[data-expand="workshop"] .shell-half.shell-work, .shell[data-expand="cruise"] .shell-half.shell-work { border-width: 0; }
body[data-view="cruise"] .shell-cruise { cursor: default; }
body[data-view="cruise"] .shell.no-game .shell-cruise { cursor: pointer; }
.shell-half::before { content: ''; position: absolute; inset: 10px; z-index: 9; pointer-events: none; border: 3px solid var(--sa-gold);
                      box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; opacity: 0; transition: opacity .15s; }
.shell-half:focus-visible::before { opacity: 1; }

.shell-greet { position: absolute; z-index: 8; top: 0; left: 0; right: 0; padding: clamp(10px, 2.4vh, 26px) 16px clamp(30px, 7vh, 76px);
               text-align: center; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 58%, transparent);
               transition: opacity .3s ease, transform .56s var(--shell-ease); }
.shell-greet .shell-o { display: inline-block; font-size: clamp(28px, 3.5vw, 66px); color: var(--sa-gold); letter-spacing: .07em; }
.shell[data-expand="workshop"] .shell-greet, .shell[data-expand="cruise"] .shell-greet { opacity: 0; transform: translateY(-100%); }

.shell-cta { font-size: clamp(18px, 1.8vw, 34px); color: #fff; letter-spacing: .09em; transition: color .2s; }
body[data-view="arrival"] .shell-half:hover .shell-cta, body[data-view="arrival"] .shell-half:focus-visible .shell-cta { color: var(--sa-gold); }

/* workshop half */
.shell-work { border-right: 4px solid #000;
              background: linear-gradient(rgba(127, 159, 209, .055) 1px, transparent 1px) 0 0 / 32px 32px,
                          linear-gradient(90deg, rgba(127, 159, 209, .055) 1px, transparent 1px) 0 0 / 32px 32px,
                          radial-gradient(90% 75% at 45% 45%, #223047 0%, #131a25 55%, #090c11 100%); }
.shell-work-in { position: absolute; top: 0; bottom: 0; right: 0; width: max(100%, 44vw); display: flex; flex-direction: column;
                 gap: clamp(10px, 2.2vh, 24px); padding: clamp(86px, 14vh, 156px) clamp(22px, 4vw, 76px) clamp(20px, 4.5vh, 52px); }
.shell-title { margin: 0; font-size: clamp(22px, 2.4vw, 46px); color: #fff; }
.shell-title span { color: var(--sa-blue); }
.shell-sheet { position: relative; flex: 1; min-height: 0; background-color: #fbf9f3;
               background-image: linear-gradient(rgba(28, 36, 48, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 36, 48, .045) 1px, transparent 1px);
               background-size: 24px 24px; box-shadow: 0 0 0 3px #000, 0 24px 50px rgba(0, 0, 0, .65);
               transform: rotate(-1.1deg); transition: transform .56s var(--shell-ease); }
.shell-sheet::before { content: ''; position: absolute; inset: 8px; border: 1px solid #1c2430; opacity: .7; }
body[data-view="arrival"] .shell-work:hover .shell-sheet, body[data-view="arrival"] .shell-work:focus-visible .shell-sheet { transform: rotate(0deg); }
.shell-fig { position: absolute; inset: 16px; pointer-events: none; }
.shell-fig .s-cover { fill: url(#shell-hatch); }
.shell-facts { list-style: none; margin: 0; padding: 10px 16px; display: grid; gap: 5px; background: rgba(0, 0, 0, .55); border-left: 4px solid var(--sa-gold);
               font-size: clamp(15px, 1.3vw, 25px); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: #ecebe6; text-shadow: 2px 2px 0 #000; }
.shell-facts li::before { content: '\25B8'; color: var(--sa-gold); margin-right: .5em; }
.shell-facts b { font-weight: 400; color: #5cbf50; }
.shell-work .shell-cta { align-self: flex-start; }

/* cruise half */
.shell-cruise { background: #1a1410; }
.shell-scene { position: absolute; inset: 0; overflow: hidden;
               background: linear-gradient(#150c22 0%, #35194a 24%, #852c55 46%, #d4583f 62%, #f2a04b 72%, #f7c568 78%); }
.shell-sun { position: absolute; left: 50%; top: 61%; width: min(48%, 50vh); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
             background: linear-gradient(#fff0b0, #f9bb52 42%, #ef6c3a 78%);
             -webkit-mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 83%, #000 83%);
             mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 83%, #000 83%); }
.shell-palms { position: absolute; inset: 0; width: 100%; height: 100%; fill: #12070f; }
.shell-palms .shell-hills { fill: #2b1124; }
.shell .shell-stage { position: absolute; inset: 0; z-index: 1; outline: none; }
.shell.no-game .shell-stage { display: none; }
.shell-cruise::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .6)); transition: opacity .3s; }
.shell-over { position: absolute; z-index: 3; left: 0; bottom: 0; width: max(100%, 44vw); padding: 0 20px clamp(22px, 6vh, 72px); text-align: center;
              pointer-events: none; transition: opacity .3s ease; }
.shell[data-expand="cruise"] .shell-over, .shell[data-expand="cruise"] .shell-cruise::after { opacity: 0; }
.shell.no-game .shell-over, .shell.no-game .shell-cruise::after { display: none; }
.shell-logo { display: flex; flex-direction: column; align-items: center; color: var(--sa-gold); }
.shell-logo span:first-child { font-size: clamp(46px, 6.6vw, 130px); letter-spacing: .02em; }
.shell-logo span + span { font-size: clamp(25px, 3.4vw, 66px); letter-spacing: .34em; margin-right: -.34em; color: #fff; }
.shell-over .shell-cta { margin-top: clamp(12px, 2.6vh, 28px); animation: shell-pulse 1.7s ease-in-out infinite; }
.shell-pad { display: none; margin-top: 8px; font: 600 13px/1.3 'Segoe UI', system-ui, sans-serif; color: #f4efe2; text-shadow: 1px 1px 0 #000, 0 0 6px #000; }
@keyframes shell-pulse { 50% { opacity: .45; } }

.shell-nogame { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 24%; padding: 0 24px; text-align: center; }
.shell.no-game .shell-nogame { display: block; }
.shell-nogame p { max-width: 26em; margin: 18px auto; font: 600 15px/1.4 'Segoe UI', system-ui, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 8px #000; }

/* topbar hooks */
a.brand { color: inherit; text-decoration: none; }
a.brand:hover .mark { background: #eef0f3; color: var(--ink); }
.shell-cruise-btn { flex: none; padding: 5px 13px 4px; border: 2px solid var(--sa-gold); background: #000; color: var(--sa-gold); text-decoration: none;
                    font: 19px/1 var(--sa-font); letter-spacing: .07em; text-transform: uppercase; -webkit-text-stroke: 3px #000; paint-order: stroke fill;
                    text-shadow: 1px 1px 0 #000; box-shadow: 2px 2px 0 #000; }
.shell-cruise-btn:hover { background: var(--sa-gold); color: #fff; }
a.brand:focus-visible, .shell-cruise-btn:focus-visible { outline: 2px solid var(--sa-gold); outline-offset: 3px; }

/* touch devices and narrow screens */
@media (hover: none) and (pointer: coarse) {
  .shell-pad { display: block; }
}
@media (max-width: 819px) {
  .shell-greet { position: relative; flex: none; padding: 12px 12px 10px; background: #000; border-bottom: 3px solid #000; }
  .shell-greet .shell-o { font-size: clamp(24px, 8vw, 40px); }
  .shell[data-expand="workshop"] .shell-greet, .shell[data-expand="cruise"] .shell-greet { display: none; }
  .shell-halves { flex-direction: column; }
  .shell-work { border-right: 0; border-bottom: 4px solid #000; }
  .shell-work-in { width: 100%; padding: 14px 16px 16px; gap: 10px; }
  .shell-title { font-size: 22px; }
  .shell-sheet { transform: rotate(-.6deg); }
  .shell-fig { inset: 10px; }
  .shell-facts { font-size: 15px; padding: 8px 12px; gap: 3px; }
  .shell-cta { font-size: 19px; }
  .shell-over { width: 100%; padding-bottom: 18px; }
  .shell-logo span:first-child { font-size: clamp(40px, 13vw, 66px); }
  .shell-logo span + span { font-size: clamp(22px, 7vw, 36px); }
  .shell-pad { display: block; }
  .shell-nogame { top: 12%; }

  /* the catalogue on a phone: one column, page scrolls */
  body[data-view="workshop"] { min-width: 0; height: auto; min-height: 100%; }
  .topbar { height: auto; flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .brand { min-width: 0; margin-right: auto; }
  .vchip { order: 5; flex: 1 1 100%; overflow-x: auto; }
  .vchip span { flex: none; white-space: nowrap; }
  .search { order: 6; flex: 1 1 100%; }
  .search input { max-width: none; font-size: 16px; }
  .seg-label { order: 7; }
  .seg { order: 8; }
  .layout { display: flex; flex-direction: column; }
  .tree { order: 3; border-right: 0; border-top: 1px solid var(--rule); }
  .centre { padding: 10px 10px 8px; }
  .title-row { flex-wrap: wrap; row-gap: 4px; }
  .title-row h1 { white-space: normal; font-size: 17px; }
  .sheet { flex: none; display: flex; flex-direction: column; }
  .legend { position: static; flex-wrap: wrap; gap: 4px 12px; padding: 16px 16px 0; }
  #fig { position: relative; inset: auto; aspect-ratio: 1000 / 680; margin: 6px 12px; }
  .titleblock { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 0 8px 8px 0; }
  .toolbar { flex-wrap: wrap; gap: 8px 10px; }
  .toolbar input[type=range] { flex: 1 1 120px; width: auto; }
  .toolbar .sp { display: none; }
  .side { border-left: 0; border-top: 1px solid var(--rule); }
  .tabs { order: 0; }
  .detail { order: 1; max-height: none; border-top: 0; border-bottom: 2px solid var(--ink); }
  .pane { order: 2; overflow: visible; }
  .foot { flex-wrap: wrap; }
  .foot .key { flex-wrap: wrap; gap: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell, .shell * { transition: none !important; animation: none !important; }
  body[data-view="arrival"] .shell-half:hover, body[data-view="arrival"] .shell-half:focus-visible { flex-grow: 1; }
  body[data-view="arrival"] .shell-work:hover .shell-sheet, body[data-view="arrival"] .shell-work:focus-visible .shell-sheet { transform: rotate(-1.1deg); }
}