/* Стили зала (Этап 4). Тёмная студийная тема, как в конструкторе. */
:root{
  --ink:#111C18; --panel:#18251F; --line:#2C3F36;
  --text:#E9EFE7; --muted:#90A497; --rose:#E3A2AC; --straw:#D6C083;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
.label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.serif{font-family:Georgia,"Iowan Old Style","Times New Roman",serif}

#stage{position:fixed;inset:0;background:radial-gradient(120% 95% at 50% 6%,#FFFFFF 0%,#EFEDE7 60%,#DEDBD3 100%)}
canvas{display:block;touch-action:none}

.scene-loader{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#8C8880;font-size:13px;z-index:5;transition:opacity .4s;
}
.scene-loader.gone{opacity:0;pointer-events:none}
.scene-loader .spin{
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(140,136,128,.25);border-top-color:#B8737E;animation:scene-spin .8s linear infinite;
}
@keyframes scene-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .scene-loader .spin{animation:none} }

/* палитра панелей управления — светлое стекло поверх светлой сцены */
:root{
  --ui:rgba(255,255,255,.9); --ui-line:#e7e1d8; --ui-text:#3a352f; --ui-muted:#8a8378;
  --accent:#b5654a; --accent-deep:#97452f; --accent-soft:#f4e3db;
  --ui-shadow:0 12px 34px rgba(60,45,35,.16);
}
button{font-family:inherit}
button:focus:not(:focus-visible){outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* верхняя панель — тонкая плашка */
#topbar{
  position:fixed;top:12px;left:12px;right:12px;z-index:3;
  display:flex;align-items:center;gap:16px;padding:8px 14px;color:var(--ui-text);
  background:var(--ui);backdrop-filter:blur(12px);
  border:1px solid var(--ui-line);border-radius:15px;box-shadow:var(--ui-shadow);
}
#topbar a.back{color:var(--ui-muted);text-decoration:none;font-size:13px;font-weight:500}
#topbar a.back:hover{color:var(--accent)}
#topbar h1{font-size:16px;font-weight:600;color:var(--ui-text)}
#topbar .spacer{flex:1}
#readout{font-size:12.5px;color:var(--ui-muted);font-variant-numeric:tabular-nums}
#readout b{color:var(--ui-text);font-weight:700}

/* гости — сегментный контрол */
.guests{display:flex;align-items:center;font-size:12.5px;color:var(--ui-muted);
  border:1px solid var(--ui-line);border-radius:10px;overflow:hidden;background:#fff}
.guests .gl{padding:0 10px;white-space:nowrap}
.guests b{color:var(--ui-text);font-weight:700;min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
.guests button{width:30px;height:30px;border:none;border-left:1px solid var(--ui-line);background:transparent;color:var(--ui-text);cursor:pointer;font-size:16px;line-height:1}
.guests button:first-of-type{border-left:1px solid var(--ui-line)}
.guests button:hover{background:var(--accent-soft);color:var(--accent-deep)}

/* инструменты — карточки с секциями */
#tools{position:fixed;top:74px;right:12px;z-index:3;display:flex;flex-direction:column;gap:10px;width:190px}
#tools .tgroup{
  display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:15px;
  background:var(--ui);backdrop-filter:blur(12px);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);
}
#tools .tlabel{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted);font-weight:700;padding:1px 2px 3px}
#tools button{
  border:1px solid var(--ui-line);background:#fff;color:var(--ui-text);
  border-radius:10px;padding:9px 12px;font-size:13px;cursor:pointer;font-weight:500;
  transition:border-color .12s,color .12s,background .12s,transform .08s,box-shadow .12s;
}
#tools button:hover{border-color:var(--accent);color:var(--accent)}
#tools button:active{transform:translateY(1px)}
#tools button.primary{border-color:transparent;background:var(--accent);color:#fff;box-shadow:0 5px 16px rgba(181,101,74,.34)}
#tools button.primary:hover{background:var(--accent-deep);color:#fff}
#tools button.danger:hover{border-color:#c0553f;color:#c0553f}
#tools > button#reset{
  border:1px solid var(--ui-line);background:var(--ui);backdrop-filter:blur(12px);color:var(--ui-text);
  border-radius:14px;padding:10px 12px;font-size:13px;cursor:pointer;font-weight:600;box-shadow:var(--ui-shadow);
}
#tools > button#reset:hover{border-color:var(--accent);color:var(--accent)}

/* предупреждения «тесно/не влезает» */
#warnings{position:fixed;left:12px;bottom:14px;z-index:3;max-width:350px;display:flex;flex-direction:column;gap:8px}
#warnings .warn{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid #ecd6a6;background:var(--ui);backdrop-filter:blur(12px);
  border-radius:13px;padding:10px 13px;font-size:12.5px;line-height:1.45;color:#6b5b34;box-shadow:var(--ui-shadow);
}
#warnings .warn::before{content:"!";flex:none;width:19px;height:19px;border-radius:50%;background:#e7b955;color:#4a3a12;font-weight:800;font-size:12px;display:grid;place-items:center;margin-top:1px}
#warnings .warn strong{color:#8a6a1e}

/* рулетка при перетаскивании */
#ruler{
  position:fixed;z-index:4;transform:translate(-50%,-50%);pointer-events:none;display:none;
  background:#3a352f;color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:999px;box-shadow:0 5px 14px rgba(0,0,0,.28);white-space:nowrap;
}

/* подсказка — тонкая пилюля по центру */
#hint{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;pointer-events:none;
  color:#6b655c;font-size:11.5px;font-weight:500;letter-spacing:.01em;text-transform:none;
  background:var(--ui);border:1px solid var(--ui-line);border-radius:999px;padding:7px 15px;
  box-shadow:var(--ui-shadow);transition:opacity .5s;max-width:92vw;
}
#hint.gone{opacity:0}

#empty{
  position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px;z-index:2;pointer-events:none;
}
#empty .serif{font-size:22px;color:#8C8880;font-weight:400}
#empty p{font-size:13px;color:#A5A199;margin-top:8px}
#empty a{pointer-events:auto;color:var(--rose)}