* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background-color: #0953dd; color: #f8f9fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; height: 100%; } [class~="start-menu-overlay"] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 1); display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease; z-index: 1000; } [class~="start-menu-content"] { text-align: center; } [class~="start-menu-logo"] { max-width: 80%; height: auto; margin-bottom: 1.25rem; } [class~="login-container"] { margin-bottom: 2.1875rem; } #password-login { width: 80%; padding: 0.9375rem; font-size: 1.125rem; font-family: 'Montserrat', sans-serif; background-color: #1b1b1b; color: #f8f9fa; border: 0.125rem solid #3567be; border-radius: 0.5rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4), inset 0 0 0.625rem rgba(255, 255, 255, 0.1); transition: box-shadow 0.3s ease, border-color 0.3s ease; } #password-login::placeholder { color: #7a7a7a; font-weight: bold; } #password-login:hover { box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.6), inset 0 0 0.75rem rgba(255, 255, 255, 0.2); } #password-login:focus { outline: none; border-color: #2a5298; box-shadow: 0 0 0.9375rem rgba(42, 82, 152, 0.6), inset 0 0 0.75rem rgba(255, 255, 255, 0.2); } @media (max-width: 25rem) { #password-login { width: 90%; font-size: 1rem; } } [class~="password-error"] { color: red; } [class~="start-menu-button"] { padding: 0.9375rem 2.5rem; font-family: "Montserrat", sans-serif; font-size: 1.5rem; border: #3cff00 solid 0.125rem; border-radius: 1.5rem; background: linear-gradient(145deg,#00e701 , #00e705); color: rgb(0, 0, 0); cursor: pointer; transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease; box-shadow: 0 0.5rem 0.9375rem rgba(0, 0, 0, 0.3), inset 0 0 0.9375rem rgba(255, 255, 255, 0.1); font-weight: bold; letter-spacing: 0.0625rem; text-transform: uppercase; text-align: center; animation: glow 1.5s infinite alternate; } [class~="start-menu-button"]:hover { background: linear-gradient(145deg, #00e701 , #00e705); transform: translateY(-0.3125rem) scale(1.05); box-shadow: 0 0.9375rem 1.5625rem rgba(0, 0, 0, 0.4), inset 0 0 0.9375rem rgba(255, 255, 255, 0.2); } [class~="start-menu-button"]:active { background: linear-gradient(145deg, #1e3c72, #2a5298); transform: translateY(0) scale(1); box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.2), inset 0 0 0.625rem rgba(255, 255, 255, 0.1); } [class~="fade-out"] { opacity: 0; } [class~="hidden"] { display: none; } @keyframes glow { 0% { box-shadow: 0 0 0.3125rem #32CD32, 0 0 0.625rem #32CD32, 0 0 1.25rem #32CD32, 0 0 2.5rem #32CD32; } 100% { box-shadow: 0 0 1.25rem #228B22, 0 0 1.875rem #228B22, 0 0 3.125rem #228B22, 0 0 4.375rem #228B22; } } [class~="how-to-use-link"] { margin-top: 1.875rem; font-size: 1rem; color: #fff; cursor: pointer; text-align: center; text-decoration: underline; transition: color 0.3s ease; } [class~="how-to-use-link"]:hover { color: #ccc; } [class~="how-to-use-modal"] { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } [class~="how-to-use-"]modal[class~="show"] { opacity: 1; pointer-events: auto; } [class~="modal-content"] { background-color: #222; margin: 15% auto; padding: 1.25rem; border: 0.0625rem solid #888; width: 80%; max-width: 31.25rem; color: #fff; border-radius: 0.625rem; } [class~="close-button"] { color: #aaa; float: right; font-size: 1.75rem; font-weight: bold; cursor: pointer; } [class~="close-button"]:hover, [class~="close-button"]:focus { color: #fff; } [class~="how-to-use-screenshot"] { width: 100%; margin-top: 0.625rem; border-radius: 0.3125rem; } [class~="container"] { width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; max-width: 26.25rem; padding: 1.25rem; box-sizing: border-box; text-align: center; z-index: 1; } [class~="container"]::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(0.375rem); z-index: -1; background-repeat: no-repeat; } [class~="section"] { margin-bottom: 1.25rem; } [class~="head"] { font-weight: 700; } [class~="player-count"], [class~="dealer-count"] { margin-bottom: 0.3125rem; text-align: center; color: #e0e0e0; font-weight: 600; } [class~="dealer-section"], [class~="player-section"] { position: relative; } #playerCardsContainer, #dealerCards { display: flex; justify-content: center; align-items: center; gap: 0.9375rem; } #playerCardsContainer { flex-direction: column; } [class~="cards"] { position: relative; display: flex; justify-content: center; align-items: center; min-height: 6.25rem; margin-top: 0.3125rem; } [class~="card"] { position: absolute; width: 4.0625rem; height: auto; border-radius: 0.0625rem; box-shadow: 0 0.375rem 0.625rem rgba(0, 0, 0, 0.4); transition: left 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; z-index: 0; background-color: transparent; object-fit: cover; } [class~="card"]:hover { transform: scale(1.2) rotate(0deg); box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.7); z-index: 1000000; } [class~="advice"] { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.3125rem; } [class~="best-move"], [class~="bust-percentage"] { width: 12.5rem; padding: 0.4375rem; background-color: #333; border: 0.0625rem solid #666; border-radius: 0.625rem; min-height: 5rem; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; color: #ffffff; font-weight: 700; overflow: hidden; position: relative; } [class~="best-move-background"] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 0.5s ease-in-out; z-index: 0; } [class~="best-move-title"], [class~="best-move-text"], hr { position: relative; z-index: 2; } [class~="best-move-text"] { text-align: center; font-size: 1.125rem; position: relative; z-index: 2; } [class~="best-"]move[class~="hit"] [class~="best-move-background"] { opacity: 1; background: linear-gradient(135deg, #5AA955, #3E7A3B); } [class~="best-"]move[class~="stand"] [class~="best-move-background"] { opacity: 1; background: linear-gradient(135deg, #A74A4A, #7A2828); } [class~="best-"]move[class~="split"] [class~="best-move-background"] { opacity: 1; background: linear-gradient(135deg, #C5B05A, #8F752C); color: black; } [class~="best-"]move[class~="double-down"] [class~="best-move-background"] { opacity: 1; background: linear-gradient(135deg, #527FBF, #2E5685); } [class~="best-move"] [class~="best-move-background"] { opacity: 0; } [class~="bust-percentage-text"] { text-align: center; font-size: 1.125rem; font-weight: 700; color: #ffffff; } #instruction { display: flex; align-items: center; justify-content: center; margin-bottom: 0.9375rem; max-height: 2.5rem; min-height: 2.5rem; } [class~="card-input"] { margin-top: 0.9375rem; } #cardButtons { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; } [class~="card-row"] { display: flex; justify-content: space-between; gap: 0.25rem; } [class~="card-btn"], [class~="insurance-btn"] { font-family: "Montserrat", sans-serif; font-weight: 700; flex: 1; padding: 0.625rem; font-size: 1.25rem; text-align: center; background: linear-gradient(145deg, #444, #222); color: #fff; border: 0.125rem solid #555; border-radius: 0.625rem; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; margin: 0; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5), inset 0 0 0.625rem rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } [class~="card-btn"]::before, [class~="insurance-btn"]::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%); transition: transform 0.5s ease; transform: translate(-50%, -50%) scale(0); border-radius: 50%; } [class~="card-btn"]:hover::before, [class~="insurance-btn"]:hover::before { transform: translate(-50%, -50%) scale(1); } [class~="card-btn"]:hover, [class~="insurance-btn"]:hover { background: linear-gradient(145deg, #555, #333); transform: translateY(-0.1875rem); box-shadow: 0 0.5rem 0.9375rem rgba(0, 0, 0, 0.7), inset 0 0 0.9375rem rgba(255, 255, 255, 0.2); } [class~="card-btn"]:active, [class~="insurance-btn"]:active { background: linear-gradient(145deg, #222, #111); transform: translateY(0); box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3), inset 0 0 0.5rem rgba(255, 255, 255, 0.1); } #newGameBtn { position: fixed; top: 1.25rem; right: 1.25rem; padding: 0.625rem 1.25rem; font-size: 1rem; border: none; border-radius: 0.5rem; background: linear-gradient(145deg, #c0392b, #a32a1d); color: white; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.6), inset 0 0 0.625rem rgba(255, 255, 255, 0.2); } #newGameBtn:hover { background: linear-gradient(145deg, #a32a1d, #822015); transform: translateY(-0.1875rem); box-shadow: 0 0.5rem 0.9375rem rgba(0, 0, 0, 0.8), inset 0 0 0.9375rem rgba(255, 255, 255, 0.2); } #newGameBtn:active { background: linear-gradient(145deg, #822015, #5e170f); transform: translateY(0); box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.3), inset 0 0 0.5rem rgba(255, 255, 255, 0.1); } @media (max-width: 25rem) { [class~="container"] { padding: 0.75rem; } [class~="card-btn"] { font-size: 1rem; padding: 0.75rem; height: 2.8125rem; } [class~="card"] { width: 3.125rem; height: 4.6875rem; font-size: 1.125rem; } #newGameBtn { font-size: 1rem; padding: 0.75rem 1.25rem; } } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } [class~="instruction"]::after { content: '|'; font-weight: bold; animation: blink 1s step-end infinite; }