#game-log { width:min(900px,calc(100vw - 24px)); max-height:calc(var(--game-viewport-height,100dvh) - 24px); overflow:auto; padding:20px; border:1px solid #547d94; border-radius:14px; background:var(--friend-surface,#0c1529); color:var(--friend-text,#edf6ff); font:14px/1.4 system-ui,sans-serif; }
#game-log::backdrop { background:#020713bb; }
#game-log header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#game-log h2 { margin:0; }
#game-log button { font:inherit; color:inherit; background:var(--friend-button,#173247); border:1px solid var(--friend-border,#547d94); border-radius:7px; padding:8px 12px; cursor:pointer; }
#game-log button:disabled { opacity:.45; cursor:default; }
.game-log-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,1fr); gap:16px; margin-top:12px; }
#game-log-list { display:flex; flex-direction:column; gap:8px; max-height:480px; overflow:auto; }
#game-log-list button { text-align:left; display:grid; gap:4px; }
#game-log-list button[aria-pressed=true] { outline:2px solid #41bbc7; outline-offset:-2px; }
#game-log-list small { opacity:.8; }
#game-log canvas { width:100%; aspect-ratio:1; background:#eef1f2; border-radius:8px; }
#game-log input[type=range] { width:100%; }
.game-log-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#game-log-message { min-height:1.4em; }
@media(max-width:600px) {
  #game-log { padding:12px; }
  .game-log-layout { grid-template-columns:1fr; }
  #game-log-list { max-height:190px; }
  #game-log canvas { display:block; max-width:300px; margin:auto; }
}

#game-log header { position:sticky; top:-20px; z-index:1; padding:8px 0; background:var(--friend-surface,#0c1529); }
@media(max-width:600px) { #game-log header { top:-12px; gap:6px; } #game-log header button { padding:6px 8px; } }