/* Safe-area and mobile-friendly defaults */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body { height: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }

.app-root { box-sizing: border-box; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }

.topbar{display:block; padding:6px 0 12px 0; margin-bottom:8px}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}
:root{
  --card-min-height-desktop: 520px;
  --card-min-height-md: 440px;
  --card-min-height-sm: 360px;
}
.top-inner{display:flex; justify-content:center; align-items:center; gap:18px}
.logo{height:36px}
.lang-select{padding:8px 10px; border-radius:8px; border:none; box-shadow:0 6px 18px rgba(2,6,23,0.06)}

body { background:#f5f7fb; margin:0; padding:20px 20px 40px; }
.card { max-width:500px; margin:12px auto 40px; background:white; padding:36px; border-radius:10px; box-shadow:0 8px 28px rgba(2,6,23,0.06); min-height:var(--card-min-height-desktop); display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center }
.btn { display:inline-block; padding:12px 22px; background:#6b46c1; color:white; text-decoration:none; border-radius:8px; border:none; cursor:pointer; font-size:20px; font-weight:600 }
.question { font-size:1.4rem; color:#3b0b6f; }
.choices { display:flex; gap:12px; margin-top:18px; }
.btn.true { background: #2f855a; }
.btn.false { background: #e53e3e; }
.score { font-size:2rem; font-weight:700; margin:10px 0; }
.results-list { list-style:none; padding:0; background: transparent; }
.result-item { padding:16px 12px; border-bottom:1px solid rgba(255,255,255,0.06); background: transparent; }
.result-item.ok { background: rgba(240,255,244,0.06) }
.result-item.bad { background: rgba(255,245,245,0.06) }
.result-item .text, .result-item .meta { color: rgba(255,255,255,0.95); }
.meta { font-size:0.95rem; margin-top:6px; }

.muted{color:#475569}

/* hero card with background image */
/* default (index) uses original bg */
.hero-card{background-image: url('/static/bg.png'); background-size:cover; background-position:center; color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; min-height:var(--card-min-height-desktop); padding:40px}

/* results page should use final background */
.hero-card.results{background-image: url('/static/bg_final.png')}
.hero-card.results::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,0.45), rgba(2,6,23,0.45)); z-index:1}
.hero-card.results > *{position:relative; z-index:2}
/* .hero-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,0.6), rgba(15,23,42,0.6));} */
.hero-card > *{position:relative; z-index:2}
.hero-card .topbar{align-self:stretch}
.hero-card .top-inner{justify-content:center}
.hero-card form{margin:0}
.hero-card .btn{margin-top:8px}
.hero-card .muted{color:rgba(255,255,255,0.95)}

/* Footer buttons: centered, stacked, and wrapped */
.card-footer .btn{
  background:#6b46c1;
  color:#fff;
  display:block;
  padding:12px 20px;
  border-radius:8px;
  font-size:20px;
  font-weight:600;
  width:100%;
  max-width:340px;
  box-sizing:border-box;
  margin:0 auto; /* center the button */
  white-space:normal; /* allow wrapping */
  text-align:center;
}
/* ensure no horizontal offset between stacked buttons */
.card-footer .btn + .btn{margin-left:0}

/* group main title and lead tightly */
.hero-main{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:12px; align-items:center}
.hero-main h1{margin:0; font-size:36px; text-align:center}
.hero-main .muted {
  margin: 0;
  font-size:20px;
  line-height: 1.4;
  box-sizing: border-box;
  font-weight: 600;
}

/* make box-sizing consistent across elements so width calculations include padding */
*, *::before, *::after { box-sizing: inherit; }

/* Prevent accidental horizontal and vertical scrolling at the root by default.
  Individual inner containers may enable their own scrolling (e.g. .results-viewport). */
html, body, .app-root { overflow-x: hidden; overflow-y: hidden; }

/* Defensive rules: ensure no element exceeds viewport width */
body, .app-root, .card, .hero-card, .topbar, .top-inner, .hero-main, .results-wrapper, .results-viewport, .results-list { max-width: 100vw; }
.card, .hero-card, .results-viewport { overflow-x: hidden; }

/* make sure inline elements (images, svgs) don't overflow */
img, svg { max-width: 100vw; height: auto; display: block; }

/* ensure question text matches hero width */
.card .content-inner{max-width:500px; width:100%; margin:0 auto}
.question{max-width:500px; margin:0 auto; text-align:left}

.results-wrapper{position:relative}
.results-viewport{max-height:150px; overflow:hidden; position:relative}
.results-list{
  position:relative;
  margin:0;
  padding:0 0 8px 0;
  list-style:none;
  transform: translateY(0);
  transition: transform 0.08s linear;
}

.result-item{position:relative; padding:8px 56px 8px 12px; border-bottom:1px solid rgba(255,255,255,0.06); background:transparent}
.result-item .text{font-size:15px; font-weight:600; color:rgba(255,255,255,0.95); line-height:1.15; text-align:left}
.result-item .meta{display:block; font-size:12px; color:rgba(255,255,255,0.78); margin-top:4px}

.status-icon{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
.status-icon .icon{width:40px; height:40px; stroke:#fff; stroke-width:2}

/* Responsive icon sizing for different screen sizes */
.logo{height:clamp(22px, 5vw, 36px)}
.status-icon{width:clamp(28px, 8vw, 44px); height:clamp(28px, 8vw, 44px);}
.status-icon .icon{width:clamp(18px, 5.5vw, 40px); height:clamp(18px, 5.5vw, 40px)}
.status-icon.ok{background:rgba(56,161,105,0.12); border:2px solid rgba(56,161,105,0.95);}
.status-icon.bad{background:rgba(229,62,62,0.08); border:2px solid rgba(229,62,62,0.95);}

.card-footer{display:flex; flex-direction:column; gap:12px; justify-content:center; align-items:center; margin-top:12px}

/* wrapper for custom scrollbar */
.results-wrapper{position:relative}
.custom-scrollbar{position:absolute; right:8px; top:8px; bottom:8px; width:6px; background:transparent; display:block; border-radius:6px}
.custom-scrollbar-thumb{position:absolute; left:0; right:0; width:100%; background:rgba(255,255,255,0.95); border-radius:8px}
.results-wrapper .results-list{padding-right:28px} /* make space for the custom scrollbar */

/* end scrollbar adjustments */

/* if the card is narrow, keep the paragraph left-aligned but allow full width */
@media (max-width:900px){
  .hero-card{min-height:440px; padding:32px}
  .card{min-height:var(--card-min-height-md)}
  .results-viewport { max-height: 240px; overflow-y: auto; }
}

@media (max-width:560px){
  .top-inner{padding:0 8px; gap:12px}
  .logo{height:30px}
  .lang-select{padding:6px 8px; font-size:14px}
  .card{margin:24px 12px 24px; padding:22px; min-height:var(--card-min-height-sm)}
  .hero-card{min-height:440px; padding:20px}
  .btn{width:100%; padding:14px}
  .hero-main .muted{max-width:100%; text-align:left}
  .results-viewport { max-height: 240px; overflow-y: auto; }
}

/* Mobile/iPhone specific fixes: remove large outer padding, allow scrolling */
@media (max-width:480px){
  body { padding: 0; }
  /* small horizontal padding so content doesn't touch viewport edges; reduce to make hero wider */
  .app-root { padding: 0 4px; }
  /* Make cards full-bleed on mobile: remove rounded corners and let background reach edges */
  .card { margin: 0; padding: 14px; width:100%; max-width:none; min-height: auto; box-shadow: 0 6px 18px rgba(2,6,23,0.06); border-radius: 0; }
  /* Make the hero background cover the full mobile viewport while keeping content
     anchored at the top so buttons are visible without extra vertical scrolling. */
  .hero-card {
    padding: 14px;
    /* use dynamic viewport units where supported and fall back to calc(100vh...) */
    min-height: calc(100svh - var(--safe-top) - var(--safe-bottom));
    min-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
    border-radius: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* center horizontally */
    justify-content: flex-start; /* anchor content to the top */
    padding-left: 6px;
    padding-right: 6px;
  }
  /* ensure safe-area inset at the bottom/top for devices with home indicator */
  .hero-card { padding-top: calc(14px + var(--safe-top)); padding-bottom: calc(14px + var(--safe-bottom)); }
  .hero-main h1 { font-size: 22px; }
  /* allow hero content to span full width */
  .hero-main{ max-width:100%; width:100%; padding:30px; }
  .hero-main .muted { font-size: 16px; line-height:1.3; }
  .btn { font-size: 16px; padding: 10px 12px; }

  /* Make results list scroll naturally instead of using JS-only transform
    and center the block by making the wrapper a flex container. */
  /* Ensure the results viewport fills the same content width as `.content-inner` so
    it will be centered with the page's main content on all mobile widths. */
  .results-wrapper { display:block; padding-left:0; padding-right:0; box-sizing:border-box; }
  .results-viewport { width:100%; max-width:100%; box-sizing:border-box; padding:0 12px; max-height:48vh; overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0 auto; }
  .results-list { position:static; transform:none; transition:none; padding-right:12px }
  .custom-scrollbar { display:none; }

  /* reduce spacing and ensure content flows vertically */
  .card-footer { margin-top: 12px; gap:10px }
  /* give result items balanced padding: extra right padding reserves space for the
    absolutely-positioned status icon while left padding keeps text away from edge */
  .result-item { padding:12px 56px 12px 16px }
  .result-item .text { font-size:14px }
  .result-item .meta { font-size:12px }
  /* ensure icon stays within the reserved right padding and doesn't overlap text */
  .status-icon { right:16px; }
  .card .content-inner{ padding-left:6px; padding-right:6px }
}

/* Desktop / wider screens: center the content and constrain widths (not full-bleed) */
@media (min-width:721px) {
  /* give some horizontal breathing room on big screens */
  .app-root { padding-left: 24px; padding-right: 24px; }

  /* constrain hero to a centered card with rounded corners */
  .hero-card { max-width: 920px; margin: 24px auto; border-radius: 12px; overflow: hidden; }

  /* constrain regular cards to a readable width */
  .card { max-width: 600px; margin: 24px auto; border-radius: 10px; }

  /* /* allow the results list to show more items on larger screens */
  .results-viewport { max-height: 240px; overflow-y: auto; }

  /* allow native overflow-x where appropriate on desktop */
  html, body, .app-root { overflow-x: visible; overflow-y: visible; }
}