/* ==========================================================================
   Beta (games, asset packs, tester account) in the 2026 site design.

   The beta templates were written with Bootstrap class names and used to extend the old
   base template, so entering /beta/ swapped the whole menu, fonts and footer. They now
   extend base_site.html; this file gives the Bootstrap names they use a look that matches
   site.css (same tokens, same radii). Everything is scoped under .beta, so nothing here
   can change another page of the site.
   ========================================================================== */

.beta{flex:1 0 auto;color:var(--ink);font-size:15px;line-height:1.55}
.beta a{color:var(--accent)}
.beta a:hover{color:var(--accent-d)}

/* Page header (replaces the dark Bootstrap band) --------------------------- */
.beta .header{
  background:var(--navy);color:#fff;text-align:left;
  padding:clamp(40px,6vw,72px) clamp(16px,5vw,48px) clamp(34px,5vw,56px);
}
.beta .header .container{max-width:var(--wrap);padding:0}
.beta .header h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,54px);
  line-height:1.06;letter-spacing:-.016em;margin:0;color:#fff;
}
.beta .header .lead{color:#c3cde0;margin:14px 0 0;max-width:60ch}

/* Sub-navigation of the beta area ------------------------------------------ */
.beta-nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  padding:0 clamp(16px,5vw,48px);min-height:48px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.beta-nav__label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-right:4px}
.beta-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  color:var(--ink2);font-weight:500;font-size:14px;text-decoration:none;
  border-bottom:2px solid transparent;
}
.beta-nav a:hover{color:var(--accent)}
.beta-nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.beta-nav__end{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 22px}

/* Layout -------------------------------------------------------------------- */
.beta .container{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,5vw,48px)}
.beta .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.beta .row > *{grid-column:span 12;min-width:0}
@media (min-width:576px){.beta .col-sm-6{grid-column:span 6}}
@media (min-width:768px){.beta .col-md-4{grid-column:span 4}.beta .col-md-7{grid-column:span 7}.beta .col-md-8{grid-column:span 8}}
@media (min-width:992px){.beta .col-lg-4{grid-column:span 4}.beta .col-lg-6{grid-column:span 6}}
.beta .g-4{gap:24px}

.beta .d-flex{display:flex}
.beta .d-block{display:block}
.beta .flex-wrap{flex-wrap:wrap}
.beta .align-items-center{align-items:center}
.beta .align-items-start{align-items:flex-start}
.beta .justify-content-between{justify-content:space-between}
.beta .justify-content-center{justify-content:center}
.beta .gap-2{gap:8px}
.beta .gap-3{gap:16px}
.beta .w-100{width:100%}
.beta .h-100{height:100%}
.beta .px-0{padding-left:0;padding-right:0}
.beta .py-2{padding-top:8px;padding-bottom:8px}
.beta .pb-2{padding-bottom:8px}
.beta .pb-3{padding-bottom:16px}
.beta .mb-0{margin-bottom:0}.beta .mb-1{margin-bottom:4px}.beta .mb-2{margin-bottom:8px}
.beta .mb-3{margin-bottom:16px}.beta .mb-4{margin-bottom:24px}
.beta .mt-1{margin-top:4px}.beta .mt-3{margin-top:16px}.beta .mt-4{margin-top:24px}
.beta .ms-2{margin-left:8px}
.beta .my-4{margin-top:24px;margin-bottom:24px}.beta .my-5{margin-top:48px;margin-bottom:48px}
.beta .text-center{text-align:center}
.beta .text-nowrap{white-space:nowrap}
.beta .overflow-auto,.beta .table-responsive{overflow:auto}
.beta .border-0{border:0}
.beta .border-bottom{border-bottom:1px solid var(--line)}
.beta .rounded{border-radius:9px}
.beta .img-fluid{max-width:100%;height:auto}
.beta .list-unstyled{list-style:none;padding:0;margin:0}
.beta .small{font-size:13px}
.beta .fs-1{font-size:clamp(30px,4vw,42px)}.beta .fs-5{font-size:18px}.beta .fs-6{font-size:15px}
.beta .text-muted,.beta .portal-muted{color:var(--mut)}
.beta .text-danger{color:#b3261e}
.beta .text-warning{color:#8a5a00}
.beta .text-dark{color:var(--ink)}
.beta .text-white{color:#fff}
.beta .bg-transparent{background:transparent}

/* Cards --------------------------------------------------------------------- */
.beta .card,.beta .portal-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.beta a.card:hover,.beta .card:hover{border-color:#b9c6e2}
.beta .card-img-top{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--line2)}
.beta .card-body{padding:20px 22px;flex:1 1 auto}
.beta .card-title{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.beta .card-text{margin:0 0 12px}
.beta .card-footer{padding:0 22px 20px}
.beta .portal-card{padding:20px 22px}
.beta .portal-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Buttons (same size, radius and hover as .btn in the site) ----------------- */
.beta .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:9px;border:1px solid transparent;
  font-family:var(--sans);font-weight:600;font-size:14.5px;line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:normal;text-align:center;
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.beta .btn-sm{min-height:44px;padding:9px 16px;font-size:13.5px;border-radius:8px}
.beta .btn-primary,.beta .btn-success,.beta .btn-dark{color:#fff}
.beta .btn-primary{background:var(--accent)}
.beta .btn-primary:hover{background:var(--accent-d);color:#fff;transform:translateY(-1px)}
.beta .btn-success{background:#1a7f4b}
.beta .btn-success:hover{background:#13633a;color:#fff;transform:translateY(-1px)}
.beta .btn-dark{background:var(--navy)}
.beta .btn-dark:hover{background:#1b3053;color:#fff;transform:translateY(-1px)}
.beta .btn-secondary{background:#5b6678;color:#fff}
.beta .btn-secondary:hover{background:#465060;color:#fff}
.beta .btn-outline-primary,.beta .btn-outline-secondary{background:var(--panel);border-color:var(--line);color:var(--ink)}
.beta .btn-outline-primary:hover,.beta .btn-outline-secondary:hover{border-color:var(--accent);color:var(--accent)}
.beta .btn:focus-visible,.beta a:focus-visible,.beta .form-control:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px}
.beta .btn[disabled],.beta .btn.disabled{opacity:.55;pointer-events:none}

/* Badges -------------------------------------------------------------------- */
.beta .badge{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;line-height:1.3;vertical-align:middle;color:#fff;
}
.beta .bg-secondary{background:#5b6678}
.beta .bg-success{background:#1a7f4b}
.beta .bg-danger{background:#b3261e}
.beta .bg-dark{background:var(--navy)}
.beta .bg-warning{background:#f5c542;color:var(--ink)}
.beta .badge.bg-warning.text-dark{color:var(--ink)}

/* Alerts -------------------------------------------------------------------- */
.beta .alert{padding:14px 18px;border-radius:12px;border:1px solid;margin:0 0 16px;font-size:14.5px}
.beta .alert-info{background:#eaf1ff;border-color:#c5d5f7;color:#173e9e}
.beta .alert-success{background:#e7f6ee;border-color:#b6e0c7;color:#14603a}
.beta .alert-warning{background:#fff6dd;border-color:#f0d98b;color:#6b4a00}
.beta .alert-danger,.beta .alert-error{background:#fdeceb;border-color:#f3c0bc;color:#8e1d17}

/* Forms --------------------------------------------------------------------- */
.beta .form-label{display:block;margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.beta .form-control{
  display:block;width:100%;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;color:var(--ink);font-size:15px;font-family:var(--sans);outline:none;
  transition:border-color .2s,background .2s;
}
.beta .form-control:focus{border-color:var(--accent);background:#fff}
.beta textarea.form-control{resize:vertical}
.beta .form-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.beta .form-check-input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.beta .form-check-label{font-size:14.5px}
.beta .hint,.beta .helptext{color:var(--mut);font-size:13px}

/* Tables and lists ---------------------------------------------------------- */
.beta .table{width:100%;border-collapse:collapse;font-size:14.5px}
.beta .table th{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left}
.beta .table th,.beta .table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.beta .table-sm th,.beta .table-sm td{padding:8px 10px}
.beta .align-middle{vertical-align:middle}
.beta .list-group{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.beta .list-group-item{padding:13px 18px;border-bottom:1px solid var(--line2)}
.beta .list-group-item:last-child{border-bottom:0}
.beta .list-group-flush{border:0;border-radius:0}

@media (max-width:575px){
  .beta .header{padding-top:36px}
  .beta .card-body{padding:18px}
  .beta .table{font-size:14px}
}