/* Збери героя — у стилі головної. Токени, шрифти, кнопки, навігація й підвал — з /home.css.
   Тут — сцена з 3D-героєм і панель вибору. */
:root{--cls:#C69B6D}
.forge-page .nav{background:rgba(7,16,31,.92)}
.nav__link[aria-current="page"]{color:var(--ivory2)}

.forge{display:grid;grid-template-columns:minmax(0,1fr) 460px;height:100svh;min-height:700px;padding-top:68px;background:var(--bg)}

/* ---------- сцена ---------- */
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:0;background:#060d1a;container-type:inline-size}
.stage::before{content:"";position:absolute;inset:-24px;z-index:-2;pointer-events:none;
  background:url(/img/about-stormwind.webp) center 32%/cover no-repeat;filter:blur(7px) saturate(.85) brightness(.5)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 30% at 50% 88%,rgba(255,206,120,.26),rgba(255,206,120,0) 70%),
    radial-gradient(ellipse 40% 56% at 50% 52%,color-mix(in srgb,var(--cls) 16%,transparent),transparent 72%),
    linear-gradient(180deg,rgba(7,16,31,.72) 0%,rgba(7,16,31,.12) 26%,rgba(7,16,31,.1) 62%,rgba(7,16,31,.9) 100%),
    linear-gradient(90deg,rgba(7,16,31,.7) 0%,rgba(7,16,31,0) 22%,rgba(7,16,31,0) 78%,rgba(7,16,31,.65) 100%);
  transition:background .4s}
.stage__cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
.stage__cv:active{cursor:grabbing}

/* табличка з іменем над головою — як у світі гри */
.plate{position:absolute;left:0;top:0;z-index:2;pointer-events:none;text-align:center;white-space:nowrap;
  transition:opacity .2s;will-change:transform}
.plate b{display:block;font:700 23px/1.1 var(--title);letter-spacing:.01em;color:var(--cls);
  text-shadow:0 0 2px #000,0 1px 2px #000,0 0 12px rgba(0,0,0,.85)}
.plate span{display:block;margin-top:3px;padding-bottom:16px;font:600 15px/1.2 var(--ui);color:#40ff40;
  text-shadow:0 0 2px #000,0 1px 2px #000,0 0 10px rgba(0,0,0,.8)}

.stage__top{position:absolute;left:24px;top:22px;z-index:3;pointer-events:none}
.stage__who{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:30px;
  background:rgba(7,16,31,.72);border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stage__who img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--cls)}
.stage__who b{display:block;font:500 19px/1.1 var(--title);color:var(--cls)}
.stage__who small{display:block;margin-top:2px;font:500 13px/1.2 var(--ui);color:var(--soft)}
.stage__joke{position:absolute;right:28px;top:26px;z-index:3;max-width:320px;text-align:right;pointer-events:none;
  font:italic 400 17px/1.45 var(--quote-f);color:var(--quote);text-shadow:0 1px 10px rgba(0,0,0,.9);text-wrap:pretty}

.stage__bar{position:absolute;left:24px;right:24px;bottom:22px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.stage__bar>*{pointer-events:auto}
.seg{display:inline-flex;padding:4px;border-radius:24px;background:rgba(7,16,31,.78);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.seg__b{min-height:36px;padding:7px 16px;border:0;border-radius:20px;background:none;color:var(--soft);font:600 14px/1.2 var(--ui);cursor:pointer;transition:background .15s,color .15s}
.seg__b:hover{color:var(--ivory2)}
.seg__b[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.stage__hint{flex:1;min-width:0;text-align:center;font:500 13px/1.3 var(--ui);color:var(--muted);text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none}
@container (max-width:1000px){ .stage__hint{display:none} }
@container (max-width:940px){ .stage__joke{display:none} }
@container (max-width:640px){ .stage__top{display:none} }
.seg__b{display:inline-flex;align-items:center;gap:7px}
.seg__b svg{width:18px;height:18px;flex:none}
.seg--share .seg__b:hover{background:rgba(255,243,214,.1)}
.seg__b:disabled{opacity:.6;cursor:progress}

.stage__load{position:absolute;left:50%;top:50%;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;
  transform:translate(-50%,-50%);border-radius:24px;background:rgba(7,16,31,.8);border:1px solid var(--edge);
  font:600 14px/1.2 var(--ui);color:var(--soft);pointer-events:none}
.stage__load i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(233,185,73,.25);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage__err{position:absolute;left:50%;top:50%;z-index:4;width:min(420px,86%);transform:translate(-50%,-50%);padding:18px 20px;border-radius:10px;
  background:rgba(7,16,31,.9);border:1px solid var(--edge);color:var(--soft);text-align:center}

/* жереб: золотий спалах */
.stage.is-roll::after{animation:flash .9s ease-out}
@keyframes flash{0%{filter:brightness(2.2)}100%{filter:none}}

/* ---------- панель ---------- */
.panel{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 28px 0;
  background:linear-gradient(180deg,#0c1831 0%,#081226 100%);border-left:1px solid var(--line2);scrollbar-width:thin;scrollbar-color:rgba(216,178,94,.3) transparent}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:20px;
  background:rgba(7,16,31,.6);border:1px solid var(--edge);font:600 13px/1.25 var(--ui);color:var(--soft)}
.pill i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(245,197,52,.8)}
.panel h1{margin-top:18px;font:800 clamp(38px,3.4vw,48px)/1.04 var(--serif);color:var(--ivory2)}
.panel__lead{margin-top:12px;font-size:15px;line-height:1.55;color:var(--soft);text-wrap:pretty}

.blk{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.blk__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;
  font:500 14px/1.2 var(--title);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.blk__h small{font:500 14px/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--soft);text-align:right}
.blk__act{padding:4px 2px;border:0;background:none;font:600 13px/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--gold);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(233,185,73,.4);text-underline-offset:3px}
.blk__act:hover{color:#ffd56e}

.classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.cls{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:10px 4px 9px;border-radius:8px;
  background:rgba(255,243,214,.035);border:1px solid var(--line);color:var(--soft);font:600 13px/1.15 var(--ui);text-align:center;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.cls img{width:40px;height:40px;flex:none;border-radius:50%;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--cc) 55%,transparent)}
.cls span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls:hover{background:rgba(255,243,214,.07);border-color:var(--line2);color:var(--ivory2)}
.cls[aria-pressed="true"]{background:color-mix(in srgb,var(--cc) 13%,transparent);border-color:color-mix(in srgb,var(--cc) 70%,transparent);color:var(--ivory2)}
.cls[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--cc),0 0 12px color-mix(in srgb,var(--cc) 50%,transparent)}

.races{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.race{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--soft);
  font:600 12.5px/1.15 var(--ui);text-align:center;cursor:pointer}
.race img{width:100%;max-width:64px;aspect-ratio:1;border-radius:8px;border:1px solid var(--line2);transition:border-color .15s,box-shadow .15s,filter .15s}
.race:hover img{border-color:var(--edge)}
.race[aria-pressed="true"]{color:var(--ivory2)}
.race[aria-pressed="true"] img{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(233,185,73,.35)}
.race:disabled{cursor:not-allowed;color:var(--dim)}
.race:disabled img{filter:grayscale(1) brightness(.45);border-color:transparent}

.sexes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sex{min-height:40px;border-radius:8px;border:1px solid var(--line2);background:rgba(255,243,214,.035);color:var(--soft);font:600 14px/1.2 var(--ui);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.sex:hover{border-color:var(--edge);color:var(--ivory2)}
.sex[aria-pressed="true"]{background:rgba(233,185,73,.14);border-color:var(--gold);color:var(--ivory2)}

/* зовнішність: рядок на опцію */
.looks{display:grid;gap:4px;margin-top:10px}
.look{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:12px;min-height:46px;padding:4px 0}
.look+.look{border-top:1px solid rgba(216,178,94,.08)}
.look__k{font:500 14px/1.25 var(--ui);color:var(--soft)}
.sw{display:flex;flex-wrap:wrap;gap:7px}
.sw__b{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.5);cursor:pointer;
  background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);box-shadow:0 0 0 1px rgba(255,243,214,.12);transition:box-shadow .12s,transform .12s}
.sw__b:hover{transform:scale(1.1)}
.sw__b[aria-checked="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
.step{display:flex;align-items:center;gap:6px}
.step__b{position:relative;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line2);background:rgba(255,243,214,.05);cursor:pointer;
  transition:background .15s,border-color .15s}
.step__b::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border:solid var(--gold);border-width:0 0 2px 2px;transform:translateX(2px) rotate(45deg)}
.step__b--n::before{transform:translateX(-2px) rotate(-135deg)}
.step__b:hover{background:rgba(233,185,73,.14);border-color:var(--edge)}
.step__v{flex:1;min-width:0;text-align:center;font:500 14px/1.2 var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step__v b{font:500 17px/1 var(--title);color:var(--ivory2)}

/* обладунки */
.gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.set{display:grid;gap:2px;min-width:0;padding:9px 12px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,243,214,.035);
  text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.set b{font:500 16px/1.15 var(--title);color:var(--ivory2)}
.set small{font:500 12.5px/1.25 var(--ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set:hover{border-color:var(--edge);background:rgba(255,243,214,.07)}
.set[aria-pressed="true"]{border-color:var(--gold);background:rgba(233,185,73,.13);box-shadow:inset 0 0 0 1px rgba(233,185,73,.35)}
.set[aria-pressed="true"] small{color:var(--soft)}

/* ім'я */
.names{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.field{display:grid;gap:6px;font:500 13px/1.2 var(--ui);color:var(--muted)}
.field input{width:100%;min-height:44px;padding:10px 12px;border-radius:8px;border:1px solid var(--line2);background:rgba(3,8,18,.55);
  color:var(--ivory2);font:500 16px/1.2 var(--ui);outline:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#5f5a4f}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,185,73,.15)}

/* жереб: прилипає до низу панелі */
.acts{position:sticky;bottom:0;z-index:2;margin:24px -28px 0;padding:14px 28px;
  background:linear-gradient(180deg,rgba(8,18,38,.82),rgba(8,18,38,.98) 40%);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acts__roll{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:12px;row-gap:1px;width:100%;padding-block:10px}
.acts__roll svg{grid-row:span 2;width:28px;height:28px;align-self:center}
.acts__roll span{font:700 17px/1.15 var(--ui);text-align:left}
.acts__roll small{font:500 12.5px/1.2 var(--ui);opacity:.75;text-align:left}
.panel__note{order:9;margin:0 -28px;padding:22px 28px 22px;background:#081226;font-size:12.5px;line-height:1.5;color:var(--dim)}
.acts{order:10}

/* сповіщення знизу */
.note{position:fixed;left:50%;bottom:24px;z-index:80;display:grid;gap:2px;min-width:260px;max-width:min(420px,90vw);padding:12px 18px;border-radius:10px;
  background:rgba(13,26,51,.96);border:1px solid var(--edge);box-shadow:0 12px 34px rgba(0,0,0,.5);color:var(--soft);
  transform:translate(-50%,20px);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none}
.note.in{transform:translate(-50%,0);opacity:1}
.note b{font:600 15px/1.3 var(--ui);color:var(--ivory2)}
.note span{font-size:13px;color:var(--muted)}

/* ---------- планшет ---------- */
@media (max-width:1180px){
  .forge{grid-template-columns:minmax(0,1fr) 400px}
  .panel{padding-inline:22px}
  .acts{margin-inline:-22px;padding-inline:22px}
  .panel__note{margin-inline:-22px;padding-inline:22px}
  .look{grid-template-columns:112px minmax(0,1fr)}
}

/* ---------- телефон: сцена зверху прилипає, панель гортається під нею ---------- */
@media (max-width:860px){
  .forge{display:block;height:auto;min-height:0}
  .stage{position:sticky;top:68px;z-index:5;height:min(56svh,520px);border-bottom:1px solid var(--line2)}
  .panel{overflow:visible;padding:22px var(--pad) 0;border-left:0}
  .panel h1{margin-top:0;font-size:34px}
  .panel__head .pill{display:none}
  .panel__lead{font-size:14.5px}
  .acts{position:sticky;bottom:0;margin-inline:calc(var(--pad) * -1);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
  .seg--share .seg__b span{display:none}
  .seg--share .seg__b{padding-inline:10px}
  .panel__note{margin-inline:calc(var(--pad) * -1);padding:18px var(--pad) 20px}
  .stage__top{left:12px;top:12px}
  .stage__who{padding:4px 14px 4px 4px;gap:9px}
  .stage__who img{width:32px;height:32px}
  .stage__who b{font-size:16px}
  .stage__bar{left:12px;right:12px;bottom:12px}
  .stage__hint{display:none}
  .seg__b{min-height:32px;padding:5px 12px;font-size:13px}
  .plate b{font-size:18px}
  .plate span{font-size:13px;padding-bottom:10px}
}
@media (max-width:520px){
  .classes{gap:6px}
  .cls{padding:8px 2px 7px;font-size:12.5px}
  .cls img{width:36px;height:36px}
  .races{gap:6px}
  .race{font-size:11.5px}
  .look{grid-template-columns:1fr;gap:6px;padding:8px 0}
}
@media (prefers-reduced-motion:reduce){
  .stage.is-roll::after{animation:none}
  .stage__load i{animation-duration:2s}
}