@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--bg-0: #09061a;--bg-1: #120d31;--panel-0: #1a1343;--panel-1: #23195c;--panel-2: #2e2390;--line: #4f38c8;--line-bright: #8a6dff;--accent-cyan: #33ebff;--accent-pink: #ff61d6;--accent-yellow: #ffd75f;--text: #f4f1ff;--muted: #a9b7ff;--danger: #ff6e9f}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%;font-family:"Press Start 2P",monospace;color:var(--text);background:radial-gradient(circle at 18% 12%,#1b1650 0,#1b165000 34%),radial-gradient(circle at 82% 24%,#3f1f6b55 0,#3f1f6b00 32%),linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 100%)}body{min-width:320px}.app-shell{min-height:100dvh;display:grid;place-items:center;padding:16px}.screen{position:relative;width:min(100%,560px);border:4px solid var(--line);border-radius:14px;overflow:hidden;padding:16px;background:linear-gradient(180deg,#2d2390,#211765 34%,#150f44);box-shadow:0 0 0 2px #120d31,0 0 0 5px #3a2b8a,0 0 26px #4f7fff66}.screen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,#fff0 0,#fff0 3px,#00000018 3px,#00000018 4px);pointer-events:none}.screen__header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:10px;border:3px solid #392996;border-radius:8px;background:linear-gradient(180deg,#2c1d82,#1d1456);box-shadow:inset 0 0 0 2px #684cff66}.screen__header-main{min-width:0;flex:1 1 auto}.screen__title{margin:0;font-size:clamp(14px,3.5vw,20px);line-height:1.45;color:var(--accent-yellow);text-shadow:2px 2px 0 #140d3a}.screen__subtitle{margin:8px 0 0;color:var(--accent-cyan);font-size:10px;text-shadow:1px 1px 0 #140d3a}.screen__header-right{flex:0 0 auto}.screen__header-beers{width:clamp(52px,16vw,86px);height:auto;display:block;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 #130a35)}.screen__body{position:relative;display:grid;gap:12px}.title-screen{position:relative;display:grid;gap:7px;padding:4px 2px 2px;min-height:clamp(400px,72dvh,440px)}.title-screen--neon{overflow:hidden}.title-screen--neon:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% -10%,#ff5fc622 0,#ff5fc600 55%),radial-gradient(circle at 20% 20%,#25f7ff22 0,#25f7ff00 48%),linear-gradient(180deg,#100820,#161447 45%,#120b2d);pointer-events:none}.title-screen__sparkles{position:absolute;inset:-2px 0 auto;height:clamp(140px,33dvh,178px);pointer-events:none}.title-screen__sparkle{position:absolute;width:6px;height:6px;border:1px solid #251a5f;background:#74ebff;box-shadow:0 0 0 1px #fff4;animation:sparkle 2.8s steps(2,end) infinite}.title-screen__sparkle:nth-child(1){top:4px;left:4%}.title-screen__sparkle:nth-child(2){top:18px;left:14%;width:4px;height:4px;background:#ff61d6}.title-screen__sparkle:nth-child(3){top:8px;left:25%;width:4px;height:4px}.title-screen__sparkle:nth-child(4){top:28px;left:37%;background:#ff61d6}.title-screen__sparkle:nth-child(5){top:12px;left:48%;width:4px;height:4px}.title-screen__sparkle:nth-child(6){top:20px;left:58%}.title-screen__sparkle:nth-child(7){top:6px;left:69%;width:4px;height:4px}.title-screen__sparkle:nth-child(8){top:26px;left:82%}.title-screen__sparkle:nth-child(9){top:38px;left:9%;background:#ffd75c}.title-screen__sparkle:nth-child(10){top:52px;left:21%;width:4px;height:4px}.title-screen__sparkle:nth-child(11){top:44px;left:33%;background:#74ebff}.title-screen__sparkle:nth-child(12){top:56px;left:43%}.title-screen__sparkle:nth-child(13){top:42px;left:56%}.title-screen__sparkle:nth-child(14){top:54px;left:66%;width:4px;height:4px}.title-screen__sparkle:nth-child(15){top:40px;left:78%;background:#ff61d6}.title-screen__sparkle:nth-child(16){top:50px;left:90%;width:4px;height:4px}.title-screen__sun{position:absolute;top:clamp(44px,11dvh,62px);left:50%;width:clamp(88px,26vw,120px);height:clamp(46px,14vw,64px);transform:translate(-50%);background:repeating-linear-gradient(180deg,#ff6ad5 0,#ff6ad5 5px,#ff9be8 5px,#ff9be8 8px);border:3px solid #2a1b65;box-shadow:0 0 0 2px #ff5fc677,0 0 20px #ff5fc677;clip-path:ellipse(50% 50% at 50% 50%);opacity:.9;pointer-events:none}.title-screen__horizon{position:absolute;left:-8%;right:-8%;bottom:6px;height:clamp(64px,19dvh,92px);background:repeating-linear-gradient(90deg,#30e6ff00 0,#30e6ff00 13px,#30e6ff80 13px,#30e6ff80 14px),repeating-linear-gradient(0deg,#30e6ff00 0,#30e6ff00 13px,#30e6ff55 13px,#30e6ff55 14px);border-top:2px solid #30e6ff;transform:perspective(130px) rotateX(62deg);transform-origin:bottom;opacity:.5;pointer-events:none}.title-screen__badge,.title-screen__banner,.title-screen__note,.title-screen .pixel-btn{position:relative;z-index:2}.title-screen__badge{justify-self:center;margin:2px 0 0;padding:6px 10px;border:3px solid #2d1d71;background:linear-gradient(180deg,#3b278f,#201154);color:#84e8ff;font-size:8px;letter-spacing:.12em;text-shadow:2px 2px 0 #120d31;box-shadow:0 0 8px #25f7ff55}.title-screen__banner{position:relative;margin-top:clamp(70px,18dvh,98px);border:4px solid #2a1b65;background:linear-gradient(180deg,#5d3ef2,#2d2cb5 22%,#1a2b7e 58%,#151954);box-shadow:inset 0 0 0 2px #8a7cff,inset 0 0 0 6px #23155d,0 8px #0f0c2f,0 0 18px #4f7fff55;padding:10px 8px;min-height:clamp(84px,16dvh,106px);display:flex;flex-direction:column;justify-content:center;text-align:center}.title-screen__banner:before,.title-screen__banner:after{content:"";position:absolute;top:12px;width:16px;height:26px;background:linear-gradient(180deg,#6f54ff,#2b2fa1);border:3px solid #2a1b65}.title-screen__banner:before{left:-18px;clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}.title-screen__banner:after{right:-18px;clip-path:polygon(100% 0,0 0,28% 50%,0 100%,100% 100%)}.title-screen__title{margin:0;font-size:clamp(26px,10.4vw,40px);line-height:1.15;color:#ffd75f;text-shadow:3px 3px 0 #23155d,-1px -1px 0 #fff2b8,0 0 10px #ffd75f66}.title-screen__subtitle{margin:5px 0 0;color:#8bf0ff;font-size:clamp(8px,2.4vw,9px);letter-spacing:.18em;text-shadow:2px 2px 0 #23155d}.title-screen__note{margin:3px 0 0;text-align:center;color:#79f8f7;font-size:clamp(7px,2vw,8px);line-height:1.5;text-shadow:1px 1px 0 #132a4e}.pixel-note{margin:0;font-size:10px;line-height:1.8;color:#8bf0ff;text-shadow:1px 1px 0 #150f44}.row{display:flex;gap:8px;flex-wrap:wrap}.pixel-btn{border:3px solid #22408d;background:linear-gradient(180deg,#40f2ff,#22b8ff 35%,#1765ff);color:#031a33;font-family:inherit;font-size:10px;padding:6px 8px;border-radius:8px;cursor:pointer;text-shadow:1px 1px 0 #b8f6ff;box-shadow:inset 0 0 0 2px #a4f8ff,0 4px #1d3d7e,0 0 14px #30e6ff66}.pixel-btn:active{transform:translateY(1px)}.pixel-btn:disabled{opacity:.6;cursor:not-allowed}.pixel-btn--wide{width:100%}.pixel-btn--start{font-size:12px;padding-top:7px;padding-bottom:7px}.pixel-btn--ghost{border-color:#4d2f9f;background:linear-gradient(180deg,#4d2f9f,#2b1b66);color:#f5edff;text-shadow:1px 1px 0 #1d1048;box-shadow:inset 0 0 0 2px #845ce9,0 4px #1f124d,0 0 12px #9b71ff55}.title-screen .pixel-btn--ghost{justify-self:center;min-width:120px;white-space:nowrap}.blink{animation:blink 1.1s steps(2,jump-none) infinite}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.45}}@keyframes sparkle{0%,39%{opacity:.9;transform:translateY(0)}40%,60%{opacity:.2;transform:translateY(1px)}61%,to{opacity:.9;transform:translateY(0)}}.story{margin:0;padding:14px;min-height:180px;white-space:pre-wrap;line-height:1.9;background:linear-gradient(180deg,#1a1346,#120d35);border-radius:8px;border:3px solid #4032a2;box-shadow:inset 0 0 0 2px #7f6cff33;color:#dbdcff;font-family:inherit;font-size:10px}.label{font-size:9px;color:#79f8f7;text-shadow:1px 1px 0 #150f44}.input{width:100%;border:3px solid #4032a2;background:linear-gradient(180deg,#1a1346,#140f39);color:#eff0ff;font-family:inherit;font-size:10px;border-radius:8px;padding:12px;box-shadow:inset 0 0 0 2px #7f6cff33}.input::placeholder{color:#93a2e8}.input--textarea{min-height:88px;resize:vertical}.error{color:var(--danger);margin:0;font-size:9px;line-height:1.7}.hero-grid{display:grid;gap:10px;grid-template-columns:1fr}.hero-card{display:grid;grid-template-columns:76px 1fr auto;align-items:center;column-gap:10px;border:3px solid #3d2d93;border-radius:8px;padding:8px 10px;background:linear-gradient(180deg,#221a58,#171147);color:#ebebff;cursor:pointer;min-height:96px;box-shadow:inset 0 0 0 2px #755dff33}.hero-card--active{border-color:#9dff3f;box-shadow:inset 0 0 0 2px #ddff8a66,0 0 14px #75ff3a66}.hero-card__avatar{width:64px;height:64px;border:2px solid #3f54b2;border-radius:6px;display:grid;place-items:center;font-size:30px;background:linear-gradient(180deg,#25378f,#16255c);box-shadow:inset 0 0 0 2px #8bb6ff33;overflow:hidden}.hero-card__avatar--mage{background:linear-gradient(180deg,#6c2bb4,#2b1b66)}.hero-card__avatar--warrior{background:linear-gradient(180deg,#8b233f,#4d1324)}.hero-card__avatar--rogue{background:linear-gradient(180deg,#20202f,#121220)}.hero-card__avatar--paladin{background:linear-gradient(180deg,#214f8f,#152c57)}.hero-card__meta{display:grid;gap:6px;text-align:left}.hero-card__image{width:100%;height:100%;object-fit:cover;object-position:left center;image-rendering:pixelated}.hero-card__title{margin:0;font-size:14px;line-height:1.2;color:#ff4ba9;text-transform:uppercase}.hero-card__description{margin:0;font-size:9px;line-height:1.3;color:#f2f7ff}.hero-card__pick{border:2px solid #445aab;border-radius:6px;padding:8px 10px;font-size:9px;color:#f0f5ff;background:linear-gradient(180deg,#2b438f,#1a2f70);box-shadow:inset 0 0 0 2px #9bb4ff33;white-space:nowrap}.hero-card__pick--active{border-color:#7fff38;color:#baff74;background:linear-gradient(180deg,#1f4222,#102e12);box-shadow:inset 0 0 0 2px #b5ff7d44,0 0 10px #77ff3f66}.progress{position:relative;height:30px;border-radius:8px;border:3px solid #3e2f9f;background:#120d34;overflow:hidden;box-shadow:inset 0 0 0 2px #6f55ff33}.progress__fill{height:100%;background:repeating-linear-gradient(45deg,#26e8ff,#26e8ff 8px,#12b3ff 8px,#12b3ff 16px);box-shadow:inset 0 0 12px #8ff7ff88;transition:width .15s ease}.progress__label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;color:#eef4ff;text-shadow:1px 1px 0 #1a1150}.power-btn{padding-top:20px;padding-bottom:20px}.match3{position:relative;display:grid;gap:10px;padding-top:22px}.match3__timer{position:absolute;top:0;right:0;padding:4px 8px;border:2px solid #5ec7ff;border-radius:6px;background:linear-gradient(180deg,#18235d,#111945);color:#fff0a6;font-size:10px;line-height:1;text-shadow:1px 1px 0 #0b102f;box-shadow:inset 0 0 0 1px #9bdcff66,0 0 10px #2ec0ff44}.match3__hint{margin:0;font-size:8px;line-height:1.6;color:#c8d2ff}.match3__hud{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#fff3bf}.match3__status-row{display:grid;gap:5px}.match3__status{font-size:9px;color:#8bf0ff}.match3__toast{font-size:8px;color:#ffd75f}.match3__board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;touch-action:none}.match3__tile{border:2px solid #3d2d93;border-radius:6px;aspect-ratio:1 / 1;min-height:0;display:grid;place-items:center;color:#fff;font-family:inherit;font-size:clamp(6px,1.8vw,8px);text-transform:uppercase;line-height:1.2;padding:4px;box-shadow:inset 0 0 0 2px #7f6cff33;transition:transform .08s linear,box-shadow .12s ease;will-change:transform}.match3__tile--dragging{z-index:2;box-shadow:inset 0 0 0 2px #7f6cff33,0 0 0 2px #c7f5ff88,0 8px 16px #11092f88;transition:none}.match3__tile--matched{animation:match3-popout .18s ease-in forwards;pointer-events:none}.match3__icon{width:72%;height:72%;max-width:60px;max-height:60px;object-fit:contain;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(1px 1px 0 #1c1048)}@keyframes match3-popout{0%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1.12)}to{opacity:0;transform:scale(.4)}}.match3__tile--beer{background:linear-gradient(180deg,#f8cb4f,#b66c25)}.match3__tile--wine{background:linear-gradient(180deg,#c94b7d,#702443)}.match3__tile--shot{background:linear-gradient(180deg,#8edfff,#2b69a8)}.match3__tile--cheese{background:linear-gradient(180deg,#ffe384,#ce8f31)}.match3__tile--tomato{background:linear-gradient(180deg,#ff7157,#b53031)}.match3__tile--drumstick{background:linear-gradient(180deg,#ffb16f,#8f4e2f)}.match3__boom-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;z-index:5;animation:boom-fade 3s ease-out forwards}.match3__boom-image{width:min(76vw,340px);aspect-ratio:1 / 1;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 18px #10051fbb)}.match3__boom-text{position:absolute;margin:0;width:min(72vw,300px);text-align:center;color:#d7d7d7;font-size:clamp(13px,4vw,22px);line-height:1.25;text-shadow:3px 3px 0 #220a3f,-2px 0 0 #220a3f,2px 0 0 #220a3f,0 -2px 0 #220a3f,0 2px 0 #220a3f;animation:boom-text-pop 3s ease-out forwards}@keyframes boom-fade{0%{opacity:0;transform:scale(.65)}20%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(1.02)}to{opacity:0;transform:scale(1.08)}}@keyframes boom-text-pop{0%{opacity:0;transform:scale(.72)}22%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.event-box{border:3px dashed #41e9ff;border-radius:8px;padding:10px;font-size:9px;line-height:1.9;background:linear-gradient(180deg,#1a1346,#120d35);box-shadow:inset 0 0 0 2px #7f6cff33}.event-box p{margin:0}.victory-score{text-align:center;color:#ffe46f;font-size:clamp(13px,4.2vw,18px);text-shadow:2px 2px 0 #25124f,0 0 12px #ffdc6a66}.victory-beers,.final-cats{width:min(100%,360px);justify-self:center;border:3px solid #3e2f9f;border-radius:8px;background:linear-gradient(180deg,#20165b,#150f3d);box-shadow:inset 0 0 0 2px #8e73ff44,0 0 16px #6d52ff55}.leaderboard{border:3px solid #3e2f9f;border-radius:8px;background:linear-gradient(180deg,#1a1346,#120d35);box-shadow:inset 0 0 0 2px #7f6cff33;overflow:hidden}.leaderboard__head,.leaderboard__row{display:grid;grid-template-columns:38px 1fr 74px;gap:8px;align-items:center;padding:10px;font-size:10px}.leaderboard__head{color:#ffe46f;background:#2f2482;text-transform:uppercase;border-bottom:2px solid #5d45d1;font-size:9px}.leaderboard__row{color:#e9edff;border-bottom:1px solid #2f2482}.leaderboard__row:last-child{border-bottom:0}.leaderboard__row span:last-child,.leaderboard__head span:last-child{text-align:right}.leaderboard__row span:nth-child(2),.leaderboard__row span:nth-child(3){font-size:12px;line-height:1.2}.leaderboard__row span:nth-child(2){line-height:1.35}@media (max-width: 420px){.screen{padding:12px}.screen__header{gap:8px}.screen__header-beers{width:clamp(60px,20vw,90px)}.title-screen{gap:6px;min-height:clamp(460px,78dvh,540px)}.title-screen__sparkles{height:clamp(190px,37dvh,230px)}.title-screen__sun{top:46px;width:96px;height:50px}.title-screen__banner{margin-top:clamp(98px,22dvh,126px);min-height:92px;padding:8px 7px}.title-screen__title{font-size:clamp(24px,8.6vw,34px)}.title-screen__subtitle{font-size:8px}.title-screen__note{font-size:7px;line-height:1.45}.pixel-btn{font-size:10px;padding:7px 8px}.pixel-btn--start{font-size:11px;padding-top:8px;padding-bottom:8px}.title-screen .pixel-btn--ghost{min-width:130px}.title-screen__banner{margin-top:clamp(98px,22dvh,126px)}.hero-card{grid-template-columns:64px 1fr;row-gap:8px}.hero-card__avatar{width:56px;height:56px;font-size:26px}.hero-card__title{font-size:12px}.hero-card__description{font-size:8px}.hero-card__pick{grid-column:1 / -1;justify-self:end;font-size:8px;padding:6px 8px}.victory-beers,.final-cats{width:min(100%,300px)}.leaderboard__head,.leaderboard__row{grid-template-columns:32px 1fr 66px;padding:8px;font-size:9px}.leaderboard__head{font-size:8px}.leaderboard__row span:nth-child(2),.leaderboard__row span:nth-child(3){font-size:10px}}