html,
body{
    margin:0;
    padding:0;
    min-width:320px;
    font-family:"Trebuchet MS",Arial,sans-serif;
    box-sizing:border-box;
}

*,
*::before,
*::after{
    box-sizing:inherit;
}

/* ADMIN PAGE */

.admin-page{
    background:#ececec;
    min-height:100vh;
    overflow-y:auto;
}

/* DISPLAY PAGE */

.display-page{
    background:
        radial-gradient(circle at 82% 18%, rgba(210,224,242,.75), transparent 24%),
        radial-gradient(circle at 18% 82%, rgba(218,241,240,.8), transparent 28%),
        radial-gradient(#d7e2ef 1px, transparent 1px) 0 0 / 18px 18px,
        #f7f9fb;
    color:#21105e;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

/* ADMIN PAGE HEADER */

.admin-page header{
    background:#21105e;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* SHARED TITLE STYLE */

.title{
    font-weight:900;
    color:#ffffff;
    letter-spacing:2px;
    line-height:1;
    text-align:center;
}

/* ASSESSMENT SEAT ID MANAGER header */

.admin-page .title{
    font-size:60px;
}

/* TESTING ROOM header */

/* GRID */

.grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    padding:30px;
}

.card{
    background:#f1f1f1;
    border:3px solid #21105e;
    border-radius:12px;
    padding:11.88px;
}
/* SEAT */
.card h3{
    font-size:25px;
    color:#21105e;
    text-transform:uppercase;
    text-align:center;
    margin:0 0 10px 0;
    font-weight:900;
}

.card textarea{
    width:100%;
    box-sizing:border-box;

    text-align:center;

    font-size:22px;
    font-family:Arial,sans-serif;
    font-weight:700;

    height:80px;

    padding:15px 10px;

    resize:none;
    overflow:hidden;

    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;

    line-height:1.2;
}

.card button{
    width:100%;
    padding:8px;
    margin-top:8px;
    font-size:15px;
    font-weight:900;
    height:40px;
}

.called{
    background:#2daa43 !important;
    color:#ffffff !important;
    transition:opacity 1s ease, background-color 1s ease;
}

.called.fading{
    opacity:.35;
}

/* CALL BOARDS */

.display-shell{
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(6px, 1vh, 12px);
    align-items:start;
}

.room-panel{
    min-width:0;
    background:#ffffff;
    border-radius:0 16px 16px 0;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(18,52,90,.13);
    position:relative;
    padding-left:0;
    background:
        radial-gradient(circle at 84% 45%, rgba(255,255,255,.92), transparent 48%),
        #eaf4ff;
}

.room-panel:nth-child(2){
    background:
        radial-gradient(circle at 84% 45%, rgba(255,255,255,.92), transparent 48%),
        #eafaf1;
}

.room-panel::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 auto 0 0;
    width:clamp(92px, 13vw, 170px);
    background:#12345a;
    clip-path:polygon(0 0, 100% 0, 62% 20%, 45% 48%, 62% 78%, 100% 100%, 0 100%);
}

.room-panel:nth-child(2)::before{
    background:#0d6065;
}

.room-panel::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 auto 0 0;
    width:clamp(96px, 14vw, 184px);
    background:#edc658;
    clip-path:polygon(86% 0, 100% 0, 68% 22%, 52% 48%, 68% 78%, 100% 100%, 86% 100%, 35% 52%);
}

.room-panel:nth-child(2)::after{
    background:#d5eeee;
}

.room-title{
    min-height:clamp(58px, 7vw, 84px);
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(900px, 68%);
    margin-left:0;
    padding:8px 24px;
    background:#12345a;
    color:#ffffff;
    border-bottom:3px solid #d5a928;
    font-size:clamp(52px, 5.5vw, 98px);
    line-height:0.9;
    font-weight:900;
    letter-spacing:clamp(1px, .15vw, 2px);
    text-align:center;
    position:relative;
    z-index:2;
    border-radius:0 8px 8px 0;
    box-shadow:8px 6px 0 rgba(18,52,90,.2);
    clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%);
    overflow:hidden;
    white-space:nowrap;
}

.room-panel:nth-child(2) .room-title{
    background:#0d8b8d;
    font-size:clamp(52px, 5.5vw, 98px);
}

.room-icon{
    position:absolute;
    left:clamp(-112px, -11vw, -72px);
    color:#f3cf70;
    font-size:clamp(26px, 3vw, 42px);
    line-height:1;
}

.interview-icon{
    color:#ffffff;
}

.call-board{
    width:100%;
}

.current-call{
    min-height:clamp(145px, 18vh, 205px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.72);
    border-bottom:1px solid #d7dee7;
    text-align:center;
    padding:18px 12% 16px;
    position:static;
}

.current-label{
    position:absolute;
    top:clamp(14px, 1.8vw, 24px);
    right:8%;
    z-index:3;
    color:#12345a;
    border-bottom:2px solid #d5a928;
    padding:0 10px 5px;
    margin:0;
    font-size:clamp(42px, 4vw, 68px);
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.call-location{
    color:#082746;
    font-size:clamp(42px, 4.8vw, 84px);
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
    font-weight:900;
    text-shadow:0 0 .2px currentColor;
    text-transform:uppercase;
    line-height:1.1;
}

.call-value{
    color:#082746;
    font-size:clamp(90px, 10vw, 174px);
    font-weight:900;
    line-height:1.05;
    max-width:100%;
    padding:5px 18px;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
}

.call-empty{
    color:#082746;
    font-size:clamp(18px, 2.5vw, 32px);
    font-weight:900;
    letter-spacing:.5px;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
}

.call-history{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border:0;
    width:82%;
    margin:0 auto;
    position:relative;
    left:clamp(14px, 6vw, 78px);
    padding:clamp(12px, 1.5vw, 20px) 0;
    gap:clamp(8px, 1.2vw, 16px);
    background:transparent;
    grid-auto-rows:clamp(158px, 20.5vh, 232px);
}

.history-heading{
    padding:8px 12px;
    background:#ffffff;
    color:#12345a;
    border-bottom:2px solid #d5a928;
    font-size:clamp(12px, 1.1vw, 16px);
    font-weight:900;
    letter-spacing:1px;
    text-align:center;
}

.previous-list-title{
    margin:clamp(7px, 1vw, 12px) 16px 0;
    padding:5px 10px;
    color:#12345a;
    border-bottom:2px solid #d5a928;
    font-size:clamp(12px, 1.1vw, 16px);
    font-weight:900;
    letter-spacing:1px;
    text-align:center;
}

.previous-list{
    margin:0 16px 10px;
    border:1px solid #c4ceda;
    border-radius:5px;
    overflow:hidden;
}

#board .previous-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#board .call-history{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

#board .previous-list-row:nth-child(odd){
    border-right:1px solid #d7dee7;
}

#board .previous-list-row:nth-child(n+6){
    border-top:0;
}

@media (min-width:1000px) and (min-height:800px){
    .display-shell{
        width:calc(100% - 32px);
        max-width:none;
        margin:16px auto;
        gap:16px;
    }

    .room-title{
        min-height:64px;
        font-size:clamp(56px, 5.8vw, 78px);
    }

    .room-panel:nth-child(2) .room-title{
        min-height:64px;
        font-size:clamp(56px, 5.8vw, 78px);
    }

    .current-call{
        min-height:190px;
    }

    .current-label{
        font-size:clamp(36px, 3.3vw, 51px);
    }

    .call-location{
        font-size:clamp(28px, 3vw, 44px);
    }

    .call-value{
        font-size:clamp(62px, 6.5vw, 104px);
    }

    .history-call{
        min-height:118px;
    }

    .history-call .call-location{
        font-size:clamp(18px, 1.7vw, 25px);
    }

    .history-call .call-value{
        font-size:clamp(28px, 2.7vw, 42px);
    }
}

.previous-list-row{
    min-height:clamp(22px, 2.6vh, 30px);
    display:flex;
    align-items:center;
    gap:10px;
    padding:2px 10px;
    background:#f6f8fa;
    color:#12345a;
    border-bottom:1px solid #d7dee7;
    font-size:clamp(13px, 1.25vw, 18px);
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.previous-list-row:last-child{
    border-bottom:0;
}

.previous-number{
    width:19px;
    height:19px;
    display:inline-flex;
    flex:0 0 19px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#12345a;
    color:#ffffff;
    font-size:12px;
    font-weight:900;
}

.history-call{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.72);
    border:2px solid #12345a;
    border-radius:12px;
    text-align:center;
    overflow:hidden;
    padding:13px 10px;
    box-shadow:0 8px 20px rgba(18,52,90,.10), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.box-location{
    color:#12345a;
    font-size:clamp(52px, 5.45vw, 92px);
    font-weight:900;
    line-height:1.05;
    text-transform:uppercase;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
}

.box-value{
    margin-top:20px;
    color:#12345a;
    font-size:clamp(77px, 8.6vw, 130px);
    font-weight:900;
    line-height:1;
    overflow-wrap:anywhere;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
}

.history-call .box-value.box-name{
    max-width:100%;
    max-height:2.2em;
    font-size:clamp(16px, 2vw, 30px) !important;
    line-height:1.05;
    white-space:normal;
    word-break:break-word;
    overflow:hidden;
}

.box-empty{
    color:#12345a;
    font-size:clamp(36px, 3.65vw, 58px);
    font-weight:900;
    line-height:1;
    font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
}

.room-panel:nth-child(2) .box-empty{
    color:#12345a;
}

.room-panel:nth-child(2) .history-call{
    border-color:#0d8b8d;
}

.room-panel:nth-child(2) .box-location,
.room-panel:nth-child(2) .box-value{
    color:#12345a;
}

.history-call .call-location{
    font-size:clamp(16px, 1.6vw, 22px);
}

.history-call .call-value{
    font-size:clamp(24px, 2.5vw, 36px);
    padding:3px 8px;
}

@media (max-width:600px){
    .room-title{
        width:calc(100% - 54px);
        margin-left:54px;
        padding-left:14px;
        font-size:120px;
    }

    .room-icon{
        left:-46px;
        font-size:28px;
    }

    .current-call,
    .call-history{
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }

    .call-history{
        grid-template-columns:repeat(2, 1fr);
    }

    #board .previous-list{
        grid-template-columns:1fr;
    }

    #board .previous-list-row:nth-child(odd){
        border-right:0;
    }

    #board .previous-list-row:nth-child(n+2){
        border-top:1px solid #d7dee7;
    }

    .history-call:nth-child(2){
        border-right:0;
    }

    .history-call:nth-child(n+3){
        border-top:1px solid #21105e;
    }

    .history-call:nth-child(3){
        border-left:1px solid #21105e;
    }

    .history-call:nth-child(4){
        border-right:0;
    }

    .history-heading{
        padding:6px 8px;
    }
}

@media (min-width:601px) and (max-height:800px){
    .display-page{
        height:100vh;
        overflow:hidden;
    }

    .display-shell{
        gap:6px;
    }

    .room-title{
        min-height:48px;
        font-size:clamp(22px, 2.8vw, 34px);
    }

    .current-call{
        min-height:132px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .current-label{
        margin-bottom:7px;
        font-size:30px;
    }

    .call-value{
        font-size:clamp(34px, 4vw, 58px);
        padding:2px 12px;
    }

    .call-history{
        padding-top:8px;
        padding-bottom:8px;
    }

    .history-call{
        min-height:76px;
        padding:6px 4px;
    }

    .box-location{
        font-size:clamp(32px, 3.2vw, 48px);
    }

    .box-value{
        margin-top:8px;
        font-size:clamp(44px, 4.4vw, 66px);
    }
}

.call-board .call-location,
.call-board .call-value,
.call-board .call-empty,
.call-board .box-location,
.call-board .box-value,
.call-board .box-empty{
    color:#12345a;
}

/* POPUP */

/* POPUP */

.popup{
    position:fixed;
    inset:0;
    background:#ececec;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#061d35;
    z-index:9999;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
}

.hidden{
    display:none;
}

.applicant-call{
    font-size:90px;
    font-weight:900;
    line-height:1;
    text-align:center;
    color:#061d35;
    margin:10px 0;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
}

.seat-call{
    font-size:clamp(70px, 8vw, 140px);
    font-weight:900;
    line-height:0.9;
    text-align:center;
    display:block;
    width:100%;
    color:#061d35;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
    text-transform:uppercase;
    letter-spacing:-.05em;
    margin:0;
}

.instruction{
    font-size:50px;
    font-weight:900;
    margin-top:20px;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
}

.applicant-call-id{
    font-size:clamp(130px, 17vw, 260px);
    font-weight:900;
    line-height:0.9;
    text-align:center;
    color:#061d35;
    margin:0;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
    letter-spacing:-.06em;
}

.applicant-call-name{
    font-size:90px;
    font-weight:900;
    line-height:1;
    text-align:center;
    color:#061d35;
    margin:10px 0;
    font-family:"Segoe UI","Trebuchet MS","Arial",sans-serif;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
}