body{
font-family:system-ui,-apple-system,Segoe UI,Roboto;
margin:0;
background:#1c1f26;
color:white;
text-align:center;
min-height:100dvh;
}

html,
body{
width:100%;
height:100%;
overflow-x:hidden;
}

body.light{
background:#eef1f6;
color:#111;
}

body.light header{
background:#ffffff;
}

body.light th,
body.light td{
background:#ffffff;
color:#111;
}

body.light .player-name{
background:#e5e9f0;
}

body.light .overlay-content{
background:#ffffff;
}

body.light .modal-content{
background:#ffffff;
color:#111;
}

body.light input{
background:#ffffff;
color:#111;
}

body.light .player-card{
background:#ffffff;
}

body.light .titel{
background:none;
-webkit-text-fill-color:#111;

text-shadow:
0 0 6px rgba(255,0,0,0.5),
0 0 8px rgba(255,0,0,0.35),
0 0 14px rgba(255,0,0,0.2);

}


body.light .start-lobby-btn{
color:#333;
border-color:#22c55e;
}

body.light .calc-btn{
color:#333;
}

body.light #score-table td{
background: #eef1f6;
border-bottom:2px solid grey;
}

body.light .player-name{
background:#d4d6d9 !important;
}

body.light .total-col{
border-left:1.5px solid darkgrey;
text-shadow:
0 0 6px black,
0 0 12px black;
}

.titel{

font-size:26px;
font-weight:700;
letter-spacing:1.5px;

background:linear-gradient(
90deg,
#ffd700 0%,
#fff6b0 45%,
#ffd700 100%
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 6px rgba(255,215,0,0.35),
0 0 12px rgba(255,215,0,0.15);

}

h2{
margin-top:10px;
font-weight:500;
}

button{
padding:12px 20px;
margin:8px;
font-size:16px;
border:none;
border-radius:10px;
cursor:pointer;
background:#2c7ef7;
color:white;
transition:0.2s;

touch-action: manipulation;
}

button:hover{
opacity:0.9;
}

input{
display:block;
width:80%;
margin:10px auto;
padding:12px;
font-size:16px;
border-radius:8px;
border:none;
background:#2b2f38;
color:white;
}

.hidden{
display:none;
}

/* START SCREEN */

.start-container{
max-width:420px;
margin:auto;
padding:20px;
}

.players-list{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:20px;
}

.player-card{
width:100%;
display:flex;
align-items:center;
background:#2b2f38;
border-radius:12px;
padding:6px;
box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.player-card input{
flex:1;
border:none;
background:transparent;
color:white;
font-size:16px;
padding:10px;
}

.player-card input:focus{
outline:none;
}

.remove-player{
background:#ff5a5a;
border:none;
color:white;
font-size:16px;
width:36px;
height:36px;
border-radius:8px;
cursor:pointer;

display: flex;
align-items: center;
justify-content: center;
}

.add-player-btn{
width:99%;
background:#3b82f6;
color:white;
}

.start-btn{
width:99%;
background:#22c55e;
font-size:18px;
}

.calc-btn{
background:none;
font-size:18px;
color:white;
text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00;

width:99%;
padding:7px 90px 5px 14px;
margin-top:1px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
}

.calc-btn:hover{
text-shadow: 0 0 10px red, 0 0 20px red;
}

.calc-btn img{
width:70px;
height:70px;
}


.calc-btn-small{
background:none;
border:none;
width:40px;
height:40px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
opacity:0.9;
}

.calc-btn-small img{
width:55px;
height:55px;
}

.calc-btn-small:hover{
opacity:1;
}

/* HEADER */

.game-header{

background:#111318;

padding:
calc(env(safe-area-inset-top) + 12px)
12px
12px
12px;

position:sticky;
top:0;
z-index:100;

box-shadow:0 4px 10px rgba(0,0,0,0.6);

}

.game-title{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.title-card{
height:60px;
border-radius:6px;
}

.left-card{
transform:rotate(-8deg);
height:70px;
margin-right:-28px;
margin-bottom:9px;
}

.right-card{
transform:rotate(10deg);
height:45px;
}

.lobby-btn{
background:none;
border:none;
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
cursor:pointer;
opacity:0.85;
transition:0.15s;
}

.lobby-btn img{
width:45px;
height:45px;
}

.lobby-btn:hover{
opacity:1;
}

.lobby-btn:active{
transform:scale(0.92);
}

.start-lobby-btn{
justify-content:left;
width:100%;
color:grey;
background:none;
font-size:18px;
padding:14px 40px 14px 14px;
margin-top:10px;
margin-bottom:20px;
margin-left:-15px;
gap:10px;
}

.start-lobby-btn:hover{
text-shadow: 0 0 20px white;
}

.start-lobby-btn img{
width:40px;
height:40px;
}

/* TABLE */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:flex;
align-items:center;
justify-content:center;
z-index:200;
}

.overlay.hidden{
display:none;
}

.overlay-content{
background:#1f222a;
padding:15px;
border-radius:14px;
width:240px;
max-width:90%;
}

.table-wrapper{
overflow-x:auto;
margin-top:20px;
width:100%;
}

#score-table{
border-collapse:collapse;
margin:auto;
min-width:700px;
table-layout:fixed;
}

#score-table th,
#score-table td{
width:90px;
min-width:90px;
max-width:90px;
padding:12px 6px;
text-align:center;
border-bottom:2px solid rgba(255,255,255,0.1);
overflow:hidden;
}

#score-table th{
height:90px;
background-size:102px 90px;
background-repeat:no-repeat;
background-position:center 24px;
}

#score-table th.locomotive{
background-size:102px 102px;
background-position:center 12.5px;
}

#score-table td{
background: #1c1f26;
cursor:pointer;
width:90px;
max-width:90px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.player-name{
position:sticky;
left:0;
background:#15181f !important;
font-weight:600;
z-index:30;
width:120px;
min-width:120px;
max-width:120px;
}

.locomotive{
position:sticky;
left:0;
background:#1c1f26;
z-index:30;
width:120px;
}

.round-header{
width:90px;
}

.active-column{
background:#353a45;
box-shadow: inset 0 0 10px #0f8759;
}


/* KEYPAD */

#keypad-display{
font-size:24px;
margin-bottom:8px;
text-align:center;
min-height:29px;
}

#keypad-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
justify-items:center;
}

#keypad-grid button{
width:55px;
height:55px;
font-size:20px;
border-radius:10px;
}

#keypad-grid button[data-key="enter"]{
color:#4dff88;
font-weight:bold;
}

#keypad-grid button[data-key="del"]{
color:#ff5a5a;
font-weight:bold;
}

.game-controls{
display:flex;
justify-content:flex-start;
gap:10px;
margin-top:40px;
padding-left:10px;
}

.game-btn{
background:none;
border:2.5px solid #444;
color:#ff5a5a;
padding:8px 14px;
font-size:16px;
border-radius:10px;
opacity:0.9;
}

.game-btn:hover{
text-shadow: 0 0 10px white;
}

body.light .game-btn:hover{
text-shadow: 0 0 10px black;
}

#toast{
position:fixed;
top:55%;
left:50%;
transform:translate(-50%,-50%);
background:#2b2f38;
color:yellow;
padding:14px 20px;
border-radius:10px;
font-size:15px;
opacity:0;
pointer-events:none;
transition:opacity 0.3s, transform 0.3s;
box-shadow:0 8px 25px rgba(0,0,0,0.6);
z-index:500;
}

#toast.show{
opacity:1;
transform:translate(-50%,-55%);
}


/* === PODIUM === */
#podium{
margin-top:30px;
font-size:18px;
opacity:0;
transform:translateY(-20px);
transition:all 0.6s ease;
padding-bottom:40px;
}

#podium.show{
opacity:1;
transform:translateY(0);
}

#podium h2{
text-shadow:
0 0 6px #ff0000,
0 0 12px #ff0000,
0 0 20px rgba(255,0,0,0.7);
}

.podium-player{
margin:6px 0;
font-weight:500;
}

.gold{
text-shadow:
0 0 6px gold,
0 0 12px gold,
0 0 20px rgba(255,215,0,0.9);
}

.silver{
text-shadow:
0 0 6px #c0c0c0,
0 0 12px #c0c0c0;
}

.bronze{
text-shadow:
0 0 6px #cd7f32,
0 0 12px #cd7f32;
}


.total-col{
border-left:1.5px solid rgba(255,255,255,0.25);
font-weight:700;
min-width:70px;

text-shadow:
0 0 6px rgba(255,255,255,0.7),
0 0 12px rgba(255,255,255,0.5);
}

.total-header{
border-left:1.5px solid rgba(255,255,255,0.25);
}

/* PAGE TRANSITIONS */

body{
opacity:0;
transform:scale(0.98);
transition:
opacity 0.35s ease,
transform 0.35s ease;
}

body.page-enter{
opacity:1;
transform:scale(1);
}

body.page-exit{
opacity:0;
transform:scale(0.98);
pointer-events:none;
}