.account-header-actions{position:absolute;right:240px;top:38px;display:grid;gap:6px;z-index:3}.account-header-actions [hidden]{display:none!important}.account-header-button{border:1px solid #159aa9;border-radius:7px;background:#fff;color:#153b53;padding:6px 12px;font:600 14px "Home Noto Sans JP",sans-serif;z-index:3}.account-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:90vh;overflow:auto;border:1px solid #34566c;border-radius:12px;padding:24px;background:#10283a;color:#eef6fb;font-family:"Home Noto Sans JP",sans-serif}.account-dialog::backdrop{background:#0008}.account-dialog h2{font-family:inherit;font-size:21px;margin:0 28px 16px 0}.account-dialog form{display:grid;gap:8px;margin-top:18px}.account-dialog input{box-sizing:border-box;width:100%;padding:8px;border:1px solid #34566c;border-radius:6px;background:#071724;color:#fff;font:inherit}.account-dialog button{font-family:inherit;padding:7px 12px;border:1px solid #51cdd0;border-radius:6px;background:#174757;color:#fff;cursor:pointer}.account-dialog button:disabled{opacity:.5}.account-close{position:absolute;top:12px;right:12px}.account-dialog p{font-size:14px;line-height:1.8;overflow-wrap:anywhere}.account-dialog [hidden]{display:none!important}#account-signout,#account-sync{margin:8px 5px 0 0}@media(max-width:760px){.account-header-actions{right:116px;top:12px;gap:4px}.account-header-button{font-size:12px;padding:4px 7px}}

.account-header-button{display:flex;align-items:center;justify-content:center;gap:8px}.account-login-icon{display:inline-flex;width:18px;height:18px;flex:0 0 18px}.account-login-icon svg{width:100%;height:100%}.account-login-icon img{width:100%;height:100%}#account-google{border-color:#747775;color:#1f1f1f}
.account-header-button{cursor:pointer}

/* Portrait header keeps its existing 44px/60px row allocation. */
@media(max-width:760px){
 .header-top{display:grid;grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:44px 60px;grid-template-areas:"brand account" "affinity affinity";align-items:center;gap:10px 8px;min-height:0;padding:12px 10px;background:#fff}
 .header-top .brand{grid-area:brand;display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:0;gap:6px;flex-shrink:1}
 .header-top .brand-logo{width:44px;height:32px;flex:0 0 44px}
 .header-top .brand-site-title{width:auto;min-width:0;padding:0;gap:2px;background:none;text-align:left}
 .header-top .brand-site-game{font-size:clamp(10.5px,3.3vw,14px);line-height:1.3;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
 .header-top .brand-site-tools{font-size:10px;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
 .header-top .header-banner-art{display:block;position:absolute;left:128px;right:0;bottom:4px;top:auto;width:auto;height:72px;min-height:0;margin:0;align-self:auto;overflow:hidden;background:transparent;z-index:0;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 36px)}
 .header-top .header-banner-art>img{right:0;top:0;height:100%;width:auto;max-width:none;clip-path:inset(0 0 0 4px);mask-image:none}
 .header-top .account-header-actions{grid-area:account;position:static;justify-self:end;min-width:0;width:110px;max-width:100%;gap:3px}
 .account-header-button{font-size:10px;line-height:1.4;padding:2px 4px;gap:3px;min-height:20px;white-space:nowrap}
 .account-header-actions .account-login-icon{width:12px;height:12px;flex-basis:12px}
 .header-top .header-affinities{grid-area:affinity;position:relative;inset:auto;justify-self:start;margin:0;padding:0;gap:4px;background:#fff;z-index:1}
 .header-top .header-affinities img{height:60px}
}
@media(max-width:360px){
 .header-top{grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:44px 52px;column-gap:6px}
 .header-top .brand{gap:5px}
 .header-top .brand-logo{width:34px;height:26px;flex-basis:34px}
 .header-top .brand-site-tools{font-size:9px}
 .header-top .account-header-actions{width:104px}
 .account-header-button{font-size:9px;padding:2px 3px}
 .header-top .header-affinities img{height:52px}
 .header-top .header-banner-art{left:112px;right:0;width:auto;height:64px}
}

/* Touch devices retain a dedicated landscape layout above the phone breakpoint. */
@media(min-width:761px) and (pointer:coarse){
 .site-header{padding:0 10px}
 .header-top{display:grid;grid-template-columns:220px minmax(0,1fr) 140px;grid-template-areas:"brand artwork affinity";align-items:center;gap:12px;min-height:128px;margin:0 -10px;padding:10px 12px;background:#fff}
 .header-top .brand{grid-area:brand;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;width:100%;flex-shrink:1}
 .header-top .brand-logo{width:80px;height:54px;flex:none}
 .header-top .brand-site-title{width:100%;min-width:0;padding:0;background:none;gap:3px}
 .header-top .brand-site-game{font-size:14px;line-height:1.4;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
 .header-top .brand-site-tools{font-size:11px;line-height:1.5;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
 .header-top .header-banner-art{grid-area:auto;position:absolute;left:160px;right:158px;top:0;bottom:0;width:auto;min-width:0;min-height:0;height:auto;margin:0;overflow:hidden;background:transparent;z-index:0;mask-image:linear-gradient(to right,transparent,#000 90px,#000 calc(100% - 12px),transparent);pointer-events:none}
 .header-top .header-banner-art>img{right:0;top:0;width:auto;height:100%;max-width:none;clip-path:inset(0 0 0 4px);mask-image:none}
 .header-top .account-header-actions{position:absolute;right:12px;top:10px;display:flex;flex-direction:row;gap:6px;max-width:270px;z-index:3}
 .account-header-button{font-size:11px;line-height:1.4;padding:3px 6px;gap:4px;min-height:26px;white-space:nowrap}
 .account-header-actions .account-login-icon{width:14px;height:14px;flex-basis:14px}
 .header-top .header-affinities{grid-area:affinity;position:relative;align-self:end;margin:0 0 2px;padding:0;background:#fff;gap:5px;justify-self:end;z-index:1}
 .header-top .header-affinities img{height:68px}
 .header-bottom .main-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;height:54px}
 .header-bottom .main-nav a{min-width:0;padding:5px 2px;font-size:12px}
 .header-bottom .version{display:none}
}

@media(orientation:landscape) and (pointer:coarse){.site-header{position:static;top:auto}}

@media(orientation:landscape) and (pointer:coarse){body{padding-top:0}html{scroll-padding-top:12px}}

#account-sync-actions{display:flex;align-items:center;gap:8px;margin-top:8px}#account-sync-actions #account-sync{margin:0}.account-dialog #account-sync-info{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;padding:0;border:0;background:transparent}.account-dialog #account-sync-info img{display:block;width:100%;height:100%}#account-sync-help{margin-bottom:0}

#account-sync-actions #account-sync{padding:4px 12px}.account-dialog #account-sync-info{width:30px;height:30px}#account-sync-help{box-sizing:border-box;width:min(360px,calc(100vw - 32px));margin:auto;padding:16px 18px;border:1px solid #51cdd0;border-radius:10px;background:#10283a;color:#eef6fb;font:600 14px/1.8 "Home Noto Sans JP",sans-serif;box-shadow:0 8px 24px #0006}#account-sync-help::backdrop{background:transparent}

#account-sync-help{position:fixed;inset:auto;margin:0}

#account-sync-actions #account-sync{height:28px;min-height:0;box-sizing:border-box;padding:0 12px;line-height:1.2}
/* compact refresh button */

@media(min-width:761px),(orientation:landscape){.account-header-button{box-sizing:border-box;min-height:0;height:28px;padding:0 8px;line-height:1.2}}

/* Phone: account controls sit above the banner, to the left of affinities. */
@media(max-width:760px){
 .site-header .header-top{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:60px 44px!important;grid-template-areas:"account affinity" "brand brand"!important;gap:8px!important}
 .site-header .header-top .account-header-actions{grid-area:account!important;position:relative!important;inset:auto!important;justify-self:start!important;align-self:center!important;width:110px!important;max-width:100%!important;z-index:4}
 .site-header .header-top .header-affinities{grid-area:affinity!important;justify-self:end!important;align-self:center!important;position:relative!important;inset:auto!important;z-index:3}
 .site-header .header-top .brand{grid-area:brand!important;position:relative;z-index:2;width:calc(100% - 100px)!important}
 .site-header .header-top .header-banner-art{left:128px!important;right:0!important;bottom:4px!important;top:auto!important;height:54px!important}
}
@media(max-width:360px){.site-header .header-top{grid-template-rows:52px 44px!important}.site-header .header-top .account-header-actions{width:104px!important}}

/* Phone: account controls sit above the banner, to the left of affinities. */
@media(max-width:760px){
 .site-header .header-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:60px 44px!important;grid-template-areas:"account affinity" "brand brand"!important;gap:8px!important}
 .site-header .header-top .account-header-actions{grid-area:account!important;position:relative!important;inset:auto!important;justify-self:start!important;align-self:center!important;width:110px!important;max-width:100%!important;z-index:4}
 .site-header .header-top .header-affinities{grid-area:affinity!important;justify-self:end!important;align-self:center!important;position:relative!important;inset:auto!important;z-index:3}
 .site-header .header-top .brand{grid-area:brand!important;position:relative;z-index:2;width:calc(100% - 100px)!important}
 .site-header .header-top .header-banner-art{left:128px!important;right:0!important;bottom:4px!important;top:auto!important;height:54px!important}
}
@media(max-width:360px){.site-header .header-top{grid-template-rows:52px 44px!important}.site-header .header-top .account-header-actions{width:104px!important}}

/* Phone: account controls sit above the banner, to the left of affinities. */
@media(max-width:760px){
 .site-header .header-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:60px 44px!important;grid-template-areas:"account affinity" "brand brand"!important;gap:8px!important}
 .site-header .header-top .account-header-actions{grid-area:account!important;position:relative!important;inset:auto!important;justify-self:start!important;align-self:center!important;width:110px!important;max-width:100%!important;z-index:4}
 .site-header .header-top .header-affinities{grid-area:affinity!important;justify-self:end!important;align-self:center!important;position:relative!important;inset:auto!important;z-index:3}
 .site-header .header-top .brand{grid-area:brand!important;position:relative;z-index:2;width:calc(100% - 100px)!important}
 .site-header .header-top .header-banner-art{left:128px!important;right:0!important;bottom:4px!important;top:auto!important;height:54px!important}
}
@media(max-width:360px){.site-header .header-top{grid-template-rows:52px 44px!important}.site-header .header-top .account-header-actions{width:104px!important}}