/* Экран партии в вертикальном телефоне (TZ-portrait-game.md). Включается классом body.pg-on */
.pg{
  --pg-bg:#0C1220;--pg-card:#161F2E;--pg-border:#22304A;--pg-text:#FFFFFF;--pg-sub:#93A0B6;--pg-green:#3DDC84;
  --pg-amber:#FFC21A;--pg-amber-text:#FFC21A;--pg-btn2:#1C2738;--pg-btn2-text:#D2DAE8;--pg-off:#5F6B80;
  --pg-toast:rgba(12,18,32,.94);--pg-chip:#22304A;
  position:fixed;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;
  height:var(--vh,100dvh);overflow:hidden;background:var(--pg-bg);color:var(--pg-text);
  padding:max(12px,var(--sa-top,0px),env(safe-area-inset-top)) 0 calc(16px + max(var(--sa-bottom,0px),env(safe-area-inset-bottom)));
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none
}
body[data-theme="light"] .pg{
  --pg-bg:#E9EDF3;--pg-card:#FFFFFF;--pg-border:#D6DDE8;--pg-text:#121826;--pg-sub:#566174;--pg-green:#11823F;
  --pg-amber-text:#8A5A00;--pg-btn2:#F1F4F8;--pg-btn2-text:#263042;--pg-off:#9AA4B4;--pg-toast:rgba(255,255,255,.97);--pg-chip:#EEF1F6
}
body.pg-on .pg{display:flex}
/* под новым экраном старая раскладка не видна; результат, шестерёнка, приглашение и обучение остаются поверх */
body.pg-on #game > :not(.pg):not(#result):not(#appGear):not(#nardyInvite){visibility:hidden}
body.pg-on #result{z-index:20}
/* 3D/2D на этом экране не действует — строку прячем */
body.pg-on #appGear .ag-row:has(#agView3d){display:none}

.pg-strip{flex:none;width:calc(100% - 24px);height:58px;display:flex;align-items:center;gap:10px;padding:0 12px;
  border-radius:16px;background:var(--pg-card);border:1.5px solid var(--pg-border)}
.pg-strip.active{border-color:var(--pg-amber)}
.pg-you{margin-top:12px}
.pg-ava{position:relative;flex:none;width:40px;height:40px;display:block}
.pg-ava svg{display:block}
.pg-dot{position:absolute;right:-1px;bottom:0;width:11px;height:11px;border-radius:50%;background:#3DDC84;border:2px solid var(--pg-card)}
.pg-mid{display:flex;flex-direction:column;min-width:0;flex:1}
.pg-name{font-size:15px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-sub{font-size:12.5px;font-weight:600;color:var(--pg-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-right{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pg-small{font-size:12.5px;font-weight:700;color:var(--pg-sub);white-space:nowrap}
.pg-status{font-size:13px;font-weight:800;white-space:nowrap}
.pg-status.green{color:var(--pg-green)}.pg-status.amber{color:var(--pg-amber-text)}.pg-status.sub{color:var(--pg-sub)}
.pg-chip{flex:none;font-size:12.5px;font-weight:700;color:var(--pg-sub);padding:6px 10px;border-radius:999px;background:var(--pg-chip)}

.pg-board{position:relative;flex:none;margin-top:8px;touch-action:manipulation}
.pg-img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:8px}
.pg-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pg-arc{fill:none;stroke:#FFD34D;stroke-width:7;stroke-linecap:round;stroke-dasharray:6 18}
.pg-layer{position:absolute;inset:0;pointer-events:none}
.pg-layer > *{position:absolute;box-sizing:border-box}
.pg-piece{display:block;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6))}
.pg-count{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#FFFFFF}
.pg-count.on-light{color:#2A1A08}
.pg-ring{border-radius:50%}
.pg-ring-sel{border:2.5px solid #FFC21A;box-shadow:0 0 0 3px rgba(255,194,26,.45),0 0 10px rgba(255,194,26,.45)}
.pg-ring-white{border:2.5px solid #FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.45),0 0 10px rgba(255,255,255,.45)}
.pg-ring-red{border:2.5px solid #FF5A4A;box-shadow:0 0 0 3px rgba(255,90,74,.45),0 0 10px rgba(255,90,74,.45)}
.pg-from{border-radius:50%;border:2px dashed rgba(255,255,255,.75)}
.pg-ghost{border-radius:50%;border:2px dashed #5CF29A;background:rgba(75,224,143,.4)}
.pg-ghost.pg-hit{border:2.5px solid #FF7A3D;background:none;box-shadow:0 0 0 3px rgba(255,122,61,.45),0 0 10px rgba(255,122,61,.8)}
.pg-movable{border-radius:50%;border:2px solid rgba(255,194,26,.85);animation:pg-pulse .5s ease-in-out 3 alternate}
@keyframes pg-pulse{from{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:.45}}
.pg-badge{transform:translateX(-50%);height:18px;padding:0 5px;border-radius:5px;white-space:nowrap;display:flex;align-items:center;
  font-size:10.5px;font-weight:800;background:#FFFFFF;color:#121826;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pg-badge-hit{background:#FF7A3D;color:#FFFFFF}
.pg-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;font-weight:800;
  padding:8px 14px;border-radius:12px;background:var(--pg-toast);color:var(--pg-text);box-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:0;transition:opacity .25s;pointer-events:none;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.pg-banner.on{opacity:1}

.pg-turn{flex:none;width:calc(100% - 24px);height:112px;margin-top:9px;display:flex;align-items:center;gap:14px;padding:0 18px;
  border-radius:20px;background:var(--pg-card);border:1.5px solid var(--pg-amber)}
.pg-dice{display:flex;gap:6px;flex:none}
.pg-die{width:58px;height:auto;display:block}
.pg-die.off{opacity:.32;filter:grayscale(1)}
body[data-theme="light"] .pg-die.off{opacity:.55;filter:grayscale(1) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.pg-die.used{opacity:.4}
.pg-turn-right{display:flex;flex-direction:column;align-items:flex-end;min-width:0;margin-left:auto;text-align:right}
.pg-big{font-size:28px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}

.pg-reserve{flex:1 1 auto;min-height:0;width:calc(100% - 24px);margin-top:12px}

.pg-actions{flex:none;width:calc(100% - 24px);margin-top:12px;display:flex;gap:8px}
.pg-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;font:inherit;
  font-weight:800;font-size:16px;cursor:pointer;padding:0 14px;white-space:nowrap;border:1.5px solid var(--pg-border);
  background:var(--pg-btn2);color:var(--pg-btn2-text)}
.pg-btn[hidden]{display:none}
.pg-primary{flex:1 1 auto;min-width:0;border:0;background:linear-gradient(180deg,#FFD34D,#FFB800);color:#1B1300;box-shadow:0 6px 16px -6px rgba(255,184,0,.6)}
.pg-wide{flex:1 1 auto;min-width:0}
.pg-wide[aria-disabled="true"]{color:var(--pg-off);cursor:default}
.pg-square{flex:none;width:56px;padding:0}

/* низкие экраны (375×667): резерв убираем, карточку хода ужимаем */
.pg.pg-low .pg-reserve{display:none}
.pg.pg-low .pg-turn{height:88px}
.pg.pg-low .pg-die{width:46px}
.pg.pg-low .pg-big{font-size:24px}