.online-page,.mode-page,.matchmaking-page{max-width:560px;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}.online-modes{display:grid;gap:21px;margin:24px 0 20px}.mode-button{display:grid;grid-template-columns:100px 1fr 30px;gap:12px;align-items:center;text-align:start;background:#f9e8cc;border:2.5px solid var(--ink);border-radius:23px;box-shadow:0 6px 0 #c9b48f;padding:14px 15px;transition:transform .2s,box-shadow .2s}.mode-button:hover{transform:translateY(-2px)}.mode-button:active{transform:translateY(4px);box-shadow:0 2px 0 #c9b48f}.mode-1{background:#fff3d7;box-shadow:0 6px 0 #d6c39c}.mode-2{background:#e7dded;box-shadow:0 6px 0 #c0a9ce}.mode-icon{width:100px;height:78px}.mode-button b{display:block;font:600 38px/1.2 Fredoka,sans-serif}.mode-button small{display:flex;align-items:center;gap:5px;font-size:12px;color:#596452;margin-top:8px;white-space:nowrap}.online-dot{height:6px;width:6px;display:inline-block;border-radius:50%;background:var(--teal)}.mode-arrow{justify-self:end;transform:rotate(180deg)}.mode-arrow svg{width:23px;height:23px}.online-other{display:grid;gap:17px;margin-top:auto;padding-top:25px}.online-other>.btn{width:100%}.match-rule{text-align:center;font-size:13px;line-height:1.5;color:#737a68;margin:5px 0}.mode-intro{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:25px 0}.mode-intro .mode-icon{width:210px;height:170px}.mode-intro p{color:#737a68}.mode-actions{display:grid;gap:20px}.search-title{text-align:center;font-size:24px;margin:18px 0 26px}.match-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;margin:auto 0;align-items:start}.match-seat{display:flex;flex-direction:column;align-items:center;min-width:0;gap:9px;text-align:center;direction:rtl;animation:match-arrive .45s ease-out}.match-photo,.search-avatar{width:94px;height:94px;border:2.5px solid var(--ink);border-radius:28px;background:#f5dab7;display:grid;place-items:center;box-shadow:0 5px 0 #25283030;position:relative}.match-photo img{width:100%;height:100%;object-fit:cover;border-radius:25px}.match-photo>span{font-size:38px;font-weight:800}.match-me .match-photo{border-color:var(--teal)}.match-seat>strong{font-size:17px;overflow-wrap:anywhere;line-height:1.3}.match-seat>small{font-size:13px;color:#717866}.match-seat small b{font:500 15px Fredoka,sans-serif;color:var(--teal)}.search-avatar{background:#faf5e3;border:2px dashed #b4b49d;box-shadow:none}.search-avatar svg{width:45px;height:45px;animation:search-scan 2.4s ease-in-out infinite;color:var(--teal)}.empty-match-seat strong{color:#8e927d;font-weight:400;font-size:14px}.empty-match-seat small{letter-spacing:4px}.seats-6{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px}.seats-6 .match-photo,.seats-6 .search-avatar{width:76px;height:76px;border-radius:23px}.seats-6 .match-photo img{border-radius:20px}.seats-6 .match-seat>strong{font-size:14px}.friend-slot>span{width:94px;height:94px;border:2px dashed #b4b49d;border-radius:28px;display:grid;place-items:center;font-size:35px;color:#a3aa95}.search-clock,.match-countdown{text-align:center;margin:25px 0 16px}.search-clock small,.match-countdown small{display:block;color:#737a68;margin-bottom:7px}.search-clock strong{font:500 29px Fredoka,sans-serif;font-variant-numeric:tabular-nums;color:var(--teal)}.match-countdown strong{font:600 48px Fredoka,sans-serif;color:var(--teal)}.match-bottom{margin-top:auto;padding-top:25px;text-align:center;display:grid;gap:18px}.party-invite{margin:30px 0 15px;text-align:center}.party-invite h3{font-size:17px;margin-bottom:20px}.party-invite .btn{font-size:16px;padding-inline:8px}.fixed-goal{display:flex;justify-content:space-between;align-items:center;background:#fff3d7;border-radius:15px;padding:15px 18px;margin:15px 0}.fixed-goal strong{font:600 26px Fredoka,sans-serif;color:var(--teal)}@keyframes search-scan{0%,100%{transform:translate(-6px,0) rotate(-12deg)}50%{transform:translate(6px,3px) rotate(10deg)}}@keyframes match-arrive{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(max-height:700px){.online-modes{gap:15px;margin-top:10px}.mode-button{padding-block:8px}.mode-icon{height:64px}.search-title{margin:5px 0 20px}.match-photo,.search-avatar,.friend-slot>span{width:75px;height:75px;border-radius:23px}.match-photo img{border-radius:20px}.match-seats{gap:16px}.seats-6 .match-photo,.seats-6 .search-avatar{width:62px;height:62px;border-radius:20px}.seats-6 .match-photo img{border-radius:17px}.match-bottom{padding-top:15px;gap:10px}.search-clock,.match-countdown{margin:18px 0 8px}.match-seat{gap:6px}.search-title{font-size:22px}.match-countdown strong{font-size:37px}}@media(max-width:350px){.mode-button{grid-template-columns:75px 1fr 20px;gap:8px;padding-inline:10px}.mode-button .mode-icon{width:75px}.mode-button b{font-size:32px}.match-seat>strong{font-size:15px}.seats-6 .match-seat>strong{font-size:12px}}@media(prefers-reduced-motion:reduce){.search-avatar svg,.match-seat{animation:none}.mode-button{transition:none}}
/* The search mark is a shuffling Flip 7 deck, with no surrounding tile. */
.search-avatar{background:none;border:0;box-shadow:none}.search-avatar>svg.card-search-art{width:110%;height:110%;animation:none;overflow:visible}.search-card{transform-origin:60px 60px}.search-card-left{animation:search-shuffle-left 2.5s ease-in-out infinite}.search-card-right{animation:search-shuffle-right 2.5s ease-in-out infinite}.search-card-front{animation:search-shuffle-front 2.5s ease-in-out infinite}.search-glint{transform-origin:97px 26px;animation:search-twinkle 2.5s ease-in-out infinite}.search-dot{animation:search-dot-bounce 1.2s ease-in-out infinite}.search-dot.two{animation-delay:.15s}.search-dot.three{animation-delay:.3s}.search-cups{display:flex;align-items:center;justify-content:center;gap:5px;direction:ltr}.search-cups svg{width:17px;height:17px;color:#ba892e}.empty-match-seat>small{display:none}.matchmaking-page .page-top{margin-bottom:15px}@keyframes search-shuffle-left{0%,100%{transform:rotate(-13deg) translateX(-5px)}50%{transform:rotate(-26deg) translate(-12px,-4px)}}@keyframes search-shuffle-right{0%,100%{transform:rotate(13deg) translateX(3px)}50%{transform:rotate(26deg) translate(10px,-3px)}}@keyframes search-shuffle-front{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(5deg)}}@keyframes search-twinkle{0%,100%{opacity:.4;transform:scale(.75) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(90deg)}}@keyframes search-dot-bounce{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}@media(max-height:650px){.matchmaking-page{padding-top:12px;padding-bottom:20px}.matchmaking-page .page-top{margin-bottom:7px}.search-title{margin-bottom:15px}.match-bottom{padding-top:8px}.match-seats{gap:14px 10px}}@media(prefers-reduced-motion:reduce){.search-card,.search-glint,.search-dot{animation:none}.search-card-left{transform:rotate(-13deg) translateX(-5px)}.search-card-right{transform:rotate(13deg) translateX(3px)}}
.online-page{max-width:820px}.online-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:24px}.mode-button{display:flex;flex-direction:column;justify-content:center;gap:3px;aspect-ratio:1;min-width:0;padding:10px;text-align:center}.mode-button .mode-icon{width:92px;height:67px}.mode-button b{font-size:33px}.mode-button small{justify-content:center;font-size:12px;margin-top:5px}.mode-button.mode-2{grid-column:1/-1;aspect-ratio:auto;min-height:110px;flex-direction:row;gap:25px}.mode-button.mode-2 .mode-icon{height:82px;width:115px}.online-other{width:100%;max-width:520px;align-self:center}@media(min-width:620px){.online-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:50px}.mode-button,.mode-button.mode-2{grid-column:auto;flex-direction:column;aspect-ratio:1;gap:10px}.mode-button .mode-icon,.mode-button.mode-2 .mode-icon{width:120px;height:88px}.mode-button b{font-size:38px}.mode-button small{font-size:14px}}@media(max-width:350px){.online-modes{gap:13px}.mode-button .mode-icon{height:52px;width:72px}.mode-button b{font-size:28px}.mode-button small{font-size:11px}.mode-button.mode-2{min-height:100px}}
.room-setup .page-top{margin-bottom:18px}.room-setup .setup-illustration{height:44px;margin:0 auto 12px}.room-setup .setup-illustration>svg{width:44px;height:44px}.room-setup .setup-illustration>span{font-size:21px;transform:translate(-35px,-15px)}.room-setup .form-panel>.btn{margin-top:18px}.room-setup{padding-bottom:22px}@media(max-height:750px){.room-setup{padding:12px 24px 18px}.room-setup .page-top{margin-bottom:10px}.room-setup .setup-illustration{height:32px;margin:0 auto 8px}.room-setup .setup-illustration>svg{width:34px;height:34px}.room-setup label{font-size:16px;margin:10px 0 5px}.room-setup input{min-height:42px;padding:10px;font-size:17px}.room-setup .stepper{padding:5px}.room-setup .stepper button{height:32px;width:42px}.room-setup .stepper strong{font-size:25px}.room-setup .segments{padding:4px;margin-bottom:8px}.room-setup .segments button{padding:9px 5px;font-size:16px}.room-setup .lock-toggle{padding:12px 0;font-size:16px}.room-setup .form-panel>.btn{min-height:46px;padding:10px;margin-top:16px;font-size:20px}}
.search-cups svg{width:22px;height:22px}
@media(max-height:650px){.room-setup:has(input[name="pin"]):has(input[name="target"]) .setup-illustration{display:none}}

@keyframes search-gentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes search-soft-dot{0%,100%{opacity:.35}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.search-card-front{animation:search-gentle 3s ease-in-out infinite}.search-dot{animation:search-soft-dot 2s ease-in-out infinite}.search-dot.two{animation-delay:.25s}.search-dot.three{animation-delay:.5s}}
@media(prefers-reduced-motion:reduce){.search-card-front{animation:search-gentle 3s ease-in-out infinite!important}.search-dot{animation:search-soft-dot 2s ease-in-out infinite!important}.search-dot.two{animation-delay:.25s!important}.search-dot.three{animation-delay:.5s!important}}