* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0a1430; --bg2:#0f2150; --panel:rgba(13,30,72,.72);
  --line:#1d3a78; --accent:#3aa0ff; --accent2:#ff5b6e; --gold:#ffcf57;
  --txt:#dce8ff; --muted:#7f97c8;
}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--txt);
  background:radial-gradient(1200px 800px at 50% 30%,#13265e 0%,#0a1430 60%,#060d22 100%);
  height:100vh; overflow:hidden;
}
.app{ display:grid; grid-template-columns:240px 1fr 240px; grid-template-rows:minmax(0,1fr); height:100vh; gap:12px; padding:12px; overflow:hidden; }

/* ЛЕВО */
.left{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.brand{ font-size:24px; font-weight:800; letter-spacing:.5px; text-align:center; }
.brand span{ font-weight:300; color:var(--accent); }
.fmt-toggle{ display:flex; gap:6px; }
.fmt-btn{ flex:1; padding:8px; border-radius:9px; border:1px solid var(--line); background:#0c1d44; color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; letter-spacing:.5px; }
.fmt-btn.active{ background:linear-gradient(180deg,#3aa0ff,#1f6fd6); color:#fff; border-color:var(--accent); }
.card-view{ position:relative; flex:1; min-height:120px; border:1px solid var(--line); border-radius:14px; background:#08122c; display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden; cursor:zoom-in; }
.card-view img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.card-placeholder{ color:var(--muted); text-align:center; font-size:14px; line-height:1.5; cursor:default; }
.deck-tag{ position:absolute; top:14px; left:14px; background:var(--accent); color:#04122e; font-weight:700; font-size:12px; padding:4px 10px; border-radius:20px; }
.card-meta{ text-align:center; font-size:12px; color:var(--muted); min-height:16px; }
.card-meta b{ color:var(--gold); }

.dice-row{ display:flex; gap:8px; align-items:stretch; }
.die{ width:50px; height:50px; border-radius:11px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.4); flex:none;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:6px; place-items:center; }
.die .pip{ width:10px; height:10px; border-radius:50%; background:#0a1430; }
.die.rolling{ animation:shake .4s ease; }
@keyframes shake{ 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-6px) rotate(-8deg)} 75%{transform:translateY(-4px) rotate(8deg)} }
.roll-btn{ flex:1; background:linear-gradient(180deg,#3aa0ff,#1f6fd6); border:none; color:#fff; font-size:16px; font-weight:700; padding:13px; border-radius:12px; cursor:pointer; box-shadow:0 4px 14px rgba(31,111,214,.5); }
.roll-btn:hover{ filter:brightness(1.1); }
.roll-btn:disabled{ opacity:.5; cursor:default; }
.turn-info{ text-align:center; color:var(--muted); font-size:14px; min-height:18px; }
.turn-info b{ color:var(--gold); }
.mute-btn{ display:none; background:#13295c; border:1px solid var(--line); color:var(--txt); padding:11px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:700; }
.mute-btn:hover{ filter:brightness(1.12); }
.mute-btn.muted{ background:#5a1a22; border-color:var(--accent2); color:#ffd0d6; }
.bonus-btn{ display:none; background:#143a1f; border:1px solid #1f6f3a; color:#9ff0bd; padding:11px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:700; }
.bonus-btn:hover{ filter:brightness(1.12); }
.bonus-btn:disabled{ opacity:.4; cursor:default; filter:none; }
/* роль игрока: скрыть управление проводника, показать кнопки игрока */
.app.player .fmt-toggle,
.app.player .picker,
.app.player .history-wrap,
.app.player #addBtn,
.app.player .tile .rm{ display:none; }
.app.player .mute-btn,
.app.player .bonus-btn{ display:block; }
/* режим записи экрана: только доска + карта + кубики + окна, без управления */
.app.recorder .fmt-toggle,
.app.recorder .picker,
.app.recorder .mute-btn,
.app.recorder .bonus-btn,
.app.recorder .rail-btns,
.app.recorder #rollBtn{ display:none; }

.picker{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
.picker select{ width:100%; background:#0c1d44; color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:11px; font-size:14px; }
.reveal-btn{ width:100%; background:#13295c; border:1px solid var(--line); color:var(--txt); padding:11px; border-radius:10px; cursor:pointer; font-size:14px; }
.reveal-btn:hover{ background:#1a356e; }

.history-wrap{ display:flex; flex-direction:column; gap:6px; }
.history-head{ font-size:12px; color:var(--muted); }
.history{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; min-height:52px; }
.history img{ height:46px; border-radius:6px; border:1px solid var(--line); cursor:zoom-in; flex:none; }

/* ЦЕНТР / поле */
.board-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.board{ position:relative; width:100%; height:100%; }
.board-art{ position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; object-fit:contain; display:none; border-radius:14px; }
.board.art .board-art{ display:block; }
.board.art .cell, .board.art .center-model{ display:none; }
.cell{ position:absolute; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:10px;
  background:#11244f; border:1px solid #2a4a8f; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; text-align:center; color:#aac4f5; line-height:1.05; padding:2px; }
.cell.event{ background:#0e1d40; color:#5f78ad; }
.cell.deck{ background:#16315f; }
.cell.domain{ background:linear-gradient(180deg,#1d4fa0,#0f2f6b); border-color:var(--accent); color:#fff; width:54px; height:54px; box-shadow:0 0 12px rgba(58,160,255,.5); }
.cell.start{ background:linear-gradient(180deg,#37c46a,#1d8c47); border-color:#5be08a; color:#06210f; font-size:11px; }
.cell.finish{ background:linear-gradient(180deg,#ffcf57,#e0a020); border-color:#ffe08a; color:#3a2a00; font-size:10px; }
.cell.active{ outline:3px solid var(--gold); outline-offset:2px; }
.cell.hit{ animation:pop .4s ease; }
@keyframes pop{ 0%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.35)} 100%{transform:translate(-50%,-50%) scale(1)} }
.token{ position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid #fff;
  transform:translate(-50%,-50%); transition:left .25s ease,top .25s ease; box-shadow:0 2px 8px rgba(0,0,0,.6); z-index:5; }

.center-model{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(31,79,160,.25),rgba(10,20,48,.05)); }
.center-model .hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%; background:linear-gradient(180deg,#1d4fa0,#0a1f4d);
  border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; box-shadow:0 0 24px rgba(58,160,255,.5); text-align:center; }
.hex{ position:absolute; transform:translate(-50%,-50%); width:78px; height:46px; background:#14306a;
  border:1px solid #2f5aa8; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); color:#cfe0ff; transition:.2s; }
.hex.lit{ background:linear-gradient(180deg,#2f74d6,#163b86); box-shadow:0 0 16px rgba(58,160,255,.7); color:#fff; transform:translate(-50%,-50%) scale(1.12); }

/* ПРАВО / видео */
.right{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:0; overflow:hidden; }
.rail-head{ font-size:13px; color:var(--muted); display:flex; justify-content:space-between; }
.tiles{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:auto; }
.tile{ position:relative; flex:1 1 0; min-height:64px; border-radius:12px; overflow:hidden; background:#0c1838; border:1px solid var(--line); }
.tile.speaking{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.tile.conductor{ border-color:var(--gold); background:#1a1d0e; }
.tile.viewing{ outline:2px solid #56d2ff; outline-offset:1px; }
.tile{ cursor:pointer; }
.tile video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.tile .avatar{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:#fff; }
.tile .name{ position:absolute; left:0; bottom:0; right:0; background:linear-gradient(0deg,rgba(0,0,0,.7),transparent); color:#fff; font-size:12px; padding:6px 8px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.tile .name .nm{ cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .dot{ width:8px; height:8px; border-radius:50%; background:#37c46a; flex:none; }
.tile .rm{ cursor:pointer; color:#ff8a98; font-weight:700; flex:none; }
.rail-btns{ display:flex; flex-direction:column; gap:8px; }
.add-btn{ background:#13295c; border:1px solid var(--line); color:var(--txt); padding:9px; border-radius:10px; cursor:pointer; font-size:13px; }
.add-btn:hover{ background:#1a356e; }
.add-btn:disabled{ opacity:.4; cursor:default; }
.add-btn.rec-on{ background:#5a1a22; border-color:var(--accent2); color:#ffd0d6; font-weight:700; }

/* Зум */
.zoom{ position:fixed; inset:0; background:rgba(3,8,22,.92); display:none; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:30px; }
.zoom.open{ display:flex; }
.zoom img{ max-width:92%; max-height:92%; border-radius:14px; box-shadow:0 20px 80px rgba(0,0,0,.7); }