.letters-player{--le-bg:#fff8ec;--le-primary:#7351bc;--le-ink:#33304f;--le-radius:24px;position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--le-bg);color:var(--le-ink);font-family:Fredoka,sans-serif}.letters-player *{box-sizing:border-box}.letters-player::backdrop{background:var(--le-bg)}body:has(.letters-player[open]){overflow:hidden}.letters-shell{max-width:440px;min-height:100svh;margin:auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.letters-player button{border:0;border-radius:var(--le-radius);min-height:72px;cursor:pointer;font:500 18px Fredoka,sans-serif;color:var(--le-ink);touch-action:manipulation}.letters-player button:active{transform:scale(.95)}.letters-player button:focus-visible{outline:3px solid var(--le-primary);outline-offset:4px}.letters-player svg{width:28px;height:28px}.letters-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.letters-top strong{font-size:22px}.letters-top button{width:72px;background:#ede3fa;color:var(--le-primary);display:grid;place-items:center}.letters-progress{display:flex;gap:7px;margin-top:16px}.letters-progress span{height:8px;flex:1;background:#e9dff2;border-radius:20px}.letters-progress .lit{background:var(--le-primary)}.letters-main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:24px 0 16px}.letters-kicker{font:11px Andika,sans-serif;letter-spacing:1px;color:#696078;margin:0}.letters-main h1{font:500 28px/1.2 Fredoka,sans-serif;text-align:center;margin:0}.letters-player h1:focus{outline:none}.letters-target{position:relative;background:#7351bc;width:190px;height:206px;display:grid;place-items:center;border-radius:40px!important;box-shadow:0 6px 0 #503889}.letters-target>img{width:150px;height:176px;pointer-events:none;user-select:none}.letters-target>span{position:absolute;right:-10px;bottom:0;width:48px;height:48px;border-radius:50%;background:#ffda81;color:#544175;display:grid;place-items:center}.letters-target svg{width:24px;height:24px}.letters-instruction{font:13px/1.5 Andika,sans-serif;color:#655d70;text-align:center;margin:0}.letters-options{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.letters-choice{position:relative;display:grid;place-items:center;height:118px;padding:6px;border:2px solid #ffffffa0!important;box-shadow:0 5px 0 #c5b29b}.letters-choice>img{width:88px;max-width:100%;height:102px;pointer-events:none}.color-0{background:#3ea98a}.color-1{background:#df9d43}.color-2{background:#709bcf}.letters-choice.hint{outline:4px solid #7351bc;outline-offset:4px}.letters-choice.correct{outline:4px solid #36694d;outline-offset:3px}.letters-check{position:absolute;right:-5px;top:-15px;border-radius:50%;width:36px;height:36px;background:#36694d;color:white;display:grid;place-items:center}.letters-check svg{width:24px;height:24px}.letters-coach{display:flex;align-items:center;gap:12px;min-height:68px;width:100%}.letters-coach img{width:52px;height:60px;object-fit:contain}.letters-status{font:14px/1.5 Andika,sans-serif;margin:0}.letters-next,.letters-help{width:100%;display:flex;justify-content:center;align-items:center;gap:12px}.letters-next{background:var(--le-primary);color:white!important;box-shadow:0 5px 0 #52358e}.letters-help{background:#efe5fa;color:#594285!important}.letters-player [hidden]{display:none!important}.letters-summary{align-items:center;justify-content:center;gap:24px;text-align:center}.letters-summary>img{width:160px;height:180px;object-fit:contain}.letters-stars{display:flex;gap:16px;color:#d69a15}.letters-stars svg{width:44px;height:44px}.letters-summary h1{font-size:30px;margin:0}.letters-recap{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.letters-recap span{background:#7351bc;border-radius:16px}.letters-recap img{width:100%;height:62px}.letters-summary .letters-next,.letters-summary .letters-help{flex-shrink:0}@media(max-height:780px){.letters-main{gap:14px;padding:16px 0}.letters-target{width:160px;height:166px}.letters-target>img{width:126px;height:148px}.letters-main h1{font-size:26px}.letters-choice{height:106px}.letters-choice>img{height:92px}}@media(max-width:350px){.letters-shell{padding-left:16px;padding-right:16px}.letters-options{gap:10px}.letters-main h1{font-size:25px}}@media(prefers-reduced-motion:reduce){.letters-player *{animation:none!important;transition:none!important}}
