:root{font-family:Segoe UI,Noto Sans KR,system-ui,-apple-system,sans-serif;line-height:1.6;font-weight:400;--bg-cream: #FAF7F2;--bg-beige: #F5EBE0;--bg-darker-beige: #E3D5CA;--accent-latte: #C89F77;--accent-espresso: #A67C52;--text-coffee: #5D4E37;--text-light: #8B7355;--shadow-soft: rgba(93, 78, 55, .1);--shadow-medium: rgba(93, 78, 55, .15);--shadow-strong: rgba(93, 78, 55, .25);color:var(--text-coffee);background-color:var(--bg-cream);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;padding:0}body{margin:0;background:linear-gradient(135deg,#faf7f2,#f5ebe0)}#root{width:100%;min-height:100%}h1{font-size:3.2em;line-height:1.1;color:var(--text-coffee)}button{border-radius:16px;border:none;padding:.8em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background:var(--accent-latte);color:#fff;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px var(--shadow-soft)}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow-medium);background:var(--accent-espresso)}button:active{transform:translateY(0);box-shadow:0 2px 8px var(--shadow-soft)}a{font-weight:500;color:var(--accent-latte);text-decoration:none;transition:color .15s ease}a:hover{color:var(--accent-espresso)}.game-select{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca);padding:2vh 2vw;position:relative;overflow:hidden;animation:backgroundBreathe 3s ease-in-out infinite}@keyframes backgroundBreathe{0%,to{background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca)}50%{background:linear-gradient(135deg,#f5ebe0,#e3d5ca,#d5bdaf)}}.game-select:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(200,159,119,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(166,124,82,.08) 0%,transparent 50%);pointer-events:none;animation:patternFloat 4s ease-in-out infinite}@keyframes patternFloat{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.select-container{max-width:900px;width:100%;position:relative;z-index:1;animation:fadeInUp .4s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.main-title{font-size:clamp(32px,5vw,56px);font-weight:800;background:linear-gradient(135deg,#5d4e37,#8b7355,#5d4e37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 100%;text-align:center;margin-bottom:1vh;text-shadow:2px 4px 8px rgba(93,78,55,.1);letter-spacing:-1px;animation:titleSlide .4s cubic-bezier(.4,0,.2,1) .1s backwards,titleShine 1.5s ease-in-out infinite .5s}@keyframes titleShine{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes titleSlide{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.subtitle{font-size:clamp(16px,2vw,22px);color:#8b7355;text-align:center;margin-bottom:3vh;font-weight:500;animation:titleSlide .4s cubic-bezier(.4,0,.2,1) .15s backwards,subtitlePulse 1.5s ease-in-out infinite .7s}@keyframes subtitlePulse{0%,to{opacity:.9;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2vw;padding:0;max-height:60vh}@media(max-width:768px){.game-grid{grid-template-columns:1fr;gap:25px}.main-title{font-size:40px}.subtitle{font-size:18px}}.game-card{background:linear-gradient(135deg,#fff,#f5ebe0);border:3px solid #C89F77;border-radius:24px;padding:3vh 2vw;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 24px #5d4e3714,0 2px 8px #5d4e370a;display:flex;flex-direction:column;justify-content:center;align-items:center}@keyframes borderPulse{0%,to{border-color:#c89f77}50%{border-color:#b38b6d}}.game-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(200,159,119,.1) 0%,transparent 70%);opacity:0;transition:opacity .25s ease;animation:cardGlow 2s ease-in-out infinite;pointer-events:none;border-radius:24px}@keyframes cardGlow{0%,to{opacity:0}50%{opacity:.3}}.game-card:nth-child(1){animation:cardFadeIn .3s cubic-bezier(.4,0,.2,1) .2s backwards,borderPulse 2s ease-in-out infinite 0s}.game-card:nth-child(1):after{animation-delay:0s}.game-card:nth-child(1) .game-icon{animation-delay:0s}.game-card:nth-child(1) .game-name{animation-delay:.2s}.game-card:nth-child(2){animation:cardFadeIn .3s cubic-bezier(.4,0,.2,1) .25s backwards,borderPulse 2s ease-in-out infinite .5s}.game-card:nth-child(2):after{animation-delay:1s}.game-card:nth-child(2) .game-icon{animation-delay:.25s}.game-card:nth-child(2) .game-name{animation-delay:.35s}.game-card:nth-child(3){animation:cardFadeIn .3s cubic-bezier(.4,0,.2,1) .3s backwards,borderPulse 2s ease-in-out infinite 1s}.game-card:nth-child(3):after{animation-delay:2s}.game-card:nth-child(3) .game-icon{animation-delay:.5s}.game-card:nth-child(3) .game-name{animation-delay:.6s}.game-card:nth-child(4){animation:cardFadeIn .3s cubic-bezier(.4,0,.2,1) .35s backwards,borderPulse 2s ease-in-out infinite 1.5s}.game-card:nth-child(4):after{animation-delay:3s}.game-card:nth-child(4) .game-icon{animation-delay:.75s}.game-card:nth-child(4) .game-name{animation-delay:.85s}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#c89f771a,#a67c5226);opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1);border-radius:24px}.game-card:hover:before{opacity:1}.game-card:hover{transform:translateY(-12px) scale(1.02);background:linear-gradient(135deg,#f5ebe0,#e3d5ca);box-shadow:0 20px 48px #5d4e3726,0 8px 24px #5d4e371a,inset 0 0 0 3px #a67c524d;border-color:#a67c52!important;animation-play-state:paused}.game-card:active{transform:translateY(-8px) scale(.98);transition-duration:.1s}.game-icon{font-size:clamp(50px,6vw,90px);margin-bottom:1.5vh;position:relative;z-index:1;transition:transform .25s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 4px 12px rgba(93,78,55,.1));animation:iconFloat 1.5s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-2deg)}75%{transform:translateY(-4px) rotate(2deg)}}.game-card:hover .game-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 8px 20px rgba(93,78,55,.15));animation:none}.game-name{font-size:clamp(20px,2.5vw,32px);font-weight:700;color:#5d4e37;position:relative;z-index:1;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;animation:namePulse 2s ease-in-out infinite}@keyframes namePulse{0%,to{color:#5d4e37}50%{color:#8b7355}}.game-card:hover .game-name{color:#a67c52;transform:scale(1.05);animation:none}@keyframes gentlePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.game-complete{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca);padding:2vh 2vw;position:relative;overflow:hidden;animation:fadeIn .3s ease-out}.game-complete:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 30% 40%,rgba(200,159,119,.06) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(166,124,82,.06) 0%,transparent 50%);pointer-events:none}.complete-container{background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:32px;padding:2vh 3vw;max-width:650px;width:90%;max-height:95vh;text-align:center;box-shadow:0 20px 60px #5d4e3726,0 8px 24px #5d4e3714;position:relative;z-index:1;animation:scaleIn .35s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.complete-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,159,119,.04) 0%,transparent 70%);pointer-events:none}@keyframes scaleIn{0%{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.complete-title{font-size:clamp(28px,4.5vw,46px);font-weight:900;background:linear-gradient(135deg,#5d4e37,#8b7355);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5vh;position:relative;z-index:1;animation:bounceIn .4s cubic-bezier(.4,0,.2,1) .1s backwards;letter-spacing:-.5px}@keyframes bounceIn{0%{opacity:0;transform:scale(.8) translateY(-20px)}60%{transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}.score-display{margin-bottom:1.5vh;position:relative;z-index:1;animation:slideUp .4s cubic-bezier(.4,0,.2,1) .15s backwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-type{font-size:clamp(14px,1.8vw,20px);color:#8b7355;margin-bottom:.5vh;font-weight:600;letter-spacing:.5px}.score{font-size:clamp(36px,6vw,60px);font-weight:900;background:linear-gradient(135deg,#c89f77,#a67c52);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;text-shadow:0 4px 12px rgba(166,124,82,.2);animation:scorePopUp .3s cubic-bezier(.4,0,.2,1) .25s backwards}@keyframes scorePopUp{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.qr-section{position:relative;z-index:1;animation:slideUp .4s cubic-bezier(.4,0,.2,1) .2s backwards}.qr-section h2{font-size:clamp(16px,2.2vw,22px);color:#5d4e37;margin-bottom:1vh;font-weight:700;letter-spacing:-.3px}.qr-code{background:#fff;padding:1.5vh;border-radius:20px;display:inline-block;margin-bottom:1vh;box-shadow:0 8px 24px #5d4e371a,0 2px 8px #5d4e370d;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid #F5EBE0}.qr-code svg{width:clamp(180px,25vw,250px)!important;height:clamp(180px,25vw,250px)!important}.qr-code:hover{transform:scale(1.02);box-shadow:0 12px 32px #5d4e371f,0 4px 12px #5d4e3714;border-color:#e3d5ca}.expire-notice{color:#b8734f;font-size:clamp(13px,1.6vw,16px);margin-top:1vh;font-weight:600;animation:gentlePulse 1.2s ease-in-out infinite;text-shadow:0 2px 4px rgba(184,115,79,.1)}@keyframes gentlePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.02)}}.next-btn{margin-top:1.5vh;padding:1.2vh 4vw;font-size:clamp(15px,2vw,20px);font-weight:700;background:linear-gradient(135deg,#c89f77,#a67c52);color:#fff;border:none;border-radius:16px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #a67c5240,0 2px 8px #a67c5226;position:relative;z-index:1;letter-spacing:.5px}.next-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px #a67c5259,0 4px 16px #a67c5233;background:linear-gradient(135deg,#d5bdaf,#c89f77)}.next-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}@media(max-width:768px){.complete-container{padding:2vh 4vw}.complete-title{font-size:clamp(24px,5vw,36px);margin-bottom:1vh}.score{font-size:clamp(32px,7vw,48px)}.qr-section h2{font-size:clamp(14px,3vw,18px);margin-bottom:.8vh}.qr-code{padding:1vh;margin-bottom:.8vh}.qr-code svg{width:clamp(150px,30vw,200px)!important;height:clamp(150px,30vw,200px)!important}.expire-notice{font-size:clamp(12px,2vw,14px);margin-top:.8vh}.next-btn{padding:1vh 5vw;font-size:clamp(14px,2.5vw,18px);margin-top:1vh}}.reaction-game{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0);animation:fadeIn .3s ease-out;overflow:hidden;padding:2vh 2vw}.game-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.waiting-screen{background:linear-gradient(135deg,#d5bdaf,#c4b5a0);color:#fff}.waiting-screen h2{font-size:clamp(36px,6vw,54px);font-weight:800;margin-bottom:2vh;text-shadow:2px 4px 12px rgba(0,0,0,.1)}.waiting-screen p{font-size:clamp(18px,3vw,26px);opacity:.95;font-weight:500;text-shadow:1px 2px 8px rgba(0,0,0,.08)}.active-screen{background:linear-gradient(135deg,#c89f77,#b38b6d);color:#fff}.active-screen h2{font-size:clamp(48px,8vw,80px);font-weight:900;text-shadow:4px 6px 20px rgba(0,0,0,.15);letter-spacing:2px}.exit-game-btn-absolute{position:absolute;top:2vh;right:2vw;padding:1vh 2vw;font-size:clamp(14px,1.6vw,18px);background:linear-gradient(135deg,#e3d5ca,#d5bdaf);color:#5d4e37;border:none;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 4px 12px #5d4e3714;z-index:10}.exit-game-btn-absolute:hover{background:linear-gradient(135deg,#d5bdaf,#c89f77);transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f}.exit-game-btn-absolute:active{transform:translateY(0)}.too-early{position:relative}.too-early:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(200,120,80,.08) 0%,transparent 70%);pointer-events:none}.too-early h1{color:#b8734f;animation:shake .25s cubic-bezier(.4,0,.2,1)}.too-early p{color:#c89f77;font-weight:600}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media(max-width:768px){.game-container{padding:50px 40px}.game-container h1{font-size:34px}.game-container p{font-size:18px}.start-btn{padding:18px 50px;font-size:22px}.waiting-screen h2{font-size:42px}.waiting-screen p{font-size:20px}.active-screen h2{font-size:60px}}.colorfind-game{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0);animation:fadeIn .3s ease-out;padding:2vh 2vw;box-sizing:border-box;overflow:hidden}.game-container h1{font-size:clamp(28px,4vw,42px);margin-bottom:2vh;color:#5d4e37;position:relative;z-index:1;font-weight:800;letter-spacing:-.5px}.game-container p{font-size:clamp(16px,2vw,20px);color:#8b7355;margin-bottom:3vh;line-height:1.7;position:relative;z-index:1;font-weight:500}.game-rules h3{font-size:clamp(18px,2.5vw,24px);color:#5d4e37;margin-bottom:1.5vh;font-weight:700}.game-rules ul{list-style:none;padding:0;margin:0}.game-rules li{font-size:clamp(14px,1.8vw,18px);color:#8b7355;margin-bottom:1vh;padding-left:1.5em;position:relative;font-weight:500}.game-rules li:before{content:"✓";position:absolute;left:0;color:#c89f77;font-weight:700}.game-play-container{width:100%;max-width:900px;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1vh,1.5vh,2vh);animation:fadeIn .3s ease-out;box-sizing:border-box;padding:2vh 2vw;overflow:hidden}.game-info{width:100%;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:16px;padding:clamp(1vh,1.5vh,2vh) clamp(2vw,3vw,4vw);box-shadow:0 8px 24px #5d4e371a,0 2px 8px #5d4e370d;box-sizing:border-box;flex-shrink:0}.exit-game-btn{padding:clamp(.8vh,1vh,1.2vh) clamp(1.5vw,2vw,2.5vw);font-size:clamp(13px,1.5vw,16px);background:linear-gradient(135deg,#e3d5ca,#d5bdaf);color:#5d4e37;border:none;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 4px 12px #5d4e3714;white-space:nowrap}.exit-game-btn:hover{background:linear-gradient(135deg,#d5bdaf,#c89f77);transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f}.exit-game-btn:active{transform:translateY(0)}.info-item{display:flex;flex-direction:column;align-items:center;gap:.5vh}.info-label{font-size:clamp(13px,1.6vw,16px);color:#8b7355;font-weight:600}.info-value{font-size:clamp(22px,3.2vw,32px);color:#5d4e37;font-weight:900}.timer-container{width:100%;height:clamp(30px,4vh,40px);background:#c89f7733;border-radius:16px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #5d4e371a;box-sizing:border-box;flex-shrink:0}.timer-bar{height:100%;background:linear-gradient(90deg,#c89f77,#a67c52);transition:width 1s linear;border-radius:16px;box-shadow:0 0 10px #c89f7780}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(15px,1.8vw,18px);font-weight:700;color:#5d4e37;text-shadow:0 1px 2px rgba(255,255,255,.5)}.tiles-grid-wrapper{width:clamp(300px,70vmin,600px);height:clamp(300px,70vmin,600px);margin:0 auto;flex-shrink:0}.tiles-canvas{width:100%;height:100%;background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:20px;box-shadow:0 12px 40px #5d4e371f,0 4px 16px #5d4e3714;cursor:pointer;display:block}.bottom-info{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 2vw;box-sizing:border-box;min-height:clamp(35px,5vh,45px);flex-shrink:0}.combo-display{font-size:clamp(18px,2.8vw,24px);font-weight:900;color:#c89f77;animation:comboBounce .25s ease-out;text-shadow:2px 2px 4px rgba(200,159,119,.3)}@keyframes comboBounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.high-score{font-size:clamp(13px,1.6vw,16px);color:#8b7355;font-weight:600}@media(max-width:900px){.tiles-grid-wrapper{width:clamp(280px,75vmin,450px);height:clamp(280px,75vmin,450px)}.game-info{padding:1vh 2vw}.info-label{font-size:clamp(12px,1.4vw,14px)}.info-value{font-size:clamp(20px,3vw,28px)}}@media(max-width:768px){.colorfind-game{padding:1vh 2vw}.game-container{padding:40px 30px;max-height:95vh}.game-play-container{gap:1vh;padding:1.5vh 2vw}.game-info{padding:1vh 2vw}.tiles-grid-wrapper{width:clamp(260px,70vmin,400px);height:clamp(260px,70vmin,400px)}.game-rules{padding:1.5vh 3vw}.start-btn{padding:18px 50px;font-size:22px}.timer-container{height:clamp(28px,3.5vh,35px)}}@media(max-height:800px){.game-play-container{gap:1vh;padding:1.5vh 2vw}.tiles-grid-wrapper{width:clamp(280px,65vmin,500px);height:clamp(280px,65vmin,500px)}.game-info{padding:1vh 2vw}.timer-container{height:clamp(28px,3.5vh,35px)}.bottom-info{min-height:clamp(30px,4vh,40px)}}@media(max-height:700px){.colorfind-game{padding:1vh 1vw}.game-play-container{gap:.8vh;padding:1vh 1.5vw}.game-info{padding:.8vh 2vw}.tiles-grid-wrapper{width:clamp(250px,60vmin,450px);height:clamp(250px,60vmin,450px)}.timer-container{height:clamp(26px,3vh,32px)}.bottom-info{min-height:clamp(28px,3.5vh,35px)}.combo-display{font-size:clamp(16px,2.5vw,20px)}}@media(max-width:480px){.tiles-grid-wrapper{width:clamp(240px,80vmin,350px);height:clamp(240px,80vmin,350px)}.game-info{flex-wrap:wrap;gap:1vh}.info-item{min-width:70px}}.wordle-game{width:100%;min-height:100vh;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0);animation:fadeIn .3s ease-out;overflow:hidden;padding:1vh 2vw;box-sizing:border-box}.game-container{background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:28px;padding:5vh 5vw;text-align:center;box-shadow:0 12px 40px #5d4e371f,0 4px 16px #5d4e3714;max-width:600px;width:90%;max-height:90vh;animation:slideUp .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.game-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,159,119,.05) 0%,transparent 70%);pointer-events:none}.game-container h1{font-size:clamp(32px,4.5vw,48px);margin-bottom:2vh;color:#5d4e37;position:relative;z-index:1;font-weight:900;letter-spacing:4px}.game-container p{font-size:clamp(16px,2vw,20px);color:#8b7355;margin-bottom:2vh;line-height:1.7;position:relative;z-index:1;font-weight:500}.game-rules{background:#c89f771a;border-radius:16px;padding:2vh 2vw;margin-bottom:3vh;text-align:left;position:relative;z-index:1}.game-rules h2{font-size:clamp(20px,2.5vw,26px);color:#5d4e37;margin-bottom:1.5vh;font-weight:700}.example{display:flex;align-items:center;margin-bottom:1vh;font-size:clamp(14px,1.8vw,18px);color:#8b7355;font-weight:500}.mini-tile{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-weight:700;border-radius:8px;margin-right:12px;font-size:1.2rem;color:#fff}.mini-tile.correct{background-color:#6aaa64}.mini-tile.present{background-color:#c9b458}.mini-tile.absent{background-color:#d32f2f}.note{margin-top:1.5vh;margin-bottom:0;color:#8b7355;font-style:italic;font-size:clamp(14px,1.6vw,16px)}.error-message{color:#c89f77;font-weight:600;margin-bottom:2vh}.start-btn{padding:22px 70px;font-size:26px;background:linear-gradient(135deg,#c89f77,#a67c52);color:#fff;border:none;border-radius:18px;cursor:pointer;margin-bottom:20px;transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:700;box-shadow:0 8px 24px #a67c5240,0 2px 8px #a67c5226;position:relative;z-index:1;letter-spacing:.5px}.start-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px #a67c5259,0 4px 16px #a67c5233;background:linear-gradient(135deg,#d5bdaf,#c89f77)}.start-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}.back-btn{padding:18px 50px;font-size:20px;background:#e3d5ca;color:#5d4e37;border:2px solid transparent;border-radius:14px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 4px 12px #5d4e3714;position:relative;z-index:1}.back-btn:hover{background:#d5bdaf;transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f;border-color:#5d4e371a}.back-btn:active{transform:translateY(0);transition-duration:.1s}.wordle-game.playing{padding:0;overflow:hidden}.game-layout{width:100vw;height:100vh;display:grid;grid-template-columns:minmax(250px,1fr) minmax(200px,1.2fr) minmax(400px,1.5fr);gap:0;background:linear-gradient(135deg,#faf7f2,#f5ebe0);overflow:hidden}.game-guide{background:linear-gradient(135deg,#fff,#f5ebe0);padding:3vh 2vw;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:1.5vh;box-shadow:2px 0 10px #5d4e370d;height:100vh;box-sizing:border-box}.game-guide h2{font-size:clamp(20px,2.2vw,28px);color:#5d4e37;margin:0;font-weight:800;letter-spacing:-.5px}.guide-desc{font-size:clamp(13px,1.5vw,16px);color:#8b7355;line-height:1.5;margin:0}.color-examples{display:flex;flex-direction:column;gap:1.5vh;padding:1.5vh 0}.color-example{display:flex;align-items:center;gap:1.2vw}.example-tile{width:clamp(42px,4.5vw,55px);height:clamp(42px,4.5vw,55px);display:flex;justify-content:center;align-items:center;font-size:clamp(18px,2.2vw,24px);font-weight:900;color:#fff;border-radius:6px;flex-shrink:0}.example-tile.correct{background-color:#6aaa64}.example-tile.present{background-color:#c9b458}.example-tile.absent{background-color:#d32f2f}.example-text{display:flex;flex-direction:column;gap:.2vh}.example-text strong{font-size:clamp(14px,1.6vw,18px);color:#5d4e37;font-weight:700}.example-text span{font-size:clamp(12px,1.3vw,14px);color:#8b7355;line-height:1.3}.game-tips{background:#c89f771a;padding:1.5vh 1.2vw;border-radius:14px;margin-top:.5vh}.game-tips h3{font-size:clamp(15px,1.6vw,18px);color:#5d4e37;margin:0 0 .8vh;font-weight:700}.game-tips ul{margin:0;padding-left:1.3em;list-style:none}.game-tips li{font-size:clamp(12px,1.3vw,14px);color:#8b7355;line-height:1.6;position:relative;margin-bottom:.6vh}.game-tips li:before{content:"•";position:absolute;left:-1.2em;color:#c89f77;font-weight:700}.game-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;padding:2vh 1.5vw;height:100vh;box-sizing:border-box;overflow:hidden}.wordle-header{display:flex;align-items:center;justify-content:center;gap:1.5vw;flex-shrink:0}.game-center .timer-display{font-size:clamp(16px,1.8vw,20px);color:#5d4e37;background:linear-gradient(135deg,#fff,#f5ebe0);padding:.8vh 2vw;border-radius:12px;font-weight:700;box-shadow:0 4px 12px #5d4e371a,0 2px 6px #5d4e370d;letter-spacing:.5px;white-space:nowrap}.game-center .exit-game-btn{padding:.8vh 1.5vw;font-size:clamp(13px,1.4vw,16px);background:linear-gradient(135deg,#e3d5ca,#d5bdaf);color:#5d4e37;border:none;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 4px 12px #5d4e3714;white-space:nowrap}.game-center .exit-game-btn:hover{background:linear-gradient(135deg,#d5bdaf,#c89f77);transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f}.game-center .exit-game-btn:active{transform:translateY(0)}.game-center h1{font-size:clamp(28px,3.5vw,42px);margin:0;color:#5d4e37;font-weight:900;letter-spacing:4px;flex-shrink:0}.board{display:flex;flex-direction:column;gap:6px;padding:1.5vh 1vw;background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:16px;box-shadow:0 8px 24px #5d4e371a,0 2px 8px #5d4e370d;flex-shrink:0}.row{display:flex;gap:6px;justify-content:center}.tile{width:clamp(45px,5.5vw,58px);height:clamp(45px,5.5vw,58px);border:2px solid #d3d6da;display:flex;justify-content:center;align-items:center;font-size:clamp(22px,3.5vw,28px);font-weight:700;text-transform:uppercase;background:#fff;border-radius:4px;transition:all .15s cubic-bezier(.4,0,.2,1);color:#000}.tile.current{border-color:#878a8c;border-width:3px}.tile.correct{background-color:#6aaa64;border-color:#6aaa64;color:#fff;animation:flipIn .3s ease-out}.tile.present{background-color:#c9b458;border-color:#c9b458;color:#fff;animation:flipIn .3s ease-out}.tile.absent{background-color:#d32f2f;border-color:#d32f2f;color:#fff;animation:flipIn .3s ease-out}@keyframes flipIn{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.message{min-height:40px;font-size:clamp(15px,1.8vw,18px);font-weight:700;color:#5d4e37;text-align:center;line-height:1.4;padding:.8vh 1.5vw;flex-shrink:0}.game-keyboard{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5vh 1.5vw;background:linear-gradient(135deg,#f5ebe0,#e3d5ca);box-shadow:-2px 0 10px #5d4e370d;gap:1.5vh;height:100vh;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;flex:0 0 300px;min-width:30vw}.keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:450px;flex-shrink:0}.keyboard-row{display:flex;gap:5px;justify-content:center}.key{min-width:clamp(26px,3.8vw,40px);height:clamp(48px,6.5vh,54px);background-color:#d3d6da;border:none;border-radius:4px;color:#000;font-size:clamp(12px,1.6vw,14px);font-weight:700;cursor:pointer;transition:all .1s ease;text-transform:uppercase;display:flex;align-items:center;justify-content:center;padding:0}.key:hover{background-color:#c3c6ca;transform:scale(1.05)}.key:active{transform:scale(.95)}.wide-key{min-width:clamp(48px,7vw,62px);font-size:clamp(10px,1.4vw,12px)}.key.correct{background-color:#6aaa64;color:#fff}.key.present{background-color:#c9b458;color:#fff}.key.absent{background-color:#d32f2f;color:#fff}.answer-box{background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:16px;padding:2vh 2.5vw;width:100%;max-width:450px;box-shadow:0 8px 24px #5d4e371f,0 2px 8px #5d4e370d;text-align:center;animation:slideUp .4s cubic-bezier(.4,0,.2,1);flex-shrink:0}.answer-title{font-size:clamp(15px,1.8vw,18px);color:#8b7355;font-weight:700;margin-bottom:1.2vh;letter-spacing:.5px}.answer-word{font-size:clamp(28px,3.8vw,40px);font-weight:900;color:#5d4e37;letter-spacing:4px;margin-bottom:.8vh;text-transform:uppercase}.answer-meaning{font-size:clamp(16px,2vw,20px);color:#8b7355;font-weight:600;letter-spacing:.5px}.register-btn{padding:1.3vh 4vw;font-size:clamp(15px,1.8vw,20px);font-weight:700;background:linear-gradient(135deg,#c89f77,#a67c52);color:#fff;border:none;border-radius:14px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #a67c5240,0 2px 8px #a67c5226;letter-spacing:.5px;width:100%;max-width:450px;animation:fadeIn .5s cubic-bezier(.4,0,.2,1) .2s backwards;flex-shrink:0}.register-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 40px #a67c5259,0 4px 16px #a67c5233;background:linear-gradient(135deg,#d5bdaf,#c89f77)}.register-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}.retry-btn{background:linear-gradient(135deg,#8b7355,#5d4e37)}.retry-btn:hover{background:linear-gradient(135deg,#a67c52,#8b7355)}@media(max-width:1400px){.game-layout{grid-template-columns:minmax(220px,.9fr) minmax(380px,1.5fr) minmax(280px,1.1fr)}.tile{width:clamp(42px,5vw,54px);height:clamp(42px,5vw,54px);font-size:clamp(20px,3.2vw,26px)}.key{min-width:clamp(24px,3.5vw,38px);height:clamp(46px,6vh,52px);font-size:clamp(11px,1.5vw,13px)}.wide-key{min-width:clamp(44px,6.5vw,58px)}}@media(max-width:1200px){.game-layout{grid-template-columns:minmax(200px,.8fr) minmax(360px,1.5fr) minmax(260px,1fr)}.game-guide{padding:2.5vh 1.5vw;gap:1.2vh}.game-keyboard{padding:2vh 1.2vw;gap:1.2vh}.tile{width:clamp(40px,4.8vw,52px);height:clamp(40px,4.8vw,52px);font-size:clamp(18px,3vw,24px)}.key{min-width:clamp(22px,3.2vw,36px);height:clamp(44px,5.5vh,50px)}.board{gap:5px;padding:1.2vh .8vw}.row{gap:5px}}@media(max-width:900px){.game-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:0}.game-guide{padding:2vh 3vw;max-height:20vh}.game-center{padding:1vh 2vw}.game-keyboard{padding:2vh 2vw}.color-examples{flex-direction:row;gap:1vw;flex-wrap:wrap}.color-example{flex-direction:column;align-items:center;gap:.5vh;flex:1;min-width:100px}.example-text{text-align:center}.game-tips{display:none}}@media(max-height:700px){.game-guide{gap:1vh;padding:2vh 2vw}.color-examples{gap:1vh}.game-tips{padding:1vh 1vw}.board{padding:1vh 1vw;gap:6px}.row{gap:6px}.tile{width:clamp(42px,6vw,52px);height:clamp(42px,6vw,52px);font-size:clamp(20px,3.5vw,28px)}.key{height:clamp(45px,6vh,52px)}}.capital-quiz{width:100vw;height:100vh;background:linear-gradient(135deg,#f5e6d3,#e8d4b8);display:flex;justify-content:center;align-items:center;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.quiz-ready-container{background:linear-gradient(135deg,#fff,#faf6f1);border-radius:28px;padding:48px 60px;box-shadow:0 12px 40px #a6896626,0 4px 16px #a689661a;max-width:500px;width:90%;text-align:center;animation:slideUp .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.quiz-ready-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(166,137,102,.05) 0%,transparent 70%);pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.quiz-ready-container h1{font-size:clamp(32px,4vw,42px);font-weight:800;color:#5d4e37;margin:0 0 12px;position:relative;z-index:1;letter-spacing:-.5px}.quiz-ready-container>p{font-size:clamp(16px,2vw,18px);color:#8b7355;margin:0 0 32px;position:relative;z-index:1;line-height:1.7;font-weight:500}.quiz-rules{background:#a689661a;border-radius:16px;padding:24px;margin-bottom:32px;text-align:left;position:relative;z-index:1}.quiz-rules h3{font-size:clamp(18px,2.2vw,22px);color:#5d4e37;margin:0 0 16px;font-weight:700}.quiz-rules ul{margin:0;padding:0 0 0 24px;list-style:none}.quiz-rules li{font-size:clamp(14px,1.8vw,16px);color:#8b7355;margin-bottom:10px;position:relative;line-height:1.5;font-weight:500}.quiz-rules li:before{content:"✓";color:#a68966;font-weight:700;position:absolute;left:-20px}.quiz-start-btn{width:100%;padding:20px;font-size:clamp(18px,2.2vw,22px);font-weight:700;border:none;border-radius:16px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#a68966,#8b7355);color:#fff;margin-bottom:14px;box-shadow:0 8px 24px #a6896640,0 2px 8px #a6896626;position:relative;z-index:1;letter-spacing:.5px}.quiz-start-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px #a6896659,0 4px 16px #a6896633;background:linear-gradient(135deg,#c9a779,#a68966)}.quiz-start-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}.quiz-back-btn{width:100%;padding:16px;font-size:clamp(16px,1.9vw,18px);font-weight:600;background:#e3d5ca;color:#5d4e37;border:2px solid transparent;border-radius:14px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #5d4e3714;position:relative;z-index:1}.quiz-back-btn:hover{background:#d5bdaf;transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f;border-color:#5d4e371a}.quiz-back-btn:active{transform:translateY(0);transition-duration:.1s}.quiz-play-container{width:100%;max-width:800px;height:100vh;display:flex;flex-direction:column;padding:clamp(20px,3vh,40px) clamp(16px,3vw,32px);box-sizing:border-box;gap:clamp(16px,2vh,24px)}.quiz-dashboard{background:linear-gradient(135deg,#fff,#faf6f1);border-radius:16px;padding:clamp(16px,2vh,24px) clamp(20px,3vw,32px);box-shadow:0 8px 24px #a689661f,0 2px 8px #a6896614;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-shrink:0}.dashboard-item{display:flex;flex-direction:column;align-items:center;gap:6px}.dashboard-label{font-size:clamp(12px,1.5vw,14px);color:#8b7355;font-weight:500;letter-spacing:.5px}.dashboard-value{font-size:clamp(20px,2.5vw,28px);color:#5d4e37;font-weight:700}.quiz-exit-btn{padding:10px 20px;font-size:clamp(13px,1.6vw,15px);font-weight:600;background:linear-gradient(135deg,#e3d5ca,#d5bdaf);color:#5d4e37;border:none;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #5d4e3714;white-space:nowrap}.quiz-exit-btn:hover{background:linear-gradient(135deg,#d5bdaf,#c89f77);transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f}.quiz-exit-btn:active{transform:translateY(0)}.quiz-timer-container{position:relative;height:clamp(36px,5vh,48px);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px #a6896626;flex-shrink:0}.quiz-timer-bar{height:100%;background:linear-gradient(90deg,#a68966,#c9a779);transition:width .05s linear;border-radius:12px;box-shadow:0 0 10px #a6896666}.quiz-timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(16px,2vw,20px);font-weight:700;color:#5d4e37;text-shadow:0 1px 2px rgba(255,255,255,.8)}.country-box{background:linear-gradient(135deg,#fff,#faf6f1);border-radius:20px;padding:clamp(24px,4vh,40px);box-shadow:0 8px 24px #a6896626,0 2px 8px #a689661a;text-align:center;flex-shrink:0}.country-label{font-size:clamp(14px,1.8vw,16px);color:#8b7355;font-weight:600;letter-spacing:1px;margin-bottom:12px;text-transform:uppercase}.country-name{font-size:clamp(32px,5vw,48px);font-weight:700;color:#5d4e37;letter-spacing:-.5px}.answers-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,2vh,20px);flex:1;min-height:0}.answer-btn{background:#fff;border:3px solid #D4C4B0;border-radius:16px;font-size:clamp(16px,2.2vw,22px);font-weight:600;color:#5d4e37;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);padding:20px;box-shadow:0 4px 12px #a6896626;display:flex;align-items:center;justify-content:center;text-align:center;word-break:keep-all;line-height:1.3;position:relative;overflow:hidden}.answer-btn:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(166,137,102,.1) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.answer-btn:hover:not(:disabled){background:#faf6f1;border-color:#a68966;transform:scale(1.03);box-shadow:0 8px 20px #a6896640}.answer-btn:hover:not(:disabled):before{opacity:1}.answer-btn:active:not(:disabled){transform:scale(.98);transition-duration:.1s}.answer-btn:disabled{cursor:not-allowed;opacity:.7}.answer-btn.correct{background:linear-gradient(135deg,#48bb78,#38a169);border-color:#38a169;color:#fff;animation:correctPulse .3s ease-out;box-shadow:0 0 0 4px #48bb78,0 8px 24px #48bb7866}.answer-btn.wrong{background:linear-gradient(135deg,#f56565,#e53e3e);border-color:#e53e3e;color:#fff;animation:wrongShake .25s ease-out;box-shadow:0 0 0 4px #f56565,0 8px 24px #f5656566}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media(max-width:768px){.quiz-ready-container{padding:36px 32px}.quiz-dashboard{gap:8px}.dashboard-item{gap:4px}.quiz-exit-btn{padding:8px 14px}.country-box{padding:20px}.answers-grid{gap:10px}.answer-btn{padding:16px 12px;font-size:clamp(14px,3.5vw,18px)}}@media(max-width:480px){.quiz-play-container{padding:16px 12px;gap:12px}.quiz-dashboard{padding:14px 16px;flex-wrap:wrap}.dashboard-item{flex:1 1 30%;min-width:70px}.quiz-exit-btn{flex-basis:100%;margin-top:8px}.country-box{padding:16px}.answers-grid{gap:8px}.answer-btn{padding:12px 8px}}@media(max-height:700px){.quiz-play-container{padding:16px 20px;gap:12px}.quiz-dashboard{padding:14px 20px}.country-box{padding:20px}}@media(max-height:600px){.quiz-play-container{padding:12px 16px;gap:10px}.quiz-dashboard{padding:12px 16px}.quiz-timer-container{height:32px}.country-box{padding:16px}.answers-grid{gap:8px}.answer-btn{padding:10px}}#root{width:100%;min-height:100%;margin:0;padding:0;text-align:center}