*/
/* To make it look like a card, we should wrap the content in JS or just style the background of #gameOver?
No, #gameOver IS the overlay.
If I want a card, I need a wrapper.
OR I can style the #gameOver to NOT be the overlay but the card? No, v-show is on it.
Best approach without changing HTML: Style the elements to look good on the overlay, or give them a semi-transparent background container?
Actually, let's just make the overlay the background and the content float in the center.
To make a "card" look without a wrapper div, we can't really do it easily for multiple elements (h1, p, button).
Alternative: Style #gameOver items to have a white background? No.
Let's just style the text to be readable on the dark overlay, OR add a pseudo-element?
Actually, `index.html` structure:
游戏结束
{{gameOverText}}
I can't treat #gameOver as the card because it overs the whole screen.
I will just style the text to be white and big, and the button to pop.
OR I can ask to edit HTML?
No, I should try to work with CSS.
Let's stick to a full-screen simple splash for Game Over.
*/
}
#gameOver h1 {
font-size: 3em;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
}
#gameOver p {
font-size: 1.5em;
color: white;
margin-bottom: 30px;
}
/* Adjust Pieces to not complete overlap */
.piece-img.boy-piece {
left: 35%;
}
.piece-img.girl-piece {
left: 65%;
}
button#accept_task,
button#reject_task,
button#restart_game {
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 20px;
font-size: 1em;
cursor: pointer;
font-weight: bold;
transition: transform 0.1s;
}
button#accept_task,
button#restart_game {
background-color: #2ecc71;
color: white;
box-shadow: 0 4px 6px rgba(46, 204, 113, 0.2);
}
button#reject_task {
background-color: #e74c3c;
color: white;
box-shadow: 0 4px 6px rgba(231, 76, 60, 0.2);
}
button:hover {
transform: scale(1.05);
}
@keyframes popIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Mobile Responsive Redesign */
@media (max-width: 768px) {
body {
background: #f0f2f5;
}
#main {
padding: 0;
height: 100vh;
width: 100vw;
max-width: 100%;
background: none;
backdrop-filter: none;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Break the wrapper structure using display: contents */
#upper_part {
display: contents;
}
/* 1. Top Section: Players and Turn */
#player_board {
order: 1;
width: 100%;
height: auto;
padding: 5px 10px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
z-index: 10;
gap: 10px;
flex: 0 0 auto;
box-sizing: border-box;
border-radius: 0 0 15px 15px;
}
.player {
flex-direction: row;
/* Horizontal layout for player info */
padding: 5px;
background: transparent;
font-size: 0.8rem;
gap: 5px;
}
.player_img {
width: 35px;
height: 35px;
margin-bottom: 0;
border-width: 2px;
}
#current_turn_text {
font-size: 1.2em;
}
/* 2. Middle Section: The Board */
#checkerboard {
order: 2;
flex: 1;
/* Take up remaining space */
width: 100vw;
max-width: 100vw;
aspect-ratio: 1;
/* Try to keep it square */
margin: auto;
/* Center vertically and horizontally */
padding: 2px;
border-radius: 5px;
box-shadow: none;
background: transparent;
overflow: hidden;
/* Prevent scrolling inside board */
}
.row {
gap: 1px;
}
.cell {
margin: 0;
border-radius: 2px;
border: none;
}
.cell p {
font-size: 0.6em;
opacity: 0.7;
}
/* Arrows on mobile */
.arrow {
width: 50%;
height: 50%;
opacity: 0.25;
}
/* 3. Bottom Section: Dice & Tasks */
#dice {
order: 3;
width: 100%;
flex: 0 0 auto;
padding: 10px;
background: white;
border-radius: 15px 15px 0 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: row;
/* Horizontal bar */
justify-content: space-between;
align-items: center;
gap: 10px;
box-sizing: border-box;
}
#dice_num {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex: 1;
gap: 10px;
}
#roll_dice {
padding: 12px 24px;
font-size: 1.1em;
margin: 0;
white-space: nowrap;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#dice_num_text {
font-size: 1.8em;
}
#task_text {
flex: 1;
margin: 0;
font-size: 0.85em;
background: #f8f9fa;
padding: 5px 10px;
border-radius: 5px;
text-align: left;
display: block;
white-space: normal;
/* Allow wrap */
line-height: 1.2;
max-height: 3em;
/* Limit height */
overflow: hidden;
}
/* Splash Screens */
#gameOver h1 {
font-size: 2em;
}
#gameOver p {
font-size: 1.2em;
}
}
/* Extra small screens fix */
@media (max-width: 380px) {
.player_img {
width: 30px;
height: 30px;
}
#roll_dice {
padding: 8px 16px;
font-size: 0.9em;
}
#dice_num_text {
font-size: 1.4em;
}
/* Ensure board fits vertically */
#checkerboard {
width: 95vw;
height: 95vw;
max-height: 60vh;
}
}