:root{--bg:#040508;--grid-line:#ffe600;--panel:#0d1119;--text:#f3f5f7;--accent:#8ce0b8;--danger:#ff4d79;--shadow:#000}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background-color:var(--bg);background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px),radial-gradient(circle at 20% 20%,#0f1724 0%,#040508 65%);background-size:24px 24px,24px 24px,100% 100%;margin:0;font-family:"Press Start 2P",monospace}#root{min-height:100vh}.app{place-items:center;min-height:100vh;padding:24px 16px;display:grid}.game-card{background:linear-gradient(145deg,#0b0f17,#080b12);border:4px solid #ffffff20;border-radius:14px;justify-items:center;gap:20px;width:min(100%,700px);padding:20px;display:grid;box-shadow:0 22px 50px #0009,0 0 0 4px #000}.title{text-align:center;color:var(--grid-line);text-shadow:3px 3px #000;margin:0;font-size:clamp(1rem,2.8vw,1.4rem)}.turn-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;display:grid}.player-card{background:var(--grid-line);border:3px solid #ffffff1f;border-radius:16px;justify-items:center;gap:8px;padding:12px 10px 10px;transition:transform .14s,box-shadow .14s,border-color .14s;display:grid}.player-card--active{background:linear-gradient(#18d982, var(--danger)) padding-box, linear-gradient(270deg, var(--grid-line), var(--danger)) border-box;border-color:#0000;transform:translateY(-5px);box-shadow:0 0 0 2px #fff2,0 10px 22px #00000059}.player-card__avatar{color:#fff;border:3px solid #fff;border-radius:999px;place-items:center;width:52px;height:52px;font-size:1rem;display:grid;overflow:hidden}.player-card__avatar-image{object-fit:contain;width:78%;height:78%;image-rendering:pixelated}.player-card__avatar--o{background:#18d982}.player-card__avatar--x{background:var(--danger)}.player-card__name{color:#f8f8f8;text-shadow:2px 0 #101010,-2px 0 #101010,0 2px #101010,0 -2px #101010,1px 1px #101010,-1px 1px #101010,1px -1px #101010,-1px -1px #101010;text-align:center;margin:0;font-size:clamp(.9rem,3.2vw,1.4rem);line-height:1.15}.player-card__mark{margin:0;font-size:1.1rem;line-height:1}.player-card__mark--o{color:#1de273}.player-card__mark--x{color:var(--danger)}.board{aspect-ratio:1;background:var(--grid-line);border:4px solid #fef08a;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,520px);padding:14px;display:grid;box-shadow:inset 0 0 0 3px #0005}.cell{cursor:pointer;background:#111826;border:2px solid #00000040;place-items:center;width:100%;height:100%;padding:6px;transition:transform .12s,filter .12s;display:grid;overflow:hidden}.cell:hover:enabled{filter:brightness(1.1);transform:translateY(-2px)}.cell:disabled{cursor:default}.cell--highlight{box-shadow:0 0 0 3px #fff,0 0 20px #fff}.cell__icon{object-fit:contain;width:80%;height:80%;image-rendering:pixelated;-webkit-user-select:none;user-select:none;pointer-events:none}.reset-button{font:inherit;background:var(--danger);color:#130808;cursor:pointer;border:3px solid #ffffff45;padding:12px 16px;transition:transform .12s,filter .12s}.reset-button:hover{filter:brightness(1.05);transform:translateY(-2px)}.result-modal{z-index:50;background:#000000a6;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.result-modal__card{text-align:center;color:#111;background-color:#f6df4c;background-image:linear-gradient(#0000003b 1px,#0000 1px),linear-gradient(90deg,#0000003b 1px,#0000 1px);background-size:16px 16px;border:5px solid #1a1a1a;width:min(100%,560px);padding:24px 18px;box-shadow:0 18px 40px #00000073}.result-modal__label{color:#202020;letter-spacing:1px;margin:0 0 8px;font-size:.8rem}.result-modal__title{color:#f8f8f8;text-shadow:3px 0 #101010,-3px 0 #101010,0 3px #101010,0 -3px #101010,2px 2px #101010,-2px 2px #101010,2px -2px #101010,-2px -2px #101010;margin:0;font-size:clamp(1.2rem,5vw,2rem);line-height:1.2}.result-modal__message{color:#1f1f1f;margin:12px 0 20px;font-size:.74rem}.result-modal__button{font:inherit;color:#fff;cursor:pointer;background:#111827;border:3px solid #fff;padding:12px 16px;font-size:.75rem}.result-modal__button:hover{filter:brightness(1.15)}@media (width<=640px){.game-card{gap:14px;padding:14px}.board{gap:10px;padding:10px}.reset-button{font-size:.6rem}.turn-panel{gap:10px}.player-card{padding:10px 8px}.player-card__avatar{width:42px;height:42px;font-size:.85rem}.player-card__name{font-size:.8rem}.result-modal__card{background-size:12px 12px;padding:18px 12px}.result-modal__label{font-size:.62rem}.result-modal__message,.result-modal__button{font-size:.6rem}}