*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Estedad,Tahoma,sans-serif;color:#101c4b}
body{background:linear-gradient(135deg,#e8f3ff 0%,#eae9fb 55%,#f5e6f7 100%)}
button,input{font:inherit}
button{cursor:pointer}
#matchiPreview{min-height:100dvh}
.preview-stage{min-height:100dvh;display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;padding:14px 28px;direction:rtl}
.preview-nav{width:220px;height:min(800px,calc(100dvh - 28px));overflow-y:auto;background:#fffffff0;border:1px solid #d5ddf4;border-radius:24px;padding:15px;box-shadow:0 18px 54px #12205518;scrollbar-width:thin}
.preview-nav-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;padding:0 3px 12px;border-bottom:1px solid #e7ebf7;font-size:15px}
.preview-nav-head img{width:44px;height:44px;object-fit:contain}
.preview-nav-head b{flex:1}
.nav-close{display:none;border:0;background:transparent;font-size:24px;color:#5f6b91}
.nav-group{display:grid;gap:3px;margin:8px 0 15px}
.nav-group>small{padding:4px 9px;color:#7a83a3;font-size:10px;font-weight:800}
.page-link{display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:13px;padding:8px 9px;background:transparent;color:#465273;text-align:right;font-size:12px;font-weight:750}
.page-link img{width:40px;height:40px;object-fit:contain}
.page-link.active{background:linear-gradient(90deg,#e0f8ff,#eff3ff);color:#1661c8}
.device-stage{display:flex;align-items:center;justify-content:center;min-width:0}
.phone-frame{width:min(390px,100%);height:min(800px,calc(100dvh - 24px));overflow:hidden;border-radius:32px;border:5px solid #fff;background:#e9ecfb;box-shadow:0 24px 70px #12163a30}
.phone-app{height:100%;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,#e8f3ff,#eae9fb 60%,#f5e6f7)}
.app-header{height:72px;flex:0 0 72px;margin:8px 9px 4px;padding:4px 10px;display:flex;align-items:center;justify-content:space-between;border:1px solid #d5ddf4;border-radius:24px;background:#ffffffc9;box-shadow:0 8px 24px #18225b0a}
.user-chip,.coin-chip{display:flex;align-items:center;gap:6px;border:1px solid #d5ddf4;border-radius:16px;background:#fff;padding:5px 8px;color:#101c4b;font-weight:800;font-size:11px}
.user-chip img{width:40px;height:40px;border-radius:0;object-fit:contain;background:transparent}
.coin-chip img{width:40px;height:40px;object-fit:contain}
.app-logo img{width:68px;height:68px;object-fit:contain}
.phone-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:4px 15px 18px;background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),url('/static/halls/halls-bg.jpg');background-size:cover;background-position:center top}
.phone-content::-webkit-scrollbar{display:none}
.app-page{min-height:100%;animation:screen-in .18s ease}
.app-page[hidden]{display:none!important}
.entry-brand{display:grid;justify-items:center;margin:8px 0 13px}
.entry-brand img{width:98px;height:98px;object-fit:contain}
.entry-brand h1{margin:0;color:#101c4b;font-size:20px;font-weight:900}
.matchi-panel{padding:15px;background:#ffffffd9;border:1px solid #d5ddf4;border-radius:20px;box-shadow:0 9px 28px #1220550c}
.auth-panel{padding:12px}
.auth-tabs,.history-tabs{display:flex;gap:4px;padding:4px;border:1px solid #d5ddf4;border-radius:17px;background:#f4f6ff}
.auth-tabs button,.history-tabs button{flex:1;min-height:39px;border:0;border-radius:13px;background:transparent;color:#5f6b91;font-size:12px;font-weight:800}
.auth-tabs button.selected,.history-tabs button.selected{background:linear-gradient(100deg,#70e0f5,#05beea);color:#101c4b;box-shadow:0 5px 14px #05beea30}
.auth-form{display:grid;gap:10px;margin-top:14px}
.auth-form[hidden]{display:none!important}
.auth-form label,.settings-form>label{display:grid;gap:5px;color:#101c4b;font-size:11px;font-weight:800}
.auth-form input,.settings-form input,.chat-compose input{height:44px;width:100%;border:1px solid #d5ddf4;border-radius:14px;padding:0 12px;background:#fff;color:#101c4b;outline:none}
.auth-form input:focus,.settings-form input:focus{border-color:#05beea;box-shadow:0 0 0 3px #05beea20}
.avatar-picker-label{font-size:11px;font-weight:850;margin-top:2px}
.avatar-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.avatar-choice{border:2px solid transparent;background:transparent;border-radius:0;padding:0;aspect-ratio:1;overflow:hidden}
.avatar-choice img{width:100%;height:100%;object-fit:contain}
.avatar-choice.selected{border:3px solid #f234a5;box-shadow:0 0 0 2px #f234a51c}
.matchi-action{width:100%;min-height:51px;border:0;border-radius:21px;background:linear-gradient(100deg,#74e3f6,#05beea);box-shadow:0 8px 19px #05beea2e;color:#101c4b;font-size:14px;font-weight:900}
.pink-action{background:linear-gradient(100deg,#ff7aca,#f322a2);color:white;box-shadow:0 8px 19px #f234a52e}
.page-title-row,.screen-heading,.question-toolbar,.section-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.page-title-row{margin:9px 2px 14px}
.page-title-row h1,.screen-heading h1{margin:0;font-size:18px;font-weight:900}
.icon-button,.back-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;padding:0}
.icon-button img,.back-button img{width:33px;height:33px;object-fit:contain}
.queue-card{margin:9px 0;padding:12px;border-radius:18px;border:1px solid #d5ddf4;background:#ffffffd9;box-shadow:0 8px 22px #1220550b}
.queue-title,.queue-meta,.queue-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.queue-title b{font-size:12px}
.queue-open{border-radius:99px;background:#e2f8f0;color:#188c68;padding:4px 8px;font-size:9px;font-weight:850}
.queue-meta{justify-content:flex-start;gap:16px;margin:10px 0;color:#5f6b91;font-size:10px}
.queue-meta span,.entry-fee,.lobby-settings-line span,.question-foot span{display:flex;align-items:center;gap:4px}
.queue-meta img,.entry-fee img,.lobby-settings-line img,.question-foot img{width:26px;height:26px;object-fit:contain}
.entry-fee{color:#7d5f00;font-size:11px;font-weight:900}
.small-action,.coin-pack button,.friend-row>button{border:0;border-radius:13px;padding:7px 17px;background:linear-gradient(100deg,#74e3f6,#05beea);color:#101c4b;font-size:11px;font-weight:900}
.game-mode-panel{margin-top:14px}
.game-mode-panel h2,.compact-leaderboard h2,.settings-list h2{margin:0 0 10px;font-size:14px}
.mode-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mode-pair button{min-width:0;display:grid;justify-items:center;gap:5px;border:1px solid transparent;border-radius:17px;padding:9px 5px;background:transparent;color:#101c4b;font-size:10px;font-weight:850}
.mode-pair img{width:82px;height:76px;object-fit:contain}
.join-code-button{width:100%;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d5ddf4;border-radius:15px;background:#fff;color:#1661c8;padding:10px;font-size:11px;font-weight:850}
.join-code-button img{width:29px;height:29px;object-fit:contain}
.screen-heading{height:48px;margin:1px 0 10px}
.screen-heading h1{flex:1;text-align:center}
.form-step{margin:11px 2px 8px;font-size:14px;font-weight:900}
.create-scroll{max-height:calc(100dvh - 250px);overflow-y:auto}
.create-modes .mode-card{min-height:140px}
.mode-card.active{border:2px solid #05beea;background:transparent}
.mode-card img{width:98px;height:88px}
.settings-form{display:grid;gap:9px;padding:11px}
.setting-row{height:48px;display:flex;align-items:center;gap:5px;padding:0 7px;border:1px solid #d5ddf4;border-radius:13px;background:#ffffffb8}
.setting-row img{width:30px;height:30px;object-fit:contain}
.setting-row span{flex:1;font-size:10px;font-weight:800}
.setting-row button{width:25px;height:25px;border:0;border-radius:9px;background:#e7f8ff;color:#1661c8;font-size:17px;line-height:1}
.setting-row b{min-width:61px;text-align:center;font-size:10px}
.sticky-action{position:sticky;bottom:0;padding:10px 0 2px;background:linear-gradient(transparent,#eae9fb 22%)}
.lobby-room-line{display:flex;align-items:center;justify-content:space-between;margin:4px 1px 12px}
.lobby-room-line>div{display:grid;gap:3px}
.lobby-room-line b{font-size:12px}
.lobby-room-line small{font-size:9px;color:#5f6b91}
.lobby-countdown{display:flex;align-items:center;gap:4px;color:#1661c8;font-size:12px;font-weight:900}
.lobby-countdown img{width:30px;height:30px}
.lobby-panel{padding:11px}
.lobby-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.lobby-panel-head h2{margin:0;font-size:13px}
.lobby-panel-head b{color:#1661c8;font-size:11px}
.player-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.player-tile{position:relative;display:grid;justify-items:center;gap:3px;padding:5px 2px;border-radius:14px;background:transparent;color:#101c4b;font-size:9px}
.player-tile img{width:60px;height:60px;object-fit:contain;border-radius:0;background:transparent}
.player-tile.ready img{outline:3px solid #20b981;outline-offset:1px}
.player-tile i{position:absolute;top:7px;right:9px;width:8px;height:8px;background:#20b981;border:1px solid white;border-radius:50%}
.more-players{width:100%;border:0;background:transparent;color:#1661c8;font-size:10px;font-weight:800;padding:8px}
.lobby-settings-line{display:flex;justify-content:space-around;margin:12px 0;color:#5f6b91;font-size:10px}
.matchi-action+.leave-link{margin-top:8px}
.leave-link{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:37px;border:0;border-radius:14px;background:transparent;color:#d94370;font-size:11px;font-weight:850}
.leave-link img{width:29px;height:29px;object-fit:contain}
.question-toolbar{height:42px;margin:0 0 8px;font-size:12px;font-weight:850}
.question-timer{display:flex;align-items:center;gap:3px;padding:5px 8px;border-radius:12px;background:#fff;color:#1661c8;font-size:11px;font-weight:900}
.question-timer img{width:29px;height:29px;object-fit:contain}
.question-progress{height:6px;border-radius:99px;background:#d5ddf4;overflow:hidden;margin-bottom:14px}
.question-progress i{display:block;height:100%;background:linear-gradient(90deg,#05beea,#f234a5);border-radius:99px}
.question-title{margin:0 2px 14px;font-size:17px;line-height:1.6;font-weight:900}
.question-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.picture-option{position:relative;min-width:0;overflow:hidden;padding:5px;border:2px solid #d5ddf4;border-radius:18px;background:#fff;color:#101c4b}
.picture-option img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px}
.picture-option span{position:absolute;bottom:9px;left:9px;min-width:25px;height:25px;display:grid;place-items:center;border-radius:9px;background:#fff;color:#1661c8;font-size:11px;font-weight:900;box-shadow:0 3px 8px #101c4b28}
.picture-option.selected{border:3px solid #f234a5;box-shadow:0 0 0 2px #f234a52e}
.question-foot{display:flex;align-items:center;justify-content:space-between;color:#5f6b91;font-size:10px;margin:12px 2px}
.stats-options .picture-option span{right:7px;left:auto;top:7px;bottom:auto;min-width:41px;background:#fffffff0}
.stats-options .picture-option.correct{border-color:#20b981}
.stats-options .picture-option.correct span{background:#20b981;color:white}
.my-rank{display:flex;align-items:center;gap:8px;padding:9px;margin:8px 0}
.my-rank>img{width:50px;height:50px;object-fit:contain;border-radius:0}
.my-rank>div{display:grid;gap:2px}
.my-rank small{font-size:9px;color:#5f6b91}
.my-rank b{font-size:12px}
.my-rank strong{margin-right:auto;color:#1661c8;font-size:12px}
.my-rank strong small{display:inline}
.compact-leaderboard{margin:10px 0;padding:11px}
.leader-row{height:41px;display:flex;align-items:center;gap:7px;border-top:1px solid #e8ebf6;font-size:10px}
.leader-row img{width:35px;height:35px;object-fit:contain;border-radius:0}
.leader-row i{width:22px;height:22px;display:grid;place-items:center;border-radius:8px;background:#f0f3fa;color:#5f6b91;font-style:normal;font-weight:900}
.leader-row i.gold{background:#ffe278;color:#725500}
.leader-row b{flex:1}
.leader-row strong{color:#1661c8}
.leader-row.you{background:#fbeaf5;border-radius:10px;padding:0 5px}
.result-head{display:grid;justify-items:center;text-align:center;padding:12px 0 8px}
.result-head img{width:68px;height:68px;object-fit:contain}
.result-head h1{margin:5px 0 1px;font-size:19px}
.result-head p{margin:0;color:#5f6b91;font-size:11px}
.result-score{text-align:center;padding:12px}
.result-avatar{width:76px;height:76px;margin:auto;border:0;border-radius:0;padding:0;background:transparent}
.result-avatar img{width:100%;height:100%;object-fit:contain;border-radius:15px}
.result-score>b{display:block;margin:4px 0}
.result-score>strong{display:block;color:#1661c8;font-size:23px}
.result-score>small{font-size:9px;color:#5f6b91}
.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.result-metrics span{display:grid;background:#f1f8ff;border-radius:11px;padding:6px}
.result-metrics b{font-size:13px}
.result-metrics small{font-size:8px;color:#5f6b91}
.profile-card{display:flex;align-items:center;gap:9px;padding:11px}
.profile-avatar{width:72px;height:72px;object-fit:contain;border-radius:0;background:transparent}
.profile-title{display:grid;gap:2px}
.profile-title b{font-size:16px}
.profile-title small{font-size:9px;color:#5f6b91}
.outline-action{display:flex;align-items:center;justify-content:center;gap:4px;margin-right:auto;border:1px solid #c9d7ed;border-radius:12px;background:#fff;color:#1661c8;padding:7px 9px;font-size:10px;font-weight:850}
.outline-action img{width:27px;height:27px;object-fit:contain}
.profile-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.profile-stat-grid>.matchi-panel,.profile-stat-grid>div{display:grid;justify-items:center;gap:2px;padding:9px 3px;text-align:center}
.profile-stat-grid b{font-size:17px;color:#1661c8}
.profile-stat-grid small{font-size:8px;color:#5f6b91}
.section-row{margin:13px 2px 7px}
.section-row h2{margin:0;font-size:13px}
.section-row button{border:0;background:transparent;color:#1661c8;font-size:10px}
.medal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.medal-grid>div{display:grid;justify-items:center;gap:2px;padding:7px 2px;border:1px solid #d5ddf4;border-radius:13px;background:#ffffffc9}
.medal-grid img{width:42px;height:42px;object-fit:contain}
.medal-grid small{font-size:7px;text-align:center;color:#5f6b91}
.profile-links{display:grid;margin-top:11px;border:1px solid #d5ddf4;border-radius:17px;overflow:hidden;background:#ffffffd9}
.profile-links button,.profile-link-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 10px;border:0;border-bottom:1px solid #e7ebf7;background:transparent;text-align:right;color:#101c4b;font-size:10px;font-weight:750}
.profile-links button:last-child{border-bottom:0}
.profile-links button>img:first-child,.profile-link-row>img:first-child{width:32px;height:32px;object-fit:contain}
.profile-links b{margin-right:auto;color:#1661c8}
.chev{width:25px;height:25px;object-fit:contain;margin-right:auto}
.logout-button{margin-top:8px}
.wallet-balance{display:grid;justify-items:center;gap:3px;padding:13px}
.wallet-balance>img{width:60px;height:60px;object-fit:contain}
.wallet-balance>small{font-size:10px;color:#5f6b91}
.wallet-balance>strong{font-size:27px;color:#1661c8}
.wallet-balance .matchi-action{margin-top:7px}
.coin-pack{display:flex;align-items:center;gap:9px;margin:7px 0;padding:9px;border:1px solid #d5ddf4;border-radius:16px;background:#ffffffd9}
.coin-pack>img{width:42px;height:42px;object-fit:contain}
.coin-pack>div{display:grid;gap:1px;flex:1}
.coin-pack b{font-size:11px}
.coin-pack small{font-size:8px;color:#5f6b91}
.coin-pack button{background:#f3e5fc;color:#1661c8;padding:7px 11px}
.transaction-row{display:flex;align-items:center;gap:8px;min-height:40px;border-bottom:1px solid #dce3f3;font-size:10px}
.transaction-row img{width:29px;height:29px;object-fit:contain}
.transaction-row span{flex:1}
.transaction-row b{color:#138e6a}
.history-tabs{margin:8px 0 12px}
.history-card{width:100%;display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:1fr 1fr;align-items:center;gap:0 8px;margin:7px 0;padding:9px;text-align:right;border:1px solid #d5ddf4;border-radius:16px;background:#ffffffd9;color:#101c4b}
.history-medal{grid-row:1/3;width:38px;height:38px}
.history-medal img{width:100%;height:100%;object-fit:contain}
.history-info{display:grid;gap:2px}
.history-info b{font-size:10px}
.history-info small{font-size:8px;color:#5f6b91}
.history-card strong{grid-column:3;grid-row:1;font-size:9px;color:#1661c8}
.history-card>i{grid-column:3;grid-row:2;font-size:9px;font-style:normal;font-weight:900}
.friend-row,.message-row{display:flex;align-items:center;gap:8px;margin:7px 0;padding:8px;border:1px solid #d5ddf4;border-radius:15px;background:#ffffffd9}
.friend-row>img,.message-row>img{width:50px;height:50px;object-fit:contain;border-radius:0;background:transparent}
.friend-row>div,.message-row>div{display:grid;gap:2px;flex:1}
.friend-row b,.message-row b{font-size:11px}
.friend-row small,.message-row small{font-size:8px;color:#5f6b91}
.friend-row>button{padding:6px 10px;font-size:9px}
.friend-row .approve{background:#e0f8ef;color:#168c68}
.public-player{text-align:center}
.public-player>img{width:98px;height:98px;object-fit:contain;border:0;border-radius:0;padding:0;background:transparent}
.public-player h2{margin:5px 0 0;font-size:17px}
.public-player>small{font-size:9px;color:#5f6b91}
.player-actions{display:grid;gap:7px;margin-top:11px}
.player-actions .outline-action{width:100%;margin:0}
.message-row{cursor:pointer;min-height:61px}
.message-row time{font-size:8px;color:#7a83a3}
.chat-page{height:100%;display:flex;flex-direction:column}
.chat-page .screen-heading{flex:0 0 48px}
.chat-avatar{width:42px;height:42px;object-fit:contain;border-radius:0}
.chat-history{flex:1;min-height:290px;display:flex;flex-direction:column;gap:9px;padding:10px 1px}
.chat-bubble{max-width:83%;padding:9px 11px;border-radius:15px;font-size:10px}
.chat-bubble small{display:block;margin-top:3px;text-align:left;font-size:7px;opacity:.7}
.chat-bubble.received{align-self:flex-start;background:#fff;border:1px solid #d5ddf4}
.chat-bubble.sent{align-self:flex-end;background:#daf7ff}
.chat-compose{display:flex;gap:7px;padding:8px 0}
.chat-compose input{flex:1;height:42px}
.chat-compose button{width:43px;border:0;border-radius:14px;background:#05beea}
.chat-compose img{width:32px;height:32px;object-fit:contain}
.settings-list{padding:12px}
.switch-row{min-height:48px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e7ebf7;font-size:10px;font-weight:750}
.switch-row img{width:32px;height:32px;object-fit:contain}
.switch-row span{flex:1}
.switch-row input{accent-color:#05beea;width:18px;height:18px}
.settings-list .profile-link-row{width:100%;min-height:48px}
.mobile-nav-trigger,.nav-scrim{display:none}
@keyframes screen-in{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:760px){
.preview-stage{display:block;min-height:100dvh;padding:0}
.device-stage{display:block}
.phone-frame{width:100vw;max-width:none;height:100dvh;min-height:0;aspect-ratio:auto;border:0;border-radius:0}
.phone-app{border-radius:0}
.preview-nav{position:fixed;z-index:40;top:0;right:0;width:min(290px,82vw);height:100dvh;border-radius:0 0 0 22px;transform:translateX(110%);transition:transform .22s ease}
.preview-stage.nav-open .preview-nav{transform:translateX(0)}
.nav-close{display:block}
.mobile-nav-trigger{position:fixed;z-index:25;display:grid;place-items:center;right:10px;bottom:12px;width:42px;height:42px;border:1px solid #d5ddf4;border-radius:50%;background:#ffffffee;box-shadow:0 5px 18px #101c4b20}
.mobile-nav-trigger img{width:36px;height:36px;object-fit:contain}
.nav-scrim{position:fixed;z-index:35;inset:0;border:0;background:#101c4b55}
.preview-stage.nav-open .nav-scrim{display:block}
.phone-content{padding-bottom:68px}
}
@media(min-width:761px) and (max-height:600px){.preview-stage{align-items:start}.preview-nav{height:calc(100dvh - 20px)}.phone-frame{height:calc(100dvh - 20px);width:min(390px,100%)}}.avatar-picker{max-height:145px;overflow-y:auto;padding:2px;scrollbar-width:thin}.avatar-choice{min-width:0}#appHeader[hidden]{display:none!important}.app-header{direction:ltr}.user-chip,.coin-chip{direction:rtl}.app-logo{display:grid;place-items:center;padding:0;border:0;background:transparent;box-shadow:none}.app-logo img{display:block}.member-home[hidden],.guest-home[hidden],.member-profile[hidden],.guest-profile[hidden]{display:none!important}
.profile-links button>img:not(:first-child),.profile-link-row>img:not(:first-child){width:20px;height:20px;object-fit:contain;margin-right:auto}
.guest-room-panel{display:grid;gap:12px}.guest-room-panel label{display:grid;gap:6px;font-size:11px;font-weight:850}.guest-room-panel input{height:44px;border:1px solid #d5ddf4;border-radius:14px;padding:0 12px;background:#fff;color:#101c4b}
.guest-membership{display:grid;justify-items:center;gap:14px;padding:24px 18px}.guest-membership h2{margin:0;font-size:17px}
.membership-mark{position:relative;width:72px;height:72px}.membership-mark img:first-child{width:62px;height:62px;object-fit:contain}.membership-mark img:last-child{position:absolute;right:0;bottom:0;width:35px;height:35px;object-fit:contain}.avatar-picker{grid-auto-rows:60px;align-content:start}
@media(min-width:761px){.avatar-picker{grid-auto-rows:44px}.avatar-choice{height:44px}}.message-row{width:100%;text-align:right}
/* Refined Matchi entry screen */
.entry-brand{position:relative;justify-items:center;gap:0;margin:18px 0 23px}
.entry-logo-halo{position:relative;width:154px;height:154px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#fff 34%,#dff8ff 67%,#e8e9ff 100%);box-shadow:0 14px 34px #05beea22,inset 0 0 0 1px #fff}
.entry-logo-halo:before{content:"";position:absolute;inset:9px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 7px #ffffff45}
.entry-logo-halo img{position:relative;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 5px 9px #101c4b16)}
.entry-brand h1{margin:7px 0 0;font-size:19px;font-weight:950;letter-spacing:-.2px}
.auth-panel{padding:11px;border-radius:23px;background:linear-gradient(145deg,#ffffffed,#f9faffed);box-shadow:0 12px 30px #18225b10}
.entry-choice-stack{display:grid;gap:10px}
.entry-choice-card{display:grid;gap:10px;padding:13px;border:1px solid #d5ddf4;border-radius:19px;background:linear-gradient(135deg,#fff,#f5fbff);box-shadow:0 5px 14px #101c4b08}
.entry-choice-card.new-account{background:linear-gradient(135deg,#fff,#fff7fc);border-color:#f0d7eb}
.entry-choice-title{display:flex;align-items:center;gap:8px;color:#101c4b;font-size:14px;font-weight:900}
.entry-choice-title img{width:40px;height:40px;object-fit:contain;padding:0;border-radius:0;background:transparent}
.new-account .entry-choice-title img{background:transparent}
.entry-choice-card .matchi-action{min-height:47px;border-radius:15px}
.entry-new-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.entry-secondary{min-height:47px;padding:7px;border:1px solid #b9eaf5;border-radius:15px;background:#eafaff;color:#145477;font-size:11px;font-weight:900}
.entry-secondary.register-choice{border-color:#f0c8e1;background:#fff0f8;color:#a42670}
.entry-form-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 0 3px}
.entry-form-heading h2{margin:0;color:#101c4b;font-size:17px;font-weight:950}
.entry-form-heading button{border:0;border-radius:11px;background:#eef2ff;padding:8px 11px;color:#405079;font-size:11px;font-weight:800}
@media(max-height:720px){.entry-brand{margin:5px 0 12px}.entry-logo-halo{width:128px;height:128px}.entry-logo-halo img{width:116px;height:116px}.entry-choice-stack{gap:7px}.entry-choice-card{padding:10px}}

#screen-login{display:flex;flex-direction:column;justify-content:center}
#screen-login:has(.auth-form:not([hidden])){justify-content:flex-start;padding-top:14px}

/* Brighter color field across the Matchi preview */
body{background:linear-gradient(128deg,#c9f3ff 0%,#d7e4ff 28%,#e4d7ff 56%,#f6d4f0 78%,#ffe4cb 100%)}
.phone-app{background:radial-gradient(ellipse at 12% 12%,#a9e9ffb0 0%,transparent 39%),radial-gradient(ellipse at 91% 37%,#ffc8e7a8 0%,transparent 38%),radial-gradient(ellipse at 25% 90%,#d2c8ff9c 0%,transparent 43%),linear-gradient(145deg,#e5f8ff 0%,#e4e5ff 44%,#f5e5fb 75%,#ffefd8 100%)}
.entry-logo-halo{background:transparent;box-shadow:none}
.entry-logo-halo:before{display:none}
.entry-logo-halo img{width:150px;height:150px;filter:drop-shadow(0 7px 10px #101c4b20)}
@media(max-height:720px){.entry-logo-halo img{width:124px;height:124px}}

/* Balanced app header: centered brand and unframed profile/coin controls */
.app-header{position:relative;justify-content:space-between}

.user-chip,.coin-chip{border:0!important;background:transparent!important;box-shadow:none!important;padding:2px!important;border-radius:0!important}
.user-chip img{width:38px;height:38px;object-fit:contain}
.coin-chip{gap:4px}.coin-chip img{width:34px;height:34px;object-fit:contain}

/* Seven-digit balance preview */
.coin-chip{direction:ltr!important;gap:6px}.coin-chip b{font-size:16px;font-weight:950;line-height:1;white-space:nowrap;unicode-bidi:isolate}

/* Header controls: coin stacked above balance, gold profile ring */
.coin-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0!important;min-width:54px;padding:0!important;direction:ltr!important}
.coin-chip img{width:30px;height:30px;object-fit:contain}
.coin-chip b{font-size:12px!important;font-weight:900;line-height:1.05;white-space:nowrap;unicode-bidi:isolate}
.user-chip{width:44px;height:44px;padding:3px!important;border:2px solid #e5b83f!important;border-radius:50%!important;display:grid;place-items:center}
.user-chip img{width:34px;height:34px;object-fit:contain}

/* Final header alignment and subtle gold ring depth */
.coin-chip img{width:36px;height:36px;object-fit:contain}
.user-chip{width:46px;height:46px!important;box-sizing:border-box;padding:0!important;border-width:3px!important;display:grid;place-items:center;line-height:0;box-shadow:0 2px 5px rgba(190,145,34,.24)!important}
.user-chip img{display:block;width:36px;height:36px;margin:0;justify-self:center;align-self:center;object-fit:contain}

/* Blue to pink profile ring */
.user-chip{border:3px solid transparent!important;background:linear-gradient(transparent,transparent) padding-box,linear-gradient(135deg,#20c7eb,#f34eae) border-box!important;box-shadow:0 2px 6px rgba(32,199,235,.18),0 2px 6px rgba(243,78,174,.16)!important}

/* Gradient outline only; keep profile circle interior transparent */
.user-chip{position:relative;border:0!important;background:transparent!important;box-shadow:0 2px 6px rgba(32,199,235,.18),0 2px 6px rgba(243,78,174,.16)!important}
.user-chip::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(135deg,#20c7eb,#f34eae);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.user-chip img{position:relative;z-index:1}

/* Home-only editable notification with a soft animated text sheen */
.home-announcement{position:relative;display:flex;align-items:center;gap:9px;overflow:hidden;margin:0 0 12px;padding:11px 13px;border:1px solid #b9e9f5;border-radius:17px;background:linear-gradient(110deg,#f0fcff,#fff5fb);box-shadow:0 7px 18px rgba(26,164,204,.12)}
.home-announcement[hidden]{display:none!important}
.announcement-spark{flex:0 0 auto;color:#eaa92e;font-size:18px;animation:announcement-pulse 1.8s ease-in-out infinite}
.home-announcement-text{position:relative;margin:0;text-align:center;font-size:13px;font-weight:950;line-height:1.6;color:#264b9a;background:linear-gradient(90deg,#27539e 0%,#d63b9b 42%,#079fca 70%,#27539e 100%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:announcement-shine 4.2s linear infinite}
@keyframes announcement-shine{to{background-position:220% center}}
@keyframes announcement-pulse{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.16);opacity:1}}
@media(prefers-reduced-motion:reduce){.home-announcement-text,.announcement-spark{animation:none}}

/* Softer announcement card, stronger animated text */
.home-announcement{background:rgba(255,255,255,.28);border-color:rgba(116,196,221,.28);box-shadow:0 3px 12px rgba(26,164,204,.055);backdrop-filter:blur(2px)}
.home-announcement-text{font-size:14px;font-weight:1000;background:linear-gradient(90deg,#087fae 0%,#fa258f 28%,#6842e8 52%,#00a9c7 76%,#fa258f 100%);background-size:260% auto;filter:drop-shadow(0 1px 3px rgba(210,39,143,.32));animation:announcement-shine 2.1s linear infinite,announcement-pop 1.45s ease-in-out infinite}
@keyframes announcement-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.announcement-spark{color:#e79522;font-size:20px;filter:drop-shadow(0 0 3px rgba(235,166,40,.3))}
@media(prefers-reduced-motion:reduce){.home-announcement-text,.announcement-spark{animation:none}}

/* Weekly top-ten panel with original crown and medal illustrations */
.weekly-leaderboard{margin:0 0 14px;padding:12px 11px;border:1px solid rgba(130,190,218,.34);border-radius:20px;background:rgba(255,255,255,.42);box-shadow:0 5px 16px rgba(45,105,150,.055);backdrop-filter:blur(3px)}
.weekly-leaderboard-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.weekly-leaderboard-head h2{margin:0;font-size:14px;font-weight:950;color:#263e7d}
.weekly-leaderboard-head span{padding:3px 8px;border-radius:999px;background:rgba(231,242,255,.58);color:#6274a6;font-size:9px;font-weight:800}
.leaderboard-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-items:end;margin-bottom:9px}
.podium-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:6px 2px 7px;border:1px solid rgba(180,198,226,.28);border-radius:14px;background:rgba(255,255,255,.28);text-align:center}
.podium-item img{width:34px;height:34px;object-fit:contain}
.podium-item b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:950;color:#263e7d}
.podium-item small{font-size:8px;font-weight:800;color:#7380a5;white-space:nowrap}
.podium-gold{min-height:96px;background:rgba(255,245,211,.4);border-color:rgba(238,192,81,.35)}
.podium-silver,.podium-bronze{min-height:84px}
.leaderboard-ranks{display:grid;gap:3px}
.leaderboard-row{min-height:32px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:7px;padding:2px 5px;border-radius:10px;background:rgba(255,255,255,.22)}
.leaderboard-row img{display:block;width:26px;height:30px;object-fit:contain}
.leaderboard-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#344673;font-size:10px;font-weight:900}
.leaderboard-row span{color:#7b84a2;font-size:9px;font-weight:750;white-space:nowrap}

/* Canonical hall cards */
.home-leagues{margin:0 0 10px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.home-leagues-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px;color:#2d4479}
.home-leagues-head>div{display:grid;gap:1px}.home-leagues-head b{font-size:12px;font-weight:950}.home-leagues-head small{color:#7b86a2;font-size:8px;font-weight:750}
.league-card-row{display:grid;gap:16px;padding:0 0 10px}
.league-card{position:relative;display:block;width:100%;padding:0;border:1px solid #d7e2f3;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#ffffffed,#edf7fff2);box-shadow:0 7px 18px #23365f12;color:#23365f;font:inherit;text-align:right}
.league-card>img{position:absolute;top:0;left:0;width:100%;height:112px;object-fit:contain;pointer-events:none}
.league-card-content{position:relative;display:flex;flex-direction:column;gap:10px;padding:119px 14px 14px;min-width:0;text-shadow:none}
.league-card-content>strong{position:absolute;top:43px;left:12px;right:12px;text-align:center;color:#fff;font-size:15px;line-height:1.4;font-weight:900;text-shadow:0 2px 4px #162c55}
.league-card-content>i{position:absolute;top:76px;left:50%;transform:translateX(-50%);min-width:130px;padding:5px 12px;border-radius:14px;background:#233d69;color:#fff;font-size:12px;line-height:1.3;font-style:normal;font-weight:850;text-align:center;white-space:nowrap}
.league-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;order:0;padding-bottom:9px;border-bottom:1px solid #dbe5f3}
.league-card-meta>b{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px}
.league-card-meta img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.league-card-meta em{font-size:12px;line-height:1.5;font-style:normal;font-weight:850;color:#243d79}
.league-card-reward{display:grid;gap:6px;order:1;min-width:0;color:#23365f}
.league-card-reward small{font-size:11px;color:#687898;font-weight:800}
.league-card-reward em{display:flex;align-items:center;font-size:12px;line-height:1.55;font-style:normal;font-weight:800}
.league-card-reward .reward-part{display:flex;align-items:center;gap:7px;min-width:0}
.league-card-reward .reward-part>span{white-space:normal;overflow-wrap:break-word}
.league-card-reward .reward-icon{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.league-card.is-locked>img{filter:saturate(.65)}
.league-lock{position:absolute;left:14px;top:16px;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#233d69;font-size:15px}
/* Canonical create room */
.private-create-intro{display:grid;gap:4px;margin:3px 3px 10px;color:#243d79}.private-create-intro b{font-size:14px}.private-create-intro small{font-size:10px;color:#5f6b91}.private-settings{padding:10px}.topics-select{display:grid;gap:7px;margin-top:10px}.topics-select>b{font-size:12px;color:#243d79}.topic-pills{display:flex;flex-wrap:wrap;gap:6px}.topic-pills button{min-height:32px;padding:5px 10px;border:1px solid #d5ddf4;border-radius:12px;background:#f6f8ff;color:#243d79;font-family:inherit;font-size:10px;font-weight:850}.topic-pills button.selected{border-color:#05beea;background:#dff8ff;color:#12619a;box-shadow:0 3px 9px #05beea28}.room-create-cost{display:flex;align-items:center;gap:6px;margin-top:10px;padding:9px;border-radius:12px;background:#fff1f8;color:#243d79;font-size:10px;font-weight:850}.room-create-cost img{width:25px;height:25px;object-fit:contain}.room-create-cost span{flex:1}.room-create-cost b{font-size:11px}
/* Canonical question layout */
.quiz-handwritten-question{display:block;width:100%;height:clamp(92px,22vw,145px);margin:0 0 10px;padding:8px;box-sizing:border-box;object-fit:contain;object-position:center;border:1px solid #d5ddf4;border-radius:18px;background:#fff;overflow:hidden}.quiz-handwritten-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.quiz-handwritten-option{min-height:0;aspect-ratio:1/0.72}.quiz-handwritten-option img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:10px}.quiz-handwritten-option span{font-size:10px}.question-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 2px 9px;color:#5f6b91;font-size:10px;font-weight:850}.question-foot span{display:flex;align-items:center;gap:3px}.question-foot img{width:22px;height:22px;object-fit:contain}
/* Canonical public lobby */
.waiting-game-card{margin:0 0 10px;padding:12px 13px;border:1px solid #d5ddf4;border-radius:18px;background:#ffffffdc;box-shadow:0 7px 18px #12205512}.waiting-game-card .lobby-countdown-prominent{display:flex;align-items:baseline;justify-content:center;gap:6px;color:#263e79}.waiting-game-card .lobby-countdown-prominent b{font-size:24px;line-height:1.1}.waiting-game-card .lobby-countdown-prominent span{font-size:10px;font-weight:850}.waiting-game-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.waiting-game-metrics>div{display:grid;justify-items:center;gap:3px;padding:7px 4px;border-radius:12px;background:#f4f7ff;color:#5f6b91;font-size:9px}.waiting-game-metrics b{display:flex;align-items:center;gap:3px;color:#243d79;font-size:11px}.waiting-game-metrics img{width:20px;height:20px;object-fit:contain}.waiting-players-card{padding:11px;margin:0 0 10px}.waiting-player-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.waiting-player{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:#f4f7ff;color:#243d79;font-size:10px}.waiting-player .player-level-badge{transform:scale(.72);transform-origin:center top;height:28px}.screen-heading.centered-lobby-heading{margin-bottom:8px}.screen-heading.centered-lobby-heading h1{font-size:16px}.waiting-game-card+.waiting-players-card+.matchi-action{margin-top:2px;min-height:46px;font-size:12px}
/* Canonical public confirmation */
#screen-publicLobby{height:100%}.public-confirm-page{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;padding:0}.public-room-confirm-card{flex:1;min-height:0;position:relative;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;border:3px solid #d59b37;border-radius:24px;background:linear-gradient(180deg,#effcff,#d5f5fb 34%,#eef1ff);box-shadow:0 10px 24px rgba(32,70,130,.18);padding:0 16px 16px;color:#23365f;text-align:center}.public-room-confirm-art{display:block;width:calc(100% + 32px);height:104px;max-height:104px;object-fit:contain;margin:0 -16px 4px}.public-room-confirm-card>h1{position:absolute;top:58px;left:0;right:0;margin:0;color:#253d78;font-size:18px;line-height:1.3;font-weight:1000}.public-room-confirm-card .public-room-countdown{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 12px;color:#263e79}.public-room-confirm-card .public-room-countdown b{font-size:25px;line-height:1.1;font-weight:1000}.public-room-confirm-card .public-room-countdown span{font-size:11px;font-weight:900}
.public-room-confirm-card .public-room-prizes{width:100%;box-sizing:border-box;overflow:hidden;padding:10px 8px;border:1px solid rgba(77,118,180,.3);border-radius:16px;background:rgba(255,255,255,.88);text-align:right;box-shadow:0 3px 10px rgba(31,62,118,.08)}.public-room-confirm-card .public-room-prizes h2{margin:0 0 8px;color:#243d79;text-align:center;font-size:14px;line-height:1.35;font-weight:1000}.public-room-confirm-card .public-room-prizes p{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;box-sizing:border-box;min-width:0;max-width:100%;gap:7px;margin:0;padding:12px 0;border-top:1px solid rgba(101,128,174,.18);font-size:var(--prize-font-size,12px);line-height:1.35;font-weight:850;overflow:hidden}.public-room-confirm-card .public-room-prizes p>b{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:28px;color:#23417e;white-space:normal;font-size:10px;line-height:1.15}.public-room-confirm-card .prize-group-row{--prize-font-size:11px}.public-room-confirm-card .rank-icon{width:28px;height:28px;max-width:28px;max-height:28px;object-fit:contain;margin:0 auto 2px}.public-room-confirm-card .prize-details{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;min-width:0;max-width:100%;gap:4px;white-space:normal;overflow:hidden;text-align:right}.public-room-confirm-card .reward-part{display:inline-flex;align-items:center;min-width:0;max-width:100%;gap:3px;white-space:nowrap}.public-room-confirm-card .reward-part>span{min-width:0}.public-room-confirm-card .prize-xp{direction:ltr;white-space:nowrap;font-size:inherit}.public-room-confirm-card .prize-ticket-legend{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 12px;font-size:12px;line-height:1.7;color:#465273}.public-room-confirm-card .public-room-prizes .prize-calculation{margin-top:10px;border-top:1px solid #d5ddf4;padding-top:10px;font-size:12px;line-height:1.7}.public-room-confirm-card .prize-calculation summary{cursor:pointer;color:#1661c8;font-weight:850}.public-room-confirm-card .prize-calculation>div{display:grid;gap:4px;padding:10px 0}.public-room-confirm-card .prize-calculation .reward-part{white-space:normal}.public-room-confirm-card .reward-icon{width:18px;height:18px;min-width:18px;max-width:18px;min-height:18px;max-height:18px;object-fit:contain;display:inline-block;flex:0 0 18px}.public-confirm-page>.public-pay-entry{flex:0 0 auto;width:100%;min-height:48px;padding:10px 12px;border:0;border-radius:15px;background:linear-gradient(110deg,#49d9e9,#08b7d9);color:#12355a;font-size:13px;font-weight:900;box-shadow:0 5px 14px #08b7d92b}
/* Canonical header layout */
.app-header{position:relative;justify-content:space-between}.app-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:54px;height:54px}.app-logo img{max-width:100%;max-height:100%;object-fit:contain}.header-level-chip{display:flex;align-items:center;justify-content:center;gap:4px;min-width:104px;height:52px;padding:2px 5px;direction:rtl;border:0!important;border-radius:15px;background:transparent!important;box-shadow:none!important;color:#263e7d}.header-level-chip .player-level-badge{position:relative;display:flex!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:43px!important;padding:0!important;align-items:flex-end;justify-content:center;overflow:visible!important}.header-level-chip .level-stars{position:absolute;pointer-events:none;top:0!important;left:0!important;width:38px!important;height:23px!important}.header-level-chip .level-circle{display:grid;place-items:center;flex:none;border:2px solid var(--level-color);border-radius:50%;background:var(--level-fill);color:#263e7d;font-weight:900;box-sizing:border-box;width:32px!important;height:32px!important;font-size:10px!important}.header-score{display:grid;justify-items:center;gap:1px;line-height:1}.header-score b{font-size:12px;font-weight:950;white-space:nowrap;unicode-bidi:isolate}.header-score small{font-size:8px;font-weight:800;color:#687898;white-space:nowrap}.user-chip{width:54px!important;height:54px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}.user-chip::before{display:none!important}.user-chip .player-level-badge{position:relative;display:grid;place-items:center;width:44px;height:48px}.user-chip .level-stars{position:absolute;top:0;left:0;width:44px;height:24px;pointer-events:none}.user-chip .level-circle{display:grid;place-items:center;width:36px;height:36px;margin-top:12px;border:2px solid var(--level-color);border-radius:50%;background:var(--level-fill);box-sizing:border-box}.user-chip .level-circle img{width:30px;height:30px;object-fit:contain}