/* --------------------------------------------------------------
   Algemene layout
-------------------------------------------------------------- */
body{
    background:#c0c0c0;
    font-family:"Press Start 2P",monospace;
    color:#0f380f;
    margin:0;
    padding:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

/* --------------------------------------------------------------
   Game Boy Screen Container
-------------------------------------------------------------- */
.screen{
    width:90vw;
    max-width:320px;
    aspect-ratio:1 / 1;
    background:#9bbc0f;
    border:4px solid #0f380f;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;

    /* subtle retro border depth */
    box-shadow:
        0 0 0 4px #8bac0f,
        0 0 0 8px #306230;
}

/* --------------------------------------------------------------
   ASCII Host Header
-------------------------------------------------------------- */
/* --------------------------------------------------------------
   ASCII Host Header
-------------------------------------------------------------- */
/* --------------------------------------------------------------
   ASCII Host Header (Responsive, fits small screens)
-------------------------------------------------------------- */
.host {
    flex: 0 0 auto;
    background: #0f380f;
    color: #9bbc0f;
    padding: 4px;                    /* slightly smaller padding */
    font-size: 8px;                  /* default base for desktops */
    line-height: 1.0;
    box-sizing: border-box;          /* include padding/border in width */
}

.host pre {
    margin: 0;
    font-size: clamp(3px, 2vw, 6px); /* shrink more on small screens */
    line-height: 1.0;
    white-space: pre;
    overflow-wrap: normal;           /* preserve ASCII formatting */
    word-break: normal;
}

/* --------------------------------------------------------------
   Responsive: Shrink ASCII banner on smaller screens
-------------------------------------------------------------- */
@media (max-width: 400px) {
    .host {
        padding:4px;
    }
    .host pre {
        font-size:3px;  /* smaller ASCII font for tight mobile screens */
        line-height:1.0;
    }
}

/* --------------------------------------------------------------
   Vraag & Antwoorden
-------------------------------------------------------------- */
.qa{
    flex:1;
    overflow-y:auto;
    padding:6px;
    display:flex;
    flex-direction:column;
}

.question{
    font-size:10px;
    margin-bottom:8px;
    line-height:1.4;
}

/* --------------------------------------------------------------
   Lifelines
-------------------------------------------------------------- */
.lifelines{
    display:flex;
    gap:4px;
    margin-bottom:8px;
}

.lifelines button{
    flex:1;
    background:#0f380f;
    color:#9bbc0f;
    border:none;
    padding:4px;
    font-size:8px;
    cursor:pointer;
}

.lifelines button:hover{
    background:#306230;
}

/* --------------------------------------------------------------
   Antwoorden (2x2 Grid)
-------------------------------------------------------------- */
.answers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
}

.answers button{
    background:#0f380f;
    color:#9bbc0f;
    border:none;
    padding:6px;
    font-size:9px;
    cursor:pointer;
    word-break:break-word;
    text-align:center;
}

.answers button:hover{
    background:#306230;
}

/* --------------------------------------------------------------
   Info box (beer choice, audience, friend)
-------------------------------------------------------------- */
.info{
    margin-top:10px;
    font-size:9px;
    line-height:1.4;
    display: flex;
    justify-content: center;   /* center buttons horizontally */
    flex-wrap: wrap;           /* wrap on small screens if needed */
    gap: 6px;                  /* space between buttons */
}

.info button{
    background:#0f380f;
    color:#9bbc0f;
    border:none;
    padding:4px 8px;
    cursor:pointer;
    font-size:8px;
}

.info button:hover{
    background:#306230;
}
/* --------------------------------------------------------------
   Score display
-------------------------------------------------------------- */
.choice{
    margin-top:10px;
    font-size:10px;
}

/* --------------------------------------------------------------
   Restart button (Game Over)
-------------------------------------------------------------- */
.restart-btn{
    background:#d00;
    color:#fff;
    border:none;
    padding:6px;
    font-size:10px;
    cursor:pointer;
    width:100%;
    margin-top:10px;
}

.restart-btn:hover{
    background:#a00;
}

/* --------------------------------------------------------------
   High Score Panel
-------------------------------------------------------------- */
.panel{
    background:#9bbc0f;
    border:4px solid #0f380f;
    padding:20px;
    max-width:360px;
    width:90%;
    text-align:center;
}

.panel table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

.panel th,
.panel td{
    border:1px solid #0f380f;
    padding:4px;
    font-size:8px;
}

.panel th{
    background:#0f380f;
    color:#9bbc0f;
}

.panel button{
    margin-top:12px;
    background:#0f380f;
    color:#9bbc0f;
    border:none;
    padding:6px 12px;
    cursor:pointer;
    font-size:9px;
}

.panel button:hover{
    background:#306230;
}

/* --------------------------------------------------------------
   Beer Mode Visual Effect
-------------------------------------------------------------- */
.beer-mode .screen{
    transform:rotate(0.3deg);
}

.beer-mode{
    filter:contrast(1.05) brightness(1.03);
}