* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background:
        radial-gradient(circle at top, rgba(77, 120, 255, 0.25), transparent 30%),
        radial-gradient(circle at bottom right, rgba(150, 70, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #050814 0%, #0b1021 55%, #090d18 100%);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.page {
    width: 100%;
    max-width: 980px;
    text-align: center;
    padding: 24px;
    border: 2px solid rgba(121, 147, 219, 0.28);
    border-radius: 22px;
    background: rgba(11, 16, 33, 0.72);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

h1 {
    margin: 0 0 8px;
    font-size: 48px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b9c7ff;
    text-shadow: 0 0 12px rgba(120, 150, 255, 0.6);
}

.subtitle {
    margin: 0 0 20px;
    color: #dbe6ff;
    font-size: 18px;
    letter-spacing: 0.4px;
}

.top-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.info-box {
    min-width: 150px;
    padding: 12px 16px;
    background: rgba(26, 35, 62, 0.92);
    border: 2px solid #4d5f94;
    border-radius: 10px;
    font-weight: bold;
    font-size: 17px;
    letter-spacing: 0.3px;
    box-shadow: 0 0 18px rgba(100, 129, 214, 0.12);
}

.info-box span {
    color: #87e0ff;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

button {
    padding: 10px 18px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(180deg, #9fd7ff 0%, #6c8dff 100%);
    color: #091121;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 18px rgba(46, 69, 150, 0.25);
}

button:hover {
    background: linear-gradient(180deg, #b8e2ff 0%, #7b9cff 100%);
}

.info-panel {
    margin: 0 auto 16px;
    max-width: 780px;
    padding: 16px;
    background: rgba(18, 27, 49, 0.95);
    border: 2px solid #4d5f94;
    border-radius: 10px;
    text-align: left;
}

.info-panel h2 {
    margin-top: 0;
    color: #87e0ff;
    letter-spacing: 1px;
}

.info-panel p {
    margin: 8px 0;
    line-height: 1.5;
    color: #eef3ff;
}

.hidden {
    display: none;
}

.game-frame {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    border: 4px solid #5a6fa8;
    border-radius: 12px;
    background: #050915;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
}

canvas {
    display: block;
    max-width: 100%;
    height: auto;
    background: #050915;
    border-radius: 8px;
}

.message-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 20px;
    background: rgba(7, 11, 23, 0.88);
    border-radius: 10px;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.4px;
    color: #87e0ff;
    border: 1px solid rgba(135, 224, 255, 0.32);
}

.message-box.hidden {
    display: none;
}

@media (max-width: 940px) {
    h1 {
        font-size: 34px;
    }

    .page {
        max-width: 100%;
    }

    .info-box {
        min-width: 120px;
    }
}