/* ============================================================
   Therapy Guild Hunt — heraldic parchment theme
   Palette:
     parchment  #e8d7ad   ink       #2b1c10
     oxblood    #5a1717   oxblood-2 #7c2222
     gold       #c9a24a   gold-lo   #8a6d2a
     bronze     #6d4b2a   moss      #3f5230
   No external fonts/images: texture is pure CSS so nothing leaks
   over the network and the strict CSP stays happy.
   ============================================================ */
:root{
  --parch:#e8d7ad; --parch-lo:#d8c191; --ink:#2b1c10; --ink-soft:#5b4325;
  --oxblood:#5a1717; --oxblood-2:#7c2222; --gold:#c9a24a; --gold-lo:#8a6d2a;
  --bronze:#6d4b2a; --moss:#3f5230; --danger:#7a1d13; --ok:#3f5230;
  --shadow: 0 2px 0 rgba(0,0,0,.15), 0 8px 24px rgba(40,22,6,.28);
  --display: "Trajan Pro","Cinzel","Optima",Georgia,"Times New Roman",serif;
  --body: Georgia,"Iowan Old Style","Palatino Linotype",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); line-height:1.55;
  background-color:#2a1c10;
  background-image:
    radial-gradient(1200px 800px at 15% -10%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(0,0,0,.4), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 4px);
  min-height:100vh;
}

/* ---- Parchment surface for the content column ---- */
.wrap{
  max-width:920px; margin:22px auto; padding:26px 24px 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, #f0e2bd 0%, var(--parch) 42%, var(--parch-lo) 100%),
    repeating-radial-gradient(circle at 30% 20%, rgba(120,80,30,.05) 0 3px, transparent 3px 9px);
  border:1px solid var(--gold-lo);
  box-shadow: var(--shadow), inset 0 0 0 6px rgba(201,162,74,.18), inset 0 0 60px rgba(109,75,42,.18);
  border-radius:4px; position:relative;
}
.wrap::before{ /* burnt/aged edge */
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px dashed rgba(109,75,42,.4); border-radius:2px;
}

/* ---- Top bar ---- */
.topbar{
  max-width:920px; margin:0 auto; padding:14px 18px; display:flex;
  align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gold)}
.brand-crest{font-size:1.4rem; filter:drop-shadow(0 1px 0 #000)}
.brand-text{font-family:var(--display); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:1.05rem; color:#f0d488; text-shadow:0 1px 0 #000}
.nav{display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap}
.nav a, .nav .linkbtn{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; color:#e8cf94; text-decoration:none; padding:4px 2px;
  border-bottom:2px solid transparent; background:none; border-top:none;
  border-left:none; border-right:none; cursor:pointer;
}
.nav a:hover,.nav .linkbtn:hover{color:#fff}
.nav a.active{border-bottom-color:var(--gold)}
.nav .cta-sm{border:1px solid var(--gold); border-radius:3px; padding:5px 12px;
  color:#f4e2b0; background:linear-gradient(#6a1c1c,#4a1212)}
.inline-form{display:inline}

/* ---- Headings / dividers ---- */
h1,h2,h3{font-family:var(--display); color:var(--oxblood); letter-spacing:.06em; line-height:1.15; margin:0 0 .4em}
h1{font-size:2rem; text-transform:uppercase; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.25)}
h2{font-size:1.35rem; text-transform:uppercase}
h3{font-size:1.05rem; color:var(--bronze)}
.subtitle{text-align:center; font-family:var(--display); letter-spacing:.25em;
  text-transform:uppercase; color:var(--bronze); font-size:.8rem; margin:-6px 0 18px}
.rule{border:0; height:0; margin:22px 0; position:relative}
.rule::before{content:"\2756"; position:absolute; left:50%; top:-.7em; transform:translateX(-50%);
  color:var(--gold-lo); background:var(--parch); padding:0 12px; font-size:.9rem}
.rule::after{content:""; position:absolute; left:0; right:0; top:0;
  border-top:1px solid var(--gold-lo); opacity:.7}

/* ---- Banner (oxblood, like the poster header) ---- */
.banner{
  margin:-4px 0 8px; padding:16px 18px; text-align:center; border-radius:4px;
  background:linear-gradient(180deg,var(--oxblood-2),var(--oxblood));
  border:2px solid var(--gold); box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.3);
}
.banner h1{color:#f4e2b0; text-shadow:0 2px 2px #000; margin:0}
.banner .subtitle{color:#e2c988; margin:6px 0 0}

/* ---- Cards / panels ---- */
.panel{
  background:linear-gradient(180deg, rgba(255,250,235,.5), rgba(214,193,145,.35));
  border:1px solid var(--gold-lo); border-radius:4px; padding:16px 18px; margin:14px 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.panel.tight{padding:12px 14px}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.stack > * + *{margin-top:12px}
.grid{display:grid; gap:14px}
@media(min-width:640px){ .grid.two{grid-template-columns:1fr 1fr} }

/* ---- Challenge list ---- */
.challenge{display:flex; gap:14px; align-items:flex-start}
.chip{flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  color:#f4e2b0; background:radial-gradient(circle at 35% 30%, #7c2222, #3d0f0f);
  border:2px solid var(--gold); box-shadow:0 2px 4px rgba(0,0,0,.4)}
.clue{font-style:italic; color:#3a2a17}
.status{display:inline-block; font-family:var(--display); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border-radius:2px; border:1px solid}
.status.pending{color:#7a5b16; border-color:#b8912f; background:rgba(201,162,74,.18)}
.status.approved{color:#2c3e21; border-color:#3f5230; background:rgba(63,82,48,.16)}
.status.rejected{color:#6a1712; border-color:#7a1d13; background:rgba(122,29,19,.14)}
.status.none{color:#5b4325; border-color:#a2814a; background:rgba(109,75,42,.1)}
.slotgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,260px)); gap:12px; margin-top:12px; justify-content:center}
.slot{border:1px solid var(--gold-lo); border-radius:6px; padding:12px; text-align:center; font-size:.78rem; background:rgba(255,250,235,.45)}
.slot img{width:100%; height:120px; object-fit:cover; border-radius:4px; display:block; margin-bottom:8px}
.slot .uploadcard{margin-top:10px}
.filepick{
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px;
  font-family:var(--body); font-size:.85rem; color:var(--ink-soft);
  background:rgba(255,252,244,.85); border:1px dashed var(--gold-lo); border-radius:4px;
  cursor:pointer; text-align:left;
}
.filepick svg{flex:0 0 auto; width:18px; height:18px; color:var(--gold-lo)}
.filepick .filepick-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot input[type=file]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hint{display:block; font-size:.7rem; color:var(--ink-soft); margin-top:6px}

/* ---- Forms ---- */
label{display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--bronze); margin:0 0 4px}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%; padding:10px 12px; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:rgba(255,252,244,.85); border:1px solid var(--gold-lo); border-radius:3px;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold); outline-offset:1px}
input[type=file]{width:100%; font-size:.9rem}
textarea{min-height:80px; resize:vertical}
.field + .field{margin-top:12px}
.checkline{display:flex; align-items:center; gap:8px; font-family:var(--body); text-transform:none; letter-spacing:normal}
.checkline label{margin:0; text-transform:none; letter-spacing:normal; font-family:var(--body); font-size:.95rem; color:var(--ink)}

.btn{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; padding:9px 18px; border-radius:3px; cursor:pointer; text-decoration:none;
  color:#f4e2b0; background:linear-gradient(#6a1c1c,#491111); border:1px solid var(--gold);
  box-shadow:0 2px 0 rgba(0,0,0,.3)}
.btn:hover{background:linear-gradient(#7c2222,#5a1717)}
.btn.gold{color:#3a2a10; background:linear-gradient(#e6c664,#c9a24a); border-color:#8a6d2a}
.btn.ok{background:linear-gradient(#4e6438,#3f5230)}
.btn.danger{background:linear-gradient(#8a2318,#6a1712)}
.btn.small{padding:6px 12px; font-size:.72rem}
.btn.block{display:block; width:100%; text-align:center}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---- Flash + alerts ---- */
.flash{max-width:920px; margin:8px auto 0; padding:10px 16px; border-radius:3px; font-size:.95rem;
  border:1px solid; text-align:center}
.flash-success{background:rgba(63,82,48,.9); color:#f2ecd8; border-color:#2c3e21}
.flash-error{background:rgba(122,29,19,.92); color:#f7e6de; border-color:#4d120c}
.flash-info{background:rgba(201,162,74,.9); color:#2b1c10; border-color:#8a6d2a}
.alert{padding:10px 14px; border-radius:3px; margin:10px 0; border:1px solid}
.alert.err{background:rgba(122,29,19,.12); border-color:#7a1d13; color:#6a1712}

/* ---- Leaderboard ---- */
table.board{width:100%; border-collapse:collapse; font-size:.95rem}
.board th{font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  color:var(--bronze); text-align:left; padding:8px 10px; border-bottom:2px solid var(--gold-lo)}
.board td{padding:9px 10px; border-bottom:1px solid rgba(109,75,42,.25)}
.board tr.finished td{background:rgba(201,162,74,.14)}
.board .rank{font-family:var(--display); font-weight:700; color:var(--oxblood); width:2.5rem}
.board .medal{color:var(--gold-lo)}
.progress{height:10px; background:rgba(109,75,42,.25); border-radius:6px; overflow:hidden; min-width:90px}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,#8a6d2a,#c9a24a)}
.pill{font-family:var(--display); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:10px; border:1px solid var(--gold-lo); color:var(--bronze)}
.pill.win{background:linear-gradient(#e6c664,#c9a24a); color:#3a2a10; border-color:#8a6d2a}
.pill.danger{background:rgba(122,26,26,.15); color:#7a1a1a; border-color:#7a1a1a}

/* ---- Footer ---- */
.foot{max-width:920px; margin:14px auto 30px; text-align:center; color:#c8a869}
.foot-rule{height:1px; background:linear-gradient(90deg,transparent,var(--gold-lo),transparent); margin:0 20px 10px}
.foot p{font-family:var(--display); letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; color:#c8a869}

/* ---- Review cards (admin) ---- */
.review{display:grid; gap:16px}
.reviewcard{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:720px){ .reviewcard{grid-template-columns:220px 1fr} }
.reviewcard img.shot{width:100%; border:1px solid var(--gold-lo); border-radius:3px; background:#000}
.scorebar{height:8px; background:rgba(109,75,42,.25); border-radius:5px; overflow:hidden; margin:4px 0}
.scorebar > i{display:block; height:100%}
.tag{display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:2px; border:1px solid var(--gold-lo); margin-right:6px}
.tag.dup{color:#6a1712; border-color:#7a1d13; background:rgba(122,29,19,.12)}

/* ---- FAQ accordions ---- */
.faq details{border:1px solid var(--gold-lo); border-radius:4px; background:rgba(255,252,244,.5); padding:0}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; padding:12px 14px; font-family:var(--display); font-size:.9rem; color:var(--oxblood); letter-spacing:.02em; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\276F"; display:inline-block; margin-right:10px; font-size:.7rem; color:var(--gold-lo); transition:transform .15s}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq details > p, .faq details > ul{margin:0; padding:0 14px 14px 40px}
.faq details > ul{padding-right:14px}
.faq code{background:rgba(109,75,42,.14); border-radius:2px; padding:1px 5px; font-size:.85em}

.subgrid{overflow-x:auto}
a.textlink{color:var(--oxblood); text-decoration:underline}
.small{font-size:.85rem}

/* ---- Prize wheel ---- */
.wheel-canvas{max-width:100%; height:auto; display:block; margin:0 auto}
.wheel-result{min-height:1.6em; margin-top:10px; font-family:var(--display); letter-spacing:.06em;
  text-transform:uppercase; color:var(--oxblood); font-size:.95rem}
.spinrow{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* ---- Tables scroll horizontally instead of breaking layout on narrow screens ---- */
.panel:has(table.board){overflow-x:auto}

/* ============================================================
   Mobile refinements — tighter spacing, readable type, bigger
   tap targets, no overflow, on phones/small tablets.
   ============================================================ */
@media(max-width:600px){
  .topbar{padding:10px 14px; margin:0}
  .brand-text{font-size:.92rem}
  .nav{gap:4px 10px}
  .nav a,.nav .linkbtn{font-size:.72rem}
  .nav .cta-sm{padding:4px 10px}

  .wrap{margin:10px auto; padding:18px 14px 30px; border-radius:3px}
  .flash{margin:8px 10px 0; padding:9px 12px; font-size:.88rem}

  .banner{padding:12px 14px; margin:-2px 0 6px}
  h1{font-size:1.5rem}
  h2{font-size:1.1rem}
  .subtitle{font-size:.7rem; letter-spacing:.16em; margin:-4px 0 14px}

  .panel{padding:13px 14px; margin:10px 0}
  .panel.tight{padding:10px 12px}

  .challenge{gap:10px}
  .chip{width:32px; height:32px; font-size:.85rem}

  .slotgrid{grid-template-columns:1fr; gap:10px}
  .slot{padding:12px; font-size:.75rem}
  .slot img{height:150px}
  .filepick{padding:12px 14px; font-size:.88rem}

  .btn{padding:12px 16px; font-size:.82rem}
  .btn.small{padding:10px 12px; font-size:.76rem}
  .btn.block{padding:12px 16px}
  .btnrow{gap:6px}
  .btnrow form{flex:1 1 auto}

  table.board{font-size:.82rem}
  .board th,.board td{padding:7px 6px}

  input[type=text],input[type=password],input[type=number],textarea,select,input[type=file]{
    font-size:.95rem;
  }
  /* fixed pixel widths set inline in a few admin forms fight cramped phone
     screens — let them size to content instead so rows wrap cleanly */
  input[style*="width:110px"],input[style*="width:80px"],input[style*="width:70px"]{
    width:100% !important; max-width:140px;
  }

  .reviewcard{gap:8px}
  .status{font-size:.64rem; padding:2px 8px}
}

@media(max-width:380px){
  h1{font-size:1.3rem}
  .brand-text{display:none}
  .nav a,.nav .linkbtn{font-size:.68rem}
}