.game-body{background:linear-gradient(135deg,var(--pink-bg),var(--pink-light));display:flex;justify-content:center;align-items:center;min-height:100vh}
.game-page-wrapper{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 71px);padding:20px;position:relative;overflow:hidden;width:100%;box-sizing:border-box}
.stars{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAYFBMVEUAAAD/zyL/0if/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL/zyL5qNuqAAAAH3RSTlMAoAW23hIQ43h2yP/j/O+p3vD+2/P6//f1+vvLdAftjwAAAbpJREFUSMe1l4miwyAMS2g6s3aMtm21//+5bIWQ2Q3Tw3BfX3ZsoPD0D1P2QvwEF4qP8KigfS2d2DkY+VwsAjfFw8sAFj/9TIAnF75W2o1TfPcNXFcT7Tj4sP/yCcsx2sU405R74fHH1Ld635oN4Pzz/Tkm2R+O+KPwFk5MZBTSJ2yHl4u7MAuKFbEUDIY2fA3GFc9sxIAnDWtCUNhRwW4EptpNb3NcoOE2EFYp624MPC4sUIgdToQYxVTBMPw2MAnHcaN/K4g8v0vMUCS4b3hHwGOG9GQt0jFm0LHMx+Lgb0DnhR4C7rCDBXQuXND4vE5GgsQL4gKa95XW00A4A0Bq3gAs0UqA/ZhbVIBdASs3gL8g1sYgFkF1gBtApmAS2PUDsPBoBoJMgV0Vch2w34iAEOB1F7xgGkAPD8HMAOD3A+AnABTwBdoHKEuGAYgv8l8uAAD8H8LzQfIAGYAOwAUIBzAoZwF4G2oTUAyAOfhAagArA+I4BNIBHIDAACgM7BLaD4D7+BvEEwG1tB7n9fA+5AEAgGwB4KNc9wMIOAE3B1y4ADiBwzT/Bz+TDuQ+tVx34ABwB4qLIA/AfxH5B/8yEa9nAAAAAElFTkSuQmCC) repeat top center;animation:move-twinkle-back 200s linear infinite}
@keyframes move-twinkle-back{from{background-position:0 0}to{background-position:-10000px 5000px}}
.game-container{position:relative;z-index:1;text-align:center;background-color:rgba(255,255,255,.8);backdrop-filter:blur(12px);padding:clamp(20px,5vw,30px);border-radius:30px;box-shadow:0 12px 35px rgba(0,0,0,.1);border:2px solid rgba(255,255,255,.95);width:100%;max-width:450px;transition:transform .3s ease;box-sizing:border-box}
.game-container:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.12)}
.game-container h1{font-family:var(--heading-font);color:var(--pink-deep);font-size:clamp(2.5rem,10vw,3rem);margin-bottom:10px;text-shadow:0 0 8px #fff,0 0 18px var(--pink-accent)}
.game-container .status-message{font-size:clamp(1.2rem,5vw,1.4rem);color:var(--pink-deep);height:35px;margin-bottom:20px;font-weight:700;text-shadow:0 0 8px rgba(255,255,255,.7)}
.game-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,4vw,15px);margin:20px auto;width:100%;max-width:95%}
@keyframes bounce-in{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.cell{width:100%;aspect-ratio:1/1;background-color:rgba(255,255,255,.6);border:3px solid var(--pink-accent);border-radius:20px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .4s ease;font-size:clamp(2.5rem,15vw,4.5rem);text-shadow:2px 2px 8px rgba(0,0,0,.15);box-shadow:inset 0 0 10px rgba(0,0,0,.05)}
.cell:not(.disabled):hover{transform:scale(1.05);border-color:var(--pink-deep);background-color:#fff;box-shadow:0 0 15px rgba(240,98,146,.3)}
.cell.win{animation:pulse .6s ease-in-out infinite;background-color:#fff0f5}
.cell:not(:empty), .cell.disabled { cursor: not-allowed; }
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.15);text-shadow:0 0 20px var(--pink-strong)}100%{transform:scale(1)}}
.strike-line{position:absolute;background:linear-gradient(90deg,var(--pink-accent),var(--pink-deep));height:6px;border-radius:6px;transform-origin:left;transition:transform .5s cubic-bezier(.45,.05,.55,.95);transform:scaleX(0);box-shadow:0 0 12px var(--pink-strong)}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;z-index:1000}
.modal-overlay.show{opacity:1;visibility:visible}
.modal-content{background:#fff;padding:clamp(20px, 5vw, 40px);border-radius:25px;text-align:center;transform:scale(.7);transition:transform .4s cubic-bezier(.34,1.56,.64,1); max-width: 95%; width: 500px; box-sizing: border-box; margin: 20px;}
.modal-overlay.show .modal-content{transform:scale(1)}
.modal-title{font-family: var(--heading-font); font-size: 2.2em; color: var(--pink-deep); margin-bottom: 25px;}
.option-group { margin-bottom: 25px;}
.option-group h3 { font-weight: 700; font-size: 1.1em; color: var(--primary-text); margin-bottom: 15px; }
.choice-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;}
.choice-btn { background-color: #fff; border: 2px solid var(--border-light); padding: 10px 15px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-weight: 700;}
.choice-btn.wide { min-width: 120px; }
.choice-btn.small { min-width: 80px; }
.choice-btn:hover { background-color: var(--pink-light); border-color: var(--pink-accent); }
.choice-btn.active { background-color: var(--pink-deep); color: #fff; border-color: var(--pink-deep); }
#start-game-btn { width: 100%; padding: 15px; font-size: 1.2em; margin-top: 10px;}
.modal-message{font-family:var(--heading-font);font-size:2.8em;color:var(--pink-deep);margin-bottom:25px}
.restart-button{background:linear-gradient(135deg,var(--pink-accent),var(--pink-deep));color:#fff;border:none;padding:16px 40px;font-size:1.3em;font-weight:700;border-radius:50px;cursor:pointer;transition:all .3s ease;letter-spacing:1px;box-shadow:0 5px 20px rgba(233,30,99,.4)}
.restart-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(233,30,99,.5)}
.tagline{color:var(--text-dark);font-size:1em;font-weight:500;margin-top:20px;padding:8px 15px; background:transparent; border:none; cursor:pointer}
.hidden { display: none !important; }