:root { --ink:#20231f; --cream:#f5f0e5; --paper:#fffdf7; --green:#315c49; --lime:#dce99a; --orange:#ef8354; --line:#d8d2c5; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; color:white; background:var(--green); font-family:Georgia,serif; }
.site-header,.play-header { max-width:1180px; margin:auto; padding:1.5rem 2rem; display:flex; justify-content:space-between; align-items:center; }
.text-button { border:0; background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.text-link { color:var(--ink); font-size:.9rem; font-weight:600; text-underline-offset:4px; }
.header-actions { display:flex; align-items:center; gap:1.25rem; }
.header-actions form { margin:0; }
.create-shell { max-width:1180px; margin:5vh auto 0; padding:2rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:center; }
.eyebrow { margin:0 0 1rem; color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font:700 clamp(3rem,6vw,5.6rem)/.98 Georgia,serif; letter-spacing:-.05em; }
h1 em { color:var(--green); font-style:normal; }
.intro>p:last-child,.lede { max-width:34rem; margin-top:1.75rem; color:#5e625b; line-height:1.7; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:1.5rem; box-shadow:0 18px 50px rgba(42,49,39,.09); }
.create-panel { padding:clamp(1.5rem,4vw,2.75rem); }
.stacked-form { display:grid; gap:1.5rem; }
label { display:block; margin-bottom:.4rem; font-weight:700; }
.field-hint { margin:0 0 .65rem; color:#74776f; font-size:.88rem; }
.field-row { display:flex; justify-content:space-between; gap:1rem; align-items:end; }
input,textarea { width:100%; border:1px solid #bbb8ae; border-radius:.75rem; background:white; color:var(--ink); outline:none; }
input { padding:.85rem 1rem; }
textarea { min-height:190px; padding:1rem; resize:vertical; line-height:1.5; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(49,92,73,.13); }
.count-input { width:6rem; text-align:center; }
.primary-button { min-height:3.4rem; border:0; border-radius:999px; color:white; background:var(--green); font-weight:700; transition:transform .15s,opacity .15s; }
.primary-button:hover:not(:disabled) { transform:translateY(-2px); }
.primary-button:disabled { cursor:wait; opacity:.75; }
.spinner { display:none; width:1.1rem; height:1.1rem; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
.is-loading .spinner { display:inline-block; }
.is-loading .button-label { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-error { margin:0; padding:.8rem 1rem; border-radius:.65rem; color:#8e2e1f; background:#fae4dc; font-size:.9rem; }
.loading-note,.copy-status { min-height:1.2em; margin:0; color:#666a62; text-align:center; font-size:.85rem; }
.auth-page { display:grid; place-items:center; padding:1.5rem; background:var(--green); }
.auth-shell { width:min(100%,440px); }
.auth-panel { padding:2.5rem; }
.auth-panel .brand { margin-bottom:3.5rem; }
.auth-panel h1 { font-size:3rem; }
.browse-link { display:block; margin-top:2rem; color:var(--green); font-weight:700; text-align:center; text-underline-offset:4px; }
.catalogue-shell { width:min(1180px,100%); margin:5vh auto; padding:2rem; }
.catalogue-heading { max-width:680px; margin-bottom:3rem; }
.catalogue-heading h1 { font-size:clamp(3rem,7vw,5rem); }
.catalogue-heading>p:last-child { color:#656960; }
.quiz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin:0; padding:0; list-style:none; }
.quiz-tile { position:relative; min-height:220px; display:flex; flex-direction:column; padding:1.5rem; overflow:hidden; border:1px solid var(--line); border-radius:1.25rem; color:var(--ink); background:var(--paper); box-shadow:0 10px 28px rgba(42,49,39,.06); text-decoration:none; transition:transform .15s,box-shadow .15s; }
.quiz-tile:hover { transform:translateY(-3px); box-shadow:0 16px 35px rgba(42,49,39,.1); }
.quiz-tile-count { color:var(--green); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.quiz-tile strong { margin:auto 0; font:700 1.65rem/1.15 Georgia,serif; }
.quiz-tile-date { color:#797c74; font-size:.78rem; }
.quiz-tile-arrow { position:absolute; right:1.25rem; bottom:1.15rem; color:var(--green); font-size:1.4rem; }
.empty-state { padding:2rem; text-align:center; }
.play-page { background:var(--green); }
.play-shell { min-height:100vh; display:flex; flex-direction:column; }
.play-header { width:100%; }
.play-header .brand { color:white; }
.play-header .brand-mark { color:var(--green); background:var(--lime); }
.play-actions { display:flex; gap:.65rem; }
.secondary-button { padding:.7rem 1rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:white; background:transparent; font-weight:600; }
.secondary-button:hover { color:var(--green); background:white; }
.play-area { position:relative; width:min(90vw,760px); margin:auto; padding:1rem; outline:none; cursor:pointer; }
.quiz-card,.card-shadow { min-height:min(65vh,590px); border-radius:1.5rem; }
.card-shadow { position:absolute; inset:1rem; background:var(--lime); border:2px solid var(--ink); }
.card-shadow-one { transform:rotate(-3.5deg); }
.card-shadow-two { transform:rotate(2.5deg); background:var(--orange); }
.quiz-card { position:relative; z-index:2; display:flex; flex-direction:column; padding:clamp(1.5rem,5vw,3.5rem); border:2px solid var(--ink); background:var(--paper); box-shadow:0 20px 45px rgba(0,0,0,.25); transition:transform .12s; }
.play-area:active .quiz-card { transform:scale(.99); }
.play-area:focus-visible .quiz-card { outline:4px solid white; outline-offset:5px; }
.card-topline { display:flex; justify-content:space-between; color:var(--green); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.question { flex:1; display:grid; place-items:center; margin:1.5rem auto; text-align:center; font:700 clamp(1.8rem,4vw,3.4rem)/1.16 Georgia,serif; text-wrap:balance; }
.answer-rule { display:flex; align-items:center; gap:1rem; color:#777a73; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.answer-rule:after { content:""; height:1px; flex:1; background:var(--line); }
.answer { margin:1.25rem 0 1.75rem; font-size:clamp(1.1rem,2.2vw,1.5rem); font-weight:600; }
.tap-hint { margin:0; color:#85887f; font-size:.78rem; text-align:right; }
.copy-status { color:white; margin:.5rem 0 1rem; }
.noscript { color:white; text-align:center; }
@media(max-width:760px) {
  .create-shell { margin-top:0; grid-template-columns:1fr; gap:2.5rem; }
  .intro h1 { font-size:clamp(2.8rem,13vw,4.5rem); }
  .site-header,.play-header { padding:1rem; }
  .play-header { align-items:flex-start; }
  .play-actions { flex-direction:column; }
  .secondary-button { padding:.55rem .8rem; }
  .play-area { width:92vw; padding:.5rem; }
  .quiz-card,.card-shadow { min-height:68vh; }
  .card-shadow { inset:.5rem; }
}