/* ============================================================
   LAYOUT VARS — pixel coords relative to the native 960×540 image.
   Each element has its own x, y, width, height, and scale.
   Scale uses transform-origin: top left, so x/y always stay put.
   ============================================================ */
:root {
    /* game area — both boards */
    --game-area-x:      230px;
    --game-area-y:      115px;
    --game-area-width:  1050px;
    --game-area-height: 640px;
    --game-area-scale:  0.45;

    /* player count panel */
    --player-count-x:      740px;
    --player-count-y:      40px;
    --player-count-width:  168px;
    --player-count-height: 40px;
    --player-count-scale:  .6;

    /* audio controls panel */
    --audio-x:      738px;
    --audio-y:      62px;
    --audio-width:  172px;
    --audio-height: 54px;
    --audio-scale:  .6;

    /* chat panel */
    --chat-x:      735px;
    --chat-y:      175px;
    --chat-width:  194px;
    --chat-height: 315px;
    --chat-scale:  .8;

    /* lobby panel */
    --lobby-x:      58px;
    --lobby-y:      162px;
    --lobby-width:  250px;
    --lobby-height: 380px;
    --lobby-scale:  .6;

    /* status label */
    --status-x:      250px;
    --status-y:      433px;
    --status-width:  500px;
    --status-height: 30px;
    --status-scale:  .9;

    /* faction selector */
    --faction-x:      327px;
    --faction-y:      135px;
    --faction-width:  130px;
    --faction-height: 60px;
    --faction-scale:  .4;

    /* board action buttons (randomize / ready / rematch / leave) */
    --board-controls-x:      237px;
    --board-controls-y:      403px;
    --board-controls-width:  350px;
    --board-controls-height: 39px;
    --board-controls-scale:  .6;
}

/* ─── Heuristica font ──────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Heuristica';
    src: url('../assets/Heuristica-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Heuristica';
    src: url('../assets/Heuristica-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Heuristica';
    src: url('../assets/Heuristica-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Heuristica';
    src: url('../assets/Heuristica-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

/* ─── SpecialElite font ─────────────────────────────────────────────────────── */
@font-face {
    font-family: 'SpecialElite';
    src: url('../assets/SpecialElite-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Base styles and layout */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Heuristica', serif;
    background: #111;
    color: rgb(180, 180, 180);
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Landing page centered layout */
body.landing {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main interface full-screen layout — #111 fills letterbox, image is inside #mainInterface */
body.main-interface {
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    margin: 0 auto;
}

/* Landing page container — let flexbox on body do all the centering */
body.landing .container {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 20px;
}

/* Main interface container — transparent full-screen wrapper */
body.main-interface .container {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 0;
}

/* Common button styles */
button {
    padding: 12px 25px;
    border: outset;
    border-radius: 0px;
    border-color: #333;
    font-family: inherit;
    font-size: 16px;
    /* font-weight: bold; */
    cursor: pointer;
    /* transition: all 0.3s ease; */
    margin: 5px;
}

.btn-primary {
    background: #4d4d4d;
    color: white;
}

.btn-primary:hover {
    background: #6d6d6d;
    color: yellow;
    /* transform: translateY(-2px); */
}

.btn-secondary {
    background: #4d4d4d;
    color: white;
}

.btn-secondary:hover {
    background: #6d6d6d;
    color: yellow;
}

/* Common input styles */
input[type="text"] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 0px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    margin-bottom: 10px;
}

input[type="text"]:focus {
    outline: none;
    /* box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); */
}

.input-group {
    margin: 20px 0;
}

/* Common message styles */
.error-message {
    color: #ff6b6b;
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.success-message {
    color: #4caf50;
    margin: 10px 0;
    padding: 10px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.empty-state {
    text-align: center;
    opacity: 0.6;
    padding: 20px;
    margin-top: 30%;
    font-size: 14px;
}