:root{--brown:#492b1d;--ink:#39291e;--cream:#fff9ec;--gold:#ffce45;--border:#e1c6a1;--muted:#795f49}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 15% 8%,#fff5dc,#f4e7ce 50%,#ead8b8)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(120deg,#603b24,#3e2419);color:#fff;border-bottom:4px solid #c78f34;padding:10px clamp(12px,3vw,32px);flex-wrap:wrap}.brand{font-size:clamp(22px,2.4vw,31px);font-weight:950;letter-spacing:-1px;text-decoration:none;color:white}.brand span{color:#ffcf42}.nav{display:flex;gap:7px;flex-wrap:wrap}.navbtn{background:#7b553a44;color:#fff;border:1px solid #dfbd895e;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800}.navbtn.active{background:linear-gradient(#ffe179,#ffc43c);color:#422718;border-color:#db9830}.version{font-size:11px;border:1px solid #fff5;border-radius:30px;padding:7px 10px;color:#f6d6aa}.wrap{max-width:1350px;margin:auto;padding:15px 14px 25px}.intro{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px}.intro h1{font-size:clamp(24px,3vw,33px);line-height:1.2;margin:0 0 4px;letter-spacing:-.7px}.intro p{color:#705741;margin:0;font-size:13px}.chip{white-space:nowrap;font-size:11px;border:1px solid #e2cba1;border-radius:40px;background:#fff4d7;padding:8px 12px;font-weight:700}.layout{display:grid;grid-template-columns:minmax(330px,1.05fr) minmax(340px,.95fr);gap:15px;align-items:start}.card{background:var(--cream);border:2px solid #ddbd8e;border-radius:22px;overflow:hidden;box-shadow:0 7px 0 #c89a5b50,0 12px 23px #4d291c16}.visual{min-width:0}.stage{position:relative;max-width:600px;margin:0 auto;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(#82caef 0 60%,#8bc966 60%)}.stage.night{background:linear-gradient(#15294b 0 60%,#3d7359 60%)}.stage.cream{background:#f7ebda}.stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}.stage.interactive canvas{touch-action:none;cursor:crosshair}.stage-tag,.horse-tag{position:absolute;top:13px;background:#fff9edeb;border:1px solid #ffffffdd;padding:7px 11px;border-radius:11px;font-weight:850;font-size:12px;pointer-events:none}.horse-tag{left:12px}.stage-tag{right:12px}.timer{position:absolute;top:55px;right:12px;color:#41281b;background:#ffefbce8;border:1px solid #b37e28;border-radius:11px;padding:6px 10px;font-weight:900;font-variant-numeric:tabular-nums;font-size:18px;pointer-events:none}.stage-tip{position:absolute;bottom:12px;left:12px;right:12px;pointer-events:none;background:#412a21db;color:white;padding:9px 11px;border-radius:10px;font-size:12px;font-weight:750;text-align:center}.tools{padding:12px;display:flex;gap:8px;flex-wrap:wrap}.btn{border:1.5px solid #cfa778;background:#fffdfa;color:#4b3120;border-radius:10px;min-height:43px;padding:10px 13px;font-size:13px;font-weight:850;flex:1 1 auto}.btn.primary{background:linear-gradient(#ffe889,#ffca3c);border-color:#c58c23}.btn:hover,.opt:hover{filter:brightness(.98)}.btn:focus-visible,.opt:focus-visible,.navbtn:focus-visible{outline:3px solid #c78310;outline-offset:2px}.progress{font-size:12px;font-weight:850;background:#f8ebd3;align-self:center;padding:9px 10px;border-radius:10px}.fineprint{font-size:11px;color:#876c50;padding:0 14px 13px;line-height:1.45}.page{padding:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-head span{font-size:12px;color:var(--muted)}h2{font-size:22px;margin:0 0 9px;letter-spacing:-.5px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:12px 0 16px}.fields label{font-size:12px;font-weight:780;display:grid;gap:5px}.fields input{padding:11px 12px;border-radius:9px;border:1.5px solid #d1af86;background:white;width:100%;min-width:0;font-weight:720}.field-group{border-top:1px solid #ecdcc3;padding:13px 0 11px}.field-group h3{font-size:14px;margin:0 0 9px}.options{display:flex;gap:6px;flex-wrap:wrap}.opt{min-height:40px;border:1px solid #d9bfa0;background:#fffefc;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:750}.opt.active{background:#ffe39a;border:2px solid #c89328;padding:8px 10px}.bottom-actions{margin-top:12px}.wide{width:100%}.small{font-size:11px;color:#806951;line-height:1.55}.lead{color:#6f5845;font-size:13px;line-height:1.6}.steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.steps span{font-size:12px;padding:9px 10px;border-radius:20px;background:#eee0c9;font-weight:800}.steps span.active{background:#ffda64}.steps span.done{background:#d8efdb;color:#256238}.game-hint{padding:15px;border:1px solid #e4cba3;background:#fff0ce;border-radius:12px;margin-top:20px;font-weight:750}.result-time{font-size:42px;font-weight:950;color:#654022;font-variant-numeric:tabular-nums;margin:16px 0}.voucher{text-align:center;border:3px double #b98d44;background:linear-gradient(135deg,#fff6d9,#fffdf4);padding:20px 15px;border-radius:15px;margin-top:15px}.voucher-head{letter-spacing:2px;color:#93622f;font-weight:900;font-size:12px}.voucher b{font-size:26px;display:block;margin:12px}.voucher p{font-size:13px}.voucher small{font-size:10px;color:#775a3b}.record{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #ead8bc;padding:12px 4px}.record strong{font-size:14px}.record small{font-size:11px;color:#765f4b;display:block}.record time{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}.empty{padding:25px 8px;text-align:center;color:#84694d}.saved-horses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.saved-item{border:1px solid #e3c7a0;border-radius:12px;padding:9px;background:#fffdf7}.saved-item img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#eadfcf;border-radius:9px}.saved-item b{font-size:13px;display:block;margin:6px 0}.saved-actions{display:flex;gap:5px}.saved-actions button{font-size:11px;padding:7px;flex:1;border:1px solid #d3b58d;background:#fff7e8;border-radius:8px}.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.comparison img{width:100%;border-radius:9px}.comparison b{font-size:12px}footer{margin-top:20px;font-size:11px;color:#917354;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} [hidden]{display:none!important}
@media(max-width:900px){.layout{grid-template-columns:1fr}.stage{max-height:75vh}.visual{max-width:670px;margin:auto;width:100%}.panel{max-width:670px;margin:auto;width:100%}.page{padding:16px}.version{display:none}}@media(max-width:490px){.top{gap:8px;padding:9px 10px}.nav{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.navbtn{font-size:11px;padding:9px 3px}.wrap{padding:12px 10px 20px}.intro{align-items:start}.intro h1{font-size:23px}.chip{font-size:10px;padding:7px}.stage{max-height:none}.tools{padding:9px}.btn{font-size:12px;padding:9px;flex:1 1 42%}.page{padding:13px}.fields{gap:7px}.fields input{padding:10px 8px}.saved-horses{grid-template-columns:repeat(2,minmax(0,1fr))}}

.image-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 6px;max-width:111px;min-width:80px;gap:3px;font-size:10px}.image-opt.active{padding:4px 5px}.image-opt img{width:68px;height:68px;border-radius:8px;object-fit:cover}.image-opt span{text-align:center;max-width:95px}.options:has(.image-opt){gap:7px}
@media(max-width:490px){.image-opt{min-width:76px;max-width:100px}.image-opt img{width:62px;height:62px}}

/* G16 catalog navigation: keyboard-accessible foldable categories */
.field-group{scroll-margin-top:20px}.field-group.is-collapsed .options{display:none}.field-group .group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:transparent;border:0;padding:0;color:var(--ink);cursor:pointer}.group-head h3{margin:0}.group-count{font-size:11px;color:#967046;background:#f9eddb;padding:5px 9px;border-radius:50px}.group-head:focus-visible{outline:2px solid #bb8322;outline-offset:3px}
.field-group .options{margin-top:10px;max-height:340px;overflow-y:auto;align-content:flex-start}.field-group[data-key='beard'] .options{max-height:500px}
@media(max-width:490px){.field-group .options{max-height:300px}.field-group[data-key='beard'] .options{max-height:450px}.image-opt{min-width:69px;max-width:95px}.image-opt img{width:61px;height:61px}}
.import-file{display:inline-flex;align-items:center;justify-content:center;text-align:center}.field-group[data-key="moustache"] .options,.field-group[data-key="hat"] .options{max-height:360px}

/* G20 compact mobile: keep action controls readable without overgrowing viewport */
@media(max-width:490px){
 .top{position:relative}
 .brand{font-size:23px}
 .intro{margin-bottom:10px}
 .stage-tag,.horse-tag{font-size:11px}
 .field-group .group-head{min-height:44px}
 .opt{min-height:44px}
 .page{padding:14px}
 .tools .btn{min-height:47px}
 .stage canvas{image-rendering:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* G21: opt-in mobile preview; collapsed tab never hides the asset picker. */
.floating-preview[hidden]{display:none!important}
.floating-preview{position:fixed;right:12px;bottom:calc(15px + env(safe-area-inset-bottom));z-index:100;
  border:2px solid #c99956;border-radius:15px;background:#fff8e9;box-shadow:0 8px 24px #301b1555}
.floating-preview-head{display:flex;align-items:center;justify-content:center;min-height:37px}
.floating-preview-head button{border:0;background:linear-gradient(#ffe8a0,#ffd05e);color:#4a2b1b;
  font-size:12px;font-weight:850;border-radius:13px;padding:10px 13px;cursor:pointer}
.floating-preview.is-open{width:142px;overflow:hidden;border-color:#c99956}
.floating-preview.is-open .floating-preview-head{justify-content:end;background:#fff4d8}
.floating-preview.is-open .floating-preview-head button{padding:5px 10px;font-size:19px;line-height:23px}
.floating-preview canvas{display:none}
.floating-preview.is-open canvas{width:100%;height:auto;display:block;aspect-ratio:4/5}
@media(min-width:601px){.floating-preview{display:none!important}}