/* @import url('_font-sizes.css'); */
@import url('_fixed-widths.css');
@import url('_nav.css');
@import url('_board.css');
@import url('_game.css');
@import url('_home.css');

:root {
  --nav-height: 56px;

  /* Neutrals */
  --clr-bg: #1a1a1a;
  --clr-surface: #242424;
  --clr-border: #41464b;;
  --clr-white: #f0f0f0;
  --clr-muted: #888;

  /* Brand: Mustard */
  --clr-mustard-light: #D9BC60; /* D8BC64; */
  --clr-mustard: #c9a227;
  --clr-mustard-dark: #8a6f1a;

  /* Brand: Olive */
  --clr-olive-light: #C2D3AF; /* B1C29E; */
  --clr-olive: #779556;
  --clr-olive-dark: #3A561C; /* 556A3D; */

  --clr-skyblue: #91B5FD;
  --clr-litered: #fd9891;
  --clr-orange: #e8943d;

  /* Semantic */
  --clr-danger: #DC3545;

  /* Fonts */
  --font-bebas: 'Bebas Neue', sans-serif;
  --font-source: 'Source Sans 3', sans-serif;

  /* Default Board Colors - Wood Classic */
  --board-light: #f0d9b5;
  --board-dark: #b58863;
  --move-dest: rgba(20, 85, 30, 0.5);
  --premove-dest: rgba(20, 30, 85, 0.5);
  --oc-move-dest: rgba(20, 85, 0, 0.3);
  --selected: rgba(20, 85, 30, 0.5);
  --last-move: rgba(155, 199, 0, 0.41);
  --check-0: rgba(220, 53, 69, 0.75);
  --check-25: rgba(220, 53, 69, 0.5);
  --check-89: rgba(169, 0, 0, 0);
  --check-100: rgba(158, 0, 0, 0);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-source); background: var(--clr-bg); color: var(--clr-white); line-height: 1.6; min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; }
#main { flex: 1; }
body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 1000; }

a { color: var(--clr-mustard); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-bebas); }

.bg-surface      { background: var(--clr-surface); }
.bg-white        { background: var(--clr-white); }
.bg-mustard      { background: var(--clr-mustard); }
.bg-olive        { background: var(--clr-olive); }
.bg-litered      { background: var(--clr-litered); }
.bg-skyblue      { background: var(--clr-skyblue); }
.bg-board-white  { background: var(--board-light); }
.bg-board-black  { background: var(--board-dark); }

.text-player-black  { color: var(--board-dark); }
.text-player-white  { color: var(--board-light); }
.text-mustard  { color:var(--clr-mustard)!important; }
.text-mustard-dark { color:var(--clr-mustard-dark)!important; }
.text-olive { color:var(--clr-olive)!important; }
.text-muted { color: var(--clr-muted); }
.text-skyblue { color: var(--clr-skyblue); }
.text-litered { color: var(--clr-litered); }

.color-last-move    { color: rgba(155, 199, 0, 0.8); }

.border-mustard { border-color: var(--clr-mustard); }
.border-surface { border-color: var(--clr-border); }

.badge-mustard { background: var(--clr-mustard); color: var(--clr-bg); }
.badge-olive { background: var(--clr-olive); color: var(--clr-bg); }
.badge-skyblue { background: var(--clr-skyblue); color: var(--clr-bg); }
.badge-litered { background: var(--clr-litered); color: var(--clr-bg); }
.badge-white { background: var(--board-light); color: var(--clr-bg); }
.badge-black { background: var(--board-dark); color: var(--clr-bg); }
.badge-neutral { background: var(--clr-olive-light); color: var(--clr-bg); }

.font-bebas      { font-family: var(--font-bebas); }
.font-source     { font-family: var(--font-source); }

img.ratio-1x1 { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
img.ratio-2x1 { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
img.ratio-3x2 { width: 100%; aspect-ratio: 3/2; object-fit: cover; } /* 1.5/1 */
img.ratio-5x4 { width: 100%; aspect-ratio: 5/4; object-fit: cover; } /* 1.25/1 */

input.form-check-input-lg { width: 1.25rem; height: 1.25rem; }
label.required::after, span.required::after { content: ' *'; color:var(--clr-danger); }
sup i.fa-asterisk { margin-left: 1px; margin-right: 2px; }
.min-vh-85 { min-height: 85vh; }

.btn-circle { border-radius: 50%!important; aspect-ratio: 2.5/1; }
.disabled:hover { cursor: not-allowed; }

/* focus-within color affects BS icon/buttons/floating labels */
.form-control:focus, .form-select:focus, .input-group:focus-within .input-group-text { box-shadow: none!important; border-color: var(--clr-mustard-dark)!important; }
.input-group:focus-within i, .input-group:focus-within .btn, .input-group:focus-within .form-select { color: var(--clr-mustard)!important; border-color: var(--clr-mustard-dark)!important; }
.form-floating:focus-within label { color: var(--clr-mustard)!important; }

.gradient-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-mustard), transparent);
}

.card.card-form { border-color: var(--bs-border-color); } /* card with empty head/foot wrapping forms */
.card.card-form .card-header { background-color: var(--clr-olive); }
.card.card-form .card-footer { background-color: var(--clr-olive); }

#profile_image { width: 112px; height: 112px; }
@media (min-width: 992px) { #profile_image { width: 168px; height: 168px; } }

.grecaptcha-badge { visibility: hidden; }

.navbar-nav a.nav-link { border: 1px solid white; border-radius: 6px; }
.navbar-nav a.nav-link:hover { border: 1px solid var(--clr-mustard); color: var(--clr-mustard)!important; }
.navbar-nav a.nav-link.active { color: var(--clr-bg); border: 1px solid var(--clr-mustard); }
.navbar-nav a.nav-link.nav-link-circle-button { width: 48px; height: 48px; display: flex; justify-content: center; color:var(--clr-white); background-color:var(--clr-surface); border: 1px solid var(--clr-muted); }
.navbar-nav a.nav-link.nav-link-circle-button:hover { color:var(--clr-white)!important; background-color:var(--clr-mustard-dark); border: 1px solid var(--clr-surface); }
.navbar-nav a.nav-link.nav-link-circle-button-user { color:var(--clr-white); background-color:var(--clr-surface); border: none; }
.navbar-nav a.nav-link.nav-link-circle-button-user:hover { color:var(--clr-white)!important; background-color:var(--clr-mustard-dark); border: none; }

#flash { z-index: 9999; top: calc(var(--nav-height) + 8px); }

#footer-links a { color: var(--clr-muted); }
#footer-links a:hover { color: var(--clr-mustard); }
#footer .back-to-top { position: fixed; display: none; right: 15px; bottom: 15px; z-index: 99999; }
#footer .back-to-top i { display: flex; align-items: center; justify-content: center; font-size: 24px; width: 40px; height: 40px; border-radius: 50px; background: var(--clr-mustard); color: var(--clr-bg); transition: all 0.4s; }
#footer .back-to-top i:hover { background: var(--clr-mustard-dark); color: var(--clr-bg); }

/* MOBILE UNDER 480 ADJUSTMENTS */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 { font-weight: 500; font-family: 'Mukta', sans-serif; }
  h1, .h1, .fs-1 { font-size: calc(2rem * 0.75); }
  h2, .h2, .fs-2 { font-size: calc(2rem * 0.7); }
  h3, .h3, .fs-3 { font-size: calc(2rem * 0.65); }
  h4, .h4, .fs-4 { font-size: calc(2rem * 0.6); }
  h5, .h5, .fs-5 { font-size: calc(2rem * 0.55); }
  h6, .h6, .fs-6 { font-size: calc(2rem * 0.5); }
  .card.card-form .card-body { padding: 0.75rem; }
  .panel { padding: 0.75rem; }
}

.form-label { color: var(--clr-mustard); }
.form-label-lg { font-size: 1.3rem; }

/* Buttons */
.btn { font-family: var(--font-bebas); line-height: 1; padding-top: 0.5em; padding-bottom: 0.35em; }

.btn-mustard { background: var(--clr-mustard); color: var(--clr-bg); border-color: var(--clr-mustard); }
.btn-mustard:hover { color: var(--clr-bg); background-color: var(--clr-mustard-light); border-color: var(--clr-mustard-dark); }
.btn-mustard.active { background: var(--clr-mustard); color: var(--clr-white); border-color: var(--clr-mustard); }
.btn-mustard:disabled { color: var(--clr-mustard); background-color: var(--clr-bg); border-color: var(--clr-mustard-dark); }
.btn-outline-mustard { color: var(--clr-mustard); border-color: var(--clr-mustard); background: transparent; }
.btn-outline-mustard:hover, .btn-outline-mustard.active { color: var(--clr-bg); background: var(--clr-mustard); border-color: var(--clr-mustard); }
.btn-outline-mustard:disabled { color: var(--clr-mustard); background-color: var(--clr-bg); border-color: var(--clr-mustard-dark); }

.btn-olive { background: var(--clr-olive); color: var(--clr-bg); border-color: var(--clr-olive); }
.btn-olive:hover { color: var(--clr-bg); background-color: var(--clr-olive-light); border-color: var(--clr-olive-dark); }
.btn-olive.active { background: var(--clr-olive); color: var(--clr-white); border-color: var(--clr-olive); }
.btn-olive:disabled { color: var(--clr-olive); background-color: var(--clr-bg); border-color: var(--clr-olive-dark); }
.btn-outline-olive { color: var(--clr-olive); border-color: var(--clr-olive); background: transparent; }
.btn-outline-olive:hover, .btn-outline-olive.active { color: var(--clr-bg); background: var(--clr-olive); border-color: var(--clr-olive); }
.btn-outline-olive:disabled { color: var(--clr-olive); background-color: var(--clr-bg); border-color: var(--clr-olive-dark); }

.btn-skyblue { background: var(--clr-skyblue); color: var(--clr-bg); border-color: var(--clr-skyblue); }
.btn-skyblue:hover { color: var(--clr-bg); background-color: var(--clr-skyblue-light); border-color: var(--clr-skyblue-dark); }
.btn-skyblue.active { background: var(--clr-skyblue); color: var(--clr-white); border-color: var(--clr-skyblue); }
.btn-skyblue:disabled { color: var(--clr-skyblue); background-color: var(--clr-bg); border-color: var(--clr-skyblue-dark); }
.btn-outline-skyblue { color: var(--clr-skyblue); border-color: var(--clr-skyblue); background: transparent; }
.btn-outline-skyblue:hover, .btn-outline-skyblue.active { color: var(--clr-bg); background: var(--clr-skyblue); border-color: var(--clr-skyblue); }
.btn-outline-skyblue:disabled { color: var(--clr-skyblue); background-color: var(--clr-bg); border-color: var(--clr-skyblue-dark); }


.btn-litered { background: var(--clr-litered); color: var(--clr-bg); border-color: var(--clr-litered); }
.btn-litered:hover { color: var(--clr-bg); background-color: var(--clr-litered-light); border-color: var(--clr-litered-dark); }
.btn-litered.active { background: var(--clr-litered); color: var(--clr-white); border-color: var(--clr-litered); }
.btn-litered:disabled { color: var(--clr-litered); background-color: var(--clr-bg); border-color: var(--clr-litered-dark); }
.btn-outline-litered { color: var(--clr-litered); border-color: var(--clr-litered); background: transparent; }
.btn-outline-litered:hover, .btn-outline-litered.active { color: var(--clr-bg); background: var(--clr-litered); border-color: var(--clr-litered); }
.btn-outline-litered:disabled { color: var(--clr-litered); background-color: var(--clr-bg); border-color: var(--clr-litered-dark); }


/* .btn-outline-danger { color: var(--clr-litered); border-color: var(--clr-litered); }
.btn-outline-danger:hover { background-color: var(--clr-litered); color: var(--clr-bg); border-color: var(--clr-litered); } */

.btn-switch { color: var(--clr-bg); }
.btn-switch.white { background: var(--board-light); }
.btn-switch.black { background: var(--board-dark); }
.btn-switch.white:hover { color: var(--board-light); background: var(--clr-bg); border-color: var(--clr-border); }
.btn-switch.black:hover { color: var(--board-dark); background: var(--clr-bg); border-color: var(--clr-border); }

.border-thick { border-width: 2px; }



/* Rules Page */
.rules-page { padding-top: 24px; }
.rules-heading { font-family: var(--font-bebas); font-size: 1.5rem; color: var(--clr-mustard); }
.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li { padding: 0.75rem 0 0.75rem 2rem; position: relative; color: var(--clr-white); }
.rules-list li i { position: absolute; left: 0; top: 0.85rem; font-size: 0.9rem; }

/* Setup Board */
.setup-row { display: flex; align-items: center; }
.setup-row span { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.setup-row .rank-label { width: 20px; color: var(--clr-muted); font-size: 0.75rem; }
.setup-row.file-labels span { height: 20px; color: var(--clr-muted); font-size: 0.75rem; }
.sq-light { background: #ebecd0; }
.sq-dark { background: var(--clr-olive); }

/* Content Padding */
main#main .container-xl {
  padding-top: calc(var(--nav-height) + 1rem);
  padding-bottom: 3rem;
}

.home.container-xl {
  padding-top: 0;
  padding-bottom: 0;
}

[data-scrollto] { scroll-margin-top: var(--nav-height); }