<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Мафия: Тетрадь смерти</title>

<style>
*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#08090d;
    color:#fff;
    font-family:Arial,sans-serif;
}

#app{
    max-width:700px;
    margin:auto;
    padding:15px;
}

.card{
    background:#151821;
    border:1px solid #303542;
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
}

h1{
    margin-top:0;
}

h2{
    margin-bottom:8px;
}

p{
    color:#c1c5d1;
}

input,select{
    width:100%;
    padding:13px;
    margin:6px 0 12px;
    background:#0e1016;
    color:white;
    border:1px solid #363b49;
    border-radius:10px;
    font-size:16px;
}

button{
    width:100%;
    padding:13px;
    margin:5px 0;
    border:0;
    border-radius:11px;
    background:#6657d9;
    color:white;
    font-weight:bold;
    font-size:16px;
}

button:active{
    transform:scale(.98);
}

.red{
    background:#a8324b;
}

.gray{
    background:#292e3b;
}

.green{
    background:#318653;
}

.hidden{
    display:none;
}

.timer{
    font-size:30px;
    font-weight:bold;
    text-align:center;
    margin:10px;
}

.phase{
    text-align:center;
    font-size:24px;
    font-weight:bold;
}

.role{
    text-align:center;
    font-size:28px;
    font-weight:bold;
    margin:15px 0;
}

.players{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.player{
    background:#20242f;
    border:1px solid #363b49;
    border-radius:11px;
    padding:11px;
}

.you{
    border:2px solid #7566ff;
}

.dead{
    opacity:.35;
    text-decoration:line-through;
}

.room{
    background:#0f1118;
    padding:13px;
    border-radius:12px;
    margin:8px 0;
}

.item{
    display:inline-block;
    padding:5px 7px;
    margin:2px;
    background:#292e3b;
    border-radius:6px;
}

.log{
    background:#0c0e13;
    border-radius:10px;
    padding:10px;
    height:190px;
    overflow:auto;
}

.small{
    font-size:13px;
    color:#969cac;
}

.win{
    text-align:center;
    font-size:25px;
    font-weight:bold;
}
</style>
</head>

<body>

<div id="app">

<!-- МЕНЮ -->

<div id="menu" class="card">

<h1>📓 Мафия: Тетрадь смерти</h1>

<p>
Одиночная игра. Ты играешь против ботов.
</p>

<label>Твоё имя</label>

<input
id="name"
value="Годжо"
maxlength="20"
>

<label>Количество игроков</label>

<select id="count">

<option value="6">6</option>
<option value="7">7</option>
<option value="8" selected>8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="12">12</option>

</select>

<button onclick="startGame()">
▶️ Начать игру
</button>

</div>


<!-- ИГРА -->

<div id="game" class="hidden">

<div class="