:root {
    --primary-color: #333;
    --bg-color: #f9f9f9;
    --box-bg: #fffcf0; /* Beige-ish for the question box */
    --box-border: #ccc;
    --highlight-border: #4a90e2; /* Blue border like in the image */
    --text-color: #333;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-color);
}

.container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    text-align: center;
    position: relative;
    border: 2px solid var(--highlight-border); /* Outer blue frame */
    border-radius: 8px;
    background-color: white;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.screen.active {
    display: flex;
}

h1 {
    font-size: 24px;
    margin-bottom: 2rem;
}

.description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: left;
    width: 100%;
}

.tutorial-box {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: left;
}

.box-inline {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: var(--box-bg);
    border: 1px solid var(--box-border);
    text-align: center;
    line-height: 25px;
    font-weight: bold;
}

.btn {
    padding: 12px 30px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 10px;
}

.btn.primary {
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #999;
}

.btn.primary:hover {
    background-color: #d0d0d0;
}

.btn.secondary {
    background-color: transparent;
    color: #666;
    text-decoration: none;
    display: inline-block;
}

/* Game Area */
.header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-size: 18px;
    color: #666;
}

/* Timer Bar */
.timer-bar-container {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

.timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50 0%, #FFC107 50%, #f44336 100%);
    width: 100%;
    transition: width 0.1s linear;
    border-radius: 10px;
}

.equation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px; /* Large font size */
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
    min-height: 100px; /* Fixed height to prevent layout shift */
}

.number {
    margin: 0 10px;
}

.question-box {
    width: 80px;
    height: 80px;
    background-color: var(--box-bg);
    border: 2px solid #ccc; /* Slightly darker border */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    color: #333;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.equals {
    margin: 0 10px;
}

.helper-text {
    color: #ff7f50; /* Orange color from image */
    font-size: 18px;
    margin-bottom: 10px;
    text-align: right;
    width: 80%; /* Position it near the buttons */
    writing-mode: vertical-rl; /* Vertical text if needed, or just position it properly */
    /* Based on image, it's vertical text '符号ボタン' next to the buttons. 
       Let's use absolute positioning or grid to replicate that exact layout if needed.
       For now, standard text above or side is fine, but let's try to match the side label look.
    */
    position: absolute;
    right: 20%;
    bottom: 120px;
}

.options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 200px; /* Fixed width for the 2x2 grid */
    margin: 0 auto; /* Center the container horizontally */
}

.op-btn {
    width: 80px;
    height: 80px;
    font-size: 48px;
    background-color: var(--box-bg);
    border: 2px solid #ccc;
    cursor: pointer;
    font-family: inherit;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background-color 0.1s;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    line-height: 1;
    overflow: hidden;
    position: relative;
}

.op-btn::before {
    content: attr(data-display);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

.op-btn:active {
    transform: scale(0.95);
    background-color: #eee;
}

.op-btn:hover {
    border-color: #999;
}

/* Result Card */
.result-card {
    font-size: 24px;
    margin-bottom: 30px;
}

.score-text {
    font-size: 36px;
    font-weight: bold;
    color: #e74c3c;
}