@font-face{font-family:Nunito;src:url('nunito-regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:Nunito;src:url('nunito-bold.ttf') format('truetype');font-weight:600 800;font-display:swap} @font-face{font-family:Nunito;src:url('nunito.ttf') format('truetype');font-weight:900;font-display:swap} :root{--page:#f2f6eb;--surface:#fffef7;--soft:#e2eddd;--ink:#183d29;--muted:#4f6b56;--line:#c7d7bd;--accent:#ffc342;--accent-ink:#213215;--table:#126c35;--shadow:0 7px 24px #183d2909;--good:#23744e;--danger:#ba303e} :root[data-theme=dark]{--page:#09271b;--surface:#123626;--soft:#1b4b34;--ink:#fff7e5;--muted:#b9d1b3;--line:#42684b;--shadow:0 8px 25px #0002;--good:#8adab3;--danger:#ff9aa5} :root[data-theme] body{background:var(--page);color:var(--ink);font-family:Nunito,'Segoe UI',sans-serif} :root[data-theme]{background:var(--page);color:var(--ink)} :root[data-theme] :is(h1,h2,h3,h4){font-family:Nunito,'Segoe UI',sans-serif;color:var(--ink);font-weight:900;letter-spacing:-.035em} :root[data-theme] :is(button,input,select,textarea){font-family:inherit} :root[data-theme] :is(button:where(:not(.card,.damas-square,.hand-card,.domino-choice)),.button){background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:none} :root[data-theme] :is(button:where(:not(.card,.damas-square,.hand-card,.domino-choice)),.button):hover:not(:disabled){background:var(--soft);border-color:var(--muted)} :root[data-theme] :is(button.gold,.button.gold,.header-play,#create-table){background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800} :root[data-theme] :is(button.gold,.button.gold,.header-play,#create-table):hover{background:#ffd36e;border-color:#ffd36e} :root[data-theme] :is(input,select,textarea){background:var(--page);color:var(--ink);border:1px solid var(--line);border-radius:10px} :root[data-theme] :is(input,textarea)::placeholder{color:var(--muted);opacity:1} :root[data-theme] :is(a,button,input,select,summary):focus-visible{outline:3px solid #e6a515;outline-offset:4px} :root[data-theme] .muted{color:var(--muted)} :root[data-theme] .community-counts dd{color:var(--ink)} :root[data-theme] :is(.community-counts dt,.news-entry .date){color:var(--muted)} :root[data-theme] :is(.community-counts dl,.news-entry){border-color:var(--line)} :root[data-theme] #rank-table{color:var(--ink)} :root[data-theme] .rank-scroll :is(caption,th){color:var(--muted)} :root[data-theme] .rank-scroll :is(th,td){border-color:var(--line)} :root[data-theme] .rank-scroll tr.my-ranking{background:var(--soft)} :root[data-theme] :is(.stat-summary>div,.stat-list>div){background:var(--surface);color:var(--ink);border-color:var(--line)} :root[data-theme] .stat-summary dt{color:var(--muted)} :root[data-theme] :is(.stat-summary dd,.stat-list dd){color:var(--ink)} :root[data-theme] :is(.landing-header,.topbar){background:var(--page);border-color:var(--line)} :root[data-theme] .brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none} :root[data-theme] .brand-art{display:block;position:relative;overflow:hidden;width:245px;height:60px;flex-shrink:0} :root[data-theme] .brand-art img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%!important;height:auto!important;max-width:none} .brand-art .brand-dark{display:none} :root[data-theme=dark] .brand-art .brand-light{display:none} :root[data-theme=dark] .brand-art .brand-dark{display:block} :root[data-theme] .theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;flex-shrink:0;font-size:23px;line-height:1;border-radius:50%} :root[data-theme] .landing-header{padding:14px 28px;max-width:1440px;gap:24px} :root[data-theme] .landing-header nav{color:var(--ink);gap:24px} :root[data-theme] .landing-header .public-menu-body{gap:18px} :root[data-theme] .public-language{color:var(--muted)} :root[data-theme] .public-menu-body{border-color:var(--line)} :root[data-theme] .landing main{max-width:1440px;padding:0 28px;display:flex;flex-direction:column} .landing-hero{order:0}.landing #jogos{order:1}.landing #com-amigos{order:2}.landing .editorial-row{order:3} :root[data-theme] .landing-hero{grid-template-columns:1fr 1.1fr;gap:32px;min-height:0;padding:30px 0 36px} :root[data-theme] .landing h1{font-size:clamp(44px,5.8vw,80px);line-height:1.04;letter-spacing:-.045em;margin:18px 0 22px;font-weight:900} :root[data-theme] .landing h1 em{font:inherit;color:var(--ink);position:relative;font-style:normal} :root[data-theme] .landing h1 em:after{content:'';display:block;width:100px;height:6px;border-radius:50%;background:var(--accent);margin-top:14px} :root[data-theme] .landing .eyebrow{color:var(--muted);font-size:11px;letter-spacing:.15em} :root[data-theme] .landing .hero-intro{color:var(--ink);font-size:19px;line-height:1.6;max-width:530px} :root[data-theme] .landing .actions{gap:14px;flex-wrap:wrap} :root[data-theme] .landing .actions .button{padding:15px 22px;font-weight:800;font-size:16px} :root[data-theme] .landing :is(.entry-note,.learn-link){color:var(--muted);font-size:13px} .brand-hero{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:4/3;background:var(--soft)} .brand-hero img{display:block;width:100%;height:100%;object-fit:cover} .brand-hero .hero-dark{display:none} :root[data-theme=dark] .brand-hero .hero-light{display:none} :root[data-theme=dark] .brand-hero .hero-dark{display:block} :root[data-theme] .landing .section-heading{margin:8px 0 18px} :root[data-theme] .landing h2{font-size:30px;line-height:1.2} :root[data-theme] .landing .text-link{color:var(--ink);border-color:var(--line)} :root[data-theme] .game-shelf{gap:18px;row-gap:18px;margin-bottom:30px} :root[data-theme] .game-feature{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s} :root[data-theme] .game-feature:hover{transform:translateY(-3px);border-color:var(--muted)} :root[data-theme] .game-art{height:155px;border:0;background:none;overflow:hidden} :root[data-theme] .game-number{display:none} :root[data-theme] .game-label{padding:6px 4px 8px;justify-content:center;text-align:center;color:var(--ink)} :root[data-theme] .game-label>span{display:none} :root[data-theme] .game-label h3{font-size:23px;margin:3px 0} :root[data-theme] .game-label p{color:var(--muted);font-size:13px;margin:6px 0} :root[data-theme] .single-card{top:16px} :root[data-theme] .small-fan{top:16px} :root[data-theme] .checker-board{background:repeating-conic-gradient(#ffc342 0% 25%,#173351 0% 50%) 50% / 40px 40px;border-color:#213957} :root[data-theme] :is(.friends-panel,.learn-panel,.premium-panel){background:var(--soft);border:1px solid var(--line);border-radius:18px;color:var(--ink);box-shadow:none} :root[data-theme] .friends-panel{margin:0 0 28px;padding:24px 28px} :root[data-theme] :is(.friends-panel,.learn-panel,.premium-panel) p{color:var(--muted)} :root[data-theme] .friends-panel h2{font-size:23px;margin:0 0 8px} :root[data-theme] .friends-panel .eyebrow{display:none} :root[data-theme] :is(.landing-footer,.public-ad){color:var(--muted);border-color:var(--line);background:var(--page)} :root[data-theme] .landing-footer .brand{color:var(--ink)} /* Editorial pages share the same surfaces and type. */ :root[data-theme] :is(.reading-aside,.information-copy,.faq-list details,.premium-offer){background:var(--surface);color:var(--ink);border-color:var(--line)} :root[data-theme] :is(.rules-copy,.breadcrumb,.game-tabs,.information-heading){color:var(--muted);border-color:var(--line)} :root[data-theme] :is(.game-tabs a,.rules-copy a){color:var(--ink)} /* The game retains its existing events, permissions and table state. */ :root[data-theme] .topbar{height:78px;padding:8px 28px;gap:12px} :root[data-theme] .topbar .brand-art{width:215px;height:54px} :root[data-theme] :is(.menu-dialog,.login-panel,.lobby-card,.side-panel,.room-card,.room-people,.room-log,.feature-form,.account-name,.tournament-match,.dock,.video-stage){background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)} :root[data-theme] :is(.menu-dialog h3,.feature-dialog h3,.room-card h3,.detail-score strong){color:var(--ink)} :root[data-theme] :is(.menu-dialog select,.feature-form select,.community-dialog select){background:var(--page);color:var(--ink);border-color:var(--line)} :root[data-theme] :is(.room-system,.room-message,.search-result,.menu-pending,.detail-player,.game-top,.lobby-tabs,.lobby-extras,.filters){color:var(--muted);border-color:var(--line)} :root[data-theme] :is(.room-system,.room-message){background:var(--soft)} :root[data-theme] :is(.room-message strong,.member-summary small,.rooms-count,.lobby-extras summary,.menu-links a span,.menu-pending small,.social-links){color:var(--muted)} :root[data-theme] .welcome{gap:60px;min-height:600px;align-items:center} :root[data-theme] .welcome h1{font-size:clamp(40px,4.6vw,66px);font-weight:900;line-height:1.07} :root[data-theme] .welcome h1 em{font:inherit;color:var(--ink)} :root[data-theme] .welcome-copy>p{color:var(--muted)} :root[data-theme] .welcome-cards{height:260px;background:url('hero-day.png') center 42%/cover;border-radius:20px;margin-top:30px} :root[data-theme=dark] .welcome-cards{background-image:url('hero-night.png')} .welcome-cards img{visibility:hidden} :root[data-theme] .login-panel{border-radius:22px;padding:30px} :root[data-theme] .game-picker{display:flex;gap:10px;padding:0 0 20px;margin:0 0 20px;border-color:var(--line)} :root[data-theme] .game-picker :is(button,.offline-game){background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:13px;flex:1;min-width:108px;justify-content:center;min-height:64px} :root[data-theme] .game-picker button[aria-pressed=true]{background:#176538;color:#fff;border-color:#549465} :root[data-theme] .game-picker .game-emblem{color:#f34c50} :root[data-theme] .game-picker :is(button,.offline-game){align-items:center} :root[data-theme] .game-picker strong{font-family:inherit;line-height:1.3} :root[data-theme] .game-picker .game-emblem{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;line-height:1} :root[data-theme] .game-picker .game-emblem svg{display:block;width:24px;height:24px} :root[data-theme] #lobby h1{font-size:clamp(28px,3.5vw,46px);font-weight:900} :root[data-theme] .lobby-tabs>*{color:var(--muted)} :root[data-theme] .table-modes button[aria-pressed=true]{background:var(--soft);color:var(--ink);border-color:#dca52b} :root[data-theme] .lobby-card{border-radius:18px;padding:18px;overflow:hidden;min-width:0} :root[data-theme] .card-heading{font-size:13px;color:var(--ink);letter-spacing:0;font-weight:800} :root[data-theme] .card-heading span:last-child{font-size:11px;font-weight:600;background:var(--soft);padding:4px 8px;border-radius:20px;color:var(--muted)} :root[data-theme] .lobby-card h2{font-size:16px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:10px 0;color:var(--muted);font-weight:700} :root[data-theme] .mini-table{height:155px;background:radial-gradient(ellipse at center,#239b4e 0%,#08642e 55%,transparent 57%)} :root[data-theme] .mini-table>b{color:#f5f1e8;font-size:25px;opacity:.35} :root[data-theme] .mini-seat{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:20px;font-size:11px} :root[data-theme] .mini-seat .user-photo{width:30px;height:30px;background:var(--soft);border:2px solid var(--line)} :root[data-theme] .lobby-card.empty-table .mini-table{display:grid} :root[data-theme] .mini-seat.free-seat{background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent);font-weight:900;box-shadow:0 0 0 3px #126c35} .mini-seat.free-seat::before{content:'+';font-size:17px;line-height:1;margin-right:5px} :root[data-theme] .mobile-game-tools .game-icon-button{display:grid;place-items:center;width:42px;height:42px;min-width:42px;padding:9px} .game-icon-button svg{display:block;width:22px;height:22px} :root[data-theme] .match-score{color:var(--ink)} :root[data-theme] .match-score b{color:var(--ink)} :root[data-theme] .match-score :is(.score-team,span>span){color:var(--muted)} :root[data-theme] #trump.seat-trump{position:absolute;top:0;left:calc(50% + 30px);display:flex;flex-direction:column;gap:2px;pointer-events:none;width:40px} :root[data-theme] .seat.right #trump.seat-trump{left:auto;right:calc(50% + 30px)} :root[data-theme] #trump.seat-trump .trump-label{font-size:9px;line-height:1.2;color:var(--ink);background:var(--surface);padding:2px 4px;border-radius:4px} :root[data-theme] #trump.seat-trump .trump-card{width:34px;height:49px;min-width:0;font-size:10px;padding:3px} :root[data-theme] #trump.seat-trump .trump-card>b{font-size:19px} :root[data-theme] .trump-suit{display:grid;place-items:center;border-radius:50%;width:32px;height:32px;background:#fff8e6;color:#142f50;border:2px solid #ffc342;font-size:24px;line-height:1} :root[data-theme] .trump-suit.red{color:#d92e3b} @media(max-width:700px){:root[data-theme] #trump.seat-trump{left:calc(50% + 20px)}:root[data-theme] .seat.right #trump.seat-trump{left:auto;right:calc(50% + 20px)}:root[data-theme] #trump.seat-trump .trump-card{width:28px;height:40px;font-size:9px}:root[data-theme] #trump.seat-trump .trump-card>b{font-size:16px}} :root[data-theme] .card-bottom{color:var(--muted);gap:7px;flex-wrap:wrap;margin-top:16px} :root[data-theme] .card-bottom button{font-weight:800;flex:1} :root[data-theme] .card-bottom>span{width:100%;font-size:12px;margin-bottom:2px} :root[data-theme] .table-grid{gap:18px} :root[data-theme] .felt{background:radial-gradient(ellipse,#239b4e,#08642e 75%);border-color:#537b32} :root[data-theme] .seat :is(strong,.avatar){background:var(--surface);color:var(--ink);border-color:var(--line)} :root[data-theme] :is(.table-status,.seat small){color:var(--muted)} :root[data-theme] .ad-content{background:var(--soft);color:var(--muted);border-color:var(--line)} :root[data-theme] .notice{background:var(--surface);color:var(--ink);border-color:var(--accent)} :root[data-theme] .menu-links a:hover{background:var(--soft)} .lobby-content{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:22px} .lobby-aside{display:flex;flex-direction:column;gap:18px} .lobby-aside section{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)} .lobby-aside h2{font-size:20px;margin:0 0 14px}.lobby-aside p{font-size:14px;color:var(--muted);line-height:1.6} .lobby-aside a{color:var(--ink);font-weight:800;font-size:14px}.lobby-friend{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)} .lobby-friend:last-child{border:0}.lobby-friend img{width:34px;height:34px}.lobby-friend span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px}.lobby-friend small{display:block;color:var(--good)} .lobby-help-icon{display:block;width:90px;height:90px;margin:8px auto 18px} :root[data-theme] .lobby-title-bar #create-table{flex-shrink:0;padding:13px 20px;font-size:15px} :root[data-theme] .lobby-title-bar #open-statistics{order:3} :root[data-theme] .table-controls #random-table{margin-left:auto;font-size:12px;background:transparent;border-color:transparent} :root[data-theme] .compact-game-select{margin:0 0 18px;background:transparent;border:0} :root[data-theme] .lobby-results-bar{border-color:var(--line)} :root[data-theme] .lobby-results-bar #table-count{color:var(--muted)} :root[data-theme] .topbar button{font-size:13px} :root[data-theme] .game-picker strong{font-size:15px} :root[data-theme] .play-workspace main{padding-top:24px} @media(max-width:700px){:root[data-theme] .lobby-title-bar{flex-wrap:wrap}:root[data-theme] .lobby-title-bar #lobby-title{flex-basis:100%;font-size:30px}:root[data-theme] .lobby-title-bar #create-table{padding:9px 16px}:root[data-theme] .lobby-title-bar #open-statistics{margin-left:auto}:root[data-theme] .table-controls #random-table{margin-left:0}:root[data-theme] .compact-game-select summary{color:var(--ink);background:var(--surface);border-color:var(--line)}} @media(min-width:1200px){:root[data-theme] .play-workspace{grid-template-columns:minmax(0,1fr);padding:0;max-width:1536px}.play-workspace .ad-reserved{display:none}:root[data-theme] .play-workspace.ads-eligible{grid-template-columns:minmax(0,1fr) 160px;padding-right:16px}.play-workspace.ads-eligible .ad-right{display:block}} @media(max-width:1200px){.lobby-content{grid-template-columns:minmax(0,1fr)}.lobby-aside{display:grid;grid-template-columns:1fr 1fr}:root[data-theme] .landing-header nav{gap:14px}:root[data-theme] .brand-art{width:210px}:root[data-theme] .landing-header .public-menu-body{gap:12px}:root[data-theme] .landing-header{gap:16px}} @media(max-width:950px){:root[data-theme] .landing-hero{gap:22px}:root[data-theme] .landing .hero-intro{font-size:16px}:root[data-theme] .game-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}:root[data-theme] .landing-header nav{gap:10px}.landing-header .classic-link{max-width:90px}:root[data-theme] .landing-header .brand-art{width:180px}} @media(max-width:700px){:root[data-theme] .landing-header .brand-art{width:205px;height:48px}:root[data-theme] .public-menu-body{background:var(--surface)}:root[data-theme] .landing main{padding:0 20px}:root[data-theme] .landing-hero{grid-template-columns:1fr;padding-top:24px;gap:24px}:root[data-theme] .landing h1{font-size:48px}:root[data-theme] .brand-hero{aspect-ratio:4/3}:root[data-theme] .landing .hero-intro{font-size:17px}:root[data-theme] .game-art{height:125px}:root[data-theme] .game-feature{padding:8px}:root[data-theme] .game-label h3{font-size:21px}:root[data-theme] .friends-panel{padding:22px}:root[data-theme] .friends-panel .button{white-space:normal}.lobby-aside{grid-template-columns:1fr}.lobby-aside section:first-child{display:none}:root[data-theme] .topbar{height:auto;min-height:70px;padding:8px 16px;flex-wrap:wrap}:root[data-theme] .topbar .brand-art{width:180px;height:46px}:root[data-theme] .topbar .brand{padding-right:0}:root[data-theme] .topbar .theme-toggle{width:34px;height:34px}:root[data-theme] .welcome{gap:24px;min-height:0}:root[data-theme] .welcome-cards{display:none}:root[data-theme] .welcome h1{font-size:40px}:root[data-theme] .game-picker{gap:7px}:root[data-theme] .game-picker :is(button,.offline-game){min-width:100px;min-height:50px}:root[data-theme] .game-picker strong{font-size:13px}.lobby-content{gap:16px}} @media(prefers-reduced-motion:reduce){.game-feature{transition:none!important}} /* A single tab is a heading, not an actionable control. Keep both tabs only when chat is available. */ .mobile-game-panel .side-panel>nav:has(#chat-tab[hidden]){display:none} :root[data-theme] .window-switcher{position:fixed;bottom:0;left:0;right:0;z-index:20;height:calc(76px + env(safe-area-inset-bottom,0px));padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center} :root[data-theme] .window-switcher[hidden]{display:none} :root[data-theme] body .window-switcher #dock{display:flex!important;position:static;transform:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:max-content;max-width:100%;overflow-x:auto;overflow-y:hidden;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:auto;scrollbar-color:var(--muted) var(--surface)} :root[data-theme] .window-switcher #dock>button{flex:none;text-align:left;white-space:nowrap;min-height:44px;margin:0;color:var(--ink)} :root[data-theme] .window-switcher #dock>button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} :root[data-theme] body.in-game.has-window-switcher .play-workspace{height:calc(100dvh - 76px - env(safe-area-inset-bottom,0px))!important;flex:none} :root[data-theme] .notice{bottom:calc(70px + env(safe-area-inset-bottom,0px))} :root[data-theme] .solitaire-page header{border-color:var(--line);align-items:center} :root[data-theme] .solitaire-page :is(p,.stats,#saved){color:var(--muted)} :root[data-theme] .solitaire-page #board{background:radial-gradient(ellipse at top,#239b4e,#08642e);border-color:#537b32} :root[data-theme] .solitaire-page .back{background:repeating-linear-gradient(45deg,#173655,#173655 5px,#244665 5px,#244665 10px);color:#ffc342} :root[data-theme] .solitaire-page .empty{background:#10432790;border-color:#a0c58c;color:#e1efd5} :root[data-theme] .solitaire-page #new{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} @media(max-width:700px){:root[data-theme] #lobby .lobby-title-bar #lobby-title{flex:0 0 100%;font-size:30px;margin-bottom:8px}:root[data-theme] .lobby-title-bar #open-statistics{order:2}:root[data-theme] #lobby .lobby-title-bar #create-table{order:1}} /* Collection lives outside the game render tree so subsequent packets cannot erase it. */ .trick-collection{position:fixed;inset:0;z-index:30;pointer-events:none} .trick-collection .collected-card{z-index:2} .trick-winner-ring{position:fixed;border:3px solid #ffc342;border-radius:50%;box-shadow:0 0 0 4px #ffc34225} /* Premium: readable payment data and direct access to account history. */ :root[data-theme] .premium-page main{max-width:1160px;margin:auto;padding:28px 28px 60px} :root[data-theme] .premium-page .information-heading{max-width:none;padding:24px 0 32px} :root[data-theme] .premium-page h1{font-size:clamp(40px,5vw,64px);line-height:1.1} :root[data-theme] .premium-page .hero-intro{font-size:21px;max-width:760px} :root[data-theme] .premium-page .information-copy{max-width:none;padding:32px;border:1px solid var(--line);border-radius:24px;margin-top:28px;background:var(--surface);font-size:19px;line-height:1.75} :root[data-theme] .premium-page .information-copy h2{font-size:30px;line-height:1.25;margin:0 0 22px} :root[data-theme] .premium-page .premium-features{gap:20px;margin-bottom:32px} :root[data-theme] .premium-page .premium-features p{background:var(--soft);border-color:var(--line);padding:24px;margin:0;line-height:1.9;font-size:19px;color:var(--ink)} :root[data-theme] .premium-page .migration-note{font-size:17px;color:var(--muted)} :root[data-theme] .premium-page .button{font-size:19px;padding:16px 24px;min-height:52px} :root[data-theme] .premium-dialog{width:min(760px,calc(100vw - 24px));padding:28px;font-size:18px;line-height:1.55} :root[data-theme] .premium-dialog .dialog-heading h2{font-size:30px;line-height:1.2} :root[data-theme] .premium-dialog :is(.muted,label,p,.community-row){font-size:18px;line-height:1.55} :root[data-theme] .premium-dialog :is(button,select,input){font-size:18px;min-height:48px;padding:12px 16px} :root[data-theme] .premium-dialog .premium-history{margin:20px 0 28px;padding:0;border:0} :root[data-theme] .premium-dialog .premium-history>button{width:100%;text-align:left} :root[data-theme] .premium-dialog .premium-reference{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--soft)} :root[data-theme] .premium-dialog .stat-list{margin:0 0 20px} :root[data-theme] .premium-dialog .stat-list>div{padding:16px 0;border-color:var(--line);gap:24px} :root[data-theme] .premium-dialog .stat-list dt{font-size:18px;color:var(--muted)} :root[data-theme] .premium-dialog .stat-list dd{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} :root[data-theme] .premium-dialog .premium-cancel-confirm button{margin:6px 10px 0 0} :root[data-theme] .notice{align-items:center;gap:14px;flex-wrap:wrap;font-size:18px;line-height:1.5} :root[data-theme] .notice button{min-height:44px;font-size:17px} @media(max-width:600px){:root[data-theme] .premium-page main{padding:20px 16px 40px}:root[data-theme] .premium-page .information-copy{padding:22px}:root[data-theme] .premium-dialog{padding:20px}:root[data-theme] .premium-dialog .dialog-heading h2{font-size:25px}:root[data-theme] .premium-dialog .premium-reference{padding:16px}:root[data-theme] .premium-dialog .stat-list>div{display:flex;flex-direction:column;gap:5px}:root[data-theme] .premium-dialog .stat-list dd{margin:0;font-size:25px}} :root[data-theme] .premium-dialog h3{font-size:20px;line-height:1.35;text-transform:none;letter-spacing:0;margin:20px 0 14px} /* Shared editorial layouts: help, account information, legal text and game rules. */ :root[data-theme] .information-page main{max-width:1160px;margin:auto;padding:28px 28px 60px} :root[data-theme] .information-page .information-heading{max-width:none;padding:24px 0 32px} :root[data-theme] .information-page h1{font-size:clamp(40px,5vw,64px);line-height:1.1} :root[data-theme] .information-page .hero-intro{font-size:21px;max-width:760px} :root[data-theme] .information-page .information-copy{max-width:none;padding:32px;border:1px solid var(--line);border-radius:24px;margin-top:28px;background:var(--surface);font-size:19px;line-height:1.75} :root[data-theme] .information-copy :is(h2,h3){line-height:1.3} :root[data-theme] .information-copy h2:first-child{margin-top:0} :root[data-theme] .information-copy details{padding:22px 0;border-color:var(--line)} :root[data-theme] .information-copy summary{font-size:21px;color:var(--ink);line-height:1.5} :root[data-theme] .information-copy :is(input,select,textarea,button){font-size:18px} :root[data-theme] #contact-form :is(input,textarea){background:var(--page);color:var(--ink);border-color:var(--line)} :root[data-theme] :is(#contact-verify,#faq-retry){background:var(--soft);color:var(--ink);border-color:var(--line)} :root[data-theme] .information-copy .migration-note{font-size:17px} :root[data-theme] .information-copy .article{color:var(--ink);font-family:inherit} :root[data-theme] .rules-layout{gap:36px;grid-template-columns:minmax(0,1fr) 300px} :root[data-theme] .rules-layout>.rules-copy{font-size:18px} :root[data-theme] .reading-aside{padding:0;border:0;background:transparent;min-width:0} :root[data-theme] .reading-card{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:22px} :root[data-theme] .reading-card h2{font-size:28px;line-height:1.25;margin:12px 0 18px} :root[data-theme] .reading-card p{font-size:17px;line-height:1.6;color:var(--muted)} :root[data-theme] .reading-card .eyebrow{font-size:12px} :root[data-theme] .reading-card .button{font-size:17px;min-height:48px;padding:12px 16px;white-space:normal} :root[data-theme] .reading-aside .public-ad{margin-top:24px;max-width:100%;box-sizing:border-box} :root[data-theme] .rules-copy :is(td,th){border-color:var(--line)} @media(max-width:900px){:root[data-theme] .rules-layout{grid-template-columns:minmax(0,1fr)}:root[data-theme] .reading-aside{width:100%;max-width:500px}} @media(max-width:600px){:root[data-theme] .information-page main{padding:20px 16px 40px}:root[data-theme] .information-page .information-copy{padding:22px}:root[data-theme] .information-copy summary{font-size:19px}:root[data-theme] .information-page .hero-intro{font-size:19px}} :root[data-theme] .rules-copy img[src*="/rules/rules/"]{display:block;width:auto;height:auto;max-width:100%;margin:24px 0;border-radius:12px} /* Management and account confirmation use the same palette as the game client. */ :root[data-theme] :is(.staff-header,.staff-sidebar,.staff-content,.staff-entry,.staff-page dialog){background:var(--surface);color:var(--ink);border-color:var(--line)} :root[data-theme] .staff-page :is(.eyebrow,.environment,.staff-identity,.NoRows){color:var(--muted)} :root[data-theme] .staff-page .brand{font-family:inherit;font-weight:900;color:var(--ink)} :root[data-theme] .staff-page :is(input,select,textarea){background:var(--page);color:var(--ink);border-color:var(--line)} :root[data-theme] .staff-page :is(input[type=button],input[type=submit],input[type=reset]){background:var(--soft);color:var(--ink);border-color:var(--line)} :root[data-theme] .staff-page :is(th,.MouseOver,.Selected,tr[onclick]:hover,.staff-sidebar a:hover,.staff-sidebar a[aria-current]){background:var(--soft);color:var(--ink)} :root[data-theme] .staff-page :is(td,th,.history-player){border-color:var(--line)} :root[data-theme] .staff-page :is(.staff-content a,.staff-sidebar h2,.staff-user-detail>.AdminFormHolder>tbody>tr>td>.AdminForm>tbody>tr>td:first-child){color:var(--ink)} :root[data-theme] .staff-content :is([style*="color:Red"],[style*="color:red"]){color:var(--danger)!important} /* Reserve separate rows for the upper player, turn message and every board size. */ :root[data-theme] body.in-game #game.damas-game .table-status{top:76px;left:0;width:100%;max-width:none;text-align:center} :root[data-theme] body.in-game #game.damas-game .table-status p{max-width:none;margin-left:auto;margin-right:auto} :root[data-theme] body.in-game #game.damas-game .trick{top:124px;width:min(calc(100% - 16px),calc((100dvh - 400px) * var(--board-ratio,1)),600px);max-width:none} :root[data-theme] .damas-board{border-color:var(--line)} @media(min-width:701px) and (min-height:551px){:root[data-theme] body.in-game #game.damas-game .table-status{top:124px}:root[data-theme] body.in-game #game.damas-game .trick{top:172px;width:min(calc(100% - 16px),calc((100dvh - 500px) * var(--board-ratio,1)),600px)}} @media(max-width:700px) and (min-height:551px){:root[data-theme] body.in-game #game.domino-game .trick{left:calc(82px + 8px);right:calc(82px + 8px);width:auto}} @media(max-height:550px) and (min-width:600px){:root[data-theme] body.in-game #game.damas-game .table-status{top:0;left:0;width:20%;max-width:150px}:root[data-theme] body.in-game #game.damas-game .trick{top:8px;width:min(54vw,calc((100dvh - 160px) * var(--board-ratio,1)))}} @media(max-width:700px){:root[data-theme] .public-menu .classic-link{max-width:none}:root[data-theme] .public-menu nav{width:100%;margin:0}:root[data-theme] .public-menu nav a{min-height:44px;display:flex;align-items:center}} /* Team identity stays stable when seats rotate; text also identifies each team. */ :root[data-theme] .team-1{--team-color:#8ccaff;--team-fill:#143d65} :root[data-theme] .team-2{--team-color:#ffd09b;--team-fill:#60380f} :root[data-theme=light] .team-1{--team-color:#124f88;--team-fill:#e2f0ff} :root[data-theme=light] .team-2{--team-color:#874000;--team-fill:#fff0de} :root[data-theme] #game .seat:is(.team-1,.team-2){border:2px solid var(--team-color);background:var(--team-fill)} :root[data-theme] #game .seat .seat-team{display:block;color:var(--team-color);font-weight:800;font-size:12px} :root[data-theme] #game .seat:is(.team-1,.team-2) small{opacity:1} :root[data-theme] #game .team-score .score-team{display:block;color:var(--team-color);background:var(--team-fill);border:1px solid var(--team-color);border-radius:8px;padding:5px 8px;font-weight:800} @media(max-width:700px){:root[data-theme] #game .team-score{grid-template-columns:auto auto auto;gap:2px 5px}:root[data-theme] #game .team-score .score-team{grid-row:1;padding:2px 4px;font-size:10px}:root[data-theme] #game .team-score .team-1{grid-column:1}:root[data-theme] #game .team-score .team-2{grid-column:3}:root[data-theme] #game .team-score>b,:root[data-theme] #game .team-score>i{grid-row:2}:root[data-theme] #game .seat .seat-team{font-size:10px}} :root[data-theme] #game .seat:is(.team-1,.team-2) small{display:block;line-height:1.3} /* Essential game information remains on the table, including on touch screens. */ :root[data-theme] #game.card-table .match-score{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(560px,60%);padding:0} :root[data-theme] #game .team-total{display:grid;gap:3px;background:var(--team-fill);color:var(--team-color);border:1px solid var(--team-color);border-radius:10px;padding:6px 10px} :root[data-theme] #game .team-total .score-team{border:0;padding:0;background:transparent;font-size:13px;white-space:normal} :root[data-theme] #game .team-total>strong{font-size:21px;line-height:1.1} :root[data-theme] #game .team-total small{font-size:12px;font-weight:400} :root[data-theme] #game .team-total .hand-total{font-size:12px} :root[data-theme] #game .team-total .hand-total b{font-size:16px;color:inherit} :root[data-theme] #game .seat-summary{display:grid;gap:2px;font-size:12px;line-height:1.3;color:var(--ink);padding:3px} :root[data-theme] #game .last-play b{display:inline-block;background:#fff8e9;color:#172535;border-radius:4px;padding:1px 5px;font:700 16px Arial,sans-serif} :root[data-theme] #game .last-play b.red{color:#b31c24} :root[data-theme] #game.card-table .arena{max-width:1060px;margin:auto} :root[data-theme] #game.card-table .felt{inset:15% 12% 23%;width:auto;height:auto} :root[data-theme] #game.card-table .seat{width:160px;padding:4px} :root[data-theme] #game.card-table .seat.top{top:0} :root[data-theme] #game.card-table .seat.bottom{bottom:16%} :root[data-theme] #game.card-table .seat.left,:root[data-theme] #game.card-table .seat.right{top:36%} :root[data-theme] #game.card-table .trick-card .playing-card{width:78px;height:112px;padding:6px;font:700 20px Arial,sans-serif} :root[data-theme] #game.card-table .trick-card .playing-card>b{font-size:36px} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-15px,-110px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-65px,5px) rotate(-4deg)} :root[data-theme] #game.card-table .trick-card.left{transform:translate(-112px,-62px) rotate(-10deg)} :root[data-theme] #game.card-table .trick-card.right{transform:translate(32px,-62px) rotate(10deg)} :root[data-theme] #game.card-table .hand .playing-card{font-family:Arial,sans-serif;font-size:20px} :root[data-theme] button.lobby-friend{display:flex;width:100%;text-align:left;align-items:center;gap:10px;padding:8px;border:1px solid transparent;background:transparent;color:var(--ink);min-height:48px} :root[data-theme] button.lobby-friend:hover,:root[data-theme] button.lobby-friend:focus-visible{background:var(--surface);border-color:var(--accent)} @media(max-width:700px){ :root[data-theme] #game.card-table .game-top{flex-wrap:wrap;gap:6px;padding-bottom:6px} :root[data-theme] #game.card-table .match-score{order:3;width:100%;gap:6px} :root[data-theme] #game.card-table .team-total{padding:4px;gap:2px} :root[data-theme] #game.card-table .team-total .score-team{font-size:11px} :root[data-theme] #game.card-table .team-total>strong{font-size:18px} :root[data-theme] #game.card-table .team-total .hand-total{font-size:11px} :root[data-theme] #game.card-table .seat{width:98px;padding:2px} :root[data-theme] #game.card-table .seat .avatar{width:28px;height:28px} :root[data-theme] #game.card-table .seat small{font-size:9px} :root[data-theme] #game.card-table .seat-summary{font-size:10px;gap:0;padding:2px 0} :root[data-theme] #game.card-table .last-play b{font-size:14px} :root[data-theme] #game.card-table .felt{inset:18% 5% 27%} :root[data-theme] #game.card-table .trick{top:46%} :root[data-theme] #game.card-table .trick-card .playing-card{width:48px;height:70px;padding:3px;font-size:15px} :root[data-theme] #game.card-table .trick-card .playing-card>b{font-size:25px} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-12px,-69px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-33px,1px) rotate(-4deg)} :root[data-theme] #game.card-table .trick-card.left{transform:translate(-63px,-37px) rotate(-10deg)} :root[data-theme] #game.card-table .trick-card.right{transform:translate(14px,-37px) rotate(10deg)} :root[data-theme] #game.card-table .seat.left,:root[data-theme] #game.card-table .seat.right{top:26%} :root[data-theme] #game.card-table .seat.bottom{bottom:16%} } :root[data-theme] #game.card-table .game-top{height:auto;min-height:48px;flex-shrink:0} :root[data-theme] #game.card-table .team-total{grid-column:auto;grid-row:auto} :root[data-theme] #game.card-table .trick{top:48%} @media(min-width:701px){:root[data-theme] #game.card-table .seat-summary{font-size:13px}:root[data-theme] #game.card-table .seat .avatar{width:40px;height:40px}} @media(max-width:700px){:root[data-theme] #game.card-table .match-score{grid-template-columns:repeat(2,minmax(0,1fr))}:root[data-theme] #game.card-table .trick{top:51%}:root[data-theme] #game.card-table .table-status{top:150px;width:100%;text-align:center}:root[data-theme] #game.card-table .table-status p{max-width:none}} :root[data-theme] #game.card-table .hand .playing-card{width:78px;height:110px;min-width:0} @media(max-width:700px){:root[data-theme] #game.card-table .hand .playing-card{width:48px;height:72px;font-size:16px}:root[data-theme] #game.card-table .hand .playing-card>b{font-size:27px}:root[data-theme] #game.card-table .hand-card{margin:0 -7px}:root[data-theme] #game.card-table .hand:has(.hand-card:nth-child(9)) .hand-card{margin:0 -10px}} @media(min-width:701px) and (min-height:551px){ :root[data-theme] body.in-game #game.card-table .trick{top:44%;transform:none} :root[data-theme] #game.card-table .seat{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px;width:180px;text-align:left;padding:6px} :root[data-theme] #game.card-table .seat .avatar{grid-column:1;grid-row:1/3} :root[data-theme] #game.card-table .seat>strong,:root[data-theme] #game.card-table .seat>small{grid-column:2;min-width:0} :root[data-theme] #game.card-table .seat-summary{grid-column:1/-1;grid-template-columns:1fr 1fr;font-size:12px} :root[data-theme] #game.card-table .seat-summary .last-play{grid-column:1/-1;text-align:center} :root[data-theme] #game.card-table .seat.bottom{bottom:18%} :root[data-theme] #game.card-table #trump.seat-trump{top:0;left:calc(100% + 4px)} :root[data-theme] #game.card-table .seat.right #trump.seat-trump{left:auto;right:calc(100% + 4px)} } :root[data-theme] #game.card-table .seat:is(.team-1,.team-2){background:var(--team-fill)!important} @media(max-width:700px){:root[data-theme] #game.card-table .table-status p{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--surface);color:var(--ink)}} /* Readable trump reference, with one rank and one suit, independent of card corners. */ :root[data-theme] #trump .trump-reference{display:flex;flex-direction:column;justify-content:center;align-items:center;width:48px;height:66px;flex:none;gap:2px;background:#fff8e9;color:#172535;border:1px solid #bdb5a6;border-radius:6px;font:700 21px/1 Arial,sans-serif;box-shadow:0 2px 5px #0003} :root[data-theme] #trump .trump-reference>span{font-size:28px} :root[data-theme] #trump .trump-reference.red{color:#b31c24} :root[data-theme] #game .player-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:620px} :root[data-theme] #game .player-totals:has(.player-total:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))} :root[data-theme] #game .player-total{display:grid;gap:3px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px} :root[data-theme] #game .player-total>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} :root[data-theme] #game .player-total>strong{font-size:19px} :root[data-theme] #game .player-total small{font-size:11px} :root[data-theme] #game .seat{background:var(--surface)!important} :root[data-theme] #game.sueca-game .seat:is(.team-1,.team-2){background:var(--team-fill)!important} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-40px,-120px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.right{transform:translate(32px,-62px) rotate(10deg)} :root[data-theme] #game.card-table .trick-card.left{transform:translate(-112px,-62px) rotate(-10deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-35px,8px) rotate(-4deg)} :root[data-theme] #game.bisca-game .trick-card.top{transform:translate(-39px,-116px)} :root[data-theme] #game.bisca-game .trick-card.bottom{transform:translate(-39px,8px)} :root[data-theme] #game:not(.card-table) .seat-summary{font-size:11px;background:var(--surface);border-radius:5px} :root[data-theme] .solitaire-page .stats{font-size:16px;line-height:1.5;flex-wrap:wrap;gap:10px 20px} @media(max-width:700px){ :root[data-theme] #game .player-totals:has(.player-total:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))} :root[data-theme] #game .player-total{padding:4px;font-size:11px} :root[data-theme] #game .player-total>strong{font-size:16px} :root[data-theme] #trump.seat-trump{left:calc(100% + 3px);width:38px} :root[data-theme] .seat.right #trump.seat-trump{left:auto;right:calc(100% + 3px)} :root[data-theme] #trump .trump-reference{width:36px;height:50px;font-size:17px} :root[data-theme] #trump .trump-reference>span{font-size:23px} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-27px,-78px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.right{transform:translate(14px,-37px) rotate(10deg)} :root[data-theme] #game.card-table .trick-card.left{transform:translate(-63px,-37px) rotate(-10deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-15px,12px) rotate(-4deg)} :root[data-theme] #game.bisca-game .trick-card.top{transform:translate(-24px,-74px)} :root[data-theme] #game.bisca-game .trick-card.bottom{transform:translate(-24px,6px)} :root[data-theme] #game.copas-game .hand .hand-card{margin:0 -13px} :root[data-theme] #game.copas-game .hand .playing-card{max-width:none} } /* Permanent corner reference; the larger card only exists while the server names its seat. */ :root[data-theme] #game.card-table #trump{position:absolute;left:8px;top:4px;display:flex;flex-direction:row;gap:5px;width:auto} :root[data-theme] #game.card-table .table-status{position:static} :root[data-theme] #game.card-table .table-status p{position:absolute;top:45px;left:8px;max-width:145px;text-align:left} :root[data-theme] #game.card-table #trump .compact-trump{width:auto;height:28px;flex-direction:row;padding:3px 7px;font-size:16px;gap:4px} :root[data-theme] #game.card-table #trump .compact-trump>span{font-size:18px} :root[data-theme] .seat-trump-reference{position:absolute;top:0;left:calc(100% + 4px);pointer-events:none;display:grid;gap:2px} :root[data-theme] .seat.right .seat-trump-reference{left:auto;right:calc(100% + 4px)} :root[data-theme] .seat-trump-reference .trump-label{font-size:10px;background:var(--surface);color:var(--ink);padding:2px;border-radius:3px} :root[data-theme] .seat-trump-reference .trump-reference{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:66px;background:#fff8e9;color:#172535;border:1px solid #bdb5a6;border-radius:6px;font:700 21px/1.1 Arial,sans-serif} :root[data-theme] .seat-trump-reference .trump-reference>span{font-size:28px} :root[data-theme] .seat-trump-reference .trump-reference.red{color:#b31c24} @media(max-width:700px){:root[data-theme] #game.card-table #trump .trump-label{font-size:10px}:root[data-theme] .seat-trump-reference .trump-reference{width:36px;height:50px;font-size:17px}:root[data-theme] .seat-trump-reference .trump-reference>span{font-size:23px}:root[data-theme] #game.card-table .table-status p{font-size:10px;max-width:100px;top:42px}} :root[data-theme] #game .game-top{height:auto;min-height:48px;flex-shrink:0} @media(max-width:700px){:root[data-theme] #game .game-top{flex-wrap:wrap;gap:6px}:root[data-theme] #game .player-totals{order:3;width:100%;max-width:none}:root[data-theme] #game .player-total>span:first-child{display:block;font-size:11px}:root[data-theme] #game:not(.card-table) .seat-summary{font-size:10px}} :root[data-theme] body.in-game #game.damas-game .table-status{top:160px} :root[data-theme] body.in-game #game.damas-game .trick{top:200px} :root[data-theme] #game.domino-game .domino-choice .domino-tile{transform:none} @media(max-width:700px){:root[data-theme] body.in-game #game.damas-game .table-status{top:108px}:root[data-theme] body.in-game #game.damas-game .trick{top:142px}} @media(min-width:701px) and (min-height:551px){:root[data-theme] body.in-game #game.card-table .trick{top:42%}} :root[data-theme] #game.card-table .trick-card.bottom{z-index:2} /* Mobile: use the space for readable cards instead of an oversized felt. */ @media(max-width:700px) and (orientation:portrait){ :root[data-theme] body.in-game #game.card-table .arena{height:620px!important;min-height:620px!important;max-height:620px} :root[data-theme] #game.card-table .game-layout{flex:0 0 auto} :root[data-theme] #game.card-table .seat{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px;width:98px;padding:4px;text-align:left} :root[data-theme] #game.card-table .seat .avatar{width:26px;height:26px;grid-column:1;grid-row:1/3} :root[data-theme] #game.card-table .seat>strong,:root[data-theme] #game.card-table .seat>small{grid-column:2;min-width:0} :root[data-theme] #game.card-table .seat>strong{max-width:100%;padding:3px 2px} :root[data-theme] #game.card-table .seat-summary{grid-column:1/-1;text-align:center;font-size:11px;line-height:1.3} :root[data-theme] #game.card-table .seat-summary .last-play b{font-size:15px} :root[data-theme] #game.card-table .felt{inset:14% 5% 20%} :root[data-theme] body.in-game #game.card-table .trick{top:49%;transform:none} :root[data-theme] #game.card-table .trick-card .playing-card{width:54px;height:78px;font-size:17px;padding:4px} :root[data-theme] #game.card-table .trick-card .playing-card>b{font-size:29px} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-30px,-86px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.left{transform:translate(-78px,-39px) rotate(-10deg)} :root[data-theme] #game.card-table .trick-card.right{transform:translate(24px,-39px) rotate(10deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-18px,14px) rotate(-4deg)} :root[data-theme] #game.bisca-game .trick-card.top{transform:translate(-27px,-86px)} :root[data-theme] #game.bisca-game .trick-card.bottom{transform:translate(-27px,4px)} :root[data-theme] #game.card-table .hand .playing-card{width:54px;height:80px;font-size:17px} :root[data-theme] #game.card-table .hand .hand-card{margin:0 -8px} :root[data-theme] #game.card-table .hand:has(.hand-card:nth-child(9)) .hand-card{margin:0 -12px} :root[data-theme] #game.copas-game .hand:has(.hand-card:nth-child(9)) .hand-card{margin:0 -15px} :root[data-theme] #game.card-table .seat.left .seat-trump-reference{top:auto;bottom:calc(100% + 5px);left:0;right:auto} :root[data-theme] #game.card-table .seat.right .seat-trump-reference{top:calc(100% + 5px);bottom:auto;left:auto;right:0} } @media(max-width:700px) and (max-height:760px) and (orientation:portrait){:root[data-theme] body.in-game .play-workspace{overflow:auto}:root[data-theme] body.in-game #game{height:auto;min-height:100%}} @media(max-width:700px) and (orientation:portrait){:root[data-theme] #game.card-table .seat-summary .last-play{white-space:nowrap;font-size:10px}:root[data-theme] #game.card-table .seat-summary .last-play b{padding:1px 3px;font-size:14px}} @media(max-width:700px) and (orientation:portrait){ :root[data-theme] body.in-game #game.domino-game .arena{height:620px!important;min-height:620px!important;max-height:620px} :root[data-theme] #game.domino-game .game-layout{flex:0 0 auto} :root[data-theme] #game.domino-game .felt{inset:12% 5% 20%;width:auto;height:auto} :root[data-theme] #game.domino-game .domino-choice .domino-half{width:25px;height:25px} :root[data-theme] #game.domino-game .domino-half i{width:6px;height:6px} :root[data-theme] body.in-game #game.damas-game .seat.bottom{bottom:10%} :root[data-theme] .solitaire-page #status{height:calc(4.5em + 16px);min-height:calc(4.5em + 16px)} :root[data-theme] .solitaire-page .card{font-size:16px} :root[data-theme] .solitaire-page .card b{font-size:25px} } @media(max-width:700px) and (orientation:portrait){:root[data-theme] .solitaire-page .card{line-height:1}:root[data-theme] .solitaire-page .card b{line-height:1;font-size:24px}} @media(max-width:380px) and (orientation:portrait){:root[data-theme] .solitaire-page .card{font-size:15px}:root[data-theme] .solitaire-page .card b{font-size:22px}} @media(max-width:700px) and (orientation:portrait){:root[data-theme] #game.card-table .seat.left,:root[data-theme] #game.card-table .seat.right{top:22%}} @media(max-width:700px) and (orientation:portrait){ :root[data-theme] body.in-game #game.card-table .trick{top:42%} :root[data-theme] #game.card-table .seat.left,:root[data-theme] #game.card-table .seat.right{top:31%} } @media(max-width:380px) and (orientation:portrait){:root[data-theme] #game.card-table .trick-card.left{transform:translate(-67px,-39px) rotate(-10deg)}:root[data-theme] #game.card-table .trick-card.right{transform:translate(13px,-39px) rotate(10deg)}} /* Keep even a long domino chain within the space between player boxes. */ @media(max-width:700px) and (orientation:portrait){ :root[data-theme] body.in-game #game.domino-game .trick{top:22%;height:34%;min-height:0} :root[data-theme] #game.domino-game .seat.left,:root[data-theme] #game.domino-game .seat.right{top:31%} } @media(max-width:700px) and (orientation:portrait){:root[data-theme] .solitaire-page #status{height:calc(4.5em + 18px);min-height:calc(4.5em + 18px)}} /* Paginated community lists keep navigation outside the scrolling results. */ :root[data-theme] .community-list-dialog[open]{display:flex;flex-direction:column;height:min(780px,90dvh);max-height:90dvh;overflow:hidden} :root[data-theme] .community-list-dialog>.dialog-heading,:root[data-theme] .community-list-dialog>p{flex:none} :root[data-theme] .community-list-dialog .community-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} :root[data-theme] .community-list-dialog .community-actions{flex:none;margin:8px 0 12px} :root[data-theme] .community-list-rows{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-gutter:stable} :root[data-theme] .community-list-dialog .rank-pager{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid var(--line);background:var(--surface)} @media(max-width:550px){:root[data-theme] .community-list-dialog{padding:16px}:root[data-theme] .community-list-dialog .rank-pager button{padding:10px 8px;min-height:44px}:root[data-theme] .community-list-dialog .rank-pager{font-size:12px}} /* Native selects retain keyboard/mobile behavior, with a consistently inset arrow. */ :root[data-theme]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23e7edf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} :root[data-theme=light]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23243e5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} :root[data-theme] body select:not([multiple]):not([size]),:root[data-theme] body select[size="1"]:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:42px;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px} @media(forced-colors:active){:root[data-theme] body select:not([multiple]):not([size]),:root[data-theme] body select[size="1"]:not([multiple]){appearance:auto;background-image:none}} @media(max-width:550px){:root[data-theme] .community-list-dialog .community-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}:root[data-theme] .community-list-dialog .community-actions button{width:100%;min-width:0;margin:0;padding:9px 4px;font-size:12px;min-height:44px}} /* Lobby inbox stays above the window switcher. */ :root[data-theme] #lobby-messages{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:21;min-height:48px;border-radius:28px;background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 20px #0004;padding:12px 18px} :root[data-theme] .has-window-switcher #lobby-messages{bottom:calc(92px + env(safe-area-inset-bottom,0px))} :root[data-theme] #lobby-messages[hidden]{display:none} :root[data-theme] #lobby-messages.has-unread{background:#f4c75b;color:#172538;border-color:#f4c75b;font-weight:700;box-shadow:0 0 0 4px #f4c75b33,0 4px 20px #0004} :root[data-theme] .mobile-game-tools #leave{color:#fff;background:#b52b3b;border-color:#d54a59;white-space:nowrap} :root[data-theme] .mobile-game-tools #leave:disabled{opacity:.45;cursor:not-allowed} @media(max-width:550px){:root[data-theme] .mobile-game-tools{gap:4px}:root[data-theme] .mobile-game-tools #leave{font-size:11px;padding:8px 6px}:root[data-theme] .mobile-game-tools .game-icon-button{width:34px;min-width:34px;padding:6px}} :root[data-theme] .lobby-card .table-name{height:22px;min-height:22px;line-height:22px;margin:10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Damas: player panels and board occupy separate flow rows at every size. */ :root[data-theme] body.in-game #game.damas-game .arena{display:flex;flex-direction:column;align-items:center;gap:12px;height:auto!important;min-height:0!important;max-height:none!important;padding:12px 8px 24px} :root[data-theme] #game.damas-game #seats{display:contents} :root[data-theme] body.in-game #game.damas-game .seat{position:relative;inset:auto;transform:none;flex:none;margin:0} :root[data-theme] #game.damas-game .seat.top{order:0} :root[data-theme] body.in-game #game.damas-game .table-status{position:relative;inset:auto;transform:none;order:1;width:100%;margin:0} :root[data-theme] body.in-game #game.damas-game .table-status p{margin:0} :root[data-theme] body.in-game #game.damas-game .trick{position:relative;inset:auto;transform:none;order:2;flex:none;width:min(100%,max(240px,calc((100dvh - 430px) * var(--board-ratio,1))),600px);height:auto;margin:0} :root[data-theme] #game.damas-game .seat.bottom{order:3} :root[data-theme] #game.damas-game #actions{position:relative;inset:auto;transform:none;order:4} :root[data-theme] #game.damas-game #hand:empty{display:none} :root[data-theme] body.in-game:has(#game.damas-game:not([hidden])) .play-workspace{overflow-y:auto} :root[data-theme] body.in-game #game.damas-game .game-layout{flex:none;height:auto;min-height:0} :root[data-theme] .solitaire-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-size:13px;white-space:nowrap;background:var(--surface)} @media(max-width:550px){:root[data-theme] .solitaire-page .heading{flex-wrap:wrap;gap:8px}:root[data-theme] .solitaire-back{font-size:12px;padding:8px}} :root[data-theme] #game.damas-game .seat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:8px;align-items:center;width:220px;padding:6px 10px} :root[data-theme] #game.damas-game .seat .avatar{grid-column:1;grid-row:1/4;width:40px;height:40px;margin:0} :root[data-theme] #game.damas-game .seat strong,:root[data-theme] #game.damas-game .seat small{grid-column:2;margin:0} :root[data-theme] #game.damas-game .seat .seat-summary{grid-column:2;display:flex;justify-content:center;gap:6px;flex-wrap:wrap} /* Domino player information stays compact and outside the playing chain. */ :root[data-theme] #game.domino-game .seat{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:6px;align-items:center;width:180px;padding:6px} :root[data-theme] #game.domino-game .seat .avatar{grid-column:1;grid-row:1/3;width:36px;height:36px;margin:0} :root[data-theme] #game.domino-game .seat strong,:root[data-theme] #game.domino-game .seat small{grid-column:2;margin:0} :root[data-theme] #game.domino-game .seat .seat-summary{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;font-size:11px;line-height:1.3} @media(max-width:700px){:root[data-theme] #game.domino-game .seat{grid-template-columns:26px minmax(0,1fr);width:110px;padding:4px;column-gap:4px}:root[data-theme] #game.domino-game .seat .avatar{width:26px;height:26px}:root[data-theme] #game.domino-game .seat strong{font-size:10px;padding:4px}:root[data-theme] #game.domino-game .seat small{font-size:9px}} :root[data-theme] #game.bisca-game #bisca-deck{position:absolute;top:44px;left:8px;display:flex;align-items:center;gap:8px;width:auto;max-width:150px;min-height:36px;padding:4px 7px;font-size:11px;line-height:1.3;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px} :root[data-theme] #game.bisca-game #bisca-deck::before{content:'';flex:none;width:20px;height:29px;border:1px solid #e0cf98;border-radius:3px;background:repeating-linear-gradient(45deg,#203e61,#203e61 3px,#34577c 3px,#34577c 5px);box-shadow:-3px -2px 0 #18324e,-4px -3px 0 #b7b18b} :root[data-theme] #game.bisca-game #bisca-deck[hidden]{display:none} :root[data-theme] #game.bisca-game .table-status p{top:92px} @media(max-width:700px){:root[data-theme] #game.bisca-game #bisca-deck{max-width:100px;font-size:10px;gap:6px}} @media(max-width:700px) and (orientation:portrait){:root[data-theme] body.in-game #game.domino-game .arena{height:max(460px,calc(100dvh - 300px))!important;min-height:max(460px,calc(100dvh - 300px))!important;max-height:none!important}:root[data-theme] #game.domino-game .seat .seat-summary{font-size:10px;gap:2px 4px;padding:2px}} :root[data-theme] #game.bisca-game #bisca-deck{top:46px;left:14px;width:36px;max-width:none;height:50px;min-height:0;padding:0;display:grid;place-items:center;isolation:isolate;border:2px solid #dbc992;border-radius:5px;background:repeating-linear-gradient(45deg,#203e61,#203e61 3px,#34577c 3px,#34577c 5px);color:#fff;font:bold 16px/1 Arial,sans-serif;text-shadow:0 1px 3px #000,1px 0 3px #000;box-shadow:calc(-1 * var(--deck-depth,5px)) calc(-1 * var(--deck-depth,5px)) 0 -1px #eee5c9,calc(-1 * var(--deck-depth,5px)) calc(-1 * var(--deck-depth,5px)) 0 0 #65717b,calc(-.5 * var(--deck-depth,5px)) calc(-.5 * var(--deck-depth,5px)) 0 0 #153153} :root[data-theme] #game.bisca-game #bisca-deck::before{display:none} :root[data-theme] #game.bisca-game #bisca-deck[hidden]{display:none} :root[data-theme] #game.bisca-game .table-status p{top:108px} @media(max-width:700px) and (orientation:portrait){:root[data-theme] body.in-game #game.card-table .arena{height:clamp(520px,calc(100dvh - 244px),620px)!important;min-height:clamp(520px,calc(100dvh - 244px),620px)!important;max-height:620px!important}} /* The Damas clock has its own column, never overlays names or statistics. */ :root[data-theme] #game.damas-game .seat{width:min(220px,100%);grid-template-columns:40px minmax(0,1fr)} :root[data-theme] #game.damas-game .seat #turn-clock{position:static;inset:auto;grid-column:3;grid-row:1/4;min-width:0;width:48px;margin:0;padding:6px 3px;font-size:15px;box-shadow:none} :root[data-theme] body.in-game:has(#game.damas-game:not([hidden])) .play-workspace main{padding-bottom:0} :root[data-theme] body.in-game #game.damas-game .trick{max-width:100%} :root[data-theme] .damas-square:has(.dama-piece){position:relative} :root[data-theme] body.in-game #game.damas-game .trick{width:var(--damas-board-width,300px)} /* Three fixed rows keep both corner labels inside small cards. */ :root[data-theme] #game.card-table .playing-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto 1fr;justify-content:normal;line-height:1;box-sizing:border-box;overflow:hidden;align-items:start} /* Card faces are game controls, so dragging must not select their text. */ .playing-card,.playing-card *,.hand-card{-webkit-user-select:none;user-select:none} :root[data-theme] #game.card-table .playing-card>span{line-height:1;min-height:0;font-size:inherit} :root[data-theme] #game.card-table .playing-card>b{line-height:1;justify-self:center;align-self:center} :root[data-theme] #game.card-table .playing-card>span:first-child{justify-self:start} :root[data-theme] #game.card-table .playing-card>span:last-child{justify-self:end;align-self:end} @media(max-width:700px){:root[data-theme] #game.card-table .playing-card>span{font-size:15px}:root[data-theme] #game.card-table .playing-card>b{font-size:26px}} :root[data-theme] .domino-board{overflow:visible}:root[data-theme] .domino-motion{transform-box:fill-box;transform-origin:center} :root[data-theme] #game.damas-game .seat:has(#turn-clock:not([hidden])){grid-template-columns:32px minmax(0,1fr) 48px;column-gap:5px}:root[data-theme] #game.damas-game .seat:has(#turn-clock:not([hidden])) .avatar{width:32px;height:32px} /* Keep ranking pagination reachable while only the results scroll. */ :root[data-theme] .ranking-dialog[open]{display:flex;flex-direction:column;height:min(900px,94dvh);max-height:94dvh;overflow:hidden;box-sizing:border-box} :root[data-theme] .ranking-dialog>.dialog-heading,:root[data-theme] .ranking-dialog>.ranking-filters,:root[data-theme] .ranking-dialog>.ranking-actions,:root[data-theme] .ranking-dialog>#rank-status{flex:none} :root[data-theme] .ranking-dialog .rank-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable} :root[data-theme] .ranking-dialog .rank-pager{flex:none;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid var(--line);background:var(--surface)} @media(max-width:550px),(max-height:550px){:root[data-theme] .ranking-dialog{padding:12px}:root[data-theme] .ranking-dialog .dialog-heading{margin-bottom:8px}:root[data-theme] .ranking-dialog .ranking-filters{gap:8px}:root[data-theme] .ranking-dialog .ranking-filters label{min-width:0;flex:1 1 30%;font-size:11px}:root[data-theme] .ranking-dialog .ranking-filters select{padding-top:8px;padding-bottom:8px}:root[data-theme] .ranking-dialog .ranking-actions{margin:8px 0;gap:6px}:root[data-theme] .ranking-dialog .ranking-actions button,:root[data-theme] .ranking-dialog .rank-pager button{font-size:12px;padding:8px;min-height:44px}:root[data-theme] .ranking-dialog #rank-status{margin:6px 0}} @media(max-width:700px) and (orientation:portrait){:root[data-theme] body.in-game #game.card-table:not(.sueca-game):not(.bisca-game) .arena{height:clamp(520px,calc(100dvh - 280px),620px)!important;min-height:clamp(520px,calc(100dvh - 280px),620px)!important}} @media(min-width:701px) and (min-height:551px){ :root[data-theme] #game.card-table .seat>strong{margin-top:0;padding:5px 8px} :root[data-theme] #game.card-table .seat>small{margin-top:0;line-height:1.2} :root[data-theme] #game.card-table .seat .seat-team{font-size:12px;line-height:1.2} :root[data-theme] #game.card-table .seat.bottom{bottom:20%} :root[data-theme] #game.card-table .trick-card .playing-card{width:68px;height:98px} } @media(min-width:701px) and (min-height:551px){ :root[data-theme] #game.card-table .seat.bottom{bottom:21%} :root[data-theme] #game.card-table .trick-card.top{transform:translate(-40px,-112px) rotate(4deg)} :root[data-theme] #game.card-table .trick-card.bottom{transform:translate(-35px,-16px) rotate(-4deg)} } .photo-badge{position:relative;display:inline-flex;flex:none;vertical-align:middle} /* Phase controls occupy the empty table centre, away from the hand and seats. */ :root[data-theme] #game.card-phase #actions{position:absolute;top:35%;bottom:auto;left:50%;transform:translateX(-50%);width:min(42%,360px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:4} :root[data-theme] #game.card-table:not(.sueca-game):not(.bisca-game) .seat.bottom #turn-clock{left:calc(100% + 8px);top:4px} @media(max-width:700px){ :root[data-theme] #game.card-phase #actions{top:21%;width:calc(100% - 218px);min-width:130px;gap:6px} :root[data-theme] #game.card-phase .seat.bottom{bottom:calc(18% + 20px)} :root[data-theme] #game.card-phase #actions button{width:100%;min-height:44px;padding:8px 5px;font-size:12px} /* Stable hit boxes: only the drawing rises on selection, not the tap target. */ :root[data-theme] #game.copas-game .hand{gap:0;padding:0 8px} :root[data-theme] #game.copas-game .hand .hand-card{flex:0 1 38px;width:38px;max-width:38px;height:80px;margin:0;transform:none;position:relative;overflow:visible;outline:0} :root[data-theme] #game.copas-game .hand:has(.hand-card:nth-child(9)) .hand-card{flex-basis:24px;width:24px;max-width:24px;margin:0} :root[data-theme] #game.copas-game .hand .hand-card:last-child{flex:0 0 54px;width:54px;max-width:54px} :root[data-theme] #game.copas-game .hand .playing-card{width:54px!important;pointer-events:none;transition:transform .15s;position:absolute;left:0;top:0} :root[data-theme] #game.copas-game .hand .hand-card.selected{z-index:auto} :root[data-theme] #game.copas-game .hand .hand-card.selected .playing-card{transform:translateY(-16px);outline:3px solid var(--gold);border-radius:8px} :root[data-theme] #game.copas-game .hand .hand-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px} } .photo-badge>.premium-badge{position:absolute;right:2px;bottom:-3px;width:18px;height:18px;object-fit:contain;border:0;border-radius:0;background:none;z-index:2} .seat .avatar>.photo-badge{width:100%;height:100%} :root[data-theme] .premium-status{display:block;width:100%;text-align:left;line-height:1.5;margin:0 0 14px;padding:12px;font-size:13px} :root[data-theme] .premium-status.active{border-color:var(--accent);color:var(--ink);background:var(--soft)} @media(max-width:700px){.seat .avatar .premium-badge{width:13px;height:13px;right:1px;bottom:-3px}} /* Mark the active seat without changing its dimensions or team colour. */ :root[data-theme] #game .seat.turn{outline:3px solid #ffd15c;outline-offset:3px;box-shadow:0 0 0 6px #ffd15c30,0 0 22px #ffd15c55,inset 0 0 16px #ffd15c18;z-index:3} :root[data-theme] #game .seat.turn>strong{border-color:#ffd15c;color:var(--ink);font-weight:800} :root[data-theme] #game .seat.turn .avatar{border-color:#ffd15c;box-shadow:0 0 0 3px #ffd15c35} /* Payment history needs its own columns, independent of community lists. */ :root[data-theme] .premium-history .premium-movement{display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;gap:12px;align-items:center} :root[data-theme] .premium-history .premium-movement>span:last-child{grid-column:auto} :root[data-theme] .premium-history .premium-movement>span:nth-child(3){min-width:0;overflow-wrap:anywhere} :root[data-theme] .premium-history .premium-movement>button{width:max-content;max-width:100%;white-space:nowrap;justify-self:end;text-align:center} @media(max-width:600px){ :root[data-theme] .premium-history .premium-movement{grid-template-columns:max-content minmax(0,1fr);gap:8px 12px} :root[data-theme] .premium-history .premium-movement>span:nth-child(3){grid-column:1/-1} :root[data-theme] .premium-history .premium-movement>button{grid-column:1/-1;justify-self:start} } :root[data-theme] .messaging-dialog[open]{width:min(1000px,96vw);height:min(760px,94dvh);max-height:94dvh;display:flex;flex-direction:column;overflow:hidden;padding:20px;gap:12px} .messaging-dialog .dialog-heading{margin:0;flex:none}.messaging-dialog .dialog-heading h2{margin:0} .message-mailboxes{display:flex;gap:8px;flex:none}.message-mailboxes button{font-size:13px;padding:9px 14px} :root[data-theme] .message-mailboxes button[aria-pressed=true]{background:var(--accent);color:var(--page);border-color:var(--accent)} .messaging-dialog .message-feedback{margin:0;font-size:12px;line-height:1.4;flex:1;min-width:0;height:2.8em;overflow:auto;text-align:right;align-content:center}.messaging-dialog .message-feedback:empty{visibility:hidden} .messaging-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;flex:1;min-height:0} .message-sidebar{display:flex;flex-direction:column;min-height:0;gap:12px;border-right:1px solid var(--line);padding-right:14px}.message-sidebar input{width:100%;padding:10px} .message-contacts{overflow:auto;min-height:0;flex:1;display:flex;flex-direction:column;gap:6px} :root[data-theme] .message-contact{display:grid;grid-template-columns:36px minmax(0,1fr);text-align:left;gap:5px 9px;align-items:center;width:100%;padding:10px;border:1px solid transparent;background:transparent;font-size:13px} .message-contact .user-photo{width:36px;height:36px;grid-row:span 2}.message-contact>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root[data-theme] .message-contact[aria-current=true]{border-color:var(--accent);background:var(--soft)} .message-unread{grid-column:2;color:var(--accent);font-weight:800} .message-detail{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}.message-placeholder{margin:auto;text-align:center;padding:20px;color:var(--muted);font-size:14px} .conversation-heading{display:flex;align-items:center;gap:10px;flex:none}.conversation-heading h3{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.conversation-heading .user-photo{width:36px;height:36px}.message-back{display:none} .conversation-history{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;background:var(--page);border:1px solid var(--line);border-radius:12px}.conversation-items{display:flex;flex-direction:column;gap:12px}.message-older{display:block;margin:0 auto 14px;font-size:12px;padding:8px 12px}.message-older[hidden]{display:none} :root[data-theme] .message-bubble{max-width:90%;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);align-self:flex-start;font-size:14px} :root[data-theme] .message-bubble.sent-message{align-self:flex-end;background:var(--soft);border-color:var(--accent)} .message-bubble header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.message-bubble header strong{color:var(--ink)}.message-bubble p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.message-bubble time{font-variant-numeric:tabular-nums} .message-compose{display:flex;gap:10px;align-items:flex-end;flex:none}.message-compose label{flex:1;min-width:0;font-size:12px}.message-compose textarea{width:100%;height:76px;min-height:60px;max-height:130px;resize:vertical;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);font:inherit;font-size:15px}.message-compose button{min-height:44px} :root[data-theme] .community-profile-dialog .dialog-heading{align-items:center;gap:14px;margin-bottom:16px} .community-heading-label{min-width:0;flex:1}.community-heading-label h2{overflow-wrap:anywhere}.community-heading-label .muted{margin:4px 0 0} :root[data-theme] .community-profile-dialog .profile-heading-photo{flex:none;width:60px;height:60px;margin:0}.profile-heading-photo>.user-photo{width:60px;height:60px} :root[data-theme] .community-profile-dialog .profile-heading-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0;max-width:240px;flex:0 1 auto}.profile-heading-actions button{font-size:13px;padding:10px 12px} @media(max-width:650px){ :root[data-theme] .messaging-dialog[open]{padding:12px;gap:10px;width:96vw} .messaging-layout{grid-template-columns:minmax(0,1fr)}.message-sidebar{border:0;padding:0}.messaging-dialog:not(.conversation-open) .message-detail{display:none}.messaging-dialog.conversation-open .message-sidebar{display:none} .conversation-heading{flex-wrap:wrap;gap:8px}.message-back{display:block;font-size:12px;padding:8px 10px;flex-basis:100%;text-align:left}.conversation-heading .user-photo{width:28px;height:28px}.conversation-heading h3{font-size:16px} .message-mailboxes button{flex:1;padding:8px;font-size:12px}.message-compose{gap:6px}.message-compose button{padding:10px;font-size:13px}.message-bubble{max-width:96%} :root[data-theme] .community-profile-dialog .dialog-heading{flex-wrap:wrap;gap:10px}.community-profile-dialog .community-heading-label{flex:1;min-width:100px}.community-profile-dialog .dialog-heading>[aria-label]{order:0}.community-profile-dialog .profile-heading-actions{order:1;flex-basis:100%;max-width:none!important;justify-content:flex-end} } .conversation-heading h3{text-transform:none;letter-spacing:normal} .message-person-options{margin-left:auto;flex:none;font-size:12px;padding:8px 10px}.conversation-heading h3{min-width:0;flex:1} /* Keep server-confirmed decisions readable beside each player, including mobile. */ :root[data-theme] #game .seat .seat-action{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:2.5em;margin-top:3px;padding:2px 4px;border-radius:5px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:600;line-height:1.25;white-space:normal} :root[data-theme] #game .seat .seat-action[aria-hidden=true]{visibility:hidden} :root[data-theme] #game .seat .seat-action-pass{color:var(--ink);border:1px solid var(--accent)} @media(max-width:700px){:root[data-theme] #game .seat .seat-action{font-size:10px;padding:2px;min-height:2.5em}} :root[data-theme] .tournament-round{margin-top:32px;padding-top:24px;border-top:2px solid var(--line)} :root[data-theme] .tournament-round>.tournament-round-title{margin:0 0 18px;padding:14px 18px;border-left:5px solid var(--gold);border-radius:0 12px 12px 0;background:var(--soft);color:var(--ink);font-size:24px;font-weight:900;line-height:1.25;letter-spacing:0;text-transform:none} @media(max-width:550px){:root[data-theme] .tournament-round{margin-top:26px;padding-top:20px}:root[data-theme] .tournament-round>.tournament-round-title{font-size:21px;padding:12px 14px}} /* Additional clean decks: straight frame, white face, restrained symbols. */ :root[data-theme] .player-menu-dialog{width:min(500px,calc(100vw - 24px));padding:24px;box-sizing:border-box} :root[data-theme] .player-menu-dialog>.dialog-heading{display:flex;align-items:center;gap:14px;margin-bottom:20px} :root[data-theme] .player-menu-dialog>.dialog-heading>.user-photo{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover} :root[data-theme] .player-menu-dialog>.dialog-heading>h2{flex:1;min-width:0;margin:0;font-size:24px;overflow-wrap:anywhere} :root[data-theme] .player-menu-dialog>.dialog-heading>button{flex:none} .player-menu-dialog>[role="status"]:empty{display:none} .player-menu-body{display:grid;gap:8px} .player-menu-body .player-menu-actions{display:grid;gap:8px;margin:0} .player-menu-body .player-menu-actions:empty{display:none} :root[data-theme] .player-menu-actions>button,:root[data-theme] .player-menu-actions>.player-support-link{display:flex;align-items:center;gap:12px;text-align:left;min-height:44px;padding:10px 14px} .player-action-icon{display:inline-flex;width:20px;height:20px;flex:0 0 20px;align-items:center;justify-content:center} .player-action-icon svg{display:block;width:20px;height:20px} :root[data-theme] .player-menu-body .player-menu-support{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)} @media(max-width:550px){:root[data-theme] .player-menu-dialog{padding:18px}:root[data-theme] .player-menu-dialog>.dialog-heading>h2{font-size:21px}} .form-feedback{min-height:1.5em;margin:8px 0 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere} .form-feedback[data-state="success"]{color:var(--ink);border-left:3px solid #46a878;padding-left:10px} .form-feedback[data-state="error"]{color:var(--ink);border-left:3px solid #df6666;padding-left:10px} /* Anchor artwork to the card itself, independent of flex/grid preview layouts. */ .playing-card{position:relative} :root[data-theme] .playing-card>span:first-child{position:absolute;top:5%;left:7%;line-height:1;margin:0} :root[data-theme] .playing-card>span:last-child{position:absolute;bottom:5%;right:7%;line-height:1;margin:0;transform:rotate(180deg)} :root[data-theme] .playing-card>b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:1;margin:0;display:block;width:max-content} :root[data-card-style="clean"] #game .playing-card, :root[data-card-style="clean"] .solitaire .card:not(.back), :root[data-card-style="clean"] .card:not(.back), .card-theme-preview[data-card-style="clean"] .playing-card{ border-radius:3px!important;background:#fff!important;border:1px solid #b7bcc4!important; box-shadow:0 1px 2px #0003!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:600!important; } :root[data-card-style="clean"] #game .playing-card>b, :root[data-card-style="clean"] .card:not(.back)>b{font-size:1.45em!important;font-weight:400!important} .card-theme-preview[data-preview-theme="0"] .playing-card[data-suit="D"], .card-theme-preview[data-preview-theme="2"] .playing-card[data-suit="D"]{color:#b52c35!important} .card-theme-preview[data-preview-theme="0"] .playing-card[data-suit="C"], .card-theme-preview[data-preview-theme="2"] .playing-card[data-suit="C"]{color:#173d2e!important} .card-theme-preview[data-preview-theme="1"] .playing-card[data-suit="D"], .card-theme-preview[data-preview-theme="3"] .playing-card[data-suit="D"]{color:#185bb5!important} .card-theme-preview[data-preview-theme="1"] .playing-card[data-suit="C"], .card-theme-preview[data-preview-theme="3"] .playing-card[data-suit="C"]{color:#16713c!important} /* Overlapping hands anchored to the player; lateral hands face their seat. */ .observer-cards{--card-width:38px;--card-height:54px;--card-step:18px;--hand-span:calc((var(--card-count) - 1)*var(--card-step) + var(--card-width));position:absolute;display:flex;width:var(--hand-span);height:var(--card-height);pointer-events:none;z-index:2;text-align:left} .observer-card{position:relative;display:block;flex:0 0 var(--card-width);width:var(--card-width);height:var(--card-height);background:#fffbed;color:#15201e;border:1px solid #ccc6ad;border-radius:4px;font:600 15px Arial,sans-serif;box-shadow:0 1px 2px #0004} .observer-card+.observer-card{margin-left:calc(var(--card-step) - var(--card-width))} .observer-card-corner{position:absolute;top:3px;left:2px;display:flex;flex-direction:column;align-items:center;line-height:17px} .observer-card.red{color:#ba2637}:root[data-card-theme=four] .observer-card[data-suit=D]{color:#176bb0}:root[data-card-theme=four] .observer-card[data-suit=C]{color:#178043} .seat.top .observer-cards{top:calc(100% + 8px);left:50%;transform:translateX(-50%)} .seat.bottom .observer-cards{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)} .seat.left .observer-cards{left:calc(100% + 8px + var(--card-height)/2);top:50%;transform:translate(-50%,-50%) rotate(90deg)} .seat.right .observer-cards{left:calc(-8px - var(--card-height)/2);top:50%;transform:translate(-50%,-50%) rotate(-90deg)} :root[data-theme] #game.card-table.observing-hands .seat.top{top:0} :root[data-theme] #game.card-table.observing-hands .seat.bottom{bottom:12px} :root[data-theme] #game.observing-hands #trick{top:50%!important} @media(max-width:700px){ :root[data-theme] body.in-game #game.card-table.observing-hands:not(.damas-game):not(.domino-game) .arena{height:680px!important;min-height:680px!important} :root[data-theme] #game.card-table.observing-hands .seat.left,:root[data-theme] #game.card-table.observing-hands .seat.right{top:52%;width:94px} #game.observing-hands .observer-cards{--card-width:32px;--card-height:46px;--card-step:16px} #game.observing-hands .observer-card{font-size:13px} #game.observing-hands .observer-card-corner{line-height:15px;left:1px} #game.observing-hands .seat.left .observer-cards,#game.observing-hands .seat.right .observer-cards{left:50%;top:calc(-8px - var(--hand-span)/2)} } .observer-card-corner>span:first-child{font-size:.9em} /* Keep every pip visible in the moderator's domino hands. */ .observer-cards.observer-dominoes{--card-width:28px;--card-height:54px;--card-step:30px} .observer-domino{display:block;flex:0 0 28px;width:28px;height:54px;margin-right:2px} .observer-domino .domino-tile{width:28px!important;height:54px!important;margin:0!important} :root[data-theme] #game.domino-game.observing-hands .seat.top{top:0} :root[data-theme] #game.domino-game.observing-hands .seat.bottom{bottom:12px} @media(max-width:700px){ :root[data-theme] #game.domino-game.observing-hands .seat.left,:root[data-theme] #game.domino-game.observing-hands .seat.right{top:52%;width:94px} #game.observing-hands .observer-cards.observer-dominoes{--card-width:24px;--card-height:46px;--card-step:26px} #game.observing-hands .observer-domino{width:24px;height:46px;flex-basis:24px} #game.observing-hands .observer-domino .domino-tile{width:24px!important;height:46px!important} } .observer-domino .domino-tile{flex-direction:column;align-items:center;gap:2px;padding:2px} .observer-domino .domino-half{width:21px;height:21px;flex:none;gap:2px} .observer-domino .domino-half+.domino-half{border-left:0;border-top:1px solid #879280;padding-left:0;padding-top:2px} :root[data-theme] body.in-game #game.domino-game.observing-hands #trick{top:35%!important;height:30%;min-height:0} @media(max-width:700px){#game.observing-hands .observer-domino .domino-half{width:17px;height:17px;gap:1px}#game.observing-hands .observer-domino .domino-half i{width:4px;height:4px}} /* Warmer classic green table and persistent access to conversations. */ :root[data-theme] body.in-game{background:#09271b} :root[data-theme=light] body.in-game{background:#e8f1dc} :root[data-theme] body.in-game .felt{background:radial-gradient(ellipse at 46% 38%,#239b4e 0%,#13813e 48%,#08642e 100%);border:6px solid #537b32;box-shadow:inset 0 0 48px #02391866,0 8px 28px #001c1433} :root[data-theme] body.in-game #game .seat:not(.team-1):not(.team-2){background:#133d2c;border-color:#628256;color:#fff8df} :root[data-theme] body.in-game #game .seat:not(.team-1):not(.team-2)>strong{background:#1b4b34;border-color:#6c8b5c;color:#fff8df} :root[data-theme] body.in-game .window-switcher{background:#123626;border-color:#6e8045} :root[data-theme] body.in-game .window-switcher button{color:#fff7dc;border-color:#6d8454} :root[data-theme] body.in-game .window-switcher button.active{color:#213215;background:#ffcf48} .social-shortcuts{display:flex;align-items:center;gap:8px;flex:none;padding-left:12px;margin-left:12px;border-left:1px solid var(--line)} .social-shortcuts button{white-space:nowrap;font-size:13px;padding:10px 12px;min-height:44px} :root[data-theme] .social-shortcuts button.has-unread{background:#ffd04b;color:#1d2b17;border-color:#ffe49a;font-weight:700;box-shadow:0 0 0 2px #ffd04b33} :root[data-theme] .window-switcher #dock{min-width:0;flex:0 1 auto} .social-game-return{display:none} :root[data-theme] body.in-game .game-social-panel[open]{position:fixed;inset:90px 12px 88px auto;margin:0;width:380px;max-width:calc(100vw - 24px);height:calc(100dvh - 178px);max-height:none;padding:14px;z-index:35;border:1px solid #879a63;box-shadow:0 12px 36px #0006;border-radius:16px;overflow:auto} .game-social-panel .social-game-return{display:flex;align-items:center;gap:8px;justify-content:space-between;flex:none;font-size:12px;padding-bottom:8px;border-bottom:1px solid var(--line)} .game-social-panel .social-game-return button{font-size:12px;padding:8px;white-space:nowrap} .game-social-panel.social-your-turn .social-game-return{background:#ffd04b;color:#1c301d;padding:8px;border-radius:8px;font-weight:700} .game-social-panel .messaging-layout{grid-template-columns:minmax(0,1fr)} .game-social-panel .message-sidebar{border:0;padding:0} .game-social-panel:not(.conversation-open) .message-detail{display:none} .game-social-panel.conversation-open .message-sidebar{display:none} .game-social-panel .message-back{display:block;flex-basis:100%;text-align:left;font-size:12px;padding:7px} .game-social-panel .conversation-heading{flex-wrap:wrap;gap:6px} .game-social-panel .conversation-heading h3{font-size:15px} .game-social-panel .message-mailboxes button{font-size:12px;padding:7px} .game-social-panel .message-compose{gap:6px}.game-social-panel .message-compose button{font-size:13px;padding:9px} .game-social-panel .message-compose textarea{height:62px;min-height:44px} .game-social-panel .room-layout{grid-template-columns:minmax(0,1fr);gap:8px} .game-social-panel .room-people{max-height:90px;overflow:auto} .game-social-panel .room-log{height:200px;min-height:100px} .game-social-panel .room-compose{display:flex;flex-wrap:nowrap} .game-social-panel .room-compose label{flex-basis:auto} @media(min-width:1001px){body.in-game.game-social-open .play-workspace{margin-right:404px!important;max-width:calc(100% - 404px)!important}body.in-game.game-social-open .play-workspace main{padding-left:16px;padding-right:16px}} @media(max-width:1000px){ :root[data-theme] body.in-game .game-social-panel[open]{inset:auto 8px 88px 8px;width:auto;max-width:none;height:min(440px,55dvh);max-height:calc(100dvh - 110px);padding:10px;border-radius:16px} .game-social-panel .dialog-heading h2{font-size:20px} .game-social-panel .message-feedback{height:1.4em} .game-social-panel .message-mailboxes{gap:4px} .game-social-panel .message-older{padding:4px 8px;margin-bottom:6px} .game-social-panel .conversation-heading .user-photo{width:24px;height:24px} .game-social-panel .conversation-history{padding:6px} .game-social-panel .message-compose label{font-size:11px} .game-social-panel .message-compose textarea{height:46px} .game-social-panel .message-bubble{padding:7px;font-size:13px} .social-shortcuts{padding-left:6px;margin-left:6px;gap:4px} .social-shortcuts button{font-size:11px;padding:8px 6px} :root[data-theme] .window-switcher{padding-left:8px;padding-right:8px} } :root[data-theme] body.in-game .window-switcher .social-shortcuts button.has-unread{color:#213215;background:#ffd04b;border-color:#ffe49a} @media(min-width:1001px){ :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .arena{height:520px!important;min-height:520px!important;max-height:none!important} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) #trick{top:47%!important} } @media(max-width:1000px){ :root[data-theme] body.in-game .game-social-panel[open]{top:84px;bottom:auto;height:min(380px,48dvh)} .game-social-panel .message-mailboxes:has(button:only-child){display:none} .game-social-panel .dialog-heading{margin:0;min-height:32px} .game-social-panel .dialog-heading h2{font-size:18px} .game-social-panel .message-person-options{padding:6px;font-size:11px} } :root[data-theme] body.in-game .game-social-panel.chat-rooms-dialog[open]{display:flex;flex-direction:column;gap:8px;overflow:hidden} .game-social-panel.chat-rooms-dialog>.dialog-heading{margin:0;flex:none} .game-social-panel.chat-rooms-dialog>p{margin:0;font-size:12px;flex:none} .game-social-panel.chat-rooms-dialog>p:empty{display:none} .game-social-panel .rooms-body{min-height:0;flex:1;overflow:auto} .game-social-panel[data-view=room] .rooms-body{display:flex;flex-direction:column;gap:8px;overflow:hidden} .game-social-panel .room-toolbar{flex:none;margin:0} .game-social-panel .room-toolbar button{font-size:12px;padding:7px} .game-social-panel .room-layout{display:flex;flex-direction:column;min-height:0;flex:1;margin:0} .game-social-panel .room-conversation{display:flex;flex-direction:column;min-height:0;flex:1;gap:6px} .game-social-panel .room-log{flex:1;min-height:40px;height:auto;padding:8px} .game-social-panel .room-compose{flex:none;margin:0;gap:6px} .game-social-panel .room-compose input{padding:9px;margin:0} .game-social-panel .room-compose button{padding:9px;font-size:13px} .game-social-panel .room-people{order:-1;flex:none;padding:4px;display:block;max-height:90px;margin:0} .game-social-panel .room-people h3{margin:0} .game-social-panel .room-people h3 button{font-size:11px;padding:4px 8px;width:100%;text-align:left} .game-social-panel .room-people-collapsed>:not(h3){display:none} @media(min-width:1001px){ :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat{display:grid;grid-template-columns:32px minmax(0,1fr);gap:2px 6px;padding:6px;min-height:0} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat .avatar{grid-column:1;grid-row:1/3;width:32px;height:32px;margin:0} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat>strong{grid-column:2;min-width:0;padding:4px;font-size:12px;min-height:0} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat>small{grid-column:2;font-size:10px;line-height:1.2} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat-team{display:inline;font-size:10px} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat-team::after{content:' ยท '} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat-summary{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;font-size:10px;line-height:1.2;padding:0} :root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) #trick{top:45%!important} } @media(min-width:1001px){:root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) .seat.bottom{bottom:126px!important}:root[data-theme] body.in-game.game-social-open #game.card-table:not(.observing-hands):not(.domino-game):not(.damas-game) #trick{top:41%!important}} .social-shortcuts #game-messages{min-width:44px;font-size:17px} @media(max-width:1000px){:root[data-theme] .window-switcher #dock{flex:1 1 auto}.social-shortcuts{margin-left:auto;flex-shrink:0}} /* Compact ranking rows; the player remains a profile link, without a button frame. */ :root[data-theme] #rank-table :is(th,td){padding:7px 12px} :root[data-theme] #rank-table .profile-link{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;min-height:32px;gap:8px;text-align:left} :root[data-theme] #rank-table .profile-link:hover:not(:disabled){background:transparent;border:0;color:var(--ink);text-decoration-thickness:2px} :root[data-theme] #rank-table .profile-link .user-photo{width:28px;height:28px;margin:0;border:0;box-shadow:none;background:transparent} :root[data-theme] .ranking-dialog .rank-pager{align-items:center;gap:6px} :root[data-theme] .ranking-dialog .rank-pager button{flex:0 0 40px;min-width:40px;padding:6px;font-size:22px;min-height:44px} #rank-page{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;white-space:nowrap} :root[data-theme] #rank-page-input{width:60px;padding:8px 4px;text-align:center;min-height:44px;appearance:textfield} #rank-page-input::-webkit-inner-spin-button,#rank-page-input::-webkit-outer-spin-button{appearance:none;margin:0} @media(max-height:500px){:root[data-theme] .ranking-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:8px 12px}:root[data-theme] .ranking-dialog .dialog-heading h2{font-size:20px}:root[data-theme] .ranking-dialog .dialog-heading{margin:0}:root[data-theme] .ranking-dialog .ranking-actions{margin:4px 0}:root[data-theme] .ranking-dialog #rank-status{margin:0}:root[data-theme] .ranking-dialog .rank-pager{padding-top:4px}:root[data-theme] .ranking-dialog .rank-scroll caption{padding:4px 0}} .friend-request-row{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)} .friend-request-row>.user-photo{width:32px;height:32px}.friend-request-row>button{text-align:left}.friend-request-row>small,.friend-request-row>.community-actions{grid-column:2}.friend-request-row>.community-actions{margin:0;gap:6px}.friend-request-row .community-actions button{padding:8px;min-height:44px} :root[data-theme] [data-community=requests].has-unread{border-color:var(--accent);font-weight:800} /* Observer hands must fit the game viewport, not extend behind the fixed dock. Short screens scroll inside the workspace so the last player remains reachable. */ :root[data-theme] body.in-game:has(#game.observing-hands) .play-workspace{overflow-y:auto;overscroll-behavior:contain} :root[data-theme] body.in-game #game.observing-hands .game-layout{min-height:560px} :root[data-theme] body.in-game #game.observing-hands:not(.damas-game) .arena{height:100%!important;min-height:560px!important;max-height:none!important} @media(max-width:700px) and (orientation:portrait){ :root[data-theme] body.in-game #game.observing-hands .game-layout{min-height:600px} :root[data-theme] body.in-game #game.observing-hands:not(.damas-game) .arena{min-height:600px!important} } /* Keep window tabs and the message shortcut at the same height and baseline. */ :root[data-theme] .window-switcher #dock>button,:root[data-theme] .window-switcher .social-shortcuts>button{height:44px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding-top:0;padding-bottom:0} /* Optional first visit introduction; independent of game and message windows. */ :root[data-theme] dialog.introduction-dialog{width:min(560px,calc(100vw - 24px));max-width:560px;max-height:calc(100dvh - 24px);box-sizing:border-box;padding:28px;border-radius:22px;overflow-y:auto} .introduction-dialog .dialog-heading{align-items:flex-start;gap:20px} .introduction-dialog .dialog-heading h2{font-size:26px;line-height:1.2;margin:0} .introduction-dialog .dialog-heading button{flex:none;min-width:44px;min-height:44px} .introduction-subtitle{margin:10px 0 20px;color:var(--muted)} .introduction-progress{font-size:13px;font-weight:700;letter-spacing:.03em;margin:0 0 12px;color:var(--muted)} .introduction-content{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-height:248px;box-sizing:border-box} .introduction-symbol{font-size:38px;line-height:1.2;letter-spacing:.05em;color:var(--gold,#ffd04b);margin-bottom:14px} .introduction-content h3{font-size:23px;line-height:1.2;margin:0 0 12px;text-transform:none;letter-spacing:normal} .introduction-content h3:focus-visible{outline:2px solid currentColor;outline-offset:4px} .introduction-content p{font-size:16px;line-height:1.5;margin:0 0 12px} .introduction-content .introduction-tip{margin-bottom:0;color:var(--muted)} .introduction-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px} .introduction-actions button{min-height:44px;padding:10px 16px} .introduction-actions button:first-child{margin-right:auto} .introduction-later{font-size:12px;line-height:1.5;color:var(--muted);margin:16px 0 0} @media(max-width:540px){:root[data-theme] dialog.introduction-dialog{padding:20px}.introduction-dialog .dialog-heading h2{font-size:23px}.introduction-content{padding:16px;min-height:0}.introduction-content h3{font-size:21px}.introduction-actions{gap:8px}.introduction-actions button{padding:10px 12px}.introduction-actions button:first-child{flex-basis:100%;margin-right:0}} @media(max-height:560px){:root[data-theme] dialog.introduction-dialog{padding:16px 20px}.introduction-dialog .dialog-heading h2{font-size:22px}.introduction-subtitle{display:none}.introduction-progress{margin-bottom:8px}.introduction-content{min-height:0;padding:12px 16px}.introduction-symbol{float:left;font-size:26px;margin:0 16px 8px 0}.introduction-content h3{font-size:20px}.introduction-content p{font-size:14px;line-height:1.4;margin-bottom:8px}.introduction-actions{margin-top:12px}.introduction-actions button:first-child{flex-basis:auto}.introduction-later{margin-top:8px}} /* Contextual guide: inline in the page, never a blocking overlay over a game. */ .guide-choices{display:grid;gap:10px;margin:20px 0} .guide-choice-button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px!important;min-height:72px} .guide-choice-button strong{font-size:18px}.guide-choice-button span{font-size:14px;line-height:1.4;color:var(--muted)} .guide-choice-button[data-guide-path="watch"]{border:2px solid #ffd04b!important} .context-guide{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-left:4px solid #ffd04b;border-radius:12px;padding:14px 18px;margin:14px 0 18px;background:var(--surface);color:var(--ink);flex-shrink:0} .context-guide>div:first-child{flex:1;min-width:0}.context-guide h2{font-size:20px;margin:4px 0 6px;line-height:1.2}.context-guide p{font-size:14px;line-height:1.45;margin:0;max-width:800px} .guide-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .guide-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.guide-actions button{min-height:44px;padding:8px 12px}.guide-actions .guide-close{font-size:22px;width:44px;padding:4px} :root[data-theme] .guide-target{outline:3px solid #ffd04b;outline-offset:3px!important} :root[data-theme] body.in-game.has-context-guide .play-workspace{overflow-y:auto!important} :root[data-theme] body.in-game.has-context-guide #game{height:auto!important;min-height:100%} :root[data-theme] body.in-game.has-context-guide #game .game-layout{flex:0 0 var(--guide-arena-height,620px)!important;min-height:var(--guide-arena-height,620px)!important} .guide-turn-hint{display:flex;align-items:center;gap:6px;max-width:210px;padding:6px 8px;margin-top:8px;background:var(--surface);border:1px solid #ffd04b;border-radius:8px;white-space:normal;font-size:12px;line-height:1.3} .guide-turn-hint button{flex:none;min-width:32px;min-height:32px;font-size:20px;padding:0} @media(max-width:700px){.context-guide{align-items:flex-start;flex-direction:column;gap:10px;padding:12px;margin:10px 0}.context-guide h2{font-size:18px}.context-guide p{font-size:13px}.guide-actions{width:100%}.guide-actions .guide-close{margin-left:auto}.guide-choice-button strong{font-size:17px}} @media(max-height:560px) and (orientation:landscape){.guide-choices{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}.guide-choice-button{padding:12px!important}.guide-choice-button strong{font-size:15px}.guide-choice-button span{font-size:12px}.context-guide{padding:8px 12px;margin:8px 0}.context-guide h2{font-size:16px}.context-guide p{font-size:12px}.guide-eyebrow{display:none}} .guide-turn-hint{display:block;max-width:100%;padding:5px;line-height:1.35}.guide-turn-hint>span{display:block}.guide-turn-hint button{display:block;margin:3px 0 0 auto} /* Help has its own violet palette, separate from game/team/turn colours. */ :root[data-theme] .guide-choice,:root[data-theme] .context-guide,:root[data-theme] .guide-turn-hint{background:#30204d!important;color:#fff!important;border-color:#c4a3ff!important;--ink:#fff;--muted:#e3d6f5;--surface:#30204d;--line:#a88aca} :root[data-theme] .guide-choice :is(h2,p,small,strong,span),:root[data-theme] .context-guide :is(h2,p,small){color:inherit} :root[data-theme] :is(.guide-choice,.context-guide,.guide-turn-hint) button,:root[data-theme] .guide-launcher{background:#493069!important;color:#fff!important;border:1px solid #c4a3ff!important} :root[data-theme] :is(.guide-choice,.context-guide,.guide-turn-hint) button:hover,:root[data-theme] .guide-launcher:hover{background:#64438e!important} :root[data-theme] :is(.guide-choice,.context-guide,.guide-turn-hint) button:focus-visible,:root[data-theme] .guide-launcher:focus-visible{outline:3px solid #eee2ff!important;outline-offset:3px} :root[data-theme] .guide-target{outline:3px solid #bf8cff;outline-offset:3px!important;box-shadow:0 0 0 6px #30204dbb} :root[data-theme] .guide-launcher{flex:none;white-space:nowrap;min-height:44px;padding:8px 12px;border-radius:12px;font-weight:700} :root[data-theme] .guide-choice-button[data-guide-path="watch"]{border-color:#c4a3ff!important} /* Help sits beside the game selector on desktop and mobile. */ .lobby-game-actions{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px} :root[data-theme] .lobby-game-actions>.compact-game-select{flex:1;min-width:0;margin:0} .lobby-game-actions #lobby-game{margin-top:0} :root[data-theme] .lobby-game-actions>.guide-launcher{margin-top:0;height:46px;width:46px;padding:0;font-size:23px;line-height:1} :root[data-theme] .window-switcher .guide-launcher{width:44px;padding:0;font-size:23px} @keyframes guide-highlight-pulse{0%,100%{outline-color:transparent;box-shadow:0 0 0 6px transparent,inset 0 0 0 100vmax transparent}25%,75%{outline-color:#9b51df;box-shadow:0 0 0 6px #9b51df66,inset 0 0 0 100vmax #9b51df33}50%{outline-color:#ead5ff;box-shadow:0 0 0 9px #d9b5ff88,inset 0 0 0 100vmax #d9b5ff55}} :root[data-theme] .guide-target{animation:guide-highlight-pulse 3s ease-in-out infinite!important} @media(prefers-reduced-motion:reduce){:root[data-theme] .guide-target{animation:none!important}} :root[data-theme] .topbar>.guide-launcher{width:40px;height:40px;min-height:40px;padding:0;font-size:22px;margin-left:0} #lobby.show-tournaments :is(#tables,#table-pages,#empty,.lobby-results-bar,#create-table,#random-table,.table-view-choice){display:none!important} #lobby.show-tournaments .lobby-content{display:block} #lobby.show-tournaments .lobby-aside{display:none} .lobby-tournaments-list{width:100%;min-width:0} :root[data-theme] .lobby-tournaments-list .tournament-list-row{background:var(--surface);border-color:var(--line);color:var(--ink)} :root[data-theme] .lobby-tournaments-list .tournament-list-row h3{color:var(--ink)} :root[data-theme] .lobby-competitions button[aria-pressed=true]{border-color:var(--accent);background:var(--surface-2)} :root[data-theme] .lobby-title-bar #create-tournament{flex-shrink:0;padding:13px 20px;font-size:15px} .lobby-tournaments-list .tournament-list-row{position:relative;cursor:pointer} .lobby-tournaments-list .tournament-open{position:static} .lobby-tournaments-list .tournament-open::after{content:"";position:absolute;inset:0;border-radius:14px} :root[data-theme] .lobby-tournaments-list .tournament-list-row:hover{border-color:var(--accent)} .lobby-tournaments-list .tournament-list-row:focus-within{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:700px){:root[data-theme] .lobby-title-bar #create-tournament{order:1;padding:9px 16px}} /* Provider identities remain consistent in both site themes. */ :root .login-panel .social-login button[data-provider], :root #facebook-continue{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;font-weight:600;line-height:1.35} :root .login-panel .social-login button[data-provider]::before, :root #facebook-continue::before{content:"";width:20px;height:20px;flex:0 0 20px;background:center/contain no-repeat} :root .login-panel .social-login button[data-provider="google"]{background:#fff;color:#1f1f1f;border:1px solid #747775} :root .login-panel .social-login button[data-provider="google"]::before{background-image:url('./google-signin.svg')} :root .login-panel .social-login button[data-provider="google"]:hover:not(:disabled){background:#f2f2f2;border-color:#1f1f1f} :root .login-panel .social-login button[data-provider="facebook"], :root #facebook-continue{background:#1877f2;color:#fff;border:1px solid #1877f2} :root .login-panel .social-login button[data-provider="facebook"]::before, :root #facebook-continue::before{background-image:url('./facebook-signin.svg')} :root .login-panel .social-login button[data-provider="facebook"]:hover:not(:disabled), :root #facebook-continue:hover:not(:disabled){background:#166fe5;border-color:#166fe5} :root #facebook-continue[hidden]{display:none} :root .login-panel .social-login button[data-provider]:focus-visible, :root #facebook-continue:focus-visible{outline:3px solid #ffcf48;outline-offset:3px} /* Mobile lobby banners follow account eligibility, not whether an ad has loaded. */ @media(min-width:320px) and (max-width:700px){body:not(.in-game) .play-workspace.ads-eligible .ad-right{display:block}} /* Restore both 160px rails when the viewport has room for the game lobby. */ @media(min-width:1650px){:root[data-theme] .play-workspace.ads-eligible{grid-template-columns:160px minmax(0,1fr) 160px;max-width:1900px;padding:0 16px}.play-workspace.ads-eligible .ad-left{display:block}}