:root{--ink:#312b3b;--cream:#fff8e9;--paper:#fffdf7;--gold:#f6cf79;--coral:#e97962;--mint:#b9d8c2;--purple:#6b587c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#f9e2a8,transparent 32rem),var(--cream);color:var(--ink);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;line-height:1.4}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}.topbar{display:flex;justify-content:space-between;align-items:center;max-width:980px;margin:auto;padding:1rem 1.2rem}.brand{font-weight:900;letter-spacing:.04em}.link-button{color:var(--purple);background:none;text-decoration:underline;padding:.7rem}.hidden{display:none!important}#wizard,#result{max-width:900px;margin:auto;padding:1rem 1.2rem 3rem}.progress{display:flex;gap:.45rem;margin:.2rem 0 .5rem}.dot{height:.55rem;flex:1;border-radius:1rem;background:#eadfc9}.dot.active{background:var(--coral)}.step-label{color:var(--purple);font-weight:700;margin:.4rem 0}.step h1{font-size:clamp(2rem,7vw,4rem);line-height:1.05;margin:.4rem 0}.intro{font-size:1.2rem;max-width:48rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.8rem}.choice{background:var(--paper);border:3px solid transparent;border-radius:1.2rem;padding:1rem;text-align:left;min-height:7rem;box-shadow:0 4px 0 #eadfc9;transition:.15s}.choice:hover,.choice.selected{border-color:var(--coral);transform:translateY(-2px)}.choice strong{display:block;font-size:1.15rem}.choice .emoji{font-size:2rem;display:block}.choice small{display:block;margin-top:.3rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.field{display:flex;flex-direction:column;gap:.35rem;font-weight:700}.field input,.field select,.field textarea{border:2px solid #d8cbb3;border-radius:.8rem;padding:.8rem;background:#fff}.field textarea{min-height:5rem;resize:vertical}.attribute{background:var(--paper);border-radius:1rem;padding:1rem}.attribute h3{margin:.1rem 0}.attribute .skills{font-size:.9rem;color:var(--purple)}.modifier{font-size:1.8rem;font-weight:900;color:var(--coral);float:right}.wizard-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.primary,.secondary{border-radius:999px;padding:.9rem 1.5rem;font-weight:900;min-height:3.2rem}.primary{background:var(--coral);color:white;box-shadow:0 4px 0 #bd5747}.secondary{background:var(--mint);color:var(--ink)}.primary:disabled{opacity:.45;box-shadow:none}.notice{background:#fff1c6;padding:1rem;border-radius:1rem;margin:1rem 0}.card{background:var(--paper);border:8px solid var(--gold);border-radius:1.2rem;padding:1.2rem;box-shadow:0 8px 0 #e4c46f}.card-head{display:flex;gap:1rem;align-items:center;border-bottom:2px dashed #d8cbb3;padding-bottom:1rem}.portrait{width:100px;height:100px;border-radius:1rem;object-fit:cover;background:var(--gold)}.card h1{font-size:2.5rem;margin:0}.ribbon{color:var(--purple);font-weight:800}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.panel{border:2px solid #eadfc9;border-radius:.8rem;padding:.8rem}.panel h2{font-size:1rem;margin:.1rem 0 .5rem;color:var(--purple);text-transform:uppercase;letter-spacing:.05em}.stat-list,.equipment{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.stat-list span{background:#fff5d8;border-radius:.4rem;padding:.35rem}.story{margin-top:1rem;background:#f2eee5;border-radius:.8rem;padding:1rem}.card-footer{font-size:.75rem;text-align:right;color:#766b72;margin-top:1rem}.result-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}.status{font-weight:700}.custom-preview{max-width:120px;border-radius:1rem}.gm-list{max-width:1000px;margin:auto;padding:1rem}.gm-character{break-inside:avoid;margin-bottom:2rem}.gm-toolbar{display:flex;gap:1rem;justify-content:space-between;align-items:center}.small{font-size:.9rem;color:#766b72}@media(max-width:560px){.card-grid{grid-template-columns:1fr}.wizard-nav{position:sticky;bottom:0;background:var(--cream);padding-top:.7rem}.card h1{font-size:2rem}.portrait{width:78px;height:78px}}@page{size:A5 portrait;margin:8mm}@media print{body{background:white}.topbar,#wizard,.result-actions,#save-status{display:none!important}#result{padding:0;max-width:none}.card{border:2px solid #222;box-shadow:none;border-radius:0}.card h1{font-size:2rem}.panel,.story{border-color:#888;background:white}.card-footer{color:#333}}


/* Attribute ranking UI */
.rank-list{display:flex;flex-direction:column;gap:.6rem}
.attr-row{display:flex;align-items:center;gap:.8rem;background:#fff;border:2px solid #eadfc8;border-radius:14px;padding:.6rem .8rem}
.slot-badge{min-width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;border-radius:50%;background:#f6cf79;color:#5a3a00;flex:none}
.attr-main{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.attr-main strong{font-size:1.15rem}
.attr-main .small{font-size:.82rem;line-height:1.25}
.muted{color:#8a7f66}
.rank-move{display:flex;flex-direction:column;gap:.3rem;flex:none}
.rank-move button{font-size:1.15rem;line-height:1;padding:.45rem .75rem;border-radius:10px;border:1px solid #d9c9a3;background:#fff8e9;color:#6b4f1d;cursor:pointer}
.rank-move button:disabled{opacity:.35;cursor:default}


/* bigger attribute rows + drag */
.attr-row.big strong{font-size:1.45rem}
.attr-row.big .small{font-size:.9rem}
.attr-row.big .slot-badge{min-width:2.9rem;height:2.9rem;font-size:1.3rem}
.attr-row[draggable="true"]{cursor:grab; -webkit-user-select:none; user-select:none}
.attr-row[draggable="true"]:active{cursor:grabbing}
.attr-row.dragging{opacity:.45; border-style:dashed}
.sub-head{margin-top:1.1rem; color:#8a6d3b; font-size:1rem; text-transform:none}
.tweak-box{margin-top:1.4rem; border-top:2px dashed #eadfc8; padding-top:.8rem}
.tweak-row{display:flex; gap:.7rem; align-items:flex-start; margin:.6rem 0}
.small-badge{min-width:1.9rem;height:1.9rem;font-size:.95rem;border-radius:50%;background:#efe6d2;color:#5a3a00;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.tweak-body{flex:1;min-width:0}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{border:2px solid #d9c9a3;background:#fff;border-radius:999px;padding:.45rem .8rem;font-size:.95rem;line-height:1.1;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0}
.chip small{color:#9a8a66;font-size:.7rem}
.chip.selected{border-color:#c0791f;background:#fdf1dc;box-shadow:0 0 0 2px #c0791f33}

.equipment-list{border:2px solid #eadfc8;border-radius:12px;padding:.5rem .8rem;background:#fffdf6;margin:.4rem 0}
.gear-row{display:flex;justify-content:space-between;gap:.6rem;padding:.18rem 0;border-bottom:1px dashed #eee3cd}
.gear-row:last-child{border-bottom:none}

.share-box{border:2px dashed #c0791f;background:#fdf1dc;border-radius:14px;padding:.8rem 1rem;margin:1rem auto;max-width:34rem}
.share-box h3{margin:.2rem 0 .4rem}
.share-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
#share-link{font-size:.85rem;word-break:break-all;max-width:100%;color:#6b4f1d}
.status{font-weight:600}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.roll-btn{border:1px solid #d9c9a3;background:#fff8e9;border-radius:10px;padding:.35rem .7rem;margin-left:.4rem;font-size:1rem;cursor:pointer;vertical-align:middle}
.quest-tpl{background:#fffdf6;border:2px solid #eadfc8;border-radius:12px;padding:.7rem .9rem;line-height:2}
.quest-tpl input{width:9rem;border:none;border-bottom:2px solid #c0791f;background:transparent;font:inherit;padding:.1rem .2rem}
.field textarea{width:100%;min-height:3.6rem;box-sizing:border-box}