/* KwizPic — daily true/false photo game
   Aesthetic: warm parchment + burnished gold/bronze, playful hourglass brand mark,
   confident chunky T/F tokens like the mockup, generous whitespace on desktop,
   edge-to-edge photo on mobile. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,700&display=swap');

:root{
  --cream:#faf3e4;
  --cream-2:#f2e6cd;
  --ink:#2b2318;
  --ink-soft:#5c5140;
  --gold:#b3812f;
  --gold-2:#8a611f;
  --gold-light:#d9a94f;
  --true-green:#2f9e56;
  --true-green-dark:#1f7d40;
  --false-red:#d8433f;
  --false-red-dark:#b32d2a;
  --border:#e2d3ab;
  --shadow: 0 10px 30px rgba(60, 40, 10, 0.12);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(circle at 15% -10%, #fff8ea 0%, var(--cream) 45%, #f4e9d1 100%);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 90px; /* room for fixed progress bar */
}

.wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ---------------- Header ---------------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
  gap: 10px;
}
.logo{
  display:flex; align-items:center; gap:10px;
}
.logo img{ height: 75px; width:auto; display:block; }
.header-icons{ display:flex; gap:10px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%;
  background: #fff;
  border: 2px solid var(--gold);
  color: var(--gold-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease;
  flex-shrink:0;
}
.icon-btn:hover{ transform: translateY(-2px); background: var(--cream-2); }
.icon-btn svg{ width:20px; height:20px; }

.bell-icon:hover {
  /* Set the pivot point to the top center of the icon */
  transform-origin: top center;
  animation: rotational-shake 0.3s ease-in-out infinite;
}

/* Define the rotation values */
@keyframes rotational-shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

/* ---------------- Photo ---------------- */
.photo-card{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#000;
  margin-bottom: 20px;
  position:relative;
  aspect-ratio: 4 / 3;
}
.photo-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-card .date-chip{
  position:absolute; top:12px; left:12px;
  background: rgba(20,15,5,.55);
  color:#fff; font-weight:700; font-size:.78rem;
  padding:5px 12px; border-radius:99px;
  backdrop-filter: blur(4px);
  letter-spacing:.02em;
}

/* ---------------- Questions ---------------- */
.questions{ display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
.question-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(60,40,10,.05);
  transition: box-shadow .2s ease;
}
.question-row.answered{ background: #fffdf8; }
.question-row.correct{ background: #e3f7e9; border-color: var(--true-green); }
.question-row.wrong{ background: #fdeceb; border-color: var(--false-red); }
.q-text{
  font-weight: 700;
  font-size: 1rem;
  line-height:1.35;
  color: var(--ink);
  flex:1;
}
.q-num{
  display:inline-block;
  color: var(--gold-2);
  font-weight:800;
  margin-right:6px;
}
.tf-buttons{ display:flex; gap:8px; flex-shrink:0; }
.tf-btn{
  width:46px; height:46px; border-radius:50%;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  border:2.5px solid; background:#fff;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.tf-btn.t{ color: var(--true-green); border-color: var(--true-green); }
.tf-btn.f{ color: var(--false-red); border-color: var(--false-red); }
.tf-btn:hover:not(.locked):not(.disabled){ transform: scale(1.08); }
.tf-btn.selected.t{ background: var(--true-green); color:#fff; box-shadow:0 4px 14px rgba(47,158,86,.35); }
.tf-btn.selected.f{ background: var(--false-red); color:#fff; box-shadow:0 4px 14px rgba(216,67,63,.35); }
.tf-btn.locked{ cursor: default; }
.tf-btn.disabled{ opacity:.35; cursor:not-allowed; }
.tf-btn.reveal-correct{ background: var(--true-green); color:#fff; border-color:var(--true-green); }
.tf-btn.reveal-wrong{ background: var(--false-red); color:#fff; border-color:var(--false-red); }

/* ---------------- Submit banner ---------------- */
.submit-banner{
  background: linear-gradient(180deg, #ffe3e6, #ffd3d8);
  border: 1px solid #f3b7bd;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  text-align:center;
  font-weight: 800;
  color: #7d2226;
  margin-bottom: 10px;
}
.submit-banner.ready{ background: linear-gradient(180deg, #dcf5e4, #c9edd6); border-color:#a7dfba; color: var(--true-green-dark); cursor:pointer; }
.submit-banner .time-left{ font-variant-numeric: tabular-nums; }

/* ---------------- Footer advertising banner ---------------- */
.ad-banner{
  margin: 8px 0 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(60,40,10,.06);
  border: 1px solid var(--border);
	padding:5px;
}
.ad-banner img{
  display: block;
  width: 100%;
  height: auto;
}
.ad-banner a{ display:block; }

/* ---------------- Fixed bottom progress bar ---------------- */
.progress-shell{
  position: fixed; left:0; right:0; bottom:0;
  background: rgba(250,243,228,.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  padding: 10px 16px 14px;
}
.progress-track{
  max-width: 640px; margin: 0 auto;
  height: 50px; border-radius: 99px; background: #e6d7b3; overflow:hidden;

}

.progress-fill{
  height:100%; width:100%;
  background: linear-gradient(90deg, #4f8ef7, #3f6fe0);
  border-radius:99px;
  transition: width 1s linear;
	padding: 10px;
    text-align: center;
    FONT-WEIGHT: BOLD;
    font-size: clamp(.2em, 1.5em, 2em); 
	width:100%;
	color: white;
}
.progress-fill.warn{ background: linear-gradient(90deg, #f2a53c, #e08324); }
.progress-fill.danger{ background: linear-gradient(90deg, #e5544f, #c93a35); }

/* ---------------- Footer ---------------- */
.site-footer{
  text-align:center; color: var(--ink-soft); font-size:.82rem; margin-top: 30px;
}
.site-footer img{ height:22px; vertical-align:middle; margin-right:8px; opacity:.85; }
.site-footer a{ color: var(--gold-2); font-weight:700; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* ---------------- Modals ---------------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(30,20,5,.55);
  display:none; align-items:center; justify-content:center; z-index:100; padding: 20px;
}
.modal-overlay.open{ display:flex; animation: fadeIn .2s ease; }
.modal-box{
  background:#fffdf8; border-radius: var(--radius-lg);
  max-width: 420px; width:100%;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  position:relative;
  animation: popIn .25s cubic-bezier(.2,1.4,.4,1);
  max-height: 88vh; overflow-y:auto;
}
.modal-box h2{
  font-family:'Fredoka', sans-serif; margin:0 0 12px; color: var(--gold-2); font-size:1.4rem;
}
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:1.4rem; color: var(--ink-soft); cursor:pointer; line-height:1;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes popIn{ from{ transform: scale(.9) translateY(10px); opacity:0;} to{ transform:scale(1) translateY(0); opacity:1;} }

/* Result modal specifics */
.result-score{
  font-family:'Fredoka', sans-serif;
  font-size: 3rem; text-align:center; font-weight:700;
  color: var(--gold-2); margin: 6px 0 4px;
}
.result-sub{ text-align:center; color: var(--ink-soft); margin-bottom: 18px; font-weight:600;}
.result-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom: 18px; }
.result-stat{ background: var(--cream-2); border-radius: var(--radius-sm); padding:12px; text-align:center; }
.result-stat .n{ font-weight:800; font-size:1.3rem; color:var(--gold-2); }
.result-stat .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.share-row{ display:flex; gap:10px; flex-wrap:wrap; }
.share-btn{
  flex:1; min-width:100px; text-align:center;
  padding:10px 12px; border-radius: 10px; font-weight:700; cursor:pointer; border:none; color:#fff;
  font-family:'Nunito', sans-serif;
}
.share-btn.x{ background:#000; }
.share-btn.fb{ background:#1877f2; }
.share-btn.copy{ background: var(--gold); color:#241a06; }

.help-list{ margin:0; padding-left: 18px; color: var(--ink-soft); line-height:1.7; }
.help-list li{ margin-bottom:8px; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top: 4px;}
.locked-note{ text-align:center; color: var(--ink-soft); font-size:.85rem; margin-top:-6px; margin-bottom:14px;}

.btn-primary{
  display:block; width:100%; text-align:center;
  background: var(--gold); color:#241a06; font-weight:800; border:none;
  padding: 13px; border-radius: 12px; cursor:pointer; font-size:1rem; margin-top:6px;
}
.btn-primary:hover{ background: var(--gold-light); }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state h2{ color: var(--gold-2); font-family:'Fredoka', sans-serif; }

/* ---------------- Responsive tuning ---------------- */
@media (min-width: 720px){
  .wrap{ padding-top: 28px; }
  .logo img{ height: 75px; }
  .icon-btn{ width:46px; height:46px; }
  .photo-card{ aspect-ratio: 16/9; }
  .q-text{ font-size: 1.08rem; }
}
@media (max-width: 420px){
  .logo img{ height:45px; }
  .icon-btn{ width:38px; height:38px; }
  .tf-btn{ width:42px; height:42px; }
  .q-text{ font-size:.92rem; }
}