/* Site identity comes from styles.css and arcade-game.css.
   These rules style only Simon's playable console. */
.simon-stage { width: 100%; }
.simon-stage button { touch-action: manipulation; }
.simon-stage button:disabled { opacity: .45; cursor: default; }
.simon-stage button:focus-visible { outline: 2px solid var(--ch-amber); outline-offset: 4px; }
.simon-app {
    color: var(--ch-ink);
    font-family: var(--ch-font);
    border: 1px solid var(--ch-line);
    border-radius: 10px;
    background: radial-gradient(ellipse at 30% 40%, #2a1a1255, transparent 65%), #0c0909;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.simon-app button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.simon-app .console-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.simon-app .play-area { padding: 26px 20px 23px; overflow: hidden; }
.simon-app .small-label { font: 500 10px var(--ch-mono); letter-spacing: .16em; color: var(--ch-ink2); }
.simon-app .phase-badge {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font:500 10px 'JetBrains Mono',monospace;
    letter-spacing:2px;
    color:#a8b6b4;
    height:20px;
}

.simon-app .phase-badge i {
    width:5px;
    height:5px;
    background:#75837f;
    border-radius:50%;
}

.simon-app .phase-badge[data-phase=watch] {
    color:#e4c58d;
}

.simon-app .phase-badge[data-phase=watch] i {
    background:#e4c58d;
    box-shadow:0 0 12px #e4c58d;
}

.simon-app .phase-badge[data-phase=input], .simon-app .phase-badge[data-phase=success] {
    color:var(--ch-amber);
}

.simon-app .phase-badge[data-phase=input] i, .simon-app .phase-badge[data-phase=success] i {
    background:var(--ch-amber);
    box-shadow:0 0 12px var(--ch-amber);
}

.simon-app .phase-badge[data-phase=over] {
    color:#ff959a;
}

.simon-app .board-space {
    position:relative;
    width:100%;
    margin:10px auto 8px;
    max-width:530px;
}

.simon-app .board {
    width:500px;
    height:500px;
    position:absolute;
    left:50%;
    top:0;
    transform-origin:top center;
    border-radius:50%;
    background:linear-gradient(145deg,#4a5355 0%,#202a2c 24%,#0a1012 64%,#303a3a);
    border:1px solid #687778;
    box-shadow:0 25px 25px #0007,0 9px 0 #070b0c,0 10px 0 #354042,0 0 0 8px #05080933,inset 0 2px 3px #ffffff30;
}

.simon-app .board:before {
    content:'';
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:linear-gradient(140deg,#060b0d,#20292b);
    box-shadow:0 0 0 1px #050708,inset 0 2px 8px #000;
}

.simon-app .board-ticks {
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg,#b6d1c13d 0deg .35deg,transparent .35deg 6deg);
    mask:radial-gradient(transparent 69%,#000 69% 70%,transparent 70%);
}

.simon-app .pad-grid {
    position:absolute;
    inset:27px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    border-radius:50%;
    overflow:hidden;
    transform:rotate(-.001deg);
}

.simon-app .pad {
    position:relative;
    border:1px solid color-mix(in srgb,var(--color),white 12%);
    height:216px;
    padding:0;
    background:radial-gradient(ellipse at var(--light-x) var(--light-y),color-mix(in srgb,var(--color),white 17%),transparent 85%),linear-gradient(150deg,var(--color),color-mix(in srgb,var(--color),#071515 42%));
    color:#ecfff2;
    box-shadow:inset 0 3px 4px #ffffff2c,inset 0 -7px 10px #0006,inset 0 0 25px #0003;
    transition:filter .1s,box-shadow .1s;
    isolation:isolate;
}

.simon-app .pad:before {
    content:'';
    position:absolute;
    inset:9px;
    border:1px solid #ffffff20;
    border-radius:inherit;
    background:linear-gradient(145deg,#ffffff12,transparent 40%);
    pointer-events:none;
}

.simon-app .green {
    --color:#258b64;
    --light-x:20%;
    --light-y:0%;
    border-radius:100% 9px 10px 9px;
}

.simon-app .red {
    --color:#b44455;
    --light-x:80%;
    --light-y:0%;
    border-radius:9px 100% 9px 10px;
}

.simon-app .blue {
    --color:#3375ac;
    --light-x:20%;
    --light-y:100%;
    border-radius:9px 10px 9px 100%;
}

.simon-app .yellow {
    --color:#bd923b;
    --light-x:80%;
    --light-y:100%;
    border-radius:10px 9px 100% 9px;
}

.simon-app .pad.lit {
    filter:brightness(1.9) saturate(1.2);
    box-shadow:inset 0 0 70px #ffffff5c,inset 0 0 6px white,0 0 40px var(--color);
}

.simon-app .pad[aria-disabled=false]:hover {
    filter:brightness(1.2);
}

.simon-app .pad[aria-disabled=false].lit:hover {
    filter:brightness(1.9);
}

.simon-app .pad:focus-visible {
    outline-offset:-12px;
    outline-color:white;
}

.simon-app .pad-marker {
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    top:76px;
    left:91px;
    opacity:.84;
    text-shadow:0 1px 3px #0006;
}

.simon-app .red .pad-marker {
    left:99px;
}

.simon-app .blue .pad-marker, .simon-app .yellow .pad-marker {
    top:86px;
}

.simon-app .yellow .pad-marker {
    left:99px;
}

.simon-app .pad-marker i {
    width:15px;
    height:3px;
    border-radius:3px;
    background:currentColor;
    box-shadow:0 0 9px #fff3;
}

.simon-app .pad-marker b {
    font:500 25px 'JetBrains Mono',monospace;
}

.simon-app .pad-marker small {
    font:500 8px 'JetBrains Mono',monospace;
    letter-spacing:2px;
}

.simon-app .hub {
    position:absolute;
    inset:166px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:radial-gradient(ellipse at 45% 15%,#2e393b,#131b1d 65%);
    border:7px solid #0d1416;
    box-shadow:0 0 0 1px #71858077,0 7px 12px #0009,inset 0 1px 1px #c8e9dc66;
    pointer-events:none;
}

.simon-app .hub>span {
    font:500 9px 'JetBrains Mono',monospace;
    letter-spacing:3px;
    color:#a0b5ae;
    margin-top:5px;
}

.simon-app .hub strong {
    font:400 49px/1.4 'JetBrains Mono',monospace;
    color:#e3f7e9;
    text-shadow:0 0 20px #b4fedb24;
    letter-spacing:-3px;
}

.simon-app .hub-lights {
    display:flex;
    gap:6px;
}

.simon-app .hub-lights i {
    width:4px;
    height:4px;
    background:#b1e8c873;
    border-radius:50%;
}

.simon-app .sequence-meter {
    max-width:380px;
    margin:18px auto 0;
    text-align:center;
}

.simon-app .sequence-meter>span {
    font:400 8px 'JetBrains Mono',monospace;
    letter-spacing:1.5px;
    color:#8b9e97;
}

.simon-app #progress-track {
    height:3px;
    background:#ffffff0d;
    margin:11px 0 0;
    overflow:hidden;
    border-radius:2px;
}

.simon-app #progress-fill {
    display:block;
    width:0;
    height:100%;
    background:var(--ch-amber);
    box-shadow:0 0 10px var(--ch-amber);
    transition:width .15s;
}


.simon-app .control-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 24px;
    border-left: 1px solid var(--ch-line);
    background: rgba(36, 21, 9, .3);
}
.simon-app .status-copy { min-height: 116px; }
.simon-app .status-copy h2 { font: 600 25px var(--ch-display); margin: 0 0 12px; color: var(--ch-ink); }
.simon-app .status-copy p { font-size: 13px; line-height: 1.75; color: var(--ch-ink2); margin: 0; }
.simon-app .difficulty { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.simon-app .difficulty-options { display: flex; gap: 4px; padding: 4px; margin-top: 12px; background: #080402; border: 1px solid var(--ch-line); border-radius: 8px; }
.simon-app .difficulty-options button { flex: 1; padding: 11px 2px; border: 1px solid transparent; border-radius: 5px; font-size: 12px; color: var(--ch-ink2); background: transparent; }
.simon-app .difficulty-options button[aria-pressed=true] { color: var(--ch-amber); background: var(--ch-panel2); border-color: var(--ch-brass-dim); }
.simon-app .difficulty p { min-height: 34px; margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--ch-ink3); }
.simon-app .primary { display: flex; justify-content: space-between; align-items: center; min-height: 49px; padding: 0 18px; border: 1px solid var(--ch-ember); border-radius: 999px; background: var(--ch-ember); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px -12px var(--ch-ember); }
.simon-app .primary:hover { filter: brightness(1.12); }
.simon-app .primary span { font-size: 22px; }
.simon-app .control-tip { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ch-line); color: var(--ch-ink3); font-size: 10px; }
.simon-app .keycaps { display: flex; gap: 5px; }
.simon-app kbd { font: 400 10px var(--ch-mono); padding: 4px 7px; border: 1px solid var(--ch-line); border-bottom-width: 2px; border-radius: 4px; color: var(--ch-ink2); }
.simon-app .pause-cover { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: 50%; background: #100a08ed; backdrop-filter: blur(12px); text-align: center; }
.simon-app .pause-cover[hidden] { display: none; }
.simon-app .pause-cover h2 { font: 600 32px var(--ch-display); margin: 15px 0 0; }
.simon-app .pause-cover p { max-width: 210px; font-size: 12px; line-height: 1.8; color: var(--ch-ink2); margin: 12px 0 24px; }
.simon-app .pause-cover .primary { width: 200px; }
.simon-app .phase-badge { scroll-margin-top: 20px; }
@media (max-width: 850px) {
    .simon-app .console-body { grid-template-columns: minmax(0, 1fr) 230px; }
    .simon-app .control-panel { padding: 24px 18px; }
    .simon-app .play-area { padding: 24px 10px; }
}
@media (max-width: 640px) {
    .simon-app .console-body { grid-template-columns: 1fr; }
    .simon-app .play-area { padding: 20px 8px; }
    .simon-app .phase-badge { font-size: 9px; letter-spacing: 1px; }
    .simon-app .sequence-meter > span { font-size: 7px; letter-spacing: .8px; }
    .simon-app .control-panel { border-left: 0; border-top: 1px solid var(--ch-line); padding: 22px 18px; }
    .simon-app .status-copy { min-height: 0; }
    .simon-app .status-copy h2 { font-size: 22px; }
    .simon-app .difficulty { margin: 20px 0; }
    .simon-app .difficulty p { min-height: 0; }
    .simon-app .control-tip { display: none; }
    .simon-app .board-space { max-width: 410px; }
    .simon-app .pause-cover h2 { font-size: 27px; }
}