@font-face {
    font-family: survivor;
    src: url(support/Survivor_Font.ttf);
}
html, body{ 
    height: auto;
    min-height: 100vh;
    background-color: black;
    font-family: "survivor", "Sans Serif";
}
body{
    margin: 0;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.18), transparent 60%),
        radial-gradient(1200px 600px at 90% 0%, rgba(251,191,36,.12), transparent 55%),
        var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    letter-spacing: 1px;
}
.title_img {
	background-image: url("https://www.hollywoodreporter.com/wp-content/uploads/2026/01/TSurvivor50_Group_S1_3-2-e1768352522107.jpg"); 
	position: relative;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
.title_img_alt {
    background-image: url("https://parade.com/.image/t_share/MjAyMTg5OTk4ODA2NTQxMzI0/1781428_26525bc.jpg");
    position: relative;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
}
.title_text {
    position: absolute;
    /*width: 100%;*/
    margin: 0 auto;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.title_text p {
    padding: 10px 20px;
    color: white;
    background-color: black;
    font-size: 40px;
    letter-spacing: 10px;
}
#survivor_form {
    margin: 0 auto;
    height: auto;
    overflow: visible;
    padding-bottom: 100px;
    align-items: center;
    text-align: center;
}
.isHidden {
    display: none;            
}
.tab {
    display: none;
    padding-bottom: 100px;
    align-items: center;
}
h1 {
    font-size: 72px;
    margin-bottom: 0;
    margin-top: 20px;
}
h3 {
    font-size: 36px;
    margin-bottom: 10px;
	margin-top: 0px;
    color: #fff;
}
button {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-family: survivor;
    src: url(Survivor_Font.ttf);
}
select,
.bonusQ_label {
    font-size: 24px;
	padding: 6px;
}
#advance_form {
    height: 80px;
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: center;
    left: 0;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(252, 150, 125, 0.18), transparent 60%),
        radial-gradient(1200px 600px at 90% 0%, rgba(254, 183, 6, 0.12), transparent 55%),
        var(--bg);
    padding: 10px 0px;
    margin-top: 50px;
}
.torch_gif {
	height: 30px;
}
#loginBtn,
#enterBtn,
#resultsBtn,
#prevBtn, 
#nextBtn,
#submitBtn,
#readmeBtn,
#past_responses_button,
#PastResponses, 
#LandingPage {
    /* background-color: #4CAF50; */
    background-color: #969696;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}
#loginBtn:hover,
#enterBtn:hover,
#resultsBtn:hover,
#prevBtn:hover, 
#nextBtn:hover,
#submitBtn:hover,
#readmeBtn:hover,
#past_responses_button:hover,
#PastResponses:hover,
#LandingPage:hover {
    /* opacity: 0.8; */
    background-color: #4CAF50;
}

/* Success screen layout */
#success_screen .success-wrap,
#lockout_screen .lockout-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
#success_screen .success-card,
#lockout_screen .lockout-card {
  max-width: 720px;
  width: 100%;
  padding: 24px 28px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #000;
}
#success_screen .btn-row,
#lockout_screen .btn-row  {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
#success_screen .btn,
#lockout_screen .btn  {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
}
#success_screen .btn.secondary,
#lockout_screen .btn.secondary  { 
    background-color: #bbbbbb; 
    color: #000; 
}
#success_screen .btn:hover,
#lockout_screen .btn:hover  { 
    opacity: 0.85; 
}
#lockout_screen p {
    font-size: 20px;
}



/****************/
/* RESULTS.HTML */
/****************/
.results_title {
    text-align: center;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	background-image: url("https://inside-survivor.ams3.digitaloceanspaces.com/wp-content/uploads/2017/07/FijiNew2017.png");
    background-position: 0 -50px;
    background-repeat: no-repeat;
    background-size: cover;
}
.responses_title {
    text-align: center;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
/* #PastResponses,  */
#LandingPage {
    padding: 5px;
    font-size: 18px;
    background-color: #bbbbbb;
}
#PastResponsesText, 
#LandingPageText {
    font-size: 28px;
}
#chart {
    display: table;
    margin: 0 auto;		
}
.graph {
    display: block;
}
.axis path,
.axis line {
    fill: none;
    stroke: #fff;
    shape-rendering: crispEdges;
    stroke-width: 4px;
}
.axis text,
g text {
    fill: #fff;
}
.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    text-align: left;
    position: absolute;
    z-index: 40;
    font: 12px verdana, sans-serif;
}
.column {
    float: left;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Contestant Input Buttons */
#reward-body,
#immunity-body,
#eliminated-body,
#safe-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    width: min(1100px, 100%); /* optional: max width + responsive */
    margin: 0 auto;
    padding: 16px;
    justify-items: center;     /* centers items horizontally in each cell */
    align-items: start;        /* top-align items vertically (usually best for cards) */
}
.team_cila {
    background-color: rgb(255, 123, 41);
}
.team_kalo {
    background-color: rgb(82, 223, 204);
}
.team_vatu {
    background-color: rgb(221, 93, 214);
}
/* Cast photos from: https://www.survivor50challenge.com/castaways */
.Angelina {
	background-image: url("images/Angelina.webp");
}
.Aubry {
	background-image: url("images/Aubry.webp");
}
.Coach {
	background-image: url("images/Coach.webp");
}
.Chrissy {
	background-image: url("images/Chrissy.webp");
}
.Charlie {
	background-image: url("images/Charlie.webp");
}
.Christian {
	background-image: url("images/Christian.webp");
}
.Cirie {
	background-image: url("images/Cirie.webp");
}
.Colby {
	background-image: url("images/Colby.webp");
}
.Dee {
	background-image: url("images/Dee.webp");
}
.Emily {
	background-image: url("images/Emily.webp");
}
.Genevieve {
	background-image: url("images/Genevieve.webp");
}
.Jenna {
	background-image: url("images/Jenna.webp");
}
.Joe {
	background-image: url("images/Joe.webp");
}
.Jonathan {
	background-image: url("images/Jonathan.webp");
}
.Kamilla {
	background-image: url("images/Kamilla.webp");
}
.Kyle {
	background-image: url("images/Kyle.webp");
}
.Mike {
	background-image: url("images/Mike.webp");
}
.Ozzy {
	background-image: url("images/Ozzy.webp");
}
.Q {
	background-image: url("images/Q.webp");
}
.Devens {
	background-image: url("images/Devens.webp");
}
.Rizo {
	background-image: url("images/Rizo.webp");
}
.Savannah {
	background-image: url("images/Savannah.webp");
}
.Stephenie {
	background-image: url("images/Stephenie.webp");
}
.Tiffany {
	background-image: url("images/Tiffany.webp");
}
.contestants{
    height: 100%;
    margin: 0 auto;
    color: black;
    display: flow-root;
}
.cc-selector {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    margin: 0 12px 10px 0;
    padding-bottom: 10px;
    float: left;
    border-radius: var(--radius);
    overflow: hidden;
    background: url(images/patternBG.jpg) center top / auto repeat;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.cc-selector .name {
    top: 10px;
    left: 10px;
    right: 50px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    position: absolute;
    margin: 0;
}
.cc-selector img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.cc-selector input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cc-selector label.survivor-cc {
    /* The label becomes the portrait frame for contestant image */
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);

    width: var(--portrait-w);
    height: var(--portrait-h);

    border-radius: 12px;
    border: 2px solid rgba(255,255,255,.65);
    overflow: hidden;

    /* Background styling */
    background-color: rgba(255,255,255,.35);
    background-repeat: no-repeat;
    background-size: cover;          /* fills the frame, crops overflow */
    background-position: top center; /* retains top edge */


    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 8px 18px rgba(0,0,0,.20);

    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cc-selector label.survivor-cc:hover {
    transform: translateX(-50%) translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 10px 22px rgba(0,0,0,.26);
}
.cc-selector input[type="radio"]:checked + label.survivor-cc {
    border-color: #ffd54a;
    box-shadow:
        0 0 0 3px rgba(255,213,74,.45),
        0 14px 28px rgba(0,0,0,.28);
    filter: saturate(1.05) contrast(1.05);
}
.greyLabel {
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}


/******************/
/* RESPONSES.HTML */
/******************/
#past_responses,
#review-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    font-size: 28px;
}
#responses_table,
#review_responses_table {
    table-layout: fixed;
    /* width: 50%; */
    margin: 10px auto;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #fff;
}
#responses_table th,
#review_responses_table th {
    background-color: #4CAF50;
}
#responses_table th, 
#responses_table td,
#review_responses_table th, 
#review_responses_table td {
    padding: 0.6em;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
    /* border: 1px solid #fff; */
}
#responses_table colgroup col:first-child {
    width: 55%;
}
#responses_table colgroup col:nth-child(2),
#responses_table colgroup col:nth-child(3) {
    width: 22.5%;
}
#review_responses_table colgroup col:first-child {
    width: 60%;
}
#review_responses_table colgroup col:nth-child(2) {
    width: 40%;
}

@media (max-width: 600px) {
    #responses_table,
    #review_responses_table {
        width: 100%;
        margin: 0;
    }
    #past_responses,
    #review-list {
        font-size: 18px;
    }
    .title_img_alt {
        height: 500px;
    }
}


/******************/
/* LOGIN.HTML     */
/******************/
.login-page {
    /* min-height: 100vh; */
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 3rem;
    gap: 1.25rem;
}

/******************/
/* RULES.HTML     */
/******************/
.rules-page {
    height: auto;
    overflow: visible;
}
.rules-body {
    font-size: 24px;
}
.rules-body h1{
    letter-spacing: 2px;
}
.rules-body h3 {
    letter-spacing: 1px;
}
.rules-table {
    margin-left: 0;
    margin-right: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 0.3px;
}
.rules-table th,
.rules-table td {
    padding: 8px 10px;
    vertical-align: middle;
}
.rules-table thead th {
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.rules-table tbody td {
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rules-table tbody tr:last-child td {
    border-bottom: none; /* Remove last bottom border for clean edge */
}
/* Align numeric columns to the right */
.rules-table th:nth-child(2),
.rules-table th:nth-child(3),
.rules-table td:nth-child(2),
.rules-table td:nth-child(3) {
    text-align: center;
    font-variant-numeric: tabular-nums;
}


/***********************/
/* ENTIRELY NEW SETUP  */
/***********************/
:root{
  --bg: #0b0f17;
  --panel: rgba(15, 22, 35, .78);
  --panel-solid: #0f1623;
  --text: #eaf0ff;
  --muted: #b7c2dd;
  --line: rgba(255,255,255,.10);
  --brand: #7dd3fc;
  --accent: #fbbf24;
  --radius: 14px;

  /* Add-only: contestant card sizing */
  --card-w: 210px;
  --card-h: 305px;
  --portrait-w: 190px;
  --portrait-h: 225px;
}

*{ box-sizing: border-box; }

a{ color: inherit; text-decoration: none; }
a:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

.container{
    width: min(1100px, calc(100% - 2rem));
    margin-inline: auto;
    flex: 1 1 auto;
}

/* ----- Header ----- */
.site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    /* background: var(--panel); */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    font-size: 20px;

    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	background-image: url("images/FijiNew2017.png");
    background-position: 0 -100px;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 0;
    gap: 1rem;
}

.brand{
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(12px, 4vw, 24px);
    white-space: nowrap;
}


/* Nav (desktop baseline) */
.site-nav{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-list{
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: var(--muted);
}
.nav-link:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .9rem;
  border-radius: 999px;
  /* font-weight: 650; */
  border: 1px solid var(--line);
}
.btn-ghost{ background: transparent; }
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.btn-solid{
  background: linear-gradient(135deg, rgba(125,211,252,.25), rgba(251,191,36,.22));
  border-color: rgba(255,255,255,.14);
}
.btn-solid:hover{ filter: brightness(1.07); }

/* ----- Hamburger button ----- */
.nav-toggle{
  display: none; /* shown on mobile */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover{ background: rgba(255,255,255,.07); }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hamburger{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  position: relative;
  border-radius: 2px;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

/* Animate to X when open */
html.nav-open .hamburger{ background: transparent; }
html.nav-open .hamburger::before{ top: 0; transform: rotate(45deg); }
html.nav-open .hamburger::after{ top: 0; transform: rotate(-45deg); }

/* ----- Footer ----- */
.site-footer{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 22, 35, .7), rgba(15, 22, 35, .95));
}

.footer-inner{
  padding: 2rem 0 1.5rem;
}

.footer-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.footer-title{
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--text);
  letter-spacing: .2px;
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list a{
  display: inline-flex;
  padding: .35rem 0;
  color: var(--muted);
}
.footer-list a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom{
    padding-top: 1.25rem;
    display: grid;
    gap: .75rem;
    flex-shrink: 0;
}

.footer-copy{
  margin: 0;
  color: var(--muted);
}

.footer-disclaimer{
  margin: 0;
  color: rgba(183, 194, 221, .85);
  font-size: .92rem;
  line-height: 1.45;
}

/* ----- Mobile behavior ----- */
@media (max-width: 820px){
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  /* Turn nav into an overlay panel */
  .site-nav{
    position: fixed;
    inset: 64px 1rem auto 1rem; /* below header */
    top: 70px;                 /* safe default */
    background: rgba(15, 22, 35, .96);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    display: grid;
    gap: .75rem;

    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .site-nav[data-open="true"]{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-list{
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
  }

  .nav-link{
    width: 100%;
    justify-content: flex-start;
    padding: .7rem .85rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
  }

  .nav-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }

  .footer-cols{
    grid-template-columns: 1fr;
  }
}

/* LOGIN SECTION (reuses your existing :root variables if you kept them) */
.auth{
    padding: 3rem 0 4rem;
    display: flex;
    /* place-items: center; */
    flex-direction: column;
    align-items: center; /* centers header and card as blocks */
    gap: 1.25rem;        /* space between header and card */
}
.auth-card{
    width: min(520px, 100%);
    border: 1px solid var(--line, rgba(255,255,255,.10));
    border-radius: var(--radius, 14px);
    background: rgba(15, 22, 35, .82);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    padding: 1.4rem 1.25rem;
}

.auth-header{
  text-align: center;
  margin-bottom: 1rem;
}

.auth-title{
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: .2px;
}

.auth-subtitle{
  margin: .35rem 0 0;
  color: var(--muted, #b7c2dd);
  font-size: .95rem;
}

.form{
  display: grid;
  gap: .9rem;
}

.field{
  display: grid;
  gap: .35rem;
}

.label{
  font-size: 24px;
  color: rgba(234,240,255,.95);
}

.input{
  width: 100%;
  padding: .75rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text, #eaf0ff);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input::placeholder{
  color: rgba(183,194,221,.75);
}

.input:focus{
  border-color: rgba(125,211,252,.55);
  box-shadow: 0 0 0 4px rgba(125,211,252,.14);
  background: rgba(255,255,255,.06);
}

.form-row{
  display: flex;
  justify-content: flex-start;
  margin-top: -.35rem;
}

.link{
  color: var(--brand, #7dd3fc);
  text-decoration: none;
}

.link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link.subtle{
  color: var(--muted, #b7c2dd);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  color: var(--text, #eaf0ff);
}

.btn-solid{
  background: linear-gradient(135deg, rgba(125,211,252,.25), rgba(251,191,36,.22));
}
.btn-solid-green{
  background: linear-gradient(135deg, rgba(9, 105, 33, 0.616), rgba(251,191,36,.22));
}
.btn-solid:hover{
  filter: brightness(1.06);
}

.btn-block{
  width: 100%;
}

.divider{
  position: relative;
  text-align: center;
  margin: .35rem 0 .15rem;
  color: rgba(183,194,221,.85);
}

.divider::before,
.divider::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: rgba(255,255,255,.10);
}

.divider::before{ left: 0; }
.divider::after{ right: 0; }

.divider span{
  background: rgba(15, 22, 35, .82);
  padding: 0 .65rem;
  border-radius: 999px;
}

.auth-foot{
  margin: 0;
  text-align: center;
  color: var(--muted, #b7c2dd);
}

.login-header {
    width: 100%;
    text-align: center;
}
.login-header h1 {
    margin: 0;
}