.simon-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}
.simon-header h1{margin:0;font-family:"Lora","Times New Roman",serif;font-size:2.1rem}
.simon-header p{margin:4px 0 0;color:#d7cbf5;max-width:360px}

.scoreboard{display:flex;gap:12px}
.score-box{background:rgba(255,255,255,.12);border-radius:16px;padding:12px 18px;min-width:88px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.score-box .label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#b5a8cc}
.score-box span:last-child{display:block;font-size:1.4rem;font-weight:700;color:#fff}

.pad-grid{display:grid;grid-template-columns:repeat(2,140px);grid-template-rows:repeat(2,140px);gap:16px;justify-content:center;margin:24px auto;max-width:320px}
.pad{border:none;border-radius:20px;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .1s ease,box-shadow .1s ease,filter .1s ease}
.pad[data-pad="0"]{background:linear-gradient(135deg,#f78fb3,#ffbbd3)}
.pad[data-pad="1"]{background:linear-gradient(135deg,#2dd4bf,#6ee7b7)}
.pad[data-pad="2"]{background:linear-gradient(135deg,#fcd34d,#f97316)}
.pad[data-pad="3"]{background:linear-gradient(135deg,#a855f7,#6366f1)}
.pad:focus-visible{outline:3px solid rgba(255,255,255,.8);outline-offset:4px}
.pad.active{transform:scale(1.06);box-shadow:0 10px 28px rgba(255,255,255,.4);filter:brightness(1.2)}
.pad.showing{filter:saturate(2.4) brightness(1.35);box-shadow:0 16px 44px rgba(255,255,255,.55)}
.pad.disabled{pointer-events:none;filter:saturate(.55);opacity:.65}
.pad.disabled.showing{filter:saturate(1.8) brightness(1.25);opacity:1}

.controls{text-align:center;margin:12px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:720px){
  .pad-grid{grid-template-columns:repeat(2,120px);grid-template-rows:repeat(2,120px)}
}