.calculator-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; margin-top: 1rem; }
.selection-box { background-color: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem; }
.selection-box p { margin: 0 0 1rem 0; font-size: 0.9rem; min-height: 20px; color: rgba(255,255,255,0.8); }
.card-selection-container { display: flex; flex-wrap: wrap; gap: 6px; }
.card-btn { background-color: #fff; color: #222; border: 2px solid transparent; width: 40px; height: 55px; border-radius: 4px; font-weight: bold; font-size: 1.2rem; transition: all 0.2s ease; cursor: pointer; }
.card-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.card-btn.selected { border-color: var(--gold-accent); background-color: #fffae0; transform: scale(1.1); }
.card-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }
#result-box { text-align: center; grid-column: 1 / -1; padding: 1.5rem; }
#result-box .content-subtitle { font-size: 1.5rem; }
#result-display p { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 3.5rem; font-weight: bold; min-height: 50px; }
#reset-btn { background-color: var(--dark-red); color: white; border: none; padding: 10px 20px; border-radius: 50px; font-weight: bold; cursor: pointer; margin-top: 1rem; transition: background-color 0.2s; }
#reset-btn:hover { background-color: #a12415; }
.move-hit { color: #4ade80; }
.move-stand { color: #f87171; }
.move-double { color: #60a5fa; }
.move-split { color: #facc15; }
@media (min-width: 768px) { .calculator-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { #result-display p { font-size: 2.5rem; } }