/* Écran de création : panneau de cuir sombre à gauche, le héros reste visible à droite dans le décor. */
.creation{position:fixed;inset:0;z-index:12;display:flex;align-items:stretch;pointer-events:none;background:linear-gradient(90deg,#0d1613c9 0,#0d161380 32%,transparent 58%)}
.creation.hidden{display:none}
.creation-panel{pointer-events:auto;width:min(470px,94vw);margin:18px 0 18px 18px;display:flex;flex-direction:column;background:linear-gradient(125deg,#33372df0,#1a2320f2);color:#e6d6b3;border:1px solid #b18e58;border-radius:5px;box-shadow:0 0 0 5px #171f1c,0 0 0 6px #66563d,0 24px 100px #0009}
.creation-head{padding:20px 24px 12px;border-bottom:1px solid #8b724957;background:linear-gradient(90deg,#68533b33,transparent)}
.creation-head .eyebrow{color:#c8a773;font:10px 'Courier New',monospace;letter-spacing:2px}
.creation-head h2{font:28px Georgia,serif;color:#f1dfbb;margin:5px 0 0}
.creation-body{padding:14px 24px;overflow:auto;flex:1;display:grid;gap:14px;align-content:start}
.creation .field{border:0;margin:0;padding:0;min-width:0}
.creation .field>legend,.creation .field>.field-label{font:10px 'Courier New',monospace;letter-spacing:1.6px;color:#c8ae80;text-transform:uppercase;margin-bottom:7px;padding:0}
.name-row{display:flex;gap:8px}
#creationName{flex:1;padding:9px 11px;background:#101916;border:1px solid #92784d99;border-radius:3px;color:#f1dfbb;font:17px Georgia,serif}
#creationName:focus{outline:2px solid #f3ce87}
#creationDice{width:42px;border:1px solid #92784d99;background:#1a231f;color:#e8d499;border-radius:3px;font-size:20px;cursor:pointer}
.class-cards{display:grid;gap:8px}
.class-card{display:grid;grid-template-columns:50px 1fr;gap:12px;text-align:left;padding:10px;border:1px solid #8d744b66;border-left:3px solid #8d744b;background:linear-gradient(120deg,#4a49372b,#111c18);border-radius:3px;color:inherit;cursor:pointer;font:inherit}
.class-card:hover{border-color:#debc7d}
.class-card.selected{border-color:#f3ce87;border-left-color:#f3ce87;background:linear-gradient(120deg,#6a5b3b66,#141f1a)}
.class-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid #92784d88;border-radius:50%;background:radial-gradient(#69523b55,#101916);color:#e8d499}
.class-icon svg{width:30px;height:30px}
.class-text strong{display:block;font:16px Georgia,serif;color:#f1dfbb}
.class-text small{display:block;margin:3px 0 5px;font:11px/1.45 system-ui,sans-serif;color:#cfc4a6}
.class-text ul{margin:0;padding-left:16px;font:11px/1.5 system-ui,sans-serif;color:#d9c9a2}
.creation .row{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;margin-bottom:9px}
.creation .row[hidden]{display:none}
.creation .row>span{font:11px system-ui,sans-serif;color:#b9ad92}
.seg{display:flex;flex-wrap:wrap;gap:5px}
.seg-button{padding:5px 10px;border:1px solid #92784d88;background:#1a231f;color:#e4d3ac;border-radius:3px;font:12px system-ui,sans-serif;cursor:pointer}
.seg-button[aria-pressed=true]{background:#caa05a;color:#241a0c;border-color:#caa05a;font-weight:700}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #101916;background:var(--swatch);box-shadow:0 0 0 1px #92784d99;cursor:pointer}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #f3ce87;transform:scale(1.12)}
#optTurn{width:100%;accent-color:#caa05a}
.creation-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 18px;border-top:1px solid #8b724940}
.creation button:focus-visible{outline:2px solid #f3ce87;outline-offset:2px}
.spec-card{grid-template-columns:1fr}.class-text.wide{display:block}
/* Étapes, tuiles de classe, détail, résumé, rotation à la souris, mise en page étroite */
.creation-stage{position:absolute;inset:0;pointer-events:auto;cursor:grab;touch-action:none}
.creation-stage.dragging{cursor:grabbing}
.creation-panel{position:relative;z-index:1}
.creation-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #8b724957}
.creation-tab{padding:10px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:#b9ad92;font:12px 'Courier New',monospace;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.creation-tab b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:1px solid #92784d99;border-radius:50%;font-size:10px}
.creation-tab[aria-selected=true]{color:#f3ce87;border-bottom-color:#f3ce87;background:linear-gradient(180deg,transparent,#68533b33)}
.creation-tab:hover{color:#f1dfbb}
.creation-pane{display:grid;gap:14px;align-content:start}
.creation-pane[hidden]{display:none}
.class-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.class-tile{display:grid;justify-items:center;gap:5px;padding:9px 4px 8px;border:1px solid #8d744b66;border-bottom:3px solid #8d744b;background:linear-gradient(180deg,#4a49372b,#111c18);border-radius:3px;color:inherit;cursor:pointer;font:inherit}
.class-tile strong{font:13px Georgia,serif;color:#f1dfbb}
.class-tile .class-icon{width:42px;height:42px}
.class-tile .class-icon svg{width:26px;height:26px}
.class-tile:hover{border-color:#debc7d}
.class-tile.selected{border-color:#f3ce87;background:linear-gradient(180deg,#6a5b3b66,#141f1a)}
.class-detail{margin-top:9px;padding:11px 12px;border:1px solid #8d744b55;border-radius:3px;background:#0f1915aa;display:grid;gap:10px}
.class-lore{margin:0;font:12px/1.5 system-ui,sans-serif;color:#d6cba9}
.attrs{display:grid;gap:5px}
.attr{display:grid;grid-template-columns:78px 1fr 26px;gap:8px;align-items:center;font:11px system-ui,sans-serif;color:#b9ad92}
.attr i{display:block;height:7px;border-radius:4px;background:#0b110f;box-shadow:inset 0 0 0 1px #92784d55;overflow:hidden}
.attr b{display:block;height:100%;border-radius:4px}
.attr em{font-style:normal;text-align:right;color:#e8d499}
.kit{margin:0;display:grid;gap:6px}
.kit div{display:grid;grid-template-columns:104px 1fr;gap:8px;font:11px/1.45 system-ui,sans-serif}
.kit dt{color:#b9ad92}.kit dd{margin:0;color:#e4d3ac}
.spec-card strong{display:flex;justify-content:space-between;align-items:baseline}
.spec-card .hp{font:11px 'Courier New',monospace;font-style:normal;color:#e0805a}
.look-tools{display:flex;gap:7px;margin-bottom:12px}
.look-hint{margin:6px 0 0;font:11px system-ui,sans-serif;color:#9c917a}
.creation-summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:9px 24px;border-top:1px solid #8b724940;background:#0f1915aa;font:11px system-ui,sans-serif;color:#cfc4a6}
.creation-summary strong{font:14px Georgia,serif;color:#f1dfbb;margin-right:4px}
.creation-summary span::before{content:'· ';color:#8d744b}
@media (max-width:759px){
 .creation{background:linear-gradient(0deg,#0d1613d0 0,#0d161380 45%,transparent 70%)}
 .creation-panel{position:absolute;left:0;right:0;bottom:0;width:auto;margin:0;max-height:58vh;border-radius:5px 5px 0 0;box-shadow:0 -10px 60px #0009}
 .creation-head{padding:10px 16px 6px}.creation-head h2{font-size:20px}
 .creation-body{padding:10px 14px}
 .creation-summary,.creation-foot{padding-left:16px;padding-right:16px}
 .creation-foot{padding-top:8px;padding-bottom:10px}
}