.shell{min-height:100vh;min-height:100dvh;color:#3f2a22;position:relative;overflow-x:hidden;background:radial-gradient(1100px 560px at 8% -8%,#ffd0c4 0%,transparent 52%),radial-gradient(900px 480px at 108% 8%,#f6d7a4 0%,transparent 50%),linear-gradient(180deg,#fff7ef,#f4dcc6)}.page{max-width:920px;margin:0 auto;padding:40px 24px 64px;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(64px,calc(24px + env(safe-area-inset-bottom)));position:relative;z-index:1}.brand{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#c45c6a;margin-bottom:10px}.top{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:28px}.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;font-weight:700;color:#b8896a;margin-bottom:8px}h1{font-family:Fraunces,Georgia,serif;font-size:clamp(2.2rem,5vw,3.6rem);line-height:.95;margin-bottom:10px}.lede{max-width:46ch;color:#7a5344;line-height:1.5}.scores{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.score{min-width:108px;padding:12px 16px;border-radius:18px;background:#4a2c24;color:#fff6ea;box-shadow:0 10px 24px #4a2c242e}.score.muted{background:#4a2c2414;color:#3f2a22;box-shadow:none}.score span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.72}.score strong{font-size:1.8rem;line-height:1.1;display:inline-block}.score.pop strong{animation:badgePop .42s cubic-bezier(.22,1.7,.36,1)}.board{--accent: #e8a85a;--accent-ink: #3f2a22;position:relative;background:#fff8f0cc;border:1px solid rgba(196,92,106,.14);border-radius:28px;padding:28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px #7a463014}.board:before{content:"";position:absolute;left:22px;right:22px;top:0;height:8px;border-radius:0 0 12px 12px;background:linear-gradient(90deg,#f4b6c8,#f3d19a 55%,#c47a4a);opacity:.8}.board.tier-bronze{--accent: #c47a3a;--accent-ink: #3f2a22}.board.tier-silver{--accent: #d7c2ae;--accent-ink: #3f2a22}.board.tier-gold{--accent: #e0a83a;--accent-ink: #3f2a22}.board.tier-ruby{--accent: #d45a72;--accent-ink: #fff6ea}.board.tier-sapphire{--accent: #7a8cc8;--accent-ink: #fff6ea}.board.tier-mythic{--accent: #9b6bb0;--accent-ink: #fff6ea}.rank{margin-bottom:18px}.rank-copy{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}.rank-copy strong{font-family:Fraunces,Georgia,serif;font-size:1.15rem}.rank-copy span{color:#b8896a;font-size:.9rem}.rank-bar{height:8px;border-radius:999px;background:#c45c6a1f;overflow:hidden}.rank-bar i{display:block;height:100%;border-radius:inherit;background:#e08a9a;transition:width .42s ease}.tier-banner{position:absolute;left:50%;top:18px;transform:translate(-50%);background:var(--accent);color:var(--accent-ink);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;padding:8px 14px;border-radius:999px;animation:bannerIn 1.2s ease forwards;z-index:3}.board-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}.picker{display:flex;flex-direction:column;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b8896a}.picker select{height:44px;min-width:160px;border:1px solid rgba(196,92,106,.18);border-radius:14px;padding:0 36px 0 14px;font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:#3f2a22;background-color:#fffaf4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233f2a22' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer}.picker select:focus{border-color:#e8a85a;box-shadow:0 0 0 4px #e8a85a38}.need{display:flex;align-items:center;gap:12px;font-weight:600;margin:0}.need-copy{min-width:0}.letter{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-family:Fraunces,Georgia,serif;font-size:1.6rem;transition:background .4s ease,color .4s ease}.letter.pop{animation:badgePop .48s cubic-bezier(.22,1.6,.36,1)}.chain{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:28px 12px 32px;margin:0 -8px 8px;list-style:none}.link{display:flex;align-items:center;gap:10px;flex:0 0 auto}.card{position:relative;min-width:150px;background:#fffaf4;border:1px solid rgba(196,92,106,.12);border-radius:18px;padding:14px 16px 12px}.link.latest .card{border-color:color-mix(in srgb,var(--accent) 45%,rgba(196,92,106,.12));background:color-mix(in srgb,var(--accent) 16%,#fffaf4);transition:background .4s ease,border-color .4s ease}.link.fresh .card{animation:popIn .56s cubic-bezier(.16,1.4,.32,1);box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 22%,transparent)}.card .step{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#b8896a;margin-bottom:4px}.card strong{display:block;font-size:1.05rem;overflow-wrap:anywhere}.card em{display:flex;align-items:center;gap:6px;font-style:normal;margin-top:8px;color:#7a5344;font-weight:600}.link.latest .card em{color:color-mix(in srgb,var(--accent) 50%,#7a5344)}.arrow{color:#d4b89a;font-size:1.2rem}.play{position:relative}.play label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px}.field{display:flex;gap:8px}input{flex:1;min-width:0;height:52px;border:1px solid rgba(196,92,106,.18);border-radius:16px;padding:0 16px;font-size:1rem;background:#fffaf4;color:#3f2a22;outline:none}input:focus{border-color:#e8a85a;box-shadow:0 0 0 4px #e8a85a38}input::placeholder{color:#b8896a;opacity:.8}.field button,.restart{height:52px;border:0;border-radius:16px;padding:0 20px;font-weight:700;cursor:pointer}.field button{background:#4a2c24;color:#fff6ea;flex:0 0 auto}.restart{margin-top:16px;background:transparent;color:#7a5344;border:1px solid rgba(196,92,106,.22)}.studio{margin-top:14px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#c45c6a;opacity:.75}.ring{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border:3px solid var(--accent);border-radius:24px;pointer-events:none;animation:ringOut .52s ease-out forwards}.burst{position:absolute;inset:50% auto auto 50%;width:0;height:0;pointer-events:none}.burst i{position:absolute;top:-5px;left:-5px;width:9px;height:3px;border-radius:999px;background:#f4b6c8;animation:burstOut .5s ease-out forwards;animation-delay:var(--delay);transform:rotate(var(--angle)) translateY(0) scale(.4)}.burst i:nth-child(odd){background:#6b3e2e;width:8px;height:3px}.burst i:nth-child(3n){background:#c45c6a}.burst i:nth-child(4n){background:#e8a85a}.error{margin-top:10px;color:#c45c6a;font-weight:600}.shake{animation:shake .42s ease}.board.tier-up .letter{animation:badgePop .7s cubic-bezier(.22,1.7,.36,1)}@keyframes popIn{0%{transform:scale(.42);opacity:0}58%{transform:scale(1.16);opacity:1}78%{transform:scale(.94)}to{transform:scale(1)}}@keyframes badgePop{0%{transform:scale(.7)}55%{transform:scale(1.22)}to{transform:scale(1)}}@keyframes ringOut{0%{transform:scale(.7);opacity:.9}to{transform:scale(1.35);opacity:0}}@keyframes burstOut{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(.5)}to{opacity:0;transform:rotate(var(--angle)) translateY(-52px) scale(.15)}}@keyframes shake{20%,80%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%) translateY(-8px) scale(.86)}18%{opacity:1;transform:translate(-50%) translateY(0) scale(1.06)}80%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-6px) scale(.98)}}.score.urgent{background:#c45c6a;color:#fff6ea;animation:pulse .9s ease infinite}.score.urgent span{opacity:1}.field button:disabled,input:disabled{opacity:.55;cursor:not-allowed}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));background:#3f2a226b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal{width:min(420px,100%);background:#fffaf4;color:#3f2a22;border-radius:24px;padding:28px 24px 24px;box-shadow:0 24px 60px #4a2c2438;animation:popIn .42s cubic-bezier(.16,1.4,.32,1)}.modal h2{font-family:Fraunces,Georgia,serif;font-size:2.2rem;line-height:1;margin:4px 0 12px}.modal p{color:#7a5344;line-height:1.5;margin-bottom:18px}.modal-stats{display:flex;gap:10px;margin-bottom:18px}.modal-stats .score{flex:1;min-width:0}.modal button{width:100%;height:52px;border:0;border-radius:16px;background:#4a2c24;color:#fff6ea;font-weight:700;cursor:pointer}@keyframes pulse{50%{transform:scale(1.04)}}@media(max-width:720px){.page{padding:16px 16px 28px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom)))}.brand{margin-bottom:4px}.top{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px}.top .eyebrow,.lede{display:none}h1{font-size:clamp(1.7rem,8vw,2.2rem);margin-bottom:0}.scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;justify-content:stretch}.score{min-width:0;padding:8px 8px 10px;border-radius:14px;text-align:center;box-shadow:none}.score span{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score .rank-tag{display:none}.score strong{font-size:1.35rem}.board{padding:18px 14px 16px;border-radius:22px}.board:before{left:16px;right:16px;height:6px}.rank{margin-bottom:12px}.rank-copy{gap:8px}.rank-copy span{font-size:.8rem;text-align:right}.board-top{flex-direction:row;align-items:flex-end;gap:10px;margin-bottom:0}.picker{flex:1;min-width:0}.picker select{width:100%;min-width:0;height:44px}.need-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.letter{width:44px;height:44px;font-size:1.4rem;border-radius:12px}.chain{padding:16px 4px 18px;margin:0 -4px 4px}.card{min-width:132px;max-width:min(220px,72vw);padding:12px 12px 10px}.play label{margin-bottom:6px;font-size:.8rem}.field button,.restart,input{height:48px}input,.field button,.picker select{font-size:16px}.restart{width:100%;margin-top:12px}.studio{margin-top:10px;margin-bottom:4px}.error{margin-top:8px;font-size:.9rem}.overlay{padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));align-items:end}.modal{padding:22px 18px 18px;border-radius:20px}.modal h2{font-size:1.8rem}.tier-banner{max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(max-width:420px){.page{padding-top:12px}h1{font-size:1.55rem}.score strong{font-size:1.2rem}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html,body,#root{min-height:100%;min-height:100dvh}body{font-family:Outfit,system-ui,sans-serif;background:radial-gradient(1100px 560px at 8% -8%,#ffd0c4 0%,transparent 52%),radial-gradient(900px 480px at 108% 8%,#f6d7a4 0%,transparent 50%),linear-gradient(180deg,#fff7ef,#f4dcc6);color:#3f2a22}button,input,select{font-family:inherit}button,a,select{touch-action:manipulation}
