body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff3e0;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{width:100%;min-height:100vh;margin:0;padding:0}*{box-sizing:border-box}.app-container{color:#2d3748;background-color:#f7fafc;flex-direction:column;align-items:center;min-height:100vh;padding:1rem;font-family:Inter,system-ui,sans-serif;display:flex}button{font-family:inherit}.title-screen{text-align:center;width:100%;max-width:600px;padding:2rem 1rem;animation:.5s ease-out fadeIn}.logo-container h1{color:#2c3e50;text-shadow:2px 2px 4px #0000001a;margin-bottom:.5rem;font-size:2.8rem}.logo-container p{color:#718096;margin-bottom:3rem;font-size:1.1rem;font-weight:700}.mode-selection{flex-direction:column;gap:1.5rem;display:flex}.btn-mode{cursor:pointer;color:#fff;border:none;border-radius:1rem;padding:1.5rem;font-size:1.5rem;font-weight:900;transition:transform .1s,box-shadow .2s,filter .2s;box-shadow:0 6px 12px #00000026}.btn-mode:active{transform:translateY(4px);box-shadow:0 2px 4px #00000026}.btn-mode:hover{filter:brightness(1.1)}.btn-mode.play{color:#fff;text-shadow:1px 1px 2px #0000004d;background:linear-gradient(135deg,#4299e1 0%,#3182ce 100%)}.btn-mode.create{color:#fff;text-shadow:1px 1px 2px #0000004d;background:linear-gradient(135deg,#f6d365 0%,#fda085 100%)}.difficulty-screen,.list-screen{text-align:center;max-width:600px;margin:0 auto;animation:.4s ease-out fadeIn}.difficulty-screen h2,.list-screen h2{color:#2c3e50;margin-bottom:1.5rem;font-size:2rem}.difficulty-list,.quiz-list{flex-direction:column;gap:1rem;margin-bottom:2rem;display:flex}.btn-difficulty{color:#fff;cursor:pointer;border:none;border-radius:1rem;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 6px #0000001a}.btn-difficulty:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.btn-difficulty.level1{background:linear-gradient(135deg,#48bb78 0%,#38a169 100%)}.btn-difficulty.level2{color:#744210;background:linear-gradient(135deg,#ecc94b 0%,#d69e2e 100%)}.btn-difficulty.level3{background:linear-gradient(135deg,#ed8936 0%,#dd6b20 100%)}.btn-difficulty.level4{background:linear-gradient(135deg,#f56565 0%,#e53e3e 100%)}.btn-difficulty.level5{background:linear-gradient(135deg,#9f7aea 0%,#805ad5 100%)}.diff-name{font-size:1.3rem}.diff-progress{background:#ffffff4d;border-radius:2rem;padding:.3rem .8rem;font-size:1.1rem}.list-desc{color:#718096;margin-bottom:1.5rem;font-size:1.1rem}.btn-list-item{color:#2d3748;cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;justify-content:space-between;align-items:center;padding:1rem 1.5rem;font-size:1.1rem;font-weight:700;transition:all .2s;display:flex}.btn-list-item:hover{background:#f7fafc;border-color:#a0aec0}.btn-list-item.cleared{color:#a0aec0;background:#edf2f7;border-color:#cbd5e0}.quiz-title-text{text-align:left;flex:1}.badge-clear{color:#d69e2e;white-space:nowrap;margin-left:1rem;font-size:.9rem}.game-screen,.result-screen{width:100%;max-width:800px;animation:.4s ease-out fadeIn}.header{text-align:center;margin-bottom:.5rem}.quiz-title{color:#2c3e50;background:#fff;border:2px solid #e2e8f0;border-radius:.75rem;margin-bottom:.5rem;padding:.5rem 1rem;font-size:1.2rem;display:inline-block;box-shadow:0 2px 4px #0000000d}.mistake-counter{color:#e53e3e;background:#fff5f5;border-radius:2rem;margin-top:1rem;padding:.5rem 1rem;font-size:1.2rem;font-weight:700;display:inline-block}.mistake-counter strong{font-size:1.5rem}.slot-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem;display:grid}@media (width>=600px){.slot-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}.slot-wrapper{background:#e2e8f0;border-radius:1rem;flex-direction:column;align-items:center;padding:.4rem;display:flex;box-shadow:inset 0 2px 4px #0000001a}.slot-rank{color:#718096;align-items:center;gap:.25rem;margin-bottom:.2rem;font-size:1rem;font-weight:900;display:flex}.game-item{aspect-ratio:4/3;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:#fff;border:4px solid #0000;border-radius:.75rem;justify-content:center;align-items:center;width:100%;transition:transform .2s,opacity .2s,box-shadow .2s;display:flex;overflow:hidden;box-shadow:0 4px 6px #0000001a}.game-item:active{cursor:grabbing}.game-item.dragging{opacity:.5;z-index:10;transform:scale(.95);box-shadow:0 10px 15px #0003}.item-photo{object-fit:cover;pointer-events:none;border-radius:.5rem;flex:1;width:100%;min-height:0}.item-text{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;width:100%;height:100%;padding:.3rem;display:flex;overflow:hidden}.item-emoji{margin-bottom:.1rem;font-size:3rem}.item-name{color:#2d3748;word-break:keep-all;flex-shrink:0;font-size:.8rem;font-weight:700;line-height:1.2}@media (width<=600px){.item-emoji{font-size:2.2rem}.item-name{font-size:.85rem}}.actions{flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.btn-check,.btn-retry{color:#744210;cursor:pointer;background:#ecc94b;border:none;border-radius:2rem;width:100%;max-width:350px;padding:1rem 1.5rem;font-size:1.1rem;font-weight:900;transition:transform .1s,background-color .2s;box-shadow:0 6px 12px #ecc94b66}.btn-check:active,.btn-retry:active{transform:translateY(4px);box-shadow:0 2px 6px #ecc94b66}.btn-check:hover,.btn-retry:hover{background:#d69e2e}.btn-back{color:#a0aec0;cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;font-size:1rem;font-weight:700;transition:color .2s}.btn-back:hover{color:#718096}.mt-4{margin-top:1rem}.result-score{color:#2d3748;font-size:1.5rem}.result-score strong{color:#e53e3e;font-size:3rem}.clear-count{color:#d69e2e;margin-top:.5rem;font-size:1.2rem;font-weight:700}.result-message{text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:900}.win-anim{color:#38a169;animation:1s infinite bounce}.lose-anim{color:#dd6b20;animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}.rank-correct{color:#2f855a}.rank-wrong{color:#c53030}.correct-item{background-color:#f0fff4;border-color:#48bb78}.wrong-item{opacity:.8;background-color:#fff5f5;border-color:#f56565}.create-screen{flex-direction:column;align-items:center;width:100%;max-width:600px;padding:2rem 1rem;animation:.4s ease-out fadeIn;display:flex}.create-screen h2{color:#2c3e50;margin-bottom:1rem;font-size:2rem}.create-tabs{background:#edf2f7;border-radius:2rem;gap:.5rem;margin-bottom:1rem;padding:.5rem;display:flex}.tab-btn{color:#718096;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:1.5rem;flex:1;padding:.75rem .5rem;font-size:.9rem;font-weight:700;transition:all .2s}.tab-btn.active{color:#2b6cb0;background:#fff;box-shadow:0 2px 4px #0000001a}.create-desc{color:#718096;text-align:center;margin-bottom:1.5rem}.create-form{background:#fff;border-radius:1rem;width:100%;margin-bottom:2rem;padding:2rem;box-shadow:0 4px 6px #0000000d}.input-title{box-sizing:border-box;border:2px solid #e2e8f0;border-radius:.5rem;width:100%;margin-bottom:1.5rem;padding:1rem;font-size:1.2rem}.input-item-row{align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.input-rank{color:#a0aec0;width:40px;font-weight:700}.input-emoji{text-align:center;border:2px solid #e2e8f0;border-radius:.5rem;width:60px;padding:.5rem;font-size:1.5rem}.input-name{border:2px solid #e2e8f0;border-radius:.5rem;flex-grow:1;width:100%;padding:.5rem;font-size:1.1rem}.input-public-fields,.input-private-fields{flex-direction:column;flex-grow:1;gap:.5rem;display:flex}.input-url{color:#4a5568;font-size:.9rem}.input-file-mini{color:#718096;font-size:.8rem}.mini-preview{object-fit:cover;border:1px solid #cbd5e0;border-radius:.25rem;width:50px;height:50px}.input-title:focus,.input-emoji:focus,.input-name:focus{border-color:#cbd5e0;outline:none}.btn-generate{color:#fff;cursor:pointer;background:#48bb78;border:none;border-radius:2rem;width:100%;padding:1rem 2rem;font-size:1.2rem;font-weight:700;transition:transform .1s,background-color .2s;box-shadow:0 4px 10px #48bb7866}.btn-generate:hover{background:#38a169}.btn-generate:active{transform:translateY(2px)}.generated-url-box{text-align:center;background:#ebf8ff;border:2px solid #bee3f8;border-radius:1rem;width:100%;padding:1.5rem}.success-text{color:#2b6cb0;margin-top:0;margin-bottom:1rem;font-weight:700}.url-input{color:#4a5568;box-sizing:border-box;background:#fff;border:1px solid #cbd5e0;border-radius:.5rem;width:100%;margin-bottom:1rem;padding:.75rem;font-size:.9rem}.btn-copy{color:#fff;cursor:pointer;background:#3182ce;border:none;border-radius:2rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;box-shadow:0 4px 6px #3182ce4d}.btn-copy:hover{background:#2b6cb0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.hint-container{margin-top:1rem}.btn-hint{color:#fff;cursor:pointer;background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 100%);border:none;border-radius:2rem;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;transition:transform .1s,filter .2s;animation:2s infinite pulseHint;box-shadow:0 4px 6px #8b5cf64d}.btn-hint:active{transform:translateY(2px)}.btn-hint:hover{filter:brightness(1.1)}@keyframes pulseHint{0%{box-shadow:0 0 #8b5cf666}70%{box-shadow:0 0 0 10px #8b5cf600}to{box-shadow:0 0 #8b5cf600}}.hint-banner{color:#fbbf24;background:#2d3748;border-radius:.5rem;padding:.75rem;font-size:1.2rem;font-weight:700;animation:.3s ease-out fadeIn}.hint-used-badge{color:#718096;font-size:.9rem;font-weight:700}.hint-selectable{cursor:pointer;border:4px dashed #8b5cf6;animation:1.5s infinite selectablePulse}.hint-selectable:hover{background-color:#f3e8ff}@keyframes selectablePulse{0%,to{border-color:#8b5cf6}50%{border-color:#ddd6fe}}.hint-modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.hint-modal{text-align:center;background:#fff;border-radius:1rem;width:90%;max-width:400px;padding:2rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) zoomIn;box-shadow:0 10px 25px #00000080}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.hint-modal h2{color:#8b5cf6;margin-top:0;margin-bottom:1.5rem}.hint-target-display{background:#f7fafc;border-radius:1rem;justify-content:center;margin-bottom:1.5rem;padding:1rem;display:flex}.hint-target-photo{object-fit:cover;border-radius:.5rem;width:150px;height:150px}.hint-target-text{flex-direction:column;display:flex}.hint-target-emoji{font-size:5rem}.hint-target-name{font-size:1.2rem;font-weight:700}.hint-result{color:#2d3748;margin-bottom:2rem;font-size:1.5rem;font-weight:700}.hint-high{color:#e53e3e;margin:.5rem 0;font-size:3rem;animation:.5s popText;display:block}.hint-low{color:#3182ce;margin:.5rem 0;font-size:3rem;animation:.5s popText;display:block}@keyframes popText{0%{opacity:0;transform:scale(.5)}80%{opacity:1;transform:scale(1.1)}to{transform:scale(1)}}.btn-close-hint{color:#4a5568;cursor:pointer;background:#e2e8f0;border:none;border-radius:2rem;padding:.75rem 2rem;font-size:1.1rem;font-weight:700;transition:background-color .2s}.btn-close-hint:hover{background:#cbd5e0}.pv-counter{color:#718096;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffc;border-radius:2rem;margin-top:.5rem;margin-bottom:1rem;padding:.4rem 1.2rem;font-size:.95rem;animation:.6s ease-out fadeIn;display:inline-block;box-shadow:0 2px 4px #0000000d}.pv-counter strong{color:#4299e1;font-size:1.1rem}.ad-container{text-align:center;width:100%;max-width:600px;min-height:50px;margin:1.5rem auto}.hint-menu-modal{max-width:440px}.hint-menu-desc{color:#718096;margin:0 0 1.2rem;font-size:.95rem}.hint-menu-list{flex-direction:column;gap:.75rem;margin-bottom:1.5rem;display:flex}.hint-menu-btn{cursor:pointer;background:#f7fafc;border:3px solid #0000;border-radius:1rem;flex-direction:column;align-items:center;gap:.3rem;padding:1rem;transition:all .2s;display:flex;position:relative}.hint-menu-btn.highlow{background:#fff5f5;border-color:#f56565}.hint-menu-btn.nearpin{background:#f0fff4;border-color:#48bb78}.hint-menu-btn.beforeafter{background:#ebf8ff;border-color:#4299e1}.hint-menu-btn:not(.used):hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.hint-menu-btn:not(.used):active{transform:translateY(1px)}.hint-menu-btn.used{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}.hint-menu-icon{font-size:2rem}.hint-menu-name{color:#2d3748;font-size:1.2rem;font-weight:900}.hint-menu-info{color:#718096;font-size:.85rem}.hint-menu-used{color:#a0aec0;background:#edf2f7;border-radius:1rem;padding:.15rem .5rem;font-size:.75rem;font-weight:700;position:absolute;top:.5rem;right:.75rem}.hint-banner-step2{color:#63b3ed;background:#2d3748}.hint-selected-first{box-shadow:0 0 12px #f6ad5580;border:4px solid #f6ad55!important}.nearpin-result{margin-bottom:1rem}.nearpin-count{color:#48bb78;margin:.5rem 0;font-size:4rem;animation:.5s popText;display:block}.nearpin-gauge{justify-content:center;gap:.5rem;margin-bottom:2rem;display:flex}.nearpin-dot{border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.3rem;animation:.3s ease-out popText;display:flex}.nearpin-dot.correct{background:#c6f6d5}.nearpin-dot.wrong{background:#edf2f7}.beforeafter-display{justify-content:center;align-items:center;gap:.5rem;margin-bottom:1.5rem;display:flex}.beforeafter-item{background:#f7fafc;border-radius:1rem;flex:1;justify-content:center;max-width:140px;padding:.75rem;display:flex}.beforeafter-item .hint-target-photo{width:100px;height:100px}.beforeafter-item .hint-target-emoji{font-size:3rem}.beforeafter-item .hint-target-name{font-size:.95rem}.beforeafter-vs{color:#e53e3e;padding:0 .25rem;font-size:1.5rem;font-weight:900}.hint-quota-badge{background:#ffffff4d;border-radius:1rem;margin-top:.3rem;padding:.15rem .75rem;font-size:.75rem;font-weight:700;display:block}.hint-quota-badge.ad{color:#fff;background:#ffc83266}.ad-gate-ad-area{background:#f7fafc;border:2px dashed #cbd5e0;border-radius:1rem;justify-content:center;align-items:center;min-height:80px;margin-bottom:1rem;padding:1rem;display:flex}.ad-gate-placeholder{color:#a0aec0;font-size:1.2rem;font-weight:700}.ad-gate-timer{color:#718096;margin-bottom:1rem;font-size:1.1rem;font-weight:700}.ad-gate-countdown{color:#e53e3e;margin-right:.25rem;font-size:2rem;font-weight:900}.btn-hint-restore{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f6d365 0%,#fda085 100%);border:none;border-radius:2rem;width:100%;margin-bottom:.5rem;padding:1rem 2rem;font-size:1.2rem;font-weight:900;transition:transform .1s,filter .2s;animation:2s infinite pulseHint;box-shadow:0 4px 12px #fda08566}.btn-hint-restore:hover{filter:brightness(1.1)}.btn-hint-restore:active{transform:translateY(2px)}.nearpin-detail-area{margin-bottom:1rem}.btn-nearpin-detail{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:2rem;width:100%;padding:.8rem 1.5rem;font-size:1rem;font-weight:700;transition:transform .1s}.btn-nearpin-detail:hover{filter:brightness(1.1)}.btn-nearpin-detail:active{transform:translateY(2px)}.dnd-poly-drag-image{opacity:.5!important}.dnd-poly-drag-image.dnd-poly-snapback{transition-property:transform!important;transition-duration:.25s!important;transition-timing-function:ease-out!important}