*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-monospace,monospace;display:flex;justify-content:center;align-items:center;min-height:100svh;padding:8px;overflow-x:hidden;overflow-y:auto;color:#222}.loading-state{display:flex;justify-content:center;align-items:center;min-height:50vh;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:700;color:#333;text-align:center}.game-container{display:flex;flex-direction:column;align-items:center;width:min(73vmin,960px);max-height:98vh;font-size:clamp(14px,1.2vw,16px)}.game-header{margin-bottom:.8rem;width:100%}.game-header h1{text-align:center;font-size:clamp(.9rem,1.5vw,1.4rem);font-weight:600;text-transform:uppercase;color:#444;margin-bottom:4px}.game-header h1:after{content:"";display:block;width:40px;height:3px;background:#ddd;margin:8px auto 0;border-radius:2px}.header-controls{display:flex;justify-content:center;align-items:center;gap:28px}.score{display:flex;justify-content:center;gap:12px}.stat-group{display:flex;align-items:center;gap:10px}.score-label{font-weight:600}.wins{color:#2e7d32;font-weight:900;font-size:clamp(.875rem,1.8vw,1.25rem)}.losses{color:#d32f2f;font-weight:900;font-size:clamp(.875rem,1.8vw,1.25rem)}.reset-btn{background-color:#eee;border:1px solid #ccc;padding:8px 18px;border-radius:8px;font-size:clamp(.85rem,1.1vw,1rem);font-weight:500;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .1s ease;white-space:nowrap;color:#333}.reset-btn:active{transform:scale(.95);box-shadow:inset 0 1px 3px #0003}.reset-btn:focus-visible{outline:4px solid #0071e3;outline-offset:4px;z-index:10}.score-wrapper{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:middle}.rolling-digit{display:inline-block;font-weight:700;font-variant-numeric:tabular-nums;animation:elegantSlideUp .6s ease-out forwards}@keyframes elegantSlideUp{0%{transform:translateY(50%);opacity:0}to{transform:translateY(0);opacity:1}}.grid-layout{display:grid;width:100%;aspect-ratio:1 / 1;margin:0 auto;border-radius:6px;grid-template-columns:1.1fr 1fr 1fr 1.1fr;grid-template-rows:1fr 2fr 1fr;gap:5px;padding:5px}.grid-item{border:0px solid #666;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(8px,1.4vw,14px);font-size:clamp(.9rem,1.5vw,1.15rem);font-weight:700;background-color:transparent;cursor:pointer;transition:background .2s ease,transform .1s ease}.color-box-1{grid-column:1 / 3;grid-row:1;z-index:5}.color-box-2{grid-column:3 / 5;grid-row:1;z-index:5}.color-box-3{grid-column:1 / 2;grid-row:2;z-index:5}.color-box-4{grid-column:4 / 5;grid-row:2;z-index:5}.color-box-5{grid-column:1 / 3;grid-row:3;z-index:5}.color-box-6{grid-column:3 / 5;grid-row:3;z-index:5}.color-box{box-shadow:0 2px 4px #0000001f,0 8px 20px #00000014;transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;-webkit-tap-highlight-color:transparent}.color-box:active{transform:translateY(4px) scale(.97);box-shadow:0 1px 2px #00000040 inset}.color-box:focus-visible{outline:4px solid #0071e3;outline-offset:4px;z-index:10}.center-target{grid-column:2 / 4;grid-row:2;z-index:-5;cursor:default;padding:clamp(12px,1.6vw,18px);display:flex;flex-direction:column;justify-content:center}.center-target p{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 5px rgba(0,0,0,.2);font-weight:560;letter-spacing:.02em}.game-footer{margin-top:10px;padding-top:4px;font-size:clamp(.7rem,.9vw,.8rem);color:#666;text-align:center}.game-footer p{line-height:1.2rem}@media(max-width:480px){.game-container{width:min(80vmin,360px);padding:12px 8px env(safe-area-inset-bottom,16px)}}@media(max-width:480px)and (orientation:portrait){.game-container{width:min(85vmin,380px);padding:14px 10px env(safe-area-inset-bottom,16px)}}@media(min-width:481px)and (max-width:768px){.game-container{width:min(80vmin,580px);padding:14px 12px env(safe-area-inset-bottom,16px)}}@media(min-width:481px)and (max-width:768px)and (orientation:portrait){.game-container{width:min(85vmin,600px);padding:16px 14px env(safe-area-inset-bottom,16px)}}@media(min-width:769px)and (max-width:1024px)and (orientation:landscape){.game-container{width:min(76.44vmin,666px);padding:16px 14px}}@media(min-width:769px)and (max-width:1024px)and (orientation:portrait){.game-container{width:min(90vw,750px);padding:20px 16px}}@media(min-width:1025px)and (max-width:1440px)and (orientation:landscape){.game-container{width:min(78.4vmin,823px);padding:20px}}@media(min-width:1441px)and (orientation:landscape){.game-container{width:min(80.36vmin,960px);padding:24px}}
