:root{color-scheme:dark;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:#fff;background:#102b58}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 10%,#234e85,transparent 55%),#102b58}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit}button:focus-visible{outline:3px solid #ffbd72;outline-offset:3px}.app{height:100svh;height:100dvh;min-height:440px;max-width:510px;margin:auto;padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:stretch;gap:14px;justify-content:center}header{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#b9d1f4}h1{font-size:clamp(32px,7vh,52px);letter-spacing:-2px;line-height:1.05;margin:8px 0}h1 em{font-style:normal;color:#ff9d55}.intro{color:#d0def1;font-size:12px;margin:0}.players{display:flex;align-items:center;justify-content:space-between;gap:8px}.player{display:flex;align-items:center;gap:7px}.player img{width:46px;height:48px;object-fit:contain}.player strong{display:block;font-size:13px}.player span{display:block;font-size:10px;color:#bfd0e9;margin-top:3px}.computer{text-align:right}.versus{font-size:11px;font-weight:900;color:#ffad70;letter-spacing:1px}.status{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:35px;border-top:1px solid #ffffff22;padding-top:10px}#status{font-weight:800;font-size:16px}#hint{font-size:11px;color:#d0def1;text-align:right}.board{position:relative;aspect-ratio:1;flex:none;width:min(100%,calc(100dvh - 340px));align-self:center;background:url('assets/board.png') center/100% 100% no-repeat;filter:drop-shadow(0 12px 18px #04142b55)}.cells{position:absolute;inset:5%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.cell{border:0;background:transparent;min-width:0;min-height:0;padding:7%;display:flex;align-items:center;justify-content:center;border-radius:15px;cursor:pointer}.cell:enabled:hover{background:#ffffff15}.cell:disabled{cursor:default}.cell img{width:100%;height:100%;object-fit:contain;animation:pop .18s ease-out;filter:drop-shadow(0 3px 3px #0005)}.cell.win{background:#ffbd7240;box-shadow:inset 0 0 0 3px #ffd29d}.restart{flex:none;border:0;border-radius:16px;min-height:50px;background:#ff8b3e;color:#172c4e;font-weight:850;font-size:17px;box-shadow:0 5px 0 #b34a19;cursor:pointer}.restart:active{transform:translateY(2px);box-shadow:0 3px 0 #b34a19}footer{text-align:center;color:#b9cce8;font-size:10px;line-height:1.4;padding-top:3px}@keyframes pop{from{transform:scale(.65);opacity:.3}to{transform:scale(1);opacity:1}}@media(max-height:620px){.app{gap:9px}h1{font-size:32px;margin:5px 0}.intro{display:none}.player img{width:37px;height:39px}.board{width:min(100%,calc(100dvh - 280px))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}