/* 🎲 lelz Party */
/* ---------- Handy ---------- */
.hud { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 19; display: flex; justify-content: space-between; align-items: center; max-width: 560px; margin: 0 auto; padding: 0 16px; }
.hud:empty { display: none; }
.hud-me { display: flex; align-items: center; gap: 10px; background: var(--card); box-shadow: var(--shadow); border-radius: 99px; padding: 4px 14px 4px 4px; border: 2px solid var(--c); } .hud-me b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hud-r { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pp-list { display: grid; gap: 8px; margin: 16px 0; }
.pp-row { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow); border-left: 5px solid var(--c); animation: up .45s var(--d) var(--ease) both; }
.pp-row b { flex: 1; } .pp-row small { font-size: 11px; font-weight: 700; background: var(--fill); padding: 3px 8px; border-radius: 99px; }
.sw-row { display: flex; justify-content: center; gap: 10px; margin: 6px 0 16px; } .sw:disabled { opacity: .2; }
.seg-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; } .seg-row span { color: var(--text-2); font-weight: 600; margin-right: 6px; }
.seg-b { border: 0; background: var(--fill); border-radius: 12px; padding: 10px 16px; font-weight: 800; cursor: pointer; } .seg-b.on { background: var(--ink); color: var(--paper); }
.roll-me { text-align: center; padding: 10px 0; }
.dice-btn { display: grid; justify-items: center; gap: 16px; margin: 26px auto 14px; border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 17px; }
.dice-btn span { color: var(--text-2); animation: blink 1.6s ease-in-out infinite; }
.dice { width: 140px; height: 140px; border-radius: 34px; background: linear-gradient(145deg, #fff, #e8e8ed); box-shadow: 0 20px 40px rgba(0,0,0,.18), inset 0 -6px 0 rgba(0,0,0,.06); position: relative; display: grid; place-items: center; }
.dice i { width: 26px; height: 26px; border-radius: 50%; background: #1d1d1f; box-shadow: -40px -40px 0 #1d1d1f, 40px 40px 0 #1d1d1f, 40px -40px 0 #1d1d1f, -40px 40px 0 #1d1d1f; }
.dice.spin { animation: diceIdle 2.4s ease-in-out infinite; }
@keyframes diceIdle { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-10px); } }
.dice-btn.rolling .dice { animation: diceRoll .65s cubic-bezier(.3,.1,.3,1) both; }
@keyframes diceRoll { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(400deg) scale(.8) translateY(-40px); } 100% { transform: rotate(720deg) scale(1.1); } }
.dice-big { width: 120px; height: 120px; margin: 0 auto; border-radius: 30px; background: #fff; color: #1d1d1f; display: grid; place-items: center; font-size: 64px; font-weight: 900; box-shadow: 0 20px 40px rgba(0,0,0,.18); animation: pop .7s var(--spring) both; }
.wait-av { display: grid; place-items: center; } .wait-av .av { box-shadow: 0 0 0 5px var(--c); animation: bob 2s ease-in-out infinite; }
.msg-pill { display: inline-block; background: var(--card); box-shadow: var(--shadow); padding: 10px 16px; border-radius: 16px; font-weight: 600; animation: up .5s .4s var(--ease) both; }
.rank { display: grid; gap: 6px; margin: 16px 0; } .rk-row { display: grid; grid-template-columns: 26px 30px 1fr auto auto; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); border-left: 4px solid var(--c); }
.rk-row.me { box-shadow: 0 0 0 2px var(--c), var(--shadow); } .rk-row span { font-weight: 800; color: var(--text-2); } .rk-row small { color: var(--text-2); font-size: 13px; } .rk-row em { font-style: normal; font-weight: 800; color: var(--green); min-width: 26px; text-align: right; }
.mg-intro { text-align: center; padding: 10px 0; } .mg-emoji { font-size: 90px; animation: pop .7s var(--spring) both; } .mg-k { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--pink); }
.mg-intro h1 { margin: 4px 0 10px; font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -.03em; } .mg-rules { font-size: 17px; line-height: 1.45; margin: 0 0 14px; }
.mg-prizes { display: inline-block; background: var(--fill); padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; margin-bottom: 18px; }
.mg-stage { min-height: 70dvh; display: grid; align-content: center; user-select: none; -webkit-user-select: none; }
.countdown { text-align: center; } .cd-emoji { font-size: 60px; } .cd-num { font-size: 140px; font-weight: 900; line-height: 1; animation: cdPop .9s var(--spring) both; } .countdown p { font-weight: 700; color: var(--text-2); }
@keyframes cdPop { 0% { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: .4; } }
.tmb { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); border-radius: 5px; animation: tmShrink linear forwards; transform-origin: left; }
@keyframes tmShrink { to { transform: scaleX(0); } }
.react-pad { width: 100%; height: 62dvh; border: 0; border-radius: 30px; display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; cursor: pointer; transition: background .08s; touch-action: manipulation; }
.react-pad b { font-size: 46px; font-weight: 900; } .react-pad small { font-size: 16px; opacity: .8; }
.react-pad.wait { background: #ff3b30; } .react-pad.go { background: #30d158; } .react-pad.fail { background: #3a3a3c; }
.tap-count { text-align: center; font-size: 90px; font-weight: 900; font-variant-numeric: tabular-nums; margin: 10px 0; }
.tap-btn { display: block; width: 76vw; max-width: 340px; aspect-ratio: 1; margin: 0 auto; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9f0a, #ff375f); color: #fff; font-size: 40px; font-weight: 900; box-shadow: 0 16px 0 #c41f45, 0 30px 50px rgba(255,55,95,.4); cursor: pointer; touch-action: manipulation; }
.tap-btn.hit { animation: tapHit .12s ease-out; } @keyframes tapHit { 50% { transform: translateY(10px) scale(.97); box-shadow: 0 6px 0 #c41f45, 0 10px 20px rgba(255,55,95,.4); } }
.sw-time { text-align: center; font-size: 100px; font-weight: 900; font-variant-numeric: tabular-nums; margin: 30px 0 10px; transition: filter .3s, opacity .3s; } .sw-time.hidden { filter: blur(14px); opacity: .5; }
.stop-btn { margin-top: 20px; font-size: 26px; padding: 26px; background: #ff3b30; }
.score-chip { justify-self: center; margin: 8px auto; background: var(--ink); color: var(--paper); font-weight: 800; padding: 6px 16px; border-radius: 99px; font-size: 18px; width: fit-content; }
.color-word { text-align: center; font-size: 64px; font-weight: 900; margin: 26px 0; } .color-word.pop { animation: pop .3s var(--spring); }
.color-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .color-btns button { border: 0; border-radius: 20px; padding: 26px 10px; font-size: 22px; font-weight: 800; background: var(--card); box-shadow: var(--shadow), inset 0 -6px 0 var(--c); color: var(--text); cursor: pointer; touch-action: manipulation; }
.color-btns button:active { transform: scale(.95); }
.shake { animation: shake .3s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.math-q { text-align: center; font-size: 60px; font-weight: 900; margin: 24px 0; font-variant-numeric: tabular-nums; }
.math-o { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .math-o button { border: 0; border-radius: 20px; padding: 24px; font-size: 32px; font-weight: 800; background: var(--card); box-shadow: var(--shadow); cursor: pointer; touch-action: manipulation; } .math-o button.wrong { background: var(--red); color: #fff; }
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 360px; margin: 16px auto 0; width: 100%; }
.mem-grid button { aspect-ratio: 1; border: 0; border-radius: 22px; background: color-mix(in srgb, var(--c) 30%, var(--card)); cursor: pointer; transition: all .12s; touch-action: manipulation; } .mem-grid button.lit { background: var(--c); transform: scale(1.06); box-shadow: 0 0 30px var(--c); }
.bonus { display: grid; gap: 6px; justify-items: center; } .bonus span { background: var(--card); box-shadow: var(--shadow); padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- TV ---------- */
.party-tv .pt-board { position: relative; z-index: 1; height: 100vh; display: grid; grid-template-columns: 1fr 34vh; gap: 3vh; padding: 4vh 4vh; }
.pring { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 1vh; height: 92vh; aspect-ratio: 9 / 7; justify-self: center; }
.sp { border-radius: 1.6vh; background: var(--c); display: grid; place-items: center; font-size: 3.6vh; box-shadow: inset 0 -.8vh 0 rgba(0,0,0,.25), 0 1vh 2vh rgba(0,0,0,.3); animation: pop .5s var(--d) var(--spring) both; }
.sp-start { background: repeating-conic-gradient(#fff 0 25%, #1c1c1e 0 50%) 50% / 2.4vh 2.4vh; } .sp-start span { background: rgba(0,0,0,.6); border-radius: 1vh; padding: .3vh .8vh; }
.sp.bump { animation: bump .4s var(--spring); } @keyframes bump { 50% { transform: scale(1.18) translateY(-.8vh); filter: brightness(1.4); } }
.pring .center { grid-row: 2 / 7; grid-column: 2 / 9; margin: 2vh; border-radius: 4vh; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; align-content: center; gap: 1.6vh; text-align: center; backdrop-filter: blur(10px); }
.ce-k { font-size: 2vh; letter-spacing: .25em; text-transform: uppercase; font-weight: 800; color: #a1a1a6; }
.ce-av .av { width: 20vh; height: 20vh; font-size: 8vh; box-shadow: 0 0 0 .8vh var(--c), 0 3vh 6vh rgba(0,0,0,.5); animation: pop .6s var(--spring) both; }
.pring .center h2 { margin: 0; font-size: 6vh; letter-spacing: -.03em; } .ce-dice { display: flex; align-items: center; gap: 2vh; color: #a1a1a6; font-size: 2.4vh; } .ce-dice .dice { width: 7vh; height: 7vh; border-radius: 1.8vh; } .ce-dice .dice i { width: 1.3vh; height: 1.3vh; box-shadow: -2vh -2vh 0 #1d1d1f, 2vh 2vh 0 #1d1d1f, 2vh -2vh 0 #1d1d1f, -2vh 2vh 0 #1d1d1f; }
.roll-num { font-size: 26vh; font-weight: 900; line-height: .9; background: linear-gradient(180deg, #fff, #ffd60a); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rollIn .9s var(--spring) both; }
@keyframes rollIn { 0% { transform: rotate(-200deg) scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ce-msg { font-size: 3vh; font-weight: 700; background: rgba(255,255,255,.1); padding: 1.4vh 3vh; border-radius: 99px; animation: up .6s var(--ease) both; max-width: 80%; }
.ce-logo { font-size: 16vh; animation: bob 3s ease-in-out infinite; }
.pawns { position: absolute; inset: 0; pointer-events: none; }
.pawn { position: absolute; transform: translate(-50%, -50%); transition: left .38s cubic-bezier(.3,1.4,.6,1), top .38s cubic-bezier(.3,1.4,.6,1); z-index: 3; }
.pawn .av { width: 6.4vh; height: 6.4vh; font-size: 2.6vh; box-shadow: 0 0 0 .5vh var(--c), 0 1.2vh 2vh rgba(0,0,0,.6); }
.pawn.active { z-index: 4; } .pawn.active .av { animation: hop .7s ease-in-out infinite; box-shadow: 0 0 0 .6vh var(--c), 0 0 3vh var(--c); }
.star-mark { position: absolute; transform: translate(-50%, -110%); font-size: 6vh; z-index: 2; filter: drop-shadow(0 0 2vh rgba(255,214,10,.9)); animation: starBob 1.6s ease-in-out infinite; transition: left .8s var(--ease), top .8s var(--ease); }
@keyframes starBob { 50% { transform: translate(-50%, -125%) rotate(12deg) scale(1.1); } }
.side { display: grid; align-content: center; gap: 1.2vh; } .sd-h { font-size: 2vh; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: #a1a1a6; }
.sd-row { display: flex; align-items: center; gap: 1.2vh; padding: 1vh 1.4vh; border-radius: 2vh; background: rgba(255,255,255,.06); border-left: .6vh solid var(--c); transition: all .4s var(--ease); }
.sd-row.on { background: color-mix(in srgb, var(--c) 30%, transparent); transform: scale(1.04); } .sd-pl { font-weight: 900; font-size: 2.2vh; color: #a1a1a6; width: 2vh; }
.sd-row div { display: grid; } .sd-row b { font-size: 2.2vh; } .sd-row small { font-size: 1.9vh; color: #d1d1d6; } .sd-row em { font-style: normal; color: #ffd60a; font-weight: 800; margin-right: 1vh; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 1vh 1.6vh; margin-top: 2vh; color: #a1a1a6; font-size: 1.7vh; } .sd-legend span { display: flex; align-items: center; gap: .6vh; } .sd-legend i { width: 1.6vh; height: 1.6vh; border-radius: .4vh; background: var(--c); }
.pt-lobby { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6vh; align-items: center; padding: 0 4vh; }
.pl-left { display: grid; justify-items: center; gap: 2vh; text-align: center; } .pl-dice { display: flex; gap: 4vh; } .pl-dice .dice { width: 13vh; height: 13vh; border-radius: 3vh; } .pl-dice .dice i { width: 2.4vh; height: 2.4vh; box-shadow: -3.6vh -3.6vh 0 #1d1d1f, 3.6vh 3.6vh 0 #1d1d1f, 3.6vh -3.6vh 0 #1d1d1f, -3.6vh 3.6vh 0 #1d1d1f; } .pl-dice .d2 { animation-delay: -1.2s; }
.pl-left h1 { margin: 0; font-size: 13vh; font-weight: 900; font-style: italic; letter-spacing: -.05em; line-height: 1; background: linear-gradient(90deg, #ffd60a, #ff9f0a, #ff375f, #bf5af2); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
.pl-left > p { margin: 0; font-size: 2.6vh; color: #a1a1a6; letter-spacing: .1em; }
.pl-players { display: flex; flex-wrap: wrap; gap: 3vh; justify-content: center; } .plp { display: grid; justify-items: center; gap: 1vh; animation: pop .6s var(--d) var(--spring) both; } .plp .av { width: 14vh; height: 14vh; font-size: 6vh; box-shadow: 0 0 0 .7vh var(--c), 0 2vh 4vh rgba(0,0,0,.5); } .plp b { font-size: 2.6vh; }
.ov.mg { background: rgba(5,5,7,.88); }
.mgo { text-align: center; display: grid; justify-items: center; gap: 1.6vh; max-width: 80vw; animation: cardIn .8s var(--spring) both; }
.mgo-k { font-size: 2.6vh; letter-spacing: .3em; text-transform: uppercase; font-weight: 900; color: #ff375f; } .mgo-emoji { font-size: 20vh; animation: pop .8s .1s var(--spring) both, bob 2s 1s ease-in-out infinite; }
.mgo h1 { margin: 0; font-size: 9vh; font-weight: 900; font-style: italic; letter-spacing: -.04em; } .mgo p { margin: 0; font-size: 3vh; color: #d1d1d6; max-width: 60vw; line-height: 1.4; } .mgo small { color: #a1a1a6; font-size: 2vh; }
.mgo-ready { display: flex; gap: 2vh; margin-top: 2vh; } .mgo-ready span { opacity: .3; transition: all .4s var(--spring); } .mgo-ready span.ok { opacity: 1; transform: scale(1.1); } .mgo-ready .av { width: 9vh; height: 9vh; box-shadow: 0 0 0 .5vh var(--c); }
.mgo.play { width: 80vw; } .mgo-top { display: grid; gap: 1.4vh; width: 100%; font-size: 3vh; font-weight: 800; } .mgo-bar { height: 1.2vh; border-radius: 1vh; background: rgba(255,255,255,.1); overflow: hidden; } .mgo-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #30d158, #ffd60a); }
.mgo-cd { font-size: 0; font-weight: 900; height: 0; transition: all .3s; } .mgo-cd.on { font-size: 24vh; height: auto; animation: cdPop 1s var(--spring) infinite; }
.mgo-live { display: grid; gap: 1.6vh; width: 100%; margin-top: 3vh; } .ml { display: grid; grid-template-columns: 7vh 1fr 8vh 4vh; align-items: center; gap: 2vh; } .ml .av { width: 7vh; height: 7vh; box-shadow: 0 0 0 .4vh var(--c); }
.ml-bar { height: 3vh; border-radius: 2vh; background: rgba(255,255,255,.08); overflow: hidden; } .ml-bar i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 2vh; transition: width .4s var(--ease); }
.ml b { font-size: 3.4vh; font-variant-numeric: tabular-nums; } .ml-ok { font-size: 3.4vh; color: #30d158; opacity: 0; transform: scale(.4); transition: all .4s var(--spring); } .ml.done .ml-ok { opacity: 1; transform: none; }
.podium { display: grid; gap: 1.2vh; width: 60vw; margin-top: 2vh; } .pd { display: grid; grid-template-columns: 6vh 7vh 1fr auto 10vh; align-items: center; gap: 2vh; padding: 1.2vh 2vh; border-radius: 2vh; background: rgba(255,255,255,.06); border-left: .7vh solid var(--c); animation: up .5s var(--d) var(--ease) both; text-align: left; }
.pd-pl { font-size: 4vh; } .pd .av { width: 7vh; height: 7vh; } .pd b { font-size: 3vh; } .pd small { color: #a1a1a6; font-size: 2.2vh; } .pd em { font-style: normal; color: #30d158; font-weight: 900; font-size: 2.8vh; text-align: right; }
.fin-rank { display: grid; gap: .8vh; margin-top: 2vh; } .fin-rank span { font-size: 2.6vh; font-weight: 700; border-left: .6vh solid var(--c); padding-left: 1.4vh; text-align: left; } .fin-bonus { color: #ffd60a; font-size: 2.2vh; margin-top: 1vh; }