/* ====================== */
/* Reset + Theme Tokens */
/* ====================== */
*{
    margin: 0;
    padding: 0;
}

:root {
    --pad-off-bg: #333333;
    --pad-off-ring: #4f5054;
}

/* ================== */
/* Global Page Shell */
/* ================== */

html{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background-color: black;
    text-align: center;
}

body{
    padding: clamp(8px, 2vmin, 24px);
    background-color: rgb(0, 0, 0);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

main{
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(6px, 1.5vmin, 16px);
}

h1{
    margin: 30px 0;
    font-size: clamp(0.7rem, 1.4vmin, 1.1rem);
}

/* ===================== */
/* Layout: Frame + Grid */
/* ===================== */

.container-frame{
    width: min(94vmin, 1100px);
    max-width: 100%;
    aspect-ratio: 1 / 1;   /* forces square shape */
    border: 0.25px solid #4f4f4f;
    border-radius: 0;      /* square corners */
    box-sizing: border-box;
    margin-inline: auto;
}

.container{
    --pad-columns: 4;
    --pad-rows: 4;
    --pad-gap: clamp(6px, 1vmin, 12px);
    --top-label-gap: clamp(0px, 0.25vmin, 1px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    display:grid;
    min-height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) clamp(110px, 14vmin, 180px);
    grid-template-rows: auto auto;
    grid-template-areas:
    "top top top top clear"
    "pads pads pads pads side";
    gap: clamp(8px, 1.2vmin, 16px);
    padding: clamp(10px, 1.8vmin, 20px) clamp(10px, 1.8vmin, 20px) 0;
    border: 14px;
    overflow: hidden;
    box-shadow:
    -2px -2px 5px #28292b,
    2px 2px 5px #1c1a1a,
    inset -2px -2px 5px #1c1a1a,
    inset 2px 2px 5px #272728;
}

.container > *{
    min-width:0;
    min-height:0;
}

/* =========================== */
/*    Modal and Dialog Popups  */
/* =========================== */

.modal{
    max-width: 50ch;

    & > *{
        margin: 0 0 0.5rem 0;
    }
}

dialog::backdrop{
    background-color: rgba(0, 0, 0, 0.8);
}

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    margin: 0;
    background-color: black;
    color: white;
    border-color: #cc66ff;
    border-width: 1px;
    width: clamp(400px, 90vw, 800px);
    height: clamp(300px, 90vh, 600px);
    border-radius: 5%;
}

#padDialog {
    padding: 1rem 1.25rem;
}

#padDialog[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.75rem;
    animation: padDialogIn 180ms ease;
}

#padDialogTitle {
    font-size: 2rem;
    margin: 0;
}

#padDialogMessage {
    margin: 0;
    white-space: pre-line;
    align-self: top;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0;
}

@keyframes padDialogIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================== */
/* Pad: Base + States */
/* =================== */

.pad{
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    display:grid;
    place-items: center;
    padding:clamp(0.45rem, 1.2vmin, 1rem);
    border: 1px solid black;
    border-radius: 10px;
    background-color: var(--pad-off-bg);
    text-align: center;
    box-shadow: 
    -5px -5px 10px #28292b,
    5px 5px 10px #1c1a1a,
    inset -5px -5px 10px #1c1a1a,
    inset 5px 5px 10px #4f5054;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.pad:not(.active):hover{
    background-color: #4f5054;
}

.pad.active:hover{
    filter: brightness(1.25);
}

.pad.active{
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ================= */
/* Pad Scene Colors */
/* ================= */
.pad.scene-linkedin {
    background-color: #0077b5;
    box-shadow:
    -5px -5px 10px #203c4a,
    5px 5px 10px #004471,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-github {
    background-color: #FFFFFF;
    box-shadow:
    -5px -5px 10px #1c1a1a,
    5px 5px 10px #6f6f6f,
    inset -5px -5px 10px #6f6f6f,
    inset 5px 5px 10px #1c1a1a;
}

.pad.scene-resume {
    background-color: #f90000;
    box-shadow: 
    -5px -5px 10px #380202,
    5px 5px 10px #a90606,
    inset -5px -5px 10px #ec4141,
    inset 5px 5px 10px #fda8a8;
}

.pad.scene-contact {
    background-color: #00ff11;
    box-shadow:
    -5px -5px 10px #234a20,
    5px 5px 10px #157100,
    inset -5px -5px 10px #64e34e,
    inset 5px 5px 10px #9fffaa;
}

.pad.scene-about {
    background-color: #e45474;
    box-shadow:
    -5px -5px 10px #4a202d,
    5px 5px 10px #710015,
    inset -5px -5px 10px #e34e82,
    inset 5px 5px 10px #ff9fba;
}

.pad.scene-skills {
    background-color: #ff8c00;
    box-shadow:
    -5px -5px 10px #4a2a00,
    5px 5px 10px #713800,
    inset -5px -5px 10px #ff9f3f,
    inset 5px 5px 10px #ffcba8;
}

.pad.scene-kitware {
    background-color: #3daf4a;
    box-shadow:
    -5px -5px 10px #1c3a20,
    5px 5px 10px #0b6e00,
    inset -5px -5px 10px #64e34e,
    inset 5px 5px 10px #9fffaa;
}

.pad.scene-griffiss {
    background-color: #007a9b;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-northeastern {
    background-color: #c8102e;
    box-shadow:
    -5px -5px 10px #4a1c20,
    5px 5px 10px #710000,
    inset -5px -5px 10px #e34e4e,
    inset 5px 5px 10px #ff9f9f;
}

.pad.scene-mitbeaverworks {
    background-color: #a31f34;
    box-shadow:
    -5px -5px 10px #4a1c20,
    5px 5px 10px #710000,
    inset -5px -5px 10px #e34e4e,
    inset 5px 5px 10px #ff9f9f;
}

.pad.scene-wic {
    background-color: #784c9c;
    box-shadow:
    -5px -5px 10px #3a1c4a,
    5px 5px 10px #4b0071,
    inset -5px -5px 10px #b064e3,
    inset 5px 5px 10px #d89fff;
}

.pad.scene-coms {
    background-color: #21bde5;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-ai {
    background-color: #e66709;
    box-shadow:
    -5px -5px 10px #4a2a00,
    5px 5px 10px #713800,
    inset -5px -5px 10px #ff9f3f,
    inset 5px 5px 10px #ffcba8;
}

.pad.scene-sigma {
    background-color: #6b47d6;
    box-shadow:
    -5px -5px 10px #3a1c4a,
    5px 5px 10px #4b0071,
    inset -5px -5px 10px #b064e3,
    inset 5px 5px 10px #d89fff;
}

.pad.scene-gso {
    background-color: #ffff00;
    box-shadow:
    -5px -5px 10px #4a4a1c,
    5px 5px 10px #717100,
    inset -5px -5px 10px #ffff64,
    inset 5px 5px 10px #ffff9f;
}

.pad.scene-orderup{
    background-color: #f6d5ff;
    box-shadow:
    -5px -5px 10px #4a1c4a,
    5px 5px 10px #710071,
    inset -5px -5px 10px #e34ee3,
    inset 5px 5px 10px #ff9fe1;
}

.pad.scene-resopulse {
    background-color: #653c3c;
    box-shadow:
    -5px -5px 10px #321c1c,
    5px 5px 10px #4b0000,
    inset -5px -5px 10px #9f6464,
    inset 5px 5px 10px #d89f9f;
}

.pad.scene-underthesea {
    background-color: #249c92;
    box-shadow:
    -5px -5px 10px #1c4a47,
    5px 5px 10px #004b46,
    inset -5px -5px 10px #64e3dc,
    inset 5px 5px 10px #9fffe0;
}

.pad.scene-virtualcloset {
    background-color: #72d2fe;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-visualdove{
    background-color: #e552fa;
    box-shadow:
    -5px -5px 10px #4a1c4a,
    5px 5px 10px #710071,
    inset -5px -5px 10px #e34ee3,
    inset 5px 5px 10px #ff9fe1;
}

.pad.scene-virtualkaraoke{
    background-color: #3330c1;
    box-shadow:
    -5px -5px 10px #1c1a4a,
    5px 5px 10px #000071,
    inset -5px -5px 10px #4e4ee3,
    inset 5px 5px 10px #9f9fe1;
}

.pad.scene-myergbuddy{
    background-color: #21ff45;
    box-shadow:
    -5px -5px 10px #1c4a20,
    5px 5px 10px #004b00,
    inset -5px -5px 10px #64e34e,
    inset 5px 5px 10px #9fffaa;
}

.pad.scene-brickstein{
    background-color: #ff5758;
    box-shadow:
    -5px -5px 10px #4a1c1c,
    5px 5px 10px #710000,
    inset -5px -5px 10px #e34e4e,
    inset 5px 5px 10px #ff9f9f;
}

.pad.scene-securecheckup{
    background-color: #04b4fc;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-acertainconvexhull{
    background-color: #bbc7fe;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-echoflower{
    background-color: #41abc9;
    box-shadow:
    -5px -5px 10px #1c2f4a,
    5px 5px 10px #003d71,
    inset -5px -5px 10px #4ea7e3,
    inset 5px 5px 10px #9fe1ff;
}

.pad.scene-spotiphy{
    background-color: #d7896d;
    box-shadow:
    -5px -5px 10px #4a1c1c,
    5px 5px 10px #710000,
    inset -5px -5px 10px #e34e4e,
    inset 5px 5px 10px #ff9f9f;
}

.pad.scene-fibonacci{
    background-color: #48ce85;
    box-shadow:
    -5px -5px 10px #1c4a20,
    5px 5px 10px #004b00,
    inset -5px -5px 10px #64e34e,
    inset 5px 5px 10px #9fffaa;
}

.pad.scene-areyousocialdistancing{
    background-color: #1b2ffd;
    box-shadow:
    -5px -5px 10px #1c1a4a,
    5px 5px 10px #000071,
    inset -5px -5px 10px #4e4ee3,
    inset 5px 5px 10px #9f9fe1;
}

.pad.scene-music1{
    background-color: #ed6ab9;
    box-shadow:
    -5px -5px 10px #4a1c4a,
    5px 5px 10px #710071,
    inset -5px -5px 10px #e34ee3,
    inset 5px 5px 10px #ff9fe1;
}

.pad.scene-music2{
    background-color: #f0307d;
    box-shadow:
    -5px -5px 10px #4a1c4a,
    5px 5px 10px #710071,
    inset -5px -5px 10px #e34ee3,
    inset 5px 5px 10px #ff9fe1;
}

/* ================================ */
/* Pad Clear Animation + A11y Motion */
/* ================================ */

.pad.is-clearing {
    animation: padFadeOut 160ms ease forwards;
}

@keyframes padFadeOut{
    from {filter: brightness(1.05);}
    to {
        background-color: var(--pad-off-bg);
        box-shadow: none;
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce){
    .pad {
        transition: none;
    }
    .pad.is-clearing {
        animation: none;
    }
}

/* ==================== */
/* Top Controls + Text */
/* ==================== */

.top-label{
    font-size: clamp(0.58rem, 1.1vmin, 0.82rem);
    letter-spacing: 0.08em;
    color: white;
    display: block;
    white-space: nowrap;
    line-height: 1;
    margin-top: 1px;
    text-align: center;
}

.top-controls {
    display: grid;
    grid-template-columns: repeat(var(--pad-columns), minmax(0, 1fr));
    gap: var(--pad-gap);
    justify-items: center;
    align-items: start;
    width: 100%;
    padding: 0;
}

.top-controls-wrap {
    grid-area: top;
    display: grid;
    gap: clamp(4px, 0.8vmin, 10px);
}

.clear-control{
    grid-area: clear;
    display: grid;
    justify-items: center;
    align-items: start;
}

.top-control-item{
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: start;
    align-content: start;
    gap: var(--top-label-gap);
    min-width: 0;
}

/* ================ */
/* Button Controls */
/* ================ */

.button{
    display: inline-block;
    width: clamp(30px, 3.2vmin, 70px);
    height: clamp(30px, 3.2vmin, 70px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: transparent;
    border: 0.5px solid #828181;
    text-decoration: none;
    cursor: pointer;
    box-shadow: -1px -1px 3px #6f6f6f,
    -1px -1px 3px #1c1a1a,
    inset -1px -1px 3px #1c1a1a,
    inset -1px -1px 3px #6f6f6f;
}

.button:hover{
    background-color: #6f6f6f;
}

/* ========================== */
/* Pad Matrix + Side Controls */
/* ========================== */

.led-pads{
    grid-area: pads;
    display:grid;
    border: 1px solid black;
    grid-template-columns: repeat(var(--pad-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--pad-rows), minmax(0, 1fr));
    gap: var(--pad-gap);
    aspect-ratio: 1/1;
    cursor:pointer;
    width: 100%;
}

.side-controls{
    grid-area: side;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--pad-rows), minmax(0, 1fr));
    gap: var(--pad-gap);
    width: 100%;
    height: 100%;
    justify-self: stretch;
    align-items: stretch;
}

.side-control-row{
    display: grid;
    grid-template-columns: auto 1fr;
    height: 100%;
    align-items: center;
    gap: clamp(6px, 1vmin, 12px);
}

.side-label{
    font-size: clamp(0.8rem, 0.9vmin, 1rem);
    color: white;
    text-align: left;
    white-space: nowrap;
}