.mrmatt-page { max-width: 1004px; margin: 28px auto; }
.matt-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0 18px; }
.matt-heading h1 { font: 42px Georgia,serif; margin:0 0 10px; }
.matt-heading p { margin:0; color:var(--muted); font-size:14px; }
.matt-heading>span { white-space:nowrap; color:var(--gold); font-size:12px; }
.matt-window { background:#c0c0c0; color:#111; border:3px outset #ddd; padding:3px; font:13px Arial,sans-serif; }
.matt-titlebar { display:flex; gap:10px; justify-content:space-between; background:#000080; color:#fff; font-weight:bold; padding:7px 9px; }
.matt-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:7px 4px; }
.matt-toolbar label { display:flex; align-items:center; gap:6px; }
.matt-window button { color:#111; background:#c0c0c0; border:2px outset #eee; padding:5px 9px; font:inherit; }
.matt-window button:active { border-style:inset; }
.matt-window button:disabled { color:#777; }
.matt-window select { background:#fff; color:#111; border:2px inset #ddd; padding:4px; max-width:100%; font:inherit; }
.matt-actions { gap:5px; border-top:1px solid #888; }
.matt-scoreboard { display:flex; justify-content:space-between; gap:8px; background:#000; color:#ffff00; padding:8px; font:14px monospace; }
.matt-window canvas { display:block; width:100%; height:auto; aspect-ratio:31/18; image-rendering:pixelated; background:#000; cursor:crosshair; outline-offset:-3px; touch-action:manipulation; }
.matt-window canvas:focus-visible { outline:2px solid #ffdd44; }
.matt-statusbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px; min-height:38px; border:2px inset #ddd; }
.matt-options { display:flex; align-items:center; flex-wrap:wrap; gap:20px; font-size:13px; padding:20px 0; }
.matt-options label { display:flex; align-items:center; gap:7px; }
.matt-options select { color:var(--cream); background:var(--panel); padding:7px; }
#matt-progress { color:var(--gold); margin-left:auto; }
.matt-pad { margin:4px 0 18px; }
#matt-help { color:var(--muted); font-size:13px; line-height:1.8; text-align:center; }
.matt-help-details { font-size:14px; line-height:1.7; margin:20px 0; }
.matt-help-details summary { cursor:pointer; color:var(--gold); margin-bottom:12px; }
.matt-window:fullscreen { display:flex; flex-direction:column; align-items:stretch; justify-content:center; background:#222; }
.matt-window:fullscreen canvas { align-self:center; width:min(100%, calc((100vh - 180px)*1.722222)); height:auto; max-height:calc(100vh - 180px); }
.matt-window:fullscreen .matt-toolbar,.matt-window:fullscreen .matt-statusbar { background:#c0c0c0; }
@media(max-width:700px) {
  .matt-heading { display:block; }.matt-heading>span { display:block; margin-top:10px; }
  .matt-window { font-size:12px; }.matt-scoreboard { font-size:11px; flex-wrap:wrap; }
  .matt-toolbar { gap:6px; }.matt-toolbar label { max-width:100%; }
  .matt-toolbar select { min-width:0; }.matt-titlebar { flex-wrap:wrap; }
}