/* Fonts */
@font-face {
    font-family: 'Crux Lato';
    src: url('https://powgi.tv/crux/webapp/fonts/Lato-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Crux Lato';
    src: url('https://powgi.tv/crux/webapp/fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}

/* Brand colours and typography */
:root {
    --crux-blue: #3c5daa;
    --crux-dark: #2f4988;
    --bs-body-font-family: 'Crux Lato',Arial,sans-serif;
    --bs-body-font-weight: 500;
    --bs-body-color: #111;
    --bs-link-color: #111;
    --bs-link-hover-color: #3c5daa;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 1rem;
}

/* Repeating wallpaper; paths are relative to this CSS file. */
body {
    min-height: 100vh;
    background-color: #dedede;
    background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)),
        url('images/crux-grid-tile.svg');
    background-size: auto, 552px 552px;
    background-repeat: repeat;
}


h1,h2,h3,h4,strong,b,.fw-bold {
    font-weight: 900!important;
}

h1 {
    font-size: clamp(2.1rem,5vw,3.65rem);
    line-height: 1.06;
    letter-spacing: -.04em;
}

h2 {
    font-size: clamp(1.4rem,3vw,1.85rem);
    letter-spacing: -.025em;
}

h3 {
    font-size: 1.25rem;
}

/* Header and navigation */
.site-shell {
    max-width: 1140px;
}

.site-nav {
    padding: 1rem 0;
}

.brand-logo {
    width: 150px;
    height: auto;
    display: block;
}

.nav-link {
    color: #111;
    font-weight: 900;
}

/* Panels and hero */
.panel {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 22px #18212e08;
}

.hero {
    padding: clamp(1rem,3vw,2.3rem);
}

.hero-copy {
    max-width: 29rem;
}

.hero-copy p {
    font-size: 1.14rem;
    line-height: 1.55;
}

.hero-art {
    width: 100%;
    height: auto;
    border-radius: .75rem;
}

.btn {
    font-weight: 900;
    border-radius: .55rem;
    padding: .65rem 1.05rem;
    white-space: normal;
}

.btn-crux {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3c5daa;
    --bs-btn-border-color: #3c5daa;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f4988;
    --bs-btn-hover-border-color: #2f4988;
    --bs-btn-active-bg: #2f4988;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 60,93,170;
}

.btn-outline-dark {
    --bs-btn-border-width: 2px;
}

/* Tutorial */
.tutorial {
    padding: 1rem;
}

.tutorial-preview {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: .75rem;
    overflow: hidden;
    background: #dfe5ee;
}

.tutorial-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.tutorial-preview:focus-visible {
    outline: 3px solid #3c5daa;
    outline-offset: 4px;
}

/* Ways-to-play cards */
.format-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
}

.format-icon {
    width: 80px;
    height: 110px;
    object-fit: contain;
    flex: none;
}

.format-copy {
    flex: 1;
    min-width: 0;
}

.format-copy p {
    font-size: .94rem;
    line-height: 1.45;
}

/* Player resources */
.resource-panel {
    padding: .4rem 1.25rem;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem .25rem;
    text-decoration: none;
    color: #111;
    min-height: 88px;
    border-bottom: 1px solid #e5e8ec;
}

.resource-link:hover {
    color: #3c5daa;
    background: #f8f9fb;
}

.resource-icon {
    width: 30px;
    height: 30px;
    flex: none;
    color: #3c5daa;
}

.resource-copy {
    flex: 1;
}

.resource-copy strong {
    display: block;
}

.resource-copy span {
    font-size: .9rem;
    color: #555;
}

.resource-arrow {
    font-size: 1.6rem;
    color: #3c5daa;
}

.resource-link:last-child {
    border-bottom: 0;
}

/* Footer and accessibility */
.footer {
    font-size: .85rem;
    padding: 1.5rem .25rem 2rem;
    gap: 1rem;
}

.placeholder-notice {
    font-size: .85rem;
    border: 1px dashed #acb8d1;
    border-radius: .6rem;
    padding: .8rem;
    background: #f5f7fc;
}

.section {
    margin-top: 1.5rem;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    background: white;
    padding: 1rem;
}

.skip-link:focus {
    top: 1rem;
}

a:focus-visible,button:focus-visible {
    outline: 3px solid #3c5daa;
    outline-offset: 3px;
}

@media(min-width:992px) {
    .hero .row {
        min-height: 350px;
    }
    .format-card {
        align-items: flex-start;
    }
    .format-icon {
        width: 68px;
        height: 100px;
    }
    .resource-panel .col-md-6:first-child {
        border-right: 1px solid #e5e8ec;
    }
}

@media(max-width:575.98px) {
    .brand-logo {
        width: 120px;
    }
    .site-nav {
        padding: .75rem 0;
    }
    .hero-actions .btn {
        width: 100%;
    }
    .hero-copy p {
        font-size: 1rem;
    }
    .section {
        margin-top: 1rem;
    }
    .format-card {
        padding: 1rem;
    }
    .hero-art {
        margin-top: .35rem;
    }
    .footer {
        flex-direction: column;
    }
    .resource-panel {
        padding: .25rem .8rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* Product pages */
.product-photo{display:block;width:100%;height:auto;aspect-ratio:600/410;object-fit:contain;border-radius:12px}
.product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.product-description{line-height:1.65}.product-description h1{font-size:clamp(2rem,4vw,3rem)}
.product-description ul{padding-left:1.2em}.product-note{font-size:.95rem;color:#555}
@media(max-width:767px){.product-layout{grid-template-columns:1fr;gap:24px}}

.crux-game-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  margin: 1.25rem 0;
  font-family: inherit;
  font-size: 1rem;
}

.crux-game-facts span {
  white-space: nowrap;
}

.crux-game-facts strong {
  font-weight: 900;
}

.footer a {
  color: #3c5daa;
}

.footer a:hover,
.footer a:focus-visible {
  color: #2c4682;
}