/* The look of the game's windows (cream panels, brown outline, chunky buttons, coral ribbon), using the game's own generated art. */
:root{--ink:#4a3426;--ink-soft:#7a5a44;--cream:#fff3dc;--cream-dark:#f3e2c4;--card:#fffaf0;--border:#8b5e3c;--tan:#e2c79e;
--coral:#f4967a;--coral-dark:#d9694b;--yellow:#ffc857;--yellow-dark:#d99a2b;--mint:#7fd1ae;--mint-dark:#4fa883;--warn:#b3261e;--ok:#2f8a63}
*{box-sizing:border-box}
html{color-scheme:light;font-size:clamp(16px,min(2.1vh,1.7vw),26px)}
body{margin:0;background:var(--cream) url(/art/pattern.png) 0 0/256px 256px;color:var(--ink);font:1rem/1.5 "Segoe UI Variable Display","Segoe UI",Verdana,Arial,sans-serif;min-height:100vh}
main{max-width:54rem;margin:0 auto;padding:0.5rem 1rem 1.25rem}

.banner{position:relative;width:min(100%,18.75rem);aspect-ratio:512/190;margin:0.5rem auto 0;background:url(/art/banner.png) center/100% 100% no-repeat;container-type:inline-size}
/* the ribbon's face spans about 14%-86% across and 12%-60% down the picture: the title is centred exactly on it */
.banner h1{position:absolute;left:14%;right:14%;top:12%;height:48%;margin:0;display:flex;align-items:center;justify-content:center;font-size:8cqw;line-height:1;white-space:nowrap;color:#fff;-webkit-text-stroke:6px var(--border);paint-order:stroke fill;text-align:center}
.tagline{text-align:center;margin:.2rem 0 .4rem;color:var(--ink-soft);font-weight:600}
.center{text-align:center;margin:.2rem 0}

.card{background:var(--cream);border:4px solid var(--border);border-radius:1.25rem;padding:0.875rem 1.25rem;margin:0.625rem 0;box-shadow:0 4px 10px rgba(74,52,38,.22)}
h2{display:flex;align-items:center;gap:0.625rem;margin:0 0 .4rem;font-size:1.2rem;color:var(--coral-dark)}
.ico{width:2.25rem;height:2.25rem}
label{display:block;margin:.8rem 0 .25rem;font-weight:700}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
input[type=text],input[type=password],select{width:100%;padding:0.625rem 0.75rem;font:inherit;color:var(--ink);background:#fff;border:3px solid var(--tan);border-bottom-width:5px;border-radius:0.875rem}
select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238b5e3c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:2.375rem;cursor:pointer}
input[type=text]:focus,select:focus{border-color:var(--yellow-dark);outline:none}
.check{display:flex;gap:0.625rem;align-items:flex-start;font-weight:600;margin:.8rem 0}
.check input{width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:var(--coral-dark);flex:none}

button,a.btn{display:inline-block;padding:0.625rem 1.25rem;font:inherit;font-weight:800;color:var(--ink);cursor:pointer;text-decoration:none;
background:var(--yellow);border:3px solid var(--yellow-dark);border-bottom-width:6px;border-radius:1rem;transition:transform .06s}
button:hover:not(:disabled){background:#ffd77e}
button:active:not(:disabled){transform:translateY(3px);border-bottom-width:3px}
button.secondary{background:#ffe9a8;border-color:var(--yellow-dark)}
button.good{background:var(--mint);border-color:var(--mint-dark)}
button.good:hover:not(:disabled){background:#98e0c2}
button.big{width:100%;font-size:1.15rem;padding:0.875rem 1.25rem}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--coral-dark);outline-offset:2px}

.small{font-size:.9rem;color:var(--ink-soft)}
.err{color:var(--warn);font-weight:700}
.ok{color:var(--ok);font-weight:700}
.row{display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;margin-top:0.75rem}
[hidden]{display:none!important}
a{color:var(--coral-dark);font-weight:600}

.badge{display:inline-block;padding:3px 0.875rem;border-radius:6.1875rem;font-weight:800;font-size:.9rem;border:3px solid var(--yellow-dark);background:#ffe9a8;color:var(--ink)}
.badge.tries.low{background:#ffd77e}
.badge.tries.none{background:#f7a58f;border-color:var(--coral-dark)}
.counter{font-weight:800;color:var(--ink-soft)}

.stage{display:flex;gap:1.125rem;align-items:center;flex-wrap:wrap;margin-bottom:0.5rem}
canvas#preview{width:12rem;height:12rem;border:4px solid var(--tan);border-radius:1.125rem;background:repeating-conic-gradient(#f3e2c4 0% 25%,#fffaf0 0% 50%) 50%/16px 16px}
.bar{height:0.75rem;border-radius:6.1875rem;background:var(--cream-dark);border:2px solid var(--tan);overflow:hidden;margin:0.625rem 0}
.bar span{display:block;height:100%;width:40%;background:var(--coral);border-radius:6.1875rem;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.bar span{animation:none;width:100%}}

.dropzone{border:3px dashed var(--tan);border-radius:1rem;padding:0.75rem 0.875rem;margin:.6rem 0;background:var(--card)}
.dropzone.over{border-color:var(--coral-dark);background:#ffe9d6}
.thumbs{display:flex;flex-wrap:wrap;gap:0.75rem;margin:0.625rem 0}
.thumb{position:relative;width:5.25rem;height:5.25rem;border-radius:0.875rem;overflow:hidden;border:3px solid var(--tan);display:flex;align-items:center;justify-content:center;background:#fff;font-size:.8rem;text-align:center;padding:4px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb.busy{opacity:.6}
.thumb.failed{opacity:.7;border-color:var(--coral-dark);color:var(--warn);font-weight:700}
.thumb .remove{position:absolute;top:3px;right:3px;width:1.625rem;height:1.625rem;padding:0;border-radius:50%;line-height:20px;font-size:1rem;background:var(--coral);border:2px solid var(--coral-dark);border-bottom-width:2px;color:#fff}
.privacy{background:var(--card);border-width:3px}

.tips{margin:.2rem 0 .6rem;padding-left:1.3rem}
.turnstile{margin:.6rem 0;min-height:0}
.foot{text-align:center;margin-top:1.5rem}
a.linkbtn{background:#ffe9a8;border:3px solid var(--yellow-dark);border-bottom-width:6px;border-radius:1rem;padding:0.5rem 1.125rem;color:var(--ink);font-weight:800}
.legal h2{margin-top:1rem}
.legal h2:first-child{margin-top:0}

.masterimg{display:block;width:min(20rem,100%);height:auto;aspect-ratio:1;object-fit:contain;border:4px solid var(--tan);border-radius:1.125rem;background:repeating-conic-gradient(#f3e2c4 0% 25%,#fffaf0 0% 50%) 50%/16px 16px;margin:0.5rem 0}

/* wizard */
.topline{display:flex;align-items:center;justify-content:center;gap:0.875rem;flex-wrap:wrap;min-height:1.875rem;margin:6px 0}
.stepper{display:flex;gap:0.5rem;list-style:none;margin:0;padding:0;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.stepper li{padding:2px 0.625rem;border-radius:6.1875rem;border:2px solid var(--tan);background:var(--card)}
.stepper li.now{background:var(--coral);border-color:var(--coral-dark);color:#fff}
.stepper li.past{background:var(--mint);border-color:var(--mint-dark);color:var(--ink)}
.nav{display:flex;gap:0.75rem;justify-content:flex-end;margin-top:0.875rem}
.nav .big{flex:1}
.center{text-align:center}
.center .nav{justify-content:center}
.summary{margin:.4rem 0;padding-left:1.2rem}
.lookgrid{display:grid;grid-template-columns:15rem 1fr;gap:1.25rem;align-items:start}
@media (max-width:640px){.lookgrid{grid-template-columns:1fr}}
.lookgrid h2{margin-top:0}
.masterimg{width:15rem;height:15rem}
.tweaks{display:flex;flex-direction:column;gap:6px;margin:0.5rem 0}
.tweakrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.groupname{width:3.875rem;font-size:.8rem;font-weight:800;color:var(--ink-soft)}
button.chip{padding:3px 0.6875rem;font-size:.82rem;font-weight:700;background:var(--card);border:2px solid var(--tan);border-bottom-width:4px;border-radius:6.1875rem}
button.chip:hover:not(:disabled){background:#fff3dc}
button.chip[aria-pressed=true]{background:var(--coral);border-color:var(--coral-dark);color:#fff}
details.more{margin:0.5rem 0}
details.more summary{cursor:pointer;font-weight:700;color:var(--coral-dark)}
.thumbs{margin:6px 0}
.dropzone{margin:.3rem 0}
.tips{margin:.1rem 0 .4rem}
.foot{margin-top:6px;display:flex;gap:6px 0.875rem;align-items:center;justify-content:center;flex-wrap:wrap}
.foot p{margin:0}
.bar{margin:1.125rem auto;max-width:26.25rem}
#s-wait{padding:2.125rem 1.25rem}
.stage>div:last-child{flex:1;min-width:15rem}
.tweaks{gap:3px;margin:6px 0}
button.chip{padding:2px 0.625rem;border-bottom-width:3px}
.lookgrid p.small{margin:.3rem 0}
.lookgrid .masterimg{width:13.75rem;height:13.75rem}
.lookgrid{grid-template-columns:13.75rem 1fr}
details.more{margin:4px 0}

.pct{font-weight:800;font-size:1.3rem;margin:.2rem 0;color:var(--coral-dark)}
.bar span{transition:width .4s linear;animation:none;width:0;margin-left:0}
.drafts{display:flex;gap:6px;margin-top:6px}
button.draft{position:relative;width:4rem;height:4rem;padding:0;border:3px solid var(--tan);border-bottom-width:3px;border-radius:0.75rem;overflow:hidden;background:#fff}
button.draft img{width:100%;height:100%;object-fit:contain}
button.draft span{position:absolute;left:3px;top:1px;font-size:.75rem;font-weight:800;color:var(--ink)}
button.draft[aria-pressed=true]{border-color:var(--coral-dark);box-shadow:0 0 0 2px var(--coral)}

.summary{columns:2;column-gap:1.5rem;margin:.3rem 0;padding-left:1.2rem}
#confirmThumbs .thumb{width:4.5rem;height:4.5rem}
#waitTitle.err{font-size:1.05rem;font-weight:700;line-height:1.4}
#consentNeed{margin:.2rem 0;font-size:.9rem}

/* confirm card: the photos are the main thing */
.confirmgrid{display:grid;grid-template-columns:11rem 1fr;gap:1.4rem;align-items:center;margin:.5rem 0}
@media (max-width:640px){.confirmgrid{grid-template-columns:1fr}}
.bigthumbs{display:grid;gap:.45rem;grid-template-columns:1fr}
.bigthumbs[data-n="2"],.bigthumbs[data-n="3"],.bigthumbs[data-n="4"]{grid-template-columns:1fr 1fr}
.bigthumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:4px solid var(--tan);border-radius:1rem;background:#fff;box-shadow:0 3px 8px rgba(74,52,38,.25)}
dl.summary{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:0;padding:0;columns:auto}
dl.summary dt{font-weight:800;color:var(--ink-soft);font-size:.9rem}
dl.summary dd{margin:0;font-weight:700}

/* photos card: the photo slots are the main thing */
.photosgrid{display:grid;grid-template-columns:14rem 1fr;gap:1.4rem;align-items:center}
@media (max-width:640px){.photosgrid{grid-template-columns:1fr}}
.thumbs.big{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0}
.thumbs.big .thumb{width:100%;height:auto;aspect-ratio:1;border-radius:1rem;border-width:4px}
.thumbs.big .thumb .remove{width:1.6rem;height:1.6rem;top:.3rem;right:.3rem;line-height:1.2rem}
button.slot{display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800;color:var(--tan);background:var(--card);border:4px dashed var(--tan);cursor:pointer;padding:0}
button.slot:hover{border-color:var(--coral);color:var(--coral)}
.photoside p{margin:.3rem 0}
.photoside .tips{margin:.3rem 0 .6rem}
#s-confirm .check{margin:.5rem 0}
#s-confirm .nav{margin-top:.6rem}