.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}@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 #4a6fa54d}}.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:#f3f5f8eb;border-radius:2px;position:relative;overflow-y:auto;box-shadow:0 -4px 30px #f3f5f899}.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}.level-screen--playing .level-illustration{transition:opacity .8s;animation:none;opacity:.15!important}.level-screen--playing .level-content{max-height:75vh}.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-star-reveal{margin-bottom:var(--space-lg);justify-content:center;align-items:center;display:flex}.final-star-svg{width:80px;height:80px}.final-star-path{stroke-dasharray:300;stroke-dashoffset:300px;animation:drawStar 2s var(--ease-default) .3s forwards}@keyframes drawStar{to{stroke-dashoffset:0}}.final-message-box{max-width:450px}.final-message-text{color:var(--color-accent);font-size:1.2rem;font-style:italic;font-weight:300;line-height:1.8}.reveal-grid{gap:var(--space-md);max-width:280px;margin:var(--space-md) auto;grid-template-columns:repeat(2,1fr);display:grid}.reveal-card{aspect-ratio:1;perspective:600px;cursor:pointer;opacity:0;animation:fadeInUp var(--duration-normal) var(--ease-default) forwards}.reveal-card-inner{width:100%;height:100%;transition:transform .5s var(--ease-default);transform-style:preserve-3d;position:relative}.reveal-card--flipped .reveal-card-inner{transform:rotateY(180deg)}.reveal-card-front,.reveal-card-back{backface-visibility:hidden;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;display:flex;position:absolute;inset:0}.reveal-card-front{background:var(--color-bg-alt,#e8ecf2);border:1.5px solid var(--color-grid);color:var(--color-accent);font-size:1.5rem;font-weight:300;transition:border-color .2s,box-shadow .2s}.reveal-card:hover .reveal-card-front{border-color:var(--color-accent);box-shadow:0 4px 16px #4a6fa526}.reveal-card-back{background:var(--color-accent);transform:rotateY(180deg)}.reveal-emoji{font-size:1.75rem}.reveal-text{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.9;font-size:.6rem}.reveal-grid--done .reveal-card-back{animation:1.5s ease-in-out pulse}.reveal-hint{text-align:center;margin-top:var(--space-sm)}@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-message-text{font-size:1rem}}@media (width>=380px) and (width<=767px){.level-content{margin:0 var(--space-sm)}}@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-message-text{font-size:1.4rem}.token__avatar canvas{width:96px;height:96px}}@media (width>=1200px){#app{max-width:1000px;margin:0 auto}}:root{--color-accent:#4a6fa5;--color-accent-light:#6b8dc2;--color-bg:#f3f5f8;--color-bg-alt:#e8ecf2;--color-grid:#cdd4de}body{background-color:var(--color-bg);background-image:none}.token--selected{animation:tokenSelect .5s var(--ease-default) forwards;border-color:var(--color-accent)!important}.level-content{background:#f3f5f8eb;box-shadow:0 -4px 30px #f3f5f899}@media (pointer:fine){body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='%234A6FA5' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%234A6FA5'/%3E%3C/svg%3E") 10 10,auto}.btn-accent,.token,button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%234A6FA5' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%234A6FA5'/%3E%3C/svg%3E") 10 10,pointer}}