/* v0.7.20 — Aligned room columns and a balanced weekly champion profile. */
body:not(.in-game){--home-gutter:clamp(28px,4vw,72px);height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
body:not(.in-game) .site-header,body:not(.in-game) main,body:not(.in-game) footer{width:calc(100% - 2*var(--home-gutter));max-width:1440px}
body:not(.in-game) main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.95fr);grid-template-rows:256px minmax(0,1fr);grid-template-areas:"hero daily ranking showcase showcase" "promo rooms rooms chat players";gap:14px;align-items:stretch;height:min(850px,calc(100dvh - 104px));min-height:0;max-height:none;flex:none;padding:12px 0 20px}
body:not(.in-game) .lobby-room-hub{display:contents}
body:not(.in-game) .welcome-copy{grid-area:hero;display:flex;flex-direction:column;min-height:0;height:100%;padding:14px;border:1px solid #e3d4ef;border-radius:18px;background:linear-gradient(145deg,#f3eafc,#fff4e2);box-shadow:0 3px 0 #e8dfed;overflow:visible}
body:not(.in-game) .welcome h1{font-size:clamp(28px,2.2vw,34px);margin:6px 0;line-height:1.06;letter-spacing:-1px}
body:not(.in-game) .welcome-copy>p{font-size:13px;line-height:1.4;margin:6px 0}
body:not(.in-game) .hero-buttons{gap:8px;margin-top:auto;padding-top:10px;flex:none}
body:not(.in-game) .hero-buttons button{font-size:12px;line-height:1.25;min-height:38px;min-width:0;padding:8px 10px;flex:1;white-space:normal}
body:not(.in-game) .auth-entry{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;color:#655c70;font-size:12px;line-height:1.3}
body:not(.in-game) .auth-entry button{min-height:32px;padding:4px 6px;font-size:12px}
body:not(.in-game) .auth-entry button[hidden]{display:none}
body:not(.in-game) .welcome-copy .badges{gap:6px;flex-wrap:wrap;margin-top:10px;flex:none;line-height:1.3}
body:not(.in-game) .welcome-copy .badges span{font-size:9px;padding:4px 5px;white-space:nowrap}
body:not(.in-game) .daily-card{grid-area:daily}
body:not(.in-game) .weekly-showcase{grid-area:showcase;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;min-height:0;height:100%;width:100%;max-width:none;justify-self:end;align-items:stretch}
body:not(.in-game) .weekly-showcase .weekly-section,body:not(.in-game) .weekly-showcase .weekly-star{grid-area:auto;min-height:0;height:100%}
body:not(.in-game) .shop-featured{grid-area:shop}
body:not(.in-game) .rooms-section{grid-area:rooms}
body:not(.in-game) .weekly-ranking{grid-area:ranking}
body:not(.in-game) .lobby-chat{grid-area:chat;height:100%;min-height:0;align-self:stretch}
body:not(.in-game) .online-card{grid-area:players;align-self:stretch;height:100%;min-height:0;max-height:none}
body:not(.in-game) .dashboard-card,body:not(.in-game) .weekly-section,body:not(.in-game) .rooms-section,body:not(.in-game) .lobby-chat,body:not(.in-game) .online-card{padding:14px;border-radius:18px;min-width:0}
body:not(.in-game) .section-head h2,body:not(.in-game) .lobby-panel-title{font-size:17px;line-height:1.3}
body:not(.in-game) .online-card ul{flex:1 1 0;max-height:none;min-height:0;margin:8px 0;gap:4px;overflow:auto;overscroll-behavior:contain}
body:not(.in-game) .online-card li{grid-template-columns:40px minmax(0,1fr) auto;min-height:56px;padding:6px;gap:7px;font-size:13px}
body:not(.in-game) .online-card .avatar{width:40px;height:40px;font-size:22px}
body:not(.in-game) .online-card .online-player-info{gap:3px}
body:not(.in-game) .online-card .online-player-name{font-size:13px}
body:not(.in-game) .online-card .presence-label{font-size:10px}
body:not(.in-game) .online-card .online-player-score{font-size:15px}
body:not(.in-game) .online-card .online-player-score small{font-size:10px;margin-top:1px}
body:not(.in-game) .online-footnote{font-size:10px;margin-top:4px;padding-top:4px}
body:not(.in-game) .online-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:5px;align-items:center;margin-top:6px;padding:4px 0}
body:not(.in-game) .online-toolbar select{min-width:0;min-height:36px;font-size:11px;padding:6px}
body:not(.in-game) .online-toolbar .busy-toggle{grid-column:auto;justify-self:stretch;max-width:none;min-height:36px;padding:6px;font-size:10px}
body:not(.in-game) .lobby-chat .message-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
body:not(.in-game) .lobby-chat .message-form{flex:none;margin-top:auto;padding-top:10px;border-top:1px solid #eee6f2;background:#fff}
body:not(.in-game) .lobby-chat input{font-size:16px;min-height:44px;min-width:0}
body:not(.in-game) .lobby-chat .message-form button{min-width:44px;min-height:44px}
body:not(.in-game) .lobby-chat #lobbyMessages .empty-message{height:100%;min-height:120px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:#8e789f}
body:not(.in-game) .lobby-chat #lobbyMessages .empty-message:before{content:'✎';display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:#f4ecfa;color:#9673b9;font-size:30px;transform:rotate(-8deg)}
body:not(.in-game) .weekly-showcase #galleryList{margin-top:10px;overflow:visible}
body:not(.in-game) .weekly-showcase #galleryList .featured-drawing{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:88px minmax(36px,1fr);gap:8px 10px;align-items:center;padding:0;height:100%}
body:not(.in-game) .weekly-showcase #galleryList .drawing-preview{grid-column:1;grid-row:1;width:88px;height:88px;max-width:88px;max-height:88px;aspect-ratio:1;justify-self:center;object-fit:contain}
body:not(.in-game) .weekly-showcase #galleryList .gallery-card-info{grid-column:2;grid-row:1;align-self:center;gap:6px;min-width:0}
body:not(.in-game) .weekly-showcase #galleryList h3{font-size:17px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body:not(.in-game) .weekly-showcase #galleryList p{font-size:12px}
body:not(.in-game) .weekly-showcase #galleryList .drawing-caption{font-size:11px;margin-top:0}
body:not(.in-game) .weekly-showcase #galleryList .featured-drawing-side{grid-column:1/-1;grid-row:2;align-self:end;justify-self:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
body:not(.in-game) .weekly-showcase #galleryList .drawing-score{min-height:36px;height:36px;padding:7px 11px;gap:6px;box-shadow:none;border-radius:9px;background:#faf6fd;border:1px solid #e7dcf1;color:#8d70b1}
body:not(.in-game) .weekly-showcase #galleryList .drawing-score strong{font-size:17px;line-height:1}
body:not(.in-game) .weekly-showcase #galleryList .drawing-score small{display:none}
body:not(.in-game) .weekly-showcase #galleryList .drawing-score-icon{font-size:17px}
body:not(.in-game) .weekly-showcase #openGallery{flex:1;min-height:36px;height:36px;padding:7px 10px;font-size:12px;background:#faf6fd;border:1px solid #e7dcf1;color:#80659c;border-radius:9px;box-shadow:none}
body:not(.in-game) .weekly-showcase .weekly-star{padding-bottom:12px}
body:not(.in-game) .weekly-showcase .panel-description{font-size:12px}
body:not(.in-game) #weeklyStarList{display:flex;align-items:flex-start;flex:none;min-height:0}
body:not(.in-game) .weekly-showcase .star-player{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto;gap:8px 22px;width:100%;margin:0;padding-top:10px}
body:not(.in-game) .weekly-showcase .star-player .star-avatar{grid-row:1/4}
body:not(.in-game) .weekly-showcase .star-avatar:before{top:-14px;left:auto;right:-4px;transform:rotate(12deg);font-size:24px}
body:not(.in-game) .weekly-showcase .star-avatar{width:104px;height:104px}
body:not(.in-game) .weekly-showcase .star-player strong{grid-column:2;grid-row:1;align-self:end;min-width:0;font-size:clamp(16px,1.25vw,20px);white-space:nowrap;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
body:not(.in-game) .weekly-showcase .star-player>span:last-child{font-size:clamp(16px,1.4vw,22px);line-height:1.2;overflow-wrap:normal}
body:not(.in-game) .weekly-showcase .star-player:after{justify-self:start}
body:not(.in-game) #weeklyStarList{margin:12px 0 0}
body:not(.in-game) .star-footnote{font-size:10px;line-height:1.3;margin-top:6px;padding-top:0}
body:not(.in-game) .shop-highlights{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:9px;margin-top:10px;flex:1;min-height:0}
body:not(.in-game) .shop-highlight{align-items:center;justify-content:flex-start;text-align:center;padding:8px;background:linear-gradient(160deg,#fff,#faf5fe);border-radius:13px;overflow:visible;min-height:0}
body:not(.in-game) .shop-highlight>strong,body:not(.in-game) .shop-highlight>small{align-self:stretch;text-align:center}
body:not(.in-game) .shop-highlight>strong{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.25;min-height:30px;margin-top:5px}
body:not(.in-game) .shop-highlight>small{min-height:0;margin:2px 0;font-size:11px}
body:not(.in-game) .shop-highlight .highlight-art{display:flex;align-items:center;justify-content:center;align-self:center;width:100px;height:100px;flex:none;overflow:visible;margin:0;border-radius:16px}
body:not(.in-game) .shop-highlight .highlight-art.product-frame{max-width:none;width:100px;height:100px;background:transparent}
body:not(.in-game) .shop-highlight .highlight-art:has(.name-preview){width:100%;height:100px;padding:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#38516e,#162639);border:1px solid #40617b}
body:not(.in-game) .shop-highlight .highlight-art.card-preview{width:100%;height:100px}
body:not(.in-game) .shop-highlight .name-preview{width:auto;max-width:100%;min-height:0;font-size:19px;align-self:center;display:inline-block}
body:not(.in-game) .shop-highlight .highlight-price{align-self:stretch;margin-top:auto;font-size:14px;padding:4px}
body:not(.in-game) #weeklyRankingList{flex:1 1 0;min-height:0;overflow:auto}
body:not(.in-game) #weeklyRankingList li{grid-template-columns:18px 40px minmax(0,1fr);grid-template-rows:auto auto;min-height:56px;gap:2px 5px;padding:6px;margin:5px 0;font-size:13px}
body:not(.in-game) #weeklyRankingList .rank-number{grid-column:1;grid-row:1/3;width:18px;height:18px;font-size:10px}
body:not(.in-game) #weeklyRankingList .ranking-avatar{grid-column:2;grid-row:1/3}
body:not(.in-game) #weeklyRankingList strong{grid-column:3;grid-row:1;align-self:end;min-width:0;font-size:12px}
body:not(.in-game) #weeklyRankingList .rank-score{grid-column:3;grid-row:2;align-self:start;text-align:left;font-size:12px;line-height:1.3}
body:not(.in-game) #weeklyRankingList .rank-score small{display:inline;font-size:10px;margin:0 0 0 4px}
body:not(.in-game) .ranking-avatar{width:40px;height:40px;font-size:23px}
body:not(.in-game) .room-grid{grid-auto-rows:minmax(110px,1fr);gap:10px;margin-top:12px}
body:not(.in-game) .room-card:nth-child(n){grid-template-columns:52px minmax(0,1fr);min-height:110px;padding:8px;gap:7px 10px;border-radius:12px}
body:not(.in-game) .room-card .room-art{width:52px;height:52px;border-radius:10px}
body:not(.in-game) .room-card h3{font-size:15px}
body:not(.in-game) .room-card-bottom button{min-height:30px;padding:6px 15px;font-size:12px}
body:not(.in-game) .daily-card{padding:12px}
body:not(.in-game) .daily-card .section-head h2{font-size:15px}
body:not(.in-game) .daily-subhead{align-items:flex-start}
body:not(.in-game) .daily-subhead .panel-description{font-size:11px}
body:not(.in-game) .task-row{font-size:12px;gap:5px;grid-template-columns:19px minmax(0,1fr) auto auto}
body:not(.in-game) .daily-bonus{display:grid;grid-template-columns:20px minmax(0,1fr);padding:7px;gap:3px 6px}
body:not(.in-game) .daily-bonus>.panel-icon{grid-column:1;grid-row:1/3;width:20px;height:20px}
body:not(.in-game) .daily-bonus>span{grid-column:2;grid-row:1;font-size:11px}
body:not(.in-game) .daily-bonus small{display:none}
body:not(.in-game) .daily-bonus strong{grid-column:2;grid-row:2;margin-left:0}
body:not(.in-game) .daily-bonus strong{font-size:11px}
body:not(.in-game) .promo-card{grid-area:promo;display:flex;flex-direction:column;position:relative;height:auto;min-height:0;align-self:start;background:linear-gradient(125deg,#f4ecfc,#e7f3ed);border-color:#ddcde9}
.promo-slide{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:12px;flex:none;min-height:0;margin-top:12px}
.promo-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.promo-kicker{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#9273ae}
.promo-copy h2{font-size:24px;line-height:1.15;margin:0;color:#5d447d}
.promo-copy p{margin:0;font-size:12px;line-height:1.4;color:#7d6f8d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo-product-price{font-size:12px;color:#92702e;font-weight:700}
.promo-copy .promo-open{padding:7px 12px;min-height:32px;font-size:12px;border-radius:8px;box-shadow:none}
.promo-art{position:relative;display:flex;align-items:center;justify-content:center;width:128px;height:128px;font-size:70px}
.promo-art.product-frame{width:128px;height:128px;background:transparent;max-width:none}
.promo-art:has(.name-preview),.promo-art.card-preview{width:128px;height:112px;padding:9px;border-radius:14px;background:radial-gradient(ellipse at 50% 20%,#38516e,#162639)}
.promo-art .name-preview{font-size:23px}
.promo-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:none;padding-top:4px}
.promo-controls button{display:grid;place-items:center;min-height:28px;min-width:28px;padding:4px 7px;border:1px solid #daccdf;border-radius:7px;color:#806496;background:#ffffffb3;box-shadow:none;font-size:12px}
.promo-controls button:focus-visible,.promo-open:focus-visible{outline:3px solid #a78cca;outline-offset:2px}
.promo-count{margin-right:auto;font-size:11px;color:#8e789f;font-variant-numeric:tabular-nums}
body.in-game .promo-card{display:none}
body.in-game .weekly-showcase{display:none}
@media(min-width:1200px){
 body:not(.in-game) .promo-slide{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px}
 body:not(.in-game) .promo-copy{width:100%}
 body:not(.in-game) .promo-art,body:not(.in-game) .promo-art.product-frame,body:not(.in-game) .promo-art:has(.name-preview),body:not(.in-game) .promo-art.card-preview{width:104px;height:104px;flex:none}
 body:not(.in-game) .promo-copy h2{font-size:clamp(20px,1.7vw,24px)}
 body:not(.in-game) .room-grid{grid-auto-rows:minmax(104px,max-content);align-content:start}
 body:not(.in-game) .room-card:nth-child(n){min-height:104px;grid-template-columns:44px minmax(0,1fr);gap:6px}
 body:not(.in-game) .room-card .room-art{width:44px;height:44px}
 body:not(.in-game) .room-card h3{font-size:14px}
}
@media(min-width:1200px) and (max-width:1399px){
 body:not(.in-game) .weekly-showcase .star-player{grid-template-columns:88px minmax(0,1fr);gap:22px 18px;padding-top:0}
 body:not(.in-game) .weekly-showcase .star-player .star-avatar{grid-row:2/4}
 body:not(.in-game) .weekly-showcase .star-avatar{width:88px;height:88px}
 body:not(.in-game) .weekly-showcase .star-avatar:before{top:-8px;font-size:20px}
 body:not(.in-game) .weekly-showcase .star-player strong{grid-column:1/-1;font-size:20px}
}
@media(min-width:1200px) and (max-height:640px){body:not(.in-game) main{height:auto;grid-template-rows:256px 330px}}
@media(min-width:761px) and (max-width:1199px){body:not(.in-game) main{height:auto;max-height:none;min-height:0;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));grid-template-rows:minmax(260px,max-content) 260px 350px 400px;grid-template-areas:"hero daily ranking" "showcase showcase showcase" "promo rooms rooms" "chat chat players"}body:not(.in-game) .lobby-chat,body:not(.in-game) .online-card{height:100%;max-height:none}body:not(.in-game) .promo-slide{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px}body:not(.in-game) .promo-art,body:not(.in-game) .promo-art.product-frame,body:not(.in-game) .promo-art:has(.name-preview),body:not(.in-game) .promo-art.card-preview{width:96px;height:96px}body:not(.in-game) .weekly-showcase{max-width:none}body:not(.in-game) .welcome h1{font-size:32px}}
@media(max-width:760px){
 body:not(.in-game){overflow-x:hidden}
 body:not(.in-game) .site-header,body:not(.in-game) main,body:not(.in-game) footer{width:calc(100% - 32px);max-width:600px}
 body:not(.in-game) main{display:flex;flex-direction:column;gap:12px;height:auto;max-height:none;min-height:0;padding:6px 0 14px}
 body:not(.in-game) .welcome-copy{order:0;min-height:0;height:auto;padding:18px;overflow:visible}
 body:not(.in-game) .welcome h1{font-size:35px;margin:7px 0}
 body:not(.in-game) .welcome-copy>p{font-size:14px;line-height:1.5;margin:8px 0}
 body:not(.in-game) .eyebrow{font-size:10px;letter-spacing:2px}
 body:not(.in-game) .hero-buttons{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;gap:8px}
 body:not(.in-game) .hero-buttons button{min-height:46px;font-size:13px;padding:10px 8px}
 body:not(.in-game) .auth-entry{margin-top:10px;font-size:12px}
 body:not(.in-game) .auth-entry button{min-height:40px;padding:8px 6px}
 body:not(.in-game) .welcome-copy .badges{margin-top:12px;gap:5px}
 body:not(.in-game) .weekly-showcase{order:1;display:flex;flex-direction:column;gap:12px;max-width:none;height:auto}
 body:not(.in-game) .rooms-section{order:2;height:auto;min-height:0;max-height:none}
 body:not(.in-game) .lobby-chat{order:3;height:340px;min-height:0;max-height:none;align-self:stretch}
 body:not(.in-game) .online-card{order:4;height:auto;min-height:0;max-height:none;align-self:stretch}
 body:not(.in-game) .daily-card{order:5;height:auto;min-height:0}
 body:not(.in-game) .weekly-ranking{order:6;height:auto;min-height:0}
 body:not(.in-game) .promo-card{order:7;height:auto;min-height:0;padding:14px}
 body:not(.in-game) .shop-featured{order:7;height:auto;min-height:0}
 body:not(.in-game) .section-head h2,body:not(.in-game) .lobby-panel-title{font-size:17px;line-height:1.35}
 body:not(.in-game) .room-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;flex:none;max-height:360px;gap:9px;margin-top:12px}
 body:not(.in-game) .room-card:nth-child(n){min-height:126px;grid-template-columns:44px minmax(0,1fr);padding:10px;gap:7px}
 body:not(.in-game) .room-card .room-art{width:44px;height:44px}
 body:not(.in-game) .room-card h3{font-size:13px;line-height:1.3}
 body:not(.in-game) .room-card-bottom button{min-height:40px;padding:8px;font-size:12px}
 body:not(.in-game) .rooms-help{margin-bottom:0}
 body:not(.in-game) .online-card ul{flex:none;max-height:320px;min-height:0;overflow:auto;margin:8px 0}
 body:not(.in-game) .online-card li{min-height:56px}
 body:not(.in-game) .online-toolbar select{font-size:12px;min-height:40px;padding:6px}
 body:not(.in-game) .online-toolbar .busy-toggle{min-height:40px;font-size:11px}
 body:not(.in-game) .lobby-chat input{min-height:46px}
 body:not(.in-game) .lobby-chat .message-form button{min-width:46px;min-height:46px}
 body:not(.in-game) .weekly-showcase .weekly-section,body:not(.in-game) .weekly-showcase .weekly-star{height:auto;min-height:0;overflow:hidden}
 body:not(.in-game) .weekly-showcase .weekly-section{order:0}
 body:not(.in-game) .weekly-showcase .weekly-star{order:1}
 body:not(.in-game) .weekly-showcase .star-player{grid-template-columns:112px minmax(0,1fr);gap:8px 22px}
 body:not(.in-game) .weekly-showcase .star-avatar{width:112px;height:112px}
 body:not(.in-game) .weekly-showcase .star-player strong{font-size:clamp(16px,5vw,22px)}
 body:not(.in-game) .weekly-showcase #galleryList .featured-drawing{grid-template-columns:112px minmax(0,1fr);grid-template-rows:128px auto;gap:10px}
 body:not(.in-game) .weekly-showcase #galleryList .drawing-preview{width:112px;height:112px;max-width:112px;max-height:112px}
 body:not(.in-game) .weekly-showcase #openGallery{min-height:40px;height:auto;font-size:12px}
 body:not(.in-game) #weeklyRankingList{flex:none;overflow:visible;margin-top:10px}
 body:not(.in-game) #weeklyRankingList li{grid-template-columns:24px 56px minmax(0,1fr);min-height:76px;gap:3px 9px;padding:8px;font-size:14px}
 body:not(.in-game) #weeklyRankingList .rank-number{width:24px;height:24px;font-size:12px}
 body:not(.in-game) #weeklyRankingList strong{font-size:14px}
 body:not(.in-game) #weeklyRankingList .rank-score{font-size:14px}
 body:not(.in-game) .ranking-avatar{width:56px;height:56px;font-size:29px}
 body:not(.in-game) .shop-highlights{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:10px;overflow:visible;flex:none;margin-top:12px}
 body:not(.in-game) .shop-highlight{min-height:214px;padding:12px 8px}
 body:not(.in-game) .shop-highlight .highlight-art,body:not(.in-game) .shop-highlight .highlight-art.product-frame{width:104px;height:104px}
 body:not(.in-game) .shop-highlight .highlight-art:has(.name-preview),body:not(.in-game) .shop-highlight .highlight-art.card-preview{width:100%;height:104px}
 body:not(.in-game) .shop-highlight>strong{font-size:14px;min-height:36px;margin-top:7px}
 body:not(.in-game) .shop-highlight>small{font-size:12px;margin:5px 0}
 body:not(.in-game) .daily-task-list{flex:none;margin:12px 0}
 body:not(.in-game) .daily-bonus{margin-top:10px}
 body:not(.in-game) footer{font-size:12px;padding:12px 0}
 .promo-slide{grid-template-columns:minmax(0,1fr) 96px;gap:10px}
 .promo-copy h2{font-size:20px}
 .promo-art,.promo-art.product-frame,.promo-art:has(.name-preview),.promo-art.card-preview{width:96px;height:96px}
 .promo-art .name-preview{font-size:18px}
}
@media(max-width:359px){body:not(.in-game) .online-toolbar{gap:3px}body:not(.in-game) .weekly-showcase .star-player{grid-template-columns:96px minmax(0,1fr)}body:not(.in-game) .weekly-showcase .star-avatar{width:96px;height:96px}body:not(.in-game) .hero-buttons button{font-size:12px}}


/* VIP replaces daily tasks without changing the dashboard grid. */
#dailyTaskList[hidden],#dailyBonus[hidden],#dailyAdButton[hidden],#vipDailyGift[hidden]{display:none!important}
.vip-daily-gift{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:linear-gradient(120deg,#fff2c9,#f1e9ff);border:1px solid #e9d8a1}
.vip-daily-gift>span{font-size:30px;color:#b48727}.vip-daily-gift strong{font-size:22px;color:#62488e}.vip-daily-gift p{margin:6px 0 0;font-size:12px;line-height:1.5;color:#665c75}

/* Landing-first entry screen: explain the game before showing the lobby. */
body.landing:not(.in-game) main{display:flex;flex-direction:column;gap:24px;height:auto;min-height:0;max-height:none;flex:none;padding:22px 0 40px}
body.landing:not(.in-game) #welcome{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.85fr);gap:18px;width:100%;max-width:none;margin:0;align-items:stretch}
body.landing:not(.in-game) .welcome-copy{grid-area:auto;min-height:350px;height:auto;padding:34px;border-radius:24px;overflow:hidden}
body.landing:not(.in-game) .welcome h1{max-width:none;font-size:clamp(40px,4.2vw,62px);line-height:1.08;margin:10px 0 12px}
body.landing:not(.in-game) .welcome-copy>p{max-width:640px;font-size:16px;line-height:1.7;margin:0 0 12px}
body.landing:not(.in-game) .welcome-copy .badges{max-width:none;margin-top:14px}
body.landing:not(.in-game) .hero-buttons{display:flex;gap:10px;margin-top:18px;padding-top:0}
body.landing:not(.in-game) .hero-buttons button{min-height:48px;padding:12px 18px;font-size:14px}
body.landing:not(.in-game) .auth-entry{justify-content:flex-start;margin-top:12px;font-size:13px}
body.landing:not(.in-game) .auth-entry button{min-height:36px;font-size:13px}
body.landing:not(.in-game) .welcome-guide-preview{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:26px;border:1px solid #ddd2f3;border-radius:24px;background:linear-gradient(145deg,#f7f2ff,#fff);box-shadow:0 4px 0 #e8dfed}
body.landing:not(.in-game) .welcome-guide-preview .eyebrow{color:#7352bb}
body.landing:not(.in-game) .welcome-guide-preview h2{margin:8px 0 14px;color:#292342;font-size:26px}
body.landing:not(.in-game) .welcome-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
body.landing:not(.in-game) .welcome-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start}
body.landing:not(.in-game) .welcome-steps li>span,.guide-number{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#eee6ff;color:#6841c8;font-weight:800}
body.landing:not(.in-game) .welcome-steps strong{display:block;color:#292342;font-size:14px}
body.landing:not(.in-game) .welcome-steps p{margin:3px 0 0;color:#706985;font-size:12px;line-height:1.55}
body.landing:not(.in-game) .guide-jump{align-self:flex-start;margin-top:16px;color:#6841c8;font-size:13px;font-weight:750;text-decoration:none}
body.landing:not(.in-game) .home-guide{grid-column:1/-1;min-width:0;padding:28px;border:1px solid #e4ddee;border-radius:24px;background:#fff;box-shadow:0 4px 0 #eee9f2}
body.landing:not(.in-game) .home-guide-heading{max-width:780px;margin-bottom:20px}
body.landing:not(.in-game) .home-guide-heading .eyebrow{color:#7653bd}
body.landing:not(.in-game) .home-guide-heading h2{margin:6px 0;color:#292342;font-size:clamp(24px,3vw,34px)}
body.landing:not(.in-game) .home-guide-heading p{margin:0;color:#6e6781;font-size:14px;line-height:1.7}
body.landing:not(.in-game) .guide-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.landing:not(.in-game) .guide-card{min-width:0;padding:16px;border:1px solid #eee8f5;border-radius:16px;background:#fcfbff}
body.landing:not(.in-game) .guide-card h3{margin:10px 0 6px;color:#302948;font-size:15px;line-height:1.35}
body.landing:not(.in-game) .guide-card p{margin:0;color:#6e6781;font-size:12px;line-height:1.65}
body.landing:not(.in-game) .guide-rules{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
body.landing:not(.in-game) .guide-rules>div{padding:18px;border-radius:16px;background:#f7f5fb}
body.landing:not(.in-game) .guide-rules h3{margin:0 0 8px;color:#302948;font-size:16px}
body.landing:not(.in-game) .guide-rules ul{display:grid;gap:7px;margin:0;padding-left:20px;color:#625c73;font-size:13px;line-height:1.6}
body.landing:not(.in-game) .guide-rules p{margin:0;color:#625c73;font-size:13px;line-height:1.65}
body.landing:not(.in-game) .guide-rules .text-button{margin-top:8px}
body.landing:not(.in-game) .weekly-showcase{grid-area:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-width:none;height:auto;justify-self:stretch;align-items:stretch}
body.landing:not(.in-game) .weekly-showcase .weekly-section,body.landing:not(.in-game) .weekly-showcase .weekly-star{height:auto;min-height:260px;padding:22px}
body.landing:not(.in-game) .weekly-showcase .weekly-section{order:0}
body.landing:not(.in-game) .weekly-showcase .weekly-star{order:1}
@media(max-width:900px){
 body.landing:not(.in-game) .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.landing:not(.in-game) #welcome{grid-template-columns:minmax(0,1fr) minmax(280px,.9fr)}
}
@media(max-width:760px){
 body.landing:not(.in-game) main{gap:16px;padding:12px 0 28px}
 body.landing:not(.in-game) #welcome{grid-template-columns:minmax(0,1fr);gap:12px}
 body.landing:not(.in-game) .welcome-copy{min-height:0;padding:22px}
 body.landing:not(.in-game) .welcome h1{font-size:clamp(34px,9vw,48px);margin:8px 0}
 body.landing:not(.in-game) .welcome-copy>p{font-size:14px;line-height:1.65}
 body.landing:not(.in-game) .hero-buttons{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;gap:8px}
 body.landing:not(.in-game) .hero-buttons button{min-height:48px;padding:10px 8px;font-size:13px}
 body.landing:not(.in-game) .welcome-guide-preview{padding:20px}
 body.landing:not(.in-game) .welcome-guide-preview h2{font-size:23px}
 body.landing:not(.in-game) .home-guide{padding:20px}
 body.landing:not(.in-game) .guide-cards{grid-template-columns:minmax(0,1fr)}
 body.landing:not(.in-game) .guide-rules{grid-template-columns:minmax(0,1fr);gap:10px}
 body.landing:not(.in-game) .weekly-showcase{grid-template-columns:minmax(0,1fr);gap:12px}
 body.landing:not(.in-game) .weekly-showcase .weekly-section,body.landing:not(.in-game) .weekly-showcase .weekly-star{min-height:0;padding:18px}
}


/* Warm studio landing: cream canvas, sage green, peach accents, and hand-drawn art. */
body.landing:not(.in-game){
  --landing-ink:#263b30;
  --landing-muted:#68756a;
  --landing-green:#3e7154;
  --landing-green-dark:#2e5841;
  --landing-peach:#e58d70;
  --landing-paper:#fffdf7;
  --landing-line:#e9dfce;
  color:var(--landing-ink);
  background:
    radial-gradient(ellipse at 9% 4%,rgba(207,225,197,.56),transparent 34rem),
    radial-gradient(ellipse at 94% 12%,rgba(249,218,197,.45),transparent 30rem),
    #f7f4eb;
}
body.landing:not(.in-game) .site-header,
body.landing:not(.in-game) main,
body.landing:not(.in-game) footer{width:min(1200px,calc(100% - 48px));max-width:1200px}
body.landing:not(.in-game) .site-header{height:70px;margin:0 auto;border-bottom:1px solid rgba(83,105,81,.12)}
body.landing:not(.in-game) .logo{color:var(--landing-ink)}
body.landing:not(.in-game) .server-status{background:#edf4e9;border-color:#d8e6d2;color:#3d6d4c}
body.landing:not(.in-game) main{gap:20px;padding:22px 0 34px}
body.landing:not(.in-game) #welcome{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:18px;align-items:stretch}
body.landing:not(.in-game) .welcome-copy{
  position:relative;isolation:isolate;min-height:0;padding:clamp(26px,4vw,46px);
  border:1px solid var(--landing-line);border-radius:22px;overflow:hidden;
  background:var(--landing-paper);box-shadow:0 10px 28px rgba(71,80,58,.07);
}
body.landing:not(.in-game) .welcome-copy:after{
  content:"";position:absolute;z-index:-1;width:230px;height:230px;right:-108px;bottom:-126px;
  border:24px solid rgba(224,238,215,.78);border-radius:50%;
}
body.landing:not(.in-game) .welcome-copy>.eyebrow,
body.landing:not(.in-game) .welcome-guide-preview>.eyebrow,
body.landing:not(.in-game) .home-guide-heading>.eyebrow{
  color:#64835f;font-size:11px;letter-spacing:1.8px;font-weight:850
}
body.landing:not(.in-game) .welcome h1{
  max-width:600px;margin:12px 0;font-size:clamp(38px,4.3vw,54px);
  line-height:1.04;letter-spacing:-1.6px;color:var(--landing-ink)
}
body.landing:not(.in-game) .welcome h1 em{color:var(--landing-peach);font-style:normal}
body.landing:not(.in-game) .welcome-copy>p{max-width:560px;margin:0;color:var(--landing-muted);font-size:15px;line-height:1.7}
body.landing:not(.in-game) .hero-buttons{margin-top:20px;gap:10px}
body.landing:not(.in-game) .hero-buttons button{min-height:46px;border-radius:12px;font-size:14px;font-weight:800}
body.landing:not(.in-game) .hero-buttons #quickPlay{background:var(--landing-green);border:1px solid var(--landing-green);color:#fff;box-shadow:0 3px 0 #2f5a43}
body.landing:not(.in-game) .hero-buttons #quickPlay:hover{background:var(--landing-green-dark)}
body.landing:not(.in-game) .hero-buttons #quickCreate{background:#f7e6db;border:1px solid #edd3c5;color:#744a39;box-shadow:0 3px 0 #ebd6c8}
body.landing:not(.in-game) .auth-entry{color:#788278}
body.landing:not(.in-game) .auth-entry .text-button,
body.landing:not(.in-game) .guide-jump{color:var(--landing-green-dark)}
body.landing:not(.in-game) .welcome-copy .badges{gap:8px}
body.landing:not(.in-game) .welcome-copy .badges span{padding:7px 10px;border:1px solid #e5e9dc;border-radius:999px;background:#f5f7ef;color:#596c59;font-size:11px}
body.landing:not(.in-game) .welcome-guide-preview{
  justify-content:flex-start;padding:20px;border:1px solid #dbe5d4;border-radius:22px;
  background:#eaf1e5;box-shadow:0 5px 0 #dce6d5
}
body.landing:not(.in-game) .welcome-art{
  display:flex;align-items:center;justify-content:center;width:100%;height:clamp(132px,17vw,188px);
  margin:0 0 17px;overflow:hidden;border:1px solid rgba(107,133,96,.13);border-radius:16px;
  background:#f8f5ea
}
body.landing:not(.in-game) .welcome-art img{display:block;width:100%;height:100%;object-fit:contain}
body.landing:not(.in-game) .welcome-guide-preview h2{margin:6px 0 12px;color:var(--landing-ink);font-size:23px}
body.landing:not(.in-game) .welcome-steps{gap:10px}
body.landing:not(.in-game) .welcome-steps li{grid-template-columns:31px minmax(0,1fr);gap:9px}
body.landing:not(.in-game) .welcome-steps li>span{
  width:29px;height:29px;border-radius:50%;background:#d6e6d1;color:#3e7154;font-size:11px
}
body.landing:not(.in-game) .welcome-steps strong{color:#314c39;font-size:13px}
body.landing:not(.in-game) .welcome-steps p{color:#697969;font-size:11px}
body.landing:not(.in-game) .guide-jump{margin-top:12px;font-size:12px}
body.landing:not(.in-game) .home-guide{
  padding:26px;border:1px solid var(--landing-line);border-radius:22px;background:var(--landing-paper);
  box-shadow:0 7px 20px rgba(71,80,58,.045)
}
body.landing:not(.in-game) .home-guide-heading{margin-bottom:16px}
body.landing:not(.in-game) .home-guide-heading h2{color:var(--landing-ink);font-size:clamp(24px,3vw,32px);letter-spacing:-.5px}
body.landing:not(.in-game) .home-guide-heading p{color:var(--landing-muted)}
body.landing:not(.in-game) .guide-cards{gap:10px}
body.landing:not(.in-game) .guide-card{padding:15px;border-color:#eee7d9;border-radius:15px;background:#fbf8f0}
body.landing:not(.in-game) .guide-number{width:30px;height:30px;border-radius:50%;background:#dce9d5;color:#3e7154}
body.landing:not(.in-game) .guide-card h3{color:#354b38;font-size:14px}
body.landing:not(.in-game) .guide-card p{color:#6b766b}
body.landing:not(.in-game) .guide-rules{gap:12px;margin-top:12px}
body.landing:not(.in-game) .guide-rules>div{padding:16px;border:1px solid #e9e8d9;border-radius:15px;background:#f3f4e9}
body.landing:not(.in-game) .guide-rules>div+div{border-color:#f0dfd4;background:#fbf0e8}
body.landing:not(.in-game) .guide-rules h3{color:#354b38}
body.landing:not(.in-game) .guide-rules ul,
body.landing:not(.in-game) .guide-rules p{color:#657166}
body.landing:not(.in-game) .weekly-showcase{gap:16px}
body.landing:not(.in-game) .weekly-showcase .weekly-section,
body.landing:not(.in-game) .weekly-showcase .weekly-star{
  min-height:230px;padding:20px;border:1px solid #e6dfcf;border-radius:19px;
  box-shadow:0 6px 18px rgba(71,80,58,.05)
}
body.landing:not(.in-game) .weekly-showcase .weekly-section{background:#fffdf8}
body.landing:not(.in-game) .weekly-showcase .weekly-star{background:#fbf0e5;border-color:#efdacb}
body.landing:not(.in-game) .weekly-showcase .section-head h2,
body.landing:not(.in-game) #weeklyStarTitle{color:#354b38}
body.landing:not(.in-game) .weekly-showcase .panel-description,
body.landing:not(.in-game) .weekly-showcase .star-footnote{color:#718071}
body.landing:not(.in-game) .weekly-showcase .icon-star{color:#789568}
body.landing:not(.in-game) footer{color:#7a8275}
@media(max-width:900px){
  body.landing:not(.in-game) #welcome{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr)}
  body.landing:not(.in-game) .welcome-art{height:145px}
}
@media(max-width:760px){
  body.landing:not(.in-game) .site-header,
  body.landing:not(.in-game) main,
  body.landing:not(.in-game) footer{width:calc(100% - 32px);max-width:600px}
  body.landing:not(.in-game) .site-header{height:62px}
  body.landing:not(.in-game) main{gap:14px;padding:12px 0 24px}
  body.landing:not(.in-game) #welcome{grid-template-columns:minmax(0,1fr);gap:12px}
  body.landing:not(.in-game) .welcome-copy{padding:22px;border-radius:18px}
  body.landing:not(.in-game) .welcome h1{font-size:clamp(36px,9vw,46px);letter-spacing:-1px}
  body.landing:not(.in-game) .welcome-copy>p{font-size:14px;line-height:1.6}
  body.landing:not(.in-game) .hero-buttons{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
  body.landing:not(.in-game) .hero-buttons button{width:100%;min-height:46px}
  body.landing:not(.in-game) .welcome-guide-preview{padding:15px;border-radius:18px}
  body.landing:not(.in-game) .welcome-art{height:150px;margin-bottom:13px}
  body.landing:not(.in-game) .welcome-guide-preview h2{font-size:21px}
  body.landing:not(.in-game) .welcome-steps{gap:9px}
  body.landing:not(.in-game) .welcome-steps p{font-size:11px}
  body.landing:not(.in-game) .home-guide{padding:18px;border-radius:18px}
  body.landing:not(.in-game) .guide-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  body.landing:not(.in-game) .guide-card{padding:13px}
  body.landing:not(.in-game) .guide-rules{grid-template-columns:minmax(0,1fr);gap:8px}
  body.landing:not(.in-game) .weekly-showcase{grid-template-columns:minmax(0,1fr);gap:10px}
  body.landing:not(.in-game) .weekly-showcase .weekly-section,
  body.landing:not(.in-game) .weekly-showcase .weekly-star{min-height:0;padding:16px;border-radius:16px}
}