@import url('./tabletop/rooms.css');
/* Hide page scroll tracks while retaining native wheel, touch and keyboard scrolling. */
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
/* Shared chrome: brand, destination rail, and one compact utility dock. */
.has-play-header .game-switcher,.has-play-header .header-legacy{display:none!important}
.has-play-header .play-header{--header-well:#1e1e1e;--header-edge:inset 0 1px 2px #0005,inset 0 -1px 0 #ffffff04;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:20px;height:80px;min-height:80px;padding:0;position:relative;z-index:60;overflow:visible;border:0}
.has-play-header .play-header.has-primary-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:24px}
.play-header-lead{display:flex;align-items:center;gap:20px;min-width:0;justify-self:start}
.has-play-header .play-header .header-home{display:inline-flex!important;align-items:center;gap:10px;flex:none;min-height:44px;margin:0;color:#d9d9d9;text-decoration:none;transition:opacity .18s}
.header-brand-mark{width:25px;height:25px;fill:currentColor;flex:none}
.has-play-header .header-home .header-brand-word{font:500 22px/1 var(--sans);letter-spacing:-1.1px;color:#dedede}
.has-play-header .header-home .header-brand-word>span{font-weight:300;color:#a6a6a6}
.header-home:hover{opacity:.8}.header-home:active{opacity:.6}
.has-play-header .play-header .header-navigation{display:flex;align-items:center;gap:3px;width:520px;overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0;margin:0;padding:4px;border:0;border-radius:15px;background:var(--header-well);box-shadow:var(--header-edge)}
.has-play-header .play-header .header-navigation>a{display:flex;flex:1 0 auto;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:0 10px;border:0;border-radius:11px;color:#959595;background:transparent;box-shadow:none;font:400 13px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:color .18s,background .18s,box-shadow .18s}
.has-play-header .play-header .header-navigation>a:hover{color:#e0e0e0;background:#ffffff05}
.has-play-header .play-header .header-navigation>a[aria-current=page]{color:#ededed;background:linear-gradient(180deg,#363636,#2c2c2c);box-shadow:inset 0 1px 0 #ffffff0d,0 2px 5px #0004}
.has-play-header .play-header .header-navigation strong{font:inherit}
.has-play-header .play-header .header-navigation small{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:5px;color:#bdbdbd;background:#ffffff08;font:500 10px/1 var(--sans);font-variant-numeric:tabular-nums}
.has-play-header .play-header .header-navigation small[hidden]{display:none}
.header-game-home{display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;padding:0 8px;color:#aaa;border-radius:9px;text-decoration:none;transition:background .18s,color .18s}
.header-game-home:hover{background:#ffffff05;color:#ddd}
.header-game-icon{width:23px;height:23px;flex:none;color:#bebebe}
.header-game-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;font:400 13px/1.2 var(--sans)}
.header-browse-mark{width:13px;height:13px;flex:none;color:#747474}
.has-play-header .play-header .play-header-tools{display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:0;position:relative;flex:none;margin:0;padding:4px;border:0;border-radius:15px;background:var(--header-well);box-shadow:var(--header-edge)}
.has-play-header .play-header .play-header-tools :is(.sound-button,.header-language,.header-help,.account-menu-trigger,.board-invite-badge){display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:11px;background:transparent;box-shadow:none;color:#b3b3b3;font:500 12px/1 var(--sans);text-decoration:none;transition:color .18s,background .18s}
.has-play-header .play-header .play-header-tools :is(.sound-button,.header-language,.header-help,.account-menu-trigger,.board-invite-badge):hover,.has-play-header .play-header .play-header-tools [aria-expanded=true]:is(.sound-button,.header-language,.account-menu-trigger){color:#e5e5e5;background:#ffffff07;box-shadow:none;transform:none}
.has-play-header .play-header .play-header-tools :is(.sound-button,.header-language,.account-menu-trigger):active{background:#ffffff0b}
.has-play-header .play-header-tools .sound-button-label,.has-play-header .play-header-tools .sound-indicator{display:none}
.has-play-header .play-header .play-header-tools .sound-button>svg{width:20px;height:20px}
.has-play-header .play-header .play-header-tools .header-help{font-size:0}
.play-header-tools>.header-help::before{content:'?';font:400 17px var(--sans)}
.header-account{position:relative;flex:none}
.play-header .account-menu-trigger .account-menu-avatar{width:30px;height:30px;background:#292929;box-shadow:0 0 0 1px #ffffff0a}
.play-header .sound-control{position:static}
.play-header .sound-panel{right:0;top:calc(100% + 12px);max-width:calc(100vw - 24px)}
.play-header :is(a,button):focus-visible{outline:1.5px solid #aaa;outline-offset:3px}
.language-control{position:relative;flex:none}
.language-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:160;min-width:152px;padding:6px;border:0;border-radius:14px;background:#272727;box-shadow:0 16px 40px #0006}
.language-menu>button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:44px;padding:0 13px;border:0;border-radius:9px;background:none;color:#aaa;font:400 14px var(--sans);white-space:nowrap}
.language-menu>button:hover,.language-menu>button:focus-visible{background:#343434;color:#e5e5e5;outline:none}
.language-menu>button[aria-checked=true]{color:#e5e5e5}
.language-menu>button[aria-checked=true]::after{content:'✓';font-size:12px;color:#a7a7a7}
html[lang=ja]{--sans:'Space Grotesk','Hiragino Sans','Yu Gothic','Meiryo',sans-serif}
html[lang=ja] .header-game-name{letter-spacing:0}
@media(min-width:761px) and (min-height:501px),(min-width:1001px){
 .has-play-header.desktop-play-page .play-header{height:60px;min-height:60px;flex:0 0 60px;padding:0}
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .has-play-header .play-header{gap:8px;height:calc(56px + env(safe-area-inset-top));min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 0 0;flex:none}
 .play-header-lead{gap:4px;flex:1;min-width:0}
 .has-play-header .play-header .header-home{width:32px;min-width:32px;justify-content:center;gap:0}
 .has-play-header .header-home .header-brand-word{display:none}
 .header-brand-mark{width:23px;height:23px}
 .header-game-home{padding:0 4px;gap:7px}
 .header-game-name{font-size:12px;max-width:120px}
 .header-browse-mark{display:none}
 .play-header-lead>.header-lobby-link{width:40px;min-width:40px;padding:0;gap:0}
 .play-header-lead>.header-lobby-link>span{display:none}
 .play-header:has(.header-help) .header-game-name{max-width:calc(100vw - 302px)}
}
@media(max-width:1040px){
 .has-play-header .play-header.has-primary-navigation{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:10px;height:auto;min-height:0;padding:calc(12px + env(safe-area-inset-top)) 0 16px}
 .has-primary-navigation>.play-header-lead{grid-column:1;grid-row:1}
 .has-primary-navigation>.play-header-tools{grid-column:2;grid-row:1}
 .has-play-header .play-header.has-primary-navigation>.header-navigation{grid-column:1/-1;grid-row:2;justify-self:center;width:min(100%,520px);gap:4px}
 .has-play-header .play-header.has-primary-navigation .header-home{width:auto;min-width:0;gap:8px;justify-content:flex-start}
 .has-play-header .has-primary-navigation .header-home .header-brand-word{display:inline;font-size:21px}
 .has-primary-navigation .header-brand-mark{width:23px;height:23px}
}
@media(max-width:360px){
 .header-game-name{display:none}
 .header-game-home{width:34px;justify-content:center}
 .has-play-header .has-primary-navigation .header-home .header-brand-word{font-size:19px}
 .has-primary-navigation .header-brand-mark{width:21px;height:21px}
 .has-play-header .play-header .header-navigation>a{padding-inline:5px;font-size:12px}
 .has-play-header .play-header .header-navigation small{min-width:15px;height:15px;font-size:9px;padding-inline:3px}
}
@media(max-width:600px){
 .has-play-header .play-header:has(.board-invites:not([hidden])) .header-brand-word{display:none}
 .play-header:has(.board-invites:not([hidden])) .header-game-name{display:none}
}
@media(max-width:700px){
 .profile-page.chat-focused .play-header.has-primary-navigation>.header-navigation{display:none}
 .has-play-header.profile-page.chat-focused .play-header.has-primary-navigation{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){.play-header :is(a,button){transition:none!important}}

/* Ranking stays with the game heading, leaving room for the player/avatar above. */
.game-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;grid-column:1/-1;grid-row:1}
.game-heading-row>h1{min-width:0;flex:1}
.game-heading-tools{display:flex;align-items:center;gap:3px;flex:none;position:relative;z-index:12}
.game-ranking{position:relative;flex:none}
.game-ranking-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 3px;color:#bdbdbd;font:400 11px/1 var(--sans);text-decoration:none;white-space:nowrap;border-radius:8px;transition:color 150ms ease,background 150ms ease}
.game-ranking-link svg{width:17px;height:17px;flex:none;color:#919191}
.game-ranking-link:hover{color:#f0f0f0;background:#ffffff04}.game-ranking-link:hover svg{color:#c7c7c7}
.game-heading-tools>.game-help{width:auto;min-width:44px;margin:0}
.game-heading-tools>.game-help:not([open])>summary,.game-heading-tools>#help-btn{display:flex;align-items:center;justify-content:center;min-width:44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:#a2a2a2;font-size:0;box-shadow:none}
.game-heading-tools>.game-help:not([open])>summary::before,.game-heading-tools>#help-btn::before{content:'?';display:block;font:400 16px/1 var(--sans)}
.game-heading-tools>.game-help:not([open])>summary::after{display:none}
.game-ranking :is(a,button):focus-visible,.game-heading-tools>#help-btn:focus-visible{outline:1.5px solid #aaa;outline-offset:2px}
.has-play-header #duo-ranking{display:none!important}
.duo-ranking-rail{display:flex;justify-content:flex-end;min-height:44px;margin-top:-20px;margin-bottom:8px}
.duo-ranking-rail[hidden]{display:none!important}
.room-meta:has(>.game-ranking){min-height:44px;gap:8px}
.room-meta>.game-ranking{margin-left:auto}
.room-meta:has(>.game-ranking)>#copy-room{font-size:0;min-width:44px;width:44px;min-height:44px;margin-left:auto}
.room-meta:has(>.game-ranking)>#copy-room::after{content:'↗';font:400 18px/1 var(--sans)}
@media(min-width:761px) and (min-height:501px),(min-width:1001px){
 .desktop-play-page .game-heading-row{display:flex;flex-direction:column;align-items:stretch;gap:2px}
 .desktop-play-page .game-heading-tools{justify-content:space-between}
 .desktop-play-page .game-heading-tools>.game-help[open]{top:44px}
 .desktop-chroma-page .game-heading-row{grid-column:2;grid-row:1}
 .desktop-chroma-page .game-layout{grid-template-rows:86px 60px minmax(108px,1fr) 24px 58px 44px}
 .desktop-chroma-page .game-heading-row h1{line-height:1.2}
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .game-heading-row{gap:4px}.game-ranking-link{font-size:12px;gap:5px;padding-inline:2px}
 .game-heading-tools{gap:0}.game-heading-tools>.game-help[open]{font-size:12px}
 .duo-ranking-rail{margin-top:-14px}
 .room-meta:has(>.game-ranking){flex-basis:44px;padding-inline:0;gap:4px}
 .room-meta:has(>.game-ranking)>span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.game-ranking-link{transition:none}}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 /* Chroma already names the game in the main header; keep its difficulty and
    ranking on one compact row instead of taking another row from the board. */
 .desktop-chroma-page .intro{column-gap:4px}
 .desktop-chroma-page .intro>.game-heading-row{grid-column:1;grid-row:1;justify-content:flex-start}
 .desktop-chroma-page .game-heading-row>h1{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(min-width:761px) and (min-height:501px),(min-width:1001px){
 /* Only unresolved/guest score details need the extra control. Keep its target
    beside the ranking link; the help icon can occupy a second rail row. */
 .desktop-play-page .game-heading-tools:has(.rank-status-trigger:not([hidden])){flex-wrap:wrap;justify-content:flex-start}
 .desktop-play-page .play-layout:has(.rank-status-trigger:not([hidden])) .game-panel{grid-template-rows:120px auto minmax(0,1fr) 66px}
 .desktop-chroma-page .game-layout:has(.rank-status-trigger:not([hidden])){grid-template-rows:130px 60px minmax(108px,1fr) 24px 58px 44px}
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .desktop-chroma-page .intro:has(.rank-status-trigger:not([hidden])) .chroma-difficulty{width:104px}
 .game-heading-row:has(.rank-status-trigger:not([hidden]))>h1{font-size:26px}
}

.header-lobby-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 11px;border-radius:9px;color:#999;font:400 12px var(--sans);white-space:nowrap;transition:background .15s,color .15s}.header-lobby-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.header-lobby-link:hover,.header-lobby-link[aria-current=page]{background:#ffffff05;color:#ddd}
@media(max-width:760px){.header-lobby-link{padding:0 8px;gap:5px;font-size:11px}.header-lobby-link svg{width:17px;height:17px}}

/* Six destinations stay on one scrollable rail on narrow screens. */
@media(max-width:600px){.has-play-header .play-header.has-primary-navigation>.header-navigation{display:flex;justify-self:stretch;width:100%;overflow-x:auto;scrollbar-width:none}.has-play-header .play-header .header-navigation>a{flex:1 0 auto;min-width:62px;padding-inline:11px}.header-navigation::-webkit-scrollbar{display:none}}