.start-screen{gap:var(--space-lg)}.start-header{text-align:center;opacity:0;animation:fadeInUp 1.2s var(--ease-default) .2s forwards}.start-title{font-family:var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--color-text);margin-bottom:var(--space-sm);font-size:1.8rem;font-weight:300}.start-subtitle{color:var(--color-accent);letter-spacing:.15em;font-size:.8rem}.start-select{opacity:0;animation:fadeIn .8s var(--ease-default) .8s forwards}.start-tokens{gap:var(--space-xl);align-items:center;display:flex}.token{align-items:center;gap:var(--space-md);padding:var(--space-lg);border:2px solid var(--color-grid);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);flex-direction:column;display:flex}.token:hover:not(.token--locked){border-color:var(--color-accent);transform:translateY(-4px)}.token--locked{opacity:.5;cursor:not-allowed;position:relative}.token__avatar{width:96px;height:96px;image-rendering:pixelated;justify-content:center;align-items:center;display:flex}.token__name{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:.875rem;font-weight:500}.token__player{margin-top:calc(-1 * var(--space-sm))}.token__lock{top:var(--space-sm);right:var(--space-sm);font-size:.75rem;position:absolute}.token--selected{animation:tokenSelect .5s var(--ease-default) forwards;border-color:var(--color-accent)!important}@keyframes tokenSelect{0%{transform:scale(1)}40%{transform:scale(1.08)}to{border-color:var(--color-accent);transform:scale(1);box-shadow:0 0 20px #c4714a4d}}.transition-screen{gap:var(--space-lg);cursor:pointer}.transition-number-svg{width:120px;height:120px}.transition-name{font-family:var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text);opacity:0;animation:fadeIn var(--duration-normal) var(--ease-default) .6s forwards;font-size:1.25rem;font-weight:400}.transition-progress{gap:var(--space-sm);bottom:var(--space-xl);display:flex;position:absolute}.transition-progress__dot{border:1.5px solid var(--color-gray);width:8px;height:8px;transition:background var(--duration-fast) var(--ease-default);border-radius:50%}.transition-progress__dot--active{background:var(--color-accent);border-color:var(--color-accent)}.level-screen{padding-bottom:var(--space-lg);justify-content:flex-end}.level-illustration{opacity:0;pointer-events:none;height:55%;animation:illustrationFadeIn 2s var(--ease-default) .3s forwards;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}@keyframes illustrationFadeIn{to{opacity:.65}}.level-illustration svg{width:90%;max-width:700px;height:auto}.level-content{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;max-width:560px;max-height:45vh;padding:var(--space-lg);border:1px solid var(--color-grid);background:#f5f2edeb;border-radius:2px;position:relative;overflow-y:auto;box-shadow:0 -4px 30px #f5f2ed99}.level-title{margin-bottom:var(--space-md)}.level-narrative{margin-bottom:var(--space-sm)}.level-continue{opacity:0;animation:fadeInUp var(--duration-normal) var(--ease-default) .3s forwards}.narration-text{color:var(--color-text);letter-spacing:.01em;font-size:1.05rem;font-style:italic;line-height:1.8}.narration-sentence{transition:opacity .5s}.heart-btn{margin:var(--space-lg) auto 0;cursor:pointer;opacity:0;filter:drop-shadow(0 0 8px #c4714a4d);background:0 0;border:none;font-size:2rem;transition:transform .2s;animation:1.2s ease-in-out infinite heartbeat,.8s .3s forwards fadeIn;display:block}.heart-btn:hover{transform:scale(1.2)}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}.level-screen--playing .level-illustration{transition:opacity .8s;animation:none;opacity:.15!important}.level-screen--playing .level-content{max-height:75vh}.minigame-dots{aspect-ratio:1;width:100%;max-width:350px;margin:var(--space-md) auto;position:relative}.connect-dots-svg{width:100%;height:100%}.connect-dots-svg .dot{cursor:pointer;transition:r .2s var(--ease-default)}.minigame-dots-hint{text-align:center;margin-top:var(--space-sm)}.minigame-pool{width:100%;max-width:500px;margin:var(--space-md) auto;position:relative}.minigame-pool canvas{border:2px solid var(--color-grid);width:100%}.pool-hint{text-align:center;margin-top:var(--space-sm)}.pool-message{text-align:center;margin-top:var(--space-sm);color:var(--color-accent);font-family:var(--font-mono);animation:fadeIn var(--duration-normal) var(--ease-default);font-size:.875rem}.final-screen{gap:var(--space-xl)}.final-content{text-align:center;max-width:500px}.final-buildup{gap:var(--space-lg);flex-direction:column;align-items:center;transition:opacity .8s;display:flex}.final-buildup-line{font-family:var(--font-body);color:var(--color-gray);font-size:1.15rem;font-style:italic;font-weight:300;line-height:1.6}.final-question{font-family:var(--font-body);margin-bottom:var(--space-xl);color:var(--color-text);font-size:1.75rem;font-weight:400;line-height:1.4}.final-buttons{gap:var(--space-lg);justify-content:center;display:flex}.final-message{color:var(--color-accent);font-size:1.25rem;font-style:italic;line-height:1.6}@media (width<=379px){.start-tokens{gap:var(--space-lg);flex-direction:column}.token{padding:var(--space-md)}.token__avatar canvas{width:72px;height:72px}.level-content{padding:var(--space-md)}.final-question{font-size:1.25rem}.final-buttons{gap:var(--space-md);flex-direction:column}}@media (width>=380px) and (width<=767px){.level-content{margin:0 var(--space-sm)}.minigame-dots{max-width:280px}}@media (width>=768px){.screen{padding:var(--space-xl)}.level-content{max-width:600px;padding:var(--space-xl)}.narration-text{font-size:1.125rem}.transition-number-svg{width:160px;height:160px}.transition-name{font-size:1.5rem}.final-question{font-size:2rem}.final-message{font-size:1.5rem}.minigame-dots{max-width:400px}.minigame-pool{max-width:550px}.token__avatar canvas{width:96px;height:96px}}@media (width>=1200px){#app{max-width:1000px;margin:0 auto}}