@tailwind base;@tailwind components;@tailwind utilities;*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;font-family:Roboto,sans-serif;display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:#fff}body{display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top,10px) env(safe-area-inset-right,10px) env(safe-area-inset-bottom,10px) env(safe-area-inset-left,10px)}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);aspect-ratio:1 / 1;gap:8px;width:100%;max-width:600px;padding:8px;margin:0 auto;background-color:#f0f0f0;border-radius:10px}.grid-cell-wrapper{display:flex;flex-direction:column;align-items:center;overflow:hidden;width:100%;height:100%;background-color:#fff;border:none;outline:none;position:relative}.grid-cell{display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%;aspect-ratio:1 / 1;transition:background-color .2s ease-in-out}.grid-cell-button{border:2px solid black}.grid-cell:hover{background-color:#f0f0f0}.grid-cell.grid-cell-gameover:hover{background-color:#fff;transition:none}.grid-cell.crossout{background-color:#ef5350;transition:none}.grid-cell.crossout:hover{background-color:#ef5350}.nested-grid-container{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fffffff2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:5px;box-sizing:border-box;z-index:10;transition:opacity .3s ease,transform .3s ease}.subgrid-won{position:relative}.subgrid-won.collapsed .nested-grid-container{opacity:0;transform:scale(.5);pointer-events:none}.subgrid-won .nested-grid-container{opacity:1;transform:scale(1)}.subgrid-result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;opacity:0;z-index:5;transition:opacity .3s ease}.subgrid-won.collapsed .subgrid-result{opacity:1;z-index:15}.subgrid-result.result-ring{background-color:#2196f333}.subgrid-result.result-rist{background-color:#4caf5033}.subgrid-result.result-draw{background-color:#9e9e9e33}.grid-cell-image{width:70%;height:70%;object-fit:contain}header{display:flex;justify-content:center;align-items:center;background-color:#ef5350;padding:12px 16px;margin:16px auto;width:95%;max-width:640px;border-radius:5px;color:#fff;font-size:1.5rem;text-align:center}header h1{display:flex;align-items:center;justify-content:center;margin:0;font-size:1.2rem}header h1 img{margin-right:12px;height:28px}.rematch{display:block;margin:16px auto;padding:12px 20px;font-size:1.2rem;background-color:#ef5350;color:#fff;border:none;border-radius:5px;cursor:pointer;outline:2px solid transparent;outline-offset:2px;transition:outline .2s ease-in-out}.rematch:focus,.rematch:active{outline:2px solid white}.flex-score{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:95%;max-width:640px;margin-bottom:20px}.flex-score .score{display:flex;align-items:center;background-color:#ef5350;font-size:1.1rem;padding:10px 16px;margin:5px;border-radius:6px;color:#fff}.flex-score .score h2{margin:0 8px 0 0}.flex-score .score img{height:24px}.flex-score h2{font-size:1.2rem;margin-right:10px}.view-moves-overlay{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;opacity:0}.subgrid-won.collapsed:hover .view-moves-overlay{opacity:.1;background-color:#0000001a}.subgrid-won.collapsed:hover .nested-grid-container{opacity:.6;z-index:1000}@media (max-width: 768px){.grid-container{width:100vw;height:100vw;max-width:100vw;max-height:100vw;padding:5px;gap:5px}}@media (min-width: 769px){.grid-container{width:600px;height:600px}}